@charset "utf-8";


#connect #service .items .item1 .texts {
   background-image: url(../commons/img/mn_icon_1.svg);
}

#connect #service .items .item2 .texts {
   background-image: url(../commons/img/mn_icon_2.svg);
}

#connect #service .items .item3 .texts {
   background-image: url(../commons/img/mn_icon_3.svg);
}

#connect #service .items .item4 .texts {
   background-image: url(../commons/img/mn_icon_4.svg);
}

#connect #service .items .item5 .texts {
   background-image: url(../commons/img/mn_icon_5.svg);
}

#connect #service .items .item6 .texts {
   background-image: url(../commons/img/mn_icon_6.svg);
}

#connect #service .items .item7 .texts {
   background-image: url(../commons/img/mn_icon_7.svg);
}

#connect #service .items .item1 .image {
   background-image: url(img/1.jpg);
}

#connect #service .items .item2 .image {
   background-image: url(img/2.jpg);
}

#connect #service .items .item3 .image {
   background-image: url(img/3.jpg);
}

#connect #service .items .item4 .image {
   background-image: url(img/4.jpg);
}

#connect #service .items .item5 .image {
   background-image: url(img/5.jpg);
}

#connect #service .items .item6 .image {
   background-image: url(img/6.jpg);
}

#connect #service .items .item7 .image {
   background-image: url(img/7.jpg);
}

#connect #info table a {
   text-decoration: underline;
}

@media print,
screen and (min-width: 751px) {


   #connect #kv {
      height: 600px;
      position: relative;
   }

   #connect #kv .image {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url(img/kv.jpg);
      background-position: center calc(30%);
      background-size: cover;
      position: relative;
   }

   #connect #kv .image .device {
      position: absolute;
      right: 0;
      bottom: 0;
      background-image: url(../top/img/kv_hand.png);
      background-size: 100% 100%;
      width: calc(1139px * 0.4);
      height: calc(1412px * 0.4);
   }


   #connect .title {
      position: absolute;
      left: calc(50% - 300px - 15%);
      bottom: 40px;
   }

   #connect #kv h1 {
      background-image: url(../commons/img/connect_logo.svg);
      background-size: 100% 100%;
      width: calc(177.057px * 2.75);
      height: calc(48.495px * 2.75);
      text-indent: -9999px;
   }

   #connect #kv .shoulder {
      font-family: 'SuzukiPROHeadline';
      font-size: 28px;
      line-height: 1.5em;
      color: #052A7F;
      text-align: center;
      margin-top: 10px;
   }

   #connect #lead {
      padding-top: 80px;
   }

   #connect #lead .inner {
      width: 88%;
      margin-left: auto;
      margin-right: auto;
      font-size: 20px;
      line-height: 1.5em;
      /* text-align: center; */
   }




   #connect #service .hd {
      margin-top: 80px;
      padding-top: 80px;
      background-color: #EFEFEF;
      padding-bottom: 80px;
   }

   #connect #service .hd .inner {
      width: 88%;
      margin-left: auto;
      margin-right: auto;
   }

   #connect #service .hd h2 {
      font-size: 36px;
      font-family: 'SuzukiPROHeadline';
   }

   #connect #service .hd .lead {
      margin-top: 20px;
      font-size: 16px;
      line-height: 1.75em;
   }


   #connect #service .hd .note {
      margin-top: 20px;
      font-size: 14px;
      line-height: 1.75em;
   }
   #connect #service .hd .note li {
      text-indent: -1em;
      margin-left: 1em;
   }



   #connect #service .items {}

   #connect #service .items .item {
      height: 400px;
      display: block;

      display: flex;
      justify-content: space-between;
   }

   #connect #service .items .item:nth-child(even) {
      background-color: #EFEFEF;
   }

   #connect #service .items .item .texts {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      background-size: calc(150px) calc(150px);
      background-repeat: no-repeat;
      background-position: calc(40px) center;
      padding-left: 220px;
      padding-right: 40px;
      box-sizing: border-box;
   }

   #connect #service .items .item .texts .tit {
      font-family: 'SuzukiPROHeadline';
      display: block;
      font-size: 42px;
      line-height: 1.2em;
      color: #052A7F;
   }

   #connect #service .items .item .texts .body {
      font-family: 'SuzukiPROBold';
      display: block;
      font-size: 16px;
      line-height: 1.75em;
      color: #052A7F;
      margin-top: 10px;
   }

   #connect #service .items .item .image {
      display: block;
      width: 500px;

      background-position: center center;
      background-size: cover;
   }
   #connect #service .items .item .image a{
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
   }

   #connect #service .items .item .image:hover{
      opacity:0.75;
   }

   #connect #service .more {
      text-align: center;
      margin-top: 20px;
   }

   #connect #service .more a {
      font-family: 'SuzukiPROBold';
      display: inline-block;
      background-image: url(../commons/img/ico_arrow.svg);
      background-size: 28px 28px;
      background-repeat: no-repeat;
      background-position: calc(100%) center;
      color: #00368F;
      font-size: 16px;
      line-height: 1em;
      padding-right: 40px;
      padding-top: 20px;
      padding-bottom: 20px;
      text-decoration: none;
   }









   #connect #info {
      padding-top: 50px;
      padding-left: 40px;
      padding-right: 40px;
      padding-bottom: 50px;
   }

   #connect #info .inner {
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
   }

   #connect #info h2 {
      text-align: center;
      font-size: 36px;
      font-family: 'SuzukiPROHeadline';
      line-height: 1.35em;
      border-bottom: 2px #707070 solid;
      padding-bottom: 10px;
   }

   #connect #info table {
      width: 100%;
   }

   #connect #info table th,
   #connect #info table td {
      border-bottom: 1px #707070 solid;
      font-size: 16px;
      line-height: 1.5em;
      padding: 15px;
   }

   #connect #info table th {
      padding-right: 40px;
      white-space:nowrap;
   }

   #connect #info table td {
      width: 100%;
      word-break: break-all;
      word-wrap: break-word;
   }



   #connect #info .more {
      text-align: center;
      margin-top: 20px;
   }

   #connect #info .more a {
      font-family: 'SuzukiPROBold';
      display: inline-block;
      background-image: url(../commons/img/ico_arrow.svg);
      background-size: 28px 28px;
      background-repeat: no-repeat;
      background-position: calc(100%) center;
      color: #00368F;
      font-size: 16px;
      line-height: 1em;
      padding-right: 40px;
      padding-top: 20px;
      padding-bottom: 20px;
      text-decoration: none;
   }

}










@media only screen and (max-width: 750px) {


   #connect #kv {
      position: relative;
      height: 100vw;
   }

   #connect #kv .image {
      width: 100%;
      height: 100%;
      background-image: url(img/kv_sp.jpg);
      background-position: center center;
      background-size: cover;
      position: absolute;
      left: 0;
      top: 0;
   }


   #connect #kv .title {
      position: absolute;
      left: 3vw;
      bottom: 20vw;
   }

   #connect #kv h1 {
      display: block;
      background-image: url(../commons/img/connect_logo.svg);
      background-size: 100% 100%;
      width: 56vw;
      height: calc(56vw / 177.057 * 48.495);
      text-indent: -9999px;

   }

   #connect #kv .shoulder {
      font-family: 'SuzukiPROBold';
      font-size: 3.5vw;
      line-height: 1.5em;
      color: #052A7F;
      text-align: center;
      margin-top: 4vw;
   }

   #connect #lead {
      padding-top: 40px;
      font-size: 15px;
      line-height: 2em;
      padding-bottom: 40px;
      margin-left: 20px;
      margin-right: 20px;
   }








   #connect #service .hd {
      padding-top: 40px;
      background-color: #EFEFEF;
      padding-bottom: 40px;
   }

   #connect #service .hd .inner {
      margin-left: 20px;
      margin-right: 20px;
   }

   #connect #service .hd h2 {
      font-size: 24px;
      line-height: 1.5em;
      font-family: 'SuzukiPROHeadline';
   }

   #connect #service .hd .lead {
      margin-top: 20px;
      font-size: 16px;
      line-height: 1.75em;
   }


   #connect #service .hd .note {
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.5em;
   }
   #connect #service .hd .note li {
      text-indent: -1em;
      margin-left: 1em;
   }








   #connect #service .items {}

   #connect #service .items .item {
      position: relative;

   }

   #connect #service .items .item:nth-child(even)  {
      background-color: #EFEFEF;
   }


   #connect #service .items .item  {
      display: block;
   }

   #connect #service .items .item .texts {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      background-size: calc(50px) calc(50px);
      background-repeat: no-repeat;
      background-position: calc(10px) 20px;
      box-sizing: border-box;
   }

   #connect #service .items .item .texts .tit {
      font-family: 'SuzukiPROHeadline';
      display: block;
      font-size: 20px;
      line-height: 1.35em;
      color: #052A7F;
      height: 100px;
      width: calc(100% - 140px);
      display: flex;
      align-items: center;
      padding-left: 70px;
      box-sizing: border-box;
   }

   #connect #service .items .item .texts .body {
      font-family: 'SuzukiPROBold';
      display: block;
      font-size: 13px;
      line-height: 1.5em;
      color: #052A7F;
      padding: 20px;
      padding-right: 50px;
   }

   #connect #service .items .item .image {
      display: block;
      width: 140px;
      height: 100px;
      margin-left: auto;
      background-position: center center;
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0;

   }

   #connect #service .items .item .image a{
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
   }

   


   #connect #service .more {
      text-align: center;
   }

   #connect #service .more a {
    display: block;
      background-image: url(../commons/img/ico_arrow.svg);
      background-size: 28px 28px;
      background-repeat: no-repeat;
      background-position: calc(100% - 10px) calc(100% - 20px);
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   text-indent: -9999px;
   text-decoration: none;
   }






   #connect #info {
      padding-top: 40px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 40px;
   }

   #connect #info .inner {
      margin-left: auto;
      margin-right: auto;
   }

   #connect #info h2 {
      text-align: center;
      font-size: 32px;
      font-family: 'SuzukiPROHeadline';
      line-height: 1.35em;
      border-bottom: 2px #707070 solid;
      padding-bottom: 10px;
   }

   #connect #info table {
      width: 100%;
   }

   #connect #info table th,
   #connect #info table td {
      border-bottom: 1px #707070 solid;
      font-size: 13px;
      line-height: 1.5em;
      padding-top: 10px;
      padding-bottom: 10px;
   }

   #connect #info table th {
      padding-right: 20px;
   }

   #connect #info table td {
      width: 100%;
      word-break: break-all;
      word-wrap: break-word;
   }


   #connect #info .more {
      text-align: center;
      margin-top: 20px;
   }

   #connect #info .more a {
      font-family: 'SuzukiPROBold';
      display: inline-block;
      background-image: url(../commons/img/ico_arrow.svg);
      background-size: 28px 28px;
      background-repeat: no-repeat;
      background-position: calc(100%) center;
      color: #00368F;
      font-size: 16px;
      line-height: 1em;
      padding-right: 40px;
      padding-top: 20px;
      padding-bottom: 20px;
      text-decoration: none;
   }

}