@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

body{
-webkit-print-color-adjust: exact;
color:#1D2125; /* */
font-family: "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic", 游ゴシック, "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;
-webkit-text-size-adjust: 100%;
line-height:1.5em;
text-align:center;
}
html{
  -webkit-font-smoothing: antialiased;
}

/* リンク */
a:link{
color:#1D2125; /* 色 */
text-decoration:none;
}
a:visited{
color:#1D2125; /* 色 */
text-decoration:none;
}
a:hover {
color:#1D2125; /* 色 */
text-decoration:none;
}
a:active {
color:#1D2125; /* 色 */
text-decoration:none;
}
.text-link a:hover,
a.text-link:hover{
  text-decoration: underline;
}

#wrapper{
  width:100%;
  overflow-x: hidden;
}
.svgArea{display: none;}

.image{
  font-size: 0;
  line-height: 0;
}

:root {
  --color-white: #ffffff;
  --color-yellow: #DDFC54;
  --color-sky: #34ADCA;
  --color-bluelightlight: #F4F9FF;
  --color-bluelight: #E6F1FF;
  --color-blue: #0E63C4;
  --color-navy: #233447;
  --color-black: #1D2125;
}

/* bg
----------------------- */
.bg-white{ background-color: var(--color-white)}
.bg-yellow{ background-color: var(--color-yellow)}
.bg-sky{ background-color: var(--color-sky)}
.bg-bluelightlight{ background-color: var(--color-bluelightlight)}
.bg-bluelight{ background-color: var(--color-bluelight)}
.bg-blue{ background-color: var(--color-blue)}
.bg-navy{ background-color: var(--color-navy)}
.bg-black{ background-color: var(--color-black)}
/* font
----------------------- */
.font-en{
  letter-spacing: 0.05em;
  font-family: "Montserrat", sans-serif;
}
.en-Up{
  text-transform: uppercase;
}
.color-white{ color: var(--color-white)}
.color-yellow{ color: var(--color-yellow)}
.color-sky{ color: var(--color-sky)}
.color-bluelightlight{ color: var(--color-bluelightlight)}
.color-bluelight{ color: var(--color-bluelight)}
.color-blue{ color: var(--color-blue)}
.color-navy{ color: var(--color-navy)}
.color-black{ color: var(--color-black)}

.image{
  overflow: hidden;
}
.image img{
  max-width: 100%;
  height: auto;
}
.txt-image{
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}
@media print, screen and (max-width:767px){
  .image-scroll{
    position: relative;
    overflow-x: scroll;
    img{
      margin: 0 -100% 0 0;
      width: 200%;
      max-width: 200%;
    }
    &::after{
      content: "";
      position: absolute;
      background: url("../img/sp_scroll.png") center center no-repeat;
      -moz-background-size: 100% auto;
      background-size: 100% auto;
      width: 61.5vw;
      height: 33.58vw;
      left: 100%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &.move::after{
      display: none;
    }
  }
}
/* .image-f
----------------------- */
.image-f{
  font-size: 0;
  line-height: 0;
}
.image-f img{
  opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";
  transition-property: opacity,filter;
  transition: 0.15s linear;
}
.image-f:hover img{
  opacity:.6;filter: alpha(opacity=60);-ms-filter: "alpha(opacity=60)";
}
/* .image-z
----------------------- */
.image-z {
  font-size: 0;
  line-height: 0;
  text-align: center;
  overflow: hidden;
}
.image-z img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.image-z__hover {
  transform: scale(1);
  transition-property: transform,-webkit-transform;
  transition: 0.1s linear;
}
a:hover .image-z__hover {
  transform: scale(1.1);
  transform-origin: 50% 50%;
}
/* ========================================================
bt
======================================================== */
.bt_radius a,.bt_radius input{
  border-radius: 9999px;
  padding: 1em;
}
.bt_color-red a,.bt_color-red input,.bt_color-blue a,.bt_color-blue input{
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  transition-property: background-color,color;
  transition: 0.1s linear;
  text-align: center;
  font-weight: bold;
  i{
    display: inline-block;
    vertical-align: middle;
    margin-left: 1em;
  }
}
.bt_color-red a,.bt_color-red input{
  color: #fff;
  background-color: #BA0D24;
  border: solid 1px #BA0D24;
  svg {
    stroke:#fff;
  }
  &:hover{
    background-color: #fff;
    color: #BA0D24;
    svg {
      stroke:#BA0D24;
    }
  }
}
.bt_color-blue a,.bt_color-blue input{
  color: #fff;
  background-color: var(--color-blue);
  border: solid 1px var(--color-blue);
  svg {
    stroke:#fff;
  }
  &:hover{
    background-color: #fff;
    color: var(--color-blue);
    svg {
      stroke:var(--color-blue);
    }
  }
}
/* ========================================================
list
======================================================== */
/* list-circle
----------------------- */
.list-circle li{
  padding-left: 1em;
  position: relative;
  margin-top: 0.2em;
  &::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0.5em;
    border-radius: 9999px;
    width: 0.625em;
    height: 0.625em;
    border: solid 2px var(--color-blue);
  }
}
/* list-check
----------------------- */
.list-check li{
  padding-left: 1.5em;
  position: relative;
  margin-top: 0.5em;
  &::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0.2em;
    border-radius: 9999px;
    width: 1.25em;
    height: 1.25em;
    background-color: var(--color-sky);
  }
  &::after{
    content: "";
    display: block;
    position: absolute;
    left: 0.3em;
    top: 0.5em;
    width: 0.6em;
    height: 0.4em;
    border-left:solid 2px #fff;
    border-bottom:solid 2px #fff;
    transform: rotate(-45deg);
  }
}
/* ========================================================
animation
======================================================== */
/* .move-slide-up
----------------------- */
.fameIn-slide-up{
  opacity:0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";
}
.move-slide-up{
  animation: slide-up 0.8s ease-in-out 1 alternate;
  opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";
}
@keyframes slide-up {
  0% {
    transform:translate(0, 5%);
    opacity:0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";
  }
  100% {
    transform:translate(0, 0);
    opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";
  }
}
/* .move-float
----------------------- */
.move-float{
  animation: float 3s ease-in-out infinite alternate;
}
@keyframes float {
  0% {
    transform:translate(0, 0);
  }
  50% {
    transform:translate(0, -2%);
  }
  100% {
    transform:translate(0, 0);
  }
}
/* .move-pop
----------------------- */
.move-pop{
  animation: pop 0.4s ease-out 1;
  transform-origin: 50% 50%;
}
@keyframes pop {
  0%,100% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.1);
  }
}
.show{display: block !important;}
.hide{display: none !important;}

@media print, screen and (min-width:768px){
  body{
    font-size:16px;
    line-height: 1.5em;
    min-width:1040px;
  }
  .spVer{
    display: none !important;
  }
}

@media screen and (max-width: 767px){
  body{
   font-size:4.1vw;
  }
  .pcVer{
    display: none !important;
  }
  #wrapper{
    overflow-x: hidden;
  }
}
/* contentInner
----------------------- */
.contentInner{
  max-width: 1120px;
  margin: 0 auto;
  .contentHeadline{
    font-size: 36px;
    line-height: 1.25em;
  }
}
@media screen and (max-width: 767px){
  .contentInner{
    max-width: 89.8vw;
    .contentHeadline{
      font-size: 6.15vw;
      line-height: 1.25em;
    }
  }
}

/* ========================================================
header
======================================================== */
.headerArea{
  background-color: #fff;
  width: 100%;
  height: 80px;
}
.headerInner{
  background-color: #fff;
  position: relative;
  width: 100%;
  min-width: 1040px;
  height: 80px;
  z-index: 100;
}
.scroll .headerInner{
  position: fixed;
  z-index: 500;
  animation: scrollHeader 0.3s ease-in-out 1 alternate;
  left: 0;
  top: 0;
}
@keyframes scrollHeader {
  0% {
    transform:translate(0, -100%);
  }
  100% {
    transform:translate(0, 0);
  }
}
.header_logo{
  text-align: left;
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translate(0, -50%);
  span{
    font-weight: bold;
    line-height: 1;
    display: block;
    margin-bottom: 0.34em;
    font-size: 12px;
  }
  a{
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../img/logo.png") left top no-repeat;
    -moz-background-size: 100% auto;
    background-size: 100% auto;
    width: 201px;
    height: 30px;
    opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";
    transition-property: opacity,filter;
    transition: 0.2s linear;
  }
  a:hover{
    opacity:.6;filter: alpha(opacity=60);-ms-filter: "alpha(opacity=60)";
  }
}
.header_navWrap{
    display:flex;
    -ms-flex-pack:distribute;
   flex-wrap: wrap-reverse;
  position: absolute;
  right: 0;
  top: 0;
}
.header_nav{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  gap: 0 25px;
  .header_nav-item{
    font-weight: bold;
    line-height: 2;
    font-size: 16px;
    a{
      display: inline-block;
      position: relative;
    }
    a::after{
      content: "";
      display: block;
      width: 0;
      height: 2px;
      background: var(--color-blue);
      position: absolute;
      left: 0;
      bottom: 0;
      transition-property: width;
      transition: 0.2s linear;
    }
    a:hover::after{
      width: 100%;
    }
  }
}
.header_contact{
  display: inline-block;
  margin-left: 60px;
  height: 80px;
  a{
    height: 100%;
        display:flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
  }
}
.sp-menu__bt{display: none;}
@media screen and (max-width: 767px){
  .headerArea{
    height: 16.41vw;
  }
  .headerInner{
    height: 16.41vw;
    min-width: 100%;
  }
  .header_logo{
    left: 5.1vw;
    span{
      font-size: 3vw;
    }
    a{
      width: 51.6vw;
      height: 7.69vw;
    }
  }
  .header_navWrap{
    position: absolute;
    display: block;
    background-color: #fff;
    width: 100%;
    min-height: calc(100vh - 16.41vw);
    top: 16.41vw;
    left: 0;
    padding: 4.1vw 5.1vw;
  }
  .header_nav{
    display: block;
    height: auto;
    margin-top: 7.69vw;
    .header_nav-item{
      line-height: 1.2;
      margin-top: 4.1vw;
      a{
        padding: 4.1vw;
        background-color: var(--color-bluelightlight);
        width: 100%;
        text-align: left;
        position: relative;
        i{
          position: absolute;
          right: 4.1vw;
          top: 50%;
          transform: translate(0, -50%);
          svg {
            stroke: var(--color-black);
          }
        }
      }
    }
  }
  .header_contact{
    display: block;
    margin: 17.9vw 0 0;
    height: auto;
    a{
      height: 100%;
      display: block;
      padding: 4.3vw;
      border-radius: 9999px;
      font-size: 4.1vw;
    }
  }
  .sp-menu__bt{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  .sp-menu__bt .sp-menu__trigger,
  .sp-menu__bt .sp-menu__trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .sp-menu__bt .sp-menu__trigger {
    position: relative;
    width: 18.46vw;
    height: 17.9vw;
    text-decoration: none;
    text-align: left;
  }
  .sp-menu__bt .sp-menu__trigger span {
    position: absolute;
    right: 5.1vw;
    width: 7.69vw;
    height: 0.5vw;
    background-color: var(--color-black);
  }
  .sp-menu__bt .sp-menu__trigger span:nth-of-type(1) { top: 6.15vw;}
  .sp-menu__bt .sp-menu__trigger span:nth-of-type(2) { top: 8.7vw;}
  .sp-menu__bt .sp-menu__trigger span:nth-of-type(3) { top: 11.25vw;}
  .sp-menu__bt.active .sp-menu__trigger span:nth-of-type(1) {
    transform: translateY(2.5vw) rotate(-45deg);
  }
  .sp-menu__bt.active .sp-menu__trigger span:nth-of-type(2) {
    opacity: 0;
  }
  .sp-menu__bt.active .sp-menu__trigger span:nth-of-type(3) {
    transform: translateY(-2.5vw) rotate(45deg);
  }
}
.simple .sp-menu__bt,
.simple .header_navWrap{
  display: none !important;
}
/* ========================================================
footer
======================================================== */
.footerArea{
  background-color: var(--color-navy);
  color: var(--color-white);
  a{
    color: #fff;
  }
}
.footerBody .footerInner{
  padding: 40px 60px;
  display:flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 80px;
  .footer_logo a{
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../img/logo_itec-white.png") left top no-repeat;
    -moz-background-size: 100% auto;
    background-size: 100% auto;
    width: 212px;
    height: 60px;
  }
  .footer_nav-item{
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    margin-right: 28px;
  }
}
@media screen and (max-width: 767px){
  .footerBody .footerInner{
    padding: 4.1vw 5.1vw;
    text-align: left;
    display: block;
    .footer_logo a{
      width: 35.8vw;
      height: 10.25vw;
    }
    .footer_nav{
      margin-top: 3.2vw;
      .footer_nav-item{
        font-size: 3.58vw;
        margin-right: 1em;
      }
    }
  }
}
.footerBottom .footerInner{
  padding: 20px 60px;
  display:flex;
  -ms-flex-pack:distribute;
  justify-content:space-between;
  flex-wrap: wrap;
  border-top:solid 1px #406182;
  font-size: 12px;
  .footer_info-item{
    display: inline-block;
    margin-right: 2em;
  }
}
@media screen and (max-width: 767px){
  .footerBottom .footerInner{
    padding: 4.1vw 5.1vw;
    text-align: left;
    .footer_info{
      width: 70%;
      .footer_info-item{
        font-size: 3vw;
        margin-right: 1em;
      }
    }
    .footer_cory{
      font-size: 2.8vw;
      margin-top: 0.2em;
    }
  }
}
.simple .footer_nav{
  display: none !important;
}
/* ========================================================
list_companylogo
======================================================== */
.list_companylogo{
  font-size: 0;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 28px;
  .list_companylogo-item{
    width: 200px;
  }
}
@media screen and (max-width: 767px){
  .list_companylogo{
    gap: 4.2vw;
    .list_companylogo-item{
      width: 38vw;
    }
  }
}
/* ========================================================
bottomcontactContent
======================================================== */
.bottomcontactContent{
  background: url("../img/bg_contact-pc.webp") center center no-repeat;
  background-size: cover;
  padding: 40px 0;
  .contentInner{
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 0;
    max-width: 640px;
    .bottomcontact_ttl{
      font-size: 20px;
    }
    .bottomcontact_txt{
      font-size: 14px;
      margin-top: 0.8em;
    }
    .bt_color-red a{
      margin-top: 20px;
      padding: 1.18em 3.15em;
    }
  }
}
@media screen and (max-width: 767px){
  .bottomcontactContent{
    background: url("../img/bg_contact-sp.webp") center center no-repeat;
    background-size: cover;
    padding: 10.25vw 5.1vw;
    padding: 5.1vw;
    .contentInner{
      border-radius: 2vw;
      .bottomcontact_ttl{
        font-size: 4.6vw;
      }
      .bottomcontact_txt{
        font-size: 3.58vw;
      }
      .bt_color-red a{
        margin-top: 5.1vw;
        max-width: 100%;
        padding: 1.18em 3em;
      }
    }
  }
}

/* ============================================================================================================================
TOP
============================================================================================================================ */
/* ========================================================
top_mvArea
======================================================== */
.top_mvArea{
  background: url("../img/bg_mv-pc.webp") center bottom no-repeat;
  .top_mvInner{
    position: relative;
    text-align: left;
    margin: 0 auto;
    max-width: 1090px;
    padding: 120px 0 80px;
    .top_mv_lead{
      font-weight: bold;
      line-height: 1.5em;
      font-size: 30px;
    }
    .top_mv_ttl{
      margin-top: 40px;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      background: url("../img/logo_mv.png") center center no-repeat;
      background-size: contain;
      width: 450px;
      height: 110px;
    }
    .bt_color-red a{
      margin-top: 40px;
      padding: 1.18em 3.15em;
    }
    .mv_mainimage{
      content: "";
      display: block;
      position: absolute;
      right: -147px;
      top: 39px;
      width: 627px;
    }
  }
  .top_mv_bottom{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    background: url("../img/bg_mvbottom.png") center center no-repeat;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
     backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-weight: bold;
    color: #fff;
    text-shadow:0px 0px 4px #000000;
    padding: 20px 0;
    .top_mv_bottom-headline{
      font-size: 22px;
    }
    .top_mv_point{
      text-align: left;
      .top_mv_point-item{
        padding-left: 1.5em;
        position: relative;
        &:not(:first-of-type){
          margin-top: 0.5em;
        }
        &::before{
          content: "";
          display: block;
          width: 1em;
          height: 0.6em;
          position: absolute;
          left: 0;
          top: calc(50% - 0.4em);
          border-left: solid 3px var(--color-sky);
          border-bottom: solid 3px var(--color-sky);
          transform: rotate(-45deg);
        }
      }
    }
  }
}
@media screen and (max-width: 767px){
  .top_mvArea{
    background: url("../img/bg_mv-sp.webp") center bottom no-repeat;
    -moz-background-size: 100% auto;
    background-size: 100% auto;
    .top_mvInner{
      max-width: 89.8vw;
      padding: 12vw 0 5.3vw;
      text-align: center;
      .bt_color-red a{
        margin-top: 5.1vw;
        max-width: 100%;
        padding: 1.18em 3em;
      }
      .top_mv_lead{
        text-align: left;
        font-size: 6.6vw;
      }
      .top_mv_ttl{
        margin: 8vw auto 0;
        width: 83.6vw;
        height: 21.2vw;
      }
      .mv_mainimage{
        position: static;
        margin: 9.3vw auto 0;
        width: 80vw;
      }
    }
    .top_mv_bottom{
      display: block;
      padding: 3.7vw;
      .top_mv_bottom-headline{
        font-size: 4.2vw;
        margin: 0 -1em 0 -0.5em;
      }
      .top_mv_point{
        font-size: 3.7vw;
        line-height: 1.3em;
        display: inline-block;
        margin: 2vw auto 0;
        .top_mv_point-item{
          &:not(:first-of-type){
            margin-top: 0.3em;
          }
        }
      }
    }
  }
}
/* ========================================================
logoContent
======================================================== */
.logoContent{
  padding: 40px 0;
}
@media screen and (max-width: 767px){
  .logoContent{
    padding: 5.3vw 0;
    .contentInner{
      overflow-x: scroll;
      text-align: left;
      max-width: 100%;
      margin: 0;
      .list_companylogo{
        display: block;
        text-align: left;
        padding: 0 5.1vw;
        margin: 0 -9000vw 0 0;
        display: inline-block;
        line-height: 0;
        .list_companylogo-item{
          display: inline-block;
          &:not(:first-of-type){
            margin-left: 7.4vw;
          }
        }
      }
    }
  }
}
/* ========================================================
aboutContent
======================================================== */
.aboutContent{
  padding: 80px 0;
  .about_headline{
    font-weight: bold;
    line-height: 1.5em;
    font-size: 20px;
  }
  .aboutInner{
    background-color: #fff;
    padding: 40px 15px;
    border-radius: 20px;
    margin-top: 30px;
    .contentHeadline span{
      margin-left: 0.3em;
    }
    .about_mainimage{
      margin-top: 20px;
    }
  }
}
@media screen and (max-width: 767px){
  .aboutContent{
    padding: 10.6vw 0;
    .about_headline{
      font-size: 4.2vw;
      text-align: left;
    }
    .aboutInner{
      padding: 5.3vw 0;
      border-radius: 5.3vw;
      margin-top: 8vw;
      .contentHeadline span{
        margin: 0;
        display: block;
      }
      .about_mainimage{
        margin-top: 3.2vw;
      }
    }
  }
}
/* ========================================================
featuresContent
======================================================== */
.featuresContent{
  padding: 80px 0;
  .contentHeadline span{
    display: inline-block;
    margin-right: 0.3em;
  }
  .features_list{
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 48px;
    .features_list-item{
      background-color: #fff;
      display:flex;
      -ms-flex-pack:distribute;
      flex-direction: column;
      flex-wrap: wrap;
      box-shadow: 0 0 8px #09468C66;
      border-radius: 6px;
      width: calc((100% - 64px) / 3);
      margin-top: 32px;
      .features_list-icon{
        background: var(--color-blue);
        display:flex;
        justify-content: center;
        align-items: center;
        border-radius: 6px 6px 0 0;
        padding: 16px;
        img{
          max-width: 64px;
          max-height: 64px;
        }
      }
      .features_list-ttl{
        color: var(--color-blue);
        line-height: 1.4em;
        padding: 1em;
        font-size: 18px;
      }
      .features_list_box{
        background-color: var(--color-bluelightlight);
        display:flex;
        -ms-flex-pack:distribute;
        flex-direction: column;
        flex-wrap: wrap;
        flex-grow: 2;
        padding: 0 20px 20px;
        .features_list_box-list{
          text-align: left;
          padding-top: 20px;
        }
        .bt_button-cover{
          position: relative;
          margin-top: auto;
          padding-top: 20px;
          input{
            padding: 0.6em 3.4em 0.6em 1.2em;
            font-size: 14px;
          }
          .ic-plus{
            content: "";
            display: block;
            background-color: #fff;
            border-radius: 9999px;
            pointer-events: none;
            border: solid 1px var(--color-blue);
            width: 1.2em;
            height: 1.2em;
            position: absolute;
            z-index: 2;
            left: calc(50% + 1.9em);
            top: calc(50% - 0.6em + 10px);
          }
          &::before,&::after{
            content: "";
            display: block;
            width: 0.6em;
            height: 2px;
            border-radius: 9999px;
            pointer-events: none;
            background-color: var(--color-blue);
            position: absolute;
            z-index: 3;
            left: calc(50% + 2.2em);
            top: calc(50% - 1px + 10px);
          }
          &::after{
            transform: rotate(90deg);
          }
          &.open&::after{
            transform: rotate(0deg);
          }
        }
      }
    }
  }
}
@media screen and (max-width: 767px){
  .featuresContent{
    padding: 10.6vw 0;
    background: -webkit-linear-gradient(
      top,
      #F4F9FF 0%,
      #CFE3FF 33%,
      #CFE3FF 100%
    );
    background: linear-gradient(
      to bottom,
      #F4F9FF 0%,
      #CFE3FF 33%,
      #CFE3FF 100%
    );
    .features_list{
      display:block;
      margin-top: 5.3vw;
      .features_list-item{
        box-shadow: 0 0 2vw #09468C66;
        border-radius: 1.6vw;
        width: 100%;
        margin-top: 5.3vw;
        .features_list-icon{
          border-radius: 1.6vw 1.6vw 0 0;
          padding: 2.6vw;
          img{
            max-width: 16.4vw;
            max-height: 16.4vw;
          }
        }
        .features_list-ttl{
          font-size: 4.8vw;
        }
        .features_list_box{
          background-color: #fff;
          padding: 0 5.3vw 6.4vw;
          .features_list_box-list{
            padding-top: 0;
          }
          .bt_button-cover{
            padding-top: 3.2vw;
            input{
              font-size: 3.4vw;
            }
            .ic-plus{
              top: calc(50% - 0.6em + 1.6vw);
            }
            &::before,&::after{
              top: calc(50% - 1px + 1.6vw);
            }
          }
        }
      }
    }
  }
}
/* ========================================================
useContent
======================================================== */
.useContent{
  padding: 80px 0;
  .use_headline{
    font-size: 32px;
  }
  .list_companylogo{
    margin-top: 24px;
  }
}
@media screen and (max-width: 767px){
  .useContent{
    padding: 10.25vw 0;
    .use_headline{
      font-size: 4.6vw;
    }
    .list_companylogo{
      margin-top: 5.3vw;
    }
  }
}
/* ========================================================
contactContent
======================================================== */
.contactContent{
  padding: 80px 0;
  .contentInner{
    background: url("../img/bg-marble.jpg") center center no-repeat;
    background-size: cover;
    border-radius: 8px;
    padding: 40px;
    .contact_txt{
      font-weight: bold;
      font-size: 18px;
    }
    .bt_color-red a{
      margin-top: 24px;
      padding: 1.18em 2.8em;
    }
  }
}
@media screen and (max-width: 767px){
  .contactContent{
    padding: 10.25vw 0;
    .contentInner{
      border-radius: 8px;
      padding: 10.25vw 5.1vw;
      .contact_txt{
        font-size: 4.6vw;
      }
      .bt_color-red a{
        margin-top: 7.69vw;
        padding: 1.18em 2.8em;
      }
    }
  }
}
/* ========================================================
flowContent
======================================================== */
.flowContent{
  background: url("../img/bg_flow-pc.jpg") center center no-repeat;
  background-size: cover;
  padding: 80px 0;
  .contentHeadline{
    display: inline-block;
    padding: 0 0.2em;
  }
  .flow_mainimage{
    margin-top: 80px;
  }
  .flow_description{
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
    margin-top: 80px;
    .flow_description-item{
      position: relative;
      background: #fff;
      text-align: left;
      border-radius: 8px;
      width: calc((100% - 64px) / 3);
      margin-top: 32px;
      padding: 16px 16px 16px 76px;
      .image{
        position: absolute;
        left: 10px;
        top: 10px;
        width: 56px;
      }
      .flow_description-ttl{
        color: var(--color-blue);
        line-height: 1.2em;
        font-size: 20px;
      }
      .flow_description-list{
        margin-top: 10px;
      }
    }
  }
}
@media screen and (max-width: 767px){
  .flowContent{
    background: url("../img/bg_flow-sp.jpg") center center no-repeat;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    padding: 10.25vw 0;
    .contentHeadline{
      display: block;
      padding: 0 0.2em;
      font-size: 5.1vw;
    }
    .flow_mainimage{
      margin-top: 10.25vw;
    }
    .flow_description{
      margin-top: 10.25vw;
      .flow_description-item{
        border-radius: 2vw;
        width: 100%;
        margin-top: 2vw;
        padding: 4.1vw 2.5vw 4.1vw 19.36vw;
        .image{
          left: 2.5vw;
          top: 2.5vw;
          width: 14.36vw;
        }
        .flow_description-ttl{
          font-size: 5.1vw;
        }
        .flow_description-list{
          margin-top: 2.5vw;
        }
      }
    }
  }
}
/* ========================================================
qaaContent
======================================================== */
.qaaContent{
  background-color: var(--color-bluelightlight);
  padding: 80px 0;
  .contentInner{
    background-color: var(--color-white);
    border-radius: 32px;
    padding: 60px;
  }
}
@media screen and (max-width: 767px){
  .qaaContent{
    background-color: var(--color-white);
    padding: 15.38vw 0 10.25vw;
    .contentInner{
      border-radius: 0;
      padding: 0;
    }
  }
}
.list-qaa{
  text-align: left;
  margin-top: 64px;
  dt::before,dd .list-qaa-inner::before{
      letter-spacing: 0.05em;
      font-family: "Montserrat", sans-serif;
      line-height: 1em;
      display: inline-block;
      margin-left: -30px;
      width: 30px;
      font-size: 20px;
  }
  dt{
    display: block;
    background-color: var(--color-bluelight);
    padding: 18px 16px 2px 46px;
    border-radius: 8px 8px 0 0;
    margin-top: 20px;
    &::before{
      content: "Q.";
    }
  }
  dd{
    display: block;
    background-color: var(--color-bluelight);
    color: var(--color-blue);
    font-weight: bold;
    border-radius: 0 0 8px 8px;
    padding: 16px;
    .list-qaa-inner{
      background-color: #fff;
      border-radius: 8px;
      padding: 16px 16px 16px 46px;
      &::before{
        content: "A";
      }
    }
  }
}
@media screen and (max-width: 767px){
  .list-qaa{
    margin-top: 0;
    dt::before,dd .list-qaa-inner::before{
        margin-left: -7.69vw;
        width: 7.69vw;
        font-size: 5.1vw;
    }
    dt{
      padding: 4.1vw 4.1vw 0 11.8vw;
      border-radius: 4.1vw 4.1vw 0 0;
      margin-top: 4.1vw;
    }
    dd{
      border-radius: 0 0 2vw 2vw;
      padding: 4.1vw;
      .list-qaa-inner{
        border-radius: 2vw;
        padding: 4.1vw 4.1vw 4.1vw 11.8vw;
      }
    }
  }
}

/* ============================================================================================================================
form
============================================================================================================================ */
.formContent{
  padding: 80px 0;
  .contentInner{
    background-color: #fff;
    border-radius: 32px;
    padding: 60px;
    .contentHeadline{
      margin-bottom: 60px;
    }
  }
}
@media screen and (max-width: 767px){
  .formContent{
    padding: 10.6vw 0;
    .contentInner{
      border-radius: 4.2vw;
      padding: 5.3vw;
      .contentHeadline{
        margin-bottom: 5.3vw;
      }
    }
  }
}