@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

/*=========================================
共通
=========================================*/
.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hover a,
a.hover {
    opacity: 1;
    transition: opacity 0.4s !important;
}

.hover a:hover,
a.hover:hover {
    opacity: 0.6;
}

.sp { display: none !important; }
@media print, screen and (max-width:767px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}


/*=========================================
footer
=========================================*/
.c-contact-area,
.l-footer {
    display: none;
}

.lp_footer {
    width: 100%;
    height: clamp(0px, 9.2vw, 110px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #231815;
}

.lp_footer a {
    display: block;
    line-height: 0;
}

.lp_footer img {
    width: clamp(0px, 34.2vw, 410px);
}

@media print, screen and (max-width:767px) {
    .lp_footer {
        height: 21vw;
    }

    .lp_footer img {
        width: 67vw;
    }
}


/*=========================================
MV
=========================================*/
#mv {
    width: 100%;
    height: clamp(0px, 45vw, 540px);
    background: url("../../images/lp/yousetu/page_title_bg.png") no-repeat top center / cover;
    position: relative;
    overflow: hidden;
    z-index: 3;
    margin-bottom: clamp(0px, 3.3vw, 40px);
}

#mv .logo {
    width: 1150px;
    max-width: 96%;
    height: clamp(0px, 10.4vw, 125px);
    margin: 0 auto;
    display: flex;
    align-items: center;
}

#mv .logo a {
    width: clamp(0px, 10.4vw, 125px);
}

#mv .text_area {
    width: 100%;
    color: #fff;
    text-align: center;
    font-feature-settings: "palt";
}

#mv .text_area .title_1 {
    font-size: clamp(0px, 3.9vw, 47px);
    font-weight: bold;
    line-height: 1.3em;
    letter-spacing: 0.06em;
    margin-bottom: 0.3em;
}

#mv .text_area .title_2 {
    font-size: clamp(0px, 5.4vw, 65px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.06em;
    margin-bottom: 0.5em;
}

#mv .text_area .title_2 span {
    font-size: 1.2em;
}

#mv .text_area .title_3 {
    font-size: clamp(0px, 2vw, 24px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.06em;
    margin-bottom: 1.3em;
}

#mv .img_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 1.3vw, 15px);
}

#mv .img_list li {
    width: clamp(0px, 14.2vw, 170px);
    aspect-ratio: 170 / 120;
    overflow: hidden;
    border: clamp(0px, 0.4vw, 5px) solid #fff;
    background-color: #fff;
}

#mv .img_list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media print, screen and (max-width:767px) {
    #mv {
        height: 90vw;
        background-image: url("../../images/lp/yousetu/page_title_bg_sp.png");
        margin-bottom: 4vw;
    }

    #mv .logo {
        max-width: 94%;
        height: 23vw;
    }

    #mv .logo a {
        width: 22vw;
    }
    
    #mv .text_area {
        white-space: nowrap;
    }

    #mv .text_area .title_1 {
        font-size: 5.3vw;
        margin-bottom: 0.7em;
    }

    #mv .text_area .title_2 {
        font-size: 7.4vw;
        margin-bottom: 0.8em;
    }

    #mv .text_area .title_3 {
        font-size: 3.4vw;
        margin-bottom: 1.9em;
    }

    #mv .img_list {
        gap: 1.8vw;
    }

    #mv .img_list li {
        width: 21vw;
        border-width: 0.6vw;
    }
}


/*=========================================
main
=========================================*/
.main_cont {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.sec_bg_l,
.sec_bg_r {
    position: relative;
    z-index: 1;
}

.sec_bg_l {
    background: url("../../images/lp/yousetu/sec_bg_l.png") no-repeat top center;
    background-size: auto clamp(0px, 28.8vw, 345px);
}

.sec_bg_r {
    background: url("../../images/lp/yousetu/sec_bg_r.png") no-repeat top center;
    background-size: auto clamp(0px, 26.3vw, 315px);
}

@media print, screen and (min-width:1920px) {
    .sec_bg_l,
    .sec_bg_r {
        background-size: 100% auto;
    }
}

@media print, screen and (max-width:767px) {
    .sec_bg_l {
        background-image: url("../../images/lp/yousetu/sec_bg_l_sp.png");
        background-size: 100% auto;
    }
    
    .sec_bg_r {
        background-image: url("../../images/lp/yousetu/sec_bg_r_sp.png");
        background-size: 100% auto;
    }
}

.text_box {
    letter-spacing: 0.06em;
    background-color: #fff;
    border: clamp(0px, 0.3vw, 3px) solid #e60012;
    border-radius: clamp(0px, 1.1vw, 13px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text_box.box_1 {
    font-size: clamp(0px, 2.8vw, 33px);
    padding: 1em 0.6em 0.8em;
}

.text_box.box_2 {
    font-size: clamp(0px, 2.8vw, 33px);
    padding: 1em 0.8em 0.8em;
}

.text_box p {
    font-weight: 900;
    line-height: 1;
    font-feature-settings: "palt";
    background: linear-gradient(transparent 70%, #ffed00 70%);
    padding-bottom: 0.2em;
}

.text_box.box_3 .text_1 {
    font-size: clamp(0px, 2.8vw, 33px);
    margin-top: 0.4em;
}

.text_box.box_3 .text_2 {
    font-size: clamp(0px, 1.75vw, 21px);
    font-weight: 700;
    margin: 0.4em 0.6em 0.5em;
    background: linear-gradient(transparent 50%, #ffed00 50%);
}

@media print, screen and (max-width:767px) {
    .text_box {
        border-width: clamp(2px, 0.4vw, 0px);
        border-radius: 1.8vw;
        white-space: nowrap;
    }

    .text_box.box_1 {
        font-size: 5.2vw;
    }
    
    .text_box.box_2 {
        font-size: 5.2vw;
        padding: 1em 0.4em 0.8em;
    }
    
    .text_box.box_3 .text_1 {
        font-size: 5.2vw;
    }

    .text_box.box_3 .text_2 {
        font-size: 3.2vw;
        margin: 0.6em 0.8em 0.5em;
    }
}


/*=========================================
about
=========================================*/
#about {
    width: 100%;
    padding: clamp(0px, 7.5vw, 90px) 0 clamp(0px, 5.8vw, 70px);
    display: flex;
    justify-content: center;
    gap: clamp(0px, 0.3vw, 3px);
}

#about .l_area {
    margin-left: clamp(0px, 9.2vw, 110px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0px, 4.6vw, 55px) 0;
}

#about .l_area .img_area {
    width: clamp(0px, 16.7vw, 200px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

#about .l_area .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#about .r_area {
    width: clamp(0px, 48.3vw, 580px);
    text-align: center;
    padding-top: clamp(0px, 7.5vw, 90px);
}

#about .r_area img {
    width: 100%;
    margin-bottom: clamp(0px, 2.1vw, 25px);
}

#about .r_area .text_1 {
    font-size: clamp(0px, 2.25vw, 27px);
    line-height: 1.3em;
    font-weight: 900;
    letter-spacing: 0.03em;
}

@media print, screen and (max-width:767px) {
    #about {
        padding: 10vw 0 12vw;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    #about .l_area {
        margin-left: 0;
        padding-bottom: 14vw;
        gap: 0;
        position: relative;
    }

    #about .l_area .img_area {
        width: 27vw;
        position: absolute;
        right: -21.5vw;
        top: 2vw;
        z-index: 1;
    }
    
    #about .l_area .text_box {
        position: relative;
        z-index: 2;
    }
    
    #about .r_area {
        width: 92vw;
        padding-top: 0;
    }

    #about .r_area img {
        margin-bottom: 4.5vw;
    }

    #about .r_area .text_1 {
        font-size: 4.2vw;
    }
}


/*=========================================
hyper
=========================================*/
#hyper {
    width: 100%;
    padding: clamp(0px, 8.8vw, 105px) 0 clamp(0px, 7.5vw, 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

#hyper .text_box {
    margin-bottom: clamp(0px, 6.7vw, 80px);
}

.hyper_list {
    display: flex;
    justify-content: center;
    gap: clamp(0px, 0.8vw, 10px);
}

.hyper_list li {
    width: clamp(0px, 30.4vw, 365px);
    background-color: #fff;
    border: clamp(0px, 1vw, 12px) solid;
    border-radius: clamp(0px, 3.1vw, 37px);
    padding: clamp(0px, 2.5vw, 30px) clamp(0px, 1.3vw, 15px) clamp(0px, 1.1vw, 13px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-feature-settings: "palt";
}
.hyper_list li:nth-of-type(1) { border-color: #004ea2; }
.hyper_list li:nth-of-type(2) { border-color: #f5a200; }
.hyper_list li:nth-of-type(3) { border-color: #6fba2c; }

.hyper_list li .nb {
    width: clamp(0px, 7.1vw, 85px);
    position: absolute;
    top: clamp(-55px, -4.6vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.hyper_list li .text_1 {
    font-size: clamp(0px, 1.9vw, 23px);
    line-height: 1.4em;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-align: center;
    margin-bottom: 0.3em;
    white-space: nowrap;
}

.hyper_list li .text_2 {
    font-size: clamp(0px, 2.7vw, 32px);
    line-height: 1.3em;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #e60012;
    font-weight: 900;
    margin-bottom: 0.1em;
}

.hyper_list li .text_3 {
    font-size: clamp(0px, 1.6vw, 19px);
    line-height: 1.6em;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 0.8em;
}

.hyper_list li .img_area {
    width: clamp(0px, 16.7vw, 200px);
    aspect-ratio: 200 / 130;
    margin-top: auto;
}

.hyper_list li .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media print, screen and (max-width:767px) {
    #hyper {
        padding: 12vw 0 13vw;
    }

    #hyper .text_box {
        margin-bottom: 10vw;
    }

    .hyper_list {
        flex-direction: column;
        align-items: center;
        gap: 10vw;
    }

    .hyper_list li {
        width: 90vw;
        border: 1.5vw solid;
        border-radius: 4.6vw;
        padding: 7vw 3vw 3vw;
    }

    .hyper_list li .nb {
        width: 14vw;
        top: -8vw;
    }

    .hyper_list li .text_1 {
        font-size: 4vw;
        margin-bottom: 1em;
    }

    .hyper_list li .text_2 {
        font-size: 5.6vw;
        line-height: 1.4em;
        margin-bottom: 0.7em;
    }

    .hyper_list li .text_3 {
        font-size: 3.6vw;
    }

    .hyper_list li .img_area {
        width: 42.5vw;
    }
}


/*=========================================
case
=========================================*/
#case {
    width: 100%;
    padding: clamp(0px, 8.3vw, 100px) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

#case .text_box {
    margin-bottom: clamp(0px, 5vw, 60px);
}

.case_list {
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 3.3vw, 40px);
    margin-bottom: clamp(0px, 4.2vw, 50px);
}

.case_list li {
    display: flex;
    align-items: center;
}

.case_list li .nb {
    width: clamp(0px, 12.9vw, 155px);
    margin-right: clamp(0px, 0.5vw, 6px);
}

.case_list li .case_text {
    width: clamp(0px, 49.2vw, 590px);
    aspect-ratio: 590 / 58;
    display: flex;
    align-items: center;
    position: relative;
}

.case_list li .case_text::before {
    content: "";
    width: 120%;
    height: 100%;
    background-color: #fff096;
    position: absolute;
    top: 0;
    left: -20%;
    z-index: -1;
}

.case_list li .case_text p {
    font-size: clamp(0px, 2vw, 24px);
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

@media print, screen and (max-width:767px) {
    #case {
        padding: 10vw 0 0;
    }

    #case .text_box {
        margin-bottom: 18vw;
    }

    .case_list {
        gap: 6vw;
        margin-bottom: 10vw;
    }
    
    .case_list li {
        flex-direction: column;
        gap: 2.5vw;
    }

    .case_list li .nb {
        width: 25vw;
        margin-right: 0;
    }

    .case_list li .case_text {
        width: 92vw;
        aspect-ratio: inherit;
        background-color: #fff096;
    }

    .case_list li .case_text::before {
        display: none;
    }

    .case_list li .case_text p {
        width: 100%;
        font-size: 4.2vw;
        line-height: 1.4em;
        text-align: center;
        padding: 0.7em 0.2em;
    }
}


/*=========================================
dl
=========================================*/
#dl {
    width: 100%;
    padding: 0 0 clamp(0px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.dl_area {
    width: clamp(0px, 82.5vw, 990px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.dl_area .dl_text {
    font-size: clamp(0px, 1.9vw, 23px);
    font-weight: 900;
    line-height: 1.6em;
    text-align: center;
    margin-bottom: 0.8em;
}

.dl_area .dl_img {
    width: clamp(0px, 16.3vw, 195px);
    position: absolute;
    bottom: 0;
    right: 0;
}

.dl_area .dl_button {
    width: clamp(0px, 46.7vw, 560px);
    aspect-ratio: 560 / 90;
    border-radius: clamp(0px, 1vw, 12px);
    background-color: #e60012;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0px, 2.4vw, 29px);
    line-height: 1;
    font-weight: 500;
    transition:background 0.4s !important;
}

.dl_area .dl_button:hover {
    background-color: #00387d;
}

@media print, screen and (max-width:767px) {
    #dl {
        padding: 0 0 11.5vw;
    }

    .dl_area {
        width: 100%;
    }

    .dl_area .dl_text {
        font-size: 4.2vw;
        line-height: 1.5em;
    }

    .dl_area .dl_img {
        width: 44vw;
        position: relative;
        margin-bottom: 3.5vw;
    }

    .dl_area .dl_button {
        width: 84vw;
        aspect-ratio: 840 / 133;
        border-radius: 1.7vw;
        font-size: 4.3vw;
    }
}



/* ===============================================
   anim
=============================================== */
.js-fadeup-fv,
.js-fadeup {
    opacity: 0;
    transform: translateY(5vh);
    transition: opacity 1s, transform 1s;
}

.js-fadeup-fv.is-visible,
.js-fadeup.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-fadein {
    opacity: 0;
    transition: opacity 1s;
}

.js-fadein.is-visible {
    opacity: 1;
}

/* mv */
.js-fadein-1 {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.js-fadein-1.is-visible,
.js-fadein-2.is-visible {
    opacity: 1;
}
.js-fadein-3 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-fadein-3.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-fadein-2 .title_1,
.js-fadein-2 .title_3 {
    opacity: 0;
    transform: translateX(-30vw);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fadein-2 .title_2 {
    opacity: 0;
    transform: translateX(30vw);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fadein-2.is-visible .title_1,
.js-fadein-2.is-visible .title_2,
.js-fadein-2.is-visible .title_3 {
    transform: translateX(0);
    opacity: 1;
}