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

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

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

:root {
    --color-main: #ec6d6d;
    
    --font-en: "Libre Caslon Text", serif;
}

main {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    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;
}


/* ===============================================
   bg
=============================================== */
.bg_main {
    background: url("../img/syokuhin/bg.png") no-repeat top center;
    background-size: clamp(0px, 185.8vw, 2230px) auto;
}

.bg_bottom {
    background-image: url("../img/syokuhin/bg_bottom.png");
    background-repeat: no-repeat;
    background-position: bottom 45px center;
    background-size: clamp(0px, 185.8vw, 2230px) auto;
}

@media (max-width: 599px) {
    .bg_main {
        background: url("../img/syokuhin/bg_sp.png") no-repeat top center;
        background-size: 100% auto;
    }

    .bg_bottom {
        background-image: url("../img/syokuhin/bg_bottom_sp.png");
        background-position: bottom 40px center;
        background-size: 100% auto;
    }
}


/* ===============================================
   button
=============================================== */
.button {
    width: clamp(0px, 33.3vw, 400px);
    aspect-ratio: 400 / 60;
    border-radius: 60px;
    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);
    font-weight: 500;
    position: relative;
}

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

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

.button_2 {
    width: clamp(0px, 46.7vw, 560px);
    aspect-ratio: 560 / 84;
    font-size: clamp(0px, 1.5vw, 18px);
}

@media (max-width: 599px) {
    .button {
        width: 80dvw;
        aspect-ratio: 800 / 160;
        border-radius: 160px;
        font-size: 3.5dvw;
    }
    
    .button_2 {
        width: 80dvw;
        aspect-ratio: 800 / 200;
        border-radius: 8.2dvw;
        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_wrap2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sec_title_en {
    font-size: clamp(0px, 2.1vw, 25px);
    font-family: var(--font-en);
    line-height: 1;
    margin-bottom: 0.8em;
    background: linear-gradient(90deg,rgba(244, 180, 201, 1) 0%, rgba(251, 216, 171, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    display: inline-block;
}

.sec_title {
    font-size: clamp(0px, 3.3vw, 40px);
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--color-main);
    margin-bottom: clamp(0px, 2.9vw, 35px);
}

.sec_lead {
    font-size: clamp(0px, 1.8vw, 22px);
    letter-spacing: 0.2em;
    line-height: 1;
    text-align: center;
    padding-left: 0.2em;
    margin-bottom: clamp(0px, 3.8vw, 45px);
}

.cont_title {
    font-size: clamp(0px, 2.5vw, 30px);
    letter-spacing: 0.1em;
    line-height: 1;
    padding-left: 0.1em;
    text-align: center;
    margin-bottom: 1.8em;
}

@media (max-width: 599px) {
    .sec_title_wrap2 {
        align-items: center;
    }

    .sec_title_en {
        font-size: 4dvw;
        margin-bottom: 0.5em;
    }

    .sec_title {
        font-size: 7dvw;
        line-height: 1.4em;
        text-align: center;
        margin-bottom: 2dvw;
    }
    
    .sec_title_wrap2 .sec_title {
        margin-bottom: 4dvw;
    }

    .sec_lead {
        width: 90%;
        font-size: 3.5dvw;
        line-height: 1.7em;
        letter-spacing: 0;
        padding-left: 0;
        margin: 0 auto 7dvw;
    }

    .cont_title {
        font-size: 5dvw;
    }
}


/* ===============================================
   mv
=============================================== */
#mv {
    width: 100%;
    height: clamp(0px, 75vw, 900px);
    position: relative;
    background: url("../img/syokuhin/mv_bg.jpg") no-repeat top center / cover;
}

.mv_img {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto;
    padding-top: clamp(0px, 14.6vw, 175px);
    position: relative;
    z-index: 1;
}

.mv_img::before {
    content: "";
    width: 50vw;
    height: clamp(0px, 25vw, 300px);
    position: absolute;
    bottom: 0;
    right: clamp(0px, 57.5vw, 690px);
    background: #F4B4C9;
    background: linear-gradient(35deg,rgba(244, 180, 201, 1) 0%, rgba(255, 245, 113, 1) 100%);
    z-index: -1;
}

.mv_img img {
    width: clamp(0px, 48.3vw, 580px);
}

.mv_title {
    width: clamp(0px, 91.7vw, 1100px);
    margin: clamp(0px, 4.2vw, 50px) auto 0;
    position: relative;
    z-index: 2;
}

.mv_title::before {
    content: "";
    width: 50vw;
    height: clamp(0px, 1.3vw, 15px);
    position: absolute;
    bottom: clamp(-25px, -2.1vw, 0px);
    right: clamp(0px, 57.5vw, 690px);
    background: #F4B4C9;
    background: linear-gradient(35deg,rgba(244, 180, 201, 1) 0%, rgba(255, 245, 113, 1) 100%);
    z-index: -1;
}

.mv_title h1 {
    width: clamp(0px, 34.2vw, 410px);
    font-size: clamp(0px, 2.8vw, 33px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #fff571;
    text-align: right;
    text-shadow: #000 0 0 clamp(0px, 1.3vw, 15px);
}

.mv_title h1  span {
    font-size: clamp(0px, 1.7vw, 20px);
    line-height: 1;
    padding-right: 1em;
    letter-spacing: 0.1em;
}

@media (max-width: 599px) {
    #mv {
        height: 200dvw;
        background-image: url("../img/syokuhin/mv_bg_sp.jpg");
    }

    .mv_img {
        width: 90%;
        padding-top: 27.5dvw;
        text-align: right;
    }

    .mv_img::before {
        width: 69.5dvw;
        height: 45dvw;
        right: inherit;
        left: -5dvw;
        background: linear-gradient(35deg,rgba(247, 197, 191, 1) 0%, rgba(255, 245, 113, 1) 100%);
    }

    .mv_img img {
        width: 87dvw;
    }

    .mv_title {
        width: 84dvw;
        margin: 4.5dvw auto 0;
    }

    .mv_title::before {
        display: none;
    }

    .mv_title h1 {
        width: clamp(0px, 34.2vw, 410px);
        font-size: 5dvw;
        text-align: left;
        text-shadow: #000 0 0 2dvw;
    }

    .mv_title h1  span {
        font-size: 3dvw;
        padding-right: 0;
        padding-bottom: 0.8em;
        display: block;
    }
}


/* ===============================================
   about
=============================================== */
#about {
    width: clamp(0px, 100vw, 1366px);
    margin: 0 auto;
    padding-top: clamp(0px, 8.3vw, 100px);
    padding-bottom: clamp(0px, 14.6vw, 175px);
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.about_img {
    width: clamp(0px, 33%, 450px);
}

.about_main {
    width: clamp(0px, 61%, 830px);
}

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

@media (max-width: 599px) {
    #about {
        padding-top: 21dvw;
        padding-bottom: 19.5dvw;
        flex-direction: column;
        gap: 9.5dvw;
    }

    .about_img {
        width: 45dvw;
    }

    .about_main {
        width: 90%;
    }

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


/* ===============================================
   career
=============================================== */
#career {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto;
    padding: 0 0 clamp(0px, 17.5vw, 210px);
    position: relative;
}

.career_main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(0px, 1.7vw, 20px) 0;
    margin-bottom: clamp(0px, 10.8vw, 130px);
}

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

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

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

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

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

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

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

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

.career_item > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(247, 200, 214, 1) 0%, rgba(255, 247, 153, 1) 100%);
    color: #145176;
    text-align: center;
    backface-visibility: hidden;
}

.item_wrap:nth-of-type(2n) .career_item > div {
    background: linear-gradient(45deg, rgba(187, 220, 244, 1) 0%, rgba(255, 247, 153, 1) 100%);
}

.front {
    padding: clamp(0px, 0.8vw, 10px) clamp(0px, 0.8vw, 10px) 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
    padding: clamp(0px, 0.8vw, 10px);
}

.back .text_box {
    width: 100%;
    height: 100%;
    padding: clamp(0px, 1.5vw, 18px) 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back .text_box p {
    font-size: clamp(0px, 1.5vw, 18px);
    line-height: 1.9em;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-black);
}
    
.front .career_img {
    width: 100%;
    aspect-ratio: 335 / 255;
    overflow: hidden;
}

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

.front .career_text {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.front .text_1 {
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5em;
}

.front .text_2 {
    font-size: clamp(0px, 1.5vw, 18px);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.7em;
}

.item_wrap:nth-of-type(2n) .text_2 {
    letter-spacing: 0;
}

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

    .career_main {
        flex-direction: column;
        gap: 2.5dvw 0;
        margin-bottom: 30dvw;
    }
    
    .item_wrap {
        width: 100%;
    }

    .career_item {
        width: 100%;
        aspect-ratio: 900 / 585;
    }

    .front {
        padding: 2dvw 0 2dvw 2dvw;
        flex-direction: row;
    }

    .back {
        padding: 2dvw;
    }

    .back .text_box {
        padding: 5dvw 0;
    }

    .back .text_box p {
        font-size: 4dvw;
        line-height: 1.7em;
        letter-spacing: 0;
    }
    
    .front .career_img {
        width: 46dvw;
        height: 100%;
    }

    .front .career_text {
        width: 100%;
    }

    .front .text_1 {
        font-size: 4dvw;
    }

    .front .text_2 {
        font-size: 3.6dvw;
        letter-spacing: 0;
    }
}


/* ===============================================
   message
=============================================== */
#message {
    width: clamp(0px, 75vw, 900px);
    padding: 0 0 clamp(0px, 10vw, 120px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

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

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

.msg_item:nth-of-type(2n) {
    flex-direction: row-reverse;
}

.msg_item .img_area {
    width: clamp(0px, 33.3vw, 400px);
    aspect-ratio: 1 / 1;
}

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

.msg_item .text_area {
    width: clamp(0px, 38.3vw, 460px);
    padding-top: clamp(0px, 2.5vw, 30px);
}

.msg_item .text_area .msg_title {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 0.4vw, 5px);
    margin-bottom: clamp(0px, 3.8vw, 45px);
}

.msg_item .msg_title .text_1 {
    width: 100%;
    height: clamp(0px, 3.3vw, 40px);
    position: relative;
}

.msg_item .msg_title .text_1 p {
    width: 100%;
    height: 100%;
    font-size: clamp(0px, 1.7vw, 20px);
    font-style: italic;
    letter-spacing: 0.1em;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    background: #F4B4C9;
    background: linear-gradient(90deg,rgba(244, 180, 201, 1) 24%, rgba(255, 245, 113, 1) 100%);
    display: flex;
    align-items: center;
    padding-left: 1em;
    position: absolute;
    top: 0;
}

.msg_item:nth-of-type(odd) .msg_title .text_1:first-of-type p {
    left: clamp(-60px, -5vw, 0px);
}

.msg_item:nth-of-type(even) .msg_title .text_1:nth-of-type(2) p {
    right: clamp(-60px, -5vw, 0px);
}

.msg_item .text_area .text_name {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: clamp(0px, 1.7vw, 20px);
}

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

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

.msg_item .text_area .text_3 {
    font-size: clamp(0px, 1.33vw, 16px);
    letter-spacing: 0.05em;
    line-height: 1;
}

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

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

    .message_main {
        gap: 9dvw 0;
        margin-bottom: 9dvw;
    }

    .msg_item,
    .msg_item:nth-of-type(2n) {
        flex-direction: column;
        align-items: center;
    }

    .msg_item .img_area {
        width: 80dvw;
        aspect-ratio: 800 / 600;
        overflow: hidden;
    }

    .msg_item .text_area {
        width: 100%;
        padding-top: 0;
    }

    .msg_item .text_area .msg_title {
        gap: 1dvw;
        margin-bottom: 4dvw;
    }

    .msg_item .msg_title .text_1 {
        height: 9dvw;
    }

    .msg_item .msg_title .text_1 p {
        font-size: 4.5dvw;
    }

    .msg_item .msg_title .text_1:first-of-type p,
    .msg_item:nth-of-type(odd) .msg_title .text_1:first-of-type p {
        left: -5dvw;
    }

    .msg_item .msg_title .text_1:nth-of-type(2) p,
    .msg_item:nth-of-type(even) .msg_title .text_1:nth-of-type(2) p {
        right: -12dvw;
    }

    .msg_item .text_area .text_name {
        width: 92%;
        flex-direction: column;
        margin: 0 auto 3dvw;
    }

    .msg_item .text_area .text_2 {
        width: 100%;
        font-size: 4.6dvw;
        letter-spacing: 0.05em;
        line-height: 1;
        margin-bottom: 1.8dvw;
    }

    .msg_item .text_area .text_3 {
        width: 100%;
        font-size: 3.2dvw;
        text-align: right;
    }

    .msg_item .text_area .text_4 {
        width: 92%;
        font-size: 3.5dvw;
        margin: 0 auto;
    }
}

/* ===============================================
   license
=============================================== */
#license {
    width: clamp(0px, 75vw, 900px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.license_text {
    display: flex;
    align-items: flex-end;
    gap: 0 clamp(0px, 0.8vw, 10px);
    margin-bottom: clamp(0px, 5.8vw, 70px);
}

.license_text .license_box {
    height: clamp(0px, 5vw, 60px);
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: #F4B4C9;
    background: linear-gradient(45deg,rgba(246, 191, 187, 1) 0%, rgba(255, 245, 113, 1) 100%);
    display: flex;
    align-items: center;
}

.license_text .license_box:nth-of-type(1) { padding: 0 2.7em; }
.license_text .license_box:nth-of-type(2) { padding: 0 1.6em; }
.license_text .license_box:nth-of-type(3) { padding: 0 2.2em; }

.license_text p {
    font-size: clamp(0px, 1.7vw, 20px);
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

@media (max-width: 599px) {
    #license {
        width: 90%;
    }

    .license_text {
        width: 67.5dvw;
        flex-direction: column;
        gap: 1.5dvw;
        margin-bottom: 10dvw;
    }

    .license_text .license_box {
        width: 100%;
        height: 12dvw;
        font-size: 4dvw;
        justify-content: center;
    }

    .license_text .license_box:nth-of-type(1),
    .license_text .license_box:nth-of-type(2),
    .license_text .license_box:nth-of-type(3) {
        padding: 0;
    }

    .license_text p {
        font-size: 4dvw;
        position: absolute;
        right: -1em;
        top: 48dvw;
    }
}


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

.point_main {
    width: clamp(0px, 91.7vw, 1100px);
    padding: clamp(0px, 4.2vw, 50px);
    background: #BBDCF4;
    background: linear-gradient(45deg,rgba(187, 220, 244, 1) 0%, rgba(255, 247, 153, 1) 100%);
}

.point_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 0.8vw, 10px) 0;
}

.point_list li {
    width: 100%;
    height: clamp(0px, 12.1vw, 145px);
    display: flex;
    justify-content: space-between;
    gap: 0 clamp(0px, 0.4vw, 5px);
    white-space: nowrap;
}

.point_list li .point_title {
    width: clamp(0px, 42.9vw, 515px);
    background-color: #fff;
    font-size: clamp(0px, 1.8vw, 22px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.point_list li .point_title span {
    width: clamp(0px, 11.7vw, 140px);
    font-size: clamp(0px, 13.3vw, 160px);
    line-height: 1;
    text-align: center;
    font-family: var(--font-en);
    background: #C3DFEE;
    background: linear-gradient(38deg,rgba(195, 223, 238, 1) 0%, rgba(211, 230, 221, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    bottom: -0.1em;
}

.point_list li .point_text {
    width: 100%;
    flex: 1;
    background-color: #fff;
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.7em;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    padding-left: clamp(0px, 2.9vw, 35px);
}

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

    .point_main {
        width: 100%;
        padding: 5dvw;
    }

    .point_list {
        gap: 3dvw;
    }

    .point_list li {
        height: auto;
        flex-direction: column;
        gap: 1dvw;
    }

    .point_list li .point_title {
        width: 100%;
        height: 25dvw;
        font-size: 5dvw;
        justify-content: center;
        position: relative;
        z-index: 2;
    }

    .point_list li .point_title span {
        width: 25dvw;
        font-size: 27dvw;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: -0.15em;
        z-index: -1;
    }

    .point_list li .point_text {
        width: 100%;
        height: 25dvw;
        flex: auto;
        justify-content: center;
        font-size: 3.7dvw;
        line-height: 1.8em;
        padding-left: 0;
        text-align: center;
    }
}


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

.curriculum_list {
    width: clamp(0px, 91.7vw, 1100px);
    display: flex;
    justify-content: center;
    margin-bottom: clamp(0px, 7.5vw, 90px);
}

.curriculum_list li {
    width: 33.3333%;
    width: calc(100% / 3);
}

.curriculum_list .img_area {
    width: 100%;
    aspect-ratio: 365 / 350;
    overflow: hidden;
    background: #F3B3C9;
    background: linear-gradient(45deg,rgba(243, 179, 201, 1) 25%, rgba(255, 244, 113, 1) 100%);
    margin-bottom: clamp(0px, 1.9vw, 23px);
    padding: 2px;
}

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

.curriculum_list .text_1 {
    width: 84%;
    font-size: clamp(0px, 1.8vw, 22px);
    line-height: 1.5em;
    text-align: center;
    color: var(--color-main);
    margin: 0 auto 0.5em;
}

.curriculum_list .text_2 {
    width: 84%;
    margin: 0 auto;
    font-size: clamp(0px, 1.33vw, 16px);
    line-height: 1.7em;
}

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

    .curriculum_list {
        width: 84dvw;
        margin-bottom: 13dvw;
        flex-direction: column;
        gap: 10dvw 0;
    }
    
    .curriculum_list li {
        width: 100%;
    }

    .curriculum_list .img_area {
        aspect-ratio: 840 / 500;
        margin-bottom: 5dvw;
        padding: 0.4dvw;
    }
    
    .curriculum_list .text_1 {
        width: 74dvw;
        font-size: 5dvw;
    }

    .curriculum_list .text_2 {
        width: 74dvw;
        font-size: 3.5dvw;
    }
}


/* ===============================================
   voice
=============================================== */
#voice {
    width: clamp(0px, 91.7vw, 1100px);
    margin: 0 auto clamp(0px, 11.3vw, 135px);
    padding: 2px;
    background: #F7C8D6;
    background: linear-gradient(90deg,rgba(247, 200, 214, 1) 25%, rgba(255, 247, 153, 1) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    border-radius: clamp(0px, 4.2vw, 50px);
    overflow: hidden;
}

#voice .voice_inner {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: clamp(0px, 4.2vw, 50px);
    overflow: hidden;
    padding: clamp(0px, 7.5vw, 90px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

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

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

    #voice .voice_inner {
        border-radius: 5dvw;
        padding: 9.5dvw 0;
    }

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

.voice_qa {
    width: clamp(0px, 75vw, 900px);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 10vw, 120px) 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(-60px, -5vw, 0px);
    left: 0;
    right: 0;
    margin: auto;
}

.area_q {
    width: 100%;
    padding: clamp(0px, 1.8vw, 22px) clamp(0px, 7.9vw, 95px) clamp(0px, 1.8vw, 22px) clamp(0px, 9.6vw, 115px);
    position: relative;
}

.area_q .icon {
    width: clamp(0px, 5.8vw, 70px);
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-main);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    font-size: clamp(0px, 1.7vw, 20px);
    font-family: var(--font-en);
    line-height: 1;
    color: var(--color-main);
    padding-top: 0.4em;
}

.area_q .icon .nb {
    font-size: 2em;
    padding-bottom: 0.2em;
    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, 9.6vw, 115px);
    position: relative;
}

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

.area_a .block_a .icon {
    width: clamp(0px, 5.8vw, 70px);
    aspect-ratio: 1 / 1;
    background-color: #f4b4c9;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
}

.area_a .block_a:nth-of-type(even) .icon {
    background-color: #aed6f2;
}

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

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

.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.3vw, 3px);
    height: 90%;
    background-color: #f4b4c9;
    border-radius: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(-20px, -1.7vw, 0px);
    margin: auto;
}

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

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

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

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

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

    .area_q .text p {
        font-size: 4dvw;
        line-height: 1.7em;
    }

    .area_a {
        padding-top: 7dvw;
    }

    .area_a .block_a {
        padding: 0 19dvw 0 5dvw;
    }

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

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

    .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: 0.6dvw;
        height: 94%;
        left: -5dvw;
    }
}


/*----------------------------
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/syokuhin/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, 25vw, 300px);
    border-bottom: 1px solid var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: clamp(0px, 2.5vw, 30px) clamp(0px, 5vw, 60px);
}

#insta .insta_blk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0px, 1.3vw, 15px) 0;
}

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

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

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

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

#insta .button {
    max-width: 80%;
}

@media (max-width: 599px) {
    #insta {
        height: auto;
        padding: 3dvw 0 15dvw;
        gap: 6dvw 0;
        flex-direction: column;
        align-items: center;
    }
    
    #insta .insta_blk {
        gap: 2.5dvw 0;
    }

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

    #insta .text_1 {
        font-size: 4dvw;
    }

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

    #insta .text_2 {
        font-size: 3.5dvw;
    }

    #insta .button {
        max-width: 70%;
        font-size: 3dvw;
        aspect-ratio: 800 / 130;
    }
}