/* =========================================================
   uplift.css — 品質向上レイヤー（現構造維持・最後に読み込む）
   代表LP color_lp_v2/css/uplift.css の汎用部分をダーク寒色地へ翻訳移植。
   このLPは寒色グラファイト(#1B1E23)地＝罫線・淡色は白系alphaへ翻訳する。
   純黒は使わない／茶色は強制しない（メンズ寒色トーンを保つ）。
   ========================================================= */

/* ---- 和文タイポ（プログレッシブ・非対応は無害） ---- */
h1, h2, h3, .h2, .h3, .lead, .fv__title, .fv__sub, .worry-bridge {
  text-wrap: pretty;
}
@supports (text-autospace: normal) { body { text-autospace: normal; } }
@supports (text-spacing-trim: space-first) {
  .h2, .h3, .fv__title { text-spacing-trim: space-first; }
}

/* ---- MPA ページ間クロスフェード（非対応は通常遷移＝無害） ---- */
@view-transition { navigation: auto; }

/* =========================================================
   1. ALL CAPS 英字ラベルを廃止 → 小文字＋ヘアラインの章キッカー
      ダーク地：ヘアラインは白系alpha・文字は ink-3(5.25:1でAA可)。
   ========================================================= */
.label-en {
  text-transform: none;                 /* uppercase 全廃 */
  font-weight: 400;
  letter-spacing: .12em;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-3);
}
.label-en::before {
  content: "";
  width: 26px; height: 1px;
  background: rgba(237, 238, 240, .32); /* 暗地で見えるヘアライン（白系alpha翻訳） */
  flex: 0 0 auto;
}

/* FV下端の欧文メタ・翼の欧文タグも uppercase をやめる */
.fv__meta { text-transform: none; letter-spacing: .16em; font-weight: 400; }
.wing__tag,
.wing__ctas-head { text-transform: none; letter-spacing: .16em; }

/* CTA内の欧文店名サブ・店舗エリアの caps だけ字間を整える（10pxのまま＝装飾英字） */
.cta2 .btn span,
.shop__area { letter-spacing: .14em; }

/* =========================================================
   2. タイポ主役化（FV見出しを一段大きく・章見出しに階層差）
      短句を巨大化しすぎないよう、日本語二行に合わせて適応。
   ========================================================= */
.fv__title {
  font-size: clamp(25px, 7vw, 32px);   /* 主役化しつつ「〜を、」の折返し孤立を防ぐ上限 */
  line-height: 1.5;
  letter-spacing: .02em;
}
.fv__sub { margin-top: 18px; line-height: 2.05; }

/* 章見出し(H2)を一段大きく・字間を締めて上質に */
.h2 { font-size: clamp(22px, 6vw, 28px); line-height: 1.55; letter-spacing: .04em; }
.section__head .h2 { margin-bottom: 18px; }

/* リード文の行間を最適域へ */
.lead { line-height: 2.15; }

/* =========================================================
   3. モーション格上げ（reduced-motion 尊重）
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* ヒーローのゆるやかな ken-burns（顔は上部＝原点を上に寄せ被写体を保つ） */
  .fv__media img {
    animation: kb 16s var(--ease) both;
    transform-origin: 60% 20%;
  }
  @keyframes kb { from { transform: scale(1.004); } to { transform: scale(1.05); } }

  /* reveal のイージングを上質側へ（main.js の is-in に追従） */
  .reveal { transition-timing-function: var(--ease); }

  /* CTA矢印はホバーで少し流れる */
  .btn__arrow { transition: transform 400ms var(--ease); }
  .btn:hover .btn__arrow { transform: translateY(3px); }
}

/* =========================================================
   4. 余白・リズム（下を厚く／外を少し厚く＝据わり）
   ========================================================= */
.section {
  padding-top: clamp(54px, 12vw, 82px);
  padding-bottom: clamp(84px, 18vw, 124px);   /* 下を厚く */
  padding-inline: clamp(22px, 6vw, 30px);
}
.section + .section { padding-top: clamp(52px, 11vw, 76px); }
.section__head { margin-bottom: clamp(32px, 8vw, 48px); }

/* =========================================================
   5. 細部：CTAの質感（字間で押せる格を出す）
   ========================================================= */
.btn { letter-spacing: .08em; }
.fv__cta { padding-top: 24px; padding-bottom: 28px; }

/* =========================================================
   6. 可読性是正：詰まりの実体＝〈文字小／ラベル密着／罫線不可視〉を先に
      ダーク地なので罫線・淡色は白系alphaで可視性を翻訳。
   ========================================================= */

/* 6-a. オーダー一文ラベルが ff-en/uppercase/10px で日本語が潰れる
        → ゴシック・11px・字間ふつうで意味テキストとして読ませる */
.order__label {
  font-family: var(--ff-ja);
  text-transform: none;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-2);            /* 7.32:1 */
}

/* 6-b. 意味テキストの下限を11pxへ（CTA案内・注記・景表法注記） */
.cta2-head { font-size: 11.5px; }
.btn-note  { font-size: 11px; }
.note      { font-size: 11px; line-height: 1.9; }

/* 6-c. スタイル名(小見出し)と説明文の区分けを明確化
        名前=濃色でしっかり／英語=淡色ヘアライン級のキッカー */
.style__name { font-size: clamp(16px, 4.4vw, 19px); line-height: 1.5; }
.style__name em {
  text-transform: none;           /* 欧文の ALL CAPS をやめる */
  letter-spacing: .14em;
  color: var(--ink-3);
  margin-top: 5px;
}
.style__tag { margin-top: 8px; }

/* 6-d. スペック（このLPは未使用だが定義に追随・ダーク翻訳で保険）
        dt=小/字間広/淡色, dd=大/濃色/行間広, 罫線は白系alphaで可視化 */
.spec div { padding: 15px 0; border-bottom: 1px solid rgba(237, 238, 240, .14); }
.spec dt  { font-size: 10.5px; letter-spacing: .14em; font-weight: 500; color: var(--ink-2); margin-bottom: 7px; }
.spec dd  { font-size: 14px; line-height: 1.85; color: var(--ink); }

/* 6-e. 再現性リストの罫線を少しだけ可視化（0.12→0.16相当・白系alpha） */
.repro div { border-bottom: 1px solid rgba(237, 238, 240, .16); }
.repro dd  { line-height: 1.95; }

/* 6-f. 「ご希望の店舗をお選びください」が直上と詰まる → 余白を足す */
.cta2-head { margin-top: 22px; }

/* =========================================================
   7. FAQ・料金の余白（読ませる呼吸）
   ========================================================= */
.faq__q   { padding: 22px 0; }
.faq__a p { padding-bottom: 24px; line-height: 2.05; }
.price__item { padding: 26px 0; }
/* 注：FAQはクライアント判断で全LPアコーディオンに統一。常時展開化はしない（クリック開閉のまま）。 */