/* =============================================================
   文鳥屋 デザイン言語 v2「ダークシネマ×温かい差し色」
   2026-07-02 リデザイン（正本: redesign-brief-2026-07-02.md）
   全サンプルLP・index.html が継承する共通トークン
   ============================================================= */
:root{
  /* --- 色 --- */
  --black:#000000;          /* 背景メイン（純黒） */
  --navy:#0F1F2F;           /* 背景セカンダリ（濃紺） */
  --cream:#F7F4EE;          /* 明るいセクション背景（生成り） */
  --cream-2:#EFEAE0;        /* 明るい背景の段差 */
  --white:#FFFFFF;          /* 暗背景テキスト */
  --gray:#D1D5DB;           /* 暗背景の補足テキスト */
  --gold:#C9A961;           /* 差し色①: 温かみ・上質 */
  --gold-deep:#8B6F47;      /* ボタングラデの起点（茶） */
  --shu:#D84C1C;            /* 差し色②: 強調（朱） */
  --ink:#1E1913;            /* 明背景の本文 */
  --ink-soft:#5A523F;       /* 明背景の補足 */
  --hairline-dark:rgba(201,169,97,.30);  /* 金ヘアライン（暗背景用） */
  --hairline-light:#E4DDCC;              /* 明背景の罫線 */

  /* --- 書体 --- */
  --serif:'Noto Serif JP',serif;                                  /* 見出し1・2 / CTA */
  --mincho:'Zen Old Mincho','Noto Serif JP',serif;                /* 見出し3（カード） */
  --sans:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif; /* 本文 */

  /* --- 寸法・動き --- */
  --maxw:min(90vw,1000px);
  --sec-pad:clamp(40px,10vw,80px);
  --ease:cubic-bezier(.22,.8,.30,1);
}

/* ---- 基本リセット ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--black);color:var(--white);
  font-size:16px;line-height:1.8;letter-spacing:.3px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:auto-phrase;overflow-wrap:anywhere}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}

/* ---- セクション二層（暗 / 明） ---- */
.sec{padding:var(--sec-pad) 0;position:relative}
.sec-dark{background:var(--black);color:var(--white)}
.sec-navy{background:var(--navy);color:var(--white)}
.sec-light{background:var(--cream);color:var(--ink)}
.sec-light .lead{color:var(--ink-soft)}

/* ---- 見出し ---- */
.kicker{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.28em;
  color:var(--gold);margin-bottom:20px}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.7}
.h1{font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(32px,7.2vw,56px);line-height:1.4;letter-spacing:-.01em}
.h2{font-family:var(--serif);font-weight:600;
  font-size:clamp(24px,4.6vw,40px);line-height:1.5;letter-spacing:0}
.h3{font-family:var(--mincho);font-weight:600;font-size:clamp(20px,2.6vw,24px);line-height:1.6}
.lead{font-size:clamp(15px,1.8vw,16px);line-height:2;color:var(--gray);margin-top:18px;letter-spacing:.3px}

/* ---- CTAボタン（茶→金グラデ・文字は濃色でくっきり） ---- */
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.06em;
  color:#221A0C;background:linear-gradient(105deg,#A5854F,var(--gold) 55%);
  padding:16px 34px;border-radius:3px;border:0;cursor:pointer;min-height:52px;
  box-shadow:0 10px 30px -12px rgba(201,169,97,.55);
  transition:filter .25s var(--ease),transform .2s var(--ease),box-shadow .25s}
.btn-cta:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(201,169,97,.7)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.05em;
  color:var(--gold);border:1px solid var(--gold);padding:14px 28px;border-radius:3px;min-height:48px;
  transition:background .25s,color .25s,transform .2s var(--ease)}
.btn-line:hover{background:var(--gold);color:#221A0C;transform:translateY(-2px)}

/* ---- スクロール入場 ---- */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- カード hover ---- */
.lift{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.lift:hover{transform:scale(1.02);box-shadow:0 24px 56px -24px rgba(201,169,97,.35)}

/* ---- キーボードフォーカス ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}

/* =============================================================
   Before/After スライダー（署名パーツ・全ページ共通）
   使い方:
   <div class="ba" data-ba>
     <div class="ba-frame">
       <img class="ba-img" src="after.jpg" alt="文鳥屋が作った同じ商品のページ">
       <div class="ba-clip"><img class="ba-img" src="before.jpg" alt="よくある商品ページ（左側に表示）"></div>
       <div class="ba-bar" aria-hidden="true"><span class="ba-knob"></span></div>
       <span class="ba-tag ba-tag-b" aria-hidden="true">よくある商品ページ</span>
       <span class="ba-tag ba-tag-a" aria-hidden="true">文鳥屋が作ると</span>
       <input class="ba-range" type="range" min="0" max="100" value="50"
              aria-label="左右に動かして、作り替え前とあとを見比べる">
     </div>
     <p class="ba-hint">つまみを左右に動かして、見比べてください</p>
   </div>
   ※ before/after は同じ縦横比の画像を使う
   ============================================================= */
.ba{--pos:50%;max-width:760px;margin:0 auto}
.ba-frame{position:relative;overflow:hidden;border-radius:6px;
  border:1px solid var(--hairline-dark);background:var(--navy);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);user-select:none;-webkit-user-select:none}
.ba-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,.35);border-radius:6px}
.ba-img{width:100%;display:block;pointer-events:none}
.ba-clip{position:absolute;inset:0;width:var(--pos);overflow:hidden;border-right:1px solid rgba(255,255,255,.65)}
.ba-clip .ba-img{width:100%;max-width:none;position:absolute;top:0;left:0;
  /* 幅はJSでフレーム実寸に合わせる */}
.ba-bar{position:absolute;top:0;bottom:0;left:var(--pos);width:0;pointer-events:none}
.ba-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--shu);
  box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 0 4px rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center}
.ba-knob::before{content:"";width:14px;height:14px;
  border-left:2.5px solid #fff;border-right:2.5px solid #fff}
.ba-tag{position:absolute;top:14px;font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:7px 13px;border-radius:3px;pointer-events:none;z-index:3}
.ba-tag-b{left:14px;background:rgba(15,31,47,.88);color:var(--gray)}
.ba-tag-a{right:14px;background:rgba(201,169,97,.94);color:#221A0C;font-family:var(--serif)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;
  touch-action:none;-webkit-appearance:none;appearance:none;margin:0;z-index:4}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:100%}
.ba-hint{text-align:center;margin-top:14px;font-size:13px;color:var(--gray);letter-spacing:.08em;
  display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity .6s}
.ba-hint::before,.ba-hint::after{content:"";width:26px;height:1px;background:var(--hairline-dark)}
.ba.touched .ba-hint{opacity:.35}
.sec-light .ba-hint{color:var(--ink-soft)}
.ba.anim .ba-clip{transition:width .5s var(--ease)}
.ba.anim .ba-bar{transition:left .5s var(--ease)}
/* 初回の「動かせますよ」の合図は JS 側で --pos を 50→42→58→50 に一度だけ動かす
   （prefers-reduced-motion の場合は JS 側でスキップ） */