@charset "utf-8";
body{background-color:#F2FBFF;}
@media (width<768px){
  .fontPC24{
    font-size:20px;
  }
  .fontPC32{
    font-size:22px;
  }
  .fontPC36{
    font-size:25px;
  }
  .fontPC40{
    font-size:34px;
  }
  .fontPC48{
    font-size:36px;
  }
  .listingFaq{
    dl{
      font-size:16px;
    }
  }
  .margin50{
    margin-top:25px;
    margin-bottom:25px;
  }
  .margin100{
    margin-top:60px;
    margin-bottom:60px
  }
  .padding50{
    padding:25px;
  }
  .padding100{
    padding:60px;
  }
  .padding100sp{
    padding:20px;
  }
  .SPinline{
    display:inline-block;
  }
  .PConly{
    display:none;
  }
}
@media (width>=768px){
  .fontPC24{
    font-size:24px;
  }
  .fontPC32{
    font-size:32px;
  }
  .fontPC36{
    font-size:36px;
  }
  .fontPC40{
    font-size:40px;
  }
  .fontPC48{
    font-size:48px;
  }
  .listingFaq{
    dl{
      font-size:20px;
    }
  }
  .margin50{
    margin-top:50px;
    margin-bottom:50px;
  }
  .margin100{
    margin-top:100px;
    margin-bottom:100px
  }
  .padding50{
    padding:50px;
  }
  .padding100,.padding100sp{
    padding:100px;
  }
  .SPonly{
    display:none;
  }
}
p{
  line-height:1.6;
}
.padding20{
  padding:20px;
}
.bold{
  font-weight:bold;
}
.taCenter{
  text-align:center;
}
.radius25{
  border-radius:25px;
}
.marginCenter{
  margin-left:auto;
  margin-right:auto;
}
[class^="width"]{
  width:90%;
  margin-left:auto;
  margin-right:auto;
}
.width1400{
  max-width:1400px;
}
.width1200{
  max-width:1200px;
}
.flexRow{
  display:flex;
  flex-direction:row;
}
.flexCol{
  display:flex;
  flex-direction:column;
}
.nowrap{
  flex-wrap:nowrap;
}
.wrap{
  flex-wrap:wrap;
}
.aiStretch{
  align-items:stretch;
}
.aiCenter{
  align-items:center;
}
.aiEnd{
  align-items:end;
}
.jcCenter{
  justify-content:center;
}
.jcAround{
  justify-content:space-around;
}
.jcBetween{
  justify-content:space-between;
}
.inline{
  display:inline-block;
}

/*background-color*/


/*custom*/
@media (width<768px){
  .firstArea{
    div{
      padding-top:50px;
      &::before,&::after{
        background-size:30%;
        opacity:0.3;
      }
      &::before{
        background-position:-5% 100%;
      }
      &::after{
        background-position:105% 100%;
      }
      h2{
        font-size:24px;
        top:calc(-1em - 10px);
      }
    }
  }
  .thirdArea{
    div{
      img{
        width:90%;
        margin:auto;
      }
    }
  }
  .lpProcess{
    div{
      margin:80px auto;
    }
  }
  .verScroll{
    overflow-x:scroll;
  }
}

@media (width>=768px){
  .lpFV{
    background-color:#F2FBFF;
    background-image:url('../img/lp/image1.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    position:relative;
    padding-bottom:39%;
    h1{
      position:absolute;
      width:37%;
      max-width:720px;
      margin:auto;
      top:12%;
      left:13%;
      display:flex;
      flex-direction:row;
      flex-wrap:nowrap;
      align-items:center;
      justify-content:space-between;
      img{
        width:100%;
      }
    }
  }
  .firstArea{
    div{
      padding-top:75px;
      &::before,&::after{
        background-size:auto 80%;
      }
      &::before{
        background-position:5% 100%;
      }
      &::after{
        background-position:95% 100%;
      }
      h2{
        top:calc(-0.5em - 10px);
      }
    }
  }
  .fourthArea{
    .lpProcess{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-template-rows:auto auto;
      gap:50px;
      div{
        position:relative;
        &.processStep01{
          grid-column:1/5;
          grid-row:1;
          &::after{
            content:'';
            border-left:26px solid #0F75B7;
            border-top:30px solid transparent;
            border-bottom:30px solid transparent;
            border-right:0;
            position:absolute;
            right:-17%;
            top:50%;
            bottom:50%;
            margin:auto;
          }
        }
        &.processStep02{
          grid-column:5/9;
          grid-row:1;
          &::after{
            content:'';
            border-left:26px solid #0F75B7;
            border-top:30px solid transparent;
            border-bottom:30px solid transparent;
            border-right:0;
            position:absolute;
            right:-17%;
            top:50%;
            bottom:50%;
            margin:auto;
          }
        }
        &.processStep03{
          grid-column:9/13;
          grid-row:1;
        }
        &.processStep04{
          grid-column:3/7;
          grid-row:2;
          &::after{
            content:'';
            border-left:26px solid #0F75B7;
            border-top:30px solid transparent;
            border-bottom:30px solid transparent;
            border-right:0;
            position:absolute;
            right:-17%;
            top:50%;
            bottom:50%;
            margin:auto;
          }
        }
        &.processStep05{
          grid-column:7/11;
          grid-row:2;
        }

      }
    }
  }
  .lpDifferenceTable{
    width:90%;
  }
}

.firstArea{
  background-image:url('../img/lp_bg_img001.png');
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:cover;
  background-color:#BCE9F9;
  div{
    width:100%;
    max-width:1000px;
    background-color:#fff;
    padding-bottom:25px!important;
    padding-left:0;
    padding-right:0;
    position:relative;
    margin:100px auto 75px;
    &::before,&::after{
      content:'';
      width:100%;
      height:100%;
      background-repeat:no-repeat;
      position:absolute;
      top:0;
      bottom:0;
    }
    &::before{
      background-image:url('../img/lp_img001.png');
    }
    &::after{
      background-image:url('../img/lp_img002.png');
    }
    h2{
      font-weight:bold;
      color:#fff;
      text-align:center;
      padding:10px;
      position:absolute;
      line-height:1;
      left:0;
      right:0;
      margin:auto;
      background-color:#0098DB;
      width:80%;
      max-width:15em;
      border-radius:1em;
      z-index:5;
      span{
        color:#F4F47F;
      }
      &::before{
        content:'';
        width:0;
        height:0;
        border-bottom:0;
        border-top:1em solid #0098DB;
        border-left:1.5em solid transparent;
        border-right:1.5em solid transparent;
        position:absolute;
        bottom:-0.5em;
        left:0;
        right:0;
        margin:auto;
        z-index:-1;
      }
    }
    p{
      width:90%;
      max-width:490px;
      margin:auto;
    }
  }
}
.secondArea{
  position:relative;
  margin-bottom:100px;
  &::before{
    content:'';
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:200px;
    background-color:#F2FBFF;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%);
  }
  h2{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    span{
      position:relative;
      color:#0098DB;
      font-size:1.2em;
      &::before{
        content:'・・';
        position:absolute;
        top:-0.7em;
        left:0;
        right:0;
        margin:auto;
      }
    }
  }
  div{
    gap:20px;
    div{
      width:100%;
      max-width:450px;
      margin:20px 0;
      padding:50px 20px;
      text-align:center;
      background-color:#fff;
      box-shadow:1px 2px 2px #aaaa;
      position:relative;
      img{
        height:70%;
        width:auto;
      }
      p{
        color:#0098DB;
        font-weight:bold;
      }
    }
  }
}
.thirdArea{
  background-color:#BCE9F9;
  background-image:url('../img/lp_bg_img002.png');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  margin-top:-100px;
  padding-top:75px;
  padding-bottom:50px;
  .thirdAreaWhite{
    background-color:#fff;
    text-align:center;
    position:relative;
    padding-top:100px;
    padding-bottom:50px;
    &>p{
      font-weight:bold;
      color:#fff;
      position:absolute;
      background-color:#E97BA9;
      border-radius:1em;
      padding:10px;
      top:calc(-0.7em - 10px);
      left:0;
      right:0;
      margin:auto;
      width:50%;
      max-width:280px;
    }
    h2{
      span{
        color:#0098DB;
      }
    }
  }
  .thirdAreaContent{
    width:90%;
    max-width:960px;
    margin:30px auto;
    padding:20px 0px;
    font-weight:bold;
    border:2px solid #4084DA;
    background-color:#F2FBFF;
    ul{
      margin:30px auto;
      gap:10px;
      li{
        color:#fff;
        border-radius:calc(1em + 10px);
        padding:10px 27px;
        &:first-of-type{
          background-color:#F28E05;
        }
        &:nth-of-type(2){
          background-color:#6ECAEB;
        }
        &:nth-of-type(3){
          background-color:#0098DB;
        }
        &:last-of-type{
          background-color:#E97BA9;
        }
      }
    }
    p{
      span:not([class]){
        color:#0098DB;
        background-image:linear-gradient(transparent 70%,#F4F47F 30%);
      }
    }
  }
  .stepDetail{
    width:100%;
    max-width:960px;
    margin:50px auto 0;
    div{
      width:90%;
      max-width:470px;
      margin:30px auto;
      border-width:2px;
      border-style:solid;
      padding:50px 20px 20px;
      position:relative;
      &:first-of-type{
        border-color:#F28E05;
        p:first-of-type{
          background-color:#F28E05;
        }
      }
      &:nth-of-type(2){
        border-color:#6ECAEB;
        p:first-of-type{
          background-color:#6ECAEB;
        }
      }
      &:nth-of-type(3){
        border-color:#0098DB;
        p:first-of-type{
          background-color:#0098DB;
        }
      }
      &:last-of-type{
        border-color:#E97BA9;
        p:first-of-type{
          background-color:#E97BA9;
        }
      }
      p:first-of-type{
        color:#fff;
        width:70%;
        max-width:12em;
        position:absolute;
        top:-1em;
        left:0;
        right:0;
        margin:auto;
        border-radius:1em;
        font-weight:bold;
        text-align:center;
      }
      p:last-of-type{
        text-align:left;
      }
    }
  }
}
.fourthArea{
  padding-top:100px;
  padding-bottom:50px;
  background-image:url('../img/lp_bg_img003.png');
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:contain;
  &>h2{
    text-align:center;
    margin-bottom:100px;
    &::before{
      content:'\\';
    }
    &::after{
      content:'/';
    }
    span{
      color:#0098DB;
    }
  }
  .lpProcess{
    width:90%;
    max-width:1300px;
    margin:auto;
    position:relative;
    div{
      max-width:360px;
      position:relative;
      background-color:#fff;
      padding:50px 20px 20px;
      justify-content:baseline;
      .circleNum{
        text-align:center;
        position:absolute;
        left:0;
        right:0;
        top:-2em;
        margin:auto;
        width:4em;
        height:4em;
        border-radius:50%;
        background-color:#0098DB;
        color:#fff;
        font-weight:bold;
        font-size:24px;
        line-height:1;
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:center;
        span{
          display:block;
          font-size:2em;
        }
      }
      h3{
        margin-top:30px;
        font-weight:bold;
        color:#fff;
        text-align:center;
        height:3.5em;
        border-radius:5px;
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:center;
        background-color:#6ECAEB;
      }
      p{
        margin-top:30px;
        margin-bottom:50px;
      }
    }
  }
  .lpDifference{
    h2{
      text-align:center;
      font-weight:bold;
      margin:50px auto;
      position:relative;
      color:#fff;
      span{
        display:block;
        margin:auto;
        width:60%;
        max-width:460px;
        border-radius:1em;
        background-color:#F28E05;
        padding:10px;
        position:relative;
        z-index:5;
      }
      &::before{
        content:'';
        width:100%;
        max-width:1200px;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        height:4px;
        background-color:#F28E05;
        z-index:1;
      }
    }
  }
  .lpDifferenceTable{
    white-space:nowrap;
    background-color:#fff;
    margin:30px auto 50px;
    max-width:1200px;
    table-layout:fixed;
    border-collapse:collapse;
    thead{
      position:sticky;
      top:0;
      th{
        padding:20px;
        font-weight:normal;
        span{
          border-radius:1em;
          padding:10px;
          display:block;
          margin:auto;
        }
        &:nth-of-type(2){
          background-color:#F4F47F;
          span{
            font-size:1.4em;
            font-weight:bold;
            background-color:#fff;
            color:#F28E05;
            font-weight:bold;
          }
        }
        &:nth-of-type(n+3){
          span{
            background-color:#F4F47F;
          }
        }
      }
    }
    tbody{
      tr{
        &:not(:last-of-type){
          border-bottom:1px solid #C0D6E4;
        }
        th,td{
          padding:10px;
        }
        th{
          color:#F28E05;
          position:sticky;
          left:0;
          background-color:#fff;
        }
        td{
          text-align:center;
        }
        td:first-of-type{
          background-color:#F4F47F;
        }
      }
    }
  }
}
.fifthArea{
  counter-reset:caseNum;
  background-color:#4084DA;
  background-image:url('../img/lp_bg_img004.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  h2{
    color:#fff;
    text-align:center;
    margin-top:50px;
    margin-bottom:50px;
  }
  &>div{
    width:100%;
    div{
      width:100%;
      max-width:560px;
      margin:0 auto 30px;
      background-color:#fff;
      padding:30px 20px 20px;
      position:relative;
      &::before{
        content:'CASE';
        color:#F28E051A;
        font-family:'Futura PT';
        position:absolute;
        right:10px;
        top:10px;
        font-size:24px;
        font-weight:bold;
      }
      &::after{
        content:counter(caseNum,decimal-leading-zero);
        counter-increment:caseNum;
        color:#F28E051A;
        font-family:'Futura PT';
        position:absolute;
        right:2px;
        top:24px;
        font-size:62px;
        font-weight:bold;
      }
      h3{
        padding:10px;
        text-align:center;
        margin:auto auto 30px;
        border-radius:1em;
        font-weight:bold;
        color:#fff;
        background-color:#F28E05;
        width:80%;
        max-width:20em;
      }
      &>dl:not(:last-of-type){
        margin-bottom:30px;
        dt{
          font-size:20px;
          font-weight:bold;
          color:#F28E05;
          padding:10px 20px;
          margin-bottom:10px;
          border-bottom:1px solid #F28E05;
        }
      }
      &>dl:last-of-type{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:stretch;
        justify-content:space-around;
        width:100%;
        border-radius:25px;
        background-color:#E97BA9;
        color:#fff;
        padding:10px;
        dt:first-of-type{
          width:100%;
          text-align:center;
          font-size:24px;
          font-weight:bold;
          padding:10px;
          border-bottom:1px solid #fff;
        }
        &>dd{
          width:100%;
          max-width:240px;
          &>dl{
            display:flex;
            flex-direction:column;
            align-items:stretch;
            justify-content:space-around;
            &>dt{
              color:#E97BA9;
              background-color:#fff;
              border-radius:1em;
              padding:5px!important;
              font-size:16px!important;
              margin-top:20px;
            }
            &>dd{
              text-align:center;
              font-weight:bold;
              &>span{
                font-size:24px;
                  display:inline-block;
                  &:first-of-type::after{
                    content:'▼';
                    display:inline-block;
                    transform:rotate(-90deg);
                  }
                  &.up{
                    color:#F4F47F;
                    span{
                      font-size:40px;
                    }
                  }
                  &.detail{
                    display:inline-block;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

.sixthArea{
  .sixthWhiteArea{
    background-color:#fff;
    padding:50px 0;
    h2{
      text-align:center;
      color:#0098DB;
      font-weight:bold;
      margin-bottom:50px;
    }
    .sixthFlex{
      div{
        width:100%;
        max-width:600px;
        margin:30px auto;
        background-color:#BCE9F9;
        h3{
          background-color:#0098DB;
          color:#fff;
          font-weight:bold;
          text-align:center;
          padding:20px;
          border-bottom-left-radius:25px;
          border-bottom-right-radius:25px;
          width:80%;
          max-width:420px;
          margin:auto;
        }
        p{
          background-color:#fff;
          padding:10px;
          margin:20px 30px 30px;
          position:relative;
          span{
            position:absolute;
            right:10px;
            bottom:10px;
            color:#0098DB;
          }
        }
      }
    }
  }
}

.listingFaq{
  width:90%;
  max-width:1400px;
  margin:auto;
  margin-bottom:100px;
  .pageTitleArea{
    padding-bottom:35px;
    margin-bottom:35px;
    .h1Title {
      font-weight:bold;
      font-size:36px;
      margin-left:45px;
      position:relative;
      &::before {
        content:'';
        width:1em;
        height:1em;
        border-radius:0.5em;
        background-color:#0098DB;
        position:absolute;
        top: 50%;
        left:-1em;
        transform: translate(-50%, -50%);
      }
      &::after{
        content:'';
        width:0.7em;
        height:0.7em;
        border-radius:0.35em;
        border:2px solid #fff;
        background-color:#0098DB;
        position:absolute;
        top: 50%;
        left:-1em;
        transform: translate(-50%, -50%);
        right:auto;
        margin:auto;
      }
    }
    .h1Sub{
      font-size:20px;
      margin-left:45px;
      color:#0098DB;
    }
  }
  dl{
    dt{
      color:#0098DB;
      margin-top:30px;
      &::before{
        content:'Ｑ';
        margin-right:1em;
      }
    }
    dd{
      margin:30px auto;
      padding-bottom:30px;
      border-bottom:2px solid #BCE9F9;
      &::before{
        content:'Ａ';
        margin-right:1em;
      }
    }
  }
}