/* ================================================================
   生きづらさと向き合い、「そのままの私」で生きるプログラム LP 専用CSS（/program/ikizurasa）
   精神保健福祉士・窪田かおりのプログラム。

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

   ■ デザイン思想（2026-11-08 に Figma の方向A「ほどける糸」を採った。2026-11-09 にテーマカラーを藤からやわらかい黄色に変えた。
     紫はお葬式を連想させるため、深見さんが却下した）
     テーマは「ココロの根っこをほどいて、軽やかに」。固く結ばれていたものが少しずつほどけ、
     呼吸が深くなっていく感覚。重さから軽さへ。暗さや苦しさを強調しない。
     紙の上に活字が置かれた雑誌のような静けさ。カードは使わず、罫線と余白で区切る。
     金色の細い線（1.25px）が1本、ページの左を上から下へ通る。ヒーローではゆるく絡まり、
     プログラムの流れの節でほどけ、最後の呼びかけの節の下で小さな輪になり、線画の猫がじゃれて終わる。線は文字に重ねない。
     黄色を塗るのは申込ボタンと初回の箱だけ。節の面の色（淡いバター色）は、読み手の気持ちが切り替わる
     3つの節だけに敷く：心の声（共感）／担当カウンセラー（人に会う）／最後の呼びかけ（背中を押す）。
     料金の節は紙のままにし、初回の箱だけを黄色の面にして、金額を面の境目で迷わせない。
     Figma の画像：docs/ikizurasa-lp/figma-a-pc.png・figma-a-sp.png（プロンプトは figma-prompt.md）

   ■ 色（2026-11-09。比較の記録は live-office の notes/2026-11-09_生きづらさ_テーマカラー4案.html）
     紙 #FBF9F4（ページの背景）／面 #FAF3DE（3つの節・フッター）／罫線 #E8DEC3
     文字 #36301F／説明の文字 #5F5642（目指すこと・各回・料金の説明。見出しより一段淡くして段差をつける）／補助の文字 #675F4C（12〜14pxの注記）
     黄 #EFD38C（申込ボタン・選んだ空き枠の塗り）／濃い黄 #E8C66C（ボタンに触れたとき）／淡い黄 #F8EDCB（初回の箱・必須の印）
     金 #C9A443（糸・箇条書きの印・回をつなぐ線。飾りなので文字には使わない）
     濃い金 #9A7A22（40pxの番号・開閉の印・ヘッダーの枠・入力欄の枠。大きな文字と線の基準 3:1 以上）
     茶 #75561A（小見出し・金額・回のラベル・リンクなど、色付きの文字はすべてこれ）
     ボタンの文字 #3E3214（太字）／ボタンの2行目 #5E4A16（細字。1行目より少し淡くして、主従をつける）
     コントラスト：ボタンの文字と黄 8.6／2行目と黄 5.82／茶と紙 6.43・淡い黄 5.79／補助の文字と面 5.71／本文と紙 12.48
     黄の塗りと紙の明るさの差は 1.39 と小さいので、ボタンの内側に濃い金の細い縁を引いて輪郭を立たせる

   ■ 書体と大きさ（PC → SP）
     見出しは Shippori Mincho、本文は Noto Sans JP。本文 16px・行間 1.9、見出しの行間 1.65
     キャッチコピー 40 → 23（SP は写真に重ねる）／ページの見出し 24 → 16／節の見出し 36 → 24／小さな見出し 22 → 20
     見出しとキャッチの太さは 600（500 は本文の 400 とほぼ見分けがつかない。2026-11-09 の手順4）
     初回の金額は数字だけ 56 → 40（ページの中で最大の金額）、本体の金額は数字だけ 40 → 30。「円（税込）」は 16px で折り返さない
     コンテンツの幅 1080px、文章だけの節は 720px。PC の本文の左端は 180px、糸は 110px

   ■ ページの構成と申込ボタン
     ヒーロー → 心の声 → おすすめ → 目指すこと → 概要 → 料金 → 流れ → セッションの間 →
     担当カウンセラー → 事前のご準備 → ご利用にあたって → よくあるご質問 → 最後の呼びかけ → 予約
     申込ボタンは、すべて黄の塗り・濃い茶の太字・角丸のピル型で同じ見た目（ヒーロー・初回の箱・最後の呼びかけ・
     SP の下固定）。ヘッダーの「ご予約・空き状況」だけ、濃い金の枠線のピル型で控えめにする。
     最初の画面（PC 縦900px・SP 縦700px）に、キャッチコピー・申込ボタン・初回 5,500円（税込）を収める。

   ■ Figma から変えたところ
     - 初回の箱：PC の Figma は罫線だけ。SP と同じ淡い黄の面を PC にも敷き、料金の節で初回をいちばん目立たせる
     - ページの見出し：PC の Figma は「生き／るプログラム」で折り返している。「そのままの私」の前で改行する
     - テーマカラー：藤 → やわらかい黄色（2026-11-09。上の「色」）。節の面も3つの節に敷いた（Figma は全部紙）
     - 場面の写真を2枚足した（概要の左＝安心できる場所、セッションの間の右＝育てる）。恋愛・夫婦のLPと同じ
       場面4枚＋カウンセラー1枚にするため（2026-11-08 に深見さんが決定）。写真は Figma の画像生成で作った
     - SP のパンくずは、ページ名を1行で切る（3行になると、最初の画面から初回の金額が押し出されるため）
     - 写真の大きさと形（2026-11-09 に深見さんが案2「枠の中で大きく、形を混ぜる」を採った）：PC の写真を 432px から 460〜492px にし、
       ヒーローと最後の呼びかけは縦長（4:5）、概要は正方形、セッションの間と窪田さんは横長のまま。比較は live-office の
       notes/2026-11-09_生きづらさ_写真の大きさ3案.html
     - SP のヒーロー（2026-11-09 に深見さんが案B「写真の上にコピー」を採った）：文字だけで始まらないように、写真を画面の幅いっぱいに
       置いてキャッチを重ねる。糸は写真の下から始める。比較は notes/2026-11-09_生きづらさ_SPの最初の画面3案.html
     - コピーのメリハリ（2026-11-09 に深見さんが案2「段差＋言い切りの一文」を採った）：見出しを太くし、言い切りの一文を
       明朝で3か所（心の声の下・担当カウンセラーの本文の前・最後の呼びかけ）、黄色の下線を3か所（ページの名前・概要・流れ）に置く。
       恋愛・夫婦のLPは言い切りの一文が9か所あり、この LP は0か所だった。比較は notes/2026-11-09_生きづらさ_コピーのメリハリ2案.html
     - 猫（2026-11-09 深見さん）：糸は最後の呼びかけの節の下で小さな輪にほどけ、金の線画の猫がじゃれて終わる。
       窪田さんは猫好きで相談者に知れ渡っているので、さりげなく出す（他のカウンセラーとの釣り合いのため、写真の外ではここだけ）

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


/* ================================================================
   1. テーマトークン
   body.program-lp--ikizurasa に載せ、program.css の --lp-* も黄色の配色に上書きする
   （予約フォーム・空き枠カレンダー・フッター・パンくずの共有部品が、そのまま黄色の配色になる）
   ---------------------------------------------------------------- */
.program-lp--ikizurasa {
    --iz-paper: #FBF9F4;
    --iz-band: #FAF3DE;
    --iz-white: #FFFFFF;
    --iz-ink: #36301F;
    --iz-ink-soft: #675F4C;
    --iz-ink-sub: #5F5642;
    --iz-line: #E8DEC3;
    --iz-yellow: #EFD38C;
    --iz-yellow-hover: #E8C66C;
    --iz-yellow-pale: #F8EDCB;
    --iz-gold: #C9A443;
    --iz-gold-deep: #9A7A22;
    --iz-brown: #75561A;
    --iz-btn-ink: #3E3214;
    --iz-btn-sub: #5E4A16;
    --iz-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    --iz-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

    /* 糸の中心の位置（節の左端から）。SP は本文の左の余白 40px の中、PC は本文の左端から 70px 外 */
    --iz-tx: calc(max(0px, (100% - 760px) / 2) + 16px);

    --lp-bg: var(--iz-paper);
    --lp-bg-deep: var(--iz-band);
    --lp-bg-warm: var(--iz-yellow-pale);
    --lp-paper: var(--iz-white);
    --lp-ink: var(--iz-ink);
    --lp-ink-soft: var(--iz-ink-soft);
    --lp-line: var(--iz-line);
    --lp-pink: var(--iz-yellow);
    --lp-pink-hover: var(--iz-yellow-hover);
    --lp-pink-soft: var(--iz-yellow-pale);
    /* 黄の塗りの上の文字（予約フォームの送信ボタン・選んだ空き枠）と、淡い黄の上の文字（必須の印）を兼ねる */
    --lp-pink-ink: var(--iz-btn-ink);
    /* 入力欄に触れたときの枠・空き枠に触れたときの枠。淡い色だと白の上で見えないので濃い金 */
    --lp-sage: var(--iz-gold-deep);
    --lp-sage-deep: var(--iz-brown);
    --lp-sage-soft: var(--iz-yellow-pale);
    --lp-font: var(--iz-sans);
    --lp-serif: var(--iz-serif);
}

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

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

/* 本文の幅。SP は左 40px（糸の通り道）・右 24px の余白 */
.iz-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px 0 40px; }

/* program.css の h1〜h3（0,1,1）に勝たせるため、見出しは要素名付きで書く */
.program-lp--ikizurasa h1,
.program-lp--ikizurasa h2,
.program-lp--ikizurasa h3,
.program-lp--ikizurasa h4 { word-break: auto-phrase; }
.program-lp--ikizurasa h2.iz-h2 {
    font-family: var(--iz-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--iz-ink);
}
.program-lp--ikizurasa h3.iz-h3 {
    font-family: var(--iz-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--iz-ink);
}
.iz-head { margin-bottom: 32px; }
.iz-head__lead { margin-top: 16px; color: var(--iz-ink-sub); }
.iz-eyebrow { font-size: 14px; line-height: 1.9; color: var(--iz-brown); margin-bottom: 8px; }
.iz-note { font-size: 12px; line-height: 1.9; color: var(--iz-ink-soft); }
.iz-prose p + p { margin-top: 1.1em; }

/* ---- 言い切りの一文と黄色の下線（2026-11-09 の手順4。冒頭の「Figma から変えたところ」） ---- */
.program-lp--ikizurasa .iz-statement {
    font-family: var(--iz-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--iz-brown);
    margin-top: 28px;
    /* 句の途中で折らない。折ってよい位置は HTML の <wbr> だけ（Safari は auto-phrase が効かないため） */
    word-break: keep-all;
}
.program-lp--ikizurasa .iz-statement--closing { margin: 0 0 6px; }
.program-lp--ikizurasa .iz-pledge {
    font-family: var(--iz-serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--iz-btn-ink);
    margin-bottom: 20px;
}
/* 下線は文字の下 4 割にだけ敷く（文字の上に黄を塗ると、淡い黄と紙の差が小さく、ぼやけて見えるため） */
.iz-mark {
    background: linear-gradient(transparent 60%, rgba(239, 211, 140, .8) 60%);
    color: inherit;
    padding: 0 .1em;
}

/* ---- 申込ボタン（すべて同じ見た目）。a は program.css の .program-lp a（0,1,1）に負けるので 0,2,1 で書く ---- */
.program-lp--ikizurasa a.iz-btn,
.program-lp--ikizurasa a.iz-btn:link,
.program-lp--ikizurasa a.iz-btn:visited,
.program-lp--ikizurasa a.iz-btn:hover,
.program-lp--ikizurasa a.iz-btn:focus,
.program-lp--ikizurasa a.iz-btn:active {
    color: var(--iz-btn-ink);
    text-decoration: none;
}
.program-lp--ikizurasa .iz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--iz-yellow);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    /* 黄の塗りと紙の明るさの差が小さい（1.39）ので、影ではなく内側の細い縁で輪郭を立たせる */
    box-shadow: inset 0 0 0 1px rgba(154, 122, 34, .35);
    transition: background .25s ease;
}
.program-lp--ikizurasa .iz-btn:hover { background: var(--iz-yellow-hover); transform: none; }
.program-lp--ikizurasa .iz-btn:focus-visible { outline: 2px solid var(--iz-brown); outline-offset: 3px; }

/* 本文の大きさのリンク */
.program-lp--ikizurasa a.iz-textlink,
.program-lp--ikizurasa a.iz-textlink:link,
.program-lp--ikizurasa a.iz-textlink:visited {
    font-size: 15px;
    color: var(--iz-brown);
    text-decoration: underline;
    text-underline-offset: .25em;
}
.program-lp--ikizurasa a.iz-textlink:hover { color: var(--iz-ink); }

/* ---- 写真。角は丸めない（方向A は紙の上の写真）----
   写真は2026-11-09 に差し替えた（ChatGPT で手直し・概要は作り直し、Photoshop で拡大）。
   縦長と正方形の写真は、使う形に切り抜いたファイルを置いている（ヒーローの PC 用・概要・最後の呼びかけ）。
   ヒーローの SP 用は、左と上を広げた横長（3:2）の版 */
.iz-photo { display: block; }
.iz-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--iz-band);
}
/* 写真の形（冒頭の「Figma から変えたところ」の案2） */
.iz-hero__photo img { aspect-ratio: 4 / 5; }
.iz-media--photo-left .iz-media__photo img { aspect-ratio: 1 / 1; }
.iz-closing .iz-media__photo img { aspect-ratio: 4 / 5; }

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

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

/* ================================================================
   4. 糸（ページの左を通る金色の線）
   節ごとに、まっすぐな線（::before）か、形のある線（svg）を置いてつなぐ
   ---------------------------------------------------------------- */
.iz-sec { position: relative; padding: 64px 0; }
.iz-sec::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--iz-tx) - .625px);
    width: 1.25px;
    background: var(--iz-gold);
    pointer-events: none;
}
.iz-hero::before,
.iz-flow::before { display: none; }
.iz-thread {
    position: absolute;
    top: 0;
    left: calc(var(--iz-tx) - 14px);
    width: 28px;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.iz-thread path { fill: none; stroke: var(--iz-gold); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }

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

/* ---- 節の面。心の声・担当カウンセラー・最後の呼びかけの3つだけ（冒頭の「デザイン思想」） ---- */
.iz-sec--band { background: var(--iz-band); }

/* ---- 1. ヒーロー（SP は 文章 → 写真） ---- */
.iz-hero { padding: 16px 0 56px; }
.iz-hero__grid { display: grid; gap: 40px; }
.program-lp--ikizurasa h1.iz-hero__title {
    font-family: var(--iz-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.65;
    margin-bottom: 8px;
}
.iz-hero__catch {
    font-family: var(--iz-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: .02em;
    word-break: auto-phrase;
    margin-bottom: 12px;
}
.iz-hero__info { font-size: 12px; color: var(--iz-ink-soft); margin-top: 4px; }
.iz-hero__cta { margin-top: 20px; }
.iz-hero__price { margin-top: 12px; font-size: 12px; color: var(--iz-brown); }

/* ---- SP のヒーロー（案B「写真の上にコピー」）----
   写真を画面の幅いっぱいに置き、写真の左側（明るいカーテンと窓）にキャッチを重ねる。
   続けてページの名前 → 申込ボタン → 初回の金額を置き、肩書・リード・回数は初回の金額の下へ回す（肩書はヘッダーの1行にもある）。
   並びは order だけで変える（HTML の順番と、ページの名前の h1 はそのまま）。
   写真の高さは「幅の 4/5」と「画面の高さの半分」の小さいほう。iPhone SE のような背の低い画面でも、申込ボタンを早く見せるため */
@media (max-width: 1023px) {
    .iz-hero {
        --iz-hero-photo-h: min(calc(min(100vw, 760px) * 4 / 5), 50vh);
        padding-top: 12px;
    }
    @supports (height: 1svh) {
        /* ブラウザの上下のバーが出ている状態の高さで測る */
        .iz-hero { --iz-hero-photo-h: min(calc(min(100vw, 760px) * 4 / 5), 50svh); }
    }
    .iz-hero__grid { gap: 0; }
    .iz-hero__body { display: contents; }
    .iz-hero__photo,
    .iz-hero__catch { grid-area: 1 / 1; }
    .iz-hero__photo { margin: 0 -24px 0 -40px; position: relative; z-index: 1; }
    /* 最初の画面の主役なので、スクロールで浮き出る動きをつけない（読み込みが遅いと写真の無いキャッチだけが見えるため） */
    .iz-hero__photo.rv { opacity: 1; transform: none; }
    /* 写真の右の端を画面の右の端にそろえて、人物を右下に置く。左と上に広げたカーテンと窓の明るいところが、キャッチの下地になる */
    .iz-hero__photo img { aspect-ratio: auto; height: var(--iz-hero-photo-h); object-position: 100% 50%; }
    .iz-hero__catch {
        align-self: start;
        position: relative;
        z-index: 2;
        margin: 0;
        padding-top: 22px;
        /* 句の切れ目の <br class="iz-sp"> で3行にする（いちばん長い行が9文字）。
           文字の大きさを画面の幅に合わせて縮め、幅320〜390px のどの画面でも、行の終わりが顔の手前で止まるようにする */
        max-width: none;
        font-size: min(23px, 5.9vw);
        /* 文字のすぐ外側に紙色のぼかしを3重に敷く。写真の暗いところ（髪など）に文字がかかっても輪郭が残る */
        text-shadow: 0 0 2px rgba(251, 249, 244, 1), 0 0 8px rgba(251, 249, 244, .95), 0 0 18px rgba(251, 249, 244, .9);
    }
    /* キャッチの下地。写真を差し替えたときや狭い画面で、キャッチが人物に重なっても読めるよう、
       キャッチのある左上だけ紙色を薄く重ねる（左上は元から明るいカーテンなので、ふだんはほとんど見えない） */
    .iz-hero__photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 62% at 20% 24%, rgba(251, 249, 244, .8) 0%, rgba(251, 249, 244, .5) 45%, rgba(251, 249, 244, 0) 78%);
        pointer-events: none;
    }
    .program-lp--ikizurasa h1.iz-hero__title { order: 2; font-size: 16px; line-height: 1.6; margin: 20px 0 10px; }
    .iz-hero__cta { order: 3; margin-top: 0; }
    .iz-hero__price { order: 4; }
    .iz-hero .iz-note { order: 5; }
    .iz-hero .iz-eyebrow { order: 6; margin: 24px 0 4px; }
    .iz-hero__lead { order: 7; margin-top: 4px; }
    .iz-hero__info { order: 8; }
    /* 糸は写真の下から始める（写真の高さでは出さない）。絡まる形の糸は SP では使わず、まっすぐにする */
    .iz-thread--hero { display: none; }
    .iz-hero::before { display: block; top: calc(12px + var(--iz-hero-photo-h)); }
}
/* タブレット（幅600〜1023px）は写真が大きく、顔が右へ離れるので、キャッチを大きくする */
@media (min-width: 600px) and (max-width: 1023px) {
    .iz-hero__catch { font-size: 30px; padding-top: 32px; }
}
/* iPhone SE（第1世代）など幅360px未満では、申込ボタンの文字を少し小さくして1行に収める（2行に割れると最初の画面から押し出されるため） */
@media (max-width: 359px) {
    .program-lp--ikizurasa .iz-btn { font-size: 14px; padding-left: 16px; padding-right: 16px; }
}

/* ---- 2. 心の声（金の短い線＋罫線） ---- */
.iz-voices { border-top: 1px solid var(--iz-line); }
.iz-voices li {
    position: relative;
    padding: 18px 0 18px 32px;
    border-bottom: 1px solid var(--iz-line);
}
.iz-voices li::before,
.iz-dash li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(18px + .95em);
    width: 14px;
    height: 1px;
    background: var(--iz-gold);
}

/* ---- 3. おすすめ（金の短い線、罫線なし） ---- */
.iz-dash li { position: relative; padding-left: 32px; }
.iz-dash li + li { margin-top: 18px; }
.iz-dash li::before { top: .95em; }

/* ---- 4. 目指すこと（番号＋見出し＋説明、罫線で区切る） ---- */
.iz-goals { border-bottom: 1px solid var(--iz-line); }
.iz-goals li { display: grid; gap: 8px; padding: 28px 0; border-top: 1px solid var(--iz-line); }
.iz-goals__num { font-family: var(--iz-serif); font-size: 24px; line-height: 1.6; color: var(--iz-gold-deep); }
.iz-goals h3.iz-h3 { margin-bottom: 10px; }
.iz-goals p { color: var(--iz-ink-sub); }

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

/* ---- 6. 料金 ---- */
.iz-price__intake { background: var(--iz-yellow-pale); padding: 28px 20px; }
.iz-price__value {
    font-family: var(--iz-serif);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--iz-brown);
    margin: 12px 0 14px;
}
.iz-price__num { font-size: 40px; font-weight: 600; letter-spacing: .01em; }
.iz-price__unit { font-size: 16px; font-weight: 500; white-space: nowrap; margin: 0 .15em; }
.iz-price__cta { margin-top: 24px; }
/* 箱の中は狭く、SP でボタンが「相談して／みる」と割れる。割れるときは <wbr> の位置（窪田かおりに／相談してみる）だけで割る */
.iz-price__cta .lp-btn { word-break: keep-all; text-align: center; }
.iz-price__then {
    padding: 28px 0;
    text-align: center;
    color: var(--iz-brown);
    border-bottom: 1px solid var(--iz-line);
}
.iz-price__body { padding: 28px 0; border-bottom: 1px solid var(--iz-line); }
.iz-price__total { font-family: var(--iz-serif); font-size: 24px; line-height: 1.6; margin: 8px 0; }
.iz-price__total .iz-price__num { font-size: 30px; }
.iz-price__desc { font-size: 15px; color: var(--iz-ink-sub); }
.iz-price__note { margin-top: 24px; font-size: 14px; color: var(--iz-ink-soft); }

/* ---- 7. 流れ（はじめの面接 → 3つのまとまり）。SP は回を細い線と点でつなぐ ---- */
.iz-flow__intake,
.iz-flow__outro { padding: 28px 0; border-top: 1px solid var(--iz-line); border-bottom: 1px solid var(--iz-line); }
.iz-flow__intake h3.iz-h3,
.iz-flow__outro h3.iz-h3 { margin-bottom: 10px; }
.iz-flow__outro .iz-note { margin-top: 10px; }
.iz-flow__phase { padding: 36px 0 8px; }
.iz-flow__phase + .iz-flow__phase { border-top: 1px solid var(--iz-line); }
.program-lp--ikizurasa h3.iz-flow__phase-title {
    font-family: var(--iz-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--iz-brown);
    margin-bottom: 20px;
}
.iz-steps { position: relative; padding-left: 24px; }
.iz-steps::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 28px;
    width: 1px;
    background: var(--iz-gold);
}
.iz-steps li { position: relative; padding-bottom: 28px; }
.iz-steps li::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.25px solid var(--iz-gold);
    background: var(--iz-paper);
}
.iz-steps__label { display: block; font-size: 14px; font-weight: 700; color: var(--iz-brown); line-height: 1.6; margin-bottom: 6px; }
.iz-steps p { color: var(--iz-ink-sub); }
.program-lp--ikizurasa .iz-steps h4 {
    font-family: var(--iz-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.65;
    margin-bottom: 10px;
}
.iz-flow__note { margin-top: 20px; }

/* ---- 9. 担当カウンセラー ---- */
/* SP は 肩書・名前 → 写真 → 資格 の順。資格は profile の中にあるので、profile を display: contents にして並べ替える */
.iz-counselor { display: grid; margin-bottom: 36px; }
.iz-counselor__photo { order: 2; margin: 20px 0 24px; }
.iz-counselor__profile { display: contents; }
.iz-counselor__profile > .iz-eyebrow,
.iz-counselor__name { order: 1; }
.iz-trust { order: 3; }
.program-lp--ikizurasa h2.iz-counselor__name {
    font-family: var(--iz-serif);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.5;
}
.iz-counselor__name span { display: block; margin-top: 4px; font-family: var(--iz-sans); font-size: 14px; color: var(--iz-ink-soft); }
.iz-trust { border-top: 1px solid var(--iz-line); padding-top: 20px; }
.iz-trust li + li { margin-top: 16px; }
.iz-trust strong { display: block; font-weight: 700; }
.iz-trust small { display: block; font-size: 14px; color: var(--iz-ink-soft); }

/* ---- 10・11. 箇条書き（本文と同じ大きさ。薄い小さな文字にしない） ---- */
.iz-sec--rule .iz-col { border-top: 1px solid var(--iz-line); padding-top: 48px; }
.iz-bullets li { position: relative; padding-left: 20px; }
.iz-bullets li + li { margin-top: 18px; }
.iz-bullets li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .85em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--iz-gold);
}

/* ---- 12. よくあるご質問（開閉。＋と−は濃い金の細い線。開閉の状態を示す印なので、飾りの金より濃くする） ---- */
.iz-faq { border-top: 1px solid var(--iz-line); }
.iz-faq details { border-bottom: 1px solid var(--iz-line); }
.iz-faq summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 22px 40px 22px 0;
    font-weight: 500;
}
.iz-faq summary::-webkit-details-marker { display: none; }
.iz-faq summary::before,
.iz-faq summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 16px;
    height: 1.25px;
    background: var(--iz-gold-deep);
}
.iz-faq summary::after { transform: rotate(90deg); transition: transform .25s ease; }
.iz-faq details[open] summary::after { transform: rotate(0deg); opacity: 0; }
.iz-faq summary:focus-visible { outline: 2px solid var(--iz-brown); outline-offset: 2px; }
.iz-faq details p { padding: 0 40px 24px 0; }

/* ---- 13. 最後の呼びかけ ---- */
.iz-closing { padding-bottom: 100px; }
.program-lp--ikizurasa h2.iz-closing__title {
    font-family: var(--iz-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.65;
    margin-bottom: 20px;
}
.iz-closing__cta { margin: 28px 0 14px; }
/* 糸の終わりの輪と猫。svg の横 140 のうち 20 の位置を糸の中心にそろえ、まっすぐな糸（::before）は svg の上端で止める */
.iz-closing { --iz-cat-w: 84px; --iz-cat-bottom: 12px; }
.iz-closing::before { bottom: calc(var(--iz-cat-bottom) + var(--iz-cat-w) * 120 / 140); }
.iz-cat {
    position: absolute;
    left: calc(var(--iz-tx) - var(--iz-cat-w) * 20 / 140);
    bottom: var(--iz-cat-bottom);
    width: var(--iz-cat-w);
    height: calc(var(--iz-cat-w) * 120 / 140);
    overflow: visible;
    pointer-events: none;
}
.iz-cat path { fill: none; stroke: var(--iz-gold); stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.iz-cat circle { fill: var(--iz-gold); }

/* ---- 14. 予約（共有の部品を黄色の配色で） ---- */
.iz-reserve { padding: 56px 0 72px; }
.program-lp--ikizurasa .lp-reserve {
    background: var(--iz-white);
    border: 1px solid var(--iz-line);
    border-radius: 4px;
    padding: 32px 20px;
}
.program-lp--ikizurasa .lp-reserve > h2 {
    font-family: var(--iz-serif);
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    letter-spacing: .02em;
}
.program-lp--ikizurasa .lp-btn { color: var(--iz-btn-ink); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(154, 122, 34, .35); }
/* 空き枠の枠線。program.css は淡い色（--lp-sage-soft）で、白の上では見えないので、罫線より少し濃くする */
.program-lp--ikizurasa .lp-cal__slot { border-color: #D9C68A; }
.program-lp--ikizurasa .lp-cal__slot.is-picked { color: var(--iz-btn-ink); border-color: var(--iz-gold-deep); }
.program-lp--ikizurasa .lp-fixbar { background: rgba(251, 249, 244, .96); }
.program-lp--ikizurasa .lp-btn--fix { display: block; min-height: 0; padding: 10px 20px; }
/* 2行目（初回50分 5,500円）は細字で少し淡い茶。1行目の誘いを主、金額を従にする */
.program-lp--ikizurasa .lp-btn--fix span { display: block; font-size: 12px; font-weight: 400; color: var(--iz-btn-sub); opacity: 1; }

/* ================================================================
   6. PC（1024px〜）。本文の幅 1080px、文章だけの列は左から 180px 下げた 720px
   ---------------------------------------------------------------- */
@media (min-width: 1024px) {
    .program-lp--ikizurasa {
        --iz-tx: calc(max((100% - 1080px) / 2, 100px) - 70px);
    }
    .program-lp--ikizurasa [id] { scroll-margin-top: 96px; }
    .iz-pc { display: inline; }
    .iz-sp { display: none; }
    .iz-wrap { width: min(1080px, calc(100% - 200px)); max-width: none; padding: 0; }
    .iz-col { margin-left: min(180px, 16.7%); max-width: 720px; }
    .program-lp--ikizurasa h2.iz-h2 { font-size: 36px; }
    .program-lp--ikizurasa .iz-statement { font-size: 22px; margin-top: 36px; }
    .program-lp--ikizurasa .iz-statement--closing { font-size: 20px; margin: 0 0 8px; }
    .program-lp--ikizurasa .iz-pledge { font-size: 26px; }
    .program-lp--ikizurasa h3.iz-h3 { font-size: 22px; }
    .iz-head { margin-bottom: 48px; }
    .iz-sec { padding: 96px 0; }
    .iz-thread { left: calc(var(--iz-tx) - 40px); width: 80px; }

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

    .program-lp--ikizurasa .iz-btn { width: auto; min-width: 384px; min-height: 64px; }

    /* ヒーロー：文章 560px ＋ 写真 460px（4:5） */
    .iz-hero { padding: 48px 0 112px; }
    .iz-hero__grid { grid-template-columns: minmax(0, 560px) minmax(0, 460px); justify-content: space-between; align-items: center; gap: 48px; }
    .program-lp--ikizurasa h1.iz-hero__title { font-size: 24px; margin-bottom: 20px; }
    .iz-hero__catch { font-size: 40px; margin-bottom: 20px; }
    .iz-hero__cta { margin-top: 28px; }
    .iz-hero__price { font-size: 14px; margin-top: 18px; }

    .iz-voices { margin-left: min(180px, 16.7%); }
    .iz-voices li { padding: 22px 0 22px 44px; font-size: 18px; }
    .iz-voices li::before { top: calc(22px + .95em); width: 24px; }
    .iz-dash li { padding-left: 40px; }
    .iz-dash li + li { margin-top: 22px; }
    .iz-dash li::before { width: 16px; }

    .iz-goals li { grid-template-columns: 180px minmax(0, 1fr); gap: 0; padding: 40px 0; }
    .iz-goals__num { font-size: 40px; line-height: 1.4; }

    /* 文章と写真の2列：写真は 492px。概要は写真が左、セッションの間と最後の呼びかけは写真が右 */
    .iz-media { grid-template-columns: minmax(0, 540px) minmax(0, 492px); justify-content: space-between; align-items: center; gap: 48px; }
    .iz-media--photo-left { grid-template-columns: minmax(0, 492px) minmax(0, 540px); }
    .iz-media--photo-left .iz-media__photo { order: 0; }

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

    /* はじめの面接の罫線は本文の幅いっぱい、まとまりの間の罫線は 180px 下げた位置から（Figma の PC 案） */
    .iz-flow__intake,
    .iz-flow__outro { padding: 40px 0 40px min(180px, 16.7%); }
    .iz-flow__phase { margin-left: min(180px, 16.7%); padding: 44px 0 16px; }
    .program-lp--ikizurasa h3.iz-flow__phase-title { font-size: 22px; color: var(--iz-ink); margin-bottom: 28px; }
    /* PC は回のラベルを左の列に置き、点と線は使わない（Figma の PC 案） */
    .iz-steps { padding-left: 0; }
    .iz-steps::before,
    .iz-steps li::before { display: none; }
    .iz-steps li { display: grid; grid-template-columns: 112px minmax(0, 1fr); padding-bottom: 32px; }
    .iz-steps__label { padding-top: 4px; }

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

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

    .iz-closing { padding-bottom: 136px; --iz-cat-w: 112px; --iz-cat-bottom: 16px; }
    .program-lp--ikizurasa h2.iz-closing__title { font-size: 36px; }

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

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