/* =========================================================
   一ツ身会 — 表の顔は「手作りの地域の会のホームページ」
   --decay (0..1) が上がるほど、色が抜け、揺れ、汚れる
   ========================================================= */
:root {
  --bg: #fbf6ea;
  --paper: #fffdf7;
  --ink: #4a3f35;
  --ink-soft: #7d6f60;
  --green: #6f9a5d;
  --green-d: #4e7a3f;
  --pink: #e8a3b1;
  --pink-l: #fbe3e8;
  --line: #e6dcc8;
  --red: #a3202a;
  --decay: 0;
  --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
  --mincho: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --hand: "Klee One", "Zen Maru Gothic", cursive;
  --dot: "DotGothic16", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(111,154,93,.18) 1px, transparent 1.5px);
  background-size: 18px 18px;
  color: var(--ink);
  font-family: var(--round);
  font-size: 16px;
  line-height: 1.95;
  overflow-x: clip;
}
/* body に filter をかけると position:fixed が壊れるので .page にだけかける */
.page { filter: saturate(calc(1 - var(--decay) * .85)) contrast(calc(1 + var(--decay) * .15)); }
::selection { background: var(--pink); color: #fff; }
a { color: var(--green-d); }
button { font: inherit; }

.page { max-width: 780px; margin: 0 auto; padding: 0 16px 80px; position: relative; }

/* ---------- 隠し文字（選択すると見える） ---------- */
.ink {
  color: transparent;
  margin: 0;
  height: 1.2em;
  line-height: 1.2em;
  font-family: var(--hand);
  letter-spacing: .3em;
  user-select: text;
}
.ink::selection { background: #1a0d0d; color: #ff5a5a; }
.ink-on .ink { color: rgba(140, 30, 30, calc(var(--decay) * .55)); }

/* ---------- ヘッダー ---------- */
.ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  margin: 0 -16px;
  padding: 4px 0;
}
.ticker__inner { display: inline-block; padding-left: 100%; animation: ticker 32s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

.hd { display: flex; align-items: center; gap: 18px; padding: 26px 0 10px; }
.logo { width: 92px; height: 92px; color: var(--green-d); flex: none; overflow: visible; }
.logo circle { transition: fill 1s; }
.hd__kana { margin: 0; font-size: 12px; letter-spacing: .25em; color: var(--ink-soft); }
.hd h1 {
  margin: 0;
  font-size: clamp(40px, 9vw, 58px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .08em;
  color: var(--green-d);
  text-shadow: 3px 3px 0 var(--pink-l);
}
.tagline { margin: 4px 0 0; font-size: 15px; color: var(--pink); font-weight: 700; letter-spacing: .1em; }

.gnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 10px;
}
.gnav a {
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  background: var(--paper);
  border: 2px solid var(--green);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--green-d);
}
.gnav a:hover { background: var(--green); color: #fff; }

.counter {
  font-size: 13px;
  text-align: center;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 6px 10px;
}
.counter__num { font-size: 20px; color: var(--red); font-family: var(--dot); font-weight: 400; letter-spacing: .05em; }
.counter__sep { color: var(--line); margin: 0 6px; }
.kiriban { font-family: var(--dot); background: #222; color: #7dff7d; padding: 1px 6px; border-radius: 3px; letter-spacing: .1em; }

/* ---------- カード ---------- */
.card {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 26px clamp(16px, 4vw, 34px);
  margin: 26px 0;
  box-shadow: 0 3px 0 var(--line);
  position: relative;
}
.h2 { margin: 0 0 18px; font-size: 20px; text-align: center; }
.h2 span {
  display: inline-block;
  background: var(--pink-l);
  border-radius: 999px;
  padding: 2px 22px;
  color: var(--ink);
}
.h2 span::before, .h2 span::after { content: "✿"; color: var(--pink); margin: 0 8px; font-size: 14px; }
.sign { text-align: right; margin-top: 18px; }
.small { font-size: 13px; color: var(--ink-soft); }

/* ---------- はじめての方へ ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { text-align: center; }
.step h3 { margin: 8px 0 2px; font-size: 16px; color: var(--green-d); }
.step p { margin: 0; font-size: 14px; line-height: 1.7; }
.step__icon { height: 70px; position: relative; }
.step__icon i {
  position: absolute; top: 14px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--green); opacity: .85;
  transition: left 1.6s ease, width 1.6s ease, border-radius 1.6s ease;
}
.step__icon--1 i:nth-child(1) { left: calc(50% - 50px); }
.step__icon--1 i:nth-child(2) { left: calc(50% + 8px); background: var(--pink); }
.step__icon--2 i:nth-child(1) { left: calc(50% - 36px); }
.step__icon--2 i:nth-child(2) { left: calc(50% - 6px); background: var(--pink); }
.step__icon--3 i:nth-child(1) { left: calc(50% - 30px); width: 60px; border-radius: 46% 54% 50% 50%; }
.step__icon--3 i:nth-child(2) { left: calc(50% - 21px); background: var(--pink); mix-blend-mode: multiply; }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 会報 ---------- */
.post { padding: 18px 0 22px; border-bottom: 2px dotted var(--line); position: relative; }
.post:last-child { border-bottom: 0; }
.post__date { margin: 0; font-size: 13px; color: var(--ink-soft); }
.post__title { margin: 0 0 10px; font-size: 19px; border-left: 6px solid var(--green); padding-left: 10px; line-height: 1.5; }
.post__meta { font-size: 12px; color: var(--ink-soft); text-align: right; margin: 8px 0 0; }
.clap { color: var(--pink); }
.comments { list-style: none; margin: 6px 0 0; padding: 8px 12px; background: var(--bg); border-radius: 10px; font-size: 14px; }
.notice { background: #f6f1e2; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.notice--warn { background: #fdf0ee; border-color: #f0c9c4; }
.notice__h { margin: 0 0 4px; font-weight: 700; color: var(--green-d); }
.notice--warn .notice__h { color: var(--red); }
.sched { border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.sched th { text-align: left; padding: 2px 14px 2px 0; color: var(--green-d); font-family: var(--dot); font-weight: 400; }
.sched td { padding: 2px 0; }

/* 写真（SVGで手続き生成） */
.photo {
  margin: 10px auto 14px;
  max-width: 520px;
  background: #fff;
  padding: 10px 10px 34px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transform: rotate(-1.2deg);
  position: relative;
}
.photo:nth-of-type(even) { transform: rotate(1deg); }
.photo svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #ddd; }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--hand); font-size: 14px; }
.photo--dark { background: #f3efe6; }

/* 短冊 */
.tanzaku span[data-back] { cursor: pointer; }
.tanzaku span.back { background: #160d0d !important; color: #d44; height: 170px; box-sizing: border-box; font-size: 12px !important; letter-spacing: 0; line-height: 1.5; animation: none; filter: none; }
.tanzaku { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 0; }
.tanzaku span {
  writing-mode: vertical-rl;
  font-family: var(--hand);
  font-size: 15px;
  padding: 14px 6px;
  min-height: 150px;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  transform-origin: top center;
  animation: sway 4s ease-in-out infinite;
}
.tanzaku span:nth-child(5n+1) { background: #f9d6dc; }
.tanzaku span:nth-child(5n+2) { background: #d9ecd0; animation-delay: -1s; }
.tanzaku span:nth-child(5n+3) { background: #fdf0b8; animation-delay: -2.2s; }
.tanzaku span:nth-child(5n+4) { background: #d6e4f5; animation-delay: -.5s; }
.tanzaku span:nth-child(5n)   { background: #ead9f2; animation-delay: -3s; }
.tanzaku span:nth-child(5), .tanzaku span:nth-child(11) { font-size: 13px; letter-spacing: -.05em; }
/* 見た目の並び（あれが 並べかえた） */
.tanzaku span:nth-child(1) { order: 1; }  .tanzaku span:nth-child(2) { order: 4; }
.tanzaku span:nth-child(3) { order: 6; }  .tanzaku span:nth-child(4) { order: 7; }
.tanzaku span:nth-child(5) { order: 9; }  .tanzaku span:nth-child(6) { order: 5; }
.tanzaku span:nth-child(7) { order: 10; } .tanzaku span:nth-child(8) { order: 3; }
.tanzaku span:nth-child(9) { order: 2; }  .tanzaku span:nth-child(10) { order: 8; }
.tanzaku span:nth-child(11) { order: 11; }
@keyframes sway { 50% { transform: rotate(calc(2deg + var(--decay) * 6deg)); } }

/* さいごの記事のタイプ打ち */
.typed { min-height: 7.5em; font-size: 17px; }
.typed p { margin: 0 0 .6em; }
.typed .caret { display: inline-block; width: .5em; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.post--last .typed p:last-child { font-weight: 700; }

/* ---------- 新聞 ---------- */
.press-lead { text-align: center; margin-top: 0; }
.clips { display: grid; grid-template-columns: 1fr 200px; gap: 22px; align-items: start; }
@media (max-width: 640px) { .clips { grid-template-columns: 1fr; } }
.clip { position: relative; }
.clip__paper {
  position: relative;
  background-color: #efe9d8;
  background-image:
    radial-gradient(rgba(120,100,60,.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.05));
  background-size: 3px 3px, 100% 100%;
  color: #222;
  font-family: var(--mincho);
  padding: 18px;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  clip-path: polygon(0 1%, 3% 0, 20% 1%, 40% 0, 62% 1%, 80% 0, 100% 1%, 99% 30%, 100% 60%, 99% 100%, 70% 99%, 45% 100%, 20% 99%, 0 100%, 1% 70%, 0 40%);
}
.clip--main .clip__paper {
  writing-mode: vertical-rl;
  height: 520px;
  overflow: hidden;
  transform: rotate(.6deg);
}
.clip__head { font-size: 30px; font-weight: 800; line-height: 1.25; margin: 0 0 0 14px; letter-spacing: .02em; }
.clip__sub { font-size: 18px; font-weight: 800; margin: 0 0 0 14px; padding-top: 3em; border-right: 0; }
.clip__photo { writing-mode: horizontal-tb; float: left; width: 210px; margin: 0 0 0 10px; font-size: 11px; }
.clip__photo svg { width: 100%; display: block; background: #bbb; }
.clip__body { font-size: 14px; line-height: 1.75; text-align: justify; }
.clip__body p { margin: 0; text-indent: 1em; }
.redact {
  background: #111;
  color: #111;
  border-radius: 1px;
  transition: color .08s;
  cursor: default;
}
.redact.peek { color: #6a1010; background: #0a0a0a; }
.clip--ads .clip__paper { transform: rotate(-1.5deg); padding: 14px; }
.ads__h { margin: 0 0 6px; font-weight: 800; font-size: 18px; text-align: center; border-bottom: 2px solid #222; }
.ads { margin: 0; font-size: 12.5px; line-height: 1.5; }
.ads div { border-bottom: 1px solid #999; padding: 6px 0; }
.ads dt { font-weight: 800; }
.ads dd { margin: 0; }
.ads__you dt, .ads__you dd { color: #6a1010; }
.sticker {
  position: absolute;
  font-family: var(--hand);
  background: #fff6a8;
  color: #c2405a;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.2;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  text-align: center;
}
.sticker--1 { top: -10px; right: 6px; transform: rotate(8deg); }
.sticker--2 { bottom: 20px; left: -8px; transform: rotate(-10deg); background: #ffd6e0; }
.sticker--3 { bottom: -14px; right: -6px; transform: rotate(6deg); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { margin: 0; }
.qa { border-bottom: 1px dashed var(--line); padding: 10px 0; }
.qa dt { font-weight: 700; cursor: pointer; }
.qa dt::before { content: "Q. "; color: var(--green-d); }
.qa dd { margin: 4px 0 0; padding-left: 1.6em; color: var(--ink); }
.qa dd::before { content: "A. "; color: var(--pink); margin-left: -1.6em; }

/* ---------- 入会フォーム ---------- */
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.form input[type=text], .form select, .form textarea {
  font: inherit; font-weight: 400;
  border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--ink);
}
.form .check { display: flex; align-items: center; gap: 8px; }
.form .check input { width: 20px; height: 20px; accent-color: var(--green); }
.btn {
  border: 0; cursor: pointer; border-radius: 999px; padding: 10px 26px; font-weight: 700;
  background: var(--green); color: #fff; box-shadow: 0 3px 0 var(--green-d);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-d); }
.btn--join { font-size: 18px; justify-self: center; padding: 12px 48px; background: var(--pink); box-shadow: 0 3px 0 #c97f8e; }

/* ---------- フッター ---------- */
/* ページの 下の なにも ない ところ（フッターは その 底） */
#void { position: relative; height: 340vh; pointer-events: none; }
#void p { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font: 600 13px var(--mincho); letter-spacing: .4em; color: var(--ink); opacity: .07; }
.site-footer { text-align: center; font-size: 12px; color: var(--ink-soft); padding: 20px 0 40px; opacity: .55; }
.soko-door { color: inherit; text-decoration: none; padding: 14px 16px; margin: -14px -16px; position: relative; -webkit-tap-highlight-color: transparent; }   /* 見た目は「。」1字、押せる範囲だけ 広い */
.soko-door:hover, .soko-door:focus-visible { color: #8a0000; outline: none; }
.modal__credit { margin: 6px 0 0; font-size: 11px; }
.modal__credit a { color: var(--ink-soft); }
.site-footer p { margin: 2px 0; }
.fiction { margin-top: 12px !important; opacity: .8; }

/* ---------- 音量モーダル ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(40,35,30,.55);
  display: grid; place-items: center; padding: 16px;
  backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal__box {
  background: var(--paper); border-radius: 20px; padding: 26px 24px 18px;
  max-width: 380px; width: 100%; text-align: center; border: 3px solid var(--green);
}
.modal__logo { width: 56px; height: 56px; color: var(--green-d); }
.modal__lead { font-weight: 900; font-size: 18px; margin: 6px 0; color: var(--green-d); }
.modal__text { font-size: 15px; margin: 0 0 16px; }
.modal__btns { display: flex; gap: 12px; justify-content: center; }
.btn--alt { background: var(--pink); box-shadow: 0 3px 0 #c97f8e; }
.modal__note { font-size: 11px; color: var(--ink-soft); margin: 14px 0 0; }

/* ---------- ゆれる広告バナー ---------- */
.camp-banner {
  position: fixed; right: 12px; bottom: 12px; z-index: 40;
  width: 230px; padding: 10px 14px 12px; text-align: center;
  background: #fff6a8; border: 3px dashed var(--pink); border-radius: 12px;
  font-size: 13px; line-height: 1.5; box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.camp-banner[hidden] { display: none; }
.camp-banner p { margin: 0; }
.camp-banner__big { font-size: 17px; font-weight: 900; color: var(--red); }
.camp-banner em { font-style: normal; background: linear-gradient(transparent 60%, var(--pink-l) 60%); }
.camp-banner__close { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #555; color: #fff; cursor: pointer; }

/* ---------- 画面の内側の手形 ---------- */
#handprints { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#handprints svg { position: absolute; opacity: 0; filter: blur(1.4px); mix-blend-mode: multiply; }
#handprints svg.on { opacity: 1; }

/* ---------- 崩壊フェーズ ---------- */
body.shake .page { animation: shake .12s steps(2) 1; }
@keyframes shake {
  0% { transform: translate(3px, -2px) skewX(1deg); filter: hue-rotate(40deg); }
  100% { transform: translate(-4px, 1px); }
}
body.locked { overflow: hidden; touch-action: none; }
body.corrupt .page { font-family: var(--mincho); }

/* 演出ステージ */
#stage { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; background: #050404; }
#stage.on { opacity: 1; pointer-events: auto; }
#swarm { position: absolute; inset: 0; width: 100%; height: 100%; }
#copies { position: absolute; inset: 0; overflow: hidden; }
#copies span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: var(--mincho); font-weight: 800; color: #e9e1d6;
  will-change: transform, opacity;
}
#center-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 640px); text-align: center;
  font-family: var(--mincho); font-weight: 800; color: #f1e9dd;
  font-size: clamp(20px, 5vw, 30px); line-height: 1.8; text-shadow: 0 0 18px rgba(255,255,255,.15);
}
#center-text p { margin: 0 0 .5em; }

/* 偽のブラウザダイアログ */
.osdialog { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding-top: 12vh; background: rgba(0,0,0,.2); }
.osdialog[hidden] { display: none; }
.osdialog__box {
  width: min(92vw, 440px); background: #fff; color: #202124; border-radius: 10px; padding: 20px 22px 16px;
  font-family: system-ui, "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif; font-size: 14px; line-height: 1.6;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
.osdialog__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.osdialog__msg { margin: 0 0 18px; white-space: pre-line; }
.osdialog__btns { display: flex; justify-content: flex-end; gap: 8px; }
.osdialog__btns button { font: inherit; border-radius: 18px; padding: 6px 16px; border: 1px solid #dadce0; background: #fff; color: #1a73e8; cursor: pointer; }
.osdialog__btns button.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }

/* 名簿ロール */
#roll {
  position: fixed; inset: 0; z-index: 85; display: none; overflow: hidden; background: #000;
  color: #d9d0c4; font-family: var(--mincho); font-size: 13px; line-height: 1.35; column-width: 9em; column-gap: 1.5em; padding: 10px 14px;
}
#roll.on { display: block; }
#roll .me { color: #ff4d4d; font-weight: 800; font-size: 2em; }

/* 閃光 */
#flash { position: fixed; inset: 0; z-index: 95; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash .5s steps(1, end) 1; }
@keyframes flash { 0% { opacity: 1; background: #fff; } 12% { opacity: 1; background: #000; } 24% { opacity: 1; background: #5a0000; } 40% { opacity: 1; background: #000; } 100% { opacity: 0; } }

/* トースト */
#toast {
  position: fixed; left: 50%; top: 18px; transform: translate(-50%, -140%); z-index: 92;
  background: #111; color: #eee; border-radius: 999px; padding: 8px 20px; font-size: 14px;
  pointer-events: none; max-width: calc(100vw - 32px); opacity: 0;
}
#toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- 合一後 ---------- */
body.after { --pink: #d88f9c; }
body.after .counter__num { color: #111; }
body.after .tagline { color: var(--red); }
body.after .logo { color: #2a2420; }
.post--new { background: linear-gradient(90deg, rgba(232,163,177,.12), transparent); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }
.post--new .post__title { border-left-color: var(--red); }
.me-name { color: var(--red); font-weight: 900; }

/* 深夜 */
body.late { --bg: #ece6d8; }

@media (prefers-reduced-motion: reduce) {
  .ticker__inner, .tanzaku span { animation: none; }
  body.shake .page { animation: none; }
}

/* 印刷すると、これだけ（解きの儀：三の鍵） */
@media print {
  body * { display: none !important; }
  body::after {
    content: "解きの儀　──　紙に だけ 写る 頁\A\A三の鍵　くつ だけが かえってきた 人。その 名の、読みの はじめ。\A\A四の鍵　本堂を 映す 赤い 光は、昔の 電信で 一文字だけ 打ちつづけている。和文で 読め。\A\A五の鍵の 在りかは、カメラが 目を つむって いる あいだに 映る。\A\A\A\A\A　　　　　　　　　　　　　　　　わたしたちは ひとつに なりました。あなたも。";
    white-space: pre-wrap; display: block; font: 500 17px/2 "Shippori Mincho B1", serif; margin: 18vh 10vw 0; color: #000;
  }
}
body.after .ink { color: rgba(140, 30, 30, .35); }
@media (max-width: 560px) {
  .camp-banner { width: 170px; font-size: 11px; right: 8px; bottom: 8px; }
  .camp-banner__big { font-size: 14px; }
}

/* =========================================================
   v2: 技術演出
   ========================================================= */
/* 全面のフィルム粒子 */
#grain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; mix-blend-mode: overlay; }

/* ページが溶ける（SVG フィルター） */
.page.melting { filter: url(#melt) saturate(calc(1 - var(--decay) * .85)) contrast(calc(1 + var(--decay) * .15)); }

/* 生きている写真 */
.livephoto {
  margin: 14px auto 18px; max-width: 520px; background: #fff; padding: 10px 10px 34px;
  box-shadow: 0 2px 8px rgba(0,0,0,.14); transform: rotate(.8deg); position: relative;
}
.livephoto canvas, .livephoto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #cfc6b4; object-fit: cover; }
.livephoto figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--hand); font-size: 14px; }
.livephoto canvas { position: absolute; left: 10px; top: 10px; width: calc(100% - 20px) !important; height: auto !important; }
.livephoto.lp-on img.plain { visibility: hidden; }
.livephoto--old { transform: rotate(-1.4deg); }
.livephoto--dark { background: #f3efe6; }

/* 新聞の網点 */
#clip-halftone { width: 100%; display: block; }

/* 監視カメラ */
.live-lead { text-align: center; margin-top: 0; }
.cctv {
  position: relative; aspect-ratio: 4 / 3; background: #050505; border-radius: 6px; overflow: hidden;
  border: 10px solid #2b2b2b; box-shadow: inset 0 0 40px #000, 0 4px 14px rgba(0,0,0,.3);
}
.cctv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cctv__kin { opacity: 0; }
.cctv__kin.on { opacity: 1; }
.cctv__lost { position: absolute; inset: auto 0 12px; margin: 0; text-align: center; color: #ddd; font-family: var(--dot); letter-spacing: .3em; z-index: 2; opacity: 0; pointer-events: none; }
.cctv__kin.on ~ .cctv__lost { opacity: .8; }
.live-note { text-align: center; }

/* 偽カーソル */
#ghosts { position: fixed; inset: 0; z-index: 97; pointer-events: none; }
.ghost-cursor { position: absolute; left: 0; top: 0; opacity: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); will-change: transform; }

/* 端からのぞく顔 */
#peek {
  position: fixed; z-index: 58; width: min(42vw, 280px); pointer-events: none; transform: translateX(120vw);
}
#peek[data-side="right"] { right: 0; }
#peek[data-side="left"] { left: 0; }
#peek img { width: 100%; display: block; filter: grayscale(1) brightness(.75) contrast(1.35); mask-image: radial-gradient(ellipse 60% 62% at 50% 46%, #000 55%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 46%, #000 55%, transparent 72%); }
#peek.noimg img { display: none; }
#peek.noimg::before { content: ""; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 48% 48% 44% 44%; background: radial-gradient(circle at 36% 42%, #eee 0 3%, transparent 3.5%), radial-gradient(circle at 64% 42%, #eee 0 3%, transparent 3.5%), #0e0c0b; }

/* クライマックスの WebGL 面 */
#stage canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#stage canvas.fx.on { opacity: 1; }
#stage .caption {
  position: absolute; left: 0; right: 0; bottom: 9vh; text-align: center; padding: 0 16px;
  font-family: var(--mincho); font-weight: 800; color: #efe6da; font-size: clamp(18px, 4.4vw, 26px);
  text-shadow: 0 0 12px #000, 0 0 2px #000; opacity: 0;
}
#stage .caption.on { opacity: 1; }
.osdialog__small { font-size: 11px; color: #5f6368; margin: -10px 0 14px; }

/* 合一記事の写真（あなたの顔） */
.post--new .selfie { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.3) brightness(.8); }

/* Tab キーで移動したときだけ見えるリンク（Welcome Home 方式） */
.tablink { color: transparent; text-decoration: none; font-size: 12px; letter-spacing: .4em; outline: none; }
.tablink:focus-visible { color: #8a1414; background: #111; padding: 2px 10px; border-radius: 3px; }
/* 紙の質感（明治の新聞紙面・古紙） */
.clip__paper { background-image: linear-gradient(rgba(239,233,216,.86), rgba(239,233,216,.86)), url(../assets/img/newsprint.webp); background-size: cover; }
.clip--ads .clip__paper, .notice { background-image: linear-gradient(rgba(246,241,226,.8), rgba(246,241,226,.8)), url(../assets/img/paper.webp); background-size: cover; }
.notice--warn { background-image: linear-gradient(rgba(253,240,238,.85), rgba(253,240,238,.85)), url(../assets/img/paper.webp); }
.credit-link a { color: var(--ink-soft); font-size: 11px; }

/* 入口の隠し文字（フッター） */
.ink--footer { font-size: 12px; height: auto; margin: 8px 0; letter-spacing: .1em; }
.draft { display: none !important; }

/* 閉鎖 */
body.closed { background: #fbf6ea; display: grid; place-items: center; min-height: 100vh; text-align: center; }
body.closed main { padding: 16px; }
body.closed p { margin: 0 0 .6em; font-size: 16px; }
body.closed .sub { font-size: 13px; color: var(--ink-soft); }

/* =========================================================
   v4: 文字で こわがらせる（映像・暗転・宇宙っぽさを やめた）
   ========================================================= */
/* 文字の砂嵐 */
.tstatic { overflow: hidden; }
.tstatic pre {
  position: absolute; inset: 0; margin: 0; white-space: pre; overflow: hidden;
  font: 400 var(--cell)/1 "MS Gothic", "Osaka-Mono", "Noto Sans Mono CJK JP", monospace; letter-spacing: 0;
}
.tstatic--paper { background: #ece4d0; }
.tstatic--paper .ts-noise { color: rgba(70, 55, 40, .32); }
.tstatic--paper .ts-face { color: #140a06; font-weight: 700; }
.tstatic--dark { background: #060505; }
.tstatic--dark .ts-noise { color: rgba(225, 215, 200, .26); }
.tstatic--dark .ts-face { color: #f3eadb; font-weight: 700; }
#tstage { position: fixed; inset: 0; z-index: 75; display: none; }
#tstage.on { display: block; }
.cctv__kin.tstatic { position: absolute; inset: 0; }

/* 取り憑かれた書き込み（ホームページの中に、直接） */
#possessed { margin: 26px 0; padding: 22px clamp(16px, 4vw, 34px); background: #fffdf7; border: 2px solid #3a0d0d; border-radius: 4px; overflow: hidden; }
#possessed p { margin: 0 0 .3em; font-family: var(--mincho); font-weight: 800; color: #1a0a08; line-height: 1.35; word-break: break-all; overflow-wrap: anywhere; }
#possessed p.red { color: #8a0000; }
#possessed p.wide { letter-spacing: .6em; }
#possessed p.tight { letter-spacing: -.2em; }

/* 画面に 増えていく 文字の破片 */
#bugs { position: fixed; inset: 0; z-index: 72; pointer-events: none; overflow: hidden; }
#bugs span { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--mincho); font-weight: 800; color: #1a0a08; line-height: 1; }
#bugs span.red { color: #8a0000; }
#bugs span.inv { background: #1a0a08; color: #ece4d0; padding: 0 .1em; }

/* 名簿をくだる */
#descent { max-width: 780px; margin: 0 auto; padding: 40px 16px 60vh; font-family: var(--mincho); color: #2a1f18; }
#descent h2 { font-size: 22px; text-align: center; margin: 0 0 6px; }
#descent .d-note { text-align: center; font-size: 13px; color: var(--ink-soft); margin: 0 0 40px; }
#descent .row { display: block; white-space: nowrap; overflow: visible; line-height: 1.15; transform-origin: left center; }
#descent .row b { font-weight: 800; }
#descent .row.me { color: #8a0000; text-align: center; font-size: 46px; margin: 40vh 0; white-space: normal; }
#descent-hint { position: fixed; right: 18px; bottom: 18px; z-index: 74; font: 800 28px var(--mincho); color: #8a0000; display: none; }
#descent-hint.on { display: block; animation: hintblink 1s steps(1) infinite; }
@keyframes hintblink { 50% { visibility: hidden; } }

/* さいごの 文字の 爆発 */
#burst { position: fixed; inset: 0; z-index: 96; display: none; overflow: hidden; background: #ece4d0; }
#burst.on { display: block; }
#burst span { position: absolute; white-space: nowrap; font-family: var(--mincho); font-weight: 800; line-height: .9; color: #140a06; }
#burst span.red { color: #8a0000; }

/* 実写の多重露光（同じ写真を ずらして 重ねる） */
.livephoto img.plain { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(.45) contrast(1.1) brightness(.92); }
.livephoto--ghost { overflow: hidden; }
.livephoto--ghost .ghostbox { position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); aspect-ratio: 4 / 3; overflow: hidden; pointer-events: none; }
.livephoto--ghost img.ghost {
  display: block; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply; opacity: .5; filter: sepia(.6) contrast(1.2) brightness(1.05);
}
/* 画面の内側の手形（実写を切り抜いた PNG） */
#handprints img { position: absolute; opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
#handprints img.on { opacity: .55; }

/* v6: のぞく顔はハードカット（滑らない） */
#peek { visibility: hidden; transition: none !important; }
#peek.out { visibility: visible; }

/* 好奇心で押させる場所（ふぁんしーあいらんど方式） */
.hotspot { position: absolute; cursor: pointer; z-index: 3; }
#jump { position: fixed; inset: 0; z-index: 99; display: none; background: #000; }
#jump.on { display: grid; place-items: center; }
#jump img { height: 108vh; width: auto; max-width: none; filter: grayscale(1) contrast(1.8) brightness(.95); transform: scale(1.15); }
#jump.shake img { animation: jumpshake .06s steps(2) infinite; }
@keyframes jumpshake { 0% { transform: scale(1.15) translate(-8px, 6px); } 100% { transform: scale(1.22) translate(10px, -6px); } }

/* 文字の破片は じっとしていない */
#bugs span { animation: bugjit var(--bj, .18s) steps(2) infinite; }
@keyframes bugjit { 0% { translate: 0 0; } 50% { translate: var(--bx, 3px) var(--by, -2px); } }
#possessed.jolt { animation: jolt .12s steps(2) 2; }
@keyframes jolt { 0% { transform: translate(-6px, 3px) skewX(-2deg); } 100% { transform: translate(7px, -4px) skewX(2deg); } }

/* たった一か所だけ おかしい */
.anomaly { color: inherit; }

/* スマホ：縦書きの 切り抜きが 横に はみ出して ページごと 縮むのを 防ぐ（中で 横に めくる） */
.clips > * { min-width: 0; }
@media (max-width: 640px) {
  .clip--main .clip__paper { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
}

/* ===== v7 ===== */
/* 黒い ページ（タイプライターの 直前から）。紙の 部品は 紙のまま */
body.dark {
  --bg: #0b0a09; --paper: #151311; --ink: #d9d0bf; --ink-soft: #8f8474; --line: #2c2723; --pink-l: #2b1519;
  color-scheme: dark;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 1.5px);
}
body.dark .photo, body.dark .photo--dark { background: #1c1a17; }
body.dark .comments { background: #0f0d0c; }
body.dark .notice { background: #17140f; border-color: #2c2723; }
body.dark .notice--warn { background: #1f1010; border-color: #4a1d1d; }
body.dark input, body.dark select, body.dark textarea { background: #0f0e0d; color: var(--ink); border-color: #2c2723; }
body.dark .clip__paper, body.dark .tanzaku span { filter: brightness(.82); }
body.dark .typed .caret { background: #d9d0bf; }
body.inv .page { filter: invert(1); }

/* 巻き戻しの 表示（VHS の オンスクリーン表示） */
#rew { position: fixed; left: 18px; top: 14px; z-index: 98000; font: 700 22px/1.2 var(--dot); color: #fff; text-shadow: 2px 0 #f00, -2px 0 #0ff; letter-spacing: .08em; pointer-events: none; }
#rew span { display: block; font-size: 16px; margin-top: 4px; }
#rewbars { position: fixed; inset: 0; z-index: 97990; pointer-events: none; }
#rewbars i { position: absolute; left: -40px; right: -40px; display: none; background: #fff; mix-blend-mode: difference; }

/* いちばん上に パッと 出る 名前 */
#possessed p.first { font-size: clamp(30px, 7vw, 54px); color: #8a0000; letter-spacing: .04em; }

/* 名簿：した へ 走る 矢印 */
#descent .d-note { font-size: 15px; color: #8a0000; font-weight: 800; margin-bottom: 10px; min-height: 1.6em; }
#descent .d-arrows { display: flex; flex-direction: column; align-items: center; margin: 0 0 30px; color: #8a0000; font-size: 22px; line-height: .9; }
#descent .d-arrows i { font-style: normal; animation: arrowrun .36s steps(1) infinite; }
#descent .d-arrows i:nth-child(2) { animation-delay: .12s; }
#descent .d-arrows i:nth-child(3) { animation-delay: .24s; }
@keyframes arrowrun { 0% { opacity: 1; transform: translateY(0); } 33% { opacity: .15; transform: translateY(6px); } 66% { opacity: .15; } }
#descent-hint.on { animation: hintrun .3s steps(2) infinite; font-size: 40px; }
@keyframes hintrun { 0% { transform: translateY(0); } 100% { transform: translateY(14px); } }

/* 画面に 入るとき：上から 走査線のように 現れる（フェードではない） */
.reveal.in { animation: scanin .3s steps(7) both; }
@keyframes scanin { 0% { clip-path: inset(0 0 100% 0); } 85% { clip-path: inset(0 0 0 0); transform: translateX(3px); } 100% { clip-path: inset(0 0 0 0); transform: none; } }
@media print { .reveal { clip-path: none !important; animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } }

/* サイドの 偽広告（ふつうの ブログ広告に 見える） */
.ad-rail { position: fixed; top: 92px; width: 196px; max-height: calc(100vh - 230px); overflow: hidden; z-index: 50; display: flex; flex-direction: column; gap: 18px; }
.ad-rail--l { left: max(8px, calc(50% - 374px - 18px - 196px)); }
.ad-rail--r { right: max(8px, calc(50% - 374px - 18px - 196px)); }
.ad { position: relative; background: #fff; border: 1px solid #e3dccb; border-radius: 10px; padding: 8px 10px 12px; box-shadow: 0 2px 0 #e9e1cf; font-family: var(--round); color: #3d352d; text-align: center; overflow: hidden; }
.ad__tag { position: absolute; left: 6px; top: 5px; z-index: 1; font: 700 9px/1 system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.45); padding: 2px 4px; border-radius: 3px; }
.ad__x { position: absolute; right: 4px; top: 4px; z-index: 1; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 12px; line-height: 18px; padding: 0; cursor: pointer; }
.ad__img { display: block; width: calc(100% + 20px); margin: -8px -10px 8px; aspect-ratio: 6 / 5; object-fit: cover; }
.ad__head { margin: 0 0 4px; font-weight: 800; font-size: 14px; line-height: 1.45; color: #b23a52; }
.ad__sub { margin: 0 0 8px; font-size: 11.5px; line-height: 1.5; color: #6d6155; }
.ad__cta { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: #f0a437; border-radius: 99px; padding: 4px 14px; box-shadow: 0 2px 0 #c97f1f; }
.ad--inline { max-width: 320px; margin: 18px auto; }
.ad--inline .ad__img { aspect-ratio: 16 / 9; }
.ad.jolt { animation: jolt .12s steps(2) 2; }
body.ads-wrong .ad[data-k="2"] .ad__head { color: #8a0000; }
body.turning .ad-rail, body.turning .ad { display: none; }
@media print { .ad, .ad-rail { display: none !important; } }

/* ===== v7 レビュー修正 ===== */
/* スマホで 揺れ・長い行が はみ出して ページごと 縮むのを 防ぐ（clip は スクロール箱を 作らないので sticky は 壊れない） */
html { overflow-x: clip; }
#descent { overflow-x: clip; contain: paint; }
#descent .d-rows { contain: layout paint; }
/* 黒い ページでは 広告も 暗く（タイプライターの 文字より 目立たない ように） */
body.dark .ad-rail, body.dark .ad--inline { filter: brightness(.5) saturate(.5); }
body.dark .camp-banner { filter: brightness(.6); }
/* 生の タイプライター：大きく、点滅する カーソル */
#last-post { font-size: clamp(18px, 2.6vw, 22px); line-height: 1.9; }
#last-post p:last-child::after { content: ''; display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; animation: blink .8s steps(1) infinite; }
body.dark #last-post { color: #efe6d4; }

/* 紋（家紋の 画像を マスクにして 色で 染める。SVG は 使わない） */
.mon { display: block; background: currentColor; -webkit-mask: url(../assets/img/mon_janome.png) center / contain no-repeat; mask: url(../assets/img/mon_janome.png) center / contain no-repeat; }
.mon--main { -webkit-mask-image: url(../assets/img/mon_hitotsubiki.png); mask-image: url(../assets/img/mon_hitotsubiki.png); }
.logo { position: relative; }
.logo .mon--main { position: absolute; inset: 0; }
#logo-ring { position: absolute; inset: 0; }
#logo-ring .mon--dot { position: absolute; left: 43%; top: 43%; width: 14%; height: 14%; transition: none; }
.modal__logo.mon { margin: 0 auto 8px; }

@media (max-width: 440px) { .hd__kana { letter-spacing: .1em; font-size: 11px; white-space: nowrap; } }

/* 隠しページへの 入口（見た目は ただの 判子と 番号） */
#news .h2 { position: relative; }
.kaiho-stamp { position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: 9px; line-height: 1.25; letter-spacing: .05em;
  color: rgba(150, 40, 30, .55); border: 1.5px solid rgba(150, 40, 30, .45); border-radius: 50%; padding: 7px 5px; text-align: center; cursor: default; user-select: none; -webkit-user-select: none; }
#tel-4812 { cursor: default; user-select: none; -webkit-user-select: none; }

/* ---------- v3 追加 ---------- */
.btn--join:disabled { background: #d9d2cc; box-shadow: 0 3px 0 #bdb5ae; color: #9a928b; cursor: not-allowed; }
.btn--join:disabled:active { transform: none; }
.form select:invalid { color: var(--ink-soft); }
/* さみしかった ときの こと：大きく ひろげると、空白に 小さな リンクが 現れる */
.lonely { position: relative; display: block; }
.lonely textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5em; }
.lonely__link { position: absolute; left: 12px; bottom: 10px; font-size: 10px; font-weight: 400; color: #a89d92; text-decoration: none; letter-spacing: .08em; visibility: hidden; pointer-events: none; }
.lonely.wide .lonely__link { visibility: visible; pointer-events: auto; }
/* 電話番号の 4812 だけ、ほんの少し ちがう */
#tel-4812 { color: #5c3b3b; font-weight: 700; letter-spacing: .04em; text-shadow: .4px 0 0 rgba(120,30,30,.55); }
/* 素材ページへ行く前の ひとこと */
.nopop { position: fixed; inset: 0; z-index: 99995; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.nopop__box { background: #fff; color: #333; border-radius: 12px; padding: 20px 22px; width: min(320px, 100%); text-align: center; font-size: 14px; line-height: 1.7; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.nopop__box p { margin: 0 0 14px; }
.nopop__btns { display: flex; gap: 10px; justify-content: center; }
.nopop__btns a, .nopop__btns button { font: inherit; font-size: 13px; border: 1px solid #bbb; background: #f4f4f4; color: #333; border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.nopop__btns a { background: #333; color: #fff; border-color: #333; }

.ad { cursor: pointer; }