/* トンマナ: ゴシック体・#0d3a40 (0d3a40-0f9e9a-light-gothic) */
:root {
  --ts-color-bg: #f3f8f9;
  --ts-color-surface: #e1f0f2;
  --ts-color-inverse: #0c0706;
  --ts-color-on-inverse: #ffffff;
  --ts-color-text: #203032;
  --ts-color-muted: #587579;
  --ts-color-heading: #142224;
  --ts-color-accent: #0c7875;
  --ts-color-on-accent: #ffffff;
  --ts-color-accent-hover: #085351;
  --ts-color-brand: #0f9e9a;
  --ts-color-on-brand: #17161a;
  --ts-color-brand-hover: #0b7976;
  --ts-color-border: #acd3d8;
  --ts-color-overlay: rgba(7, 31, 34, 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: 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-many */
/* 写真をふんだんに流す FV。3段の帯を少し傾けて横に流し、その上に見出しを置く。
   地の色に従う（反転色に固定しない）。写真が少ない帯はテンプレートで並びを繰り返して6枚ぶんにするので、
   1枚からでも帯が切れない（切れると、流れる途中で帯の端に写真の無い地が見える）。 */
.p-fvmn {
  position:relative;
  overflow:hidden;
  background:transparent; /* 地は body が塗る。柄の背景（ADR-073）を透かすため塗らない */
  color:var(--ts-color-text);
  /* 見出しの上は標準の 1.5 倍あける（帯が下に来るぶん、上に間を取る） */
  padding-block:calc(var(--ts-space-block) * 1.5) var(--ts-space-section);
}

/* 見出し。帯と同じ向きに少し傾けて、勢いを出す */
.p-fvmn__inner { position:relative; z-index:1; }
.p-fvmn__text {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--ts-space-gap-sm);
  transform:rotate(-3deg);
  transform-origin:left bottom;
  padding-block:calc(var(--ts-space-gap) * 1.5) var(--ts-space-block);
}
.p-fvmn__title {
  font-family:var(--ts-font-heading);
  font-size:var(--ts-text-display);
  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:16em;
}
.p-fvmn__lead {
  font-size:var(--ts-text-lead);
  line-height:var(--ts-type-line-height-base);
  color:var(--ts-color-muted);
  max-width:34em;
}

/* 3段の帯。左右を画面の外まで伸ばしてから傾けるので、端に空白が出ない */
.p-fvmn__strips {
  display:flex;
  flex-direction:column;
  gap:var(--ts-space-gap-sm);
  margin-inline:-12vw;
  transform:rotate(-4deg);
  transform-origin:center;
}
.p-fvmn__strip { overflow:hidden; }
/* 同じ並びを4本つなげ、1本ぶん（全体の 1/4）動かして戻す。一周した瞬間の絵が開始時と同じになり切れ目が出ない */
.p-fvmn__track {
  display:flex;
  width:max-content;
  animation:fvmn-left 60s linear infinite;
}
.p-fvmn__track--reverse { animation:fvmn-right 70s linear infinite; }
.p-fvmn__set { display:flex; flex:0 0 auto; gap:var(--ts-space-gap-sm); padding-right:var(--ts-space-gap-sm); }
/* 高さをそろえ、幅は写真の比率で決める（横長・正方形が混ざってリズムが出る）。
   幅は「高さ × 比率」で直接書く。width:auto ＋ aspect-ratio に任せると、中の img が width:100% で
   幅が循環し、iOS Safari では max-content の帯の中で幅が 0 や細い幅につぶれて写真が出なくなる */
.p-fvmn__set .ts-media {
  --fvmn-h:clamp(96px, 13vw, 190px);
  --fvmn-ratio:1;
  height:var(--fvmn-h);
  width:calc(var(--fvmn-h) * var(--fvmn-ratio));
  aspect-ratio:auto;
  flex:0 0 auto;
  border-radius:var(--ts-radius-none);
}
.p-fvmn__set .ts-media[data-aspect="16:9"] { --fvmn-ratio:1.7778; }
.p-fvmn__set .ts-media[data-aspect="3:2"] { --fvmn-ratio:1.5; }
.p-fvmn__strip:nth-child(2) .ts-media { --fvmn-h:clamp(72px, 9vw, 130px); }

@keyframes fvmn-left {
  from { transform:translateX(0); }
  to   { transform:translateX(-25%); }
}
@keyframes fvmn-right {
  from { transform:translateX(-25%); }
  to   { transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .p-fvmn__track { animation:none; }
}

@media (max-width: 640px) {
  .p-fvmn { padding-block:calc(var(--ts-space-gap) * 1.5) var(--ts-space-block); }
  .p-fvmn__text { transform:rotate(-2deg); }
  .p-fvmn__strips { margin-inline:-16vw; transform:rotate(-3deg); gap:var(--ts-space-gap-sm); }
}

/* 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%; }
}