:root {
  --color-black: #000000;
  --color-cream: #f2f3ee;
  --color-gold: #ab7e54;
  --color-footer-bg: #ab7e54;
  --font-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

html, body { overflow-x: hidden; }

body {
  font-family: var(--font-serif);
  color: var(--color-black);
  background: #fff;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

/* Site-wide keyboard focus indicator (previously relied on UA default,
   which is invisible/inconsistent against this site's black and cream
   section backgrounds). Uses :focus-visible so mouse/touch clicks don't
   show the ring, only keyboard navigation does. */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ===== header ===== */
.site-header {
  background: var(--color-black);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  z-index: 1030;
}
.site-logo img { height: 52px; width: auto; }
.sns-icons img { height: 24px; width: auto; }
/* icon_youtube.png's intrinsic aspect ratio (117:86) is wider than the
   X/Instagram icons' near-1:1 ratio, so height:24px/width:auto alone
   renders it at ~32.6px wide - visibly larger than its neighbors. Pin it
   to the intended 28px width to match the other icons' visual weight. */
.sns-icons .icon-youtube { width: 28px; }
.site-nav .nav-link {
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  padding: .6rem .5rem;
}
.site-nav .nav-link:hover { color: var(--color-gold); }
@media (max-width: 991.98px) {
  .site-nav .navbar-nav { background: var(--color-black); padding: .5rem 0; }
  .site-nav .nav-link { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: .8rem .5rem; }
}

/* ===== hero ===== */
.hero { background: var(--color-black); }
.hero-slide {
  display: flex;
  height: min(72vh, 700px);
}
.hero-photo {
  flex: 1 1 50%;
  background-size: cover;
  background-position: center;
}
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 1.6vh, 1.5rem);
  padding: 1.5rem 1rem 4.5rem; /* 下パディングはインジケーターの帯を空けるため */
  pointer-events: none;
  background: linear-gradient(90deg, transparent 38%, rgba(10, 10, 10, .82) 46%, rgba(10, 10, 10, .82) 54%, transparent 62%);
}
/* 4.6vh は「縦書き7文字 × (1 + letter-spacing .28em)」がヒーロー高さ
   min(72vh, 700px) の 7 割に収まる上限。3.4rem はヒーローが 700px で頭打ちに
   なる高解像度環境での同じ役目の上限。どちらかを緩めるとタイトル下端の
   「」」がキャプションに重なる。 */
.hero-title {
  writing-mode: vertical-rl;
  font-size: clamp(2.4rem, min(5.5vw, 4.6vh), 3.4rem);
  font-weight: 700;
  letter-spacing: .28em;
  color: #fff;
  margin: 0;
}
/* デザイン検証：見本では英語キャプションは縦書き2列ではなく、縦書きタイトルの下に
   横書き2行で収まっている。 */
.hero-sub {
  width: max-content;
  max-width: 90%;
  font-size: clamp(.75rem, 1.1vw, .95rem);
  letter-spacing: .06em;
  line-height: 1.7;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}
.hero-indicators {
  position: absolute;
  bottom: 4%;
  z-index: 3;
  margin: 0;
}
.hero-indicators [data-bs-target] {
  width: 30px;
  height: 3px;
  margin: 0 4px;
  border: 0;
  border-radius: 0;
  background-color: rgba(255, 255, 255, .4);
  opacity: 1;
}
.hero-indicators [data-bs-target].active {
  background-color: #fff;
}
@media (max-width: 767.98px) {
  .hero-slide {
    flex-direction: column;
    height: 80vh; /* fallback for browsers without dvh support */
    height: 80dvh; /* avoids the hero height jumping when mobile Safari's
                       chrome shows/hides and the small/large viewport
                       height changes */
  }
  .hero-copy { background: linear-gradient(180deg, transparent 30%, rgba(10, 10, 10, .82) 42%, rgba(10, 10, 10, .82) 58%, transparent 70%); }
}
/* ===== strip cards ===== */
.strip-cards {
  background: var(--color-black);
  padding: 1rem 0;
  --strip-gap: .5rem;  /* カード間の隙間。下のカード幅の計算式と必ず同じ値を使うため変数化 */
  --strip-peek: 1rem;  /* 991px以下でスワイプ可能と分かるよう左右に覗かせる隣カードの幅 */
}
.strip-track {
  display: flex;
  gap: var(--strip-gap);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 .75rem;
}
.strip-card {
  position: relative;
  flex: 1 1 20%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  text-decoration: none;
}
.strip-card img { width: 100%; height: 100%; object-fit: cover; }
.strip-card--feature {
  background: #011655;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: #fff;
  text-align: center;
  font-size: .95rem;
}
.strip-feature-text strong { font-size: 1.35em; }
.strip-more {
  border: 1px solid rgba(255, 255, 255, .7);
  font-size: .7rem;
  padding: .3rem 1rem;
}
/* 992px以上の「5枚横並び」から991px以下の「3枚スワイプ」へは、カード幅が
   187px→309pxと不連続に飛ぶ。これは表示枚数を変える仕様上避けられないもので、
   計算ミスではない。
   padding を 0 に戻しているのは、幅の % が content box 基準なのに対し
   スクロール領域は padding box 基準で、padding が残っていると常に
   その分（24px）ずれるため。0 にすると 100% がそのまま可視幅になる。 */
@media (max-width: 991.98px) {
  .strip-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    overscroll-behavior-x: contain; /* 端まで振ってもブラウザの「戻る」やページ側へ連鎖させない */
  }
  /* 可視幅の内訳: peek + gap + card + gap + card + gap + card + gap + peek */
  .strip-card {
    flex: 0 0 auto;
    width: calc((100% - 2 * var(--strip-peek) - 4 * var(--strip-gap)) / 3);
    scroll-snap-align: center;
  }
}
/* 可視幅の内訳: peek + gap + card + gap + peek */
@media (max-width: 600px) {
  .strip-cards { --strip-peek: 1.5rem; }
  .strip-card { width: calc(100% - 2 * var(--strip-peek) - 2 * var(--strip-gap)); }
}
/* ===== history =====
   Geometry note: .history itself is a plain, UNCLIPPED black box (var(--color-black)).
   Because it's solid black with no clip-path, it always sits flush against the
   black .strip-cards section above and the black topics section below - no
   negative margins needed, no white gap possible, no risk of overlapping and
   clipping the strip-cards' caption text.
   The visible diagonal band is a separate ::before layer (position:absolute;
   inset:0) carrying the gradient background; ONLY that layer is clip-path'd,
   so the diagonal cut simply reveals .history's own black backing underneath -
   visually indistinguishable from the neighboring black sections. ::after adds
   a thin lighter sliver just above ::before's top edge (a slightly-higher,
   parallel copy of the same line) to reproduce the comp's thin accent stroke.
   The rendered angle = atan(dropPx / boxWidthPx), where dropPx = boxHeightPx *
   (percent drop between the polygon's top-left and top-right points below).
   The polygon's % values are calibrated to ~6.6deg (matching 仕上がり見本.jpg,
   history region ~y:1300-2050) at .history's CURRENT box height (padding +
   content), separately per breakpoint tier below because box height does not
   scale linearly with viewport width (the photo grid's aspect-ratio-driven
   height grows slower than the viewport, so the same % value would go
   shallower at wider widths). If the content changes (heading size, text
   length, photo grid height, etc.) box height changes and so does the
   rendered angle even though the % values are unchanged - re-measure against
   the comp after such edits (measured: 1280px box height ~551px -> 27% gives
   ~6.6deg; 1920px box height ~596px -> 37% gives ~6.6deg).
*/
.history {
  position: relative;
  background: var(--color-black);
  color: #fff;
  padding: 7rem 0;
}
.history::before,
.history::after {
  content: "";
  position: absolute;
  inset: 0;
}
.history::after {
  background: rgba(255, 255, 255, .55);
  clip-path: polygon(0 26.55%, 100% -.45%, 100% 73%, 0 100%);
  z-index: 0;
}
.history::before {
  background: linear-gradient(120deg, #2a2a2a 0%, #161616 60%, #000 100%);
  clip-path: polygon(0 27%, 100% 0, 100% 73%, 0 100%);
  z-index: 1;
}
.history > .container-xl {
  position: relative;
  z-index: 2;
}
@media (min-width: 1400px) {
  .history::after { clip-path: polygon(0 36.55%, 100% -.45%, 100% 64%, 0 100%); }
  .history::before { clip-path: polygon(0 37%, 100% 0, 100% 64%, 0 100%); }
}
.history-heading {
  max-width: 460px;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  color: #fff;
}
/* At >=992px the 460px max-width (sized for the SP/tablet 2-line layout)
   is narrower than the heading's natural single-line width once the
   clamp()'d font-size grows past ~992px, so the comp's one-line heading
   wrapped to 2 lines here. Widen the cap for the lg+ range - 620px covers
   the natural single-line width across the whole clamp() range (measured
   ~559px at 1280px, ~591px at 1440px/1920px where font-size maxes out at
   2.2rem) while staying narrower than the .col-lg-6 text column at every
   tested width (496/570/660px), so it never crowds the photo column.
   Doesn't affect box height / the .history::before/::after clip-path
   calibration above: the photo column (.history-photos + Since caption)
   is already taller than the heading+text column at every lg+ breakpoint,
   so it alone determines the row height either way (verified via CDP:
   historyBoxHeight unchanged before/after this change). */
@media (min-width: 992px) {
  .history-heading { max-width: 620px; }
}
/* Raising max-width above is NOT enough on its own for the 1200-1399px
   window: Bootstrap's .container-xl only grows at the xl (1200px) and
   xxl (1400px) breakpoints, so the .col-lg-6 text column's content width
   is pinned at ~546px for that whole window while the heading's
   clamp(1.7rem, 2.6vw, 2.2rem) keeps growing past it with viewport width
   (font-size 31.2px at 1200px -> 35.2px at 1350-1399px), so the
   shrink-to-fit heading box still wrapped to 2 lines there (e.g. 559px
   natural width vs 546px available at 1280px). Pin the font-size to the
   value it already has at 1200px (where it's proven to fit, ~22px to
   spare) for the rest of that fixed-column-width window, and let it
   resume the normal clamp once the column widens again at 1400px (natural
   width there is ~591px against a ~636px column, ~45px to spare, so no
   cap is needed above 1400px). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .history-heading { font-size: 1.95rem; }
}
.history-text { font-size: .95rem; line-height: 2.1; }
.history-photos img {
  width: 33.333%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1);
}
.history-since {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: rgba(255, 255, 255, .35);
  font-style: italic;
  text-align: right;
  margin: .5rem 0 0;
}
@media (max-width: 991.98px) {
  .history { padding: 5rem 0; }
  .history::after { clip-path: polygon(0 10.85%, 100% -.45%, 100% 89%, 0 100%); }
  .history::before { clip-path: polygon(0 11.3%, 100% 0, 100% 88.7%, 0 100%); }
}
/* ===== topics ===== */
.topics { background: var(--color-black); color: #fff; padding: 4rem 0 3rem; }
.topics-heading { max-width: 140px; }
.topics-photo { max-width: 180px; }
.topics-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .5rem 0;
  font-size: .9rem;
}
/* Comp shows the underline stopping before the bordered button (not running
   under it), so the border lives on this inner row rather than on
   .topics-item itself; .btn-detail keeps its own full border box. */
.topics-item-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  padding: .5rem 0;
}
.topics-item time { color: var(--color-gold); white-space: nowrap; }
.topics-item p { margin: 0; flex: 1; }
.btn-detail {
  border: 1px solid rgba(255, 255, 255, .6);
  color: #fff;
  font-size: .75rem;
  padding: .35rem 1.2rem;
  text-decoration: none;
  white-space: nowrap;
}
.btn-detail:hover { background: var(--color-gold); border-color: var(--color-gold); color: #fff; }
.topics-more { color: rgba(255, 255, 255, .8); text-decoration: none; font-size: .9rem; }
@media (max-width: 767.98px) {
  .topics-item { flex-wrap: wrap; gap: .5rem 1rem; }
  .topics-item-row { flex-wrap: wrap; gap: .5rem 1rem; }
}
/* ===== restaurant ===== */
.restaurant { background: var(--color-cream); padding: 5rem 0; }
.section-heading { max-width: 320px; }
.sub-heading { max-width: min(380px, 100%); display: block; }
.section-text { font-size: .95rem; line-height: 2; }
.btn-detail--dark {
  border-color: var(--color-black);
  color: var(--color-black);
  display: inline-block;
}
.btn-detail--dark:hover { background: var(--color-gold); border-color: var(--color-gold); color: #fff; }
.pair-photo { width: 45%; object-fit: cover; }
.pair-title { font-size: 1.15rem; font-weight: 700; }
.pair-en { color: var(--color-gold); font-size: .8rem; }

/* ===== non-restaurant ===== */
.non-restaurant { background: var(--color-black); color: #fff; padding: 4.5rem 0; }
.section-heading--wide { max-width: min(380px, 100%); }
.non-card {
  display: block;
  text-decoration: none;
}
.non-card img { width: 100%; height: auto; display: block; }

/* ===== ganso banner ===== */
.ganso-banner { background: #f3f3ee; padding: 1.5rem 0; }
.ganso-banner-img { max-width: 100%; height: auto; }

/* ===== footer ===== */
.site-footer { background: var(--color-footer-bg); color: #fff; position: relative; padding-top: 2.5rem; }
.page-top-group {
  position: absolute;
  top: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-top-utensil {
  height: 3.85rem;
  width: auto;
  pointer-events: none;
  display: block;
}
.page-top {
  position: relative;
  background: var(--color-black);
  color: #fff;
  border-radius: 50%;
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  text-decoration: none;
}
.footer-logo { max-width: min(220px, 100%); }
.footer-address { font-size: .8rem; }
.footer-tel-label { font-size: .8rem; }
.footer-tel-furigana { font-size: .65rem; letter-spacing: .1em; color: rgba(255, 255, 255, .85); margin-left: 4.9rem; }
.footer-tel a { color: #fff; font-size: 1.8rem; font-weight: 700; text-decoration: none; }
.footer-note { font-size: .7rem; }
.btn-contact {
  display: inline-block;
  background: var(--color-black);
  color: #fff;
  padding: .9rem 2.2rem;
  text-decoration: none;
  font-size: .9rem;
}
.footer-copy { font-size: .7rem; border-top: 1px solid rgba(255, 255, 255, .3); }

/* ===== fade-in ===== */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease-out, transform .8s ease-out;
  }
  .fade-in.is-visible {
    opacity: 1;
    transform: none;
  }
}