/* ================================================================
   発達障害と生きる、ご本人とご家族のためのプログラム LP 専用CSS（/program/tokusei）
   精神保健福祉士・窪田かおりのプログラム（2本目）。

   ■ 読み込み方
     program.css → program-tokusei.css の順に読み込む。program.css は1バイトも変更しない。
     このプラン固有の意匠は tk- の接頭辞のクラスで持つ。

   ■ デザイン思想（2026-11-09。深見さんが案A「色分けの付箋」を基本に採り、「軽く見えないように本物らしい付箋に」
     「方眼のノートも一部に」「見出しは明朝も検討」と指示した。比較は live-office の notes/2026-11-09_発達障害_デザインの方向3案.html）
     テーマは「見通しを立てて、自分に合った工夫で暮らす」。ヒーローの写真（色分けした付箋で週の予定を整える）を、
     ページの部品にそのまま持ち込む。付箋は飾りではなく「色分けの工夫」そのものなので、色の意味を1つに決めて守る：
       黄＝心の声と心のケア／青＝暮らしの工夫（と回の番号の見出し）／緑＝福祉と制度。ほかの意味で付箋の色を使わない。
     付箋は本物らしく見せる：上端の22px（のりの帯）を少し濃く、紙の繊維をごく薄く、下に落ちる影、わずかな傾き。角は丸めない。
     方眼のノートは2か所だけ：ヒーローの地と、プログラムの流れ（ルーズリーフの穴と縦の余白線のある1ページ）。
     写真は、白い縁のある紙焼きのように置く（SP のヒーローだけは画面の幅いっぱい）。
     最後の呼びかけの写真に、ヒーローのキャッチを書いた黄色の付箋を貼る。付箋の隅に、①の猫と同じ線の小さな猫を青いペンの落書きのように描く
     （窪田さんは猫好きで相談者に知れ渡っている。①と同じく、さりげなく1か所だけ）。
     落ち着いた大人の読み物にするため、見出しは明朝、本文は読みやすさを重視した UD の書体。
     心の声の付箋だけは、手書きの自問自答（細いペン＋矢印＋中太の青ペン）にする。印刷の文字が付箋に入っていると不自然なため（2026-11-09 深見さん）。
     最後の付箋の問い（努力が足りないから？育て方のせい？）に、窪田さんが大切にしている言葉のカードが答える。

   ■ 色（2026-11-09）
     紙 #F7F8FA（ページの背景）／面 #EDF2F8（心の声・目指すこと・受け方・流れ・最後の呼びかけ）／白 #FFFFFF／罫線 #D9E0E9
     文字 #1F2B3A／説明の文字 #44505F／補助の文字 #586374（12〜14pxの注記）
     青 #2F64AE（申込ボタン・選んだ空き枠の塗り。白い文字 5.91）／濃い青 #244F8C（ボタンに触れたとき）
     青の文字 #2B5797（小見出し・金額・リンクなど、色付きの文字はすべてこれ）／淡い青 #E4EDF9（初回の箱・必須の印）
     付箋：黄 #FCEFB6・青 #D6E6F8・緑 #D5EFE1。付箋の上の文字は本文の色（説明の文字でも 6.46 以上）
     方眼の線：青の 7.5%。蛍光ペンの印：黄（付箋の黄より少し濃い）
     コントラスト：文字と紙 13.49／補助の文字と面 5.40／青の文字と淡い青 6.10・青の付箋 5.68／ボタンの2行目と青 4.73

   ■ 書体と大きさ（PC → SP）
     見出しは Shippori Mincho（600）、本文は BIZ UDPゴシック。本文 16px・行間 1.9
     見出しの書体は --tk-head の1か所で決める（丸ゴシックとの比較のため）
     キャッチ 52 → 30（SP は写真に重ねる）／ページの名前 24 → 16／節の見出し 36 → 24／小さな見出し 22 → 20
     初回の金額は数字だけ 56 → 40、本体の金額は数字だけ 40 → 30。「円（税込）」は 16px で折り返さない

   ■ ページの構成
     ヒーロー → 心の声 → おすすめ → 目指すこと → 概要 → ご本人も、ご家族も → 料金 → 流れ →
     担当カウンセラー → 事前のご準備 → ご利用にあたって → よくあるご質問 → 最後の呼びかけ → 予約
     最初の画面（PC 縦900px・SP 縦664px）に、キャッチ・申込ボタン・初回 5,500円（税込）を収める。

   ■ やらないこと
     英語の飾り見出し、バッジ、利用者の声、実績の数字、効果を約束する図（ビフォー・アフター）、
     医療を思わせる写真、暗さや孤独を強調する写真、グラデーションの面（SP のヒーローのキャッチの下地と、
     蛍光ペンの印・付箋ののりの帯だけは例外。どれも面の色の移り変わりではなく、読みやすさと質感のため）
   ---------------------------------------------------------------- */


/* ================================================================
   1. テーマトークン
   body.program-lp--tokusei に載せ、program.css の --lp-* も青の配色に上書きする
   （予約フォーム・空き枠カレンダー・フッター・パンくずの共有部品が、そのまま青の配色になる）
   ---------------------------------------------------------------- */
.program-lp--tokusei {
    --tk-paper: #F7F8FA;
    --tk-band: #EDF2F8;
    --tk-white: #FFFFFF;
    --tk-ink: #1F2B3A;
    --tk-ink-sub: #44505F;
    --tk-ink-soft: #586374;
    --tk-line: #D9E0E9;
    --tk-blue: #2F64AE;
    --tk-blue-hover: #244F8C;
    --tk-blue-ink: #2B5797;
    --tk-blue-pale: #E4EDF9;
    --tk-note-yellow: #FCEFB6;
    --tk-note-blue: #D6E6F8;
    --tk-note-mint: #D5EFE1;
    --tk-grid: rgba(47, 100, 174, .075);
    --tk-marker: rgba(250, 222, 110, .7);
    --tk-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    --tk-sans: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    --tk-head: var(--tk-serif);

    --lp-bg: var(--tk-paper);
    --lp-bg-deep: var(--tk-band);
    --lp-bg-warm: var(--tk-blue-pale);
    --lp-paper: var(--tk-white);
    --lp-ink: var(--tk-ink);
    --lp-ink-soft: var(--tk-ink-soft);
    --lp-line: var(--tk-line);
    --lp-pink: var(--tk-blue);
    --lp-pink-hover: var(--tk-blue-hover);
    --lp-pink-soft: var(--tk-blue-pale);
    /* 淡い青の上の文字（必須の印）。青の塗りの上の文字（ボタン・選んだ空き枠）は白なので、下の 5 で個別に上書きする */
    --lp-pink-ink: var(--tk-blue-ink);
    --lp-sage: var(--tk-blue);
    --lp-sage-deep: var(--tk-blue-ink);
    --lp-sage-soft: var(--tk-blue-pale);
    --lp-font: var(--tk-sans);
    --lp-serif: var(--tk-serif);
}

/* ================================================================
   2. 基本
   ---------------------------------------------------------------- */
body.program-lp--tokusei {
    background: var(--tk-paper);
    color: var(--tk-ink);
    font-family: var(--tk-sans);
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: .03em;
}
/* 固定のヘッダーの下に見出しが潜らないようにする（ナビの移動・送信後の #reserve への戻り） */
.program-lp--tokusei [id] { scroll-margin-top: 76px; }
.tk-pc { display: none; }

.tk-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--tk-blue); color: #fff; padding: 10px 16px;
}
.tk-skip:focus { left: 8px; top: 8px; }

.tk-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* 句の途中で折らない。折ってよい位置は HTML の <wbr> と <br> と句読点だけ（Safari は auto-phrase が効かないため）。
   共通の部品（予約の見出しなど）は <wbr> を入れられないので、このページの見出しだけに絞る */
.tk-h2,
.tk-h3,
.tk-hero__title,
.tk-closing__title,
.tk-flow__phase-title,
.tk-steps h4,
.tk-hero__catch,
.tk-hero__lead,
.tk-hand,
.tk-message__text p,
.tk-pledge { word-break: keep-all; overflow-wrap: anywhere; }

/* program.css の h1〜h3（0,1,1）に勝たせるため、見出しは要素名付きで書く */
.program-lp--tokusei h2.tk-h2 {
    font-family: var(--tk-head);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .03em;
    color: var(--tk-ink);
}
.program-lp--tokusei h3.tk-h3 {
    font-family: var(--tk-head);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--tk-ink);
}
.tk-head { margin-bottom: 32px; }
.tk-head--center { text-align: center; }
.tk-head__lead { margin-top: 14px; color: var(--tk-ink-sub); }
.tk-eyebrow { font-size: 14px; font-weight: 700; line-height: 1.8; color: var(--tk-blue-ink); margin-bottom: 6px; }
.tk-note { font-size: 13px; line-height: 1.8; color: var(--tk-ink-soft); }
.tk-prose p + p { margin-top: 1.1em; }
.tk-sec { position: relative; padding: 64px 0; }
.tk-sec--band { background: var(--tk-band); }
.tk-sec--rule .tk-col { border-top: 1px solid var(--tk-line); padding-top: 48px; }

.program-lp--tokusei .tk-pledge {
    font-family: var(--tk-head);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--tk-blue-ink);
    margin-bottom: 20px;
}
/* 蛍光ペンの印。文字の下 4 割にだけ引く */
.tk-mark {
    background: linear-gradient(transparent 58%, var(--tk-marker) 58%);
    color: inherit;
    padding: 0 .08em;
}

/* ---- 付箋（本物らしく：のりの帯・紙の繊維・下に落ちる影・わずかな傾き。角は丸めない） ---- */
.tk-sticky {
    --tk-note: var(--tk-note-yellow);
    position: relative;
    background-color: var(--tk-note);
    background-image:
        linear-gradient(to bottom, rgba(31, 43, 58, .035) 0, rgba(31, 43, 58, .035) 22px, rgba(255, 255, 255, .2) 22px, rgba(255, 255, 255, 0) 52px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 72%, rgba(31, 43, 58, .03) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.17 0 0 0 0 0.23 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    border-radius: 1px;
    box-shadow:
        0 1px 1px rgba(31, 43, 58, .08),
        0 2px 4px rgba(31, 43, 58, .05),
        0 14px 14px -12px rgba(31, 43, 58, .35);
}
.tk-sticky--yellow { --tk-note: var(--tk-note-yellow); }
.tk-sticky--blue { --tk-note: var(--tk-note-blue); }
.tk-sticky--mint { --tk-note: var(--tk-note-mint); }

/* ---- 申込ボタン（すべて同じ見た目）。a は program.css の .program-lp a（0,1,1）に負けるので 0,2,1 で書く ---- */
.program-lp--tokusei a.tk-btn,
.program-lp--tokusei a.tk-btn:link,
.program-lp--tokusei a.tk-btn:visited,
.program-lp--tokusei a.tk-btn:hover,
.program-lp--tokusei a.tk-btn:focus,
.program-lp--tokusei a.tk-btn:active {
    color: #fff;
    text-decoration: none;
}
.program-lp--tokusei .tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--tk-blue);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    box-shadow: 0 6px 14px -8px rgba(36, 79, 140, .7);
    transition: background .25s ease;
}
.program-lp--tokusei .tk-btn:hover { background: var(--tk-blue-hover); transform: none; }
.program-lp--tokusei .tk-btn:focus-visible { outline: 2px solid var(--tk-blue-ink); outline-offset: 3px; }

.program-lp--tokusei a.tk-textlink,
.program-lp--tokusei a.tk-textlink:link,
.program-lp--tokusei a.tk-textlink:visited {
    font-size: 15px;
    color: var(--tk-blue-ink);
    text-decoration: underline;
    text-underline-offset: .25em;
}
.program-lp--tokusei a.tk-textlink:hover { color: var(--tk-ink); }

/* ---- 写真（白い縁のある紙焼き） ---- */
.tk-photo { display: block; }
.tk-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--tk-band);
    border: 8px solid var(--tk-white);
    box-shadow: 0 1px 2px rgba(31, 43, 58, .08), 0 16px 24px -16px rgba(31, 43, 58, .35);
}

/* ================================================================
   3. ヘッダー（ロゴ＋肩書／ナビ／ご予約・空き状況）とパンくず
   ---------------------------------------------------------------- */
.tk-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--tk-line);
}
.tk-header__inner { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 16px; }
.tk-brand { display: flex; flex-direction: column; gap: 3px; margin-right: auto; min-width: 0; }
.tk-brand img { display: block; width: 100px; height: auto; }
.tk-brand__tagline { font-size: 12px; line-height: 1.4; color: var(--tk-ink-soft); letter-spacing: 0; }
.tk-nav { display: none; }
.program-lp--tokusei a.tk-header__cta,
.program-lp--tokusei a.tk-header__cta:link,
.program-lp--tokusei a.tk-header__cta:visited {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--tk-blue-ink);
    border: 1px solid var(--tk-blue);
    border-radius: 999px;
    padding: 8px 14px;
    white-space: nowrap;
    transition: background .25s ease;
}
.program-lp--tokusei a.tk-header__cta:hover { background: var(--tk-blue-pale); }

.program-lp--tokusei .lp-crumb { max-width: 760px; padding: 14px 24px 0; }
.program-lp--tokusei .lp-crumb__item + .lp-crumb__item::before { content: "›"; color: var(--tk-ink-soft); margin: 0 .7em; }
/* SP はページ名を1行で切る。パンくずが3行になると、最初の画面から申込ボタンと初回の金額が押し出されるため */
.program-lp--tokusei .lp-crumb__item[aria-current] { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================
   4. 節ごと
   ---------------------------------------------------------------- */

/* ---- 1. ヒーロー（地に方眼） ---- */
.tk-hero {
    padding: 16px 0 56px;
    background-color: var(--tk-paper);
    background-image:
        linear-gradient(var(--tk-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--tk-grid) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: center top;
    border-bottom: 1px solid var(--tk-line);
}
.tk-hero__grid { display: grid; gap: 40px; }
.program-lp--tokusei h1.tk-hero__title {
    font-family: var(--tk-head);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.65;
    margin-bottom: 8px;
}
.tk-hero__catch {
    font-family: var(--tk-head);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .04em;
    margin-bottom: 14px;
}
.tk-hero__lead { color: var(--tk-ink-sub); }
.tk-hero__info { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 14px; }
.tk-hero__info li {
    font-size: 13px;
    line-height: 1.6;
    padding: 3px 10px;
    background: var(--tk-white);
    border: 1px solid var(--tk-line);
    border-radius: 4px;
}
.tk-hero__cta { margin-top: 22px; }
.tk-hero__price { margin-top: 10px; font-size: 14px; text-align: center; color: var(--tk-ink); }
.tk-hero__yen { font-family: var(--tk-head); font-size: 24px; font-weight: 600; color: var(--tk-blue-ink); margin: 0 .1em; }
.tk-hero .tk-note { text-align: center; }

/* ---- SP のヒーロー（写真を画面の幅いっぱいに置き、左上の窓の明るいところにキャッチを重ねる）----
   並びは order だけで変える（HTML の順番と h1 はそのまま）。
   写真の高さは「幅の 3/4」と「画面の高さの 46%」の小さいほう。背の低い画面でも申込ボタンを早く見せるため */
@media (max-width: 1023px) {
    .tk-hero {
        --tk-hero-photo-h: min(calc(min(100vw, 760px) * 3 / 4), 46vh);
        padding-top: 12px;
    }
    @supports (height: 1svh) {
        .tk-hero { --tk-hero-photo-h: min(calc(min(100vw, 760px) * 3 / 4), 46svh); }
    }
    .tk-hero__grid { gap: 0; }
    .tk-hero__body { display: contents; }
    .tk-hero__photo,
    .tk-hero__catch { grid-area: 1 / 1; }
    .tk-hero__photo { margin: 0 -24px; position: relative; z-index: 1; }
    .tk-hero__photo.rv { opacity: 1; transform: none; }
    .tk-hero__photo img {
        aspect-ratio: auto;
        height: var(--tk-hero-photo-h);
        object-position: 100% 40%;
        border: 0;
        box-shadow: none;
    }
    .tk-hero__catch {
        align-self: start;
        position: relative;
        z-index: 2;
        margin: 0;
        padding-top: 18px;
        font-size: min(30px, 7.7vw);
        text-shadow: 0 0 2px rgba(247, 248, 250, 1), 0 0 8px rgba(247, 248, 250, .95), 0 0 18px rgba(247, 248, 250, .9);
    }
    /* キャッチの下地。左上の窓の外の緑に文字が重なっても読めるよう、左上だけ紙色を薄く重ねる */
    .tk-hero__photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 72% 62% at 18% 22%, rgba(247, 248, 250, .82) 0%, rgba(247, 248, 250, .5) 45%, rgba(247, 248, 250, 0) 78%);
        pointer-events: none;
    }
    .program-lp--tokusei h1.tk-hero__title { order: 2; font-size: 16px; line-height: 1.6; margin: 18px 0 12px; }
    .tk-hero__cta { order: 3; margin-top: 0; }
    .tk-hero__price { order: 4; }
    .tk-hero .tk-note { order: 5; }
    .tk-hero .tk-eyebrow { order: 6; margin: 24px 0 4px; }
    .tk-hero__lead { order: 7; }
    .tk-hero__info { order: 8; }
}
@media (min-width: 600px) and (max-width: 1023px) {
    .tk-hero__catch { font-size: 38px; padding-top: 32px; }
}
/* iPhone SE（第1世代）など幅360px未満では、申込ボタンの文字を少し小さくして1行に収める */
@media (max-width: 359px) {
    .program-lp--tokusei .tk-btn { font-size: 14px; padding-left: 16px; padding-right: 16px; }
}

/* ---- 2. 心の声（黄色の付箋に、手書きの自問自答で書き出す）----
   地の文は細いペン（Yomogi）、矢印の先は中太の青ペン（Yusei Magic）。傾きは0.5度まで（傾けすぎると落ち着かない。2026-11-09 深見さん） */
.tk-voices { display: grid; gap: 18px; }
.tk-voices li { width: 92%; padding: 18px 20px 20px; color: var(--tk-ink); }
.tk-voices li:nth-child(odd) { transform: rotate(-.4deg); }
.tk-voices li:nth-child(even) { justify-self: end; transform: rotate(.4deg); }
.tk-hand {
    display: block;
    font-family: "Yomogi", var(--tk-sans);
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: .02em;
}
.tk-hand__row { display: flex; align-items: flex-start; gap: 4px; margin-top: 6px; }
.tk-hand--pen { font-family: "Yusei Magic", var(--tk-sans); font-size: 19px; line-height: 1.55; color: var(--tk-blue-ink); }
.tk-arrow { flex: none; width: 24px; height: 30px; margin-top: -2px; overflow: visible; }
.tk-arrow path { fill: none; stroke: var(--tk-blue-ink); stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; }

/* 窪田さんの言葉（付箋の問いに答える。白い紙のカードに大きく置き、名前を添える） */
.tk-message {
    max-width: 760px;
    margin: 48px auto 0;
    padding: 32px 22px 24px;
    background: var(--tk-white);
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(31, 43, 58, .08), 0 18px 30px -18px rgba(31, 43, 58, .3);
}
.tk-message::before { content: ""; display: block; width: 40px; height: 3px; margin: 0 auto 22px; background: var(--tk-blue); }
.tk-message__text { margin: 0; }
.tk-message__text p {
    font-family: var(--tk-head);
    /* SP は「育て方のせいでもありません。」（14字）が1行に収まる大きさ */
    font-size: min(20px, 4.9vw);
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: .02em;
    color: var(--tk-ink);
}
.tk-message__by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--tk-line);
    text-align: left;
}
.tk-message__by img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.tk-message__by span { font-size: 13px; line-height: 1.6; color: var(--tk-ink-soft); word-break: keep-all; overflow-wrap: anywhere; }
.tk-message__by strong { display: block; font-size: 15px; font-weight: 700; color: var(--tk-ink); }

/* ---- 3. おすすめ（チェックの印） ---- */
.tk-checks li { position: relative; padding-left: 38px; }
.tk-checks li + li { margin-top: 18px; }
.tk-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--tk-blue);
    border-radius: 4px;
    background: var(--tk-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4 6.6 11.6 12.8 4.6' stroke='%232F64AE' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* ---- 4. 目指すこと（色分けした3枚の付箋） ---- */
.tk-goals { display: grid; gap: 26px; }
.tk-goals li { padding: 24px 22px 26px; }
.tk-goals li:nth-child(1) { transform: rotate(-.6deg); }
.tk-goals li:nth-child(2) { transform: rotate(.5deg); }
.tk-goals li:nth-child(3) { transform: rotate(-.4deg); }
.tk-goals__label { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; color: var(--tk-ink-sub); margin-bottom: 8px; }
.tk-goals__num { font-family: var(--tk-head); font-size: 28px; font-weight: 600; line-height: 1; color: var(--tk-ink); }
.tk-goals h3.tk-h3 { margin-bottom: 10px; }
.tk-goals p { font-size: 15px; color: var(--tk-ink-sub); }

/* ---- 5・13. 文章と写真の2列（SP は 写真が文章の下） ---- */
.tk-media { display: grid; gap: 36px; }
.tk-media--photo-left .tk-media__photo { order: 2; }

/* ---- 6. ご本人も、ご家族も（見出しの札のついたカード） ---- */
.tk-who { display: grid; gap: 28px; }
.tk-card {
    position: relative;
    background: var(--tk-white);
    border: 1px solid var(--tk-line);
    border-top: 3px solid var(--tk-blue);
    padding: 20px 20px 22px;
    margin-top: 34px;
}
.program-lp--tokusei h3.tk-card__tab {
    position: absolute;
    left: -1px;
    top: -34px;
    font-family: var(--tk-sans);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: var(--tk-blue);
    padding: 5px 16px 4px;
    border-radius: 6px 6px 0 0;
}
.tk-card p { color: var(--tk-ink-sub); }
.tk-card p + p { margin-top: 10px; }
.tk-who__note { margin-top: 20px; font-weight: 700; color: var(--tk-blue-ink); }
.tk-who__sub { margin-top: 8px; font-size: 15px; color: var(--tk-ink-sub); }

/* ---- 7. 料金 ---- */
.tk-price__intake { background: var(--tk-blue-pale); padding: 28px 20px; border-radius: 4px; }
.tk-price__value {
    font-family: var(--tk-head);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--tk-blue-ink);
    margin: 12px 0 14px;
}
.tk-price__num { font-size: 40px; font-weight: 600; letter-spacing: .01em; }
.tk-price__unit { font-family: var(--tk-sans); font-size: 16px; font-weight: 700; white-space: nowrap; margin: 0 .15em; }
.tk-price__cta { margin-top: 24px; }
.tk-price__cta .lp-btn { word-break: keep-all; text-align: center; }
.tk-price__then { padding: 28px 0; text-align: center; color: var(--tk-blue-ink); font-weight: 700; border-bottom: 1px solid var(--tk-line); }
.tk-price__body { padding: 28px 0; border-bottom: 1px solid var(--tk-line); }
.tk-price__total { font-family: var(--tk-head); font-size: 24px; line-height: 1.6; margin: 8px 0; color: var(--tk-ink); }
.tk-price__total .tk-price__num { font-size: 30px; }
.tk-price__desc { font-size: 15px; color: var(--tk-ink-sub); }
.tk-price__note { margin-top: 24px; font-size: 14px; color: var(--tk-ink-soft); }

/* ---- 8. 流れ（方眼のノートの1ページ。回の番号は、青い縁の見出しの付箋） ---- */
.tk-notebook {
    position: relative;
    background-color: var(--tk-white);
    background-image:
        linear-gradient(var(--tk-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--tk-grid) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: 4px;
    padding: 28px 20px 24px;
    box-shadow: 0 1px 2px rgba(31, 43, 58, .08), 0 18px 30px -18px rgba(31, 43, 58, .3);
}
.tk-flow__intake { padding-bottom: 24px; border-bottom: 1px solid var(--tk-line); }
.tk-flow__intake h3.tk-h3 { margin-bottom: 8px; }
/* おわりにの書面。はじめの面接と対にして、罫線を上に引く */
.tk-flow__outro { padding: 24px 0 8px; border-top: 1px solid var(--tk-line); }
.tk-flow__outro h3.tk-h3 { margin-bottom: 8px; }
.tk-flow__outro .tk-note { margin-top: 10px; }
.tk-flow__phase { padding: 30px 0 4px; }
.tk-flow__phase + .tk-flow__phase { border-top: 1px solid var(--tk-line); }
.program-lp--tokusei h3.tk-flow__phase-title {
    font-family: var(--tk-head);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--tk-ink);
    margin-bottom: 20px;
}
.tk-flow__phase-title span { display: block; font-family: var(--tk-sans); font-size: 13px; font-weight: 700; color: var(--tk-blue-ink); }
.tk-steps li { padding-bottom: 26px; }
.tk-steps__label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--tk-blue-ink);
    background: var(--tk-note-blue);
    border-left: 4px solid var(--tk-blue);
    padding: 2px 12px 2px 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(31, 43, 58, .12);
}
.program-lp--tokusei .tk-steps h4 {
    font-family: var(--tk-head);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 8px;
}
.tk-steps p { color: var(--tk-ink-sub); }
.tk-flow__aside {
    margin: 4px 0 22px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--tk-ink-sub);
    background: var(--tk-paper);
    border-left: 3px solid var(--tk-line);
}
.tk-steps .tk-flow__aside { margin: 14px 0 0; }
.tk-flow__note { margin-top: 8px; }

/* ---- 9. 担当カウンセラー（SP は 肩書・名前 → 写真 → 資格） ---- */
.tk-counselor { display: grid; margin-bottom: 36px; }
.tk-counselor__photo { order: 2; margin: 20px 0 24px; }
.tk-counselor__profile { display: contents; }
.tk-counselor__profile > .tk-eyebrow,
.tk-counselor__name { order: 1; }
.tk-trust { order: 3; }
.program-lp--tokusei h2.tk-counselor__name {
    font-family: var(--tk-head);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.5;
}
.tk-counselor__name span { display: block; margin-top: 4px; font-family: var(--tk-sans); font-size: 14px; font-weight: 400; color: var(--tk-ink-soft); }
.tk-trust { border-top: 1px solid var(--tk-line); padding-top: 20px; }
.tk-trust li + li { margin-top: 16px; }
.tk-trust strong { display: block; font-weight: 700; }
.tk-trust small { display: block; font-size: 14px; color: var(--tk-ink-soft); }

/* ---- 10・11. 箇条書き（本文と同じ大きさ） ---- */
.tk-bullets li { position: relative; padding-left: 20px; }
.tk-bullets li + li { margin-top: 18px; }
.tk-bullets li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .8em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tk-blue);
}

/* ---- 12. よくあるご質問（開閉。＋と−は青の細い線） ---- */
.tk-faq { border-top: 1px solid var(--tk-line); }
.tk-faq details { border-bottom: 1px solid var(--tk-line); }
.tk-faq summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 22px 40px 22px 0;
    font-weight: 700;
}
.tk-faq summary::-webkit-details-marker { display: none; }
.tk-faq summary::before,
.tk-faq summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 16px;
    height: 1.5px;
    background: var(--tk-blue);
}
.tk-faq summary::after { transform: rotate(90deg); transition: transform .25s ease; }
.tk-faq details[open] summary::after { transform: rotate(0deg); opacity: 0; }
.tk-faq summary:focus-visible { outline: 2px solid var(--tk-blue-ink); outline-offset: 2px; }
.tk-faq details p { padding: 0 40px 24px 0; color: var(--tk-ink-sub); }

/* ---- 13. 最後の呼びかけ（写真に、ヒーローのキャッチを書いた黄色の付箋を貼る） ---- */
.program-lp--tokusei h2.tk-closing__title {
    font-family: var(--tk-head);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.65;
    margin-bottom: 16px;
}
.tk-closing__cta { margin: 28px 0 12px; }
.tk-closing__visual { position: relative; padding: 18px 0 0 18px; }
.tk-closing .tk-photo img { aspect-ratio: 4 / 5; }
.tk-closing__note {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 150px;
    padding: 22px 16px 24px;
    font-family: var(--tk-head);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.55;
    transform: rotate(-4deg);
}
/* 付箋の隅の猫（青いペンの落書き）。①の猫と同じ線 */
.tk-closing__note { padding-bottom: 44px; }
.tk-cat {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 40px;
    height: 41px;
    overflow: visible;
}
.tk-cat path { fill: none; stroke: var(--tk-blue-ink); stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tk-cat circle { fill: var(--tk-blue-ink); }

/* ---- 14. 予約（共有の部品を青の配色で） ---- */
.tk-reserve { padding: 56px 0 72px; }
.program-lp--tokusei .lp-reserve {
    background: var(--tk-white);
    border: 1px solid var(--tk-line);
    border-radius: 4px;
    padding: 32px 20px;
}
.program-lp--tokusei .lp-reserve > h2 {
    font-family: var(--tk-head);
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    letter-spacing: .02em;
}
/* SP で「ご予／約」と割れないよう、1行（13字）に収まる大きさにする */
@media (max-width: 1023px) {
    .program-lp--tokusei .lp-reserve > h2 { font-size: 21px; }
}
.program-lp--tokusei .lp-btn { color: #fff; font-weight: 700; }
.program-lp--tokusei .lp-cal__slot { border-color: #BFD0E8; }
.program-lp--tokusei .lp-cal__slot.is-picked { color: #fff; border-color: var(--tk-blue); }
.program-lp--tokusei .lp-fixbar { background: rgba(247, 248, 250, .96); }
.program-lp--tokusei .lp-btn--fix { display: block; min-height: 0; padding: 10px 20px; }
/* 2行目（初回50分 5,500円）は細字で少し淡く。1行目の誘いを主、金額を従にする */
.program-lp--tokusei .lp-btn--fix span { display: block; font-size: 12px; font-weight: 400; color: #DCE7F6; opacity: 1; }

/* ================================================================
   5. PC（1024px〜）。本文の幅 1080px、文章だけの列は左から 180px 下げた 720px
   ---------------------------------------------------------------- */
@media (min-width: 1024px) {
    .program-lp--tokusei [id] { scroll-margin-top: 96px; }
    .tk-pc { display: inline; }
    .tk-wrap { width: min(1080px, calc(100% - 160px)); max-width: none; padding: 0; }
    .tk-col { margin-left: min(180px, 16.7%); max-width: 720px; }
    .program-lp--tokusei h2.tk-h2 { font-size: 36px; }
    .program-lp--tokusei h3.tk-h3 { font-size: 22px; }
    .program-lp--tokusei .tk-pledge { font-size: 28px; }
    .tk-head { margin-bottom: 48px; }
    .tk-sec { padding: 96px 0; }

    .tk-header__inner { min-height: 84px; padding: 12px clamp(24px, 5.5vw, 80px); gap: 28px; }
    .tk-brand img { width: 160px; }
    .tk-nav { display: flex; gap: 26px; }
    .program-lp--tokusei .tk-nav a { font-size: 14px; color: var(--tk-ink); transition: color .25s ease; }
    .program-lp--tokusei .tk-nav a:hover { color: var(--tk-blue-ink); }
    .program-lp--tokusei a.tk-header__cta { font-size: 14px; padding: 12px 24px; }
    .program-lp--tokusei .lp-crumb { width: min(1080px, calc(100% - 160px)); max-width: none; padding: 24px 0 0; }
    .program-lp--tokusei .lp-crumb__item[aria-current] { display: flex; white-space: normal; }

    .program-lp--tokusei .tk-btn { width: auto; min-width: 384px; min-height: 64px; font-size: 17px; }

    /* ヒーロー：文章 520px ＋ 写真（紙焼き） */
    .tk-hero { padding: 40px 0 96px; }
    .tk-hero__grid { grid-template-columns: minmax(0, 520px) minmax(0, 520px); justify-content: space-between; align-items: center; gap: 40px; }
    .program-lp--tokusei h1.tk-hero__title { font-size: 24px; margin-bottom: 18px; }
    .tk-hero__catch { font-size: 52px; margin-bottom: 18px; }
    .tk-hero__lead { font-size: 18px; }
    .tk-hero__info { margin-top: 18px; }
    .tk-hero__info li { font-size: 14px; }
    .tk-hero__cta { margin-top: 28px; }
    .tk-hero__price { text-align: left; font-size: 15px; margin-top: 14px; }
    .tk-hero .tk-note { text-align: left; }
    .tk-hero__photo img { aspect-ratio: 1180 / 960; border-width: 10px; }
    .tk-hero__photo { transform: rotate(.6deg); }

    /* 心の声：3枚＋2枚を、わずかに傾けて貼る（0.5度まで） */
    /* 付箋ごとに中身の高さで止める（同じ段で一番高い付箋に揃えると、下に空白ができるため） */
    .tk-voices { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 28px 32px; }
    .tk-voices li { width: 320px; padding: 24px 24px 26px; }
    .tk-voices li:nth-child(even) { justify-self: auto; }
    .tk-voices li:nth-child(1) { transform: rotate(-.3deg); }
    .tk-voices li:nth-child(2) { transform: rotate(.5deg) translateY(6px); }
    .tk-voices li:nth-child(3) { transform: rotate(-.4deg); }
    .tk-voices li:nth-child(4) { transform: rotate(.4deg); }
    .tk-voices li:nth-child(5) { transform: rotate(-.3deg) translateY(4px); }
    .tk-hand { font-size: 19px; }
    .tk-hand--pen { font-size: 21px; }

    .tk-message { margin-top: 72px; padding: 52px 64px 36px; }
    .tk-message__text p { font-size: 32px; line-height: 1.75; }
    .tk-message__by { margin-top: 32px; padding-top: 24px; }
    .tk-message__by img { width: 60px; height: 60px; }

    .tk-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 48px; }
    .tk-checks li + li { margin-top: 0; }

    .tk-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
    .tk-goals li { padding: 30px 28px 34px; min-height: 360px; }
    .tk-goals__num { font-size: 34px; }

    .tk-media { grid-template-columns: minmax(0, 540px) minmax(0, 492px); justify-content: space-between; align-items: center; gap: 48px; }
    .tk-media--photo-left { grid-template-columns: minmax(0, 492px) minmax(0, 540px); }
    .tk-media--photo-left .tk-media__photo { order: 0; }

    .tk-who { grid-template-columns: minmax(0, 492px) minmax(0, 540px); justify-content: space-between; align-items: center; gap: 48px; }

    .tk-price { margin-left: min(180px, 16.7%); max-width: 820px; }
    .tk-price__intake { padding: 40px 48px; }
    .tk-price__value { font-size: 36px; }
    .tk-price__value .tk-price__num { font-size: 56px; }
    .tk-price__total .tk-price__num { font-size: 40px; }
    .tk-price__then { padding: 36px 0; }
    .tk-price__body { padding: 36px 0; }

    /* ノートの左にルーズリーフの穴と縦の余白線 */
    .tk-notebook { padding: 48px 64px 40px 128px; }
    .tk-notebook::before {
        content: "";
        position: absolute;
        left: 28px;
        top: 30px;
        bottom: 30px;
        width: 16px;
        background: radial-gradient(circle at 8px 8px, var(--tk-band) 0 6px, rgba(31, 43, 58, .14) 6.5px, transparent 7.5px) 0 0 / 16px 40px repeat-y;
    }
    .tk-notebook::after {
        content: "";
        position: absolute;
        left: 80px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(47, 100, 174, .22);
    }
    .tk-flow__intake { padding-bottom: 32px; }
    .tk-flow__outro { padding-top: 32px; }
    .tk-flow__phase { padding: 40px 0 8px; }
    .program-lp--tokusei h3.tk-flow__phase-title { font-size: 24px; margin-bottom: 28px; }
    .tk-steps li { display: grid; grid-template-columns: 104px minmax(0, 1fr); padding-bottom: 30px; }
    .tk-steps__label { justify-self: start; align-self: start; margin: 2px 0 0; }
    .program-lp--tokusei .tk-steps h4 { font-size: 21px; }
    .tk-flow__phase > .tk-flow__aside { margin-left: 104px; }

    .tk-counselor { grid-template-columns: 384px minmax(0, 1fr); gap: 64px; align-items: start; margin-bottom: 56px; }
    .tk-counselor__photo { order: 0; margin: 0; }
    .tk-counselor__profile { display: block; }
    .program-lp--tokusei h2.tk-counselor__name { font-size: 36px; margin-top: 12px; }
    .tk-trust { margin-top: 28px; padding-top: 28px; }
    .tk-trust li + li { margin-top: 20px; }

    .tk-faq summary { padding: 28px 48px 28px 0; }
    .tk-faq details p { padding: 0 48px 32px 0; }

    .program-lp--tokusei h2.tk-closing__title { font-size: 34px; }
    .tk-closing__visual { padding: 28px 0 0 36px; }
    .tk-closing__note { width: 190px; font-size: 24px; padding: 28px 20px 54px; }
    .tk-cat { width: 50px; height: 51px; right: 14px; bottom: 10px; }

    .tk-reserve { padding: 96px 0; }
    .program-lp--tokusei .lp-reserve { padding: 48px 56px; }
    .program-lp--tokusei .lp-reserve > h2 { font-size: 30px; }

    /* フッターの Program 列。全プランの相互リンクを1行ずつで見せるため、2列目を広げる（program-fukushoku.css と同じ） */
    .program-lp--tokusei .lp-footer__grid { grid-template-columns: minmax(0, 1fr) 320px 220px; }
}