/* =========================================================
   components.css — レイアウト骨格＋再利用パーツ
   ---------------------------------------------------------
   骨格の思想：PCでもスマホ幅の縦列を中央に置き、
   左右は「固定された翼」にする（twoe.jp 型）。
   中央だけがスクロールし、翼は動かない。
   ========================================================= */

/* ---------------------------------------------------------
   1. 骨格
   --------------------------------------------------------- */
.stage { position: relative; }

/* 中央のスマホ幅コンテンツ列 */
.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  background: var(--bg);
  overflow: hidden;
}

/* 左右の固定翼（PCのみ） */
.wing {
  display: none;
  position: fixed;
  top: 0;
  width: calc((100vw - var(--col)) / 2);
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.wing--l { left: 0; }
.wing--r { right: 0; }

.wing__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 翼の上に置く情報は、写真の上でも読めるよう暗幕を敷く */
/* 翼の写真は色ごとに明るさが違う（ホワイトベージュは特に明るい）。
   白文字が乗る上下端は濃度を確保し、中央だけ写真を見せる。 */
.wing__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(38, 35, 32, .68) 0%,
    rgba(38, 35, 32, .30) 26%,
    rgba(38, 35, 32, .18) 52%,
    rgba(38, 35, 32, .44) 76%,
    rgba(38, 35, 32, .78) 100%
  );
}

.wing__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  color: var(--ink-paper);
}

.wing__logo { width: 92px; }
.wing__logo img { width: 100%; filter: brightness(0) invert(1); }

.wing__tag {
  margin-top: 14px;
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(251, 249, 247, .82);
}

.wing__foot { font-size: 12px; line-height: 2; color: rgba(251, 249, 247, .82); }
.wing__foot strong { display: block; font-weight: 500; letter-spacing: .06em; }
.wing__foot span { color: rgba(251, 249, 247, .6); }

/* 右翼：セクションナビ（右寄せ・明朝） */
.wingnav { text-align: right; }
.wingnav li + li { margin-top: 14px; }
.wingnav a {
  font-family: var(--ff-mincho);
  font-size: 14px;
  letter-spacing: .1em;
  color: rgba(251, 249, 247, .72);
  transition: color 240ms var(--ease);
}
.wingnav a:hover { color: var(--ink-paper); }

/* 右翼のCTA（PCでは常時ここに出す＝スマホの追従バー相当）
   エリアで店を選ぶ人が多いため、2店舗を常に並置する */
.wing__ctas { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.wing__ctas-head {
  margin-bottom: 2px;
  font-family: var(--ff-en);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(251, 249, 247, .7);
}

.wing__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 200px;
  padding: 14px 22px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  border-radius: var(--radius);
  transition: background 240ms var(--ease), color 240ms var(--ease);
}
.wing__cta:hover { background: var(--cv); color: var(--ink-paper); }

@media (min-width: 1100px) {
  .wing { display: block; }
}

/* ---------------------------------------------------------
   2. セクション共通
   --------------------------------------------------------- */
.section { padding: var(--sp-section) var(--gut); }
.section--tint { background: var(--bg-2); }
.section--ink { background: var(--bg-ink); color: var(--ink-paper); }
.section--ink .lead { color: var(--ink-paper-2); }
.section--ink .label-en { color: rgba(251, 249, 247, .78); }

.section__head { margin-bottom: var(--sp-block); }
.section__head .label-en { display: block; margin-bottom: 14px; }
.section__head .h2 { margin-bottom: 18px; }

/* ---------------------------------------------------------
   3. ボタン
   --------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 19px 20px;
  background: var(--cv);
  color: var(--ink-paper);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  border-radius: var(--radius);
  transition: background 240ms var(--ease);
}
.btn:hover { background: var(--cv-hover); }
.btn__arrow { font-family: var(--ff-en); font-weight: 300; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--bg-2); }

/* ---- 店舗2択CTA（エリアで選ぶ人が多いため、予約導線は常に2店舗を並置）---- */
.cta2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cta2 .btn {
  flex-direction: column;
  gap: 3px;
  padding: 15px 10px;
  font-size: 14px;
  line-height: 1.45;
}
.cta2 .btn span {
  font-family: var(--ff-en);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(251, 249, 247, .62);
}
.cta2-head {
  margin-bottom: 9px;
  text-align: center;
  font-size: var(--fs-note);
  letter-spacing: .04em;
  color: var(--ink-2);
}

.btn-note {
  margin-top: 10px;
  text-align: center;
  font-size: var(--fs-note);
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* ---------------------------------------------------------
   4. 追従CTA（スマホのみ／PCは右翼が担当）
   --------------------------------------------------------- */
.sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 249, 247, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 420ms var(--ease);
}
.sticky.is-on { transform: translateY(0); }
.sticky .btn { padding: 13px 10px; font-size: 14px; }
.sticky__label {
  display: block;
  margin-bottom: 6px;
  text-align: center;
  font-size: var(--fs-note);
  letter-spacing: .04em;
  color: var(--ink-2);
}
.sticky__label b { font-weight: 500; color: var(--ink); }

@media (min-width: 1100px) {
  .sticky { display: none; }
}

/* ---------------------------------------------------------
   5. カラーカード（一覧＝写真と色名のみ／詳細はパネル内）
   --------------------------------------------------------- */
.colorcard + .colorcard { margin-top: 14px; }

.colorcard__btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.colorcard__media { position: relative; aspect-ratio: 3 / 4; }
.colorcard__media img { width: 100%; height: 100%; object-fit: cover; }

/* 写真の明るさは色ごとに変わるため、番号は文字色だけに頼らず
   小さな暗面を敷いて可読性を固定する（ホワイトベージュ等の
   明るいカットで白文字が消えるのを防ぐ） */
/* グラデーション幕では写真の明るさに勝てず実測1.2〜1.5:1だった。
   料金表が「01〜04の色」と番号参照するため、番号が読めないと
   料金と色の対応が成立しない＝機能不全。不透明の矩形ラベルにする。 */
.colorcard__num {
  position: absolute;
  top: 0; left: 0;
  padding: 7px 11px 8px;
  background: var(--bg-ink);
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--ink-paper);
}

.colorcard__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px;
}

/* 色名は必ず1行に収める。
   最長「ミルクティーベージュ」(10文字)が 320px 幅でも折り返さないよう、
   字送りを詰めたうえで文字サイズを可変にし、nowrap で保険をかける。 */
.colorcard__name {
  font-family: var(--ff-mincho);
  font-size: clamp(15px, 4vw, 17px);
  letter-spacing: .03em;
  line-height: 1.5;
  white-space: nowrap;
  min-width: 0;
}

/* 開閉マークは字形に頼らず、CSSで山形を描く（環境差が出ないため） */
.colorcard__toggle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  position: relative;
  border: 1px solid var(--line);
  transition: transform 320ms var(--ease), border-color 240ms var(--ease);
}
.colorcard__toggle::before,
.colorcard__toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1px;
  background: var(--ink-2);
}
.colorcard__toggle::before { transform: translate(-72%, -50%) rotate(45deg); }
.colorcard__toggle::after  { transform: translate(-28%, -50%) rotate(-45deg); }
.colorcard__btn:hover .colorcard__toggle { border-color: var(--mocha); }
.colorcard__btn[aria-expanded="true"] .colorcard__toggle { transform: rotate(180deg); }

/* 詳細パネル */
.colorcard__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease);
  border: 1px solid var(--line);
  border-top: 0;
}
.colorcard__panel.is-open { grid-template-rows: 1fr; }
.colorcard__panel > div { overflow: hidden; }
.colorcard__inner { padding: 20px 18px 22px; }

.spec { border-top: 1px solid var(--line-soft); }
.spec div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.spec dt { color: var(--ink-3); letter-spacing: .04em; }
.spec dd { margin: 0; text-align: right; }
.spec dd b { font-weight: 500; }

.colorcard__desc {
  margin: 16px 0 18px;
  font-size: var(--fs-sm);
  line-height: 2;
  color: var(--ink-2);
}

/* ---------------------------------------------------------
   6. タブ（ブリーチなし／あり）
   --------------------------------------------------------- */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 26px;
  border: 1px solid var(--line);
}
.tabs button {
  padding: 13px 8px;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--ink-3);
  transition: background 240ms var(--ease), color 240ms var(--ease);
}
.tabs button + button { border-left: 1px solid var(--line); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--ink-paper); }

/* ---------------------------------------------------------
   7. FAQ
   --------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  text-align: left;
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: .03em;
}
/* 語尾「〜ですか」が行末で分断されないよう、
   質問文の末尾だけ改行を禁止する（HTML側の <em> で囲う） */
.faq__q em { font-style: normal; white-space: nowrap; }
.faq__mark {
  flex-shrink: 0;
  width: 14px;
  font-family: var(--ff-en);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-3);
  transition: transform 320ms var(--ease);
}
.faq__q[aria-expanded="true"] .faq__mark { transform: rotate(45deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms var(--ease);
}
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 0 22px;
  font-size: var(--fs-sm);
  line-height: 2.1;
  color: var(--ink-2);
}

/* ---------------------------------------------------------
   8. スクロール・イン（ゆっくり・パララックス禁止）
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   監査反映（2026-07-19 design-reviewer 7観点）
   ========================================================= */

/* --- JSが動いた時だけ隠す。読み込み失敗で本文が真っ白になるのを防ぐ --- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --- 押下フィードバック。モバイルにhoverは無いため、
       :active が無いと12箇所のCTAが「押しても無反応」に見える --- */
.btn:active,
.wing__cta:active { background: var(--cv-hover); }
.btn--ghost:active { background: var(--bg-3); }
.colorcard__btn:active,
.faq__q:active,
.tabs button:active { background: var(--bg-2); }

/* --- hover の補完 --- */
.tabs button:not([aria-selected="true"]):hover { background: var(--bg-2); color: var(--ink-2); }
.colorcard__btn:hover { border-color: var(--mocha); }
.faq__q:hover .faq__mark { color: var(--ink); }

/* --- 暗色面・写真上でフォーカスリングが見えない問題 --- */
.section--ink :focus-visible,
.wing :focus-visible,
.sticky :focus-visible { outline-color: var(--ink-paper); }

/* --- 右翼ナビが写真に埋もれて読めない（実測2.63:1）
       ヴェールを濃くすると髪色が死ぬため、ナビにだけ帯を敷く --- */
.wingnav {
  padding: 16px 20px;
  background: rgba(38, 35, 32, .55);
}
.wingnav a { color: rgba(251, 249, 247, .92); }

/* --- 追従バー：768〜1099pxで全幅に伸びて中央列から分離するのを防ぐ --- */
.sticky__label,
.sticky .cta2 {
  max-width: var(--col);
  margin-inline: auto;
}

/* --- 電話番号のタップ領域が19pxしかなかった（実用44px） --- */
.shop__info a {
  display: inline-block;
  min-height: 44px;
  padding: 11px 0;
}

/* --- スキップリンク --- */
.skiplink {
  position: absolute;
  left: -9999px;
  z-index: 100;
}
.skiplink:focus {
  left: 12px; top: 12px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--ink-paper);
  font-size: 13px;
}

/* スペックが「色ごとの説明文」になり右寄せでは読みにくくなったため、
   短い値は横並び、長い値は縦積みに切り替える */
.spec div {
  display: block;
  padding: 12px 0;
}
.spec dt {
  margin-bottom: 3px;
  font-size: var(--fs-note);
  letter-spacing: .06em;
}
.spec dd {
  text-align: left;
  color: var(--ink);
  line-height: 1.75;
}
.colorgroup__note b {
  display: inline-block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--ink);
}