@charset "UTF-8";
/* ==========================================================================
   リカー＆フード ドリーム 長田本店 ── デザイン案B

   案Aと同じ配色（ネイビー＋ロゴの赤）を使いながら、
   組み方だけを真逆に振った案。
   実店舗の「棚にびっしり並んだ品揃え」の密度と勢いを、
   詰めた余白・太い枠・ずらした影・手書きPOP風の札で表現している。

   ・余白は案Aの約半分
   ・要素をわずかに傾けて、手で貼った感じを出す
   ・見出しは Noto Sans JP 900。太くても読めることを最優先にしている
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（案Aの配色を基調）
   -------------------------------------------------------------------------- */
:root {
  /* メイン：ネイビー（店舗看板の紺） */
  --navy:      #1D3C6D;
  --navy-dark: #132A4E;
  --navy-deep: #0D1D36;

  /* アクセント：ドリームのロゴの赤 */
  --red:       #CE0E2D;
  --red-dark:  #A80B24;

  /* サブ */
  --blue:      #3E6BA8;
  --blue-soft: #D3E1F1;
  --mist:      #F1F6FC;
  --gold:      #E8CBA8;

  /* ベース */
  --cream:     #FDFCFA;
  --beige:     #F6F1E9;
  --paper:     #FFFFFF;
  --ink:       #24303F;
  --ink-soft:  #4E5A6B;

  /* タイポグラフィ
     見出しも本文も Noto Sans JP でそろえ、太さだけで強弱をつける。
     ラベル類は案Aと同じ Zen Maru Gothic。 */
  --f-bold:  "Noto Sans JP", -apple-system, "Hiragino Sans", sans-serif;
  --f-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --f-sans:  "Noto Sans JP", -apple-system, "Hiragino Sans", sans-serif;

  --w-max: 1200px;
  --pad-x: clamp(1rem, 4vw, 2rem);
  --header-h: 68px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 900px) { :root { --header-h: 58px; } }

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + .5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
  background: var(--cream);
  letter-spacing: .02em;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 300;
  padding: .75rem 1.25rem; background: var(--red); color: #fff; font-weight: 700;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. レイアウト
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--pad-x); }

/* 案Aより意図的に詰めている */
.section { padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; }
.section--navy  { background: var(--navy); color: #fff; }
.section--deep  { background: var(--navy-deep); color: #fff; }
.section--mist  { background: var(--mist); }
.section--paper { background: var(--paper); }

/* --------------------------------------------------------------------------
   4. POP札：店内の手書き値札。わずかに傾けて貼った感じにする
   -------------------------------------------------------------------------- */
.pop-tag {
  display: inline-block;
  padding: .5rem 1.1rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.5;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(19, 42, 78, .3);
}
.pop-tag--red   { background: var(--red); color: #fff; }
.pop-tag--white { background: #fff; }
.pop-tag--navy  { background: var(--navy); color: #fff; }
.pop-tag--r     { transform: rotate(1.8deg); }
/* 札の中で、上に小さく添える一行（例：「獺祭をはじめ」）。
   下の行と一体に見えるよう、行間を詰めている。 */
.pop-tag small {
  display: block;
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  margin-bottom: -.05em;
  opacity: .78;
}

/* --------------------------------------------------------------------------
   5. 見出し
   -------------------------------------------------------------------------- */
.head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); position: relative; z-index: 2; }
.head--center { text-align: center; }

.head__sub {
  display: inline-block;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--red);
  margin-bottom: .35rem;
}
.section--navy .head__sub,
.section--deep .head__sub { color: var(--gold); }

.head__main {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--navy);
}
.section--navy .head__main,
.section--deep .head__main { color: #fff; }

.head__lead {
  margin-top: 1rem;
  font-size: .9375rem;
  line-height: 1.95;
  color: var(--ink-soft);
}
.section--navy .head__lead,
.section--deep .head__lead { color: rgba(255, 255, 255, .82); }

/* 見出しの一部にマーカーを引く。文字にかからない高さに調整している */
.marker {
  background: linear-gradient(transparent 62%, var(--gold) 62%);
  padding-inline: .08em;
}
.section--navy .marker,
.section--deep .marker { background: linear-gradient(transparent 62%, rgba(232, 203, 168, .5) 62%); }

/* --------------------------------------------------------------------------
   6. ボタン
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 56px;
  padding: .8em 1.9em;
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .04em;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }

.btn--navy  { background: var(--navy); color: #fff; }
.btn--white { background: #fff; color: var(--navy); }
.btn--gold  { background: var(--gold); color: var(--ink); }

/* 濃色面の上に置くとき、影を白にして輪郭を立てる */
.btn--onDark { border-color: #fff; box-shadow: 5px 5px 0 rgba(255,255,255,.92); }
.btn--onDark:hover { box-shadow: 2px 2px 0 rgba(255,255,255,.92); }

/* 猫専用Instagramへのボタン。
   ラベルとアカウント名を2行に分け、どちらも中央で揃える。
   （1行だとスマホで中途半端な位置に折り返してしまうため） */
.cat-ig { gap: .7em; padding-inline: 1.5em; text-align: center; }
.cat-ig__icon { flex: 0 0 auto; display: inline-flex; width: 1.7em; height: 1.7em; }
.cat-ig__icon svg { width: 100%; height: 100%; }
.cat-ig__text { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.cat-ig__label { font-size: .8125em; letter-spacing: .08em; opacity: .82; }
.cat-ig__id { font-size: 1.0625em; letter-spacing: .03em; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   7. ヘッダー
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 4px solid var(--navy);
}
.header__inner {
  max-width: var(--w-max); margin-inline: auto;
  padding-inline: var(--pad-x);
  height: var(--header-h);
  display: flex; align-items: center; gap: 1rem;
}
.header__logo { display: flex; flex-direction: column; line-height: 1.05; flex-shrink: 0; }
/* 実際のロゴ画像（白背景のGIF。ヘッダーも白なのでそのまま馴染む） */
.header__logo-img {
  width: clamp(126px, 14vw, 172px);
  height: auto;
}
.header__logo-ja {
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--navy);
  margin-top: .3rem;
  white-space: nowrap;
}

.header__spacer { flex: 1; }

.gnav__list { display: flex; align-items: center; gap: clamp(.6rem, 1.5vw, 1.35rem); }
.gnav__link {
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--navy);
  white-space: nowrap;
  padding: .3rem 0;
  border-bottom: 3px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.gnav__link:hover { border-color: var(--red); color: var(--red); }

.header__shop {
  min-height: 40px; padding: .35rem 1rem;
  font-size: .8125rem; white-space: nowrap;
  border-width: 2px; box-shadow: 3px 3px 0 var(--ink);
}
.header__shop:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

.hamburger {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; position: relative; flex-shrink: 0;
}
.hamburger span {
  position: absolute; left: 10px; width: 24px; height: 3px;
  background: var(--navy); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger[aria-expanded="true"] span { background: #fff; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--navy); color: #fff;
  padding: 1.5rem var(--pad-x) 3rem; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer__item { border-bottom: 2px dashed rgba(255,255,255,.25); }
.drawer__link {
  display: block; padding: 1rem .25rem;
  font-family: var(--f-round); font-weight: 700; font-size: 1.0625rem;
}
.drawer__link:hover { color: var(--gold); }
.drawer__foot { margin-top: 1.5rem; display: grid; gap: .75rem; }
.drawer__foot .btn { width: 100%; }

body[data-drawer-open="true"] { overflow: hidden; }

@media (max-width: 1000px) {
  .gnav, .header__shop { display: none; }
  .hamburger { display: block; }
}

/* --------------------------------------------------------------------------
   8. ヒーロー
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 他セクションに負けない高さを持たせる */
  min-height: min(82vh, 760px);
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 5rem);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(13,29,54,.94) 0%, rgba(13,29,54,.84) 46%, rgba(13,29,54,.5) 100%),
    linear-gradient(to top, rgba(13,29,54,.9) 0%, rgba(13,29,54,.3) 45%);
}
/* 左にコピー、右にマスコット。高さと主役感を出すための2カラム */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  /* テキストに余裕を残し、マスコットは幅を固定する */
  grid-template-columns: minmax(0, 1fr) clamp(190px, 25vw, 330px);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  width: 100%;
}

.hero__figure { position: relative; justify-self: end; width: 100%; }
.hero__cat {
  width: 100%;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .5));
}

/* マスコットの吹き出し */
.hero__bubble {
  position: relative;
  margin: 0 0 .75rem auto;
  width: fit-content;
  padding: .8rem 1.35rem;
  background: #fff;
  color: var(--navy);
  font-family: var(--f-round);
  font-weight: 700;
  font-size: clamp(.9375rem, 1.9vw, 1.125rem);
  line-height: 1.5;
  text-align: center;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .28);
  transform: rotate(-2deg);
}
/* 吹き出しのしっぽ（枠線ぶんを重ねて描く） */
.hero__bubble::before,
.hero__bubble::after {
  content: "";
  position: absolute;
  left: 30%;
  border-style: solid;
}
.hero__bubble::before {
  bottom: -20px;
  border-width: 18px 13px 0 0;
  border-color: var(--ink) transparent transparent transparent;
}
.hero__bubble::after {
  bottom: -14px;
  border-width: 14px 9px 0 0;
  border-color: #fff transparent transparent transparent;
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__figure { width: 220px; justify-self: end; margin-top: -.5rem; }
}
@media (max-width: 560px) {
  .hero__figure { width: 150px; }
  .hero__bubble { font-size: .8125rem; padding: .6rem 1rem; }
  /* スマホは文字量がふくらみやすいので、POP札を小さめに */
  .hero__tags { gap: .5rem; margin-top: 1.1rem; }
  .hero__tags .pop-tag { padding: .4rem .85rem; font-size: .8125rem; }
}

.hero__catch {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(1.75rem, 5.6vw, 4rem);
  line-height: 1.35;
  letter-spacing: .005em;
  text-shadow: 0 3px 12px rgba(0,0,0,.5);
}
.hero__catch em { font-style: normal; color: var(--gold); }

/* 「何の店か」を最初に伝える一行。
   キャッチより先に読ませたいので、h1 の中の先頭に置いている。 */
.hero__catch-sub {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: clamp(.875rem, 1.9vw, 1.0625rem);
  line-height: 1.7;
  letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.hero__catch-sub .area {
  display: inline-block;
  padding: .15rem .7rem;
  margin-right: .5rem;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  font-size: .875em;
  text-shadow: none;
  white-space: nowrap;
}
/* 幅が狭いときは地域バッジを1行目に独立させ、店名が途中で折り返さないようにする。
   ※ .hero__catch-sub .area より後ろに置くこと（同じ詳細度なので後勝ち） */
@media (max-width: 640px) {
  .hero__catch-sub .area { display: block; width: fit-content; margin: 0 0 .45rem; }
}
/* 赤いベタで一語だけ強調する */
.hero__catch .accent {
  display: inline-block;
  padding-inline: .14em;
  background: var(--red);
  color: #fff;
  transform: rotate(-1.5deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,.3);
  text-shadow: none;
}

.hero__lead {
  max-width: 30em;
  margin-top: 1.1rem;
  font-size: clamp(.875rem, 1.7vw, 1rem);
  line-height: 1.95;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
}

/* 札の数が増えたので、ヒーロー内では少し小ぶりにして詰める */
.hero__tags { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-top: 1.4rem; }
.hero__tags .pop-tag { padding: .45rem .95rem; font-size: .875rem; }

/* PCでの強制改行。幅いっぱいの高さ0の要素を挟んで、次の札を2行目へ送る。
   ※ flex-basis だけだと flex-shrink で縮んで同じ行に収まってしまうため、
     flex: 0 0 100%（伸びない・縮まない・幅100%）にして確実に折り返させる。
   スマホは元々折り返すので、この要素は消しておく。 */
.hero__tags-break { display: none; }
@media (min-width: 901px) {
  .hero__tags-break { display: block; flex: 0 0 100%; height: 0; margin: 0; }
}

/* 営業状況のバッジ。ヒーローには置かず、店舗情報セクションで使う */
.shop-status {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem 1rem;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .875rem;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
}
.shop-status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #1E7A46; box-shadow: 0 0 0 3px rgba(30,122,70,.22);
}

/* --------------------------------------------------------------------------
   9. 流れる帯（マーキー）
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--navy);
  color: #fff;
  border-block: 4px solid var(--ink);
  overflow: hidden;
  padding-block: .6rem;
}
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center; gap: 1.75rem;
  padding-right: 1.75rem;
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  white-space: nowrap;
}
/* 区切りは赤い丸 */
.marquee__group span::after {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 1.75rem;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   10. 数字
   -------------------------------------------------------------------------- */
.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  position: relative; z-index: 2;
}
.num-card {
  padding: 1.75rem 1.25rem 1.5rem;
  background: #fff;
  border: 3px solid var(--navy);
  text-align: center;
  box-shadow: 6px 6px 0 var(--navy);
}
.num-card:nth-child(odd)  { transform: rotate(-1deg); }
.num-card:nth-child(even) { transform: rotate(.9deg); }

.num-card__label { font-family: var(--f-round); font-weight: 700; font-size: .875rem; color: var(--ink-soft); }
.num-card__value {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.15;
  color: var(--red);
  margin-block: .2rem;
}
.num-card__value small { font-size: .38em; margin-left: .15em; color: var(--navy); }
/* 数字ではなく語句が入る場合は、カード幅に収まるよう小さめにする */
.num-card__value--word {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.num-card__note { font-size: .8125rem; color: var(--ink-soft); line-height: 1.75; }

/* --------------------------------------------------------------------------
   11. 売場カード
   -------------------------------------------------------------------------- */
.zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  /* PCで3列×2段 */
  gap: .75rem;               /* あえて詰める＝棚の密度 */
  position: relative; z-index: 2;
}
.zone {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 1.4rem 1.25rem;
  background: var(--navy);
  color: #fff;
  border: 3px solid var(--ink);
  overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.zone:hover { transform: translateY(-5px); box-shadow: 0 10px 0 rgba(19,42,78,.35); }

/* ネイビーとワインレッドの濃淡で、売場ごとに表情を変える */
.zone--beer   { background: #1D3C6D; }
.zone--wine   { background: #7A1F32; }
.zone--sake   { background: #24487E; }
.zone--whisky { background: #16294A; }
.zone--food   { background: #2B5490; }
.zone--rice   { background: #5E1B28; }

.zone__no {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: .75rem;
  color: var(--gold);
  letter-spacing: .12em;
}
.zone__name {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(1.1875rem, 2.4vw, 1.375rem);
  line-height: 1.45;
  margin-block: .3rem .5rem;
}
.zone__desc { font-size: .8125rem; line-height: 1.85; color: rgba(255,255,255,.9); flex: 1; }
.zone__count {
  align-self: flex-start;
  margin-top: .875rem;
  padding: .28rem .8rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .8125rem;
  transform: rotate(-1.2deg);
}
/* 右下にボトルのシルエットを薄く敷く */
.zone__mark {
  position: absolute;
  right: -20px; bottom: -28px;
  width: 104px; height: 104px;
  opacity: .1;               /* 値札と重なっても読みを邪魔しない濃さ */
  transition: transform .35s var(--ease);
}
.zone:hover .zone__mark { transform: rotate(-8deg) scale(1.1); }
.zone__mark svg { width: 100%; height: 100%; fill: #fff; }

/* --------------------------------------------------------------------------
   12. 店内スナップ
   -------------------------------------------------------------------------- */
.snaps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.snap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid var(--navy);
}
.snap:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.snap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.snap:hover img { transform: scale(1.07); }
.snap__cap {
  position: absolute; left: .5rem; bottom: .5rem;
  padding: .2rem .7rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .8125rem;
  transform: rotate(-1.2deg);
}
@media (max-width: 700px) {
  .snaps { grid-template-columns: repeat(2, 1fr); }
  .snap:nth-child(1) { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
}

/* --------------------------------------------------------------------------
   13. 開催中セール
   -------------------------------------------------------------------------- */
.sale {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--red);
  color: #fff;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.sale__badge {
  font-family: var(--f-bold);
  font-weight: 900;
  text-align: center;
  padding: .75rem 1rem;
  background: #fff;
  color: var(--red);
  border: 3px solid var(--ink);
  transform: rotate(-3.5deg);
  white-space: nowrap;
}
.sale__badge b { display: block; font-size: 1.25rem; }
.sale__badge small { font-size: .75rem; color: var(--ink); }
.sale__title {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(1.25rem, 3.2vw, 1.875rem);
  line-height: 1.45;
}
.sale__period { font-family: var(--f-round); font-weight: 700; font-size: 1rem; margin-top: .35rem; }
.sale__note { margin-top: .5rem; font-size: .875rem; color: rgba(255,255,255,.95); }
@media (max-width: 640px) {
  .sale { grid-template-columns: 1fr; }
  .sale__badge { justify-self: start; }
}

/* --------------------------------------------------------------------------
   14. Instagram
   -------------------------------------------------------------------------- */
/* 投稿がすべて縦長（リール中心）のため、1枚目を大きな縦位置で見せ、
   残りを小さめの縦タイルで並べる。 */
/* 投稿を1枚も取得できなかったときの差し替え表示（main.js が組み立てる） */
.insta-fallback { text-align: center; margin: 1rem 0 .5rem; }

.insta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: .75rem;
  /* stretch にして、最新の1枚を右側8枚の高さちょうどまで伸ばす */
  align-items: stretch;
}
.insta-grid__rest {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

/* このセクションは明るい背景（section--mist）の上に置く。
   写真の発色を活かすため、枠はネイビーで締める。 */
.insta-grid__item {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--blue-soft);
  border: 2px solid var(--navy);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.insta-grid__item:hover { transform: scale(1.05); z-index: 2; box-shadow: 0 6px 16px rgba(29,60,109,.3); }
.insta-grid__item img { width: 100%; height: 100%; object-fit: cover; }

/* 最新の1件 */
.insta-grid__item--lead {
  /* 高さは指定せず、右側8枚のブロックに合わせて伸びるようにする。
     幅は列幅で決まるので、結果としてほぼ 9:16 の縦長になる。
     （スマホでは1カラムになるため、下のメディアクエリで比率を指定している） */
  aspect-ratio: auto;
  border-width: 3px;
  border-color: var(--navy);
  box-shadow: 6px 6px 0 var(--navy);
}
.insta-grid__item--lead:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--navy); }

/* 「最新」バッジ */
.insta-grid__item--lead::before {
  content: "最新";
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  padding: .25rem .7rem;
  background: var(--red);
  color: #fff;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .06em;
}

/* 写真が入るまでのプレースホルダー */
.insta-grid__item::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 2px solid rgba(29, 60, 109, .45); border-radius: 7px;
}
.insta-grid__item:has(img)::after { content: none; }

/* リール（動画）には再生マークを出す */
.insta-grid__item[data-video="true"] .insta-play {
  position: absolute;
  right: .4rem; top: .4rem;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  pointer-events: none;
}
.insta-grid__item[data-video="true"] .insta-play::before {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}
.insta-grid__item--lead[data-video="true"] .insta-play { width: 30px; height: 30px; right: .5rem; top: .5rem; }

@media (max-width: 760px) {
  .insta-grid { grid-template-columns: 1fr; gap: 1rem; }
  .insta-grid__item--lead { aspect-ratio: 4 / 5; max-width: 300px; margin-inline: auto; }
  .insta-grid__rest { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   15. 店舗情報
   -------------------------------------------------------------------------- */
.shop-info { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
@media (max-width: 820px) { .shop-info { grid-template-columns: 1fr; } }

.info-list { font-family: var(--f-round); font-weight: 700; font-size: 1rem; }
.info-list div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem;
  padding-block: .7rem;
  border-bottom: 2px dashed rgba(255,255,255,.3);
}
.info-list dt { color: var(--gold); }
.info-list a { border-bottom: 1px solid rgba(255,255,255,.55); }

.map-holder {
  display: grid; place-items: center;
  aspect-ratio: 4/3;
  background: var(--navy-dark);
  border: 3px solid var(--gold);
  cursor: pointer;
  overflow: hidden;
}
.map-holder__label {
  padding: .6rem 1.25rem;
  background: var(--gold); color: var(--ink);
  font-family: var(--f-round); font-weight: 700;
}
.map-holder iframe { width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   16. フッター
   -------------------------------------------------------------------------- */
.footer { background: var(--navy-deep); color: rgba(255,255,255,.84); }
.footer__inner {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr; } }

.footer__logo { font-family: var(--f-bold); font-weight: 900; font-size: 1.75rem; color: #fff; }
.footer__addr { margin-top: .875rem; font-style: normal; font-size: .875rem; line-height: 1.95; }
.footer__tel { font-family: var(--f-bold); font-weight: 900; font-size: 1.5rem; color: #fff; }
/* 電話とFAXが同じ番号であることを添えるラベル */
.footer__faxnote {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .55rem;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  font-size: .6875rem;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: middle;
}
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1.25rem; }
.footer__nav h3 { font-family: var(--f-round); font-weight: 700; font-size: .9375rem; color: var(--gold); margin-bottom: .6rem; }
.footer__nav li { font-size: .875rem; margin-bottom: .45rem; }
.footer__nav a:hover, .footer__addr a:hover { color: var(--gold); }

.footer__sns { display: flex; gap: .6rem; margin-top: 1rem; }
.footer__sns a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 2px solid rgba(255,255,255,.35); border-radius: 50%;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.footer__sns a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.footer__sns svg { width: 18px; height: 18px; fill: currentColor; }

.footer__alert {
  padding: .875rem 0;
  border-top: 2px dashed rgba(255,255,255,.25);
  font-size: .8125rem; text-align: center;
}
.footer__copy { padding-bottom: 1.25rem; font-size: .75rem; text-align: center; color: rgba(255,255,255,.55); }

/* --------------------------------------------------------------------------
   17. 下層ページ ── タイトルとパンくず
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(2rem, 5vw, 3.25rem);
  background: var(--navy);
  color: #fff;
  border-bottom: 4px solid var(--ink);
}
.page-head__sub {
  display: inline-block;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .875rem;
  color: var(--gold);
  margin-bottom: .2rem;
}
.page-head__main {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(1.5rem, 4.4vw, 2.375rem);
  line-height: 1.4;
}
.page-head__lead { margin-top: .75rem; font-size: .9375rem; color: rgba(255,255,255,.9); max-width: 44em; }

.breadcrumb { padding-block: .75rem; background: var(--mist); font-size: .75rem; color: var(--ink-soft); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.breadcrumb li::after { content: "›"; margin-left: .4rem; color: var(--blue); }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   18. 下層ページ ── 本文
   -------------------------------------------------------------------------- */
.narrow { max-width: 780px; margin-inline: auto; }

.prose > * + * { margin-top: 1.4em; }
.prose h2 {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  line-height: 1.5;
  color: var(--navy);
  margin-top: 2.2em;
  padding: .3rem 0 .3rem .875rem;
  border-left: 8px solid var(--red);
}
.prose h3 {
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: 1.0625rem;
  color: var(--red);
  margin-top: 1.8em;
}
.prose p { line-height: 2; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul li { position: relative; list-style: none; margin-bottom: .6em; }
.prose ul li::before {
  content: "";
  position: absolute; left: -1.1em; top: .85em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
}
.prose ol li { list-style: decimal; margin-bottom: .6em; }
.prose ol li::marker { color: var(--red); font-weight: 900; }
.prose strong { font-weight: 900; color: var(--navy); }
.prose a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--blue-soft); }
.prose a:hover { color: var(--red); }

/* チラシ画像（クリックでPDFを開く） */
.flyer { margin-block: 1.75rem; }
.flyer a { display: block; border: 3px solid var(--navy); box-shadow: 8px 8px 0 var(--navy);
           transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.flyer a:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--navy); }
.flyer img { width: 100%; height: auto; }
.flyer figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-top: .875rem;
  font-size: .8125rem; color: var(--ink-soft);
}
.flyer__dl {
  display: inline-flex; align-items: center;
  padding: .35rem 1rem;
  background: var(--red); color: #fff;
  font-family: var(--f-round); font-weight: 700; font-size: .8125rem;
  text-decoration: none;
}
.flyer__dl:hover { background: var(--navy); color: #fff; }

/* 注意書き・補足 */
.callout {
  padding: 1.25rem 1.5rem;
  background: var(--mist);
  border: 3px solid var(--navy);
  box-shadow: 5px 5px 0 var(--navy);
  font-size: .875rem;
  line-height: 1.95;
}
.callout strong { color: var(--red); }

/* 定義リスト */
.deflist { border: 3px solid var(--navy); background: #fff; }
.deflist div {
  display: grid; grid-template-columns: 10rem 1fr; gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 2px dashed var(--blue-soft);
  font-size: .9375rem;
}
.deflist div:last-child { border-bottom: 0; }
.deflist dt { font-family: var(--f-round); font-weight: 700; color: var(--navy); }
@media (max-width: 640px) { .deflist div { grid-template-columns: 1fr; gap: .2rem; } }

/* --------------------------------------------------------------------------
   19. 下層ページ ── お知らせ一覧・記事
   -------------------------------------------------------------------------- */
.news-list { display: grid; gap: .625rem; }
.news-item {
  display: grid;
  grid-template-columns: 6.5rem 6.5rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 3px solid var(--navy);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.news-item:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--navy); }
.news-item__date { font-family: var(--f-bold); font-weight: 900; font-size: .9375rem; color: var(--ink-soft); }
.news-item__title { font-size: .9375rem; font-weight: 700; line-height: 1.7; color: var(--navy); }
.news-item:hover .news-item__title { color: var(--red); }

.tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 6rem; padding: .25rem .7rem;
  font-family: var(--f-round); font-weight: 700; font-size: .6875rem;
  letter-spacing: .06em; white-space: nowrap;
}
.tag--sale  { background: var(--red); color: #fff; }
.tag--flyer { background: var(--navy); color: #fff; }
.tag--info  { background: var(--gold); color: var(--ink); }
.tag--end   { background: var(--blue-soft); color: var(--navy); }

@media (max-width: 700px) {
  .news-item { grid-template-columns: 1fr; gap: .45rem; }
  .news-item__meta { display: flex; align-items: center; gap: .75rem; }
  .tag { min-width: 0; }
}

.article-head { padding-bottom: 1.25rem; border-bottom: 3px solid var(--navy); }
.article-head__meta { display: flex; align-items: center; gap: .875rem; margin-bottom: .75rem; }
.article-head__date { font-family: var(--f-bold); font-weight: 900; color: var(--ink-soft); font-size: .9375rem; }
.article-head__title {
  font-family: var(--f-bold); font-weight: 900;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem); line-height: 1.6; color: var(--navy);
}

/* --------------------------------------------------------------------------
   20. 下層ページ ── フォーム
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .45rem; }
.field__label {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--f-round); font-weight: 700; font-size: .875rem; color: var(--navy);
}
.field__req { padding: .15rem .55rem; font-size: .625rem; background: var(--red); color: #fff; }
.field__opt { padding: .15rem .55rem; font-size: .625rem; background: var(--blue-soft); color: var(--navy); }
.field__note { font-size: .8125rem; color: var(--ink-soft); }

.input, .textarea {
  width: 100%; padding: .8rem 1rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 3px solid var(--navy);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--red); }
.textarea { min-height: 170px; resize: vertical; line-height: 1.8; }

.radio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.radio {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; font-size: .875rem;
  background: #fff; border: 2px solid var(--blue-soft); cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.radio:hover { border-color: var(--navy); background: var(--mist); }
.radio input { width: 18px; height: 18px; accent-color: var(--red); }
.radio:has(input:checked) { border-color: var(--red); background: var(--mist); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-card {
  padding: 1.75rem 1.5rem; text-align: center;
  background: #fff; border: 3px solid var(--navy); box-shadow: 6px 6px 0 var(--navy);
}
.contact-card__label {
  display: inline-block; padding: .2rem .8rem; margin-bottom: .6rem;
  font-family: var(--f-round); font-weight: 700; font-size: .6875rem;
  background: var(--navy); color: #fff;
}
.contact-card__title { font-size: .875rem; color: var(--ink-soft); }
.contact-card__tel {
  display: block; margin: .2rem 0 .4rem;
  font-family: var(--f-bold); font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 1.875rem); color: var(--red);
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

/* --------------------------------------------------------------------------
   21. マスコット
   チラシで使っているキャラクターを、ページの要所に添える。
   あくまで装飾なので、読み上げの邪魔にならないよう扱いは軽くしている。
   -------------------------------------------------------------------------- */

/* 見出しの横に立たせる */
.head-cat { display: flex; align-items: flex-end; gap: clamp(.75rem, 2vw, 1.5rem); }
.head-cat > .head { margin-bottom: 0; flex: 1; }
.head-cat__img { width: clamp(72px, 9vw, 128px); flex-shrink: 0; }

/* セール枠の右下からのぞかせる */
/* セール枠の「ゆかり」。枠から上にはみ出させたいので overflow は切らない */
/* ゆかりの大きさは1か所で決める。本文の右側をあける量もこれに連動させる */
.sale { position: relative; --yukari-w: clamp(96px, 12.5vw, 160px); }
.sale__mascot {
  position: absolute;
  right: clamp(.5rem, 2vw, 1.75rem);
  bottom: 0;
  width: var(--yukari-w);
  pointer-events: none;
  z-index: 2;
}
/* 本文がゆかりの下に潜り込まないよう、右側をあけておく
   （バッジは左端なので対象外。スマホでは配置が変わるので下で打ち消す） */
.sale > div:not(.sale__badge) { padding-right: calc(var(--yukari-w) + 2rem); }
.sale__mascot img {
  width: 100%;
  /* 赤い枠から飛び出しても輪郭が見えるよう、うっすら影を落とす */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

/* --- ゆかりの動き ---------------------------------------------------------
   赤い枠の上辺から上半身がはみ出す配置。枠を切らずに見せたいので、
   出現前は透明＋少し下、という隠し方にしている。
   1. セール枠が画面に入ったら、ふわっと浮かび上がる
   2. 出たあとは、ときどき鈴を鳴らすように体を揺らす
   3. セール枠にマウスを乗せると、少し跳ねる
   JavaScript が無効なときは最初から定位置に出す（.js で囲っている）。
   「視差効果を減らす」設定の環境では、共通の指定でアニメーションが止まる。
   -------------------------------------------------------------------------- */
.js .sale__mascot {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.js .sale[data-reveal="shown"] .sale__mascot { opacity: 1; transform: translateY(0); }
.js .sale[data-reveal="shown"]:hover .sale__mascot { transform: translateY(-9px); }

.js .sale[data-reveal="shown"] .sale__mascot img {
  transform-origin: 50% 92%;
  animation: yukari-ring 7s var(--ease) 1.2s infinite;
}
@keyframes yukari-ring {
  0%, 86%, 100% { transform: rotate(0deg); }
  88%  { transform: rotate(-7deg); }
  90%  { transform: rotate(5deg); }
  92%  { transform: rotate(-4deg); }
  94%  { transform: rotate(3deg); }
  96%  { transform: rotate(-1.5deg); }
}

/* --- 狭い画面でのゆかり ---------------------------------------------------
   以前は文字に重なるので非表示にしていたが、置き場所を変えて出すようにした。
   ・タブレット（2カラムのまま）── 右下。本文の右側をあけて重なりを避ける
   ・スマホ（1カラム）── バッジの右どなり。枠の上辺から顔を出す
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .sale { --yukari-w: clamp(88px, 13vw, 116px); }
}

@media (max-width: 640px) {
  .sale { --yukari-w: clamp(84px, 25vw, 112px); }
  .sale > div:not(.sale__badge) { padding-right: 0; }
  .sale__mascot { top: -1.75rem; bottom: auto; right: 1.25rem; }
  /* バッジの高さに収めたいので、名前だけを1行で置く。
     イラストより文字のほうが長いため、絶対配置にして左右へ均等にはみ出させる
     （nowrap だけだと右にはみ出して枠から出てしまう） */
  .sale__mascot .cat-cap-long { display: none; }
  .sale__mascot .cat-cap {
    position: absolute;
    top: calc(100% + .3rem);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin-top: 0;
    font-size: .5625rem;
  }
}

/* 本文中の挿絵 */
.cat-figure { margin-block: 2rem; text-align: center; }
.cat-figure img { max-width: min(420px, 100%); margin-inline: auto; }
.cat-figure figcaption { margin-top: .5rem; font-size: .8125rem; color: var(--ink-soft); }

/* 白背景のJPGマスコットは、明るい面に置いてなじませる */
.cat-figure--card img {
  background: #fff;
  border: 3px solid var(--navy);
  box-shadow: 6px 6px 0 var(--navy);
}

/* 2体ならべる */
.cat-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: end;
  margin-block: 2rem;
}
.cat-pair img { width: 100%; background: #fff; border: 3px solid var(--navy); }

/* フッターに小さく添える */
.footer__cat { width: 104px; margin-top: 1.25rem; }
.footer__cat img { width: 100%; }

/* 猫の名前キャプション。ヒーロー・セール枠・フッターで共通に使う。
   いずれも濃色の面の上に載るため、白系で組んでいる。 */
.cat-cap {
  display: block;
  margin-top: .35rem;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .625rem;
  line-height: 1.45;
  letter-spacing: .04em;
  text-align: center;
  color: rgba(255, 255, 255, .72);
}
.cat-cap b { display: block; font-size: 1.4em; color: #fff; letter-spacing: .08em; }

/* --------------------------------------------------------------------------
   21-2. 保護猫の紹介
   -------------------------------------------------------------------------- */
.cat-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 760px;
  margin-inline: auto;
}
.cat-profile {
  margin: 0;
  padding: 1.5rem 1.25rem 1.375rem;
  background: #fff;
  border: 3px solid var(--navy);
  box-shadow: 6px 6px 0 var(--navy);
  text-align: center;
}
.cat-profile:nth-child(odd)  { transform: rotate(-1deg); }
.cat-profile:nth-child(even) { transform: rotate(.9deg); }
.cat-profile img { width: min(190px, 72%); margin-inline: auto; }

.cat-profile__label {
  display: inline-block;
  padding: .2rem .75rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .06em;
}
.cat-profile__name {
  display: block;
  margin-top: .5rem;
  font-family: var(--f-bold);
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: .08em;
}
.cat-profile__role {
  display: block;
  margin-top: .2rem;
  font-size: .8125rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   22. 写真ギャラリー
   -------------------------------------------------------------------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .625rem;
  margin-block: 1.75rem;
}
.photo-grid figure {
  margin: 0;
  border: 3px solid var(--navy);
  overflow: hidden;
  background: var(--navy);
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.photo-grid figure:hover img { transform: scale(1.06); }
.photo-grid figcaption {
  padding: .45rem .7rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-round);
  font-weight: 700;
  font-size: .75rem;
}
/* 1枚目を横いっぱいに */
.photo-grid--lead figure:first-child { grid-column: 1 / -1; }
.photo-grid--lead figure:first-child img { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   23. スクロール表示
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal="shown"] { opacity: 1; transform: none; }

/* ユーティリティ */
.text-center { text-align: center; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.note { font-size: .8125rem; color: var(--ink-soft); line-height: 1.8; }
.section--navy .note, .section--deep .note { color: rgba(255,255,255,.75); }