@charset "utf-8";

@media (max-width: 1024px) {
}

@media (max-width: 599px) {
}

:root {
    --color-main: #1a806c;
}

main {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* ===============================================
   header
=============================================== */
.nav {
    background-color: #fef9d0;
}

.nav_actions {
    border-color: var(--color-black);
    background-color: var(--color-black);
}

.nav_actions a {
    color: var(--color-black);
    background-color: #f0ea0c;
}

.nav .nav_main a::before,
.nav_actions a::before,
.nav_sns a {
    background-color: var(--color-main);
}

.nav_actions a span::before {
    background-color: var(--color-black);
}


/* ===============================================
   bg
=============================================== */
.bg_yellow {
    background-color: rgba(254, 249, 208, 1);
}

.bg_yellow_grad {
    background: linear-gradient(-131deg,rgba(255, 255, 251, 1) 17%, rgba(254, 249, 208, 1) 49%);
}

.bg_green {
    background-color: var(--color-main);
    background-image: url("../img/jidou/voice_bg.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: clamp(0px, 176.7vw, 2120px) auto;
}

@media (max-width: 599px) {
    .bg_yellow_grad {
        background: linear-gradient(-180deg,rgba(255, 255, 251, 1) 10%, rgba(254, 249, 208, 1) 30%);
    }

    .bg_green {
        background-image: url("../img/jidou/voice_bg_sp.png");
    }
}


/* ===============================================
   button
=============================================== */
.button {
    width: clamp(0px, 25vw, 300px);
    aspect-ratio: 300 / 58;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    color: var(--color-black);
    background-color: #fff571;
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 700;
    position: relative;
}

.button_2 {
    color: #fff;
    background-color: var(--color-black);
}

.button_3 {
    color: #fff;
    background-color: var(--color-main);
}

.button:hover {
    color: #231815;
    background-color: #fff;
}

.button_2:hover {
    color: #fff;
    background-color: var(--color-main);
}

.button_3:hover {
    color: #fff;
    background-color: var(--color-black);
}

.button::before {
    content: "";
    width: 13.3%;
    aspect-ratio: 1 / 1;
    background: url("../img/jidou/link_arrow.svg") no-repeat center center / contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3%;
    margin: auto;
}

.button_2::before,
.button_3::before {
    background: url("../img/jidou/link_arrow2.svg") no-repeat center center / contain;
}

@media (max-width: 599px) {
    .button {
        width: clamp(0px, 60dvw, 600px);
        aspect-ratio: 600 / 150;
        border-radius: 150px;
        border-width: clamp(0px, 0.3dvw, 3px);
        font-size: clamp(0px, 3.5dvw, 35px);
    }

    .button::before {
        right: 5%;
    }
}


/* ===============================================
   mv
=============================================== */
#mv {
    width: 100%;
    position: relative;
    background: #3D9478;
    background: linear-gradient(123deg,rgba(61, 148, 120, 1) 33%, rgba(42, 118, 95, 1) 100%);
}

.mv_img {
    width: clamp(0px, 100vw, 1400px);
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.mv_img img {
    width: 1380px;
    max-width: 115vw;
}

@media (max-width: 599px) {
    .mv_img {
        width: 100dvw;
    }

    .mv_img img {
        width: 100%;
        max-width: 100%;
    }

    .scroll_btn {
        width: clamp(0px, 1.3dvw, 13px);
    }

    .mv_bg {
        height: clamp(0px, 20dvw, 200px);
        background-size: auto clamp(0px, 20dvw, 200px);
        animation: slideBackground 50s linear infinite;
        top: clamp(0px, 110dvw, 1100px);
    }
}


/* ===============================================
   about
=============================================== */
#about {
    width: 100%;
    padding-top: clamp(0px, 7.9vw, 95px);
    padding-bottom: clamp(0px, 14.2vw, 170px);
    position: relative;
}

.about_main {
    width: clamp(0px, 55vw, 660px);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.about_em {
    width: clamp(0px, 5.8vw, 70px);
    aspect-ratio: 70 / 420;
    border: clamp(0px, 0.4vw, 5px) solid var(--color-main);
    border-radius: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0px, 2.5vw, 30px);
    font-weight: 700;
    writing-mode: vertical-rl;
    letter-spacing: 0.15em;
    line-height: 1;
    background-color: #fff;
    position: absolute;
    top: clamp(-120px, -10vw, 0px);
    left: clamp(-160px, -13.3vw, 0px);
}

#about .sec_title {
    width: clamp(0px, 28.3vw, 340px);
    margin: 0 0 clamp(0px, 3.8vw, 45px) clamp(0px, 7.5vw, 90px);
}

.about_text {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 2em;
    letter-spacing: 0.15em;
}

.about_bg {
    width: clamp(0px, 125vw, 1500px);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

@media (max-width: 599px) {
    #about {
        padding-top: 0;
        padding-bottom: 15dvw;
    }

    .about_main {
        width: 92%;
        padding-top: 64dvw;
    }

    .about_em {
        width: 10.7dvw;
        aspect-ratio: 107 / 585;
        border-width: 0.7dvw;
        font-size: 4.1dvw;
        top: -25dvw;
        left: 0;
        right: 0;
        margin: auto;
    }

    #about .sec_title {
        width: 44dvw;
        margin: 0 auto 7dvw;
    }

    .about_text {
        font-size: 3.5dvw;
        line-height: 1.7em;
        letter-spacing: 0;
        text-align: center;
    }

    .about_bg {
        width: 100%;
    }
}


/* ===============================================
   learning
=============================================== */
#learning {
    width: 100%;
    padding: 0 0 clamp(0px, 13.3vw, 160px);
    position: relative;
}

#learning .sec_title {
    width: clamp(0px, 55.8vw, 670px);
    aspect-ratio: 670 / 105;
    margin: 0 auto clamp(0px, 5.8vw, 70px);
    font-size: clamp(0px, 2.8vw, 33px);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.7em;
    text-align: center;
    padding-left: 0.15em;
    padding-bottom: 0.7em;
    color: var(--color-main);
    background: url("../img/jidou/title_learning.svg") no-repeat center center / contain;
}

.learning_list {
    width: clamp(0px, 100vw, 1200px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0px, 5vw, 60px) clamp(0px, 3.3vw, 40px);
}

.learning_list li {
    width: clamp(0px, 46.7vw, 560px);
    aspect-ratio: 560 / 410;
    position: relative;
}

.learning_list li::after {
    content: "";
    width: clamp(0px, 45vw, 540px);
    aspect-ratio: 540 / 390;
    border: clamp(0px, 0.3vw, 3px) solid var(--color-black);
    background-color: #f0ea0c;
    position: absolute;
    bottom: 0;
    right: 0;
}

.learning_list li .box {
    width: clamp(0px, 45vw, 540px);
    aspect-ratio: 540 / 390;
    border: clamp(0px, 0.3vw, 3px) solid var(--color-black);
    background-color: #fff;
    padding-top: clamp(0px, 6.3vw, 75px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.learning_list li .box::before {
    content: "";
    width: clamp(0px, 5.4vw, 65px);
    aspect-ratio: 1 / 1;
    background: url("../img/jidou/learning_icon_pink.svg") no-repeat center center / contain;
    position: absolute;
    top: clamp(-30px, -2.5vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.learning_list li:nth-of-type(2) .box::before,
.learning_list li:nth-of-type(3) .box::before {
    background-image: url("../img/jidou/learning_icon_blue.svg");
}

.learning_list li .box_title {
    font-size: clamp(0px, 2.1vw, 25px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    color: var(--color-main);
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.3em;
}

.learning_list li .box_text {
    width: 80%;
    font-size: clamp(0px, 1.2vw, 14px);
    letter-spacing: 0.1em;
    line-height: 1.8em;
}

@media (max-width: 599px) {
    #learning {
        padding: 0 0 13dvw;
    }

    #learning .sec_title {
        width: 80dvw;
        margin: 0 auto 10dvw;
        font-size: 4dvw;
    }

    .learning_list {
        width: 92dvw;
        flex-direction: column;
        gap: 12dvw 0
    }

    .learning_list li {
        width: 100%;
        aspect-ratio: auto;
    }

    .learning_list li::after {
        width: 89dvw;
        height: 100%;
        aspect-ratio: auto;
        border-width: clamp(2px, 0.5dvw, 0px);
        bottom: -3dvw;
    }

    .learning_list li .box {
        width: 89dvw;
        min-height: 70dvw;
        aspect-ratio: auto;
        border-width: clamp(2px, 0.5dvw, 0px);
        padding-top: 11dvw;
        padding-bottom: 7dvw;
    }

    .learning_list li .box::before {
        width: 10.5dvw;
        top: -5.3dvw;
    }

    .learning_list li:nth-of-type(3) .box::before {
        background-image: url("../img/jidou/learning_icon_pink.svg");
    }

    .learning_list li:nth-of-type(4) .box::before {
        background-image: url("../img/jidou/learning_icon_blue.svg");
    }

    .learning_list li .box_title {
        font-size: 4.1dvw;
        letter-spacing: 0.05em;
    }

    .learning_list li .box_text {
        width: 90%;
        font-size: 3.5dvw;
        letter-spacing: 0;
        line-height: 1.7em;
    }
}


/* ===============================================
   classes
=============================================== */
#classes {
    width: 100%;
    min-height: clamp(0px, 135.4vw, 1625px);
    background: url("../img/jidou/classes_bg.svg") no-repeat top center;
    background-size: clamp(0px, 146.7vw, 1760px) auto;
    /* padding: clamp(0px, 8.3vw, 100px) 0 clamp(0px, 8.8vw, 105px); */
    padding: clamp(0px, 8.3vw, 100px) 0 clamp(0px, 25vw, 300px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#classes .sec_title {
    width: clamp(0px, 18.3vw, 220px);
    margin: 0 auto clamp(0px, 2.9vw, 35px);
}

.classes_main {
    width: clamp(0px, 77.5vw, 930px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 4.6vw, 55px) 0;
    margin-bottom: clamp(0px, 5.4vw, 65px);
}

.classes_cont {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.classes_cont .img_area {
    width: clamp(0px, 26.7vw, 320px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

.classes_cont .text_area {
    width: clamp(0px, 44.2vw, 530px);
    padding-top: clamp(0px, 1.25vw, 15px);
}

.classes_cont .text_area .title_box {
    width: 100%;
    aspect-ratio: 530 / 60;
    font-size: clamp(0px, 2.2vw, 26px);
    font-weight: 700;
    letter-spacing: 0.15em;
    padding-left: 0.2em;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: clamp(0px, 2.1vw, 25px);
}

.classes_cont:nth-of-type(1) .text_area .title_box { background-color: #faed00; }
.classes_cont:nth-of-type(2) .text_area .title_box { background-color: #addef8; }
.classes_cont:nth-of-type(3) .text_area .title_box { background-color: #f4b4d0; }

.classes_cont .text_area .title_box span {
    font-size: 0.8em;
    letter-spacing: 0;
    margin-top: 0.2em;
}

.classes_cont .text_area .title_box::before {
    content: "";
    width: clamp(0px, 4.2vw, 50px);
    aspect-ratio: 1 / 1;
    background: url("../img/jidou/classes_icon.svg") no-repeat center center / contain;
    position: absolute;
    top: clamp(-30px, -2.5vw, 0px);
    left: clamp(-18px, -1.5vw, 0px);
}

.classes_cont .text_area .text {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.6em;
    letter-spacing: 0.1em;
}

.classes_cont .text_area .text > .em {
    font-size: 1.44em;
    font-weight: 500;
    line-height: 1.5em;
    display: block;
    margin-bottom: 0.8em;
}

@media (max-width: 599px) {
    #classes {
        min-height: 459dvw;
        background: url("../img/jidou/classes_bg_sp.svg") no-repeat top center / 100% auto;
        /* padding: 25dvw 0 clamp(0px, 8.8vw, 105px); */
        padding: 25dvw 0 clamp(0px, 26.5vw, 265px);
    }

    #classes .sec_title {
        width: 32dvw;
        margin: 0 auto 11dvw;
    }

    .classes_main {
        width: 80dvw;
        /* gap: 11dvw 0; */
        gap: 15dvw 0;
        /* margin-bottom: 6.5dvw; */
        margin-bottom: 48dvw;
    }

    .classes_cont {
        flex-direction: column-reverse;
        align-items: center;
    }

    .classes_cont .img_area {
        width: 47.7dvw;
    }

    .classes_cont .text_area {
        width: 100%;
        padding-top: 3dvw;
    }

    .classes_cont .text_area .title_box {
        aspect-ratio: 790 / 92;
        font-size: 4dvw;
        margin-bottom: 4.3dvw;
        padding-left: 0.5em;
    }

    .classes_cont .text_area .title_box::before {
        width: 7.1dvw;
        top: -4dvw;
        left: -1.8dvw;
    }

    .classes_cont .text_area .text {
        font-size: 3.5dvw;
        line-height: 1.7em;
        letter-spacing: 0;
    }

    .classes_cont .text_area .text > .em {
        font-size: 1.15em;
    }
}

/* ===============================================
   career
=============================================== */
#career {
    width: 100%;
    padding: clamp(0px, 9.6vw, 115px) 0 clamp(0px, 15.8vw, 190px);
    margin: 0 auto;
    background-image: url("../img/jidou/career_bg.svg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: clamp(0px, 138.3vw, 1660px) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#career .sec_title {
    width: clamp(0px, 40vw, 480px);
    margin-bottom: clamp(0px, 10.4vw, 125px);
}

.career_main {
    width: clamp(0px, 80vw, 960px);
    margin-bottom: clamp(0px, 13.3vw, 160px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 14.2vw, 170px) 0;
}

.career_cont {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.career_cont .img_area {
    width: clamp(0px, 34.2vw, 410px);
}

.career_cont .text_area {
    width: clamp(0px, 37.9vw, 455px);
    padding-top: clamp(0px, 4.2vw, 50px);
    margin-left: clamp(0px, 3.3vw, 40px)
}

.career_cont .text_area .text_1 {
    width: 100%;
    font-size: clamp(0px, 1.7vw, 20px);
    letter-spacing: 0.15em;
    font-weight: 500;
    line-height: 1.7em;
    margin-bottom: 0.6em;
}

.career_cont .text_area .text_2 {
    width: 100%;
    font-size: clamp(0px, 2.1vw, 25px);
    letter-spacing: 0.15em;
    font-weight: 500;
    line-height: 1;
    padding-bottom: clamp(0px, 3.6vw, 43px);
    margin-bottom: clamp(0px, 2.3vw, 28px);
    background: url("../img/jidou/career_line.svg") no-repeat bottom left / contain;
}

.career_cont .text_area .text_3 {
    width: 100%;
    font-size: clamp(0px, 1.33vw, 16px);
    letter-spacing: 0.1em;
    line-height: 1.6em;
}

@media (max-width: 599px) {
    #career {
        padding: 16dvw 0 13.5dvw;
        background-image: url("../img/jidou/career_bg_sp.svg");
        background-size: 100% auto;
    }

    #career .sec_title {
        width: 56dvw;
        margin-bottom: 25.5dvw;
    }

    .career_main {
        width: 85dvw;
        margin-bottom: 30dvw;
        gap: 33dvw 0;
    }

    .career_cont {
        width: 100%;
        position: relative;
    }

    .career_cont .img_area {
        width: 34.5dvw;
        position: absolute;
        top: 0;
        right: 0;
    }

    .career_cont .text_area {
        width: 100%;
        padding-top: 20dvw;
        margin-left: 0;
    }

    .career_cont .text_area .text_1 {
        width: 47dvw;
        font-size: 3.5dvw;
        letter-spacing: 0.04em;
        line-height: 1.4em;
        margin-bottom: 0.8em;
    }

    .career_cont .text_area .text_2 {
        width: 47dvw;
        font-size: 4dvw;
        letter-spacing: 0;
        padding-bottom: 3dvw;
        margin-bottom: 4dvw;
    }

    .career_cont .text_area .text_3 {
        width: 100%;
        font-size: 3.5dvw;
        letter-spacing: 0;
    }
}


/* ===============================================
   license
=============================================== */
#license {
    width: 100%;
    padding: clamp(0px, 5.8vw, 70px) 0 clamp(0px, 5.4vw, 65px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: url("../img/jidou/license_bg_middle.png") no-repeat center center / cover;
    z-index: 2;
}

#license::before {
    content: "";
    width: 100%;
    height: clamp(0px, 9.6vw, 115px);
    background: url("../img/jidou/license_bg_head.png") no-repeat center bottom / cover;
    position: absolute;
    top: clamp(-110px, -9.2vw, 0px);
    left: 0;
}

#license::after {
    content: "";
    width: 100%;
    height: clamp(0px, 10.8vw, 130px);
    background: url("../img/jidou/license_bg_foot.png") no-repeat center bottom / cover;
    position: absolute;
    bottom: clamp(-125px, -10.4vw, 0px);
    left: 0;
}

#license .sec_title {
    width: clamp(0px, 44.2vw, 530px);
    font-size: clamp(0px, 2.5vw, 30px);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.6em;
    text-align: center;
    background: url("../img/jidou/title_license_bg.svg") no-repeat center center / contain;
    padding-left: 0.15em;
    margin-bottom: clamp(0px, 5.4vw, 65px);
}

.license_text {
    font-size: clamp(0px, 1.5vw, 18px);
    line-height: 2.5em;
    letter-spacing: 0.15em;
    text-align: center;
    margin-bottom: clamp(0px, 5vw, 60px);
}

#license .list_box {
    width: clamp(0px, 75vw, 900px);
    aspect-ratio: 900 / 215;
    background-color: #fff;
    border: clamp(0px, 0.7vw, 8px) solid var(--color-main);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 clamp(0px, 4.2vw, 50px);
    margin-bottom: clamp(0px, 7.5vw, 90px);
}

.license_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(0px, 1.7vw, 20px);
}

.license_list li {
    font-size: clamp(0px, 1.5vw, 18px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 2.7em;
    padding-left: 1.2em;
    position: relative;
}

.license_list li::before {
    content: "";
    width: clamp(0px, 1.33vw, 16px);
    height: clamp(0px, 1.33vw, 16px);
    background-color: var(--color-main);
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

@media (max-width: 599px) {
    #license {
        min-height: 195dvw;
        padding: 25dvw 0 23.5dvw;
        background: url("../img/jidou/license_bg_sp.png") no-repeat top center / cover;
    }

    #license::before,
    #license::after {
        display: none;
    }

    #license .sec_title {
        width: 75dvw;
        font-size: 4.3dvw;
        margin-bottom: 6dvw;
    }

    .license_text {
        width: 90dvw;
        font-size: 3.5dvw;
        line-height: 1.6em;
        letter-spacing: 0.05em;
        margin-bottom: 8dvw;
    }

    #license .list_box {
        width: 71dvw;
        aspect-ratio: 710 / 600;
        border-width: clamp(3px, 0.8vw, 0px);
        padding: 0 5.5dvw;
        margin-bottom: 12dvw;
    }

    .license_list {
        flex-direction: column;
        gap: 2dvw;
    }

    .license_list li {
        font-size: 3.5dvw;
        line-height: 1.7em;
        letter-spacing: 0;
    }

    .license_list li::before {
        width: 3.2dvw;
        height: 3.2dvw;
        top: 0.4em;
        bottom: inherit;
    }
}


/* ===============================================
   support
=============================================== */
#support {
    width: 100%;
    padding: clamp(0px, 25vw, 300px) 0 clamp(0px, 15.4vw, 185px);
    position: relative;
    z-index: 1;
}

#support .bg_area {
    width: 51%;
    height: 100%;
    background: url("../img/jidou/support_bg.jpg") no-repeat center left / cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

#support .support_main {
    width: clamp(0px, 93.3vw, 1120px);
    margin: 0 auto;
    padding-left: clamp(0px, 4.2vw, 50px);
    position: relative;
    z-index: 1;
}

#support .sec_title {
    font-size: clamp(0px, 3.3vw, 40px);
    letter-spacing: 0.15em;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 1em;
    margin-bottom: clamp(0px, 10.8vw, 130px);
    position: relative;
    display: inline-block;
    background: url("../img/jidou/title_support_line.svg") no-repeat center bottom / 100%;
}

.support_list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0px, 5vw, 60px) 0;
    margin-bottom: clamp(0px, 10vw, 120px);
}

.support_list li {
    position: relative;
}

.support_list .nb {
    width: clamp(0px, 8.8vw, 105px);
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border: clamp(0px, 0.8vw, 9px) solid var(--color-main);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0px, 5vw, 60px);
    font-weight: 700;
    line-height: 1;
    padding-bottom: 0.1em;
    position: absolute;
    bottom: 5px;
    left: clamp(-50px, -4.2vw, 0px);
}

.support_list .box {
    width: auto;
    height: clamp(0px, 6.7vw, 80px);
    font-size: clamp(0px, 2.3vw, 28px);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #fff;
    background-color: var(--color-main);
    border: 5px solid #fff;
    border-radius: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.6em 0 2.8em;
}

@media (max-width: 599px) {
    #support {
        padding: 12dvw 0 11dvw;
    }

/*    #support::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, white 0%, transparent 20%);
        z-index: 1;
    }*/

    #support .bg_area {
        width: 100%;
        height: 100%;
        background: url("../img/jidou/support_bg_sp.jpg") no-repeat bottom center / 100% auto;
        z-index: 0;
    }

    #support .support_main {
        width: 74dvw;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #support .sec_title {
        font-size: 4.7dvw;
        margin: 0 auto 19dvw;
    }

    .support_list {
        width: 100%;
        gap: 16dvw 0;
        margin-bottom: 10dvw;
    }

    .support_list li {
        width: 100%;
        position: relative;
    }

    .support_list .nb {
        width: 13.8dvw;
        border-width: clamp(4px, 1.1dvw, 0px);
        font-size: 10dvw;
        top: -9dvw;
        bottom: auto;
        left: 0;
        right: 0;
        margin: auto;
    }

    .support_list .box {
        width: 100%;
        height: 32dvw;
        font-size: 4.1dvw;
        text-align: center;
        border-width: clamp(2px, 0.5dvw, 0px);
        border-radius: 3.5dvw;
        padding: 0;
    }
}


/* ===============================================
   voice
=============================================== */
#voice {
    width: 100%;
    padding: clamp(0px, 15vw, 180px) 0 clamp(0px, 9.6vw, 115px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

#voice .sec_title {
    width: clamp(0px, 38.3vw, 460px);
    margin-bottom: clamp(0px, 5vw, 60px);
}

@media (max-width: 599px) {
    #voice {
        padding: 14dvw 0 10.5dvw;
    }

    #voice .sec_title {
        width: 48.5dvw;
        margin-bottom: 9dvw;
    }
}

.voice_qa {
    width: clamp(0px, 80.8vw, 970px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 5.4vw, 65px) 0;
}

.qa {
    width: 100%;
    background-color: #fff;
    border-radius: clamp(0px, 2.5vw, 30px);
}

.qa .area_q,
.qa .area_a {
    position: relative;
}

.qa .area_q {
    padding: clamp(0px, 2.5vw, 30px);
    display: flex;
    align-items: center;
}

.qa .icon {
    width: clamp(0px, 7.5vw, 90px);
    aspect-ratio: 90 / 95;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: clamp(0px, 4.6vw, 55px);
    font-weight: 700;
    color: #fff;
    padding-bottom: 0.1em;
    margin-right: clamp(0px, 7.9vw, 95px);
    border-radius: clamp(0px, 1.3vw, 15px);
    position: relative;
}

.qa .area_q .icon {
    background-color: #5eb7e8;
}

.qa .area_a .icon {
    background-color: #ec7aac;
}

.qa .area_a .name {
    width: clamp(0px, 7.5vw, 90px);
    font-size: clamp(0px, 1.4vw, 17px);
    font-weight: 700;
    text-align: center;
    margin-top: 0.3em;
    color: var(--color-black);
}

.qa .text {
    width: 72%;
}

.qa .area_q .text p {
    font-size: clamp(0px, 2.1vw, 25px);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.qa .area_q + .area_a {
    padding-top: clamp(0px, 0.4vw, 5px);
    padding-bottom: clamp(0px, 3.8vw, 45px);
}

.qa .area_q + .area_a::after {
    content: "";
    width: 93%;
    height: clamp(0px, 0.3vw, 3px);
    border-radius: 3px;
    background-color: var(--color-main);
    position: absolute;
    top: clamp(0px, 0.3vw, 3px);
    left: 0;
    right: 0;
    margin: auto;
}

.qa .area_a .block_a {
    padding: clamp(0px, 2.9vw, 35px) clamp(0px, 2.5vw, 30px) 0;
    display: flex;
    align-items: flex-start;
}

.qa .area_a .text p {
    font-size: clamp(0px, 1.4vw, 17px);
    line-height: 1.7em;
    letter-spacing: 0.15em;
    text-align: justify;
}

@media (max-width: 599px) {
    .voice_qa {
        width: 84dvw;
        align-items: flex-end;
        gap: clamp(0px, 12dvw, 120px) 0;
    }

    .qa {
        width: 100%;
    }

    .qa .area_q {
        padding: 3dvw 3.2dvw;
        align-items: flex-start;
    }

    .qa .icon {
        width: clamp(0px, 9dvw, 90px);
        font-size: clamp(0px, 5.5dvw, 55px);
        margin-right: 2.5dvw;
        margin-top: 0.8dvw;
    }

    .qa .area_a .name {
        width: 9dvw;
        font-size: 3dvw;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .qa .text {
        width: 64dvw;
    }

    .qa .area_q .text p {
        font-size: clamp(0px, 3.8dvw, 38px);
        letter-spacing: 0;
        line-height: 1.6em;
    }

    .qa .area_q + .area_a {
        padding: 3dvw 3.2dvw 4dvw;
    }

    .qa .area_q + .area_a::after {
        top: clamp(0px, 2.1dvw, 21px);
    }

    .qa .area_a .block_a {
        padding: 3dvw 0 0;
    }

    .qa .area_a .block_a + .block_a {
        margin-top: 5dvw;
    }

    .qa .area_a .text p {
        font-size: clamp(0px, 3.5dvw, 35px);
        letter-spacing: 0;
    }
}


/*----------------------------
accordion
----------------------------*/
.acc_button {
    cursor: pointer;
    position: relative;
}

.acc_cont {
    display: none;
}

.acc_icon {
    position: absolute;
    width: clamp(0px, 5.8vw, 70px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    border: clamp(0px, 0.4vw, 5px) solid var(--color-main);
    top: clamp(-35px, -2.9vw, 0px);
    right: clamp(0px, 3.8vw, 45px);
}

.acc_icon::before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: clamp(0px, 3.3vw, 40px);
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-main);
    transform: rotate(90deg);
    transition: all .3s ease-in-out;
}

.acc_icon::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: clamp(0px, 3.3vw, 40px);
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-main);
    transition: all .3s ease-in-out;
}

.acc_button.open .acc_icon::before {
    transform: rotate(180deg);
}

.acc_button.open .acc_icon::after {
    opacity:0;
}

@media (max-width: 599px) {
    .acc_icon {
        width: 9.6dvw;
        border-width: clamp(2px, 0.7vw, 0px);
        top: -7dvw;
        right: 5dvw;
    }

    .acc_icon::before{
        width: 5dvw;
        height: clamp(2px, 0.7vw, 0px);
    }

    .acc_icon::after {
        width: 5dvw;
        height: clamp(2px, 0.7vw, 0px);
    }
}


/* ===============================================
   link
=============================================== */
#link {
    /* padding-bottom: clamp(0px, 9.2vw, 110px); */
    padding: clamp(0px, 9.2vw, 110px) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#link p {
    font-size: clamp(0px, 2.9vw, 35px);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #fff;
    margin-right: 1em;
}

@media (max-width: 599px) {
    #link {
        padding-bottom: clamp(0px, 12dvw, 120px);
        padding: clamp(0px, 12dvw, 120px) 0;
        flex-direction: column;
        align-items: center;
    }

    #link p {
        font-size: clamp(0px, 4dvw, 40px);
        margin-right: 0;
        margin-bottom: 0.8em;
    }
}