/* style.css — 全体スタイル（ユーザー指定の配色反映） */ /* Google Fontsの読み込み（HTMLのに追加）: */ :root { --bg: #f6faf3; --header-bg: #f0907f; --footer-bg: #1c8ccd; --header-footer-text: #f6faf3; --main-text: #333333; --link-accent: #1c8ccd; } html, body { height: 100%; } body { margin: 0; min-height: 100%; background-color: var(--bg); color: var(--main-text); /* 🎨 フォントを「Zen Maru Gothic」ベースに変更 */ font-family: "Kosugi Maru", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif; font-weight: 400; } /* links */ a { color: var(--link-accent); transition: opacity 0.2s; } a:hover { text-decoration: none; opacity: 0.8; } /* header */ .site-header { background: var(--header-bg); color: var(--header-footer-text); font-family: "Kosugi Maru", sans-serif; } .site-header .site-title a { color: var(--header-footer-text); text-decoration: none; font-size: 1.4rem; font-weight: 700; } .site-header .nav-link { color: var(--header-footer-text); font-weight: 600; } .site-header .nav-link.active { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } /* main area */ .site-main .container { padding-top: 1rem; padding-bottom: 1rem; line-height: 1.8; } /* list group items */ .list-group-item { background: transparent; border: 1px solid rgba(0, 0, 0, 0.06); color: #222; font-family: "Kosugi Maru", sans-serif; } /* cards */ .card { background: rgba(255, 255, 255, 0.96); color: #222; border-radius: 0.75rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } /* footer */ .site-footer { background: var(--footer-bg); color: var(--header-footer-text); font-family: "Kosugi Maru", sans-serif; padding: 0.75rem 0; } .site-footer a { color: var(--header-footer-text); font-weight: 600; } .site-footer a:hover { opacity: 0.8; } /* エピソード行を横並び */ .episode-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } /* 左側（タイトル＋日付） */ .episode-main { min-width: 0; /* ← 省略表示に必須 */ flex: 1; } /* エピソードタイトル：1行・省略 */ .episode-title { display: block; white-space: nowrap; /* 改行しない */ overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 600; } /* 日付は小さく */ .episode-date { font-size: 0.8rem; color: #666; } /* 観る／観たボタンは改行させない */ .watchBtn { white-space: nowrap; flex-shrink: 0; /* ← 押し出されても縮まない */ } /* スマホ最適化 */ @media (max-width: 576px) { .episode-title { font-size: 0.95rem; } } /* share code */ .sharecode { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: 0.08em; font-weight: 800; } .sharecode-digit { color: #1c8ccd; } /* 青（リンク色と合わせ） */ .sharecode-alpha { color: #f0907f; } /* ヘッダー色と合わせ */