/* ═════════════════════════════════════════════════════════════════════
   enecra.jp 共通部品：ヘッダーと「絵＋境目をまたぐ板」（2026-09-23 新設）
   使っているページ＝ / （index.html）・/works・/license の3つ。

   ★これが正本。3ページで同じ見た目にするため、部品のCSSはここ1か所に置く。
     ページごとに写すと、片方だけ直されてズレる（今日 LICENSE.txt で起きた「正本が2つ」と同じ型）。
     ページ側に書くのは「そのページの絵と高さ」だけ（下の変数）。
   ⚠ ヘッダーの HTML は3ページに同じ物を置いている（HTMLは共通化できないため）。
     ヘッダーの中身を直すときは、index.html・works.html・license.html の3つとも直すこと。

   ■ minecraft.net に倣った作り方（実測＝ukabu-idea/21_minecraft-net-study/研究ノート.md）
     ・画面上に固定した半透明の暗い帯。右端に「いちばんしてほしいこと」のボタンを常に置く
     ・画面いっぱいの絵が主役。見出しは控えめ
     ・文字は、絵の下端をまたぐ暗い板に載せる（本家は約100px食い込ませている）
   ■ 写さなかった物（権利ルール 82行目「minecraft.net系の見た目」「公式書体」禁止）
     Minecraft の書体・緑の立体ボタン・板の階段状の縁。
     → DotGothic16（汎用の無料書体）・エネクラの金・金の通電ライン に置き換えた。

   ■ ページ側で決める変数（.fv に書く）
     --fv-img        PC用の絵（横長）            例 url(/img/hero-station.jpg)
     --fv-img-sp     縦長の画面用の絵（4:5）     例 url(/img/hero-station-sp.jpg)
     --fv-pos        PC用の絵の見せる位置        既定 center 42%
     --fv-pos-sp     縦長用の絵の見せる位置      既定 center 30%
     --fv-h          PC の絵の高さ               既定 トップページの値
     --fv-h-portrait 縦長の画面の絵の高さ        既定 トップページの値
   ═════════════════════════════════════════════════════════════════════ */

/* ★色・書体は【部品専用の名前】で持つ。ページ側の --gold を借りない。
   利用条件ページだけ金が #c79a2a（他は #c8912a）で、借りるとボタンの色が揃わなかった。 */
:root{
  --ec-gold:#c8912a; --ec-gold-lt:#e8b93f; --ec-gold-dk:#8a610f;
  --ec-night:#17171a;         /* サイト内の暗い節（.adults）と同じ＝夜の色を1つにする */
  --ec-night-tx:#ddd8cc;
  --ec-pix:"DotGothic16","Courier New",monospace;
  --ec-ease:cubic-bezier(.43,.195,.02,1);
  --gh-h:68px; --ov:112px; --gut:clamp(16px,2.4vw,40px);
  /* ★ENECRA（ヘッダー）と UKABU（絵の右下）の字の高さ。2つを同じ値で決める
     （2026-09-24 TAKURO「ENECRAを少し大きく、右下のUKABUを少し小さくして、サイズを合わせて」。
       それまでは ENECRA＝帯の高さ×0.44＝30px／UKABU＝画面幅の2.2%＝1920幅で42px とバラバラだった） */
  --wm-h:34px;
}

/* ═══ ヘッダー ═══
   ★文字の大きさは px で決める。トップページだけ「390pxで基準の文字を11.5pxまで縮める」作りなので、
     rem で書くとページごとに大きさが変わる。部品はどのページでも同じ寸法にする。 */
.gh{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--gh-h);
  display:flex;align-items:center;gap:clamp(14px,2vw,32px);padding:0 var(--gut);
  background:rgba(23,23,26,.86);-webkit-backdrop-filter:saturate(1.25) blur(10px);
  backdrop-filter:saturate(1.25) blur(10px);border-bottom:1px solid rgba(255,255,255,.07);
  color:#fff;font-family:"Noto Sans JP","Yu Gothic Medium",system-ui,sans-serif;line-height:1.5}
.gh .logo{display:block;line-height:0;color:#fff;flex:none;text-decoration:none}
.gh .logo svg{display:block;width:auto;height:var(--wm-h)}
.gh .logo:hover{color:var(--ec-gold-lt)}
.gh-nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px);margin-left:auto}
.gh-nav a{color:#d9d2c3;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.05em;
  white-space:nowrap;padding:8px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.gh-nav a:hover{color:#fff;border-bottom-color:var(--ec-gold)}
/* いま見ているページの印 */
.gh-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--ec-gold)}
/* 右端のボタン。本家の「今すぐ購入」と同じ役目＝どのページからでも押せる主目的 */
.gh-cta{flex:none;display:inline-flex;align-items:center;gap:.5em;background:var(--ec-gold);color:#fff;
  text-decoration:none;font-weight:900;font-size:14.5px;letter-spacing:.04em;white-space:nowrap;
  padding:.62em 1.1em;box-shadow:0 3px 0 var(--ec-gold-dk);transition:background .2s,transform .12s,box-shadow .12s}
.gh-cta:hover{background:var(--ec-gold-lt)}
.gh-cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ec-gold-dk)}
.gh-cta svg{width:1.05em;height:1.05em;flex:none}
/* 固定ヘッダーの分、ページ内リンクの着地点を下げる（見出しが帯の裏に潜らないように）。
   ★section に限らない。利用条件の着地点 #credit は div なので、section[id] だと帯の裏に潜る */
[id]{scroll-margin-top:calc(var(--gh-h) + 12px)}

/* 読み上げと検索にだけ渡す文字（見出しの区切り「｜」など）。作品・利用条件ページには定義が無かった */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══ 絵（ファーストビュー）═══
   ・絵は帯の裏まで敷く（帯が半透明なので、上端まで絵が続いて見える）
   ・板は絵の下端から --ov だけ食い込ませる
   ★高さ＝【文字の板の下の辺まで1画面目に納まる】値（2026-09-24 TAKURO「『マインクラフトで、発電所を作ろう』の
     四角の下の辺が納まるようにして」）。それまでの 100svh−184px はボタンまでしか見ておらず、
     板の下の「v1.3 ／ ご登録は要りません」が画面の下で切れていた（1920×1080 で24pxはみ出し＝実測）。
     板の高さ（PCで309〜320px）−食い込み112px＋下の余り約24px ＝ 232px を引く */
.fv{position:relative;height:var(--fv-h,max(460px,calc(100svh - 232px)));overflow:hidden;background:#0e0e0e}
.fv::before{content:"";position:absolute;inset:0;
  background-image:var(--fv-img);background-position:var(--fv-pos,center 42%);
  background-size:cover;background-repeat:no-repeat}
/* 足元だけ落とす＝板へのつながりを柔らかくする */
.fv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(10,10,12,.18) 80%,rgba(10,10,12,.42) 100%)}

/* ═══ 動くファーストビュー（トップだけ・2026-09-24 TAKURO「ファーストビューに動きがほしい」）═══
   手前＝駅と発電所と芝生の絵（空の所だけ透明）。その後ろで【空だけ】がゆっくり流れ続ける。
   ・絵と同じ縦横比の「舞台」（.fv-stage）を、背景の cover と同じ置き方（中央・縦42%）で置く。
     空の層もその舞台の中に置くので、絵と同じ縮尺・同じ位置に空が来る（値はカメラの角度から計算してページ側で渡す）。
   ・空は同じ絵2枚を半周期ずらして流し、端で溶け合わせる＝継ぎ目なく流れ続ける（雲がゆっくり形を変えるように見える）。
   ・開いた直後に1度だけ、手前と空をまとめてごくゆっくり引く
     （2026-09-13 TAKURO「変にアップするアニメはいらない。徐々に滅茶苦茶ゆっくり引き」）。
   ・動かすのは transform と opacity だけ。画面の外では止める（sky.js が .is-off を付ける）。
   ・「動きを減らす」設定の人には、動かない1枚（空は絵を撮った時と同じ位置）。
   ページ側で渡す値: --fv-ar（絵の縦横比）／--sky-l --sky-t --sky-w --sky-h（空の絵の位置と大きさ・舞台に対する%）／
     --sky-d（流れる幅・空の絵の幅に対する%）／--sky-T（1周の秒数）／--fv-sky-img（空の絵） */
.fv-live::before{content:none}
.fv-live{container-type:size;background:#5f8fc4}           /* 絵が届く前は空の色 */
.fv-stage{position:absolute;left:0;top:0;width:100%;height:100%}   /* 容器の大きさの単位が使えない時 */
@supports (width:1cqw){
  .fv-stage{left:50%;top:var(--fv-py,42%);
    width:max(100cqw,calc(100cqh * var(--fv-ar)));height:max(100cqh,calc(100cqw / var(--fv-ar)));
    transform:translate(-50%,calc(-1 * var(--fv-py,42%)))}
}
.fv-zoom{position:absolute;inset:0;transform-origin:var(--fv-zo,62% 55%);
  animation:fvPull 22s cubic-bezier(.22,.61,.36,1) both}
@keyframes fvPull{from{transform:scale(1.06)}to{transform:none}}
.fv-sky{position:absolute;inset:0;overflow:hidden}
.fv-sky i{position:absolute;left:var(--sky-l);top:var(--sky-t);width:var(--sky-w);height:var(--sky-h);
  background:var(--fv-sky-img) 0 0/100% 100% no-repeat;will-change:transform,opacity;
  animation:fvDrift var(--sky-T,160s) linear infinite,fvFade var(--sky-T,160s) linear infinite}
.fv-sky i:nth-child(2){animation-delay:calc(var(--sky-T,160s) / -2),calc(var(--sky-T,160s) / -2)}
@keyframes fvDrift{from{transform:translate3d(calc(-1 * var(--sky-d)),0,0)}to{transform:translate3d(var(--sky-d),0,0)}}
@keyframes fvFade{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
.fv-fg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% var(--fv-py,42%)}
.fv-live.is-off .fv-zoom,.fv-live.is-off .fv-sky i{animation-play-state:paused}
/* 運転中の動き（2026-09-24 TAKURO「蒸気発生器の中で水が沸騰し蒸気が作られている様子や、タービンや発電機が見えて
   回っているようす、主変圧器のファンが回っているように」）＝動く所だけの動画を、手前の絵のちょうど同じ所に重ねる。
   ・動画の1コマ目＝手前の絵（止まった絵の動く所は1コマ目で置き換えてある）＝再生が始まっても絵は跳ねない
   ・動く所の外はマスクで隠す（縁はぼかしてある）＝動画の四角い縁は見えない。空の上には出さない
   ・読み込みと再生は sky.js（ページを読み終えてから・画面の外では止める・「動きを減らす」設定と節約モードでは読まない）
   ページ側で渡す値: --run-l --run-t --run-w --run-h（舞台に対する%）・--run-mask（マスクの絵） */
.fv-run{position:absolute;left:var(--run-l,0);top:var(--run-t,0);width:var(--run-w,0);height:var(--run-h,0);
  display:block;object-fit:fill;pointer-events:none;opacity:0;transition:opacity .8s linear;
  -webkit-mask-image:var(--run-mask);mask-image:var(--run-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fv-run.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .fv-zoom,.fv-sky i{animation:none}
  .fv-sky i:first-child{opacity:0}
  .fv-run{display:none}
}

/* 右下の UKABU（トップページだけに置いている。会社サイトへ戻る印・2026-08-06 指摘）
   ★絵の右下の角に置く（2026-09-24 TAKURO「画像の右下端に移動」）。板は左に寄っているので広い画面ではぶつからない。
     狭い画面（900px以下）は板が右端近くまで伸びて絵の下端をまたぐ＝角に置くと板の裏に隠れるので、板の上に置く（下の @media） */
.fv-uk{position:absolute;right:clamp(16px,1.7vw,32px);bottom:clamp(14px,1.5vw,26px);z-index:8;
  display:block;line-height:0;color:#fff;opacity:.92;transition:opacity .2s,color .2s}
.fv-uk:hover{opacity:1;color:var(--ec-gold-lt)}
.fv-uk svg{display:block;width:auto;height:var(--wm-h);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 4px 14px rgba(0,0,0,.45))}

/* ═══ 文字の板 ═══
   本家の #171615・幅584px・左192px（1440で13.3%）に倣い、色はサイトの夜色 */
.fv-panel-wrap{position:relative;z-index:5;margin-top:calc(-1 * var(--ov));padding:0 var(--gut)}
.fv-panel{position:relative;max-width:660px;margin-left:clamp(0px,calc(13.3vw - var(--gut)),200px);
  background:var(--ec-night);color:#fff;text-align:left;
  font-family:"Noto Sans JP","Yu Gothic Medium",system-ui,sans-serif;
  padding:clamp(22px,2.1vw,30px) clamp(24px,3vw,44px) clamp(20px,2vw,28px);
  border-top:4px solid var(--ec-gold);   /* 通電ライン＝エネクラの金。本家の階段状の縁の代わり */
  box-shadow:0 22px 44px rgba(20,15,5,.30)}
.fv-h{margin:0;font-weight:400;color:#fff;line-height:1.4;border:0;padding:0}
.fv-name{display:block;font-family:var(--ec-pix);font-size:15px;letter-spacing:.24em;line-height:1.6;
  color:var(--ec-gold-lt);margin-bottom:.5em}
/* 名前が長いとき（利用条件の「エネクラ（enecra / enecra-life）」）は字間を詰める */
.fv-name.is-long{letter-spacing:.08em}
.br-sp{display:none}
/* ★32pxで頭打ち。1920×1080 で36pxまで育つと2行に折れ、ボタンが1画面目から24px落ちた（実測） */
.fv-line{display:block;font-family:var(--ec-pix);font-size:clamp(24.8px,2.2vw,32px);
  line-height:1.4;letter-spacing:.04em}
.fv-lead{margin:.7em 0 0;font-size:16px;line-height:1.85;color:var(--ec-night-tx);max-width:34em}
/* ★文節の途中で折らない。スマホで「…届けま／す。」と1文字だけ落ちていた（実測）。
   word-break:auto-phrase は Chrome だけで、学校の iPad（Safari）では効かないので、
   折ってよい所だけを区切った inline-block で組む＝どの端末でも同じに折れる */
.fv-lead .nw{display:inline-block}
.fv-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:1.2em}
/* 主ボタン。形は四角（ブロックの世界に合わせる）・下の縁はサイト既存のボタンと同じ */
.fv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--ec-gold);color:#fff;text-decoration:none;font-weight:900;font-size:17px;
  letter-spacing:.06em;min-height:56px;padding:0 1.8em;box-shadow:0 4px 0 var(--ec-gold-dk);
  transition:background .2s,transform .12s,box-shadow .12s}
.fv-btn:hover{background:var(--ec-gold-lt)}
.fv-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ec-gold-dk)}
.fv-btn svg{width:1.2em;height:1.2em;flex:none}
.fv-sub{color:#e6dfd0;font-size:14.5px;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(230,223,208,.45);padding-bottom:2px;white-space:nowrap}
.fv-sub:hover{color:var(--ec-gold-lt);border-bottom-color:var(--ec-gold-lt)}
.fv-meta{margin:.95em 0 0;font-family:var(--ec-pix);font-size:13px;letter-spacing:.14em;
  line-height:1.6;color:#9d9587}
/* ═══ 板の下の帯＝夜明け前の空（2026-09-23）═══
   ★経緯：ベージュの無地 → 青いタイルの帯（同日）→ 空の仕組みを入れたので、1日の始まり＝夜明け前にした。
     ここから下へ読み進むと、朝焼け→夏の青空→夕焼け→夜空と、空が1本につながって移り変わる（下の「空」）。
   ・帯は絵の下端ちょうどから始める（板は --ov だけ絵に食い込んでいるので top:var(--ov)）
   ・雲と星は sky.js が .sky-fx の中に置く（帯の .sky-fx も絵の下端から） */
.fv-panel-wrap{padding-bottom:clamp(40px,4.5vw,64px)}
/* ★絵の下端に落ちる影は、上端だけのグラデーションで描く（2026-09-25）。
     旧＝inset の box-shadow（0 12px 20px -12px）。ぼかしが帯の【下端と左右の端】にも回り込み、下の段との境目で
     色が段になっていた（スマホで赤が約7段・TAKURO「スマホの時にグラデーションの一枚絵ではなく…」の片方の原因）。 */
.fv-panel-wrap::before{content:"";position:absolute;left:0;right:0;top:var(--ov);bottom:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.26) 22px,rgba(0,0,0,0) 34px),   /* 絵の下端に落ちる影＝空が一段奥にある */
    var(--band,linear-gradient(180deg,#26306a 0%,#4b4390 42%,#9a5d9f 76%,#e8849a 100%));
  box-shadow:0 2px 0 var(--band-end,#e8849a)}             /* 下の段との境目の透けを塞ぐ（下の「空」の説明） */
/* ★ページごとに、空の始まる時刻を変える（2026-09-23 TAKURO「作品や利用条件の空の最初のスタートは別にして。
     トップ合わせ全部紫スタートになってる」）。トップ＝夜明け前（紫・上の既定）／作品＝朝焼け／利用条件＝夏の青空。
     帯の下端の色（--band-end）が、下の段（sky-fullday-…）の上端の色と同じ＝つながって見える */
.fv-panel-wrap.band-sunrise{--band:linear-gradient(180deg,#ec7f86 0%,#f39a88 30%,#fbbe90 68%,#fde0a6 100%);--band-end:#fde0a6}
.fv-panel-wrap.band-summer{--band:linear-gradient(180deg,#2787dc 0%,#3f9fe9 40%,#62b6ee 74%,#7cc6f0 100%);--band-end:#7cc6f0}
/* ★2026-09-24 作品＝1年の始まり（春の霞）／利用条件＝日が暮れて月が昇る（夕暮れ）。下の段の上端の色とつなぐ */
.fv-panel-wrap.band-spring{--band:linear-gradient(180deg,#f2c6d6 0%,#f6d3df 45%,#f9dce6 100%);--band-end:#f9dce6}
.fv-panel-wrap.band-dusk{--band:linear-gradient(180deg,#e9937a 0%,#c7688a 34%,#7e4d8f 68%,#3f3a7c 100%);--band-end:#3f3a7c}
/* ═══ 絵と下の帯の境目＝金の二重線（2026-09-24 TAKURO「ファーストビューと次のセクションの境目を、おしゃれに二重線とかで装飾して」）═══
   太い線（上・明るい金）と細い線（下・金）を夜の色1本ではさんで並べる＝2本の送電線が平行に走るような「太細の二重線」。
   色は文字の板の上端の金（通電ライン）と同じ。板の裏を通る（板が上に重なる）。
   ・絵の下端をまたいで置く（太い線が絵の側・細い線が帯の側）＝境目そのものを縁取る
   ・下へ落とす影で、帯（空）が線の一段奥にあるように見せる */
.fv-panel-wrap::after{content:"";position:absolute;left:0;right:0;top:calc(var(--ov) - 4px);height:9px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    var(--ec-gold-dk) 0 1px,          /* 太い線の上の縁（絵との境を締める） */
    var(--ec-gold-lt) 1px 4px,        /* 太い線 */
    var(--ec-night) 4px 7px,          /* 2本のあいだ */
    var(--ec-gold) 7px 8px,           /* 細い線 */
    rgba(23,23,26,.6) 8px 9px);       /* 細い線の下の縁 */
  box-shadow:0 3px 8px rgba(0,0,0,.28)}
.fv-panel-wrap > .sky-fx{top:calc(var(--ov) + 5px)}
.fv-panel-wrap + section{padding-top:clamp(40px,4vw,64px)}

/* 最初の描画で、板がそっと上がってくる（本家 mcAnimateFadeInUp と同じ役目・一度きり）。
   ★JSの合図には頼らない。load（写真とフォントを全部読み終える）を待つと、中身が画像待ちになる。
   ★【透明から始めない】。遅い回線（下り40KB/s）で実測すると、ブラウザは HTML を読み終えるまで
     入場アニメの時計を 0ms のまま止めていた（4秒・7秒時点で経過0ms／11秒で完了）。
     透明から始めると、ヘッダーも写真も見えているのに【見出しとボタンだけ約7秒消えていた】。
     動きは「少し下から持ち上がる」だけ＝時計が止まっていても、最初から読める。 */
@keyframes fvUp{from{transform:translateY(14px)}to{transform:none}}
.fv-panel{animation:fvUp .9s var(--ec-ease) .12s both}
@media (prefers-reduced-motion:reduce){.fv-panel{animation:none}}

/* ── 縦長の画面（スマホ・縦持ちのタブレット）──
   ★絵は【縦向きに撮り直した別カット（4:5）】に差し替える（2026-08-06「原子炉がドアップ」の解決法）。
     本家もスマホでは 1920×1080 ではなく 1080×1080 の別カットに替えている。 */
@media (orientation:portrait){
  :root{--ov:88px}
  /* ★縦の短い画面（iPhone SE 375×667）でボタンの下の余りが10pxしかなかった（実測）＝上限を掛ける */
  .fv{height:var(--fv-h-portrait,min(calc(100vw * 1.25),calc(100svh - 250px)));min-height:0}
  .fv::before{background-image:var(--fv-img-sp,var(--fv-img));background-position:var(--fv-pos-sp,center 30%)}
}
/* ★スマホ（縦）は板が縦に長い（ボタンが幅いっぱい・約385px）。板の下の辺まで1画面目に納める（2026-09-24）＝
   100svh−330px を上限に。iPhone SE（375×667）で 60px はみ出していた。390×844 以上は 4:5 のまま変わらない */
@media (orientation:portrait) and (max-width:767px){
  .fv{height:var(--fv-h-portrait,min(calc(100vw * 1.25),calc(100svh - 330px)))}
}
@media (max-width:900px){
  .gh-nav{display:none}          /* 案内は各ページの本文にもある */
  /* ★右上の「無料ダウンロード」は出さない（2026-09-25 TAKURO「スマホ版のヘッダーのハンバーガーの隣に無料ダウンロードがあるが消して」）。
       ダウンロードはメニューの中の項目と、ファーストビューの主ボタンから */
  .gh-cta{display:none}
}
/* ═══ ヘッダーのメニュー（画面幅900px以下）2026-09-25 ═══
   TAKURO「スマホ版には、ヘッダーの右上にダウンロードがあるけど、子どもたちの作品のページや利用条件のページに飛べないので、
   ハンバーガーをヘッダーの右端に作って『みんなの作品』『利用条件』『学校・自治体・企業の方へ』『無料ダウンロード』を
   飛べるように、畳めるデザインにして」。
   ・900px以下ではヘッダーの「無料ダウンロード」を消し、右端はこのボタンだけ（2026-09-25 同日の2回目）
   ・右端のボタン＝四角い端の3本線（ブロックの世界に合わせて角を丸めない）。真ん中の1本は金＝エネクラの通電ライン。
     開くと×になる。押せる大きさは 44px 四方
   ・開いた案内＝ヘッダーの真下に、夜の色の板を下ろす。いま見ているページは金の字と左の金の線
   ・「無料ダウンロード」は案内の最後に、ほかの項目と同じ行の形で（PC は右端のボタンがあるので案内には出さない）
   ・開け閉めは /gh.js（ヘッダーに .is-open を付け外し）。「動きを減らす」設定では下りてくる動きを付けない */
.gh-menu{display:none}
.gh-nav .gh-nav-dl{display:none}
@media (max-width:900px){
  .gh-menu{display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;
    margin-left:auto;margin-right:-8px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .gh-menu .bars{position:relative;display:block;width:22px;height:3px;background:var(--ec-gold-lt);
    transition:background .15s}
  .gh-menu .bars::before,.gh-menu .bars::after{content:"";position:absolute;left:0;width:22px;height:3px;
    background:#fff;transition:transform .2s ease}
  .gh-menu .bars::before{top:-7px}
  .gh-menu .bars::after{top:7px}
  .gh-menu:focus-visible{outline:2px solid var(--ec-gold-lt);outline-offset:-2px}
  .gh.is-open .gh-menu .bars{background:transparent}
  .gh.is-open .gh-menu .bars::before{transform:translateY(7px) rotate(45deg)}
  .gh.is-open .gh-menu .bars::after{transform:translateY(-7px) rotate(-45deg)}

  .gh.is-open .gh-nav{display:flex}
  .gh-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:4px var(--gut) 18px;background:rgba(23,23,26,.97);border-top:1px solid rgba(255,255,255,.07);
    box-shadow:0 18px 32px rgba(0,0,0,.38);animation:ghDrop .18s ease-out}
  .gh-nav a{display:flex;align-items:center;justify-content:space-between;font-size:16px;color:#e6dfd0;
    padding:15px 6px 15px 12px;border-bottom:1px solid rgba(255,255,255,.08);border-left:3px solid transparent}
  .gh-nav a::after{content:"";flex:none;width:7px;height:7px;margin-left:12px;
    border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.55}
  .gh-nav a:hover{border-bottom-color:rgba(255,255,255,.08)}
  .gh-nav a[aria-current="page"]{color:var(--ec-gold-lt);border-bottom-color:rgba(255,255,255,.08);
    border-left-color:var(--ec-gold)}
  /* 「無料ダウンロード」もほかの項目と同じ行の形（2026-09-25 TAKURO「黄色枠を、みんなの作品や利用条件と同じような表示方法に」）。
     旧＝案内の最後に金のボタン（下向き矢印つき） */
  .gh-nav .gh-nav-dl{display:flex}
  .gh-nav .gh-nav-dl svg{display:none}
}
@keyframes ghDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .gh-nav{animation:none}
  .gh-menu .bars::before,.gh-menu .bars::after{transition:none}
}
/* 板が右端近くまで伸びる幅（板の右端＋ロゴ＋余白が画面幅を超える＝920px以下）は、ロゴを板の上に上げる */
@media (max-width:920px){
  .fv-uk{right:var(--gut);bottom:calc(var(--ov) + 14px)}
}
@media (max-width:767px){
  :root{--gh-h:58px;--ov:72px;--gut:16px;--wm-h:26px}
  .gh-cta{font-size:13.5px;padding:.55em .9em}
  .fv-panel{margin-left:0;max-width:none;padding:22px 20px 24px}
  .fv-name{font-size:13px}
  .fv-line{font-size:clamp(22px,6.2vw,28px)}
  .fv-lead{font-size:15px}
  .fv-sub{font-size:14px}
  .fv-meta{font-size:12px}
  .br-sp{display:inline}
  /* スマホは本家と同じく、ボタンを主役にする（押しやすい幅いっぱい） */
  .fv-act{flex-direction:column;align-items:stretch;gap:14px}
  .fv-btn{width:100%}
  .fv-sub{align-self:center}
  .fv-meta{text-align:center}
}

/* ═══ 空（雲・星・太陽・月・降る物）は /sky.css へ切り出した（2026-09-24）═══
   ukabu.world/school/ でも同じ空を使うため。3ページとも site.css の次に sky.css を読む。 */