:root { /* MD3 Dynamic Color Palette - Modern & Trustworthy */ --md-sys-color-primary: #300045; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #EADDFF; --md-sys-color-on-primary-container: #21005D; --md-sys-color-secondary: #625B71; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-surface: #FEF7FF; --md-sys-color-surface-container: #F3EDF7; --md-sys-color-surface-container-high: #ECE6F0; --md-sys-color-surface-container-highest: #E6E0E9; --md-sys-color-on-surface: #1D1B20; --md-sys-color-on-surface-variant: #49454F; --md-sys-color-outline-variant: #CAC4D0; --md-sys-color-outline: #79747E; --md-sys-color-background: #FEF7FF; --md-sys-color-on-background: #1D1B20; /* State Layers (for rgba) */ --md-sys-color-primary-rgb: 48, 0, 69; /* #300045 */ --md-sys-state-hover-state-opacity: 0.08; /* 8% opacity */ /* Shape Scale */ --shape-none: 0; --shape-extra-small: 4px; --shape-small: 8px; --shape-medium: 12px; --shape-large: 16px; --shape-extra-large: 28px; --shape-full: 9999px; /* Transition */ /* 0.2秒：人間の認識限界に近い、心地よい速度 */ --md-sys-motion-duration-fade: 200ms; --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1); /* MD3標準のイージングカーブ。要素の出入りに使用 */ --md-sys-motion-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0); --transition-duration: 300ms; /* Layout */ --nav-width-desktop: 280px; --bottom-bar-height: 80px; --header-height-mobile: 64px; /* System Setting */ color-scheme: light; } /* FOUC (Flash of Unstyled Content) 防止： JSによるテーマ初期化が完了するまで、bodyのトランジションを無効化する。このクラスはに直接記述され、初期化後にJSで削除される。 */ body.no-transition { transition: none !important; } /* JavaScriptによるテーマ切り替えを可能にする */ html[data-theme="dark"] { --md-sys-color-primary: #D0BCFF; --md-sys-color-on-primary: #381E72; --md-sys-color-primary-container: #4F378B; --md-sys-color-on-primary-container: #EADDFF; --md-sys-color-secondary-container: #4A4458; --md-sys-color-on-secondary-container: #E8DEF8; --md-sys-color-background: #1C1B1F; --md-sys-color-on-background: #E6E1E5; --md-sys-color-surface: #1C1B1F; --md-sys-color-on-surface: #E6E1E5; --md-sys-color-surface-container-low: #1D1B20; --md-sys-color-surface-container: #211F26; --md-sys-color-surface-container-high: #2B2930; --md-sys-color-surface-container-highest: #36343B; --md-sys-color-on-surface-variant: #CAC4D0; --md-sys-color-outline: #938F99; --md-sys-color-outline-variant: #444746; --md-sys-color-primary-rgb: 208, 188, 255; /* #D0BCFF */ color-scheme: dark; } /* スクロールバーのMD3化 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--md-sys-color-surface); } ::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: var(--shape-full); } /* ========================================= BASE STYLES ========================================= */ body { margin: 0; font-family: 'Noto Sans JP', sans-serif; background-color: var(--md-sys-color-background); color: var(--md-sys-color-on-surface); line-height: 1.5; /* 背景色と文字色の変化を滑らかに同期 */ transition: background-color var(--md-sys-motion-duration-fade) var(--md-sys-motion-easing-linear), color var(--md-sys-motion-duration-fade) var(--md-sys-motion-easing-linear); -webkit-font-smoothing: antialiased; overflow: hidden; } /* アプリ全体のレイアウトコンテナ */ .app-layout { display: flex; min-height: 100vh; } /* ========================================= SVG MASKING SYSTEM (The Core Magic) 画像の色をCSS変数で完全制御するための仕組み ========================================= */ .icon-mask { display: block; background-color: var(--md-sys-color-primary); /* ここで色が決定される */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } .drawer-logo-mark { width: 100px; height: 100px; background-color: var(--md-sys-color-primary); -webkit-mask-image: url('badge.svg'); mask-image: url('badge.svg'); } .hero-name { width: 100%; max-width: 800px; height: 160px; background-color: var(--md-sys-color-primary); -webkit-mask-image: url('name.svg'); mask-image: url('name.svg'); margin: 0; /* ブラウザのデフォルトマージンをリセット */ /* テキストを物理的に隠さず、視覚的にのみ隠す（SEOに最も安全な手法） */ text-indent: 100%; white-space: nowrap; overflow: hidden; } /* アクセシビリティ：視覚的に隠すがスクリーンリーダーには読ませる */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================= NAVIGATION DRAWER (Sidebar) ========================================= */ .nav-drawer { width: 280px; background-color: var(--md-sys-color-surface-container); height: 100vh; position: fixed; z-index: 1000; transition: transform var(--transition-duration) var(--md-sys-motion-standard); border: none; /* 枠線廃止 */ padding: 12px; box-sizing: border-box; } .drawer-header { padding: 24px 28px; display: flex; align-items: center; justify-content: center; /* 中央揃えに変更 */ min-height: 80px; /* 少し高さを確保 */ } .drawer-content { padding: 12px; display: flex; flex-grow: 1; /* フッターを最下部に押しやる */ flex-direction: column; gap: 4px; overflow-y: auto; /* メニューが多い場合はスクロール */ } /* Navigation Items */ .nav-item { display: flex; align-items: center; padding: 0 24px; height: 56px; border-radius: 28px; /* Stadium shape */ text-decoration: none; color: var(--md-sys-color-on-surface-variant); font-weight: 500; transition: background-color 0.2s, color 0.2s; } .nav-item:hover { background-color: var(--md-sys-color-hover-state); } .nav-item:hover { background-color: rgba(var(--md-sys-color-primary-rgb), var(--md-sys-state-hover-state-opacity)); } .nav-item.active { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .nav-item .material-symbols-outlined { margin-right: 12px; font-size: 24px; } /* ========================================= MAIN CONTENT AREA ========================================= */ .main-content { margin-left: var(--nav-width-desktop); flex-grow: 1; padding: 0; /* Home view needs full width */ display: flex; flex-direction: column; width: calc(100% - var(--nav-width-desktop)); min-width: 0; /* Flexアイテムの縮小を許可 */ overflow-y: scroll !important; /* 常にスクロールバー領域を確保し、幅の変動（ガタツキ）を防止 */ height: 100vh; /* 画面いっぱいに広げる */ overflow-x: hidden; scrollbar-gutter: stable; transition: opacity 0.25s ease-out, transform 0.25s ease-out; } /* For content transitions */ .main-content.loading { opacity: 0; transform: translateY(16px); } /* Floating Action Button (Global) */ .fab { position: fixed; bottom: 24px; right: 24px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); width: 56px; height: 56px; border-radius: 16px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1100; opacity: 0; transform: scale(0); transition: opacity 0.25s var(--md-sys-motion-standard), transform 0.25s var(--md-sys-motion-standard), background-color 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .fab.visible { opacity: 1; transform: scale(1); } /* --- HOME VIEW (App Info Style) --- */ .home-container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .hero-section { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 55vh; text-align: center; padding: 40px 20px; width: 100%; max-width: 1200px; /* カードグリッドと幅を合わせる */ box-sizing: border-box; } .hero-logo-group { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1000px; gap: 12px; } /* Info Cards Grid */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; width: 100%; max-width: 1200px; padding: 0 24px 60px 24px; box-sizing: border-box; } .info-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; background-color: var(--md-sys-color-surface-container); border: none; /* 枠線を削除 */ border-radius: var(--shape-large); text-decoration: none; color: var(--md-sys-color-on-surface); /* ホバーアウト（マウスが離れた時）のアニメーションを定義 */ transition: transform 0.2s var(--md-sys-motion-standard), background-color 0.2s var(--md-sys-motion-standard); } .info-card:hover { background-color: var(--md-sys-color-primary-container); transform: translateY(-4px); /* 少し動きを大きくして分かりやすく */ } /* 修正：表示後のホバーアニメーションを高速化 */ .info-card.visible:hover { transition-duration: 0.2s; } .info-card .card-icon { font-size: 36px; margin-bottom: 16px; color: var(--md-sys-color-primary); } .info-card h3 { margin: 0 0 8px 0; font-size: 1.2rem; font-weight: 700; color: var(--md-sys-color-on-surface); } .info-card p { margin: 0; font-size: 0.9rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.5; } /* --- MARKDOWN CONTENT VIEW --- */ /* ========================================= MD3 RICH MARKDOWN SYSTEM ========================================= */ .markdown-body { padding: 0; /* レイアウト調整は内部のラッパーに任せる */ max-width: 100%; margin: 0; color: var(--md-sys-color-on-surface); line-height: 1.7; /* 可読性を高める黄金比に近い行送り */ letter-spacing: 0.025em; } /* Typography Hierarchy */ .markdown-body h1, .markdown-body h2, .markdown-body h3 { color: var(--md-sys-color-on-surface); font-weight: 700; line-height: 1.3; margin-top: 48px; margin-bottom: 24px; } .markdown-body h1 { font-size: 2.25rem; letter-spacing: -0.02em; } .markdown-body h2 { font-size: 1.75rem; border-bottom: none; /* 線を廃止 */ display: flex; align-items: center; } .markdown-body h2::before { /* MD3的なアクセント */ content: ""; width: 6px; height: 1.2em; background-color: var(--md-sys-color-primary); margin-right: 16px; border-radius: var(--shape-full); } /* Rich Table Styling (MD3 Data Tables) */ .markdown-body .table-wrapper { /* JS等でラップすることを推奨 */ width: 100%; overflow-x: auto; border-radius: var(--shape-large); background-color: var(--md-sys-color-surface-container-low); margin: 32px 0; /* スクロールバーのガタつき防止に寄与 */ contain: paint; } .markdown-body table { width: 100%; border-collapse: separate; border-spacing: 0; border: none; /* テーブルが親を超えて広がらないようにする */ table-layout: auto; word-break: break-word; } .markdown-body th { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); font-weight: 700; padding: 16px 24px; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.1em; } .markdown-body td { padding: 20px 24px; border-bottom: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); background-color: transparent; transition: background-color 0.2s; } .markdown-body tr:last-child td { border-bottom: none; } .markdown-body tr:hover td { background-color: var(--md-sys-color-surface-container-high); } /* Blockquotes as Elevated Cards */ .markdown-body blockquote { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); margin: 32px 0; padding: 24px 32px; border-left: none; border-radius: var(--shape-large); position: relative; font-style: normal; } .markdown-body blockquote::before { content: "format_quote"; font-family: 'Material Symbols Outlined'; position: absolute; top: -12px; left: 24px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--shape-small); font-size: 20px; } /* List Items with MD3 Rhythm */ .markdown-body ul, .markdown-body ol { padding-left: 8px; margin: 24px 0; } .markdown-body li { list-style: none; position: relative; padding-left: 32px; margin-bottom: 12px; } .markdown-body ul li::before { content: ""; position: absolute; left: 8px; top: 10px; width: 8px; height: 8px; background-color: var(--md-sys-color-primary); border-radius: var(--shape-full); } /* Interactive Elements (Links) */ .markdown-body a { color: var(--md-sys-color-primary); text-decoration: none; padding: 2px 4px; margin: 0 -4px; border-radius: var(--shape-extra-small); transition: background-color 0.2s, background-size 0.3s var(--md-sys-motion-easing-emphasized); border-bottom: 1px solid var(--md-sys-color-outline-variant); background: linear-gradient(to right, var(--md-sys-color-primary), var(--md-sys-color-primary)) 0% 100% / 0% 1px no-repeat; } .markdown-body a:hover { background-color: rgba(var(--md-sys-color-primary-rgb), 0.08); border-bottom-color: transparent; background-size: 100% 1px; } /* Media Elements */ .markdown-body img { max-width: 100%; height: auto; border-radius: var(--shape-large); margin: 32px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 画像読み込み中のレイアウトシフト防止（アスペクト比が既知の場合有効だが、汎用的には以下） */ display: block; } /* 画像読み込みエラー時のフォールバック */ .image-fallback { opacity: 0.5; border: 1px dashed var(--md-sys-color-outline); padding: 40px; background-color: var(--md-sys-color-surface-container); object-fit: contain; } /* Horizontal Rule */ .markdown-body hr { border: none; height: 4px; background-color: var(--md-sys-color-surface-container-high); border-radius: var(--shape-full); margin: 48px auto; width: 50%; } /* Table Sort Indicators */ .markdown-body th { position: relative; transition: background-color 0.2s; cursor: pointer; user-select: none; padding-right: 32px; } .markdown-body th::after { content: 'unfold_more'; font-family: 'Material Symbols Outlined'; font-size: 18px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0.3; pointer-events: none; } .markdown-body th[data-order="asc"]::after, .markdown-body th[aria-sort="ascending"]::after { content: 'expand_less'; opacity: 1; color: var(--md-sys-color-primary); } .markdown-body th[data-order="desc"]::after, .markdown-body th[aria-sort="descending"]::after { content: 'expand_more'; opacity: 1; color: var(--md-sys-color-primary); } .markdown-body tbody { transition: opacity 0.2s var(--md-sys-motion-standard); } /* MD3 Lightbox Overlay */ .md3-lightbox-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.9); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s var(--md-sys-motion-standard); backdrop-filter: blur(8px); cursor: zoom-out; } .md3-lightbox-overlay.active { opacity: 1; } .md3-lightbox-content { max-width: 90%; max-height: 90%; border-radius: var(--shape-large); transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce effect */ box-shadow: 0 24px 48px rgba(0,0,0,0.5); } .md3-lightbox-overlay.active .md3-lightbox-content { transform: scale(1); } /* ========================================= MD3 SKELETON SCREEN SYSTEM ========================================= */ /* 骨組みのベースアニメーション */ @keyframes md3-skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient( 90deg, var(--md-sys-color-surface-container-high) 25%, var(--md-sys-color-surface-container-highest) 50%, var(--md-sys-color-surface-container-high) 75% ); background-size: 200% 100%; animation: md3-skeleton-shimmer 1.5s infinite linear; border-radius: var(--shape-small); display: block; } /* 各要素のスケルトン形状 */ .skeleton-title { width: 60%; height: 32px; margin-bottom: 24px; border-radius: var(--shape-medium); } .skeleton-text { width: 100%; height: 16px; margin-bottom: 12px; } .skeleton-image { width: 100%; /* 古いブラウザとの互換性を最大化するため、aspect-ratioの代わりにpadding-topハックを使用 */ height: 0; padding-top: 56.25%; /* 16:9 アスペクト比 (9 / 16 * 100) */ border-radius: var(--shape-extra-large); margin: 32px 0; } /* MD3 Snackbar - Bottom Center */ #snackbar-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(150px); background-color: var(--md-sys-color-inverse-surface, #313033); color: var(--md-sys-color-inverse-on-surface, #F4EFF4); padding: 12px 24px; border-radius: var(--shape-small); display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); z-index: 3000; transition: transform 0.3s var(--md-sys-motion-standard); min-width: 320px; } /* ボタンの統合：ナビゲーションバーの一部として同化 */ .actions-container { display: flex; align-items: center; gap: 8px; } #snackbar-container.show { transform: translateX(-50%) translateY(0); } .snackbar-action { color: var(--md-sys-color-primary-container); text-transform: uppercase; font-weight: 700; cursor: pointer; background: none; border: none; } .theme-toggle-btn { user-select: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* 波及アニメーション中のボディ制御 (BrokenPipeError対策) */ body.theme-transitioning { overflow: hidden; /* アニメーション中のスクロールによる座標ズレを防止 */ pointer-events: none; /* 全ての入力を一時遮断し、BrokenPipeの原因となるリクエストを防ぐ */ } #theme-reveal-overlay { position: fixed; inset: 0; z-index: 10000; pointer-events: none; will-change: clip-path; } /* ========================================= MOBILE & RESPONSIVE DESIGN ========================================= */ /* Mobile Elements */ .mobile-only { display: none; } /* Scrim (モーダル表示時の背景オーバーレイ) opacityとpointer-eventsで制御することで、display:noneよりも滑らかなアニメーションを実現 */ .scrim { position: fixed; inset: 0; /* top, right, bottom, left: 0 */ background-color: rgba(0, 0, 0, 0.5); z-index: 999; /* ドロワー(1000)の直下 */ opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(2px); } .scrim.open { opacity: 1; pointer-events: auto; } @media (max-width: 840px) { /* Hide Desktop Elements */ .desktop-only { display: none; } .mobile-only { display: flex; } /* Layout Adjustments */ .app-layout { flex-direction: column; } .main-content { margin-left: 0; width: 100%; height: auto; /* モバイルでは通常フローに戻す場合 */ overflow-y: visible; padding-bottom: 100px; } body { overflow: auto; /* モバイルではbodyスクロール */ } /* Modal Navigation Drawer (Mobile) */ .nav-drawer { transform: translateX(-100%); width: 300px; box-shadow: 4px 0 24px rgba(0,0,0,0.15); } .nav-drawer.open { transform: translateX(0); } /* Mobile nav item animation */ .nav-drawer .nav-item { opacity: 0; transform: translateX(-20px); transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s, color 0.2s; } .nav-drawer.open .nav-item { opacity: 1; transform: translateX(0); } /* Stagger delay for nav items */ .nav-drawer.open .nav-item:nth-child(1) { transition-delay: 0.05s; } .nav-drawer.open .nav-item:nth-child(2) { transition-delay: 0.1s; } .nav-drawer.open .nav-item:nth-child(3) { transition-delay: 0.15s; } .nav-drawer.open .nav-item:nth-child(4) { transition-delay: 0.2s; } .nav-drawer.open .nav-item:nth-child(5) { transition-delay: 0.25s; } .nav-drawer.open .nav-item:nth-child(6) { transition-delay: 0.3s; } .nav-drawer.open .nav-item:nth-child(7) { transition-delay: 0.35s; } .nav-drawer.open .nav-item:nth-child(8) { transition-delay: 0.4s; } .nav-drawer.open .nav-item:nth-child(9) { transition-delay: 0.45s; } /* Bottom App Bar (Mobile Nav Trigger) */ .bottom-app-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: var(--bottom-bar-height); background-color: rgba(var(--md-sys-color-surface-container), 0.8); backdrop-filter: blur(10px); border: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; box-sizing: border-box; z-index: 500; } #snackbar-container { bottom: 100px; /* FABの上 */ } .bottom-app-bar .actions-container { padding-right: 0; } .icon-button { background: none; border: none; cursor: pointer; padding: 12px; color: var(--md-sys-color-on-surface); border-radius: 50%; } /* Floating Action Button (FAB) */ .fab { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); width: 56px; height: 56px; border-radius: 16px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; /* Animation properties */ opacity: 0; transform: scale(0); transition: opacity 0.25s var(--md-sys-motion-standard), transform 0.25s var(--md-sys-motion-standard); } .fab.visible { opacity: 1; transform: scale(1); } /* 予測型戻るジェスチャーの視覚的ヒント（擬似的） */ .predictive-back-preview { transform: scale(0.95); border-radius: var(--shape-extra-large); transition: transform 0.2s var(--md-sys-motion-standard); } /* Markdown Mobile Adjustments */ .markdown-body { padding: 20px; } } /* === 一覧・詳細ビュー共通 === */ /* コンテンツラッパー：中央揃えとパディングを一元管理 */ .content-wrapper { max-width: 1200px; margin: 0; width: 100%; padding: 40px 24px; /* 上下の余白もここで管理 */ box-sizing: border-box; } .section-title { color: var(--md-sys-color-primary); border-bottom: none; /* MD3化: 余白とタイポグラフィで表現 */ font-size: 1.1rem; font-weight: 500; padding: 32px 0 16px; width: 100%; box-sizing: border-box; } /* === アコーディオン一覧 === */ .accordion-list { display: flex; flex-direction: column; gap: 12px; /* カード間の隙間 */ width: 100%; padding: 0; box-sizing: border-box; } details.accordion-item { background-color: transparent; border-radius: 0; margin-bottom: 12px; border: none; /* 枠線なし */ /* スティッキーヘッダーを機能させるため visible に設定 */ overflow: visible; transition: margin-bottom 0.2s; } details[open].accordion-item { background-color: transparent; margin-bottom: 12px; } /* 開閉中のスタイル */ details.accordion-item.is-animating { pointer-events: none; /* 連打防止 */ } summary.accordion-summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; min-height: 56px; /* タップターゲット確保 */ cursor: pointer; list-style: none; font-weight: 500; user-select: none; position: sticky; /* タイトルを固定 */ top: 0; z-index: 5; /* コンテンツより手前に表示 */ background-color: var(--md-sys-color-surface-container); border-radius: var(--shape-large); transition: border-radius 0.2s, background-color 0.2s; } /* 展開時は下側を直角にし、裏を通るコンテンツが角の隙間から見えないようにする */ details[open] > summary.accordion-summary { border-radius: var(--shape-large) var(--shape-large) 0 0; } summary.accordion-summary::-webkit-details-marker { display: none; } /* 新しいアイコン用スタイル */ .accordion-indicator { font-size: 24px; color: var(--md-sys-color-on-surface-variant); transition: transform 0.28s; margin-left: 16px; } details[open] .accordion-indicator { transform: rotate(180deg); } .accordion-title { flex-grow: 1; } .accordion-date { color: var(--md-sys-color-on-surface-variant); margin-left: 16px; } .accordion-content { background: var(--md-sys-color-surface); margin: 0 12px 12px; /* 親枠の中に配置するための余白 */ border-radius: var(--shape-medium); padding: 24px; } /* Wrapper for smooth accordion animation */ .accordion-content-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--md-sys-motion-standard); /* 重要: グリッドコンテナ自体の幅計算を安定させる */ width: 100%; background-color: var(--md-sys-color-surface-container); border-radius: 0 0 var(--shape-large) var(--shape-large); margin-top: 0; /* これで「内側は常に角丸」が保証される */ overflow: hidden; } /* open属性があるときは開く */ details[open] .accordion-content-wrapper { grid-template-rows: 1fr; } .accordion-content-inner { min-height: 0; /* Grid内での高さ確保に必須 */ /* 重要: Gridアイテムの幅がコンテンツによって押し広げられるのを防ぐ */ min-width: 0; width: 100%; /* 親の幅に合わせる */ box-sizing: border-box; /* パディングを含める */ opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; /* 横幅からはみ出るコンテンツ（表など）をスクロールさせる */ overflow-x: auto; } /* 開いた状態の中身 */ details[open] .accordion-content-inner { opacity: 1; transform: translateY(0); } /* === 詳細ビュー === */ .detail-header { position: -webkit-sticky; /* Safari対応 */ top: 0; background-color: var(--md-sys-color-background); border-bottom: 1px solid var(--md-sys-color-outline); padding: 12px 20px; display: flex; align-items: center; gap: 16px; z-index: 10; backdrop-filter: blur(12px); } .back-btn { width: 48px; height: 48px; background: none; border: none; color: var(--md-sys-color-primary); font-size: 28px; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .detail-title { margin: 0; font-size: 1.4rem; flex-grow: 1; } .detail-body { padding: 40px 24px; /* モバイル対応も含めたパディング */ max-width: 1000px; /* 中央揃え */ margin: 0; width: 100%; box-sizing: border-box; } /* モバイル調整 */ @media (max-width: 840px) { /* Mobile Adjustments */ .markdown-body { padding: 24px 16px; } .markdown-body h1 { font-size: 1.75rem; } .markdown-body td, .markdown-body th { padding: 12px 16px; } .detail-body, .accordion-content { padding: 20px; } .detail-header { padding: 12px 16px; } .accordion-summary { padding: 12px 16px; } } /* Error State */ .error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: var(--md-sys-color-on-surface-variant); text-align: center; } .error-state .material-symbols-outlined { font-size: 48px; color: var(--md-sys-color-error, #B3261E); } /* === Search Bar (MD3 Style) === */ .search-bar-wrapper { position: relative; width: 100%; margin-bottom: 0; /* list-controlsのgapで制御するためリセット */ } .search-input { width: 100%; height: 56px; background-color: var(--md-sys-color-surface-container-high); border: none; border-radius: var(--shape-full); padding: 0 16px 0 52px; font-size: 1rem; color: var(--md-sys-color-on-surface); transition: background-color 0.2s, box-shadow 0.2s; box-sizing: border-box; font-family: inherit; } .search-input:focus { background-color: var(--md-sys-color-surface-container-highest); outline: none; box-shadow: 0 0 0 2px var(--md-sys-color-primary); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--md-sys-color-on-surface-variant); pointer-events: none; font-size: 24px; } .search-clear-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--md-sys-color-on-surface-variant); cursor: pointer; padding: 8px; border-radius: 50%; display: none; /* 初期状態は非表示 */ align-items: center; justify-content: center; } /* === List Controls (Search, Sort, Filter) === */ .list-controls { margin-bottom: 24px; display: flex; flex-direction: column; gap: 12px; } .filter-sort-group { display: flex; gap: 12px; flex-wrap: wrap; } .select-wrapper { position: relative; flex: 1; min-width: 160px; /* モバイルでも押しやすい幅 */ } .select-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--md-sys-color-primary); pointer-events: none; font-size: 20px; z-index: 1; } .control-select { width: 100%; height: 56px; /* 検索バーと高さを合わせる */ padding: 0 16px 0 44px; border-radius: var(--shape-small); border: 1px solid var(--md-sys-color-outline-variant); /* 枠線あり */ background-color: var(--md-sys-color-surface-container-high); /* 背景色 */ color: var(--md-sys-color-on-surface); font-size: 1rem; appearance: none; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; font-family: inherit; } .control-select:focus { outline: none; border-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-surface-container-highest); box-shadow: 0 0 0 2px var(--md-sys-color-primary); } /* Custom Arrow for Select */ .select-wrapper::after { content: 'expand_more'; font-family: 'Material Symbols Outlined'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--md-sys-color-on-surface-variant); pointer-events: none; font-size: 24px; } /* ========================================= RICH ANIMATIONS COLLECTION ========================================= */ /* 基本設定: すべてのアニメーション要素に適用 */ .reveal-item { opacity: 0; /* GPUアクセラレーションを有効化しつつ、初期位置を設定 */ transform: translate3d(0, 20px, 0); transition: opacity 0.6s var(--md-sys-motion-standard), transform 0.6s var(--md-sys-motion-standard) !important; will-change: opacity, transform; } /* 表示状態 */ .reveal-item.visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); filter: blur(0); } /* --- バリエーション用クラス (JSでランダム付与) --- */ /* 1. スライドアップ (標準) */ .anim-slide-up { transform: translate3d(0, 30px, 0); } /* 2. ズームイン (手前から奥へ) */ .anim-zoom-in { transform: scale(0.9) translate3d(0, 10px, 0); } /* 3. ブラーイン (ぼかしから鮮明に) */ .anim-blur-in { filter: blur(10px); transform: scale(1.05); transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease; } /* 4. スライドイン・フロム・レフト */ .anim-slide-left { transform: translate3d(-30px, 0, 0); } /* 5. ポップアップ (少しバウンスするような動き) */ .anim-pop { transform: scale(0.5); transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* バウンス効果 */ } /* --- スタッガー遅延 (順次表示) --- */ /* SCSSループが使えないため、CSS変数または個別指定を使用 */ .reveal-item:nth-child(1) { transition-delay: 50ms; } .reveal-item:nth-child(2) { transition-delay: 100ms; } .reveal-item:nth-child(3) { transition-delay: 150ms; } .reveal-item:nth-child(4) { transition-delay: 200ms; } .reveal-item:nth-child(5) { transition-delay: 250ms; } .reveal-item:nth-child(6) { transition-delay: 300ms; } .reveal-item:nth-child(7) { transition-delay: 350ms; } .reveal-item:nth-child(8) { transition-delay: 400ms; } .reveal-item:nth-child(n+9) { transition-delay: 450ms; } /* ユーザー設定: 視差効果を減らす設定への配慮 */ @media (prefers-reduced-motion: reduce) { .reveal-item, .anim-slide-up, .anim-zoom-in, .anim-blur-in, .anim-slide-left, .anim-pop { transition: opacity 0.3s ease !important; transform: none !important; filter: none !important; transition-delay: 0s !important; } } /* インタラクティブモード: 出現アニメーション完了後にこのクラスが付与される。ここで初めてホバー用の高速なトランジション(0.2s)で上書きする。 */ .info-card.interactive { transition: transform 0.2s var(--md-sys-motion-standard), background-color 0.2s var(--md-sys-motion-standard) !important; } /* ホバー時の挙動を明示 */ .info-card.interactive:hover { background-color: var(--md-sys-color-primary-container); transform: translateY(-4px); } /* 閉じるアニメーション用: open属性はあるが、中身を潰す */ details.accordion-item.closing .accordion-content-wrapper { grid-template-rows: 0fr !important; } details.accordion-item.closing .accordion-content-inner { opacity: 0 !important; transform: translateY(-10px) !important; } /* ========================================= MISSING ANIMATION DEFINITIONS ========================================= */ /* 1. Loading Spinner (HTMLで使用されているが未定義だったもの) */ .spinner { width: 48px; height: 48px; border: 5px solid var(--md-sys-color-surface-container-highest); border-bottom-color: var(--md-sys-color-primary); border-radius: 50%; display: block; box-sizing: border-box; animation: rotation 1s linear infinite; margin: 60px auto; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 2. Ripple Effect (Interactive Feedback) */ /* カード、ボタン、リストアイテムに適用 */ .info-card, .nav-item, .fab, .icon-button, .back-btn, .accordion-summary { position: relative; overflow: hidden; /* リップルのはみ出し防止 */ } .info-card::after, .nav-item::after, .fab::after, .icon-button::after, .back-btn::after, .accordion-summary::after { content: ""; position: absolute; inset: 0; background-color: var(--md-sys-color-on-surface); opacity: 0; transition: opacity 0.2s linear; pointer-events: none; } .info-card:active::after, .nav-item:active::after, .fab:active::after, .icon-button:active::after, .back-btn:active::after, .accordion-summary:active::after { opacity: 0.12; /* Pressed state opacity */ }