/* =========================================================
   uplift.css — 品質向上レイヤー（現構造維持・最後に読み込む）
   正本 DESIGN_LAWS_DEEP.md 第0/9/17/18章 準拠。
   目的：AIスロップ識別子(第18-1)の除去＋タイポ主役化(第18-2)
         ＋モーション格上げ(第18-3)＋据わる余白(第9-1)。
   このファイル単体を他5本へ移植して横展開する。
   ========================================================= */

/* ---- 18-4 和文タイポ6点セット（プログレッシブ・非対応は無害） ---- */
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 ページ間クロスフェード（第18-3・非対応は通常遷移＝無害） ---- */
@view-transition { navigation: auto; }

/* =========================================================
   1. AIスロップ #16 除去：ALL CAPS 英字ラベルを廃止
      → 小文字英字＋ヘアラインの「章キッカー」（エディトリアル・第3章）
   ========================================================= */
.label-en {
  text-transform: none;          /* uppercase 全廃 */
  font-weight: 400;
  letter-spacing: .12em;
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-3);
}
.label-en::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--ink-4);
  flex: 0 0 auto;
}
.section--ink .label-en { color: rgba(251, 249, 247, .82); }
.section--ink .label-en::before { background: rgba(251, 249, 247, .45); }

/* FV下端の欧文メタも uppercase をやめる（#16） */
.fv__meta { text-transform: none; letter-spacing: .16em; font-weight: 400; }

/* 小ラベルの ALL CAPS も一掃（店名サブ・翼タグ・予約見出し・エリア） */
.cta2 .btn span,
.shop__area,
.wing__tag,
.wing__ctas-head { text-transform: none; letter-spacing: .14em; }

/* =========================================================
   2. タイポ主役化（第17-1：集客LP FV は比率1.5〜1.618）
      FV見出し「色で、選ぶ。」は短句＝巨大化の好適地。
   ========================================================= */
.fv__title {
  font-size: clamp(34px, 11vw, 54px);
  line-height: 1.28;
  letter-spacing: .03em;
}
.fv__title em {
  margin-top: .18em;
  font-size: clamp(19px, 5.4vw, 26px);   /* サブ見出し格＝主線と差をつける(第0-3) */
  letter-spacing: .08em;
  color: var(--mocha);
}
/* コピーは下寄せ＝紙面が据わる（第9-1 Van de Graaf 思想） */
.fv__copy { top: auto; bottom: 8.5%; width: min(88%, 366px); }
.fv__sub { margin-top: 22px; line-height: 2.05; }

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

/* リード文の行長と余白を最適域へ（第9-4） */
.lead { line-height: 2.15; }

/* ---- 縦組みアクセント（第18-2 和/韓トーンの実証カード・顔に被せない） ---- */
.fv__vaccent {
  position: absolute;
  right: 18px; bottom: 20px;
  writing-mode: vertical-rl;
  font-family: var(--ff-mincho);
  font-size: clamp(15px, 4.2vw, 21px);
  letter-spacing: .32em;
  color: rgba(42, 39, 36, .34);
  pointer-events: none;
  z-index: 1;
}

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

  /* PC：カラーカード写真の静かなズーム（親要素で clip） */
  @media (hover: hover) and (min-width: 1100px) {
    .colorcard__media { overflow: hidden; }
    .colorcard__media img { transition: transform 900ms var(--ease); will-change: transform; }
    .colorcard__btn:hover .colorcard__media img { transform: scale(1.045); }
    /* 翼の写真もごく僅かに呼吸させる */
    .wing__img { animation: kb 22s var(--ease) both; }
  }

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

/* =========================================================
   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 の質感（引き算の美・第9-8）
   ========================================================= */
/* 主CTAは字間と高さで"押せる格"を出す */
.btn { letter-spacing: .08em; }
.fv__cta { padding-top: 26px; padding-bottom: 30px; }

/* =========================================================
   ラウンド2（岩田さん指摘 2026-08-01）
   ========================================================= */

/* ---- 6-a. PC右翼ナビの黒半透明ボックスを除去（可読性は影で担保） ---- */
@media (min-width: 1100px) {
  .wingnav { background: transparent !important; padding: 0 !important; }
  .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); }
}

/* ---- 6-b. カラーカード：アコーディオン廃止→常時展開＋整理 ---- */
/* 詳細を常に開く（クリック不要・LPでの隠しUIを廃止） */
.colorcard__panel { grid-template-rows: 1fr !important; }
.colorcard__toggle { display: none !important; }
.colorcard__btn { cursor: default; }

/* タイトルと説明の区分けを明確に・行間で視認性UP */
.colorcard__bar { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.colorcard__name { font-size: 18px; font-weight: 500; letter-spacing: .04em; }
.colorcard__inner { padding: 18px 18px 22px; }
.colorcard__desc { font-size: 13.5px; line-height: 1.95; color: var(--ink-2); margin-bottom: 4px; }

/* 詳細スペックを一段コンパクトに（全カード展開でも冗長にならないよう） */
.spec { margin-top: 14px; }
.spec div { padding: 10px 0; }
.spec dt { font-size: 11px; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 2px; }
.spec dd { font-size: 13px; line-height: 1.7; }

/* ---- 6-c. 曲線導入（控えめ）：髪の流れをイメージ ---- */
:root { --r-soft: 14px; --r-btn: 12px; }

/* 画像・カードの角をやわらかく（直線基調は残す） */
.colorcard__btn { border-radius: var(--r-soft); overflow: hidden; }
.colorcard__media { border-radius: 0; }
.fv__media { border-radius: 0 0 var(--r-soft) var(--r-soft); overflow: hidden; }
.shop, .worry { border-radius: var(--r-soft); overflow: hidden; }
.btn, .wing__cta { border-radius: var(--r-btn); }

/* 番号を円アクセントに（曲線モチーフ・視認性は維持） */
.colorcard__num {
  top: 12px; left: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(42,39,36,.72);
  backdrop-filter: blur(2px);
  font-size: 12px; letter-spacing: .04em;
}

/* セクションの継ぎ目にやわらかい曲線の肩（tint/paper面を丸めて曲線を出す） */
.section--tint, .section--paper {
  border-top-left-radius: 42px;
  border-top-right-radius: 42px;
}
.section--ink {
  border-top-left-radius: 42px;
  border-top-right-radius: 42px;
}

/* 章キッカーのヘアラインを"曲線"に（直線の—を弧に） */
.label-en::before {
  width: 30px; height: 6px;
  background: transparent;
  border-bottom: 1px solid var(--ink-4);
  border-radius: 0 0 40px 40px / 0 0 10px 10px;   /* ゆるい弧 */
}
.section--ink .label-en::before { border-bottom-color: rgba(251,249,247,.45); }

/* CTAの矢印を丸みのある動きに（ホバーで少し流れる） */
@media (prefers-reduced-motion: no-preference) {
  .btn__arrow { transition: transform 400ms var(--ease); }
  .btn:hover .btn__arrow { transform: translateY(3px); }
}

/* ---- FV動画（岩田さん指摘：映像でインパクト＋髪色を見せる） ---- */
.fv__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 28%;   /* 髪と表情が入る位置 */
  display: block;
}
/* 動画は自ら動くので ken-burns は当てない（img用の kb を上書き） */
.fv__media video { animation: none !important; }
/* 動画上でも下寄せコピーが読めるよう、幕を下側にも効かせる */
.fv .fv__veil {
  background:
    linear-gradient(to bottom, rgba(251,249,247,0) 34%, rgba(251,249,247,.55) 58%, rgba(251,249,247,.97) 82%, rgba(251,249,247,1) 100%),
    linear-gradient(100deg, rgba(251,249,247,.82) 0%, rgba(251,249,247,.5) 34%, rgba(251,249,247,0) 62%);
}