@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

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

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

:root {
    --color-main: #cd8154;
    
    --font-en: "Libre Baskerville", serif;
}

main {
    /*font-family: "Yu Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;*/
    font-family: "Noto Serif JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: normal;
    font-style: normal;
}


/* ===============================================
   bg
=============================================== */
.bg_grad {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.bg_grad::before,
.bg_grad::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(0px, 819.6vw, 9835px);
    background: url("../img/ongaku/bg.jpg") no-repeat top center / 100% 100%;
    z-index: -1;
}

.bg_grad::before {
    top: 0;
}

.bg_grad::after {
    top: calc(clamp(0px, 819.6vw, 9835px) - 1px);
    transform: scaleY(-1);
}

.main_bg_bottom {
    width: 100%;
    height: clamp(0px, 24.2vw, 290px);
    background: url("../img/ongaku/bg_bottom.svg") no-repeat bottom center;
    background-size: clamp(0px, 117.5vw, 1410px) clamp(0px, 24.2vw, 290px);
    position: absolute;
    bottom: clamp(0px, 17.9vw, 215px);
    left: 0;
    z-index: 0;
}

@media (max-width: 599px) {
    .bg_grad::before,
    .bg_grad::after {
        height: 1340dvw;
        background: url("../img/ongaku/bg_sp.jpg") no-repeat center center / cover;
    }

    .bg_grad::after {
        top: calc(1340dvw - 1px);
    }
    
    .main_bg_bottom {
        height: 43dvw;
        background-image: url("../img/ongaku/bg_bottom_sp.svg");
        background-size: cover;
        bottom: 22dvw;
    }
}


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


/* ===============================================
   button
=============================================== */
.button {
    width: clamp(0px, 25vw, 300px);
    aspect-ratio: 370 / 80;
    border-radius: 80px;
    border: 1px solid var(--color-main);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-main);
    background-color: transparent;
    font-size: clamp(0px, 1.33vw, 16px);
    letter-spacing: 0.05em;
    font-weight: 400;
    position: relative;
}

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

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

.button_2 {
    width: clamp(0px, 50vw, 600px);
    aspect-ratio: 600 / 100;
    font-size: clamp(0px, 1.5vw, 18px);
    letter-spacing: 0.1em;
    background-color: #fff;
}

.button_2::before {
    width: 9.3%;
    right: 4%;
}

@media (max-width: 599px) {
    .button {
        width: 73.5dvw;
        aspect-ratio: 735 / 160;
        border-radius: 160px;
        font-size: 3dvw;
    }
    
    .button_2 {
        width: 84dvw;
        aspect-ratio: 840 / 160;
        font-size: 3dvw;
        text-align: center;
        letter-spacing: 0;
    }

    .button_2::before {
        width: 10.7%;
    }
}


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

.sec_title_en {
    font-size: clamp(0px, 4.2vw, 50px);
    font-family: var(--font-en);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--color-main);
    margin-bottom: 0.4em;
}

.sec_title {
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
    padding-left: 0.1em;
    padding-bottom: 0.5em;
    margin-bottom: clamp(0px, 2.9vw, 35px);
    position: relative;
}

.sec_title::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--color-black);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@media (max-width: 599px) {
    .sec_title_en {
        font-size: 9dvw;
    }

    .sec_title {
        font-size: 4dvw;
        margin-bottom: 8dvw;
    }
}


/* ===============================================
   mv
=============================================== */
#mv {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mv .mv_text {
    width: 45vw;
    position: absolute;
    top: 8vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
}

#mv .mv_text img {
    width: 100%;
}

#mv .mv_img {
    width: 100%;
    aspect-ratio: 1920 / 1000;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#mv .mv_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

#mv .mv_title {
    width: calc(100% - 130px - 130px);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

#mv .mv_title h1 {
    width: clamp(0px, 19.6vw, 235px);
    aspect-ratio: 235 / 46;
    border-radius: 46px;
    font-size: clamp(0px, 2.5vw, 30px);
    line-height: 1;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
    background-color: var(--color-main);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: clamp(0px, 5.8vw, 70px);
    left: 0;
}

#mv .mv_title h1  span {
    width: 100vw;
    height: clamp(0px, 3.8vw, 45px);
    border-radius: 46px;
    font-size: clamp(0px, 1.7vw, 20px);
    line-height: 1;
    padding-right: 1.2em;
    letter-spacing: 0.1em;
    color: var(--color-main);
    background-color: #fff;
    border: 1px solid var(--color-main);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: clamp(-65px, -5.4vw, 0px);
    right: clamp(0px, 8.3vw, 100px);
}

@media (max-width: 1366px) {
    #mv .mv_text {
        width: clamp(0px, 55.8vw, 670px);
        top: clamp(0px, 13.8vw, 165px);
    }
    
    #mv .mv_img {
        aspect-ratio: inherit;
        height: clamp(0px, 66.7vw, 800px);
    }

    #mv .mv_title {
        width: clamp(0px, 91.7vw, 1100px);
    }
}

@media (max-width: 599px) {
    #mv .mv_text {
        width: 100%;
        top: 36.5dvw;
    }

    #mv .mv_img {
        height: 190dvw;
    }

    #mv .mv_title {
        width: 84dvw;
    }

    #mv .mv_title h1 {
        width: 50dvw;
        aspect-ratio: 500 / 100;
        border-radius: 100px;
        font-size: 6.4dvw;
        bottom: 56dvw;
    }

    #mv .mv_title h1  span {
        height: 10dvw;
        border-radius: 100px;
        font-size: 4.3dvw;
        top: -14dvw;
        right: 21dvw;
    }
}

.mv_shadow {
    width: 100%;
}

.mv_shadow img {
    width: 100%;
}

@media (max-width: 1366px) {
    .mv_shadow {
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    .mv_shadow img {
        width: clamp(0px, 113.83vw, 1366px);
        max-width: clamp(0px, 113.83vw, 1366px);
    }
}

@media (max-width: 599px) {
    .mv_shadow img {
        width: 100%;
        max-width: 100%;
    }
}


/* ===============================================
   box
=============================================== */
.box_bg {
    background: #FFF;
    background: linear-gradient(0deg,rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%);
    border-radius: clamp(0px, 4.2vw, 50px);
}

.box_bg .box_text_area {
    width: clamp(0px, 54.2vw, 650px);
    padding-top: clamp(0px, 5vw, 60px);
}

.box_bg .box_text_area .box_text {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 2.2em;
    font-weight: normal;
    text-align: center;
}

.box_bg .box_img_area {
    width: clamp(0px, 37.5vw, 450px);
    padding-top: clamp(0px, 6.7vw, 80px);
    position: relative;
}

.box_bg_bottom {
    background: #FFF;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 90%);
    border-radius: clamp(0px, 4.2vw, 50px);
}

.box_bg_top {
    background: #FFF;
    background: linear-gradient(0deg,rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%);
    border-radius: clamp(0px, 4.2vw, 50px);
}

@media (max-width: 599px) {
    .box_bg {
        border-radius: 5dvw;
        background-size: 100% 75dvw;
        background-repeat: no-repeat;
    }

    .box_bg .box_text_area {
        width: 90dvw;
        padding-top: 14.5dvw;
    }

    .box_bg .box_text_area .box_text {
        font-size: 3.8dvw;
        line-height: 2.1em;
        letter-spacing: 0;
    }

    .box_bg .box_img_area {
        width: 84dvw;
        padding-top: 9dvw;
    }

    .box_bg_bottom {
        background: linear-gradient(0deg,rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 90%);
        border-radius: 5dvw;
    }

    .box_bg_top {
        border-radius: 5dvw;
    }
}


/* ===============================================
   about
=============================================== */
#about {
    width: clamp(0px, 91.7vw, 1100px);
    padding-bottom: clamp(0px, 7.5vw, 90px);
    margin: 0 auto clamp(0px, 5vw, 60px);
    position: relative;
    display: flex;
    justify-content: space-between;
}

#about .box_img_area img {
    width: clamp(0px, 48.3vw, 580px);
    max-width: clamp(0px, 48.3vw, 580px);
    position: absolute;
    top: clamp(0px, 6.7vw, 80px);
    left: 0;
}

@media (max-width: 599px) {
    #about {
        width: 90dvw;
        padding-bottom: 20dvw;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
    }
    
    #about .box_text_area,
    #about .box_img_area {
        width: 84dvw;
    }

    #about .box_img_area img {
        width: 100%;
        max-width: 100%;
        position: relative;
        top: 0;
    }
}


/* ===============================================
   career
=============================================== */
#career {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 16.7vw, 200px);
    padding-bottom: clamp(0px, 12.5vw, 150px);
    position: relative;
}

#career .box_bg_bottom {
    width: 100%;
    height: clamp(0px, 184vw, 2207px);
    position: absolute;
    bottom: 0;
    left: 0;
}

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

.career_lead .box_img_area img {
    width: clamp(0px, 29.2vw, 350px);
}

.career_img_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 4.2vw, 50px);
    margin-bottom: clamp(0px, 12.1vw, 145px);
}

.career_img_list li {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.career_img_list li:nth-of-type(odd) {
    justify-content: flex-end;
}

.career_img_list li img {
    width: clamp(0px, 50vw, 600px);
}

.career_img_list li .text_area {
    position: absolute;
    padding-top: clamp(0px, 4.3vw, 52px);
    z-index: 2;
}

.career_img_list li:nth-of-type(even) .text_area {
    left: clamp(0px, 46.7vw, 560px);
}

.career_img_list li:nth-of-type(odd) .text_area {
    right: clamp(0px, 46.7vw, 560px);
}

.career_img_list li .career_nb {
    font-size: clamp(0px, 3.2vw, 38px);
    line-height: clamp(0px, 5.8vw, 70px);
    letter-spacing: 0;
    font-weight: bold;
    font-family: var(--font-en);
    color: var(--color-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    white-space: nowrap;
}

.career_img_list li .career_nb span {
    font-size: clamp(0px, 5.4vw, 65px);
    color: #fff;
    margin-left: 0.2em;
}

.career_img_list li .career_title {
    width: clamp(0px, 29.2vw, 350px);
    aspect-ratio: 350 / 60;
    border-radius: 60px;
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 500;
    letter-spacing: 0.1em;
    background-color: var(--color-main);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.career_img_list li .career_box {
    width: auto;
    /*width: clamp(0px, 32.5vw, 390px);*/
    padding: clamp(0px, 2.1vw, 25px);
    margin-left: clamp(0px, 1.7vw, 20px);
    position: relative;
    z-index: 1;
}

.career_img_list li .career_box::before {
    content: "";
    width: 100%;
    height: calc(100% + clamp(0px, 1.3vw, 15px));
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.career_img_list li .career_box p {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.9em;
    padding-left: 1.3em;
    position: relative;
}

.career_img_list li .career_box p::before {
    content: "";
    width: 1em;
    height: 1em;
    border: 5px solid var(--color-main);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0.45em;
    left: 0;
}

.career_img_list li .career_box p + p {
    margin-top: 0.5em;
}

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

    #career .box_bg_bottom {
        width: 90dvw;
        height: 840dvw;
        right: 0;
        margin: auto;
    }

    .career_lead {
        width: 90dvw;
        padding-bottom: 10dvw;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
    }

    .career_lead .box_text_area {
        width: 84dvw;
    }
    
    .career_lead .box_img_area {
        width: 47.6dvw;
    }
    
    .career_lead .box_img_area img {
        width: 100%;
    }

    .career_img_list {
        width: 100dvw;
        gap: 10dvw;
        margin-bottom: 19dvw;
    }

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

    .career_img_list li img {
        width: 100dvw;
    }

    .career_img_list li .text_area {
        width: 84dvw;
        position: relative;
        padding-top: 3dvw;
    }

    .career_img_list li:nth-of-type(even) .text_area {
        left: inherit;
    }

    .career_img_list li:nth-of-type(odd) .text_area {
        right: inherit;
    }

    .career_img_list li .career_nb {
        font-size: 7.5dvw;
        line-height: 7.5dvw;
        top: -13dvw;
    }

    .career_img_list li .career_nb span {
        font-size: 13dvw;
    }

    .career_img_list li .career_title {
        width: 70dvw;
        aspect-ratio: 700 / 120;
        border-radius: 120px;
        font-size: 4dvw;
        position: absolute;
        top: -6dvw;
        left: 0;
    }

    .career_img_list li .career_box {
        width: 100%;
        padding: 8dvw 8dvw 5dvw;
        margin-left: 0;
        background-color: #fff;
    }

    .career_img_list li .career_box::before {
        display: none;
    }

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

    .career_img_list li .career_box p::before {
        border-width: 0.9dvw;
        top: 0.4em;
    }
}


/* ===============================================
   message
=============================================== */
#message {
    width: clamp(0px, 66.7vw, 800px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.msg_lead {
    font-size: clamp(0px, 1.33vw, 16px);
    text-align: center;
    line-height: 2.3em;
    margin-bottom: clamp(0px, 5.4vw, 65px);
}

.msg_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 5.8vw, 70px) 0;
    margin-bottom: clamp(0px, 11.3vw, 135px);
}

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

.msg_list li:nth-of-type(even) {
    flex-direction: row-reverse;
}

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

.msg_list li .text_area {
    width: clamp(0px, 36.7vw, 440px);
    position: relative;
    z-index: 1;
}

.msg_list li .text_area .msg_bg {
    position: absolute;
    z-index: -1;
}

.msg_list li:nth-of-type(1) .text_area .msg_bg {
    width: clamp(0px, 15vw, 180px);
    top: 0;
    right: clamp(-40px, -3.3vw, 0px);
}

.msg_list li:nth-of-type(2) .text_area .msg_bg {
    width: clamp(0px, 14.2vw, 170px);
    top: clamp(-25px, -2.1vw, 0px);
    right: clamp(0px, 0.8vw, 10px);
}

.msg_list li:nth-of-type(3) .text_area .msg_bg {
    width: clamp(0px, 15.8vw, 190px);
    top: clamp(-40px, -3.3vw, 0px);
    right: clamp(-75px, -6.3vw, 0px);
}

.msg_list li .text_area .text_1 {
    font-size: clamp(0px, 1.9vw, 23px);
    letter-spacing: 0.1em;
    line-height: 1.5em;
    font-weight: 500;
    color: var(--color-main);
    margin-bottom: 1.2em;
}

.msg_list li .text_area .text_name {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 1.7vw, 20px) 0;
    margin-bottom: clamp(0px, 1.7vw, 20px);
}

.msg_list li .text_area .text_2 {
    font-size: clamp(0px, 1.9vw, 23px);
    letter-spacing: 0.05em;
    line-height: 1;
}

.msg_list li .text_area .text_2 span {
    font-size: 0.7em;
}

.msg_list li .text_area .text_3 {
    font-size: clamp(0px, 1.2vw, 14px);
    letter-spacing: 0.05em;
    line-height: 1;
    margin-left: auto;
}

.msg_list li .text_area .text_3.long {
    font-size: clamp(0px, 1.1vw, 13px);
    white-space: nowrap;
}

.msg_list li .text_area .text_4 {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.7em;
    letter-spacing: 0;
}

@media (max-width: 599px) {
    #message {
        width: 84dvw;
    }

    .msg_lead {
        font-size: 3.8dvw;
        line-height: 2.1em;
        margin-bottom: 9dvw;
    }

    .msg_list {
        width: 80dvw;
        gap: 8dvw 0;
        margin-bottom: 8.5dvw;
    }

    .msg_list li,
    .msg_list li:nth-of-type(even) {
        flex-direction: column;
        align-items: center;
    }
    
    .msg_list li .img_area {
        width: 50dvw;
    }

    .msg_list li .text_area {
        width: 100%;
        padding-top: 6dvw;
    }

    .msg_list li:nth-of-type(1) .text_area .msg_bg {
        width: 29dvw;
        top: 12dvw;
        right: -1dvw;
    }

    .msg_list li:nth-of-type(2) .text_area .msg_bg {
        width: 27dvw;
        top: 1dvw;
        right: 0;
    }

    .msg_list li:nth-of-type(3) .text_area .msg_bg {
        width: 30.5dvw;
        top: 1dvw;
        right: -2dvw;
    }

    .msg_list li .text_area .text_1 {
        font-size: 4.6dvw;
    }

    .msg_list li .text_area .text_name {
        gap: 2.5dvw 0;
        margin-bottom: 3dvw;
    }

    .msg_list li .text_area .text_2 {
        font-size: 4.6dvw;
    }

    .msg_list li .text_area .text_3 {
        width: 100%;
        font-size: 3.2dvw;
        letter-spacing: 0;
        text-align: right;
        margin-top: 0.5em;
    }

    .msg_list li .text_area .text_3.long {
        font-size: 2.65dvw;
    }

    .msg_list li .text_area .text_4 {
        font-size: 3.5dvw;
    }
}


/* ===============================================
   learning
=============================================== */
#learning {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 15.8vw, 190px);
    padding-top: clamp(0px, 5vw, 60px);
    position: relative;
    z-index: 1;
}

#learning .box_bg_top {
    width: 100%;
    height: clamp(0px, 20.8vw, 250px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#learning .sec_title {
    margin-bottom: clamp(0px, 5.8vw, 70px);
}

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

.learning_list li {
    width: clamp(0px, 43.8vw, 525px);
    text-align: center;
}

.learning_list li .nb {
    width: 100%;
    font-size: clamp(0px, 5.4vw, 65px);
    font-family: var(--font-en);
    line-height: 1;
    color: var(--color-main);
    margin-bottom: clamp(0px, 1.7vw, 20px);
    position: relative;
}

.learning_list li .nb::before,
.learning_list li .nb::after {
    content: "";
    width: calc((100% - clamp(0px, 5.4vw, 65px)) / 2);
    height: 1px;
    background-color:  var(--color-main);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.learning_list li .nb::before { left: 0; }
.learning_list li .nb::after { right: 0; }

.learning_list li .no_nb::before {
    width: 100%;
}
.learning_list li .no_nb::after {
    display: none;
}

.learning_list li .text_1 {
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    color: var(--color-main);
    margin-bottom: 1.2em;
}

.learning_list li .text_2 {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.7em;
    margin-top: 1.7em;
}

.youtube_wrap {
    width: 100%;
}

.youtube_wrap iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
}

@media (max-width: 599px) {
    #learning {
        width: 90dvw;
        margin: 0 auto 20dvw;
        padding-top: 14.5dvw;
    }

    #learning .box_bg_top {
        height: 39dvw;
    }

    #learning .sec_title {
        margin-bottom: 7dvw;
    }

    .learning_list {
        gap: 7dvw 0;
    }

    .learning_list li {
        width: 43.5dvw;
    }
    
    .learning_list li:nth-of-type(5) {
        width: 100%;
        padding: 0 23.25dvw;
    }
    
    .learning_list li:nth-of-type(6) {
        width: 100%;
        padding: 0 15dvw;
    }

    .learning_list li .nb {
        font-size: 10.4dvw;
        margin-bottom: 2.5dvw;
    }

    .learning_list li .nb::before,
    .learning_list li .nb::after {
        width: calc((100% - 10.4dvw) / 2);
    }
    
    .learning_list li .no_nb {
        margin-bottom: 0;
    }
    
    .learning_list li .no_nb::before {
        width: 43.5dvw;
        right: 0;
    }

    .learning_list li .text_1 {
        font-size: 4dvw;
        letter-spacing: 0;
        white-space: nowrap;
        margin-bottom: 0.8em;
    }

    .learning_list li .text_2 {
        font-size: 3.5dvw;
        line-height: 1.6em;
        text-align: left;
        margin-top: 0.7em;
    }
}


/* ===============================================
   voice
=============================================== */
#voice {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 8.3vw, 100px);
    padding: clamp(0px, 5vw, 60px) 0 clamp(0px, 7.5vw, 90px);
    border-radius: clamp(0px, 4.2vw, 50px);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.voice_qa {
    width: clamp(0px, 75vw, 900px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 6.7vw, 80px) 0;
}

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

.qa + .qa::before {
    content: "";
    width: clamp(0px, 8.3vw, 100px);
    height: 1px;
    background-color: var(--color-black);
    position: absolute;
    top: clamp(-40px, -3.3vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.area_q {
    width: 100%;
    padding: clamp(0px, 2.1vw, 25px) clamp(0px, 7.9vw, 95px) clamp(0px, 2.1vw, 25px) clamp(0px, 8.8vw, 105px);
    position: relative;
}

.area_q .icon {
    width: clamp(0px, 8.3vw, 100px);
    aspect-ratio: 100 / 75;
    background: url("../img/ongaku/q_nb_bg.svg") no-repeat center center / contain;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: clamp(-14px, -1.2vw, 0px);
    font-size: clamp(0px, 2.1vw, 25px);
    font-family: var(--font-en);
    line-height: 1;
    color: var(--color-main);
    padding-top: 0.3em;
}

.area_q .icon .nb {
    font-size: 1.8em;
    padding-bottom: 0.1em;
    font-weight: normal;
}

.area_q .text p {
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.7em;
}

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

.area_a .block_a {
    padding: 0 clamp(0px, 7.9vw, 95px) 0 clamp(0px, 8.8vw, 105px);
    position: relative;
}

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

.area_a .block_a .icon {
    width: clamp(0px, 8.3vw, 100px);
    aspect-ratio: 100 / 75;
    background: url("../img/ongaku/a_a_bg.svg") no-repeat center center / contain;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: clamp(-14px, -1.2vw, 0px);
}

.area_a .block_a:nth-of-type(even) .icon {
    background: url("../img/ongaku/a_b_bg.svg") no-repeat center center / contain;
}

.area_a .block_a .icon p {
    font-size: clamp(0px, 2.1vw, 25px);
    text-align: center;
    line-height: 1;
    color: #e584b3;
}

.area_a .block_a:nth-of-type(even) .icon p {
    color: #84cccc;
}

.area_a .block_a .icon span {
    font-size: 0.7em;
    display: block;
    margin-top: 0.1em;
}

.area_a .block_a .text {
    width: 100%;
    position: relative;
}

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

.area_a .block_a .text::before {
    content: "";
    width: clamp(0px, 0.8vw, 10px);
    height: clamp(0px, 0.8vw, 10px);
    background-color: #e584b3;
    border-radius: 50%;
    position: absolute;
    top: clamp(-3px, -0.3vw, 0px);
    left: clamp(-15px, -1.3vw, 0px);
}

.area_a .block_a:nth-of-type(even) .text::before {
    background-color: #84cccc;
}

@media (max-width: 599px) {
    #voice {
        width: 90dvw;
        margin: 0 auto 10dvw;
        padding: 14dvw 0 9.5dvw;
        border-radius: 5dvw;
    }

    .voice_qa {
        width: 84dvw;
        gap: 19dvw 0;
    }

    .qa + .qa::before {
        width: 15dvw;
        top: -9dvw;
    }

    .area_q {
        width: 100%;
        padding: 0 8dvw 0 18dvw;
    }

    .area_q .icon {
        width: 15.5dvw;
        left: 0;
        font-size: 4dvw;
    }

    .area_q .text p {
        font-size: 4.2dvw;
        line-height: 1.5em;
    }

    .area_a {
        padding-top: 7dvw;
    }

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

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

    .area_a .block_a .icon {
        width: 20dvw;
        top: -3dvw;
        right: -2dvw;
    }

    .area_a .block_a .icon p {
        font-size: 5dvw;
    }

    .area_a .block_a .text {
        width: 100%;
        position: relative;
    }

    .area_a .block_a .text p {
        font-size: 3.5dvw;
    }

    .area_a .block_a .text::before {
        width: 2dvw;
        height: 2dvw;
        top: -2dvw;
        left: -1dvw;
    }
}


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

.acc_cont {
    display: none;
}

.acc_icon {
    position: absolute;
    width: clamp(0px, 4.7vw, 56px);
    aspect-ratio: 1 / 1;
    top: clamp(0px, 0.8vw, 10px);
    right: clamp(0px, 0.8vw, 10px);
}

.acc_icon::before{
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url("../img/ongaku/qa_arrow.svg") no-repeat center center / contain;
    transform: rotate(0deg);
    transition: all .3s ease-in-out;
}

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

@media (max-width: 599px) {
    .acc_icon {
        width: 10dvw;
        top: 0.5dvw;
        right: -2dvw;
    }
}


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

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


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

#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;
    padding-right: clamp(0px, 0.8vw, 10px)
}

#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;
    padding-left: clamp(0px, 0.8vw, 10px);
}

@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);
        padding-right: clamp(0px, 1dvw, 10px)
    }

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

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