/* ノモの国のような有機的なかたちと大きな余白を、チラシの闇と緑の光で。
   ホラー要素（驚かせる演出・怖い画像）は入れず、空気感だけで寄せる。 */
:root {
  --void: #0b1412;
  --deep: #10201d;
  --moss: #173a33;
  --glow: #7ff0c4;
  --glow-dim: #4fb892;
  --blood: #9b1b35;
  --blood-dark: #74122a;
  --bone: #ece6d8;
  --fog: #c3ccc8;
  --line: rgba(236, 230, 216, .22);
  --panel: #13231f;
  --ok: #7ff0c4;
  --wait: #e8c27a;
  --danger: #ff8a98;
  --serif: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --latin: "Zen Kaku Gothic New", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--bone); font: 16px/1.9 var(--sans); letter-spacing: .02em;
  background:
    radial-gradient(1200px 700px at 85% 110%, rgba(155, 27, 53, .18), transparent 60%),
    radial-gradient(900px 600px at 10% 40%, rgba(79, 184, 146, .10), transparent 60%),
    var(--void);
  background-attachment: fixed;
}
/* 紙のようなざらつき */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.motes { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
a { color: var(--glow); text-underline-offset: 4px; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ヘッダー */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; pointer-events: none;
}
.site-head > * { pointer-events: auto; }
body.top .site-head { background: linear-gradient(rgba(11,20,18,.85), rgba(11,20,18,0)); }
.site-name { color: var(--bone); text-decoration: none; font-family: var(--serif); font-weight: 800; font-size: 15px; letter-spacing: .12em; text-shadow: 0 0 12px rgba(0,0,0,.8); }
.site-name span { display: block; font-family: var(--sans); font-weight: 400; font-size: 11px; color: var(--fog); letter-spacing: .3em; }
.head-cta {
  color: var(--bone); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .15em;
  padding: 10px 22px; border-radius: 999px; background: var(--blood); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(155,27,53,.35);
}
.head-cta:hover { background: var(--blood-dark); }
body.sub .site-head { position: static; background: rgba(11,20,18,.9); border-bottom: 1px solid var(--line); pointer-events: auto; }

/* ヒーロー：ゆっくり形を変える有機的なかたち */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.blobs { position: absolute; inset: 0; z-index: -1; }
.blob { position: absolute; display: block; opacity: .9; will-change: border-radius, transform; }
.b1 { width: 78vmax; height: 78vmax; left: -28vmax; top: -30vmax; background: linear-gradient(140deg, #1e5a4c, #0d2a25 60%, #0b1412); animation: morph 26s ease-in-out infinite, drift 40s ease-in-out infinite; }
.b2 { width: 60vmax; height: 60vmax; right: -24vmax; bottom: -26vmax; background: linear-gradient(200deg, #4a1426, #1b0c14 70%); animation: morph 32s ease-in-out infinite reverse, drift 46s ease-in-out infinite reverse; }
.b3 { width: 36vmax; height: 36vmax; left: 52%; top: 8%; background: radial-gradient(circle at 40% 40%, rgba(127,240,196,.35), rgba(23,58,51,.1) 60%, transparent 70%); animation: morph 20s ease-in-out infinite; filter: blur(6px); }
.b4 { width: 26vmax; height: 26vmax; left: 8%; bottom: 6%; background: linear-gradient(160deg, rgba(46,78,110,.55), rgba(11,20,18,0)); animation: morph 24s ease-in-out infinite reverse; }
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33% { border-radius: 63% 37% 38% 62% / 56% 60% 40% 44%; }
  66% { border-radius: 36% 64% 52% 48% / 62% 35% 65% 38%; }
}
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(3vmax, 2vmax) rotate(18deg); } }

.hero-inner { position: relative; z-index: 2; text-align: center; padding: 120px 20px 110px; }
.hero-org { margin: 0 0 18px; font-size: 13px; color: var(--fog); letter-spacing: .2em; }
.hero-kicker { margin: 0 0 22px; font-family: var(--serif); font-size: 15px; letter-spacing: .5em; color: var(--glow); text-shadow: 0 0 18px rgba(127,240,196,.5); }
.hero-title { margin: 0; font-family: var(--serif); font-weight: 800; line-height: 1.3; letter-spacing: .08em; }
.t-main { display: block; white-space: nowrap; font-size: clamp(1.4rem, 7vw, 4.6rem); text-shadow: 0 0 30px rgba(127,240,196,.18), 0 2px 0 rgba(0,0,0,.5); }
.t-main:nth-child(2) { animation: flicker 5s 1.2s both; }
.t-sub { display: block; font-size: clamp(1rem, 2.6vw, 1.5rem); color: var(--fog); letter-spacing: .3em; margin-bottom: .4em; }
.t-end { margin: .5em 0 0; }
@keyframes flicker {
  0% { opacity: 0; } 8% { opacity: 1; } 10% { opacity: .3; } 12% { opacity: 1; } 60% { opacity: 1; } 61% { opacity: .55; } 62%, 100% { opacity: 1; }
}
.hero-page { display: inline-block; margin: 34px 0 10px; padding: 6px 22px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; letter-spacing: .4em; }
.hero-date { margin: 0; color: var(--fog); font-size: 14px; letter-spacing: .15em; }
.scroll { position: absolute; right: 28px; bottom: 28px; z-index: 2; color: var(--glow); font-family: var(--latin); font-style: italic; font-size: 17px; letter-spacing: .08em; text-decoration: none; }
.scroll::after { content: ""; display: block; height: 1px; background: currentColor; margin-top: 4px; transform-origin: left; animation: line 2.4s ease-in-out infinite; }
@keyframes line { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* 本文 */
.page { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: 0 24px 60px; }
body.sub .page { max-width: 760px; padding-top: 32px; }
.sec { padding: 96px 0 0; }
body.sub .sec { padding: 24px 0; }
.label { margin: 0 0 6px; }
.label span { font-family: var(--latin); font-style: italic; font-size: 20px; color: var(--glow); letter-spacing: .06em; }
.label span::before, .label span::after { content: "〜"; margin: 0 .5em; font-style: normal; font-size: 14px; opacity: .6; }
.sec h2 { margin: 0 0 28px; font-family: var(--serif); font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.4; letter-spacing: .12em; }
.sec h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.15rem; letter-spacing: .1em; color: var(--bone); }
.page-title { margin: 0 0 20px; font-family: var(--serif); font-weight: 800; font-size: 1.7rem; letter-spacing: .1em; }
.sec p { margin: 0 0 16px; }
.note { font-size: 14px; color: var(--fog); }
.muted { font-size: 14px; color: var(--fog); }

.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.blob-img { margin: 0; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 46% 54% 58% 42% / 44% 40% 60% 56%; animation: morph 22s ease-in-out infinite; box-shadow: 0 0 80px rgba(127,240,196,.12); }
.blob-img img { width: 100%; height: 100%; object-fit: cover; }
.story-h { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; letter-spacing: .2em !important; }
.whisper { font-family: var(--serif); font-size: 1.2rem; line-height: 1.9; color: var(--glow); text-shadow: 0 0 16px rgba(127,240,196,.35); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 26px 28px; margin-bottom: 16px; }
.panel > :last-child { margin-bottom: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.warn-panel { border-color: rgba(155,27,53,.6); background: linear-gradient(135deg, rgba(155,27,53,.22), rgba(16,32,29,.7)); }

.outline-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.spec { display: grid; grid-template-columns: 8.5em 1fr; margin: 0 0 16px; }
.spec dt, .spec dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--fog); font-size: 14px; padding-top: 14px; }
.spec dd { padding-left: 14px; }
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 0; }
.flyers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flyers a { color: var(--fog); text-decoration: none; font-size: 13px; text-align: center; }
.flyers img { border-radius: 14px; margin-bottom: 6px; border: 1px solid var(--line); transition: transform .3s; }
.flyers a:hover img { transform: translateY(-4px); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 26px 24px; position: relative; }
.steps li:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; width: 10px; height: 10px; border-top: 1px solid var(--glow-dim); border-right: 1px solid var(--glow-dim); transform: translateY(-50%) rotate(45deg); }
.step-no { display: block; font-family: var(--latin); font-style: italic; font-size: 22px; color: var(--glow); }
.steps strong { display: block; font-family: var(--serif); font-size: 1.15rem; margin: 4px 0 10px; letter-spacing: .08em; }
.steps p { margin: 0; font-size: 15px; color: #d4cfc2; }

.list { margin: 0 0 16px; padding-left: 1.3em; }
.list li { margin-bottom: 6px; }

/* 空き状況 */
.avail { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.avail-cell { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.avail-time { font-family: var(--serif); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.avail-state { font-size: 13px; color: var(--ok); }
.avail-waitlist .avail-state { color: var(--wait); }
.avail-full, .avail-past { opacity: .5; }
.avail-full .avail-state, .avail-past .avail-state { color: var(--fog); }

/* フォーム */
.form-card { margin-top: 36px; background: linear-gradient(160deg, rgba(23,58,51,.85), rgba(16,32,29,.9)); border: 1px solid rgba(127,240,196,.25); border-radius: 32px; padding: 34px 32px; box-shadow: 0 0 60px rgba(127,240,196,.08); }
.form-h { margin-bottom: 14px !important; }
.form { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.form > label { font-weight: 700; font-size: 15px; margin-top: 14px; }
.form .note { margin: 0; }
.req, .opt { font-size: 11px; font-weight: 700; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; letter-spacing: .1em; }
.req { background: var(--blood); color: #fff; }
.opt { border: 1px solid var(--line); color: var(--fog); }
input[type=email], input[type=tel], input:not([type]), select {
  font: inherit; font-size: 16px; letter-spacing: .02em; padding: 13px 16px; width: 100%;
  border: 1px solid rgba(236,230,216,.28); border-radius: 14px; background: rgba(5,10,9,.55); color: var(--bone);
}
input::placeholder { color: #6f7c77; }
select option { color: #111; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn { display: inline-block; font: inherit; font-weight: 700; letter-spacing: .15em; text-align: center; text-decoration: none; padding: 15px 28px; margin-top: 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--blood); color: #fff; box-shadow: 0 10px 30px rgba(155,27,53,.35); }
.btn-primary:hover { background: var(--blood-dark); }
.btn-secondary { background: transparent; color: var(--bone); border-color: rgba(236,230,216,.45); }
.btn-secondary:hover { background: rgba(236,230,216,.08); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: rgba(255,138,152,.08); }
.btn-sm { margin: 0; padding: 4px 12px; font-size: 13px; letter-spacing: .05em; }
.btn-done { background: #1c6a44; color: #fff; }

.check { display: flex; gap: 10px; align-items: center; font-weight: 700; margin-top: 12px; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--blood); }
.row { display: flex; gap: 8px; }
.row select { flex: 1; }
.row .btn { margin-top: 0; white-space: nowrap; }

.slots { border: 0; padding: 0; margin: 16px 0 0; }
.slots legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 8px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.slot { position: relative; display: flex; flex-direction: column; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(5,10,9,.45); cursor: pointer; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot-time { font-family: var(--serif); font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.slot-state { font-size: 13px; color: var(--ok); }
.slot-waitlist .slot-state { color: var(--wait); }
.slot-full, .slot-past { opacity: .45; cursor: not-allowed; }
.slot-full .slot-state, .slot-past .slot-state { color: var(--fog); }
.slot-current { border-style: dashed; cursor: default; }
.slot:has(input:checked) { border: 2px solid var(--glow); padding: 9px 11px; background: rgba(127,240,196,.12); box-shadow: 0 0 20px rgba(127,240,196,.2); }
.slot:focus-within { outline: 2px solid var(--glow); outline-offset: 2px; }

.rules { margin-top: 20px; padding: 18px 20px; border-radius: 20px; background: rgba(5,10,9,.4); border: 1px solid var(--line); }
.rules-title { font-weight: 700; margin: 0 0 6px; }
.rules .list { font-size: 14px; }

.error, .ok, .warn { padding: 12px 16px; margin: 0 0 16px; border-radius: 14px; border: 1px solid; }
.error { background: rgba(155,27,53,.25); border-color: var(--danger); color: #ffd5da; font-weight: 700; }
.ok { background: rgba(127,240,196,.12); border-color: var(--glow-dim); font-weight: 700; }
.warn { background: rgba(232,194,122,.12); border-color: var(--wait); }
.closed { font-weight: 700; color: var(--danger); }
.status { font-family: var(--serif); font-size: 1.6rem; font-weight: 800; margin: 0 0 8px; letter-spacing: .1em; }
.status-confirmed { color: var(--ok); }
.status-waitlist { color: var(--wait); }
.status-cancelled { color: var(--fog); }

.site-foot { position: relative; z-index: 2; max-width: 1040px; margin: 80px auto 0; padding: 28px 24px 48px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fog); }
.site-foot p { margin: 0 0 4px; }

@media (max-width: 820px) {
  .story-grid, .outline-grid, .two { grid-template-columns: 1fr; gap: 28px; }
  .blob-img { max-width: 420px; }
  .steps { grid-template-columns: 1fr; }
  .steps li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -13px; transform: translateX(-50%) rotate(135deg); }
  .sec { padding-top: 72px; }
}
@media (max-width: 520px) {
  .site-head { padding: 12px 14px; }
  .hero-title { letter-spacing: .02em; }
  .hero-kicker { letter-spacing: .25em; font-size: 13px; }
  .panel, .form-card { padding: 22px 18px; border-radius: 22px; }
  .spec { grid-template-columns: 6.5em 1fr; }
  .scroll { right: 50%; transform: translateX(50%); }
}

/* ===== 管理画面は実務用に明るく ===== */
body.admin { color: #1d1e25; background: #f5f4f0; font-family: var(--sans); letter-spacing: 0; line-height: 1.7; }
body.admin::after { display: none; }
body.admin a { color: #23264f; }
body.admin .site-head { position: static; background: #fff; border-bottom: 1px solid #d8d5cd; }
body.admin .site-name { color: #1d1e25; text-shadow: none; font-family: var(--sans); }
body.admin main { padding: 16px 20px 40px; max-width: 1200px; }
body.admin .note, body.admin .muted { color: #5f5d68; }
body.admin input { background: #fff; color: #1d1e25; border: 1px solid #a09d95; border-radius: 6px; padding: 8px 10px; }
body.admin .btn-secondary { color: #23264f; border-color: #23264f; }
body.admin .btn-danger { color: #a3141f; border-color: #a3141f; }
body.admin .btn { border-radius: 6px; }
body.admin .ok { background: #e4f1e9; border-color: #1c6a44; color: #1d1e25; }
.totals { font-weight: 700; }
.search { display: flex; gap: 8px; max-width: 560px; margin: 8px 0 4px; align-items: center; }
.search input { flex: 1; }
.search .btn { margin: 0; white-space: nowrap; }
.admin-slot { margin: 0 0 28px; }
.admin-slot h2 { font-size: 1rem; margin: 0 0 6px; color: #23264f; }
.cap { font-size: 14px; margin-bottom: 6px; }
.cap input { width: 72px; padding: 4px 6px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; background: #fff; }
th, td { border: 1px solid #d8d5cd; padding: 6px 8px; text-align: left; white-space: nowrap; vertical-align: top; }
th { background: #e8e9f2; }
.row-waitlist { background: #fffaf0; }
.row-cancelled { color: #5f5d68; text-decoration: line-through; }
.row-in { background: #e4f1e9; }
.mailfix summary { cursor: pointer; color: #23264f; }
.mailfix form { display: flex; gap: 6px; margin-top: 6px; }
.mailfix input { padding: 4px 6px; font-size: 14px; width: 220px; }
.failed { background: #fbe8e8; padding: 8px 14px; margin-bottom: 16px; }
.failed h2 { font-size: 1rem; margin: 0; }

/* ===== 掲示板パート（トップ） ===== */
body.top .site-name { opacity: 0; pointer-events: none; transition: opacity .6s; }
body.top.is-dark .site-name { opacity: 1; pointer-events: auto; }
body.top .site-head { background: none; }
body.top.is-dark .site-head { background: linear-gradient(rgba(11,20,18,.85), rgba(11,20,18,0)); }
body.top .motes { opacity: 0; transition: opacity 1.2s; }
body.top.is-dark .motes { opacity: 1; }

.bbs { position: relative; z-index: 3; background: #efefef; color: #111; letter-spacing: 0; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; line-height: 1.65; }
.bbs a { color: #0033cc; }
.bbs-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px; padding-right: 150px; background: #e1e1dc; border-bottom: 1px solid #c9c9c2; font-size: 13px; }
.bbs-board { font-weight: 700; color: #444; }
.bbs-skip { font-size: 13px; }
.bbs-inner { max-width: 820px; margin: 0 auto; padding: 36px 18px 60px; }
.bbs-archived { margin: 0 0 14px; padding: 8px 12px; background: #fff7d6; border: 1px solid #e6d58a; font-size: 13px; color: #6b5a00; }
.bbs-title { margin: 0 0 4px; color: #cc0000; font-size: 1.15rem; line-height: 1.5; font-weight: 700; font-family: inherit; letter-spacing: 0; }
.bbs-meta { margin: 0 0 22px; font-size: 12px; color: #666; }
.bbs-posts { margin: 0; }
.post { margin: 0; padding: 14px 0 6px; }
.post-h { margin: 0 0 4px; font-size: 13px; color: #333; word-break: break-all; }
.post-h .no { font-weight: 700; }
.post-h .dt { white-space: nowrap; }
.post-h .nm { color: #117743; font-weight: 700; }
.post-h .pid { color: #555; }
.post-h .pid-op { color: #b30000; font-weight: 700; }
.post-h .trip { color: #117743; }

.post-b { margin: 0 0 0 1.8em; font-size: 15.5px; word-break: break-word; white-space: pre-wrap; }
/* 投稿者のレスは目立たせる */
.post-op { margin: 18px 0; padding: 16px 18px 14px; background: #fffdf4; border: 1px solid #e3dcc3; border-left: 4px solid #b30000; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.post-op .post-h .nm { color: #b30000; }
.post-op .post-b { margin-left: 0; font-size: 16px; line-height: 1.85; }
.op-badge { display: inline-block; margin: 0 4px 0 6px; padding: 0 7px; border-radius: 3px; background: #b30000; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.7; vertical-align: 1px; }
.post-op.grave { background: #f6f3ec; border-left-color: #3d0a14; }
.post-op.grave .post-b { font-family: var(--serif); }
.post-b.deleted { color: #888; font-size: 14px; }
.redact { display: inline-block; background: #111; color: transparent; border-radius: 1px; padding: 0 2px; line-height: 1.2; user-select: none; }
.bbs-end { margin: 40px 0 0; text-align: center; font-size: 13px; color: #888; }
.anchor { text-decoration: underline; }
.post:target { background: #fff6c4; }

/* レスが一件ずつ読み込まれていく */
.js-anim .reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.js-anim .reveal.in { opacity: 1; transform: none; }
.js-anim .post.last.in .post-b { animation: stutter 1.4s .3s both; }
@keyframes stutter { 0% { opacity: 0; } 20% { opacity: 1; } 24% { opacity: .2; } 28% { opacity: 1; } 100% { opacity: 1; } }

/* 暗転していく区間 */
.descent { position: relative; z-index: 3; height: 240vh; background: #efefef; }
.descent-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-content: center; gap: 18px; text-align: center; padding: 0 20px; }
.d { margin: 0; opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.2s ease; font-family: var(--serif); letter-spacing: .15em; }
.d1 { font-size: clamp(1rem, 2.4vw, 1.3rem); color: #555; }
.s1 .d1 { opacity: 1; transform: none; color: var(--fog); }
.d2 { font-size: 1rem; color: var(--fog); }
.s2 .d2 { opacity: 1; transform: none; }
.d3 { font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 800; color: var(--bone); text-shadow: 0 0 24px rgba(127,240,196,.35); }
.s3 .d3 { opacity: 1; transform: none; }
.d4 { font-family: var(--latin); font-style: italic; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--glow); letter-spacing: .1em; }
.s4 .d4 { opacity: 1; transform: none; }

/* イベント情報が流れ込んでくる */
.js-anim .rise { opacity: 0; transform: translateY(24px); filter: blur(4px); transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease; }
.js-anim .rise.in { opacity: 1; transform: none; filter: none; }
.js-anim .hero-kicker.rise { transition-delay: .15s; }
.js-anim .t-sub.rise { transition-delay: .3s; }
.js-anim .t-main.rise:nth-child(2) { transition-delay: .5s; }
.js-anim .t-main.rise:nth-child(3) { transition-delay: .75s; }
.js-anim .t-end.rise { transition-delay: 1s; }
.js-anim .hero-page.rise { transition-delay: 1.2s; }
.js-anim .hero-date.rise { transition-delay: 1.35s; }
.t-main:nth-child(2) { animation: none; }
.js-anim .t-main.rise.in:nth-child(3) { animation: flicker 5s 1.6s both; }
.js-anim .fade { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
.js-anim .fade.in { opacity: 1; transform: none; }

@media (max-width: 520px) {
  .bbs-bar { padding-right: 110px; flex-direction: column; align-items: flex-start; gap: 0; }
  .post-b { margin-left: .6em; font-size: 15px; }
  .descent { height: 200vh; }
}


/* ===== 読みやすさ優先の上書き ===== */
.site-name { font-family: var(--sans); font-weight: 700; letter-spacing: .04em; text-shadow: none; }
.site-name span { letter-spacing: .1em; }
body.top .site-name { opacity: 1; pointer-events: auto; }
body.top .site-head, body.top.is-dark .site-head { background: rgba(11, 20, 18, .96); border-bottom: 1px solid var(--line); }
body.top .motes, body.top.is-dark .motes { opacity: .6; }
.motes { z-index: 0; }

.sec h2, .page-title, .sec h3, .steps strong, .status, .avail-time, .slot-time { font-family: var(--sans); letter-spacing: .03em; }
.sec h2 { font-weight: 900; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.step-no { font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.steps p { color: var(--bone); }
.whisper { font-family: var(--sans); font-weight: 700; }
.hero-kicker { font-family: var(--sans); letter-spacing: .2em; font-weight: 700; }
.hero-title { font-family: var(--sans); font-weight: 900; letter-spacing: .03em; }
.t-sub { letter-spacing: .1em; }
.hero-org, .hero-date, .hero-page { letter-spacing: .08em; }
.js-anim .t-main.rise.in:nth-child(3) { animation: none; }
.form-card { background: #17302a; }
.avail-cell, .steps li { background: var(--panel); }
.note, .muted { color: var(--fog); }

/* 引用としての掲示板 */
.quote-wrap { position: relative; z-index: 3; max-width: 880px; margin: 0 auto; padding: 104px 20px 40px; }
.quote-lead { margin: 0 0 6px; font-size: 15px; color: var(--bone); }
.quote-skip { margin: 0 0 20px; font-size: 14px; }
.quote-frame { border: 1px solid #5d6a65; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.quote-frame .bbs { z-index: auto; }
.quote-frame .bbs-bar { position: static; padding-right: 16px; }
.quote-frame .bbs-inner { padding: 28px 22px 40px; }
.quote-end { margin: 14px 0 0; text-align: right; font-size: 14px; color: var(--fog); }
.post-op.late { background: #f4f1ea; border-left-color: #4a0f1c; }
@media (max-width: 520px) {
  .quote-wrap { padding: 88px 12px 32px; }
  .quote-frame .bbs-inner { padding: 22px 12px 32px; }
  .quote-frame .bbs-bar { flex-direction: row; }
}
/* 固定ヘッダーの下に見出しが隠れないように */
[id] { scroll-margin-top: 84px; }

/* ===================================================================
   本文エリアは明るい紙面に。暗いのはヘッダー・引用・タイトルだけ。
   =================================================================== */
.page {
  --ink: #16201d; --ink2: #4b5753; --paper: #eef1ef; --card: #ffffff; --rule2: #d3dad7;
  --accent: #1d5a4a; --accent-soft: #e2eeea;
  --ok: #17693f; --wait: #95600a; --danger: #a3141f;
  max-width: none; margin: 0; padding: 0 0 72px; background: var(--paper); color: var(--ink);
}
.page > .sec { max-width: 980px; margin: 0 auto; padding: 72px 24px 0; }
body.sub .page { padding-top: 24px; }
body.sub .page > .sec { max-width: 720px; padding-top: 24px; padding-bottom: 8px; }
.page a { color: var(--accent); }
.page .sec h2 { color: var(--ink); font-size: clamp(1.45rem, 3vw, 1.9rem); margin-bottom: 22px; padding-left: 14px; border-left: 5px solid var(--blood); line-height: 1.35; }
.page .sec h3 { color: var(--ink); font-size: 1.1rem; }
.page .page-title { color: var(--ink); }
.page p, .page li, .page dd { color: var(--ink); }
.page .note, .page .muted { color: var(--ink2); }
.page .whisper { color: var(--accent); text-shadow: none; font-size: 1.15rem; }

.page .panel { background: var(--card); border: 1px solid var(--rule2); border-radius: 18px; box-shadow: 0 2px 10px rgba(22, 32, 29, .06); }
.page .warn-panel { background: #fbf0f2; border-color: #e7b9c3; border-left: 5px solid var(--blood); }
.page .spec dt, .page .spec dd { border-bottom-color: var(--rule2); }
.page .spec dt { color: var(--ink2); font-weight: 700; }

.page .steps li { background: var(--card); border: 1px solid var(--rule2); border-radius: 18px; box-shadow: 0 2px 10px rgba(22, 32, 29, .06); }
.page .step-no { color: #fff; background: var(--accent); display: inline-block; padding: 2px 10px; border-radius: 999px; }
.page .steps p { color: var(--ink); }
.page .steps li:not(:last-child)::after { border-color: var(--accent); }

.page .blob-img { box-shadow: 0 18px 40px rgba(22, 32, 29, .18); }
.page .flyers a { color: var(--ink2); }
.page .flyers img { border-color: var(--rule2); box-shadow: 0 6px 18px rgba(22, 32, 29, .15); }

.page .avail-cell { background: var(--card); border: 1px solid var(--rule2); }
.page .avail-time { color: var(--ink); }
.page .avail-state { color: var(--ok); font-weight: 700; }
.page .avail-waitlist { background: #fff8ea; border-color: #ecd3a3; }
.page .avail-waitlist .avail-state { color: var(--wait); }
.page .avail-full, .page .avail-past { opacity: 1; background: #e4e8e6; }
.page .avail-full .avail-state, .page .avail-past .avail-state { color: var(--ink2); font-weight: 400; }

.page .form-card { background: var(--card); border: 1px solid var(--rule2); border-top: 6px solid var(--blood); border-radius: 18px; box-shadow: 0 10px 30px rgba(22, 32, 29, .10); }
.page input[type=email], .page input[type=tel], .page input:not([type]), .page select {
  background: #fff; color: var(--ink); border: 1.5px solid #9aa6a1; border-radius: 10px;
}
.page input:focus, .page select:focus { border-color: var(--accent); outline: 3px solid rgba(29, 90, 74, .2); outline-offset: 0; }
.page input::placeholder { color: #8b9692; }
.page .btn-secondary { color: var(--accent); border-color: var(--accent); background: #fff; }
.page .btn-secondary:hover { background: var(--accent-soft); }
.page .btn-danger { color: var(--danger); border-color: var(--danger); background: #fff; }
.page .opt { color: var(--ink2); border-color: var(--rule2); }
.page .check input { accent-color: var(--accent); }

.page .slot { background: #fff; border: 1.5px solid var(--rule2); }
.page .slot-time { color: var(--ink); }
.page .slot-state { color: var(--ok); font-weight: 700; }
.page .slot-waitlist .slot-state { color: var(--wait); }
.page .slot-full, .page .slot-past { opacity: 1; background: #e4e8e6; }
.page .slot-full .slot-state, .page .slot-past .slot-state, .page .slot-full .slot-time, .page .slot-past .slot-time { color: #7c8783; font-weight: 400; }
.page .slot:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }

.page .rules { background: #f6f8f7; border-color: var(--rule2); }
.page .info { background: var(--accent-soft); border-color: #c4dbd3; }
.page .error { background: #fbeaec; border-color: var(--danger); color: var(--danger); }
.page .ok { background: #e6f3ec; border-color: var(--ok); color: var(--ink); }
.page .warn { background: #fff6e2; border-color: var(--wait); color: var(--ink); }
.page .status-confirmed { color: var(--ok); }
.page .status-waitlist { color: var(--wait); }
.page .status-cancelled { color: var(--ink2); }
.page .closed { color: var(--danger); }

/* 暗いタイトル部分から明るい紙面へ、なだらかな境界 */
.hero { padding-bottom: 60px; }
.hero-edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; z-index: 1; fill: #eef1ef; }
.site-foot { max-width: none; margin: 0; padding: 28px 24px 48px; background: #0b1412; }
.site-foot p { max-width: 980px; margin-left: auto; margin-right: auto; }

@media (max-width: 820px) {
  .page > .sec { padding-top: 56px; }
  .hero-edge { height: 56px; }
}
@media (max-width: 520px) {
  .page > .sec { padding-left: 16px; padding-right: 16px; }
  .page .sec h2 { padding-left: 10px; border-left-width: 4px; }
}
body.sub .page > .sec { padding: 24px 20px 8px; }
@media (max-width: 520px) { body.sub .page > .sec { padding: 20px 14px 8px; } }


/* ===================================================================
   最終調整：ヘッダーなし・紙面は明るく・暗いのはタイトルの場面だけ
   =================================================================== */
body { background: #eef1ef; color: #16201d; }
body::after { display: none; }
.quote-wrap { max-width: 860px; padding: 56px 20px 72px; }
.quote-lead { color: #16201d; font-size: 15px; margin-bottom: 18px; }
.quote-frame { border: 1px solid #cfd6d3; border-radius: 4px; box-shadow: none; }
.quote-frame .bbs-inner { padding: 28px 22px 36px; }

.descent { position: relative; z-index: 3; height: 230vh; background: #eef1ef; }
.descent-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.descent .blobs { opacity: var(--blob, 0); transition: opacity .3s linear; }
.title-block { position: relative; z-index: 2; text-align: center; padding: 0 20px; color: var(--bone); }
.title-block .hero-page { border: 0; padding: 0; margin: 28px 0 0; font-size: 14px; color: var(--fog); }
.emerge { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 1.4s ease, transform 1.4s ease, filter 1.4s ease; }
.descent.show .emerge { opacity: 1; transform: none; filter: none; }
.descent.show .hero-kicker { transition-delay: .2s; }
.descent.show .t-sub { transition-delay: .4s; }
.descent.show .t-main:nth-child(2) { transition-delay: .65s; }
.descent.show .t-main:nth-child(3) { transition-delay: .95s; }
.descent.show .t-end { transition-delay: 1.25s; }
.descent.show .hero-page { transition-delay: 1.5s; }
.edge { position: relative; z-index: 3; background: #0b1412; line-height: 0; margin-top: -1px; }
.edge svg { width: 100%; height: 90px; fill: #eef1ef; display: block; }

.story-grid { grid-template-columns: 1fr; max-width: 760px; }
.page > .sec:first-child { padding-top: 40px; }
.site-foot { background: transparent; border-top: 1px solid #d3dad7; color: #4b5753; }
.site-foot a { color: #1d5a4a; }
body.sub .page { padding-top: 32px; }

@media (max-width: 820px) { .edge svg { height: 56px; } .descent { height: 200vh; } }
@media (max-width: 520px) { .quote-wrap { padding: 36px 10px 56px; } .quote-frame .bbs-inner { padding: 20px 12px 28px; } }
@media (max-width: 520px) { .t-main { font-size: 8.2vw; } .title-block { padding: 0 12px; } }