/* ============================================================
   §0 Editor empty-state (BUG-025)
   ============================================================
   `/editor` を preset 無しで開いた時に Puck の root DropZone が空になり、
   ダーク iframe + 赤い枠線だけが表示されて user が次のアクションを掴めなかった。
   `:empty` 擬似クラスで空時のみガイド文を表示する。
   Puck module CSS の class 名は build hash 含むため部分一致セレクタを使う。
   ============================================================ */
[class*="_DropZone--isRootZone"]:empty::after {
  content: "ここに公開する LP が表示されます\A\A左サイドの『Components』からブロックをドラッグするか、\A『デフォルト (beauty-salon)』など業種プリセットから始められます。";
  white-space: pre-wrap;
  display: block;
  padding: var(--space-12, 3rem) var(--space-6, 1.5rem);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-base, 1rem);
  line-height: 1.7;
}

/* ============================================================
   lp.css — LP 全9セクション × 3バリエーション
   ============================================================

   構造:
     §1 共通ユーティリティ（セクション間隔、コンテナ、見出し）
     §2 Problem   — grid-4 / checklist / col-3
     §3 Agitation — story / stats / quote
     §4 Solution  — col-3 / stacked / icon-grid
     §5 Proof     — cards / logo-bar / highlight
     §6 Offer     — single / compare-2 / table-3
     §7 Narrowing — ribbon / timeline / seasonal
     §8 CTA       — steps / form-style / big-button
     §9 PostScript — founder / mission / casual

   Hero は ../css/hero.css を共有参照（ここでは書かない）。
   色は tokens.css の CSS 変数を参照。
   モバイルファースト: sm(640px) → md(768px) → lg(1024px)
   ============================================================ */

/* ============================================================
   §1 共通ユーティリティ
   ============================================================ */

/* セクション間隔 — ブロック間マージンゼロ、パディングで内部余白のみ
   2026-06-01 上質化: 縦余白を広げ「呼吸感」を出す (design-language §2). */
.lp-section {
  padding: var(--space-16) var(--space-6);
  margin: 0;
}

@media (min-width: 768px) {
  .lp-section {
    padding: var(--space-24) var(--space-16);
  }
}

/* spacing (余白) 関連のスタイルは 2026-04-23 に削除
   (.lp-section--spacious / .lp-section--flow / --section-inner-gap) */

/* ブロック間マージンゼロ（シームレスに繋ぐため） */
.lp-section + .lp-section,
.hero + .lp-section,
.lp-section + .lp-inline-cta,
.lp-inline-cta + .lp-section {
  margin-top: 0;
}

/* セクション背景の交互切替 */
.lp-section--alt {
  background-color: var(--color-surface);
}

/* コンテナ */
.lp-container {
  max-width: var(--container-lg);
  margin: 0 auto;
  width: 100%;
}

.lp-container--narrow {
  max-width: var(--container-md);
}

/* セクション見出し */
.lp-section__heading {
  font-family: var(--lp-block-font, var(--font-display));
  font-size: calc(var(--fs-3xl) * var(--lp-block-font-scale, 1));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  /* 2026-06-01 上質化: わずかな字詰めで見出しを引き締める (design-language §4). */
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: var(--space-12);
  color: var(--lp-block-text, var(--color-text));
}

@media (min-width: 768px) {
  .lp-section__heading {
    font-size: calc(var(--fs-4xl) * var(--lp-block-font-scale, 1));
  }
}

@media (min-width: 1024px) {
  .lp-section__heading {
    font-size: calc(var(--fs-5xl) * var(--lp-block-font-scale, 1));
  }
}

/* セクション見出し下の装飾 — タイプ別にSVGで上書き */
.lp-section__heading::after {
  content: "";
  display: var(--lp-block-divider, block);
  width: 48px;
  height: 3px;
  background-color: var(--color-primary);
  margin: var(--space-4) auto 0;
  border-radius: var(--radius-full);
}
/* ::before はタイプ別飾り罫用（デフォルトは非表示） */
.lp-section__heading::before {
  display: none;
}

/* ============================================================
   §2 Problem — 問題提起
   ============================================================ */

/* --- grid-4: 悩み4マスカード --- */
.problem--grid-4 .problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .problem--grid-4 .problem__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.problem--grid-4 .problem__card {
  padding: var(--space-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--color-text);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.problem--grid-4 .problem__card:hover {
  box-shadow: var(--shadow-md);
}

.problem--grid-4 .problem__icon {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  display: flex;
  justify-content: center;
}

/* --- checklist: チェックマーク付きリスト --- */
.problem--checklist .problem__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--container-md);
  margin-left: auto;
  margin-right: auto;
}

.problem--checklist .problem__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.problem--checklist .problem__item:last-child {
  border-bottom: none;
}

.problem--checklist .problem__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  margin-top: 2px;
}

/* BUG-031: problem--col-3 variant は型・render から除去済 (dead CSS 削除) */

/* ============================================================
   §3 Agitation — 共感・親近感
   ============================================================ */

/* --- story: 物語風1カラム --- */
.agitation--story .agitation__body {
  max-width: var(--container-md);
  margin: 0 auto;
}

.agitation--story .agitation__paragraph {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.agitation--story .agitation__quote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.agitation--story .agitation__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: var(--space-8);
}

.agitation--story .agitation__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* img 要素に直接 .agitation__image クラスを付与する場合 (Puck Agitation block story variant) */
.agitation--story img.agitation__image {
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: var(--space-8) auto 0;
  display: block;
}

/* --- stats: 統計データ中心 --- */
.agitation--stats .agitation__stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: var(--container-lg);
  margin: 0 auto;
}

/* BUG-093: 中間幅 (480-639px) で 1→3 列急変を緩和する 2 列中間 BP */
@media (min-width: 480px) {
  .agitation--stats .agitation__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) {
  .agitation--stats .agitation__stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.agitation--stats .agitation__stat {
  text-align: center;
  padding: var(--space-8);
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.agitation--stats .agitation__stat-number {
  font-family: var(--font-display);
  /* clamp: 32px → 48px (BUG-093) */
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.agitation--stats .agitation__stat-label {
  font-size: var(--fs-base);
  color: var(--color-text);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}

.agitation--stats .agitation__stat-source {
  /* 2026-04-23: xs (12px) → sm (14px) 引き上げ。出典表記が読めない。 */
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --- quote: 大きな引用 --- */
.agitation--quote {
  text-align: center;
}

.agitation--quote .agitation__blockquote {
  max-width: var(--container-md);
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  color: var(--color-text);
  position: relative;
  padding: var(--space-8) var(--space-6);
}

@media (min-width: 768px) {
  .agitation--quote .agitation__blockquote {
    font-size: var(--fs-2xl);
  }
}

.agitation--quote .agitation__blockquote::before {
  content: "\201C";
  font-size: 6rem;
  color: var(--color-primary);
  opacity: 0.2;
  position: absolute;
  top: -1rem;
  left: 0;
  line-height: 1;
  font-family: Georgia, serif;
}

.agitation--quote .agitation__attribution {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.agitation--quote .agitation__attribution img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.agitation--quote .agitation__attribution-name {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

/* ============================================================
   §4 Solution — 解決策の提示
   ============================================================ */

/* --- col-3: 3つの強みカード横並び --- */
.solution--col-3 .solution__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .solution--col-3 .solution__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.solution--col-3 .solution__card {
  padding: var(--space-8);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  transition:
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.solution--col-3 .solution__card:hover {
  box-shadow: 0 4px 20px rgba(20, 22, 28, 0.08);
  transform: translateY(-2px);
}

.solution--col-3 .solution__card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  margin: 0 auto var(--space-4);
}

.solution--col-3 .solution__card-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.solution--col-3 .solution__card-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* 写真付きカードバリアント
   BUG-011: `.solution--col-3 .solution__card` (0,2,0) の padding が
   `.solution__card--photo` (0,1,0) を上書きして、base 背景時のみ写真が
   小さく中央寄せされ、solid 時 (override 3324 行) と見た目が一致しなかった。
   親に `.solution--col-3` を含めた compound selector (0,3,0) で base/solid
   両方とも padding: 0 + image full-width で一致させる。 */
.solution--col-3 .solution__card.solution__card--photo {
  overflow: hidden;
  padding: 0;
}
.solution--col-3 .solution__card.solution__card--photo > div {
  padding: var(--space-6);
}
.solution--col-3 .solution__card.solution__card--photo > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- stacked: 縦積み詳細 --- */
.solution--stacked .solution__items {
  max-width: var(--container-md);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.solution--stacked .solution__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.solution--stacked .solution__item-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
}

.solution--stacked .solution__item-content {
  flex: 1;
}

.solution--stacked .solution__item-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.solution--stacked .solution__item-desc {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* --- icon-grid: 4つのこだわりグリッド（写真付き） --- */
.solution--icon-grid .solution__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .solution--icon-grid .solution__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.solution--icon-grid .solution__grid-item {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  z-index: 3; /* パターン::before(z:2)より上に */
  transition:
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.solution--icon-grid .solution__grid-item:hover {
  box-shadow: 0 4px 20px rgba(20, 22, 28, 0.08);
  transform: translateY(-2px);
}

.solution--icon-grid .solution__grid-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.solution--icon-grid .solution__grid-body {
  padding: var(--space-6);
}

.solution--icon-grid .solution__grid-icon {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}

.solution--icon-grid .solution__grid-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.solution--icon-grid .solution__grid-desc {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ============================================================
   §5 Proof — 信頼の証明
   ============================================================ */

/* BUG-031: proof--cards variant は型・render から除去済 (dead CSS 削除) */

/* --- logo-bar: 実績数字 + ロゴ帯 --- */
.proof--logo-bar .proof__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

@media (min-width: 640px) {
  .proof--logo-bar .proof__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.proof--logo-bar .proof__stat {
  text-align: center;
}

.proof--logo-bar .proof__stat-number {
  font-family: var(--font-display);
  /* clamp: 28px → 36px (BUG-093) */
  font-size: clamp(1.75rem, 5.5vw, 2.25rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
}

.proof--logo-bar .proof__stat-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.proof--logo-bar .proof__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}

.proof--logo-bar .proof__logo {
  /* テキストロゴ用の可読な中間グレー (WCAG AA 4.6:1 @ white)。
     opacity で灰色化すると実効色 #8d8d8d 前後となり AA を満たさない。 */
  color: #6b7280;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    filter var(--duration-fast) var(--ease-out);
}

/* BUG-098: logo-bar はカード化されない直背景。solid/dark 地で灰色テキストロゴが
   primary/dark に埋もれる (r=1.06) ため白系に倒す。
   .proof--logo-bar は .lp-section 自身 (同一要素) なので compound selector で書く
   (子孫 combinator だとマッチしない、BUG-002 同型)。 */
.proof--logo-bar[data-fill="solid"] .proof__logo,
.proof--logo-bar[data-fill="dark"] .proof__logo {
  color: rgba(255, 255, 255, 0.92);
}

/* img ロゴは色指定不要なので従来通り opacity + grayscale で落ち着かせる */
.proof--logo-bar img.proof__logo {
  height: 32px;
  opacity: 0.7;
  filter: grayscale(100%);
}

.proof--logo-bar img.proof__logo:hover {
  opacity: 1;
  filter: none;
}

/* --- highlight: 大きな数字 + 短文 --- */
.proof--highlight .proof__numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* BUG-093: 中間幅 (480-639px) で 2→4 列急変を緩和する 3 列中間 BP */
@media (min-width: 480px) {
  .proof--highlight .proof__numbers {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* BUG-097: 640px で 4 列にすると 768px タブレットで各セル ~130px となり
   bold tone の大数字 (「8時間」) が縦折り返し。3 列に下げて 4 列化は 1024px へ。 */
@media (min-width: 640px) {
  .proof--highlight .proof__numbers {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .proof--highlight .proof__numbers {
    grid-template-columns: repeat(4, 1fr);
  }
}

.proof--highlight .proof__number-item {
  text-align: center;
  /* BUG-097: 小〜タブレット幅では水平 padding (各 24px) がセル content box を
     大きく削り「200杯/日」(自然幅 ~118-162px) を 2 行に折り返していた。
     水平のみ縮小して値の 1 行表示を確保。垂直リズムと PC 端点 (1024px+) の
     見た目は不変 (下の min-width:1024px で var(--space-6) を復帰)。 */
  padding: var(--space-6) var(--space-2);
}

@media (min-width: 1024px) {
  .proof--highlight .proof__number-item {
    padding: var(--space-6);
  }
}

.proof--highlight .proof__number-value {
  font-family: var(--font-display);
  /* clamp: 36px → 48px (BUG-093: 375px で過大フォントによる崩れを防止、PC 値 fs-5xl は不変) */
  font-size: clamp(1.75rem, 6vw, 3rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.proof--highlight .proof__number-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   §6 Offer — 提案・料金
   ============================================================ */

/* --- single: 1プラン + 特典リスト --- */
.offer--single .offer__plan {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: var(--space-8);
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  text-align: center;
}

.offer--single .offer__plan-name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.offer--single .offer__plan-price {
  font-family: var(--font-display);
  /* clamp: 28px → 36px (BUG-093) */
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.offer--single .offer__plan-duration {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.offer--single .offer__plan-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  text-align: left;
}

.offer--single .offer__plan-includes li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.offer--single .offer__plan-includes li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.offer--single .offer__bonus {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.offer--single .offer__guarantee {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* --- compare-2: 2プラン比較 --- */
.offer--compare-2 .offer__plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--container-lg);
  margin: 0 auto;
}

@media (min-width: 640px) {
  .offer--compare-2 .offer__plans {
    grid-template-columns: 1fr 1fr;
  }
}

.offer--compare-2 .offer__plan-card {
  padding: var(--space-8);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  position: relative;
}

.offer--compare-2 .offer__plan-card--recommended {
  border-color: var(--color-primary);
  border-width: 2px;
}

.offer--compare-2 .offer__plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}

.offer--compare-2 .offer__plan-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}

.offer--compare-2 .offer__plan-price {
  font-family: var(--font-display);
  /* clamp: 24px → 30px (BUG-093) */
  font-size: clamp(1.5rem, 4.5vw, 1.875rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

.offer--compare-2 .offer__plan-price span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--color-text-muted);
}

.offer--compare-2 .offer__plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.offer--compare-2 .offer__plan-features li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* --- table-3: 3サイズ横並び価格表 --- */
.offer--table-3 .offer__menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* BUG-093: 中間幅 (480-639px) で 1→3 列急変を緩和する 2 列中間 BP */
@media (min-width: 480px) {
  .offer--table-3 .offer__menu {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) {
  .offer--table-3 .offer__menu {
    grid-template-columns: repeat(3, 1fr);
  }
}

.offer--table-3 .offer__menu-item {
  padding: var(--space-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  transition:
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.offer--table-3 .offer__menu-item:hover {
  box-shadow: 0 4px 20px rgba(20, 22, 28, 0.08);
  transform: translateY(-2px);
}

/* 写真付きメニューカード */
.offer--table-3 .offer__menu-item--photo {
  padding: 0;
  overflow: hidden;
}

.offer--table-3 .offer__menu-item--photo .offer__menu-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.offer--table-3 .offer__menu-item--photo .offer__menu-body {
  padding: var(--space-4) var(--space-6) var(--space-6);
  text-align: center;
}

/* サブメニュー（写真なし・コンパクト） */
.offer__sub-menu {
  margin-top: var(--space-8);
  max-width: var(--container-md);
  margin-left: auto;
  margin-right: auto;
}

.offer__sub-menu-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  text-align: center;
}

.offer__sub-menu-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .offer__sub-menu-list {
    grid-template-columns: 1fr 1fr;
  }
}

.offer__sub-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--color-border);
  font-size: var(--fs-sm);
}

.offer__sub-menu-item-name {
  color: var(--color-text);
}

.offer__sub-menu-item-price {
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  margin-left: var(--space-4);
}

.offer--table-3 .offer__menu-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.offer--table-3 .offer__menu-price {
  font-family: var(--font-display);
  /* clamp: 24px → 30px (BUG-093) */
  font-size: clamp(1.5rem, 4.5vw, 1.875rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.offer--table-3 .offer__menu-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  flex: 1;
}

.offer__menu-price-suffix {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.lp-price-suffix {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

/* ============================================================
   §7 Narrowing — 限定性・対象者
   ============================================================ */

/* --- ribbon: 対象者チェックリスト + 帯 --- */
.narrowing--ribbon {
  background-color: var(--color-surface);
}

.narrowing--ribbon .narrowing__checks {
  max-width: var(--container-md);
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.narrowing--ribbon .narrowing__check {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-size: var(--fs-base);
  color: var(--color-text);
}

.narrowing--ribbon .narrowing__check::before {
  content: "✓";
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* --- timeline: 導入ステップタイムライン --- */
.narrowing--timeline .narrowing__steps {
  max-width: var(--container-md);
  margin: 0 auto;
  position: relative;
  padding-left: var(--space-8);
}

.narrowing--timeline .narrowing__steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.narrowing--timeline .narrowing__step {
  position: relative;
  padding-bottom: var(--space-8);
  padding-left: var(--space-6);
}

.narrowing--timeline .narrowing__step:last-child {
  padding-bottom: 0;
}

.narrowing--timeline .narrowing__step-marker {
  position: absolute;
  left: calc(-1 * var(--space-8) + 4px);
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  z-index: 1;
}

.narrowing--timeline .narrowing__step-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.narrowing--timeline .narrowing__step-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* --- seasonal: 季節 + 地域情報 --- */
.narrowing--seasonal .narrowing__content {
  max-width: var(--container-lg);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  /* image が存在する場合のみ 2 列 grid. 存在しない場合は 1 列で中央寄せを維持し
     右半分空白を防ぐ (BUG-023 ramen 季節のおすすめ 左寄せ右半分空白). */
  .narrowing--seasonal .narrowing__content:has(.narrowing__image) {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .narrowing--seasonal .narrowing__content:not(:has(.narrowing__image)) {
    max-width: var(--container-md);
  }
}

.narrowing--seasonal .narrowing__seasonal-item {
  padding: var(--space-6);
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

.narrowing--seasonal .narrowing__seasonal-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.narrowing--seasonal .narrowing__seasonal-desc {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

.narrowing--seasonal .narrowing__area {
  padding: var(--space-6);
}

.narrowing--seasonal .narrowing__area-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.narrowing--seasonal .narrowing__area-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.narrowing--seasonal .narrowing__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: var(--space-4);
}

.narrowing--seasonal .narrowing__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================================
   §8 CTA — 行動喚起
   ============================================================ */

/* CTA 共通ボタン — モダンなグラデーション */
.cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-8);
  background-color: var(--color-cta, var(--color-primary));
  background-image: var(
    --gradient-cta,
    var(--gradient-primary, linear-gradient(135deg, var(--color-accent), var(--color-primary)))
  );
  color: var(--color-cta-fg, var(--color-primary-fg));
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  text-decoration: none;
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 8px rgba(20, 22, 28, 0.08),
    0 1px 2px rgba(20, 22, 28, 0.04);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    filter var(--duration-fast) var(--ease-out);
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.cta__button:hover,
.cta__button:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(20, 22, 28, 0.12),
    0 2px 4px rgba(20, 22, 28, 0.06);
  filter: brightness(1.05);
}

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

/* CTA アウトラインバリアント.
   tone 別 rule (.lp-page[data-tone="..."] .cta__button) が background を
   primary 色で埋めてくる (詳細度 0,1,1) ため、outline 側は .cta__button.cta__button--outline
   (詳細度 0,2,0) で明示的に打ち消す。さらに background-image も明示的に none に倒す
   (tone elegant / natural / pop / feminine は gradient を background-image で塗る)。
   BUG-017/018 (corporate Offer outline ボタン blue on blue) 根本修正. */
.cta__button.cta__button--outline {
  background-color: transparent;
  background-image: none;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  box-shadow: none;
  text-shadow: none;
}

.cta__button.cta__button--outline:hover {
  background-color: var(--color-primary);
  background-image: none;
  color: var(--color-primary-fg);
}

/* FAQ 共通 */
.faq {
  margin-top: var(--space-16);
}

.faq__heading {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  text-align: left;
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

.faq__list {
  max-width: var(--container-md);
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}

.faq__question {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.faq__question::before {
  content: "Q. ";
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.faq__answer {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  padding-left: var(--space-6);
}

.faq__answer::before {
  content: "A. ";
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* --- steps: 3ステップ + 大ボタン --- */
.cta--steps .cta__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--container-lg);
  margin: 0 auto var(--space-12);
}

@media (min-width: 640px) {
  .cta--steps .cta__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cta--steps .cta__step {
  text-align: center;
  padding: var(--space-6);
  position: relative;
}

.cta--steps .cta__step-number {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  margin: 0 auto var(--space-4);
}

.cta--steps .cta__step-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.cta--steps .cta__step-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

.cta--steps .cta__button-wrap {
  text-align: center;
}

/* --- form-style: フォーム風レイアウト --- */
.cta--form-style .cta__form-layout {
  max-width: var(--container-md);
  margin: 0 auto;
}

.cta--form-style .cta__form-desc {
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.cta--form-style .cta__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.cta--form-style .cta__form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cta--form-style .cta__form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.cta--form-style .cta__form-input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-family: inherit;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.cta--form-style .cta__form-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.cta--form-style .cta__form-textarea {
  min-height: 120px;
  resize: vertical;
}

.cta--form-style .cta__form-submit {
  margin-top: var(--space-4);
  align-self: center;
}

/* UX-P34: 送信ステータス表示 (成功 / 失敗). */
.contact-form__status {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  display: none;
}

.contact-form__status.is-success {
  display: block;
  color: var(--color-success-fg, #065f46);
  background: var(--color-success-light, #d1fae5);
  border: 1px solid var(--color-success, #10b981);
}

.contact-form__status.is-error {
  display: block;
  color: var(--color-error-fg, #7f1d1d);
  background: var(--color-error-light, #fee2e2);
  border: 1px solid var(--color-error, #ef4444);
}

/* --- big-button: フルワイドCTA --- */
.cta--big-button {
  text-align: center;
}

.cta--big-button .cta__main {
  max-width: var(--container-md);
  margin: 0 auto;
}

.cta--big-button .cta__big-heading {
  font-family: var(--font-display);
  /* clamp: 24px → 30px (BUG-093) */
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

.cta--big-button .cta__button {
  min-height: 64px;
  padding: 0 var(--space-16);
  font-size: var(--fs-xl);
}

.cta--big-button .cta__sub-info {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cta--big-button .cta__sub-info-item {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* --- inline: 中間 CTA コンパクト表示 --- */
.cta--inline {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.cta--inline .lp-section__heading {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
}

.cta--inline .cta__description {
  margin-bottom: var(--space-4);
}

.cta--inline .cta__button-wrap {
  margin-top: 0;
}

/* ============================================================
   §9 PostScript — 追伸
   ============================================================ */

/* --- founder: オーナー写真 + メッセージ --- */
.postscript--founder .postscript__content {
  max-width: var(--container-md);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .postscript--founder .postscript__content {
    grid-template-columns: 200px 1fr;
    align-items: start;
  }
}

.postscript--founder .postscript__photo {
  text-align: center;
}

.postscript--founder .postscript__photo img {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto;
}

.postscript--founder .postscript__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-top: var(--space-3);
}

.postscript--founder .postscript__title {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.postscript--founder .postscript__message {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

.postscript--founder .postscript__message p {
  margin-bottom: var(--space-4);
}

.postscript--founder .postscript__message p:last-child {
  margin-bottom: 0;
}

/* --- mission: ミッション宣言 + 会社概要 --- */
.postscript--mission .postscript__content {
  max-width: var(--container-md);
  margin: 0 auto;
  text-align: center;
}

.postscript--mission .postscript__statement {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-8);
  line-height: var(--lh-snug);
}

.postscript--mission .postscript__description {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  margin-bottom: var(--space-12);
  text-align: left;
}

.postscript--mission .postscript__description p {
  margin-bottom: var(--space-4);
}

.postscript--mission .postscript__company {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  text-align: left;
}

.postscript--mission .postscript__company dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0;
}

.postscript--mission .postscript__company dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.postscript--mission .postscript__company dd {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* --- casual: 店主カジュアル写真 + 一言 --- */
.postscript--casual .postscript__content {
  max-width: var(--container-md);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .postscript--casual .postscript__content {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    align-items: center;
  }
}

.postscript--casual .postscript__photo img {
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  margin: 0 auto;
}

.postscript--casual .postscript__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.postscript--casual .postscript__message {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

/* BUG-074: casual render が richtext を <div> で包むよう変更 (p 内 div ネスト解消).
   旧公開スナップショット (<p>) の見た目維持のため p セレクタは残し div を併記.
   tokens.css の `p {margin:0}` リセット下で p/div とも margin 起点同一・display:block。 */
.postscript--casual .postscript__message p,
.postscript--casual .postscript__message > div {
  margin-bottom: var(--space-4);
}

/* ============================================================
   LP フッター（簡易、全LP共通）
   ============================================================ */
.lp-footer {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   ダミーデータマーク
   ============================================================ */
.lp-dummy-mark {
  display: inline-block;
  padding: 1px var(--space-2);
  background-color: #fef3c7;
  color: #92400e;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  margin-left: var(--space-2);
}

/* ============================================================
   §10 アイコンシステム（Lucide SVG）
   ============================================================ */
.lp-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.15em;
}

.lp-icon--lg {
  width: 32px;
  height: 32px;
}

.lp-icon--xl {
  width: 40px;
  height: 40px;
}

/* インラインアイコン（テキスト内埋め込み用） */
.lp-icon--inline {
  display: inline;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

/* インラインアイコン（やや大きめ、ボーナス/保証テキスト用） */
.lp-icon--inline-sm {
  display: inline;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

/* ============================================================
   §11 トーン別オーバーライド
   ============================================================ */

/* --- luxury: 上品・ラグジュアリー --- */
.lp-page[data-tone="elegant"] .lp-section__heading {
  letter-spacing: 0.05em;
}

.lp-page[data-tone="elegant"] .lp-section__heading {
  margin-bottom: var(--space-16);
}

.lp-page[data-tone="elegant"] .hero__cta,
.lp-page[data-tone="elegant"] .cta__button {
  border-radius: var(--radius-md); /* pill型ではなく角丸控えめ */
  letter-spacing: 0.05em;
}

/* --- bold: 力強い・挑戦 --- */
.lp-page[data-tone="bold"] .lp-section__heading {
  font-size: calc(var(--fs-3xl) * var(--lp-block-font-scale, 1));
  font-weight: 800;
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .lp-page[data-tone="bold"] .lp-section__heading {
    font-size: calc(var(--fs-4xl) * var(--lp-block-font-scale, 1));
  }
}

/* bold セクション背景にダーク系を導入 */
.lp-page[data-tone="bold"] .lp-section--dark {
  background-color: var(--color-text);
  color: var(--color-text-inverse);
}

.lp-page[data-tone="bold"] .lp-section--dark .lp-section__heading {
  color: var(--color-text-inverse);
}

.lp-page[data-tone="bold"] .hero__cta,
.lp-page[data-tone="bold"] .cta__button {
  font-size: var(--fs-lg);
  min-height: 56px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lp-page[data-tone="bold"] .proof--highlight .proof__number-value {
  /* clamp: sm 28px → lg 64px の正向スケール (BUG-093 起源)。
     BUG-097: vw 係数 7.5→5、floor 2rem→1.75rem。
     768px で 7.5vw=57.6px が 3 列セルで「8時間」を縦折り返しさせ、
     640px では floor 2rem(32px) が「200杯/日」(自然幅 135px > セル 128px) を
     2 行に折り返していた問題を解消。floor 1.75rem(28px) で 640px の最窄セルでも 1 行。
     PC 端点 4rem(64px) 上限は不変 (1280px 以上で従来の見た目)。 */
  font-size: clamp(1.75rem, 5vw, 4rem);
  font-weight: 900;
}

/* --- clean: 清潔・信頼 --- */

.lp-page[data-tone="clean"] .hero__cta,
.lp-page[data-tone="clean"] .cta__button {
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(20, 22, 28, 0.08);
}

.lp-page[data-tone="clean"] .solution__card,
.lp-page[data-tone="clean"] .staff__card,
.lp-page[data-tone="clean"] .offer__plan {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/* --- modern: モダン・洗練 --- */
.lp-page[data-tone="modern"] .lp-section__heading {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lp-page[data-tone="modern"] .cta__button {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lp-page[data-tone="modern"] .solution__card,
.lp-page[data-tone="modern"] .staff__card {
  border-radius: var(--radius-sm);
}

/* --- natural: ナチュラル --- */
.lp-page[data-tone="natural"] .cta__button {
  border-radius: var(--radius-full);
  font-weight: 500;
}

.lp-page[data-tone="natural"] .solution__card,
.lp-page[data-tone="natural"] .staff__card {
  border-radius: var(--radius-2xl, 1.5rem);
  box-shadow: 0 2px 12px rgba(20, 22, 28, 0.04);
}

/* --- pop: ポップ --- */
.lp-page[data-tone="pop"] {
  font-family: var(--font-rounded);
}

.lp-page[data-tone="pop"] .lp-section__heading {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.lp-page[data-tone="pop"] .cta__button {
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: var(--fs-lg);
  min-height: 56px;
  box-shadow: 0 4px 0 rgba(20, 22, 28, 0.15);
  transform: translateY(-2px);
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}

.lp-page[data-tone="pop"] .hero__cta:hover,
.lp-page[data-tone="pop"] .cta__button:hover {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(20, 22, 28, 0.15);
}

.lp-page[data-tone="pop"] .solution__card,
.lp-page[data-tone="pop"] .staff__card,
.lp-page[data-tone="pop"] .offer__plan {
  border-radius: var(--radius-2xl, 1.5rem);
  border: 3px solid var(--color-primary-light);
}

.lp-page[data-tone="pop"] .problem__icon {
  border-radius: var(--radius-full);
}

/* --- feminine: フェミニン --- */
.lp-page[data-tone="feminine"] .lp-section__heading {
  font-weight: 500;
  letter-spacing: 0.03em;
}

.lp-page[data-tone="feminine"] .cta__button {
  border-radius: var(--radius-full);
  font-weight: 500;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 12px rgba(20, 22, 28, 0.08);
}

.lp-page[data-tone="feminine"] .solution__card,
.lp-page[data-tone="feminine"] .staff__card {
  border-radius: var(--radius-2xl, 1.5rem);
  box-shadow: 0 2px 16px rgba(20, 22, 28, 0.04);
}

.lp-page[data-tone="feminine"] .staff__photo {
  border: 3px solid var(--color-primary-light);
}

/* --- japanese: 和風 --- */
.lp-page[data-tone="japanese"] .lp-section__heading {
  letter-spacing: 0.08em;
}

.lp-page[data-tone="japanese"] .cta__button {
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  font-weight: 500;
}

.lp-page[data-tone="japanese"] .solution__card,
.lp-page[data-tone="japanese"] .staff__card {
  border-radius: var(--radius-sm);
}

/* ============================================================
   §11b タイプ別 視覚差別化（6次元: 背景/画像/アイコン/カード/見出し装飾/余白）
   ============================================================ */

/* --- gallery__grid に overflow: hidden（pop の回転対策） --- */
.gallery__grid {
  overflow: hidden;
}

/* ===== ELEGANT ===== */
.lp-page[data-tone="elegant"] .lp-section--alt {
  background: linear-gradient(180deg, #fffdf7 0%, #faf6ee 100%);
}
.lp-page[data-tone="elegant"] .gallery__item {
  border-radius: var(--radius-2xl, 1.5rem);
  box-shadow:
    0 2px 8px rgba(20, 22, 28, 0.04),
    0 8px 24px rgba(20, 22, 28, 0.06);
}
.lp-page[data-tone="elegant"] .staff__photo {
  box-shadow: 0 4px 20px rgba(20, 22, 28, 0.08);
  border-color: rgba(212, 175, 55, 0.25);
}
.lp-page[data-tone="elegant"] .problem__icon {
  background: none;
  border: none;
}
.lp-page[data-tone="elegant"] .solution__card {
  border: none;
  box-shadow:
    0 1px 2px rgba(20, 22, 28, 0.03),
    0 4px 16px rgba(20, 22, 28, 0.05);
  padding: var(--space-8);
}
/* elegant: 下にゴールドのスワール曲線 */
.lp-page[data-tone="elegant"] .lp-section__heading::after {
  width: 140px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 16'%3E%3Cpath d='M0 8 C10 8 15 3 25 3 C35 3 40 8 50 8 C55 8 60 4 70 4 C80 4 85 8 90 8 C100 8 105 3 115 3 C125 3 130 8 140 8' fill='none' stroke='%23B8860B' stroke-width='0.8' opacity='0.5'/%3E%3Ccircle cx='70' cy='4' r='2' fill='%23B8860B' opacity='0.4'/%3E%3C/svg%3E")
    no-repeat center;
  background-color: transparent;
  border-radius: 0;
}
.lp-page[data-tone="elegant"] .lp-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
@media (min-width: 768px) {
  .lp-page[data-tone="elegant"] .lp-section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* ===== CLEAN ===== */
.lp-page[data-tone="clean"] .lp-section--alt {
  background-color: #f8f9fa;
}
.lp-page[data-tone="clean"] .gallery__item {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.lp-page[data-tone="clean"] .staff__photo {
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.lp-page[data-tone="clean"] .problem__icon {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

/* ===== MODERN ===== */
.lp-page[data-tone="modern"] .lp-section--alt {
  background: linear-gradient(160deg, #f5f5f5 0%, #fafafa 100%);
}
.lp-page[data-tone="modern"] .gallery__item {
  border-radius: var(--radius-sm);
}
.lp-page[data-tone="modern"] .staff__photo {
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.lp-page[data-tone="modern"] .problem__icon {
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: transparent;
}
.lp-page[data-tone="modern"] .solution__card {
  border: none;
  border-bottom: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.lp-page[data-tone="modern"] .solution__card:hover {
  box-shadow: 0 4px 12px rgba(20, 22, 28, 0.08);
  transform: translateY(-2px);
}
/* modern: 下にダイヤモンド+直線 */
.lp-page[data-tone="modern"] .lp-section__heading::after {
  width: 100px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cline x1='0' y1='7' x2='38' y2='7' stroke='%23999' stroke-width='1'/%3E%3Crect x='43' y='1' width='14' height='12' fill='none' stroke='%23999' stroke-width='1' transform='rotate(45 50 7)'/%3E%3Cline x1='62' y1='7' x2='100' y2='7' stroke='%23999' stroke-width='1'/%3E%3C/svg%3E")
    no-repeat center;
  background-color: transparent;
  border-radius: 0;
}

/* ===== NATURAL ===== */
.lp-page[data-tone="natural"] .lp-section--alt {
  background-color: #faf8f5;
}
.lp-page[data-tone="natural"] .gallery__item {
  border-radius: 20px;
}
.lp-page[data-tone="natural"] .staff__photo {
  border: none;
  box-shadow: 0 2px 12px rgba(20, 22, 28, 0.06);
}
.lp-page[data-tone="natural"] .problem__icon {
  background-color: var(--color-primary-light);
  border-radius: var(--radius-full);
}
.lp-page[data-tone="natural"] .solution__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(20, 22, 28, 0.06);
}
/* natural: 下に波線+丸 */
.lp-page[data-tone="natural"] .lp-section__heading::after {
  width: 80px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M10 8 C18 3 22 3 30 8 C38 13 42 13 50 8 C58 3 62 3 70 8' fill='none' stroke='%23059669' stroke-width='1.2' opacity='0.4' stroke-linecap='round'/%3E%3Ccircle cx='4' cy='8' r='2' fill='%23059669' opacity='0.25'/%3E%3Ccircle cx='76' cy='8' r='2' fill='%23059669' opacity='0.25'/%3E%3C/svg%3E")
    no-repeat center;
  background-color: transparent;
  border-radius: 0;
}

/* ===== POP ===== */
.lp-page[data-tone="pop"] .lp-section--alt {
  background-color: var(--color-primary-light);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.5) 10px,
    rgba(255, 255, 255, 0.5) 20px
  );
}
.lp-page[data-tone="pop"] .gallery__item {
  border-radius: var(--radius-2xl, 1.5rem);
  border: 3px solid var(--color-primary);
  transform: rotate(-1deg);
  transition: transform 0.2s ease;
}
.lp-page[data-tone="pop"] .gallery__item:nth-child(even) {
  transform: rotate(1deg);
}
.lp-page[data-tone="pop"] .gallery__item:hover {
  transform: rotate(0deg) scale(1.03);
}
.lp-page[data-tone="pop"] .staff__photo {
  border: 3px solid var(--color-primary);
}
.lp-page[data-tone="pop"] .problem__icon {
  background-color: var(--color-primary);
  color: var(--color-primary-fg, #fff);
  border-radius: var(--radius-full);
}
.lp-page[data-tone="pop"] .problem__icon .lp-icon {
  color: var(--color-primary-fg, #fff);
}
.lp-page[data-tone="pop"] .solution__card:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 0 6px 0 var(--color-primary-muted);
}
/* pop: 下にカラフルドット */
.lp-page[data-tone="pop"] .lp-section__heading::after {
  width: 100px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Ccircle cx='20' cy='7' r='5' fill='%23DC2626' opacity='0.7'/%3E%3Ccircle cx='35' cy='7' r='3' fill='%23F59E0B' opacity='0.7'/%3E%3Ccircle cx='50' cy='7' r='5' fill='%232563EB' opacity='0.7'/%3E%3Ccircle cx='65' cy='7' r='3' fill='%2310B981' opacity='0.7'/%3E%3Ccircle cx='80' cy='7' r='5' fill='%23EC4899' opacity='0.7'/%3E%3C/svg%3E")
    no-repeat center;
  background-color: transparent;
  border-radius: 0;
}

/* ===== BOLD ===== */
.lp-page[data-tone="bold"] .lp-section--alt {
  background: linear-gradient(160deg, var(--color-text) 0%, var(--color-surface-dark) 100%);
  color: var(--color-text-inverse);
}
.lp-page[data-tone="bold"] .lp-section--alt .lp-section__heading,
.lp-page[data-tone="bold"] .lp-section--alt h3,
.lp-page[data-tone="bold"] .lp-section--alt p,
.lp-page[data-tone="bold"] .lp-section--alt li,
.lp-page[data-tone="bold"] .lp-section--alt span {
  color: var(--color-text-inverse);
}
.lp-page[data-tone="bold"] .lp-section--alt .lp-section__heading::after {
  background-color: var(--color-primary);
}
.lp-page[data-tone="bold"] .lp-section--alt .solution__card,
.lp-page[data-tone="bold"] .lp-section--alt .staff__card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.lp-page[data-tone="bold"] .gallery__item {
  border-radius: var(--radius-sm);
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}
.lp-page[data-tone="bold"] .staff__photo {
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(20, 22, 28, 0.2);
}
.lp-page[data-tone="bold"] .solution__card {
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(20, 22, 28, 0.12);
  border: none;
}
.lp-page[data-tone="bold"] .solution__card:hover {
  box-shadow: 0 8px 32px rgba(20, 22, 28, 0.18);
  transform: translateY(-3px);
}
/* bold: 下に3段グラデーションバー */
.lp-page[data-tone="bold"] .lp-section__heading::after {
  width: 80px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 6'%3E%3Crect x='0' y='0' width='25' height='6' fill='%23DC2626' rx='1'/%3E%3Crect x='28' y='0' width='25' height='6' fill='%23DC2626' opacity='0.6' rx='1'/%3E%3Crect x='56' y='0' width='25' height='6' fill='%23DC2626' opacity='0.3' rx='1'/%3E%3C/svg%3E")
    no-repeat center;
  background-color: transparent;
  border-radius: 0;
}

/* ===== JAPANESE ===== */
.lp-page[data-tone="japanese"] .lp-section--alt {
  background-color: #faf8f4;
}
.lp-page[data-tone="japanese"] .gallery__item {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.lp-page[data-tone="japanese"] .staff__photo {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
}
.lp-page[data-tone="japanese"] .problem__icon {
  background: none;
}
.lp-page[data-tone="japanese"] .solution__card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
  padding: var(--space-8);
}
/* japanese: 下に菱形紋+細線 */
.lp-page[data-tone="japanese"] .lp-section__heading::after {
  width: 60px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Cline x1='0' y1='8' x2='22' y2='8' stroke='%23059669' stroke-width='0.5' opacity='0.4'/%3E%3Cpath d='M30 2 L34.5 6.5 L30 11 L25.5 6.5 Z' fill='none' stroke='%23059669' stroke-width='0.8' opacity='0.5'/%3E%3Ccircle cx='30' cy='6.5' r='1.5' fill='%23059669' opacity='0.3'/%3E%3Cline x1='38' y1='8' x2='60' y2='8' stroke='%23059669' stroke-width='0.5' opacity='0.4'/%3E%3C/svg%3E")
    no-repeat center;
  background-color: transparent;
  border-radius: 0;
}
.lp-page[data-tone="japanese"] .lp-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
@media (min-width: 768px) {
  .lp-page[data-tone="japanese"] .lp-section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* ===== FEMININE ===== */
.lp-page[data-tone="feminine"] .lp-section--alt {
  background: linear-gradient(180deg, var(--color-primary-light, #fdf2f8) 0%, #ffffff 100%);
}
.lp-page[data-tone="feminine"] .gallery__item {
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(20, 22, 28, 0.05);
}
.lp-page[data-tone="feminine"] .problem__icon {
  background-color: var(--color-primary-light);
  border-radius: 50% / 40%;
}
.lp-page[data-tone="feminine"] .solution__card:hover {
  box-shadow: 0 4px 24px rgba(20, 22, 28, 0.06);
  transform: translateY(-2px);
}
/* feminine: 下に花モチーフ曲線 */
.lp-page[data-tone="feminine"] .lp-section__heading::after {
  width: 100px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cpath d='M10 9 C15 4 20 4 25 9 C30 14 35 14 40 9' fill='none' stroke='%23DB2777' stroke-width='0.8' opacity='0.35' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='6' r='3' fill='none' stroke='%23DB2777' stroke-width='0.8' opacity='0.4'/%3E%3Ccircle cx='50' cy='6' r='1' fill='%23DB2777' opacity='0.3'/%3E%3Cpath d='M60 9 C65 4 70 4 75 9 C80 14 85 14 90 9' fill='none' stroke='%23DB2777' stroke-width='0.8' opacity='0.35' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center;
  background-color: transparent;
  border-radius: 0;
}

/* ============================================================
   §12 日本語タイポグラフィ改善
   ============================================================ */
.lp-section__heading {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 本文の行間を日本語向けに調整 */
.agitation--story .agitation__paragraph,
.solution--stacked .solution__item-desc,
.postscript--founder .postscript__message,
.postscript--casual .postscript__message,
.postscript--mission .postscript__description {
  line-height: 1.8;
}

/* 引用テキストの行間 */
.agitation--story .agitation__quote,
.agitation--quote .agitation__blockquote {
  line-height: 1.7;
}

/* ============================================================
   §13 FAQ アコーディオン
   ============================================================ */
.faq__details {
  border-bottom: 1px solid var(--color-border);
}

.faq__summary {
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--color-text);
  text-align: left;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-2);
}

.faq__summary::after {
  margin-left: auto; /* +/- を右端に押す */
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary::before {
  content: "Q. ";
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.faq__summary::after {
  content: "+";
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.faq__details[open] .faq__summary::after {
  content: "−";
}

.faq__details-answer {
  padding: 0 0 var(--space-4) var(--space-6);
  /* 2026-04-23: sm (14px) → base (16px) に引き上げ。スマホで読みにくかった。 */
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.faq__details-answer::before {
  content: "A. ";
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   §14 中間CTA（セクション間に挟むインラインCTA）
   ============================================================ */
.lp-inline-cta {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  margin: 0;
}

/* 中間CTA の data-fill="solid" 対応 */
.lp-inline-cta[data-fill="solid"] {
  color: var(--color-text-inverse);
}

.lp-inline-cta[data-fill="solid"] .lp-inline-cta__sub {
  color: var(--color-text-muted);
}

.lp-inline-cta[data-fill="solid"] .cta__button {
  background: var(--color-bg);
  color: var(--color-primary);
}

.lp-inline-cta[data-fill="solid"] .cta__button::before {
  display: none;
}

.lp-inline-cta .cta__button {
  margin: 0 auto;
}

.lp-inline-cta__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   §15 ダーク背景セクション — 全子要素のテキスト色を白に
   ============================================================ */
.lp-section--dark,
.lp-section--dark .lp-section__heading,
.lp-section--dark .lp-section__heading::after {
  color: var(--color-text-inverse);
}

.lp-section--dark .lp-section__heading::after {
  background-color: rgba(255, 255, 255, 0.3);
}

/* narrowing--ribbon のダーク背景対応 */
.narrowing--ribbon.lp-section--dark .narrowing__check,
/* data-fill="solid" が narrowing__check の色を制御（§18a で対応済み） */

/* proof highlight のダーク背景対応 (視認性 AA 準拠: primary ではなく白を強制) */
.lp-section--dark .proof__number-value {
  color: var(--color-text-inverse);
}

.lp-section--dark .proof__number-label {
  color: var(--color-text-muted);
}

/* agitation quote のダーク背景対応 */
.lp-section--dark .agitation__blockquote {
  color: var(--color-text-inverse);
}

.lp-section--dark .agitation__blockquote::before {
  color: rgba(255, 255, 255, 0.2);
}

.lp-section--dark .agitation__attribution-name {
  color: var(--color-text-inverse);
}

/* ダーク背景で色指定漏れの要素 (2026-04-23 追加) */
.lp-section--dark .cta__description {
  color: rgba(255, 255, 255, 0.85);
}

.lp-section--dark .agitation__stat-source {
  color: var(--color-text-muted);
}

.lp-section--dark .narrowing__check {
  color: var(--color-text-inverse);
}

.lp-section--dark .proof__voice-bubble {
  color: var(--color-text-inverse);
}

/* ============================================================
   §16 モダンディテール — 質感・グラデーション・アニメーション
   ============================================================ */

/* --- ノイズテクスチャオーバーレイ --- */
.lp-noise {
  position: relative;
  isolation: isolate;
}

.lp-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 波形セクションディバイダー --- */
.lp-wave-divider {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: -1px; /* 隙間防止 */
}

@media (min-width: 768px) {
  .lp-wave-divider {
    height: 64px;
  }
}

/* --- CTA ボタン光沢（シャイン）アニメーション --- */
.cta__button {
  position: relative;
  overflow: hidden;
}

.cta__button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: cta-shine 2.5s ease-in-out infinite;
}

@keyframes cta-shine {
  0% {
    left: -75%;
  }
  20% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}

/* 矢印付き CTA（日本のLP定番） */
.cta__button--arrow {
  gap: var(--space-2);
}

.cta__button--arrow::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.cta__button--arrow:hover::after {
  transform: translateX(3px) rotate(-45deg);
}

/* CTA 説明文 */
.cta__description {
  font-size: var(--fs-lg);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

/* ボタン下のマイクロコピー */
.cta__microcopy {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* --- ソフトシャドウ（多層） --- */
.lp-soft-shadow {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.05);
}

/* --- お客様の声: 吹き出し型 --- */
.proof--bubble .proof__voices {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: var(--container-md);
  margin: 0 auto;
}

.proof--bubble .proof__voice {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.proof--bubble .proof__voice-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-surface-alt);
  flex-shrink: 0;
  object-fit: cover;
}

.proof--bubble .proof__voice-bubble {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  flex: 1;
}

.proof--bubble .proof__voice-bubble::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -10px;
  border: 5px solid transparent;
  border-right: 10px solid var(--color-surface);
}

.proof--bubble .proof__voice-stars {
  color: var(--color-accent);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
  letter-spacing: 2px;
}

.proof--bubble .proof__voice-text {
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--color-text);
}

.proof--bubble .proof__voice-name {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* --- グラデーション背景セクション --- */
.lp-section--gradient-soft {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
}

/* --- カードのインナーシャドウ（ガラス感） --- */
.lp-glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* --- 無彩色背景バリエーション --- */
.lp-section--warm-gray {
  background-color: #f9f8f6;
}

.lp-section--cool-gray {
  background-color: #f8f9fb;
}

.lp-section--charcoal {
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
}

.lp-section--charcoal .lp-section__heading {
  color: var(--color-text-inverse);
}

.lp-section--charcoal .lp-section__heading::after {
  background-color: rgba(255, 255, 255, 0.3);
}

.lp-section--charcoal .postscript__name,
.lp-section--charcoal .postscript__message,
.lp-section--charcoal .postscript__message p,
.lp-section--charcoal .postscript__message > div,
.lp-section--charcoal .postscript__statement,
.lp-section--charcoal .postscript__description,
.lp-section--charcoal .postscript__description p {
  color: var(--color-text-inverse);
}

.lp-section--charcoal .postscript__company {
  background-color: rgba(255, 255, 255, 0.08);
}

.lp-section--charcoal .postscript__company dt {
  color: var(--color-text-muted);
}

.lp-section--charcoal .postscript__company dd {
  color: var(--color-text-inverse);
}

/* ============================================================
   §17b タイプ別 背景テクスチャ（質感）
   パターン（柄の繰り返し）ではなく、テクスチャ（素材の質感）を使う。
   ノイズ/グレイン/紙質感 + グラデーション塗りの組み合わせ。
   ============================================================ */

/* --- 塗りつぶしセクションのテクスチャ --- */

/* elegant: 微かなノイズ（高級感のある素材感） */
.lp-page[data-tone="elegant"] [data-fill="solid"] {
  position: relative;
  isolation: isolate;
}
.lp-page[data-tone="elegant"] [data-fill="solid"]::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* clean: テクスチャなし（清潔感 = ベタ塗り） */

/* modern: テクスチャなし（シャープ = ベタ塗り） */

/* natural: 微かなグレイン（自然素材感） */
.lp-page[data-tone="natural"] [data-fill="solid"] {
  position: relative;
  isolation: isolate;
}
.lp-page[data-tone="natural"] [data-fill="solid"]::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* pop: テクスチャなし（明快 = ベタ塗り） */

/* bold: テクスチャなし（力強い = ベタ塗り） */

/* japanese: 和紙風テクスチャ（粗めのノイズ） */
.lp-page[data-tone="japanese"] [data-fill="solid"] {
  position: relative;
  isolation: isolate;
}
.lp-page[data-tone="japanese"] [data-fill="solid"]::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* feminine: 微かなノイズ（繊細な質感） */
.lp-page[data-tone="feminine"] [data-fill="solid"] {
  position: relative;
  isolation: isolate;
}
.lp-page[data-tone="feminine"] [data-fill="solid"]::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- 白ベースセクション: テクスチャなし ---
   白背景にタイルパターンを敷くのは素人デザインに見える。
   白は白のまま。グレー背景セクションも同様。 */

/* --- タイプ別ボタン質感 ---
   タイプによってボタンの「質感」そのものを変える。
   グラデーション / ガラス / フラット / テクスチャ etc. */

/* luxury: メタリックグラデーション + インナーグロー + ボーダー.
   outline variant は除外 (BUG-017/018 同色不可視防止). */
.lp-page[data-tone="elegant"] .cta__button:not(.cta__button--outline) {
  background: var(
    --gradient-primary,
    linear-gradient(145deg, var(--color-accent), var(--color-primary))
  );
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.lp-page[data-tone="elegant"] .cta__button:not(.cta__button--outline):hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* clean: ガラス風（半透明 + ブラー + 細いボーダー）.
   outline variant は除外 (BUG-017/018 同色不可視防止). */
.lp-page[data-tone="clean"] .cta__button:not(.cta__button--outline) {
  background: var(--color-primary);
  /* BUG-099: 背景を primary 単色に差し替えるなら前景も primary-fg に揃える。
     ベース .cta__button の color は --color-cta-fg (key 色用に算出) で、
     primary 背景の上では token ミスマッチ (青地に黒 = ratio 3.37) になる。 */
  color: var(--color-primary-fg);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-page[data-tone="clean"] .cta__button:not(.cta__button--outline):hover {
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* modern: フラットに近い、微妙なグラデーション + シャープ.
   outline variant は除外 (BUG-017/018 同色不可視防止). */
.lp-page[data-tone="modern"] .cta__button:not(.cta__button--outline) {
  background: var(--color-primary);
  /* BUG-099: primary 背景に整合する前景 (青地に黒 3.37 を回避)。 */
  color: var(--color-primary-fg);
  box-shadow: 0 1px 4px rgba(20, 22, 28, 0.1);
  border: none;
  border-radius: var(--radius-md);
}

.lp-page[data-tone="modern"] .cta__button:not(.cta__button--outline):hover {
  box-shadow: 0 2px 8px rgba(20, 22, 28, 0.15);
}

/* warm: 柔らかいグラデーション + 丸め */
.lp-page[data-tone="natural"] .cta__button:not(.cta__button--outline) {
  background: var(
    --gradient-primary,
    linear-gradient(135deg, var(--color-accent), var(--color-primary))
  );
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
}

/* bold: 単色ベタ塗り + 強い影 + 太字 */
.lp-page[data-tone="bold"] .cta__button:not(.cta__button--outline) {
  background: var(--color-primary);
  /* BUG-099: primary 背景に整合する前景 (青地に黒 3.37 を回避)。 */
  color: var(--color-primary-fg);
  box-shadow: 0 4px 16px rgba(20, 22, 28, 0.2);
  border: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lp-page[data-tone="bold"] .cta__button:not(.cta__button--outline):hover {
  box-shadow: 0 6px 24px rgba(20, 22, 28, 0.3);
}

/* japanese: 落ち着いた単色 + 細いボーダー + 和の余白 */
.lp-page[data-tone="japanese"] .cta__button:not(.cta__button--outline) {
  background: var(--color-primary);
  /* BUG-099: primary 背景に整合する前景 (青地に黒 3.37 を回避)。 */
  color: var(--color-primary-fg);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
}

/* pop: 丸くて楽しいボタン + 影 */
.lp-page[data-tone="pop"] .cta__button:not(.cta__button--outline) {
  background: var(--gradient-primary, var(--color-primary));
  border-radius: var(--radius-full);
  box-shadow: 0 4px 0 rgba(20, 22, 28, 0.15);
  font-weight: 800;
  transform: translateY(0);
}

.lp-page[data-tone="pop"] .cta__button:not(.cta__button--outline):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(20, 22, 28, 0.15);
}

.lp-page[data-tone="pop"] .lp-section__heading {
  font-weight: 800;
}

/* feminine: 柔らかいグラデ + 丸め + 繊細なボーダー */
.lp-page[data-tone="feminine"] .cta__button:not(.cta__button--outline) {
  background: var(--gradient-primary, var(--color-primary));
  border-radius: var(--radius-full);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lp-page[data-tone="feminine"] .lp-section__heading {
  letter-spacing: 0.04em;
}

.lp-page[data-tone="feminine"] .lp-section__heading::after {
  height: 2px;
  width: 40px;
  border-radius: var(--radius-full);
}

/* --- スクロールアニメーション（IntersectionObserver） --- */
.lp-fade-in {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lp-fade-in.is-visible {
  opacity: 1;
}

/* --- トップへ戻るボタン --- */
.lp-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 22, 28, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
}

.lp-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.lp-back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 22, 28, 0.12);
}

/* ============================================================
   §20 手動テクスチャ選択（data-texture 属性）
   ============================================================ */
/* ============================================================
   §19b カード要素はパターンの上に表示
   パターン ::before が z-index: 2 なので、カードは z-index: 3 で上に
   ============================================================ */
.solution--col-3 .solution__card,
.solution--stacked .solution__item,
.solution--icon-grid .solution__grid-item,
.proof--bubble .proof__voice,
.proof--logo-bar .proof__stat,
.proof--highlight .proof__number-item,
.offer--single .offer__plan,
.offer--table-3 .offer__menu-item,
.offer--compare-2 .offer__plan-card,
.problem--grid-4 .problem__card,
.problem--checklist .problem__list,
.agitation--stats .agitation__stat,
.cta--steps .cta__step,
.cta--form-style .cta__form,
.narrowing--timeline .narrowing__steps,
.narrowing--seasonal .narrowing__content,
.faq__list {
  position: relative;
  z-index: 3;
}

/* ============================================================
   §21 装飾エフェクト（data-decor 属性）
   プロのLPで使われる装飾テクニック:
   - glow: ぼかした光の玉（角に配置）
   - glow-dual: 2つの光の玉（対角に配置）
   - spotlight: 光のスポット（上から差し込む）
   - inner-glow: セクション内側のソフトな光
   ============================================================ */

/* --- glow: ぼかした光の玉（右上に配置） --- */
[data-decor="glow"] {
  position: relative;
  overflow: hidden;
}
[data-decor="glow"]::before {
  content: "";
  position: absolute;
  top: -15%;
  right: -10%;
  width: 50%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--color-primary) 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

/* --- glow-dual: 2つの光の玉（対角に配置） --- */
[data-decor="glow-dual"] {
  position: relative;
  overflow: hidden;
}
[data-decor="glow-dual"]::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 40%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
  filter: blur(50px);
  opacity: 0.07;
  pointer-events: none;
  z-index: 1;
}
[data-decor="glow-dual"]::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 35%;
  height: 45%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--color-accent, var(--color-primary)) 0%,
    transparent 70%
  );
  filter: blur(50px);
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

/* --- spotlight: 上から差し込む光 --- */
[data-decor="spotlight"] {
  position: relative;
  overflow: hidden;
}
[data-decor="spotlight"]::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 30%;
  width: 40%;
  height: 80%;
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 0deg,
    var(--color-primary) 30deg,
    transparent 60deg
  );
  filter: blur(40px);
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

/* --- inner-glow: セクション内側のソフトな光 --- */
[data-decor="inner-glow"] {
  box-shadow:
    inset 0 0 120px rgba(var(--color-primary-rgb, 37, 99, 235), 0.04),
    inset 0 -60px 100px rgba(var(--color-primary-rgb, 37, 99, 235), 0.03);
}

/* --- 塗りつぶし時: 光の色を白に --- */
[data-fill="solid"][data-decor="glow"]::before,
[data-fill="solid"][data-decor="spotlight"]::before {
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0.12;
}

[data-fill="solid"][data-decor="glow-dual"]::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
  opacity: 0.1;
}

[data-fill="solid"][data-decor="inner-glow"] {
  box-shadow:
    inset 0 0 120px rgba(255, 255, 255, 0.06),
    inset 0 -60px 100px rgba(255, 255, 255, 0.04);
}

/* ============================================================
   §21b 装飾エフェクト 追加 (BL-UX-AUDIT A08, 2026-06-06)
   既存 5 種に加え 7 種追加。控えめな透明度 (0.04-0.12) で grim を避ける。
   data-decor を <section> に出力する block で適用される。
   ============================================================ */

/* --- glow-top-right: 既存 glow の強調版 (より大きく、より右上寄り) --- */
[data-decor="glow-top-right"] {
  position: relative;
  overflow: hidden;
}
[data-decor="glow-top-right"]::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -15%;
  width: 60%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--color-primary) 0%, transparent 70%);
  filter: blur(70px);
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}

/* --- glow-bottom-left: glow の鏡像 (左下に配置) --- */
[data-decor="glow-bottom-left"] {
  position: relative;
  overflow: hidden;
}
[data-decor="glow-bottom-left"]::before {
  content: "";
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 50%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 60% 60%,
    var(--color-accent, var(--color-primary)) 0%,
    transparent 70%
  );
  filter: blur(60px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

/* --- spotlight-top: spotlight の同義 (明示的に上から) --- */
[data-decor="spotlight-top"] {
  position: relative;
  overflow: hidden;
}
[data-decor="spotlight-top"]::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 30%;
  width: 40%;
  height: 80%;
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 0deg,
    var(--color-primary) 30deg,
    transparent 60deg
  );
  filter: blur(40px);
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

/* --- spotlight-bottom: 下から差し込む光 --- */
[data-decor="spotlight-bottom"] {
  position: relative;
  overflow: hidden;
}
[data-decor="spotlight-bottom"]::before {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 30%;
  width: 40%;
  height: 80%;
  background: conic-gradient(
    from 0deg at 50% 100%,
    transparent 0deg,
    var(--color-primary) 30deg,
    transparent 60deg
  );
  filter: blur(40px);
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

/* --- vignette: 四隅暗転 (写真を引き締める elegant 系効果) --- */
[data-decor="vignette"] {
  position: relative;
  overflow: hidden;
}
[data-decor="vignette"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
  z-index: 1;
}

/* --- noise-veil: ノイズベール (modern/pop 向け、薄く粒子感) --- */
[data-decor="noise-veil"] {
  position: relative;
  overflow: hidden;
}
[data-decor="noise-veil"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* --- frame-thin: 極細枠 (elegant、控えめ) --- */
[data-decor="frame-thin"] {
  position: relative;
}
[data-decor="frame-thin"]::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 1;
}
[data-fill="solid"][data-decor="frame-thin"]::after,
[data-fill="dark"][data-decor="frame-thin"]::after {
  border-color: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   §20 (再導入) テクスチャ (data-pattern) — BL-UX-AUDIT A10, 2026-06-06
   塗り色 (bgPreset) と独立した 2 軸目。SVG パターン or CSS noise で軽量実装。
   ============================================================ */

/* --- noise: ランダムノイズ (modern/pop) --- */
[data-pattern="noise"] {
  position: relative;
}
[data-pattern="noise"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='1'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* --- grain: 粒子感 (natural) --- */
[data-pattern="grain"] {
  position: relative;
}
[data-pattern="grain"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' seed='5'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='0.3'/></svg>");
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* --- paper: 紙質感 (japanese/elegant) --- */
[data-pattern="paper"] {
  position: relative;
}
[data-pattern="paper"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.04 0.08' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23p)'/></svg>");
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* --- linen: リネン質感 (natural/feminine) — 直交する細かい繊維線 --- */
[data-pattern="linen"] {
  position: relative;
}
[data-pattern="linen"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.03) 0,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

/* --- concrete: コンクリ質感 (bold/modern) — 粗い粒 + 微かなムラ --- */
[data-pattern="concrete"] {
  position: relative;
}
[data-pattern="concrete"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.5 0.4' numOctaves='4' seed='11'/></filter><rect width='220' height='220' filter='url(%23c)' opacity='0.4'/></svg>");
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* solid / dark の上では mix-blend-mode を screen に切替えて沈み込みを避ける */
[data-fill="solid"][data-pattern="noise"]::before,
[data-fill="dark"][data-pattern="noise"]::before,
[data-fill="solid"][data-pattern="grain"]::before,
[data-fill="dark"][data-pattern="grain"]::before,
[data-fill="solid"][data-pattern="concrete"]::before,
[data-fill="dark"][data-pattern="concrete"]::before {
  mix-blend-mode: screen;
  opacity: 0.08;
}

/* ============================================================
   §22b 背景グラデーション (BL-UX-AUDIT A11, 2026-06-06)
   <section style="--lp-bg-gradient: linear-gradient(...)" data-bg-type="gradient">
   ============================================================ */

[data-bg-type="gradient"] {
  background-image: var(--lp-bg-gradient);
  background-size: cover;
}

/* ============================================================
   §22 画像スケルトン（読み込み中のプレースホルダー）
   画像が届く前にシマーアニメーションで「何かがある」ことを示す。
   ============================================================ */

/* 画像の親要素にスケルトン背景 */
img {
  background-color: var(--color-surface, #f0f0f0);
  background-image: linear-gradient(
    90deg,
    var(--color-surface, #f0f0f0) 0%,
    #e8e8e8 40%,
    var(--color-surface, #f0f0f0) 80%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

img.is-loaded,
img[complete] {
  background: none;
  animation: none;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Hero 背景画像のスケルトン */
.hero--fullbleed .hero__bg {
  background-color: var(--color-primary-light, #f0f0f0);
}

/* H-4: 画像なし時の Hero placeholder (Hero.render.tsx hero__bg--placeholder / hero__img--placeholder).
   グラデーション + テクスチャ風 noise filter で「写真未設定」状態でも視覚的に成立する見栄え. */
.hero__bg--placeholder,
.hero__img--placeholder {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-primary) 18%, transparent),
      color-mix(in srgb, var(--color-primary) 6%, transparent)
    ),
    radial-gradient(
      ellipse at 30% 20%,
      color-mix(in srgb, var(--color-accent) 22%, transparent),
      transparent 60%
    ),
    var(--color-primary-light, #f0f0f0);
  position: relative;
  isolation: isolate;
}

.hero__bg--placeholder::after,
.hero__img--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 0,
    transparent 40%,
    rgba(0, 0, 0, 0.04) 80%
  );
  filter: url("#lp-noise") opacity(0.18);
  z-index: -1;
}

.hero__img--placeholder {
  width: 100%;
  min-height: 280px;
  border-radius: var(--radius-xl, 16px);
}

/* ダーク背景上の画像スケルトン */
[data-fill="solid"] img {
  background-color: rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.05) 80%
  );
}

@media (prefers-reduced-motion: reduce) {
  img {
    animation: none;
  }
}

/* --- prefers-reduced-motion --- */
/* ============================================================
   §18 スマホビュー最適化（375px〜）
   ============================================================ */

/* CTA ボタン: スマホではフル幅 */
@media (max-width: 639px) {
  .cta__button {
    width: 100%;
    max-width: 100%;
    min-height: 56px;
    font-size: var(--fs-lg);
  }

  .cta__button-wrap,
  .lp-inline-cta {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .lp-inline-cta .cta__button {
    width: 100%;
  }

  /* セクション見出し: スマホではやや大きく */
  .lp-section__heading {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-8);
  }

  /* テキスト中央揃え（スマホでは中央の方が見やすい） */
  .agitation--story .agitation__body {
    text-align: center;
  }

  .agitation--story .agitation__quote {
    text-align: left;
  }

  /* Proof 吹き出し: スマホでは縦積み中央 */
  .proof--bubble .proof__voice {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .proof--bubble .proof__voice-bubble::before {
    display: none; /* スマホでは吹き出し矢印不要 */
  }

  /* PostScript: スマホでは中央寄せ */
  .postscript--founder .postscript__content,
  .postscript--casual .postscript__content {
    text-align: center;
  }

  .postscript--founder .postscript__message,
  .postscript--casual .postscript__message {
    text-align: left;
  }

  /* FAQ: スマホではパディング調整 */
  .faq__summary {
    padding: var(--space-4) 0;
    font-size: var(--fs-sm);
  }

  /* Offer カード: スマホでも全幅ボタン */
  .offer--table-3 .offer__menu-item .cta__button,
  .offer--compare-2 .offer__plan-card .cta__button {
    width: 100%;
    min-height: 48px;
  }

  /* Solution stacked: スマホでは中央揃えカード風 */
  .solution--stacked .solution__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Narrowing checks: スマホで全幅 */
  .narrowing--ribbon .narrowing__checks {
    padding: 0;
  }

  /* Hero badges: スマホで中央寄せ */
  .hero__badges {
    justify-content: center;
  }

  /* Hero split: スマホではテキスト先、画像後 */
  .hero--split .hero__text {
    order: 1;
  }
  .hero--split .hero__media {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta__button::before {
    animation: none;
  }
  .hero--fullbleed .hero__bg,
  .hero--split .hero__media img {
    filter: none;
    transform: none;
    animation: none;
  }
  .solution--col-3 .solution__card:hover,
  .solution--icon-grid .solution__grid-item:hover {
    transform: none;
  }
  .lp-fade-in {
    opacity: 1;
    transition: none;
  }
}

/* ============================================================
   §18a ブロックモード: 白ベース / 塗りつぶし / ダーク
   - data-fill="base": 白背景（デフォルト、属性なしでも同じ）
   - data-fill="solid": プライマリカラー塗りつぶし背景
   - data-fill="dark": ダーク背景（#2d2d2d）
   ============================================================ */

/* data-fill="dark" — ダーク背景（data-fill="solid" のバリエーション） */
.lp-section[data-fill="dark"],
.hero[data-fill="dark"] {
  --color-text: #ffffff;
  /* BUG-098: 0.7 は dark/primary 背景上で ratio 4.5 未満 (品質点検 1C で 318 件)。
     最も明るい primary (#2563eb) でも AA 4.5 を満たす 0.92 に上げる
     (0.88=4.37 で僅か未達、0.92=4.65)。 */
  --color-text-muted: rgba(255, 255, 255, 0.92);
  --color-border: rgba(255, 255, 255, 0.15);
  background-color: var(--color-surface-dark);
  color: var(--color-text);
}

.lp-section[data-fill="dark"] .lp-section__heading::after {
  background-color: rgba(255, 255, 255, 0.3);
}

/* ダーク背景のボタン: プライマリグラデーション */
.lp-section[data-fill="dark"] .cta__button {
  background: var(--gradient-primary, var(--color-primary));
  color: var(--color-primary-fg, #ffffff);
  box-shadow: 0 4px 16px rgba(20, 22, 28, 0.2);
  border: none;
}

.lp-section[data-fill="dark"] .cta__button:hover {
  box-shadow: 0 6px 24px rgba(20, 22, 28, 0.25);
  filter: brightness(1.08);
}

.lp-section[data-fill="dark"] .cta__button--arrow {
  color: var(--color-primary-fg, #ffffff);
}

.lp-section[data-fill="dark"] .cta__button--arrow::after {
  border-color: var(--color-primary-fg, #ffffff);
}

/* ダーク背景のアウトラインボタン */
.lp-section[data-fill="dark"] .cta__button--outline {
  background: transparent;
  color: var(--color-text-inverse);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.lp-section[data-fill="dark"] .cta__button--outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-text-inverse);
}

/* ダーク背景上の画像スケルトン */
[data-fill="dark"] img {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ダーク背景で primary 色を直接使っている要素は白に寄せる (AA 3:1 未達回避)。
   .lp-section--dark 向けのみ存在していた既存ルール (§15) と対になる data-fill="dark" 版。 */
.lp-section[data-fill="dark"] .proof__number-value,
.lp-section[data-fill="dark"] .proof__number-value [data-count-to],
.lp-section[data-fill="dark"] .proof__number-suffix,
.lp-section[data-fill="dark"] .postscript__statement {
  color: var(--color-text-inverse, #ffffff);
}

/* BUG-013: solid 背景 (primary 塗り) 上で primary 色の数字・単位は同色化し不可視。
   dark と同様に inverse (白) に倒す。proof 系 / postscript を網羅。
   BUG-098: agitation__stat-number は .agitation__stat カード内で、カードは白リセット
   (3406) されるため inverse (白) だと白カードに白数字で消える → 除外し primary 色を維持。 */
.lp-section[data-fill="solid"] .proof__number-value,
.lp-section[data-fill="solid"] .proof__number-value [data-count-to],
.lp-section[data-fill="solid"] .proof__number-suffix,
.lp-section[data-fill="solid"] .proof__stat-number,
.lp-section[data-fill="solid"] .postscript__statement {
  color: var(--color-text-inverse, #ffffff);
}

/* BUG-098: solid/dark 背景の直下にある primary 色見出し (カード外) は背景 primary と
   同化して読めない (Menu category 見出し等)。inverse (白) に倒す。 */
.lp-section[data-fill="solid"] .menu__category-name,
.lp-section[data-fill="dark"] .menu__category-name {
  color: var(--color-text-inverse, #ffffff);
}

/* data-fill="light" — プライマリを白にミックスした淡色塗り (本文色はそのまま) */
.lp-section[data-fill="light"],
.hero[data-fill="light"] {
  background-color: var(--color-primary-light, #f0f4f8);
}

/* data-fill="solid" — CSS変数スコープ上書きで全子孫のテキスト色を制御 */
.lp-section[data-fill="solid"],
.hero[data-fill="solid"] {
  --color-text: #ffffff;
  /* BUG-098: 0.7 は primary 背景上で ratio 4.5 未満。最も明るい primary でも AA を満たす
     0.92 に上げる (0.88=4.37 で僅か未達、0.92=4.65)。 */
  --color-text-muted: rgba(255, 255, 255, 0.92);
  --color-border: rgba(255, 255, 255, 0.15);
  background-color: var(--color-primary);
  color: var(--color-text);
}

/* data-fill="custom" (BUG-091) — ブロック個別の実色背景。
   背景色 (--section-bg) と前景色 (--section-fg) は render が deriveSectionStyle で
   inline CSS 変数として注入する (スキン軸参照 var(--color-*) or 自由 HEX、前景は輝度自動)。
   muted/border は前景色を薄めて背景問わずコントラストを確保。 */
.lp-section[data-fill="custom"],
.hero[data-fill="custom"] {
  --color-text: var(--section-fg, #1a1a1a);
  --color-text-muted: color-mix(in srgb, var(--section-fg, #1a1a1a) 70%, transparent);
  --color-border: color-mix(in srgb, var(--section-fg, #1a1a1a) 18%, transparent);
  background-color: var(--section-bg, #ffffff);
  color: var(--color-text);
}

/* elegant: リッチなグラデーション + 光沢感 */
.lp-page[data-tone="elegant"] [data-fill="solid"] {
  background-image: linear-gradient(
    145deg,
    var(--color-accent),
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 80%, black)
  );
}

/* clean: フラットな単色（グラデーションなし） */
.lp-page[data-tone="clean"] [data-fill="solid"] {
  background-image: none;
}

/* modern: 微妙な斜めグラデーション */
.lp-page[data-tone="modern"] [data-fill="solid"] {
  background-image: linear-gradient(
    135deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 85%, black)
  );
}

/* natural: 柔らかい暖色グラデーション */
.lp-page[data-tone="natural"] [data-fill="solid"] {
  background-image: linear-gradient(180deg, var(--color-accent), var(--color-primary));
}

/* pop: 明るいグラデーション */
.lp-page[data-tone="pop"] [data-fill="solid"] {
  background-image: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}

/* bold: 力強い単色（グラデーションなし） */
.lp-page[data-tone="bold"] [data-fill="solid"] {
  background-image: none;
}

/* japanese: 微妙な縦グラデーション */
.lp-page[data-tone="japanese"] [data-fill="solid"] {
  background-image: linear-gradient(
    180deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 90%, black)
  );
}

/* feminine: ソフトなグラデーション */
.lp-page[data-tone="feminine"] [data-fill="solid"] {
  background-image: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}

.hero[data-fill="solid"] .hero__category,
.hero[data-fill="dark"] .hero__category {
  /* BUG-098: dark 版が無く primary 色のまま dark/primary 地で読めなかった。
     solid と同様 0.9 の白で AA 確保。 */
  color: rgba(255, 255, 255, 0.9);
}

.lp-section[data-fill="solid"] .lp-section__heading::after {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 塗りつぶし時のボタン: 補色CTA（目立つ対照色）or 白 */
.lp-section[data-fill="solid"] .cta__button {
  background: var(--gradient-cta, var(--color-bg));
  color: var(--color-cta-fg, var(--color-primary));
  box-shadow: 0 4px 16px rgba(20, 22, 28, 0.2);
  border: none;
}

/* 補色未設定のフォールバック: 白ボタン+プライマリテキスト */
.lp-section[data-fill="solid"] .cta__button:not([style]) {
  /* --gradient-cta が未設定なら白背景にフォールバック */
}

/* Hero solid 時の CTA: 白地 + primary 文字 (補色ボタンなし時の確実な可読性).
   tone 別 .cta__button { background: var(--color-primary) } (詳細度 0,2,1) と
   同詳細度でソース順負けするため .cta__button を加えて 0,3,1 に強化.
   BUG-014/016/019 (Hero ボタン同色不可視) 根本対策.
   BUG-037 (再発): 旧版は var(--color-bg) を見ていたが、[data-bg="theme"] では --color-bg
   が rgba(255,255,255,0.08) (透明白) になりピンク地に透けていた。CTA 専用の --color-cta-bg を
   優先し、なければ白固定にフォールバック. */
.hero[data-fill="solid"] .hero__cta.cta__button {
  background-color: var(--color-cta-bg, #ffffff);
  background-image: none;
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(20, 22, 28, 0.1);
}

.lp-section[data-fill="solid"] .cta__button:hover {
  box-shadow: 0 6px 24px rgba(20, 22, 28, 0.25);
  filter: brightness(1.08);
}

.hero[data-fill="solid"] .hero__cta.cta__button:hover {
  box-shadow: 0 4px 16px rgba(20, 22, 28, 0.15);
  background-color: rgba(255, 255, 255, 0.95);
  background-image: none;
}

/* 塗りつぶし時のアウトラインボタン（セカンダリCTA用）.
   tone 別 .cta__button { background-image: linear-gradient(...) } を明示 none で打ち消す. */
.lp-section[data-fill="solid"] .cta__button--outline,
.hero[data-fill="solid"] .cta__button--outline {
  background-color: transparent;
  background-image: none;
  color: var(--color-text-inverse);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.lp-section[data-fill="solid"] .cta__button--outline:hover,
.hero[data-fill="solid"] .cta__button--outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-text-inverse);
}

/* 塗りつぶし時のバッジ */
.hero[data-fill="solid"] .hero__badge {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}

/* テキスト色は --color-text / --color-text-muted の CSS 変数スコープ上書きで
   全子孫に自動継承されるため、個別セレクタ列挙は不要 */

/* S-2: 塗りつぶし背景上の arrow CTA — 補色ボタンなので白テキスト */
.lp-section[data-fill="solid"] .cta__button--arrow {
  color: var(--color-cta-fg, #ffffff);
}
/* arrow の疑似要素（→矢印）も白 */
.lp-section[data-fill="solid"] .cta__button--arrow::after {
  border-color: var(--color-cta-fg, #ffffff);
}

/* Leaflet 内は除外 */
/* Leaflet はdata-fill の色上書きから完全に除外 */
.leaflet-container,
.leaflet-container *,
.leaflet-popup-content-wrapper,
.leaflet-popup-content-wrapper *,
.leaflet-control-zoom a,
.leaflet-control-attribution,
.leaflet-control-attribution a {
  color: revert;
}

/* BUG-049: モバイル mobile タップ領域 44px (WCAG SC 2.5.5 推奨) */
.leaflet-control-zoom a {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leaflet-control-attribution {
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* 補助テキストの muted 色は --color-text-muted 変数スコープで自動継承 */

/* 塗りつぶし時の FAQ アイコン */
.lp-section[data-fill="solid"] .faq__summary::before,
.lp-section[data-fill="solid"] .faq__details-answer::before {
  color: rgba(255, 255, 255, 0.7);
}

.lp-section[data-fill="solid"] .faq__summary::after {
  color: rgba(255, 255, 255, 0.6);
}

/* 塗りつぶし時のボーダー — --color-border 変数スコープで自動継承 */
.lp-section[data-fill="solid"] .faq__details,
.lp-section[data-fill="solid"] .faq__item,
.lp-section[data-fill="solid"] .offer__sub-menu-item,
.lp-section[data-fill="solid"] .problem__item {
  border-color: var(--color-border);
}

/* 塗りつぶし/ダーク時のフォーム入力欄 (BUG-098): 半透明白 + 白文字は下地 primary が
   透けて入力値が読めない (r=3.81)。入力欄は値の可読性最優先のため不透明白 + 暗い文字に。 */
.lp-section[data-fill="solid"] .cta__form-input,
.lp-section[data-fill="dark"] .cta__form-input {
  background: #ffffff;
  border-color: rgba(20, 22, 28, 0.15);
  color: #1a1a1a;
}

.lp-section[data-fill="solid"] .cta__form-input::placeholder,
.lp-section[data-fill="dark"] .cta__form-input::placeholder {
  color: #6b7280;
}

.lp-section[data-fill="solid"] .cta__form {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* 塗りつぶし/ダーク背景内の白カード: 不透明白 + 本文色リセット (BUG-098)
   ----------------------------------------------------------------------
   §18a が section に `--color-text:#fff` / `--color-text-muted:rgba(255,255,255,.7)`
   を CSS 変数スコープ継承させるため、白背景のカード/テーブル内のテキストまで白化し
   「白背景 × 白文字 (ratio=1、完全に読めない)」が全 block で発生していた
   (品質点検 1C で 186 件検出)。
   従来は半透明ガラス風 `rgba(255,255,255,.12)` で逃げていたが、下地 primary が透け
   結局「明るい背景 × 白文字」で読めない。user 判断 (2026-06-02) で「不透明白カード +
   黒文字」に統一する。カード背景を実色の白に固定し、カード内で --color-text 系を
   本文色へリセットして継承を断ち切る (token 分離、[[feedback_token_separation_for_cta]])。
   原則 B: クラス/構造/PC端点不変、color-token のみ変更。 */
.lp-section[data-fill="solid"] .agitation__stat,
.lp-section[data-fill="solid"] .solution__card,
.lp-section[data-fill="solid"] .solution__item,
.lp-section[data-fill="solid"] .solution__grid-item,
.lp-section[data-fill="solid"] .proof__voice,
.lp-section[data-fill="solid"] .proof__voice-bubble,
.lp-section[data-fill="solid"] .offer__menu-item,
.lp-section[data-fill="solid"] .offer__plan,
.lp-section[data-fill="solid"] .offer__plan-card,
.lp-section[data-fill="solid"] .narrowing__seasonal-item,
.lp-section[data-fill="solid"] .postscript__company,
.lp-section[data-fill="solid"] .problem__card,
.lp-section[data-fill="solid"] .staff__card,
.lp-section[data-fill="solid"] .menu__item,
.lp-section[data-fill="solid"] .menu__item--highlight,
.lp-section[data-fill="solid"] .company__table,
.lp-section[data-fill="solid"] .comparison__table,
.lp-section[data-fill="solid"] .feature-grid__item,
.lp-section[data-fill="solid"] .gallery__item,
.lp-section[data-fill="dark"] .agitation__stat,
.lp-section[data-fill="dark"] .solution__card,
.lp-section[data-fill="dark"] .solution__item,
.lp-section[data-fill="dark"] .solution__grid-item,
.lp-section[data-fill="dark"] .proof__voice,
.lp-section[data-fill="dark"] .proof__voice-bubble,
.lp-section[data-fill="dark"] .offer__menu-item,
.lp-section[data-fill="dark"] .offer__plan,
.lp-section[data-fill="dark"] .offer__plan-card,
.lp-section[data-fill="dark"] .narrowing__seasonal-item,
.lp-section[data-fill="dark"] .postscript__company,
.lp-section[data-fill="dark"] .problem__card,
.lp-section[data-fill="dark"] .staff__card,
.lp-section[data-fill="dark"] .menu__item,
.lp-section[data-fill="dark"] .menu__item--highlight,
.lp-section[data-fill="dark"] .company__table,
.lp-section[data-fill="dark"] .comparison__table,
.lp-section[data-fill="dark"] .feature-grid__item {
  /* カード背景を不透明白に固定 (ガラス風を廃止)。§18a / [data-bg] が --color-bg /
     --color-surface を dark で暗色・theme で半透明白に上書きするため、実色 #ffffff を直書き。 */
  background: #ffffff;
  /* カード内テキストは section の白系 token 継承を断ち、本文色 (tokens.css base) へ戻す。
     --color-bg / --color-surface も白系へ戻し、子の card/table header (var(--color-surface)
     や var(--color-bg) を背景に使う要素) が暗色を継承しないようにする。 */
  --color-text: #1a1a1a;
  --color-text-muted: #5f5f5f;
  --color-border: rgba(20, 22, 28, 0.1);
  --color-bg: #ffffff;
  --color-surface: #fafafa;
  color: var(--color-text);
  border-color: var(--color-border);
  backdrop-filter: none;
}

/* BUG-098: 上記カードリセットで --color-bg を白に戻した副作用で、白カード内の CTA ボタンが
   solid ボタンルール (3258: `background: var(--gradient-cta, var(--color-bg))`) のフォール
   バックで白背景になり、--color-cta-fg(白)と合わさって白ボタン×白文字になる。白カード内の
   ボタンは通常の primary グラデ + 白文字に戻す (詳細度 0,4,0 で 3258 の 0,3,0 に勝つ)。 */
.lp-section[data-fill="solid"] .offer__plan-card .cta__button,
.lp-section[data-fill="solid"] .offer__menu-item .cta__button,
.lp-section[data-fill="dark"] .offer__plan-card .cta__button,
.lp-section[data-fill="dark"] .offer__menu-item .cta__button {
  background-color: var(--color-primary);
  background-image: var(
    --gradient-primary,
    linear-gradient(135deg, var(--color-accent), var(--color-primary))
  );
  color: var(--color-primary-fg, #ffffff);
}

/* 写真付きカードは solid 時もパディングなし
   BUG-011: 上記 .solution--col-3 .solution__card.solution__card--photo (0,3,0) で
   base/solid 共通化済み。本ルールは互換のため残置。 */
.lp-section[data-fill="solid"] .solution__card--photo {
  padding: 0;
}

/* BUG-002: data-fill="solid" の背景色が `.lp-page[data-tone="X"] .lp-section--alt`
   ルール (0,2,1) に競り負けて適用されない問題の修正。
   Problem.render.tsx は `lp-section--alt` を hardcode しているため、tone 別の
   alt 背景指定 (例: `.lp-page[data-tone="clean"] .lp-section--alt { background-color: #f8f9fa; }`)
   に上書きされて solid セクションが本来の primary 色にならず、結果として本文
   テキストが白ベースで surface 背景に乗ってコントラスト崩壊していた。
   `.lp-page` を先頭に挟んで詳細度 (0,3,0) にすることで tone 別 alt より優先する。
   ※ background-image (グラデーション) ルール群も同じ理由で specificity を持ち上げる。 */
.lp-page .lp-section[data-fill="solid"],
.lp-page .hero[data-fill="solid"] {
  background-color: var(--color-primary);
}

/* BUG-002: solid セクション内の Problem checklist チェック円が
   セクション背景 (= primary) と同色で消える問題の修正。
   solid 時はチェック円を白系に反転し、アイコン色は primary に戻す。
   ※ Problem section は `.problem--checklist[data-fill="solid"]` と同一要素のため
     descendant combinator (`.lp-section[data-fill="solid"] .problem--checklist`) は
     マッチしない。compound selector にする必要がある。 */
.problem--checklist[data-fill="solid"] .problem__check {
  background-color: var(--color-primary-fg);
  color: var(--color-primary);
}

/* BUG-002: solid セクション内の Problem grid-4 アイコン色 (var(--color-primary)) は
   solid 背景 (= primary) と同化して消える。solid 時は白系に反転する。 */
.problem--grid-4[data-fill="solid"] .problem__icon {
  color: var(--color-primary-fg);
}

/* agitation stat の色は --color-text / --color-text-muted で自動継承 */

/* 塗りつぶし時: 補色ボタンのシャインは維持（白ボタンHeroのみ非表示） */
.hero[data-fill="solid"] .hero__cta::before {
  display: none;
}

/* ============================================================
   §18b プライマリカラー派生の統一感
   --color-primary-light: 薄い版（セクション背景）
   --color-primary-muted: 中間の薄さ（カード背景、バッジ背景）
   ============================================================ */

/* プライマリ薄背景セクション */
.lp-section--primary-light {
  background-color: var(--color-primary-light);
}

/* Problem カードの背景にプライマリ薄色 */
.problem--grid-4 .problem__card {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-muted, var(--color-border));
}

/* Problem チェックリストのアイコン背景 */
.problem--checklist .problem__check {
  background-color: var(--color-primary);
}

/* Solution カードのアイコン背景 */
.solution--col-3 .solution__card-icon,
.solution--stacked .solution__item-icon {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

/* CTA ステップ番号 */
.cta--steps .cta__step-number {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

/* Narrowing チェックマーク */
.narrowing--ribbon .narrowing__check::before {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

/* Timeline マーカー */
.narrowing--timeline .narrowing__step-marker {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

/* Offer 推奨プランのボーダーとバッジ */
.offer--table-3 .offer__menu-item--photo[style*="border-color"] {
  border-color: var(--color-primary);
}

/* 吹き出しの星をプライマリ薄色に */
.proof--bubble .proof__voice-bubble {
  background: var(--color-primary-light);
}

.proof--bubble .proof__voice-bubble::before {
  border-right-color: var(--color-primary-light);
}

/* Offer ボーナスの背景 */
.offer--single .offer__bonus {
  background-color: var(--color-primary-light);
}

/* ============================================================
   §23 拡張ブロック — FAQ（独立セクション版）
   CTA 内 FAQ とは別の、独立セクションとしての FAQ。
   内部のスタイルは既存 .faq__details 等を再利用。
   ============================================================ */
/* faq-section の max-width はコンテナ内の div に適用。section 自体は全幅 */
.lp-section .faq-section {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.faq-section .faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* two-column バリアント */
@media (min-width: 768px) {
  .faq-section--two-column .faq__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-6);
  }
}

/* open バリアント: details を常時開く */
.faq-section--open .faq__details {
  pointer-events: none;
}
.faq-section--open .faq__details[open] .faq__summary::after {
  transform: none;
}
.faq-section--open .faq__summary::after {
  display: none;
}

/* ============================================================
   §24 拡張ブロック — Flow（利用の流れ）
   ============================================================ */
.flow__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

/* 縦線（コネクター） */
.flow__list::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: var(--color-primary-muted, #e5e7eb);
}

.flow__item {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  position: relative;
  z-index: 1;
}

.flow__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-primary, var(--color-primary));
  color: var(--color-primary-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-lg);
  box-shadow: 0 2px 8px rgba(20, 22, 28, 0.1);
}

.flow__content {
  flex: 1;
  padding-top: 8px;
}

.flow__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  margin-bottom: var(--space-1);
}

.flow__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #6b7280);
  line-height: 1.7;
}

.flow__image {
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-lg);
  margin-top: var(--space-3);
}

/* horizontal バリアント */
@media (min-width: 768px) {
  .flow--horizontal .flow__list {
    flex-direction: row;
    max-width: 100%;
    gap: var(--space-2);
  }

  .flow--horizontal .flow__list::before {
    /* 横線に変更 */
    left: 56px;
    right: 56px;
    top: 24px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .flow--horizontal .flow__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: var(--space-3);
  }
}

/* 矢印コネクター（horizontal） */
.flow--horizontal .flow__item:not(:last-child)::after {
  display: none;
}

@media (min-width: 768px) {
  .flow--horizontal .flow__item:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    right: -16px;
    top: 20px;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-primary-muted, #e5e7eb);
    border-right: 2px solid var(--color-primary-muted, #e5e7eb);
    transform: rotate(45deg);
  }
}

/* icon-steps バリアント */
.flow--icon-steps .flow__number {
  background: var(--color-primary-light, #f0f0ff);
  color: var(--color-primary, #2563eb);
  font-size: 0;
}
.flow--icon-steps .flow__number .lp-icon {
  width: 24px;
  height: 24px;
}

/* data-fill="solid" 対応 — テキスト色は CSS 変数スコープで自動継承 */
.lp-section[data-fill="solid"] .flow__list::before {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   §25 拡張ブロック — Staff（スタッフ紹介）
   ============================================================ */
.staff__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .staff__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .staff__grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.staff__card {
  text-align: center;
  padding: var(--space-6);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 4px rgba(20, 22, 28, 0.04),
    0 4px 16px rgba(20, 22, 28, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.staff__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(20, 22, 28, 0.08);
}

.staff__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-4);
  border: 3px solid var(--color-primary-light, #f0f0ff);
}

/* BL-BLOCK-STAFF-PLACEHOLDER: 写真未設定時の neutral placeholder.
   Lucide `User` アイコン風シルエット (CSS gradient で描画、SVG/img なしで軽量).
   背景は --color-surface-muted ベース、輪郭は staff__photo と同じ border を継承. */
.staff__photo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(60, 60, 80, 0.42) 0,
      rgba(60, 60, 80, 0.42) 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 50% 105%,
      rgba(60, 60, 80, 0.42) 0,
      rgba(60, 60, 80, 0.42) 38%,
      transparent 39%
    ),
    var(--color-surface-muted, #ececf0);
}

.staff__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  margin-bottom: var(--space-1);
}

.staff__title {
  font-size: var(--fs-sm);
  color: var(--color-primary, #2563eb);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.staff__experience {
  /* 2026-04-23: sm (14px) → base (16px) 引き上げ。 */
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.staff__quals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.staff__qual {
  /* 2026-04-23: 11px → --fs-xs (12px) 引き上げ。 */
  font-size: var(--fs-xs);
  padding: 2px 8px;
  background: var(--color-primary-light, #f0f0ff);
  /* primary を淡いbg上で読ませるため、primary を 20% 黒と混ぜてコントラスト確保 (WCAG AA)。 */
  color: color-mix(in srgb, var(--color-primary, #2563eb) 80%, black);
  border-radius: var(--radius-full, 9999px);
  font-weight: 500;
}

.staff__message {
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #6b7280);
  line-height: 1.7;
  font-style: italic;
}

.staff__experience {
  /* 2026-04-23: 12px → --fs-sm (14px) 引き上げ。 */
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #9ca3af);
  margin-top: var(--space-2);
}

/* featured バリアント: 1名大きく + 他小さく */
.staff--featured .staff__grid {
  grid-template-columns: 1fr;
}

.staff--featured .staff__card:first-child {
  max-width: 480px;
  margin: 0 auto;
}

.staff--featured .staff__card:first-child .staff__photo {
  width: 160px;
  height: 160px;
}

@media (min-width: 640px) {
  .staff--featured .staff__grid {
    grid-template-columns: 1fr;
  }
  .staff--featured .staff__card:first-child {
    max-width: 480px;
  }
  /* 2番目以降を横並び */
  .staff--featured .staff__sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
  }
}

/* simple バリアント: 写真+名前のみ横並び */
.staff--simple .staff__grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}

.staff--simple .staff__card {
  padding: var(--space-4);
  box-shadow: none;
  background: transparent;
}

.staff--simple .staff__photo {
  width: 96px;
  height: 96px;
}

/* BUG-098: 旧・半透明ガラス版は上の白カードリセット (3406) を後勝ちで打ち消し
   primary 地に primary 文字 (staff__title 等) が乗って読めなかった。card は白リセットに
   従わせ (background 指定を消す)、qual バッジのみ薄い primary 系背景にする。 */
.lp-section[data-fill="solid"] .staff__qual,
.lp-section[data-fill="dark"] .staff__qual {
  background: var(--color-primary-light, #f0f4f8);
  color: var(--color-primary);
}

/* ============================================================
   §26 拡張ブロック — Menu（詳細メニュー・料金表）
   Offer とは別の「比較検討」用。特別オファーではなく全体像。
   ============================================================ */
.menu__categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.menu__category-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary, #2563eb);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary-light, #f0f0ff);
  margin-bottom: var(--space-4);
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.menu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.menu__item:last-child {
  border-bottom: none;
}

.menu__item-info {
  flex: 1;
}

.menu__item-name {
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  font-size: var(--fs-base);
}

.menu__item-duration {
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #9ca3af);
  margin-left: var(--space-2);
}

.menu__item-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #6b7280);
  margin-top: 2px;
  line-height: 1.6;
}

.menu__item-price {
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  font-size: var(--fs-lg);
  white-space: nowrap;
}

.menu__item-badge {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--color-primary);
  color: var(--color-primary-fg, #fff);
  border-radius: var(--radius-full, 9999px);
  font-weight: 700;
  margin-left: var(--space-2);
  white-space: nowrap;
}

.menu__item--highlight {
  background: var(--color-primary-light, #f0f0ff);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-1) calc(-1 * var(--space-4));
  border-bottom: none;
}

.menu__footnote {
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #9ca3af);
  margin-top: var(--space-4);
  text-align: center;
}

/* cards バリアント（写真付きカードグリッド） */
.menu--cards .menu__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .menu--cards .menu__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .menu--cards .menu__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.menu--cards .menu__item {
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border-bottom: none;
  padding: 0;
  box-shadow:
    0 1px 4px rgba(20, 22, 28, 0.04),
    0 4px 16px rgba(20, 22, 28, 0.04);
}

.menu__item-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.menu--cards .menu__item-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.menu--cards .menu__item-info {
  flex: none;
}

.menu--cards .menu__item-price {
  color: var(--color-primary);
}

/* data-fill="solid" 対応 — テキスト色は CSS 変数スコープで自動継承 */
.lp-section[data-fill="solid"] .menu__category-name {
  border-bottom-color: var(--color-border);
}
/* BUG-098: highlight カードは白リセット (3406) に従わせるため background 上書きを消す
   (旧・半透明 rgba は primary 地で灰色文字が読めなかった)。border のみ残す。 */
.lp-section[data-fill="solid"] .menu__item {
  border-bottom-color: var(--color-border);
}

/* ============================================================
   §27 拡張ブロック — Access（アクセス・地図）
   CTA から地図+住所を分離した独立セクション。
   ============================================================ */
.access__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .access--map-left .access__layout {
    flex-direction: row;
  }
  .access--map-left .access__map-wrap {
    flex: 1;
    min-width: 0;
  }
  .access--map-left .access__info {
    flex: 0 0 320px;
  }
}

.access__map {
  width: 100%;
  /* BL-LEAFLETMAP-HEIGHT-VAR: LeafletMap が `--map-height` を inline style で注入する.
     未注入時はモバイル 280px / PC 360px の旧来挙動を保持 (fallback). */
  height: var(--map-height, 280px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  z-index: 1;
}

@media (min-width: 768px) {
  .access__map {
    height: var(--map-height, 360px);
  }
}

/* ------------------------------------------------------------------
   公開 LP 静的地図 (BUG-088): JS ゼロで OSM タイル画像 + CSS ピン + リンク.
   editor は上記 .access__map (LeafletMap) を使い、公開出力のみこちらを使う.
   ------------------------------------------------------------------ */
.access__map-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.access__map-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 中央ピン: タイル中心 = 店舗位置. 画像の中央に CSS のみで描画 (滴形). */
.access__map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-primary, #2563eb);
  border: 2px solid var(--color-primary-fg, #ffffff);
  /* 滴の先端を下に向け、先端が店舗位置を指すよう上方にオフセット. */
  transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 2px 6px rgba(20, 22, 28, 0.3);
}

/* UX-P32: 電話番号 tel: リンク (スマホでワンタップ発信). */
.access__phone-link {
  color: var(--color-primary, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: inherit;
}

.access__phone-link:hover {
  opacity: 0.85;
}

/* UX-P33: 地図リンク — フルワイドボタン化 (スマホ最優先・48px タップ高). */
.access__map-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary-fg, #ffffff);
  background: var(--color-primary, #2563eb);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-sizing: border-box;
}

.access__map-link:hover {
  opacity: 0.9;
}

.access__map-caption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #6b7280);
  line-height: 1.6;
}

/* data-fill="solid" 上ではリンクを反転 (背景が濃色のため). */
.lp-section[data-fill="solid"] .access__map-link {
  color: var(--color-text, #1a1a1a);
  background: rgba(255, 255, 255, 0.92);
}

.access__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.access__info-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.access__info-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary, #2563eb);
  margin-top: 2px;
}

.access__info-content {
  flex: 1;
}

.access__info-label {
  /* 2026-04-23: 12px → --fs-sm (14px) 引き上げ。 */
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.access__info-value {
  font-size: var(--fs-base);
  color: var(--color-text, #1a1a1a);
  line-height: 1.6;
}

.access__hours-table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: collapse;
}

.access__hours-table th {
  text-align: left;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text, #1a1a1a);
}

.access__hours-table td {
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted, #6b7280);
}

.access__hours-table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

.access__directions {
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #6b7280);
  line-height: 1.7;
  padding: var(--space-3);
  background: var(--color-primary-light, #f0f0ff);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary, #2563eb);
}

/* BUG-098: access__directions は背景が薄い primary-light (明るい) なので、
   テキストは solid/dark でも常に暗い本文色に固定する (section の白文字継承を断つ)。
   旧 solid ルールは背景を半透明白にしていたが dark 版が無く、白背景に白文字で読めなかった。 */
.lp-section[data-fill="solid"] .access__directions,
.lp-section[data-fill="dark"] .access__directions {
  background: var(--color-primary-light, #f0f4f8);
  border-left-color: var(--color-primary, #2563eb);
  --color-text-muted: #5f5f5f;
  color: var(--color-text-muted);
}

/* ============================================================
   §28 拡張ブロック — Company（会社概要）
   ============================================================ */
.company__table {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.company__row {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.company__row:last-child {
  border-bottom: none;
}

.company__label {
  flex: 0 0 140px;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text, #1a1a1a);
  background: rgba(0, 0, 0, 0.02);
}

.company__value {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted, #4b5563);
  line-height: 1.6;
}

@media (max-width: 639px) {
  .company__row {
    flex-direction: column;
  }
  .company__label {
    flex: none;
    padding: var(--space-2) var(--space-4) 0;
    background: transparent;
  }
  .company__value {
    padding: var(--space-1) var(--space-4) var(--space-3);
  }
}

/* card バリアント */
.company--card .company__table {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 1px 4px rgba(20, 22, 28, 0.04),
    0 4px 16px rgba(20, 22, 28, 0.04);
}

/* data-fill="solid" 対応 — テキスト色は CSS 変数スコープで自動継承 */
.lp-section[data-fill="solid"] .company__label {
  background: rgba(255, 255, 255, 0.05);
}
.lp-section[data-fill="solid"] .company__row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   §29 拡張ブロック — Gallery（写真ギャラリー）
   LP では 3-6 枚厳選。大量ギャラリーは HP 向き。
   ============================================================ */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery__item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery__item:hover .gallery__image {
  transform: scale(1.05);
}

.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  /* BUG-057: mobile (アスペクト 4:3 + キャプション長文) で画像明部に被って白文字が読みづらかったため gradient を強化 */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    transparent 100%
  );
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
  font-weight: 500;
  /* キャプションが画像の上半分まで侵食しないようにフォントサイズ・行数を抑制. */
  line-height: 1.4;
}

/* hero-grid バリアント: 1枚大+2-4枚小 */
.gallery--hero-grid .gallery__grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

@media (min-width: 640px) {
  .gallery--hero-grid .gallery__grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .gallery--hero-grid .gallery__item:first-child {
    grid-row: 1 / 3;
    aspect-ratio: auto;
  }
}

/* masonry バリアント（CSS-only近似） */
.gallery--masonry .gallery__grid {
  columns: 2;
  column-gap: var(--space-3);
  display: block;
}

@media (min-width: 640px) {
  .gallery--masonry .gallery__grid {
    columns: 3;
  }
}

.gallery--masonry .gallery__item {
  break-inside: avoid;
  margin-bottom: var(--space-3);
  aspect-ratio: auto;
}

/* ギャラリーアイテムのクリック可能表示 */
.gallery__item[role="button"] {
  cursor: pointer;
}

.gallery__item[role="button"]::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}

.gallery__item[role="button"]:hover::after {
  opacity: 1;
}

.gallery__item[role="button"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- before-after variant (ペアごとに Before/After をサイドバイサイド、スマホは縦) ---
   DOM: section.gallery--before-after > .lp-container > ul.gallery__ba-list
          > li.gallery__ba-pair > div.gallery__ba-images > figure.gallery__ba-item
   pairs[] 複数ペア対応 (2026-05-19 Phase F-4 で再統合)。各ペアを縦に積み、
   ペア内は Before/After を 2 カラム grid (スマホ 1 カラム)。 */
.gallery__ba-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.gallery__ba-pair {
  margin: 0;
}
.gallery__ba-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.gallery__ba-item {
  margin: 0;
  text-align: center;
}
.gallery__ba-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.gallery__ba-caption {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}
.gallery__ba-pair-caption {
  margin-top: var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
}
@media (max-width: 480px) {
  .gallery__ba-images {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   §30 ギャラリーライトボックス
   ============================================================ */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
  cursor: zoom-out;
}

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.gallery-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 48px rgba(20, 22, 28, 0.5);
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.gallery-lightbox.is-open .gallery-lightbox__img {
  transform: scale(1);
}

.gallery-lightbox__caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
}

.gallery-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-inverse);
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.15s;
}

.gallery-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ─── 料金プランカード（Offer §6）─── */

.offer__plan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
}

.offer__plan-card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  position: relative;
}

.offer__plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-primary-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 16px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.offer__menu-name--featured {
  margin-top: var(--space-4);
}

.cta__button--sm {
  font-size: var(--fs-sm);
  min-height: 44px;
  padding: 0 var(--space-6);
  margin-top: var(--space-4);
}

/* --- CTA ユーティリティ --- */
.cta__center {
  text-align: center;
}

.cta__center--spaced {
  margin-top: var(--space-8);
}

/* ============================================================
   §29 リスト reset — ul/ol デフォルトマーカー解除 (M-A3/M-A4 ブロック群)
   .problem--checklist .problem__list L166 パターンに合わせる
   ============================================================ */
.staff__quals,
.menu__list,
.faq__list,
.flow__list,
.narrowing__checks,
.narrowing__steps {
  list-style: none;
  padding: 0;
  /* margin-block: 0; で縦余白のみ潰し margin-inline は個別 rule (max-width + auto centering) を保護.
     BUG-010 (Flow / FAQ コンテンツ左寄り) 根本原因: margin: 0 が先行 rule の margin: 0 auto を打ち消していた. */
  margin-block: 0;
  margin-inline: auto;
}

/* Proof highlight の数字に付く単位文字 (+/% 等) */
.proof__number-suffix {
  font-size: 0.5em;
}

/* ============================================================
   §30 Lightbox overlay (Gallery)
   編集側 React + 公開 LP vanilla 両対応。自作 dialog (~2KB)
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--space-4);
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox__figure {
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.lightbox__image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.lightbox__caption {
  color: #fff;
  font-size: var(--fs-base);
  text-align: center;
  padding: var(--space-2) var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__close {
    transition: none;
  }
}

/* ============================================================
   §Z Back-to-top ボタン (lp-public.js が動的挿入)
   ============================================================ */
.lp-back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-fg);
  font-size: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 22, 28, 0.18);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  z-index: 30;
}

.lp-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lp-back-to-top:hover {
  filter: brightness(1.05);
}

.lp-back-to-top:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lp-back-to-top {
    transition: none;
  }
}

/* ============================================================
   §Y lp-fade-in (lp-public.js が is-visible を付与)
   ============================================================ */
.lp-fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 480ms ease-out,
    transform 480ms ease-out;
  will-change: opacity, transform;
}

.lp-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .lp-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.feature-grid .feature-grid__subheading,
.feature-grid .feature-grid__label,
.feature-grid .feature-grid__benefit {
  font-family: var(--lp-block-font, inherit);
}

/* ============================================================
   UX-R21 公開LP スマホ追従購入CTAバー (sticky bottom CTA)
   spec: docs/superpowers/specs/2026-06-05-ux-r21-sticky-purchase-cta-bar-design.md
   - Offer に ctaUrl があれば renderer が出力 (vanilla JS で表示制御)
   - スマホのみ表示 (≤768px)、PC は通常CTAで十分
   - 表示/非表示は JS が hidden 属性を付け外し
   ============================================================ */
.lp-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--space-3) var(--space-4);
  /* iOS ホームバー (safe-area) 回避 */
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-bg);
  box-shadow: 0 -2px 12px rgba(20, 22, 28, 0.12);
  transition: transform var(--duration-base) var(--ease-out);
}

/* 初期 / JS 無効環境では非表示 (邪魔しない) */
.lp-sticky-cta[hidden] {
  display: none;
}

.lp-sticky-cta__button {
  width: 100%;
  min-height: 48px;
}

/* スマホのみ表示: PC (769px+) では常に非表示 */
@media (min-width: 769px) {
  .lp-sticky-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-sticky-cta {
    transition: none;
  }
}

/* ============================================================
   BL-UX-AUDIT A07: ボタン要素 (cta__button) per-block override.
   spec: BACKLOG.md BL-UX-AUDIT-2026-06-06 A07 (2026-06-06).
   全 modifier は inherit 未指定時のみ class が付与されるため、
   既存 LP (全軸 inherit) には class が一切付かず後方互換 (原則 B 準拠).
   各 modifier は単一 class 詳細度 (0,1,0) を保ち、tone 別 rule
   (.lp-page[data-tone="…"] .cta__button = 0,1,1) の上書きを許容する
   設計だが、形状/サイズ/フォントは詳細度上 tone rule より弱くないため
   `.cta__button.cta__button--shape-…` の連結セレクタ (詳細度 0,2,0) で
   tone rule を確実に override する.
   ============================================================ */

/* shape (border-radius). tone rule に勝つため連結セレクタで強化. */
.cta__button.cta__button--shape-square {
  border-radius: 0;
}
.cta__button.cta__button--shape-rounded {
  border-radius: var(--radius-md, 8px);
}
.cta__button.cta__button--shape-pill {
  border-radius: 9999px;
}

/* variant (solid / outline).
   outline は既存 .cta__button.cta__button--outline と同等の挙動。
   solid は tone 既定が gradient 塗りの場合があるため background-image を抑止し
   --color-cta (key 色) を確実に塗る. */
.cta__button.cta__button--variant-solid {
  background-color: var(--color-cta, var(--color-primary));
  background-image: none;
  color: var(--color-cta-fg, var(--color-primary-fg));
  border: none;
}
.cta__button.cta__button--variant-outline {
  background-color: transparent;
  background-image: none;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  box-shadow: none;
  text-shadow: none;
}

/* size (padding + font-size). min-height は base rule の 52px を保持. */
.cta__button.cta__button--size-sm {
  min-height: 40px;
  padding: 0 var(--space-5, 16px);
  font-size: var(--fs-sm, 0.875rem);
}
.cta__button.cta__button--size-md {
  min-height: 48px;
  padding: 0 var(--space-6, 24px);
  font-size: var(--fs-base, 1rem);
}
.cta__button.cta__button--size-lg {
  min-height: 56px;
  padding: 0 var(--space-8, 32px);
  font-size: var(--fs-lg, 1.125rem);
}
.cta__button.cta__button--size-xl {
  min-height: 64px;
  padding: 0 var(--space-10, 40px);
  font-size: var(--fs-xl, 1.25rem);
}

/* font (font-family). */
.cta__button.cta__button--font-sans {
  font-family: var(--font-sans);
}
.cta__button.cta__button--font-serif {
  font-family: var(--font-serif);
}

/* color (text color). auto はテイスト既定 (既存挙動) を残すため出力なし. */
.cta__button.cta__button--color-auto {
  /* テイスト既定を継承 (出力なし) */
}
.cta__button.cta__button--color-primary {
  color: var(--color-primary);
}
.cta__button.cta__button--color-accent {
  color: var(--color-accent);
}
.cta__button.cta__button--color-ink-0 {
  color: var(--ink-0);
}