/* components.css — 部品（ブロックごとに差をつけるための部品群） */

/* ---- 枠 ---- */
.wrap { width: 100%; max-width: calc(var(--col) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.wrap--wide { max-width: calc(var(--wide) + var(--gut) * 2); }
.sec { padding-block: var(--sp-sec); }
.sec--2 { background: var(--bg-2); }
.sec--dark { background: var(--dark); color: var(--dark-ink); }

/* ---- 見出し（二層：小さな欧文キッカー＋和文の明朝） ---- */
.kicker { display: block; margin-bottom: 14px; font-family: var(--ff-en); font-size: 13px; letter-spacing: .18em; color: var(--gold-deep); }
.sec--dark .kicker { color: var(--gold); }
.h2 { font-family: var(--ff-min); font-size: var(--fs-h2); font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.h3 { font-family: var(--ff-min); font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; }
.lead { margin-top: 20px; font-size: var(--fs-body); line-height: 2; color: var(--ink-2); }
.sec--dark .lead { color: rgba(255, 255, 255, .82); }
.note { font-size: var(--fs-note); line-height: 1.8; color: var(--ink-3); }
.sec--dark .note { color: rgba(255, 255, 255, .7); }
.head { margin-bottom: var(--sp-blk); }

/* マーカー：読ませる語にだけ */
.mk { background: linear-gradient(transparent 62%, rgba(223, 16, 20, .32) 62%); padding-inline: .08em; }
/* 手書き風の囲み（SAKIYOMI LP の楕円を素の CSS で） */
.circle-word { position: relative; display: inline-block; padding-inline: .15em; }
.circle-word::after { content: ""; position: absolute; inset: -.12em -.28em -.08em; border: 1.5px solid var(--red); border-radius: 50% 46% 52% 48% / 58% 52% 48% 44%; transform: rotate(-3deg); pointer-events: none; }

/* 帯見出し（ブロックの切り替わりを告げるバナー） */
.band { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 16px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; letter-spacing: .12em; }
.band::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.sec--dark .band { background: var(--bg); color: var(--ink); }

/* ---- ボタン（角丸0・フラット） ---- */
.btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px; padding: 16px 20px; background: var(--cv); color: var(--cv-ink); font-size: 16px; font-weight: 500; letter-spacing: .08em; transition: background 240ms var(--ease); }
.btn:hover { background: #B90D11; }
.btn small { font-size: 12px; font-weight: 400; letter-spacing: .04em; opacity: .85; }
.btn__arrow { font-family: var(--ff-en); transition: transform 300ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--line { background: transparent; color: var(--ink); border: 1px solid var(--ink); min-height: 52px; }
.btn--line:hover { background: var(--ink); color: var(--bg); }
.cta { max-width: 440px; margin-inline: auto; }
.cta__before { margin-bottom: 10px; text-align: center; font-size: 13px; color: var(--ink-2); }
.cta__after { margin-top: 10px; text-align: center; font-size: var(--fs-note); color: var(--ink-3); }
.sec--dark .cta__before, .sec--dark .cta__after { color: rgba(255, 255, 255, .78); }

/* ---- 写真 ---- */
.ph { position: relative; overflow: hidden; background: var(--bg-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--34 { aspect-ratio: 3 / 4; }
.ph--45 { aspect-ratio: 4 / 5; }
.ph--43 { aspect-ratio: 4 / 3; }
.ph--arch { border-radius: 999px 999px 0 0; }
.ph--round { border-radius: 50%; aspect-ratio: 1; }
.ph__cap { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* ---- V字の切り（次のブロックへの矢印） ---- */
.vcut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 50% 100%, 0 calc(100% - 36px)); padding-bottom: calc(var(--sp-sec) + 36px); }

/* ---- 追従CTA（SP） ---- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 380ms var(--ease); }
.sticky.is-on { transform: none; }
.sticky .btn { min-height: 54px; max-width: 520px; margin-inline: auto; }
@media (min-width: 960px) { .sticky { display: none; } }

/* ---- ヘッダー（PCのみ・追従） ---- */
.hd { display: none; }
@media (min-width: 960px) {
  .hd { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 50; align-items: center; justify-content: space-between; height: 72px; padding-inline: 32px; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform 380ms var(--ease); }
  .hd.is-on { transform: none; }
  .hd__logo img { height: 30px; width: auto; }
  .hd__nav { display: flex; gap: 28px; font-size: 14px; color: var(--ink-2); }
  .hd__nav a:hover { color: var(--ink); }
  .hd .btn { width: auto; min-height: 46px; padding: 10px 22px; font-size: 14px; }
}

/* ---- 表示アニメ（既定で見えている・対応時だけ演出） ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js .rv.is-in { opacity: 1; transform: none; }
}

/* picture を枠いっぱいに（img の height:100% を効かせる） */
.ph picture, .fv__bg picture, .joy__ph picture { display: block; width: 100%; height: 100%; }

/* 写真上の小さな注記は暗い地を敷いて読ませる（AA） */
.ph__cap { right: 0; bottom: 0; padding: 3px 8px; background: rgba(30, 13, 7, .72); color: #fff; text-shadow: none; }

/* =========================================================
   見出しの組版（2026-10-04 監査で作り直し）
   1) セクション見出しは全部中央揃え（左右混在をやめる）。本文は左揃えのまま
   2) 改行は <br> だけで作る（balance を使わない）
   3) 見出し1本につき強調は1語だけ：.em＝一回り大きく・金。.em--dot＝傍点も付ける
   4) 欧文キッカーは Cormorant のイタリック、背景に大きく薄い欧文（data-bg）
   ========================================================= */
.head { position: relative; text-align: center; }
.head > * { position: relative; z-index: 1; }
.head .lead { text-align: center; }
.head[data-bg]::before {
  content: attr(data-bg); position: absolute; z-index: 0; left: 50%; top: -.38em;
  transform: translate(-50%, -18%); white-space: nowrap; pointer-events: none;
  font-family: var(--ff-en-serif); font-style: italic; font-weight: 400;
  font-size: clamp(72px, 22vw, 168px); line-height: 1; letter-spacing: -.01em;
  color: rgba(223, 16, 20, .12);
}
.sec--dark .head[data-bg]::before { color: rgba(255, 255, 255, .07); }
.head--tight[data-bg]::before { top: -.3em; }

.kicker { font-family: var(--ff-en-serif); font-style: italic; font-size: 20px; letter-spacing: .04em; margin-bottom: 12px; }
.h2 { font-weight: 500; line-height: 1.55; letter-spacing: .06em; }
.h2 + .lead, .head .h2 + .lead { margin-top: 20px; }

.em { font-weight: 700; font-size: 1.16em; color: var(--gold-deep); }
.sec--dark .em, .fv .em, .joy .em { color: #FF5A5E; }
.em--dot { -webkit-text-emphasis: filled dot; text-emphasis: filled dot; -webkit-text-emphasis-color: var(--gold); text-emphasis-color: var(--gold); text-emphasis-position: over right; }
.sec--dark .em--dot, .joy .em--dot { -webkit-text-emphasis-color: #FF5A5E; text-emphasis-color: #FF5A5E; }
.mk { background: none; padding: 0; }
.sec { overflow-x: clip; }  /* 背景の大きな欧文が横にはみ出してもページを横スクロールさせない */

/* 予約導線はすべて Dityca の赤（暗い面・写真の上でも赤のまま） */
.btn, .fv .btn, .btn--light, .sticky .btn, .hd .btn { background: var(--cv); color: var(--cv-ink); }
.btn:hover, .fv .btn:hover, .btn--light:hover { background: #B90D11; color: #fff; }
.btn--line { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.sec--dark .kicker { color: rgba(255,255,255,.85); }

/* 2026-10-04 岩田さん指示：見出し背後の大きく薄い欧文（data-bg）は廃止。
   代わりに赤い欧文キッカーを大きくして、見出しのアクセントにする */
.head[data-bg]::before { content: none; }
.kicker { font-family: var(--ff-en-serif); font-style: italic; font-weight: 500; font-size: clamp(34px, 9.6vw, 52px); line-height: 1.05; letter-spacing: .01em; text-transform: capitalize; color: var(--red); margin-bottom: 14px; }
.sec--dark .kicker { color: #FF5A5E; }