/* ============================ Episode List – White Theme design50 の世界観に寄せた版 ※ のページだけに適用 ============================ */ /* 全体設定 */ .episode-list { background: #ffffff; color: #5c6981; font-family: 'メイリオ', 'ヒラギノ角ゴ', system-ui, sans-serif; letter-spacing: 0.15em; line-height: 1.8; } /* 全話一覧タイトル */ .episode-list .list-title { max-width: 900px; margin: 40px auto 20px; padding: 0 12px; font-size: 2.0rem; font-weight: normal; letter-spacing: 0.2em; color: #5c6981; } /* リスト全体 */ .episode-list #episode-list { max-width: 900px; margin: 0 auto; padding: 0 12px 60px; } /* エピソードカード */ .episode-list .episode-card { display: flex; gap: 16px; margin-bottom: 20px; padding: 16px 18px; background: #ffffff; border-radius: 12px; text-decoration: none; color: #5c6981; box-shadow: 2px 2px 1rem #e4e4e4; transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; } .episode-list .episode-card:hover { transform: translateY(-2px); box-shadow: 2px 4px 1.4rem rgba(0,0,0,0.12); } /* サムネイル */ .episode-list .thumb { width: 240px; height: 120px; object-fit: cover; border-radius: 8px; background: #d4eef7; } /* テキスト部分 */ .episode-list .info { display: flex; flex-direction: column; justify-content: center; } .episode-list .ep-number { font-size: 1.5rem; font-weight: 600; margin-bottom: 4px; letter-spacing: 0.15em; color: #384d66; } .episode-list .ep-title { font-size: 1.3rem; opacity: 0.8; color: #7b8699; } /* contentsへ戻る */ .episode-list .back-to-main { max-width: 900px; margin: 0 auto 30px; padding: 0 12px; } .episode-list .back-to-main a { color: #55b7d9; text-decoration: none; font-size: 1.2rem; opacity: 0.9; transition: color 0.2s, opacity 0.2s; letter-spacing: 0.15em; /* ← ここで文字間隔を広げる */ } .episode-list .back-to-main a:hover { color: #6393a3; opacity: 1; } /* ============================ スマホ用（黒テーマ viewer.css に寄せる） ============================ */ @media (max-width: 800px) { /* フォントを黒テーマ viewer.css に寄せる */ .episode-list { font-family: system-ui, sans-serif; letter-spacing: normal; line-height: 1.6; font-size: 16px; } /* サムネイルサイズを強制適用 */ .episode-list .thumb { width: 120px !important; height: 60px !important; } /* タイトルの二段落ち防止 */ .episode-list .ep-number { font-size: 16px; letter-spacing: 0.05em; } .episode-list .ep-title { font-size: 14px; letter-spacing: 0.05em; } /* カードの余白調整 */ .episode-list .episode-card { padding: 10px; gap: 12px; } }