/* =====================================================
   INTERESTING INNOVATION - BRANDS（店舗紹介 / 店舗一覧）
   style.css → sub.css の後に読み込む
   基準幅: PC 1920 / TB 768 / SP 393（1rem = 基準幅で 10px）
   ===================================================== */

/* 共通の見出し帯・パンくずは css/sub.css。ヘッダー・フッターはホームと同じ（style.css） */

/* 見出し帯の上に乗る寿司のイラスト（Figma: 45 1 556x493 @683,189） */
.page-head__img { position: absolute; left: 68.3rem; top: 18.9rem; width: 55.6rem; z-index: 2; }

/* ---------- イントロ（お疲れ様を言い合える場所） ---------- */
.bintro { position: relative; margin-top: 33.3rem; padding-left: 19.6rem; }
.bintro__h { font-size: 10.4rem; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.bintro__en { margin: 1.1rem 0 0 .4rem; font-size: 2.4rem; font-weight: 500; line-height: 1; }
/* 店舗へのアンカー（下線付きの 2 列） */
.bnav { position: absolute; right: 20.1rem; top: 11.8rem; display: flex; gap: 6.4rem; }
.bnav__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.bnav__col a { display: flex; align-items: center; gap: .8rem; padding-bottom: .1rem; font-size: 1.8rem; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: color .3s, background-size .4s cubic-bezier(.2,.8,.2,1);
  /* 下線: 黒の線（下層）の上を、hover でオレンジの線が左から右へ伸びる。離すと右へ縮んで消える */
  background: linear-gradient(var(--orange), var(--orange)) no-repeat right bottom / 0 1px, linear-gradient(var(--black), var(--black)) no-repeat left bottom / 100% 1px; }
.bnav__col a:hover { background-size: 100% 1px, 100% 1px; background-position: left bottom, left bottom; }
/* 先頭の下向き矢印（オレンジ。hover で少し下に動く） */
.bnav__col a::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 1rem .6rem 0 .6rem; border-color: var(--orange) transparent transparent transparent; transition: transform .3s; } /* 下向きの三角矢印（ヘッダーボタンの三角と同じ） */
.bnav__col a:hover::before { transform: translateY(.3rem); }
.bnav__col a:hover { color: var(--orange); }

/* ---------- 店舗ブロック（繰り返し） ----------
   写真 3 枚は x=514 から右へ並び、3 枚目は画面右端で切れる（Figma 通り）。
   ロゴとボタンは左の余白（x=200〜500）に置く。 */
.bstores { margin-top: 24.2rem; overflow: hidden; }
.bstore { position: relative; min-height: 65.8rem; margin-bottom: 24rem; padding-left: 51.4rem; }
.bstore:last-child { margin-bottom: 0; }
/* ロゴ: CMS で差し替えても揃うよう、Figma のロゴ枠に収めて中央配置（縦横比はそのまま） */
.bstore__logo { position: absolute; left: 20rem; top: 8rem; display: flex; align-items: center; justify-content: center; width: 24rem; height: 24rem; } /* ボタン列と同じ幅の 24rem 角の枠。ロゴはこの中に contain で中央配置 */
.bstore__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* 写真: 枚数に関係なく横スライド（スクロールスナップ + ドラッグ + 矢印） */
.bstore__photos { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.bstore__photos::-webkit-scrollbar { display: none; }
.bstore__photos.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.bstore__photos.is-drag .bstore__photo img { pointer-events: none; }
/* PC: ホームの店舗スライドと同じ DRAG カーソル（style.css の .drag-cursor） */
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) { .bstore__photos, .bstore__photos.is-drag { cursor: none; scroll-snap-type: none; } } /* PC はスナップ無しで慣性ドラッグ */
.bstore__photo { position: relative; width: 60rem; aspect-ratio: 3 / 2; flex: none; border-radius: .5rem; overflow: hidden; scroll-snap-align: start; }
.bstore__nav { position: absolute; left: 51.4rem; right: 20rem; top: 41.6rem; display: flex; justify-content: flex-end; align-items: center; gap: .8rem; }
/* インジケーターは写真エリアの中央、矢印は右端 */
.bstore__nav .slider-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.bstore__arrow { display: flex; align-items: center; justify-content: center; width: 6.4rem; height: 4rem; background: var(--orange); border-radius: 10rem; color: #fff; transition: background-color .3s, opacity .3s; }
.bstore__arrow:hover { background: var(--black); }
.bstore__arrow.is-disabled { opacity: .3; pointer-events: none; }
.bstore__arrow svg { width: 2.4rem; height: .6rem; fill: none; stroke: currentColor; stroke-width: 1; overflow: visible; }
.bstore__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ボタン（白 44px ×2 + オレンジ 80px） */
.bstore__btns { position: absolute; left: 19.9rem; top: 45rem; display: flex; flex-direction: column; gap: .8rem; width: 24rem; }
.bstore__btn { display: flex; align-items: center; justify-content: center; height: 4.4rem; background: #fff; border-radius: .5rem; font-size: 1.6rem; font-weight: 600; line-height: 1; transition: background-color .3s, color .3s; }
.bstore__btn:hover { background: var(--black); color: #fff; }
.bstore__btn--tabelog:hover { background: #ebe4d6; } /* ロゴの黒文字が消えないよう、hover でも黒地にしない */
.bstore__btn--tabelog img { width: auto; height: 2.2rem; }
.bstore__btn--reserve { height: 8rem; background: var(--orange); }
.bstore__btn--reserve:hover { background: var(--black); }
/* 店名・説明・インフォメーション */
.bstore__info { width: 120.4rem; margin-top: 4.8rem; }
.bstore__head { display: flex; flex-direction: column; gap: 1.6rem; }
.bstore__name { font-size: 3.2rem; font-weight: 600; line-height: 1; }
.bstore__en { font-size: 1.4rem; font-weight: 500; line-height: 1; color: var(--orange); } /* Figma: IIColor/main */
.bstore__body { display: flex; align-items: stretch; margin-top: 3.2rem; }
.bstore__desc { width: 62.7rem; flex: none; padding-right: 4.9rem; border-right: 1px solid var(--black); font-size: 1.6rem; font-weight: 400; line-height: 1.8; }
.bstore__data { flex: 1; padding: .8rem 0 0 4.8rem; }
.bstore__label { display: block; font-size: 2rem; font-weight: 500; line-height: 1; color: var(--orange); }
.bstore__rows { margin: 2.4rem 0 0; }
.bstore__row { display: flex; align-items: flex-start; }
.bstore__row + .bstore__row { margin-top: 1.6rem; }
.bstore__row dt { width: 9.6rem; flex: none; font-size: 1.6rem; font-weight: 400; line-height: 1.5; }
.bstore__row dd { flex: 1; margin: 0; font-size: 1.6rem; font-weight: 400; line-height: 1.5; }
.bstore__row a { transition: opacity .3s; }
.bstore__row a:hover { opacity: .6; }
/* ブロックが見えた時点でまとめて発火 → ロゴ・写真・ボタン・情報の順にふわっと */
.bstore.reveal { opacity: 1; transform: none; filter: none; }
.bstore.reveal > *, .bstore.reveal .bstore__photo { opacity: 0; transform: translateY(3rem); filter: blur(.4rem); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease; transition-delay: var(--d, 0s); }
.bstore.reveal > .bstore__photos { opacity: 1; transform: none; filter: none; }
.bstore.reveal.is-visible > *, .bstore.reveal.is-visible .bstore__photo { opacity: 1; transform: none; filter: none; }

/* ---------- 店舗詳細へのリンク列（縦線区切り） ---------- */
.blinks { margin-top: 21.3rem; }
.blinks__list { display: flex; justify-content: center; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.blinks__list li { padding: 0 1.6rem; border-left: 1px solid rgba(0,0,0,.5); }
.blinks__list li:last-child { border-right: 1px solid rgba(0,0,0,.5); }
.blinks__list a { display: flex; align-items: center; justify-content: center; width: 20rem; height: 100%; padding: 1.6rem 2.4rem; font-size: 1.8rem; font-weight: 600; line-height: 1.3; white-space: nowrap; border-radius: .5rem; transition: background-color .3s, color .3s; }
.blinks__list a:hover { background: var(--black); color: #fff; }

/* =====================================================
   TB / SP 共通（〜1199px）
   ===================================================== */
@media (max-width: 1199px) {
  .pc-br { display: none; } /* 説明文の改行は折り返しに任せる */
  .page-head__img { position: relative; left: auto; top: auto; width: 62%; margin: 0 auto 0; } /* SP: パンくず無し。見出しのすぐ下から */

  .bintro { margin-top: 4.8rem; padding: 0 var(--pad-x); }
  .bintro__h { font-size: 3.95rem; line-height: 1.2; white-space: normal; }
  .bintro__en { margin: 1.2rem 0 0; font-size: 1.3rem; }
  /* 列(ul)を解いて 6 店舗を 1 つのグリッドに並べ、列の頭をそろえる（SP 2 列 / TB 3 列） */
  .bnav { position: relative; right: auto; top: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.6rem; margin-top: 2.8rem; }
  .bnav__col { display: contents; }
  .bnav__col li { min-width: 0; }
  .bnav__col a { display: inline-flex; gap: .6rem; font-size: 1.5rem; }
  .bnav__col a::before { border-width: .8rem .5rem 0 .5rem; }

  .bstores { margin-top: 6.4rem; overflow: visible; }
  .bstore { min-height: 0; margin-bottom: 6.4rem; padding: 0 var(--pad-x); }
  .bstore__logo { position: relative; left: auto; top: auto; justify-content: flex-start; width: 16rem; height: 12rem; }
  .bstore__nav { position: relative; left: auto; right: auto; top: auto; justify-content: flex-end; margin-top: 1.2rem; }
  .bstore__arrow { width: 5.6rem; height: 3.6rem; }
  /* 写真は横スクロール（1 枚目が大きく見える） */
  .bstore__photos { width: auto; gap: 1.2rem; margin: 2rem calc(-1 * var(--pad-x)) 0; padding: 0 var(--pad-x); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bstore__photos::-webkit-scrollbar { display: none; }
  .bstore__photo { width: 80%; scroll-snap-align: start; }
  .bstore__btns { position: relative; left: auto; top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; width: 100%; margin-top: 2.4rem; }
  .bstore__btn { height: 4.4rem; font-size: 1.4rem; }
  .bstore__btn--tabelog, .bstore__btn--reserve { grid-column: 1 / -1; }
  .bstore__btn--reserve { height: 5.6rem; }
  .bstore__btn--tabelog img { height: 1.8rem; }
  .bstore__info { width: auto; margin-top: 2.4rem; }
  .bstore__head { gap: 1rem; }
  .bstore__name { font-size: 2.2rem; line-height: 1.2; }
  .bstore__en { font-size: 1.2rem; }
  .bstore__body { flex-direction: column; margin-top: 1.6rem; }
  .bstore__desc { width: auto; padding-right: 0; border-right: 0; font-size: 1.5rem; line-height: 1.9; }
  .bstore__data { margin-top: 2rem; padding: 2rem 0 0; border-top: 1px solid var(--black); }
  .bstore__label { font-size: 1.6rem; }
  .bstore__rows { margin-top: 1.4rem; }
  .bstore__row + .bstore__row { margin-top: 1rem; }
  .bstore__row dt { width: 7.2rem; font-size: 1.3rem; }
  .bstore__row dd { font-size: 1.3rem; }

  .blinks { margin-top: 6.4rem; padding: 0 var(--pad-x); }
  .blinks__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .blinks__list li, .blinks__list li:last-child { padding: 0; border: 1px solid rgba(0,0,0,.5); border-radius: .5rem; }
  .blinks__list a { width: 100%; padding: 1.2rem .8rem; font-size: 1.3rem; white-space: normal; text-align: center; }
}

/* =====================================================
   TB のみ（768〜1199px）
   ===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .page-head__img { width: 44%; margin-top: 1.6rem; } /* TB: パンくず無し */

  .bintro { margin-top: 8rem; }
  .bintro__h { font-size: 7.5rem; }
  .bintro__en { margin-top: 1.6rem; font-size: 2.1rem; }
  .bnav { grid-template-columns: repeat(3, 1fr); gap: 2rem 3.2rem; margin-top: 3.6rem; }
  .bnav__col a { font-size: 1.9rem; }

  .bstores { margin-top: 10rem; }
  .bstore { display: grid; grid-template-columns: 22rem 1fr; grid-template-areas: "logo photos" "btns info"; column-gap: 3.2rem; margin-bottom: 10rem; }
  .bstore__logo { grid-area: logo; width: 100%; height: 16rem; }
  .bstore__photos { grid-area: photos; margin: 0; padding: 0; gap: 1.6rem; }
  .bstore__photo { width: 46%; }
  .bstore__btns { grid-area: btns; display: flex; flex-direction: column; gap: .8rem; width: 100%; margin-top: 3.2rem; }
  .bstore__btn { height: 4.8rem; font-size: 1.5rem; }
  .bstore__btn--reserve { height: 6.4rem; }
  .bstore__info { grid-area: info; margin-top: 3.2rem; }
  .bstore__name { font-size: 2.8rem; }
  .bstore__en { font-size: 1.4rem; }
  .bstore__desc { font-size: 1.6rem; line-height: 1.9; }
  .bstore__label { font-size: 1.8rem; }
  .bstore__row dt { width: 9rem; font-size: 1.5rem; }
  .bstore__row dd { font-size: 1.5rem; }

  .blinks { margin-top: 10rem; }
  .blinks__list { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .blinks__list a { padding: 1.6rem 1rem; font-size: 1.6rem; }
}
/* SP: 食べログと予約を横並び / スライダーは左端をそろえて前の写真を見せない / 矢印は出さずインジケーターだけ */
@media (max-width: 767px) {
  .bstore__btn--tabelog, .bstore__btn--reserve { grid-column: auto; height: 4.4rem; } /* 上段（店舗詳細・マップ）と同じ高さ */
  .bstore__photos { margin-left: 0; padding-left: 0; }
  .bstore__arrow { display: none; }
  .bstore__nav { justify-content: center; height: 2rem; margin-top: 1.6rem; }
}
/* SP: インフォメーションは項目名の下に内容を置く（縦並び） */
@media (max-width: 767px) {
  .bstore__row { flex-direction: column; gap: .2rem; }
  .bstore__row dt { width: auto; font-weight: 600; }
  .bstore__row + .bstore__row { margin-top: 1.2rem; }
}
/* SP: ロゴは中央に、ひと回り大きく */
@media (max-width: 767px) {
  .bstore__logo { justify-content: center; width: 22rem; height: 16rem; margin: 0 auto; }
  /* ボタンは電話番号の下へ */
  .bstore { display: flex; flex-direction: column; }
  .bstore__logo { order: 1; }
  .bstore__photos { order: 2; }
  .bstore__nav { order: 3; }
  .bstore__info { order: 4; margin-top: 2.4rem; }
  .bstore__btns { order: 5; margin-top: 3.2rem; }
}
/* SP: ロゴ個別の見た目調整 */
@media (max-width: 767px) {
  .bstores { margin-top: 8.8rem; } /* アンカーリンクの下を少し空ける */
  #sayuri .bstore__logo img { max-width: 16rem; }
  #panda .bstore__logo img { transform: translateX(-1.2rem); }
}
/* TB: 1 列に。ロゴ（中央）→ 写真スライダー（右は画面端まで）→ 矢印・インジケーター → ボタン（横 1 列）→ 店舗情報 */
@media (min-width: 768px) and (max-width: 1199px) {
  .bstore { display: block; }
  .bstore__logo { width: 26rem; height: 18rem; margin: 0 auto; justify-content: center; }
  .bstore__photos { margin: 3.2rem calc(-1 * var(--pad-x)) 0 0; padding: 0 var(--pad-x) 0 0; }
  .bstore__photo { width: 42rem; }
  .bstore__nav { margin-top: 1.6rem; }
  .bstore__btns { display: flex; flex-direction: row; gap: 1.2rem; margin-top: 3.2rem; }
  .bstore__btn, .bstore__btn--reserve, .bstore__btn--tabelog { flex: 1; height: 5.2rem; }
  .bstore__info { margin-top: 4rem; }
}