@charset "utf-8"; /* aok-net.com テキスト版 モダン演出レイヤー (2026-08) textwebr-light/-dark/-base.css の後に読み込む(head.php)。 本文の表示(情報層)には手を加えず、装飾・補助UIだけを追加する: - 枠外背景のオーロラ (要素は theme.js が注入) - 配色切替ボタン / フローティングメニュー (theme.js が注入。メニューはマウス専用) - トップページ限定のドローンショー (index.php + starshow.js) 既定はダークモード。ライトは で切り替わる。 デザイン検証の経緯は design-preview/ を参照 */ /* ============ 画面全体の下地 (枠外) ============ */ /* html にも同色を設定する: head.php のインライン下地(中間グレー)を読み込み完了後に上書きし、 スクロールで body の背景が尽きた領域にグレーが露出しないようにする */ html { background-color: #0B101C; } /* 環境光: わずかに明るい紺黒 (旧 #04060D) */ :root[data-theme="light"] { background-color: #E7EBF3; } body { background-color: #0B101C; } :root[data-theme="light"] body { background-color: #E7EBF3; } /* ページ読み込み時のフェードイン: head.php のインラインstyleが敷く中間グレーの上に、ページ全体がフワッと現れる。 (opacity の初期値は指定せず、アニメーション未対応・CSS未読込時は通常表示になる) */ body { animation: ks-page-in .7s ease-out; } /* 読み込みフェードは一度きり。完了後は theme.js が ks-anim-done を付与して無効化し、 配色切替などのスタイル再計算でアニメーションが再発火する(画面がフラッシュする)のを防ぐ */ :root.ks-anim-done body { animation: none; } @keyframes ks-page-in { from { opacity: 0; } } /* 配色切替のクロスフェードは View Transitions API で行う(theme.js が document.startViewTransition() 経由でテーマを切り替える)。 切替前後のページ全体のスナップショットを合成レイヤーで重ねて一度だけクロスフェード するため、背景・標準文字・リンク・見出し・画像がすべて同時に切り替わる。 ※要素ごとの CSS トランジションは使わないこと: 色を継承する子孫要素の再計算に 引きずられて h2/hr/kbd 等のフェードが毎フレーム再スタートし二重・長期化する (Chromium の挙動として実測確認済み)。非対応ブラウザは即時切替となる */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .8s; animation-timing-function: ease; } #textbox { position: relative; z-index: 1; /* オーロラより前面 */ margin-top: 28px; /* 画面上部にも枠外背景の空間を設け、カードの浮遊感を出す */ margin-bottom: 40px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); /* カードの浮遊感(装飾) */ } /* スマホでは本文領域を優先し、上下の余白は最小限にする */ @media (max-width: 720px) { #textbox { margin-top: 8px; margin-bottom: 12px; } } :root[data-theme="light"] #textbox { box-shadow: 0 18px 50px rgba(40, 60, 110, .18); } /* ============ 本文内の共通部品 ============ */ /* サムネイル画像(動画・公式Webなど)。カードの角丸と響き合う12pxの角丸で統一 */ #textbox img.thumb { display: block; max-width: min(480px, 100%); height: auto; border-radius: 12px; margin: 4px 0 8px; } /* 日付など、途中で折り返したくない語句 */ .nowrap { white-space: nowrap; } /* スクロール連動のフェードイン(サムネイル画像のブロック) .ks-reveal は theme.js が JS有効かつモーション抑制でない場合のみ付与するため、 JS無効環境では最初から通常表示になる。opacity での表示制御のため読み上げには影響しない */ .ks-reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.2s ease, transform 1.2s ease; } .ks-reveal.ks-reveal-in { opacity: 1; transform: none; } /* ============ トップページのロゴ: 配色に応じて切り替え ============ ダーク=ksdlog2.png / ライト=ksdlog.png。display:none 側は読み上げ対象からも外れる */ .logo-light { display: none; } :root[data-theme="light"] .logo-dark { display: none; } :root[data-theme="light"] .logo-light { display: inline; } /* ============ 枠内の旧壁紙(右端の縦縞)をダークでは非表示 ============ セクション色分けのGIF壁紙はモダンなダークデザインと合わないため外す。 ライトモードでは従来どおり表示する */ :root:not([data-theme="light"]) div.top, :root:not([data-theme="light"]) div.top1, :root:not([data-theme="light"]) div.top2, :root:not([data-theme="light"]) div.top3, :root:not([data-theme="light"]) div.top4, :root:not([data-theme="light"]) div.top5, :root:not([data-theme="light"]) div.top6, :root:not([data-theme="light"]) div.top9 { background-image: none; } /* ============ 枠外オーロラ (純装飾・aria-hidden) ============ */ .aurora { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; margin: 0; /* textwebr の div{margin-left:10px} を打ち消す */ overflow: hidden; pointer-events: none; } .aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); will-change: transform; } .aurora .b1 { width: 55vw; height: 55vw; left: -12vw; top: -18vw; background: radial-gradient(circle, rgba(80, 105, 255, .65), transparent 65%); animation: ksdrift1 11s ease-in-out infinite alternate; } .aurora .b2 { width: 48vw; height: 48vw; right: -14vw; top: 4vh; background: radial-gradient(circle, rgba(0, 210, 180, .52), transparent 65%); animation: ksdrift2 14s ease-in-out infinite alternate; } .aurora .b3 { width: 44vw; height: 44vw; left: 8vw; bottom: -20vw; background: radial-gradient(circle, rgba(220, 30, 150, .46), transparent 65%); animation: ksdrift3 17s ease-in-out infinite alternate; } .aurora .b4 { width: 30vw; height: 30vw; right: 6vw; bottom: -8vw; background: radial-gradient(circle, rgba(255, 215, 94, .30), transparent 65%); animation: ksdrift1 20s ease-in-out infinite alternate-reverse; } .aurora .b5 { /* 画面上部センターを横に流れる横長の光(上部の枠外空間用) */ width: 62vw; height: 30vw; left: 19vw; top: -20vw; background: radial-gradient(circle, rgba(120, 95, 255, .42), transparent 65%); animation: ksdrift4 23s ease-in-out infinite alternate; } :root[data-theme="light"] .aurora i { filter: blur(80px); } :root[data-theme="light"] .aurora .b1 { background: radial-gradient(circle, rgba(64, 86, 244, .22), transparent 65%); } :root[data-theme="light"] .aurora .b2 { background: radial-gradient(circle, rgba(0, 150, 130, .18), transparent 65%); } :root[data-theme="light"] .aurora .b3 { background: radial-gradient(circle, rgba(200, 40, 140, .14), transparent 65%); } :root[data-theme="light"] .aurora .b4 { background: radial-gradient(circle, rgba(255, 190, 40, .14), transparent 65%); } :root[data-theme="light"] .aurora .b5 { background: radial-gradient(circle, rgba(110, 90, 240, .15), transparent 65%); } @keyframes ksdrift1 { from { transform: translate(-10vw, -8vh) scale(1); } to { transform: translate(16vw, 16vh) scale(1.4); } } @keyframes ksdrift2 { from { transform: translate(8vw, -12vh) scale(1.2); } to { transform: translate(-18vw, 12vh) scale(.85); } } @keyframes ksdrift3 { from { transform: translate(-8vw, 12vh) scale(1); } to { transform: translate(18vw, -14vh) scale(1.35); } } @keyframes ksdrift4 { /* 上部を左右にゆっくり往復 */ from { transform: translate(-15vw, 1vh) scale(1); } to { transform: translate(15vw, 5vh) scale(1.25); } } /* OSのモーション抑制設定を尊重して停止 */ @media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } body { animation: none; } .fm-item.fm-open .fm-sub { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } #stars-canvas, .float-menu, .ui-buttons button { transition: none !important; } } /* ============ 配色切替ボタン (theme.js が注入・DOM末尾) ============ */ .ui-buttons { position: fixed; top: 28px; /* 本文カードの上端(margin-top: 28px)と揃える */ right: 12px; z-index: 1000; display: flex; gap: 8px; } @media (max-width: 720px) { .ui-buttons { top: 8px; } /* スマホのカード上端(8px)に合わせる */ } .ui-buttons button { font-size: 15px; font-family: inherit; line-height: 1.4; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 14, 24, .6); color: #EDF1F7; backdrop-filter: blur(6px); cursor: pointer; transition: border-color .35s ease, box-shadow .35s ease, color .35s ease; } /* マウスオーバー中は境界をフワッと強調(フローティングメニューと同じ質感) */ .ui-buttons button:hover { border-color: rgba(189, 254, 250, .6); color: #bdfefa; box-shadow: 0 0 22px rgba(120, 150, 255, .4); } .ui-buttons button:focus { outline: 4px solid #FFD400; outline-offset: 2px; } :root[data-theme="light"] .ui-buttons button { border-color: rgba(20, 30, 60, .35); background: rgba(255, 255, 255, .65); color: #23272F; } :root[data-theme="light"] .ui-buttons button:hover { border-color: rgba(0, 85, 170, .55); color: #0055AA; box-shadow: 0 0 20px rgba(30, 80, 200, .3); } /* 右側の枠外余白が確保できる幅では、ボタン列をカード右端に「付かず離れず」で置く。 縮小・拡大・配色切替の3ボタンを1つの枠(幅約256px)として計算し、 列の左端がカード右端+メニューと同じ隙間 clamp(12px, 空き/2, 80px) に来るよう右から配置する。 (右オフセット = 余白(50vw-540px) - 列幅256px - 隙間。空き = 余白 - メニュー幅210px = 50vw-750px) 余白が列幅に満たない中間の幅では、画面右端から12pxを最低確保してはみ出しを防ぐ */ @media (min-width: 1380px) { .ui-buttons { left: auto; right: max(12px, calc(50vw - 796px - clamp(12px, (50vw - 750px) / 2, 80px))); } } /* 読み上げ専用テキスト(切替結果の通知) */ .ks-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============ フローティングメニュー (theme.js が注入・マウス専用) ============ 本文のメインメニューと重複するため読み上げ・Tab移動の対象外 (aria-hidden + tabindex=-1)。 左側の枠外余白が十分に確保できる幅のときだけ表示する */ .float-menu { display: none; } @media (min-width: 1520px) { .float-menu { display: block; position: fixed; top: 50%; transform: translateY(-50%); /* カード(1080px)の左に「付かず離れず」で置く: 余白が狭いうちは余白の中央、広い画面ではカード左端から最大80pxに留まる (余白 = 50vw-540px、空き = 余白-メニュー幅210px、隙間 = min(空き/2, 80px)) */ left: calc(50vw - 750px - min((50vw - 750px) / 2, 80px)); width: 210px; box-sizing: border-box; /* パディング・枠線込みで幅210pxにする(左右の余白計算を正確にするため) */ z-index: 500; padding: 10px 8px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 14, 24, .55); backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); transition: border-color .35s ease, box-shadow .35s ease; } /* マウスオーバー中は境界をフワッと強調(明るい枠線+やわらかな光) */ .float-menu:hover { border-color: rgba(189, 254, 250, .6); box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 0 26px rgba(120, 150, 255, .4); } /* 見出し「メニュー」: クリックでホームへもどるリンクを兼ねる */ .float-menu .fm-title { display: block; margin: 2px 2px 6px; padding: 2px 10px; border-radius: 8px; font-size: 13px; letter-spacing: .15em; color: #FFFF00; /* 見出しと同じ黄色 */ text-decoration: none; } .float-menu .fm-title:hover { background: rgba(96, 140, 255, .3); text-decoration: underline; } .float-menu a { display: block; font-size: 15px; line-height: 1.5; padding: 7px 12px; margin: 0; border-radius: 10px; color: #bdfefa; /* 本文リンクと同じ水色 */ text-decoration: none; white-space: nowrap; /* 項目は1行で表示する */ } .float-menu a:hover { background: rgba(96, 140, 255, .3); color: #FFFF00; } /* サブメニュー(マウスオーバーで右側=本文カード側へ展開) */ /* textwebr の全div対象ルール(div{margin-left:10px})を打ち消し、他の項目と左位置を揃える */ .fm-item { position: relative; margin: 0; } .fm-sub, .fm-panel { margin: 0; } .fm-has-sub::after { content: "▸"; float: right; margin-left: 6px; color: #9AA6B8; } .fm-sub { display: none; position: absolute; top: -8px; left: 100%; padding-left: 10px; /* 親項目との隙間(透明ブリッジ。ホバーが途切れない) */ width: 220px; } /* .fm-open は theme.js が付与。開くとき100ms(通過時の誤開閉防止)、 閉じるとき350ms(サブメニューへの斜め移動の猶予)のタイマーで制御する */ .fm-item.fm-open .fm-sub { display: block; animation: ks-fm-in .28s ease; /* フワッとフェードインで現れる */ } @keyframes ks-fm-in { from { opacity: 0; transform: translateX(-6px); } } .fm-item:hover > a, .fm-item.fm-open > a { background: rgba(96, 140, 255, .3); color: #FFFF00; } .fm-panel { padding: 8px; max-height: calc(100vh - 24px); /* 画面が低くても必ず収まり、超過分は内部スクロール */ overflow-y: auto; border-radius: 14px; /* 開いている間は常にアクティブ扱いとして、境界を明るい枠線+光で強調する */ border: 1px solid rgba(189, 254, 250, .55); background: rgba(8, 11, 20, .93); /* 本文に重なっても読めるよう不透明度高め */ backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 22px rgba(120, 150, 255, .35); } .fm-panel a { display: block; font-size: 15px; line-height: 1.5; padding: 6px 12px; margin: 0; border-radius: 10px; color: #bdfefa; text-decoration: none; } .fm-panel a:hover { background: rgba(96, 140, 255, .3); color: #FFFF00; } /* サブメニュー内のグループ区切り線 */ .fm-panel .fm-sep { border: none; height: 1px; margin: 6px 10px; background: rgba(255, 255, 255, .25); } /* ライトモードの配色 */ :root[data-theme="light"] .float-menu { border-color: rgba(20, 30, 60, .18); background: rgba(255, 255, 255, .6); box-shadow: 0 12px 40px rgba(40, 60, 110, .18); } :root[data-theme="light"] .float-menu:hover { border-color: rgba(0, 85, 170, .55); box-shadow: 0 12px 40px rgba(40, 60, 110, .18), 0 0 24px rgba(30, 80, 200, .3); } :root[data-theme="light"] .float-menu .fm-title { color: #6500A8; } :root[data-theme="light"] .float-menu .fm-title:hover { background: rgba(11, 87, 208, .12); } :root[data-theme="light"] .float-menu a { color: #0055AA; } :root[data-theme="light"] .float-menu a:hover, :root[data-theme="light"] .fm-item:hover > a, :root[data-theme="light"] .fm-item.fm-open > a { background: rgba(11, 87, 208, .12); color: #003C77; } :root[data-theme="light"] .fm-has-sub::after { color: #5B6472; } :root[data-theme="light"] .fm-panel { border-color: rgba(0, 85, 170, .5); background: rgba(255, 255, 255, .96); box-shadow: 0 12px 40px rgba(40, 60, 110, .22), 0 0 20px rgba(30, 80, 200, .25); } :root[data-theme="light"] .fm-panel a { color: #0055AA; } :root[data-theme="light"] .fm-panel .fm-sep { background: rgba(20, 30, 60, .2); } :root[data-theme="light"] .fm-panel a:hover { background: rgba(11, 87, 208, .12); color: #003C77; } } /* ============ ドローンショー (index.php のメインメニュー横・純装飾) ============ */ .menu-wrap { position: relative; margin: 0; } /* div既定の字下げを打ち消し、本文と左位置を揃える */ #stars-canvas { position: absolute; top: 0; right: 0; width: 60%; height: 100%; pointer-events: none; /* リンク操作を妨げない */ z-index: 0; } .menu-wrap > :not(#stars-canvas) { position: relative; z-index: 1; } /* 狭い画面ではメニュー横に余白がないため表示しない */ @media (max-width: 720px) { #stars-canvas { display: none; } } /* ライトモードは白基調のイメージに合わないため表示しない(配色切替時はフェードで消える/現れる) */ #stars-canvas { transition: opacity .8s ease; } :root[data-theme="light"] #stars-canvas { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }