/* =========================================================
   uplift.css — 品質向上レイヤー（現構造維持・最後に読み込む）
   Dityca MEN'S（生成りグレージュ×暖色ダーク）。代表LP color_lp_v2 の
   承認済み uplift を「汎用部分だけ」このLPの明暗へ翻訳して移植。
   正本 DESIGN_LAWS_DEEP.md 第0/9/17/18章 準拠。
   移植しない：colorcard/colorgroup/colormovie（存在しない色LP固有）・FV動画。
   ========================================================= */

/* ---- 和文タイポ（プログレッシブ・非対応は無害） ---- */
h1, h2, h3, .h2, .h3, .lead, .fv__title, .fv__sub, .menu__meta {
  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. AIスロップ除去：ALL CAPS 英字ラベルを廃止
      → 小文字英字＋暖色ヘアラインの「章キッカー」（エディトリアル）
   ========================================================= */
.label-en {
  text-transform: none;          /* uppercase 全廃 */
  font-weight: 400;
  letter-spacing: .14em;
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-3);           /* 主役はH2＝キッカーは沈める（AA 5.2:1で可読） */
}
.label-en::before {              /* 直線ヘアライン（角丸なし・暖色トーン） */
  content: "";
  width: 26px; height: 1px;
  background: rgba(94, 82, 74, .45);
  flex: 0 0 auto;
}
.section--ink .label-en { color: rgba(246, 243, 239, .82); }
.section--ink .label-en::before { background: rgba(246, 243, 239, .42); }

/* FV下端の欧文メタ・翼/店舗の小ラベルも uppercase をやめる */
.fv__meta { text-transform: none; letter-spacing: .16em; font-weight: 400; }
.fv__mark small,
.shop__area,
.wing__tag,
.wing__ctas-head { text-transform: none; letter-spacing: .14em; }

/* =========================================================
   2. タイポ主役化（第17-1：集客LP FV 見出しを主線に）
      「見られる仕事は、眉から。」は2行の短句＝拡大の好適地（顔には被せない）。
   ========================================================= */
.fv__title {
  font-size: clamp(26px, 7.6vw, 38px);
  line-height: 1.42;
  letter-spacing: .05em;
}
.fv__sub { margin-top: 18px; line-height: 2.05; }

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

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

/* =========================================================
   3. モーション格上げ（reduced-motion 尊重）
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* ヒーローのゆるやかな ken-burns（ambient・一度きりで settle） */
  .fv__media img {
    animation: kb 15s var(--ease) both;
    transform-origin: 60% 22%;
  }
  @keyframes kb { from { transform: scale(1.006); } to { transform: scale(1.055); } }

  /* PC：固定翼の写真をごく僅かに呼吸させる */
  @media (hover: hover) and (min-width: 1100px) {
    .wing__img { animation: kb 22s var(--ease) both; }
  }

  /* 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. 余白・リズム（第9-1 下/外を厚く／四辺均等を禁止）
   ========================================================= */
.section {
  padding-top: clamp(54px, 12vw, 82px);
  padding-bottom: clamp(88px, 19vw, 132px);   /* 下を厚く＝据わり */
  padding-inline: clamp(22px, 6vw, 34px);      /* 外を少し厚く */
}
.section + .section { padding-top: clamp(54px, 12vw, 82px); }
.section__head { margin-bottom: clamp(34px, 9vw, 52px); }

/* =========================================================
   5. 細部：CTA の質感・角丸0徹底・ダーク面の暖色統一
   ========================================================= */
/* 主CTAは字間で"押せる格"を出す */
.btn { letter-spacing: .08em; }
.fv__cta { padding-top: 26px; padding-bottom: 30px; }

/* 角丸を全て直角に（余白ノッチの原因を除去・保険） */
.btn, .wing__cta, .shop, .worry, .menu__media, .fv__media, .stat { border-radius: 0; }

/* CTAホバーの純黒(#000)を避け暖色の濃いダークへ（このLPの暖色ダークで統一） */
.btn:hover { background: #1A1512; }
.btn:active { background: #3A332D; }
.section--ink .btn:hover { background: #fff; }   /* ダーク面上のCTAは明CTA＝据置 */

/* =========================================================
   6. PC右翼ナビの半透明ボックスを除去（可読性は影で担保・代表LPと同処理）
   ========================================================= */
@media (min-width: 1100px) {
  .wingnav { background: transparent; padding: 0; }
  .wingnav a { text-shadow: 0 1px 14px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.4); }
  .wing__ctas-head { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
}

/* =========================================================
   7. 可読性の底上げ（詰まりの実体＝①小さい注記 ②罫線が不可視）
   ========================================================= */
/* 注記/CTA案内の10px禁止（--fs-note は tokens で11pxへ。ここは保険） */
.note, .btn-note, .foot__note, .stat cite, .sticky__label { font-size: 11px; }

/* データ引用の罫線・出典を可読に */
.stat cite { line-height: 1.75; }

/* 施術フローの区切り線を可視化（1本の塊に見えないように） */
.flow li { border-bottom-color: rgba(42, 39, 36, .12); }
.flow { border-top-color: rgba(42, 39, 36, .12); }

/* 店舗カードの罫線を少し立てる（複数カードの境界を明確化） */
.shop { border-color: rgba(42, 39, 36, .14); }

/* =========================================================
   8. FAQ アコーディオン（クライアント判断で全LPアコーディオンに統一）
      開閉挙動は main.js の initFaq が担う。ここは余白の可読性調整のみ。
   ========================================================= */
.faq__q { padding: 22px 0; }                       /* 質問の上下に呼吸 */
.faq__a p { padding-bottom: 26px; line-height: 2.05; }