@charset "UTF-8";

/* 共通部分
------------------------------- */
#qodef-page-inner {
    padding: 0px 0px 0px;
}

.qodef-content-grid {
    width: 100% !important;
    margin: 0 auto;
}

body[class*=drleigh-core] p {
    margin: 0px; 
}

.lp html {
    font-size: 100%;
}
.lp body{
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 400;
    color: #242424;
    margin: 0;
    font-size: 16px !important;
    letter-spacing: 0.08em;
}

.lp p{
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 400;
}


.lp .inner {
    width: 70%;
    margin: 0 auto;
}

.lp .inner_2 {
    width: 50%;
    margin: 0 auto;
}


.lp a {
    text-decoration-color: none;  /*リンクの色を消す*/
    color: #242424;
    font-weight: 400;
    text-decoration: none;
    width: fit-content;
}
.lp img {
    object-fit: fill;
    object-position: center center;
    width: 100%;
}

.lp .logo{
    object-fit: contain;
}



.lp h2 {
    background-color: #ffffff;
    color: #2291BF;
    font-size: 3vw;
    font-weight: 500;
    padding: 0.5vw;
    width: fit-content;
    letter-spacing: -0.1em;
}



.lp .komidasi {
    color: #1c1c1c;
    font-size: 2.3vw;
    font-weight: 500;
}

.lp .midasi_box {
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
    align-items: center;
    gap: 30px;
}

.lp .midasi_box .text {
    font-size: 18px;
}



.lp .midasi {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #242424;
    text-align: center;
}

.lp .path {
    height: 5px;
    width: 200px;
    background-color: #2A7BCC;
}

.lp .text{
    font-weight: 400;
    line-height: 1.7;
    font-size: 16px !important;
    font-family: "BIZ UDGothic", sans-serif;
}

.lp .geo {
    font-family: "Geologica", sans-serif;
    font-weight: 400;
}

.lp .t20 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.7;
}

.t25 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.7;
}

.lp .t42 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.7;
}

.lp .blue {
    color: #2A7BCC;
}

.lp .yellow {
    background: linear-gradient(transparent 60%, #FAE62F 60%);
    font-weight: 700;
}

.lp html,body {
overflow-x: hidden;
}



.lp .pc {
    display: block;
}

.lp .sp {
    display: none;
}

/*画像の下の隙間を消すコード*/

.lp img{
	vertical-align:top;
}




/* 背景
------------------------------- */

.lp .back img {
  position: fixed;
  top: 10vw;
  left: 25vw;
  height: 100vh;
  object-fit: contain; /* 画面いっぱいに拡大 */
  z-index: -10;       /* 背景のようにする */
}



/* cta_1------------------------------- */

.lp .cta_1 {
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    padding: 30px 0 100px 0;
    gap: 50px;
}

.lp .btn {
    width: 350px;
    height: auto;
}


.lp .btn {
  display: inline-block;
  animation: float 1.2s ease-in-out infinite;
}



@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}


/* cta_2------------------------------- */

.lp .cta_2 {
    background-color: #ffff;
    padding: 50px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp .cta_2 p {
    text-align: center;
    line-height: 1.7;
}


/* area1------------------------------- */

.lp .area1, .lp .area3, .lp .area5, .lp .area7, .lp .area9, .lp .area12, .lp .area15 {
    background-color: #EAF3FC;
}

.lp .area1 .inner {
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp .area1 .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background-color: #ffff;
    border-radius: 20px;
    padding: 50px;
}

.lp .list {
    display: flex;
    gap: 10px;
    align-items: start;
}

.lp .list img {
    width: 30px;
    height: 30px;
}
.lp .list p {
    font-size: 18px;
}

.lp .area1 .pc {
    width: 80%;
    margin-top: 30px;
}



/* area2------------------------------- */

.lp .area2 {
    padding: 100px 0;
}

.lp .area2 .inner {
    width: 50%;
}

/* area3------------------------------- */

.lp .area3 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.lp .area3 .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.area3 .box2 {
    background-color: #ffff;
    border-radius: 20px;
    padding: 50px;
    margin: 50px 0;
}

.lp .area3 .box2 .t25 {
    border-bottom: dashed #2A7BCC 2px;
    padding-bottom: 10px;
}

.lp .area3 .box2 .list_box {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}



/* area4------------------------------- */

.lp .area4 {
    padding: 100px 0;
}



.lp .area4 img {
    padding: 50px 0;
}


/* area5------------------------------- */

.lp .area5 {
    padding: 100px 0;
}



.lp .area5 .inner_2 img {
    padding: 50px 0;
}

.lp .area5 .inner {
    margin-top: 100px;
}

.lp .area5 .cta_2 {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.lp .area5 .pc {
    width: 50%;
    margin: 0 auto;
    margin-top: 50px;
}

.lp .area5 .img_box {
    width: 50%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
}




/* area6------------------------------- */

.lp .area6 {
    padding: 100px 0;
}

.lp .area6 .container {
    background-color: #EAF3FC;
    border-radius: 20px;
    padding: 50px;
}

.lp .area6 .name_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lp .area6 .name_box p {
    text-align: center;
}

.lp .area6 .name_box img {
    width: 30%;
}

.lp .area6 .name {
    font-size: 40px;
    font-weight: 700;
}

.lp .area6 .inner .container:nth-child(3) {
    margin-top: 100px;
}

.lp .area6 .container .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.lp .area6 .t25 {
    text-align: center;
    width: 100%;
    border-bottom: dashed #2A7BCC 2px;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.lp .area6 .cta_1 {
    padding-top: 100px;
    padding-bottom: 0px;
}


/* area7------------------------------- */

.lp .area7 {
    padding: 100px 0 100px 0;
}

.lp .area7 .inner .box:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.lp .area7 .text {
    text-align: center;
}

.lp .area7 .inner .box:nth-child(5) {
    padding: 100px 0;
}

.lp .area7 .back_w {
    padding: 30px;
    border-radius: 20px;
    background-color: #ffffff;
    width: 50%;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.lp .area7 .cta_2 .text {
    margin-bottom: 50px;
}


/* area8------------------------------- */

.lp .area8 {
    padding: 100px 0;
}

.lp .area8 .container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.lp .area8 .q {
    border-radius: 20px;
    background-color: #EAF3FC;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.lp .area8 .box img {
    position: absolute;
    top: -30px;
    left: 30px;
    width: 150px;
}

.lp .area8 .a {
    display: flex;
    align-items: start;
    gap: 20px;
    padding: 15px;
}

/* area9------------------------------- */

.lp .area9 {
    padding: 100px 0;
}

/* area10------------------------------- */

.lp .area10 {
    padding: 100px 0;
}

.lp .area10 p {
    text-align: center;
}

.lp .area10 .inner {
    background-color: #EAF3FC;
    border-radius: 20px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp .area10 .midasi_box {
    gap: 15px;
}

.lp .area10 .icon {
    width: 66px;
}

.lp .area10 a {
    margin-top: 30px;
    width: 60%;
}




/* area11------------------------------- */

.lp .area11 {
    padding: 0 0 100px 0;
}

/* area12------------------------------- */

.lp .area12 {
    padding: 100px 0;
}

.lp .area12 .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.lp .area12 .l {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lp .area12 .r img {
    margin-bottom: 20px;
}


/* area13------------------------------- */

.lp .area13 {
    padding: 100px 0;
}

.lp .area13 .container {
    background-color: #EAF3FC;
    border-radius: 20px;
    padding: 30px;
}


.lp .area13 .t25 {
    text-align: center;
    width: 100%;
    border-bottom: dashed #2A7BCC 2px;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.lp .area13 .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}
.lp .area13 .inner .container:nth-child(2) {
    margin-bottom: 50px;
}



/* 背景 */
.lp .modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 薄い黒 */
  justify-content: center;
  align-items: center;
}

/* 動画枠 */
.lp .modal-content {
  position: relative;
  width: 50%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

/* iframe */
.lp .modal-content iframe {
  width: 100%;
  height: 100%;
}

/* バツボタン */
.lp .close {
  position: absolute;
  top: -35px;
  right: -10px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}



/* area14------------------------------- */

.lp .area14 {
    padding: 0px 0 100px 0;
}

.lp .area14 .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.lp .area14 .container .r {
    background-color: #EAF3FC;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp .area14 .cta_2 {
    background-color: #EAF3FC;
    margin-top: 50px;
    gap: 30px;
}



/* area15------------------------------- */

.lp .area15 {
    padding: 100px 0;
}

.lp .area15 .container {
    margin-top: 50px;
}

.lp .area15 .name_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 70%;
    margin: 0 auto;
}

.lp .area15 .name_box .l {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lp .area15 .name_box img {
    width: 255px;
}

.lp .area15 .box {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 50px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.lp .area15 .box .blue {
    width: 100%;
    border-bottom: dashed #2A7BCC 2px;
    padding-bottom: 10px;
}

.lp .area15 a {
    padding-top: 20px;
    color: #2A7BCC;
    border-bottom: #2A7BCC solid 2px;
    padding-bottom: 3px;
}


/* footer------------------------------------------------------------------------------------------------ */

.lp .page-fotter {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #242424;
    padding: 50px;
    color: #ffffff;
    gap: 10px;
}

.lp .page-fotter a {
    color: #ffffff;
}



/* contact ======================================================================================== */

.lp .contact_area1 .wrapper_w {
    margin: 5vw 0 10vw 0;
}



.lp .contact_area1 .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Noto Sans JP", sans-serif;
}

.lp .contact_area1 .contact a {
    font-family: "Noto Sans JP", sans-serif;
}

.lp .contact_area1 .contact .required {
    background-color: #cc403b;
    border-radius: 0.5vw;
    color: #ffff;
    margin-left: 0.5vw;
    padding: 0.2vw 0.5vw;
    font-size: 1vw;
}

.lp .contact_area1 form {
    width: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.lp .contact_area1 form div{
    margin-bottom: 2vw;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.lp .contact_area1 form div:nth-child(8) {
    width: fit-content;
    margin-top: 2vw;
}

.lp .contact_area1 label{
    font-size: 1.2vw;
    color: #1c1c1c;
    display: block;
    font-weight: 400;
    margin: 0 auto;
    margin-top: 0.6vw;
}


.lp .contact_area1 input[type="text"],
.lp .contact_area1 input[type="email"],
.lp .contact_area1 input[type="tel"],
.lp .contact_area1 textarea,
.lp .contact_area1 select{
    background: #ececec;
    padding: 1vw;
    font-size: 1.2vw;
    height: 3vw;
    border-radius: 0.5vw;
}

.lp .contact_area1 input[type="text"],
.lp .contact_area1 input[type="email"],
.lp .contact_area1 input[type="tel"],
.lp .contact_area1 select{
    width: 70%;
    font-family: "Noto Sans JP", sans-serif;
}

.lp .contact_area1 textarea{
    width: 70%;
    height: 10vw;
}

.lp .contact_area1 input[type="submit"]{
    border: none;
    cursor: pointer;
    line-height: 1;
}




.lp .contact_area1 .underbutton {
    width: 350px;
    margin: 50px 0 30px 0;
    color: #ffff;
}

.lp .contact_area1 .checkbox {
    display: flex;
    align-items: baseline;
}

.lp .contact_area1 .checkbox label {
    margin-left: 10px;
}

.lp .contact_area1 .contact button {
    width: 20vw;
    padding: 20px;
    background-color: #2291BF;
    color: #ffff;
    border-radius: 100vw;
    font-weight: 500;
    margin-top: 3vw;
    position: relative;
}





input, textarea, select{
    background-color: transparent;
    border-color: #d0d2d4;
    border-style: solid;
    margin-bottom: 10px;
}



/* アニメーション ----------------------------------------*/



/* 初期状態：下にずらして透明 */
.lp .fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 表示される時 */
.lp .fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

.lp .fade-up2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 表示される時 */
.lp .fade-up2.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s; /* ここで遅延を設定 */
}

.lp .fade-up3 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 表示される時 */
.lp .fade-up3.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s; /* ここで遅延を設定 */
}





.lp .fade-up-onload {
  opacity: 0;
  transition: opacity 1.8s ease; /* じわっと */
}

.lp .fade-up-onload.visible {
  opacity: 1;
}

.lp .fade-up-onload2 {
  opacity: 0;
  transition: opacity 1.8s ease; /* じわっと */
}

.lp .fade-up-onload2.visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s; /* ここで遅延を設定 */
}





/*モバイル版
--------------------------------------------------------------------------モバイル版*/
@media (max-width: 600px) {





    .lp .pc {
        display: none;
    }

    .lp .sp {
        display: block;
    }


    .lp .inner {
        width: 90%;
    }

    .lp .inner_2 {
        width: 90%;
    }

    .lp .midasi {
        font-size: 30px;
    }

    .lp .midasi_box {
        gap: 20px;
    }

    .lp .t25 {
        font-size: 20px;
    }

    .lp .t42 {
        font-size: 30px;
    }


    /* cta_1------------------------------- */

    .lp .cta_1 {
        flex-direction: column;
        align-items: center;
        width: 90%;
        padding: 30px 0 80px 0;
    }


    .lp .cta_2 {
        padding: 40px 15px;
    }

    .lp .btn {
        width: 310px;
    }



    /* area1------------------------------- */

    .lp .area1 .inner {
        padding: 80px 0;
    }

    .lp .area1 .box {
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .lp .area1 .sp {
        width: 100%;
        margin-top: 30px;
    }


    /* area2------------------------------- */

    .lp .area2 {
        padding: 80px 0;
    }

    .lp .area2 .inner {
        width: 90%;
    }

    /* area3------------------------------- */


    .lp .area3 {
        padding: 80px 0;
    }

    .lp .area3 .box {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: start;
    }

    .lp .area3 .box2 {
        padding: 20px;
    }



    /* area4------------------------------- */

    .lp .area4 {
        padding: 80px 0;
    }


    /* area5------------------------------- */


    .lp .area5 {
        padding: 80px 0;
    }

    .lp .area5 .sp {
        margin: 30px 0;
    }

    .lp .area5 .img_box {
        width: 90%;
    }

    .lp .area5 .inner {
        margin-top: 50px;
    }


    /* area6------------------------------- */ 

    .lp .area6 {
        padding: 80px 0;
    }

    .lp .area6 .midasi {
        font-size: 30px;
    }

    .lp .area6 .container {
        padding: 40px 20px;
    }

    .lp .area6 .name_box img {
        width: 50%;
    }

    .lp .area6 .inner .container:nth-child(3) {
        margin-top: 50px;
    }

    .lp .area6 .cta_1 {
        padding-top: 80px;
    }



    /* area7------------------------------- */ 

    .lp .area7 {
        padding: 80px 0;
    }

    .lp .area7 .inner .box:nth-child(2) {
        display: flex;
        flex-direction: column;
    }

    .lp .area7 .inner .box:nth-child(5) {
        padding-top: 80px;
    }

    .lp .area7 .back_w {
        width: 100%;
    }

    /* area8------------------------------- */ 

    .lp .area8 {
        padding: 80px 0;
    }

    .lp .area8 .q {
        padding: 5px 15px ;
    }

    .lp .area8 .box img {
        position: absolute;
        top: -40px;
        left: 10px;
        width: 150px;
    }

    .lp .area8 .container {
        gap: 35px;
    }



    /* area9------------------------------- */
    
    .lp .area9 {
        padding: 80px 0;
    }


    /* area10------------------------------- */ 


    .lp .area10 {
        padding: 80px 0;
    }

    .lp .area10 .inner {
        padding: 40px 20px;
    }

    .lp .area10 .midasi {
        font-size: 25px;
    }

    .lp .area10 a {
        width: 100%;
    }

    /* area11------------------------------- */ 


    .lp .area11 {
        padding: 0 0 80px 0;
    }


    /* area12------------------------------- */ 


    .lp .area12 {
        padding: 80px 0;
    }

    .lp .area12 .box {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 30px;
    }

    /* area13------------------------------- */ 

    .lp .area13 {
        padding: 80px 0;
    }

    .lp .area13 .box {
        display: flex;
        flex-direction: column;
    }

    .lp .area13 .container {
        padding: 40px 20px;
    }

    .lp .modal-content {
        width: 100%;
    }

    /* area14------------------------------- */ 

    .lp .area14 {
        padding: 80px 0;
    }


    .lp .area14 .container {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 30px;
    }

    .lp .area14 .container .r {
        padding: 30px;
    }


    /* area15------------------------------- */ 

    .lp .area15 {
        padding: 80px 0;
    }

    .lp .area15 .name_box {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .lp .area15 .name_box p {
        text-align: center;
    }

    .lp .area15 .container {
        margin-top: 20px;
    }

    .lp .area15 .inner .container:nth-child(3) , .lp .area15 .inner .container:nth-child(4)  {
        margin-top: 50px;
    }

    .lp .area15 .name_box .l {
        gap: 10px;
    }

    .lp .area15 .box {
        padding: 40px 20px;
        margin-top: 30px;
    }

    .lp .area15 .name_box img {
        width: 185px;
    }


    

    /* footer------------------------------- */

    .lp .page-fotter {
        padding: 5vw;
    }

    .lp .page-fotter p , .lp .page-fotter a {
        font-size: 12px;
    }












}