@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/*****************************************************
 * オトナのマンガ手帖：完全統合マスターCSS
 * 最終更新：2026年10月最新テンプレート基準
 *****************************************************/

/* ===================================================
   1. サイト全体装飾・見出し・テキストユーティリティ
   =================================================== */

/* H2見出し：手帖ネイビー＆スカイブルーリボン */
.entry-content h2,
.article h2 {
    font-size: 23px !important;
    font-weight: bold !important;
    color: #2E4B72 !important;
    background: #f3f9fc !important;
    padding: 14px 18px !important;
    border-left: 6px solid #89c3eb !important;
    border-bottom: 1px solid #dcebf5 !important;
    border-radius: 0 6px 6px 0 !important;
    margin-top: 45px !important;
    margin-bottom: 22px !important;
    line-height: 1.4 !important;
}

@media screen and (max-width: 480px) {
    .entry-content h2,
    .article h2 {
        font-size: 19px !important;
        padding: 12px 15px !important;
        margin-top: 35px !important;
    }
}

/* H3見出し：破線アンダーライン */
.entry-content h3,
.article h3 {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #3d342c !important;
    border-bottom: 2px dashed #89c3eb !important;
    padding-bottom: 6px !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    background: transparent !important;
}

/* マーカー・引用 */
.entry-content .marker {
    background: linear-gradient(transparent 60%, #ffcccc 60%) !important;
    font-weight: bold !important;
}

.entry-content blockquote {
    background: #f9f9f9 !important;
    border-left: 5px solid #ccc !important;
    margin: 20px 0 !important;
    padding: 15px !important;
    font-size: 14px !important;
}

/* 全体非表示ユーティリティ */
.cat-label { display: none !important; } /* アイキャッチ左上のカテゴリーラベル非表示 */
.page .date-tags { display: none !important; } /* 固定ページの日付非表示 */

/* バナー・広告リンク完全中央寄せ */
.banner-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 20px auto !important;
    clear: both !important;
}
.banner-center > *,
.banner-center div,
.banner-center a,
.banner-center iframe,
.banner-center figure {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
.banner-center img {
    display: inline-block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* ===================================================
   2. 記事冒頭：PR表記・18禁アナウンス・吹き出し最適化
   =================================================== */

/* マイクロ告知バー */
.ot-top-notice {
    background-color: #fcfaf6;
    border: 1px solid #e8e1d5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    font-size: 11px;
    color: #666666;
}
.notice-item { display: flex; align-items: center; gap: 6px; }
.notice-badge {
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.2;
}
.notice-badge.pr-badge { background-color: #7a6e62; color: #ffffff; }
.notice-badge.r18-badge { background-color: #8c2a2a; color: #ffffff; }

/* 単行テキスト告知バー */
.ot-single-notice {
    font-size: 11px;
    color: #777777;
    margin-bottom: 16px;
    line-height: 1.6;
}
.notice-tag {
    font-size: 10px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    vertical-align: middle;
}
.notice-tag.pr { background-color: #7a6e62; }
.notice-tag.r18 { background-color: #8c2a2a; }
.pr-notice { font-size: 13px; color: #888; margin-bottom: 10px; text-align: right; }

@media screen and (min-width: 768px) {
    .ot-single-notice { text-align: right; }
}

/* スマホ表示時の吹き出しアイコン・マージン最適化 */
@media screen and (max-width: 480px) {
    .speech-icon img,
    .speech-wrap .speech-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }
    .speech-wrap .speech-icon-emoji {
        font-size: 32px !important;
        line-height: 50px !important;
    }
    .speech-wrap:not(.right) .speech-bubble {
        margin-left: 67px !important;
        margin-right: 0 !important;
    }
    .speech-wrap.right .speech-bubble {
        margin-right: 67px !important;
        margin-left: 0 !important;
    }
}

/* ===================================================
   3. アフィリエイトボタン ＆ 共通CTAボックス
   =================================================== */

/* 外枠ボックス（冒頭・末尾共通／余白均一化） */
.ot-cta-box,
.ot-cta-box-slim,
.ot-cta-box-bottom {
    margin: 20px auto 28px auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
}

.ot-cta-lead-text {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0 !important;
    line-height: 1.5;
    text-align: center;
    color: #3d342c;
}

.affiliate-buttons-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 450px;
    margin: 0 auto;
    padding: 0;
}

/* ボタン共通基本スタイル */
.affiliate-btn {
    display: block;
    width: 100% !important;
    max-width: 450px;
    margin: 0 auto !important;
    padding: 16px 10px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    text-align: center !important;
    white-space: nowrap !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 🟥 FANZAボタン */
.affiliate-btn.dmm {
    background: linear-gradient(to bottom, #ff5e78, #E60033);
    color: #ffffff !important;
    border: 2px solid #E60033;
    box-shadow: 0 4px 10px rgba(230, 0, 51, 0.35);
    font-size: 17.5px;
}
.affiliate-btn.dmm::before {
    content: "編集部おすすめ";
    position: absolute;
    top: -14px;
    left: 20px;
    background: #E60033;
    color: #ffffff !important;
    border: 1.5px solid #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.25s ease !important;
}
.affiliate-btn.dmm:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px rgba(230, 0, 51, 0.55) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
.affiliate-btn.dmm:hover::before { transform: translateY(-1px) scale(1.03) !important; }
.affiliate-btn.dmm:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(230, 0, 51, 0.2) !important;
}

/* 🟦 DLsite通常ボタン（併売時：アウトライン型） */
.affiliate-btn.dl {
    background-color: transparent;
    color: #004BB1 !important;
    border: 2px solid #004BB1;
    box-shadow: none;
    font-size: 15px;
}
.affiliate-btn.dl:hover {
    background-color: #004BB1 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
.affiliate-btn.dl:active { transform: translateY(1px) !important; }

/* 🟦 DLsite単独・専売用（FANZAボタンと同一サイズのロイヤルブルー） */
.affiliate-btn.dl-main,
.ot-cta-box .affiliate-buttons-wrap .affiliate-btn.dl:only-child,
.ot-fukurotoji-cta .affiliate-buttons-wrap .affiliate-btn.dl:only-child {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: none;
    min-height: 56px;
    margin: 8px 0 0 0 !important;
    padding: 16px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none;
    background: linear-gradient(135deg, #0266e8 0%, #004bb1 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 75, 177, 0.35) !important;
}

.affiliate-btn.dl-main::before,
.ot-cta-box .affiliate-buttons-wrap .affiliate-btn.dl:only-child::before,
.ot-fukurotoji-cta .affiliate-buttons-wrap .affiliate-btn.dl:only-child::before {
    content: "編集部おすすめ";
    position: absolute;
    top: -10px;
    left: 24px;
    background: #e11d48;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 12px;
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.05em;
    pointer-events: none;
}

.affiliate-btn.dl-main:hover,
.ot-cta-box .affiliate-buttons-wrap .affiliate-btn.dl:only-child:hover,
.ot-fukurotoji-cta .affiliate-buttons-wrap .affiliate-btn.dl:only-child:hover {
    background: linear-gradient(135deg, #0256cc 0%, #003b8e 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 75, 177, 0.45) !important;
    transform: translateY(-2px);
    color: #ffffff !important;
}

.affiliate-btn.dl-main:active,
.ot-cta-box .affiliate-buttons-wrap .affiliate-btn.dl:only-child:active,
.ot-fukurotoji-cta .affiliate-buttons-wrap .affiliate-btn.dl:only-child:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 75, 177, 0.3) !important;
}

/* 専売バッジ ＆ CTA注記 */
.ot-badge-fanza-only,
.ot-badge-dlsite-only {
    display: inline-block;
    color: #ffffff !important;
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
    margin-bottom: 4px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.ot-badge-fanza-only { background-color: #E60033; }
.ot-badge-dlsite-only { background-color: #004BB1; }

.ot-cta-note {
    font-size: 10.5px;
    color: #8c7e70;
    text-align: center;
    margin-top: 6px;
    line-height: 1.5;
}

/* ===================================================
   4. ファーストビュー：統合型レビューカード (.ot-quick-review)
   =================================================== */

.ot-quick-review {
    width: 100% !important;
    background-color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    margin: 20px 0 !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 480px) {
    .ot-quick-review {
        padding: 15px !important;
        margin: 10px 0 !important;
    }
}

/* グリッド配置（PC） */
@media (min-width: 768px) {
    .ot-review-main-grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        grid-template-areas:
            "banner specs"
            "eval   eval"
            "accord accord";
        gap: 20px;
        margin: 20px 0;
        align-items: stretch;
    }
    .ot-area-specs     { grid-area: specs; }
    .ot-area-banner    { 
        grid-area: banner; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        height: 100% !important; 
    }
    .ot-area-eval      { grid-area: eval; margin-bottom: 0 !important; }
    .ot-area-accordion { grid-area: accord; margin-top: 0 !important; }
}

/* グリッド配置（スマホ） */
@media screen and (max-width: 480px) {
    .ot-review-main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin: 15px 0 !important;
    }
    .ot-area-banner    { order: 1 !important; }
    .ot-area-eval      { 
        order: 2 !important; 
        background-color: #fdfbf7; 
        border: 1px solid #e2d9cd; 
        border-radius: 8px; 
        padding: 15px; 
    }
    .ot-area-specs     { order: 3 !important; }
    .ot-area-accordion { order: 4 !important; }
}

/* 表紙バナー */
.ot-banner-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
.ot-banner-container a { display: block !important; width: 100% !important; text-align: center !important; }
.ot-banner-container img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 400px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.2s ease-in-out !important;
}

/* 属性バッジ（非リンク・見出しシール型） */
.ot-area-eval .attr-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.ot-area-eval .attr-badge {
    display: inline-block;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    border-radius: 3px;
    background: #e5ded3;
    color: #3b2f25;
    border: none !important;
    box-shadow: none !important;
    cursor: default;
    user-select: none;
}
.ot-area-eval .attr-badge.highlight {
    background: #8c2a2a;
    color: #ffffff;
    font-weight: 800;
}

/* 純CSSタブ切替 */
.tab-eval-box { margin: 16px 0 0 0; }
.tab-eval-box input[type="radio"] { display: none !important; }
.tab-btn-group { display: flex; gap: 8px; margin-bottom: 12px; }
.tab-btn-group .tab-label {
    flex: 1;
    text-align: center;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #5c5247;
    background: linear-gradient(180deg, #fbf7f0 0%, #ede3d3 100%);
    border: 1px solid #d4c7b5;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.tab-btn-group .tab-label:hover { background: #f4ede2; transform: translateY(-1px); }
#eval-tab-simple:checked ~ .tab-btn-group label[for="eval-tab-simple"],
#eval-tab-detail:checked ~ .tab-btn-group label[for="eval-tab-detail"] {
    background: #2E4B72;
    color: #ffffff;
    border-color: #2E4B72;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(46, 75, 114, 0.25);
}
.tab-panel { display: none; flex-direction: column; gap: 8px; }
#eval-tab-simple:checked ~ .panel-simple { display: flex; }
#eval-tab-detail:checked ~ .panel-detail { display: flex; }

/* 簡易スコアパネル：一体型グリッド */
.simple-eval-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e8e1d5;
    border-radius: 6px;
    padding: 12px;
}
@media screen and (min-width: 520px) {
    .simple-eval-wrap {
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 12px 16px;
    }
    .simple-eval-wrap .simple-eval-total-verdict {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 2px !important;
    }
}
@media screen and (max-width: 480px) {
    .panel-simple .simple-eval-wrap {
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* スコアボックス共通ベース */
.score-box-large.score-box-star {
    flex: 0 0 115px;
    text-align: center;
    border-radius: 6px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.score-box-star .score-star-num {
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-bottom: 2px;
}
.score-star-visual {
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1;
    margin: 2px 0 4px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.score-star-visual .star-on { color: #f59e0b; }
.score-star-visual .star-half {
    background: linear-gradient(90deg, #f59e0b 50%, #dcd1bf 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.score-star-visual .star-off { color: #dcd1bf; }
.score-box-star .score-grade-label {
    display: inline-block;
    font-size: 10px !important;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 3px;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

/* Tier別スコアカラー設定 */
/* Tier 5：★3.0〜3.3（スレートアッシュ） */
.score-box-star.tier-star-30,
.score-box-star.tier-star-ash {
    border: 2px solid #a0978c;
    background: linear-gradient(160deg, #f7f5f2 0%, #ffffff 80%);
}
.score-box-star.tier-star-30 .score-star-num { color: #5c5247; }
.score-box-star.tier-star-30 .score-star-visual .star-on { color: #8c7e70; }
.score-box-star.tier-star-30 .score-grade-label { background: #f0eae1; color: #5c5247; border: 1px solid #dcd1bf; }

/* Tier 4：★3.4〜3.7（アンバーオレンジ） */
.score-box-star.tier-star-35,
.score-box-star.tier-star-amber {
    border: 2px solid #d97706;
    background: linear-gradient(160deg, #fffbeb 0%, #ffffff 80%);
}
.score-box-star.tier-star-35 .score-star-num { color: #b45309; }
.score-box-star.tier-star-35 .score-star-visual .star-on { color: #f59e0b; }
.score-box-star.tier-star-35 .score-grade-label { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Tier 3：★3.8〜4.1（ロイヤルサファイア） */
.score-box-star.tier-star-40,
.score-box-star.tier-star-sapphire {
    border: 2px solid #2563eb;
    background: linear-gradient(160deg, #eff6ff 0%, #ffffff 80%);
}
.score-box-star.tier-star-40 .score-star-num { color: #1d4ed8; }
.score-box-star.tier-star-40 .score-star-visual .star-on { color: #3b82f6; }
.score-box-star.tier-star-40 .score-grade-label { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* Tier 2：★4.2〜4.4（シャンパンゴールド） */
.score-box-star.tier-star-42,
.score-box-star.tier-star-gold {
    border: 2px solid #b45309;
    background: linear-gradient(160deg, #fefce8 0%, #fffdf0 50%, #ffffff 80%);
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.15);
}
.score-box-star.tier-star-42 .score-star-num {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.score-box-star.tier-star-42 .score-star-visual .star-on { color: #eab308; }
.score-box-star.tier-star-42 .score-grade-label { background: #fef08a; color: #854d0e; border: 1px solid #fde047; font-weight: 900; }

/* Tier 1：★4.5〜5.0（プリズムオーロラ） */
.score-box-star.tier-star-45,
.score-box-star.tier-star-50,
.score-box-star.tier-star-aurora {
    position: relative;
    border: 2px solid transparent;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #ff007a 0%, #7928ca 30%, #0070f3 70%, #00dfd8 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 12px rgba(121, 40, 202, 0.25);
}
.score-box-star.tier-star-45 .score-star-num {
    background: linear-gradient(135deg, #e11d48 0%, #9333ea 50%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.score-box-star.tier-star-45 .score-star-visual .star-on {
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.score-box-star.tier-star-45 .score-grade-label {
    background: linear-gradient(135deg, #fdf2f8 0%, #eff6ff 100%);
    color: #701a75;
    border: 1px solid #f472b6;
    font-weight: 900;
}

/* 3大強みピルバッジ */
.panel-simple .badge-list-group {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.panel-simple .pill-badge-item {
    background-color: #fff;
    border: 1px solid #e2d9cd;
    border-radius: 20px;
    padding: 5px 8px 5px 12px;
    font-size: 11.5px;
    color: #4a433d;
    line-height: 1.35;
}
.panel-simple .pill-badge-item.blue { border-left: 4px solid #3b82f6; }
.panel-simple .pill-badge-item.pink { border-left: 4px solid #ec4899; }
.panel-simple .pill-badge-item.green { border-left: 4px solid #10b981; }

/* 簡易スコア直下：総評バー */
.simple-eval-total-verdict {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff2f4 !important;
    border: 1px solid #ffccd3 !important;
    border-left: 4px solid #e11d48 !important;
    border-radius: 5px !important;
    padding: 8px 12px !important;
    box-shadow: 0 1px 3px rgba(225, 29, 72, 0.04);
}
.simple-eval-total-verdict .verdict-badge {
    background: #e11d48 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    flex-shrink: 0;
    line-height: 1.4;
    letter-spacing: 0.05em;
}
.simple-eval-total-verdict .verdict-text {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #4c111a !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* 詳細スコアパネル */
.tab-panel .detail-score-card {
    background-color: #fff;
    border: 1px solid #ebe4dc;
    border-radius: 6px;
    padding: 8px 10px;
    box-sizing: border-box;
}
.tab-panel .detail-score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tab-panel .detail-score-title {
    font-size: 12.5px;
    font-weight: bold;
    color: #4a4035;
}
.tab-panel .detail-score-val {
    font-size: 16px;
    font-weight: 900;
    color: #2E4B72;
}
.tab-panel .detail-score-val .unit {
    font-size: 11px;
    font-weight: bold;
    margin-left: 1px;
}
.tab-panel .detail-score-comment {
    font-size: 11px;
    color: #7a6e65;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #f0eae1;
    line-height: 1.35;
}
.tab-panel .detail-score-card.limit-break {
    position: relative;
    overflow: hidden;
    background: #fff0f2;
    border: 1.5px dashed #ffb3ba;
}
.tab-panel .detail-score-card.limit-break::before {
    content: "MAX";
    position: absolute;
    top: 6px;
    right: -22px;
    background: #E60033;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 24px;
    transform: rotate(35deg);
}
.tab-panel .detail-score-card.limit-break .detail-score-title { color: #5c1d24; }
.tab-panel .detail-score-card.limit-break .detail-score-val { color: #E60033; }
.tab-panel .detail-score-card.limit-break .detail-score-comment {
    border-top: 1px dashed #ffccd1;
    color: #7a2833;
}

/* ツールチップ */
.has-tooltip {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}
.tooltip-icon {
    font-size: 10px;
    color: #8c7e70;
    background-color: #f0eae1;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}
.has-tooltip .tooltip-content {
    visibility: hidden;
    opacity: 0;
    width: 230px;
    max-width: 75vw;
    white-space: normal;
    word-wrap: break-word;
    background-color: #3e3832;
    color: #ffffff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    position: absolute;
    bottom: 125%;
    left: 0;
    z-index: 100;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.has-tooltip .tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 15px;
    border-width: 5px;
    border-style: solid;
    border-color: #3e3832 transparent transparent transparent;
}
.has-tooltip:hover .tooltip-content,
.has-tooltip:focus .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* ===================================================
   5. スペック表・タグチップ・ショートコード連動
   =================================================== */

.ot-area-specs .specs-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.ot-area-specs .specs-table th {
    width: 76px;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #5c4d3c;
    background-color: #f7f4ee;
    border-bottom: 1px solid #ebe5d8;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.ot-area-specs .specs-table th .specs-th-note {
    display: block;
    font-size: 9.5px;
    font-weight: normal;
    color: #8c7e70;
    line-height: 1.2;
    margin-top: 3px;
    letter-spacing: -0.3px;
}
.ot-area-specs .specs-table td {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #333333;
    border-bottom: 1px solid #ebe5d8;
    vertical-align: middle;
    word-break: break-word;
}

@media screen and (max-width: 480px) {
    .ot-area-specs .specs-table th { width: 72px; padding: 7px 3px; font-size: 11.5px; }
    .ot-area-specs .specs-table td { padding: 7px 8px; font-size: 12.5px; }
}

/* 著者・サークル等のインラインテキストリンク */
.ot-spec-text-link {
    color: #2b1f14 !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.ot-spec-text-link:hover { color: #d97706 !important; }

/* ジャンルタグ（カプセルボタン型・#なし） */
.specs-table a.genre-tag,
.ot-tag-link {
    display: inline-flex;
    align-items: center;
    padding: 2.5px 7.5px;
    margin: 2px 2px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #dcd3c3;
    color: #4a3e35 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.15s ease;
}
.specs-table a.genre-tag:hover,
.ot-tag-link:hover {
    background: #fdfaf5;
    border-color: #8c7355;
    color: #1a1510 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* プレイ一覧チップBOX (.ot-play-chip-box) */
.ot-play-chip-box {
    background-color: #fff8f9 !important;
    border: 1px solid #ffccd1 !important;
    border-left: 4px solid #E60033 !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 14px 12px 14px !important;
    margin: 18px 0 20px 0 !important;
}
.ot-play-chip-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #8c2a2a !important;
    margin-bottom: 8px !important;
}
.ot-play-chip-box .ot-play-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ot-play-chip-box .play-chip {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: bold;
    line-height: 1.2;
    color: #5c1d24 !important;
    background-color: #ffffff;
    border: 1px solid #ffb3ba;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.ot-play-chip-box .play-chip:hover {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c !important;
    transform: translateY(-1px);
}
.ot-play-chip-box .play-chip.highlight {
    background-color: #be123c;
    border-color: #be123c;
    color: #ffffff !important;
}

/* 相性診断アコーディオン */
.ot-match-accordion {
    border: 1px solid #e2d9cd;
    border-radius: 6px;
    background-color: #fff;
    overflow: hidden;
}
.ot-match-summary {
    padding: 10px 14px;
    font-weight: bold;
    font-size: 13.5px;
    color: #2E4B72;
    cursor: pointer;
    background-color: #fcfaf6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background-color 0.2s ease;
    list-style: none;
}
.ot-match-summary::-webkit-details-marker { display: none; }
.ot-match-summary:hover { background-color: #f4ede2; }
.ot-match-summary-sub { font-size: 11px; color: #8c7e70; font-weight: normal; }
.ot-match-content {
    padding: 15px;
    border-top: 1px dashed #e2d9cd;
    background-color: #fdfbf7;
}
.match-flex {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
@media (min-width: 768px) {
    .match-flex { grid-template-columns: 1fr 1fr; }
}
.match-box { padding: 14px 16px; border-radius: 6px; box-sizing: border-box; }
.match-box.yes { background-color: #fff2f4; border: 1px dashed #ffb3ba; }
.match-box.no  { background-color: #f5f5f5; border: 1px dashed #ccc; }
.match-title {
    font-weight: bold;
    font-size: 13.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}
.match-title.yes { color: #E60033; }
.match-title.no  { color: #555555; }
.match-list {
    margin: 0 !important;
    padding-left: 18px !important;
    font-size: 13px !important;
    line-height: 1.6;
    color: #4a433d;
}
.match-list li { margin-bottom: 6px !important; }
.match-list li:last-child { margin-bottom: 0 !important; }

/* 10秒で分かるあらすじ */
.ot-quick-summary {
    background-color: #f7f3ed;
    padding: 12px 15px;
    border-radius: 6px;
    border-left: 4px solid #a0978c;
    margin-top: 15px;
    margin-bottom: 0;
}
.ot-quick-summary-title { font-weight: bold; font-size: 12px; color: #8c7e70; margin-bottom: 4px; letter-spacing: 0.05em; }
.ot-quick-summary-text { margin: 0 0 6px 0 !important; font-size: 13px; color: #4a433d; line-height: 1.5; font-weight: 500; }
.ot-quick-summary-core { font-size: 11.5px; color: #8c7e70; line-height: 1.4; border-top: 1px dashed #d9d2ca; padding-top: 6px; margin-top: 0 !important; }
.ot-quick-summary-core strong { color: #8c7e70; }
.ot-quick-summary-core span { color: #4a433d; }

/* ===================================================
   6. ヒロイン手帖 (.ot-heroine-notebook)
   =================================================== */

.ot-heroine-notebook {
    background-color: #fcfaf6;
    border: 1px solid #e2d9cd;
    border-left: 5px solid #2E4B72;
    border-radius: 0 6px 6px 0;
    padding: 14px 16px;
    margin: 20px 0 25px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.ot-heroine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    border-bottom: 1px dashed #dcd1bf;
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.ot-heroine-title {
    font-weight: bold;
    font-size: 13.5px;
    color: #2E4B72;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ot-heroine-tag {
    font-size: 10.5px;
    background-color: #eaf4fe;
    color: #1c355e;
    border: 1px solid #c9d6e4;
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: bold;
    line-height: 1.2;
}
.ot-heroine-body { font-size: 12.5px; color: #4a433d; line-height: 1.6; }
.ot-heroine-body p { margin: 0 0 6px 0 !important; }
.ot-heroine-body p:last-child { margin-bottom: 0 !important; }

/* ラベル3色体系 */
.ot-heroine-label { font-weight: bold; }
.ot-heroine-label.look  { color: #2d6a4f; } /* 容姿：アースオリーブ */
.ot-heroine-label.front { color: #2E4B72; } /* 表の顔：手帖ネイビー */
.ot-heroine-label.gap   { color: #8c2a2a; } /* 裏の性癖：ボルドーレッド */

/* 攻め・受け 2役対比スタイル */
.ot-heroine-notebook.is-attacker { border-color: #c4b5fd !important; background: #faf5ff !important; }
.ot-heroine-notebook.is-attacker .ot-heroine-header { background: #f3e8ff !important; border-bottom-color: #ddd6fe !important; }
.ot-heroine-notebook.is-attacker .ot-heroine-title { color: #5b21b6 !important; }
.ot-heroine-notebook.is-attacker .ot-heroine-tag { background: #7c3aed !important; color: #ffffff !important; }

.ot-heroine-notebook.is-receiver { border-color: #fbcfe8 !important; background: #fff5f7 !important; }
.ot-heroine-notebook.is-receiver .ot-heroine-header { background: #fce7f3 !important; border-bottom-color: #fbcfe8 !important; }
.ot-heroine-notebook.is-receiver .ot-heroine-title { color: #9d174d !important; }
.ot-heroine-notebook.is-receiver .ot-heroine-tag { background: #db2777 !important; color: #ffffff !important; }

/* ===================================================
   7. 本文演出パーツ（付箋・カードスタック・ミニチャット・神シーン）
   =================================================== */

/* 手帖風付箋 (.sticky-text) */
.entry-content .sticky-text {
    position: relative;
    font-family: 'Yomogi', sans-serif !important;
    background-color: #FFF0F2 !important;
    border: 1.5px solid #FFB3BA !important;
    color: #5C1D24 !important;
    padding: 8px 16px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.12) !important;
    transform: rotate(-1.4deg);
    display: table !important;
    margin: 12px auto 26px auto !important;
    text-align: left !important;
    max-width: 90% !important;
    box-sizing: border-box !important;
}
.entry-content .sticky-text::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 16px;
    width: 42px;
    height: 16px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
    transform: rotate(-7deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.entry-content .sticky-text.male,
.entry-content .sticky-text.blue {
    background-color: #f0f4f8 !important;
    border-color: #90caf9 !important;
    color: #1c355e !important;
    transform: rotate(1.2deg);
}
.entry-content .sticky-text.dark,
.entry-content .sticky-text.purple {
    background-color: #f6eefc !important;
    border-color: #d1b3e6 !important;
    color: #3e1b5c !important;
    transform: rotate(1.5deg);
}
.entry-content .sticky-text[data-who]::after {
    content: attr(data-who);
    position: absolute;
    top: -8px;
    right: 8px;
    font-family: sans-serif !important;
    font-size: 9.5px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    color: inherit !important;
    border: 1px solid currentColor !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transform: rotate(2deg);
}

/* 3連独立カードスタック (.ot-card-stack-box) */
.ot-card-stack-box {
    background-color: #f7f3ed !important;
    border: 1px solid #dcd1bf !important;
    border-radius: 8px !important;
    padding: 14px 16px 16px 16px !important;
    margin: 20px 0 25px 0 !important;
}
.ot-card-stack-header {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #5c5247 !important;
    margin-bottom: 10px !important;
}
.ot-stack-cards { display: flex; flex-direction: column; gap: 8px; }
.ot-stack-card-item {
    background: #ffffff;
    border: 1px solid #e2d9cd;
    border-radius: 6px;
    padding: 8px 12px !important;
    display: flex;
    gap: 10px;
    align-items: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.stack-tag {
    font-size: 9.5px;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 3px;
    color: #fff;
    flex-shrink: 0;
}
.stack-tag.blue  { background-color: #1d4ed8; }
.stack-tag.pink  { background-color: #be185d; }
.stack-tag.green { background-color: #047857; }
.stack-content strong {
    font-size: 13.5px;
    color: #2E4B72;
    line-height: 1.45;
}

/* 編集部共通インラインミニチャット (.ot-minichat) */
.ot-minichat {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px !important;
    padding: 7px 12px !important;
    margin: 6px 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    border-style: solid !important;
    border-width: 1px 1px 1px 4.5px !important;
}
.ot-minichat-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.minichat-avatar { font-size: 13px; line-height: 1; flex-shrink: 0; }
.minichat-speaker {
    font-size: 11.5px !important;
    font-weight: 900 !important;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.minichat-text {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    flex-grow: 1;
}

.ot-minichat.otocho { background-color: #fff9e6 !important; border-color: #e7c24a !important; }
.ot-minichat.otocho .minichat-speaker { color: #8c6d0d !important; }
.ot-minichat.otocho .minichat-text    { color: #4a3e1b !important; }

.ot-minichat.aoi { background-color: #eaf4fe !important; border-color: #90caf9 !important; }
.ot-minichat.aoi .minichat-speaker { color: #1976d2 !important; }
.ot-minichat.aoi .minichat-text    { color: #1c355e !important; }

.ot-minichat.akane { background-color: #fff0f2 !important; border-color: #ffb3ba !important; }
.ot-minichat.akane .minichat-speaker { color: #d81b60 !important; }
.ot-minichat.akane .minichat-text    { color: #5c1d24 !important; }

.ot-minichat.shino { background-color: #f6eefc !important; border-color: #d1b3e6 !important; }
.ot-minichat.shino .minichat-speaker { color: #7b1fa2 !important; }
.ot-minichat.shino .minichat-text    { color: #3e1b5c !important; }

.ot-minichat.sui { background-color: #e8f8f5 !important; border-color: #8ad8c6 !important; }
.ot-minichat.sui .minichat-speaker { color: #00897b !important; }
.ot-minichat.sui .minichat-text    { color: #134e48 !important; }

@media screen and (max-width: 480px) {
    .ot-minichat { padding: 6px 10px !important; gap: 6px; }
    .minichat-speaker { font-size: 11px !important; }
    .minichat-text    { font-size: 11.5px !important; line-height: 1.4 !important; }
}

/* 神シーン（BEST SHOT）切り取りカード */
.ot-best-shot-limit {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fff5f6 0%, #ffffff 100%);
    border: 1.5px dashed #ffb3ba;
    border-radius: 8px;
    padding: 18px 20px;
    margin: 20px 0 25px 0;
    box-shadow: 0 4px 12px rgba(230, 0, 51, 0.06);
}
.ot-best-shot-ribbon {
    position: absolute;
    top: 8px;
    right: -26px;
    background: #E60033;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 28px;
    transform: rotate(35deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    letter-spacing: 0.05em;
}
.ot-best-shot-title {
    font-weight: 800;
    font-size: 14.5px;
    color: #8c2a2a;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ot-best-shot-desc {
    font-size: 16px;
    font-weight: 800;
    color: #5c1d24;
    line-height: 1.6;
}
.ot-best-shot-desc .highlight {
    color: #E60033;
    border-bottom: 2px dashed #E60033;
    padding-bottom: 1px;
}

/* 中盤テキストリンク */
.ot-mid-text-link {
    text-align: center;
    margin: 25px 0;
    font-size: 14.5px;
}
.ot-mid-text-link a {
    color: #2E4B72 !important;
    text-decoration: underline !important;
    font-weight: bold;
    transition: opacity 0.2s ease;
}
.ot-mid-text-link a:hover {
    color: #E60033 !important;
    opacity: 0.85;
}

/* ===================================================
   8. 本音ツッコミコーナー (.ot-weakness-corner)
   =================================================== */

.ot-weakness-corner { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.ot-weakness-card {
    background-color: #fdfbf7;
    border: 1px solid #e2d9cd;
    border-left: 4px solid #a0978c;
    border-radius: 6px;
    padding: 12px 16px;
}
.ot-weakness-text {
    font-size: 13.5px;
    font-weight: bold;
    color: #5c5247;
    margin: 0 0 10px 0;
    padding-bottom: 9px;
    border-bottom: 1px dashed #ddd4c8;
    line-height: 1.6;
}
.ot-weakness-text::before {
    content: "POINT";
    display: inline-block;
    font-size: 9.5px;
    font-weight: 900;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
    padding: 1.5px 6px;
    border-radius: 3px;
    margin-right: 8px;
    letter-spacing: 0.05em;
    line-height: 1.25;
    vertical-align: 1.5px;
    box-shadow: 0 1px 2px rgba(180, 83, 9, 0.2);
}

/* ===================================================
   9. まとめセクション ＆ 担当推薦枠
   =================================================== */

/* レシート風ミニスペックバー (.ot-ticket-spec) */
.ot-ticket-spec {
    background-color: #fcfaf6;
    border: 1px solid #e8e1d5;
    border-left: 5px solid #2E4B72;
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
    margin: 15px 0 20px 0;
    font-size: 12px;
}
.ot-ticket-spec .ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #e2d9cd;
}
.ot-ticket-spec .ticket-name { color: #2E4B72; font-size: 12.5px; font-weight: bold; }
.ot-ticket-spec .ticket-meta { color: #666666; font-size: 11.5px; }
.ot-ticket-spec .ticket-core { font-size: 11.5px; color: #4a433d; line-height: 1.45; }
.ot-ticket-spec .ticket-core strong { color: #8c2a2a; font-weight: bold; }

/* 手帖風セルフチェックリストボックス */
.ot-summary-target-box.check-style {
    background-color: #fcfaf6 !important;
    border: 1px solid #e8e1d5 !important;
    border-left: 5px solid #b8860b !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 16px 18px !important;
    margin: 25px 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.ot-summary-target-title.check {
    color: #4a3e1b !important;
    font-size: 15px !important;
    border-bottom: 1.5px dashed #e2d9cd !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.target-title-badge {
    background: linear-gradient(135deg, #b8860b, #d4af37);
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(184, 134, 11, 0.25);
}
.ot-summary-target-list.check-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
.ot-summary-target-list.check-list li {
    position: relative;
    padding-left: 24px !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #4a433d;
}
.ot-summary-target-list.check-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 1px;
    color: #059669;
    font-weight: 900;
    font-size: 14px;
}
.target-bottom-notice {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #e2d9cd;
    font-size: 12.5px;
    color: #8c2a2a;
    text-align: right;
    font-weight: 500;
}

/* 編集部メンバー評価推薦枠 (.ot-eval-editor-scores) */
.ot-eval-editor-scores {
    background-color: #f7f1e4;
    border: 1px solid #ddc9a3;
    border-top: 3px solid #d4af37;
    border-radius: 6px;
    padding: 14px;
    margin: 25px 0;
}
.ot-eval-editor-scores-title {
    font-weight: 800;
    font-size: 14px;
    color: #765a24;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
    border-bottom: 1px dashed #d1c4b4;
    padding-bottom: 8px;
}
.ot-editor-score-card {
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid;
}
.ot-editor-score-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
.ot-editor-score-name { font-weight: bold; font-size: 13px; white-space: nowrap; }
.ot-editor-score-val {
    font-weight: 900;
    font-size: 15.5px;
    color: #E60033 !important;
    white-space: nowrap;
}
.ot-editor-score-val .unit { font-size: 11px; font-weight: bold; margin-left: 1px; }
.ot-editor-score-body { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; }
.ot-editor-score-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid transparent;
}
.ot-editor-score-comment { font-size: 12px; font-weight: 500; line-height: 1.55; margin: 0; flex: 1; }

.ot-editor-score-card.otocho { background-color: #fff9e6; border-color: #f5d76e; }
.ot-editor-score-card.otocho .ot-editor-score-name { color: #4a3e1b; }
.ot-editor-score-card.otocho .ot-editor-score-comment { color: #3d3110; }
.ot-editor-score-card.otocho .ot-editor-score-avatar { border-color: #f5d76e; }

.ot-editor-score-card.aoi { background-color: #eaf4fe; border-color: #90caf9; }
.ot-editor-score-card.aoi .ot-editor-score-name { color: #1c355e; }
.ot-editor-score-card.aoi .ot-editor-score-comment { color: #112344; }
.ot-editor-score-card.aoi .ot-editor-score-avatar { border-color: #90caf9; }

.ot-editor-score-card.akane { background-color: #fff0f2; border-color: #ffb3ba; }
.ot-editor-score-card.akane .ot-editor-score-name { color: #5c1d24; }
.ot-editor-score-card.akane .ot-editor-score-comment { color: #4a1017; }
.ot-editor-score-card.akane .ot-editor-score-avatar { border-color: #ffb3ba; }

.ot-editor-score-card.shino { background-color: #f6eefc; border-color: #d1b3e6; }
.ot-editor-score-card.shino .ot-editor-score-name { color: #3e1b5c; }
.ot-editor-score-card.shino .ot-editor-score-comment { color: #2e1145; }
.ot-editor-score-card.shino .ot-editor-score-avatar { border-color: #d1b3e6; }

.ot-editor-score-card.sui { background-color: #ebf8f5; border-color: #8ad8c6; }
.ot-editor-score-card.sui .ot-editor-score-name { color: #0e4337; }
.ot-editor-score-card.sui .ot-editor-score-comment { color: #083329; }
.ot-editor-score-card.sui .ot-editor-score-avatar { border-color: #8ad8c6; }

/* ===================================================
   10. 作品詳細スペック ＆ よくある質問（Q&A）
   =================================================== */

.ot-spec-qa-container { margin: 25px 0 20px 0; }
.ot-detail-spec-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: #ffffff;
    border: 1px solid #e2d9cd;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px !important;
    font-size: 12px;
}
.ot-detail-spec-table th,
.ot-detail-spec-table td {
    padding: 9px 12px;
    border-bottom: 1px dashed #ede5d8;
    line-height: 1.5;
}
.ot-detail-spec-table tr:last-child th,
.ot-detail-spec-table tr:last-child td { border-bottom: none; }
.ot-detail-spec-table th {
    width: 28%;
    background-color: #fbf9f5;
    color: #7a6e62;
    font-weight: bold;
    white-space: nowrap;
    text-align: left;
}
.ot-detail-spec-table td { color: #4a433d; }
.ot-spec-code {
    font-family: monospace;
    background: #f4ede2;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    color: #5c5247;
}

.ot-qa-group { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ot-qa-item { border: 1px solid #e2d9cd; border-radius: 6px; background: #ffffff; overflow: hidden; }
.ot-qa-q {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: bold;
    color: #2E4B72;
    background-color: #fcfaf6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background 0.2s ease;
    list-style: none;
}
.ot-qa-q::-webkit-details-marker { display: none; }
.ot-qa-q:hover { background-color: #f7f3ed; }
.ot-qa-q-text { display: flex; align-items: center; gap: 8px; }
.ot-qa-badge-q {
    background-color: #2E4B72;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 900;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.ot-qa-arrow { font-size: 10px; color: #8c7e70; transition: transform 0.2s ease; }
.ot-qa-item[open] .ot-qa-arrow { transform: rotate(180deg); }
.ot-qa-item[open] .ot-qa-q { border-bottom: 1px dashed #e2d9cd; }
.ot-qa-a {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #4a433d;
    background-color: #fdfbf7;
    display: flex;
    gap: 8px;
}
.ot-qa-badge-a {
    background-color: #da1b60;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 900;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}
.ot-qa-a-text { flex: 1; margin: 0 !important; }
.ot-qa-sample-box {
    margin: 10px 0 4px 0;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #dcd1bf;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    font-size: 12px;
}
.ot-qa-sample-title { font-weight: bold; color: #4a3e31; display: block; margin-bottom: 6px; }
.ot-qa-sample-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ot-qa-sample-link {
    font-weight: bold;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: opacity 0.15s ease;
}
.ot-qa-sample-link:hover { opacity: 0.8; }
.ot-qa-sample-link.is-fanza { color: #da1b60; }
.ot-qa-sample-link.is-dlsite { color: #0080ff; }

@media screen and (max-width: 600px) {
    .ot-detail-spec-table th,
    .ot-detail-spec-table td { padding: 8px 10px; font-size: 11.5px; }
    .ot-detail-spec-table th { width: 32%; }
    .ot-qa-q { padding: 9px 12px; font-size: 12.5px; }
    .ot-qa-a { padding: 11px 12px; font-size: 12px; }
    .ot-qa-sample-links { gap: 8px 12px; }
}

/* ===================================================
   11. 関連作品レコメンドモジュール (.ot-related-unit)
   =================================================== */

.ot-related-unit { margin-bottom: 12px; }
.ot-related-card {
    display: flex;
    background: #ffffff;
    border: 1px solid #e2d9cc;
    border-radius: 8px;
    padding: 12px;
    gap: 12px;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    margin-bottom: 6px;
    transition: box-shadow 0.15s ease;
}
.ot-related-card:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); }
.ot-related-thumb { width: 88px; flex-shrink: 0; }
.ot-related-thumb a { display: block; }
.ot-related-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.414;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background-color: #f8f6f2;
    display: block;
    transition: opacity 0.15s ease;
}
.ot-related-thumb a:hover img { opacity: 0.85; }

.ot-related-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ot-related-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: bold;
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.4;
}
.ot-related-tag.blue,
.ot-related-tag.is-genre { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.ot-related-tag.pink,
.ot-related-tag.is-author { background: #fdf2f8; color: #be185d; border: 1px solid #fbcfe8; }

.ot-related-name { font-size: 13.5px; font-weight: bold; line-height: 1.35; }
.ot-related-name a { color: #2E4B72; text-decoration: none; }
.ot-related-name a:hover { text-decoration: underline; }
.ot-related-meta { font-size: 11px; color: #7a6e62; }
.ot-related-desc { margin: 2px 0 6px 0 !important; font-size: 11.5px; line-height: 1.5; color: #444444; }

.ot-related-btn-group { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.ot-related-btn-row { display: flex; gap: 5px; }
.ot-related-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 6px 4px;
    font-size: 11.5px;
    font-weight: bold;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: opacity 0.15s ease;
    box-sizing: border-box;
    white-space: nowrap !important;
}
.ot-related-btn:hover { opacity: 0.9; }
.ot-related-btn.is-review { background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%); }
.ot-related-btn.is-fanza  { background: linear-gradient(180deg, #da1b60 0%, #b0124b 100%); }
.ot-related-btn.is-dlsite { background: linear-gradient(180deg, #0080ff 0%, #0059b3 100%); }
.ot-related-btn-row .ot-related-btn { flex: 1; padding: 6px 2px; font-size: 11px; }

.ot-related-unit .ot-minichat { margin: 0 !important; padding: 6px 12px; font-size: 11.5px; }
.ot-related-footer-link { font-size: 12.5px; margin: 8px 0 24px 0 !important; }
.ot-related-footer-link a { color: #2E4B72; text-decoration: underline; }
.ot-related-footer-link a:hover { color: #da1b60; }

/* 直接のシリーズ作ハイライト (.is-direct-series) */
.ot-related-unit.is-direct-series .ot-related-card {
    border-color: var(--series-border, #d1d5db);
    background-color: var(--series-bg, #ffffff);
    box-shadow: 0 2px 6px var(--series-shadow, rgba(0, 0, 0, 0.04));
}
.ot-related-unit.is-direct-series .ot-related-tag {
    background-color: var(--series-tag-bg, #f3f4f6);
    border-color: var(--series-tag-border, #e5e7eb);
    color: var(--series-tag-text, #374151);
    font-weight: 700;
}
.ot-related-unit.is-direct-series.is-shino {
    --series-border: #d8b4fe; --series-bg: #fdfcff; --series-shadow: rgba(147, 51, 234, 0.06);
    --series-tag-bg: #f3e8ff; --series-tag-border: #d8b4fe; --series-tag-text: #6b21a8;
}
.ot-related-unit.is-direct-series.is-akane {
    --series-border: #fca5a5; --series-bg: #fffbfc; --series-shadow: rgba(239, 68, 68, 0.06);
    --series-tag-bg: #ffe4e6; --series-tag-border: #fecdd3; --series-tag-text: #be123c;
}
.ot-related-unit.is-direct-series.is-aoi {
    --series-border: #93c5fd; --series-bg: #fbfdff; --series-shadow: rgba(59, 130, 246, 0.06);
    --series-tag-bg: #e0f2fe; --series-tag-border: #bae6fd; --series-tag-text: #0369a1;
}
.ot-related-unit.is-direct-series.is-otocho {
    --series-border: #fcd34d; --series-bg: #fffdfa; --series-shadow: rgba(245, 158, 11, 0.06);
    --series-tag-bg: #fef3c7; --series-tag-border: #fde68a; --series-tag-text: #b45309;
}
.ot-related-unit.is-direct-series.is-midori {
    --series-border: #86efac; --series-bg: #fbfdfb; --series-shadow: rgba(34, 197, 94, 0.06);
    --series-tag-bg: #dcfce7; --series-tag-border: #bbf7d0; --series-tag-text: #15803d;
}

/* ===================================================
   12. 【袋とじ付録】ネタバレアコーディオン (.ot-fukurotoji)
   =================================================== */

.ot-fukurotoji {
    margin: 35px 0 25px 0;
    border: 2px dashed #c59b27;
    border-radius: 8px;
    background-color: #fffdf7;
    overflow: hidden;
}
.ot-fukurotoji summary {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    padding: 14px 18px;
    font-size: 15px;
    font-weight: bold;
    color: #664d03;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #c59b27;
    user-select: none;
    transition: background 0.2s ease;
}
.ot-fukurotoji summary::-webkit-details-marker { display: none; }
.ot-fukurotoji summary:hover { background: linear-gradient(135deg, #ffeaa7 0%, #fed330 100%); }
.ot-fukurotoji summary .open-guide {
    font-size: 11.5px;
    background-color: #b8860b;
    color: #ffffff;
    padding: 3px 9px;
    border-radius: 4px;
    font-weight: normal;
}
.ot-fukurotoji[open] summary .open-guide { background-color: #664d03; }
.ot-fukurotoji-content {
    padding: 20px 18px;
    font-size: 13.5px;
    line-height: 1.75;
    color: #3e3630;
    background-color: #fffdf9;
}
.ot-fukurotoji-warning {
    display: inline-block;
    font-size: 11.5px;
    font-weight: bold;
    color: #b91c1c;
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 18px;
}
.ot-fk-sec { margin-bottom: 22px; }
.ot-fk-title {
    font-size: 14.5px !important;
    font-weight: bold;
    color: #2E4B72 !important;
    border-bottom: 1.5px dashed #89c3eb;
    padding-bottom: 4px;
    margin: 0 0 10px 0 !important;
}
.ot-fk-sec p { margin: 0 0 10px 0 !important; font-size: 13px; line-height: 1.7; }
.ot-fk-sec p:last-child { margin-bottom: 0 !important; }
.ot-fk-list { margin: 0 !important; padding-left: 18px !important; font-size: 13px; line-height: 1.7; }
.ot-fk-list li { margin-bottom: 6px; }

/* 翠の読書手帖 (.ot-fk-review-box) */
.ot-fk-review-box {
    background-color: #f7fcfa;
    border: 1px solid #ccece4;
    border-left: 4.5px solid #8ad8c6;
    border-radius: 6px;
    padding: 14px 15px;
    margin: 18px 0;
}
.ot-fk-review-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0e4337;
    font-size: 13.5px;
    font-weight: bold;
    border-bottom: 1px dashed #bfe5dc;
    padding-bottom: 6px;
    margin-bottom: 10px;
    line-height: 1.4;
}
.ot-fk-review-title span { font-size: 15px; flex-shrink: 0; }
.ot-fk-review-box p { margin: 0 0 8px 0 !important; font-size: 13px; line-height: 1.7; color: #4a433d; }
.ot-fk-review-box p:last-child { margin-bottom: 0 !important; }

/* 袋とじ専用マイクロCTA */
.ot-fukurotoji-cta {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed #dcd1bf;
    text-align: center;
}
.ot-fukurotoji-cta-lead { margin: 0 0 14px 0 !important; font-size: 13px; font-weight: bold; color: #664d03; }

/* 次回作ナビゲーションバー */
.ot-next-story-banner {
    background: #fdfaf6;
    border: 1px solid #d1b3e6;
    border-left: 4px solid #8b5cf6;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 16px 0 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.next-story-badge {
    background: #8b5cf6;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}
.next-story-info { flex-grow: 1; }
.next-story-sub { display: block; font-size: 11px; color: #6b5c4c; }
.next-story-title { display: block; font-size: 13px; color: #2b1f14; line-height: 1.4; }
.next-story-btn {
    background: #8b5cf6;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.next-story-btn:hover { opacity: 0.85; }

/* ===================================================
   13. 拡張モジュール（タイムライン・メディアミックス・総集編）
   =================================================== */
/* ===================================================
   ⏱️ シコみタイムライン (.ot-timeline-box)
   =================================================== */
.ot-timeline-box {
    background: #ffffff;
    border: 1px solid #e2d9cd;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 18px 0 24px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.ot-timeline-box .ot-timeline-title {
    font-size: 13.5px;
    font-weight: bold;
    color: #4a3e31;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px dashed #e8e2d8;
    padding-bottom: 8px;
}

.ot-timeline-box .ot-timeline-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    position: static !important;
    padding-left: 0 !important;
}

.ot-timeline-box .ot-timeline-item {
    border-left: 3.5px solid #7a6e62;
    padding-left: 10px;
    background: #faf8f5;
    border-radius: 0 4px 4px 0;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 8px;
}

/* ステージ別カラー（青・ピンク・緑・アンバー） */
.ot-timeline-box .ot-timeline-item.is-blue {
    border-left-color: #1d4ed8;
    background: #f4f8ff;
}
.ot-timeline-box .ot-timeline-item.is-blue .ot-timeline-stage {
    color: #1d4ed8;
}

.ot-timeline-box .ot-timeline-item.is-pink {
    border-left-color: #be185d;
    background: #fff5f8;
}
.ot-timeline-box .ot-timeline-item.is-pink .ot-timeline-stage {
    color: #be185d;
}

.ot-timeline-box .ot-timeline-item.is-green {
    border-left-color: #047857;
    background: #f2faf6;
}
.ot-timeline-box .ot-timeline-item.is-green .ot-timeline-stage {
    color: #047857;
}

.ot-timeline-box .ot-timeline-item.is-amber {
    border-left-color: #d97706;
    background: #fffbf2;
}
.ot-timeline-box .ot-timeline-item.is-amber .ot-timeline-stage {
    color: #d97706;
}

.ot-timeline-box .ot-timeline-stage {
    font-size: 12.5px;
    font-weight: bold;
    color: #4a3e31;
    line-height: 1.4;
}

.ot-timeline-box .ot-timeline-desc {
    font-size: 11.5px;
    color: #555555;
    margin: 3px 0 0 0 !important;
    line-height: 1.55;
}

/* シリーズ時系列タイムライン (.ot-series-timeline-box) */
.ot-series-timeline-box {
    background-color: #ffffff;
    border: 1px solid #e8e2d8;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 20px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.ot-timeline-header {
    font-size: 13.5px;
    font-weight: 700;
    color: #4a3e2f;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px dashed #e8e2d8;
    padding-bottom: 8px;
}
.ot-timeline-list { position: relative; padding-left: 4px; }
.ot-timeline-node { position: relative; padding-left: 28px; padding-bottom: 12px; }
.ot-timeline-node:last-child { padding-bottom: 0; }
.ot-timeline-node::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 22px;
    bottom: -2px;
    width: 2px;
    background-color: #ede6dc;
}
.ot-timeline-node:last-child::before { display: none; }
.node-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #f0eae1;
    color: #5c4b37;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.ot-timeline-node.is-current {
    background: #faf5ff;
    border-radius: 6px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 8px;
    margin-left: -6px;
    padding-left: 34px;
}
.ot-timeline-node.is-current .node-marker {
    left: 6px;
    top: 4px;
    background-color: #8b5cf6;
    color: #ffffff;
}
.node-main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.node-title { font-size: 13px; font-weight: 700; color: #2b1f14; line-height: 1.4; }
.node-current-tag { font-size: 10.5px; font-weight: 700; color: #6d28d9; background: #ede9fe; padding: 1px 6px; border-radius: 3px; }
.node-btns { display: flex; gap: 4px; }
.t-btn {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    text-decoration: none !important;
    line-height: 1.4;
    display: inline-block;
}
.t-btn.rev { background: #fff0f2; color: #be185d !important; border: 1px solid #fbcfe8; }
.t-btn.fz, .t-btn.dl { background: #f9fafb; color: #4b5563 !important; border: 1px solid #d1d5db; }
.node-desc { font-size: 11.5px; color: #6b5c4c; margin: 3px 0 0 0; line-height: 1.4; }
.ot-timeline-footer { font-size: 11px; color: #7a6e62; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e8e2d8; line-height: 1.4; }

/* 圧縮型アコーディオンタイムライン */
.ot-timeline-ellipsis { text-align: center; padding: 6px 0 10px 0; color: #8c7e70; font-size: 12px; font-weight: bold; letter-spacing: 2px; }
.ot-series-accordion { margin-top: 14px; border-top: 1px dashed #e8e2d8; padding-top: 10px; }
.ot-series-accordion-summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: bold;
    color: #2E4B72;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    outline: none;
    list-style: none;
    transition: color 0.2s ease;
}
.ot-series-accordion-summary::-webkit-details-marker { display: none; }
.ot-series-accordion-summary:hover { color: #E60033; }
.ot-series-accordion-summary .open-sub { font-size: 11px; color: #8c7e70; font-weight: normal; }
.ot-series-accordion-content { padding: 10px 4px 4px 4px; }
.ot-series-mini-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 12px;
    font-size: 12px;
}
@media (min-width: 600px) {
    .ot-series-mini-list { grid-template-columns: repeat(2, 1fr); }
}
.ot-series-mini-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.ot-series-mini-list .mini-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f1ede4;
    color: #5c4b37;
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;
}
.ot-series-mini-list li a { color: #4a3e2f; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.ot-series-mini-list li a:hover { color: #E60033; text-decoration: underline; }
.ot-series-mini-list li.is-current { color: #E60033; font-weight: bold; }
.ot-series-mini-list li.is-current .mini-num { background: #E60033; color: #ffffff; }

/* メディアミックス展開まとめモジュール */
.ot-mediamix-box {
    background-color: #ffffff;
    border: 1.5px solid #dcd1bf;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 15px 0 10px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.ot-mediamix-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    border-bottom: 1px dashed #e8e1d5;
    padding-bottom: 8px;
}
.mediamix-badge { background: #2E4B72; color: #ffffff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 3px; }
.mediamix-title { font-size: 12.5px; font-weight: bold; color: #4a3e1b; }
.ot-mediamix-list { display: flex; flex-direction: column; gap: 10px; }
.ot-mediamix-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fdfbf7;
    border: 1px solid #ede5d8;
    border-radius: 6px;
    padding: 10px 12px;
    gap: 12px;
}
.mediamix-item-label {
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.mediamix-item-label.anime { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.mediamix-item-label.voice { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.mediamix-item-label.live  { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.mediamix-item-info { flex: 1; min-width: 0; }
.mediamix-item-info strong { display: block; font-size: 12.5px; color: #2E4B72; line-height: 1.35; margin-bottom: 2px; }
.mediamix-item-info p { font-size: 11px; color: #666666; margin: 0 !important; line-height: 1.4; }
.mediamix-item-btns { display: flex; gap: 6px; flex-shrink: 0; }
.mediamix-btn {
    font-size: 11px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none !important;
    color: #ffffff !important;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.mediamix-btn.fz { background: #E60033; }
.mediamix-btn.dl { background: #004BB1; }
.mediamix-btn:hover { opacity: 0.85; }

@media screen and (max-width: 600px) {
    .ot-mediamix-item { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mediamix-item-btns { width: 100%; }
    .mediamix-btn { flex: 1; text-align: center; padding: 7px 0; }
}

/* 総集編案内バナー */
.ot-timeline-omnibus-banner {
    background: #fff8f5;
    border: 1.5px dashed #f59e0b;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 14px 0 8px 0;
}
.ot-timeline-omnibus-banner .omnibus-title { font-weight: bold; color: #78350f; font-size: 13px; margin-bottom: 8px; }
.ot-timeline-omnibus-banner .omnibus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
}
.ot-timeline-omnibus-banner .omnibus-item:not(:last-child) { border-bottom: 1px dashed #fed7aa; }
.ot-timeline-omnibus-banner .omnibus-info { font-size: 12px; color: #4a3e2f; }
.ot-timeline-omnibus-banner .omnibus-name { font-weight: bold; }
.ot-timeline-omnibus-banner .omnibus-item.is-commercial .omnibus-name { color: #b45309; }
.ot-timeline-omnibus-banner .omnibus-item.is-doujin .omnibus-name { color: #5c4b37; }
.ot-timeline-omnibus-banner .omnibus-note { font-size: 11px; color: #8c7e70; display: inline-block; margin-left: 2px; }
.ot-timeline-omnibus-banner .omnibus-btns { display: flex; gap: 5px; }
.ot-timeline-omnibus-banner .omnibus-btns .t-btn {
    color: #ffffff !important;
    font-weight: bold;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.2s ease;
}
.ot-timeline-omnibus-banner .omnibus-btns .t-btn:hover { opacity: 0.85; }
.ot-timeline-omnibus-banner .omnibus-btns .t-btn.fz { background: #e11d48; }
.ot-timeline-omnibus-banner .omnibus-btns .t-btn.dl { background: #0284c7; }

/* 編集部ピックアップ（ちなみにカード） */
.ot-pickup-box {
    background: #faf8f5;
    border: 1px solid #e2d9cd;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 20px 0 24px 0;
}
.ot-pickup-box .ot-pickup-title {
    font-size: 15px !important;
    font-weight: bold;
    color: #7a6e62;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ot-pickup-list { display: flex; flex-direction: column; gap: 8px; }
.ot-pickup-item {
    background: #ffffff;
    border: 1px solid #e2d9cd;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.45;
}
.ot-pickup-item.is-akane  { border-color: #fbcfe8; }
.ot-pickup-item.is-akane .ot-pickup-speaker { color: #be185d; }
.ot-pickup-item.is-shino  { border-color: #d1b3e6; }
.ot-pickup-item.is-shino .ot-pickup-speaker { color: #6b21a8; }
.ot-pickup-item.is-aoi    { border-color: #c7d2fe; }
.ot-pickup-item.is-aoi .ot-pickup-speaker { color: #1d4ed8; }
.ot-pickup-item.is-otocho { border-color: #fde68a; }
.ot-pickup-item.is-otocho .ot-pickup-speaker { color: #b45309; }
.ot-pickup-speaker { font-weight: bold; }

/* ===================================================
   14. トップページ・アーカイブ用カード＆コンポーネント
   =================================================== */

/* 担当編集部員直行カタログ (.ot-curator-panel-grid) */
.ot-curator-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (min-width: 600px) {
    .ot-curator-panel-grid { grid-template-columns: repeat(2, 1fr); }
}
.curator-panel-card {
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1.5px solid;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.curator-panel-card:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08); }
.curator-panel-header { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.curator-panel-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    object-fit: cover;
}
.curator-panel-info { display: flex; flex-direction: column; }
.curator-panel-badge {
    color: #fff;
    font-size: 10.5px;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 3px;
    align-self: flex-start;
}
.curator-panel-title { font-size: 15px; font-weight: 800; margin-top: 3px; }
.curator-panel-sub { font-size: 11px; line-height: 1.35; margin-top: 1px; }
.curator-panel-quote {
    font-size: 12px;
    color: #333;
    line-height: 1.55;
    margin: 0 0 12px 0 !important;
    background: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px dashed;
}
.curator-panel-action {
    display: block;
    color: #fff !important;
    text-align: center;
    font-size: 12.5px;
    font-weight: bold;
    padding: 8px 0;
    border-radius: 4px;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
    margin-top: auto;
}
.curator-panel-action:hover { opacity: 0.9; }

.curator-panel-card.aoi { background: #f4f9ff; border-color: #90caf9; }
.curator-panel-card.aoi .curator-panel-badge,
.curator-panel-card.aoi .curator-panel-action { background: #1c355e; }
.curator-panel-card.aoi .curator-panel-title { color: #1c355e; }
.curator-panel-card.aoi .curator-panel-sub { color: #4b6584; }
.curator-panel-card.aoi .curator-panel-quote { border-color: #bbdefb; }

.curator-panel-card.akane { background: #fff5f6; border-color: #ffb3ba; }
.curator-panel-card.akane .curator-panel-badge,
.curator-panel-card.akane .curator-panel-action { background: #5c1d24; }
.curator-panel-card.akane .curator-panel-title { color: #5c1d24; }
.curator-panel-card.akane .curator-panel-sub { color: #8b3a42; }
.curator-panel-card.akane .curator-panel-quote { border-color: #ffcdd2; }

.curator-panel-card.shino { background: #fbf7fe; border-color: #d1b3e6; }
.curator-panel-card.shino .curator-panel-badge,
.curator-panel-card.shino .curator-panel-action { background: #3e1b5c; }
.curator-panel-card.shino .curator-panel-title { color: #3e1b5c; }
.curator-panel-card.shino .curator-panel-sub { color: #6a3d82; }
.curator-panel-card.shino .curator-panel-quote { border-color: #e1bee7; }

.curator-panel-card.sui { background: #f4faf6; border-color: #a3d9c9; }
.curator-panel-card.sui .curator-panel-badge,
.curator-panel-card.sui .curator-panel-action { background: #1b4d3e; }
.curator-panel-card.sui .curator-panel-title { color: #1b4d3e; }
.curator-panel-card.sui .curator-panel-sub { color: #38765f; }
.curator-panel-card.sui .curator-panel-quote { border-color: #c8e6c9; }

/* おとちょ横長ワイドカード (.curator-wide-card.otocho) */
.curator-wide-card.otocho {
    background: #fffdf5;
    border: 1.5px solid #e7c24a;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 35px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.curator-wide-card.otocho:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08); }
.curator-wide-header { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 680px) {
    .curator-wide-header { flex-direction: row; align-items: center; justify-content: space-between; }
}
.curator-wide-main { display: flex; gap: 12px; align-items: center; }
.curator-wide-info { display: flex; flex-direction: column; }
.curator-wide-card.otocho .curator-panel-badge { background: #8c6d1f; }
.curator-wide-title { font-size: 15.5px; font-weight: 800; color: #4a3e1b; margin-top: 3px; }
.curator-wide-sub { font-size: 11px; color: #7d662c; margin-top: 1px; }

.curator-wide-buttons { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
.curator-wide-btn {
    font-size: 12px;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 4px;
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}
.curator-wide-btn:hover { opacity: 0.9; }
.curator-wide-btn.gold { background: #b8860b; color: #ffffff !important; }
.curator-wide-btn.femdom { background: linear-gradient(135deg, #9b1b48 0%, #731234 100%); color: #ffffff !important; }
.curator-wide-btn.outline { background: #ffffff; border: 1px solid #b8860b; color: #8c6d1f !important; }

@media (max-width: 600px) {
    .curator-wide-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
    .curator-wide-btn { font-size: 11px; padding: 8px 2px; white-space: normal; display: flex; align-items: center; justify-content: center; line-height: 1.2; }
    .curator-wide-btn.outline { grid-column: span 2; padding: 7px 10px; }
}

.curator-wide-quote {
    font-size: 12px;
    color: #333;
    line-height: 1.55;
    margin: 10px 0 0 0 !important;
    background: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px dashed #e7c24a;
}

/* ポラロイド展示型 新着カード (.ot-scrap-grid / 決定版) */
.ot-scrap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 25px 0 35px 0;
}
@media (min-width: 600px) {
    .ot-scrap-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 960px) {
    .ot-scrap-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.ot-scrap-card {
    background-color: #ffffff;
    border: 1.5px solid #dcd1bf;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    box-sizing: border-box;
}
.ot-scrap-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }

.ot-scrap-thumb-contain {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: radial-gradient(circle, #fcfaf6 20%, #ede3d3 100%);
    border-bottom: 1px dashed #dcd1bf;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    box-sizing: border-box;
}
.ot-contain-link { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ot-contain-img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    display: block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ot-scrap-card:hover .ot-contain-img { transform: scale(1.03); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22); }

.ot-scrap-badge-format {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10px;
    font-weight: 800;
    padding: 2.5px 7px;
    border-radius: 4px;
    line-height: 1.2;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    color: #ffffff !important;
}
.ot-scrap-badge-format.detail    { background: #b45309 !important; }
.ot-scrap-badge-format.standard  { background: #0284c7 !important; }
.ot-scrap-badge-format.quick     { background: #059669 !important; }

.ot-scrap-badge-score {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(46, 75, 114, 0.92);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 900;
    padding: 2.5px 7px;
    border-radius: 4px;
    line-height: 1.2;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 2px;
}
.ot-scrap-badge-score.star-high { background: linear-gradient(135deg, #b8860b, #d4af37); }
.ot-scrap-badge-score .star-icon { color: #f59e0b; font-size: 10px; }
.ot-scrap-badge-score.star-high .star-icon { color: #ffffff; }

.ot-scrap-body {
    padding: 12px 14px 12px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.ot-scrap-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    padding-bottom: 3px;
    border-bottom: 1px dashed #ede5d8;
}
.ot-scrap-date-text {
    font-size: 11px;
    font-weight: 700;
    color: #8c7e70;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ot-scrap-date-badge.new {
    font-size: 9.5px;
    font-weight: 900;
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.1);
}
.ot-scrap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
}
.ot-scrap-tag {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 10px !important;
    font-weight: bold;
    color: #6b5e52;
    background: #f4ede2;
    border: 1px solid #dcd1bf;
    padding: 1.5px 5px !important;
    border-radius: 3px;
    line-height: 1.1 !important;
}

.entry-content .ot-scrap-card h3.ot-scrap-title,
.ot-scrap-card h3.ot-scrap-title,
h3.ot-scrap-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    line-height: 1.48 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    flex-grow: 1;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 6 !important;
    overflow: hidden !important;
}
.ot-scrap-title a { color: #2E4B72 !important; text-decoration: none !important; transition: color 0.2s ease; }
.ot-scrap-title a:hover { color: #E60033 !important; }

.ot-scrap-curator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 5px;
    margin-bottom: 8px;
    border: 1px solid;
}
.ot-scrap-curator-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 1px solid #fff; }
.ot-scrap-curator-text { font-size: 10.5px; line-height: 1.3; font-weight: 600; margin: 0 !important; }

.ot-scrap-curator.otocho { background: #fff9e6; border-color: #f5d76e; color: #4a3e1b; }
.ot-scrap-curator.aoi    { background: #eaf4fe; border-color: #90caf9; color: #1c355e; }
.ot-scrap-curator.akane  { background: #fff0f2; border-color: #ffb3ba; color: #5c1d24; }
.ot-scrap-curator.shino  { background: #f6eefc; border-color: #d1b3e6; color: #3e1b5c; }
.ot-scrap-curator.sui    { background: #ebf8f5; border-color: #8ad8c6; color: #0e4337; }

.ot-scrap-action-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #fdfbf7;
    border: 1px solid #dcd1bf;
    color: #4a433d !important;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 0;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.ot-scrap-action-btn:hover { background: #2E4B72; border-color: #2E4B72; color: #ffffff !important; }

@media screen and (max-width: 768px) {
    .ot-scrap-grid { gap: 14px !important; margin: 15px 0 25px 0 !important; }
    .ot-scrap-thumb-contain { aspect-ratio: 16 / 11 !important; padding: 6px 8px !important; }
    .ot-scrap-body { padding: 8px 10px 8px 10px !important; }
    .entry-content .ot-scrap-card h3.ot-scrap-title,
    .ot-scrap-card h3.ot-scrap-title,
    h3.ot-scrap-title {
        font-size: 14.5px !important;
        line-height: 1.4 !important;
        margin-bottom: 5px !important;
        -webkit-line-clamp: 4 !important;
    }
}

/* 今週のイチオシ プレミアム手帖カード (.ot-pickup-card.premium-gold) */
.ot-pickup-section-wrap { margin: 30px 0 40px 0; }
.ot-pickup-card.premium-gold {
    background: #ffffff;
    border: 2px solid #e5c07b;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ot-pickup-card.premium-gold:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2); }
.ot-pickup-ribbon {
    position: absolute;
    top: 12px;
    right: -32px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #d4af37 0%, #aa7c11 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 35px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 5;
    letter-spacing: 0.05em;
}
.ot-pickup-grid { display: flex; flex-direction: row; }
.ot-pickup-thumb {
    position: relative;
    width: 220px;
    min-width: 220px;
    background: radial-gradient(circle, #fcfaf6 20%, #ede3d3 100%);
    border-right: 1px dashed #dcd1bf;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}
.ot-pickup-thumb-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ot-pickup-img {
    max-width: 100%;
    max-height: 230px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
}
.ot-pickup-card:hover .ot-pickup-img { transform: scale(1.02); }
.ot-pickup-body { padding: 16px 20px; display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ot-pickup-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ot-pickup-score-pill.gold {
    background: linear-gradient(135deg, #b8860b, #d4af37);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    padding: 2.5px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 3px rgba(184, 134, 11, 0.3);
}
.ot-pickup-score-pill .star-icon { color: #fff; font-size: 10px; }
.ot-pickup-score-pill .score-label {
    background: rgba(255,255,255,0.25);
    font-size: 9.5px;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 2px;
}
.entry-content .ot-pickup-card h3.ot-pickup-title,
h3.ot-pickup-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.ot-pickup-title a { color: #2E4B72 !important; text-decoration: none !important; }
.ot-pickup-title a:hover { color: #E60033 !important; }
.ot-pickup-summary { font-size: 12.5px; line-height: 1.5; color: #5c5248; margin: 0 0 10px 0; }
.ot-pickup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #ede5d8;
    gap: 10px;
}
.ot-pickup-features { display: flex; gap: 10px; font-size: 11px; color: #7a6e62; font-weight: bold; }
.ot-pickup-btn {
    background: linear-gradient(135deg, #2E4B72 0%, #1c3352 100%);
    border: 1px solid #1c3352;
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 18px;
    border-radius: 5px;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(46, 75, 114, 0.25);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.ot-pickup-btn:hover {
    background: #E60033;
    border-color: #E60033;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(230, 0, 51, 0.3);
}

@media screen and (max-width: 650px) {
    .ot-pickup-grid { flex-direction: column; }
    .ot-pickup-thumb {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px dashed #dcd1bf;
        padding: 10px;
        aspect-ratio: 16 / 10;
    }
    .ot-pickup-img { max-height: 160px; }
    .ot-pickup-body { padding: 12px 14px; }
    .entry-content .ot-pickup-card h3.ot-pickup-title,
    h3.ot-pickup-title { font-size: 14.5px !important; margin-bottom: 6px !important; }
    .ot-pickup-summary {
        font-size: 11.5px;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .ot-pickup-footer { flex-direction: column; align-items: stretch; gap: 8px; }
    .ot-pickup-features { justify-content: center; }
    .ot-pickup-btn { text-align: center; width: 100%; padding: 8px 0; }
}

/* 一覧誘導ボタン */
.ot-top-list-footer { text-align: center; margin: 25px 0 40px 0; }
.ot-more-link-btn {
    display: inline-block;
    background-color: #2E4B72;
    color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 800;
    padding: 10px 28px;
    border-radius: 30px;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(46, 75, 114, 0.2);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.ot-more-link-btn:hover {
    background-color: #1c355e;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(46, 75, 114, 0.3);
}

/* 手帖風ヒーローウェルカムエリア */
.ot-top-hero {
    background: linear-gradient(135deg, #fdfbf7 0%, #f7f1e4 100%);
    border: 1px solid #dcd1bf;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 35px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.ot-top-hero-badge { font-size: 11px; font-weight: 800; color: #8c7e70; letter-spacing: 0.12em; margin-bottom: 8px; }
.ot-top-hero-title {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #2E4B72 !important;
    margin: 0 0 12px 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.ot-top-hero-lead { font-size: 14px; color: #4a433d; line-height: 1.7; margin-bottom: 18px !important; }
.ot-top-hero-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.ot-top-hero-tags .hero-tag {
    background-color: #ffffff;
    border: 1px solid #dcd1bf;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    color: #5c5247;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* 手帖風検印スタンプ型 編集方針＆キャラ紹介アコーディオン */
.ot-notebook-accordion {
    margin: 18px 0 24px 0;
    border: 1px dashed #dcd1bf;
    border-radius: 8px;
    background-color: #fdfbf7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ot-notebook-accordion:hover { border-color: #c4b59f; }
.ot-notebook-accordion[open] { border-style: solid; border-color: #d1c4b0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); }
.ot-notebook-summary {
    padding: 10px 14px;
    background-color: #ffffff;
    cursor: pointer;
    list-style: none;
    outline: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ot-notebook-summary::-webkit-details-marker { display: none; }
.ot-notebook-summary-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ot-notebook-summary-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.ot-notebook-summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ot-notebook-summary-title { font-size: 13px; font-weight: 800; color: #4a3e31; letter-spacing: 0.02em; }
.ot-notebook-summary-sub { font-size: 11px; color: #7a6e62; line-height: 1.4; }
.ot-notebook-summary-guide { font-size: 10.5px; font-weight: bold; color: #2E4B72; display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; }
.ot-notebook-accordion[open] .ot-notebook-summary-guide .guide-arrow { transform: rotate(180deg); }
.ot-notebook-summary-guide .guide-arrow { display: inline-block; transition: transform 0.2s ease; font-size: 9px; }
.ot-stamp-badge {
    border: 1.5px solid #be185d;
    color: #be185d;
    background: #fffbfa;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    transform: rotate(-3deg);
    box-shadow: 0 1px 3px rgba(190, 24, 93, 0.15);
    user-select: none;
}
.ot-notebook-content { padding: 16px 14px; border-top: 1px dashed #dcd1bf; background-color: #fdfbf7; }
.ot-notebook-policy-card { background: #ffffff; border: 1px solid #e8e1d5; border-radius: 6px; padding: 10px 12px; margin-bottom: 16px; }
.ot-notebook-policy-title { font-size: 12.5px; font-weight: bold; color: #4a3e1b; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.ot-notebook-policy-list { margin: 0 !important; padding-left: 18px !important; font-size: 11.5px; color: #555555; line-height: 1.55; }
.ot-notebook-policy-list li { margin-bottom: 4px; }
.ot-notebook-policy-list li:last-child { margin-bottom: 0; }
.ot-notebook-char-title { font-size: 13px; font-weight: bold; color: #4a3e31; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.char-box { display: flex; align-items: flex-start; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #eae5db; }
.char-box:last-of-type { margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid #eae5db; }
.char-avatar { width: 65px !important; height: 65px !important; border-radius: 6px !important; border: 2px solid #ffffff !important; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.12) !important; margin-right: 12px; flex-shrink: 0; object-fit: cover; }
.char-name { font-weight: bold; font-size: 14px; color: #2E4B72; }
.char-desc { margin: 3px 0 0 0 !important; font-size: 12px !important; color: #4a433d; line-height: 1.5 !important; }
.char-quote { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 4px; font-size: 11px !important; line-height: 1.4 !important; font-weight: bold; }
.quote-speaker { font-size: 10px; padding: 1px 4px; border-radius: 3px; margin-right: 5px; color: #fff; }
.assistant-voice { background-color: #EAF4FE; color: #1C355E; }
.assistant-voice .quote-speaker { background-color: #90CAF9; }
.otocho-voice { background-color: #FFF9E6; color: #4A3E1B; }
.otocho-voice .quote-speaker { background-color: #F5D76E; color: #4A3E1B; }
.akane-voice { background-color: #FFF0F2; color: #5C1D24; }
.akane-voice .quote-speaker { background-color: #FFB3BA; color: #5C1D24; }
.owner-voice { background-color: #F6EEFC; color: #3E1B5C; }
.owner-voice .quote-speaker { background-color: #D1B3E6; color: #3E1B5C; }
.sui-voice { background-color: #EBF8F5; color: #0E4337; }
.sui-voice .quote-speaker { background-color: #8AD8C6; color: #0E4337; }
.accordion-footer { text-align: center; margin-top: 12px; }
.accordion-profile-btn {
    display: inline-block;
    background-color: #2E4B72;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: bold;
    text-decoration: none !important;
    padding: 8px 18px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(46, 75, 114, 0.2);
    transition: all 0.2s ease;
}
.accordion-profile-btn:hover { background-color: #1C355E; transform: scale(1.02); }

@media screen and (max-width: 480px) {
    .ot-notebook-summary { padding: 8px 10px; gap: 8px; }
    .ot-notebook-summary-title { font-size: 12px; }
    .ot-notebook-summary-sub { font-size: 10px; }
    .ot-stamp-badge { padding: 2px 5px; font-size: 9px; }
}

/************************************
** レスポンシブ用予備メディアクエリ
************************************/
@media screen and (max-width: 1023px){ }
@media screen and (max-width: 834px){ }
@media screen and (max-width: 480px){ }