/* ============================================================
   「100年の自分史」プレミアム・エディトリアル・スタイルシート
   KHZ ART — Web Design System / 型B (静寂と非対称のラグジュアリー)
   ============================================================ */

:root {
  /* Color System — Warm Paper, Ink, & Restrained Bronze */
  --bg: #F7F3EC;          /* 温かみのある最高級和紙のようなアイボリー */
  --bg-paper: #ECE4D8;    /* 階層を分けるための、少し深みのあるトープグレー */
  --bg-card: #D8CAB7;     /* 要素を際立たせるペーパーゴールド */
  --bg-dark: #12100E;     /* 暗転セクション用：深い墨色 */
  
  --fg: #171512;          /* 炭黒（純黒#000はエディトリアルにおいて強すぎるため不採用） */
  --fg-muted: #4A4239;    /* 読みやすく上品な本文用トープ */
  --fg-weak: #6E6456;     /* ラベルや補助テキスト用：可読性のため濃いめのゴールドグレー */
  --fg-light: #FAF9F6;    /* 暗転時の白文字 */
  --fg-light-muted: #D3CDC2;
  
  --border: rgba(28, 27, 25, 0.06); /* 極薄のヘアライン罫 */
  --border-dark: rgba(250, 249, 246, 0.06);
  --accent: #8C7A62;      /* 静謐なブロンズ（鈍い金）唯一のアクセント */
  --accent-hover: #6D5E4C;
  --accent-light: rgba(140, 122, 98, 0.05);
  --error-color: #BD6451; /* 優美さを損なわない深めの朱赤（警告用） */

  /* Typography Core (KHZ standard) */
  --serif: 'Cormorant Garamond', 'Noto Serif JP', Georgia, 'Hiragino Mincho ProN', serif;
  --sans: 'Outfit', 'Avenir Next', 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif;

  /* Spacing (Negative Space is the main character) */
  --px: clamp(24px, 8vw, 120px);
  --py: clamp(128px, 17vw, 260px); /* 呼吸するための広大なセクション間余白 */
  --max-w: 1180px;        /* 大胆な構成を受け止めるため少し広げる */
  --nav-h: 96px;

  /* Motion Signature */
  --ease-cinema: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h); /* 固定ナビ分だけアンカー着地位置を下げ、見出しが隠れないように */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--bg);
  overflow-x: clip; /* 横揺れ(横スクロール)を根本封止。bodyだけでは不十分でhtml側の横パンが残るため両方に付与 */
  max-width: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 2.05; /* Caetlaの作法：白地はさらに行間を広げて空気を通す */
  font-size: clamp(16px, 1.25vw, 18px);
  letter-spacing: 0.04em;
  /* Cormorant Garamond のオールドスタイル数字（1が背低・0が小文字＝「100」がroo に見える）を、
     等高で揃うライニング数字に統一。エレガントさは保ちつつ数字を正しく見せる。 */
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
  transition: background 0.8s var(--ease-cinema), color 0.8s var(--ease-cinema);
  overflow-x: clip; /* hiddenより堅牢（iOSの横パン残りを封止） */
  max-width: 100%;
}

body::selection {
  background: var(--accent);
  color: var(--bg);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: grayscale(12%) contrast(94%) brightness(96%); /* 写真のコントラストを柔らかく文学的に */
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s var(--ease-cinema), opacity 0.4s var(--ease-cinema);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 5px;
}

/* Typography elements */
.serif {
  font-family: var(--serif);
}

.display-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--fg);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.section-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--accent);
  display: block;
  margin-bottom: 2.5rem;
}

.lead-text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  line-height: 1.8;
  color: var(--fg);
  font-weight: 300;
  letter-spacing: 0.06em;
}

p {
  color: var(--fg-muted);
  max-width: 38em; /* 1行が長くなりすぎないように制御（文学的リーダビリティ） */
}

/* Structure & Grid */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

section {
  padding-top: var(--py);
  padding-bottom: var(--py);
  position: relative;
}

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Navigation */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--px);
  border-bottom: 1px solid transparent;
  transition: all 0.5s var(--ease-cinema);
}

.header-nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
  height: 75px;
}

.nav-logo {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: rgba(250, 249, 246, 0.98);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); /* 暗いヒーロー上でロゴが沈まないよう軽い保護影 */
}

/* スクロール後は紙地＝濃色ロゴに切替。影は不要なので消す */
.header-nav.is-scrolled .nav-logo,
.form-page-body .nav-logo {
  text-shadow: none;
}

.nav-links {
  display: flex;
  gap: 3rem;
}

.nav-links a {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: rgba(250, 249, 246, 0.82);
}

.nav-links a:hover {
  color: var(--accent);
}

.header-nav.is-scrolled .nav-logo {
  color: var(--fg);
}

.header-nav.is-scrolled .nav-links a {
  color: var(--fg);
  font-weight: 400;
}

/* フォームページはダークなヒーローが無いため、ナビを常に濃色＋薄い背景で可読にする
   （明るい背景に白文字で見えなくなる不具合を防止） */
.form-page-body .header-nav {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}

.form-page-body .nav-logo {
  color: var(--fg);
}

.form-page-body .nav-links a {
  color: var(--fg-muted);
}

.form-page-body .nav-links a:hover {
  color: var(--accent);
}

/* 改行制御ユーティリティ：PC専用/SP専用の <br> を各ブレークポイントで出し分ける
   （未定義だと全幅で改行が効き、意図しない位置で折り返してしまうため） */
@media (max-width: 768px) {
  .pc-only { display: none; }
}
@media (min-width: 769px) {
  .sp-only { display: none; }
}

/* ============================================================
   Mobile Navigation — refined hamburger + calm paper drawer
   （静かで上品、大声の色は使わない。LINEは緑にしない＝ブロンズ基調）
   ============================================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.nav-toggle-bar {
  display: block;
  width: 26px;
  height: 1px;
  background: rgba(250, 249, 246, 0.9); /* 暗いヒーロー上では明色 */
  transition: transform 0.4s var(--ease-cinema), opacity 0.3s var(--ease-cinema), background 0.4s var(--ease-cinema);
}

/* スクロール後・フォームページ・メニュー展開中は濃色バーで可読に */
.header-nav.is-scrolled .nav-toggle-bar,
.form-page-body .nav-toggle-bar,
body.menu-open .nav-toggle-bar {
  background: var(--fg);
}

/* 展開中はロゴも濃色に固定（紙地メニュー上で白文字が消えるのを防止） */
body.menu-open .nav-logo {
  color: var(--fg);
}

/* 展開中はバーが×に変形 */
body.menu-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
body.menu-open .nav-toggle-bar:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 995; /* ナビ(1000)より下＝トグル×は前面のまま操作可能 */
  background: var(--bg); /* 生成りの紙。静かで一貫した地色 */
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* モバイルのツールバー分を除いた実可視高に合わせ、下が隠れないように */
  padding: calc(var(--nav-h) + 0.25rem) 24px calc(1.75rem + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.5s var(--ease-cinema), transform 0.5s var(--ease-cinema), visibility 0s linear 0.5s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s var(--ease-cinema), transform 0.5s var(--ease-cinema), visibility 0s;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.3rem, 4vh, 2.3rem);
  width: 100%;
  max-width: 420px;
  margin: auto; /* 収まる時は上下中央、はみ出す時は上から自然にスクロール（上切れ防止） */
  text-align: center;
}

.mobile-menu-link {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15; /* 本文の広い行間(2.05)継承で縦に膨らむのを抑え、全項目を収める */
  letter-spacing: 0.16em;
  color: var(--fg);
  transition: color 0.4s var(--ease-cinema);
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
  color: var(--accent);
}

.mobile-menu-divider {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--border);
  margin: 0.15rem 0;
}

/* お申し込み：存在感は保ちつつ静かに（ブロンズ文字） */
.mobile-menu-apply {
  color: var(--accent);
  letter-spacing: 0.2em;
}

/* LINEで質問：柔らかな相談導線＝ブロンズの細枠チップ（緑は使わない・強すぎない） */
.mobile-menu-line {
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 1px;
  padding: 0.8rem 2.3rem;
  margin-top: 0.2rem;
  transition: color 0.4s var(--ease-cinema), background 0.4s var(--ease-cinema);
}

.mobile-menu-line:hover,
.mobile-menu-line:active {
  color: var(--fg-light);
  background: var(--accent);
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  body.menu-open {
    overflow: hidden; /* 展開中は背面スクロールをロック */
  }
}

/* デスクトップに戻したときはメニューを確実に閉じ状態へ（開いたままの取り残しを防ぐ） */
@media (min-width: 769px) {
  .mobile-menu {
    visibility: hidden !important;
    opacity: 0 !important;
  }
  body.menu-open {
    overflow: auto;
  }
}

/* Hero Section (Asymmetrical Overhaul) */
.hero-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 0;
  background-color: var(--bg-dark);
  overflow: hidden;
  color: var(--fg-light);
}

.hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 自然な光の侵入と文字へのグラデーションを制御する洗練されたマスク */
.hero-bg-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 16, 14, 0.92) 0%, rgba(18, 16, 14, 0.65) 36%, rgba(18, 16, 14, 0.12) 70%),
    linear-gradient(180deg, rgba(18, 16, 14, 0.68) 0%, rgba(18, 16, 14, 0.12) 46%, rgba(18, 16, 14, 0.82) 100%);
  z-index: 2;
}

@media (max-width: 900px) {
  /* SPは暗幕を軽くして沈みを解消。ただし本文が乗る下部は可読性のため暗さを残す */
  .hero-bg-media::after {
    background:
      /* 縦組みコピーの背後（中央上〜中央）を放射状に締めて白文字のコントラストを確保 */
      radial-gradient(115% 72% at 50% 40%, rgba(18,16,14,0.60) 0%, rgba(18,16,14,0.30) 55%, transparent 100%),
      /* 縦方向：上〜中は文字用にほどよく暗く、下部(本)は明るく残して主役を見せる */
      linear-gradient(180deg, rgba(18,16,14,0.34) 0%, rgba(18,16,14,0.30) 50%, rgba(18,16,14,0.12) 74%, rgba(18,16,14,0.40) 100%);
  }
  /* 画像自体が暗いので明度を引き上げ（粋なムードは維持） */
  .hero-image {
    filter: grayscale(4%) contrast(104%) brightness(108%) saturate(94%);
    opacity: 1;
  }
}

.hero-bg-media picture,
.hero-image {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-image {
  object-fit: cover;
  opacity: 0.92;
  filter: grayscale(6%) contrast(110%) brightness(84%) saturate(88%);
  transform: scale(1.04);
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(280px, 0.82fr) minmax(220px, 0.7fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: center;
  padding-top: var(--nav-h);
  padding-bottom: clamp(5rem, 9vw, 9rem);
}

.hero-text {
  max-width: 520px;
}

.hero-text p {
  color: rgba(250, 249, 246, 0.72);
}

.hero-section .lead-text {
  color: rgba(250, 249, 246, 0.92);
}

.hero-section .hero-text > div > a:not(.line-cta-btn) {
  color: rgba(250, 249, 246, 0.68) !important;
  border-bottom-color: rgba(250, 249, 246, 0.34) !important;
}

.hero-section .hero-text > div > a:not(.line-cta-btn):hover {
  color: var(--fg-light) !important;
  border-bottom-color: var(--accent) !important;
}

.hero-quiet-label {
  display: block;
  margin-bottom: 2.8rem;
  color: rgba(212, 196, 168, 0.78);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.hero-brand-name {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  letter-spacing: 0.25em;
  color: rgba(250, 249, 246, 0.84);
  margin-bottom: 2.5rem;
  display: inline-block;
  border-bottom: 1px solid rgba(250, 249, 246, 0.18);
  padding-bottom: 0.5rem;
}

/* Vertical Hero Copy (Iconic and Cinematic) */
.vertical-copy-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

/* デスクトップ：ヒーローの文字群を上寄せに（縦中央→上部）。縦コピーは行高いっぱいのまま中央維持 */
@media (min-width: 901px) {
  .hero-content {
    align-items: start;
    padding-top: calc(var(--nav-h) + clamp(4.5rem, 20vh, 16rem));
    transform: translateX(-2.5vw); /* ヒーロー全体（左テキスト＋右縦コピー）をまとめて少し左へ */
  }
  /* 縦コピーは左テキスト用のpadding-topに縛られず、ヒーロー全高の右側に独立配置して中央寄せ */
  .vertical-copy-container {
    position: absolute;
    top: var(--nav-h);
    bottom: clamp(2rem, 5vh, 4rem);
    right: var(--px);
    width: 42%;
    align-items: center;
  }
  /* 左テキスト群をコンパクトにして1画面に収める */
  .hero-quiet-label { margin-bottom: 1.6rem; }
  .hero-brand-name { margin-bottom: 1.4rem; }
  .hero-section .lead-text {
    font-size: clamp(1.15rem, 1.9vw, 1.55rem);
    line-height: 1.6 !important;
    margin-bottom: 1.4rem !important;
  }
  .hero-text > p {
    margin-bottom: 2rem !important;
  }
}

/* 縦組みコピーは2カラム構成：右列「一生を、」／左列「一冊に。」（右→左の縦書き順）
   1列あたり4文字なので高さが半分になり、全文がファーストビューに収まる */
.vertical-copy {
  display: flex;
  flex-direction: row-reverse;   /* 先頭「一生を、」を右列へ */
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(0.5rem, 1.6vw, 1.8rem);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: 0.22em;
  color: rgba(250, 249, 246, 0.95);
  text-shadow: 0 18px 70px rgba(0, 0, 0, 0.45);
  font-size: clamp(1.9rem, 6.6vw, 2.7rem); /* base=モバイル。デスクトップは下で拡大 */
}

.vertical-copy .vc-line {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
}

.vertical-copy .vc-line.accent {
  color: #C2A876; /* 縦組みアクセント：渋いゴールド */
}

/* デスクトップ：2カラム縦組みを大きく大胆に。2列を上下にずらして誌面的な余韻を出す */
@media (min-width: 901px) {
  .vertical-copy {
    gap: clamp(2rem, 4.5vw, 5rem);
    /* 10rem固定。ただし極端に低い画面でのはみ出しは高さ上限で保護 */
    font-size: min(10rem, 15vh);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.0;
    transform: translateY(-2vh);
  }
  /* 右高・左低の階段状オフセット（ずれ幅を強める） */
  .vertical-copy .vc-line:first-child {
    margin-top: -6vh;
  }
  .vertical-copy .vc-line.accent {
    margin-top: 7vh;
  }
}

@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
    padding-bottom: 3rem;
    align-content: start;
  }
  /* 縦組みコピーは横書き本文の「上」に、大きく・ずらして・中央に堂々と配置 */
  .vertical-copy-container {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    height: 100svh;
    box-sizing: border-box;
    padding-top: var(--nav-h);
    padding-bottom: 2vh;
    width: 100%;
    order: -1;
    margin-bottom: 2.5rem;
  }
  .vertical-copy {
    display: block;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    /* どの端末でも(100svh-ナビ)内に必ず収め中央に均等配置：高さ基準で自動縮小 */
    font-size: min(3.4rem, 7.2vh);
    letter-spacing: 0.14em;
    line-height: 1.05;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 26px rgba(0, 0, 0, 0.7);
  }
  /* 一列縦組み：2spanを1本の縦列に連続させる */
  .vertical-copy .vc-line {
    writing-mode: inherit;
    -webkit-writing-mode: inherit;
    text-orientation: upright;
    display: inline;
    margin: 0;
  }
  .hero-text {
    max-width: 100%;
  }
  /* 本文群（ラベル/ブランド名/リード/説明）を上に詰めて全体を可視化 */
  .hero-quiet-label { margin-bottom: 1.2rem; }
  .hero-brand-name { margin-bottom: 1rem; }
  .hero-section .lead-text { margin-bottom: 1.1rem !important; }
  .hero-text p { line-height: 1.9; }
}

.hero-section .line-cta-btn {
  border-color: rgba(250, 249, 246, 0.62);
  color: var(--fg-light);
}

.hero-section .line-cta-btn .btn-text-sub {
  color: rgba(250, 249, 246, 0.46);
}

.hero-section .line-cta-btn:hover .btn-text-main {
  color: var(--fg-light);
}

/* Editorial image rhythm */
.editorial-image-section {
  padding: 0;
  background: var(--bg-dark);
  color: var(--fg-light);
}

.editorial-image-grid {
  min-height: 112svh;
  display: grid;
  grid-template-columns: 1.18fr 0.62fr 0.82fr;
  align-items: stretch;
  gap: 1px;
  background: var(--border-dark);
}

.editorial-panel {
  overflow: hidden;
  min-height: 100%;
  background: var(--bg-dark);
}

.editorial-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(8%) contrast(110%) brightness(90%) saturate(90%);
  transition: transform 1.8s var(--ease-cinema), filter 1.8s var(--ease-cinema);
}

.editorial-panel:hover img {
  transform: scale(1.035);
  filter: grayscale(2%) contrast(112%) brightness(98%) saturate(96%);
}

.editorial-statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
  background: #171411;
}

.editorial-statement .section-label {
  color: rgba(212, 196, 168, 0.82);
}

.editorial-statement p {
  color: var(--fg-light);
  font-size: clamp(2.3rem, 5vw, 5.2rem);
  line-height: 1.25;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  margin: auto;
}

.editorial-panel-portrait {
  min-height: 112svh;
}

@media (max-width: 900px) {
  .editorial-image-grid {
    min-height: auto;
    grid-template-columns: 1fr;
  }
  .editorial-panel,
  .editorial-panel-portrait {
    min-height: 62svh;
  }
  .editorial-statement {
    min-height: 56svh;
  }
  .editorial-statement p {
    font-size: clamp(2.4rem, 13vw, 4.2rem);
  }
}

/* Chic CTA Button (Chic Gold Border Transition) */
.cta-container {
  margin-top: 4.5rem;
}

.line-cta-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a58f6c 0%, #8a765a 48%, #6d5b43 100%);
  color: #faf9f6;
  border: 1px solid rgba(250, 249, 246, 0.30);
  border-radius: 2px;
  padding: 1.5rem clamp(2.4rem, 9vw, 5rem);
  max-width: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(20, 16, 12, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.5s var(--ease-cinema), box-shadow 0.5s var(--ease-cinema), filter 0.5s var(--ease-cinema);
}

/* 艶：斜めのハイライトがホバーで流れる */
.line-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform 0.8s var(--ease-cinema);
  z-index: 1;
}

.line-cta-btn .btn-text-main {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: #faf9f6;
  white-space: nowrap; /* ボタン文字を語中で折り返さない（例：LINEで詳細を見る） */
}

.line-cta-btn .btn-text-sub {
  position: relative;
  z-index: 2;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.72);
  margin-top: 4px;
}

.line-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(20, 16, 12, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  filter: brightness(1.06);
}

.line-cta-btn:hover::before {
  transform: translateX(130%);
}

.cta-subtext {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--fg-weak);
  margin-bottom: 1rem;
  max-width: none;
}

.special-plan-section .cta-subtext {
  color: rgba(250, 249, 246, 0.66);
}

/* 中盤の独立LINE CTA（ライト背景・中央寄せ／クライアント指定の3ボタンのうち①） */
.mid-cta {
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) var(--px);
}

.mid-cta .cta-subtext {
  margin-bottom: 1.1rem;
}

/* Empathy Section */
.empathy-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.55rem, 5vw, 4.4rem); /* R14：先方要望でPC上限をさらに拡大 */
  line-height: 1.5;
  letter-spacing: 0.11em;
  color: var(--fg);
  margin-bottom: 2.75rem;
  word-break: keep-all;
}

.empathy-title .empathy-q {
  color: var(--accent);
  margin-left: 0.04em;
}

.empathy-intro {
  color: var(--fg-muted);
  line-height: 2.2;
  letter-spacing: 0.04em;
}

.empathy-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 6rem;
  align-items: start;
}

.empathy-list {
  list-style: none;
  margin-top: 1rem;
}

.empathy-list li {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.72rem);
  line-height: 2.05;
  color: var(--fg-muted);
  margin-bottom: 2.5rem;
  position: relative;
  padding-left: 2rem;
}

.empathy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 1.2rem;
  height: 1px;
  background-color: var(--accent);
}

.empathy-conclusion {
  border-left: 1px solid var(--accent);
  padding-left: 2.5rem;
  margin-top: 4.5rem;
}

.empathy-conclusion h3 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.empathy-conclusion p {
  font-size: 17px;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

@media (max-width: 900px) {
  .empathy-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

/* Strengths Section (De-carded & Asymmetric Editorial Grid) */
.strengths-grid {
  display: flex;
  flex-direction: column;
  gap: var(--py); /* 各強みを大きく離し、1ページずつ読ませるリズムに */
  margin-top: 6rem;
}

.strength-row {
  display: grid;
  grid-template-columns: 1fr 1.20fr;
  gap: 6rem;
  align-items: start;
  border-top: 1px solid var(--border);
  padding-top: 4rem;
}

@media (max-width: 768px) {
  .strength-row {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 2.5rem;
  }
}

/* 偶数番目の強みを左右反転させて非対称なレイアウトに */
.strength-row:nth-child(even) {
  grid-template-columns: 1.20fr 1fr;
}

.strength-row:nth-child(even) .strength-header-wrap {
  order: 2;
}

@media (max-width: 768px) {
  .strength-row:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .strength-row:nth-child(even) .strength-header-wrap {
    order: unset;
  }
}

.strength-header-wrap {
  display: flex;
  flex-direction: column;
}

/* 4100問題を完全に防ぐ、極細の巨大ナンバリング */
.strength-num-large {
  font-family: var(--serif);
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 300;
  line-height: 1.0;
  font-style: italic;
  color: rgba(140, 122, 98, 0.42);
  margin-bottom: 1.5rem;
}

.strength-title-text {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 400;
  color: var(--fg);
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.strength-description {
  font-size: 18px;
  line-height: 2.05;
  color: var(--fg-muted);
  padding-top: 1.5rem;
}

.strength-media {
  margin-top: 3rem;
  width: min(100%, 480px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-dark);
}

.strength-media-wide {
  aspect-ratio: 16 / 10;
}

.strength-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(10%) contrast(102%) brightness(86%) saturate(84%);
  transition: transform 1.6s var(--ease-cinema), filter 1.6s var(--ease-cinema);
}

.strength-media:hover img {
  transform: scale(1.035);
  filter: grayscale(4%) contrast(108%) brightness(92%) saturate(90%);
}

/* ============================================================
   Cinematic Strengths（選ばれる理由 I〜IV を映画のワンシーンのように）
   既存の .strength-row.reveal に付く .is-in をトリガーに、
   番号→見出し→本文→画像 の順で一拍ずつ立ち上げ、画像は静かに寄る（push-in）。
   ※新規JSなし。reduced-motion時は下のフォールバックで即表示。
   ============================================================ */
.strength-row.reveal {           /* 行自体は静止させ、中の要素に演出を担わせる */
  opacity: 1;
  transform: none;
}

.strength-row .strength-num-large,
.strength-row .strength-title-text,
.strength-row .strength-description,
.strength-row .strength-media {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.3s var(--ease-cinema), transform 1.3s var(--ease-cinema);
}

.strength-row .strength-media {   /* 画像は少し大きい状態から、長めにゆっくり寄る */
  transform: translateY(30px) scale(1.05);
  transition: opacity 1.7s var(--ease-cinema), transform 2.0s var(--ease-cinema);
}

.strength-row.is-in .strength-num-large  { transition-delay: 0.05s; }
.strength-row.is-in .strength-title-text { transition-delay: 0.18s; }
.strength-row.is-in .strength-description{ transition-delay: 0.32s; }
.strength-row.is-in .strength-media      { transition-delay: 0.46s; }

.strength-row.is-in .strength-num-large,
.strength-row.is-in .strength-title-text,
.strength-row.is-in .strength-description {
  opacity: 1;
  transform: translateY(0);
}

.strength-row.is-in .strength-media {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (min-width: 769px) {
  .strength-description {
    padding-top: 3rem; /* デスクトップでは巨大な数字と対比させて下部に配置 */
  }
}

/* Plans Section (松竹梅) */
.plans-section {
  background-color: var(--bg-paper);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.plan-card {
  background: var(--bg);
  padding: clamp(3rem, 4vw, 4rem) clamp(1.6rem, 2.6vw, 2.5rem) clamp(2.5rem, 3.5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.plan-card.is-featured {
  /* 純黒(--bg-dark #12100E)は暖色パレットで浮くため、深いエスプレッソ／レザー調の
     暖かいダークブラウンに。松＝レザーカバー製本の質感と呼応させる。 */
  background: #262019;
  color: var(--fg-light);
}

.plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  white-space: nowrap;
  padding: 0.45rem 1.2rem;
}

.plan-kanji {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.plan-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--fg);
  margin-bottom: 1.1rem;
}

.is-featured .plan-name {
  color: var(--fg-light);
}

.plan-price {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--fg);
  margin-bottom: 2.2rem;
}

.is-featured .plan-price {
  color: var(--fg-light);
}

.plan-price span {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--fg-weak);
}

.is-featured .plan-price span {
  color: var(--fg-light-muted);
}

.plan-feats {
  list-style: none;
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  margin-bottom: 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.is-featured .plan-feats {
  border-top-color: var(--border-dark);
}

.plan-feats li {
  font-size: 14.5px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--fg-muted);
}

.is-featured .plan-feats li {
  color: var(--fg-light-muted);
}

.plan-cta {
  margin-top: auto;
  display: inline-block;
  font-size: 1.02rem;
  letter-spacing: 0.12em;
  color: var(--fg);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
  transition: color 0.4s var(--ease-cinema), opacity 0.4s var(--ease-cinema);
}

.plan-cta:hover {
  color: var(--accent);
}

.is-featured .plan-cta {
  color: var(--fg-light);
}

.is-featured .plan-cta:hover {
  color: var(--accent);
}

/* プラン下の静かな二次導線：フォームへ。LINE主CTAより控えめなテキストリンク */
.plans-secondary-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.plans-apply-link {
  display: inline-block;
  font-size: 0.98rem;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: color 0.4s var(--ease-cinema);
}

.plans-apply-link:hover {
  color: var(--accent);
}

@media (max-width: 820px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .plan-card {
    padding-top: clamp(3rem, 8vw, 3.5rem);
  }
}

/* ============================================================
   Editorial Staging（芸術演出）: Folio / Ken Burns / Interlude / Closing / Pull-quote
   ============================================================ */

/* セクション・フォリオ（誌面の号数） */
section[data-folio]::before {
  content: attr(data-folio);
  position: absolute;
  top: clamp(2.2rem, 5vw, 4.5rem);
  right: var(--px);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.22em;
  color: var(--fg-weak);
  opacity: 0.65;
  z-index: 2;
  pointer-events: none;
}

.special-plan-section[data-folio]::before {
  color: rgba(250, 249, 246, 0.5);
}

@media (max-width: 768px) {
  section[data-folio]::before { display: none; }
}

/* Ken Burns（微速ズーム）— シネマティックな帯のみに適用 */
@keyframes kenburns {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.1); }
}

.kenburns {
  animation: kenburns 26s ease-in-out infinite alternate;
  transform-origin: 50% 45%;
  will-change: transform;
}

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

/* 全面ぶち抜きインタールード帯（“間”の演出・画像のみ） */
.interlude {
  position: relative;
  height: clamp(46vh, 58vh, 78vh);
  overflow: hidden;
  background: var(--bg-dark);
  padding: 0; /* section既定の上下padding(var(--py))を打ち消す。これが無いとデスクトップで画像高さが0に潰れ黒帯になる */
}

.interlude img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%; /* 横長デスクトップ帯でも「開いた本」の明るい主役が中央に来るよう下寄りで切り出す */
  filter: grayscale(4%) contrast(104%) brightness(100%) saturate(96%);
}

/* memory still-life 帯は被写体（本・手紙・写真）が中央〜やや上にあるため、寄せ位置を上げる */
.interlude-memory img {
  object-position: center 46%;
}

.interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18,16,14,0.10) 0%, transparent 34%, transparent 56%, rgba(18,16,14,0.62) 100%),
    linear-gradient(90deg, rgba(18,16,14,0.50) 0%, transparent 46%);
  pointer-events: none;
}

/* R14fix2（先方2026-07-11・確定）：画像の写真下端（木目＝茶系で明るめ）と直下の05背景
   #12100E との"色の違い"が境目の線＝違和感の正体。→画像の最下部を #12100E へ完全に溶かし込み、
   境界線を消す（05を物理的に詰めず色だけ連続させる）。R13の帯化は0.62止まりで下端に線が残った
   のが原因＝今回は最下部で不透明#12100Eへ到達させる。斜め成分は使わず縦フェードのみ。
   キャプションはこのフェード上（下端は暗い）＝可読性はむしろ向上。 */
.interlude-memory::after {
  display: block;
  background: linear-gradient(to bottom,
    rgba(18, 16, 14, 0) 0%,
    rgba(18, 16, 14, 0) 22%,
    rgba(18, 16, 14, 0.28) 45%,
    rgba(18, 16, 14, 0.62) 66%,
    rgba(18, 16, 14, 0.9) 82%,
    #12100E 93%,
    #12100E 100%);
  z-index: 1;
}
.interlude-memory .interlude-caption p {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 3px 14px rgba(0, 0, 0, 0.9),
    0 6px 30px rgba(0, 0, 0, 0.75);
}
.interlude-memory .interlude-caption .section-label {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 2px 16px rgba(0, 0, 0, 0.8);
}

/* インタールード字幕（“間”に物語の一行を添え、装飾を意味に変える） */
.interlude-caption {
  position: absolute;
  left: var(--px);
  bottom: clamp(2.2rem, 5vw, 3.75rem);
  z-index: 2;
  max-width: 30em;
}

.interlude-caption .section-label {
  color: rgba(212, 196, 168, 0.92);
  margin-bottom: 1.1rem;
}

.interlude-caption p {
  color: var(--fg-light);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.2vw, 2.5rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 300;
  text-shadow: 0 10px 44px rgba(0, 0, 0, 0.6);
  max-width: none;
}

@media (max-width: 768px) {
  .interlude-caption p { line-height: 1.55; }
}

/* イメージ動画帯（声→原稿→一冊。全面ぶち抜き・自動再生・無音・VI非表示） */
.film-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-dark);
  padding: 0; /* section既定の縦余白を打ち消す（interludeと同様） */
  aspect-ratio: 16 / 9;
  max-height: 82vh;
}

.film-band video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none; /* タップで一時停止/シークさせない＝VIを完全に隠す */
}

/* 上下端を紙面(bg-paper)へ静かに溶かし、帯の切れ目を目立たせない */
.film-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(18,16,14,0.34) 0%, transparent 16%,
    transparent 84%, rgba(18,16,14,0.40) 100%);
  pointer-events: none;
}

@media (max-width: 768px) {
  /* スマホは縦に間延びしないよう帯高さを抑える */
  .film-band { aspect-ratio: 4 / 3; max-height: 60vh; }
}

/* クロージング帯（暗転・全面写真の上に締めの一行＋CTA） */
.closing-band {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--fg-light);
  text-align: center;
  padding: 0; /* section既定の縦余白(var(--py))を打ち消す。内側余白(.closing-inner)で均衡させ、CTAが上方に孤立するのを防ぐ */
}

.closing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.closing-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(8%) contrast(108%) brightness(62%) saturate(86%);
}

/* 締めの一行を読ませるためのスクリム（写真は活かしつつ文字を浮かせる） */
.closing-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,16,14,0.50) 0%, rgba(18,16,14,0.42) 45%, rgba(18,16,14,0.60) 100%);
  pointer-events: none;
}

.closing-inner {
  position: relative;
  z-index: 1;
  padding: clamp(7rem, 14vw, 12rem) var(--px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-band .lead-text {
  color: var(--fg-light);
  text-shadow: 0 12px 50px rgba(0,0,0,0.5);
}

.closing-band .cta-subtext {
  color: rgba(250, 249, 246, 0.66);
}

/* クローズ帯（暗背景）の静かな二次導線：フォームへ。LINE主CTAより控えめ */
.closing-band .cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.closing-apply-link {
  display: inline-block;
  margin-top: 1.7rem;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--fg-light-muted);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: color 0.4s var(--ease-cinema);
}

.closing-apply-link:hover {
  color: var(--fg-light);
}

/* 大判プルクオート（こだわりを作品化） */
.pull-quote {
  position: relative;
  padding-top: 4.5rem;
}

.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(6rem, 12vw, 9rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.22;
  pointer-events: none;
}

/* Special Limited Plan (Cinematic Contrast Overhaul) */
.special-plan-section {
  background-color: var(--bg-dark); /* 暗転カラー */
  color: var(--fg-light);
  border: none;
  overflow: hidden;
  /* R14fix（先方2026-07-11）：直上の「記憶のすべてを、一冊に綴じて。」画像とこの05を
     "完全にくっつける"。①section既定の広大な上padding(var(--py)≒217px)を最小化。
     ②コンテナが2カラムgrid+align-items:centerで本文が約37px下がっていた分は
     .special-plan-content{align-self:start}で解消（下記PCブロック）。下paddingは不変。 */
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.special-plan-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* R14fix3（先方2026-07-11）：05の"左側だけつなぎ目に見える"違和感の真因＝この装飾グラデ
     （左18%の暖色グロー＋左3分の1の白み）が境界付近の左側だけを明るく暖色に染め、
     直上の画像下端(#12100E)と色差を作っていた。→装飾を撤去し、セクション全体を均一な
     #12100E に。これで画像下端の溶け込み(#12100Eへのフェード)と完全に色連続＝左右とも境目なし。
     ("05"フォリオはsection[data-folio]::beforeのcontentで別途表示＝残る) */
  background: none;
  pointer-events: none;
}

/* R14fix：PCで05本文の縦中央寄せ(37px)を解消し画像に密着。"05"フォリオも上端へ寄せて
   ラベルと横一線に。椅子画像(左列)は中央のまま＝内部バランス不変。 */
@media (min-width: 901px) {
  .special-plan-content { align-self: start; }
  .special-plan-section[data-folio]::before { top: clamp(1rem, 2vw, 1.5rem); }
}

.special-plan-section .section-label {
  color: var(--accent);
}

.special-plan-section .display-title {
  color: var(--fg-light);
}

.special-plan-section p {
  color: var(--fg-light-muted);
}

.special-plan-container {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(4rem, 8vw, 9rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.special-plan-content {
  max-width: 480px;
}

.special-plan-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.42;
  letter-spacing: 0.04em;
  color: var(--fg-light);
  margin-bottom: 1.1rem;
  word-break: keep-all;
}

.special-plan-title em {
  font-style: italic;
  color: var(--accent);
}

.special-plan-kicker {
  font-size: clamp(0.98rem, 1.4vw, 1.18rem);
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--fg-light-muted);
  margin-bottom: 3rem;
}

.special-plan-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  transform: translateY(-4vw);
}

.special-plan-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  filter: grayscale(6%) contrast(112%) brightness(88%) saturate(90%);
  transition: transform 1.8s var(--ease-cinema);
}

.special-plan-visual:hover img {
  transform: scale(1.03);
}

/* 暗転セクション専用のLINEボタン */
@media (max-width: 900px) {
  .special-plan-container {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .special-plan-visual {
    order: -1;
    transform: none;
    aspect-ratio: 16 / 10;
  }
  /* SPではコンテンツ枠を全幅にし、CTA（サブ文＋LINEボタン）を中央配置 */
  .special-plan-content {
    max-width: 100%;
  }
  .special-plan-content .cta-container {
    text-align: center;
  }
}

/* Flow Section */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 6rem;
}

.flow-step {
  position: relative;
  background-color: var(--bg);
  padding: 3rem 2rem;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.5s var(--ease-cinema);
}

.flow-step:hover {
  border-bottom-color: var(--accent);
}

.flow-step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  color: rgba(140, 122, 98, 0.5);
  margin-bottom: 1.25rem;
  display: block;
}

.flow-step-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--fg);
  margin-bottom: 1.5rem;
}

.flow-step-desc {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--fg-muted);
}

@media (max-width: 900px) {
  .flow-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .flow-step {
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 1rem;
  }
}

/* Flow Visual（取材の空気を伝える、内包のドキュメンタリー静止画） */
.flow-visual {
  max-width: min(100%, 940px);
  margin: 1.5rem auto 5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-dark);
}

.flow-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(6%) contrast(106%) brightness(98%) saturate(88%);
  transition: transform 2.2s var(--ease-cinema);
}

.flow-visual:hover img {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .flow-visual { margin: 1rem auto 3rem; }
}

.final-cta-visual {
  width: min(58vw, 360px);
  aspect-ratio: 9 / 16;
  margin: 7rem auto -2rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

.final-cta-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(12%) contrast(104%) brightness(88%) saturate(82%);
}

.final-cta-copy {
  position: relative;
  text-align: center;
  margin-top: 6rem;
}

@media (max-width: 720px) {
  .final-cta-visual {
    width: min(76vw, 320px);
    margin-top: 5rem;
  }
}

/* Footer Links */
.site-footer {
  background-color: var(--bg-paper);
  padding: 6rem var(--px) 4rem;
  border-top: 1px solid var(--border);
}

.footer-container {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.footer-nav {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav a {
  font-size: 13.5px;
  color: var(--fg-muted);
  letter-spacing: 0.12em;
  display: inline-block;
  padding: 0.5rem 0.25rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(110, 100, 86, 0.4);
}

.footer-nav a:hover {
  color: var(--accent);
}

.footer-copyright {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--fg-weak);
  letter-spacing: 0.1em;
}

/* ============================================================
   Application Form Page (Luxury Editorial Overhaul)
   ============================================================ */
.form-page-body {
  background: var(--bg);
}

.form-header {
  padding-top: calc(var(--nav-h) + 6rem);
  padding-bottom: 4rem;
  text-align: center;
  background-color: var(--bg-paper);
  border-bottom: 1px solid var(--border);
}

.form-container-box {
  max-width: 680px;
  margin: 5rem auto var(--py);
  background: transparent; /* ボックス枠線を完全に排除し、背景と一体化 */
  padding: 0 var(--px);
}

@media (max-width: 768px) {
  .form-container-box {
    margin-top: 3rem;
    padding: 0 1.5rem;
  }
}

.form-group {
  margin-bottom: 3.8rem; /* 入力フィールド間のゆとり */
  position: relative;
}

.form-group.row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}

@media (max-width: 600px) {
  .form-group.row-split {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.form-label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--fg);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.form-label .required-badge {
  color: var(--error-color);
  margin-left: 0.75rem;
  font-size: 10px;
  font-family: var(--serif);
}

/* 下線 (border-bottom) のみのエディトリアルインプット */
.form-control {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  padding: 0.9rem 0;
  font-family: var(--sans);
  font-size: 16px;
  border-radius: 0;
  transition: border-color 0.5s var(--ease-cinema);
}

.form-control:focus {
  outline: none;
  border-bottom-color: var(--accent); /* フォーカス時にブロンズが静かに立ち上がる */
}

.form-control::placeholder {
  color: var(--fg-weak);
  opacity: 0.5;
  font-size: 14px;
}

/* セレクトボックスのカスタム化 */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C7A62' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

textarea.form-control {
  min-height: 110px;
  line-height: 1.85;
}

/* Plan Details Box (額装風 Passpartout デザイン) */
.plan-details-box {
  margin-top: 2rem;
  padding: 2.5rem;
  background-color: var(--bg-paper);
  border: 1px solid var(--border);
  position: relative;
  display: none;
}

.plan-details-box.is-visible {
  display: block;
  animation: fadeIn 0.6s var(--ease-cinema) forwards;
}

.plan-details-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.plan-details-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.plan-details-price {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--fg);
  font-weight: 300;
}

.plan-details-content {
  font-size: 14.5px;
  line-height: 2.0; /* ゆったりとした行間 */
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  white-space: pre-line;
}

/* Agreement Checkboxes */
.agreement-group {
  margin-top: 4.5rem;
  border-top: 1px solid var(--border);
  padding-top: 3.5rem;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  position: relative;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--fg-muted);
  user-select: none;
  margin-bottom: 2rem;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 1px solid var(--fg-weak);
  margin-right: 1.25rem;
  margin-top: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--ease-cinema);
}

.checkbox-container:hover input ~ .checkmark {
  border-color: var(--accent);
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--fg);
  border-color: var(--fg);
}

.checkmark::after {
  content: '';
  width: 5px;
  height: 8px;
  border: solid var(--bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-0.5px, -0.5px);
  display: none;
}

.checkbox-container input:checked ~ .checkmark::after {
  display: block;
}

.checkbox-container a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.checkbox-container a:hover {
  color: var(--accent-hover);
}

/* Notice Area */
.form-submit-notice {
  margin-top: 4rem;
  background-color: var(--accent-light);
  border: 1px solid rgba(140, 122, 98, 0.1);
  padding: 2.25rem;
  font-size: 13px;
  line-height: 1.95;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

/* Submit Button Overhaul */
.form-submit-container {
  margin-top: 3.5rem;
  text-align: center;
}

.submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  padding: 1.45rem 2.5rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: all 0.5s var(--ease-cinema);
}

.submit-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.submit-btn:disabled {
  background: var(--fg-weak);
  border-color: var(--fg-weak);
  cursor: not-allowed;
  opacity: 0.4;
}

/* Validation Message */
.error-message {
  color: var(--error-color);
  font-size: 12px;
  margin-top: 0.6rem;
  display: none;
  font-family: var(--sans);
  letter-spacing: 0.02em;
}

.form-control.is-invalid {
  border-bottom-color: var(--error-color);
}

/* Status Panel */
.form-status-panel {
  padding: 5rem 2rem;
  text-align: center;
  display: none;
}

.status-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--accent-light);
  color: var(--accent);
}

.status-icon svg {
  width: 28px;
  height: 28px;
}

.status-title {
  font-family: var(--serif);
  font-size: 1.95rem;
  color: var(--fg);
  margin-bottom: 2rem;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.status-desc {
  font-size: 15px;
  line-height: 2.0;
  color: var(--fg-muted);
  max-width: 520px;
  margin: 0 auto 3.5rem;
}

.status-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fg);
  padding: 1.1rem 3rem;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--fg);
  transition: all 0.4s var(--ease-cinema);
}

.status-back-btn:hover {
  background-color: var(--fg);
  color: var(--bg);
}

/* Spinner */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(250, 249, 246, 0.3);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Reveal (Fade-Up) Animation core
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.4s var(--ease-cinema), transform 1.4s var(--ease-cinema);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Staggered reveal（既存の .reveal 機構を子要素にも使い、CSS遅延だけで一拍ずつ立ち上げる）
   ※新たな隠蔽ロジックを足さず、実証済みの reveal/is-in をそのまま流用して安全に映画的リズムを出す */
[data-stagger] > .reveal:nth-child(2) { transition-delay: 0.12s; }
[data-stagger] > .reveal:nth-child(3) { transition-delay: 0.24s; }
[data-stagger] > .reveal:nth-child(4) { transition-delay: 0.36s; }

/* モバイル：縦書きコピーと本文の重なりを解消（SPでは上部に独立配置済みのため、PCと同じ配色で前面表示） */
@media (max-width: 900px) {
  .hero-text {
    position: relative;
    z-index: 3;
  }
  .vertical-copy-container {
    z-index: 2;
  }
  .vertical-copy {
    opacity: 1;
  }
  /* SPでは共感セクションのCTA（サブ文＋LINEボタン）を中央に */
  .empathy-section .cta-container {
    text-align: center;
  }
}

[data-motion="restrained"] .reveal {
  transition-duration: 0.9s;
  transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .reveal,
  .strength-row .strength-num-large,
  .strength-row .strength-title-text,
  .strength-row .strength-description,
  .strength-row .strength-media {
    opacity: 1;
    transform: none;
  }
}

/* ===== 見出し等の折返しを均等化し「語中での不自然な改行」を軽減（クライアント指摘E） ===== */
.display-title,
.lead-text,
.empathy-title,
.empathy-conclusion h3,
.special-plan-title,
.special-plan-kicker,
.strength-title-text,
.flow-step-title,
.closing-band .lead-text {
  text-wrap: balance;
  line-break: strict;
}

/* 意味のまとまりを1単位として扱い、フレーズ境界でのみ改行させる（語中改行の防止）。
   nowrapでフレーズ内部を不可分にし、収まらない時はフレーズごと次行へ送る。 */
.wbr-phrase {
  display: inline-block;
  white-space: nowrap;
}

/* ============================================================
   REVISION 2026-07-07（先方 修正ラウンド1）— ここから
   ============================================================ */

/* L5a：「？」を本文と同色に統一 */
.empathy-title .empathy-q { color: inherit; }

/* L4a/L4b：ヒーローのリード文・説明文を少し大きく（4行維持・「プロジェクトです」折返し防止） */
.hero-text > p { font-size: 1.05rem; line-height: 1.95; }
@media (min-width: 901px) {
  .hero-section .lead-text {
    font-size: clamp(1.32rem, 2.1vw, 1.72rem) !important;
    line-height: 1.7 !important;
  }
  .hero-text > p { font-size: clamp(1rem, 1.15vw, 1.12rem); }
}

/* L5f：共感セクションの縦棒・箇条書きの横棒を撤去し、各文を独立させる */
.empathy-list li { padding-left: 0; }
.empathy-list li::before { display: none; }
.empathy-conclusion { border-left: none; padding-left: 0; margin-top: 3.5rem; }

/* L5b/L5c：3つのニーズを大きく・目立つ独立ブロックへ（早いスクロールでも目に入る） */
.empathy-list li {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  color: var(--fg);
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin-bottom: 1.9rem;
}

/* L5d：「その想いをカタチに。」を見出しと同格・ブロンズで強調（想起→解決の受け） */
.empathy-conclusion h3 {
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  font-weight: 400;
  color: var(--accent);
  line-height: 1.45;
  margin-bottom: 1.8rem;
}

/* L5e：「究極の自分史」「プロのライターが…」を大きく強調（流れて消えない存在感） */
.empathy-conclusion > p:nth-of-type(1) {
  font-size: clamp(1.5rem, 2.7vw, 2.0rem) !important;
  line-height: 1.6 !important;
  color: var(--fg) !important;
  font-weight: 400;
}
.empathy-conclusion > p:nth-of-type(2) {
  font-size: clamp(1.12rem, 1.9vw, 1.4rem) !important;
  letter-spacing: 0.1em;
}

/* L6a：CTA上の一文を少し大きく／L6b：LINEボタン内文字を少し大きく */
.cta-subtext { font-size: 14.5px; }
.line-cta-btn .btn-text-main { font-size: 1.42rem; }

/* L6c：特別限定プランのCTA（2つ目のボタン群）をPCでも中央に */
.special-plan-content .cta-container { text-align: center; }

/* L1：メニュー内のLINE項目をLP内ボタンと同じブロンズ充填の“ボタン”デザインへ統一 */
.mobile-menu-line {
  background: linear-gradient(135deg, #a58f6c 0%, #8a765a 48%, #6d5b43 100%);
  color: #faf9f6;
  border: 1px solid rgba(250, 249, 246, 0.30);
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(20, 16, 12, 0.28), inset 0 1px 0 rgba(255,255,255,0.20);
  padding: 1rem 2.6rem;
  font-family: var(--serif);
  letter-spacing: 0.2em;
}
.mobile-menu-line:hover,
.mobile-menu-line:active {
  color: #faf9f6;
  background: linear-gradient(135deg, #b39a74 0%, #97815f 48%, #77644a 100%);
  filter: brightness(1.05);
}

/* L7a：4つの強みの主題を上質に強調（早いスクロールでも目に留まる） */
.strength-title-text {
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  letter-spacing: 0.12em;
}

/* L7b/L9/L10b：画像の“貼付感”を軽減＝ハード枠を外し、紙面へ柔らかく溶け込ませる */
.strength-media,
.special-plan-visual,
.flow-visual {
  border: none;
  box-shadow: 0 26px 72px rgba(18, 16, 12, 0.22);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 50% 50%, #000 78%, transparent 100%);
}

/* L11：クロージングの締めの一行を少し大きく */
.closing-band .lead-text {
  font-size: clamp(1.75rem, 3.2vw, 2.45rem);
}

/* L12：クロージング〜フッターを圧縮し、締め＋LINEボタンが画面中央に来やすく */
.closing-inner { padding: clamp(5rem, 10vw, 8rem) var(--px); }
.site-footer { padding: 3rem var(--px) 2.5rem; }
.footer-container { gap: 1.75rem; }

/* L10a：お届けの流れをコンパクトにし、矢印で連結してギュッと */
.flow-steps { gap: 0; position: relative; margin-top: 3.5rem; }
.flow-step { padding: 1.7rem 1.2rem; text-align: center; }
.flow-step-title { margin-bottom: 0; }
.flow-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.15rem;
  opacity: 0.8;
}
.flow-visual { margin: 1rem auto 2.5rem; }
@media (max-width: 900px) {
  .flow-step:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -0.7rem;
    transform: translateX(-50%);
  }
  .flow-step { padding: 1.4rem 1rem; }
}

/* L8：誓い（Our Vow）— 静かで格式ある叙述ブロック */
.vow-section { background-color: var(--bg-paper); text-align: center; }
.vow-inner { max-width: 780px; margin: 0 auto; }
.vow-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.34em;
  color: var(--fg);
  margin-bottom: 2.6rem;
}
.vow-body {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.8vw, 1.42rem);
  line-height: 2.35;
  letter-spacing: 0.07em;
  color: var(--fg-muted);
  max-width: none;
}

/* L2b：ヒーロー縦組みコピーをSPで確実に中央配置（右上寄り解消） */
@media (max-width: 900px) {
  .vertical-copy-container { justify-content: center; width: 100%; text-align: center; }
  .vertical-copy { margin: 0 auto; }
}

/* F3a：プラン詳細の「約20,000文字」を語中で分断させない（CJKはスペースでのみ改行） */
.plan-details-content {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 拡大した共感セクションの見出し・文は、狭幅ではフレーズ内改行を許可して横溢れを防ぐ
   （大きくした結果1フレーズが画面幅を超えるため、nowrapを解除して折り返す） */
.empathy-conclusion h3 .wbr-phrase,
.empathy-conclusion > p .wbr-phrase,
.empathy-list li .wbr-phrase {
  white-space: normal;
}
.empathy-conclusion h3,
.empathy-conclusion > p,
.empathy-list li {
  overflow-wrap: anywhere;
}

/* === 07-07 実描画QA後の追い込み === */

/* L12追い込み：フッター法的リンクの間隔が広すぎ→コンパクトに（SPで縦積み時の4rem空白を解消） */
.footer-nav { gap: 1.4rem; }
.site-footer { padding-top: 2.5rem; padding-bottom: 2.25rem; }
.footer-container { gap: 1.5rem; }
@media (max-width: 600px) {
  .footer-nav { flex-direction: column; gap: 1.1rem; }
}

/* L10a追い込み：お届けの流れをさらにコンパクトに「ギュッと」（SPで各ステップの縦を圧縮） */
@media (max-width: 900px) {
  .flow-step { padding: 0.85rem 1rem; }
  .flow-step-num { font-size: 1.85rem; margin-bottom: 0.35rem; }
  .flow-step-title { font-size: 1.15rem; margin-bottom: 0; }
  .flow-step:not(:last-child)::after { bottom: -0.5rem; font-size: 1rem; }
}
/* ============================================================
   REVISION 2026-07-07 — ここまで
   ============================================================ */


/* ============================================================
   REVISION 2026-07-07 ROUND2（先方 2回目まとめ指摘）— ここから
   体感で分かるレベルまで強化。既存ROUND1の値を後勝ちで上書き。
   ============================================================ */

/* ── ヒーロー：SPは「一生を、一冊に。」だけで一面。英字ラベル/ブランド名は
   第一画面に覗かせない（LEGACY / MEMORY / BOOK の見切れを解消） ── */
@media (max-width: 900px) {
  .hero-quiet-label,
  .hero-brand-name { display: none; }
  /* L4b：説明文を少し大きく（第二画面に自然表示・「手渡すためのプロジェクトです。」は1フレーズで孤立改行しない） */
  .hero-text > p { font-size: 1.12rem; line-height: 1.95; }
  .hero-section .lead-text { font-size: clamp(1.35rem, 4.6vw, 1.72rem) !important; }
}

/* ナビ項目が6つになったため間隔を最適化（PCで横溢れ防止） */
@media (min-width: 769px) {
  .nav-links { gap: 2rem; }
}

/* ── L5f/L6：3つのニーズは「文頭に横線（―）」を復活しつつ各文を独立表示 ── */
.empathy-list li {
  padding-left: 1.7rem;
  position: relative;
  margin-bottom: 2.5rem;
}
.empathy-list li::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 1.15rem;
  height: 1px;
  background: var(--accent);
}

/* ── L5d：「その想いをカタチに。」は必ず1行（改行させない） ── */
.empathy-conclusion h3 {
  font-size: clamp(1.75rem, 5vw, 3.1rem);
  overflow-wrap: normal;
}

/* ── L5c/L5：3ニーズと締めの各フレーズを語中で切らない（nowrap再固定）。
   ROUND1でnowrapを解除していたため「のこした／い。」等の語中改行が発生していた。
   併せて3ニーズの字送りを、最長「私という物語をのこしたい。」が1行に収まる値へ。 ── */
.empathy-list li {
  /* R13：先方要望で拡大＝PC(上限)のみ引き上げ。下限(SP狭幅)は据置＝375で最長行
     「私という物語をのこしたい。」がはみ出さないよう1.4remを維持（1.55だと375で右溢れ実測）。 */
  font-size: clamp(1.4rem, 4.9vw, 2.4rem);
}
.empathy-list li .wbr-phrase,
.empathy-conclusion h3 .wbr-phrase,
.empathy-conclusion > p .wbr-phrase {
  white-space: nowrap;
}

/* ── L5e：「究極の自分史」「プロのライターが100年読まれる物語へ」を
   さらに大きく＋左から光が当たる立体的な影＋下線で強調（流れて消えない存在感） ── */
.empathy-conclusion > p:nth-of-type(1) {
  font-size: clamp(1.7rem, 3vw, 2.35rem) !important;
  line-height: 1.55 !important;
  text-shadow: -3px 3px 5px rgba(90, 74, 52, 0.22);
}
.empathy-conclusion > p:nth-of-type(2) {
  font-size: clamp(1.32rem, 2.3vw, 1.7rem) !important;
  text-shadow: -2px 2px 4px rgba(90, 74, 52, 0.20);
}
.empathy-conclusion > p:nth-of-type(2) .wbr-phrase {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  line-height: 2.4;
}

/* ── L5e追伸：「プロのライターが…」と動画帯の空白を狭める ── */
#empathy { padding-bottom: clamp(3rem, 7vw, 5.5rem); }

/* ── L7c：4つの強みを「最高峰のおもてなし」の直下へ寄せる（半ページの空白を圧縮） ── */
#promise { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
#strengths { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.strengths-grid { margin-top: 3rem; }

/* ── L7f：4つ目の強みの直後のLINE CTA（明るい背景・中央） ── */
.strengths-cta {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: 0;
  border-top: 1px solid var(--border);
  margin-top: clamp(3rem, 7vw, 5rem);
}

/* ── 強み本文：先方指定の改行（6/5/6/6行）を各行1行で厳守できるよう、
   SPは最長行（19文字）が収まる字送りに調整（語中改行は元々ゼロ） ── */
@media (max-width: 768px) {
  .strength-description {
    font-size: min(4.65vw, 17px);
    line-height: 2.0;
    letter-spacing: 0.01em;
    padding-top: 1rem;
  }
}

/* ── L6a/L16：「何でもお気軽にご質問ください」を以前より大きく ── */
.cta-subtext { font-size: clamp(15px, 2vw, 16.5px); }

/* ── L11：クロージングの締めの一行をさらに大きく（PC）。
   SPは「あなたの生きた証を。」11文字が狭幅でも溢れないよう幅連動の上限に。 ── */
.closing-band .lead-text {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}
@media (max-width: 768px) {
  .closing-band .lead-text { font-size: min(7.2vw, 2.2rem); }
}

/* ── L12/L15：締め＋LINEが中央に来るよう、薄茶フッターのスペースを圧縮 ── */
.closing-inner {
  /* R4：薄茶スペースを現行の約60%へ圧縮 */
  padding-top: clamp(2.4rem, 5.4vw, 4.2rem);
  padding-bottom: clamp(2.4rem, 5.4vw, 4.2rem);
}
/* R4：最下部までスクロールした時、「締めの一行〜LINEボタン」の中間が
   画面中央に来るよう、締めブロック下の余白を画面高に連動させる（フッターは薄く保つ） */
@media (max-width: 900px) {
  .closing-inner { padding-bottom: calc(50vh - 178px); }
}
.site-footer { padding-top: 1.4rem; padding-bottom: 1.3rem; }
.footer-container { gap: 1rem; }

/* ── L22：お届けの流れの「⇨」をPCでも確実に表示 ──
   矢印を「右セル側の::before」として描く＝右セルは後から描画されるため、
   隣接セルの上に確実に重なって見える（従来の::afterは次セルに隠れていた）。 */
@media (min-width: 901px) {
  .flow-steps { position: relative; }
  .flow-step { position: relative; }
  .flow-step:not(:last-child)::after { content: none; }
  .flow-step:not(:first-child)::before {
    content: "→";
    position: absolute;
    left: -0.5rem;
    /* 矢印の高さをタイトル文字に合わせる（番号ぶん中央より下） */
    top: 62%;
    transform: translate(-50%, -50%);
    color: var(--accent);
    font-size: 1.35rem;
    line-height: 1;
    z-index: 3;
    opacity: 0.9;
  }
}

/* ── L7b/L9/L10b：画像の“貼付感”を解消＝同一画像をぼかして背景に敷く（柔らかなハロー）──
   ハード枠・単純マスクを撤去し、写真の背後に同じ画像のぼかしを紙面へにじませる。 */
.strength-media,
.special-plan-visual,
.flow-visual {
  border: none;
  background: transparent;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: none;
  position: relative;
  isolation: isolate;
}
.strength-media::before,
.special-plan-visual::before,
.flow-visual::before {
  content: "";
  position: absolute;
  inset: -9% -2%; /* 横張り出しを7%→2%に抑制（狭幅スマホでの横はみ出し防止）。上下のぼかしは維持 */
  z-index: -1;
  background-image: var(--media-src);
  background-size: cover;
  background-position: center;
  filter: blur(32px) saturate(0.82) brightness(0.6);
  opacity: 0.6;
  pointer-events: none;
}
.strength-media img,
.special-plan-visual img,
.flow-visual img {
  position: relative;
  z-index: 1;
  box-shadow: 0 30px 68px rgba(18, 16, 12, 0.4);
}

/* ── F2/F25：プラン金額「（税込）」を改行させない ── */
.plan-details-price { white-space: nowrap; }

/* ── F3a/F26：サービス内容の箇条書きを、折返し2行目も本文位置に揃える（ぶら下げ）。
   親の word-break:keep-all は長いカタカナ語で「・」だけ孤立させるため、
   リスト項目は通常改行へ戻す（「・ドキュメンタリー映像の…」が正しく続く）。 ── */
.plan-details-content .plan-feat-list { list-style: none; margin: 0; padding: 0; }
.plan-details-content .plan-feat-list li {
  padding-left: 1.15em;
  text-indent: -1.15em;
  line-height: 2.0;
  margin-bottom: 0.35rem;
  word-break: normal;
  overflow-wrap: anywhere;
}
.plan-details-content .plan-feat-list .nb { white-space: nowrap; }

/* ── 横揺れ完全封止の仕上げ：古い小型機種(≤360px、iPhone SE/12mini等)で
   「私という物語をのこしたい。」「その想いをカタチに。」の1行(nowrap)が
   収まらず横はみ出す。1行の指定は守りつつ、狭幅のみ文字を詰めて収める。 ── */
@media (max-width: 360px) {
  .empathy-list li {
    font-size: 17.5px;
    letter-spacing: 0.01em;
    padding-left: 1.25rem;
  }
  .empathy-conclusion h3 { font-size: 1.5rem; }
  .empathy-conclusion > p:nth-of-type(1) { font-size: 1.42rem !important; }
  /* --px を少し詰めて左右の余白を確保（狭幅だけ） */
}
@media (max-width: 340px) {
  .empathy-list li { font-size: 16px; padding-left: 1rem; }
  .empathy-conclusion h3 { font-size: 1.35rem; }
}

/* ============================================================
   REVISION 2026-07-07 ROUND2 — ここまで
   ============================================================ */

/* ============================================================
   REVISION 2026-07-08 ROUND3（先方3回目指摘）— ここから
   ============================================================ */

/* ── R3-01：ヒーロー文字を「行数を守れる上限」まで拡大。
   17文字の最長行（これは単なる記録本ではありません。）を1行で収めるため、
   SPのヒーロー本文だけ左右余白を少し詰めて器を広げる ── */
@media (max-width: 900px) {
  .hero-section .hero-content {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* R3-01c/R4：リード4行のまま もうほんの少し大きく */
  .hero-section .lead-text {
    font-size: clamp(1.5rem, 6.55vw, 1.74rem) !important;
  }
  /* R3-01a/b/R4：説明文＝5行固定（HTML側でsp-only改行）＋もうほんの少し大きく。
     nowrapの最長行17字が全幅(320〜)で収まる上限＝約5.1vw */
  .hero-text > p {
    font-size: min(5.1vw, 1.3rem);
    letter-spacing: 0.02em;
    line-height: 2.0;
  }
}

/* ── R6-11：ぼかし全廃（先方の最終決定＝ぼかし不採用・元に戻す）。
   ::before(ぼかし背景)・下地背景画像・額装padding・フチ・影を撤去し、
   画像を「素のまま・幅いっぱい・両端一致」で表示。
   height:auto＋比率自然＝上下の切れ（cover crop）も解消。 ── */
.strength-media,
.special-plan-visual,
.flow-visual {
  position: relative;
  overflow: visible;
  padding: 0;
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.strength-media::before,
.special-plan-visual::before,
.flow-visual::before {
  content: none;
  display: none;
}
.strength-media img,
.special-plan-visual img,
.flow-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: none;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* R3-02a：グレー枠→あとから「ぶわっと」の解消。
   画像帯は遅延フェード(ステージング)から外し、到達時に完成形で即表示 */
.strength-row .strength-media {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── R3-03：4つの強み詳細文を大きく（行数6/5/6/6は不変）。
   SPは最長16字行が全幅で1行に収まる上限に連動 ── */
.strength-description { font-size: 19px; }
@media (max-width: 768px) {
  /* 最長18字行（全国への出張から…／レザーカバーや…）を1行で保つため、
     強みセクションだけ左右余白を詰めて器を広げた上で文字を拡大 */
  #strengths .wrap { padding-left: 18px; padding-right: 18px; }
  .strength-description {
    font-size: clamp(15.5px, 4.8vw, 18px);
    line-height: 2.0;
  }
}

/* ── R3-04：薄茶フッターを約60%の高さへ圧縮（締め＋LINEが中央に来る余地を作る） ── */
.site-footer { padding: 1.05rem var(--px) 0.9rem; }
.footer-container { gap: 0.5rem; }
.footer-nav { gap: 0.4rem; }
.footer-nav a { padding: 0.12rem 0.25rem; font-size: 12.5px; line-height: 1.45; }
.footer-copyright { font-size: 10.5px; line-height: 1.5; }
@media (max-width: 600px) {
  .footer-nav { flex-direction: column; gap: 0.3rem; }
}

/* R3-04b：最下部までスクロールした時、「締めの一行〜LINEボタンの中間」が
   画面中央に来るよう、クロージングの下余白を画面高さに連動させる（SP） */
@media (max-width: 768px) {
  .closing-inner {
    /* R4：締め〜LINE中間を画面中央へ（12mini/vh812で mid≈center を実測して較正） */
    padding-bottom: clamp(3.5rem, calc(50vh - 221px), 16rem);
  }
}

/* ============================================================
   REVISION 2026-07-08 ROUND3 — ここまで
   ============================================================ */


/* ============================================================
   REVISION 2026-07-08 R5 — 画像の「下切れ」解消（先方指摘・iPhone 12mini）
   真因＝object-fit:cover が写真(3:2)を固定枠(16:10/4:5/16:9)に詰め、上下をクロップ
        （容器からのはみ出しclipではない）。→ ぼかし額装は維持し、中央の写真は
        自然な縦横比で"全体"を表示（クロップなし＝どの機種でも切れない）。
   ============================================================ */
.strength-media,
.special-plan-visual,
.flow-visual {
  aspect-ratio: auto; /* 固定枠を外す＝クロップさせない */
}
.strength-media img,
.special-plan-visual img,
.flow-visual img {
  width: 100%;
  height: auto;        /* 自然比で全体表示（object-fitクロップを無効化） */
  object-fit: contain;
  display: block;
}


/* ============================================================
   REVISION 2026-07-08 R6 — 共感→結論の感情設計（E / R6-12）
   ============================================================ */
/* R6-12c：結論ブロックを中央寄せ */
.empathy-conclusion { text-align: center; }

/* R6-12b：「その想いをカタチに。」の上に薄い橋のような線（上のニーズから繋がる演出） */
.empathy-conclusion h3 {
  position: relative;
  text-align: center;
  padding-top: 2.6rem;
}
.empathy-conclusion h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(52px, 24vw, 130px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
}

/* R6-12e：「人生のすべてを詰め込んだ／究極の自分史。」＝暗色ブロックで高級感・目立たせ（2行） */
.empathy-section .empathy-conclusion .conclusion-highlight {
  display: block;
  margin: 2rem auto 1.85rem;
  padding: clamp(1.15rem, 4vw, 1.9rem) clamp(1.3rem, 5vw, 2.4rem);
  max-width: 20em;
  background: var(--bg-dark);
  color: var(--fg-light) !important;
  border-radius: 2px;
  text-shadow: none !important;
  font-size: clamp(1.5rem, 5.2vw, 2.2rem) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.05em;
  box-shadow: 0 18px 44px rgba(18, 16, 12, 0.28);
}
.empathy-section .empathy-conclusion .conclusion-highlight .wbr-phrase {
  color: var(--fg-light) !important;
}

/* R6-12f：「プロのライターが／100年読まれる物語へ」＝少し大きく・下線なし・中央 */
.empathy-section .empathy-conclusion .conclusion-tagline {
  text-align: center;
  font-size: clamp(1.42rem, 4.6vw, 1.9rem) !important;
  text-shadow: none !important;
  margin: 0 auto;
  line-height: 1.6 !important;
}
.empathy-section .empathy-conclusion .conclusion-tagline .wbr-phrase {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  line-height: 1.6 !important;
}

/* R6-12a/12d：共感セクションの間隔（SP）
   基準実測(r11)＝こんな想い↔生きた証=172px。
   12d＝この間隔を半分(≈86px)に／12a＝私という物語をのこしたい↔その想いを 172px 前後に広げる */
@media (max-width: 900px) {
  .empathy-title { margin-bottom: 0.9rem; }
  .empathy-grid { gap: 2.25rem; }
  .empathy-list { margin-top: 0; }
  .empathy-conclusion { margin-top: 10rem; }
}

/* ============================================================
   REVISION 2026-07-08 R6 — A/B/C（本文font・余白）
   ============================================================ */
/* R6-02：特別プランのキッカーを少し大きく（改行増やさない＝1行のまま） */
.special-plan-kicker { font-size: clamp(1.08rem, 1.6vw, 1.32rem); }

/* R6-08：「完成・お届け」〜クロージング写真 の薄色スペースを約半分に（gap96→48目安） */
#flow { padding-bottom: 80px; }

/* R6-09：「最高峰のおもてなし。」〜「Ⅰ」の間隔をほんの少し狭く（OUR STRENGTHSは残す） */
#strengths { padding-top: 28px; }

/* R6-12e 追い込み：暗色ブロックの「人生のすべてを詰め込んだ」(nowrap)が
   320px級の狭幅で溢れる→≤340pxのみ文字と余白を詰めて2行のまま収める（360/375は不変） */
@media (max-width: 340px) {
  .empathy-section .empathy-conclusion .conclusion-highlight {
    font-size: clamp(1.15rem, 5.6vw, 1.4rem) !important;
    padding: 0.95rem 0.85rem;
    max-width: 100%;
  }
}

/* ============================================================
   REVISION 2026-07-09 R10 — 共感セクションをPCも縦積みに（先方要望）
   旧＝PCは2カラム（見出し左／リスト右＋結論が右下）＝「逆さL」の印象。
   スマホと同じ 見出し→リスト→結論 の縦の流れへ。コンテンツ幅は誌面的に
   680pxへ絞って中央のひとつのコラムに置く（文字揃えはSPと同一＝
   見出し左・リスト左・結論中央）。 ============================== */
@media (min-width: 901px) {
  .empathy-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 縦流れの呼吸：リスト→結論の間をひと呼吸あける */
  .empathy-conclusion { margin-top: 7rem; }

  /* R11：見出しは「その想いをカタチに。」に合わせて中央へ（先方要望・維持） */
  .empathy-grid > div:first-child { text-align: center; }
  /* R12（先方 2026-07-09）：3つのニーズは「以前のように文頭に "-"（横線）を付け、
     文頭を左で揃える」＝R11-fix2の中央寄せ＋ダッシュ撤去を取り消し、左寄せ＋
     行頭ダッシュ（上記 .empathy-list li::before 定義）を復活。独立した3項目だと
     視覚的に伝える。見出し・結論（その想いをカタチに…）の中央寄せはそのまま維持。 */
  /* R14（先方2026-07-11・PCのみ）：INQUIRYラベルは中央。見出しは中央。3つのニーズは
     左揃え＋行頭"―"の見た目はそのまま維持し、"塊"を中央（INQUIRYの真下）に置いて
     光学的に中央へ見せる。列幅はmax-contentで最長行に合わせ、margin autoで中央化。
     左揃えの短い行が視覚的に左に偏るぶんだけ optical-nudge で右へ寄せる。 */
  /* R14fix（先方2026-07-11）：INQUIRYを中心の基準に、見出し＋ニーズを"セット"で
     もう少し右へ。見出しは中央揃えのまま箱ごと+44px、ニーズは左揃えの視覚中心が
     見出しと揃うよう+76px（左揃えの短い行が左に寄るぶんを上乗せ）。 */
  .empathy-title { transform: translateX(44px); }
  .empathy-list {
    text-align: left;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(46px);
  }
  .empathy-list li { text-align: left; }

  /* R14fix4（先方2026-07-11・PCのみ）：結論部の縦の橋線に対し、下の文字群
     （その想いをカタチに。／帯「人生のすべてを…究極の自分史。」／プロのライターが…）が
     わずかに左に見える＝中央揃えでも末尾「。」が視覚的に軽く重心が左へ寄る錯視。
     縦線(h3::before)は真の中央のまま、文字群だけを+16px右へ寄せて視覚的に中央へ。 */
  .empathy-conclusion h3 .wbr-phrase { display: inline-block; transform: translateX(16px); }
  .empathy-conclusion .conclusion-highlight { transform: translateX(16px); }
  .empathy-conclusion .conclusion-tagline { transform: translateX(16px); }
}

/* ============================================================
   REVISION 2026-07-08 R7 — 先方まとめ指摘（映像本文/見出し中央/縦橋線/
   艶ブラウン帯/画像full-bleed/椅子画像/字体統一/申込ボタン色）
   ============================================================ */

/* R7-02：OUR STRENGTHS が上寄り→上下に余白を持たせ、帯の中で中央に見せる
   （R6-09の #strengths padding-top:28px は残しつつ、ラベル自体に上下マージン） */
.strengths-label-wrap {
  padding-top: clamp(1.6rem, 6vw, 3rem);
  margin-bottom: clamp(1.6rem, 6vw, 3rem);
}

/* R7-03：「その想いをカタチに。」上の線を"縦"に（上のニーズのアンサー＝縦の橋）
   R6-12b の横線(::before)を縦線へ上書き */
.empathy-conclusion h3 {
  padding-top: 3.4rem;
}
.empathy-conclusion h3::before {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(180deg, transparent, var(--accent));
  opacity: 0.8;
}

/* R7-04：「人生のすべてを…究極の自分史。」＝黒→艶っぽいブラウンの"帯"（左右両端まで） */
.empathy-section .empathy-conclusion .conclusion-highlight {
  background: linear-gradient(135deg, #4b3826 0%, #3a2b1c 52%, #2c2015 100%) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, 0.14),
              0 20px 46px rgba(24, 16, 8, 0.34) !important;
}
/* 帯：左右余白ゼロ・両端いっぱい（単一カラムになる≤900pxで適用）
   親チェーンが右へ非対称にはみ出す（empathy-needsがgridセルを超える）ため、
   対称前提の calc(50%-50vw) ではなく wrap の左paddingぶん(--px)だけ戻して viewport 左端0に固定 */
@media (max-width: 900px) {
  .empathy-section .empathy-conclusion .conclusion-highlight {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(-1 * var(--px));
    margin-right: calc(-1 * var(--px));
    padding-left: clamp(1.3rem, 6vw, 2.4rem) !important;
    padding-right: clamp(1.3rem, 6vw, 2.4rem) !important;
    box-sizing: border-box;
  }
}

/* R7-07：「プロのライターが／100年読まれる物語へ」を上の文字と同じ明朝体へ統一 */
.empathy-section .empathy-conclusion .conclusion-tagline {
  font-family: var(--serif) !important;
}

/* R7-05：強み画像・お届けの流れ画像を"両端いっぱい・左右余白ゼロ"の帯に（SP・単一カラム時）
   自然比のまま横幅を画面いっぱいに（ぼかし/枠なし＝素表示のショート動画と同じ見え） */
/* 全幅（full-bleed）は 100vw + calc(50%-50vw) を使わない。
   100vw はスクロールバー幅を含む機種があり、calc(50%-50vw) は親の中央寄せ計算に依存するため
   一部機種で左右に余白/ズレが出る（先方報告）。→ width:auto のまま、各セクションの .wrap padding を
   左右の負マージンで相殺して viewport 両端にピタリと合わせる（機種・スクロールバー非依存）。 */
@media (max-width: 768px) {
  /* 強み画像＝#strengths .wrap は左右18px固定 */
  .strength-media {
    width: auto;
    max-width: none;
    margin-left: -18px;
    margin-right: -18px;
    margin-top: 2rem;
    border: none !important;
  }
  /* お届けの流れ画像＝#flow .wrap は --px padding */
  .flow-visual {
    width: auto;
    max-width: none;
    margin-left: calc(-1 * var(--px));
    margin-right: calc(-1 * var(--px));
    margin-top: 1rem;
    margin-bottom: 2.5rem;
    border: none !important;
  }
}

/* R7-06：特別限定プランの椅子画像＝縦長になっていたのを他画像と同じ横長の帯へ
   （このカットのみ横長にクロップ＝R5の contain を上書き）＋SPで両端いっぱい */
@media (max-width: 900px) {
  /* R7-06：椅子画像はSPのみ横長帯（16:10 cover）＋両端いっぱい。PCは base(4/5・translateY)を維持 */
  .special-plan-visual {
    aspect-ratio: 16 / 10 !important;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-1 * var(--px));
    margin-right: calc(-1 * var(--px));
    border: none !important;
    transform: none;
  }
  .special-plan-visual img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
  }
}

/* R7-01：映像プランの本文を少し大きく（改行・行数は据え置き＝font-sizeのみ微増） */
.special-plan-kicker { font-size: clamp(1.14rem, 1.7vw, 1.4rem); }

/* R7-08：申込フォーム「この内容で申し込む」ボタンをLINE登録ボタンと同じブロンズ艶へ */
.submit-btn {
  background: linear-gradient(135deg, #a58f6c 0%, #8a765a 48%, #6d5b43 100%) !important;
  color: #faf9f6 !important;
  border: 1px solid rgba(250, 249, 246, 0.30) !important;
  box-shadow: 0 14px 36px rgba(20, 16, 12, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #b09a76 0%, #957f62 48%, #75624a 100%) !important;
  border-color: rgba(250, 249, 246, 0.40) !important;
  filter: brightness(1.05);
}

/* ============================================================
   REVISION 2026-07-09 R8（有料・先方3点）
   ============================================================ */
/* R8-1：「その想いをカタチに。」上の縦線を、のこしたい。から約1cm下げて開始し
   下へ伸ばす（上→下へ濃くなるグラデ維持） */
@media (max-width: 900px) {
  .empathy-conclusion { margin-top: 3.5rem; } /* のこしたい↔線 の約1cm */
}
.empathy-conclusion h3 { padding-top: clamp(3.6rem, 16vw, 6.5rem); }
.empathy-conclusion h3::before {
  top: 0;
  height: clamp(2.8rem, 14vw, 5.6rem);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent));
  opacity: 0.85;
}

/* R8-2：「人生のすべてを…究極の自分史。」「プロのライターが…」を拡大（行数不変） */
.empathy-section .empathy-conclusion .conclusion-highlight {
  font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
}
.empathy-section .empathy-conclusion .conclusion-tagline {
  font-size: clamp(1.62rem, 5.2vw, 2.1rem) !important;
}
/* ≤340pxは溢れ防止で再縮小（R6-12e追い込みを維持） */
@media (max-width: 340px) {
  .empathy-section .empathy-conclusion .conclusion-highlight {
    font-size: clamp(1.15rem, 5.6vw, 1.4rem) !important;
  }
}

/* R8-3：「記憶のすべてを、一冊に綴じて。」写真と下の椅子写真の間を詰めて連結 */
@media (max-width: 900px) { #special-plan { padding-top: 8px !important; } }
.interlude-memory { margin-bottom: 0 !important; }

/* ============================================================
   REVISION 2026-07-11 R13 — フォーム送信完了「お申し込みを受け付けました。」
   の改行を整える（PC=1行 / SP=2行）。文言は form.js が
   <br class="sp-only"> 入りで挿入（sp-only は 769px 以上で非表示）。
   PC は自動折り返しを防ぐため nowrap を付与。 ======================= */
@media (min-width: 769px) {
  .status-title { white-space: nowrap; }
}

/* ============================================================
   REVISION 2026-07-11 R15 — 完了タイトルを全機種で2行に統一。
   form.js が <br class="sp-only"> を実挿入（従来 textContent で
   改行が入らず 320/375 で3〜4行化＋「た」孤立していた）。
   SP は狭幅(320)でも2行目「受け付けました」が収まるよう字を締める。
   ======================= */
@media (max-width: 768px) {
  /* 余白は既定(2rem)のまま＝戻るボタンの折返しを崩さない。字だけ締めて
     最狭320でも「受け付けました」が2行目に収まるサイズにする。 */
  .status-title { font-size: 1.3rem; }
}