@charset "UTF-8";
/*
Theme Name: Cocoon Child (Onasapo Space)
Description: オナサポ空間 専用カスタマイズスキン
Template:    cocoon-master
Version:     1.0.0
*/

/* =========================================================
 * 0. CSS変数（カラー・サイズ定義）
 * ========================================================= */

:root {
    /* メインカラー（ダーク基調 + ピンクアクセント） */
    --onasapo-bg-base:        #121212;
    --onasapo-bg-surface:     #1E1E1E;
    --onasapo-bg-elevated:    #2A2A2A;
    --onasapo-bg-hover:       #333333;
    --onasapo-border:         #3A3A3A;
    --onasapo-border-light:   #4A4A4A;

    --onasapo-text-primary:   #FFFFFF;
    --onasapo-text-secondary: #CCCCCC;
    --onasapo-text-muted:     #999999;
    --onasapo-text-disabled:  #666666;

    --onasapo-accent:         #E91E63;
    --onasapo-accent-hover:   #FF4081;
    --onasapo-accent-dark:    #AD1457;

    --onasapo-star:           #FFC107;
    --onasapo-success:        #66BB6A;
    --onasapo-warning:        #FFA726;
    --onasapo-danger:         #EF5350;

    /* ランクカラー */
    --rank-S: #FFD700;
    --rank-A: #E91E63;
    --rank-B: #2196F3;
    --rank-C: #66BB6A;
    --rank-D: #9E9E9E;

    /* レイアウト */
    --onasapo-radius:         6px;
    --onasapo-radius-lg:      10px;
    --onasapo-shadow:         0 2px 8px rgba(0, 0, 0, 0.4);
    --onasapo-shadow-hover:   0 4px 16px rgba(233, 30, 99, 0.25);

    /* フォント */
    --onasapo-font-base:      "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/* =========================================================
 * 1. グローバル：ベース上書き
 * ========================================================= */

body {
    background: var(--onasapo-bg-base);
    color: var(--onasapo-text-primary);
    font-family: var(--onasapo-font-base);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

#container,
#main,
.main,
#sidebar,
.sidebar {
    background: transparent;
    color: var(--onasapo-text-primary);
}

a { color: var(--onasapo-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--onasapo-accent-hover); text-decoration: underline; }

p, li { color: var(--onasapo-text-secondary); }
strong, b { color: var(--onasapo-text-primary); }

/* テーブル基本 */
table { border-collapse: collapse; width: 100%; }
table th, table td { border: 1px solid var(--onasapo-border); }

/* 画像 */
img { max-width: 100%; height: auto; }

/* スクロールバー（Webkit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--onasapo-bg-base); }
::-webkit-scrollbar-thumb { background: var(--onasapo-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--onasapo-accent); }

/* 選択範囲 */
::selection { background: var(--onasapo-accent); color: #fff; }

/* =========================================================
 * 2. ヘッダー
 * ========================================================= */

.header,
#header,
.header-container,
.header-in {
    background: var(--onasapo-bg-base) !important;
    color: var(--onasapo-text-primary);
    border-bottom: 1px solid var(--onasapo-border);
}

.site-name-text,
.site-name-text a {
    color: var(--onasapo-text-primary) !important;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tagline,
.site-description {
    color: var(--onasapo-text-muted);
    font-size: 12px;
}

/* グローバルナビ */
#navi, .navi-in, .navi {
    background: #0F0F0F !important;
    border-top: 1px solid var(--onasapo-border);
    border-bottom: 1px solid var(--onasapo-border);
}
#navi .menu-header > .menu-item > a,
.navi .item-label {
    color: var(--onasapo-text-secondary) !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    padding: 14px 18px;
    transition: all 0.2s ease;
}
#navi .menu-header > .menu-item > a:hover,
.navi .item-label:hover {
    color: var(--onasapo-text-primary) !important;
    background: var(--onasapo-accent) !important;
}
#navi .menu-header .sub-menu {
    background: var(--onasapo-bg-elevated) !important;
    border: 1px solid var(--onasapo-border);
}
#navi .menu-header .sub-menu a {
    color: var(--onasapo-text-secondary) !important;
    border-bottom: 1px solid var(--onasapo-border);
}
#navi .menu-header .sub-menu a:hover {
    background: var(--onasapo-accent) !important;
    color: #fff !important;
}

/* =========================================================
 * 3. サイトコンテンツ全体
 * ========================================================= */

.entry-card,
.related-entry-card,
.widget-entry-card,
.entry-card-wrap,
article.post,
article.page {
    background: var(--onasapo-bg-surface);
    color: var(--onasapo-text-primary);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.entry-card:hover,
.widget-entry-card:hover,
.related-entry-card:hover {
    transform: translateY(-2px);
    border-color: var(--onasapo-accent);
    box-shadow: var(--onasapo-shadow-hover);
}

.entry-card-title,
.widget-entry-card-title,
.related-entry-card-title,
.entry-title {
    color: var(--onasapo-text-primary);
    font-weight: 700;
    line-height: 1.5;
}
.entry-card-snippet { color: var(--onasapo-text-muted); }
.entry-card-info, .post-meta, .date, .time { color: var(--onasapo-text-muted); font-size: 12px; }

/* =========================================================
 * 4. メイン投稿本文
 * ========================================================= */

.article {
    background: var(--onasapo-bg-surface);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    padding: 24px;
    color: var(--onasapo-text-primary);
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
    color: var(--onasapo-text-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.article h2 {
    background: linear-gradient(90deg, var(--onasapo-accent), var(--onasapo-accent-dark));
    color: #fff;
    padding: 12px 18px;
    border-left: 6px solid #fff3;
    border-radius: var(--onasapo-radius);
    margin: 32px 0 20px;
    font-size: 22px;
    border-bottom: none;
}
.article h3 {
    border-left: 4px solid var(--onasapo-accent);
    border-bottom: 1px solid var(--onasapo-border);
    padding: 8px 0 8px 14px;
    margin: 28px 0 16px;
    font-size: 19px;
    background: transparent;
}
.article h4 {
    color: var(--onasapo-accent-hover);
    border-bottom: 1px dashed var(--onasapo-border);
    padding-bottom: 6px;
    margin: 24px 0 12px;
    font-size: 17px;
}

.article p { margin: 0 0 1.5em; }
.article ul, .article ol { color: var(--onasapo-text-secondary); padding-left: 1.6em; }
.article ul li, .article ol li { margin-bottom: 0.5em; }

.article blockquote {
    background: var(--onasapo-bg-elevated);
    border-left: 4px solid var(--onasapo-accent);
    color: var(--onasapo-text-secondary);
    padding: 14px 18px;
    margin: 1.5em 0;
    border-radius: 0 var(--onasapo-radius) var(--onasapo-radius) 0;
}

.article code {
    background: #000;
    color: var(--onasapo-accent-hover);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

.article a {
    color: var(--onasapo-accent-hover);
    border-bottom: 1px dotted var(--onasapo-accent);
}
.article a:hover {
    border-bottom-color: var(--onasapo-accent-hover);
    background: rgba(233, 30, 99, 0.08);
}

.article table th { background: var(--onasapo-bg-elevated); color: var(--onasapo-text-primary); }
.article table td { background: var(--onasapo-bg-surface); color: var(--onasapo-text-secondary); }

/* =========================================================
 * 5. レビューボックス（[review_box]）
 * ========================================================= */

.onasapo-review-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    background: linear-gradient(135deg, var(--onasapo-bg-elevated) 0%, var(--onasapo-bg-surface) 100%);
    border: 1px solid var(--onasapo-border-light);
    border-radius: var(--onasapo-radius-lg);
    padding: 18px;
    margin: 20px 0 30px;
    box-shadow: var(--onasapo-shadow);
}

.onasapo-review-box__thumb {
    position: relative;
    overflow: hidden;
    border-radius: var(--onasapo-radius);
    background: #000;
}
.onasapo-review-box__thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.onasapo-review-box__thumb:hover img { transform: scale(1.04); }

.onasapo-media-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--onasapo-accent);
    color: #fff;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.onasapo-info-table {
    width: 100%;
    background: transparent;
    font-size: 14px;
}
.onasapo-info-table tr {
    border-bottom: 1px solid var(--onasapo-border);
}
.onasapo-info-table tr:last-child { border-bottom: none; }
.onasapo-info-table th,
.onasapo-info-table td {
    padding: 10px 6px;
    border: none;
    text-align: left;
    vertical-align: top;
}
.onasapo-info-table th {
    background: transparent;
    color: var(--onasapo-text-muted);
    font-weight: 500;
    width: 38%;
    font-size: 12px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.onasapo-info-table td {
    color: var(--onasapo-text-primary);
    font-weight: 500;
}

/* =========================================================
 * 6. 総合評価バッジ（[total_score]）
 * ========================================================= */

.onasapo-total-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
    border: 2px solid var(--onasapo-border-light);
    border-radius: var(--onasapo-radius-lg);
    padding: 20px;
    margin: 20px 0 30px;
    position: relative;
    overflow: hidden;
}
.onasapo-total-score::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--onasapo-accent);
}
.onasapo-rank-S::before { background: var(--rank-S); }
.onasapo-rank-A::before { background: var(--rank-A); }
.onasapo-rank-B::before { background: var(--rank-B); }
.onasapo-rank-C::before { background: var(--rank-C); }
.onasapo-rank-D::before { background: var(--rank-D); }

.onasapo-total-score__rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.onasapo-rank-letter {
    font-size: 64px;
    font-weight: 900;
    font-family: "Arial Black", "Helvetica", sans-serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.onasapo-rank-S .onasapo-rank-letter { color: var(--rank-S); }
.onasapo-rank-A .onasapo-rank-letter { color: var(--rank-A); }
.onasapo-rank-B .onasapo-rank-letter { color: var(--rank-B); }
.onasapo-rank-C .onasapo-rank-letter { color: var(--rank-C); }
.onasapo-rank-D .onasapo-rank-letter { color: var(--rank-D); }

.onasapo-rank-label {
    font-size: 11px;
    color: var(--onasapo-text-muted);
    letter-spacing: 0.2em;
    margin-top: 4px;
}

.onasapo-total-score__num {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.onasapo-score-num {
    font-size: 48px;
    font-weight: 800;
    color: var(--onasapo-text-primary);
    line-height: 1;
}
.onasapo-score-max {
    font-size: 18px;
    color: var(--onasapo-text-muted);
    font-weight: 500;
}

/* =========================================================
 * 7. 評価表（[score_table]）
 * ========================================================= */

.onasapo-score-section { margin: 30px 0; }
.onasapo-score-heading {
    background: linear-gradient(90deg, var(--onasapo-accent), var(--onasapo-accent-dark));
    color: #fff !important;
    padding: 12px 18px;
    margin: 0 !important;
    border-radius: var(--onasapo-radius) var(--onasapo-radius) 0 0;
    font-size: 18px;
    font-weight: 700;
    border: none !important;
}

.onasapo-score-table {
    width: 100%;
    border: 1px solid var(--onasapo-border-light);
    border-top: none;
    border-radius: 0 0 var(--onasapo-radius) var(--onasapo-radius);
    background: var(--onasapo-bg-surface);
    overflow: hidden;
}
.onasapo-score-table thead { display: none; } /* レイアウト省略 */
.onasapo-score-table tr {
    border-bottom: 1px solid var(--onasapo-border);
}
.onasapo-score-table tr:last-child { border-bottom: none; }

.onasapo-score-table th,
.onasapo-score-table td {
    padding: 12px 16px;
    border: none;
    text-align: left;
    vertical-align: middle;
}
.onasapo-score-table th {
    background: transparent;
    color: var(--onasapo-text-secondary);
    font-weight: 500;
    width: 50%;
}
.onasapo-score-table td { color: var(--onasapo-text-primary); }

.onasapo-score-section-label td {
    background: var(--onasapo-bg-elevated) !important;
    color: var(--onasapo-accent-hover) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 8px 16px !important;
    text-transform: uppercase;
}

/* 星表示 */
.onasapo-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--onasapo-star);
    font-size: 16px;
}
.onasapo-stars i { color: var(--onasapo-star); }
.onasapo-stars i.fa-regular { color: var(--onasapo-text-disabled); }
.onasapo-stars-num {
    margin-left: 8px;
    color: var(--onasapo-text-primary);
    font-weight: 700;
    font-size: 14px;
}

/* =========================================================
 * 8. 購入ボタン（[buy_buttons]）
 * ========================================================= */

.onasapo-buy-buttons {
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, var(--onasapo-bg-elevated) 0%, var(--onasapo-bg-surface) 100%);
    border: 2px solid var(--onasapo-accent);
    border-radius: var(--onasapo-radius-lg);
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.15);
}
.onasapo-buy-heading {
    text-align: center;
    color: var(--onasapo-text-primary);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px !important;
    border: none !important;
    padding: 0 !important;
    background: none !important;
}
.onasapo-buy-buttons__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.onasapo-buy-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--onasapo-accent);
    color: #fff !important;
    text-decoration: none !important;
    padding: 14px 20px;
    border-radius: var(--onasapo-radius);
    font-weight: 700;
    font-size: 15px;
    border: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.onasapo-buy-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4);
    text-decoration: none !important;
}
.onasapo-buy-btn__store { font-size: 16px; }
.onasapo-buy-btn__cta { font-size: 14px; opacity: 0.95; }
.onasapo-buy-btn__cta i { margin-left: 6px; }

.onasapo-buy-note {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--onasapo-text-muted);
    text-align: center;
}

/* =========================================================
 * 9. アーカイブ・カードオーバーレイ
 * ========================================================= */

.onasapo-card-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
}
.onasapo-card-media {
    background: var(--onasapo-accent);
    color: #fff;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.onasapo-card-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border: 2px solid #fff;
}
.onasapo-card-rank.onasapo-rank-S { background: var(--rank-S); color: #000; }
.onasapo-card-rank.onasapo-rank-A { background: var(--rank-A); }
.onasapo-card-rank.onasapo-rank-B { background: var(--rank-B); }
.onasapo-card-rank.onasapo-rank-C { background: var(--rank-C); }
.onasapo-card-rank.onasapo-rank-D { background: var(--rank-D); }

.entry-card-thumb { position: relative; overflow: hidden; }

/* =========================================================
 * 10. パンくず
 * ========================================================= */

.breadcrumb {
    background: var(--onasapo-bg-surface);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--onasapo-text-muted);
    margin-bottom: 16px;
}
.breadcrumb a { color: var(--onasapo-text-secondary); }
.breadcrumb a:hover { color: var(--onasapo-accent-hover); }

.onasapo-breadcrumb-media {
    display: inline-block;
    background: var(--onasapo-accent);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 6px;
}

/* =========================================================
 * 11. サイドバー
 * ========================================================= */

#sidebar .widget,
.sidebar .widget,
.onasapo-widget {
    background: var(--onasapo-bg-surface);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    padding: 16px;
    margin-bottom: 20px;
}

.sidebar .widget-sidebar-title,
.sidebar h3,
.onasapo-widget-title {
    background: linear-gradient(90deg, var(--onasapo-accent), var(--onasapo-accent-dark));
    color: #fff !important;
    padding: 10px 14px;
    margin: -16px -16px 16px;
    border-radius: var(--onasapo-radius) var(--onasapo-radius) 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border: none !important;
}

.sidebar a { color: var(--onasapo-text-secondary); }
.sidebar a:hover { color: var(--onasapo-accent-hover); }

.sidebar .widget_categories ul,
.sidebar .widget_archive ul,
.sidebar .widget_tag_cloud { padding: 0; }
.sidebar .widget_categories li,
.sidebar .widget_archive li {
    list-style: none;
    border-bottom: 1px solid var(--onasapo-border);
    padding: 8px 0;
}
.sidebar .widget_categories li:last-child,
.sidebar .widget_archive li:last-child { border-bottom: none; }

.sidebar .widget_categories li a::before,
.sidebar .widget_archive li a::before {
    content: "▶";
    color: var(--onasapo-accent);
    font-size: 9px;
    margin-right: 6px;
}

/* タグクラウド */
.tagcloud a {
    display: inline-block;
    background: var(--onasapo-bg-elevated);
    color: var(--onasapo-text-secondary) !important;
    border: 1px solid var(--onasapo-border-light);
    padding: 4px 10px !important;
    margin: 3px 3px 3px 0;
    border-radius: 14px;
    font-size: 12px !important;
    transition: all 0.2s ease;
}
.tagcloud a:hover {
    background: var(--onasapo-accent) !important;
    color: #fff !important;
    border-color: var(--onasapo-accent);
}

/* =========================================================
 * 12. フッター
 * ========================================================= */

.footer,
#footer {
    background: var(--onasapo-bg-base);
    color: var(--onasapo-text-muted);
    border-top: 2px solid var(--onasapo-accent);
}

.footer h3, .footer .widget-title {
    color: var(--onasapo-text-primary);
    border-bottom: 1px solid var(--onasapo-border-light);
    padding-bottom: 8px;
    font-size: 14px;
    letter-spacing: 0.05em;
}
.footer a { color: var(--onasapo-text-secondary); }
.footer a:hover { color: var(--onasapo-accent-hover); }

.copyright,
.credit {
    background: #000;
    color: var(--onasapo-text-muted);
    font-size: 12px;
    padding: 12px;
    text-align: center;
}

/* =========================================================
 * 13. モバイルナビ・モバイルメニュー
 * ========================================================= */

.mobile-menu-buttons,
.menu-mobile {
    background: var(--onasapo-bg-base) !important;
    border-top: 1px solid var(--onasapo-border) !important;
}
.mobile-menu-buttons a {
    color: var(--onasapo-text-secondary) !important;
}
.mobile-menu-buttons a:hover,
.mobile-menu-buttons a:active {
    color: var(--onasapo-accent) !important;
}

/* =========================================================
 * 14. SNSボタン・シェア
 * ========================================================= */

.sns-share-buttons,
.sns-follow-buttons {
    margin: 24px 0;
}
.sns-share-buttons a {
    border-radius: var(--onasapo-radius);
    transition: transform 0.15s ease;
}
.sns-share-buttons a:hover { transform: translateY(-2px); }

/* =========================================================
 * 15. 関連記事
 * ========================================================= */

.related-entry-heading,
.related-entry h2,
.related-entry h3 {
    color: var(--onasapo-text-primary);
    border-bottom: 2px solid var(--onasapo-accent);
    padding-bottom: 8px;
}

/* =========================================================
 * 16. 検索フォーム
 * ========================================================= */

.search-form,
.widget_search {
    margin-bottom: 16px;
}
.search-form input[type="text"],
.search-edit,
input.search-field {
    background: var(--onasapo-bg-elevated) !important;
    color: var(--onasapo-text-primary) !important;
    border: 1px solid var(--onasapo-border-light) !important;
    padding: 10px 14px !important;
    border-radius: var(--onasapo-radius);
    width: 100%;
}
.search-form input[type="text"]:focus,
.search-edit:focus {
    border-color: var(--onasapo-accent) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.2);
}
.search-form button,
.search-submit {
    background: var(--onasapo-accent) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 16px !important;
    border-radius: var(--onasapo-radius);
    cursor: pointer;
}

/* =========================================================
 * 17. ページネーション
 * ========================================================= */

.pagination, .page-numbers {
    text-align: center;
    margin: 24px 0;
}
.pagination a,
.pagination span,
.page-numbers {
    background: var(--onasapo-bg-elevated);
    color: var(--onasapo-text-secondary);
    border: 1px solid var(--onasapo-border-light);
    padding: 8px 14px;
    margin: 0 3px;
    border-radius: var(--onasapo-radius);
    display: inline-block;
}
.pagination .current,
.page-numbers.current {
    background: var(--onasapo-accent);
    color: #fff;
    border-color: var(--onasapo-accent);
}
.pagination a:hover {
    background: var(--onasapo-accent-hover);
    color: #fff;
    border-color: var(--onasapo-accent-hover);
}

/* =========================================================
 * 18. コメント
 * ========================================================= */

.comment-area,
#comments {
    background: var(--onasapo-bg-surface);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    padding: 18px;
    margin-top: 24px;
}
.comment-body {
    background: var(--onasapo-bg-elevated);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    padding: 12px;
    margin-bottom: 12px;
}
.comment-author { color: var(--onasapo-text-primary); font-weight: 700; }
.comment-meta { color: var(--onasapo-text-muted); font-size: 12px; }

textarea, input[type="text"], input[type="email"], input[type="url"] {
    background: var(--onasapo-bg-elevated);
    color: var(--onasapo-text-primary);
    border: 1px solid var(--onasapo-border-light);
    padding: 10px;
    border-radius: var(--onasapo-radius);
    width: 100%;
    box-sizing: border-box;
}
textarea:focus, input:focus {
    border-color: var(--onasapo-accent);
    outline: none;
}
input[type="submit"], button {
    background: var(--onasapo-accent);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--onasapo-radius);
    cursor: pointer;
    font-weight: 700;
}
input[type="submit"]:hover { background: var(--onasapo-accent-hover); }

/* =========================================================
 * 19. ピックアップ・ランキング表示用ユーティリティ
 * ========================================================= */

.onasapo-rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: rank-counter;
}
.onasapo-rank-list li {
    position: relative;
    padding: 10px 10px 10px 50px;
    border-bottom: 1px solid var(--onasapo-border);
    counter-increment: rank-counter;
}
.onasapo-rank-list li::before {
    content: counter(rank-counter);
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--onasapo-bg-elevated);
    color: var(--onasapo-text-muted);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.onasapo-rank-list li:nth-child(1)::before { background: #FFD700; color: #000; }
.onasapo-rank-list li:nth-child(2)::before { background: #C0C0C0; color: #000; }
.onasapo-rank-list li:nth-child(3)::before { background: #CD7F32; color: #fff; }

/* =========================================================
 * 20. アフィリエイト注意書きボックス
 * ========================================================= */

.onasapo-pr-notice {
    background: rgba(255, 167, 38, 0.08);
    border-left: 3px solid var(--onasapo-warning);
    color: var(--onasapo-text-muted);
    padding: 10px 14px;
    font-size: 12px;
    margin: 16px 0;
    border-radius: 0 var(--onasapo-radius) var(--onasapo-radius) 0;
}

/* =========================================================
 * 21. 18+ 注意・年齢確認補助
 * ========================================================= */

.age-gate,
#age-gate-overlay {
    background: rgba(0, 0, 0, 0.95) !important;
    color: var(--onasapo-text-primary) !important;
}

/* =========================================================
 * 22. メディアクエリ：タブレット (768px〜)
 * ========================================================= */

@media screen and (min-width: 768px) {
    body { font-size: 16px; }

    /* レビューボックスを2カラムに */
    .onasapo-review-box {
        grid-template-columns: 280px 1fr;
        gap: 20px;
        padding: 22px;
    }

    /* 評価表のサイズ */
    .onasapo-score-table th { width: 40%; }

    /* 購入ボタン2カラム */
    .onasapo-buy-buttons__list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 記事表示 */
    .article { padding: 32px; }
    .article h2 { font-size: 24px; }

    /* カードグリッド */
    .entry-card-content,
    .front-top-page-contents { gap: 16px; }
}

/* =========================================================
 * 23. メディアクエリ：PC (1024px〜)
 * ========================================================= */

@media screen and (min-width: 1024px) {
    /* レビューボックスをさらにゆとり */
    .onasapo-review-box {
        grid-template-columns: 320px 1fr;
        gap: 28px;
        padding: 26px;
    }

    /* 総合評価バッジを大きく */
    .onasapo-rank-letter { font-size: 80px; }
    .onasapo-score-num { font-size: 60px; }

    /* 購入ボタン3カラム */
    .onasapo-buy-buttons__list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* スコアテーブル横並び */
    .onasapo-score-table th { width: 35%; }
}

/* =========================================================
 * 24. メディアクエリ：大画面 (1280px〜)
 * ========================================================= */

@media screen and (min-width: 1280px) {
    .article h2 { font-size: 26px; }
    .article h3 { font-size: 21px; }
}

/* =========================================================
 * 25. メディアクエリ：SP（〜767px）の微調整
 * ========================================================= */

@media screen and (max-width: 767px) {
    /* タップ領域確保 */
    a, button { min-height: 32px; }

    /* 記事余白を圧縮 */
    .article { padding: 16px; border-radius: 0; border-left: none; border-right: none; }

    /* 見出しを小さく */
    .article h2 { font-size: 19px; padding: 10px 14px; }
    .article h3 { font-size: 17px; }

    /* レビューボックス */
    .onasapo-review-box { padding: 14px; }
    .onasapo-info-table th { width: 42%; font-size: 11px; }
    .onasapo-info-table td { font-size: 13px; }

    /* 総合評価 */
    .onasapo-total-score { gap: 16px; padding: 14px; }
    .onasapo-rank-letter { font-size: 50px; }
    .onasapo-score-num { font-size: 36px; }
    .onasapo-score-max { font-size: 14px; }

    /* スコア表 */
    .onasapo-score-table th,
    .onasapo-score-table td { padding: 10px 12px; font-size: 13px; }
    .onasapo-stars { font-size: 14px; }

    /* 購入ボタン */
    .onasapo-buy-btn { padding: 12px 14px; }
    .onasapo-buy-btn__store { font-size: 14px; }
    .onasapo-buy-btn__cta { font-size: 12px; }

    /* グローバルナビ */
    #navi .menu-header > .menu-item > a { padding: 12px 14px; }
}

/* =========================================================
 * 26. アニメーション
 * ========================================================= */

@keyframes onasapoFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.onasapo-review-box,
.onasapo-total-score,
.onasapo-buy-buttons {
    animation: onasapoFadeIn 0.4s ease both;
}

/* =========================================================
 * 27. ユーティリティ
 * ========================================================= */

.onasapo-hidden-pc { display: block; }
.onasapo-hidden-sp { display: none; }
@media screen and (min-width: 768px) {
    .onasapo-hidden-pc { display: none; }
    .onasapo-hidden-sp { display: block; }
}

.onasapo-text-accent { color: var(--onasapo-accent-hover); }
.onasapo-text-muted  { color: var(--onasapo-text-muted); }
.onasapo-text-center { text-align: center; }
.onasapo-mt-0 { margin-top: 0 !important; }
.onasapo-mt-1 { margin-top: 8px !important; }
.onasapo-mt-2 { margin-top: 16px !important; }
.onasapo-mt-3 { margin-top: 24px !important; }
/* =========================================================
 * front-page.php 専用 追加CSS
 * style.cssの末尾に追記してください
 * ========================================================= */

/* ヒーロー */
.onasapo-hero {
    background: linear-gradient(135deg, #1A0010 0%, #2A0020 50%, #1A0010 100%);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius-lg);
    padding: 24px 18px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.onasapo-hero::before {
    content: "";
    position: absolute;
    top: -50%; right: -20%;
    width: 70%; height: 200%;
    background: radial-gradient(circle, rgba(233, 30, 99, 0.15) 0%, transparent 70%);
    pointer-events: none;
}
.onasapo-hero__inner { position: relative; z-index: 1; }
.onasapo-hero__title {
    color: var(--onasapo-text-primary);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    margin: 0 0 12px;
    border: none;
    padding: 0;
    background: none;
}
.onasapo-hero__badge {
    display: inline-block;
    background: var(--onasapo-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    letter-spacing: 0.05em;
}
.onasapo-hero__lead {
    color: var(--onasapo-text-secondary);
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 14px;
}
.onasapo-hero__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.onasapo-hero__cat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cat-color, var(--onasapo-accent));
    color: var(--cat-color, var(--onasapo-accent)) !important;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
    text-decoration: none !important;
}
.onasapo-hero__cat:hover {
    background: var(--cat-color, var(--onasapo-accent));
    color: #fff !important;
}

@media (min-width: 768px) {
    .onasapo-hero { padding: 36px 28px; }
    .onasapo-hero__title { font-size: 26px; }
    .onasapo-hero__lead { font-size: 15px; }
    .onasapo-hero__cat { padding: 6px 16px; font-size: 13px; }
}

/* セクション */
.onasapo-section {
    background: var(--onasapo-bg-surface);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    padding: 16px;
    margin-bottom: 24px;
}
.onasapo-section__title {
    color: var(--onasapo-text-primary) !important;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 16px !important;
    padding: 0 0 10px !important;
    border: none !important;
    border-bottom: 2px solid var(--onasapo-accent) !important;
    background: none !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.onasapo-section__icon {
    color: var(--onasapo-accent);
    font-size: 16px;
}
.onasapo-section__more {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--onasapo-text-muted) !important;
    text-decoration: none !important;
}
.onasapo-section__more:hover { color: var(--onasapo-accent-hover) !important; }
.onasapo-section__more i { margin-left: 4px; font-size: 10px; }

/* ピックアップグリッド */
.onasapo-pickup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 768px) {
    .onasapo-pickup-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.onasapo-pickup-card {
    background: var(--onasapo-bg-elevated);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.onasapo-pickup-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--onasapo-shadow-hover);
    border-color: var(--onasapo-accent);
}
.onasapo-pickup-card__link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
}
.onasapo-pickup-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #000;
    overflow: hidden;
}
.onasapo-pickup-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.onasapo-pickup-card__media {
    position: absolute;
    top: 6px; left: 6px;
    background: var(--onasapo-accent);
    color: #fff;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
}
.onasapo-pickup-card__rank {
    position: absolute;
    top: 6px; right: 6px;
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.onasapo-pickup-card__rank.onasapo-rank-S { background: var(--rank-S); color: #000; }
.onasapo-pickup-card__rank.onasapo-rank-A { background: var(--rank-A); }
.onasapo-pickup-card__rank.onasapo-rank-B { background: var(--rank-B); }
.onasapo-pickup-card__rank.onasapo-rank-C { background: var(--rank-C); }
.onasapo-pickup-card__rank.onasapo-rank-D { background: var(--rank-D); }
.onasapo-pickup-card__body { padding: 10px; }
.onasapo-pickup-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--onasapo-text-primary);
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.onasapo-pickup-card__creator {
    color: var(--onasapo-text-muted);
    font-size: 11px;
    margin: 0;
}

/* メディア別グリッド */
.onasapo-media-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 568px) {
    .onasapo-media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .onasapo-media-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

.onasapo-media-card {
    background: var(--onasapo-bg-elevated);
    border: 1px solid var(--onasapo-border);
    border-radius: var(--onasapo-radius);
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.onasapo-media-card:hover {
    transform: translateY(-2px);
    border-color: var(--onasapo-accent);
}
.onasapo-media-card__link {
    display: flex;
    text-decoration: none !important;
    color: inherit !important;
}
@media (min-width: 1024px) {
    .onasapo-media-card__link { display: block; }
}
.onasapo-media-card__thumb {
    flex-shrink: 0;
    width: 110px;
    aspect-ratio: 4 / 3;
    background: #000;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .onasapo-media-card__thumb { width: 100%; aspect-ratio: 16 / 10; }
}
.onasapo-media-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.onasapo-media-card__rank {
    position: absolute;
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.onasapo-media-card__rank.onasapo-rank-S { background: var(--rank-S); color: #000; }
.onasapo-media-card__rank.onasapo-rank-A { background: var(--rank-A); }
.onasapo-media-card__rank.onasapo-rank-B { background: var(--rank-B); }
.onasapo-media-card__rank.onasapo-rank-C { background: var(--rank-C); }
.onasapo-media-card__rank.onasapo-rank-D { background: var(--rank-D); }

.onasapo-media-card__body {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.onasapo-media-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--onasapo-text-primary);
    line-height: 1.4;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.onasapo-media-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--onasapo-text-muted);
}
.onasapo-media-card__creator {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.onasapo-media-card__score {
    color: var(--onasapo-star);
    font-weight: 700;
    flex-shrink: 0;
}