/* =============================================
   和もんスグリ — 共通スタイル

   デザイン方針：
   - 既存の日替わりメニューページで確立した和紙調の
     カラースキームとフォント体系を全ページに統一
   - ターゲット（40-50代）のスマホ利用を前提に
     モバイルファーストで設計
   - 装飾は最小限、余白で品を出す
   ============================================= */

/* === リセット === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === カスタムプロパティ === */
:root {
  /* 和紙ベージュ（参照画像のトーンに統一） */
  --bg-main: #E7DAB7;
  --bg-card: #F7F0DD;
  --bg-dark: #2C2418;
  /* ナビはbg-darkよりワントーン明るく */
  --bg-nav: #3A3022;
  --text-main: #2C2418;
  --text-sub: #000000;
  --text-price: #5C4A32;
  --text-on-dark: #E7DAB7;
  --accent: #8B7355;
  --accent-light: #BFAE8A;
  --border: #D1C296;
  --highlight: #D4583A;
  --cta-bg: #D4583A;
  --cta-text: #F7F0DD;
  --shadow: rgba(44, 36, 24, 0.08);
}

/* === アクセシビリティ：スキップリンク ===
   意図：キーボード操作・スクリーンリーダー利用時にナビを読み飛ばして
   本文へ直接移動できるようにする（WCAG 2.4.1）。通常は画面外に隠し、
   フォーカス時のみ表示する。 */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 1000;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 0.6rem 1.2rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* === アクセシビリティ：フォーカス可視化 ===
   意図：ブラウザ既定のフォーカスリングは --bg-nav 等の暗色背景で
   コントラスト不足になりうるため、ブランドカラーで明示する（WCAG 2.4.7）。 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

/* === スクロール表示（フェードイン） === */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: opacity, transform;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: #E7DAB7;
  /* CSS未読込/途中適用でも真っ白を避ける */
  background-color: var(--bg-main);
}

body {
  font-family: 'Shippori Mincho', serif;
  background-color: #E7DAB7;
  /* var未解決時のフォールバック */
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  line-height: 1.8;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(210, 195, 168, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(210, 195, 168, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(190, 175, 148, 0.08) 0%, transparent 50%);
}

main {
  /* 端末によっては body 背景が main に反映されず白く見えるため保険 */
  background-color: #E7DAB7;
  background-color: var(--bg-main);
}

a {
  color: var(--accent);
  text-decoration: none;
}

/* テキストリンク：青文字＋下線（コンテンツ内のみ） */
main a,
.page-container a,
.section a {
  color: #2563eb;
  text-decoration: underline;
}

/* ボタン・カード類は除外 */
main a.cta-button,
main a.card--cta,
main a.hero-cta,
a.anim-cta-btn {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

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

/* === ナビゲーション ===
   意図：600px未満（スマホ）はハンバーガー+全画面オーバーレイ、
   600px以上（タブレット/PC）は従来のテキストリンク横一列を維持する。
   2026-07-22の決定：ハンバーガーの認知度自体は現代では低くないと判断し方針転換。
   予約導線は下部固定ボタン（.fixed-cta）が別途常時あるため、
   ハンバーガー内に予約を含めても二重動線として問題ない。 */

.site-nav {
  background-color: var(--bg-nav);
  padding: 0.6rem 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-family: 'Yuji Syuku', serif;
  font-size: 1.1rem;
  color: var(--text-on-dark);
  letter-spacing: 0.15em;
}

.nav-links {
  display: flex;
  gap: 1.2rem;
  list-style: none;
}

.nav-links a {
  font-family: 'Shippori Mincho', serif;
  font-size: 0.8rem;
  color: var(--accent-light);
  letter-spacing: 0.08em;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--text-on-dark);
  opacity: 1;
}

.nav-links a.current {
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--accent-light);
  padding-bottom: 2px;
}

/* === ハンバーガーメニュー（600px未満のみ表示） ===
   実行案デモ（捨てメモ/2026-07-22.md 記載）の仕様をそのまま反映。 */

.nav-burger {
  display: flex;
  width: 1.9rem;
  height: 1.9rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--accent-light);
  border-radius: 6px;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 0.95rem;
  height: 2px;
  background: var(--text-on-dark);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.2px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.2px) rotate(-45deg);
}

/* 薄い黒のオーバーレイが画面全体にファーっとフェードインする演出。
   「茶色いナビが下に伸びる」形は明示的に不採用。 */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 5, 0.86);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-overlay-links {
  width: 100%;
  max-width: 360px;
  padding: 0 1.6rem;
  list-style: none;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.32s ease 0.05s, opacity 0.32s ease 0.05s;
}

.nav-overlay.is-open .nav-overlay-links {
  transform: translateY(0);
  opacity: 1;
}

.nav-overlay-links li+li {
  border-top: 1px solid rgba(191, 174, 138, 0.18);
}

.nav-overlay-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0.5rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.15s;
}

.nav-overlay-links a:hover,
.nav-overlay-links a:active {
  color: var(--text-on-dark);
  opacity: 1;
}

.nav-overlay-links a.current {
  color: var(--text-on-dark);
  font-weight: 700;
  position: relative;
}

.nav-overlay-links a.current::after {
  content: "";
  position: absolute;
  bottom: 0.55rem;
  width: 1.6rem;
  height: 2px;
  background: var(--accent-light);
}

.nav-overlay-links a.nav-overlay-cta {
  color: var(--highlight);
  font-weight: 700;
}

/* オーバーレイ表示中は背景のスクロールを止める。
   固定SMS予約ボタンもオーバーレイの半透明越しに透けて見え、
   オーバーレイ内の「予約」項目と二重に見えてしまうため非表示にする。 */
body.nav-open {
  overflow: hidden;
}

body.nav-open .fixed-cta {
  visibility: hidden;
}

@media (min-width: 600px) {
  .nav-burger {
    display: none;
  }

  .nav-overlay {
    display: none;
  }
}

@media (max-width: 599px) {
  .nav-links {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .nav-burger span,
  .nav-overlay,
  .nav-overlay-links {
    transition: none;
  }
}

/* === SMS予約ボタン（固定フッター） ===
   意図：アンケートQ11「SMSで予約を入れる」が最重要要望。
   全ページ共通でスマホ画面下部に固定表示。
   常に1タップで予約行動に移れる状態を維持する。 */

.fixed-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-dark);
  padding: 0.8rem 1rem;
  z-index: 200;
  text-align: center;
}

/* === スクロール促し（トップヒーロー用） === */
.scroll-hint {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(var(--fixed-cta-height, 76px) + 18px + env(safe-area-inset-bottom));
  /* 固定CTA実高さ＋余白＋セーフエリア */
  z-index: 180;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(209, 194, 150, 0.75);
  border-radius: 999px;
  background: rgba(247, 240, 221, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(44, 36, 24, 0.12);
  color: var(--text-sub);
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  user-select: none;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}

.scroll-hint.is-hidden {
  opacity: 0;
  transform: translateY(6px);
}

.scroll-hint__arrows {
  display: inline-flex;
  flex-direction: column;
  line-height: 0;
}

.scroll-hint__arrow {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  opacity: 0.95;
  animation: scrollHintBounce 1.15s ease-in-out infinite;
}

.scroll-hint__arrow:nth-child(2) {
  margin-top: -6px;
  opacity: 0.6;
  animation-delay: 120ms;
}

@keyframes scrollHintBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.scroll-hint--on-hero {
  /* ヒーローの上に出しても読めるように */
  border-color: rgba(191, 174, 138, 0.65);
  background: rgba(44, 36, 24, 0.42);
  color: rgba(231, 218, 183, 0.9);
}

.scroll-hint--on-hero .scroll-hint__arrow {
  stroke: rgba(231, 218, 183, 0.95);
}

.scroll-hint--on-hero .scroll-hint__arrow:nth-child(2) {
  opacity: 0.65;
}

@media (max-width: 360px) {
  .scroll-hint {
    right: max(0.65rem, env(safe-area-inset-right));
    bottom: calc(var(--fixed-cta-height, 84px) + 14px + env(safe-area-inset-bottom));
    padding: 0.5rem 0.65rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  .scroll-hint__arrow {
    width: 13px;
    height: 13px;
  }
}

@keyframes goldEdge {

  0%,
  100% {
    border-color: #D4583A;
  }

  33% {
    border-color: #d4a83a;
  }

  66% {
    border-color: #c0583a;
  }
}

.cta-button {
  display: inline-block;
  background: var(--cta-bg);
  color: var(--cta-text);
  font-family: 'Zen Old Mincho', serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  padding: calc(0.7rem - 2px) calc(2.5rem - 2px);
  border: 2px solid #D4583A;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  animation: goldEdge 2s linear infinite;
}

.cta-button:hover {
  background: #c04830;
  border-color: #c04830;
  opacity: 1;
  animation-play-state: paused;
}

.cta-sub {
  font-size: 0.7rem;
  color: var(--accent-light);
  margin-top: 0.2rem;
  letter-spacing: 0.05em;
}

/* === ページ共通レイアウト === */
.page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.2rem 6rem;
  /* 下部に固定CTAの高さ分余白 */
  background-color: #E7DAB7;
  background-color: var(--bg-main);
}

/* === ヒーロー・ページヘッダー === */
.hero {
  position: relative;
  height: 72vh;
  min-height: 440px;
  max-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3a3028;
  /* 本番では実際の写真に差し替え */
  background-image:
    linear-gradient(135deg, #2C2418 0%, #4a3c2e 50%, #2C2418 100%);
  z-index: 0;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 244, 228, 0.28);
  z-index: 1;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 50%, transparent 30%, rgba(200, 180, 140, 0.22) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--text-on-dark);
}

.hero-title {
  font-family: 'Yuji Syuku', serif;
  font-size: 2.8rem;
  letter-spacing: 0.4em;
  margin-bottom: 0.5rem;
}

.hero-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--accent-light);
  margin-bottom: 2rem;
}

.hero-cta {
  display: inline-block;
  border: 1px solid var(--accent-light);
  color: var(--text-on-dark);
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  padding: 0.8rem 2rem;
  transition: all 0.3s;
}

.hero-cta:hover {
  background: var(--accent-light);
  color: var(--bg-dark);
  opacity: 1;
}

/* === A-01 ヒーローアニメーション ===
   トップページのみ使用。魚がSVGパスの曲線上を泳ぎながら登場し、
   到着後は .is-idle クラスに切り替わってゆらゆら漂う。
   index.html の <script> で animationend イベントを拾って切り替え。
   「prefers-reduced-motion」のユーザーは全アニメーションを無効化する。 */
.anim-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.anim-logo-svg {
  width: min(280px, 85vw);
  height: auto;
  display: block;
  overflow: visible;
}

.anim-fish {
  animation: fishSwimIn 3.4s linear forwards;
  will-change: transform;
  transform-box: fill-box;
  transform-origin: center center;
}

.anim-fish.is-idle {
  animation: fishIdle 3.8s ease-in-out infinite;
}

/* fishSwimIn: デスクトップ用。右端(1000px先)から左へ泳ぎながら進入する。
   translateY の波形で上下に揺れる自然な泳ぎを表現。
   モバイル用は fishSwimInMobile（開始位置を380pxに縮小）。 */
@keyframes fishSwimIn {
  0% {
    transform: translateX(1000px) translateY(0px) rotate(0.0deg);
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  4% {
    transform: translateX(941px) translateY(-12px) rotate(-1.8deg);
  }

  8% {
    transform: translateX(882px) translateY(-19px) rotate(-2.9deg);
  }

  12% {
    transform: translateX(825px) translateY(-18px) rotate(-2.7deg);
  }

  16% {
    transform: translateX(770px) translateY(-11px) rotate(-1.7deg);
  }

  20% {
    transform: translateX(716px) translateY(0px) rotate(0.0deg);
  }

  24% {
    transform: translateX(663px) translateY(10px) rotate(1.5deg);
  }

  28% {
    transform: translateX(611px) translateY(15px) rotate(2.3deg);
  }

  32% {
    transform: translateX(561px) translateY(14px) rotate(2.1deg);
  }

  36% {
    transform: translateX(512px) translateY(8px) rotate(1.2deg);
  }

  40% {
    transform: translateX(465px) translateY(0px) rotate(0.0deg);
  }

  44% {
    transform: translateX(419px) translateY(-7px) rotate(-1.1deg);
  }

  48% {
    transform: translateX(375px) translateY(-11px) rotate(-1.7deg);
  }

  52% {
    transform: translateX(333px) translateY(-10px) rotate(-1.5deg);
  }

  56% {
    transform: translateX(292px) translateY(-6px) rotate(-0.9deg);
  }

  60% {
    transform: translateX(253px) translateY(0px) rotate(0.0deg);
  }

  64% {
    transform: translateX(216px) translateY(5px) rotate(0.8deg);
  }

  68% {
    transform: translateX(181px) translateY(7px) rotate(1.1deg);
  }

  72% {
    transform: translateX(148px) translateY(6px) rotate(0.9deg);
  }

  76% {
    transform: translateX(118px) translateY(3px) rotate(0.5deg);
  }

  80% {
    transform: translateX(89px) translateY(0px) rotate(0.0deg);
  }

  84% {
    transform: translateX(64px) translateY(-2px) rotate(-0.3deg);
  }

  88% {
    transform: translateX(42px) translateY(-3px) rotate(-0.5deg);
  }

  92% {
    transform: translateX(23px) translateY(-2px) rotate(-0.3deg);
  }

  96% {
    transform: translateX(8px) translateY(-1px) rotate(-0.2deg);
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(0.0deg);
  }
}

@keyframes fishSwimInMobile {
  0% {
    transform: translateX(380px) translateY(0px) rotate(0.0deg);
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  4% {
    transform: translateX(358px) translateY(-12px) rotate(-1.8deg);
  }

  8% {
    transform: translateX(335px) translateY(-19px) rotate(-2.9deg);
  }

  12% {
    transform: translateX(314px) translateY(-18px) rotate(-2.7deg);
  }

  16% {
    transform: translateX(292px) translateY(-11px) rotate(-1.7deg);
  }

  20% {
    transform: translateX(272px) translateY(0px) rotate(0.0deg);
  }

  24% {
    transform: translateX(252px) translateY(10px) rotate(1.5deg);
  }

  28% {
    transform: translateX(232px) translateY(15px) rotate(2.3deg);
  }

  32% {
    transform: translateX(213px) translateY(14px) rotate(2.1deg);
  }

  36% {
    transform: translateX(194px) translateY(8px) rotate(1.2deg);
  }

  40% {
    transform: translateX(177px) translateY(0px) rotate(0.0deg);
  }

  44% {
    transform: translateX(159px) translateY(-7px) rotate(-1.1deg);
  }

  48% {
    transform: translateX(143px) translateY(-11px) rotate(-1.7deg);
  }

  52% {
    transform: translateX(126px) translateY(-10px) rotate(-1.5deg);
  }

  56% {
    transform: translateX(111px) translateY(-6px) rotate(-0.9deg);
  }

  60% {
    transform: translateX(96px) translateY(0px) rotate(0.0deg);
  }

  64% {
    transform: translateX(82px) translateY(5px) rotate(0.8deg);
  }

  68% {
    transform: translateX(69px) translateY(7px) rotate(1.1deg);
  }

  72% {
    transform: translateX(56px) translateY(6px) rotate(0.9deg);
  }

  76% {
    transform: translateX(45px) translateY(3px) rotate(0.5deg);
  }

  80% {
    transform: translateX(34px) translateY(0px) rotate(0.0deg);
  }

  84% {
    transform: translateX(24px) translateY(-2px) rotate(-0.3deg);
  }

  88% {
    transform: translateX(16px) translateY(-3px) rotate(-0.5deg);
  }

  92% {
    transform: translateX(9px) translateY(-2px) rotate(-0.3deg);
  }

  96% {
    transform: translateX(3px) translateY(-1px) rotate(-0.2deg);
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(0.0deg);
  }
}

@keyframes fishIdle {
  0% {
    transform: translateY(0px) rotate(0.0deg);
  }

  15% {
    transform: translateY(-3px) rotate(1.2deg);
  }

  30% {
    transform: translateY(-5px) rotate(2.0deg);
  }

  45% {
    transform: translateY(-3px) rotate(1.2deg);
  }

  50% {
    transform: translateY(0px) rotate(0.0deg);
  }

  65% {
    transform: translateY(2px) rotate(-0.8deg);
  }

  75% {
    transform: translateY(3px) rotate(-1.2deg);
  }

  88% {
    transform: translateY(2px) rotate(-0.8deg);
  }

  100% {
    transform: translateY(0px) rotate(0.0deg);
  }
}

.anim-text {
  opacity: 0;
  text-align: center;
  animation: textFadeIn 1.1s ease-in forwards;
  animation-delay: 3.0s;
}

@keyframes textFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.anim-store-name {
  font-family: 'Zen Old Mincho', serif;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #1A1208;
  margin: 0;
  line-height: 1.1;
}

.anim-store-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(0.9rem, 2.4vw, 1.1rem);
  color: #6B5030;
  letter-spacing: 0.3em;
  margin-top: 0.7rem;
}

.anim-cta {
  position: relative;
  z-index: 3;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  animation: textFadeIn 0.9s ease-in forwards;
  animation-delay: 3.7s;
}

.anim-sub-copy {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  color: #7A5530;
  letter-spacing: 0.22em;
}

/* ヒーロー内の営業時間・定休：予約ボタン廃止に伴い、来店判断情報をファーストビューに出す。
   事実は サブディレクトリ/店舗情報.md（Single Source of Truth）・JSON-LD openingHours と一致。 */
.anim-hours {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(0.78rem, 1.7vw, 0.9rem);
  color: #5A4326;
  letter-spacing: 0.12em;
  font-weight: 500;
}

.anim-hours-item {
  white-space: nowrap;
}

.anim-hours-sep {
  color: #9A7A4A;
  margin: 0 0.5em;
}

.anim-cta-btn {
  display: inline-block;
  border: 1px solid #3a2c1a;
  color: #1A1208;
  font-family: 'Zen Old Mincho', serif;
  font-size: clamp(0.82rem, 1.8vw, 0.9rem);
  letter-spacing: 0.15em;
  padding: 0.72rem 2.2rem;
  text-decoration: none;
  transition: background 0.28s, color 0.28s;
  background: transparent;
}

.anim-cta-btn:hover {
  background: #3a2c1a;
  color: #F5EDD9;
  opacity: 1;
}

@media (max-width: 600px) {
  .anim-fish {
    animation-name: fishSwimInMobile;
    animation-duration: 3.0s;
  }

  .hero {
    min-height: 380px;
    height: 80vh;
  }

  .anim-wrapper {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anim-fish {
    animation: none;
  }

  .anim-fish.is-idle {
    animation: none;
  }

  .anim-text,
  .anim-cta {
    opacity: 1;
    animation: none;
  }
}

/* === ページタイトル（下層ページ用） === */
.page-header {
  text-align: center;
  padding: 3rem 1rem 2rem;
}

.page-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--accent);
  margin: 1rem auto 0;
  opacity: 0.6;
}

.page-title {
  font-family: 'Yuji Syuku', serif;
  font-size: 2rem;
  letter-spacing: 0.3em;
}

.page-title-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: 0.8rem;
  color: var(--text-sub);
  margin-top: 0.4rem;
  letter-spacing: 0.1em;
}

/* === セクション === */
.section {
  margin-bottom: 3rem;
}

.section-title {
  font-family: 'Yuji Syuku', serif;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.section-lead {
  font-size: 0.9rem;
  color: var(--text-sub);
  line-height: 2;
  margin-bottom: 1.5rem;
}

/* === カード === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  border-radius: 2px;
  box-shadow: 0 2px 8px var(--shadow);
}

.card--cta {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.card--cta:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(139, 115, 85, 0.65);
  box-shadow: 0 10px 26px rgba(44, 36, 24, 0.12);
}

.card--cta:focus-visible {
  outline: 2px solid rgba(212, 88, 58, 0.7);
  outline-offset: 3px;
}

.card-cta-text {
  margin-top: 0.9rem;
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: var(--highlight);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .card--cta {
    transition: none;
  }

  .card--cta:hover {
    transform: none;
  }
}

.card-title {
  font-family: 'Zen Old Mincho', serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

.card-text {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.9;
}

.card-price {
  font-family: 'Zen Old Mincho', serif;
  font-size: 1.3rem;
  color: var(--highlight);
  margin-top: 0.8rem;
  letter-spacing: 0.08em;
}

/* 実物ではない画像（イメージ写真・生成画像）に添える注記。
   実際の商品と誤認されうる画像には必ず添える（景品表示法・優良誤認の回避）。
   使い方：画像の直後に <p class="img-note">※写真はイメージです</p> を置く。
   実際に店で撮影した写真には付けないこと（付けると本物の写真まで信頼を落とす）。 */
.img-note {
  font-size: 0.72rem;
  color: var(--text-sub);
  opacity: 0.75;
  text-align: right;
  margin: 0 0 0.8rem;
  letter-spacing: 0.03em;
}

.card-note {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-top: 0.3rem;
}

/* === コース詳細（スマホで読みやすく） === */
.course-subtitle {
  margin-top: 0.9rem;
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--text-main);
}

.course-list {
  list-style: none;
  margin-top: 0.9rem;
  padding-left: 0;
  display: grid;
  gap: 0.55rem;
}

.course-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--text-sub);
}

.course-list li::before {
  content: "☆";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--highlight);
  opacity: 0.9;
}

.course-item-title {
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.95rem;
  color: var(--text-main);
  letter-spacing: 0.06em;
}

.course-item-sub {
  font-size: 0.82rem;
  color: var(--text-sub);
  margin-top: 0.1rem;
}

.course-main {
  padding: 0.85rem 0.9rem 0.85rem 1.8rem;
  /* ☆分を確保しつつ枠内に */
  border: 1px solid rgba(212, 88, 58, 0.45);
  background: rgba(212, 88, 58, 0.06);
  border-radius: 6px;
}

.course-main::before {
  left: 0.65rem;
  top: 0.85rem;
}

.course-badge {
  display: inline-block;
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--cta-text);
  background: var(--highlight);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.45rem;
}

.course-main .course-item-title {
  font-weight: 700;
}

.course-main .course-item-sub {
  color: var(--text-main);
}

.course-meta {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dotted var(--border);
  font-size: 0.82rem;
  color: var(--text-sub);
  line-height: 1.9;
  display: grid;
  gap: 0.25rem;
}

/* === 画像プレースホルダー ===
   意図：土台段階では実画像がないため、
   比率を維持したグレーボックスで場所を確保する。
   本番で差し替える際のサイズ感がわかるようにしている。 */

.img-placeholder {
  background: linear-gradient(135deg, #d8d0c4 0%, #c4baa8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  border: 1px dashed var(--border);
}

.img-placeholder--hero {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.img-placeholder--square {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.img-placeholder--portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
}

.img-placeholder--wide {
  width: 100%;
  aspect-ratio: 21 / 9;
}

/* トップの特徴カードなど：実写真を従来プレースホルダーと同じ枠に収める */
.card-thumb {
  width: 100%;
  max-height: 200px;
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--border);
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === グリッドレイアウト ===
   モバイルファーストで1列から始め、600px以上で2列/3列に広げる。
   ブレイクポイントは下のレスポンシブセクションで切り替え。 */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* === 店主紹介（about.html） ===
   モバイルは丸型サムネ＋名前を横並びにして、紹介文をすぐ下にフル幅で続ける。
   写真1枚が画面の大半を占め紹介文が下に埋もれる問題への対応（2026-08-08）。
   600px以上は写真を大きくして名前・紹介文と横並びに戻す（E-E-A-Tの当初方針を維持）。 */
.owner-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "photo name"
    "text  text";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.8rem;
}

.owner-intro-photo {
  grid-area: photo;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.owner-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.owner-intro-name {
  grid-area: name;
  font-family: 'Zen Old Mincho', serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.owner-intro-text {
  grid-area: text;
}

/* 営業情報サマリー（トップの3カード直下）。
   来店判断に直結する営業時間・定休・アクセスを1行で。余白で品を出す方針に沿い、
   上に細い装飾線だけ引いて控えめに。スマホでは項目ごとに折り返す。 */
.hours-summary {
  max-width: 720px;
  margin: 1.6rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-sub);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  line-height: 1.9;
}

.hours-summary-item {
  white-space: nowrap;
}

.hours-summary-sep {
  color: var(--accent-light);
  margin: 0 0.6em;
}

/* === Instagram埋め込みエリア ===
   意図：Q14「IG投稿埋め込み：はい」への対応。
   本番ではInstagram oEmbed APIまたは
   手動埋め込みコードで差し替える。 */

.ig-embed-area {
  margin: 2rem 0;
}

.ig-placeholder {
  background: var(--bg-card);
  border: 1px dashed var(--border);
  padding: 2rem;
  text-align: center;
  color: var(--text-sub);
  font-size: 0.85rem;
}

.ig-placeholder a {
  display: inline-block;
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: var(--highlight);
  text-decoration: none;
  padding: calc(0.6rem - 2px) calc(1.6rem - 2px);
  border: 2px solid #D4583A;
  border-radius: 2px;
  animation: goldEdge 2s linear infinite;
  transition: background 0.2s, color 0.2s;
}

.ig-placeholder a:hover {
  background: var(--highlight);
  color: var(--cta-text);
  border-color: var(--highlight);
  opacity: 1;
  animation-play-state: paused;
}

/* === テーブル === */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.info-table th {
  text-align: left;
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;
  padding: 0.8rem 0;
  width: 10em;
  vertical-align: top;
  color: var(--text-sub);
  border-bottom: 1px dotted var(--border);
}

.info-table td {
  padding: 0.8rem 0;
  border-bottom: 1px dotted var(--border);
}

/* === フッター === */
.site-footer {
  background: var(--bg-dark);
  color: var(--accent-light);
  text-align: center;
  padding: 2rem 1rem 5rem;
  /* 固定CTAの分余白 */
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.footer-name {
  font-family: 'Yuji Syuku', serif;
  font-size: 1.2rem;
  color: var(--text-on-dark);
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}

.footer-address {
  line-height: 1.8;
  margin-bottom: 1rem;
}

.footer-copy {
  font-size: 0.7rem;
  color: var(--accent-light);
  margin-top: 1rem;
}

/* === 口コミ誘導 === */
.footer-review {
  border-top: 1px solid rgba(196, 180, 154, 0.25);
  margin: 1.5rem 0 1rem;
  padding-top: 1.5rem;
}

.footer-review-title {
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.82rem;
  color: var(--accent-light);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.footer-review-title span {
  display: block;
  font-size: 0.68rem;
  color: var(--accent-light);
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
  font-family: 'Shippori Mincho', serif;
}

.footer-review-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.footer-review-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 280px;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(196, 180, 154, 0.35);
  border-radius: 2px;
  font-family: 'Shippori Mincho', serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent-light);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.footer-review-btn:hover {
  background: rgba(196, 180, 154, 0.1);
  border-color: var(--accent-light);
  opacity: 1;
}

.footer-review-btn svg {
  flex-shrink: 0;
}

/* フッターのFAQ誘導CTA：口コミCTAより控えめなアウトラインリンク。
   閲覧導線なので目立たせすぎず、しかし全ページから到達可能にする。 */
.footer-faq-cta {
  margin: 1.2rem auto 0;
  text-align: center;
}

.footer-faq-link {
  display: inline-block;
  padding: 0.5rem 1.6rem;
  border: 1px solid var(--accent-light);
  border-radius: 2px;
  color: var(--text-on-dark);
  font-family: 'Shippori Mincho', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.footer-faq-link:hover {
  background: rgba(196, 180, 154, 0.1);
  border-color: var(--bg-card);
}

/* === FAQページ専用 === */
/* カテゴリ目次：13カテゴリへのジャンプリンクを2-3列グリッドで配置 */
.faq-toc-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1.2rem 1.2rem 1rem;
  margin-bottom: 1.8rem;
}

.faq-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}

.faq-toc li {
  list-style: none;
}

.faq-toc a {
  display: block;
  padding: 0.4rem 0.2rem;
  color: var(--text-main);
  font-family: 'Shippori Mincho', serif;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  border-bottom: 1px dotted var(--border);
  text-decoration: none;
}

.faq-toc a:hover {
  color: var(--highlight);
}

/* FAQ項目：details/summary でアコーディオン。
   CSSのみで開閉、JS不要。デフォルトの三角▶を非表示にし和風カスタムアイコンを使う。 */
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 0.6rem;
  box-shadow: 0 1px 4px var(--shadow);
}

.faq-item>summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 2.2rem 0.95rem 1.1rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-main);
  position: relative;
  line-height: 1.55;
}

.faq-item>summary::-webkit-details-marker {
  display: none;
}

/* +/− アイコン：和テイストに馴染む細いライン。 */
.faq-item>summary::after {
  content: '＋';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--accent);
  font-family: 'Zen Old Mincho', serif;
  transition: transform 0.2s, content 0.2s;
}

.faq-item[open]>summary::after {
  content: '−';
}

.faq-item[open]>summary {
  border-bottom: 1px dotted var(--border);
}

.faq-item>p,
.faq-item>ul {
  padding: 0.8rem 1.1rem 1rem;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-main);
}

.faq-item>ul {
  padding-left: 2.4rem;
}

@media (min-width: 600px) {
  .footer-review-links {
    flex-direction: row;
    justify-content: center;
  }

  .footer-review-btn {
    max-width: 200px;
  }
}

/* === レスポンシブ ===
   600px: スマホ横向き/タブレット以上でグリッドを多列化・ナビ間隔を広げる
   360px: 超小型スマホ（Galaxy A等）向けにフォントを縮小 */
@media (min-width: 600px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .owner-intro {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "photo name"
      "photo text";
    align-items: start;
    row-gap: 0;
  }

  .owner-intro-photo {
    width: 100%;
    height: auto;
    border-radius: 6px;
    align-self: start;
  }

  .owner-intro-photo img {
    object-position: center center;
  }

  .owner-intro-name {
    align-self: end;
    margin-bottom: 0.8rem;
  }

  .hero-title {
    font-size: 3.5rem;
  }

  .nav-links {
    gap: 2rem;
  }

  .nav-links a {
    font-size: 0.85rem;
  }
}

@media (max-width: 360px) {
  .hero-title {
    font-size: 2rem;
  }

  .page-title {
    font-size: 1.7rem;
  }

  .nav-links {
    gap: 0.8rem;
  }

  .nav-links a {
    font-size: 0.7rem;
  }

  .course-list li {
    font-size: 0.95rem;
  }

  .course-item-title {
    font-size: 0.98rem;
  }

  .course-subtitle {
    font-size: 0.98rem;
  }
}