@charset "UTF-8";
/* ============================================================================
   common-2026.css — 2026リニューアル 共通クローム（トークン／ヘッダー／フッター）
   ----------------------------------------------------------------------------
   ・役割: 全リニューアルページで共有する CSS変数・リセット・ヘッダー・
           グローバルナビ・ハンバーガー・SPメニュー・フッター・画像演出。
           ページ固有のレイアウトは各ページのCSS（例: kobe-2026.css）に書く。
   ・読み込み順: common-2026.css → 各ページCSS（後勝ちで上書きする）

   【ファイル名について（重要）】
   docs/03_デザインガイド.md には「新規 site/css/renew-2026.css を作る」と書いてあるが、
   その名前はフォーム改修が先に使っている（main に既存。site/contact/index.php と
   site/contact/completion/index.php が読み込む）。同名にすると来店予約フォームの
   スタイルが丸ごと差し替わって壊れるため、こちらは common-2026.css とした。
   ・共通CSS（style.css / base.css）には一切手を入れていない
   ・クラス名は pc- プレフィックスで統一。既存クラスと衝突しない

   【重複についての申し送り】
   ヘッダー／フッター／SPメニューの定義は、現在レビュー中の PR #19
   （site/css/form-2026.css）にも同じものが入っている。
   PR #19 がマージされたら form-2026.css から該当ブロックを削除し、
   両フォームでこの common-2026.css を先に読み込む形に一本化すること。
   → 手順は docs/03_デザインガイド.md に記載
   ============================================================================ */

:root{
  /* ── 既存フォームと共通のトークン（form-2026.css と同値） ── */
  --pc-ink:#1E1B18;
  --pc-sub:#57514A;
  --pc-muted:#776E63;
  --pc-faint:#8E8578;
  --pc-line:#E5E1DC;
  --pc-line2:#D5CFC7;
  --pc-bg:#FFFFFF;
  --pc-bg2:#FAF8F5;
  --pc-bg3:#F5F1EB;
  --pc-accent:#A0522D;
  --pc-accent-soft:#D9BBA8;
  --pc-error:#B23B3B;
  --pc-serif-en:'Cormorant Garamond', serif;
  --pc-tel:'Lato', var(--pc-sans);
  --pc-serif-jp:'Noto Serif JP', serif;
  --pc-sans:'Noto Sans JP', sans-serif;
  --pc-chrome:1040px;   /* ヘッダー内側・フッター内側の共通最大幅 */

  /* ── Figma（神戸北野店デザイン）由来のトークン ── */
  --pc-surface:#F4F1EF;     /* basic/Surface   ベージュ帯 */
  --pc-surface2:#0E0D0C;    /* basic/Surface2  ボタン地 */
  --pc-gold:#C29F61;        /* basic/Accent    罫・FOLLOW US */
  --pc-bk1:#0F0D0C;         /* font/BK1        見出し・本文 */
  --pc-bksub:#151312;       /* font/BKsub      補足文 */
  --pc-wh2:#F7F0EB;         /* font/wh2        ボタン文字 */

  /* ページ本文の最大幅。左右の余白（--pc-gutter）を含む値。
     980 + 16*2 = 1012 → 中身がちょうど 980px になる
     （Figma PC: 本文カラム 980px ＝ 1440 - 230*2） */
  --pc-wrap:1012px;
  --pc-gutter:16px;         /* SPの左右余白（Figma SP: 402 - 370 = 16*2） */
}

*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;border:0}
/* 閉じているSPメニュー（translateX(100%) で画面右外に置いている）が
   横スクロールを生むのを止める。overflow-x:clip は overflow:hidden と違い
   スクロールコンテナを作らないため、position:sticky のヘッダーが壊れない。 */
html{overflow-x:clip}
body{
  font-family:var(--pc-serif-jp);
  background:var(--pc-bg);
  color:var(--pc-bk1);
  -webkit-font-smoothing:antialiased;
  font-weight:400;
  line-height:1.5;
}

/* 本文の共通ラッパ */
.pc-wrap{max-width:var(--pc-wrap);margin:0 auto;padding-left:var(--pc-gutter);padding-right:var(--pc-gutter)}

/* ============================================================================
   ヘッダー
   ・既定（.pc-header）      : 白の半透明バー＋黒文字（フォームで使用中の形）
   ・.pc-header--overlay     : ヒーロー画像に重ねる透過ヘッダー＋白文字
                               スクロールで .is-solid が付き白バーへ切り替わる
   ========================================================================= */
.pc-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--pc-line)}
.pc-header__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 32px;height:82px;max-width:var(--pc-chrome);margin:0 auto}
.pc-header__logo{display:flex;align-items:center;flex-shrink:0}
.pc-header__logo img{width:120px;height:auto;display:block}
.pc-header__logo .pc-header__logo--wh{display:none}
.pc-gnav{display:flex;align-items:center;gap:20px}
.pc-gnav a{font-size:13px;color:var(--pc-ink);text-decoration:none;letter-spacing:0.04em;font-weight:500;white-space:nowrap;transition:color .2s}
.pc-gnav a:hover{color:var(--pc-accent)}
.pc-gnav__mail{width:16px;height:12px;margin-left:2px;vertical-align:middle;display:inline-block}

/* ── 透過ヘッダー（ファーストビューに重ねる） ── */
.pc-header--overlay{position:absolute;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom:none;transition:background .35s,box-shadow .35s}
.pc-header--overlay .pc-header__logo .pc-header__logo--bk{display:none}
.pc-header--overlay .pc-header__logo .pc-header__logo--wh{display:block}
.pc-header--overlay .pc-gnav a{color:#FFF;font-weight:700;font-size:12px;text-shadow:0 0 4px rgba(0,0,0,0.5)}
.pc-header--overlay .pc-gnav a:hover{color:var(--pc-gold)}
.pc-header--overlay .pc-hamb__bar{background:#FFF;box-shadow:0 0 4px rgba(0,0,0,0.5)}
.pc-header--overlay .pc-hamb__label{color:#FFF;text-shadow:0 0 4px rgba(0,0,0,0.5)}
/* スクロールしてヒーローを抜けたら白バーで固定 */
.pc-header--overlay.is-solid{position:fixed;background:rgba(255,255,255,0.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--pc-line);animation:pcHeaderDrop .35s ease}
.pc-header--overlay.is-solid .pc-header__logo--bk{display:block}
.pc-header--overlay.is-solid .pc-header__logo--wh{display:none}
.pc-header--overlay.is-solid .pc-gnav a{color:var(--pc-ink);text-shadow:none;font-weight:500;font-size:13px}
.pc-header--overlay.is-solid .pc-hamb__bar{background:var(--pc-ink);box-shadow:none}
.pc-header--overlay.is-solid .pc-hamb__label{color:var(--pc-ink);text-shadow:none}
@keyframes pcHeaderDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ハンバーガー（SPのみ表示） */
.pc-hamb{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0}
/* 3本線。MENUラベルも span なので :not() で除外する（除外しないと
   ラベルが height:2px の線として扱われ、バーと重なって潰れる） */
.pc-hamb .pc-hamb__bar{display:block;width:26px;height:2px;background:var(--pc-ink);margin:0 auto;transition:transform .3s,opacity .3s}
.pc-hamb__label{display:block;font-size:9px;line-height:1.2;letter-spacing:0.14em;color:var(--pc-ink);margin-bottom:4px;font-weight:500;white-space:nowrap}
/* 開いた時：3本線を×に */
.pc-hamb.is-open .pc-hamb__bar:nth-of-type(2){transform:translateY(7px) rotate(45deg)}
.pc-hamb.is-open .pc-hamb__bar:nth-of-type(3){opacity:0}
.pc-hamb.is-open .pc-hamb__bar:nth-of-type(4){transform:translateY(-7px) rotate(-45deg)}
/* メニューを開いている間は透過ヘッダーでも黒アイコンに戻す（背面が暗くなるため白のまま×だと見づらい） */
/* 開いている間は影だけ外す。色は上の「透過＝白／白バー＝黒」の指定に任せる
   （ここで白に固定すると、白バー状態のとき×が白×白で見えなくなる） */
.pc-header--overlay .pc-hamb.is-open .pc-hamb__bar{box-shadow:none}

/* SPメニュー（右からスライドインする暗い半透明パネル） */
.pc-spmenu{position:fixed;inset:0 0 0 auto;width:78%;max-width:360px;background:rgba(28,25,24,0.94);z-index:99;transform:translateX(100%);transition:transform .35s ease;overflow-y:auto;padding:96px 32px 48px;-webkit-overflow-scrolling:touch}
.pc-spmenu.is-open{transform:translateX(0)}
.pc-spmenu__overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:98;opacity:0;visibility:hidden;transition:opacity .35s}
.pc-spmenu__overlay.is-open{opacity:1;visibility:visible}
.pc-spmenu a{display:block;color:#FFF;text-decoration:none;font-size:16px;letter-spacing:0.06em;padding:13px 0;font-weight:500}
.pc-spmenu a:active{color:var(--pc-accent-soft)}
.pc-spmenu__sub{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.2)}
.pc-spmenu__sub a{font-size:14px;color:rgba(255,255,255,0.85)}
.pc-spmenu__store{display:block;color:#FFF;font-family:var(--pc-serif-en);font-size:18px;letter-spacing:0.08em;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.2)}

/* ============================================================================
   共通パーツ：ご来店予約ボタン（Figma: reservation-button）
   ========================================================================= */
.pc-cta{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:340px;min-height:68px;padding:20px 10px;
  background:var(--pc-surface2);border:1px solid var(--pc-gold);
  color:var(--pc-wh2);font-family:var(--pc-serif-jp);font-weight:700;
  font-size:18px;line-height:1.3;letter-spacing:9px;text-indent:9px; /* 字送り分の右ズレを打ち消す */
  text-decoration:none;text-align:center;
  transition:background .3s,color .3s,border-color .3s;
}
.pc-cta:hover{background:var(--pc-gold);border-color:var(--pc-gold);color:#FFF}
.pc-cta--center{margin-left:auto;margin-right:auto}

/* ============================================================================
   画像演出（TOYO KITCHEN 風：カーテンが下から上へ抜け、画像が等倍に戻る）
   ・.pc-media でラップした要素が対象。JS（common-2026.js）が .is-inview を付ける
   ・--pc-curtain で背景に合わせたカーテン色を上書きできる
   ・ライブラリ不使用 / prefers-reduced-motion 対応
   ========================================================================= */
/* width:100% は必須。aspect-ratio と min-height を併用すると、
   width 指定が無い場合に min-height から幅が逆算されて横に膨らむ（横スクロールの原因） */
.pc-media{position:relative;display:block;width:100%;overflow:hidden;background:var(--pc-surface)}
.pc-media > img,
.pc-media > iframe{display:block;width:100%;height:100%;object-fit:cover;border:0}
.pc-media > img{
  transform:scale(1.12);
  transition:transform 1.4s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--pc-delay,0s);
}
.pc-media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:var(--pc-curtain,#FFFFFF);
  transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
  transition-delay:var(--pc-delay,0s);
}
.pc-media.is-inview > img{transform:scale(1)}
.pc-media.is-inview::after{transform:translateY(-100.5%)}
/* リンクの中にある画像はホバーでゆっくり寄る */
a:hover .pc-media.is-inview > img,
.pc-media.is-inview.pc-media--hover:hover > img{transform:scale(1.05);transition-duration:1.2s;transition-delay:0s}
/* ヒーローはカーテンなし。読み込み後にゆっくり等倍へ */
.pc-media--hero::after{display:none}
.pc-media--hero > img{transform:scale(1.06);transition:transform 6s ease-out}
.pc-media--hero.is-inview > img{transform:scale(1)}

@media (prefers-reduced-motion: reduce){
  .pc-media > img{transform:none!important;transition:none!important}
  .pc-media::after{display:none}
  .pc-header--overlay.is-solid{animation:none}
}

/* ============================================================================
   フッター（現行踏襲：黒背景・白文字の多カラム＋中央ロゴ＋TOPボタン）
   ========================================================================= */
.pc-foot{background:#111010;color:#FFF;padding:56px 0 40px;position:relative}
.pc-foot__cols{display:flex;flex-wrap:wrap;gap:32px 48px;justify-content:space-between;max-width:var(--pc-chrome);margin:0 auto;padding:0 32px}
.pc-foot__col{min-width:88px}
.pc-foot__h{font-size:14px;font-weight:500;letter-spacing:0.08em;margin-bottom:16px;color:#FFF}
.pc-foot__h a{color:#FFF;text-decoration:none}
.pc-foot__h a:hover{color:var(--pc-accent-soft)}
.pc-foot__col ul{list-style:none}
.pc-foot__col li{margin-bottom:11px}
.pc-foot__col li a{font-size:12.5px;color:rgba(255,255,255,0.72);text-decoration:none;letter-spacing:0.04em;transition:color .2s}
.pc-foot__col li a:hover{color:#FFF}
.pc-foot__gap{margin-top:20px}
.pc-foot__logo{text-align:center;margin-top:48px}
.pc-foot__logo img{width:150px;height:auto}
.pc-foot__copy{text-align:center;font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:0.1em;margin-top:24px}
/* ── TOPへ戻る（追従フロート） ──
   以前は .pc-foot の中に position:absolute で置き、SPだけ top:44px にしていた。
   そのためフッター最上部の店舗リストに重なり、追従ヘッダーの下に半分隠れていた。
   position:fixed の追従ボタンに変更。白い本文の上でも黒いフッターの上でも読めるよう
   濃色の塗り＋白の細枠にしてある。
   .is-visible が付くまで見えない（common-2026.js が一定量スクロールしたら付ける）。
   ※フォーム側（form-2026.css）と同じ定義。CSS重複の解消時に一本化すること。 */
.pc-foot__top{position:fixed;right:24px;bottom:24px;z-index:90;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,0.45);background:rgba(30,27,24,0.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#FFF;font-family:var(--pc-sans);font-size:11px;letter-spacing:0.1em;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,visibility .3s,transform .3s,background .25s}
.pc-foot__top.is-visible{opacity:1;visibility:visible;transform:none}
.pc-foot__top:hover{background:rgba(30,27,24,0.95)}
.pc-foot__top:focus-visible{outline:2px solid var(--pc-accent-soft);outline-offset:3px}
.pc-foot__top span{font-size:15px;line-height:1}
/* SPメニューを開いている間は隠す（z-index はメニュー98/99より下に置いてある） */
body:has(.pc-spmenu.is-open) .pc-foot__top{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .pc-foot__top{transition:none;transform:none}
}

/* ── 文字を拡大している端末での折り返し ──
   中央揃えの本文は、端末のフォントサイズを大きくしていると1行に収まらず
   語の途中で折り返してしまう（「お届けします」→「お届けし／ます」）。
   word-break:auto-phrase は日本語を文節単位で折り返す（Chrome 119+ 系）。
   未対応ブラウザ用に、HTML側で文節を .pc-nb（inline-block）で囲っている。
   ※フォーム側（form-2026.css）と同じ。CSS重複の解消時に一本化すること。 */
.pc-intro__lead,.pc-consult__txt,.pc-consult__h,
.pc-item__brand,.pc-item__name,.pc-follow__txt,
.pc-news__title,.pc-cta,.pc-foot__col li a,.pc-spmenu a{word-break:auto-phrase}
.pc-nb{display:inline-block;max-width:100%}

/* ============================================================================
   ブレークポイント（モバイルファーストではなく、既存フォームに合わせた max-width）
   ========================================================================= */
/* ヘッダー：PCナビが窮屈になる幅でハンバーガーへ切替 */
@media (max-width:900px){
  .pc-header__inner{justify-content:center;position:relative;padding:0 20px;height:64px}
  .pc-gnav{display:none}
  .pc-hamb{display:flex;position:absolute;right:16px;top:50%;transform:translateY(-50%)}
  .pc-header__logo img{width:96px}
}
@media (max-width:560px){
  .pc-header__inner{padding-left:20px;padding-right:20px}
  /* 予約ボタンはSPでもFigmaと同じ 68px高 / 18px / 字送り9px のまま（縮めない） */
  /* フッター：縦積み */
  .pc-foot{padding:44px 0 32px}
  .pc-foot__cols{flex-direction:column;gap:28px;padding:0 24px}
  .pc-foot__top{right:16px;bottom:16px;width:54px;height:54px;font-size:10px}
}