/* ほうれん草 vs 小松菜 投稿専用スタイル */
.spinach-komatsuna-post {
    /* 必要に応じて、このコンテナ自体にマージンやパディングを追加できます */
}

/* 以下、style.css の内容に .spinach-komatsuna-post を追加 */

/* 変数定義: より洗練された配色とスタイル */
.spinach-komatsuna-post {
    --primary-color: #34A853; /* Google Green - 落ち着いた緑 */
    --secondary-color: #fbbc05; /* Google Yellow - アクセント用 */
    --accent-color: #EA4335; /* Google Red - アクセント用 */
    --text-color: #212529; /* Bootstrapに近い濃いグレー */
    --text-muted: #6c757d; /* やや薄いグレー */
    --bg-color: #f8f9fa; /* ごく薄いグレー背景 */
    --card-bg: #ffffff; /* カード背景は白 */
    --border-color: #dee2e6; /* 標準的なボーダーカラー */
    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --shadow-md: 0 .5rem 1rem rgba(0, 0, 0, .15);
    font-family: 'Noto Sans JP', 'M PLUS Rounded 1c', sans-serif;
    --border-radius: 0.375rem; /* 6px程度の標準的な角丸 */
}

/* 基本設定 (通常はテーマ側で定義されていることが多いので、競合する場合は調整が必要) */
.spinach-komatsuna-post { /* コンテナ自体に適用 */
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* margin: 0; */ /* テーマ側のスタイルに影響する可能性 */
    /* padding: 0; */ /* テーマ側のスタイルに影響する可能性 */
}

/* コンテナ */
.spinach-komatsuna-post .container {
    max-width: 960px;
    margin: 3em auto; /* 上下のマージンを増やす */
    padding: 0 1.5em; /* 左右のパディングも少し増やす */
}

/* タイポグラフィ */
.spinach-komatsuna-post h1,
.spinach-komatsuna-post h2,
.spinach-komatsuna-post h3,
.spinach-komatsuna-post h4,
.spinach-komatsuna-post h5,
.spinach-komatsuna-post h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color); /* 基本は黒系の文字色 */
    margin-top: 0;
}

.spinach-komatsuna-post h1 {
    font-size: 2.2rem; /* 少し調整 */
    text-align: center;
    margin-bottom: 0.8em; /* マージン調整 */
    color: var(--text-color); /* 標準テキスト色に変更 */
    position: relative; /* ::after のため */
    padding-bottom: 0.6em; /* 線とのスペース確保 */
}

/* h1の下にアクセントラインを追加 */
.spinach-komatsuna-post h1::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px; /* 短めの線 */
    height: 4px;
    background-color: var(--primary-color); /* 緑色の線 */
    border-radius: 2px;
}

.spinach-komatsuna-post h2 {
    font-size: 1.75rem; /* 少し小さく */
    text-align: left; /* 左揃え */
    margin-top: 3em; /* セクション間のマージン */
    margin-bottom: 1.5em;
    padding-bottom: 0.6em;
    border-bottom: 1px solid var(--border-color); /* シンプルな下線 */
    position: relative;
}

.spinach-komatsuna-post h3 {
    font-size: 1.3rem;
    color: var(--primary-color); /* h3はプライマリカラー */
    margin-bottom: 1em;
    padding-bottom: 0;
    border-bottom: none; /* 下線削除 */
}

.spinach-komatsuna-post strong {
    font-weight: 700;
    color: inherit; /* 親要素の色を継承 */
}

.spinach-komatsuna-post a {
    color: var(--primary-color); /* リンクはプライマリカラー */
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.spinach-komatsuna-post a:hover {
    opacity: 0.8;
}

/* ヘッダー */
.spinach-komatsuna-post header {
    padding: 2em 1em;
    text-align: center;
    margin-bottom: 3em; /* マージン調整 */
    background: var(--card-bg); /* 背景は白 */
    border-radius: 0 0 var(--border-radius) var(--border-radius); /* 角丸調整 */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm); /* 軽い影 */
}

.spinach-komatsuna-post header p {
    font-size: 1.1rem;
    color: var(--text-muted); /* 少し薄い文字色 */
    max-width: 700px;
    margin: 0.5em auto 0; /* h1との間隔調整 */
}

/* メインコンテンツ */
.spinach-komatsuna-post main {
    /* スタイルなし */
}

/* セクション */
.spinach-komatsuna-post section {
    background: var(--card-bg); /* 白背景 */
    padding: 2em;
    margin-bottom: 2.5em; /* マージン調整 */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm); /* 軽い影 */
}

/* 表の前のキーポイント概要 */
.spinach-komatsuna-post .key-points {
    background-color: #f8f9fa; /* 薄いグレー背景 */
    padding: 1.5em;
    margin-bottom: 2em;
    border-radius: var(--border-radius);
    border: 1px solid #e9ecef;
}
.spinach-komatsuna-post .key-points p {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.05em;
}
.spinach-komatsuna-post .key-points ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: 0;
}
.spinach-komatsuna-post .key-points li {
    margin-bottom: 0.6em;
}
.spinach-komatsuna-post .komatsuna-highlight {
    color: #007bff; /* 例: 青系の色で小松菜をハイライト */
    font-weight: bold;
}
.spinach-komatsuna-post .spinach-highlight {
    color: var(--primary-color); /* 緑色でほうれん草をハイライト */
    font-weight: bold;
}

/* 比較表: シンプルモダン */
.spinach-komatsuna-post #nutrients table {
    width: 100%;
    border-collapse: collapse; /* collapseに戻す */
    border-spacing: 0;
    margin-top: 1.5em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius); /* テーブル全体に角丸 */
    overflow: hidden; /* 角丸を有効にする */
}

.spinach-komatsuna-post #nutrients th,
.spinach-komatsuna-post #nutrients td {
    padding: 0.8em 1em; /* パディング調整 */
    text-align: center;
    vertical-align: middle;
    background-color: transparent; /* 背景透過 */
    border: none;
    border-bottom: 1px solid var(--border-color); /* 行の下線 */
}
.spinach-komatsuna-post #nutrients tbody tr:last-child td {
    border-bottom: none; /* 最後の行の下線は削除 */
}

.spinach-komatsuna-post #nutrients th {
    font-weight: 700;
    color: var(--text-color);
    background-color: #f8f9fa; /* ヘッダー行の背景 */
    border-bottom: 2px solid var(--border-color); /* ヘッダー下線を少し太く */
}

/* 1列目 (栄養素名) */
.spinach-komatsuna-post #nutrients th:first-child,
.spinach-komatsuna-post #nutrients td:first-child {
    text-align: left;
    font-weight: bold;
    border-radius: 0; /* 角丸削除 */
    border-right: 1px solid var(--border-color); /* 右の罫線 */
}

/* 最終列 (注目ポイント) */
.spinach-komatsuna-post #nutrients th:last-child,
.spinach-komatsuna-post #nutrients td:last-child {
    background-color: transparent;
    font-size: 0.9em;
    border-radius: 0;
    border-left: 1px solid var(--border-color); /* 左の罫線 */
}

/* データセル */
.spinach-komatsuna-post #nutrients td:nth-child(2),
.spinach-komatsuna-post #nutrients td:nth-child(3) {
    /* スタイルなし */
}

.spinach-komatsuna-post #nutrients tbody tr:hover td {
    background-color: #f1f3f5; /* ホバー色変更 */
}

.spinach-komatsuna-post #nutrients tbody strong {
    color: var(--accent-color); /* 強調はアクセントカラー */
    font-size: 1.05em; /* サイズ微調整 */
    display: inline; /* inlineに戻す */
}

.spinach-komatsuna-post #nutrients small {
    display: block;
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 0.3em;
}

.spinach-komatsuna-post .caption {
    font-size: 0.85em; /* 少し小さく */
    color: var(--text-muted);
    text-align: right;
    margin-top: 1em;
}

.spinach-komatsuna-post .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* レスポンシブ対応 */
    gap: 2em;
    margin-top: 1.5em;
}

.spinach-komatsuna-post .grid-item {
    background-color: #fdfdfd; /* 少し背景色をつける */
    padding: 1.8em;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.spinach-komatsuna-post .grid-item h3 {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 1.2em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid; /* 下線を追加 */
    color: var(--text-color); /* 色をリセット */
    border-color: var(--primary-color); /* ほうれん草は緑 */
}

.spinach-komatsuna-post .grid-item.komatsuna h3 {
    border-color: #007bff; /* 小松菜は青 */
}


.spinach-komatsuna-post .grid-item ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.spinach-komatsuna-post .grid-item li {
    margin-bottom: 0.8em;
    padding-left: 1.8em;
    position: relative;
    line-height: 1.5;
}

/* IDセレクタを追加して詳細度を上げる */
.spinach-komatsuna-post #health-benefits .grid-item li::before,
.spinach-komatsuna-post #cooking .grid-item li::before { /* cooking も共通スタイルに含める */
    content: '\f00c'; /* Font Awesome チェックマーク */
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important; /* Solid スタイル */
    color: #1E8E3E; /* 濃い緑色に変更して視認性向上 */
    position: absolute;
    left: 0;
    top: 1px; /* 位置微調整 */
    font-size: 1em;
}

/* IDセレクタを追加して詳細度を上げる */
.spinach-komatsuna-post #health-benefits .grid-item.komatsuna li::before,
.spinach-komatsuna-post #cooking .grid-item.komatsuna li::before { /* cooking の komatsuna も含める */
    color: #007bff; /* 小松菜は青 */
}

/* IDセレクタを追加して詳細度を上げる */
.spinach-komatsuna-post #cooking .grid-item.spinach h3 {
    border-color: var(--primary-color); /* ほうれん草の線色 */
}
/* IDセレクタを追加して詳細度を上げる */
.spinach-komatsuna-post #cooking .grid-item.komatsuna h3 {
    border-color: #007bff; /* 小松菜の線色 */
}

.spinach-komatsuna-post #conclusion h2 {
    border-bottom: none; /* 結論セクションのh2の下線は削除 */
    margin-bottom: 0.8em;
    text-align: center; /* 中央揃え */
}

.spinach-komatsuna-post #conclusion ul {
    list-style: none;
    padding: 0;
    margin: 1.5em auto;
    max-width: 600px; /* 中央寄せのために幅制限 */
}

.spinach-komatsuna-post #conclusion li {
    background: #f8f9fa;
    padding: 1em 1.5em;
    margin-bottom: 1em;
    border-radius: var(--border-radius);
    border: 1px solid #e9ecef;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* Flexbox使用 */
    align-items: center; /* 縦中央揃え */
}

.spinach-komatsuna-post #conclusion li:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.spinach-komatsuna-post #conclusion li strong {
    font-weight: bold;
    margin-left: 0.8em; /* 矢印とのスペース */
    flex-grow: 1; /* 残りのスペースを埋める */
}

.spinach-komatsuna-post #conclusion li::before {
    content: '\f105'; /* Font Awesome 右向き矢印 */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--secondary-color); /* 黄色 */
    font-size: 1.2em;
    margin-right: 0.5em;
    flex-shrink: 0; /* 縮まないように */
}

.spinach-komatsuna-post footer {
    text-align: center;
    margin-top: 4em;
    padding: 1.5em 0;
    font-size: 0.9em;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

/* レスポンシブ対応 */

/* テーブル横スクロール用 */
.spinach-komatsuna-post .table-wrapper {
    overflow-x: auto; /* 横スクロールを可能にする */
    -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール */
    margin-bottom: 1em; /* 下に少しマージン */
}

/* table自体には最小幅を設定 */
.spinach-komatsuna-post #nutrients table {
     min-width: 600px; /* テーブルが崩れない最小幅 (調整が必要) */
     /* 既存の width: 100% は削除 */
}

/* tableのレイアウトを微調整 */
.spinach-komatsuna-post #nutrients tbody tr td { /* tbodyのセルの上線を削除して行間を詰める */
    border-top: none;
}
.spinach-komatsuna-post #nutrients tbody tr:first-child td {
    border-top: none; /* 最初の行の上線もないことを確認 */
}

@media (max-width: 992px) {
    .spinach-komatsuna-post .container {
        max-width: 800px; /* 少し広げる */
    }
    .spinach-komatsuna-post h1 { font-size: 2.2rem; }
    .spinach-komatsuna-post h2 { font-size: 1.6rem; }
    .spinach-komatsuna-post h3 { font-size: 1.2rem; }
}

@media (max-width: 768px) {
    .spinach-komatsuna-post { font-size: 15px; }
    .spinach-komatsuna-post .container { padding: 0 1em; }
    .spinach-komatsuna-post section { padding: 1.5em; }

    .spinach-komatsuna-post h1 { font-size: 2rem; }
    .spinach-komatsuna-post h2 { font-size: 1.5rem; margin-top: 2.5em; margin-bottom: 1.2em;}
    .spinach-komatsuna-post h3 { font-size: 1.15rem; }

    .spinach-komatsuna-post .grid-container,
    .spinach-komatsuna-post #unique-points {
        grid-template-columns: 1fr; /* 1列表示 */
        gap: 1.5em;
     }

     .spinach-komatsuna-post #nutrients th, .spinach-komatsuna-post #nutrients td {
        padding: 0.7em 0.8em;
     }
}

@media (max-width: 600px) {
    .spinach-komatsuna-post .table-wrapper {
        /* 横スクロールが有効になっている */
    }
    /* 以下、テーブル縦表示のスタイルを削除またはコメントアウト */
    /*
    .spinach-komatsuna-post #nutrients table {
        border: 0;
        border-radius: 0;
        overflow: visible;
        min-width: 0;
    }

    .spinach-komatsuna-post #nutrients thead {
        display: none;
    }

    .spinach-komatsuna-post #nutrients tr {
        display: block;
        margin-bottom: 1.5em;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        background: var(--card-bg);
    }
     .spinach-komatsuna-post #nutrients tbody tr:last-child {
         margin-bottom: 0;
     }

    .spinach-komatsuna-post #nutrients td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8em 1em;
        text-align: right;
        border-bottom: 1px solid #eee;
        position: relative;
        background: none !important;
    }
    .spinach-komatsuna-post #nutrients td:last-child {
        border-bottom: 0;
        border-left: none;
    }

    .spinach-komatsuna-post #nutrients td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-align: left;
        margin-right: 1em;
        color: var(--text-muted);
    }

    .spinach-komatsuna-post #nutrients td:nth-child(1) {
        text-align: right;
        font-weight: bold;
        background: #f8f9fa;
        border-right: none;
    }

    .spinach-komatsuna-post #nutrients td:nth-child(1):before {
        color: var(--text-color);
    }

    .spinach-komatsuna-post #nutrients td:nth-child(4) {
        text-align: right;
        font-size: 0.9em;
        border-left: none;
    }
    .spinach-komatsuna-post #nutrients td:nth-child(4):before {
        white-space: nowrap;
    }
    .spinach-komatsuna-post #nutrients td:nth-child(4) strong {
        display: inline;
        font-size: 1em;
    }
    .spinach-komatsuna-post #nutrients td:nth-child(4) small {
       display: block;
       margin-top: 0.2em;
       text-align: right;
    }
    */
}


@media (max-width: 480px) {
    .spinach-komatsuna-post { font-size: 14px; }
    .spinach-komatsuna-post .container { padding: 0 0.8em; }
    .spinach-komatsuna-post section { padding: 1.2em; margin-bottom: 1.5em;}

    .spinach-komatsuna-post h1 { font-size: 1.7rem; }
    .spinach-komatsuna-post h2 { font-size: 1.3rem; }
    .spinach-komatsuna-post h3 { font-size: 1.1rem; }

    .spinach-komatsuna-post header { padding: 1.5em 0.5em; }
    .spinach-komatsuna-post header p { font-size: 1rem; }

    .spinach-komatsuna-post .grid-item { padding: 1.2em; }
    .spinach-komatsuna-post .grid-item li { padding-left: 1.5em; margin-bottom: 0.6em; }
    .spinach-komatsuna-post .grid-item li::before { font-size: 0.9em; top: 2px;}

    .spinach-komatsuna-post #conclusion li { padding: 0.8em 1em; }
}

.spinach-komatsuna-content-body {
    padding: 1em 0;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

/* Specific elements styling */
.spinach-komatsuna-content-body h2, .spinach-komatsuna-content-body h3 {
    color: var(--primary-color);
    /* font-family: var(--font-family); */ /* ここを直接指定に変更 */
    font-family: "Zen Kaku Gothic New", sans-serif;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}

.spinach-komatsuna-content-body .icon-leaf::before {
    font-family: 'Font Awesome 6 Free' !important; /* Keep Font Awesome */
    content: "\f06c"; /* Unicode for leaf icon */
    color: var(--secondary-color);
}

.spinach-komatsuna-content-body .tip-icon::before {
    content: "\f0eb"; /* Font Awesome lightbulb icon */
    font-family: 'Font Awesome 6 Free'; /* Keep Font Awesome */
    font-weight: 900;
    margin-right: 8px;
}