/* Generated from myakita-redesign.html (claude.ai/design) */

/* ============================================================
   マイ秋田ガイド — Design Tokens
   ============================================================
   ブランドキーワード: 地元民の目線 / 静けさと迫力 / 季節の表情
   カラーは6色以内に制約 (Primary / Accent / Neutrals + Seasonal hints)
   ============================================================ */

:root {
  /* ----- Core palette -------------------------------------- */
  --aki-ink:        #1b1b1b;   /* 深い墨 — 武家屋敷の黒板塀 */
  --aki-ink-deep:  #000000;   /* 墨深め — ホバー/アクティブ */
  --aki-ink-soft:  #4a4a4a;   /* 墨薄め — secondary text on light */

  --aki-apple:     #c1272d;   /* 竿燈赤 — Accent / CTA (青森のりんご赤に対応) */
  --aki-apple-deep:#8e1c21;   /* 竿燈赤 hover */
  --aki-rice:      #d4af37;   /* 稲穂金 — sub accent / season summer */

  --aki-moss:      #7a9a6e;   /* 秋田杉緑 */
  --aki-moss-soft: #e6ede2;   /* 杉の薄い背景 */

  --aki-snow:      #ffffff;   /* 雪白 — base background */
  --aki-paper:     #ffffff;   /* 紙白 — card surface */
  --aki-stone:     #ebebeb;   /* 石 — divider, border */
  --aki-stone-2:   #d0d0d0;   /* 石濃い */
  --aki-sumi:      #222222;   /* 炭 — body text */
  --aki-sumi-2:    #717171;   /* 炭薄 — secondary */

  /* ----- Seasonal accents (hero / feature only) ----------- */
  --aki-spring:    #d88ea2;   /* 角館桜 */
  --aki-summer:    #c1272d;   /* 竿燈赤 */
  --aki-autumn:    #b5651d;   /* 紅葉 */
  --aki-winter:    #a6b7c2;   /* 樹氷 */

  /* ----- Typography --------------------------------------- */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-hand:  "Yomogi", "Klee One", "Noto Serif JP", cursive;

  --fs-hero:    clamp(44px, 8vw, 88px);
  --fs-h1:      clamp(28px, 4.5vw, 44px);
  --fs-h2:      clamp(22px, 3.2vw, 30px);
  --fs-h3:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-xs:      12px;

  --lh-tight:   1.25;
  --lh-normal:  1.7;

  /* ----- Spacing (8px base) ------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ----- Radii / shadow / border -------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(26, 58, 92, 0.06), 0 1px 1px rgba(26, 58, 92, 0.04);
  --shadow-2: 0 2px 8px rgba(26, 58, 92, 0.04), 0 12px 32px rgba(26, 58, 92, 0.06);
  --shadow-3: 0 12px 40px rgba(26, 58, 92, 0.14), 0 2px 6px rgba(26, 58, 92, 0.06);

  --border-hairline: 1px solid var(--aki-stone);

  /* ----- Motion ------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Base reset + type
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--aki-sumi);
  background: var(--aki-snow);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--aki-ink);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--font-sans); font-weight: 700; }

p { margin: 0 0 var(--sp-4); }

a { color: var(--aki-ink); text-decoration: none; }
a:hover { color: var(--aki-apple); }

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

/* ============================================================
   Utilities
   ============================================================ */
.aki-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.aki-container-narrow {
  max-width: 880px;
}

.aki-stack > * + * { margin-top: var(--sp-4); }
.aki-stack-lg > * + * { margin-top: var(--sp-6); }

.aki-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--aki-sumi-2);
  display: inline-block;
  margin-bottom: 6px;
  letter-spacing: 0;
}

.aki-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.aki-section-title h2 {
  font-size: var(--fs-h2);
}
.aki-section-title .aki-more {
  font-size: var(--fs-small);
  color: var(--aki-ink-soft);
  white-space: nowrap;
}
.aki-section-title .aki-more::after {
  content: " →";
}

/* ============================================================
   Buttons
   ============================================================ */
.aki-btn {
  --btn-bg: var(--aki-apple);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.aki-btn:hover  { background: var(--aki-apple-deep); color: #fff; }
.aki-btn:active { transform: translateY(1px); }

.aki-btn--ink      { --btn-bg: var(--aki-ink); }
.aki-btn--ink:hover { background: var(--aki-ink-deep); }

.aki-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--aki-ink);
  --btn-bd: var(--aki-ink);
}
.aki-btn--ghost:hover { background: var(--aki-ink); color: #fff; }

.aki-btn--lg { min-height: 56px; padding: 0 var(--sp-6); font-size: 17px; }
.aki-btn--block { width: 100%; }

/* ============================================================
   PR label (legal)
   ============================================================ */
.cta-pr-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  margin-left: var(--sp-2);
  color: var(--aki-sumi-2);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--aki-stone-2);
  border-radius: var(--r-xs);
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.cta-pr-label--on-dark {
  color: #fff;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
}

/* ============================================================
   Card primitive
   ============================================================ */
.aki-card {
  background: var(--aki-paper);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.aki-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* ============================================================
   Tag / chip
   ============================================================ */
.aki-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--aki-ink);
  background: var(--aki-moss-soft);
  border-radius: var(--r-xs);
}
.aki-tag--season-spring { background: #f6e3e8; color: #8a3a50; }
.aki-tag--season-summer { background: #f6d9ce; color: #8a2e1a; }
.aki-tag--season-autumn { background: #efdcc3; color: #72431a; }
.aki-tag--season-winter { background: #e1e8ec; color: #355066; }

/* ============================================================
   Placeholder imagery (for prototype only)
   — subtle gradient so we don't need real photos
   ============================================================ */
.aki-ph {
  position: relative;
  background: #e6e2d8;
  color: #fff;
  overflow: hidden;
  display: block;
}
.aki-ph > svg.aki-ph-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.aki-ph::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.aki-ph > span {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 2;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* aspect helpers */
.aki-ar-16x9 { aspect-ratio: 16 / 9; }
.aki-ar-4x3  { aspect-ratio: 4 / 3; }
.aki-ar-1x1  { aspect-ratio: 1 / 1; }
.aki-ar-3x4  { aspect-ratio: 3 / 4; }

/* ============================================================
   Scroll snap (mobile horizontal carousel)
   ============================================================ */
.aki-hscroll {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-3);
  margin: 0 calc(var(--sp-5) * -1);
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
.aki-hscroll::-webkit-scrollbar { display: none; }
.aki-hscroll > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* ============================================================
   Form input
   ============================================================ */
.aki-field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: 0 var(--sp-4);
  background: var(--aki-paper);
  border: 1px solid var(--aki-stone-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.aki-field:focus-within {
  border-color: var(--aki-ink);
  box-shadow: 0 0 0 3px rgba(26,58,92,0.1);
}
.aki-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  min-width: 0;
}
.aki-field-ico {
  color: var(--aki-ink-soft);
  flex: 0 0 auto;
}

/* ============================================================
   Hairline dividers
   ============================================================ */
.aki-rule {
  height: 1px;
  background: var(--aki-stone);
  border: 0;
  margin: var(--sp-6) 0;
}

/* ============================================================
   "地元民の一筆" callouts — hand-written-ish
   ============================================================ */
.aki-quote {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--aki-sumi-2);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--aki-apple);
  font-style: normal;
}




/* ============================================================
   PAGE CHROME (the wrapper around the showcase tabs)
   ============================================================ */
body {
  background: #f5f5f5;
}

/* ============================================================
   PAGE-LEVEL: the actual prototype
   ============================================================ */

/* ----- Top header (simplified, single search) ----- */
.site-header {
  background: var(--aki-paper);
  border-bottom: var(--border-hairline);
  position: sticky; top: 0; z-index: 20;
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--sp-4);
  gap: var(--sp-3);
}
.site-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.site-logo-mark {
  width: 28px; height: 28px;
  background: var(--aki-apple);
  color: #fff;
  display: grid; place-items: center;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
}
.site-logo-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--aki-ink);
  letter-spacing: -0.01em;
}
.site-logo-text small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--aki-sumi-2);
  letter-spacing: 0;
  line-height: 1;
  margin-top: 3px;
  text-transform: none;
}
.site-header-actions {
  display: flex; align-items: center; gap: 2px;
}
.site-iconbtn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--aki-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.site-iconbtn:hover { background: var(--aki-moss-soft); }
.site-iconbtn svg { width: 20px; height: 20px; }

/* Desktop nav */
.site-nav {
  display: none;
  gap: var(--sp-5);
}
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--aki-ink);
}
.site-nav a:hover { color: var(--aki-apple); }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .site-header-inner { padding: var(--sp-4) var(--sp-6); }
}

/* ----- HERO (default, full-bleed single photo) ----- */
.hero {
  position: relative;
  background: var(--aki-ink-deep);
  color: #fff;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,18,32,0.08) 0%, rgba(10,18,32,0.45) 60%, rgba(10,18,32,0.7) 100%);
  pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(1200px 400px at 20% 10%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(800px 400px at 80% 100%, rgba(0,0,0,0.25), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  padding: var(--sp-9) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 560px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(40px, 7.5vw, 76px);
  font-weight: 700;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.hero-sub {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  margin: 0 0 var(--sp-5);
  max-width: 28em;
  line-height: 1.6;
}

.hero-title small {
  display: block;
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.9;
  margin-top: var(--sp-2);
}
.hero-lede {
  max-width: 30em;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  margin: 0 0 var(--sp-6);
  line-height: 1.85;
}

/* Hero CTA bar — integrated search/booking */
.hero-cta {
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  color: var(--aki-sumi);
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 30px 60px rgba(10,20,40,0.25);
}
.hero-cta-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.hero-cta-label b {
  font-size: 13px;
  color: var(--aki-ink);
  font-weight: 700;
}
.hero-cta-label small {
  font-size: 11px;
  color: var(--aki-sumi-2);
}
.hero-cta-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--aki-stone);
  padding: 2px;
  border-radius: var(--r-sm);
}
.hero-cta-tabs button {
  background: transparent;
  border: 0;
  padding: 10px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--aki-ink-soft);
  cursor: pointer;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.hero-cta-tabs button[aria-selected="true"] {
  background: var(--aki-paper);
  color: var(--aki-ink);
  box-shadow: var(--shadow-1);
}
.hero-cta-tabs svg { width: 16px; height: 16px; }
.hero-cta-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.hero-cta-fields > :last-child { grid-column: 1 / -1; }
.hero-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--aki-apple);
  color: #fff;
  min-height: 52px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* hover時の translateY 廃止 — エッジ震動ループ回避のため、色変化のみ */
.hero-cta-btn:hover {
  background: var(--aki-apple-deep);
  color: #fff;
  box-shadow: 0 6px 20px rgba(184, 50, 42, 0.35);
}
.hero-cta-btn svg { width: 18px; height: 18px; }
.hero-cta-hint {
  font-size: 11px;
  color: var(--aki-sumi-2);
  text-align: center;
  margin-top: 2px;
}
.hero-mini-field {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--sp-3);
  background: var(--aki-paper);
  border: 1px solid var(--aki-stone);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--aki-sumi);
  min-height: 44px;
}
.hero-mini-field svg { width: 16px; height: 16px; color: var(--aki-ink-soft); flex: 0 0 auto; }
.hero-mini-field b { font-weight: 600; }
.hero-mini-field small { display: block; font-size: 10px; color: var(--aki-sumi-2); }

/* Hero seasonal chip (top-left overlay) */
.hero-season-chip {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: rgba(255,255,255,0.95);
  color: var(--aki-ink);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.hero-season-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--aki-spring);
  box-shadow: 0 0 0 2px rgba(216,142,162,0.25);
}
.hero-countdown {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(26,58,92,0.88);
  color: #fff;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  letter-spacing: 0.05em;
}
.hero-countdown b {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--aki-spring);
}

@media (min-width: 900px) {
  .hero-inner {
    padding: var(--sp-9) var(--sp-7) var(--sp-8);
    min-height: 620px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .hero-title { font-size: clamp(48px, 6vw, 76px); }
  .hero-cta {
    max-width: 720px;
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .hero-cta-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
  .hero-cta-fields { grid-template-columns: 1fr 1fr 1fr; }
  .hero-cta-fields > :last-child { grid-column: auto; }
  .hero-cta-btn-wrap {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    min-width: 180px;
  }
}

/* ----- Priority CTA section (travel prep) ----- */
.priority {
  background: var(--aki-paper);
  padding: var(--sp-6) 0;
  border-bottom: var(--border-hairline);
}
.priority-inner { padding: 0 var(--sp-5); max-width: 1120px; margin: 0 auto; }

.priority-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-4);
  gap: var(--sp-3);
}
.priority-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 12px;
}
.priority-head small {
  font-size: 12px;
  color: var(--aki-sumi-2);
}
.priority-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.priority-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--aki-paper);
  border: 1px solid var(--aki-stone);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.priority-card:hover {
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 10px 30px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.priority-card:hover {
  border-color: var(--aki-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  color: inherit;
}
.priority-card-icon {
  width: 48px; height: 48px;
  flex: 0 0 auto;
  background: #f7f7f7;
  color: var(--aki-ink);
  border: 0;
  border-radius: 50%;
  display: grid; place-items: center;
}
.priority-card-icon svg { width: 22px; height: 22px; stroke-width: 1.4; }
.priority-card-body { flex: 1; min-width: 0; }
.priority-card-body b {
  display: block;
  font-size: 15px;
  color: var(--aki-ink);
  font-weight: 700;
  margin-bottom: 2px;
}
.priority-card-body span {
  display: block;
  font-size: 12px;
  color: var(--aki-sumi-2);
}
.priority-card-arrow {
  flex: 0 0 auto;
  color: var(--aki-ink-soft);
}
.priority-card-arrow svg { width: 18px; height: 18px; }

@media (min-width: 700px) {
  .priority-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Seasonal feature ----- */
.seasonal {
  padding: var(--sp-7) 0 var(--sp-6);
}
.seasonal-inner { padding: 0 var(--sp-5); max-width: 1120px; margin: 0 auto; }
.seasonal-intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.seasonal-intro h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}
.seasonal-intro p {
  font-size: 14px;
  color: var(--aki-sumi-2);
  margin: 0;
  max-width: 42em;
}

.seasonal-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--aki-paper);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--sp-6);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 20px 60px rgba(26,58,92,0.08);
}
.seasonal-featured-media {
  aspect-ratio: 4 / 3;
  position: relative;
}
.seasonal-featured-media .aki-ph {
  width: 100%; height: 100%;
  font-size: 18px;
}
.seasonal-featured-tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.95);
  color: var(--aki-ink);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
  letter-spacing: 0;
  font-family: var(--font-sans);
  text-transform: none;
}
.seasonal-featured-body {
  padding: var(--sp-5);
}
.seasonal-featured-body h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--aki-ink);
  margin-bottom: var(--sp-3);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
@media (min-width: 800px) {
  .seasonal-featured-body h3 { font-size: 30px; }
}
.seasonal-featured-body p {
  font-size: 14px;
  color: var(--aki-sumi);
  margin-bottom: var(--sp-4);
}
.seasonal-featured-meta {
  display: flex;
  gap: var(--sp-4);
  font-size: 12px;
  color: var(--aki-sumi-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: var(--border-hairline);
}
.seasonal-featured-meta div { display: flex; align-items: center; gap: 4px; }
.seasonal-featured-meta svg { width: 14px; height: 14px; }
.seasonal-featured-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: auto;
}

@media (min-width: 800px) {
  .seasonal-featured { grid-template-columns: 1.2fr 1fr; }
  .seasonal-featured-media { aspect-ratio: auto; }
  .seasonal-featured-body { padding: var(--sp-6); display: flex; flex-direction: column; justify-content: center; }
  .seasonal-featured-body h3 { font-size: 28px; }
  .seasonal-featured-ctas { flex-direction: row; }
}

/* Seasonal mini-cards (horizontal scroll on mobile) */
.seasonal-list-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--aki-ink);
  margin-bottom: var(--sp-3);
}
.seasonal-mini {
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--aki-paper);
  border: 1px solid var(--aki-stone);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.seasonal-mini:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-2);
  color: inherit;
}
.seasonal-mini .aki-ph { height: 120px; font-size: 11px; }
.seasonal-mini-body { padding: var(--sp-3); flex: 1; }
.seasonal-mini-body b {
  display: block;
  font-size: 14px;
  color: var(--aki-ink);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seasonal-mini-body .meta {
  font-size: 11px;
  color: var(--aki-sumi-2);
  display: flex; align-items: center; gap: 6px;
}
.seasonal-mini-body .meta svg { width: 12px; height: 12px; }

@media (min-width: 900px) {
  .seasonal-list-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .seasonal-mini { width: auto; }
}

/* ----- Purpose nav (reduced to 5) ----- */
.purpose {
  padding: var(--sp-8) 0;
  background: #fafafa;
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}
.purpose-inner { padding: 0 var(--sp-5); max-width: 1120px; margin: 0 auto; }
.purpose h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--sp-6);
}
.purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.purpose-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  min-height: 128px;
  background: #fff;
  border: 1px solid var(--aki-stone);
  border-radius: 16px;
  text-decoration: none;
  color: var(--aki-ink);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.purpose-btn:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 10px 30px rgba(0,0,0,0.08);
}
.purpose-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--aki-ink);
  color: var(--aki-ink);
}
.purpose-btn-ico {
  width: 32px; height: 32px;
  background: transparent;
  color: var(--aki-ink);
  border-radius: 50%;
  display: grid; place-items: center;
}
.purpose-btn-ico svg { stroke-width: 1.3; }
.purpose-btn-ico svg { width: 22px; height: 22px; }
.purpose-btn b {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.purpose-btn span {
  font-size: 11px;
  color: var(--aki-sumi-2);
  line-height: 1.4;
}

@media (min-width: 700px) { .purpose-grid { grid-template-columns: repeat(5, 1fr); } }

/* ----- Area (map-like) ----- */
.area {
  padding: var(--sp-7) 0;
}
.area-inner { padding: 0 var(--sp-5); max-width: 1120px; margin: 0 auto; }
.area-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.area-head h2 { font-family: var(--font-sans); font-size: clamp(28px, 5vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: 2px; }
.area-head p { font-size: 14px; color: var(--aki-sumi-2); margin: 0; }

.area-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.area-map {
  background: #111;
  border-radius: 20px;
  padding: var(--sp-5);
  color: #fff;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.area-map::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(225,29,72,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(120,140,180,0.12) 0%, transparent 60%);
  pointer-events: none;
}
/* Stylized Aomori-ish shape */
.area-map svg { width: 100%; height: 100%; }
.area-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.area-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--aki-stone);
  border-radius: 0;
  text-decoration: none;
  color: var(--aki-ink);
  min-height: 64px;
  transition: padding-left var(--dur-base) var(--ease-out);
}
.area-pill:hover {
  padding-left: 12px;
  border-color: var(--aki-ink);
}
.area-pill:hover { border-color: var(--aki-ink); background: var(--aki-moss-soft); color: var(--aki-ink); }
.area-pill-num {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  background: var(--aki-apple);
  color: #fff;
  border: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
}
.area-pill-text { min-width: 0; }
.area-pill-text b { display: block; font-size: 14px; font-weight: 700; }
.area-pill-text span { display: block; font-size: 11px; color: var(--aki-sumi-2); }

@media (min-width: 800px) {
  .area-layout { grid-template-columns: 1.1fr 1fr; gap: var(--sp-6); align-items: stretch; }
  .area-list { grid-template-columns: 1fr; align-content: start; }
  .area-map { aspect-ratio: auto; }
}

/* ----- Editor / E-E-A-T ----- */
.editor {
  padding: var(--sp-7) 0;
  background: var(--aki-paper);
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}
.editor-inner {
  padding: 0 var(--sp-5);
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
}
.editor-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0c3a0 0%, #a36548 100%);
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  flex: 0 0 auto;
}
.editor-text h2 {
  font-size: 22px;
  margin-bottom: var(--sp-3);
}
.editor-text p {
  font-size: 14px;
  color: var(--aki-sumi);
  margin-bottom: var(--sp-4);
}
.editor-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: 12px;
  color: var(--aki-sumi-2);
  border-top: var(--border-hairline);
  padding-top: var(--sp-3);
}
.editor-stats b {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--aki-ink);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
}

@media (min-width: 800px) {
  .editor-inner { grid-template-columns: auto 1fr; gap: var(--sp-7); }
  .editor-avatar { width: 120px; height: 120px; font-size: 40px; }
}

/* ----- Articles (unified) ----- */
.articles {
  padding: var(--sp-7) 0;
}
.articles-inner { padding: 0 var(--sp-5); max-width: 1120px; margin: 0 auto; }
.articles-tabs {
  display: flex; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: var(--border-hairline);
}
.articles-tabs button {
  background: transparent;
  border: 0;
  padding: 10px 18px 12px 0;
  margin-right: 8px;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--aki-sumi-2);
  cursor: pointer;
  position: relative;
  letter-spacing: 0;
}
.articles-tabs button:hover { color: var(--aki-ink); }
.articles-tabs button[aria-selected="true"] { color: var(--aki-ink); }
.articles-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 18px; bottom: -1px;
  height: 1px;
  background: var(--aki-ink);
}
.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.article-card {
  display: flex;
  gap: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  text-decoration: none;
  color: inherit;
}
.article-card-media {
  border-radius: 14px;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out);
}
.article-card:hover .article-card-media { transform: scale(1.02); }
.article-card-media {
  width: 120px; flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}
.article-card-body {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
.article-card-body .tags {
  display: flex; gap: 4px; margin-bottom: 4px;
}
.article-card-body b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--aki-ink);
  line-height: 1.45;
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}
@media (min-width: 1000px) {
  .article-card-body b { font-size: 18px; }
}
.article-card-body .meta {
  font-size: 11px;
  color: var(--aki-sumi-2);
}

@media (min-width: 700px) {
  .articles-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}
@media (min-width: 1000px) {
  .articles-grid { grid-template-columns: repeat(3, 1fr); }
  .article-card { flex-direction: column; }
  .article-card-media { width: 100%; aspect-ratio: 16/10; }
  .article-card-body { padding: var(--sp-4); }
  .article-card-body b { font-size: 15px; -webkit-line-clamp: 3; }
}

/* ----- Footer ----- */
.site-footer {
  background: var(--aki-ink-deep);
  color: rgba(255,255,255,0.8);
  padding: var(--sp-7) 0 120px;
  font-size: 13px;
}
.site-footer-inner { padding: 0 var(--sp-5); max-width: 1120px; margin: 0 auto; }
.site-footer-brand {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: var(--sp-4);
}
.site-footer-brand b {
  font-family: var(--font-serif); font-weight: 500; font-size: 20px; color: #fff; letter-spacing: -0.005em;
}
.site-footer-brand span { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; }
.site-footer p { color: rgba(255,255,255,0.7); max-width: 36em; margin-bottom: var(--sp-5); }
.site-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.site-footer-cols h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--sp-3);
}
.site-footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer-cols a { color: rgba(255,255,255,0.85); font-size: 13px; }
.site-footer-cols a:hover { color: #fff; }

.site-footer-legal {
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

@media (min-width: 800px) {
  .site-footer { padding-bottom: var(--sp-8); }
  .site-footer-cols { grid-template-columns: repeat(4, 1fr); }
}

/* ----- Mobile bottom bar (from Cocoon) ----- */
.mobile-bottombar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--aki-paper);
  border-top: var(--border-hairline);
  display: flex;
  z-index: 30;
}
.mobile-bottombar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  color: var(--aki-sumi-2);
  text-decoration: none;
}
.mobile-bottombar a[aria-current="page"] { color: var(--aki-ink); }
.mobile-bottombar a svg { width: 20px; height: 20px; }

/* Countdown marquee inline */
.banner-countdown {
  display: none;
}
.banner-countdown b {
  font-family: var(--font-serif);
  color: var(--aki-spring);
  font-weight: 700;
}
.banner-countdown a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.variant {
  background: var(--aki-paper);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.variant-label {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--border-hairline);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.variant-label .num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--aki-apple);
  letter-spacing: 0.15em;
}
.variant-label h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--aki-ink);
}
.variant-label p {
  font-size: 12px;
  color: var(--aki-sumi-2);
  margin: 0;
  flex-basis: 100%;
}
.variant-preview {
  height: 520px;
  position: relative;
  overflow: hidden;
}

/* Variant A: full-bleed single photo (default) */
.variant-a { background: linear-gradient(160deg, #3d4f6a 0%, #162a42 100%); color: #fff; }
.variant-a::before {
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(216,142,162,0.55), transparent 60%),
    radial-gradient(500px 300px at 20% 90%, rgba(0,0,0,0.5), transparent 70%);
}
.variant-content {
  position: absolute; inset: 0;
  padding: var(--sp-7) var(--sp-6);
  display: flex; flex-direction: column; justify-content: flex-end;
  z-index: 2;
}
.variant-content h2 {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--sp-3);
  letter-spacing: 0.01em;
}
.variant-content p {
  color: rgba(255,255,255,0.9);
  max-width: 32em;
  margin-bottom: var(--sp-4);
  font-size: 14px;
}

/* Variant B: split screen */
.variant-b { display: flex; }
.variant-b-photo {
  flex: 1;
  background: linear-gradient(180deg, #d88ea2 0%, #8b3f52 100%);
  position: relative;
}
.variant-b-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(at 30% 30%, rgba(255,255,255,0.2), transparent 50%);
}
.variant-b-photo .label {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  background: rgba(255,255,255,0.95);
  color: var(--aki-ink);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
}
.variant-b-content {
  flex: 1;
  padding: var(--sp-7) var(--sp-6);
  background: var(--aki-snow);
  display: flex; flex-direction: column; justify-content: center;
}
.variant-b-content h2 {
  font-family: var(--font-serif);
  font-size: 48px;
  color: var(--aki-ink);
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.variant-b-content .eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--aki-apple);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  display: inline-block;
}

/* Variant C: editorial calendar */
.variant-c {
  background: var(--aki-snow);
  color: var(--aki-sumi);
  padding: var(--sp-7) var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.variant-c-date {
  text-align: center;
  color: var(--aki-ink);
}
.variant-c-date .year { font-size: 11px; letter-spacing: 0.3em; color: var(--aki-sumi-2); }
.variant-c-date .month {
  font-family: var(--font-serif);
  font-size: 120px;
  font-weight: 500;
  line-height: 0.85;
  color: var(--aki-apple);
  letter-spacing: -0.03em;
}
.variant-c-date .day {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--aki-sumi-2);
  text-transform: uppercase;
}
.variant-c-body h2 {
  font-family: var(--font-serif);
  font-size: 42px;
  color: var(--aki-ink);
  line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.variant-c-body p {
  font-size: 14px;
  color: var(--aki-sumi);
  max-width: 36em;
  margin-bottom: var(--sp-4);
}

.variant-btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Mini preview frame for mobile hero variants */
.variant-mobile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
  max-width: 1120px;
  margin: 0 auto;
}
.variant-mobile {
  background: var(--aki-paper);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  padding: var(--sp-4);
}
.variant-mobile h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--aki-ink);
  margin-bottom: var(--sp-3);
}
.variant-mobile .frame {
  width: 240px;
  height: 420px;
  margin: 0 auto;
  border-radius: 20px;
  border: 6px solid #1a1a1a;
  overflow: hidden;
  background: var(--aki-snow);
  position: relative;
}

/* ============================================================
   COMPONENT SKETCHES tab
   ============================================================ */
.sketch-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 700px) { .sketch-grid { grid-template-columns: 1fr 1fr; } }

.sketch {
  background: var(--aki-paper);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sketch-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--border-hairline);
}
.sketch-head b {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--aki-ink);
  margin-bottom: 2px;
}
.sketch-head small {
  font-size: 12px;
  color: var(--aki-sumi-2);
}
.sketch-body {
  padding: var(--sp-5);
  background: var(--aki-snow);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.sketch-row-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--aki-sumi-2);
  text-transform: uppercase;
  margin-bottom: -8px;
}

/* ============================================================
   TOKENS tab
   ============================================================ */
.tokens-wrap {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: var(--sp-6);
}
.token-block {
  background: var(--aki-paper);
  border: var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.token-block h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--aki-ink);
  margin-bottom: var(--sp-4);
  font-weight: 600;
}
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.color-chip {
  border: var(--border-hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.color-chip .swatch {
  height: 80px;
}
.color-chip .meta {
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
}
.color-chip .meta b { display: block; font-size: 13px; color: var(--aki-ink); margin-bottom: 2px; }
.color-chip .meta code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  color: var(--aki-sumi-2);
}

.type-row {
  padding: var(--sp-4) 0;
  border-top: var(--border-hairline);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
}
.type-row:first-child { border-top: 0; padding-top: 0; }
.type-row small {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--aki-sumi-2);
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.type-row .sample { color: var(--aki-ink); } /* keep */
iframe.device-mobile-inner { background: var(--aki-snow); display: block; }



/* Handwritten annotations (local voice) */
/* hand/decoration removed */


.variant-preview-bg { position: absolute; inset: 0; z-index: 0; }
.variant-preview .variant-content { position: relative; z-index: 1; }



/* ============================================================
   NEW SECTIONS — Model Courses / Calendar / Booking Compare
   ============================================================ */

/* --- MODEL COURSES ---------------------------------------- */
.courses { padding: var(--sp-8) 0; background: #fafafa; }
.courses-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }
.courses-head { margin-bottom: var(--sp-5); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.courses-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}
.courses-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.courses-filter {
  background: #fff; border: 1px solid var(--aki-stone);
  border-radius: 100px; padding: 8px 16px; font-size: 13px;
  font-weight: 500; color: var(--aki-ink); cursor: pointer;
  font-family: var(--font-sans);
}
.courses-filter[aria-selected="true"] {
  background: var(--aki-ink); color: #fff; border-color: var(--aki-ink);
}
.courses-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
}
@media (min-width: 720px) { .courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .courses-grid { grid-template-columns: repeat(3, 1fr); } }

.course-card {
  background: #fff; border: 1px solid var(--aki-stone);
  border-radius: 20px; overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.08);
}
.course-card-media {
  position: relative; aspect-ratio: 16 / 10;
  background: #e6e2d8; overflow: hidden;
}
.course-card-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.course-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,0.95); color: var(--aki-ink);
  padding: 5px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: 0;
}
.course-days {
  position: absolute; top: 14px; right: 14px;
  background: var(--aki-apple); color: #fff;
  padding: 5px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 700;
}
.course-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.course-card-body h3 {
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 700; color: var(--aki-ink);
  margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.3;
}
.course-card-body p {
  font-size: 13px; color: var(--aki-sumi-2);
  line-height: 1.55; margin: 0 0 14px; flex: 1;
}
.course-stops {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--aki-ink);
  margin-bottom: 14px;
}
.course-stops .stop {
  background: #f7f7f7;
  padding: 4px 10px; border-radius: 100px;
  font-weight: 500;
}
.course-stops .arr { color: var(--aki-stone-2); font-size: 14px; }
.course-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--aki-sumi-2);
  border-top: 1px solid var(--aki-stone);
  padding-top: 12px;
}
.course-card-footer .price b { color: var(--aki-ink); font-size: 15px; }

/* --- YEARLY CALENDAR -------------------------------------- */
.calendar { padding: var(--sp-8) 0; background: #fff; }
.calendar-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }
.calendar-head { margin-bottom: var(--sp-5); }
.calendar-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}
.calendar-head p { color: var(--aki-sumi-2); margin-top: 10px; max-width: 36em; line-height: 1.7; }
.calendar-grid {
  display: grid;
  grid-template-columns: 56px 1fr;
  background: #fff;
  border: 1px solid var(--aki-stone);
  border-radius: 20px;
  overflow: hidden;
}
.calendar-rail {
  background: #fafafa;
  border-right: 1px solid var(--aki-stone);
  display: flex; flex-direction: column;
}
.calendar-rail-cell {
  flex: 1; display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  color: var(--aki-sumi-2);
  border-bottom: 1px solid var(--aki-stone);
  letter-spacing: 0.02em;
}
.calendar-rail-cell:last-child { border-bottom: 0; }
.calendar-rail-cell.is-current { background: var(--aki-apple); color: #fff; }
.calendar-lanes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-height: 420px;
}
.calendar-col {
  border-right: 1px solid var(--aki-stone);
  position: relative;
}
.calendar-col:last-child { border-right: 0; }
.calendar-col.is-current { background: #fef3f5; }
.calendar-month-label {
  position: absolute; top: 8px; left: 0; right: 0;
  text-align: center; font-size: 10px; font-weight: 600;
  color: var(--aki-sumi-2); letter-spacing: 0.1em;
  pointer-events: none;
}
.calendar-bar {
  position: absolute;
  height: 34px;
  border-radius: 100px;
  display: flex; align-items: center;
  padding: 0 14px;
  font-size: 12px; font-weight: 600;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: transform var(--dur-fast) var(--ease-out);
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-bar:hover { transform: translateY(-1px) scale(1.01); z-index: 5; }
.calendar-bar .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.8);
  margin-right: 8px;
  flex: 0 0 auto;
}
.calendar-bar--spring { background: #e58fa1; color: #3a1a28; }
.calendar-bar--spring .dot { background: #3a1a28; opacity: 0.6; }
.calendar-bar--summer { background: #e85c2b; }
.calendar-bar--autumn { background: #c17a45; }
.calendar-bar--winter { background: #4a6582; }
.calendar-bar--food   { background: #8a6a3a; }
.calendar-bar--event  { background: #2a2a2a; }
.calendar-now {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: var(--aki-apple);
  z-index: 4;
}
.calendar-now::before {
  content: "今"; position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--aki-apple); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 100px;
}

/* Mobile: calendar becomes stacked list */
@media (max-width: 720px) {
  .calendar-grid { display: block; }
  .calendar-rail { display: none; }
  .calendar-lanes { grid-template-columns: 1fr; min-height: auto; padding: 8px; }
  .calendar-col { border: 0; padding: 8px 4px; border-bottom: 1px solid var(--aki-stone); }
  .calendar-col:last-child { border-bottom: 0; }
  .calendar-month-label {
    position: static; text-align: left;
    font-size: 12px; padding: 4px 8px; letter-spacing: 0.05em;
  }
  .calendar-bar {
    position: static !important;
    width: auto !important; left: auto !important;
    margin: 6px 4px; height: auto; padding: 8px 14px;
    white-space: normal;
  }
  .calendar-now { display: none; }
}

/* --- BOOKING COMPARE -------------------------------------- */
.compare { padding: var(--sp-8) 0; background: #fafafa; }
.compare-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }
.compare-head { margin-bottom: var(--sp-5); }
.compare-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}
.compare-head p { color: var(--aki-sumi-2); margin-top: 10px; max-width: 36em; line-height: 1.7; }

.compare-list { display: flex; flex-direction: column; gap: 14px; }

.compare-card {
  background: #fff;
  border: 1px solid var(--aki-stone);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px 1fr;
}
@media (max-width: 720px) { .compare-card { grid-template-columns: 1fr; } }

.compare-card-media {
  position: relative;
  aspect-ratio: 1/1;
  background: #e6e2d8; overflow: hidden;
}
@media (max-width: 720px) {
  .compare-card-media { aspect-ratio: 16/9; }
}
.compare-card-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare-card-fav {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
}
.compare-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.compare-card-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}
.compare-card-head h3 {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 700; color: var(--aki-ink);
  margin: 0; line-height: 1.3; letter-spacing: -0.005em;
}
.compare-card-sub {
  font-size: 12px; color: var(--aki-sumi-2);
  margin-top: 4px;
}
.compare-card-rating {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  flex: 0 0 auto;
}
.compare-card-rating svg { width: 14px; height: 14px; fill: #f5a623; }
.compare-card-tags { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.compare-card-tags span {
  background: #f3f3f3; color: var(--aki-ink);
  padding: 3px 9px; border-radius: 100px; font-weight: 500;
}
.compare-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--aki-stone);
  padding-top: 12px;
  margin-top: 4px;
}
.compare-price {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: inherit;
  padding: 10px 12px; border-radius: 12px;
  transition: background var(--dur-base) var(--ease-out);
}
.compare-price:hover { background: #f7f7f7; }
.compare-price.is-best {
  background: #fef3f5;
  outline: 2px solid var(--aki-apple);
  outline-offset: -2px;
}
.compare-price small {
  font-size: 10px; font-weight: 600;
  color: var(--aki-sumi-2); letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
}
.compare-price small .pr {
  background: #eee; color: var(--aki-sumi-2);
  padding: 1px 6px; border-radius: 100px;
  font-size: 9px; text-transform: none; letter-spacing: 0;
}
.compare-price b {
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 700; color: var(--aki-ink);
  letter-spacing: -0.01em;
}
.compare-price.is-best b { color: var(--aki-apple); }
.compare-price span.per { font-size: 11px; color: var(--aki-sumi-2); font-weight: 400; }

/* Update site nav: add new links */

/* ================================================================
   EXPERIMENTS — toggled via body classes on the INSIDE of iframe
   .exp-a  → 予約導線の短縮（spot直結CTA）
   .exp-b  → 現在地ベースの即時レコメンド
   ================================================================ */

/* --- Hidden by default --- */
.exp-only { display: none !important; }
.exp-a .exp-only.exp-a-only { display: revert !important; }
.exp-b .exp-only.exp-b-only { display: revert !important; }

/* --- Elements to REMOVE/HIDE when experiment is on --- */
.exp-a .exp-a-hide { display: none !important; }
.exp-b .exp-b-hide { display: none !important; }

/* ---------------- Experiment A: 予約導線の短縮 ---------------- */

/* Inline "予約" chip that appears on every spot-level card */
.book-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--aki-apple);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  padding: 4px 9px 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.05em;
  border: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(184,50,42,0.2);
  transition: transform var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.book-chip svg { width: 10px; height: 10px; fill: currentColor; }
.book-chip:hover { transform: translateY(-1px); }
.book-chip .pr-tiny {
  background: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.95);
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Transform seasonal featured card to include immediate booking row */
.exp-a .seasonal-featured-body::after {
  content: "";
  display: block;
}
.exp-a-booking-row {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: #fef7f3;
  border: 1px solid #f2d7c8;
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: center;
}
.exp-a-booking-row > div { min-width: 0; }
.exp-a-booking-row small {
  display: block;
  font-size: 10px;
  color: var(--aki-sumi-2);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
.exp-a-booking-row .price-line {
  font-family: var(--font-sans);
}
.exp-a-booking-row .price-line b {
  font-size: 20px;
  font-weight: 700;
  color: var(--aki-apple);
  letter-spacing: -0.01em;
}
.exp-a-booking-row .price-line span {
  font-size: 11px;
  color: var(--aki-sumi-2);
  margin-left: 4px;
}
.exp-a-booking-row .avail-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #b8322a;
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: 0.03em;
}
.exp-a-booking-row .avail-tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #b8322a;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.exp-a-booking-row .book-btn {
  background: var(--aki-apple);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Seasonal mini-card gets an inline book button */
.exp-a .seasonal-mini { position: relative; }
.seasonal-mini-booking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: #fef7f3;
  border-top: 1px solid var(--aki-paper-warm);
  font-family: var(--font-sans);
}
.seasonal-mini-booking .price {
  font-size: 13px;
  font-weight: 700;
  color: var(--aki-apple);
}
.seasonal-mini-booking .price small {
  font-size: 10px;
  color: var(--aki-sumi-2);
  font-weight: 400;
  margin-right: 2px;
}

/* Course cards — book chip overlay */
.exp-a .course-card { position: relative; }
.course-book-overlay {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
}

/* ---------------- Experiment B: 現在地ベースの即時レコメンド ---------------- */

/* Swap hero for location-aware panel */
.exp-b .hero-inner { display: none; }
.exp-b .hero-countdown { display: none; }

.geo-hero {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: linear-gradient(180deg, rgba(10,18,32,0) 0%, rgba(10,18,32,0.5) 35%, rgba(10,18,32,0.85) 100%);
  color: #fff;
  z-index: 2;
}
.geo-loc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 12px 6px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-3);
}
.geo-loc-badge svg { width: 12px; height: 12px; fill: currentColor; }
.geo-loc-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
  animation: pulse 1.8s ease-in-out infinite;
}

.geo-hero h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: var(--sp-4);
  text-wrap: pretty;
}
.geo-hero h1 em {
  font-style: normal;
  color: #ffc9b8;
  font-weight: 600;
}

.geo-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.geo-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.95);
  border-radius: var(--r-md);
  color: var(--aki-ink);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.geo-card:hover { transform: translateY(-1px); background: #fff; }
.geo-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--aki-paper-warm);
  display: flex; align-items: center; justify-content: center;
  color: var(--aki-apple);
  flex-shrink: 0;
}
.geo-card-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.geo-card-body { min-width: 0; }
.geo-card-body b {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--aki-ink);
  line-height: 1.25;
  margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.geo-card-body small {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--aki-sumi-2);
  font-family: var(--font-sans);
  align-items: center;
}
.geo-card-body small .sep { color: var(--aki-stone); }
.geo-card-body small .live {
  color: var(--aki-apple);
  font-weight: 600;
}
.geo-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--aki-apple);
  color: #fff;
  flex-shrink: 0;
}
.geo-card-cta svg { width: 12px; height: 12px; fill: currentColor; }

.geo-hero-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}
.geo-hero-actions a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* desktop refinements for exp-b */
@media (min-width: 800px) {
  .geo-hero {
    max-width: 520px;
    inset: auto auto var(--sp-6) var(--sp-6);
    padding: var(--sp-5);
    background: rgba(10,18,32,0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .geo-hero h1 { font-size: 30px; }
}
@media (max-width: 680px) {
  .exp-toggle-controls { grid-template-columns: 1fr; }
}
.exp-hypo-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--aki-apple);
  text-transform: uppercase;
  flex-shrink: 0;
}
.exp-hypo-text {
  font-size: 12px;
  color: var(--aki-ink);
  line-height: 1.6;
}

/* Desktop side-by-side compare */
.desktop-compare {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}



/* ============================================================
   Real photo overlays (Phase 2B)
   ============================================================ */
.aki-ph.has-img {
  /* placeholder gradient を上書きしない。画像の下に残してフォールバック扱い */
}
.aki-ph.has-img::after { opacity: 0; }
.aki-ph .aki-ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.aki-ph.has-img .aki-ph-label {
  display: none;
}

/* hero-media / course-card-media / compare-card-media / article-card-media / seasonal-featured-media */
.article-card-media { position: relative; } /* 子のabsolute imgがviewportに逃げるのを防ぐ */
.hero-media .aki-media-img,
.course-card-media .aki-media-img,
.compare-card-media .aki-media-img,
.article-card-media .aki-media-img,
.seasonal-featured-media .aki-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* aki-media-img が入った媒介ではプレースホルダ stripe を隠す */
.hero-media:has(.aki-media-img)::after,
.hero-media.has-img::after { opacity: 0; }
/* Cocoon親テーマから継承されうる img hover 効果を無効化（ちらつき防止） */
.hero-media,
.hero-media * {
  transition: none !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none !important;
}
/* ヒーロー領域の backdrop-filter は GPU合成が hover 判定と競合する報告があるため
   上部要素のみ無効化（見た目は半透明背景で代替） */
.hero .hero-eyebrow {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.18);
}

/* ============================================================
   Area photos (Phase 2B — 5つの顔 section)
   ============================================================ */
.area-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  max-width: 1120px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .area-photos { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  /* 5枚なので1枚目はfull width に */
  .area-photos > :nth-child(1) { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .area-photos {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    gap: var(--sp-5);
  }
  /* 秋田の5つの顔: 上段2大 (秋田市・角館田沢湖) + 下段3中 (乳頭・横手・男鹿) */
  .area-photos > :nth-child(1) { grid-column: span 3; grid-row: 1; }
  .area-photos > :nth-child(2) { grid-column: span 3; grid-row: 1; }
  .area-photos > :nth-child(3) { grid-column: span 2; grid-row: 2; }
  .area-photos > :nth-child(4) { grid-column: span 2; grid-row: 2; }
  .area-photos > :nth-child(5) { grid-column: span 2; grid-row: 2; }
}
.area-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  background: var(--aki-ink-deep);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
  color: #fff;
}
.area-photo:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: #fff; }
.area-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.area-photo:hover .area-photo-img { transform: scale(1.04); }
.area-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 42, 68, 0.86) 0%, rgba(18, 42, 68, 0.2) 40%, transparent 70%);
  z-index: 1;
}
.area-photo-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  z-index: 2;
}
.area-photo-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--aki-apple);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.area-photo-text b {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0.02em;
}
.area-photo-text small {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
  line-height: 1.5;
}

/* ============================================================
   Hover flicker 防止 — transform系ホバーを全面無効化 (2026-04-20)
   Reason: エッジで translateY/scale が hover判定と競合し、60fps
   震動ループ（点滅）を引き起こす。box-shadow/borderで浮遊感を代替。
   ============================================================ */
.aki-card:hover,
.priority-card:hover,
.seasonal-mini:hover,
.purpose-btn:hover,
.course-card:hover,
.calendar-bar:hover,
.book-chip:hover,
.geo-card:hover,
.area-photo:hover,
.article-card:hover,
.article-card:hover .article-card-media,
.area-photo:hover .area-photo-img,
.hero-cta-btn:hover,
.hero-cta-tabs button:hover {
  transform: none !important;
}
/* 浮き上がり演出は box-shadow で代替 */
.aki-card:hover,
.priority-card:hover,
.seasonal-mini:hover,
.purpose-btn:hover,
.course-card:hover,
.area-photo:hover {
  box-shadow: 0 14px 36px rgba(26, 58, 92, 0.18) !important;
}
/* カード系は border-color のみの変化でインタラクション示唆 */
.priority-card:hover { border-color: var(--aki-ink) !important; }
.purpose-btn:hover { border-color: var(--aki-ink) !important; }
/* 画像カードの内部zoom (article-card / area-photo) も廃止 */
.article-card-media,
.area-photo-img {
  transition: none !important;
}

/* ============================================================
   Archive/Search/404 用の compact hero (2026-04-21)
   Cocoonのコンテナから飛び出して full-width 表示。SVGスプライト不要。
   ============================================================ */
.hero--compact {
  min-height: 280px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: none;
  display: flex;
}
.hero--compact .hero-inner {
  min-height: 280px;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  justify-content: center;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}
.hero--compact .hero-title {
  font-size: clamp(28px, 4.5vw, 44px);
  margin-bottom: 10px;
}
.hero--compact .hero-sub {
  margin-bottom: 0;
  max-width: 40em;
}
@media (min-width: 900px) {
  .hero--compact {
    min-height: 320px;
  }
  .hero--compact .hero-inner {
    min-height: 320px;
    padding: var(--sp-8) var(--sp-7) var(--sp-7);
  }
}
/* Cocoonの通常アーカイブ表示と接続するため、上マージンを少しだけ追加 */
body.archive .hero--compact,
body.search .hero--compact,
body.error404 .hero--compact {
  margin-bottom: var(--sp-6);
}

/* 単一記事ページ: 本文冒頭に出力するアイキャッチ figure (functions-additions.php 参照)
   - <img> で素直に出すことでアスペクト比そのまま、クロップ無しで全体表示 */
.aki-article-eyecatch {
  margin: 0 0 var(--sp-5) 0;
  padding: 0;
  line-height: 0;
}
.aki-article-eyecatch-img,
.aki-article-eyecatch img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
  object-fit: contain;
  /* WP Smart Crop 等のプラグインが opacity:0 で不可視化するのを防御 */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Cocoonのヘッダー(ロゴ+白帯)を archive/search/404 で非表示
   - Redesign のヒーローが視覚的なブランド役割を担うので Cocoon の既定ヘッダーと重複する */
body.archive #header-container #header,
body.search #header-container #header,
body.error404 #header-container #header {
  display: none !important;
}
/* archive/search/404 のナビは薄いボーダーのみで Redesign ヒーローに自然接続 */
body.archive #navi,
body.search #navi,
body.error404 #navi {
  border-bottom: 1px solid var(--aki-stone);
  background: var(--aki-paper);
  box-shadow: none;
}

/* archive/search/404 のメニューリンクは Cocoon の白文字前提デザインを上書き */
body.archive #navi a,
body.search #navi a,
body.error404 #navi a,
body.archive #navi .item-label,
body.search #navi .item-label,
body.error404 #navi .item-label {
  color: var(--aki-ink) !important;
}
body.archive #navi a:hover,
body.search #navi a:hover,
body.error404 #navi a:hover {
  color: var(--aki-apple) !important;
}
body.archive #navi .current-menu-item > a,
body.search #navi .current-menu-item > a,
body.error404 #navi .current-menu-item > a {
  color: var(--aki-apple) !important;
  font-weight: 700;
}

/* ============================================================
   カテゴリLPキャッチフレーズ/概要の可読性修正 (2026-04-21)
   Cocoonの .article h2 既定背景(light blue #eaf4fc)が適用されて
   白文字が見えなくなる問題の解消
   ============================================================ */
.article .category-lp-catchphrase,
.category-lp-catchphrase {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  color: #fff !important;
}
.article .category-section-title,
.category-section-title {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}