/* この町で1年：窓の1年（/ichinen/）。窓から町の1年をながめる。見本「窓の1年」第7版（2026年10月、ひろさんと決定）をサイトに入れたもの。
   絵はすべて canvas で描くイメージで、その町の写真ではない。ほかのページに効かないよう、すべて .mado の中だけに効かせる */
/* 窓の1年：移住先カルテの「紙の書類」の世界に合わせた、切り絵の窓。生成り・墨・朱に季節の色を足す（1つの見た目に決めた単一テーマ） */
.mado{
  --paper:#F3EFE7; --card:#FFFCF3; --ink:#23302F; --ink2:#4A5657; --pen:#C0463A; --teal:#2E6E73; --line:#D9CFBC;
  --f-head:"Kaisei Tokumin","Hiragino Mincho ProN","Yu Mincho",serif; --f-body:"BIZ UDPGothic","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:light;
}
.mado{background:var(--paper);color:var(--ink);font-family:var(--f-body)}
.mado{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.mado .top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.mado .top h1{font-family:var(--f-head);font-weight:800;font-size:28px;margin:0;text-wrap:balance}
.mado .top p{margin:0;color:var(--ink2);font-size:13px}
.mado .towns{display:flex;flex-wrap:wrap;gap:6px}
.mado .towns button{font:inherit;font-size:14px;padding:6px 12px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer}
.mado .towns button[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.mado .stage{position:relative;background:var(--card);border:1.5px solid var(--ink);box-shadow:4px 5px 0 rgba(35,48,47,.16);padding:12px}
.mado .hud{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:0 2px 8px}
.mado .hud .date{font-family:var(--f-head);font-weight:800;font-size:26px;font-variant-numeric:tabular-nums}
.mado .hud .date small{font-family:var(--f-body);font-weight:400;font-size:13px;color:var(--ink2);margin-left:8px}
.mado .hud .meta{display:flex;gap:12px;font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.mado .hud .meta b{color:var(--ink);font-size:15px}
.mado .win{position:relative;width:100%;aspect-ratio:4/3;max-width:100%;background:#cfd8d6;overflow:hidden}
.mado canvas{display:block;width:100%;height:100%}
.mado .cap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(88%,520px);background:rgba(255,252,243,.96);border:1.5px solid var(--ink);padding:10px 14px;font-size:15px;line-height:1.7;box-shadow:3px 4px 0 rgba(35,48,47,.18);transition:opacity .3s}
.mado .cap .k{display:inline-block;font-size:11.5px;font-weight:700;color:var(--pen);border:1.5px solid var(--pen);padding:0 6px;margin-right:6px;transform:rotate(-2deg)}
.mado .cap.choice{bottom:50%;transform:translate(-50%,50%)}
.mado .cap .opts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.mado .cap .opts button{font:inherit;font-size:14.5px;text-align:left;padding:8px 12px;border:1.5px solid var(--teal);background:var(--card);color:var(--teal);font-weight:700;cursor:pointer}
.mado .cap .opts button:hover,.mado .cap .opts button:focus-visible{background:var(--teal);color:#fff;outline:none}
.mado .ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:10px}
.mado .ctrl button{font:inherit;font-size:14px;font-weight:700;padding:8px 14px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer}
.mado .ctrl button.main{background:var(--pen);border-color:var(--pen);color:#fff;min-width:7.5em}
.mado .ctrl button[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.mado .ctrl label{font-size:13.5px;display:flex;align-items:center;gap:4px;color:var(--ink2)}
.mado .bar{height:6px;background:var(--line);margin-top:10px;position:relative}
.mado .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0}
.mado .bar .mk{position:absolute;top:-3px;width:2px;height:12px;background:var(--ink2)}
.mado .months{display:flex;justify-content:space-between;font-size:11px;color:var(--ink2);margin-top:3px}
.mado .side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mado .box{background:var(--card);border:1.5px solid var(--ink);padding:12px 14px;min-width:0}
.mado .box h2{font-family:var(--f-head);font-size:16px;margin:0 0 6px}
.mado .box ul{margin:0;padding-left:1.2em;font-size:14px;line-height:1.75}
.mado .box .none{color:var(--ink2);font-size:13.5px;margin:0}
.mado .note{font-size:12.5px;color:var(--ink2);line-height:1.8;margin:0}
.mado button:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
/* ===== 第3版：町の動き・大げさなごほうび・絵で見せる ===== */
.mado svg{display:block;width:100%;height:100%}
.mado .hud .date small.wd{margin-left:6px;font-size:14px;color:var(--ink)}
.mado .hud .date small.wd.h{color:var(--pen);font-weight:700}
.mado .hcount{display:flex;align-items:center;gap:6px;font-family:var(--f-head);font-weight:800;font-size:20px;color:var(--pen)}
.mado .hcount i{width:30px;height:30px;border-radius:50%;border:3px double var(--pen);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;transform:rotate(-10deg)}
.mado .hcount.bump{animation:bump .6s cubic-bezier(.2,2,.4,1)}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.6)}100%{transform:scale(1)}}
.mado .win canvas{position:absolute;inset:0;transition:transform 1.4s ease}
.mado #fx{pointer-events:none;transition:none}
.mado .win.cam #cv{transform:scale(1.07) translateY(1.5%)}
.mado .win.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-7px,3px) rotate(-.6deg)}40%{transform:translate(6px,-4px) rotate(.5deg)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.mado .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.mado .flash.on{animation:fl .5s ease-out}
@keyframes fl{0%{opacity:.9}100%{opacity:0}}
/* はんこ（大きく押す） */
.mado .pop{position:absolute;left:50%;top:44%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;border:6px double var(--pen);background:rgba(255,252,243,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;opacity:0;color:var(--pen);font-family:var(--f-head);font-weight:800;font-size:19px;text-align:center}
.mado .pop .pi{width:82px;height:82px}
.mado .pop.rare{border-color:#C99A2E;box-shadow:0 0 0 6px rgba(217,161,59,.35),0 0 40px 10px rgba(255,214,120,.7);color:#8A5E10}
.mado .pop .rb{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-4deg);background:#C99A2E;color:#fff;font-size:14px;padding:3px 12px;white-space:nowrap;font-family:var(--f-body);font-weight:700;letter-spacing:.06em}
.mado .pop.on{animation:stamp 2.1s cubic-bezier(.2,1.6,.4,1) forwards}
.mado .pop.rare.on{animation:stamp 2.8s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{0%{opacity:0;transform:scale(3) rotate(-35deg)}14%{opacity:1;transform:scale(.88) rotate(-8deg)}22%{transform:scale(1.06) rotate(-10deg)}75%{opacity:1;transform:scale(1) rotate(-10deg)}100%{opacity:0;transform:scale(.25) rotate(-10deg) translate(0,900px)}}
.mado .banner{position:absolute;left:0;right:0;top:16%;background:var(--pen);color:#fff;text-align:center;font-family:var(--f-head);font-weight:800;font-size:30px;padding:10px 0;pointer-events:none;opacity:0;letter-spacing:.06em;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.mado .banner.on{animation:bn 2.2s ease forwards}
@keyframes bn{0%{opacity:0;transform:translateX(-100%) skewX(-12deg)}15%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateX(100%) skewX(12deg)}}
/* 出来事のカード（絵＋短い言葉） */
.mado .cap{position:absolute;left:12px;top:12px;bottom:auto;transform:none;width:auto;font-size:14px;line-height:1.5;display:flex;align-items:center;gap:10px;background:rgba(255,252,243,.97);border:1.5px solid var(--ink);padding:8px 14px 8px 8px;box-shadow:3px 4px 0 rgba(35,48,47,.2);max-width:calc(100% - 24px);animation:capin .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes capin{from{opacity:0;transform:translateX(-40px) rotate(-3deg)}to{opacity:1}}
.mado .cap .ci{width:52px;height:52px;flex:0 0 auto}
.mado .cap b{display:block;font-family:var(--f-head);font-weight:800;font-size:19px;line-height:1.25}
.mado .cap small{display:block;font-size:12.5px;color:var(--ink2)}
.mado .cap .big{font-family:var(--f-head);font-weight:800;font-size:30px;color:var(--pen);margin-left:6px;white-space:nowrap}
.mado .cap .skp{position:absolute;right:6px;bottom:-18px;font-size:10.5px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap}
.mado .win.ch .skp{display:none}
.mado .cap .tag{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--pen);padding:0 6px;margin-bottom:2px}
/* 分かれ道：絵のカード */
.mado .choice{position:absolute;inset:0;background:rgba(35,48,47,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;gap:10px;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.mado .choice h3{margin:0;background:var(--card);border:1.5px solid var(--ink);padding:4px 14px;font-family:var(--f-head);font-weight:800;font-size:20px;display:flex;gap:8px;align-items:baseline}
.mado .choice h3 small{font-family:var(--f-body);font-weight:700;font-size:12px;color:var(--pen)}
.mado .cards{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px;width:min(100%,640px)}
.mado .cards button{font:inherit;background:var(--card);border:2px solid var(--ink);padding:10px 6px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:3px 4px 0 rgba(0,0,0,.25);animation:deal .5s cubic-bezier(.2,1.5,.4,1) both;transition:transform .15s}
.mado .cards button:nth-child(2){animation-delay:.08s}.mado .cards button:nth-child(3){animation-delay:.16s}.mado .cards button:nth-child(4){animation-delay:.24s}
@keyframes deal{from{opacity:0;transform:translateY(60px) rotate(8deg)}}
.mado .cards button:hover,.mado .cards button:focus-visible{transform:translateY(-6px) rotate(-1.5deg);outline:none;border-color:var(--pen)}
.mado .cards button.chosen{animation:chosen .5s forwards}
.mado .cards button.gone{animation:gone .35s forwards}
@keyframes chosen{50%{transform:scale(1.15)}100%{transform:scale(1.15);opacity:0}}
@keyframes gone{to{opacity:0;transform:translateY(40px)}}
.mado .cards .bi{width:64px;height:64px}
.mado .cards b{font-size:14.5px;line-height:1.3;text-align:center}
.mado .cards i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink2);border:1px solid var(--line);padding:0 5px}
.mado .cards .new{font-size:10.5px;font-weight:700;color:#fff;background:#C99A2E;padding:0 5px}
/* 長い名前（「吉野熊野国立公園の紅葉」「観光旅行をやってみる」）がカードの外にはみ出さないように（2026年10月25日）。
   言葉の切れ目（wbr.js）で折れないときだけ、字のあいだで折り返す。カードやその中の字の列が、中身に押し広げられないようにする */
.mado .cards button{min-width:0}
.mado .cards b,.mado .cards i,.mado .choice h3{min-width:0;max-width:100%;overflow-wrap:anywhere}
/* とても狭い画面（360px以下）では、絵を字の上に小さく置いて、字の幅を広くとる */
@media (max-width:360px){.mado .sheet .choice .cards button{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.mado .sheet .choice .cards .bi{width:26px;height:26px}}  /* 下の 560px の決まりより強くするため .choice を足している */
/* えらんだ場面（大きな絵） */
.mado .vig{position:absolute;left:50%;top:50%;width:min(76%,380px);transform:translate(-50%,-50%);background:var(--card);border:2px solid var(--ink);box-shadow:5px 6px 0 rgba(0,0,0,.25);padding:14px;text-align:center;animation:vig .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes vig{from{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-10deg)}}
.mado .vig .vi{width:120px;height:120px;margin:0 auto;animation:float 1.6s ease-in-out infinite alternate}
@keyframes float{to{transform:translateY(-8px) rotate(3deg)}}
.mado .vig b{display:block;font-family:var(--f-head);font-weight:800;font-size:22px;margin-top:4px}
.mado .vig small{display:block;font-size:13px;color:var(--ink2)}
.mado .vig .then{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:#fff;background:#C99A2E;padding:2px 10px;animation:bump .8s .5s both}
/* 下の箱 */
.mado .stamps{display:flex;flex-wrap:wrap;gap:24px 12px;padding-bottom:6px}
.mado .stamps span{position:relative;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px dashed var(--line);color:var(--line);font-family:var(--f-head);font-weight:800;font-size:20px}
.mado .stamps span svg{width:36px;height:36px}
.mado .stamps span.got{border:3px double var(--pen);transform:rotate(-8deg);background:#FFF6EE}
.mado .stamps span.rare.got{border-color:#C99A2E;background:#FFF4D9;box-shadow:0 0 0 3px rgba(217,161,59,.25)}
.mado .stamps span.new{animation:nw .7s cubic-bezier(.2,1.8,.4,1)}
@keyframes nw{from{transform:scale(2.2) rotate(-30deg)}to{transform:scale(1) rotate(-8deg)}}
.mado .stamps span.old{border:2px solid #E3B9B3;opacity:.45;transform:rotate(-8deg)}
.mado .stamps span em{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--f-body);font-size:9.5px;color:var(--ink2);white-space:nowrap;font-weight:400}
.mado .album{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px}
.mado .album figure{margin:0;flex:0 0 auto;background:#fff;padding:5px 5px 18px;box-shadow:2px 3px 0 rgba(35,48,47,.18);transform:rotate(var(--r,0deg));position:relative;animation:ph .5s ease-out}
.mado .album figure.good::after{content:"★";position:absolute;top:-8px;right:-6px;color:#C99A2E;font-size:18px}
.mado .album img{display:block;width:112px;height:84px;object-fit:cover}
.mado .album figcaption{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:10.5px;color:var(--ink2)}
@keyframes ph{from{opacity:0;transform:translateY(-30px) rotate(0) scale(1.3)}}
.mado .icons,.mado ul.icons{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.mado .icons li,.mado ul.icons li{display:flex;flex-direction:column;align-items:center;width:62px;font-size:10.5px;color:var(--ink2);text-align:center;line-height:1.3}
.mado .icons li span{width:44px;height:44px;margin-bottom:2px}
.mado .snap.glow{background:#F6E3A8!important;animation:gl .7s ease-in-out infinite alternate}
@keyframes gl{from{box-shadow:0 0 0 0 rgba(192,70,58,0)}to{box-shadow:0 0 0 7px rgba(192,70,58,.4)}}
/* はじめるボタン */
.mado .startov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(35,48,47,.35);z-index:5}
.mado .startov[hidden]{display:none}
.mado .startov button{font:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:2px solid var(--ink);box-shadow:5px 6px 0 rgba(0,0,0,.3);padding:20px 34px 16px;cursor:pointer;animation:goin .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes goin{from{opacity:0;transform:scale(.6)}}
.mado .startov .tri{width:74px;height:74px;border-radius:50%;background:var(--pen);position:relative;animation:pulse 1.2s ease-in-out infinite}
.mado .startov .tri::after{content:"";position:absolute;left:29px;top:21px;border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(192,70,58,.2)}}
.mado .startov b{font-family:var(--f-head);font-weight:800;font-size:26px}
.mado .startov small{font-size:13px;color:var(--ink2)}
.mado .startov button:hover .tri,.mado .startov button:focus-visible .tri{transform:scale(1.06)}
/* シャッター */
.mado .shutter{position:absolute;right:14px;bottom:14px;width:68px;height:68px;border-radius:50%;border:4px solid #fff;background:rgba(35,48,47,.55);box-shadow:0 3px 8px rgba(0,0,0,.35);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:3}
.mado .shutter .lens{width:44px;height:44px;border-radius:50%;background:#fff;transition:transform .1s}
.mado .shutter:hover .lens{transform:scale(.92)}
.mado .shutter.click .lens{animation:sht .25s}
@keyframes sht{50%{transform:scale(.7)}}
.mado .shutter b{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--pen);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.mado .shutter.glow{border-color:#E7B44C;animation:gl .7s ease-in-out infinite alternate}
.mado .shutter.glow .lens{background:#FFE7A8}
.mado .fly{position:absolute;right:20px;bottom:20px;width:30%;border:5px solid #fff;box-shadow:2px 3px 0 rgba(0,0,0,.25);pointer-events:none;animation:fly .9s ease-in forwards;z-index:4}
@keyframes fly{0%{transform:scale(1.6) rotate(-4deg);opacity:1;right:35%;bottom:30%}60%{transform:scale(1) rotate(3deg);opacity:1}100%{transform:translateY(260px) scale(.3);opacity:0}}
/* まとめ */
.mado .sum{display:flex;flex-direction:column;gap:14px}
.mado .s-card{background:var(--card);border:1.5px solid var(--ink);box-shadow:3px 4px 0 rgba(35,48,47,.14);padding:14px 16px}
.mado .s-card h2{font-family:var(--f-head);font-weight:800;font-size:20px;margin:0 0 10px}
.mado .s-card h3{font-family:var(--f-head);font-weight:800;font-size:16px;margin:16px 0 8px}
.mado .hgwrap img{display:block;width:100%;border:1px solid var(--line);box-shadow:3px 4px 0 rgba(35,48,47,.18)}
.mado .hgwrap img:not([src]){display:none}
.mado .ic-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.mado .ic-btns a{font-size:14px;font-weight:700;padding:9px 14px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);text-decoration:none}
.mado .ic-btns .btn-x{background:#23302F;color:#fff}
.mado .cal{overflow-x:auto}
.mado .leg{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:6px 0 0;padding:0;font-size:12.5px;color:var(--ink2)}
.mado .leg i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:1px solid rgba(35,48,47,.3)}
.mado .leg i.ring{background:none;border:2.5px solid var(--pen)}
.mado .facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:14px}
.mado .facts div{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--line);padding:8px 6px;background:#FBF6EA}
.mado .facts span{width:34px;height:34px}
.mado .facts b{font-family:var(--f-head);font-weight:800;font-size:24px;color:var(--pen);line-height:1.2;margin-top:4px}
.mado .facts small{font-size:11.5px;color:var(--ink2);line-height:1.4}
.mado .town3{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mado .town3 li{display:flex;align-items:center;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.mado .town3 span{width:40px;height:40px;flex:0 0 auto}
.mado .town3 small{display:block;font-size:11.5px;color:var(--ink2)}
.mado .town3 b{font-size:15.5px}
.mado .axbar{display:flex;height:18px;border:1.5px solid var(--ink)}
.mado .film{display:flex;gap:6px;overflow-x:auto;background:#23302F;padding:10px 8px;border-top:6px dotted #FFFCF3;border-bottom:6px dotted #FFFCF3}
.mado .film figure{margin:0;flex:0 0 auto;position:relative}
.mado .film img{display:block;width:120px;height:90px;object-fit:cover}
.mado .film figcaption{color:#fff;font-size:11px;text-align:center}
.mado .film figure.good::after{content:"★";position:absolute;top:2px;right:4px;color:#E7B44C}
.mado .miss2{font-size:13px;color:var(--ink);background:#FFF4D9;border:1.5px dashed #C99A2E;padding:6px 10px;margin:22px 0 8px}
.mado .bt2{display:flex;flex-wrap:wrap;gap:8px}
.mado .bt2 button{font:inherit;font-size:14.5px;font-weight:700;padding:9px 14px;border:1.5px solid var(--ink);background:var(--card);cursor:pointer}
.mado .bt2 button.main{background:var(--pen);border-color:var(--pen);color:#fff}
.mado .next2{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mado .next2 a{display:inline-block;padding:10px 16px;background:#2E6E73;color:#fff;font-weight:700;text-decoration:none}
.mado .adph{margin-top:12px;border:1.5px dashed var(--line);padding:14px;font-size:12.5px;color:var(--ink2);text-align:center}
@media (max-width:560px){.mado .shutter{width:56px;height:56px;right:10px;bottom:10px}.mado .shutter .lens{width:36px;height:36px}}
/* 結末の発表 */
.mado .end[hidden]{display:none}
.mado .end{position:absolute;inset:0;background:rgba(20,28,30,.72);display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}
.mado .roll{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-family:var(--f-head);font-weight:800;font-size:22px}
.mado .roll .ri{width:130px;height:130px;border-radius:50%;background:var(--card);border:6px double var(--pen);padding:18px;box-sizing:border-box}
.mado .endc{background:var(--card);border:1.5px solid var(--ink);box-shadow:4px 5px 0 rgba(0,0,0,.3);padding:16px 18px;width:min(100%,540px);max-height:100%;overflow:auto;animation:flip .8s cubic-bezier(.2,1.3,.4,1);text-align:center}
@keyframes flip{from{opacity:0;transform:perspective(800px) rotateY(90deg) scale(.6)}}
.mado .endc .kk{margin:0;font-size:12px;font-weight:700;color:var(--pen);letter-spacing:.1em}
.mado .medal{width:120px;height:120px;margin:6px auto;border-radius:50%;background:#FFF4D9;border:6px double #C99A2E;padding:16px;box-sizing:border-box;box-shadow:0 0 30px 6px rgba(255,214,120,.6);animation:spin 1s cubic-bezier(.2,1.4,.4,1)}
@keyframes spin{from{transform:rotate(-200deg) scale(.3)}}
.mado .endc h2{font-family:var(--f-head);font-weight:800;font-size:26px;margin:2px 0;line-height:1.3}
.mado .endc h2 em{font-style:normal;color:var(--pen)}
.mado .endc .sub{margin:2px 0 8px;font-size:13.5px;color:var(--ink2)}
.mado .nums{display:flex;justify-content:center;gap:18px;margin:6px 0}
.mado .nums div{display:flex;flex-direction:column;align-items:center;font-size:11.5px;color:var(--ink2)}
.mado .nums b{font-family:var(--f-head);font-size:34px;color:var(--pen);line-height:1.1}
.mado .endc .ph{display:flex;gap:6px;margin:8px 0}
.mado .endc .ph img{box-sizing:border-box;min-width:0;width:32%;aspect-ratio:4/3;object-fit:cover;border:4px solid #fff;box-shadow:1px 2px 0 rgba(0,0,0,.2)}
.mado .endc .icons{justify-content:center;margin:6px 0}
.mado .endc .miss2{font-size:13px;color:var(--ink);background:#FFF4D9;border:1.5px dashed #C99A2E;padding:6px 10px;margin:8px 0}
.mado .endc .bt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.mado .endc .bt button{font:inherit;font-size:14.5px;font-weight:700;padding:9px 14px;border:1.5px solid var(--ink);background:var(--card);cursor:pointer}
.mado .endc .bt button.main{background:var(--pen);border-color:var(--pen);color:#fff;animation:gl .8s ease-in-out infinite alternate}
.mado .miss{font-size:12.5px;color:var(--ink2)}
@media (max-width:560px){
  .mado .side{grid-template-columns:1fr}.mado .hud .date{font-size:22px}.mado .win{aspect-ratio:4/5}
  .mado .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mado .cards .bi{width:48px;height:48px}.mado .cards b{font-size:13.5px}
  .mado .cap .ci{width:42px;height:42px}.mado .cap b{font-size:16px}.mado .cap .big{font-size:24px}
  .mado .pop{width:150px;height:150px;margin:-75px 0 0 -75px;font-size:16px}.mado .pop .pi{width:62px;height:62px}
  .mado .banner{font-size:22px}.mado .end{position:fixed;z-index:10}.mado .endc h2{font-size:21px}
  .mado .stamps span{width:50px;height:50px}.mado .stamps span svg{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){.mado *{animation-duration:.01s!important;animation-iteration-count:1!important}.mado .win canvas{transition:none}}
.mado .ans{background:var(--card);border:1.5px solid var(--ink);padding:8px 12px}
.mado .ans summary{cursor:pointer;font-weight:700;font-size:15px}
.mado .ans summary small{font-weight:400;color:var(--ink2);margin-left:6px}
.mado .ans .aq{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.mado .ans .aq>b{font-size:13px}.mado .ans .aq>b small{font-weight:400;color:var(--ink2)}
.mado .ans .aq>div{display:flex;flex-wrap:wrap;gap:5px}
.mado .ans button{font:inherit;font-size:13px;padding:4px 10px;border:1.5px solid var(--teal);background:var(--card);color:var(--teal);cursor:pointer}
.mado .ans button[aria-pressed="true"]{background:var(--teal);color:#fff}
.mado .ans .bt3{display:flex;gap:8px;flex-wrap:wrap}.mado .ans .bt3 button{border-color:var(--ink);color:var(--ink);font-weight:700}
.mado .ppop{position:absolute;right:12px;bottom:84px;max-width:min(70%,320px);background:rgba(255,252,243,.97);border:1.5px solid var(--ink);padding:8px 12px;box-shadow:3px 4px 0 rgba(35,48,47,.2);display:flex;flex-direction:column;gap:2px;pointer-events:none;opacity:0;transform:translateY(10px) rotate(-1.5deg)}
.mado .ppop .st{color:#C99A2E;font-size:18px;letter-spacing:2px}.mado .ppop .st i{font-style:normal;color:#D9CFBC}
.mado .ppop b{font-family:var(--f-head);font-size:16px;line-height:1.4}
.mado .ppop em{font-style:normal;font-size:12.5px;font-weight:700;color:#fff;background:var(--pen);align-self:flex-start;padding:1px 8px}
.mado .ppop.s3{border-color:#C99A2E;box-shadow:0 0 0 4px rgba(217,161,59,.35),0 0 30px 6px rgba(255,214,120,.6)}
.mado .ppop.on{animation:ppop 3.2s ease forwards}
@keyframes ppop{0%{opacity:0;transform:translateY(14px) rotate(-1.5deg)}10%{opacity:1;transform:translateY(0) rotate(-1.5deg)}82%{opacity:1}100%{opacity:0;transform:translateY(-6px) rotate(-1.5deg)}}
.mado .album figcaption .st,.mado .film figcaption{color:inherit}.mado .album figcaption .st{color:#C99A2E;margin-right:4px}
.mado .album figure{padding:5px 5px 6px;width:122px}.mado .album figcaption{position:static;text-align:left;line-height:1.35;margin-top:3px;font-size:10.5px;color:var(--ink)}
.mado .album figcaption small{display:block;font-size:10px;color:var(--ink2)}
.mado .sum.hl>section:first-child,.mado #sum.hl>section:first-child{animation:hl 1.6s ease}
@keyframes hl{0%{box-shadow:0 0 0 6px rgba(217,161,59,.7)}100%{box-shadow:0 0 0 0 rgba(217,161,59,0)}}
.mado .shutter.off{opacity:0;pointer-events:none}
.mado .junbi[hidden]{display:none}
.mado .sum[hidden]{display:none}
.mado[hidden]{display:none}
.mado .mh{font-family:var(--f-head);font-weight:800;font-size:30px;margin:6px 0 0;line-height:1.25}
.mado .mh small{display:block;font-size:14px;color:var(--pen);letter-spacing:.08em;font-family:var(--f-body);font-weight:700}
.mado .mlead{margin:0;color:var(--ink2);font-size:14px;line-height:1.8}
.mado .towns{align-items:center}.mado .towns .tl{font-size:13px;color:var(--ink2)}
.mado .towns small{font-size:11px;opacity:.75;margin-left:4px}
.mado .vig .nbi{display:block;width:min(240px,62%);height:auto;margin:0 auto 6px;border:1.5px solid var(--ink)}
.mado .ctrl #snd{margin-left:auto}
.mado .ic-btns button{font:inherit;font-size:14px;font-weight:700;padding:9px 14px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer}
/* ミニゲームの前のタイトル（メイド イン ワリオのように）。タイトルからミニゲームの結果までは、行事のカードを隠して窓をミニゲームだけにする */
.mado .cmd{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;text-align:center;pointer-events:none;animation:cmd 1.1s ease forwards}
.mado .cmd small{display:block;font-size:15px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.mado .cmd b{display:block;font-family:var(--f-head);font-weight:800;font-size:56px;line-height:1.15;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--pen);white-space:nowrap}
@keyframes cmd{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}15%{opacity:1;transform:translate(-50%,-50%) scale(.92)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.mado .win.game .cap{opacity:0;pointer-events:none;transition:opacity .2s}
@media (max-width:560px){.mado .cmd b{font-size:44px}.mado .cmd small{font-size:13px}}
@media (prefers-reduced-motion:reduce){.mado .cmd{animation:none}}
/* ===== 窓の3年（?nen=3）：数の帯、下からせり上がる選択肢、年のおわり（DESIGN.md §54） ===== */
.mado .hud .date small.yr{font-family:var(--f-body);font-size:13px;font-weight:700;color:#fff;background:var(--ink);padding:1px 7px;margin:0 8px 0 0;vertical-align:middle}
@keyframes flup{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.mado .sheet{background:var(--paper);border:1.5px solid var(--ink);border-top:0;padding:10px;animation:sheet .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes sheet{from{opacity:0;transform:translateY(30px)}}
.mado .sheet .choice{position:static;inset:auto;background:none;padding:0;animation:none}
.mado .sheet .cards .bi{width:44px;height:44px}.mado .sheet .cards button{padding:8px 6px 6px}
.mado .sheet .tired{margin:0;font-size:13.5px;font-weight:700;color:var(--pen)}
.mado .win .dim{position:absolute;inset:0;background:rgba(35,48,47,.25);animation:fade .3s;pointer-events:none}
.mado .vig .dl{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin-top:6px}
.mado .vig .dl em{font-style:normal;font-weight:800;font-size:14px;padding:1px 8px;border:1.5px solid currentColor}
.mado .vig .dl em.up{color:var(--teal)}.mado .vig .dl em.dn{color:var(--pen)}
.mado .vig.yend .rec{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mado .vig.yend .rec li{font-size:12px;color:var(--ink2);display:flex;flex-direction:column;align-items:center;line-height:1.2}
.mado .vig.yend .rec li b{display:inline;font-size:22px;margin:0;color:var(--ink)}
@media (max-width:560px){
  .mado .sheet{padding:8px 6px}.mado .sheet .choice{gap:6px}
  .mado .sheet .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mado .sheet .cards button{display:grid;grid-template-columns:30px 1fr;column-gap:6px;row-gap:2px;align-items:center;padding:6px 6px;text-align:left}
  .mado .sheet .cards .bi{width:30px;height:30px;grid-row:span 2}.mado .sheet .cards b{text-align:left;font-size:13px}.mado .sheet .cards i{justify-self:start;font-size:10px}
  .mado .stage.erabu .win{aspect-ratio:16/10}
  .mado .hud{position:relative;padding-right:56px}.mado .hud .hcount{position:absolute;right:0;top:2px;font-size:17px}.mado .hud .hcount i{width:24px;height:24px;font-size:10px}
  .mado .sheet .choice h3{font-size:17px}
}
.mado .vig.yend .rk{margin:8px 0 0;font-size:12px;font-weight:700;color:var(--pen)}
.mado .vig.yend{width:min(92%,440px);padding:12px}
.mado .vig.yend .rec li small{font-size:11.5px}
@media (max-width:560px){.mado .vig.yend{padding:10px 8px}.mado .vig.yend b{font-size:19px}.mado .vig.yend .ys{display:none}.mado .vig.yend .rec li b{font-size:18px}.mado .vig.yend .rec{gap:4px}}
.mado .params[hidden],.mado .sheet[hidden]{display:none}
@media (max-width:560px){.mado .vig{width:min(90%,380px);padding:10px}.mado .vig .vi{width:64px;height:64px}.mado .vig b{font-size:17px}.mado .vig small{font-size:12px}.mado .vig .dl em{font-size:12.5px;padding:0 6px}.mado .vig .nbi{width:min(160px,50%)}}
.mado .vig .vi{display:block} /* span のままだと幅が効かず、絵が板いっぱいに広がっていた */
@media (max-width:560px){.mado .hud .meta{gap:8px;font-size:12px;flex-wrap:nowrap}.mado .hud .meta b{font-size:14px}.mado .hud .meta span{white-space:nowrap}}

/* 数の札（2026年10月24日：PCで小さくて見にくい → 札にしてアイコンと太いゲージ） */
.mado .params{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:8px;padding:0 0 10px;font-variant-numeric:tabular-nums}
.mado .params .pm{position:relative;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:6px;row-gap:3px;align-items:center;background:var(--paper);border:1.5px solid var(--ink);padding:6px 8px;box-shadow:2px 3px 0 rgba(35,48,47,.15);transition:background .3s}
.mado .params .pi{width:28px;height:28px}
.mado .params .pv{grid-column:1/-1;min-width:0}
.mado .params .pm>small{font-size:11.5px;color:var(--ink2);line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}
.mado .params .pv b{font-family:var(--f-head);font-weight:800;font-size:19px;line-height:1.1;white-space:nowrap}
.mado .params .pv b small{font-size:12px;margin-left:1px}
.mado .params .pv b.kbn{font-family:var(--f-body);font-size:15px}
.mado .params .pips{display:flex;gap:2px;margin-top:2px}
.mado .params .pips i{flex:1;max-width:9px;height:15px;border:1.5px solid var(--ink);border-radius:2px;background:transparent}
.mado .params .pips i.on{background:var(--teal)}
.mado .params .pm[data-k="tai"] .pips i.on{background:var(--pen)}
.mado .params .pm.up{background:#e5f4e4;animation:pmbump .6s cubic-bezier(.2,2,.4,1);z-index:1}
@keyframes pmbump{0%{transform:scale(1)}30%{transform:scale(1.12)}100%{transform:scale(1)}}
.mado .params .pm.dn{background:#fbebeb;animation:pmshake .45s ease-in-out}
.mado .params .pm.up{box-shadow:0 0 0 3px rgba(46,110,115,.35),2px 3px 0 rgba(35,48,47,.15)}
.mado .params .pips i.pnw{animation:pipin .35s cubic-bezier(.2,2,.4,1) backwards}
.mado .params .pips i.pout{animation:pipout .5s ease-in backwards}
.mado .params .pi.pwob{animation:wob .6s ease-in-out}
.mado .params .pspk{position:absolute;left:50%;top:50%;font-style:normal;font-size:17px;color:var(--yama,#D9A13B);pointer-events:none;animation:spk .8s ease-out forwards;text-shadow:0 0 2px #fff}
@keyframes pmshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes pipin{0%{transform:scale(.2);background:var(--card)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes pipout{0%{background:var(--pen);transform:scale(1.3)}100%{background:transparent;transform:scale(1)}}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.15)}75%{transform:rotate(12deg) scale(1.15)}}
@keyframes spk{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.mado .params .pm.up,.mado .params .pm.dn,.mado .params .pips i,.mado .params .pi.pwob{animation:none}}
.mado .params .fl{position:absolute;right:6px;top:-14px;font-style:normal;font-family:var(--f-head);font-weight:800;font-size:22px;z-index:2;pointer-events:none;animation:flup 1.6s ease-out forwards;text-shadow:0 0 3px #fff}
.mado .params .fl.up{color:var(--teal)}.mado .params .fl.dn{color:var(--pen)}
@media (max-width:560px){
  .mado .params{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .mado .params .pm{grid-template-columns:20px 1fr;column-gap:4px;row-gap:2px;padding:4px 5px}
  .mado .params .pi{width:20px;height:20px}
  .mado .params .pm>small{font-size:10px}
  .mado .params .pv b{font-size:15px}.mado .params .pv b.kbn{font-size:12px}
  .mado .params .pips{gap:1px}.mado .params .pips i{height:11px;border-width:1px}
  .mado .params .fl{font-size:15px;top:-10px}
}
/* 数の説明（i ボタン）。札の上に出して、3つ目の札「知り合い」に重ねない（D-032） */
.mado .params{position:relative;padding-top:14px}
.mado .params .pinfo{position:absolute;right:-9px;top:-11px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:italic 800 14px/1 var(--f-head);cursor:pointer;padding:0;box-shadow:1px 2px 0 rgba(35,48,47,.2)}
.mado .params .pinfo:disabled{opacity:.35;cursor:default}
.mado .pmhelp{position:fixed;inset:0;z-index:50;background:rgba(35,48,47,.45);display:flex;align-items:center;justify-content:center;padding:14px;animation:fade .2s}
.mado .pmhelp .ph{background:var(--card);border:2px solid var(--ink);box-shadow:5px 6px 0 rgba(0,0,0,.25);padding:14px 16px;max-width:460px;width:100%;max-height:calc(100% - 10px);overflow:auto}
.mado .pmhelp h3{margin:0 0 8px;font-family:var(--f-head);font-size:19px}
.mado .pmhelp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mado .pmhelp li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start;font-size:13.5px;line-height:1.6}
.mado .pmhelp li .pi{width:30px;height:30px}
.mado .pmhelp li b{display:block;font-size:14px}
.mado .pmhelp p{font-size:13px;line-height:1.7;color:var(--ink2);margin:10px 0}
.mado .pmhelp button.main{position:sticky;bottom:-14px;box-shadow:0 -8px 10px var(--card);font:inherit;font-weight:700;font-size:14.5px;padding:9px 16px;border:1.5px solid var(--pen);background:var(--pen);color:#fff;cursor:pointer;width:100%}
/* 窓の3年の大きい選択（DESIGN.md §54）：絵のないカードに文だけ。つづきのカードには、前の選択のときの窓を色あせた写真で添える */
.mado .cards.st button{justify-content:center;min-height:92px;padding:12px 8px}
.mado .cards.st b{font-size:14px}
.mado .cards .tag{font-size:10.5px;font-weight:700;color:#fff;background:#C99A2E;padding:0 6px}
.mado .cbph{display:block;position:relative;width:min(100%,120px);margin:0 auto 2px;background:#EADFC8;padding:4px 4px 2px;box-shadow:1px 2px 0 rgba(0,0,0,.2);transform:rotate(-2deg)}
.mado .cbph img{display:block;width:100%;height:auto;filter:sepia(.75) saturate(.6) contrast(.9) brightness(1.06);opacity:.85}
.mado .cbph small{display:block;font-size:10px;font-weight:700;color:#7A6A4A;line-height:1.4}
.mado .vig .cbph.big{width:min(220px,62%);margin:0 auto 6px}
.mado .vig .cbph.big small{font-size:11px;color:#7A6A4A}
.mado .params .pv b.neg{color:var(--pen)}
.mado .params .pv small.cho{display:block;font-size:11px;color:var(--ink2);white-space:nowrap;line-height:1.2}
@media (max-width:560px){.mado .sheet .cards.st button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:64px;padding:8px 7px}.mado .cards.st b{font-size:13px}.mado .cbph{width:min(100%,84px)}}
/* 窓の3年の毎月のお金（はじめる前の見こみ・i ボタンの内訳・まとめ） */
.mado .startov .gook{display:flex;flex-direction:column;gap:3px;max-width:340px;text-align:left;font-size:12px;line-height:1.5}
.mado .startov .gook:empty{display:none}
.mado .startov .gook .okl{font-size:13px;color:var(--ink)}
.mado .startov .gook b{font-size:15px;font-family:inherit}
.okb{list-style:none;margin:8px 0;padding:0;font-size:13px}
.okb li{display:flex;justify-content:space-between;gap:10px;padding:2px 0 2px 12px;border-bottom:1px dotted rgba(35,48,47,.2)}
.okb li.h{padding-left:0;font-weight:700;border-bottom:1px solid rgba(35,48,47,.4);margin-top:4px}
.okb b{white-space:nowrap;font-weight:700}
.okb .neg,.gook .neg{color:#C0463A}
.okd{margin-top:6px;font-size:12px}
.okd summary{cursor:pointer;font-weight:700}
.okd ul{margin:4px 0 0;padding-left:18px}
@media (max-width:560px){.mado .startov .gook{max-width:260px;font-size:11px}.mado .startov .gook .okl{font-size:12px}}
.mado .pmhelp .okb{display:block;margin:8px 0}
.mado .pmhelp .okb li{display:flex;justify-content:space-between;gap:10px;font-size:13px;line-height:1.5}
.mado .pmhelp .okb li b{display:inline;font-size:13px}
.mado .pmhelp .okd ul{display:block;list-style:disc;padding-left:18px}
.mado .pmhelp .okd li{display:list-item;font-size:12px;line-height:1.6;margin:3px 0}
.mado .vig.okv .gook{display:flex;flex-direction:column;gap:4px;text-align:left;max-width:360px;font-size:13px;line-height:1.55}
.mado .vig.okv .gook b{font-size:16px}
/* お金が足りなくて今は選べない選択肢（灰色） */
.mado .cards.st button.ng{opacity:.55;background:#E8E4DA;border-style:dashed;cursor:not-allowed;box-shadow:none;flex-direction:column;gap:2px}
.mado .cards.st button.ng small{font-size:11px;color:var(--ink2)}
/* 診断に答えずに来た人への3問（窓の下） */
.mado .qa h3{margin:0 0 4px;font-family:var(--f-head);font-size:17px;line-height:1.4}
.mado .qa>p{margin:0 0 8px;font-size:12.5px;color:var(--ink2);line-height:1.6}
.mado .qa .qg{border:0;margin:0 0 8px;padding:0}
.mado .qa legend{font-weight:700;font-size:13.5px;margin-bottom:4px}
.mado .qa .qo{display:flex;flex-wrap:wrap;gap:6px}
.mado .qa .qo label{position:relative;cursor:pointer}
.mado .qa .qo input{position:absolute;opacity:0;width:1px;height:1px}
.mado .qa .qo span{display:inline-block;padding:6px 10px;border:1.5px solid var(--ink);background:var(--card);font-size:13px;line-height:1.4;min-height:32px}
.mado .qa .qo input:checked+span{background:var(--ink);color:#fff}
.mado .qa .qo input:focus-visible+span{outline:2px solid var(--pen);outline-offset:2px}
.mado .qa .qa-more{margin:4px 0 8px}
.mado .qa .qa-more summary{cursor:pointer;font-weight:700;font-size:13px;margin-bottom:6px}
.mado .qa .bt2{display:flex;flex-direction:column;gap:8px}
.mado .qa .bt2 button{font:inherit;font-weight:700;font-size:14px;padding:9px 14px;border:1.5px solid var(--ink);background:var(--card);cursor:pointer}
.mado .qa .bt2 button.main{background:var(--pen);border-color:var(--pen);color:#fff}
/* 窓の3年のおわり：動画・名場面・記録・数のグラフ・年ごとの記録（DESIGN.md §54） */
.mado .filmskip{position:absolute;right:10px;top:10px;z-index:6;font:700 13px var(--f-body,sans-serif);background:rgba(255,252,243,.92);border:1.5px solid var(--ink);padding:6px 12px;cursor:pointer}
.mado .meib{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mado .meib li{display:flex;gap:12px;align-items:center;border-bottom:1px dotted rgba(35,48,47,.25);padding-bottom:8px}
.mado .meib li>img{width:96px;height:72px;object-fit:cover;filter:sepia(.5);border:3px solid #fff;box-shadow:1px 2px 0 rgba(35,48,47,.2);flex:0 0 auto}
.mado .meib li>.vi{width:56px;height:56px;flex:0 0 auto}
.mado .meib small{display:block;color:var(--ink2);font-size:12px}
.mado .meib b{font-size:15px;line-height:1.5}
.mado .s-card .rec{list-style:none;margin:6px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mado .s-card .rec li{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25;font-size:12px;color:var(--ink2)}
.mado .s-card .rec li b{font-family:var(--f-head);font-size:22px;color:var(--ink);margin-right:2px}
.mado .s-card .rec.big li b{font-size:32px;color:var(--pen)}
.mado .s-card .rec.big li{background:#FFF4D9;padding:8px 4px;border:1px solid rgba(35,48,47,.2)}
.mado .pmc{display:block;width:100%;height:auto;margin-top:8px;background:#fff;border:1px solid rgba(35,48,47,.2)}
.mado .ytab{display:flex;gap:6px;margin-bottom:10px}
.mado .ytab button{flex:1;font:700 14px var(--f-body,sans-serif);padding:8px 4px;border:1.5px solid var(--ink);background:#fff;cursor:pointer}
.mado .ytab button[aria-selected=true]{background:var(--ink);color:#fff}
.mado .ylog{list-style:none;margin:10px 0 0;padding:0}
.mado .ylog>li{display:flex;gap:10px;padding:6px 0;border-bottom:1px dotted rgba(35,48,47,.25)}
.mado .ylog>li>b{flex:0 0 3em;font-family:var(--f-head)}
.mado .ylog ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13.5px}
.mado .ylog .ev{color:var(--ink2);display:flex;align-items:center;gap:6px}
.mado .ylog .ev span{width:20px;height:20px;flex:0 0 auto}
.mado .ylog .ev em{font-style:normal;font-size:11px;font-weight:700;padding:0 6px;border-radius:8px;background:#E6EFE9;color:#2E6E73}
.mado .ylog .ev em.ng{background:#eee;color:#4A5657}
.mado .ylog .pk.st::before{content:"★ ";color:#C99A2E}
.mado .ylog .tag{font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#C99A2E;padding:0 6px;margin-right:4px;border-radius:8px}
@media (max-width:560px){.mado .s-card .rec.big li b{font-size:22px}.mado .s-card .rec li{font-size:11px;word-break:break-all}.mado .meib li>img{width:72px;height:54px}}
/* 重なりの直し（2026年11月4日、ひろさん「アニメーションと文字が重なる場面がある」。docs/kiroku/2026-11-04-mado-kasanari.md）
   数の札の「+2」「+74,160」：札の上にはみ出すと、上の札や札の名前に重なっていた → 札の名前の場所に出し、出ているあいだは名前を隠す */
.mado .params .fl{right:auto;left:42px;top:5px;font-size:16px;line-height:1.2;white-space:nowrap;animation:flin 1.6s ease-out forwards}
.mado .params .pm.fx>small{visibility:hidden}
@keyframes flin{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.12)}25%{transform:scale(1)}82%{opacity:1}100%{opacity:0}}
@media (max-width:560px){.mado .params .fl{left:29px;top:3px;font-size:12px}}
/* 気温・日の入り・天気：字の切れ目（wbr）で「日の／入り」と折れていた → 折らない。スマホでは日付の下の行を、はんこの数の下まで使う */
@media (max-width:560px){.mado .hud .date{flex:1 0 100%}.mado .hud .meta{margin-right:-56px;flex-wrap:wrap;row-gap:0}}
/* 帯は「れんぞく3回・はんこ3こ！」と1本にまとめるので、スマホでは字を少し小さくして1行におさめる */
@media (max-width:560px){.mado .banner{font-size:19px;letter-spacing:.02em}}
@media (max-width:380px){.mado .banner{font-size:17px}}