/* =========================================
   plume LP（試作品）
   スマホ表示を基準に作り、画面が広い場合だけ調整しています
   ========================================= */

:root {
  --ivory: #fbf8f2;
  --ivory-dark: #f5efe4;
  --beige: #ede2d0;
  --beige-line: #dccdb5;
  --wood: #8b6a4e;
  --wood-dark: #6b4f38;
  --text: #4a3c30;
  --text-sub: #7a6a5c;
  --white: #fffdf9;

  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;

  /* 文字の共通サイズ（文章を追加するときはこの値を使う） */
  --fs-body: 15px;      /* 本文・説明文 */
  --lh-body: 1.9;
  --ls-body: 0.04em;
  --fs-lead: 16px;      /* 中央寄せの短いメッセージ（.lead） */
  --lh-lead: 2;
  --fs-small: 12px;     /* 注記・補足 */
  --lh-small: 1.7;

  /* スマホの左右の余白 */
  --gutter: 20px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  /* 日本語を文節で改行（対応ブラウザのみ） */
  word-break: auto-phrase;
  /* 下部の固定ボタンと重ならないための余白は、最後のフッターの中で取る（.footer） */
}

h1, h2, h3, p, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

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

strong {
  color: var(--wood-dark);
}

.nowrap { white-space: nowrap; }

/* 文節改行に対応していないブラウザ（iPhoneのSafariなど）：
   文字の途中では改行せず、index.html のスクリプトが入れた区切り（文節の切れ目）でだけ改行する。
   1つの文節が1行に入らないときは、body の overflow-wrap でその中でも改行される */
.js-phrase body { word-break: keep-all; }
.pc-only { display: none; }

/* =========================================
   文字組みの基本ルール
   - 見出し・短いキャッチコピー … 中央寄せ（各見出しのクラスで指定）
   - 2〜3行以上の説明文 ……………… 左寄せ（下の共通ルールが標準）
   - 改行は <br> に頼らず、画面幅で自然に折り返す
   ※ :where() で優先度を0にしているので、個別のクラス指定があればそちらが優先されます
   ========================================= */

/* 本文：大きさ・行間・字間を統一（配置は親から引き継ぎ、標準は左寄せ） */
:where(main) :where(p, li, dt, dd, summary, figcaption) {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 本文の折り返し：行末に1〜2文字だけ残る改行を減らす／句読点や小さい「っ」が行頭に来ないようにする */
:where(main, footer) :where(p, li, dt, dd, summary, figcaption) {
  text-wrap: pretty;
  line-break: strict;
  overflow-wrap: break-word;
}

/* 見出し：行の長さをそろえて、1文字だけの行を防ぐ */
:where(h1, h2, h3, h4) {
  text-wrap: balance;
  line-break: strict;
}

/* 文節のかたまり：見出しや中央寄せの短い文は <span class="wb">…</span> で区切ると、
   Safariを含むすべてのブラウザで、かたまりの切れ目だけで折り返す */
.wb { display: inline-block; }

/* 配置を個別に変えたいとき用 */
.u-center { text-align: center; }
.u-left { text-align: left; }

/* ---------- ヘッダー ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 242, 0.94);
  border-bottom: 1px solid var(--beige);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.header__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: block;
  line-height: 0;
}

/* 正式ロゴ画像。比率を保ったまま高さだけ指定 */
.logo__img {
  height: 48px;
  width: auto;
  /* 画像の白い背景をヘッダーの色になじませる（画像自体は変更しない） */
  mix-blend-mode: multiply;
}

.men-link {
  font-size: 12px;
  color: var(--text-sub);
  text-underline-offset: 3px;
}

/* ---------- 女性用LPのヘッダー（左：三本線メニュー／中央：ロゴ／右：ご予約）。動きは nav.js ----------
   メンズLPも .header を使うので、ここは header--nav の付いた女性用LPのヘッダーだけに効かせる */
.header--nav .header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 4px 12px;
}

/* 画面に固定したままでも邪魔にならないよう、ロゴは少し小さめ */
.header--nav .logo__img { height: 40px; }

/* 固定ヘッダーの分だけ、ページ内リンクの移動先を下げる（見出しが隠れないように） */
:root:has(.header--nav) { scroll-padding-top: 64px; }

.nav-toggle {
  justify-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wood-dark);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: var(--ivory-dark); }
.nav-toggle__bar {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}

/* 右上：男性向けLPへの控えめなテキストリンク「Men’s」 */
.header__men {
  justify-self: end;
  padding: 6px 2px;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  text-decoration: underline;
  text-decoration-color: var(--beige-line);
  text-underline-offset: 4px;
  white-space: nowrap;
  transition: color 0.2s;
}
.header__men:hover { color: var(--wood-dark); }

/* 右上の「Men’s」（女性用LP）・「LADIES」（メンズLP）：文字が小さく押しにくいので、見た目はそのままで
   押せる範囲だけを透明の枠で縦48px・横は文字＋左右8px（最低48px）に広げる。ヘッダーの高さは変わらない */
.header__men,
.men-link--to-women { position: relative; }
.header__men::after,
.men-link--to-women::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 16px);
  min-width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}

/* 背景を薄暗くする幕（タップで閉じる） */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(40, 32, 26, 0.45);
  opacity: 0;
  transition: opacity 0.3s;
}
.drawer-overlay.is-open { opacity: 1; }

/* メニュー本体：閉じているときは画面の左の外に置き、開くとスライドして入る */
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: min(84vw, 320px);
  background: var(--ivory);
  box-shadow: 4px 0 24px rgba(74, 60, 48, 0.16);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 24px;
  border-bottom: 1px solid var(--beige);
}
.drawer__title {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--wood);
}
.drawer__close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wood-dark);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.drawer__close:hover { background: var(--ivory-dark); }

/* 日本語の名前だけを1行ずつ。区切り線は細く薄く、左右に余白を残す */
.drawer__list {
  margin: 0;
  padding: 12px 0 24px;
  list-style: none;
}
.drawer__list li + li .drawer__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  border-top: 1px solid var(--beige);
}
.drawer__link {
  position: relative;
  display: block;
  padding: 15px 28px;
  color: var(--text);
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.drawer__link:hover { background: var(--ivory-dark); color: var(--wood-dark); }

/* メニューを開いている間は、後ろのページをスクロールさせない */
html.is-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer.is-open, .drawer-overlay { transition: none; }
}

@media (min-width: 768px) {
  .header--nav .header__inner { padding: 6px 24px; }
  .header--nav .logo__img { height: 44px; }
  .header__men { font-size: 15px; }
  :root:has(.header--nav) { scroll-padding-top: 72px; }
}

/* ---------- 写真の仮枠 ---------- */
.photo {
  overflow: hidden;
  border-radius: 16px;
}

.photo__placeholder {
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(139, 106, 78, 0.05) 14px 28px),
    var(--beige);
  border: 2px dashed var(--beige-line);
  border-radius: inherit;
  color: var(--wood);
}

.photo__label {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.photo__note {
  font-size: 12px;
  color: var(--text-sub);
}

.photo--hero .photo__placeholder { min-height: 300px; }
.photo--wide { margin-bottom: 28px; }

/* 実写真。縦横比はそのまま表示 */
.photo__img {
  width: 100%;
  height: auto;
}

/* ---------- サロン紹介動画 ---------- */
.intro-video {
  margin-top: 40px;
}

.intro-video__title,
.sub-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.6;
  text-align: center;
  color: var(--wood-dark);
  margin-bottom: 16px;
}

/* 縦横比は動画のまま。画面幅に合わせて縮小 */
.intro-video__player {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 16px;
  background: var(--beige);
}

.intro-video__frame {
  position: relative;
}

/* 再生／一時停止ボタン。止まっている間は中央に大きく表示 */
.intro-video__toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(107, 79, 56, 0.85);
  cursor: pointer;
  transition: opacity 0.2s;
}

.intro-video__icon {
  display: block;
  margin: 0 auto;
  /* 再生アイコン（三角） */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--white);
  transform: translateX(3px);
}

/* 再生中は右下の小さな一時停止ボタンに */
.is-playing .intro-video__toggle {
  left: auto;
  top: auto;
  right: 10px;
  bottom: 10px;
  transform: none;
  width: 36px;
  height: 36px;
  opacity: 0.6;
}

.is-playing .intro-video__toggle:hover,
.is-playing .intro-video__toggle:focus-visible { opacity: 1; }

.is-playing .intro-video__icon {
  /* 一時停止アイコン（二本線） */
  width: 12px;
  height: 14px;
  border: none;
  border-left: 4px solid var(--white);
  border-right: 4px solid var(--white);
  transform: none;
}

/* ---------- 光脱毛・ワックス脱毛の写真（「2つの脱毛方法」のカードで使用） ---------- */
/* 2枚の大きさをそろえるため同じ比率の枠に収める（切れるのは端のわずかな部分のみ） */
.method-photo__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* 正方形の写真は脱毛機と脚が中心に来るよう少し上寄せ */
.method-photo__img--light { object-position: 50% 30%; }

/* ---------- ファーストビュー ---------- */
.hero {
  padding: 16px 16px 56px;
  max-width: 960px;
  margin: 0 auto;
}

.hero__text {
  padding: 32px 4px 0;
  text-align: center;
}

.hero__area {
  font-size: 13px;
  color: var(--wood);
  margin-bottom: 16px;
}

.hero__copy {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--wood-dark);
  margin-bottom: 20px;
}

.hero__sub {
  font-size: 15px;
  color: var(--text-sub);
  margin-bottom: 32px;
}

.hero__tags {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-sub);
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  width: 100%;
  max-width: 360px;
  padding: 16px 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}

.btn--primary {
  background: var(--wood);
  color: var(--white);
  box-shadow: 0 4px 0 var(--wood-dark);
}

.btn--primary:hover { background: var(--wood-dark); }
.btn--primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--wood-dark); }
.btn--large { padding: 20px; font-size: 17px; }

/* アイコン付きボタン：アイコン・文字・矢印を1行で中央にそろえる */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 文字と矢印は1行のまま */
.btn--icon > span { white-space: nowrap; }

.btn__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--white);
}

/* お問い合わせ（LINE）用の枠線ボタン：予約ボタンより控えめに。色は --wood なのでメンズではチャコールになる */
.btn--outline {
  padding: 13px 20px;
  background: var(--white);
  border: 1.5px solid var(--wood);
  color: var(--wood-dark);
  font-size: 15px;
}

.btn--outline:hover { background: var(--ivory-dark); }
.btn--outline .btn__icon { width: 17px; height: 17px; color: currentColor; }

/* 予約ボタンとお問い合わせボタンを上下2段に（スマホもPCも横並びにしない） */
.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* メールでのお問い合わせ：ボタンにせず、小さな文字リンクで控えめに */
.mail-contact {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-sub);
  text-align: center;
}

.mail-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--wood-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

.mail-contact__icon { flex: none; width: 15px; height: 15px; }

/* ---------- セクション共通 ---------- */
.section {
  padding: 72px 0;
}

.section--beige { background: var(--beige); }
.section--ivory-dark { background: var(--ivory-dark); }

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

.section__en {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--wood);
  text-align: center;
  margin-bottom: 6px;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.6;
  text-align: center;
  color: var(--wood-dark);
  margin-bottom: 36px;
}

.section__title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--wood);
  border-radius: 2px;
}

.section p + p { margin-top: 1.2em; }

/* 中央寄せの短いメッセージ用。長い説明文には使わない */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-align: center;
}

/* plumeについて：導入文（.lead）の下の説明も中央そろえ */
.about-text { text-align: center; }

.small {
  font-size: var(--fs-small);
  color: var(--text-sub);
  line-height: var(--lh-small);
}

.section .small { margin-top: 16px; }

/* 試作品であることの注記 */
.proto-notice {
  font-size: 12px;
  line-height: 1.7;
  color: var(--wood-dark);
  background: var(--white);
  border: 1px dashed var(--beige-line);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 24px;
}

.section .proto-notice + * { margin-top: 0; }

/* ---------- 2. 不安への共感 ---------- */
.worry-list {
  background: var(--white);
  border-radius: 16px;
  padding: 24px 20px;
  margin-bottom: 36px;
}

.worry-list li {
  position: relative;
  padding: 12px 0 12px 32px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  border-bottom: 1px dashed var(--beige-line);
}

.worry-list li:last-child { border-bottom: none; }

.worry-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--wood);
  border-radius: 4px;
}

.worry-list li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 18px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--wood-dark);
  border-bottom: 2px solid var(--wood-dark);
  transform: rotate(45deg);
}

/* ---------- 4. 強み ---------- */
.feature {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  padding: 28px 22px 24px;
  margin-bottom: 20px;
  border-top: 4px solid var(--wood);
}

.feature__num {
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--beige-line);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.feature__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  color: var(--wood-dark);
  margin-bottom: 12px;
}

.feature p {
  font-size: var(--fs-body);
}

/* カード内の写真：トリミングせず全体を表示。角丸は方法写真（.method-photo__img）と同じ */
.feature__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 16px;
}

.note-box {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--text-sub);
}

/* ---------- 5. お客様の声 ---------- */
.voice-list {
  display: grid;
  gap: 16px;
}

.voice {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 24px 20px;
  font-family: var(--font-serif);
  font-size: 18px;
  text-align: center;
  color: var(--wood-dark);
}

/* 吹き出しのしっぽ */
.voice::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 32px;
  width: 18px;
  height: 18px;
  background: var(--white);
  transform: rotate(45deg);
}

.voice:nth-child(even)::after { left: auto; right: 32px; }

.voice-list + .small { margin-top: 24px; text-align: right; }

/* ---------- 4-2. 2つの脱毛方法 ---------- */
/* スマホは縦に2枚、PCは横並び（下の @media）。写真は使わず、アイコンと文字だけ */
.method-list {
  display: grid;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
}

.method-card {
  background: var(--white);
  border-radius: 16px;
  border-top: 4px solid var(--wood);
  padding: 24px 20px;
  text-align: center;
}

/* カード上部の施術写真（4:3・角丸は .method-photo__img） */
.method-card__photo {
  display: block;
  margin-bottom: 16px;
}

.method-card__title {
  margin-top: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--wood-dark);
}

.section .method-card__catch {
  margin: 6px 0 12px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--wood);
}

.section .method-card__catch + p {
  margin-top: 0;
  font-size: var(--fs-body);
  text-align: left;
}

.section .method-card__note {
  margin-top: 10px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-sub);
  text-align: left;
}

.section .method-note {
  max-width: 560px;
  margin: 24px auto 0;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  color: var(--wood-dark);
}

/* ---------- 5-2. 実際のお客様の施術経過 ---------- */
.case-list {
  display: grid;
  gap: 28px;
}

.case {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
}

.case__figure {
  margin: 0;
}

/* 比較写真は切り抜かず、正方形のまま全体を表示 */
.case__photo {
  position: relative;
}

.case__photo img {
  width: 100%;
  height: auto;
}

/* 写真の上に Before / After を表示（写真自体は加工しない） */
.case__label {
  position: absolute;
  top: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.9);
  color: var(--wood-dark);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.case__label--before { left: 10px; }
.case__label--after {
  left: calc(var(--split, 50%) + 10px);
  background: var(--wood);
  color: var(--white);
}

.case__body {
  padding: 18px 20px 20px;
}

.case__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--wood-dark);
  margin-bottom: 8px;
}

/* 施術方法のラベル。ワックスは色を変えて光脱毛と区別 */
.case__method {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--beige);
  color: var(--wood-dark);
}

.case__method--wax {
  background: var(--wood-dark);
  color: var(--white);
}

.case__details li {
  position: relative;
  padding-left: 1.1em;
}

.case__details li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.case-notes {
  margin-top: 28px;
}

.section .case-notes .small + .small { margin-top: 6px; }

/* ---------- 6. 個人差 ---------- */
.info-card {
  background: var(--ivory-dark);
  border-left: 4px solid var(--wood);
  border-radius: 0 16px 16px 0;
  padding: 24px 20px;
  font-size: var(--fs-body);
}

/* ---------- 7. 脱毛料金のご案内 ---------- */
.price-intro {
  max-width: 560px;
  margin: 0 auto 24px;
}

/* 料金カード：縦3段の横長カード（左に部位名、右に「1回」＋料金） */
.price-list {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}

.price-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 18px;
  background: var(--white);
  border-radius: 12px;
  border-top: 3px solid var(--wood);
}

.price-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--wood-dark);
  white-space: nowrap;
}

.price-card__price {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.price-card__count {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--beige);
  color: var(--wood-dark);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* 金額は部位名より大きく、折り返さない */
.price-card__amount {
  min-width: 5.2em;
  text-align: right;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wood-dark);
  letter-spacing: 0.01em;
}

.price-card__yen {
  margin-left: 1px;
  font-size: 0.6em;
}

/* 光脱毛とワックス脱毛の料金比較表（3部位・1回料金） */
.price-compare {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 16px;
  padding: 6px 16px 10px;
}

.price-compare__table {
  width: 100%;
  border-collapse: collapse;
}

/* 「1回の料金（税込）」：光脱毛・ワックス脱毛の2列をまたぐ見出し行（2列の中央に表示） */
.price-compare__table .price-compare__caption-row > * {
  padding: 10px 4px 2px;
  border-bottom: none;
}
.price-compare__table thead .price-compare__caption {
  font-size: 12px;
  font-weight: normal;
  color: var(--text-sub);
  text-align: center;
}

.price-compare__table th,
.price-compare__table td {
  padding: 12px 4px;
  border-bottom: 1px solid var(--beige);
  text-align: center;
  white-space: nowrap;
}

.price-compare__table tbody tr:last-child th,
.price-compare__table tbody tr:last-child td { border-bottom: none; }

.price-compare__table thead th {
  padding: 8px 4px;
  font-size: 13px;
  font-weight: bold;
  color: var(--wood);
  border-bottom: 1px solid var(--beige-line);
}

.price-compare__table tbody th {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--wood-dark);
  text-align: left;
}

.price-compare__table td {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--wood-dark);
}

.price-compare__yen { margin-left: 1px; font-size: 0.6em; }

/* 初回お試し価格を設けていない理由：料金表の下に、細い線で区切って控えめに */
.price-policy {
  max-width: 480px;
  margin: 28px auto 0;
  padding: 20px 8px;
  border-top: 1px solid var(--beige-line);
  border-bottom: 1px solid var(--beige-line);
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
}

.section .price-policy__title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--wood-dark);
}

.section .price-policy p + p { margin-top: 0.8em; }
.section .price-policy__title + p { margin-top: 0; }

/* 料金シミュレーターへの案内：枠を付けず、背景の上に控えめに配置 */
.price-guide {
  margin-top: 24px;
  text-align: center;
}

.price-guide__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wood-dark);
}

.section .price-guide__text {
  margin: 2px 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}

/* 予約ボタンより控えめなサイズ */
.btn--small {
  width: auto;
  max-width: 100%;
  padding: 11px 22px;
  font-size: 14px;
  box-shadow: 0 3px 0 var(--wood-dark);
}

.price-notes {
  max-width: 560px;
  margin: 20px auto 0;
}

.section .price-notes .small { margin-top: 0; }
.section .price-notes .small + .small { margin-top: 4px; }

/* ---------- 8. 流れ ---------- */
/* アイコンを左、文章を右に置くコンパクトな縦並び。アイコンの間を点線でつなぐ */
.flow {
  max-width: 560px;
  margin: 0 auto;
}

.flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding-bottom: 28px;
}

.flow__item:last-child { padding-bottom: 0; }

/* ステップ間の線（アイコンの下から次のアイコンの上まで） */
.flow__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 60px;
  bottom: 8px;
  border-left: 2px dotted var(--beige-line);
}

.flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ivory-dark);
  border: 1px solid var(--beige-line);
  color: var(--wood);
}

.flow__icon svg { width: 26px; height: 26px; }

.flow__body { padding-top: 2px; }

.flow__step {
  display: block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.14em;
  color: var(--wood);
  line-height: 1.4;
}

.flow__title {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--wood-dark);
  margin: 2px 0 6px;
}

.flow__item p { font-size: var(--fs-body); }

.section .flow-note {
  max-width: 560px;
  margin: 24px auto 0;
}

/* ---------- 9. オーナー ---------- */
.owner {
  text-align: center;
  margin-bottom: 28px;
}

.owner__photo {
  width: 160px;
  height: 160px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
}

/* オーナー写真：丸枠（.owner__photo）いっぱいに表示。枠のサイズ・形は変えない */
.owner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo__placeholder--round {
  min-height: 160px;
  border-radius: 50%;
}

.owner__name {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  color: var(--wood-dark);
  line-height: 1.6;
}

/* お名前（大きめ）と肩書き（小さめ）を2行で */
.owner__name-main {
  display: block;
  font-size: 20px;
  letter-spacing: 0.12em;
}

.owner__role {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-sub);
}

.owner__message {
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 16px;
  padding: 28px 20px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* メッセージの見出し（最初の一文） */
.section .owner__lead {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.8;
  color: var(--wood-dark);
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px dashed var(--beige-line);
}

.section .owner__lead + p { margin-top: 0; }

/* お客様からいただいた言葉（引用） */
.section .owner__quote {
  margin: 1em 0;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--wood-dark);
  text-align: center;
}

.section .owner__quote + p { margin-top: 0; }

/* ---------- 10. FAQ ---------- */
.faq__item {
  background: var(--ivory-dark);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq__item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 48px 18px 48px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.7;
  color: var(--wood-dark);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::before {
  content: "Q";
  position: absolute;
  left: 18px;
  top: 17px;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--wood);
}

/* 開閉の＋／− */
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: normal;
  color: var(--wood);
}

.faq__item[open] summary::after { content: "−"; }

.faq__answer {
  position: relative;
  padding: 0 20px 20px 48px;
  font-size: var(--fs-body);
}

.faq__answer::before {
  content: "A";
  position: absolute;
  left: 18px;
  top: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text-sub);
  line-height: 1.6;
}

/* 回答の段落どうしは少し詰めて、長い回答も読みやすく */
.section .faq__answer p + p { margin-top: 0.8em; }

.faq__link {
  color: var(--wood-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section .faq__answer .faq__note {
  font-size: var(--fs-small);
  color: var(--text-sub);
}

.tag-check {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--wood-dark);
  background: var(--beige);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ---------- 11. 最後の予約案内 ---------- */
.section--cta {
  background: var(--beige);
  text-align: center;
}

.cta__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.6;
  color: var(--wood-dark);
  margin-bottom: 20px;
}

.section--cta .lead { margin-bottom: 32px; }

/* FAQの最後：ほかの質問はLINEでお問い合わせ */
.faq-contact {
  margin-top: 32px;
  text-align: center;
}

.section .faq-contact__text {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--wood-dark);
}

/* ---------- フッター（アクセス案内を含む） ---------- */
/* スマホは下部の固定予約ボタンに隠れないよう、ボタンの高さ分だけ下の余白を広げる（PCは @media で戻す） */
.footer {
  background: var(--wood-dark);
  color: var(--ivory);
  text-align: center;
  padding: 36px 16px calc(28px + 84px + env(safe-area-inset-bottom));
}

.footer .small { color: var(--beige); opacity: 0.8; }

.footer__logo {
  margin-bottom: 16px;
  line-height: 0;
}

/* 住所・駐車場：中央揃え、濃いブラウンの上にアイボリーの文字 */
.footer__address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.75;
}

.footer__parking {
  margin-top: 4px;
  font-size: 13px;
  color: var(--beige);
}

/* Googleマップ：濃いブラウンに映える、丸みのあるベージュのボタン */
.footer__map {
  display: block;
  width: fit-content;
  margin: 16px auto 0;
  padding: 10px 28px;
  border-radius: 999px;
  background: var(--beige);
  color: var(--wood-dark);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

/* 連絡先：地図ボタンとの間を少し空けて、アクセス情報と区切る */
.footer__tel {
  margin-top: 28px;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.footer__tel a { color: var(--ivory); text-decoration: none; }

.footer__tel-note {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--beige);
  opacity: 0.85;
}

/* フッターのメール案内：濃い背景の上なので明るい色に */
.footer .mail-contact { margin-top: 20px; font-size: 12px; color: var(--beige); }
.footer .mail-contact__link { color: var(--ivory); font-size: 13px; }

/* メンズLP（PLUME HOMME）への導線：メンズLPの「女性の方はこちら」（mens.css の .footer__women）と同じ大きさ・余白・下線 */
.footer__men {
  margin-top: 16px;
  font-size: 12px;
}

.footer__men a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }

.footer__copy { margin-top: 20px; }

/* 白抜きの正式ロゴ画像。比率を保ったまま高さだけ指定 */
.footer__logo-img {
  display: inline-block;
  height: 64px;
  width: auto;
}

/* ---------- 下部固定ボタン ---------- */
.fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 248, 242, 0.96);
  border-top: 1px solid var(--beige);
  text-align: center;
}

.fixed-cta .btn { padding: 13px 20px; font-size: 15px; }

/* ---------- お知らせ表示 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 70;
  transform: translate(-50%, 12px);
  width: calc(100% - 32px);
  max-width: 360px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--text);
  color: var(--white);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- 小さいスマホ（iPhone SE など、幅374px以下） ---------- */
@media (max-width: 374px) {
  :root { --gutter: 16px; }

  /* キャッチコピーが4行に割れないよう少し小さく */
  .hero__copy { font-size: 24px; letter-spacing: 0.04em; }
  .section__title { font-size: 21px; }
  .cta__title { font-size: 24px; }

  /* 予約ボタンの文字が2行にならないように */
  .btn { font-size: 15px; letter-spacing: 0.04em; padding-left: 12px; padding-right: 12px; }
  .btn--large { font-size: 16px; }
  .btn--icon { gap: 6px; letter-spacing: 0; padding-left: 10px; padding-right: 10px; }
  .btn__icon { width: 16px; height: 16px; }
  .btn--small { font-size: 14px; padding-left: 18px; padding-right: 18px; }

  /* カード内の左右余白を少し詰めて、1行の文字数を確保 */
  .worry-list,
  .feature,
  .info-card,
  .owner__message,
  .case__body { padding-left: 18px; padding-right: 18px; }
}

/* ---------- 画面が広い場合（タブレット・PC） ---------- */
@media (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: inline; }

  body { padding-bottom: 0; }
  /* 下部の固定予約ボタンはスマホ（幅767px以下）だけ。タブレット・PCでは出さず、フッターの下の余白も戻す */
  .fixed-cta { display: none; }
  .footer { padding: 48px 16px 40px; }
  .logo__img { height: 60px; }
  .toast { bottom: 32px; }

  .hero { padding: 32px 24px 80px; }
  .hero__copy { font-size: 32px; }

  /* 2つの脱毛方法のカードを横並びに */
  .method-list { grid-template-columns: 1fr 1fr; max-width: none; gap: 20px; }

  /* 施術経過：タブレットでは縦並びのまま幅を抑える */
  .case-list { max-width: 560px; margin: 0 auto; }

  .section { padding: 96px 0; }
  .section__title { font-size: 28px; }
  .photo--wide .photo__placeholder { min-height: 320px; }
}

/* ---------- PC（広い画面）：写真左側の余白にコピーを重ねる ---------- */
@media (min-width: 1024px) {
  .hero {
    position: relative;
    max-width: 1120px;
  }

  .hero__text {
    position: absolute;
    top: 50%;
    left: 64px;
    transform: translateY(-50%);
    width: 44%;
    max-width: 460px;
    padding: 36px 32px;
    text-align: left;
    /* 写真の上でも文字が読めるよう、半透明のアイボリーを敷く */
    background: rgba(251, 248, 242, 0.86);
    border-radius: 16px;
  }

  .hero__copy { font-size: 34px; }

  /* 写真の上の文字は左そろえなので、ボタンも左にそろえる */
  .hero__text .btn-stack { align-items: flex-start; }

  /* 施術経過：パソコンでは3枚を横並び */
  .container--wide { max-width: 1040px; }
  .case-list { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: none; }
}

/* ---------- Instagramギャラリー（お客様の声の下。写真と投稿URLは instagram.js） ---------- */
/* 6枚そろうまで公開ページでは非表示（hidden）。手元の確認時だけ instagram.js が表示する */
.section[hidden] { display: none; }

.section__title + .ig-lead { margin-top: -16px; }
.ig-lead {
  font-family: var(--font-serif);
  font-size: 15px;
  text-align: center;
  color: var(--text-sub);
  margin-bottom: 28px;
}

/* スマホもPCも3列×2段。写真の間は狭めにしてすっきり */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.ig-grid__item { aspect-ratio: 1 / 1; overflow: hidden; background: var(--beige); }
.ig-grid__item:first-child { border-top-left-radius: 8px; }
.ig-grid__item:nth-child(3) { border-top-right-radius: 8px; }
.ig-grid__item:nth-child(4) { border-bottom-left-radius: 8px; }
.ig-grid__item:nth-child(6) { border-bottom-right-radius: 8px; }

.ig-grid__link { display: block; width: 100%; height: 100%; }
.ig-grid__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 正方形でない写真は中央を正方形に切り取る */
  transition: opacity 0.2s;
}
.ig-grid__link:hover .ig-grid__img { opacity: 0.85; }

/* 確認用の仮の枠（公開ページには出ない） */
.ig-grid__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--wood);
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(139, 106, 78, 0.06) 10px 20px),
    var(--beige);
}

/* 写真一覧のすぐ上の操作案内（控えめな小さい文字） */
.ig-lead + .ig-tap-note { margin-top: -16px; }
.ig-tap-note {
  max-width: 560px;
  margin: 0 auto 10px;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  color: var(--text-sub);
}

.section .ig-note { max-width: 560px; margin: 10px auto 0; color: var(--text-sub); }
.ig-more { margin-top: 28px; text-align: center; }

@media (min-width: 768px) {
  .ig-grid { gap: 6px; }
}

/* ---------- メディア掲載実績（お客様の声の前。表示と拡大は media.js） ---------- */
/* 転載許可の確認まで公開ページでは非表示（hidden）。手元の確認時だけ media.js が表示する */
.media-lead { text-align: center; margin-bottom: 32px; }

/* 横スワイプのスライド（下の「横スワイプのスライド」）に1紙面ずつ並べる */
.media-item { text-align: center; }

/* 紙面の縦横比が違っても同じ大きさの枠に収める。紙面は切り抜かず全体を表示（contain） */
.media-item__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border: 1px solid var(--beige-line);
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(74, 60, 48, 0.08);
  cursor: zoom-in;
}

.media-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s;
}
.media-item__btn:hover .media-item__img { opacity: 0.9; }

/* 右下の小さな虫めがね（タップで拡大できる目印） */
.media-item__btn::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f38' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 1px 4px rgba(74, 60, 48, 0.18);
}

.section .media-item__caption {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
}
.media-item__name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--wood-dark);
  letter-spacing: 0.08em;
}
.media-item__date { font-size: 13px; color: var(--text-sub); }
.section .media-item__desc {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}

.section .media-message {
  margin-top: 40px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 2;
  text-align: center;
  color: var(--wood-dark);
}
.section .media-note { margin-top: 20px; }

/* 拡大表示 */
.media-viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 56px 12px 24px;
  border: 0;
  background: transparent;
  overflow: auto;
}
.media-viewer::backdrop { background: rgba(40, 32, 26, 0.88); }
.media-viewer__img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  background: var(--white);
  border-radius: 2px;
}
.media-viewer__close {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.95);
  color: var(--wood-dark);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.media-viewer__hint {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 253, 249, 0.75);
}

@media (min-width: 768px) {
  /* PCは横長の枠にして、雑誌の見開きを大きく見せる */
  .media-item__btn { aspect-ratio: 4 / 3; padding: 14px; }
  .media-viewer__hint { display: none; }
}

/* ---------- 横スワイプのスライド（メディア掲載実績・施術経過。動きは slider.js） ---------- */
/* スマホ：指で左右にスワイプ。カードは中央に止まり、左右に前後のカードが少し見える */
.slider {
  position: relative;
  --slide-w: 84%;     /* カードの幅（スライド全体の幅に対して） */
  --slide-gap: 12px;  /* カードの間 */
}

/* 画面の左右いっぱいまで使う（container の余白の分だけ外へ）。LP全体は横にスクロールしない */
.slider__track {
  position: relative;
  display: flex;
  gap: var(--slide-gap);
  margin: 0 calc(var(--gutter) * -1);
  padding: 4px 0 14px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

/* 最初と最後のカードも中央に止まれるよう、両端に空きを作る */
.slider__track::before,
.slider__track::after {
  content: "";
  flex: 0 0 max(0px, calc((100% - var(--slide-w)) / 2 - var(--slide-gap)));
}

.slider__slide {
  flex: 0 0 var(--slide-w);
  min-width: 0;
  scroll-snap-align: center;
}

/* 現在位置のドット（今のカードだけ横長のブラウン） */
.slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.slider__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--beige-line);
  cursor: pointer;
  transition: width 0.25s, background-color 0.25s;
}
.slider__dot::before { content: ""; position: absolute; inset: -10px -5px; }  /* 指で押しやすいよう、押せる範囲を広げる */
.slider__dot[aria-current] { width: 22px; background: var(--wood); }

/* 前へ・次へ（PCだけ。スマホはスワイプ） */
.slider__arrow { display: none; }

@media (min-width: 768px) {
  .slider--media { --slide-w: 72%; --slide-gap: 20px; }
  .slider--case { --slide-w: 56%; --slide-gap: 20px; }

  .slider__arrow {
    position: absolute;
    top: var(--arrow-top, 42%);
    z-index: 1;
    display: flex;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 1px solid var(--beige-line);
    border-radius: 50%;
    background: rgba(255, 253, 249, 0.95) center / 18px no-repeat;
    box-shadow: 0 2px 8px rgba(74, 60, 48, 0.12);
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .slider__arrow--prev { left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
  .slider__arrow--next { right: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
  .slider__arrow:hover { background-color: var(--white); }
  .slider__arrow:disabled { opacity: 0; pointer-events: none; }
  .slider__dots { margin-top: 10px; }
}

@media (min-width: 1024px) {
  .slider--case { --slide-w: 38%; }
}

/* ---------- 10. FAQ：カテゴリ別のアコーディオン（最初はカテゴリだけ。タップで質問一覧 → 質問をタップで回答） ---------- */
.faq-cat {
  background: var(--white);
  border: 1px solid var(--beige-line);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-cat__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 16px 52px 16px 20px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  color: var(--wood-dark);
}
.faq-cat__head::-webkit-details-marker { display: none; }

.faq-cat__num {
  flex: none;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.08em;
  color: var(--wood);
}

/* 開閉の矢印（開くと上向き） */
.faq-cat__head::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--wood);
  border-bottom: 1.5px solid var(--wood);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.faq-cat[open] > .faq-cat__head::after { transform: translateY(-30%) rotate(-135deg); }
.faq-cat[open] > .faq-cat__head { border-bottom: 1px solid var(--ivory-dark); }

.faq-cat__body { padding: 10px 6px 6px; }
/* カード内は横幅が狭くなるので、質問・回答の左右の余白を少し詰める（スマホ） */
.faq-cat__body .faq__item summary { padding: 16px 40px 16px 40px; }
.faq-cat__body .faq__item summary::before { left: 14px; top: 15px; }
.faq-cat__body .faq__item summary::after { right: 14px; }
.faq-cat__body .faq__answer { padding: 0 16px 18px 40px; }
.faq-cat__body .faq__answer::before { left: 14px; }
.faq-cat__body .faq__item { margin-bottom: 8px; }
.faq-cat__body .faq__item:last-child { margin-bottom: 0; }

/* 回答待ちの質問（手元の確認時だけ faq.js が表示。公開ページには出ない） */
.faq__item--pending { border: 1.5px dashed var(--beige-line); opacity: 0.8; }
.faq__item--pending { position: relative; }
.faq__item--pending::before {
  content: "回答待ち";
  position: absolute;
  top: 0;
  right: 12px;
  padding: 1px 8px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--white);
  background: var(--wood);
  border-radius: 0 0 6px 6px;
}
.section .faq__answer .faq__pending-note { font-size: var(--fs-small); color: var(--wood); }

@media (min-width: 768px) {
  .faq-cat__head { padding-left: 24px; }
  .faq-cat__body { padding: 14px 16px 16px; }
  .faq-cat__body .faq__item summary { padding: 18px 48px; }
  .faq-cat__body .faq__item summary::before { left: 18px; top: 17px; }
  .faq-cat__body .faq__item summary::after { right: 18px; }
  .faq-cat__body .faq__answer { padding: 0 20px 20px 48px; }
  .faq-cat__body .faq__answer::before { left: 18px; }
}