/* トンマナ: ゴシック体・#fefefe (fefefe-0b7a7a-light-gothic) */
:root {
  --ts-color-bg: #fefefe;
  --ts-color-surface: #f1f1f1;
  --ts-color-inverse: #010101;
  --ts-color-on-inverse: #ffffff;
  --ts-color-text: #292929;
  --ts-color-muted: #6b6b6b;
  --ts-color-heading: #1c1c1c;
  --ts-color-accent: #0b7a7a;
  --ts-color-on-accent: #ffffff;
  --ts-color-accent-hover: #085555;
  --ts-color-brand: #0b7a7a;
  --ts-color-on-brand: #ffffff;
  --ts-color-brand-hover: #085555;
  --ts-color-border: #d1d1d1;
  --ts-color-overlay: rgba(23, 18, 18, 0.45);
  --ts-font-heading: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ts-font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ts-font-accent: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
  --ts-text-display: clamp(2.125rem, 6.4vw, 4rem);
  --ts-text-h1: clamp(1.75rem, 4.6vw, 2.875rem);
  --ts-text-h2: clamp(1.4375rem, 3.4vw, 2.125rem);
  --ts-text-h3: clamp(1.125rem, 2.2vw, 1.4375rem);
  --ts-text-lead: clamp(1rem, 1.9vw, 1.25rem);
  --ts-text-body: 1.0625rem;
  --ts-text-small: 0.9375rem;
  --ts-text-caption: 0.8125rem;
  --ts-space-section: clamp(3.5rem, 8vw, 6.5rem);
  --ts-space-section-lg: clamp(5rem, 11vw, 9rem);
  --ts-space-block: clamp(1.75rem, 3.6vw, 3rem);
  --ts-space-gap: clamp(1rem, 2.2vw, 1.75rem);
  --ts-space-gap-sm: 0.625rem;
  --ts-space-gutter: clamp(1.25rem, 5vw, 2.5rem);
  --ts-radius-none: 0;
  --ts-radius-sm: 6px;
  --ts-radius-md: 12px;
  --ts-radius-lg: 20px;
  --ts-radius-pill: 999px;
  --ts-layout-container: 72rem;
  --ts-layout-container-narrow: 44rem;
  --ts-layout-container-wide: 88rem;
  --ts-type-line-height-tight: 1.4;
  --ts-type-line-height-base: 1.85;
  --ts-type-line-height-loose: 2;
  --ts-type-letter-spacing-heading: 0.02em;
  --ts-type-letter-spacing-body: 0.02em;
  --ts-effect-shadow-sm: 0 1px 3px rgba(43, 35, 32, 0.07);
  --ts-effect-shadow-md: 0 10px 30px rgba(43, 35, 32, 0.12);
  --ts-effect-transition: 200ms cubic-bezier(0.33, 1, 0.68, 1);
  --ts-bg-image: none;
  --ts-bg-size: auto;
}

/* ---------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ts-color-bg);
  /* 背景の柄（ADR-073）。単色のときは none。セクションは地を塗らず（transparent）、柄を透かす */
  background-image: var(--ts-bg-image);
  background-size: var(--ts-bg-size);
  color: var(--ts-color-text);
  font-family: var(--ts-font-body);
  font-size: var(--ts-text-body);
  line-height: var(--ts-type-line-height-base);
  letter-spacing: var(--ts-type-letter-spacing-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* 文字を選んだときの色もお店の色に（ADR-092） */
::selection { background: var(--ts-color-brand); color: var(--ts-color-on-brand); }
button { font: inherit; color: inherit; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }

/* ---------------------------------------------- layout primitives */
.ts-container { width: 100%; max-width: var(--ts-layout-container); margin-inline: auto; padding-inline: var(--ts-space-gutter); }
.ts-container--narrow { max-width: var(--ts-layout-container-narrow); }
.ts-container--wide { max-width: var(--ts-layout-container-wide); }

/* セクションの上下余白はここでのみ与える。パターン側は上下 margin を持たない（12-2） */
.ts-section { padding-block: var(--ts-space-section); }
.ts-section--lg { padding-block: var(--ts-space-section-lg); }
.ts-section--flush { padding-block: 0; }
/* ナビのページ内リンクで飛んだとき、見出しがヘッダーに隠れないようにする */
section[id] { scroll-margin-top: 4.5rem; }
.ts-section--surface { background: var(--ts-color-surface); }
.ts-section--inverse { background: var(--ts-color-inverse); color: var(--ts-color-on-inverse); }
/* 英語の小見出し（.ts-eyebrow）は反転面でもアクセント色のまま。顧客が選んだ色が出る場所（ADR-073 追記） */
.ts-section--inverse .ts-heading { color: var(--ts-color-on-inverse); }

.ts-stack { display: flex; flex-direction: column; gap: var(--ts-space-gap); }
.ts-stack--sm { gap: var(--ts-space-gap-sm); }
.ts-stack--lg { gap: var(--ts-space-block); }

/* ---------------------------------------------- typography */
.ts-eyebrow {
  font-family: var(--ts-font-accent);
  font-size: var(--ts-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* 顧客が「② ボタンと英語見出しの色」で選んだ色が出る場所（ADR-073 追記） */
  color: var(--ts-color-accent);
}
.ts-display, .ts-heading, .ts-heading--sub {
  font-family: var(--ts-font-heading);
  color: var(--ts-color-heading);
  line-height: var(--ts-type-line-height-tight);
  letter-spacing: var(--ts-type-letter-spacing-heading);
  font-weight: 500;
}
.ts-display { font-size: var(--ts-text-display); }
.ts-heading { font-size: var(--ts-text-h2); }
.ts-heading--page { font-size: var(--ts-text-h1); }
.ts-heading--sub { font-size: var(--ts-text-h3); }
.ts-lead { font-size: var(--ts-text-lead); line-height: var(--ts-type-line-height-base); }
.ts-body { font-size: var(--ts-text-body); }
.ts-body p + p { margin-top: 1em; }
.ts-small { font-size: var(--ts-text-small); }
.ts-muted { color: var(--ts-color-muted); }
.ts-caption { font-size: var(--ts-text-caption); color: var(--ts-color-muted); }
.ts-center { text-align: center; }

/* セクション見出しのまとまり */
.ts-section-head { display: flex; flex-direction: column; gap: var(--ts-space-gap-sm); margin-bottom: var(--ts-space-block); }
.ts-section-head--center { align-items: center; text-align: center; }
/* 見出しの下に短いアクセント色の線。**パターンが選んで付ける**（一律には出さない / ADR-092） */
.ts-section-head--accent::after { content: ""; display: block; width: 2.5rem; height: 2px; margin-top: 0.35rem; background: var(--ts-color-brand); }

/* ---------------------------------------------- media */
/* 画像は指定アスペクト比前提（12-2）。比率はスロット側が data 属性で渡す */
.ts-media { position: relative; overflow: hidden; background: var(--ts-color-surface); border-radius: var(--ts-radius-md); }
.ts-media > img { width: 100%; height: 100%; object-fit: cover; }
.ts-media[data-aspect="21:9"] { aspect-ratio: 21 / 9; }
.ts-media[data-aspect="16:9"] { aspect-ratio: 16 / 9; }
.ts-media[data-aspect="3:2"] { aspect-ratio: 3 / 2; }
.ts-media[data-aspect="4:3"] { aspect-ratio: 4 / 3; }
.ts-media[data-aspect="1:1"] { aspect-ratio: 1 / 1; }
.ts-media[data-aspect="3:4"] { aspect-ratio: 3 / 4; }
.ts-media--square { border-radius: var(--ts-radius-none); }

/*
 * サンプル写真の断り書き（ADR-093）。写真の右下に小さく重ねる。
 * 画像そのものには ::after を付けられないので、img の兄弟として置いている。
 * 置き場所は一番近い位置指定済みの親（たいていは .ts-media。FV のように無い場合はその節の右下）。
 * 写真の明暗にかかわらず読めるよう、暗い膜の上に白で出す
 */
.ts-sample-note {
  position: absolute; right: 0.5em; bottom: 0.45em; z-index: 1;
  /* 小さな写真でもはみ出さない。入り切らなければ折り返す */
  max-width: calc(100% - 1em);
  padding: 0.2em 0.6em;
  border-radius: var(--ts-radius-sm);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.625rem; line-height: 1.5; letter-spacing: 0.02em; font-weight: 400;
  pointer-events: none;
}

/* ---------------------------------------------- buttons */
.ts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.75em 1.75em;
  /* ボタンは色面なので brand（選んだ色そのまま）。文字は onBrand で読めるほうを選ぶ（ADR-092） */
  background: var(--ts-color-brand); color: var(--ts-color-on-brand);
  border: 1px solid var(--ts-color-brand); border-radius: var(--ts-radius-sm);
  font-size: var(--ts-text-small); font-weight: 500; letter-spacing: 0.06em;
  transition: background var(--ts-effect-transition), color var(--ts-effect-transition), border-color var(--ts-effect-transition);
  cursor: pointer;
}
.ts-btn:hover { background: var(--ts-color-brand-hover); border-color: var(--ts-color-brand-hover); }
/* 枠だけのボタン: 文字は読める accent、枠は brand */
.ts-btn--outline { background: transparent; color: var(--ts-color-accent); }
.ts-btn--outline:hover { background: var(--ts-color-brand); color: var(--ts-color-on-brand); }
.ts-btn--ghost { background: transparent; color: var(--ts-color-text); border-color: var(--ts-color-border); }
.ts-btn--ghost:hover { background: var(--ts-color-surface); border-color: var(--ts-color-border); }
.ts-btn--lg { min-height: 3.5rem; padding: 0.85em 2.5em; font-size: var(--ts-text-body); }
.ts-btn--block { width: 100%; }
.ts-btn__icon { width: 1.1em; height: 1.1em; flex: none; }

/* SNS のアイコンリンク（フッター・店舗ページで共通 / ADR-113）。色は置いた場所の文字色に合わせる */
.ts-sns { display: flex; flex-wrap: wrap; gap: var(--ts-space-gap-sm); }
/* スマホで指が届く大きさ（44px 目安）を確保する */
.ts-sns__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--ts-radius-pill);
  transition: border-color var(--ts-effect-transition), opacity var(--ts-effect-transition);
}
.ts-sns__link:hover { border-color: currentColor; }
.ts-sns__icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* テキストリンク（本文中） */
.ts-link { color: var(--ts-color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.ts-link:hover { color: var(--ts-color-accent-hover); }

/* ---------------------------------------------- definition table (会社概要・店舗情報) */
.ts-dl { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; border-top: 1px solid var(--ts-color-border); }
.ts-dl > dt, .ts-dl > dd {
  padding: 1.1em 0.5em 1.1em 0;
  border-bottom: 1px solid var(--ts-color-border);
  font-size: var(--ts-text-small);
}
.ts-dl > dt { color: var(--ts-color-muted); font-weight: 500; }
/* ラベルをお店の色にした表。**パターンが選んで付ける**（ADR-092）。AA は導出時に地と面に対して保証されている */
.ts-dl--accent { border-top: 2px solid var(--ts-color-brand); }
.ts-dl--accent > dt { color: var(--ts-color-accent); }
@media (max-width: 640px) {
  .ts-dl { grid-template-columns: 1fr; }
  .ts-dl > dt { padding-bottom: 0.2em; border-bottom: none; }
  .ts-dl > dd { padding-top: 0.2em; }
}

/* ---------------------------------------------- header / nav */
.ts-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ts-color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ts-color-border);
}
.ts-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-gap); min-height: 4.25rem; }
.ts-header__brand { font-family: var(--ts-font-heading); font-size: var(--ts-text-h3); letter-spacing: var(--ts-type-letter-spacing-heading); color: var(--ts-color-heading); }
.ts-header__brand img { max-height: 2.25rem; width: auto; }
.ts-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.ts-nav a { font-size: var(--ts-text-small); letter-spacing: 0.04em; transition: color var(--ts-effect-transition); }
.ts-nav a:hover, .ts-nav a[aria-current="page"] { color: var(--ts-color-accent); }
/* 現在地には下線も。色だけだと色弱の人に伝わらない（ADR-092） */
.ts-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ts-color-brand); }
.ts-header__toggle { display: none; }

@media (max-width: 860px) {
  .ts-header__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--ts-color-border);
    border-radius: var(--ts-radius-sm); cursor: pointer;
  }
  .ts-nav {
    position: fixed; inset: 4.25rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ts-color-bg); border-bottom: 1px solid var(--ts-color-border);
    padding: 0 var(--ts-space-gutter) 1.5rem;
    max-height: calc(100dvh - 4.25rem); overflow-y: auto;
    display: none;
  }
  .ts-nav[data-open="true"] { display: flex; }
  .ts-nav a { padding: 1.1em 0; border-bottom: 1px solid var(--ts-color-border); font-size: var(--ts-text-body); }
}

/* ---------------------------------------------- breadcrumb */
.ts-breadcrumb { padding-block: 1rem; font-size: var(--ts-text-caption); color: var(--ts-color-muted); }
.ts-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5em; }
.ts-breadcrumb li + li::before { content: "›"; margin-right: 0.5em; color: var(--ts-color-border); }

/* ---------------------------------------------- footer */
/* フッターの上端にアクセント色の帯。反転面でも面の色なので読みやすさに影響しない（ADR-092） */
.ts-footer { background: var(--ts-color-inverse); color: var(--ts-color-on-inverse); border-top: 4px solid var(--ts-color-brand); }
/* 大きな文字は本文の帯の中だけに敷く（下のコピーライト行に被らせない） */
.ts-footer__main { position: relative; overflow: hidden; }
.ts-footer a { color: var(--ts-color-on-inverse); opacity: 0.85; }
.ts-footer a:hover { opacity: 1; }
/* 背後に敷く大きな文字。読ませるものではないので aria-hidden で読み上げから外してある */
.ts-footer__display {
  position: absolute;
  left: 50%;
  bottom: -0.28em;
  transform: translateX(-50%);
  font-family: var(--ts-font-accent);
  /* 社名の長さは店ごとに違うので、長い名前でも画面に収まる大きさにとどめる */
  font-size: clamp(2rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  letter-spacing: 0.02em;
  opacity: 0.07;
  pointer-events: none;
}
.ts-footer__inner { position: relative; z-index: 1; padding-block: var(--ts-space-section); }
.ts-footer__head {
  padding-bottom: var(--ts-space-block);
  border-bottom: 1px solid color-mix(in srgb, var(--ts-color-on-inverse) 20%, transparent);
}
.ts-footer__brand { font-family: var(--ts-font-heading); font-size: var(--ts-text-h3); }
.ts-footer__brand img { max-height: 2.5rem; width: auto; }
.ts-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--ts-space-block);
  padding-top: var(--ts-space-block);
}
.ts-footer__coltitle {
  font-family: var(--ts-font-accent);
  font-size: var(--ts-text-caption);
  letter-spacing: 0.18em;
  opacity: 0.6;
  margin-bottom: 0.5em;
}
.ts-footer__nav { font-size: var(--ts-text-small); }
/* スマホで指が届く高さ（44px 目安）を確保する */
.ts-footer__nav a { display: inline-block; padding-block: 0.5em; }
.ts-footer .ts-sns { padding-top: 0.25em; }
.ts-footer__tel {
  display: block;
  font-family: var(--ts-font-accent);
  font-size: var(--ts-text-h3);
  letter-spacing: 0.04em;
  opacity: 1;
}
.ts-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--ts-space-gap-sm);
  padding: 0.7em 1.4em;
  border: 1px solid color-mix(in srgb, var(--ts-color-on-inverse) 45%, transparent);
  border-radius: var(--ts-radius-pill);
  font-size: var(--ts-text-small);
  opacity: 1;
}
.ts-footer__btn:hover { background: var(--ts-color-on-inverse); color: var(--ts-color-inverse); }
.ts-footer__arrow { transition: transform var(--ts-effect-transition); }
.ts-footer__btn:hover .ts-footer__arrow { transform: translateX(3px); }
.ts-footer__bar {
  position: relative;
  z-index: 1;
  border-top: 1px solid color-mix(in srgb, var(--ts-color-on-inverse) 20%, transparent);
  padding-block: var(--ts-space-gap);
}
.ts-footer__copy { font-size: var(--ts-text-caption); opacity: 0.7; }

/* ---------------------------------------------- lightbox (メニュー画像 5-4) */
.ts-lightbox {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0, 0, 0, 0.88);
}
.ts-lightbox[data-open="true"] { display: flex; }
.ts-lightbox img { max-width: min(100%, 1200px); max-height: 88dvh; width: auto; object-fit: contain; }
.ts-lightbox__close {
  position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem;
  background: rgba(255, 255, 255, 0.14); color: #fff; border: none; border-radius: 999px; cursor: pointer;
  font-size: 1.25rem; line-height: 1;
}
.ts-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; background: rgba(255, 255, 255, 0.14); color: #fff;
  border: none; border-radius: 999px; cursor: pointer; font-size: 1.5rem; line-height: 1;
}
.ts-lightbox__nav[data-dir="prev"] { left: 1rem; }
.ts-lightbox__nav[data-dir="next"] { right: 1rem; }

/* ---------------------------------------------- form (お問い合わせ 11-4) */
.ts-field { display: flex; flex-direction: column; gap: 0.4rem; }
.ts-field__label { font-size: var(--ts-text-small); font-weight: 500; }
.ts-field__req { color: var(--ts-color-accent); font-size: var(--ts-text-caption); margin-left: 0.4em; }
.ts-input, .ts-textarea {
  width: 100%; padding: 0.85em 1em; font: inherit; font-size: var(--ts-text-small);
  color: var(--ts-color-text); background: var(--ts-color-bg);
  border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-sm);
}
.ts-input:focus-visible, .ts-textarea:focus-visible { outline: 2px solid var(--ts-color-accent); outline-offset: 1px; }
.ts-textarea { min-height: 11rem; resize: vertical; }

:where(a, button, input, textarea, summary):focus-visible { outline: 2px solid var(--ts-color-accent); outline-offset: 2px; }

/* ---------------------------------------------- utilities */
.ts-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ts-divider { height: 1px; background: var(--ts-color-border); border: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* 見せ方が見出しを持たない下層ページの見出し（店舗詳細）。パターンの見出しと同じ形で、上だけ空ける（ADR-108） */
.l-pagehead { padding-top: var(--ts-space-section); }
.l-pagehead .ts-section-head { margin-bottom: 0; }
.l-pagehead .ts-lead { max-width: 40em; }

/* 店舗詳細: その店の SNS とグルメサイト（店舗情報の下・ADR-113）。上の店舗情報が下の余白を持つので、下だけ空ける */
.l-store-links { padding-bottom: var(--ts-space-section); }
.l-store-links__inner {
  display: flex; flex-wrap: wrap; gap: var(--ts-space-block);
  padding-top: var(--ts-space-block); border-top: 1px solid var(--ts-color-border);
}
.l-store-links__title {
  font-family: var(--ts-font-accent); font-size: var(--ts-text-caption);
  letter-spacing: 0.18em; color: var(--ts-color-muted); margin-bottom: var(--ts-space-gap-sm);
}
.l-store-links__group .ts-sns { color: var(--ts-color-heading); }
.l-store-links__gourmet { display: flex; flex-wrap: wrap; gap: var(--ts-space-gap-sm); }

/* 店舗詳細: お店の紹介（紹介文・見出しの下 / ADR-116） */
.l-store-intro { padding-top: var(--ts-space-block); }
.l-store-intro__body { line-height: var(--ts-type-line-height-loose); }
.l-store-intro__body p + p { margin-top: 1em; }

/* 店舗詳細: お店のこだわりと、こんなときに（ADR-116） */
.l-store-points__list { display: grid; gap: var(--ts-space-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.l-store-points__item { padding: var(--ts-space-gap); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md); background: var(--ts-color-bg); }
.l-store-points__num { font-family: var(--ts-font-accent); font-size: var(--ts-text-caption); letter-spacing: 0.18em; color: var(--ts-color-brand); }
.l-store-points__title {
  margin-top: var(--ts-space-gap-sm); font-family: var(--ts-font-heading); font-size: var(--ts-text-h3);
  line-height: var(--ts-type-line-height-tight); color: var(--ts-color-heading);
}
.l-store-points__body { margin-top: var(--ts-space-gap-sm); font-size: var(--ts-text-small); line-height: var(--ts-type-line-height-loose); }
.l-store-scenes { margin-top: var(--ts-space-block); text-align: center; }
.l-store-scenes__title {
  font-family: var(--ts-font-accent); font-size: var(--ts-text-caption);
  letter-spacing: 0.18em; color: var(--ts-color-muted); margin-bottom: var(--ts-space-gap-sm);
}
.l-store-scenes__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ts-space-gap-sm); }
.l-store-scenes__list li {
  padding: 0.35em 1em; border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-pill);
  font-size: var(--ts-text-small); color: var(--ts-color-heading);
}

/* 店舗詳細: おすすめメニュー（文字の品目 / ADR-116） */
.l-store-menu__list { border-top: 1px solid var(--ts-color-border); }
.l-store-menu__item { padding-block: var(--ts-space-gap); border-bottom: 1px solid var(--ts-color-border); }
.l-store-menu__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ts-space-gap); }
.l-store-menu__name { font-family: var(--ts-font-heading); font-size: var(--ts-text-body); color: var(--ts-color-heading); }
.l-store-menu__price { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ts-color-heading); }
.l-store-menu__desc { margin-top: 0.3em; font-size: var(--ts-text-small); color: var(--ts-color-muted); }
.l-store-menu__note { margin-top: var(--ts-space-gap-sm); font-size: var(--ts-text-caption); color: var(--ts-color-muted); text-align: right; }

/* 店舗詳細: Instagram の最新投稿（ADR-125）。読めるまでは空の枠、読めなければ枠を畳む */
.l-store-ig__grid { display: grid; gap: var(--ts-space-gap-sm); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-store-ig__grid[data-ig-state="empty"] { display: none; }
.l-store-ig__tile { aspect-ratio: 1 / 1; border-radius: var(--ts-radius-md); background: var(--ts-color-surface); overflow: hidden; }
.l-store-ig__tile a { display: block; height: 100%; }
.l-store-ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--ts-effect-transition); }
.l-store-ig__tile a:hover img { opacity: 0.85; }
.l-store-ig__follow { margin-top: var(--ts-space-block); display: flex; justify-content: center; }
.l-store-ig:has(.l-store-ig__grid[data-ig-state="empty"]):not(:has(.l-store-ig__follow)) { display: none; }
/* 店舗詳細: ほかの店舗（2店舗以上 / ADR-116） */
.l-store-others__list { display: grid; gap: var(--ts-space-gap-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.l-store-others__link {
  display: flex; flex-direction: column; gap: 0.2em; height: 100%;
  padding: var(--ts-space-gap); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md);
  transition: border-color var(--ts-effect-transition);
}
.l-store-others__link:hover { border-color: var(--ts-color-brand); }
.l-store-others__name { font-family: var(--ts-font-heading); color: var(--ts-color-heading); }
.l-store-others__lead, .l-store-others__address { font-size: var(--ts-text-small); color: var(--ts-color-muted); }
.l-store-others__all { margin-top: var(--ts-space-block); display: flex; justify-content: center; }

/* 会社概要: 運営会社のロゴ（あるときだけ・表の上） */
.l-company-logo { padding-top: var(--ts-space-block); }
.l-company-logo img { display: block; max-width: 240px; max-height: 96px; width: auto; height: auto; object-fit: contain; }

/* 採用情報: 公開求人が無いときの案内（ADR-038） */
.l-recruit-empty { padding-block: var(--ts-space-block); text-align: center; }
.l-recruit-empty .ts-lead { color: var(--ts-color-heading); }
.l-recruit-empty p + p { margin-top: 0.6em; }

/* 本文（プライバシーポリシー・お知らせ詳細） */
.l-prose { max-width: var(--ts-layout-container-narrow); margin-inline: auto; line-height: var(--ts-type-line-height-loose); }
.l-prose h2 { font-family: var(--ts-font-heading); font-size: var(--ts-text-h3); color: var(--ts-color-heading); margin-top: 2em; margin-bottom: 0.6em; }
.l-prose p + p { margin-top: 1em; }
.l-prose ul { list-style: disc; padding-left: 1.4em; }
.l-prose li { margin-block: 0.3em; }

/* お知らせ詳細 */
.l-article__meta { display: flex; align-items: center; gap: var(--ts-space-gap-sm); margin-bottom: var(--ts-space-gap-sm); }
.l-article__media { margin-block: var(--ts-space-gap); }
.l-article__foot { margin-top: var(--ts-space-block); display: flex; justify-content: center; }

/* ページネーション */
.l-pager { display: flex; justify-content: center; gap: var(--ts-space-gap-sm); margin-top: var(--ts-space-block); }
.l-pager__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding-inline: 0.5em;
  border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-sm);
  font-size: var(--ts-text-small);
}
.l-pager__item[aria-current="page"] { background: var(--ts-color-brand); color: var(--ts-color-on-brand); border-color: var(--ts-color-brand); }

/* 送信完了・404 */
.l-notice { display: flex; flex-direction: column; align-items: center; gap: var(--ts-space-gap); text-align: center; padding-block: var(--ts-space-section-lg); }

/* pattern: company-table */
.p-ct__history { margin-top: var(--ts-space-block); display: flex; flex-direction: column; gap: var(--ts-space-gap-sm); }

/* pattern: concept-hashtag */
/* コンセプトを、キャッチフレーズ1本とハッシュタグの列で見せる。
   本文（content.body）は1行1つのハッシュタグとして読む（「、」「,」「#」区切りでも可）。3〜10個が目安。 */
.p-cht {
  background:transparent; /* 地は body が塗る。柄の背景（ADR-073）を透かすため塗らない */
  color:var(--ts-color-text);
  text-align:center;
}
.p-cht__inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ts-space-gap);
}
.p-cht__phrase {
  font-family:var(--ts-font-heading);
  font-size:var(--ts-text-h1);
  font-weight:700;
  line-height:var(--ts-type-line-height-tight);
  letter-spacing:var(--ts-type-letter-spacing-heading);
  color:var(--ts-color-heading);
  max-width:22em;
  text-wrap:balance;
}
.p-cht__lead {
  font-size:var(--ts-text-lead);
  line-height:var(--ts-type-line-height-base);
  color:var(--ts-color-muted);
  max-width:34em;
}
.p-cht__tags {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--ts-space-gap-sm);
  max-width:var(--ts-layout-container-narrow);
  margin-top:var(--ts-space-gap);
  padding:0;
  list-style:none;
}
.p-cht__tag {
  display:inline-flex;
  align-items:center;
  gap:0.35em;
  min-width:7em;
  justify-content:center;
  padding:0.55em 1.4em;
  border:1px solid var(--ts-color-heading);
  border-radius: var(--ts-radius-pill);
  font-size:var(--ts-text-body);
  font-weight:700;
  letter-spacing:var(--ts-type-letter-spacing-body);
  color:var(--ts-color-heading);
  background:transparent;
  transition:background var(--ts-effect-transition), color var(--ts-effect-transition);
}
.p-cht__tag:hover {
  background:var(--ts-color-heading);
  color:var(--ts-color-bg);
}
.p-cht__hash { color:var(--ts-color-accent); }
.p-cht__tag:hover .p-cht__hash { color:inherit; }

@media (max-width: 640px) {
  .p-cht__phrase { font-size:var(--ts-text-h2); }
  .p-cht__tags { gap:var(--ts-space-gap-sm); }
  .p-cht__tag { min-width:0; padding:0.5em 1em; font-size:var(--ts-text-small); }
}

/* pattern: contact-form */
.p-cf__form { max-width: 34rem; margin-inline: auto; margin-top: var(--ts-space-block); }

/* 送れなかったときの知らせ。#contact-failed に戻されたときだけ出す（ADR-107） */
.p-cf__failed { display: none; scroll-margin-top: 7rem; padding: var(--ts-space-gap-sm) var(--ts-space-gap); border: 1px solid var(--ts-color-brand); border-radius: var(--ts-radius-md); font-size: var(--ts-text-small); }
.p-cf__failed:target { display: block; }
/* ボット判定の罠の欄。人には見せない（display:none だと一部のボットも埋めないので画面外に置く） */
.p-cf__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* pattern: fv-crossfade */
.p-fvc {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(92dvh, 50rem);
  overflow:hidden;
  background:var(--ts-color-inverse);
}

/* 写真は重ねて置き、ゆっくり入れ替える（枚数で動き方を変える） */
.p-fvc__media { position:absolute; inset:0; }
.p-fvc__item { position:absolute; inset:0; opacity:0; }
/* 写真が1枚だけのときは動かさず、出しっぱなしにする */
.p-fvc__item:first-child { opacity:1; }
.p-fvc__item img { width:100%; height:100%; object-fit:cover; }
/* 写真は切り抜き枠（ts-media）ごと画面いっぱいに広げる。丸みと比率はここでは効かせない */
.p-fvc__item .ts-media {
  position:absolute;
  inset:0;
  aspect-ratio:auto;
  border-radius:var(--ts-radius-none);
  background:none;
}

/*
 * 待ち時間を「フェードの長さ（0.72秒）」だけ前倒しにする。
 * こうすると 1 枚目は開いた瞬間から出ていて（暗転しない）、2枚目以降の重なりもそのまま揃う。
 *
 * 動きを減らす設定のときは、そもそもこの指定を当てない（下の reduce 側で消そうとすると
 * 枚数の指定のほうが強くて残ってしまい、止めたはずの入れ替えが動き続ける）
 */
@media (prefers-reduced-motion: no-preference) {
  /* 2枚のとき: 12秒で入れ替える */
  .p-fvc__item:first-child:nth-last-child(2),
  .p-fvc__item:first-child:nth-last-child(2) ~ .p-fvc__item { animation:p-fvc-fade2 12s infinite; }
  .p-fvc__item:first-child:nth-last-child(2) { animation-delay:-0.72s; }
  .p-fvc__item:first-child:nth-last-child(2) ~ .p-fvc__item { animation-delay:5.28s; }

  /* 3枚のとき: 18秒で3コマ */
  .p-fvc__item:first-child:nth-last-child(3),
  .p-fvc__item:first-child:nth-last-child(3) ~ .p-fvc__item { animation:p-fvc-fade3 18s infinite; }
  .p-fvc__item:first-child:nth-last-child(3) { animation-delay:-0.72s; }
  .p-fvc__item:first-child:nth-last-child(3) ~ .p-fvc__item:nth-child(2) { animation-delay:5.28s; }
  .p-fvc__item:first-child:nth-last-child(3) ~ .p-fvc__item:nth-child(3) { animation-delay:11.28s; }
}

.p-fvc__media::after {
  content:"";
  position:absolute;
  inset:0;
  background:var(--ts-color-overlay);
}

.p-fvc__inner {
  position:relative;
  display:flex;
  justify-content:center;
  padding-block:var(--ts-space-section);
  text-align:center;
}

/* 中央はロゴだけ。ロゴが無いときは店名の文字が出る（見出しは必ず1つ置く） */
.p-fvc__title { margin:0; display:flex; justify-content:center; }
/* 幅を決めておく（SVG のロゴは幅・高さを持たず比率だけのことが多く、width:auto だと 0×0 に潰れて出なかった / 2026-10-09）。
   縦長のロゴは max-height で止まり、object-fit で比率を保つ */
.p-fvc__logo {
  display:block;
  width:min(72vw, 24rem);
  max-height:min(46dvh, 22rem);
  height:auto;
  object-fit:contain;
}
.p-fvc__name {
  font-family:var(--ts-font-heading);
  font-size:var(--ts-text-display);
  line-height:var(--ts-type-line-height-tight);
  letter-spacing:var(--ts-type-letter-spacing-heading);
  color:var(--ts-color-on-inverse);
  text-shadow:0 1px 24px var(--ts-color-overlay);
}
/* ロゴが出ているときは店名の文字を重ねない */
.p-fvc__title:has(.p-fvc__logo) .p-fvc__name { display:none; }

/*
 * 下端を地の色に溶かす。次のセクションとの境目を作らず、下へ続くことが分かるようにする。
 * 色はトンマナの地の色（--ts-color-bg）なので、暗い地を選んだ人でもそのまま馴染む
 */
.p-fvc::after {
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:min(24%, 14rem);
  /* 直線だと境目が帯に見えるので、途中に止め位置を置いて落ち方をなだらかにする */
  background:linear-gradient(
    to top,
    var(--ts-color-bg) 0%,
    color-mix(in srgb, var(--ts-color-bg) 88%, transparent) 22%,
    color-mix(in srgb, var(--ts-color-bg) 55%, transparent) 52%,
    color-mix(in srgb, var(--ts-color-bg) 20%, transparent) 78%,
    transparent 100%
  );
  pointer-events:none;
}

/* 下へ続くことを知らせる印。グラデーションの上に置く（地の色に溶けて読めなくなるのを避ける） */
.p-fvc__scroll {
  position:absolute;
  z-index:1;
  bottom:min(26%, 15rem);
  left:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
  transform:translateX(-50%);
  color:var(--ts-color-on-inverse);
}
.p-fvc__scrolltext {
  font-family:var(--ts-font-accent);
  font-size:var(--ts-text-caption);
  letter-spacing:0.3em;
  text-indent:0.3em;
  opacity:0.75;
}
.p-fvc__scrollline {
  position:relative;
  display:block;
  width:1px;
  height:3.5rem;
  overflow:hidden;
  background:color-mix(in srgb, var(--ts-color-on-inverse) 30%, transparent);
}
/* 線の中を光が下りていく */
.p-fvc__scrollline::after {
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:45%;
  background:var(--ts-color-on-inverse);
  animation:p-fvc-scroll 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/*
 * 入れ替えは重ね合わせのフェード。
 * 「消える側の消え終わり」と「出る側の出はじめ」を同じ時刻に合わせる（= 出る側の待ち時間）。
 * 0% を不透明度 0 から始めるのが肝で、1 から始めると待ち時間が明けた瞬間にパッと出てしまう
 */
@keyframes p-fvc-fade2 {
  0% { opacity:0; }
  6% { opacity:1; }
  50% { opacity:1; }
  56% { opacity:0; }
  100% { opacity:0; }
}
@keyframes p-fvc-fade3 {
  0% { opacity:0; }
  4% { opacity:1; }
  33% { opacity:1; }
  37% { opacity:0; }
  100% { opacity:0; }
}
@keyframes p-fvc-scroll {
  0% { transform:translateY(-100%); }
  100% { transform:translateY(240%); }
}

/* 動きを減らす設定の人には、最初の1枚を出したままにする */
@media (prefers-reduced-motion: reduce) {
  .p-fvc__item { animation:none; opacity:0; }
  .p-fvc__item:first-child { opacity:1; }
  .p-fvc__scrollline::after { animation:none; top:0; height:100%; }
}

@media (max-width: 640px) {
  .p-fvc { min-height:min(80dvh, 36rem); }
  .p-fvc__logo { width:78vw; max-height:min(34dvh, 15rem); }
  .p-fvc__scrollline { height:2.5rem; }
  .p-fvc::after { height:min(20%, 8rem); }
  .p-fvc__scroll { bottom:min(22%, 9rem); }
}

/* pattern: news-list */
.p-nl__list { border-top: 1px solid var(--ts-color-border); }
.p-nl__item { border-bottom: 1px solid var(--ts-color-border); }
/* 日付はお店の色（JOUJOU の再現 / ADR-092）。文字なので読める accent を使う */
.p-nl__item .ts-caption { color: var(--ts-color-accent); }
.p-nl__item > a {
  display: grid;
  grid-template-columns: 6rem auto 1fr;
  align-items: baseline;
  gap: var(--ts-space-gap-sm);
  padding-block: 1.15em;
  transition: color var(--ts-effect-transition);
}
.p-nl__item > a:hover { color: var(--ts-color-accent); }
.p-nl__cat {
  font-size: var(--ts-text-caption);
  padding: 0.25em 0.75em;
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-pill);
  color: var(--ts-color-muted);
  white-space: nowrap;
}
.p-nl__title { font-size: var(--ts-text-small); }
.p-nl__more { margin-top: var(--ts-space-gap); text-align: center; }

@media (max-width: 640px) {
  .p-nl__item > a { grid-template-columns: auto 1fr; row-gap: 0.3em; }
  .p-nl__title { grid-column: 1 / -1; }
}

/* pattern: recruit-invite */
/* 横に流れる写真の上に呼びかけを重ね、ボタンで採用サイトに送る見せ方（ADR-101）。
   写真を入れていなくても、反転色の帯として成立する。 */
.p-recri {
  position:relative;
  overflow:hidden;
  background:var(--ts-color-inverse);
  color:var(--ts-color-on-inverse);
  text-align:center;
  /* 上下にお店の色の帯。前後のセクションとの区切りになる（オーゼットの再現 / ADR-092） */
  border-block:0.5rem solid var(--ts-color-brand);
}
/* 背景の写真は横に流れる帯（ADR-101）。同じ列を2回並べて、半分流れたところで先頭に戻すと継ぎ目が出ない */
.p-recri__strip {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.p-recri__track {
  display:flex;
  height:100%;
  width:max-content;
}
.p-recri__slide {
  position:relative;
  flex:0 0 auto;
  width:clamp(18rem, 34vw, 32rem);
  height:100%;
}
.p-recri__photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* 写真が1枚だけのときは流さず、前と同じく全面に敷く */
.p-recri__strip[data-count="1"] .p-recri__track { width:100%; }
.p-recri__strip[data-count="1"] .p-recri__slide { width:100%; }
/*
 * 流す指定は「動きを減らす」設定の人には当てない（打ち消し合いを避けるため、動く側を囲む / docs/pattern-authoring.md）。
 * 速さは枚数に合わせて、1枚あたり約 9 秒で通り過ぎるようにする
 */
@media (prefers-reduced-motion: no-preference) {
  .p-recri__strip[data-count="2"] .p-recri__track { animation:p-recri-slide 18s linear infinite; }
  .p-recri__strip[data-count="3"] .p-recri__track { animation:p-recri-slide 27s linear infinite; }
  .p-recri__strip[data-count="4"] .p-recri__track { animation:p-recri-slide 36s linear infinite; }
  .p-recri__strip[data-count="5"] .p-recri__track { animation:p-recri-slide 45s linear infinite; }
}
@keyframes p-recri-slide {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}
/* 写真の上でも文字が読めるように膜をかける */
.p-recri::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--ts-color-overlay);
}
.p-recri__recruit-inner {
  position:relative;
  z-index:2;
}
.p-recri__recruit-eyebrow {
  color:var(--ts-color-on-inverse);
  opacity:0.75;
}
.p-recri__recruit-heading {
  margin-top:0.2em;
  font-family:var(--ts-font-heading);
  font-size:var(--ts-text-h2);
  line-height:var(--ts-type-line-height-tight);
  letter-spacing:var(--ts-type-letter-spacing-heading);
  color:var(--ts-color-on-inverse);
}
.p-recri__recruit-catch {
  margin-top:var(--ts-space-gap);
  font-family:var(--ts-font-heading);
  font-size:var(--ts-text-h1);
  line-height:var(--ts-type-line-height-tight);
  letter-spacing:var(--ts-type-letter-spacing-heading);
  text-wrap:balance;
}
.p-recri__recruit-more {
  margin-top:var(--ts-space-block);
}
.p-recri__recruit-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75em;
  height:1.75em;
  margin-left:0.2em;
  border-radius:var(--ts-radius-pill);
  /* ボタン（色面 = brand）の上に乗る丸なので、色も brand 側で取る（ADR-092） */
  background:var(--ts-color-on-brand);
  color:var(--ts-color-brand);
}
@media (max-width: 767px) {
  .p-recri__slide {
    width:clamp(12rem, 60vw, 18rem);
  }
  .p-recri__recruit-catch {
    font-size:var(--ts-text-h2);
  }
}

/* pattern: shop-info-map */
.p-sim__list { display: flex; flex-direction: column; gap: var(--ts-space-block); }
.p-sim__store {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ts-space-block);
  align-items: stretch;
}
.p-sim__body { display: flex; flex-direction: column; gap: var(--ts-space-gap-sm); }
.p-sim__body .ts-dl { margin-top: var(--ts-space-gap-sm); }
.p-sim__cta { display: flex; flex-wrap: wrap; gap: var(--ts-space-gap-sm); margin-top: var(--ts-space-gap-sm); }
.p-sim__map {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-md);
  background: var(--ts-color-surface);
}
.p-sim__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 860px) {
  .p-sim__store { grid-template-columns: minmax(0, 1fr); }
  .p-sim__map { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
  .p-sim__cta .ts-btn { width: 100%; }
}

/* pattern: shop-info-simple */
.p-sis__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--ts-space-gap);
}
.p-sis__grid[data-count="1"] { max-width: var(--ts-layout-container-narrow); margin-inline: auto; }
.p-sis__card {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-gap-sm);
  padding: var(--ts-space-gap);
  background: var(--ts-color-bg);
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-md);
}
.p-sis__body { display: flex; flex-direction: column; gap: 0.4em; }
.p-sis__actions { display: flex; flex-wrap: wrap; gap: var(--ts-space-gap-sm); margin-top: var(--ts-space-gap-sm); }
/* 電話番号は途中で折り返さない。狭い幅では左右の余白を詰めて2つ並べる */
.p-sis__actions .ts-btn { flex: 1 1 8rem; white-space: nowrap; padding-inline: 1em; }

/* pattern: shop-info-zigzag */
/* 店舗を1件ずつ、写真と店名が左右で入れ替わる形に並べる。
   写真は店舗ページの写真から自動で選ばれる（無い店舗は情報だけの帯になる）。 */
.p-shopiz {
  background:transparent; /* 地は body が塗る。柄の背景（ADR-073）を透かすため塗らない */
}
.p-shopiz__brand-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ts-space-gap-sm);
  text-align:center;
  margin-bottom:var(--ts-space-block);
}
.p-shopiz__brand-list {
  display:flex;
  flex-direction:column;
  gap:var(--ts-space-gap);
}
.p-shopiz__brand-item {
  display:flex;
  align-items:stretch;
  overflow:hidden;
  background:var(--ts-color-surface);
  border-radius:var(--ts-radius-md);
  transition:transform var(--ts-effect-transition);
}
/* 2件目・4件目…は写真を右に。交互に並べることで一覧に流れが出る */
.p-shopiz__brand-item:nth-child(even) {
  flex-direction:row-reverse;
}
.p-shopiz__brand-item:hover {
  transform:translateY(-2px);
}
.p-shopiz__brand-item-img {
  width:40%;
  flex:none;
  overflow:hidden;
}
.p-shopiz__brand-item-img .ts-media {
  height:100%;
  border-radius:var(--ts-radius-none);
}
.p-shopiz__brand-item-photo {
  transition:transform var(--ts-effect-transition);
}
.p-shopiz__brand-item:hover .p-shopiz__brand-item-photo {
  transform:scale(1.06);
}
.p-shopiz__brand-item-info {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--ts-space-block) var(--ts-space-gutter);
}
.p-shopiz__brand-item-name {
  font-family:var(--ts-font-heading);
  font-size:var(--ts-text-h3);
  line-height:var(--ts-type-line-height-tight);
  letter-spacing:var(--ts-type-letter-spacing-heading);
  color:var(--ts-color-heading);
}
.p-shopiz__brand-item-label {
  margin-top:0.7em;
  font-size:var(--ts-text-caption);
  color:var(--ts-color-muted);
}
.p-shopiz__brand-item-hash {
  margin-right:0.25em;
}
.p-shopiz__brand-more {
  margin-top:var(--ts-space-block);
  text-align:center;
}
.p-shopiz__brand-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75em;
  height:1.75em;
  margin-left:0.2em;
  border-radius:var(--ts-radius-pill);
  /* ボタン（色面 = brand）の上に乗る丸なので、色も brand 側で取る（ADR-092） */
  background:var(--ts-color-on-brand);
  color:var(--ts-color-brand);
}

/* スマホは2列のカードに畳む（帯のままだと写真も文字も小さくなりすぎる） */
@media (max-width: 767px) {
  .p-shopiz__brand-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--ts-space-gap-sm);
  }
  .p-shopiz__brand-item,
  .p-shopiz__brand-item:nth-child(even) {
    flex-direction:column;
  }
  .p-shopiz__brand-item-img {
    width:100%;
  }
  .p-shopiz__brand-item-img .ts-media {
    height:auto;
  }
  .p-shopiz__brand-item-info {
    padding:var(--ts-space-gap-sm);
  }
  .p-shopiz__brand-item-name {
    font-size:var(--ts-text-small);
  }
}

/* pattern: store-photos-grid */
.p-spg__label { margin-top: var(--ts-space-block); margin-bottom: var(--ts-space-gap-sm); text-align: center; }
.p-spg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 22rem));
  justify-content: center;
  gap: var(--ts-space-gap-sm);
}
.p-spg__grid[data-count="1"] { max-width: var(--ts-layout-container-narrow); margin-inline: auto; }
.p-spg__item { cursor: zoom-in; transition: opacity var(--ts-effect-transition); }
.p-spg__item:hover { opacity: 0.86; }

/* スマホは1列だと写真1枚が1画面ぶんになり、ページが縦に長すぎる。2列で一覧性を出す */
@media (max-width: 640px) {
  .p-spg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-spg__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
}