/* ============================================================ Tube for Schools — design system ------------------------------------------------------------ 前身の体系をそのまま引き継ぐ（HANDOVER.md 2.4）。ただし色は変えた。 - 地は #FBFAF8（明るい1色。前身は #000000 だったが、 教室の蛍光灯の下では黒地が読みにくく、iPhoneでも既定が明るい） - 差し色は早稲田アカデミーの青 #005BAC と黄 #F9B900 - 書体はゴシック体。日本語は Hiragino Sans（ヒラギノ角ゴシック）。 前身は明朝（Fraunces + Hiragino Mincho）だったが、 画面で読む前提なので角ゴシックに変えた。明朝は小さい字で線が細り、 スマートフォンの本文では読みにくい。 Fraunces は見出しの欧文にだけ残す（数字と英単語の見た目が締まる）。 - 500 より重いウェイトを使わない - 絵文字・記号アイコンを使わない 色は早稲田アカデミーの公式ロゴから採った2色。 （logo.svg の中身は実際この2色しかない） --accent 青 #005BAC … ロゴの「早稲田アカデミー」の文字色 --accent2 黄 #F9B900 … ロゴのアイコンの色 使い分けの決まり。強調しすぎないこと。 - 青は「いま選ばれている／進んでいる」を指す主アクセント - 黄は「続いている・達成した」だけに使う差し色。多用しない - 正誤は色相で表さない（塗りと打ち消し線で表す。色覚に依存させない） コントラストは実測して決めてある。目分量で触らないこと。 青 #005BAC は黒地では 3.09:1 しかなく本文に使えないので、 暗いテーマだけ同じ色相(208°)のまま明るくした #2E86D6（5.50:1）を使う。 黄 #F9B900 は明るい地では 1.68:1 で、文字には使えない。 塗りとして使い、その上には --accent2-ink を載せる（10.4:1）。 ============================================================ */ :root{ /* ★ 既定は明るいテーマ。 以前は既定が暗く、明るいのは prefers-color-scheme:light のときだけだった。 そのため iPhone をダークモードで使っている人は明るくできず、 しかも講師には設定タブが無いので切り替える場所すら無かった。 いまは既定を明るくし、暗いテーマは自分で選んだときだけにしてある （端末の設定では切り替わらない ―― 迷わせないため）。 */ --bg:#FBFAF8; --surface:#FFFFFF; --surface2:#F0EDE8; --sunk:#F2EFEA; --text:#17150F; --text2:#6B655D; --text3:#98928B; --line:#E2DED7; --accent:#005BAC; --accent-soft:#E7F0FA; --accent-dim:#4A8BC7; /* **黄はこの4つだけ。** 面・地・字・線でそれぞれ役が違う。 前はこれとは別に --warn-* という2本目の黄があり、地の色だけ たまたま同じだった。片方を直すともう片方が置いていかれるので、 1本にまとめてある（--warn-* はこの別名）。 accent2 面。棒の先、点、今日の印 accent2-soft 地。手を入れる所の下敷き accent2-text 字。白地でも読める深さ（#F9B900 は 1.6:1 で消える） accent2-line 線。地と字のあいだ */ --accent2:#F9B900; --accent2-line:#EDBE45; --accent2-text:#8A5A00; --accent2-ink:#17150F; /* **地の黄は、ブランド色そのものを薄めて作る。** 前は #FFEDB8 と手で決めていた。ロゴの黄とは別の色で、 並べると「クリームと黄のあいだ」の煮え切らない色に見えた。 色を2つ持たない ―― 薄い黄は、濃い黄の薄いやつである。 */ --accent2-soft:color-mix(in srgb, var(--accent2) 26%, #FFFFFF); /* **塗りつぶしに使う黄。** 字と同じ #F9B900 を面いっぱいに置くと、同じ色なのに ずっと濃く見える ―― 細い字と広い面では、目に入る量が違う。 「study」の字と同じ強さに**見える**ところまで薄める。 */ --accent2-fill:color-mix(in srgb, var(--accent2) 68%, #FFFFFF); --warn-bg:var(--accent2-soft); --warn-fg:var(--accent2-text); --warn-line:var(--accent2-line); --shadow:0 1px 2px rgba(23,21,15,.05), 0 8px 24px -12px rgba(23,21,15,.16); /* 本文も見出しも同じゴシック。iOSは Hiragino Sans、 WindowsはYu Gothic UI、Androidは Noto Sans JP に落ちる。 */ --display:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic", "Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Hiragino Sans", "Yu Gothic UI","Noto Sans JP",sans-serif; /* ブランド名も本文と同じゴシック。明朝は使わない。 画面でいちばん目立つ文字を明朝にすると、 アプリ全体が「読み物」の顔になり、道具に見えなくなる。 */ --brandface:var(--display); --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; --r:14px; --r-lg:20px; color-scheme:light; } /* ------------------------------------------------------------ 暗いテーマ ―― いまは凍結してある 明暗の2つを保つと、色を1つ足すたびに検査も2倍になる。 コントラストの取り違え（1.07:1）も、暗いほうで起きた。 いまは明るい1つに絞り、暗いほうは定義だけ残す。 使うときは、ヘッダに切り替えを戻すこと（ui-core.js の renderHeader）。 ------------------------------------------------------------ */ :root[data-theme="dark"]{ --bg:#000000; --surface:#131211; --surface2:#232019; --sunk:#1B1917; --text:#F5F2EE; --text2:#98928B; --text3:#5F5A55; --line:#26231F; --accent:#2E86D6; --accent-soft:#0A1B2B; --accent-dim:#1F5C94; --accent2:#F9B900; --accent2-line:#8A6A12; --accent2-text:#F6C13A; --accent2-ink:#17150F; --accent2-soft:color-mix(in srgb, var(--accent2) 16%, #000000); --accent2-fill:color-mix(in srgb, var(--accent2) 74%, #000000); --warn-bg:var(--accent2-soft); --warn-fg:var(--accent2-text); --warn-line:var(--accent2-line); --bad:#8A817A; --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7); color-scheme:dark; } :root[data-theme="light"]{ --bg:#FBFAF8; --surface:#FFFFFF; --surface2:#F0EDE8; --sunk:#F2EFEA; --text:#17150F; --text2:#6B655D; --text3:#98928B; --line:#E2DED7; --accent:#005BAC; --accent-soft:#E7F0FA; --accent-dim:#4A8BC7; /* **黄はこの4つだけ。** 面・地・字・線でそれぞれ役が違う。 前はこれとは別に --warn-* という2本目の黄があり、地の色だけ たまたま同じだった。片方を直すともう片方が置いていかれるので、 1本にまとめてある（--warn-* はこの別名）。 accent2 面。棒の先、点、今日の印 accent2-soft 地。手を入れる所の下敷き accent2-text 字。白地でも読める深さ（#F9B900 は 1.6:1 で消える） accent2-line 線。地と字のあいだ */ --accent2:#F9B900; --accent2-line:#EDBE45; --accent2-text:#8A5A00; --accent2-ink:#17150F; /* **地の黄は、ブランド色そのものを薄めて作る。** 前は #FFEDB8 と手で決めていた。ロゴの黄とは別の色で、 並べると「クリームと黄のあいだ」の煮え切らない色に見えた。 色を2つ持たない ―― 薄い黄は、濃い黄の薄いやつである。 */ --accent2-soft:color-mix(in srgb, var(--accent2) 26%, #FFFFFF); /* **塗りつぶしに使う黄。** 字と同じ #F9B900 を面いっぱいに置くと、同じ色なのに ずっと濃く見える ―― 細い字と広い面では、目に入る量が違う。 「study」の字と同じ強さに**見える**ところまで薄める。 */ --accent2-fill:color-mix(in srgb, var(--accent2) 68%, #FFFFFF); --warn-bg:var(--accent2-soft); --warn-fg:var(--accent2-text); --warn-line:var(--accent2-line); --shadow:0 1px 2px rgba(23,21,15,.05), 0 8px 24px -12px rgba(23,21,15,.16); color-scheme:light; } *{box-sizing:border-box} html,body{background:var(--bg)} body{ margin:0; color:var(--text); font-family:var(--display); font-size:16px; line-height:1.62; overflow-x:hidden; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; } h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.01em; text-wrap:balance} p{margin:0} button{font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent} input,select{font:inherit; color:inherit} :focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px} .num{font-variant-numeric:tabular-nums; font-family:var(--sans)} .lbl{font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text3)} #app{max-width:600px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column} /* ★ width:100% を消さないこと。**Safari と iPhone がこれで壊れる。** #app は縦の flex で、main の横幅は「引き伸ばし（stretch）」で決まる。 ところが main には container-type:inline-size が載っている（.bento）。 Safari では、引き伸ばしと横方向の閉じ込めが重なったとき、 横幅が中身の幅まで縮み、**全ページが縦一本の細い帯になる。** Chrome と Edge では起きないので、そちらだけ見ていると気づけない。 幅を先に決めておけば、どの実装でも同じ幅になる。 */ main{flex:1; width:100%; padding:24px 20px calc(96px + env(safe-area-inset-bottom))} .screen-session main{padding-bottom:calc(170px + env(safe-area-inset-bottom))} /* ------------------------------------------------------------ 共通部品 ------------------------------------------------------------ */ /* 面。**枠線は引かない。** 白い面と地の色の差だけで区切る （デザイン仕様書の大原則。線を引くと画面が枠だらけになる）。 */ .card{background:var(--surface); border:0; border-radius:var(--r-lg); padding:20px; margin-bottom:14px} .row{display:flex; align-items:center; gap:12px} .spread{display:flex; align-items:center; justify-content:space-between; gap:12px} .muted{color:var(--text2)} .tiny{font-size:13px; color:var(--text2)} /* 仮置きの断り書き。本部カリキュラムの仮置きと同じ見え方にそろえる */ .tiny.prov{margin-top:8px; padding:8px 10px; border-radius:8px; background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-line)} /* タップ領域は 44×44 以上。見た目を保ったまま ::after で当たり判定を広げる。 */ .hit{position:relative} .hit::after{content:''; position:absolute; left:50%; top:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%)} .btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; padding:14px 20px; border-radius:var(--r); background:var(--accent); color:#fff; font-family:var(--sans); font-size:16px; letter-spacing:.01em; transition:opacity .15s} .btn:active{opacity:.7} .btn[disabled]{background:var(--surface2); color:var(--text3); cursor:default} .btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text)} /* 小さいボタンでも 44px は割らない。指で押す下限。 */ .btn.small{min-height:44px; padding:8px 16px; width:auto; font-size:14px} .field{display:block; margin-bottom:14px} .field span{display:block; margin-bottom:6px} /* 高さは 52px にそろえる。48px だと、中身が小さい type=date だけが min-height ちょうどで止まり、数値欄（52px）と4px ずれる。実機で見える差。 */ .field input,.field select{ width:100%; min-height:52px; padding:12px 14px; border-radius:var(--r); background:var(--sunk); border:1px solid var(--line); color:var(--text); font-family:var(--sans); font-size:16px} /* iOS Safari は type=date を独自の部品として描く。そのままだと 幅が中身なりになり、中央に浮いて他の入力欄と揃わない（実機で確認）。 -webkit-appearance を外し、内側の余白も打ち消して左揃えに戻す。 */ .field input[type="date"]{ -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; text-align:left; line-height:1.2; } .field input[type="date"]::-webkit-date-and-time-value{ text-align:left; margin:0; } /* カレンダーの絵。暗い地では黒くて見えないので反転させる。 ここに CSS変数（var）を書いても効かない ―― この疑似要素には カスタムプロパティが届かない。実測で filter:none になった。 媒体クエリで直接書く。 */ .field input[type="date"]::-webkit-calendar-picker-indicator{ margin-left:auto; opacity:.6; } /* ------------------------------------------------------------ ヘッダー / タブ ------------------------------------------------------------ */ header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 20px 12px; border-bottom:1px solid var(--line)} /* 名前のほうを先に縮める。銘が縮むと名乗りが弱くなる。 */ .who{min-width:0; flex:0 1 auto} .brand{font-size:19px; letter-spacing:-.02em; font-family:var(--brandface)} .brand em{font-style:normal; color:var(--accent2-text)} .who{font-family:var(--sans); font-size:13px; color:var(--text2); text-align:right; line-height:1.35; white-space:nowrap} /* 狭い画面では「for London」を外して、名前に場所を譲る。 前は名前が1文字ずつ縦に折り返していた（375px）。 */ @media (max-width: 430px){ header .forwhere{display:none} } nav{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; max-width:600px; margin:0 auto; padding-bottom:env(safe-area-inset-bottom); background:var(--bg); /* color-mix を知らない Safari（16.1 以前）でも、下の文字が透けない */ background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(18px); /* Safari 17 以前は、頭に -webkit- が要る */ backdrop-filter:blur(18px); border-top:1px solid var(--line)} nav button{flex:1; min-height:48px; padding:12px 4px 14px; font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3)} nav button[aria-current="page"]{color:var(--accent)} /* ------------------------------------------------------------ 今日 ------------------------------------------------------------ */ .today-n{font-size:64px; line-height:1; letter-spacing:-.04em; font-family:var(--sans); font-weight:300; font-variant-numeric:tabular-nums} .today-sub{margin-top:6px; color:var(--text2); font-family:var(--sans); font-size:14px} /* 路線図。ヘアラインのレールの上を進捗が塗り上がる。 */ .rail{position:relative; margin:22px 0 6px; padding-left:26px} .rail::before{content:''; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--line)} .rail .stop{position:relative; padding:9px 0; font-family:var(--sans); font-size:14px; display:flex; justify-content:space-between; gap:10px} .rail .stop::before{content:''; position:absolute; left:-23px; top:15px; width:10px; height:10px; border-radius:50%; background:var(--bg); border:2px solid var(--line)} .rail .stop.on::before{background:var(--accent); border-color:var(--accent)} .rail .stop b{font-weight:400; color:var(--text2)} .meter{height:6px; border-radius:3px; background:var(--sunk); overflow:hidden; margin:10px 0 4px} .meter i{display:block; height:100%; background:var(--accent); transition:width .4s} /* まだ記録が無いとき。0% の帯と見分けがつくように薄くする */ .meter.none{background:var(--line); opacity:.5} .warn{border-color:var(--accent); background:var(--accent-soft)} .warn .lbl{color:var(--accent)} /* 番号ひとつしか出ない画面なので、放っておくと上に貼りついて 「読み込み途中」に見える。使える高さの真ん中に置く。 */ .hw-card{min-height:56vh; display:flex; flex-direction:column; justify-content:center} .hw-no{display:flex; align-items:baseline; gap:10px; margin-top:22px} .hw-no .lbl{font-size:13px; letter-spacing:.1em} .hw-no .num{font-size:62px; line-height:1; letter-spacing:-.03em; font-weight:300} /* 対象の生徒を選ぶトグル。押せるものは必ず押せる形にする */ .picks{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px} .pick{min-height:44px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-family:var(--sans); font-size:14px; color:var(--text2)} .pick[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff} /* ------------------------------------------------------------ セッション ------------------------------------------------------------ */ .sbar{display:flex; align-items:center; gap:12px; padding:12px 20px; padding-top:calc(12px + env(safe-area-inset-top)); border-bottom:1px solid var(--line)} .sbar .meter{flex:1; margin:0} .sbar .num{font-size:13px; color:var(--text2)} .qcard{padding:8px 0 4px} .qtag{display:flex; align-items:center; gap:8px; margin-bottom:20px; font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text3)} .qtag i{width:6px; height:6px; border-radius:50%; background:var(--accent)} .qtag em{font-style:normal; padding:2px 7px; border-radius:999px; background:var(--sunk); letter-spacing:.06em} /* accommodation / responsibility のような長い語が、発音ボタンの下に 潜り込まないように詰める。折り返しも許す。 */ .headword{font-size:clamp(26px, 8.4vw, 40px); line-height:1.15; letter-spacing:-.02em; overflow-wrap:anywhere} .headword .pos{margin-left:10px; font-family:var(--sans); font-size:12px; color:var(--text3); letter-spacing:.06em; vertical-align:middle; white-space:nowrap} .prompt{font-size:28px; line-height:1.35} .prompt-ja{margin-top:8px; color:var(--text2); font-size:15px} .cloze{font-size:24px; line-height:1.5} .cloze u{display:inline-block; min-width:82px; border-bottom:2px solid var(--accent); text-decoration:none; vertical-align:baseline} .reveal{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)} .def-ja{font-size:20px; margin-bottom:6px} .def-en{color:var(--text2); font-size:15px; line-height:1.55} .ex{margin-top:16px; padding:14px 16px; background:var(--sunk); border-radius:var(--r)} .ex-en{font-size:17px; line-height:1.55} .ex-en b{font-weight:500; color:var(--accent)} .ex-ja{margin-top:6px; color:var(--text2); font-size:14px} .colls{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px} .coll{padding:5px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-family:var(--sans); font-size:13px} .note{margin-top:14px; padding-left:12px; border-left:2px solid var(--accent); color:var(--text2); font-size:14px; line-height:1.6} .note b{font-weight:500; color:var(--text)} .note code{font-family:var(--mono); font-size:13px} .synbox{margin-top:14px; display:grid; gap:6px} .synline{display:flex; gap:10px; align-items:baseline} .synline em{font-style:normal; color:var(--text3); font-family:var(--sans); font-size:13px} .synchips{display:flex; flex-wrap:wrap; gap:6px} .syn{padding:3px 9px; border-radius:999px; border:1px solid var(--line); font-family:var(--sans); font-size:13px; color:var(--text2)} .syn.ant{text-decoration:line-through; text-decoration-color:var(--text3)} .speak{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:13px; flex:none} /* セッションの操作列。nav と同じく固定にする。sticky にすると 包含ブロックの高さ次第で貼り付かず、機種によって位置が変わる。 */ footer.sfoot{position:fixed; left:0; right:0; bottom:0; z-index:20; max-width:600px; margin:0 auto; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--bg) 72%, transparent)} /* 4つ並べて375px幅に収める。ラベルが折り返すとボタンの高さが ばらついて、押し間違いのもとになる。nowrap で固定する。 */ .grades{display:grid; grid-template-columns:repeat(4,1fr); gap:6px} .grade{padding:12px 2px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); font-family:var(--sans); text-align:center; min-height:56px} .grade b{display:block; font-size:13px; font-weight:400; white-space:nowrap} .grade span{display:block; margin-top:3px; font-size:11px; color:var(--text3)} .grade.g1{border-color:var(--accent-dim)} .known{display:block; width:100%; margin-top:10px; padding:10px; font-family:var(--sans); font-size:13px; color:var(--text2)} /* 選択肢。正誤は色相ではなく、塗りと打ち消し線で表す。 */ .opts{display:grid; gap:10px; margin-top:24px} .opt{padding:15px 18px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); text-align:left; font-size:17px; min-height:52px} .opt.right{background:var(--accent); border-color:var(--accent); color:#fff} .opt.wrong{text-decoration:line-through; text-decoration-thickness:1.5px; color:var(--text3); border-style:dashed} .opt[disabled]{cursor:default} .rulebox{margin-top:18px; font-size:15px; line-height:1.7; color:var(--text2)} .rulebox b{font-weight:500; color:var(--text)} .rulebox code{font-family:var(--mono); font-size:13px; color:var(--accent)} .forms{margin-top:16px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden} .forms > div{background:var(--surface); padding:12px 14px} .forms .fl{font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3)} .forms .fe{font-size:16px; margin-top:3px} .forms .fj{font-size:13px; color:var(--text2); margin-top:2px} /* ------------------------------------------------------------ 講師 ------------------------------------------------------------ */ table.roster{width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14px} table.roster th{text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); font-weight:400} table.roster td{padding:11px 6px; border-bottom:1px solid var(--line); vertical-align:middle} table.roster tr:last-child td{border-bottom:none} table.roster .nm{font-family:var(--display); font-size:16px} .dots{display:flex; gap:3px} .dots i{width:7px; height:7px; border-radius:2px; background:var(--sunk)} .dots i.on{background:var(--accent)} .bar{height:5px; border-radius:3px; background:var(--sunk); overflow:hidden; min-width:56px} .bar i{display:block; height:100%; background:var(--accent)} .stuck{display:grid; gap:8px; margin-top:12px} .stuck > div{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--sunk); border-radius:10px; font-family:var(--sans); font-size:14px} .stuck b{font-family:var(--display); font-weight:400; font-size:16px} /* ------------------------------------------------------------ その他 ------------------------------------------------------------ */ #toast{position:fixed; left:50%; bottom:96px; transform:translate(-50%,14px); padding:11px 18px; border-radius:999px; background:var(--surface2); border:1px solid var(--line); font-family:var(--sans); font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50} #toast.on{opacity:1; transform:translate(-50%,0)} .fade{animation:fade .45s ease-out} @keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .fade{animation:none} .meter i,.btn{transition:none} } .empty{padding:40px 10px; text-align:center; color:var(--text3)} .cal{display:grid; grid-template-columns:repeat(14,1fr); gap:4px; margin-top:12px} .cal i{aspect-ratio:1; border-radius:3px; background:var(--sunk)} .cal i.on{background:var(--accent)} .cal i.half{background:var(--accent-dim)} /* ------------------------------------------------------------ 教科・進度・カレンダー（複数科目に対応したときに足したもの） ------------------------------------------------------------ */ .chip{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; background:var(--accent-soft); color:var(--accent); font-family:var(--sans); font-size:12px; letter-spacing:0; vertical-align:middle} .card.off{opacity:.55} /* ------------------------------------------------------------ ログインの失敗表示 以前は 13px のグレーで、気づかれずに「押しても何も起きない」と 受け取られた。読まれない警告は無いのと同じなので、目立たせる。 ------------------------------------------------------------ */ .loginmsg{margin-top:12px; min-height:0; font-size:15px; line-height:1.5; color:var(--accent); opacity:0} .loginmsg.on{opacity:1; padding:12px 14px; border-radius:var(--r); background:var(--accent-soft); border:1px solid var(--accent)} .tag{font-family:var(--sans); font-size:11px; letter-spacing:.1em; padding:3px 8px; border-radius:999px; white-space:nowrap} /* 「かならず」は青（＝いま向かう先）、「やるとつよくなる」は黄（＝積み上げ） */ .tag.must{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-dim)} .tag.opt {background:var(--accent2-soft); color:var(--text2); border:1px solid var(--line)} /* 紙でやる宿題。押せる要素を置かない ―― 押せないものを押せそうに 見せない、というより、そもそも生徒に操作させない。 */ .card.hw.paper{border-style:dashed} .card.hw.paper .lbl{color:var(--text2)} /* 続いている日数。黄はここだけで使う。 */ .streak .num{color:var(--accent2)} .dots.wk{display:flex; gap:5px; align-items:center} .dots.wk i{width:9px; height:9px; border-radius:50%; background:var(--sunk); border:1px solid var(--line)} .dots.wk i.on{background:var(--accent2); border-color:var(--accent2)} /* ------------------------------------------------------------ 紙の宿題の4段階評価（講師） ノートを見ながら30人ぶんを続けて押す道具。1人1行、印は4つ。 確認も保存ボタンも置かない。 **未評価に印を出さない** ―― 出すと、つける講師ほど自分のクラスが 欠けて見える。無いものは、ただ静かに無いままにする。 ------------------------------------------------------------ */ .ratelist{margin-top:10px; border-top:1px solid var(--line)} .raterow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line)} .raterow .who{font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis} .marks{display:flex; gap:6px; flex:none} /* 44px は指で押す下限。30人ぶん連打するので、ここを削らない。 */ .mk{width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--sunk); color:var(--text2); font-family:var(--sans); font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .12s} .mk:active{opacity:.6} .mk.on{background:var(--accent); border-color:var(--accent); color:#fff} /* 「もうすこし」「出ていない」だけ、選んだときに黄で目立たせる。 赤は使わない ―― 生徒の画面と地続きの色体系にしておく。 */ .mk[data-v="1"].on,.mk[data-v="0"].on{ background:var(--accent2); border-color:var(--accent2); color:var(--accent2-ink)} /* ------------------------------------------------------------ ヘッダのログアウト 講師の「管理」タブの中だけに置いていたら、タブを5つに組み直したとき 一緒に消えて、**入ったら二度と出られない**状態になっていた。 出口はいちばん目立つ場所に常設する。共用のパソコンで開いたときに、 次の人が前の人のまま使ってしまうのがいちばん困る。 ------------------------------------------------------------ */ .signout{ flex:none; margin-left:4px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--text2); font-family:var(--sans); font-size:12px; letter-spacing:.06em; min-height:36px; /* ::after で44pxまで当たり判定を広げる（.hit） */ } .signout:active{opacity:.6} header{gap:10px} .who{flex:1} /* 暗いテーマでは、日付入力のカレンダーの絵が黒くて見えない。反転させる。 var() が疑似要素に届かないので、テーマごとに直接書く。 */ .field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1) } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .field input[type="date"]::-webkit-calendar-picker-indicator{ filter:none } } :root[data-theme="light"] .field input[type="date"]::-webkit-calendar-picker-indicator{ filter:none } .hwlist{border-top:1px solid var(--line)} /* 何も出ていない日。空を「壊れている」と読ませない。 */ .hw-none{padding:28px 4px; color:var(--text2); font-size:14px; line-height:1.7} /* 保存の警告。1行に収める ―― いちばん見たい宿題を押し出さないため。 */ .warnbar{display:block; width:100%; text-align:left; margin:0 0 16px; padding:10px 12px; border-radius:10px; background:var(--warn-bg); border:1px solid var(--warn-line); font-family:var(--sans); font-size:12.5px; color:var(--warn-fg); min-height:44px} table.wgrid{border-collapse:separate; border-spacing:5px; min-width:100%} table.wgrid th{font-family:var(--sans); font-size:10.5px; letter-spacing:.06em; color:var(--text3); font-weight:500; padding:0 0 2px; text-align:center; white-space:nowrap} table.wgrid th.g{text-align:left; padding-right:6px} table.wgrid td{padding:0} table.wgrid td.g{font-size:16px; font-weight:600; white-space:nowrap; padding-right:6px; vertical-align:middle} .gridbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px} .gridbar .wk{font-family:var(--sans); font-size:13px; color:var(--text2)} /* 授業計画の1回ぶん */ .lrow{display:flex; gap:12px; align-items:flex-start; padding:11px 2px; border-bottom:1px solid var(--line)} .lrow .no{flex:none; width:46px; font-family:var(--sans); font-size:12px; color:var(--text2)} .lrow .no b{display:block; font-size:15px; color:var(--text); font-weight:600} .lrow .mid{flex:1; min-width:0} .lrow .topic{font-size:15px} .lrow .hwtxt{font-family:var(--sans); font-size:12.5px; color:var(--text2); margin-top:3px} .lrow .st{flex:none; font-family:var(--sans); font-size:11px; align-self:center} .lrow.done .st{color:var(--accent)} .lrow.next{background:var(--accent-soft); border-radius:8px; padding-left:8px} /* ------------------------------------------------------------ 右上のメニュー ふだん使わないものを集める場所。下のタブは毎日ひらくものだけに しておきたい ―― タブが5つも6つもあると主役が分からなくなる。 ------------------------------------------------------------ */ .menu-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 18px} .menu-head h1{font-size:24px} .menuitem{display:block; width:100%; text-align:left; padding:15px 16px; margin-bottom:10px; border-radius:12px; border:1px solid var(--line); background:var(--surface)} .menuitem .t{font-size:16px} .menuitem .d{font-family:var(--sans); font-size:12.5px; color:var(--text2); margin-top:3px} .menuitem:active{opacity:.7} .menuitem.out{border-color:var(--warn-line); background:var(--warn-bg)} .menuitem.out .t{color:var(--warn-fg)} .menuitem.out .d{color:var(--warn-fg); opacity:.8} /* ============================================================ 生徒の宿題 ―― 教科ごとにまとめる 前は17件が縦一列に並んでいた。それは「データを見せた」だけで、 宿題を管理する道具ではない。生徒が知りたいのは順に3つ。 1. いま何をやればいいか（1つだけ） 2. 教科ごとに、どれだけ残っているか 3. その教科の中身（押して見る） だから 1 を上に大きく、2 を教科ごとのゲージ、3 は掘り下げにする。 ============================================================ */ .next{border:0; border-radius:22px; padding:16px 18px; background:var(--surface); margin:0 0 22px} .next .lbl{color:var(--accent)} .next .subj{font-size:13px; font-family:var(--sans); color:var(--accent); margin-top:10px} .next .what{font-size:20px; line-height:1.4; margin-top:2px} .next .why{font-family:var(--sans); font-size:12.5px; color:var(--text2); margin-top:7px} .next .btn{margin-top:14px} .next.paper{border-style:dashed} .sublist{border-top:1px solid var(--line)} .subrow{display:flex; align-items:center; gap:14px; width:100%; padding:14px 2px; border-bottom:1px solid var(--line); text-align:left} .subrow .nm{flex:none; width:52px; font-size:18px; font-weight:600} .subrow .mid{flex:1; min-width:0} .subrow .g{height:7px; border-radius:4px; background:var(--sunk); overflow:hidden} .subrow .g i{display:block; height:100%; background:var(--accent); transition:width .3s} .subrow .g.late i{background:var(--warn-line)} .subrow .st{font-family:var(--sans); font-size:12px; color:var(--text2); margin-top:5px; display:flex; gap:9px} .subrow .st .late{color:var(--warn-fg)} .subrow .st .pap{color:var(--text3)} /* アプリで解く宿題が無い教科。空の目盛りだけ薄く出す ―― バーを消すと行の高さが揃わず、並びが読みにくくなる */ .subrow .g.none{background:var(--line); opacity:.5} .subrow .ar{flex:none; color:var(--text3); font-size:15px} .subrow.clear .nm{color:var(--text2)} /* 毎日テストの励まし */ .push{border-radius:16px; padding:18px; margin:0 0 20px; background:var(--accent-soft); border:1px solid var(--accent-dim)} .push .big{font-size:22px; line-height:1.4} .push .sub{font-family:var(--sans); font-size:13px; color:var(--text2); margin-top:8px} .push .streak{display:flex; align-items:baseline; gap:8px; margin-top:12px} .push .streak b{font-size:34px; font-family:var(--sans); color:var(--accent2); line-height:1} /* ============================================================ 広い画面（パソコン） これまでは幅を 600px で止めていた。iPhone と iPad はそれでよいが、 1440px の画面で開くと**左右に 420px ずつ余白ができる**。 教室のパソコンで講師が開くのはこちらなので、作り直す。 考え方は3つだけ。 1. 下のタブを左の柱に移す。横に長い画面で、下端まで目を 往復させない。縦も 60px ぶん広くなる。 2. 本体を2〜3列の格子にして、**縦スクロールを無くす**。 「今週の格子」「出してある宿題」「きにかけたい生徒」は 同時に見えて初めて意味がある。順に出てくると、 上を見ている間に下を忘れる。 3. 見出し・格子・いちばん大事な1枚は列をまたいで全幅にする。 全部を同じ大きさに並べると、どれが主役か分からなくなる。 幅の区切り 〜1023px … これまでどおり（iPhone / iPad 縦） 1024px〜 … 左の柱 ＋ 2列 1440px〜 … 左の柱 ＋ 3列 ============================================================ */ /* 広い画面では、押せるものに触れたことが分かるようにする。 指で触る画面には要らないが、マウスでは手がかりが要る。 */ @media (hover:hover) and (min-width:1024px){ .card{transition:border-color .15s} } .ring{width:100%; height:100%; transform:rotate(-90deg)} .ring circle{fill:none; stroke-width:9; stroke-linecap:round} .ring .track{stroke:var(--sunk)} .ring .fill{stroke:var(--accent); transition:stroke-dashoffset .6s ease} .gauge{background:var(--surface); border:0; border-radius:22px; padding:18px 12px 16px; text-align:center} .gauge .gname{font-size:14px; margin-top:2px} .gauge .tiny{font-size:11px; margin-top:2px} /* 黄の輪。「続けた」「覚えた」は積み上げの色にする */ .gauge.warm .ring .fill{stroke:var(--accent2)} /* まだ60%に届かないもの。数字ひとつだけを大きく置く */ .gauge.goal{display:flex; flex-direction:column; align-items:center; justify-content:center} /* 「いまやるなら これ」がない日の札。青を薄くして、 急かしている印象を作らない */ .next.quiet{background:var(--surface2); border-color:var(--line)} .next.quiet .subj{color:var(--text2)} /* ============================================================ 手ざわり 白い箱を線で区切っただけの画面は、正しく作っても冷たい。 「無機質」と言われたのはここである。ただし飾りは足さない ―― 意味のない色や影は、慣れると邪魔になるだけで、 コントラストの検査も倍になる。 足すのは3つだけ。 1. 主役の札に、ごく薄い地の変化（平面をやめる） 2. 数字の書体を大きく、細く（数字が主役の画面なので） 3. 押せるものに、触れたときの反応 色は増やさない。青と黄の2色のまま。 ============================================================ */ /* 主役の札。**塗りも枠も持たせない。** 薄い青の箱は、白い行の並びの中で1つだけ浮いて見えた。 色は左の柱で入れる（下の .next::before）。 */ .next{background:var(--surface); border:0} .push{background:linear-gradient(170deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent2-soft) 60%, var(--surface)) 100%)} /* 札のふち。1pxの線だけだと紙に見えないので、ごく浅い影を添える */ .card, .gauge, .next, .push {box-shadow:0 1px 2px rgba(23,21,15,.04)} /* 押せるものは、触れたときに沈む。押した手ごたえがあると、 反応が遅い回線でも「効いた」と分かる */ .btn:active, .pick:active, .subrow:active {transform:translateY(1px)} .btn, .pick, .subrow {transition:transform .08s, border-color .15s, background .15s} /* 教科の色分けはしない。5教科に5色を当てると、画面が信号機になる。 かわりに、教科名の左に細い柱を1本だけ立てて区切りにする。 */ .subrow .nm{position:relative; padding-left:12px} .subrow .nm::before{content:''; position:absolute; left:0; top:50%; width:3px; height:18px; margin-top:-9px; border-radius:2px; background:var(--line)} .subrow.clear .nm::before{background:var(--accent2)} /* ============================================================ デモの入口 アカウント名を並べても、初めての人には j2a01 と teacher4 の 違いが分からない。選ぶのは「生徒の画面」か「講師の画面」か。 ============================================================ */ .demo-picks{display:grid; gap:10px} .demo-pick{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:center; width:100%; text-align:left; padding:16px 18px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); transition:border-color .15s, transform .08s} /* 札の字は2文字まで入る（「中2」「小5」「師」）。幅は字なりに伸ばす */ .demo-pick .chip{grid-row:1 / span 2; min-width:40px; width:auto; height:40px; padding:0 8px; white-space:nowrap; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:14px} .demo-pick .t{font-size:17px} .demo-pick .d{font-size:12px; color:var(--text3); font-family:var(--sans)} .demo-pick:active{transform:translateY(1px)} /* 広い画面では横に2つ並べる */ @media (min-width:1024px){ .demo-picks{grid-template-columns:repeat(2, 1fr)} } /* ============================================================ 見た目の作り直し ―― 枠線をやめる これまでは、すべての札に 1px の枠線を引いていた。 画面が「表」に見え、線の数だけ視線が止まる。指摘のとおりである。 Apple の製品ページが線をほとんど使わないのは、装飾を削ったから ではなく、**区切りを別の方法で作っている**からである。 1. 余白 … 離れているものは別のもの、と目が判断する 2. 地の差 … ごくわずかな明度差で面を分ける 3. 文字の大小 … 見出しと本文の差そのものが階層になる ここでも同じにする。線は「表の罫線」と「入力欄」にだけ残す。 色は増やさない。青と黄の2色のまま。 ------------------------------------------------------------ */ /* --- 面 --- */ .card, .gauge, .demo-pick { border:0; box-shadow:none; background:var(--surface); } /* 地の上に置く面は、ごくわずかに白い。線を引かずに面が分かれる */ :root{ --bg:#F5F4F1; --surface:#FFFFFF; --sunk:#EFEDE8; } .card{border-radius:18px; padding:22px 24px} .gauge{border-radius:18px} .demo-pick{border-radius:16px; box-shadow:none} /* --- 文字 --- */ /* 見出しは大きく、字間を締める。本文は行間を広く取る。 大小の差そのものが階層になるので、線が要らなくなる。 */ h1{font-size:34px; letter-spacing:-.03em; line-height:1.15} h2{letter-spacing:-.02em} .lbl{font-size:11px; letter-spacing:.08em; text-transform:none; color:var(--text3); font-weight:400} body{line-height:1.7} .tiny{line-height:1.65} /* 数字は細く大きく。この画面の主役は数字である */ .num, .today-n { font-feature-settings:"tnum" 1; letter-spacing:-.03em} /* --- 一覧の行 --- */ /* 行と行のあいだの線をやめ、余白で分ける */ .subrow{border-bottom:0; padding:14px 10px; border-radius:12px} .subrow .nm::before{display:none} .subrow .nm{padding-left:0} /* 表の罫線は残す。数字を横に読む道しるべになるので、ここは線が要る。 ただし薄く。 */ table.roster th{border-bottom:1px solid var(--line); font-weight:400} table.roster td{border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent)} table.roster tr:last-child td{border-bottom:0} /* --- 押せるもの --- */ .btn{border-radius:14px; font-size:15px; letter-spacing:.01em} .btn.ghost{border:0; background:var(--sunk); color:var(--text)} .pick{border-radius:999px; border:1px solid transparent; background:var(--sunk); color:var(--text)} .pick[aria-pressed="true"]{background:var(--accent); color:#fff} .field input, .field select{border:0; background:var(--sunk); border-radius:12px} /* --- 主役の札 --- */ /* 塗りで主役を示す。枠ではなく面で。 */ .next{border:0; border-radius:20px; background:linear-gradient(165deg, #E8F1FB 0%, #F3F7FC 100%)} .next.quiet{background:var(--sunk)} .push{border:0; border-radius:20px; background:linear-gradient(165deg, #E8F1FB 0%, #FEF7E4 100%)} /* --- 目盛り --- */ .g, .meter, .bar{border-radius:99px} .subrow .g{height:5px} /* 銘 ―― TUBE は青、study は黄。早稲アカの2色をここで名乗る。 ヘッダの高さいっぱいまで大きく取る。この画面でいちばん大きい 文字はここであるべきで、隣の担当者名より小さいと主役が入れ替わる。 幅にあわせて伸び縮みさせる（clamp）ので、iPhone でも切れない。 **study の黄だけは明るい #F9B900 のまま**にしてある。 銘は大きく太いので読める。ここを深い黄に落とすと、渡された ロゴとは別の色になり、名乗りとして機能しない。 */ .brand{display:flex; align-items:baseline; gap:.34em; min-width:0; font-family:var(--sans); font-weight:800; color:var(--accent); font-size:clamp(28px, 7.6vw, 42px); letter-spacing:-.035em; line-height:1.02} .brand em{font-style:normal; font-weight:500; letter-spacing:-.025em; color:var(--accent2)} /* 校舎。銘の足元に小さく添える。銘と同じ行に置いて、高さを増やさない。 */ .forwhere{flex:none; font-size:max(11px, .33em); font-weight:500; letter-spacing:0; color:var(--text3); white-space:nowrap} /* ============================================================ 今週の時間割 先生の手帳と同じ形にする。月から土までを縦の短冊にして、 その日のコマを上から順に置く。 多い人で14コマ。**探す手がかりはクラス名ひとつ**にして、 それをいちばん大きく置く。教科と状態は添えるだけ。 線は引かない ―― 6本の縦線が入ると、それだけで表に見える。 ============================================================ */ /* **列の数は、画面の幅ではなく入れ物の幅で決める。** 前は「1024px より狭ければ積む」と画面の幅で切っていた。だが 時間割の左には navi が 200px 居る。PCの窓を少し縮めただけで 横並びの形に化け、月から土までが1本の帯に潰れて見えた。 基準にするのは **時間割が実際に使える幅** だけにする。 既定は積む形（狭い側）。6列あることが確かめられたときだけ広げる ―― 逆にすると、狭いところで存在しない列を指して壊れる。 */ .week{display:grid; grid-template-columns:1fr; gap:4px; margin:14px 0 6px} .week .daycol{flex-direction:row; align-items:stretch; gap:8px; overflow-x:auto; padding-bottom:2px} .week .daycol.today{margin:0; padding:8px} .week .dayhead{flex-direction:column; justify-content:center; align-items:center; padding:5px 8px; min-width:34px; flex:none} .week .slot{width:auto; min-width:150px; max-width:min(60vw, 280px); flex:none} .week .dayempty{padding:12px 0} /* 中くらいの幅 ―― 月火水／木金土 の2段にする。 6列に押し込むと1コマ90pxになり、「第7回 比例（4年）」が読めない。 かといって曜日ごとの帯に潰すと、週の形が消えて横長の表に見える （PCの窓を縮めたときに実際そう見えた）。 3列 × 2段なら、短冊のまま1コマ180px前後を保てる。 3列 × 150 + すきま2本 × 10 = 470px。 */ @container bento (min-width:470px){ .week{grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 12px} .week .daycol{flex-direction:column; overflow-x:visible; padding-bottom:0} .week .daycol.today{margin:0; padding:8px 6px} /* 曜日の札。**上下の余白をそろえる。** 0/4px の非対称だと、今日の札（地の色が付く）だけ文字が上に寄り、 札そのものが下へはみ出して見える。中央にそろえる。 */ .week .dayhead{flex-direction:row; align-items:center; justify-content:center; gap:6px; padding:5px 8px; min-width:0} .week .slot{width:100%; min-width:0; max-width:none} .week .dayempty{padding:12px 4px} } /* 1コマ 110px を割らない幅があるときだけ、月〜土を1段の短冊にする。 6列 × 110 + すきま5本 × 10 = 710px。 */ @container bento (min-width:710px){ .week{grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px} .week .daycol{flex-direction:column; overflow-x:visible; padding-bottom:0} .week .daycol.today{margin:-8px -6px; padding:8px 6px} .week .dayhead{flex-direction:row; align-items:baseline; gap:6px; padding:0 2px 4px; min-width:0} .week .slot{width:100%; min-width:0; max-width:none} .week .dayempty{padding:12px 4px} } .daycol{display:flex; flex-direction:column; gap:8px; min-width:0} .dayhead{display:flex; align-items:baseline; gap:6px; padding:0 2px 4px} .dayhead .d{font-size:14px; color:var(--text2)} .dayhead .n{font-family:var(--sans); font-size:11px; color:var(--text3)} /* きょうの列だけ、地をわずかに変える。線でも色でもなく面で示す */ .daycol.today{background:var(--sunk); border-radius:14px; padding:8px 6px; margin:-8px -6px} .daycol.today .dayhead .d{color:var(--accent)} .slot{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:12px 12px 11px; border-radius:14px; background:var(--surface); border:0; transition:transform .08s, background .15s} /* クラス名は折り返させない。「中1R」が「中／1／R」に割れると、 探す手がかりとして機能しなくなる。 */ .slot .cls{font-size:17px; letter-spacing:-.01em; line-height:1.25; white-space:nowrap} .slot .sub, .slot .st, .slot .need{white-space:nowrap} .slot .sub{font-size:12px; color:var(--text2); font-family:var(--sans)} /* コースのコマは開始時刻を持つ。60分と90分のコマが混ざるので、 何コマ目かではなく時刻で並べて見せる。 */ .slot .tm{font-size:12px; color:var(--text2); font-family:var(--sans); white-space:nowrap; font-variant-numeric:tabular-nums} .slot .st{font-size:11px; color:var(--text3); font-family:var(--sans); margin-top:3px} .slot .st b{font-weight:400; color:var(--text2)} /* 出してある回は青、まだの回は無彩色。塗りではなく文字の色で示す */ .slot.s-out .st b{color:var(--accent)} .slot.s-missing .st{color:var(--warn-fg)} .slot .need{margin-top:5px; font-size:11px; font-family:var(--sans); color:var(--warn-fg)} .slot:active{transform:translateY(1px)} .dayempty{font-size:11px; color:var(--text3); padding:12px 4px; font-family:var(--sans)} .loose{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px} /* ============================================================ レイアウトの土台 ―― 幅から自動で決める これまでは画面ごとに「この札は2列目から3列目まで」と手で書いていた。 その結果、幅を変えると壊れた。2列しかない幅で3列目を指したり、 高さの計算がずれて札が重なったりした ―― 実際に2度直している。 **手で列を指すのをやめる。** 決めるのは2つだけにする。 1. 札1枚の心地よい幅（--tile） 2. その札が「1枚ぶん」か「広め」か「全幅」か 列の数は、入れ物の幅を --tile で割った数として**自動的に決まる**。 幅が変われば列の数が変わるだけで、指定を書き換える必要がない。 広めの札は、既定では全幅にしてある。**これが安全側**である。 列が2本以上あることが確かめられたときだけ、2本ぶんに縮める。 逆にすると、狭い幅で存在しない列を指して壊れる。 判定に @container を使うのは、**入れ物の幅**で決めたいからである。 画面の幅で決めると、左に柱がある画面と無い画面で境目がずれる。 ============================================================ */ .bento{ --tile: 300px; /* 札1枚の心地よい幅 */ --gap: 18px; container-type: inline-size; container-name: bento; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile)), 1fr)); gap: var(--gap); align-content: start; } .bento > *{ min-width: 0; align-self: start } /* 札の大きさは、この3つだけ。数字で列を指さない。 */ .t-full{ grid-column: 1 / -1 } .t-wide{ grid-column: 1 / -1 } /* 既定は全幅。狭いときはこれが正しい */ .t-one { grid-column: auto } /* 1枚ぶん。どんな列数でも安全 */ /* 列が2本ぶん確実に取れるときだけ、広めの札を2本にする。 660px = 300*2 + 18 + 余白。ここを下回るなら全幅のままが読みやすい。 */ @container bento (min-width: 660px){ .t-wide{ grid-column: span 2 } } /* 3本ぶん取れるとき、いちばん大きい札は3本使ってよい */ @container bento (min-width: 980px){ .t-hero{ grid-column: span 3 } } /* 中身も入れ物の幅で決める。画面の幅では決めない ―― 同じ札でも、置かれた場所によって使える幅が違う。 */ .tile{ container-type: inline-size } /* 本体。柱のぶんを引いた残りが、そのまま入れ物の幅になる */ main{ padding: 24px 20px 40px } @media (min-width:1024px){ main{ padding: 28px 28px 44px } } /* ============================================================ 広い画面の骨格 ここで決めるのは「柱を出すか」と「本体の幅」だけ。 札の並べ方には一切触れない ―― それは .bento の仕事である。 分担を混ぜると、また画面ごとの例外が増える。 ============================================================ */ @media (min-width:1024px){ /* 縦タブの幅。**200px は取りすぎだった。** 入っているのは3語（宿題・成績・進度）だけで、画面のいちばん 広い所を6文字ぶんに使っていた。字が収まる幅まで詰める。 */ body:not(.screen-session):not(.screen-login):not(.screen-gate) #app{ max-width:none; margin:0; padding-left:148px} #app{min-height:100dvh} nav{top:0; right:auto; bottom:0; left:0; width:148px; max-width:none; margin:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; padding:88px 10px 20px; border-top:0; border-right:0; background:var(--surface2); backdrop-filter:none} /* 角の丸みは、ほかの四角い印と同じ比（一辺の 22.37%）。 44px の札なら 10px。ここだけ別の丸みだと、目が引っかかる。 */ nav button{flex:none; min-height:44px; padding:12px 12px; text-align:left; font-size:13px; letter-spacing:.02em; text-transform:none; border-radius:10px} nav button[aria-current="page"]{background:var(--surface); color:var(--accent)} header{padding-left:28px; padding-right:28px} #chrome{position:relative; z-index:21} /* 出題中は柱を隠し、1本の柱に戻す。1問ずつ見るものなので、 横に広げても読みにくくなるだけである。 */ .screen-session #app{padding-left:0; max-width:none; margin:0} .screen-session nav{display:none} /* **幅をはっきり書く。** #app は縦のflexなので、`margin:0 auto` を 付けた時点で伸びるのをやめ、中身なりの幅（170px）に縮む。 問題文が1文字ずつ折り返して、縦書きのように見えていた。 */ .screen-session main{display:block; width:100%; max-width:620px; margin:0 auto; padding-bottom:200px} .screen-session footer.sfoot{left:0; right:0; max-width:none; padding-left:calc(50vw - 310px); padding-right:calc(50vw - 310px)} /* 入口も1本。ここに並べるのは「IDと合言葉」だけである。 */ .screen-login #app, .screen-gate #app{padding-left:0} .screen-login nav, .screen-gate nav{display:none} .screen-login main, .screen-gate main{ display:block; max-width:560px; margin:0 auto; padding-top:48px} } /* ============================================================ 前回の宿題の提出状況 ―― 横棒 割合の数字は出さない。「8/13」だけを書く。 講師にとっては**声をかける相手が5人いる**という数のほうが直接で、 61% は読み替えの手間が要る。長さのほうが割合を受け持つ。 棒は左から右へ、濃い青から明るい青へ。単色より、 どこまで伸びているかが目に入りやすい。 束（学年）は見出しの文字だけで分ける。線を引くと表になる。 ============================================================ */ /* 学年ごとの束を、同じ幅の柱に流し込む。 ガタガタに見えていたのは、束ごとに行数が違ううえ、 名前の欄が中身の長さで伸び縮みしていたため。棒の左端が 柱ごとにずれ、目が横に走れなかった。 欄の幅を全部の行で共通にして、左端と右端をそろえる。 */ /* 学年の束。列は最大3本まで。 auto-fill に任せると、2000px の画面で5本になり、束が6つのとき 「5つ＋1つ」の行ができる。**右に1590pxの空白が残った。** 3本までにすれば1本が530px前後になり、棒も名前も読みやすい。 それでも余る1つ2つは、下の規則で残りいっぱいに伸ばす。 */ .bars{display:grid; gap:22px 44px; grid-template-columns:1fr; align-items:start; margin:4px 0 8px} @container bento (min-width:620px) and (max-width:1019px){ .bars{grid-template-columns:repeat(2, 1fr)} .bars > :last-child:nth-child(odd){grid-column:span 2} } @container bento (min-width:1020px){ .bars{grid-template-columns:repeat(3, 1fr)} .bars > :last-child:nth-child(3n+1){grid-column:span 3} .bars > :last-child:nth-child(3n+2){grid-column:span 2} } /* 節の見出し。箱の外に置く ―― 中に入れると、見出しまで ひとつの部品に見えて、節の切れ目が分からなくなる。 */ .secthead{margin:34px 0 14px} .secthead h2{font-size:26px; letter-spacing:-.025em; line-height:1.2} .secthead .sub{font-size:14px; color:var(--text2); margin-top:4px} /* 時間割のコマ。書くのは「何回目に、何をやるか」だけ。 */ .slot .no{font-size:11px; font-family:var(--sans); color:var(--accent); margin-top:4px} .slot .topic{font-size:12px; color:var(--text2); line-height:1.35; margin-top:1px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .slot.s-missing .no{color:var(--warn-fg)} /* ============================================================ 仕上げ ―― 余白と文字 「殺風景」と言われたのは、線を外したのに**余白と文字の差を 作らなかった**ためである。線を消しただけでは、ただ平らになる。 Apple の頁がそう見えるのは、 1. 節と節のあいだに、はっきりした空きがある 2. 見出しが本文よりずっと大きく、字間が締まっている 3. 面が「白」ではなく、地よりわずかに明るい灰である 4. 目盛りや図に階調がある（単色で塗らない） の4つによる。ここでも同じにする。色は増やさない。 ============================================================ */ /* 地と面。純白を使わない ―― 白い箱が灰色の地に浮くと安っぽい */ :root{ --bg:#F5F5F7; /* 地。わずかに青みのある灰 */ --surface:#FFFFFF; --surface2:#EFEFF2; --sunk:#E8E8ED; --line:#E3E3E8; --text:#1D1D1F; /* 黒よりわずかに明るい。長文で目が疲れない */ --text2:#6E6E73; --text3:#A1A1A6; } /* 節のあいだ。ここが「呼吸」になる */ main > .secthead:first-child{margin-top:6px} /* 見出し。大きく、締める */ h1{font-size:32px; letter-spacing:-.03em; line-height:1.12} h2{font-size:22px; letter-spacing:-.025em; line-height:1.2} .gridbar h2{font-size:26px} /* 面。角を大きめに取り、影は使わない */ .card{border-radius:20px; padding:24px 26px; background:var(--surface)} .gauge, .demo-pick {border-radius:18px} .slot{border-radius:16px; padding:14px 14px 13px} /* 主役の面。単色ではなく、ごく浅い階調にする */ .next{background:linear-gradient(160deg, #EAF2FC 0%, #F4F8FD 100%)} .push{background:linear-gradient(160deg, #EAF2FC 0%, #FDF6E6 100%)} /* 目盛りにも階調を。棒と同じ考え方でそろえる */ .meter i, .g i, .subrow .g i{ background:linear-gradient(90deg, #0A4F8F 0%, #2E86D6 100%)} .ring .fill{stroke:#2E86D6} /* 数字。細く、大きく、字間を締める。この画面の主役は数字である */ .num, .today-n { font-weight:300; letter-spacing:-.03em} /* 時間割。今日の列は面で示す（線でも色でもなく） */ .daycol.today{background:var(--surface2)} .dayhead .d{font-size:15px; letter-spacing:-.01em} /* ============================================================ 紙（棒を押すと出る、その枠の宿題一覧） ============================================================ 下の一覧まで飛ばすのをやめた。飛んだ先が棒と食い違って見え、 「押した先の中身がまるで違う」と言われたため。 押したものの中身を、その場に出す。 */ .shade{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.28); -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); animation:shade-in .5s ease both} @keyframes shade-in{from{opacity:0}to{opacity:1}} .sheet{position:fixed; z-index:81; background:var(--surface); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.22); left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, calc(100vw - 40px)); max-height:min(72vh, 620px); animation:sheet-in .55s cubic-bezier(.2,.8,.2,1)} /* 中央に出す紙も同じ。位置は動かさず、濃さと大きさだけ。 scale は原寸に戻る値から始めても位置がずれない。 */ @keyframes sheet-in{from{opacity:0; transform:translate(-50%,-50%) scale(.86)} 65%{opacity:1; transform:translate(-50%,-50%) scale(1.012)} to{opacity:1; transform:translate(-50%,-50%) scale(1)}} .sh-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:22px 24px 14px} .sh-n{font-family:var(--display); font-size:22px; letter-spacing:-.02em} .sh-s{font-size:13px; color:var(--text3); margin-top:3px} .sh-x{width:30px; height:30px; flex:none; border:0; border-radius:99px; background:var(--sunk); color:var(--text2); font-size:19px; line-height:1; display:grid; place-items:center; transition:background .15s} .sh-body{padding:0 14px 16px; overflow-y:auto; -webkit-overflow-scrolling:touch} .shrow{display:grid; grid-template-columns:4.6em minmax(0,1fr) 3.6em; align-items:center; gap:12px; width:100%; min-height:48px; padding:8px 10px; border:0; background:none; text-align:left; border-radius:12px; transition:background .15s} .shrow + .shrow{box-shadow:inset 0 1px 0 rgba(0,0,0,.05)} .sht{font-size:15px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .sht .tag{font-size:11px; color:var(--text3); margin-left:7px} .shn{font-size:15px; color:var(--text2); text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-.02em} .shn.soon{color:var(--text3)} .shrow:active{background:var(--sunk)} /* 画面がせまいときは、下から出す紙にする。指の届く所に近い。 */ @media (max-width:640px){ .sheet{left:0; right:0; bottom:0; top:auto; transform:none; width:auto; max-height:78vh; border-radius:22px 22px 0 0; animation:sheet-up .6s cubic-bezier(.2,.8,.2,1)} .sh-body{padding-bottom:max(20px, env(safe-area-inset-bottom))} } /* 入りの動き。**位置は動かさない。** 前は下から14px上げていた。だが動きが走らない場面（背面のタブ、 動きを減らす設定）では最初の1コマのまま止まり、紙が14px下がって 下の端が画面の外に出た。**動きが止まっても正しい位置に居る**形に する ―― 変えるのは濃さだけ。 */ @keyframes sheet-up{from{opacity:0}to{opacity:1}} /* ============================================================ これからの予定 ―― 「今後の宿題」の本体 ============================================================ 過去より先の予定のほうが大事なので、ここを上に置く。 1行だけ直せることが要点。学期ぶんを入れ直させない。 */ /* 予定の1行。**回の番号を丸で持たせる。** 前は数字と日付が同じ濃さで並んでいて、どこから読むのか 分からなかった（「視認性が低い」）。丸を目印にして、 そこから右へ単元・宿題と読ませる。 */ .pno{display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:15px; background:var(--sunk); line-height:1.05; font-size:10px; color:var(--text3); font-variant-numeric:tabular-nums; transition:background .18s ease} .pno b{display:block; font-family:var(--sans); font-weight:600; font-size:16px; color:var(--text); letter-spacing:-.02em} /* いちばん近い回だけ、黄で示す。次に手を入れるのはここ。 */ .pmid{min-width:0; display:grid; gap:2px} .ptopic{font-size:16px; letter-spacing:-.01em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .phw{font-size:13px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* 宿題が入っていない回は、それが分かるように黄で言う。 灰色で「宿題なし」と書くと、入れ忘れなのか要らないのか読めない。 */ .phw.none{color:var(--warn-fg)} /* 文の中に置く小さな動作。ボタンの見た目を取らない。 枠を付けると、並んだときに画面が枠だらけになる。 */ .lnk{border:0; background:none; padding:6px 2px; font:inherit; font-size:13px; color:var(--accent); border-radius:8px; transition:opacity .15s} .lnk:active{opacity:.5} .lnk[disabled]{opacity:.4} /* ============================================================ 仕上げ ―― やわらかい角と、黄の差し色 ============================================================ 角はひとまわり大きく、丸みを揃える。iOS の四角は「角が丸い四角」 ではなく、角に入るところから曲がりはじめる。半径を大きく取り、 隣り合う面の半径を揃えると、その感じに近づく。 色は青が地の色、**黄は「いま手を入れるところ」だけ**に置く。 どこにでも黄を撒くと、目印としての意味が消える。 */ /* --- 面の丸み --- */ .card, .tile{border-radius:22px} .lrow, .shrow {border-radius:16px} .btn{border-radius:15px} .pick{border-radius:999px} .slot{border-radius:17px} .daycol.today{border-radius:18px} /* --- 節の見出しに、細い黄の柱を立てる --- */ /* 白い箱の外に出した見出しは、地に浮いて弱く見えた。 文字を太くするのではなく、左に短い柱を置いて節の始まりを示す。 */ .secthead{position:relative; padding-left:14px} .secthead::before{content:""; position:absolute; left:0; top:5px; bottom:5px; width:4px; border-radius:99px; background:linear-gradient(180deg, var(--accent) 0%, var(--accent) 42%, var(--accent2) 100%)} .secthead h2{letter-spacing:-.03em} /* --- 今日の列 --- */ /* きょうだけは黄の地にする。週の中で目が最初に落ちる場所を作る。 */ .daycol.today{background:var(--accent2-soft)} .daycol.today .dayhead .d{color:var(--warn-fg)} .daycol.today .dayhead .n{color:var(--warn-fg); opacity:.7} /* --- 紙 --- */ .sheet{border-radius:26px} @container bento (max-width:640px){ .sheet{border-radius:26px 26px 0 0} } .sh-x{border-radius:99px} /* 期限がまだ先のものは、黄の点を添える。これから返ってくる分。 */ .shn.soon::before{content:"･"; color:var(--accent2); margin-right:5px; font-size:18px; line-height:0} /* --- 押せる丸札 --- */ /* 選ばれている札は青。押せる札はうっすら影を持たない ―― 面だけで示す。 */ .pick[aria-pressed="true"]{background:var(--accent); color:#fff} /* ============================================================ 仕上げ その2 ―― 見出し・コマ・単位 ============================================================ */ /* --- 節の見出し。**4つとも同じ大きさ** --- */ /* Apple の節見出しと同じ組み方にする。大きく、字間を詰め、 説明は付けない。見出しの下に1行そえると、節がひとつ増えるたびに 読む量が増え、見出し自体が小さく見える。 左の柱は見出しの高さいっぱいに立つので、字を大きくすると柱も 伸びる ―― 柱と字の背が同じになるように取ってある。 */ .secthead h2{font-family:var(--sans); font-weight:600; font-size:clamp(28px, 3vw, 34px); letter-spacing:-.035em; line-height:1.12} .secthead{margin:40px 0 16px; padding-left:16px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap} .secthead::before{top:2px; bottom:2px; width:5px} .secthead .sub{display:none} /* 右端に日付の区切りが来る見出し（今日やること・宿題・今週・時間割）。 */ .secthead.gridbar .wk{margin-left:auto} /* 時間割の見出しは、右に日付が並ぶので1行に組む */ .secthead.gridbar{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap} .secthead.gridbar .wk{font-size:13px; color:var(--text3)} /* --- 曜日 --- */ /* Mon…Sat。日本語の1文字より横に長いので、字を少し詰める。 */ .dayhead .d{font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--text3)} .daycol.today .dayhead .d{color:var(--accent2-text); font-weight:600} /* --- コマの右上に教科の1文字 --- */ .slot{position:relative} .slot .cls{padding-right:30px} .slot .topic{padding-right:4px} /* --- 単位 --- */ /* 「9/10人」の「人」だけ小さく。数字の並びを乱さない。 */ .shn i{font-style:normal; font-size:.72em; color:var(--text3); margin-left:1px; letter-spacing:0} .shrow{grid-template-columns:4.6em minmax(0,1fr) 4.6em} /* ============================================================ 角の丸み ―― ひとつの比で通す ============================================================ iOS のアプリアイコンは、一辺に対して 22.37% のところから 曲がりはじめる（180pt の角が 40pt）。この比を、四角い印すべてに 同じように当てる。大きさが違っても曲がり方が同じに見える。 28px → 6px 36px → 8px 44px → 10px 56px → 13px 64px → 14px 面（札・紙）はこれより一段丸くしてよい。指で触るものは、 目で見る印より丸いほうが手に合う。 */ .pno, /* 汎用の四角い印 */ .tag {border-radius:10px} .pno{width:44px; height:44px; border-radius:10px} .sh-x{width:30px; height:30px; border-radius:99px} /* まるい印はまるいまま */ .tag{border-radius:7px} /* 面。指で触るものはひとまわり丸く。 */ .card, .tile{border-radius:22px} .slot, .lrow, .shrow {border-radius:16px} .btn{border-radius:14px} .field input, .field select{border-radius:13px} .sheet{border-radius:26px} /* --- max は青から黄へ。**この画面のどこでも同じ** --- */ /* 満ちた目盛りは、先が黄に抜ける。「ここは済んでいる」の合図を 1つに決める。 印を JS で付けて回るのはやめた。目盛りは8か所にあり、1か所 付け忘れるとそこだけ黙る。**幅そのものを見て決める** ―― 中身の style に width:100% と書いてあれば、それが満ちた印である。 新しく目盛りを足しても、何もしなくてもそろう。 width:100 で始まる値だけに当たる。10% や 1% には当たらない。 */ .bar i[style*="width:100"], .g i[style*="width:100"], .meter i[style*="width:100"]{ background:linear-gradient(90deg, #0A4F8F 0%, #2E86D6 45%, var(--accent2) 100%)} /* --- 束 --- */ /* --- 1行 --- */ /* ============================================================ 仕上げ その3 ―― 今日の印・束のカプセル・銘・採点の紙 ============================================================ */ /* --- TUBE を、見出しの柱と同じグラデーションで --- */ /* 節の見出しの左に立つ柱は、上が青で、下へいくほど橙になる。 銘の TUBE にも**まったく同じ**グラデーションを当てる。 段階（0% 青 / 42% 青 / 100% 橙）まで同じにしてあるので、 柱と銘は同じ絵の一部に見える。 background-clip:text は文字の形で背景を切り抜く。 色を透明にしないと背景が見えない。 */ /* ロゴ（2026-09-12）：一語の tubestudy。tube は太い青、study は印と同じ黄（#F9B900）。 グラデーションも大文字もやめた ―― いまの簡素なワードマークの流れに合わせる（本人の指示）。 */ .brand{color:var(--accent); gap:0} .brand b{font-weight:700; color:var(--accent)} .brand i{font-style:normal; font-weight:300; color:#F9B900} /* --- 今日 ―― 曜日の札だけを塗る --- */ /* 前は列ぜんぶを薄い黄で敷いていた。面が大きいぶん色が薄まり、 「クリーム色」に見えていた。塗る面積を曜日のところだけに絞って、 **ブランドの黄そのもの**を置く。濃い色は小さく使う。 横幅は列のまま。列の地は戻す。 */ .daycol.today{background:none; margin:0; padding:0} .week .daycol.today{margin:0; padding:0} /* **曜日の箱は、どの日も同じ高さ。** 今日だけ余白を足していたので、今日の列のコマが10px下へ落ちていた。 余白は全部の曜日に持たせ、今日は地の色だけを変える。 */ .dayhead{padding:5px 8px; margin-bottom:4px; border-radius:12px; min-height:30px; box-sizing:border-box} .daycol.today .dayhead{background:var(--accent2-fill)} .daycol.today .dayhead .d, .daycol.today .dayhead .n{color:var(--accent2-ink); opacity:1} .daycol.today .dayhead .d{font-weight:700} /* --- Grading の束。横ならびのカプセル --- */ /* 帯を4本ならべるのをやめた。画面を右端まで横切るうえ、 全部開くと、いま採点する分が下へ流れていく。 */ /* --- 採点の紙 --- */ /* 名前と丸を並べるので、ふつうの紙より広く取る。 ただし**せまい画面では下から出す紙のまま**にする ―― クラス名が 2つある分だけ指定が強く、幅の指定が全幅の規則に勝っていた （iPhone で紙が右に 40px 足りなかった）。 */ @media (min-width:641px){ .sheet.wide{width:min(680px, calc(100vw - 40px)); max-height:min(84vh, 760px)} } @media (max-width:640px){ .sheet, .sheet.wide{width:auto; max-height:82vh} } /* 採点欄の名前。ヘッダの .who と同じ名前なので、右寄せが移っていた ―― 名前が右端に寄り、左が大きく空いていた。ここで打ち消す。 */ .sheet .raterow .who{flex:1; text-align:left; font-size:15px; color:var(--text); font-family:var(--display)} .sheet .ratelist{border-top:0; margin-top:4px} .sheet .raterow{padding:7px 0; border-bottom:0; box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)} .sheet .raterow:last-child{box-shadow:none} .sheet .mk{border:0; border-radius:11px} .sheet .stuck{margin-top:8px} /* --- カプセルの枠を落とす --- */ /* 押せる札は面で示す。枠を残すと、選んだ札に青い輪郭が出て 塗りと二重になる（採点する札で実際にそう見えた）。 */ .pick, .pick[aria-pressed="true"]{border:0} /* --- 銘の字に、すこし丸みを --- */ /* グリフの角は CSS では丸められない。丸い書体に替えるのが唯一の道。 ui-rounded は CSS の総称名で、Apple の端末では SF Pro Rounded に なる（Safari 対応済み）。無い環境ではこれまでの書体に落ちる。 */ .brand{font-family:-apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", var(--sans); letter-spacing:-.035em} /* ============================================================ 授業の紙 ―― 前後3回と、宿題の操作 ============================================================ */ .lrows{display:grid; gap:4px; margin-bottom:6px} .lrow2{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; min-height:56px; padding:9px 12px; border-radius:16px; background:var(--sunk)} .lrow2 .pno{background:var(--surface)} /* いま出す回。ここだけ色を持たせる ―― 目が最初に落ちる場所。 */ .lrow2.now{background:var(--accent2-soft)} .lrow2.now .pno{background:var(--accent2-fill)} .lrow2.now .pno b{color:var(--accent2-ink)} .lrow2.now .lst{color:var(--accent2-text)} /* すでに出した回。用が済んでいるので、うすく。 */ .lrow2.out{opacity:.62} .lrow2.out .lst{color:var(--text3)} .lst{font-family:var(--sans); font-size:12px; color:var(--text3); flex:none} .lacts{margin-top:18px; padding-top:16px; box-shadow:inset 0 1px 0 rgba(0,0,0,.06)} .lact-t{font-size:13px; color:var(--text3); margin-bottom:9px} /* 問題数の増減。指で押せる大きさを保つ。 */ .stepper{display:inline-flex; align-items:center; gap:2px; background:var(--sunk); border-radius:14px; padding:3px} .stp{width:38px; height:38px; border:0; border-radius:11px; background:none; color:var(--text2); font-size:18px; line-height:1; display:grid; place-items:center} .stp:active{background:var(--surface)} .stpn{min-width:2.4em; text-align:center; font-size:16px; color:var(--text)} /* ============================================================ 成績 ―― クラスの数と、生徒の一覧 ============================================================ 宿題タブと同じ組み方にする。札で絞り、白い行を地の上に並べ、 1人ぶんの中身は紙で出す（別ページへ飛ばさない）。 */ /* --- 数の札 --- */ .stats{display:grid; gap:10px; margin-top:14px; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr))} .due{color:var(--text2)} .due.ok{color:var(--text3)} .due.over{color:var(--accent2-text)} /* --- つまずきの一覧（紙の中） --- */ .wklist{display:grid; gap:4px; margin-top:8px} .sheet .stats{grid-template-columns:repeat(auto-fit, minmax(118px, 1fr))} /* 直近7回の宿題。大きいほうは紙の中で使う。 */ .dots.big{display:flex; gap:7px; margin-top:8px} .dots.big i{width:26px; height:8px; border-radius:99px; background:var(--sunk)} .dots.big i.on{background:var(--accent)} /* 束が1つだけのとき ―― クラスを1つ選んだ画面。 そのままだと束が左の1列に収まり、右が丸ごと空く。 束を幅いっぱいに広げ、**中の行を横へ流す**。 1行 420px を割らない範囲で、幅なりに 1／2／3 列になる。 */ .bars.one{grid-template-columns:1fr} /* 紙の中の「前回の宿題」。上の棒に出ている数字は、この行のこと。 どの行の話をしているのかが分からないと、一覧の意味が半分になる。 */ .shrow.last{background:var(--accent-soft)} .shrow.last .shn{color:var(--accent); font-weight:600} /* まだ期限が来ていない行は、うすく。まだ何も起きていない。 */ .shrow.ahead{opacity:.6} @media (hover:hover){ .shrow.ahead:hover{opacity:1} } .prow2{display:grid; grid-template-columns:6.4em minmax(0,1fr) 5.2em; align-items:center; gap:12px; min-height:40px; padding:0 8px; margin:0 -8px; border-radius:10px} .prow2.none{opacity:.45} .pn{font-size:15px; color:var(--text)} /* 進度の棒。ほかの目盛りと同じ形。真ん中に「同じペース」の目印だけ足す。 */ .bar.pace{position:relative; height:8px; overflow:visible} .bar.pace > i{border-radius:99px; height:100%; display:block} .bar.pace .mid{position:absolute; left:50%; top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:99px; background:var(--line); z-index:1} /* 使う冊子。教科ごとに束ねて、1冊1行。 */ .books{display:grid; gap:26px 40px; align-items:start; margin-top:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr))} /* 保存はページの終わりに1つ。箱で囲まない。 */ #pSave{width:100%} /* ============================================================ 生徒の画面 ―― 講師の画面と同じ組み方にそろえる ============================================================ 同じアプリの中で見出しや箱の形が2つあると、別のアプリに見える。 枠と白い箱を外し、行と面で区切る。 */ /* 教科ごとの一覧。箱に入れず、1行ずつ白い面にする。 */ .sublist{display:grid; gap:6px; margin-top:6px; border-top:0} .subrow{background:var(--surface); border-radius:16px; border-bottom:0; padding:14px 16px; min-height:64px} .subrow .nm{width:auto; min-width:3.4em; font-size:17px; font-weight:600; letter-spacing:-.01em} .subrow .g{height:8px; border-radius:99px} .subrow .g i{border-radius:99px; background:linear-gradient(90deg, #0A4F8F 0%, #2E86D6 62%, #64B4F2 100%)} .subrow .ar{color:var(--text3)} .subrow:active{background:var(--surface2)} /* 「いまやるなら これ」。枠をやめて、面で示す。 */ /* 「いまやるなら これ」。**うすい青の箱をやめる。** ほかの行と地の色が近く、箱だけが浮いて見えていた。 白い面に、左の柱で色を入れる ―― 節の見出しと同じ考え方。 */ .next{border:0; border-radius:22px; padding:18px 20px 18px 24px; background:var(--surface); position:relative; overflow:hidden} .next::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--accent) 0%, var(--accent) 42%, var(--accent2) 100%)} .next.quiet::before{background:var(--line)} .next .btn{width:100%; max-width:280px} .next.paper, .card.hw.paper{border-style:solid} /* 宿題の札。枠なし。 */ .card.hw{border:0; border-radius:22px; background:var(--surface)} .card.hw.paper{background:var(--sunk)} .card.streak{border:0; border-radius:22px} /* せっていなどの面。白い箱の代わり。 */ .panel{background:var(--surface); border-radius:22px; padding:18px 20px; margin-bottom:14px} /* 生徒の画面の見出しも、講師と同じ大きさ。 */ .screen-today .secthead h2, .screen-record .secthead h2, .screen-daily .secthead h2, .screen-settings .secthead h2, .screen-homework .secthead h2{ font-size:clamp(26px, 3vw, 32px)} /* ============================================================ 仕上げ ―― 枠線を落とす ============================================================ デザイン仕様書の大原則「枠線は基本悪」を、残っていた所にも当てる。 区切りは面の色の差でつける。押せるものは地を変え、 押せないものは地のまま。 線を残すのは表の罫だけ ―― 数字を横に読む道しるべになるので、 あそこだけは線のほうが読みやすい。 */ .btn.ghost{border:0; background:var(--sunk)} .field input, .field select, .field textarea{border:0; background:var(--sunk)} .syn{border:0; background:var(--sunk)} .speak{border:0; background:var(--sunk)} .grade{border:0; background:var(--sunk)} .opt{border:0; background:var(--sunk)} .opt.on{background:var(--accent-soft)} .menuitem{border:0} .lrow, .subrow {border:0} .gname{font-size:14px; margin-top:2px} .dots.wk.big{display:flex; gap:5px; justify-content:center; height:96px; align-items:center} .dots.wk.big i{width:10px; height:10px; border-radius:99px; background:var(--sunk); border:0} .dots.wk.big i.on{background:var(--accent2)} /* ============================================================ 総復習テスト対策 ―― 組み分けテストの8日前から ============================================================ ふだんの毎日テストより量が多く、1教科1時間ぶん。 **それだけの山が来ていることを、まず伝える。** 小さく出すと、いつもの毎日テストと同じに見えて素通りされる。 */ .prep{background:linear-gradient(160deg, #0A4F8F 0%, #1C6FBF 58%, #2E86D6 100%); border-radius:24px; padding:20px 20px 16px; margin-top:14px; color:#fff} .prep-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px} .prep-l{font-family:var(--sans); font-size:12px; opacity:.82} .prep-n{font-size:26px; letter-spacing:-.02em; margin-top:2px} .prep-s{font-family:var(--sans); font-size:12.5px; opacity:.82; margin-top:3px} .prep-b{flex:none; padding:6px 12px; border-radius:99px; background:var(--accent2); color:var(--accent2-ink); font-family:var(--sans); font-size:12px} .prep-rows{display:grid; gap:6px; margin-top:16px} .prow3{display:grid; grid-template-columns:4.4em 4.6em 3.6em auto; align-items:center; gap:10px; width:100%; min-height:48px; padding:10px 14px; border:0; text-align:left; background:rgba(255,255,255,.14); border-radius:14px; color:#fff; transition:background .15s} .prow3:active{background:rgba(255,255,255,.24)} .pn3{font-size:15px} .pq3,.pm3{font-family:var(--sans); font-size:13px; opacity:.85} .prep-print{color:#fff; opacity:.85; margin-top:10px; padding-left:0} @container bento (max-width:460px){ .prow3{grid-template-columns:4.4em 1fr auto; gap:8px} .prow3 .pm3{display:none} } /* ============================================================ 生徒のトップ ―― 積み上がっているものを先に ============================================================ 残りの宿題から始めると、開くたびに「まだこれだけある」で終わる。 自分がどこまで来たかを先に置く。 */ /* （ここにあった .cells / .cell / .pyr は、札の格子（.wgrid）に 置きかえたので消した。ピラミッドは「学年の中の位置」を段で表す図 だったが、位置ではなく **今週やった問題数**を出すことにしたため 使い道が無くなった ―― 9.5 節を見よ。） */ /* いちばん上に居るときだけ黄。下2つは青 ―― 色で段の値打ちを分ける。 */ /* つづけた ―― 直近7日の縦棒。やった日を塗る。 */ .wbars{display:flex; gap:6px; align-items:flex-end; height:64px} .wb{display:flex; flex-direction:column; align-items:center; gap:4px} .wb i{display:block; width:9px; border-radius:99px; background:var(--sunk)} .wb i.l0{height:14px} .wb i.l1{height:30px; background:var(--accent-dim)} .wb i.l2{height:46px; background:var(--accent)} .wb span{font-family:var(--sans); font-size:10px; color:var(--text3)} /* ============================================================ カメラで丸つけ ============================================================ 写真は端末の中だけで読む。サーバへ送らないし、のこさない。 */ .camwrap{position:relative; background:#000; border-radius:18px; overflow:hidden; aspect-ratio:4/3} .camwrap video{width:100%; height:100%; object-fit:cover; display:block} /* 四すみの目安。ここに紙の黒い四角を合わせてもらう。 */ .camguide{position:absolute; inset:8%; pointer-events:none} .camguide i{position:absolute; width:26px; height:26px; border:3px solid rgba(255,255,255,.9); border-radius:4px} .camguide i:nth-child(1){left:0; top:0; border-right:0; border-bottom:0} .camguide i:nth-child(2){right:0; top:0; border-left:0; border-bottom:0} .camguide i:nth-child(3){right:0; bottom:0; border-left:0; border-top:0} .camguide i:nth-child(4){left:0; bottom:0; border-right:0; border-top:0} .camfile{cursor:pointer} .camwhy{background:var(--accent2-soft); color:var(--accent2-text); border-radius:14px; padding:12px 14px; margin:0 0 14px; font-size:14px} /* 丸つけの結果。番号の上に ○ × を並べる。 **.marks という名前は使わない。** 講師の評価ボタン（◎○△✕）が すでに .marks を使っており、後から書いたこちらが勝って、 評価ボタンが横1列から縦1列に化けた。同じ名前は同じ物にしか使わない。 */ .qmarks{display:grid; gap:6px; margin-top:4px; grid-template-columns:repeat(auto-fill, minmax(58px, 1fr))} .mkq{display:grid; gap:1px; place-items:center; padding:8px 4px; border:0; border-radius:12px; background:var(--sunk)} .mno{font-family:var(--sans); font-size:11px; color:var(--text3)} .msign{font-size:20px; line-height:1} .mkq.ok{background:var(--accent-soft)} .mkq.ok .msign{color:var(--accent)} .mkq.ng{background:var(--accent2-soft)} .mkq.ng .msign{color:var(--accent2-text)} .mkq.bl .msign{color:var(--text3)} /* まちがえた問題。こたえと解説をその場で出す。 */ .wrongq{background:var(--sunk); border-radius:14px; padding:12px 14px} .wq{font-size:15px; line-height:1.5} .wq b{display:inline-block; min-width:1.8em; color:var(--accent2-text)} .wa{font-size:14px; margin-top:6px; color:var(--text2)} .wa b{color:var(--accent)} .wa s{color:var(--text3)} .wn{font-size:13px; color:var(--text2); margin-top:5px; line-height:1.5} .prep-acts{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px} /* ============================================================ ウィジェット ―― iOS のホーム画面のように並べる ============================================================ Apple の見せ方は「白い箱をならべる」ではない。 **色を持った札が、大きさを変えながら格子に収まっている。** ここではその札を4種類だけ用意する。増やすと画面が騒がしくなる。 w-blue 濃い青。いちばん大事な1つに w-warm 早稲アカの黄。手を入れる所・ほめる所に w-marble 青と黄が混ざる。数字の主役に1つだけ w-plain 白。ふつうの札（既定） マーブルは、丸いぼかしを何枚か重ねて作る。画像は使わない ―― 画像にすると、暗い配色に切り替えたときに直せなくなる。 ============================================================ */ .w{border-radius:22px; padding:18px 16px 16px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:150px} /* --- 白。ふつうの札 --- */ .w-plain{background:var(--surface)} /* --- 青。上から下へ濃くなる --- */ .w-blue{background:linear-gradient(155deg, #1C6FBF 0%, #0A4F8F 100%); color:#fff} .w-blue .wl, .w-blue .ws{color:rgba(255,255,255,.82)} /* --- マーブル。青と黄が混ざる --- */ /* 丸いぼかしを4枚重ねる。角度を変えてあるので、並べても同じ模様に 見えない。**1画面に1つだけ**にすること ―― 2つ以上あると濁る。 */ .w-marble{background: radial-gradient(120% 90% at 12% 8%, rgba(249,185,0,.85) 0%, rgba(249,185,0,0) 55%), radial-gradient(110% 80% at 88% 18%, rgba(46,134,214,.9) 0%, rgba(46,134,214,0) 60%), radial-gradient(120% 110% at 74% 96%, rgba(10,79,143,.95) 0%, rgba(10,79,143,0) 62%), radial-gradient(100% 90% at 4% 92%, rgba(100,180,242,.75) 0%, rgba(100,180,242,0) 58%), linear-gradient(150deg, #2E86D6 0%, #0A4F8F 100%); color:#fff} .w-marble .wl, .w-marble .ws{color:rgba(255,255,255,.86)} .wl{font-size:14px; margin-top:8px; color:var(--text)} .ws{font-size:12px; margin-top:2px; color:var(--text3)} /* 押せる札は、指を置くとわずかに沈む */ button.w{border:0; width:100%; cursor:pointer; transition:transform .1s} button.w:active{transform:scale(.985)} /* ============================================================ 生徒のトップ ―― ウィジェットの格子 ============================================================ */ /* --- 「いまやるなら これ」。青の札で、押す所をはっきりさせる --- */ .next.w-blue{ background:linear-gradient(155deg, #1C6FBF 0%, #0A4F8F 100%); color:#fff; margin:0; padding:20px 22px 22px; min-height:0; display:flex; flex-direction:column; justify-content:center} .next.w-blue .lbl{color:rgba(255,255,255,.72)} .next.w-blue .subj{color:var(--accent2)} .next.w-blue .what{color:#fff} .next.w-blue .why{color:rgba(255,255,255,.78)} /* 押す所は、地の青の上で **黄** にする。白のボタンだと、 下の白い札と同じ色になって「札の一部」に見え、押せると分からない。 */ .next.w-blue .btn{background:var(--accent2); color:var(--accent2-text); align-self:flex-start; padding-left:34px; padding-right:34px} .next.quiet{background:var(--surface2); margin:0} /* 広い札は、中身を左右に振り分ける。中央に小さくまとめると、 まわりが空いて「読み込みに失敗した札」に見える。 左に自分の数、右に3本の比べ。 */ .vol{align-items:stretch; justify-content:space-between; text-align:left; padding:18px 22px 16px} /* 狭いときは、数と棒を上下に積む。横に潰すと棒が読めない。 */ /* ============================================================ 札の格子 ―― 列の数を決め打ちにする ============================================================ auto-fill に任せると、札が5枚のとき「4枚＋1枚」のような 歯抜けの行ができる。**歯抜けは、そこに何かがあるはずだと読まれる。** そこで、札の合計を6つぶんに揃え（大きい札が2つぶん）、 6を割り切る数 ―― 1・2・3・6 ―― だけを列の数に使う。 どの幅でも最後の行まできっちり埋まる。 ============================================================ */ /* 同じ行の札は、高さを揃える。iOS のウィジェットは、隣り合う札の 上下が必ず揃っている ―― 揃っていないと、格子ではなく紙の切れ端に見える。 ただし中身の量で高さが決まる札（カレンダー・教科の一覧）は伸ばさない。 空の余白ごと引き伸ばされると、下に何か入るはずだと読まれる。 */ /* 電話でも **2列**にする。iOS のホーム画面がそうであるように、 小さい札は2枚ならんでいるのが既定で、1枚だけの列にはしない。 1列にすると、札5枚で 750px ―― 宿題にたどり着くまで 指を3回すべらせることになる。 */ .wgrid{display:grid; gap:12px; grid-template-columns:repeat(2, 1fr); margin-top:10px; align-items:stretch} .wgrid .w2{grid-column:span 2} @container bento (min-width:520px){ .wgrid{gap:14px} } /* 2列のときだけ、行の残りを埋める札。 「大きい札1つ＋小さい札1つ」の帯（きょうの宿題／きろく）は、 2列だと大きい札が1行を使い切り、小さい札が次の行に1つだけ残る。 **残った1つの右に空の枠ができる。** 3列なら 2+1 でぴったり収まるので、 この処置が要るのは2列のときだけ。 */ @container bento (max-width:839px){ .wgrid > .wfill{grid-column:span 2} } @container bento (min-width:840px){ .wgrid{grid-template-columns:repeat(3, 1fr)} } /* 4枚ぴったりの帯。列は 1・2・4 ―― 4を割り切る数だけを使う。 */ .wgrid4{display:grid; gap:12px; grid-template-columns:repeat(2, 1fr); margin-top:10px; align-items:start} @container bento (min-width:520px){ .wgrid4{gap:14px} } @container bento (min-width:1000px){ .wgrid4{grid-template-columns:repeat(4,1fr)} } /* 4列以上には **しない**。 札1枚が250pxを割ると「1183 / 1185問 こたえた」のような 添え字が2行に折れ、札ごとに高さが変わって行が波打つ。 広い画面は列を増やすのではなく、本体の幅を止めて中央に寄せる （下の .screen-today main）―― apple.com もそうしている。 */ /* --- 直近7日の縦棒 --- */ .w .wbars{display:flex; align-items:flex-end; justify-content:center; gap:9px; height:72px} .w .wb i{width:11px} .w .wb i.l0{height:16px} .w .wb i.l1{height:36px} .w .wb i.l2{height:56px} .w .wb i{background:var(--sunk)} .w .wb i.l1{background:color-mix(in srgb, var(--accent) 45%, var(--surface))} .w .wb i.l2{background:var(--accent)} /* --- 教科ごと。**格子に並べる** --- 前は1行が画面の端から端まで伸びていた。1830px の行の左端に教科名、 右端に「›」があり、目が横に泳ぐ。読む幅は 400px 前後で足りる。 auto-fill にすると、5教科でも列が余ったぶんだけ空の枠が出るので auto-fit を使う ―― 埋まらない列は畳まれる。 */ .sublist{border-top:0; display:grid; gap:10px; grid-template-columns:minmax(0, 1fr)} /* 1列。列の幅は中身に引っぱられない（minmax(0,…)） */ .sublist .subrow{border-bottom:0; background:var(--surface); border-radius:18px; padding:16px 18px; min-height:76px} /* 教科は5つ。列が2本でも3本でも必ず1つ余る。 **余った1つは、残りの幅いっぱいに伸ばす。** 空の枠を残すと、そこに6つ目の教科があるはずだと読まれる。 */ /* 2列のときの規則は、**2列のときだけ**に閉じる。 上限を書き忘れると、3列になっても「最後の1つを2つぶんに伸ばす」が 生き残り、3教科のとき 1+1+2＝4つぶんになって行がはみ出す。 */ @container bento (min-width:560px) and (max-width:899px){ .sublist{grid-template-columns:repeat(2, minmax(0,1fr))} /* 1fr だと中身の長さで列が不ぞろいになり、行が潰れた */ .sublist > :last-child:nth-child(odd){grid-column:span 2} } @container bento (min-width:900px){ .sublist{grid-template-columns:repeat(3, minmax(0,1fr))} .sublist > :last-child:nth-child(3n+1){grid-column:span 3} .sublist > :last-child:nth-child(3n+2){grid-column:span 2} } .sublist .subrow.clear{ background:linear-gradient(150deg, color-mix(in srgb, var(--accent2) 26%, var(--surface)) 0%, color-mix(in srgb, var(--accent2) 10%, var(--surface)) 100%)} /* ============================================================ 生徒の画面は、幅を止めて中央に寄せる ============================================================ 2000px の画面で端から端まで伸ばすと、1行が 1800px になる。 目は横に泳ぎ、教科名から「›」までの間が空白の帯になる。 apple.com は本文の幅を 980px 前後で止めて中央に置いている。 ここも同じにする。**余白は空白ではなく、幅の宣言である。** 講師の画面は止めない ―― 生徒40人ぶんの帯や1年ぶんの進度表は、 横に広いほど読みやすい。読むものが違えば、正しい幅も違う。 ============================================================ */ .screen-today main, .screen-daily main, .screen-homework main, .screen-record main, .screen-settings main{ /* ★ width:100% を必ず書くこと。 #app は縦の flex で、main は横いっぱいに伸ばされている（stretch）。 そこへ margin-inline:auto を足すと **伸長が止まり、中身の幅まで縮む** ―― 仕様どおりの挙動で、画面が「縦の細い帯」になる。 幅を先に決めておけば、auto は残りを左右に分けるだけになる。 */ width:100%; max-width:1320px; margin-inline:auto } /* 毎日テストの札。押せることが分かるように、下の1行を矢印で終える */ .dtile{text-align:center} .dtile .ws{opacity:.95} /* 電話の幅では、札1枚が175px前後になる。数字はそのまま大きく、 添え字だけを詰める ―― 数字を小さくすると、札である意味が消える。 */ @container bento (max-width:519px){ .w{padding:16px 12px 14px; min-height:132px; border-radius:20px} .wl{font-size:13px; margin-top:6px} .ws{font-size:11px} } /* パソコン → スマホ の渡し方。青い札の中に置くので、地は白の薄膜。 */ .hand{margin-top:14px; padding:14px 16px 13px; border-radius:16px; background:rgba(255,255,255,.14)} .hand-l{font-size:13px; color:rgba(255,255,255,.9)} .hand-s{margin:8px 0 0; padding-left:20px; font-size:13.5px; line-height:1.75; color:#fff} .hand-s b{font-weight:400; color:var(--accent2)} .hand-n{margin-top:8px; font-size:11.5px; color:rgba(255,255,255,.7)} /* さっき刷った紙は、選ぶ一覧の中でも見分けられるようにする */ .shrow.on{background:var(--accent-soft)} .shrow .tag{display:inline-block; margin-left:8px; font-style:normal; font-size:11px; padding:2px 8px; border-radius:99px; background:var(--accent2); color:var(--accent2-text)} /* 対策の1教科ぶんの行。アプリで解く／紙にする の2つを右にならべる。 */ .prow3{display:grid; align-items:center; gap:10px; grid-template-columns:5.5em 4.5em 3.5em 1fr auto auto} /* 対策の行と にがての帯に置く、押せるもの。 **.pact は使えない** ―― 講師の Upcoming がすでに使っている （こちらが後から上書きして、あちらの並びを壊すところだった）。 同じ名前は同じ物にしか使わない。 */ .pbtn{border:0; font:inherit; font-size:13px; cursor:pointer; padding:9px 16px; border-radius:99px; line-height:1.2; background:rgba(255,255,255,.16); color:#fff} .pbtn:active{transform:scale(.97)} .pbtn.go{background:var(--accent2); color:var(--accent2-text)} @container bento (max-width:560px){ .prow3{grid-template-columns:1fr auto auto; row-gap:6px} .prow3 .pq3, .prow3 .pm3{font-size:12px} } /* 講師の要約の札。中の棒は、受け持ちの枠ごとの提出ぐあい。 */ /* 枠が12個ならぶことがある。すきまと棒を細くして、折り返さずに収める。 折り返すと札の高さが変わり、隣の札と上下がずれる。 */ .tb{display:flex; flex-direction:column; align-items:center; flex:0 0 auto} .tb span{font-size:10px; color:rgba(255,255,255,.72); margin-top:4px; max-width:5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* クラスの動き。棒を横にならべ、右端をいまにする。 */ .trend{align-items:stretch; justify-content:flex-start; text-align:left; padding:18px 20px 14px} /* 図の見出し。**白い札の上なので、字は濃くする。** マーブルの札と同じ .vhead を使い回して、白い字のまま 白い札に載せてしまい、見出しが1つも見えなくなった。 */ .thead{font-size:13px; color:var(--text2)} /* 銘の左の印。**丸みは iOS のアプリ印と同じ比（一辺の 22.37%）。** icon.svg 自身が角丸を持っているので、ここでは切り抜かない。 高さは銘の字と同じにして、上下の中心をそろえる。 */ .brand .mark{width:1.02em; height:1.02em; flex:none; align-self:center; margin-right:.06em; display:block} /* ============================================================ にがてつぶし ―― 対策の札の下に置く ============================================================ **オレンジを主にしたグラデーション。** 上の青い札と地続きに 見えないよう色で分け、しかし同じ配色の中に収める。 単元は横に並べる。縦の箇条書きにすると、3単元で札が対策そのものより 大きくなり、主客が入れ替わった（一度そうなった）。 ============================================================ */ .weak{margin-top:14px; padding:16px 18px 14px; border-radius:22px; background:linear-gradient(150deg, color-mix(in srgb, var(--accent2) 52%, #FFFFFF) 0%, color-mix(in srgb, var(--accent2) 22%, #FFFFFF) 58%, color-mix(in srgb, var(--accent) 12%, #FFFFFF) 100%); color:var(--accent2-text)} .wk-l{font-size:13px; letter-spacing:.02em} .wk-l span{font-size:11.5px; margin-left:10px; opacity:.72} .wrow{display:grid; align-items:center; gap:8px 12px; margin-top:10px; grid-template-columns:4.5em 1fr auto} .wsub{font-size:14px} .wchips{display:flex; flex-wrap:wrap; gap:6px; min-width:0} .wchip{display:inline-flex; align-items:baseline; gap:5px; padding:4px 10px; border-radius:99px; font-size:12.5px; background:rgba(255,255,255,.66); color:var(--accent2-text)} .wchip i{font-style:normal; font-size:10.5px; opacity:.66; font-variant-numeric:tabular-nums} /* やっつけた単元は、青にして消し込みを見せる。**残すのが大事** ―― 消えてしまうと、直した手ごたえが画面に残らない。 */ .wchip.ok{background:color-mix(in srgb, var(--accent) 16%, #FFFFFF); color:var(--accent)} .whw{grid-column:1/-1; font-size:11.5px; opacity:.72; margin-top:-2px} .weak .pbtn.go{background:var(--accent); color:#fff} .pbtn.did{background:rgba(255,255,255,.5); color:var(--accent2-text); opacity:.8} .prow3.done .pn3, .prow3.done .pq3, .prow3.done .pm3{opacity:.62} @container bento (max-width:560px){ .wrow{grid-template-columns:1fr auto} .wsub{grid-column:1/-1} } /* ============================================================ ノートの宿題を写真で出す ============================================================ */ /* 出す口。**ラベルごと押せるようにする** ―― ファイルの入力欄そのものは 端末ごとに見た目が違い、そろえられない。隠して、札を押させる。 */ .upl{display:block; margin-top:10px; border-radius:14px; font-size:13px} .upl input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none} .upl.busy{background:var(--sunk); color:var(--text2); padding:12px 14px} .upl.done{background:var(--sunk); padding:11px 14px} .upl.done.seen{background:color-mix(in srgb, var(--accent) 12%, var(--surface))} .up-l{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .up-l b{font-weight:400} .up-l span{font-size:11.5px; color:var(--text3)} .up-ck{color:var(--accent)} .up-note{margin:8px 0 0; font-size:13px; line-height:1.7; padding:9px 12px; border-radius:10px; background:color-mix(in srgb, var(--accent2) 18%, var(--surface)); color:var(--accent2-text)} .upl-again{display:inline-block; margin-top:8px; font-size:12px; color:var(--accent); cursor:pointer} .upl-again input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none} /* 紙に載る数は、ボタンの中に小さく添える。 アプリの数とは違う（紙は選択肢のある問題だけ・マスの数が上限）。 */ .pbtn i{font-style:normal; font-size:11px; opacity:.7; margin-left:6px} /* ============================================================ 漢字の書き取り ―― 答えを大きく出す ============================================================ 書けたかどうかは、**形を見比べないと分からない。** ふつうの答え（20px前後）では、とめ・はね・はらいが確かめられない。 書体について。**教科書体は iPhone にも Mac にも入っていない。** 入っている端末（Windows の UD デジタル教科書体など）ではそれを使い、 無ければ明朝に落とす ―― ゴシックより筆の形に近いからである。 本物の教科書体を全端末で出すには、書体ファイルを埋め込むしかなく、 それは使用許諾と容量の話になる（いまは踏み込まない）。 ============================================================ */ /* 書き取りの答えを大きく出す所。 ★ **いまは明朝体に落ちるのを承知で使っている。**（本人判断 2026-08-31） 教科書体は Windows にしか入っておらず、Mac と iPhone では 下の Hiragino Mincho まで落ちる。はね・とめ・はらいの形は 教わるものと違う。 直すなら選択肢は2つ ―― モリサワ UD デジタル教科書体を Webフォント契約するか、必要な字だけ自前で用意するか。 大きく出す字は **236字しかない**（app/content/japanese/kaki-*.js の裏）ので、 切り出せば 200〜300KB に収まる。急ぐ話ではない。 */ .reveal.kaki .def-ja{ font-family:"UD デジタル教科書体 N-R", "UD Digi Kyokasho N-R", "Yu Kyokasho", YuKyokasho, "Hiragino Mincho ProN", "Yu Mincho", serif; font-size:clamp(64px, 22vw, 132px); line-height:1.15; letter-spacing:.04em; text-align:center; margin:10px 0 6px; color:var(--text); } /* 問題の側は、ふつうの大きさのまま。空欄が見えることが大事。 */ .headword.kaki-q{font-size:20px; line-height:1.9} /* ------------------------------------------------------------ 図（理科・社会の「図を見て答える」） 絵は content/figures.js が持つ SVG。線の色は currentColor なので、 **色をここで決める。** 黒い画面では白い線、白い紙では黒い線。 枠は付けない ―― 枠線は基本悪であり、絵は絵だけで立つ。 ------------------------------------------------------------ */ .zu{ margin:2px 0 18px; display:flex; justify-content:center; color:var(--text); } .zu svg{ width:100%; max-width:340px; height:auto; /* 図は問題文より先に目に入る。少しだけ落ち着かせる。 */ opacity:.94; } /* ------------------------------------------------------------ 長文読解の本文 読ませる文章なので、行間を広くとり、1行を長くしすぎない。 枠は付けない ―― 枠線は基本悪で、文章は文章だけで立つ。 ------------------------------------------------------------ */ .bun{ margin:2px 0 16px; font-size:15px; line-height:2.0; color:var(--text); max-width:34em; } .bun p{ margin:0 0 .9em; text-indent:1em } .bun p:last-child{ margin-bottom:0 } /* きょうの1件の下に出す「あと何件」。 次に何が来るかは見せない ―― 見せると、1件ずつ差し出す意味が消える。 */ .next .rest{ margin-top:10px; font-size:12px; color:var(--text3); } /* 先生から ―― 教科ごとの行。「教科ごと」（.subrow）と同じ形で、 いちばん新しい返事の宿題名・いつの宿題か・評価・ひとことを置く。 */ .subrow.fbsub{align-items:flex-start} .subrow.fbsub .nm, .subrow.fbsub .ar{padding-top:1px} .subrow .fbt{font-size:15px; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .subrow.fbsub .st{flex-wrap:wrap; row-gap:4px} .subrow .st .rt, .hw-meta .rt, .fb-top .rt{font-style:normal; font-size:11.5px; padding:2px 8px; border-radius:99px; background:var(--accent2-soft); color:var(--accent2-text); white-space:nowrap} .subrow .fbn{margin-top:6px; font-size:13px; line-height:1.55; color:var(--text2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} /* 行の中に折り返さない題名があっても、列が画面の外へ広がらないようにする。 格子の列は既定で「中身の最小幅」まで広がり、「›」が画面の外に押し出されていた。 **列の数はここで書かない**（上の .sublist の1列と、幅ごとの container query が決める）。 前はここで1列に戻していたため、広い幅で「最後の札は3列ぶん」だけが効いて暗黙の列ができ、 1行目の札が中身の幅で不ぞろいになって潰れていた。 */ .subrow{min-width:0} /* ============================================================ 生徒の ホーム・宿題・毎日テスト（2026-09 作り直し） ============================================================ 決まりは3つ。 1. 開いた瞬間に「次にやる1つ」が見える。大量の一覧を並べない 2. 押せそうなものは必ず押せる（label も button も、押せば動く） 3. 新しい見た目を作らない。札（.w）・白い面（22px の角）・見出し（.secthead）・ 青の主役（.w-blue）・黄の達成（.w-warm）を、そのまま使う */ /* --- デモの入口 ―― 生徒の札に添える一言 --- */ /* 題との間は空白1つで取る（左の余白で取ると、折り返したときに字下げになる） */ .demo-note{display:inline-block; padding:2px 9px; max-width:100%; box-sizing:border-box; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-family:var(--sans); font-size:11.5px; line-height:1.5; letter-spacing:0; vertical-align:2px; white-space:normal; overflow-wrap:anywhere} /* --- 札の格子 ―― 行を1枚で使い切る札 --- となりの札が無いとき（学年の順位がまだ来ていない など）、 1枚だけ残ると右に空の枠ができる。行ぜんぶを使う。 */ .wgrid > .wall{grid-column:1 / -1} /* 青い札の中の「このあと あと N件」。白地むけの灰だと読めない。 */ .next.w-blue .rest{color:rgba(255,255,255,.66)} /* いちばん先の1件の添え書き。印・期限・分量を横に並べ、狭ければ折り返す */ .next.tile .why, .hw-first .why{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px} /* --- どうやってやるか ―― 紙／アプリの札 --- 色だけで分けない。**形の印**（CSS で描いた紙と画面）と、ことばを必ず添える。 絵文字・記号の字は使わない（デザインの決まり）。 */ .hw-way{display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 8px; border-radius:99px; font-family:var(--sans); font-size:11.5px; line-height:1.6; letter-spacing:0; white-space:nowrap} .hw-way i{flex:none; display:block; box-sizing:border-box; border:1.5px solid currentColor} /* 紙 ―― 右上の角だけ丸めて、1枚の紙に見せる */ .hw-way.paper{background:var(--sunk); color:var(--text2)} .hw-way.paper i{width:9px; height:11px; border-radius:1px 4px 1px 1px} /* アプリ ―― 縦長の画面。下の帯が画面の縁 */ .hw-way.app{background:var(--accent-soft); color:var(--accent)} .hw-way.app i{width:8px; height:12px; border-radius:2.5px; box-shadow:inset 0 -2px 0 currentColor} .w-blue .hw-way{background:rgba(255,255,255,.16); color:#fff} .hw-state{font-family:var(--sans); font-size:12px; color:var(--text3)} .w-blue .hw-state{color:rgba(255,255,255,.8)} /* 紙の宿題を写真で出す口。**label ごと押せる**（中の入力欄は見せない）。 端末ごとに見た目の違う入力欄を隠して、いつものボタンの形で押させる。 */ .hw-up{position:relative; cursor:pointer} .hw-up input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none} .hw-up:focus-within{outline:2.5px solid var(--accent); outline-offset:2px} /* --- 今の自分 ―― 今週の量を学年の中で --- 1行で位置を言い、3本の横棒（自分・真ん中・1位）を同じ物差しで並べる。 自分の棒だけ黄。 */ .rk{align-items:stretch; justify-content:flex-start; text-align:left; padding:18px 22px 16px} .rk-head{font-size:21px; letter-spacing:-.02em; line-height:1.3; color:#fff} .rk-goal{font-family:var(--sans); font-size:13px; color:rgba(255,255,255,.88); margin-top:2px} .rk-bars{display:grid; gap:8px; margin-top:14px} .rk-row{display:grid; grid-template-columns:3.4em minmax(0,1fr) 2.8em; align-items:center; gap:10px; font-family:var(--sans); font-size:12px; color:rgba(255,255,255,.78)} .rk-bar{display:block; height:8px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.18)} .rk-bar i{display:block; height:100%; border-radius:99px; background:rgba(255,255,255,.6)} .rk-row.mine{color:#fff} .rk-row.mine .rk-bar i{background:var(--accent2)} .rk-v{text-align:right; font-size:14px; color:#fff} .rk-foot{font-family:var(--sans); font-size:11px; color:rgba(255,255,255,.66); margin-top:12px} .dtile .wl .num{font-size:1.25em; margin-right:1px} /* ============================================================ 宿題のタブ ============================================================ */ /* 写真の添え書き（いまやるなら これ の札の中） */ .hw-hint{font-family:var(--sans); font-size:11.5px; color:rgba(255,255,255,.66); margin-top:8px} /* 教科ごと。広いときは2列に流す（高さの違う面を上でそろえる） */ .hw-secs{display:grid; gap:14px; grid-template-columns:minmax(0,1fr); align-items:start; margin-top:4px} @container bento (min-width:900px){ .hw-secs{grid-template-columns:repeat(2, minmax(0,1fr))} /* 余った1つは行いっぱいに。空の枠を残すと、そこに何かがあるはずだと読まれる */ .hw-secs > :last-child:nth-child(odd){grid-column:span 2} } .hw-sec{background:var(--surface); border-radius:22px; padding:16px 18px 8px; min-width:0} .hw-sechead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:2px 2px 6px} .hw-sechead h3{font-size:19px; font-weight:500; letter-spacing:-.01em} .hw-secn{font-family:var(--sans); font-size:13px; color:var(--accent)} .hw-row{min-width:0} .hw-row + .hw-row{box-shadow:inset 0 1px 0 rgba(0,0,0,.05)} .hw-meta{display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; margin-top:5px; font-family:var(--sans); font-size:12.5px; color:var(--text2)} .hw-meta .late{color:var(--warn-fg)} .hw-act{flex:none} .hw-go{min-width:92px} .hw-more{margin:0 0 6px} /* ホームの教科から来たとき、どこに着いたかを一瞬だけ示す */ .hw-sec.focus, .hw-fin.focus{animation:hw-focus 1.8s ease both} @keyframes hw-focus{0%, 45%{box-shadow:0 0 0 3px var(--accent-dim)} 100%{box-shadow:0 0 0 3px rgba(74,139,199,0)}} @media (prefers-reduced-motion:reduce){ .hw-sec.focus, .hw-fin.focus{animation:none} } /* おわった宿題 ―― たたんで置く */ .hw-fin{margin-top:4px; border-radius:18px} .hw-fintg{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:52px; padding:12px 18px; border-radius:18px; background:var(--sunk); font-family:var(--sans); font-size:14px; color:var(--text2); text-align:left} .hw-fintg .ar{color:var(--text3); transition:transform .2s} .hw-fintg[aria-expanded="true"] .ar{transform:rotate(90deg)} .hw-finrows{background:var(--surface); border-radius:18px; padding:4px 18px; margin-top:8px} .hw-st{color:var(--text2)} /* 何も出ていない日 */ .hw-empty{background:var(--surface); border-radius:22px; padding:24px 24px 22px; margin-top:6px} .hw-empty-t{font-size:20px; letter-spacing:-.01em} .hw-empty p{font-size:14px; color:var(--text2); line-height:1.7; margin:6px 0 16px} /* ============================================================ 毎日テストの主役の札 ============================================================ 前は小さな札と教科の行の下に埋もれ、毎日テストそのものが目に入らなかった。 ホームの「いまやるなら これ」と同じ青。押すものは黄の大きいボタン1つ。 */ .dhero{border-radius:24px; padding:20px 22px 22px; margin-top:6px; color:#fff; background:linear-gradient(155deg, #1C6FBF 0%, #0A4F8F 100%)} .dh-top{display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap} .dh-l{font-family:var(--sans); font-size:13px; color:rgba(255,255,255,.82)} .dh-run{display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:12px; color:rgba(255,255,255,.86)} .dh-n{font-size:30px; letter-spacing:-.03em; line-height:1.2; margin-top:12px} .dh-n .num{font-size:1.4em; margin:0 3px} .dh-n small{font-family:var(--sans); font-size:14px; margin-left:10px; opacity:.82; letter-spacing:0} /* 教科の並びと今日の状態。2つは別々に折り返す（「今日はこれ／から」と割れないように） */ .dh-s{font-family:var(--sans); font-size:13px; color:rgba(255,255,255,.82); margin-top:4px; display:flex; flex-wrap:wrap; gap:2px 14px} /* 青い札の上では、まだの日の点を白く塗らない（塗った日に見える）。 */ .dhero .dots.wk i{background:rgba(255,255,255,.2); border-color:transparent} .dhero .dots.wk i.on{background:var(--accent2); border-color:var(--accent2)} .dhero.calm .dots.wk i, .dhero.done .dots.wk i{background:var(--sunk)} .dhero.calm .dots.wk i.on, .dhero.done .dots.wk i.on{background:var(--accent2)} .dh-act{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin-top:18px} .dhero .btn{width:auto; min-width:200px; min-height:56px; padding:14px 38px; font-size:17px; background:var(--accent2); color:var(--accent2-text)} .dh-first{font-family:var(--sans); font-size:13px; color:rgba(255,255,255,.86)} /* 対策が出ている間（組み分けテストの前）は、対策の札が主役。こちらは淡く */ .dhero.calm{background:linear-gradient(165deg, #E8F1FB 0%, #FEF7E4 100%); color:var(--text); margin-top:16px} /* 今日の分が終わった日 */ .dhero.done{background:var(--surface); color:var(--text)} .dhero.calm .dh-l, .dhero.done .dh-l{color:var(--accent)} .dhero.calm .dh-s, .dhero.done .dh-s, .dhero.calm .dh-first, .dhero.done .dh-first, .dhero.calm .dh-run, .dhero.done .dh-run{color:var(--text2)} .dhero.calm .btn, .dhero.done .btn{background:var(--accent); color:#fff} /* 「今やるならこれ」「まずこれから」。 Me の札（.w-marble）と同じ作りで、**青と黄の割合を逆にする**。 地は明るい黄の面、青はすみに少しだけ。濃い青の面は目に強く、 毎日いちばん上に開くと、ほかの札より先に目を疲れさせてしまう。 */ .next.w-blue, .hw-first.w-blue{ background: radial-gradient(120% 95% at 8% 6%, rgba(249,185,0,.46) 0%, rgba(249,185,0,0) 60%), radial-gradient(90% 85% at 92% 8%, rgba(255,232,150,.7) 0%, rgba(255,232,150,0) 60%), radial-gradient(110% 110% at 88% 106%, rgba(46,134,214,.42) 0%, rgba(46,134,214,0) 62%), radial-gradient(80% 70% at 2% 100%, rgba(100,180,242,.22) 0%, rgba(100,180,242,0) 58%), linear-gradient(150deg, #FFF3D6 0%, #F3EDDD 55%, #DFEBF8 100%); color:var(--text)} .next.w-blue::before{display:none} .next.w-blue .lbl, .hw-first.w-blue .lbl{color:var(--accent2-text)} .next.w-blue .subj, .hw-first.w-blue .subj{color:var(--accent)} .next.w-blue .what, .hw-first.w-blue .what{color:var(--text)} .next.w-blue .why, .hw-first.w-blue .why, .next.w-blue .hw-state, .hw-first.w-blue .hw-state{color:var(--text2)} .next.w-blue .rest, .hw-first.w-blue .hw-hint{color:var(--text3)} /* 押す所は青。明るい地の上では、青のほうが「押せる」と分かる。 */ .next.w-blue .btn, .hw-first.w-blue .btn{background:var(--accent); color:#fff} .next.w-blue .hw-way, .hw-first.w-blue .hw-way{background:rgba(255,255,255,.72); color:var(--accent)} :root[data-theme="dark"] .next.w-blue, :root[data-theme="dark"] .hw-first.w-blue{ background: radial-gradient(120% 95% at 8% 6%, rgba(249,185,0,.20) 0%, rgba(249,185,0,0) 60%), radial-gradient(110% 110% at 88% 106%, rgba(46,134,214,.26) 0%, rgba(46,134,214,0) 62%), linear-gradient(150deg, #29251A 0%, #1B2230 100%)} :root[data-theme="dark"] .next.w-blue .hw-way, :root[data-theme="dark"] .hw-first.w-blue .hw-way{background:rgba(255,255,255,.10)} /* 提出チェック表（1コース・直近の回を、生徒 × 宿題で1枚に） */ table.bd{border-collapse:separate; border-spacing:0; width:100%; font-size:13px} table.bd th{position:sticky; top:0; z-index:1; background:var(--surface); text-align:left; font-weight:400; color:var(--text2); padding:10px 8px; vertical-align:bottom; min-width:118px} table.bd td{padding:6px 8px; border-top:1px solid rgba(127,127,127,.12); vertical-align:middle} /* 束（授業1回ぶんの紙の宿題）の中身 */ .hw-lines{display:grid; gap:4px; margin:2px 0 4px} .hw-lines.big{margin:6px 0 8px} .hw-line{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0} .hw-ln{font-size:15px; color:var(--text); word-break:break-word} .hw-lines.big .hw-ln{font-size:17px} .hw-la{font-family:var(--sans); font-size:12px; color:var(--text2)} .hw-lx{font-family:var(--sans); font-size:11px; padding:1px 8px; border-radius:99px; background:var(--accent-soft); color:var(--accent)} .hw-plain{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(127,127,127,.25)} .hw-plain-h{font-family:var(--sans); font-size:12px; color:var(--text3); margin-bottom:4px} .hw-plain .hw-ln{font-size:14px; color:var(--text2)} /* 授業の紙 → 学期ぶんの予定へのリンク／写真を見る画面の「何人目か」 */ .lplan{margin:12px 0 0; text-align:right} /* 数と単位を行の途中で切らない（「248」と「分」が別の行に分かれていた） */ .nobr{white-space:nowrap} /* 時間割のコマの名前：長いコース名（「中3 土特（RD特）数学」）がコマの外へはみ出していた。 折り返しは空白と記号の位置だけ（keep-all）にして、「中1R」が「中／1／R」に割れないようにする。 それでも入りきらない1語だけ、最後の手段としてどこでも折る。 */ .slot .cls{white-space:normal; word-break:keep-all; overflow-wrap:anywhere; min-width:0} /* 先週の宿題の棒：電話の幅では12本が入りきらず、右の4本が切れて押せなかった。 棒は縮められるようにし、狭い幅では名前を縦書きにして、全部を1行に収める。 */ .tb{flex:0 1 auto; min-width:0} @media (max-width:900px){ .tb{flex:1 1 0} .tb span{writing-mode:vertical-rl; text-orientation:upright; max-width:none; max-height:6.2em; font-size:10px; line-height:1; letter-spacing:-.06em; text-overflow:clip} } /* ============================================================ 講師の机 ―― 今日やること・宿題チェック・成績の診断（js/ui-desk.js） Claude outputs/PLAN-講師ページ改修.md 色は既存の札だけを使う（青＝できている／黄＝気にかける）。赤は使わない。 ============================================================ */ /* ---- 今日やること ---- */ .dk-today{display:grid; gap:10px} .dk-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:16px 28px; align-items:center; background:var(--surface); border-radius:var(--r-lg); padding:22px 26px; box-shadow:var(--shadow)} .dk-hero.wait{grid-template-columns:1fr} .dk-big{font-size:56px; line-height:1; letter-spacing:-.03em; color:var(--accent2-text); white-space:nowrap} .dk-big i{font-style:normal; font-size:18px; margin-left:2px; color:var(--text2)} .dk-hero.fin{grid-template-columns:1fr; text-align:center; padding:30px 26px; background:linear-gradient(135deg, var(--accent-soft), var(--surface))} .dk-tick{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-size:18px} .dk-tasks{display:grid; gap:8px} .dk-task{display:grid; grid-template-columns:minmax(120px,1fr) minmax(0,1.5fr) minmax(0,1.4fr) auto; align-items:center; gap:6px 18px; width:100%; text-align:left; border:0; background:var(--surface); border-radius:16px; padding:16px 20px; font:inherit; color:var(--text); cursor:pointer; box-shadow:var(--shadow); transition:transform .08s} .dk-task:active{transform:translateY(1px)} .dk-task:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .dk-tn{font-size:17px; letter-spacing:-.01em} .dk-tl{font-size:14px; color:var(--text2)} .dk-tl em{font-style:normal; margin-left:8px; color:var(--text3)} .dk-tc{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:var(--text2)} .dk-tc b{font-weight:600; color:var(--accent2-text)} .dk-go{font-size:14px; color:var(--accent); white-space:nowrap} .dk-done{background:var(--surface); border-radius:16px; padding:12px 18px} .dk-drow{display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:9px 0; font:inherit; font-size:14px; color:var(--text2); text-align:left; cursor:pointer; border-top:1px solid var(--line)} .dk-done .lbl + .dk-drow{border-top:0} .dk-drow .ok{color:var(--accent)} .dk-drow .tiny{margin-left:auto; white-space:nowrap} @media (max-width:720px){ .dk-hero{grid-template-columns:1fr; padding:18px} .dk-big{font-size:46px} .dk-task{grid-template-columns:minmax(0,1fr) auto; padding:14px 16px} .dk-tn, .dk-tl, .dk-tc{grid-column:1} .dk-go{grid-column:2; grid-row:1 / span 3} } /* 時間割のコマに添える「前回の理解度」（押す部品ではない） */ .dk-und{align-self:flex-start; margin-top:6px; font-size:11px; font-family:var(--sans); padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); white-space:nowrap} .dk-und.y{background:var(--accent2-soft); color:var(--accent2-text)} /* ---- 宿題チェックのページ ---- */ .dk-crumb{margin-top:6px} .dk-check{display:flex; flex-direction:column; gap:12px; min-width:0} .dk-sel{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 22px} .dk-pickc{display:flex; flex-direction:column; gap:6px; min-width:220px; max-width:100%} .dk-pickc select{font:inherit; font-size:16px; padding:11px 14px; border-radius:12px; border:0; background:var(--surface); color:var(--text); box-shadow:var(--shadow); max-width:100%} .dk-seg{display:flex; flex-direction:column; gap:6px; min-width:0; max-width:100%} .dk-segs{display:flex; gap:4px; padding:4px; border-radius:14px; background:var(--sunk); overflow-x:auto; max-width:100%; scrollbar-width:none} .dk-segs::-webkit-scrollbar{display:none} .dk-segb{display:flex; align-items:center; gap:6px; border:0; background:transparent; border-radius:10px; padding:8px 12px; font:inherit; font-size:14px; color:var(--text2); white-space:nowrap; cursor:pointer; min-height:40px} .dk-segb b{font-weight:600; color:var(--text)} .dk-segb span{max-width:9em; overflow:hidden; text-overflow:ellipsis} .dk-segb em{font-style:normal; font-size:12px; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--accent2-soft); color:var(--accent2-text); text-align:center} .dk-segb em.ok{background:transparent; color:var(--accent)} .dk-segb.on{background:var(--surface); color:var(--text); box-shadow:var(--shadow)} .dk-segb:focus-visible{outline:2px solid var(--accent)} .dk-title{font-size:24px; letter-spacing:-.02em; line-height:1.35; margin:4px 0 0; font-weight:400} .dk-title .dk-x{color:var(--text3)} .dk-title small{display:block; font-size:14px; color:var(--text2); letter-spacing:0; margin-top:2px} .dk-stats{display:flex; flex-wrap:wrap; gap:8px} .dk-stats span{font-size:13px; color:var(--text2); background:var(--surface); border-radius:999px; padding:6px 12px} .dk-stats b{font-weight:600; color:var(--text); font-size:15px} .dk-stats .warn{background:var(--accent2-soft); color:var(--accent2-text)} .dk-stats .warn b{color:var(--accent2-text)} .dk-stats .ok b{color:var(--accent)} .dk-complete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; background:var(--accent-soft); color:var(--text); border-radius:16px; padding:14px 18px} .dk-complete b{font-weight:600; color:var(--accent)} .dk-complete .btn{width:auto} .dk-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,46%); gap:18px; align-items:start} .dk-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:10px; align-content:start} .dk-cell{position:relative; display:flex; flex-direction:column; gap:6px; border:2px solid transparent; background:var(--surface); border-radius:14px; padding:6px; font:inherit; color:var(--text); cursor:pointer; text-align:left; box-shadow:var(--shadow); min-width:0} .dk-cell.s-none{box-shadow:none; background:transparent; border:2px dashed var(--line)} .dk-cell.focus, .dk-cell.s-none.focus{border:2px solid var(--accent)} .dk-cell:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .dk-thumb{display:block; aspect-ratio:3 / 4; border-radius:9px; overflow:hidden; background:var(--sunk)} .dk-cell.s-none .dk-thumb{background:transparent} .dk-thumb img{width:100%; height:100%; object-fit:cover; display:block} .dk-cap{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 2px; min-height:24px} .dk-no{font-size:15px} .dk-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--accent2)} .dk-v{display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 4px; border-radius:8px; font-size:14px; font-weight:600; font-family:var(--sans); color:#fff; background:var(--accent)} .dk-v.v3{background:var(--accent2-fill); color:var(--accent2-ink)} .dk-v.v2, .dk-v.v1{background:var(--accent2-text); color:#fff} .dk-dash{font-size:11px; color:var(--text3)} .dk-pers{font-size:10px; font-family:var(--sans); padding:1px 6px; border-radius:999px; background:var(--accent-soft); color:var(--accent); white-space:nowrap} .dk-cell .dk-pers{position:absolute; top:10px; left:10px} .dk-view{position:sticky; top:12px; display:flex; flex-direction:column; gap:10px; background:var(--surface); border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow); max-height:calc(100vh - 24px); overflow:auto; min-width:0} .dk-vempty{padding:60px 20px; text-align:center; color:var(--text3)} .dk-vhead{display:flex; align-items:baseline; justify-content:space-between; gap:10px} .dk-vname{font-size:20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap} .dk-vpage{font-size:13px; color:var(--text2); white-space:nowrap} .dk-vimg{position:relative; display:flex; align-items:center; justify-content:center; background:var(--sunk); border-radius:12px; min-height:300px; height:56vh; overflow:hidden} .dk-vimg img{max-width:100%; max-height:100%; object-fit:contain; display:block} .dk-nophoto{color:var(--text3); padding:20px; text-align:center} .dk-pg{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:56px; border:0; border-radius:12px; background:rgba(23,21,15,.38); color:#fff; font-size:26px; line-height:1; cursor:pointer} .dk-pg.prev{left:8px} .dk-pg.next{right:8px} .dk-pg[disabled]{opacity:.2; cursor:default} .dk-rate{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px} .dk-rb{display:flex; flex-direction:column; align-items:center; gap:2px; border:0; border-radius:12px; padding:8px 2px; background:var(--sunk); color:var(--text); font:inherit; cursor:pointer; min-height:58px; min-width:0} .dk-rb b{font-size:20px; font-weight:600; line-height:1.1} .dk-rb span{font-size:11px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%} .dk-rb.on.v5, .dk-rb.on.v4{background:var(--accent); color:#fff} .dk-rb.on.v3{background:var(--accent2-fill); color:var(--accent2-ink)} .dk-rb.on.v2, .dk-rb.on.v1{background:var(--accent2-text); color:#fff} .dk-rb.on span{color:inherit; opacity:.92} .dk-rb:focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* 375px の電話で「がんば…」「よくで…」と切れていた。言葉を1段小さく、間を詰めて全部出す */ @media (max-width:400px){ .dk-rate{gap:4px} .dk-rb span{font-size:10px; letter-spacing:-.02em} } .dk-vfoot{display:flex; align-items:flex-end; gap:10px} .dk-note{flex:1; display:flex; flex-direction:column; gap:4px; min-width:0} .dk-note input{font:inherit; font-size:14px; border:0; border-radius:10px; background:var(--sunk); padding:9px 12px; color:var(--text)} .dk-note input[disabled]{opacity:.5} .dk-clear{white-space:nowrap} .dk-items{display:flex; flex-wrap:wrap; align-items:center; gap:6px} .dk-items .lbl{flex-basis:100%} .dk-it{font-size:12px; padding:3px 8px; border-radius:8px; background:var(--sunk); color:var(--text2)} .dk-it.p{background:var(--accent-soft); color:var(--accent)} .dk-it em{font-style:normal; margin-left:6px; font-size:10px} .dk-keys{font-size:11px; color:var(--text3); font-family:var(--sans); word-spacing:.2em} .dk-legend{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center} .dk-legend > span{display:inline-flex; align-items:center; gap:6px} @media (max-width:980px){ .dk-body{grid-template-columns:1fr} .dk-view{position:relative; top:0; order:-1; max-height:none} .dk-vimg{height:44vh; min-height:240px} } @media (hover:none){ .dk-keys{display:none} } /* ---- 成績：コースの診断 ---- */ .ik-chips .pick.flag::after{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent2); margin-left:7px; vertical-align:middle} .ik-lead{display:flex; flex-direction:column; gap:4px; margin:6px 0 2px} .ik-lead b{font-weight:600; font-size:17px} .ik-lead span{font-size:13px; color:var(--text2)} .ik-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:14px} .ik-card{position:relative; display:flex; flex-direction:column; gap:10px; text-align:left; border:0; background:var(--surface); border-radius:var(--r-lg); padding:18px 20px 16px; box-shadow:var(--shadow); font:inherit; color:var(--text); cursor:pointer; overflow:hidden; min-width:0} .ik-card.flag::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent2)} .ik-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .ik-top{display:flex; align-items:center; justify-content:space-between; gap:8px} .ik-name{font-size:17px; letter-spacing:-.01em} .ik-flag{font-size:11px; padding:3px 9px; border-radius:999px; background:var(--accent2-soft); color:var(--accent2-text); white-space:nowrap} .ik-big{display:flex; align-items:baseline; gap:4px; flex-wrap:wrap} .ik-n{font-size:44px; line-height:1; letter-spacing:-.03em} .ik-n.b{color:var(--accent)} .ik-n.y{color:var(--accent2-text)} .ik-n.none{color:var(--text3)} .ik-big i{font-style:normal; font-size:16px; color:var(--text2)} .ik-back{margin-top:2px} .ik-chead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px} .ik-chead h3{font-size:22px; letter-spacing:-.02em; margin:0 0 4px; font-weight:400} .ik-chead .btn{width:auto} .ik-cv{font-size:13px; text-align:center} .ik-cb{position:relative; flex:1; display:flex; align-items:flex-end; background:var(--sunk); border-radius:10px; overflow:hidden} .ik-cb i{display:block; width:100%; background:var(--accent); border-radius:10px 10px 0 0} .ik-cb.y i{background:var(--accent2)} .ik-cb.none i{background:transparent} .ik-cl{font-size:11px; color:var(--text2); text-align:center; line-height:1.3; min-height:2.6em} .ik-cl span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text3)} .ik-hh, .ik-lh, .ik-uh{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px} .ik-lh .btn, .ik-uh .btn{width:auto} .ik-thr{display:flex; align-items:center; gap:6px} .ik-thr .pick{min-height:34px; padding:4px 12px; margin:0} .ik-hbars{display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:6px; align-items:end; height:150px; margin-top:14px} .ik-hb{display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:3px; min-width:0} .ik-hb span{font-size:12px; text-align:center; min-height:16px} .ik-hb i{display:block; max-height:calc(100% - 20px); background:var(--accent-soft); border-radius:6px 6px 0 0} .ik-hb.lo i{background:var(--accent2)} .ik-hx{position:relative; display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:6px; font-size:10px; color:var(--text3); margin-top:4px} .ik-hx span:last-child{position:absolute; right:0; top:0} .ik-hsum{margin:12px 0 0; font-size:14px} .ik-hsum b{color:var(--accent2-text); font-size:18px} .ik-lrow{display:grid; grid-template-columns:minmax(90px,auto) 60px minmax(0,1fr) auto auto; align-items:center; gap:8px 14px; padding:10px 0; border-top:1px solid var(--line)} .ik-lname{border:0; background:none; padding:6px 0; font:inherit; font-size:15px; color:var(--accent); cursor:pointer; text-align:left; white-space:nowrap} .ik-lavg{font-size:18px} .ik-lavg.y{color:var(--accent2-text)} .ik-lweak{display:flex; flex-wrap:wrap; gap:6px; min-width:0} .ik-wchip{border:0; border-radius:999px; background:var(--accent2-soft); color:var(--accent2-text); font:inherit; font-size:12px; padding:6px 12px; cursor:pointer; min-height:34px} .ik-wchip b{font-weight:600} .ik-rules{font-size:11px; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); white-space:nowrap} @media (max-width:720px){ .ik-lrow{grid-template-columns:minmax(0,1fr) auto} .ik-lweak{grid-column:1 / -1} } .ik-heatwrap{overflow-x:auto; margin-top:10px} .ik-heat{border-collapse:separate; border-spacing:3px; min-width:100%; font-size:13px} .ik-heat th{font-weight:400; color:var(--text2); text-align:left; white-space:nowrap} .ik-heat thead th{font-size:11px; vertical-align:bottom} .ik-hn{border:0; background:none; font:inherit; color:var(--text2); cursor:pointer; text-align:left; padding:2px} .ik-hn span{display:block; font-size:10px; color:var(--text3); max-width:7em; overflow:hidden; text-overflow:ellipsis} .ik-heat tbody th{position:sticky; left:0; background:var(--surface); z-index:1; padding-right:8px} .ik-heat td{text-align:center; border-radius:8px; min-width:52px; height:34px; font-family:var(--sans)} .ik-heat td.b{background:var(--accent-soft); color:var(--accent)} .ik-heat td.y{background:var(--accent2-soft); color:var(--accent2-text); padding:0} .ik-heat td.y button{width:100%; height:100%; min-height:34px; border:0; background:none; font:inherit; font-weight:600; color:inherit; cursor:pointer; border-radius:8px} .ik-heat td.none{color:var(--text3)} .ik-heat td.avg, .ik-heat td.avg.b, .ik-heat td.avg.y, .ik-heat td.avg.none{background:transparent; font-weight:600} .ik-heat td.sub{color:var(--text2)} .ik-dotp{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-left:4px; vertical-align:middle} .ik-urow{display:grid; grid-template-columns:minmax(80px,auto) minmax(80px,1fr) 52px minmax(0,1.6fr) 52px auto; align-items:center; gap:8px 12px; padding:8px 0; border-top:1px solid var(--line)} .ik-urow .btn{width:auto} .ik-ubar{height:8px; border-radius:999px; background:var(--sunk); overflow:hidden} .ik-ubar i{display:block; height:100%; background:var(--accent)} .ik-ubar.y i{background:var(--accent2)} .ik-uv.y{color:var(--accent2-text)} .ik-uv.b{color:var(--accent)} @media (max-width:760px){ .ik-urow{grid-template-columns:minmax(0,1fr) auto} .ik-ubar, .ik-ev, .ik-us2{grid-column:1 / -1} } .ik-trow{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0; overflow-wrap:anywhere; border-top:1px solid var(--line); font-size:14px} .lnk.warn, p.warn{color:var(--accent2-text)} /* ---- 成績：重ねて出す紙 ---- */ @media (min-width:641px){ .sheet.wide.ik-sheet{width:min(880px, 94vw)} } .ik-sheet .sh-body{display:flex; flex-direction:column; gap:12px} .ik-sheet textarea{width:100%; font-size:14px; font-family:var(--mono); border:0; border-radius:12px; background:var(--sunk); padding:10px 12px; color:var(--text); resize:vertical} .ik-sg{background:var(--sunk); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:6px} .ik-sg.done{background:var(--accent-soft)} .ik-sgk{font-size:11px; color:var(--accent); font-family:var(--sans); letter-spacing:.06em} .ik-sgt{font-size:16px; line-height:1.5} .ik-sgs{font-size:13px; color:var(--text2)} .ik-sgw{color:var(--text3)} .ik-sga{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:6px} .ik-sga .btn{width:auto} .ik-ok{color:var(--accent); font-size:14px} .ik-sgfoot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px} .ik-strend{display:grid; grid-template-columns:repeat(auto-fill, minmax(42px,1fr)); gap:6px; height:150px; align-items:stretch; margin:8px 0} .ik-st{display:flex; flex-direction:column; height:100%; gap:3px; min-width:0} .ik-mean{position:absolute; left:-2px; right:-2px; height:0; border-top:2px solid var(--text2); pointer-events:none} .ik-months{display:flex; flex-wrap:wrap; align-items:center; gap:8px} .ik-mo{font-size:12px; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent)} .ik-mo.y{background:var(--accent2-soft); color:var(--accent2-text)} .ik-evwrap{overflow-x:auto} .ik-ev2{width:100%; border-collapse:collapse; font-size:13px} .ik-ev2 th{font-weight:400; color:var(--text3); text-align:left; padding:6px 8px; font-size:11px} .ik-ev2 td{padding:8px; border-top:1px solid var(--line); white-space:nowrap} .ik-ev2 td.y{color:var(--accent2-text)} .ik-ev2 td.b{color:var(--accent)} .ik-rules2, .ik-next{background:var(--sunk); border-radius:14px; padding:12px 14px} .ik-rules2 .btn{width:auto} .ik-rrow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line)} .ik-rrow > span{display:flex; flex-direction:column; gap:2px} .ik-ended{margin-top:6px; font-size:13px; color:var(--text2)} .ik-nit{font-size:14px; padding:7px 0; border-top:1px solid var(--line)} .ik-next .lbl + .ik-nit{border-top:0} .ik-nit.p{color:var(--accent)} .ik-nit em{font-style:normal; font-size:11px; margin-left:8px; padding:1px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent)} .ik-nit em.g{background:var(--surface2); color:var(--text2)} .ik-step{display:flex; flex-direction:column; gap:8px} .ik-sl{font-size:14px; color:var(--text2)} .ik-sl b{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; margin-right:6px; font-weight:600} .ik-opts{display:flex; flex-wrap:wrap; gap:8px} .ik-opt{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:10px 14px; font:inherit; font-size:14px; color:var(--text); cursor:pointer; text-align:left; min-height:44px} .ik-opt.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)} .ik-opt em{font-style:normal; font-size:11px; margin-left:6px; color:var(--text3)} .ik-opt.add{border-style:dashed} .ik-cols{display:flex; flex-direction:column} .ik-colrow{display:grid; grid-template-columns:minmax(100px,160px) 90px minmax(0,1fr); gap:10px 14px; align-items:start; padding:12px 0; border-top:1px solid var(--line)} .ik-coln{display:flex; flex-direction:column; gap:2px} .ik-max{display:flex; flex-direction:column; gap:4px} .ik-max input{font:inherit; width:100%; border:0; border-radius:10px; background:var(--sunk); padding:8px 10px; color:var(--text)} .ik-les{display:flex; flex-wrap:wrap; gap:6px; align-items:center} .ik-les > .tiny{flex-basis:100%} .ik-lchip{border:1px solid var(--line); background:var(--surface); border-radius:999px; font:inherit; font-size:12px; padding:6px 10px; cursor:pointer; color:var(--text2); min-height:32px} .ik-lchip.on{background:var(--accent); border-color:var(--accent); color:#fff} @media (max-width:640px){ .ik-colrow{grid-template-columns:minmax(0,1fr) 90px} .ik-les{grid-column:1 / -1} } /* 宿題チェックの見出しは、空白と記号でだけ折り返す（「第6／回」と割れていた）。入らない1語だけ最後に折る */ .dk-title{word-break:keep-all; overflow-wrap:anywhere} /* 成績のコースの札：狭い画面では1行で横に送る（13コースが6段に折り返し、中身が画面の下へ押し出されていた） */ @media (max-width:720px){ .ik-chips{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin-right:-16px; scrollbar-width:none} .ik-chips::-webkit-scrollbar{display:none} .ik-chips .pick{flex:0 0 auto; white-space:nowrap} } .ik-bulk{display:flex; flex-direction:column; align-items:flex-end; gap:4px} /* 見出しの注記が、1人目の区切り線に貼りついていた */ .ik-lh{margin-bottom:10px} @media (max-width:720px){ .ik-bulk{align-items:stretch; width:100%} } /* ---- コースのページ ---- */ /* 2つの図の横並びは、画面ではなく本体の幅で決める（1000pxの画面では本体が600px。 横に並べると列が36pxになり、単元名が切れて押しにくかった） */ .ik-cv{grid-row:1; font-size:13px; line-height:18px; color:var(--text2)} .ik-cb{grid-row:2; grid-column:1; width:100%; max-width:88px; align-self:stretch; border-radius:10px 10px 0 0} .ik-cb i{border-radius:8px 8px 0 0} .ik-cl{grid-row:3; width:100%; min-height:0; font-size:11px; line-height:15px; color:var(--text3); text-align:center} .ik-cl span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text3)} /* ==== lane:grades end ==== */ /* ==== lane:timetable start ==== */ /* ============================================================ Timetable ―― どの幅でも、同じ順番のコマが1本の線にそろう 前は曜日ごとに別々の縦の束を並べていた。束の中の札は中身の長さで 高さが決まるので、長いコース名が折り返した曜日だけ下へずれ、 幅を変えるたびに段がずれて見えた。 いまは**週をひとつの格子**にする。曜日の束（.daycol）は subgrid で 外の格子の線をそのまま使う。だから月曜の2コマ目と木曜の2コマ目は 必ず同じ線に乗る。段の高さは 1fr ―― いちばん背の高い札に全部がそろう。 段（または列）の数は、1日に並ぶコマの最大数（--n。weekCard が入れる）。 向きは入れ物（bento）の幅で3つだけ。 〜519px … 曜日を左に置き、札を1本に積む（電話） 520〜999 … 曜日を行にして、その日のコマを横に並べる 1000px〜 … 曜日を列にして、コマを縦に並べる 札の中の組み方は、**札そのものの幅**で決める（250px 以上なら時刻を左の柱に出す）。 教科の1文字（算・国）はやめた。クラスと教科を2行に分けて書けば、 名前を読むだけで教科が分かる。色で教科を塗り分けることもしない。 ============================================================ */ /* --- 格子：既定は電話（曜日の柱 ＋ 札の1列） --- */ .week{display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:none; grid-auto-rows:auto; column-gap:10px; row-gap:18px; margin:4px 0 8px} .week .daycol, .week .daycol.today{display:grid; grid-column:1 / -1; grid-row:auto; grid-template-columns:subgrid; grid-template-rows:none; grid-auto-rows:auto; row-gap:8px; column-gap:normal; overflow:visible; margin:0; padding:0; background:none; border-radius:0; min-width:0} /* --- 曜日の札 --- */ /* 柱の形（電話・行）では「Mon」の下に日を置く。今日だけ黄の面にする。 */ .week .dayhead, .week .daycol.today .dayhead{grid-column:1; grid-row:1; align-self:start; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; min-width:0; min-height:0; margin:0; padding:7px 0 8px; border-radius:14px; background:none; box-sizing:border-box} .week .dayhead .d{font-family:var(--sans); font-size:11.5px; line-height:16px; letter-spacing:.04em; color:var(--text3); font-weight:400} .week .dayhead .dt{font-size:20px; line-height:24px; letter-spacing:-.02em; color:var(--text); font-weight:300} .week .daycol.today .dayhead{background:var(--accent2-fill)} .week .daycol.today .dayhead .d, .week .daycol.today .dayhead .dt{color:var(--accent2-ink); opacity:1} .week .daycol.today .dayhead .d{font-weight:500} /* 授業の無い日。札の1行目（時刻の行）と同じ高さに置く */ .week .dayempty{grid-column:2; align-self:start; margin:0; padding:12px 14px; font-family:var(--sans); font-size:12px; line-height:20px; color:var(--text3)} /* --- コマの札 --- */ .week .slot{grid-column:2; width:auto; min-width:0; max-width:none; flex:none; container:slot / inline-size; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:0; padding:13px 14px 14px; border-radius:18px; border:0; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; transition:transform .08s, background .15s} .week .slot:active{transform:translateY(1px)} .week .slot:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:18px} /* 札の中（細い札）： 16:40 前回 58% 中3 土特（RD特） 数学 第7回 平方根 */ .week .slot .sl-in{flex:1 0 auto; display:grid; min-width:0; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(20px,auto) auto 1fr; grid-template-areas:"tm und" "cls cls" "les les"; column-gap:8px; align-items:start} .week .slot .tm{grid-area:tm; align-self:center; margin:0; font-size:13px; line-height:20px; color:var(--text2); white-space:nowrap} .week .slot .dk-und{grid-area:und; align-self:center; justify-self:end; margin:0; font-size:11px; line-height:16px; padding:2px 8px} .week .slot .cls{grid-area:cls; display:flex; flex-direction:column; min-width:0; margin:8px 0 0; padding:0; white-space:normal} .week .slot .cn{font-size:17px; line-height:1.3; letter-spacing:-.01em; color:var(--text); word-break:keep-all; overflow-wrap:anywhere; font-feature-settings:"palt" 1} .week .slot .sj{font-size:13px; line-height:1.45; color:var(--text2)} .week .slot .les{grid-area:les; align-self:start; min-width:0; margin:8px 0 0; font-size:12px; line-height:17px; color:var(--text2); font-feature-settings:"palt" 1; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden} .week .slot .les .no{font-size:inherit; font-family:inherit; margin:0; color:var(--accent)} .week .slot.s-missing .les .no{color:var(--warn-fg)} /* 札の中（広い札）：時刻を左の柱に出し、クラスと教科を1行に並べる 16:40 中3 土特（RD特） 数学 第7回 平方根 前回 58% 幅は札の内側（余白を除く）で測る。230px ＝ 外形でおよそ 258px。 */ @container slot (min-width:230px){ .week .slot .sl-in{grid-template-columns:40px minmax(0,1fr) auto; grid-template-rows:auto 1fr; grid-template-areas:"tm cls cls" "tm les und"; column-gap:10px; row-gap:3px} .week .slot .tm{align-self:start; font-size:15px; line-height:23px} .week .slot .cls{flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:7px; margin:0} .week .slot .cn{font-size:16px; line-height:23px} .week .slot .sj{line-height:23px} .week .slot .les{align-self:center; margin:0; -webkit-line-clamp:1} .week .slot .dk-und{align-self:center} } /* --- 中くらい：曜日を行にする --- */ @container bento (min-width:520px){ /* 行の高さは weekCard が --rows に入れる（コマのある日 1fr、無い日 auto） */ .week{grid-template-columns:48px repeat(var(--n), minmax(0,1fr)); grid-template-rows:var(--rows, repeat(6, 1fr)); grid-auto-rows:auto; row-gap:10px} .week .slot{grid-column:auto} .week .dayempty{grid-column:span var(--n)} } /* --- 広い：曜日を列にする --- */ @container bento (min-width:1000px){ .week{grid-template-columns:repeat(6, minmax(0,1fr)); grid-template-rows:auto repeat(var(--n), 1fr); grid-auto-rows:auto; column-gap:12px; row-gap:10px} .week .daycol, .week .daycol.today{grid-column:auto; grid-row:1 / -1; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; row-gap:normal} .week .dayhead, .week .daycol.today .dayhead{grid-column:1; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:6px; align-self:stretch; padding:6px 14px; border-radius:12px} .week .dayhead .d{font-size:13px; line-height:20px} .week .dayhead .dt{font-size:13px; line-height:20px; letter-spacing:0; color:var(--text2)} .week .slot, .week .dayempty{grid-column:1} } /* ==== lane:timetable end ==== */ /* ==== lane:progress start ==== */ /* ============================================================ 進度タブ（ui-teacher.js viewProgress） 成績タブと同じ組み方：コースの札の列 → すべて（札の一覧）／コース（掘り下げ）。 横棒は使わない。差は数で読む。面は線ではなく地の差で分ける。 ============================================================ */ /* 電話では下のタブに最後の札が隠れる。保存の帯も乗るので、そのぶん空ける */ @media (max-width:1023px){ body.screen-progress main{padding-bottom:calc(128px + env(safe-area-inset-bottom))} } /* ---- コースの札の列（成績タブと同じ） ---- */ .pg-chips .pick.flag::after{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent2); margin-left:7px; vertical-align:middle} @media (max-width:720px){ .pg-chips{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-right:-20px; padding:0 20px 4px 0} .pg-chips::-webkit-scrollbar{display:none} .pg-chips .pick{flex:0 0 auto; white-space:nowrap} } .pg-lead{display:flex; flex-direction:column; gap:6px; margin:6px 0 2px} .pg-lead b{font-weight:600; font-size:17px} .pg-lead span{display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:13px; color:var(--text2)} .pg-tag{display:inline-flex; align-items:center; font-style:normal; font-family:var(--sans); font-size:11px; line-height:1.4; padding:3px 9px; border-radius:999px; background:var(--sunk); color:var(--text2); white-space:nowrap} .pg-tag.y{background:var(--accent2-soft); color:var(--accent2-text)} .pg-off{color:var(--text3)} /* ---- すべて：コースの札 ---- */ .pg-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:14px} .pg-card{position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; text-align:left; border:0; padding:18px 20px 16px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); font:inherit; color:var(--text); cursor:pointer; overflow:hidden} .pg-card.flag::before, .pg-pace.flag::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accent2)} .pg-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .pg-top{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px} .pg-name{font-size:17px; letter-spacing:-.01em; line-height:1.35} /* ---- コース ---- */ .pg-back{margin:-2px 0 -12px} .pg-back .lnk{min-height:44px; padding:10px 2px; font-size:14px} .pg-chead h3{margin:0; font-size:24px; font-weight:400; letter-spacing:-.02em; line-height:1.3} /* 1列：差 → 毎日テスト → 教材。2列：左に差と教材、右に毎日テスト。3列：横に3枚 */ .pg-body{display:grid; gap:14px; align-items:start; grid-template-columns:minmax(0,1fr)} @container bento (min-width:700px){ .pg-body{grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:auto 1fr} .pg-pace{grid-column:1; grid-row:1} .pg-books{grid-column:1; grid-row:2} .pg-daily{grid-column:2; grid-row:1 / span 2} } @container bento (min-width:1280px){ .pg-body{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr); grid-template-rows:auto} .pg-pace{grid-column:1; grid-row:1} .pg-daily{grid-column:2; grid-row:1} .pg-books{grid-column:3; grid-row:1} } .pg-panel{position:relative; min-width:0; padding:16px 22px 20px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; container-type:inline-size} .pg-ph{display:flex; align-items:center; gap:8px; min-height:44px; margin-bottom:4px} .pg-ph h4{flex:1; min-width:0; margin:0; font-size:16px; font-weight:400; letter-spacing:-.01em; color:var(--text)} .pg-ul{flex:none; font-family:var(--sans); font-size:11px; color:var(--text3); margin-right:2px} .pg-src{margin:14px 0 0; font-size:11px; color:var(--text3); line-height:1.5} .pg-wait{margin:4px 0 0; font-size:13px; color:var(--text3)} .pg-none{padding:14px 16px; border-radius:14px; background:var(--bg); color:var(--text3); font-size:13px; text-align:center} /* 使う／使わない。iOS と同じスイッチ。字は状態をそのまま言う */ .pg-sw{display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-right:-6px; padding:0 6px 0 10px; border:0; border-radius:12px; background:none; font:inherit; font-family:var(--sans); font-size:13px; color:var(--text3); cursor:pointer} .pg-sw i{position:relative; flex:none; width:48px; height:28px; border-radius:99px; background:var(--sunk); transition:background .2s} .pg-sw i::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.24); transition:transform .2s} .pg-sw[aria-checked="true"]{color:var(--accent)} .pg-sw[aria-checked="true"] i{background:var(--accent)} .pg-sw[aria-checked="true"] i::after{transform:translateX(20px)} .pg-sw:focus-visible{outline:2px solid var(--accent); outline-offset:2px} @media (prefers-reduced-motion:reduce){ .pg-sw i, .pg-sw i::after{transition:none} } /* どこに効く設定か。見出しのすぐ下に、地の差で置く */ .pg-scope{display:inline-block; margin:0; padding:5px 10px; border-radius:10px; background:var(--bg); font-size:12px; color:var(--text2); line-height:1.5} .pg-sl{margin:18px 0 8px; font-family:var(--sans); font-size:12px; color:var(--text3)} .pg-sets{display:grid; gap:6px} .pg-set{display:grid; grid-template-columns:7em minmax(0,1fr); gap:2px 12px; align-items:baseline; padding:11px 14px; border-radius:14px; background:var(--accent-soft)} .pg-set.k-weak{background:var(--accent2-soft)} .pg-st{font-family:var(--sans); font-size:12px; color:var(--accent)} .pg-set.k-weak .pg-st{color:var(--accent2-text)} .pg-sb{min-width:0; font-size:14px; color:var(--text); line-height:1.5} .pg-sb .num{font-size:17px; margin-right:1px} @container (max-width:380px){ .pg-set{grid-template-columns:minmax(0,1fr)} } .pg-steps{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:6px 12px} .pg-step{display:flex; align-items:center; gap:2px; min-height:52px; padding:4px 4px 4px 14px; border-radius:14px; background:var(--bg)} .pg-stl{flex:1; min-width:0; font-size:14px; color:var(--text)} .pg-stp{flex:none; width:44px; height:44px; border:0; border-radius:50%; background:none; font:inherit; font-size:20px; line-height:1; color:var(--accent); cursor:pointer} .pg-stp:not([disabled]):active{background:var(--surface)} .pg-stp[disabled]{color:var(--text3); opacity:.45; cursor:default} .pg-sv{display:inline-flex; align-items:baseline; justify-content:center; gap:2px; min-width:3.2em} .pg-sv .num{font-size:22px; line-height:1; color:var(--text)} .pg-sv i{font-style:normal; font-size:11px; color:var(--text3)} .pg-cap{margin:8px 0 0; font-size:12px; color:var(--accent2-text)} .pg-packs{margin-top:0; gap:6px} .pg-packs .pick{font-size:13px; padding:8px 14px} .pg-packs .pick[disabled]{cursor:default; transform:none} .pg-more{display:inline-flex; align-items:center; min-height:44px; margin-top:4px; padding:8px 2px; font-size:13px} /* ---- 使用教材 ---- */ .pg-brows{display:grid; gap:2px} .pg-brow{display:flex; align-items:center; gap:8px 14px; min-height:58px; padding:6px 0} .pg-bn{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px} .pg-bn > span:first-child{font-size:15px; line-height:1.4; color:var(--text)} .pg-bm{font-family:var(--sans); font-size:11px; color:var(--text3)} .pg-brow.off .pg-bn > span:first-child{color:var(--text3)} .pg-brow.other{opacity:.5} /* 3つから1つを選ぶ切り替え。選んでいる段は白く浮く */ .pg-seg{flex:none; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; padding:3px; border-radius:12px; background:var(--sunk)} .pg-seg button{position:relative; min-height:38px; padding:0 12px; border:0; border-radius:9px; background:none; font:inherit; font-family:var(--sans); font-size:13px; color:var(--text2); white-space:nowrap; cursor:pointer} .pg-seg button::after{content:""; position:absolute; left:0; right:0; top:-3px; bottom:-3px} .pg-seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); cursor:default; box-shadow:0 1px 2px rgba(0,0,0,.1)} .pg-seg button.g[aria-pressed="true"]{color:var(--accent)} .pg-seg button.n[aria-pressed="true"]{color:var(--text3)} .pg-seg button:focus-visible{outline:2px solid var(--accent); outline-offset:1px} @media (hover:hover){ .pg-seg button[aria-pressed="false"]:hover{color:var(--text)} } @container (max-width:460px){ .pg-brow{flex-direction:column; align-items:stretch; gap:8px; padding:10px 0} .pg-brow .pg-seg{display:grid} } /* ---- 組み分けテスト対策 ---- */ .pg-prep{padding:18px 22px 20px; border-radius:var(--r-lg); background:linear-gradient(160deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 40%, var(--bg)) 100%)} .pg-prep-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px} .pg-prep-when{display:flex; flex-direction:column; gap:2px; min-width:0} .pg-prep-l{font-family:var(--sans); font-size:12px; color:var(--accent)} .pg-prep-n{display:flex; align-items:baseline; gap:4px} .pg-prep-n .num{font-size:44px; line-height:1.05; letter-spacing:-.03em; color:var(--accent)} .pg-prep-n i{font-style:normal; font-size:15px; color:var(--text2)} .pg-prep-s{font-size:12px; color:var(--text2)} .pg-prep-tier{display:flex; align-items:center; gap:10px} .pg-prows{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:8px; margin-top:16px} .pg-prow{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"n go" "q go"; align-items:center; gap:0 12px; min-height:58px; margin:0; padding:10px 14px; border:0; border-radius:14px; background:var(--surface); text-align:left; font:inherit; color:var(--text); cursor:pointer} .pg-pn{grid-area:n; font-size:15px; line-height:1.35} .pg-pq{grid-area:q; font-family:var(--sans); font-size:12px; color:var(--text2)} .pg-pgo{grid-area:go; font-family:var(--sans); font-size:13px; color:var(--accent); white-space:nowrap} .pg-prow.me .pg-pn{color:var(--accent)} .pg-prow:active{background:color-mix(in srgb, var(--accent) 10%, var(--surface))} /* ---- 保存の帯。変更があるときだけ。画面の下に貼りつく ---- */ .pg-save{position:sticky; bottom:calc(60px + env(safe-area-inset-bottom)); z-index:15; display:flex; align-items:center; gap:12px; margin-top:8px; padding:10px 10px 10px 16px; border-radius:18px; background:var(--accent2-soft); box-shadow:0 14px 34px -16px rgba(0,0,0,.4)} @media (min-width:1024px){ .pg-save{bottom:20px} } .pg-sdot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent2)} .pg-stext{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.45} .pg-stext b{font-weight:600; font-size:14px; color:var(--accent2-text)} .pg-stext span{font-size:12px; color:var(--text)} .pg-save #pSave{flex:none; width:auto; min-height:44px; padding:10px 22px; border-radius:14px; font-size:14px; background:var(--accent); color:#fff} .pg-save #pSave[disabled]{opacity:.6} /* ---- 暗いテーマ ---- */ :root[data-theme="dark"] .pg-seg button[aria-pressed="true"]{background:var(--surface2); box-shadow:none} :root[data-theme="dark"] .pg-sw i{background:var(--surface2)} :root[data-theme="dark"] .pg-save{box-shadow:0 14px 34px -16px rgba(0,0,0,.9)} /* ==== lane:progress end ==== */ /* ==== lane:student start ==== */ /* ホームの上の4枚（.w-home）と、宿題のタブの上の段。 **1枚の画のように。** 光は左上（黄）から右下（青）へ流れる。いちばん色が強いのは 「今やるならこれ」だけで、ほかの3枚は同じ光の続き（白い面に、同じ向きのごく薄い黄と青）。 濃い青の面は置かない ―― 明るい面の中に1枚だけ濃いと、そこで喧嘩する。 */ .w-home > .w{border-radius:22px; text-align:left; align-items:stretch; justify-content:space-between; padding:18px 20px} .w-home > .w .lbl, .hw-wk .lbl{font-size:11px; letter-spacing:.06em; color:var(--accent2-text)} /* 今週解いた問題 ―― 明るい面に。自分の棒だけ黄 */ .w-home .rk.w-marble{color:var(--text); background:radial-gradient(90% 150% at 0% 0%, rgba(249,185,0,.20) 0%, rgba(249,185,0,0) 52%), radial-gradient(110% 160% at 100% 100%, rgba(0,91,172,.18) 0%, rgba(0,91,172,0) 62%), var(--surface)} .w-home .rk .rk-head{font-size:15px; color:var(--text); margin-top:6px; line-height:1.2} .w-home .rk .rk-head .num{font-size:40px; font-weight:300; letter-spacing:-.035em; margin:0 3px} .w-home .rk .rk-head small{font-size:12px; color:var(--text2)} .w-home .rk .rk-goal{color:var(--text2)} .w-home .rk .rk-row{color:var(--text2)} .w-home .rk .rk-row.mine{color:var(--text)} .w-home .rk .rk-bar{background:color-mix(in srgb, var(--accent) 10%, transparent)} .w-home .rk .rk-bar i{background:color-mix(in srgb, var(--accent) 40%, var(--surface))} .w-home .rk .rk-row.mine .rk-bar i{background:var(--accent2)} .w-home .rk .rk-v{color:var(--text)} .w-home .rk .rk-foot{color:var(--text3)} /* 続けた日 ―― 右下に青の光。数と7日の棒を横に */ .w-home .w-run{display:flex; flex-direction:column; gap:10px; background:radial-gradient(140% 120% at 100% 100%, rgba(0,91,172,.16) 0%, rgba(0,91,172,0) 62%), var(--surface)} .w-run .run-body{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap} .w-run .wl{margin:0; font-size:14px; color:var(--text2)} .w-run .wl .num{font-size:40px; font-weight:300; letter-spacing:-.035em; color:var(--text); margin-right:3px} .w-run .wbars{margin:0; gap:7px} .w-run .ws{font-size:12px; color:var(--accent); opacity:1} /* 今週の宿題の札（ホームと宿題のタブで同じ中身） */ .hw-wk{display:flex; flex-direction:column; justify-content:space-between; align-items:stretch; gap:14px; min-width:0; padding:18px 20px; border:0; border-radius:22px; text-align:left; font:inherit; color:var(--text); background:radial-gradient(120% 120% at 0% 0%, rgba(249,185,0,.20) 0%, rgba(249,185,0,0) 58%), radial-gradient(130% 130% at 100% 100%, rgba(0,91,172,.14) 0%, rgba(0,91,172,0) 64%), var(--surface)} button.hw-wk{cursor:pointer} .hw-wk-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px} .hw-wk-end{font-size:13px; color:var(--text2); white-space:nowrap} .hw-wk-big{display:flex; align-items:baseline; gap:4px; font-size:15px; color:var(--text2)} .hw-wk-big .num{font-size:52px; font-weight:300; line-height:1; letter-spacing:-.04em; color:var(--text); margin:0 2px} .hw-wk-big.fin{align-items:center; gap:10px; font-size:24px; color:var(--text)} .hw-wk-ck{position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:var(--accent2)} .hw-wk-ck::after{content:""; position:absolute; left:11px; top:7px; width:8px; height:14px; border:solid var(--accent2-ink); border-width:0 2.5px 2.5px 0; transform:rotate(45deg)} .hw-wk-low{display:flex; flex-direction:column; gap:8px} /* 今週の分を1件1コマ。端の丸がゴール ―― 埋まれば「今週おわり」 */ .hw-wk-track{display:flex; align-items:center; gap:10px} .hw-wk-segs{flex:1; display:flex; align-items:center; gap:4px; min-width:0} .hw-wk-segs i{flex:1 1 0; min-width:4px; height:8px; border-radius:99px; background:color-mix(in srgb, var(--accent) 14%, transparent)} .hw-wk-segs i.on{background:var(--accent)} .hw-wk-segs::after{content:""; flex:none; width:12px; height:12px; margin-left:2px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--accent2)} .hw-wk.fin .hw-wk-segs i.on{background:var(--accent2)} .hw-wk.fin .hw-wk-segs::after{background:var(--accent2); box-shadow:none} .hw-wk-track .num{font-size:13px; color:var(--text2); white-space:nowrap} .hw-wk-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; font-size:12.5px; color:var(--text2)} button.hw-wk .hw-wk-foot span:last-child{color:var(--accent)} /* 期限の札 ―― 形は1つ。ことば（あと4日）を太く、日付を添える。色は3段（今日まで・今週・来週） */ .hw-due{display:inline-flex; align-items:baseline; gap:6px; padding:3px 10px 3px 9px; border-radius:99px; font-family:var(--sans); white-space:nowrap; line-height:1.45} .hw-due b{font-size:13.5px; font-weight:500} .hw-due .num{font-size:12px; opacity:.8} .hw-due.now{background:var(--accent2-soft); color:var(--accent2-text)} .hw-due.week{background:var(--accent-soft); color:var(--accent)} .hw-due.later{background:var(--sunk); color:var(--text2)} /* 宿題1件 ―― 上の段に題名、下の段に期限・紙かアプリ・押すもの */ .hw-row{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t t" "m a"; align-items:center; gap:6px 12px; padding:12px 0} .hw-row > .hw-lines{grid-area:t; margin:0} .hw-row > .hw-meta{grid-area:m; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px} .hw-row > .hw-act{grid-area:a; justify-self:end} .hw-row > .hw-sub{grid-column:1 / -1} .hw-sec{container:hwsec / inline-size} @container hwsec (max-width:300px){ .hw-row{grid-template-columns:minmax(0,1fr); grid-template-areas:"t" "m" "a"} .hw-row > .hw-act{justify-self:start} } /* 教科の弁当 ―― 並びは枚数だけで決まる（6本の格子）。 1枚＝行いっぱい／2枚＝半分ずつ／3枚＝3つ並び／4枚＝2＋2／5枚＝3＋2。 同じ行の札は同じ高さ。特定の教科だけを大きくしない。 */ .hw-secs{align-items:stretch} @container bento (min-width:620px){ .hw-secs{grid-template-columns:repeat(6, minmax(0,1fr))} .hw-secs > .hw-sec:nth-child(n){grid-column:span 3} .hw-secs > .hw-sec:only-child{grid-column:1 / -1} .hw-secs > .hw-sec:first-child:nth-last-child(3), .hw-secs > .hw-sec:first-child:nth-last-child(3) ~ .hw-sec{grid-column:span 2} .hw-secs > .hw-sec:first-child:nth-last-child(5), .hw-secs > .hw-sec:first-child:nth-last-child(5) ~ .hw-sec:nth-child(-n+3){grid-column:span 2} } /* 今週の分が残っているあいだの来週の分は、一段控えめに（押せることは変えない） */ .hw-secs.later .hw-sec{background:color-mix(in srgb, var(--surface) 60%, transparent)} .hw-secs.later .hw-go{background:var(--accent-soft); color:var(--accent)} /* ==== lane:student end ==== */ /* ==== lane:today start ==== */ /* 講師の Today ―― 横に長い帯をやめ、札の格子にする。 広いとき：左に輪の札（今日のチェックの進み）、右にチェックの札の格子、下に今日おわった。 図は輪の1つだけ。面はごく薄い黄（左上）と青（右下）。 */ .dk-today{display:grid; gap:12px; grid-template-columns:minmax(0,1fr); margin-top:6px} @container bento (min-width:840px){ .dk-today{grid-template-columns:minmax(380px,1.1fr) minmax(0,2fr); align-items:stretch} .dk-today > .dk-hero{grid-column:1; grid-row:1} .dk-today > .dk-tasks, .dk-today.is-fin > .dk-done{grid-column:2; grid-row:1} .dk-today > .dk-done{grid-column:1 / -1} .dk-today > .dk-hero:only-child{grid-column:1 / -1} } .dk-today .dk-hero, .dk-today .dk-hero.fin{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px 20px; padding:20px 22px; border-radius:22px; text-align:left; box-shadow:none; background:radial-gradient(120% 110% at 0% 0%, rgba(249,185,0,.16) 0%, rgba(249,185,0,0) 55%), radial-gradient(120% 120% at 100% 100%, rgba(0,91,172,.14) 0%, rgba(0,91,172,0) 62%), var(--surface)} .dk-today .dk-hero.wait{grid-template-columns:1fr} @container bento (min-width:840px){ .dk-today .dk-hero, .dk-today .dk-hero.fin{grid-template-columns:auto minmax(0,1fr); justify-items:start; align-content:center; text-align:left} } .dk-ringwrap{position:relative; width:104px; height:104px; flex:none} .dk-ring{display:block; width:100%; height:100%} .dk-ring circle{fill:none; stroke-width:11} .dk-ring .trk{stroke:color-mix(in srgb, var(--accent) 12%, transparent)} .dk-ring .val{stroke:var(--accent); stroke-linecap:round} .dk-hero.fin .dk-ring .val{stroke:var(--accent2)} .dk-rc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1} .dk-rc .dk-big{font-size:40px; font-weight:300; letter-spacing:-.035em; color:var(--accent2-text)} .dk-rc .dk-big i{font-style:normal; font-size:14px; margin-left:2px; color:var(--text2)} .dk-rc .dk-rk{font-size:11px; letter-spacing:.04em; color:var(--text2); margin-top:6px} .dk-rc .dk-tick{width:44px; height:44px; font-size:22px; background:var(--accent2); color:var(--accent2-ink)} .dk-hc{display:flex; flex-direction:column; gap:4px; min-width:0} .dk-hc b{font-size:17px; font-weight:500; letter-spacing:-.01em} .dk-hc span{font-size:13px; color:var(--text2); line-height:1.5} .dk-hc .dk-hs{color:var(--text3)} /* チェックの札 ―― 枚数で並ぶ（1枚＝いっぱい／2枚＝半分ずつ／3・6枚＝3つ並び／5枚＝3＋2） */ .dk-today .dk-tasks{display:grid; gap:12px; grid-template-columns:minmax(0,1fr); align-content:stretch} @container bento (min-width:560px){ .dk-today .dk-tasks{grid-template-columns:repeat(6, minmax(0,1fr))} .dk-tasks > .dk-task:nth-child(n){grid-column:span 3} .dk-tasks > .dk-task:only-child{grid-column:1 / -1} .dk-tasks > .dk-task:first-child:nth-last-child(3n), .dk-tasks > .dk-task:first-child:nth-last-child(3n) ~ .dk-task{grid-column:span 2} .dk-tasks > .dk-task:first-child:nth-last-child(5), .dk-tasks > .dk-task:first-child:nth-last-child(5) ~ .dk-task:nth-child(-n+3){grid-column:span 2} } .dk-today .dk-task{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"tt tt" "tl tl" "tq tq" "tc tc"; align-content:start; gap:3px 12px; padding:16px 18px 14px; border:0; border-radius:20px; background:var(--surface); color:var(--text); text-align:left; font:inherit; cursor:pointer; min-width:0; box-shadow:none} .dk-task .dk-tt{grid-area:tt; display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0} .dk-task .dk-tn{font-size:17px; letter-spacing:-.01em; overflow-wrap:anywhere} .dk-task .dk-tt em{font-style:normal; font-size:12px; color:var(--text3); white-space:nowrap} .dk-task .dk-tl{grid-area:tl; font-size:13px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .dk-task .dk-tq{grid-area:tq; display:flex; align-items:baseline; gap:4px; margin:12px 0 8px} .dk-task .dk-tq b{font-size:38px; font-weight:300; line-height:1; letter-spacing:-.035em; color:var(--accent2-text)} .dk-task .dk-tq span{font-size:13px; color:var(--accent2-text)} .dk-task .dk-tc{grid-area:tc; display:flex; flex-wrap:wrap; gap:2px 10px; font-size:12px; color:var(--text2); align-self:end} .dk-task .dk-go{margin-left:auto; font-size:13px; color:var(--accent); white-space:nowrap} .dk-task .dk-tq span{white-space:nowrap} /* 数は語の途中で折らない（「未提／出 4／人」と割れていた） */ .dk-task .dk-tc > span{white-space:nowrap} /* 今日おわった ―― 1行1件を格子に流す */ .dk-today .dk-done{background:var(--surface); border-radius:20px; padding:14px 18px 8px} .dk-dgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); column-gap:22px; margin-top:4px} .dk-today .dk-drow{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 0; border:0; border-top:1px solid var(--line); background:none; color:var(--text); text-align:left; font:inherit; cursor:pointer} .dk-drow .dk-dn{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .dk-drow .dk-dn small{font-size:12px; color:var(--text3); margin-left:6px} .dk-drow .dk-dc{font-size:13px; color:var(--text2)} @media (hover:hover){ .dk-today .dk-drow:hover .dk-dn{color:var(--accent)} } /* ==== lane:today end ==== */ /* ---- 押す所は44px（09-11 の点検）---- 見た目は変えず、::after で当たり判定だけを広げる（.hit と同じ作り）。 成績のコースのページ（戻る・線の札・生徒×単元の見出しと黄のマス・テストの消す）と、宿題チェックの戻る。 */ .ik-back .lnk, .dk-crumb .lnk, .ik-trow .lnk, .ik-thr .pick, .ik-hn, .ik-lname, .ik-heat td.y button{position:relative} .ik-back .lnk::after, .dk-crumb .lnk::after, .ik-trow .lnk::after, .ik-thr .pick::after, .ik-hn::after, .ik-lname::after, .ik-heat td.y button::after{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%, -50%)} .dk-segb{min-height:44px} /* ==== 見せ方の整理（09-11 後半）：図は TubeViz（viz.js） ==== */ /* 折れ線。線と面は SVG を伸ばして描き、点は HTML で置く（丸がつぶれない）。 */ .vz-line{position:relative; height:56px; min-width:0} .vz-line.vz-empty{background:linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat} .vz-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible} .vz-area.und{fill:color-mix(in srgb, var(--accent) 12%, transparent)} .vz-stroke{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round} .vz-stroke.und{stroke:color-mix(in srgb, var(--accent) 72%, var(--surface))} .vz-stroke.sub{stroke:var(--text3); stroke-width:1.5; stroke-dasharray:3 3} .vz-guide{position:absolute; left:0; right:0; height:0; border-top:1px dashed var(--accent2-line); pointer-events:none} .vz-p{position:absolute; width:7px; height:7px; margin:0 0 -3.5px -3.5px; padding:0; border:0; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 72%, var(--surface))} .vz-p.y{box-shadow:inset 0 0 0 2px var(--accent2)} .vz-p.now{width:11px; height:11px; margin:0 0 -5.5px -5.5px; background:var(--accent); box-shadow:0 0 0 3px var(--surface)} .vz-p.now.y{background:var(--accent2)} button.vz-p{cursor:pointer} button.vz-p::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%, -50%)} button.vz-p[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--accent)} button.vz-p:focus-visible{outline:2px solid var(--accent); outline-offset:3px} .vz-ring{width:18px; height:18px; flex:none} .vz-ring circle{fill:none; stroke-width:3} .vz-ring .t{stroke:color-mix(in srgb, var(--accent) 14%, transparent)} .vz-ring .v{stroke:var(--accent)} .vz-dots{display:inline-flex; flex-wrap:wrap; gap:3px; max-width:132px} .vz-dots i{width:6px; height:6px; border-radius:50%; background:color-mix(in srgb, var(--accent) 24%, transparent)} .vz-dots i.y{background:var(--accent2)} .vz-count{font-size:12px; color:var(--text2)} .vz-count b{font-weight:500; color:var(--accent2-text)} .vz-rail{display:flex; align-items:center; gap:6px; min-height:16px} .vz-rail i{flex:none; width:12px; height:12px; border-radius:3px; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent)} .vz-rail i.done{background:color-mix(in srgb, var(--accent) 50%, var(--surface)); box-shadow:none} .vz-rail i.late{background:var(--accent2-soft); box-shadow:inset 0 0 0 2px var(--accent2)} .vz-rail i.now{width:16px; height:16px; border-radius:4px} .vz-rail i.done.now, .vz-rail i.ahead{background:var(--accent)} .vz-rail i.todo.now{box-shadow:inset 0 0 0 2px var(--accent)} .vz-books{display:inline-flex; align-items:flex-end; gap:4px} .vz-books i{width:9px; height:14px; border-radius:1.5px 2.5px 2.5px 1.5px; background:color-mix(in srgb, var(--accent) 62%, var(--surface))} .vz-books i.p{background:none; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, var(--surface))} .vz-books.none{font-size:12px; color:var(--text3)} /* 成績の札：大きな数と折れ線を1行に。事実は小さな図で1行に */ .ik-card{gap:8px} .ik-mid{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:16px} .ik-mid .vz-line{height:46px; margin:0 6px 6px 0} .ik-unit{align-self:flex-end; max-width:100%; font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ik-facts{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:2px; padding-top:10px; border-top:1px solid var(--line)} .ik-fact{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text2)} .ik-fact b{font-weight:500; color:var(--text)} .ik-lead .ik-leadlist{display:flex; flex-wrap:wrap; gap:2px 14px} .ik-leadlist .lnk{position:relative; font-size:14px} .ik-leadlist .lnk::after{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:44px; transform:translate(-50%, -50%)} /* コースのページの推移 */ .ik-trend{min-width:0} .ik-trend .vz-line{height:180px; margin:22px 14px 18px} .ik-trend{display:flex; flex-direction:column} .ik-trend .vz-wrap{flex:1; display:flex; align-items:stretch} .ik-trend .vz-wrap .vz-line{flex:1; height:auto; min-height:180px} /* 進度の札：ことば・単元の列・今週の単元・毎日テストの札・冊子 */ .pg-card{gap:10px} .pg-top .pg-st{margin-left:auto} .pg-st{flex:none; font-size:12px; line-height:1.5; padding:2px 10px; border-radius:999px; white-space:nowrap; background:var(--accent-soft); color:var(--accent)} .pg-st.y{background:var(--accent2-soft); color:var(--accent2-text)} .pg-st.none{background:var(--sunk); color:var(--text3)} .pg-st.big{display:inline-flex; align-self:flex-start; font-size:15px; padding:6px 14px; margin:2px 0 14px} .pg-cur{font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pg-row{display:flex; align-items:center; gap:10px; min-height:24px} .pg-rl{flex:none; width:5.4em; font-size:11px; color:var(--text3)} .pg-rv{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0} .pg-chip{font-size:12px; line-height:1.6; padding:0 8px; border-radius:999px; background:var(--sunk); color:var(--text2); white-space:nowrap} .pg-chip b{font-weight:500; color:var(--text)} .pg-pace .vz-rail{gap:8px; margin:0 0 16px} .pg-pace .vz-rail i{width:16px; height:16px} .pg-pace .vz-rail i.now{width:22px; height:22px; border-radius:5px} .pg-dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:0; font-size:14px} .pg-dl dt{font-size:12px; color:var(--text3)} .pg-dl dt.y{color:var(--accent2-text)} .pg-dl dd{margin:0; color:var(--text)} /* 苦手な単元の札（コースのページ）。見た目は34pxのまま、当たり判定だけ44pxに */ .ik-wchip{position:relative} .ik-wchip::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)} /* ==== 見せ方の整理 end ==== */ /* ==== 先生から（先生のことばと、がんばりの積み上げ）==== */ .ch-banner{display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:6px; padding:12px 18px; border-radius:18px; background:linear-gradient(120deg, var(--accent2-fill) 0%, color-mix(in srgb, var(--accent2) 26%, var(--surface)) 100%); color:var(--accent2-ink); font-size:15px} .ch-banner b{font-weight:600} .ch-top{display:grid; gap:14px; grid-template-columns:minmax(0,1fr); margin-top:6px} .ch-words{position:relative; display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:0; padding:20px 22px; border:0; border-radius:22px; text-align:left; font:inherit; color:var(--text); background:radial-gradient(120% 120% at 0% 0%, rgba(249,185,0,.20) 0%, rgba(249,185,0,0) 55%), radial-gradient(130% 130% at 100% 100%, rgba(0,91,172,.14) 0%, rgba(0,91,172,0) 62%), var(--surface)} button.ch-words{cursor:pointer} .ch-l{font-size:11px; letter-spacing:.06em; color:var(--accent2-text)} .ch-q{margin:0; padding-left:14px; border-left:3px solid var(--accent2); font-size:21px; line-height:1.6; letter-spacing:-.01em; color:var(--text)} .ch-home .ch-q{font-size:17px} .ch-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12px; color:var(--text2)} .ch-sj{color:var(--accent)} .ch-meta .rt{padding:1px 9px; border-radius:99px; background:var(--accent2-soft); color:var(--accent2-text)} .ch-more{display:grid; gap:8px; margin-top:4px; padding-top:12px; border-top:1px solid var(--line)} .ch-mq{display:flex; align-items:baseline; gap:10px; min-width:0; font-size:14px} .ch-mq .ch-sj{flex:none; font-size:12px} .ch-mt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text)} .ch-words.empty p{margin:0; font-size:14px; color:var(--text2)} .ch-go{align-self:flex-end; font-size:13px; color:var(--accent)} .ch-hitline{font-size:14px; color:var(--accent2-text)} .ch-hitline b{font-weight:600} .ch-tiles{display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr))} @container bento (min-width:620px){ .ch-tiles{grid-template-columns:repeat(4, minmax(0,1fr))} .ch-tiles.n3{grid-template-columns:repeat(3, minmax(0,1fr))} } .ch-tile{display:flex; flex-direction:column; gap:6px; min-width:0; padding:16px 18px; border-radius:20px; background:var(--surface)} .ch-n{display:flex; align-items:baseline; gap:3px} .ch-n b{font-size:40px; font-weight:300; line-height:1; letter-spacing:-.035em; color:var(--text)} .ch-n i{font-style:normal; font-size:13px; color:var(--text2)} .ch-next{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text2)} .ch-sub{font-size:12px; color:var(--text3)} .ch-tile.hit{background:linear-gradient(150deg, var(--accent2-fill) 0%, color-mix(in srgb, var(--accent2) 20%, var(--surface)) 100%)} .ch-tile.hit .ch-l, .ch-tile.hit .ch-n i{color:var(--accent2-ink)} .ch-hit{align-self:flex-start; padding:2px 10px; border-radius:99px; background:var(--surface); color:var(--accent2-text); font-size:12px} .ch-subs{margin-top:18px} /* ==== 先生から end ==== */ /* ==== 09-11 深夜の指摘：成績の2枚並び・線の端の値・進度の凡例・先生からの教科ページ ==== */ /* 成績：推移と分布を、広い画面では横に2枚（1枚ずつ横いっぱいでは間のびする） */ .ik-pair{display:grid; gap:14px; align-items:start; grid-template-columns:minmax(0,1fr)} .ik-pair > .card{margin:0; min-width:0} @container bento (min-width:900px){ .ik-pair{grid-template-columns:repeat(2, minmax(0,1fr))} } /* 線の端に「名前 最新の値」。図の下に数字の行を作らない */ .vz-wrap{display:flex; align-items:stretch; min-width:0} .vz-wrap .vz-line{flex:1; min-width:0} .vz-ends{position:relative; flex:none; width:104px} .vz-end{position:absolute; left:10px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transform:translateY(50%); font-size:12px; color:var(--text2)} .vz-end b{font-weight:500; color:var(--text)} .vz-end b.y{color:var(--accent2-text)} .vz-end i{display:inline-block; width:14px; border-top:2px solid color-mix(in srgb, var(--accent) 72%, var(--surface))} .vz-end.sub i{border-top:1.5px dashed var(--text3)} .ik-trend .vz-wrap{margin:20px 0 14px 14px} .ik-cap{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:13px; color:var(--text2)} .ik-cap b{font-weight:500; color:var(--text)} /* 凡例（単元の列・冊子）。四角は本物と同じ部品を使う */ .vz-key{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:12px; color:var(--text2)} .vz-ki{display:inline-flex; align-items:center; gap:5px} .vz-ki .vz-rail, .vz-ki .vz-books{min-height:0} .pg-lead .vz-key{display:inline-flex; gap:4px 12px; font-size:12px} .pg-lead .vz-ki{display:inline-flex; gap:5px; font-size:12px} .pg-key{margin-top:2px} .pg-keyrow{margin:-6px 0 14px} .pg-rv .pg-cur{flex:1 1 140px; min-width:0} .pg-bc{font-size:12px; color:var(--text2)} /* 先生から：0の札を出さないので、札が1〜2枚のときの列 */ @container bento (min-width:620px){ .ch-tiles.n2{grid-template-columns:repeat(2, minmax(0,1fr))} .ch-tiles.n1{grid-template-columns:minmax(0,1fr)} } /* 先生から：教科のページ（戻る → 見出し＋件数 → 1件ずつの札。広い画面は2列） */ .fb-back{margin:-2px 0 -14px} .fb-back .lnk{min-height:44px; padding:10px 2px; font-size:14px} .fb-list{display:grid; gap:10px} @container bento (min-width:700px){ .fb-list{grid-template-columns:repeat(2, minmax(0,1fr))} } .fb-row{display:flex; flex-direction:column; gap:6px; min-width:0; padding:14px 18px; border-radius:18px; background:var(--surface)} .fb-top{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12px; color:var(--text2)} .fb-wait{color:var(--text3)} .fb-q{margin:2px 0; padding-left:12px; border-left:3px solid var(--accent2); font-size:16px; line-height:1.6; color:var(--text)} .fb-title{font-size:13px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* ==== end ==== */ /* 取り込んだ塾内テストの行：狭い画面では名前・人数・消すを縦に（1文字ずつ折れない） */ @container bento (max-width:560px){ .ik-trow{grid-template-columns:minmax(0,1fr) auto} .ik-trow > .tiny{grid-column:1 / -1} } /* ==== 色と動き（09-12）：地に淡い色、札に役割の色と深さ、Apple らしい動き ==== */ /* 本人の指摘：白地に白い札で札らしさが薄い。地を iOS の壁紙のようにごく淡く色づけ （左上に黄、右下に青 ―― 札の光の向きと同じ）、札は白＋やわらかい影で浮かせ、 役割のある札には青・黄の淡いグラデーションを敷く。強い地にはしない。 */ :root{ --bg:#F1F3F6; --card-shadow:0 1px 2px rgba(23,21,15,.05), 0 12px 32px -18px rgba(23,21,15,.26); --card-hi:inset 0 1px 0 rgba(255,255,255,.8); --tint-blue:linear-gradient(160deg, #DCE9F9 0%, #FFFFFF 70%); --tint-warm:linear-gradient(160deg, #FFF0C9 0%, #FFFFFF 70%); --tint-cool:linear-gradient(180deg, #FFFFFF 0%, #E9F0F9 100%); } html{background:#F1F3F6} body{background:transparent} body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(75% 55% at 6% 0%, rgba(249,185,0,.16) 0%, rgba(249,185,0,0) 62%), radial-gradient(70% 55% at 100% 100%, rgba(0,91,172,.11) 0%, rgba(0,91,172,0) 64%), linear-gradient(180deg, #F2F4F8 0%, #F4F3F0 60%, #F6F3EC 100%)} :root[data-theme="dark"] html, :root[data-theme="dark"]{background:#000} :root[data-theme="dark"] body::before{background:#000} /* 上の帯と縦の柱は地を透かす。白い面で塗ると、地の色が上と左で切れる。 */ header{border-bottom-color:rgba(23,21,15,.06)} @media (min-width:1024px){ nav{background:transparent} nav button[aria-current="page"]{background:var(--surface); box-shadow:var(--card-shadow)} } nav{background:color-mix(in srgb, #F3F4F6 88%, transparent)} /* --- 札の深さ。白い札は影と上辺の光で浮かせる（iOS のウィジェット） --- */ #main .card, #main .panel, #main .w-plain, #main .sublist .subrow, #main .hw-sec, #main .dk-task, #main .dk-done, #main .ik-card, #main .pg-card, #main .pg-panel, #main .week .slot, #main .ch-words, #main .ch-tile, #main .hw-wk, #main .w-grow, #main .w-acc, #main .w-goal, #main .w-strip, #main .w-run, #main .rk, #main .dk-hero, #main .next.w-blue, #main .next.quiet, #main .hw-fintg{ box-shadow:var(--card-hi), var(--card-shadow)} #main .w-marble{box-shadow:0 1px 2px rgba(10,79,143,.2), 0 14px 34px -16px rgba(10,79,143,.55)} #main .next.w-blue .hw-hint{color:var(--text3)} #main .week .slot{box-shadow:var(--card-hi), 0 1px 2px rgba(23,21,15,.04), 0 8px 22px -14px rgba(23,21,15,.2)} /* --- 役割の色（淡いグラデーション）。青＝進む・押して先へ、黄＝手を入れる・祝う --- */ #main .hw-wk{background:var(--tint-blue)} #main .hw-wk.fin{background:linear-gradient(160deg, #FFF1C9 0%, #FFFFFF 70%)} #main .w-grow{background:var(--tint-cool)} #main .w-acc{background:var(--tint-warm)} #main .w-strip{background:var(--tint-cool)} #main .w-run{background:var(--tint-warm)} #main .w-goal{background:var(--surface)} #main .w-goal.hit{background:linear-gradient(150deg, var(--accent2-fill) 0%, color-mix(in srgb, var(--accent2) 20%, var(--surface)) 100%)} #main .w-goal.hit .lbl, #main .w-goal.hit .ws{color:var(--accent2-ink)} #main .dk-hero{ background: radial-gradient(120% 95% at 8% 6%, rgba(249,185,0,.46) 0%, rgba(249,185,0,0) 60%), radial-gradient(90% 85% at 92% 8%, rgba(255,232,150,.7) 0%, rgba(255,232,150,0) 60%), radial-gradient(110% 110% at 88% 106%, rgba(46,134,214,.42) 0%, rgba(46,134,214,0) 62%), radial-gradient(80% 70% at 2% 100%, rgba(100,180,242,.22) 0%, rgba(100,180,242,0) 58%), linear-gradient(150deg, #FFF3D6 0%, #F3EDDD 55%, #DFEBF8 100%)} #main .dk-task{background:var(--tint-cool)} #main .dk-task.flag, #main .dk-task.y{background:var(--tint-warm)} #main .ik-card{background:var(--tint-cool)} #main .ik-card.flag{background:var(--tint-warm)} #main .pg-card{background:var(--tint-cool)} #main .pg-card.flag{background:var(--tint-warm)} #main .ch-tile{background:var(--tint-cool)} #main .ch-tile.hit{background:linear-gradient(150deg, var(--accent2-fill) 0%, color-mix(in srgb, var(--accent2) 20%, var(--surface)) 100%)} #main .daycol.today .dayhead{background:linear-gradient(120deg, var(--accent2-fill), color-mix(in srgb, var(--accent2) 40%, #fff))} /* 成績・進度の札の列と、教科の札：えらんだものは青 */ .pick[aria-pressed="true"], .pick.on{box-shadow:0 6px 16px -10px rgba(0,91,172,.6)} /* --- 動き。位置を変えるのは transform と opacity だけ（描き直しを起こさない） --- */ #main.fade-in{animation:main-in .7s ease} @keyframes nav-fade{from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none}} nav button[aria-current="page"]{animation:tab-in .55s cubic-bezier(.2,.8,.2,1)} @keyframes tab-in{from{transform:scale(.92); opacity:.6} to{transform:none; opacity:1}} #toast.on{animation:toast-in .45s cubic-bezier(.2,.8,.2,1)} @keyframes toast-in{from{opacity:0; transform:translate(-50%, 8px) scale(.96)} to{opacity:1; transform:translate(-50%, 0)}} /* **押せるものは全部、同じ反応**（本人：主タブだけでなく全ボタンに等しく）。 マウスを乗せると少し大きくなり、押すと沈む（iPadOS のポインタの気持ちよさ）。 大きい札（面いっぱいの札・行）は控えめに、小さいボタンははっきりと。 色を暗くする反応は消した ―― 反応が2種類あると、どれが押せるのか分からなくなる。 指の端末（hover の無い端末）では乗せる動きを出さず、沈むだけ。 */ @media (hover:hover) and (pointer:fine){ button:not([disabled]), label.btn, a.btn, .pick, .demo-pick, .subrow, .slot, .menuitem{ transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background-color .3s ease, opacity .3s ease} button:not([disabled]):hover, label.btn:hover, a.btn:hover, .pick:hover, .menuitem:hover{transform:scale(1.06)} /* 大きい札・行は控えめに持ち上げる */ #main button.w:hover, #main .ik-card:hover, #main .pg-card:hover, #main .dk-task:hover, #main .slot:hover, #main .subrow:hover, .demo-pick:hover, #main .hw-fintg:hover, #main .lrow2:hover, #main .prow3:hover, #main .dk-drow:hover, #main .shrow:hover, #main .raterow:hover, #main .pg-prow:hover, #main .ik-lname:hover, #main .ik-hn:hover, #main .ik-trow:hover, #main .hw-row button:hover, #main .btn:hover, #main .lg-demo:hover, #main .ch-words:hover, #main .ch-home:hover, #main .w-acc:hover, #main .w-goal:hover, #main .mg-row:hover {transform:translateY(-2px) scale(1.015)} /* 押した瞬間は沈む */ button:not([disabled]):active, label.btn:active, a.btn:active, .pick:active, .demo-pick:active, .subrow:active, .slot:active, .menuitem:active{ transform:scale(.975); transition-duration:.12s} /* 文字だけのボタンは、後ろに丸い光を敷く（ポインタが吸い付く感じ） */ .lnk{position:relative; isolation:isolate; border-radius:8px} .lnk::before{content:""; position:absolute; inset:-5px -9px; border-radius:10px; background:currentColor; opacity:0; transition:opacity .3s ease; z-index:-1} .lnk:hover::before{opacity:.09} .lnk:hover{opacity:1} nav button{transition:background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1)} } /* 指の端末でも、押した瞬間は沈む */ @media (hover:none){ button:not([disabled]):active, label.btn:active, .pick:active, .demo-pick:active{transform:scale(.975); transition:transform .12s} } @media (prefers-reduced-motion:reduce){ #main.fade-in, nav button[aria-current="page"], #toast.on {animation:none} button, label.btn, .pick, .demo-pick, .subrow, .slot, .menuitem, .lnk::before, nav button{transition:none} } /* --- 自分の記録の札（成績の伸び・正答率・今週の目標・これまでの宿題） --- */ .w-home > .w-grow, .w-home > .w-strip{justify-content:flex-start; gap:6px} .gw-rows{display:flex; flex-direction:column; gap:4px; margin-top:6px} .gw-row{display:grid; grid-template-columns:3.4em minmax(0,1fr) 3.4em minmax(4.5em,auto); align-items:center; gap:0 10px; min-height:36px} .gw-sj{font-size:13px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .gw-line{min-width:0} .gw-line .vz-line{height:32px} .gw-line .vz-guide{display:none} .gw-v{font-size:22px; font-weight:300; letter-spacing:-.03em; text-align:right; color:var(--text)} .gw-v i{font-style:normal; font-size:12px; color:var(--text2); margin-left:1px} .gw-w{font-size:12px; color:var(--text3); white-space:nowrap; text-align:right} .gw-w.up{color:var(--accent)} .gw-w.mid{color:var(--accent2-text)} .gw-w.low{color:var(--text2)} .gw-row.nopct{grid-template-columns:3.4em minmax(0,1fr) minmax(5em,auto)} .gw-row.nopct .gw-w{font-size:13px; color:var(--text2)} .gw-row.nopct .gw-w.up{color:var(--accent)} .gw-wait{font-size:13px; color:var(--text2); margin:6px 0 0} .w-grow .ws, .w-acc .ws, .w-goal .ws, .w-strip .ws{margin-top:auto; font-size:12px; color:var(--text3); text-align:left} .ac-big{display:flex; align-items:baseline; gap:2px; margin-top:4px} .ac-big b{font-size:40px; font-weight:300; line-height:1; letter-spacing:-.035em; color:var(--text)} .ac-big i{font-style:normal; font-size:14px; color:var(--text2)} .ac-big small{margin-left:8px; font-size:12px; color:var(--text3)} .ac-line{margin:6px 0 2px} .ac-line .vz-line{height:38px} .ac-line .vz-guide{display:none} .w-acc .ws{color:var(--accent)} #main .w-goal{align-items:center; text-align:center; justify-content:space-between} /* 輪は、上の見出しと下の一言のあいだの真ん中に。札が縦に伸びる幅（広い画面）では、 .ws の margin-top:auto が余りを全部取って輪が上に寄っていた（実際そうなった）。余りは輪の上下で分ける */ .gl-ringwrap{position:relative; width:116px; height:116px; margin:auto; flex:0 0 auto} #main .w-goal .ws{margin-top:0} .gl-ring{width:100%; height:100%; display:block} .gl-ring circle{fill:none; stroke-width:10; stroke-linecap:round} .gl-ring .trk{stroke:color-mix(in srgb, var(--accent) 14%, transparent)} .gl-ring .val{stroke:var(--accent)} #main .w-goal.hit .gl-ring .trk{stroke:rgba(255,255,255,.55)} .gl-c{position:absolute; inset:0; display:flex; align-items:center; justify-content:center} .gl-c b{font-size:42px; font-weight:300; line-height:1; letter-spacing:-.035em; color:var(--text)} /* 見出しの右の目標の日数（小さな札）。達成の黄の地では白めの札に */ .w-goal .lbl .gl-goal{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:99px; font-size:12px; font-weight:500; letter-spacing:0; background:var(--accent-soft); color:var(--accent); vertical-align:1px} #main .w-goal.hit .lbl .gl-goal{background:rgba(255,255,255,.62); color:var(--accent2-ink)} /* 達成の二重の輪：外の太い輪の内側に細い輪 */ .gl-ring circle.in{stroke:var(--accent); stroke-width:4; opacity:.9} .w-goal .ws{color:var(--accent)} .gl-opts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px} .st-big{display:flex; align-items:baseline; gap:3px; margin-top:4px; font-size:14px; color:var(--text2)} .st-big b{font-size:40px; font-weight:300; line-height:1; letter-spacing:-.035em; color:var(--text); margin-right:2px} .st-big small{margin-left:6px; font-size:12px; color:var(--text3)} .st-cells{display:flex; gap:5px; margin:10px 0 4px} .st-cells i{flex:1; height:24px; border-radius:6px; background:color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent)} .st-cells i.fin{background:var(--accent); box-shadow:none} .st-cells i.part{background:color-mix(in srgb, var(--accent) 45%, var(--surface)); box-shadow:none} .st-cells i.none{background:var(--sunk); box-shadow:none} .st-cells i.now{outline:2px solid var(--accent2); outline-offset:2px; border-radius:6px} /* 先生から足された宿題の印 */ .hw-lx.p{background:var(--accent-soft); color:var(--accent)} /* --- 講師：宿題を足す紙・プリセット・個別の宿題の一覧 --- */ .ik-pers{font-size:11px; padding:1px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); white-space:nowrap} .ik-pre{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left} .ik-pre b{font-weight:500; font-size:14px} .ik-pre span{font-size:12px; color:var(--text2)} .ik-opt.on.ik-pre span{color:inherit; opacity:.8} .ik-slx{margin-left:auto; display:inline-flex; gap:14px} .ik-stus{display:grid; gap:6px; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr))} .ik-stu{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; min-height:44px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font:inherit; text-align:left; cursor:pointer; color:var(--text)} .ik-stu.on{border-color:var(--accent); background:var(--accent-soft)} .ik-stu b{font-weight:500} .ik-stu .num{font-size:13px} .ik-stu .num.y{color:var(--accent2-text)} .ik-stu .num.b{color:var(--accent)} .ik-stu .tiny{width:100%; font-size:11.5px} .ik-stu em{font-style:normal; font-size:11px; padding:1px 7px; border-radius:999px; background:var(--surface); color:var(--accent); margin-left:auto} .ik-tpl{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px} .ik-pe{background:var(--sunk); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:10px} .ik-pe .field{margin-bottom:0} .ik-bgrp{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:10px 0; border-top:1px solid var(--line)} .ik-bg1{display:flex; flex-direction:column; gap:1px; min-width:170px} .ik-bg1 b{font-weight:500} .ik-bstus{display:flex; flex-wrap:wrap; gap:6px} .ik-bstu{position:relative; min-height:32px; padding:4px 12px; border-radius:999px; border:0; background:var(--accent-soft); color:var(--accent); font:inherit; font-size:13px; cursor:pointer} .ik-bstu::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)} .lnk.warn{color:var(--accent2-text)} /* ==== 色と動き end ==== */ /* 紙の×と、紙の中の文字だけのボタンは、見た目を変えずに当たり判定を44pxに */ .sh-x{position:relative} .sh-x::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)} .sh-body .lnk, .ik-slx .lnk, .ik-tpl .lnk, .ik-sgfoot .lnk{position:relative} .sh-body .lnk::after, .ik-slx .lnk::after, .ik-tpl .lnk::after, .ik-sgfoot .lnk::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)} /* 目標を決めていない札は、真ん中に「目標を決める」 */ /* ==== 入口（09-12）：銘の動きと、中央1列のログイン ==== */ .screen-login #chrome{display:none} .screen-login main{max-width:520px; padding-top:max(24px, min(9vh, 64px))} .lg{position:relative; display:flex; flex-direction:column; align-items:center; gap:30px} /* 地の大きなぼかし（青と黄）。入口だけ少し強く */ .lg::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(60% 38% at 50% 14%, rgba(249,185,0,.24) 0%, rgba(249,185,0,0) 68%), radial-gradient(70% 44% at 50% 88%, rgba(0,91,172,.18) 0%, rgba(0,91,172,0) 68%)} .lg-brand{display:flex; flex-direction:column; align-items:center; gap:16px; transform-origin:50% 50%; transition:transform .85s cubic-bezier(.2,.8,.2,1)} .lg-mark{width:92px; height:92px; display:block; border-radius:22.4%; box-shadow:0 18px 34px rgba(0,78,147,.30)} .lg-word{display:flex; flex-direction:column; align-items:center; gap:4px} .lg-word .brand{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.1} .lg-for{font-family:var(--sans); font-size:13px; letter-spacing:.08em; color:var(--text2)} .lg-body{width:100%; display:flex; flex-direction:column; align-items:stretch; gap:16px} .lg-card{padding:26px 26px 24px; margin:0; border-radius:24px; box-shadow:var(--card-hi), var(--card-shadow)} .lg-card h1{font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px} .lg-card > .tiny{margin-bottom:18px} .lg-card .btn{margin-top:4px} .lg-demo{width:100%; background:rgba(255,255,255,.72); border-color:rgba(23,21,15,.1); box-shadow:var(--card-hi), 0 8px 24px -16px rgba(23,21,15,.25)} .lg-help{text-align:center} /* 動き：最初は札を隠し、銘のアイコンが弾んで出て銘が続く。着地したら札が浮かび上がる */ .lg.lg-intro .lg-body{opacity:0; transform:translateY(18px); pointer-events:none} .lg.lg-intro .lg-mark{animation:lg-pop .95s cubic-bezier(.2,.8,.2,1) both} .lg.lg-intro .lg-word{animation:lg-word .85s .4s cubic-bezier(.2,.8,.2,1) both} @keyframes lg-pop{0%{opacity:0; transform:scale(.55) translateY(10px)} 55%{opacity:1; transform:scale(1.06) translateY(0)} 100%{opacity:1; transform:none}} @keyframes lg-word{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}} .lg.lg-ready .lg-body{opacity:1; transform:none; transition:opacity .75s .3s ease, transform .75s .3s cubic-bezier(.2,.8,.2,1)} .lg.lg-ready.lg-quick .lg-body{transition:none} /* 役を選ぶ紙 */ .lg-sheet{width:min(640px, calc(100vw - 32px))} .lg-sheet .demo-picks{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px} @media (max-width:480px){ .lg-sheet .demo-picks{grid-template-columns:1fr} } .lg-sheet .demo-pick{border:0; background:var(--tint-cool); box-shadow:var(--card-hi), 0 8px 22px -14px rgba(23,21,15,.25); border-radius:16px} .lg-sheet .demo-pick .chip{background:var(--accent); color:#fff} @media (prefers-reduced-motion:reduce){ .lg.lg-intro .lg-mark, .lg.lg-intro .lg-word{animation:none} .lg-brand, .lg.lg-ready .lg-body{transition:none} } /* ==== 入口 end ==== */ /* ==== アプリを使うクラス（09-12）：使うコースと紙のままのコースの混在 ==== */ /* 時間割：紙のままのコースは薄く、「紙」の札。押すと使い始める入口が開く */ #main .week .slot.paper{background:color-mix(in srgb, var(--surface) 55%, transparent); box-shadow:none; outline:1px dashed color-mix(in srgb, var(--text3) 55%, transparent); outline-offset:-1px} .slot.paper .cls, .slot.paper .tm{color:var(--text3)} .sl-paper{position:absolute; right:12px; top:10px; font-family:var(--sans); font-size:11px; line-height:18px; padding:0 8px; border-radius:999px; background:var(--sunk); color:var(--text2)} .ap-start p{margin:0 0 10px} .ap-lead{display:flex; flex-direction:column; gap:6px; margin:6px 0 2px} .ap-lead b{font-weight:600; font-size:17px} .ap-lead span{font-size:13px; color:var(--text2); line-height:1.7} .ap-list{display:grid; gap:8px} .ap-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-radius:18px; background:var(--surface); box-shadow:var(--card-hi), var(--card-shadow)} .ap-row.off{background:color-mix(in srgb, var(--surface) 70%, transparent); box-shadow:none; outline:1px dashed color-mix(in srgb, var(--text3) 55%, transparent); outline-offset:-1px} .ap-name{display:flex; flex-direction:column; gap:2px; min-width:0} .ap-name b{font-weight:500} .ap-row.off .ap-name b{color:var(--text2)} /* 生徒：紙のままの教科の1行 */ .paper-note{margin:-6px 0 0; padding:0 4px; font-size:13px; color:var(--text2)} /* ==== アプリを使うクラス end ==== */ /* ==== 押した反応・幕・ヘッダーの銘（09-12 後半）==== */ /* 押した瞬間：沈んで戻る（すべての押せるもの。JS の watchPress が is-press を付ける） */ .is-press{animation:press-pop .45s cubic-bezier(.2,.8,.2,1)} @keyframes press-pop{0%{transform:scale(1)} 35%{transform:scale(.93); opacity:.85} 100%{transform:scale(1); opacity:1}} #main button.w.is-press, #main .ik-card.is-press, #main .pg-card.is-press, #main .dk-task.is-press, #main .slot.is-press, #main .subrow.is-press, .demo-pick.is-press, #main .ch-words.is-press, #main .mg-row.is-press{animation-name:press-pop-soft} @keyframes press-pop-soft{0%{transform:scale(1)} 35%{transform:scale(.975); opacity:.9} 100%{transform:scale(1); opacity:1}} /* 幕：入ったあと。印が弾み、銘と名前が続き、ゆっくり明ける */ #welcome{position:fixed; inset:0; z-index:200; display:grid; place-items:center; background: radial-gradient(60% 38% at 50% 14%, rgba(249,185,0,.24) 0%, rgba(249,185,0,0) 68%), radial-gradient(70% 44% at 50% 88%, rgba(0,91,172,.18) 0%, rgba(0,91,172,0) 68%), linear-gradient(180deg, #F2F4F8 0%, #F4F3F0 60%, #F6F3EC 100%); transition:opacity .9s ease; will-change:opacity} #welcome.out{opacity:0; pointer-events:none} .wc-in{display:flex; flex-direction:column; align-items:center; gap:16px; transform:translateY(-4vh)} .wc-in .lg-mark{animation:lg-pop .95s cubic-bezier(.2,.8,.2,1) both} .wc-in .lg-word{animation:lg-word .85s .4s cubic-bezier(.2,.8,.2,1) both} .wc-in .brand{font-size:30px; font-weight:800; letter-spacing:-.03em} .wc-who{font-family:var(--sans); font-size:14px; color:var(--text2); letter-spacing:.06em; margin-top:2px} :root[data-theme="dark"] #welcome{background:#000} /* ヘッダーの銘は小さく（本人：今の 2/3〜半分に） */ header .brand{font-size:clamp(17px, 2.1vw, 22px)} header .brand .mark{width:1.15em; height:1.15em} @media (prefers-reduced-motion:reduce){ .is-press{animation:none !important} .wc-in .lg-mark, .wc-in .lg-word{animation:none} #welcome{transition:none} } /* ==== 押した反応 end ==== */ /* ==== 切り替えの動き（09-12 後半）：前の画面の写し・紙の消え方・幕の輪・保護者・受信箱 ==== */ /* 前の画面の写し：薄れながら少し縮む（タブ）／左右へ滑る（先へ・もどる）。次の画面は nav-* で浮かぶ */ .mainghost{animation:ghost-fade .5s ease both} @keyframes ghost-fade{to{opacity:0}} /* 紙が消えるとき：暗がりは薄れ、紙は縮みながら薄れる（macOS のシート） */ .leaving{pointer-events:none} .leaving .shade{animation:shade-out .35s ease both !important; -webkit-backdrop-filter:none; backdrop-filter:none} .leaving .sheet{animation:sheet-out .35s cubic-bezier(.4,0,.6,1) both !important} @keyframes shade-out{to{opacity:0}} @keyframes sheet-out{to{opacity:0; transform:translate(-50%,-50%) scale(.9)}} @media (max-width:640px){ .leaving .sheet{animation-name:sheet-down !important} @keyframes sheet-down{to{opacity:0; transform:translateY(24px)}} } /* 幕の印（SVG）。白い輪は最後にほどけて右へ消える */ .wc-mark{display:block; width:92px; height:92px; border-radius:22.4%; box-shadow:0 18px 34px rgba(0,78,147,.30); animation:lg-pop .95s cubic-bezier(.2,.8,.2,1) both; will-change:transform} .wc-in .lg-word{will-change:transform, opacity} .wc-mark svg{display:block; width:100%; height:100%; overflow:visible} .wc-ring{stroke-dasharray:251.4 251.4; stroke-dashoffset:0} #welcome.unwind .wc-ring{animation:wc-unwind .7s cubic-bezier(.5,0,.8,.4) both} @keyframes wc-unwind{0%{stroke-dashoffset:0; opacity:1} 70%{opacity:1} 100%{stroke-dashoffset:-251.4; opacity:0}} .wc-fly{transform:translate(0,0)} #welcome.unwind .wc-fly{animation:wc-fly .7s cubic-bezier(.5,0,.8,.4) both} @keyframes wc-fly{to{transform:translate(150px, 0)}} #welcome.unwind .lg-word{transition:opacity .5s .15s ease, transform .5s .15s ease; opacity:.0; transform:translateY(6px)} #welcome.unwind .wc-mark{transition:box-shadow .5s ease} :root[data-theme="dark"] .wc-mark{box-shadow:0 18px 34px rgba(0,0,0,.6)} /* ヘッダー：字は小さいまま、印は大きく（本人） */ header .brand{align-items:flex-end} header .brand b, header .brand i{line-height:1; display:inline-block} header .forwhere{line-height:1.05; padding-bottom:1px} header .brand .mark{width:40px; height:40px; margin-right:.3em; align-self:auto} header .forwhere{margin-left:12px} /* study と for のあいだは半角2つぶん */ /* 保護者の方へ */ .pa-lead{margin:-4px 0 4px; font-size:14px; color:var(--text2); line-height:1.7} .pa-form{display:flex; flex-direction:column; gap:12px} .pa-subs{margin:0} .pa-form textarea, .mg-form textarea{width:100%; box-sizing:border-box; min-height:96px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--sunk); color:var(--text); font:inherit; font-size:15px; line-height:1.6; resize:vertical} .pa-list{display:grid; gap:12px} .mg-item, .mg-row{display:flex; flex-direction:column; gap:8px; padding:16px 18px; border-radius:18px; background:var(--surface); box-shadow:var(--card-hi), var(--card-shadow)} .mg-item.fresh, .mg-row.fresh{background:var(--tint-warm)} .mg-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .mg-head b{font-weight:600} .mg-sj{font-size:12px; color:var(--accent)} .mg-text{margin:0; font-size:15px; line-height:1.7; white-space:pre-wrap; word-break:break-word} .mg-reply{padding:10px 14px; border-radius:14px; background:var(--accent-soft); display:flex; flex-direction:column; gap:4px} .mg-reply p{margin:0; font-size:14px; line-height:1.7; white-space:pre-wrap; word-break:break-word} .mg-rl{font-size:11px; color:var(--accent)} .mg-wait{margin:0} .mg-box .ik-lh{margin-bottom:10px} .mg-un{color:var(--accent2-text); font-weight:600} .mg-grid{display:grid; gap:10px} @container bento (min-width:900px){ .mg-grid{grid-template-columns:repeat(2, minmax(0,1fr))} } .mg-form{display:flex; flex-direction:column; gap:8px} @media (prefers-reduced-motion:reduce){ .mainghost, .leaving .shade, .leaving .sheet, .wc-mark, #welcome.unwind .wc-ring, #welcome.unwind .wc-fly{animation:none} } /* ==== 切り替えの動き end ==== */ /* 受信箱の文字だけのボタンと、小さなボタンの当たり判定を 44px に */ .mg-row .lnk, .mg-item .lnk{position:relative} .mg-row .lnk::after, .mg-item .lnk::after{content:""; position:absolute; left:-6px; right:-6px; top:50%; height:44px; transform:translateY(-50%)} #main .btn.small{min-height:44px; box-sizing:border-box} /* ==== 毎日テストの札・続けた記録・一言（09-12 後半）==== */ .dgrid{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin-top:14px} .dgrid .dcard{grid-column:span 2; min-height:132px; align-items:flex-start; text-align:left; padding:16px 18px} .dgrid.n1 .dcard{grid-column:span 6} .dgrid.n2 .dcard, .dgrid.n4 .dcard{grid-column:span 3} .dgrid.n5 .dcard:nth-child(n+4){grid-column:span 3} @container bento (max-width:560px){ .dgrid .dcard, .dgrid.n5 .dcard:nth-child(n+4){grid-column:span 3} .dgrid.n1 .dcard, .dgrid.n3 .dcard:nth-child(3), .dgrid.n5 .dcard:nth-child(5){grid-column:span 6} } #main .dcard{background:var(--tint-blue)} #main .dcard.done{background:var(--surface)} .dcard .lbl{color:var(--accent)} .dc-n{display:flex; align-items:baseline; gap:3px; margin:10px 0 auto} .dc-n b{font-size:40px; font-weight:300; line-height:1; letter-spacing:-.035em; color:var(--text)} .dc-n i{font-style:normal; font-size:13px; color:var(--text2)} .dc-ok{color:var(--accent); font-size:34px; line-height:1} .dcard .ws{color:var(--accent); margin-top:8px} .dcard.done .ws{color:var(--text2)} /* 続けた記録（直近4週） */ #main .w-cal{align-items:stretch; text-align:left; padding:18px 20px; margin-top:12px; background:var(--tint-warm)} .cal-top{display:flex; align-items:baseline; gap:4px; margin:6px 0 10px; font-size:14px; color:var(--text)} .cal-top b{font-size:34px; font-weight:300; line-height:1; letter-spacing:-.035em; margin-right:2px} .cal-top small{margin-left:10px; font-size:12px; color:var(--text2)} .cal-wd{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; margin-bottom:6px} .cal-wd i{font-style:normal; font-family:var(--sans); font-size:11px; color:var(--text3); text-align:center} .cal-grid{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px} .cal-grid i{display:flex; align-items:center; justify-content:center; height:34px; border-radius:9px; font-style:normal; background:color-mix(in srgb, var(--accent) 9%, var(--surface))} .cal-grid i b{font-family:var(--sans); font-size:11px; font-weight:400; color:var(--text3)} .cal-grid i.part{background:color-mix(in srgb, var(--accent) 38%, var(--surface))} .cal-grid i.part b{color:var(--surface)} .cal-grid i.done{background:var(--accent)} .cal-grid i.done b{color:#fff; font-weight:500} .cal-grid i.future{background:transparent; box-shadow:inset 0 0 0 1px var(--line)} .cal-grid i.today{box-shadow:0 0 0 2px var(--accent2)} .w-cal .ws{margin-top:12px; color:var(--text2)} /* 一言：札の外に、目立たせずに */ .dq{margin:14px 4px 0; font-size:14px; color:var(--text2); text-align:center; line-height:1.7} .dq span{margin-left:.5em; font-size:12px; color:var(--text3)} :root[data-theme="dark"] .cal-grid i.part b{color:#fff} /* ==== 毎日テスト end ==== */ /* ==== 講師のトップに彩り（09-12）：生徒のホームと同じ豊かさを、意味のある所にだけ ==== */ /* 今日やることの札：写真の集まりぐあいを小さな輪で（青＝進んでいる） */ .dk-tq .vz-ring{width:24px; height:24px; margin-left:auto; flex:none} .dk-tq .vz-ring circle{stroke-width:3.2} /* 今日おわった：青の淡い面。印は塗った丸に */ #main .dk-done{background:var(--tint-blue)} .dk-drow .ok{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; flex:none} /* 時間割：今日の列は黄の淡い面、過ぎた日は少し薄く（時間の流れが見える） */ #main .week .daycol.today .slot{background:var(--tint-warm)} #main .week .daycol.past .slot{opacity:.72} /* 受信箱の面 */ #main .mg-box{background:var(--tint-cool)} /* 幕の一言 */ .wc-who{font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:.14em; color:var(--accent); margin-top:6px} /* ==== 彩り end ==== */ /* ==== 写真を出す・添削を返す（09-12）==== */ /* ためた写真の札：小さな写し・外す・もう1枚・送る */ .up-stage{display:flex; flex-direction:column; gap:10px; margin-top:6px; padding:14px 16px; border-radius:16px; background:color-mix(in srgb, var(--accent) 7%, var(--surface))} .up-thumbs{display:flex; flex-wrap:wrap; gap:8px} .up-th{position:relative; width:64px; height:84px; border-radius:8px; overflow:hidden; background:var(--sunk); box-shadow:inset 0 0 0 1px var(--line)} .up-th img{width:100%; height:100%; object-fit:cover; display:block} .up-th i{display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-style:normal; font-size:12px; color:var(--text2)} .up-th b{position:absolute; left:4px; bottom:4px; font-size:11px; padding:0 6px; border-radius:99px; background:rgba(255,255,255,.85); color:var(--text)} .up-rm{position:absolute; right:2px; top:2px; width:22px; height:22px; border-radius:50%; background:rgba(23,21,15,.72); color:#fff; font-size:15px; line-height:22px; text-align:center} .up-rm::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)} .up-acts{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px} .up-acts .btn.small{width:auto} /* 主役は「N枚を送る」だけ。撮る・選ぶは白い札（青い札の中でも） */ .up-acts .btn.ghost, .next.w-blue .up-acts .btn.ghost, .hw-first.w-blue .up-acts .btn.ghost{background:var(--surface); color:var(--text); border:1px solid var(--line)} .up-acts .hw-up input[type=file]{position:absolute; width:1px; height:1px; opacity:0} .up-stage .tiny{margin:0} .up-ret{width:auto; margin-top:8px} /* 添削の紙（生徒） */ .ret-body{display:flex; flex-direction:column; align-items:center; gap:12px} .ret-img{max-width:100%; max-height:min(70vh, 900px); border-radius:10px; box-shadow:var(--card-hi), var(--card-shadow)} .ret-nav{display:flex; align-items:center; gap:12px} .ret-nav .btn.small{width:auto} /* 添削の札（宿題チェックの右、評価の下）：印刷 → 赤を入れて撮る → 返した添削 */ .dk-fix{margin:12px 0 4px; padding:12px 14px 10px; border-radius:16px; background:color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent)} .dk-fix-h{display:flex; align-items:center; gap:12px; margin-bottom:8px} .dk-fix-steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px} .dk-step{position:relative; display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; min-height:56px; padding:8px 10px; border-radius:12px; background:var(--surface); box-shadow:var(--card-hi), 0 1px 3px rgba(23,21,15,.08); color:var(--text); text-decoration:none; cursor:pointer; text-align:left; font:inherit} .dk-step i{grid-row:1 / span 2; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-style:normal; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center} .dk-step b{font-size:14px; line-height:1.2; white-space:nowrap} .dk-step span{font-size:11px; color:var(--text2); line-height:1.3} .dk-step.done i{background:var(--accent2)} .dk-step.off{opacity:.55; cursor:default; box-shadow:none; background:transparent} .dk-step.off i{background:var(--line); color:var(--text2)} .dk-step:not(.off):hover{box-shadow:var(--card-hi), 0 4px 12px rgba(23,21,15,.12)} .dk-fix-foot{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:12px} .dk-fix-foot .lnk{position:relative; cursor:pointer} .dk-fix-foot .lnk::after{content:""; position:absolute; left:-4px; right:-4px; top:50%; height:40px; transform:translateY(-50%)} .dk-up input[type=file]{position:absolute; width:1px; height:1px; opacity:0} .dk-busy{color:var(--accent); font-size:12px} .dk-vimg.ret{box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--accent2) 60%, transparent)} @container main (max-width: 760px){ .dk-fix-steps{grid-template-columns:1fr} } /* 提出箱の欄（授業の紙） */ .qz-form input{flex:1 1 220px; min-height:44px; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--sunk); font:inherit; font-size:14px} .qz-form select{min-height:44px; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font:inherit; font-size:14px} .qz-form .btn.small{width:auto} /* ==== 写真を出す end ==== */ /* ==== 仮の評価・宿題の変更のお知らせ（09-13）==== */ /* 先生の評価が無いまま期限から7日過ぎた紙の宿題は、仮に「できました」。薄い札で、仮だと分かるように */ .rt.prov{opacity:.72; background:transparent !important; box-shadow:inset 0 0 0 1.5px currentColor; color:var(--accent2-text)} /* 生徒：宿題の変更のお知らせ（先生のひとこと）。重要なので青い縁と、わかった／質問する */ .nt{padding:14px 18px; border-radius:18px; background:var(--surface); box-shadow:var(--card-hi), var(--card-shadow), inset 0 0 0 2px var(--accent); margin-bottom:10px} .nt.asked{box-shadow:var(--card-hi), var(--card-shadow), inset 0 0 0 2px var(--line)} .nt-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px} .nt-l{font-size:12px; font-weight:700; color:var(--accent)} .nt-msg{font-size:17px; font-weight:600; line-height:1.5; margin:8px 0 6px} .nt-what{font-size:13px; color:var(--text2); display:flex; flex-wrap:wrap; gap:6px; align-items:baseline} .nt-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px} .nt-acts .btn.small{width:auto} .nt-wait{margin-top:10px; font-size:13px; color:var(--text2)} .nt-q{margin:6px 0 0; padding:8px 12px; border-radius:12px; background:var(--sunk); font-size:13px} .nt-ans{margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--accent2-soft)} .nt-ans p{margin:4px 0 0} .nt-form textarea{width:100%; box-sizing:border-box; font:inherit; font-size:14px; border:0; border-radius:12px; background:var(--sunk); padding:10px 12px; margin-top:10px} /* 講師：決まりのひとことと返事の状態、受信箱の「確認ずみ／質問あり」 */ .ik-msgf textarea{width:100%; box-sizing:border-box; font:inherit; font-size:14px; border:0; border-radius:12px; background:var(--sunk); padding:10px 12px} .ik-rmsg{display:block; margin-top:4px; font-size:12px; color:var(--text2)} .ik-ack{margin-left:6px; padding:1px 8px; border-radius:99px; background:var(--sunk); font-size:11px; white-space:nowrap} .ik-ack.ok{background:var(--accent2-soft); color:var(--accent2-text)} .ik-ack.asked{background:#FFF3C4; color:#7A5A00} /* 止まっている＝黄（赤は使わない。青と黄の配色） */ .mg-acks{margin-top:12px; padding-top:10px; border-top:1px solid var(--line)} .mg-ack{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; font-size:13px; padding:6px 0} .mg-ack.q{background:#FFF7E0; border-radius:10px; padding:8px 10px} .mg-tag{font-size:11px; padding:1px 7px; border-radius:99px; background:var(--accent2-soft); color:var(--accent2-text); margin-left:6px} /* ==== 仮の評価・お知らせ end ==== */ /* 個別の宿題の一覧：ひとこと付きの決まりは、生徒の札に返事の状態（質問あり＝止まっている／確認待ち） */ .ik-bstu i{font-style:normal; font-size:11px; margin-left:6px; opacity:.75} .ik-bstu.asked{background:#FFF3C4; color:#7A5A00} .ik-bstu.asked i{opacity:1} /* ==== 教科の色と、濃い宿題チェックの札（09-13、本人の指示）==== 教科の色は**薄い**グラデーション（左上から差して消える）。国語＝赤とピンクの間、数学（算数）＝青、 理科＝緑、社会＝黄、英語＝緑と青の間。付く所：講師の今日やることの札・時間割のコマ・成績のコースの札、 生徒の宿題タブの教科の札。宿題チェックの札（輪の札）だけは濃い青 ―― 薄い教科の色の中で、主役が目に入るように。 */ .sj-japanese{--sjc:226,74,108} .sj-math{--sjc:0,91,172} .sj-science{--sjc:34,150,84} .sj-social{--sjc:240,170,0} .sj-english{--sjc:0,140,150} #main .dk-task.sjt, #main .week .slot.sjt, #main .ik-card.sjt, #main .pg-card.sjt, #main .hw-sec.sjt{ background:linear-gradient(160deg, rgba(var(--sjc), var(--sja, .21)) 0%, rgba(var(--sjc), calc(var(--sja, .21) * .42)) 52%, rgba(var(--sjc), 0) 100%), var(--surface)} #main .week .slot.paper.sjt{--sja:.085; box-shadow:none} /* 紙のままのコースは薄いまま */ #main .hw-secs.later .hw-sec.sjt{--sja:.10} /* 来週の分は控えめ */ :root[data-theme="dark"] .sjt{--sja:.36} /* 暗い地では少し強く */ :root[data-theme="dark"] .week .slot.paper.sjt{--sja:.14} :root[data-theme="dark"] .hw-secs.later .hw-sec.sjt{--sja:.17} /* 宿題チェックの札：青と黄のグラデーションに戻す（前より3割濃い）。字は濃い色。輪は途切れのない1本、中に数は書かない。 広い画面（札が教科の左に立つ）では輪を大きく ―― 左のほぼ半分が輪、右に4行。横長のときは小さい輪のまま。 */ #main .dk-today .dk-hero, #main .dk-today .dk-hero.fin, #main .dk-today .dk-hero.wait{ color:var(--text); box-shadow:var(--card-shadow); background: radial-gradient(120% 95% at 8% 6%, rgba(249,185,0,.60) 0%, rgba(249,185,0,0) 60%), radial-gradient(90% 85% at 92% 8%, rgba(255,232,150,.85) 0%, rgba(255,232,150,0) 60%), radial-gradient(110% 110% at 88% 106%, rgba(46,134,214,.55) 0%, rgba(46,134,214,0) 62%), radial-gradient(80% 70% at 2% 100%, rgba(100,180,242,.29) 0%, rgba(100,180,242,0) 58%), linear-gradient(150deg, #FFEFC4 0%, #EFE7D2 55%, #D3E3F5 100%)} .dk-today .dk-hero .dk-hc{gap:2px} .dk-today .dk-hero .dk-hc b{color:var(--text); font-size:19px; font-weight:500; letter-spacing:-.01em; line-height:1.3} .dk-today .dk-hero .dk-hc .dk-left{font-size:30px; font-weight:300; letter-spacing:-.03em; line-height:1.15; color:var(--text); margin:2px 0 4px} .dk-today .dk-hero .dk-hc span{color:var(--text2)} .dk-today .dk-hero .dk-hc .dk-hs{color:var(--text2); font-size:13px; line-height:1.45} .dk-today .dk-hero.wait .tiny{color:var(--text2)} .dk-today .dk-ring circle{stroke-width:10} .dk-today .dk-ring .trk{stroke:rgba(0,91,172,.16)} .dk-today .dk-ring .val{stroke:var(--accent); stroke-linecap:round} .dk-today .dk-hero.fin .dk-ring .val{stroke:var(--accent2)} .dk-today .dk-rc .dk-tick{background:var(--accent2); color:var(--accent2-ink)} /* 輪の中は残りの件数（大きさは輪に合わせる）。fin のときは印 */ .dk-today .dk-ringwrap{container-type:inline-size} .dk-today .dk-rc .dk-big{font-size:38cqi; font-weight:300; letter-spacing:-.03em; line-height:1; color:var(--text)} @container bento (min-width:840px){ /* 札が教科の左に立つとき：輪は左のほぼ半分（札の幅の50%、最大210px）。 文字の塊は、輪と札の右端の**ちょうど中間**に置く（左右の比がどうでも）：右の列を残り全部にして、その中で中央寄せ。 */ .dk-today .dk-hero, .dk-today .dk-hero.fin{grid-template-columns:auto minmax(0,1fr); gap:16px 18px; padding:22px 22px; container-type:inline-size} .dk-today .dk-ringwrap{width:clamp(130px, 50cqi, 210px); height:auto; aspect-ratio:1 / 1} .dk-today .dk-hero .dk-hc{justify-self:center; align-items:flex-start; text-align:left} } :root[data-theme="dark"] #main .dk-today .dk-hero, :root[data-theme="dark"] #main .dk-today .dk-hero.fin, :root[data-theme="dark"] #main .dk-today .dk-hero.wait{ background:radial-gradient(120% 95% at 8% 6%, rgba(249,185,0,.26) 0%, rgba(249,185,0,0) 60%), radial-gradient(110% 110% at 88% 106%, rgba(46,134,214,.34) 0%, rgba(46,134,214,0) 62%), linear-gradient(150deg, #29251A 0%, #1B2230 100%)} /* 今日おわった：生徒の「終わった宿題」と同じ灰色の面で控えめに（数学の青と同じ色になっていた） */ #main .dk-today .dk-done{background:var(--sunk); box-shadow:none} /* 達成系の黄（今週の目標・達成の帯・今週の宿題・先生のことば・今週解いた問題・正答率と続けた日の --tint-warm）： 濃い色はそのまま、濃い所を狭く・薄い面を広く（本人の指示） */ :root{--tint-warm:linear-gradient(160deg, #FFF0C9 0%, #FFF8E8 26%, #FFFFFF 58%)} #main .w-goal.hit{background:linear-gradient(150deg, var(--accent2-fill) 0%, color-mix(in srgb, var(--accent2) 30%, var(--surface)) 30%, color-mix(in srgb, var(--accent2) 8%, var(--surface)) 100%)} #main .ch-banner{background:linear-gradient(120deg, var(--accent2-fill) 0%, color-mix(in srgb, var(--accent2) 26%, var(--surface)) 34%, color-mix(in srgb, var(--accent2) 8%, var(--surface)) 100%)} #main .hw-wk{background:radial-gradient(120% 120% at 0% 0%, rgba(249,185,0,.22) 0%, rgba(249,185,0,0) 40%), radial-gradient(130% 130% at 100% 100%, rgba(0,91,172,.14) 0%, rgba(0,91,172,0) 64%), var(--surface)} #main .ch-words{background:radial-gradient(120% 120% at 0% 0%, rgba(249,185,0,.22) 0%, rgba(249,185,0,0) 38%), radial-gradient(130% 130% at 100% 100%, rgba(0,91,172,.14) 0%, rgba(0,91,172,0) 62%), var(--surface)} #main .w-home .rk.w-marble{background:radial-gradient(90% 150% at 0% 0%, rgba(249,185,0,.22) 0%, rgba(249,185,0,0) 36%), radial-gradient(110% 160% at 100% 100%, rgba(0,91,172,.18) 0%, rgba(0,91,172,0) 62%), var(--surface)} /* ==== この画面で赤を入れる（iPad・ペン）09-13 ==== 添削の札の②に2つの口：この画面で書く（ペン・指・マウス）／撮った写真を選ぶ。 紙（.dk-draw）は写真の上に canvas を重ね、線は写真の画素の座標で持つ。 */ .dk-step.dk-two{grid-template-rows:auto auto auto} .dk-step.dk-two i{grid-row:1 / span 3} .dk-two-acts{grid-column:2; grid-row:3; display:flex; gap:6px; flex-wrap:wrap; margin-top:4px} .dk-mini{position:relative; font:inherit; font-size:11.5px; line-height:1; padding:6px 10px; border-radius:99px; border:0; background:var(--accent-soft); color:var(--accent); cursor:pointer; white-space:nowrap; min-height:28px} .dk-mini.pri{background:var(--accent); color:#fff} .dk-mini input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer} .dk-mini:disabled{opacity:.5; cursor:default} .dk-step.off .dk-two-acts{display:none} .sheet.dk-draw{width:min(1000px, calc(100vw - 24px)); max-height:min(94vh, 1100px)} .dk-draw-body{display:flex; flex-direction:column; gap:10px; padding-bottom:14px} .dk-draw-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .dk-draw-pens, .dk-draw-w{display:flex; gap:2px; padding:3px; border-radius:12px; background:var(--sunk)} .dk-pen, .dk-pw{display:flex; align-items:center; gap:6px; border:0; background:transparent; font:inherit; font-size:12px; padding:6px 10px; border-radius:9px; cursor:pointer; color:var(--text2); min-height:32px} .dk-pen i{width:14px; height:14px; border-radius:50%; background:var(--pen)} .dk-pw i{display:inline-block; border-radius:50%; background:var(--text)} .dk-pen.on, .dk-pw.on{background:var(--surface); color:var(--text); box-shadow:var(--shadow)} .dk-draw-sp{flex:1} .dk-draw-stage{position:relative; align-self:center; max-width:100%; line-height:0; background:var(--sunk); border-radius:12px; overflow:hidden} .dk-draw-img{display:block; max-width:100%; max-height:min(64vh, 860px); width:auto; height:auto; user-select:none; -webkit-user-select:none; pointer-events:none} .dk-draw-cv{position:absolute; left:0; top:0; width:100%; height:100%; touch-action:none; cursor:crosshair} .dk-draw-stage .dk-pg{z-index:2} .dk-draw-foot{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap} .dk-draw-foot .dk-note{flex:1; min-width:220px} .dk-draw-acts{display:flex; align-items:center; gap:10px; margin-left:auto} .dk-draw-acts .tiny{white-space:nowrap} @media (max-width:700px){ .sheet.dk-draw{width:calc(100vw - 12px); max-height:96vh} .dk-draw-img{max-height:58vh} } /* ==== 導入の段階（講師：導入と進度の上半分。09-23。09-24 に「表とはしご」の形へ： 言葉は列の見出しに1回、行は名前とはしごと今の段階の言葉だけ。今の段階までを塗って積み上げを形で言う）==== */ .use-wrap{max-width:1180px; display:grid; gap:12px} .use-lead{display:flex; flex-direction:column; gap:4px; margin:6px 0 0} .use-lead b{font-weight:600; font-size:18px} .use-lead span{font-size:14px; color:var(--text2); line-height:1.6} .use-hd, .use-row{display:grid; grid-template-columns:minmax(170px, 250px) minmax(0, 1fr) 140px; align-items:center; gap:16px} .use-hd{padding:4px 18px 0} .use-grp{display:grid; padding:6px 18px 8px; border-radius:20px; background:var(--surface); box-shadow:var(--card-hi), var(--card-shadow)} .use-row{min-height:60px; padding:7px 0} .use-row + .use-row{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--line) 55%, transparent)} .use-row.grp .use-name b{font-size:19px; font-weight:600} .use-name{display:flex; flex-direction:column; gap:1px; min-width:0} .use-name b{font-size:17px; font-weight:500; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .use-name .tiny{font-size:12px} /* はしご：溝の中に5段。押した段まで塗る */ .use-lad{display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; padding:4px; border-radius:999px; background:var(--sunk)} .use-lad.hd{background:none; padding:0 4px; align-items:end} .use-st{position:relative; min-height:44px; border:0; border-radius:999px; background:transparent; color:var(--text3); font:inherit; font-family:var(--sans); font-size:13px; cursor:pointer; transition:background .15s, color .15s} .use-st span{opacity:.7} .use-st.on{background:color-mix(in srgb, var(--accent) 18%, var(--surface)); color:var(--accent)} .use-st.on span{opacity:.9} .use-st.cur{background:var(--accent); color:#fff; box-shadow:0 1px 3px rgba(0,78,147,.35)} .use-st.cur span{opacity:1; font-weight:700} .use-st.u0.cur{background:var(--surface); color:var(--text2); box-shadow:0 1px 3px rgba(23,21,15,.16), 0 0 0 .5px rgba(23,21,15,.06)} .use-st:hover:not(.cur):not(.hd){background:color-mix(in srgb, var(--accent) 12%, var(--sunk)); color:var(--accent)} .use-st:focus-visible{outline:2px solid var(--accent); outline-offset:1px} .use-st[disabled]{opacity:.5; cursor:default} .use-st.hd, .use-st.hd:hover{min-height:0; padding:0 4px 6px; cursor:default; text-align:center; background:none; color:var(--text2)} .use-st.hd b{display:block; font-size:14px; font-weight:600; color:var(--text); line-height:1.3; white-space:nowrap} .use-st.hd i{display:block; font-style:normal; font-size:11.5px; line-height:1.35; color:var(--text3); margin-top:2px} .use-word{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--accent); text-align:right; white-space:nowrap} .use-word.u0, .use-word.mix{color:var(--text3); font-weight:500} /* iPad の幅まで：名前と今の段階を1行、はしごをその下に幅いっぱい。見出しの説明は畳む（言葉だけ） */ @media (max-width: 1100px){ .use-hd{grid-template-columns:1fr; padding:0 18px} .use-hd .use-c1, .use-hd .use-c3, .use-st.hd i{display:none} .use-st.hd b{font-size:13px} .use-row{grid-template-columns:1fr auto; grid-template-areas:"name word" "lad lad"; gap:4px 12px; padding:10px 0} .use-row .use-name{grid-area:name} .use-row .use-word{grid-area:word} .use-row .use-lad{grid-area:lad} } :root[data-theme="dark"] .use-st.u0.cur{background:var(--surface2); box-shadow:0 1px 3px rgba(0,0,0,.5)} .pg-sub{margin:22px 0 4px} .pg-sub h3{margin:0; font-size:20px; letter-spacing:-.02em; font-weight:600} /* 宿題チェック：写真を使わない段階の断り */ .dk-usenote{margin:6px 0 10px} .dk-fix-off p{margin:4px 0 10px; line-height:1.7} /* ==== 面のふち（09-23 本人：ウィジェットの輪郭が薄く、地と同化している。 線は引かない。Apple のウィジェットのように、影と面の明度差、上辺の光で立たせる）==== */ :root{ --bg:#EFEFF3; /* 地をひとつ沈める。白い面との差で輪郭が立つ */ --surface2:#ECECF0; --sunk:#E4E4EA; --card-hi:inset 0 1px 0 rgba(255,255,255,.9); /* 上辺の光 */ --card-shadow:0 0 0 .5px rgba(23,21,15,.07), /* 髪の毛ほどのふち（線ではなく、影の縁） */ 0 1px 2px rgba(23,21,15,.07), 0 12px 30px -14px rgba(23,21,15,.32); } :root[data-theme="dark"]{ --bg:#000000; --surface:#151413; --surface2:#242220; --sunk:#1C1B19; --card-hi:inset 0 1px 0 rgba(255,255,255,.07); --card-shadow:0 0 0 .5px rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.6), 0 12px 30px -14px rgba(0,0,0,.85); } html, body{background:var(--bg)} /* 影の付く面を増やす（前は札の一部だけだった）。行や入力欄には付けない。 */ #main .card, #main .panel, #main .w-plain, #main .w-home > .w, #main .dcard, #main .dk-task, #main .dk-done, #main .dk-hero, #main .ik-card, #main .pg-card, #main .pg-panel, #main .use-grp, #main .ap-row, #main .nt, #main .mg-item, #main .mg-row, #main .next, #main .push, #main .gauge, #main .hw-wk, #main .hw-sec, #main .w-grow, #main .w-acc, #main .w-goal, #main .w-strip, #main .w-run, #main .rk, #main .hw-fintg, #main .ch-words, #main .ch-tile, #main .sublist .subrow, #main .week .slot, .lg-card, .lg-sheet .demo-pick{ box-shadow:var(--card-hi), var(--card-shadow)} #main .w-blue, #main .next.w-blue{box-shadow:0 1px 2px rgba(10,79,143,.25), 0 12px 30px -14px rgba(10,79,143,.6), 0 0 0 .5px rgba(10,79,143,.25)} #main .w-marble{box-shadow:0 1px 2px rgba(10,79,143,.2), 0 14px 34px -16px rgba(10,79,143,.55), 0 0 0 .5px rgba(10,79,143,.2)} #main .ap-row.off{box-shadow:none} .sheet{box-shadow:0 0 0 .5px rgba(23,21,15,.08), 0 24px 70px rgba(0,0,0,.24)} /* ==== うまく動かないとき（報告。09-30）==== */ .rp-card{max-width:680px} .rp-card h1{font-size:26px; margin-bottom:6px} .rp-card .mg-form{margin-top:14px} .rp-acts{display:flex; gap:10px; margin-top:14px} .rp-acts .btn{width:auto; min-width:120px} /* ==== 毎日テストを使っていない生徒の「自分の記録」：札は2枚（成績の伸び・これまでの宿題）。どの幅でも行を埋める ==== */ #main .wgrid.w-nodaily > *{grid-column:1 / -1} @container bento (min-width:900px){ #main .wgrid.w-nodaily{grid-template-columns:repeat(2, minmax(0, 1fr))} #main .wgrid.w-nodaily > *{grid-column:auto} } /* ==== あたらしい合言葉（引き換えのあと、1回だけ見せる）==== */ .np-card h1{font-size:26px; margin-bottom:8px} .np-row{display:flex; flex-direction:column; gap:2px; margin:14px 0; padding:14px 16px; border-radius:16px; background:var(--sunk)} .np-v{font-size:22px; font-weight:600; letter-spacing:.01em; word-break:break-all} .np-pw{font-family:var(--mono); font-size:24px; color:var(--accent)} /* ==== 入口：あいことばを見えるようにする／引き換え・新しい合言葉の画面（09-30 第三者の検査から）==== */ .lg-show{display:block; min-height:44px; margin:-6px 0 8px; padding:0 2px; text-align:left} .np-card .btn + .btn{margin-top:10px} .np-card .loginmsg{margin-top:12px} .np-pw{word-break:normal; overflow-wrap:normal} .np-sure{background:#17150F} /* ==== 対面採点（なぞるだけ採点。ui-desk.js faceHtml）==== */ .fc-modes{display:inline-flex; width:max-content; max-width:100%; justify-self:start; gap:4px; padding:4px; border-radius:14px; background:var(--sunk); margin:6px 0 16px} .fc-modes button{border:0; background:transparent; font:inherit; font-size:14px; padding:8px 16px; border-radius:10px; color:var(--text2); cursor:pointer} .fc-modes button.on{background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 2px 8px -4px rgba(23,21,15,.3)} .fc-tool{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px} .fc-tool label{font-size:13px; color:var(--text2)} .fc-tool input{width:120px; padding:10px 12px; border:0; border-radius:12px; background:var(--sunk); font-size:18px; font-weight:600} .fc-tool .tiny{flex:1; min-width:220px} .fc-rows{display:flex; flex-direction:column; gap:8px} .fc-row{display:grid; grid-template-columns:86px minmax(0, 1fr) 84px 44px; align-items:center; gap:12px; padding:10px 14px; border-radius:18px; background:var(--surface); box-shadow:0 10px 26px -20px rgba(23,21,15,.35)} .fc-id{font-size:19px; font-weight:700; letter-spacing:.02em} .fc-track{display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; height:52px; border-radius:14px; background:var(--sunk); padding:4px; touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none} .fc-track i{display:flex; align-items:center; justify-content:center; border-radius:10px; font-style:normal; color:var(--text3); transition:background .12s, color .12s, transform .12s} .fc-track i b{font-size:18px; font-weight:600} .fc-track.v5 i.on, .fc-track.v4 i.on{background:var(--accent); color:#fff} .fc-track.v3 i.on{background:var(--accent2-fill, #F9B900); color:var(--accent2-ink, #3a2c00)} .fc-track.v2 i.on, .fc-track.v1 i.on{background:var(--accent2-text, #9a6a00); color:#fff} .fc-track:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .fc-word{font-size:13px; color:var(--text2); white-space:nowrap} .fc-clear{font-size:12px; justify-self:end} @media (max-width:560px){ .fc-row{grid-template-columns:68px minmax(0, 1fr) 40px; gap:8px; padding:10px 10px} .fc-word{display:none} .fc-id{font-size:17px} } /* Mac の Safari は、素の