/* enecra.jp ★2026-10-24（まちの地図の形 → 同日「案1と2と3のいいとこどり」）
   TAKURO「LPみたいに、どんどんスクロールしていく形が嫌だ」「家PCで見た時の余白が嫌だ。マイクラのマーケットプレイスのように、充実した感じに」
        「いいとこどり…組んでみて。丁寧にクオリティ高く。細部までこだわって」
   骨組み＝ランチャー：左にメニュー（濃いこげ茶の板）と、いつも見える金のダウンロード。中身は画面ごと切り替える（.view・住所の # で決まる）
   ホーム＝地図が画面いっぱい（画面の大きさに合わせて縮む）・顔を押すと右から住人の窓（地図は見えたまま）・下に棚1段
   中身＝ストアの商品ページと棚（/pdp.css の部品をそのまま使う）
   色＝紙の地図（生成りの紙・こげ茶の線）・差し色はエネクラの電気のゴールドと草の緑。字＝見出しと札はドット（DotGothic16）・本文は Noto Sans JP
   狭い画面（899px まで）＝上に帯・下にタブ・メニューは左から引き出す・住人の窓は下から */
:root{
  --paper:#f4eedc; --paper2:#ebe2c8; --paper3:#e0d4b2; --card:#fffdf6; --card-hi:#fff7dd;
  --ink:#2a231b; --ink2:#463d31; --sub:#7a6d58; --line:#cbbb93; --line2:#b3a173;
  --gold:#d99a1e; --gold-lt:#f2c14b; --gold-hi:#ffd45e; --green:#4c8a3b; --green-dk:#2f6a2a; --red:#cf4a32;
  --talk:rgba(24,22,19,.93); --talk-line:#efe7d2;
  --side:#221c15; --side2:#2e261d; --side3:#3d3226; --side-tx:#efe7d2; --side-sub:#a8997c;
  --sans:"Noto Sans JP","Yu Gothic Medium",system-ui,sans-serif;
  --pix:"DotGothic16","Courier New",monospace;
  --gut:clamp(16px,2.4vw,40px);
  --side-w:clamp(238px,15.5vw,272px);
  --pn-w:clamp(360px,27vw,460px);
  --mbar-h:56px; --tab-h:64px;
  --ink3:#7a6d58;   /* pdp.css が読む */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:clamp(14px,1.5vw,16px)}
@media (min-width:1440px){html{font-size:max(16px,.6944vw)}}
body{margin:0;font-family:var(--sans);color:var(--ink2);background:var(--paper);font-size:1.02rem;line-height:1.85;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.45;color:var(--ink)}
b{color:var(--ink)}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:200;background:var(--gold);color:var(--ink);padding:6px 14px;border:2px solid var(--ink)}
.nw{display:inline-block}
ruby rt{font-size:.5em;letter-spacing:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}   /* 画面を切り替えた時に見出しへ移す（読み上げのため）＝枠は出さない */
.note{font-size:.92rem;color:var(--sub)}
.sub{font-size:.92rem;color:var(--sub)}

/* ═══ ボタン（ゲームの板＝こげ茶の縁と、下の段差）═══ */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--pix);font-size:1.08rem;line-height:1.2;text-decoration:none;color:var(--ink);background:var(--gold);
  border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);padding:10px 18px;border-radius:3px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--gold-lt)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn.sub{background:var(--card)}
.btn.sub:hover{background:var(--card-hi)}
.btn i{font-style:normal}

/* ═══ 左のメニュー（ランチャー）═══ */
.side{background:var(--side);color:var(--side-tx);display:flex;flex-direction:column;z-index:60;
  background-image:linear-gradient(90deg,rgba(255,255,255,.03),rgba(0,0,0,0) 40%),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px)}
.side-top{position:relative;padding:22px 20px 14px;border-bottom:2px solid #000;box-shadow:0 2px 0 rgba(255,255,255,.05)}
.side-logo{display:block;color:var(--side-tx);text-decoration:none}
.side-logo svg{height:50px;width:auto;display:block}   /* ★10/25 TAKURO「ロゴは今のままで大きくして。サブタイは Minecraft×Energy」 */
.side-logo svg *{fill:currentColor}
.side-tag{margin:9px 0 0;font-family:var(--pix);font-size:.92rem;line-height:1.3;color:var(--side-sub);letter-spacing:.1em;white-space:nowrap}
.side-tag i{font-style:normal;color:var(--gold-lt);margin:0 .2em}
.side-x{display:none}
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 10px 12px;scrollbar-width:thin;scrollbar-color:var(--side3) transparent}
.side-nav .grp{margin:13px 10px 4px;font-family:var(--pix);font-size:.74rem;letter-spacing:.14em;color:var(--side-sub)}
.side-nav a{position:relative;display:flex;align-items:center;gap:11px;padding:6px 10px;margin:1px 0;border-radius:3px;text-decoration:none;white-space:nowrap;
  font-family:var(--pix);font-size:.95rem;line-height:1.3;color:var(--side-tx)}
.side-nav a img,.side-nav a .ic-px,.side-nav a .ic-play{width:26px;height:26px;flex:none;image-rendering:pixelated;object-fit:contain}
.side-nav a .ic-logo,.tabbar .ic-logo{image-rendering:auto;border-radius:4px}
/* ★10/25 TAKURO「アイコンが古いのが混じっている…内容とあった適切なものに」＝まち＝今のゲームの家具「まちの地図」（大きな絵を縮めた物＝ぼかして縮める）・
   遊べるワールド＝ワールドの写真・自治体と企業＝フォンのまちの画面の電力会社の建物・更新のお知らせ＝フォンの呼び出しのベル（どちらも緑の液晶の色をメニューの色に塗り替えた・ドットのまま） */
.side-nav a .ic-r,.tabbar .ic-r{image-rendering:auto}
.side-nav a .ic-photo{image-rendering:auto;border-radius:4px;border:1px solid #000;object-fit:cover}
.side-nav a .ic-face,.tabbar .ic-face{image-rendering:auto;border-radius:4px;background:var(--paper2);border:1px solid #000}
.ic-play{display:inline-grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;border:2px solid #000;font-style:normal;font-size:10px;line-height:1;padding-left:2px}
.side-nav a em{margin-left:auto;font-style:normal;font-size:.75rem;color:var(--side-sub);background:rgba(255,255,255,.06);padding:0 7px;border-radius:9px}
.side-nav a em.tag{color:var(--ink);background:var(--gold-lt)}
.side-nav a .out{margin-left:auto;font-style:normal;font-family:var(--sans);font-size:.8rem;color:var(--side-sub)}   /* ↗ はドットの字に無い */
.side-nav a:hover{background:var(--side2)}
.side-nav a[aria-current="page"]{background:var(--side3);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.side-nav a[aria-current="page"]::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:4px;background:var(--gold-lt)}
.side-foot{padding:12px 14px 16px;border-top:2px solid #000;box-shadow:inset 0 2px 0 rgba(255,255,255,.05);display:flex;flex-direction:column;gap:10px}
.lang{display:flex;border:2px solid currentColor;border-radius:3px;overflow:hidden;font-family:var(--pix);font-size:.82rem;line-height:1.6;flex:none;width:max-content}
.lang a{padding:2px 10px;text-decoration:none}
.lang a[aria-current]{background:var(--side-tx);color:var(--side)}
/* 金のダウンロード（ランチャーの「プレイ」の場所）＝上が明るく下が暗い段差（ストアの黄色いボタンと同じ作り） */
.side-dl{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:var(--ink);background:var(--gold-lt);border:2px solid #000;border-radius:2px;
  box-shadow:inset 0 -5px 0 var(--gold),inset 0 5px 0 var(--gold-hi),0 3px 0 #000}
.side-dl:hover{background:var(--gold-hi)}
.side-dl:active{transform:translateY(2px);box-shadow:inset 0 -5px 0 var(--gold),inset 0 5px 0 var(--gold-hi),0 1px 0 #000}
.side-dl svg{width:24px;height:24px;flex:none}
.side-dl b{display:block;font-family:var(--pix);font-weight:400;font-size:1.04rem;line-height:1.2;white-space:nowrap}
.side-dl small{display:block;font-size:.66rem;line-height:1.4;color:#4a3a14;margin-top:2px;white-space:nowrap}
.side-legal{margin:0;font-size:.68rem;line-height:1.6;color:var(--side-sub)}
.side-legal a{color:var(--side-tx)}

/* ★10/25 ロゴを大きくしたら、1440×900 で下の「更新のお知らせ」が切れた＝高さ 980 までは少し小さく */
@media (min-width:900px) and (max-height:980px){
  .side-top{padding:14px 20px 10px}
  .side-logo svg{height:40px}
  .side-tag{margin-top:5px;font-size:.82rem}
  .side-nav .grp{margin:9px 10px 2px}
  .side-nav a{padding:4px 10px}
}
/* 低い画面（ノートPC）＝左のメニューを詰める（1366×768 で下の項目が切れた） */
@media (min-width:900px) and (max-height:860px){
  .side-top{padding:11px 20px 8px}
  .side-logo svg{height:34px}
  .side-tag{margin-top:4px;font-size:.76rem}
  .side-nav .grp{margin:7px 10px 1px}
  .side-nav a{padding:3px 10px}
  .side-nav a img,.side-nav a .ic-px,.side-nav a .ic-play{width:23px;height:23px}
  .side-foot{padding:10px 14px 12px;gap:8px}
  .side-dl{padding:9px 12px}
}

/* もっと低い画面（1280×720 など）＝メニューの下の項目が切れた＝さらに詰める */
@media (min-width:900px) and (max-height:760px){
  .side-top{padding:10px 18px 8px}
  .side-logo svg{height:34px}
  .side-tag{margin-top:4px;font-size:.74rem}
  .side-nav{padding-top:2px}
  .side-nav .grp{margin:7px 10px 1px;font-size:.68rem}
  .side-nav a{padding:3px 10px;font-size:.9rem}
  .side-nav a img,.side-nav a .ic-px,.side-nav a .ic-play{width:22px;height:22px}
  .side-foot{padding:8px 12px 10px;gap:6px}
  .side-dl{padding:7px 10px}
  .side-dl small{display:none}
  .side-legal{font-size:.6rem;line-height:1.45}
}

/* ═══ 画面（view）＝JS が動いている時だけ1つずつ。JS が無い時は全部が順に並ぶ ═══ */
html.js .view{display:none}
html.js .view.is-on{display:block}
.views{outline:none;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.views > .foot{margin-top:auto}   /* 中身が少ない画面でも、いちばん下の帯は画面の下に（下に紙の色の余白を出さない） */
.vw{width:min(100% - 2 * var(--gut),1600px);margin:0 auto;padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,64px)}
.vh{padding-bottom:18px;margin-bottom:24px;border-bottom:2px dashed var(--line2)}
.crumb{margin:0 0 6px;font-family:var(--pix);font-size:.82rem;color:var(--sub);letter-spacing:.05em;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{text-decoration:none;border-bottom:1px dashed var(--line2)}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal}
.vh h2{font-family:var(--pix);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:.03em;line-height:1.3}
.vh .lead{margin:10px 0 0;max-width:60em}
html.js .view.is-on .vw{animation:vin .32s ease-out}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.js .view.is-on .vw{animation:none}}
.card{background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:clamp(16px,2vw,26px);box-shadow:0 4px 0 var(--ink)}
.empty{display:flex;align-items:center;gap:16px;background:var(--card);border:2px dashed var(--line2);border-radius:4px;padding:22px 24px;color:var(--sub)}
.empty img,.empty .ic-px{width:48px;height:48px;flex:none;image-rendering:pixelated}
.empty p{margin:0}
.empty[hidden],.wk-head[hidden]{display:none}   /* ★10/25 display を決めた物は hidden が効かない（作品が並んでも「まだありません」が残った） */

/* ═══ まち（ホーム）═══ */
.v-town{background:
  linear-gradient(var(--paper2) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,var(--paper2) 1px,transparent 1px) 0 0/48px 48px, var(--paper)}
.town-title .k{margin:0;font-family:var(--pix);font-size:.82rem;color:var(--sub);letter-spacing:.12em}
.town-title .k span{margin-left:6px;background:var(--ink);color:var(--paper);padding:0 6px;border-radius:2px;letter-spacing:.04em}
.town-title h1{font-family:var(--pix);font-weight:400;font-size:clamp(1.9rem,2.5vw,2.75rem);line-height:1.22;letter-spacing:.02em;margin-top:4px}
.town-title h1 .nm{display:block;font-size:.46em;color:var(--green-dk);letter-spacing:.14em;margin-bottom:2px}
.town-title .lead{margin:8px 0 0;font-size:.95rem;line-height:1.75}
.town-title .act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.map-scroll{position:relative}
.map{position:relative;container:map/inline-size}
.map img.town{width:100%;height:auto;user-select:none;-webkit-user-drag:none}
/* 地図の上の札＝顔の札。押すと住人の窓 */
.pin{position:absolute;transform:translate(-50%,-100%);z-index:2;border:0;padding:0;background:none;cursor:pointer;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 3px 2px rgba(40,30,15,.35));transition:transform .15s}
.pin .face{width:clamp(26px,2.75cqw,50px);aspect-ratio:1;border-radius:6px;background:var(--card) center/cover no-repeat;border:2px solid var(--ink)}
.pin .tip{width:0;height:0;border:6px solid transparent;border-top-color:var(--ink);margin-top:-1px}
.pin .nm{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--pix);font-size:.82rem;line-height:1.5;
  background:var(--ink);color:var(--paper);padding:1px 8px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s}
.pin:hover{transform:translate(-50%,-100%) translateY(-3px);z-index:4}
.pin:hover .nm,.pin:focus-visible .nm,.pin.on .nm{opacity:1}
.pin:focus-visible{outline:none}
.pin:focus-visible .face{outline:3px solid var(--gold);outline-offset:2px}
.pin .vid{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;border:2px solid var(--ink);
  font-size:9px;display:grid;place-items:center;line-height:1;padding-left:1px}
.pin.secret .face{background:var(--ink) !important;display:grid;place-items:center;color:var(--paper);font-family:var(--pix);font-size:1.1rem}
.pin.power .face{background:var(--gold-lt) !important;display:grid;place-items:center;font-size:0}
.pin.power .face svg{width:62%;height:62%}
.pin.on{z-index:5}
.pin.on .face{outline:3px solid var(--gold);outline-offset:2px;animation:pinon 1.6s ease-in-out infinite}
@keyframes pinon{50%{outline-color:var(--gold-hi);outline-offset:4px}}
.pin.ping .face{animation:ping .9s ease-out 2}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(242,193,75,.9)}100%{box-shadow:0 0 0 18px rgba(242,193,75,0)}}
@media (prefers-reduced-motion:reduce){.pin.on .face,.pin.ping .face{animation:none}}
/* 地図の説明 */
.map-legend .lg-t{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;line-height:1.5}
.map-legend .lg-t b{font-family:var(--pix);font-weight:400;font-size:1rem}
.map-legend .lg-t span{font-size:.8rem;color:var(--sub)}
.map-legend ul{display:grid;grid-template-columns:auto auto;gap:4px 18px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line2);font-size:.82rem;line-height:1.5}
.map-legend li{display:flex;gap:8px;align-items:center}
.map-legend i{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:3px;border:2px solid var(--ink);flex:none;font-style:normal;font-size:8px;line-height:1}
.map-legend .lg-res{background:var(--card)}.map-legend .lg-vid{background:var(--red);color:#fff;border-radius:50%}
.map-legend .lg-sec{background:var(--ink);color:var(--paper)}.map-legend .lg-pow{background:var(--gold-lt)}
.map-hint{display:none}

/* 棚（ホームの下の段＝ストアの棚）*/
.shelf{position:relative;z-index:3;min-width:0;container:shelf/inline-size;background:var(--paper2);border-top:2px solid var(--ink);padding:10px var(--gut) 14px}
.shelf-h{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.shelf-h h2{font-family:var(--pix);font-weight:400;font-size:1.08rem;letter-spacing:.04em}
.shelf-h h2 small{margin-left:12px;font-family:var(--sans);font-size:.8rem;color:var(--sub);letter-spacing:0}
.shelf-h a{margin-left:auto;font-family:var(--pix);font-size:.85rem;text-decoration:none;white-space:nowrap}
.shelf-h a:hover{color:var(--ink);text-decoration:underline}
.shelf-row{display:grid;gap:12px;padding:2px 2px 6px}
/* 棚の組＝左「まずはここから」（v1.5・住人）｜区切り｜右「工場見学」4つ（★10/24 TAKURO「工場見学と勘違いするので、区切って」） */
.shelf-in{display:flex;align-items:stretch}
.sg{display:flex;flex-direction:column}
/* 左の組＝決まった幅（縮めると右の組に重なった＝1280px）・右の組＝残りの幅。足りない時は右の組だけ横に送る（ストアの棚と同じ） */
.sg-start{flex:none}
.sg-tours{flex:1 1 0;min-width:0}
.sg-start .shelf-row{grid-template-columns:repeat(2,clamp(196px,13vw,270px))}
.sg-tours .shelf-row{grid-template-columns:repeat(4,minmax(196px,1fr));overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity}
.sg-tours .tile{scroll-snap-align:start}
/* 棚が狭い時（ノートPC）＝工場見学は絵いっぱいのタイル（名前を絵の下に重ねる）・左の組は絵を細く */
@container shelf (max-width:1399px){
  .sg-start .t-pic{flex-basis:36%}
  .shelf .t-group img{height:66%}
  .shelf .t-group img:nth-child(1){left:-12%}
  .shelf .t-group img:nth-child(3){right:-12%}
  .shelf .t-group img:nth-child(2){height:80%}   /* 枠が細い時＝3人を小さく（まん中の人が2人を隠した） */
  .sg-start .t-tx b{font-size:.92rem}
  .t-free{font-size:.7rem}
  .sg-tours .shelf-row{grid-template-columns:repeat(4,minmax(120px,1fr))}
  .sg-tours .tile{position:relative;min-height:84px}
  .sg-tours .t-pic{position:absolute;inset:0;border-right:0}
  .sg-tours .t-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,18,15,0) 35%,rgba(20,18,15,.88))}
  .sg-tours .t-tx{position:relative;z-index:1;justify-content:flex-end;width:100%;padding:6px 10px 7px}
  .sg-tours .t-tx b{color:#fff6dc;font-size:.95rem;display:block;white-space:nowrap;text-overflow:ellipsis}
  .sg-tours .t-tx > span{display:none !important}
  .sg-tours .t-play{left:auto;right:8px;top:8px;bottom:auto}
  .sg-tours .tile:hover{background:var(--ink)}
}
/* もっと狭い時（1024px など）＝左の組を上・工場見学を下に */
@container shelf (max-width:820px){
  .shelf-in{flex-direction:column}
  .shelf .sg-sep{width:auto;height:0;margin:8px 0 10px;border-left:0;border-top:2px dashed var(--line2)}   /* .shelf を付ける＝下にある .sg-sep の決まりに負けない */
  .sg-start .shelf-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sg-sep{flex:none;width:0;margin:4px 20px 8px;border-left:2px dashed var(--line2)}
.t-get{background:var(--gold-lt)}
.t-get:hover{background:var(--gold-hi)}
.t-get .t-tx > span{color:#5a4410}
.t-get .t-tx b{white-space:nowrap}
.t-free{align-self:flex-start;margin-top:3px;white-space:nowrap;font-style:normal;font-family:var(--pix);font-size:.74rem;line-height:1.5;background:var(--ink);color:var(--gold-lt);padding:0 7px;border-radius:2px}
.t-n{font-style:normal;margin-left:6px;color:var(--green-dk)}
.tile{display:flex;align-items:stretch;gap:0;text-align:left;text-decoration:none;color:inherit;background:var(--card);border:2px solid var(--ink);border-radius:4px;
  box-shadow:0 3px 0 var(--ink);padding:0;overflow:hidden;cursor:pointer;min-height:78px;transition:transform .12s}
.tile:hover{background:var(--card-hi);transform:translateY(-2px)}
.tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.t-pic{position:relative;flex:0 0 42%;background:#14120f no-repeat center/cover;border-right:2px solid var(--ink)}   /* 絵は1コマの絵を cover（4コマ並びを伸ばすと縦横がゆがんだ） */
.t-play{position:absolute;left:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;border:2px solid var(--ink);
  display:grid;place-items:center;font-size:9px;font-style:normal;line-height:1;padding-left:2px}
.t-group{display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse 70% 16% at 50% 98%,rgba(42,35,27,.22),transparent 70%),linear-gradient(#fbf6e8,var(--paper2))}   /* 明るい地に住人が並ぶ（10/24「顔が暗い」） */
.t-group img{position:absolute;bottom:0;height:80%;width:auto;max-width:none}   /* 絵は枠の中に重ねて置く（並べると絵の大きさでタイルが縦にのびて、まん中の1人しか見えなかった） */
.t-group img:nth-child(1){left:-4%}
.t-group img:nth-child(3){right:-4%}
.t-group img:nth-child(2){left:50%;transform:translateX(-50%);height:94%;z-index:1}
.t-tx{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:7px 10px;min-width:0}
.t-tx b{font-family:var(--pix);font-weight:400;font-size:.98rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.t-tx > span{font-size:.76rem;line-height:1.4;color:var(--sub);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.t-who{display:flex !important;align-items:center;gap:5px;margin-top:2px;font-size:.72rem !important}
.t-who i{width:16px;height:16px;border-radius:3px;border:1px solid var(--ink);background:center/cover no-repeat;flex:none}

/* ═══ 住人の話す窓の黒い板（ゲームの中の住人と話す画面と同じ黒い半透明）═══ */
.talk{background:var(--talk);color:var(--talk-line);border:2px solid #000;outline:2px solid var(--talk-line);outline-offset:-6px;border-radius:2px;
  padding:14px 18px;font-family:var(--pix);font-size:1.02rem;line-height:1.75}
.talk .who{display:inline-block;font-size:.82rem;color:var(--gold-lt);margin-bottom:3px}
.talk p{margin:0}
.talk ruby rt{color:#cfc6ae}

/* ═══ 住人の窓（パネル）＝広い画面は右から・狭い画面は下から ═══ */
.panel{position:fixed;z-index:75;background:var(--card);color:var(--ink2);display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;visibility:hidden}
.panel.is-open{visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
.panel-top{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:2px solid var(--ink);background:var(--paper2)}
.pn-nav{width:34px;height:30px;border:2px solid var(--ink);background:var(--card);border-radius:3px;cursor:pointer;font-size:.7rem;line-height:1;box-shadow:0 2px 0 var(--ink)}
.pn-nav:hover{background:var(--card-hi)}
.pn-no{font-family:var(--pix);font-size:.82rem;color:var(--sub);min-width:5.5em;text-align:center}
.pn-x{margin-left:auto;font-family:var(--pix);font-size:.88rem;border:2px solid var(--ink);background:var(--card);border-radius:3px;padding:2px 10px;cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.pn-x:hover{background:var(--card-hi)}
.pn-x i{font-style:normal;margin-left:4px}
.panel-in{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 26px;scrollbar-width:thin}
.pn-hero{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:end;margin-bottom:12px}
.pn-pic{height:120px;display:flex;align-items:flex-end;justify-content:center;background:
  radial-gradient(ellipse 60% 22% at 50% 92%,rgba(42,35,27,.18),transparent 70%),var(--paper2);border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.pn-pic img{max-height:112px;width:auto}
.pn-pic.secret{background:var(--ink);color:var(--paper);font-family:var(--pix);font-size:2.4rem;align-items:center}
.pn-hero h3{font-family:var(--pix);font-weight:400;font-size:1.45rem;line-height:1.25}
.pn-hero .kana{display:block;font-size:.76rem;color:var(--sub);letter-spacing:.06em}
.pn-hero .shop{display:block;font-size:.86rem;line-height:1.55;margin-top:4px}
.pn-hero .onegai{display:inline-block;margin-top:4px;font-size:.74rem;background:var(--paper2);border:1px solid var(--line2);border-radius:3px;padding:0 6px}
/* ★10/25 住人の窓の「お店」＝建物の写真・買える物・たのめること・お礼の家具 */
.pn-shop{margin:12px 0 0;border:2px solid var(--ink);border-radius:3px;overflow:hidden;background:#b9dcef;position:relative}
.pn-shop img{display:block;width:100%;height:auto;aspect-ratio:16/10}
.pn-shop figcaption{position:absolute;left:8px;bottom:8px;display:flex;gap:8px;align-items:baseline;background:rgba(34,28,21,.86);color:var(--side-tx);
  padding:3px 9px;border-radius:2px;font-size:.78rem;line-height:1.5}
.pn-shop figcaption b{font-family:var(--pix);font-weight:400;font-size:.88rem;color:#fff}
.pn-none{margin:12px 0 0;padding:10px 12px;border:1px dashed var(--line2);border-radius:3px;font-size:.88rem;line-height:1.7;background:#fffefa}
.pn-sec{margin-top:16px;padding-top:12px;border-top:2px dashed var(--line2)}
.pn-sec h4{display:flex;align-items:baseline;gap:8px;font-family:var(--pix);font-weight:400;font-size:1.04rem;color:var(--ink);line-height:1.4}
.pn-sec h4 small{font-size:.76rem;color:var(--sub)}
.pn-sec h5{margin:12px 0 4px;font-family:var(--pix);font-weight:400;font-size:.82rem;color:var(--sub);letter-spacing:.04em}
.pn-note{margin:6px 0 0;font-size:.82rem;line-height:1.65;color:var(--ink2)}
.pn-note.sm{margin-top:8px;font-size:.76rem;color:var(--sub)}
.pn-mc{margin:8px 0 0;font-size:.82rem;line-height:1.7;padding:6px 10px;background:var(--paper2);border-radius:3px}
.goods{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.gd{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;background:#fffefa;border:1px solid var(--line);border-radius:3px}
.gd img{width:40px;height:40px;object-fit:contain}
.gd-t{min-width:0;font-size:.8rem;line-height:1.45;color:var(--sub)}
.gd-t b{font-weight:700;font-size:.9rem;color:var(--ink);margin-right:6px}
.gd-t em{display:inline-block;font-style:normal;font-family:var(--pix);font-size:.68rem;line-height:1.5;padding:0 5px;border-radius:2px;background:var(--gold-lt);color:var(--ink);vertical-align:1px}
.gd-t small{display:block;font-size:.76rem}
.gd-t small.why{color:#8a7d64}
.gd-t small.how{color:var(--green-dk)}
.gd-p{text-align:right;white-space:nowrap;font-size:.74rem;line-height:1.3;color:var(--sub)}
.gd-p b{display:block;font-family:var(--pix);font-weight:400;font-size:.95rem;color:var(--ink)}
.gd-p s{display:block}
.furn .gd{grid-template-columns:40px minmax(0,1fr)}
.pn-svc{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.pn-svc li{padding:7px 10px;border-left:4px solid var(--gold);background:#fffefa;border-radius:0 3px 3px 0;font-size:.82rem;line-height:1.6;color:var(--ink2)}
.pn-svc li b{display:block;font-family:var(--pix);font-weight:400;font-size:.92rem;color:var(--ink)}
.bk-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.bk-acts .btn{margin-top:0}
.bk-acts .btn small{font-family:var(--sans);font-size:.72rem;opacity:.75;margin-left:2px}
.panel .cond{margin:16px 0 0;padding-top:12px;border-top:2px dashed var(--line2);font-size:.94rem;line-height:1.75}
.panel .cond b{font-family:var(--pix);font-weight:400;display:block;font-size:.88rem;color:var(--sub)}
.panel details{margin-top:8px;font-size:.9rem;border:1px dashed var(--line2);border-radius:3px;padding:6px 10px;background:#fffefa}
.panel details summary{cursor:pointer;font-family:var(--pix);color:var(--ink)}
.panel details ol{list-style:decimal;padding-left:1.4em;margin-top:6px}
.panel .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.panel .tour{margin-top:14px}
.panel .more{margin-top:16px;font-size:.86rem}
.pn-step{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;padding-top:14px;border-top:2px dashed var(--line2)}
.pn-step button{display:flex;align-items:center;gap:8px;text-align:left;border:2px solid var(--ink);background:var(--paper);border-radius:4px;padding:6px 8px;cursor:pointer;box-shadow:0 2px 0 var(--ink);min-width:0}
.pn-step button:hover{background:var(--card-hi)}
.pn-step button.nx{flex-direction:row-reverse;text-align:right}
.pn-step i{width:34px;height:34px;flex:none;border-radius:3px;border:1px solid var(--ink);background:var(--paper2) center/cover no-repeat;font-style:normal;display:grid;place-items:center;font-family:var(--pix);color:var(--paper)}
.pn-step i.q{background:var(--ink)}
.pn-step span{min-width:0;font-size:.74rem;line-height:1.35;color:var(--sub)}
.pn-step b{display:block;font-family:var(--pix);font-weight:400;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-map{font-family:var(--pix);font-size:.85rem;border:0;background:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(30,24,15,.42);opacity:0;transition:opacity .25s}
.scrim.is-on{opacity:1}

/* ═══ 工場見学のプレーヤー ═══ */
.tour{position:relative}
.tour-stage{position:relative;aspect-ratio:16/9;background:#14120f;border:2px solid var(--ink);border-radius:3px;overflow:hidden}
.tour-frame{position:absolute;inset:0;background-repeat:no-repeat;background-size:400% 100%;background-position:0 0}
.tour-frame.run{animation:flip 2s steps(4) infinite}
@keyframes flip{to{background-position:133.333% 0}}   /* 4コマ（400%）＝0→1→2→3 を 0〜100% で回す */
@media (prefers-reduced-motion:reduce){.tour-frame.run{animation:none}}
.tour-step{position:absolute;left:10px;top:10px;font-family:var(--pix);font-size:.82rem;background:rgba(20,18,15,.82);color:#f2ead6;padding:2px 10px;border-radius:3px}
.tour-head{position:absolute;right:10px;top:10px;max-width:70%;font-family:var(--pix);font-size:.92rem;line-height:1.5;background:var(--gold);color:var(--ink);padding:2px 12px;border:2px solid var(--ink);border-radius:3px}
.tour-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12)}
.tour-bar i{display:block;height:100%;width:0;background:var(--gold-lt)}
.tour .talk{margin-top:12px;min-height:6.4em;position:relative;padding-left:84px}
.tour .talk .face{position:absolute;left:12px;top:14px;width:58px;height:58px;border-radius:3px;border:2px solid var(--talk-line);background:#3b352c center/cover no-repeat}
.tour .leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.84rem}
.tour .leg span{display:inline-flex;align-items:center;gap:6px}
.tour .leg i{width:14px;height:14px;border:1px solid var(--ink);border-radius:2px}
.tour-ctl{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.tour-ctl button{font-family:var(--pix);font-size:.92rem;border:2px solid var(--ink);background:var(--card);border-radius:3px;padding:3px 12px;cursor:pointer;color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.tour-ctl button:hover{background:var(--card-hi)}
.tour-dots{display:flex;gap:5px;flex-wrap:wrap;margin-left:4px}
.tour-dots button{width:13px;height:13px;padding:0;border-radius:50%;background:var(--paper3);box-shadow:none;border-width:2px}
.tour-dots button[aria-current]{background:var(--gold)}
.tour-note{font-size:.82rem;color:var(--sub);margin:6px 0 0}

/* ═══ エネクラ v1.5（商品ページ）═══ */
.pdp-h{font-family:var(--pix);font-weight:400;font-size:1.35rem;margin:34px 0 12px;display:flex;align-items:baseline;gap:12px}
.pdp-h .h-sub{font-family:var(--sans);font-size:.82rem;color:var(--sub)}
.pdp-next{margin:0}
.pdp-next a{display:inline-block;font-family:var(--pix);font-size:.92rem;text-decoration:none;border-bottom:2px dashed var(--line2);padding-bottom:1px}
.pdp-next a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.kidsnote{font-size:.92rem;background:#fff7dd;border:2px dashed var(--gold);padding:8px 12px;border-radius:4px;max-width:60em;margin:0 0 18px}
/* 中身のタイル（ストアの「パックの中身」）*/
.inside{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.in-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--card);border:2px solid var(--ink);border-radius:4px;overflow:hidden;
  box-shadow:0 4px 0 var(--ink);transition:transform .12s}
.in-card:hover{transform:translateY(-3px);background:var(--card-hi)}
.in-card:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.in-pic{display:block;aspect-ratio:16/8;background:#1d1b1a center/cover no-repeat;border-bottom:2px solid var(--ink)}
.in-faces{display:flex;align-items:flex-end;justify-content:center;gap:2%;padding:0 6%;background:radial-gradient(ellipse 70% 18% at 50% 96%,rgba(42,35,27,.2),transparent 70%),linear-gradient(var(--paper2),var(--paper3))}
.in-faces img{height:88%;width:auto;flex:0 1 auto;min-width:0;object-fit:contain;object-position:bottom}
.in-tx{display:block;padding:10px 14px 12px}
.in-tx b{display:flex;align-items:baseline;gap:8px;font-family:var(--pix);font-weight:400;font-size:1.1rem}
.in-tx b em{margin-left:auto;font-style:normal;font-size:1.3rem;color:var(--green-dk)}
.in-tx b em.also{font-size:.72rem;color:var(--sub);background:var(--paper2);border:1px solid var(--line2);border-radius:3px;padding:0 6px}
.in-tx > span{display:block;font-size:.84rem;color:var(--sub);line-height:1.5;margin-top:2px}
.in-also{background:var(--paper)}
/* タブ（詳細・アイテム・これまでの版）*/
.tabs{display:flex;gap:4px;margin-top:36px;border-bottom:2px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{font-family:var(--pix);font-size:1.02rem;padding:8px 18px 7px;border:2px solid var(--ink);border-bottom:0;border-radius:4px 4px 0 0;background:var(--paper2);
  cursor:pointer;white-space:nowrap;margin-bottom:-2px;color:var(--sub)}
.tabs button:hover{color:var(--ink);background:var(--paper3)}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);border-bottom:2px solid var(--paper);box-shadow:inset 0 3px 0 var(--gold-lt)}
.tab-panel{padding-top:22px}
.tab-panel .pdp-detail > .pdp-box:not(.pdp-desc){position:sticky;top:20px}   /* 説明を読み進めても、右の「中身」の箱はついて来る */
.tp-h{font-family:var(--pix);font-weight:400;font-size:1.25rem;margin:0 0 12px}
html.js .tab-panel[hidden]{display:none}
html:not(.js) .tabs{display:none}
.pdp-soon{margin:.6rem 0 0;color:var(--pdp-tx);font-size:.92rem;line-height:1.7}
.pdp-soon b{color:#fff}
.pdp-soon span{color:var(--pdp-sub);font-size:.82rem}
.dlterms{font-size:.92rem;margin-top:16px}
.dlterms code{background:var(--paper2);padding:1px 6px;border-radius:3px}
/* ガイドブック（★10/24 夜「案内と本」から改名・ダウンロードのすぐ下と、自分の画面）*/
.sku-books{background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:0 3px 0 var(--ink);overflow:hidden}
.sb-h{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;padding:7px 12px;background:var(--paper2);border-bottom:2px solid var(--ink)}
.sb-h b{font-family:var(--pix);font-weight:400;font-size:1rem}
.sb-h span{font-size:.76rem;color:var(--sub)}
.sku-books a{display:flex;align-items:center;gap:10px;padding:7px 12px;text-decoration:none;color:inherit;border-top:1px dashed var(--line)}
.sku-books a:first-of-type{border-top:0}
.sku-books a:hover{background:var(--card-hi)}
.sku-books img{width:28px;height:28px;flex:none;image-rendering:pixelated}
.sku-books a span{flex:1;min-width:0;line-height:1.35}
.sku-books a b{display:block;font-family:var(--pix);font-weight:400;font-size:.92rem;word-break:keep-all;overflow-wrap:anywhere}
.sku-books a small{display:block;font-size:.72rem;color:var(--sub)}
.sku-books a i{font-style:normal;font-family:var(--pix);font-size:1.1rem;color:var(--sub)}
.books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.book{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:0 4px 0 var(--ink);overflow:hidden}
.bk-cover{display:block;border-bottom:2px solid var(--ink);background:#1d1b1a}
.bk-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .25s}
.book:hover .bk-cover img{transform:scale(1.03)}
.bk-cover{overflow:hidden}
.bk-tx{display:flex;flex-direction:column;gap:6px;padding:14px 18px 18px;flex:1}
.bk-for{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--pix);font-size:.82rem;color:var(--sub)}
.bk-for img{width:24px;height:24px;image-rendering:pixelated}
.bk-for .gv{margin-left:auto;font-size:.72rem;background:var(--paper2);padding:0 6px;border-radius:3px;color:var(--ink2)}
.bk-tx h3{font-family:var(--pix);font-weight:400;font-size:1.25rem;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}   /* ★10/27 折るのは <wbr>（「と」のあと）だけ */
.bk-tx p{margin:0;font-size:.92rem;line-height:1.75}
.bk-tx .btn{margin-top:auto;align-self:flex-start}
@media (max-width:1100px){ .books{grid-template-columns:1fr} .book{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr)} .bk-cover{border-bottom:0;border-right:2px solid var(--ink)} .bk-cover img{height:100%} }
/* これまでの版（いまのトップから写した物）*/
.hist h3{font-family:var(--pix);font-weight:400;font-size:1.25rem}
.hist .lead{margin:8px 0 14px}
details.rel{background:var(--card);border:2px solid var(--ink);border-radius:4px;margin-top:10px;padding:0 16px}
details.rel summary{cursor:pointer;display:flex;gap:12px;align-items:baseline;padding:10px 0;font-family:var(--pix);list-style:none}
details.rel summary::-webkit-details-marker{display:none}
details.rel summary::before{content:"▶";font-size:.62rem;color:var(--sub);align-self:center;transition:transform .15s}   /* たたんだ行＝押すと開くと分かる印（10/24 最初はたたむ形にした） */
details.rel[open] summary::before{transform:rotate(90deg)}
details.rel summary:hover b{text-decoration:underline;text-underline-offset:3px}
details.rel summary b{font-weight:400;font-size:1.15rem}
details.rel summary .d{font-size:.85rem;color:var(--sub)}
details.rel summary .badge{font-size:.75rem;background:var(--green);color:#fff;padding:0 8px;border-radius:3px}
details.rel .can{font-size:.9rem}
details.rel .chg{list-style:disc;padding-left:1.3em;font-size:.95rem}
details.rel .chg li{margin:6px 0}
details.rel .files{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
details.rel .files a{font-size:.88rem;border:2px solid var(--ink);padding:2px 10px;border-radius:3px;text-decoration:none;background:var(--paper2)}
details.rel .relpics{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
details.rel .relpics img{width:150px;border:1px solid var(--line2)}
/* 遊べるワールド */
.worlds{margin:0}
.wnote{font-size:.92rem;margin-top:18px;background:var(--card);border:2px dashed var(--line2);padding:12px 16px;border-radius:4px}

/* ═══ 入れ方 ═══ */
.howto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
.fit h3{font-family:var(--pix);font-weight:400;font-size:1.2rem}
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
.fit-ok,.fit-ng{border:2px solid var(--ink);border-radius:4px;padding:10px 14px}
.fit-ok{background:#eef6e3}.fit-ng{background:#fbe9e3}
.fit-ok b,.fit-ng b{font-family:var(--pix);font-weight:400}
.fit-ok li::before{content:"○ ";color:var(--green)}.fit-ng li::before{content:"× ";color:var(--red)}
.steps .step{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.steps .step:first-child{padding-top:0}
.steps .step:last-child{border-bottom:0;padding-bottom:0}
.steps .no{width:44px;height:44px;display:grid;place-items:center;font-family:var(--pix);font-size:1.4rem;background:var(--gold);border:2px solid var(--ink);border-radius:4px;box-shadow:0 3px 0 var(--ink)}
.steps b{font-family:var(--pix);font-weight:400;font-size:1.15rem}
.steps p{margin:4px 0}
.steps .dev{display:flex;flex-direction:column;font-size:.92rem;color:var(--sub)}
.hj-after{margin-top:22px}

/* ═══ はじめかた（★10/27）＝3つの道。最初に手に持つ物（フォン・先生用タブレット・持ち物の一覧）で分ける。
   広い時は3つ横並び・狭い時は1つずつ（絵を左に）・スマホは縦に積む＝画面の幅ではなく中身の幅で決める（左のメニューの有る無しで幅が変わる） ═══ */
.v-start .vw{container:start/inline-size}
.hj-pre{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;background:var(--paper2);border:2px dashed var(--line2);border-radius:4px;padding:10px 16px;margin-bottom:20px}
.hj-pre p{margin:0;flex:1 1 18em;font-size:.95rem;line-height:1.6}
.hj-pre .btn{font-size:.95rem;padding:7px 14px}
.hj-pre .btn svg{width:18px;height:18px}
.hj-jump{display:none;gap:8px;margin:-6px 0 18px;flex-wrap:wrap}
.hj-jump a{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;border:2px solid var(--ink);border-radius:3px;background:var(--card);box-shadow:0 2px 0 var(--ink);
  font-family:var(--pix);font-size:.9rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.hj-jump a:hover{background:var(--card-hi)}
.hj-jump img{width:24px;height:24px;image-rendering:pixelated}
/* 3つ横並びの時は、段（題・説明・絵・手順・注意・指導案・次に読む）を3枚でそろえる（subgrid）＝説明の長さがちがっても絵と手順の頭が同じ高さ */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:20px;row-gap:0;align-items:stretch}
.way{--wc:var(--gold);display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;align-content:start;background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:0 4px 0 var(--ink);overflow:hidden;scroll-margin-top:16px}
.wy-h{grid-row:1}.wy-sum{grid-row:2}.wy-pic{grid-row:3}.wy-do{grid-row:4}.wy-note{grid-row:5;align-self:start}.wy-more{grid-row:6}.wy-foot{grid-row:7;align-self:end}
.w-mission{--wc:#2f6497}
.w-event{--wc:#3f7d36}
.wy-h{display:flex;align-items:center;gap:14px;padding:14px 18px 12px;border-top:6px solid var(--wc);border-bottom:2px dashed var(--line2)}
.wy-ic{width:64px;height:64px;flex:none;image-rendering:pixelated}
.wy-for{margin:0;font-family:var(--pix);font-size:.9rem;line-height:1.4;color:var(--wc)}
.w-quest .wy-for{color:#9a6a0c}   /* 金の字は紙の上で薄い＝少し濃く */
.wy-h h3{font-family:var(--pix);font-weight:400;font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.25;margin-top:2px;word-break:keep-all;overflow-wrap:anywhere}   /* 折るのは <wbr> の所だけ（「自 / 由に」と折れた） */
.wy-sum{margin:12px 18px 0;font-size:.93rem;line-height:1.75}
.wy-pic{margin:12px 18px 0;border:2px solid var(--ink);border-radius:3px;overflow:hidden;background:#1d1b1a;aspect-ratio:16/9}
.wy-pic img{display:block;width:100%;height:100%;object-fit:cover}
.wy-pic.fit{background:#241a33}   /* フォンの画面（横長でない絵）は切らずに収める＝地はフォンの枠の色 */
.wy-pic.fit img{object-fit:contain}
.wy-do{margin:14px 18px 0}
.wy-do h4{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-family:var(--pix);font-weight:400;font-size:1rem;color:var(--ink)}
.wy-do h4::after{content:"";flex:1;border-top:2px dashed var(--line2)}
.wy-steps{list-style:none;margin:0;padding:0;counter-reset:wy}
.wy-steps li{counter-increment:wy;position:relative;padding:6px 0 6px 40px;font-size:.92rem;line-height:1.7}
.wy-steps li::before{content:counter(wy);position:absolute;left:0;top:7px;width:26px;height:26px;display:grid;place-items:center;font-family:var(--pix);font-size:.95rem;line-height:1;color:var(--ink);
  background:var(--gold);border:2px solid var(--ink);border-radius:3px;box-shadow:0 2px 0 var(--ink)}
.wy-steps b{font-weight:700}
.wy-note{margin:8px 18px 0;padding:8px 12px;background:var(--paper2);border-radius:3px;font-size:.84rem;line-height:1.65}
.wy-more{margin:8px 18px 0;font-size:.84rem;line-height:1.65;color:var(--ink2)}
.wy-foot{margin-top:auto;padding:16px 18px 18px}
.wy-next{display:flex;align-items:center;gap:10px;padding:8px 12px;border:2px solid var(--ink);border-radius:3px;background:var(--paper);box-shadow:0 3px 0 var(--ink);text-decoration:none;color:inherit}
.wy-next:hover{background:var(--card-hi)}
.wy-next:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.wy-next img{width:32px;height:32px;flex:none;image-rendering:pixelated}
.wy-next span{flex:1;min-width:0;line-height:1.35}
.wy-next small{display:block;font-size:.72rem;color:var(--sub)}
.wy-next b{display:block;font-family:var(--pix);font-weight:400;font-size:.98rem;word-break:keep-all;overflow-wrap:anywhere}
.wy-next i{font-style:normal;font-family:var(--pix);font-size:1.2rem;color:var(--sub)}
/* 中身が狭い時＝1つずつ・絵を左に（3つ並べると1つが細くなりすぎる） */
@container start (max-width:1020px){
  .hj-jump{display:flex}
  .ways{grid-template-columns:1fr;grid-template-rows:none;row-gap:20px}
  .way{grid-row:auto;grid-template-columns:minmax(0,40%) minmax(0,1fr);
    grid-template-areas:"h h" "pic sum" "pic do" "pic note" "pic more" "pic foot";grid-template-rows:auto auto auto auto auto 1fr}
  .wy-h{grid-area:h}
  .wy-pic{grid-area:pic;align-self:start;margin:16px 0 18px 18px}
  .wy-sum{grid-area:sum;margin-top:16px}
  .wy-do{grid-area:do}
  .wy-note{grid-area:note}
  .wy-more{grid-area:more}
  .wy-foot{grid-area:foot;align-self:end}
}
/* スマホ＝縦に積む */
@container start (max-width:620px){
  .way{display:flex;flex-direction:column}
  .wy-pic{margin:12px 14px 0}
  .wy-h{padding:12px 14px 10px;gap:12px}
  .wy-sum,.wy-do,.wy-note,.wy-more{margin-left:14px;margin-right:14px}
  .wy-foot{padding:14px 14px 16px;align-self:stretch}   /* 縦に積む時の end は「右へ寄せる」になる */
}

/* ═══ まちの住人 ═══ */
.feat{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:20px;align-items:stretch}
.feat-card{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:0 4px 0 var(--ink);
  padding:clamp(14px,1.6vw,22px)}
.feat-k{position:absolute;top:-12px;left:16px;margin:0;font-family:var(--pix);font-size:.78rem;background:var(--ink);color:var(--paper);padding:1px 10px;border-radius:3px;letter-spacing:.06em}
.feat-h{display:flex;align-items:flex-end;gap:14px}
.feat-h .sprite{width:80px;height:112px;flex:none;background-repeat:no-repeat;background-size:500% 100%}
.feat-h .tx b{font-family:var(--pix);font-weight:400;font-size:1.45rem;display:block;line-height:1.3}
.feat-h .tx span{display:block;font-size:.86rem;color:var(--sub);line-height:1.5}
.feat-h .tx .kana{font-size:.76rem}
.feat-map{margin-left:auto;align-self:center;font-family:var(--pix);font-size:.84rem;border:2px solid var(--ink);background:var(--paper2);border-radius:3px;padding:3px 10px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 0 var(--ink)}
.feat-map:hover{background:var(--card-hi)}
.feat-map i{font-style:normal}
.feat-body{display:grid;gap:16px;align-items:start}
.feat-card.big .feat-body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.feat-side{display:flex;flex-direction:column;gap:12px}
.feat .facts{font-size:.92rem}
.feat .facts li{padding:6px 0;border-bottom:1px dashed var(--line);display:flex;gap:10px}
.feat .facts li::before{content:"▶";font-family:var(--pix);font-size:.66rem;color:var(--gold);padding-top:.5em}
.feat .note{margin:0}
.feat .pic{border:2px solid var(--ink);border-radius:3px;overflow:hidden}
.feat .pic img{width:100%}
.rg-h{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-top:34px}
.rg-h .pdp-h{margin:0}
.rg-h .note{margin:0}
.resgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.res{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:0;cursor:pointer;
  box-shadow:0 3px 0 var(--ink);overflow:hidden;transition:transform .12s}
.res:hover{transform:translateY(-3px);background:var(--card-hi)}
.res:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.res.on{outline:3px solid var(--gold);outline-offset:2px}
.r-pic{display:flex;align-items:flex-end;justify-content:center;height:118px;border-bottom:2px solid var(--ink);
  background:radial-gradient(ellipse 55% 20% at 50% 94%,rgba(42,35,27,.2),transparent 70%),linear-gradient(var(--paper2),var(--paper3))}
.r-pic img{max-height:108px;width:auto}
.res.secret .r-pic{background:var(--ink);align-items:center}
.res.secret .r-pic i{font-style:normal;font-family:var(--pix);font-size:2.4rem;color:var(--paper)}
.r-no{position:absolute;left:6px;top:6px;font-family:var(--pix);font-size:.68rem;background:rgba(255,253,246,.9);border:1px solid var(--ink);border-radius:3px;padding:0 5px;line-height:1.6}
.res.secret .r-no{background:var(--paper2)}
.r-vid{position:absolute;right:6px;top:6px;font-family:var(--pix);font-size:.66rem;background:var(--red);color:#fff;border:1px solid var(--ink);border-radius:3px;padding:0 5px;line-height:1.6}
.r-tx{display:block;padding:7px 10px 9px}
.r-tx b{display:block;font-family:var(--pix);font-weight:400;font-size:.98rem;line-height:1.3}
.r-tx span{display:block;font-size:.76rem;color:var(--sub);line-height:1.4;margin-top:2px}

/* ═══ 工場見学（大きなプレーヤー＋4つ）═══ */
.theater{display:flex;gap:20px;align-items:flex-start}
.th-main{flex:1 1 640px;min-width:0;max-width:max(620px,calc((100vh - 560px) * 16 / 9 + 40px))}
.th-main{background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:0 4px 0 var(--ink);padding:clamp(12px,1.4vw,18px)}
.th-list{flex:1 1 320px;min-width:280px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.th-item{display:grid;grid-template-columns:42% minmax(0,1fr);text-align:left;background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:0;overflow:hidden;cursor:pointer;
  box-shadow:0 3px 0 var(--ink);transition:transform .12s}
.th-item:hover{background:var(--card-hi);transform:translateX(-2px)}
.th-item[aria-pressed="true"]{outline:3px solid var(--gold);outline-offset:2px;background:var(--card-hi)}
.th-pic{background:#14120f no-repeat center/cover;border-right:2px solid var(--ink);min-height:92px}
.th-tx{display:flex;flex-direction:column;gap:1px;padding:8px 11px;min-width:0}
.th-tx b{font-family:var(--pix);font-weight:400;font-size:1.02rem;line-height:1.3}
.th-ti{font-size:.8rem;line-height:1.4}
.th-who{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--sub)}
.th-who i{width:16px;height:16px;border-radius:3px;border:1px solid var(--ink);background:center/cover no-repeat;flex:none}
.th-tx em{font-style:normal;font-family:var(--pix);font-size:.74rem;background:var(--paper2);border-radius:3px;padding:0 6px;width:max-content;margin-top:3px}
.th-tx small{font-size:.7rem;color:var(--sub)}

/* ═══ みんなの作品・使った人の声 ═══ */
/* ★10/25 みんなの作品（前の /works のページの一覧・送る・取り下げ）＝紙の札のカード・絞りこみの札・大きく見る窓 */
/* ★2026-11-11 作り直し＝あなたが送った作品（様子・書き直し・つづきを足す・取り下げ）・きまり・くわしく書く・送る前の確認・ページ送り・タグ
   書き直しの窓と確かめの窓（.wk-dlg・.wk-ask）は body の直下に作る＝.v-works の外。
   display を決めた物は hidden が効かない＝作品の所は、まとめて強く消す（1つずつ [hidden] を書き足さない） */
/* 紙の色（--paper・--paper2）の上では、補助の字の色（--sub #7a6d58）が読みにくい（明るさの比 4.4・3.9）＝新しく足す所は、少し濃い色（5.1・4.5）を使う。値はここ1か所 */
.v-works{--sub-dk:#6f6350}
.v-works [hidden],.wk-vw [hidden],.wk-dlg [hidden],.wk-ask [hidden]{display:none !important}
/* ★2026-11-11 作品の所の文は、言葉の切れ目（文節）で折る＝子どもが読みやすい（Chrome・Edge。知らないブラウザは今までどおり）。
   文節より せまい所ではみ出さないように、どこでも折れるようにしておく（幅の計算は今までと同じになる）。書く欄の中は、ふつうの折り方のまま。英語のページは変えない */
:is(.v-works,.wk-vw,.wk-dlg,.wk-ask):lang(ja){word-break:auto-phrase;overflow-wrap:anywhere}
/* 英語のページでも、日本語の印（lang="ja"）が付いた作品の文（題名・ひと言など＝works.js の langOf）は、文節で折る */
:is(.v-works,.wk-vw,.wk-dlg,.wk-ask) [lang="ja"]{word-break:auto-phrase;overflow-wrap:anywhere}
:is(.v-works,.wk-dlg) :is(input,textarea,select){word-break:normal}
.wk-mine-empty,.wk-none{text-wrap:balance}
.wk-list,.wk-post,.wk-mine,.wk-rule{scroll-margin-top:14px}
/* 押せないボタン（送っている間など）。map.css はほかのページも読む＝作品の所だけに効かせる */
:is(.v-works,.wk-vw,.wk-dlg,.wk-ask) .btn:disabled{opacity:.5;cursor:default;pointer-events:none}
.vh-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.vh-acts .btn{font-size:1rem;padding:8px 16px}
.wk-list{margin-bottom:26px}
.wk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-bottom:14px}
.wk-cnt{margin:0;font-family:var(--pix);font-size:.98rem;color:var(--ink2)}
.wk-cnt b{font-size:1.3rem;margin:0 4px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font-family:var(--pix);font-size:.88rem;background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:3px 12px;cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.chips button small{margin-left:6px;font-size:.76rem;color:var(--sub)}
.chips button[aria-pressed="true"]{background:var(--side);color:var(--side-tx)}
.chips button[aria-pressed="true"] small{color:var(--gold-lt)}
.wk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.wk{background:var(--card);border:2px solid var(--ink);border-radius:4px;overflow:hidden;box-shadow:0 4px 0 var(--ink);display:flex;flex-direction:column}
.wk-ph{position:relative;display:block;width:100%;padding:0;border:0;border-bottom:2px solid var(--ink);background:#1f1a14;cursor:zoom-in;aspect-ratio:16/10;overflow:hidden}
.wk-ph img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.wk-ph.tall img{object-fit:contain}
.wk-ph:hover img{transform:scale(1.03)}
.wk-tag{position:absolute;left:8px;top:8px;font-family:var(--pix);font-size:.76rem;line-height:1.5;background:var(--gold-lt);color:var(--ink);border:1.5px solid var(--ink);border-radius:2px;padding:0 6px}
.wk-n{position:absolute;right:8px;bottom:8px;font-size:.74rem;background:rgba(34,28,21,.85);color:#fff;border-radius:2px;padding:0 6px}
.wk-tx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.wk-t{font-family:var(--pix);font-weight:400;font-size:1.02rem;line-height:1.4}
.wk-c{margin:0;font-size:.9rem;line-height:1.65}
.wk-by{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:.8rem;color:var(--sub)}
.wk-by b{font-family:var(--pix);font-weight:400;font-size:.88rem;color:var(--ink)}
.wk-by b.anon{color:var(--sub)}
/* ★2026-11-11 一覧＝知らせの帯・何も無い時・タグの段・ページ送り */
.wk-t,.wk-c,.wk-body{overflow-wrap:anywhere}
/* 作品の題名は、行の長さをそろえて折る＝最後の行に1字だけ残らない（「…電気をおくる／線」→「…工場と、／電気をおくる線」）。Chrome・Edge。知らないブラウザは今までどおり */
.wk-t,.wk-my-h h4{text-wrap:balance}
/* 一覧のカードでは、ひと言は4行まで（つづきは、大きく見る画面で全部読める）＝長いひと言が1つあっても、その段のカードが たてに伸びすぎない */
.wk .wk-c{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.wk-note{margin:0 0 12px;font-size:.92rem;background:var(--paper2);border-radius:3px;padding:8px 12px}
.wk-note.ng{background:#fbe3dc;color:#8f2a17}
.wk-none{grid-column:1/-1;margin:0;padding:22px;text-align:center;color:var(--sub);background:var(--card);border:2px dashed var(--line2);border-radius:4px}
.wk-cards[aria-busy="true"]{opacity:.55;transition:opacity .15s}
.chips-l{align-self:center;font-family:var(--pix);font-size:.82rem;color:var(--sub-dk);margin-right:2px}
.wk-tagchips{flex-basis:100%}
.wk-tagchips button{font-size:.8rem;padding:2px 10px;box-shadow:none;border-width:1.5px}
.wk-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:18px}
.wk-pager button{position:relative;min-width:38px;height:38px;padding:0 8px;font-family:var(--pix);font-size:.95rem;line-height:1;background:var(--card);border:2px solid var(--ink);border-radius:3px;box-shadow:0 2px 0 var(--ink);cursor:pointer}
.wk-pager button:hover{background:var(--card-hi)}
.wk-pager button[aria-current="page"]{background:var(--side);color:var(--side-tx);cursor:default}
.wk-pager button:disabled{opacity:.35;cursor:default;box-shadow:none}
.wk-pager .gap{color:var(--sub);padding:0 2px}
/* 前へ・次への矢印は字（‹ ›）で出さず、「く」の線で描く（字はボタンの真ん中からずれる）。
   正方形の左と下の線を 45 度回すと「<」＝線の広がりは中心から左へ 7.07px・右へ 1.41px（10px の時）＝約 3px 右へずらすと真ん中 */
.wk-pager .arw{font-size:0}
.wk-pager .arw::before{content:"";box-sizing:border-box;position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -2px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg)}
.wk-pager .arw:last-child::before{margin-left:-8px;transform:rotate(-135deg)}
/* ★2026-11-11 色を強くする表示（Windows のコントラスト）では背景の色が消える＝今えらんでいる分け方・タグ・ページ・大きく見る窓の画像を、Highlight の色で見せる */
@media (forced-colors:active){
  .v-works .chips button[aria-pressed="true"],.wk-pager button[aria-current="page"]{background:Highlight;color:HighlightText;border-color:Highlight;forced-color-adjust:none}
  .v-works .chips button[aria-pressed="true"] small{color:HighlightText}
  .wk-vw-thumbs button[aria-current="true"]{outline:3px solid Highlight;outline-offset:2px}
}
.wk-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
.wk-post h3,.wk-mine h3{font-family:var(--pix);font-weight:400;font-size:1.25rem}
.wk-post .lead,.wk-mine .lead{font-size:.92rem;margin:6px 0 0}
.wk-steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0}
.wk-steps li{counter-increment:s;position:relative;background:var(--paper);border:1.5px solid var(--line2);border-radius:3px;padding:30px 12px 10px;font-size:.84rem;line-height:1.6}
.wk-steps li::before{content:counter(s);position:absolute;left:10px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--side);color:var(--gold-lt);font-family:var(--pix);font-size:.8rem;display:grid;place-items:center}
.wk-steps li b{display:block;font-family:var(--pix);font-weight:400;font-size:.92rem}
.wk-howto{margin-top:12px;background:var(--paper2);border-radius:3px;padding:10px 14px}
.wk-howto-h{margin:0 0 4px;font-family:var(--pix);font-size:.9rem;color:var(--ink)}
.wk-howto dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.84rem;line-height:1.6}
.wk-howto dt{font-weight:700;color:var(--ink)}
.wk-howto dd{margin:0}
kbd{font-family:var(--sans);font-size:.8em;background:#fff;border:1px solid var(--line2);border-bottom-width:2px;border-radius:3px;padding:0 5px}
/* ★2026-11-11 きまり＝載せられる物（緑）と載せられない物（赤）を左右に並べる。
   印は字で出さず線で描く（字は丸の真ん中からずれる）。○ は英語では「よい」の意味で伝わらない＝英語のページはチェックの形 */
.wk-rule{margin-top:12px;font-size:.86rem;line-height:1.7;background:var(--paper);border:1.5px solid var(--line2);border-radius:3px;padding:10px 14px 12px}
.wk-rule p{margin:0}
.wk-rule-h{font-family:var(--pix);font-size:.95rem;color:var(--ink)}
.wk-rule-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px;margin-top:8px}
.wk-rule-ok,.wk-rule-ng{background:var(--card);border:1.5px solid var(--line2);border-top:4px solid var(--green);border-radius:3px;padding:8px 12px 10px}
.wk-rule-ng{border-top-color:var(--red)}
.wk-rule-t{display:flex;align-items:center;gap:7px;font-family:var(--pix);font-size:.92rem;color:var(--ink)}
.wk-rule ul{list-style:disc;padding-left:1.25em;margin-top:4px}
.wk-rule .wk-rule-ft{margin-top:10px;font-size:.82rem;color:var(--sub)}
.wk-rule .mk{position:relative;flex:none;width:20px;height:20px;border-radius:50%;background:var(--green-dk);font-size:0;line-height:0}
.wk-rule-ng .mk{background:#c4412a}
.wk-rule .mk::before,.wk-rule .mk::after{content:"";box-sizing:border-box;position:absolute}
.wk-rule-ok .mk::before{inset:5px;border:2px solid #fff;border-radius:50%}
html[lang="en"] .wk-rule-ok .mk::before{inset:auto;left:50%;top:50%;width:6px;height:10px;margin:-7px 0 0 -3px;border:solid #fff;border-width:0 2px 2px 0;border-radius:0;transform:rotate(45deg)}
.wk-rule-ng .mk::before,.wk-rule-ng .mk::after{left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;background:#fff;transform:rotate(45deg)}
.wk-rule-ng .mk::after{transform:rotate(-45deg)}
/* 色を強くする表示では背景の色が消される＝描いた印をやめて、字（○・✓・×）を出す */
@media (forced-colors:active){.wk-rule .mk{width:auto;height:auto;background:none;font-size:1em;line-height:1.2}.wk-rule .mk::before,.wk-rule .mk::after{content:none}}
/* フォームの欄の形は、書き直しの窓・つづきを足す窓（.wk-dlg）でも同じ物を使う */
:is(#wkForm,.wk-dlg) .fld{margin-top:14px}
:is(#wkForm,.wk-dlg) .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* えらぶ欄（select）は行の高さが効かず、となりの書く欄より低くなる＝高さをそろえる（1.85＝本文の行の高さ・22px＝上下のあきと枠） */
:is(#wkForm,.wk-dlg) select{min-height:calc(1.85em + 22px)}
/* 何もえらんでいない時の字は、例の文（placeholder）と同じ うすい色に（まだ入れていないと分かる）。えらぶ物の一覧は、いつも黒。:has を知らないブラウザは、この1行だけ飛ばす（黒のまま） */
:is(#wkForm,.wk-dlg) select:has(option[value=""]:checked){color:#757575}
:is(#wkForm,.wk-dlg) select option{color:#000}
:is(#wkForm,.wk-dlg) .lbl{display:block;font-family:var(--pix);font-size:.92rem}
:is(#wkForm,.wk-dlg) .opt{font-family:var(--sans);font-size:.78rem;color:var(--sub)}
:is(#wkForm,.wk-dlg) .cnt-l{float:right;font-family:var(--sans);font-size:.76rem;color:var(--sub)}
:is(#wkForm,.wk-dlg) .hint{font-size:.78rem;color:var(--sub);margin-top:3px}
.wk-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-top:6px;min-height:118px;border:2px dashed var(--ink);border-radius:4px;
  background:#fffef8;font-family:var(--pix);font-size:.96rem;cursor:pointer;text-align:center;padding:12px}
.wk-drop svg{width:38px;height:38px;display:block;flex:none}
/* ★10/25 TAKURO「カメラのマークと文字のバランスが悪い」＝map.css の「.fld label{display:block}」が強く、横並びの文字の線にずれていた
   ＝こちらを強くして、カメラの上・文字の下を、まん中にそろえる */
.fld label.wk-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;line-height:1.4}
.wk-drop span{display:block;text-align:center}
.wk-drop.on,.wk-drop:hover{background:var(--card-hi)}
.wk-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.wk-thumbs{display:flex;flex-wrap:wrap;gap:18px 10px;margin-top:8px}
.wk-thumbs figure{position:relative;margin:0;width:130px}
.wk-thumbs img{width:130px;height:82px;object-fit:cover;border:2px solid var(--ink);border-radius:3px}
.wk-thumbs figcaption{font-size:.74rem;color:var(--sub)}
/* ★2026-11-11 様子の札（掲載中・確認中・載せていません・送る前の確認）。「あなたが送った作品」のカード・大きく見る窓・書き直しの窓のサムネイルで使う。
   色は読みやすさを計算で決めた＝白 on 緑 6.6・こい茶 on 黄 9 以上・#a8321d on #fbe3dc 5.4（どれも 4.5 以上） */
.wk-st{display:inline-block;flex:none;font-family:var(--pix);font-size:.76rem;line-height:1.5;border:1.5px solid var(--ink);border-radius:2px;padding:0 7px;background:var(--paper2);color:var(--ink);white-space:nowrap}
.wk-st.live{background:var(--green-dk);border-color:var(--green-dk);color:#fff}
.wk-st.wait{background:var(--gold-lt)}
.wk-st.no{background:#fbe3dc;border-color:var(--red);color:#a8321d}
.wk-st.prev{background:var(--side);border-color:var(--side);color:var(--gold-lt)}
.wk-thumbs figure .wk-st{position:absolute;left:4px;top:4px;font-size:.68rem}
/* 並べ替え＝サムネイルの下に「前へ・表紙にする・次へ」。サムネイルの幅 130px は変えない（矢印 24px×2＋すき間 3px×2＋まん中 76px）。
   矢印は字（‹ ›）で出さず、線で描く（字はボタンの真ん中からずれる）。8px の正方形の左と下の線を 45 度回すと「<」＝2px 右へずらすと真ん中 */
.wk-mv{display:flex;align-items:stretch;gap:3px;margin-top:4px}
.wk-mv button{position:relative;flex:none;width:24px;height:26px;padding:0;border:2px solid var(--ink);border-radius:3px;background:var(--card);color:var(--ink);cursor:pointer}
.wk-mv button:hover{background:var(--card-hi)}
.wk-mv button:disabled{opacity:.35;cursor:default;background:var(--card)}
.wk-mv .cv{flex:1;min-width:0}
.wk-mv button.cv{width:auto;padding:0 2px;font-family:var(--sans);font-size:11px;font-weight:500;line-height:1;white-space:nowrap}
.wk-mv [data-act="up"],.wk-mv [data-act="down"]{font-size:0}
.wk-mv [data-act="up"]::before,.wk-mv [data-act="down"]::before{content:"";box-sizing:border-box;position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -2px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg)}
.wk-mv [data-act="down"]::before{margin-left:-6px;transform:rotate(-135deg)}
/* つかんで動かす間・消す物（書き直しの窓） */
.wk-thumbs figure[draggable="true"]{cursor:grab}
.wk-thumbs figure.drag{opacity:.45}
.wk-thumbs figure.over img{box-shadow:0 0 0 3px var(--gold)}
.wk-thumbs figure.gone img{opacity:.35;filter:grayscale(1)}
.wk-thumbs figure.gone figcaption{color:#b0381f}
/* ★2026-11-10 TAKURO「右上の×マークずれてない？直して」＝字の「×」はボタンの内側（幅8px）より広く、右へはみ出して丸の真ん中から約3pxずれていた
   ＝×を字で出さず（font-size:0）、線2本で丸の真ん中に描く（どのフォント・どの文字の大きさでもずれない） */
/* ★2026-11-11 サムネイルの中に並べ替えのボタンも入った＝×の形は、×のボタン（.wk-x）と窓を閉じる×（.wk-dlg-x）だけに付ける（丸 24px・線 12px は前のまま） */
.wk-x,.wk-dlg-x{position:relative;flex:none;width:24px;height:24px;padding:0;border-radius:50%;border:2px solid var(--ink);background:var(--card);cursor:pointer;font-size:0;line-height:0}
.wk-x::before,.wk-x::after,.wk-dlg-x::before,.wk-dlg-x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transform:rotate(45deg)}
.wk-x::after,.wk-dlg-x::after{transform:rotate(-45deg)}
.wk-x:hover,.wk-dlg-x:hover{background:var(--card-hi)}
.wk-thumbs .wk-x{position:absolute;right:-6px;top:-6px}
.wk-dlg-x{width:34px;height:34px;box-shadow:0 2px 0 var(--ink)}
.wk-dlg-x::before,.wk-dlg-x::after{width:14px;margin-left:-7px}
.wk-dlg-x:active{transform:translateY(2px);box-shadow:none}
.wk-dlg-x:disabled{opacity:.4;cursor:default;pointer-events:none}
/* 色を強くする表示（Windows のハイコントラスト）では背景の色が消される＝線をシステムの字の色で描く */
@media (forced-colors:active){.wk-x::before,.wk-x::after,.wk-dlg-x::before,.wk-dlg-x::after{background:ButtonText}}
.wk-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.wk-kinds label{cursor:pointer}
.wk-kinds input{position:absolute;opacity:0}
.wk-kinds span{display:inline-block;font-family:var(--pix);font-size:.9rem;border:2px solid var(--ink);border-radius:20px;padding:3px 14px;background:#fff}
.wk-kinds input:checked + span{background:var(--gold-lt)}
.wk-kinds input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}
/* ★2026-11-11 タグを5つえらんだあとの残り（押せない）。色を強くする表示では背景の色が消される＝えらんだ物をシステムの色で出す */
.wk-kinds input:disabled + span{opacity:.4;cursor:default}
@media (forced-colors:active){.wk-kinds input:checked + span{background:Highlight;color:HighlightText;forced-color-adjust:none}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.7;cursor:pointer}
.consent input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--green-dk)}
/* ★2026-11-11 .fld label（ブロック）に負けて、文の2行目がチェックの下にもぐっていた＝作品の所は、チェックの右に文をそろえる */
:is(#wkForm,.wk-dlg) label.consent{display:flex}
/* ★2026-11-11 画像ごとの説明＝小さい絵の右に、1行の欄。.fld label（ドットの字・ブロック）より強く書く。欄は label の字を継ぐ（font:inherit）＝本文の字に戻す */
.wk-caps{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.wk-caps:empty{display:none}
.wk-cap{display:flex;align-items:center;gap:10px}
.wk-cap img{flex:none;width:72px;height:46px;object-fit:cover;border:2px solid var(--ink);border-radius:3px;background:#1f1a14}
.fld .wk-cap label{flex:1;min-width:0}
.wk-cap .no{display:block;font-size:.76rem;line-height:1.4;color:var(--sub);margin-bottom:5px}   /* ★2026-11-11 下のあき＝欄に入った時の金色の枠（3px＋はなれ2px）が「1枚目」の字にかぶらない */
.wk-cap input[type="text"]{font-family:var(--sans);font-size:.95rem;padding:6px 10px}
.wk-cap .wk-x{align-self:flex-end;margin-bottom:7px}
/* ★2026-11-11 くわしく書く＝深さの2段目。閉じたままでも送れる。開く印は線の「>」（開くと下を向く） */
.wk-deep{margin-top:16px;border:2px solid var(--ink);border-radius:4px;background:var(--paper)}
.wk-deep summary{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:10px 14px 10px 36px;line-height:1.5;border-radius:2px;cursor:pointer;list-style:none}
.wk-deep summary::-webkit-details-marker{display:none}
.wk-deep summary::before{content:"";box-sizing:border-box;position:absolute;left:14px;top:17px;width:9px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
.wk-deep[open] summary::before{transform:translate(2px,-2px) rotate(45deg)}
.wk-deep summary:hover{background:var(--card-hi)}
.wk-deep[open] summary{border-bottom:1.5px dashed var(--line2);border-radius:2px 2px 0 0}
.wk-deep-t{font-family:var(--pix);font-size:1rem;color:var(--ink)}
.wk-deep-s{flex-basis:100%;font-size:.8rem;color:var(--sub)}
.wk-has{font-family:var(--pix);font-size:.74rem;line-height:1.5;background:var(--gold-lt);color:var(--ink);border:1.5px solid var(--ink);border-radius:2px;padding:0 6px}
.wk-deep-in{padding:2px 14px 14px}
/* ★2026-11-11 送る前の確認＝一覧と同じ作りのカードを1枚（画像をえらぶと出る） */
.wk-prevbox{margin-top:16px;background:var(--paper);border:1.5px dashed var(--line2);border-radius:4px;padding:12px 14px 14px}
.wk-prev-h{margin:0;font-family:var(--pix);font-size:.95rem;line-height:1.5;color:var(--ink)}
.wk-prev-s{margin:2px 0 10px;font-size:.8rem;line-height:1.6;color:var(--sub-dk)}
.wk-cards.wk-prev{grid-template-columns:minmax(0,300px);margin-bottom:12px}
.wk-prevbox .btn{font-size:.9rem;padding:6px 14px;box-shadow:0 3px 0 var(--ink)}
.wk-prevbox .btn:active{box-shadow:0 0 0 var(--ink)}
/* 送っている間の進み。色は疑似要素で付ける。webkit と moz は別々の決まりに書く（知らない方が混ざると、決まりごと無効になる） */
#wkBar,#wkAddBar{display:block;width:100%;height:12px;margin-top:12px;-webkit-appearance:none;appearance:none;border:2px solid var(--ink);border-radius:3px;background:#fff;overflow:hidden}
#wkBar::-webkit-progress-bar,#wkAddBar::-webkit-progress-bar{background:#fff}
#wkBar::-webkit-progress-value,#wkAddBar::-webkit-progress-value{background:var(--gold)}
#wkBar::-moz-progress-bar,#wkAddBar::-moz-progress-bar{background:var(--gold)}
/* 送っている間は、送るボタンと知らせ以外をさわれなくする（スクリプトが inert を付ける）＝見た目も薄く */
#wkForm > [inert],.wk-dlg-body[inert]{opacity:.55}
/* ★2026-11-11 何行かの文の欄は、書いた分だけ下へ伸びる（field-sizing＝Chrome・Edge。知らないブラウザは、rows で決めた高さのまま＝右下をつかんで伸ばせる）。
   伸びるのは画面の高さの6割まで（それより長い文は、欄の中で動かして読む）。はじめの高さは、どのブラウザでも同じになるように rows と同じ行の数で決める
   （1.85＝本文の行の高さ・22px＝上下のあきと枠）。ブロックにするのは、欄の下にできる数 px のすき間（字の並びの線の分）を無くすため */
.v-works textarea,.wk-dlg textarea{display:block;resize:vertical;max-height:60vh;field-sizing:content}
#wkBody,#wkEdBody{min-height:calc(1.85em * 5 + 22px)}
#wkDev,#wkEdDev{min-height:calc(1.85em * 3 + 22px)}
/* ひと言は、長い文が折り返して全部見えるように、2行の欄にした（改行は入らない＝スクリプトが止める。載る時は1行の文） */
:is(.v-works,.wk-dlg) textarea[data-line]{min-height:calc(1.85em * 2 + 22px)}
/* キーボードで画像の欄に来た時の枠（中の input は透明＝枠を外の箱に出す）。:has を知らないブラウザは、この1行だけ飛ばす */
.wk-drop:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.wk-done{margin-top:12px;text-align:center;background:var(--paper);border:2px solid var(--green-dk);border-radius:4px;padding:18px}
.wk-done h4{font-family:var(--pix);font-weight:400;font-size:1.25rem;color:var(--green-dk)}
.wk-cols .small{font-size:.82rem;color:var(--sub);line-height:1.7}
/* ★2026-11-11 紙の色の箱の中は、補助の字（.hint・.opt・数える所・.small）をまとめて少し濃く。送る前の確認の箱は入れない（中のカードを、一覧と同じ色で見せる） */
.wk-deep,.wk-done,.wk-mine-empty{--sub:var(--sub-dk)}
/* 送ったあと＝短い文は真ん中・長い文は左から。p の余白は自分で決める（全体の決まりが無い） */
.wk-done p{margin:8px 0 0}
#wkDoneKeep,#wkDoneNoKeep,#wkDoneForget{text-align:left}
.wk-done .btn{margin-top:14px}
/* 文の中のボタン（この端末から外す・書き直しをやめる）＝リンクと同じ見た目。字と色は button の決まり（font:inherit・color:inherit）のまま */
.v-works button.lnk{display:inline;padding:0;border:0;background:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* 作品の所の「うまくいかなかった」の知らせ＝小さい字でも読める赤（--red は 4.4・こちらは 6.0） */
:is(.v-works,.wk-dlg) .vo-msg.ng{color:#b0381f}
/* ★2026-11-11 あなたが送った作品＝送ったブラウザが覚えている作品（カードは works_mine.js が作る）。
   右の細い列（中は約 300px）に入る形＝小さい絵の右に、様子の札・名前・送った日。その下に、様子の説明・理由・ボタンを幅いっぱいに。
   .wk-my-tx は箱を作らない（display:contents）＝中の物を、カードの格子に直接ならべる。2行目を 1fr にして、絵の方が高い時の余りを下へ寄せる */
.wk-mine .vo-msg{margin:10px 0 0}
.wk-mine-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.wk-mine-empty{margin:14px 0 0;padding:14px;text-align:center;font-size:.9rem;color:var(--sub);background:var(--paper);border:1.5px dashed var(--line2);border-radius:3px}
.wk-mine-note{margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line2);display:flex;flex-direction:column;gap:6px}
.wk-mine-note p{margin:0}
.wk-mine-note b{color:var(--ink2)}
.wk-cols .wk-mine-foot{margin:12px 0 0;padding:8px 12px;background:var(--paper2);border-radius:3px;color:var(--ink2)}
.wk-my{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;align-items:start;background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:10px;box-shadow:0 3px 0 var(--ink)}
.wk-my-tx{display:contents}
.wk-my-ph{grid-column:1;grid-row:1 / span 2;position:relative;display:block;width:100%;padding:0;border:2px solid var(--ink);border-radius:3px;background:#1f1a14;aspect-ratio:16/10;overflow:hidden;cursor:zoom-in}
.wk-my-ph img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.wk-my-ph:enabled:hover img{transform:scale(1.04)}
.wk-my-ph:disabled{cursor:default}
.wk-my-ph .wk-n{right:4px;bottom:4px;font-size:.68rem;line-height:1.5;padding:0 5px}
.wk-my-h{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.wk-my-h h4{font-family:var(--pix);font-weight:400;font-size:1rem;line-height:1.4;overflow-wrap:anywhere}
.wk-my-h .none{color:var(--sub)}
.wk-my-meta{grid-column:2;margin:2px 0 0;font-size:.78rem;line-height:1.5;color:var(--sub)}
.wk-my-s,.wk-my-why,.wk-my-note,.wk-my-draft,.wk-my-acts,.wk-my-msg{grid-column:1 / -1}
.wk-my-s{margin:8px 0 0;font-size:.86rem;line-height:1.7}
.wk-my-why,.wk-my-note{margin:8px 0 0;font-size:.86rem;line-height:1.7;padding:8px 10px;border-radius:3px;white-space:pre-wrap;overflow-wrap:anywhere}
.wk-my-why{background:#fbe3dc;border-left:4px solid var(--red)}
.wk-my-note{background:var(--paper2);border-left:4px solid var(--gold)}
.wk-my-why b,.wk-my-note b{display:block;font-family:var(--pix);font-weight:400;font-size:.8rem;color:var(--ink)}
.wk-my-why b{color:#a8321d}
.wk-my-draft{margin:8px 0 0;font-size:.84rem;line-height:1.7;padding:6px 10px;background:var(--card-hi);border:1.5px dashed var(--gold);border-radius:3px}
.wk-my-acts{display:flex;flex-wrap:wrap;gap:8px 6px;margin-top:10px}
.wk-my-acts .btn{font-size:.84rem;padding:5px 10px;box-shadow:0 2px 0 var(--ink)}
.wk-my-acts .btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}
/* 取り下げる＝ほかのボタンから離して右はしに。赤い枠と字（白地で 6.0） */
.wk-my-acts .btn.ng{margin-left:auto;color:#b0381f;border-color:#b0381f;box-shadow:0 2px 0 #b0381f}
.wk-my-acts .btn.ng:hover{background:#fbe3dc}
.wk-my-acts .btn.ng:active{box-shadow:0 0 0 #b0381f}
.wk-my-msg{margin:8px 0 0;font-size:.84rem;line-height:1.6}
.wk-my-msg.ok{color:var(--green-dk)}
.wk-my-msg.ng{color:#b0381f}
/* 操作の間はカードごと薄く（中のボタンを二重に薄くしない） */
.wk-my[aria-busy="true"]{opacity:.6}
.wk-my[aria-busy="true"] .btn:disabled{opacity:1}
/* 大きく見る＝★2026-11-11 夜 作り直し（TAKURO「1枚ずつの画像をもっと画面全体でみたい」）
   窓は画面いっぱい・まわりは暗く・絵は1枚ずつ、入るいちばん大きな大きさで出す。
   ・上の帯（.wk-vw-top）＝作品の名前・何枚目か・閉じる。窓を下へ送っても上に残る
   ・絵の段（.wk-vw-stage）＝絵・画像ごとの説明・小さい絵の列。横長の画面では、帯の下の高さを全部使う
   ・作品の説明（.wk-vw-cap）＝ふつうは絵の段の下（下へ送ると読める）。
     横が縦の2倍以上で幅 1000px 以上の画面だけ、右に並べる（16:9 の絵は、この形の画面ではもともと横が余る＝右に置いても絵は小さくならない）
   横になぞると次の画像へ（縦のスクロールはそのまま） */
.wk-vw{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#15120f;overflow:auto;overscroll-behavior:contain}
.wk-vw::backdrop{background:#15120f}
.wk-vw-in{display:flex;flex-direction:column;min-height:100%}
.wk-vw-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px 14px;min-height:52px;padding:6px 12px 6px 16px;background:rgba(21,18,15,.94);color:#efe6cf;border-bottom:1px solid rgba(239,230,207,.14)}
.wk-vw-hd{flex:1;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}
.wk-vw-hd b{font-family:var(--pix);font-weight:400;color:#fff6dc}   /* ページ全体の b は濃い字＝暗い帯では明るい字に */
.wk-vw-hd span{margin-left:12px;font-size:.85rem;color:#b9ad92}
.wk-vw-no{margin:0;font-family:var(--pix);font-size:.9rem;color:#d9cfb6;white-space:nowrap}
.wk-vw-x{flex:none;font-family:var(--pix);font-size:.88rem;border:2px solid var(--ink);background:var(--card);border-radius:3px;padding:3px 12px;cursor:pointer;box-shadow:0 2px 0 #000}
.wk-vw-stage{display:flex;flex-direction:column}
/* 絵＝ふつうは「幅いっぱい・高さは絵の形のまま（画面の高さから帯と小さい絵の列の分を引いた所まで）」。
   とても横長の絵（パノラマなど）でも、左右の矢印が入る高さ（150px）は取り、絵は上下のまん中に置く */
.wk-vw-fig{position:relative;margin:0;display:flex;align-items:center;justify-content:center;min-height:150px;touch-action:pan-y}
.wk-vw-fig img{display:block;width:100%;height:auto;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);object-fit:contain}
/* 前と次＝字ではなく線で描く（字だと丸のまん中からずれる） */
.wk-vw-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:rgba(255,253,246,.92);font-size:0;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.45)}
.wk-vw-nav::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border:solid currentColor;border-width:0 0 3px 3px}
.wk-vw-nav.prev{left:12px}.wk-vw-nav.next{right:12px}
.wk-vw-nav.prev::before{transform:translate(-30%,-50%) rotate(45deg)}
.wk-vw-nav.next::before{transform:translate(-70%,-50%) rotate(-135deg)}
.wk-vw-nav:hover{background:#fff}
/* 画像ごとの説明（あなたが送った作品の時は、画像ごとの札も）＝絵のすぐ下・明るい字 */
.wk-vw-ic{margin:0;padding:10px 16px 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 10px;font-size:.95rem;line-height:1.6;color:#efe6cf;text-align:center;overflow-wrap:anywhere}
/* 小さい絵の列＝折り返さずに横へ送る（1作品 24枚まで）。収まる時はまん中・あふれる時は左はしから（justify-content:center だと左が切れて戻れない） */
.wk-vw-thumbs{position:relative;display:flex;gap:8px;overflow-x:auto;padding:10px 12px;scrollbar-width:thin;scrollbar-color:#5d5240 transparent}
.wk-vw-thumbs:empty{display:none}
.wk-vw-thumbs button{flex:none;width:96px;height:56px;border:2px solid #5d5240;border-radius:3px;background:#2a241e center/cover no-repeat;cursor:pointer;opacity:.7}
.wk-vw-thumbs button:first-child{margin-left:auto}
.wk-vw-thumbs button:last-child{margin-right:auto}
.wk-vw-thumbs button:hover{opacity:1}
.wk-vw-thumbs button[aria-current="true"]{opacity:1;border-color:var(--gold-lt);box-shadow:0 0 0 2px var(--gold)}
/* 上の帯の「作品の説明 ▼」＝絵の段が画面いっぱいの時だけ出す（説明は下にある、と分かるように） */
.wk-vw-more{display:none;flex:none;align-items:center;gap:6px;padding:3px 10px;border:1.5px solid rgba(239,230,207,.45);border-radius:3px;background:none;color:#efe6cf;font-family:var(--pix);font-size:.85rem;cursor:pointer}
.wk-vw-more:hover{background:rgba(239,230,207,.12);border-color:#efe6cf}
/* 作品の説明＝紙の色の箱 */
.wk-vw-cap{display:flex;flex-direction:column;gap:4px;width:100%;margin:0;padding:18px 18px 24px;background:var(--card);scroll-margin-top:60px}
.wk-vw-cap .wk-tag{position:static;align-self:flex-start}
.wk-vw-cap .wk-t{font-size:1.2rem;margin:4px 0 2px}
.wk-vw-cap .wk-c{font-size:.98rem}
.wk-vw-cap .rm{font-size:.82rem;color:var(--sub);margin-top:4px}
.wk-vw-cap .wk-body{margin:6px 0 0;font-size:.95rem;line-height:1.85;white-space:pre-wrap}
.wk-vw-cap .wk-by{margin-top:8px}
/* 横長の画面（スマホを横にした時もふくむ）＝絵の段で、帯の下の高さを全部使う。説明は下へ送って読む。
   16:9 の絵は、たいてい高さで大きさが決まる＝小さい絵の列は絵の下ではなく左に、たてに並べる（そのぶん絵が高くなる）。
   画像ごとの説明の行は、その作品のどれかの画像に説明がある時だけ取り、どの画像でも同じ高さにする（めくるたびに絵の大きさが変わらない） */
@media (orientation:landscape) and (min-width:700px){
  .wk-vw-stage{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"th fig" "th ic";height:calc(100vh - 52px);height:calc(100dvh - 52px)}
  .wk-vw-fig{grid-area:fig;min-height:0}
  .wk-vw-fig img{position:absolute;inset:0;width:100%;height:100%;max-height:none}
  .wk-vw-ic{grid-area:ic;min-height:46px;padding:8px 16px 12px}
  .wk-vw-thumbs{grid-area:th;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:12px 10px 12px 12px}
  .wk-vw-thumbs button:first-child{margin:auto 0 0}
  .wk-vw-thumbs button:last-child{margin:0 0 auto}
  .wk-vw-more{display:inline-flex}
  .wk-vw-cap{width:min(880px,calc(100% - 32px));margin:24px auto 40px;border-radius:4px;padding:22px 26px 26px}
}
/* 横に余りがある画面（横が縦の 2.2 倍以上）＝説明を右に並べる（窓は送らない・説明の箱だけ送る）。
   2.2 倍より細い画面で右に並べると、16:9 の絵が小さくなる（1536×750 で 1159→1049px）＝その時は説明を下に置き、絵を大きく出す方をとる */
@media (min-width:1000px) and (min-aspect-ratio:11/5){
  .wk-vw{overflow:hidden}
  .wk-vw-in{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,24vw,400px);grid-template-rows:auto minmax(0,1fr);height:100%}
  .wk-vw-top{grid-column:1 / -1}
  .wk-vw-stage{height:auto;min-height:0}
  .wk-vw-more{display:none}
  .wk-vw-cap{width:auto;margin:12px 12px 12px 0;padding:18px 20px 22px;overflow:auto;overscroll-behavior:contain}
}
.wk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.wk-tags button,.wk-tags span{display:inline-block;font-family:var(--pix);font-size:.8rem;line-height:1.5;border:1.5px solid var(--line2);border-radius:20px;padding:1px 10px;background:var(--paper);color:var(--ink2)}
.wk-tags button{cursor:pointer}
.wk-tags button:hover{background:var(--card-hi);border-color:var(--ink)}
.wk-ver{margin:4px 0 0;font-size:.8rem;color:var(--sub)}
.wk-vw-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px}
.wk-vw-acts .btn{font-size:.9rem;padding:6px 14px;box-shadow:0 3px 0 var(--ink)}
.wk-vw-acts .btn:active{box-shadow:0 0 0 var(--ink)}
.wk-vw-acts .rm{margin-top:0}
/* ★2026-11-11 書き直しの窓・つづきを足す窓（.wk-dlg）と、確かめの窓（.wk-ask）＝どれも works_mine.js が body の直下に作る。
   dialog は字の色をページから継がない（ブラウザの既定が CanvasText＝黒）＝大きく見る窓もいっしょに、ページの字の色にそろえる（ボタンの字は前と同じ濃さ） */
.wk-vw,.wk-dlg,.wk-ask{color:var(--ink2)}
.wk-vw-x,.wk-vw-nav{color:var(--ink)}
.wk-dlg,.wk-ask{width:100%;padding:0;border:2px solid var(--ink);border-radius:4px;background:var(--card);box-shadow:0 6px 0 var(--ink)}
.wk-dlg::backdrop,.wk-ask::backdrop{background:rgba(20,16,12,.72)}
/* 窓は画面の高さに収める＝見出しの段とボタンの段は動かさず、まん中（.wk-dlg-body）だけを送る。
   display は開いている時だけ変える（閉じている dialog を出さない）。max-height の2つ目は、スマホの住所の欄が出入りしても合う高さ（知らないブラウザは1つ目を使う） */
.wk-dlg{max-width:min(720px,94vw);max-height:92vh;max-height:min(900px,calc(100dvh - 24px));overflow:hidden}
.wk-dlg[open]{display:flex;flex-direction:column}
.wk-dlg-in{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.wk-dlg-h{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-bottom:2px solid var(--ink);background:var(--paper)}
.wk-dlg-h h3{font-family:var(--pix);font-weight:400;font-size:1.2rem;overflow-wrap:anywhere}
/* 見出しは、窓が開いた時に読み上げの始まりにするだけ（Tab では来ない）＝輪は出さない */
.wk-dlg-h h3:focus{outline:none}
.wk-dlg-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 18px 18px}
.wk-dlg-lead{margin:12px 0 0;font-size:.9rem;line-height:1.75}
.wk-dlg-foot{flex:none;padding:10px 18px 14px;border-top:2px solid var(--ink);background:var(--paper)}
/* 知らせの段は、文が無い時に高さを取らない（読み上げの場所なので、消さずに残す） */
.wk-dlg-foot .vo-msg{margin:0}
.wk-dlg-foot .vo-msg:not(:empty){margin-bottom:8px}
#wkAddBar{margin:0 0 8px}
.wk-dlg-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
/* 確かめの窓＝短い問いと、ボタン（やめる・はい）。取り下げる・外す の「はい」は赤い板（白い字で 5.1） */
.wk-ask{max-width:min(440px,92vw)}
.wk-ask-in{padding:18px 20px 16px}
.wk-ask h3{font-family:var(--pix);font-weight:400;font-size:1.15rem}
#wkAskB{margin:8px 0 16px;font-size:.92rem;line-height:1.75;overflow-wrap:anywhere}
.wk-ask .btn.ng{background:#c4412a;color:#fff}
.wk-ask .btn.ng:hover{background:#a8321d}
@media (max-width:899.98px){ .wk-cols{grid-template-columns:1fr} }
@media (max-width:620px){ .wk-steps{grid-template-columns:1fr} :is(#wkForm,.wk-dlg) .row{grid-template-columns:1fr} .wk-cards{grid-template-columns:1fr} .wk-howto dl{grid-template-columns:1fr} .wk-rule-cols{grid-template-columns:1fr} }
@media (max-width:620px){ .wk-dlg-h{padding:8px 10px 8px 14px} .wk-dlg-body{padding:0 14px 14px} .wk-dlg-foot{padding:8px 14px 12px} .wk-ask-in{padding:16px 16px 14px} }
/* ★2026-11-11 スマホ（iOS）は、16px より小さい字の欄にさわると、画面を勝手に拡大する＝作品の所の欄は、狭い画面で 16px に（この幅では 1rem が 14px になるため） */
@media (max-width:620px){ :is(.v-works,.wk-dlg) :is(input[type="text"],select,textarea){font-size:16px} }
/* ★2026-11-12 あなたのキャラ（chara.js の picker）＝いまのキャラ（絵・名前・えらぶボタン）と、えらぶ所（えらばない＋66 人の顔）。
   作品のフォーム・感想のフォーム・「あなたが送った作品」のキャラを変える窓（.wk-dlg）で同じ形。
   絵はドットのまま大きくする（rpg.css の「フォームの中の絵はなめらかに」より強く書く＝.ch-pick を頭に付ける）。
   えらんだ顔＝金の地と黒い枠（色を強くする表示では Highlight）。顔の名前は、絵の代わりの字（alt）と、指を置いた時の札（title） */
.ch-pick{margin-top:6px}
.ch-pick [hidden]{display:none !important}
.ch-now{display:flex;align-items:center;gap:14px;background:var(--paper);border:1.5px solid var(--line2);border-radius:4px;padding:10px 12px}
.ch-im{flex:none;display:grid;place-items:center;width:144px;height:128px}
.ch-folk .ch-im{width:64px}
/* ★2026-11-14 TAKURO「みんなの作品と使った人の声で、画像1と2のように、間隔が違う。揃えて」＝まだえらんでいない時（？の箱）は、
   作品のフォーム（お礼のスキンの見本の幅 144）でも、えっけんの間（64）と同じ幅に＝箱と字の間がどちらも同じ。えらんだあとは絵の幅のまま */
.ch-im.ch-empty{width:64px}
.ch-pick .ch-im img,.ch-pick .ch-it img{display:block;image-rendering:pixelated}
.ch-im.ch-empty i{display:grid;place-items:center;width:58px;height:96px;border:2px dashed var(--line2);border-radius:4px;font-style:normal;font-family:var(--pix);font-size:1.6rem;color:var(--sub)}
.ch-tx{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.ch-nm{font-family:var(--pix);font-weight:400;font-size:1.02rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
/* キャラの名前は「の」のあと（chara.js の nameHtml が入れる折れる印）か空白で折る＝1字だけ次の行に落ちない。入りきらない時だけ、どこでも折る */
.ch-nm,.wk-gift-h b{word-break:keep-all;overflow-wrap:anywhere}
.ch-nm.none{font-family:var(--sans);font-size:.86rem;color:var(--sub-dk,var(--sub))}
.ch-pick .ch-tg{font-size:.9rem;padding:5px 14px;box-shadow:0 3px 0 var(--ink)}
.ch-pick .ch-tg:active{box-shadow:0 0 0 var(--ink)}
.ch-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;margin-top:8px;max-height:300px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:8px 8px 10px}
.ch-g{grid-column:1 / -1;margin:6px 0 0;font-family:var(--pix);font-size:.84rem;line-height:1.4;color:var(--sub-dk,var(--sub))}
.fld .ch-pick label.ch-it,.ch-pick label.ch-it{position:relative;display:grid;place-items:center;margin:0;cursor:pointer}
.ch-it input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ch-it img,.ch-it span{border:2px solid transparent;border-radius:4px;background:#fffef8}
.ch-it img{width:52px;height:49px;padding:0 2px 4px;box-sizing:border-box}
.ch-it:hover img,.ch-it:hover span{background:var(--card-hi);border-color:var(--line2)}
.ch-it input:checked + img,.ch-it input:checked + span{background:var(--gold-lt);border-color:var(--ink)}
.ch-it input:focus-visible + img,.ch-it input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}
.fld .ch-pick label.ch-no,.ch-pick label.ch-no{grid-column:1 / -1;justify-items:start}
.ch-no span{display:inline-block;font-family:var(--pix);font-size:.88rem;line-height:1.5;padding:3px 14px;border-color:var(--line2)}
@media (forced-colors:active){.ch-it input:checked + img,.ch-it input:checked + span{border-color:Highlight;outline:3px solid Highlight}}
@media (max-width:420px){ .ch-now{gap:10px;padding:8px 10px} .ch-im{width:108px;height:96px} .ch-im img[width="144"]{width:108px;height:96px} .ch-folk .ch-im{width:48px} .ch-im img[width="64"]{width:48px;height:96px} .ch-im.ch-empty{width:58px} }
/* 作品のそばの分身（一覧のカード・大きく見る窓・送る前の確認）＝ニックネームの前に小さな顔 */
/* ★2026-11-14 TAKURO（画像1）「選んだキャラの位置が文字より下に来てる。中央にして。」＝顔の絵の上の透明な分（--ft＝works.js が測る割合）の半分だけ上げる
   ＝見えている顔のまん中が、ニックネームの行のまん中に（帽子のないキャラは約3px上がる・帽子の高いキャラはほとんど動かない）。
   大きく見る窓の上の帯は、ページ全体の img{display:block} で顔だけ次の行に落ちていた＝字の行の中に（inline-block） */
.wk-by .wk-av{align-self:center;width:24px;height:23px;margin-right:-4px;image-rendering:pixelated;flex:none;transform:translateY(calc(var(--ft,0) * -11.5px))}
.wk-vw-hd .wk-av{display:inline-block;width:22px;height:21px;margin:0 -6px 0 12px;vertical-align:-4px;image-rendering:pixelated;transform:translateY(calc(var(--ft,0) * -10.5px))}
/* お礼のスキン（「あなたが送った作品」のカードの中）＝スキンの見本・名前・受け取るボタン・入れ方。
   「あなたが送った作品」は右の細い列（中は約 240px）＝見本の絵と名前だけを横に並べ、説明・ボタン・入れ方は下に幅いっぱい */
.wk-gift{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px;margin-top:10px;padding:10px 12px;background:var(--paper);border:1.5px solid var(--line2);border-left:4px solid var(--gold);border-radius:3px}
.wk-gift.got{background:var(--card-hi);border-color:var(--gold)}
.wk-gift-im{grid-column:1;width:72px;height:64px;image-rendering:pixelated}
.wk-gift-tx{display:contents}
.wk-gift-h{grid-column:2;margin:0;font-family:var(--pix);font-size:.88rem;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.wk-gift-h b{display:block;font-weight:400;font-size:1rem}
.wk-gift.nochar .wk-gift-h{grid-column:1 / -1}
.wk-gift-s,.wk-gift-acts,.wk-gift-how,.wk-gift .lnk{grid-column:1 / -1}
.wk-gift .lnk{justify-self:start}
.wk-gift-s{margin:0;font-size:.84rem;line-height:1.7}
.wk-gift-acts{display:flex;flex-wrap:wrap;gap:8px}
.wk-gift-acts .btn{max-width:100%;font-size:.84rem;padding:5px 10px;box-shadow:0 2px 0 var(--ink);white-space:normal;text-align:left}
.wk-gift-acts .btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}
.wk-gift .lnk{font-size:.82rem}
.wk-gift-how{font-size:.82rem;line-height:1.7;width:100%}
.wk-gift-how summary{cursor:pointer;font-family:var(--pix);font-size:.84rem;color:var(--ink)}
.wk-gift-how dl{margin:6px 0 0;display:grid;gap:4px}
.wk-gift-how dt{font-weight:700;color:var(--ink)}
.wk-gift-how dd{margin:0 0 4px}
.wk-gift-how ol{margin:2px 0 2px;padding-left:1.4em;list-style:decimal}   /* ★11/12 入れ方は番号つきの手順 */
.wk-gift-how li{margin:0 0 1px}
.wk-gift-how .small{margin:4px 0 0}
.vo-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start}
.vo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.vo{background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:12px 14px;box-shadow:0 3px 0 var(--ink)}
.vo .who{font-family:var(--pix);font-size:.9rem}.vo .gr{margin-left:8px;font-size:.78rem;color:var(--sub)}
.vo p{margin:4px 0 0;font-size:.95rem}
.form-card,.vo-form{background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:clamp(16px,2vw,26px);box-shadow:0 4px 0 var(--ink)}
.vo-form h3{font-family:var(--pix);font-weight:400;font-size:1.2rem}
.vo-form .lead{font-size:.9rem;margin:6px 0 4px}
.field label,.fld label{display:block;font-family:var(--pix);font-size:.92rem}
input[type=email],input[type=text],select,textarea{width:100%;font:inherit;font-size:1rem;padding:9px 12px;border:2px solid var(--ink);border-radius:3px;background:#fff}
textarea{min-height:130px}
.submit,.send{margin-top:14px;font-family:var(--pix);font-size:1.05rem;background:var(--gold);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);padding:8px 22px;border-radius:3px;cursor:pointer}
.submit:hover,.send:hover{background:var(--gold-lt)}
.submit:disabled,.send:disabled{opacity:.6;cursor:default}
.promise{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:.86rem;color:var(--sub)}
.promise li::before{content:"✓ ";color:var(--green)}
.formmsg,.vo-msg{margin-top:10px;font-size:.95rem}
.formmsg.ok,.vo-msg.ok{color:var(--green-dk)}.formmsg.ng,.vo-msg.ng{color:var(--red)}
.sender,.privacy-link{font-size:.86rem;margin:10px 0 0}
.hp{position:absolute;left:-9999px}
.vo-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vo-form .fld{margin-top:10px}
.vo-form .lbl{display:block;font-family:var(--pix);font-size:.92rem}   /* ★2026-11-12 あなたのキャラの見出し（label ではない＝えらぶ所が中にある） */
.vo-form .hint{font-size:.78rem;color:var(--sub);margin-top:3px}
.req{color:var(--red)}

/* ═══ おとなの方へ・使っていい範囲・お知らせ ═══ */
.ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.ad-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.aneed,.vow{background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:18px 22px;box-shadow:0 4px 0 var(--ink)}
.aneed h3{font-family:var(--pix);font-weight:400;font-size:1.2rem;margin-bottom:6px}
.aneed p{margin:0 0 8px}
.aneed ol li{padding:5px 0;border-bottom:1px dashed var(--line)}
.aneed ol li:last-child{border-bottom:0}
.vow{background:var(--ink);color:#efe7d2;border-color:#000}
.vow b{color:#fff6dc;font-family:var(--pix);font-weight:400;font-size:1.15rem}
.vow ul{list-style:disc;padding-left:1.3em;margin-top:6px}
.vow ul b{font-family:var(--sans);font-weight:700;font-size:inherit}
.vow .note{color:#cfc6ae;margin:10px 0 0}
.acta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:12px}
a.mail{display:inline-block;font-family:var(--pix);text-decoration:none;background:var(--gold);color:var(--ink);border:2px solid var(--ink);padding:6px 16px;border-radius:3px;box-shadow:0 3px 0 var(--ink)}
a.mail:hover{background:var(--gold-lt)}
a.mail.sub{background:var(--card)}
.lic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.licbox{background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:18px 20px;box-shadow:0 4px 0 var(--ink)}
.licbox .ic img{width:44px;height:44px;image-rendering:pixelated;margin-bottom:8px}
.licbox > b{font-family:var(--pix);font-weight:400;font-size:1.15rem;display:block}
.licbox p{margin:6px 0 0}
.lic-note{font-size:.84rem;color:var(--sub)}
.lic-all{margin-top:20px;font-size:.97rem}
/* クレジット（出典）の書き方（★10/24 夜 TAKURO「クレジットの表記の仕方を分かりやすく載せてもいいかも」＝/license#credit と同じ文） */
.credit-box{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-top:22px;background:var(--card);border:2px solid var(--ink);
  border-radius:4px;box-shadow:0 4px 0 var(--ink);padding:18px 20px;border-left:8px solid var(--gold)}
.cr-h h3{font-family:var(--pix);font-weight:400;font-size:1.2rem}
.cr-h p{margin:6px 0 0;font-size:.9rem;color:var(--ink2)}
.copybox{position:relative;display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);border-radius:4px;padding:10px 12px 12px}
.copybox-h{margin:0 0 6px;font-family:var(--pix);font-size:.8rem;color:var(--sub)}
.copybox pre{flex:1;margin:0 0 10px;white-space:pre-wrap;word-break:break-all;font-family:var(--sans);font-size:.95rem;line-height:1.6;color:var(--ink);background:#fff;border:1px dashed var(--line2);border-radius:3px;padding:8px 10px}
.copybtn{align-self:flex-start;font-family:var(--pix);font-size:.92rem;border:2px solid var(--ink);background:var(--gold);color:var(--ink);border-radius:3px;padding:3px 16px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.copybtn:hover{background:var(--gold-lt)}
.copybtn.ok{background:var(--green);color:#fff}
.reg-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.reg-grid .kidsnote{margin-bottom:14px}
.soonbox{background:var(--card);border:2px dashed var(--ink);border-radius:4px;padding:18px 22px}
.soonbox .soon-k{margin:0;font-family:var(--pix);font-size:.78rem;letter-spacing:.12em;color:var(--sub)}
.soonbox > b{font-family:var(--pix);font-weight:400;font-size:1.2rem}
.soonbox p{margin:8px 0 0}

/* ═══ いちばん下（制作・非公式の断り）═══ */
.foot{background:#1c1712;color:#cfc6ae;font-size:.84rem;line-height:1.75}
.foot-in{width:min(100% - 2 * var(--gut),1600px);margin:0 auto;padding:26px 0 30px}
.foot .brand{font-family:var(--pix);font-size:1.3rem;color:#fff6dc}
.foot p{margin:6px 0 0}
.foot a{color:inherit}

/* ═══ 広い画面（900px〜）＝左のメニューはいつも左に ═══ */
@media (min-width:900px){
  body{padding-left:var(--side-w)}
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--side-w)}
  .mbar,.tabbar,.scrim.mob{display:none}
  /* ホーム＝画面の高さぴったり（下へ続かない）。地図は残りの場所に収まる大きさ */
  html.js body[data-view="town"] .foot{display:none}
  html.js .v-town.is-on{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:100vh;height:100dvh;container:town/size}   /* 列は画面の幅まで（棚の中身の幅で横に広がらない） */
  .town-stage{position:relative;min-height:0}
  .map-box{position:absolute;inset:12px 20px 4px;container:mapbox/size;display:grid;place-items:center;transition:right .3s cubic-bezier(.2,.8,.2,1)}   /* ★10/24 TAKURO「街の絵が左によってる…明るい背景上の左右上下中央に」＝まん中（題の板は地図の右上の空いた三角に乗る） */
  .map{width:min(100cqw,calc(100cqh * var(--ar)));aspect-ratio:var(--ar)}
  /* 題と地図の説明は、地図の空いている角に重ねる（題＝右上・説明＝左下＝地図の斜めの外） */
  .town-title{position:absolute;right:clamp(14px,1.6vw,28px);top:clamp(12px,1.8vh,26px);z-index:3;width:clamp(300px,24vw,420px);
    background:rgba(244,238,220,.92);border:2px solid var(--ink);border-radius:4px;box-shadow:0 4px 0 var(--ink);padding:12px 16px 14px;
    backdrop-filter:blur(3px);transition:opacity .25s}
  .town-title .k{display:none}                                   /* 左のメニューにロゴがある＝板では外す（板を低く＝地図にかからない） */
  .town-title h1{font-size:clamp(1.55rem,1.9vw,2.3rem);margin-top:0}
  .town-title .lead{font-size:.88rem;line-height:1.65;margin-top:6px}
  .town-title .act{margin-top:10px}
  .town-title .btn{font-size:.98rem;padding:8px 14px}
  .map-legend{position:absolute;left:clamp(14px,1.6vw,28px);bottom:10px;z-index:3;max-width:min(430px,34%);
    background:rgba(244,238,220,.9);border:2px solid var(--ink);border-radius:4px;padding:8px 14px 10px;backdrop-filter:blur(3px)}
  body.pn-open[data-view="town"] .map-box{right:calc(var(--pn-w) + 16px)}
  body.pn-open[data-view="town"] .town-title{opacity:0;pointer-events:none}
  body.pn-open[data-view="town"] .shelf{padding-right:calc(var(--pn-w) + 16px)}
  .shelf{transition:padding-right .3s cubic-bezier(.2,.8,.2,1)}
  /* 住人の窓＝右から */
  .panel{top:0;right:0;bottom:0;width:var(--pn-w);border-left:2px solid var(--ink);box-shadow:-8px 0 0 rgba(42,35,27,.08);transform:translateX(104%)}
  .panel.is-open{transform:none}
}
/* ホームが低い・狭い時＝題の板と説明の板を小さくする（形はそのまま・地図の空いた角に乗る）
   ★10/24 夜 TAKURO「エネクラ マインクラフトで、発電所を作ろうを、画像4（題の板）のデザインの小さいバージョンにしたい。
     画像6（説明の板）も、この形をスマホ以外はできるだけ残したい」（前は題を地図の上に1行で分けていた＝板の形が消えた） */
@container town (max-width:1100px) or (max-height:819px){
  .town-title{width:clamp(236px,25cqw,292px);top:10px;right:12px;padding:9px 12px 11px;box-shadow:0 3px 0 var(--ink)}
  .town-title h1{font-size:1.2rem;line-height:1.28}
  .town-title h1 .nm{font-size:.6em;margin-bottom:1px}
  .town-title .lead{font-size:.72rem;line-height:1.55;margin-top:4px}
  .town-title .act{margin-top:8px;gap:6px;flex-wrap:nowrap}   /* ボタンは1段（2段に折れると板が高くなって発電所にかかった） */
  .town-title .btn{font-size:.74rem;padding:5px 8px;gap:4px;box-shadow:0 3px 0 var(--ink)}
  .map-legend{left:12px;bottom:8px;max-width:min(330px,40%);padding:6px 10px 8px;box-shadow:0 3px 0 var(--ink)}
  .map-legend .lg-t b{font-size:.86rem}
  .map-legend .lg-t span{font-size:.72rem}
  .map-legend ul{gap:2px 12px;font-size:.72rem;margin-top:4px;padding-top:4px}
  .map-legend i{width:14px;height:14px}
}
@container town (max-height:640px){ .town-title .lead{display:none} }
/* ★10/25 夜 TAKURO「マイクラで、発電所を作ろうにして」「余白が左と右で違うのが気になってた」「一行にして」
   ＝題は1行（折らない）。広い画面の板の幅は題の長さで決める（説明とボタンは板の幅の中で折る＝板を広げない）＝題の左右の余白が同じになる。
   前は板の幅が決め打ち（clamp）で、2行に折れた題の右に空きが残っていた。日本語だけ（英語の題は2行のまま・板も前のまま） */
html[lang="ja"] .town-title h1{white-space:nowrap}
@media (min-width:900px){
  html[lang="ja"] .town-title{width:max-content}
  html[lang="ja"] .town-title .lead,html[lang="ja"] .town-title .act{width:0;min-width:100%}
}
@media (max-width:899.98px){   /* スマホ＝1行が画面の幅に収まる大きさまで字を小さく（13字） */
  html[lang="ja"] .town-title h1{font-size:min(2.3rem,calc((100vw - 2 * var(--gut)) / 13.6))}
}
/* 低い画面＝棚を低く（小さい字の2行目と案内の住人を省く） */
@container town (max-height:820px){
  .shelf{padding:8px var(--gut) 10px}
  .shelf-h{margin-bottom:6px}
  .tile{min-height:64px}
  .t-tx{padding:5px 10px}
  .t-tx > span{-webkit-line-clamp:1}
  .t-who{display:none !important}
  .t-get .t-tx > span{display:none}
}

/* ═══ 中くらいの画面 ═══ */
@media (max-width:1280px){
  .feat{grid-template-columns:1fr}
  .howto-grid,.vo-grid,.reg-grid{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .theater{flex-direction:column}
  .th-main{flex:none;max-width:none;width:100%}   /* 縦に並べた時は flex の基準（640px）が高さになる＝外す */
  .th-list{flex:none;width:100%}
  .ad-grid{grid-template-columns:1fr}
  .lic{grid-template-columns:1fr}
  .credit-box{grid-template-columns:1fr}
}

/* ═══ 狭い画面（〜899px）＝上の帯・下のタブ・メニューは左から引き出す ═══ */
@media (max-width:899.98px){
  html{scroll-padding-top:calc(var(--mbar-h) + 8px)}
  body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
  .mbar{position:sticky;top:0;z-index:50;height:var(--mbar-h);display:flex;align-items:center;gap:10px;padding:0 var(--gut);background:var(--side);color:var(--side-tx);
    border-bottom:2px solid #000}
  .mbar-logo{color:var(--side-tx);margin-right:auto;display:block}
  .mbar-logo svg{height:30px;width:auto;display:block}
  .mbar-logo svg *{fill:currentColor}
  .mbar .lang{font-size:.78rem}
  .mbar-dl{font-family:var(--pix);font-size:.88rem;text-decoration:none;color:var(--ink);background:var(--gold-lt);border:2px solid #000;border-radius:2px;padding:4px 10px;
    box-shadow:inset 0 -3px 0 var(--gold),inset 0 3px 0 var(--gold-hi);white-space:nowrap}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(86vw,330px);transform:translateX(-104%);transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s;
    visibility:hidden;z-index:90;box-shadow:6px 0 0 rgba(0,0,0,.2)}
  body.menu-open .side{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .side-x{display:block;position:absolute;right:12px;top:16px;width:36px;height:36px;border:2px solid var(--side-tx);background:none;color:var(--side-tx);border-radius:3px;font-size:1rem;cursor:pointer}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tab-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);background:var(--side);border-top:2px solid #000}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--side-sub);background:none;border:0;
    font-family:var(--pix);font-size:.72rem;line-height:1.2;cursor:pointer;position:relative}
  .tabbar img,.tabbar .ic-play{width:26px;height:26px;image-rendering:pixelated;object-fit:contain}
  .tabbar a[aria-current="page"]{color:var(--side-tx)}
  .tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;background:var(--gold-lt)}
  .burger{display:flex;flex-direction:column;gap:4px;width:22px;height:26px;justify-content:center}
  .burger b{display:block;height:3px;background:var(--side-tx);border-radius:1px}
  .vw{padding-top:18px}
  .vh{margin-bottom:18px}
  /* ホーム（スマホ）＝題 → 地図（横に動かす）→ 説明 → 棚 */
  .town-title{padding:16px var(--gut) 4px}
  .town-title .k{display:none}   /* 上の帯にロゴがある＝重ねない */
  .town-title h1{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .map-box{margin-top:8px}
  .map-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .map-scroll::-webkit-scrollbar{display:none}
  .map{width:980px;aspect-ratio:var(--ar)}
  .map-hint{display:block;margin:4px 0 0;font-family:var(--pix);font-size:.8rem;color:var(--sub);text-align:center}
  .map-legend{width:max-content;max-width:calc(100% - 2 * var(--gut));margin:6px auto 12px;padding:8px 14px 10px;background:rgba(244,238,220,.9);
    border:2px solid var(--ink);border-radius:4px;box-shadow:0 3px 0 var(--ink)}   /* ★10/24 夜「バランスが悪くないか」＝左右いっぱいの2列だと右の列が遠かった */
  .map-legend ul{grid-template-columns:auto auto}
  .shelf{padding:12px 0 16px}
  .shelf-in{flex-direction:column;overflow:visible}
  .shelf .sg-sep{width:auto;height:0;margin:10px var(--gut) 12px;border-left:0;border-top:2px dashed var(--line2)}
  .shelf-h{padding:0 var(--gut)}
  .shelf-h h2 small{display:block;margin:2px 0 0}
  .sg-start .shelf-row{grid-template-columns:1fr;padding:2px var(--gut) 4px}
  .sg-tours .shelf-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;padding:2px var(--gut) 8px;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none}
  .sg-tours .shelf-row::-webkit-scrollbar{display:none}
  .tile{scroll-snap-align:start}
  /* 住人の窓＝下から */
  .panel{left:0;right:0;bottom:0;max-height:min(86vh,calc(100vh - 40px));border-top:2px solid var(--ink);border-radius:14px 14px 0 0;transform:translateY(104%);
    box-shadow:0 -6px 0 rgba(42,35,27,.1);padding-bottom:env(safe-area-inset-bottom)}
  .panel.is-open{transform:none}
  .panel-top{border-radius:14px 14px 0 0;position:relative;padding-top:16px}
  .panel-top::before{content:"";position:absolute;top:6px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:var(--line2)}
  .feat-card.big .feat-body{grid-template-columns:1fr}
  .feat-map{display:none}
  .resgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .r-pic{height:104px}
  .r-pic img{max-height:96px}
  .th-list{grid-template-columns:1fr}
  .tabs button{padding:7px 12px 6px;font-size:.92rem}
  .fitgrid,.vo-form .row{grid-template-columns:1fr}
  .book{grid-template-columns:1fr}
  .bk-cover{border-right:0;border-bottom:2px solid var(--ink)}
  .inside{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .in-tx b{flex-wrap:wrap;gap:0 8px}
  .in-tx b em.also{margin-left:0}
  .in-tx{padding:8px 10px 10px}
  .in-tx b{font-size:.98rem}
  .in-tx > span{font-size:.76rem}
  .tour .talk{padding-left:18px;padding-top:12px}
  .tour .talk .face{display:none}
}
@media (max-width:520px){
  .map-legend{width:auto;padding:7px 10px 8px}
  .map-legend ul{gap:4px 12px;font-size:.74rem}
  .map-legend .lg-t span{font-size:.74rem}
}
@media (max-width:420px){
  .mbar .lang{display:none}
  .inside{grid-template-columns:1fr 1fr}
}