/* ==========================================================================
   CLUB TOKI 時空 ─ 店舗テーマ（白基調）
   配置先： /toki/assets/css/theme-b.css
   生成り白の紙面 × 墨の文字 × 銀鼠のヘアライン。
   昼の顔／落ち着いた品格。写真の色が素直に出るのが利点。
   ========================================================================== */

:root{
  /* ---- 白（面） ---------------------------------------------------- */
  --bk:  #fbfaf7;   /* ベース背景（生成り） */
  --bk1: #f4f2ec;   /* セクション交互背景 */
  --bk2: #ffffff;   /* カード */
  --bk3: #e9e6de;   /* 画像待機面 */

  /* ---- 墨（アクセント） --------------------------------------------
     ※変数名はA案と共通。白基調では「銀」の役割を濃い墨が担う。
     ------------------------------------------------------------------ */
  --ag1: #17181b;   /* 最も濃い墨＝強調 */
  --ag2: #3b3e44;   /* 標準 */
  --ag3: #7b8089;   /* 薄墨・小見出し */
  --ag4: #a8adb5;   /* かすれ */

  /* 金属質グラデーション（白地では黒鉛の艶として効かせる） */
  --silver-text: linear-gradient(178deg,#5a5e65 0%,#1c1d21 18%,#3d4147 42%,
                                 #131418 60%,#3a3e44 78%,#22242a 96%);
  --silver-fill: linear-gradient(100deg,#2b2d33,#15161a 48%,#383c42);
  --silver-rule: linear-gradient(90deg,transparent,rgba(0,0,0,.24),transparent);

  /* ---- 文字 -------------------------------------------------------- */
  --txt:  #2a2c31;
  --txt2: #565b63;
  --txt3: #8b9099;

  /* ---- 罫線 -------------------------------------------------------- */
  --line:  rgba(0,0,0,.15);
  --line2: rgba(0,0,0,.075);

  /* ---- 書体（A案と共通。差は色だけに絞って比較しやすくする） -------- */
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --min:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;

  /* ---- 字間 -------------------------------------------------------- */
  --ls-body:   .055em;
  --ls-lead:   .20em;
  --ls-head:   .24em;
  --ls-eyebrow:.55em;
  --ls-nav:    .34em;

  /* ---- 余白 -------------------------------------------------------- */
  --gutter:      clamp(20px,5vw,72px);
  --sec-pad:     clamp(84px,12vw,168px);
  --max:         1180px;

  /* ---- モーション -------------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  1.25s;

  /* ---- 店舗識別 ---------------------------------------------------- */
  --theme-color:#fbfaf7;
  --theme-name:"B";

  /* ==== 面・被膜トークン ============================================ */
  --hd-veil:   linear-gradient(180deg,rgba(251,250,247,.95),rgba(251,250,247,0));
  --hd-bg:     rgba(251,250,247,.94);
  --drawer-bg: rgba(251,250,247,.985);

  /* 写真が入ったので、ロゴが読める範囲まで被膜を薄くしている */
  /* 中央をいちばん白くしてロゴを読ませ、周囲は写真を見せる。
     （白基調なので、黒いロゴの背後が白いほど読みやすい）
     実機で明るい写真・暗い写真の両方を見て決めた値。 */
  --hero-veil: radial-gradient(ellipse at 50% 46%,rgba(251,250,247,.80) 0%,
                               rgba(251,250,247,.62) 38%,rgba(251,250,247,.28) 72%),
               linear-gradient(180deg,rgba(251,250,247,.55),rgba(251,250,247,.10) 38%,rgba(251,250,247,.62));
  --phero-veil:linear-gradient(180deg,rgba(251,250,247,.92),rgba(251,250,247,.60) 55%,var(--bk));
  --hairline-v:linear-gradient(180deg,rgba(0,0,0,.38),transparent);

  /* 銀のロゴPNGは白地で沈むため、暗く落として墨のように見せる */
  --logo-filter:grayscale(1) brightness(.26) contrast(1.25);
  --logo-glow:  drop-shadow(0 2px 16px rgba(0,0,0,.10));
  --mark-filter:grayscale(1) brightness(.35);
  --mark-op:  .055;
  --mark-op2: .075;

  --img-filter:      saturate(.86) brightness(1.0);
  --img-filter-hover:saturate(1) brightness(1.04);
  --map-filter:      none;   /* 地図はカラー表示 */

  /* 写真の上に載る要素は白地でも従来どおり白文字／暗い被膜 */
  --cap-txt:   rgba(255,255,255,.86);
  --cell-veil: linear-gradient(180deg,transparent 52%,rgba(0,0,0,.55));

  --lb-bg:     rgba(249,248,244,.985);
  --lb-nav-bg: rgba(255,255,255,.72);
  --spcta-bg:  rgba(251,250,247,.96);
  --modal-bg:  rgba(240,238,232,.94);
  --note-bg:   rgba(244,242,236,.95);
  --on-silver: #fbfaf7;   /* 墨ベタ面にのせる文字色 */

  /* 写真プレースホルダ（納品時に削除） */
  --pl-bg:
    linear-gradient(135deg,rgba(0,0,0,.035),rgba(0,0,0,0) 42%),
    repeating-linear-gradient(45deg,rgba(0,0,0,.022) 0 1px,transparent 1px 11px),
    radial-gradient(ellipse at 50% 40%,#eeebe4,#dedad1 72%);
  --pl-i: rgba(0,0,0,.34);
  --pl-b: rgba(0,0,0,.20);
}

/* 墨文字ユーティリティ（クラス名はA案と共通） */
.silver{
  background:var(--silver-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ヘアライン罫 */
.rule  { height:1px; border:0; background:var(--silver-rule); }
.rule-v{ width:1px; height:70px; margin:0 auto;
         background:linear-gradient(180deg,transparent,rgba(0,0,0,.34),transparent); }

/* ボタン（下から墨が満ちる） */
.btn{
  font-family:var(--serif); font-size:12px; letter-spacing:var(--ls-nav);
  text-transform:uppercase; padding:18px 46px;
  border:1px solid var(--line); color:var(--ag2);
  position:relative; overflow:hidden; background:none; cursor:pointer;
  transition:color .45s, border-color .45s;
}
.btn > span{ position:relative; z-index:2 }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--silver-fill);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{ color:var(--on-silver); border-color:var(--ag2) }
.btn:hover::before{ transform:none }

/* スクロールリビール */
.rv{ opacity:0; transform:translateY(30px);
     transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv.d1{ transition-delay:.12s } .rv.d2{ transition-delay:.24s } .rv.d3{ transition-delay:.36s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  .rv{ opacity:1; transform:none }
}

/* ==========================================================================
   白基調ゆえの微調整（site.css より詳細度を1段上げて上書き）
   ========================================================================== */

/* 白地では枠線だけのカードが浮くので、面をわずかに沈ませる */
html .shop{ background:var(--bk2); box-shadow:0 1px 2px rgba(0,0,0,.03) }
html .shop:hover{ border-color:var(--ag4) }
html .stat,html .route,html .step{ background:var(--bk2) }
html .merit{ background:var(--bk2) }
html footer{ background:var(--bk1) }
html .next-nav a{ background:var(--bk2) }
html .next-nav a:hover{ background:var(--bk1) }

/* フォーム要素は白地に白では沈むため、面を明示 */
html .field input,html .field select,html .field textarea{
  background:#fff; border-color:var(--line) }
html .modal .box{ background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.14) }

/* ヘッダーは白地だと境界が消えやすいので、固定時の陰を少しだけ足す */
html header.gh.stuck{ box-shadow:0 1px 0 rgba(0,0,0,.05) }

/* 明朝の細線が白地で飛ばないよう、本文をごくわずかに締める */
html body{ -webkit-font-smoothing:auto }

/* ==========================================================================
   写真スロット
   HTML側には <div class="img" style="background-image:url(...)"> を仕込んである。
   assets/img/photos/ に所定の名前で画像を置けば自動的に表示され、
   無いあいだは site.js がその枠ごと取り除く。
   ※ .gcell .img（ギャラリー）は共通の site.css 側で定義済み。
   ========================================================================== */
.hero .slide .img,
.ph .img{
  position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center;
}
.ph .img{
  filter:var(--img-filter);
  transition:transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.shop:hover .ph .img{ transform:scale(1.05); filter:var(--img-filter-hover) }

/* ==========================================================================
   地図スロット
   Googleマップの「地図を埋め込む」で出てくる <iframe> を、そのまま貼れば収まる。
   先方のコードに付いてくる width / height / style は、ここで打ち消している。
   ========================================================================== */
.ph.map{ background:var(--bk3) }
.ph.map iframe,
.mapbox iframe{
  position:absolute; inset:0; z-index:1;
  width:100%  !important;
  height:100% !important;
  max-width:none !important;
  border:0 !important;
  display:block;
  filter:var(--map-filter);      /* カラー表示（--map-filter: none） */
}

/* ライトボックス：拡大時は切り抜かず全体を見せる */
.lb .shot .img{
  position:absolute; inset:0;
  background-size:contain; background-repeat:no-repeat; background-position:center;
}