/* === はてなブログ カスタムCSS === */

/* --- 基本設定 --- */
body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.8; /* 行の高さ */
    color: #333; /* 基本の文字色 */
    margin: 0;
    padding: 20px; /* 全体の余白 */
    background-color: #f8f0e3; /* 全体の背景色（茶色系の淡い色） */
    max-width: 900px; /* 記事の最大幅をbodyで統一 */
    margin: 0 auto; /* 中央揃え */
}

/* リンクのデフォルトスタイル */
a {
    color:  #a0522d; /* リンクのデフォルト色（落ち着いた茶色） */
    text-decoration: none; /* 下線なし */
    transition: color 0.2s ease, text-decoration 0.2s ease; /* ホバーアニメーション */
    font-weight: 600;
    text-decoration: underline;

}

a:hover {
    color: #a40000ff; /* ホバー時の色（濃い赤褐色） */
    text-decoration: underline; /* ホバーで下線 */
}

/* スムーズなアニメーション（全体に適用） */
/* 全体適用はパフォーマンスに影響する場合があるため、個別に適用を推奨しますが、要望に応じて残します */
/* * {
    transition: all 0.3s ease;
} */


/* --- ブログ全体のレイアウト調整 --- */

/* ブログタイトル部分 */
#blog-title {
    background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); /* 強めの赤系グラデーション */
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 2rem; /* 記事との間に余白 */
}

#blog-title h1,
#blog-title h1 a { /* #title a を #blog-title h1 a に変更し、blog-title配下に限定 */
    font-family: 'Noto Serif JP', 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin: 0;
    letter-spacing: 1px;
    text-decoration: none;
}

#blog-title .blog-description {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    margin-top: 0.8rem;
    font-weight: 300;
}

/* フッター */
#footer {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); /* 淡いピンク系グラデーション */
    border-top: 3px solid #ff6b9d;
    padding: 2rem 0;
    text-align: center;
    color: #555;
    font-weight: 500;
    margin-top: 3rem;
    font-size: 14px; /* 追加: <footer>内のフォントサイズ */
}
#footer p { /* <footer>内のpタグの余白を調整 */
    margin: 0;
}

/* サイドバー */
#box2 {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.hatena-module-title {
    background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); /* サイドバータイトルも赤系グラデーション */
    color: white;
    padding: 1rem;
    font-weight: 600;
    margin: 0;
}

.hatena-module-body {
    padding: 1.2rem;
}


/* --- 記事本文全体 --- */
.entry {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    margin: 2rem auto;
    padding: 2.5rem;
    /* max-width: 900px; */ /* bodyで設定済みのため不要 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* 記事メタ情報 */
.entry-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.entry-date,
.entry-header-menu {
    color: #666;
    font-size: 0.9rem;
}

/* カテゴリー */
.entry-categories a {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%); /* カテゴリーも赤系グラデーション */
    color: #fff !important;
    padding: 0.5rem 1.2rem;
    border-radius: 25px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none !important;
    display: inline-block;
    margin: 0.2rem;
    box-shadow: 0 3px 10px rgba(220,20,60,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entry-categories a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220,20,60,0.4);
}

/* 記事本文の内容（.entry-content 内のスタイルは、はてなブログの本文領域に適用される） */
.entry-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}

/* 記事タイトル（記事リスト用） */
.entry-title,
.article-header h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #8b0000; /* 濃い赤 */
    margin: 2rem 0 1.5rem;
    line-height: 1.4;
    text-align: center;
}

.entry-title a {
    color: #8b0000;
    text-decoration: none;
}

.entry-title a:hover {
    color: #dc143c;
}

/* --- 記事本文内のHTML要素スタイル --- */

/* メインタイトル (HTMLのh1相当) */
.main-title {
    color: #a52a2a; /* 赤褐色 */
    font-size: 2.5em; /* メインタイトルを大きく */
    margin-bottom: 20px;
    border: none; /* 下線を削除（h2との差別化） */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    text-align: center;
    margin-top: 0;
}

/* シーズン情報 */
.season-info {
    font-size: 1.1em;
    color: #a52a2a;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

/* ヒーロー画像 */
.hero-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 30px auto;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 記事全体のセクション見出し (HTMLのh2に相当) */
h2 { /* channel-headingでないh2（一般的なh2） */
    color: #8B0000; /* 赤味がかった茶色 */
    font-size: 2em; /* サブタイトル */
    border-bottom: 3px solid #cd5c5c; /* 下線 */
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 30px;
}

/* チャンネル名見出し (h2にclassを適用) */
h2.channel-heading { /* 新しくクラスを追加し、このスタイルはチャンネル名用にする */
    color: #fff;
    background-color: #e74c3c; /* 前回のh2と同じ色で統一 */
    padding: 8px 15px;
    border-radius: 5px;
    margin-top: 40px;
    font-size: 2em; /* 一般のh2とフォントサイズを合わせる */
    border-bottom: none; /* 下線はつけない */
    text-align: center; /* 中央寄せ */
}

/* 導入セクション */
.intro-section {
    background: linear-gradient(135deg, #fef5e7 0%, #f7e6d0 100%); /* 淡いグラデーション背景 */
    border-left: 5px solid #cc8e60; /* 左側のボーダー */
    padding: 25px 30px;
    margin: 30px 0;
    border-radius: 10px;
}

.intro-section h3 { /* 導入セクション内の見出し【記事を読む前にご確認ください】 */
    color: #B22222; /* 濃い赤 */
    font-size: 1.3em;
    margin-top: 0; /* 親要素内の最初のh3なので上マージンなし */
    margin-bottom: 15px;
    border-left: none; /* h3の共通スタイルからborder-leftを削除 */
    padding-left: 0; /* h3の共通スタイルからpadding-leftを削除 */
}

/* 各ドラマのタイトル（HTMLのh3相当） */
h3 { /* channel-heading, intro-section h3 以外のh3（一般的なh3） */
    color: #B22222; /* 濃い赤 */
    font-size: 1.6em; /* ドラマタイトルを大きめに */
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 5px solid #e74c3c; /* h3のデフォルトボーダー */
    padding-left: 10px;
}


/* 通常の段落 */
p {
    margin-bottom: 1.2em; /* 段落の余白 */
}

/* --- リストスタイル --- */

/* デフォルトのリストアイテム */
ul {
    list-style: none; /* デフォルトのリストマークを削除 */
    padding-left: 0;
    margin-bottom: 20px;
}

ul li {
    padding-left: 1.5em; /* リストマークのスペース */
    position: relative;
    margin-bottom: 0.8em; /* リストアイテム間の余白 */
}

ul li:before { /* カスタムリストマーク */
    content: '🔸'; /* 絵文字のリストマーク */
    position: absolute;
    left: 0;
    color: #cc8e60; /* リストマークの色 */
}

/* --- テーブルスタイル --- */

/* プロフィールテーブルのコンテナ（横スクロール対応） */
.profile-table-container {
    overflow-x: auto; /* 横スクロールが必要な場合に表示 */
    margin-bottom: 2em; /* 下の余白 */
}

/* プロフィールテーブル */
.profile-table {
    width: 100%; /* 幅を100%に */
    border-collapse: collapse; /* ボーダーを結合 */
    margin: 1em 0; /* 上下の余白 */
    border: 1px solid #ddd; /* ボーダーの色 */
}

.profile-table th,
.profile-table td {
    padding: 12px 15px; /* セルの内側の余白 */
    border: 1px solid #ddd; /* セルのボーダー */
    text-align: left; /* テキストの配置 */
}

.profile-table th {
    background-color: #f2f2f2; /* ヘッダーの背景色 */
    font-weight: bold; /* ヘッダーの文字を太字に */
}

.profile-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* 偶数行の背景色 */
}

/* ドラマ情報テーブル */
.drama-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden; /* 角丸のためにはみ出しを隠す */
}

.drama-table th {
    background-color: #B22222; /* ヘッダーの背景色 */
    color: white;
    padding: 15px;
    font-weight: bold;
    text-align: left;
}

.drama-table td {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.drama-table tr:nth-child(even) { /* 偶数行の背景色 */
    background-color: #fef5e7;
}

.drama-table tr:hover {
    background-color: #f0e6d6; /* ホバー時の背景色 */
    transition: background-color 0.2s ease;
}

.drama-table .drama-title {
    font-weight: bold;
    color: #B22222;
    transition: all 0.2s ease;
}

.drama-table .drama-title a {
    color: #B22222; /* リンクの色 */
    text-decoration: none;
}

.drama-table .drama-title a:hover {
    color: #8B0000; /* ホバー時のリンク色 */
    text-decoration: underline;
}

/* --- ドラマ詳細情報（各ドラマカード内） --- */

/* ドラマカード全体 */
.drama-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    border-left: 5px solid #a22041;
    margin-bottom: 25px; /* 各ドラマカード間の余白を調整 */
}

.drama-card:hover {
    transform: translateY(-5px);
}

/* 個々のドラマ情報のボックス */
.drama-box { /* drama-card内にあるドラマ情報部分 */
    border: 1px solid #ddd; /* 画面に表示されているドラマカードの薄いグレーの枠線 */
    padding: 15px; /* drama-contentへの統合でpaddingはここではなくdrama-contentで調整 */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ドラマカードヘッダー部分（タイトルと評価を含む帯） */
.drama-header { /* この要素のスタイルを再調整 */
    padding: 12px 15px;
    background: #a22041; /* 赤系の背景色 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f6bfbc; /* 薄いボーダー */
}

/* ドラマカード内のドラマタイトル (h4.drama-card-title が想定。HTML側にh4タグがあるか確認) */
.drama-card-title { /* スクリーンショットの「風起花抄 ～宮廷に咲く瑠璃色の恋～」の部分 */
    font-size: 18px; /* 元々のフォントサイズ */
    font-weight: bold;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* ここに色を直接指定せず、リンクの色で制御 */
}
.drama-card-title a { /* ドラマタイトル内のリンクの色を白に統一 */
    color: #ffffff; /* 白い文字 */
    text-decoration: none;
}
.drama-card-title a:hover {
    text-decoration: underline;
}


/* ドラマカード内の星評価 */
.drama-rating { /* スクリーンショットの「★4.0」の部分 */
    background: #ffffff; /* 白い背景 */
    color: #a22041; /* 赤系の文字色 */
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    flex-shrink: 0; /* タイトルが長くなっても縮まないように */
    margin-left: 10px; /* タイトルとの間隔 */
}

.rating-na { /* 評価なしの場合のスタイル */
    background: #dddddd;
    color: #666666;
}

/* ドラマカードコンテンツ部分 */
.drama-content { /* スクリーンショットの「6月2日(月) 7:00～」以下の部分 */
    padding: 15px;
    font-size: 15px; /* ここで文字サイズを調整 */
    line-height: 1.6;
}
.drama-content p { /* drama-content内のpタグの余白調整 */
    margin-bottom: 5px;
}

/* ドラマカード内のチャンネル名 */
.channel { /* スクリーンショットの「BS12」の部分 */
    display: inline-block;
    padding: 4px 10px;
    /* backgroundとcolorは各チャンネル固有のクラスで上書きされる */
    color: #333; /* デフォルトの文字色 */
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 10px; /* 上部に少し余白 */
}

/* 各チャンネル固有のスタイル */
.bs12 {
    background: #0066cc;
    color: white;
}

.ntv-plus {
    background: #d70c18;
    color: white;
}

.eisei-gekijo {
    background: #8b6db0;
    color: white;
}

.wowow {
    background: #2b90d9;
    color: white;
}

.asia-dramatic {
    background: #ea5506;
    color: white;
}

.lala {
    background: #e87a90;
    color: white;
}

.home-drama {
    background: #007b43;
    color: white;
}

.ch-ginga {
    background: #5654a2;
    color: white;
}


/* 豆瓣評価セクション */
.douban-rating-section {
    background-color: #f8f9fa;
    border-left: 4px solid #4caf50;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}

.douban-heading {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    display: flex;
    align-items: center;
}

.douban-icon {
    margin-right: 8px;
    font-size: 20px;
}

.douban-content {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}
.douban-content p {
    margin-bottom: 5px;
}
.douban-content strong {
    color: #555555;
    font-size: 15px;
}

.douban-link {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 12px;
    background-color: #4db6ac;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.douban-link:hover {
    background-color: #26a69a;
    text-decoration: none;
    color: white;
}

/* YouTubeリンク（動画の下のテキストリンク） */
.youtube-link {
    display: block;
    margin-top: 10px;
    color: #3498db;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}
.youtube-link:hover {
    text-decoration: underline;
}

/* ドラマ情報リスト（キャストなど） */
.drama-info-list { /* 今回のHTMLには使用されていないようですが、念のため残します */
    list-style: none; /* デフォルトのリストマーカーをなくす */
    padding-left: 0; /* 左のパディングをなくす */
    margin-bottom: 2em; /* 下の余白 */
}

.drama-info-list li {
    margin-bottom: 0.5em; /* リストアイテム間の余白 */
    line-height: 1.6; /* 行の高さ */
    padding-left: 1.5em; /* インデント */
    position: relative; /* カスタムマーカーのために */
}

.drama-info-list li strong {
    margin-right: 0.5em; /* 項目名の後のスペース */
}

.drama-info-list li ul {
    list-style: none; /* キャストリストのデフォルトマーカーをなくす */
    padding-left: 1.5em; /* インデント */
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.drama-info-list li ul li {
    margin-bottom: 0.2em; /* キャスト名間の余白 */
    padding-left: 0; /* ネストされたリストのカスタムマーカーはなし */
}
.drama-info-list li:before { /* カスタムリストマーク（🔸） */
    content: '🔸';
    position: absolute;
    left: 0;
    color: #cc8e60;
}

/* ドラマノートリスト（予告編に関する注意書きなど） */
.drama-note-list {
    list-style: disc; /* デフォルトのマーカー */
    margin-left: 2em; /* インデント */
    margin-top: 1em;
    margin-bottom: 1em;
}


/* --- 埋め込み要素 --- */

/* YouTube埋め込みコンテナのスタイル（video-containerに名称変更） */
.video-container { /* youtube-embed-containerから名称変更 */
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
    overflow: hidden;
    margin: 1.5em 0; /* 上下の余白 */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 埋め込みカードのスタイル（NOTEやLinktreeなど） */
.embed-card-container {
    max-width: 500px; /* 親要素の最大幅 */
    margin: 10px auto; /* 中央揃え */
}

iframe.embed-card {
    display: block;
    width: 100%;
    height: 155px; /* Note.comの埋め込みの高さに合わせて調整 */
    border: 1px solid #e0d0c0 !important; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- 新しく追加したHTMLクラスのスタイル --- */

/* 共通セクションタイトル（赤系の背景） */
.section-title {
    font-size: 1.8rem;
    background-color: #a32046; /* 濃い赤 */
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    display: block;
    width: 100%;
    margin-top: 3em;
    margin-bottom: 1.5em;
    font-weight: bold;
    text-align: center;
}

/* 共通セクションサブタイトル */
.section-subtitle {
    font-size: 1.3rem;
    color: #333;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: bold;
}

/* 記事の締めくくりの見出し */
.section-ending-title {
    font-size: 1.8rem; /* 他のH2見出しと合わせて調整 */
    margin-top: 3em;
    margin-bottom: 2em;
    text-align: center; /* 中央寄せ */
    font-weight: bold;
    color: #8B0000; /* H2の色に合わせる */
    border-bottom: none; /* H2の下線はつけない */
    padding-bottom: 0;
}

/* VPN関連の見出し */
.section-vpn-title {
    font-size: 1.6rem; /* H2より少し小さめ */
    margin-top: 2.5em;
    margin-bottom: 1.5em;
    font-weight: bold;
    color: #B22222; /* h3の色に合わせる */
}

/* 質問リスト (VPNを推奨する前の箇条書き) */
.question-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2em;
}

.question-list li {
    margin-bottom: 0.8em;
    padding-left: 1.5em;
    position: relative;
}

.question-list li::before {
    content: "・"; /* カスタムマーカー（黒点） */
    color: #a32046; /* マーカーの色 */
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* VPNメリットリスト (✅アイコン) */
.benefits-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2em;
}

.benefits-list li {
    margin-bottom: 1em;
    line-height: 1.6;
    padding-left: 1.8em; /* アイコンのスペース */
    position: relative;
}

.benefits-list li::before {
    content: '✅'; /* アイコン */
    position: absolute;
    left: 0;
    top: 0;
}

/* SNSリンクのコンテナ */
.social-links {
    margin-top: 3em;
    margin-bottom: 2em;
    text-align: center; /* 中央寄せ */
}

.social-links p {
    margin-bottom: 0.8em;
}

.social-links a {
    color: #007bff; /* リンクの色（青） */
    text-decoration: none; /* 下線をなくす */
    font-weight: bold;
}

.social-links a:hover {
    text-decoration: underline; /* ホバーで下線 */
}

/* 注意点セクション (VPNの免責事項など) */
.note-section {
    border: 1px solid #ffcc00; /* 注意を促すボーダー色 */
    background-color: #fffacd; /* 背景色 */
    padding: 1.5em;
    margin-top: 3em;
    margin-bottom: 2em;
    border-radius: 5px;
}

.note-section h3 {
    color: #cc0000; /* 注意点の見出し色 */
    margin-top: 0;
    font-size: 1.2rem;
}

.note-section p {
    margin-bottom: 0;
}

/* 参照元セクション */
.references-section {
    margin-top: 3em;
    margin-bottom: 2em;
}

.references-title {
    font-weight: bold;
    margin-bottom: 0.8em;
    font-size: 1.1rem;
    color: #8B0000; /* 見出し色 */
}

.references-list {
    list-style: disc; /* デフォルトのリストマーカー */
    margin-left: 2em;
    margin-bottom: 1.5em;
}

.references-list li {
    margin-bottom: 0.5em;
    padding-left: 0; /* カスタムリストマーカーを無効化 */
}

.references-list li:before {
    content: none; /* カスタムリストマーカーを無効化 */
}

.article-date {
    text-align: right; /* 日付を右寄せ */
    font-style: italic; /* 斜体 */
    color: #666;
    font-size: 0.9em;
}

/* 目次（toc）のスタイル */
.toc {
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 30px;
}
.toc .toc-title { /* 目次タイトル用にクラスを追加 */
    margin-top: 0;
    background-color: #444;
    color: #fff; /* 目次のタイトル色を白に */
    padding: 8px 15px; /* h2.channel-headingと揃える */
    border-radius: 5px;
}
.toc ul {
    padding-left: 20px;
}
.toc a {
    color: #e74c3c;
    text-decoration: none;
}
.toc a:hover {
    text-decoration: underline;
}

/* 記事導入部 (intro) */
.intro {
    margin-bottom: 30px;
    font-size: 1.1em;
    text-align: center;
}

/* 記事結び (outro) */
.outro {
    margin-top: 40px;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 5px;
}


/* --- その他の調整・ユーティリティ --- */

/* 水平線 */
hr {
    height: 2px;
    background: linear-gradient(to right, transparent, #cd5c5c, transparent);
    margin: 40px 0;
    border: none;
}

/* Call to action関連 */
.call-to-action, .call-to-action-sub, .call-to-action-link {
    font-size: 1.2em;
    font-weight: bold;
    color: #B22222;
    margin-bottom: 10px;
    text-align: center; /* 必要に応じて中央寄せ */
}
.call-to-action-link {
    display: inline-block;
    margin-top: 10px;
}
.call-to-action-link a {
    color: #B22222;
    text-decoration: none;
    border: 2px solid #B22222;
    padding: 8px 15px;
    border-radius: 5px;
    display: inline-block;
    transition: all 0.3s ease;
}
.call-to-action-link a:hover {
    background-color: #B22222;
    color: white;
}

/* --- レスポンシブデザイン --- */
@media (max-width: 768px) {
    body {
        padding: 15px;
    }
    #blog-title {
        padding: 2.5rem 1rem;
    }
    #blog-title h1 {
        font-size: 2rem;
    }
    .entry-title {
        font-size: 1.6rem;
    }
    .entry {
        margin: 1rem auto;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: none; /* モバイルでは影をなくすことで軽量化 */
    }
    .entry:hover {
        transform: none; /* モバイルではホバーエフェクトを無効化 */
        box-shadow: none;
    }
    .entry-content {
        font-size: 1rem;
    }
    .main-title {
        font-size: 1.8em;
    }
    h2 { /* 一般のh2 */
        font-size: 1.6em;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    h2.channel-heading { /* チャンネル名h2 */
        font-size: 1.6em; /* モバイルでも同じサイズに */
    }
    h3 {
        font-size: 1.4em;
        margin-top: 25px;
        margin-bottom: 15px;
    }
    .intro-section, .synopsis, .note-section, .social-links, .references-section {
        padding: 15px;
        margin: 20px 0;
    }
    .drama-table th, .drama-table td {
        padding: 10px;
        font-size: 0.9em;
    }
    .section-ending-title, .section-vpn-title {
        font-size: 1.5rem;
        margin-top: 2em;
        margin-bottom: 1.5em;
    }
    .call-to-action, .call-to-action-sub {
        font-size: 1.1em;
    }

    .schedule-grid {
        grid-template-columns: 1fr; /* モバイルでは1列にする */
    }
    .drama-card {
        margin-bottom: 20px; /* モバイルでのカード間余白 */
    }
@media (min-width: 768px) {
  .page-index .archive-entries {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    justify-content: space-between;
  }
  .page-index .archive-entry {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    width: calc(48% - 8px);
    padding: 16px;
    box-sizing: border-box;
    transition: box-shadow .2s;
  }
  .page-index .archive-entry:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  }
  .page-index .entry-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 1em;
  }
  
  @media screen and (max-width: 600px) {
  h2.heading-large-white {
    color: #fff !important;
  }}
@media screen and (max-width: 768px) {
  /* h2全般と対象クラスがついたh2も白字に */
  h2,
  h2.channel-heading,
  h2.heading-large-white {
    color: #fff !important;
  }

}