@charset "UTF-8";
/* ============================================================================
 * custom.css — 追加修正用 CSS（TOP・下層ページ共通）
 *
 * - 全ページで、他のすべての CSS（tokens / layout / header-footer / style /
 *   figma-components / 各ページ別 CSS）より後に読み込まれる。
 * - 今後の修正・上書きはこのファイルに追記していく。
 * - 読み込み: functions.php の technoauto_enqueue_custom_css()
 * ========================================================================== */


/* ----------------------------------------------------------------------------
 * TOP ページ
 * -------------------------------------------------------------------------- */

/* PC 幅のみ適用（スマホ 768px 以下では無効）。スマホ用は下の max-width: 768px ブロックへ */
@media screen and (min-width: 769px) {

    /* 英字見出し (PICK UP / COURSE / OPEN CAMPUS / SUPPORT / SPECIAL INTERVIEW / NEWS):
       SP と同じく白文字に濃色のフチを付ける */
    .ytc-top .c-wordmark__front {
        -webkit-text-stroke: 2px var(--ytc-border-strong, #39364e);
        paint-order: stroke fill;
    }

    /* SP 専用の KV 要素は PC では出さない */
    .ytc-kv__sp {
        display: none;
    }

    .ytc-kv {
        background: initial;
        height: 700px;
    }
    .ytc-kv__wbg {
        position: relative;
        transform: none;
        top: initial;
        left: initial;
        margin: 50px auto;
    }

    .ytc-kv__title-group {
        top: -15px;
        left: calc(50% + 200px);
        transform: translateX(-50%);
    }

    .ytc-kv__slide {
        top: 0;
    }

    .ytc-kv__slide.is-anim {
        animation: ytc-kv-pan-diagonal 24s linear infinite;
    }
    @keyframes ytc-kv-pan-diagonal {
        0%   { transform: translate(-50%, 0); }
        100% { transform: translate(calc(-50% - 1074px), -170px); }
    }

    /* KV の人物: 左右にぴょこぴょこ動かす */
    .ytc-kv__props img[src*="kv-person-"],
    .ytc-kv__props img[src*="kv-red-copy"],
    .ytc-kv__props img[src*="kv-green-copy"] {
        animation: ytc-kv-hop 2s ease-in-out infinite;
    }
    /* 全員が同時に動かないようタイミングをずらす */
    .ytc-kv__props img[src*="kv-person-black-2"] { animation-delay: -0.5s; }
    .ytc-kv__props img[src*="kv-person-red"],
    .ytc-kv__props img[src*="kv-red-copy"]       { animation-delay: -1s; }
    .ytc-kv__props img[src*="kv-person-green"],
    .ytc-kv__props img[src*="kv-green-copy"]     { animation-delay: -1.5s; }
    @keyframes ytc-kv-hop {
        0%, 50%, 100% { transform: translate(0, 0); }
        25%           { transform: translate(-2px, -2px); }
        75%           { transform: translate(2px, -2px); }
    }

    /* KV の車（リフトごと）: ゆっくり上下させる */
    .ytc-kv__props img[src*="kv-car"] {
        animation: ytc-kv-lift 2.4s ease-in-out infinite;
    }
    @keyframes ytc-kv-lift {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-6px); }
    }

    /* KV のバイク: タイヤの接地面を軸に小さく揺らす */
    .ytc-kv__props img[src*="kv-layer587"] {
        transform-origin: 50% 100%;
        animation: ytc-kv-rock 1.6s ease-in-out infinite;
    }
    .ytc-kv__props img[src*="kv-layer587-copy"] { animation-delay: -0.8s; }
    @keyframes ytc-kv-rock {
        0%, 100% { transform: rotate(-1.5deg); }
        50%      { transform: rotate(1.5deg) translateY(-2px); }
    }

    @media (prefers-reduced-motion: reduce) {
        .ytc-kv__slide.is-anim,
        .ytc-kv__props img { animation: none; }
    }


    .ytc-kv__title-main {
        top: auto;
        bottom: 155px;
        left: calc(50% - 170px);
        transform: translateX(-50%);
    }

    .ytc-oc__top-illust-sp {
        display: none;
    }

    /* OC / INTERVIEW の prev/next と INTERVIEW のイラストは SP 専用 */
    .ytc-interview__sp-illust,
    .ytc-oc .c-carousel-controls,
    .ytc-interview .c-carousel-controls {
        display: none;
    }

    /* OC / SUPPORT 見出し・リードの改行は SP 用。PC では 1 行に流す */
    .ytc-oc .c-section-heading br,
    .ytc-support .c-section-heading br {
        display: none;
    }

    /* PICK UP / イベントカード: 下側のシャドウ(8px)がカルーセルの overflow:hidden で切れないよう余白を確保 */
    .ytc-pickup__list,
    .ytc-oc__list,
    .ytc-interview__list {
        padding-bottom: 8px;
    }

    :where(body.is-top) .c-carousel-controls__btn--prev {
        left: 0;
    }

    :where(body.is-top) .c-carousel-controls__btn--next {
        right: 0;
    }

    .c-carousel-viewport .is-carousel.ytc-oc__list > .c-event-card,
    .c-carousel-viewport .is-carousel.ytc-interview__list > .c-interview-card {
        width: calc((100% - 70px) / 3);
        min-width: calc((100% - 70px) / 3);
        max-width: calc((100% - 70px) / 3);
    }

    .ytc-support__illust {
        z-index: 3;
    }

    .site-footer__nav a::after {
        content: none;
    }

    .ytc-news__list {
        justify-content: center;
    }

    :where(body.is-top) .c-article-row {
        flex: none;
        width: calc(100% / 5 - 16px);
    }

}

/* ----------------------------------------------------------------------------
 * TOP ページ SP (スマホ) 修正
 *
 * 修正方針:
 * - カルーセル (PICK UP / OC / SPECIAL INTERVIEW) は Figma 準拠で
 *   1 カードフル幅 × ドットページング(5件) × prev/next 矢印の horizontal 版に戻す
 *   (旧 figma-top.css の flex-direction: column が JS の translateX と競合して画面外に飛ぶ事故を修正)
 * - KV wordmark CHALLENGE SPIRITS の overflow 対策
 * - NEWS サムネイル / dual CTA / 細部調整
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* ========================================================================
       1. カルーセル (PICK UP / OC / SPECIAL INTERVIEW)
       ======================================================================== */

    /* セクション自体を column 化し wordmark / box / controls を縦積みに */
    .ytc-pickup,
    .ytc-oc,
    .ytc-interview {
        flex-direction: column !important;
        align-items: center;
        padding: 40px 0 0 !important;
    }
    .ytc-pickup__box,
    .ytc-oc__box,
    .ytc-interview__box {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }

    /* PICK UP セクション下部 illustration (Figma SP 準拠) */
    .ytc-pickup {
        background: var(--ytc-bg-brand, #439fff);
        padding-bottom: 350px !important;
        position: relative;
    }
    .ytc-pickup::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 350px;
        background: #6bd0ff url("../assets/images/figma-20261002/pickup-sp-illustration.png") no-repeat center bottom;
        background-size: 100% auto;
        pointer-events: none;
    }

    /* OC セクション: Figma 準拠で全体 cyan パネル一体化。
       上部 illustration (YOKOHAMA/TECHNOAUTO + 生徒整列) を inline <img> で描画し
       aspect ratio を保持 (background-size: 100% 100% だと 1:1.2 → 1:1.25 で縦潰れ) */
    .ytc-oc {
        padding-top: 0 !important;
        background: #8dd7ff;
        position: relative;
    }
    .ytc-oc::before { content: none !important; }

    /* PC 用 2枚組 illust は SP では非表示 */
    .ytc-oc__top-illust > img {
        display: none !important;
    }
    /* SP 用イラスト: 地面 (CSS) + YOKOHAMA / TECHNO AUTO プレート + 生徒 を重ねる。
       位置・サイズは幅 375px のデザイン上の px 値 × var(--u) で指定（画面幅に合わせて等倍拡縮） */
    .ytc-oc__top-illust {
        position: relative;
        left: 0;
        transform: none;
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        line-height: 0;
    }
    .ytc-oc__top-illust-sp {
        --u: calc(100vw / 375);
        position: relative;
        height: calc(450 * var(--u));
        overflow: hidden;
        background: var(--ytc-bg-base, #fff);
    }
    /* 地面: 奥の縁の線 (濃色) の上に水色の面を 1.5px ずらして重ねる */
    .ytc-oc__sp-floor,
    .ytc-oc__sp-floor::after {
        position: absolute;
        inset: 0;
    }
    .ytc-oc__sp-floor {
        background: var(--ytc-border-strong, #39364e);
        clip-path: polygon(0 63.67%, 43.2% 48.89%, 100% 52.78%, 100% 100%, 0 100%);
    }
    .ytc-oc__sp-floor::after {
        content: "";
        background: #8dd7ff;
        clip-path: polygon(0 64%, 43.2% 49.22%, 100% 53.11%, 100% 100%, 0 100%);
    }
    .ytc-oc__top-illust-sp img {
        position: absolute;
        max-width: none;
        height: auto;
    }
    .ytc-oc__top-illust-sp .ytc-oc__sp-yokohama {
        top: calc(73 * var(--u));
        left: 0;
        width: calc(149 * var(--u));
    }
    .ytc-oc__top-illust-sp .ytc-oc__sp-technoauto {
        top: calc(70 * var(--u));
        right: 0;
        width: calc(206.5 * var(--u));
    }
    .ytc-oc__top-illust-sp .ytc-oc__sp-students {
        top: calc(201 * var(--u));
        left: 0;
        width: calc(375 * var(--u));
    }

    /* OPEN CAMPUS wordmark: illust 直下に大きく配置 */
    .ytc-oc > .c-wordmark {
        position: relative;
        z-index: 2;
        margin-top: 20px;
        padding-top: 0;
    }
    /* content box も cyan に馴染むよう背景は透過 */
    .ytc-oc__box {
        background: transparent !important;
    }
    /* DOM順: wordmark → top-illust → box だが Figma は illust→wordmark→box なので order で並べ替え */
    .ytc-oc__top-illust { order: 1 !important; width: 100%; }
    .ytc-oc > .c-wordmark { order: 2 !important; }
    .ytc-oc__box { order: 3 !important; }

    /* SUPPORT セクション上部 illustration (バイク + 2生徒 + 梯子) */
    .ytc-support {
        /* イラスト 280px + 余白 20px + 英字見出しの上半分 28px */
        padding-top: 328px !important;
        /* イラストの床 (オフホワイト) から白地へなじませる */
        background: linear-gradient(#f7f7f7 280px, var(--ytc-bg-base, #fff) 360px);
        position: relative;
    }
    .ytc-support::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 280px;
        background: var(--ytc-bg-brand, #439fff) url("../assets/images/figma-20261002/support-sp-illustration.png") no-repeat center bottom;
        background-size: 100% auto;
        pointer-events: none;
    }

    /* INTERVIEW セクション上部 illustration (3台の車 + 4生徒 + 工具箱) */
    /* INTERVIEW セクション上部イラスト: 床 (CSS) + 車・人物・小物 (透過画像 1 枚) を重ねる。
       位置・サイズは幅 375px のデザイン上の px 値 × var(--u) で指定（画面幅に合わせて等倍拡縮）。
       セクションの地色は床と同じ水色 */
    .ytc-interview {
        padding-top: 0 !important;
        background: var(--ytc-bg-brand-soft, #6bd0ff);
        position: relative;
    }
    .ytc-interview__sp-illust {
        --u: calc(100vw / 375);
        order: 1;
        position: relative;
        width: 100%;
        height: calc(294 * var(--u));
        overflow: hidden;
        background: var(--ytc-bg-base, #fff);
    }
    /* 床: 奥の縁の線 (濃色) の上に水色の面を 1.5px ずらして重ねる */
    .ytc-interview__sp-floor,
    .ytc-interview__sp-floor::after {
        position: absolute;
        inset: 0;
    }
    .ytc-interview__sp-floor {
        background: var(--ytc-border-strong, #39364e);
        clip-path: polygon(0 45.75%, 42.24% 23.5%, 100% 29.56%, 100% 100%, 0 100%);
    }
    .ytc-interview__sp-floor::after {
        content: "";
        background: var(--ytc-bg-brand-soft, #6bd0ff);
        clip-path: polygon(0 46.26%, 42.24% 24.01%, 100% 30.07%, 100% 100%, 0 100%);
    }
    .ytc-interview__sp-illust img {
        position: absolute;
        top: calc(48 * var(--u));
        left: 0;
        width: calc(375 * var(--u));
        max-width: none;
        height: auto;
    }

    /* viewport がカード幅を限定 — list は flex row のまま translateX で切替 */
    .ytc-pickup .c-carousel-viewport,
    .ytc-oc .c-carousel-viewport,
    .ytc-interview .c-carousel-viewport {
        width: 100%;
        overflow: hidden;
    }

    /* list は row 継続 (旧 column 指定を解除) */
    .ytc-pickup__list,
    .ytc-oc__list,
    .ytc-interview__list {
        flex-direction: row !important;
        gap: 0 !important;
    }

    /* 各カードはビューポート幅ちょうど */
    .c-carousel-viewport .is-carousel.ytc-pickup__list > .c-pickup-card,
    .c-carousel-viewport .is-carousel.ytc-oc__list > .c-event-card,
    .c-carousel-viewport .is-carousel.ytc-interview__list > .c-interview-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* prev/next 矢印 + dots を Figma SP 準拠で単一行に
       Layout: [prev arrow] [••••• dots] [next arrow]
       --------------------------------------------- */
    .ytc-pickup .c-carousel-controls,
    .ytc-oc .c-carousel-controls,
    .ytc-interview .c-carousel-controls {
        position: static;
        transform: none;
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        margin: 20px auto 0;
        pointer-events: auto;
    }
    .ytc-pickup .c-carousel-controls__btn,
    .ytc-oc .c-carousel-controls__btn,
    .ytc-interview .c-carousel-controls__btn {
        position: static;
        width: 44px;
        height: 44px;
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .ytc-pickup .c-carousel-controls__btn img,
    .ytc-oc .c-carousel-controls__btn img,
    .ytc-interview .c-carousel-controls__btn img {
        width: 20px;
        height: 20px;
    }

    /* dots nav: box 底部に表示 → Figma では arrows 間 */
    .ytc-pickup__box .c-carousel-dots-nav,
    .ytc-oc__box .c-carousel-dots-nav,
    .ytc-interview__box .c-carousel-dots-nav {
        display: none !important; /* box 内の重複表示を抑制 */
    }

    /* dots-nav を box の外側下部に出し controls と Y 揃え overlap */
    .ytc-pickup__box,
    .ytc-oc__box,
    .ytc-interview__box {
        position: relative;
        padding-bottom: 60px !important; /* controls 行の分の余白 */
    }
    .ytc-pickup .c-carousel-dots-nav,
    .ytc-oc .c-carousel-dots-nav,
    .ytc-interview .c-carousel-dots-nav {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        pointer-events: auto;
    }
    .ytc-pickup .c-carousel-dots-btn,
    .ytc-oc .c-carousel-dots-btn,
    .ytc-interview .c-carousel-dots-btn {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 50%;
        background: transparent;
    }
    .ytc-pickup .c-carousel-dots-btn.is-active,
    .ytc-oc .c-carousel-dots-btn.is-active,
    .ytc-interview .c-carousel-dots-btn.is-active {
        background: var(--ytc-border-strong, #39364e);
    }

    /* controls (prev/next) を box 底部に overlay し、dots と Y 一致 */
    .ytc-pickup .c-carousel-controls,
    .ytc-oc .c-carousel-controls,
    .ytc-interview .c-carousel-controls {
        margin-top: -56px !important; /* box の padding-bottom 分を戻す */
        margin-bottom: 20px;
        z-index: 3;
    }

    /* ========================================================================
       2. KV (ヒーロー) — SP デザイン準拠 v3
       カード背景 + 2 行タイトル + 1 シーン。
       位置・サイズは幅 390px のデザイン上の px 値 × var(--u) で指定（画面幅に合わせて等倍拡縮）
       ======================================================================== */
    .ytc-kv {
        background: none;
        height: auto;
        margin-top: 0;
        padding-top: 0;
    }
    /* --u = デザイン上の 1px。ブラウザ差が出やすいコンテナクエリ単位 (cqw) と
       aspect-ratio には頼らず、画面幅から直接計算する */
    .ytc-kv__inner {
        --u: calc(min(100vw, 430px) / 390);
        /* max-width: 430px; */
        height: calc(600 * var(--u));
        overflow: hidden;
    }

    /* カード: 地色(::before) と枠線(::after) */
    .ytc-kv__inner::before,
    .ytc-kv__inner::after {
        content: "";
        position: absolute;
        top: calc(8 * var(--u));
        right: calc(15 * var(--u));
        bottom: 0;
        left: calc(15 * var(--u));
        border-radius: calc(20 * var(--u));
        pointer-events: none;
    }
    .ytc-kv__inner::before {
        background: #d7f2ff;
    }
    .ytc-kv__inner::after {
        border: 1px solid var(--ytc-border-strong);
        z-index: 2;
    }

    /* 方眼の背景: 下側を半円に切り抜く（.ytc-top img の height:auto に勝つよう詳細度を上げる） */
    .ytc-kv .ytc-kv__wbg {
        top: calc(8 * var(--u));
        left: calc(15 * var(--u));
        width: calc(358 * var(--u));
        max-width: none;
        height: calc(399 * var(--u));
        transform: none;
        opacity: 1;
        object-fit: cover;
        border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(179 * var(--u)) calc(179 * var(--u));
        z-index: 1;
    }

    /* 英字タイトル: 小見出しを上、CHALLENGE SPIRITS を下に中央寄せ */
    .ytc-kv__title-group {
        top: calc(33 * var(--u));
        left: 0;
        width: 100%;
        height: auto;
        transform: none;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: calc(9 * var(--u));
        z-index: 3;
    }
    .ytc-kv__en-sub {
        position: static;
        font-size: calc(13 * var(--u));
    }
    .ytc-kv__challenge-spirits {
        width: calc(317 * var(--u));
        height: auto;
    }

    /* PC 用の横長スライドと 1 行タイトルは出さない */
    .ytc-kv__slide,
    .ytc-kv__title-main {
        display: none;
    }

    .ytc-kv__sp {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
    }

    /* 「クルマ好き、」「ここだ。」: 1 行の SVG を左右で切り出して 2 行にする */
    .ytc-kv__sp-title-line {
        position: absolute;
        overflow: hidden;
        z-index: 1;
    }
    .ytc-kv__sp-title-line img {
        position: absolute;
        top: 0;
        width: auto;
        max-width: none;
        height: 100%;
    }
    .ytc-kv__sp-title-line--1 {
        top: calc(93 * var(--u));
        left: calc(28 * var(--u));
        width: calc(342 * var(--u));
        height: calc(81 * var(--u));
    }
    .ytc-kv__sp-title-line--1 img {
        left: 0;
    }
    .ytc-kv__sp-title-line--2 {
        top: calc(172 * var(--u));
        left: calc(37 * var(--u));
        width: calc(344 * var(--u));
        height: calc(114 * var(--u));
    }
    .ytc-kv__sp-title-line--2 img {
        left: calc(-479 * var(--u));
    }

    /* 床: 青い面 + 縁に沿った淡い線 */
    .ytc-kv__sp-floor,
    .ytc-kv__sp-floor::after {
        position: absolute;
        inset: 0;
    }
    .ytc-kv__sp-floor {
        background: #6BD0FF;
        clip-path: polygon(0 62%, 48.72% 48%, 100% 56.67%, 100% 100%, 0 100%);
    }
    .ytc-kv__sp-floor::after {
        content: "";
        background: #d7f2ff;
        clip-path: polygon(0 63.33%, 48.72% 49.33%, 100% 58%, 100% 58.42%, 48.72% 49.75%, 0 63.75%);
    }

    .ytc-kv__sp-scene {
        position: absolute;
        inset: 0;
    }
    .ytc-kv__sp-scene img {
        position: absolute;
        top: calc(var(--y) * var(--u));
        left: calc(var(--x) * var(--u));
        width: calc(var(--w) * var(--u));
        max-width: none;
        height: auto;
    }

    /* PC と同じ動き: 人物は左右にぴょこぴょこ、車 (リフトごと) はゆっくり上下 */
    .ytc-kv__sp-scene img[src*="kv-person-"] {
        animation: ytc-kv-hop 2s ease-in-out infinite;
    }
    /* 全員が同時に動かないようタイミングをずらす */
    .ytc-kv__sp-scene img[src*="kv-person-black-1"] { animation-delay: -0.5s; }
    .ytc-kv__sp-scene img[src*="kv-person-green"]   { animation-delay: -1s; }
    .ytc-kv__sp-scene img[src*="kv-person-red"]     { animation-delay: -1.5s; }
    @keyframes ytc-kv-hop {
        0%, 50%, 100% { transform: translate(0, 0); }
        25%           { transform: translate(-2px, -2px); }
        75%           { transform: translate(2px, -2px); }
    }
    .ytc-kv__sp-scene img[src*="kv-car"] {
        animation: ytc-kv-lift 2.4s ease-in-out infinite;
    }
    @keyframes ytc-kv-lift {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-6px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .ytc-kv__sp-scene img { animation: none; }
    }

    /* PICK UP wordmark: KV イラスト下部に overlap させる (Figma 準拠) */
    .ytc-pickup {
        margin-top: -80px;
        padding-top: 0;
        position: relative;
        z-index: 2;
    }
    .ytc-pickup > .c-wordmark {
        position: relative;
        z-index: 2;
        margin-top: 0;
        padding-top: 20px;
    }

    /* PICK UP: SP デザイン準拠
       枠なし・水色地にカードを直接並べ、左右に前後のカードを少し覗かせる。
       下段は [prev] [dots] [next] を中央にまとめる */
    .ytc-pickup {
        /* KV の床 (同色) に 40px だけ重ねる。重なる部分は透明にして KV の絵を隠さない
           (境目に隙間の線が出ないよう 1px だけ色を重ねる) */
        margin-top: -40px;
        background: linear-gradient(transparent 39px, var(--ytc-bg-brand-soft, #6bd0ff) 39px);
        z-index: 4;
    }
    /* KV と PICK UP の間の 3 本線 (床に引かれた V 字のライン)。
       SVG を背景に敷く (幅 375 基準で等倍拡縮)。色は線 #439fff / 縁 #39364e */
    .ytc-pickup {
        --pu: calc(100vw / 375);
    }
    .ytc-pickup::before {
        content: "";
        position: absolute;
        top: calc(-15 * var(--pu));
        left: 0;
        width: 100%;
        height: calc(132 * var(--pu));
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 132' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M-5 50.3L229 84 380 3.3' stroke='%2339364e' stroke-width='9'/%3E%3Cpath d='M-5 50.3L229 84 380 3.3' stroke='%23439fff' stroke-width='6'/%3E%3Cpath d='M-5 70.8L229 104.5 380 23.8' stroke='%2339364e' stroke-width='9'/%3E%3Cpath d='M-5 70.8L229 104.5 380 23.8' stroke='%23439fff' stroke-width='6'/%3E%3Cpath d='M-5 91.3L229 125 380 44.3' stroke='%2339364e' stroke-width='9'/%3E%3Cpath d='M-5 91.3L229 125 380 44.3' stroke='%23439fff' stroke-width='6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
        pointer-events: none;
    }
    .ytc-pickup .c-pickup-card {
        box-shadow: 6px 6px 0 -1px var(--ytc-bg-brand, #439fff), 6px 6px 0 0 var(--ytc-border-strong, #39364e);
    }
    .ytc-pickup > .c-wordmark {
        top: auto;
        left: auto;
        transform: none;
        margin-top: calc(100 * var(--pu)); /* 3 本線の下に 33px ほど空けて置く */
        padding-top: 0; /* padding だと影 (absolute) だけ上にずれる */
        font-size: 56px;
    }
    .ytc-top .ytc-pickup__box {
        width: 100%;
        max-width: 100%;
        margin: 30px 0 0;
        padding: 0 !important;
        background: none;
        border: 0;
        border-radius: 0;
        gap: 0;
    }
    /* list の幅 = カード 1 枚 + 間隔。JS の translateX(-100%) がちょうど 1 枚分の送りになる */
    .ytc-top .ytc-pickup__list {
        width: calc(100% - 62px + 15px);
        margin-left: 31px;
        padding-bottom: 9px; /* カードの影 (8px) が viewport で切れないように */
        align-items: stretch;
    }
    .ytc-top .c-carousel-viewport .is-carousel.ytc-pickup__list > .c-pickup-card {
        flex: 0 0 calc(100% - 15px) !important;
        width: calc(100% - 15px) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: 15px;
    }
    .ytc-pickup .c-pickup-card__thumb {
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .ytc-pickup .c-pickup-card__date {
        font-size: 14px;
    }
    .ytc-pickup .c-pickup-card__title {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
    }
    .ytc-top .ytc-pickup .c-carousel-controls {
        width: 284px;
        max-width: calc(100% - 62px);
        margin: 15px auto 0 !important;
    }
    .ytc-top .ytc-pickup .c-carousel-dots-nav {
        top: calc(100% + 15px);
        bottom: auto;
        height: 44px;
        gap: 21px;
        margin: 0;
    }
    .ytc-top .ytc-pickup .c-carousel-dots-btn {
        width: 10px;
        height: 10px;
        background: #fff;
    }
    .ytc-top .ytc-pickup .c-carousel-dots-btn.is-active {
        background: var(--ytc-bg-brand, #439fff);
    }

    /* COURSE 見出し: SP デザイン準拠
       大きい英字を箱の上辺にまたがせ、黄色ピルは箱幅いっぱい、見出しは 2 行 */

    .ytc-course {
        padding: 60px 15px 0;
    }
    .ytc-course .c-wordmark {
        top: 32px; /* 箱の上辺 (padding-top 60px) が文字の中央に来る位置 */
        font-size: 56px;
    }
    /* 2026-10-14: SP ではアニメーションを完全に無効化して常時表示 (ずれ・消失防止) */
    .ytc-course .c-wordmark[data-ytc-stagger],
    .ytc-course .c-wordmark[data-ytc-stagger].is-in-view,
    [data-ytc-anim-variant="pop"] .ytc-course .c-wordmark[data-ytc-stagger],
    [data-ytc-anim-variant="pop"] .ytc-course .c-wordmark[data-ytc-stagger].is-in-view {
        transform: translateX(-50%) !important;
        opacity: 1 !important;
    }
    .ytc-course__box {
        padding-top: 52px;
        gap: 30px;
    }
    .ytc-course .c-section-heading {
        gap: 12px;
        padding: 0 6px;
    }
    .ytc-course .c-section-heading__pill {
        width: 100%;
        max-width: none;
        height: 32px;
        font-size: 15px;
    }
    /* 「技術で自分を表現できる」(11 文字) が 1 行に収まるよう、狭い画面では文字を縮める */
    .ytc-course .c-section-heading__title {
        max-width: 11.5em;
        font-size: min(26px, calc((100vw - 72px) / 11.5));
        line-height: 1.5;
    }

    /* OPEN CAMPUS / SPECIAL INTERVIEW: SP デザイン準拠
       枠なし・水色地に 見出し → カード (左右に前後が覗く) → [prev][dots][next] → 黒ボタン の順。
       box を display: contents にして中身を section 直下の flex item として並べ替える
       (controls が box の外にあり、ボタンより上に置く必要があるため) */
    .ytc-top .ytc-oc,
    .ytc-top .ytc-interview {
        padding-bottom: 40px !important;
    }
    .ytc-oc .c-wordmark,
    .ytc-interview .c-wordmark {
        top: auto; /* PC 用の absolute 配置の名残 (下に 25px ずれる) を解除 */
        left: auto;
        transform: none;
        line-height: 1.1;
    }
    .ytc-top .ytc-oc__box,
    .ytc-top .ytc-interview__box {
        display: contents;
    }
    /* INTERVIEW の英字見出しは PC 用の absolute / 固定幅を解除して通常の並びに戻す */
    .ytc-interview .c-wordmark {
        position: relative;
        width: auto;
        order: 2;
    }
    .ytc-interview .c-carousel-viewport     { order: 4; }
    .ytc-interview .c-carousel-dots-nav     { order: 5; }
    .ytc-interview .c-carousel-controls     { order: 6; }
    .ytc-interview .c-btn                   { order: 7; }
    .ytc-oc .c-section-heading       { order: 3; }
    .ytc-oc .c-carousel-viewport     { order: 4; }
    .ytc-oc .c-carousel-dots-nav     { order: 5; }
    .ytc-oc .c-carousel-controls     { order: 6; }
    .ytc-oc .c-btn                   { order: 7; }

    .ytc-oc .c-section-heading {
        gap: 12px;
        margin-top: 24px;
        padding: 0 36px;
    }
    .ytc-oc .c-section-heading__pill {
        width: 100%;
        max-width: none;
        height: 32px;
        font-size: 15px;
    }
    /* 2 行目「未来の自分を想像しよう」(11 文字) が 1 行に収まるよう、狭い画面では文字を縮める */
    .ytc-oc .c-section-heading__title {
        font-size: min(26px, calc((100vw - 76px) / 11));
        line-height: 1.5;
    }
    .ytc-oc .c-section-heading__lead {
        font-size: 14px;
        line-height: 1.8;
        text-align: center;
    }

    .ytc-oc .c-carousel-viewport,
    .ytc-interview .c-carousel-viewport {
        margin-top: 27px;
    }
    /* list の幅 = カード 1 枚 + 間隔。JS の translateX(-100%) がちょうど 1 枚分の送りになる */
    .ytc-top .ytc-oc__list,
    .ytc-top .ytc-interview__list {
        width: calc(100% - 60px + 14px);
        margin-left: 30px;
        padding-bottom: 9px; /* カードの影が viewport で切れないように */
    }
    .ytc-top .c-carousel-viewport .is-carousel.ytc-oc__list > .c-event-card,
    .ytc-top .c-carousel-viewport .is-carousel.ytc-interview__list > .c-interview-card {
        flex: 0 0 calc(100% - 14px) !important;
        width: calc(100% - 14px) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: 14px;
    }
    .ytc-oc .c-event-card,
    .ytc-interview .c-interview-card {
        box-shadow: 6px 6px 0 -1px var(--ytc-bg-brand, #439fff), 6px 6px 0 0 var(--ytc-border-strong, #39364e);
    }
    .ytc-oc .c-event-card__thumb,
    .ytc-interview .c-interview-card__thumb {
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .ytc-interview .c-interview-card__cat {
        margin: 0; /* p の既定マージンでタグとの間が空きすぎるのを詰める */
    }
    .ytc-oc .c-event-card__date {
        padding: 5px 0;
        color: var(--ytc-text-primary, #000);
    }
    .ytc-oc .c-event-card__title {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
    }

    /* dots の行と prev/next の行を同じ高さに重ねる */
    .ytc-top .ytc-oc .c-carousel-dots-nav,
    .ytc-top .ytc-interview .c-carousel-dots-nav {
        position: static;
        transform: none;
        height: 44px;
        gap: 21px;
        margin: 22px 0 0;
    }
    .ytc-top .ytc-oc .c-carousel-controls,
    .ytc-top .ytc-interview .c-carousel-controls {
        width: 274px;
        max-width: calc(100% - 60px);
        margin: -44px auto 0 !important;
        pointer-events: none; /* 下にある dots を押せるように。ボタン自体は押せる */
    }
    .ytc-oc .c-carousel-controls__btn,
    .ytc-interview .c-carousel-controls__btn {
        pointer-events: auto;
    }
    .ytc-top .ytc-oc .c-carousel-dots-btn,
    .ytc-top .ytc-interview .c-carousel-dots-btn {
        width: 10px;
        height: 10px;
        background: #fff;
    }
    .ytc-top .ytc-oc .c-carousel-dots-btn.is-active,
    .ytc-top .ytc-interview .c-carousel-dots-btn.is-active {
        background: var(--ytc-bg-brand, #439fff);
    }
    .ytc-oc .c-btn--primary,
    .ytc-interview .c-btn--primary {
        width: calc(100% - 72px);
        height: 48px;
        margin-top: 25px;
    }

    /* prev/next: SVG 自体が「白丸 + 枠 + 矢印」なので、ボタン側の丸は消して SVG を 44px で表示する
       (丸の中に小さい丸が入って矢印が潰れるのを防ぐ) */
    .ytc-top .ytc-pickup .c-carousel-controls__btn,
    .ytc-top .ytc-oc .c-carousel-controls__btn,
    .ytc-top .ytc-interview .c-carousel-controls__btn {
        border: 0;
        background: none;
    }
    .ytc-top .ytc-pickup .c-carousel-controls__btn img,
    .ytc-top .ytc-oc .c-carousel-controls__btn img,
    .ytc-top .ytc-interview .c-carousel-controls__btn img {
        width: 44px;
        height: 44px;
    }

    /* INTERVIEW 下端: 床の手前の角 (下向きの山形) + 濃色の縁 + 下にグレーの影。
       SVG を背景に敷く (幅 375 基準で等倍拡縮)。色は床 #6bd0ff / 縁 #39364e / 影 #dcdcdc / 地 #fff */
    .ytc-top .ytc-interview {
        padding-bottom: 0 !important;
    }
    .ytc-interview::after {
        content: "";
        order: 99;
        width: 100%;
        height: calc(120 * 100vw / 375);
        margin-top: 30px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 120' preserveAspectRatio='none'%3E%3Crect width='375' height='120' fill='%23fff'/%3E%3Cpath d='M375 16v18L231 114 0 80V62z' fill='%23dcdcdc'/%3E%3Cpath d='M0 0h375v16L231 96 0 62z' fill='%236bd0ff'/%3E%3Cpath d='M375 16 231 96 0 62' fill='none' stroke='%2339364e' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
        pointer-events: none;
    }

    /* SUPPORT 見出し: SP デザイン準拠 (COURSE と同じ形)
       大きい英字を箱の上辺にまたがせ、黄色ピルは箱幅いっぱい、見出しは 3 行 */
    .ytc-support {
        padding: 60px 20px 0;
    }
    .ytc-support .c-wordmark {
        top: 300px; /* 箱の上辺 (padding-top 328px) が文字の中央に来る位置 */
    }
    /* 2026-10-14: SP ではアニメーションを完全に無効化して常時表示 */
    .ytc-support .c-wordmark[data-ytc-stagger],
    .ytc-support .c-wordmark[data-ytc-stagger].is-in-view,
    [data-ytc-anim-variant="pop"] .ytc-support .c-wordmark[data-ytc-stagger],
    [data-ytc-anim-variant="pop"] .ytc-support .c-wordmark[data-ytc-stagger].is-in-view {
        transform: translateX(-50%) !important;
        opacity: 1 !important;
    }
    .ytc-support__box {
        padding-top: 52px;
        gap: 30px;
    }
    .ytc-support .c-section-heading {
        gap: 12px;
        padding: 0 6px;
    }
    .ytc-support .c-section-heading__pill {
        width: 100%;
        max-width: none;
        height: 32px;
        font-size: 15px;
    }
    .ytc-support .c-section-heading__title {
        font-size: 26px;
        line-height: 1.5;
    }
    .ytc-support .ytc-pc-only {
        display: none;
    }

    /* 英字見出しの白文字に濃色のフチを付ける (PICK UP / COURSE / OPEN CAMPUS / SUPPORT) */
    .ytc-pickup .c-wordmark__front,
    .ytc-course .c-wordmark__front,
    .ytc-oc .c-wordmark__front,
    .ytc-support .c-wordmark__front,
    .ytc-interview .c-wordmark__front,
    .ytc-news .c-wordmark__front {
        -webkit-text-stroke: 2px var(--ytc-border-strong, #39364e);
        paint-order: stroke fill;
    }

    /* ========================================================================
       3. NEWS: SP デザイン準拠
       英字見出し → タブ 2 つ → 罫線区切りの記事リスト (左サムネ / 右にカテゴリ・日付・タイトル) → 黒ボタン
       ======================================================================== */
    .ytc-news {
        gap: 0;
        padding: 30px 20px 43px;
    }
    .ytc-news .c-wordmark {
        font-size: 56px;
    }
    .ytc-news__list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #c8c8c8;
    }
    :where(body.is-top) .c-article-row {
        display: grid !important;
        grid-template-columns: min(150px, 42%) 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "thumb meta"
            "thumb title";
        gap: 8px 20px;
        width: 100%;
        padding: 26px 0;
        align-items: start;
        background: none;
        border: 0;
        border-bottom: 1px solid #c8c8c8;
        border-radius: 0;
    }
    :where(body.is-top) .c-article-row__thumb {
        grid-area: thumb;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        border-radius: 4px;
    }
    :where(body.is-top) .c-article-row__thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }
    /* カテゴリの下に日付を縦に並べる */
    :where(body.is-top) .c-article-row__meta {
        grid-area: meta;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    :where(body.is-top) .c-article-row__cat {
        box-sizing: border-box;
        min-width: 80px;
        padding: 3px 12px;
        background: var(--ytc-bg-base, #fff);
        color: var(--ytc-text-primary, #000);
        font-size: 12px;
        text-align: center;
    }
    :where(body.is-top) .c-article-row__date {
        font-size: 14px;
    }
    :where(body.is-top) .c-article-row__title {
        grid-area: title;
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ytc-news .c-btn--primary {
        width: 305px;
        max-width: 100%;
        height: 48px;
        margin-top: 30px;
    }

    /* ========================================================================
       4. 全体: box の左右マージン統一
       ======================================================================== */
    .ytc-pickup__box,
    .ytc-course__box,
    .ytc-oc__box,
    .ytc-support__box,
    .ytc-interview__box {
        margin: 0 12px;
    }

    /* ========================================================================
       5. COURSE カード: SP デザイン準拠
       年制 + 学位のバッジをカード上辺にまたがせて横並び / その下に学科名 (中央寄せ)
       白地部分はタグ (中央寄せ・折り返し) と VIEW MORE
       ======================================================================== */
    .ytc-course__grid {
        gap: 40px;
        margin-top: 16px; /* 上にはみ出すバッジの分 */
    }
    :where(body.is-top) .c-course-card,
    :where(body.is-top) .c-course-card--total {
        height: auto;
    }
    :where(body.is-top) .c-course-card__head {
        padding: 0 10px 22px;
    }
    :where(body.is-top) .c-course-card__head-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center;
        gap: 14px 12px;
        width: 100%;
        padding: 0;
    }
    :where(body.is-top) .c-course-card__year,
    :where(body.is-top) .c-course-card__type {
        box-sizing: border-box;
        width: 120px;
        height: 32px;
        margin-top: -16px; /* 高さの半分だけカードの外に出す */
        padding: 0;
    }
    :where(body.is-top) .c-course-card__year  { order: 1; font-size: 15px; }
    :where(body.is-top) .c-course-card__year em { font-size: 22px; line-height: 1; }
    :where(body.is-top) .c-course-card__type  { order: 2; font-size: 15px; }
    :where(body.is-top) .c-course-card__title {
        order: 3;
        width: 100%;
        text-align: center;
        font-size: min(26px, 7vw);
        margin: 0;
        white-space: normal;
        -webkit-text-stroke: 3px var(--ytc-border-strong, #39364e);
        paint-order: stroke fill;
        text-shadow: none;
    }
    :where(body.is-top) .c-course-card__body {
        padding: 22px 12px 24px;
        gap: 26px;
    }
    :where(body.is-top) .c-course-card__tags {
        gap: 12px;
    }
    :where(body.is-top) .c-course-card .c-tag {
        height: 32px;
        padding: 0 12px;
        font-size: 15px;
    }
    :where(body.is-top) .c-course-card__more {
        gap: 6px;
        font-size: 14px;
    }
    :where(body.is-top) .c-course-card__more img {
        width: 14px;
        height: 14px;
    }

    /* ========================================================================
       6. OC / SUPPORT / INTERVIEW 周辺の wordmark サイズ最適化
       Figma: OPEN / CAMPUS 2行の巨大italic。SPECIAL / INTERVIEW も同様。
       ======================================================================== */
    .ytc-oc .c-wordmark,
    .ytc-interview .c-wordmark,
    .ytc-support .c-wordmark {
        font-size: 56px;
        max-width: 100%;
        text-align: center;
        line-height: 1;
        display: block !important;
        white-space: normal;
        word-break: keep-all;
    }
    .ytc-oc .c-wordmark__shadow,
    .ytc-oc .c-wordmark__front,
    .ytc-interview .c-wordmark__shadow,
    .ytc-interview .c-wordmark__front,
    .ytc-support .c-wordmark__shadow,
    .ytc-support .c-wordmark__front {
        display: block;
        width: 100%;
        text-align: center;
        white-space: normal;
        word-break: keep-all;
    }
    .ytc-oc .c-wordmark__shadow,
    .ytc-interview .c-wordmark__shadow,
    .ytc-support .c-wordmark__shadow {
        position: absolute !important;
        top: 4px !important;
        left: 4px !important;
        right: 4px !important;
    }

    /* ========================================================================
       7. NEWS タブ (お知らせ / ブログ): 150x40 のピル 2 つを中央寄せ
       ======================================================================== */
    .ytc-news__tabs {
        gap: 15px;
        justify-content: center;
        width: 100%;
        margin-top: 27px;
    }
    .ytc-news__tab {
        width: auto !important;
        flex: 0 1 150px;
        min-width: 0;
        height: 40px;
        padding: 0 8px;
        font-size: 16px;
    }

    /* ========================================================================
       8. SP: dual CTA バナー (OPEN CAMPUS / SCHOOL GUIDE) を accordion の
       前に表示 (Figma SP 準拠)
       ======================================================================== */
    .site-footer__cta-band {
        display: block !important;
        background: var(--ytc-bg-brand, #439fff);
        padding: 20px 16px;
    }
    .site-footer__cta-inner {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .site-footer__cta {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 999px;
        text-decoration: none;
        min-height: 72px;
    }
    .site-footer__cta--oc {
        background: var(--ytc-bg-accent, #ffef6b);
        color: var(--ytc-text-primary, #000);
    }
    .site-footer__cta--doc {
        background: var(--ytc-bg-success, #20d99b);
        color: var(--ytc-text-primary, #000);
    }
    .site-footer__cta-icon {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .site-footer__cta-icon svg {
        width: 44px;
        height: 44px;
    }
    .site-footer__cta-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
    }
    .site-footer__cta-sub {
        font-size: 11px;
        font-weight: 500;
    }
    .site-footer__cta-main {
        font-family: var(--ytc-font-en);
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0.05em;
    }

    /* ========================================================================
       10. SUPPORT 統計カード (SP) — Figma 準拠: 1 列縦積み + 各カードに illustration
       ======================================================================== */
    .ytc-support__stats {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        gap: 40px;
        height: auto;
        padding: 17px 4px 0; /* 上: 1 枚目のピルがはみ出す分 */
    }
    /* カード: 黄色ピルを点線枠の上辺にまたがせ、中央に大きい数字・説明 1 行・注記。右下に人物 */
    .ytc-support__stats > .c-stat-card {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .ytc-support__stats > .c-stat-card .c-stat-card__pill {
        width: 190px;
        height: 34px;
        margin: -17px 0 -17px;
    }
    .ytc-support__stats > .c-stat-card .c-stat-card__body {
        padding: 34px 0 22px;
        gap: 12px;
    }
    .ytc-support__stats > .c-stat-card .c-stat-card__value {
        font-size: 60px;
        line-height: 1;
        -webkit-text-stroke: 2px var(--ytc-border-strong, #39364e);
        paint-order: stroke fill;
    }
    .ytc-support__stats > .c-stat-card.c-stat-card--kana .c-stat-card__value {
        font-size: 34px;
        line-height: 1.4;
    }
    .ytc-support__stats > .c-stat-card .c-stat-card__desc {
        font-size: 15px;
        line-height: 1.5;
    }
    /* 数字カードの説明は 1 行に流す (文字カードは右下のイラストを避けるため 2 行のまま) */
    .ytc-support__stats > .c-stat-card:not(.c-stat-card--kana) .c-stat-card__desc br {
        display: none;
    }
    .ytc-support__stats > .c-stat-card .c-stat-card__note {
        font-size: 12px;
    }

    /* 各カード右下にイラスト重ね */
    .ytc-support__stats > .c-stat-card::after {
        content: "";
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 44px;
        height: 106px;
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: contain;
        pointer-events: none;
        z-index: 2;
    }
    .ytc-support__stats > .c-stat-card:nth-child(1)::after {
        background-image: url("../assets/images/figma-20261002/kv-person-red.png");
    }
    .ytc-support__stats > .c-stat-card:nth-child(2)::after {
        background-image: url("../assets/images/figma-20261002/kv-person-green.png");
    }
    .ytc-support__stats > .c-stat-card:nth-child(3)::after {
        background-image: url("../assets/images/figma-20261002/kv-car.png");
        right: 6px;
        bottom: 6px;
        width: 72px;
        height: 68px;
    }
    .ytc-support__stats > .c-stat-card:nth-child(4)::after {
        background-image: url("../assets/images/figma-20261002/support-illust-4.png");
        right: 6px;
        bottom: 6px;
        width: 72px;
        height: 58px;
    }

    /* 絶対配置の装飾イラスト (PC 用) は SP で非表示 */
    .ytc-support__illust {
        display: none !important;
    }

    /* ========================================================================
       9. フッター social icons 表示 (lazy load → 空円対策)
       ======================================================================== */
    .site-footer__sns-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .site-footer__sns-btn picture,
    .site-footer__sns-btn img {
        display: block;
        width: 28px !important;
        height: 28px !important;
        object-fit: contain;
    }
}

/* ------------------------------------------------------------------
 * フッター social icons: lazy load が naturalWidth=0 で詰まる事象の
 * 迂回策として、CSS background-image で描画する (PC/SP 両方)
 * ------------------------------------------------------------------ */
.site-footer__sns-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.site-footer__sns-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
    pointer-events: none;
}
.site-footer__sns-btn[aria-label="YouTube"]::after {
    background-image: url("images/sns-youtube.png");
}
.site-footer__sns-btn[aria-label="Instagram"]::after {
    background-image: url("images/sns-instagram.png");
}
.site-footer__sns-btn[aria-label="Facebook"]::after {
    background-image: url("images/sns-facebook.png");
}
.site-footer__sns-btn picture,
.site-footer__sns-btn img { opacity: 0; width: 24px; height: 24px; }

/* ----------------------------------------------------------------------------
 * 下層ページ
 * -------------------------------------------------------------------------- */


 .c-breadcrumb a, .c-breadcrumb a:visited {
    color: #fff;
 }

 /* 下層ページの英字見出し: 白文字に濃色のフチ + 右下にずらした濃い青の影 (影にも同じフチ)。
    影の色は背景パネル (#439fff) と同色だと見えないので一段濃い青にする */
 .c-page-hero__wordmark-front.c-page-hero__wordmark-front,
 .c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow {
    -webkit-text-stroke: 2px var(--ytc-border-strong, #39364e);
    paint-order: stroke fill;
 }
 .c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow {
    top: 4px;
    left: 4px;
    color: var(--ytc-bg-brand-strong, #2f8aee);
 }
 /* 女子トーク (ピンクのパネル) は濃いピンクの影 */
 .page-about-girls-talk .c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow {
    color: #a63060;
 }

 /* 下層ページのセクション英字見出し (CALENDAR / NUMBERS など): ページ見出しと同じく
    白文字に濃色のフチ + 右下にずらした影 (影にも同じフチ)。
    影の色は各所の指定 (既定は青、NUMBERS は黄色など) をそのまま使う */
 .c-section-heading-sub__en-front.c-section-heading-sub__en-front,
 .c-section-heading-sub__en-shadow.c-section-heading-sub__en-shadow {
    -webkit-text-stroke: 2px var(--ytc-border-strong, #39364e);
    paint-order: stroke fill;
 }
 .c-section-heading-sub__en-shadow.c-section-heading-sub__en-shadow {
    top: 4px;
    left: 4px;
 }

 /* 下層ページの数字カード (就職率 100% など): 数字と単位に濃色のフチを付ける。
    「%」は数字と同じ欧文書体・同じ大きさ、「倍」「年」などは小さめの和文で数字の下端に揃える */
 .c-stat-card-sub__value.c-stat-card-sub__value {
    align-items: baseline;
 }
 .c-stat-card-sub__value-num.c-stat-card-sub__value-num,
 .c-stat-card-sub__value-unit.c-stat-card-sub__value-unit {
    -webkit-text-stroke: 2px var(--ytc-border-strong, #39364e);
    paint-order: stroke fill;
 }
 .c-stat-card-sub__value-unit--latin.c-stat-card-sub__value-unit--latin {
    font-family: "Montserrat", sans-serif;
    font-size: 70px;
 }


 .page-about__president-photo {
    aspect-ratio: initial;
    height: 250px;
 }

 .page-about__president-photo img {
    object-position: 0 -30px;
 }

 .c-section-box.page-about__links {
    margin-bottom: 50px;
 }


 /* SP: パンくずの二重表示を解消。
    ヘッダー直下の青バー (.site-breadcrumb) と、ヒーロー上部の濃青バー (.c-page-hero 内の .c-breadcrumb) が
    両方出るため、ヒーロー側があるページではヘッダー側を隠す (ヒーローの無いページはヘッダー側のまま) */
 @media screen and (max-width: 768px) {
    body:has(.c-page-hero .c-breadcrumb) .site-breadcrumb {
        display: none;
    }

    /* SP ヒーロー: デザイン準拠
       英字見出しは 50px で写真の下辺にまたがせる。
       layout.css の SP ガード ([class*="__wordmark"] を 6vw に縮小 + overflow: hidden) が
       文字を 22px にして影も切ってしまうので、ヒーローの見出しだけ打ち消す
       (相手の詳細度が高いのでクラスを重ねて勝たせている)。
       長い語 (OPEN CAMPUS など) は画面からはみ出さないよう折り返す */
    .c-page-hero__panel.c-page-hero__panel {
        padding-top: 0;
    }
    .c-page-hero .c-page-hero__wordmark.c-page-hero__wordmark.c-page-hero__wordmark {
        z-index: 2;
        display: flex;
        justify-content: center;
        /* 2026-10-19 [common] Figma SP: 50px/50 の英字を画面幅いっぱい (375) で中央寄せ、写真の下 30px に重ねる。
           2語 (CAMPUS LIFE / STUDENT VOICE 等) は自然に 2 行に折り返す (Figma と同じ)。
           旧: clamp(26px,9vw,40px) + max-width calc(100vw - 60px) で 1 行の小さい文字になっていた。
           パネルの左右 padding 24px を負マージンで打ち消して 375 幅を使う。 */
        margin: -30px -24px 0;
        width: calc(100% + 48px);
        overflow: visible !important;
        font-size: min(50px, 13.33vw) !important;
        max-width: none !important;
        letter-spacing: -0.02em !important; /* 11 文字の 1 語 (SCHOLARSHIP 等) でも 375 幅に収まるよう 1px/字だけ詰める */
        line-height: 1;
        text-align: center;
        white-space: normal !important;
        word-break: keep-all;
        overflow-wrap: normal !important;
    }
    /* 画像の無いヒーロー: 写真に重ねる負マージンを外し、パンくず帯の下 30px から置く (旧: 3 ページで個別回避) */
    .c-page-hero:not(:has(.c-page-hero__image img)) .c-page-hero__panel.c-page-hero__panel { padding-top: 30px; }
    .c-page-hero:not(:has(.c-page-hero__image img)) .c-page-hero__wordmark.c-page-hero__wordmark.c-page-hero__wordmark { margin-top: 0; }
    .c-page-hero .c-page-hero__wordmark-front.c-page-hero__wordmark-front.c-page-hero__wordmark-front,
    .c-page-hero .c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow {
        display: block;
        overflow: visible !important;
        font-size: inherit !important;
        letter-spacing: inherit !important; /* 2026-10-19 [common] 親 (-0.02em) を継承 */
        white-space: normal !important;
    }
    .c-page-hero .c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow {
        left: 4px;
        right: -4px !important; /* front と同じ幅で折り返すように (P0 の right:0 !important を打ち消す) */
        max-width: none !important;
        overflow-wrap: normal !important;
    }
    .c-page-hero .c-page-hero__wordmark-front.c-page-hero__wordmark-front.c-page-hero__wordmark-front {
        max-width: none !important;
        overflow-wrap: normal !important;
    }

    .page-about {
        padding: 0;
    }

    .c-page-hero__image.c-page-hero__image {
        margin: 30px 20px 0;
    }

    .c-page-hero.c-page-hero::after {
        width: 300px;
        height: 150px;
    }
 }

 .c-section-box.c-section-box:last-child {
    margin-bottom: 50px;
 }

 /* SP: 下層ページ共通コンポーネントをデザイン準拠に (ページ固有クラスではなく c-* に対して指定)
    - セクション箱: 英字見出しは箱の上にまたがせず、箱の中の先頭に置く
    - 数字カード: 1 列に積み、ピル → 大きい数字 → 注記 をコンパクトに */
 @media screen and (max-width: 768px) {
    /* 左右に 20px ずつ空ける。箱は width: 100% なので、margin だけだと右にはみ出す → 幅も 40px 減らす。
       上の余白は元の指定を生かすため、左右だけ指定する */


    .c-section-box.c-section-box {
        padding: 30px 20px 28px;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
    }

    .c-section-box.c-section-box--brand-soft {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .c-section-box__heading.c-section-box__heading {
        position: static;
        transform: none;
        margin-bottom: 22px;
    }
    /* SP で CLASS1 / CLASS2 / BODYWORK / ADVANTAGE / SCHEDULE / PARTNERS 等 1語の斜体英字が
       section-box の内側で右へはみ出さないよう clamp で縮小 + max-width で画面幅内収納。 */
    .c-section-heading-sub__en.c-section-heading-sub__en {
        font-size: clamp(26px, 8vw, 40px);
        max-width: calc(100vw - 60px);
    }

    /* 数字カードを並べている親 (ページごとにクラス名が違う) を 1 列にする */
    .c-section-box :has(> .c-stat-card-sub) {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .c-stat-card-sub.c-stat-card-sub {
        gap: 6px;
        max-width: none;
        min-height: 0;
        padding: 14px 10px 12px;
    }
    .c-stat-card-sub__pill.c-stat-card-sub__pill {
        padding: 4px 14px;
        font-size: 13px;
    }
    .c-stat-card-sub__value-num.c-stat-card-sub__value-num,
    .c-stat-card-sub__value-unit--latin.c-stat-card-sub__value-unit--latin {
        font-size: 64px;
    }
    .c-stat-card-sub__value-unit.c-stat-card-sub__value-unit:not(.c-stat-card-sub__value-unit--latin) {
        font-size: 44px;
    }
    .c-stat-card-sub__note.c-stat-card-sub__note {
        font-size: 13px;
    }
 }

 /* SP: 濃水色のセクション箱 (c-section-box--brand-soft) はデザイン準拠で上下を斜めに切った「板」にする。
    - ::before = 上下の縁の線 (濃色)、::after = 水色の面を線の太さ分だけ内側に重ねる (KV / OC の床と同じ手法)
    - 下のグレーの厚みは箱ごと drop-shadow で落とす (clip-path した要素自身の影は切れてしまうため)
    - 傾きは箱の高さに左右されないよう px で指定 */
 @media screen and (max-width: 768px) {
    .c-section-box--brand-soft.c-section-box--brand-soft {
        --cut-peak: 30%;     /* 上辺の頂点の位置 */
        --cut-top-l: 44px;   /* 上辺: 左端の下がり幅 */
        --cut-top-r: 16px;   /* 上辺: 右端の下がり幅 */
        --cut-dip: 77%;      /* 下辺の最下点の位置 */
        --cut-btm-l: 42px;   /* 下辺: 左端の上がり幅 */
        --cut-btm-r: 46px;   /* 下辺: 右端の上がり幅 */
        --cut-line: 1.5px;
        isolation: isolate;
        padding: calc(var(--cut-top-l) + 36px) 20px calc(var(--cut-btm-r) + 30px);
        margin-bottom: 16px; /* 影の分 */
        background: none;
        border: 0;
        border-radius: 0;
        filter: drop-shadow(0 16px 0 #d9d9d9);
    }
    .c-section-box--brand-soft.c-section-box--brand-soft::before,
    .c-section-box--brand-soft.c-section-box--brand-soft::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
    }
    .c-section-box--brand-soft.c-section-box--brand-soft::before {
        background: var(--ytc-border-strong, #39364e);
        clip-path: polygon(
            0 var(--cut-top-l),
            var(--cut-peak) 0,
            100% var(--cut-top-r),
            100% calc(100% - var(--cut-btm-r)),
            var(--cut-dip) 100%,
            0 calc(100% - var(--cut-btm-l))
        );
    }
    .c-section-box--brand-soft.c-section-box--brand-soft::after {
        background: var(--ytc-bg-brand-soft, #6bd0ff);
        clip-path: polygon(
            0 calc(var(--cut-top-l) + var(--cut-line)),
            var(--cut-peak) var(--cut-line),
            100% calc(var(--cut-top-r) + var(--cut-line)),
            100% calc(100% - var(--cut-btm-r) - var(--cut-line)),
            var(--cut-dip) calc(100% - var(--cut-line)),
            0 calc(100% - var(--cut-btm-l) - var(--cut-line))
        );
    }
 }

 /* 学校案内 > 沿革: 写真は PC では箱の中の左右 2 列、SP では箱の下の横スワイプのスライダー */
 .page-about__history-slider {
    display: none;
 }
 @media screen and (max-width: 768px) {
    .page-about__history-photos {
        display: none;
    }
    /* 見出し (HISTORY / 沿革) は箱の外・上に出し、白い箱は年表だけを囲む。
       section 自体の枠と地を外して、中の body を箱にする */
    .c-section-box.page-about__history {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .page-about__history .c-section-box__heading.c-section-box__heading {
        margin-bottom: 24px;
    }
    .page-about__history .c-section-box__body.c-section-box__body {
        box-sizing: border-box;
        padding: 18px;
        background: var(--ytc-bg-base, #fff);
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 5px; /* 2026-10-19 Figma SP: padding 18 / 角丸 5 */
    }
    .page-about__history-divider {
        display: none;
    }
    /* 年表の行 (共通部品): 年の下にできごとを置く縦積み */
    .c-history-list.c-history-list {
        gap: 10px;
    }
    .c-history-row__dot.c-history-row__dot {
        height: 25px; /* 年の 1 行分 (14px x 1.8) に合わせる */
    }
    .c-history-row__text.c-history-row__text {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .c-history-row__year.c-history-row__year {
        width: auto;
    }
    /* 中央の 1 枚を大きく見せ、左右に前後の写真を覗かせる。スワイプで 1 枚ずつ止まる */
    .page-about__history-slider {
        display: flex;
        gap: 15px;
        box-sizing: border-box;
        width: 100%;
        margin-top: -6px; /* .page-about の SP の gap 30px を詰めて、箱との間を 24px にする */
        padding: 0 13.5%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .page-about__history-slider::-webkit-scrollbar {
        display: none;
    }
    .page-about__history-slider img {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 10px;
        box-sizing: border-box;
        scroll-snap-align: center;
    }
 }

 .c-section-box.page-course__compare {
    padding: 110px 0 0; /* 2026-10-19 [common] Figma 110 (旧 130。page-course.css の個別上書きを統合) */
    border: none;
 }

 .page-admission__type {
    gap: 8px;
 }

 .page-admission__type-name {
    color: var(--ytc-bg-brand);
    border-bottom: none;
    text-align: center;
    padding-bottom: 0;
 }

 .page-admission__type-lead,
 .page-admission__type-desc {
    text-align: center;
 }

 .page-admission__type-cta {
    justify-content: center;
 }

 .c-section-box.c-section-box--success {
    /* 2026-10-19 [common] padding-top:160 を廃止 → 共通 (110 / リード付き 150) に従う */
    background: #d8f7ec;
 }

 .c-feature-numbered.c-feature-numbered {
    align-items: center;
    text-align: center;
 }

 .c-interview-card-sub__profile.c-interview-card-sub__profile {
    flex-direction: row;
 }

 .c-interview-card-sub__meta.c-interview-card-sub__meta {
    text-align: left;
    align-items: flex-start;
    padding-bottom: 0;
    border-bottom: none;
 }

 .c-interview-card-sub__name.c-interview-card-sub__name {
    margin-bottom: 0;
    color: initial;
 }

 .c-interview-card-sub__quote.c-interview-card-sub__quote {
    text-align: left;
 }

 .page-opencampus__events {
    grid-template-columns: repeat(5, 1fr);
 }

 .c-text-card__title.c-text-card__title {
    text-align: center;
    font-size: 16px;
    border-bottom: none;
    padding-bottom: 0;
 }

 .c-text-card.c-text-card {
    align-items: center;
    gap: 10px;
 }

 .page-opencampus__openings > .c-schedule {
    gap: 0;
 }

 .c-schedule__date.c-schedule__date {
    margin-bottom: 10px;
 }

 .c-schedule__badge.c-schedule__badge {
    background: transparent;
    margin-bottom: 5px;
 }

 .c-schedule__title.c-schedule__title {
    font-size: 13px;
    color: var(--ytc-text-secondary);
    margin-bottom: 0;
 }

 .page-tuition__hub-grid {
    grid-template-columns: repeat(4, 1fr);
 }

 .c-section-box.c-section-box.page-qa__category {
    margin-bottom: 30px;
 }

 .page-qa__search {
    max-width: none;
    margin-bottom: 0;
 }

 .page-qa__search-field {
    border-radius: 10px;
 }

 .page-qa__tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
 }

 .page-qa__tab {
    justify-content: center;
 }

 .page-target__worries,
 .page-target__features {
    grid-template-columns: repeat(4, 1fr);
 }

 @media screen and (max-width: 768px) {
    .c-section-box.page-course__compare {
        padding: 0;
    }
    /* インタビューカード (共通部品): 左に丸い写真、右に名前と所属、その下にコメントを全幅で置く。
       コメントは HTML 上 meta の中にあるので、meta を display: contents にして profile の grid に直接並べる */
    .c-interview-card-sub.c-interview-card-sub {
        max-width: none;
        padding: 18px 16px;
    }
    .c-interview-card-sub__profile.c-interview-card-sub__profile {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: 2px 14px;
        align-items: center;
        justify-content: stretch;
    }
    .c-interview-card-sub__meta.c-interview-card-sub__meta {
        display: contents;
    }
    .c-interview-card-sub__photo.c-interview-card-sub__photo {
        grid-row: 1 / 3;
        width: 64px;
        height: 64px;
    }
    .c-interview-card-sub__name.c-interview-card-sub__name {
        align-self: end;
        margin: 0;
        font-size: 14px;
        white-space: normal;
    }
    .c-interview-card-sub__dept.c-interview-card-sub__dept {
        align-self: start;
        margin: 0;
        font-size: 13px;
    }
    .c-interview-card-sub__quote.c-interview-card-sub__quote {
        grid-column: 1 / -1;
        margin-top: 14px;
        font-size: 13px;
    }

    .page-admission__type {
        align-items: flex-start;
    }

    .page-admission__type-lead, 
    .page-admission__type-desc  {
        text-align: left;
    }

    .c-section-box.c-section-box--success {
        padding-top: 30px;
    }

    .page-career__support-grid,
    .page-opencampus__openings,
    .page-tuition__hub-grid,
    .page-target__worries,
    .page-target__features {
        grid-template-columns: repeat(1, 1fr);
    }

    /* 番号付きカード (共通部品): 左に番号の丸、右にタイトル、その下に説明。
       横並び版 (--horizontal) は元から同じ形なので対象外 */
    .c-feature-numbered.c-feature-numbered:not(.c-feature-numbered--horizontal) {
        display: grid;
        grid-template-columns: 32px 1fr;
        gap: 4px 13px;
        align-items: center;
        height: auto;
        padding: 18px 14px;
        text-align: left;
    }
    .c-feature-numbered:not(.c-feature-numbered--horizontal) > .c-feature-numbered__no {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .c-feature-numbered:not(.c-feature-numbered--horizontal) > .c-feature-numbered__desc {
        grid-column: 2;
        font-size: 13px;
        line-height: 1.6;
    }

    .page-opencampus__events {
        grid-template-columns: repeat(1, 1fr);
    }

    .c-text-card.c-text-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .c-text-card.c-text-card.page-tuition__hub-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-qa__tabs {
        grid-template-columns: repeat(3, 1fr);
    }
 }

 /* ステップ行 (共通部品 c-step-row): デザイン準拠
    白いカード 1 行に「青字の STEP n → 太字タイトル → グレーの説明」を横に並べ、
    行と行の間は中央の短い点線でつなぐ。AO 入試 SCHEDULE のほか、同じ部品を使う縦積みの一覧に共通で効く
    (横並びにしている .page-target__flow は下の専用指定が優先) */
 :has(> .c-step-row):not(.page-target__flow) {
    gap: 41px;
 }
 .c-step-row.c-step-row {
    align-items: center;
    gap: 24px;
    min-height: 76px;
    padding: 0 24px;
 }
 .c-step-row:not(:last-child)::after {
    left: 50%;
    bottom: -31px;
    width: 0;
    height: 20px;
    border: 0;
    border-left: 1px dashed var(--ytc-border-strong, #39364e);
    transform: translateX(-50%);
 }
 .c-step-row__no.c-step-row__no {
    width: auto;
    min-width: 56px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--ytc-bg-brand, #439fff);
    font-size: 16px; /* 2026-10-19 [common] Figma 16 (旧 15) */
    white-space: nowrap;
    align-items: flex-start;
 }
 .c-step-row__body.c-step-row__body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 24px;
    padding: 14px 0;
 }
 /* 2026-10-19 [common] Figma「Step Item / PC 横型」: 見出し 24/36、説明 16/25.6 #787878 (旧 22px / 15px #666) */
 .c-step-row__title.c-step-row__title {
    font-size: 24px;
    line-height: 1.5;
 }
 .c-step-row__desc.c-step-row__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ytc-text-secondary, #787878);
 }
 @media screen and (max-width: 768px) {
    :has(> .c-step-row):not(.page-target__flow) {
        gap: 36px;
    }
    .c-step-row.c-step-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-height: 0;
        padding: 14px 16px;
    }
    .c-step-row:not(:last-child)::after {
        bottom: -27px;
        height: 18px;
    }
    .c-step-row__no.c-step-row__no {
        font-size: 13px;
    }
    /* flex-wrap と flex: 1 0 0 (高さの基準 0) を PC から引き継ぐと、iOS Safari では
       「高さ 0 の縦並び + 折り返し可」と解釈され、説明文が 2 列目に折り返してタイトルの横に出て
       画面からはみ出す。SP では折り返しなし・高さは中身なりに固定する */
    .c-step-row__body.c-step-row__body {
        flex: 0 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
        min-width: 0;
        padding: 0;
    }
    .c-step-row__title.c-step-row__title,
    .c-step-row__desc.c-step-row__desc {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .c-step-row__title.c-step-row__title {
        font-size: 18px;
    }
    .c-step-row__desc.c-step-row__desc {
        font-size: 13px;
    }
 }

 /* 2026-10-14 佐藤様指摘: /for/highschool/ 等 NEXT STEP を /admission/recommendation/ の FLOW
    と同じ縦リストに統一 (旧: 横並び 3カード・緑背景・右向き三角 → 新: c-step-row 縦積み) */
 .page-target__flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
 }
 .page-target__flow > .c-step-row:not(:last-child)::after {
    content: none;
 }
 @media screen and (max-width: 768px) {
    .page-target__flow {
        gap: 12px;
    }
    .page-target__flow > .c-step-row:not(:last-child)::after {
        content: none;
    }
 }


 /* ==========================================================================
    お問い合わせページ (/contact/): デザイン準拠
    CHOOSE (問い合わせ方法のカード) → FORM (ステップ表示 + 入力欄) の 2 箱構成。
    入力欄は .contact-form、方法カードは .page-contact__method-* (どちらも新規)。
    page-contact.css に残っている旧 .page-contact__field / __choose 系の指定とは干渉しない
    ========================================================================== */

 /* ---- 箱の余白 (PC): 上辺から中身まで 110px、左右と下は 40px ---- */
 @media screen and (min-width: 769px) {
    .page-contact .c-section-box.c-section-box {
        padding: 109px 39px 39px; /* 2026-10-19 [common] Figma 110/40/40 (枠 1px 込み)。リード付きでも Figma は 110 */
    }
    /* 2026-10-19 見出し下にリード文がある箱 (/contact/・/corp-contact/・/recruit-entry/ の FORM) は
       110 だとリード文が箱の中身 (エラー表示など) に重なるため、共通ルールと同じ 150 にする */
    .page-contact .c-section-box.c-section-box:has(> .c-section-box__heading .c-section-heading-sub__lead) {
        padding-top: 149px;
    }
 }

 /* ---- CHOOSE: 横並びのリンクカード ---- */
 .page-contact__method-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
 }
 .page-contact__method-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    height: 100%;
    min-height: 100px;
    padding: 20px 20px 20px 22px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    color: var(--ytc-text-primary, #000);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
 }
 .page-contact__method-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--ytc-border-strong, #39364e);
 }
 .page-contact__method-card--nolink,
 .page-contact__method-card--nolink:hover {
    transform: none;
    box-shadow: none;
    cursor: default;
 }
 .page-contact__method-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
 }
 .page-contact__method-title {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4;
 }
 .page-contact__method-sub {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ytc-text-secondary, #787878);
 }
 .page-contact__method-arrow {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
 }

 /* ---- ステップ表示 (入力 / 確認 / 完了 の 3 画面共通): 丸数字を線でつなぎ、下にラベル ---- */
 .page-contact .page-contact__steps {
    --step-gap: 170px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--step-gap);
    width: 100%;
    max-width: none; /* 旧指定の max-width: 720px を解除して中央に置く */
    margin: 0;
    padding: 0;
    list-style: none;
 }
 .page-contact .page-contact__steps li {
    position: relative;
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--ytc-text-primary, #000);
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
 }
 .page-contact .page-contact__steps li span {
    width: 44px;
    height: 44px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 50%;
    color: var(--ytc-text-primary, #000);
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 18px;
 }
 .page-contact .page-contact__steps li.is-current span,
 .page-contact .page-contact__steps li.is-done span {
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
 }
 .page-contact .page-contact__steps li + li::before {
    content: "";
    position: absolute;
    top: 22px;
    right: calc(100% + 12px);
    width: calc(var(--step-gap) - 24px);
    height: 1px;
    background: #d9d9d9;
 }

 /* ---- FORM: 入力欄 ---- */
 .page-contact__form-box .c-section-box__body {
    align-items: stretch;
 }
 .contact-form {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
 }
 .contact-form__row {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
 }
 /* ラベル: 左に項目名、右端に「必須」バッジ */
 .contact-form__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ytc-text-primary, #000);
 }
 .contact-form__req {
    flex-shrink: 0;
    padding: 5px 10px;
    background: var(--ytc-bg-error, #fc3855);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
 }
 .contact-form__control {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0 16px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 8px;
    color: var(--ytc-text-primary, #000);
    font-family: inherit;
    font-size: 16px; /* 16px 未満だと iOS で入力時に画面が拡大される */
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
 }
 .contact-form__control::placeholder {
    color: #9a9a9a;
 }
 .contact-form__control:focus {
    outline: 2px solid var(--ytc-bg-brand, #439fff);
    outline-offset: 1px;
 }
 textarea.contact-form__control {
    height: auto;
    min-height: 140px;
    padding: 16px;
    resize: vertical;
 }
 /* プルダウン: 右端に青い下向き三角 */
 select.contact-form__control {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23439fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px 8px;
    cursor: pointer;
 }
 select.contact-form__control:invalid,
 select.contact-form__control option[value=""] {
    color: #9a9a9a;
 }
 /* チェックボックス (同意) */
 .contact-form__check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
 }
 .contact-form__check input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--ytc-bg-brand, #439fff);
 }

 /* エラー */
 .contact-form__row.has-error .contact-form__control {
    border-color: var(--ytc-bg-error, #fc3855);
    background-color: #fff5f6;
 }
 .contact-form__error {
    margin: 0;
    color: var(--ytc-bg-error, #fc3855);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
 }

 /* 同意 + 送信ボタン */
 .contact-form__agree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
 }
 .contact-form__agree a {
    color: inherit;
    text-decoration: underline;
 }
 .contact-form__submit {
    display: flex;
    justify-content: center;
    margin-top: -14px;
 }
 .contact-form__submit .c-btn--primary {
    width: 360px;
    max-width: 100%;
    height: 58px;
    background: var(--ytc-bg-brand, #439fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    font-size: 18px;
 }

 @media screen and (max-width: 768px) {
    .page-contact__method-list {
        grid-auto-flow: row;
        gap: 12px;
    }
    .page-contact__method-card {
        min-height: 72px;
        padding: 14px 16px;
    }
    .page-contact__method-title {
        font-size: 17px;
    }
    .page-contact .page-contact__steps {
        --step-gap: 64px;
    }
    .page-contact .page-contact__steps li {
        font-size: 12px;
    }
    .contact-form {
        gap: 26px;
    }
    .contact-form__control {
        height: 52px;
        padding: 0 14px;
    }
    textarea.contact-form__control {
        padding: 14px;
    }
    .contact-form__submit {
        margin-top: -6px;
    }
    .contact-form__submit .c-btn--primary {
        width: 100%;
        height: 52px;
        font-size: 16px;
    }
 }

 .c-def-row__pill.c-def-row__pill,
 .page-course-detail__curr-year {
    width: 100%;
    text-align: center;
 }

 .page-course-detail__curr-goal {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
 }

 .page-course-detail__gallery-grid {
    grid-template-columns: repeat(4, 1fr);
 }

 @media screen and (max-width: 768px) {
    .c-def-row__cell.c-def-row__cell {
        display: flex;
        flex-direction: row;
    }

    .c-def-row__pill.c-def-row__pill {
        width: 80px;
        padding: 0;
        background: none;
        border: none;
        text-align: left;
    }

    .c-def-row__value.c-def-row__value {
        font-size: 14px;
    }

    .page-course-detail__features-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .page-course-detail__gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
 }
 /* ==========================================================================
    SP: 入試系ページ (AO 入試ほか) の中身をデザイン準拠に
    箱 (c-section-box) の囲み方は現状のまま、中のカード類だけ合わせる。
    できるだけ共通部品 (c-*) に対して指定し、同じ部品を使う他ページも同じ見た目にする
    ========================================================================== */
 @media screen and (max-width: 768px) {

    /* ---- ABOUT: 複数の項目を 1 枚の白いカードにまとめ、各項目は「太字の見出し → 本文」の縦積み・左揃え ----
       (c-text-card は他ページで横並びにしているので、入試系の about-grid の中だけ対象にする) */
    .page-admission-ao__about-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
        box-sizing: border-box;
        padding: 18px 16px 20px;
        background: var(--ytc-bg-base, #fff);
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 5px;
    }
    .page-admission-ao__about-grid > .c-text-card.c-text-card {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
        height: auto;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .page-admission-ao__about-grid .c-text-card__title.c-text-card__title {
        font-size: 16px;
        line-height: 1.6;
        text-align: left;
    }
    .page-admission-ao__about-grid .c-text-card__body.c-text-card__body {
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
    }
    .page-admission-ao__about-grid .c-text-card__body br {
        display: none; /* PC 用の手動改行。SP は自然に折り返す */
    }

    /* ---- チェック項目 (共通部品): 1 列に積み、左に ✓ アイコン・右に太字のテキスト ---- */
    :has(> .c-check-item) {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .c-check-item.c-check-item {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        max-width: none;
        min-height: 58px;
        padding: 12px 16px;
        border-radius: 5px;
    }
    .c-check-item__text.c-check-item__text {
        font-size: 17px;
        line-height: 1.7;
        text-align: left;
    }

    /* ---- ステップ行 (共通部品): 余白・文字サイズ・行間隔をデザインの寸法に ---- */
    :has(> .c-step-row):not(.page-target__flow) {
        gap: 27px;
    }
    .c-step-row.c-step-row {
        gap: 6px;
        padding: 14px 16px 18px;
        border-radius: 5px;
    }
    .c-step-row:not(:last-child)::after {
        bottom: -21px;
        height: 14px;
    }
    .c-step-row__no.c-step-row__no {
        font-size: 11px;
    }
    .c-step-row__body.c-step-row__body {
        gap: 6px;
    }
    .c-step-row__title.c-step-row__title {
        font-size: 19px;
    }
    .c-step-row__desc.c-step-row__desc {
        font-size: 14px;
    }

    /* ---- 番号付きカード 横並び版 (共通部品): 左上に小さい青丸、右にタイトルと説明・左揃え。
           緑版 (--success) も SP では濃色の枠 + 青丸にそろえる ---- */
    .c-feature-numbered.c-feature-numbered {
        border-radius: 5px;
    }
    .c-feature-numbered--horizontal.c-feature-numbered--horizontal.c-feature-numbered--horizontal {
        align-items: flex-start;
        gap: 14px;
        padding: 16px 14px 18px;
        border-color: var(--ytc-border-strong, #39364e);
        text-align: left;
    }
    .c-feature-numbered--horizontal.c-feature-numbered--horizontal .c-feature-numbered__no {
        width: 34px;
        height: 34px;
        background: var(--ytc-bg-brand, #439fff);
        border: 1px solid var(--ytc-border-strong, #39364e);
        box-sizing: border-box;
        font-size: 13px;
    }
    .c-feature-numbered--horizontal .c-feature-numbered__body.c-feature-numbered__body {
        gap: 4px;
    }
    .c-feature-numbered--horizontal .c-feature-numbered__title.c-feature-numbered__title {
        font-size: 20px;
        line-height: 1.6;
    }
    .c-feature-numbered--horizontal .c-feature-numbered__desc.c-feature-numbered__desc {
        font-size: 14px;
        line-height: 1.6;
        color: var(--ytc-text-secondary, #787878);
    }
 }

 /* 月の括弧書き (「（1級3年次）」など) は途中で折らず、入りきらなければ丸ごと次の行へ */
 .page-about-campus-life__event-month-note {
    display: inline-block;
 }

 /* SP: キャンパスライフ > EVENTS (主な年間イベント)
    カードを並べるのをやめ、1 つの白い枠の中に「月 | 内容」の行を罫線区切りで積む表の形にする */
 @media screen and (max-width: 768px) {
    /* 2026-10-19 Figma SP 準拠 (佐藤さん確認済み): 見出しは箱の外、白い箱 (枠 1px・角丸 5) は表だけを囲む。
       section 自体の枠と地を外し、表 (events-grid) を箱にする */
    .c-section-box.page-about-campus-life__events {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .page-about-campus-life__events .c-section-box__heading.c-section-box__heading {
        margin-bottom: 24px;
    }
    .page-about-campus-life__events-grid {
        display: block;
        overflow: hidden;
        background: var(--ytc-bg-base, #fff);
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 5px;
    }
    .page-about-campus-life__event {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        background: none;
        border: 0;
        border-bottom: 1px solid #e5e5e5;
        border-radius: 0;
    }
    .page-about-campus-life__event:last-child {
        border-bottom: 0;
    }
    .page-about-campus-life__event-month {
        flex: 0 0 88px;
        width: 88px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
    }
    .page-about-campus-life__event-desc {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
    }
 }

 /* ==========================================================================
    NEWS 一覧 (/news/) PC: デザイン準拠
    水色の絞り込み箱 (タブ 4 つ + 検索 + 並び順) → 4 列のカード → 丸いページ送り。
    SP は別レイアウト (page-news.css) のままなので PC 幅だけに適用する
    ========================================================================== */
 @media screen and (min-width: 769px) {
    /* 英字の大見出し (CATEGORIES / ARTICLES) はこのデザインでは出さない */
    .page-news__section--categories .page-news__section-heading,
    .page-news__section--articles .page-news__section-heading {
        display: none;
    }

    /* ---- 絞り込み箱 ---- */
    .page-news__section--categories .page-news__section-inner {
        align-items: stretch;
        gap: 30px;
        margin-top: 0;
        padding: 40px;
        background: var(--ytc-bg-section, #d7f2ff);
        border-radius: 12px;
    }
    .page-news__section--categories .page-news__cats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    .page-news__section--categories .page-news__cat {
        min-width: 0;
        height: 40px;
        padding: 0 10px;
    }
    .page-news__section--categories .page-news__search {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        max-width: none;
        margin-top: 0;
    }
    .page-news__section--categories .page-news__search-field {
        height: 66px;
        padding: 0 20px;
        border-radius: 8px;
    }
    /* 虫めがねはアイコンフォントに頼らず SVG で描く */
    .page-news__section--categories .page-news__search-icon {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        font-size: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='M12 12l4.5 4.5'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    .page-news__section--categories .page-news__search-input {
        font-size: 16px;
    }
    .page-news__section--categories .page-news__search-select {
        width: 100%;
        height: 66px;
        padding: 0 48px 0 20px;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23439fff'/%3E%3C/svg%3E") no-repeat right 20px center / 12px 8px;
        border-radius: 8px;
        font-size: 16px;
        color: var(--ytc-text-secondary, #787878);
    }
    /* 検索ボタンは見た目からは外す (Enter と並び順の変更で送信)。読み上げ用には残す */
    .page-news__section--categories .page-news__search-submit {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    /* ---- 記事カード: 枠なしの領域に 4 列 ---- */
    .page-news__section--articles .page-news__section-inner {
        margin-top: 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .page-news__section--articles .page-news__list {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
    .page-news__section--articles .page-news__item {
        border-radius: 8px;
    }
    .page-news__section--articles .page-news__item-link {
        gap: 12px;
        padding: 16px;
    }
    .page-news__section--articles .page-news__item-thumb {
        aspect-ratio: 3 / 2;
        border-radius: 5px;
    }
    .page-news__section--articles .page-news__item-body {
        gap: 8px;
        padding: 0;
    }
    .page-news__section--articles .page-news__item-meta {
        gap: 10px;
    }
    /* カテゴリを日付の前に。色はカテゴリによらず青で統一 */
    .page-news__section--articles .page-news__item-cat {
        order: -1;
        padding: 2px 14px;
        background: var(--ytc-bg-brand, #439fff) !important;
        border: 1px solid var(--ytc-border-strong, #39364e);
        color: #fff !important;
        font-size: 11px;
    }
    .page-news__section--articles .page-news__item-date {
        font-weight: 400;
        font-size: 13px;
        color: var(--ytc-text-brand, #439fff);
    }
    .page-news__section--articles .page-news__item-title {
        font-size: 16px;
        line-height: 1.8;
    }
    .page-news__section--articles .page-news__item-excerpt {
        display: none;
    }

    /* ---- ページ送り: 44px の丸 ---- */
    .page-news__pagination .nav-links {
        gap: 16px;
    }
    .page-news__pagination .page-numbers {
        min-width: 44px;
        height: 44px;
        padding: 0;
    }
    .page-news__pagination .page-numbers.dots {
        background: #fff;
        border: 1px solid var(--ytc-border-strong, #39364e);
    }
 }

 /* ==========================================================================
    NEWS 一覧 (/news/) SP: デザイン準拠
    タブ 2x2 → 検索欄 → 並び順 → 横長カード (左に写真、右にカテゴリ・日付・タイトル・「続きを読む」)。
    色付きの帯や英字見出しは出さない
    ========================================================================== */
 @media screen and (max-width: 768px) {
    .page-news__section--categories .page-news__section-heading,
    .page-news__section--articles .page-news__section-heading {
        display: none;
    }
    .page-news__section--categories .page-news__section-inner {
        align-items: stretch;
        gap: 24px;
        padding: 30px 20px 0;
    }
    /* 水色の帯と下向きの山形 (clip-path) をやめて、白地にカードを並べる */
    .page-news__section--articles {
        background: none;
        clip-path: none;
        padding-bottom: 0 !important;
    }
    .page-news__section--articles .page-news__section-inner {
        padding: 24px 20px 30px;
    }

    /* ---- タブ: 2 列 x 2 段 ---- */
    .page-news__section--categories .page-news__cats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .page-news__section--categories .page-news__cat {
        min-width: 0;
        height: 32px;
        padding: 0 8px;
        font-size: 14px;
    }

    /* ---- 検索欄と並び順: 全幅で縦に積む ---- */
    .page-news__section--categories .page-news__search {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: none;
        margin-top: 0;
    }
    .page-news__section--categories .page-news__search-field {
        flex: none;
        height: 53px;
        padding: 0 14px;
        border-radius: 5px;
    }
    .page-news__section--categories .page-news__search-icon {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        font-size: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='M12 12l4.5 4.5'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    .page-news__section--categories .page-news__search-input {
        min-width: 0;
        font-size: 16px; /* 16px 未満だと iOS で入力時に画面が拡大される */
    }
    .page-news__section--categories .page-news__search-select {
        width: 100%;
        height: 53px;
        padding: 0 44px 0 14px;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23439fff'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
        border-radius: 5px;
        font-size: 16px;
        color: var(--ytc-text-secondary, #787878);
    }
    .page-news__section--categories .page-news__search-submit {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    /* ---- 記事カード: 1 列、左に写真・右に本文 ---- */
    .page-news__section--articles .page-news__list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .page-news__section--articles .page-news__item {
        border-radius: 5px;
    }
    .page-news__section--articles .page-news__item-link {
        display: grid;
        grid-template-columns: 97px 1fr;
        gap: 10px;
        align-items: start;
        padding: 11px;
    }
    .page-news__section--articles .page-news__item-thumb {
        width: 97px;
        height: 77px;
        aspect-ratio: auto;
        border-radius: 3px;
    }
    .page-news__section--articles .page-news__item-body {
        gap: 5px;
        padding: 0;
    }
    .page-news__section--articles .page-news__item-meta {
        gap: 8px;
    }
    .page-news__section--articles .page-news__item-cat {
        order: -1;
        padding: 1px 12px;
        background: var(--ytc-bg-brand, #439fff) !important;
        border: 1px solid var(--ytc-border-strong, #39364e);
        color: #fff !important;
        font-size: 10px;
    }
    .page-news__section--articles .page-news__item-date {
        font-weight: 400;
        font-size: 13px;
        color: var(--ytc-text-brand, #439fff);
    }
    .page-news__section--articles .page-news__item-title {
        font-size: 15px;
        line-height: 1.5;
    }
    /* 右下の「続きを読む」(カード全体がリンクなので飾りとして付ける) */
    .page-news__section--articles .page-news__item-body::after {
        content: "続きを読む";
        align-self: flex-end;
        padding-right: 17px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23439fff'/%3E%3Cpath d='M5 3.5 7.5 6 5 8.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 12px 12px;
        color: var(--ytc-text-brand, #439fff);
        font-weight: 700;
        font-size: 11px;
        line-height: 1.4;
    }
 }

 /* ==========================================================================
    学科詳細 > SUPPORT (留学生サポート): デザイン準拠
    4 列のカード。緑の ✓ アイコンの下に太字のタイトルを中央揃えで置く (説明文は出さない)
    ========================================================================== */
 .page-course-detail__support-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
 }
 .page-course-detail__support-card {
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-sizing: border-box;
    min-height: 136px;
    padding: 22px 16px;
    text-align: center;
 }
 /* ✓ は文字ではなく、他ページのチェック項目と同じ緑丸のアイコンにする */
 .page-course-detail__support-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 0;
    background: url("images/figma-20261002/parts-check-circle.svg") no-repeat center / contain;
 }
 .page-course-detail__support-title {
    font-size: 20px;
    line-height: 1.6;
 }
 /* 括弧書き (「（住居・行政）」) は PC では必ず 2 行目に送る。SP は入りきらない時だけ丸ごと次の行へ */
 .page-course-detail__support-title-note {
    display: block;
 }
 /* PC: 見出しの下にリード文が入る分、箱の上の余白を広げてカードと重ならないようにする */
 @media screen and (min-width: 769px) {
    .c-section-box.page-course-detail__support {
        padding-top: 150px;
    }
 }
 .page-course-detail__support-desc {
    display: none;
 }
 /* SP: 他ページのチェック項目と同じ形 (1 列、左に ✓・右に太字のテキスト) */
 @media screen and (max-width: 768px) {
    .page-course-detail__support-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .page-course-detail__support-card {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        min-height: 58px;
        padding: 12px 16px;
        border-radius: 5px;
        text-align: left;
    }
    .page-course-detail__support-title {
        font-size: 17px;
        line-height: 1.7;
    }
    .page-course-detail__support-title-note {
        display: inline-block;
    }
 }

 .c-def-row--card.c-def-row--card {
    border: none;
 }
 /* オープンキャンパス各ページ > CONTENT: PC は項目数に合わせて 1 行に並べる (5 項目なら 5 列) */
 @media screen and (min-width: 769px) {
    .page-opencampus-event__content-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 20px;
    }
 }

 .page-tuition-installment__note {
    text-align: center;
 }

 @media screen and (max-width: 768px) {
    .page-tuition-installment__note {
        text-align: left;
    }
 }
 /* ==========================================================================
    学費分納 (/tuition/installment/) > EXAMPLE 支払い例: デザイン準拠
    1 年次分 / 2 年次分 を左右 2 列に並べ、それぞれ黄色のピル見出しの下に月別の表を置く
    ========================================================================== */
 .page-tuition-installment__years {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 82px;
    align-items: start;
    width: 100%;
 }
 .page-tuition-installment__year {
    position: relative;
    min-width: 0;
 }
 /* 2 列の間の縦線 */
 .page-tuition-installment__year + .page-tuition-installment__year::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -41px;
    width: 1px;
    background: #d9d9d9;
 }
 .page-tuition-installment__year-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0 0 24px;
    background: #fff7ce;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 999px;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
 }
 /* 入学手続時: 左半分が青の見出し、右半分が金額 */
 .page-tuition-installment__entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 22px;
    overflow: hidden;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-align: center;
 }
 .page-tuition-installment__entry dt,
 .page-tuition-installment__entry dd {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: 0;
 }
 .page-tuition-installment__entry dt {
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
 }
 .page-tuition-installment__entry dd {
    background: var(--ytc-bg-base, #fff);
    font-size: 14px;
 }
 /* 月別の表: 青い見出し行、行ごとの罫線、2 列目と 4 列目は薄いグレー地 */
 .page-tuition-installment__table {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 4px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
 }
 .page-tuition-installment__table th,
 .page-tuition-installment__table td {
    height: 38px;
    padding: 4px 6px;
    box-sizing: border-box;
    background: var(--ytc-bg-base, #fff);
    border: 0;
    border-top: 1px solid var(--ytc-border-strong, #39364e);
    font-weight: 400;
    text-align: center;
 }
 .page-tuition-installment__table thead th {
    background: var(--ytc-bg-brand, #439fff);
    border-top: 0;
    color: #fff;
    font-weight: 700;
 }
 .page-tuition-installment__table tbody td:nth-child(2),
 .page-tuition-installment__table tbody td:nth-child(4) {
    background: #f5f5f5;
 }
 /* 表の下の注記だけ黒文字にする (ABOUT の注記は元のグレーのまま。中央揃えは上の共通指定に任せる) */
 .page-tuition-installment__years + .page-tuition-installment__note {
    margin-top: 10px;
    color: var(--ytc-text-primary, #000);
 }
 @media screen and (max-width: 768px) {
    .page-tuition-installment__years {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .page-tuition-installment__year + .page-tuition-installment__year::before {
        content: none;
    }
    .page-tuition-installment__year-title {
        height: 36px;
        margin-bottom: 16px;
        font-size: 15px;
    }
    .page-tuition-installment__entry {
        margin-bottom: 16px;
    }
    .page-tuition-installment__table {
        font-size: 12px;
    }
    .page-tuition-installment__table th,
    .page-tuition-installment__table td {
        height: 36px;
        padding: 4px 2px;
    }
 }

 /* 学費分納 > ABOUT (SP): デザイン準拠
    白いカードの中を「太字のリード → 本文 → 太字の補足 (カードのタイトル)」の順に縦積み・左揃えにし、
    カードの下にグレーの注記を置く。リードは SP ではカード内に出し、見出し下のリードは隠す */
 .page-tuition-installment__about-lead {
    display: none;
 }
 @media screen and (max-width: 768px) {
    .page-tuition-installment__about .c-section-heading-sub__lead {
        display: none;
    }
    .page-tuition-installment__about-grid > .c-text-card.c-text-card {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        height: auto;
        padding: 18px 16px 20px;
        border-radius: 5px;
    }
    .page-tuition-installment__about-lead {
        display: block;
        order: 0;
        margin: 0;
        font-weight: 700;
        font-size: 17px;
        line-height: 1.6;
        text-align: left;
    }
    .page-tuition-installment__about-grid .c-text-card__body.c-text-card__body {
        order: 1;
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
    }
    .page-tuition-installment__about-grid .c-text-card__body br {
        display: none; /* PC 用の手動改行。SP は自然に折り返す */
    }
    .page-tuition-installment__about-grid .c-text-card__title.c-text-card__title {
        order: 2;
        font-size: 13px;
        line-height: 1.6;
        text-align: left;
    }
    .page-tuition-installment__about .page-tuition-installment__note {
        margin-top: 0;
        color: var(--ytc-text-secondary, #787878);
        font-size: 13px;
        line-height: 1.7;
        text-align: left;
    }
 }

 /* 資格 (/career/license/) の資格リスト: 項目を中央寄せにする。
    行頭の丸は文字のすぐ左に付いたまま一緒に中央へ寄せる (absolute だと左端に取り残されるので inline にする) */
 .page-career-license__col-items {
    align-items: center;
 }
 .page-career-license__col-items li {
    padding-left: 0;
    text-align: center;
 }
 .page-career-license__col-items li::before {
    position: static;
    display: inline-block;
    margin-right: 8px;
    vertical-align: 0.05em;
 }
 /* SP は左寄せに戻す。丸は行の左端に固定し、折り返した 2 行目は文字の頭にそろえる */
 @media screen and (max-width: 768px) {
    .page-career-license__col-items {
        align-items: stretch;
    }
    .page-career-license__col-items li {
        padding-left: 20px;
        text-align: left;
    }
    .page-career-license__col-items li::before {
        position: absolute;
        left: 2px;
        top: 11px;
        display: block;
        margin-right: 0;
    }
 }

 /* ==========================================================================
    先輩トーク (/about/senior-talk/) > INTERVIEW: デザイン準拠 (PC)
    縦型のカード: 丸い写真 → 青い名前 → 学科 → 区切り線 → コメント → 「続きをみる」をすべて中央揃え。
    c-interview-card-sub は上のほうで横並び・左揃えに変えてあるので、この一覧の中だけ縦型に戻す
    ========================================================================== */
 @media screen and (min-width: 769px) {
    .page-about-senior-talk__interview-list .c-interview-card-sub.c-interview-card-sub {
        align-items: center;
        gap: 16px; /* 2026-10-19 Figma: padding 24 / gap 16 */
        padding: 24px;
        text-align: center;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__profile.c-interview-card-sub__profile {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__meta.c-interview-card-sub__meta {
        align-items: center;
        gap: 6px; /* 2026-10-19 Figma: meta gap 6 / 下 15 */
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
        text-align: center;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__dept.c-interview-card-sub__dept {
        line-height: 1.2;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__name.c-interview-card-sub__name {
        margin: 0;
        color: var(--ytc-text-link, #439fff);
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__dept.c-interview-card-sub__dept {
        margin: 0;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__quote.c-interview-card-sub__quote {
        text-align: center;
    }
    /* 「続きをみる」: 文字の左に青丸の矢印。カードの下端にそろえる */
    .page-about-senior-talk__interview-list .c-interview-card-sub__cta.c-interview-card-sub__cta {
        gap: 5px;
        margin-top: auto;
        font-size: 13px;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__cta > span {
        display: none; /* 文字の後ろの「›」は出さない */
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__cta::before {
        flex-shrink: 0;
        width: 12px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23439fff'/%3E%3Cpath d='M5 3.5 7.5 6 5 8.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    }
 }
 /* SP: 2 列だとカードが狭すぎて名前が 1 文字ずつ折れるので 1 列にする (カードの形は共通の SP 指定のまま) */
 @media screen and (max-width: 768px) {
    .page-about-senior-talk__interview-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* 2026-10-19 Figma SP 準拠: SP も縦型カード (丸写真 90 → 青い名前 20px → 学科 14px → 区切り線 → コメント 中央) */
    .page-about-senior-talk__interview-list {
        gap: 20px;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub.c-interview-card-sub {
        align-items: center;
        gap: 14px;
        padding: 18px;
        border-radius: 5px;
        text-align: center;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__profile.c-interview-card-sub__profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__photo.c-interview-card-sub__photo {
        width: 90px;
        height: 90px;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__meta.c-interview-card-sub__meta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
        text-align: center;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__name.c-interview-card-sub__name {
        align-self: center; /* 共通 SP の align-self:end (グリッド用) を打ち消す */
        margin: 0;
        font-size: 20px;
        line-height: 1.5;
        color: var(--ytc-text-link, #439fff);
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__dept.c-interview-card-sub__dept {
        align-self: center;
        margin: 0;
        font-size: 14px;
        line-height: 1.2;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__quote.c-interview-card-sub__quote {
        margin-top: 0;
        width: 100%;
        font-size: 14px;
        line-height: 1.8;
        text-align: center;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__cta.c-interview-card-sub__cta {
        justify-content: flex-end;
    }
    .page-about-senior-talk__interview-list .c-interview-card-sub__cta > span {
        display: none;
    }
 }

 /* 対象者別ページ > TESTIMONIAL (既卒者ページ): 学科詳細の VOICE (.page-course-detail__voice-grid) と同じ 2 列。
    カード自体は共通部品 c-interview-card-sub なので見た目は VOICE と同じになる */
 .page-target__voice-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
 }
 .page-target__voice-grid > .c-interview-card-sub {
    max-width: none;
    width: 100%;
    height: 100%;
 }
 /* 名前が長い (「32歳で入学・現在整備士（2020年卒）」など) ので折り返せるようにする */
 .page-target__voice-grid .c-interview-card-sub__name.c-interview-card-sub__name {
    white-space: normal;
 }
 @media screen and (max-width: 768px) {
    .page-target__voice-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* 肩書き (2 行目) が無いカードは、名前を写真の高さの中央に置く */
    .page-target__voice-grid .c-interview-card-sub__name.c-interview-card-sub__name:only-child {
        grid-row: 1 / 3;
        align-self: center;
    }
 }

 /* 対象者別ページ > WHY (既卒者ページ): 「?」の丸を番号の丸にする (番号付きカードの丸と同じ見た目) */
 .c-worry-item__icon--no.c-worry-item__icon--no {
    width: 34px;
    height: 34px;
    color: #fff;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
 }
 /* WHY カードに title + text 両方があるときの表示 (太字タイトル → 小さい説明文) */
 .c-worry-item__title {
    margin: 0;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ytc-text-primary, #000);
    text-align: center;
 }
 .c-worry-item:has(.c-worry-item__title) .c-worry-item__text {
    font-weight: 400;
    font-size: 14px;
    color: var(--ytc-text-secondary, #787878);
    text-align: center;
    margin-top: 4px;
 }
 /* 対象者別ページ > SUPPORT (既卒者ページ): カードの先頭に緑のチェックアイコン。
    アイコン → タイトル → 本文 を縦に積んで中央揃え (SP も同じ) */
 .page-target__feature-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
 }
 .page-target__features--check > .c-text-card.c-text-card {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: center;
 }

 /* SP: セクションの英字見出し (c-section-heading-sub__en) が長いとき (「GUARDIAN SUPPORT」など) に
    画面からはみ出さないよう、単語の切れ目で折り返して中央揃えにする。
    影は absolute なので、白文字と同じ幅で折り返すよう右端もそろえる */
 @media screen and (max-width: 768px) {
    .c-section-heading-sub.c-section-heading-sub {
        max-width: 100%;
    }
    .c-section-heading-sub__en.c-section-heading-sub__en {
        max-width: 100%;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
    }
    .c-section-heading-sub__en-front.c-section-heading-sub__en-front,
    .c-section-heading-sub__en-shadow.c-section-heading-sub__en-shadow {
        display: block;
        white-space: normal;
    }
    .c-section-heading-sub__en-shadow.c-section-heading-sub__en-shadow {
        right: -4px;
    }
 }

 /* SP: 対象者別ページ (高校生 / 保護者 / 既卒者) の特徴カード (BENEFITS / GUARDIAN SUPPORT など)。
    c-text-card は SP で共通に横並びにしてあるが、ここではタイトルの下に説明文を置く縦積みにする */
 @media screen and (max-width: 768px) {
    .page-target__features > .c-text-card.c-text-card {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        height: auto;
        text-align: center;
    }
    .page-target__features .c-text-card__body.c-text-card__body {
        font-size: 14px;
        line-height: 1.8;
    }
    .page-target__features .c-text-card__body br {
        display: none; /* PC 用の手動改行。SP は自然に折り返す */
    }
 }

 /* ==========================================================================
    NEWS 詳細 (single-news) PC: SHARE と関連記事をデザイン準拠に
    箱 (枠・背景) をやめ、上に薄い区切り線 → 中央の小見出し → 中身 の並びにする
    ========================================================================== */
 @media screen and (min-width: 769px) {
    .page-news__section--share .page-news__section-inner,
    .page-news__section--related .page-news__section-inner {
        gap: 20px;
        margin-top: 0;
        padding: 40px 0 0;
        background: none;
        border: 0;
        border-top: 1px solid #d9d9d9;
        border-radius: 0;
    }
    /* 小見出し: 箱の上にまたがる大きい英字をやめ、中身の上に普通の太字で置く */
    .page-news__section--share .page-news__section-heading,
    .page-news__section--related .page-news__section-heading {
        position: static;
        transform: none;
        gap: 0;
    }
    .page-news__section--share .page-news__section-heading-jp,
    .page-news__section--related .page-news__section-heading-wordmark {
        display: none; /* SHARE は英字「SHARE」、関連記事は日本語「関連記事」だけを出す */
    }
    .page-news__section--share .page-news__section-heading-wordmark {
        padding: 0;
        font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: 0;
    }
    .page-news__section--share .page-news__section-heading-wordmark-shadow {
        display: none;
    }
    .page-news__section--share .page-news__section-heading-wordmark-front {
        position: static;
        color: var(--ytc-text-primary, #000);
        -webkit-text-stroke: 0;
        text-shadow: none;
    }
    .page-news__section--related .page-news__section-heading-jp {
        font-size: 20px;
        line-height: 1.5;
    }

    /* SHARE: 白地・濃色の枠のピル 3 つを等幅で */
    .page-news__section--share .page-news__share {
        width: 100%;
    }
    .page-news__section--share .page-news__share-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        max-width: none;
        gap: 20px;
    }
    .page-news__section--share .page-news__share-btn {
        width: 100%; /* 旧指定の丸ボタン (幅 44px) を解除して列いっぱいに */
        height: 34px;
        padding: 0 16px;
        border-radius: 999px;
        background: #fff;
        border-color: var(--ytc-border-strong, #39364e);
        color: var(--ytc-text-primary, #000);
        font-size: 14px;
    }

    /* 関連記事: 3 列のカード (一覧ページのカードと同じ見た目) */
    .page-news__section--related .page-news__related {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    .page-news__section--related .page-news__related-item {
        max-width: none;
        border-radius: 8px;
    }
    .page-news__section--related .page-news__related-link {
        gap: 12px;
        padding: 16px;
    }
    .page-news__section--related .page-news__related-thumb {
        aspect-ratio: 3 / 2;
        border-radius: 5px;
    }
    .page-news__section--related .page-news__related-body {
        gap: 8px;
        padding: 0;
    }
    .page-news__section--related .page-news__related-cat {
        order: -1;
        padding: 2px 14px;
        background: var(--ytc-bg-brand, #439fff) !important;
        border: 1px solid var(--ytc-border-strong, #39364e);
        color: #fff !important;
    }
    .page-news__section--related .page-news__related-date {
        font-weight: 400;
        font-size: 13px;
        color: var(--ytc-text-brand, #439fff);
    }
    .page-news__section--related .page-news__related-title {
        font-size: 16px;
        line-height: 1.8;
    }
 }

 /* NEWS 詳細: 関連記事の下の「NEWS一覧に戻る」は出さない (PC / SP 共通) */
 .page-news__section--back {
    display: none;
 }

 /* ==========================================================================
    NEWS 詳細 (single-news) SP: TAGS / SHARE / 関連記事 をデザイン準拠に
    箱・色付きの帯をやめ、区切り線 → 左寄せの小見出し → 中身 の並びにする。
    関連記事は一覧ページの SP と同じ横長カード (左に写真、右に日付・タイトル・「続きを読む」)
    ========================================================================== */
 @media screen and (max-width: 768px) {
    .page-news__section--related {
        background: none;
        clip-path: none;
        padding-bottom: 0 !important;
    }
    .page-news__section--tags .page-news__section-inner,
    .page-news__section--share .page-news__section-inner,
    .page-news__section--related .page-news__section-inner {
        align-items: stretch;
        gap: 14px;
        margin: 0 20px;
        padding: 20px 0 22px;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .page-news__section--share .page-news__section-inner,
    .page-news__section--related .page-news__section-inner {
        border-top: 1px solid #d9d9d9;
    }
    .page-news__section--related .page-news__section-inner {
        padding-bottom: 40px;
    }

    /* 小見出し: 左寄せの太字 20px。TAGS / SHARE は英字、関連記事は日本語だけを出す */
    .page-news__section--tags .page-news__section-heading,
    .page-news__section--share .page-news__section-heading,
    .page-news__section--related .page-news__section-heading {
        align-items: flex-start;
        gap: 0;
    }
    .page-news__section--tags .page-news__section-heading-jp,
    .page-news__section--share .page-news__section-heading-jp,
    .page-news__section--related .page-news__section-heading-wordmark {
        display: none;
    }
    .page-news__section--tags .page-news__section-heading-wordmark,
    .page-news__section--share .page-news__section-heading-wordmark {
        padding: 0;
        font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: 0;
    }
    .page-news__section--tags .page-news__section-heading-wordmark-front,
    .page-news__section--share .page-news__section-heading-wordmark-front {
        position: static;
        color: var(--ytc-text-primary, #000);
        -webkit-text-stroke: 0;
        text-shadow: none;
    }
    .page-news__section--related .page-news__section-heading-jp {
        font-size: 20px;
        line-height: 1.5;
        text-align: left;
    }

    /* TAGS: 白地に薄いグレー枠のピル */
    .page-news__section--tags .page-news__tags {
        gap: 10px;
    }
    .page-news__section--tags .c-pill.page-news__tag {
        height: 34px;
        padding: 0 14px;
        background: #fff;
        border: 1px solid #d9d9d9;
        font-weight: 400;
        font-size: 15px;
    }

    /* SHARE: ピル 3 つを横に等幅で */
    .page-news__section--share .page-news__share {
        width: 100%;
    }
    .page-news__section--share .page-news__share-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        width: 100%;
        max-width: none;
    }
    .page-news__section--share .page-news__share-btn {
        width: 100%;
        height: 34px;
        padding: 0 8px;
        background: #fff;
        border-color: var(--ytc-border-strong, #39364e);
        border-radius: 999px;
        color: var(--ytc-text-primary, #000);
        font-size: 14px;
    }

    /* 関連記事: 横長カード */
    .page-news__section--related .page-news__related {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .page-news__section--related .page-news__related-item {
        max-width: none;
        border-radius: 5px;
    }
    .page-news__section--related .page-news__related-link {
        display: grid;
        grid-template-columns: 116px 1fr;
        gap: 12px;
        align-items: start;
        padding: 11px;
    }
    .page-news__section--related .page-news__related-thumb {
        width: 116px;
        height: 94px;
        aspect-ratio: auto;
        border-radius: 3px;
    }
    .page-news__section--related .page-news__related-body {
        gap: 4px;
        padding: 0;
    }
    .page-news__section--related .page-news__related-cat {
        display: none; /* SP のデザインでは日付だけ */
    }
    .page-news__section--related .page-news__related-date {
        font-weight: 400;
        font-size: 16px;
        color: var(--ytc-text-brand, #439fff);
    }
    .page-news__section--related .page-news__related-title {
        font-size: 17px;
        line-height: 1.5;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .page-news__section--related .page-news__related-body::after {
        content: "続きを読む";
        align-self: flex-end;
        margin-top: 4px;
        padding-right: 19px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23439fff'/%3E%3Cpath d='M5 3.5 7.5 6 5 8.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 14px 14px;
        color: var(--ytc-text-brand, #439fff);
        font-weight: 700;
        font-size: 13px;
        line-height: 1.4;
    }
 }

 /* 上の SP 指定のうち、layout.css の SP ガード (!important 付きの一括指定) に負ける項目を打ち消す */
 @media screen and (max-width: 768px) {
    .page-news__section--tags .page-news__section-inner,
    .page-news__section--share .page-news__section-inner,
    .page-news__section--related .page-news__section-inner {
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 20px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .page-news__section--tags .page-news__section-heading,
    .page-news__section--share .page-news__section-heading,
    .page-news__section--related .page-news__section-heading {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    .page-news__section--related .page-news__section-heading-wordmark {
        display: none !important;
    }
    .page-news__section--tags .page-news__section-heading-wordmark,
    .page-news__section--share .page-news__section-heading-wordmark,
    .page-news__section--tags .page-news__section-heading-wordmark-front,
    .page-news__section--share .page-news__section-heading-wordmark-front {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        -webkit-text-stroke: 0 !important;
        color: var(--ytc-text-primary, #000) !important;
    }
    .page-news__section--related .page-news__section-heading-jp {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
        text-align: left !important;
    }
 }

 /* ==========================================================================
    お問い合わせ 確認画面 (/contact/confirm/): デザイン準拠
    水色の箱の中に ステップ表示 → 入力内容 (1 項目 1 枚の白いカード) → 送信 / 修正ボタン を縦に並べる
    ========================================================================== */
 .page-contact__review-box .c-section-box__body {
    align-items: stretch;
    gap: 30px;
 }
 @media screen and (min-width: 769px) {
    /* 見出しの下にリード文が入る分、箱の上の余白を広げる */
    .page-contact .c-section-box.page-contact__review-box {
        padding-top: 150px;
    }
 }
 .contact-review {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin: 0;
 }
 .contact-review__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: center;
    box-sizing: border-box;
    min-height: 74px;
    padding: 16px 30px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 8px;
 }
 .contact-review__row dt {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ytc-text-secondary, #787878);
 }
 .contact-review__row dd {
    min-width: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ytc-text-primary, #000);
    overflow-wrap: anywhere;
 }
 /* ボタン: 青い「この内容で送信する」の下に、白い「戻って修正する」 */
 .contact-review__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0;
 }
 .contact-review__actions .c-btn {
    width: 360px;
    max-width: 100%;
    min-width: 0;
 }
 .contact-review__submit.contact-review__submit {
    height: 56px;
    background: var(--ytc-bg-brand, #439fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    font-size: 18px;
    cursor: pointer;
 }
 .contact-review__back.contact-review__back {
    height: 40px;
    font-size: 14px;
 }
 @media screen and (max-width: 768px) {
    .page-contact__review-box .c-section-box__body {
        gap: 24px;
    }
    .contact-review {
        gap: 12px;
    }
    .contact-review__row {
        grid-template-columns: 1fr;
        gap: 2px;
        min-height: 0;
        padding: 12px 16px;
        border-radius: 5px;
    }
    .contact-review__row dt {
        font-size: 12px;
    }
    .contact-review__row dd {
        font-size: 15px;
    }
    .contact-review__actions {
        gap: 14px;
    }
    .contact-review__actions .c-btn {
        width: 100%;
    }
    .contact-review__submit.contact-review__submit {
        height: 52px;
        font-size: 16px;
    }
 }

 /* お問い合わせ 確認画面: KV の代わりに置くパンくずのバー (箱と同じ幅) */
 .page-contact__crumb.page-contact__crumb {
    box-sizing: border-box;
    width: 1240px;
    max-width: 100%;
 }
 @media screen and (max-width: 768px) {
    /* SP: 他の下層ページのヒーロー上部のバーと同じ見た目 (全幅・角丸なし・12px) にする。
       ヘッダー直下の共通パンくず (.site-breadcrumb) は文字が大きいので、このページでは隠して二重表示も避ける */
    .page-contact__crumb.page-contact__crumb {
        width: 100%;
        height: 40px;
        padding: 0 20px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
    body:has(.page-contact__crumb) .site-breadcrumb {
        display: none;
    }
 }

 /* お問い合わせ 確認画面のパンくず: 文字は白・12px に固定する (リンクの既定色や SP の文字サイズ調整に負けないように) */
 .page-contact__crumb.page-contact__crumb,
 .page-contact__crumb .c-breadcrumb__item.c-breadcrumb__item,
 .page-contact__crumb a.c-breadcrumb__item:link,
 .page-contact__crumb a.c-breadcrumb__item:visited {
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
 }

 /* ==========================================================================
    サイトマップ (/sitemap/): デザイン準拠
    外側の箱はなくし、グループごとの白いカードを 3 列に並べる。
    カード = 水色の見出し帯 + リンクの行 (罫線区切り・右端に青い矢印)。同じ段のカードは高さをそろえる
    ========================================================================== */
 .c-section-box.page-sitemap__box {
    margin-top: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
 }
 .page-sitemap__grid {
    gap: 20px;
    align-items: stretch;
 }
 .page-sitemap__group {
    min-height: 100%;
    overflow: hidden;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
 }
 .page-sitemap__group-name {
    margin: 0;
    padding: 18px 20px;
    background: var(--ytc-bg-section, #d7f2ff);
    border-bottom: 0;
    font-size: 18px;
    line-height: 1.4;
 }
 .page-sitemap__links {
    gap: 0;
 }
 .page-sitemap__links li {
    border-bottom: 1px solid #e5e5e5;
 }
 .page-sitemap__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 8px 20px;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
 }
 .page-sitemap__links a::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-top: 1.5px solid var(--ytc-bg-brand, #439fff);
    border-right: 1.5px solid var(--ytc-bg-brand, #439fff);
    transform: rotate(45deg);
 }
 @media screen and (max-width: 768px) {
    .c-section-box.page-sitemap__box {
        width: calc(100% - 40px);
        margin: 0 20px;
        padding: 0;
    }
    .page-sitemap__grid {
        gap: 16px;
    }
    .page-sitemap__group-name {
        padding: 14px 16px;
        font-size: 16px;
    }
    .page-sitemap__links a {
        padding: 8px 16px;
        font-size: 14px;
    }
 }

 /* ==========================================================================
    通学ルート (/about/route/): デザイン準拠
    ========================================================================== */

 /* ---- ページ内リンク: 白いボタン 3 つ (右端に下向きの青い矢印) ---- */
 .page-about-route__jump {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    box-sizing: border-box;
    width: 1240px;
    max-width: 100%;
 }
 .page-about-route__jump-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 60px;
    padding: 8px 20px;
    box-sizing: border-box;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 5px;
    color: var(--ytc-text-primary, #000);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
 }
 .page-about-route__jump-link::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid var(--ytc-bg-brand, #439fff);
    border-bottom: 1.5px solid var(--ytc-bg-brand, #439fff);
    transform: rotate(45deg);
 }
 /* 飛び先が固定ヘッダーに隠れないようにする */
 #route-from,
 #route-railway,
 #route-routes {
    scroll-margin-top: 120px;
 }
 .page-about-route__group-sep {
    margin: 0 0.6em;
    opacity: 0.6;
 }

 /* ---- 経路図 (PC): 枠なし。ラベルは青いピルの帯、駅は塗りのカード、矢印は太い濃色 ---- */
 @media screen and (min-width: 769px) {
    .page-about-route__groups {
        gap: 40px;
    }
    .page-about-route__group {
        gap: 24px;
        overflow: visible;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .page-about-route__group-label {
        padding: 10px 20px;
        background: var(--ytc-bg-brand, #439fff);
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 999px;
        font-size: 15px;
        line-height: 1.3;
    }
    .page-about-route__flow.page-about-route__flow {
        gap: 25px 3px; /* 2026-10-19 Figma準拠: 出発駅 135 / 区間 (左右 14px 余白込み) / 中継駅1 150 / 中継駅2 78 / 徒歩 120 / 本校 109、行間 25 */
        padding: 0;
        background: none;
        grid-template-columns: 135px minmax(160px, 1fr) minmax(160px, 1fr) 78px 120px 109px;
    }
    .page-about-route__flow.page-about-route__flow--with-hub1 {
        grid-template-columns: 135px minmax(160px, 1fr) 150px minmax(160px, 1fr) 78px 120px 109px;
    }
    .page-about-route__flow.page-about-route__flow:not(.page-about-route__flow--with-hub1):not(.page-about-route__flow--with-legb) {
        grid-template-columns: 135px minmax(160px, 1fr) 78px 120px 109px;
    }

    /* 出発駅: 水色の塗り・枠なし。合計時間は青の太字 */
    .page-about-route__flow-dep {
        gap: 3px;
        min-height: 85px;
        padding: 8px;
        box-sizing: border-box;
        background: var(--ytc-bg-section, #d7f2ff);
        border: 0;
        border-radius: 5px;
    }
    .page-about-route__flow-dep-name {
        font-size: 19px;
        line-height: 1.55;
    }
    .page-about-route__flow-dep-total {
        font-weight: 700;
        font-size: 12px;
        color: var(--ytc-bg-brand, #439fff);
    }

    /* 路線: 太字の路線名 → 太い矢印 → 太字の時間 */
    .page-about-route__flow-leg {
        gap: 7px;
        padding: 0 14px;
    }
    .page-about-route__flow-leg-line {
        font-weight: 700;
        font-size: 15px;
    }
    .page-about-route__flow-leg-time {
        font-size: 15px;
        line-height: 1.4;
    }
    .page-about-route__flow-arrow,
    .page-about-route__flow-walk-arrow {
        height: 6px;
        background: var(--ytc-border-strong, #39364e);
    }
    .page-about-route__flow-arrow::after,
    .page-about-route__flow-walk-arrow::after {
        right: -2px;
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left: 17px solid var(--ytc-border-strong, #39364e);
    }

    /* 中継駅 1: 水色・横書き / 中継駅 2: 青・縦書き / 本校: 緑・横書き。どれも枠なし */
    .page-about-route__flow-hub,
    .page-about-route__flow-dest {
        border: 0;
        border-radius: 5px;
    }
    .page-about-route__flow-hub--1 {
        background: var(--ytc-bg-section, #d7f2ff);
    }
    .page-about-route__flow-hub--1 span {
        writing-mode: horizontal-tb;
        font-size: 18px;
        letter-spacing: 0;
    }
    .page-about-route__flow-hub--2 span {
        font-size: 24px;
        letter-spacing: 3px;
        line-height: 1.05;
    }
    .page-about-route__flow-dest span {
        writing-mode: horizontal-tb;
        font-size: 19px;
        letter-spacing: 0.02em;
    }

    /* 徒歩: 「徒歩」→ 矢印 → 「徒歩N分」 */
    .page-about-route__flow-walk {
        gap: 10px;
        padding: 0 14px;
    }
    .page-about-route__flow-walk::before {
        content: "徒歩";
        font-weight: 700;
        font-size: 15px;
        line-height: 1.4;
    }
    .page-about-route__flow-walk-text {
        font-weight: 700;
        font-size: 15px;
        line-height: 1.4;
    }
 }
 @media screen and (max-width: 768px) {
    .page-about-route__jump {
        grid-template-columns: 1fr;
        gap: 10px;
        width: calc(100% - 40px);
    }
    .page-about-route__jump-link {
        min-height: 48px;
        padding: 6px 16px;
        font-size: 14px;
    }
 }

 /* 通学ルート > 経路図 (PC): 1 つのグループの中に「直通の行」と「乗換の行」が混ざる場合 (京急線エリア)。
    中継駅は乗換の行だけにまたがり、直通の行は中継駅の列を飛び越えて最寄り駅まで矢印を伸ばす */
 @media screen and (min-width: 769px) {
    .page-about-route__flow--with-hub1 .page-about-route__flow-hub--1 {
        grid-row: var(--hub1-first, 1) / calc(var(--hub1-last, var(--row-count, 1)) + 1);
    }
    .page-about-route__flow--with-hub1 .page-about-route__flow-leg--direct {
        grid-column: 2 / 5;
    }
 }

 /* ==========================================================================
    通学ルート > 経路図 (SP): デザイン準拠
    PC と同じ横長の図をそのまま出し、グループごとに横スクロールさせる。
    page-about-route.css の SP 指定 (駅ごとの縦積み・!important 付き) を打ち消すため !important を使う
    ========================================================================== */
 .page-about-route__scroll-hint {
    display: none;
 }
 @media screen and (max-width: 768px) {
    .page-about-route__scroll-hint {
        display: block;
        margin: 6px 0 0;
        color: var(--ytc-text-secondary, #787878);
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
    }
    .page-about-route__groups {
        gap: 34px;
    }
    .page-about-route__group {
        gap: 0;
        overflow: visible;
        background: none;
        border: 0;
        border-radius: 0;
    }

    /* ラベル: エリア名だけ青いピル、乗換の説明はその下に青い文字で */
    .page-about-route__group-label {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 16px;
        padding: 0;
        background: none;
        color: inherit;
        text-align: center;
    }
    .page-about-route__group-area {
        padding: 7px 16px;
        background: var(--ytc-bg-brand, #439fff);
        border: 1px solid var(--ytc-border-strong, #39364e);
        border-radius: 999px;
        color: #fff;
        font-size: 15px;
        line-height: 1.3;
    }
    .page-about-route__group-sep {
        display: none;
    }
    .page-about-route__group-via {
        color: var(--ytc-bg-brand, #439fff);
        font-size: 14px;
        line-height: 1.4;
    }

    /* 図: 列幅を固定した横長のグリッドにして、はみ出す分を横スクロール */
    .page-about-route__flow.page-about-route__flow {
        display: grid;
        grid-template-columns: 126px 190px 190px 60px 92px 84px;
        grid-template-rows: repeat(var(--row-count, 1), auto);
        gap: 16px 14px;
        padding: 0 0 14px;
        background: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--ytc-bg-brand, #439fff) #e0e0e0;
    }
    .page-about-route__flow.page-about-route__flow--with-hub1 {
        grid-template-columns: 126px 190px 112px 190px 60px 92px 84px;
    }
    .page-about-route__flow.page-about-route__flow:not(.page-about-route__flow--with-hub1):not(.page-about-route__flow--with-legb) {
        grid-template-columns: 126px 220px 60px 92px 84px;
    }
    .page-about-route__flow::-webkit-scrollbar {
        height: 4px;
    }
    .page-about-route__flow::-webkit-scrollbar-track {
        background: #e0e0e0;
        border-radius: 2px;
    }
    .page-about-route__flow::-webkit-scrollbar-thumb {
        background: var(--ytc-bg-brand, #439fff);
        border-radius: 2px;
    }

    /* セルの配置 (PC と同じ列・行)。--c は「中継駅 2 の列番号」 */
    .page-about-route__flow { --c: 3; }
    .page-about-route__flow--with-legb { --c: 4; }
    .page-about-route__flow--with-hub1 { --c: 5; }
    .page-about-route__flow .page-about-route__flow-dep {
        grid-column: 1 !important;
        grid-row: var(--row, auto) !important;
    }
    .page-about-route__flow .page-about-route__flow-leg {
        grid-column: 2 !important;
        grid-row: var(--row, auto) !important;
    }
    .page-about-route__flow .page-about-route__flow-leg--b {
        grid-column: 3 !important;
    }
    .page-about-route__flow--with-hub1 .page-about-route__flow-leg--b {
        grid-column: 4 !important;
    }
    .page-about-route__flow--with-hub1 .page-about-route__flow-leg--direct {
        grid-column: 2 / 5 !important;
    }
    .page-about-route__flow .page-about-route__flow-hub--1 {
        grid-column: 3 !important;
        grid-row: var(--hub1-first, 1) / calc(var(--hub1-last, var(--row-count, 1)) + 1) !important;
    }
    .page-about-route__flow .page-about-route__flow-hub--2 {
        grid-column: var(--c) !important;
        grid-row: 1 / calc(var(--row-count, 1) + 1) !important;
    }
    .page-about-route__flow .page-about-route__flow-walk {
        grid-column: calc(var(--c) + 1) !important;
        grid-row: 1 / calc(var(--row-count, 1) + 1) !important;
    }
    .page-about-route__flow .page-about-route__flow-dest {
        grid-column: calc(var(--c) + 2) !important;
        grid-row: 1 / calc(var(--row-count, 1) + 1) !important;
    }

    /* セルの見た目 (PC と同じ) */
    .page-about-route__flow-dep {
        gap: 6px;
        min-height: 80px;
        padding: 10px 8px;
        box-sizing: border-box;
        background: var(--ytc-bg-section, #d7f2ff);
        border: 0;
        border-radius: 5px;
    }
    .page-about-route__flow-dep-name {
        font-size: 18px;
        line-height: 1.3;
    }
    .page-about-route__flow-dep-total {
        font-weight: 700;
        font-size: 12px;
        color: var(--ytc-bg-brand, #439fff);
    }
    .page-about-route__flow-leg {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 0;
        border: 0;
        border-radius: 0;
    }
    .page-about-route__flow-leg-line {
        font-weight: 700;
        font-size: 13px;
    }
    .page-about-route__flow-arrow {
        display: block;
    }
    .page-about-route__flow-arrow,
    .page-about-route__flow-walk-arrow {
        height: 4px;
        background: var(--ytc-border-strong, #39364e);
    }
    .page-about-route__flow-arrow::after,
    .page-about-route__flow-walk-arrow::after {
        right: -1px;
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left: 13px solid var(--ytc-border-strong, #39364e);
    }
    .page-about-route__flow-hub,
    .page-about-route__flow-dest {
        padding: 10px 4px;
        border: 0;
        border-radius: 5px;
    }
    .page-about-route__flow-hub--1 {
        background: var(--ytc-bg-section, #d7f2ff);
    }
    .page-about-route__flow-hub--1 span,
    .page-about-route__flow-dest span {
        writing-mode: horizontal-tb;
        font-size: 16px;
        letter-spacing: 0;
    }
    .page-about-route__flow-hub--2 span {
        writing-mode: vertical-rl;
        font-size: 20px;
        letter-spacing: 1px;
    }
    .page-about-route__flow-walk {
        gap: 10px;
        padding: 0;
    }
    .page-about-route__flow-walk::before {
        content: "徒歩";
        font-weight: 700;
        font-size: 13px;
        line-height: 1;
    }
    .page-about-route__flow-walk-text {
        font-weight: 700;
        font-size: 14px;
    }
 }

 /* ==========================================================================
    リクルート (/recruit/) > OPENINGS 募集職種: デザイン準拠
    タブ (職種へ飛ぶボタン) → 白いカード (左に見出し、縦線、右に本文)
    ========================================================================== */
 .page-simple__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 30px;
    width: 100%;
 }
 .page-simple__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 999px;
    color: var(--ytc-text-primary, #000);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
 }
 .page-simple__tab.is-active {
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
 }
 .page-simple__cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
 }
 .page-simple__card {
    display: grid;
    grid-template-columns: 230px 1fr;
    align-items: start;
    box-sizing: border-box;
    padding: 40px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    scroll-margin-top: 120px; /* タブから飛んだ時に固定ヘッダーに隠れないように */
 }
 .page-simple__card-title {
    margin: 0;
    padding-right: 20px;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.5;
 }
 .page-simple__card-body {
    min-width: 0;
    padding-left: 30px;
    border-left: 1px solid #d9d9d9;
    font-size: 15px;
    line-height: 1.9;
    overflow-wrap: anywhere;
 }
 @media screen and (max-width: 768px) {
    .page-simple__tabs {
        gap: 10px;
    }
    .page-simple__tab {
        height: 36px;
        font-size: 14px;
    }
    .page-simple__cards {
        gap: 14px;
    }
    .page-simple__card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 16px;
        border-radius: 5px;
    }
    .page-simple__card-title {
        padding: 0 0 10px;
        border-bottom: 1px solid #d9d9d9;
        font-size: 19px;
    }
    .page-simple__card-body {
        padding-left: 0;
        border-left: 0;
        font-size: 14px;
        line-height: 1.8;
    }
 }

 /* リクルート > ENTRY: 見出しとリード文の下に、青い「エントリーフォーム」ボタンを中央に置く */
 .page-simple__button.page-simple__button {
    width: 360px;
    max-width: 100%;
    height: 56px;
    background: var(--ytc-bg-brand, #439fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    font-size: 18px;
 }
 @media screen and (min-width: 769px) {
    /* 見出しの下にリード文が入る箱は、上の余白を広げてボタンと重ならないようにする */
    /* 2026-10-19 [common] 共通 figma-components.css の :has(リード) ルール (上 150) に統合したので削除 */
 }
 @media screen and (max-width: 768px) {
    .page-simple__button.page-simple__button {
        width: 100%;
        height: 52px;
        font-size: 16px;
    }
 }

 /* 五大グループ (/godai-group/) > ABOUT / BUSINESS: 白いカードに青い見出し + 中央揃えの本文。
    カードは枚数に合わせて横に等幅で並ぶ (1 枚なら全幅、2 枚なら 2 列) */
 .page-simple__info-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
 }
 .page-simple__info-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    padding: 28px 24px 32px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    text-align: center;
 }
 .page-simple__info-card-title {
    margin: 0;
    color: var(--ytc-bg-brand, #439fff);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.5;
 }
 .page-simple__info-card-body {
    margin: 0;
    font-size: 14px;
    line-height: 2;
 }
 @media screen and (max-width: 768px) {
    .page-simple__info-cards {
        grid-auto-flow: row;
        gap: 12px;
    }
    .page-simple__info-card {
        gap: 8px;
        padding: 18px 16px 20px;
        border-radius: 5px;
    }
    .page-simple__info-card-title {
        font-size: 18px;
    }
    .page-simple__info-card-body {
        line-height: 1.8;
    }
    .page-simple__info-card-body br {
        display: none; /* PC 用の改行。SP は自然に折り返す */
    }
 }

 /* 五大グループ > SCHOOLS / PARTNERS: 拠点・会社のカード (3 列)。
    青い名前 (PARTNERS は黒) → 太字の事業内容 → グレーの住所 → グレーの電話 */
 .page-simple__places {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
 }
 .page-simple__place {
    box-sizing: border-box;
    padding: 20px 20px 24px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
 }
 .page-simple__place-name {
    margin: 0 0 8px;
    color: var(--ytc-bg-brand, #439fff);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4;
 }
 .page-simple__places--dark .page-simple__place-name {
    color: var(--ytc-text-primary, #000);
 }
 .page-simple__place-sub {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.7;
 }
 .page-simple__place-meta {
    margin: 0 0 8px;
    color: var(--ytc-text-secondary, #787878);
    font-size: 13px;
    line-height: 1.7;
 }
 .page-simple__place-meta:last-child {
    margin-bottom: 0;
 }

 /* 五大グループ > BENEFITS: 白いカードの中に見出しと 2 列のピル */
 .page-simple__pill-card {
    box-sizing: border-box;
    width: 100%;
    padding: 24px 24px 28px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
 }
 .page-simple__pill-card-title {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.5;
    text-align: center;
 }
 .page-simple__pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
 }
 .page-simple__pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 6px 16px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
 }
 @media screen and (max-width: 768px) {
    .page-simple__places {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .page-simple__place {
        padding: 16px 16px 18px;
        border-radius: 5px;
    }
    .page-simple__place-name {
        font-size: 18px;
    }
    .page-simple__place-sub {
        margin-bottom: 8px;
        font-size: 14px;
    }
    .page-simple__pill-card {
        padding: 18px 14px 20px;
        border-radius: 5px;
    }
    .page-simple__pill-card-title {
        font-size: 18px;
    }
    .page-simple__pills {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .page-simple__pill {
        font-size: 14px;
    }
 }

 /* 五大グループ > 拠点・会社のカード: カード全体をリンクにする。余白はリンク側に持たせて、カードのどこを押しても反応するように */
 .page-simple__place:has(> .page-simple__place-link) {
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
 }
 .page-simple__place:has(> .page-simple__place-link):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--ytc-border-strong, #39364e);
 }
 .page-simple__place-link {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 20px 24px;
    color: inherit;
    text-decoration: none;
 }
 @media screen and (max-width: 768px) {
    .page-simple__place-link {
        padding: 16px 16px 18px;
    }
 }

 /* ==========================================================================
    個人情報保護方針 (/privacy/): デザイン準拠
    箱なしで、中央揃えの前文 → 番号付きのカード 6 枚 (3 列) → 制定日 を並べる
    ========================================================================== */
 .c-section-box.page-simple__plain {
    margin-top: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
 }
 .page-simple__plain .c-section-box__body {
    gap: 30px;
 }
 .page-simple__intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
 }
 .page-simple__policies {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
 }
 .page-simple__policy {
    box-sizing: border-box;
    padding: 22px 24px 26px;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
 }
 .page-simple__policy-title {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
 }
 .page-simple__policy-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
 }
 .page-simple__footnote {
    margin: 0;
    color: var(--ytc-text-secondary, #787878);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
 }
 @media screen and (max-width: 768px) {
    .c-section-box.page-simple__plain {
        width: calc(100% - 40px);
        margin: 0 20px;
        padding: 0;
    }
    .page-simple__plain .c-section-box__body {
        gap: 20px;
    }
    .page-simple__intro {
        font-size: 14px;
        text-align: left;
    }
    .page-simple__policies {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .page-simple__policy {
        padding: 16px 16px 18px;
        border-radius: 5px;
    }
    .page-simple__policy-title {
        margin-bottom: 6px;
        font-size: 17px;
    }
    .page-simple__policy-body {
        line-height: 1.8;
    }
 }


 /* ==========================================================================
    左右の縦帯 (YOKOHAMA TECHNOAUTO COLLEGE / CHALLENGE SPIRITS): 上下にゆっくり流す
    左は上へ、右は下へ流れる。帯は body::before / ::after (layout.css) の疑似要素。
    仕組み: 同じ文言を偶数回 (12 回) 並べた帯を画面より長くし、帯の長さのちょうど半分だけ動かして
            最初に戻す。半分ずれた位置は見た目が同じなので、つなぎ目なく回り続ける。
            (文言の末尾にも区切りの全角スペースを入れて、1 回分の長さをそろえている)
    ========================================================================== */
 @media screen and (min-width: 769px) {
    body::before,
    body::after {
        content: "YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　";
        height: max-content;
        padding: 0;
        white-space: pre;
        will-change: transform;
        animation: ytc-side-strip-up 60s linear infinite;
    }
    body::after {
        animation-name: ytc-side-strip-down;
    }
    @keyframes ytc-side-strip-up {
        from { transform: translateY(0); }
        to   { transform: translateY(-50%); }
    }
    @keyframes ytc-side-strip-down {
        from { transform: translateY(-50%); }
        to   { transform: translateY(0); }
    }
    /* 「視差効果を減らす」設定の端末では止める */
    @media (prefers-reduced-motion: reduce) {
        body::before,
        body::after {
            animation: none;
        }
    }
 }

 /* ==========================================================================
    SP: ヘッダーをスクロールに追従させる (画面の上端に貼り付く)
    - layout.css が html と body の両方に overflow-x: hidden を掛けているため、そのままだと
      position: sticky が効かない (body が独立したスクロール枠になる)。
      body 側を overflow-x: clip に替えると、横スクロールの封じ込めはそのままで sticky が効く。
    - clip に対応していない古いブラウザ (iOS 15 以前など) では、今まで通り追従しないだけで崩れない
    ========================================================================== */
 @media screen and (max-width: 768px) {
    @supports (overflow: clip) {
        body {
            overflow-x: clip !important;
        }
        header.site-header {
            position: sticky !important;
            top: 0;
            z-index: 500 !important; /* ページ内の要素より上、ドロワー (998 / 999) より下 */
        }
        /* メニューを開いている間は body が固定されるので、ヘッダーも元の位置のままにする */
        body.is-drawer-open header.site-header {
            position: relative !important;
        }
    }
 }

/* ==================================================================
 * c-stat-card-sub 4色展開 (page-career__results Figma 準拠)
 * variant によって pill 色 + 数字色をセットで切替
 * ================================================================== */
.c-stat-card-sub--brand .c-stat-card-sub__pill { background: var(--ytc-bg-accent, #ffef6b); }
.c-stat-card-sub--brand .c-stat-card-sub__value-num,
.c-stat-card-sub--brand .c-stat-card-sub__value-unit { color: var(--ytc-bg-brand, #439fff); }

.c-stat-card-sub--success .c-stat-card-sub__pill { background: var(--ytc-bg-success-soft, #c8f5e3); }
.c-stat-card-sub--success .c-stat-card-sub__value-num,
.c-stat-card-sub--success .c-stat-card-sub__value-unit { color: var(--ytc-bg-success, #20d99b); }

.c-stat-card-sub--accent .c-stat-card-sub__pill { background: #ffdcb3; }
.c-stat-card-sub--accent .c-stat-card-sub__value-num,
.c-stat-card-sub--accent .c-stat-card-sub__value-unit { color: #ff8c00; }

.c-stat-card-sub--error .c-stat-card-sub__pill { background: #ffd1d7; }
.c-stat-card-sub--error .c-stat-card-sub__value-num,
.c-stat-card-sub--error .c-stat-card-sub__value-unit { color: var(--ytc-color-bg-error, #fc3855); }

/* ==================================================================
 * opencampus Figma 準拠追加 (2026-10-09)
 * ================================================================== */

/* Hero sub 2段構成 (page-opencampus main) */
.c-page-hero__sub--main {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 4px;
}
.c-page-hero__sub--note {
    font-size: 14px;
    font-weight: 400;
    color: var(--ytc-text-secondary, #787878);
    margin: 0;
}
@media screen and (max-width: 768px) {
    .c-page-hero__sub--main { font-size: 18px; }
    .c-page-hero__sub--note { font-size: 12px; }
}

/* opencampus 全日程 CTA ボックス */
.page-opencampus__openings-cta {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Flow 横並び (web-consult 3step) */
.page-opencampus-event__flow--inline {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: oc-step;
}
.page-opencampus-event__flow--inline > li {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
}
/* 2026-10-13 佐藤様指摘: 謎の矢印削除 (SP で縦積み時に横矢印が左残りして不自然になるため) */
.page-opencampus-event__flow--inline > li + li::before {
    content: none !important;
    display: none !important;
}
.page-opencampus-event__flow--inline .c-step-row__no {
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 14px;
    color: var(--ytc-bg-brand, #439fff);
}
@media screen and (max-width: 768px) {
    .page-opencampus-event__flow--inline { flex-wrap: wrap; }
    .page-opencampus-event__flow--inline > li { flex-basis: 100%; }
    /* 2026-10-13: SP でも矢印を出さない */
}

/* Flow 横 N カード (tuition-briefing 5step コンパクト) */
.page-opencampus-event__flow--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-opencampus-event__flow--grid > li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 10px;
    background: #fff;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 8px;
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
}
.page-opencampus-event__flow--grid .c-step-row__no {
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 12px;
    color: var(--ytc-bg-brand, #439fff);
}
.page-opencampus-event__flow--grid .c-step-row__title {
    font-size: 13px;
    line-height: 1.4;
}
@media screen and (max-width: 768px) {
    .page-opencampus-event__flow--grid { grid-template-columns: 1fr; gap: 10px; }
}

/* opencampus VOICE カードの 5つ星評価 (Figma 準拠) */
.c-interview-card-sub__rating {
    margin: 4px 0 6px;
    font-size: 16px;
    line-height: 1;
    color: #ffcf40;
    letter-spacing: 2px;
}

/* ==================================================================
 * for (訪問者別) Figma 準拠追加 (2026-10-09)
 * ================================================================== */

/* CONCERNS: 青丸 + 下向き三角 SVG (Worry Item/PC) */
.c-worry-item__icon--triangle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
}
.c-worry-item__icon--triangle svg {
    width: 12px;
    height: 8px;
}
.c-worry-item__title {
    margin: 10px 0 0;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: var(--ytc-text-primary, #000);
    line-height: 1.4;
}

/* BENEFITS カード番号バッジ 01-04 (青丸) */
.page-target__features--numbered > li {
    position: relative;
    padding-top: 36px;
}
.page-target__feature-no {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* Hero タイトル・sub の word-break 制御 (右端突き抜け防止) */
.page-target .c-page-hero__title,
.page-target .c-page-hero__sub {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* NEXT STEP 緑シャドウを Figma #20d99b に揃える (旧 #1aad7c) */
.page-target .c-section-box--success .c-section-heading-sub__en-shadow {
    color: #20d99b !important;
}

@media screen and (max-width: 768px) {
    .page-target .c-breadcrumb {
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* ==========================================================================
   2026-10-13 P0 FOUNDATION — box-sizing: border-box 全称適用
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   2026-10-13 P0 — SP 全ページ横オーバーフロー殲滅セーフティネット
   症状: SP 390px でヒーロー英字 (COURSE 04 / RECOMMEND / CORPORATE / DISCLOSURE
         / SITEMAP / BRIEFING / EXPERIENCE 等) と本文/カードが軒並み右端切れ・
         horizontal scroll が発生していた。
   方針:
   - html/body の overflow-x を SP で確実に封じ込め (clip 対応ブラウザは clip、未対応は hidden fallback)
   - 共通 c-page-hero__wordmark / c-section-heading-sub__en に clamp + max-width + overflow-wrap を広域適用
   - テキスト全般に word-break セーフティ (overflow-wrap: anywhere) を本文系クラスに掛ける
   - COURSE カードの tag 行は flex-wrap: wrap + min-width:0
   - section-box の inner コンテンツに max-width: 100% + overflow-wrap を保険
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* [P0-1] 横スクロール根絶 (clip 優先、hidden fallback) + 主要 wrapper の max-width 保護 */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    @supports (overflow: clip) {
        html, body {
            overflow-x: clip !important;
        }
    }
    /* 2026-10-19 [common] 旧: [class^="page-"],[class*=" page-"] で page- の付く全要素に
       overflow-x:hidden が掛かり、カード内の矢印・点線・はみ出し装飾が切れていた。
       body / main / ページラッパー (main 直下の .page-xxx) だけに限定。 */
    main,
    .site-main,
    .page-body,
    .page-body__inner,
    .site-main > [class^="page-"],
    .site-main > [class*=" page-"] {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* [P0-2] 共通ページヒーロー英字タイトル: 1語でも 390px に収まるよう clamp 強化。
       既存 1513 行の .c-page-hero__wordmark とは別経路で、.wordmark-front/shadow 側も
       勝たせる (shadow の right:-4px で overflow する事故を抑制) */
    .c-page-hero__wordmark,
    .c-page-hero__wordmark-front,
    .c-page-hero__wordmark-shadow {
        max-width: calc(100vw - 40px) !important;
        overflow-wrap: anywhere !important;
        word-break: normal;
    }
    .c-page-hero__wordmark-shadow {
        right: 0 !important; /* shadow が viewport 外に出ないよう再度上書き */
    }

    /* [P0-3] セクション英字見出し (c-section-heading-sub__en) の最終防衛線 */
    .c-section-heading-sub__en,
    .c-section-heading-sub__en-front,
    .c-section-heading-sub__en-shadow {
        max-width: calc(100vw - 60px);
        overflow-wrap: anywhere;
    }

    /* [P0-4] ヒーロー本文タイトル・サブ: KV の「クルマ好き、ここだ。」等が
       SP で右切れする事故の広域対策 (ページ固有クラス前段で防御) */
    .c-page-hero__title,
    .c-page-hero__sub {
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
    }

    /* [P0-5] セクション箱 内 inner コンテンツの横あふれ防止 */
    .c-section-box,
    .c-section-box__inner,
    .c-section-box__body {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* [P0-6] COURSE カードの tags 行は wrap 必須 (viewport 外 overflow 対策) */
    .c-course-card__tags,
    [class*="course-card__tags"],
    .p-top-course__tags,
    .page-course__tags {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        gap: 6px;
    }

    /* [P0-7] 本文汎用: 長い英単語・URL・和欧混在の切れを広域で許容 */
    .page-body p,
    .page-body li,
    .page-body dd,
    .page-body dt,
    main p,
    main li,
    main dd,
    main dt,
    .c-section-box p,
    .c-section-box li,
    .c-section-box dd,
    .c-section-box dt,
    .c-section-box__body p,
    .c-section-box__body li,
    .c-section-box__body td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* [P0-8] テーブル系 (COMPARE 等) が親幅を超えないよう保険 */
    .c-section-box table,
    main table {
        max-width: 100%;
        table-layout: auto;
    }
    .c-section-box table td,
    .c-section-box table th,
    main table td,
    main table th {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* [P0-9] 入学試験 bar / チェックリスト等 (admission 系) の
       日本語本文「受験してください」「出願した対象」等の末尾切れ対策 */
    .c-pill,
    .c-bar,
    .c-badge,
    .c-chip,
    .c-tag {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* [P0-10] 画像系の最終防衛 (max-width:100%) */
    main img,
    .page-body img,
    .c-section-box img {
        max-width: 100%;
        height: auto;
    }
}
/* P0 end (SP overflow safety net) — 2026-10-13 */

 /* ==========================================================================
    入学試験トップ (/admission/) > SCHEDULE 下段: デザイン準拠
    横帯 = 白いカード + 青い見出しの帯。中は「小さい前置き + 大きい日付」。
    入学試験の帯は 2 列目から右端までで、左に大きい日付・右に注意書き。合否通知は枠付きの青い帯
    ========================================================================== */
 .page-admission__sch-band.page-admission__sch-band {
    gap: 0;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    background: var(--ytc-bg-base, #fff);
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
 }
 .page-admission__sch-band-label.page-admission__sch-band-label {
    padding: 8px 12px;
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.1em;
 }
 .page-admission__sch-band-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
 }
 .page-admission__sch-band-date.page-admission__sch-band-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
    padding: 0;
 }
 .page-admission__sch-band-pre {
    color: var(--ytc-text-secondary, #787878);
    font-size: 14px;
 }
 .page-admission__sch-band-main {
    font-weight: 700;
    font-size: 26px;
 }
 .page-admission__sch-band--ao .page-admission__sch-band-pre {
    font-size: 13px;
 }
 .page-admission__sch-band--ao .page-admission__sch-band-main {
    font-size: 20px;
 }
 .page-admission__sch-band-note.page-admission__sch-band-note {
    max-width: none;
    margin: 0;
    color: var(--ytc-text-primary, #000);
    font-size: 13px;
    line-height: 20px;
    padding: 0;
 }
 .page-admission__sch-band-sub {
    display: inline-block;
    margin-top: 6px;
    color: var(--ytc-text-secondary, #787878);
    font-size: 11px;
 }
 .page-admission__sch-result.page-admission__sch-result {
    margin-top: 0;
    padding: 11px 16px;
    border: 1px solid var(--ytc-border-strong, #39364e);
    border-radius: 10px;
 }
 .page-admission__sch-result p {
    letter-spacing: 0.5em;
 }
 @media screen and (min-width: 769px) {
    /* 入学試験の帯 (span=full) も、デザインでは 2 列目から右端まで */
    .page-admission__sch-band--full.page-admission__sch-band--full {
        grid-column: 2 / span 5;
        background: var(--ytc-bg-base, #fff);
    }
    /* 注意書きがある帯は、左に日付・右に注意書きを横に並べる */
    .page-admission__sch-band--has-note .page-admission__sch-band-body {
        flex-direction: row;
        gap: 15px;
        padding: 20px 24px;
    }
    .page-admission__sch-band--has-note .page-admission__sch-band-date {
        flex: 0 0 auto;
        min-width: 395px;
    }
    .page-admission__sch-band--has-note .page-admission__sch-band-note {
        flex: 0 1 442px;
    }
    /* 各列の中央を通る縦線を点線にする */
    .page-admission__sch-grid::before {
        background-image: repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(100% / 12 - 1px),
            #8a8a8a calc(100% / 12 - 1px),
            #8a8a8a calc(100% / 12),
            transparent calc(100% / 12),
            transparent calc(100% / 6)
        );
        -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 7px);
        mask-image: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 7px);
    }
 }
 @media screen and (max-width: 768px) {
    .page-admission__sch-band-main,
    .page-admission__sch-band--ao .page-admission__sch-band-main {
        font-size: 18px;
    }
    .page-admission__sch-band-body {
        padding: 12px 14px 14px;
    }
 }

 /* 入学試験トップ > SCHEDULE: 合否通知まわりの調整
    - 縦の点線が合否通知の帯より下にはみ出さないよう、グリッド下の余白 (20px) をなくす
    - 字間 (letter-spacing) は最後の文字の右にも付くので、同じ分だけ左に字下げして見た目の中央に置く */
 .page-admission__sch-grid.page-admission__sch-grid {
    padding-bottom: 0;
 }
 .page-admission__sch-result.page-admission__sch-result {
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .page-admission__sch-result.page-admission__sch-result p {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
 }


/* ==========================================================================
   2026-10-14 下層ページ 控えめスクロールアニメーション
   - opacity のみ (transform なし = 位置ずれしない)
   - subtle-animations.js が [data-ytc-fade] 属性を自動付与
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* body.ytc-anim-ready が付いてから opacity:0 を適用 — JS 読込失敗/遅延時でも要素が消えないようにする保険 */
    body.ytc-anim-ready [data-ytc-fade] {
        opacity: 0;
        transition: opacity 0.7s cubic-bezier(.22, 1, .36, 1);
    }
    body.ytc-anim-ready [data-ytc-fade].is-in-view {
        opacity: 1;
    }
}


/* 2026-10-14 佐藤様指摘: PC は常に min-width 1220px (縮小防止・1220px 以下では横スクロール) */
@media screen and (min-width: 769px) {
    html, body {
        min-width: 1220px;
    }
    body {
        overflow-x: auto;
    }
}

.site-footer__nav--pc {
    align-items: normal;
}
/* ==================================================================
 * 2026-10-19 /recruit/ WHY カード Figma 準拠 (Feature Item / PC: 番号丸 → 26px 見出し → 16px 説明)
 * ================================================================== */
.page-template-page-recruit .page-simple__info-cards {
    counter-reset: recruit-why;
}
.page-template-page-recruit .page-simple__info-card {
    counter-increment: recruit-why;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    text-align: center;
}
.page-template-page-recruit .page-simple__info-card::before {
    content: counter(recruit-why, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--ytc-bg-brand, #439fff);
    color: #fff;
    font-family: var(--ytc-font-en, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}
.page-template-page-recruit .page-simple__info-card-title.page-simple__info-card-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ytc-text-primary, #000);
}
.page-template-page-recruit .page-simple__info-card-body.page-simple__info-card-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ytc-text-secondary, #787878);
}
@media screen and (max-width: 768px) {
    .page-template-page-recruit .page-simple__info-card {
        display: grid;
        grid-template-columns: 34px 1fr;
        column-gap: 14px;
        row-gap: 6px;
        align-items: center;
        padding: 16px 16px 16px 14px;
        text-align: left;
    }
    .page-template-page-recruit .page-simple__info-card::before { grid-row: 1 / span 2; align-self: start; }
    .page-template-page-recruit .page-simple__info-card-title.page-simple__info-card-title { font-size: 20px; }
    .page-template-page-recruit .page-simple__info-card-body.page-simple__info-card-body { font-size: 14px; }
}

/* ==========================================================================
   2026-10-19 [tuition-for-etc] /godai-group/ /privacy/ Figma 準拠レイアウト調整
   (両ページともページ専用 CSS が読み込まれていないため、ここに body クラス限定で記述)
   ========================================================================== */
/* 箱と箱の間 80px (page-simple の gap 50 + 30) */
:is(.page-template-page-godai-group, .page-template-page-privacy) .page-simple > .c-section-box.c-section-box + .c-section-box.c-section-box { margin-top: 30px; }
/* privacy: 条項カード = 3 列 gap 20, pad 20, 見出し 20px → 本文 16px/28.8 (間 8px) */
.page-template-page-privacy .page-simple__policies { gap: 20px; }
.page-template-page-privacy .page-simple__policy { padding: 20px; }
.page-template-page-privacy .page-simple__policy-title { margin-bottom: 8px; }
.page-template-page-privacy .page-simple__policy-body { font-size: 16px; line-height: 1.8; }
.page-template-page-privacy .page-simple__intro { font-size: 16px; }
.page-template-page-privacy .page-simple__footnote { font-size: 15px; color: #787878; }
@media screen and (max-width: 768px) {
    .page-template-page-privacy .page-simple__policy-body { font-size: 14px; }
    .page-template-page-privacy .page-simple__intro { font-size: 14px; }
    .page-template-page-privacy .page-simple__footnote { font-size: 13px; }
}
/* [tuition-for-etc] end */

/* ==========================================================================
   [common] 2026-10-19 共通コンポーネントの Figma 寄せ (common agent)
   数値は Figma ノード JSON から取得。ページ別の上書きはこのブロックより後勝ち/高詳細度のものが優先される
   ========================================================================== */
/* ヒーロー和文タイトル (PC): Figma は 40px が基本。訪問者別 3 ページは長いタイトル用に 32px/45 (Figma)。
   資料請求 (/request/) もタイトルが長く 40px だと 2 行に折れるため同じ 32px にそろえる */
@media screen and (min-width: 769px) {
    .page-target .c-page-hero__title.c-page-hero__title,
    body.page-template-page-contact .c-page-hero__title.c-page-hero__title,
    body.page-template-page-contact-confirm .c-page-hero__title.c-page-hero__title {
        font-size: 32px;
        line-height: 1.4;
    }
}

/* ステップ行 c-step-row は custom.css 内の既存ブロック (「ステップ行 (共通部品 c-step-row)」) を直接修正 */

/* FAQ c-faq (Figma「FAQ Item」): 質問行 PC 66 = pad 20/24/20/20 + 26 (枠 1px 込み) / SP 54 = pad 14/16/14/14。
   質問文 PC 18/21.6・SP 15/18、開閉記号 PC 22・SP 18 */
.c-faq__q.c-faq__q { padding: 19px 24px 19px 20px; }
.c-faq__text.c-faq__text { line-height: 1.2; }
.c-faq__a.c-faq__a { padding: 20px 24px 22px 20px; }
@media screen and (max-width: 768px) {
    .c-faq__q.c-faq__q { padding: 13px 16px 13px 14px; }
    .c-faq__text.c-faq__text { font-size: 15px; line-height: 1.2; }
    .c-faq__icon.c-faq__icon { font-size: 18px; }
    .c-faq__a.c-faq__a { padding: 14px 16px 16px 14px; }
}

/* リンク行 c-link-row (SP, Figma「Link Row」): 高さ 42 = pad 12/16/12/12、ラベル 15/18 */
@media screen and (max-width: 768px) {
    .c-link-row.c-link-row {
        height: auto;
        min-height: 42px;
        padding: 11px 16px 11px 12px;
    }
    .c-link-row__label.c-link-row__label { font-size: 15px; line-height: 1.2; }
}
/* [common] end */

/* ==========================================================================
   2026-10-20 佐藤様指摘: ブラウザを狭めると左右の縦帯がコンテンツに被る
   原因: layout.css の body { padding: 0 40px } (帯の逃げ) を style.css の body { padding: 0 } が
         後から打ち消しており、画面幅 1340px 未満でコンテンツ (最大 1240px) が帯の下に入り込んでいた。
   対応: PC は帯の幅 + 20px を左右に必ず空ける (1440px では従来どおり左右 100px)。
         1220px 未満は横スクロールになり、画面に固定した帯がどうしても中身に重なるため帯を出さない。
   ========================================================================== */
@media screen and (min-width: 769px) {
    body {
        padding-left: 60px;
        padding-right: 60px;
    }
    /* フッター (お問い合わせ帯・下部) は従来どおり帯のきわまで広げる */
    .site-footer.site-footer {
        margin-left: -20px;
        margin-right: -20px;
        max-width: none;
        width: auto;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        padding-left: 44px; /* layout.css で帯が 24px 幅になる帯域 */
        padding-right: 44px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1219px) {
    body {
        padding-left: 20px;
        padding-right: 20px;
    }
    body::before,
    body::after {
        display: none;
    }
}