/* あいうえプロンプトの配布ページ共通スタイル（RPG風）
   gen_trial_page.py と gen_setup_page.py の両方がこのファイルを読む。
   2か所に書くと必ずズレるので、見た目の正本はここ1つにする。 */
/* ドット絵フォント。日本語のピクセルフォントは選択肢が少なく、DotGothic16 が
   本文サイズでも読める数少ない1つ。読み込めない環境のために通常のゴシックを控えに置く。 */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
/* 地の色と紙の色は必ずセットで考える。
   もとは地 #ece7dc・紙 #f4ecd6 で、コントラスト比が 1.05:1 しかなく、
   紙の領域が地に溶けて見えなかった（2026-08-27）。
   地をやや沈め・紙を白へ寄せて 1.41:1 に広げてある。
   地を明るく戻すなら紙も一緒に見直すこと。片方だけ触ると必ず溶ける。 */
:root{
--page:#ddd4c0; --paper:#fdfaf0; --ink:#23211d; --line:#cfc7b6;
--win:#000; --winline:#fff;
--txt:#fff; --sub:#d8dade; --gold:#ffcf5c; --green:#6fdc9a;
--warnbg:#fff4d6; --warnline:#d9a441; --warntxt:#6b4a05;
--r:12px}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);
background:var(--page);
/* ごく薄い横縞。ベタ塗りより画面らしくなる（暗くはしない） */
background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.022) 0 2px,transparent 2px 4px);
font-family:'DotGothic16',-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
line-height:1.9;font-size:16px}
.wrap{max-width:720px;margin:0 auto;padding:24px 14px 70px}
img{image-rendering:pixelated}

/* タイトルは枠を使わず、地の上に袋文字で置く。8方向に黒を回して縁を作り、
   下に厚みの影を落とす。ゲームのロゴの作り方。 */
h1{margin:0;font-size:34px;line-height:1.3;color:var(--gold);
text-shadow:
 -2px -2px 0 #241a05, 2px -2px 0 #241a05,-2px 2px 0 #241a05, 2px 2px 0 #241a05,
 0 -2px 0 #241a05, 0 2px 0 #241a05,-2px 0 0 #241a05, 2px 0 0 #241a05,
 0 6px 0 rgba(36,26,5,.25)}
.h1sub{display:inline-block;margin:12px 0 4px;background:#000;color:#fff;
font-size:13px;padding:3px 12px;border-radius:.3rem;letter-spacing:.25em}
/* 見出しは黒い面を増やさず、金は細い柱としてだけ使う。
   金を面で使うとダウンロードボタンと見分けがつかなくなる。 */
h2{font-size:20px;margin:3em 0 14px;color:var(--ink);position:relative;
border-left:8px solid #b8892a;border-bottom:4px double var(--ink);
padding:0 0 6px .6rem}
h2::before{content:"▼ ";color:#b8892a}

/* 節は3種類ある。全部同じ顔にすると「どこから手をつけるか」が分からなくなる。
   ・そのまま … 先に読む節
   ・.step   … 手を動かす節。右端にSTEPの札を出す
   ・.sub    … 困ったときに開く節。細く小さく */
/* STEPの札は行頭に置く。右端に逃がすと、見出しを読み終えてから
   気づくことになる。「まずここから」は最初に目に入る位置に要る。
   ▼ の代わりなので、::before を差し替える。 */
h2.step::before{content:attr(data-step);
display:inline-block;vertical-align:.12em;
background:#000;color:var(--gold);font-size:12px;
padding:2px 9px;margin-right:.55em;
border-radius:.3rem;letter-spacing:.12em}
h2.sub{font-size:17px;margin-top:3em;color:#5c554b;
border-left:4px solid #ab9f85;border-bottom:2px solid #ab9f85}
h2.sub::before{content:"◆ ";color:#ab9f85}
h3{font-size:18px;margin:0 0 10px;color:var(--txt)}
/* RPGの選択カーソル。steps(1) にして、ふわっと消えずにパッと切り替える。 */
.env h3::before{content:"▶ ";color:#fff;
animation:cursor 1s steps(1,end) infinite}
@keyframes cursor{0%,50%{opacity:1}50.01%,100%{opacity:0}}
/* 動きを減らす設定にしている人には点滅させない */
@media (prefers-reduced-motion:reduce){
.env h3::before{animation:none}}
p{margin:0 0 14px}
a{color:#8a5a00}
.win a{color:var(--gold)}
/* ボタンは金地なので、上の指定に負けないよう文字色を勝たせる */
.win a.btn{color:#241a05}

/* リンクのホバー。色を薄くして下線を消す。
   マウスのある環境だけに効かせる（スマホはタップ後もホバーが残ることがある）。
   ボタンは自前の反応を持っているので :not(.btn) で外す。

   色は黒いウィンドウでも紙でも #b8892a の1つでいい。金（#ffcf5c）から見れば
   沈む方向、紙の焦茶（#8a5a00）から見れば明るい方向で、どちらも「薄い」になる。
   黒地で逆に明るくすると本文の白と見分けがつかなくなるので、そちらは採らない。 */
@media (hover:hover){
a:not(.btn):hover{color:#b8892a;text-decoration:none}
/* 紙の中だけは `h2.sub + .win a`（詳細度 0,2,2）が上の指定（0,2,1）に勝つので、
   同じ色をもう一度、勝てる詳細度で書く。色を変えるときは2か所とも直すこと。 */
h2.sub + .win a:not(.btn):hover{color:#b8892a}
}
.lead{color:#5c554b;margin:0 0 22px}

/* メッセージウィンドウ。黒 → 白 → 黒 の3層。DQの会話窓の作り。
   本来はdivを3枚重ねるが、box-shadowのspreadで外側2層を描けば
   HTMLを増やさずに同じ見た目になる（内側から 0.2rem白 → 0.15rem黒）。 */
.win{background:var(--win);color:var(--txt);
border-radius:.3rem;line-height:2;
box-shadow:0 0 0 .2rem var(--winline),0 0 0 .35rem #000;
padding:1rem .75rem;margin-bottom:30px}


/* カルーセル用（横スクロール） */
.keys-carousel {
    overflow-x: auto;
    padding: 10px 10px 25px 10px;
    scroll-snap-type: x mandatory;
}
ul.keys {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
    width: max-content;
}
ul.keys li {
    background: var(--win);
    border: 1px solid var(--winline);
    border-radius: 8px;
    padding: 1.5rem 1rem;
    width: 300px;
    margin: 8px 5px;
    scroll-snap-align: start;
    flex-shrink: 0;
    text-align: center;
}
ul.keys img.key-icon {
    width: 250px;
    height: auto;
    margin-bottom: 15px;
    display: inline-block;
}
ul.keys b {
    color: var(--gold);
    font-size: 26px;
    display: block;
    margin-bottom: 5px;
}
ul.keys .title {
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
}
ul.keys span.desc {
    display: block;
    color: var(--sub);
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}


/* 副題は金の小さな札にする。inline-block にして文字の幅だけを囲む
   （block のままだとカードの右端まで帯が伸びて、見出しより目立つ）。
   金地なので文字色は暗くする。薄いグレーのままだと読めない。 */
.env .note{display:inline-block;font-size:13px;color:#241a05;
margin-top:4px;line-height:1.6;
padding:1px .55em;background:#ffcf5c;margin-left:2em;
border-radius:.3rem}
/* 見出しをクリックすると中身が閉じる。見出しと副題だけは常に出したままにする。
   ブラウザ既定の三角は消し、右端に開閉の向きを出す（左の▶はカーソルなので触らない）。 */
.env summary{display:block;cursor:pointer;list-style:none;
position:relative;padding-right:1.6em}
.env summary::-webkit-details-marker{display:none}
.env summary h3{margin:0}
.env[open] summary h3{margin-bottom:10px}
/* 開閉マークは字を差し替えず、同じ▼を回す。差し替えだと動きを付けられない。 */
.env summary::after{content:"▼";position:absolute;right:0;top:.15em;
color:var(--gold);font-size:14px;transition:transform .28s ease}
.env[open] summary::after{transform:rotate(180deg)}

/* 開閉の動きは page_script.js が付ける（高さを測って動かすので、
   ブラウザの新しい機能に頼らずどこでも同じように動く）。
   JSが動かない環境では details が瞬時に開閉するだけで、機能は失われない。 */
.env > .body{overflow:hidden}
.env > .body > .inner{padding-top:2px}

.env li{margin-bottom:6px}
/* 手順の中に入れる入力例。その手順の直下に置かないと、
   何の例なのか分からなくなる。 */
.eg{display:block;margin-top:6px;font-size:14px;color:var(--sub)}

/* 変換の様子を見せる図。ドット絵ではなく実際の画面なので、
   img に一括でかけている pixelated を打ち消しておく。 */
.shot{margin:16px 0 4px}
/* 手順の途中に図を挟むときは、次の番号との間を空ける。
   詰まっていると図がどちらの手順のものか分からなくなる。 */
ol > li .shot{margin-bottom:18px}
.shot img,.shot video{width:100%;height:auto;display:block;border-radius:.3rem;
image-rendering:auto;
box-shadow:0 0 0 .2rem var(--winline),0 0 0 .35rem #000}
/* ドット絵の動画は補間せずに拡大する（写真の実画面キャプチャは auto のまま） */
.shot video{image-rendering:pixelated;background:#000}
.shot figcaption{margin-top:12px;font-size:14px;color:var(--sub)}
/* 図が2枚並ぶところでは、見出しを図の前に置く（あとだと、見てから
   何の図か確かめに戻ることになる）。その場合は余白を下に付け替える。 */
.shot figcaption:first-child{margin:0 0 8px}

.btn{display:block;position:relative;text-align:center;background:var(--gold);
color:#241a05;text-decoration:none;padding:14px;font-size:18px;border-radius:10px;
box-shadow:0 4px 0 #b8892a;
transition:background-color .12s ease, transform .12s ease, box-shadow .12s ease}
.btn:active{transform:translateY(4px);box-shadow:none}



/* ホバー。マウスのある環境だけに効かせる（スマホでタップすると
   ホバーが残ったままになるため）。押せる前の状態でのみ反応させる。 */
@media (hover:hover){
.btn:not(.busy):not(.done):hover{background:#ffe6a6;
transform:translateY(-2px);box-shadow:0 6px 0 #b8892a,0 0 0 2px #241a05}
}
/* 押したあとの状態。色でも進み具合が分かるようにする。 */
.btn.busy{background:#e0d3ae;box-shadow:0 4px 0 #9b8a63;cursor:default}
.btn.done{background:#6fdc9a;box-shadow:0 4px 0 #3f8a5c}
.win a.btn.done{color:#06301a}
.extra{margin:12px 0 0;font-size:14px}
/* 外部の解説へ出ていくリンクの印。ダウンロードの下向き矢印とは役割が違うので、
   同じ字を回さず「外へ進む」形にする。色は指定せずリンクの金を継ぐ。
   間隔は content の中の半角スペース1個で取る。margin だと下線がそこで途切れ、
   padding でも実機では繋がらなかった（2026-08-27）。スペースは文字そのものなので、
   下線が必ず引かれる。ここを .4em などに戻さないこと。 */
.extra.guide a::before{content:"» "}

/* 注意書きは、明るい地の上でも黒いウィンドウの中でも同じに見えるよう
   自前の背景と文字色を持たせる。 */
.warn{background:var(--warnbg);border:2px solid var(--warnline);
border-radius:10px;color:var(--warntxt);padding:10px 13px;
/* 上にも余白を持たせる。直前が .extra のように下マージンを持たない
   要素だと、上が詰まって前の行にくっついて見える。 */
margin:14px 0 12px;
/* 文字は本文より小さく、行間も詰める（窓の中は line-height:2 が
   効いていて、そのままだと注意書きの塊が本文より大きく見える） */
font-size:14px;line-height:1.7}
.warn b{color:#3a2600}
/* 黒い窓の中の注意書き（淡い黄色）では、窓用の金色リンクが地に溶けて読めない。注意書きの中だけ濃い茶にする */
.win .warn a,h2.sub + .win .warn a{color:#9a4a00;font-weight:bold;text-decoration:underline}
.win .warn a:hover,h2.sub + .win .warn a:hover{color:#5e2d00}
/* 折り返したときに背景と角丸が途切れないよう、行ごとに描き直させる */
code{background:#3a3a3a;color:var(--gold);border-radius:6px;
padding:2px 8px;font-size:15px;font-family:inherit;
-webkit-box-decoration-break:clone;box-decoration-break:clone}

.foot{color:var(--sub);font-size:13px;line-height:1.9}
ul{padding-left:1.3em}

/* 手順の番号は、丸の中に数字を入れる。
   ブラウザ既定の「1.」は本文と同じ見た目で、どこまでが番号か分かりにくい。
   counter を使えばHTMLに番号を書かずに済む（順番を入れ替えても崩れない）。 */
ol{list-style:none;counter-reset:step;padding-left:0;margin:10px 0 16px 0}
ol > li{counter-increment:step;position:relative;
padding-left:2.3em;margin-bottom:10px}
ol > li::before{content:counter(step);
position:absolute;left:0;top:.34em;
width:1.65em;height:1.65em;
display:flex;align-items:center;justify-content:center;
background:var(--gold);color:#241a05;
border-radius:50%;font-size:.86em;line-height:1;
box-shadow:0 2px 0 #b8892a}
/* 番号付きの手順は、本文よりひと呼吸下げて置く */
li{margin-bottom:6px}

/* ── 補助の節は「古い地図の紙」にする ────────────────────────────
   黒いウィンドウ＝いま操作するもの、紙＝あとで開く控え、という住み分け。
   隣接セレクタで h2.sub の直後の窓だけを狙うので、HTMLに手を入れなくて済む。

   【めくれの作り】参考：https://digipress.info/tech/folded-corner-effect-with-css/
   紙の上に折り返しを「描く」のではなく、紙の形そのものを clip-path で
   斜めに切り落とし、切り口の内側に濃い三角を置く。
   ・紙を四角のまま上に三角を描くと、ただの貼り紙に見える
   ・切り口に地の色を置くと、紙に穴が空いたように見える
   どちらも試して駄目だった（2026-08）。形を削るのが正解。

   そのため背景・枠・影は要素本体ではなく ::before に持たせる。
   要素に直接 clip-path をかけると、枠も影も一緒に切られてしまうため。 */
h2.sub + .win{
position:relative;background:none;border:none;box-shadow:none;
color:#3a3228;
/* 下に余白を多めに取る。紙は右下が欠けているので、
   詰まっていると最後の行が切り口に近づいて窮屈に見える。 */
padding-bottom:3em}

/* 紙の面。右下だけ角を落とす。 */
h2.sub + .win::before{content:"";position:absolute;inset:0;z-index:-1;
background:var(--paper);
/* 紙のざらつき。角度を割り切れない数にして方眼に見えないようにする */
background-image:
 repeating-linear-gradient(63deg,rgba(120,100,60,.035) 0 1px,transparent 1px 7px),
 repeating-linear-gradient(-41deg,rgba(120,100,60,.028) 0 1px,transparent 1px 11px),
 radial-gradient(120% 90% at 30% 10%,rgba(255,255,255,.5),transparent 70%);
clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),
 calc(100% - 30px) 100%,0 100%);
/* 色の差だけでは 1.41:1 と控えめなので、影で「机に置いてある」ことを補う */
filter:drop-shadow(3px 3px 0 rgba(35,33,29,.22))}

/* めくれて裏返った三角。切り口の内側に置く。
   折り目側を濃く、先端を明るくして厚みを出す。 */
h2.sub + .win::after{content:"";position:absolute;right:0;bottom:0;z-index:-1;
width:30px;height:30px;
/* 紙の裏側なので、紙の色を上げたらここも一緒に上げる */
background:linear-gradient(-45deg,#bfae82 0%,#ded0a9 60%,#f7f2e2 100%);
clip-path:polygon(0 0,100% 0,0 100%)}

/* 最後の行が切り口に潜り込まないように空ける */
h2.sub + .win > :last-child{margin-bottom:12px}

/* 紙の上では文字と部品の色を入れ替える */
h2.sub + .win b{color:#241a05}
h2.sub + .win a{color:#8a5a00}
/* 紙の上のボタン。上の指定より詳細度を上げて文字色を勝たせる */
h2.sub + .win a.btn{color:#241a05}
h2.sub + .win code{background:#e5d9ba;border:1px solid #c9bc99;color:#4a3a12}
h2.sub + .win .warn{background:#fff6dd;border-color:#c8973a}
h2.sub + .win .extra{color:#5c554b}
/* 最後の行がめくれた角に潜り込まないように空ける */
h2.sub + .win > :last-child{margin-bottom:14px}

/* 動きを減らす設定にしている人向けの打ち消し。
   後勝ちで確実に効かせたいので、必ずこのファイルの末尾に置くこと。 */
@media (prefers-reduced-motion:reduce){
.env summary::after{transition:none}
.btn{transition:none}
.btn:not(.busy):not(.done):hover{transform:none;
box-shadow:0 4px 0 #b8892a,0 0 0 2px #241a05}
}

/* ==============================================
 * ヒーローセクション（RPGタイトル風ウィンドウ）
 * ============================================== */
.hero-title-section {
  text-align: center;
  padding: 0 20px 30px;
  position: relative;
  background: rgba(0, 0, 0, 0.75); /* トップページと同じ枠なし背景 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  margin-bottom: 40px;
}

/* 浮遊アニメーション */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}