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

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

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

:root {
    --color-main: #e890ba;
    
    --font-maru: "Zen Maru Gothic", sans-serif;
}

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


/* ===============================================
   header
=============================================== */
.nav {
    background: #AED2F0;
    background: linear-gradient(45deg,rgba(174, 210, 240, 1) 0%, rgba(240, 238, 247, 1) 51%, rgba(236, 194, 218, 1) 100%);
}

.nav_actions {
    border: 1px solid #fff;
    background-color: #fff;
}

.nav_actions a {
    color: #fff;
    background: #46B2E7;
    background: linear-gradient(45deg,rgba(70, 178, 231, 1) 0%, rgba(232, 144, 186, 1) 100%);
}

.nav_actions a::before {
    background-color: #46b2e7;
}

.nav_actions a span::before {
    background-color: #fff;
}

.nav_sns a {
    background-color: #46b2e7;
}


/* ===============================================
   footer
=============================================== */
#footer {
    background-color: #fff;
    z-index: 2;
}

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

.footer_bg::before {
    content: "";
    width: 100%;
    height: clamp(0px, 29.2vw, 350px);
    background: url("../img/youzi/footer_bg.png") repeat-x bottom center;
    background-size: clamp(0px, 113.83vw, 1366px) auto;
    position: absolute;
    left: 0;
    bottom: clamp(-50px, -4.2vw, 0px);
    z-index: -1;
    pointer-events: none;
}

.footer_bg::after {
    content: "";
    width: clamp(0px, 100vw, 1366px);
    height: clamp(0px, 44.2vw, 530px);
    background: url("../img/youzi/footer_deco.png") repeat-x bottom center;
    background-size: clamp(0px, 113.83vw, 1366px) auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(-50px, -4.2vw, 0px);
    margin: auto;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 599px) {
    .footer_bg::before {
        height: 45dvw;
        background: url("../img/youzi/footer_bg_sp.png") no-repeat bottom center;
        background-size: 100% auto;
        bottom: -3dvw;
    }

    .footer_bg::after {
        display: none;
    }
}


/* ===============================================
   Instagram
=============================================== */
#insta {
    width: 100%;
    height: clamp(0px, 18.3vw, 220px);
    background-color: #fff;
    border-bottom: 1px solid var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 clamp(0px, 2.5vw, 30px);
}

#insta a {
    display: flex;
    align-items: center;
    gap: 0 clamp(0px, 2.5vw, 30px);
}

#insta .text_1 {
    font-size: clamp(0px, 2.3vw, 28px);
    letter-spacing: 0.15em;
    font-weight: var(--font-w-b);
    white-space: nowrap;
}

#insta a img {
    width: clamp(0px, 5.8vw, 70px);
}

#insta .text_2 {
    font-size: clamp(0px, 1.7vw, 20px);
    line-height: 1.6em;
    font-weight: var(--font-w-m);
    white-space: nowrap;
}

@media (max-width: 599px) {
    #insta {
        height: clamp(0px, 22vw, 220px);
        gap: 0 clamp(0px, 4dvw, 40px);
    }

    #insta a {
        gap: 0 clamp(0px, 4dvw, 40px);
    }

    #insta .text_1 {
        font-size: clamp(0px, 3.4dvw, 34px);
    }

    #insta a img {
        width: clamp(0px, 7dvw, 70px);
    }

    #insta .text_2 {
        font-size: clamp(0px, 2.5dvw, 25px);
    }
}


/* ===============================================
   bg
=============================================== */
.bg_main {
    width: 100%;
    height: 100%;
    position: relative;
}

.bg_main::before {
    content: "";
    width: clamp(0px, 30vw, 360px);
    height: 100%;
    background: url("../img/youzi/bg.jpg") repeat top center;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.bg_texture {
    background-image: url("../img/youzi/texture.png");
    background-repeat: repeat;
    background-position: top center;
    background-size: clamp(0px, 113.83vw, 1366px) auto;
}

@media (max-width: 599px) {
    .bg_main::before {
        width: 30dvw;
        background-image: url("../img/youzi/bg_sp.jpg");
    }

    .bg_texture {
        background-image: url("../img/youzi/texture_sp.png");
        background-size: 100% auto;
    }
}


/* ===============================================
   button
=============================================== */
.button {
    width: clamp(0px, 41.7vw, 500px);
    aspect-ratio: 500 / 80;
    border-radius: 80px;
    border: 2px solid var(--color-main);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-main);
    background-color: #fff;
    font-size: clamp(0px, 1.5vw, 18px);
    letter-spacing: 0.05em;
    font-weight: 500;
    position: relative;
}

.button::before {
    content: "";
    width: clamp(0px, 1.1vw, 13px);
    height: clamp(0px, 1.1vw, 13px);
    border-radius: 50%;
    background-color: var(--color-main);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6.4%;
    margin: auto;
}

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

.button_2 {
    width: clamp(0px, 52.1vw, 625px);
    aspect-ratio: 625 / 100;
}

@media (max-width: 599px) {
    .button {
        width: 84dvw;
        aspect-ratio: 840 / 160;
        border-radius: 160px;
        font-size: 3.5dvw;
    }

    .button::before {
        width: 2.1dvw;
        height: 2.1dvw;
        right: 4.8%;
    }
    
    .button_2 {
        width: 84dvw;
        aspect-ratio: 840 / 200;
        border-radius: 200px;
        font-size: 3.5dvw;
        line-height: 1.4em;
        text-align: center;
    }
}


/* ===============================================
   title
=============================================== */
.sec_title_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sec_title_en {
    width: clamp(0px, 18.8vw, 225px);
    margin-bottom: clamp(0px, 3.8vw, 45px);
}

.sec_title {
    font-size: clamp(0px, 2.9vw, 35px);
    font-family: var(--font-maru);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.15em;
    padding-left: 0.15em;
    margin-bottom: clamp(0px, 3.3vw, 40px);
}

.cont_title {
    font-size: clamp(0px, 2.9vw, 35px);
    font-family: var(--font-maru);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4em;
    padding-left: 0.15em;
    text-align: center;
    margin-bottom: clamp(0px, 3.3vw, 40px);
}

@media (max-width: 599px) {
    .sec_title_en {
        width: 34dvw;
        margin-bottom: 4.8dvw;
    }

    .sec_title {
        font-size: 6dvw;
        margin-bottom: 7dvw;
        text-align: center;
        line-height: 1.5em;
    }

    .cont_title {
        font-size: 6dvw;
        line-height: 1.5em;
        margin-bottom: 8dvw;
    }
}


/* ===============================================
   mv
=============================================== */
#mv {
    width: 100%;
    height: clamp(0px, 66.7vw, 800px);
    position: relative;
    background: url("../img/youzi/mv_img.png") no-repeat top center / cover;
    margin-bottom: clamp(0px, 7.5vw, 90px);
}

.mv_title {
    width: clamp(0px, 100vw, 1366px);
    height: clamp(0px, 72.5vw, 870px);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.mv_title img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scroll_btn {
    width: clamp(0px, 1.3vw, 15px);
    position: absolute;
    bottom: clamp(-135px, -11.3vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
    z-index: 5;
}

@media (min-width: 1921px) {
    #mv {
        height: 41.67vw;
    }
    
    .mv_title {
        width: 71.15vw;
        height: 45.31vw;
    }
}

@media (max-width: 1366px) {
    #mv {
        background-size: auto clamp(0px, 66.7vw, 800px);
    }
}

@media (max-width: 599px) {
    #mv {
        height: auto;
        background: none
    }

    .mv_title {
        width: 100%;
        height: auto;
    }
    
    .mv_title img {
        height: auto;
        object-fit: inherit;
    }
    
    .scroll_btn {
        display: none;
    }
}


/* ===============================================
   about
=============================================== */
#about {
    width: 100%;
    padding-bottom: clamp(0px, 20vw, 240px);
    text-align: center;
    background: url("../img/youzi/learning_bg.png") no-repeat bottom center;
    background-size: clamp(0px, 100vw, 1200px) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3;
}

.about_main {
    width: 100%;
    height: clamp(0px, 53.3vw, 640px);
    margin-bottom: clamp(0px, 16.7vw, 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.about_img {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    overflow: hidden;
    pointer-events: none;
}

.about_img img {
    width: clamp(0px, 118.3vw, 1420px);
    max-width: clamp(0px, 118.3vw, 1420px);
}

.about_main .about_text {
    font-size: clamp(0px, 1.4vw, 17px);
    line-height: 2.5em;
    letter-spacing: 0.15em;
}

.about_bg {
    width: clamp(0px, 53.3vw, 640px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}

@media (max-width: 599px) {
    #about {
        padding-top: 50.5dvw;
        padding-bottom: 20dvw;
        background-image: url("../img/youzi/learning_bg_sp.png");
        background-size: 100% auto;
    }

    .about_main {
        height: 131.5dvw;
        margin-bottom: 19dvw;
    }

    .about_img {
        top: -50.5dvw;
    }

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

    .about_main .about_text {
        font-size: 3.8dvw;
        line-height: 2.1em;
    }

    .about_bg {
        width: 100%;
    }
}


/* ===============================================
   learning
=============================================== */
#learning {
    position: relative;
    z-index: 4;
}

.learning_main {
    width: clamp(0px, 91.7vw, 1100px);
    height: clamp(0px, 49.2vw, 590px);
    position: relative;
}

.item_wrap {
    display: inline-block;
    position: absolute;
    cursor: pointer;
}

.item_wrap:nth-of-type(1) { top: 0; left: 0; }
.item_wrap:nth-of-type(2) { top: 0; left: 47%; }
.item_wrap:nth-of-type(3) { bottom: 0; right: 0; }
.item_wrap:nth-of-type(4) { bottom: 0; right: 47%; }

.learning_item {
    width: clamp(0px, 27.5vw, 330px);
    aspect-ratio: 1 / 1;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    transform: rotateY(0deg);
}

.item_wrap:hover .learning_item,
.item_wrap:active .learning_item {
    transform: rotateY(180deg);
}

.item_wrap {
  cursor: pointer;
  perspective: 2000px;
}

.learning_item {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.learning_item.back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(-180deg);
}

.item_wrap.isFlipped .learning_item.front {
  transform: rotateY(180deg);
}

.item_wrap.isFlipped .learning_item.back {
  transform: rotateY(0deg);
}

.learning_item > div {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

.item_wrap:nth-of-type(1) .learning_item > div { background-color: #a1cd5d; }
.item_wrap:nth-of-type(2) .learning_item > div { background-color: #ffc237; }
.item_wrap:nth-of-type(3) .learning_item > div { background-color: #85ccc9; }
.item_wrap:nth-of-type(4) .learning_item > div { background-color: #c490bf; }

.front {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transform: rotateY(0deg);
}
    
.front .learning_img {
    width: clamp(0px, 24.2vw, 290px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.back {
    transform: rotateY(180deg);
}

.back .text_box {
    width: 61%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.item_wrap:nth-of-type(n+3) .back .text_box {
    width: 64%;
}

.back .text_box .text_1 {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.9em;
    text-align: left;
}

.back .text_box .text_2 {
    font-size: clamp(0px, 1.3vw, 15px);
    line-height: 1.6em;
    text-align: center;
    margin: 0.3em 0 0.2em;
}

.back .text_box .text_3 {
    font-size: clamp(0px, 1.3vw, 15px);
    line-height: 1.6em;
    text-align: left;
}

.back .sub {
    width: clamp(0px, 28.8vw, 345px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #f2e2ee;
    border: 1px solid #c490bf;
    position: absolute;
    bottom: clamp(-260px, -21.7vw, 0px);
    left: clamp(-190px, -15.8vw, 0px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.back .sub .text {
    width: 67%;
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.6em;
    text-align: left;
    color: #be84b8;
    margin-bottom: 2em;
}

.back .sub .text_em {
    font-size: clamp(0px, 1.7vw, 20px);
    letter-spacing: 0.05em;
    font-weight: bold;
    text-align: center;
    margin: 0.3em;
    color: #be84b8;
}

@media (max-width: 599px) {
    .learning_main {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5dvw;
    }

    .item_wrap {
        position: relative;
    }

    .item_wrap:nth-of-type(2) { top: 0; left: 0; }
    .item_wrap:nth-of-type(4) { bottom: 0; right: 0; }

    .learning_item {
        width: 70dvw;
    }

    .front .learning_img {
        width: 61.5dvw;
    }

    .back .text_box {
        width: 60%;
    }
    
    .item_wrap:nth-of-type(n+3) .back .text_box {
        width: 64%;
    }

    .back .text_box .text_1 {
        font-size: 3.5dvw;
        line-height: 1.7em;
    }

    .back .text_box .text_2 {
        font-size: 3.5dvw;
    }

    .back .text_box .text_3 {
        font-size: 3.5dvw;
        line-height: 1.7em;
    }

    .back .sub {
        width: 70dvw;
        bottom: -53dvw;
        left: 0;
    }

    .back .sub .text {
        width: 75%;
        font-size: 3.4dvw;
    }

    .back .sub .text_em {
        font-size: 4dvw;
    }
}


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

.curriculum_main {
    width: clamp(0px, 100vw, 1200px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 4.2vw, 50px) 0;
    margin-bottom: clamp(0px, 8.3vw, 100px);
}

.curriculum_box {
    width: 100%;
}

.curriculum_box .box_head {
    position: relative;
    line-height: 0;
}

.curriculum_box .box_head .box_title {
    font-size: clamp(0px, 2.5vw, 30px);
    font-family: var(--font-maru);
    line-height: 1.5em;
    letter-spacing: 0.15em;
    padding-left: 0.15em;
    font-weight: bold;
    text-align: center;
    color: #fff;
    position: absolute;
    top: clamp(0px, 6.7vw, 80px);
    left: 0;
    right: 0;
    margin: auto;
}

.curriculum_box .box_main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 3.3vw, 40px);
    background: url("../img/youzi/curriculum_red_bg.png") repeat-y top center / 100% auto;
}

.curriculum_box:nth-of-type(2) .box_main {
    background-image: url("../img/youzi/curriculum_orange_bg.png");
}

.curriculum_box .box_main .img_area {
    width: clamp(0px, 40.8vw, 490px);
    padding: clamp(0px, 0.8vw, 10px);
    background-color: #fff;
}

.curriculum_box .box_main .text_area {
    width: clamp(0px, 36.7vw, 440px);
}

.curriculum_box .box_main .text_area p.text_em {
    font-size: clamp(0px, 1.7vw, 20px);
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: var(--font-w-b);
    white-space: nowrap;
    margin-bottom: 0.5em;
}

.curriculum_box .box_main .text_area p {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 2.1em;
    letter-spacing: 0.05em;
    color: #fff;
}
.curriculum_box .box_foot {
    line-height: 0;
}

@media (max-width: 599px) {
    .curriculum_main {
        width: 100%;
        gap: 6dvw 0;
        margin-bottom: 10dvw;
    }

    .curriculum_box .box_head .box_title {
        font-size: 4.5dvw;
        top: 9dvw;
    }

    .curriculum_box .box_main {
        flex-direction: column;
        gap: 4dvw;
        background-image: url("../img/youzi/curriculum_red_bg_sp.png");
    }

    .curriculum_box:nth-of-type(2) .box_main {
        background-image: url("../img/youzi/curriculum_orange_bg_sp.png");
    }

    .curriculum_box .box_main .img_area {
        width: 80dvw;
        padding: 1.6dvw;
    }

    .curriculum_box .box_main .text_area {
        width: 80dvw;
    }
    
    .curriculum_box .box_main .text_area p.text_em {
        font-size: 4dvw;
    }

    .curriculum_box .box_main .text_area p {
        font-size: 3.5dvw;
        line-height: 1.7em;
        letter-spacing: 0;
    }
}


/* ===============================================
   career
=============================================== */
#career {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto;
    padding: clamp(0px, 16.7vw, 200px) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

#career .sec_title {
    margin-bottom: clamp(0px, 6.3vw, 75px);
}

.career_bg {
    width: clamp(0px, 100vw, 1200px);
    position: absolute;
    top: clamp(-10px, -0.8vw, 0px);
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
}

.career_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(0px, 7.5vw, 90px);
}

.career_list li {
    width: clamp(0px, 26.7vw, 320px);
    margin: 0 clamp(0px, 0.4vw, 5px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.career_list .img_area {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: clamp(0px, 2.5vw, 30px);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.career_list .img_area::after {
    content: "";
    width: 100%;
    height: 100%;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.career_list li:nth-of-type(1) .img_area::after {
    background-image: url("../img/youzi/career_frame_01.png");
}
.career_list li:nth-of-type(2) .img_area::after {
    width: clamp(0px, 29.2vw, 350px);
    background-image: url("../img/youzi/career_frame_02.png");
}
.career_list li:nth-of-type(3) .img_area::after {
    background-image: url("../img/youzi/career_frame_03.png");
}

.career_list .img_area .img_frame {
    width: clamp(0px, 25vw, 300px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.career_list .text_1 {
    font-size: clamp(0px, 2.1vw, 25px);
    font-weight: bold;
    line-height: 1.6em;
    letter-spacing: 0.05em;
    padding-left: 0.05em;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.7em;
}

.career_list li:nth-of-type(odd) .text_1 { color: #e098c1; }
.career_list li:nth-of-type(even) .text_1 { color: #fff; }

.career_list .text_2 {
    font-size: clamp(0px, 1.9vw, 23px);
    line-height: 1;
    letter-spacing: 0.05em;
    padding-left: 0.05em;
    text-align: center;
    margin-bottom: 1.1em;
}

.career_list .text_2 span {
    font-size: 0.7em;
}

.career_list .text_3 {
    width: 100%;
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1;
    letter-spacing: 0.05em;
    padding-left: 0.05em;
    text-align: right;
    margin-bottom: 0.8em;
}

.career_list .text_4 {
    width: 100%;
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 2em;
    letter-spacing: 0.05em;
    padding-left: 0.05em;
}

@media (max-width: 599px) {
    #career {
        width: 100%;
        padding: 20dvw 0 0;
    }

    #career .sec_title {
        margin-bottom: 9dvw;
    }

    .career_bg {
        width: 100%;
        top: 0;
        left: 0;
        transform: translateX(0);
    }

    .career_list {
        flex-direction: column;
        align-items: center;
        gap: 9dvw;
        margin-bottom: 9dvw;
    }

    .career_list li {
        width: 84dvw;
        margin: 0;
        position: relative;
    }

    .career_list .img_area {
        width: 50dvw;
        aspect-ratio: 500 / 730;
        border-radius: 4.5dvw;
        align-items: flex-start;
        padding-top: 4.5dvw;
    }

    .career_list li:nth-of-type(1) .img_area::after {
        background-image: url("../img/youzi/career_frame_01_sp.png");
    }
    .career_list li:nth-of-type(2) .img_area::after {
        width: 55dvw;
        background-image: url("../img/youzi/career_frame_02_sp.png");
    }
    .career_list li:nth-of-type(3) .img_area::after {
        background-image: url("../img/youzi/career_frame_03_sp.png");
    }

    .career_list .img_area .img_frame {
        width: 47dvw;
    }

    .career_list .text_1 {
        font-size: 5dvw;
        margin-top: 0;
        margin-bottom: 0;
        position: absolute;
        top: 54dvw;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .career_list li:nth-of-type(even) .text_1 { color: #e098c1; }

    .career_list .text_2 {
        font-size: 4.6dvw;
        margin-top: 1em;
        margin-bottom: 0.8em;
    }

    .career_list .text_3 {
        font-size: 3.2dvw;
    }

    .career_list .text_4 {
        font-size: 3.5dvw;
        line-height: 1.7em;
    }
}


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

.support_img {
    width: clamp(0px, 130vw, 1560px);
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    pointer-events: none;
}

.support_img img {
    width: 100%;
}

.support_main {
    width: 100%;
    height: clamp(0px, 56.3vw, 675px);
    background: url("../img/youzi/support_main_bg.png") no-repeat center center / contain;
    margin-bottom: clamp(0px, 4.2vw, 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.support_main .point_list {
    width: 100%;
    height: clamp(0px, 32.5vw, 390px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.support_main .point_list li {
    font-size: clamp(0px, 2.1vw, 25px);
    font-weight: bold;
    font-family: var(--font-maru);
    line-height: 1;
    letter-spacing: 0.15em;
    padding-left: 0.15em;
    text-align: center;
}

@media (max-width: 599px) {
    #support {
        padding: 20dvw 0;
    }
    
    #support .sec_title_en {
        margin-bottom: 2dvw;
    }
    
    #support .sec_title {
        margin-bottom: 18dvw;
    }

    .support_img {
        width: 100%;
        left: 0;
        transform: translateX(0);
    }

    .support_main {
        height: 137dvw;
        background: url("../img/youzi/support_main_bg_sp.png") no-repeat center center / 100% auto;
        margin-bottom: 16.5dvw;
    }

    .support_main .point_list {
        height: 92dvw;
    }

    .support_main .point_list li {
        font-size: 5dvw;
        line-height: 1.8em;
    }
    
    .support_main .point_list li:first-of-type {
        margin: 1em 0 0;
    }
}


/* ===============================================
   voice
=============================================== */
#voice {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 8.3vw, 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

#voice .sec_title_wrap {
    width: 100%;
    height: clamp(0px, 23.3vw, 280px);
    background: url("../img/youzi/voice_bg_top.png") no-repeat bottom center / 100% auto;
}

#voice .sec_title_wrap .sec_title_en {
    text-align: center;
    padding-top: clamp(0px, 5vw, 60px);
    margin-bottom: clamp(0px, 1.4vw, 17px);
}

#voice .sec_title_wrap .sec_title {
    font-size: clamp(0px, 2.5vw, 30px);
    letter-spacing: 0.05em;
    padding-left: 0.05em;
    color: #fff;
    margin: 0;
}

#voice .voice_main {
    width: 100%;
    height: 100%;
    background: url("../img/youzi/voice_bg.png") repeat-y top center / 100% auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#voice .voice_bg {
    width: 100%;
    height: clamp(0px, 12.5vw, 150px);
    background: url("../img/youzi/voice_bg_bottom.png") no-repeat top center / 100% auto;
}

@media (max-width: 599px) {
    #voice {
        width: 100%;
        margin: 0 auto 10dvw;
    }

    #voice .sec_title_wrap {
        height: 34.5dvw;
        background-image: url("../img/youzi/voice_bg_top_sp.png");
    }

    #voice .sec_title_wrap .sec_title_en {
        width: 25dvw;
        padding-top: 11dvw;
        margin-bottom: 2dvw;
    }

    #voice .sec_title_wrap .sec_title {
        font-size: 4.5dvw;
    }

    #voice .voice_main {
        background-image: url("../img/youzi/voice_bg_sp.png");
    }

    #voice .voice_bg {
        height: 10dvw;
        background-image: url("../img/youzi/voice_bg_bottom_sp.png");
    }
}

.voice_qa {
    width: clamp(0px, 75.8vw, 910px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 10vw, 120px) 0;
}

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

.qa + .qa::before {
    content: "";
    width: clamp(0px, 17.1vw, 205px);
    height: clamp(0px, 0.8vw, 10px);
    background: url("../img/youzi/voice_line.svg") no-repeat center center / contain;
    position: absolute;
    top: clamp(-65px, -5.4vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.area_q {
    width: 100%;
    padding: 0 clamp(0px, 15vw, 180px) 0 clamp(0px, 12.5vw, 150px);
    position: relative;
}

.area_q .icon {
    width: clamp(0px, 8.3vw, 100px);
    position: absolute;
    top: clamp(0px, 1.3vw, 15px);
    left: 0;
}

.area_q .text {
    display: inline-block;
    background-color: #fff;
    padding: clamp(0px, 2.9vw, 35px) clamp(0px, 3.3vw, 40px);
    border-radius: clamp(0px, 3.1vw, 37px);
    position: relative;
    z-index: 2;
}

.area_q .text::before {
    content: "";
    width: clamp(0px, 5vw, 60px);
    height: clamp(0px, 2.5vw, 30px);
    background: url("../img/youzi/voice_talk.svg") no-repeat center center / contain;
    position: absolute;
    top: clamp(0px, 6.3vw, 75px);
    left: clamp(-33px, -2.8vw, 0px);
    margin: auto;
    z-index: -1;
    transform: scale(-1, 1);
}

.area_q .text p {
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: bold;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    color: #84ccc9;
}

.area_a {
    padding-top: clamp(0px, 4.2vw, 50px);
}

.area_a .block_a {
    padding: 0 clamp(0px, 15vw, 180px) 0 clamp(0px, 12.5vw, 150px);
    position: relative;
}

.area_a .block_a + .block_a {
    margin-top: clamp(0px, 1.7vw, 20px);
}

.area_a .block_a .icon {
    width: clamp(0px, 10.4vw, 125px);
    aspect-ratio: 125 / 120;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: clamp(0px, 0.8vw, 10px);
    right: 0;
}

.area_a .block_a .icon_a {
    background: url("../img/youzi/voice_a_icon_a.png") no-repeat center center / contain;
}
.area_a .block_a .icon_b {
    background: url("../img/youzi/voice_a_icon_b.png") no-repeat center center / contain;
}

.area_a .block_a .text {
    width: 100%;
    position: relative;
    background-color: #fff;
    padding: clamp(0px, 2.1vw, 25px) clamp(0px, 2.5vw, 30px);
    border-radius: clamp(0px, 3.1vw, 37px);
    z-index: 2;
}

.area_a .block_a .text p {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.9em;
    min-height: 5em;
}

.area_a .block_a .text::before {
    content: "";
    width: clamp(0px, 5vw, 60px);
    height: clamp(0px, 2.5vw, 30px);
    background: url("../img/youzi/voice_talk.svg") no-repeat center center / contain;
    position: absolute;
    top: clamp(0px, 6.3vw, 75px);
    right: clamp(-33px, -2.8vw, 0px);
    margin: auto;
    z-index: -1;
}

@media (max-width: 599px) {
    .voice_qa {
        width: 90dvw;
        gap: 19dvw 0;
    }

    .qa + .qa::before {
        width: 40dvw;
        height: 2.4dvw;
        top: -10dvw;
    }

    .area_q {
        padding: 12dvw 0 0 21.5dvw;
    }

    .area_q .icon {
        width: 18dvw;
        top: 12dvw;
    }

    .area_q .text {
        min-height: 30dvw;
        padding: 4.5dvw 7dvw;
        border-radius: 5dvw;
        display: flex;
        align-items: center;
    }

    .area_q .text::before {
        width: 11dvw;
        height: 5.5dvw;
        top: 15dvw;
        left: -4.3dvw;
    }

    .area_q .text p {
        font-size: 4dvw;
    }

    .area_a {
        padding-top: 5dvw
    }

    .area_a .block_a {
        padding: 0 26dvw 0 0;
    }

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

    .area_a .block_a .icon {
        width: 22dvw;
        top: 0;
    }

    .area_a .block_a .text {
        padding: 5dvw 5.5dvw;
        border-radius: 5dvw;
    }

    .area_a .block_a .text p {
        font-size: 3.5dvw;
        line-height: 1.7em;
        min-height: 4em;
    }

    .area_a .block_a .text::before {
        width: 11dvw;
        height: 5.5dvw;
        top: 15.5dvw;
        right: -4.3dvw;
    }
}


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

.acc_cont {
    display: none;
}

.acc_icon {
    width: clamp(0px, 2.7vw, 32px);
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: clamp(0px, 0.4vw, 5px);
    position: absolute;
    top: clamp(0px, 1.3vw, 15px);
    right: 0;
}

.acc_icon::before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: clamp(0px, 1.7vw, 20px);
    height: 3px;
    background-color: #84ccc9;
    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, 1.7vw, 20px);
    height: 3px;
    background-color: #84ccc9;
    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.3dvw;
        background-color: transparent;
        border-radius: 0;
        position: absolute;
        top: 0;
        right: 0;
    }

    .acc_icon::before{
        width: 100%;
        height: 1dvw;
        background-color: #fff;
    }

    .acc_icon::after {
        width: 100%;
        height: 1dvw;
        background-color: #fff;
    }
}


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

@media (max-width: 599px) {
    #link {
        padding-bottom: 22.5dvw;
    }
}