@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Noto+Sans+JP:wght@100..900&family=Yeseva+One&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zeyada&display=swap");

html {
    font-size: 62.5%;
}

body {
    font-family: "Yeseva One", "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
}

.sp {
    display: none;
}
.pc-view {
    display: inline !important;
}
.sp-view {
    display: none !important;
}
img {
    width: 100%;

    vertical-align: bottom;
}
@media print, screen and (max-width: 768px) {
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    .pc-view {
        display: none !important;
    }
    .sp-view {
        display: inline !important;
    }
}

#main-body {
    overflow: hidden;
}

/* ==============================
  アニメーション
============================== *//* --- アニメーションの共通基盤 --- */
.js-anim {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s ease,
    clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);

    will-change: transform, opacity;
}

/* ==============================================
   1. フェードイン系（下・左・右）
============================================== */

/* --- 下から (Fade Up) --- */
.fadeUp {
    transform: translate( 0, 40px);

    opacity: 0;
}
.fadeUp.is-active {
    transform: translate(0, 0);

    opacity: 1;
}

/* --- 左から (Fade Left) --- */
.fadeLeft {
    transform: translate(-40px, 0);

    opacity: 0;
}
.fadeLeft.is-active {
    transform: translate(0, 0);

    opacity: 1;
}

/* --- 右から (Fade Right) --- */
.fadeRight {
    transform: translate(40px, 0);

    opacity: 0;
}
.fadeRight.is-active {
    transform: translate(0, 0);

    opacity: 1;
}


/* ==============================================
   2. Zoom In（拡大しながら表示）
============================================== */
.zoomIn {
    transform: scale(0.8);

    opacity: 0;
}
.zoomIn.is-active {
    transform: scale(1);

    opacity: 1;
}
.zoomInImg img {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s ease,
    clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
    transform: scale(0.8);

    opacity: 0;

    will-change: transform, opacity;
}
.zoomInImg.is-active img {
    transform: scale(1);

    opacity: 1;
}


/* ==============================================
   3. 画像のワイプ表示（左からカーテンを開けるように）
============================================== */
.imgReveal {
    opacity: 1; /* clip-pathで消すのでopacityは1でOK */
    /* 初期状態：右側から100%切り取られている（見えない） */

    clip-path: inset(0 100% 0 0);
}
.imgReveal.is-active {
    /* 切り取りなし（全表示） */
    clip-path: inset(0 0 0 0);
}

/* ==============================================
   4. 背景ラインマーカーのアニメーション
   （文字は消さずに、背景画像だけ左から伸ばす）
============================================== */
.bgLineReveal {
/* 3. アニメーション設定 */
    transition: background-size 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* 1. 基本設定 */

    background-repeat: no-repeat;
    background-position: left bottom !important; /* 左下を基準に伸ばす */

/* 2. 初期状態：幅を0にする */
    background-size: 0% auto !important;
}

.bgLineReveal.is-active {
    /* 4. 完了状態：幅を100%にする */
    background-size: 100% auto !important;
}
/* ==============================================
   【裏技】背景画像だけマスクワイプ表示
   要ライン部分のCSSの変更が必要
============================================== */

/* 親要素（span）自体は動かさないための設定 */
.bgWipePseudo {
    position: relative; /* 疑似要素の基準点にするため必須 */
    z-index: 1;         /* 背景より手前にテキストを表示 */
    /* ここには transition をかけない！ */
}

/* --- 疑似要素（背景レイヤー）の設定 --- */
.bgWipePseudo::before {
    position: absolute;
    z-index: -1; /* テキストの下に潜り込ませる */
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: ""; /* 必須：空の要素を作る */
/* 動きの設定 */
    transition: clip-path 1.5s cubic-bezier(0.25, 1, 0.5, 1);

/* ここに背景画像の設定を引き継ぎます（後述の個別設定で上書きされる前提） */

    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;

/* アニメーションの初期状態：右から100%カット（見えない） */

    clip-path: inset(0 100% 0 0);
}

/* --- 親に is-active がついた時の疑似要素の動き --- */
.bgWipePseudo.is-active::before {
    /* 完了状態：カットなし（全表示） */
    clip-path: inset(0 0% 0 0);
}

/* ==============================
  追従バナー
============================== */
.conversion {
    position: fixed;
    z-index: 999;
    top: 50%;
    right: 0;

    overflow: hidden;

    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.conversion a {
    position: relative;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    width: 5.8rem;
    height: 20rem;
    margin-bottom: 0.7rem;
    padding-right: 0.2rem;

    transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-property: background-color, -webkit-transform;
    transition-property: background-color, transform;
    transition-property: background-color, transform, -webkit-transform;
    -webkit-transform: translateX(0.4rem);
            transform: translateX(0.4rem);
    text-decoration: none;

    color: white;
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
    background: #221815;

/* flex-flow: column; */

    gap: 0.8rem;
}

.conversion a:before {
    display: block;

    content: "";

    background: no-repeat center center;
    background-size: contain;
}
.conversion a.shiryo::before {
    width: 2.1rem;
    height: 1.9rem;

    background-image: url(../images/graduates/icon-mail.png);
}
.conversion a.campus::before {
    width: 1.6rem;
    height: 1.9rem;

    background-image: url(../images/graduates/icon-campus.png);
}
.conversion a span {
    display: block;

        -ms-writing-mode: tb-rl;

    font-size: 1.6rem;

    -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

/* IEモード対応 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .conversion {
        -ms-transform: translateY(-50%); /* IE対応 */
    }

    .conversion a {
        display: -ms-flexbox; /* IE対応 */
        -ms-flex-align: center; /* IE対応 */
        -ms-flex-direction: column; /* IE対応 */
        -ms-flex-pack: center; /* IE対応 */
    }
    .conversion a:before,
    .conversion a span {
        min-height: 0%;
    }
    .conversion a span {
        margin-top: 0.5em;
    }
}

@media print, screen and (max-width: 768px) {
    .conversion.is-show {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        pointer-events: auto;

        opacity: 1;
    }
    .conversion {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;

        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;

        width: 100%;

        transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
        pointer-events: none;

        opacity: 0;
        background-color: #504440;
    }

    .conversion a {
        -ms-flex-direction: row;
            flex-direction: row;

        width: 49.8%;
        height: 13.333vw;
        margin-bottom: 0;
        padding-right: 0;

        transform: translateX(0);

        border-radius: 0;

        font-size: 3.2vw;

        gap: 1.6vw;
    }

    .conversion a.shiryo::before {
        width: 4.133vw;
        height: 3.866vw;
        margin-bottom: -0.534vw;
    }
    .conversion a.campus::before {
        width: 2.933vw;
        height: 3.466vw;
        margin-bottom: -0.267vw;
    }
    .conversion a span {
        margin-top: 0;

            -ms-writing-mode: lr-tb; /* IEでの横書き指定 */

        font-size: 3.2vw;

        -webkit-writing-mode: horizontal-tb;
                writing-mode: horizontal-tb;
    }
}

/* ==============================
  FV
============================== */
.fv-wrapper {
    background-image: url(../images/fv-background.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.fv-container {
    position: relative;

    overflow: hidden;

    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;

/* min-height: 100vh; */
    margin: 0 auto;

    font-family: "Zen Kaku Gothic New", sans-serif;
}
@media print, screen and (max-width: 768px) {
    .fv-container {
        width: 100%;
        max-width: 100vw;
    }
}

/* 画面の真ん中を起点にする */
.item {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.main-visual {
    position: relative;

    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-top: 5%;
    padding-left: 32.5%;
}
/* お皿のサイズ調整（基準） */
.dish-image {
    width: 39.4vw; /* 画面幅に合わせて伸縮 */
    max-width: 568px;
}
@media print, screen and (max-width: 768px) {
    .item {
        transform: translate(0 , 0);
    }

    .main-visual {
        padding-top: 29vw;
        padding-left: 8.3vw;
    }

    .dish-image {
        width: 84.6vw;
        max-width: 84.6vw;
    }
}

.main-visual h1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: max-content;
    height: max-content;
    margin: auto;

    transform: translate(10%, 10%);
    text-align: center;

    color: #000000;

    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: min(5.7rem, 3.9vw);
    font-weight: 500;
    line-height: 1.5;
}
/* の */
.main-visual h1 span.h1-43 {
    font-size: min(4.3rem, 2.9vw);
}
/* おいしい */
.main-visual h1 span.h1-60 {
    font-size: min(6rem, 4.1vw);
    font-weight: 700;
}
/* を育てる */
.main-visual h1 span.h1-48 {
    font-size: min(4.8rem, 3.3vw);
}
/* 4 */
.main-visual h1 span.h1-75 {
    font-size: min(7.5rem, 5.2vw);
    font-weight: 700;
}
/* つ */
.main-visual h1 span.h1-61 {
    font-size: min(6.1rem, 4.2vw);
    font-weight: 700;
}
.main-visual h1 .h1-line {
    position: absolute;
    right: 0;
    bottom: -5%;
    left: 0;

    width: 66%;
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    .main-visual h1 {
        transform: translate(0, 11vw);

        font-size: 8.11vw;
    }
    /* の */
    .main-visual h1 span.h1-43 {
        font-size: 6.11vw;
    }
    /* おいしい */
    .main-visual h1 span.h1-60 {
        font-size: 9.45vw;
    }
    /* を育てる */
    .main-visual h1 span.h1-48 {
        font-size: 6.4vw;
    }
    /* 4 */
    .main-visual h1 span.h1-75 {
        font-size: 10.62vw;
        line-height: 1.15;
    }
    /* つ */
    .main-visual h1 span.h1-61 {
        font-size: 8.69vw;
    }
    .main-visual h1 .h1-line {
        position: absolute;
        right: 0;
        bottom: -5%;
        left: 0;

        width: 66%;
        margin: 0 auto;
    }
}

/* 周辺アイテムの配置（Figmaの座標を元に調整） */
/* 左側アイテム */
.fv-container .item.global {
    z-index: 100;
    top: 8%;
    left: 10%;

    width: 7.4vw;
    max-width: 107px;
}

.fv-container .item.flag-chinese {
    top: 18.5%;
    left: 9%;

    width: 8.8vw;
    max-width: 128px;
}
.fv-container .item.chinachef {
    top: 33.5%;
    left: 12.5%;

    width: 11.1vw;
    max-width: 161px;
}
.fv-container .item.flag-france {
    top: 31%;
    left: 27.5%;

    width: 8.6vw;
    max-width: 125px;
}
.fv-container .item.franchchef {
    top: 19.5%;
    left: 20%;

    width: 10.6vw;
    max-width: 153px;
}
.fv-container .item.flag-italy {
    top: 8.5%;
    left: 37.5%;

    width: 8.3vw;
    max-width: 121px;
}
.fv-container .item.italianchef {
    top: 14%;
    left: 31%;

    width: 12vw;
    max-width: 174px;
}

.fv-container .item.curry {
    top: 54%;
    left: 28.5%;

    width: 24.4vw;
    max-width: 367px;
}
.fv-container .item.logical {
    top: 61%;
    left: 13%;

    width: 7.3vw;
    max-width: 106px;
}
@media print, screen and (max-width: 768px) {
    .fv-container .item.global {
        top: 5.7vw;
        left: 27.8vw;

        width: 12.3vw;
        max-width: 12.3vw;
    }

    .fv-container .item.flag-chinese {
        top: 6vw;
        left: 1vw;

        width: 18.8vw;
        max-width: 18.8vw;
    }
    .fv-container .item.chinachef {
        top: 5.1vw;
        left: 14.1vw;

        width: 19vw;
        max-width: 19vw;
    }
    .fv-container .item.flag-france {
        top: 37.8vw;
        left: 15.9vw;

        width: 16.3vw;
        max-width: 16.3vw;

        transform: rotate(-11deg);
    }
    .fv-container .item.franchchef {
        top: 26.3vw;
        left: 2vw;

        width: 18.8vw;
        max-width: 18.8vw;
    }
    .fv-container .item.flag-italy {
        top: 12.1vw;
        left: 27.5vw;

        width: 17.2vw;
        max-width: 17.2vw;

        transform: rotate(-11deg);
    }
    .fv-container .item.italianchef {
        top: 10.4vw;
        left: 36.4vw;

        width: 20.9vw;
        max-width: 20.9vw;
    }

    .fv-container .item.curry {
        top: 91.3vw;
        left: 2.9vw;

        width: 45.6vw;
        max-width: 45.6vw;
    }
    .fv-container .item.logical {
        top: 137vw;
        left: 4.3vw;

        width: 12.6vw;
        max-width: 12.6vw;

        transform: rotate(7deg);
    }
}

/* 右側アイテム */
.fv-container .item.gastronomy {
    top: 12%;
    left: 91%;

    width: 12.3vw;
    max-width: 178px;
}
.fv-container .item.vegetables-01 {
    top: 13%;
    left: 72%;

    width: 23vw;
    max-width: 332px;
}
.fv-container .item.vegetables-02 {
    top: 22%;
    left: 89%;

    width: 8.6vw;
    max-width: 125px;
}
.fv-container .item.vegetables-03 {
    top: 29%;
    left: 80.8%;

    width: 10.8vw;
    max-width: 156px;
}

.fv-container .item.schoolgirl {
    top: 45%;
    left: 58%;

    width: 26.8vw;
    max-width: 386px;

    transform: scale(-1, 1);
}
.fv-container .item.schoolboy {
    top: 48%;
    left: 88%;

    width: 16.5vw;
    max-width: 239px;
}
.fv-container .item.team {
    top: 63%;
    left: 85%;

    width: 10.1vw;
    max-width: 146px;
}
@media print, screen and (max-width: 768px) {
    .fv-container .item.gastronomy {
        top: 6vw;
        right: 17.4vw;
        left: auto;

        width: 20.9vw;
        max-width: 20.9vw;

        transform: rotate(-11deg);
    }
    .fv-container .item.vegetables-01 {
        top: 10.4vw;
        right: 4.6vw;
        left: auto;

        width: 38.1vw;
        max-width: 38.1vw;
    }
    .fv-container .item.vegetables-02 {
        top: 23vw;
        right: 1.9vw;
        left: auto;

        width: 16.9vw;
        max-width: 16.9vw;
    }
    .fv-container .item.vegetables-03 {
        top: 31.4vw;
        right: 14.5vw;
        left: auto;

        width: 20.9vw;
        max-width: 20.9vw;
    }

    .fv-container .item.schoolgirl {
        top: 102.1vw;
        right: 9.6vw;
        left: auto;

        width: 54.5vw;
        max-width: 54.5vw;
    }
    .fv-container .item.schoolboy {
        top: 76.6vw;
        right: 1.8vw;
        left: auto;

        width: 31.7vw;
        max-width: 31.7vw;
    }
    .fv-container .item.team {
        top: 114.9vw;
        right: 6.8vw;
        left: auto;

        width: 18vw;
        max-width: 18vw;
    }
}

/* 下部アイテム */
.fv-container .item.vegetables-04 {
    top: 74%;
    left: 9.5%;

    width: 9.6vw;
    max-width: 139px;
}
.fv-container .item.vegetables-05 {
    top: 85%;
    left: 10%;

    width: 5.4vw;
    max-width: 83px;
}
.fv-container .item.vegetables-06 {
    top: 91%;
    left: 28%;

    width: 3.4vw;
    max-width: 55px;
}
.fv-container .item.kitchentool-01 {
    top: 78%;
    left: 22%;

    width: 9.7vw;
    max-width: 140px;
}
.fv-container .item.kitchentool-02 {
    top: 89%;
    left: 19%;

    width: 10.2vw;
    max-width: 154px;
}
@media print, screen and (max-width: 768px) {
    .fv-container .item.vegetables-04 {
        top: 146.2vw;
        left: -1.3vw;

        width: 16.3vw;
        max-width: 16.3vw;
    }
    .fv-container .item.vegetables-05 {
        top: 162vw;
        left: 6vw;

        width: 11vw;
        max-width: 11vw;
    }
    .fv-container .item.vegetables-06 {
        top: 234.4vw;
        left: 8.3vw;

        width: 8.3vw;
        max-width: 8.3vw;
    }
    .fv-container .item.kitchentool-01 {
        top: 184.9vw;
        left: 3.7vw;

        width: 17.2vw;
        max-width: 17.2vw;
    }
    .fv-container .item.kitchentool-02 {
        top: 205.1vw ;
        left: 3.2vw;

        width: 21.5vw;
        max-width: 21.5vw;
    }
}

.fv-container .item.vegetables-07 {
    top: 78%;
    left: 80%;

    width: 5.9vw;
    max-width: 86px;
}
.fv-container .item.vegetables-08 {
    top: 75%;
    left: 90%;

    width: 8vw;
    max-width: 124px;
}
.fv-container .item.vegetables-09 {
    top: 90%;
    left: 77%;

    width: 7.8vw;
    max-width: 114px;
}
.fv-container .item.vegetables-10 {
    top: 91%;
    left: 68.5%;

    width: 7.9vw;
    max-width: 129px;
}
.fv-container .item.kitchentool-03 {
    top: 84%;
    left: 85%;

    width: 10vw;
    max-width: 145px;
}
.fv-container .item.kitchentool-04 {
    top: 89%;
    left: 92.5%;

    width: 8.75vw;
    max-width: 126px;
}
@media print, screen and (max-width: 768px) {
    .fv-container .item.vegetables-07 {
        top: 142.7vw;
        right: 3.7vw;
        left: auto;

        width: 12.3vw;
        max-width: 12.3vw;
    }
    .fv-container .item.vegetables-08 {
        top: 156.4vw;
        right: 5.9vw;
        left: auto;

        width: 18vw;
        max-width: 18vw;
    }
    .fv-container .item.vegetables-09 {
        top: 210.7vw;
        right: 6.9vw;
        left: auto;

        width: 18.5vw;
        max-width: 18.5vw;
    }
    .fv-container .item.vegetables-10 {
        top: 189.2vw;
        right: 1.3vw;
        left: auto;

        width: 16.3vw;
        max-width: 16.3vw;
    }
    .fv-container .item.kitchentool-03 {
        top: 227.4vw;
        right: 0;
        left: auto;

        width: 20.9vw;
        max-width: 20.9vw;
    }
    .fv-container .item.kitchentool-04 {
        top: 170.3vw;
        right: -1vw;
        left: auto;

        width: 15.2vw;
        max-width: 15.2vw;

        transform: rotate(-16deg);
    }
}

.main-text {
    width: max-content;
    margin-top: 3.1%;
    margin-bottom: 6%;
    padding-left: 23.8%;

    text-align: center;

    color: #000000;

    font-size: min(2rem, 1.3vw);
    font-weight: 500;
    line-height: 2.7;
}
.main-text span {
    background-image: url(../images/fv-text-line.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;

    font-size: min(2.5rem, 1.7vw);
    font-weight: 700;
}
@media print, screen and (max-width: 768px) {
    .main-text {
        margin: 30.1vw auto 16.1vw;
        padding-left: 0;

        font-size: 3.7vw;
        line-height: 2.7;
    }
    .main-text span {
        font-size: 5.3vw;
    }
}
/* ==============================
  CASE section
============================== */
#case-04 {
    display: none;
}

.case_section {
    position: relative;

    padding-bottom: 15.9%;
}
.case_section::before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 92.3%;
    /* max-width: 1330px; */

    content: "";

    background-color: #EEE8E4;

/* height: 100%; */
    /* aspect-ratio: 190 / 139; */

    aspect-ratio: 190 / 128;
    /* background: linear-gradient(180deg, #EEE8E4 0%, #EEE8E4 70%, #FFF 70%, #FFF 100%); */
}
.case_section:first-of-type {
    margin-top: 9.3%;
}
@media print, screen and (max-width: 768px) {
    .case_section {
    }
    .case_section::before {
        width: 91.93vw;
        max-width: 91.93vw;

        aspect-ratio: 171 / 350;
    }
    .case_section:first-of-type {
        margin-top: 22.3vw;
    }
}

.case_section .case-header {
    position: relative;

    margin: 0 auto 0 0;
    padding: 5.6% 0 12.9%;
}
.case_section .case-header .title-box {
    display: flex;
    align-items: flex-start;

    width: 72.2%;
    max-width: 1040px;
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    .case_section .case-header {
        padding: 5.9vw 0 26vw;
    }
    .case_section .case-header .title-box {
        flex-direction: column;

        width: 90.8vw;
    }
}

/* CASE番号 */
.case_section .case-header .title-box .icn {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    width: 5em;
    max-width: 5em;

    border-radius: 50%;
    background-color: #FFFFFF;

    font-family: "Abril Fatface", serif;
    font-size: min(3rem, 2.1vw);
    font-weight: 400;
    line-height: 0.9;

    aspect-ratio: 1 / 1;
}
.case_section .case-header .title-box .icn span {
    font-size: min(4.1rem, 2.9vw);
}
@media print, screen and (max-width: 768px) {
    .case_section .case-header .title-box .icn {
        width: 26.8vw;
        max-width: 26.8vw;

        font-size: 5.6vw;
    }
    .case_section .case-header .title-box .icn span {
        font-size: 7.7vw;
    }
}

/* タイトル */
.case_section .case-header .title-box h1 {
    margin: 1.2em 0 0 0.84em;

    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: min(2.5rem, 1.7vw);
    font-weight: 700;
    line-height: 1.8;
}
.case_section .case-header .title-box h1 span[class^="line-"] {
    display: inline;

    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;

    font-size: min(3.7rem, 2.6vw);
}
#case-04.case_section .case-header .title-box h1 {
    font-size: min(2rem, 1.3vw);
    line-height: 3.5;
}
#case-04.case_section .case-header .title-box h1 span[class^="line-"] {
    font-size: min(3rem, 2vw);
    line-height: 2.3;
}
#case-01.case_section .case-header .title-box h1 .line-01 {
    background-image: url(../images/case-01-line-01.png);
}
#case-01.case_section .case-header .title-box h1 .line-02 {
    background-image: url(../images/case-01-line-02.png);
}
#case-02.case_section .case-header .title-box h1 .line-01 {
    background-image: url(../images/case-02-line-01.png);
}
#case-02.case_section .case-header .title-box h1 .line-02 {
    background-image: url(../images/case-02-line-02.png);
}
#case-03.case_section .case-header .title-box h1 .line-01 {
    background-image: url(../images/case-03-line-01.png);
}
#case-03.case_section .case-header .title-box h1 .line-02 {
    background-image: url(../images/case-03-line-02.png);
}
#case-04.case_section .case-header .title-box h1 .line-01 {
    background-image: url(../images/case-04-line-01.png);
}
#case-04.case_section .case-header .title-box h1 .line-02 {
    background-image: url(../images/case-04-line-02.png);
}
@media print, screen and (max-width: 768px) {
    .case_section .case-header .title-box h1 {
        margin: 10.7vw 0 0 3.4vw;

        font-size: 4vw;
        line-height: 2.4;
    }
    .case_section .case-header .title-box h1 span[class^="line-"] {
        font-size: 5.3vw;
    }
    #case-04.case_section .case-header .title-box h1 {
        margin-top: 17.4vw;

        font-size: 4vw;
    }
    #case-04.case_section .case-header .title-box h1 span[class^="line-"] {
        font-size: 5.3vw;
    }
    #case-01.case_section .case-header .title-box h1 .line-01 {
        background-image: url(../sp-images/case-01-line-01.png);
    }
    #case-01.case_section .case-header .title-box h1 .line-02 {
        background-image: url(../sp-images/case-01-line-02.png);
    }
    #case-02.case_section .case-header .title-box h1 .line-01 {
        background-image: url(../sp-images/case-02-line-01.png);
    }
    #case-02.case_section .case-header .title-box h1 .line-02 {
        background-image: url(../sp-images/case-02-line-02.png);
    }
    #case-03.case_section .case-header .title-box h1 .line-01 {
        background-image: url(../sp-images/case-03-line-01.png);
    }
    #case-03.case_section .case-header .title-box h1 .line-02 {
        background-image: url(../sp-images/case-03-line-02.png);
    }
    #case-04.case_section .case-header .title-box h1 .line-01 {
        background-image: url(../sp-images/case-04-line-01.png);
    }
    #case-04.case_section .case-header .title-box h1 .line-02 {
        background-image: url(../sp-images/case-04-line-02.png);
    }
}

/* アニメーションイラスト*/
.case_section .case-header .illust-box {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;

    /* width: 92.3%; */
    /* max-width: 1330px; */
    height: 100%;
    width: 72.2%;
    max-width: 1040px;
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    .case_section .case-header .illust-box {
        width: 91.93vw;
        max-width: 91.93vw;
    }
}
.illust-box .item {
    top: auto;
    left: auto;

    transform: translate(0, 0);
}

.illust-box .item.vegetables-01 {
    top: 5.5% ;
    right: -9.9%;

    width: 23vw;
    max-width: 332px;
}
.illust-box .item.vegetables-02 {
    top: 28.7%;
    right: -5.9%;

    width: 8.6vw;
    max-width: 125px;
}
.illust-box .item.vegetables-03 {
    top: 44.3%;
    right: 3.9%;

    width: 10.8vw;
    max-width: 156px;
}
@media print, screen and (max-width: 768px) {
    .illust-box .item.vegetables-01 {
        top: -6.1vw;
        right: 1.8vw;

        width: 48vw;
        max-width: 48vw;
    }
    .illust-box .item.vegetables-02 {
        top: 10.2vw;
        right: -2.4vw;

        width: 21vw;
        max-width: 21vw;
    }
    .illust-box .item.vegetables-03 {
        top: 21.2vw;
        right: 13.9vw;

        width: 26.6vw;
        max-width: 26.6vw;
    }
}

.illust-box .item.flag-chinese {
    top: 0;
    right: 26.8%;

    width: 8.8vw;
    max-width: 128px;

    transform: rotate(18deg);
}
.illust-box .item.chinachef {
    top: -14%;
    right: 16.8%;

    width: 10.2vw;
    max-width: 148px;
}
.illust-box .item.flag-france {
    top: 46.3%;
    right: 16.1%;

    width: 8.6vw;
    max-width: 125px;

    transform: rotate(-13deg);
}
.illust-box .item.franchchef {
    top: 26.6%;
    right: 7.01%;

    width: 9.7vw;
    max-width: 140px;
}
.illust-box .item.flag-italy {
    top: 2%;
    right: 2.51%;

    width: 8.3vw;
    max-width: 121px;

    transform: rotate(-14deg);
}
.illust-box .item.italianchef {
    top: 2.3%;
    right: -4.71%;

    width: 11vw;
    max-width: 159px;
}
@media print, screen and (max-width: 768px) {
    .illust-box .item.flag-chinese {
        top: -8.2vw;
        right: 43.9vw;

        width: 23.7vw;
        max-width: 23.7vw;

        transform: rotate(-1deg);
    }
    .illust-box .item.chinachef {
        top: -7.5vw;
        right: 26.6vw;

        width: 23.9vw;
        max-width: 23.9vw;
    }
    .illust-box .item.flag-france {
        top: 25.2vw;
        right: -3.5vw ;

        width: 22.8vw;
        max-width: 22.8vw;
    }
    .illust-box .item.franchchef {
        z-index: 2;
        top: 17.4vw;
        right: 9.9vw;

        width: 23.6vw;
        max-width: 23.6vw;
    }
    .illust-box .item.flag-italy {
        top: -9.9vw;
        right: 7.5vw;

        width: 23.9vw;
        max-width: 23.9vw;
    }
    .illust-box .item.italianchef {
        top: -8.8vw;
        right: -4.8vw;

        width: 26.3vw;
        max-width: 26.3vw;
    }
}

.illust-box .item.schoolgirl {
    top: 21.9%;
    right: -6.3%;

    width: 30.1vw;
    max-width: 434px;
}
.illust-box .item.schoolboy {
    top: -10.3%;
    right: 18%;

    width: 18.6vw;
    max-width: 268px;
}
@media print, screen and (max-width: 768px) {
    .illust-box .item.schoolgirl {
        top: 11.2vw;
        right: -13.2vw;

        width: 55.3vw;
        max-width: 55.3vw;
    }
    .illust-box .item.schoolboy {
        top: -8.8vw;
        right: 21.7vw;

        width: 40vw;
        max-width: 40vw;
    }
}

.illust-box .item.curry {
    top: -24.7%;
    right: -3.5%;

    width: 34.2vw;
    max-width: 493px;

    transform: scale(-1, 1);
}
@media print, screen and (max-width: 768px) {
    .illust-box .item.curry {
        top: -12vw;
        right: -8vw;

        width: 69.3vw;
        max-width: 69.3vw;
    }
}


.case-wrappre {
    width: 92.3%;
    /* max-width: 1330px; */

    transform: translateX(8.4%);

    background: #F3F1E5;
}
@media print, screen and (max-width: 768px) {
    .case-wrappre {
        width: 91.93vw;
        max-width: 91.93vw;

        transform: translateX(8.07vw);

        background: #F3F1E5;
        background: linear-gradient(180deg, #F3F1E5 0%, #F3F1E5 50%, transparent 50%, transparent 100%);
    }
}

/* キーワード */
.keyword-box {
    display: flex;

    width: 66.9%;
    margin: 0 auto;

    transform: translateY(-50%);
}
.keyword-box p {
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 12em;

    letter-spacing: 0.1em;

    color: #FFFFFF;
    border: 1px solid #000000;
    background-color: #000000;

    font-family: "Abril Fatface", serif;
    font-size: min(2.5rem, 1.7vw);
}
.keyword-box h4 {
    width: calc(100% - 12em);
    padding: 0.5em 0;

    text-align: center;

    border: 1px solid #000000;
    background-color: #FFFFFF;

    font-family: "Noto Sans JP", sans-serif;
    font-size: min(2.5rem, 1.7vw);
    font-weight: 700;
    line-height: 1.3;
}
.keyword-box h4 span {
    font-size: min(3.5rem, 2.4vw);
}
@media print, screen and (max-width: 768px) {
    .keyword-box {
        position: relative;

        display: block;

        width: 100vw;

        transform: translate(-8.07vw,-50%);

        border: none;
        background-color: transparent;
    }
    .keyword-box p {
        position: absolute;
        top: 0;
        left: 0;

        width: 42.2vw;
        padding: 0.1em 0 0.3em 0;

        transform: translate(-40px,-70%);

        font-size: 6.7vw;
    }
    .keyword-box p.is-active {
        transform: translate(0,-70%);
    }
    .keyword-box h4 {
        width: 83.3vw;
        margin: 0 -1px 0 auto;
        padding: 0.8em 0;

        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
        background-color: #FFFFFF;

        font-size: 5.3vw;
    }
    .keyword-box h4 span {
        font-size: 7.2vw;
    }
}

/* 金色文字 */
.case_section__subtitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 66.9%;
    margin: 0 auto 5.4%;

    color: #7E7E3A;

    font-family: "Yeseva One", serif;
    font-size: min(3rem, 2vw);
    font-weight: 400;
}
.case_section__subtitle span {
    margin: 0 0.5em;

    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: min(1.9rem, 1.3vw);
    font-weight: 700;
}
.case_section__subtitle::after {
    flex-grow: 1;

    height: 1px;

    content: "";

    background-color: #7E7E3A;
}
@media print, screen and (max-width: 768px) {
    .case_section__subtitle {
        align-items: flex-start;
        flex-direction: column;

        width: 83.3vw;
        margin: 0 0 5.4% auto;

        font-size: 5.3vw;
    }
    .case_section__subtitle span {
        margin: 0;

        font-size: 3.2vw;
    }
    .case_section__subtitle::after {
        display: none;
    }
}

/* グリッド枠囲み */
.case_section__grid {
    display: grid;

    width: 66.9%;
    margin: 0 auto;

    grid-gap: 12%;
    grid-template-columns: repeat(2, 1fr);
}

/* 写真周り */
.case_section-card__img-box {
    position: relative;
}
.case_section__grid .badge {
    position: absolute;
    top: -1.44em;
    left: -1.52em;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 4.6em;

    color: #FFFFFF;
    border-radius: 50%;

    font-family: "Yeseva One", serif;
    font-size: min(2.5rem, 1.7vw);
    font-weight: 400;
    line-height: 1;

    aspect-ratio: 1 / 1;
}
.case_section__grid .badge.tokyo {
    background-color: #113E95;
}
.case_section__grid .badge.osaka {
    background-color: #A80004;
}
.case_section__grid .badge.tokyo-osaka {
    flex-direction: column;

    background: linear-gradient(180deg, #113E95 0%, #113E95 50%, #A80004 50%, #A80004 100%);

    line-height: 1.5;
}
.case_section--bottom-wrapper .case_section__grid .badge {
    top: -0.4em;
    left: -0.92em;
}
@media print, screen and (max-width: 768px) {
    .case_section__grid .badge {
        top: -3.4vw;
        left: -4vw;

        width: 14.7vw;

        font-size: 3.4vw;
    }
    .case_section--bottom-wrapper .case_section__grid .badge {
        top: -4vw;
        left: -4vw;
    }
}

/* 上段タイトル */
.case_section__card-top h3 {
    margin: 0.5em 0 0;

    font-family: "Noto Sans JP", sans-serif;
    font-size: min(1.8rem, 1.2vw);
    font-weight: 700;
    line-height: 1.6;
}
@media print, screen and (max-width: 768px) {
    .case_section__card-top h3 {
        margin: 2.9vw 0 4vw;

        font-size: 3.7vw;
    }
}

/* ボタン */
.case_section__toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    cursor: pointer;
    transform: translateY(50%);
    text-align: center;

    color: #7E7E3A;
    border: none;
    border-radius: 0;
    background: transparent;

    font-family: "Abril Fatface", serif;
    font-size: min(2.5rem, 1.7vw);
    font-weight: 400;
    line-height: 1.5;
}
.case_section__toggle .btn-icon {
    display: flex;
    align-items: center;

    width: 0.76em;
    margin-left: 0.3em;

    transform: rotate(180deg);
    transition: transform 0.4s ease;
}
.case_section__toggle.is-active .btn-icon {
    transform: rotate(0deg);
}
@media print, screen and (max-width: 768px) {
    .case_section__toggle {
        position: absolute; /* フローから切り離す */
        z-index: 10;        /* 下の段より手前に表示 */
        right: 0;           /* 横幅いっぱいに */
        bottom: 0;          /* カードの底辺に合わせる */
        left: 0;

        justify-content: flex-start;

        margin: 0 auto;     /* 中央揃え */

/* 50%下にずらして、境界線をまたぐようにする */

        transform: translateY(50%);

        font-size: 3.4vw;
    }
    .case_section__toggle .btn-icon {
        width: 2.4vw;
    }
}

/* 下段背景 */
.case_section--bottom-wrapper {
    background: #F9F8F2;
    /* width: max-content; */
}

/* --- アコーディオンの中身（閉じている時） --- */
.case_section-card__body {
    display: grid;
    visibility: hidden;
/* 閉じるときのアニメーション設定:
      visibilityだけ「0.4s待ってから」hiddenにする
    */

    transition: grid-template-rows 0.4s ease,
    padding 0.4s ease,
    opacity 0.4s ease,
    visibility 0s linear 0.4s;

    opacity: 0; /* フェードアウトも入れるとより自然 */

    grid-template-rows: 0fr; /* 高さを0に */
}
/* --- アコーディオンの中身（開いた時） --- */
.case_section-card__body.is-open {
    visibility: visible;

    padding: 23% 0 0;
/* 開くときのアニメーション設定:
    visibilityは「待ち時間なし（0s）」ですぐvisibleにする
  */

    transition: grid-template-rows 0.4s ease,
    padding 0.4s ease,
    opacity 0.4s ease,
    visibility 0s linear 0.2s;

    opacity: 1;

    grid-template-rows: 1fr; /* 本来の高さに */
}

/* 下段　内部のラッパー（必須） */
.accordion-inner {
    /* overflow: hidden; */
    min-height: 0;
}

/* 下段　テキスト */
.case_section-card__body .desc-text {
    margin: 5.9% 0 8.6%;

    font-family: "Noto Sans JP", sans-serif;
    font-size: min(1.5rem, 1vw);
    font-weight: 400;
    line-height: 1.6;
}
@media print, screen and (max-width: 768px) {
    .case_section-card__body .desc-text {
        margin: 5.9vw 0 9.6vw;

        font-size: 2.9vw;
    }
}

/* PC表示 */
@media screen and (min-width: 769px) {
    /* ラッパーは何もしない（存在を消すイメージ） */
    .case_section__scroll-wrapper {
        display: block;
    }
}
/* スマホ表示 */
@media screen and (max-width: 768px) {
    /* 1. 外側のラッパー（窓枠） */
    .case_section__scroll-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
/* ボックスサイズを含める（念のため） */

        box-sizing: border-box;
        width: 91.93vw; /* 窓枠は画面幅に合わせる */

/* チラ見せ用余白 */
        padding: 3.4vw 0 1rem;

        white-space: nowrap;

        scroll-snap-type: x mandatory;
    }

    /* スクロールバー非表示（そのまま） */
    .case_section__scroll-wrapper::-webkit-scrollbar {
        display: none;
    }
    .case_section__scroll-wrapper {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    /* 2. 中身のレール（景色） */
    .case_section__grid {
        display: flex;

/* ★ここを修正！ */
        /* 固定のvwではなく、中身（カードの合計幅）に合わせて自動で伸びるようにする */

        width: max-content;
        margin: 0;
        padding: 0 8.8vw;
/* ギャップはそのまま採用 */

        gap: 9.6vw;
    }

    /* 3. アイテムの幅を統一してズレないようにする */
    .case_section__card-top,
    .case_section-card__body {
        flex-shrink: 0; /* 縮ませない */
        /* ここでサイズを決めているので、gridのwidthはmax-contentで計算が合う */

        width: 49.7vw;

        white-space: normal; /* テキストは普通に折り返す */
        /*scroll-snap-align: start;  左端に吸着 */
    }
    .case_section__card-top {
        position: relative; /* ボタンの基準点にする */

/* 念のため余計な余白を消す */

        margin-bottom: 0;
/* ボタンが重なる分のスペースを確保（文字被り防止） */
        padding-bottom: 4vw;

        border: none;
    }

    /* 最後のアイテムの右余白は消す */
    .case_section__card-top:last-child,
    .case_section-card__body:last-child {
        margin-right: 0;
    }
    .case_section-card__body.is-open {
        padding-top: 9.9vw;
    }

    /* 4. 背景色の塗りつぶし（隙間も塗る！） */
    .case_section--top-wrapper,
    .case_section__grid-detail {
        /* 横幅いっぱいに色を伸ばすために min-width を親に合わせる */
        min-width: max-content;
    }
    .case_section--top-wrapper {
        background: #F3F1E5;
    }
    .case_section--bottom-wrapper {
        width: max-content;
    }
}

/* バナー */
.case_section .bnrs {
    display: flex;
    justify-content: center;

    margin: 0 auto;
    padding: 5.5% 0 0;

    background-color: #FFFFFF;
}
.case_section .bnrs li {
    width: 32.1%;
    max-width: 463px;

    text-align: center;
}
.case_section .bnrs.over2 li {
    margin: 0 2.18%;
}

.case_section .bnrs h6 {
    margin-bottom: 7.9%;

    color: #7E7E3A;

    font-family: "Yeseva One", serif;
    font-size: min(3.4rem, 2.3vw);
    font-weight: 400;
}
.case_section .bnrs h6 span {
    display: block;

    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: min(1.6rem, 1.1vw);
    font-weight: 700;
    line-height: 1.6;
}
@media print, screen and (max-width: 768px) {
    .case_section .bnrs {
        padding: 8vw 0 0;
    }
    .case_section .bnrs li {
        width: 83.8vw;
        max-width: 83.8vw;
    }
    .case_section .bnrs.over2 {
        align-items: center;
        flex-direction: column;
    }
    .case_section .bnrs.over2 li {
        margin: 0;
    }
    .case_section .bnrs.over2 li + li {
        margin: 8vw 0 0;
    }

    .case_section .bnrs h6 {
        margin-bottom: 4vw;

        font-size: 5.3vw;
    }
    .case_section .bnrs h6 span {
        font-size: 3.2vw;
    }
}

/* ==============================
    Education Mission
============================== */
#education_mission {
    padding: 4.8% 0 5.2%;

    background-image: url(../images/education_mission-background.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
#education_mission h2 {
    text-align: center;

    color: #7E7E3A;

    font-family: "Yeseva One", serif;
    font-size: min(3.4rem, 2.3vw);
    font-weight: 400;
}
#education_mission h2 span {
    display: block;

    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: min(1.6rem, 1.1vw);
    font-weight: 700;
    line-height: 1.6;
}

#education_mission h2 + p {
    margin: 2.7% 0 4.5%;

    text-align: center;

    font-family: "Noto Sans JP", sans-serif;
    font-size: min(1.5rem, 1vw);
    font-weight: 400;
    line-height: 1.6;
}
@media print, screen and (max-width: 768px) {
    #education_mission {
        padding: 12.6vw 0 12vw;

        background-image: url(../sp-images/education_mission-background.png);
    }
    #education_mission h2 {
        font-size: 5.3vw;
    }
    #education_mission h2 span {
        margin-top: 1em;

        font-size: 3.2vw;
    }

    #education_mission h2 + p {
        width: 71.7vw;
        margin: 5.3vw auto 10.7vw;

        font-size: 2.9vw;
        line-height: 2;
    }
}

#education_mission .circle-inner {
    position: relative;

    display: flex;
    flex-wrap: wrap;

    width: 37%;
    margin: 0 auto;
    /* ここにGSAPやCSSアニメーションでZoomIn（transform: scale）をかける */
}
@media print, screen and (max-width: 768px) {
    #education_mission .circle-inner {
        width: 90.7vw;
    }
}

#education_mission .quadrant {
    width: 50%;

    cursor: pointer; /* クリックできることを示す */
    transition: opacity 0.3s;
}

/* 各エリアの配置 */
#education_mission .pink {
    top: 0;
    left: 0;
}
#education_mission .blue {
    top: 0;
    right: 0;
}
#education_mission .orange {
    bottom: 0;
    left: 0;
}
#education_mission .green {
    right: 0;
    bottom: 0;
}

/* --- ポップアップ（モーダル）共通設定 --- */
.mission-modal {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 20px;

    transition: opacity 0.3s, visibility 0.3s;
/* 初期状態は非表示 */

    opacity: 0;
}

/* 表示時のクラス */
.mission-modal.is-active {
    visibility: visible;

    opacity: 1;
}

/* 背景の黒透明レイヤー */
.mission-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(255, 255, 255, 0.9); /* デザインに合わせて白の透過にしました */
}

/* モーダルの中身（白い箱） */
.mission-modal__content {
    position: relative;

    box-sizing: border-box;
    width: 55.5%;
    max-width: 800px;
    padding: 5% 2% 5%;

    transition: transform 0.3s;
    transform: scale(0.9);
    text-align: center;

    border: 5px solid #CCCCCC; /* デフォルト枠線 */
    background: #FFFFFF;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    box-sizing: border-box;
}
@media print, screen and (max-width: 768px) {
    .mission-modal__content {
        position: relative;

        width: 81.7vw;
        max-width: 81.7vw;
        aspect-ratio: unset;
        padding: 9.94vw 5.3vw 9.94vw;

        border: 1.3vw solid #CCCCCC; /* デフォルト枠線 */
    }
}
.mission-modal.is-active .mission-modal__content {
    transform: scale(1);
}

/* 各色のボーダー設定 */
.mission-modal__content.border-pink {
    color: #E2828C;
    border-color: #E2828C;
}
.mission-modal__content.border-blue {
    color: #113E95;
    border-color: #113E95;
}
.mission-modal__content.border-orange {
    color: #F46A3B;
    border-color: #F46A3B;
}
.mission-modal__content.border-green {
    color: #66A92C;
    border-color: #66A92C;
}

/* 閉じるボタン（×） */
.mission-modal__close {
    position: absolute;
    top: 0;
    right: 0;

    width: 3.25%;
    height: auto;

    cursor: pointer;

    border: none;
    background: transparent;
    transform: translateY(-150%);
}
.mission-modal__close::before,
.mission-modal__close::after {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;

    width: 20px;
    height: 2px;

    content: "";
    transform: translate(-50%, -50%) rotate(45deg);

    background: #333333;
}
.mission-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* コンテンツの文字周り */
.modal-icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* width: 13.2%; */
    width: 16.4%;
    margin: 0 auto;
    aspect-ratio: 1/1;
}
.mission-modal__body h3 {
    margin: 1em 0;

    font-family: "Noto Sans JP", sans-serif;
    font-size: min(3.5rem, 2.4vw);
    font-weight: 600;
}
.mission-modal__body p {
    text-align: center;

    color: #000000;

    font-family: "Noto Sans JP", sans-serif;
    font-size: min(2rem, 1.3vw);
    line-height: 2;
    min-height: 8.5em;
}
@media print, screen and (max-width: 768px) {
    .mission-modal__close {
        width: 4.8vw;
    }
    .modal-icon {
        width: 22.6vw;
        margin: 0 auto;
    }
    .mission-modal__body h3 {
        margin: 4.3vw 0 8vw;

        font-size: 6.7vw;
    }
    .mission-modal__body p {
        font-size: 3.4vw;
    }
}

/* ==============================
    Related Links
============================== */
#related_links {
    padding: 7.29% 0 0;
}
#related_links  h2 {
    text-align: center;

    color: #7E7E3A;

    font-family: "Yeseva One", serif;
    font-size: min(3.4rem, 2.3vw);
    font-weight: 400;
}
#related_links h2 span {
    display: block;

    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: min(1.6rem, 1.1vw);
    font-weight: 700;
    line-height: 1.6;
}

#related_links .bnrs {
    display: flex;
    justify-content: center;

    margin-top: 4.1%;
}

#related_links .bnrs li {
    width: 38.125%;
    max-width: 549px;
    margin: 0 1.49%;
}
#related_links .bnrs li:nth-of-type(2) {
    width: 27.5%;
    max-width: 396px;
}
#related_links .bnrs li img {
    min-height: 100%;
}
@media print, screen and (max-width: 768px) {
    #related_links {
        padding: 18.2vw 0 0;
    }
    #related_links  h2 {
        font-size: 5.3vw;
    }
    #related_links h2 span {
        font-size: 3.2vw;
    }

    #related_links .bnrs {
        align-items: center;
        flex-direction: column;

        margin-top: 8vw;
    }

    #related_links .bnrs li {
        width: 84.1vw;
        max-width: 84.1vw;
        margin: 0;
    }
    #related_links .bnrs li:nth-of-type(2) {
        width: 84.1vw;
        max-width: 84.1vw;
        margin-top: 3.2vw;
    }
    #related_links .bnrs li img {
        min-height: auto;
    }
}

/* ==============================
    Footer
============================== */
footer .inner {
    padding-bottom: 8%;
}
footer .logo {
    width: 10.69%;
    max-width: 154px;
    margin: 4.5% auto 0;
}

footer .copyright {
    margin-top: 0.97%;

    text-align: center;

    font-size: min(1.1rem, 0.76vw);
}

footer .footer-recruit img {
    width: auto;
}
@media print, screen and (max-width: 768px) {
    footer {
        padding-bottom: 15vw;
    }
    footer .inner {
        padding-bottom: 17.3vw;
    }
    footer .logo {
        width: 41.3vw;
        max-width: 41.3vw;
        margin: 9.6vw auto 0;
    }

    footer .copyright {
        margin-top: 7.7vw;

        font-size: 2.9vw;
    }

    footer .footer-recruit {
        text-align: center;
    }
}