@charset "UTF-8";
/* ============================================================================
   shop-2026.css — 店舗ページ共通レイアウト（全店舗ページで共用）
   ----------------------------------------------------------------------------
   ★2026-09-14 に kobe-2026.css からリネーム。神戸北野店の型を全店に横展開するため、
     店舗ページのレイアウトはこの1ファイルで管理する。
     決定: docs/decisions/2026-09-14_店舗ページを神戸の型で全店に横展開する.md
   ・読み込み元: site/shop/<店舗>/index-2026.html（現在は kobe / osaka）
   ・読み込み順: common-2026.css（共通クローム）→ 本ファイル
   ・★このファイルを直したら、既存の全店舗ページを確認すること。
     店舗固有のスタイルは原則作らない。どうしても要るときは body のID
     （#kobe / #osaka …）で限定し、このファイルの末尾にまとめる。
     店舗ごとの別CSSファイルは作らないこと（共通部分の二重管理になるため）
   ・出典: Figma  PC → 「Desktop - 1」node-id=1-2
                  SP → 「SP_shopdetail」node-id=5-2 / 「SP_shopinfo」node-id=4-367
          いずれも 2026-08-24 更新版。神戸北野店で起こしたものを全店の基準とする
   ・書体は全て Noto Serif JP。font-size / font-weight / line-height は
     Figmaの書き出し値をそのまま使う（px指定の line-height も px のまま）
   ・モバイルファースト。SPをベースに書き、min-width で PC へ拡張する
   ・数値の基準  PC: 1440px（本文カラム 980px = 1440 - 230*2）
                 SP:  402px（本文カラム 370px = 402 - 16*2）
   ============================================================================ */

/* ── ファーストビュー ─────────────────────────────────────────────────
   Figma: hiro 1440x522（比率 240/87）。ヘッダーを重ねるため position:relative */
.pc-fv{position:relative}
.pc-fv__media{aspect-ratio:240/87;min-height:280px}

/* ── 店舗概要 ─────────────────────────────────────────────────────────
   Figma（2026-08-24 更新）:
     左カラム 475px … 見出し / 本文 / ご来店予約ボタン
     右カラム 465px … 住所・営業時間・電話番号・アクセス / 地図 465x152
     カラム間 40px（475 + 40 + 465 = 980）
   ※ 地図は右カラムの最下部。下端が左カラムの予約ボタンの下端とそろう */
.pc-intro{padding:48px 0 0}
.pc-intro__grid{display:grid;grid-template-columns:1fr;gap:30px}
/* グリッドの子は既定で min-width:auto（＝最小コンテンツ幅）。
   aspect-ratio + min-height の画像枠があるとトラックが押し広げられて
   横スクロールが出るため、明示的に 0 へ落とす */
.pc-intro__grid > *,
.pc-consult__inner > *,
.pc-recommend__grid > *,
.pc-news__grid > *,
.pc-gallery__grid > *{min-width:0}

/* 左カラム */
/* SP: 見出し34px高 → 30px空け → 本文16px/32px → 30px空け → ボタン370x68 */
.pc-intro__title{font-size:24px;font-weight:700;line-height:1.4;color:#000}
.pc-intro__lead{margin-top:30px;font-size:16px;font-weight:400;line-height:32px;color:#000}
.pc-intro__cta{margin-top:30px}
/* 予約ボタンは左カラムいっぱい（PCで475px）。共通の max-width:340px を解除 */
.pc-intro__cta .pc-cta{max-width:none}
/* 予約ボタンの下にもう1本ボタンを置く店舗（EICHHOLTZ神戸のブランドサイト導線）用。
   .pc-cta を2つ以上並べたときだけ効く */
.pc-intro__cta{display:flex;flex-direction:column;gap:12px}
/* ★従属的な導線のボタン。予約ボタンより目立たせない（白地・濃い文字）。
   EICHHOLTZ神戸で新設（2026-09-19）。他店でも使える形にしてある */
.pc-cta--ghost{
  background:transparent;border:1px solid var(--pc-gold);
  color:var(--pc-bk1);font-size:16px;letter-spacing:4px;text-indent:4px;
  min-height:56px;
}
.pc-cta--ghost:hover{background:var(--pc-gold);border-color:var(--pc-gold);color:#FFF}

/* 右カラム */
.pc-intro__side{display:flex;flex-direction:column}
.pc-intro__data{display:flex;flex-direction:column;gap:20px}
.pc-intro__map{margin-top:20px;height:152px}
.pc-intro__map iframe{width:100%;height:100%}
.pc-intro__addr{font-size:14px;font-weight:400;line-height:21px;color:#000}
.pc-intro__row{display:flex;gap:20px;font-size:14px;line-height:21px;color:#000}
.pc-intro__row dt{flex:0 0 61px;font-weight:500}
.pc-intro__row dd{flex:1 1 auto;font-weight:400;text-align:right}
/* アクセスは値が2ブロックあるため grid で縦に積む（左揃え・Figma準拠） */
.pc-intro__row--access{display:grid;grid-template-columns:61px 1fr;column-gap:20px;row-gap:10px}
.pc-intro__row--access dt{grid-column:1;grid-row:1}
.pc-intro__row--access dd{grid-column:2;text-align:left}
.pc-intro__row dd a{color:inherit;text-decoration:none;transition:color .2s}
.pc-intro__row dd a:hover{color:var(--pc-gold)}

/* ── フロアギャラリー ─────────────────────────────────────────────────
   SP  : 画面いっぱいの自動カルーセル（Figma SP_shopdetail / Frame 22）
         402px幅のとき スライド340x227・隙間10px・左右に31pxずつ前後がのぞく
         → padding-inline を 31/402 = 7.7% にすると、中身の幅がそのまま
           スライド幅（＝100%）になる
         自動送りは common-2026.js（[data-pc-carousel]）が担当
   PC  : 2×2グリッド・隙間4px
   ------------------------------------------------------------------------ */
.pc-gallery{margin-top:60px}
.pc-gallery .pc-wrap{padding-left:0;padding-right:0}   /* SPは全幅 */
.pc-gallery__grid{
  display:flex;gap:10px;
  padding-inline:7.7%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                                 /* Firefox */
}
.pc-gallery__grid::-webkit-scrollbar{display:none}      /* Chrome / Safari */
.pc-gallery__item{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:488/326}
@media (prefers-reduced-motion: reduce){
  .pc-gallery__grid{scroll-behavior:auto}
}

/* ── ギャラリーにブランド名を重ねる（任意）──────────────────────────────
   `.pc-gallery--branded` を付けると、写真全体に半透明の黒を敷き、その上に
   ブランド名（`.pc-gallery__label`）を白で重ねる。
   初出: 横浜店（レピス）の calligaris Gallery（2026-09-17）。

   ★半透明の黒は必須。写真は店舗ごとに差し替わるので、白っぽい写真が来ても
     読めるようにしておく必要がある（TOPへ戻るボタンで「塗りを外すと本文の上で
     文字が消える」問題に当たったのと同じ理屈）。

   ★`.pc-media::after` はリビール演出のカーテン（z-index:2）が使っているため、
     塗りは `::before`（z-index:1）で敷く。ラベルはカーテンより上（z-index:3）。
     カーテンは白なので、抜けきるまで白文字は見えず、写真と一緒に現れる。
   ------------------------------------------------------------------------ */
.pc-gallery__stage{position:relative}
.pc-gallery--branded .pc-gallery__item::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,.38);
}
.pc-gallery__label{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  padding-inline:16px;
  font-size:34px;font-weight:400;line-height:1.2;letter-spacing:.08em;
  color:#FFF;text-align:center;pointer-events:none;
  /* 塗りに加えて影も足す二段構え。写真の一部だけ白飛びしている場合の保険 */
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}

/* ── RECOMMEND ITEM ──────────────────────────────────────────────────── */
.pc-recommend{margin-top:56px;padding:56px 0 64px;background:var(--pc-surface);--pc-curtain:var(--pc-surface)}
.pc-recommend__h{font-size:28px;font-weight:700;line-height:60px;text-align:center;color:var(--pc-bk1)}
/* 見出し下のリード文（任意）。ブース単位でまとめて紹介する店舗で使う（初出: 大丸東京店の
   カリガリスブース）。使わない店舗では要素ごと置かない。 */
.pc-recommend__lead{margin-top:16px;font-size:14px;font-weight:400;line-height:24px;text-align:center;color:var(--pc-bk1)}
.pc-recommend__grid{margin-top:36px;display:grid;grid-template-columns:1fr;gap:44px 28px}
/* ブランド名の行を持たないカード（1ブランドで統一された店舗）。
   `.pc-item__brand` を置かないだけで成立するが、画像と品名が近づきすぎないよう余白を足す。 */
.pc-item--noBrand .pc-item__name{margin-top:6px}
/* 写真だけを並べるカード（商品ごとの原稿が無い店舗）。初出: 栗東店（2026-09-18）。
   中身が .pc-item__media だけなので gap は効かないが、明示しておく。
   ★このセクションの文字情報は img の alt だけになる。alt を空にしないこと。 */
.pc-item--photoOnly{gap:0}
.pc-item{display:flex;flex-direction:column;gap:10px}
.pc-item__media{aspect-ratio:309/247}
.pc-item__brand{font-size:24px;font-weight:500;line-height:28.8px;text-align:center;color:var(--pc-bk1)}
.pc-item__name{font-size:16px;font-weight:500;line-height:24px;text-align:center;color:var(--pc-bk1)}
.pc-item__txt{font-size:14px;font-weight:500;line-height:21px;color:var(--pc-bk1)}

/* 取扱いブランド版（CARRIED BRANDS）。初出: 栗東店 Sleep Lab（2026-10-08）。
   .pc-item をそのまま使い、写真比率・文字サイズ・列数だけ変える。
   SPは1列（他店と同じ）、タブレット・PCは2列（10件が割り切れる列数）。 */
/* SPは他店のRECOMMENDと同じ1列（.pc-recommend__grid の既定のまま） */
.pc-recommend--brands .pc-item{gap:8px}
.pc-recommend--brands .pc-item__media{aspect-ratio:16/10}
.pc-recommend--brands .pc-item__brand{margin-top:4px;font-size:22px;line-height:1.4;letter-spacing:.04em}
.pc-recommend--brands .pc-item__name{font-size:14px;line-height:1.5}
.pc-recommend--brands .pc-item__txt{font-size:14px;font-weight:400;line-height:1.8}
/* その他取り扱いブランド（グリッドの下に1ブロック） */
.pc-brands-other{margin-top:48px;padding-top:32px;border-top:1px solid rgba(0,0,0,.15);text-align:center}
.pc-brands-other__h{font-size:16px;font-weight:700;line-height:1.5;color:var(--pc-bk1)}
.pc-brands-other__txt{margin-top:12px;font-size:14px;font-weight:400;line-height:2;color:var(--pc-bk1)}
@media (min-width:768px){
  .pc-recommend--brands .pc-recommend__grid{gap:40px 28px}
  .pc-recommend--brands .pc-item__brand{font-size:20px}
  .pc-recommend--brands .pc-item__name{font-size:14px}
  .pc-recommend--brands .pc-item__txt{font-size:14px}
}
@media (min-width:1024px){
  /* PCも2列（5列だと写真が小さすぎるため 2026-10-08 変更）。幅を絞って写真が大きくなりすぎないようにする */
  .pc-recommend--brands .pc-recommend__grid{grid-template-columns:repeat(2,1fr);gap:64px 48px;max-width:1000px;margin-inline:auto}
  .pc-recommend--brands .pc-item{gap:10px}
  .pc-recommend--brands .pc-item__brand{margin-top:8px;font-size:24px}
  .pc-recommend--brands .pc-item__name{font-size:15px}
  .pc-recommend--brands .pc-item__txt{margin-top:4px;font-size:15px;line-height:1.8}
  .pc-brands-other{margin-top:64px;padding-top:40px}
  .pc-brands-other__h{font-size:18px}
  .pc-brands-other__txt{font-size:15px}
}

/* ── コーディネート相談 ──────────────────────────────────────────────── */
.pc-consult{padding:56px 0 0}
.pc-consult__inner{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.pc-consult__media{aspect-ratio:362/328}
.pc-consult__h{font-size:26px;font-weight:500;line-height:54px;text-align:center;color:var(--pc-bk1)}
.pc-consult__txt{margin-top:24px;font-size:16px;font-weight:500;line-height:24px;color:var(--pc-bk1)}
.pc-consult__cta{margin-top:36px}
/* 文末改行（<br class="pc-br">）はPC幅のみ。SP・タブレットでは自然に流す
   .pc-flow を付けた本文は、PCでは文節単位ではなく行末まで詰めて流す（Figmaの折り返しに合わせる） */
.pc-br{display:none}

/* ── Shop Information ────────────────────────────────────────────────────
   Figma（2026-08-24 更新）: 枠線・店舗ラベル付きの縦カード → 横並びの4件へ変更。
   サムネイル 197x132 ＋ 余白30px ＋ 日付/タイトル（16px / 500 / line-height 24px）。
   2列 x 2行、列間20px・行間20px（480 + 20 + 480 = 980）。 */
.pc-news{padding:72px 0 0}
.pc-news__h{font-size:26px;font-weight:500;line-height:54px;text-align:center;color:var(--pc-bk1)}
.pc-news__grid{margin-top:32px;display:grid;grid-template-columns:1fr;gap:0;list-style:none}
/* SP（Figma SP_shopinfo）: 1件 370x88、サムネ137 ＋ 余白30 ＋ 本文203。
   件と件の間は32pxで、その中央に区切り線が1本入る → 上下16pxのpadding＋border-top */
.pc-news__item{padding:16px 0}
.pc-news__item + .pc-news__item{border-top:1px solid var(--pc-line)}
.pc-news__item a{display:flex;align-items:center;gap:30px;color:var(--pc-bk1);text-decoration:none}
.pc-news__media{position:relative;flex:0 0 37%;aspect-ratio:1/1;--pc-curtain:#FFFFFF}
.pc-news__body{flex:1 1 auto;min-width:0}
.pc-news__date{font-size:16px;font-weight:500;line-height:23px;color:var(--pc-bk1)}
.pc-news__title{margin-top:5px;font-size:16px;font-weight:500;line-height:23px;color:var(--pc-bk1)}
.pc-news__item a:hover .pc-news__title{color:var(--pc-gold)}
/* 店舗ラベル（神戸北野店／全店共通）。現デザインでは未使用。
   CMS化したときにバッジを出したくなったら <span class="pc-news__label"> を復活させる。
   カーテン（::after / z-index:2）より下に置き、画像と一緒に現れるようにしてある。 */
.pc-news__label{
  position:absolute;left:0;top:0;z-index:1;
  padding:4px 10px;background:rgba(14,13,12,0.86);
  color:#FFF;font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.4;
}

/* ── SPではボタンを本文カラムいっぱいに（Figma SP: 370px = 本文と同幅） ── */
@media (max-width:767px){
  .pc-cta{max-width:none}
}

/* ── FOLLOW US ───────────────────────────────────────────────────────── */
.pc-follow{padding:56px 0 72px}
.pc-follow__box{
  max-width:664px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:30px 24px;border:1px solid var(--pc-gold);
  text-decoration:none;
  transition:background .3s;
}
.pc-follow__box:hover{background:rgba(194,159,97,0.06)}
.pc-follow__en{font-size:28px;font-weight:300;line-height:1.2;color:var(--pc-gold);white-space:nowrap}
.pc-follow__right{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:335px}
.pc-follow__icon{display:block;color:var(--pc-gold)}
i.pc-follow__icon{font-size:40px;line-height:1}
img.pc-follow__icon{width:40px;height:40px}
.pc-follow__txt{font-size:14px;font-weight:400;line-height:1.5;color:var(--pc-bksub);text-align:center}

/* ============================================================================
   TB（768px〜）
   ========================================================================= */
@media (min-width:768px){
  .pc-intro__grid{grid-template-columns:1fr 400px;column-gap:32px}

  /* ギャラリー: カルーセルをやめて 2×2 グリッドへ */
  .pc-gallery{margin-top:48px}
  .pc-gallery .pc-wrap{padding-left:var(--pc-gutter);padding-right:var(--pc-gutter)}
  .pc-gallery__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding-inline:0;overflow:visible}
  .pc-gallery__item{flex:none;scroll-snap-align:none}
  /* ★2×2の隙間（4px）は既定では白。ブランド名を重ねる場合、ちょうど中央の横一文字が
     ラベルの真下に来て、そこだけ白文字が消える。隙間を暗くして帯を消す。
     （SPは1枚ずつのカルーセルで隙間が文字にかからないため、PCだけでよい） */
  .pc-gallery--branded .pc-gallery__grid{background:#1E1B18}

  .pc-recommend__grid{grid-template-columns:1fr 1fr}

  /* お知らせ: 区切り線をやめてカード2列へ */
  .pc-news__grid{grid-template-columns:1fr 1fr;gap:20px}
  .pc-news__item{padding:0}
  .pc-news__item + .pc-news__item{border-top:none}
  .pc-news__item a{gap:24px}
  .pc-news__media{flex:0 0 170px;aspect-ratio:1/1}

  .pc-consult__inner{grid-template-columns:362px 1fr;gap:40px}
  .pc-consult__h{text-align:left}
  .pc-consult__cta{margin-left:0}
}

/* ============================================================================
   PC（1024px〜） — Figma の 1440px 基準に一致させる
   ========================================================================= */
@media (min-width:1024px){
  /* Figma: 左475 / 間40 / 右465 = 980。ヒーロー下端522 → 見出し592（＝70px） */
  .pc-intro{padding-top:70px}
  .pc-intro__grid{grid-template-columns:1fr 465px;column-gap:40px;row-gap:0}
  .pc-intro__title{font-size:32px;line-height:normal}
  .pc-intro__lead{font-size:16px;line-height:32px;margin-top:20px}
  .pc-intro__cta{margin-top:43px}
  .pc-intro__data{gap:30px}
  /* margin-top:auto で右カラムの最下部へ。左カラム（予約ボタン下端993）と下端がそろう。
     Figmaでもアクセス欄の下端841＋152＝993 でぴったり接している */
  .pc-intro__map{margin-top:auto;min-height:0}

  /* 予約ボタン下端993 → ギャラリー1134 */
  .pc-gallery{margin-top:140px}
  .pc-gallery__label{font-size:72px}

  /* Figma: ベージュ帯 1860〜2997 / 見出し1930 / 1段目2040 / 2段目2493 */
  .pc-recommend{margin-top:70px;padding:70px 0 64px}
  .pc-recommend__h{font-size:40px}
  .pc-recommend__lead{margin-top:24px;max-width:720px;margin-inline:auto;font-size:16px;line-height:32px}
  .pc-recommend__grid{margin-top:50px;grid-template-columns:repeat(3,1fr);gap:50px 28px}

  .pc-consult{padding-top:70px}
  /* Figma: 画像362 / 間60 / 本文530（1行33字。左端230から。980幅の中では左寄せ）
     2026-10-18 Figmaの表示に合わせて498→530 */
  .pc-consult__inner{max-width:none;margin:0;grid-template-columns:362px 530px;column-gap:60px;justify-content:start}
  .pc-consult__h{font-size:36px;text-align:center}
  .pc-consult__txt{margin-top:30px}
  /* PCはFigmaどおり行末まで詰めて流す（文節単位の折り返しにしない）。SPは common の auto-phrase のまま */
  .pc-consult__txt{word-break:normal}
  .pc-br{display:inline}
  .pc-flow{word-break:normal}
  .pc-consult__cta{margin-top:52px}

  /* コーディネート相談の画像下端3395 → 見出し3535 */
  .pc-news{padding-top:140px}
  .pc-news__h{font-size:36px}
  /* 見出し下端3589 → 1件目3648（＝59px）。カードは 480 x 2列、間20px */
  .pc-news__grid{margin-top:58px;grid-template-columns:1fr 1fr;gap:20px}
  .pc-news__item a{gap:30px}
  .pc-news__media{flex:0 0 197px;aspect-ratio:1/1} /* 2026-10-18 正方形 197x197 に変更（旧 197x132） */
  .pc-news__date,
  .pc-news__title{font-size:16px;line-height:24px}

  /* カード下端3932 → FOLLOW US 4022 */
  .pc-follow{padding:90px 0 90px}
  .pc-follow__box{flex-direction:row;justify-content:center;gap:60px;padding:30px 38px}
  .pc-follow__en{font-size:32px}
  .pc-follow__right{align-items:center;width:335px;max-width:none}
  .pc-follow__txt{text-align:left}
}