.detailPage {
    --detail-paper: #fbfaf5;
    --detail-paper-deep: #f1eadf;
    --detail-ink: #0d244a;
    --detail-rule: #c9d5e3;
    --detail-frame: #9baeca;
    --detail-label-bg: #122850;
    --detail-card-warm: rgb(var(--accent-rgb) / 0.055);
    --detail-space-s: clamp(36px, 5vw, 56px);
    --detail-space-m: clamp(64px, 9vw, 100px);
    --detail-space-l: clamp(100px, 14vw, 160px);
    margin-bottom: 0;
    padding-bottom: var(--detail-space-s);
    background: var(--detail-paper);
}

/* 9-8 見出しフォントの個性：本文と別書体を導入 */
.detailHero__heading,
.detailSubHero__heading,
.detailTitle__heading,
.detailContact__heading,
.detailProgramCard__title,
.detailArticleBody__heading,
.detailArticleBody__subheading {
    font-family: var(--font-heading);
    font-weight: 700;
}

.siteHeader {
    grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.14fr);
    gap: 5px 34px;
    padding: 9px 30px 11px;
    background: rgb(var(--white-rgb) / 0.9);
    border-bottom: 1px solid rgb(var(--primary-dark-rgb) / 0.12);
    backdrop-filter: blur(10px);
}

.siteHeader.isScrolled {
    background: rgb(var(--white-rgb) / 0.97);
}

.headerTop {
    justify-content: flex-start;
    color: rgb(var(--primary-dark-rgb) / 0.78);
    font-size: 0.72rem;
}

.headerTop__text {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.headerTop__text::before {
    display: inline-block;
    width: 22px;
    height: 1px;
    content: "";
    background: var(--accent);
}

.headerActions {
    gap: 8px;
}

.headerTel {
    margin-right: 8px;
    font-size: clamp(1.15rem, 2.1vw, 1.62rem);
    letter-spacing: 0.01em;
}

.headerPill,
.searchButton {
    min-height: 36px;
}

.headerPill:not(.headerPillPrimary) {
    background: transparent;
}

.globalNav {
    gap: min(18px, 1.6vw);
    font-size: 0.84rem;
}

.globalNavItem > a {
    padding-bottom: 7px;
}

.detailHero {
    position: relative;
    padding: 132px max(24px, calc((100vw - var(--content-wide)) / 2)) 0;
    overflow: hidden;
    color: var(--white);
    background: linear-gradient(90deg, rgb(var(--primary-dark-rgb) / 0.76), rgb(var(--primary-dark-rgb) / 0.28)), url("../img/iip-hero-us-rural.png?ver261003") center / cover no-repeat;
}

.detailHero__inner {
    display: grid;
    width: min(var(--content-wide), 100%);
    min-height: clamp(320px, 38vw, 430px);
    align-items: center;
    margin: 0 auto;
}

.detailHero__content {
    width: min(680px, 100%);
    padding: 24px 0 34px;
}

.detailBreadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    color: rgb(var(--white-rgb) / 0.82);
    font-size: 0.82rem;
    font-weight: 700;
}

.detailBreadcrumb a {
    color: var(--white);
}

.detailBreadcrumb--voice {
    color: rgb(var(--primary-dark-rgb) / 0.68);
}

.detailBreadcrumb--voice a {
    color: var(--primary-dark);
}

.detailLabel,
.detailTitle__label,
.detailContact span {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.detailHero__heading {
    margin-top: 6px;
    color: var(--white);
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.18;
}

.detailHero__lead {
    margin-top: 16px;
    color: rgb(var(--white-rgb) / 0.92);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    font-weight: 700;
    line-height: 1.85;
}

.detailHero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}

.detailHero__link {
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 900;
}

.detailHero .detailLabel {
    color: var(--accent-soft);
}

.detailSummary {
    width: min(var(--content-wide), 100%);
    margin: 0 auto;
    color: var(--white);
    background: var(--primary-dark);
}

.detailSummary dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detailSummary div {
    padding: 18px 20px;
    border-left: 1px solid rgb(var(--white-rgb) / 0.16);
}

.detailSummary div:first-child {
    border-left: 0;
}

.detailSummary dt {
    color: var(--accent-soft);
    font-size: 0.78rem;
    font-weight: 900;
}

.detailSummary dd {
    margin-top: 4px;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.45;
}

.detailAnchor {
    position: sticky;
    top: 112px;
    z-index: 40;
    display: flex;
    gap: 1px;
    justify-content: center;
    padding: 0 max(24px, calc((100vw - var(--content-wide)) / 2));
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.detailAnchor a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    color: var(--primary-dark);
    font-size: 0.9rem;
    font-weight: 900;
}

.detailSection {
    position: relative;
    padding: var(--detail-space-m) max(24px, calc((100vw - var(--content-wide)) / 2)) var(--detail-space-s);
    overflow: hidden;
}

.detailBand {
    position: relative;
    padding: var(--detail-space-l) max(24px, calc((100vw - var(--content-wide)) / 2)) var(--detail-space-m);
    overflow: hidden;
}

.detailSupport {
    padding: var(--detail-space-m) max(24px, calc((100vw - var(--content-wide)) / 2));
}

.detailContact {
    padding: 34px 28px;
}

.detailTitle {
    position: relative;
    display: grid;
    width: 100%;
    margin-bottom: 28px;
    padding-bottom: 16px;
    text-align: left;
}

.detailTitle::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(280px, 55%);
    height: 3px;
    content: "";
    background: var(--detail-label-bg);
}

/* 9-10 背景とテキストの掛け合わせ：見出しの背後に透かし英字 */
.detailTitle[data-en]::before {
    position: absolute;
    top: -0.5em;
    left: -0.05em;
    max-width: 100%;
    overflow: hidden;
    content: attr(data-en);
    color: var(--primary);
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 8vw, 5.5rem);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.09;
    pointer-events: none;
}

.detailTitle__label,
.detailTitle__heading {
    position: relative;
    z-index: 1;
}

.detailTitle__label {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    gap: 10px;
    align-items: center;
    padding: 0 12px;
    color: var(--white);
    background: var(--detail-label-bg);
}

.detailTitle__label::after {
    display: inline-block;
    width: 30px;
    height: 1px;
    content: "";
    background: currentColor;
    opacity: 0.52;
}

.detailTitle__heading,
.detailContact__heading {
    margin-top: 6px;
    color: var(--primary-dark);
    font-size: clamp(1.8rem, 3.6vw, 2.85rem);
    line-height: 1.25;
    letter-spacing: 0.05em;
}

.detailBand {
    background: var(--bg-light);
}

.detailPointGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.detailPointGrid article {
    padding: 22px;
    background: var(--white);
    border-left: 5px solid var(--primary);
}

.detailPointGrid span {
    color: var(--accent);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
}

.detailPointGrid__title {
    margin-top: 10px;
    color: var(--primary-dark);
    font-size: 1.15rem;
    line-height: 1.45;
}

.detailPointGrid__text {
    margin-top: 8px;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.75;
}

.detailTimeline {
    display: grid;
    gap: 8px;
}

.detailTimeline div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    padding: 14px 18px;
    background: var(--bg-light);
    border-left: 4px solid var(--primary);
}

.detailTimeline dt {
    color: var(--primary);
    font-weight: 900;
}

.detailTimeline dd {
    color: var(--text);
    font-weight: 500;
}

.detailNote {
    margin-top: 12px;
    color: var(--text-sub);
    font-size: 0.88rem;
}

.detailSupport {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
    align-items: center;
}

.detailTextLink {
    display: inline-flex;
    margin-top: 14px;
    color: var(--accent);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.detailTextLink:hover {
    text-decoration: none;
}

.detailContact {
    position: relative;
    width: min(var(--content-wide), calc(100% - 48px));
    padding: clamp(34px, 5vw, 54px) clamp(28px, 4vw, 48px);
    margin: 44px auto var(--detail-space-m, 64px);
    overflow: hidden;
    color: var(--detail-ink);
    text-align: left;
    background:
        linear-gradient(90deg, rgb(var(--paper-rgb) / 0.97) 0%, rgb(var(--paper-rgb) / 0.9) 52%, rgb(var(--paper-rgb) / 0.58) 100%),
        url("../img/contact-request-banner.png") right center / cover no-repeat,
        var(--detail-paper);
    border: 1px solid var(--detail-rule);
}

/* シグネチャー要素：エアメール風ストライプ（国際研修センターらしさ） */
.detailContact::before,
.detailContact::after {
    position: absolute;
    right: 0;
    left: 0;
    height: 8px;
    content: "";
    background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, var(--detail-paper) 10px 20px, var(--primary-dark) 20px 30px, var(--detail-paper) 30px 40px);
}

.detailContact::before {
    top: 0;
}

.detailContact::after {
    bottom: 0;
}

.detailContact > span {
    display: block;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.detailContact__heading {
    margin-top: 10px;
}

.detailContact__text {
    max-width: 560px;
    margin-top: 12px;
    color: var(--text-sub);
    line-height: 1.8;
}

.detailContact__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 20px;
}

.detailContact__buttons a {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    font-weight: 900;
    border-radius: 0;
}

.detailContact__buttons a:first-child {
    color: var(--white);
    background: var(--primary-dark);
    border: 1.5px solid var(--primary-dark);
}

.detailContact__buttons a + a {
    color: var(--primary-dark);
    background: transparent;
    border: 1.5px solid var(--primary-dark);
}

.detailContact > span,
.detailContact__heading,
.detailContact__text,
.detailContact__buttons {
    position: relative;
    z-index: 1;
}

.detailSubHero {
    position: relative;
    padding: 118px max(24px, calc((100vw - var(--content-wide)) / 2)) 68px;
    margin-bottom: -34px;
    color: var(--white);
    background: linear-gradient(90deg, rgb(var(--primary-dark-rgb) / 0.82), rgb(var(--primary-dark-rgb) / 0.28)), var(--page-hero, url("../img/iip-hero-us-rural.png?ver261003")) center / cover no-repeat;
}

.detailSubHero + * {
    position: relative;
    z-index: 1;
}

.detailSubHero__inner {
    display: grid;
    width: min(var(--content-wide), 100%);
    min-height: 178px;
    align-items: end;
    margin: 0 auto;
}

.detailSubHero__content {
    width: min(760px, 100%);
    padding: 16px 0 0 22px;
    border-top: 5px solid var(--accent);
    border-left: 1px solid rgb(var(--white-rgb) / 0.48);
}

.detailSubHero__heading {
    margin-top: 8px;
    color: var(--white);
    font-size: 3.2rem;
    line-height: 1.15;
    letter-spacing: 0.06em;
}

.detailSubHero__lead {
    width: min(680px, 100%);
    margin-top: 12px;
    color: rgb(var(--white-rgb) / 0.92);
    font-weight: 700;
    line-height: 1.75;
}

.detailSubHero .detailLabel {
    color: var(--accent-soft);
}

.detailDestinationPage {
    background: #fff;
}

.detailSubHero--destination {
    min-height: clamp(300px, 32vw, 420px);
    padding-top: 112px;
    padding-bottom: 24px;
    margin-bottom: 0;
    background:
        linear-gradient(90deg, rgb(var(--paper-rgb) / 0.96), rgb(var(--paper-rgb) / 0.72) 50%, rgb(var(--paper-rgb) / 0.1) 78%, rgb(var(--paper-rgb) / 0)),
        var(--destination-hero, none) var(--destination-hero-pos, right top) / var(--destination-hero-size, auto 130%) no-repeat;
    color: var(--detail-ink);
}

.detailSubHero--destination .detailSubHero__inner {
    min-height: clamp(160px, 20vw, 250px);
    align-items: center;
}

.detailSubHero--destination .detailSubHero__content {
    width: min(700px, 100%);
    padding: 22px 0 22px 26px;
    border-top: 0;
    border-left: 6px solid var(--accent);
}

@media screen and (max-width: 1180px) {
    .detailSubHero--destination {
        background-position: left top, var(--destination-hero-pos-tablet, 62% top);
        background-size: auto, var(--destination-hero-size-tablet, auto 126%);
    }

    .detailSubHero--destination .detailSubHero__content {
        padding-top: 40px;
    }
}

.detailSubHero--destination .detailBreadcrumb,
.detailSubHero--destination .detailBreadcrumb a,
.detailSubHero--destination .detailSubHero__heading,
.detailSubHero--destination .detailSubHero__lead {
    color: var(--detail-ink);
}

.detailSubHero--destination .detailLabel {
    color: var(--accent);
}

.detailSubHero--destination .detailSubHero__heading {
    font-size: 2.6rem;
}

.detailDestinationIntro {
    padding: clamp(48px, 7vw, 76px) max(24px, calc((100vw - var(--content-wide)) / 2)) clamp(34px, 5vw, 56px);
    background: #fff;
}

.detailDestinationIntro__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.detailDestinationIntro__copy {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.detailDestinationIntro__ruby {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.detailDestinationIntro__ruby::after {
    display: inline-block;
    width: 48px;
    height: 1px;
    margin-left: 12px;
    content: "";
    background: var(--accent);
}

.detailDestinationIntro__heading {
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.15rem, 4.4vw, 3.45rem);
    line-height: 1.25;
    letter-spacing: 0.05em;
}

.detailDestinationIntro__lead {
    width: min(720px, 100%);
    color: var(--text);
    font-weight: 600;
    line-height: 2;
}

.detailDestinationIntro__photo {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--detail-rule);
    border-radius: 8px;
}

.detailDestinationIntro__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.detailProgramMiniTable--destination {
    grid-column: 1 / -1;
    margin-top: 6px;
}

.detailDestinationTypes {
    padding: 26px max(24px, calc((100vw - var(--content-wide)) / 2)) clamp(54px, 8vw, 86px);
    background: #fff;
}

.detailDestinationTypes__box {
    padding: clamp(28px, 4vw, 42px);
    background: #f5f7fa;
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.08);
    border-radius: 10px;
}

.detailDestinationTypes__heading {
    color: var(--primary-dark);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 900;
    line-height: 1.55;
    text-align: center;
}

.detailDestinationTypes__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.detailDestinationType {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 12px 14px;
    color: var(--primary-dark);
    text-decoration: none;
    background: #fff;
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.1);
}

.detailDestinationType::after {
    content: "→";
    color: var(--accent);
    font-weight: 900;
}

.detailDestinationType img {
    display: block;
    width: 58px;
    aspect-ratio: 1;
    object-fit: contain;
}

.detailDestinationType span {
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.45;
}

.detailDestinationCities {
    padding: clamp(44px, 7vw, 76px) max(24px, calc((100vw - var(--content-wide)) / 2));
    background:
        linear-gradient(180deg, rgb(var(--panel-rgb) / 0.9), rgb(var(--white-rgb) / 0.95)),
        var(--destination-area, none) center / cover no-repeat;
}

.detailDestinationSectionHead {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin-bottom: 24px;
    text-align: center;
}

.detailDestinationSectionHead span {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.detailDestinationSectionHead h2 {
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.6vw, 2.65rem);
    line-height: 1.3;
}

.detailDestinationCities__note {
    width: min(920px, 100%);
    margin: 0 auto 20px;
    color: var(--text-sub);
    font-size: 0.9rem;
    line-height: 1.85;
    text-align: center;
}

.detailDestinationCityList {
    display: grid;
    gap: 12px;
    width: min(920px, 100%);
    margin: 0 auto;
}

.detailDestinationCityItem {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 0 24px;
    color: var(--primary-dark);
    background: rgb(var(--white-rgb) / 0.95);
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.12);
    border-radius: 8px;
}

.detailDestinationCityItem strong {
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.detailDestinationCityItem small {
    margin-left: 8px;
    color: var(--text-sub);
    font-size: 0.75rem;
    letter-spacing: 0;
}

.detailDestinationCityItem__note {
    flex-shrink: 0;
    color: var(--text-sub);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.detailBand--destination {
    padding-top: clamp(58px, 8vw, 88px);
    padding-bottom: clamp(46px, 7vw, 72px);
    background: #f4f7fb;
}

.detailList--countryFocus {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.detailList--countryFocus .detailListCard--countryFocus {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    overflow: visible;
    padding: 0;
    border-radius: 0;
}

.detailList--countryFocus .detailListCard__visual {
    position: relative;
    justify-items: start;
}

.detailList--countryFocus .detailMiniLabel {
    position: absolute;
    top: -10px;
    left: 14px;
    z-index: 1;
    padding: 9px 14px;
    color: #fff;
    background: var(--accent);
    line-height: 1;
}

.detailList--countryFocus .detailListCard__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
}

.detailList--countryFocus .detailListCard--countryFocus > div:not(.detailListCard__visual) {
    padding: 30px 28px 32px;
}

.detailList--countryProgram {
    gap: 18px;
}

.detailList--countryProgram .detailListCard--countryProgram {
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.detailList--countryProgram .detailListCard__visual {
    height: 100%;
    padding: 24px 20px;
    background: #eef3f8;
}

.detailList--countryProgram .detailListCard__illustration {
    width: min(118px, 100%);
}

.detailList--countryProgram .detailListCard--countryProgram > div:not(.detailListCard__visual) {
    padding: 24px 6px 24px 0;
}

.detailList--countryProgram .detailListCard__thumbnail {
    height: 100%;
    min-height: 210px;
}

.detailInner {
    position: relative;
    z-index: 1;
    width: min(var(--content-wide), 100%);
    margin: 0 auto;
}

.detailLeadGrid,
.detailSplit {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}

.detailLeadCard {
    padding: 34px 36px 38px;
    background:
        linear-gradient(135deg, transparent 0 68%, var(--detail-card-warm) 68% 100%),
        var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailLeadCard__label,
.detailMiniLabel {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 900;
}

.detailLeadCard__title,
.detailCard__title,
.detailListCard__title,
.detailFaqItem__title {
    margin-top: 12px;
    color: var(--primary-dark);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.5;
}

.detailLeadCard__text,
.detailCard__text,
.detailListCard__text,
.detailFaqItem__text,
.detailBodyText {
    margin-top: 18px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.85;
}

.detailPhoto__image,
.detailSplit__image,
.detailArticleHero__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.detailCardGrid,
.detailProgramGrid,
.detailMetricGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 18px;
}

.detailCard,
.detailListCard,
.detailFaqItem {
    background:
        linear-gradient(135deg, transparent 0 68%, var(--detail-card-warm) 68% 100%),
        var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailCard,
.detailListCard,
.detailFaqItem {
    padding: 38px 36px 40px;
}

.detailCard__number,
.detailMetric__number {
    display: block;
    color: var(--accent);
    font-size: clamp(2.15rem, 4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

.detailProgramGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detailProgramCard {
    position: relative;
    display: grid;
    background: var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
    overflow: hidden;
}

.detailProgramCard__fullLink {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: block;
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
}

.detailProgramCard__fullLink:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.detailProgramCard__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.detailProgramCard__body {
    display: grid;
    align-content: start;
    padding: 22px 24px 26px;
    background:
        linear-gradient(135deg, transparent 0 72%, var(--detail-card-warm) 72% 100%),
        var(--white);
    border-top: 1px solid var(--detail-rule);
}

.detailProgramCard__country {
    display: inline-flex;
    width: fit-content;
    min-height: 26px;
    align-items: center;
    padding: 0 10px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 900;
    background: #fff2e7;
    border-left: 4px solid var(--accent);
}

.detailProgramCard__title {
    margin-top: 10px;
    color: var(--primary-dark);
    font-size: 1.2rem;
    line-height: 1.45;
}

.detailProgramCard__text {
    margin-top: 8px;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.7;
}

.detailProgramCard__spec {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.detailProgramCard__specRow {
    display: grid;
    grid-template-columns: 4.5em minmax(0, 1fr);
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--detail-rule);
}

.detailProgramCard__spec dt {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 900;
}

.detailProgramCard__spec dd {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.65;
}

.detailProgramCard__link {
    display: inline-flex;
    margin-top: 12px;
    color: var(--primary);
    font-weight: 900;
}

.detailFlowLead {
    max-width: 840px;
    margin: 0 0 24px;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.9;
}

.detailFlowSplit {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: stretch;
}

.detailFlowSplit__photo {
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailFlowSplit__photo img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

.detailFlowList {
    display: grid;
    gap: 12px;
}

.detailFlowList__item {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px 18px;
    padding: 24px 26px;
    background:
        linear-gradient(135deg, transparent 0 72%, var(--detail-card-warm) 72% 100%),
        var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailFlowList__number {
    grid-row: span 2;
    color: var(--accent);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
}

.detailFlowList__title {
    color: var(--primary-dark);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.5;
}

.detailFlowList__text {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.75;
}

.detailGrantBox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    gap: 20px;
    align-items: stretch;
}

.detailGrantBox__main {
    position: relative;
    padding: 38px 36px 40px;
    background:
        linear-gradient(135deg, transparent 0 66%, var(--detail-card-warm) 66% 100%),
        var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailGrantBox__side {
    display: grid;
    align-content: center;
    padding: 26px;
    color: var(--white);
    background:
        linear-gradient(135deg, rgb(var(--white-rgb) / 0.08) 0 24%, transparent 24% 100%),
        var(--primary-dark);
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.55);
}

.detailGrantBox__sideTitle {
    color: var(--white);
    font-size: 1.25rem;
    line-height: 1.45;
}

.detailGrantBox__sideText {
    margin-top: 10px;
    line-height: 1.8;
}

.detailList {
    display: grid;
    gap: 12px;
}

.detailListCard {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.detailListCard[href] {
    color: inherit;
    text-decoration: none;
}

.detailListCard[href]:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
}

.detailListCard__visual {
    display: grid;
    gap: 12px;
    align-content: start;
}

.detailListCard__illustration {
    display: block;
    width: min(140px, 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.detailListCard--countryFocus {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
}

.detailListCard--countryProgram {
    grid-template-columns: 150px minmax(0, 1fr) minmax(190px, 240px);
    align-items: center;
}

.detailListCard__thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.detailMetric {
    display: grid;
    align-content: start;
    padding: 34px 32px 36px;
    text-align: center;
    background:
        linear-gradient(135deg, transparent 0 70%, var(--detail-card-warm) 70% 100%),
        var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailMetricGrid--illustrated {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.detailMetricGrid--illustrated .detailMetric {
    min-height: 310px;
    padding: 28px 26px 30px;
}

.detailMetric__figure {
    width: min(150px, 62%);
    margin: 0 auto 18px;
}

.detailMetric__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.detailMetric__text {
    margin-top: 8px;
    color: var(--primary-dark);
    font-weight: 900;
}

.detailMetricSlider {
    overflow: hidden;
}

.detailMetricGrid--slider {
    display: flex;
    width: max-content;
    gap: 18px;
    will-change: transform;
}

.detailMetricGrid--slider .detailMetric {
    flex: 0 0 340px;
}

.detailMetricGrid--slider.isAutoMoving {
    transition: transform 0.7s ease;
}

.detailFaqList {
    display: grid;
    gap: 12px;
}

.detailFaqItem {
    position: relative;
    padding-left: 46px;
    border-left: 1px solid var(--detail-rule);
}

/* 9-9 枠の作り込み：Q番号バッジを左罫線に食い込ませる */
.detailFaqItem__mark {
    position: absolute;
    top: 18px;
    left: -22px;
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--white);
    font-weight: 900;
    background: var(--primary);
    border-radius: 50%;
}

.detailContactGrid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
}

.detailContactPanel,
.detailFormMock {
    padding: 34px 36px 38px;
    background:
        linear-gradient(135deg, transparent 0 68%, var(--detail-card-warm) 68% 100%),
        var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailContactData {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.detailContactData div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.detailContactData dt {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 900;
}

.detailContactData dd {
    color: var(--primary-dark);
    font-weight: 800;
    line-height: 1.6;
}

.detailFormMock {
    display: grid;
    gap: 12px;
}

.detailFormMock__field {
    display: grid;
    gap: 6px;
}

.detailFormMock__label {
    color: var(--primary-dark);
    font-size: 0.84rem;
    font-weight: 900;
}

.detailFormMock__box {
    min-height: 44px;
    background: var(--bg-light);
    border: 1px solid var(--border);
}

.detailFormMock__box--textarea {
    min-height: 116px;
}

.detailArticleHero {
    display: grid;
    gap: 18px;
}

.detailArticleMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    color: var(--text-sub);
    font-size: 0.88rem;
    font-weight: 800;
}

.detailArticleMeta span {
    padding: 4px 10px;
    color: var(--white);
    background: var(--primary);
    border-radius: 0;
}

.detailArticleBody {
    display: grid;
    gap: 20px;
}

.detailArticleBody__heading {
    color: var(--primary-dark);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.35;
}

.detailArticleBody__text {
    color: var(--text);
    font-weight: 500;
    line-height: 1.9;
}

.detailArchiveHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: end;
    margin-bottom: 24px;
}

.detailArchiveHead__text {
    max-width: 760px;
}

.detailArchiveTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.detailArchiveTab {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 900;
    background: var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 0;
}

.detailArchiveTab--current {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
}

.detailArchiveGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.detailArchiveCard {
    position: relative;
    display: grid;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

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

.detailArchiveCard--wide {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    border-color: rgb(var(--accent-rgb) / 0.45);
    border-bottom-color: var(--accent);
}

.detailArchiveCard__image {
    display: block;
    overflow: hidden;
    background: var(--bg-light);
}

.detailArchiveCard__thumbnail {
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
}

.detailArchiveCard__body {
    position: relative;
    display: grid;
    align-content: start;
    padding: 24px 24px 28px;
    background:
        linear-gradient(135deg, transparent 0 72%, var(--detail-card-warm) 72% 100%),
        var(--white);
}

.detailArchiveCard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--text-sub);
    font-size: 0.78rem;
    font-weight: 800;
}

.detailArchiveCard__category {
    padding: 3px 10px;
    color: var(--primary-dark);
    background: var(--accent-soft);
    border-radius: 0;
}

.detailArchiveCard__country {
    color: var(--accent);
}

.detailArchiveCard__title {
    margin-top: 12px;
    color: var(--primary-dark);
    font-size: 1.16rem;
    line-height: 1.45;
}

.detailArchiveCard__text {
    margin-top: 10px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.75;
}

.detailArchiveCard__link {
    display: inline-flex;
    margin-top: 14px;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 900;
}

.detailArticleLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: start;
}

.detailArticleMain {
    display: grid;
    gap: 24px;
}

.detailArticleMain--voice {
    display: block;
}

.detailArticleSidebar {
    display: grid;
    gap: 16px;
}

.detailArticleSide {
    display: grid;
    gap: 12px;
    align-content: start;
}

.detailSideButton {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 4px;
}

.detailSideButton--plain {
    color: var(--primary);
    background: var(--white);
}

.detailSideBox {
    padding: 18px;
    background:
        linear-gradient(180deg, rgb(var(--primary-dark-rgb) / 0.04), transparent 58px),
        var(--bg-light);
    border: 1px solid var(--detail-frame);
    border-left: 5px solid var(--primary);
}

.detailSideBox__title {
    color: var(--primary-dark);
    font-size: 1rem;
    line-height: 1.45;
}

.detailSideBox ul {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.detailSideBox__link {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
}

.detailArticleLead {
    padding: 20px 22px;
    color: var(--primary-dark);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.9;
    background:
        linear-gradient(90deg, rgb(var(--primary-dark-rgb) / 0.04) 1px, transparent 1px),
        var(--bg-light);
    background-size: 24px 100%;
    border-left: 5px solid var(--accent);
    outline: 1px solid var(--detail-rule);
    outline-offset: -7px;
}

.detailArticleBody__subheading {
    color: var(--primary-dark);
    font-size: 1.24rem;
    line-height: 1.45;
}

.detailArticleQuote {
    padding: 22px;
    color: var(--primary-dark);
    font-weight: 800;
    line-height: 1.85;
    background:
        linear-gradient(135deg, rgb(var(--accent-rgb) / 0.08), transparent 44%),
        var(--bg-light);
    border-left: 5px solid var(--primary);
    outline: 1px solid var(--detail-rule);
    outline-offset: -7px;
}

.detailArticlePager {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.detailArticlePager a {
    color: var(--primary);
    font-weight: 900;
}


@media screen and (max-width: 1180px) {
    .siteHeader {
        grid-template-columns: auto auto;
        gap: 6px 18px;
        padding: 7px 18px 10px;
    }

    .headerTel {
        margin-right: 0;
    }

    .globalNav {
        gap: 0;
        font-size: 0.9rem;
    }

    .detailAnchor {
        top: 74px;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .detailAnchor a {
        white-space: nowrap;
    }
}

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

    .detailSupport,
    .detailLeadGrid,
    .detailSplit,
    .detailGrantBox,
    .detailContactGrid {
        grid-template-columns: 1fr;
    }

    .detailSummary dl,
    .detailPointGrid,
    .detailCardGrid,
    .detailProgramGrid,
    .detailMetricGrid,
    .detailArchiveGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detailFlowSplit {
        grid-template-columns: 1fr;
    }

    .detailFlowSplit__photo img {
        min-height: 300px;
    }

    .detailArchiveCard--wide,
    .detailArticleLayout {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 640px) {
    .detailArchiveHead {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .detailArchiveHead__text {
        max-width: none;
    }

    .detailArchiveTabs {
        justify-content: flex-start;
    }

    .detailMetricGrid--illustrated {
        grid-template-columns: 1fr;
    }

    .detailMetricGrid--illustrated .detailMetric {
        min-height: 0;
        padding: 26px 22px 28px;
    }

    .detailMetric__figure {
        width: min(132px, 54%);
    }

    .detailHero {
        padding: 104px 16px 0;
        background-position: 58% center;
    }

    .detailSubHero {
        padding: 104px 16px 34px;
        margin-bottom: 0;
        background-position: 58% center;
    }

    .detailVoiceHero {
        padding-top: 104px;
    }

    .detailSubHero__content {
        width: min(760px, 100%);
        padding: 16px 0 0 22px;
        border-top: 5px solid var(--accent);
        border-left: 1px solid rgb(var(--white-rgb) / 0.48);
    }

    .detailSubHero__heading {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }

    .detailSection,
    .detailBand,
    .detailSupport {
        padding-right: 16px;
        padding-left: 16px;
    }

    .detailContact {
        width: calc(100% - 32px);
        padding: 34px 22px;
        text-align: left;
        background:
            linear-gradient(180deg, rgb(var(--paper-rgb) / 0.98) 0%, rgb(var(--paper-rgb) / 0.9) 68%, rgb(var(--paper-rgb) / 0.72) 100%),
            url("../img/contact-request-banner.png") right bottom / 145% auto no-repeat,
            var(--detail-paper);
    }

    .detailFlowList__item {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 22px 20px;
    }

    .detailFlowList__number {
        font-size: 1.45rem;
    }

    .detailProgramCard__specRow {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .detailMetricGrid--slider .detailMetric {
        flex-basis: 280px;
    }

    .detailTitle[data-en]::before {
        font-size: clamp(1.8rem, 13vw, 2.8rem);
    }

    .detailLeadCard {
        padding: 28px 24px 30px;
    }

}

/* ---- internal data pages ---- */
.detailArchiveCard__kicker,
.detailProgramNote {
    margin: 0;
    color: var(--text-sub);
    line-height: 1.8;
}

.detailArchiveCard__kicker {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--accent);
}

.detailProgramNote {
    width: min(880px, 100%);
    margin: 2rem auto 0;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    font-weight: 700;
}

dl.detailVoiceSpec {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

dl.detailVoiceSpec > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    border-top: 1px solid var(--border);
}

dl.detailVoiceSpec > div:first-child {
    border-top: none;
}

dl.detailVoiceSpec dt {
    padding: 0.9rem 1.25rem;
    background: var(--bg-light);
    color: var(--primary);
    font-weight: 700;
}

dl.detailVoiceSpec dd {
    margin: 0;
    padding: 0.9rem 1.25rem;
    color: var(--text-sub);
}

.detailArticleMain--voice .detailArticleHero--voice {
    width: 100%;
    margin: 0 0 20px;
}

table.detailVoiceSpec {
    width: 100%;
    margin: 0 0 24px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
}

.detailVoiceSpec__label,
.detailVoiceSpec__value {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--border);
    vertical-align: top;
}

.detailVoiceSpec__label {
    width: 8rem;
    color: var(--primary);
    font-weight: 700;
    text-align: left;
    background: var(--bg-light);
}

.detailVoiceSpec__value {
    color: var(--text-sub);
    font-weight: 500;
}

.detailVoiceSpec__label--first,
.detailVoiceSpec__value--first {
    border-top: 0;
}

.detailArticleMain--voice .detailArticleBody {
    width: 100%;
}

.detailVoiceQuote {
    max-width: 720px;
    margin: 2.5rem auto;
    font-weight: 700;
    /*
    padding: 1.5rem 2rem;
    background: var(--bg-light);
    border-left: 4px solid var(--accent);
    color: var(--primary);
    line-height: 2;
    text-align: left;
    */
    max-width: 500px;
    position: relative;
    padding: 3em 2.5em 2em 3.5em;
    color: #000042;
}

.detailVoiceQuote::before {
    display: inline-block;
    position: absolute;
    top: 1em;
    left: 1.5em;
    width: 2em;
    height: 2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%23f98946'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

.detailVoiceQuote p {
    margin-top: 0;
}

.detailVoiceQuote p:last-of-type {
   margin-bottom: 0;
}


.detailArticleMain--voice .detailVoiceQuote {
    max-width: none;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.detailVoiceProfile {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
}

.detailVoiceProfile__photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgb(var(--primary-dark-rgb) / 0.18);
}

.detailVoiceProfile__text b {
    display: block;
    color: var(--primary-dark);
    font-family: var(--font-heading, inherit);
    font-size: 1.24rem;
}

.detailVoiceProfile__text span {
    color: var(--text-sub);
    font-size: 0.88rem;
}

.detailVoiceLead {
    color: var(--primary-dark);
    font-size: 1.05rem;
    font-weight: 700;
}

.detailVoicePhoto {
    margin: 24px 0;
}

.detailVoicePhoto--small {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.detailVoicePhoto__image {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

.detailVoiceSource {
    margin-top: 28px;
    padding-top: 14px;
    color: var(--text-sub);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
}

.detailVoiceSource a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.detailArchiveCard__tag {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 3px 10px;
    margin-top: 14px;
    color: var(--white);
    font-size: 0.76rem;
    font-weight: 800;
    background: var(--primary);
}

@media screen and (min-width: 901px) {
    .detailArticleLayout--voice {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .detailArticleLayout--voice .detailArticleMain--voice {
        display: contents;
    }

    .detailArticleLayout--voice .detailArticleHero--voice {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .detailArticleLayout--voice .detailArticleSide {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .detailArticleLayout--voice .detailVoiceProfile {
        grid-column: 1;
        grid-row: 1;
    }

    .detailArticleLayout--voice table.detailVoiceSpec {
        grid-column: 1;
        grid-row: 2;
        margin: 16px 0 0;
    }

    .detailArticleLayout--voice .detailArticleBody {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 26px;
    }
}

.detailRelatedVoiceGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    justify-content: center;
}

@media (max-width: 640px) {
    .detailRelatedVoiceGrid {
        grid-template-columns: 1fr;
    }
}

.detailCourseList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.detailCourseCard {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px 18px;
    padding: 30px 28px;
    background:
        linear-gradient(135deg, transparent 0 70%, var(--detail-card-warm) 70% 100%),
        var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailCourseCard__mark {
    grid-row: span 2;
    color: var(--accent);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
}

.detailCourseCard__title {
    color: var(--primary-dark);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.45;
}

.detailCourseCard__text {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.8;
}

.detailActivityGrid,
.detailUsefulBannerGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.detailActivityCard {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--detail-rule);
    border-radius: 6px;
}

.detailActivityCard__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.detailActivityCard__body {
    display: grid;
    gap: 8px;
    padding: 20px 22px 22px;
    background:
        linear-gradient(135deg, transparent 0 72%, var(--detail-card-warm) 72% 100%),
        var(--white);
    border-top: 1px solid var(--detail-rule);
}

.detailActivityCard__body span {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;
}

.detailActivityCard__body strong {
    color: var(--primary-dark);
    font-size: 1.05rem;
    line-height: 1.5;
}

.detailActivityCard__body p {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.75;
}

.detailUsefulBanner {
    position: relative;
    display: grid;
    min-height: 210px;
    align-content: end;
    gap: 8px;
    padding: 28px 26px 24px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    border: 1px solid var(--detail-rule);
    border-left: 5px solid var(--accent);
    border-radius: 6px;
}

.detailUsefulBanner::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.12), rgb(var(--ink-rgb) / 0.84));
}

.detailUsefulBanner--education {
    background-image: url("../img/met-training-denmark-03.png");
}

.detailUsefulBanner--useful {
  background-image: url("../img/met-training-report-speaker.jpg");
}

.detailUsefulBanner--column {
    background-image: url("../img/met-training-report-session.jpg");
}

.detailUsefulBanner__label,
.detailUsefulBanner__title,
.detailUsefulBanner__note {
    position: relative;
    z-index: 1;
}

.detailUsefulBanner__label {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
}

.detailUsefulBanner__title {
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.5;
}

.detailUsefulBanner__note {
    color: rgb(var(--white-rgb) / 0.78);
    font-size: 0.78rem;
    font-weight: 700;
}

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

@media screen and (max-width: 640px) {
    .detailCourseList,
    .detailActivityGrid,
    .detailUsefulBannerGrid {
        grid-template-columns: 1fr;
    }

    .detailCourseCard {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 24px 22px;
    }

    .detailCourseCard__mark {
        font-size: 1.8rem;
    }
}

.detailRelatedVoiceCard {
    min-height: 100%;
}

.detailRelatedVoiceCard .detailArchiveCard__thumbnail {
    min-height: 130px;
}

.detailRelatedVoiceCard .detailArchiveCard__body {
    padding: 18px 18px 20px;
}

.detailRelatedVoiceCard .detailArchiveCard__title {
    font-size: 0.98rem;
}

.detailRelatedVoiceCard .detailArchiveCard__link {
    font-size: 0.84rem;
}

@media screen and (max-width: 600px) {
    dl.detailVoiceSpec > div {
        grid-template-columns: 1fr;
    }

    .detailArticleMain--voice .detailArticleHero--voice {
        width: 100%;
        margin: 0 0 20px;
    }

    table.detailVoiceSpec {
        width: 100%;
        margin-bottom: 24px;
    }

    .detailVoiceSpec__label,
    .detailVoiceSpec__value {
        display: block;
        width: 100%;
    }

    .detailVoiceQuote {
        padding: 1.25rem 1.35rem;
    }
}

/* 2026-07-14 program and FAQ refinement */
.detailProgramGrid--deep {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detailProgramCard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.detailProgramCard__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.18);
    background: #f3f6fa;
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 800;
}

.detailProgramSpec {
    margin-top: 22px;
}

.detailProgramSource,
.detailRequirementNote {
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.9rem;
}

.detailRequirementBox {
    border-left: 6px solid var(--orange);
    background: #f6f8fb;
    padding: 26px 30px;
}

.detailRequirementList {
    display: grid;
    gap: 10px;
    padding-left: 1.2em;
}

.detailProgramQuote {
    border-left: 6px solid var(--navy);
    background: #fff;
    padding: 28px 34px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.9;
}

.detailProgramQuote cite {
    display: block;
    margin-top: 14px;
    color: var(--muted);
    font-family: var(--font-jp);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 800;
}

.detailFinlandLead {
    max-width: 860px;
    line-height: 2;
}

.detailFinlandPoints {
    display: grid;
    max-width: 860px;
    gap: 12px;
    padding-left: 0;
    margin: 24px 0 32px;
    list-style: none;
}

.detailFinlandPoints li {
    position: relative;
    padding-left: 26px;
    font-weight: 700;
    line-height: 1.8;
}

.detailFinlandPoints li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 14px;
    height: 3px;
    content: "";
    background: var(--accent);
}

.detailMiniFlow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.detailMiniFlow article {
    border-top: 4px solid var(--navy);
    background: #fff;
    padding: 24px;
}

.detailMiniFlow span {
    color: var(--orange);
    font-size: 1.6rem;
    font-weight: 900;
}

.detailMiniFlow h3 {
    margin-top: 8px;
    color: var(--navy);
    font-size: 1.15rem;
}

.detailMiniFlow p {
    margin-top: 8px;
    color: var(--text);
}

.detailCenterButton {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.detailProgramMiniTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.detailProgramMiniTable th,
.detailProgramMiniTable td {
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.16);
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.detailProgramMiniTable th {
    background: var(--navy);
    color: #fff;
}

.detailProgramMiniTable--striped th {
    width: 32%;
    background: #f7f9fc;
    color: var(--navy);
    font-weight: 800;
}

.detailProgramMiniTable--striped td {
    background: #f7f9fc;
}

.detailProgramMiniTable--striped .detailProgramMiniTable__row--shade th,
.detailProgramMiniTable--striped .detailProgramMiniTable__row--shade td {
    background: #eaf0f6;
}

.detailCountryList {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.detailCountryList__group {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 18px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.16);
    border-left: 4px solid var(--orange);
}

.detailCountryList__heading {
    margin: 0;
    color: var(--navy);
    font-size: 1rem;
    line-height: 1.6;
}

.detailCountryList__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.8;
}

.detailCountryList__items a {
    color: var(--orange);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.detailFlowConsult,
.detailFlowExam {
    margin-bottom: 28px;
    border-left: 6px solid var(--orange);
    background: #fff;
    padding: 26px 30px;
}

.detailFlowConsult__label {
    color: var(--orange);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detailFlowConsult__title,
.detailFlowExam__title {
    margin-top: 6px;
    color: var(--navy);
    font-size: 1.35rem;
}

.detailFlowConsult__text,
.detailFlowConsult__tel,
.detailFlowExam p {
    margin-top: 10px;
}

.detailFlowConsult__tel {
    color: var(--navy);
    font-weight: 900;
}

.detailPage--flow .detailApplyFlow .detailTextLink,
.detailPage--flow .detailFlowExam .detailTextLink,
.detailPage--flow .detailLeadCard .detailTextLink {
    min-height: 42px;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    padding: 0 18px;
    color: #fff;
    text-decoration: none;
    background: var(--accent);
    border: 1px solid var(--accent);
}

.detailPage--flow .detailApplyFlow .detailTextLink:hover,
.detailPage--flow .detailFlowExam .detailTextLink:hover,
.detailPage--flow .detailLeadCard .detailTextLink:hover {
    color: #fff;
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.detailApplyFlow {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.detailApplyFlow__item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 92px;
    gap: 18px;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.14);
}

.detailApplyFlow__number {
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    font-size: 1.45rem;
    font-weight: 900;
}

.detailApplyFlow__body {
    padding: 20px 22px 20px 0;
}

.detailApplyFlow__icon {
    width: 56px;
    height: 56px;
    align-self: center;
    justify-self: center;
    margin-right: 18px;
}

.detailApplyFlow__title {
    color: var(--navy);
    font-size: 1.12rem;
}

.detailApplyFlow__body p {
    margin-top: 8px;
}

.detailFaqFilter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.detailFaqFilter__button {
    border: 1px solid rgb(var(--primary-dark-rgb) / 0.22);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    padding: 10px 16px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
}

.detailFaqFilter__button.isActive {
    background: var(--navy);
    color: #fff;
}

.detailFaqItem__scene {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 4px 10px;
    background: #f3f6fa;
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .detailProgramGrid--deep,
    .detailMiniFlow {
        grid-template-columns: 1fr;
    }

    .detailDestinationIntro__inner,
    .detailDestinationTypes__grid,
    .detailList--countryFocus {
        grid-template-columns: 1fr;
    }

    .detailDestinationIntro__photo {
        order: -1;
    }

    .detailDestinationTypes__box {
        padding: 26px 20px;
    }

    .detailDestinationType {
        grid-template-columns: 50px minmax(0, 1fr) 18px;
    }

    .detailDestinationType img {
        width: 50px;
    }

    .detailListCard--countryProgram {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .detailList--countryProgram .detailListCard--countryProgram > div:not(.detailListCard__visual) {
        padding: 22px 22px 0 0;
    }

    .detailListCard--countryProgram .detailListCard__thumbnail {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 7;
    }

    .detailApplyFlow__item {
        grid-template-columns: 64px minmax(0, 1fr) 80px;
    }

    .detailApplyFlow__icon {
        width: 48px;
        height: 48px;
        margin-right: 12px;
    }
}

@media (max-width: 560px) {
    .detailSubHero--destination {
        min-height: 320px;
        padding-top: 112px;
        padding-bottom: 18px;
        background-position: left top, var(--destination-hero-pos-sp, 58% top);
        background-size: auto, var(--destination-hero-size-sp, auto 116%);
    }

    .detailSubHero--destination .detailSubHero__content {
        padding-left: 18px;
        border-left-width: 4px;
    }

    .detailDestinationIntro,
    .detailDestinationTypes,
    .detailDestinationCities {
        padding-right: 16px;
        padding-left: 16px;
    }

    .detailProgramMiniTable--destination th,
    .detailProgramMiniTable--destination td {
        display: block;
        width: 100%;
    }

    .detailDestinationCityItem {
        display: block;
        padding: 14px 16px;
    }

    .detailDestinationCityItem strong,
    .detailDestinationCityItem small,
    .detailDestinationCityItem__note {
        display: block;
        margin-left: 0;
    }

    .detailDestinationCityItem__note {
        margin-top: 6px;
    }

    .detailListCard--countryFocus,
    .detailListCard--countryProgram {
        grid-template-columns: 1fr;
    }

    .detailListCard__visual {
        grid-template-columns: 1fr;
    }

    .detailListCard__illustration {
        width: 120px;
    }

    .detailListCard--countryProgram .detailListCard__thumbnail {
        aspect-ratio: 16 / 9;
    }

    .detailList--countryProgram .detailListCard__visual,
    .detailList--countryProgram .detailListCard--countryProgram > div:not(.detailListCard__visual) {
        padding: 22px;
    }

    .detailApplyFlow__item {
        grid-template-columns: minmax(0, 1fr) 72px;
    }

    .detailApplyFlow__number {
        grid-column: 1 / -1;
        min-height: 54px;
    }

    .detailApplyFlow__body {
        padding: 16px 0 16px 16px;
    }

    .detailApplyFlow__icon {
        width: 44px;
        height: 44px;
        margin-right: 12px;
    }
}


/* Voice detail */
.detailVoicePage {
    background: var(--white);
}

.detailVoiceHero {
    padding: 118px 0 0;
    background: linear-gradient(90deg, rgb(var(--panel-blue-rgb) / 0.92), rgb(var(--white-rgb) / 0.72));
}

.detailVoiceHero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.78fr);
    align-items: stretch;
    width: min(var(--content-wide), 100%);
    margin: 0 auto;
}

.detailVoiceHero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 430px;
    padding: 64px 48px 54px 0;
}

.detailVoiceHero__label,
.detailVoiceStory__label {
    display: none;
    margin: 0 0 18px;
    color: var(--accent);
    font-family: "Fraunces", serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.detailVoiceHero__heading {
    margin: 0;
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.28;
}

.detailVoiceHero__heading span {
    display: block;
}

.detailVoiceHero__profile {
    width: min(270px, 100%);
    padding: 18px 20px;
    margin-top: 30px;
    color: var(--white);
    background: var(--primary-dark);
    border-left: 5px solid var(--accent);
}

.detailVoiceHero__profile p,
.detailVoiceHero__profile b,
.detailVoiceHero__profile em {
    display: block;
    margin: 0;
}

.detailVoiceHero__profile p {
    margin-bottom: 8px;
    font-size: 0.76rem;
    font-weight: 800;
}

.detailVoiceHero__profile b {
    font-size: 1.18rem;
}

.detailVoiceHero__profile em {
    margin-top: 3px;
    color: rgb(var(--white-rgb) / 0.75);
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 800;
}

.detailVoiceHero__figure {
    margin: 0;
}

.detailVoiceHero__figure img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

.detailVoiceIntro,
.detailVoiceClosing {
    padding: 58px max(24px, calc((100vw - var(--content-wide)) / 2));
}

.detailVoiceNarrow {
    width: min(760px, 100%);
    margin: 0 auto;
}

.detailVoiceLead {
    margin: 0 0 24px;
    color: var(--primary-dark);
    font-size: 1rem;
    font-weight: 800;
    line-height: 2;
    text-align: center;
}

.detailVoiceSpec--horizontal {
    width: 100%;
    margin: 0 0 28px;
    border-collapse: collapse;
}

.detailVoiceSpec--horizontal th,
.detailVoiceSpec--horizontal td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    text-align: left;
}

.detailVoiceSpec--horizontal th {
    width: 140px;
    color: var(--primary-dark);
    background: var(--bg-light);
}

.detailVoiceStory {
    padding: 64px max(24px, calc((100vw - var(--content-wide)) / 2));
}

.detailVoiceStory--tone {
    background: var(--bg-light);
}

.detailVoiceStory__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: 56px;
    align-items: center;
    width: min(var(--content-wide), 100%);
    margin: 0 auto;
}

.detailVoiceStory--reverse .detailVoiceStory__text {
    order: 2;
}

.detailVoiceStory--reverse .detailVoiceStory__figure {
    order: 1;
}

.detailVoiceQuote {
    width: 100%;
    padding: 0;
    margin: 0 0 28px;
    color: var(--primary-dark);
    font-family: var(--font-jp);
    font-size: 1.5625rem;
    font-weight: 900;
    background: transparent;
    border-left: 0;
    line-height: 1.85;
    text-align: left;
}

.detailVoiceQuote::before {
    position: static;
    display: block;
    width: 48px;
    height: 2px;
    padding-bottom: 0;
    margin-bottom: 20px;
    content: "";
    background: var(--accent);
}

.detailArticleBody__text {
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 2.08;
}

.detailVoiceStory__figure,
.detailVoiceWidePhoto {
    margin: 0;
}

.detailVoiceHero__figure--snap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px;
    background: var(--primary-dark);
}

.detailVoiceHero__figure--snap img {
    width: auto;
    height: auto;
    max-width: min(100%, 120%);
    min-height: 0;
    object-fit: contain;
    background: var(--white);
    border: 1px solid rgb(var(--white-rgb) / 0.5);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgb(var(--primary-dark-rgb) / 0.18);
}

.detailVoiceStory__figure img,
.detailVoiceWidePhoto img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.detailVoiceStory__figure--small {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 260px;
}

.detailVoiceStory__figure--small img {
    width: auto;
    height: auto;
    max-width: 100%;
}

.detailVoiceWidePhoto {
    margin-bottom: 24px;
}

.detailVoiceSource {
    margin: 20px 0 0;
    color: var(--text-sub);
    font-size: 0.82rem;
    text-align: right;
}

.detailVoiceRelated {
    padding: 62px max(24px, calc((100vw - var(--content-wide)) / 2));
}

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

.detailVoiceRelated__back a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 22px;
    color: var(--primary-dark);
    font-size: 0.88rem;
    font-weight: 900;
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
}

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

    .detailVoiceHero__inner,
    .detailVoiceStory__inner {
        grid-template-columns: 1fr;
    }

    .detailVoiceHero__copy {
        min-height: 0;
        padding: 44px 24px 36px;
    }

    .detailVoiceHero__figure img {
        min-height: 320px;
    }

    .detailVoiceHero__figure--snap {
        padding: 24px;
    }

    .detailVoiceHero__figure--snap img {
        min-height: 0;
    }

    .detailVoiceStory--reverse .detailVoiceStory__text,
    .detailVoiceStory--reverse .detailVoiceStory__figure {
        order: initial;
    }
}

@media (max-width: 640px) {
    .detailArchiveGrid--interview {
        grid-template-columns: 1fr;
    }

    .detailArchiveCard--interview {
        min-height: 360px;
    }

    .detailArchiveCard--interview .detailArchiveCard__image {
        height: 225px;
    }

    .detailVoiceIntro,
    .detailVoiceStory,
    .detailVoiceClosing,
    .detailVoiceRelated {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}


/* 55号：矢印付きボタン（一覧・もっと見る導線） */
.detailArchiveMore {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.detailArrowButton {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    gap: 10px;
    padding: 0 22px 0 28px;
    color: var(--white);
    font-weight: 900;
    text-decoration: none;
    background: var(--primary-dark);
    border: 1.5px solid var(--primary-dark);
    border-radius: 999px;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.detailArrowButton .material-symbols-rounded {
    font-size: 22px;
    transition: transform 0.25s ease;
}

.detailArrowButton:hover,
.detailArrowButton:focus-visible {
    color: var(--white);
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgb(var(--ink-rgb) / 0.22);
}

.detailArrowButton:hover .material-symbols-rounded,
.detailArrowButton:focus-visible .material-symbols-rounded {
    transform: translateX(4px);
}

.detailPage--student .detailArrowButton {
    background: #174f7a;
    border-color: #174f7a;
}

.detailPage--student .detailArrowButton:hover,
.detailPage--student .detailArrowButton:focus-visible {
    background: #1f6496;
}

/* ============================================================
   64号: お問い合わせフォーム（資料請求／個別相談）＋プライバシーポリシー枠
   ============================================================ */

.detailContactStack {
    display: grid;
    gap: 26px;
}

.detailContactPanel--wide .detailContactData {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 10px 28px;
}

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

.detailFormCard {
    align-content: start;
    scroll-margin-top: 120px;
}

.detailFormCard__head {
    display: grid;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--detail-rule);
}

.detailFormCard__label {
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.detailFormCard__title {
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: 1.24rem;
    font-weight: 700;
}

.detailFormCard__lead {
    color: var(--text-sub);
    font-size: 0.88rem;
    line-height: 1.8;
}

.detailFormMock__label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detailFormMock__badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
}

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

.detailFormMock__badge--opt {
    color: var(--text-sub);
    background: var(--bg-light);
    border: 1px solid var(--border);
}

.detailFormMock__hint {
    color: var(--text-sub);
    font-size: 0.78rem;
    line-height: 1.7;
}

.detailFormCard .refButton {
    justify-self: start;
    margin-top: 6px;
}

.detailPrivacyBody {
    display: grid;
    gap: 16px;
    align-content: start;
    min-height: 200px;
}

.detailPrivacyBody .detailNote{
    border: 1px solid #000;
    padding: 15px;
    margin: 1em 0;
}

.detailPrivacyBody ol{
    list-style: decimal;
    margin-left: 1em;
}
.detailPrivacyBody ol ol{
    margin-left: 1em;
    margin-top: 0.4em;
}
.detailPrivacyBody ol li{
    padding: 0 0 1em;
}
.detailPrivacyBody ol li::first-line{
    font-weight: bold;
}
.detailPrivacyBody ol ol li::first-line{
    font-weight: normal;
}


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

/* ============================================================
   65号: 学生の体験談（Student Voice）
   §5 学生の体験談。氏名・顔写真を出さない前提で、
   「参加データ」と「4節の目次」を記事の主役に置く。
   ============================================================ */
.voiceFactCard {
    margin: 0;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--detail-rule);
    border-top: 3px solid var(--accent);
}

.voiceFactCard__row {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    border-top: 1px solid var(--detail-rule);
}

.voiceFactCard__row:first-child {
    border-top: none;
}

.voiceFactCard dt {
    padding: 12px 18px;
    color: var(--primary-dark);
    font-size: 0.84rem;
    font-weight: 800;
    background: var(--bg-light);
}

.voiceFactCard dd {
    margin: 0;
    padding: 12px 18px;
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.75;
}

.detailArticleHero__note {
    margin: 0;
    color: var(--text-sub);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.7;
    text-align: right;
}

.voiceChapterNav {
    padding: 20px 22px 22px;
    background: var(--bg-light);
    outline: 1px solid var(--detail-rule);
    outline-offset: -7px;
}

.voiceChapterNav__title {
    margin: 0 0 14px;
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
}

.voiceChapterNav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.voiceChapterNav__list a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding-bottom: 7px;
    color: var(--primary-dark);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px dotted rgb(var(--primary-dark-rgb) / 0.35);
}

.voiceChapterNav__list a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.voiceChapterNum {
    flex: none;
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.voiceChapter {
    display: flex;
    gap: 14px;
    align-items: baseline;
    scroll-margin-top: 110px;
}

.voiceChapter .voiceChapterNum {
    font-size: 1.5rem;
}

/* 一覧カードの氏名欄は「立場＋参加年」。カード下部は濃紺地・白文字のため、
   色は白系で組む（--primary-dark を置くと地色と同化して読めなくなる）。 */
.detailArchiveCard--student .detailArchiveCard__name {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin-top: 10px;
}

.detailArchiveCard--student .detailArchiveCard__name b {
    color: var(--white);
    font-size: 1.05rem;
    line-height: 1.4;
}

.detailArchiveCard--student .detailArchiveCard__name em {
    padding: 3px 10px;
    color: var(--white);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1px solid rgb(var(--white-rgb) / 0.55);
    border-radius: 999px;
}

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

    .voiceFactCard__row {
        grid-template-columns: 7rem minmax(0, 1fr);
    }

    .voiceChapter .voiceChapterNum {
        font-size: 1.2rem;
    }
}

/* ===============================================================
   260930：強制改行と幅の上限を外す（9/29 打ち合わせ）
   「右に何もない箇所で改行しない。スマホや文字の大きさを変えたときに変な場所で切れる」
   =============================================================== */
/* 募集要項の表・問い合わせの文・一覧の説明を、本文の幅いっぱいまで使う（見出しは program.css 側） */
dl.detailVoiceSpec,
.detailContact__text,
.detailArchiveHead__text {
    max-width: none;
}

/* ===============================================================
   261001：お知らせの移設（旧サイト 2025年7月〜）で箇条書きを使うため
   =============================================================== */
.detailArticleBody__list {
    display: grid;
    gap: 6px;
    padding-left: 1.4em;
    color: var(--text);
    font-weight: 500;
    line-height: 1.8;
    list-style: disc;
}

.detailArticleBody__list li::marker {
    color: var(--accent);
}

/* 261002t：色を明るく（common.css の同日の変更に合わせ、記事ページの紺も一段明るく） */
.detailPage {
    --detail-ink: #184278;
    --detail-label-bg: #1d4f8a;
}

/* ===============================================================
   261002w：髙野さん 10/2（2回目）
   ③ 各ページの先頭の写真入りバナーが高すぎる → 高さを約半分に（文字は少し小さく、余白を詰める）
   ② 下層のページ内メニュー（.detailAnchor）が目立たない → 淡い地・上に色の線・区切り線。貼り付く位置をヘッダーの実高に
   =============================================================== */
.detailHero__inner {
    min-height: clamp(150px, 17vw, 215px);
}

.detailHero__content {
    padding: 10px 0 22px;
}

.detailSubHero {
    padding-bottom: 26px;
    margin-bottom: 0;
}

.detailSubHero__inner {
    min-height: 0;
}

.detailSubHero__content {
    padding-top: 10px;
}

.detailSubHero .detailBreadcrumb,
.detailHero .detailBreadcrumb {
    margin-bottom: 8px;
}

.detailSubHero__heading {
    margin-top: 4px;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}

.detailSubHero__lead {
    margin-top: 6px;
    font-size: 0.92rem;
    line-height: 1.65;
}

.detailSubHero--destination {
    min-height: clamp(180px, 17vw, 230px);
    padding-bottom: 16px;
}

.detailSubHero--destination .detailSubHero__inner {
    min-height: 0;
}

.detailSubHero--destination .detailSubHero__content {
    padding: 12px 0 12px 22px;
}

.detailSubHero--destination .detailSubHero__heading {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
}

@media (max-width: 560px) {
    .detailSubHero--destination {
        min-height: 200px;
    }
}

.detailAnchor {
    top: var(--headerH, 112px);
    gap: 0;
    background: var(--bg-light);
    border-top: 3px solid var(--primary);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgb(var(--ink-rgb) / 0.06);
}

.detailAnchor a {
    position: relative;
    min-height: 52px;
    padding: 0 22px;
    border-bottom: 3px solid transparent;
}

.detailAnchor a + a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 14px;
    content: "";
    background: rgb(var(--ink-rgb) / 0.2);
    transform: translateY(-50%);
}

.detailAnchor a:hover,
.detailAnchor a:focus-visible,
.detailAnchor a.isCurrent {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* 261002w：改行の再点検。参加者の声の引用（500px）・費用の注記（880px）・都市の注記（920px）の上限を外す */
.detailVoiceQuote {
    max-width: none;
}

.detailProgramNote,
.detailDestinationCities__note {
    width: auto;
}

/* 261002w 追記：ページ内メニューが「バナーの直後の要素」の指定（position: relative）に負けて貼り付かず、
   top の値だけずれて、バナーとのあいだに空白ができていた → 貼り付かせる */
.detailSubHero + .detailAnchor,
.detailHero + .detailAnchor {
    position: sticky;
    z-index: 40;
}

/* 261002w 追記：バナーの説明文も右が空いたまま折れていた（680〜760px の上限）→ 外す */
.detailSubHero__content,
.detailSubHero__lead,
.detailHero__content,
.detailSubHero--destination .detailSubHero__content {
    width: auto;
}

/* ===============================================================
   261002w：安心のサポート（/support/）にピクト（10/2 髙野さん「イラストとかピクトを入れたい」）
   ピクトはサイト内の線画（紺の線＋オレンジ）。白地のピクト（country-common-type-*）は multiply で地に溶かす
   =============================================================== */
.supportPict {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* 出発をお決めいただくまで：3つの言葉 */
.supportPoints {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.supportPoints li {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 24px 16px 22px;
    color: var(--primary-dark);
    font-weight: 800;
    text-align: center;
    background: var(--bg-light);
    border-radius: 8px;
}

.supportPoints .supportPict {
    width: 84px;
    height: 84px;
}

/* IIPがすること：3列のカード。ピクト → ラベル → 見出し → 文 */
.detailList--supportPict {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.detailList--supportPict .detailListCard,
.detailList--supportProgram .detailListCard {
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: start;
}

.detailList--supportPict .detailListCard__visual,
.detailList--supportProgram .detailListCard__visual {
    display: flex;
    gap: 14px;
    align-items: center;
}

/* プログラム別・参加までの流れ：4列のカード */
.detailList--supportProgram {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.detailList--supportProgram .supportPict {
    width: 60px;
    height: 60px;
}

/* 参加までの流れ：5段の絵 */
.supportFlowStrip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 28px;
    counter-reset: none;
}

.supportFlowStrip li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 18px 8px 16px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.supportFlowStrip li + li::before {
    position: absolute;
    top: 50%;
    left: -11px;
    width: 10px;
    height: 10px;
    content: "";
    border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    transform: translateY(-50%) rotate(45deg);
}

.supportFlowStrip__num {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

.supportFlowStrip__label {
    color: var(--primary-dark);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.5;
}

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

    .supportFlowStrip {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .supportFlowStrip li {
        grid-template-columns: auto 52px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
        text-align: left;
    }

    .supportFlowStrip li + li::before {
        top: -9px;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .supportFlowStrip .supportPict {
        width: 52px;
        height: 52px;
    }
}

@media screen and (max-width: 640px) {
    .supportPoints,
    .detailList--supportPict,
    .detailList--supportProgram {
        grid-template-columns: minmax(0, 1fr);
    }

    .supportPoints li {
        grid-template-columns: 64px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        text-align: left;
    }

    .supportPoints .supportPict {
        width: 64px;
        height: 64px;
    }
}

/* 261003：サポートのカード（プログラム別の流れ）で「参加までの流れを見る」の高さが揃っていなかった（見出しの行数の違い）→ リンクを下端に揃える */
.detailList--supportProgram .detailListCard,
.detailList--supportPict .detailListCard {
    display: flex;
    flex-direction: column;
}

.detailList--supportProgram .detailListCard > div:last-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.detailList--supportProgram .detailListCard__title {
    min-height: 3.2em;
}

.detailList--supportProgram .detailListCard__text:last-child {
    margin-top: auto;
}

/* ===============================================================
   261003：パンフレット（栗林さま 10/2）の内容を入れたページの部品
   /support/（イラスト・教材と説明会・研修先決定までの流れ）／/lessons/／/work/fields/／/work/stories/
   イラストは白地の絵なので multiply で地に溶かす
   =============================================================== */
.detailList--supportPict .supportPict--illust {
    width: 110px;
    height: 96px;
}

.supportFigure {
    float: right;
    width: min(220px, 36%);
    margin: 0 0 12px 28px;
}

.supportFigure img,
.processStep__illust {
    mix-blend-mode: multiply;
}

.supportPoints {
    clear: both;
}

.supportExtra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

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

.supportExtra__heading {
    margin-bottom: 14px;
    color: var(--primary-dark);
    font-size: 1.05rem;
    font-weight: 800;
}

.supportExtra__heading--programs {
    margin: 40px 0 16px;
}

.supportMaterials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.supportMaterials img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: #f6f6f4;
}

.supportExtra__photo {
    width: 100%;
    max-height: 200px;
    margin-bottom: 12px;
    object-fit: cover;
    border-radius: 6px;
}

/* 研修先決定までの一般的な流れ */
.processSteps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin: 26px 0 8px;
}

.processStep {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px 20px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.processStep--text {
    background: var(--bg-light);
}

.processStep__illust {
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.processStep__num {
    display: inline-grid;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    place-items: center;
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    background: #2fa3b6;
    border-radius: 50%;
    vertical-align: middle;
}

.processStep__title {
    display: inline;
    color: var(--primary-dark);
    font-size: 1rem;
    font-weight: 800;
    vertical-align: middle;
}

.processStep p {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.75;
}

/* どんな授業をすればいいの？ */
.lessonGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.lessonCard {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.lessonCard__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lessonCard__title {
    padding: 14px 18px 0;
    color: var(--primary-dark);
    font-size: 1.08rem;
    font-weight: 800;
}

.lessonCard__text {
    padding: 6px 18px 18px;
    font-size: 0.9rem;
    line-height: 1.75;
}

.lessonNext {
    margin-top: 28px;
    text-align: center;
}

.lessonNext--programs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* 研修分野の実績例 */
.fieldBlock {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.fieldBlock__heading {
    margin: 24px 0 10px;
    color: var(--primary-dark);
    font-size: 0.95rem;
    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;
}

.fieldPhotos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.fieldPhotos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.fieldPhotos img:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}

/* 参加者の体験 */
.storyCard {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
    padding: 32px 0;
    border-top: 1px solid var(--border);
}

.storyCard__photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

.storyCard__facts {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.84rem;
    line-height: 1.6;
}

.storyCard__facts div {
    display: grid;
    grid-template-columns: 4em minmax(0, 1fr);
    gap: 8px;
}

.storyCard__facts dt {
    color: var(--accent);
    font-weight: 800;
}

.storyCard__title {
    margin-bottom: 12px;
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    line-height: 1.5;
}

.storyCard__shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.storyCard__shots img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.storyCard__shots figcaption {
    margin-top: 4px;
    color: var(--text-sub);
    font-size: 0.78rem;
}

.storyLinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.storyLink {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 16px 18px;
    color: inherit;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.storyLink img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
}

.storyLink__meta {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
}

.storyLink strong {
    color: var(--primary-dark);
    line-height: 1.6;
}

.storyLink:hover strong {
    text-decoration: underline;
}

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

    .fieldBlock,
    .storyCard,
    .supportExtra {
        grid-template-columns: minmax(0, 1fr);
    }

    .storyCard__visual {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .storyCard__facts {
        margin-top: 0;
    }
}

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

    .supportFigure {
        float: none;
        width: 200px;
        margin: 0 auto 16px;
    }

    .storyCard__visual {
        grid-template-columns: 110px minmax(0, 1fr);
    }
}

/* 261003：パンフレット p2 のイラスト8点（IIPの研修とは） */
.goalGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 20px;
    margin-top: 10px;
}

.goalGrid__item img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.goalGrid__item figcaption {
    margin-top: 10px;
    color: var(--primary-dark);
    font-size: 0.92rem;
    font-weight: 800;
    text-align: center;
}

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

    .goalGrid__item img {
        height: 140px;
    }
}

/* 261003：参加者の声（パンフレット・研修報告書から作ったページ）の部品 */
.detailVoiceCaption {
    margin-top: 8px;
    color: var(--text-sub);
    font-size: 0.8rem;
    line-height: 1.6;
}

.detailVoiceStory__inner--text {
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
}

.voiceGallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.voiceGallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.voiceMore {
    margin-top: 22px;
    text-align: center;
}

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

/* 261003：パンフレットの写真は解像度が低く、元の大きさだと枠の中で小さく見える → ぼやけすぎない範囲で枠の8割に */
.detailVoiceHero__figure img[src*="/pamphlet/"] {
    width: 80%;
    height: auto;
}

/* ===============================================================
   261003：/work/programs/（ワーク＆カルチャーインターンの内容）の部品
   =============================================================== */
.detailPage .refFeatureMore {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 28px 0 0;
}

.wcpWishes {
    display: grid;
    gap: 6px;
    margin: 6px 0 22px;
    padding: 22px 26px;
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.6;
    background: var(--bg-light);
    border-left: 5px solid var(--accent);
    border-radius: 0 8px 8px 0;
}

.wcpSubheading {
    margin: 28px 0 12px;
    color: var(--primary-dark);
    font-size: 1.05rem;
    font-weight: 800;
}

.wcpForWho {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}

.wcpForWho li {
    position: relative;
    padding-left: 28px;
    color: var(--primary-dark);
    font-weight: 700;
    line-height: 1.7;
}

.wcpForWho li::before {
    position: absolute;
    top: 0.15em;
    left: 0;
    content: "check_circle";
    color: var(--accent);
    font-family: "Material Symbols Rounded";
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.wcpAreas {
    display: grid;
    gap: 22px;
}

.wcpArea {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 28px;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.wcpArea__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.wcpArea__title {
    margin: 6px 0 10px;
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: 1.35rem;
}

.wcpVoices {
    margin-top: 12px;
    font-size: 0.88rem;
    line-height: 1.8;
}

.wcpVoices span {
    color: var(--text-sub);
    font-weight: 700;
}

.wcpVoices a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wcpRequest {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.wcpRequest li {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    background: var(--bg-light);
    border-radius: 8px;
}

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

.wcpRequest b {
    color: var(--primary-dark);
    font-size: 1rem;
}

.wcpCollege {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
}

.wcpCollege__photo img {
    width: 100%;
    border-radius: 8px;
}

.wcpCost {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.wcpCost article {
    padding: 20px 22px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.wcpCost h3 {
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-size: 1rem;
    font-weight: 800;
}

.wcpCost p {
    font-size: 0.9rem;
    line-height: 1.8;
}

@media screen and (max-width: 900px) {
    .wcpArea,
    .wcpCollege,
    .wcpCost {
        grid-template-columns: minmax(0, 1fr);
    }

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