@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');

html {
  -webkit-font-smoothing: antialiased;
   font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color:#1a1a1a;
    background:#e4f4fe;
}

#nav li a {
  display: block;
  color: #000;
  position: relative;
}
@media only screen and ( max-width : 899px ) {
  .overlay {
    width: 0;
    height: 0;
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s;
    background: rgba(255,255,255,.7);
  }
  .overlay.open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  #main {
    transition: all .5s;
    min-height: 100vh;
  }
  #main.open {
    position: fixed;
    width: 100%;
  }
  #menu_btn {
    top: 12px;
    right: 15px;
    transition: .3s;
    cursor: pointer;
    position: fixed;
    z-index: 9999;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu-trigger {
    width: 25px;
    height: 16px;
    position: relative;
  }
  .menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    transition: all .5s;
  }
  #menu_btn.active .menu-trigger span{background-color: #fff;}
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    width: 70%;
    top: 7px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(1) {
    transform: translateY(7px) rotate(-45deg);
  }
  #menu_btn.active .menu-trigger span:nth-of-type(2) {
    opacity: 0;
  }
  #menu_btn.active .menu-trigger span:nth-of-type(3) {
    transform: translateY(-7px) rotate(45deg);
  }
  #nav {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 90px 0;
    background: #3b8df6;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 12;
    transform: translate(100%);
    transition: all .5s;
  }
  #nav.open {
    transform: translateZ(0);
  }
  #nav li {
    padding: 0 20px;
  }
  #nav li a {
    position: relative;
    padding: 20px;
    color: #fff;
  }
}

@media print, screen and ( min-width : 900px ) {
  #menu_btn,.overlay {
    display: none;
  }
  #nav ul {
    display: flex;
    flex-wrap: wrap;
  }
  #nav li {
    position: relative;
  }
  #nav li a {
    padding: 20px;
  }
  #nav li:last-child a{
    background:#ff35dd;
    color:#fff;
    padding: 20px 40px;
  }
  #nav li:nth-last-child(2) a{
    background:#0066ff;
    color:#fff;
    padding: 20px 40px;
  }
  #nav .current-menu-item a {
    color: #dad4ec;
  }
  #nav .current-menu-item li a {
    color: #fff;
  }
  #nav li ul.sub-menu {
    flex-direction: column;
    background: #fff;
    position: absolute;
    width: 200px;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 10px 0;
  }
  #nav li ul.sub-menu li {
    width: 100%;
  }
  #nav li ul.sub-menu li a {
    line-height: 1.6em;
    color: #83759a;
    padding: 10px 20px;
  }
  #nav li ul.sub-menu li a:hover {
    color: #dad4ec;
  }
}

header {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
header #logo a {
  display: block;
}

@media only screen and ( max-width : 899px ) {
  header {
    padding: 0 20px;
    height: 70px;
  }
  header #logo {
    width: 120px;
  }
}
@media print, screen and ( min-width : 900px ) {
  header {
    padding: 0 50px;
  }
  header #logo {
    width: 150px;
  }
}

.main{
    background:#e4f4fe;
     margin-top:70px;
}
@media only screen and ( max-width : 899px ) {
    .main{
    background:#e4f4fe;
    margin-top:70px;
}
}
.fv{
    aspect-ratio: 1/.5;
    background:url(img/webp/fv.webp) no-repeat right bottom / contain;
}

.fvBox{
    margin-left:10%;
    width:40%;
}
.fvBox h2{
    font-size:2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-bottom:0.6em;
}
.fvBox h2 span{
    color:#3b8df6;
    font-size:2em;
}
.fvBox p{
    font-weight: bold;
    margin-bottom:2em;
}

.btn1 a{
    display: inline-block;
    background:#0066ff;
    color:#fff;
    padding:1em 4em 1.1em;
    font-size:1.2rem;
    border-radius:100vmax;
    border:solid 2px #fff;
}
@media (min-width:600px) and (max-width:899px){
    .fv{
    aspect-ratio: 1/.6;
    background:url(img/webp/fv.webp) no-repeat right bottom / 60%;
}
.fvBox{
    margin-left:10%;
    width:80%;
}
.fvBox h2{
    font-size:2.8vw;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-bottom:0.6em;
}
.btn1 a{
    font-size:.8rem
}
}
@media only screen and ( max-width : 599px ) {
    .fv{
    aspect-ratio: 1/1.4;
    background:url(img/webp/fv.webp) no-repeat right bottom / contain;
}
.fvBox{
    margin-left:10%;
    width:80%;
}
.fvBox h2{
    font-size:6.5vw;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-bottom:0.6em;
}
.fvBox h2 span{
    color:#3b8df6;
    font-size:2.2em;
}
.fvBox p{
    font-size:1.1rem;
}
.btn1 a{
    display:block;
    font-size:1.2rem;
    text-align: center;
}
}

.container{
    width:80%;
    margin-inline:auto;
}
.mainTitle1{
    font-size:2rem;
    font-weight: 900;
}
.mainTitle1 span{
     font-family: "Montserrat", sans-serif;
     font-weight: 800;
     color:#b60005;
     font-size:0.8em;
}
.img1{
    display: block;
    width:40%;
    margin:0 auto;
}
@media (min-width:600px) and (max-width:899px){
    .container{
    width:90%;
}
.mainTitle1{
    font-size:1.6rem;
}
}
@media (max-width:599px){
    .mainTitle1{
    font-size:1.4rem;
}
.mainTitle1 span{
      font-size:.9rem;
}
.img1{
    width:80%;
}
}

.featTitle{
    font-size:1.8rem;
    font-weight: 900;
}
.featTitle span{
     font-family: "Montserrat", sans-serif;
     font-weight: 800;
     color:#b60005;
     font-size:2em;
     line-height: 0;
}
.icons{
    display: block;
    width:7%;
    margin:0 auto 5vw;
}
.funcBox{
    background:#fff;
    border-radius:25px;
    padding:18% 6%;
    position:relative;
}
.funcTitle{
    font-size:1.2rem;
    margin-bottom:1em
}
.funcLine{
    color:#0097b2;
}
.funcIg{
     color:#ff35dd;
}
.funcTag{
    aspect-ratio: 1/.214;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:-10%;
    width:85%;
}
.lineTag{
    background: url(img/svg/lineFuncBg.svg) no-repeat center / cover;
}
.igTag{
    background: url(img/svg/IGFuncBg.svg) no-repeat center / cover;
}
.funcTag p{
    color:#fff;
    font-weight: bold;
}
.igTag p{
    color:#ff35dd;
}
@media (min-width:600px) and (max-width:899px){
    .featTitle{
    font-size:1.1rem;
    font-weight: 900;
}
.funcTag p{
    font-size:1.2rem;
}
}
@media ( max-width : 599px ) {
    .featTitle{
    font-size:1.2rem;
}
.icons{
    width:20%;
    margin:0 auto 15vw;
}
.funcTag p{
    font-size:1.2rem;
}
}
.intImg{
    width:30%;
    display: block;
    margin:0 auto;
}

.mainTitle2{
    font-size:1.4rem;
    font-weight: 900;
}

@media (max-width:599px){
    .intImg{
    width:60%;
}
}

.close1{
    background:#fff;
    width:60%;
    margin-inline:auto;
    padding:4%;
    border-radius:30px;
     border:solid 5px #459ff6;
}
.closeTitle{
    font-size:1.5rem;
}
.closeTitle span{
     color:#ff35dd;
}
@media (min-width:600px) and (max-width:899px){
     .close1{
    width:90%;
    padding:6% 5%;
}
}
@media (max-width:599px){
    .close1{
    width:90%;
    padding:10% 5%;
}
.closeTitle{
    font-size:1rem;
}
}

.cta{
    width:80%;
    margin-inline:auto;
    background:#459ff6;
    border:solid 5px #fff;
    border-radius:30px;
    padding:6%;
}
.ctaCopy1{
    color:#fff;
    font-size:2rem;
    font-weight:800;
}
.ctaCopy1 span{
    font-size:1.2em;
}
.ctaCopy2{
    color:#fff;
    font-size:1.5rem;
    font-weight:800;
    display:flex;
    align-items: center;
    justify-content: center;
}
.ctaCopy2 span{
    width:25%;
    display: inline-block;
    margin-left:2em;
}

.btn2 a{
    display: inline-block;
    background:#0066ff;
    color:#fff;
    padding:1em 6em 1.1em;
    font-size:1.2rem;
    border-radius:100vmax;
    border:solid 4px #fff;
    font-weight: bold;
}
.btn3 a{
    display: inline-block;
    background:#ff35dd;
    color:#fff;
    padding:1em 6em 1.1em;
    font-size:1.2rem;
    border-radius:100vmax;
    border:solid 4px #fff;
    font-weight: bold;
}
.btns{
    width:80%;
    margin:0 auto;
}
@media (min-width:600px) and (max-width:899px){
    .cta{
    width:90%;
    }
    .btns{
    width:100%;
}
.btn2,.btn3{
    width:48%;
}
.btn2 a{
    display: block;
    background:#0066ff;
    color:#fff;
    padding:1em 0 1.1em;
    font-size:1.2rem;
    border-radius:100vmax;
    border:solid 4px #fff;
    text-align: center;
}
.btn3 a{
    display: block;
    background:#ff35dd;
    color:#fff;
    padding:1em 0 1.1em;
    font-size:1.2rem;
    border-radius:100vmax;
    border:solid 4px #fff;
    text-align: center;
}
}
@media (max-width:599px){
    .cta{
    width:100%;
    padding:10% 6%;
    }
    .ctaCopy1{
    font-size:1.3rem;
    font-weight:800;
}
.ctaCopy2{
    font-size:1.2rem;
}
.ctaCopy2 span{
    width:35%;
    display: block;
    margin-left:2em;
}
.btns{
    width:100%;
}
.btn2, .btn3{
    width:100%;
}
.btn2 a{
    display: inline-block;
    width:100%;
    padding:1em 3em 1.1em;
    text-align: center;
}
.btn3 a{
    display: block;
    width:100%;
    padding:1em 3em 1.1em;
    text-align: center;
}
}

.steps img{
    width:40%;
    display: block;
    margin:0 auto 1.5vw;
}
.steps h3{
    color:#ff35dd;
    font-size:1.2rem;
    
}

.accordion {
            overflow: hidden;
        }

        .accordion-item {
            margin-bottom:20px
        }

        .accordion-item.active {
            border: 2px solid #000;
        }

       

        .accordion-header {
            background: white;
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.3s ease;
            position:relative;
        }

        .accordion-header:hover {
            background: #f5f5f5;
        }

        .accordion-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
        }

        .accordion-icon {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
        }

        .accordion-icon::before {
            content: '+';
            font-size: 1.5rem;
            color:#ff35dd;
            font-weight: bold;
            position:relative;
            top:-0.25em;
        }

        .accordion-item.active .accordion-icon {
            transform: rotate(45deg);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
            background: #fafafa;
        }

        .accordion-item.active .accordion-content {
            max-height: 500px;
        }

        .accordion-text {
            color: #1a1a1a;
            line-height: 1.6;
            padding: 20px;
        }

        #footer{
           background: #0066ff;
           padding:160px 0 80px;
        }
         #footer p{
            color:#e6e3dd;
         }
         .footLogo img{
            width:20%;
            display: block;
            margin:0 auto 2vw;
         }
         .footCopy{
            text-align: center;
            font-size:1.3rem;
            font-weight: bold;
         }
         .footList li a{
             color:#e6e3dd;
             font-weight: bold;
             display: inline-block;
             padding:1em;
         }
         .copyRight{
            text-align: center;
            font-weight: bold;
         }
         .gradient{
            background: #E4F4FE;
background: linear-gradient(120deg,rgba(228, 244, 254, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(228, 244, 254, 1) 100%);
         }
         .btn4 a{
            color:#fff;
            display: inline-block;
            border:solid 1px #E4F4FE;
            padding:1.2em 5em;
            font-size:1.2rem;
         }
         @media (min-width:600px) and (max-width:899px){
            .btn4 a{
            display: block;
            padding:1.2em 0;
            font-size:1.2rem;
         }
         }
    @media (max-width:599px){
        #footer{
           background: #0066ff;
           padding:18vw 0 15vw;
        }
         .footLogo img{
            width:60%;
            margin:0 auto 10vw;
         }
         .footList li{
            width:100%;
         }
         .footList li a{
            border-bottom:solid 1px #E4F4FE;
            display: block;
         }
         .footList {
            margin-bottom:20vw
         }
          .btn4 a{
            color:#fff;
            display: block;
            border:solid 1px #E4F4FE;
            padding:1.2em 0;
            font-size:1.2rem;
         }
    }

    /* ここから問い合わせフォーム*/
.inquiryForm{
    width:80%;
    margin-inline:auto;
    background:#fff;
    padding:8%;
}
.contactTitle{
    font-size:1.5rem;
}
.formList{
    width:80%;
    margin-inline:auto;
    margin-bottom:60px;
}
.formList dt{
    font-weight: bold;
    font-size:1.3rem;
    padding:1em 0;
    display: flex;
    align-items: center;
}
.formList dt span{
    font-size:0.6em;
    background:#ff35dd;
    color:#fff;
    padding: 0 2em;
    border-radius:100vmax;
    display:inline-block;
    margin-left:2em;
}
.formList dd input[type="text"],.formList dd input[type="email"],.formList dd input[type="tel"],textarea{
  -webkit-appearance: none;
  appearance: none;
  border:none;
  background:#E4F4FE;
  font-size:1.5rem;
  padding:1em ;
  width:100%;
}

 .wpcf7 input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wpcf7 .wpcf7-list-item {
    margin: 0 0 10px 0;
}

.wpcf7 .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 35px;
    min-height: 26px;
    margin-right:1em;
}

.checkbox-modern-slide .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 26px;
    background: #ddd;
    border-radius: 13px;
    transition: all 0.3s ease;
}

.checkbox-modern-slide .wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.checkbox-modern-slide input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background: #667eea;
}

.checkbox-modern-slide input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    left: 27px;
}

.checkbox-modern-slide .wpcf7-list-item-label {
    padding-left: 60px;
}

.sendBox{
  text-align: center;
}
.sendBox input[type="submit"]{
  -webkit-appearance: none;
  appearance: none;
  border:none;
  background:#ff70b4;
  color:#fff;
  font-weight: bold;
  font-size:1.6em;
  padding:1.2em 5em;
}
@media (min-width:600px) and (max-width:899px){
  .inquiryForm{
    width:100%;
    padding:10% 5%;
}
}
@media (max-width:599px){
  .inquiryForm{
    width:100%;
    padding:15% 5%;
}
.contactTitle{
    font-size:1rem;
}
.formList{
    width:100%;
    margin-inline:auto;
}
.formList dt{
    font-weight: bold;
    font-size:1rem;
    padding:1em 0;
}
.wpcf7 .wpcf7-checkbox,
    .wpcf7 .wpcf7-radio {
        display: flex;
        flex-direction: column;
    }
    
    .wpcf7 .wpcf7-list-item {
        display: block;
        width: 100%;
        margin: 0 0 15px 0;
    }
    
    .wpcf7 .wpcf7-list-item-label {
        display: flex;
        width: 100%;
    }
    .sendBox input[type="submit"]{
  display: block;
  width:100%;
  font-size:1.3em;
  padding:1.2em 0em;
}
}