:root {
    --primary: #1b3a6e;
    --primary-dark: #122850;
    --primary-light: #3a6bad;
    --accent: #d57524;
    --accent-soft: #f8e4d3;
    --bg-light: #f3f6fa;
    --text: #333333;
    --text-sub: #666666;
    --white: #ffffff;
    --border: #e0e8f0;
    --font-jp: "Noto Sans JP", sans-serif;
    --font-heading: "Shippori Mincho", serif;
    --font-display: "Fraunces", serif;
    --content-wide: 1200px;
    --navy: var(--primary);
    --orange: var(--accent);
    --muted: var(--text-sub);
    --ink-rgb: 13 36 74;
    --primary-dark-rgb: 18 40 80;
    --scrim-rgb: 18 32 51;
    --white-rgb: 255 255 255;
    --accent-rgb: 213 117 36;
    --paper-rgb: 251 250 245;
    --border-rgb: 224 232 240;
    --panel-rgb: 245 247 250;
    --panel-blue-rgb: 236 243 249;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    /* 260930：clip は sticky を殺さない（hidden はスクロール容器になり sticky が効かない）。対応外のブラウザは上の hidden のまま */
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    color: var(--text);
    font-family: var(--font-jp);
    font-size: 16px;
    line-height: 1.8;
    background: var(--white);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

ul,
ol {
    list-style: none;
}

.siteHeader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 6px 28px;
    align-items: center;
    padding: 7px 24px 10px;
    background: rgb(var(--white-rgb) / 0.62);
    border-bottom: 1px solid rgb(var(--white-rgb) / 0.4);
    backdrop-filter: blur(12px);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.siteHeader.isScrolled {
    background: rgb(var(--white-rgb) / 0.94);
    border-bottom-color: rgb(var(--border-rgb) / 0.9);
}

.headerTop {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
}

.headerBrand {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    align-self: center;
}

.headerBrand__en {
    margin-top: 3px;
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.brandLogo {
    display: inline-flex;
    align-items: center;
    width: min(330px, 34vw);
}

.brandLogoImage {
    display: block;
    width: 100%;
    max-height: 56px;
    object-fit: contain;
    object-position: left center;
}

.headerActions {
    display: flex;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.headerTel {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: var(--primary-dark);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 800;
    line-height: 1;
}

.headerTel .material-symbols-rounded {
    font-size: 1.15em;
}

.headerPill,
.searchButton {
    display: inline-flex;
    gap: 4px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-size: 0.84rem;
    font-weight: 800;
    background: #f8f6f0;
    border: 0;
    border-radius: 999px;
}

.headerPill .material-symbols-rounded {
    font-size: 1.15em;
}

.headerPillPrimary {
    color: var(--white);
    background: var(--accent);
}

.searchButton {
    gap: 9px;
    cursor: pointer;
    background: var(--white);
    border: 2px solid #d6dce5;
}

.searchButton span {
    position: relative;
    width: 14px;
    height: 14px;
    border: 3px solid currentColor;
    border-radius: 50%;
    transform: rotate(-15deg);
}

.searchButton span::after {
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 8px;
    height: 3px;
    content: "";
    background: currentColor;
    border-radius: 999px;
}

.menuButton {
    display: none;
    width: 58px;
    height: 58px;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: var(--white);
    cursor: pointer;
    background: var(--primary);
    border: 0;
    border-radius: 50%;
}

.menuButton span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.menuButton b {
    margin-top: 2px;
    font-size: 0.62rem;
    line-height: 1;
}

.globalNav {
    display: flex;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    gap: min(22px, 2.2vw);
    justify-content: flex-end;
    color: var(--primary-dark);
    font-size: 0.86rem;
    font-weight: 800;
}

.globalNavItem {
    position: relative;
    display: flex;
    align-items: stretch;
}

.globalNav > a,
.globalNavItem > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 5px;
}

.globalNav > a::after,
.globalNavItem > a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--accent);
    border-radius: 999px;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.globalNav > a:hover::after,
.globalNavItem:hover > a::after,
.globalNavItem:focus-within > a::after {
    transform: scaleX(1);
}

.globalNavPanel {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    display: grid;
    width: min(300px, 80vw);
    gap: 8px;
    padding: 16px 18px;
    pointer-events: none;
    background: rgb(var(--white-rgb) / 0.98);
    border-top: 3px solid var(--primary);
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.globalNavItem:hover .globalNavPanel,
.globalNavItem:focus-within .globalNavPanel {
    pointer-events: auto;
    opacity: 1;
    transform: translate(-50%, 0);
}

.globalNavPanel p {
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.65;
}

.globalNavPanel a {
    justify-content: flex-start;
    min-height: auto;
    padding: 0;
    color: var(--primary-dark);
    font-size: 0.86rem;
    font-weight: 800;
    border: 0;
}

.globalNavPanel a::after {
    display: none;
}

.fixedContact {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 80;
    display: grid;
    gap: 8px;
    transform: translateY(-50%);
}

.fixedContact__link {
    display: inline-flex;
    width: 48px;
    min-height: 128px;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.3;
    writing-mode: vertical-rl;
    background: var(--accent);
    border-radius: 0 6px 6px 0;
}

.fixedContact__link--tel {
    background: var(--primary);
}

.refSection {
    width: min(var(--content-wide), 100%);
    margin: 0 auto;
    padding: 0 24px clamp(46px, 5vw, 70px);
}

.refTitle {
    margin: 0 auto 28px;
    text-align: center;
}

.refTitle span,
.refKicker {
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0;
}

.refTitle h2 {
    margin-top: 6px;
    color: var(--primary-dark);
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.28;
}

.refTitle p {
    margin-top: 12px;
    color: var(--text-sub);
    line-height: 1.8;
}

.refButton {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 800;
    background: var(--primary);
    border: 0;
    border-radius: 999px;
}

.refButton--ghost {
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--primary);
}

.siteFooter {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    gap: 28px;
    align-items: start;
    padding: 34px 24px 28px 70px;
    color: var(--primary-dark);
    background: #f7f9fb;
    border-top: 1px solid var(--border);
}

.siteFooter__info,
.siteFooter > nav,
.siteFooter > .copyright {
    width: min(var(--content-wide), 100%);
    margin: 0 auto;
}

.siteFooter__lead {
    margin-top: 16px;
    color: var(--primary-dark);
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.75;
}

.siteFooter__contact {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.siteFooter__contactRow {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.siteFooter__contact dt {
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.siteFooter__contact dd {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    color: var(--primary-dark);
    font-weight: 800;
}

.siteFooter__contact span {
    color: var(--text-sub);
    font-size: 0.78rem;
    font-weight: 700;
}

.siteFooter nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 18px;
    font-size: 0.88rem;
    font-weight: 700;
}

.copyright {
    grid-column: 1 / -1;
    padding-top: 20px;
    margin-top: 20px;
    color: var(--text-sub);
    font-size: 0.78rem;
    text-align: center;
    border-top: 1px solid var(--border);
}

.backToTop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: var(--white);
    cursor: pointer;
    pointer-events: none;
    background: var(--primary);
    border: 0;
    border-radius: 50%;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.backToTop.isVisible {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.motionItem {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.motionItem.isVisible {
    opacity: 1;
    transform: translateY(0);
}

.motionItem.motionDelay01 {
    transition-delay: 0.04s;
}

.motionItem.motionDelay02 {
    transition-delay: 0.1s;
}

.motionItem.motionDelay03 {
    transition-delay: 0.16s;
}

.motionItem.motionDelay04 {
    transition-delay: 0.22s;
}

.motionItem.motionDelay05 {
    transition-delay: 0.28s;
}

.motionItem.motionDelay06 {
    transition-delay: 0.34s;
}

.motionItem.motionDelay07 {
    transition-delay: 0.4s;
}

.motionItem.motionDelay08 {
    transition-delay: 0.46s;
}

/* 出現が終わるまでは出現用トランジションを優先し、終わったら遅延を解除してホバー用へ */
.motionItem:not(.isMotionDone) {
    transition-property: opacity, transform;
    transition-duration: 0.55s;
    transition-timing-function: ease;
}

.motionItem.isMotionDone {
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .motionItem {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media screen and (max-width: 1180px) {
    .siteHeader {
        grid-template-columns: auto auto;
        background: rgb(var(--white-rgb) / 0.78);
    }

    .headerTop {
        display: none;
    }

    .headerActions {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .globalNav {
        display: none;
        grid-column: 1 / -1;
        grid-row: 3 / 4;
        flex-direction: column;
        gap: 0;
        padding-top: 8px;
    }

    .globalNav.isOpen {
        display: flex;
    }

    .globalNav > a,
    .globalNavItem > a {
        min-height: 46px;
        align-items: center;
        padding: 0;
        border-bottom: 1px solid var(--border);
    }

    .globalNavItem {
        display: contents;
    }

    .globalNavPanel {
        display: none;
    }

    .menuButton {
        display: inline-flex;
    }

    .searchButton,
    .headerPill:not(.headerPillPrimary) {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .siteFooter {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 640px) {
    body {
        font-size: 15px;
    }

    .siteHeader {
        padding: 8px 14px;
    }

    .brandLogo {
        width: min(260px, calc(100vw - 96px));
    }

    .headerBrand__en {
        display: none;
    }

    .headerTel,
    .headerPill {
        display: none;
    }

    .refSection {
        padding: 40px 16px;
    }

    .fixedContact {
        display: none;
    }

    .siteFooter {
        padding: 34px 24px 28px;
    }

    .siteFooter nav {
        grid-template-columns: 1fr;
    }
}

/* Interview archive cards */
.detailArchiveGrid--interview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
}

.detailArchiveCard.detailArchiveCard--interview {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 392px;
    overflow: hidden;
    background: var(--primary-dark);
    border: 0;
    border-radius: 14px;
}

.detailArchiveCard[hidden] {
    display: none;
}

.detailArchiveCard--interview .detailArchiveCard__fullLink {
    position: absolute;
    z-index: 30;
    inset: 0;
    display: block;
    overflow: hidden;
    color: transparent;
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
}

.detailArchiveCard--interview .detailArchiveCard__image {
    display: block;
    height: 248px;
    overflow: hidden;
    background: var(--bg-light);
}

.detailArchiveCard--interview .detailArchiveCard__thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.detailArchiveCard--interview:hover .detailArchiveCard__thumbnail {
    transform: scale(1.04);
}

.detailArchiveCard--interview .detailArchiveCard__headline {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 138px;
    z-index: 2;
}

.detailArchiveCard--interview .detailArchiveCard__title {
    display: inline;
    margin: 0;
    color: var(--white);
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.68;
}

.detailArchiveCard--interview .detailArchiveCard__title span {
    display: table;
    width: fit-content;
    padding: 0 5px 2px;
    margin-top: 3px;
    background: rgb(var(--ink-rgb) / 0.92);
}

.detailArchiveCard--interview .detailArchiveCard__body {
    flex: 1 1 auto;
    padding: 24px 20px 22px;
    color: var(--white);
    background: var(--primary-dark);
}

.detailArchiveCard--interview .detailArchiveCard__kicker {
    margin: 0 0 8px;
    color: rgb(var(--white-rgb) / 0.86);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.55;
}

.detailArchiveCard--interview .detailArchiveCard__name {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: baseline;
    margin: 0;
}

.detailArchiveCard--interview .detailArchiveCard__name b {
    color: var(--white);
    font-size: 1.2rem;
    line-height: 1.2;
}

.detailArchiveCard--interview .detailArchiveCard__name em {
    color: rgb(var(--white-rgb) / 0.86);
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 800;
}

.detailArchiveCard--interview .detailArchiveCard__link {
    position: relative;
    z-index: 6;
    display: inline-flex;
    justify-self: start;
    align-items: center;
    min-width: 132px;
    min-height: 40px;
    padding: 0 28px;
    margin-top: 22px;
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    border: 1px solid rgb(var(--white-rgb) / 0.9);
    border-radius: 6px;
}

.detailArchiveCard--interview .detailArchiveCard__link::after {
    position: absolute;
    right: -16px;
    width: 30px;
    height: 1px;
    content: "";
    background: rgb(var(--white-rgb) / 0.85);
}

.detailArchiveGrid--related {
    max-width: 1100px;
    margin: 0 auto;
}


/* ===============================================================
   55号：固定ヘッダーの実高さ（--headerH、wire.js が設定）に先頭セクションを連動
   =============================================================== */
main .detailHero,
main .detailSubHero,
main .detailSubHero--destination,
main .detailVoiceHero,
main .rootHero {
    padding-top: calc(var(--headerH, 127px) + 8px);
}

/* ===============================================================
   55号：ホバーアニメーション（全ページ共通）
   =============================================================== */
a,
button {
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* ボタン類：浮き上がり＋影 */
.refButton,
.rootButton,
.rootButtonGhost,
.headerPill,
.headerTel,
.fixedContact__link,
.detailContact__buttons a,
.stuBand__button,
.refChoose__chip,
.detailFaqFilter__button,
.detailArchiveTab,
.rootHeroTabs__button,
.searchButton,
.menuButton {
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.refButton:hover,
.rootButton:hover,
.rootButtonGhost:hover,
.headerPill:hover,
.fixedContact__link:hover,
.detailContact__buttons a:hover,
.stuBand__button:hover,
.refChoose__chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgb(var(--ink-rgb) / 0.2);
}

.refButton:active,
.rootButton:active,
.rootButtonGhost:active,
.headerPill:active,
.detailContact__buttons a:active {
    transform: translateY(0);
    box-shadow: none;
}

/* カード類：浮き上がり＋影 */
.refFeatureGrid__item,
.refInfographic__item,
.refProgramCard,
.refVoiceGrid article,
.refFlow li a,
.refUsefulInfo__banner,
.refNews__list a,
.refRecruitList > div,
.detailArchiveCard,
.detailCard,
.detailListCard,
.detailProgramCard,
.detailCourseCard,
.detailActivityCard,
.detailLeadCard,
.detailPointGrid article,
.detailFaqItem,
.detailUsefulBanner,
.rootIntro__card,
.rootStats__item,
.rootVoice__card,
.rootNews__list > a,
.stuCountryCard {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.refFeatureGrid__item:hover,
.refProgramCard:hover,
.refVoiceGrid article:hover,
.refFlow li a:hover,
.refUsefulInfo__banner:hover,
.detailArchiveCard:hover,
.detailCard:hover,
.detailListCard:hover,
.detailProgramCard:hover,
.detailCourseCard:hover,
.detailActivityCard:hover,
.detailUsefulBanner:hover,
.rootIntro__card:hover,
.rootVoice__card:hover,
.stuCountryCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgb(var(--ink-rgb) / 0.14);
}

/* 行リンク（ニュース等）：背景をわずかに */
.refNews__list a:hover,
.rootNews__list > a:hover {
    background-color: rgb(var(--ink-rgb) / 0.04);
}

/* カード内画像：ラッパーが overflow:hidden の部品だけズーム */
.detailArchiveCard__image,
.detailProgramCard__image,
.rootIntro__image,
.rootVoice__card > a,
.refFeatureGrid__item {
    overflow: hidden;
}

.detailArchiveCard__image img,
.detailProgramCard__image img,
.refFeatureGrid__photo,
.rootIntro__image img,
.rootVoice__card img {
    transition: transform 0.6s ease;
}

.detailArchiveCard:hover .detailArchiveCard__image img,
.detailProgramCard:hover .detailProgramCard__image img,
.refFeatureGrid__item:hover .refFeatureGrid__photo,
.rootIntro__card:hover .rootIntro__image img,
.rootVoice__card:hover img {
    transform: scale(1.04);
}

/* テキストリンク・矢印リンク：矢印が右へ */
.detailTextLink,
.detailArchiveCard__link,
.refVoiceMore a,
.refFlowMore a,
.refFaqMore a {
    transition: color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.detailTextLink:hover {
    transform: translateX(3px);
}

/* ロゴ */
.brandLogo {
    transition: opacity 0.25s ease;
}

.brandLogo:hover {
    opacity: 0.78;
}

@media (hover: none) {
    .refFeatureGrid__item:hover,
    .refProgramCard:hover,
    .detailArchiveCard:hover,
    .detailCard:hover,
    .detailListCard:hover,
    .detailProgramCard:hover,
    .rootIntro__card:hover,
    .rootVoice__card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* 56号：研修国一覧（/country/）へのテキストリンク */
.countryListLink {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin-left: 0.6em;
    font-size: 0.92em;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.countryListLink:hover {
    transform: translateX(3px);
    opacity: 0.8;
}

.countryListLink--block {
    display: block;
    width: fit-content;
    margin: 4px 0 0;
}

@media (hover: none) {
    .countryListLink:hover {
        transform: none;
        opacity: 1;
    }
}

.countryListLink::after {
    content: "→";
    font-weight: 900;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    a,
    button,
    .motionItem,
    [class*="Card"],
    [class*="__item"] {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ================================================================
   61号: ヘッダー左上の名称出し分け（2026-08-25）
   ロゴSVG内のアウトライン文字を廃止し、マークSVG＋HTMLテキスト2行に変更。
   文言はページ側（.brandLogoText__catch / __name）で出し分ける。
   旧 .brandLogoImage 規則は list260*.html（検収用スナップショット）用に残置。
   ================================================================ */
.brandLogo--text {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
}

.brandLogoMark {
    display: block;
    flex: none;
    width: auto;
    height: 52px;
}

.brandLogoText {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.brandLogoText__catch {
    color: #5e5e5e; /* 旧ロゴSVG 1行目と同色 */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.brandLogoText__name {
    color: #283b81; /* 旧ロゴSVG 2行目と同色 */
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

@media screen and (max-width: 640px) {
    .brandLogo--text {
        width: auto;
    }

    .brandLogoMark {
        height: 38px;
    }

    .brandLogoText__catch {
        font-size: 10px;
    }

    .brandLogoText__name {
        font-size: 14px;
    }
}

@media screen and (max-width: 360px) {
    .brandLogoMark {
        height: 32px;
    }

    .brandLogoText__catch {
        font-size: 9px;
    }

    .brandLogoText__name {
        font-size: 12px;
    }
}

/* ================================================================
   日本語の折り返し（2026-09-13・全ページ共通）
   「案内していま／す。」のように最後の1〜2文字だけが次行へ落ちるのを止める。
   ・text-wrap: balance … 見出し。行の長さを揃える
   ・text-wrap: pretty  … 本文。最終行が極端に短くなるのを避ける
   ・word-break: auto-phrase … 日本語を文節で折り返す（これが本命・Chrome 119+）
   短い語（ナビ・タグ・日付）は、そもそも折らない。
   ================================================================ */
h1, h2, h3,
.detailTitle__heading,
.expHead__title {
    text-wrap: balance;
}

p, li, dd, figcaption, blockquote {
    text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
    h1, h2, h3, h4, p, li, dd, dt, figcaption, blockquote, strong, a,
    button, .detailTitle__heading, .detailListCard__text, .refExpandPanel__text,
    .expHead__lead, .expCard__title {
        word-break: auto-phrase;
    }
}

.globalNav a,
.headerPill,
.headerTel,
.siteFooter nav a,
.detailBreadcrumb a,
.expBreadcrumb a,
.expTag,
.prgTag,
.countryXlink__chip,
.countryListLink,
.rootFields__mini,
.detailMiniLabel {
    white-space: nowrap;
}

/* 260915：グローバルナビの「プログラム」パネル（4つのプログラム） */
.globalNavPanel--wide {
    width: min(340px, 86vw);
    gap: 4px;
}

.globalNavPanel a small {
    display: block;
    margin-top: 1px;
    color: var(--text-sub);
    font-size: 0.71rem;
    font-weight: 500;
    letter-spacing: 0;
}

/* ===============================================================
   260930：強制改行と幅の上限を外す（9/29 打ち合わせ）
   「右に何もない箇所で改行しない。スマホや文字の大きさを変えたときに変な場所で切れる」
   =============================================================== */
/* 見出しの <br> を外したので、折り返しは文節で（対応外のブラウザは通常の折り返し） */
h1,
h2,
h3,
.refTargetList__text {
    word-break: auto-phrase;
}

/* 260930 のスマホメニュー（参加を考えている方への字下げ）は 261002t のGN作り直しへ吸収した */

/* 261002：ヒーロー見出しの文節の区切り（トップと4つの面）。区切りの間でだけ折り返す。
   見出しは1文字ずつ span に分けて動かすため、word-break: auto-phrase が効かない */
.heroPhrase {
    display: inline-block;
    white-space: nowrap;
}

/* ===============================================================
   261002t：色を明るく（10/2 髙野さん「この紺が暗い。白い文字以外の所も、広い面も暗い」）
   紺 #1b3a6e → 青 #2563a8（白い文字とのコントラスト比 6.1・基準 4.5 以上）
   見出しの文字色 #122850 → #1d4f8a（白地で 8.3）。写真にかけるベール（--scrim-rgb）は据え置き
   日本を伝える・経験を活かす（general.css）と学生（student.css）は面ごとの色を持つので、そちらが勝つ
   =============================================================== */
:root {
    --primary: #2563a8;
    --primary-dark: #1d4f8a;
    --primary-light: #5b8fcc;
    --primary-dark-rgb: 29 79 138;
    --ink-rgb: 24 66 120;
}

/* ===============================================================
   261002t：グローバルナビの作り直し（AUC の技術紹介の形）
   PC＝項目に乗せると、ヘッダーの下に全幅の白い板。左に英字の大見出し＋和文、右に文字だけのリンクを2〜3列
   スマホ＝項目ごとに＋で開く。中身は同じリンク
   =============================================================== */
.globalNavItem__toggle {
    display: none;
}

@media screen and (min-width: 1181px) {
    .globalNav .globalNavItem--mega {
        position: static;
    }

    .globalNav .globalNavMega {
        position: fixed;
        top: var(--headerH, 120px);
        right: 0;
        left: 0;
        display: block;
        width: auto;
        padding: 0;
        background: var(--white);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 24px 40px -28px rgb(var(--ink-rgb) / 0.35);
        transform: translateY(8px);
    }

    /* 項目から板までのすき間でマウスが外れないように、板の上に見えない帯を足す */
    .globalNav .globalNavMega::before {
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 18px;
        content: "";
    }

    .globalNav .globalNavItem:hover .globalNavMega,
    .globalNav .globalNavItem:focus-within .globalNavMega {
        transform: translateY(0);
    }

    .globalNavMega__inner {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 40px;
        width: min(1160px, calc(100% - 48px));
        margin: 0 auto;
        padding: 30px 0 34px;
    }

    .globalNavMega__en {
        display: block;
        color: var(--primary);
        font-family: var(--font-display);
        font-size: 1.9rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1.1;
    }

    .globalNavMega__ja {
        display: block;
        margin-top: 8px;
        color: var(--text-sub);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    .globalNav .globalNavMega__head p {
        margin-top: 14px;
        color: var(--text-sub);
        font-size: 0.82rem;
        font-weight: 500;
        line-height: 1.7;
    }

    .globalNavMega__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 300px));
        gap: 0 40px;
        align-content: start;
    }

    .globalNavMega__list--cols3 {
        grid-template-columns: repeat(3, minmax(0, 220px));
    }

    .globalNav .globalNavMega__list a {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 8px;
        align-items: center;
        padding: 11px 0;
        color: var(--primary-dark);
        font-size: 0.88rem;
        font-weight: 700;
        line-height: 1.5;
        white-space: normal;
        border-bottom: 1px solid var(--border);
        transition: color 0.2s ease;
    }

    .globalNav .globalNavMega__list a::after {
        position: static;
        display: block;
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
        height: auto;
        content: "\2192";
        color: var(--text-sub);
        font-family: var(--font-display);
        background: none;
        transform: none;
        transition: translate 0.2s ease, color 0.2s ease;
    }

    .globalNav .globalNavMega__list a small {
        grid-column: 1;
        margin: 0;
        font-size: 0.72rem;
    }

    .globalNav .globalNavMega__list a:hover,
    .globalNav .globalNavMega__list a:focus-visible {
        color: var(--accent);
    }

    .globalNav .globalNavMega__list a:hover::after,
    .globalNav .globalNavMega__list a:focus-visible::after {
        color: var(--accent);
        translate: 4px 0;
    }

    /* 「一覧」は1行目を横断させて少し強く */
    .globalNav .globalNavMega__list .globalNavMega__all {
        grid-column: 1 / -1;
        color: var(--accent);
        font-weight: 800;
    }
}

@media screen and (max-width: 1180px) {
    .globalNav.isOpen {
        max-height: calc(100dvh - var(--headerH, 80px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .globalNav .globalNavItem {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46px;
        align-items: center;
        border-bottom: 1px solid var(--border);
    }

    .globalNav .globalNavItem > a {
        border-bottom: 0;
    }

    .globalNavItem__toggle {
        position: relative;
        display: block;
        width: 46px;
        height: 46px;
        cursor: pointer;
        background: none;
        border: 0;
    }

    .globalNavItem__toggle::before,
    .globalNavItem__toggle::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        content: "";
        background: var(--primary);
        border-radius: 999px;
        transform: translate(-50%, -50%);
        transition: transform 0.2s ease;
    }

    .globalNavItem__toggle::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .globalNavItem.isExpanded .globalNavItem__toggle::after {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    .globalNav .globalNavMega {
        position: static;
        display: none;
        grid-column: 1 / -1;
        width: auto;
        padding: 0 0 10px 14px;
        pointer-events: auto;
        background: none;
        border: 0;
        opacity: 1;
        transform: none;
    }

    .globalNav .globalNavItem.isExpanded .globalNavMega {
        display: block;
    }

    .globalNavMega__head {
        display: none;
    }

    .globalNavMega__list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .globalNavMega__list--cols3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
    }

    .globalNav .globalNavMega__list a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 40px;
        padding: 6px 0;
        color: var(--primary-dark);
        font-size: 0.86rem;
        font-weight: 700;
        white-space: normal;
    }

    .globalNav .globalNavMega__list a small {
        display: none;
    }

    .globalNav .globalNavMega__list .globalNavMega__all {
        color: var(--accent);
    }
}

/* ===============================================================
   261002t：フッターを1つに揃える。スマホはグループごとのアコーディオン（PCは開いたまま）
   =============================================================== */
.siteFooter .siteFooter__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 28px;
    align-content: start;
    font-size: 0.86rem;
}

.siteFooter__group summary {
    padding-bottom: 8px;
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    list-style: none;
    border-bottom: 1px solid var(--border);
}

.siteFooter__group summary::-webkit-details-marker {
    display: none;
}

.siteFooter__group ul {
    display: grid;
    gap: 7px;
}

.siteFooter .siteFooter__group a {
    color: var(--primary-dark);
    font-weight: 500;
    white-space: normal;
}

.siteFooter__group a small {
    display: block;
    color: var(--text-sub);
    font-size: 0.72rem;
}

.siteFooter .siteFooter__group a:hover,
.siteFooter .siteFooter__utility a:hover {
    color: var(--accent);
}

.siteFooter__utility {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 6px 22px;
    padding-top: 14px;
    margin-top: 8px;
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
}

.siteFooter .siteFooter__utility a {
    color: var(--text-sub);
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    /* PC では開いたまま。見出しを押しても閉じない */
    .siteFooter__group summary {
        pointer-events: none;
    }
}

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

    .siteFooter__group {
        border-bottom: 1px solid var(--border);
    }

    .siteFooter__group summary {
        position: relative;
        display: flex;
        min-height: 48px;
        align-items: center;
        padding: 0 36px 0 0;
        margin: 0;
        font-size: 0.92rem;
        cursor: pointer;
        border-bottom: 0;
    }

    .siteFooter__group summary::before,
    .siteFooter__group summary::after {
        position: absolute;
        top: 50%;
        right: 10px;
        width: 13px;
        height: 2px;
        content: "";
        background: var(--primary);
        border-radius: 999px;
        transition: transform 0.2s ease;
    }

    .siteFooter__group summary::after {
        transform: rotate(90deg);
    }

    .siteFooter__group[open] summary::after {
        transform: rotate(0deg);
    }

    .siteFooter__group ul {
        gap: 0;
        padding: 0 0 12px 12px;
    }

    .siteFooter .siteFooter__group a {
        display: block;
        padding: 7px 0;
    }

    .siteFooter__utility {
        margin-top: 0;
        border-top: 0;
    }
}

/* 261002t 追記：スマホのメニュー
   ・開いた項目にフォーカスが入ると、元のパネルの「左へ半分ずらす」（translate(-50%)）が効いて中身が左にはみ出していた
   ・ロゴが2〜4段目にまたがっていて、メニューを開くとメニューの真ん中に重なっていた → 2段目だけにする */
@media screen and (max-width: 1180px) {
    .globalNav .globalNavItem .globalNavMega,
    .globalNav .globalNavItem:hover .globalNavMega,
    .globalNav .globalNavItem:focus-within .globalNavMega {
        transform: none;
    }

    .siteHeader .headerBrand {
        grid-row: 2 / 3;
    }
}

/* 261002t 追記：スマホのメニューを開いているあいだはヘッダーを白く（後ろの写真が透けて読みにくい）。
   開いた項目に出ていたPC用の下線も消す */
@media screen and (max-width: 1180px) {
    .siteHeader:has(.globalNav.isOpen) {
        background: var(--white);
    }

    .globalNav .globalNavItem > a::after {
        display: none;
    }
}

/* ===============================================================
   261002w：髙野さん 10/2（2回目）
   =============================================================== */

/* --- ① 資料請求が3つ出ていた（ヘッダー／ページ内メニュー／左の縦ボタン）---
   PC＝ヘッダーの「資料請求」だけ。左の縦ボタンとページ内メニューの資料請求は出さない
   スマホ（640px以下）＝ヘッダーのボタンは元から隠れるので、画面の下に横いっぱいの帯で常駐 */
.fixedContact,
.refLocalNav__cta {
    display: none;
}

@media screen and (max-width: 640px) {
    .fixedContact {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: var(--white);
        box-shadow: 0 -4px 16px rgb(var(--ink-rgb) / 0.12);
        transform: none;
    }

    .fixedContact .fixedContact__link {
        width: auto;
        min-height: 54px;
        padding: 0 8px;
        font-size: 0.92rem;
        writing-mode: horizontal-tb;
        border-radius: 0;
    }

    .fixedContact .fixedContact__link--request {
        background: #b85c12;
    }

    .fixedContact .fixedContact__link--tel {
        background: var(--primary);
    }

    .fixedContact__link::before {
        margin-right: 6px;
        font-family: "Material Symbols Rounded";
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1;
    }

    .fixedContact__link--request::before {
        content: "description";
    }

    .fixedContact__link--tel::before {
        content: "call";
    }

    /* 帯の下に本文の最後が隠れないように */
    body {
        padding-bottom: 54px;
    }

    .backToTop {
        bottom: 70px;
    }
}

/* --- ② ページ内のメニューは top.css の末尾（261002w）へ。元の指定が top.css にあり、ここに書くと負けるため --- */

/* --- ④ 参加者の声のカード ---
   写真の上の言葉の地が、下の名前の地と同じ紺で見分けにくい → 言葉は白地に濃い青の文字
   「Read More」に動き：在庫 HOVER-06（丸い矢印つきボタン）の暗い面の版を、カードに乗せたときに出す
   ＝白が左から差し込んで文字が濃い青に反転し、右の線が右へ抜けて左から戻る */
.detailArchiveCard--interview .detailArchiveCard__title span {
    color: var(--primary-dark);
    background: rgb(var(--white-rgb) / 0.95);
}

.detailArchiveCard--interview .detailArchiveCard__link {
    background: linear-gradient(var(--white), var(--white)) no-repeat left center / 0% 100%;
    transition: background-size 0.45s cubic-bezier(0.8, 0, 0.2, 1), color 0.35s ease;
}

@media (hover: hover) {
    .detailArchiveCard--interview:hover .detailArchiveCard__link {
        color: var(--primary-dark);
        background-size: 100% 100%;
    }

    .detailArchiveCard--interview:hover .detailArchiveCard__link::after {
        animation: iipMoreLine 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }
}

@keyframes iipMoreLine {
    0% { transform: translateX(0); opacity: 1; }
    49.9% { transform: translateX(18px); opacity: 0.01; }
    50% { transform: translateX(-18px); opacity: 0.01; }
    100% { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .detailArchiveCard--interview .detailArchiveCard__link {
        transition: none;
    }

    .detailArchiveCard--interview:hover .detailArchiveCard__link::after {
        animation: none;
    }
}

/* --- ⑤ 国旗（研修国のページ・GN の研修国の板） --- */
.countryFlag {
    display: inline-block;
    width: auto;
    height: 0.95em;
    margin-right: 0.45em;
    vertical-align: -0.08em;
    box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.15);
}

.countryFlag--hero {
    height: 0.8em;
    margin-right: 0.35em;
    vertical-align: -0.02em;
}

@media screen and (min-width: 1181px) {
    .globalNav .globalNavMega__list a[href*="country/"]:not(.globalNavMega__all) {
        grid-template-columns: 26px minmax(0, 1fr) auto;
    }

    .globalNav .globalNavMega__list a[href*="country/"]:not(.globalNavMega__all)::after {
        grid-column: 3;
    }
}

.globalNav .globalNavMega__list a[href*="country/"]:not(.globalNavMega__all)::before {
    display: inline-block;
    width: 22px;
    height: 15px;
    margin-right: 8px;
    content: "";
    background: center / contain no-repeat;
    box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.15);
}

@media screen and (max-width: 1180px) {
    .globalNav .globalNavMega__list a[href*="country/"]:not(.globalNavMega__all) {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
}

.globalNavMega__list a[href*="country/uk/"]::before { background-image: url("../img/flags/uk.svg"); }
.globalNavMega__list a[href*="country/usa/"]::before { background-image: url("../img/flags/usa.svg"); }
.globalNavMega__list a[href*="country/canada/"]::before { background-image: url("../img/flags/canada.svg"); }
.globalNavMega__list a[href*="country/australia/"]::before { background-image: url("../img/flags/australia.svg"); }
.globalNavMega__list a[href*="country/nz/"]::before { background-image: url("../img/flags/nz.svg"); }
.globalNavMega__list a[href*="country/ireland/"]::before { background-image: url("../img/flags/ireland.svg"); }
.globalNavMega__list a[href*="country/finland/"]::before { background-image: url("../img/flags/finland.svg"); }
.globalNavMega__list a[href*="country/denmark/"]::before { background-image: url("../img/flags/denmark.svg"); }
.globalNavMega__list a[href*="country/norway/"]::before { background-image: url("../img/flags/norway.svg"); }
.globalNavMega__list a[href*="country/sweden/"]::before { background-image: url("../img/flags/sweden.svg"); }
.globalNavMega__list a[href*="country/netherlands/"]::before { background-image: url("../img/flags/netherlands.svg"); }
.globalNavMega__list a[href*="country/france/"]::before { background-image: url("../img/flags/france.svg"); }
.globalNavMega__list a[href*="country/italy/"]::before { background-image: url("../img/flags/italy.svg"); }
.globalNavMega__list a[href*="country/spain/"]::before { background-image: url("../img/flags/spain.svg"); }
.globalNavMega__list a[href*="country/poland/"]::before { background-image: url("../img/flags/poland.svg"); }

/* 261002w 追記：地図のカードの国旗に「カードの写真」の指定（幅100%・4:3）がかかって大きく出ていた */
.stuCountryCard .countryFlag {
    display: inline-block;
    width: auto;
    height: 0.95em;
    aspect-ratio: auto;
    object-fit: contain;
}

/* ===============================================================
   261004：髙野さん確認（10/4）への対応
   =============================================================== */

/* ---- 日本語の改行：<wbr> で区切った文節の間でだけ折る（BudouX）。
   auto-phrase に対応していないブラウザでも「によっ／て」のように語の途中で切れない。
   <wbr> を持たない文字列は、はみ出すときだけ折る（overflow-wrap: anywhere）。 */
main,
.siteFooter {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ---- グローバルナビのメガメニュー：色付きの行が「見出し」に見えて押せないと思われた件 ----
   「すべて見る」の行も他の行と同じ紺の文字にし、薄い面と枠で「押せる行」だと分かる形にする。
   過去の体験談など、あまり前に出さないものは小さな文字リンクにする。 */
.globalNav .globalNavMega__list a.globalNavMega__all {
    padding: 11px 14px;
    margin-bottom: 6px;
    color: var(--primary-dark);
    font-weight: 800;
    background: var(--bg-light, #f5f8fc);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.globalNav .globalNavMega__list a.globalNavMega__all::after {
    color: var(--accent);
    font-weight: 800;
}

.globalNav .globalNavMega__list a.globalNavMega__sub {
    grid-column: 1 / -1;
    padding: 12px 0 2px;
    color: var(--text-sub);
    font-size: 0.78rem;
    font-weight: 500;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.globalNav .globalNavMega__list a.globalNavMega__sub small {
    display: none;
}

/* ---- 文字リンク（ボタンにしない導線） ---- */
.refSection p.refTextLinks,
.refTextLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    justify-content: center;
    margin: 20px 0 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.refSection p.refTextLinks a:not(.refButton),
.refTextLinks a {
    color: var(--primary-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.refTextLinks a::after {
    display: inline-block;
    margin-left: 6px;
    content: "\2192";
    transition: margin-left 0.2s ease;
}

.refTextLinks a:hover::after {
    margin-left: 11px;
}

.refSection p.refTextLinks--small,
.refTextLinks--small {
    margin-top: 14px;
    font-size: 0.82rem;
    font-weight: 500;
}

.refSection p.refTextLinks--small a:not(.refButton),
.refTextLinks--small a {
    color: var(--text-sub);
}

/* ---- 「授業の例を見る」：誘導したいリンクなので、塗りのボタンにして動きを付ける ----
   動きは JSアニメーションライブラリ HOVER-06（丸い矢印つきボタン）の移植。
   乗せると背景が左から差し込み、リングが1回転し、矢印が右へ抜けて左から戻る。JS 0行 */
.refButton--lesson {
    position: relative;
    z-index: 0;
    gap: 16px;
    min-height: 62px;
    padding: 0 14px 0 30px;
    overflow: hidden;
    color: #ffffff;
    font-size: 1rem;
    letter-spacing: 0.03em;
    background: var(--accent-strong, #b85c09);
    box-shadow: 0 10px 24px rgb(184 92 9 / 0.28);
    transition: color 0.35s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

.refButton--lesson::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: var(--primary-dark);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(0.8, 0, 0.2, 1);
}

.refButton--lesson .refButton__text {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
}

.refButton--lesson .refButton__text b {
    padding: 3px 12px;
    font-size: 0.86rem;
    background: rgb(255 255 255 / 0.2);
    border-radius: 999px;
}

.refButton--lesson .refButton__ring {
    position: relative;
    display: block;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
}

.refButton--lesson .refButton__ring::before {
    position: absolute;
    inset: 0;
    content: "";
    border: 1px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.7;
    transition: rotate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}

.refButton--lesson .refButton__ring::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 10px;
    content: "";
    background: currentColor;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    translate: -50% -50%;
}

@media (hover: hover) {
    .refButton--lesson:hover::before {
        transform: scaleX(1);
        transform-origin: left center;
    }

    .refButton--lesson:hover .refButton__ring::before {
        rotate: 360deg;
        opacity: 1;
    }

    .refButton--lesson:hover .refButton__ring::after {
        animation: lessonArrowLoop 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }
}

@keyframes lessonArrowLoop {
    0% { translate: -50% -50%; opacity: 1; }
    45% { translate: 14px -50%; opacity: 0.01; }
    55% { translate: -34px -50%; opacity: 0.01; }
    100% { translate: -50% -50%; opacity: 1; }
}

@media (max-width: 767px) {
    .refButton--lesson {
        min-height: 56px;
        padding-left: 22px;
        font-size: 0.92rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .refButton--lesson::before,
    .refButton--lesson .refButton__ring::before {
        transition: none;
    }

    .refButton--lesson:hover .refButton__ring::after {
        animation: none;
    }
}

/* ---- /teacher/grant/：右の大きな色面をやめ、見出しの下の細い帯にした ---- */
.detailInner.detailGrantBox {
    grid-template-columns: minmax(0, 1fr);
}

.detailGrantBox__note {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    align-items: baseline;
    margin: 0 0 18px;
    padding: 12px 18px;
    background: rgb(var(--accent-rgb) / 0.12);
    border-left: 4px solid var(--accent);
    border-radius: 0 6px 6px 0;
}

.detailGrantBox__noteTitle {
    color: var(--primary-dark);
    font-size: 1rem;
    font-weight: 800;
}

.detailGrantBox__noteText {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.7;
}

.detailGrantBox__tokyo {
    margin: 0 0 20px;
    font-size: 0.92rem;
    font-weight: 700;
}

.detailGrantBox__tokyo a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.detailGrantBox__tokyo a span {
    margin-left: 6px;
}

/* ---- 「IIPの研修とは」ページ：直接来た人がプログラムへ進めるようにする導線（261004） ---- */
.aboutProgramLinks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.aboutProgramLink {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 18px 44px 18px 20px;
    color: var(--primary-dark);
    background: var(--white, #ffffff);
    border: 2px solid var(--primary);
    border-radius: 6px;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.aboutProgramLink b {
    font-size: 1rem;
    font-weight: 800;
}

.aboutProgramLink span {
    font-size: 0.82rem;
    line-height: 1.6;
    opacity: 0.85;
}

.aboutProgramLink::after {
    position: absolute;
    top: 50%;
    right: 18px;
    content: "\2192";
    transform: translateY(-50%);
    transition: right 0.25s ease;
}

.aboutProgramLink:hover,
.aboutProgramLink:focus-visible {
    color: #ffffff;
    background: var(--primary);
}

.aboutProgramLink:hover::after {
    right: 12px;
}

@media (max-width: 900px) {
    .aboutProgramLinks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .aboutProgramLinks {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===============================================================
   261004：読みにくい文字色の洗い出し（髙野さん「タイトルが見えてない。他にも広げて確認」）
   ・原因1：segment.css が、濃い色のラベル（.detailTitle__label）にも面ごとの色の文字を載せていた → 解消済み（segment.css）
   ・原因2：橙(#d57524 / #f08a1c)の文字を白〜薄い面に載せていた（コントラスト比 2.4〜3.1）
   → 明るい面の橙文字は濃い橙（--accent-strong・4.6以上）、濃い面の橙文字は明るい橙（#ffb866）に分ける
   =============================================================== */
:root {
    --accent-strong: #a9530d;
}

body .siteFooter .siteFooter__contact dt,
body .detailTextLink,
body .detailMiniLabel,
body .detailProgramCard__country,
body .detailFlowConsult__label,
body .voiceChapterNum,
body .storyCard__facts dt,
body.rootPage .rootNews__category,
body.rootPage .rootTitle span {
    color: var(--accent-strong);
}

body .detailPage--flow .detailApplyFlow .detailTextLink,
body .detailPage--flow .detailFlowExam .detailTextLink,
body .detailPage--flow .detailLeadCard .detailTextLink {
    color: #ffffff;
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

body .detailFormMock__badge--req {
    background: var(--accent-strong);
}

body .processStep__num {
    background: #1b7f91;
}

/* 濃い面に載る橙の文字は明るい橙に */
body.rootPage .rootMap .rootTitle span,
body.rootPage .rootTrust__quoteLabel,
body .refExpandPanel .refExpandPanel__label {
    color: #ffb866;
}

/* 薄い灰色の補助文字（件数・項目名） */
body .expChip,
body .expChip small,
body .expCard__meta dt,
body .colCard dt {
    color: #5f6b7d;
}

/* ---- /work/fields/：Work と Culture を1つの節にまとめた（261004）。小見出しで分ける ---- */
.fieldGroupHeading {
    margin: 4px 0 14px;
    color: var(--primary-dark);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.5;
}

.fieldGroupHeading--next {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

/* ---- 四角い枠のボタン（主な導線。.refVs__link と同じ見た目・261004） ---- */
.refSection p.refBoxButtonWrap {
    margin: 24px 0 0;
    text-align: center;
}

.refBoxButton {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 14px 26px;
    color: var(--primary-dark);
    font-weight: 800;
    text-decoration: none;
    background: #ffffff;
    border: 2px solid var(--primary);
    border-radius: 6px;
    transition: color 0.25s ease, background-color 0.25s ease, gap 0.25s ease;
}

.refBoxButton .material-symbols-rounded {
    font-size: 20px;
}

.refBoxButton:hover,
.refBoxButton:focus-visible {
    gap: 16px;
    color: #ffffff;
    background: var(--primary);
}

.refSection p.refBoxButtonWrap a.refBoxButton {
    color: var(--primary-dark);
    text-decoration: none;
}

.refSection p.refBoxButtonWrap a.refBoxButton:hover,
.refSection p.refBoxButtonWrap a.refBoxButton:focus-visible {
    color: #ffffff;
}

/* 261005：古いパンフレットからの追記（school/about の毎日・work/programs の特別プログラム） */
.schoolDaily__voice { margin-top: 1em; padding: .9em 1em; background: var(--surface-soft, #f4f7fb); border-left: 3px solid var(--accent-strong, #c2410c); font-size: .92em; }
.schoolDaily__voice b { display: block; margin-bottom: .3em; }
.wcpSpecial { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
@media (max-width: 1023px) { .wcpSpecial { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wcpSpecial__item { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
.wcpSpecial__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.wcpSpecial__body { padding: 14px 16px 18px; }
.wcpSpecial__body .detailBodyText { font-size: .92rem; }
.wcpSpecial__title { margin: .3em 0 .5em; font-size: 1.1rem; }
.wcpSpecial__title small { margin-left: .6em; font-size: .8em; font-weight: normal; opacity: .75; }
.supportCounsel { margin-top: 32px; }
@media (max-width: 767px) { .wcpSpecial { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .detailCardGrid.schoolDaily, .detailCardGrid.workMatch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 261005：参加者の声の詳細ページ ヒーローを詰める（見出し2行・名前の帯を横長・写真の高さを抑える・概要をヒーローに収める） */
main.detailVoicePage .detailVoiceHero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); }
main.detailVoicePage .detailVoiceHero__copy { min-height: 0; justify-content: flex-start; padding: 32px 48px 36px 0; }
main.detailVoicePage .detailVoiceHero__heading { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.45; }
main.detailVoicePage .detailVoiceHero__profile { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 20px; padding: 12px 20px; }
main.detailVoicePage .detailVoiceHero__profile p { margin: 0; }
main.detailVoicePage .detailVoiceHero__profile em { margin: 0; }
main.detailVoicePage .voiceHeroLead { margin: 16px 0 10px; color: var(--primary-dark); font-size: .95rem; font-weight: 700; line-height: 1.8; }
main.detailVoicePage .voiceHeroSpec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; font-size: .86rem; }
main.detailVoicePage .voiceHeroSpec > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
main.detailVoicePage .voiceHeroSpec dt { flex: 0 0 6.5em; color: var(--primary-dark); font-weight: 700; }
main.detailVoicePage .voiceHeroSpec dd { margin: 0; }
main.detailVoicePage .detailVoiceHero__figure { max-height: 460px; overflow: hidden; }
main.detailVoicePage .detailVoiceHero__figure img { min-height: 0; height: 100%; max-height: 460px; }
main.detailVoicePage .detailVoiceHero__figure--snap { padding: 24px; }
main.detailVoicePage .detailVoiceHero__figure--snap img { width: auto; height: auto; max-width: 100%; max-height: 380px; }
@media (max-width: 900px) {
    main.detailVoicePage .detailVoiceHero__inner { grid-template-columns: 1fr; }
    main.detailVoicePage .detailVoiceHero__copy { padding: 28px 20px 28px; }
    main.detailVoicePage .voiceHeroSpec { grid-template-columns: 1fr; }
    main.detailVoicePage .detailVoiceHero__figure, main.detailVoicePage .detailVoiceHero__figure img { max-height: 320px; }
}

/* 261005：流れにパンフレットのイラスト／スクールインターンの毎日の段をそろえる */
main .detailFlowConsult--illust { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 28px; align-items: center; }
main .detailFlowConsult--illust > :not(.detailFlowConsult__illust) { grid-column: 1; }
main .detailFlowConsult__illust { grid-column: 2; grid-row: 1 / span 4; width: 100%; height: auto; }
main .workMatch__illust { display: block; width: auto; height: 130px; max-width: 100%; margin: 0 auto 14px; object-fit: contain; }
main .detailCardGrid.schoolDaily > .detailCard { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
main .detailCardGrid.schoolDaily .schoolDaily__voice { align-self: start; }
@media (max-width: 767px) {
    main .detailFlowConsult--illust { grid-template-columns: 1fr; }
    main .detailFlowConsult__illust { grid-column: 1; grid-row: auto; width: 200px; margin: 12px auto 0; }
}

/* 261005：元が小さい写真は引き伸ばさない（参加者の声の本文の写真・安心のサポートの説明会写真） */
main .detailVoiceStory__figure--small { max-width: var(--fig-max, 360px); justify-self: center; align-self: center; margin-left: auto; margin-right: auto; }
main .detailVoiceStory__figure--small img { width: 100%; height: auto; }
main .supportExtra__photo { max-width: 420px; height: auto; }

/* 261005：My Eyes Tokyo 由来の声を全文で（章ごとの見出し・写真・写真の並び） */
main .voiceArticle { padding: 48px max(24px, calc((100vw - var(--content-wide)) / 2)); }
main .voiceArticle--tone { background: var(--bg-light); }
main .voiceArticle--intro { padding-top: 56px; }
main .voiceArticle__heading { margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--accent); color: var(--primary-dark); font-family: var(--font-heading); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.5; }
main .voiceArticle .detailArticleBody__text { margin: 0 0 1.1em; }
main .voiceArticle__lead { margin: 0 0 28px; }
main .voiceArticle__figure { margin: 26px auto; max-width: 640px; }
main .voiceArticle__figure img { display: block; width: 100%; height: auto; }
main .voiceArticle__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 26px 0 6px; }
main .voiceArticle__gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
main .voiceArticle__gallery + .detailVoiceCaption { margin: 0 0 24px; }
main .voiceArticle__closing { margin: 0 0 20px; }
@media (max-width: 640px) { main .voiceArticle { padding-top: 36px; padding-bottom: 36px; } }