:root{
  --ink:#202124;
  --paper:#FAFAF8;
  --orange:#DE7D07;
  --blue:#2F5FE0;
  --yellow:#F5B72F;
  --gray:#9AA0A6;
  --line:#D9D9D4;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.9}
body{margin:0;min-height:100vh}
a{color:var(--blue);text-underline-offset:.2em}
/* ⚠黄(#F5B72F)は白地(#FAFAF8)に対して約1.7:1しかなく、フォーカス位置が見えない。
   標章の配色のうち、地に対して十分な差が出る墨を使う。 */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---- 標章の構え（題字 → 机の縁 → 短い一行、題字の右上から飛ぶ正方形）----
   入口ページとトップで同じ部品を使う。⚠**必ず明るい地の上に置く**（暗地版の標章が無い）。
   ⚠ページ側の変種（.hero-edge / .work-edge）は、ここより後ろに置いて上書きする。 */
.story-window{position:relative;width:min(760px,calc(100% - 2.5rem));margin:0 auto;padding:clamp(5rem,14vw,9rem) 0 6rem}
.story-window h1{font-size:clamp(2rem,7vw,3.7rem);font-weight:600;letter-spacing:.12em;margin:0;line-height:1.45}
.desk-edge{height:9px;margin:1.35rem 0 3rem;background:linear-gradient(90deg,var(--orange) 0 28%,var(--yellow) 28% 54%,var(--blue) 54% 100%)}
.flying-square{position:absolute;top:clamp(3rem,9vw,5rem);right:6%;width:1rem;height:1rem;background:var(--blue);transform:rotate(13deg);box-shadow:1.5rem -1.2rem 0 -.25rem var(--yellow)}
.intro-copy{font-size:clamp(1rem,2.8vw,1.14rem)}
.intro-copy p{margin:0 0 2.1rem}
.arrow{display:inline-block;margin:.2rem .4rem 0 1em;color:var(--orange)}
/* サイト共通の帯。左上でトップへ戻り、右上で作品へ飛ぶ。⚠**標章は置かない**＝下の hero に
   大きく出るので二重になる（ヒントページ側も、題字が別にあるので文字だけで足りる）。 */
.site-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:min(1040px,calc(100% - 2.5rem));margin-inline:auto;padding:1.1rem 0 0}
.site-nav a{text-decoration:none;letter-spacing:.1em;font-size:.92rem}
.site-nav .nav-home{font-weight:700;color:var(--ink)}
.site-nav .nav-works{color:var(--blue);border-bottom:2px solid transparent;padding-bottom:.15em}
.site-nav a:hover{border-bottom-color:var(--orange)}
.site-nav .nav-home:hover{border-bottom:2px solid var(--orange)}

/* 埋め込んだ投稿。⚠**blockquote に絞る**＝widgets.js が読めると、X は blockquote を消して、同じ
   class="twitter-tweet" を持つ div（中に iframe）に差し替える。class だけで指定すると、その外枠にも
   線・余白・白地が付いて枠が二重になり、投稿も狭くなる。
   ここが効くのは読めなかったとき（線が細い・スクリプトが止められた）だけで、素の引用として読める形にしておく。
   ⚠幅は X 側の既定（550px）に合わせて頭打ちにする。 */
blockquote.twitter-tweet{max-width:550px;margin:0 0 1.6rem;padding:1.2rem 1.4rem;border-left:4px solid var(--blue);background:#fff}
blockquote.twitter-tweet p{margin:0 0 .8rem}
.embed-note{font-size:.82rem;line-height:1.7;color:#666}

/* ---- トップ ----
   入口ページは「窓」なので題字が文字だが、トップは制作活動の顔なので題字の位置に標章そのものを置く。
   標章の中の机の縁を紙幅いっぱいまで引き伸ばし、飛ぶドットが1粒だけ標章の外まで届いている形にする。 */
.home-main,footer{width:min(880px,calc(100% - 2.5rem));margin-inline:auto}
.hero{padding:0}
/* ⚠**標章は本文の幅いっぱいにしない**（大きすぎる）。最大 620px に抑えて
   中央に置く（左端を本文にそろえると、PC で左に寄って見える）。狭い画面では本文と同じ幅になる。 */
.hero-inner{position:relative;width:min(620px,calc(100% - 2.5rem));margin-inline:auto}
/* 箱の右端には飛ぶドットの分（図形の x=1194.9〜1246.8）が入っているので、そのまま中央に置くと机の縁が左に寄る。
   机の縁（x=305.2〜1194.9）の中心を画面の中心に合わせる＝(1246.8−1194.9)/2/941.6＝箱の幅の 2.76% 右へ。
   ⚠狭い画面ではずらさない（本文と同じ幅なので、ずらすと右端が紙の外に出る）。 */
@media (min-width:561px){.hero-inner{transform:translateX(2.76%)}}
/* ⚠**標章の SVG は viewBox に余白を持っている**（図形の実寸は x=305.2〜1246.8 / 1500・Chrome の
   getBBox で実測）。そのまま貼ると両端が空いて小さく見えるので、**図形の幅ちょうどを窓にして**
   本文の左右端とそろえる。幅 1500/941.6＝159.3%・左に -305.2/941.6＝-32.41%。
   ⚠標章の SVG を差し替えたら、この2つの数字を測り直すこと。 */
.hero-lockup{margin:0;overflow:hidden}
.hero-lockup img{display:block;width:159.3%;max-width:none;margin-left:-32.41%;margin-top:-4.66%;height:auto}
/* ⚠**上の空白も切る**＝図形の上端は y=43.9 / 500（いちばん小さいドット）。img の幅は窓の 159.3% なので、
   上の空白は窓の幅の 43.9/1500×159.3＝4.66%（margin の % は幅が基準）。 */
/* 標章の中を右上へ飛んでいくドットの、次の1粒。標章の外まで届いている。
   ⚠黄は白地に1.7:1しかないので、1粒だけ置くこの位置には使わない（見えない）。 */
.hero .flying-square{top:-.9rem;right:-4.5%;width:.7rem;height:.7rem;box-shadow:none}
/* ⚠狭い画面では出さない＝上には帯（「作品」）、右には紙の端、下には標章のドットがあって置き場が無い。
   標章の中にも飛ぶドットは描かれているので、形は崩れない。 */
@media (max-width:560px){.hero .flying-square{display:none}}
.home .hero-edge{width:100%;height:clamp(10px,1.3vw,14px);margin:clamp(1.6rem,3.5vw,2.6rem) 0 0}
.home .hero-lead{width:min(880px,calc(100% - 2.5rem));max-width:none;margin:clamp(1.8rem,4vw,2.6rem) auto 0;font-size:clamp(1.15rem,3.2vw,1.5rem);font-weight:600;letter-spacing:.06em;line-height:1.75}
/* 作り手の考え。⚠**見出しを付けない**（リード文の続きとして読ませる）ので、
   字の大きさと太さでリード文との段差を作る。 */
.home .hero-stance{width:min(880px,calc(100% - 2.5rem));margin:clamp(1.6rem,3.5vw,2.2rem) auto 0}
.home .hero-stance p{max-width:none;margin:0 0 1.1rem;font-size:clamp(.97rem,2.5vw,1.06rem);font-weight:400;line-height:1.95;color:#3A3D42}
.home .hero-stance p:last-child{margin-bottom:0}
.home-main{padding:clamp(3rem,8vw,4.5rem) 0 4rem}
.home section{padding:2.3rem 0;border-top:1px solid var(--line)}
.home h2{font-size:1.05rem;letter-spacing:.14em;margin:0 0 1.25rem}
.home p{max-width:42rem;margin:0 0 1rem}
/* 入口ページと同じ構えを、作品の枠の中でもう一度組む（題字 → 机の縁 → 短い一行＋飛ぶ正方形）。 */
.work-card{position:relative;padding:clamp(1.3rem,4vw,2rem);background:#fff;border:1px solid var(--line)}
/* ⚠題をアイキャッチにしたので、画像に掛からないようカードの右上の余白に置く。 */
.work-card .flying-square{top:.35rem;right:.45rem;width:.7rem;height:.7rem;box-shadow:none}
.work-card h3{font-size:clamp(1.45rem,4.5vw,2rem);font-weight:600;letter-spacing:.1em;line-height:1.45;margin:0}
/* 作品の題はアイキャッチ（題字入り）をそのまま見出しにする。文字は alt で持つ。 */
.work-card .work-title img{display:block;width:100%;height:auto}
.home .work-edge{height:8px;margin:1.1rem 0 1.6rem}
/* 調べ方のお知らせ＝ヒント導線の直上に目立たせて置く注記。検索結果に出にくい間だけ出す。 */
.work-notice{margin:1.4rem 0 0;padding:.9rem 1.1rem;border-left:4px solid var(--orange);background:#FFF6E5;font-size:.92rem;line-height:1.8}
.work-notice p{margin:0}
.work-notice p+p{margin-top:.4rem;font-weight:700}
.work-notice code{font-family:inherit;padding:0 .15em;background:#fff;border:1px solid var(--line);border-radius:3px}
.work-notice a{text-decoration:none;border-bottom:2px solid var(--blue);padding-bottom:.15em}
.work-notice a:hover{border-bottom-color:var(--orange)}
.home .work-go{margin:1.8rem 0 0;font-weight:700}
.work-go a{text-decoration:none;border-bottom:2px solid var(--blue);padding-bottom:.15em}
.work-go a:hover{border-bottom-color:var(--orange)}
/* 推奨環境＝作品カードの末尾に小さく置く実務的な注記。物語の文と段差を付けるため、罫で区切り字も落とす。 */
.work-env{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.82rem;line-height:1.7;color:#666}
.work-env h4{font-size:.9rem;font-weight:700;letter-spacing:.08em;margin:0 0 .5rem;color:var(--ink)}
.work-env p+h4{margin-top:1.4rem}
.work-env p{margin:.5rem 0}
.work-env ul{margin:.4rem 0;padding-left:1.4em}
.work-env li{margin:.15rem 0}
footer{padding:2rem 0 3rem;border-top:1px solid var(--line);color:#666;font-size:.85rem;letter-spacing:.12em}

/* ⚠上を詰める＝選択肢のボタンが画面の下の方に押し出されないように。 */
.hint-page{width:min(820px,calc(100% - 2rem));margin:0 auto;padding:1.5rem 0 6rem}
.hint-page>header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:5px solid var(--blue)}
.hint-page h1{font-size:clamp(1.8rem,6vw,2.8rem);letter-spacing:.08em;margin:0 0 .8rem}
.hint-page header p{margin:.4rem 0}
.node{display:none;padding:1.5rem;background:#fff;border:1px solid var(--line);border-top:5px solid var(--orange)}
.node.is-active,.no-js .node{display:block}
.no-js .node{margin-bottom:2.6rem}
.no-js .trail,.no-js [data-url-check]{display:none}
.node h2{font-size:clamp(1.2rem,4vw,1.55rem);line-height:1.65;margin:0 0 1.5rem}
.choices{display:grid;gap:.8rem}
.choice[hidden]{display:none}
.choice{display:flex;align-items:center;width:100%;min-height:44px;padding:.7rem 1rem;border:2px solid var(--blue);color:var(--ink);text-decoration:none;background:#fff}
.choice:hover{background:#F2F5FF}
.node-nav{display:flex;flex-wrap:wrap;gap:.7rem 1.3rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.88rem}
.node-nav a:not(:first-child),.node-nav [data-history-back]{color:#666}
.trail{margin:-1.5rem 0 1.5rem;color:#666;font-size:.83rem}
.trail a{color:inherit}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:1rem .25rem;font-weight:700;color:var(--blue)}
.hint-body{padding:.1rem .25rem 1.2rem;white-space:pre-line}
.hint-body p{margin:0}
.hint-sub{margin-top:1rem;border:1px solid var(--line);padding:0 .75rem}
.hint-sub summary{padding:.75rem 0}
.hint-sub .hint-body{padding:0 0 1rem}
[data-url-check] label{display:block;margin:0 0 .4rem}
.url-check-row{display:flex;gap:.7rem;align-items:stretch}
.url-check-row input{min-width:0;flex:1;padding:.75rem;border:1px solid var(--gray);background:#fff;font:inherit;font-size:16px}
.url-check-row button{padding:.75rem 1.3rem;border:0;background:var(--blue);color:#fff;font:inherit;font-weight:700;cursor:pointer}
[data-result]{margin-top:1.5rem;padding:1rem;background:#F2F2EF}
.hint-footer{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--line)}
.back-link{margin-top:2rem;font-size:.9rem}
/* 続きを探している方へ（/unread-legacy/continue/・D-311）。「いいえ」の答えは選んだときだけ出す */
.continue-q,.continue-a{padding:1.5rem;background:#fff;border:1px solid var(--line);border-top:5px solid var(--orange)}
.continue-q h2,.continue-a h2{font-size:clamp(1.2rem,4vw,1.55rem);line-height:1.65;margin:0 0 1.5rem}
.continue-a{display:none;margin-top:1.5rem}
.continue-a:target{display:block}
@media(max-width:540px){
  /* ⚠スマホでは見出しと冒頭の説明ごと画面に出さない（最初の質問をすぐ見せる）。読み上げには残す。 */
  .hint-page{padding-top:1rem}
  .hint-page:not(.continue-page)>header{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .node{padding:1.1rem}
  .url-check-row{display:grid}
  .url-check-row button{width:100%}
}