/* * グリーンタイピングチャレンジ共通スタイル * 小学生版・中高生版で共通の見た目・アニメーション・レイアウトをまとめたもの * （共通ヘッダー(#site-header)の下部配置、ドロワーメニュー、ゲーム画面の * 余白確保を含む）。 * 世代別の差分（#word-display の文字サイズ／フォント、#victory-screen の z-index）は * style-typing-elementary.css / style-typing-middle-school.css 側に記述する。 */ :root { --primary-green: #065f46; --accent-green: #10b981; --vh: 1vh; --vw: 1vw; } body { font-family: 'Noto Sans JP', sans-serif; background: radial-gradient(circle at center, #065f46 0%, #064e3b 40%, #022c22 100%); height: 100vh; margin: 0; overflow: hidden; color: #ecfdf5; /* header.php側のを廃止した分、ここでゲーム画面を画面中央に表示する（common.cssのbody{display:flex}を利用）。 */ justify-content: center; align-items: center; padding: 1rem; } /* common.css の body::before（Safari用固定背景の代替疑似要素）を打ち消す。 */ body::before { content: none !important; background: none !important; } .bg-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/leaf.png'); opacity: 0.1; pointer-events: none; } .glass-panel { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); border-radius: 2rem; } #word-display { letter-spacing: 0.1em; font-weight: 800; min-height: 1.2em; display: flex; justify-content: center; flex-wrap: wrap; z-index: 20; } .char { transition: transform 0.2s ease, opacity 0.2s ease; display: inline-block; } .typed { color: #34d399; text-shadow: 0 0 25px rgba(52, 211, 153, 0.7); } .untyped { color: rgba(255, 255, 255, 0.15); } .char-mistake { color: #f87171 !important; animation: shake 0.2s ease-in-out; text-shadow: 0 0 15px rgba(248, 113, 113, 0.8); } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .flower-confetti { position: absolute; pointer-events: none; z-index: 50; animation: confetti-fall 3s ease-out forwards; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } .float-anim { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .billboard-anim { animation: billboard-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes billboard-in { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .gold-glow { animation: gold-glow-anim 1s infinite alternate; } @keyframes gold-glow-anim { from { filter: drop-shadow(0 0 5px gold); } to { filter: drop-shadow(0 0 25px #fff700); } } /* ルビ（page-challenge-elementary.phpと同じ方式）の見た目調整。 2026-09-10修正分のHTML（小学生.html）で指定された値に合わせている（rtをエメラルドグリーンで強調表示）。 */ body.is-typing-page :where(ruby) { ruby-align: center; ruby-position: over; -webkit-ruby-position: before; vertical-align: baseline; } body.is-typing-page :where(ruby rt) { font-size: .5em; line-height: 1.1; color: #6ee7b7; user-select: none; font-weight: 700; letter-spacing: .02em; } /* ══════════════ 共通ヘッダー（get_header()）のタイピングページ用上書き ══════════════ header.php/footer.phpは変更せず、共通ヘッダー(#site-header)自体をこのページだけ下部（フッターの位置）に表示するようCSSで調整する（challenge.css・クイズ用style-quiz-core.cssのbody.is-quiz-pageと同じ考え方）。 */ body.is-typing-page #site-header { top: auto; bottom: 0; z-index: 10001; background: #0068b7; height: auto; padding: clamp(4px, .9vw, 7px) 14px; } body.is-typing-page #ruby-toggle { display: none; } body.is-typing-page #hamburger { border: 2px solid #fff; } body.is-typing-page #nav-drawer { z-index: 10000; padding: 40px 40px 120px; } /* Tailwind CDN（cdn.tailwindcss.com）のリセット(Preflight)が img 要素を display:block に上書きしてしまい、ドロワーメニューの矢印アイコン（.nav-link-arrow）がテキストの下に段落ちしてしまうための打ち消し。他ページ（Tailwindを読み込まない）はブラウザ標準のinline表示のままテキストと横並びになるため問題にならない。 */ body.is-typing-page .nav-link-arrow { display: inline-block; } /* #game-containerは画面中央に固定表示されるため、#site-footer（コピーライト）は通常の流し込み配置だと表示されない。#site-headerと同じ下部バーの中央に重ねて表示する（ロゴ・メニューと同じエリアに常に見える状態にする）。 */ body.is-typing-page #site-footer { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 10001; background: transparent; padding: clamp(4px, .9vw, 7px) 0; font-size: 11px; color: rgba(255, 255, 255, .8); white-space: nowrap; pointer-events: none; } /* 画面が狭いとロゴ・メニューだけでバーの横幅を使い切ってしまい重なるため、 #site-headerを画面端から少し持ち上げ、その下（画面の一番端）にもう1段の帯を設けてそこに小さく表示する。 */ @media (max-width: 996px) { body.is-typing-page #site-header { bottom: 18px; } body.is-typing-page #site-footer { left: 0; right: 0; bottom: 0; transform: none; background: var(--primary-color, #0068b7); text-align: center; padding: 2px 10px; font-size: 10px; } } body.is-typing-page.menu-open { padding-right: var(--ms-scrollbar-w, 0px); } @media (max-width: 600px) { body.is-typing-page #site-header { padding: clamp(6px, 2.5vw, 10px) 10px; } } /* #site-headerの実際の高さ（common.cssの--header-h:78px固定＋上下padding）は、旧#quiz-footerのようにvh基準では伸縮しない。ゲーム画面側の下部余白（--footer-h、このあとの#game-container/#nav-drawerで使用）は、その実際の高さと "ぴったり"一致させる（クイズページと同じ計算式）。 */ body.is-typing-page { --footer-h: max(calc(var(--vh) * 10), calc(var(--header-h) + 2 * clamp(4px, .9vw, 7px))); } @media (orientation: portrait) { body.is-typing-page { --footer-h: max(calc(var(--vh) * 13), calc(var(--header-h) + 2 * clamp(4px, .9vw, 7px))); } } @media (max-width: 996px) { body.is-typing-page { --footer-h: max(calc(var(--vh) * 10), calc(18px + var(--header-h) + 2 * clamp(4px, .9vw, 7px))); } } @media (max-width: 996px) and (orientation: portrait) { body.is-typing-page { --footer-h: max(calc(var(--vh) * 13), calc(18px + var(--header-h) + 2 * clamp(4px, .9vw, 7px))); } } @media (max-width: 600px) { body.is-typing-page { --footer-h: max(calc(var(--vh) * 10), calc(18px + var(--header-h) + 2 * clamp(6px, 2.5vw, 10px))); } } @media (max-width: 600px) and (orientation: portrait) { body.is-typing-page { --footer-h: max(calc(var(--vh) * 13), calc(18px + var(--header-h) + 2 * clamp(6px, 2.5vw, 10px))); } } /* ══════════════ ドロワーメニュー／ゲーム画面の調整 ══════════════ ここからは「#site-headerが下部に来る」ことに付随する差分（ドロワー本体の高さ・パディング、ゲーム画面側の余白確保など）。（元: quiz用style-quiz-core.cssの対応ブロックを移植） */ #nav-drawer { z-index: 10000; /* #site-header(10001) より下 */ height: calc(var(--vh) * 100); padding: calc(var(--vh) * 6) calc(var(--vw) * 6) calc(var(--footer-h) + var(--vh) * 6); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #nav-backdrop { display: none; } /* #site-headerは position:fixed で最前面(z-index:10001)に重なるため、ゲーム画面がヘッダーに隠れないよう、ヘッダー分の高さを #game-container 側で確保する。 ※ #game-container 自身は overflow を指定せず（visible のまま）、内容を切り取らない。パネルの box-shadow（下方向に最大 60px 程度広がる）は、はみ出した部分が不透明なヘッダーの裏に回り込んで自然に消えるため、直線的な見切れが起きない。 ※ は上のbodyルールにより縦方向のflex（justify-content:center）になっているため、コンテナの高さを減らすと中央寄せで下にずれてしまう。高さは 100% のままにして padding でヘッダー分を確保する。 ※ 上下の余白は「画面の上端」と「ヘッダーの上端」からの距離が等しくなるようにする。の padding（上 1rem）に対して、下はヘッダー高 + 1rem を確保することで、ヘッダーを除いた見えている領域の上下中央にパネルが来る。 */ #game-container { height: 100%; align-items: flex-start; padding: 1rem 0.5rem calc(var(--footer-h) + 1rem); } /* 極端に狭い画面だけは、内容が隠れて操作できなくなるのを避けるためスクロールを許可する（この場合のみ影が端で切れるが、操作性を優先） */ @media (orientation: landscape) and (max-height: 500px) { #game-container { overflow-y: auto; } } @media (orientation: portrait) and (max-height: 780px) { #game-container { overflow-y: auto; } } #start-screen, #main-game, #result-screen { margin-top: auto; margin-bottom: auto; } #main-game { max-height: 100%; } /* ドロワーのスクロールバー */ #nav-drawer { scrollbar-width: thin; scrollbar-color: var(--primary-color, #0068b7) rgba(255,255,255,.35); } #nav-drawer::-webkit-scrollbar { width: calc(var(--vh) * 1.2); } #nav-drawer::-webkit-scrollbar-track { background: rgba(255,255,255,.35); border-radius: calc(var(--vh) * 1); } #nav-drawer::-webkit-scrollbar-thumb { background: var(--primary-color, #0068b7); border-radius: calc(var(--vh) * 1); border: 1px solid rgba(255,255,255,.6); } #nav-drawer::-webkit-scrollbar-thumb:hover { background: var(--primary-color, #0068b7); opacity: .85; } /* ── PORTRAIT（縦画面） ── */ @media (orientation: portrait) { #nav-drawer { padding: calc(var(--vh) * 4) calc(var(--vw) * 7) calc(var(--footer-h) + var(--vh) * 6); } /* 縦画面はヘッダーの実効高さが増え、さらに特徴カードが縦3段に積まれるため、そのままではスタート画面がヘッダーに隠れてしまう。余白・カード高さを詰めて、スクロールせずに収まるようにする。 */ #start-screen { padding: 1.5rem 1.25rem; } #start-screen h1 { margin-bottom: 0.25rem; } #start-screen > p { margin-bottom: 1rem; } #start-screen .grid { gap: 0.625rem; margin-bottom: 1.25rem; } #start-screen .grid > div { height: auto; padding: 0.75rem 1rem; } #start-button { padding-top: 0.9rem; padding-bottom: 0.9rem; } /* リザルト画面も同様に余白を詰める */ #result-screen { padding: 1.25rem 1rem; } #result-screen h2 { font-size: 1.75rem; margin-bottom: 0.5rem; } #result-screen .grid { gap: 0.625rem; margin-bottom: 0.75rem; } #result-screen .stat-card { padding: 0.625rem 1rem; } #result-screen .stat-card.flex { gap: 0.625rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } #result-screen .space-y-4 > * + * { margin-top: 0.5rem; } #final-score { font-size: 2rem; } #retry-button { padding-top: 0.75rem; padding-bottom: 0.75rem; } } /* ── 横画面で高さに余裕がない端末（ノートPC・タブレット横持ちなど）── ヘッダー分＋シャドウ分の余白を引くと縦方向が不足するため、スタート画面・リザルト画面の余白を詰めて収める。 */ @media (orientation: landscape) and (max-height: 800px) { #start-screen { padding: 1.25rem 1.5rem; } #start-screen h1 { font-size: 2.25rem; margin-bottom: 0.25rem; } #start-screen > p { margin-bottom: 0.75rem; } #start-screen .grid { gap: 0.75rem; margin-bottom: 1rem; } #start-screen .grid > div { height: auto; padding: 0.75rem 1rem; } #start-button { padding-top: 0.75rem; padding-bottom: 0.75rem; } #result-screen { padding: 1.25rem 1.5rem; } #result-screen h2 { font-size: 1.75rem; margin-bottom: 0.5rem; } #result-screen .grid { gap: 0.75rem; margin-bottom: 0.75rem; } #result-screen .stat-card { padding: 0.625rem 1rem; } #result-screen .stat-card.flex { gap: 0.625rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } #result-screen .space-y-4 > * + * { margin-top: 0.5rem; } #final-score { font-size: 2rem; } #retry-button { padding-top: 0.625rem; padding-bottom: 0.625rem; } } /* さらに高さの小さい横画面 */ @media (orientation: landscape) and (max-height: 660px) { #start-screen { padding: 1rem 1.25rem; } #start-screen h1 { font-size: 1.75rem; } #start-screen > p { margin-bottom: 0.5rem; } #start-screen .grid { gap: 0.5rem; margin-bottom: 0.75rem; } #start-screen .grid > div { padding: 0.5rem 0.75rem; } #start-button { padding-top: 0.5rem; padding-bottom: 0.5rem; } #result-screen { padding: 1rem 1.25rem; } #result-screen h2 { font-size: 1.5rem; margin-bottom: 0.375rem; } #result-screen .grid { gap: 0.5rem; margin-bottom: 0.5rem; } #result-screen .stat-card { padding: 0.5rem 0.75rem; } #result-screen .stat-card.flex { gap: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } #result-screen .space-y-4 > * + * { margin-top: 0.375rem; } #final-score { font-size: 1.75rem; } #user-name { padding-top: 0.5rem; padding-bottom: 0.5rem; } #download-btn { padding-top: 0.5rem; padding-bottom: 0.5rem; } #retry-button { padding-top: 0.5rem; padding-bottom: 0.5rem; } } /* ── 画面の小さいスマートフォン（縦画面）── リザルト画面は項目数が多く、上記の圧縮だけでは小型端末でダウンロードボタンがヘッダーに隠れるため、さらに詰める。 */ @media (orientation: portrait) and (max-width: 430px) { #start-screen { padding: 1.25rem 1rem; } #start-screen h1 { margin-bottom: 0.125rem; } #start-screen > p { margin-bottom: 0.625rem; } #start-screen .grid { gap: 0.5rem; margin-bottom: 1rem; } #start-screen .grid > div { padding: 0.5rem 0.75rem; } #start-button { padding-top: 0.75rem; padding-bottom: 0.75rem; } #result-screen { padding: 0.875rem 0.75rem; } #result-screen h2 { font-size: 1.375rem; margin-bottom: 0.375rem; } #result-screen .grid { gap: 0.375rem; margin-bottom: 0.625rem; } #result-screen .stat-card { padding: 0.4375rem 0.75rem; } #result-screen .stat-card.flex { gap: 0.5rem; padding-top: 0.625rem; padding-bottom: 0.625rem; } #result-screen .space-y-4 > * + * { margin-top: 0.375rem; } #final-score { font-size: 1.75rem; } #user-name { padding-top: 0.5rem; padding-bottom: 0.5rem; } #download-btn { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 1rem; } #retry-button { padding-top: 0.5rem; padding-bottom: 0.5rem; } } /* ドロワー内のふりがな（common.jsが#ruby-toggleの状態を見て付与） */ #nav-drawer ruby { ruby-align: center; } #nav-drawer rt { font-size: 0.5em; font-weight: 400; color: inherit; letter-spacing: 0; line-height: normal; } #nav-drawer .nav-group li a rt { font-size: 0.45em; } @media (max-width: 680px) { #nav-drawer rt { font-size: 0.55em; } #nav-drawer .nav-group li a rt { font-size: 0.5em; } }