@charset "UTF-8";

/* =========================================================
   EVERBLOOM トップページ
   IMPLEMENTATION_SPEC.md の確定仕様に基づく実装
   構成： トークン → リセット → 共通 → ヘッダー/メニュー
          → BLOCK 1〜5 → フッター → 表示演出 → メディアクエリ
   ========================================================= */

/* ---------- デザイントークン ---------- */
:root {
  --color-bg: #f7f4ef;
  --color-surface: #fffdf9;
  --color-text: #2d2926;
  /* 通常の本文用。見出し・商品名・価格など（--color-text）より少しやわらかい、温かみのあるダークグレー。
     背景 #f7f4ef で8.3:1、#fffdf9 で9.0:1（FAQの回答と同じ色） */
  --color-body: #4d4742;
  --color-muted: #766f68;
  --color-line: #ddd6cc;
  --color-accent: #aa8f70;
  /* 英字見出し（.eyebrow）用。--color-accent よりわずかに濃く、
     13pxでもコントラスト比4.5:1以上を確保する。 */
  --color-accent-strong: #8a6d4e;
  --color-line-green: #06c755;

  --content-width: 1120px;
  --side-pc: clamp(32px, 5vw, 72px);
  --side-sp: 22px;
  --section-pc: clamp(120px, 11vw, 168px);
  --section-sp: clamp(84px, 24vw, 112px);

  /* 書体は変数経由でのみ参照する（最終採用フォントは要確認） */
  --font-brand: "Cormorant Garamond", "Times New Roman", serif;
  --font-heading: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --header-height: 60px;
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, figcaption, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

/* メニュー展開中の背景スクロール停止 */
body.is-menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 12px 18px;
  font-size: 14px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------- 共通 ---------- */
.container {
  width: 100%;
  max-width: calc(var(--content-width) + var(--side-sp) * 2);
  margin-inline: auto;
  padding-inline: var(--side-sp);
}
.container--narrow { max-width: 720px; }

.block { padding-block: var(--section-sp); }

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(21px, 5.6vw, 26px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.04em;
}
.section-title--center { text-align: center; }

.section-lead {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--color-body);
}

/* LED / CANDLE 2WAY・RIBBON MESSAGE・STORY MOTIF の英字見出し。
   3つとも同じ色（--color-accent-strong）を使う。 */
.eyebrow {
  font-family: var(--font-brand);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--color-accent-strong);
  text-transform: uppercase;
}

.label {
  margin-top: 12px;
  font-family: var(--font-brand);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  text-align: center;
}

/* テキストリンク（文字と細い下線だけ。ボタン枠・塗り・矢印は付けない） */
.text-link {
  margin-top: 28px;
  font-size: 15px;
}
.text-link a {
  display: inline-block;
  padding: 12px 0 5px;
  border-bottom: 1px solid var(--color-accent);
  color: var(--color-text);
  text-decoration: none;
  transition: color 240ms ease, border-color 240ms ease;
}
.text-link a:hover {
  color: var(--color-accent-strong);
  border-bottom-color: var(--color-accent-strong);
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: transparent;
  transition: background-color 400ms ease, box-shadow 400ms ease;
}
.site-header.is-scrolled {
  background: rgba(255, 253, 249, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.site-header__inner {
  position: relative;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--side-sp);
}
.site-header__brand {
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: #fffdf9;
  text-shadow: 0 1px 14px rgba(60, 48, 38, 0.35);
  transition: color 400ms ease, text-shadow 400ms ease;
}
.site-header.is-scrolled .site-header__brand {
  color: var(--color-text);
  text-shadow: none;
}

/* ハンバーガー（JSが動く環境でのみ表示する） */
.menu-toggle { display: none; }
.js .menu-toggle {
  position: absolute;
  right: max(12px, calc(var(--side-sp) - 10px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 22px;
  height: 1px;
  background: #fffdf9;
  transition: background-color 400ms ease, transform 260ms ease, opacity 200ms ease;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
}
.menu-toggle__bars::before { transform: translateY(-7px); }
.menu-toggle__bars::after { transform: translateY(7px); }

/* 白背景（スクロール後）では、3本線が四角い塊に見えないよう細く・薄くする */
.site-header.is-scrolled .menu-toggle__bars,
.site-header.is-scrolled .menu-toggle__bars::before,
.site-header.is-scrolled .menu-toggle__bars::after { background: var(--color-muted); }

@media (min-resolution: 2dppx) {
  .menu-toggle__bars,
  .menu-toggle__bars::before,
  .menu-toggle__bars::after { height: 0.5px; }
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: rotate(45deg); background: var(--color-text); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: rotate(-45deg); background: var(--color-text); }

/* ---------- メニュー ---------- */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(45, 41, 38, 0.28);
  opacity: 0;
  visibility: hidden;
  /* 開くときは即座に visible、閉じるときはフェード後に hidden にする。
     visibility を補間させると、開いた直後にフォーカスを移せない。 */
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 0s linear 0s;
}

.global-menu {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.global-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 0s linear 0s;
}

.global-menu__panel {
  background: var(--color-surface);
  padding: 78px var(--side-sp) 40px;
  max-height: 100svh;
  overflow-y: auto;
}
.menu-close {
  position: absolute;
  top: 8px;
  right: max(12px, calc(var(--side-sp) - 10px));
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.global-menu__list {
  max-width: var(--content-width);
  margin-inline: auto;
}
.global-menu__item {
  display: block;
  padding: 15px 0;
  min-height: 44px;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}
a.global-menu__item { color: var(--color-text); }
a.global-menu__item:hover { color: var(--color-accent); }
/* 詳細ページで、いま開いているページの項目 */
a.global-menu__item[aria-current="page"] { color: var(--color-accent-strong); }

/* LINEで相談・お見積もり：通常の項目より少しだけCTAらしく（塗りつぶしにはしない） */
.global-menu__cta { margin-top: 28px; }
.global-menu__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--color-line-green);
  border-radius: 5px;
  color: var(--color-text);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 240ms ease;
}
.global-menu__line:hover { background: rgba(6, 199, 85, 0.06); }
.global-menu__line-icon {
  width: 20px;
  height: 20px;
  fill: var(--color-line-green);
  flex: none;
}

/* ---------- 詳細ページ用ヘッダー ----------
   写真のないアイボリー背景でも読めるよう、濃い文字色で固定表示する。
   トップページには .site-header--solid を付けないため、トップの見え方は変わらない。 */
.site-header--solid {
  background: rgba(255, 253, 249, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.site-header--solid .site-header__brand {
  color: var(--color-text);
  text-shadow: none;
}
.site-header--solid .menu-toggle__bars,
.site-header--solid .menu-toggle__bars::before,
.site-header--solid .menu-toggle__bars::after { background: var(--color-muted); }
/* 詳細ページのブランド名はトップページへのリンク（タップ領域44px） */
a.site-header__brand {
  display: inline-block;
  padding-block: 5px;
  text-decoration: none;
}

/* ---------- BLOCK 1｜ファーストビュー ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@supports not (height: 100svh) {
  .hero { height: 100vh; }
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* コピーの可読性を補助する、ごく薄いグラデーション（白いボックスは置かない） */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(60, 48, 38, 0.22) 0%, rgba(60, 48, 38, 0) 24%),
    radial-gradient(115% 52% at 50% 50%, rgba(60, 48, 38, 0.22) 0%, rgba(60, 48, 38, 0) 68%),
    linear-gradient(to bottom, rgba(60, 48, 38, 0) 62%, rgba(60, 48, 38, 0.16) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-inline: var(--side-sp);
  text-align: center;
}
.hero__copy {
  font-family: var(--font-heading);
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: #fffdf9;
  text-shadow: 0 1px 3px rgba(60, 48, 38, 0.32), 0 2px 26px rgba(60, 48, 38, 0.5);
}

/* ---------- FLEUR TOI｜商品名紹介（ファーストビュー直後） ---------- */
.block--intro {
  background: var(--color-surface);
  text-align: center;
}
.intro__title { font-weight: 400; }
.intro__body {
  margin-top: 40px;
  letter-spacing: 0.03em;
  color: var(--color-body);
}
.intro__body p { line-height: 2.1; }
.intro__body p + p { margin-top: 24px; }

/* 商品名（トップの紹介セクションと /fleur-toi/ の冒頭で共通） */
.product-name {
  display: block;
  font-family: var(--font-brand);
  font-size: clamp(34px, 10vw, 44px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.product-kana {
  display: block;
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--color-muted);
}

/* 文節のまとまり。幅が足りないときだけ文節の切れ目で自然に折り返す（固定改行ではない）。
   .phrase は768px以上で指示書どおりの行の区切りにそろえる。.keep は文節単位で折り返すだけ。 */
.phrase,
.keep {
  display: inline-block;
  max-width: 100%;
}

/* ---------- BLOCK 2｜花束から完成品へ ---------- */
.block--bouquet { background: var(--color-bg); }

.compare,
.twoway__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* スマートフォンでも縦積みにしない */
  gap: 14px;
  margin-top: 44px;
}
.compare__item img,
.twoway__item img { width: 100%; }
.compare__item img {
  aspect-ratio: 5 / 6;
  object-fit: cover;
}
.twoway__item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.twoway { margin-top: var(--section-sp); }
.twoway__title,
.monitor-notice__title {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: clamp(19px, 5vw, 23px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.04em;
}
.twoway__text {
  margin-top: 18px;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--color-body);
}
.twoway__note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
}

/* ---------- BLOCK 3｜EVERBLOOMならではの仕立て ---------- */
.block--craft { background: var(--color-surface); }

.craft { margin-top: 56px; }
.craft + .craft { margin-top: var(--section-sp); }

.craft__title {
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: clamp(19px, 5vw, 23px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.04em;
}
.craft__media { margin-top: 26px; }
.craft__body {
  margin-top: 24px;
  letter-spacing: 0.03em;
  color: var(--color-body); /* ※の補足（.craft__note）は --color-muted のまま */
}
.craft__body p + p { margin-top: 18px; }
.craft__note {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-muted);
}
.craft__caption {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
}

/* ---------- モニター募集の導線（ファーストビュー直下＋最終CTAの下） ----------
   写真を使わず、文字と余白だけの静かな案内。
   見出しは .twoway__title と共通、リンクは既存の .text-link をそのまま使う。
   バナー・強い枠線・セール表現（取り消し線・赤字・割引率）は使わない。 */
.block--monitor {
  background: var(--color-bg);
  /* ファーストビュー直下に置くため、通常のブロックより余白を控えめにする */
  padding-block: calc(var(--section-sp) * 0.72);
  text-align: center;
}
/* 募集条件：本文よりわずかに大きく・字間を広げて読み取りやすくする（強調色は使わない） */
.monitor-notice__terms {
  margin-top: 20px;
  font-size: clamp(15px, 4vw, 16px);
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
.text-link__arrow {
  margin-left: 0.5em;
  font-size: 0.95em;
}

/* 最終CTAの下：LINEボタンと細い線で区切った、小さなお知らせ */
.cta-monitor {
  max-width: 30em;
  margin: 44px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--color-line);
}
.cta-monitor__text {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-body);
}
.cta-monitor__price {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.cta-monitor .text-link { margin-top: 16px; }
.text-link--small { font-size: 14px; }

@media (min-width: 768px) {
  .block--monitor { padding-block: calc(var(--section-sp) * 0.8); }
  .cta-monitor { margin-top: 52px; padding-top: 38px; }
}

/* ---------- BLOCK 4｜詳細ページへの導線 ---------- */
.block--nav {
  background: var(--color-bg);
  /* 第5ブロック（LINE相談）までの余白を控えめにする */
  padding-bottom: calc(var(--section-sp) * 0.85);
}

/* 4枚カード：スマートフォン1列／768px以上で2列×2段。比率は6:5で統一。
   画像にタイトル文字が入っているため、HTMLの文字は重ねない。 */
.cards {
  display: grid;
  gap: 18px;
  max-width: 1200px;
  margin: 48px auto 0;
}
.card {
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; /* iOSの灰色のタップ表示は出さず、下の .is-pressed で浮き上がりを見せる */
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
}
.card__img {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
}
/* タッチ操作：触れた瞬間に、カード全体をほんの少し上へ浮かせ、ごく薄い影を添える（200ms）。
   .is-pressed は main.js がタッチ操作のときだけ付け外しする（PCのマウス操作・キーボードでは付かない）。
   ページ移動は遅らせない */
.card.is-pressed {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 41, 38, 0.1);
}

/* ---------- BLOCK 5｜LINE相談 ---------- */
.block--cta {
  background: var(--color-surface);
  padding-block: calc(var(--section-sp) * 0.95);
  text-align: center;
}
.cta__copy {
  font-family: var(--font-heading);
  font-size: clamp(20px, 5.4vw, 25px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
/* スマートフォンのみの改行。768px以上（PC）では無効にして1行で表示する */
@media (min-width: 768px) {
  .br-sp { display: none; }
}
.line-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  min-height: 56px;
  margin: 40px auto 0;
  padding: 0 20px;
  border-radius: 5px;
  background: var(--color-line-green);
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 240ms ease;
}
a.line-button:hover { background: #05b14c; }
.line-button__icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: none;
}

/* ---------- フッター ---------- */
.site-footer {
  background: #efe9e0;
  padding-block: 56px;
  text-align: center;
}
.site-footer__brand {
  font-family: var(--font-brand);
  font-size: 17px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}
.site-footer__links { margin-top: 22px; }
.site-footer__links a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer__links a:hover { border-bottom-color: var(--color-line); }
.site-footer__copyright {
  margin-top: 18px;
  color: var(--color-muted);
}
.site-footer__copyright small { font-size: 12px; letter-spacing: 0.06em; }

/* 運営者情報（全ページ共通）
   特定商取引法に基づく表記・プライバシーポリシーのリンクは、ページ作成後に
   運営者情報の下へ ul.site-footer__legal として追加する想定。 */
.site-footer__operator {
  /* 3行とも中央揃え（EVERBLOOM・Instagram・コピーライトと同じ揃え方） */
  max-width: 100%;
  margin: 28px auto 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-muted);
  text-align: center;
}
.site-footer__heading {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.site-footer__info { margin: 6px 0 0; }
.site-footer__row dt,
.site-footer__row dd {
  display: inline;
  margin: 0;
}
.site-footer__row dt::after { content: "："; }
.site-footer__info a {
  display: inline-block;
  padding: 10px 2px;
  margin: -10px -2px;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 4px;
}
.site-footer__info a:hover { text-decoration-color: var(--color-accent); }

/* 法務ページへのリンク（プライバシーポリシー／今後の特定商取引法に基づく表記）。
   横並びで中央揃え。項目が増えても幅が足りなければ自動で折り返す。 */
.site-footer__legal { margin-top: 12px; }
.site-footer__legal li { display: inline-block; }
.site-footer__legal a {
  display: inline-block;
  min-height: 44px;
  padding: 12px 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer__legal a:hover { border-bottom-color: var(--color-line); }

/* =========================================================
   詳細ページ共通（/fleur-toi/ /guide/ /faq/ /about/）
   見出し・本文・最大幅・セクション余白・CTAは、4ページともこのルールを使う。
   各セクションは独立した構造なので、写真を追加する場合は
   .detail-section の中へ要素を足すだけで済む。
   ========================================================= */
.page-detail {
  --detail-width: 720px;                  /* 中央要素の最大幅 */
  --detail-text-width: 34em;              /* 長文・リストの最大幅（約540px） */
  --detail-gap: clamp(64px, 18vw, 88px);  /* セクション間の余白 */
}

.detail { padding-top: var(--header-height); }

.detail-inner {
  width: 100%;
  max-width: calc(var(--detail-width) + var(--side-sp) * 2);
  margin-inline: auto;
  padding-inline: var(--side-sp);
}

/* ---------- ページ冒頭 ---------- */
.page-head {
  padding-top: clamp(56px, 15vw, 80px);
  text-align: center;
}
.page-head__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 6.4vw, 30px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.page-head__sub {
  display: block;
  margin-top: 20px;
  font-size: clamp(17px, 4.6vw, 20px);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
.page-head__sub::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 0 auto 18px;
  background: var(--color-accent);
}
.page-head__lead {
  margin-top: 32px;
  line-height: 2;
}
.page-head__lead p + p { margin-top: 12px; }

/* ---------- セクション ---------- */
/* 冒頭に短い区切り線（カード画像のタイトル下の線と同じモチーフ） */
.detail-section::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: var(--detail-gap) auto;
  background: var(--color-accent);
}
.detail-head { text-align: center; }
.detail-heading {
  font-family: var(--font-heading);
  font-size: clamp(20px, 5.4vw, 24px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.detail-heading--en {
  font-family: var(--font-brand);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}
.detail-copy {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: clamp(18px, 4.8vw, 21px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.detail-head > .detail-copy:first-child { margin-top: 0; }
.detail-statement {
  font-family: var(--font-heading);
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

/* 商品の重要な特徴（LED / CANDLE 2WAY）は、文字サイズと余白でひと回り強調する */
.detail-section--feature .detail-heading--en { font-size: clamp(23px, 6.2vw, 34px); }
.detail-section--feature .detail-copy {
  margin-top: 20px;
  font-size: clamp(20px, 5.6vw, 26px);
}

/* 本文：長い説明文は読みやすい幅で左揃え。短い文章は --center で中央揃え。
   文字色は見出しより少しやわらかい --color-body（※の補足 .detail-note は --color-muted のまま） */
.detail-body {
  max-width: var(--detail-text-width);
  margin: 32px auto 0;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--color-body);
}
.detail-body p + p { margin-top: 1.1em; }
.detail-body--center { text-align: center; }
.detail-note {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-muted);
}
.detail-body .detail-note { margin-top: 1.4em; }

/* ---------- 仕様（素材）：必要な情報として、メインコピーより控えめに ---------- */
.spec {
  max-width: var(--detail-text-width);
  margin: 40px auto 0;
}
.spec__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}
.spec__list {
  margin: 10px 0 0;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  line-height: 1.8;
}
.spec__row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
}
.spec__row dt {
  flex: 0 0 9em;
  color: var(--color-muted);
}
.spec__row dd { margin: 0; }

/* ---------- 料金：49,800円をいちばん分かりやすく。セール・値引きの表示はしない ---------- */
.price {
  margin-top: 32px;
  text-align: center;
}
.price__product {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.1em;
}
.price__size {
  margin-top: 2px;
  font-family: var(--font-brand);
  font-size: 17px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--color-accent-strong);
}
.price__amount {
  margin-top: 10px;
  font-family: var(--font-heading);
  line-height: 1.4;
}
.price__num {
  font-size: clamp(40px, 11vw, 52px);
  letter-spacing: 0.04em;
}
.price__yen {
  margin-left: 2px;
  font-size: clamp(20px, 5.4vw, 24px);
}
.price__tax {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.price__lead {
  margin-top: 36px;
  text-align: center;
}

.included {
  max-width: var(--detail-text-width);
  margin: 40px auto 0;
}
.included__title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}
.included__list {
  margin-top: 14px;
  border-top: 1px solid var(--color-line);
}
.included__list li {
  position: relative;
  padding: 13px 0 13px 20px;
  border-bottom: 1px solid var(--color-line);
  line-height: 1.8;
}
.included__list li::before {
  content: "";
  position: absolute;
  top: calc(13px + 0.9em - 2.5px);
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.included__sub {
  display: block;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
}

/* ---------- ご注文の流れ：数字・見出し・余白・最小限の線だけ（カード化しない） ---------- */
.steps {
  max-width: var(--detail-text-width);
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}
.step {
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--color-line);
}
.step__num {
  font-family: var(--font-brand);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--color-accent-strong);
}
.step__title {
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: clamp(17px, 4.6vw, 19px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.step__text {
  margin-top: 10px;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--color-body);
}

/* ---------- よくあるご質問：details / summary のアコーディオン（FAQ専用JSなし） ---------- */
.faq-list {
  max-width: var(--detail-text-width);
  margin: 32px auto 0;
  border-top: 1px solid var(--color-line);
}
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item__q {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 20px 44px 20px 0;
  font-weight: 500;
  line-height: 1.75;
  list-style: none;
  cursor: pointer;
}
.faq-item__q::-webkit-details-marker { display: none; }
/* 右端の＋（開いているときは−） */
.faq-item__icon {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--color-text);
  transition: transform 260ms ease, opacity 260ms ease;
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__icon::after {
  transform: rotate(0deg);
  opacity: 0;
}
.faq-item__a {
  padding: 0 0 26px;
  line-height: 1.95;
}
.faq-item__a p + p { margin-top: 0.9em; }
.faq-item__a .detail-note { margin-top: 1.2em; }
@media (hover: hover) and (pointer: fine) {
  .faq-item__q:hover { color: var(--color-accent-strong); }
}

/* ---------- EVERBLOOMについて（/about/ のみ。main.detail--about の中だけに効く） ---------- */
/* ページ上部：「EVERBLOOMについて」は控えめなページ見出し、「想いを、灯りに。」を主役のブランドメッセージに。
   2つの間の区切り線をなくし、ひとまとまりに見せる */
.detail--about .page-head__title {
  font-size: clamp(16px, 4.4vw, 18px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}
.detail--about .page-head + .detail-section::before { display: none; }
.detail--about .page-head + .detail-section { margin-top: 28px; }
.detail--about .detail-statement {
  font-size: clamp(26px, 8.6vw, 34px);
  line-height: 1.6;
}

/* 本文：文言はそのまま、行間と段落間を少しだけ詰める（余韻は残す） */
.detail--about .detail-body {
  margin-top: 40px;
  line-height: 2;
}
.detail--about .detail-body p + p { margin-top: 1.15em; }

/* 大切にしていること：控えめなラベル（.detail-label）の下に、2つの見出しを主役として置く */
.detail--about .detail-head + .story-item { margin-top: 20px; }
.detail--about .story-item .detail-body { margin-top: 26px; } /* 見出しと本文の文字間で約30px */
.detail--about .story-item + .story-item { margin-top: 72px; }

/* 日本語の改行：文節のまとまりで折り返す（auto-phrase ／ Chrome・Edge）、最終行の取り残しを抑える（pretty ／ 対応ブラウザのみ） */
.detail--about .detail-statement,
.detail--about .detail-copy,
.detail--about .detail-body {
  word-break: auto-phrase;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  /* PCのみセクション間の余白を詰める（/fleur-toi/・/guide/・/faq/ と同じ値。スマートフォンは共通ルールのまま） */
  .detail--about { --detail-gap: 92px; }
  .detail--about .page-head__title { font-size: 20px; }
  .detail--about .page-head + .detail-section { margin-top: 36px; }
  .detail--about .detail-statement { font-size: clamp(38px, 3vw, 44px); }
  .detail--about .detail-body { margin-top: 48px; }
  .detail--about .story-item + .story-item { margin-top: 96px; }
}

/* ---------- ページ下部のLINE CTA（4ページ共通。リンク先はすべて /line/） ---------- */
.detail-cta {
  margin-top: var(--detail-gap);
  padding-block: var(--detail-gap);
  background: var(--color-surface);
  text-align: center;
}
.detail-cta__text {
  margin-top: 20px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--color-body);
}
.detail-cta__text:first-child { margin-top: 0; }
.detail-cta__text p + p { margin-top: 12px; }

@media (min-width: 768px) {
  .page-detail { --detail-gap: clamp(96px, 9vw, 128px); }
  .page-head { padding-top: clamp(80px, 8vw, 112px); }
  .page-head__title { font-size: clamp(28px, 2.6vw, 32px); }
}

/* =========================================================
   /fleur-toi/（FLEUR TOI｜商品について）専用の調整
   main.detail--fleur-toi の中だけに効く。トップページ・他の詳細ページには影響しない。
   .size-spec / .twoway-pair は /fleur-toi/ だけで使用。
   制作期間の .detail-label / .period と改行用の .nw は /fleur-toi/ と /guide/ で共通。
   ========================================================= */

/* 語句の途中で改行させないまとまり（途中で分かれると不自然な語句にだけ使う） */
.nw { white-space: nowrap; }

/* 英字見出しの数字を大文字の高さにそろえる（2WAY の「2」）。書体はそのまま */
.detail--fleur-toi .detail-heading--en { font-variant-numeric: lining-nums; }

/* フルールトワ：13px → 14px（トップページの紹介セクションは変更しない） */
.detail--fleur-toi .product-kana { font-size: 14px; }

/* 冒頭の説明文：本文色と字間・段落間をやわらかく（見出し「FLEUR TOI／商品について」はそのまま） */
.detail--fleur-toi .page-head__lead {
  letter-spacing: 0.03em;
  color: var(--color-body);
}
.detail--fleur-toi .page-head__lead p + p { margin-top: 14px; }

/* M SIZE：寸法の数値を主役に。「高さ」「直径」と「×」は控えめ */
.size-spec {
  margin-top: 16px;
  font-family: var(--font-heading);
  line-height: 1.5;
}
.size-spec__item { white-space: nowrap; }
.size-spec__label {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
.size-spec__value {
  font-size: clamp(22px, 6.2vw, 26px);
  letter-spacing: 0.04em;
}
.size-spec__times {
  margin-inline: 0.3em;
  font-size: 15px;
  color: var(--color-muted);
}

/* LED / CANDLE 2WAY：要点の2文を一組にして中央揃え・明朝体で（前後の説明文は左揃えのまま） */
.twoway-pair {
  max-width: 640px;
  margin: 36px auto 0;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: center;
}
.twoway-pair p + p { margin-top: 6px; }
.twoway-pair + .detail-body { margin-top: 36px; }

/* 制作期間：「制作期間」は控えめなラベル、期間の一文と「約2ヶ月」を目立たせる */
.detail-label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--color-muted);
}
.period {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.period__lead { font-size: clamp(17px, 4.8vw, 19px); }
.period__value {
  display: block;
  margin-top: 2px;
  font-size: clamp(28px, 8vw, 32px);
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  /* PCのみセクション間の余白を詰める（スマートフォンは共通ルールのまま） */
  .detail--fleur-toi { --detail-gap: 92px; }

  /* 素材欄はPCで約400pxに絞って中央に置く */
  .detail--fleur-toi .spec { max-width: 400px; }

  .size-spec { margin-top: 18px; }
  .size-spec__label { font-size: 14px; }
  .size-spec__value { font-size: 30px; }
  .size-spec__times { font-size: 17px; }

  .twoway-pair {
    margin-top: 40px;
    font-size: 18px;
  }
  .twoway-pair + .detail-body { margin-top: 40px; }

  .detail-label { font-size: 16px; }
  .period__lead { font-size: 21px; }
  .period__value {
    display: inline;
    margin: 0 0 0 0.25em;
    font-size: 34px;
  }
}

/* =========================================================
   /guide/（料金・ご注文の流れ）専用の調整
   main.detail--guide の中だけに効く。トップページ・他の詳細ページには影響しない。
   ========================================================= */
.detail--guide {
  /* 茶系の文字色。背景 #f7f4ef に対してコントラスト比4.5:1以上（約4.7:1） */
  --guide-accent: #846849;
}

/* 料金：「M SIZE」を少し濃く、「（税込・送料込）」を14pxに */
.detail--guide .price__size { color: var(--guide-accent); }
.detail--guide .price__tax { font-size: 14px; }

/* STEP番号：「STEP」は控えめ、数字は大文字の高さの字形で少し大きく */
.detail--guide .step,
.detail--monitor .step { padding: 22px 0 24px; }
.detail--guide .step__num,
.detail--monitor .step__num {
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--guide-accent);
  font-variant-numeric: lining-nums;
}
.detail--guide .step__label,
.detail--monitor .step__label {
  font-size: 13px;
  letter-spacing: 0.22em;
}
.detail--guide .step__digit,
.detail--monitor .step__digit {
  margin-left: 0.1em;
  font-size: 22px;
}

@media (min-width: 768px) {
  /* PCのみセクション間の余白を詰める（/fleur-toi/ と同じ値。スマートフォンは共通ルールのまま） */
  .detail--guide { --detail-gap: 92px; }

  /* 料金に含まれるもの：PCは約440pxに絞って中央に置く */
  .detail--guide .included { max-width: 440px; }

  /* STEP：左に番号、右に見出し＋本文の2列。カード・背景色・枠・影は付けず、区切り線と余白だけ */
  .detail--guide .step,
  .detail--monitor .step {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 24px;
    align-items: baseline;
    padding: 28px 0 30px;
  }
  .detail--guide .step__num,
  .detail--monitor .step__num {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .detail--guide .step__title,
  .detail--monitor .step__title {
    grid-column: 2;
    margin-top: 0;
  }
  .detail--guide .step__text,
  .detail--monitor .step__text { grid-column: 2; }
  .detail--guide .step__digit,
  .detail--monitor .step__digit { font-size: 24px; }
}

/* 料金：サイズ・1点/2点セットの2段表示（枠や背景は付けず、細い区切り線だけ） */
.detail--guide .price__dimension {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.detail--guide .price__rows {
  max-width: 420px;
  margin: 22px auto 0;
}
.detail--guide .price__row + .price__row {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}
.detail--guide .price__label {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--color-muted);
}
.detail--guide .price__amount { margin-top: 4px; }
/* 2点セットは1点より少しだけ控えめな大きさにして、価格表のように並べない */
.detail--guide .price__row--set .price__num { font-size: clamp(34px, 9.2vw, 44px); }
.detail--guide .price__row--set .price__yen { font-size: clamp(18px, 4.8vw, 21px); }

/* 追加料金なしで選べる仕立て：スマートフォンは縦積み、PCは2列 */
.detail--guide .choices { margin-top: 36px; }
.detail--guide .choices .spec__row {
  flex-direction: column;
  gap: 4px;
}
.detail--guide .choices .spec__row dt {
  flex: none;
  letter-spacing: 0.08em;
}

/* STORY MOTIF：オプション料金（見出しより控えめに、価格表にはしない）
   /guide/ と /fleur-toi/ で共通で使います */
.option-price {
  margin-top: 28px;
  font-family: var(--font-heading);
  text-align: center;
}
.option-price__label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--color-muted);
}
.option-price__value {
  display: block;
  margin-top: 6px;
  font-size: clamp(22px, 6vw, 26px);
  letter-spacing: 0.04em;
}
.option-price__tax {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
/* 「近日提供予定」などのラベルと、その下の見出しの間隔 */
.detail-head .detail-label + .detail-heading { margin-top: 10px; }

/* LINE限定特典：細い上下の線だけ。色・枠・取り消し線でセール的に見せない */
.detail--guide .bonus {
  max-width: 420px;
  margin: 26px auto 0;
  padding: 22px 0 24px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}
.detail--guide .bonus__target {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--color-body);
}
.detail--guide .bonus__label {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--guide-accent);
}
.detail--guide .bonus__value {
  display: block;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: clamp(26px, 7.4vw, 30px);
  letter-spacing: 0.04em;
}
.detail--guide .bonus__tax {
  margin-left: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.detail--guide .bonus__regular {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* ご相談・ご注文：LINEとInstagram DMの2導線 */
.detail--guide .cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}
.detail--guide .cta-actions .line-button { margin: 0; }
.dm-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  min-height: 56px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-radius: 5px;
  color: var(--color-text);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color 240ms ease, color 240ms ease;
}
a.dm-button:hover {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
}
.detail--guide .cta-note { margin-top: 20px; }

@media (min-width: 768px) {
  .detail--guide .choices { max-width: 440px; }
  .detail--guide .choices .spec__row {
    flex-direction: row;
    gap: 16px;
  }
  .detail--guide .choices .spec__row dt { flex: 0 0 13em; }
  .detail--guide .cta-actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .detail--guide .cta-actions .line-button,
  .detail--guide .dm-button { width: 300px; }
}

/* =========================================================
   /monitor/（モニター募集）専用の調整
   main.detail--monitor の中だけに効く。既存ページには影響しない。
   見出し・本文・余白・STEP・CTAは既存クラスをそのまま使っています。
   ========================================================= */
.detail--monitor {
  /* STEP番号に使う茶系の文字色（/guide/ と同じ値・同じ見た目） */
  --guide-accent: #846849;
}

/* ページ冒頭の概要（商品・モニター価格・募集人数） */
.detail--monitor .monitor-summary { margin-top: 32px; }

/* 仕様・概要のリスト：スマートフォンは縦積み、PCは2列（/guide/ の「選べる仕立て」と同じ考え方） */
.detail--monitor .spec__row {
  flex-direction: column;
  gap: 4px;
}
.detail--monitor .spec__row dt {
  flex: none;
  letter-spacing: 0.08em;
}

/* モニター価格：細い上下の線だけ。取り消し線・色による強調はしない */
.detail--monitor .monitor-price {
  max-width: 420px;
  margin: 28px auto 0;
  padding: 24px 0 26px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}
.detail--monitor .monitor-price__product {
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.detail--monitor .monitor-price__label {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--guide-accent);
}
.detail--monitor .price__amount { margin-top: 4px; }
.detail--monitor .monitor-price__regular {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.detail--monitor .monitor-price__count {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-body);
}

/* 商品写真：トップページの並べ方を流用しつつ、詳細ページの余白に合わせる */
.detail--monitor .twoway { margin-top: 48px; }
.detail--monitor .twoway__head { text-align: center; }
.detail--monitor .monitor-figure {
  max-width: var(--detail-text-width);
  margin: 32px auto 0;
}
.detail--monitor .monitor-figure .craft__caption {
  margin-top: 10px;
  text-align: center;
}

@media (min-width: 768px) {
  /* セクション間の余白は他の詳細ページと同じ（区切り線の上下92px） */
  .detail--monitor { --detail-gap: 92px; }
  .detail--monitor .monitor-summary,
  .detail--monitor .spec { max-width: 440px; }
  .detail--monitor .spec__row {
    flex-direction: row;
    gap: 16px;
  }
  .detail--monitor .spec__row dt { flex: 0 0 13em; }
  .detail--monitor .included { max-width: 440px; }
  .detail--monitor .twoway { margin-top: 56px; }
}

/* =========================================================
   /privacy/（プライバシーポリシー）専用の調整
   main.detail--privacy の中だけに効く。既存ページには影響しない。
   法務ページなので装飾は最小限にし、読みやすさ（幅・行間・番号）を優先する。
   ========================================================= */
.detail--privacy,
.detail--law {
  /* 番号の色。/guide/ /monitor/ と同じ、背景に対して4.5:1以上の茶色 */
  --guide-accent: #846849;
  padding-bottom: clamp(64px, 16vw, 96px);
}
.detail--privacy .policy,
.detail--law .policy {
  max-width: var(--detail-text-width);
  margin: clamp(40px, 10vw, 56px) auto 0;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--color-body);
}
.detail--privacy .policy__intro { margin: 0; }

/* 日本語の改行：/faq/ と同じ考え方。文節のまとまりで折り返し（word-break: auto-phrase ／
   Chrome・Edge が対応）、最終行に1〜2文字だけ残る折り返しを抑える（text-wrap: pretty）。
   非対応のブラウザでは従来どおり line-break: strict の改行になる。 */
.detail--privacy .policy,
.detail--law .policy {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 条文：上に細い線を1本だけ引き、前後に同じ余白を取る */
.detail--privacy .policy__item {
  margin-top: clamp(28px, 7vw, 36px);
  padding-top: clamp(28px, 7vw, 36px);
  border-top: 1px solid var(--color-line);
}
.detail--privacy .policy__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.detail--privacy .policy__num {
  flex: none;
  min-width: 1.4em;
  font-family: var(--font-brand);
  font-size: 16px;
  letter-spacing: 0.04em;
  /* 大文字の高さの数字にする（/guide/ /monitor/ のSTEP番号と同じ） */
  font-variant-numeric: lining-nums;
  color: var(--guide-accent);
}
.detail--privacy .policy__item p,
.detail--privacy .policy__item ul,
.detail--privacy .policy__item dl { margin-top: 1.1em; }

/* 箇条書き：トップページ・/guide/ と同じ小さな丸 */
.detail--privacy .policy__list li,
.detail--law .policy__list li {
  position: relative;
  padding-left: 18px;
}
.detail--privacy .policy__list li + li,
.detail--law .policy__list li + li { margin-top: 0.4em; }
.detail--privacy .policy__list li::before,
.detail--law .policy__list li::before {
  content: "";
  position: absolute;
  top: calc(1em - 2.5px);
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* 事業者情報・お問い合わせ窓口：フッターの運営者情報と同じ「項目：内容」の並べ方 */
.detail--privacy .policy__name { font-weight: 500; }
.detail--privacy .policy__row dt,
.detail--privacy .policy__row dd {
  display: inline;
  margin: 0;
}
.detail--privacy .policy__row dt::after { content: "："; }
/* 「お問い合わせ」などの項目名は、狭い画面でも途中で折り返さない */
.detail--privacy .policy__row dt { white-space: nowrap; }
.detail--privacy .policy a,
.detail--law .policy a {
  display: inline-block;
  padding: 10px 2px;
  margin: -10px -2px;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 4px;
}
.detail--privacy .policy a:hover,
.detail--law .policy a:hover { text-decoration-color: var(--color-accent); }

.detail--privacy .policy__date {
  margin-top: clamp(32px, 8vw, 40px);
  padding-top: clamp(20px, 5vw, 24px);
  border-top: 1px solid var(--color-line);
  font-size: 13px;
  color: var(--color-muted);
  text-align: right;
}

@media (min-width: 768px) {
  .detail--privacy .policy__heading { font-size: 18px; }
  .detail--privacy .policy__num { font-size: 17px; }
}

/* ---------- /law/（特定商取引法に基づく表記）の項目 ----------
   本文の幅・行間・色・改行ルールは /privacy/ と共有し、ここでは並べ方だけを決める。
   項目を足すときは .law__row をひとつ足すだけでよい。 */
.detail--law .law { margin: 0; }
.detail--law .law__row {
  margin-top: clamp(28px, 7vw, 36px);
  padding-top: clamp(28px, 7vw, 36px);
  border-top: 1px solid var(--color-line);
}
.detail--law .law__row:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.detail--law .law__term {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.detail--law .law__desc { margin: 0; }
.detail--law .law__desc > * { margin-top: 1.1em; }
/* 「通常商品：」などの小見出しは、段落より少し間隔を空けて区別する */
.detail--law .law__sub { margin-top: 1.5em; color: var(--color-text); }
.detail--law .law__product { margin-top: 0.8em; }
.detail--law .policy__list { margin-top: 0.6em; }

@media (min-width: 768px) {
  /* PCは「項目名｜内容」の2列。項目名でたどりやすくする */
  .detail--law .policy { max-width: 100%; }
  .detail--law .law__row {
    display: grid;
    grid-template-columns: 12em minmax(0, 1fr);
    column-gap: 32px;
  }
  .detail--law .law__desc > *:first-child { margin-top: 0; }
  .detail--law .law__sub:first-child { margin-top: 0; }
}

/* =========================================================
   /faq/（よくあるご質問）専用の調整
   main.detail--faq の中だけに効く。トップページ・他の詳細ページには影響しない。
   ========================================================= */

/* 日本語の改行：文節のまとまりで折り返す（word-break: auto-phrase ／ Chrome・Edge が対応）。
   最終行に1〜2文字だけ残る折り返しを抑える（text-wrap: pretty ／ 対応ブラウザのみ）。
   非対応のブラウザでは従来どおり line-break: strict の改行になる。 */
.detail--faq .page-head__lead,
.detail--faq .faq-item__q,
.detail--faq .faq-item__a,
.detail--faq .detail-cta__text {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 質問と回答の区別：質問は16px・やや太めのまま。回答は15px・本文より少し柔らかい濃いグレー。
   質問との間を少し詰め、回答の下に余白を取って「質問＋回答」をひとまとまりに見せる */
.detail--faq .faq-item__a {
  padding-bottom: 30px;
  font-size: 15px;
  line-height: 1.9;
  color: #4d4742;
}

/* ＋／−：14px → 16px */
.detail--faq .faq-item__icon {
  width: 16px;
  height: 16px;
  margin-top: -8px;
}
.detail--faq .faq-item__icon::before,
.detail--faq .faq-item__icon::after {
  top: 8px;
  width: 16px;
}

/* 質問行のフォーカス枠：背景 #f7f4ef に対してコントラスト比3:1以上（約4.7:1）。/faq/ のみ */
.detail--faq .faq-item__q:focus-visible {
  outline-color: #846849;
  outline-offset: 2px; /* 開いた回答の1行目に枠が重ならないように */
}

@media (min-width: 768px) {
  /* PCのみセクション間の余白を詰める（/fleur-toi/・/guide/ と同じ値。スマートフォンは共通ルールのまま） */
  .detail--faq { --detail-gap: 92px; }
}

/* =========================================================
   表示演出
   初期非表示は .reveal-ready が付いているときだけ有効。
   main.js が動かない場合は全要素が最初から表示される。
   ========================================================= */
[data-reveal] {
  transition:
    opacity 850ms var(--ease-reveal) var(--reveal-delay, 0ms),
    transform 850ms var(--ease-reveal) var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: opacity, transform;
}

/* ヒーローの時間差表示（初回のみ・opacityと8pxの移動だけ） */
.site-header__brand,
.hero__copy {
  transition: opacity 900ms ease, transform 900ms ease;
}
.reveal-ready .site-header__brand,
.reveal-ready .hero__copy {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}
.reveal-ready .site-header__brand { transition-delay: 150ms; }
.reveal-ready .hero__copy { transition-delay: 500ms; }
.reveal-ready.is-hero-in .site-header__brand,
.reveal-ready.is-hero-in .hero__copy {
  opacity: 1;
  transform: none;
}

/* フォールバック発動時は動きなしで即時表示（点滅させない） */
.no-reveal-transition,
.no-reveal-transition *,
.no-reveal-transition *::before,
.no-reveal-transition *::after {
  transition: none !important;
  animation: none !important;
}

/* =========================================================
   メディアクエリ
   ========================================================= */
@media (min-width: 768px) {
  :root {
    --side-sp: var(--side-pc);
    --section-sp: var(--section-pc);
    --header-height: 72px;
  }
  body { font-size: 16px; }

  .site-header__brand { font-size: 21px; }
  .global-menu__panel { padding-top: 92px; padding-bottom: 56px; }
  .global-menu__list { max-width: 520px; }

  .hero { height: 92vh; min-height: 600px; }
  .hero__media img { object-position: 50% 46%; }

  .compare, .twoway__grid { gap: 32px; margin-top: 56px; }
  /* 第2ブロックの本文が横に広がりすぎないよう、1行の長さを抑える */
  .section-lead { max-width: 41em; }  /* 本文の字間0.03emでも、PCで「生かしながら、」の後で自然に改行される幅 */
  .twoway__text { max-width: 40em; }

  /* 4枚カード：2列×2段（カード間 約28px） */
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 56px;
  }

  .product-name { font-size: clamp(44px, 4.4vw, 54px); }
  /* 中央揃えの短い文章は、画面に余裕があるので指示書どおりの行の区切りにそろえる */
  .phrase { display: block; }

  .line-button { min-height: 58px; }
}

@media (min-width: 1024px) {
  .section-title { font-size: clamp(24px, 2.2vw, 28px); }

  /* BLOCK 3：写真55%・文章45%を左右交互に。SPのDOM順（ラベル→写真→本文→キャプション）は保持。 */
  .craft {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
    grid-template-areas:
      "media head"
      "media body"
      "caption body";
    margin-top: 72px;
  }
  .craft--reverse {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-areas:
      "head media"
      "body media"
      "body caption";
  }
  .craft__head { grid-area: head; }
  .craft__media { grid-area: media; margin-top: 0; }
  .craft__body { grid-area: body; margin-top: 28px; }
  .craft__caption { grid-area: caption; }

  /* BLOCK 3 → BLOCK 4 の間隔 */
  .block--craft { padding-bottom: clamp(140px, 12vw, 160px); }
  .block--nav { padding-top: clamp(140px, 12vw, 160px); }

  .line-button { max-width: 320px; }
}

/* PCのマウス操作時のみ、カード画像をごく控えめに拡大する（1.02倍） */
@media (hover: hover) and (pointer: fine) {
  .card__img { transition: transform 680ms var(--ease-reveal); }
  .card:hover .card__img { transform: scale(1.02); }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-reveal],
  .reveal-ready [data-reveal]:not(.is-revealed),
  .reveal-ready .site-header__brand,
  .reveal-ready .hero__copy {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* 4枚カード：浮き上がり・拡大はせず、タッチしたときの薄い影だけ残す */
  .card.is-pressed,
  .card:hover .card__img { transform: none; }
}