/* ============================================================
   ココロフィルム オンライン事務局 LP
   トークンは _ref/tokens.md（カンプ実測・換算1.5）が正本
   ============================================================ */

:root {
  --bg: #fdfbf9;
  --bg-pink-soft: #fdf6f6;
  --pink-100: #fbf2f1;
  --pink-200: #f8e1e4;
  --pink-300: #f2b3b8;
  --pink-400: #e69bab;
  --pink-500: #e98a9f;
  --pink-600: #e8788f;
  --pink-700: #d9607a;
  --pink-price: #e67a94;
  --pink-fill: #ffd0d5;   /* 9/17: 旧・下線画像 deco-underline-soft.png の実測色（マッチョのベタ塗り用） */
  --rose-700: #a86078;
  --text: #4a3f3a;
  --text-strong: #2b1a14;
  --text-muted: #7a6d68;
  --card-beige: #fbf5ef;
  --white: #ffffff;

  --svc-keiri: #e88098; --svc-keiri-bg: #fbf2f1; --svc-keiri-dot: #f0a8b8;
  --svc-soumu: #80b8a0; --svc-soumu-bg: #f0f5ef; --svc-soumu-dot: #b0d0c0;
  --svc-dx: #6888c0;    --svc-dx-bg: #f2f5f8;    --svc-dx-dot: #a8b8d8;
  --svc-sns: #9860b8;   --svc-sns-bg: #f1ecf5;   --svc-sns-dot: #c8a8d8;
  --svc-other: #e8b070; --svc-other-bg: #fcf7f0; --svc-other-dot: #f0c890;

  /* カンプ拡大×候補31書体の実描画で選定（8/31）: 見出し=細い均一線のペン系／本文=丸ゴ／FV1行目=太い手書きマーカー */
  --font-display: "ZMG Check", "ZMG Sub", "Hiragino Maru Gothic ProN", sans-serif;   /* FV3・4行目・カード見出し */
  --font-catch: "ZMG Check", "ZMG Sub", "Hiragino Maru Gothic ProN", sans-serif;      /* FV1行目（9/10 Yusei Magic→丸ゴ太字へ・ユーザー指摘「書体の雰囲気が違う」） */
  --font-marker: "Zen Kurenaido", "Klee One", cursive;                            /* 「考えないでいい。」 */
  --font-heading: "ZOM Sub", "Zen Old Mincho", "Hiragino Mincho ProN", serif; /* 9/22 書体③（美和さん選択）: セクションh2・私たちは（旧 Klee One） */
  --font-num: "ZOM Sub", "Zen Old Mincho", "Hiragino Mincho ProN", serif;                    /* 33,000・理由の番号・Q */
  --font-body: "ZMG Check", "ZMG Sub", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --font-hand: "ZOM Sub", "Zen Old Mincho", "Hiragino Mincho ProN", serif;  /* 9/22 書体③: 11-1「まずは30分〜」も同じ明朝へ（旧 Zen Kurenaido） */

  --container: 1240px;
  --gutter: 28px;
  --radius: 24px;
  --shadow: 0 10px 30px rgba(120, 60, 70, 0.10);
  --shadow-btn: 0 8px 20px rgba(232, 120, 143, 0.35);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
  font-feature-settings: "palt";
  letter-spacing: .02em;
  overflow-x: hidden;
}
img, picture { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }
button, input, textarea { font: inherit; color: inherit; }
/* 2026-10-08 表示速度: ページの文字は「使っている文字だけ」の ZMG Sub。訪問者が入力欄に打つ文字だけは Google の完全版（index.html で非同期読込）で同じ書体を出す */
input, textarea { font-family: "ZMG Sub", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif; }
/* 9/17 MTG: SP専用の改行（確定表「改行指示の扱い」＝スマホは「、」で改行・タブレット/PCは自然折返し）。
   既定は非表示、≤768 の SP ブロックでのみ inline にする。旧 `.plan__text br` 系の個別 hide ルールはこれに統合。
   .br-xs / .br-sm / .br-md ＝ 前半の文節が入りきらない狭幅だけの二段目の改行（閾値＝ファイル末尾・実測値） */
.br-sp, .br-xs, .br-sm, .br-md { display: none; }
.br-a, .br-b, .br-c, .br-r353, .br-r340, .br-r327, .br-w347, .br-w329 { display: none; }  /* 9/23 理由本文（7-1）専用の二段目改行。閾値＝各行の実測最小適合幅−1（幅−168px＝本文の横幅・行幅は Range 実測） */
:focus-visible { outline: 3px solid var(--pink-700); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--white); border-radius: 8px; }
.skip-link:focus { top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  position: relative; background: linear-gradient(180deg, #ee879e 0%, #e86d8a 100%); color: var(--white);
  font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  border: 0; border-radius: 999px; box-shadow: var(--shadow-btn); cursor: pointer;
  transition: transform .2s, background-color .2s;
}
.btn:hover { filter: brightness(.96); transform: translateY(-2px); }
.btn--lg { min-height: 60px; padding: 0 72px 0 44px; font-size: 18px; }
.btn--sm { min-height: 44px; padding: 0 48px 0 22px; font-size: 13px; }
/* カンプ: 白丸に細い矢印・ボタン右端に固定 */
.btn__arrow {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--white); color: var(--pink-600); font-family: Arial, sans-serif; font-weight: 400; font-size: .85em; line-height: 1;
}
.btn--sm .btn__arrow { right: 8px; }
.btn__label-short { display: none; }  /* 480px以下のヘッダーでのみ表示（社名が長くなった分の吸収） */
.btn--noarrow { padding-left: 44px; padding-right: 44px; }  /* 矢印なしのボタン（送信）は左右対称 */

/* ---------- Section titles ---------- */
.sec-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1.4;
  letter-spacing: .08em; color: var(--text-strong); text-align: center;
}
.sec-title--left { text-align: left; font-size: 25px; }
.sec-title__num { font-family: var(--font-num); font-size: 1.35em; color: var(--pink-500); }
.sec-lead { text-align: center; font-size: 14px; color: var(--text); margin-top: 10px; }

/* ---------- Header ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 40px; height: auto; }
/* 9/17: <picture> が flex アイテムとして潰れ、ロゴが縮む（変更前も390pxで18px＝仕様どおり出ていなかった）。
   社名を「株式会社〜」へ伸ばしたことで0pxまで潰れて消えたため、ここで縮小を禁止する */
.brand > picture { flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; color: var(--text-strong); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .08em; white-space: nowrap; }
.brand__sub { font-size: 10px; letter-spacing: .08em; color: var(--text-muted); }

/* ---------- 01 Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  /* カンプ実測: 上 #fdfbf9 → 下 #fdf8f5 のほぼ一様なクリーム。左下にごく淡いピンクの気配 */
  background:
    radial-gradient(60% 50% at 10% 100%, rgba(242, 179, 184, .12), transparent 70%),
    linear-gradient(180deg, #fdfbf9 0%, #fdf8f5 100%);
  padding-top: 90px;
}
.hero__inner {
  display: grid; grid-template-columns: 548px 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0 16px; position: relative;
  grid-template-areas: "catch visual" "sub visual";
}
.hero__catch { grid-area: catch; padding-top: 18px; }
.hero__sub { grid-area: sub; padding-bottom: 72px; }
.hero__visual { grid-area: visual; }
.hero__subcopy { display: grid; color: var(--text-strong); }
.hero__title { display: grid; color: var(--text-strong); }
.hero__l1 { font-family: var(--font-catch); font-weight: 700; font-size: 37px; line-height: 1.3; letter-spacing: .03em; }
/* 9/17 MTG: 書体を上段と同じ丸ゴへ（下線は削除＝下の Decorations 節も撤去済み）。色=ピンクは維持（美和さん明示） */
.hero__l2 {
  font-family: var(--font-catch); font-weight: 700; font-size: 66px; line-height: 1.1; color: var(--pink-500);
  margin: 4px 0 10px; letter-spacing: .025em;  /* 9/17: 丸ゴ化で字幅が増え PC1296 で1px溢れて2行化→字間で吸収（.04em→.025em） */
  white-space: nowrap;
}
/* 9/17 MTG: 旧・吹き出しの中身をここへ移設（吹き出しは削除） */
.hero__l2b {
  font-family: var(--font-catch); font-weight: 700; font-size: 25px; line-height: 1.45; color: var(--text-strong);
  margin: 0 0 18px; letter-spacing: .03em;
}
.hero__l3 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.4; letter-spacing: .06em; }
/* 9/17 MTG: 下線を削除 → 下線と同系のピンクでベタ塗り。「マッチョ」は重なるため白抜き（美和さん指示）
   🔒 寸法（width/padding/font-size）は変更前のまま＝他幅のレイアウトに影響を与えない。
      塗りは文字の連なりに沿わせる（inline + box-decoration-break）ので、左端は上段「一人社長のための」と揃う */
.hero__l4 {
  font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.3; letter-spacing: .04em;
  width: max-content; max-width: 100%; padding-bottom: 8px;
}
.hero__l4 .mark {
  background: var(--pink-fill); color: var(--text-strong);
  /* 9/17: 塗りの高さを文字の高さに合わせる（padding依存だと行送りを超えて上段に食い込む）。
     文字の位置・大きさは変えず、塗りの縦だけを縮める */
  padding: 0 .18em; border-radius: .12em; line-height: 1.18;
  display: inline-block;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__l4 em { color: inherit; font-style: normal; }  /* 9/24 美和さん①: 「マッチョ」の白抜きをやめ、右側「な右腕サービス」と同じ黒へ（9/17 合意 #3 の白抜きを先方が撤回） */

.hero__icons { display: flex; gap: 22px; margin-top: 26px; }
.hero__icons li { display: grid; justify-items: center; gap: 6px; font-size: 13px; letter-spacing: .04em; color: var(--text); }
.hero__icons img { width: 52px; height: 52px; object-fit: contain; }

.hero__price { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; color: var(--pink-price); }
.hero__price-label { font-size: 20px; font-weight: 500; color: var(--text-strong); margin-right: 6px; }
.hero__price-num { font-family: var(--font-num); font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: .02em; }
.hero__price-unit { font-size: 24px; font-weight: 500; }
.hero__price-note { font-size: 14px; color: var(--pink-price); }
.hero__lead { margin-top: 10px; font-size: 15px; }
.hero .btn--lg { margin-top: 20px; min-width: 458px; }

/* 写真は常に画面右端まで抜く（コンテナ外側の余白ぶんをvwから逆算） */
.hero__visual { position: relative; align-self: stretch; margin-top: -60px; margin-right: calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--gutter))); }
.hero__photo {
  width: 100%; height: 100%; min-height: 660px; object-fit: cover; object-position: 60% 40%;
  border-radius: 0 0 0 120px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}
.hero__badge {
  position: absolute; right: 8%; bottom: 60px; z-index: 4;
  width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: rgba(200, 105, 130, .82); color: var(--white); font-weight: 700; font-size: 19px; line-height: 1.6; letter-spacing: .04em;
  box-shadow: var(--shadow);
}
/* FV下端 = 次セクションの白がごく浅い波形で食い込む（カンプ実測: 振幅≒12px→実装18px） */
.hero__wave {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; z-index: 3; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 864 34' preserveAspectRatio='none'><path d='M0,26 C90,26 150,10 260,8 C370,6 420,20 520,16 C610,13 660,4 740,8 C800,11 830,18 864,16 L864,34 L0,34 Z' fill='%23ffffff'/></svg>") no-repeat center bottom / 100% 100%;
}


/* ---------- PC: FV写真＝高さ100%・比率固定(1.4)のボックスを右端に固定し、左をクリームのオーバーレイで覆う（カンプ構造・幅で拡大しない） ---------- */
@media (min-width: 1025px) {
  .hero { background: #fdfbf9; }
  .hero__inner { position: static; }
  .hero__catch, .hero__sub { position: relative; z-index: 2; }
  .hero__visual {
    position: absolute; top: 0; bottom: 0; right: -110px; left: auto; height: 100%; aspect-ratio: 1.4 / 1;
    margin: 0; z-index: 0; overflow: hidden;  /* right:-110px = 人物の顔をカンプ位置（画面幅の約73%）へ寄せる（9/10 指摘①） */
  }
  .hero__visual picture { position: absolute; inset: 0; }
  .hero__photo {
    width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 30%; border-radius: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__visual::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(253,251,249,1) 0%, rgba(253,251,249,.97) 26%, rgba(253,251,249,.7) 40%, rgba(253,251,249,.2) 54%, rgba(253,251,249,0) 66%),
      linear-gradient(180deg, rgba(253,251,249,.3) 0%, rgba(253,251,249,0) 28%);
  }
    .hero__badge { right: 17%; bottom: 13%; z-index: 4; }
}

/* ---------- 02 Worry ---------- */
.worry { padding: 40px 0 28px; background: var(--white); }
/* 9/17 MTG 3-1/3-2 合意: イラスト7点と吹き出しを削除→文言7個をカード化（お客様の声と同じベージュ・角丸・影）。
   9/23 本人合意: PC は 4列＋3列の2段（理由セクションと同じ4列のリズム・2段目は中央）。文言は全幅で同じ2行（1行≤10字＝SP 360 の内側 134px に収まる） */
.worry__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 24px; }
.worry__card { width: calc(25% - 15px); background: var(--card-beige); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 20px; display: grid; place-items: center; }
.worry__text { font-size: 14px; line-height: 1.7; font-weight: 500; color: #2d2d35; text-align: center; }

/* ---------- 03 We ---------- */
/* 9/25 全面作り直し（美和さん②＋本人指示）: 写真を実写真へ差替え・波の表現をやめる。
   旧=セクション上辺の波（#we-bg-clip）＋写真の雲形/波形の切り抜きで「塊」を表現していた → 波を前提にしない構成へ。
   背景=「選ばれる理由」「FAQ」と同じ全幅の平らなピンク帯／文章と写真の2カラム／写真=角丸（カードと同じ --radius）
   バッジ=写真の左下に重ねる（右下だと人物の顔・手に掛かる。左下は手前の人物の背中） */
.we { position: relative; padding: 64px 0 72px; background: var(--bg-pink-soft); }
.we__inner { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: 56px; }
.we__copy { padding-left: 40px; }
.we__title { color: var(--text-strong); display: grid; gap: 4px; }
.we__t1 { font-family: var(--font-heading); font-weight: 600; font-size: 34px; letter-spacing: .08em; }
.we__t2 { font-family: var(--font-heading); font-weight: 600; font-size: 30px; letter-spacing: .06em; color: var(--pink-500); line-height: 1.4; white-space: nowrap; }
.we__text { margin-top: 18px; font-size: 15px; line-height: 2; }
.we__text strong { color: var(--pink-600); font-weight: 700; }
.we__visual { position: relative; }
.we__photo-wrap { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.we__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.we__badge {
  position: absolute; left: -44px; bottom: -36px;
  width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--pink-400); color: var(--white); font-size: 14px; line-height: 1.7; font-weight: 500; box-shadow: var(--shadow);
}
.we__badge strong { font-size: 17px; }

/* ---------- 04 Service ---------- */
.service { padding: 48px 0 40px; background: var(--white); }  /* 9/25: 上の「私たち」が平らなピンク帯になった＝パネルとの間を空ける（8→48） */
.service__panel { background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px 24px; }
.service__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-top: 20px; }
.svc { position: relative; border-radius: 18px; padding: 16px 18px 46px; min-height: 0; }
.svc__title { font-size: 17px; font-weight: 700; letter-spacing: .02em; text-align: center; line-height: 1.4; white-space: nowrap; }
.svc__items { margin-top: 12px; display: grid; gap: 3px; font-size: 13.5px; font-weight: 500; color: #442c29; }
.svc__items li { position: relative; padding-left: 20px; line-height: 1.55; }
.svc__items li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; }
.svc__icon { position: absolute; right: 12px; bottom: 12px; width: 56px; height: 56px; }
.svc--keiri { background: var(--svc-keiri-bg); } .svc--keiri .svc__title, .svc--keiri li::before { color: var(--svc-keiri); }
.svc--soumu { background: var(--svc-soumu-bg); } .svc--soumu .svc__title, .svc--soumu li::before { color: var(--svc-soumu); }
.svc--dx { background: var(--svc-dx-bg); } .svc--dx .svc__title, .svc--dx li::before { color: var(--svc-dx); }
.svc--sns { background: var(--svc-sns-bg); } .svc--sns .svc__title, .svc--sns li::before { color: var(--svc-sns); }
.svc--other { background: var(--svc-other-bg); } .svc--other .svc__title, .svc--other li::before { color: var(--svc-other); }

/* ---------- 05 Reason ---------- */
.reason { padding: 32px 0 40px; background: var(--bg-pink-soft); }
.reason__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.reason__card { position: relative; background: var(--card-beige); border-radius: 18px; padding: 20px 18px 18px; min-height: 0; }
.reason__num {
  font-family: var(--font-num); font-size: 30px; line-height: 1; color: var(--pink-500); position: absolute; left: 14px; top: 14px;
  width: 56px; height: 56px; border-radius: 50%; background: var(--pink-100); display: grid; place-items: center;
}
.reason__title { margin-left: 64px; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--text-strong); letter-spacing: .02em; min-height: 0; }
/* 9/11 v=z PC: 本文の行が短く左へ縮んでいた（実測 カード284pxに対し文字の実幅133px・5行）
   → イラストを116→96pxに小さくし、本文の右余白も 108→92px に詰めて行長を確保（文字とは重ねない） */
.reason__text { margin-top: 12px; font-size: 13px; line-height: 1.75; padding-right: 84px; min-height: 100px; }
.reason__img { position: absolute; right: 2px; bottom: 4px; width: 96px; height: 116px; object-fit: contain; object-position: bottom; }
.reason__img { opacity: .75; }   /* 9/30 美和さん支給イラスト＝「濃いめのピンクで浮きすぎるなら半透明か色彩調整」→ 半透明 */

/* ---------- 06 Voice ---------- */
.voice { padding: 40px 0 40px; background: var(--white); }
.voice__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 22px; }   /* 9/30 声4件＝2×2 */
.voice__card { background: var(--card-beige); border-radius: 18px; padding: 26px 28px 28px; box-shadow: var(--shadow); }
/* 10/6 お客様の声＝文章は不変・見せ方だけ変更（本人裁定）: 誰の声かをラベルに／見出しを大きく＋区切り線／本文は細く・やわらかい色に。スマホは本文を3行で折りたたむ（末尾の @media） */
.voice__who { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--rose-700); letter-spacing: .04em; background: var(--pink-200); border-radius: 999px; padding: 3px 12px; }
.voice__title { margin-top: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--pink-300); font-family: var(--font-heading); font-weight: 700; font-size: 19px; line-height: 1.55; color: var(--text-strong); word-break: auto-phrase; text-wrap: balance; }
.voice__body { margin-top: 14px; }
.voice__text { margin-top: 10px; font-size: 14px; font-weight: 400; line-height: 1.85; color: #5c504b; }
.voice__body .voice__text:first-child { margin-top: 0; }
.voice__more { display: none; }

/* 9/24 美和さん③: 料金プランの背景写真を先方指定の実写真（photo-plan-bg-v2）へ差替 */
/* ---------- 07 Plan（全幅・背景写真＋白オーバーレイ＝カンプのカード構造） ---------- */
.plan {
  position: relative; padding: 64px 0 72px; min-height: 470px; display: flex; align-items: center; overflow: hidden;
  background: #fdfbf9;
}
/* 9/11 PC: 写真は幅に連動させず 1024〜1180px 幅で右寄せ（1024表示と同じ人物の大きさ・上半身が入る）。左端は透明に溶かして継ぎ目を消す */
.plan::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: auto; aspect-ratio: 3 / 2; z-index: 0; pointer-events: none;  /* 9/25 新写真: 高さ＝セクション高・幅は3:2で自動（人物全身が入り右に寄る）。左端はマスクで溶かす */
  background: url("../img/photo-plan-bg-v2.jpg") no-repeat 100% 0 / cover;
  background-image: image-set(url("../img/photo-plan-bg-v2.webp") type("image/webp"), url("../img/photo-plan-bg-v2.jpg") type("image/jpeg"));
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 200px); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 200px);
}
.plan::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(253,251,249,.35) 0%, rgba(253,251,249,.8) 26%, rgba(253,251,249,.86) 58%, rgba(253,251,249,.5) 76%, rgba(253,251,249,.1) 100%),
    linear-gradient(180deg, rgba(253,251,249,.2) 0%, rgba(253,251,249,0) 40%);
}
.plan__inner { position: relative; width: 100%; z-index: 2; }
.plan__content { max-width: 680px; margin: 0 auto; text-align: center; }  /* 9/10 PC=中央（ユーザー指示） */
.plan__amount { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin-top: 38px;  /* 9/11 実測: リボン→金額 8px→24px */ color: var(--pink-price); white-space: nowrap; }
.plan__label { font-size: 22px; font-weight: 700; color: var(--text-strong); margin-right: 6px; }
.plan__num { font-family: var(--font-num); font-weight: 700; font-size: 60px; line-height: 1; }
.plan__unit { font-size: 24px; }
.plan__note { font-size: 16px; }
.plan__text { margin-top: 15px; font-size: 15px; line-height: 1.9; }
/* 9/11 PC: 利点3点は横1列（項目間28px・中央揃え）＝金額行・説明文と幅を揃えた横長の塊にする */
.plan__checks { margin: 22px auto 0; display: flex; justify-content: center; align-items: center; gap: 6px 22px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--text-strong); width: auto; max-width: 100%; text-align: left; }
.plan__checks li { padding-left: 24px; position: relative; }
.plan__checks li::before { content: "✓"; position: absolute; left: 0; color: var(--pink-500); font-weight: 700; }

/* ---------- 08 FAQ（全幅・独立セクション） ---------- */
.faq { padding: 56px 0 60px; background: var(--bg-pink-soft); }
.faq__list { max-width: 760px; margin: 26px auto 0; }
.faq__item { margin-top: 12px; }
.faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  background: var(--white); border-radius: 999px; padding: 9px 18px 9px 14px; font-size: 15px; font-weight: 500; color: var(--text-strong);
  border: 1px solid #f1e3e6; box-shadow: 0 2px 8px rgba(120,60,70,.05); position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
/* カンプ: 右端に「丸＋矢印」・Qはピンク文字のみ（塗り丸なし） */
.faq__q::after {
  content: "→"; margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--pink-500); color: var(--pink-500);
  display: grid; place-items: center; font-family: Arial, sans-serif; font-weight: 400; font-size: 13px; line-height: 1; transition: transform .2s; flex: none;
}
.faq__item[open] .faq__q::after { transform: rotate(90deg); }
.faq__mark { font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1; color: var(--pink-500); flex: none; width: 26px; text-align: center; }
.faq__a { padding: 14px 22px 8px 56px; font-size: 14px; line-height: 1.9; }

/* ---------- 09 Closing（本文中で唯一のCTA・背景写真＋白オーバーレイ） ---------- */
.closing {
  position: relative; padding: 70px 0 74px; text-align: center;
  background: #fdfbf9 url("../img/photo-closing-bg.jpg") no-repeat 50% 50% / cover;
  background-image: image-set(url("../img/photo-closing-bg.webp") type("image/webp"), url("../img/photo-closing-bg.jpg") type("image/jpeg"));
}
.closing::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(253,251,249,.9) 0%, rgba(253,251,249,.86) 56%, rgba(253,251,249,.45) 80%, rgba(253,251,249,.08) 100%);
}
.closing__inner { position: relative; max-width: 640px; }
.closing__hand { font-family: var(--font-hand); font-weight: 700; font-size: 40px; line-height: 1.35; color: var(--pink-500); white-space: nowrap; }  /* 9/22: 書体③は 700 */
.closing__text { margin-top: 20px; font-size: 15px; line-height: 1.9; }
.closing .btn--lg { margin-top: 26px; min-width: 458px; }
.closing__note { margin-top: 18px; font-size: 14px; color: var(--text-muted); }
.reserve-sec { background: var(--bg); padding: 0 0 64px; }

/* ---------- 予約カレンダー（クロージング直下・同セクション内） ---------- */
.reserve { padding-top: 44px; scroll-margin-top: 24px; }
.reserve__title { text-align: center; font-size: 18px; font-weight: 700; color: var(--text-strong); letter-spacing: .04em; }
.reserve__lead { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 8px; }
/* 9/17 MTG（美和さん質問）: 予約カレンダーの枠内スクロールを無くす。
   Google の予約ページはクロスオリジンで高さを親へ通知しないため（9/17 実測・message 受信 0 件）動的追従は不可＝
   「説明欄を展開＋空き枠を表示」した最大状態の高さを枠幅ごとに実測し、固定高さで出し分ける（余裕 +40px≒空き枠2本分）。
   実測（枠幅→必要高さ）: 305→1581 / 345→1525 / 375→1461 / 425→1421 / 753→821 / 961→841 / 1184→781（2026-09-19・空き枠4本/日）
   ⚠️ 空き枠の本数を増やすと高さが伸びる（約22px/本）＝運用で本数が変わったら再計測
   10/6 変更（小河原さん指摘「下部の余白」）: 基準を「説明欄は閉じたまま＋空き枠を表示」＝通常の状態に変更（10/7〜11/14 の予約可能日を全日クリックして最大値を実測・余裕 +20〜25px）。
   「さらに表示」を押した時だけ枠内が約 90〜210px スクロールする（Google が高さを通知しないため不可避・9/17 の最大状態基準との二者択一）。
   実測（枠幅→説明閉・空き枠ありの文書高さ）: 320→1345 / 330→1345 / 345→1329 / 360〜390→1306 / 425〜596→1290 / 600→780 / 610〜768→704 / 961〜1184→679
   Google 側の 1ペイン→2ペイン切替 = 枠幅 600px（2026-10-06 実測） */
.reserve__frame { margin-top: 20px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--white); height: 700px; }  /* PC ≥1200: 枠1144〜1184で679（10/6） */
.reserve__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- 09 Contact ---------- */
.contact { padding: 70px 0 90px; background: var(--bg-pink-soft); }
.form { max-width: 720px; margin: 34px auto 0; background: var(--white); border-radius: var(--radius); padding: 40px 44px; box-shadow: var(--shadow); }
.form__row { display: grid; gap: 8px; margin-bottom: 20px; }
.form__label { font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 10px; }
.form__req { font-size: 11px; font-weight: 700; color: var(--white); background: var(--pink-600); border-radius: 4px; padding: 1px 8px; }
.form__input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #e6d9d9; border-radius: 10px; background: #fff; }
.form__input:focus { border-color: var(--pink-500); }
.form__textarea { min-height: 160px; resize: vertical; }
.form__privacy { font-size: 13px; text-align: center; color: var(--text-muted); }
.form__privacy a { text-decoration: underline; }
.form__submit { text-align: center; margin-top: 20px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form__alert { margin-bottom: 18px; padding: 12px 16px; border-radius: 10px; background: #fdecef; color: #b3364f; font-weight: 700; font-size: 14px; }
.form__error { font-size: 13px; color: #b3364f; font-weight: 500; }
.form__input.is-invalid { border-color: #d9607a; background: #fff7f8; }

/* ---------- Footer（カンプ=1本の帯: ロゴ／ナビ／CTA／↑） ---------- */
.site-footer { background: var(--pink-300); color: var(--text-strong); }
.site-footer__bar { display: flex; align-items: center; gap: 28px; padding-top: 12px; padding-bottom: 10px; }
.site-footer__nav { display: flex; gap: 26px; font-size: 13px; font-weight: 500; flex: 1; justify-content: center; flex-wrap: wrap; }
.totop { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--white); color: var(--white); font-size: 14px; flex: none; }
.site-footer__copy { font-size: 10px; line-height: 1.4; text-align: right; padding-bottom: 4px; opacity: .8; }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 22px; padding-bottom: 22px; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 18px; border-top: 1px solid rgba(255,255,255,.5); font-size: 12px; }
.site-footer__links a { text-decoration: underline; }

/* ---------- Decorations（シート01派生・画風統一） ---------- */
/* 9/17 MTG: 「考えないでいい。」の下線を削除（美和さん指示）。旧 deco-underline-v2 の背景指定は撤去 */
.hero__l2 { position: relative; display: inline-block; }
.hero__badge { overflow: visible; }
.hero__badge picture, .we__badge picture { display: contents; }
/* 文字は円いっぱいの絶対配置グリッドで中央固定（飾り要素の有無・幅に依存しない＝9/10 実測で上ずれ30pxを是正） */
.hero__badge > span, .we__badge > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 28px); display: block; text-align: center; }  /* 飾りの <picture> をグリッド行に数えない＝文字を円の中央に（9/10 指摘②） */
/* 9/11 小枝=カンプどおり円の右下の縁に沿わせる（左下端が6時半・右上端が3時半の外側）。寸法は円の直径基準の%で全幅共通 */
.hero__badge-deco, .we__badge-deco { position: absolute; left: 34%; bottom: -14%; width: 92%; height: auto; transform: none; }  /* 9/10: バッジ直下・左右中央（ユーザー指示） */
  /* 9/10: バッジ下端・左右中央（円の縁に掛ける＝白が見える） */
.sec-title--ribbon { position: relative; padding-bottom: 26px; }
.sec-title--ribbon::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 76px; height: 28px; transform: translateX(-50%);
  background: url("../img/deco-ribbon.png") no-repeat center / contain;
  background-image: image-set(url("../img/deco-ribbon.webp") type("image/webp"), url("../img/deco-ribbon.png") type("image/png"));
}

/* ---------- Sticky CTA (SP only) ---------- */
.sticky-cta { display: none; }

/* ============================================================
   Responsive
   BP: 1024（タブレット帯・後藤#89の教訓で独立設計）/ 768（SP）/ 480（小型SP）
   ============================================================ */

/* ---- Tablet ≤1024 ---- */
@media (max-width: 1024px) {
  :root { --gutter: 24px; }
  .hero__inner { grid-template-columns: 1.15fr 1fr; gap: 16px; }
  .hero__l1 { font-size: 26px; letter-spacing: .02em; }
  .hero__l2 { font-size: 44px; }
  .hero__l3 { font-size: 21px; }
  .hero__l4 { font-size: 29px; }
  .hero__icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 4px; margin-top: 26px; }
  .hero__icons li { font-size: 11px; letter-spacing: 0; text-align: center; }
  .hero__icons img { width: 40px; height: 40px; }
  .hero__price-num { font-size: 44px; }
  .hero .btn--lg { min-width: 0; width: 100%; }
  .hero__photo { min-height: 520px; }
  /* 9/11 v=z タブレット限定(769〜1024): 写真の下に空白ができていた（実測 写真の下端550px / FV下端724px＝174px空き）
     → 写真を右カラムいっぱいの高さにして空白を埋める。
     ⚠️ min-width:769px を必ず付ける（前回これを忘れてSPまで壊した） */
  @media (min-width: 769px) {
    .hero__visual { position: relative; height: 100%; }
    .hero__visual picture { display: block; height: 100%; }
    .hero__photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 22%; }
  }
  .hero__badge { width: 160px; height: 160px; font-size: 15px; right: 50px; bottom: 40px; }  /* 小枝が右へ26%はみ出すぶん内側へ */
    /* 9/11 v=z タブレット(769〜1024) FVのバランス最適化（ユーザー指示）
     実測(900px)の問題: 写真カラムが352px幅×584px高＝細長い／吹き出し204px＝写真幅の58%／
     バッジ160px＝写真幅の45% と、飾りが写真に対して大きすぎた。
     → ①写真カラムを広げて縦横比を整える ②吹き出し・バッジを写真幅に見合う大きさへ
     ⚠️ 上の 160px/204px 指定より後に置く（順序が逆だと上書きされない） */
  @media (min-width: 769px) {
    .hero__inner { grid-template-columns: 1.18fr 1fr; }
    .hero__badge { width: 132px; height: 132px; font-size: 12.5px; right: 34px; bottom: 30px; }
    /* 「画像・動画制作」だけ2行に折返していた。列幅を超えても1行で見せる（隣とは gap で干渉しない） */
    .hero__icons li { font-size: 10.5px; }
    .hero__icons li span { white-space: nowrap; }
  }
  .worry__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
  .worry__card { width: calc(25% - 11px); padding: 18px 14px; }  /* タブレット: 4+3 */
  .worry__text { font-size: 13px; }  /* 769px のカード 169px（内側 141px）に 10字を入れる（14px だと 140.x で折れる） */
  .we { padding: 48px 0 60px; }
  .we__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .we__copy { padding-left: 0; }
  .we__t1 { font-size: 28px; }
  .we__t2 { font-size: 24px; white-space: normal; }
  .we__badge { width: 130px; height: 130px; font-size: 11px; line-height: 1.5; left: -24px; bottom: -30px; }
  .we__badge strong { font-size: 13px; }
  .we__badge > span { width: calc(100% - 8px); }
  .service__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
  .svc { width: calc(33.333% - 10px); }
  .svc { min-height: 0; padding-bottom: 66px; }
  .reason__list { grid-template-columns: repeat(2, 1fr); }
  .reason__card { min-height: 0; }
  .voice__list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .closing__hand { white-space: normal; }
  /* タブレット以下=セクション背景に写真。PC用の ::after は使わない
     9/11 v=z ユーザー指示: 画像の大きさは変えず（cover のまま）人物をそのまま背景に重ねて上へスライド。
       人物の部分だけオーバーレイを薄く、文字の上はしっかり濃くして可読性を確保する。
       実測: 人物（ジャケット）は画像の x 68%〜91% に位置する */
  .plan { padding: 48px 0 56px; min-height: 0; display: block; background: #fdfbf9 url("../img/photo-plan-bg-v2.jpg") no-repeat 50% 26% / cover; background-image: image-set(url("../img/photo-plan-bg-v2.webp") type("image/webp"), url("../img/photo-plan-bg-v2.jpg") type("image/jpeg")); }
  .plan::after { display: none; }
  .plan__content { max-width: 520px; }
  .plan__checks { display: grid; gap: 6px; width: max-content; margin: 18px auto 0; }  /* タブレットは縦並び（横1列だと3点目が人物に掛かる） */
  .site-footer__bar { flex-wrap: wrap; }
  .site-footer__nav { gap: 14px 18px; }
}

@media (max-width: 768px) {
  body { font-size: 14px; line-height: 1.85; }
  .sec-title { font-size: 21px; letter-spacing: .06em; }
  .sec-title--left { font-size: 21px; }
  .sec-lead { font-size: 13px; }
  /* 9/11 v=z: 右端の矢印(丸)は position:absolute。左右対称の padding だと文字が矢印の下へ潜る
     （実測: ヘッダーの btn--sm で13px重なり＝「む」が隠れていた）⇒ 右だけ矢印ぶん広げる */
  .btn--lg { min-height: 56px; padding: 0 52px 0 28px; font-size: 16px; width: 100%; }
  .btn--sm { min-height: 38px; padding: 0 36px 0 14px; font-size: 12px; }
  .btn--noarrow { padding-left: 14px; padding-right: 14px; }  /* 矢印なしは対称に戻す */

  .site-header__inner { padding-top: 14px; padding-bottom: 14px; gap: 10px; }
  .brand__mark { width: 32px; }
  .brand__name { font-size: 13px; }
  .brand__sub { display: none; }

  .hero { padding-top: 70px; }
  .hero__inner { display: flex; flex-direction: column; gap: 0; align-items: stretch; }  /* 9/22: 基底の align-items:start が flex 列にも効き .hero__sub が内容幅(390px幅で303px)に縮んでいた→全幅(342px)へ。9/17 の吹き出し削除で顕在化 */
  .hero__catch { padding-top: 10px; }
  .hero__sub { padding-top: 18px; padding-bottom: 28px; }
  .hero__l1 { font-size: 24px; }
  .hero__l2 { font-size: clamp(30px, 9.4vw, 46px); white-space: nowrap; margin-bottom: 12px; padding-bottom: 10px; background-size: 100% 20px; }
  .hero__l3 { font-size: 19px; }
  .hero__l4 { font-size: 27px; }
  .hero__icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; margin-top: 24px; }
  .hero__icons li { font-size: 12px; }
  .hero__price { margin-top: 20px; justify-content: center; }  /* 9/22 指摘②: SPはFV下部を中央揃え */
  .hero__subcopy { justify-items: start; text-align: left; }
  .hero__catch .hero__subcopy { margin-top: 14px; }  /* 9/23: サブコピーは見出しの直下（写真の上）。HTML で .hero__catch 末尾に置く */  /* 9/23 本人裁定: サブコピーは見出しの直下（写真の上）＝メッセージの塊なので見出しと同じ左揃え。写真の下の塊（アイコン・月額・リード・CTA）は 9/22 どおり中央揃え */
  .hero__price-label { font-size: 16px; }
  .hero__price-num { font-size: 42px; }
  .hero__price-unit { font-size: 20px; }
  .hero__lead { font-size: 14px; text-align: center; }  /* 9/17 MTG 2-4: SPは改行＋中央揃え（美和さん「中央揃えいけますか？」）。PCは左カラム内のため左揃えのまま */
  .hero .btn--lg { margin-top: 20px; }
  .hero__visual { margin: 6px calc(-1 * var(--gutter)) 0; }
  .hero__photo {
    min-height: 0; height: 300px; object-position: 60% 30%; border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%);
  }
    .hero__badge { width: 130px; height: 130px; font-size: 13px; right: 32px; bottom: 24px; line-height: 1.5; }  /* 9/11 SP: 右下へ（小枝の右端が画面内に収まる最小余白） */
  .hero__wave { height: 56px; z-index: 0; }
  .hero__sub { padding-bottom: 64px; }

  .worry { padding: 44px 0 24px; }
  .worry__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
  .worry__card { width: auto; padding: 18px 8px; }  /* ≤1024 の width:25% を打ち消す（グリッドに任せる）。左右 8px＝360px で内側 134px（10字=130px） */
  .worry__card:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }  /* 7個目は中央に1個 */
  .worry__text { font-size: 13px; }

  /* 9/25 SP: 1カラム（文章→写真）。写真は左右の余白の内側・角丸。バッジは写真の左下に重ねる */
  .we { padding: 40px 0 52px; }
  .we__inner { grid-template-columns: 1fr; gap: 24px; }
  .we__t1 { font-size: 24px; }
  .we__t2 { font-size: 21px; }
  .we__text { margin-top: 18px; font-size: 14px; line-height: 1.9; }
  .we__text br { display: none; }
  .we__text br.br-we { display: inline; }  /* 9/23 4-2: SPは1文目・2文目（「環境を作ります。」＝本人指示で文言変更）の後で改行。3文目は幅任せ */
  .we__photo-wrap { border-radius: 18px; }
  .we__badge { width: 112px; height: 112px; font-size: 10px; line-height: 1.45; left: -8px; bottom: -28px; }
  .we__badge > span, .hero__badge > span { width: calc(100% - 12px); }
  .we__badge strong { font-size: 12px; }
  .we__badge > span { width: calc(100% - 2px); }  /* 9/11: 112px の円で3行に収める */

  .service { padding: 44px 0 36px; }  /* 9/25: 「私たち」のピンク帯との間（バッジの張り出し28px＋余白） */
  .service__panel { padding: 30px 16px 22px; border-radius: 18px; }
  .service__list { gap: 10px; margin-top: 20px; }
  .svc { width: calc(50% - 5px); }
  .svc { padding: 18px 14px 58px; border-radius: 14px; }
  .svc__title { font-size: 15px; white-space: normal; }
  .svc__items { font-size: 13px; gap: 4px; margin-top: 12px; }
  .svc__icon { width: 46px; height: 46px; right: 10px; bottom: 10px; }

  .reason { padding: 34px 0 40px; }
  .reason__list { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  /* 9/11 v=z SP: 番号(丸)とイラストは position:absolute の重ね置き。
     本文がカード全幅に出ていたため両方と重なっていた（実測: 見出し↔番号 24〜44px／本文↔イラスト 84×最大104px）
     ⇒ ①見出しは番号の右端(64px)を確実に越える ②本文もイラスト幅ぶん右を空ける
        ③イラストを少し小さくして本文の行長を確保 */
  .reason__card { padding: 20px 18px 20px; }
  /* 9/17 MTG: SPは理由タイトルを全機種1行に＝番号を小さく・左へ寄せ、タイトルの左余白を詰める（実測: 02「任せる準備までサポートします」=229px が最長）
     番号 50→36px / left 14→10 / タイトル margin-left 58→34・padding-right 6→0。番号の中心高さ(39px)は据え置き（top 14→21） */
  .reason__num { font-size: 22px; width: 36px; height: 36px; left: 10px; top: 21px; }
  /* 見出しは番号の右。イラストは下寄せなので見出し行までは届かせない（.reason__img の height で制御）
     → 見出しの右余白は最小限にして不自然な折返しを避ける */
  .reason__title { margin-left: 34px; padding-right: 0; font-size: 16px; min-height: 50px; display: flex; align-items: center; }
  .reason__title br { display: none; }
  .reason__text { font-size: 13px; padding-right: 96px; margin-top: 10px; min-height: 0; }  /* イラスト(88px)+8px の余白 */
  /* 9/11 v=z: イラストは「本文の右」に収める。高さを抑えて見出し行には届かせない
     （見出しは min-height 50px＋カード上余白20px＝上から70pxまで。イラストは下端から96pxまで） */
  .reason__img { width: 88px; height: 96px; right: 4px; bottom: 6px; }

  .voice { padding: 40px 0; }
  .voice__list { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .voice__card { padding: 20px 20px 22px; }

  /* 9/10 ユーザー指示（訂正後）: 人物は下のまま・v=k より小さく・文字の直下まで引き上げ・オーバーレイで背景化（文字は中央） */
  /* 9/11 v=z: 150%固定だと幅が広いSP(〜768px)で画像が巨大化し、下端揃えのため頭が切れていた
     （実測 768px: 描画高768px > 人物の表示枠 → 顔が画面外）。
     幅が広いほど倍率を落として頭が入るようにする（390px時は従来どおり約150%） */
  .plan {
    padding: 44px 0 280px; background-color: var(--bg-pink-soft);
    background-repeat: no-repeat;
    background-size: auto 290px;  /* 9/25 新写真: 人物が画面いっぱいの構図＝幅基準だと顔が文字に重なる→高さ290px固定で下の余白(280px)に収める。幅435px＝SP(≤435)は画面を埋める */
    background-position: 100% 100%;
  }
  .plan::before {
    display: block;
    background: linear-gradient(180deg, rgba(253,246,246,1) 0, rgba(253,246,246,1) calc(100% - 290px), rgba(253,246,246,.55) calc(100% - 215px), rgba(253,246,246,.45) 100%),
      linear-gradient(90deg, rgba(253,246,246,1) calc(100% - 435px), rgba(253,246,246,0) calc(100% - 395px));  /* 9/25: 写真の上端（=100%-290px）までは不透明＝境目の直線を出さない／2層目=画面が写真幅435pxより広い時だけ写真の左端を溶かす（≤435 は効かない） */
  }
  .plan .sec-title { margin-bottom: 18px; }
  .plan__content { max-width: none; }
  .plan__checks { display: grid; gap: 6px; width: max-content; margin: 18px auto 0; }
  .br-sp { display: inline; }  /* 9/17 MTG: SPは「、」で改行（FVリード・サービス/声/フォームのリード・料金・クロージング2・予約見出し・FV移設文） */
  .faq { padding: 44px 0 48px; }
  .faq__list { margin-top: 18px; }
  .faq__q { font-size: 13.5px; padding: 8px 12px 8px 10px; }
  .faq__mark { font-size: 19px; width: 22px; }
  .faq__a { padding: 12px 14px 6px 44px; font-size: 13px; }
  .closing { padding: 50px 0 54px; background-position: 82% 50%; }
  .closing::before { background: rgba(253,251,249,.84); }
  .closing__hand { font-size: 28px; }
  .closing .btn--lg { min-width: 0; }

  .reserve { padding: 44px 0; }
  .reserve__frame { height: 1330px; border-radius: 16px; }  /* 10/6: SP 375〜599（枠375〜390で1306・425〜596で1290）。374以下と 600〜767 はファイル末尾 */

  .contact { padding: 44px 0 60px; }
  .form { padding: 26px 18px; border-radius: 16px; margin-top: 22px; }
  .form__row { margin-bottom: 16px; }

  .site-footer__bar { flex-wrap: wrap; gap: 14px 18px; padding-top: 22px; }
  .site-footer__bar .btn--sm { width: calc(100% - 52px); min-height: 48px; font-size: 14px; }
  .site-footer__nav { flex-basis: 100%; justify-content: flex-start; gap: 10px 16px; }
  .site-footer__copy { text-align: left; padding-bottom: 96px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 96px; }

  /* SP追従CTA: 引越し侍型（bottom:0 固定・padding は固定値・env() を加算しない＝memory safe-area） */
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px 16px 12px; background: rgba(253, 251, 249, .92); backdrop-filter: blur(6px);
    box-shadow: 0 -6px 20px rgba(120, 60, 70, .10);
    transform: translateY(110%); transition: transform .3s;
  }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta .btn--lg { min-height: 52px; font-size: 15px; margin: 0; }
  /* WCAG 2.4.11: 追従CTAの背後にフォーカスが隠れないよう余白を確保 */
  a, button, input, textarea, summary { scroll-margin-bottom: 90px; }
}

/* ---- 小型SP ≤480 ---- */
/* ---- 料金プラン: タブレット帯 768〜1024（9/11 v=z ユーザー指示）----
   画像サイズは変えず（cover のまま）人物を上へスライドして背景に重ねる。
   オーバーレイは文字側(左〜中央)を濃く・人物側(右 x68%〜)を薄くして人物を見せる。
   🔑 768px を含める（iPad縦＝実質タブレット。SP側の 768 以下ルールを上書きする） */
@media (min-width: 768px) and (max-width: 1024px) {
  .plan {
    padding: 48px 0 56px; min-height: 0; display: block;
    background: #fdfbf9;
  }
  /* 9/25 新写真: 人物が中央寄りの構図＝cover だと文字の後ろに来る→PCと同じ ::after（高さ基準3:2・左端をマスクで溶かす）を使い、右へ60pxずらして人物をオーバーレイの薄い帯へ */
  .plan::after { display: block; right: -60px; }
  .plan::before {
    display: block;
    background:
      linear-gradient(90deg,
        rgba(253,251,249,.92) 0%,
        rgba(253,251,249,.92) 52%,
        rgba(253,251,249,.72) 62%,
        rgba(253,251,249,.30) 70%,
        rgba(253,251,249,.18) 80%,
        rgba(253,251,249,.22) 100%);
  }
  .plan__content { max-width: none; margin: 0; padding-left: 6%; padding-right: 36%; box-sizing: border-box; }
  .plan__checks { display: grid; gap: 6px; width: max-content; margin: 18px 0 0; }
  .br-sp { display: none; }  /* タブレット(768〜1024)は自然折返し。768px はこのブロックが後勝ちで SP 側の inline を打ち消す */
  .reserve__frame { height: 730px; }  /* 10/6: タブレット 768〜1024（枠768〜976で704・2ペイン表示）。768 はこのブロックが後勝ち */
}

/* ---- SP ≤768 ---- */
@media (max-width: 480px) {
  .hero__l1 { font-size: 21px; }
  .hero__l2 { font-size: clamp(30px, 9.4vw, 40px); white-space: nowrap; }
  .hero__l4 { font-size: 24px; }
  .hero__badge { width: 116px; height: 116px; font-size: 12px; }
  .svc { width: 100%; }
  .svc { padding: 18px 16px 18px; }
  .svc__title { text-align: left; }
  .svc__items { padding-right: 64px; }
  .svc__icon { bottom: 16px; right: 14px; }
  .reason__text { padding-right: 84px; }
  /* 9/17: 社名が「株式会社ココロフィルム」へ伸びた分、480px以下はヘッダーCTAの文言を短縮して収める
     （社名・文字サイズ・他要素の寸法は変更しない＝他幅に影響なし） */
  .site-header .btn--sm .btn__label-full { display: none; }
  .site-header .btn--sm .btn__label-short { display: inline; }
}

/* ---- 320px reflow 保険 ---- */
@media (max-width: 360px) {
  .hero__l2 { font-size: clamp(28px, 9.4vw, 36px); }
  .hero__icons { grid-template-columns: repeat(3, 1fr); gap: 10px 4px; }
  .hero__icons li { font-size: 11px; }
  /* 極小幅(iPhone SE 1st = 320px)のはみ出し保険: nowrap要素を縮める
     9/11 v=z: 実測で「月額」が左へ15px・「（税込）〜」が右へ15pxはみ出していた
     （.plan__amount は nowrap で1行固定）→ 数字と左右のラベルも縮める */
  .plan__note { font-size: 11px; }
  .plan__label { font-size: 17px; margin-right: 2px; }
  .plan__num { font-size: 46px; }
  .plan__unit { font-size: 18px; }
  .plan__amount { gap: 3px; }
  .btn--sm { padding: 0 32px 0 10px; font-size: 11px; }  /* 9/11 v=z: 右は矢印ぶんを確保 */
  .btn--noarrow { padding-left: 10px; padding-right: 10px; }
  .brand__mark { width: 28px; }
}

/* ============================================================
   9/17 MTG: 改行の幅ごとの出し分け（確定表「改行指示の扱い」＝当方裁定・美和さん確認不要）
   .br-sp は ≤768 の SP ブロックで inline（「、」で2行）。前半の文節が1行に収まらない狭い端末では
   さらに手前の文節で折る。閾値＝実測した「前半が1行に収まる最小ビューポート幅 − 1px」。
   ============================================================ */
/* ≤329: FV移設文「社長は、」／料金「会社の状況や」（330px で前半が収まる＝対象は 320 / 323 Fold カバーのみ） */
@media (max-width: 329px) { .br-xs { display: inline; } }
@media (max-width: 347px) { .we__text br.br-w347 { display: inline; } }  /* 私たち2文目「社長が経営だけに集中できる環境を作ります。」＝実測 299.9px・枠＝幅−48 → 348 から1行。347 以下は「集中できる／環境を作ります。」 */
@media (max-width: 329px) { .we__text br.br-w329 { display: inline; } }
@media (max-width: 346px) { .we__t2 { font-size: 19px; } }  /* 9/25: 320〜346 で「社長の時間を買い戻しま／す。」と1字だけ落ちていた（前から）→ 19px で1行 */
@media (min-width: 441px) and (max-width: 719px) { .we__visual { max-width: 560px; } }  /* 9/25: SP 1カラムのまま幅が広がると写真だけ巨大化（768で720px）→ 上限 560 */
@media (min-width: 720px) and (max-width: 768px) { .we__inner { grid-template-columns: 1fr 1fr; gap: 28px; } }  /* 9/25: 720〜768 はタブレットと同じ2カラム（本文の最長行 約300px が列 322px 以上に入る幅から） */  /* 私たち3文目「100%の力を注げるように／サポートします。」＝320〜329 のみ（枠 272px に入らない） */
@media (max-width: 330px) { .hero__l4 { font-size: 22px; } }  /* 9/22: 320〜330px 幅で「マッチョな右腕サービス」の塗り(283px)が内容幅272pxを11px超えていた（変更前から）→ この幅だけ 24→22px で収める＝中央揃えが成立 */
/* ≤369: クロージング本文「…仕事」を」（370px で収まる＝対象は 320〜360） */
@media (max-width: 369px) { .br-sm { display: inline; } }
/* ≤410: フォームリード「…申し込む前に」（411px で収まる＝対象は 320〜402。412 以上は「、」の2行） */
@media (max-width: 410px) { .br-md { display: inline; } }
/* タブレット2カラム帯は原則「自然折返し」だが、実測で語尾が孤立する3箇所だけ SP と同じ位置で折る（他6箇所は1行で収まる）
   ・FV移設文／FVリード（2-4）: 左カラム幅が足りず「…くださ／い！」「…引き受けま／す。」＝ 982/981 で × → 990 で ○ ⇒ ≤989
   ・料金（9-2）: 「…ご提案し／ます。」＝ 768〜870 で × → 890 で ○ ⇒ 768〜889（768 はタブレット側の hide が後勝ちになるため明示） */
@media (min-width: 769px) and (max-width: 989px) { .hero__l2b .br-sp, .hero__lead .br-sp { display: inline; } }
@media (min-width: 768px) and (max-width: 889px) { .plan__text .br-sp { display: inline; } }

/* ---- 9/17 MTG: 理由タイトル1行化の狭幅補助 ----
   ≤360（Galaxy S 系）: 番号の詰めだけでは 02 が 3.5px 足りないため字間のみ 0 に（文字サイズは変えない）
   ≤359（iPhone SE 初代 320 / Fold カバー 323 と、実機の無い 330〜359）: 1行は 360 から収まる（実測）。それ未満はカード内幅に対し
   02 の1行幅 229px が番号を消しても物理的に入らないため、PC と同じ位置の <br>（「人を雇う必要が／ありません」等）を出して
   2 行を崩さない形にする（330 で「…サポートし／ます」「…対／応」の中途折返しを実測したので 329 ではなく 359 を閾値にした） */
@media (max-width: 361px) { .reason__title { letter-spacing: 0; } }  /* 字間ありでは 362 から収まる（実測）＝360・361 のみ字間 0 */
@media (max-width: 359px) { .reason__title br { display: inline; } }

/* ---- 9/17 MTG → 10/6 改定: 予約カレンダー枠の高さ（実測に基づく段階・詳細は .reserve__frame 本体のコメント） ----
   PC 1025〜1199: 枠969〜1143 は 679 → 700（本体の ≥1200 と同値だが、上の 768〜1024 ブロック(730)を打ち消すため残す） */
@media (min-width: 1025px) and (max-width: 1199px) { .reserve__frame { height: 700px; } }
/* 600〜767（枠600〜767）: Google は枠600から2ペイン＝600で780・610以上で704 → 800（旧 1530 だと約800px の空白） */
@media (min-width: 600px) and (max-width: 767px) { .reserve__frame { height: 800px; } }
/* SP 〜374（枠 320〜374）: 320〜330 で 1345・345 で 1329 → 1370（旧 1590/1620 の2段を1段に） */
@media (max-width: 374px) { .reserve__frame { height: 1370px; } }

/* ---- 9/19 既存不具合の是正: 料金の金額行が 375px（iPhone SE 2/3）で左右に 5px ずつ溢れ「月額」の左が欠ける ----
   金額行は nowrap の1行固定で、361〜389 では基本サイズのまま（≤360 の縮小ルールは効かない）。
   文字サイズは変えず、要素間の隙間だけ詰めて 12px を捻出（gap 6→3 ×3箇所 = 9px ＋ ラベル右余白 6→3 = 3px）。390 以上は元から収まる */
@media (max-width: 401px) { .plan__amount { gap: 3px; } .plan__label { margin-right: 3px; } .plan__note { font-size: 13px; } }
/* ↑ 隙間だけでは 361〜374 で 6px 不足（375 でも余裕 1px）＝一番小さい注記「（税込）〜」を 16→13px にして左右 7px ずつ確保。
   390/393（iPhone 12〜16）も基本サイズでは左余白 3〜4px＝画面の縁に貼り付いて見えるため 401 まで適用（402 以上は元から 9px 以上） */
/* 9/23 7-1 理由本文＝SP（br-sp・≤768）は行を固定＝各行≤14字（360 の本文幅 192px に収まる。本文幅＝画面幅−168px）。
   320〜353 は入りきらない行だけ文節で二段目に折る（閾値＝実測最小適合幅−1）。
   PC（≥1025）は本文幅 164px（12字）＝原文のままでは自然な行が組めないため未対応＝自然折返し（構造の判断待ち・9/23）。タブレットも自然折返し */
/* 9/23 7-1 理由本文＝カンプ準拠（lp/_ref/05_reasons_x1.5.png 実測: 本文 11.5px・行送り約22px・各カード4行・イラスト約85×125 を右下）。
   行は固定: A＝カンプの行（最長15字＝200px @13px／173px @11.5px）… SP 368〜768・タブレット 769〜1024・PC ≥1280
             B＝14字以内の行（186px）… SP 328〜367（本文幅 192px 未満で A が入らない）。≤353/340/327 は入りきらない行だけ文節で折る
   PC 1025〜1279 はカードが狭く（本文 120〜170px）自然折返し。SP の本文幅＝画面幅−168px */
@media (min-width: 1025px) {
  .reason__text { font-size: 11.5px; line-height: 1.9; padding-right: 70px; min-height: 0; }  /* カンプ実測。本文幅 ≥1280 で 178px（15字の行＝実測 177px） */
  /* 10/6: イラスト＝余白なしの切り抜き版（-v3）。01〜03 は高さ 64px・04 は横長なので見た目の大きさ（描画面積）を合わせて 53px。
     底は4枚横一線（カード下端から 23px＝04 の最終行の底）・右端はカード右端から 3px。本文の位置・折返しは変更なし（本人裁定 10/6） */
  .reason__img { width: auto; height: 64px; right: 3px; bottom: 23px; }
  .reason__card:nth-child(4) .reason__img { height: 53px; }
}
@media (min-width: 1280px) {
  /* 10/6: 01 だけ本文の行が短い（13字・実測 153px。他は 15字・177px）＝右端に置くと本文から離れて見えるため、本文の右端＋13px に置く（本人裁定 10/6）。
     ≥1280 はカード幅が一定で行も固定なので値が確定する。本文の左端＝カード余白 18px */
  .reason__card:nth-child(1) .reason__img { right: auto; left: calc(18px + 153px + 13px); }
}
@media (max-width: 1024px) {
  /* 10/6: SP/タブレット＝本文とイラストを同じ枠に重ね置き（本文＝左上／イラスト＝右下）。箱は重なってよい＝判定は「描かれた絵の画素と文字が重ならないこと」（全幅で画素検査）。
     イラスト＝余白なしの切り抜き版（-v3）。01〜03 は高さ 78px・04 は横長なので見た目の大きさ（描画面積）を合わせて 64px。底＝本文の最終行（下へ 5px＝行の余白分）。
     横位置＝カード右端から 3px（右余白 18px へ 15px はみ出す）。本文の右が広く空く幅（大型スマホ横・タブレット）では、空きのほぼ中央へ寄せる。
     --rt＝その幅帯の本文の行幅（下の改行帯ごとに設定）。4枚とも同じ式＝縦に並ぶイラストの右端が揃う */
  .reason__card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "title" "body"; }
  .reason__title { grid-area: title; }
  .reason__text { grid-area: body; align-self: start; padding-right: 0; min-height: 0; max-width: 100%; position: relative; z-index: 1; }
  .reason__card picture { grid-area: body; justify-self: end; align-self: end; display: block; line-height: 0; --rm: max(-15px, calc((100% - var(--rt, 199px) - 90px) / 2 - 22px)); margin: 0 var(--rm) 5px 0; }
  .reason__img { position: static; width: auto; height: 78px; max-width: none; }
  .reason__card:nth-child(4) .reason__img { height: 64px; }
}
@media (max-width: 768px) {
  /* 441〜768（横向き・小型タブレット）はカードの幅を 480px に抑えて中央に置く＝1列のまま本文の右が 200px 以上空くのを防ぐ（9/23） */
  .reason__list { max-width: 480px; margin-left: auto; margin-right: auto; }
  .reason__text { align-self: end; }                                   /* 本文が3行でイラストより低い幅帯（425〜768）は底を揃える */
  .reason__card:nth-child(1) picture { margin-right: calc(var(--rm) + 3px); }  /* 01 は絵の幅が一番細い＝3px 左へ（本人裁定 10/6） */
}
@media (max-width: 371px) { .reason__list { --rt: 186px; } }
@media (min-width: 425px) and (max-width: 768px) { .reason__list { --rt: 252px; } }
@media (min-width: 372px) and (max-width: 424px) { .reason__text .br-a { display: inline; } }  /* A＝カンプの行（最長15字=200px）。本文の必要幅 200＋ガター48＋カード余白36＋間8＋イラスト≈80 */
@media (min-width: 425px) and (max-width: 768px) { .reason__text .br-c { display: inline; } }  /* C＝18〜19字の行（最長253px）＝大型スマホ・横向き用（幅が広いのに行が短いと本文の右が空く） */
@media (max-width: 371px) { .reason__text .br-b { display: inline; } }
@media (min-width: 769px) and (max-width: 1024px) { .reason__text .br-a { display: inline; } }
@media (min-width: 1280px) { .reason__text .br-a { display: inline; } }
@media (max-width: 357px) { .br-r353 { display: inline; } }                              /* SP: 14字の行（186px）＝本文幅 画面幅−172 */
@media (max-width: 344px) { .br-r340 { display: inline; } }                              /* SP: 13字の行（173px） */
@media (max-width: 331px) { .br-r327 { display: inline; } }                              /* SP: 12字の行（160px） */
@media (max-width: 359px) { .worry__text { font-size: 11.5px; } }  /* お悩み 330〜359: 10字（13px で約134px）が内側に入らない帯＝11.5px（115px）。360 から 13px */
@media (max-width: 329px) { .worry__text { font-size: 11px; } }    /* お悩み 320〜329: 内側 114px に 10字（110px）。SP ブロックの 13px より後段＝後勝ち */

/* 10/6 サービス内容: 「リール・ショート動画 など」が「な／ど」と1字だけ折れる（実測: PC ≥1260 でカード 214px・行幅 157.6px に対し必要 169.7px＝12px 不足）ほか、同じ原因の折り返しを是正。文字サイズ・文言は不変 */
.svc__items .nw { white-space: nowrap; }  /* 保険: 入りきらない幅でも「など」を1字で割らない（割れる時は「など」ごと次の行へ） */
@media (min-width: 769px) { .svc { padding-left: 12px; padding-right: 12px; } .svc__items li { padding-left: 17px; } }  /* タブレット・PC: 内側の左右余白 18→12・チェックと文字の間 20→17＝行幅 +15px（5枚共通）。iPad 810/820 の折れもこれで解消 */
@media (min-width: 1260px) { .svc { padding-bottom: 67px; } }  /* 5列: これまで SNS の2行折れが行の高さを作り、他のカードのアイコンが最終行の下に収まっていた＝1行になっても同じ高さを保つ（46＋1行 21px）。無いとアイコンが最終行に重なる */
@media (min-width: 1025px) and (max-width: 1259px) {
  /* 5列のままだと見出しの幅でカード幅が不揃い（140〜209px）になり折り返しが多発（1025px では DX が全行）＝タブレットと同じ 3＋2 の2段に */
  .service__list { display: flex; flex-wrap: wrap; justify-content: center; }
  .svc { width: calc(33.333% - 10px); padding-bottom: 66px; }
}
@media (min-width: 345px) and (max-width: 359px) { .svc__items li { white-space: nowrap; } }  /* SP 345〜359: 右のアイコンを避ける余白(64px)で 1行に最大 14px 足りない＝その行だけ余白側へ伸ばす（アイコンとの間 6px 以上を確保できる 345 以上のみ。360 以上は元から1行） */
@media (max-width: 768px) { .voice__title { font-size: 18px; } }
/* 10/6 お客様の声（スマホ ≤600px）: 本文を3行で折りたたみ「続きを読む」で全文を開く。.is-foldable は main.js が付ける＝JS が動かない時は全文表示のまま。
   601〜768px は1列でも行が長く本文は各段落 2〜4行＝折りたたんでも隠れるのは 1〜3行だけでボタンが増えるだけのため対象外 */
@media (max-width: 600px) {
  .is-foldable .voice__body { position: relative; max-height: calc(14px * 1.85 * 3); overflow: hidden; }
  .is-foldable .voice__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, rgba(251, 245, 239, 0), var(--card-beige)); }
  .is-foldable .is-open .voice__body { max-height: none; }
  .is-foldable .is-open .voice__body::after { display: none; }
  .is-foldable .voice__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 0; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--pink-700); cursor: pointer; }
  .is-foldable .voice__more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .is-foldable .is-open .voice__more::after { transform: translateY(2px) rotate(-135deg); }
}
/* 10/16 幅340px以下: 社名（株式会社〜）がヘッダー右のボタンに重なるのを防ぐ（320px 実測で約15px重なり） */
@media (max-width: 340px) {
  .brand { gap: 6px; }
  .brand__name { font-size: 12px; letter-spacing: .04em; }
}
/* 10/9 印刷時: 追従ボタン・先頭へ戻る・予約カレンダー（紙では使えない）を出さない。画面表示は不変 */
@media print {
  .sticky-cta, .totop, .skip-link, .reserve__frame { display: none !important; }
}
/* 10/19 言葉の途中で改行させない範囲（1行に収まる幅では見た目不変） */
.nb { white-space: nowrap; }
/* 10/19 お客様の声①の見出し: 幅1000px以上だけ「ものづくりに」を途中で改行させない（それ未満は従来どおり） */
@media (min-width: 1000px) { .nb-pc { white-space: nowrap; } }
/* 10/19 幅340px以下: 大見出し1行目の「は」だけが次の行に落ちるのを防ぐ（文節で改行・Chrome 系のみ有効・他の幅は不変） */
@media (max-width: 340px) { .hero__l1 { word-break: auto-phrase; } }