/* ===========================
   パチ配信チェッカー 記事デザイン
=========================== */

/* 本文コンテナ自体を読みやすい幅(700px)に統一する。
   以前は「段落だけ700px、テーブルやボックスはコンテナ幅いっぱい」という
   個別指定だったため、文章とテーブル・ボックスの幅がバラバラで
   左寄り・不揃いに見えていた。コンテナ自体を狭めることで、
   中の要素すべて(段落・見出し・テーブル・POINT/編集部コメント等の
   ボックス)が同じ幅で揃うようにする。中央寄せにして左右の余白も均等に。
   表(.table-box)はoverflow-x:autoを持っているため、列数が多くても
   横スクロールで崩れずに収まる。
   スマホ幅(600px以下)は別途 padding:0 16px を指定済みのため対象外。 */
@media screen and (min-width: 601px){
    body.single:not(.pachi-live-list-active):not(.pachi-machine-index-active):not(.pachi-ranking-active) .entry-content,
    body.page:not(.pachi-live-list-active):not(.pachi-machine-index-active):not(.pachi-ranking-active) .entry-content,
    body.single:not(.pachi-live-list-active):not(.pachi-machine-index-active):not(.pachi-ranking-active) .eye-catch,
    body.page:not(.pachi-live-list-active):not(.pachi-machine-index-active):not(.pachi-ranking-active) .eye-catch{
        max-width:800px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* ライブ配信一覧・機種一覧・ランキングページは独自ヘッダーを持つため、
   本文先頭のアイキャッチ画像(.eye-catch)は表示しない。
   これらのページでアイキャッチ画像を設定するのはOGP/SNSシェア画像用の
   目的のみであり、本文内には不要（上のルールで幅制限の対象からも
   除外されているため、非表示にしないと原寸大のまま表示されてしまう）。
   OGP出力(Cocoon本体機能)はCSSと無関係に動作するため、この非表示化は
   OGP画像設定には影響しない。 */
body.pachi-live-list-active .eye-catch,
body.pachi-machine-index-active .eye-catch,
body.pachi-ranking-active .eye-catch{
    display:none;
}

/* PR表記(アフィリエイト記事の冒頭に入れる開示文)。
   ステマ規制ガイドライン上、読める程度に目立たせる必要があるため、
   本文より一段小さく・グレーにする程度に留め、過度に薄くしない。 */
.pr-disclosure{
    display:block;
    margin:0 0 24px;
    font-size:13px;
    color:#9aa5b1;
}

/* H2 */
.news-heading{
    margin:48px 0 24px;
    padding:16px 20px;
    background:#27323f;
    color:#fff;
    border-left:6px solid #7CFF6B;
    border-radius:8px;
    font-size:1.5rem;
    line-height:1.5;
}

/* 記事でわかること */
.summary-box{
    margin:32px 0;
    padding:24px;
    background:#1b232d;
    border:1px solid #394654;
    border-radius:8px;
}

.summary-box h2{
    margin-top:0;
}

.summary-box ul{
    margin:16px 0 0;
}

/* 記事本文中の広告(忍者AdMax)。summary-box等と揃えたデザインで、
   広告だと分かるラベルを付けつつ本文から浮かないようにする。 */
.pachi-article-ad{
    margin:40px 0;
    padding:20px;
    background:#1b232d;
    border:1px solid #394654;
    border-radius:8px;
    text-align:center;
}

/* PC/SPそれぞれに合う広告枠を出し分ける。
   .pachi-article-ad--sp はスマホ向け320x100広告(SP幅のみ配信される)、
   .pachi-article-ad--pc はPC向け300x250広告。
   既定(スマホ幅)ではspを表示・pcは隠し、835px以上ではその逆にする。 */
.pachi-article-ad--pc{
    display:none;
}

@media screen and (min-width: 835px){
    .pachi-article-ad--sp{
        display:none;
    }
    .pachi-article-ad--pc{
        display:block;
    }
}

.pachi-article-ad__label{
    margin:0 0 12px;
    font-size:9px;
    color:#4b5563;
    text-align:left;
    opacity:0.7;
}

.pachi-article-ad__body{
    display:flex;
    justify-content:center;
    overflow:hidden;
    max-width:100%;
}

/* 広告ネットワーク側が実際には320x100より大きい(または可変の)
   クリエイティブを差し込んでくることがあり、その場合に箱からはみ出して
   表示されてしまう。iframe側にも上限を掛けて必ず箱の中に収める。 */
.pachi-article-ad__body iframe,
.pachi-article-ad__body ins{
    max-width:100%;
}

/* POINT */
.point-box{
    margin:32px 0;
    padding:20px;
    background:#24303b;
    border-left:6px solid #7CFF6B;
    border-radius:8px;
}

.point-box h3{
    margin-top:0;
}

/* 編集部コメント */
.editor-box{
    margin:40px 0;
    padding:20px;
    background:#2c3139;
    border-left:6px solid #FFC83D;
    border-radius:8px;
}

.editor-box h3{
    margin-top:0;
}

/* まとめ */
.summary-end-box{
    margin:40px 0;
    padding:24px;
    background:#1d242b;
    border:1px solid #444;
    border-radius:8px;
}

/* 追記（記事更新のお知らせ） */
.update-box{
    margin:32px 0;
    padding:20px;
    background:#1c2a38;
    border-left:6px solid #4FC3F7;
    border-radius:8px;
}

.update-box h3{
    margin-top:0;
    color:#4FC3F7;
}

/* 記事末尾の配信一覧CTAボタン */
.article-cta-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:32px 0;
    padding:16px 24px;
    background:linear-gradient(90deg, #1f2b1f 0%, #16351f 100%);
    border:1px solid #39ff1466;
    border-radius:8px;
    color:#39ff14 !important;
    font-weight:bold;
    font-size:1.05rem;
    text-decoration:none !important;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.article-cta-button:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(57, 255, 20, 0.2);
}

/* X(Twitter)埋め込み
   埋め込みは記事の裏付け・臨場感として表示したいが、
   カード内の「Xで見る」リンクや画像タップから記事を離脱されてしまう
   ケースが計測で見えたため、見た目はそのまま・操作だけ無効化する。
   ウィジェットJS未読込時に表示される素のblockquote内のリンクも
   このルール一つでまとめて無効化できる。 */
.entry-content .wp-block-embed-twitter{
    pointer-events:none;
    cursor:default;
}

/* テーブル */
.table-box{
    overflow-x:auto;
    margin:32px 0;
}

.table-box table{
    width:100%;
    border-collapse:collapse;
}

.table-box th{
    background:#27323f;
    color:#fff;
    padding:12px;
}

.table-box td{
    padding:12px;
    border-bottom:1px solid #3a3a3a;
}

/* ===========================
   スマホ表示の調整
   （余白が広すぎて窮屈に見える／見出しの階層が
   タイトルより目立ちすぎる問題への対応）
=========================== */
@media screen and (max-width: 600px){

    /* 記事・固定ページ本文は左右の余白が0のままだと窮屈なので
       ほんの少しだけ余白を持たせる。ただし配信一覧・機種一覧・
       記事一覧・ランキングの各アプリ的ページは、自前の余白
       （.pachi-container 等）を持っているため対象外にする */
    body.single:not(.pachi-live-list-active):not(.pachi-machine-index-active):not(.pachi-ranking-active) .entry-content,
    body.page:not(.pachi-live-list-active):not(.pachi-machine-index-active):not(.pachi-ranking-active) .entry-content{
        padding:0 16px;
    }

    .news-heading{
        margin:32px 0 16px;
        padding:12px 14px;
        font-size:1.15rem;
        line-height:1.4;
    }

    .summary-box{
        margin:24px 0;
        padding:16px;
    }

    .point-box{
        margin:24px 0;
        padding:14px 16px;
    }

    .editor-box{
        margin:28px 0;
        padding:14px 16px;
    }

    .update-box{
        margin:24px 0;
        padding:14px 16px;
    }

    .summary-end-box{
        margin:28px 0;
        padding:16px;
    }

    .article-cta-button{
        margin:24px 0;
        padding:14px 16px;
        font-size:0.95rem;
    }

    .table-box{
        margin:24px 0;
        font-size:0.9rem;
    }

    .table-box th,
    .table-box td{
        padding:8px;
    }
}

@media screen and (max-width: 480px){

    /* 記事タイトルが見出し（news-heading）より小さくなり、
       階層が逆転して見えてしまうのを防ぐため、記事タイトルを拡大する */
    body.single .entry-title{
        font-size:24px;
        line-height:1.4;
    }
}