/* しわけまる 公式ページ（B案・白×青）。2026/09/29 のモックから写し、本番用に整えた（2026/09/30）。
   ⭐ 2026/10/08：デジタル庁デザインシステム（DADS β版 v2.18.0）の規則で組み直した。値の出どころ：
      https://design.digital.go.jp/dads/ の基本デザイン（色・タイポグラフィ・余白・エレベーション・リンクテキスト）と、
      公開されている @digital-go-jp/design-tokens 2.0.1・design-system-example-components-html（ボタン・入力欄・見出し・リンク）。
      ・字の大きさは 14px 以上（本文 16px・行の高さ 1.7・字間 0.02em）。太さは 400 と 700 の2つだけ
      ・余白は 8px を単位に（8・16・24・40・64）
      ・フォーカスは黒 4px＋黄 #ffd43d の二重（DADS は「いかなる場合も変更してはいけません」）
      ・リンクは色と下線の両方で示す。カードの影はやめ、背景との差 3:1 の枠線で区切る
      ・主な色はしわけまるの青のまま（白地で 4.97:1）。黄色いボタンは青にした（2026/10/08 あゆむさん「青のまま・黄ボタンを青に」）
   ⭐ 色はここの変数だけで持つ。⛔ 外から字体も CSS も読まない（_headers の CSP と揃える）。
   ⚠️ CSP で style 属性を止めているので、HTML に style="…" を書かない（クラスにする）。 */
/* ⭐ 字体：Noto Sans JP を、ページで使う文字だけに絞った1本（太さの軸 100〜900 を持つ。使うのは 400 と 700）。
   ⭐ 作り直す：python3 tools/公式ページ/字体を絞る.py（文を足したとき。⛔ 流し忘れは check.sh 51 が止める）。
   ⚠️ 2026/09/30 までは Google Fonts から読んでいた（同じ元・同じ版。重さは 908KB → 127KB）。ライセンスは fonts/OFL.txt。 */
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/NotoSansJP.woff2) format('woff2')}
:root{
  --bg:#ffffff; --band:#eef5fb;
  --ink:#1a1a1a;     /* 本文（DADS solid-gray-900） */
  --sub:#4d4d4d;     /* 補足の文（solid-gray-700・白地で 8.45:1） */
  --line:#949494;    /* カード・区切りの線（solid-gray-420・白地で 3.03:1） */
  --field:#666666;   /* 入力欄の枠（solid-gray-600・白地で 5.74:1） */
  --blue:#1a6fd0;    /* しわけまるの青＝主な色。白地で 4.97:1・--band の上で 4.51:1（⛔ --blue-pale の上の字には使わない＝4.26:1） */
  --blue-dark:#0f4c8f; --blue-deep:#0b3a6e; --blue-pale:#e3effb;
  --error:#ec0000;   /* DADS error-1（白地で 4.6:1） */
  --visited:#8b008b; /* DADS のリンクの訪問済み（magenta-900） */
  --focus:#ffd43d;   /* DADS のフォーカスの黄（yellow-300）。⛔ 変えない */
  --font:'Noto Sans JP',"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:700}
/* ⭐ 語のまとまりで折る（2026/10/12 あゆむさん「文章の意味や単語を把握した上で適切な箇所で改行を行う」）。
   折ってよい所は文に <wbr> で入れ、ほかは keep-all で折らない（句読点と空白のあとは折れる）。必ずそこで折るなら <br>。
   ⛔ word-break:auto-phrase は iPhone の Safari で効かない（学生アプリと同じ → v7/_ui.css）。overflow-wrap:anywhere は、収まらないときだけ字の間で折る保険 */
body{word-break:keep-all;overflow-wrap:anywhere}
input,textarea{word-break:normal}
p,ul,ol,dl,dd,figure{margin:0}
.nw{white-space:nowrap}
/* ⭐ PC 幅でだけ効く改行（2026/10/12 夜）。あゆむさんが指定した改行の位置のうち、スマホ幅ではその手前で先に折り返して「求められ」だけの短い行ができる所に付ける */
@media (max-width:767px){br.pc{display:none}}
/* ⭐ PC 幅で1行に収める文（2026/10/13 あゆむさん「ご不明な点があればお気軽にお問い合わせください。　で行こう。改行したくない」）。スマホ幅では語のまとまりで折る */
@media (min-width:768px){.nw-pc{white-space:nowrap}}
/* ⭐ 上の見出し（ヘッダー）が固定なので、ページ内リンクで飛んだ先が隠れないように */
section[id],.sub[id]{scroll-margin-top:80px}

/* リンク（DADS：色と下線の両方で示す・押せる所はなぞると線が太くなる） */
a{color:var(--blue-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:visited{color:var(--visited)}
@media (hover:hover){a:hover{color:var(--blue-deep);text-decoration-thickness:3px}}
/* フォーカス（DADS：黒 4px と黄の二重。どの色の上でも見える） */
:focus-visible{outline:4px solid #000;outline-offset:2px;box-shadow:0 0 0 2px var(--focus)}
a:not(.btn):focus-visible{background:var(--focus);border-radius:4px}   /* 文のリンクは背景も黄に（DADS のリンク）。ボタンは枠だけ */

.wrap{max-width:1040px;margin:0 auto;padding-inline:24px}

/* ボタン（DADS のボタン：塗り・枠線の2種類 × 大・小。なぞると下線） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;max-width:100%;border-radius:8px;font-family:inherit;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:.02em;text-decoration:none;text-align:center;cursor:pointer}
.btn:visited{color:inherit}
.btn.solid{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.btn.outline{background:#fff;color:var(--blue-dark);border:1px solid currentColor}
@media (hover:hover){
  .btn.solid:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;text-decoration:underline;text-decoration-thickness:1px}
  .btn.outline:hover{background:var(--blue-pale);color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px}
}
.btn.solid:active{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn.lg{min-width:136px;min-height:56px;padding:12px 16px}
.btn.sm{position:relative;min-width:80px;min-height:36px;padding:2px 12px;border-radius:6px}
.btn.sm::after{content:"";position:absolute;inset:0;margin:auto;height:44px}   /* 押せる高さは 44px 取る（DADS と同じ） */
.btn[disabled]{background:#b3b3b3;border-color:#b3b3b3;color:#f2f2f2;cursor:progress;text-decoration:none}

/* ヘッダー */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{font-weight:700;font-size:22px;letter-spacing:.02em;color:var(--blue-dark);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand:visited{color:var(--blue-dark)}
.brand img{width:30px;height:30px}
.nav{display:flex;align-items:center;gap:24px;font-size:16px;font-weight:700}
.nav a:not(.btn){color:var(--ink);text-decoration:none;padding-block:8px}
@media (hover:hover){.nav a:not(.btn):hover{text-decoration:underline;text-decoration-thickness:3px}}

/* ヒーロー */
.hero{background:var(--band);padding-block:64px 40px}
.hero .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:36px;line-height:1.4;letter-spacing:.01em;color:var(--blue-dark)}
.lead{margin-top:24px;max-width:36em}
.lead+.lead{margin-top:1.7em}   /* ⭐ 2つの文のあいだを1行あける（2026/10/12 夜 あゆむさん「<開ける>」） */
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.devices{position:relative;padding-bottom:40px}
.laptop{border:8px solid #2b3340;border-bottom-width:18px;border-radius:14px;background:#fff;overflow:hidden}
.laptop img{max-height:330px;object-fit:cover;object-position:top}
.phone{position:absolute;right:-6px;bottom:0;width:120px;border-radius:16px;border:5px solid #2b3340;background:#fff}

/* 導入実績の1行 */
.strip{background:var(--blue-dark);color:#fff;padding:16px 24px;text-align:center;font-weight:700}

/* 節：肩見出し（英語）→ 見出し → 本文。DADS の余白の例（肩と見出しの間 8px・見出しと本文の間 24px・節の上下 64px） */
section{padding-block:64px}
section.alt{background:var(--band)}
.shoulder{font-size:16px;font-weight:700;color:var(--blue);letter-spacing:.08em;text-transform:uppercase}
h2{margin-top:8px;font-size:32px;line-height:1.5;letter-spacing:.01em}
.msg{margin-top:24px;max-width:44em}
.sub{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.sub h3{margin-top:8px;font-size:24px;line-height:1.5}

/* カード（影はやめて線で区切る） */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.card h3,.card h4{font-size:20px;line-height:1.5;color:var(--blue-dark)}
.card p{margin-top:8px}
.card .n{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:16px;letter-spacing:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.two .card h3{padding-bottom:8px;border-bottom:2px solid var(--blue)}
.two .card p{margin-top:16px}
ul.dots{margin-top:16px;padding-left:1.5em}
ul.dots li+li{margin-top:8px}
ol.steps,ol.flow,ul.uses{list-style:none;padding:0;display:grid;gap:24px;margin-top:40px}
ol.steps{grid-template-columns:repeat(2,1fr);gap:16px}   /* ⭐ 2列（2026/10/12 夜〜。〔〜10/12 夜〕4列）：「」の問いを改行なしで入れるため（あゆむさん「できればこれらは改行なしで入れたいな」） */
ol.flow,ul.uses{grid-template-columns:repeat(3,1fr)}
.steps h4{font-size:18px;line-height:1.6}
.steps p{color:var(--sub)}
/* ⭐ ①〜④（2026/10/12 あゆむさん「中身をパワポと同じように「」のぶぶんも入れてほしい。学内テストでの評価対象と文字を入れるのではなく、色を変えるだけにしてほしい」）。
   問いは御提案書5枚目の「」の文。④（学内テストでの評価対象）は、御提案書と同じく濃い紺の塗りに白い字（8.6:1）。〔〜10/12〕④に「学内テストでの評価対象」の札 .tag */
.steps .q{margin-top:4px;color:var(--ink)}   /* ⭐ 問いの中に <wbr> を入れない＝収まらないときだけ字の間で折れる（360px で最長の問い 16字が1行に収まる） */
.steps .eval{background:var(--blue-dark);border-color:var(--blue-dark)}
.steps .eval h4,.steps .eval p{color:#fff}
.steps .eval .n{background:#fff;color:var(--blue-dark)}

/* 生徒・先生の2文（説明リスト） */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.pair div{border-left:4px solid var(--blue);padding-left:16px}
.pair dt{font-weight:700;color:var(--blue-dark)}
.pair dd{margin-top:4px}

/* 画面と説明を左右に */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:40px}
.feature h3{font-size:24px;line-height:1.5;color:var(--blue-dark)}
.feature .txt>p{margin-top:16px}
.shots3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shots3 img{border-radius:12px;border:1px solid var(--line);background:#fff}
.games{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.games li{padding:8px 16px;background:var(--blue-pale);border-radius:8px;font-weight:700;line-height:1.5}
.games span{display:block;font-weight:400;font-size:14px;color:var(--sub)}
.frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.frame img{max-height:420px;object-fit:cover;object-position:top}
.note{font-size:14px;color:var(--sub)}
figcaption.note{margin-top:8px}

/* 紹介動画（2026/10/07）。⭐ 真ん中の再生ボタンは main.js が出し、押すと再生してボタンを隠す（あとはブラウザの操作バー） */
.movie{position:relative;max-width:880px;margin:40px auto 0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.movie video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#fff}
.play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:0;padding:0;background:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer}
.play svg{width:40px;height:40px;margin-left:5px;fill:#fff}
@media (hover:hover){.play:hover{background:var(--blue-dark)}}
.play[hidden]{display:none}

/* 運営者 */
.who{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start;margin-top:40px}
.who .nm{font-size:28px;font-weight:700;line-height:1.5;color:var(--blue-dark)}
.who .nm small{display:block;font-size:16px;color:var(--sub);font-weight:400}
.career{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
.career li{padding-left:16px;border-left:4px solid var(--blue-pale)}
.career li span{color:var(--sub);margin-left:8px}
.who .note{margin-top:16px}

/* お問い合わせ（左に案内とメール、右にフォーム） */
.contact{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start;margin-top:40px}
.contact .intro h3{font-size:24px;line-height:1.5}
.contact .intro p{margin-top:16px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:24px;padding:16px 24px;background:#fff;border:1px solid var(--line);border-radius:12px}
.mail code{font-family:inherit;font-size:18px;font-weight:700;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
/* フォーム（DADS の入力欄：ラベル 17px 太字・枠 1px・角 8px・高さ 56px・必須は赤い字） */
form{display:grid;gap:24px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px}
label{display:grid;gap:8px}
.lbl{font-size:17px;font-weight:700;color:#333}
.req{margin-left:8px;font-size:16px;font-weight:400;color:var(--error)}
input,select,textarea{font:inherit;font-size:16px;font-weight:400;letter-spacing:.02em;color:var(--ink);background:#fff;border:1px solid var(--field);border-radius:8px;padding:12px 16px;width:100%}
input,select{min-height:56px}
select{-webkit-appearance:none;appearance:none;padding-right:48px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center/24px}
textarea{resize:vertical;min-height:144px;line-height:1.7}
@media (hover:hover){input:hover,select:hover,textarea:hover{border-color:#000}}
input:user-invalid,textarea:user-invalid{border-color:var(--error)}
::placeholder{color:#767676}
.ok{display:none;font-weight:700;color:var(--blue-dark)}
.ok.show{display:block}
.ok a{overflow-wrap:anywhere}

footer{background:#16202c;color:#e6e6e6;padding-block:40px 48px;font-size:14px}
footer .wrap{display:grid;gap:8px}
footer .brand{color:#fff}
footer a,footer a:visited{color:#fff}

/* ⭐ unDraw の絵（2026/10/12 夜〜。tools/公式ページ/絵を取る.sh・色はページの青）。飾りなので alt は空。
   見出しの横（課題・導入作業）／導入事例の3枚の上／お問い合わせの案内の下 */
.head-il{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.head-il .il{flex:none;width:auto;height:160px}
ol.cases{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cases .il{width:100%;height:176px;object-fit:contain;margin-bottom:24px}
.contact .intro .il{width:100%;max-width:400px;height:auto;margin-top:40px}

@media (max-width:767px){
  .head-il{flex-direction:column;align-items:flex-start;gap:16px}   /* 見出しの横に置くと 360px で見出しが語の途中で折れた（改行を測る.mjs）→ 下に回す */
  .head-il .il{height:120px}
  ol.cases{grid-template-columns:1fr;gap:16px;margin-top:24px}
  .cases .il{height:140px;margin-bottom:16px}
  .contact .intro .il{max-width:280px;margin-top:24px}
  .wrap{padding-inline:16px}
  .hero{padding-block:40px}
  .hero .grid{grid-template-columns:1fr;gap:24px}
  .hero h1{font-size:28px;line-height:1.5}
  .cta{margin-top:24px}
  .cta .btn{width:100%}
  .devices{padding-bottom:0}
  .phone{display:none}
  section{padding-block:40px}
  h2{font-size:24px;letter-spacing:.02em}
  .sub{margin-top:40px;padding-top:24px}
  .sub h3,.feature h3,.contact .intro h3{font-size:20px}
  .card{padding:16px}
  .card h3,.card h4{font-size:18px;line-height:1.6}
  .two,.pair,ol.flow,ul.uses,.feature,.who,.contact{grid-template-columns:1fr}
  .two,ol.flow,ul.uses,.feature,.who,.contact{margin-top:24px;gap:16px}
  ol.steps{grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
  .games{grid-template-columns:1fr}
  .nav .hide-sp{display:none}
  .movie{margin-top:24px}
  form{padding:24px 16px}
  .mail{padding:16px}
}
@media (max-width:420px){ol.steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}