/* =========================================================
   uplift.css — J's MEN'S 集客LP 品質向上レイヤー（最後に読み込む）
   ---------------------------------------------------------
   代表カラーLP(color_lp_v2)で岩田さん承認済み uplift.css の
   「色に依存しない汎用品質」だけを移植し、メンズ黒基調へパレット順応。
   色は必ず var()トークンかこのLPの暗色（純黒/暖い近黒/茶は使わない）。
   角丸0・影なしは tokens.css(--radius:0) で既定のため踏襲するだけ。
   ========================================================= */

/* ---- 和文タイポ品質（プログレッシブ・非対応ブラウザは無害に無視） ---- */
h1, h2, h3, .h2, .h3, .lead, .fv__title, .fv__sub, .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. AIスロップ除去：ALL CAPS 英字ラベルを廃止
      → 非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(--accent-lift);     /* このLPの単一アクセント・暗地でAA(≈8:1) */
}
.label-en::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--line);
  flex: 0 0 auto;
}
/* section__head の label-en は display:block 指定が効くため inline-flex を復帰 */
.section__head .label-en { display: inline-flex; }
/* 明るい面（section--paper＝最終CTA）は文字・ヘアラインを暗側に */
.section--paper .label-en { color: #6E645C; }
.section--paper .label-en::before { background: rgba(19, 20, 23, .28); }

/* FV下端の欧文メタ・小ラベルの caps 撤去（元テキストは小文字なので自然に化ける） */
.fv__meta { text-transform: none; letter-spacing: .16em; font-size: 11px; }
.shop__area,
.wing__tag,
.wing__ctas-head { text-transform: none; letter-spacing: .14em; }
.wing__ctas-head { font-size: 11px; }

/* =========================================================
   2. タイポ主役化（短句ヒーロー＝巨大化の好適地。顔に被せない）
   ========================================================= */
.fv__title {
  font-size: clamp(28px, 8vw, 39px);
  line-height: 1.42;
  letter-spacing: .02em;
}
.fv__title em {
  margin-top: .5em;
  font-size: clamp(16px, 4.6vw, 20px);   /* サブ見出し格＝主線と差をつける */
  letter-spacing: .08em;
  line-height: 1.7;
  color: var(--accent-lift);   /* 読ませる語。暗地でAA(≈8:1)確保・沈めない */
}
.fv__sub { margin-top: 20px; line-height: 2.05; }

/* 章見出し(H2)を一段大きく・字間を締めて上質に */
.h2 { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.5; 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（一度きりで settle・顔の位置に原点） */
  .fv__media img {
    animation: kb 16s var(--ease) both;
    transform-origin: 62% 26%;
  }
  @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 { display: inline-block; transition: transform 400ms var(--ease); }
  .btn:hover .btn__arrow { transform: translateY(3px); }

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

/* =========================================================
   4. 余白・リズム（下/外を厚く／四辺均等を避ける）
   ========================================================= */
.section {
  padding-top: clamp(56px, 13vw, 84px);
  padding-bottom: clamp(84px, 18vw, 124px);   /* 下を厚く＝据わり */
  padding-inline: clamp(22px, 6vw, 30px);      /* 外を少し厚く（desktopは30px上限） */
}
.section + .section { padding-top: clamp(56px, 13vw, 84px); }
.section__head { margin-bottom: clamp(32px, 8vw, 48px); }

/* =========================================================
   5. 細部：CTA の質感
   ========================================================= */
.btn { letter-spacing: .06em; }
.fv__cta { padding-top: 24px; padding-bottom: 28px; }

/* =========================================================
   6. spec 可読性是正（詰まりの実体＝①小さすぎ ②ラベル-値密着 ③罫線不可視）
      dt=小/字間広/淡色のラベル／dd=大/濃/行間広／罫線を可視化／行padding広め
   ========================================================= */
.spec div {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);   /* alpha.07→.14相当で可視化（白側の線） */
}
.spec dt {
  font-size: 11px;
  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);
}

/* =========================================================
   7. 意味テキストの10px撤去（最低11px。価格アンカーは既に24pxでOK）
   ========================================================= */
.order__label { font-size: 11px; }   /* 「美容師に言う一文」ラベル */
/* .note / .cta2-head / .btn-note / .sticky__label / .foot__note は
   tokens.css の --fs-note:11px 化で一括是正済み */

/* CTAボタン内の英字店名（romaji echo）は装飾のため小さいまま・9px→10pxのみ回避 */
.cta2 .btn span { text-transform: none; letter-spacing: .14em; font-size: 10px; }

/* =========================================================
   8. スクリム/ダーク面のパレット統一
      暖い近黒（#0C0A09 / rgba(12,10,9) / rgba(10,8,7) / rgba(20,17,15)）は
      わずかに茶みを帯びる → このLPの寒色ダーク #131417=rgba(19,20,23) へ統一。
      純黒 rgba(0,0,0) も茶も使わない。
   ========================================================= */
/* 外周ステージ（PC時のレターボックス地）を暖い近黒→ブランド寒色ダークへ */
body { background: #0E0F12; }

/* FV下端の幕：暖い近黒→ブランドbg(#131417)。fv__cta との継ぎ目も消える */
.fv__veil {
  background: linear-gradient(
    to bottom,
    rgba(19, 20, 23, 0)   0%,
    rgba(19, 20, 23, .06) 40%,
    rgba(19, 20, 23, .58) 51%,
    rgba(19, 20, 23, .95) 60%,
    rgba(19, 20, 23, 1)   100%);
}

/* PC左右翼の写真幕：暖い近黒→ブランドダークで統一（「締める」役は維持） */
.wing__veil {
  background: linear-gradient(
    to bottom,
    rgba(19, 20, 23, .74) 0%,
    rgba(19, 20, 23, .34) 30%,
    rgba(19, 20, 23, .28) 58%,
    rgba(19, 20, 23, .56) 80%,
    rgba(19, 20, 23, .88) 100%);
}

/* 追従CTAバーの地も暖い近黒→ブランドダークへ */
.sticky { background: rgba(19, 20, 23, .95); }

/* =========================================================
   9. 隠しUI撤去（LPで無駄クリックさせない・全コンテンツ常時表示）
      ①オーダーカードのアコーディオン ②FAQ の開閉トグル を全展開。
      aria-expanded は HTML 側で true に整合、トグル記号は撤去。
   ========================================================= */
/* オーダーカード：常時展開・開閉ノブを撤去 */
.card__panel { grid-template-rows: 1fr !important; }
.card__panel > div { overflow: visible; }
.card__toggle { display: none !important; }
.card__btn { cursor: default; }
.card__btn:hover { border-color: var(--line); }   /* クリック不可＝hover強調を戻す */

/* ※ FAQ はクライアント判断で「全LPアコーディオンに統一」＝クリック開閉のまま。
   常時展開化は行わない（components.css の既定挙動＋main.js initFaq に委ねる）。 */

/* =========================================================
   10. スタイルカード：列幅いっぱいのフルブリード画像＋写真上に名前オーバーレイ
       （color_lp_v2 の colorcard 実装を .card__ に翻訳・全LPで見せ方を統一）
       名前は「英語(大)＋日本語(小)」の二層。カタカナ由来メニューは自然な英語が付く。
   ========================================================= */
/* フルブリード：セクション左右パディング clamp(22px,6vw,30px) を打ち消し列幅いっぱいに */
.card__btn {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  margin-inline: calc(-1 * clamp(22px, 6vw, 30px));
  width: calc(100% + clamp(22px, 6vw, 30px) * 2);
}
.card__btn:hover { border-color: transparent; }   /* 箱の枠線 hover を撤去 */

/* 画像は縦長 3:4・cover（カラーLPと同じ比率） */
.card__media { aspect-ratio: 3 / 4; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* 名前バーを写真下部へ絶対配置オーバーレイ＋このLPの寒色ダークのスクリム（茶にしない） */
.card__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding: 48px 16px 18px;   /* 上はグラデ用の余裕 */
  border: 0;
  background: linear-gradient(to top,
    rgba(19, 20, 23, .72) 0%,
    rgba(19, 20, 23, .32) 46%,
    rgba(19, 20, 23, 0)   100%);
}
.card__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  white-space: normal;
  line-height: 1.15;
  min-width: 0;
}
.card__en {
  font-family: var(--ff-en);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.card__ja {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
  color: #fff;
  opacity: .92;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* 番号バッジは左上(14px) */
.card__num { top: 14px; left: 14px; }

/* 詳細パネルは画像の下に従来展開・枠線撤去（inner padding は既定のまま） */
.card__panel { border: 0; }