@charset "utf-8";

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

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

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


/* ===============================================
   header
=============================================== */
.nav_actions {
    border-color: #fff;
    background-color: #fff;
}

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

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

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

.nav_sns a {
    background-color: #ffc237;
}


/* ===============================================
   bg
=============================================== */
.bg_yellow {
    background-color: #fffbc2;
}


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

.button_2 {
    color: #fff;
    background-color: #231815;
}

.button_3 {
    border-color: #fff;
    background-color: #fff;
}

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

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

.button_3::before {
    background: url("../img/seikatsu/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%;
    }
}


/* ===============================================
   title
=============================================== */
.sec_title_line {
    font-size: clamp(0px, 3.2vw, 38px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
    position: relative;
    padding-bottom: 0.7em;
}

.sec_title_line::after {
    content: "";
    width: 100%;
    height: clamp(0px, 0.4vw, 5px);
    background: url("../img/seikatsu/title_line_dashed.svg") no-repeat center center / contain;
    position: absolute;
    bottom: 0;
    left: 0;
}

@media (max-width: 599px) {
    .sec_title_line {
        font-size: clamp(0px, 4.2dvw, 42px);
    }

    .sec_title_line::after {
        height: clamp(0px, 0.5dvw, 5px);
    }
}


/* ===============================================
   mv
=============================================== */
#mv {
    width: 100%;
    position: relative;
}

.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: 1400px;
    max-width: 116.7vw;
}

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

.mv_bg {
    width: 100vw;
    height: clamp(0px, 15vw, 180px);
    text-align: center;
    overflow: hidden;
    background: url("../img/seikatsu/mv_bg_text.png") repeat-x;
    background-size: auto clamp(0px, 15vw, 180px);
    animation: slideBackground 30s linear infinite;
    position: absolute;
    top: clamp(0px, 62.5vw, 750px);
    left: 0;
    z-index: 0;
}

@keyframes slideBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: calc(-3600px) 0;
    }
}

@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 {
    padding-top: clamp(0px, 2.9vw, 35px);
    padding-bottom: clamp(0px, 13.3vw, 160px);
    text-align: center;
    position: relative;
}

#about .sec_title {
    width: clamp(0px, 13.8vw, 165px);
    margin: 0 auto clamp(0px, 5vw, 60px);
}

.about_em {
    font-size: clamp(0px, 2.1vw, 25px);
    letter-spacing: 0.1em;
    font-weight: 700;
    line-height: 1em;
    margin-bottom: 1em;
}

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

.about_img {
    width: clamp(0px, 48.3vw, 580px);
    margin: clamp(0px, 3.3vw, 40px) auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(0px, 2.1vw, 25px) 0;
    position: relative;
}

.about_img .text {
    width: clamp(0px, 19.2vw, 230px);
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: 0.1em;
    color: #ffc237;
    background-color: #fff;
    border-radius: 50%;
}

.about_img .text_3 {
    color: #fff;
    background-color: #ffc237;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.about_bg {
    width: clamp(0px, 100vw, 1410px);
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
}

.about_bg img {
    width: 1400px;
    max-width: 117.5vw;
}

@media (max-width: 599px) {
    #about {
        padding-top: clamp(0px, 16dvw, 160px);
        padding-bottom: clamp(0px, 13.5dvw, 135px);
    }

    #about .sec_title {
        width: clamp(0px, 31dvw, 310px);
        margin: 0 auto clamp(0px, 6.5dvw, 65px);
    }

    .about_em {
        font-size: clamp(0px, 4dvw, 40px);
    }

    .about_text {
        font-size: clamp(0px, 3.5dvw, 35px);
        line-height: 1.7em;
        letter-spacing: 0;
    }

    .about_img {
        width: clamp(0px, 89dvw, 890px);
        margin: clamp(0px, 20dvw, 200px) auto 0;
        gap: clamp(0px, 4dvw, 40px) 0;
    }

    .about_img .text {
        width: clamp(0px, 35dvw, 350px);
        font-size: clamp(0px, 4.2dvw, 42px);
    }

    .about_bg {
        width: 100vw;
    }

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


/* ===============================================
   osusume
=============================================== */
#osusume {
    width: 100%;
    background-color: #fff;
    padding: clamp(0px, 13.3vw, 160px) 0 clamp(0px, 8.3vw, 100px);
    position: relative;
}

#osusume .sec_title {
    width: clamp(0px, 37.9vw, 455px);
    position: absolute;
    top: clamp(-28px, -2.3vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.osusume_list {
    display: flex;
    justify-content: center;
    gap: 0 clamp(0px, 2.5vw, 30px);
}

.osusume_list li {
    width: clamp(0px, 32.5vw, 390px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.osusume_list li img {
    width: clamp(0px, 26.7vw, 320px);
}

.osusume_list li .text_em {
    font-size: clamp(0px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 2.5em;
    margin-top: clamp(0px, 3.3vw, 40px);
    margin-bottom: 1em;
}

.osusume_list li .text_em span {
    position: relative;
}

.osusume_list li .text_em span::after {
    content: "";
    width: 98%;
    height: 3px;
    border-radius: 3px;
    background-color: #f4b2ba;
    position: absolute;
    top: 1.8em;
    left: 1%;
}

.osusume_list li .text {
    width: 100%;
    font-size: clamp(0px, 1.33vw, 16px);
    letter-spacing: 0.05em;
    line-height: 2em;
    white-space: nowrap;
}

@media (max-width: 599px) {
    #osusume {
        padding: clamp(0px, 22dvw, 220px) 0 clamp(0px, 16dvw, 160px);
    }

    #osusume .sec_title {
        width: clamp(0px, 67dvw, 670px);
        top: clamp(-45px, -4.5dvw, 0px);
    }

    .osusume_list {
        flex-direction: column;
        align-items: center;
        gap: clamp(0px, 11.5dvw, 115px) 0;
    }

    .osusume_list li {
        width: clamp(0px, 84dvw, 840px);
    }
    
    .osusume_list li img {
        width: clamp(0px, 60dvw, 600px);
    }

    .osusume_list li .text_em {
        font-size: clamp(0px, 4.1dvw, 41px);
        margin-top: clamp(0px, 4dvw, 40px);
    }
    
    .osusume_list li .text_em span::after {
        height: clamp(0px, 0.6dvw, 6px);
        border-radius: 6px;
    }

    .osusume_list li .text {
        width: 100%;
        font-size: clamp(0px, 3.5dvw, 35px);
        line-height: 1.7em;
    }
}


/* ===============================================
   point
=============================================== */
#point {
    width: 100%;
    padding: clamp(0px, 9.2vw, 110px) 0 clamp(0px, 7.9vw, 95px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#point .sec_title {
    width: clamp(0px, 39.2vw, 470px);
    margin-bottom: clamp(0px, 0.8vw, 10px);
}

.point_bg {
    width: clamp(0px, 100vw, 2000px);
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: absolute;
    top: clamp(-55px, -4.6vw, 0px);
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
}

.point_bg img {
    width: 2000px;
    max-width: 166.67vw;
}

.point_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0px, 3.8vw, 45px) clamp(0px, 6.7vw, 80px);
    position: relative;
    z-index: 1;
}

.point_list > div {
    position: relative;
}

.point_list .point_1 {
    width: 100%;
    text-align: center;
}

.point_1 img {
    width: clamp(0px, 59.2vw, 710px);
}

.point_2 img,
.point_3 img {
    width: clamp(0px, 45vw, 540px);
}

.point_1 .point_cont {
    position: absolute;
    top: clamp(0px, 18.8vw, 225px);
    left: 0;
    right: 0;
    margin: auto;
}

.point_2 .point_cont,
.point_3 .point_cont {
    position: absolute;
    top: clamp(0px, 15.8vw, 190px);
    left: 0;
    right: 0;
    margin: auto;
}

.point_cont .point_text {
    font-size: clamp(0px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.8em;
    letter-spacing: 0.15em;
    text-align: center;
}

.point_cont .point_text span {
    padding-left: 0.15em;
    position: relative;
    z-index: 1;
}

.point_cont .point_text span::before {
    content: "";
    width: 100%;
    height: 1.2em;
    position: absolute;
    top: 0.2em;
    left: 0;
    background-color: #fff571;
    z-index: -1;
}

.point_cont .point_text span.wide {
    padding: 0 1em 0 1.5em;
}

.point_cont .point_course {
    width: clamp(0px, 32.5vw, 390px);
    margin: clamp(0px, 2.9vw, 35px) auto 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 1.3vw, 15px) 0;
}

.point_cont .point_course li {
    width: 100%;
    aspect-ratio: 390 / 38;
    background-color: #ffc237;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    font-size: clamp(0px, 2vw, 24px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.15em;
    padding-left: 0.15em;
}

@media (max-width: 599px) {
    #point {
        padding: clamp(0px, 12dvw, 120px) 0 clamp(0px, 26dvw, 260px);
    }

    #point .sec_title {
        width: clamp(0px, 74.5dvw, 745px);
        margin-bottom: clamp(0px, 2dvw, 20px);
    }

    .point_bg {
        width: 100vw;
        top: 0;
    }

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

    .point_list {
        flex-direction: column;
        align-items: center;
        gap: clamp(0px, 7.5dvw, 75px) 0;
    }
    
    .point_1 img,
    .point_2 img,
    .point_3 img {
        width: clamp(0px, 90dvw, 900px);
    }

    .point_1 .point_cont {
        top: clamp(0px, 27dvw, 270px);
    }

    .point_2 .point_cont,
    .point_3 .point_cont {
        top: clamp(0px, 23dvw, 230px);
    }

    .point_cont .point_text {
        font-size: clamp(0px, 4dvw, 40px);
    }
    
    .point_cont .point_course {
        width: clamp(0px, 72dvw, 720px);
        margin: clamp(0px, 4dvw, 40px) auto 0;
        flex-direction: row;
        justify-content: center;
        gap: 0 2.5dvw;
    }

    .point_cont .point_course li {
        width: clamp(0px, 22.3dvw, 223px);
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        font-size: clamp(0px, 3.5dvw, 35px);
        line-height: 1.2em;
        letter-spacing: 0.05em;
        padding-top: 0.5em;
        padding-left: 0.05em;
    }
}


/* ===============================================
   subject
=============================================== */
#subject {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.subject_cont {
    width: clamp(0px, 113.83vw, 1366px);
    aspect-ratio: 1366 / 1030;
    background-color: #ffc237;
    border-radius: clamp(0px, 54.2vw, 650px) clamp(0px, 54.2vw, 650px) 0 0;
    padding-top: clamp(0px, 9.9vw, 135px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.subject_bg {
    width: clamp(0px, 28.2vw, 385px);
    position: absolute;
    top: clamp(0px, 9.5vw, 130px);
    right: clamp(0px, 5.1vw, 70px);
}

.subject_cont .sec_title_line {
    margin-bottom: clamp(0px, 5.1vw, 70px);
}

.subject_cont .best {
    width: clamp(0px, 22.3vw, 305px);
}

@media (max-width: 599px) {
    #subject {
        overflow: visible;
    }
    
    .subject_cont {
        width: 100dvw;
        aspect-ratio: 1000 / 1160;
        border-radius: clamp(0px, 47.5dvw, 475px) clamp(0px, 47.5dvw, 475px) 0 0;
        padding-top: clamp(0px, 14.5dvw, 145px);
    }

    .subject_bg {
        width: clamp(0px, 38dvw, 380px);
        top: clamp(-175px, -17.5dvw, 0px);
        right: clamp(0px, 3dvw, 30px);
    }

    .subject_cont .sec_title_line {
        margin-bottom: clamp(0px, 4.5dvw, 45px);
    }

    .subject_cont .best {
        width: clamp(0px, 44dvw, 440px);
    }
}

.detail {
    display: none;
}

.subject_item {
    cursor: pointer;
    position: relative;
}

.subject_item .img {
    width: 100%;
    aspect-ratio: 390 / 350;
    border-radius: clamp(0px, 1.5vw, 20px);
    line-height: 0;
    overflow: hidden;
}

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

.subject_item .slide_title {
    font-size: clamp(0px, 1.5vw, 20px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3em;
    text-align: center;
    margin-top: 1em;
}

.subject_item .slide_nb {
    width: clamp(0px, 5.9vw, 80px);
    position: absolute;
    top: clamp(-40px, -2.9vw, 0px);
    left: clamp(0px, 2.6vw, 35px);
}

.subject_item:first-of-type .slide_nb {
    top: clamp(-80px, -5.9vw, 0px);
}

@media (max-width: 599px) {
    .subject_item .img {
        aspect-ratio: 335 / 300;
        border-radius: clamp(0px, 1.7dvw, 17px);
    }
    
    .subject_item .slide_title {
        font-size: clamp(0px, 3dvw, 30px);
    }

    .subject_item .slide_nb {
        width: clamp(0px, 6dvw, 60px);
        top: clamp(-35px, -3.5dvw, 0px);
        left: clamp(0px, 2.6vw, 35px);
    }

    .subject_item:first-of-type .slide_nb {
        top: clamp(-65px, -6.5dvw, 0px);
    }
}

/* Swiper */
.swiper {
    width: clamp(0px, 95.6vw, 1320px);
    position: absolute;
    top: clamp(0px, 34.8vw, 475px);
    left: clamp(0px, 6.6vw, 90px);
}

.swiper-wrapper {
    padding-top: clamp(0px, 5.9vw, 80px);
}

.mySwiper .swiper-slide {
    width: clamp(0px, 28.6vw, 390px);
    margin-right: clamp(0px, 5.5vw, 75px);
}

.mySwiper .swiper-slide:last-child {
    margin-right: 0;
}

.swiper-button-prev,
.swiper-button-next {
    width: clamp(0px, 4.8vw, 65px);
    height: clamp(0px, 4.8vw, 65px);
    transition: opacity 0.3s;
    background: url("../img/seikatsu/slider_arrow.svg") no-repeat center center / contain;
    cursor: pointer;
    position: absolute;
    bottom: clamp(0px, 0.7vw, 10px);
    right: clamp(0px, 4.4vw, 60px);
    z-index: 2;
}
.swiper-button-prev {
    right: clamp(0px, 10.2vw, 140px);
    transform: rotate(180deg);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: 0.8;
}

.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 599px) {
    .swiper {
        width: clamp(0px, 114dvw, 1140px);
        top: clamp(0px, 60dvw, 600px);
        left: clamp(0px, 6dvw, 60px);
    }

    .swiper-wrapper {
        padding-top: clamp(0px, 6.5dvw, 65px);
        padding-bottom: clamp(0px, 7dvw, 70px);
    }

    .mySwiper .swiper-slide {
        width: clamp(0px, 33.5dvw, 335px);
        margin-right: clamp(0px, 6.5dvw, 65px);
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: clamp(0px, 5dvw, 50px);
        height: clamp(0px, 5dvw, 50px);
        bottom: 0;
        right: clamp(0px, 22dvw, 220px);
    }
    .swiper-button-prev {
        right: clamp(0px, 29dvw, 290px);
    }
}

/* ポップアップ */
.popup {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 99;
}

.popup.show {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    height: clamp(0px, 96vh, 900px);
    max-width: 96vw;
    aspect-ratio: 1 / 1;
    background: #fff;
    padding: clamp(0px, 8.5vh, 85px) clamp(0px, 8.5vh, 85px) clamp(0px, 3.5vh, 35px);
    border-radius: clamp(0px, 9vh, 90px);
    transform: translateY(20px);
    transition: transform .3s ease;
}

.popup.show .popup-content {
    transform: translateY(0);
}

.popup .close {
    width: clamp(0px, 9vh, 90px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    border: clamp(0px, 0.4vh, 4px) solid #ffc237;
    font-size: clamp(0px, 8vh, 80px);
    font-weight: 500;
    line-height: 0;
    color: #ffc237;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.15em;
    position: absolute;
    top: clamp(-15px, -1.5vh, 0px);
    right: clamp(-15px, -1.5vh, 0px);
}

#popup-body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}


.popup_img {
    width: 100%;
    max-width: 730px;
    aspect-ratio: 730 / 490;
    margin-bottom: clamp(0px, 3vh, 30px);
    border-radius: clamp(0px, 3.5vh, 35px);
    overflow: hidden;
}

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

.popup_nb {
    width: 30%;
    padding-top: clamp(0px, 2vh, 20px);
}

.popup_nb img {
    width: clamp(0px, 15vh, 150px);
}

.popup_text_area {
    width: 100%;
    flex: 1;
}

.popup_title {
    font-size: clamp(0px, 3vh, 30px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    padding-bottom: 0.4em;
    display: inline-block;
    border-bottom: 2px solid #ffc237;
    margin-bottom: 0.8em;
}

.popup_text {
    font-size: clamp(0px, 1.6vh, 16px);
    line-height: 2em;
    letter-spacing: 0.05em;
}

@media (orientation: portrait) {
    .popup-content {
        width: clamp(0px, 75vw, 900px);
        height: auto;
        max-height: 96vh;
        aspect-ratio: inherit;
        padding: clamp(0px, 7.1vw, 85px);
        border-radius: clamp(0px, 7.5vw, 90px);
    }

    .popup .close {
        width: clamp(0px, 7.5vw, 90px);
        border: clamp(0px, 0.3vw, 4px) solid #ffc237;
        font-size: clamp(0px, 6.7vw, 80px);
        top: clamp(-15px, -1.3vw, 0px);
        right: clamp(-15px, -1.3vw, 0px);
    }

    .popup_img {
        margin-bottom: clamp(0px, 6.3vw, 75px);
        border-radius: clamp(0px, 2.9vw, 35px);
    }

    .popup_nb img {
        width: clamp(0px, 12.5vw, 150px);
    }

    .popup_title {
        font-size: clamp(0px, 2.5vw, 30px);
    }

    .popup_text {
        font-size: clamp(0px, 1.33vw, 16px);
    }
}

@media (max-width: 599px) {
    .popup-content {
        width: clamp(0px, 90dvw, 900px);
        height: auto;
        max-height: 96dvh;
        aspect-ratio: inherit;
        padding: clamp(0px, 8.5dvw, 85px);
        border-radius: clamp(0px, 8.5dvw, 85px);
    }

    .popup .close {
        width: clamp(0px, 10dvw, 100px);
        border: clamp(2px, 0.5dvw, 5px) solid #ffc237;
        font-size: clamp(0px, 8dvw, 80px);
        top: clamp(-65px, -6.5dvw, 0px);
        right: clamp(0px, 6.5dvw, 65px);
    }

    #popup-body {
        max-height: 85dvh;
    }
    
    .popup_img {
        margin-bottom: clamp(0px, 11.5dvw, 115px);
        border-radius: clamp(0px, 3.5dvw, 35px);
    }
    
    .popup_nb {
        position: absolute;
        top: clamp(0px, 56dvw, 560px);
        left: 0;
    }

    .popup_nb img {
        width: clamp(0px, 15dvw, 150px);
    }
    
    .popup_text_area {
        flex: initial;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup_title {
        font-size: clamp(0px, 4dvw, 40px);
        text-align: center;
        margin-bottom: clamp(0px, 9dvw, 90px);
    }
    
    .popup_title.long {
        line-height: 1.5em;
        letter-spacing: 0;
        margin-bottom: clamp(0px, 6dvw, 60px);
    }

    .popup_text {
        font-size: clamp(0px, 3.5dvw, 35px);
        line-height: 1.7em;
        letter-spacing: 0;
    }
}


/* ===============================================
   seminar
=============================================== */
#seminar {
    width: clamp(0px, 100vw, 1366px);
    background-color: #ffd682;
    padding: clamp(0px, 10vw, 120px) 0 clamp(0px, 9.2vw, 110px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#seminar .sec_title_line {
    margin-bottom: clamp(0px, 7.5vw, 90px);
}

.seminar_cont {
    width: clamp(0px, 90vw, 1000px);
    background-color: #fff;
    border-radius: clamp(0px, 8.3vw, 100px);
    margin-bottom: clamp(0px, 7.9vw, 95px);
}

.seminar_block {
    position: relative;
    display: flex;
}

.seminar_block + .seminar_block {
    padding-top: clamp(0px, 0.8vw, 10px);
}

.seminar_block + .seminar_block::before {
    content: "";
    width: 96%;
    height: clamp(0px, 0.8vw, 10px);
    background-image: radial-gradient(circle, #ffd682 clamp(0px, 0.4vw, 5px), transparent clamp(0px, 0.4vw, 5px));
    background-position: left top;
    background-repeat: repeat-x;
    background-size: clamp(0px, 2.5vw, 30px) clamp(0px, 0.8vw, 10px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.seminar_block .seminar_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.seminar_block:first-child .seminar_bg {
    top: clamp(0px, 1.7vw, 20px);
}

.seminar_block .img_area {
    width: 44%;
    position: relative;
}

.seminar_block .img_area img {
    width: clamp(0px, 41.3vw, 495px);
    max-width: clamp(0px, 41.3vw, 495px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.seminar_block .text_area {
    width: 56%;
    padding-left: clamp(0px, 9.6vw, 115px);
    padding-right: clamp(0px, 7.1vw, 85px);
    position: relative;
    z-index: 1;
}

.seminar_block .text_area .title {
    padding-top: clamp(0px, 11.7vw, 140px);
    padding-bottom: clamp(0px, 7.5vw, 90px);
}

.seminar_block:first-of-type .text_area .title {
    padding-top: clamp(0px, 12.5vw, 150px);
}

.seminar_block:nth-of-type(2) .text_area .title {
    padding-top: clamp(0px, 10vw, 120px);
}

.seminar_block .text_area .title p {
    font-size: clamp(0px, 2.25vw, 27px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3em;
    text-align: center;
}

.seminar_block .text_area .title p.sm {
    font-size: clamp(0px, 1.7vw, 20px);
    line-height: 1;
    margin-top: 1em;
}

.seminar_block .text_area .text {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 2em;
    letter-spacing: 0.05em;
    margin-bottom: clamp(0px, 8.3vw, 100px);
}

@media (max-width: 599px) {
    #seminar {
        width: 100vw;
        padding: clamp(0px, 9dvw, 90px) 0 clamp(0px, 11dvw, 110px);
    }

    #seminar .sec_title_line {
        margin-bottom: clamp(0px, 8dvw, 80px);
    }

    .seminar_cont {
        width: clamp(0px, 85dvw, 850px);
        border-radius: clamp(0px, 10.5dvw, 105px);
        margin-bottom: clamp(0px, 10dvw, 100px);
    }
    
    .seminar_block {
        flex-direction: column;
        align-items: center;
    }

    .seminar_block + .seminar_block {
        margin-top: clamp(0px, 8.5dvw, 85px);
        padding-top: 0;
    }

    .seminar_block + .seminar_block::before {
        width: 80%;
        height: clamp(0px, 1dvw, 10px);
        background-image: radial-gradient(circle, #ffd682 clamp(0px, 0.5dvw, 5px), transparent clamp(0px, 0.5dvw, 5px));
        background-size: clamp(0px, 3dvw, 30px) clamp(0px, 1dvw, 10px);
        top: clamp(-85px, -8.5dvw, 0px);
    }

    .seminar_block .seminar_bg {
        width: clamp(0px, 53dvw, 530px);
        left: clamp(-45px, -4.5dvw, 0px);
    }

    .seminar_block .img_area {
        width: clamp(0px, 37dvw, 370px);
        max-width: clamp(0px, 37dvw, 370px);
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 0;
        right: clamp(-25px, -2.5dvw, 0px);
    }

    .seminar_block .img_area img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        bottom: inherit;
        position: relative;
    }

    .seminar_block .text_area {
        width: 100%;
        padding: 0;
    }

    .seminar_block .text_area .title {
        width: clamp(0px, 45dvw, 450px);
        min-height: clamp(0px, 37dvw, 370px);
        padding-top: clamp(0px, 14dvw, 140px);
        padding-bottom: 0;
        margin-bottom: clamp(0px, 4.5dvw, 45px);
    }

    .seminar_block:first-of-type .text_area .title {
        padding-top: clamp(0px, 14.5dvw, 145px);
    }
    
    .seminar_block:nth-of-type(2) .text_area .title {
        padding-top: clamp(0px, 13dvw, 130px);
    }

    .seminar_block .text_area .title p {
        font-size: clamp(0px, 3.6dvw, 36px);
        letter-spacing: 0.08em;
    }

    .seminar_block .text_area .title p.sm {
        font-size: clamp(0px, 2.7dvw, 27px);
        margin-top: 1em;
    }

    .seminar_block .text_area .text {
        font-size: clamp(0px, 3.5dvw, 35px);
        line-height: 1.7em;
        letter-spacing: 0.1em;
        padding-left: clamp(0px, 5.5dvw, 55px);
        padding-right: clamp(0px, 5.5dvw, 55px);
        margin-bottom: clamp(0px, 7dvw, 70px);
    }
}


/* ===============================================
   active
=============================================== */
#active {
    width: clamp(0px, 100vw, 1366px);
    background-color: #ffc237;
    padding: clamp(0px, 11.3vw, 135px) 0 clamp(0px, 19.2vw, 230px);
    margin: 0 auto;
}

#active .sec_title_line {
    margin-bottom: clamp(0px, 7.5vw, 90px);
}

.active_list {
    display: flex;
    justify-content: center;
    gap: 0 clamp(0px, 8.3vw, 100px);
}

.active_list li {
    width: clamp(0px, 26.3vw, 315px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.active_list .active_img {
    margin-bottom: clamp(0px, 7.5vw, 90px);
}

.active_list .list_title {
    width: 100%;
    font-size: clamp(0px, 2.6vw, 31px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
    border-top: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    padding: 1.3em 0;
    position: relative;
    margin-bottom: 1em;
}

.active_list .list_title::before {
    content: "";
    width: clamp(0px, 14.6vw, 175px);
    aspect-ratio: 175 / 55;
    background: url("../img/seikatsu/active_icon.svg") no-repeat center center / contain;
    position: absolute;
    top: clamp(-38px, -3.2vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.active_list .list_text {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 2em;
    letter-spacing: 0.03em;
    text-align: center;
}

@media (max-width: 599px) {
    #active {
        width: 100dvw;
        padding: clamp(0px, 11dvw, 110px) 0 clamp(0px, 38dvw, 380px);
    }

    #active .sec_title_line {
        margin-bottom: clamp(0px, 7.5dvw, 75px);
    }

    .active_list {
        flex-direction: column;
        align-items: center;
        gap: clamp(0px, 11dvw, 110px);
    }

    .active_list li {
        width: clamp(0px, 60dvw, 600px);
    }

    .active_list .active_img {
        width: clamp(0px, 57dvw, 570px);
        margin-bottom: clamp(0px, 12dvw, 120px);
    }

    .active_list .list_title {
        font-size: clamp(0px, 6.2dvw, 62px);
        border-top-width: clamp(2px,0.4dvw, 4px);
        border-bottom-width: clamp(2px,0.4dvw, 4px);
        padding: 1em 0;
        margin-bottom: 0.8em;
    }

    .active_list .list_title::before {
        width: clamp(0px, 34dvw, 340px);
        top: clamp(-77px, -7.7dvw, 0px);
    }

    .active_list .list_text {
        font-size: clamp(0px, 3.5dvw, 35px);
        line-height: 1.7em;
    }
}


/* ===============================================
   curriculum
=============================================== */
#curriculum {
    width: 100%;
    display: flex;
    justify-content: center;
}

.curriculum_cont {
    width: clamp(0px, 113.83vw, 1366px);
    aspect-ratio: 1366 / 850;
    background-color: #ffd682;
    border-radius: 0 0 clamp(0px, 54.2vw, 650px) clamp(0px, 54.2vw, 650px);
    padding-top: clamp(0px, 23.8vw, 325px);
    position: relative;
}

.curriculum_cont .sec_title_line {
    margin-bottom: clamp(0px, 5.1vw, 70px);
}

.curriculum_img {
    width: clamp(0px, 31.5vw, 430px);
    position: absolute;
    top: clamp(-110px, -8.1vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.curriculum_cont .text {
    font-size: clamp(0px, 1.5vw, 20px);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.15em;
    line-height: 2em;
}

.curriculum_cont .button {
    margin: clamp(0px, 5.1vw, 70px) auto 0;
}

@media (max-width: 599px) {
    .curriculum_cont {
        width: 100dvw;
        aspect-ratio: 1000 / 1375;
        border-radius: 0 0 clamp(0px, 47.5dvw, 475px) clamp(0px, 47.5dvw, 475px);
        padding-top: clamp(0px, 41dvw, 410px);
    }

    .curriculum_cont .sec_title_line {
        margin-bottom: clamp(0px, 8dvw, 80px);
    }

    .curriculum_img {
        width: clamp(0px, 59dvw, 590px);
        top: clamp(-230px, -23dvw, 0px);
    }

    .curriculum_cont .text {
        font-size: clamp(0px, 3.5dvw, 35px);
        letter-spacing: 0.04em;
        line-height: 1.7em;
    }

    .curriculum_cont .button {
        margin: clamp(0px, 13.5dvw, 135px) auto 0;
    }
}


/* ===============================================
   work
=============================================== */
#work {
    width: 100%;
    padding: clamp(0px, 10vw, 120px) 0 clamp(0px, 16.7vw, 200px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#work .sec_title {
    width: clamp(0px, 40vw, 480px);
}

.work_cont {
    width: clamp(0px, 100vw, 1200px);
    position: relative;
}

.work_cont.work_1 {
    aspect-ratio: 1200 / 720;
    background: url("../img/seikatsu/work_1_bg.png") no-repeat center center / contain;
    padding-top: clamp(0px, 7.5vw, 90px);
    margin-top: clamp(0px, 4.2vw, 50px);
}

.work_cont.work_2 {
    aspect-ratio: 1200 / 660;
    background: url("../img/seikatsu/work_2_bg.png") no-repeat center center / contain;
    padding-top: clamp(0px, 4.6vw, 55px);
    margin-top: clamp(0px, 3.3vw, 40px);
}

.work_cont .cont_inner {
    width: clamp(0px, 69.2vw, 830px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.work_cont .img_area {
    width: clamp(0px, 30.8vw, 370px);
    aspect-ratio: 370 / 570;
    border-radius: clamp(0px, 14.6vw, 175px);
    overflow: hidden;
    line-height: 0;
    position: relative;
    z-index: 1;
}

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

.work_cont .text_area {
    width: clamp(0px, 33.3vw, 400px);
    position: relative;
    z-index: 1;
}

.work_cont  .text_head {
    width: 100%;
}

.work_cont .text_area .text_1 {
    font-size: clamp(0px, 2.9vw, 35px);
    letter-spacing: 0.1em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5em;
    position: relative;
}

.work_cont .text_area .text_1::before {
    content: "";
    width: clamp(0px, 26.3vw, 315px);
    aspect-ratio: 315 / 55;
    background: url("../img/seikatsu/work_title_bg.png") center center / contain;
    position: absolute;
    bottom: -0.7em;;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}

.work_cont .text_area .text_2 {
    font-size: clamp(0px, 1.7vw, 20px);
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
}

.work_cont .text_area .text_3 {
    font-size: clamp(0px, 1.7vw, 20px);
    letter-spacing: 0;
    margin-bottom: 1.5em;
    text-align: right;
}

.work_cont .text_area .text_4 {
    font-size: clamp(0px, 1.33vw, 16px);
    letter-spacing: 0.15em;
    line-height: 2em;
    text-align: justify;
}

#work .licenses {
    text-align: center;
    margin-top: clamp(0px, 6.7vw, 80px);
    margin-bottom: clamp(0px, 7.5vw, 90px);
}

#work .licenses .cont_title {
    font-size: clamp(0px, 3.2vw, 38px);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.8em;
}

#work .licenses p {
    font-size: clamp(0px, 2.1vw, 25px);
    letter-spacing: 0.15em;
    font-weight: 700;
    line-height: 2em;
}

@media (max-width: 599px) {
    #work {
        padding: clamp(0px, 15dvw, 150px) 0 clamp(0px, 18dvw, 180px);
    }

    #work .sec_title {
        width: clamp(0px, 58dvw, 580px);
    }

    .work_cont {
        width: 100dvw;
    }

    .work_cont.work_1 {
        min-height: 92dvw;
        aspect-ratio: inherit;
        background-image: url("../img/seikatsu/work_1_bg_sp.png");
        background-position: top clamp(0px, 5dvw, 50px) center;
        background-size: 100% auto;
        padding-top: 0;
        margin-top: clamp(0px, 2.5dvw, 25px);
    }

    .work_cont.work_2 {
        min-height: 95dvw;
        aspect-ratio: inherit;
        background-image: url("../img/seikatsu/work_2_bg_sp.png");
        background-position: top clamp(0px, 8dvw, 80px) center;
        background-size: 100% auto;
        padding-top: 0;
        margin-top: clamp(0px, 1.5dvw, 15px);
    }

    .work_cont .cont_inner {
        width: clamp(0px, 80dvw, 800px);
        position: relative;
    }

    .work_cont .img_area {
        width: clamp(0px, 37dvw, 370px);
        aspect-ratio: 370 / 510;
        border-radius: clamp(0px, 17.5dvw, 175px);
        position: absolute;
        top: 0;
        right: 0;
    }

    .work_cont .text_area {
        width: 100%;
    }

    .work_cont  .text_head {
        width: clamp(0px, 40dvw, 400px);
        min-height: clamp(0px, 51dvw, 510px);
        margin-bottom: clamp(0px, 5dvw, 50px);
    }

    .work_cont .text_area .text_1 {
        font-size: clamp(0px, 3.5dvw, 35px);
        padding-top: clamp(0px, 16.5dvw, 165px);
        margin-bottom: clamp(0px, 9dvw, 90px);
    }

    .work_cont .text_area .text_1::before {
        width: clamp(0px, 31.5dvw, 315px);
        bottom: -1.7em;
        left: clamp(0px, 1.5dvw, 15px);
        right: inherit;
    }

    .work_cont .text_area .text_2 {
        font-size: clamp(0px, 3.5dvw, 35px);
        letter-spacing: 0;
    }

    .work_cont .text_area .text_3 {
        font-size: clamp(0px, 3.5dvw, 35px);
        letter-spacing: 0;
        line-height: 1.7em;
        margin-bottom: 0;
        text-align: left;
    }

    .work_cont .text_area .text_4 {
        font-size: clamp(0px, 3.5dvw, 35px);
        letter-spacing: 0;
        line-height: 1.7em;
    }

    #work .licenses {
        margin-top: clamp(0px, 10dvw, 100px);
        margin-bottom: clamp(0px, 9.5dvw, 95px);
    }

    #work .licenses .cont_title {
        font-size: clamp(0px, 4dvw, 40px);
    }

    #work .licenses p {
        font-size: clamp(0px, 3.8dvw, 38px);
        letter-spacing: 0.1em;
    }
    
    #work .licenses p span {
        display: none;
    }
}


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

#interview::before {
    content: "";
    width: clamp(0px, 100vw, 1200px);
    aspect-ratio: 1200 / 100;
    background: url(../img/seikatsu/interview_bg.png) no-repeat center center / contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}

#interview .sec_title {
    width: clamp(0px, 16.3vw, 195px);
    margin-bottom: clamp(0px, 5.8vw, 70px);
}

@media (max-width: 599px) {
    #interview {
        padding: 0 0 clamp(0px, 10dvw, 100px);
    }

    #interview::before {
        width: 100%;
        aspect-ratio: 1000 / 130;
        background: url(../img/seikatsu/interview_bg_sp.png) no-repeat center center / contain;
    }

    #interview .sec_title {
        width: clamp(0px, 28dvw, 280px);
        margin-bottom: clamp(0px, 9dvw, 90px);
    }
}

.interview_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: 2px solid #ffc237;
}

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

.qa .area_q {
    padding: clamp(0px, 0.8vw, 10px);
    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);
}

.qa .area_q .icon {
    background-color: #87cdd4;
}

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

.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, 3.3vw, 40px);
}

.qa .area_q + .area_a::after {
    content: "";
    width: 97%;
    height: 2px;
    background-image: radial-gradient(circle, #ffc237 1px, transparent 1px);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 10px 2px;
    position: absolute;
    top: clamp(0px, 1.6vw, 19px);
    left: 0;
    right: 0;
    margin: auto;
}

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

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

.qa .area_a .text p.name {
    font-weight: 700;
    text-align: right;
    letter-spacing: 0.1em;
    margin-top: 0.5em;
}

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

    .qa {
        width: clamp(0px, 86dvw, 860px);
        border-width: clamp(0px, 0.3dvw, 3px);
    }

    .qa .area_q {
        padding: clamp(0px, 11dvw, 110px) clamp(0px, 8dvw, 80px);
    }

    .qa .icon {
        width: clamp(0px, 9dvw, 90px);
        font-size: clamp(0px, 5.5dvw, 55px);
        margin-right: 0;
        position: absolute;
        top: clamp(0px, 3dvw, 30px);
        left: clamp(-40px, -4dvw, 0px);
    }

    .qa .text {
        width: clamp(0px, 68dvw, 680px);
    }

    .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-top: clamp(0px, 4.5dvw, 45px);
        padding-bottom: clamp(0px, 6dvw, 60px);
    }

    .qa .area_q + .area_a::after {
        width: 100%;
        height: clamp(2px, 0.3dvw, 3px);
        background-image: radial-gradient(circle, #ffd682 clamp(1px, 0.15dvw, 1.5px), transparent clamp(1px, 0.15dvw, 1.5px));
        background-size: clamp(5px, 1dvw, 10px) clamp(2px, 0.3dvw, 3px);
        top: clamp(0px, 2.1dvw, 21px); 
    }

    .qa .area_a .block_a {
        padding: clamp(0px, 11dvw, 110px) clamp(0px, 8dvw, 80px) clamp(0px, 4dvw, 40px);
        position: relative;
    }

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

    .qa .area_a .text p.name {
        letter-spacing: 0;
        font-weight: normal;
        margin-top: 0;
    }
}


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

.acc_cont {
    display: none;
}

.acc_button::before{
    position: absolute;
    content: '';
    top: clamp(0px, 2.9vw, 35px);
    right: clamp(0px, 1.3vw, 15px);
    width: clamp(0px, 3.3vw, 40px);
    height: 3px;
    background-color:#ffc237;
    transform: rotate(90deg);
    transition: all .3s ease-in-out;
}

.acc_button::after{
    position: absolute;
    content: '';
    top: clamp(0px, 2.9vw, 35px);
    right: clamp(0px, 1.3vw, 15px);
    width: clamp(0px, 3.3vw, 40px);
    height: 3px;
    background-color:#ffc237;
    transition: all .3s ease-in-out;
}

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

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

@media (max-width: 599px) {
    .acc_button::before,
    .acc_button::after {
        top: clamp(0px, 5dvw, 50px);
        right: clamp(0px, 3dvw, 30px);
        width: clamp(0px, 5dvw, 50px);
        height: clamp(0px, 0.7dvw, 7px);
        border-radius: 7px;
    }
}


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

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

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

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


/* ===============================================
   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);
    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);
    }

    #insta a {
        gap: 0 clamp(0px, 3dvw, 30px);
    }

    #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);
    }
}