/* みっけて庄原
 *
 * ひだまり（2026-10-15 から）: 明るいクリームの地に白い紙、こげ茶の文字。色は役割で決める（:root の説明。2026-10-17）。細い線とやわらかな影、明朝の見出し。
 * 近未来の部品（ガラス・HUD の英字・周回するアイコン・ぼかしの画面切り替え）と、流れる水彩の写真の壁は残す。
 * 色は :root だけで決める（2026-10-17 に「棚田の夕焼け」「ひだまり」の上書きの節をベースへ畳み、直接書いた色を var() にした。点検レポート 2026-10-17 の 4-E）。
 * 本文は丸ゴシック（Zen Maru Gothic）、英字・数字は M PLUS 1 Code（サーバーに置いたもの。fonts.css）。見出しは --serif の明朝。
 * 中身は地元の水彩イラストとチラシ。動きは transform / opacity 中心で、prefers-reduced-motion のときは止める（いちばん下）。
 */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  /* ---- 色はここだけで決める（配色「ひだまり」2026-10-15 ユーザーが選んだ案A。2026-10-17 に上書きの節を畳んで1本にし、色の役割を決めた） ----
     役割（2026-10-17 ユーザー決定。1つの色に3つ以上の意味を持たせない）:
       テラコッタ #b9542f ＝ 押せるもの（ボタン・リンク・ページ送りのいま）と「今日」「明日」の札
       からし #f2b33d ＝ 選んでいる・案内（選択中の地・ホバー・「載せる」の案内・今週末の棚の地・手順の番号）
       緑 #4f7f2c ＝ 分類（ジャンルの札・地図の印・そろった欄のチェック）
       空色 #3d8fbf ＝ 日付と時間の情報（定期の集まり・土曜の札・「開催中」「あと2〜7日」「○日まで」・日付の文字）
       藤色 #6c58b2 ＝ AI（読み取りボタン・「✦AI」の札・自動チェックの「！」）
       日曜だけ赤 #b8483c。茶は6段（文字 → 面）。暗い色の面は作らない。細い線とやわらかな影 */
  --bg: #fffaf0;            /* 地: 明るいクリーム（2026-10-15 に生成り #f5eee6 から） */
  --paper: #ffffff;         /* 紙 */
  --paper-2: #fffcf5;
  --tint: #fff0d4;          /* うすい地（code・絵の置き場） */
  --tint-rice: #fff1c9;     /* からし色のうすい地（お知らせ・AI のひとことの札） */
  --surface: rgba(255, 255, 255, .9);

  /* 茶の6段（点検レポート 2026-10-17 の提案） */
  --brown-1: #3a2a20;       /* 文字 */
  --brown-2: #5a4636;       /* やわらかい文字 */
  --brown-3: #7a6656;       /* 枠線・8日より先の「あと何日」の札 */
  --brown-4: #a8978a;       /* 補助（まだ使っていない。薄い文字 --text-dim は #6d5a4b のまま） */
  --brown-5: #d9cbbd;       /* 罫線（まだ使っていない。線は --line / --line-strong の半透明のまま） */
  --brown-6: #f3ede4;       /* 面（まだ使っていない） */
  --ink: var(--brown-1);    /* こげ茶（文字・濃い部品） */
  --text: var(--ink);
  --text-soft: var(--brown-2);
  --text-dim: #6d5a4b;      /* 薄い文字（地の上でコントラスト 4.5 以上。#fffaf0 の上で 6.3） */
  --frame: var(--brown-3);  /* 枠線・罫線（濃い） */
  --line: rgba(58, 42, 32, .11);        /* 細い線 */
  --line-strong: rgba(58, 42, 32, .22); /* 少し濃い線 */
  --drop: rgba(110, 60, 30, 0); /* ずらし影はなし（古い指定が残っていても出ない） */

  /* ロゴの3色と、その周り */
  --c-forest: #b9542f;      /* テラコッタ＝ロゴの M（押しボタン・選択中・「あと何日」の札。白い文字が 4.8 で読める濃さ。名前は昔の名残） */
  --c-forest-2: #f4996a;    /* テラコッタの明るい側（グラデーションの始まり） */
  --c-forest-dark: #9e4423; /* 押したとき・ホバーの濃いテラコッタ */
  --c-accent: var(--c-forest); /* 赤茶 #b04a24 はテラコッタに統合（2026-10-17）。リンクなど押せるものの色 */
  --c-indigo: var(--c-sky-ink); /* 日付と時間の文字（昔の紺の名残の名前。空色の濃い側） */
  --c-rice: #f2b33d;        /* からし色＝ロゴのきらめき */
  --c-rice-light: #ffd66b;  /* からし色の明るい側（グラデーション） */
  --c-rice-dark: #e9a21f;   /* からし色の濃い側（グラデーション） */
  --c-green: #4f7f2c;       /* 草（分類） */
  --c-leaf: #a9c77e;        /* 若葉＝ロゴの虫めがねの中の緑 */
  --c-sky: #3d8fbf;         /* 空色＝日付と時間の情報。線・印・うすい地のもと（白い文字をのせると 3.6 なので文字には使わない） */
  --c-sky-ink: #2c6a8f;     /* 空色の濃い側: 文字と、白い文字をのせる地（どちらも 5.9） */
  --sky-bg: #e6f1f7;        /* 空色のうすい地（定期の集まりの入口・次の回） */
  --c-peach: #d48a7a;       /* 夕焼けの桃（トップの写真の壁の光だけに残す） */
  --c-ai: #6c58b2;          /* 藤色＝AI（読み取りボタン・「✦AI」の札・自動チェックの「！」。白い文字で 5.7） */
  --c-ai-dark: #5c4aa0;     /* 押したとき・うすい地の上の文字 */
  --ai-line: #b3a6dd;
  --ai-bg: #f1eefa;         /* AI のうすい地 */
  --c-red: #b8483c;
  --c-danger: #c0453a;      /* 消す・危ないボタン */
  --c-sun: var(--c-red);    /* 日曜（カレンダー・日付の札）。2026-10-17 に #c8394a から。曜日専用の赤 */
  --c-sat: var(--c-sky-ink); /* 土曜は空色（日付の情報）。2026-10-17 に #2f6aa8 から */
  --on-ink: #f4d27f;        /* こげ茶の地の上の黄色い文字 */

  /* 選んでいる所・ホバー・案内（からし色の系統） */
  --hover-bg: #fff3d6;
  --on-bg: #ffe08f;
  --on-text: #6b4300;
  --on-line: #f2c870;
  --note-bg: var(--tint-rice);  /* 注意書きの地（投稿日・チラシのコツ）。案内の色にそろえた */
  --note-line: var(--on-line);

  /* 足りない項目・エラー（桃色の系統） */
  --need-bg: #fdecea;  --need-line: #e3a59b;  --need-ink: #8c2a1f;   /* 「まだ空いています」・入力の問題 */
  --err-bg: #fde8e6;   --err-line: #eba3a0;   --err-ink: #7a1f1f;    /* 失敗のお知らせ */

  --grad-retro: linear-gradient(90deg, var(--c-rice), #ec8f3e 38%, #d4643a 66%, #8fb36b);
  --grad-ai: linear-gradient(115deg, #d9d0f2, #cfe4f2);
  --grad-sticker: linear-gradient(180deg, #8573c8 0%, var(--c-ai) 55%, var(--c-ai-dark) 100%); /* AI 読み取りボタンの藤色 */
  --soft-shadow: 0 1px 2px rgba(150, 90, 20, .06), 0 14px 32px -20px rgba(150, 90, 20, .32);

  --radius: 8px;
  --shadow: 0 1px 0 rgba(52, 64, 47, .04), 0 16px 34px -20px rgba(96, 84, 52, .45);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --mono: "M PLUS 1 Code", "Zen Maru Gothic", ui-monospace, "SF Mono", Consolas, monospace;
  --sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  /* 見出しの明朝。Shippori Mincho B1 をサーバーに置くまでは、端末の明朝（游明朝・ヒラギノ明朝・Noto Serif）で出る */
  --serif: "Shippori Mincho B1", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --gutter: clamp(12px, 2vw, 28px); /* 左右の余白 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --header-h: 64px;
  color-scheme: light;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--c-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-forest-dark); }
h1, h2, h3 { line-height: 1.35; font-feature-settings: "palt"; letter-spacing: .02em; }
code { font-family: var(--mono); font-size: .88em; background: var(--tint); padding: 0 .35em; border-radius: 5px; }
small, .muted { color: var(--text-soft); }
.text-danger { color: var(--c-red); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
::selection { background: rgba(231, 162, 92, .4); color: var(--ink); }
:focus-visible { outline: 2.5px solid var(--c-forest); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 300; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 5px; }

/* ---------- 背景（生成りの紙・粒子・方眼・ゆっくり動く色） ---------- */

.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #fffdf7, var(--bg) 40%, #fff3df); }
.bg-fx::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .25; mix-blend-mode: multiply; }
.orb { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.orb-1 { left: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(242, 179, 61, .24), transparent 62%); animation: drift-1 38s ease-in-out infinite alternate; }
.orb-2 { right: -30vmax; top: 10vh; background: radial-gradient(circle, rgba(212, 100, 58, .12), transparent 62%); animation: drift-2 46s ease-in-out infinite alternate; }
.orb-3 { left: 10vw; bottom: -45vmax; background: radial-gradient(circle, rgba(143, 179, 107, .2), transparent 62%); animation: drift-3 52s ease-in-out infinite alternate; }
@keyframes drift-1 { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes drift-2 { to { transform: translate(-16vmax, 20vmax) scale(.9); } }
@keyframes drift-3 { to { transform: translate(14vmax, -16vmax) scale(1.1); } }
.bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(58, 42, 32, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 42, 32, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
}

/* ---------- ページの切り替え（ぼんやり溶けるように） ---------- */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .3s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease-out); }
.site-header { view-transition-name: site-header; }
@keyframes vt-out { to { opacity: 0; filter: blur(14px) sepia(.4); transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; filter: blur(16px) sepia(.4); transform: scale(1.02); } }

/* View Transitions のないブラウザ用（app.js が離れるときに is-leaving を付ける） */
html.no-vt body { animation: page-in .55s var(--ease-out) both; }
html.no-vt.is-leaving body { opacity: 0; filter: blur(10px); transform: scale(.99); transition: opacity .22s, filter .22s, transform .22s; }
@keyframes page-in { from { opacity: 0; filter: blur(12px); } }

/* ---------- オープニング ---------- */

.intro { display: none; }
html.show-intro .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 400;
  background: var(--grain), var(--bg);
  animation: intro-out .75s var(--ease) 2.15s forwards;
}
html.show-intro.intro-skip .intro { animation-delay: 0s; animation-duration: .35s; }
@keyframes intro-out { to { opacity: 0; visibility: hidden; filter: blur(12px); transform: scale(1.05); } }
.intro-tiles {
  position: absolute; inset: -4vmax;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1.6vmax;
  transform: perspective(1200px) rotateX(16deg) rotateZ(-6deg) scale(1.08);
  animation: intro-tiles 2.4s var(--ease) both;
}
@keyframes intro-tiles { 0% { opacity: 1; } 70% { opacity: .7; } 100% { opacity: .35; transform: perspective(1200px) rotateX(16deg) rotateZ(-6deg) scale(1.25); } }
.intro-tile { overflow: hidden; border: .5vmax solid var(--paper); border-bottom-width: 1.6vmax; border-radius: .5vmax; opacity: 0; background: var(--paper); box-shadow: 0 18px 40px -16px rgba(96, 84, 52, .55); animation: tile-in .7s var(--ease-out) calc(var(--i) * 70ms + .1s) both; }
.intro-tile:nth-child(odd) { rotate: -2deg; }
.intro-tile:nth-child(3n) { rotate: 2.5deg; }
.intro-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.2) saturate(1.05); }
@keyframes tile-in { from { opacity: 0; transform: scale(.6) translateY(30px); filter: blur(10px) brightness(1.6); } to { opacity: 1; transform: none; filter: none; } }
.intro-core { position: relative; z-index: 1; text-align: center; padding: 36px 40px; border-radius: 8px; background: rgba(255, 252, 244, .93); border: 2px solid var(--frame); box-shadow: 8px 8px 0 var(--drop), 0 30px 80px rgba(96, 84, 52, .35); animation: core-in .8s var(--ease-out) .35s both; }
@keyframes core-in { from { opacity: 0; transform: scale(.85); filter: blur(10px); } }
/* オープニングの看板: ミッケテ庄原の看板風ロゴ（山の M・はさ掛け・のぞく目・虫めがね・棚田の bara。assets/img/brand/logo-retro.webp。元は img/logo/mikkete/R11）＋副題（2026-10-15） */
.intro-logo { display: block; width: min(540px, 72vw); height: auto; margin: 0 auto 12px; animation: sign-in .9s var(--ease-out) .45s both; }
@keyframes sign-in { from { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(4px); } }
.intro-jp { margin: 6px auto 16px; max-width: 24em; font-weight: 900; font-size: clamp(.95rem, 3.4vw, 1.2rem); letter-spacing: .08em; text-wrap: balance; text-shadow: 2px 2px 0 #efd27c; animation: track-in 1.2s var(--ease-out) .7s both; }
@keyframes track-in { from { opacity: 0; letter-spacing: .8em; filter: blur(6px); } }
.intro-bar { display: block; height: 8px; width: 220px; margin: 0 auto; border-radius: 6px; border: 1.5px solid var(--frame); background: var(--paper); overflow: hidden; }
.intro-bar span { display: block; height: 100%; background: var(--grad-retro); transform-origin: left; animation: bar-fill 1.6s var(--ease) .45s both; }
@keyframes bar-fill { from { transform: scaleX(0); } }

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--grad-retro); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.header-scan { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; overflow: hidden; z-index: 1; }
.header-scan::before { content: ""; position: absolute; top: 0; left: 0; width: 25%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); animation: scan-x 5s var(--ease) infinite; }
@keyframes scan-x { from { transform: translateX(-100%); } to { transform: translateX(400%); } }

/* ロゴ（2026-10-15 夕方）: 案 L5a「Mikkete-shobara」（layout.php の logo_svg() で SVG を埋め込み。M＝里山・のぞく目・虫めがねの中に公民館）。
 * 日本語の名前はロゴの下の真ん中（.logo-jp。HTML の文字なので本文と同じ丸ゴシック）。大きさは --logo-h だけで決まる */
.logo { --logo-h: 56px; display: flex; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; margin-right: auto; }
.logo:hover { color: var(--ink); }
.logo-lockup { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--logo-h) * .05); flex: none; height: var(--logo-h); }
.logo-svg { display: block; height: calc(var(--logo-h) * .66); width: auto; aspect-ratio: 1282 / 199; overflow: visible; }
.logo-jp { font-family: var(--sans); font-weight: 800; font-size: calc(var(--logo-h) * .25); line-height: 1; letter-spacing: .32em; margin-right: -.32em; color: var(--c-forest); white-space: nowrap; }
/* ホバーで、のぞく目が虫めがねの方を見て、きらめきが光り、虫めがねが少し傾く（みーつけた） */
.logo-svg .lg-pupils, .logo-svg .lg-spark, .logo-svg .lg-lens { transform-box: fill-box; transition: transform .45s var(--ease-out); }
.logo-svg .lg-spark { transform-origin: 50% 100%; }
.logo-svg .lg-lens { transform-origin: 45% 40%; }
.logo:hover .lg-pupils { transform: translate(7px, -3px); }
.logo:hover .lg-spark { animation: logo-spark .9s var(--ease) both; }
.logo:hover .lg-lens { transform: rotate(-10deg); }
@keyframes logo-spark { 40% { transform: scale(1.35); } }
@keyframes ang { to { --ang: 360deg; } }

/* 昔のデジタル時計 */
/* ヘッダーの日付・時計は 2026-10-17 ユーザー指示「なくていい」で外した */
/* 「このサイトって何なの？」のシール（layout.php の what_sticker）。押すとへこむ。影は「浮きすぎ」で 2026-10-17 になくした */
.what-sticker { display: inline-block; flex: none; line-height: 0; rotate: -2deg; transition: transform .25s var(--ease); }
.what-sticker img { display: block; height: 40px; width: auto; }
.what-sticker:hover { transform: rotate(2deg); }
.what-sticker:active { transform: translateY(1px); }
.what-sticker-hero { display: none; }
@media (max-width: 960px) {
  .what-sticker-header { display: none; }
  .what-sticker-hero { display: inline-block; margin-top: 10px; }
  .what-sticker-hero img { height: 34px; }
}

.global-nav { display: flex; align-items: center; gap: 4px; flex: none; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); text-decoration: none; padding: 8px 14px; border-radius: 6px; font-size: .93rem; font-weight: 800; white-space: nowrap; transition: color .25s, background .25s; }
.nav-link .ico { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--grad-retro); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link:hover .ico { transform: translateY(-2px) rotate(-8deg); }
.nav-link[aria-current="page"] { color: var(--ink); background: rgba(242, 179, 61, .18); }
.nav-post, .nav-post[aria-current="page"] { color: #fff; background: var(--c-forest); margin-left: 6px; border: 0; box-shadow: none; transition: background-position .5s var(--ease), transform .2s var(--ease), box-shadow .2s; }
.nav-post::after { display: none; }
.nav-post:hover { color: #fff; background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(110, 60, 30, .6); background: var(--c-forest-dark); }
.nav-post:hover .ico { transform: rotate(90deg); }

.test-banner { position: relative; z-index: 40; margin-top: 4px; background: repeating-linear-gradient(135deg, #ffe3a3 0 14px, #fff0c8 14px 28px); border-bottom: 1.5px solid var(--frame); color: #5a3d00; font-size: .84rem; font-weight: 800; text-align: center; padding: 6px 16px; }

main { padding-top: 30px; padding-bottom: 56px; min-height: 60vh; }
main:not(.wrap) { padding-top: 0; }

/* ---------- フッター（秋桜の空。暗くせず、紙の色で締める） ---------- */

.site-footer { position: relative; overflow: hidden; padding: 60px 0 40px; font-size: .88rem; color: var(--text-soft); isolation: isolate; background: var(--hover-bg); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-retro); }
.footer-art { position: absolute; inset: 0; z-index: -1; background: var(--hover-bg); } /* 写真は使わず、紙の地だけ */
.footer-art::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .2; mix-blend-mode: multiply; }
.footer-sign { margin: 0 0 20px; font-size: clamp(1.15rem, 3vw, 1.55rem); font-weight: 900; color: var(--ink); letter-spacing: .06em; text-shadow: 2px 2px 0 #efd27c; }
.footer-sign .hud-label { display: flex; margin-bottom: 6px; color: var(--text-dim); text-shadow: none; }
/* フッターのリンクは目次として控えめに（ボタンにしない） */
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 22px; }
.footer-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(51, 36, 29, .25); text-underline-offset: 4px; }
.footer-nav a .ico { width: 16px; height: 16px; color: var(--c-forest); }
.footer-nav a:hover { color: var(--c-accent); text-decoration-color: currentColor; }
.footer-note { margin: 0 0 10px; line-height: 1.9; }
.footer-copy { margin: 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: var(--text-dim); }

/* ---------- アイコン ---------- */

.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; overflow: visible; }
.ico * { transform-box: fill-box; transform-origin: center; }

/* ---------- ボタン（昭和の押しボタン × 周回するアイコン） ---------- */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 8px 20px 8px 9px;
  border: 1.5px solid var(--line-strong); border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit; font-size: .95rem; font-weight: 800; letter-spacing: .03em; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(110, 60, 30, .06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-position .5s var(--ease), color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:not(:has(.bi)) { padding-left: 20px; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(110, 60, 30, .55); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn small { font-weight: 700; font-size: .74rem; color: var(--text-soft); margin-left: -4px; }
.btn-glass { background: rgba(255, 251, 245, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.btn-primary { background: var(--c-forest); color: #fff; border-color: var(--c-forest); }
.btn-primary:hover { background-position: 100% 0; color: #fff; background: var(--c-forest-dark); }
.btn-primary small { color: rgba(255, 255, 255, .85); }
.btn-large { min-height: 58px; padding: 10px 28px 10px 11px; font-size: 1.05rem; border-radius: 8px; box-shadow: 0 1px 2px rgba(110, 60, 30, .06); }
.btn-large:hover { box-shadow: 0 12px 26px -14px rgba(110, 60, 30, .55); }
.btn-large:not(:has(.bi)) { padding-left: 28px; }
.btn-block { width: 100%; }
.btn-danger { color: #fff; background: var(--c-danger); }
.btn-danger:hover { color: #fff; }
.btn-line { background: #4fdc8b; }
.btn[disabled] { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
.link-button { background: none; border: 0; padding: 0; color: var(--c-forest); text-decoration: underline; font: inherit; cursor: pointer; }
form.inline { display: inline; }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: none; transition: transform .3s var(--ease), background .3s; }
.icon-button:hover { background: var(--on-bg); transform: rotate(90deg); }
.icon-button .ico { width: 20px; height: 20px; }

/* 押したところから広がる光 */
.ripple { position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .8); pointer-events: none; animation: ripple .65s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(30); opacity: 0; } }

/* ボタンのそばの丸いアイコン。ふちの光がまわり、小さな衛星が周回する */
.bi { position: relative; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); color: var(--c-forest); box-shadow: inset 0 0 0 1.5px var(--frame); }
.bi::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 50%, var(--c-rice) 66%, var(--c-forest) 80%, transparent 81%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); opacity: .6; transition: opacity .3s; }
.bi::after { content: ""; position: absolute; top: -5px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--c-forest); box-shadow: 0 0 0 1.5px var(--paper); transform-origin: 3px 21px; opacity: 0; transition: opacity .3s; }
.bi .ico { width: 17px; height: 17px; stroke-width: 2.1; transition: transform .45s var(--ease); }
.btn:hover .bi::before, .btn:focus-visible .bi::before { opacity: 1; animation: spin 1.3s linear infinite; }
.btn:hover .bi::after, .btn:focus-visible .bi::after { opacity: 1; animation: spin 1.3s linear infinite; }
.btn-primary .bi, .btn-line .bi, .btn-ai .bi { color: var(--ink); background: rgba(255, 252, 244, .78); }
.btn-primary .bi { color: var(--c-forest); background: rgba(255, 251, 245, .94); }
.btn-primary .bi::before { background: conic-gradient(from 0deg, transparent 0 50%, var(--on-bg) 66%, transparent 67%); animation: spin 5s linear infinite; }
.btn-danger .bi { color: var(--c-danger); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 意味に合わせた中の動き */
.btn:hover .bi-search .ico { animation: lens 1.1s var(--ease) infinite; }
@keyframes lens { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, -1px); } 50% { transform: translate(1px, -2px); } 75% { transform: translate(2px, 1px); } }
.btn:hover .bi-plus .ico { transform: rotate(180deg) scale(1.15); }
.btn:hover .bi-calendar .ico { animation: hop .7s var(--ease) infinite alternate; }
.btn:hover .bi-calendar .i-dot { animation: blink .8s steps(2) infinite; }
@keyframes hop { to { transform: translateY(-3px); } }
@keyframes blink { 50% { opacity: .2; } }
.btn:hover .bi-arrow-right .ico { animation: dash-r .9s var(--ease) infinite; }
.btn:hover .bi-arrow-left .ico { animation: dash-l .9s var(--ease) infinite; }
@keyframes dash-r { 0% { transform: translateX(0); opacity: 1; } 45% { transform: translateX(9px); opacity: 0; } 46% { transform: translateX(-9px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes dash-l { 0% { transform: translateX(0); opacity: 1; } 45% { transform: translateX(-9px); opacity: 0; } 46% { transform: translateX(9px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.btn:hover .bi-sparkle .ico { transform: rotate(72deg) scale(1.12); }
.bi-sparkle .i-twinkle { animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
.btn:hover .bi-copy .i-front { transform: translate(-2px, -2px); transition: transform .3s var(--ease); }
.btn:hover .bi-download .i-arrow, .btn:hover .bi-qr .ico { animation: drop .8s var(--ease) infinite; }
@keyframes drop { 0% { transform: translateY(-3px); opacity: .3; } 60% { transform: translateY(1px); opacity: 1; } 100% { transform: translateY(1px); opacity: 1; } }
.btn:hover .bi-chat .ico { animation: wiggle .6s ease-in-out infinite; }
@keyframes wiggle { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.btn:hover .bi-send .ico { animation: fly .9s var(--ease) infinite; }
@keyframes fly { 0% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(8px, -8px); opacity: 0; } 51% { transform: translate(-8px, 8px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
.btn:hover .bi-trash .ico { animation: shake .4s ease-in-out infinite; }
@keyframes shake { 25% { transform: translateX(-1.5px) rotate(-6deg); } 75% { transform: translateX(1.5px) rotate(6deg); } }
.btn:hover .bi-key .ico { transform: rotate(-35deg); }
.btn:hover .bi-reset .ico { transform: rotate(-200deg); }
.btn:hover .bi-globe .ico { animation: spin 2.4s linear infinite; }
.btn:hover .bi-sliders .i-k1 { animation: knob-a 1s var(--ease) infinite alternate; }
.btn:hover .bi-sliders .i-k2 { animation: knob-b 1s var(--ease) infinite alternate; }
.btn:hover .bi-sliders .i-k3 { animation: knob-a 1s var(--ease) .2s infinite alternate; }
@keyframes knob-a { to { transform: translateX(-5px); } }
@keyframes knob-b { to { transform: translateX(6px); } }

/* ---------- 部品 ---------- */

.panel { position: relative; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin: 0 0 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.panel.narrow { max-width: 600px; }
.panel.empty { text-align: center; color: var(--text-soft); }

[data-spot] { --mx: 50%; --my: 50%; }
[data-spot]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(227, 200, 100, .16), transparent 60%); opacity: 0; transition: opacity .4s; }
[data-spot]:hover::after { opacity: 1; }

.flashes { margin-top: 26px; }
.flash { display: flex; align-items: flex-start; gap: 10px; border-radius: 6px; padding: 12px 16px; margin: 0 0 16px; background: #e6f0dc; border: 1.5px solid #a9cf91; color: #2c4a2a; box-shadow: 3px 3px 0 rgba(75, 139, 69, .35); animation: flash-in .6s var(--ease-out) both; }
.flash > .ico { margin-top: 4px; color: var(--c-green); }
.flash-error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); box-shadow: 3px 3px 0 rgba(207, 58, 58, .3); }
.flash-error > .ico { color: var(--c-red); }
.flash ul { margin: 6px 0 0; padding-left: 1.2em; }
.flash p { margin: 6px 0 0; }
.flash a { color: inherit; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-10px); filter: blur(6px); } }

.notice-box { background: var(--tint-rice); border: 1.5px solid var(--on-line); border-radius: 6px; padding: 14px 18px; font-size: .93rem; color: var(--on-text); }
.notice-box p { margin: 0 0 6px; }
.notice-box p:last-child { margin-bottom: 0; }
/* からし色のうすい地（#fff1c9）の上ではテラコッタが 4.3 なので、濃いテラコッタ（5.7） */
.notice-box a, .hero-notice a, .recurring-note a, .new-notice a, .flyer-tip a, .event-posted a, .bubble-alert a, .post-side a { color: var(--c-forest-dark); }

.hud-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--mono); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--c-forest); }
.hud-label::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.hud-sep { display: inline-block; width: 26px; height: 1.5px; background: currentColor; opacity: .5; }
.hud-coord { display: inline-flex; align-items: center; gap: 8px; }
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c-green); animation: ping 1.8s var(--ease-out) infinite; }
.hud-label:has(.live-dot)::before { display: none; }
@keyframes ping { to { transform: scale(3); opacity: 0; } }

.badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
/* 札は線だけ（2026-10-17。塗るのは「あと何日」の .countdown だけ。線は box-shadow で、高さを変えずに引く） */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 800; background: transparent; color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; line-height: 1.65; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* 種類ごとの色は付けない（2026-10-17。以前は 親子 #a8475d・無料 #8a5800・申込なし #2e6e46・要申込 #2f5f8f・主催者 #2f5d3a・定期 #8a5a12 の字に、共通の地 #f4efe6）。ジャンルの札だけ緑の線と字 */
.badge-genre { color: var(--c-green); box-shadow: inset 0 0 0 1px var(--c-green); }
.badge-repeat { color: var(--c-sky-ink); box-shadow: inset 0 0 0 1px var(--c-sky); } /* 定期の集まりは空色 */
/* 定期の集まり（フォームの曜日から日程を作る部品・詳細ページの注記） */
.recurring-maker { margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--frame); border-radius: 6px; background: rgba(255, 255, 255, .5); }
.recurring-maker .choices { margin: 6px 0 10px; }
.recurring-maker [data-recurring-msg]:empty { display: none; }
.recurring-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; font-size: .9rem; color: var(--on-text); background: var(--tint-rice); }
.recurring-note svg { flex: none; margin-top: 3px; }
/* 詳細の「投稿者」: 立場（本人の申告）・お名前・注記 */
.poster-role { display: inline-block; margin-right: 8px; padding: 1px 10px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--text-soft); background: #ebe5d9; }
.poster-role-organizer { color: #2f5d3a; background: #e3efd9; }
.poster-note { display: block; margin-top: 4px; font-size: .78rem; }
/* 投稿前のチラシの確認（3つ。チェックは1つにまとめ、控えめに並べる） */
/* Instagram での紹介の同意: 立場がそろうまでは灰色で見せたまま選べない（2026-10-23） */
.sns-ok.is-off legend, .sns-ok.is-off .choice-agree, .sns-ok.is-off .choice-agree span { color: var(--text-dim); }
.sns-ok.is-off .choice-agree { opacity: .55; cursor: not-allowed; }
.sns-ok.is-off .choice-agree input { cursor: not-allowed; }
.sns-ok.is-off .choice-agree span { background: #f1ede6; border-color: #ddd5c8; }
.sns-off-note { color: var(--ink); }
.agree-lead { margin: 0 0 2px; font-weight: 700; font-size: .93rem; }
.agree-lead + .flyer-checks { margin: 4px 0 12px 6px; }
.flyer-checks { margin: 8px 0 0 6px; padding: 0; list-style: none; font-size: .84rem; color: var(--text-soft); }
.flyer-checks li { position: relative; padding-left: 1.3em; line-height: 1.7; }
.flyer-checks li::before { content: "・"; position: absolute; left: 0; color: var(--c-forest); font-weight: 700; }
.badge-private, .badge-closed { color: var(--text-dim); }

/* 切符のような「あと何日」 */
.countdown { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 12px 3px 9px; border-radius: 6px; background: var(--c-forest); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.5; box-shadow: none; }
.countdown::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--paper); }
.countdown b { font-family: var(--mono); letter-spacing: .08em; font-size: .78rem; color: #fff; }
.countdown-live, .countdown-soon { background: var(--c-sky-ink); } /* 開催中とあと2〜7日（soon）は空色（日付と時間の情報）。今日（today）・明日（tomorrow）はテラコッタ */
.countdown-live b { color: #fff; }
.countdown-live::before { content: ""; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--on-bg); box-shadow: 0 0 8px var(--on-bg); animation: blink 1.2s steps(2) infinite; }
.countdown-today b { color: #fff; }
.countdown-soon b { color: #fff; }
.countdown-later { background: var(--brown-3); } /* 8日より先は落ち着いた茶 */
.countdown-later b { color: #fff; }

.thumb-pdf { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 80px; border-radius: 5px; background: linear-gradient(135deg, #d9736a, #b5524e); color: #fff; font-family: var(--mono); font-weight: 800; letter-spacing: .1em; box-shadow: 3px 3px 0 var(--drop); }
.thumb-pdf.small { width: 36px; height: 46px; font-size: .66rem; box-shadow: 2px 2px 0 var(--drop); }

.page-head { position: relative; isolation: isolate; overflow: hidden; margin: 4px 0 28px; padding: 34px 30px 30px; border-radius: 8px; border: 2px solid var(--frame); box-shadow: 5px 5px 0 var(--drop); background: url(../img/illust/107310_golden-rice-fields-wide.webp) center 60% / cover no-repeat, var(--paper); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(255, 252, 244, .97) 0%, rgba(255, 252, 244, .9) 42%, rgba(255, 252, 244, .2) 100%); }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(52, 64, 47, .1) 1px, transparent 1.3px), var(--grain); background-size: 7px 7px, auto; mix-blend-mode: multiply; opacity: .6; }
.page-head h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 900; text-shadow: 3px 3px 0 #efd27c; animation: title-in 1s var(--ease-out) both; }
.page-head p { margin: 0; color: var(--text-soft); max-width: 46em; font-weight: 600; }
.page-head .hud-label { margin-bottom: 8px; }
.page-sub { font-weight: 800; color: var(--text) !important; }
@keyframes title-in { from { opacity: 0; letter-spacing: .4em; filter: blur(10px); transform: translateY(12px); } }

.back { margin-top: 30px; }
.only-hover { display: none; }
@media (hover: hover) and (pointer: fine) { .only-hover { display: inline; } }

/* ---------- トップ（水彩の写真が並ぶ壁） ---------- */

.hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; margin-top: 4px; background: linear-gradient(180deg, #ffe6a8, var(--bg)); }
.hero-compact { min-height: 0; }
.hero-wall { position: absolute; inset: -18% -12% -10%; z-index: -2; display: flex; flex-direction: column; justify-content: center; gap: 26px; transform: perspective(1500px) rotateX(24deg) rotateZ(-7deg) scale(1.12); transform-origin: 50% 35%; animation: wall-in 1.6s var(--ease-out) both; }
.hero-compact .hero-wall { inset: -60% -10%; transform: perspective(1500px) rotateX(30deg) rotateZ(-5deg) scale(1.05); }
@keyframes wall-in { from { opacity: 0; transform: perspective(1500px) rotateX(40deg) rotateZ(-12deg) scale(1.4); filter: blur(12px); } }
.wall-row { display: flex; gap: 24px; padding-right: 24px; width: max-content; animation: wall-x 120s linear infinite; will-change: transform; }
.wall-row:nth-child(2) { animation-direction: reverse; animation-duration: 140s; margin-left: -160px; }
.wall-row:nth-child(3) { animation-duration: 160s; margin-left: -80px; }
@keyframes wall-x { to { transform: translateX(-50%); } }
/* 昔の写真プリントのような白い縁 */
.wall-tile { position: relative; flex: none; height: clamp(120px, 17vh, 180px); aspect-ratio: 4 / 3; border: 7px solid var(--paper); border-bottom-width: 22px; border-radius: 4px; background: #fffaf2; box-shadow: 0 18px 34px -16px rgba(110, 60, 30, .45), 0 0 0 1px rgba(51, 36, 29, .06); border-color: #fffaf2; }
.wall-tile:nth-child(odd) { rotate: -1.5deg; }
.wall-tile:nth-child(3n) { rotate: 1.8deg; }
.wall-tile.is-tall { aspect-ratio: 3 / 4; }
.wall-tile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) saturate(1.06); }
.wall-tile::after { content: ""; position: absolute; inset: -7px -7px -22px; border-radius: 4px; box-shadow: 0 0 0 3px var(--c-leaf), 0 0 26px rgba(120, 173, 92, .55); opacity: 0; animation: tile-glow 9s ease-in-out infinite; animation-delay: calc(var(--k) * 1.7s); }
.wall-tile:nth-child(3n)::after { box-shadow: 0 0 0 3px var(--c-peach), 0 0 26px rgba(217, 116, 138, .5); }
.wall-tile:nth-child(3n+1)::after { box-shadow: 0 0 0 3px var(--c-rice), 0 0 26px rgba(227, 180, 64, .55); }
@keyframes tile-glow { 0%, 82%, 100% { opacity: 0; } 88% { opacity: 1; } }
.wall-tag { position: absolute; left: 2px; right: 2px; bottom: -21px; display: flex; align-items: center; gap: 5px; height: 20px; overflow: hidden; color: var(--text-soft); font-size: .66rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.wall-tag::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text-soft); }
.wall-tile.is-tall .wall-tag { left: -5px; right: -5px; letter-spacing: 0; } /* 縦長の写真は幅が狭いので、左右の白い縁まで使う（低い画面でも7字まで切れない） */
.hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 90% at 14% 58%, rgba(255, 250, 240, .97), rgba(255, 250, 240, .84) 46%, rgba(255, 250, 240, .12) 80%, transparent),
    linear-gradient(180deg, rgba(242, 179, 61, .22) 0%, rgba(255, 250, 240, 0) 38%, rgba(255, 250, 240, 0) 80%, rgba(255, 250, 240, .55) 100%);
}
.hero-compact .hero-shade { background: linear-gradient(90deg, rgba(255, 250, 240, .97), rgba(255, 250, 240, .85) 60%, rgba(255, 250, 240, .55)); }

.hero-inner { display: grid; gap: 20px 32px; align-items: center; padding-top: 22px; padding-bottom: 64px; }
.hero-compact .hero-inner { padding-top: 34px; padding-bottom: 28px; }
@media (min-width: 1000px) { .hero-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.hero-copy .hud-label { margin-bottom: 10px; animation: rise .9s var(--ease-out) .1s both; color: var(--text-dim); }
/* 昔の看板のように、ずらした影を重ねた見出し */
.hero-title {
  margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 900; line-height: 1.3; letter-spacing: .04em; color: var(--ink);
  animation: title-in 1.3s var(--ease-out) .15s both;
}
.hero-compact .hero-title { font-size: clamp(1.8rem, 5vw, 2.6rem); text-shadow: 2px 2px 0 #efd27c, 4px 4px 0 rgba(120, 173, 92, .4); }
.hero-lead { margin: 10px 0 0; max-width: 32em; font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 700; color: var(--text-soft); animation: rise 1s var(--ease-out) .45s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }
html.show-intro .hero-wall { animation-delay: 1.9s; }
html.show-intro .hero-copy .hud-label, html.show-intro .hero-title, html.show-intro .hero-lead { animation-delay: 2.2s; }

/* 駅の案内板のような「次のイベント」 */

/* ---------- 結果 ＋ 右のサイドバー ---------- */

.board { display: grid; gap: 30px; padding-top: 36px; padding-bottom: 24px; }
@media (min-width: 1000px) {
  .board { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .board-side { position: sticky; top: calc(var(--header-h) + 18px); max-height: calc(100vh - var(--header-h) - 34px); overflow-y: auto; padding: 0 8px 8px 0; scrollbar-width: thin; scrollbar-color: rgba(52, 64, 47, .3) transparent; }
}
.board-main { min-width: 0; }

.results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.results-title { position: relative; margin: 0; padding-bottom: 8px; font-size: clamp(1.3rem, 3vw, 1.65rem); font-weight: 900; }
.results-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px; border-radius: 4px; background: var(--grad-retro); }
.results-count { margin: 0; color: var(--text-soft); font-size: .9rem; font-weight: 700; }
.results-count .mono { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.filter-open { margin-left: auto; align-self: center; min-height: 44px; }
.filter-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .72rem; }
@media (min-width: 1000px) { .filter-open, .date-tabs-inline { display: none !important; } }
html.no-js .filter-open { display: none; }

/* 日付のタブ（昔のキーボードのキー） */
.date-tabs { display: grid; gap: 7px; }
.date-tabs-side { grid-template-columns: 1fr 1fr; }
.date-tabs-inline { grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 2px var(--gutter) 8px; scrollbar-width: none; }
.date-tab { position: relative; display: flex; flex-direction: column; gap: 0; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line-strong); border-bottom-width: 3px; background: var(--paper); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .15s var(--ease), border-bottom-width .15s, background .2s; }
.date-tab:hover { color: var(--ink); background: var(--hover-bg); }
.date-tab:active { transform: translateY(2px); border-bottom-width: 2px; }
.date-tab-label { font-weight: 900; font-size: .95rem; white-space: nowrap; }
.date-tab-sub { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.date-tab-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.date-tab-count { flex: none; }
.date-tab-count { margin-left: auto; font-family: var(--mono); font-size: .9rem; font-weight: 800; color: var(--ink); letter-spacing: 0; }
.date-tab-count small { margin-left: 1px; font-family: var(--sans); font-size: .66rem; font-weight: 700; color: var(--text-soft); }
.date-tab.is-zero .date-tab-count { color: var(--text-dim); }
.date-tab.is-on .date-tab-count, .date-tab.is-on .date-tab-count small { color: var(--on-text); }
.date-tab.is-on::after { display: none; }
.date-tab-sub { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--text-dim); letter-spacing: .06em; }
.date-tab.is-on { background: var(--on-bg); color: var(--on-text); transform: translateY(2px); border-bottom-width: 2px; border-color: var(--c-rice); }
.date-tab.is-on .date-tab-sub { color: var(--on-text); }
.date-tab.is-on::after { content: ""; position: absolute; right: 10px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-rice); box-shadow: none; }

.active-filters { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; padding: 0; }
.active-filters a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 12px; border-radius: 999px; background: var(--on-bg); border: 1px solid var(--on-line); color: var(--on-text); font-size: .82rem; font-weight: 800; text-decoration: none; transition: background .25s, border-color .25s; animation: chip-in .45s var(--ease-out) both; }
.active-filters a .ico { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.active-filters a:hover { background: var(--c-rice); border-color: var(--on-text); color: var(--ink); }
.active-filters a:hover .ico { transform: rotate(90deg); }
.active-filters .clear-all { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--text-soft); padding-left: 10px; }
@keyframes chip-in { from { opacity: 0; transform: scale(.8); } }

/* カード */
/* カードは横長: 左にチラシの大事な部分（切り抜く位置はチラシごとに focus で決める）、右に日時・題名・場所 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
@media (min-width: 640px) { .cards { gap: 20px; } }
.card { position: relative; min-width: 0; border-radius: var(--radius); }
/* ホログラムのシールのような虹色の光（ホバー時） */
.card::before { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: calc(var(--radius) + 6px); background: conic-gradient(from var(--ang), #f5d36e, #f3c4cf, #b9dd9a, #c9bdf0, #a9d4ec, #b9dd9a, #f5d36e); filter: blur(10px); opacity: 0; transition: opacity .4s; }
.card:hover::before { opacity: .35; animation: ang 4s linear infinite; }
.card-link { position: relative; display: flex; flex-direction: row; height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(110, 60, 30, .05); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease), box-shadow .3s; }
.card:hover .card-link { box-shadow: 0 16px 32px -18px rgba(110, 60, 30, .45); }
.card-link:hover { color: inherit; }
.card-thumb { position: relative; flex: none; width: 40%; max-width: 190px; min-height: 172px; align-self: stretch; background: var(--tint); display: flex; align-items: center; justify-content: center; overflow: hidden; border-right: 1px solid var(--line); }
.card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .8s var(--ease), filter .5s; }
.card:hover .card-thumb img { transform: scale(1.06); filter: saturate(1.1); }
.card-body > .countdown { align-self: flex-start; } /* 文字の欄のいちばん上。チラシの写真には重ねない */
.card-glare { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), transparent 45%); opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light; }
.card:hover .card-glare { opacity: 1; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.card-date { margin: 0; font-size: .8rem; font-weight: 900; color: var(--c-indigo); line-height: 1.4; letter-spacing: .02em; }
.card-date span { color: var(--text-soft); font-weight: 700; font-family: var(--mono); font-size: .76rem; }
.card-title { margin: 0; font-size: 1rem; font-weight: 900; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; }
.card:hover .card-title { color: var(--c-forest); }
/* 開催回が複数あるとき: 「次回」と「全3回」の札 */
.card-next, .event-next { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 5px; background: transparent; color: var(--c-sky-ink); box-shadow: inset 0 0 0 1px var(--c-sky); font-style: normal; font-size: .68rem; font-weight: 800; vertical-align: 1px; }
.event-next { font-size: .78rem; padding: 1px 8px; }
.card-sessions { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: transparent; color: var(--c-sky-ink); box-shadow: inset 0 0 0 1px var(--c-sky); font-size: .68rem; font-weight: 800; white-space: nowrap; vertical-align: 1px; }
.event-date .card-sessions { font-size: .78rem; }
.card-others { color: var(--text-dim); font-weight: 700; font-size: .72rem; white-space: nowrap; }
.card-place { display: flex; gap: 4px; margin: 0; font-size: .8rem; font-weight: 600; color: var(--text-soft); line-height: 1.45; }
.card-place .ico { margin-top: 2px; color: var(--text-soft); width: 14px; height: 14px; }
.card .badges { margin-top: auto; padding-top: 4px; }

/* 現れるときの動き（app.js が画面外の要素にだけ pre を付ける） */
[data-reveal].pre { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(8px); }
[data-reveal].pre.is-in { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), filter .7s var(--ease-out); transition-delay: calc(var(--d, 0) % 4 * 70ms); }

.empty-state { padding: 40px 24px; }
.empty-orbit { position: relative; display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 14px; border-radius: 50%; color: var(--c-forest); background: var(--paper); box-shadow: inset 0 0 0 2px var(--frame), 3px 3px 0 var(--drop); }
.empty-orbit .ico { width: 30px; height: 30px; animation: lens 2.4s var(--ease) infinite; }
.empty-orbit::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed var(--c-rice); animation: spin 12s linear infinite; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* 一覧のページ送り（.pager）は、ファイル末尾の「一覧のページ送り」の節（2026-10-16 に作り直し） */

/* サイドバー（ガラスの操作盤） */
.board-side { border-radius: 8px; } /* 位置は広い画面で sticky（上の @media）、狭い画面で引き出し（下）。ここで relative にすると sticky が消える */
.side-inner { position: relative; padding: 20px; border-radius: 8px; background: rgba(255, 251, 245, .92); border: 2px solid var(--frame); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); box-shadow: 6px 6px 0 var(--drop); }
.side-inner::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 0 0 4px 4px; background: var(--grad-retro); }
.side-head { position: relative; margin-bottom: 14px; }
.side-head h2 { margin: 0; font-size: 1.3rem; font-weight: 900; }
.side-close { position: absolute; right: 0; top: 0; display: none; }
.side-block { padding: 16px 0; border-top: 1.5px dashed var(--line-strong); }
.side-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .92rem; font-weight: 900; color: var(--ink); }
.side-title > .ico { color: var(--text-soft); }
.side-more { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 800; text-decoration: none; }
.side-more .ico { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.side-more:hover .ico { transform: translateX(3px); }

.search-box { position: relative; display: flex; align-items: center; }
.search-box > .ico { position: absolute; left: 14px; color: var(--c-forest); pointer-events: none; z-index: 1; }
.search-box input[type="search"] { padding-left: 42px; padding-right: 52px; border-radius: 6px; min-height: 50px; border: 2px solid var(--frame); }
.search-go { position: absolute; right: 6px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 6px; background: var(--c-forest); color: #fff; cursor: pointer; transition: transform .2s var(--ease); }
.search-go:hover { transform: scale(1.06); }
.search-go:hover .ico { animation: dash-r .9s var(--ease) infinite; }

.date-pick { margin-top: 9px; }
.date-pick-label { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 6px; border: 1.5px dashed var(--line-strong); color: var(--text-soft); font-size: .85rem; font-weight: 800; transition: border-color .3s; }
.date-pick-label:hover, .date-pick-label:focus-within { border-color: var(--c-forest); color: var(--ink); }
.date-pick-label > .ico { color: var(--c-forest); }
.date-pick-label.is-on { border-style: solid; border-color: var(--c-rice); background: var(--on-bg); }
.date-pick-label input[type="date"] { margin-left: auto; width: auto; min-height: 36px; padding: 4px 8px; font-size: .88rem; }

.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.mini-w { font-family: var(--mono); font-size: .68rem; font-weight: 800; color: var(--text-dim); padding-bottom: 2px; }
.mini-w.sun { color: var(--c-sun); } .mini-w.sat { color: var(--c-sat); }
.mini-d { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 5px; font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--text-soft); text-decoration: none; transition: background .25s, color .25s, transform .25s var(--ease); }
a.mini-d:hover { background: var(--hover-bg); color: var(--ink); transform: scale(1.12); }
.mini-d.is-past { color: rgba(138, 143, 126, .5); font-weight: 500; }
.mini-d.has-ev { color: var(--ink); background: var(--on-bg); }
.mini-d.has-ev::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--on-text); }
.mini-d.is-today { box-shadow: inset 0 0 0 2px var(--c-forest); color: var(--c-forest); } /* 今日はテラコッタ */
.mini-d.is-on { background: var(--c-rice); color: var(--ink); }

.toggles { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.toggle { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 800; transition: border-color .3s, background .3s; }
.toggle > .ico { color: var(--text-dim); transition: color .3s, transform .3s var(--ease); }
.toggle:hover { color: var(--ink); border-color: var(--ink); }
.toggle:hover > .ico { transform: scale(1.15); }
.toggle-label { flex: 1; }
.switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: #e6dfd0; box-shadow: inset 0 0 0 1.5px var(--frame); transition: background .35s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--frame), 1px 1px 0 var(--drop); transition: transform .45s var(--ease-out); }
.toggle.is-on { border-color: var(--ink); background: var(--hover-bg); }
.toggle.is-on > .ico { color: var(--on-text); }
.toggle.is-on .switch { background: var(--c-rice); }
.toggle.is-on .switch::after { transform: translateX(18px); }

.more-filters summary { cursor: pointer; list-style: none; margin: 0; }
.more-filters summary::-webkit-details-marker { display: none; }
.summary-chev { margin-left: auto; transition: transform .4s var(--ease); color: var(--text-dim) !important; }
.more-filters[open] .summary-chev { transform: rotate(180deg); }
.more-filters::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.more-filters[open]::details-content { block-size: auto; }
.filter-form { display: grid; gap: 10px; padding: 6px 4px 4px 0; }
.filter-form label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 800; color: var(--text-soft); min-width: 0; }
.filter-form .btn { margin-top: 6px; }
.side-reset { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .85rem; font-weight: 800; color: var(--text-soft); text-decoration: none; }
.side-reset:hover { color: var(--c-forest); }
.side-reset:hover .ico { transform: rotate(-180deg); transition: transform .5s var(--ease); }

/* 狭い画面では、サイドバーを右から出す引き出しにする（JS があるとき） */
@media (max-width: 999px) {
  html.no-js .board-side { order: -1; }
  html.js .board-side {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
    width: min(92vw, 400px); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(105%); visibility: hidden;
    transition: transform .5s var(--ease-out), visibility 0s .5s;
  }
  html.js .board-side.is-open { transform: none; visibility: visible; transition: transform .5s var(--ease-out); }
  html.js .side-inner { min-height: 100%; border-radius: 8px 0 0 8px; border-right: 0; padding-top: 22px; background: rgba(255, 252, 244, .97); box-shadow: -6px 0 0 var(--drop); }
  html.js .side-close { display: inline-grid; }
  .drawer-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(52, 64, 47, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in .35s both; }
}
.drawer-scrim[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- 入力欄 ---------- */

input[type="text"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 6px;
  background: #fffdf8; color: var(--text);
  font: inherit; transition: border-color .25s, box-shadow .25s, background .25s;
}
input::placeholder, textarea::placeholder { color: #a3a796; }
input:hover, select:hover, textarea:hover { border-color: rgba(52, 64, 47, .5); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-forest); background: #fff; box-shadow: 0 0 0 4px rgba(185, 84, 47, .18); }
select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea { resize: vertical; line-height: 1.8; }

/* ---------- 詳細 ---------- */

.event-head { position: relative; isolation: isolate; overflow: hidden; padding: 34px 30px 28px; border-radius: 8px; border: 2px solid var(--frame); box-shadow: 6px 6px 0 var(--drop); background: var(--paper); }
.event-head::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--hero-img, none) center / cover no-repeat, linear-gradient(120deg, #f3e1a6, #f3d3d9); filter: blur(36px) saturate(1.3); opacity: .2; transform: scale(1.15); animation: breathe 14s ease-in-out infinite alternate; }
/* 題名の下は白 90% の面（2026-10-17。チラシの色しだいで題名が読みにくくなっていた。ぼかしたチラシは上の ::before でごく薄く） */
.event-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .9); }
@keyframes breathe { to { transform: scale(1.3) translate(2%, -2%); } }
.event-head h1 { margin: 6px 0 12px; font-size: clamp(1.6rem, 4.6vw, 2.5rem); font-weight: 900; text-shadow: 3px 3px 0 #efd27c; animation: title-in 1.1s var(--ease-out) both; }
.event-date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-weight: 900; color: var(--c-indigo); font-size: 1.08rem; }
.event-date > span:not(.countdown) { color: var(--ink); font-weight: 700; font-family: var(--mono); }
.event-layout { display: grid; gap: 30px; margin-top: 30px; }
@media (min-width: 900px) { .event-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } .event-flyers { position: sticky; top: calc(var(--header-h) + 22px); } }
.event-flyers { display: grid; gap: 26px; padding: 8px 6px; }
/* チラシは紙もの。マスキングテープで留め、角に近未来の枠 */
/* 詳細のチラシはまっすぐ載せ、ポインターを当てたときだけ少し傾く（2026-10-17 ユーザー指示。以前はいつも傾いていた） */
.flyer { position: relative; margin: 0; padding: 10px; border-radius: 4px; background: #fff; box-shadow: 0 26px 50px -22px rgba(96, 84, 52, .7), 0 0 0 1px rgba(52, 64, 47, .12); transition: transform .6s var(--ease), box-shadow .6s; }
.flyer:hover { transform: rotate(-.8deg) scale(1.01); box-shadow: 0 34px 60px -22px rgba(96, 84, 52, .8), 0 0 0 1px rgba(52, 64, 47, .2); }
.flyer:nth-child(2n):hover { transform: rotate(.8deg) scale(1.01); }
.flyer::before { content: ""; position: absolute; left: 50%; top: -12px; z-index: 1; width: 110px; height: 26px; margin-left: -55px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px), rgba(240, 200, 110, .72); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(96, 84, 52, .2); }
.flyer::after { content: ""; position: absolute; right: -9px; bottom: -9px; width: 30px; height: 30px; border: 3px solid var(--c-leaf); border-left: 0; border-top: 0; pointer-events: none; transition: transform .5s var(--ease); }
.flyer:hover::after { transform: translate(4px, 4px); }
.flyer img { display: block; width: 100%; border-radius: 2px; }
.flyer-pdf { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.flyer-pdf-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; padding: 4px 0; color: var(--c-forest); }
.event-info { min-width: 0; }
.info-list { position: relative; display: grid; grid-template-columns: 8em minmax(0, 1fr); margin: 0 0 22px; border-radius: var(--radius); border: 2px solid var(--frame); background: var(--paper); box-shadow: 5px 5px 0 rgba(52, 64, 47, .2); overflow: hidden; }
.info-list dt, .info-list dd { margin: 0; padding: 12px 16px; border-bottom: 1.5px dashed var(--line); }
.info-list dt { display: flex; align-items: flex-start; gap: 8px; font-weight: 900; font-size: .86rem; color: var(--text-soft); background: var(--paper-2); }
.info-list dt .ico { color: var(--text-soft); margin-top: 3px; }
.info-list dt:nth-last-of-type(1), .info-list dd:last-child { border-bottom: 0; }
/* 詳細ページの日程表（終わった回は薄く、次の回は強調） */
.session-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.session-list li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--paper); }
.session-list li.is-next { border-color: var(--c-sky); background: var(--sky-bg); }
.session-list li.is-past { opacity: .55; }
.session-when { font-weight: 900; color: var(--c-indigo); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.session-time { color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: .9rem; }
.session-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: .92rem; }
.session-where small { color: var(--text-soft); }
.inline-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .9rem; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 10px; }
.contact-list li + li { margin-top: 6px; }
.contact-kind { flex: none; min-width: 3.6em; color: var(--text-dim); font-size: .8rem; font-weight: 800; padding-top: 2px; }
.deadline { font-weight: 900; color: var(--c-indigo); }
.deadline-closed { font-weight: 800; color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 1px; }
/* 説明は罫線のノート */
.description { position: relative; margin-bottom: 22px; padding: 24px 24px 22px 32px; border-radius: 6px; border: 1.5px solid rgba(52, 64, 47, .2); line-height: 2em; background: repeating-linear-gradient(180deg, transparent 0 calc(2em - 1px), rgba(120, 173, 92, .22) calc(2em - 1px) 2em) 0 24px / 100% 2em, #fffdf6; box-shadow: 0 20px 40px -24px rgba(96, 84, 52, .6); }
.description::after { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1.5px; background: rgba(217, 116, 138, .35); }
.description::before { content: "DESCRIPTION"; position: absolute; right: 14px; top: -11px; padding: 1px 9px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .18em; }
.event-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.event-meta { font-size: .82rem; color: var(--text-dim); font-weight: 600; }
.event-posted { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 0; padding: 5px 12px; border-radius: 6px; background: var(--note-bg); border: 1px solid var(--note-line); font-size: .9rem; font-weight: 800; color: var(--ink); }
.event-posted > .ico { width: 18px; height: 18px; color: var(--c-forest); }
.event-posted b { color: var(--c-indigo); }
.event-posted small { margin-left: 6px; font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.event-updated { padding-left: 12px; border-left: 1px solid var(--note-line); }
.event-owner { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; font-weight: 700; }
.event-owner a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); text-decoration: none; }
.event-owner a:hover { color: var(--c-forest); }

/* ---------- 投稿フォーム ---------- */

.event-form { position: relative; max-width: 840px; margin: 0 auto; }
.event-form::before { content: ""; position: absolute; left: 41px; top: 40px; bottom: 160px; width: 0; z-index: -1; border-left: 3px dashed rgba(52, 64, 47, .3); }
.form-section { position: relative; margin-bottom: 20px; padding: 22px 24px 8px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); transition: border-color .3s, box-shadow .3s; }
.form-section:focus-within { border-color: var(--ink); box-shadow: 5px 5px 0 var(--drop); }
.form-section h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 1.2rem; font-weight: 900; }
/* 欄の番号はからし色の地にこげ茶の数字（案内の色。2026-10-17。だいだいのグラデーション #ee8d52→#cc6138 はサイトのほかにない色だった。黒い数字は 2026-10-16 にやめている） */
.step { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--c-rice); color: var(--ink); font-family: var(--mono); font-size: .95rem; font-weight: 800; flex: none; box-shadow: 0 3px 8px -3px rgba(233, 162, 31, .6); transition: background .4s, color .4s; }
.form-section.is-done .step { background: var(--c-green); color: transparent; box-shadow: none; }
.form-section.is-done .step::after { content: ""; position: absolute; width: 12px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: translateY(-2px) rotate(-45deg); animation: pop .4s var(--ease-out); }
@keyframes pop { from { transform: translateY(-2px) rotate(-45deg) scale(0); } }
.field { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-weight: 900; margin-bottom: 6px; padding: 0; font-size: .95rem; }
.req { display: inline-block; font-size: .72rem; font-weight: 900; color: var(--on-text); background: var(--on-bg); padding: 0 7px; border-radius: 5px; vertical-align: 2px; margin-left: 4px; letter-spacing: .04em; }
.help { font-size: .88rem; line-height: 1.75; color: var(--text-soft); margin: 6px 0 0; }
.form-section .lead { margin: 0 0 8px; font-weight: 900; color: var(--c-forest); }
.form-section > .help { margin-bottom: 14px; }
.error { color: var(--c-red); font-weight: 800; font-size: .88rem; margin: 6px 0 0; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--c-red); box-shadow: 0 0 0 4px rgba(207, 58, 58, .12); }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.row.row-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 開場・開始（開演）・終了 */
.done-thanks { margin: 10px auto 18px; max-width: 34em; text-align: center; font-weight: 700; line-height: 1.8; color: var(--ink); }
/* 時刻の選択パネル（パソコン。app.js）。ブラウザの時計のボタンは隠し、欄を押すとこのパネルが出る */
html.has-time-pop input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
html.has-time-pop input[type="time"] { cursor: pointer; }
.time-pop { position: absolute; z-index: 60; width: 236px; padding: 10px; border-radius: 8px; background: var(--paper, #fffaf3); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(60, 40, 25, .18); }
.time-pop[hidden] { display: none; }
.time-pop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.time-pop-col { display: grid; gap: 2px; max-height: 236px; overflow-y: scroll; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(120, 80, 50, .45) rgba(120, 80, 50, .08); }
.time-pop-col button { display: flex; align-items: baseline; justify-content: center; gap: 2px; padding: 6px 4px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font: inherit; font-family: var(--mono); font-size: 1rem; font-weight: 700; cursor: pointer; }
.time-pop-col button small { font-family: inherit; font-size: .72rem; font-weight: 700; color: var(--text-soft); }
.time-pop-col button:hover { background: var(--hover-bg, rgba(164, 83, 47, .08)); }
.time-pop-col button.is-on { background: var(--on-bg); color: var(--on-text); }
.time-pop-col button.is-on small { color: var(--on-text); }
.time-pop-foot .btn { padding: 6px 16px; font-size: .86rem; }
.time-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.choices-column { flex-direction: column; align-items: flex-start; }
.choice { position: relative; display: inline-flex; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 16px 7px 12px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--paper); font-size: .92rem; font-weight: 800; transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease), box-shadow .2s; }
.choice span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--text-dim); background: #fff; transition: border-color .2s, background .2s; }
.choice input[type="checkbox"] + span::before { border-radius: 5px; }
.choice:hover span { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--drop); }
.choice input:checked + span { border-color: var(--c-rice); background: var(--on-bg); color: var(--ink); box-shadow: 3px 3px 0 var(--drop); transform: translate(-1px, -1px); }
.choice input:checked + span::before { border-color: var(--c-green); background: var(--c-green) radial-gradient(circle, #fff 28%, transparent 32%); }
.choice input[type="checkbox"]:checked + span::before { background: var(--c-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.choice input:focus-visible + span { outline: 2.5px solid var(--c-forest); outline-offset: 2px; }
.has-error .choice span { border-color: rgba(207, 58, 58, .55); }
.choice-agree span { border-radius: 6px; }

.flyer-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.flyer-slots .error { grid-column: 1 / -1; }
.flyer-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
/* 見本の右上の ×（このチラシを外す） */
.flyer-remove { position: absolute; top: -9px; right: -9px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 3px 8px rgba(60, 40, 25, .25); transition: transform .2s var(--ease), background .2s; }
.flyer-remove[hidden] { display: none; }
.flyer-remove .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.flyer-remove:hover { background: var(--need-bg); color: var(--need-ink); transform: scale(1.08); }
.flyer-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; cursor: pointer; overflow: hidden; text-align: center; padding: 8px; background: radial-gradient(rgba(52, 64, 47, .1) 1px, transparent 1.3px) 0 0 / 10px 10px, #fffdf8; border: 2px dashed rgba(52, 64, 47, .4); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.flyer-drop:hover { border-color: var(--ink); border-style: solid; box-shadow: 4px 4px 0 var(--drop); transform: translate(-2px, -2px); }
.flyer-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.flyer-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 6px; color: var(--c-forest); background: var(--paper); box-shadow: inset 0 0 0 2px var(--frame), 3px 3px 0 var(--drop); animation: float 3s ease-in-out infinite; }
.flyer-icon .ico { width: 26px; height: 26px; }
.flyer-icon .i-plus { color: var(--c-forest); animation: blink 1.6s steps(2) infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.flyer-slot.is-filled .flyer-icon { display: none; }
.flyer-tools { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: 4px; }
.flyer-tools-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.flyer-tools-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: .84rem; }
.flyer-tools-sub .link-button { display: inline-flex; align-items: center; gap: 3px; }
.flyer-tools-sub .link-button[hidden] { display: none; }
.flyer-tools-sub .ico { width: 15px; height: 15px; }
/* チラシの欄の流れ（選ぶ → 必要なら直す → 読み取る） */
.flyer-flow { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px; padding: 0; counter-reset: none; }
.flyer-flow li { position: relative; display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.flyer-flow li + li::before { content: "›"; position: absolute; left: -16px; color: var(--text-soft); font-weight: 900; }
.flyer-flow b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-rice); color: var(--ink); font-family: var(--mono); font-size: .82rem; flex: none; }
.flyer-flow span { display: flex; flex-direction: column; line-height: 1.35; }
.flyer-flow small { font-size: .76rem; font-weight: 700; color: var(--text-soft); }
.flyer-note { margin: 0 0 14px; }
.flyer-tip { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--note-bg); border: 1px dashed var(--note-line); font-size: .88rem; line-height: 1.7; color: var(--ink); }
.flyer-tip > .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--c-forest); }
.flyer-tip b { display: block; font-weight: 900; color: var(--ink); }
.flyer-tools[hidden], .rot-btn[hidden] { display: none; }
.rot-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 6px; border: 1.5px solid var(--frame); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--drop); transition: transform .2s var(--ease), background .2s; }
.rot-btn:hover { background: #fff6d8; transform: translateY(-1px); }
.rot-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--drop); }
.rot-btn .ico { width: 20px; height: 20px; transition: transform .35s var(--ease); }
/* 文字付きのボタン（形を整える・大きく見る）。絵だけでは意味が伝わりにくいので添える */
.rot-btn:has(> span) { width: auto; gap: 4px; padding: 0 9px; display: inline-flex; align-items: center; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.rot-btn > span { line-height: 1; }
.rot-btn[data-rotate="90"]:hover .ico { transform: rotate(30deg); }
.rot-btn[data-rotate="-90"]:hover .ico { transform: rotate(-30deg); }
.flyer-slot.is-rotated .flyer-drop { border-color: var(--c-rice); }
.flyer-label { font-size: .8rem; font-weight: 900; color: var(--text-soft); line-height: 1.4; }
.flyer-label small { display: block; margin-top: 2px; font-size: .9em; font-weight: 700; color: var(--text-dim); } /* 1枚目の「チラシをアップ」の下の「撮る・写真や PDF を選ぶ」 */
.flyer-preview:empty { display: none; }
.flyer-preview { width: 100%; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.flyer-preview img { max-height: 100%; object-fit: contain; border-radius: 3px; background: #fff; padding: 4px; box-shadow: 0 10px 24px -10px rgba(96, 84, 52, .7); animation: rise .5s var(--ease-out) both; }
.flyer-slot.is-filled .flyer-drop { border-style: solid; border-color: var(--c-green); background: #e6f0dc; box-shadow: 3px 3px 0 var(--drop); }
.has-error .flyer-drop { border-color: var(--c-red); }
/* AI が読んでいる間は、チラシの上を光の線が走る */
.flyer-scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(108, 88, 178, .3) 85%, rgba(108, 88, 178, .7) 100%); border-bottom: 2px solid var(--c-ai); box-shadow: 0 6px 18px rgba(108, 88, 178, .6); opacity: 0; transform: translateY(-100%); }
.event-form.is-scanning .is-filled .flyer-scan { opacity: 1; animation: scan-y 1.4s ease-in-out infinite; }
@keyframes scan-y { 0% { transform: translateY(-100%); } 100% { transform: translateY(340%); } }

.extract-box { position: relative; overflow: hidden; margin: 0 0 18px; padding: 16px 18px; border-radius: 8px; background: radial-gradient(rgba(108, 88, 178, .12) 1px, transparent 1.3px) 0 0 / 8px 8px, var(--ai-bg); border: 2px solid var(--frame); box-shadow: 4px 4px 0 rgba(108, 88, 178, .6); }
.extract-box .help { margin-top: 8px; position: relative; color: var(--text-soft); }
.btn-ai { background: var(--grad-ai); background-size: 180% 100%; }
.btn-ai:hover { background-position: 100% 0; }
.btn-ai[disabled] { background: var(--ai-bg); color: var(--text-dim); cursor: not-allowed; opacity: 1; }
.btn-ai.is-busy { cursor: wait; }
.btn-ai.is-busy .bi::before { opacity: 1; animation: spin .7s linear infinite; }
.extract-status { position: relative; margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; background: #fff; font-size: .9rem; font-weight: 800; animation: rise .4s var(--ease-out) both; border: 1.5px solid var(--line-strong); }
.extract-status.is-ok { background: var(--ai-bg); color: var(--c-ai-dark); border-color: var(--ai-line); }
.extract-status.is-error { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
/* 投稿フォームの日程の行 */
.sessions { display: grid; gap: 14px; margin: 0 0 14px; }
.session { position: relative; margin: 0; padding: 12px 14px 0; border: 1.5px dashed var(--line-strong); border-radius: 6px; background: rgba(255, 252, 244, .6); min-width: 0; transition: border-color .25s, background .25s, box-shadow .25s; }
.session.is-active { border-style: solid; border-color: var(--c-rice); background: var(--hover-bg); box-shadow: 3px 3px 0 var(--drop); }
.session-head { padding: 0 6px; font-weight: 900; font-size: .9rem; color: var(--c-forest); }
.session-head b { font-family: var(--mono); }
.session-remove { position: absolute; right: 12px; top: -2px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 5px; background: var(--paper); font-size: .8rem; font-weight: 800; color: var(--c-red); text-decoration: none; }
.session-remove .ico { width: 14px; height: 14px; }
.session-remove[hidden] { display: none; }
.session-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.session-add-row[hidden] { display: none; }
.session-add-row .help { margin: 0; }
.ai-filled { position: relative; border-radius: 6px; background: rgba(108, 88, 178, .08); box-shadow: 0 0 0 8px rgba(108, 88, 178, .08); animation: ai-flash 1.2s var(--ease-out); }
.ai-filled input, .ai-filled select, .ai-filled textarea { border-color: var(--ai-line); }
.ai-filled > label::after, .ai-filled > legend::after { content: "AI の下書き・要確認"; display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 5px; background: var(--c-ai); color: #fff; font-size: .66rem; font-weight: 800; vertical-align: 2px; }
@keyframes ai-flash { 0% { box-shadow: 0 0 0 0 rgba(108, 88, 178, .6); background: rgba(108, 88, 178, .25); } 100% { box-shadow: 0 0 0 8px rgba(108, 88, 178, .08); } }

/* 選んだ後のチラシの見本は、押すと大きく見られる */
.flyer-slot.is-filled .flyer-drop, .flyer-slot.is-filled .flyer-drop input { cursor: zoom-in; }

/* チラシを大きく見る小窓。入力しながら見られるよう、広い画面は右、狭い画面は下半分に出す（fv-full で画面いっぱい） */
.flyer-viewer { position: fixed; z-index: 70; display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--frame); box-shadow: 0 24px 60px -20px rgba(52, 64, 47, .45), 4px 4px 0 var(--drop); overflow: hidden; animation: fv-in .35s var(--ease-out) both; }
.flyer-viewer[hidden] { display: none; }
@keyframes fv-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.fv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-bottom: 1.5px solid var(--line-strong); background: var(--paper-2); }
.fv-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.fv-tab { padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--paper); font: inherit; font-size: .8rem; font-weight: 800; color: var(--text-soft); cursor: pointer; }
.fv-tab.is-on { background: var(--on-bg); border-color: var(--c-rice); color: var(--on-text); }
.fv-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fv-btn { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 6px; border: 1.5px solid var(--frame); background: var(--paper); color: var(--ink); font: inherit; font-family: var(--mono); font-size: .8rem; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 var(--drop); }
.fv-btn:hover { background: var(--hover-bg); }
.fv-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--drop); }
.fv-btn .ico { width: 20px; height: 20px; }
.fv-scale { min-width: 58px; }
.fv-close { color: var(--c-red); }
.fv-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(rgba(52, 64, 47, .08) 1px, transparent 1.3px) 0 0 / 10px 10px, #ece6d6; cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-select: none; }
.fv-stage.is-zoomed { cursor: grab; }
.fv-stage.is-zoomed:active { cursor: grabbing; }
.fv-stage img { max-width: none; background: #fff; box-shadow: 0 10px 30px -12px rgba(52, 64, 47, .6); transform-origin: center; will-change: transform; pointer-events: none; }
.fv-hint { margin: 0; padding: 4px 10px 6px; font-size: .72rem; color: var(--text-dim); background: var(--paper-2); border-top: 1px solid var(--line); }
.fv-hint-touch { display: none; }
@media (hover: none) { .fv-hint-touch { display: inline; } }
@media (min-width: 900px) {
  .flyer-viewer { top: calc(var(--header-h) + 14px); right: 14px; bottom: 14px; width: min(46vw, 680px); border-radius: 8px; }
  html.fv-open main { padding-right: calc(min(46vw, 680px) + 28px); }
}
@media (min-width: 1400px) {
  /* 右のサイドバーの列（300px）は「大きく見る」の下に隠れるだけなので、その分を余白から引く（2026-10-26 ユーザー指摘。引かずにいたのでフォームが細くなっていた） */
  html.fv-open .site-body:has(> .site-rail-right) > main { padding-right: calc(min(46vw, 680px) + 28px - 300px); }
}
@media (max-width: 899px) {
  .flyer-viewer { left: 0; right: 0; bottom: 0; height: 48vh; height: 48dvh; border-radius: 8px 8px 0 0; border-bottom: 0; }
  html.fv-open main { padding-bottom: 50vh; }
}
html.fv-full .flyer-viewer { top: calc(var(--header-h) + 8px); left: 8px; right: 8px; bottom: 8px; width: auto; height: auto; border-radius: 8px; border-bottom: 2px solid var(--frame); }
.existing-flyers { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; }
.existing-flyer { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 124px; font-size: .8rem; font-weight: 700; }
.existing-flyer img { width: 124px; height: 165px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-strong); box-shadow: none; }

.form-submit { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 30px 0; }

/* 足りない項目の案内（送信ボタンの上の一覧・項目名の札・移動したときの光） */
.form-problems { max-width: 840px; margin: 26px auto 0; padding: 14px 16px; border-radius: 6px; border: 2px solid var(--need-line); background: #fff4f2; animation: rise .4s var(--ease-out) both; }
.form-problems[hidden] { display: none; }
.form-problems-title { margin: 0; font-weight: 900; color: var(--need-ink); }
.needs-input { position: relative; border-radius: 6px; background: var(--need-bg); box-shadow: 0 0 0 8px var(--need-bg); }
.needs-input input:not([type="checkbox"]):not([type="radio"]), .needs-input select, .needs-input textarea { border-color: var(--need-line); }
.needs-input .choice { border-color: var(--need-line); }
.needs-input > label::after, .needs-input > legend::after { content: "まだ空いています"; display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 5px; background: #fff; border: 1.5px solid var(--need-line); color: var(--need-ink); font-size: .66rem; font-weight: 800; vertical-align: 2px; }
.problem-links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.problem-link { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 3px 12px; border-radius: 999px; border: 1.5px solid var(--need-line); background: var(--need-bg); color: var(--need-ink); font-size: .85rem; font-weight: 800; text-decoration: none; transition: background .2s, transform .2s var(--ease); }
.problem-link::after { content: "→"; font-weight: 700; opacity: .7; }
.problem-link:hover { color: var(--need-ink); background: #fbd9d3; transform: translateY(-1px); }
.extract-status .problem-links { margin-top: 8px; }
.field.is-attn, #f-flyers.is-attn { border-radius: 6px; animation: attn 1.7s var(--ease-out); }
@keyframes attn {
  0% { box-shadow: 0 0 0 0 rgba(227, 180, 64, .9); background: rgba(255, 236, 170, .7); }
  40% { box-shadow: 0 0 0 10px rgba(227, 180, 64, .3); background: rgba(255, 236, 170, .55); }
  100% { box-shadow: 0 0 0 16px rgba(227, 180, 64, 0); background: transparent; }
}

/* 画面の下に出るお知らせ（読み取りの完了・足りない項目）。スマホでも気づけるよう、閉じるまで残す */
.toast { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 150; width: min(540px, calc(100vw - 20px)); max-height: 70vh; overflow-y: auto; padding: 14px 46px 14px 16px; border-radius: 8px; background: var(--paper); border: 2px solid var(--frame); box-shadow: 5px 5px 0 var(--drop), 0 24px 60px -20px rgba(60, 50, 20, .55); transform: translate(-50%, 150%); transition: transform .5s var(--ease-out); }
.toast.is-in { transform: translate(-50%, 0); }
.toast-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 900; font-size: 1.05rem; }
.toast-title::before { content: "✓"; flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-green); color: #fff; font-size: .9rem; animation: pop-in .5s var(--ease-out) .15s both; }
.toast-error { border-color: #c25a4e; }
.toast-error .toast-title::before { content: "!"; background: var(--c-red); }
.toast-info .toast-title::before { content: "i"; background: var(--c-indigo); }
.toast-text { margin: 0 0 2px; font-size: .9rem; color: var(--text-soft); }
.toast-links-title { margin: 8px 0 0; font-size: .8rem; font-weight: 900; color: var(--need-ink); }
.toast-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.toast-actions .btn { min-height: 42px; padding: 6px 16px; font-size: .9rem; }
.toast-close { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--text-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.toast-close:hover { background: var(--tint); }
.form-submit .btn-large { min-width: min(100%, 340px); }

.danger-zone { border: 2px solid var(--c-danger); max-width: 840px; margin: 36px auto 0; background: #fbefe9; box-shadow: 4px 4px 0 rgba(201, 53, 53, .35); }
.danger-zone h2 { margin-top: 0; font-size: 1.1rem; color: #a03a30; }
.danger-zone .choice { margin: 4px 0 12px; }

/* ---------- 完了・QR ---------- */

.done { max-width: 760px; margin: 0 auto 20px; text-align: center; }
.done h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900; text-shadow: 3px 3px 0 #efd27c; animation: title-in 1s var(--ease-out) .2s both; }
/* 投稿完了: 駅の記念スタンプ（ロゴ案 B2。assets/img/brand/stamp.webp）を、紙に「ぽん」と押す（2026-10-15） */
.done-stamp { width: clamp(150px, 36vw, 196px); margin: 0 auto 12px; }
.done-stamp img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; rotate: -8deg; animation: stamp-in .6s cubic-bezier(.25, .9, .35, 1.25) .2s both; }
@keyframes stamp-in { 0% { opacity: 0; scale: 1.9; rotate: -22deg; filter: blur(3px); } 55% { opacity: 1; scale: .9; filter: none; } 78% { scale: 1.04; } }
@keyframes pop-in { from { transform: scale(0); opacity: 0; } }
.done .hud-label { justify-content: center; }
.done-title { font-weight: 900; font-size: 1.1rem; }
.done-title span { font-weight: 700; color: var(--text-soft); font-size: .95rem; }
.qr-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px; margin: 20px 0; padding: 20px; border-radius: 8px; border: 1.5px dashed var(--line-strong); background: var(--paper-2); text-align: left; }
.qr-image { position: relative; width: 210px; max-width: 100%; background: #fff; padding: 8px; border-radius: 6px; border: 2px solid var(--frame); box-shadow: 4px 4px 0 var(--drop); overflow: hidden; }
.qr-image::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c-leaf); box-shadow: 0 0 12px 3px rgba(120, 173, 92, .5); animation: scan-qr 2.6s ease-in-out infinite; }
@keyframes scan-qr { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(200px); } }
.qr-image svg { display: block; width: 100%; height: auto; }
.qr-text { flex: 1 1 260px; min-width: 0; }
.qr-text h2 { margin: 0 0 6px; font-size: 1.08rem; }
.qr-text p { margin: 0 0 12px; font-size: .92rem; }
.qr-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.share-url { text-align: left; margin: 0 0 18px; }
.share-url label { font-weight: 900; font-size: .9rem; }
.copy-row { display: flex; gap: 10px; margin-top: 4px; }
.copy-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: .88rem; }
.done .notice-box { text-align: left; }
.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 24px; }

/* ---------- カレンダー ---------- */

.calendar { position: relative; padding: 22px; border-radius: 8px; border: 2px solid var(--frame); background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 6px 6px 0 var(--drop); }
.cal-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 18px; }
.cal-nav > :last-child { justify-self: end; }
.cal-month { margin: 0; text-align: center; line-height: 1.1; }
.cal-month-num { display: block; font-family: var(--mono); font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 800; letter-spacing: .06em; color: var(--ink); text-shadow: 3px 3px 0 #efd27c, 5px 5px 0 rgba(120, 173, 92, .35); }
.cal-month-jp { font-size: .9rem; font-weight: 800; color: var(--text-soft); }
.cal-month-jp small { font-family: var(--mono); color: var(--c-green); margin-left: 4px; font-weight: 800; }
.cal-table { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; margin: -6px; width: calc(100% + 12px); }
.cal-table th { font-family: var(--mono); font-size: .78rem; padding: 2px 0 6px; color: var(--text-dim); font-weight: 800; }
.cal-table th.sun { color: var(--c-sun); } .cal-table th.sat { color: var(--c-sat); }
.cal-table td { position: relative; height: 108px; padding: 0; vertical-align: top; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
.cal-table td.blank { background: transparent; box-shadow: none; }
.cal-cell { position: relative; display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: 6px; color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), background .25s, box-shadow .25s; }
a.cal-cell:hover { color: var(--ink); transform: translate(-2px, -3px); background: var(--hover-bg); box-shadow: inset 0 0 0 1px var(--line-strong), var(--soft-shadow); z-index: 5; }
.cal-day { font-family: var(--mono); font-weight: 800; font-size: .95rem; }
.sun .cal-day { color: var(--c-sun); } .sat .cal-day { color: var(--c-sat); }
td.past { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
td.past .cal-day { color: rgba(138, 143, 126, .45); }
td.has-ev { background: linear-gradient(160deg, rgba(242, 179, 61, calc(.16 + var(--heat) * .08)), rgba(242, 179, 61, calc(.08 + var(--heat) * .05))), var(--paper); box-shadow: inset 0 0 0 1.5px rgba(233, 162, 31, calc(.35 + var(--heat) * .1)); }
td.today { box-shadow: inset 0 0 0 3px var(--c-rice); }
.cal-today { position: absolute; right: 8px; top: 9px; padding: 0 5px; border-radius: 4px; background: var(--c-forest); font-family: var(--mono); font-size: .56rem; font-weight: 800; letter-spacing: .12em; color: #fff; }
.cal-thumbs { display: flex; margin-top: auto; padding-left: 6px; }
.cal-thumb { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; overflow: hidden; background: var(--tint); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--frame); transition: transform .3s var(--ease); }
.cal-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
a.cal-cell:hover .cal-thumb { transform: translateY(-3px); }
a.cal-cell:hover .cal-thumb:nth-child(2) { transition-delay: .05s; }
a.cal-cell:hover .cal-thumb:nth-child(3) { transition-delay: .1s; }
.cal-count { position: absolute; right: 8px; bottom: 8px; font-family: var(--mono); font-weight: 800; font-size: 1rem; color: var(--c-green); }
.cal-count small { font-family: var(--sans); font-size: .62rem; margin-left: 1px; color: var(--text-soft); }
/* マウスを乗せたときの中身の見本 */
.cal-peek { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 20; width: 250px; padding: 12px 14px; border-radius: 6px; background: var(--paper); border: 2px solid var(--frame); box-shadow: 4px 4px 0 var(--drop), 0 20px 40px -16px rgba(96, 84, 52, .5); text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.96); transition: opacity .25s, transform .3s var(--ease-out), visibility 0s .3s; }
.cal-peek::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: var(--paper); border-right: 2px solid var(--frame); border-bottom: 2px solid var(--frame); transform: rotate(45deg); }
tr td:nth-child(-n+2) .cal-peek { left: 0; transform: translate(0, 8px) scale(.96); }
tr td:nth-child(-n+2) .cal-peek::after { left: 30px; }
tr td:nth-child(n+6) .cal-peek { left: auto; right: 0; transform: translate(0, 8px) scale(.96); }
tr td:nth-child(n+6) .cal-peek::after { left: auto; right: 25px; }
@media (min-width: 601px) {
  a.cal-cell:hover .cal-peek, a.cal-cell:focus-visible .cal-peek { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .25s, transform .35s var(--ease-out), visibility 0s; }
  tr td:nth-child(-n+2) a.cal-cell:hover .cal-peek, tr td:nth-child(n+6) a.cal-cell:hover .cal-peek,
  tr td:nth-child(-n+2) a.cal-cell:focus-visible .cal-peek, tr td:nth-child(n+6) a.cal-cell:focus-visible .cal-peek { transform: none; }
}
.cal-peek-date { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: .72rem; font-weight: 800; color: var(--c-forest); letter-spacing: .08em; }
.cal-peek-item { display: block; font-size: .82rem; font-weight: 800; line-height: 1.45; padding: 3px 0; border-top: 1.5px dashed var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-peek-item b { font-family: var(--mono); font-weight: 800; color: var(--c-indigo); margin-right: 6px; font-size: .74rem; }
.cal-peek-more { display: block; font-size: .74rem; font-weight: 700; color: var(--text-soft); padding-top: 3px; }
.cal-peek-hint { display: block; margin-top: 6px; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; color: var(--text-dim); }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; font-size: .8rem; font-weight: 700; color: var(--text-soft); }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.lg-ev { background: rgba(242, 179, 61, .35); box-shadow: inset 0 0 0 1.5px rgba(233, 162, 31, .7); }
.lg-today { box-shadow: inset 0 0 0 2.5px var(--c-rice); margin-left: 8px; }

/* 日付を押したときに開く一覧（Popover API） */
.cal-pop { display: none; }
.cal-pop:popover-open {
  display: block; position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px)); max-height: min(72vh, 600px); overflow-y: auto; margin: 0; padding: 18px;
  border-radius: 8px; border: 2px solid var(--frame); background: var(--paper); color: var(--text);
  box-shadow: 7px 7px 0 var(--drop), 0 40px 80px -20px rgba(96, 84, 52, .55);
  animation: pop-open .45s var(--ease-out) both;
}
.cal-pop.is-anchored:popover-open { top: var(--py); left: var(--px); transform: none; animation-name: pop-open-anchored; }
.cal-pop::backdrop { background: rgba(52, 64, 47, .22); backdrop-filter: blur(3px); }
@keyframes pop-open { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); filter: blur(8px); } }
@keyframes pop-open-anchored { from { opacity: 0; transform: translateY(10px) scale(.95); filter: blur(8px); } }
.cal-pop-head { position: relative; padding-right: 48px; margin-bottom: 10px; }
.cal-pop-head h3 { margin: 0; font-size: 1.25rem; font-weight: 900; }
.cal-pop-head h3 span { font-family: var(--mono); font-size: .9rem; color: var(--c-green); margin-left: 6px; }
.cal-pop-head .icon-button { position: absolute; right: 0; top: 0; }
.cal-pop-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.cal-pop-list li { animation: rise .5s var(--ease-out) calc(var(--i) * 50ms + .1s) both; }
.cal-pop-list a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s; }
.cal-pop-list a:hover { color: var(--ink); border-color: var(--ink); background: var(--hover-bg); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--drop); }
.cal-pop-thumb { flex: none; display: grid; place-items: center; width: 54px; height: 70px; border-radius: 6px; overflow: hidden; background: var(--tint); border: 1.5px solid var(--frame); }
.cal-pop-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cal-pop-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.4; }
.cal-pop-time { font-family: var(--mono); font-size: .74rem; font-weight: 800; color: var(--c-indigo); }
.cal-pop-title { font-weight: 900; font-size: .95rem; }
.cal-pop-place { display: flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; color: var(--text-soft); }
.cal-pop-place .ico { width: 12px; height: 12px; color: var(--text-soft); }
.cal-pop-go { flex: none; color: var(--text-dim); transition: transform .3s var(--ease), color .3s; }
.cal-pop-list a:hover .cal-pop-go { color: var(--c-forest); transform: translateX(3px); }

/* ---------- 庄原市の地図（7地域・22の自治振興区） ---------- */

.smap { margin: 0; }
.smap-stage { position: relative; overflow: hidden; border-radius: 6px; border: 1.5px solid var(--line-strong); background: radial-gradient(rgba(52, 64, 47, .07) 1px, transparent 1.3px) 0 0 / 8px 8px, #f7f2e4; }
.smap-svg { display: block; width: 100%; height: auto; padding: 4% 5% 3%; overflow: visible; }
.smap-shadow { fill: rgba(110, 60, 30, .1); transform: translate(9px, 9px); }
.smap-d { stroke: rgba(52, 64, 47, .32); stroke-width: 1.6; stroke-linejoin: round; transition: fill .3s, filter .3s, opacity .3s; }
.smap-edge { fill: none; stroke: var(--frame); stroke-width: 4.5; stroke-linejoin: round; pointer-events: none; }
/* 色は自治振興区の地図の塗り分けに合わせる */
/* 地域の色: サイトの里山の色（若葉・稲穂・空・藤・杉・水・桃）を水彩のように薄めたもの。隣り合う地域は違う色みにする */
.r-takano .smap-d { fill: #d3e4ae; }   /* 若葉 */
.r-hiwa .smap-d { fill: #f0d68f; }     /* 稲穂 */
.r-kuchiwa .smap-d { fill: #c9dcec; }  /* 空 */
.r-saijo .smap-d { fill: #dcd3ee; }    /* 藤 */
.r-tojo .smap-d { fill: #bcd8c2; }     /* 杉 */
.r-shobara .smap-d { fill: #f2cbd1; }  /* 桃 */
.r-soryo .smap-d { fill: #bfdedb; }    /* 水 */
a.smap-region { cursor: pointer; outline: none; }
a.smap-region:hover .smap-d, a.smap-region:focus-visible .smap-d { filter: brightness(1.07) saturate(1.3); }
.has-selected .smap-region:not(.is-on) .smap-d { filter: saturate(.4) brightness(1.05); opacity: .8; }
/* 指した地域・選んだ地域のふち（いちばん上に重ねる） */
.smap-hl { fill: none; stroke: #e3b440; stroke-width: 10; stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity .25s; filter: drop-shadow(0 0 6px rgba(227, 180, 64, .9)); }
.smap-svg:has(.r-takano:hover, .r-takano:focus-visible) .hl-takano,
.smap-svg:has(.r-hiwa:hover, .r-hiwa:focus-visible) .hl-hiwa,
.smap-svg:has(.r-kuchiwa:hover, .r-kuchiwa:focus-visible) .hl-kuchiwa,
.smap-svg:has(.r-saijo:hover, .r-saijo:focus-visible) .hl-saijo,
.smap-svg:has(.r-tojo:hover, .r-tojo:focus-visible) .hl-tojo,
.smap-svg:has(.r-shobara:hover, .r-shobara:focus-visible) .hl-shobara,
.smap-svg:has(.r-soryo:hover, .r-soryo:focus-visible) .hl-soryo { opacity: 1; }
/* 選んだ地域のふちは動かさない（点線が流れるのは落ち着かない、との指摘。2026-10-14） */
.smap-hl.is-on { opacity: 1; filter: none; stroke: var(--c-rice); stroke-width: 8; }
.smap-label { pointer-events: none; }
.smap-name { font: 900 32px var(--sans); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 8px; stroke-linejoin: round; letter-spacing: .04em; }
.smap-bubble { fill: var(--c-green); stroke: var(--frame); stroke-width: 4.5; }
.smap-num { font: 800 34px var(--mono); fill: #fff; text-anchor: middle; }
.smap-pulse { fill: none; stroke: var(--c-green); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s ease-out infinite; }
@keyframes map-pulse { from { transform: scale(.95); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.smap-pin { animation: pin-drop .8s var(--ease-out) both, pin-bob 2.6s ease-in-out .8s infinite; }
.smap-pin path { fill: var(--c-green); stroke: var(--frame); stroke-width: 4.5; stroke-linejoin: round; }
.smap-pin-dot { fill: #fff; }
.smap-pin .smap-pulse { stroke: var(--c-green); }
@keyframes pin-drop { from { transform: translateY(-70px); opacity: 0; } }
@keyframes pin-bob { 50% { transform: translateY(-7px); } }
.smap-near, .smap-groups { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; }
.smap-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 5px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: .74rem; font-weight: 800; line-height: 1.6; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.smap-groups .smap-chip { padding-left: 9px; }
a.smap-chip:hover { color: var(--ink); border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--drop); }
.smap-chip b { font-family: var(--mono); color: var(--text-dim); margin-left: 2px; }
.smap-chip.has-ev b { color: var(--ink); }
.smap-chip.is-on { background: var(--on-bg); border-color: var(--c-rice); color: var(--on-text); }
.smap-chip.is-on b { color: var(--on-text); }
.smap-arrow { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); color: var(--on-ink); }
.smap-arrow .ico { width: 11px; height: 11px; stroke-width: 2.8; transform: rotate(var(--rot)); }
.smap-side .smap-name { font-size: 38px; }
.smap-side .smap-svg { padding: 3% 4% 2%; }
.smap-venue { max-width: 270px; margin-top: 10px; }
.smap-venue .smap-name { font-size: 40px; }
.smap-venue .smap-label:not(:has(.smap-pin)) .smap-name { opacity: .55; }
/* 自治振興区：分かっている投稿の印・会場の区・投稿フォームで選ぶ地図 */
.smap-dot-core { fill: var(--c-green); stroke: var(--frame); stroke-width: 3.5; }
.smap-dot-pulse { fill: none; stroke: var(--c-green); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.4s ease-out infinite; }
.smap-dhl { fill: none; stroke: var(--c-rice); stroke-width: 7; stroke-linejoin: round; pointer-events: none; }
.smap-d.is-pin { filter: saturate(1.4) brightness(1.03); }
.smap-dname { font-size: 30px; }
.smap-venue .smap-dname { font-size: 36px; opacity: 1; }
.opt { display: inline-block; font-size: .72rem; font-weight: 800; color: var(--text-soft); background: var(--tint); padding: 0 7px; border-radius: 5px; vertical-align: 2px; margin-left: 4px; }
.smap-picker { max-width: 480px; margin-top: 10px; }
.smap-picker[hidden] { display: none; }
.smap-picker .smap-svg { padding: 3% 4% 2%; }
.dp-d { cursor: pointer; outline: none; transition: fill .2s, filter .2s, opacity .2s, stroke-width .2s; }
.dp-d:hover, .dp-d:focus-visible { filter: brightness(1.07) saturate(1.5); stroke: var(--ink); stroke-width: 4; }
.dp-d.is-dim { opacity: .4; filter: saturate(.3); }
.dp-d.is-on { opacity: 1; filter: saturate(1.6) brightness(1.02); }
.dp-hl { fill: none; stroke: var(--c-rice); stroke-width: 8; stroke-linejoin: round; pointer-events: none; }
.dp-name { font-size: 24px; font-weight: 800; pointer-events: none; }

/* ---------- 文章ページ ---------- */

.prose { max-width: 880px; line-height: 1.95; }
.prose h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 900; margin: 1.8em 0 .6em; }
.prose h2::before { content: ""; width: 6px; height: 1.1em; border-radius: 3px; background: linear-gradient(180deg, var(--c-rice) 0 33%, var(--c-forest) 33% 66%, var(--c-leaf) 66%); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.3em; }
.prose li::marker { color: var(--text-soft); }
.prose .info-list { box-shadow: none; }
/* プライバシーポリシー: 要点と、消える時期の一覧 */
.privacy-points { list-style: none; padding: 0 !important; margin: 0 0 8px; display: grid; gap: 10px; }
.privacy-points li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 6px; background: var(--paper-2); border: 1.5px solid var(--line); line-height: 1.8; }
.privacy-points li > .ico { flex: none; width: 26px; height: 26px; margin-top: 2px; padding: 4px; border-radius: 50%; background: #e6f0dc; color: var(--c-green); }
.retention-table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.6; }
.retention-table th, .retention-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.retention-table thead th { background: var(--paper-2); color: var(--text-soft); font-size: .82rem; white-space: nowrap; }
.retention-table tbody th { font-weight: 800; }
.retention-table td:last-child { color: var(--c-forest); font-weight: 800; white-space: nowrap; }
.retention-table tr:last-child th, .retention-table tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .retention-table thead { display: none; }
  .retention-table tr { display: grid; gap: 1px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
  .retention-table th, .retention-table td { padding: 0; border: 0; }
  .retention-table td:last-child { white-space: normal; }
  .retention-table td:last-child::before { content: "→ "; }
}
.notfound .hud-label { justify-content: center; }

/* ---------- 管理画面 ---------- */

.admin-head h1 { margin: 0 0 8px; }
.admin-ai { background: var(--ai-bg); border: 1.5px solid var(--ai-line); border-radius: 6px; padding: 8px 12px; font-size: .9rem; }
.admin-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 16px; }
.admin-tabs a[aria-current="page"] { font-weight: 900; color: var(--ink); text-decoration: none; }
.table-wrap { overflow-x: auto; background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--radius); margin-bottom: 20px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { background: var(--paper-2); white-space: nowrap; color: var(--text-soft); }
.admin-thumb { width: 48px; height: 64px; object-fit: cover; border-radius: 6px; }
.admin-flyers { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.admin-flyers img { width: 120px; height: 160px; object-fit: cover; border-radius: 5px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-actions form { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-search { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; max-width: 640px; }
.admin-search input { flex: 1 1 200px; width: auto; }
.report-list { padding-left: 1.2em; }
.report-list li { margin-bottom: 8px; }
.report-list li.resolved { color: var(--text-dim); }

/* ---------- 狭い画面 ---------- */

@media (max-width: 600px) {
  :root { --header-h: 58px; }
  :root { --gutter: 12px; }
  .header-inner { gap: 8px; }
  .logo { --logo-h: 42px; }
  .logo-jp { font-size: calc(var(--logo-h) * .28); letter-spacing: .24em; margin-right: -.24em; } /* 小さい画面でも読める大きさに */
  .hud-coord { display: none; }
  .global-nav { gap: 2px; }
  .nav-link { flex-direction: column; gap: 0; padding: 4px 8px; font-size: .66rem; border-radius: 6px; }
  .nav-link .ico { width: 20px; height: 20px; }
  .nav-link::after { left: 8px; right: 8px; bottom: 1px; }
  .nav-post { margin-left: 4px; }
  .hero { min-height: 0; }
  .hero-inner { padding-top: 26px; }
  .hero-wall { inset: -10% -40% -6%; gap: 16px; transform: perspective(1000px) rotateX(20deg) rotateZ(-8deg) scale(1.05); }
  .wall-row { gap: 16px; padding-right: 16px; }
  .wall-tile { height: 120px; border-width: 5px 5px 12px; }
  .wall-tile::after { inset: -5px -5px -12px; }
  .hero-title { text-shadow: 2px 2px 0 #efd27c, 4px 4px 0 rgba(120, 173, 92, .45); }
  .board { padding-top: 26px; }
  .card-body { padding: 10px 11px 12px; }
  .card-title { font-size: .92rem; }
  .card-body > .countdown { padding: 2px 10px 2px 7px; }
  .panel, .form-section { padding-left: 16px; padding-right: 16px; }
  .event-form::before { left: 32px; }
  .page-head { padding: 26px 20px 22px; border-radius: 8px; box-shadow: 4px 4px 0 var(--drop); }
  .event-head { padding: 26px 20px 22px; border-radius: 8px; box-shadow: 4px 4px 0 var(--drop); }
  .row { grid-template-columns: 1fr; gap: 0; }
  .row.row-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* 日程の行の日付・時刻は横に2つ並べる */
  .row.row-times > :first-child { order: 1; } /* 狭い画面は開始・終了を先に、開場（あれば）を次の段に */
  .session { padding: 10px 10px 0; }
  .flyer-slots { gap: 8px; }
  .flyer-icon { width: 40px; height: 40px; }
  .flyer-label { font-size: .7rem; }
  .info-list { grid-template-columns: 6.6em minmax(0, 1fr); }
  .info-list dt, .info-list dd { padding: 10px 12px; }
  .info-list dt .ico { display: none; }
  .description { padding: 20px 16px 18px 28px; }
  .description::after { left: 16px; }
  .event-actions .btn { flex: 1 1 calc(50% - 12px); padding-right: 12px; font-size: .88rem; }
  .event-actions .btn small { display: none; }
  .calendar { padding: 14px 10px; border-radius: 8px; box-shadow: 4px 4px 0 var(--drop); }
  .cal-nav-text { display: none; }
  .cal-nav .btn { padding: 6px 8px; min-height: 44px; }
  .cal-table { border-spacing: 3px; margin: -3px; width: calc(100% + 6px); }
  .cal-table td { height: 62px; border-radius: 5px; }
  .cal-cell { padding: 5px; border-radius: 5px; align-items: center; }
  .cal-day { font-size: .85rem; }
  .cal-today, .cal-thumbs, .cal-peek { display: none; }
  .cal-count { position: static; margin-top: auto; font-size: .82rem; }
  .cal-count small { display: none; }
  .cal-pop:popover-open, .cal-pop.is-anchored:popover-open { top: auto; left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-height: 78vh; border-radius: 8px 8px 0 0; border-bottom: 0; box-shadow: 0 -6px 0 var(--drop); animation: sheet-up .45s var(--ease-out) both; }
  .qr-image { width: 180px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------- トップのメインエリア（見に来た人向け）: いつ・だれと・どこで ＋ 棚 ＋ この先の予定 ---------- */

.results-all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; font-weight: 800; color: var(--c-forest); text-decoration: none; white-space: nowrap; }
.results-all .ico { width: 15px; height: 15px; }
.results-all + .filter-open { margin-left: 0; }

/* 札のボタン（件数入り）。トップの「いつ・どこで・なにを」、日付・地域・定期のページで使う */
.ask-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 3px 12px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: .88rem; font-weight: 800; text-decoration: none; box-shadow: none; transition: transform .15s var(--ease), background .2s; }
.ask-chip:hover { color: var(--ink); background: var(--hover-bg); }
.ask-chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--drop); }
.ask-chip b { font-family: var(--mono); font-size: .92rem; color: var(--ink); }
.ask-chip .ico { width: 16px; height: 16px; color: var(--c-forest); }
.ask-chip.is-zero { border-style: dashed; border-color: var(--line-strong); box-shadow: none; color: var(--text-soft); }
.ask-chip.is-zero b { color: var(--text-dim); }
.ask-chip.is-on { background: var(--on-bg); border-color: var(--c-rice); color: var(--on-text); }
.ask-chip.is-on b, .ask-chip.is-on .ico { color: var(--on-text); }

/* 棚（見出しの左の色で種類を見分ける） */
.shelf { margin: 0 0 34px; }
.shelf-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.shelf-head h3 { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0; padding-left: 15px; font-size: 1.22rem; font-weight: 900; line-height: 1.4; }
.shelf-head h3::before { content: ""; position: absolute; left: 0; top: .22em; bottom: .22em; width: 6px; border-radius: 3px; background: var(--shelf-color, var(--c-forest)); }
.shelf-head h3 small { font-size: .8rem; font-weight: 800; color: var(--text-soft); }
.shelf-more { margin-left: auto; display: inline-flex; align-items: baseline; gap: 3px; font-size: .86rem; font-weight: 800; color: var(--c-forest); text-decoration: none; white-space: nowrap; }
.shelf-more b { margin-left: 3px; font-family: var(--mono); font-size: .95rem; color: var(--ink); }
.shelf-more .ico { align-self: center; width: 15px; height: 15px; }
.shelf-soon { --shelf-color: var(--c-sky); }
.shelf-weekend { --shelf-color: var(--c-rice); }
.shelf-kids { --shelf-color: var(--c-leaf); }
.shelf-deadline { --shelf-color: var(--c-red); }
.shelf-agenda { --shelf-color: var(--c-indigo); }
.shelf-period { --shelf-color: var(--c-sky); }
/* 今週末はいちばん大きな棚。紙を一枚敷いて目立たせる */
.shelf-weekend { padding: 16px 0 20px; border-block: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(242, 179, 61, .16), rgba(242, 179, 61, 0) 60%); }
.shelf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.shelf-empty { margin: 0; padding: 18px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-soft); font-weight: 700; text-align: center; }

/* 1行のイベント（新聞の催し物欄のように） */
.ev-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong); background: rgba(255, 255, 255, .7); }
.ev-row + .ev-row { border-top: 1px solid var(--line); }
.ev-row > a { display: grid; grid-template-columns: 4.9em minmax(0, 1fr) 46px; gap: 12px; align-items: center; padding: 10px 12px 10px 14px; color: inherit; text-decoration: none; transition: background .2s; }
.ev-row > a:hover { color: inherit; background: var(--hover-bg); }
.ev-row-lead { line-height: 1.2; }
.ev-row-lead b { display: block; font-family: var(--mono); font-size: 1rem; font-weight: 800; color: var(--c-indigo); white-space: nowrap; }
.ev-row-lead small { display: block; margin-top: 3px; font-size: .74rem; font-weight: 800; color: var(--text-soft); white-space: nowrap; }
.ev-row-main { display: grid; gap: 2px; min-width: 0; }
.ev-row-title { font-weight: 900; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-row > a:hover .ev-row-title { color: var(--c-forest); }
.ev-row-place { display: flex; gap: 3px; min-width: 0; font-size: .8rem; font-weight: 700; color: var(--text-soft); }
.ev-row-place .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--text-soft); }
.ev-row-place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-row .badges { margin-top: 3px; }
.ev-row-thumb { position: relative; width: 46px; height: 61px; border-radius: 4px; overflow: hidden; background: var(--tint); border: 1px solid var(--line-strong); display: grid; place-items: center; }
.ev-row-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shelf-deadline .ev-row-lead b { color: var(--c-red); }

.agenda-later { margin: 14px 0 0; font-size: .9rem; font-weight: 700; color: var(--text-soft); }
.agenda-later b { font-family: var(--mono); color: var(--c-indigo); }

.home-all { margin: 8px 0 0; text-align: center; }
.home-all .btn small { margin-left: 6px; font-family: var(--mono); font-weight: 800; color: var(--ink); }

@media (max-width: 600px) {
  .results-all { display: none; } /* 狭い画面は、下の「一覧で見る」へ */
  .results-all + .filter-open { margin-left: auto; }
  .shelf { margin-bottom: 28px; }
  .shelf-head h3 { font-size: 1.1rem; }
  .shelf-weekend { padding: 14px 0 16px; }
  /* 棚のカードは、縦長のまま横にめくる（2枚目が少し見える幅） */
  .shelf-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  .shelf-cards::-webkit-scrollbar { display: none; }
  .shelf-cards .card { scroll-snap-align: start; }
  .shelf-cards .badge:nth-child(n+3) { display: none; }
  .ev-row > a { grid-template-columns: 4.3em minmax(0, 1fr) 42px; gap: 10px; padding: 10px 10px 10px 12px; }
  .ev-row-thumb { width: 42px; height: 56px; }
}

/* ---------- さがすページ（日付で・地域で・ジャンルで・詳しく）と定期の集まり ---------- */

/* さがし方の切り替え: 白い帯に4つを並べ、選んでいるものだけ稲穂色の地（案3の形。2026-10-14）。トップでは写真の下端に少し重ねる */
.search-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 26px; padding: 6px; border-radius: 999px; background: var(--paper); box-shadow: 0 14px 34px -14px rgba(38, 48, 59, .3), 0 0 0 1px var(--line); }
.search-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 10px; border-radius: 999px; color: var(--text-soft); font-weight: 800; letter-spacing: .03em; text-decoration: none; transition: color .2s, background .2s; }
.search-tab .ico { display: none; }
.search-tab:hover { color: var(--ink); background: var(--hover-bg); }
.search-tab[aria-current="page"] { color: var(--on-text); background: var(--on-bg); }
.board-main > .search-tabs { margin-top: 0; }

/* 日付で: カレンダー（左）と選んだ日の一覧（右） */
.day-list .shelf-head h2, .area-list .shelf-head h2, .genre-list .shelf-head h2 { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0; padding-left: 15px; font-size: 1.22rem; font-weight: 900; line-height: 1.4; }
.day-list .shelf-head h2::before, .area-list .shelf-head h2::before, .genre-list .shelf-head h2::before { content: ""; position: absolute; left: 0; top: .22em; bottom: .22em; width: 6px; border-radius: 3px; background: var(--c-indigo); }
.day-list .shelf-head h2 small, .area-list .shelf-head h2 small, .genre-list .shelf-head h2 small { font-family: var(--mono); font-size: .9rem; font-weight: 800; color: var(--c-indigo); }
.day-list .shelf-empty a, .area-list .shelf-empty a, .genre-list .shelf-empty a { font-weight: 800; }

/* 地域で・定期の集まり: 地図（左）と一覧（右） */
.area-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .area-layout { grid-template-columns: 340px minmax(0, 1fr); } .area-map { position: sticky; top: calc(var(--header-h) + 18px); } }
/* 地図は小さめに（一覧を主役に。2026-10-14）。小さくしても読めるよう、地域名は少し太く大きく */
.area-map .smap-stage { max-width: 300px; margin-inline: auto; }
@media (max-width: 600px) { .area-map .smap-stage { max-width: 250px; } }
.area-map { display: grid; gap: 12px; padding: 16px; border-radius: 8px; border: 2px solid var(--frame); background: var(--surface); box-shadow: 6px 6px 0 var(--drop); }
.smap-big .smap-name { font-size: 42px; }
.smap-big .smap-svg { padding: 3% 4% 2%; }
.region-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.region-label { margin: 4px 0 -4px; font-size: .82rem; font-weight: 800; color: var(--text-soft); }

/* 自治振興区の地図（定期の集まり） */
.dm-d { cursor: pointer; outline: none; }
.dm-d .smap-d { transition: filter .2s, opacity .2s, stroke-width .2s; }
.dm-d:hover .smap-d, .dm-d:focus-visible .smap-d { filter: brightness(1.06) saturate(1.5); stroke: var(--ink); stroke-width: 4; }
.has-selected .dm-d:not(.is-on) .smap-d { opacity: .55; }
.has-selected .smap-region.is-on .dm-d .smap-d { opacity: 1; }
.dm-d.is-on .smap-d { filter: saturate(1.6); }
.dm-label { pointer-events: none; }
.dm-bubble { fill: var(--c-green); stroke: var(--frame); stroke-width: 3.5; }
.dm-num { font: 800 27px var(--mono); fill: #fff; text-anchor: middle; }
.dm-name { font-size: 24px; }
.dm-label:not(.has-ev) .dm-name { opacity: .6; }
.district-pick { display: grid; gap: 4px; }
.district-pick label { font-size: .82rem; font-weight: 800; color: var(--text-soft); }
.regular-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; } /* 横長のカードなので、日付の一覧（.day-cards）と同じ幅に（2026-10-15） */
.regular-cards .badge-repeat { display: none; } /* このページはすべて定期の集まりなので、札は省く */
.regular-note { margin: 18px 0 0; font-size: .86rem; color: var(--text-soft); }
.page-head-regular p small { display: inline-block; margin-top: 6px; font-size: .86rem; }

/* ジャンルで: 選ぶところ（左）と一覧（右） */
.genre-boxes { display: flex; flex-wrap: wrap; gap: 7px; }
.genre-box { position: relative; cursor: pointer; }
.genre-box input { position: absolute; opacity: 0; pointer-events: none; }
.genre-box span { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 5px 14px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--paper); font-weight: 800; box-shadow: none; transition: background .2s, color .2s; }
.genre-box span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: #fff; flex: none; }
.genre-box input:checked + span { background: var(--on-bg); color: var(--on-text); border-color: var(--c-rice); }
.genre-box input:checked + span::before { background: var(--c-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--c-green); }
.genre-box input:focus-visible + span { outline: 3px solid var(--c-forest); outline-offset: 2px; }
.genre-box span b { font-family: var(--mono); color: var(--ink); }
.genre-box input:checked + span b { color: var(--on-text); }
.genre-box span .ico { width: 16px; height: 16px; }
.genre-box.is-zero span { border-style: dashed; box-shadow: none; color: var(--text-soft); }
.genre-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
html.js .genre-actions .btn-primary { display: none; } /* 印を付けるとすぐ並ぶ（JavaScript がないときだけボタン） */

/* トップ: 定期の集まりへの入口・さがし方の案内 */
.regular-door { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; padding: 16px 18px; border-radius: 8px; border: 1.5px solid var(--frame); background: var(--sky-bg); color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--drop); transition: transform .2s var(--ease); }
.regular-door:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 34px -20px rgba(110, 60, 30, .5); }
.regular-door-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--c-sky-ink); box-shadow: inset 0 0 0 1.5px var(--c-sky); }
.regular-door-text { display: grid; gap: 2px; min-width: 0; }
.regular-door-text b { font-size: 1.05rem; font-weight: 900; }
.regular-door-text small { font-size: .82rem; color: var(--text-soft); }
.regular-door-num { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; white-space: nowrap; }
.regular-door-num b { font-family: var(--mono); font-size: 1.3rem; color: var(--c-sky-ink); }

@media (max-width: 600px) {
  /* 狭い画面は絵＋小さな文字の縦並び。帯は角を少しだけ丸める */
  .search-tabs { gap: 2px; margin: -2px 0 18px; padding: 4px; border-radius: 8px; }
  .search-tab { flex-direction: column; gap: 1px; min-height: 54px; padding: 4px 2px 5px; border-radius: 6px; font-size: .76rem; }
  .search-tab .ico { display: block; width: 20px; height: 20px; }
  .search-tab-more { display: none; }
  .area-map { padding: 12px; border-radius: 8px; box-shadow: 4px 4px 0 var(--drop); }
  .regular-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .regular-door { gap: 10px; padding: 12px 14px; }
  .regular-door-text small { display: none; }
  .nav-long { display: none; }
}

/* ---------- トップ: 見出しの右の「お知らせ・新着」、見出しの下の切り替え、右の「載せる」 ---------- */
@media (min-width: 1000px) { .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.hero-news { position: relative; align-self: center; padding: 14px 16px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .95); box-shadow: var(--soft-shadow); animation: rise 1s var(--ease-out) .7s both; }
html.show-intro .hero-news { animation-delay: 2.3s; }
.hero-notice { display: flex; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border-radius: 5px; background: var(--tint-rice); color: var(--on-text); font-size: .88rem; font-weight: 700; line-height: 1.6; }
.hero-notice .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.hero-news-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-weight: 900; color: var(--ink); }
.hero-news-head .live-dot { align-self: center; background: var(--c-green); }
.hero-news-head .live-dot::after { border-color: var(--c-green); }
.hero-news-head small { font-size: .74rem; font-weight: 700; color: var(--text-soft); }
.hero-news-list { list-style: none; margin: 0; padding: 0; }
.hero-news-list li + li { border-top: 1.5px dashed var(--line); }
.hero-news-list a { display: grid; gap: 1px; padding: 7px 2px; color: var(--ink); text-decoration: none; }
.hero-news-list a:hover .hn-title { color: var(--c-forest); text-decoration: underline; }
.hn-title { font-weight: 800; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-meta { font-size: .76rem; font-weight: 700; color: var(--text-soft); }
/* トップでは、さがし方の帯を見出しの写真の下端に少しかぶせる（案5の重ね方） */
.home-tabs { position: relative; z-index: 2; margin-top: -40px; }
.home-tabs .search-tabs { margin: 0; }
/* トップの帯の形は、ファイル末尾の「さがし方の帯の作り直し」（2026-10-16） */

.home-side .side-inner { padding: 0; border: 0; background: none; box-shadow: none; }
.home-side .side-inner::before { display: none; }
.post-card { padding: 20px 18px 16px; border-radius: 8px; border: 2px solid var(--frame); background: var(--paper); box-shadow: 4px 4px 0 var(--drop); }
.post-card h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 900; }
.post-card-points { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.post-card-points li { position: relative; padding-left: 1.2em; font-size: .9rem; font-weight: 700; color: var(--text-soft); }
.post-card-points li::before { content: "✓"; position: absolute; left: 0; color: var(--c-green); font-weight: 900; }
.post-card-sub { margin: 10px 0 0; font-size: .78rem; color: var(--text-soft); }
@media (max-width: 999px) { .home-side { display: none; } } /* 狭い画面は、ヘッダーの「載せる」で足りる */
/* 見出しの下に回る幅では、新着は1件1行の小さな一覧に（題名・右に地域と時間。3件まで。2026-10-15） */
@media (max-width: 999px) {
  .hero-news { padding: 8px 12px 4px; }
  .hero-news-head { margin: 0 0 2px; font-size: .9rem; }
  .hero-news-head small { display: none; }
  .hero-news-list li + li { border-top-width: 1px; }
  .hero-news-list a { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 5px 2px; }
  .hn-title { font-size: .9rem; }
  .hn-meta { font-size: .72rem; white-space: nowrap; }
  .hero-news-list li:nth-child(n+4) { display: none; }
}
@media (max-width: 600px) {
  .hero-news { padding: 6px 10px 2px; box-shadow: 0 10px 24px -18px rgba(110, 60, 30, .5); }
  .hero-news-list li:nth-child(n+3) { display: none; } /* 狭い画面は新着2件まで */
  .home-tabs { margin-top: -26px; }
}

/* ---------- スマホの見直し（2026-10-13）: 最初の画面でイベントが見えるように・文字を読みやすく ---------- */

/* フォームの説明は短い箇条書きに */
.help-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.help-list li { position: relative; padding-left: 1.1em; }
.help-list li::before { content: "・"; position: absolute; left: 0; color: var(--c-green); font-weight: 900; }
.help-key { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; white-space: nowrap; }
.help-key .ico { width: 15px; height: 15px; color: var(--c-forest); }
/* 詳細: 投稿者の名前は途中で折り返さない・長い URL ははみ出さない */
.poster-name, .nobr { display: inline-block; } /* 文の区切りでだけ折り返す */
.contact-list a { overflow-wrap: anywhere; }
.flyer-swipe-hint { display: none; }
/* 詳細の見出しの会場（狭い画面だけ。広い画面では右の一覧がすぐ見える） */
.event-place { display: none; }

@media (max-width: 600px) {
  .nav-link { font-size: .72rem; padding: 4px 6px; }
  .nav-post { margin-left: 2px; }
  .flyer-label { font-size: .76rem; }
  .wall-tag { display: none; } /* 背景の写真の札は、狭い画面では文字とぶつかるので消す */
  /* 英字の飾り見出しは、狭い画面では場所をとるだけなので省く */
  .hero-copy .hud-label, .page-head .hud-label, .event-head .hud-label, .side-head .hud-label, .footer-sign .hud-label { display: none; }

  /* トップの見出しは背を低く（すぐ下の「いつ・だれと・どこで」と棚を早く見せる） */
  .hero-inner { gap: 10px; padding-top: 18px; padding-bottom: 40px; }
  /* 文字が写真に重なっても読めるよう、紙の色を左から厚めに敷く */
  .hero-shade { background: linear-gradient(90deg, rgba(255, 250, 240, .96) 0%, rgba(255, 250, 240, .9) 62%, rgba(255, 250, 240, .55) 100%); }
  .hero-title { font-size: 1.7rem; }
  .hero-lead { margin-top: 8px; font-size: .9rem; line-height: 1.6; }

  /* 結果: 日付のタブは件数入り・カードは横長の1列（チラシを左、文字を右） */
  .board { padding-top: 18px; }
  .results-head { flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 10px; }
  .results-title { font-size: 1.15rem; white-space: nowrap; padding-bottom: 6px; }
  .results-count { white-space: nowrap; }
  .results-count .mono { font-size: 1.25rem; }
  /* 絞り込みは、ヘッダーの項目と同じ「絵＋小さな文字」の形にして場所をとらない */
  .filter-open { flex: none; flex-direction: column; gap: 0; min-height: 48px; padding: 3px 10px; font-size: .7rem; line-height: 1.3; border-radius: 6px; }
  .filter-open .bi { width: 26px; height: 26px; }
  .filter-open .filter-count { position: absolute; top: -6px; right: -6px; }
  .date-tabs-inline { grid-auto-columns: minmax(74px, 1fr); gap: 6px; }
  .date-tabs-inline .date-tab { padding: 7px 8px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card-thumb { width: 34%; max-width: 140px; min-height: 140px; } /* 横長のカードの、チラシの切り抜き */
  .card-body { padding: 10px 12px 12px; gap: 4px; min-width: 0; }
  .card-title { font-size: 1rem; -webkit-line-clamp: 2; }
  .card-date { font-size: .82rem; }
  .card .badges { margin-top: 2px; padding-top: 2px; }
  .card .badge:nth-child(n+4) { display: none; } /* 札は3つまで（全部は詳細で） */

  /* 詳細: 見出しをつめ、チラシが何枚でも1枚分の高さで横にめくる */
  .event-head { padding: 18px 16px 16px; }
  .event-head h1 { font-size: 1.45rem; margin: 4px 0 10px; }
  .event-date { font-size: 1rem; }
  .event-place { display: flex; gap: 4px; margin: -4px 0 10px; font-size: .9rem; font-weight: 700; color: var(--text-soft); line-height: 1.5; }
  .event-place .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--text-soft); }
  .event-place small { color: var(--text-dim); font-weight: 700; }
  .description::before { display: none; }
  .event-layout { gap: 14px; margin-top: 14px; }
  .flyer-swipe-hint { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0 0 -14px; font-size: .78rem; font-weight: 800; color: var(--text-soft); }
  .flyer-swipe-hint .ico { width: 14px; height: 14px; }
  .event-flyers { grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 18px var(--gutter) 22px; scrollbar-width: none; }
  .event-flyers::-webkit-scrollbar { display: none; }
  .event-flyers:has(> .flyer:only-child) { grid-auto-columns: 100%; }
  .event-flyers > .flyer { scroll-snap-align: center; }
  .info-list { grid-template-columns: 5.8em minmax(0, 1fr); }
  .event-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .event-actions .btn { width: 100%; justify-content: flex-start; }

  /* ページの見出し（カレンダー・投稿など）は小さく */
  .page-head { margin-bottom: 18px; padding: 18px 16px 16px; }
  .page-head h1 { font-size: 1.5rem; margin-bottom: 6px; }
  .page-head p { font-size: .9rem; line-height: 1.75; }
}

/* 投稿フォーム: 一覧に出す部分（カードで切り抜く範囲を、見本の写真に枠で重ねる） */
.flyer-preview { position: relative; }
.focus-frame { position: absolute; z-index: 1; pointer-events: none; border: 2px dashed #fff; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 999px rgba(52, 64, 47, .32); transition: left .25s var(--ease), top .25s var(--ease); }
.focus-pick { display: flex; align-items: center; gap: 6px; flex-basis: 100%; justify-content: center; font-size: .78rem; font-weight: 800; color: var(--text-soft); }
.flyer-tools .focus-pick { flex-direction: column; gap: 2px; }
.flyer-tools .focus-pick > span { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.flyer-tools .focus-pick small { font-size: .7rem; font-weight: 700; opacity: .85; }
.focus-pick select { width: auto; min-height: 34px; padding: 3px 30px 3px 8px; font-size: .82rem; }
.existing-flyer .focus-pick { flex-direction: column; gap: 2px; }

/* ---------- 吹き出し（漫画風の角ばった形。「全部正しいとは限らないよ」を話し言葉で堂々と出す） ---------- */

/* 形は角の位置を px で決めた多角形（大きさが変わっても角の形が同じ）。黒い外側を少し右下にずらして、太い線と影に見せる */
.bubble {
  --bubble-shape: polygon(22px 0, calc(100% - 26px) 5px, 100% 58%, calc(100% - 17px) 100%, 18px 100%, 0 48%);
  position: relative; isolation: isolate; display: block;
  margin: 10px 0 24px; padding: 14px 30px 15px 30px;
  color: var(--ink); font-size: .95rem; font-weight: 700; line-height: 1.75; text-align: left;
}
.bubble::before, .bubble::after { content: ""; position: absolute; clip-path: var(--bubble-shape); pointer-events: none; }
.bubble::before { inset: -3px -4px -7px -3px; z-index: -2; background: var(--ink); }
.bubble::after { inset: 0; z-index: -1; background: #fff; }
.bubble-body { display: block; position: relative; }
.bubble-body a { font-weight: 800; }
.bubble-body small { display: block; margin-top: 2px; font-size: .82rem; font-weight: 600; color: var(--text-soft); }

/* しっぽ（中を白で塗って本体の線を隠し、外側の2辺だけ線を引く） */
.bubble-tail { position: absolute; z-index: 1; overflow: visible; pointer-events: none; }
.bubble-tail .tail-fill { fill: #fff; }
.bubble-tail .tail-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tail-curl { right: 22%; bottom: -15px; width: 26px; height: 19px; }
.tail-zig { right: 24%; bottom: -27px; width: 26px; height: 30px; }
.bubble-zig { margin-bottom: 34px; }

/* 注意の吹き出し（二重投稿など）は、紙の色を少し黄色に */
.bubble-alert::after { background: #fff8de; }
.bubble-alert .tail-fill { fill: #fff8de; }

/* 押す／マウスを乗せると出る吹き出し（食い違いの注意） */
.tip { position: relative; display: inline-block; vertical-align: -3px; margin-left: 6px; }
.tip-btn {
  position: relative; isolation: isolate; display: inline-grid; place-items: center;
  width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  color: #fff; font: 900 .82rem/1 var(--sans);
  animation: tip-wiggle 2.8s ease-in-out infinite;
}
.tip-btn::before, .tip-btn::after { content: ""; position: absolute; clip-path: polygon(6px 0, calc(100% - 7px) 2px, 100% 55%, calc(100% - 5px) 100%, 5px 100%, 0 45%); }
.tip-btn::before { inset: -2px -3px -4px -2px; z-index: -2; background: var(--ink); }
.tip-btn::after { inset: 0; z-index: -1; background: var(--c-ai); } /* 自動チェックの「！」は藤色（AI） */
.tip-btn:hover::after, .tip.is-open .tip-btn::after { background: var(--c-ai-dark); }
@keyframes tip-wiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-9deg); } 95% { transform: rotate(7deg); } }
.tip-pop {
  position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 14px);
  width: max-content; min-width: min(240px, calc(100vw - 32px)); max-width: min(320px, calc(100vw - 32px));
  transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(6px) scale(.96); transform-origin: 50% 100%;
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease-out), visibility 0s .25s;
}
.tip-pop .bubble { margin: 0; font-size: .88rem; padding: 11px 24px 12px 24px; filter: drop-shadow(0 10px 18px rgba(52, 64, 47, .25)); }
.tip-pop .tail-curl { right: auto; left: calc(50% - 13px - var(--tip-shift, 0px)); }
.tip.is-open .tip-pop { opacity: 1; visibility: visible; transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(0) scale(1); transition: opacity .2s, transform .25s var(--ease-out), visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .tip:hover .tip-pop { opacity: 1; visibility: visible; transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(0) scale(1); transition: opacity .2s, transform .25s var(--ease-out), visibility 0s; }
}

/* 置き場所ごとの調整 */
.event-head .bubble { max-width: 640px; margin-top: 16px; }
.event-info > .bubble:first-child { margin-top: 0; }
.form-submit .bubble { max-width: 560px; margin: 0 auto 30px; }

/* ---------- さがすページの作り直し（2026-10-14）: 見出しは帯にしない・日付は小さなカレンダー＋チラシの一覧・ジャンルは上の帯・詳しくは上に条件の表 ---------- */

/* トップ以外の見出しは、写真の帯にせず、文字だけ */
.page-head { margin: 12px 0 14px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.page-head::before, .page-head::after { display: none; }
.page-head h1 { margin: 0 0 4px; font-size: clamp(1.45rem, 3.2vw, 1.9rem); text-shadow: 2px 2px 0 #efd27c; }
.page-head p { font-size: .92rem; line-height: 1.75; }

/* 一覧の見出し（日付・地域・ジャンル・詳しくの結果） */
.date-list .shelf-head h2, .adv-results .shelf-head h2 { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0; padding-left: 15px; font-size: 1.22rem; font-weight: 900; line-height: 1.4; }
.date-list .shelf-head h2::before, .adv-results .shelf-head h2::before { content: ""; position: absolute; left: 0; top: .22em; bottom: .22em; width: 6px; border-radius: 3px; background: var(--c-indigo); }
.date-list .shelf-head h2 small, .adv-results .shelf-head h2 small { font-family: var(--mono); font-size: .9rem; font-weight: 800; color: var(--c-indigo); }
.shelf-more.link-button { display: inline-flex; align-items: center; gap: 4px; }
.shelf-more[hidden] { display: none; }

/* 日付ごとのチラシのカード */
.date-groups { display: grid; gap: 28px; }
.date-groups[hidden], .shelf-empty[hidden] { display: none; }
.day-item { min-width: 0; }
.day-item .card { height: 100%; }

/* 日付でさがす: 左に小さなカレンダー（目印）、右にチラシの一覧 */
.date-layout { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1000px) { .date-layout { grid-template-columns: 290px minmax(0, 1fr); } }
/* 3か月分を縦に並べると背が高いので、画面の高さが十分なときだけ追いかけてくる */
@media (min-width: 1000px) and (min-height: 1000px) { .date-side { position: sticky; top: calc(var(--header-h) + 16px); } }
.date-months { display: grid; gap: 12px; }
.date-month + .date-month { padding-top: 10px; border-top: 1.5px dashed var(--line); }
.date-month .date-cal-nav { justify-content: center; margin: 0 0 6px; }
.date-month-go { display: none; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 6px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; }
.date-month-go:disabled { opacity: .3; cursor: default; }
.date-month-go .ico { width: 16px; height: 16px; }
@media (min-width: 1000px) { .date-months .date-mini .mini-d { aspect-ratio: auto; height: 30px; } }
/* 狭い画面（スマホ）でも3か月分を縦に並べる（2026-10-19 ユーザー指示「スマホでの画面で3か月分カレンダーが出るように」。
   以前は1か月ずつ ‹ › で切り替えていた。‹ › のボタン .date-month-go は出さない） */
.date-cal { padding: 14px 14px 12px; border-radius: 8px; border: 1.5px solid var(--frame); background: var(--paper); box-shadow: 3px 3px 0 var(--drop); }
.date-cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.date-cal-nav b { font-family: var(--mono); font-size: 1.1rem; font-weight: 800; }
.date-cal-nav a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; border: 1.5px solid var(--line-strong); color: var(--ink); }
.date-cal-nav a:hover { color: var(--ink); background: var(--hover-bg); border-color: var(--frame); }
.date-cal-nav .ico { width: 16px; height: 16px; }
.date-mini { user-select: none; -webkit-user-select: none; touch-action: none; }
.date-mini .mini-d { font-size: .84rem; cursor: pointer; transition: background .12s, color .12s; }
.date-mini .mini-d.sun:not(.is-past) { color: var(--c-sun); }
.date-mini .mini-d.sat:not(.is-past) { color: var(--c-sat); }
.date-mini .mini-d.is-sel, .date-mini .mini-d.is-sel:not(.is-past) { background: var(--c-rice); color: var(--ink); }
.date-mini .mini-d.is-sel::after { background: var(--ink); }
.date-mini .mini-d.is-sel-start, .date-mini .mini-d.is-sel-end { box-shadow: inset 0 0 0 2px var(--ink); }
.date-mini.is-dragging { cursor: ew-resize; }
.date-cal-help { margin: 0 0 8px; font-size: .76rem; font-weight: 700; color: var(--text-soft); }
.date-cal .quick-dates { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1.5px solid var(--line); }
.date-cal .ask-chip { min-height: 36px; font-size: .86rem; }

/* ジャンルでさがす: 選ぶところは上の帯 */
.genre-band { display: grid; gap: 10px; margin: 0 0 26px; padding: 14px 16px; border-radius: 8px; border: 1.5px solid var(--frame); background: var(--paper); box-shadow: 3px 3px 0 var(--drop); }
.genre-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 10px; align-items: start; }
.genre-row + .genre-row { padding-top: 10px; border-top: 1.5px dashed var(--line); }
.genre-row-label { padding-top: 9px; font-size: .86rem; font-weight: 900; line-height: 1.3; color: var(--c-forest); }
.genre-band .genre-boxes { gap: 6px; }
.genre-band .genre-box span { min-height: 38px; padding: 4px 12px; font-size: .9rem; }
.genre-band .genre-actions { justify-content: flex-end; }
.genre-band .genre-actions:not(:has(a)) { display: none; }
html:not(.js) .genre-band .genre-actions { display: flex; }
/* 「子どもも参加できる」とジャンル「子育て・親子」のちがい（2026-10-18 本番の点検の指摘）。さらに絞るの段の下、ラベルの列をよけて */
.genre-band .genre-note { margin: 0; padding-left: calc(5.4em + 10px); font-size: .88rem; line-height: 1.7; color: var(--text-dim); }
@media (max-width: 600px) { .genre-band .genre-note { padding-left: 0; } }

/* 詳しくさがす: 上に条件の表 */
.adv-form { display: grid; gap: 16px; margin: 0 0 30px; padding: 20px 22px 18px; border-radius: 8px; border: 2px solid var(--frame); background: var(--paper); box-shadow: 4px 4px 0 var(--drop); }
.adv-form > * + * { padding-top: 16px; border-top: 1.5px dashed var(--line); }
.adv-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 18px; }
.adv-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.adv-field { display: grid; gap: 5px; align-content: start; min-width: 0; }
.adv-field input, .adv-field select { width: 100%; min-width: 0; }
.adv-label { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 900; color: var(--ink); }
.adv-label .ico { width: 16px; height: 16px; color: var(--text-soft); }
.adv-label small { font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.adv-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.adv-form > .adv-set { padding-top: 16px; }
.adv-set > legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; }
.adv-set > legend + * { clear: both; }
.adv-chips, .adv-when { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.adv-chip { position: relative; cursor: pointer; }
.adv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.adv-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 12px; border-radius: 5px; border: 1.5px solid var(--frame); background: #fff; font-size: .9rem; font-weight: 800; transition: background .2s, color .2s; }
.adv-chip input[type="checkbox"] + span::before { content: ""; width: 15px; height: 15px; border-radius: 4px; border: 2px solid var(--frame); background: #fff; flex: none; }
.adv-chip input[type="radio"] + span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--frame); background: #fff; flex: none; }
.adv-chip input:checked + span { background: var(--on-bg); border-color: var(--c-rice); color: var(--on-text); }
.adv-chip input:checked + span::before { background: var(--c-green); border-color: var(--c-green); }
.adv-chip input:focus-visible + span { outline: 3px solid var(--c-forest); outline-offset: 2px; }
.adv-chip:hover span { background: var(--hover-bg); }
.adv-chip input:checked:hover + span, .adv-chip:hover input:checked + span { background: var(--c-rice); }
.adv-range { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.adv-range input { width: 11.5em; }
.adv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; }
.adv-results .active-filters { margin-top: 2px; }

@media (max-width: 999px) {
  .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv-grid .adv-wide { grid-column: 1 / -1; }
  .adv-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .page-head { margin: 8px 0 10px; padding: 0; border-radius: 0; box-shadow: none; }
  .page-head h1 { font-size: 1.35rem; }
  .page-head p { font-size: .86rem; line-height: 1.7; }
  .date-layout { gap: 18px; }
  .date-cal { padding: 10px 10px 10px; }
  .date-mini .mini-d { aspect-ratio: auto; height: 34px; }
  .date-groups { gap: 22px; }
  .day-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .genre-band { padding: 10px 12px; margin-bottom: 20px; }
  .genre-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .genre-row-label { padding-top: 0; }
  .genre-row-label br { display: none; }
  .genre-band .genre-box span { min-height: 36px; padding: 3px 10px; font-size: .84rem; }
  .adv-form { gap: 14px; padding: 14px 14px 16px; box-shadow: 3px 3px 0 var(--drop); }
  .adv-form > * + * { padding-top: 14px; }
  .adv-grid, .adv-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .adv-chip span { font-size: .84rem; padding: 3px 10px; min-height: 36px; }
  .adv-range { width: 100%; margin: 4px 0 0; }
  .adv-range input { flex: 1; width: auto; }
  .adv-actions { gap: 12px; justify-content: center; }
  .adv-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* 日付ごとの一覧: 札の形の日付の見出しを1つ置き、その下にその日のカードを並べる（2026-10-14。日めくりの札をカードの横に置く形は廃止）。
   見出しは画面の上に追いかけてきて、いま見ている日が分かる */
.day-secs { display: grid; gap: 26px; }
.day-sec { scroll-margin-top: calc(var(--header-h) + 16px); }
.day-head {
  position: sticky; top: calc(var(--header-h) + 2px); z-index: 3;
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 6px 0;
  background: rgba(245, 238, 230, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--sans); font-size: 1rem; font-weight: 800; line-height: 1.3;
}
.day-head::after { content: ""; flex: 1; order: 2; height: 1px; background: var(--line-strong); }
/* 値札のような形の日付（右の端を山形に） */
.dh-tag { --tag: var(--text-soft); flex: none; display: inline-flex; align-items: baseline; gap: 1px; padding: 5px 20px 5px 12px; border-radius: 5px 0 0 5px; background: var(--tag); color: #fff; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.dh-tag b { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; }
.dh-tag span { font-size: .9rem; font-weight: 800; }
/* 平日はこげ茶・土曜は青・日曜は赤（紙のカレンダーと同じ。平日のテラコッタが日曜の赤と見分けにくい、との声で 2026-10-16 夜） */
.day-sec.is-sat .dh-tag { --tag: var(--c-sat); }
.day-sec.is-sun .dh-tag { --tag: var(--c-sun); }
.dh-left { flex: none; font-size: .88rem; color: var(--text-soft); }
.dh-left.is-soon { padding: 1px 9px; border-radius: 5px; background: var(--on-bg); color: var(--on-text); }
.dh-count { flex: none; order: 3; font-size: .84rem; font-weight: 800; color: var(--text-soft); }
.day-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; }
@media (max-width: 600px) {
  .day-secs { gap: 20px; }
  .day-head { gap: 8px; margin-bottom: 10px; padding: 5px 0; }
  .dh-tag b { font-size: 1.15rem; }
  .day-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ---------- 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .wall-row { animation: none !important; }
  html.show-intro .intro { display: none; }
  [data-reveal].pre { opacity: 1; transform: none; filter: none; }
}

/* ---------- チラシの形を整える（台形補正・切り抜き）の画面 ---------- */
html.crop-open { overflow: hidden; }
.crop-dialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 12px; background: rgba(52, 64, 47, .55); backdrop-filter: blur(6px); }
.crop-dialog[hidden] { display: none; }
.crop-panel { display: flex; flex-direction: column; width: min(960px, 100%); height: min(92vh, 100%); border: 1.5px solid var(--frame); border-radius: 8px; background: var(--paper); box-shadow: 5px 5px 0 var(--drop); overflow: hidden; }
.crop-head { padding: 14px 18px 8px; }
.crop-head h3 { margin: 0 0 4px; font-size: 1.08rem; color: var(--ink); }
.crop-help { margin: 0; font-size: .86rem; color: var(--text-soft); min-height: 2.6em; }
.crop-stage { position: relative; flex: 1; min-height: 0; margin: 0 12px; border-radius: 6px; background: repeating-conic-gradient(#efe8d8 0 25%, #f8f3e8 0 50%) 0 0 / 20px 20px; touch-action: none; overflow: hidden; }
.crop-canvas { position: absolute; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.crop-svg { position: absolute; inset: 0; overflow: visible; }
.crop-shade { fill: rgba(40, 46, 36, .45); pointer-events: none; }
.crop-quad-under { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: round; pointer-events: none; }
.crop-quad { fill: none; stroke: var(--c-forest); stroke-width: 2.5; stroke-linejoin: round; pointer-events: none; }
.crop-quad.is-bad { stroke: var(--c-red); stroke-dasharray: 8 6; }
.crop-handle { cursor: grab; }
.crop-handle.is-drag { cursor: grabbing; }
.crop-hit { fill: transparent; }
.crop-dot { fill: #fff; stroke: var(--c-forest); stroke-width: 3; transition: r .15s; }
.crop-handle:hover .crop-dot, .crop-handle.is-drag .crop-dot { fill: #fff6d8; r: 14; }
.crop-loupe { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c-forest), 0 6px 16px rgba(0, 0, 0, .25); pointer-events: none; }
.crop-loupe[hidden] { display: none; }
.crop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
.crop-actions .btn-small { padding: 7px 12px; font-size: .84rem; }
.crop-gap { flex: 1; }
@media (max-width: 600px) {
  .crop-dialog { padding: 0; }
  .crop-panel { height: 100%; border-radius: 0; border: 0; box-shadow: none; }
  .crop-head { padding: 10px 14px 6px; }
  .crop-stage { margin: 0 6px; }
  .crop-gap { flex-basis: 100%; height: 0; }
  .crop-actions [data-crop-ok], .crop-actions [data-crop-cancel] { flex: 1; justify-content: center; }
}
.flyer-slot.is-cropped .flyer-preview img { outline: 2px solid var(--c-leaf); outline-offset: -2px; }

/* ---------- 細い線・やわらかな影・明朝の見出し（2026-10-14「棚田の夕焼け」で入れた形） ----------
 * もとは配色の上書きの節だったが、色の指定は 2026-10-17 にそれぞれのベースの行へ畳んだ（色は :root だけで決める）。
 * ここに残るのは、見出しの書体・枠のある部品の線と影・「載せる」の吹き出しなど、形の指定と新しい部品。
 * 暗い色の面（紺や焦げ茶のフッター・帯）は作らない（案1の紺は「暗すぎる」と言われた） */

/* 見出しは明朝（Shippori Mincho B1。fonts.css）。文字影はつけない */
.hero-title, .page-head h1, .event-head h1, .done h1, .results-title, .shelf-head h3, .shelf-head h2, .side-head h2, .post-card h2,
.footer-sign, .intro-jp, .panel h2 {
  font-family: var(--serif); font-weight: 700; text-shadow: none;
}

/* AI のひとこと（カードの売り文句。2026-10-15）: 地域の下に、左の細い線と「AIのひとこと」の小さな札を添えて。投稿者の言葉と取りちがえないように */
.card-catch { display: grid; gap: 1px; margin: 2px 0 0; padding: 1px 0 2px 10px; border-left: 2px solid var(--c-rice); font-size: .88rem; font-weight: 700; line-height: 1.6; color: var(--ink); }
.card-catch span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-catch-by { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 800; color: var(--c-ai); letter-spacing: .04em; line-height: 1.5; }
.card-catch-by .ico { width: 13px; height: 13px; }
@media (max-width: 600px) {
  .card-catch { font-size: .84rem; line-height: 1.55; }
  .card-catch span { -webkit-line-clamp: 2; }
}

/* 枠のある部品は、細い線とやわらかな影に */
.side-inner, .post-card, .area-map, .regular-door, .event-head, .intro-core, .flyer-viewer, .info-list, .cal-pop, .date-cal, .adv-form, .genre-band {
  border: 1px solid var(--line); box-shadow: var(--soft-shadow);
}
@media (max-width: 999px) { html.js .side-inner { box-shadow: -10px 0 30px -12px rgba(110, 60, 30, .35); } }

/* トップの「載せる」: 見出しの右に、白くて太い線のポップな丸い吹き出し（右下に小さなしっぽ）。
 * 線は SVG の2層（線の層を太く塗ってから白で塗る）で、円としっぽの境目が1本の線につながる */
.hero-copy { display: block; }
/* 「載せる」の丸い吹き出し（layout.php の post_bubble）。lg はトップの右のサイドバー、sm はヘッダーの右上 */
.pbub {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; flex: none;
  color: var(--ink); text-decoration: none; rotate: -5deg;
  filter: drop-shadow(0 10px 14px rgba(110, 60, 30, .2));
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.pbub:hover, .pbub:focus-visible { color: var(--ink); transform: rotate(7deg) scale(1.07); }
.pbub:focus-visible { outline: none; }
.pbub:focus-visible .pbub-line { stroke: var(--c-forest); }
.pbub-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pbub-line { fill: var(--ink); stroke: var(--ink); stroke-width: 10; stroke-linejoin: round; }
.pbub-fill { fill: #fff; transition: fill .3s; }
.pbub:hover .pbub-fill, .pbub[aria-current="page"] .pbub-fill { fill: #fff8ec; }
.pbub-body { position: relative; display: grid; justify-items: center; gap: 5px; margin: 0 5% 7% 0; text-align: center; line-height: 1.25; }
.pbub-plus { display: grid; place-items: center; border-radius: 50%; background: var(--c-forest); color: #fff; transition: transform .45s var(--ease); }
.pbub-plus .ico { stroke-width: 2.6; }
.pbub:hover .pbub-plus { transform: rotate(90deg); }
.pbub-body b { font-weight: 900; letter-spacing: .04em; }
.pbub-body small { font-weight: 800; color: var(--c-accent); }
/* 大（トップのサイドバー）: ふわっと出て、ゆっくり上下する */
.pbub-lg { width: min(100%, 190px); margin: 4px auto 14px; animation: post-pop .9s cubic-bezier(.34, 1.56, .64, 1) .7s both, post-bob 4.5s ease-in-out 2s infinite; }
.pbub-lg .pbub-plus { width: 42px; height: 42px; }
.pbub-lg .pbub-plus .ico { width: 22px; height: 22px; }
.pbub-lg .pbub-body b { font-size: 1.18rem; }
.pbub-lg .pbub-body small { font-size: .74rem; }
/* 小（ヘッダーの右上） */
.pbub-sm { width: 58px; margin-left: 8px; rotate: -6deg; filter: drop-shadow(0 4px 6px rgba(110, 60, 30, .18)); }
.pbub-sm .pbub-line { stroke-width: 14; }
.pbub-sm .pbub-body { gap: 1px; margin: 0 6% 8% 0; }
.pbub-sm .pbub-plus { width: 20px; height: 20px; }
.pbub-sm .pbub-plus .ico { width: 13px; height: 13px; }
.pbub-sm .pbub-body b { font-size: .64rem; letter-spacing: 0; }
/* 横長（ヘッダーの右上。2026-10-23 ユーザー指示「このサイトって何なの？」のシールと同じくらいの大きさで、少し目立たせたい）。
 * テラコッタの地に白い字・こげ茶の太い線・右下に小さなしっぽ（しっぽは回した四角の右と下の線）。狭い画面は「イベントを」を省く */
.pbub-wide { --pw-h: 40px; --pw-bg: #fff; aspect-ratio: auto; display: inline-flex; align-items: center; gap: 8px; height: var(--pw-h); margin-left: 10px; padding: 0 16px 0 6px;
  border: 1.5px solid var(--c-forest); border-radius: 999px; background: var(--pw-bg); color: var(--c-forest-dark, #9e4423); rotate: none; white-space: nowrap; filter: none;
  transition: background .15s; }
.pbub-wide::after { content: ""; position: absolute; right: 24px; bottom: -7px; width: 11px; height: 11px; background: var(--pw-bg); transition: background .15s;
  border-right: 1.5px solid var(--c-forest); border-bottom: 1.5px solid var(--c-forest); transform: rotate(40deg) skew(8deg, 8deg); border-bottom-right-radius: 3px; }
.pbub-wide:hover, .pbub-wide:focus-visible, .pbub-wide[aria-current="page"] { --pw-bg: color-mix(in srgb, var(--c-forest) 9%, #fff); color: var(--c-forest-dark, #9e4423); transform: none; }
.pbub-wide:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 2px; }
.pbub-wide .pbub-plus { width: 26px; height: 26px; background: var(--c-forest); color: #fff; flex: none; }
.pbub-wide:hover .pbub-plus { transform: none; }
.pbub-wide .pbub-plus .ico { width: 15px; height: 15px; }
.pbub-wide b { font-size: .98rem; font-weight: 900; letter-spacing: .04em; line-height: 1; }
.pbub-wide .pbub-ai { margin-left: -2px; padding: 3px 6px; border-radius: 5px; background: color-mix(in srgb, var(--c-forest) 12%, #fff); color: var(--c-forest-dark, #9e4423);
  font-size: .7rem; font-weight: 900; letter-spacing: .04em; line-height: 1; }
@media (max-width: 760px) {
  .pbub-wide { --pw-h: 36px; margin-left: 4px; padding-right: 10px; gap: 6px; }
  .pbub-wide .pbub-ai { padding: 3px 5px; font-size: .66rem; }
  .pbub-wide .pbub-long { display: none; }
}
.pbub-sm.has-alert, .pbub-wide.has-alert { filter: drop-shadow(0 0 4px rgba(214, 48, 49, .4)); animation: pbub-alert 2.8s ease-in-out infinite; }
html.reduce-motion .pbub-wide.has-alert { animation: none; }
.post-side { display: grid; justify-items: center; padding: 24px 18px 18px; border-radius: 8px; border: 1px solid var(--on-line);
  background: radial-gradient(rgba(185, 84, 47, .06) 1px, transparent 1.3px) 0 0 / 9px 9px, linear-gradient(165deg, #fff9e6 0%, #ffecbd 55%, #ffdca3 100%);
  box-shadow: 0 10px 26px -14px rgba(140, 70, 30, .45); }
.post-side .post-card-points li { color: var(--ink); }
.post-side .post-card-sub { padding-top: 10px; border-top: 1px dashed #efc77c; }
.post-side .post-card-points { justify-self: stretch; }
@keyframes post-pop { from { opacity: 0; scale: .3; } } /* transform はホバーで使うので、出てくる動きは scale で */
@keyframes post-bob { 50% { translate: 0 -6px; } }
html.show-intro .pbub-lg { animation-delay: 2.4s, 4s; }
@media (prefers-reduced-motion: reduce) { .pbub-lg { animation: none; } }
@media (max-width: 600px) {
  .pbub-sm { width: 50px; margin-left: 4px; }
}

/* さがす4ページの見出し: 左に題名と説明、右にさがし方の切り替えを田の字（2×2）に（場所をとらないように。2026-10-14）。
 * 狭い画面では説明の下に、絵＋短い言葉の4つ並び（トップのスマホと同じ形） */
.page-head-search { margin-bottom: 22px; }
.page-head-search .page-head-text { min-width: 0; }
.page-head-search .search-tabs-grid { margin: 0; }
@media (min-width: 761px) {
  .page-head-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 32px; }
  .search-tabs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: clamp(340px, 30vw, 430px); padding: 5px; border-radius: 8px; }
  .search-tabs-grid .search-tab { justify-content: flex-start; gap: 7px; min-height: 44px; padding: 6px 14px; border-radius: 6px; font-size: .92rem; }
  .search-tabs-grid .search-tab .ico { display: block; width: 18px; height: 18px; color: var(--ink); }
  .search-tabs-grid .search-tab[aria-current="page"] .ico { color: var(--on-text); }
}
@media (min-width: 601px) and (max-width: 760px) {
  .search-tabs-grid { margin-top: 14px; border-radius: 8px; }
  .search-tabs-grid .search-tab { border-radius: 6px; }
}
@media (max-width: 600px) {
  .page-head-search { margin-bottom: 16px; }
  .page-head-search .search-tabs-grid { margin-top: 10px; }
}

/* 迷惑な投稿を防ぐ確認（Cloudflare Turnstile）の枠と、読み込めないときの案内（app.js が出す） */
.turnstile-box { display: grid; justify-items: center; gap: 10px; width: min(100%, 560px); border-radius: 8px; }
.turnstile-note { margin: 0; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--err-line); background: var(--err-bg); color: var(--err-ink); font-size: .88rem; font-weight: 700; line-height: 1.7; }

/* ---------- 書体のきまり（2026-10-15）: 明朝は大きな見出しだけ（ロゴ・トップの大見出し・各ページと棚の見出し・日付の値札）、
   ほかは丸ゴシック。等幅の英字書体（--mono）は「SHOBARA · HIROSHIMA」・時計・ロゴの下などの英字の飾りだけに使い、日本語や数字の入る所には使わない ---------- */
.mono, .countdown b, .filter-count, .date-tab-count, .date-tab-sub, .card-date span, .mini-w, .mini-d,
.event-date > span:not(.countdown), .session-time, .time-pop-col button, .flyer-flow b, .session-head b,
.cal-month-num, .cal-month-jp small, .cal-table th, .cal-day, .cal-today, .cal-count, .cal-peek-date, .cal-peek-item b, .cal-peek-hint,
.cal-pop-head h3 span, .cal-pop-time, .smap-chip b, .ask-chip b, .shelf-more b, .agenda-later b, .home-all .btn small,
.day-list .shelf-head h2 small, .area-list .shelf-head h2 small, .genre-list .shelf-head h2 small, .date-list .shelf-head h2 small, .adv-results .shelf-head h2 small,
.genre-box span b, .regular-door-num b, .date-cal-nav b, .step, .ev-row-lead b, .smap-num, .dm-num {
  font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
/* 見出しの横の小さな文字（「10/15(木)・10/16(金)」など）は、明朝だと細くて読みにくいので丸ゴシック */
.shelf-head h3 small, .shelf-head h2 small, .page-head h1 small, .results-title small { font-family: var(--sans); }
/* トップの大見出し: 明朝の「、」「？」は字の幅いっぱいの空きがあるので詰める（index.php の .p-comma / .p-q） */
.hero-title .p-comma { margin-right: -.42em; }
.hero-title .p-q { margin-left: -.18em; }

/* ---------- ロゴの組み込み（2026-10-15 夕方に「みっけて庄原」へ）: ヘッダー＝案 L5a を SVG にしたもの（上の .logo）、
   オープニング・フッター・共有画像＝看板風 R11（logo-retro.webp。共有画像 ogp.png は R11 と駅スタンプで作り直し）、
   投稿完了＝駅スタンプ（stamp.webp。img/logo/mikkete/S2）、「今日・明日」の棚と「日付でさがす」＝日めくり B5 ---------- */
/* フッター: 昭和の看板風のロゴ（A3b）で締めくくる。広い画面では右に合言葉 */
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; margin-bottom: 24px; }
.footer-logo { display: block; width: min(340px, 80vw); height: auto; }
.footer-brand .footer-sign { margin: 0; }
/* 日めくり（ロゴ案 B5）のワンポイント。字の大きさに合わせ、少し傾けて置く */
.himekuri { flex: none; width: auto; height: 1.55em; margin-right: .4em; rotate: -5deg; transition: rotate .4s var(--ease-out); }
.shelf-soon .shelf-head h3 { padding-left: 0; }
.shelf-soon .shelf-head h3::before { display: none; }
.shelf-soon .himekuri { align-self: center; margin-right: 0; } /* 見出しの flex の gap で間をとる */
.page-head h1 .himekuri { vertical-align: -.32em; }
.shelf-soon:hover .himekuri, .page-head h1:hover .himekuri { rotate: 4deg; }
@media (prefers-reduced-motion: reduce) {
  .done-stamp img, .intro-logo, .logo:hover .lg-spark { animation: none; }
  .logo:hover .lg-pupils, .logo:hover .lg-lens { transform: none; }
}

/* ---------- よみもの（welcome.php「このサイトって何なの？」・qa.php「Q&A」。2026-10-15） ----------
 * メインのページと同じ部品・色づかいのまま。ちがいは「読み物の欄の地の色を少し変える」「運営の話し言葉を吹き出しで出す」くらいにとどめる
 * （付箋・コルクの掲示板・LINE の画面そのものを再現したら「メインと雰囲気が変わりすぎて不自然」と言われ、作り直した。2026-10-15） */
.yomi { max-width: 1080px; margin: 0 auto 40px; }
.yomi-head { margin-bottom: 16px; }
/* 2ページの切り替え: さがし方の帯と同じ形で、2つだけ */
.yomi-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin: 0 0 22px; }
.yomi-tabs .search-tab { gap: 8px; }
.yomi-tabs .search-tab .ico { display: block; width: 18px; height: 18px; color: var(--ink); }
.yomi-tabs .search-tab[aria-current="page"] .ico { color: var(--on-text); }
/* 読み物の欄: 地の色だけ少し変える（稲穂色をうすく敷く） */
.yomi-body { padding: clamp(18px, 3.4vw, 36px); border: 1px solid var(--line); border-radius: 8px; background: #fbf3e6; }

/* 使い方の流れ（ごく簡単なフロー図）: 見るとき・載せるときを3ステップずつ、矢印でつなぐ。狭い画面は縦に */
.flow { margin: 0 0 26px; }
.flow-h { margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.4rem); }
.flow-lanes { display: grid; gap: 14px; }
@media (min-width: 900px) { .flow-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flow-lane { padding: 14px 18px 18px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); }
.flow-lane-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-weight: 900; }
.flow-lane-title a { display: inline-flex; align-items: center; gap: 3px; font-size: .86rem; font-weight: 800; }
.flow-lane-title .ico { width: 15px; height: 15px; }
.flow-steps { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.flow-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.flow-step > span:last-child { display: grid; gap: 1px; }
.flow-step b { font-size: .95rem; font-weight: 900; line-height: 1.45; word-break: keep-all; }
.flow-step small { color: var(--text-soft); font-size: .78rem; font-weight: 700; line-height: 1.5; }
.flow-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--on-bg); color: var(--on-text); }
.flow-ico .ico { width: 22px; height: 22px; }
/* ステップのあいだの矢印（くの字） */
.flow-step + .flow-step::before { content: ""; position: absolute; left: -19px; top: 17px; width: 10px; height: 10px; border-top: 2.5px solid var(--c-forest); border-right: 2.5px solid var(--c-forest); rotate: 45deg; }
@media (max-width: 600px) {
  .flow-lane { padding: 12px 14px 14px; }
  .flow-steps { flex-direction: column; gap: 16px; }
  .flow-step { flex-direction: row; gap: 12px; text-align: left; }
  .flow-ico { flex: none; width: 40px; height: 40px; }
  .flow-step + .flow-step::before { left: 15px; top: -14px; rotate: 135deg; }
}

/* 2026-11-04 まであった「□の枠のボックス4つ（押すと <dialog> で前に開く）」はなくした（welcome.php の作り直し）。
   手紙の番号の札・しるし、ホーム画面に追加の手順（.nf-steps・nf-in。layout.php の homescreen_guide()）、「！」の印は残す */
.letter-body h4 b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--c-forest); color: #fff; font-size: .85rem; font-weight: 800; line-height: 1; }
@keyframes nf-in { from { opacity: 0; transform: translateY(16px); } }
.letter-body mark { background: linear-gradient(transparent 60%, rgba(239, 185, 120, .5) 60% 92%, transparent 92%); color: inherit; font-weight: 800; }
.nf-steps { counter-reset: step; list-style: none; margin: 0 0 1em; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); }
.nf-steps li { counter-increment: step; display: flex; gap: 10px; align-items: baseline; font-weight: 700; }
.nf-steps li::before { content: counter(step); display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-forest); color: #fff; font-size: .8rem; font-weight: 800; line-height: 1; translate: 0 -1px; }
/* 「！」の印（詳細ページの .tip-btn と同じ藤色＝AI） */
.nf-bang { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.4em; padding: 0 .2em; border: 2px solid var(--ink); border-radius: 4px; background: var(--c-ai); color: #fff; font-weight: 900; line-height: 1; vertical-align: .05em; }

/* 手紙（主催者の方へ／見る人へ）: ふつうの枠に、見出しと話し言葉の本文 */
.letters { display: grid; gap: 18px; margin-top: clamp(30px, 5vw, 48px); }
.letters-head h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 700; font-size: clamp(1.25rem, 2.8vw, 1.5rem); }
.letters-head p { margin: 0; color: var(--text-soft); font-size: .92rem; font-weight: 700; }
@media (min-width: 1000px) { .letters { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .letters-head { grid-column: 1 / -1; } }
.letter { scroll-margin-top: calc(var(--header-h) + 20px); padding: 24px clamp(18px, 3vw, 30px) 20px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); }
.letter-to { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.4; }
.letter-sub { margin: 4px 0 14px; color: var(--text-soft); font-size: .92rem; font-weight: 800; line-height: 1.6; }
.letter-body { font-size: .96rem; line-height: 1.95; }
.letter-body p, .letter-body ul { margin: 0 0 1em; }
.letter-body ul { padding-left: 1.3em; }
.letter-body li::marker { color: var(--text-soft); }
.letter-body h4 { display: flex; align-items: center; gap: 8px; margin: 1.3em 0 .3em; font-size: 1.02rem; font-weight: 900; line-height: 1.5; }
.letter-body strong { font-weight: 900; }
/* 記録と開示の1文だけは、わざと飾らず淡々と（地の文とのちがいで効かせる） */
.letter-firm { padding-left: 12px; border-left: 3px solid var(--ink); font-weight: 800; }
.letter-sign { margin: 0; text-align: right; color: var(--text-soft); font-size: .9rem; font-weight: 700; }

/* 下の吹き出し（メインと同じ .bubble）と、もう1つのページへの入口 */
.yomi-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 22px; margin-top: clamp(28px, 4vw, 44px); }
.yomi-after .bubble { max-width: 560px; margin: 0 0 18px; }
.yomi-after-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* Q&A: 質問の一覧（Q1〜） */
.qa-index { margin: 0 0 24px; }
.qa-index ol { counter-reset: qa; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qa-index li { counter-increment: qa; }
.qa-index a { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: .88rem; font-weight: 700; text-decoration: none; }
.qa-index a::before { content: "Q" counter(qa); color: var(--text-soft); font-weight: 900; }
.qa-index a:hover { background: var(--hover-bg); color: var(--ink); }

/* Q&A: 聞く人の質問は右、運営の答えは左（アイコンと名前つき）の吹き出し */
.qa-list { counter-reset: qa-t; max-width: 860px; margin: 0 auto; }
.qa-topic { counter-increment: qa-t; scroll-margin-top: calc(var(--header-h) + 16px); padding: 20px 0 6px; border-top: 1px solid var(--line-strong); }
.qa-topic:first-child { padding-top: 0; border-top: 0; }
.qa-end { counter-increment: none; }
.qa-q { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.45; }
.qa-q::before { content: "Q" counter(qa-t); flex: none; font-family: var(--sans); font-size: .95rem; font-weight: 900; color: var(--text-soft); }
.msg-group { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.msg-group.is-q { justify-content: flex-end; }
.msg-stack { min-width: 0; max-width: min(80%, 620px); }
.msg-name { margin: 0 0 3px; color: var(--text-soft); font-size: .76rem; font-weight: 700; }
.msg-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.msg-b { position: relative; padding: 11px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); font-size: .96rem; font-weight: 600; line-height: 1.85; }
.msg-b p { margin: 0; }
.msg-b p + p { margin-top: .45em; }
.is-q .msg-b { border-color: var(--on-line); background: var(--on-bg); }
.msg-b a { font-weight: 800; }
.msg-b strong { font-weight: 900; background: linear-gradient(transparent 60%, rgba(239, 185, 120, .5) 60% 92%, transparent 92%); }
/* しっぽ: 線の色と中の色の三角を2枚重ねる */
.msg-b::before, .msg-b::after { content: ""; position: absolute; top: 12px; border-style: solid; }
.is-a .msg-b::before { left: -9px; border-width: 7px 9px 7px 0; border-color: transparent var(--line-strong) transparent transparent; }
.is-a .msg-b::after { left: -7.5px; border-width: 7px 9px 7px 0; border-color: transparent var(--paper) transparent transparent; }
.is-q .msg-b::before { right: -9px; border-width: 7px 0 7px 9px; border-color: transparent transparent transparent var(--on-line); }
.is-q .msg-b::after { right: -7.5px; border-width: 7px 0 7px 9px; border-color: transparent transparent transparent var(--on-bg); }

@media (max-width: 600px) {
  .yomi-tabs { max-width: none; }
  .yomi-body { padding: 16px 12px 20px; }
  .letter { padding: 20px 14px 16px; }
  .letter-body { font-size: .94rem; }
  .qa-index a { padding: 5px 10px; font-size: .82rem; }
  .qa-q { font-size: 1.08rem; }
  .msg-group { gap: 8px; }
  .msg-stack { max-width: 86%; }
  .msg-b { padding: 9px 12px; font-size: .92rem; }
  .msg-ava { width: 32px; height: 32px; }
}

/* トップの右のサイドバー: 読み物（このサイトって何なの？）への入口 */
.post-side-read { padding-top: 0 !important; border-top: 0 !important; }
.post-side-read a { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; }
.post-side-read .ico { width: 15px; height: 15px; flex: none; }

/* ---------- 一覧のカード: チラシは正方形に切り抜き、カードの高さもその正方形にそろえる（2026-10-16 ユーザーが案1を選択） ----------
 * 縦長の欄ではチラシのほとんどが見えて「強調する部分」（上・まん中・下）の違いが出なかったため。投稿フォームの見本の枠（app.js の drawFocus）も正方形。
 * 正方形の一辺 --thumb は、カードの幅の 46%（最大 180px）。文字の欄も同じ高さに収める: 札と地域は1行、題名は2行、AI のひとことは3行（狭いカードは2行）、ジャンルの札は1行 */
@property --thumb { syntax: "<length>"; inherits: true; initial-value: 180px; } /* .card-link で1回だけ px に計算し、チラシの欄と文字の欄に同じ値を配る */
.card { container-type: inline-size; }
.card-link { --thumb: min(180px, 46cqw); height: auto; align-items: stretch; }
.card-thumb { width: var(--thumb); height: var(--thumb); max-width: none; min-height: 0; align-self: flex-start; }
.card-body { height: var(--thumb); padding: 10px 12px 10px; gap: 4px; overflow: hidden; }
.card-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-meta .countdown { flex: none; }
.card-meta .card-place { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-meta .card-place > span { overflow: hidden; text-overflow: ellipsis; }
.card-title { font-size: 1rem; line-height: 1.4; -webkit-line-clamp: 2; }
.card-catch { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; padding: 0 0 0 8px; font-size: .84rem; line-height: 1.5; }
.card-catch span { display: inline; }
.card-catch-by { display: inline; margin-right: 5px; font-size: .7rem; white-space: nowrap; }
.card-catch-by .ico { vertical-align: -2px; margin-right: 1px; }
.card .badges { flex-wrap: wrap; row-gap: 12px; max-height: 24px; overflow: hidden; margin-top: auto; padding-top: 2px; } /* 1行に入りきらない札は、2行目に回して隠す（途中で切れて見えないように） */
.card .badge { flex: none; }
@container (max-width: 420px) {
  .card-catch { -webkit-line-clamp: 2; }
  .card-title { font-size: .95rem; }
}

/* ---------- 読み物の「使い方は、これだけ」（2026-10-16 ユーザー指示「ここだけは画像を差し込んだり、リッチな CSS で目立たせて」） ----------
 * 上に水彩の絵、絵の下端に丸い印と見出し、手順は番号付きの色の輪を点線でつなぐ、下に大きなボタン。
 * 見るときはからし色（--l1/--l2）、載せるときはテラコッタ。どちらもロゴの色 */
.flow-h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.flow-h::before { content: ""; width: 34px; height: 4px; border-radius: 2px; background: var(--grad-retro); }
.flow-lanes { gap: 20px; }
.flow-lane { --l1: var(--c-rice-light); --l2: var(--c-rice-dark); --l-ink: #7a5000; position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px rgba(58, 42, 32, .07), 0 22px 44px -26px rgba(150, 90, 20, .6); transition: transform .45s var(--ease-out), box-shadow .45s; }
.flow-lane-post { --l1: var(--c-forest-2); --l2: var(--c-forest); --l-ink: var(--c-forest-dark); }
.flow-lane:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(58, 42, 32, .07), 0 30px 54px -26px rgba(150, 90, 20, .7); }
.flow-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2; background: linear-gradient(90deg, var(--l1), var(--l2)); }
.flow-art { position: relative; margin: 0; height: 168px; overflow: hidden; background: var(--tint); }
.flow-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 1.4s var(--ease-out); }
.flow-lane:hover .flow-art img { transform: scale(1.06); }
/* 下のぼかしは薄く、絵の下の方まで見せる（2026-10-16 ユーザー指示） */
.flow-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .3) 84%, rgba(255, 255, 255, .8) 100%); }
.flow-lane-head { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 12px; margin: -40px 20px 4px; }
.flow-lane-badge { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--l1), var(--l2)); box-shadow: 0 0 0 4px #fff, 0 10px 20px -8px var(--l2); }
.flow-lane-badge .ico { width: 26px; height: 26px; stroke-width: 2.2; }
.flow-lane-title { display: grid; gap: 0; margin: 0 0 4px; font-family: var(--serif); font-weight: 700; font-size: 1.45rem; line-height: 1.2; color: var(--ink); }
.flow-lane-title small { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .18em; color: var(--l-ink); }
.flow-steps { position: relative; gap: 18px; padding: 14px 20px 4px; counter-reset: flow; }
.flow-steps::before { content: ""; position: absolute; top: 41px; left: calc(20px + (100% - 40px) / 6); right: calc(20px + (100% - 40px) / 6); border-top: 2px dashed var(--l2); opacity: .55; }
.flow-step { counter-increment: flow; }
.flow-step + .flow-step::before { display: none; }
.flow-ico { position: relative; width: 56px; height: 56px; color: var(--l-ink); border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--l1), var(--l2)) border-box; box-shadow: 0 8px 16px -10px var(--l2); transition: transform .35s var(--ease-out); }
.flow-ico::after { content: counter(flow); position: absolute; top: -6px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--l2); color: #fff; font-family: var(--sans); font-size: .74rem; font-weight: 900; box-shadow: 0 0 0 2px #fff; }
.flow-ico .ico { width: 24px; height: 24px; }
.flow-step:hover .flow-ico { transform: translateY(-3px) rotate(-6deg); }
.flow-step b { color: var(--ink); }
.flow-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 20px 20px; padding: 12px 18px; border-radius: 6px; text-decoration: none;
  font-weight: 900; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--l2), var(--l-ink)); box-shadow: 0 10px 22px -12px var(--l2); transition: transform .25s var(--ease-out), box-shadow .25s; }
.flow-lane-view .flow-cta { color: #4a3000; background: linear-gradient(135deg, var(--l1), var(--l2)); }
.flow-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 28px -14px var(--l2); }
.flow-lane-view .flow-cta:hover { color: #4a3000; }
.flow-cta .ico { width: 18px; height: 18px; }
.flow-cta .ico:last-child { transition: transform .3s var(--ease-out); }
.flow-cta:hover .ico:last-child { transform: translateX(4px); }
@media (max-width: 600px) {
  .flow-art { height: 130px; }
  .flow-lane-head { margin: -34px 14px 2px; }
  .flow-lane-badge { width: 50px; height: 50px; }
  .flow-lane-title { font-size: 1.25rem; }
  .flow-lane-title small { display: none; } /* 狭い画面では英字の飾りは出さない */
  .flow-steps { gap: 14px; padding: 10px 16px 2px; }
  .flow-steps::before { top: 18px; bottom: 18px; left: calc(16px + 25px); right: auto; border-top: 0; border-left: 2px dashed var(--l2); }
  .flow-ico { width: 50px; height: 50px; }
  .flow-cta { margin: 12px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .flow-lane, .flow-art img, .flow-ico, .flow-cta { transition: none; } }

/* ---------- カードの見直し（2026-10-16 ユーザー指摘「スマホで文字が見切れる」「AIのひとことが場所をとる」「今週末だけ大きく」） ----------
 * 文字の欄の高さを正方形に固定すると、スマホの文字の大きさ設定しだいで行の途中で切れるので、高さは文字に合わせて伸ばす。
 * チラシの欄は正方形を最小にして、文字が多いときだけいっしょに下へ伸びる（見切れない方を優先）。
 * AI のひとことの札は「✦AI」の小さな札だけにし、左の線もやめて幅を文に回す */
.card-thumb { height: auto; min-height: var(--thumb); align-self: stretch; }
.card-body { height: auto; min-height: var(--thumb); overflow: visible; }
.card .badges { max-height: calc(1.35rem + 2px); }
.card-catch { margin: 0; padding: 0; border-left: 0; }
.card-catch-by { display: inline-flex; align-items: center; gap: 2px; margin-right: 5px; padding: 0 5px 0 4px; border-radius: 4px;
  background: var(--ai-bg); color: var(--c-ai); font-size: .66rem; font-weight: 900; line-height: 1.6; letter-spacing: .04em; vertical-align: 1px; }
.card-catch-by .ico { width: 11px; height: 11px; margin: 0; vertical-align: 0; }
/* 今週末の棚だけは大きく: チラシを上に大きな正方形で、文字はその下（スマホは横にめくる） */
.shelf-weekend .shelf-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.shelf-weekend .card-link { flex-direction: column; }
.shelf-weekend .card-thumb { width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1; border-right: 0; border-bottom: 1px solid var(--line); }
.shelf-weekend .card-body { min-height: 0; padding: 12px 14px 14px; gap: 6px; }
.shelf-weekend .card-title { font-size: 1.1rem; -webkit-line-clamp: 2; }
.shelf-weekend .card-catch { -webkit-line-clamp: 3; font-size: .9rem; }
@media (max-width: 600px) {
  .shelf-weekend .shelf-cards { grid-auto-columns: 78%; }
}

/* ---------- さがし方の帯の作り直し（2026-10-16 ユーザー指摘「このタブが絶妙にダサい」） ----------
 * トップ（.home-tabs）: 白い紙の帯に、箱にせず点線の区切りだけで4つ。それぞれ輪のアイコン・英字の小さな札・言葉・矢印。
 * 輪のアイコンは全部こげ茶の線（2026-10-17。以前は日付＝からし・地域＝若草・ジャンル＝だいだい・詳しく＝テラコッタ・定期＝空色の5色の塗り。
 * 5つの色を覚える意味がなく、ロゴの3色の約束からも外れるため）。ホバーと選んでいるものだけからし色の地で、下にからし色の線がのびる。
 * 右端に小さく「定期の集まり」（ヘッダーから移した。これだけ空色＝日付と時間の情報）。さがす4ページの田の字では、下の段に細く */
.search-tab { --t1: var(--on-bg); --t2: var(--c-rice); --t-ink: var(--on-text); }
.st-ico, .st-text { display: contents; }
.st-en, .st-go { display: none; }
.search-tab-sub { grid-column: 1 / -1; }
.search-tabs .search-tab-sub { flex-direction: row; justify-content: center; gap: 6px; min-height: 36px; font-size: .84rem; }
.search-tabs .search-tab-sub .ico { display: block; width: 16px; height: 16px; color: var(--c-sky-ink); }

.home-tabs .search-tabs { display: flex; gap: 0; padding: 6px; border-radius: 8px; background: var(--paper);
  box-shadow: 0 20px 40px -22px rgba(120, 70, 20, .5), 0 0 0 1px rgba(58, 42, 32, .08); }
.home-tabs .search-tab { flex: 1 1 0; min-width: 0; justify-content: flex-start; gap: 12px; min-height: 66px; padding: 8px 14px 8px 12px;
  border: 0; border-radius: 6px; background: none; box-shadow: none; color: var(--ink); transition: background .25s; }
.home-tabs .search-tab + .search-tab::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; border-left: 1.5px dashed var(--line-strong); transition: opacity .25s; }
.home-tabs .search-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 3px;
  background: var(--c-rice); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.home-tabs .search-tab:hover, .home-tabs .search-tab:focus-visible { color: var(--ink); background: var(--hover-bg); }
.home-tabs .search-tab:hover::after, .home-tabs .search-tab:focus-visible::after { transform: scaleX(1); }
.home-tabs .search-tab:hover::before, .home-tabs .search-tab:hover + .search-tab::before { opacity: 0; }
.home-tabs .st-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--ink);
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); transition: transform .4s var(--ease), background .25s; }
.home-tabs .search-tab .ico { display: block; width: 22px; height: 22px; color: var(--ink); stroke-width: 2.1; }
.home-tabs .search-tab:hover .st-ico { transform: translateY(-2px) rotate(-8deg); background: var(--on-bg); }
.home-tabs .st-text { display: grid; gap: 2px; min-width: 0; }
.home-tabs .st-en { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .18em; line-height: 1.2; color: var(--t-ink); }
.home-tabs .st-jp { overflow: hidden; font-size: 1.02rem; font-weight: 900; letter-spacing: .04em; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.home-tabs .st-go { display: block; flex: none; margin-left: auto; color: var(--t-ink); opacity: .45; transition: transform .3s var(--ease), opacity .3s; }
.home-tabs .st-go .ico { width: 18px; height: 18px; color: currentColor; stroke-width: 2; }
.home-tabs .search-tab:hover .st-go { opacity: 1; transform: translateX(3px); }
/* 定期の集まり: 4つより小さく、空色（日付と時間の情報。2026-10-17 ユーザー決定） */
.home-tabs .search-tab-sub { flex: 0 0 auto; align-self: center; gap: 8px; min-height: 48px; margin-left: 8px; padding: 6px 14px 6px 8px; }
.home-tabs .search-tab.search-tab-sub::before { display: none; }
.home-tabs .search-tab-sub .st-ico { width: 32px; height: 32px; }
.home-tabs .search-tab-sub .ico { width: 17px; height: 17px; }
.home-tabs .search-tab-sub .st-en { font-size: .56rem; letter-spacing: .14em; }
.home-tabs .search-tab-sub .st-jp { font-size: .86rem; font-weight: 800; }
.st-regular { --t-ink: var(--c-sky-ink); }
.search-tabs .search-tab-sub { background: var(--sky-bg); }
.home-tabs .search-tab-sub .ico { color: var(--c-sky-ink); }
.home-tabs .search-tab-sub .st-ico { color: var(--c-sky-ink); box-shadow: inset 0 0 0 1.5px var(--c-sky-ink); }
@media (max-width: 1279px) { .home-tabs .st-go { display: none; } }
@media (max-width: 1179px) {
  .home-tabs .search-tab { gap: 9px; padding: 8px 10px; }
  .home-tabs .st-ico { width: 38px; height: 38px; }
  .home-tabs .search-tab .ico { width: 19px; height: 19px; }
  .home-tabs .search-tab-more { display: none; }
  .home-tabs .search-tab-sub { padding: 6px 10px 6px 6px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .home-tabs .search-tab { gap: 7px; padding: 8px; }
  .home-tabs .st-ico { width: 34px; height: 34px; }
  .home-tabs .search-tab .ico { width: 17px; height: 17px; }
  .home-tabs .st-jp { font-size: .92rem; letter-spacing: .02em; }
  .home-tabs .search-tab-sub { gap: 6px; margin-left: 4px; padding: 6px 8px 6px 6px; }
  .home-tabs .search-tab-sub .st-ico { width: 28px; height: 28px; }
  .home-tabs .search-tab-sub .st-en { display: none; }
  .home-tabs .search-tab-sub .st-jp { font-size: .8rem; }
}
/* 760px 以下は、絵の下に短い言葉の縦並び（田の字の帯と同じ幅で切れないように） */
@media (max-width: 760px) {
  .home-tabs .search-tabs { padding: 4px; }
  .home-tabs .search-tab { flex-direction: column; justify-content: center; gap: 4px; min-height: 68px; padding: 6px 2px 8px; text-align: center; }
  .home-tabs .search-tab + .search-tab::before { top: 14px; bottom: 14px; }
  .home-tabs .search-tab::after { left: 10px; right: 10px; bottom: 2px; }
  .home-tabs .st-ico { width: 34px; height: 34px; }
  .home-tabs .search-tab .ico { width: 18px; height: 18px; }
  .home-tabs .st-en, .home-tabs .st-long { display: none; }
  .home-tabs .st-text { justify-items: center; }
  .home-tabs .st-jp { font-size: .74rem; letter-spacing: 0; }
  .home-tabs .search-tab-sub { flex: .75 1 0; align-self: stretch; margin-left: 3px; padding: 6px 2px 8px; }
  .home-tabs .search-tab-sub .st-ico { width: 30px; height: 30px; }
  .home-tabs .search-tab-sub .ico { width: 16px; height: 16px; }
  .home-tabs .search-tab-sub .st-jp { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .home-tabs .search-tab::after, .home-tabs .st-ico, .home-tabs .st-go { transition: none; } }

/* ---------- トップの「開催中」の帯（2026-10-16 ユーザー指示。「これからのイベント ○件」の見出しの代わり） ----------
 * 左に「開催中」の札（切符の形）、右に庄原市内で会期中の催しが流れる。ホバー・フォーカス・止めるボタンで止まる。
 * 動きを減らす設定では流さず、横にスクロールできる並び（2つ目の並びは出さない） */
.now-on { position: relative; display: flex; align-items: stretch; margin: 0 0 24px; overflow: hidden; border-radius: 8px; background: var(--paper);
  box-shadow: 0 16px 34px -22px rgba(120, 70, 20, .5), 0 0 0 1px rgba(58, 42, 32, .08); }
.now-on-label { flex: none; position: relative; z-index: 1; display: grid; align-content: center; gap: 2px; margin: 0; padding: 10px 28px 10px 16px;
  color: #fff; background: var(--c-sky-ink); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  font-family: var(--sans); line-height: 1.25; }
.now-on-label b { display: flex; align-items: center; gap: 7px; font-size: 1.05rem; font-weight: 900; letter-spacing: .08em; }
.now-on-label small { font-size: .7rem; font-weight: 700; }
.now-on-label .live-dot { background: #fff; }
.now-on-label .live-dot::after { border-color: #fff; }
.now-on-view { position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.now-on-track { --dur: var(--mq-dur, calc(var(--n, 1) * 9s + 14s)); display: flex; width: max-content; animation: now-on-loop var(--dur) linear infinite; }
.now-on-track.is-ticker { padding-left: 100%; animation-name: now-on-ticker; animation-delay: calc(var(--dur) * -.55); }
@keyframes now-on-loop { to { transform: translateX(-50%); } }
@keyframes now-on-ticker { to { transform: translateX(-100%); } }
.now-on:hover .now-on-track, .now-on:focus-within .now-on-track, .now-on.is-paused .now-on-track { animation-play-state: paused; }
.now-on-list { display: flex; gap: 12px; margin: 0; padding: 10px 12px 10px 0; list-style: none; }
.now-on-list a { display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 6px 16px 6px 6px; border: 1px solid #f0dcc0; border-radius: 6px;
  background: #fff8ea; color: var(--ink); text-decoration: none; transition: background .25s, border-color .25s; }
.now-on-list a:hover { background: var(--hover-bg); border-color: #e6bf94; }
.now-on-thumb { flex: none; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 4px; background: var(--tint); }
.now-on-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.now-on-text { display: grid; gap: 1px; min-width: 0; }
.now-on-text b { overflow: hidden; font-size: .95rem; font-weight: 900; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.now-on-list a:hover b { color: var(--c-forest); text-decoration: underline; }
.now-on-text small { font-size: .78rem; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.now-on-text em { font-style: normal; color: var(--c-sky-ink); }
.now-on-pause { flex: none; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 10px 0 4px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); color: var(--text-soft); cursor: pointer; transition: color .2s, border-color .2s; }
.now-on-pause:hover { color: var(--ink); border-color: var(--c-forest); }
.now-on-pause .ico { width: 15px; height: 15px; }
.now-on-pause .i-play, .now-on.is-paused .now-on-pause .i-pause { display: none; }
.now-on.is-paused .now-on-pause .i-play { display: block; }
html.reduce-motion .now-on-track { animation: none; padding-left: 0; }
html.reduce-motion .now-on-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
html.reduce-motion .now-on-list[aria-hidden], html.reduce-motion .now-on-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .now-on-track { animation: none; padding-left: 0; }
  .now-on-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .now-on-list[aria-hidden], .now-on-pause { display: none; }
}
@media (max-width: 600px) {
  .now-on { margin-bottom: 18px; }
  .now-on-label { padding: 8px 22px 8px 10px; }
  .now-on-label small { display: none; }
  .now-on-label b { gap: 5px; font-size: .9rem; letter-spacing: .04em; }
  .now-on-list { gap: 8px; padding: 8px 8px 8px 0; }
  .now-on-list a { max-width: 250px; gap: 8px; padding: 4px 12px 4px 4px; }
  .now-on-thumb { width: 44px; height: 44px; }
  .now-on-text b { font-size: .86rem; }
  .now-on-text small { font-size: .72rem; }
  .now-on-pause { width: 28px; height: 28px; margin: 0 6px 0 2px; }
}

/* 読み物の「使い方（How to use）」の英字は小さく、丸ゴシックで（2026-10-16） */
.flow-h-en { margin-left: -6px; font-family: var(--sans); font-size: .64em; font-weight: 700; letter-spacing: .03em; color: var(--text-soft); }

/* スマホの「ホーム画面に追加」（2026-10-16）: ヘッダーの右上（もと「さがす」の場所）。iPhone と Android でだけ出る（app.js が hidden を外す）。
   Android はブラウザの確認、iPhone などは手順の紙（.a2hs-guide） */
.nav-a2hs { border: 0; background: none; font-family: inherit; cursor: pointer; }
.global-nav > [hidden] { display: none; } /* 「ホーム画面に追加」と「さがす」は app.js が出し分ける */
.nav-a2hs .ico { color: var(--c-forest); }
.a2hs-guide { width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -28px rgba(60, 30, 10, .55); overflow-y: auto; overscroll-behavior: contain; }
.a2hs-guide::backdrop { background: rgba(51, 36, 29, .28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.a2hs-guide[open] { animation: nf-in .3s var(--ease-out) both; }
.a2hs-sheet { position: relative; padding: 24px 20px 16px; font-size: 1rem; line-height: 1.8; }
.a2hs-sheet p { margin: 0 0 12px; }
.a2hs-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
.a2hs-close:hover { background: var(--hover-bg); }
.a2hs-close .ico { width: 22px; height: 22px; }
.a2hs-title { margin: 0 44px 12px 0; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.5; }
.a2hs-steps { padding: 12px 14px; }
.a2hs-steps li { margin-bottom: 10px; }
.a2hs-steps li:last-child { margin-bottom: 0; }
.a2hs-steps small { display: block; color: var(--text-soft); font-size: .88rem; font-weight: 700; line-height: 1.6; }
.a2hs-glyph { width: 22px; height: 22px; vertical-align: -5px; color: #007aff; } /* iPhone の画面と同じ青 */
.a2hs-after { padding-top: 10px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: .88rem; }
.a2hs-sheet .a2hs-actions { margin: 16px 0 14px; }
.a2hs-actions .btn { width: 100%; justify-content: center; }
html.reduce-motion .a2hs-guide[open] { animation: none; }

/* ---------- 2026-10-16 夜の見直し（ユーザー指示） ---------- */
/* 「開催中」の帯を細く: 題名と会期を1行に並べ、チラシの絵を小さく */
.now-on-label { padding-block: 6px; }
.now-on-label b { font-size: .98rem; }
.now-on-label small { font-size: .66rem; }
.now-on-list { gap: 10px; padding: 6px 10px 6px 0; }
.now-on-list a { gap: 8px; padding: 3px 14px 3px 3px; }
.now-on-thumb { width: 34px; height: 34px; }
.now-on-text { display: flex; align-items: baseline; gap: 8px; }
.now-on-text b { min-width: 0; font-size: .92rem; }
.now-on-text small { flex: none; }
.now-on-pause { width: 28px; height: 28px; }
@media (max-width: 600px) {
  .now-on-label { padding: 5px 20px 5px 10px; }
  .now-on-list { gap: 8px; padding: 5px 8px 5px 0; }
  .now-on-list a { max-width: 300px; gap: 6px; padding: 2px 10px 2px 2px; }
  .now-on-area { display: none; } /* 狭い画面は題名を優先（地域は詳細で） */
  .now-on-thumb { width: 28px; height: 28px; }
  .now-on-text { gap: 6px; }
  .now-on-text b { font-size: .84rem; }
  .now-on-text small { font-size: .72rem; }
  .now-on-pause { width: 26px; height: 26px; }
}
/* 「今週末」の見出しは、日付の値札と同じ形の札にして目立たせる（「見えにくい」との声で） */
.shelf-weekend .shelf-head { align-items: center; }
.shelf-weekend .shelf-head h3 { align-items: center; gap: 4px 12px; padding-left: 0; }
.shelf-weekend .shelf-head h3::before { display: none; }
.sh-badge { display: inline-block; padding: 3px 26px 5px 14px; border-radius: 5px 0 0 5px; background: var(--c-rice); color: var(--ink); font-size: 1.45rem; line-height: 1.3; letter-spacing: .06em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.shelf-weekend .shelf-head h3 small { font-size: 1rem; color: var(--ink); }
@media (max-width: 600px) {
  .sh-badge { font-size: 1.25rem; }
  .shelf-weekend .shelf-head h3 small { font-size: .92rem; }
}

/* ---------- 新着のページ（new.php。2026-10-16 ユーザー指示）: 運営者のお知らせ ＋ 載った日ごとのカード ---------- */
.new-notice { margin: 0 0 24px; padding: 14px 18px; border-radius: 8px; background: var(--tint-rice); color: var(--on-text); }
.new-notice h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-family: var(--sans); font-size: 1rem; font-weight: 900; }
.new-notice h2 .ico { width: 18px; height: 18px; }
.new-notice p { margin: 0; font-weight: 700; line-height: 1.8; }
.new-secs { display: grid; gap: 28px; }
.new-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; line-height: 1.4; }
.new-head::after { content: ""; flex: 1; order: 3; height: 1px; background: var(--line-strong); }
.new-head small { order: 2; font-family: var(--sans); font-size: .84rem; font-weight: 800; color: var(--text-soft); }
/* トップの「お知らせ・新着」の枠の下の「新着をすべて見る」 */
.hero-news-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--c-accent); font-size: .86rem; font-weight: 800; text-decoration: none; }
.hero-news-more .ico { width: 16px; height: 16px; transition: translate .25s var(--ease-out); }
.hero-news-more:hover { text-decoration: underline; }
.hero-news-more:hover .ico { translate: 3px 0; }
@media (max-width: 600px) {
  .new-secs { gap: 22px; }
  .new-head { font-size: 1.1rem; }
}

/* 申込の締切は日程ごと（2026-10-16 ユーザー指示「日程ごとに締切があるチラシもある」）。フォームは日程の行に、詳細ページは日程の欄に */
.session-deadline-field input { max-width: 260px; }
.apply-deadline-note { display: flex; align-items: flex-start; gap: 6px; margin: -4px 0 14px; }
.apply-deadline-note .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--c-sky-ink); }
.session-deadline { font-size: .86rem; }

/* 未対応の通報があるとき、運営者のブラウザでだけ、ヘッダーの「載せる」の影を赤くしてぼんやり光らせる（2026-10-16 ユーザー指示。notify.php の operator_alert()）。
   動きを減らす設定では、光らせたまま明滅はしない */
.pbub-sm.has-alert { filter: drop-shadow(0 0 4px rgba(214, 48, 49, .4)); animation: pbub-alert 2.8s ease-in-out infinite; } /* うっすら（「もっとうっすらでいい」2026-10-16） */
@keyframes pbub-alert {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(214, 48, 49, .2)); }
  50% { filter: drop-shadow(0 0 6px rgba(214, 48, 49, .5)); }
}
html.reduce-motion .pbub-sm.has-alert { animation: none; }
@media (prefers-reduced-motion: reduce) { .pbub-sm.has-alert { animation: none; } }

/* 載せる前の確認の「裏面も」は、ほかの行より目立たせる */
.flyer-checks .flyer-check-back { color: var(--ink); font-weight: 800; }

/* ---------- 機械かどうかの確認（Turnstile）は、読み取りの枠の中・ボタンのすぐ上（2026-10-16 ユーザー指示） ----------
   確認の枠は幅 300px で変えられないので、読み取りの枠の左右の余白まで使って入れる。とても狭い画面では少し縮める */
/* 読み取りのボタンと確認の枠は横に並べる（狭いときは枠がボタンの下へ）。枠はふだん見えない（interaction-only。2026-10-27） */
.extract-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.extract-box .turnstile-box { position: relative; width: auto; margin: 0; justify-items: start; }
@media (max-width: 600px) { .extract-box .turnstile-box { flex: 1 1 100%; margin-inline: -18px; justify-items: center; } }
@media (max-width: 360px) { .extract-box .cf-turnstile { zoom: .8; } }

/* ---------- 強調する部分のプレビュー（2026-10-16 ユーザー指示「プレビューが出るといいな」） ----------
   投稿フォームのチラシの欄の下に、一覧のカードの見本。カードは本物と同じ部品（.card .card-link …）で、幅も一覧のカードくらい。
   押せない見本なので、ホバーの動き（チラシの拡大・影）は出さない。「一覧で見せるところ」と写真に重ねる枠は、一覧に出る1枚目だけ */
.focus-sample { margin: 0 0 18px; }
.focus-sample[hidden], .focus-sample-note[hidden], [data-focus-pick-box][hidden] { display: none; }
.focus-sample-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; font-size: .88rem; color: var(--text-soft); }
.focus-sample-head b { color: var(--ink); font-weight: 800; }
.focus-sample-head small { font-size: .8rem; font-weight: 700; }
.focus-sample-card { width: min(100%, 440px); pointer-events: none; }
.focus-sample-card .card-title { font-feature-settings: "palt"; letter-spacing: .02em; } /* 本物は h2（h1, h2, h3 の字詰め） */
.focus-sample-card .card-thumb img { transition: object-position .35s var(--ease); }
.focus-sample-note { margin: 8px 0 0; font-size: .84rem; color: var(--text-dim); }
.flyer-slot.is-unlisted .focus-frame { display: none; }
html.reduce-motion .focus-sample-card .card-thumb img { transition: none; }

/* ---------- AI読み取りボタンのシール（2026-10-16 ユーザー指示「目立つようにモコモコシール調のイラストに」） ----------
   ぷっくりしたシールの絵（img/brand/ai-sticker.webp。文字は絵に入れない）をボタンの左からはみ出させ、ボタンも太い白ふちのシールの形に。
   絵をはみ出させるので、光の帯（::after）と波紋は出さず、押すとむにっと縮む。チラシをアップするまでは淡い色（押せない）、
   アップすると藤色になって絵がぽんと跳ねる。.btn:not(:has(.bi)) などに負けないよう .btn.btn-sticker で書く */
.btn.btn-sticker {
  overflow: visible;
  min-height: 60px; margin-top: 26px; padding: 10px 26px 10px 92px;
  border: 4px solid #fff; border-radius: 999px;
  background: var(--grad-sticker);
  color: #fff; font-size: 1.05rem; line-height: 1.35; text-align: left;
  text-shadow: 0 1px 0 rgba(40, 24, 96, .35);
  box-shadow: 0 0 0 1.5px rgba(92, 74, 160, .45), 0 10px 18px -8px rgba(70, 50, 130, .6), inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(40, 24, 96, .22);
}
.btn-sticker::after, .btn-sticker .ripple { display: none; }
/* 狭い画面では「アップした／チラシから／読み取る」の区切り（<wbr>）でだけ折り返す。入りきらない文（読み取り中の文字）はどこでも折る */
.btn-sticker [data-extract-label] { word-break: keep-all; overflow-wrap: anywhere; }
.btn-sticker-art { position: absolute; left: 2px; bottom: -4px; height: 96px; width: auto; rotate: -8deg; filter: drop-shadow(0 4px 4px rgba(70, 50, 130, .35)); pointer-events: none; transition: transform .35s var(--ease), rotate .35s var(--ease), filter .3s; }
.btn.btn-sticker:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 0 0 1.5px rgba(92, 74, 160, .5), 0 14px 22px -8px rgba(70, 50, 130, .65), inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(40, 24, 96, .22); }
.btn-sticker:not([disabled]):hover .btn-sticker-art, .btn-sticker:not([disabled]):focus-visible .btn-sticker-art { transform: translateY(-4px) scale(1.06); rotate: -2deg; }
.btn.btn-sticker:active { transform: translateY(1px) scale(.97); box-shadow: 0 0 0 1.5px rgba(92, 74, 160, .45), 0 4px 8px -4px rgba(70, 50, 130, .5), inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(40, 24, 96, .2); }
.btn-sticker:not([disabled]) .btn-sticker-art { animation: sticker-pop .6s var(--ease-out); }
@keyframes sticker-pop { 0% { transform: scale(.82); } 45% { transform: translateY(-8px) scale(1.1); } 100% { transform: none; } }
.btn.btn-sticker[disabled] { background: #ebe7f5; color: #5f5878; text-shadow: none; cursor: not-allowed; opacity: 1; transform: none; box-shadow: 0 0 0 1.5px rgba(92, 74, 160, .25), 0 4px 10px -6px rgba(70, 50, 130, .35); }
.btn-sticker[disabled] .btn-sticker-art { filter: saturate(.7) drop-shadow(0 3px 3px rgba(70, 50, 130, .2)); }
/* 読み取り中: 藤色のまま、絵の虫めがねがチラシの上をさがして動く（文字は「読み取っています…」に変わる） */
.btn.btn-sticker.is-busy { background: var(--grad-sticker); color: #fff; text-shadow: 0 1px 0 rgba(40, 24, 96, .35); cursor: wait; }
.btn-sticker.is-busy .btn-sticker-art { filter: drop-shadow(0 4px 4px rgba(70, 50, 130, .35)); animation: sticker-read 1.3s ease-in-out infinite; }
@keyframes sticker-read { 0%, 100% { transform: none; } 25% { transform: translate(3px, -4px) rotate(5deg); } 50% { transform: translate(-1px, -7px); } 75% { transform: translate(-3px, -3px) rotate(-5deg); } }
@media (max-width: 600px) {
  .btn.btn-sticker { width: 100%; justify-content: flex-start; min-height: 56px; margin-top: 22px; padding: 8px 12px 8px 72px; font-size: 1rem; }
  .btn-sticker-art { height: 78px; left: -2px; }
}
html.reduce-motion .btn-sticker-art { transition: none; animation: none !important; }

/* トップの右のサイドバー: 紹介チラシ（B5 の画像。押すと大きな画像が開く。2026-10-16） */
.side-flyer { display: grid; justify-items: center; gap: 6px; margin-top: 18px; color: var(--c-accent); font-size: .84rem; font-weight: 800; text-decoration: none; }
/* 画面の高さに合わせて小さくし、サイドバー（画面に追いかけてくる）の中でスクロールしなくても見えるように */
.side-flyer img { display: block; width: min(100%, calc(max(220px, 100vh - var(--header-h) - 480px) * 680 / 960)); height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--line), var(--soft-shadow); transition: translate .25s var(--ease-out), box-shadow .25s; }
.side-flyer:hover { color: var(--c-forest); }
.side-flyer:hover img { translate: 0 -2px; box-shadow: 0 0 0 1px var(--line-strong), 0 18px 34px -18px rgba(150, 90, 20, .5); }
.side-flyer span { display: inline-flex; align-items: center; gap: 4px; }
.side-flyer .ico { width: 16px; height: 16px; flex: none; }

/* 運営している者の名前（目立たせない。layout.php の PRESENTED_BY。2026-10-16） */
.footer-copy .presented-by { margin-left: 1.2em; font-size: .92em; letter-spacing: .08em; opacity: .85; }
.letter-sign small { display: block; margin-top: 2px; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; color: var(--text-dim); }

/* ---------- 一覧のページ送り（2026-10-16 ユーザー指示「イベントが多くなってきたら 1 2 3 のように次のページを案内」。layout.php の render_pager()） ----------
   前へ・番号・次へ。いまのページはテラコッタの地に白い数字。番号も丸ゴシック。スマホは番号の段の下に、前へ・次へを半分ずつの幅で大きく */
.pager { margin: 30px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--line-strong); font-family: var(--sans); text-align: center; }
.date-groups > .pager, .new-secs > .pager { margin-top: 2px; }
.pager-now { margin: 0 0 12px; font-size: .86rem; font-weight: 800; color: var(--text-soft); }
.pager-now b { font-size: 1.05rem; color: var(--ink); }
.pager-now span { margin-left: .8em; font-weight: 700; color: var(--text-dim); }
.pager-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pager-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pager-num { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 1.08rem; font-weight: 800; text-decoration: none; transition: background .2s, border-color .2s, transform .15s var(--ease); }
.pager-num:hover { color: var(--ink); background: var(--hover-bg); border-color: var(--c-forest); }
.pager-num:active { transform: translateY(1px); }
.pager-num.is-cur { background: var(--c-forest); border-color: var(--c-forest); color: #fff; box-shadow: 0 6px 14px -8px rgba(185, 84, 47, .8); }
.pager-gap { display: grid; place-items: center; min-width: 20px; height: 46px; color: var(--text-dim); font-weight: 800; }
.pager-step { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 4px 14px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--c-forest); font-size: .95rem; font-weight: 800; text-decoration: none; transition: background .2s, border-color .2s; }
.pager-step:hover { color: var(--c-forest); background: var(--hover-bg); border-color: var(--c-forest); }
.pager-step .ico { width: 18px; height: 18px; flex: none; }
.pager-step-text { display: grid; line-height: 1.25; text-align: left; }
.pager-next .pager-step-text { text-align: right; }
.pager-step-text small { font-size: .74rem; font-weight: 700; color: var(--text-dim); }
.pager-next:not(.is-off) { border-color: var(--c-forest); }
.pager-step.is-off { color: var(--text-dim); border-style: dashed; background: transparent; opacity: .55; }
@media (max-width: 600px) {
  .pager { padding-top: 16px; }
  .pager-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pager-nums { grid-column: 1 / -1; order: -1; gap: 5px; }
  .pager-num { min-width: 42px; height: 44px; }
  .pager-gap { min-width: 14px; height: 44px; }
  .pager-step { justify-content: center; }
}
/* ページ送り・日付のリンクで一覧の頭へ移ったとき、ヘッダーに隠れないように */
#date-list, #area-list, #genre-list, #results, #regular-list, #new-list { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- トップの「申込の締切が近い」は右のサイドバーの中、紹介チラシの上（2026-10-16 ユーザー指示） ----------
   サイドバーを出さない狭い画面（999px 以下）では、本文の欄に出す（.deadline-narrow。index.php は両方に置き、画面の幅で片方だけ見せる）。
   紹介チラシは、この欄の高さ（--side-extra。index.php が件数から見積もる）の分だけ小さくし、追いかけてくるサイドバーの中でスクロールしなくて済むように */
@media (min-width: 1000px) { .deadline-narrow { display: none; } }
.side-deadline { margin: 18px 0 0; }
.side-deadline .shelf-head { margin-bottom: 8px; }
.side-deadline .shelf-head h3 { font-size: 1.05rem; }
.side-deadline .ev-row > a { grid-template-columns: 3.4em minmax(0, 1fr) 36px; gap: 8px; padding: 8px 8px 8px 10px; }
.side-deadline .ev-row-lead b { font-size: .92rem; }
.side-deadline .ev-row-title { font-size: .9rem; }
.side-deadline .ev-row-thumb { width: 36px; height: 48px; }
.side-deadline .ev-row .badges { display: none; } /* 狭い欄なので、無料などの札は詳細で */
.home-side .side-flyer img { width: min(100%, calc(max(200px, 100vh - var(--header-h) - 480px - var(--side-extra, 0px)) * 680 / 960)); }

/* ---------- 見出しの右の「新着」を小さく（2026-10-17 ユーザー指示「もっとコンパクトに」）: 1件1行（題名・右に地域と時間）、余白を詰める ---------- */
@media (min-width: 1000px) {
  .hero-news { padding: 9px 14px 7px; }
  .hero-news-head { margin: 0 0 1px; font-size: .9rem; }
  .hero-news-head small { font-size: .7rem; }
  .hero-news-list a { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 4px 2px; }
  .hn-title { font-size: .86rem; }
  .hn-meta { font-size: .7rem; white-space: nowrap; }
  .hero-news-more { margin-top: 3px; font-size: .8rem; }
  .hero-notice { margin-bottom: 6px; padding: 6px 9px; font-size: .84rem; }
}

/* ---------- トップの右のサイドバーのいちばん上の「開催中」（2026-10-17 ユーザー指示。本文の流れる帯から移した。layout.php の render_now_on_card） ----------
   1件ずつ見せ、複数あるときは6秒ごとに切り替える（app.js の [data-rotator]）。JavaScript がないときは全部を並べる。
   サイドバーを出さない狭い画面（999px 以下）は、本文の流れる帯（.now-on-narrow）のまま */
@media (min-width: 1000px) { .now-on-narrow { display: none; } }
.side-nowon { margin: 0 0 16px; overflow: hidden; border-radius: 8px; background: var(--paper); box-shadow: 0 16px 34px -22px rgba(120, 70, 20, .5), 0 0 0 1px rgba(58, 42, 32, .08); }
.side-nowon-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 900; }
.side-nowon-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 22px 5px 12px; color: #fff; letter-spacing: .08em;
  background: var(--c-sky-ink); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.side-nowon-tag .live-dot { background: #fff; }
.side-nowon-tag .live-dot::after { border-color: #fff; }
.side-nowon-head small { font-size: .74rem; font-weight: 700; color: var(--text-soft); }
.side-nowon-list { list-style: none; margin: 0; padding: 8px 10px 6px; }
.side-nowon-item + .side-nowon-item { margin-top: 6px; }
.side-nowon-item a { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 4px; border-radius: 6px; color: inherit; text-decoration: none; transition: background .2s; }
.side-nowon-item a:hover { color: inherit; background: var(--hover-bg); }
.side-nowon-thumb { flex: none; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 4px; background: var(--tint); }
.side-nowon-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.side-nowon-text { display: grid; gap: 3px; min-width: 0; }
.side-nowon-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; font-weight: 900; line-height: 1.4; }
.side-nowon-item a:hover b { color: var(--c-forest); }
.side-nowon-text small { font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.side-nowon-text em { font-style: normal; color: var(--c-sky-ink); }
html.js .side-nowon-item:not(.is-on) { display: none; }
html.js .side-nowon-item + .side-nowon-item { margin-top: 0; }
html.js .side-nowon-item.is-on { animation: side-nowon-in .45s var(--ease-out); }
@keyframes side-nowon-in { from { opacity: 0; translate: 10px 0; } }
.side-nowon-ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 10px 8px; }
html:not(.js) .side-nowon-ctrl { display: none; }
.side-nowon-ctrl button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--text-soft); cursor: pointer; }
.side-nowon-ctrl button:hover { color: var(--ink); border-color: var(--c-forest); }
.side-nowon-ctrl .ico { width: 14px; height: 14px; }
.side-nowon-num { min-width: 3.4em; text-align: center; font-size: .8rem; font-weight: 800; color: var(--text-soft); }
.side-nowon-pause { margin-left: 4px; }
.side-nowon-pause .i-play, .side-nowon.is-paused .side-nowon-pause .i-pause { display: none; }
.side-nowon.is-paused .side-nowon-pause .i-play { display: block; }
html.reduce-motion .side-nowon-item.is-on { animation: none; }
html.reduce-motion .side-nowon-pause { display: none; } /* 動きを減らす設定では自動で切り替えないので、止めるボタンもいらない */

/* ---------- AIのひとことは切らずに全部出す（2026-10-17 ユーザー指摘「AIのコメントが切れています」） ----------
   ひとことは40字まで（extract.php の extract_catch）。カードの文字の欄は高さを固定していないので、長いときはカードが少し下へ伸びる */
.card-catch, .shelf-weekend .card-catch { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.card-catch span { display: inline; -webkit-line-clamp: unset; overflow: visible; }

/* ---------- 載せられないチラシ（ng-flyers.php。2026-10-17 ユーザー指示「こんなチラシは載せないでね、の説明のページ」） ----------
   上から「載せられるチラシ」（緑のチェック）→「載せる前に止まるチラシ」（カード。gate.php の判定と1対1）→「載せないでほしいチラシ」（規約の要約）。
   載せられないものの印は「まだ空いています」と同じ桃色の地（--need-*）。角は 8px（カード）・6px（札・箱）まで */
.ngf > section + section { margin-top: 30px; padding-top: 26px; border-top: 1.5px dashed var(--line-strong); }
.ngf h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.2rem; font-weight: 900; }
.ngf-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.ngf-mark .ico { width: 17px; height: 17px; }
.ngf-mark-ok { background: #e6f0dc; color: var(--c-green); }
.ngf-mark-ng { background: var(--need-bg); color: var(--need-ink); }
.ngf-lead { margin: 0 0 14px; color: var(--text-soft); font-weight: 600; line-height: 1.8; }
.ngf-note { margin: 14px 0 0; font-size: .88rem; color: var(--text-dim); line-height: 1.8; }

.ngf-ok-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.ngf-ok-list li { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; line-height: 1.7; }
.ngf-ok-list .ico { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--c-green); }
.ngf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ngf-tags span { padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--paper-2); font-size: .84rem; font-weight: 700; color: var(--text-soft); }

.ngf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* 8枚を2列×4段にそろえる */
.ngf-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper); }
.ngf-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 900; line-height: 1.5; }
.ngf-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--need-bg); color: var(--need-ink); }
.ngf-ico .ico { width: 16px; height: 16px; }
.ngf-card p { margin: 0; line-height: 1.75; }
.ngf-ex { font-size: .88rem; color: var(--text-soft); }
.ngf-ex b { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 5px; background: var(--brown-6); font-size: .74rem; font-weight: 800; color: var(--text-soft); vertical-align: 1px; }
.ngf-fix { display: flex; align-items: flex-start; gap: 6px; margin-top: auto !important; padding: 8px 10px; border-radius: 6px; background: #f1f6ea; font-size: .86rem; }
.ngf-fix .ico { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--c-green); }

.ngf-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ngf-rules li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--paper-2); line-height: 1.75; }
.ngf-rules b { display: block; font-weight: 900; }
.ngf-rules li > span:last-child { font-size: .92rem; color: var(--text-soft); }
.ngf-rules li > span:last-child b { font-size: 1rem; color: var(--ink); }

.ngf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }

@media (max-width: 600px) {
  .ngf-ok-list, .ngf-cards { grid-template-columns: minmax(0, 1fr); }
  .ngf h2 { font-size: 1.1rem; }
}

/* ---------- 読み取るまで、チラシの欄より下を止める（2026-10-17 ユーザー指示「AIのチラシ読み取りボタンを押さないと、下の日時などを編集できないように」） ----------
   app.js が新しい投稿のときだけ .is-extract-locked と inert を付け、読み取りが終わる（または使えない）と外す。案内は読み取りの枠の説明の1文だけ（2026-10-27 に下の紫の枠をなくした） */
/* 薄くするのは欄の中身だけ（欄そのものを薄くすると、白い地が透けて、後ろの番号をつなぐ点線が文字やチェックボックスに重なった。2026-10-18 本番の点検の指摘） */
.event-form .is-extract-locked { pointer-events: none; user-select: none; }
.event-form .is-extract-locked > * { opacity: .42; filter: grayscale(.4); } /* 中のボタンなどの動きを消さないよう、ここには transition を書かない */

/* ---------- 地域でさがす: 自治振興区のイベント → 同じ地域のほかのイベント（2026-10-18 ユーザー指示。日付の見出しは置かない） ---------- */
.area-group-title { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; padding-bottom: 6px; border-bottom: 1.5px dashed var(--line); font-size: 1.05rem; font-weight: 900; color: var(--ink); }
.area-group-title small { font-size: .82rem; font-weight: 800; color: var(--text-soft); }
.area-cards + .area-group-title { margin-top: 28px; }
.area-cards + .pager, .area-cards + .long-runs { margin-top: 22px; }

/* ---------- 左のサイドメニュー（2026-10-18 ユーザー指示。広い画面〔1200px 以上〕の全ページの左。管理画面は除く。rail.php） ----------
   載せる → さがす → いつ → 地域 → 広告の枠1 → 新着・お知らせ → 広告の枠2。狭い画面では出さない */
.site-rail { display: none; }
@media (min-width: 1200px) {
  .site-body { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; } /* 236px では「日付で」のカレンダーが窮屈だったので 264px に（2026-10-18） */
  .site-body > main { min-width: 0; }
  .site-rail { display: block; position: sticky; top: calc(var(--header-h) + 3px); max-height: calc(100vh - var(--header-h) - 3px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 0 28px 18px; scrollbar-width: thin; }
}
.rail-inner { display: grid; gap: 18px; }
.rail-post { width: 100%; justify-content: center; }
.rail-sec { display: grid; gap: 8px; }
.rail-h { margin: 0; padding-bottom: 5px; border-bottom: 1.5px solid var(--line); font-size: .8rem; font-weight: 900; letter-spacing: .06em; color: var(--c-forest); }
.rail-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rail-links a { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; color: var(--ink); font-size: .92rem; font-weight: 800; text-decoration: none; transition: background .15s; }
.rail-links a .ico { width: 18px; height: 18px; flex: none; color: var(--c-forest); }
.rail-links a:hover { background: var(--hover-bg, rgba(185, 84, 47, .08)); }
.rail-links a[aria-current="page"] { background: var(--on-bg); color: var(--on-text); }
.rail-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rail-chips a { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 9px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: .84rem; font-weight: 800; text-decoration: none; }
.rail-chips a b { font-size: .76rem; color: var(--c-accent); }
.rail-chips a.is-zero { opacity: .55; }
.rail-chips a:hover { border-color: var(--c-forest); }
.rail-new { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 900; font-size: .92rem; }
.rail-new span { display: grid; flex: 1; line-height: 1.4; }
.rail-new small { font-size: .74rem; font-weight: 700; color: var(--text-soft); }
.rail-new .ico { width: 18px; height: 18px; flex: none; color: var(--c-forest); }
.rail-new:hover, .rail-new[aria-current="page"] { border-color: var(--c-forest); }
/* 「このサイトって何なの？」: 上のさがす5行と同じ色の輪＋太い字の吹き出し。斜めにせず、影も付けない（2026-10-23 ユーザー指示「上の4つとなじむように」「シャドウは落とさない方がいい」） */
.rail-about { --t1: #cfc0ee; --t2: #8265c4; --t-ink: #5a409a; --ab-bg: var(--paper, #fff); position: relative; display: flex; align-items: center; gap: 8px; margin: 4px 0 6px;
  padding: 7px 12px 7px 8px; border: 1.5px solid var(--line-strong); border-radius: 18px; background: var(--ab-bg); color: var(--ink); font-size: .92rem; font-weight: 800;
  text-decoration: none; transition: background .15s, border-color .15s; }
.rail-about::after { content: ""; position: absolute; left: 22px; bottom: -7px; width: 11px; height: 11px; background: var(--ab-bg); transition: background .15s;
  border-right: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); transform: rotate(45deg); border-bottom-right-radius: 3px; }
.rail-about-ico { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(140deg, var(--t1), var(--t2)); box-shadow: 0 4px 10px -6px var(--t2); }
.rail-about-ico .ico { width: 18px; height: 18px; color: #fff; }
.rail-about:hover, .rail-about[aria-current="page"] { --ab-bg: color-mix(in srgb, var(--t1) 28%, #fff); border-color: var(--t2); color: var(--t-ink); }
.rail-about:hover::after, .rail-about[aria-current="page"]::after { border-color: var(--t2); }
.rail-about:focus-visible { outline: 2px solid var(--t2); outline-offset: 2px; }
/* 左のサイドメニューの下の空いた所の紹介チラシ（2026-10-23）。高さに合わせて小さくなり、サイドメニューの中でスクロールしにくいように */
.rail-flyer { display: grid; justify-items: center; gap: 6px; margin-top: 4px; color: var(--c-accent); font-size: .8rem; font-weight: 800; text-decoration: none; }
.rail-flyer img { display: block; width: clamp(120px, calc((100vh - var(--header-h) - 480px) * .707), 200px); height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.rail-flyer:hover { color: var(--c-forest); }
.rail-flyer:hover img { box-shadow: 0 0 0 1px var(--line-strong); }
.rail-flyer span { display: inline-flex; align-items: center; gap: 4px; }
.rail-flyer .ico { width: 15px; height: 15px; flex: none; }
/* 広告の枠: 必ず「広告」の札を付け、イベントのカードと見分けられるように */
.rail-ad { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper); }
.rail-ad img { display: block; width: 100%; height: auto; }
.rail-ad-tag { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line-strong); font-size: .68rem; font-weight: 800; color: var(--text-soft); }
.rail-ad-empty { display: grid; place-content: center; gap: 6px; aspect-ratio: 6 / 5; padding: 30px 16px 16px; text-align: center; text-decoration: none; border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(185, 84, 47, .035) 10px 20px), var(--paper); }
.rail-ad-empty b { font-size: .92rem; color: var(--ink); }
.rail-ad-empty small { font-size: .76rem; line-height: 1.6; color: var(--text-soft); }
.rail-ad-empty:hover { border-color: var(--c-forest); }
.admin-ad { padding: 14px 0; border-top: 1.5px dashed var(--line); }
.admin-ad h3 small { font-size: .8rem; color: var(--text-soft); font-weight: 700; }
/* 定期の集まりの札（トップの日付の一覧にも入るため。2026-10-18） */
.badge-regular { color: #2d5d78; background: #e3f0f7; box-shadow: inset 0 0 0 1px #9cc3d9; }

/* ---------- 右のサイドバー（2026-10-18 ユーザー指示。1400px 以上の全ページの右。rail.php の render_right_rail()） ----------
   大きな「イベントを載せる」→ 会期中の催し（庄原市内を先に／日付の順）→ 広告の枠3（縦長）。トップではその下にカレンダーと申込の締切 */
.site-rail-right { display: none; }
@media (min-width: 1400px) {
  .site-body { grid-template-columns: 264px minmax(0, 1fr) 300px; }
  .site-rail-right { display: block; position: sticky; top: calc(var(--header-h) + 3px); max-height: calc(100vh - var(--header-h) - 3px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px 28px 0; scrollbar-width: thin; }
}
.rail-post-big { display: flex; justify-content: center; }
.rail-post-big .pbub { width: 190px; }
.rail-h small { margin-left: 6px; font-size: .72rem; font-weight: 700; letter-spacing: 0; color: var(--text-soft); }
.rail-ad-empty.rail-ad-tall { aspect-ratio: 1 / 2; max-height: 520px; }

/* 右のサイドバーのいちばん上の「会期中」の札（2026-10-18。部品は side-nowon と同じ。庄原市内 8秒・市外 4秒で切り替え） */
.rail-nowon { margin: 0; }

/* さがし方の切り替え（日付で・地域で・ジャンルで・詳しく・定期）は、左のサイドメニューが出る広い画面ではメインの上に出さない
   （2026-10-18 ユーザー指示「左のサイドバーに移ったので、メインの上には必要ない」。狭い画面では左のサイドメニューがないので残す） */
@media (min-width: 1200px) {
  .site-body .home-tabs, .site-body .page-head-search .search-tabs-grid { display: none; }
  .site-body .page-head-search { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 左のサイドメニューの「日付で」「地域で」「ジャンルで」の行（押すとメインに開く。render_search_stage()。2026-11-04） ---------- */
.rail-acc .rail-acc-chev .ico { width: 18px; height: 18px; color: var(--c-forest); }
.rail-sub { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 0; font-size: .8rem; font-weight: 900; color: var(--c-forest); }
.rail-sub small { font-size: .7rem; font-weight: 700; color: var(--text-soft); }
/* ジャンルで: 印を付ける札を縦に */
.rail-genre { display: grid; gap: 6px; }
.rail-checks { display: grid; gap: 3px; }
.rail-checks label { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; font-size: .84rem; font-weight: 800; cursor: pointer; }
.rail-checks label:hover { background: var(--hover-bg); }
.rail-checks label.is-zero { opacity: .55; }
.rail-checks input { flex: none; width: 15px; height: 15px; accent-color: var(--c-forest); }
.rail-checks span { display: flex; flex: 1; justify-content: space-between; gap: 6px; }
.rail-checks b { font-size: .74rem; color: var(--c-accent); }
.rail-note { margin: 2px 0 0; font-size: .72rem; line-height: 1.6; color: var(--text-dim); }
.rail-reset { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; }
.rail-reset .ico { width: 14px; height: 14px; }
.rail-chips a.is-on { background: var(--on-bg); border-color: transparent; color: var(--on-text); }

/* 左のサイドメニューの行から選ぶところが開く広い画面（1200px 以上）では、メインの同じもの（日付のカレンダーの列・地域でさがすの地図の列・ジャンルの帯）は出さない
   （2026-10-18 ユーザー指示「カレンダーがサイドメニューに入ったら、広い画面ではメインの列を外す」。地域・ジャンルも同じ考え方で。狭い画面では今までどおり） */
@media (min-width: 1200px) {
  html.js .site-body .date-layout > .date-side { display: none; }
  html.js .site-body .date-layout { grid-template-columns: minmax(0, 1fr); }
  html.js .site-body .area-layout:not(.regular-layout) > .area-map { display: none; }
  html.js .site-body .area-layout:not(.regular-layout) { grid-template-columns: minmax(0, 1fr); }
  html.js .site-body .genre-band { display: none; }
}

.rail-checks span, .rail-chips a { overflow-wrap: normal; }

.rail-links .rail-acc { gap: 6px; }
.rail-acc-label { flex: 1; }
.rail-acc-ico { display: inline-flex; flex: none; }
.rail-acc-chev { display: inline-grid; place-items: center; flex: none; }

/* ===== 定員・中止の表示（status.php・marks.php。2026-10-18） =====
   札はほかの札より強く（中止は赤の地に白、定員はからし色の地）。詳細の見出しの表示は左に太い線の帯。
   付ける前の注意（.mark-warning）はわざと硬い見た目（うその「中止」への抑止。やわらげない） */
.badge-mark-cancel { color: #fff; background: var(--c-danger); box-shadow: none; font-weight: 800; }
.badge-mark-full { color: #5a3a00; background: #ffd77a; box-shadow: inset 0 0 0 1px #d9a530; font-weight: 800; }
.badge-mark-closed { color: #1d4a66; background: #d4e7f1; box-shadow: inset 0 0 0 1px #6fa8c9; font-weight: 800; } /* 募集を終えた（イベントは開くので、中止の赤・満員のからし色と分ける。2026-11-05） */
.ev-mark { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 12px 14px; border-radius: 6px; border-left: 5px solid var(--c-danger); background: var(--need-bg); color: var(--need-ink); text-align: left; }
.ev-mark-full { border-left-color: #d9a530; background: #fff4d6; color: #5a3a00; }
.ev-mark-closed { border-left-color: #6fa8c9; background: #e8f3f9; color: #1d4a66; }
.ev-mark > .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.ev-mark b { display: block; font-size: 1.15rem; font-weight: 900; }
.ev-mark small { display: block; margin-top: 4px; font-size: .82rem; color: inherit; opacity: .9; }
.ev-mark ul { margin: 6px 0 0; padding-left: 1.2em; }
.ev-mark li b { display: inline; font-size: 1rem; }
.mark-warning { margin: 18px 0 12px; padding: 14px 16px; border: 2px solid var(--c-danger); border-radius: 6px; background: #fff6f4; color: #5c1a12; font-weight: 700; }
.mark-warning p { margin: 0; }
.mark-warning p + p { margin-top: 6px; }
.mark-confirm { margin: 0 0 14px; font-weight: 700; }

/* ---------- スマホなど狭い画面（1199px 以下）: 左上のボタンで左のサイドメニューを横から引き出す（2026-10-19 ユーザー指示） ---------- */
.nav-burger, .rail-drawer-head { display: none; }
@media (max-width: 1199px) {
  .nav-burger { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: -4px; padding: 0; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; }
  .nav-burger .ico { width: 22px; height: 22px; }
  .site-rail { display: block; position: fixed; z-index: 200; top: 0; left: 0; bottom: 0; width: min(86vw, 320px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 28px; background: var(--bg, #fffaf0); box-shadow: 8px 0 30px rgba(60, 35, 20, .22); transform: translateX(-105%); visibility: hidden; transition: transform .28s var(--ease), visibility 0s linear .28s; }
  html.rail-open .site-rail { transform: none; visibility: visible; transition: transform .28s var(--ease); }
  .rail-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1.5px solid var(--line); }
  .rail-drawer-head b { font-size: .95rem; font-weight: 900; color: var(--c-forest); }
  .rail-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; }
  .rail-close .ico { width: 18px; height: 18px; }
  .rail-backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(40, 25, 15, .38); opacity: 0; pointer-events: none; transition: opacity .25s; }
  html.rail-open .rail-backdrop { opacity: 1; pointer-events: auto; }
  html.rail-open, html.rail-open body { overflow: hidden; }
}
@media (min-width: 1200px) { .rail-backdrop { display: none; } }
html.reduce-motion .site-rail, html.reduce-motion .rail-backdrop { transition: none; }

/* ---------- さがし方の色を戻す（2026-10-19 ユーザー指示「この色をそれぞれの 日付で ジャンルで 地域で のボタンの色に」） ----------
   2026-10-16 の色（日付＝からし・地域＝若草・ジャンル＝だいだい・詳しく＝テラコッタ・定期＝空色）。10/17 に全部こげ茶の線にしていたのを戻す。
   左のサイドメニュー（スマホは引き出しのメニュー）の5つの行と、トップのさがし方の帯（左のサイドメニューのない幅だけに出る）の輪のアイコン */
.st-date, .rail-acc[data-acc="date"] { --t1: #ffd66b; --t2: #e9a21f; --t-ink: #8a5a00; }
.st-area, .rail-acc[data-acc="area"] { --t1: #b9db86; --t2: #5f9a35; --t-ink: #3f6b1f; }
.st-genre, .rail-acc[data-acc="genre"] { --t1: #ffbf80; --t2: #e8762c; --t-ink: #a24a10; }
.st-detail, .rail-detail { --t1: #f4996a; --t2: #b9542f; --t-ink: #9e4423; }
.st-regular, .rail-regular { --t1: #a9d6ee; --t2: #3d8fbf; --t-ink: #2c6a8f; }
/* トップの帯: 色の塗りの輪に白いアイコン、ホバーで下にその色の線 */
.home-tabs .search-tab:not(.search-tab-sub) .st-ico,
.home-tabs .search-tab:not(.search-tab-sub):hover .st-ico { color: #fff; background: linear-gradient(140deg, var(--t1), var(--t2)); box-shadow: 0 0 0 3px #fff, 0 8px 16px -8px var(--t2); }
.home-tabs .search-tab:not(.search-tab-sub) .ico { color: #fff; }
.home-tabs .search-tab:not(.search-tab-sub)::after { background: linear-gradient(90deg, var(--t1), var(--t2)); }
/* さがすページの田の字・狭い画面の帯: アイコンをその色に */
.search-tabs .search-tab:not(.search-tab-sub) .ico { color: var(--t2); }
.home-tabs .search-tabs .search-tab:not(.search-tab-sub) .ico { color: #fff; }
/* 左のサイドメニュー: 行の頭を色の輪にし、開いた行の地もその色の淡い色に */
.rail-links .rail-acc-ico, .rail-links .rail-detail .ico, .rail-links .rail-regular .ico {
  display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(140deg, var(--t1), var(--t2)); box-shadow: 0 4px 10px -6px var(--t2); }
.rail-links .rail-acc-ico .ico { width: 16px; height: 16px; color: #fff; }
.rail-links .rail-detail .ico, .rail-links .rail-regular .ico { padding: 7px; color: #fff; }
.rail-links .rail-detail, .rail-links .rail-regular { gap: 6px; }
.rail-links .rail-acc:hover, .rail-detail:hover, .rail-regular:hover { background: color-mix(in srgb, var(--t1) 22%, #fff); }
.rail-links .rail-acc.is-on, .rail-links .rail-acc.is-on:hover,
.rail-detail[aria-current="page"], .rail-regular[aria-current="page"] { background: color-mix(in srgb, var(--t1) 55%, #fff); color: var(--t-ink); }
.rail-links .rail-acc.is-on .rail-acc-chev .ico { color: var(--t-ink); }

/* スマホのトップでは、さがし方の帯を出さない（引き出しのメニューと同じ中身のため。2026-10-19 ユーザー指示） */
@media (max-width: 760px) { .home-tabs { display: none; } }

/* ---------- チラシを大きく見る（flyer.php。2026-10-19 ユーザー指示「チラシを押したら、サイトの中の明るいページ〔指で拡大・戻るボタン付き〕で開くように」）
   以前は画像ファイルをそのまま開き、黒い地のせいでホーム画面のアプリの下の戻る・ホームのボタンが見えなくなった ---------- */
html:has(body.fpv-page) { scroll-padding-top: 70px; }
.fpv-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 8px var(--gutter);
  background: rgba(255, 250, 240, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.fpv-back {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 6px 16px 6px 12px;
  border-radius: 6px; background: var(--c-forest); color: #fff;
  font-weight: 800; text-decoration: none;
}
.fpv-back:hover { background: var(--c-forest-dark); color: #fff; }
.fpv-back .ico { width: 18px; height: 18px; }
.fpv-title { min-width: 0; margin: 0; display: flex; flex-direction: column; line-height: 1.35; }
.fpv-title b { font-size: .95rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpv-title small { font-size: .78rem; color: var(--text-dim); }
main.fpv-main { max-width: 1000px; margin: 0 auto; padding: 12px var(--gutter) 40px; }
.fpv-hint { margin: 0 0 14px; font-size: .88rem; color: var(--text-dim); }
.fpv-sheet { margin: 0 0 30px; }
.fpv-num { margin: 0 0 6px; font-size: .88rem; font-weight: 800; color: var(--text-soft); }
.fpv-zoom {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  background: var(--paper); border-radius: 2px; box-shadow: var(--soft-shadow);
  cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.fpv-zoom:focus-visible { outline: 3px solid var(--c-rice); outline-offset: 3px; }
.fpv-zoom img { display: block; width: 100%; height: auto; }
.fpv-zoom.is-zoomed { cursor: zoom-out; }
.fpv-zoom.is-zoomed img { max-width: none; }
.fpv-zoom.is-dragging { cursor: grabbing; user-select: none; }
.fpv-pdf { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fpv-pdf .ico { width: 18px; height: 18px; color: var(--c-forest); }
.fpv-pdf small { font-size: .82rem; color: var(--text-dim); }
.fpv-foot { margin: 8px 0 0; text-align: center; }
.fpv-foot .btn .ico { width: 18px; height: 18px; }

/* ---------- 背景を明るく（2026-10-19 ユーザー指示「背景の色がくすんだ茶色っぽいのはどうにかならんかね」）
   地はクリーム #fffaf0 のはずが、ざらざらの重ね（茶色の掛け合わせ .25）・下のほうの桃色 #fff3df・からし色とテラコッタの光の玉で、
   スマホでは #f2e5d1 くらいの、くすんだ茶色に見えていた。ざらざらはごく薄く、下の桃色はやめ、光の玉は半分以下に ---------- */
.bg-fx { background: linear-gradient(180deg, #fffdf8, var(--bg) 45%); }
.bg-fx::after { opacity: .06; }
.orb-1 { background: radial-gradient(circle, rgba(242, 179, 61, .10), transparent 62%); }
.orb-2 { background: radial-gradient(circle, rgba(212, 100, 58, .04), transparent 62%); }
.orb-3 { background: radial-gradient(circle, rgba(143, 179, 107, .08), transparent 62%); }

/* ===== 写真の撮影場所などの情報を消す案内（投稿フォームのチラシの見出しのすぐ下。2026-10-21 ユーザー指示「安心だとわかるように目につきやすいところに」） ===== */
.flyer-guide-box { margin: 0 0 14px; } /* 載せられるチラシの文と例へのリンク・写真の扱い（2026-10-25） */
.fgb-lead { margin: 0 0 8px; font-weight: 800; line-height: 1.7; }
.fgb-sub { margin: 8px 0 0; font-size: .86rem; color: var(--text-dim); line-height: 1.7; }
.flyer-guide-link { display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--paper-2); color: var(--ink); text-decoration: none; transition: border-color .2s, background-color .2s; } /* 載せられるチラシ・載せられないチラシの例へ（2026-10-25。もとの .flyer-safe の場所） */
.flyer-guide-link:hover { border-color: var(--c-forest); background: color-mix(in srgb, var(--c-forest) 5%, var(--paper)); }
.fgl-thumbs { flex: none; display: flex; }
.fgl-thumbs img { width: 34px; height: 51px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line-strong); background: var(--paper); box-shadow: 0 1px 3px rgba(58, 42, 32, .15); }
.fgl-thumbs img + img { margin-left: -12px; }
.fgl-thumbs img:nth-child(2) { rotate: 4deg; }
.fgl-thumbs img:nth-child(3) { rotate: -3deg; }
.fgl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; }
.fgl-text b { font-size: .98rem; font-weight: 900; color: var(--c-forest); }
.fgl-text small { font-size: .84rem; color: var(--text-soft); }
.fgl-go { flex: none; color: var(--text-dim); }
.fgl-go .ico { width: 20px; height: 20px; }

/* ───────── 町ごとの地図の色（2026-10-22。三次・世羅・神石高原の地域。庄原と同じ水彩の色で、隣り合う地域は違う色みに。庄原の地域の色は上の .r-shobara など） ───────── */
.r-miyoshi_miyoshi .smap-d { fill: #f2cbd1; }   /* 旧三次市: 桃 */
.r-miyoshi_sakugi .smap-d { fill: #dcd3ee; }    /* 作木: 藤 */
.r-miyoshi_funo .smap-d { fill: #f0d68f; }      /* 布野: 稲穂 */
.r-miyoshi_kimita .smap-d { fill: #c9dcec; }    /* 君田: 空 */
.r-miyoshi_mirasaka .smap-d { fill: #d3e4ae; }  /* 三良坂: 若葉 */
.r-miyoshi_kisa .smap-d { fill: #bfdedb; }      /* 吉舎: 水 */
.r-miyoshi_kounu .smap-d { fill: #f0d68f; }     /* 甲奴: 稲穂 */
.r-miyoshi_miwa .smap-d { fill: #bcd8c2; }      /* 三和: 杉 */
.r-sera_kouzan .smap-d { fill: #d3e4ae; }
.r-sera_sera .smap-d { fill: #f0d68f; }
.r-sera_seranishi .smap-d { fill: #dcd3ee; }
.r-jinseki_yuki .smap-d { fill: #f0d68f; }
.r-jinseki_jinseki .smap-d { fill: #c9dcec; }
.r-jinseki_toyomatsu .smap-d { fill: #f2cbd1; }
.r-jinseki_miwa .smap-d { fill: #d3e4ae; }
.smap-svg:has(.r-miyoshi_miyoshi:hover, .r-miyoshi_miyoshi:focus-visible) .hl-miyoshi_miyoshi,
.smap-svg:has(.r-miyoshi_sakugi:hover, .r-miyoshi_sakugi:focus-visible) .hl-miyoshi_sakugi,
.smap-svg:has(.r-miyoshi_funo:hover, .r-miyoshi_funo:focus-visible) .hl-miyoshi_funo,
.smap-svg:has(.r-miyoshi_kimita:hover, .r-miyoshi_kimita:focus-visible) .hl-miyoshi_kimita,
.smap-svg:has(.r-miyoshi_mirasaka:hover, .r-miyoshi_mirasaka:focus-visible) .hl-miyoshi_mirasaka,
.smap-svg:has(.r-miyoshi_kisa:hover, .r-miyoshi_kisa:focus-visible) .hl-miyoshi_kisa,
.smap-svg:has(.r-miyoshi_kounu:hover, .r-miyoshi_kounu:focus-visible) .hl-miyoshi_kounu,
.smap-svg:has(.r-miyoshi_miwa:hover, .r-miyoshi_miwa:focus-visible) .hl-miyoshi_miwa,
.smap-svg:has(.r-sera_kouzan:hover, .r-sera_kouzan:focus-visible) .hl-sera_kouzan,
.smap-svg:has(.r-sera_sera:hover, .r-sera_sera:focus-visible) .hl-sera_sera,
.smap-svg:has(.r-sera_seranishi:hover, .r-sera_seranishi:focus-visible) .hl-sera_seranishi,
.smap-svg:has(.r-jinseki_yuki:hover, .r-jinseki_yuki:focus-visible) .hl-jinseki_yuki,
.smap-svg:has(.r-jinseki_jinseki:hover, .r-jinseki_jinseki:focus-visible) .hl-jinseki_jinseki,
.smap-svg:has(.r-jinseki_toyomatsu:hover, .r-jinseki_toyomatsu:focus-visible) .hl-jinseki_toyomatsu,
.smap-svg:has(.r-jinseki_miwa:hover, .r-jinseki_miwa:focus-visible) .hl-jinseki_miwa { opacity: 1; }

/* ───────── 市外の催し（2026-10-22 ユーザー指示「市内と市外の差をはっきりと。市外は会期中の催しと同じ要領で」）: 日ごとの一覧で、
   その町の外の催しはカードにせず、会期中の催しと同じ1行（.ev-rows）にして市内のカードの下にまとめる（layout.php の render_day_groups）。
   その前に試した案A〔市外のカードをくすませて小さく〕は「イマイチ」でやめた ───────── */
.day-cards > .day-out-rows { grid-column: 1 / -1; }
.day-cards > .day-zone + .day-out-rows { margin-top: -6px; }

/* ---------- Instagram へのリンク（2026-10-23 ユーザー指示。左のサイドメニューの「新着・お知らせ」の下・フッターの目次・投稿完了の画面） ---------- */
.rail-new + .rail-ig { margin-top: -10px; } /* 新着・お知らせと一組に見えるよう、間を詰める */
.done-ig { display: flex; justify-content: center; align-items: center; gap: 6px; margin: -8px auto 18px; max-width: 34em; font-size: .92rem; color: var(--ink); }
.done-ig .ico { width: 18px; height: 18px; flex: none; color: var(--c-forest); }
.done-ig a { font-weight: 800; }

/* スマホではヘッダーの「さがす」（ホーム画面に追加した人に出る虫めがね）を出さない。ロゴと「載せる」の間に入らず、ロゴに重なるため
   （2026-10-23 ユーザー指示「スマホではメガネマークが入らないので削除して」。さがし方は左上のメニューにある） */
@media (max-width: 760px) {
  .global-nav > [data-a2hs-search] { display: none; }
  /* 「ホームに追加」は、ヘッダーの下の右に、「載せる」の真下へぶら下がる札の形で出す（2026-10-23 ユーザー指示「載せる AI の下らへんに」。
     ロゴと「載せる」の間ではアイコンしか入らず、見えなくなるため）。ヘッダーと一緒に付いてくる */
  .header-inner { position: relative; }
  .global-nav > .nav-a2hs { position: absolute; right: var(--gutter); top: calc(100% + 3px); z-index: 2;
    flex-direction: row; gap: 5px; padding: 4px 11px 5px; border: 1px solid color-mix(in srgb, var(--c-forest) 35%, #fff); border-top: 0;
    border-radius: 0 0 6px 6px; background: rgba(255, 255, 255, .97); color: var(--c-forest); font-size: .76rem; font-weight: 800; line-height: 1.2; }
  .global-nav > .nav-a2hs::after { display: none; }
  .nav-a2hs .ico { width: 16px; height: 16px; }
}
/* スマホのロゴは、左上のメニューと右のボタンの残りの幅に収まる大きさまで縮める（はみ出して「ホームに追加」「載せる」に重ならないように。2026-10-23）。
   ロゴの入れ物を残りの幅いっぱいにして、その幅（cqw）からロゴの高さを決める。ロゴの絵の横幅は高さの約4.25倍なので 23.5cqw */
@supports (container-type: inline-size) {
  @media (max-width: 760px) {
    .logo { flex: 1 1 0; container-type: inline-size; }
    .logo .logo-lockup { --logo-h: min(56px, 23.5cqw); }
  }
  @media (max-width: 600px) {
    .logo .logo-lockup { --logo-h: min(42px, 23.5cqw); }
  }
}
/* その町の件数を主に、近隣は小さく「+数」（2026-10-23 ユーザー指示。himekuri.php の count_with_near。日付の帯・カレンダー・今日明日今週末の札・新着） */
.near-plus { margin-left: 2px; font-family: var(--sans); font-size: .9em; font-weight: 700; color: var(--text-dim); }
.near-only { color: var(--text-dim); font-weight: 700; }
.near-only .near-plus { margin-left: 0; font-size: 1em; }
.ask-chip .near-plus { margin-left: -2px; font-size: .78rem; }
.mini-d.has-near { color: var(--ink); }
.mini-d.has-near::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--text-dim); }
.new-head .near-plus { font-size: .82em; }
/* ---------- Instagram のリンクをほんの少し目立たせる（2026-10-24 ユーザー指示「ほんの少し目立つように」）: アイコンを Instagram の色の輪にし、サイドメニューの札は淡い桃色の地に。文字の色・大きさは変えない ---------- */
.rail-ig, .footer-ig, .done-ig { --ig-grad: linear-gradient(45deg, #f9b54a 0%, #ee5a4f 38%, #d62976 68%, #8a3ab9 100%); }
.rail-new.rail-ig { background: #fff6f6; border-color: #f0c3cf; }
.rail-new.rail-ig:hover { border-color: #d62976; }
.rail-new.rail-ig > .ico:first-child { box-sizing: border-box; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--ig-grad); color: #fff; }
.rail-new.rail-ig > .ico:last-child { color: #c2306d; }
.rail-new.rail-ig small:last-child { color: #a8285e; }
.footer-nav a.footer-ig .ico { box-sizing: border-box; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--ig-grad); color: #fff; }
.done-ig .ico { box-sizing: border-box; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--ig-grad); color: #fff; }
/* ---------- 右のサイドバーの「長く開いている催し」（会期中の催し）を縦長のカードに（2026-10-24 ユーザー指示「狭くて目立たなすぎ。縦型のカードにして横幅は今と同じ。
   横幅一杯に画像を出して高さを出し、下に内容を。スクロールは自動で、→などは目立たない位置に」。rail.php の render_rail_long_runs） ----------
   見出しは幅いっぱいの空色の帯。チラシは欄の幅いっぱいの正方形に切り抜き（切り抜く位置は一覧のカードと同じ）、下に題名・期間と地域・説明の書き出し3行
   （2026-10-25 ユーザー指示「画像は正方形に切り取った部分にして、説明文が表示されるように」。その前は縦 3:4 の枠にチラシ全体を縮め、余白に同じ絵をぼかして敷いていた）。
   札はみな同じ升に重ね（升の高さはいちばん高い札にそろうので、切り替えても下の「イベントを載せる」が動かない）、横に流して入れ替える（app.js の [data-rotator] の is-on・is-out・is-back）。
   前後・止めるボタンはチラシの右下の半透明の小さな札（ポインターを当てる・フォーカスで濃く）。カードの下の細い線が、次へ切り替わるまでの時間 */
.rail-nowon .side-nowon-head { display: block; }
.rail-nowon .side-nowon-tag { display: flex; padding: 8px 14px; clip-path: none; font-size: .98rem; letter-spacing: .06em; }
.rail-nowon .side-nowon-stage { position: relative; overflow: hidden; container-type: inline-size; }
.rail-nowon .side-nowon-list { padding: 0; }
.rail-nowon .side-nowon-item a { display: block; min-height: 0; padding: 0; border-radius: 0; }
.rail-nowon .side-nowon-item a:hover { background: none; }
.rail-nowon .side-nowon-thumb { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; background: var(--tint); }
.rail-nowon .side-nowon-text { gap: 4px; padding: 10px 14px 12px; }
.rail-nowon .side-nowon-text b { font-size: 1.02rem; }
.rail-nowon .side-nowon-text small { font-size: .8rem; }
.rail-nowon .side-nowon-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: .82rem; line-height: 1.6; color: var(--text-soft); }
html.js .rail-nowon .side-nowon-list { display: grid; }
html.js .rail-nowon .side-nowon-item { grid-area: 1 / 1; display: block; visibility: hidden; translate: 100% 0; animation: none; }
html.js .rail-nowon.is-back .side-nowon-item { translate: -100% 0; }
html.js .rail-nowon .side-nowon-item.is-on { visibility: visible; translate: 0 0; transition: translate .6s var(--ease-out); }
html.js .rail-nowon .side-nowon-item.is-out { visibility: visible; translate: -100% 0; transition: translate .6s var(--ease-out); }
html.js .rail-nowon.is-back .side-nowon-item.is-out { translate: 100% 0; }
html.reduce-motion .rail-nowon .side-nowon-item.is-on, html.reduce-motion .rail-nowon .side-nowon-item.is-out { transition: none; }
.rail-nowon .side-nowon-ctrl { position: absolute; z-index: 2; right: 8px; top: calc(100cqw - 36px); gap: 0; padding: 2px; border-radius: 6px;
  background: rgba(255, 252, 245, .8); backdrop-filter: blur(4px); box-shadow: 0 0 0 1px rgba(58, 42, 32, .08); opacity: .7; transition: opacity .2s; }
.rail-nowon:hover .side-nowon-ctrl, .rail-nowon:focus-within .side-nowon-ctrl { opacity: 1; }
.rail-nowon .side-nowon-ctrl button { width: 24px; height: 24px; border: 0; background: none; }
.rail-nowon .side-nowon-ctrl button:hover { background: var(--hover-bg); }
.rail-nowon .side-nowon-ctrl .ico { width: 13px; height: 13px; }
.rail-nowon .side-nowon-num { min-width: 2.9em; font-size: .74rem; }
.rail-nowon .side-nowon-pause { margin-left: 0; }
.rail-nowon .side-nowon-bar { height: 3px; background: color-mix(in srgb, var(--c-sky-ink) 12%, transparent); }
.rail-nowon .side-nowon-bar i { display: block; height: 100%; background: var(--c-sky-ink); transform-origin: 0 50%; scale: 0 1; }
.rail-nowon.is-running .side-nowon-bar i { animation: rail-nowon-bar var(--rot-ms, 6s) linear forwards; }
@keyframes rail-nowon-bar { to { scale: 1 1; } }
html:not(.js) .rail-nowon .side-nowon-bar, html.reduce-motion .rail-nowon .side-nowon-bar { display: none; }
/* 近隣の会期中の催しは、カードの下に題名と市町の名前だけを横に流す（2026-10-25 ユーザーが案1を選択、同日「文字が目立つので文字のみをスクロール」。
   同じ並びを2つ横に置いて半分ずらすと、つなぎ目なく回る。1つの並びは欄の幅より短くならないように〔min-width: 100cqw〕。
   ポインターを当てる・フォーカスで止まり、動きを減らす設定では流さずに折り返して並べる） */
.rail-nowon-near { padding: 8px 0 10px; border-top: 1px dashed var(--line-strong); }
.rail-nowon.is-near-only .rail-nowon-near { border-top: 0; }
.rail-nowon-near h3 { display: flex; align-items: baseline; gap: 6px; margin: 0 14px 4px; font-family: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--text-soft); }
.rail-nowon-near h3 small { font-size: .72rem; font-weight: 700; }
.rail-near-ticker { overflow: hidden; container-type: inline-size;
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.rail-near-track { display: flex; width: max-content; animation: rail-near-scroll var(--dur, 20s) linear infinite; }
.rail-near-ticker:hover .rail-near-track, .rail-near-ticker:focus-within .rail-near-track { animation-play-state: paused; }
@keyframes rail-near-scroll { to { translate: -50% 0; } }
.rail-near-copy { display: flex; flex: none; min-width: 100cqw; margin: 0; padding: 0; list-style: none; }
.rail-near-copy li { flex: none; padding: 0 1.6em 0 14px; white-space: nowrap; }
.rail-near-copy a { font-size: .84rem; font-weight: 700; line-height: 1.7; color: var(--text); text-decoration: none; }
.rail-near-copy a:hover { color: var(--c-forest); }
.rail-near-copy small { font-size: .74rem; font-weight: 700; color: var(--text-soft); }
html.reduce-motion .rail-near-ticker { mask-image: none; }
html.reduce-motion .rail-near-track { width: auto; animation: none; }
html.reduce-motion .rail-near-copy { flex-wrap: wrap; min-width: 0; }
html.reduce-motion .rail-near-copy[aria-hidden] { display: none; }
html.reduce-motion .rail-near-copy li { white-space: normal; }

/* ===== 載せられるチラシ（flyer-guide.php の1枚の LP。2026-10-25 ユーザー指示） ===== */
.fg { --fg-ev: var(--c-forest); --fg-rg: var(--c-sky-ink); }
.fg-sec, .fg-hero { margin: 0 0 22px; padding: 30px 32px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper); }
.fg-hero { position: relative; padding: 38px 32px 32px; background: linear-gradient(180deg, #fff6df, var(--paper) 70%); border-color: var(--line-strong); }
.fg-kicker { margin: 0 0 4px; font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; color: var(--c-forest); }
.fg-hero h1 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.3; }
.fg-lead { margin: 0 0 24px; font-size: 1.02rem; font-weight: 700; line-height: 1.9; color: var(--text-soft); }
.fg-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fg-kind { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; padding: 14px 44px 14px 14px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.fg-kind:hover { border-color: currentColor; transform: translateY(-2px); }
.fg-kind img { grid-row: 1 / 3; width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }
.fg-kind-no { position: absolute; top: -10px; left: -10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fg-ev); color: #fff; font-weight: 900; }
.fg-kind-regular .fg-kind-no { background: var(--fg-rg); }
.fg-kind b { font-size: 1.08rem; font-weight: 900; line-height: 1.5; }
.fg-kind-event b { color: var(--fg-ev); }
.fg-kind-regular b { color: var(--fg-rg); }
.fg-kind > span:not([class]) { font-size: .88rem; color: var(--text-soft); line-height: 1.7; }
.fg-kind-go { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--text-dim); }
.fg-kind-go .ico { width: 20px; height: 20px; }

.fg-sec { scroll-margin-top: 90px; }
.fg-sec h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; }
.fg-no { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fg-ev); color: #fff; font-family: var(--mono), var(--sans, inherit); font-size: 1.05rem; }
.fg-sec-regular { border-top: 5px solid var(--fg-rg); }
.fg-sec-event { border-top: 5px solid var(--fg-ev); }
.fg-sec-regular .fg-no { background: var(--fg-rg); }
.fg-sec-lead { margin: -4px 0 18px; font-weight: 700; line-height: 1.85; color: var(--text-soft); }
.fg-h3 { margin: 26px 0 10px; font-size: 1.08rem; font-weight: 900; }
.fg-note { margin: 14px 0 0; font-size: .88rem; color: var(--text-dim); line-height: 1.8; }

.fg-checks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.fg-checks li { display: flex; gap: 10px; line-height: 1.7; }
.fg-checks .ico { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--c-green); }
.fg-checks b { display: block; font-weight: 900; }
.fg-checks span { font-size: .9rem; color: var(--text-soft); }
.fg-checks b { font-size: 1rem; color: var(--text); }

.fg-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: fgr; }
.fg-rules li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 6px; background: color-mix(in srgb, var(--c-sky) 7%, var(--paper)); border: 1px solid color-mix(in srgb, var(--c-sky) 22%, transparent); line-height: 1.75; }
.fg-rule-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fg-rg); color: #fff; }
.fg-rule-ico .ico { width: 18px; height: 18px; }
.fg-rules b { display: block; font-size: 1.02rem; font-weight: 900; }
.fg-rules li > span:last-child { font-size: .92rem; color: var(--text-soft); }

.fg-fees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fg-fees li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--paper-2); text-align: center; }
.fg-fee-name { font-size: .88rem; font-weight: 700; color: var(--text-soft); }
.fg-fee-max { font-size: 1.3rem; font-weight: 900; color: var(--fg-rg); line-height: 1.5; }
.fg-fee-sub { font-size: .8rem; color: var(--text-dim); }

.fg-examples { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.fg-examples li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.fg-ex-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.fg-ex-mark .ico { width: 15px; height: 15px; }
.is-ok .fg-ex-mark { background: #e6f0dc; color: var(--c-green); }
.is-ng .fg-ex-mark { background: var(--need-bg); color: var(--need-ink); }
.fg-ex-body { display: flex; flex-direction: column; line-height: 1.65; }
.fg-ex-body b { font-weight: 800; }
.fg-ex-body span { font-size: .86rem; color: var(--text-dim); }

/* 見本のチラシ（AI で作った架空のチラシ。2026-10-25） */
.fg-samples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fg-sample { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper-2); }
.fg-sample.is-ok { border-color: color-mix(in srgb, var(--c-green) 35%, transparent); }
.fg-sample.is-ng { border-color: color-mix(in srgb, var(--need-ink) 30%, transparent); }
.fg-sample-img { display: block; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.fg-sample-img img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .25s; }
.fg-sample-img:hover img { transform: scale(1.03); }
.fg-sample-verdict { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 3px 10px 3px 7px; border-radius: 6px; font-size: .86rem; font-weight: 900; }
.fg-sample-verdict .ico { width: 15px; height: 15px; }
.is-ok .fg-sample-verdict { background: #e6f0dc; color: var(--c-green); }
.is-ng .fg-sample-verdict { background: var(--need-bg); color: var(--need-ink); }
.fg-sample-name { font-size: 1rem; font-weight: 900; line-height: 1.5; }
.fg-sample-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fg-sample-points li { display: flex; gap: 6px; font-size: .86rem; line-height: 1.6; color: var(--text-soft); }
.fg-sample-points .ico { flex: none; width: 15px; height: 15px; margin-top: 3px; }
.fg-sample-points .is-good .ico { color: var(--c-green); }
.fg-sample-points .is-bad { color: var(--need-ink); font-weight: 800; }
.fg-sample-fix { margin: auto 0 0; padding: 8px 10px; border-radius: 6px; background: #f1f6ea; font-size: .82rem; line-height: 1.7; color: var(--text-soft); }

.fg-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fg-after > div { padding: 16px 18px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper-2); }
.fg-after-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 50%; background: color-mix(in srgb, var(--c-sky) 14%, var(--paper)); color: var(--fg-rg); }
.fg-after-ico .ico { width: 18px; height: 18px; }
.fg-after b { font-weight: 900; }
.fg-after p { margin: 6px 0 0; font-size: .9rem; line-height: 1.8; color: var(--text-soft); }

.fg-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: fgf; }
.fg-flow li { counter-increment: fgf; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border-radius: 8px; background: var(--paper-2); border: 1.5px solid var(--line); text-align: center; }
.fg-flow-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; background: var(--c-forest); color: #fff; }
.fg-flow-ico.is-ai { background: var(--c-ai); }
.fg-flow-ico .ico { width: 22px; height: 22px; }
.fg-flow b::before { content: counter(fgf) ". "; }
.fg-flow b { font-weight: 900; }
.fg-flow span:last-child { font-size: .86rem; color: var(--text-soft); line-height: 1.7; }
.fg-sec-ng p { margin: 0; line-height: 1.85; }
.fg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 8px; }

@media (max-width: 760px) {
  .fg-sec, .fg-hero { padding: 22px 18px; }
  .fg-hero { padding-top: 28px; }
  .fg-kinds, .fg-checks, .fg-after, .fg-flow { grid-template-columns: minmax(0, 1fr); }
  .fg-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fg-sample { padding: 8px; }
  .fg-kind { grid-template-columns: 72px minmax(0, 1fr); }
  .fg-kind img { width: 72px; height: 72px; }
  .fg-fees { grid-template-columns: minmax(0, 1fr); }
  .fg-fees li { flex-direction: row; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; text-align: left; }
  .fg-fee-max { font-size: 1.1rem; }
  .fg-fee-sub { flex-basis: 100%; }
  .fg-sec h2 { font-size: 1.28rem; }
}

/* ===== 定期コミュニティ（2026-10-25: 日付の一覧の1行・投稿フォームの日程づくり・延長） ===== */
.day-cards > .day-regular-zone, .day-cards > .day-regular-rows { grid-column: 1 / -1; }
.day-regular-zone { display: flex; align-items: center; gap: 6px; margin: 4px 0 -6px; font-size: .8rem; font-weight: 800; color: var(--c-sky-ink); }
.day-regular-zone .ico { width: 15px; height: 15px; }
.day-regular-zone::after { content: ""; flex: 1; order: 1; border-top: 1.5px dashed color-mix(in srgb, var(--c-sky) 35%, transparent); }
.day-regular-zone a { order: 2; font-size: .78rem; font-weight: 700; color: var(--c-sky-ink); }
.day-regular-rows .ev-row-lead b { color: var(--c-sky-ink); }
.recur-mode, .recur-nth { margin-bottom: 8px; }
.recur-nth { padding-left: 2px; }
.choice.is-off { opacity: .45; cursor: not-allowed; }
.choice.is-off input { cursor: not-allowed; }
.recur-role-note { color: var(--c-sky-ink); }
.regular-extend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 14px; }
.regular-extend small { font-size: .82rem; color: var(--text-dim); }
.extend-dates { list-style: none; margin: 10px 0 18px; padding: 0; border-top: 1px solid var(--line-strong); }
.extend-dates li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.extend-dates b { min-width: 6.5em; font-weight: 800; }
.extend-dates span { color: var(--text-soft); }

/* ===== 載せられるチラシ・載せられないチラシのタブ（2026-10-25: 2つのページを1つにまとめた） ===== */
.fg-hero .fg-lead { margin-bottom: 18px; }
.fg-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fg-tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; border: 2px solid var(--line-strong); background: var(--paper); color: var(--text); text-decoration: none; transition: border-color .2s, background-color .2s; }
.fg-tab .ico { flex: none; width: 26px; height: 26px; color: var(--text-dim); }
.fg-tab b { display: block; font-size: 1.05rem; font-weight: 900; line-height: 1.4; }
.fg-tab small { display: block; font-size: .84rem; color: var(--text-soft); }
.fg-tab:hover { border-color: currentColor; }
.fg-tab-event[aria-selected="true"] { border-color: var(--fg-ev); background: color-mix(in srgb, var(--fg-ev) 8%, var(--paper)); }
.fg-tab-event[aria-selected="true"] .ico, .fg-tab-event[aria-selected="true"] b { color: var(--fg-ev); }
.fg-tab-regular[aria-selected="true"] { border-color: var(--fg-rg); background: color-mix(in srgb, var(--fg-rg) 8%, var(--paper)); }
.fg-tab-regular[aria-selected="true"] .ico, .fg-tab-regular[aria-selected="true"] b { color: var(--fg-rg); }
html:not(.js) .fg-tab { background: var(--paper); }
.fg-panel { scroll-margin-top: 90px; }
.fg-panel > .fg-sec:first-child { border-top: 5px solid var(--fg-ev); }
.fg-panel-regular > .fg-sec:first-child { border-top-color: var(--fg-rg); }
.fg-panel h2 { font-family: var(--serif); }
.fg-samples { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.fg-after { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fg-panel .ngf-cards { margin-top: 4px; }
@media (max-width: 760px) {
  .fg-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .fg-tab { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
  .fg-tab b { font-size: .95rem; }
  .fg-tab small { font-size: .76rem; }
  .fg-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-after { grid-template-columns: minmax(0, 1fr); }
}

/* ===== チラシの差し替え（replace.php。だれでも、内容が同じチラシだけ。2026-10-25） ===== */
.replace-rule { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-strong); border-left: 4px solid var(--c-green); border-radius: 6px; background: var(--paper-2); }
.replace-rule .ico { flex: none; margin-top: 3px; color: var(--c-green); }
.replace-head { margin: 22px 0 8px; font-size: 1.05rem; }
.replace-current { display: flex; flex-wrap: wrap; gap: 10px; }
.replace-thumb { display: block; width: 104px; border: 1px solid var(--line-strong); border-radius: 5px; overflow: hidden; background: var(--paper); }
.replace-thumb img { display: block; width: 100%; height: auto; }
.replace-thumb .thumb-pdf { display: grid; place-items: center; height: 140px; }
.replace-form { margin-top: 8px; }
.replace-form .form-section { padding-top: 6px; }
.flyer-replaced { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .82rem; font-weight: 700; color: var(--text-soft); }
@media (max-width: 480px) {
  .flyer-guide-link { gap: 10px; padding: 10px 12px; }
  .fgl-thumbs img { width: 24px; height: 36px; }
  .fgl-thumbs img + img { margin-left: -9px; }
}

/* ===== 投稿フォームの使いやすさの直し（2026-10-25 ユーザー指示「点検の大・中」） ===== */
/* 必須の札は、ほかの札と見分けられる色に（任意の札は付けない） */
.req { color: #fff; background: var(--c-forest); font-size: .74rem; }
/* 問い合わせ先は、まとまりの見出しに1回だけ「どれか1つ必須」 */
.contact-group { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.contact-group > legend { padding: 0; margin-bottom: 4px; font-weight: 800; }
.contact-group .row { margin-bottom: 0; }
.contact-group.has-error > .row .field input { border-color: var(--c-danger); }
/* チラシの枠は、空いている枠を1つだけ見せる（アップすると次の枠が出る） */
html.js .flyer-slot:not(.is-filled) ~ .flyer-slot:not(.is-filled) { display: none; }
/* 自治振興区の地図は、押すと開く */
.district-map-more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); font-size: .9rem; font-weight: 800; color: var(--c-forest); list-style: none; }
.district-map-more > summary::-webkit-details-marker { display: none; }
.district-map-more > summary .ico { width: 18px; height: 18px; }
.district-map-more[open] > summary { margin-bottom: 8px; }
/* 日付の横の曜日 */
.date-wd { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 5px; background: color-mix(in srgb, var(--c-sky) 12%, var(--paper)); color: var(--c-sky-ink); font-size: .8rem; font-weight: 800; vertical-align: 1px; }
/* 確認の欄: お知らせは箇条書きと分ける */
.agree-note { margin: 4px 0 12px; }
/* 小の直し（2026-10-25 ユーザー指示「点検の小」） */
/* スマホで手順が縦に並ぶときは、横向きの矢印を出さない（左端に取り残されていた） */
@media (max-width: 760px) {
  .flyer-flow { flex-direction: column; gap: 6px; }
  .flyer-flow li + li::before { display: none; }
}
/* 写真のコツの枠は、黄色い面をやめて左の線だけに（からし色を使う所を減らす） */
.flyer-tip { background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--c-rice); }
/* 「一覧で見せるところ」の位置のボタン（3×3）と「おまかせ」 */
.focus-select-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
.focus-grid { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; vertical-align: middle; }
.focus-cells { display: inline-grid; grid-template-columns: repeat(3, 16px); grid-template-rows: repeat(3, 16px); gap: 2px; padding: 3px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--paper); }
.focus-cells button { width: 16px; height: 16px; padding: 0; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--paper-2); cursor: pointer; }
.focus-cells button:hover { border-color: var(--c-forest); }
.focus-cells button[aria-pressed="true"] { background: var(--c-forest); border-color: var(--c-forest); }
.focus-auto { padding: 3px 9px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); font-size: .78rem; font-weight: 800; color: var(--text-soft); cursor: pointer; }
.focus-auto[aria-pressed="true"] { background: var(--c-forest); border-color: var(--c-forest); color: #fff; }

/* ===== 見本のチラシ: 掲載できる・できないを、ひと目で（2026-10-25 ユーザー指示） ===== */
.fg-sample-group + .fg-sample-group { margin-top: 26px; }
.fg-group-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 14px; border-radius: 8px; font-size: 1.12rem; font-weight: 900; color: #fff; }
.fg-group-h small { margin-left: auto; font-size: .82rem; font-weight: 800; opacity: .9; }
.fg-group-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; font-size: 1.15rem; font-weight: 900; line-height: 1; }
.fg-sample-group.is-ok .fg-group-h { background: var(--c-green); }
.fg-sample-group.is-ok .fg-group-mark { color: var(--c-green); }
.fg-sample-group.is-ng .fg-group-h { background: var(--c-danger); }
.fg-sample-group.is-ng .fg-group-mark { color: var(--c-danger); }
.fg-sample { position: relative; padding-top: 0; overflow: hidden; border-width: 2px; }
.fg-sample.is-ok { border-color: color-mix(in srgb, var(--c-green) 55%, transparent); background: color-mix(in srgb, var(--c-green) 5%, var(--paper)); }
.fg-sample.is-ng { border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); background: color-mix(in srgb, var(--c-danger) 4%, var(--paper)); }
.fg-sample-band { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 -12px 2px; padding: 6px 8px; font-size: .92rem; font-weight: 900; color: #fff; letter-spacing: .04em; }
.fg-sample-band .ico { width: 16px; height: 16px; }
.fg-sample.is-ok .fg-sample-band { background: var(--c-green); }
.fg-sample.is-ng .fg-sample-band { background: var(--c-danger); }
.fg-sample-verdict { display: none; }
.fg-sample-img { position: relative; }
.fg-stamp { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 4px solid currentColor; background: rgba(255, 255, 255, .92); font-size: 2rem; font-weight: 900; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.fg-sample.is-ok .fg-stamp { color: var(--c-green); }
.fg-sample.is-ng .fg-stamp { color: var(--c-danger); }
.fg-sample.is-ng .fg-sample-img img { filter: saturate(.55) brightness(.97); }
.fg-sample-fix b { display: block; margin-bottom: 2px; font-size: .78rem; font-weight: 900; color: var(--c-green); }
@media (max-width: 760px) {
  .fg-sample-band { margin: 0 -8px 2px; font-size: .84rem; }
  .fg-stamp { width: 42px; height: 42px; font-size: 1.5rem; border-width: 3px; }
  .fg-group-h { font-size: 1rem; }
}
.fg-group-h small { color: #fff; opacity: 1; }
.fg-group-mark .ico { width: 18px; height: 18px; stroke-width: 3.2; }
.fg-stamp .ico { width: 30px; height: 30px; stroke-width: 3.4; }
@media (max-width: 760px) { .fg-stamp .ico { width: 22px; height: 22px; } }

/* ---------- 一覧のいちばん上の「現在、会期中のイベント」（2026-10-25 ユーザー指示「スマホでは会期中のお知らせがいちばん下に来る。せめてその町のものだけでも目立つ位置に」） ----------
   layout.php の render_long_runs_strip()。その町の会期中の催しを、小さなカード（正方形のチラシ・題名2行・期間と地域）で横にめくる1段。
   右のサイドバーの札が出る広い画面（1400px 以上）では出さない。ここに出したものは、下の「会期中の催し」の欄では隠す（data-in-strip。件数も残りの数に） */
.lr-strip { margin: 0 0 18px; }
.lr-strip-head { margin-bottom: 8px; }
.lr-strip-list { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 290px); gap: 10px; margin: 0; padding: 2px 2px 8px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.lr-strip.is-single .lr-strip-list { grid-auto-columns: min(100%, 440px); }
.lr-strip-list li { min-width: 0; scroll-snap-align: start; }
.lr-strip-list a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none;
  background: var(--paper); box-shadow: inset 3px 0 0 var(--c-sky), 0 0 0 1px var(--line), 0 10px 22px -18px rgba(120, 70, 20, .45); transition: background .2s; }
.lr-strip-list a:hover { color: inherit; background: var(--hover-bg); }
.lr-strip-thumb { flex: none; display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border-radius: 4px; background: var(--tint); }
.lr-strip-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lr-strip-text { display: grid; gap: 4px; min-width: 0; }
.lr-strip-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; font-weight: 900; line-height: 1.4; }
.lr-strip-list a:hover b { color: var(--c-forest); }
.lr-strip-text small { font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.lr-strip-text em { font-style: normal; color: var(--c-sky-ink); }
.lr-n-rest { display: none; }
@media (min-width: 1400px) { .lr-strip { display: none; } }
@media (max-width: 1399px) {
  .long-runs .ev-row[data-in-strip], .long-runs.is-all-in-strip { display: none; }
  .lr-n-all { display: none; }
  .lr-n-rest { display: inline; }
}

/* ===== 掲載できるチラシ・掲載できないチラシの点検の直し（2026-10-25 ユーザー指示「全部直して」） ===== */
/* 掲載できないの赤は、載せるボタンのテラコッタ（#b9542f）と見分けられる赤に（もとの --c-danger #c0453a はほとんど同じ色だった） */
.fg, .fg-lb { --fg-ng: #d7263d; --fg-ng-ink: #b3183a; }
.fg-sample-group.is-ng .fg-group-h, .fg-sample.is-ng .fg-sample-band { background: var(--fg-ng); }
.fg-sample-group.is-ng .fg-group-mark, .fg-sample.is-ng .fg-stamp { color: var(--fg-ng); }
.fg-sample.is-ng { border-color: color-mix(in srgb, var(--fg-ng) 50%, transparent); background: color-mix(in srgb, var(--fg-ng) 4%, var(--paper)); }
.fg-sample-points .is-bad { color: var(--fg-ng-ink); }
.fg .ngf-ico { background: color-mix(in srgb, var(--fg-ng) 10%, var(--paper)); color: var(--fg-ng-ink); }

/* 見出し: 英字の飾りをなくし、説明は1行に。スマホではタブを低く（アイコンと「のチラシ」を省く） */
.fg-hero { padding-top: 30px; }
.fg-hero h1 { word-break: keep-all; overflow-wrap: anywhere; }
.fg-tabs { scroll-margin-top: 90px; }
@media (max-width: 760px) {
  .fg-hero { padding: 20px 16px 18px; }
  .fg-hero h1 { margin-bottom: 8px; font-size: 1.6rem; }
  .fg-hero .fg-lead { margin-bottom: 14px; font-size: .95rem; line-height: 1.75; }
  .fg-tab { flex-direction: row; padding: 9px 11px; }
  .fg-tab .ico, .fg-tab-tail { display: none; }
  .fg-tab b { font-size: .92rem; }
  .fg-tab small { font-size: .72rem; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
}

/* 見本: 広い所は3列、狭い所（スマホ）は横にめくる。印はチラシの右上の角（右下は問い合わせ先にかぶる） */
.fg-sample-note { margin: -6px 0 12px; }
.fg-sample-group { container-type: inline-size; }
@container (min-width: 520px) { .fg-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 519.98px) {
  .fg-samples { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 0 2px 10px; margin: 0 -2px; scrollbar-width: thin; }
  .fg-samples > .fg-sample { flex: 0 0 74%; scroll-snap-align: start; }
}
.fg-sample-fig { position: relative; }
.fg-stamp { top: -20px; right: -9px; bottom: auto; z-index: 1; width: 46px; height: 46px; border-width: 3px; }
.fg-stamp .ico { width: 24px; height: 24px; }
@media (max-width: 760px) {
  .fg-stamp { top: -18px; right: -6px; width: 40px; height: 40px; }
  .fg-stamp .ico { width: 21px; height: 21px; }
}
.fg-sample-name, .fg-sample-points li > span:last-child { word-break: keep-all; overflow-wrap: anywhere; }
.fg-sample-points .is-also { align-items: flex-start; }
.fg-also { flex: none; margin-top: 1px; padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--c-green) 14%, var(--paper)); color: var(--c-green); font-size: .72rem; font-weight: 900; line-height: 1.75; }

/* AI が止めるチラシ: 見出しと説明の1行ずつ。たとえばと「掲載できる場合」は押すと開く */
.ngf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ngf-list > li { border-bottom: 1px solid var(--line); }
.ngf-item summary { display: flex; align-items: center; gap: 12px; padding: 12px 4px; list-style: none; cursor: pointer; }
.ngf-item summary::-webkit-details-marker { display: none; }
.ngf-sum { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ngf-sum b { font-weight: 900; line-height: 1.6; }
.ngf-sum span { font-size: .88rem; line-height: 1.6; color: var(--text-soft); }
.ngf-item summary:hover b { color: var(--c-accent); }
.ngf-more { flex: none; display: grid; place-items: center; color: var(--text-dim); transition: transform .2s; }
.ngf-more .ico { width: 18px; height: 18px; }
.ngf-item[open] .ngf-more { transform: rotate(180deg); }
.ngf-body { display: grid; gap: 8px; padding: 0 4px 14px 46px; }
.ngf-body p { margin: 0; line-height: 1.75; }
.ngf-body .ngf-fix { margin-top: 0 !important; }
@media (max-width: 760px) { .ngf-body { padding-left: 4px; } }

/* タブの終わりの「…のチラシを見る」 */
.fg-switch { margin: -6px 0 22px; text-align: center; }
.fg-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; border: 2px solid currentColor; background: var(--paper); font-weight: 900; text-decoration: none; }
.fg-switch .ico { width: 18px; height: 18px; }
.fg-panel-event .fg-switch a { color: var(--fg-rg); }
.fg-panel-regular .fg-switch a { color: var(--fg-ev); }
.fg-switch a:hover { background: color-mix(in srgb, currentColor 8%, var(--paper)); }

/* フォームから開いたとき（?from=form）の、タブを閉じる案内 */
.fg-back { margin: 28px 0 8px; padding: 18px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--paper); text-align: center; }
.fg-back p { margin: 0 0 10px; font-weight: 700; color: var(--text-soft); }
.fg-back .btn[hidden], .fg-back-fail[hidden] { display: none; }
.fg-back .fg-back-fail { margin: 10px 0 0; font-size: .88rem; }

/* 見本を大きく見る小窓 */
html.fg-lb-open { overflow: hidden; }
.fg-lb { width: min(980px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 10px; background: var(--paper); color: var(--text); box-shadow: 0 10px 40px rgba(40, 28, 18, .35); overflow: auto; overscroll-behavior: contain; }
.fg-lb::backdrop { background: rgba(48, 34, 24, .62); }
.fg-lb-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 18px; }
.fg-lb-fig { display: grid; place-items: center; min-height: 200px; margin: 0; border-radius: 6px; background: var(--paper-2); }
.fg-lb-fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 72px); border-radius: 4px; }
.fg-lb-side { display: flex; flex-direction: column; gap: 10px; padding-top: 44px; }
.fg-lb-info { display: flex; flex-direction: column; gap: 10px; }
.fg-lb .fg-sample-band { justify-content: flex-start; margin: 0; padding: 8px 12px; border-radius: 6px; }
.fg-lb.is-ok .fg-sample-band { background: var(--c-green); }
.fg-lb.is-ng .fg-sample-band { background: var(--fg-ng); }
.fg-lb .fg-sample-name { font-size: 1.2rem; }
.fg-lb .fg-sample-points li { font-size: .92rem; }
.fg-lb .fg-sample-fix { margin: 0; font-size: .88rem; }
.fg-lb-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.fg-lb-nav button, .fg-lb-close { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); font: inherit; font-weight: 800; color: var(--text); cursor: pointer; }
.fg-lb-nav button:hover, .fg-lb-close:hover { border-color: var(--c-forest); }
.fg-lb-nav .ico, .fg-lb-close .ico { width: 16px; height: 16px; }
.fg-lb-count { font-size: .86rem; color: var(--text-dim); }
.fg-lb-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
@media (max-width: 760px) {
  .fg-lb { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .fg-lb-in { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 54px 12px 14px; }
  .fg-lb-fig img { max-height: 62dvh; }
  .fg-lb-side { padding-top: 0; }
  .fg-lb-close { top: 8px; right: 8px; }
  .fg-lb-nav { position: sticky; bottom: -14px; margin: 0 -12px -14px; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--paper); }
}

/* ===== イベントのページが開かれた回数（event.php の .event-views。2026-10-25） =====
   掲載日・更新日と同じ札の中に、区切りの線を入れて並べる */
.event-views { display: inline-flex; align-items: center; gap: 4px; padding-left: 12px; border-left: 1px solid var(--note-line); }
.event-views[hidden] { display: none; }
.event-views > .ico { width: 17px; height: 17px; color: var(--c-forest); }

/* ほかの「みっけて」の案内（2026-10-26 ユーザー指示。庄原のフォームで「三次市」を選んだとき・三次で開くイベントの投稿完了） */
.sister-note { padding-left: 10px; border-left: 3px solid var(--c-forest); }
.sister-note a { font-weight: 800; }
.done-sister { display: flex; justify-content: center; align-items: center; gap: 6px; margin: -8px auto 18px; max-width: 34em; font-size: .92rem; color: var(--ink); }
.done-sister .ico { width: 18px; height: 18px; flex: none; color: var(--c-forest); }
.done-sister a { font-weight: 800; }

/* ===== 定期コミュニティは3か月先・12回まで、確かめた日の注意書き（2026-10-26 ユーザーと決めた） ===== */
/* 確かめてから1か月を過ぎたら、イベントのページの注意書きを目立たせ、カードと1行の一覧に小さな札 */
.recurring-note.is-stale { color: var(--need-ink); background: var(--need-bg); box-shadow: inset 3px 0 0 var(--need-ink); }
.badge-stale { color: var(--need-ink); background: var(--need-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--need-ink) 35%, transparent); }
/* 日程づくりの「祝日はお休み」 */
.recur-holiday { margin: 2px 0 10px; }
/* 「まだ続けています」の日付を選ぶ欄 */
.extend-pick { margin: 14px 0 18px; padding: 0; border: 0; }
.extend-pick legend { margin-bottom: 4px; font-weight: 900; }
.extend-pick .extend-dates li { align-items: center; }
.extend-pick .extend-dates .choice { margin: 0; min-width: 7.5em; }
.extend-pick .extend-dates .choice span { font-weight: 800; }
.extend-pick .extend-dates li:has(input:not(:checked)) { color: var(--text-dim); }
.extend-pick .extend-dates li:has(input:not(:checked)) .choice span { text-decoration: line-through; }
.extend-note { padding: 0 6px; border-radius: 5px; background: var(--brown-6); font-size: .76rem; font-weight: 800; color: var(--text-soft); }
/* 案内のページの「掲載されたあと」は4つになったので2列に */
@media (min-width: 761px) { .fg-after { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== 定期コミュニティの入力: 時間と会場は1回だけ、日付はチェックで選ぶ（2026-10-26 作り直し） ===== */
.recur-label { margin: 14px 0 6px; font-weight: 900; }
.recur-label small { margin-left: 8px; font-size: .8rem; font-weight: 700; color: var(--text-dim); }
.recurring-maker > .recur-label:first-of-type { margin-top: 6px; }
.recur-slots { display: grid; gap: 8px; }
.recur-slot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper); }
.recur-slot label { display: grid; gap: 2px; font-size: .82rem; font-weight: 800; color: var(--text-soft); }
.recur-slot input { width: 8.5em; }
.recur-slot-add { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; }
.recur-slot-add .help { margin: 0; }
.recur-dates { display: grid; gap: 8px; }
.recur-month { display: flex; align-items: flex-start; gap: 10px; }
.recur-month > b { flex: none; min-width: 3em; padding-top: 7px; font-weight: 900; }
.recur-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recur-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); font-size: .92rem; font-weight: 800; cursor: pointer; }
.recur-chip:has(input:checked) { border-color: var(--c-green); background: color-mix(in srgb, var(--c-green) 10%, var(--paper)); }
.recur-chip:has(input:not(:checked)) span { color: var(--text-dim); text-decoration: line-through; }
.recur-chip small { margin-left: 4px; padding: 0 4px; border-radius: 4px; background: var(--need-bg); color: var(--need-ink); font-size: .7rem; text-decoration: none; display: inline-block; }
.recur-venue-head { margin-top: 18px; }
/* 定期のときは、1つ目の日程の欄を「会場」の入力として使う（日付・時刻・締切・見出し・ほかの行は出さない） */
.sessions.is-regular > .session:not(:first-child) { display: none; }
.sessions.is-regular > .session:first-child > .session-head,
.sessions.is-regular > .session:first-child > .session-remove,
.sessions.is-regular > .session:first-child > .row-pair,
.sessions.is-regular > .session:first-child > [data-session-deadline] { display: none; }
@media (max-width: 600px) {
  .recur-slot input { width: 7.5em; }
  .recur-month { flex-direction: column; gap: 4px; }
  .recur-month > b { padding-top: 0; }
}

/* イベントのページの吹き出しの「→ どうして？」は途中で折らない（2026-10-27） */
.check-note .bubble a { white-space: nowrap; }

/* イベントのページの「このイベント情報を直す・知らせる」（2026-10-27 ユーザー指示「分かりにくい・並んでいるだけで地味」）。
   だれがするかで2つにまとめ、色の丸のアイコン・名前・1行の説明。文字はもとの並びと同じ .88rem（同日「大きすぎ」で縮めた）。もとの .event-owner の並びの置きかえ */
.event-help { margin-top: 18px; padding: 12px 14px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--paper-2); }
.event-help-title { margin: 0 0 8px; font-family: inherit; font-size: .88rem; font-weight: 800; color: var(--text); letter-spacing: .02em; }
.eh-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px 18px; }
.eh-group { display: grid; align-content: start; gap: 4px; }
.eh-who { margin: 0; font-family: inherit; font-size: .74rem; font-weight: 800; color: var(--text-dim); }
.eh-item { --eh-bg: #fff3d1; --eh-ink: #8a5a00; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--text); text-decoration: none; transition: border-color .15s, background-color .15s, transform .15s; }
.eh-item:hover, .eh-item:focus-visible { border-color: var(--eh-ink); background: var(--eh-bg); }
.eh-item:hover { transform: translateY(-1px); }
.eh-ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--eh-bg); color: var(--eh-ink); }
.eh-ico .ico { width: 14px; height: 14px; }
.eh-text { display: grid; min-width: 0; line-height: 1.4; }
.eh-text b { font-size: .88rem; font-weight: 700; }
.eh-text small { font-size: .74rem; color: var(--text-dim); }
.eh-mustard { --eh-bg: #fff0c2; --eh-ink: #8a5a00; }
.eh-leaf    { --eh-bg: #e6f2d6; --eh-ink: #3f6e1f; }
.eh-peach   { --eh-bg: #fde6dc; --eh-ink: #a4482a; }
.eh-terra   { --eh-bg: #fbe2d6; --eh-ink: var(--c-forest-dark); }
.eh-sky     { --eh-bg: #dcedf7; --eh-ink: var(--c-sky-ink); }
.eh-more { margin: 8px 0 0; text-align: right; font-size: .78rem; } /* Q&A への小さなリンク（2026-10-27 ユーザー指示） */
.eh-more a { color: var(--text-soft); }
.eh-admin { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: .85rem; font-weight: 700; }
.eh-admin a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .eh-item:hover { transform: none; } }

/* ===== これまでの実績（よみもの welcome.php・投稿ページの1行。2026-10-27 ユーザー指示。数は app/lib/stats.php） ===== */
.stats { margin: 0 0 26px; }
.stats-h { margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.4rem); }
.stats-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.stats-item { display: grid; align-content: start; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-top: 3px solid var(--c-forest); border-radius: 8px; background: var(--paper); }
.stats-item:nth-child(2) { border-top-color: #e9a21f; }
.stats-item:nth-child(3) { border-top-color: #5f9a35; }
.stats-item:nth-child(4) { border-top-color: #3d8fbf; }
.stats-num { display: flex; align-items: baseline; gap: 4px; font-weight: 700; color: var(--text-soft); font-size: .95rem; }
.stats-num b { font-size: clamp(1.9rem, 5vw, 2.4rem); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats-label { font-weight: 700; font-size: .9rem; color: var(--ink); }
.stats-item small { font-size: .78rem; color: var(--text-dim); }
.stats-note { margin: 8px 0 0; font-size: .8rem; color: var(--text-dim); }
.post-stats { margin: 4px 0 0; font-size: .9rem; color: var(--text-soft); }
.post-stats b { font-size: 1.05rem; color: var(--c-forest); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .stats-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stats-item { padding: 12px; }
}

/* ===== チラシの載せかた（howto.php。2026-10-27 ユーザー指示。動画と画面の画像は tools/howto/make_howto.py） ===== */
.howto { display: grid; gap: 22px; margin: 0 0 24px; }
.howto-movie { margin: 0; justify-self: center; width: min(100%, 320px); text-align: center; }
.howto-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 8px; border: 1px solid var(--line); background: #fffaf0; }
.howto-movie figcaption { margin-top: 6px; font-size: .8rem; color: var(--text-dim); }
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.howto-step { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.howto-shot { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.howto-body h2 { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 6px; font-family: inherit; font-size: 1.02rem; font-weight: 900; line-height: 1.45; }
.howto-no { flex: none; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #f0a33a; color: #fff; font-size: .9rem; }
.howto-body p { margin: 0; font-size: .92rem; line-height: 1.8; }
.howto-more p { margin: 0 0 10px; }
.howto-more p:last-child { margin: 14px 0 0; }
.post-howto { margin: 6px 0 0; font-size: .9rem; font-weight: 700; }
.post-howto a, .flow-howto { display: inline-flex; align-items: center; gap: 6px; }
.flow-howto { display: flex; justify-content: center; margin: -6px 20px 18px; font-size: .88rem; font-weight: 700; }
@media (min-width: 900px) {
  .howto { grid-template-columns: 300px 1fr; align-items: start; gap: 28px; }
  .howto-movie { position: sticky; top: 96px; }
  .howto-step { grid-template-columns: 170px 1fr; }
}
@media (max-width: 420px) {
  .howto-step { grid-template-columns: 104px 1fr; gap: 10px; padding: 12px; }
}
.howto-share { font-weight: 700; color: var(--c-forest); }

/* =====================================================================
   掲載できるチラシ・掲載できないチラシの見本は、カードの幅の70%の大きさで（2026-10-27 ユーザー指示「チラシの画像が大きすぎる。70%くらいにしてクリックしたら大きく」）。
   押すと今までどおり小窓（app.js の [data-fg-lb]）で大きく見る。押せることが分かるよう、右下に「大きく見る」の小さな札
   ===================================================================== */
.fg-sample-fig { width: 70%; margin-inline: auto; }
.fg-sample-img { cursor: zoom-in; }
.fg-zoom { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 5px; border: 1px solid var(--line); background: rgba(255, 255, 255, .9); font-size: .72rem; font-weight: 800; line-height: 1.6; color: var(--text-soft); pointer-events: none; }
.fg-zoom .ico { width: 13px; height: 13px; }
.fg-sample-img:hover .fg-zoom { border-color: currentColor; color: var(--c-accent); }

/* ---------- カードの「あと○日」と「✦AI」をなくした分の色（2026-10-30 ユーザー指示「いらない。消すと色が少なくなるので、貧相にならないように」） ----------
 * 地域の札は、地図のその地域と同じ水彩の色の地（--ac。地図の色のない地域〔近隣の市町など〕は生成り）。
 * AI のひとことは、からし色の線とうすい地の枠に入れる。ジャンルの札にもうすい緑の地。
 * 新着・定期コミュニティ・今週末の棚だけ、開く日（.card-when）を地域の札の前に出す（日付の見出しの下に並ばないため） */
.card-place.r-takano, .card-place.r-miyoshi_mirasaka, .card-place.r-sera_kouzan, .card-place.r-jinseki_miwa { --ac: #d3e4ae; } /* 若葉 */
.card-place.r-hiwa, .card-place.r-miyoshi_funo, .card-place.r-miyoshi_kounu, .card-place.r-sera_sera, .card-place.r-jinseki_yuki { --ac: #f0d68f; } /* 稲穂 */
.card-place.r-kuchiwa, .card-place.r-miyoshi_kimita, .card-place.r-jinseki_jinseki { --ac: #c9dcec; } /* 空 */
.card-place.r-saijo, .card-place.r-miyoshi_sakugi, .card-place.r-sera_seranishi { --ac: #dcd3ee; } /* 藤 */
.card-place.r-tojo, .card-place.r-miyoshi_miwa { --ac: #bcd8c2; } /* 杉 */
.card-place.r-shobara, .card-place.r-miyoshi_miyoshi, .card-place.r-jinseki_toyomatsu { --ac: #f2cbd1; } /* 桃 */
.card-place.r-soryo, .card-place.r-miyoshi_kisa { --ac: #bfdedb; } /* 水 */
.card-meta { gap: 8px; }
.card-meta .card-place { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px 1px 6px; border-radius: 5px;
  background: var(--ac, #f1e8da); color: var(--ink); font-size: .76rem; font-weight: 800; line-height: 1.6; }
.card-meta .card-place .ico { flex: none; width: 13px; height: 13px; margin: 0; color: var(--ink); opacity: .7; }
.card-when { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--c-accent); font-size: .8rem; font-weight: 800; line-height: 1.6; white-space: nowrap; }
.card-when .ico { width: 14px; height: 14px; }
.card-catch, .shelf-weekend .card-catch { margin: 2px 0 0; padding: 5px 10px 6px 11px; border-left: 3px solid var(--c-rice); border-radius: 0 6px 6px 0;
  background: #fff6df; background: color-mix(in srgb, var(--c-rice) 12%, #fff); color: var(--ink); font-size: .84rem; line-height: 1.6; }
.card .badge-genre { background: rgba(79, 127, 44, .07); }
@media (max-width: 600px) {
  .card-catch, .shelf-weekend .card-catch { padding: 3px 7px 4px 8px; border-left-width: 2px; font-size: .8rem; line-height: 1.55; }
}

/* =====================================================================
   掲載できるチラシのページ（作り直し・2026-11-01 ユーザー指示「チラシを載せる人が少ない。『こういうのも載せられるんだよ』というハードルの低さを。
   親しみと安心感のある文言とレイアウトに」）。flyer-guide.php の .fgx-*。見本のカード（.fg-sample）と小窓（.fg-lb）は前の部品をそのまま使う
   ===================================================================== */
.fgx-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: center; margin: 0 0 22px; padding: 40px 36px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: linear-gradient(160deg, #fff4d6, var(--paper) 62%); overflow: hidden; }
.fgx-eyebrow { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 5px; background: var(--c-forest); color: #fff; font-size: .82rem; font-weight: 900; letter-spacing: .06em; }
.fgx-hero h1 { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.fgx-mark { padding: 0 2px; background: linear-gradient(transparent 62%, #ffd66b 62%); }
.fgx-lead { margin: 0 0 16px; font-size: 1.12rem; font-weight: 800; line-height: 1.8; color: var(--text); }
.fgx-count { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); font-size: .88rem; font-weight: 700; color: var(--text-soft); }
.fgx-count b { font-size: 1.15rem; color: var(--c-forest); }
.fgx-count .ico { width: 16px; height: 16px; color: #e9a21f; }
.fgx-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.fgx-howto { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 800; }
.fgx-howto .ico { width: 18px; height: 18px; }
.fgx-hero-art { position: relative; height: 280px; }
.fgx-hero-art img { position: absolute; width: 58%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid #fff; border-radius: 4px; box-shadow: 0 10px 24px -14px rgba(80, 50, 20, .5); }
.fgx-art-1 { top: 0; left: 0; transform: rotate(-4deg); }
.fgx-art-2 { top: 32%; right: 0; z-index: 1; transform: rotate(3deg); }
.fgx-art-3 { bottom: 0; left: 12%; z-index: 2; transform: rotate(-1.5deg); }

.fgx-sec { margin: 0 0 22px; padding: 30px 32px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper); scroll-margin-top: 90px; }
.fgx-sec h2 { margin: 0 0 18px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; }
.fgx-sec-lead { margin: -6px 0 14px; line-height: 1.8; color: var(--text-soft); }
.fgx-h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 26px 0 12px; font-size: 1.05rem; font-weight: 900; }
.fgx-h3 small { font-size: .82rem; font-weight: 700; color: var(--text-dim); }

/* こんなチラシも、掲載できます: 色の輪のアイコン・ひとこと・短い例のタイル */
.fgx-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fgx-tiles li { --ti: #c27d08; --tb: #fff3d1; }
.fgx-tiles li:nth-child(4n+2) { --ti: #b9542f; --tb: #fbe6dc; }
.fgx-tiles li:nth-child(4n+3) { --ti: #4f8a2a; --tb: #e8f2de; }
.fgx-tiles li:nth-child(4n+4) { --ti: #2f7fae; --tb: #e2f0f8; }
.fgx-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 18px 10px 16px; border-radius: 8px; background: var(--tb); color: var(--text); text-align: center; text-decoration: none; }
.fgx-tile-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ti); }
.fgx-tile-ico .ico { width: 24px; height: 24px; }
.fgx-tile b { font-size: .98rem; font-weight: 900; line-height: 1.45; word-break: keep-all; overflow-wrap: normal; }
.fgx-tile small { font-size: .82rem; line-height: 1.5; color: var(--text-soft); word-break: keep-all; overflow-wrap: normal; }
a.fgx-tile { color: var(--text); }
a.fgx-tile:hover b { color: var(--c-accent); }

/* 確かめるのは、この4つだけ */
.fgx-checks { list-style: none; counter-reset: fgx; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fgx-checks li { counter-increment: fgx; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 14px 52px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper-2); }
.fgx-checks li::before { content: counter(fgx); position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-green); color: #fff; font-weight: 900; }
.fgx-checks b { font-weight: 900; line-height: 1.5; }
.fgx-checks small { font-size: .82rem; line-height: 1.55; color: var(--text-soft); }
.fgx-ai { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; background: #f3effb; font-weight: 700; line-height: 1.75; }
.fgx-ai-tag { flex: none; margin-top: 3px; padding: 1px 8px; border-radius: 5px; background: #7b5fb8; color: #fff; font-size: .8rem; font-weight: 900; }

/* 見本のカードは名前とひとことだけ（帯・見どころ・直し方は、押して開く小窓に出す） */
.fgx-samples .fg-sample-band, .fgx-samples .fg-sample-points, .fgx-samples .fg-sample-fix { display: none; }
.fgx-samples .fg-sample { gap: 4px; padding-top: 26px; text-align: center; }
.fgx-samples .fg-sample-name { font-size: .95rem; }
.fgx-cap { font-size: .82rem; line-height: 1.5; color: var(--text-soft); }
.fg-sample.is-ng .fgx-cap { color: var(--fg-ng-ink, var(--need-ink)); }

/* タブ（1回の催し／毎週・毎月の集まり）。タブの部品は .fg-tab のまま。開いているタブの色の線をパネルの上に引いて、つながって見えるように。
   タイルの「趣味のサークル・教室」（#regular）から来たときに、タブが見える所で止まるよう scroll-margin を大きめに */
.fgx .fg-tabs { margin: 0 0 14px; }
.fgx-panel { scroll-margin-top: 180px; }
.fgx-panel > .fgx-sec { border-top: 5px solid var(--fg-ev); }
.fgx-panel-regular > .fgx-sec { border-top-color: var(--fg-rg); }

/* たたんだ欄（くわしい条件・掲載できないチラシ） */
.fgx-more { margin-top: 18px; border-top: 1px solid var(--line); }
.fgx-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; list-style: none; cursor: pointer; font-weight: 800; }
.fgx-more > summary::-webkit-details-marker { display: none; }
.fgx-more > summary small { display: block; margin-top: 2px; font-size: .84rem; font-weight: 700; color: var(--text-dim); }
.fgx-more > summary:hover { color: var(--c-accent); }
.fgx-more-ico { flex: none; color: var(--text-dim); transition: transform .2s; }
.fgx-more-ico .ico { width: 18px; height: 18px; }
.fgx-more[open] > summary .fgx-more-ico { transform: rotate(180deg); }
.fgx-ng { padding-top: 8px; padding-bottom: 8px; background: var(--paper-2); }
.fgx-ng .fgx-more { margin: 0; border-top: 0; }
.fgx-ng summary b { font-size: 1.08rem; }
.fgx-ng .fgx-samples { margin-top: 6px; }

.fgx-end { margin: 30px 0 8px; text-align: center; }
.fgx-end > p:first-child { margin: 0; font-family: var(--serif); font-size: 1.3rem; }
.fgx-end .fg-actions { margin-top: 14px; }

@media (max-width: 900px) {
  .fgx-hero { grid-template-columns: minmax(0, 1fr); }
  .fgx-hero-art { order: -1; height: 170px; }
  .fgx-hero-art img { width: 44%; border-width: 4px; }
  .fgx-art-1 { left: 2%; }
  .fgx-art-2 { top: 6%; right: 2%; }
  .fgx-art-3 { left: 28%; }
  .fgx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fgx-hero { gap: 14px; padding: 22px 18px 24px; }
  .fgx-sec { padding: 22px 16px; }
  .fgx-sec h2 { font-size: 1.28rem; }
  .fgx-lead { font-size: 1rem; }
  .fgx-checks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fgx-checks li { padding: 10px 12px 10px 50px; }
  .fgx-checks li::before { top: 9px; }
  .fgx-tile { padding: 14px 8px 12px; }
  .fgx-panel { scroll-margin-top: 140px; }
}

/* =====================================================================
   重複のお知らせの「このページのチラシを差し替える」（2026-11-01 ユーザー指示。app.js の showToast の pages の replace）
   ===================================================================== */
.problem-links li.has-replace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dup-replace { display: inline-flex; align-items: center; min-height: 34px; font-size: .85rem; font-weight: 800; color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.dup-replace::after { content: "→"; margin-left: 4px; text-decoration: none; opacity: .7; }

/* ---------- 日付の一覧の「この日も開いています」（2026-10-30 ユーザー指摘「11/3 は4件+2なのに3件しかない」） ----------
 * ほかの日の下にカードを出したイベントでも、その日に開いているもの（前の日から続く回・別の日の回・会期中の催しの始まる日）を、
 * その日のカードの下に1行ずつ。見出しの件数にも入れて、日付の帯の数とそろえる（layout.php の group_by_day の $cont） */
.day-cards > .day-cont-zone, .day-cards > .day-cont-rows { grid-column: 1 / -1; }
.day-cont-zone { display: flex; align-items: center; gap: 6px; margin: 4px 0 -6px; font-size: .8rem; font-weight: 800; color: var(--c-accent); }
.day-cont-zone .ico { width: 15px; height: 15px; }
.day-cont-zone::after { content: ""; flex: 1; border-top: 1.5px dashed color-mix(in srgb, var(--c-accent) 30%, transparent); }

/* =====================================================================
   会期のある催し・定期コミュニティの小さな横長のカード、ほかの町の催しの「題名と要約だけ」、メインのカードの開催時刻と会場名（2026-11-02 ユーザー指示。
   はじめ「時間帯の枠はいらない。カードを横に並べて、多いときやスマホは左右にスクロール」→ 同日「会期の長い催しや定期コミュニティはメインより小さく。
   縦型ではなく横カードに。画像はメインより小さく」「三次で開催されるイベントは時間帯とチラシの画像なしで、題名と1〜2行の要約だけ、詳細はみっけて三次へ。
   二枚並べず1件ずつ」「メインには開催時刻と会場名を明記して差別化」）。layout.php の render_event_minis()（.ev-minis）・render_event_briefs()（.ev-briefs）・
   render_event_card() の .card-info。右のサイドバーの狭い欄は今までどおり1行（.ev-rows）
   ===================================================================== */
/* メインのカード: 題名の下に開催時刻と会場名 */
.card-info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.5; color: var(--ink); }
.card-info > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.card-info .ico { flex: none; width: 14px; height: 14px; color: var(--text-soft); }
.card-time { color: var(--c-accent); font-weight: 800; white-space: nowrap; }
.card-time .ico { color: var(--c-accent); }
.card-info > .card-venue { align-items: flex-start; }
.card-venue .ico { margin-top: 2px; }
.card-venue > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 会場名は2行まで（切らずに見せたい） */

/* 会期のある催し・定期コミュニティ: 左に小さな正方形のチラシ（メインの約半分）、右に題名・いつ・場所の横長のカードを横に並べる */
.ev-minis-wrap { --mini-w: 300px; --mini-img: 76px; --mini-c: var(--c-sky); position: relative; min-width: 0; }
.day-cont-rows { --mini-c: var(--c-accent); }
.ev-minis { display: flex; gap: 10px; margin: 0; padding: 2px 2px 10px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 2px; scrollbar-width: thin; }
.ev-mini { flex: 0 0 var(--mini-w); min-width: 0; scroll-snap-align: start; }
.ev-mini > a { display: flex; align-items: flex-start; gap: 10px; height: 100%; padding: 8px 10px 8px 11px; border-radius: 8px; color: inherit; text-decoration: none;
  background: var(--paper); box-shadow: inset 3px 0 0 var(--mini-c), 0 0 0 1px var(--line), 0 10px 22px -18px rgba(120, 70, 20, .45); transition: background .2s; }
.ev-mini > a:hover { color: inherit; background: var(--hover-bg); }
.ev-mini-thumb { flex: none; display: grid; place-items: center; width: var(--mini-img); height: var(--mini-img); overflow: hidden; border-radius: 4px; background: var(--tint); }
.ev-mini-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-mini-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; align-self: stretch; }
.ev-mini-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .86rem; font-weight: 900; line-height: 1.4; }
.ev-mini > a:hover .ev-mini-title { color: var(--c-forest); }
.ev-mini-when, .ev-mini-place { display: flex; align-items: flex-start; gap: 3px; min-width: 0; font-size: .72rem; font-weight: 700; line-height: 1.5; }
.ev-mini-when { color: var(--c-accent); font-weight: 800; }
.day-regular-rows .ev-mini-when { color: var(--c-sky-ink); }
.ev-mini-place { color: var(--text-soft); }
.ev-mini-when .ico, .ev-mini-place .ico { flex: none; width: 12px; height: 12px; margin-top: 2px; }
.ev-mini-when > span { min-width: 0; } /* 「会期 ○/○〜○/○」と時刻は「・」の区切りでだけ折り返す */
.ev-mini-when .nw { white-space: nowrap; }
.ev-mini-place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-mini-place b { font-weight: 800; color: var(--ink); }
.ev-mini .badges { flex-wrap: nowrap; overflow: hidden; margin-top: auto; padding-top: 2px; }
.ev-mini .badge { font-size: .68rem; padding: 0 7px 0 6px; }
/* 入りきらないときは、続きのある側の端をぼかす（app.js の [data-hscroll] が is-over・is-start・is-end を付ける） */
.ev-minis-wrap.is-over .ev-minis { --fl: #000; --fr: #000;
  -webkit-mask-image: linear-gradient(to right, var(--fl), #000 28px, #000 calc(100% - 28px), var(--fr)); mask-image: linear-gradient(to right, var(--fl), #000 28px, #000 calc(100% - 28px), var(--fr)); }
.ev-minis-wrap.is-over:not(.is-start) .ev-minis { --fl: transparent; }
.ev-minis-wrap.is-over:not(.is-end) .ev-minis { --fr: transparent; }
/* マウスの画面では、カードの高さの真ん中に左右のボタン（指で触る画面ははらって送るので出さない） */
.hs-btn { position: absolute; top: calc(50% - 21px); z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 6px 14px -8px rgba(80, 50, 20, .55); cursor: pointer; }
.hs-btn:hover { color: var(--c-forest); border-color: currentColor; }
.hs-btn .ico { width: 18px; height: 18px; }
.hs-prev { left: -6px; }
.hs-next { right: -6px; }
.hs-btn[hidden] { display: none; }
@media not ((hover: hover) and (pointer: fine)) { .hs-btn { display: none; } }
@media (max-width: 600px) {
  .ev-minis-wrap { --mini-w: min(80vw, 280px); --mini-img: 64px; }
  .ev-minis { margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px; scroll-padding-inline: var(--gutter); }
}
/* 一覧のいちばん上の「現在、会期中のイベント」に出したものは、下の「会期中の催し」の欄では隠す（全部なら段ごと） */
@media (max-width: 1399px) {
  .long-runs .ev-mini[data-in-strip] { display: none; }
  .long-runs .ev-minis-wrap:not(:has(.ev-mini:not([data-in-strip]))) { display: none; }
}
.long-runs .hk-zone { margin: 10px 0 0; }

/* ほかの町の催し: 題名と要約だけを1件ずつ。詳細はその町の「みっけて」のイベントのページ（「みっけて三次で見る」） */
.ev-briefs { margin: 0; padding: 0; list-style: none; }
.ev-brief { min-width: 0; border-bottom: 1px dashed var(--line-strong); }
.ev-brief > a { display: grid; gap: 2px; padding: 9px 4px 9px 2px; color: inherit; text-decoration: none; transition: background .2s; }
.ev-brief > a:hover { color: inherit; background: var(--hover-bg); }
.ev-brief-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; font-weight: 900; line-height: 1.5; }
.ev-brief > a:hover .ev-brief-title { color: var(--c-forest); }
.ev-brief-title .badge { margin-right: 6px; vertical-align: 1px; }
.ev-brief-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; font-weight: 600; line-height: 1.6; color: var(--text-soft); }
.ev-brief-go { display: inline-flex; align-items: center; gap: 2px; justify-self: end; margin-top: 1px; font-size: .74rem; font-weight: 800; color: var(--c-accent); }
.ev-brief-go .ico { width: 13px; height: 13px; }

/* ---------- 一覧のカードの参加費の札（2026-11-03 ユーザー指示「無料・有料・一部無料のいずれかのタグ」） ----------
 * 地域の札の右（card_fee()）。地域の名前が長いときは地域の方を「…」で縮め、参加費の札は欠けない。
 * 無料は緑の地に白い字、一部無料はうすい緑の地に緑の字、有料は線だけ。チラシに書いていないときは出さない */
.card-fee { flex: none; display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 5px; font-size: .76rem; font-weight: 800; line-height: 1.6; white-space: nowrap; }
.card-fee.is-free { background: var(--c-green); color: #fff; }
.card-fee.is-part { background: color-mix(in srgb, var(--c-green) 12%, #fff); color: var(--c-green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-green) 45%, transparent); }
.card-fee.is-paid { color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* 開く日・地域・参加費が1行に入らない狭いカード（新着・定期コミュニティのスマホ幅）は、次の行へ回す（地域の札がピンだけに縮んだり、参加費の札がはみ出したりしないように） */
.card-meta { flex-wrap: wrap; row-gap: 4px; }
.card-when { flex-shrink: 1; min-width: 0; white-space: normal; } /* 「11/21(土)〜11/22(日)」がカードの幅より長いときは折り返す */

/* =====================================================================
   よみもの「このサイトって何なの？」の作り直し（2026-11-04 ユーザー指示「いきなり使い方から始まっていて、このサイトって何？が分からない。
   みんなで作る場所なんだ、という親しみを。理念と意図を簡潔に。善意で回るサイトだと分かるように。挿絵は GPT で」）。welcome.php の .wl-*。
   挿絵は assets/img/welcome/ の透過の webp。角は 8px まで・暗い面は作らない・明朝は大きな見出しだけ。
   幅は .wl の中の幅で決める（左右のサイドメニューが出ると本文が狭くなるので、画面の幅ではなく @container で）
   ===================================================================== */
.yomi-body > .wl { display: grid; gap: 22px; container-type: inline-size; }
.wl > .flow, .wl > .stats, .wl > .letters, .wl > .yomi-after { margin: 0; }
.wl h2, .wl h3 { word-break: auto-phrase; } /* 見出しは文節の切れ目で折り返す（「チラシ／をひと目」のように切れないように。対応していないブラウザは今までどおり） */
.wl-mark { padding: 0 2px; background: linear-gradient(transparent 60%, #ffd66b 60%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* 答え: 文と、木の掲示板にチラシを持ち寄る絵 */
.wl-hero { display: grid; gap: 14px; align-items: center; padding: 22px 18px 24px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: linear-gradient(160deg, #fff4d6, var(--paper) 66%); overflow: hidden; }
.wl-hero-art { order: -1; margin: 0; }
.wl-hero-art img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.wl-eyebrow { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 5px; background: var(--c-forest); color: #fff; font-size: .82rem; font-weight: 900; letter-spacing: .06em; }
.wl-hero-h { margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: 1.8rem; line-height: 1.42; word-break: keep-all; overflow-wrap: anywhere; }
.wl-hero-lead { margin: 0 0 16px; font-size: 1.04rem; font-weight: 700; line-height: 1.9; }
/* ふたつの「みっけて」: 載せる人の「みっけてね」と、さがす人の「みっけて出かけよう」を、せりふの吹き出しで（載せる＝テラコッタ、さがす＝からし色。使い方の2つと同じ色） */
.wl-mikkete { margin: 0; }
.wl-mk { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.wl-mk-who { flex: none; font-size: .92rem; font-weight: 800; color: var(--text-soft); }
.wl-say { position: relative; display: inline-block; padding: 2px 12px 3px; border: 1.5px solid var(--c-forest); border-radius: 8px; background: #fbe6dc; color: var(--c-forest-dark); font-size: 1.05rem; font-weight: 900; line-height: 1.7; letter-spacing: .02em; }
.wl-say::after { content: ""; position: absolute; top: calc(50% - 5px); left: -6px; width: 9px; height: 9px; border: inherit; border-top: 0; border-right: 0; border-radius: 0 0 0 2px; background: inherit; rotate: 45deg; } /* 左の「載せる人は」へ向くしっぽ */
.wl-say-find { border-color: var(--c-rice-dark); background: #fff3d1; color: #7a5000; }
.wl-mk-happy { margin: 14px 0 0; font-weight: 800; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; } /* 折り返すのは <wbr> と「、」の所だけ（「盛り／上がれば」のように切れないように） */
@container (min-width: 640px) {
  .wl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; padding: 32px 30px; }
  .wl-hero-art { order: 0; }
  .wl-hero-h { font-size: clamp(1.75rem, 4.1cqi, 2.5rem); } /* 「まちの掲示板です。」が1行に入る大きさ */
}

/* 「みっけて」の、ここがいい: AI の下書き（藤色＝AI）を先頭で大きく、すぐ掲載・自動で消える・登録なし無料を下に。
   狭いと絵が左・文が右の行、広いと AI は横長で上の段いっぱい、残り3つは横に並べる（2026-11-04） */
.wl-good h2 { margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: 1.32rem; line-height: 1.45; text-align: center; }
.wl-goods { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wl-good-item { --gb: #fbe6dc; --gc: var(--c-forest); display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 14px 14px 10px; border-radius: 8px; background: var(--gb); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gc) 22%, transparent); }
.wl-good-ai { --gb: #f3effb; --gc: var(--c-ai); }
.wl-good-gone { --gb: #e2f0f8; --gc: #2f7fae; }
.wl-good-free { --gb: #e8f2de; --gc: #4f8a2a; }
.wl-good-art { display: flex; align-items: center; justify-content: center; width: 88px; height: 84px; }
.wl-good-art img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.wl-good-tag { display: inline-block; margin-bottom: 4px; padding: 0 8px; border-radius: 5px; background: var(--c-ai); color: #fff; font-size: .78rem; font-weight: 900; line-height: 1.7; }
.wl-good-text h3 { margin: 0 0 4px; color: var(--gc); font-size: 1.08rem; font-weight: 900; line-height: 1.5; }
.wl-good-text p { margin: 0; font-size: .9rem; line-height: 1.8; }
.wl-good-ai .wl-good-text h3 { font-size: 1.25rem; }
/* 狭いときも AI の下書きだけは、絵を上に大きく */
.wl-good-ai { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 16px 16px 18px; text-align: center; }
.wl-good-ai .wl-good-art { width: 180px; height: 150px; }
.wl-good-ai .wl-good-text p { text-align: left; }
@container (min-width: 640px) {
  .wl-good h2 { font-size: 1.5rem; margin-bottom: 16px; }
  .wl-goods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .wl-good-item { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; padding: 16px 16px 18px; text-align: center; }
  .wl-good-art { width: 140px; height: 118px; }
  .wl-good-text p { text-align: left; }
  /* AI の下書きは、上の段いっぱいの横長で大きく */
  .wl-good-ai { grid-column: 1 / -1; grid-template-columns: 210px minmax(0, 1fr); justify-items: start; align-items: center; gap: 20px; padding: 20px 26px; text-align: left; }
  .wl-good-ai .wl-good-art { width: 210px; height: 180px; }
  .wl-good-ai .wl-good-text h3 { font-size: 1.5rem; }
  .wl-good-ai .wl-good-text p { font-size: .96rem; }
}

/* 区切りの白い紙（どうして作ったの？・みんなの「ちょっとずつ」） */
.wl-sec { padding: 22px 16px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); scroll-margin-top: calc(var(--header-h) + 16px); }
.wl-sec h2 { margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: 1.32rem; line-height: 1.45; }
.wl-sec p { margin: 0 0 .8em; line-height: 1.9; }
.wl-sec p:last-child { margin-bottom: 0; }
.wl-sec-lead { font-weight: 600; }
@container (min-width: 640px) {
  .wl-sec { padding: 28px 30px; }
  .wl-sec h2 { font-size: 1.5rem; }
}

/* どうして作ったの？: ばらばらのチラシが1枚の掲示板に集まる絵 */
.wl-why { display: grid; gap: 10px 26px; align-items: center; }
.wl-why-art { margin: 0; justify-self: center; width: min(230px, 72%); }
.wl-why-art img { display: block; width: 100%; height: auto; }
@container (min-width: 640px) {
  .wl-why { grid-template-columns: 230px minmax(0, 1fr); }
  .wl-why-art { width: 100%; }
}

/* みんなの「ちょっとずつ」: 4人の役目を 1→2→3→4 の矢印でつなぎ、下に「また次の1枚へ」。
   広いと横に4つ、中くらいは 2×2、狭いと絵が左・文が右の行を縦に並べる */
.wl-roles { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.wl-role { --rc: var(--c-forest); --rb: #fbe6dc; position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "art who" "art h" "art p"; align-content: start; column-gap: 12px; padding: 12px 14px 14px 10px; border-radius: 8px; background: var(--rb); }
.wl-role:nth-child(2) { --rc: #2f7fae; --rb: #e2f0f8; }
.wl-role:nth-child(3) { --rc: #4f8a2a; --rb: #e8f2de; }
.wl-role:nth-child(4) { --rc: #b06f00; --rb: #fff3d1; }
.wl-role-art { grid-area: art; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; align-self: center; }
.wl-role-art img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.wl-role-who { grid-area: who; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 900; color: var(--rc); }
.wl-role-who b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--rc); color: #fff; font-size: .78rem; line-height: 1; }
.wl-role h3 { grid-area: h; margin: 2px 0 2px; font-size: 1.02rem; font-weight: 900; line-height: 1.5; }
.wl-role p { grid-area: p; margin: 0; font-size: .88rem; line-height: 1.75; color: var(--text-soft); }
/* 次の役目への矢印（狭いときは下向き） */
.wl-role + .wl-role::before { content: ""; position: absolute; top: -13px; left: 50%; width: 9px; height: 9px; margin-left: -5px; border-top: 2.5px solid var(--c-forest); border-right: 2.5px solid var(--c-forest); rotate: 135deg; opacity: .7; }
@container (min-width: 520px) {
  .wl-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-role { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "who" "h" "p"; justify-items: center; padding: 16px 16px 18px; text-align: center; }
  .wl-role-art { width: 124px; height: 112px; margin-bottom: 6px; }
  .wl-role p { text-align: left; }
  .wl-role + .wl-role::before { display: none; }
}
/* 2×2 では時計回りに並べて（左上 1 → 右上 2 → 右下 3 → 左下 4）、矢印で輪にする。読み上げの順は 1〜4 のまま */
@container (min-width: 520px) and (max-width: 899.98px) {
  .wl-role:nth-child(3) { grid-column: 2; grid-row: 2; }
  .wl-role:nth-child(4) { grid-column: 1; grid-row: 2; }
  .wl-role::after { content: ""; position: absolute; width: 9px; height: 9px; border-top: 2.5px solid var(--c-forest); border-right: 2.5px solid var(--c-forest); opacity: .7; }
  .wl-role:nth-child(1)::after { top: 50%; right: -14px; margin-top: -5px; rotate: 45deg; }
  .wl-role:nth-child(2)::after { bottom: -14px; left: 50%; margin-left: -5px; rotate: 135deg; }
  .wl-role:nth-child(3)::after { top: 50%; left: -14px; margin-top: -5px; rotate: -135deg; }
  .wl-role:nth-child(4)::after { top: -14px; left: 50%; margin-left: -5px; rotate: -45deg; }
}
@container (min-width: 900px) {
  .wl-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .wl-role + .wl-role::before { display: block; top: 64px; left: -16px; margin-left: 0; rotate: 45deg; }
}
.wl-loop { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0 !important; color: var(--c-forest); font-size: .92rem; font-weight: 900; }
.wl-loop::before, .wl-loop::after { content: ""; flex: 1; max-width: 150px; border-top: 2px dashed currentColor; opacity: .4; }
.wl-loop .ico { flex: none; width: 18px; height: 18px; }
/* うしろで AI と運営が見守る（藤色＝AI） */
.wl-watch { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 18px; padding: 12px 14px; border-radius: 8px; background: #f3effb; }
.wl-watch-img { display: block; width: 70px; height: auto; }
.wl-watch h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 900; line-height: 1.5; }
.wl-watch p { margin: 0; font-size: .9rem; line-height: 1.8; }
@container (min-width: 640px) {
  .wl-watch { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
  .wl-watch-img { width: 92px; }
}

/* 使い方: 上の絵は水彩の風景から挿絵へ（切り抜かずに全体を見せる。うすい色の地に置く） */
.wl .flow-art { display: flex; align-items: center; justify-content: center; height: 178px; padding: 12px 12px 30px; background: #fbe6dc; }
.wl .flow-lane-view .flow-art { background: #fff3d1; }
.wl .flow-art::after { content: none; }
.wl .flow-art img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.wl .flow-lane:hover .flow-art img { transform: scale(1.04); }
.wl .flow-step b { font-size: .92rem; } /* 2列のとき「確かめて載せる」が1字だけ次の行に落ちないように */
@media (max-width: 600px) { .wl .flow-art { height: 156px; padding-bottom: 28px; } }

/* 載せてみませんか */
.wl-cta { padding: 26px 16px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: linear-gradient(160deg, var(--paper) 30%, #fff4d6); text-align: center; }
.wl-cta h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; line-height: 1.45; }
.wl-cta > p { max-width: 34em; margin: 0 auto 16px; font-weight: 600; line-height: 1.9; text-wrap: pretty; word-break: auto-phrase; }
.wl-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: none !important; }
.wl-cta-btns .btn { width: 100%; flex-wrap: wrap; justify-content: center; }
.wl-cta-btns .btn small { flex-basis: 100%; margin: 0; text-align: center; } /* 狭いときは「登録なし・無料」を下の行に（「載せる」の途中で折れないように） */
.wl-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; max-width: none !important; margin-bottom: 0 !important; font-size: .9rem; font-weight: 800; }
.wl-cta-links a { display: inline-flex; align-items: center; gap: 5px; }
.wl-cta-links .ico { width: 16px; height: 16px; }
@container (min-width: 640px) {
  .wl-cta { padding: 32px 30px; }
  .wl-cta h2 { font-size: 1.65rem; }
  .wl-cta-btns .btn { width: auto; flex-wrap: nowrap; }
  .wl-cta-btns .btn small { flex-basis: auto; margin-left: -4px; }
}
@media (prefers-reduced-motion: reduce) { .wl .flow-lane:hover .flow-art img { transform: none; } }

/* 掲載できないチラシは「なぜ掲載できないか」を書く（2026-11-04 ユーザー指摘「掲載できないチラシの説明が、掲載できない理由になっていない」）。
   flyer-guide.php の見本のカードの「掲載できない理由」の札と、利用規約で掲載できないチラシの「たとえば」 */
.fgx-cap-why { display: block; width: fit-content; margin: 2px auto 3px; padding: 0 7px; border-radius: 5px; background: var(--fg-ng, var(--c-danger)); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.6; }
.ngf-what { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.7; color: var(--text-dim); }

/* ===== 左のサイドメニューの「日付で」「地域で」「ジャンルで」の選ぶところ（メインのいちばん上に開く。render_search_stage()。2026-11-04 ユーザーが案Aを選択） =====
   枠の上の線は、押した行と同じ色。一覧は下へ押し下げる。幅は枠の中の幅で決める（@container） */
.stage-wrap { margin: 14px 0 22px; }
@media (max-width: 760px) { .stage-wrap { scroll-margin-top: 30px; } } /* ヘッダーの下にぶら下がる「ホームに追加」の札の分 */
.site-body.has-top .stage-wrap { scroll-margin-top: calc(var(--hk-strip-h, 90px) - 6px); } /* html の scroll-padding-top（ヘッダーの分）に足す */
.stage { position: relative; padding: 16px 20px 20px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--t2) 55%, #fff); border-top-width: 5px; background: var(--paper); animation: stage-in .24s ease both; container-type: inline-size; }
@keyframes stage-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage { animation: none; } }
html.reduce-motion .stage { animation: none; }
.stage:focus { outline: none; }
.stage[data-stage="date"] { --t1: #ffd66b; --t2: #e9a21f; --t-ink: #8a5a00; }
.stage[data-stage="area"] { --t1: #b9db86; --t2: #5f9a35; --t-ink: #3f6b1f; }
.stage[data-stage="genre"] { --t1: #ffbf80; --t2: #e8762c; --t-ink: #a24a10; }
.stage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.stage-ico { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, var(--t1), var(--t2)); }
.stage-ico .ico { width: 19px; height: 19px; color: #fff; }
.stage-title { flex: 1; min-width: 0; }
.stage-title h2 { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.stage-title p { margin: 1px 0 0; font-size: .82rem; font-weight: 700; color: var(--text-soft); }
.stage-close { flex: none; min-height: 36px; padding: 0 12px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--text-soft); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.stage-close:hover { color: var(--t-ink); border-color: var(--t2); }
/* 日付: 3か月を横に（狭い枠は縦に） */
.stage .date-cal { padding: 0; border: 0; box-shadow: none; background: transparent; }
.stage .date-cal-help { display: none; }
.stage .quick-dates { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.stage .date-months { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.stage .date-month { display: block; min-width: 0; }
.stage .date-month + .date-month { padding-top: 0; border-top: 0; }
.stage .date-month .date-cal-nav { justify-content: center; }
.stage .date-mini .mini-d, .stage .date-mini .mini-w { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; letter-spacing: 0; }
.stage .date-months .date-mini .mini-d { aspect-ratio: auto; height: 36px; font-size: .92rem; }
.stage .date-mini .mini-w { font-size: .82rem; }
@container (max-width: 640px) {
  .stage .date-months { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .stage .date-month + .date-month { padding-top: 10px; border-top: 1.5px dashed var(--line); }
  .stage .date-months .date-mini .mini-d { height: 42px; font-size: 1rem; }
}
/* 地域: 地図を大きく、右に選ぶところ（狭い枠は縦に） */
.stage-area { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; } /* 地図は地域でさがすのページと同じくらいに（2026-11-04 ユーザー指摘「地図が大きすぎ」） */
.stage-area-map, .stage-area-side { min-width: 0; }
.stage-area-side { display: grid; gap: 12px; }
.stage-area .smap-stage { max-width: 100%; }
.stage-area .district-pick select { width: 100%; }
.stage .rail-sub { flex-wrap: wrap; font-size: .9rem; }
.stage .rail-sub small { font-size: .76rem; }
.stage .rail-chips { gap: 7px; }
.stage .rail-chips a { min-height: 36px; align-items: center; }
@container (max-width: 640px) { .stage-area { grid-template-columns: minmax(0, 1fr); } .stage-area .smap-stage { max-width: 300px; margin-inline: auto; } }
/* ジャンル: 札を広く並べる */
.stage .rail-genre { gap: 10px; }
.stage .rail-checks { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.stage .rail-checks label { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--paper); font-size: .9rem; }
.stage .rail-checks label:has(input:checked) { border-color: var(--t2); background: color-mix(in srgb, var(--t1) 40%, #fff); }
.stage .rail-checks b { font-size: .82rem; }
.stage .rail-note { font-size: .8rem; }
/* 枠が開いているあいだは、メインの同じものを隠す（狭い画面のカレンダーの列・地図の列・ジャンルの帯） */
html[data-stage="date"] .date-layout > .date-side, html[data-stage="area"] .area-layout:not(.regular-layout) > .area-map, html[data-stage="genre"] .genre-band { display: none; }
html[data-stage="date"] .date-layout, html[data-stage="area"] .area-layout:not(.regular-layout) { grid-template-columns: minmax(0, 1fr); }