/*
 * FilmSelect デザイントークン・共通スタイル
 * 正: cc_package/02_デザイン参照/FilmSelect_v2_demo.html（クライアント承認済み）
 * 画面固有のスタイルは各画面の実装時に同モックから移植する。
 */

:root{
  --ink:#0F1216;          /* 基調ブラック */
  --ink-2:#161B21;
  --ink-3:#20262E;
  --paper:#F8F5EF;        /* 温白 */
  --paper-2:#FFFFFF;
  --line:#E5DECF;
  --line-dark:rgba(216,188,138,.22);
  --gold:#B9935A;         /* シャンパンゴールド */
  --gold-2:#D8BC8A;
  --gold-deep:#8C6D3F;
  --muted:#6E6A61;
  --muted-2:#9A948A;
  --ok:#2E7D5B; --warn:#B7791F; --info:#1B5E6E; --danger:#A63D3D;
  --serif:"Shippori Mincho B1", serif;
  --sans:"Noto Sans JP", sans-serif;
  --shadow:0 20px 60px -24px rgba(15,18,22,.28);
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.8;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--gold-2);color:var(--ink)}

/* ---------- Header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,44px);height:64px;background:rgba(15,18,22,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-dark);transition:background .4s}
.brand{display:flex;align-items:center;gap:10px;color:#fff;flex:none}
/* 確定版ロゴ。原本(1536x1024)は透明の余白を多く含むため、
   画像を加工せず、この枠でロゴ実体（x71-1471 / y367-682）だけを見せる。
   数値はすべて原本のピクセル比から算出しているので、高さを変えれば追随する。 */
.brand-logo{display:block;position:relative;overflow:hidden;height:34px;aspect-ratio:1401/316}
.brand-logo img{position:absolute;max-width:none;width:109.636%;height:auto;left:-5.068%;top:-116.139%}
.hd nav{display:flex;gap:26px;align-items:center}
.hd nav a{color:#CFC8BC;font-size:12.5px;letter-spacing:.08em;transition:color .3s;white-space:nowrap}
.hd nav a:hover{color:var(--gold-2)}
.hd .cta{display:flex;gap:10px;align-items:center}
.hd .cta .btn{white-space:nowrap}
.hd-menu{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex:none}
.hd-catch{flex:0 1 auto;min-width:0;margin-right:auto;margin-left:clamp(16px,3vw,36px);font-size:11.5px;
  letter-spacing:.06em;color:#AFA898;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-catch b{color:var(--gold-2);font-weight:500}
/* ハンバーガー（900px以下でのみ表示。CSSのみで開閉） */
.nav-toggle{display:none}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;
  cursor:pointer;padding:9px 8px;border:1px solid var(--line-dark);border-radius:8px}
.nav-burger span{display:block;height:1.5px;background:var(--gold-2);transition:transform .3s,opacity .3s}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  border-radius:999px;padding:10px 22px;font-size:13px;font-weight:500;letter-spacing:.06em;transition:all .35s cubic-bezier(.2,.6,.2,1)}
.btn-gold{background:linear-gradient(120deg,var(--gold) 0%,var(--gold-2) 55%,var(--gold) 100%);background-size:200% 100%;color:#181206}
.btn-gold:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 10px 26px -12px rgba(185,147,90,.8)}
.btn-ghost{border-color:rgba(216,188,138,.45);color:#EFE7D8}
.btn-ghost:hover{border-color:var(--gold-2);color:var(--gold-2)}
.btn-line{border-color:var(--gold);color:var(--gold-deep);background:transparent}
.btn-line:hover{background:rgba(185,147,90,.08)}
.btn-dark{background:var(--ink);color:#F3EBDD}
.btn-dark:hover{background:var(--ink-3);transform:translateY(-1px)}
.btn-lg{padding:15px 34px;font-size:14.5px}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- Page shell ---------- */
/* デモはSPAのため .page{display:none} だが、Rails ではページ単位描画なので常時表示に変更 */
.page{min-height:100vh;padding-top:64px;animation:pageIn .5s cubic-bezier(.2,.6,.2,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.wrap-n{max-width:820px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- Hero ---------- */
/* 背景写真（cc_package/02_デザイン参照/背景素材.png を無加工で使用）。
   被写体と光源が画面右にあるため右寄せで配置し、コピーが乗る左側は
   暗幕（linear-gradient）を濃くして可読性を確保している。
   ・横方向：左を96%まで落とし、右の被写体側は38%に留めて絵を見せる
   ・縦方向：上部はヘッダーとの重なり、下部はフィルムストリップへの繋ぎを締める */
.hero{position:relative;color:#EFEAE0;overflow:hidden;padding:clamp(96px,14vh,160px) 0 0;
  background:
    linear-gradient(90deg,rgba(15,18,22,.15) 0%,rgba(15,18,22,.15) 50%,rgba(15,18,22,.30) 60%,rgba(15,18,22,.58) 68%,rgba(15,18,22,.66) 74%,rgba(15,18,22,.30) 82%,rgba(15,18,22,.20) 100%) center/cover no-repeat,
    linear-gradient(180deg,rgba(15,18,22,.55) 0%,rgba(15,18,22,.06) 18%,rgba(15,18,22,.06) 60%,var(--ink) 97%) center/cover no-repeat,
    url("/assets/hero-bg-48276ae1.jpg") right center/cover no-repeat,
    var(--ink)}
/* 写真側に光の情報が入ったため、装飾グローは控えめにする */
.hero::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;pointer-events:none;
  background:radial-gradient(60% 55% at 70% 20%,rgba(185,147,90,.13),transparent 62%),
             radial-gradient(45% 45% at 20% 70%,rgba(27,94,110,.12),transparent 65%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(3%,4%,0) scale(1.06)}}
.hero .wrap{position:relative}
.kicker{font-size:11px;letter-spacing:.42em;color:var(--gold-2);text-transform:uppercase;margin-bottom:22px}
/* 背景写真の上に載るため、画面幅によって見出しの右端が明るい領域に掛かる場合の保険として
   ごく薄い影を敷く（通常の幅では暗幕だけで AAA 相当のコントラストを確保している） */
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5.4vw,62px);line-height:1.45;letter-spacing:.04em;
  text-shadow:0 2px 20px rgba(15,18,22,.55)}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--gold-2),#F0DDB6 50%,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Sections（複数ページ共通） ---------- */
section.sec{padding:clamp(64px,10vh,120px) 0}
/* アンカー遷移時に固定ヘッダー（64px）が見出しを隠さないようにする */
section[id]{scroll-margin-top:64px}
.sec-dark{background:var(--ink-2);color:#EDE7DA}
.sec-head{text-align:center;margin-bottom:clamp(36px,6vh,64px)}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.4vw,38px);letter-spacing:.06em;line-height:1.6}
.sec-head .kicker{margin-bottom:14px}
.sec-head p{color:var(--muted);max-width:640px;margin:16px auto 0;font-size:14px}
.sec-dark .sec-head p{color:#AFA898}
.gold-rule{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:20px auto 0;position:relative}
.gold-rule::after{content:"";position:absolute;left:50%;top:-2.5px;width:6px;height:6px;transform:translateX(-50%) rotate(45deg);background:var(--gold)}

/* ---------- Legal（利用規約・プライバシーポリシー / F-08） ---------- */
.legal h3{font-family:var(--serif);font-size:17px;margin:34px 0 12px;letter-spacing:.06em}
.legal p,.legal li{font-size:13.5px;color:#3d3a34}
.legal ol,.legal ul{padding-left:22px}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#8E887C;padding:60px 0 40px;font-size:12.5px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:44px}
footer h6{color:var(--gold-2);font-size:11px;letter-spacing:.26em;margin-bottom:16px;font-weight:500}
footer a{display:block;padding:5px 0;transition:color .3s}
footer a:hover{color:var(--gold-2)}
footer .fine{border-top:1px solid var(--line-dark);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;letter-spacing:.08em;font-size:11px}

/* ---------- Flash ---------- */
.env-badge{position:fixed;left:12px;bottom:12px;z-index:300;background:var(--danger);color:#fff;font-size:12px;
  font-weight:700;letter-spacing:.08em;padding:6px 12px;border-radius:6px;box-shadow:var(--shadow);pointer-events:none}
.flash{position:fixed;top:64px;left:0;right:0;z-index:90;background:var(--ink-3);color:var(--gold-2);
  text-align:center;font-size:13px;letter-spacing:.06em;padding:10px 16px;border-bottom:1px solid var(--line-dark)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero::before{animation:none}
  .page{animation:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1340px){
  .hd-catch{display:none}
}
@media (max-width:900px){
  /* 縦画面ではコピーが全幅に広がるため、横方向のグラデーションでは守れない。
     表示位置を45%にすると照明のホットスポットが文字の裏から外れ、
     必要な暗幕が最大30%まで下がる（右端の被写体側だと96%必要で写真が潰れてしまう）。 */
  .hero{background:
    linear-gradient(180deg,rgba(15,18,22,.55) 0%,rgba(15,18,22,.10) 20%,rgba(15,18,22,.10) 70%,var(--ink) 99%) center/cover no-repeat,
    linear-gradient(rgba(15,18,22,.32),rgba(15,18,22,.32)) center/cover no-repeat,
    url("/assets/hero-bg-48276ae1.jpg") 45% center/cover no-repeat,
    var(--ink)}
  .nav-burger{display:flex}
  .hd-menu{position:fixed;top:64px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;
    gap:0;padding:8px 20px 20px;background:var(--ink);
    border-bottom:1px solid var(--line-dark);max-height:calc(100vh - 64px);overflow-y:auto;
    box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
  .nav-toggle:checked ~ .hd-menu{display:flex}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .hd-menu nav{flex-direction:column;align-items:stretch;gap:0}
  .hd-menu nav a{padding:15px 4px;font-size:14px;border-bottom:1px solid var(--line-dark)}
  .hd-menu .cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:18px}
  .hd-menu .cta .btn{width:100%;padding:13px 22px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .brand-logo{height:30px}
  .hero{padding-top:clamp(72px,11vh,110px)}
  section.sec{padding:clamp(48px,7vh,80px) 0}
  footer .cols{grid-template-columns:1fr;gap:26px}
  footer .fine{flex-direction:column;gap:8px}
}