@charset "UTF-8";
/* 4つのプログラム面に、それぞれの色を持たせる（2026-09-13）
   いま自分がどの面にいるかを、見出しの英字ラベルとヘッダーの下線で示す。
   紺＋橙というIIPの配色は崩さず、アクセントだけを面ごとに替えている。
   共通CSS（common.css）は書き換えず、このファイルを後から読み込む。 */

body[data-seg="teacher"] {
    --seg-color: #b55e14;   /* 教員向け：橙（IIPの基準色を少し濃くしたもの） */
    --seg-tint: #fdf3e9;
}

body[data-seg="student"] {
    --seg-color: #0e6e79;   /* 学生向け：青緑 */
    --seg-tint: #eaf5f6;
}

body[data-seg="school"] {
    --seg-color: #3d6e2e;   /* どなたでも：緑 */
    --seg-tint: #eef5ea;
}

body[data-seg="work"] {
    --seg-color: #6e3a63;   /* 経験を活かす：紫 */
    --seg-tint: #f4ecf3;
}

/* ヘッダーの下に細い線を引く。面を移ると色が変わる。 */
body[data-seg] .siteHeader {
    box-shadow: inset 0 -3px 0 0 var(--seg-color);
}

/* いまどの面にいるかの一言 */
body[data-seg] .headerTop,
body[data-seg] .headerTop__text {
    color: var(--seg-color);
}

/* 節の英字ラベル（Program / Voice / Flow など） */
body[data-seg] .rootTitle span,
body[data-seg] .detailTitle[data-en]::before {
    color: var(--seg-color);
}

/* パンくずの現在地 */
body[data-seg] .detailBreadcrumb [aria-current="page"] {
    color: var(--seg-color);
}

/* 節の見出しに添える短い罫 */
body[data-seg] .detailTitle__heading::after {
    background: var(--seg-color);
}

@media (max-width: 767px) {
    /* ヘッダー上の一言はスマートフォンでは隠れる。線だけ残す。 */
    body[data-seg] .siteHeader {
        box-shadow: inset 0 -2px 0 0 var(--seg-color);
    }
}

/* ---------- 「このような方へ」を詰める（2026-09-13） ----------
   96pxのアイコンを中央に並べ、1項目あたり28pxの余白を取っていたため、
   画面1つ分を使って中身が5行しかない状態だった。
   アイコンを小さくし、アイコン左・文字右の横並びにして、縦を1/3に詰める。 */
body[data-seg] .refTarget {
    padding-top: 34px;
    padding-bottom: 38px;
}

body[data-seg] .refTargetList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    max-width: 900px;
    margin-bottom: 16px;
}

body[data-seg] .refTargetList__item,
body[data-seg] .refTargetList__item--lower,
body[data-seg] .refTargetList__item--lowerStart {
    grid-column: auto;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 14px;
    padding: 13px 2px;
    text-align: left;
    border-top: 1px solid rgb(var(--border-rgb) / 0.9);
}

/* 1行目（2項目）は上の罫を引かない */
body[data-seg] .refTargetList__item:nth-child(1),
body[data-seg] .refTargetList__item:nth-child(2) {
    border-top: 0;
}

/* 縦罫・横罫の飾りは使わない */
body[data-seg] .refTargetList__item::before,
body[data-seg] .refTargetList__item::after {
    display: none;
}

body[data-seg] .refTargetList__icon {
    width: 48px;
    height: 48px;
}

body[data-seg] .refTargetList__text {
    font-size: 0.86rem;
    line-height: 1.65;
    text-align: left;
}

body[data-seg] .refTargetList__text strong {
    font-size: 0.98rem;
}

/* 手書きの改行は外す。幅で自然に折り返させる */
body[data-seg] .refTargetList__text br {
    display: none;
}

/* ---------- 注記：左のオレンジ罫と地の色をやめる ----------
   「色の帯＋左に太い縦線」は作り物の見た目になりやすい。
   細い横罫だけにして、本文として読ませる。 */
body[data-seg] .refTargetNote {
    max-width: 900px;
    padding: 14px 0 0;
    color: var(--text-sub);
    font-size: 0.84rem;
    line-height: 1.9;
    text-align: left;
    background: none;
    border-top: 1px solid rgb(var(--border-rgb) / 0.9);
    border-left: 0;
    border-radius: 0;
}

body[data-seg] .refTargetNote p {
    margin: 0;
    text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
    body[data-seg] .refTargetNote p,
    body[data-seg] .refTargetList__text {
        word-break: auto-phrase;
    }
}

/* 節の終わりに次の一歩を置く（もとは導線が無かった） */
body[data-seg] .refTargetGo {
    max-width: 900px;
    margin: 18px auto 0;
    text-align: left;
}

@media (max-width: 700px) {
    body[data-seg] .refTargetList {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-seg] .refTargetList__item:nth-child(2) {
        border-top: 1px solid rgb(var(--border-rgb) / 0.9);
    }
}

/* 260915：グローバルナビの「プログラム」パネルで、いまいる面に印を付ける。
   どの面にいるかは body[data-seg] で分かる（下層ページには付かないので印も出ない）。 */
body[data-seg="teacher"] .globalNavPanel [data-seg-link="teacher"],
body[data-seg="student"] .globalNavPanel [data-seg-link="student"],
body[data-seg="school"] .globalNavPanel [data-seg-link="school"],
body[data-seg="work"] .globalNavPanel [data-seg-link="work"] {
    color: var(--seg-color);
    background: var(--seg-tint);
    box-shadow: inset 3px 0 0 0 var(--seg-color);
}

body[data-seg] .globalNavPanel [data-seg-link] {
    padding-left: 10px;
}

/* ===============================================================
   261002：プログラム名を冒頭に大きく（栗林さま 10/1「最初にプログラム名をドカンと大きく」）
   4つの面のページ内ナビの直後。#programs から プログラム名＋紹介文＋実績の数字 を移した
   =============================================================== */
.refPage .refProgramLead .refTitle h2 {
    font-size: clamp(2.3rem, 5.6vw, 4rem);
    letter-spacing: 0.04em;
}

body[data-seg] .refPage .refProgramLead .refTitle h2 {
    color: var(--seg-color);
}

.refPage .refProgramLead .refTitle p {
    width: 100%; /* 右に空きを残して折り返さない（9/30 髙野さん） */
    font-size: 1.04rem;
}

/* ===============================================================
   261002：制度のご相談を目立たせる（栗林さま 10/1・原稿確認シート ①No.40）
   教員の面で「このような先生へ」の直後へ移した。細い帯 → 色の付いた帯＋ボタン
   =============================================================== */
.refGrant--feature {
    padding-top: 8px;
}

.refGrant--feature .refGrantSlim {
    gap: 28px;
    padding: 28px 32px;
    background: var(--accent-soft);
    border: 0;
    border-left: 6px solid var(--seg-color, var(--accent));
    border-radius: 8px;
}

.refGrant--feature .refGrantSlim__text {
    font-size: 1rem;
}

.refGrant--feature .refGrantSlim__text strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.25rem;
}

.refGrant--feature .refGrantSlim__link {
    padding: 13px 22px;
    color: var(--white);
    background: var(--seg-color, var(--accent));
    border-radius: 4px;
}

.refGrant--feature .refGrantSlim__link:hover,
.refGrant--feature .refGrantSlim__link:focus-visible {
    opacity: 0.88;
}

/* 261002：4つの面のヒーロー見出し。<br> で2行に分ける前提で white-space: nowrap が付いていたため、
   9/30 に <br> を外したあと長い見出しが右にはみ出していた。折り返しを許し、文節で折る（common.css の auto-phrase） */
.refHero__content h1 {
    white-space: normal;
}

/* ===============================================================
   261002t：コース欄＝写真のタイトルバナー＋比較表（10/2 髙野さん「表で統一。写真を使ったタイトルバナーにして表で表示」）
   表の数字は原稿確認シートのコース欄（No.29〜32）。スマホは横にスクロールし、左の項目名の列は固定
   =============================================================== */
.refCourseBlock {
    margin-top: clamp(40px, 6vw, 72px);
}

.refCourseBanner {
    position: relative;
    display: flex;
    min-height: clamp(180px, 22vw, 260px);
    align-items: flex-end;
    overflow: hidden;
    border-radius: 8px;
    isolation: isolate;
}

.refCourseBanner__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.refCourseBanner::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(90deg, rgb(var(--scrim-rgb) / 0.7) 0%, rgb(var(--scrim-rgb) / 0.42) 48%, rgb(var(--scrim-rgb) / 0.08) 100%);
}

.refCourseBanner__body {
    padding: clamp(22px, 3.4vw, 40px);
    color: var(--white);
}

.refCourseBanner__en {
    display: block;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    opacity: 0.9;
}

.refPage .refCourseBanner__title {
    margin-top: 4px;
    color: var(--white);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1.3;
}

.refCourseBanner__lead {
    margin-top: 8px;
    font-size: 0.96rem;
    line-height: 1.7;
}

.refCourseTable {
    position: relative;
    margin-top: 18px;
}

.refCourseTable__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.refCourseTable__scroll:focus-visible {
    outline: 3px solid rgb(var(--accent-rgb) / 0.6);
    outline-offset: 2px;
}

.refCourseTable__table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    table-layout: fixed;
}

.refCourseTable--cols3 .refCourseTable__table {
    min-width: 640px;
}

.refCourseTable__table th,
.refCourseTable__table td {
    padding: 14px 16px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.refCourseTable__table tbody tr:last-child th,
.refCourseTable__table tbody tr:last-child td {
    border-bottom: 0;
}

.refCourseTable__table td + td,
.refCourseTable__table th + td,
.refCourseTable__table thead th + th {
    border-left: 1px solid var(--border);
}

.refCourseTable__table thead th {
    color: var(--white);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.45;
    vertical-align: bottom;
    background: var(--seg-color, var(--primary));
}

.refCourseTable__en {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    opacity: 0.86;
}

/* 左の項目名の列。横にスクロールしても残す */
.refCourseTable__table tbody th,
.refCourseTable__table .refCourseTable__corner {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 150px;
    color: var(--primary-dark);
    font-size: 0.84rem;
    font-weight: 800;
    background: var(--bg-light);
    box-shadow: 1px 0 0 0 var(--border);
}

.refCourseTable__table .refCourseTable__corner {
    z-index: 2;
    color: var(--white);
    background: var(--seg-color, var(--primary));
    filter: brightness(0.9);
}

.refCourseTable__table tbody tr:nth-child(even) td {
    background: rgb(var(--panel-rgb) / 0.6);
}

.refCourseTable__table td small {
    display: block;
    color: var(--text-sub);
    font-size: 0.74rem;
    font-weight: 700;
}

.refCourseTable__table .countryListLink--block {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.74rem;
}

/* 横にスクロールできることの案内（スマホだけ・一度動かしたら消える） */
.refCourseTable__hint {
    display: none;
}

@media screen and (max-width: 900px) {
    .refCourseTable::after {
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        width: 28px;
        content: "";
        pointer-events: none;
        background: linear-gradient(90deg, rgb(var(--white-rgb) / 0), rgb(var(--ink-rgb) / 0.12));
        border-radius: 0 8px 8px 0;
        transition: opacity 0.3s ease;
    }

    .refCourseTable.isScrollEnd::after {
        opacity: 0;
    }

    .refCourseTable__hint {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        display: inline-flex;
        gap: 6px;
        align-items: center;
        padding: 10px 16px;
        color: var(--white);
        font-size: 0.82rem;
        font-weight: 800;
        white-space: nowrap;
        pointer-events: none;
        background: rgb(var(--scrim-rgb) / 0.78);
        border-radius: 999px;
        transform: translate(-50%, -50%);
        transition: opacity 0.35s ease;
    }

    .refCourseTable__hint .material-symbols-rounded {
        font-size: 1.3rem;
        animation: refCourseSwipe 1.4s ease-in-out infinite;
    }

    .refCourseTable.isScrolled .refCourseTable__hint {
        opacity: 0;
    }

    .refCourseTable__table tbody th,
    .refCourseTable__table .refCourseTable__corner {
        width: 96px;
        padding: 12px 10px;
        font-size: 0.78rem;
    }

    .refCourseTable__table th,
    .refCourseTable__table td {
        padding: 12px;
    }

    .refCourseTable__table {
        min-width: 680px;
        font-size: 0.86rem;
    }

    .refCourseTable--cols3 .refCourseTable__table {
        min-width: 560px;
    }
}

@keyframes refCourseSwipe {
    0%, 100% { transform: translateX(-4px); }
    50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .refCourseTable__hint .material-symbols-rounded {
        animation: none;
    }
}

/* 261002t 追記：横スクロールの案内は表の上の方に出す（表がスマホで縦に長く、真ん中だと見えるまでに時間がかかる） */
@media screen and (max-width: 900px) {
    .refCourseTable__hint {
        top: 72px;
        transform: translate(-50%, 0);
    }
}

/* 261002w：コース表のあとに「募集要項を見る」「資料請求」のボタン（10/2 髙野さん「プログラムを見てからの導線が弱い」） */
.refCourseCta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
}

.refCourseCta .refButton {
    min-width: 240px;
    min-height: 52px;
    font-size: 0.98rem;
}

.refCourseCta__main {
    background: var(--seg-color, #b85c12);
}

@media screen and (max-width: 640px) {
    .refCourseCta .refButton {
        width: 100%;
    }
}

/* 261002w：改行の再点検。学生の対象の注記（900px）の上限を外す */
body[data-seg] .refTargetNote {
    max-width: none;
}

/* 261003：経験を活かす「研修分野の例から探す」＝研修分野の実績例の抜粋（/work/fields/ へ） */
.refFieldExcerpt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.refFieldExcerpt__col {
    padding: 22px 24px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.refFieldExcerpt__heading {
    margin-bottom: 12px;
    color: var(--seg-color, var(--primary-dark));
    font-size: 1rem;
    font-weight: 800;
}

.fieldChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fieldChips li {
    padding: 6px 13px;
    color: var(--primary-dark);
    font-size: 0.86rem;
    font-weight: 600;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.fieldChips .fieldChips__more {
    border-style: dashed;
}

@media screen and (max-width: 767px) {
    .refFieldExcerpt {
        grid-template-columns: minmax(0, 1fr);
    }
}