/* =========================================================
   みん就 ITチャレンジ奨学金 LP - scholarship.css
   Design width: 1440px fixed (SP not yet designed)
   ========================================================= */

:root {
    --c-orange: #FF650E;
    --c-orange-lt: #FF9500;
    --c-red: #F8243D;
    --c-yellow: #FFCC32;
    --c-yellow-pale: #FFECCC;
    --c-yellow-bg: #FFF4E6;
    --c-blue: #2042FF;
    --c-cyan: #00C8FF;
    --c-blue-pale: #E7F2FB;
    --c-green-pale: #DFEDE5;
    --c-peach: #FFCFB4;
    --c-text: #333333;
    --c-text-mid: #474747;
    --c-text-sub: #5C5C5C;
    --c-text-mute: #999999;
    --c-placeholder: #C2C2C2;
    --c-line: #EBEBEB;
    --c-line-strong: #D6D6D6;
    --c-bg-soft: #F5F5F5;
    --c-white: #FFFFFF;
    /* Validation error colours — taken from the 会員情報変更画面 / 選考体験記
       screenshots. Kept as their own tokens so error red can diverge from the
       brand red used by CTA buttons. */
    --c-error: #E8384F;
    --c-error-bg: #FEF0F1;

    --grad-warm: linear-gradient(90deg, #FF9500 0%, #F8243D 100%);
    --grad-hero-bg: linear-gradient(135deg, #FFE37E 0%, #FFC44D 45%, #FF9500 100%);

    /* Figma 指定そのまま（#00000026 は alpha 0x26/255 ≒ 0.149）。 */
    --shadow-cta: 8px 8px 6px 0px #00000026;
    --shadow-card: 0px 2px 24px rgba(36, 41, 47, 0.05);
    --shadow-side: 0px 2px 14px rgba(133, 133, 133, 0.6);

    /* Figma variable「Radius/primary」。Figma 側の変数定義値を確認できていないため、
       現行の実装値 16px を暫定で採用している。Figma の値が異なる場合はここだけ直せば
       .faq__item など参照側すべてに反映される。 */
    --radius-primary: 16px;
    /* Figma variable「Radius/secondary_midle」。変数の定義値を確認できていないため、
       外枠 16px から padding 8px を引いた 8px を暫定採用している（内外の角が同心円に
       なる値）。Figma 側の実値が分かればここだけ直せばよい。 */
    --radius-secondary-middle: 8px;

    /* デザイン基準幅。PC 帯（≥768px）は常にこの幅で描画する。 */
    --design-w: 1440px;
    /* 左右の外側余白。SP では画面幅に追従させたいので vw ベースのまま残し、
       PC 帯では @media (min-width: 768px) 側で固定値に上書きする
       （1440px 時の 8vw ＝ 115.2px と同値。窓幅を変えても動かないようにするため）。 */
    --gutter: clamp(20px, 8vw, 120px);

    --content-w: 1200px;
    --content-narrow-w: 880px;
    --side-nav-right: 25px;
    --header-h: 72px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
    margin: 0;
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    color: var(--c-text);
    background: var(--c-white);
    line-height: 1.7;
    font-size: 14px;
    overflow-x: hidden; /* clip stray decorations that reach past viewport */
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ol, ul { list-style: none; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: var(--c-white);
    filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.05));
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--content-w);
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
}
.site-header__logo {
    font-size: 16px;
    font-weight: 900;
    color: var(--c-text);
}
.logo-brand {
    background: var(--grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-right: 4px;
}
.site-header__nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 13px;
    font-weight: 700;
}
.site-header__nav a:not(.btn):hover { color: var(--c-orange); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 0;
    border-radius: 9999px;
    font-weight: 700;
    text-align: center;
    /* CTA の影は .btn 既定。以前は .btn--lg / .btn--secondary にだけ付いていたため、
       通常サイズの .btn--primary（sticky CTA）や送信ボタンには影が出ていなかった。
       控えめな .btn--ghost だけ下で打ち消す。 */
    box-shadow: var(--shadow-cta);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled,
.btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    filter: grayscale(0.3);
}
.btn--sm { padding: 8px 20px; font-size: 13px; }
.btn--lg { padding: 24px 56px; font-size: 18px; box-shadow: var(--shadow-cta); }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-blue); color: var(--c-white); }
.btn--secondary {
    background: var(--c-white);
    color: var(--c-blue);
    border: 3px solid var(--c-blue);
    box-shadow: var(--shadow-cta);
}

/* ---------- 募集終了時のCTA無効化 ----------
   募集期間が終わると scholarship.js が href を外し .is-disabled を付ける。
   .btn--primary（背景色）より詳細度を上げる必要があるため、
   要素側のクラスと併記して 0,2,0 にしている（!important は使わない）。 */
/* Figma（無効化時）:
     background #FFFFFF（Color-Primary-Natural-White ＝ --c-white）
     border 3px solid #EBEBEB（Color-button-primary_disabled ＝ --c-line）
     文字色 #D6D6D6（Color-Primary-Gray-200 ＝ --c-line-strong）
     Noto Sans JP / Bold 700 / 18px / line-height 150% / letter-spacing 0
   影は有効時と同じ --shadow-cta を維持する（無効でも立体感を残す指定）。
   font-family は body の Noto Sans JP を継承するため再指定しない。 */
.btn.is-disabled,
.side-nav__cta.is-disabled,
.hero__sp-cta.is-disabled {
    background: var(--c-white);
    color: var(--c-line-strong);
    border: 3px solid var(--c-line);
    box-shadow: var(--shadow-cta);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    cursor: default;
    transform: none;
    /* href は JS 側で外しているのでクリックもフォーカスも既に無効。
       これはホバー時のカーソル・イベントを念のため止める二重の保険。 */
    pointer-events: none;
}
/* 18px は横長CTA（.btn）向けの指定。side-nav / hero SP の丸ピルは直径が固定で、
   18px にすると「募集終了」が収まらなくなるため元の文字サイズを保つ。 */
.btn.is-disabled { font-size: 18px; }
/* 画面下固定バーのボタンは横幅が狭く（2本を flex: 1 で分け合う）、18px だと
   「募集は終了しました」が大きく見えて2行になる。通常時は 13px なので 14px に留める。
   .btn.is-disabled と詳細度が同じ（0,2,0）ため、後に書いて勝たせている。 */
.sticky-cta__btn.is-disabled { font-size: 14px; }
.btn--danger { background: var(--c-red); color: var(--c-white); padding: 16px 32px; font-size: 15px; }
.btn--ghost {
    background: var(--c-white);
    color: var(--c-text);
    border: 1px solid var(--c-line);
    font-size: 14px;
    padding: 11px 28px;
    /* フォーム内の補助操作（＋行を追加）なので CTA の影は載せない。 */
    box-shadow: none;
}
.btn__icon {
    width: 20px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---------- Hero ---------- */
/* Shared background wrapper — pearlescent SVG spans hero + intro continuously */
.hero-block {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background:
        url('../assets/pc/hero-bg.svg') center top / 100% auto no-repeat,
        var(--grad-hero-bg); /* fallback + fills any area below the SVG's height */
}

.hero {
    position: relative;
    width: 100%;
    min-height: 964px; /* Figma spec: ファーストビュー_PC height */
    padding: 48px var(--gutter) 200px;
    background: transparent; /* bg is now on .hero-block */
}
/* Full-width hero title banner - sits at very top of hero */
.hero__title-banner {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    max-width: 1220px;
    height: 300px;
    filter:
        drop-shadow(4px 8px 5.5px rgba(255, 255, 255, 0.55))
        drop-shadow(3px 4px 4.8px rgba(255, 255, 255, 0.55));
}
.hero__title-banner--sp { display: none; }

/* Small brand mark in the top-left corner of the hero.
   top/left match .hero's padding so the brand's top-left corner sits at
   the same origin as the title banner's top-left (both anchored to
   .hero's content-box). */
.hero__brand {
    position: absolute;
    top: 48px;
    left: var(--gutter);
    z-index: 4;
    display: inline-block;
    line-height: 0; /* removes phantom baseline gap below the <img> */
    text-decoration: none;
    transition: transform .15s ease;
}
.hero__brand:hover { transform: scale(1.05); }
.hero__brand img {
    display: block;
    width: 104px;
    height: auto;
}

/* 画面下固定の応募CTA（SP限定）。PC は .side-nav__cta が同じ役割のため非表示。 */
.sticky-cta { display: none; }

/* SP-only floating apply CTA — mirrors .side-nav__cta pattern; hidden on PC/tablet
   because .side-nav__cta serves the same purpose on wider viewports. */
.hero__sp-cta { display: none; }

/* Removed z-index from .hero__grid so its children can participate directly
   in the root stacking context — needed so mascot can sit BELOW the cloud
   (z-index 4 < cloud z:5) while CTA sits ABOVE it (z-index 6 > cloud z:5). */
.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 780px) minmax(0, 500px); /* wider mascot column */
    grid-template-rows: auto auto;
    column-gap: 48px;
    row-gap: 40px;
    align-items: center;
    justify-content: center;
    max-width: 1340px; /* widened to accommodate the larger mascot column */
    margin: -150px auto 0; /* pull upward to overlap the title banner */
}
.hero__mascot {
    position: relative;
    z-index: 4; /* above title-banner (z:3), below cloud (z:5 via .recommend) */
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0; /* allow grid item to shrink below img's intrinsic width */
}
/* <picture> をレイアウトから消し、<img> を直接 .hero__mascot のフレックス子要素の
   ままにする。こうしないと picture が子要素になり、下の img の width:100% が
   picture 幅（＝内容幅）基準になって意図した寸法にならない。 */
.hero__mascot picture { display: contents; }
.hero__mascot img {
    width: 100%;
    max-width: 780px; /* matches .hero__grid mascot column cap; fluid up to this */
    height: 706px;    /* fixed to match SVG aspect at 780 width; stable across viewports */
    transform: translate(-55px, 60px) scale(1.2); /* +20% size, plus 20px left & 20px down visual nudge (post-scale coords) */
}
/* Hero message block — H1 catchphrase + supporting lead paragraph.
   Figma: Frame 2957, 424x463, flex column, justify-end, align-center,
   padding 32/20, gap 24.
   z-index:6 keeps text readable above the cloud (z:5). */
.hero__message {
    position: relative;
    z-index: 6;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 424px;
    min-height: 463px;
    padding: 32px 20px;
    gap: 24px;
}
.hero__title {
    width: 100%;
    max-width: 384px;
    font-weight: 900;
    font-size: 38px;
    line-height: 1.5;
    letter-spacing: 3px;
    color: var(--c-text);
}
.hero__lead {
    width: 100%;
    max-width: 384px;
    font-weight: 700;
    font-size: 16px;
    line-height: 2.1;
    color: var(--c-text);
    text-align: left;
}
/* Recommend section — wraps intro (banner+badges) and challenges cards.
   z-index:5 lifts the whole .recommend stacking context above .hero__grid
   (z:4) in the root, so the cloud ::before paints OVER the mascot where they
   visually overlap. Intro/challenges stay visible because they sit at higher
   local z-indices inside .recommend's own context. */
.recommend {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    /* 雲（::before）が下端からはみ出して次のセクションを覆うのを防ぐ。
       雲は width:100% ＋ aspect-ratio で高さが幅に比例するため、SP 指定の
       375/2527（＝高さは幅の 6.74 倍）だと幅が広がるほど下へ伸びる。
       441px で .recommend の高さを超え、767px では 2396px もはみ出していた。
       雲は z-index:-1 だが .recommend 自体が z-index:5 でスタッキングコンテキストを
       作るため、はみ出した白が募集要項セクションのオレンジ背景と見出しを覆っていた。

       inset() の上を大きな負値にして上方向（ヒーローへの張り出し）は残しつつ、
       下だけ 0 ＝ボーダーボックスの下端ちょうどで切る。
       375px 実測では雲の下端 1719px < .recommend 2013px でそもそも収まっているため、
       デザイン幅での見え方は変わらない。 */
    clip-path: inset(-9999px 0 0 0);
}
/* Cloud graphic — extends up into the hero's bottom area.
   z-index:-1 is scoped to .recommend's isolated stacking context, so the
   cloud paints behind everything in .recommend AND, because .recommend
   itself sits at z:auto in the root (below hero's z:3-4 positioned children),
   the cloud also renders behind the mascot where it visually overlaps. */
.recommend::before {
    content: '';
    position: absolute;
    /* PC/タブレット用の雲の縦位置。SP は @media (max-width: 767px) 側で上書きするため、
       SP の調整でこの値を触らないこと（-700px にすると PC で雲が 180px 高くなり、
       マスコットの噴射炎と CTA ボタンの上に白がかぶる）。 */
    top: -520px; /* how far the cloud reaches up into .hero above */
    left: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1440 / 1232; /* preserves cloud SVG proportions (viewBox 1440x1232) */
    background: url('../assets/pc/recommend-cloud.svg') center top / 100% auto no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Intro block (was .intro section, now a nested block inside .recommend) */
.intro {
    position: relative;
    z-index: 2;
    background: transparent;
}
.intro__inner { position: relative; }

/* Challenges block inside .recommend — override .section's own padding since parent handles it.
   padding-top sets the visual gap between the .intro paragraph and the challenges
   heading; .section's own 50px was too tight. Tune this single value to adjust it. */
.recommend .challenges-inner {
    max-width: none;
    padding-top: 100px;
}
.intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto -200px; /* margin-bottom:-200 reclaims the space transform pushed down */
    transform: translateY(-200px); /* visual upward nudge */
}
.intro__summary { max-width: 720px; }
.intro__headline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    align-items: flex-start;
}
.intro__text {
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    color: var(--c-text);
}
/* Intro badges — now a single composite SVG (intro-badge.svg) instead of three
   CSS-drawn circles. Simple centering + responsive scaling. */
.intro__badges {
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro__badges img {
    width: 100%;
    max-width: 453px;
    height: auto;
    aspect-ratio: 453 / 419;
}
.gradient-bar {
    display: inline-block;
    align-self: flex-start;
    background: var(--grad-warm);
    color: var(--c-white);
    font-size: 39px;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.8;
    padding: 4px 24px;
    border-radius: 10px;
}
/* PC/tablet: 2 wide pills (--pc variant). SP media query flips these. */
.gradient-bar--sp { display: none; }
/* Hero CTA row — Figma Frame 2899: flex row, gap 24, centered, 764x81.
   translateY(-20px) visually lifts the CTA WITHOUT shrinking .hero's height,
   so the .recommend section (and its cloud) stays put. Using margin-top for
   the offset would reflow the layout below.
   z-index:6 keeps the CTA buttons above the cloud (z:5). */
.hero__cta {
    position: relative;
    z-index: 6;
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 24px;
    transform: translateY(-120px);
}
/* Hero + Closing CTA button sizing — same Figma spec: primary 390x81
   (padding 27x112, gap 16), secondary 350x81 (gap 8). */
.hero__cta .btn--lg,
.closing-cta .btn--lg {
    padding: 27px 112px;
    min-height: 81px;
    line-height: 1.5; /* 27px at 18px font — matches Figma text height */
}
.hero__cta .btn--primary,
.closing-cta .btn--primary { gap: 16px; }
.hero__cta .btn--secondary { gap: 8px; }
.hero__cta .btn__icon,
.closing-cta .btn__icon { width: 24px; height: 24px; }

/* ---------- Section base ---------- */
.section {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px var(--gutter);
}
/* Wrapper for FAQ → apply form → terms sections. Gray background fills the
   section body; wave SVG pseudo-elements paint the transition edges above
   and below, connecting the band's gray to the adjacent white sections. */
.gray-band {
    position: relative;
    background: var(--c-bg-soft);
    /* 上の波（::before）は absolute で帯の外側へ出るぶん、レイアウト上の高さを
       持たない。そのため margin-top が 0 だと波が手前のセクション（応募の流れ）に
       約45px 食い込む。帯ごと下げて、波の上端が前セクションの本文と重ならない
       ようにする。数値は「波の高さ 95px（1440px 時）＋余白」の目安。 */
    margin-top: 100px;
}
.gray-band::before,
.gray-band::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    aspect-ratio: 1440 / 95; /* matches wave portion aspect; height scales with width */
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
}
.gray-band::before {
    top: 0;
    transform: translateY(calc(-100% + 1px)); /* shift up by height minus 1px; overlaps .gray-band by 1px to prevent subpixel rendering gaps */
    background-image: url('../assets/common/wave-top.svg');
    background-position: center top;
}
.gray-band::after {
    bottom: 0;
    transform: translateY(calc(100% - 1px)); /* shift down by height minus 1px; overlaps .gray-band by 1px */
    background-image: url('../assets/common/wave-bottom.svg');
    background-position: center bottom;
}
.section__head { margin-bottom: 48px; text-align: center; }
.section__head h2 {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}
.section__lead { font-size: 18px; font-weight: 700; }
.section__lead--accent { color: var(--c-orange); }

/* Decorated section headings (icons flanking title) */
.section__head--decorated {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 32px;
    row-gap: 8px;
}
/* Flex row rather than normal inline flow: the 71px .accent-num is an inline-block
   sitting on the 46px text's baseline, so it stretched the h2's line box far above
   the baseline and barely below it. That made the h2's box top-heavy, and the grid
   centred the flanking icons against that lopsided box instead of the text.
   Centring every part on its box midpoint keeps the row symmetric. */
.section__head--decorated h2 {
    margin: 0;
    /* 「支援する4つの挑戦」だけは 46px（他セクションの見出しは 32px）。
       .accent-num の 71px はこの 46px と対で調整された値のため、両者は一緒に扱うこと。
       SP は後方の @media 内 .section__head h2（20px）が同詳細度・後勝ちで上書きする。 */
    font-size: 46px;
    grid-column: 2;
    display: flex;
    align-items: baseline;   /* 「4」 keeps sitting on the text baseline, as in Figma */
    justify-content: center;
    line-height: 1.2;
}
.section__head--decorated .section__lead {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 8px;
}
.section__deco {
    width: 100px;
    height: auto;
    align-self: center;       /* explicit vertical center against h2 grid cell */
    vertical-align: middle;   /* correct <img>'s default baseline alignment */
    /* Baseline-aligned 「4」 makes the h2 box taller above the text than below it,
       so plain centring lands the icons high. Nudge them down onto the text's
       optical centre. Tune this single value if the heading size changes. */
    margin-top: var(--deco-offset, 10px);
}
.section__deco--left { justify-self: end; }
.section__deco--right {
    justify-self: start;
    /* No transform — right deco renders in the SVG's authored orientation
       (matches Figma direction per QA feedback 波線アイコンの向きが違う). */
}
.section__head--on-orange .section__deco { filter: brightness(1.1); }

.accent-num {
    display: inline-block;
    /* Figma: Color/Primary/BlazeOrange/500 (= --c-orange)。
       以前はグラデーション（--grad-warm）を背景に敷いて text へクリップしていたが、
       単色指定に変更したため background-clip / text-fill-color ごと削除している
       （text-fill-color: transparent が残ると color が無視され文字が消える）。 */
    color: var(--c-orange);
    font-size: 71px;   /* absolute size — accent numeral stands taller than surrounding h2 text */
    line-height: 1;    /* box height tracks the glyph, so centring is exact */
    margin: 0 4px;
}

/* 背景は幾何学パターン（円・角丸・矩形）で上下が波形に切り抜かれた PNG。
   background-size: 100% 100% は縦横比を無視して枠に押し込むため、セクションの
   縦横比が画像（1440×1134）と離れるほど円が楕円に潰れる。441〜767px の帯では
   横倍率が 0.3〜0.5 に対し縦倍率が 1.2 前後となり、明確に壊れて見えていた。

   cover は縦横同倍率で「両辺を覆う最小倍率」を選ぶため、円は真円のまま保たれる。
   このセクションは常に画像より縦長（表10行＋見出し＋padding）なので、倍率は必ず
   高さ側で決まり、上下の波形はセクションの上下端にぴったり一致する。
   はみ出すのは左右で、パターン柄なので切り落とされても成立する。
   背景色は画像の読み込み前後に白地が覗かないための保険。 */
/* 背景は幾何学パターン（円・角丸・矩形）を上下波形に切り抜いた PNG。

   768px 以上（PC）は 100% 100%。この幅では画像 1440x1134 とセクションの縦横比が
   近く、引き伸ばしても柄の歪みが目立たないうえ、上下の波形が確実に端へ一致する。
   100% auto にすると高さが 1134px 固定になり、セクションが 1400px 前後あるため
   下に地色（白）が出てしまう。

   767px 以下は下の @media を参照。縦長の SP 画像を 100% auto で使い、
   柄を歪ませずに 375px の絵柄をそのまま拡大する。

   ショートハンドではなく longhand で書く。background ショートハンドに var() を
   混ぜると、置換後の値が解釈できなかった場合に宣言ごと無効になるため、
   個別指定にして影響範囲を切り分けられるようにしている。

   background-color は敷かないこと。この PNG は RGBA で、上下の波形は
   「白く塗られている」のではなく透明に抜けている（1行目のα値はほぼ 0）。
   背景色を敷くと切り欠きが塗り潰され、波形が消えてただの矩形になる。
   透明部分から透けるのはページの地色で、それが本来の見え方。 */
.section--orange-bg {
    background-image: url('../assets/pc/section-orange-bg.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: var(--c-white);
    margin-top: 50px;      /* 直前の .recommend との間隔（波形の上端を詰まらせない） */
    padding-top: 150px;    /* extra space so the wavy top edge doesn't crowd the heading */
    padding-bottom: 160px; /* extra space so the wavy bottom edge doesn't crowd the table */
}
.section--orange-bg .section__head h2 { color: #333333; }
.section--orange-bg .section__lead { color: #333333; }

/* ---------- Requirements table ---------- */
.req-table {
    width: 100%;
    max-width: var(--content-narrow-w);
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--c-white);
    color: var(--c-text);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.req-table th, .req-table td {
    padding: 18px 24px;
    border-bottom: 1px solid var(--c-line-strong);
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
}
.req-table tr:last-child th, .req-table tr:last-child td { border-bottom: 0; }
.req-table th {
    width: 240px;
    padding: 0 24px;
    background: var(--c-yellow-pale);
    color: var(--c-text);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    /* PC は左寄せ（上の共通ルールの text-align: left をそのまま使う）。
       SP のみ @media (max-width: 767px) 側で中央寄せに上書きする。 */
    border-bottom-color: var(--c-white);
}
.req-table td {
    padding: 16px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--c-text-sub);
}
.req-table td small {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--c-text-mute);
}
.chip {
    display: inline-flex;
    align-items: center;
    /* 横 padding は 4px。元の 8px では「解決する」カードの3チップ（ツール課金／
       API利用料／実費）合計が 209.7px となり、カード内幅 207px を 2.7px 超えて2行に
       折り返していた。4px まで詰めると合計 181.7px、余裕 +25px となり、PC だけでなく
       タブレット幅（2カラムでカードが細くなる領域）でも1行を保てる。
       これ以上詰める場合は padding ではなく font-size を触ること（可読性の下限）。 */
    padding: 4px 4px;
    /* Figma: Color/Primary/BlazeOrange/500 (= --c-orange)。枠線・文字とも同色。 */
    border: 1px solid var(--c-orange);
    border-radius: 4px;
    color: var(--c-orange);
    font-size: 12px;
    font-weight: 700;
    background: var(--c-white);
    line-height: 1.4;
}
/* Figma: W111 × H40 / padding 8px 16px / radius 4px / gap 10px（PC・SP375 共通）。
   box-sizing: border-box なので width / height は padding を含む外形。
   H40 の内訳は padding 8px×2 ＋ 行高 24px（font-size 14px × line-height 1.7）。
   W111 は Figma のオートレイアウトが文字幅 79px を hug した結果の値。固定幅にすると
   フォント未読込などで文字が 79px を超えたときにはみ出すため、中央寄せ＋折り返し無しで
   崩れ方を穏やかにしている。
   margin-right の 10px はバッジと後続テキスト「を給付（…）」の間隔で、Figma の
   フレーム内 gap とは別物。 */
.chip--orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 111px;
    height: 40px;
    padding: 8px 16px;
    background: var(--c-orange);
    color: var(--c-white);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    margin-right: 10px;
}
/* Date badge chip — used standalone (not with base .chip), so all properties
   must be self-sufficient. Matches Figma: 6px 16px padding, 1px orange border,
   yellow-bg fill, 15px bold orange text. */
.chip--period {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    background: var(--c-yellow-bg);
    border: 1px solid #FFB854;
    border-radius: 6px;
    color: var(--c-orange);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
/* gap 6px（旧 8px）。3チップのカードを1行に収めるための横幅確保。 */
/* PC は display:contents。ラベルの margin-top/-bottom による余白調整（下参照）が
   .challenge の gap と噛み合う従来の作りをそのまま残す。 */
.challenge__uses { display: contents; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* ---------- Challenges ---------- */
/* カード幅は Figma 実測の 273px 固定。4列 × 273px + gap 24px × 3 = 1164px。
   .challenges-inner は .section が .recommend 内で入れ子になっているため左右
   padding が二重に効き、内側の使用可能幅は 1440px 時で約 979px しかない。
   そのため列は意図的に自身のボックスをはみ出すが、justify-content: center に
   より左右均等にはみ出すので、カードは 1440px 時に left 138px（=(1440-1164)/2）
   と Figma の座標に一致する。1200px〜では横スクロールは発生しない。
   ※ここを 1fr に戻すと Figma 指定の 273px 固定幅が崩れる。 */
.challenges__grid {
    display: grid;
    grid-template-columns: repeat(4, 273px);
    justify-content: center;
    gap: 24px;
    align-items: stretch; /* equal card height */
    max-width: 1200px;
    margin: 0 auto;
}
/* Figma: Frame 2900（273×486） */
.challenge {
    width: 273px;
    height: 486px;
    background: var(--c-yellow-bg);
    border: 1px solid var(--c-orange);
    border-radius: 128px 128px 40px 40px;
    padding: 72px 32px;
    text-align: center;
    display: flex;
    flex-direction: column; /* stack children so mt:auto works on the last one */
    align-items: flex-start;
    gap: 16px;
}
/* Figma の子要素は「fill container」（align-self: stretch）指定のため、
   親の flex-start で幅が縮まないよう明示的に全幅にする。 */
.challenge > * { width: 100%; }
/* チップスは下端固定にしない。カードごとにチップスの行数が違う（c3・c4 は1行、
   c1・c2 は2行）ため、下端固定にすると「使いみちの例」との間隔がカードごとにズレる。
   ラベル直後に流すことで4枚ともラベル位置・チップス開始位置が揃い、
   余白はカード下端にまとまる。 */
.challenge__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.challenge__kanji {
    font-size: 50px;
    font-weight: 700;
    background: var(--grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}
.challenge__label {
    font-size: 28px;
    font-weight: 700;
    background: var(--grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.4;
}
/* 子要素の縦間隔は .challenge の gap: 16px が担うため margin-bottom は持たせない */
.challenge__sub {
    font-size: 15px;
    font-weight: 700;
}
/* 「使いみちの例」以下の位置を4枚で揃えるには desc の行数が全カードで一致して
   いる必要がある。14px では c3（解決する）だけ4行になり 486px も 21px 超過する
   ため 13px にして全カード3行に統一する。
   min-height は3行分を確保し、文言が短いカードでもラベル位置がずれないようにする。 */
.challenge__desc {
    font-size: 13px;
    color: var(--c-text-sub);
    text-align: left;
    min-height: calc(3 * 1.7em); /* 1.7 は body から継承する line-height */
}
.challenge__uses-label {
    font-size: 12px;
    color: var(--c-text-sub);
    text-align: center;
    /* Offsets against .challenge's shared gap: 16px, so the label sits further
       from the description above but stays tight to the chips below.
       Effective: 24px above (16 + 8), 8px below (16 - 8). */
    margin-top: 8px;
    margin-bottom: -8px;
}
.challenges__note {
    max-width: 1200px;
    margin: 42px auto 0;
    padding: 0 20px;  /* keep text from hugging viewport edges on narrower widths */
    font-size: 14px;
    color: var(--c-text-sub);
    text-align: center;
}

/* ---------- Flow ----------
   Card-style wrapper per Figma (log_member_PC frame): padding, shadow, radius. */
.flow {
    max-width: var(--content-narrow-w);
    margin: 0 auto;
    padding: 0;
    position: relative;
}
.flow__step {
    display: flex;
    gap: 52px; /* Figma: number-column to body-column */
    align-items: flex-start;
    /* 左右パディングなし。本文カラムが Figma の 729px になる幅配分
       （.flow 880 − .flow__num 99 − gap 52 = 729）。下は各ステップ間の余白。 */
    padding: 0 0 36px;
    position: relative;
}
.flow__step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 90px;     /* aligned with dot center: 91px to dot center - ~1px half of line */
    top: 33px;      /* starts at dot bottom (dot spans y=17-33 within .flow__num) */
    bottom: -17px;  /* extends into next step by 17px to meet its dot top */
    width: 3px;
    background: #FFB890;
    border-radius: 3px;
}
.flow__num {
    position: relative;
    display: flex;
    align-items: center;
    gap: 53px; /* Figma: number to dot */
    flex-shrink: 0;
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    width: 99px;
    background: var(--grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.flow__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--grad-warm);
    display: inline-block;
    -webkit-text-fill-color: initial;
}
.flow__body { flex: 1; padding-top: 6px; }
.flow__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 12px;
    width: 729px;  /* Figma */
}
.flow__body h3 { font-size: 18px; font-weight: 700; }
.flow__body p { font-size: 14px; color: var(--c-text-sub); }

/* ---------- FAQ ---------- */
/* FAQ はグレー帯（.gray-band）の先頭セクション。上に余白を足すのに margin-top は
   使えない：.gray-band は padding も border も持たないため子の上マージンが
   突き抜けて（マージン相殺）、帯の中に余白ができる代わりに帯ごと下へずれてしまう。
   padding-top なら相殺が起きず、グレーの内側に余白が入る。
   .section の既定 50px に上乗せして 100px。 */
#faq.section { padding-top: 70px; }

.faq__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: var(--content-narrow-w);
    margin: 0 auto;
}
/* Figma（PC 1440px）実測値:
     width 282.6666564941406 / height 208 / border-width 1px / radius Radius/primary
   width は .faq__grid（max-width 880px・3列・gap 16px）から
   (880 - 16×2) / 3 = 848 / 3 = 282.6667px が自動的に導かれるため、
   トラック側に固定値は書かない（880px を変えれば追従する）。
   height は box-sizing: border-box のため上下 border 1px を含む 208px。
   高さ固定は 1440px デザイン専用のため、@media (max-width: 1199px) で auto に戻す。 */
.faq__item {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-primary);
    overflow: hidden;
}
/* FAQ items render as always-expanded panels: dropdown affordances
   (+/- marker, pointer cursor) are hidden so the UI reads as static Q&A. */
/* Figma（PC 1440px）質問ボックス実測値:
     width 282.6666564941406 / height 80 / gap 10px
     padding-left・right 24px（上下 padding なし）/ border-bottom-width 1px
   上下 padding を 0 にできるのは height 80px 固定＋align-items: center で
   1行・2行どちらの質問も垂直中央に揃うため。旧 min-height: 100px は撤去。 */
.faq__item summary {
    list-style: none;
    background: var(--c-orange-lt);
    color: var(--c-white);
    padding: 20px 24px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    gap: 10px;
    align-items: center;      /* vertical-center so 1-line and 2-line headers read uniformly */
    border-bottom: 1px solid var(--c-line);
    cursor: default;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { color: var(--c-white); font-weight: 700; }
/* Figma（PC 1440px）回答ボックス実測値:
     width 282.6666564941406 / height 128 / gap 10px / padding 16px 24px
   height は 126px（＝128 - 2）にしている。Figma は stroke がレイアウトを侵食しない
   モデルなので「質問80 + 回答128 = カード208」で辻褄が合うが、CSS は
   box-sizing: border-box のためカード 208px から上下 border 1px×2 を引いた 206px が
   子の使える高さになる。206 - 質問80 = 126。カード外形 208px を Figma 通りに保つ側を
   優先し、差分 2px は回答ボックスで吸収している（calc で導出を残す）。 */
.faq__item p {
    padding: 16px 24px;
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: var(--c-text-sub);
    line-height: 1.7;
}
.faq__a { color: var(--c-orange-lt); font-weight: 700; }

/* ---------- Application form ---------- */
.app-form {
    max-width: var(--content-narrow-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
/* 送信完了後（scholarship.js が .is-submitted を付与）はフォーム本体を隠し、
   完了メッセージ（.apply-done）だけを残す。
   .apply-done はカードの内部にあるため、フォーム全体に display:none を当てると
   完了メッセージまで消える。そのため「完了メッセージを含まないもの」を対象にする。

   グループ（h3＋カード）ごと隠すのが要点。カードの中身だけを隠すと、
   .app-form__card の白背景・角丸・影が空のまま残り、白い帯が見えてしまう
   （基本情報グループは完了後に表示するものが1つも無いため）。 */
.app-form.is-submitted .app-form__group-title,
.app-form.is-submitted .app-form__card > *:not(.apply-done) {
    display: none;
}
/* :has() は上のリストに混ぜない。セレクタリストは1つでも解釈できないものがあると
   ルール全体が無効になるため、混ぜると :has() 非対応ブラウザで
   「送信後もフォームが丸ごと残る」という重い壊れ方をする。
   単独ルールにしておけば、落ちても白い帯が残るだけで済む。 */
.app-form.is-submitted > div:not(:has(.apply-done)) {
    display: none;
}
/* Figma「log_member_PC」: 完了状態のカードは padding 8px（通常の 48px から縮む）。 */
.app-form.is-submitted .app-form__card { padding: 8px; }

.app-form__group-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-form__group-title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/common/icon-flag.svg') center / contain no-repeat;
    flex-shrink: 0;
}
.app-form__card {
    background: var(--c-white);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.app-form__row {
    display: grid;
    gap: 16px;
}
.app-form__row--2 { grid-template-columns: 1fr 1fr; }
.app-form__row--3 { grid-template-columns: 1fr 1fr 200px; }

.field { display: flex; flex-direction: column; gap: 8px; }
/* Figma「form fields」プレースホルダー: Noto Sans JP / Regular 400 / 13px /
   line-height 150% / letter-spacing 0%。
   ・font-family は body の Noto Sans JP を継承するため再指定しない。
   ・letter-spacing 0% は CSS 既定の normal と同値なので指定しない。
   ・leading-trim: NONE は Figma 固有のプロパティで、CSS 側に対応する指定は不要。
   入力済みテキストは .field input の font: inherit（14px / line-height 1.7）のまま。
   Figma が寸法を出しているのはプレースホルダーの行だけで、13px を input 側へ
   下ろすと入力値・日付ピッカー・文字数カウンタまで一段小さくなるため。
   line-height が効くのは textarea で、単一行の input はブラウザが縦中央に
   置くため見た目は変わらない（仕様どおりの値を残す意味で明示している）。 */
.field input::placeholder,
.field textarea::placeholder {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    /* Browsers default to a darker gray; align to the design token */
    color: var(--c-placeholder);
    opacity: 1;  /* Firefox defaults to 0.54; force full color at declared value */
}
/* 生年月日 — a single text field with a hand-rolled Japanese calendar.
   A native <input type="date"> was dropped because Chrome renders its picker in
   the browser's UI language, which the page cannot override. */
.datepicker-wrap { position: relative; }
.datepicker-wrap input { padding-right: 44px; }
.datepicker__toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    cursor: pointer;
}
.datepicker__toggle:hover { background-color: var(--c-bg-soft); }
.datepicker__toggle:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

.datepicker {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    width: 288px;
    max-width: 100%;
    padding: 12px;
    background: var(--c-white);
    border: 1px solid var(--c-line-strong);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(36, 41, 47, 0.16);
}
.datepicker[hidden] { display: none; }
.datepicker__head { display: flex; gap: 8px; margin-bottom: 8px; }
.datepicker__head select {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--c-line);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--c-text);
    background: var(--c-white);
}
.datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepicker__weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-mute);
}
.datepicker__weekday.is-sun { color: var(--c-error); }
.datepicker__weekday.is-sat { color: var(--c-error); }
.datepicker__day {
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--c-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.datepicker__day:hover { background: var(--c-yellow-bg); }
.datepicker__day.is-selected {
    background: var(--c-orange-lt);
    color: var(--c-white);
    font-weight: 700;
}
.datepicker__day:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -2px; }
/* 満18歳に届かず選べない日（scholarship.js が disabled と is-ineligible を付与）。
   数字は残したまま淡くして、押せないことを見て分かるようにする。 */
.datepicker__day:disabled {
    color: var(--c-text-mute);
    opacity: .4;
    cursor: default;
}
.datepicker__day:disabled:hover { background: transparent; }
.field--narrow { width: 180px; max-width: 100%; }
.field--narrow input {
    height: 48px;
    padding: 0 15px;
    border-radius: 4px;
}
.field--narrow input::placeholder {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-placeholder);
}
.field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-mid);
    display: flex;
    align-items: center;
    gap: 8px;
}
.req {
    display: inline-block;
    padding: 2px 6px;
    background: var(--c-orange-lt);
    color: var(--c-white);
    font-size: 10px;
    font-weight: 700;
    border-radius: 2px;
}
.field input, .field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    font: inherit;
    color: var(--c-text);
    background: var(--c-white);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(32, 66, 255, 0.15);
}
.field small {
    font-size: 11px;
    color: var(--c-text-mid);
    line-height: 1.5;
}
/* ----- Error state -----
   Two variants, mirroring the two reference screens:
   1. Short inputs  (会員情報変更画面): red border + pale fill, plain red message.
   2. Long text     (選考体験記):      the above, plus a red label, a ▲ mark on the
                                       message, and the counter on the same row. */
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid .usage-table__row input {
    border-color: var(--c-error);
    background: var(--c-error-bg);
}
/* The calendar popup keeps its own chrome even while the field is in error. */
.field.is-invalid .datepicker { background: var(--c-white); }
.field__error {
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-error);
    display: none;
}
.is-invalid .field__error { display: block; }

/* エラー時はラベルを赤にする。以前は .field--long（テキストエリア）だけが対象で、
   氏名・メールアドレス・使う予定のテクノロジー名などの1行入力は黒のままという
   不統一があったため、.field 全体に適用してフォーム内で挙動を揃えた。
   以前は .field__error::before に警告アイコン（赤い三角の data URI SVG）を出していたが
   撤去した。アイコン用の領域確保だった position: relative / padding-left: 20px も
   併せて削除しているため、メッセージは他フィールドと同じ左端から始まる。 */
.field.is-invalid > label { color: var(--c-error); }

/* Message on the left, character counter pinned right, on one line. */
.field__foot {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.field__foot .char-counter {
    margin-top: 0;
    margin-left: auto;  /* stays right-aligned even while the error is hidden */
    flex-shrink: 0;
}

/* Consent block reuses the short-input error treatment. */
.agree { position: relative; }
.agree.is-invalid .field__error { margin-top: 4px; }

/* Character counter turns red once the maximum length is reached. */
.char-counter.is-max { color: var(--c-error); font-weight: 700; }

.radios { display: flex; gap: 12px; flex-wrap: wrap; }
.radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px 10px 16px;
    border-radius: 9999px;
    border: 1px solid var(--c-line);
    background: var(--c-white);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-mid);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
/* Visually hide native radio input but keep it accessible for keyboard/screen readers */
.radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* Custom dot indicator */
.radio::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--c-line);
    background: var(--c-white);
    flex-shrink: 0;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
/* Checked state — pill turns blue, dot fills with white ring around blue center */
.radio:has(input:checked) {
    background: var(--c-blue);
    color: var(--c-white);
    border-color: var(--c-blue);
}
.radio:has(input:checked)::before {
    background: var(--c-white);
    border-color: var(--c-white);
    box-shadow: inset 0 0 0 4px var(--c-blue);
}
/* Keyboard focus ring */
.radio:has(input:focus-visible) {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}

.usage-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* margin-bottom は持たせない。.field は gap: 8px で子を並べており、ここに
       margin を足すとエラー文言だけ 20px 下がって他の項目（8px）と揃わなくなる。
       行どうしの間隔は上の gap: 12px が担う。 */
}
/* 使いみちのエラー文言だけ下に 8px 足す。表の直後に出る文言と「＋行を追加」ボタンが
   .field の gap: 8px だけでは近く、エラーがボタンの見出しのように見えるため。
   .field__error は非表示時 display: none なので、エラーが出ていないときの
   表とボタンの間隔（8px）は変わらない。 */
.usage-table + .field__error { padding-bottom: 8px; }
.usage-table__fields { display: contents; }   /* PC は従来の 3 カラムグリッドをそのまま使う */
.usage-table__head, .usage-table__row {
    display: grid;
    /* 3rd column holds the per-row remove button (header leaves it empty). */
    grid-template-columns: 1fr 280px 40px;
    gap: 16px;
}
.usage-table__head {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-mid);
}
/* Per-row field labels. On PC the .usage-table__head row already names the two
   columns, so these are hidden visually but kept for screen readers — the inputs
   had no <label> at all before, only placeholders. The SP block reveals them.
   position:absolute also takes them out of grid flow, so the PC
   1fr / 280px / 40px track assignment is unaffected. */
.usage-table__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.usage-table__row input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--c-line);
    border-radius: 4px;
    font: inherit;
}
.usage-table__row input:focus {
    outline: none;
    border-color: var(--c-blue);
}
.usage-table__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--c-line-strong);
    border-radius: 4px;
    background: var(--c-white);
    color: var(--c-text-mute);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}
.usage-table__remove:hover:not(:disabled) {
    color: var(--c-red);
    border-color: var(--c-red);
    background: var(--c-white);
}
.usage-table__remove:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}
.usage-table__remove:disabled {
    opacity: .35;
    cursor: not-allowed;
}
/* Notice shown when the row limit is reached. */
.usage-table__limit {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--c-text-mute);
}
.usage-table__limit[hidden] { display: none; }

.char-counter {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--c-text-mute);
    margin-top: 4px;
}
.agree {
    background: var(--c-bg-soft);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.agree__lead {
    font-size: 13px;
    color: var(--c-text-mid);
    margin: 0 0 4px;
}
/* Figma PC: 390×81 / gap 16px / radius max / padding 27px 112px。
   高さは min-height ではなく height。81 = padding 27×2 + 行ボックス 27px で、
   Figma 側は1行前提の固定値。.btn は align-items: center なので、行ボックスが
   27px でなくても中央に収まる。
   左右 padding だけ Figma の 112px を採らず 32px にしている。112px は
   .hero__cta / .closing-cta の CTA（同じ 390×81 だがラベルは「応募フォームへ」
   7文字）から来た値で、390 − 112×2 = 166px の内容領域はそちらのアイコン24 +
   gap16 + ラベル126px にちょうど合う。この送信ボタンはラベルが
   「全てに同意の上、入力内容を送信」15文字＝約210px あり、166px では2行に
   割れて height: 81px からはみ出す。幅が 390px 固定である以上、左右 padding は
   中央寄せの下限として働くだけなので、狭い側で潰れない値に留めている。
   gap 16px は宣言しない。このボタンはアイコンを持たず子が1つしかないため、
   gap が効く余地がない（.btn 既定の 8px のままでも描画は同じ）。
   radius は .btn の 9999px が「Scale/max」に該当するので再指定しない。 */
.btn--sm-submit {
    align-self: center;
    width: 390px;
    max-width: 100%;
    height: 81px;
    padding: 27px 32px;
    font-size: 14px;
}
.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--c-text);
    cursor: pointer;
}
.check input { width: 20px; height: 20px; accent-color: var(--c-blue); }
/* 必須入力欄が埋まるまで同意チェックは操作不可（scholarship.js が .agree へ .is-disabled を付与）。
   押せないことを見た目でも示すためグレーアウトする。 */
.agree.is-disabled .check {
    color: var(--c-text-mute);
    cursor: not-allowed;
}
.agree.is-disabled .check input {
    accent-color: var(--c-text-mute);
    cursor: not-allowed;
}
/* 規約・個人情報保護方針へのリンクはチェック不可の状態でも開けるようにする。 */
.agree.is-disabled .check a { cursor: pointer; }

/* Figma「Frame 2925」: 応募完了メッセージ。.is-submitted が付くまで非表示。 */
.apply-done {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 16px;
    background: var(--c-yellow-bg);
    border-radius: 8px;
    text-align: center;
}
.app-form.is-submitted .apply-done { display: flex; }
.apply-done__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-orange);
}
.apply-done__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
}
.check a { color: var(--c-blue); text-decoration: underline; }

/* ---------- 募集終了の案内 ----------
   Figma（PC 1440px）実測値:
     width 880 / height 175 / gap 24px / padding 8px / border-radius Scale/16px
   width は .app-form と同じ 880px（--content-narrow-w）。
   色・書体の指定がなかったため、送信完了ブロック（.apply-done）と同じ配色・
   タイポグラフィを流用している。
   高さ 175px 固定は 880px 幅（＝PC）専用。SP は列幅が狭く行数が増えるため
   @media (max-width: 767px) 側で auto に戻す（切れると本文が読めなくなる）。 */
/* 外枠：Figma 880×175 / gap 24px / padding 8px / radius Scale-16px。
   背景を白にし、8px の padding をそのまま白フチとして見せる（1px の border では
   なく余白で作るフチなので、border は持たせない）。 */
.apply-closed {
    display: none;
    flex-direction: column;
    gap: 24px;
    width: var(--content-narrow-w);
    height: 175px;
    margin: 0 auto;
    padding: 8px;
    background: var(--c-white);
    /* Figma「shadow01」= 0px 2px 24px rgba(36,41,47,0.05)。--shadow-card と同値。
       送信完了側の外枠（.app-form__card）は元から同じ影を持っている。 */
    box-shadow: var(--shadow-card);
    border-radius: 16px;
}
/* 内側パネル：Figma 864×159（＝外枠から padding 8px×2 を引いた値）。
   数値を直書きせず 100% で追従させ、外枠を変えてもズレないようにする。
   高さ 159px − 上下 padding 24px×2 ＝ 本文領域 111px は、
   タイトル 24px ＋ gap 24px ＋ 本文3行 63px ＝ 111px とちょうど同値。 */
.apply-closed__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* 高さ固定なので中身を垂直中央に置く */
    gap: 24px;
    width: 100%;
    height: 100%;
    padding: 24px 16px;
    background: var(--c-yellow-bg);
    border-radius: var(--radius-secondary-middle);
    text-align: center;
}
/* 募集終了時は案内を出し、応募フォームを隠す。 */
#apply.is-closed .apply-closed { display: flex; }
#apply.is-closed .app-form { display: none; }
/* ただし送信完了カードは募集終了の見た目より優先する。.apply-done は
   .app-form の内側にあるため、上の display:none が完了カードごと巻き添えで
   消してしまう。締切直前に送信して締切後に戻ってきた応募者に
   「募集は終了しました」だけを見せると、応募が失敗したように読めてしまう。
   .app-form.is-submitted は自身の子（.apply-done 以外）を既に隠しているので、
   フォームを表示に戻しても出るのは完了カードだけ。 */
#apply.is-closed .app-form.is-submitted { display: block; }
#apply.is-closed:has(.app-form.is-submitted) .apply-closed { display: none; }
.apply-closed__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-orange);
}
.apply-closed__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
}
/* SP でだけ改行させる <br>。PC では改行しない。 */
.br-sp { display: none; }

/* ---------- Terms ---------- */
.terms-card {
    max-width: var(--content-narrow-w);
    margin: 0 auto 16px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 16px;
    overflow: hidden;
}
/* 応募規約・個人情報保護方針は <details> によるドロップダウン。
   FAQ (.faq__item) は常時展開の静的パネルとして開閉の affordance を消しているが、
   こちらは実際に開閉させるため、ネイティブマーカーを消したうえで独自マーカーを出す。 */
.terms-card__head {
    background: var(--c-yellow-pale);
    padding: 22px 48px;
    font-weight: 700;
    font-size: 15px;
    list-style: none;            /* Firefox の三角マーカーを消す */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}
.terms-card__head::-webkit-details-marker { display: none; }
/* 右端の V 字マーカー。閉じている間は下向き、開くと上向きに反転する。 */
.terms-card__head::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--c-orange-lt);
    border-bottom: 2px solid var(--c-orange-lt);
    transform: translateY(-25%) rotate(45deg);
    transition: transform .2s ease;
}
.terms-card[open] .terms-card__head::after {
    transform: translateY(25%) rotate(-135deg);
}
.terms-card__body { padding: 40px 48px; }
/* 個人情報保護方針は「方針」「個人情報の取扱いについて」「お問合せ先」の3ブロックに
   分かれ、その中に番号付きの節（h4）が並ぶ。h4 の一段上の見出しとして h3 を使う。 */
.terms-card__body h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 36px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-line);
}
.terms-card__body h3:first-child { margin-top: 0; }
.terms-card__body h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 24px 0 10px;
}
.terms-card__body h4:first-child { margin-top: 0; }
.terms-card__body p {
    font-size: 14px;
    color: var(--c-text-sub);
    line-height: 1.7;
}
/* リセットで p の margin を 0 にしてあるので、連続する段落の間隔はここで作る。 */
.terms-card__body p + p,
.terms-card__body ul + p { margin-top: 10px; }
/* 「（1）応募者等から提供される情報」のような節内の小見出し。h5 は使わず
   p のバリアントにして、見出しレベルの階層を h3 / h4 の2段に留める。 */
.terms-card__body .terms-sub {
    margin: 18px 0 6px;
    font-weight: 700;
    color: var(--c-text);
}
.terms-card__body .terms-sub:first-child { margin-top: 0; }
.terms-card__body .terms-sub + p,
.terms-card__body .terms-sub + ul { margin-top: 0; }
/* 「（1）…」のような小見出しにぶら下がる本文は、箇条書き・段落のどちらでも
   見出しの数字の位置まで下げて親子関係を見せる。1em は全角括弧「（」1文字分で、
   これを送ると本文の頭が見出しの「1」の真下に来る。
   （1）が段落・（2）が箇条書きというように形式が混在するため、両方に同じ字下げを
   かけないと同じ階層の本文どうしで左端がずれる。
   h4 直下の本文は親が数字持ちの小見出しではないので下げない。 */
.terms-card__body .terms-sub + p,
.terms-card__body .terms-sub + ul.terms-bullets { padding-left: 1em; }
/* 制定日と制定者の記名。原本の署名欄と同じく右寄せで揃え、制定日だけ太字にする。 */
.terms-card__body .terms-sign {
    margin-top: 28px;
    font-weight: 700;
    color: var(--c-text);
    text-align: right;
}
.terms-card__body .terms-sign__names {
    margin-top: 4px;   /* 制定日の直下に置くため p + p の 10px を上書きする */
    text-align: right;
}
/* 段落内で見出しの役割を持つ語（「個人情報または方針についてのお問合せ先：」など）は
   .terms-sub と同じ濃さに揃える。 */
.terms-card__body p strong { color: var(--c-text); }
/* 原文で行が分かれているだけの箇条は、マーカーを出さずに行を積むだけにする。
   原文（ポートグループ共通版）が中黒を持たない箇所まで「・」を足すと、
   原文にない記号を加えることになるため。項目の切れ目は行間で示す。 */
.terms-card__body ul.terms-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
}
.terms-card__body ul.terms-bullets > li {
    font-size: 14px;
    color: var(--c-text-sub);
    line-height: 1.7;
}
.terms-card__body ul.terms-bullets > li + li { margin-top: 6px; }
/* 「2．利用目的について」の（1）〜（4）だけは原文が「・」付きの箇条書きなので
   マーカーを出す。折り返しが頭に回り込まないようぶら下げる。 */
.terms-card__body ul.terms-bullets--dot > li {
    position: relative;
    padding-left: 1.2em;
}
.terms-card__body ul.terms-bullets--dot > li::before {
    content: "・";
    position: absolute;
    left: 0;
}
/* 本文中の URL は長いので、狭い幅で溢れないよう折り返しを許す。 */
.terms-card__body a {
    color: var(--c-orange);
    text-decoration: underline;
    word-break: break-all;
}
/* 規約本文の項番リスト。条内の「項」は 1. 2. 3.、その下の「号」は (1) (2) (3) と
   表示を変える。ネイティブの list-style だと入れ子で番号形式を作り分けられないため、
   counter で番号を組み立て、ぶら下げインデントで本文の頭を揃える。 */
.terms-card__body ol.terms-list {
    counter-reset: terms-item;
    list-style: none;
    margin: 0;
    padding: 0;
}
.terms-card__body ol.terms-list > li {
    counter-increment: terms-item;
    position: relative;
    padding-left: 2em;
    font-size: 14px;
    color: var(--c-text-sub);
    line-height: 1.7;
}
.terms-card__body ol.terms-list > li + li { margin-top: 8px; }
.terms-card__body ol.terms-list > li::before {
    content: counter(terms-item) ".";
    position: absolute;
    left: 0;
}
.terms-card__body ol.terms-list--paren > li::before {
    content: "(" counter(terms-item) ")";
}
/* 号のリストは項の本文に続けてぶら下げる。 */
.terms-card__body ol.terms-list ol.terms-list {
    margin-top: 8px;
}
/* カード末尾の制定日・制定者。本文中の署名欄（.terms-sign）と同じく右寄せで揃える。 */
.terms-card__body small {
    display: block;
    margin-top: 24px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--c-text);
    text-align: right;
}

/* ---------- Closing CTA + Footer ----------
   .closing-cta is now a card (log_member_PC per Figma): 1200x-, padding 32,
   radius 16, flex-column with gap 24. Heading + subtitle + CTA button. */
.closing-cta {
    width: 100%;
    max-width: 1200px;
    /* 上の余白は .gray-band::after（波）が下へ張り出す分の逃げ。
       波は band の下端から自身の高さぶん（幅×95/1440）はみ出すため、
       ここを広く取りすぎると波の下に何もない帯ができ、狭すぎると波が
       このカードの背面に潜って切れて見える。
       375px で波は約 25px、1440px で 95px。
       SP は .gray-band::after を content:none で消しているためこの逃げが不要で、
       下の @media で 0 にしている。 */
    margin: 60px auto 10px;
    padding: 72px 32px 32px; /* extra padding-top gives breathing room inside the card without creating a body-white gap */
    background: var(--c-white);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.closing-cta h2 {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.5;
    color: var(--c-text);
}
.closing-cta p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-sub);
}

.site-footer {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px var(--gutter);
    background: var(--c-white);
}
.site-footer__inner {
    font-size: 11px;
    color: var(--c-text-mid);
    text-align: left;
}

/* ---------- Side nav (absolute — scrolls with page) ----------
   position:absolute anchors to the document instead of the viewport, so the
   nav scrolls out of view once the hero section passes — effectively "fixed
   to hero." No persistent viewport overlay = no accumulated scroll behavior.
   right: body が 1440px 固定になったため、包含ブロック（＝1440px のキャンバス）の
   右端からの単純なオフセットで済む。以前は body が可変幅だったので
   calc(max(0px, (100vw - 1440px) / 2) + …) で 1440px カラムの内側へ寄せていたが、
   100vw はウィンドウ幅に追従するため、窓をリサイズするとナビだけが動いてしまう。
   固定キャンバスでは二重計算になるので撤去した。 */
.side-nav {
    position: absolute;
    top: 95px;
    right: var(--side-nav-right);
    z-index: 100; /* above hero cloud (z:1) and everything in-page */
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end; /* right-align the three thin nav items with the wider CTA */
    isolation: isolate; /* force its own stacking context */
}
.side-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 20px 6px;
    background: var(--c-orange);
    color: var(--c-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 2;
    text-align: center;
    box-shadow: var(--shadow-cta);
    writing-mode: vertical-rl;
    text-orientation: upright; /* keeps "4" (and any Latin/Arabic char) upright in vertical text */
    overflow: hidden; /* prevents any accidental scrollbars if content overflows the button */
    border-radius: 8px;
    transition: filter .15s;
}
.side-nav__item--top { border-radius: 40px 40px 8px 8px; padding-top: 24px; }
.side-nav__item--bottom { border-radius: 8px 8px 40px 40px; padding-bottom: 24px; }
.side-nav__item:hover { filter: brightness(1.05); }
.side-nav__item.is-active { background: var(--c-red); }
.side-nav__cta {
    position: relative;
    z-index: 101; /* extra guarantee - always on top of cloud */
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    background: var(--c-blue);
    color: var(--c-white);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    box-shadow: var(--shadow-cta);
    transition: transform .15s;
}
.side-nav__cta:hover { transform: scale(1.05); }
.side-nav__cta::after {
    content: '';
    display: block;
    margin-top: 4px;
    width: 24px;
    height: 20px;
    background: url('../assets/common/icon-mail.svg') center / contain no-repeat;
}

/* ---------- Back to top ----------
   right: same calc as .side-nav so both align to the 1440 content column edge. */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: calc(max(0px, (100vw - 1440px) / 2) + var(--side-nav-right));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: var(--c-white);
    color: var(--c-blue);
    box-shadow: var(--shadow-side);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px; /* leaves 32px inner area for the icon SVG */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 60;
}
.back-to-top svg {
    width: 32px;
    height: 32px;
    stroke: var(--c-blue);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Section quick-nav ---------- */
/* Hidden on PC (>=1200) because .side-nav serves the same purpose there.
   .section-nav is the tablet/SP fallback shown when .side-nav is hidden. */
.section-nav {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 9px;
    padding: 0 16px;
    height: 68px;
    background: var(--c-white);
}
.section-nav__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 8px 6px;
    background: var(--c-white);
    border: 2px solid var(--c-orange);
    border-radius: 10px;
    color: var(--c-orange);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    transition: background 0.2s, color 0.2s;
}
.section-nav__item:hover {
    background: var(--c-orange);
    color: var(--c-white);
}

/* =========================================================
   Responsive
   Breakpoints（PC と SP の2段のみ。タブレット専用レイアウトは持たない）:
     ≥768px   PC   - 1440px 固定デザイン。768〜1199px の端末では viewport meta を
                     width=1200 に切り替えて縮小表示する（index.html の head 内スクリプト）。
     ≤767px   SP   - single column, condensed spacing
     ≤375px   SP小 - さらに詰める
   幅に依存する固定サイズ（FAQ の 208px など）は @media (min-width: 1200px) 側に置き、
   1200px 未満のデスクトップ窓では自動で解除されるようにしている。
   ========================================================= */

/* -------- SP（旧 Tablet ブロック）--------
   もとは ≤1199px のタブレット段だったが、PC / SP の2段構成に変更したため
   ≤767px へ引き下げた。直後の ≤767px ブロックと範囲は同じで、こちらが先に
   来るぶん後続ブロックに上書きされる（従来 ≤767px 時に両方適用されていた
   カスケード順をそのまま保つため、あえて統合していない）。 */
@media (max-width: 767px) {
    .side-nav { display: none; }
    .section-nav { display: flex; }  /* show the mobile fallback nav where .side-nav is hidden */
    .back-to-top { right: 16px; bottom: 16px; }

    /* 画面下固定の応募CTA。左右 16px の余白を空けたピル型。
       .back-to-top（画面下中央）と重ならないよう、下の @media で
       back-to-top 側を上へ逃がしている。 */
    /* 2本のCTAを横並びにするコンテナ。背景は持たず、ボタン自身が .btn の
       primary / secondary スタイルを引き継ぐ。 */
    .sticky-cta {
        display: flex;
        align-items: stretch;
        gap: 8px;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 99;   /* .side-nav(100) より下、ページ内要素より上 */
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    /* 375px 幅では 1本あたり約 167px しかないため、ヒーローのCTA（15px / padding 24px）
       より文字とパディングを詰めないと「応募フォームへ」が2行になる。 */
    .sticky-cta__btn {
        flex: 1 1 0;
        gap: 6px;
        min-height: 56px;
        padding: 10px 8px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 700;
        box-shadow: var(--shadow-cta);
    }
    /* 枠線 3px は 167px 幅では太いので 2px に。内側の文字幅も 2px 分広がる。 */
    .sticky-cta__btn.btn--secondary { border-width: 2px; }
    .sticky-cta__btn .btn__icon { width: 16px; height: 16px; }
    /* 応募フォーム到達時（scholarship.js が付与）。visibility も切るのでフォーカス順からも外れる。 */
    .sticky-cta.is-hidden {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        pointer-events: none;
    }

    /* Hero: mascot on top, copy below */
    .hero__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        margin-top: 0; /* reset desktop overlap so mascot doesn't crash into title banner */
    }
    .hero__mascot {
        grid-column: 1;
        grid-row: 1;
        padding-top: 0;
    }
    .hero__mascot img { max-width: 500px; }
    .hero__message { grid-column: 1; grid-row: 2; min-height: auto; }
    .hero__title { font-size: 40px; }
    .gradient-bar { align-self: center; }
    .hero { min-height: auto; }

    /* Intro: stack banner and badges */
    /* minmax(0, 1fr) であって 1fr ではない。1fr は minmax(auto, 1fr) と等価で、
       トラックの最小値がアイテムの指定幅を拾う。SP で幅を持たせた .intro__badges
       （326px）がトラックごと 326px に押し広げてしまい、320px 端末では
       .intro__badges 側の max-width: 100% が「自分で広げたトラックの 100%」を
       見ることになって溢れ止めとして機能しない。最小値を 0 に固定すると
       トラックがコンテナ幅に収まり、max-width: 100% が正しく効く。 */
    .intro__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }

    /* Grids collapse to 2 columns */
    /* PC の 273px 固定トラックを解除して可変幅に戻す */
    .challenges__grid { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
    /* 幅・高さの固定は 1440px デザイン専用。ここから下は内容に追従させる。
       desc の min-height（3行分）は PC 側の指定をそのまま継承し、
       ラベル位置を揃えたまま高さだけ内容に追従させる。 */
    .challenge { width: auto; height: auto; }
    .faq__grid { grid-template-columns: repeat(2, 1fr); }

    /* Form 3-col row → 2-col */
    .app-form__row--3 { grid-template-columns: 1fr 1fr; }

    /* Requirements table: prevent overflow */
    .req-table th { width: 160px; }
}

/* -------- Mobile -------- */
@media (max-width: 767px) {
    html { scroll-padding-top: 8px; }

    /* Hero — drop the yellow gradient; keep only the pearlescent SVG (cloud
       from .recommend::before still extends upward as on PC). */
    .hero-block { background: url('../assets/sp/hero-bg.svg') center top / 100% auto no-repeat; }
    .recommend::before {
        background-image: url('../assets/sp/recommend-cloud.svg');
        aspect-ratio: 375 / 2527;
        /* Cloud pushed further up into hero (-100 from -700) so puff overlaps
           the title/CTA area more deeply. Tune value: more negative = up, less = down. */
        top: -760px;
    }
    .hero { min-height: auto; padding: 40px 20px 56px; }
    .hero__brand { top: 40px; left: 20px; }
    /* Floating apply CTA inside cloud puff, aligned to the right of the hero title.
       Absolute-positioned within .hero (position:relative) so it scrolls with the hero. */
    .hero__sp-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        /* Anchored to .hero__message (position:relative), so it tracks the H1 at
           every width. The old top:750px was measured against .hero, whose height
           grows ~220px between a 320px and a 430px viewport — the circle landed on
           the lead paragraph on small phones and above the title on large ones. */
        top: 0;
        right: 16px;
        z-index: 7;  /* above cloud (z:5) and hero__cta (z:6) */
        /* Shrinks on narrow phones so it clears the H1's first line, which needs
           ~205px of the 280px available at 320px. */
        width: clamp(64px, 22vw, 88px);
        height: clamp(64px, 22vw, 88px);
        background: var(--c-blue);
        color: var(--c-white);
        border-radius: 50%;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        box-shadow: var(--shadow-cta);
        transition: transform .15s;
    }
    .hero__sp-cta:hover,
    .hero__sp-cta:focus-visible { transform: scale(1.05); }
    /* 丸型CTAの真上に置く装飾の三角。
       .hero__sp-cta 自体が position:absolute なので、::before の絶対配置は
       この丸を基準に解決される。bottom:100% で丸の上端の外側に出し、
       left:50% + translateX(-50%) で横中央に揃える。
       絶対配置なので flex の並び（テキスト → ::after のメールアイコン）には
       影響せず、丸の中身は従来のままになる。 */
    .hero__sp-cta::before {
        content: '';
        position: absolute;
        /* 丸の上端から 14px 上（基準の 4px から 10px 上げ）、
           横は中央から 10px 左（left の 50% から差し引く）。 */
        bottom: 100%;
        left: calc(50% - 10px);
        transform: translateX(-50%);
        margin-bottom: 14px;
        width: 19px;
        height: 13px;
        background: url('../assets/sp/traingle-icon.svg') center / contain no-repeat;
    }
    /* Mail icon below text — same pattern as .side-nav__cta::after on PC */
    .hero__sp-cta::after {
        content: '';
        display: block;
        margin-top: 4px;
        width: 20px;
        height: 16px;
        background: url('../assets/common/icon-mail.svg') center / contain no-repeat;
    }
    .hero__brand img { width: clamp(60px, 20vw, 100px); height: auto; }
    .hero__title-banner--pc { display: none; }
    .hero__title-banner--sp {
        display: block;
        width: 100%;
        max-width: 400px;
        height: auto;
        margin: 0 auto;
    }
    /* Stack the grid vertically: title-banner (sibling above) → mascot → message → CTA */
    .hero__grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin: 0;
    }
    /* Mascot: full-width wrapper, image left-aligned (overrides .hero__grid's align-items:center) */
    .hero__mascot {
        align-self: stretch;
        justify-content: flex-start;
    }
    /* SP は sp/hero-mascot.svg（359×445 の縦長）に差し替わるため、PC 版アート向けの
       補正（左 -80px ／ 1.2倍拡大）を打ち消す。あれは横長 784×709 の余白を
       相殺するための値で、縦長の SP 版に当てると画面外へはみ出す。 */
    .hero__mascot img {
        display: block;
        margin-left: 0;
        max-width: 359px;  /* Figma SP 実測。375px 幅では .hero の左右 padding で 335px に収まる */
        height: auto;
        transform: none;
    }
    .hero__message {
        max-width: 375px;
        /* PC's 463px min-height (SP 350.83) let the flex-end alignment push the
           H1 down by a width-dependent amount, which would move the CTA anchored
           to this box. Content-height only, so box top == title top everywhere. */
        min-height: 0;
        /* .hero の左右 padding 20px と合わせて計 32px の内側余白になり、375px 幅で
           見出し・リードが Figma 指定の 311px（left 32px）ちょうどに収まる。 */
        padding: 0 12px;
        gap: 17.83px;
        /* Visually shift into cloud puff without moving the cloud (transform
           doesn't change flow, so .hero-block height + .recommend + cloud stay put). */
        transform: translateY(10px);
    }
    /* Fluid down to 26px so 「使いこなせる」 plus the floating CTA both fit on the
       first line at 320px. Upper bound is the Figma 375px value, so ≥375px is unchanged. */
    /* Figma SP: 見出し・リードとも幅 311px（375px フレームで左右 32px の余白）。
       固定 width ではなく max-width にしているのは、320px 端末では .hero__message の
       内幅が 280px しかなく、311px を固定すると溢れるため。 */
    .hero__title {
        max-width: 311px;
        font-size: clamp(26px, 8.5vw, 32px);
        letter-spacing: 2.23px;
        text-align: left;
    }
    .hero__lead {
        max-width: 311px;
        font-size: 14px;
        line-height: 1.9;
    }
    /* Intro (Figma Frame 2969): outer padding 0 32 + section vertical rhythm.
       Top padding bumped to 120 to clear the .section-nav that's transformed 80px
       down and would otherwise land on top of the first gradient pill.
       Bottom padding tightened on SP — it stacks with .challenges-inner's
       padding-top below, so 120+100 left an oversized gap on narrow screens. */
    /* 左右 2px は親 .recommend の padding（375px 幅で 8vw = 30px）と合わせて 32px の
       内側余白になる値。これで見出し・本文が Figma 指定の 311px 幅・left 32px に一致し、
       ヒーローの見出し／リードとも左端が揃う。 */
    .intro { padding: 120px 2px clamp(24px, 10vw, 40px); }
    .recommend .challenges-inner {
        /* Second half of that stacked gap (PC value is 100px). */
        padding-top: clamp(28px, 12vw, 48px);
        /* .section's own 20px LR padding stacks with .recommend's clamp(20px,8vw,120px),
           costing 91px of a 320px viewport. .recommend already insets this block, so
           drop the inner padding and give the cards that width back. */
        padding-left: 0;
        padding-right: 0;
    }
    /* Neutralize PC translateY(-200px) that hides Label 1 behind the SP mascot */
    .intro__inner {
        transform: none;
        margin: 0 auto;
    }
    /* Figma SP: 見出し（ピル群）と本文はともに幅 311px。親を絞ることで両方に効く。
       .intro__inner が justify-items:center なのでこのブロックは中央寄せになり、
       375px 幅では left 32px（＝ヒーローの見出し・リードと同じ位置）に揃う。

       幅は固定 px ではなく「親の幅から左右のマージン分を引いた式」で持つ。
       ここだけ基準が .section ではない点に注意。親は .intro__inner で、その幅は
       ビューポート − .recommend の左右 padding 20px×2 − .intro の左右 padding 2px×2。
       375px では 331px になり、331 − 20 = 311px と Figma 実測どおりになる。
       それ以上の幅では画面に追従して伸びる。固定 px だと 441px 以上で 311px のまま
       取り残され、広い画面の中央に細い1本の列が残ってしまう。 */
    .intro__summary { max-width: calc(100% - 20px); }
    /* Frame 2980: 4 pills stacked, gap 8, breathing room above so mascot doesn't kiss the first pill */
    .intro__headline {
        gap: 8px;
        margin-top: 24px;
    }
    /* Paragraph typography per Figma spec */
    .intro__text {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.9;
        color: var(--c-text);
    }
    /* .intro__badges img already responsive via base rule (max-width + aspect-ratio) */
    /* Frame 2978/2979/2980/2981 pill spec: 24px/150% white, 3px tracking, 0 10 padding, r6.
       Size and tracking go fluid below 375px: the longest pill 「挑戦の実行費用に、」 needs
       ~263px at the Figma values and wrapped at 320px, which splits the gradient
       background across two lines and visibly breaks the pill. */
    .gradient-bar {
        font-size: clamp(19px, 6.4vw, 24px);
        letter-spacing: clamp(1.5px, 0.8vw, 3px);
        line-height: 1.5;
        padding: 0 10px;
        border-radius: 6px;
    }
    /* SP shows 4 short pills, PC shows 2 wider pills — toggle by variant class */
    .gradient-bar--pc { display: none; }
    .gradient-bar--sp {
        display: inline-block;
        /* Re-declare after tablet rule at @media <=1199 that centers the pills. */
        align-self: flex-start;
    }
    /* Section quick-nav SP redesign (Figma Frame 2960 / 2966-2968) */
    /* z-index:10 lifts nav above .recommend::before cloud (which paints at
       .recommend's z:5 stacking context and overlaps this area on SP).
       translateY matches .hero__message + .hero__cta so all three descend
       together as a visual group, keeping the CTA→nav gap intact. */
    .section-nav {
        position: relative;
        z-index: 10;
        background: transparent;
        transform: translateY(80px);
    }
    .section-nav__item {
        padding: 16px 4px;
        background: var(--c-text);
        border: none;
        border-radius: 8px;
        color: var(--c-white);
        /* 3 items share the row; at 320px each gets ~90px (82px inside the 4px
           padding), so 「支援する4つ」 needs ≤11.7px to stay on one line — above that
           it wrapped to an uneven 3 lines and overflowed the nav's 68px height. */
        font-size: clamp(11.5px, 3.6vw, 14px);
        line-height: 1.26;
        box-shadow: var(--shadow-cta);
        transition: filter 0.2s;
    }
    .section-nav__item:hover {
        background: var(--c-text);
        color: var(--c-white);
        filter: brightness(1.15);
    }
    .hero__cta {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        /* リード文との間隔を 100px → 56px に詰める（CTA とセクションナビの間隔と同値）。
           内訳は .hero__grid の row-gap 30px ＋ transform の差分 70px
           （この要素の translateY(80px) − .hero__message の translateY(10px)）。
           transform ではなく margin で詰めるのは、transform がフローに影響せず
           下のナビとの 56px を保てないため。margin なら .hero の高さも同時に縮む。 */
        margin-top: -70px;
        /* 雲のふくらみへ降ろすための下シフト。上の margin と対で間隔が決まる。 */
        transform: translateY(80px);
        width: 100%;
    }
    .hero__cta .btn--lg {
        padding: 14px 24px;
        min-height: 64px;
        font-size: 15px;
        width: 100%;
        max-width: 311px;
    }
    .hero__cta .btn__icon { width: 20px; height: 20px; }

    /* Buttons */
    .btn--lg {
        padding: 18px 32px;
        font-size: 15px;
        width: 100%;
        max-width: 320px;
    }

    /* Sections */
    .section { padding: 56px 10px 20px; }
    .section__head { margin-bottom: 32px; }
    .section__head h2 { font-size: 20px; font-weight: 900; }
    .section__lead { font-size: 15px; font-weight: 700; line-height: 1.4; }
    .section__head--decorated { grid-template-columns: 1fr; }
    .section__head--decorated .section__deco { display: none; }
    /* Base rule pins h2 to grid-column:2 (middle of 3-col PC layout); reset
       to column 1 on SP so justify-items:center actually centers the title. */
    /* 「支援する4つの挑戦」だけ他セクション（20px / 16px）と別サイズ。
       font-size は base の .section__head h2 と同詳細度のため、こちらが後勝ちになる
       位置（この行より前に base 相当の指定を置かない）に書くこと。 */
    /* Figma SP: 30px / 900 / line-height 150% / letter-spacing 4px / center。
       line-height はベースの 1.2、letter-spacing はベースの 0.03em（=0.9px）を上書きする。
       letter-spacing は継承プロパティなので、ここで指定すれば .accent-num にも効く。
       中央寄せはベースの justify-content: center（flex）が担う。 */
    .section__head--decorated h2 {
        grid-column: 1;
        font-size: 30px;
        font-weight: 900;
        line-height: 1.5;
        letter-spacing: 4px;
    }
    /* Figma SP: 「4」は 56px（PC は 71px）。
       line-height は 1 のまま据え置く。ベースのコメントにあるとおり、
       グリフに box を張り付かせることで align-items: baseline での位置合わせが
       正確になる設計で、150% にすると行box が 84px に伸びて見出し全体の高さが変わる。 */
    .accent-num { font-size: 56px; }
    .section__head--decorated .section__lead {
        font-size: 15px;
        font-weight: 700;
    }

    /* 767px 以下の背景。画像そのものの切り替えは下の @media (max-width: 440px)
       で行い（440px 以下＝SP 用 PNG、441〜767px＝ベースの PC 用 PNG）、
       ここでは両方に共通する敷き方だけを指定する。

       サイズは PC と同じ 100% 100%（セクションの実寸に合わせて伸縮）。
       以前は 100% auto（幅だけ合わせ、高さは比率任せ）だったが、この画像は
       375px 幅で高さ 1334px になるのに対しセクションの実高は 1313px しかなく、
       下端の波形がセクションの外へはみ出して切り落とされていた。背景画像は
       ボーダーボックスでクリップされるため、はみ出した分は描画されず、
       募集要項の直後に来る「応募から給付までの流れ」（白）との境目が
       波形ではなく直線になっていた。

       100% 100% にすると柄（円・角丸・矩形）が縦に潰れるが、375px では
       1313 / 1334 = 98.4% とほぼ等倍で目視できない。SP レンジの上限に向かって
       画像の自然高（幅 × 3.557）だけが伸び、セクションの実高は表が横に広がる分
       むしろ縮むため、潰れ率は幅が広いほど大きくなる（実測 414px で 0.85、
       500px で 0.61、767px で 0.34）。SP 用 PNG を 440px までに限定しているのは
       このため。
       等倍を保ったまま上下の波形を出すには、波形と柄を別素材に分けて
       波形だけを上下に固定する必要がある（柄の途中で切ると継ぎ目が出る）。

       position は center。100% 100% では画像がボックス全体を覆うので
       position は効かないが、size を戻したときに center top の指定だけが
       残って挙動が変わるのを避けるため PC と同じ値に揃えておく。

       下 padding は SP 共通の 20px では足りないので 56px にする。20px のままだと
       表の下端と波形の谷（375px で約 17px）の間が 3px しか空かず、波形が表に
       食い込んで見える。上は padding-top 56px − 波形 17px ＝ 39px 空いているので、
       下も同じ 56px にして上下の余白感を揃える。 */
    .section--orange-bg {
        background-position: center;
        background-size: 100% 100%;
        padding-bottom: 56px;
    }

    /* Requirements table: keep PC's 2-column (label | value) layout, sized down for SP.
       Removed the previous display:block stacking so th/td render as table cells again. */
    /* 行の高さは詳細列（td）の行数だけで決まる。Figma SP の行高
       56 / 104 / 130 / 56 / 246 / 126 / 104 / 104 / 104 / 80px（合計 1110px ＝
       Figma「Frame 2904」の高さ）は、いずれも「1行 24px（14px × 170%）× 行数
       ＋ 上下 padding 16px」で説明できる値。line-height を th / td 共通で 1.6 に
       すると 1行 22.4px となり全行が Figma より低くなるため、共通指定は置かず
       th（150%）と td（170%）で別々に持つ。 */
    /* 本文（値）は 14px、見出し列は 12px。共通指定に font-size を置かず、
       th / td それぞれで指定する。 */
    .req-table td { font-size: 14px; line-height: 1.7; }

    /* 「支援内容」のバッジは行を占有させ、続く「を給付（…）」を次の行の頭から始める。
       inline-flex のままだと SP の狭い td（375px で内容幅 134px）ではバッジの右に
       文字が数文字だけ入り、中途半端な位置で折り返してしまう。
       display: flex でブロック化すると後続テキストが独立した行に落ちる。
       幅は .chip--orange の 111px 固定がそのまま効くので、横いっぱいには広がらない。
       margin-right はバッジ横に文字が来なくなるため 0 にし、代わりに下方向へ余白を置く。
       下の余白 10px は Figma の詳細セル（column・gap 10px）の値。バッジ 40px ＋ 10px
       ＋ 本文2行 48px ＋ padding 32px ＝ 130px で、Figma の「支援内容」行の高さに一致する。 */
    .req-table .chip--orange {
        display: flex;
        margin-right: 0;
        margin-bottom: 10px;
    }
    /* Figma SP 実測（375px 幅）: 表の外形は 326px。
       .section の左右 padding は 10px なので素の幅は 355px になり 29px 広い。
       max-width で 326px に絞る（.req-table は margin: 0 auto なので中央寄せされる）。
       326px 未満の画面では width: 100% が効くため溢れない。 */
    /* 幅は固定 px ではなく「内容幅から左右のマージン分を引いた式」で持つ。
       .section の左右 padding は 10px なので内容幅はビューポート − 20px。
       375px では 355 − 29 = 326px と Figma 実測どおりになり、それ以上の幅では
       画面に追従して伸びる（767px で 719px）。固定 px だと 441px 以上で
       327px のまま取り残され、広い画面に細い1本の列が残ってしまう。 */
    .req-table { max-width: calc(100% - 29px); }
    /* Figma SP: 見出し列は 80px 固定。表の外形 326px から引いた 246px が詳細列。
       左右 padding は Figma 指定の 16px なので文字が使えるのは 48px ちょうど。
       12px の全角は 1文字 12px なので 4文字（48px）までが1行、「ミッション」
       （5文字・60px）は「ミッショ／ン」と2行になる。Figma 側でも 4文字の見出しは
       高さ 18px（1行）、「ミッション」「お問い合わせ」だけ 36px（2行）になっており、
       この幅で意図どおり。
       ただし 48px は 4文字とぴったり同幅で余白がない。Noto Sans JP が読み込めず
       全角が 12px を超える代替フォントに落ちると 4文字の見出しも折り返すため、
       折り返しを避けたい場合は width ではなく左右 padding を詰めること。
       「お問い合わせ」（6文字）だけは自動折り返しに任せず、index.html 側の
       <br class="br-sp"> で「お問い合／わせ」に固定している。折り返し位置を
       フォントの実測幅任せにすると、端末のフォント差で 5文字目まで入ってしまい
       「お問い合わ／せ」と割れることがあるため。br は PC では display: none。
       上下 padding は 0。行の高さは td 側が決めるので、見出しは vertical-align:
       middle（共通指定）で中央に置かれる。 */
    .req-table th {
        width: 80px;
        padding: 0 16px;
        font-size: 12px;
        line-height: 1.5;
        /* 見出し列は左揃え。
           もとは中央寄せだったが、text-align: center は「行ごと」に中央へ寄せるため、
           2行になる「ミッショ／ン」「お問い合／わせ」の2行目だけが大きく内側に
           入り込み、1行目の頭と揃わない（60px の中で「ン」は 23.5px、「わせ」は
           17px も右にずれる）。左揃えなら折り返しても2行目が1行目の頭に揃う。
           4文字の見出しは 52px で 60px との差が 8px しかないため、中央寄せから
           左揃えに変えても見た目は 4px 動くだけで、列としての印象は変わらない。 */
        text-align: left;
    }
    /* 詳細セルは Figma 指定の padding 16px。本文と <small> の間隔 10px は
       .req-table td small の margin-top が担う（gap 相当）。 */
    .req-table td {
        padding: 16px;
    }
    /* 注記は 12px / 150%（1行 18px）。td の 170% を継承すると 1行 20.4px になり、
       2行の注記を持つ「応募資格」「選考方法」行が Figma の 246px / 126px より
       高くなる。 */
    .req-table td small { line-height: 1.5; }

    /* Challenges: 2-column grid on SP (2×2 layout for 4 cards).
       Every horizontal value scales with the viewport: at 320px the card had only
       66px of inner width and 「解決する」 broke across three lines. */
    .challenges__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 4vw, 16px); }
    /* Figma SP spec（カードフレーム 155×327.89）。
       幅はグリッドの 1fr が決めるので指定しない（320px 端末で 155px が入らないため）。

       高さは Figma どおり 327px 固定。PC 側の height: 486px と同じ扱いに揃える。
       375px 端末では中身の実高が 276〜309px（チップ1〜2行）なので収まる。
       ただし 320px 端末はカード幅が 128px まで縮んでチップが3行になり、
       実高が 341.9px と 327px を約15px 超えるため、その幅でははみ出す。 */
    .challenge {
        width: auto;
        height: 327px;
        padding: 24px 12px;
        /* 上部 79.8px はカード幅 155px の約半分＝ほぼ半円のアーチ。左右の半径の合計が
           辺の長さを超える場合、ブラウザは4隅を同率で縮小する（CSS Backgrounds 仕様）ため、
           320px でカードが 128px に縮んでも半円の見え方と上下の比率が保たれる。 */
        border-radius: 79.8px 79.8px 24.94px 24.94px;
        border-width: 0.62px;
        gap: 9.98px;
    }
    /* カード内タイポグラフィ（Figma SP 実測）。line-height の % 指定は倍率に読み替え
       （150% → 1.5）。従来の clamp() による可変指定は Figma が固定値を指定しているため撤去。 */
    .challenge__kanji { font-size: 28px; line-height: 1.5; }
    .challenge__label { font-size: 15px; line-height: 1.5; }
    .challenge__sub { font-size: 11px; font-weight: 700; line-height: 1.5; }
    /* desc のみ 400（他は 700）。min-height: calc(3 * 1.7em) が 3行分を確保しているため、
       line-height 1.7 とセットで維持すること。 */
    .challenge__desc { font-size: 13px; font-weight: 400; line-height: 1.7; }
    .challenge__uses-label { font-size: 10px; font-weight: 400; line-height: 1.3; }
    /* Figma SP「Frame 2991」: column / align-items: flex-start / gap 12px / padding 0。
       幅 131px は指定しない。カード 155px から左右 padding 12px を引いた値が
       そのまま 131px になり、.challenge > * { width: 100% } で自動的に一致する。
       高さも中身（ラベル＋チップの行数）で決まるため指定しない。

       ラベルの margin-top: 8px / margin-bottom: -8px は PC 用の余白調整で、
       .challenge の gap 16px と足し引きして「上 24px・下 8px」を作るもの。
       SP はこのグループ自身の gap 12px で間隔を決めるため打ち消す。
       打ち消さないと gap 12px から 8px 引かれて 4px になる。 */
    .challenge__uses {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    /* Frame 2991 の子はどちらも align-self: stretch。箱を横いっぱいに広げたうえで、
       ラベルは text-align: center、チップ群は justify-content: center で中央に寄せる。
       ラベルの margin-top/-bottom は PC 用の余白調整なので打ち消す。 */
    .challenge__uses-label {
        margin-top: 0;
        margin-bottom: 0;
        align-self: stretch;
        text-align: center;
    }
    /* Figma SP「Frame 2990」: row / wrap / justify-content: center / gap 4.99px。 */
    .chips {
        align-self: stretch;
        justify-content: center;
        gap: 4.99px;
    }
    /* Figma SP「Frame 2988/2989/2990」: padding 2.4938px 4.98761px /
       border 0.623451px / radius 2.4938px、文字は 10px / bold / line-height 130%。
       高さ 17.99px の内訳は padding 2.49×2 ＋ 行高 13px ＋ border 0.62×2。 */
    .chip {
        padding: 2.49px 4.99px;
        border-width: 0.62px;
        border-radius: 2.49px;
        font-size: 10px;
        line-height: 1.3;
    }

    /* Figma SP「Frame 2902」: タイトル群（漢字＋ラベル＋サブ）の gap は 4.99px。
       .challenge の gap 9.98px との差ぶんを負マージンで詰める。 */
    .challenge__sub { margin-top: -4.99px; }
    /* Figma SP「Frame 2903」: 説明文と使いみち群の gap は 14.96px。
       .challenge の gap 9.98px に足りない分を正マージンで足す。 */
    .challenge__uses { margin-top: 4.98px; }
    /* Figma SP: 大きい漢字は margin: -8px 0。line-height 150% で生じる
       行box の余白を上下から詰め、ラベルとの距離を Figma に合わせる。 */
    .challenge__kanji { margin: -8px 0; }


    /* Flow: SP layout — full-width steps, dot pinned right, line centered on dot */
    /* Figma SP（375px）: 外形 327px（＝375 − 左右24px）／本文カラム 256px。
       .section の左右 padding は 10px で素の幅が 355px あるため、.flow 側で絞る。
       margin: 0 auto（基底ルール）で中央寄せされ、左端は 10 + 14 = 24px となり
       募集要項・FAQ・フォームの 24px 起点と縦に揃う。
       max-width: 100% は 320px 端末での溢れ止め。 */
    /* 幅は固定 px ではなく「内容幅から左右のマージン分を引いた式」で持つ。
       .section の左右 padding は 10px なので内容幅はビューポート − 20px。
       375px では 355 − 28 = 327px と Figma 実測どおりになり、それ以上の幅では
       画面に追従して伸びる（767px で 719px）。固定 px だと 441px 以上で
       327px のまま取り残され、広い画面に細い1本の列が残ってしまう。 */
    .flow { width: calc(100% - 28px); max-width: 100%; }
    /* Figma SP「Frame 3004」: 番号カラム 49px ＋ gap 18px ＋ 本文 260px ＝ 327px。
       本文 260px は width ではなく引き算で出す。.flow__body は flex: 1 なので
       327 − 49 − 18 = 260 が自動的に導かれ、320px 端末でも .flow の縮小に追従する
       （固定 260px だと縮まず 6px はみ出す）。
       ※Figma はステップ1・2 だけ gap 22px／本文 256px になっているが、3〜6 の
       gap 18px／本文 260px を採用した。6段のうち4段がこちらで、段ごとに本文の
       左端がずれるのは意図した差ではないと判断したため。
       段間 36px は Figma の連結線コンテナ（padding: 0 44px 36px）の下 padding。
       PC 側の 36px とも一致する。 */
    .flow__step {
        gap: 18px;
        padding: 0 0 36px;
    }
    /* PC の固定 729px は SP 幅を超えるので、親いっぱいに戻す。
       見出しとバッジの間は 8px（基底ルールの gap）、バッジ群と説明文の間も 8px。
       PC の 12px から詰める。 */
    .flow__row { width: auto; margin-bottom: 8px; }
    /* Figma SP では本文の上端が行の上端（＝番号カラムの上端）と揃う。
       PC の padding-top: 6px は 50px の数字に対する微調整なので SP では戻す。 */
    .flow__body { padding-top: 0; }
    /* Figma SP「Frame 2993」: 幅 49px・高さ 45px、数字とドットを space-between。
       高さ 45px は 30px × line-height 150% で得る（PC の line-height: 1 だと 30px に
       なり、ドットの中心＝連結線の始点が 7.5px 上へずれる）。
       ウェイトは Figma 指定の 900（PC は 700）。Google Fonts 側で 400/700/900 を
       読み込んでいるので合成太字にはならない。
       gap は space-between が余りを分配するため実効値にならないが、数字が想定より
       太って余白が消えたときの最低間隔として残す。 */
    .flow__num {
        font-size: 30px;
        font-weight: 900;
        line-height: 1.5;
        width: 49px;
        gap: 16px;
        justify-content: space-between;  /* pin dot to right edge for consistent alignment across "1"-"6" */
    }
    .flow__dot { width: 10px; height: 10px; }
    /* 連結線は Figma で 3px / #FFB890。
       ドット中心は x = 49（番号カラム幅）− 5（ドット半径）= 44px なので、
       3px の線を中心に重ねる left は 44 − 1.5 = 42.5px。
       （Figma の連結線コンテナは padding-left: 44px ＝ 線の左端 44px だが、
       それだとドット中心より 1.5px 右にずれるため中心合わせを採る。）
       縦は「このステップのドット下端」から「次のステップのドット中心」まで。
       ドット中心 y = 45 / 2 = 22.5px、下端 = 22.5 + 5 = 27.5px。
       次のドット中心はこのステップの下端から 22.5px 下なので bottom: -22.5px。
       線はドットの下に潜る（.flow__num が position: relative で後勝ちに描画される）
       ので、端が見えることはない。 */
    .flow__step:not(:last-child)::before {
        left: 42.5px;
        top: 27.5px;
        bottom: -22.5px;
        width: 3px;
    }
    /* Figma SP: 見出し 16px / 700 / line-height 150%、本文 12px / 400 / 170%。
       line-height は body の 1.7 を継承するため、見出しだけ 1.5 に上書きが要る。
       letter-spacing は Figma が 0px 指定で、既定の normal と同値のため指定しない。 */
    .flow__body h3 { font-size: 16px; font-weight: 700; line-height: 1.5; }
    /* 説明文の色は Figma SP が #333333（PC の #5C5C5C より濃い）。12px まで
       小さくなるぶんコントラストを上げる指定なので SP だけ上書きする。 */
    .flow__body p { font-size: 12px; font-weight: 400; line-height: 1.7; color: var(--c-text); }
    /* Figma SP「Frame 2995」: padding 6px 12px / 14px bold / line-height 150% で
       外形 33px。背景 #FFF4E6（= --c-yellow-bg）・枠線 #FFB854・角丸 6px は
       基底ルールと同じ。最長の「2027/2〜5末（目安）」で 163px となり、
       本文カラム 260px に収まる。 */
    .chip--period { font-size: 14px; padding: 6px 12px; }
    /* 「全てに同意の上、入力内容を送信」は 15 文字あり、320px 端末では
       ボタン幅（280px 上限・実測 268px）− 左右 32px では 1 行に収まらない。
       左右だけ詰めて 1 行を保つ。

       高さは Figma SP 指定の 71px。box-sizing: border-box なので上下 padding 14px を
       含んだ外形で、文字に使えるのは 43px。1行（23.8px）は余裕で収まる。
       文言が2行になると溢れるが、上の padding 調整で 320px でも1行を保っている。
       送信中・送信済みに切り替わる文言はいずれも15文字より短いため問題ない。 */
    .btn--sm-submit {
        /* 上下 14px は PC 側（27px）を打ち消すための再宣言。PC の 27px が残ると
           71px − 54px ＝ 17px しか文字に使えず、1行（23.8px）が内容ボックスから
           はみ出す。外形は height 固定なので見た目の高さは変わらないが、
           下の「文字に使えるのは 43px」という前提が崩れるため明示している。 */
        padding: 14px 20px;
        height: 71px;
    }

    /* SP は波の高さが 25px 程度（幅比例）で元から重なっていないため、
       PC の 100px は空きすぎる。余白の追加だけを目的に 40px に留める。 */
    .gray-band { margin-top: 40px; }

    /* SP のみ、下の波を規約セクションの下ではなくフォーム（#apply）の直下に出す。
       グレーは「FAQ → フォーム」までで終わり、規約セクションは白地に載る。

       波だけを移動しても背景は帯のままなので、グレーの塗りごと付け替える：
       ・.gray-band の背景を透明にし、#faq と #apply に個別にグレーを敷く。
         2つは隣接する .section で上下 margin を持たないため、境目に白い筋は出ない。
       ・帯の下端に付いていた ::after は content: none で消し、同じ指定を
         #apply::after に移す。
       上の波（.gray-band::before）は帯の先頭＝#faq の上端のままでよいので触らない。

       波は #F5F5F5 の形を透明背景に描いた SVG なので、白くなった規約セクションの
       上に重ねるとグレーが白へ食い込む見え方になる（帯の下端にあったときと同じ）。
       transform で自分の高さぶん下へ出すため、重なるのは規約セクション上端の
       約25px（375px 幅）。.section の padding-top 56px の内側に収まるので本文には
       かからない。z-index は指定しない：絶対配置の擬似要素は静的配置の #terms より
       後に描かれるため、指定しなくても波が上に来る（.gray-band::after も同様）。 */
    .gray-band { background: transparent; }
    .gray-band::after { content: none; }
    #faq.section,
    #apply.section { background: var(--c-bg-soft); }
    #apply.section { position: relative; }
    /* 波（下の ::after）は自分の高さぶん下へ張り出すが、レイアウト上の高さは持たない。
       .section の下余白 20px のままだとフォーム末尾のすぐ下から波が始まり、
       内容と波がくっついて見えるため、波が出るセクションだけ下余白を足す。
       375px で波は約 25px、500px で 33px。40px あればどの幅でも余白が残る。 */
    #apply.section { padding-bottom: 40px; }
    #apply.section::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        aspect-ratio: 1440 / 95;
        background: url('../assets/common/wave-bottom.svg') center bottom / 100% auto no-repeat;
        /* 自分の高さぶん下げる。1px 残すのは、サブピクセル描画で帯との間に
           髪の毛のような隙間が出るのを防ぐため（.gray-band::after と同じ手口）。 */
        transform: translateY(calc(100% - 1px));
        pointer-events: none;
    }

    /* 送信完了時（.app-form.is-submitted）と募集終了時（#apply.is-closed）は、
       SP でもグレーと波を規約セクションまで伸ばして PC と同じ見え方にする。

       通常時は #apply がフォームで長いためグレーは #apply までで足りるが、
       この2状態では #apply が完了カード／終了案内だけに縮み、グレーの帯が
       極端に短くなって規約・個人情報保護方針だけが白く浮いて見える。

       やることは3つ。#terms にグレーを敷き、#apply::after の波を消し、
       同じ波を #terms::after に出す。

       :has() を使う側は必ず別ルールに分ける。セレクタリストは1つでも解釈できない
       ものがあるとルール全体が無効になるため、まとめて書くと :has() 非対応の
       ブラウザで is-closed 側の指定まで巻き添えで落ちる。 */
    #apply.is-closed ~ #terms.section { background: var(--c-bg-soft); position: relative; padding-bottom: 40px; }
    #apply:has(.app-form.is-submitted) ~ #terms.section { background: var(--c-bg-soft); position: relative; padding-bottom: 40px; }

    /* 波が #terms へ移るので、#apply 側の下余白は通常の 20px に戻す。 */
    #apply.is-closed::after { content: none; }
    #apply.is-closed { padding-bottom: 20px; }
    #apply:has(.app-form.is-submitted)::after { content: none; }
    #apply:has(.app-form.is-submitted) { padding-bottom: 20px; }

    #apply.is-closed ~ #terms.section::after,
    #apply:has(.app-form.is-submitted) ~ #terms.section::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        aspect-ratio: 1440 / 95;
        background: url('../assets/common/wave-bottom.svg') center bottom / 100% auto no-repeat;
        transform: translateY(calc(100% - 1px));
        pointer-events: none;
    }

    /* FAQ: single column */
    /* SP は既定 56px に上乗せして 80px（PC の 100px と同じ比率感）。 */
    #faq.section { padding-top: 50px; }
    /* Figma SP（375px）「Frame 1663」: 327×917 / column / padding 0。
       327 は 375 − 左右 24px。.section の左右 padding は 10px で素の幅が 355px に
       なるため、グリッド側で絞る（.faq__grid は margin: 0 auto で中央寄せ）。
       max-width: 100% は 320px 端末で 327px がはみ出さないための保険。
       Figma の align-items: center は 1列＋カードが align-self: stretch のため
       CSS 側では不要（グリッドの既定 stretch でカードが 327px いっぱいに広がる）。

       gap は 16px。Figma は 6枚を3枚ずつ2グループ（Frame 2924 / 3015）に分け、
       グループ内 16px・グループ間 14px になっているが、これは PC の2カラム
       グリッドを1列に畳んだ副産物で、14px はカラム間 gap のほう。1列に落とす
       CSS では行間＝グループ内の 16px を使う。

       高さ 917px は指定しない。実際は質問文・回答文の行数で1枚ずつ高さが違い、
       固定すると文言が1行増えた端末で回答がカードから溢れる。 */
    /* 幅は固定 px ではなく式で持つ。375px では 355 − 28 = 327px と Figma どおりで、
       それ以上の幅では画面に追従して伸びる（固定だと 441px 以上で取り残される）。 */
    .faq__grid {
        grid-template-columns: 1fr;
        width: calc(100% - 28px);
        max-width: 100%;
        gap: 16px;
    }
    /* Figma SP「Frame 2910」（質問ボックス）: 高さ 64px 固定 / padding 0 16px /
       gap 10px / align-items: center。文字は「Q」15px bold・質問文 14px bold の
       いずれも line-height 150%。
       高さは height ではなく min-height。現行文言の最長「応援金を受け取ると、
       卒業後の進路に制約はありますか？」でも 375px 幅で 2行（42px）に収まり
       64px を超えないが、文言が増えて3行になったときに height 固定だと
       オレンジ枠から文字がはみ出すため。
       上下 padding 8px は Figma の 0 からの意図的な差分。2行（42px）までは
       min-height 64px が勝つので描画は Figma と同一で、3行以上に増えたときだけ
       文字が枠の上下辺に貼り付くのを防ぐ保険として効く。 */
    .faq__item summary {
        min-height: 64px;
        padding: 8px 16px;
        font-size: 14px;
        line-height: 1.5;
    }
    .faq__q { font-size: 15px; }
    /* Figma SP「Frame 2911」（回答ボックス）: padding 16px / gap 10px /
       align-items: flex-start。文字は「A」15px bold・回答文 13px regular の
       いずれも line-height 150%（1行 20px）。
       ボックスの高さは max(「A」23px, 回答文の行数 × 20px) + padding 32px。
       「はい、併用可能です。」の1行だけは回答文（20px）より「A」（23px）が高く、
       Figma の 55px もこの max で決まっている。そのため .faq__a の 15px 指定を
       省くと（13px を継承して 20px になり）この1枚だけ 3px 低くなる。 */
    .faq__item p {
        padding: 16px;
        font-size: 13px;
        line-height: 1.5;
        align-items: flex-start;
    }
    .faq__a { font-size: 15px; }

    /* 募集終了の案内：880px 固定・175px 固定は PC 専用。SP は幅いっぱい＋内容追従に戻す
       （固定のままだと本文が3行以上になり overflow で読めなくなる）。 */
    /* Figma（SP 375px）: 327×196。327 は 375 − 左右24px。
       max-width: 100% は 320px 端末で 327px がはみ出さないようにするための保険。
       高さは height ではなく min-height。375px 以上では本文が 4行に収まり
       ちょうど 196px になるが、320px では 5行に増えて必要高が 196px を超える。
       height 固定だと本文がパネルからはみ出して重なるため、下限だけ 196px に
       固定して足りない分は伸ばす。 */
    /* 幅は固定 px ではなく「内容幅から左右のマージン分を引いた式」で持つ。
       .section の左右 padding は 10px なので内容幅はビューポート − 20px。
       375px では 355 − 28 = 327px と Figma 実測どおりになり、それ以上の幅では
       画面に追従して伸びる（767px で 719px）。固定 px だと 441px 以上で
       327px のまま取り残され、同じ #apply 内の .app-form（式に変更済み）だけが
       伸びて、募集終了パネルとフォームの幅が食い違ってしまう。 */
    .apply-closed {
        width: calc(100% - 28px);
        max-width: 100%;
        height: auto;
        min-height: 196px;
    }
    .apply-closed__inner {
        /* 外枠が min-height（＝高さが可変）になるため、% では解決できない。
           flex: 1 で外枠の高さいっぱいに伸ばす。 */
        height: auto;
        flex: 1;
        /* Figma「Frame 2926」: 311幅 / padding 24px 16px / gap 24px。
           311px は外枠 327px − padding 8px×2 で自動的に得られる。 */
        gap: 24px;
        /* 既定は align-items: center で、子が内容幅までしか広がらない。
           本文を左揃えにしても中央寄せの箱の中で左に付くだけになるため、
           SP では stretch にして横幅いっぱいに敷いてから左揃えにする。
           見出しは .apply-closed__inner の text-align: center を継承したまま。 */
        align-items: stretch;
    }
    /* 本文のみ左揃え。PC 用に入れてある <br> は SP では無効化し、
       画面幅なりに自然改行させる（文言は共通のまま出し分け不要）。 */
    .apply-closed__text { text-align: left; }
    .apply-closed__text br { display: none; }
    .br-sp { display: inline; }

    /* Form: single column throughout */
    /* Figma SP（375px）「form fields」: 327×793 / padding 24px / gap 24px / radius 16px。
       327 は 375 − 左右 24px。.section の左右 padding は 10px なので素の幅は 355px に
       なる。28px 広いぶんをフォーム側で絞る（.app-form は margin: 0 auto で中央寄せ）。
       幅はカードではなく .app-form に置く。カードだけ絞ると、その上に並ぶ
       .app-form__group-title が 355px のまま残って左端が揃わない。
       max-width: 100% は 320px 端末で 327px がはみ出さないための保険。
       高さ 793px は Figma の実測値だが、ラベルや注記が折り返す端末では超える。
       height を固定すると下の項目がカードからはみ出すため指定しない。 */
    .app-form { width: calc(100% - 28px); max-width: 100%; gap: 32px; }
    .app-form__card { padding: 24px; gap: 24px; }
    /* Figma「Frame 2926」: padding 24px 16px / gap 24px / 311幅。
       311px は外枠（送信完了時の .app-form__card = padding 8px）から自動的に得られる。
       本文は Figma で align-self: stretch ＋ text-align 未指定＝左揃え。
       募集終了パネルと同じ扱いに揃える（見出しだけ中央）。 */
    .apply-done { padding: 24px 16px; gap: 24px; align-items: stretch; }
    .apply-done__title { text-align: center; }
    .apply-done__text { text-align: left; }
    .apply-done__text br { display: none; }
    .app-form__row--2, .app-form__row--3 { grid-template-columns: 1fr; }
    /* 使いみちと金額を .usage-table__fields でひとまとめにし、削除ボタンは
       position:absolute で行の右上へ逃がす。

       従来は行を「1fr 44px」のグリッドにして金額欄の隣にボタンを置いていたが、
       削除ボタンを持たない1行目まで 44px を空けてしまい、金額欄だけ 352px と
       使いみち欄の 404px より短くなって段差が見えていた。
       ボタンをフローから外せば、全行とも入力欄が同じ幅（＝行の全幅）になる。 */
    .usage-table__row {
        display: block;
        position: relative;
    }
    .usage-table__fields {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    /* Rows stack vertically here, so the column header can't label anything —
       the per-row labels below replace it entirely. */
    .usage-table__head { display: none; }
    /* Reveal the sr-only labels: each input gets its own visible name.
       Undoes every clipping declaration from the base rule. */
    .usage-table__label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
        font-size: 13px;
        font-weight: 700;
        color: var(--c-text-mid);
    }
    .usage-table__label + input { margin-bottom: 4px; }
    /* 1行目のラベル行の右端に重ねる。ラベル「使いみち（項目）」は 13px×9文字で
       約 117px、行幅は 400px 前後あるため文字と重ならない。
       フローから外れるので、ボタンの有無で入力欄の幅も行の高さも変わらない。 */
    .usage-table__remove {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: 22px;
        padding: 0 8px;
        font-size: 12px;
    }
    /* Radio group: 2-col grid on SP (was single-column stack) */
    .radios {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .radio { justify-content: center; }
    /* 「使う予定のテクノロジー・ツール・サービス名」は21文字あり、SP のフィールド幅では
       .field label の flex 横並び（ラベル ─ 必須バッジ）が収まらない。
       この項目だけ縦積みにして、必須バッジを次の行の左端に置く。
       gap はベースの 8px だと縦方向では空きすぎるため 4px に詰める。
       他の長いラベル（実行計画17文字・これまでのIT経験16文字など）は現状の折り返しで
       収まっているため対象にしていない。 */
    label[for="f-tools"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Figma SP: 12px / weight 400 / line-height 150% / letter-spacing 0。
       weight は body から 400 を継承し、letter-spacing 0% は既定の normal と
       同値のため、指定するのは font-size と line-height のみ。
       align-items: flex-start は文言が複数行になったときチェックボックスを
       1行目に合わせるためのもので、Figma 指定とは別軸。 */
    /* Figma SP「check box section」: 279×168 / gap 16px / padding 14px 8px /
       radius secondary_middle。
       幅 279px は指定しない。.app-form（327px）− .app-form__card の padding 24px×2
       で自動的に 279px になるうえ、固定すると 375px より広い画面で追従しなくなる。
       高さ 168px も指定しない。同意文言は3件とも2行に折り返す長さで、端末幅や
       文言の変更で行数が変わるため、固定するとチェックが枠から溢れる。 */
    .agree {
        padding: 14px 8px;
        gap: 16px;
        border-radius: var(--radius-secondary-middle);
    }
    .check { align-items: flex-start; font-size: 12px; line-height: 1.5; }
    /* Checkbox smaller on SP + flex-shrink:0 so long label text can't compress the box */
    .check input {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        flex-shrink: 0;
    }

    /* Terms */
    /* Figma SP: ドロップダウンの外形は 327px。
       .section の左右 padding が 10px のため素の幅は 355px で 28px 広い。
       max-width で絞る（.terms-card は margin: 0 auto なので中央寄せされる）。
       カード間の 16px は .terms-card の margin-bottom が担う。 */
    /* 幅は固定 px ではなく「内容幅から左右のマージン分を引いた式」で持つ。
       .section の左右 padding は 10px なので内容幅はビューポート − 20px。
       375px では 355 − 28 = 327px と Figma 実測どおりになり、それ以上の幅では
       画面に追従して伸びる（767px で 719px）。固定 px だと 441px 以上で
       327px のまま取り残され、広い画面に細い1本の列が残ってしまう。 */
    .terms-card { max-width: calc(100% - 28px); }
    .terms-card__head { padding: 18px 20px; font-size: 14px; }
    .terms-card__body { padding: 24px 20px; }

    /* Closing */
    /* Figma SP「log_member_PC」: 375×319 / padding 32px / radius 16px。
       中身の縦積みは 311px 幅（= 375 − 32×2）で、見出し・本文・ボタンの間隔は
       「Frame 1663」の gap 30px。
       319 = padding 32 ＋ 中身 255（見出し 66 ＋ 30 ＋ 本文 48 ＋ 30 ＋ ボタン 81）
       ＋ padding 32 で辻褄が合う。
       margin-top は 0。SP は .gray-band::after を消してあるので、PC のような
       波の逃げが要らない。規約の下余白 20px ＋ padding 32px ＝ 見出しまで 52px。 */
    .closing-cta { margin-top: 0; padding: 32px; gap: 30px; }
    /* 送信完了時だけ上に 40px 足す。通常時は直前の #terms が長く、規約の下余白
       20px ＋ カードの padding 32px で見出しまで十分に空くが、.is-submitted では
       #apply が完了カードだけに縮み、#terms の下に波（#terms::after）が出るため、
       margin-top: 0 のままだと波とこのカードの上辺が接して窮屈に見える。
       20px では波の張り出し（375px で約 25px）を吸収しきれなかったため 40px。
       .closing-cta は .gray-band の外＝その次の兄弟なので、#apply ではなく
       .gray-band 側で :has() を効かせる。
       :has() 非対応のブラウザではこのルールごと無視され、通常時と同じ
       margin-top: 0 になるだけで崩れはしない。 */
    .gray-band:has(.app-form.is-submitted) + .closing-cta { margin-top: 40px; }
    /* Figma SP: 22px / weight 700 / line-height 150%（2行で 66px）。
       ウェイトは PC の 900 から 700 に落ちる。
       letter-spacing は Figma が未指定＝0 なので持たない（以前の 0.02em を撤去）。
       2行に割るのは index.html の <br class="br-sp">。311px 幅なら
       「挑戦は、それから。」（9文字・198px）も1行に収まるため、
       折り返しは自動ではなく br で固定している。 */
    .closing-cta h2 { font-size: 22px; font-weight: 700; }
    /* 本文は Figma 指定（14px / line-height 170% / weight 400 / letter-spacing 0）が
       PC と同値のため、SP 用の font-size 上書きは持たない。ベースの
       .closing-cta p（14px / 1.7）がそのまま効く。

       幅は Figma（375px 基準）の 311px で固定する。padding だけに任せると
       375px 端末でしか 311px にならず、390px や 430px の端末では 326px・366px と
       広がって折り返し位置が設計とずれるため。
       .closing-cta は align-items: center なので、狭めても中央に収まる。 */
    .closing-cta p { max-width: 311px; }
    /* Figma SP: ボタンは 311×81 / gap 16px / radius max / padding 27px 112px。
       311px は .closing-cta の内容幅そのもの（375 − padding 32px×2）で、
       上の .closing-cta p の 311px と左右が揃う。max-width: 100% は 320px 端末用。
       高さは min-height ではなく height。81 = padding 27×2 + 行ボックス 27px で、
       Figma 側は 1行前提の固定値。.btn は align-items: center なので、行ボックスが
       27px に満たなくても中央に収まる。

       左右 padding だけ Figma の 112px を採らず 16px にしている。112px は PC 版
       （390px 幅）から残った値で、SP の実測は 72.5px（Figma のアイコン Bounding box
       の left が 72.5px）。311 − 内容 166px（アイコン 24 ＋ gap 16 ＋ ラベル 126）を
       左右で割った値であり、幅が 311px 固定・justify-content: center である以上、
       左右 padding は中央寄せの下限として働くだけなので値そのものに意味はない。
       320px 端末では max-width: 100% でボタンが 256px まで縮むが、内容 166px ＋
       左右 16px＝198px なので折り返さない。112px のままだと内容領域が 32px しか
       残らずラベルが折り返して height: 81px から溢れる。
       文字サイズ 18px・アイコン 24px は Figma SP の指定どおり（以前は 15px / 20px に
       落としていたが、これは左右 112px 前提で幅が足りないと見誤っていたための保険）。
       高さ 81px の内訳も padding 27×2 ＋ 行ボックス 27px（18px × 150%）で一致する。
       アイコン 24px は .closing-cta .btn__icon の既定値と同じなので再指定しない。
       gap 16px と radius max も .closing-cta .btn--primary と .btn の既定値が
       そのまま該当するため再指定しない。 */
    .closing-cta .btn--lg {
        width: 311px;
        max-width: 100%;
        height: 81px;
        padding: 27px 16px;
        font-size: 18px;
    }

    /* Back-to-top button centered horizontally at bottom on SP */
    .back-to-top {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        /* ★画面下固定の .sticky-cta は下から 72px までを占める。
           この値は 54px なので、ボタン（高さ 56px・占有 54〜110px）は CTA と
           18px 重なる。指示による意図的な配置。
           重ならない下限は 72px、元の設計値は 84px（間隔 12px）。 */
        bottom: 54px;
    }

    /* Footer */
    .site-footer { padding: 20px 16px; }
    .site-footer__inner { text-align: center; }
}

/* -------- Narrow phones (375px 以下) -------- */
/* 雲の SVG は幅に比例して伸縮するのに対し top は固定 px のため、幅が狭いほど
   ふくらみがヒーロー内で相対的に上へずれる。375px 幅ではその分だけ雲を下げる。
   数値を大きく（0 に近づける）ほど下、小さくするほど上に動く。 */
/* iPhone 実機幅（375 / 390 / 430 / 440）で 375px デザインの見た目を保つ帯。
   --u は「375px デザイン上の 1px」。ビューポート幅に比例するので、この中の
   数値をすべて calc(N * var(--u)) で書けば構図がそのまま拡大される。
   max(1px, ...) で 375px 以下では 1px に固定している。こうすると 375px 以下の
   見え方は従来と完全に同一のまま、376px 以上だけが比例拡大される
   （320px 端末向けに個別調整済みの値を巻き込んで縮めてしまわないため）。 */
@media (max-width: 440px) {
    :root { --u: max(1px, 100vw / 375); }

    /* ここから下は 375px 幅の @media (max-width: 767px) 側の実測値を --u で
       置き直したもの。これがないと余白・文字サイズだけ 375px 固定のまま残り、
       マスコットや雲だけが伸びて構図が崩れる。 */
    .hero { padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u)); }
    .hero__brand { top: calc(40 * var(--u)); left: calc(20 * var(--u)); }
    .hero__grid { gap: calc(30 * var(--u)); }
    .hero__message {
        max-width: calc(375 * var(--u));
        padding: 0 calc(12 * var(--u));
        gap: calc(17.83 * var(--u));
    }
    /* 上限だけ --u 化する。8.5vw はもともと幅に比例するので、375px で 31.875px、
       440px で 37.4px と自動的に構図どおりに伸びる。 */
    .hero__title {
        max-width: calc(311 * var(--u));
        font-size: clamp(26px, 8.5vw, calc(32 * var(--u)));
        letter-spacing: calc(2.23 * var(--u));
    }
    .hero__lead { max-width: calc(311 * var(--u)); font-size: calc(14 * var(--u)); }
    .hero__cta { margin-top: calc(-70 * var(--u)); gap: calc(12 * var(--u)); }
    .hero__sp-cta {
        width: clamp(64px, 22vw, calc(88 * var(--u)));
        height: clamp(64px, 22vw, calc(88 * var(--u)));
        font-size: calc(13 * var(--u));
    }
    .hero__sp-cta::after { margin-top: calc(4 * var(--u)); width: calc(20 * var(--u)); }
    /* 丸が --u で縮むので、上の三角も同じ比率で追従させる（19×13 が原寸）。 */
    .hero__sp-cta::before {
        left: calc(50% - 10 * var(--u));
        margin-bottom: calc(14 * var(--u));
        width: calc(19 * var(--u));
        height: calc(13 * var(--u));
    }

    /* CTA ボタンとセクションナビも --u 化する。ここが固定 px のままだと
       ヒーローの流し込み高さだけ比例せず、その下にある .recommend（＝雲の
       位置の基準）が本来より上がってしまい、見出しと雲の重なりがズレる。
       375px で 64px＋68px のこの2つが、440px では 21.7px 分だけ足りなかった。
       3.6vw / 8.5vw のようにもともと幅比例の値は上限だけ --u 化すれば足りる。 */
    .hero__cta .btn--lg {
        padding: calc(14 * var(--u)) calc(24 * var(--u));
        min-height: calc(64 * var(--u));
        font-size: calc(15 * var(--u));
        max-width: calc(311 * var(--u));
    }
    .section-nav__item {
        padding: calc(16 * var(--u)) calc(4 * var(--u));
        font-size: clamp(11.5px, 3.6vw, calc(14 * var(--u)));
        border-radius: calc(8 * var(--u));
    }
    /* 雲の上端をマスコットまで引き上げる（ロケットが雲から飛び出して見える位置）。
       SVG の上端 175px ほどは透明なグラデーションのため、白の見えはじめは
       画像上端よりかなり下になる。数値の増減と見た目のズレに注意。
       数値を小さく（負を大きく）するほど上、大きくするほど下に動く。 */
    /* 下の .hero { padding-bottom } を 52px 削った分、.recommend の上端も 52px 上がる。
       雲はこの上端が基準なので、同じ 52px を top に足し戻して見た目の位置を維持する
       （-860 + 52 = -808）。padding と この値は必ず対で調整すること。 */
    .recommend::before { top: calc(-808 * var(--u)); }

    /* マスコットを画面幅いっぱいまで拡大（335 → 375px、高さ 415 → 465px）。
       .hero の左右 padding 20px を負マージンで相殺している。
       max-width では拡大できない：width:100% がカラム幅 335px を基準に解決される
       ため、明示的に width を広げる必要がある。
       これ以上大きくすると（例 calc(100% + 80px)）文書幅が 395px になって
       横スクロールが出るため、無条件に拡大できる上限がこの値。 */
    /* 左右マージンの合計（-40px）は変えずに配分だけ右寄りにして 12px 右へ移動する。
       合計を変えると width の計算基準がずれて画像幅まで変わってしまう。
       右へ寄せられる量は「ビューポート幅 − 画像幅」まで。実測で 24px 寄せると
       文書幅が 379px になり横スクロールが出るため、12px に留めている。 */
    .hero__mascot img {
        width: calc(100% + 50 * var(--u));
        max-width: none;
        /* 幅は上の width で決め切る。flex-shrink を残すと、376px 以上で <picture> が
           2倍 PNG（intrinsic 718px）から SVG（intrinsic 359px）に切り替わった瞬間に
           min-width:auto の下限が 718 → 359 へ下がり、はみ出し分だけ縮められてしまう。
           375px で縮まないのは intrinsic 718px が下限になっているからで、意図した
           挙動ではない。0 にして幅の決まり方を画像の intrinsic から切り離す。 */
        flex-shrink: 0;
        margin: 0 calc(-3 * var(--u)) 0 calc(-25 * var(--u));
        /* translateY: 上へ 10px（見た目だけの移動。margin と違いレイアウトを動かさないので、
           下に続く見出し・リード文の位置は変わらない）。
           rotate: 反時計回り。回転すると外接矩形が広がるため、右側のはみ出しは
           .hero 側の overflow-x: clip で切り落とす。 */
        transform: translateY(calc(-10 * var(--u))) rotate(-10deg);
    }
    /* overflow-x: hidden ではなく clip を使う：hidden は反対の軸を自動的に auto へ
       変えてしまい、縦方向にスクロールコンテナが生まれる。clip なら overflow-y は
       visible のまま保たれる。 */
    /* padding-bottom: transform で見出し・CTA を引き上げた分、ヒーロー下端に余った
       空きを詰める（SP 既定 56px → 4px）。ここを削ると .recommend ごと 52px 上がるため、
       上の .recommend::before の top に同じ 52px を足して雲の位置を据え置いている。 */
    .hero { overflow-x: clip; }

    /* 見出し・リード文・CTA を雲の上端まで引き上げ、雲の白が始まる位置（y≈700）の
       10px 下に見出しの上端が来るようにする（375px 実測で現状より 124px 上）。
       値は SP 既定（.hero__message: translateY(10px) / .hero__cta: translateY(80px)）
       からそれぞれ 124px 引いたもの。両方を同量ずらすので相互の間隔は変わらない。
       margin ではなく transform を使う理由：margin だとフローが縮んで .recommend ごと
       上がり、雲も一緒に動くため見出しと雲の位置関係が変わらない。 */
    .hero__message { transform: translateY(calc(-114 * var(--u))); }
    .hero__cta { transform: translateY(calc(-44 * var(--u))); }

    /* 丸型 CTA バッジは雲の右上へ。.hero__message 基準の絶対配置なので、
       上の translateY(-114px) には自動で追従する。ここではさらに 10px 上へ出し、
       見出しの上端（＝雲の白の始まり y≈700）より一段高い位置に置く。 */
    /* right は「右端からの距離」なので、右へ動かすには値を減らす（16px → 11px ＝ 5px 右）。 */
    .hero__sp-cta { top: calc(-50 * var(--u)); right: calc(11 * var(--u)); }

    /* CTA とセクションナビの間隔を 180px → 56px に戻す。上で CTA を 124px 引き上げた
       ぶんだけ間隔が広がっていたため、ナビも同じ 124px 引き上げる
       （SP 既定の translateY(80px) − 124px）。56px は他セクションと揃えた既定値。
       .hero の padding-bottom を削る手もあるが、それだとフローが縮んで .recommend ごと
       上がり、雲と見出しの位置関係が崩れる。 */
    /* ナビの visual 位置。ナビ下端と見出しの間隔はこの値の符号反転にそのまま等しい
       （見出し＝.recommend 上端、ナビ layout 下端も同位置のため）。-24px ＝ 下 24px。 */
    /* height/gap/padding は非メディアクエリの .section-nav（68px 固定）由来。
       ここを比例させないとナビの高さだけ据え置かれ、下の .recommend＝雲の基準が
       11.8px 上がってしまう。 */
    .section-nav {
        transform: translateY(calc(-24 * var(--u)));
        height: calc(68 * var(--u));
        gap: calc(9 * var(--u));
        padding: 0 calc(16 * var(--u));
    }

    /* セクションナビと見出し「挑戦の実行費用に、5万円。」の間隔を 164px → 84px に詰める
       （SP 既定の padding-top 120px → 40px）。
       この padding は .recommend の内側にあるため、削っても .recommend 自体の上端は
       動かない ＝ 雲（.recommend::before の基準）の位置には影響しない。 */
    .intro { padding-top: 0px; }

    /* バッジ（3つの円）と「支援する4つの挑戦」の間の上余白を削除。
       SP 既定は clamp(28px, 12vw, 48px)＝375px 幅で 45px。
       残る間隔は .intro 側の padding-bottom（約38px）による。 */
    .recommend .challenges-inner { padding-top: 0; }

    /* チャレンジカードを Figma 実測の 155px 幅にする。カード幅は固定値ではなく
       コンテナから決まるため、375px 幅でグリッドの外形が 326px（＝155×2 + gap 16）
       になるよう、グリッド自身に width を持たせる。
       326px は募集要項テーブル（.req-table の max-width）と注記
       （.challenges__note のテキスト幅）に合わせた値。SP の本文カラムを 326px で
       統一すると、カード → 注記 → 募集要項の左右端が縦に揃う。
       外形を .recommend の padding 任せ（335px）にしないのは、padding が .intro など
       他の子にも効くため、ここだけ 9px 詰めたいときに他要素まで動いてしまうから。
       grid は margin: 0 auto なので 335px の中で中央寄せされ、左端は 20 + 4.5 =
       24.5px と注記の 24px にほぼ一致する。
       gap を 25px から 16px にするのは、外形 326px でカード 155px を保つため
       （326 − 155×2 = 16）。gap を据え置くとカードが 150.5px に痩せる。
       max-width: 100% は 320px 端末での溢れ止め。--u は 375px 未満では 1px 固定
       （max(1px, 100vw/375)）なので、326px がそのまま 320px 幅を超えてしまう。
       .challenge 側に width を直接指定しないのは、320px 端末で 155px が入らず
       はみ出すため（グリッドの 1fr なら自動で縮む）。 */
    .recommend { padding-left: calc(20 * var(--u)); padding-right: calc(20 * var(--u)); }
    .challenges__grid {
        width: calc(326 * var(--u));
        max-width: 100%;
        gap: calc(16 * var(--u));
    }
    /* バッジ（合成SVG）も同じ 326px カラムに載せる。
       既定では .recommend の padding 20px ＋ .intro の padding 2px から決まる
       331px いっぱいに広がり、真下の .challenges__grid（326px）より左右 2.5px ずつ
       はみ出していた。326px に揃えると両者の左端が 24.5px で一致する。
       .intro__inner は SP で justify-items: center なので、幅を決めるだけで
       中央寄せされる（margin: 0 auto は不要）。
       img 側は base の width: 100% ＋ aspect-ratio 453/419 が効いたままなので、
       高さは 326 × 419/453 ≒ 301.6px に自動追従する。
       .challenges__grid と同じ --u 換算にするのは、440px 幅で片方だけ 326px 固定に
       取り残されて左端がズレるのを避けるため。
       max-width: 100% が 320px 端末（--u が 1px 固定で 326px が縮まない帯）で効くのは、
       親 .intro__inner のトラックを minmax(0, 1fr) にしてあるのが前提。理由はそちらの
       コメント参照。1fr に戻すと 320px で 6px 横に溢れる。 */
    .intro__badges { width: calc(326 * var(--u)); max-width: 100%; }

    /* .recommend と募集要項セクションの間隔を 70px → 24px に詰める。
       見た目の余白はこの margin だけでなく、前後の padding
       （.challenges-inner の padding-bottom 56px ＋ .section の padding-top 56px）
       との合計で決まる点に注意。 */
    .section--orange-bg { margin-top: calc(24 * var(--u)); }


    /* 募集要項の背景。SP 用 PNG は 750×2668（縦横比 3.56:1）で、375px 幅の
       縦長セクションに合わせて作られている。background-size: 100% 100% は
       縦横比を無視して枠いっぱいに引き伸ばすため、画面が広がるほど波形が縦に潰れる。
       セクションの実高 ÷ 画像の自然高（幅 × 3.557）は 375px で 0.99 とほぼ等倍だが、
       500px で 0.61、767px で 0.34 まで落ち、下端の波形がほとんど直線に見える。
       そのため SP 画像はこの 440px ブロック（--u によるスケーリングが効く範囲）に
       限定し、441px 以上はベースの PC 用 PNG（1440×1134）に任せる。
       PC 用 PNG は横長なので 441〜767px では横に詰まる方向に歪み、波形は
       「細かく・深く」なる。潰れて消えるより形が保たれるぶん見た目が破綻しない。 */
    .section--orange-bg {
        background-image: url('../assets/sp/section-orange-bg.png');
    }

    /* 注記「使いみちの共通ルール…」Figma SP 実測。
       ・12px / line-height 150%（＝18px）→ 3行で高さ 54px
       ・左右 padding を 20px → 4px に。.recommend の 20px と合わせて左 24px、
         テキスト幅 327px（Figma: left 24px / width 326px）
       ・color #5C5C5C は既存の --c-text-sub と同値のため指定不要
       ・text-align は Figma 側の指定になし＝左寄せ（従来は中央寄せ）
       position: absolute / top: 2946px は Figma アートボード上の座標なので適用しない。 */
    .challenges__note {
        padding: 0 calc(4 * var(--u));
        font-size: calc(12 * var(--u));
        line-height: 1.5;
        text-align: left;
    }

    /* チップ（使いみちの例）— Figma SP 実測に合わせて縮小。
       font-size は Figma に指定がないため実測値から逆算した:
         幅 59.98 =「サーバー代」5字 × F ＋ 左右padding 4.98761×2 ＋ border 0.623451×2 → F ≈ 9.75px
         高さ 17.99 = F × line-height ＋ 上下padding 2.4938×2 ＋ border 0.623451×2 → line-height ≈ 1.2
       幅・高さは固定しない：文字数がチップごとに異なる（「実費」2字〜「開発ツール課金」7字）ため、
       上記の font-size と padding から各チップの寸法が自然に決まる。 */
    .chip {
        padding: calc(2.4938 * var(--u)) calc(4.98761 * var(--u));
        border-width: calc(0.623451 * var(--u));
        border-radius: calc(2.4938 * var(--u));
        font-size: calc(10 * var(--u));
        line-height: 1.2;
    }
}

/* ---------- チップス折り返し禁止（「解決する」カード専用） ---------- */
/* .chips--nowrap は「解決する」カードの3チップ（ツール課金／API利用料／実費）にのみ
   付与する。flex-wrap: wrap は「行に収まらない最後の要素を次行へ送る」挙動のため、
   幅が 1px でも超えると「実費」だけが2行目に落ちる。padding/gap の調整で幅は足りて
   いるが、フォント差・ブラウザのサブピクセル丸め・将来のラベル変更で再発しうるため、
   構造的に折り返しを禁止して1行を確定させる。

   ・768px 以上（PC レイアウト）に限定：SP（375px）ではカード内幅 129px に対し3チップで約164px 必要で、
     nowrap にするとカードの丸枠を突き破る。SP は 2行のまま維持する。
   ・「つくる」カードも3チップだが「開発ツール課金」が長く 207px に収まらないため、
     この修飾クラスは付与しない（全体に nowrap を当ててはいけない）。
   ・ファイル末尾に置く理由：基底の .chips { flex-wrap: wrap } と詳細度が同じ（0,1,0）
     なので、後勝ちさせるためソース順で最後に来る必要がある。 */
/* ---------- PC レイアウトは 1440px 固定 ---------- */
/* 768px 以上は画面幅にかかわらず常に 1440px で描画する（縮小も伸縮もしない）。
   画面が 1440px に満たない場合は横スクロールで見せる。
   ・width / min-width とも --design-w：max-width ではなく width で固定することで、
     窓幅を変えても中身の配置が一切動かなくなる。
   ・margin-inline: auto：1440px より広い画面では中央に置く。
   ・--gutter：既定は clamp(20px, 8vw, 120px) で vw 依存のため、窓幅を変えると
     左右余白だけが動いてしまう。1440px 時の実効値 8vw = 115.2px に固定する。
   ・overflow-x：既定の body は装飾のはみ出しを切るため hidden にしているが、
     body の overflow はビューポートに伝播して横スクロール自体を殺してしまう。
     1440px 固定では横スクロールが前提になるため PC 側だけ visible に戻す。 */
@media (min-width: 768px) {
    :root { --gutter: 115.2px; }
    body {
        width: var(--design-w);
        min-width: var(--design-w);
        margin-inline: auto;
        overflow-x: visible;
        /* position: absolute の包含ブロックを body（＝1440px キャンバス）にする。
           これがないと .side-nav に位置指定された祖先が存在せず、初期包含ブロック
           （ビューポート幅）を基準にしてしまい、窓幅を変えるたびにナビだけが動く。 */
        position: relative;
    }
}

/* FAQ カードの Figma 実測値（カード208 / 質問80 / 回答126）は、FAQ グリッドが
   max-width 880px いっぱいに開いて1列 282.6667px になっている前提の数値。
   上の min-width により PC 帯では常に body が 1200px 以上あり、グリッドは必ず
   880px まで開くため、PC 帯全域で固定値を適用して問題ない。 */
@media (min-width: 768px) {
    .faq__item { height: 208px; }
    .faq__item summary { height: 80px; padding: 0 24px; }
    /* 128 - 2（カード上下の border 1px×2）。導出は .faq__item p のコメント参照。 */
    .faq__item p { height: calc(208px - 2px - 80px); }
}

/* PC レイアウトが効く範囲（≥768px）でのみチップスの折り返しを禁止する。
   SP は挑戦カードが約155px しかなく、nowrap にすると枠を突き破るため対象外。 */
@media (min-width: 768px) {
    .chips--nowrap { flex-wrap: nowrap; }
    /* nowrap 下では flex アイテムが縮められる可能性があるため、チップ内の文字を
       折り返さず、かつ縮小もさせない。 */
    .chips--nowrap .chip { flex: 0 0 auto; white-space: nowrap; }
}