/* =========================================================
   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, .16); }
.flow { border-top-color: rgba(42, 39, 36, .16); }

/* 店舗カードの罫線を少し立てる（複数カードの境界を明確化） */
.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; }

/* =========================================================
   9. 施術メニューカード：列幅いっぱいのフルブリード縦長写真＋写真上に名前オーバーレイ
      （color_lp_v2 の colorcard 実装を .menu__* に翻訳・全LPで見せ方を統一）
      名前は「英語(大)＋日本語(小)」の二層。スクリムはこのLPの暖色ダーク。
   ========================================================= */
/* フルブリード：セクション左右パディング clamp(22px,6vw,34px) を打ち消し .shell 幅いっぱいに */
.menu__media {
  position: relative;
  aspect-ratio: 2 / 3;                 /* 縦長・cover（カラーLPカードと統一） */
  margin-inline: calc(-1 * clamp(22px, 6vw, 34px));
  width: calc(100% + clamp(22px, 6vw, 34px) * 2);
  margin-bottom: 30px;                 /* 画像（名前オーバーレイ）直下の説明に呼吸を持たせる */
  border: 0;
  padding: 0;
  overflow: hidden;
}
/* 中の画像を必ずボックス(2:3)いっぱいに（picture内imgが正方形にならないよう絶対配置で埋める） */
.menu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 名前を写真下部へ絶対配置オーバーレイ＋このLPの暖色ダークのスクリム（純黒/茶にしない） */
.menu__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  line-height: 1.15;
  padding: 48px 16px 20px;             /* 上はグラデ用の余裕 */
  background: linear-gradient(to top,
    rgba(38, 35, 32, .74) 0%,
    rgba(38, 35, 32, .34) 46%,
    rgba(38, 35, 32, 0)   100%);
}
.menu__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);
}
.menu__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);
}

/* =========================================================
   10. FV動画（dk1＝コンマヘア男性・目元/眉クローズアップ）
       目・整えた眉が主役。目元を可視帯の中心へ。まばたきのみ・頭静止。
   ========================================================= */
.fv__video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 目・眉を可視帯の中心へ（上部の前髪も少し見せる） */
  object-position: 50% 38%;
  display: block;
}
/* 動画は自ら動くので ken-burns(kb) は当てない（section3の .fv__media img 用kbを上書き） */
.fv__media video { animation: none !important; }
.fv__media video img { width: 100%; height: 100%; object-fit: cover; }  /* 非対応時フォールバック */

/* ペーパー幕：korean/kami と同様に広く緩やかに。
   目元（上部〜約48%）は見せ、そこから段階的に濃くしコピー下部で完全不透明。急な段差なし。 */
.fv .fv__veil {
  background: linear-gradient(to bottom,
    rgba(246, 243, 239, 0)   0%,
    rgba(246, 243, 239, 0)   48%,
    rgba(246, 243, 239, .06) 57%,
    rgba(246, 243, 239, .15) 64%,
    rgba(246, 243, 239, .28) 71%,
    rgba(246, 243, 239, .44) 78%,
    rgba(246, 243, 239, .62) 84%,
    rgba(246, 243, 239, .80) 90%,
    rgba(246, 243, 239, .93) 95%,
    rgba(246, 243, 239, 1)   100%);
}

/* =========================================================
   Dityca 正式ロゴ画像に差し替え（岩田さん指示 2026-08-02）
   FV/翼＝暗い面に白ロゴ、footer＝paper面に濃色ロゴ
   ========================================================= */
/* ロゴを1.5倍に（岩田さん指示 2026-08-02）：26→39 / 30→45 / 28→42 */
.fv__mark img   { display: block; height: 39px; width: auto; }
.fv__mark small { color: rgba(255, 255, 255, .82); }   /* 暗い動画上で読める白系に */
.foot__mark     { line-height: 0; }
.foot__mark img { display: inline-block; height: 45px; width: auto; }
.wing__mark img { display: block; height: 42px; width: auto; }

/* PC右翼(まつ毛カット)が左翼(眉カット)より暗いので明るさを合わせる（岩田さん指示 2026-08-02） */
@media (min-width: 1100px) {
  .wing--r .wing__img { filter: brightness(1.4); }
}

/* ========== 眉のデザイン事例（browex/browcard）＝_browex/section.css を統合 ========== */
/* =========================================================
   section.css — 眉のデザイン事例（browex / browcard）
   dityca_mens_lp 追加セクション用。後で uplift.css へ統合予定。
   既存トークン(tokens.css)のみ使用・角丸0・影/グラデ/バッジ禁止・暖色ダーク。
   カード＝4:3の眉クローズアップ写真（上）＋名前(英/日)＋解説(下)。
   ※ .section / .section__head / .label-en / .h2 / .lead は既存クラスを流用。
   ========================================================= */

/* 事例グリッド：狭い shell(≒450px)内で 2 カラム、極小幅で 1 カラム */
.browex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(22px, 6vw, 30px) clamp(14px, 4vw, 20px);
  margin-top: 4px;
}

.browcard { margin: 0; }

/* 写真：4:3・cover・角丸0。眉が可視帯に来るよう上寄せクロップ */
.browcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--ink);          /* 読み込み前も暖色ダーク面 */
}
.browcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;        /* 眉・目もとを中心へ */
}

/* 事例番号（Jost・暖色アクセント・細ヘアライン付き＝章キッカーと同系） */
.browcard__no {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--ff-en);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--ink-3);
}
.browcard__no::before {
  content: "";
  width: 18px;
  height: 1px;
  background: rgba(94, 82, 74, .45);
  flex: 0 0 auto;
}

/* 名前：英語(Jost・アクセント)＋日本語(インク) */
.browcard__en {
  display: block;
  margin-top: 6px;
  font-family: var(--ff-en);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--accent-deep);
}
.browcard__ja {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
}

/* 解説：素人にわかる1〜2行。断定・効果保証はしない */
.browcard__desc {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* セクション注記（AI画像・イメージ断り＝他セクションと同じトーン） */
.browex-note {
  margin-top: clamp(24px, 6vw, 34px);
  font-size: 11px;
  line-height: 1.75;
  color: var(--ink-3);
}

/* =========================================================
   8. PC左右レール下部の可読性（2026-08-31）
   実測：右レールの "reserve"（11px 白）が背景の肌色に重なり 2.94:1。
   WCAG AA 4.5:1 未達で、文字影は WCAG の評価対象外。
   ベールの下側だけを濃くして地を沈める。写真の主要部（上〜中央）は触らない。
   ========================================================= */
@media (min-width: 1100px) {
  .wing__veil {
    background: linear-gradient(to bottom,
      rgba(38,35,32,.42)  0%,
      rgba(38,35,32,.12) 30%,
      rgba(38,35,32,.12) 45%,
      rgba(38,35,32,.58) 72%,
      rgba(38,35,32,.84) 100%);
  }
}

@media (min-width: 1100px) {
  /* 下部の文字は不透明の白にする（.86 のままだと地と混ざって実効比が落ちる） */
  .wing__ctas-head,
  .wing__foot { color: #fff; }
}

/* =========================================================
   9. 極小文字の底上げ（2026-08-31・design-audit【1】）
   本文・価格・CTA・注記に 11px 未満を残さない。
   対象はいずれも字送りの広い欧文マイクロラベルで、
   10 → 11px は見た目をほぼ変えずに可読性の下限を満たす。
     .label-en      10.5px（章キッカー）
     .shop__area    10.0px（nagoya sakae 等）
     .fv__mark small 9.0px（beauty salon）
     .browcard__no  10.5px（01〜05）
   ========================================================= */
.label-en,
.shop__area,
.browcard__no,
.fv__mark small { font-size: 11px; }