@charset "UTF-8";

/* =====================================================================
   筋肉の疲労軽減コラム ページ固有CSS
   ・ベースは column-detail.css / column-detail2.css / column-fathers-day-pajamas.css（既存）
   ・追加：筋肉疲労と筋肉痛の比較表（.compare-table）
   ・追加：参考文献リンク（.reference-link）の余白調整
   ===================================================================== */

/* ---------- 比較表（筋肉疲労／筋肉痛） ---------- */
/* info-table2（口コミページの評価表）と同じ線色・角丸に揃えた3列表 */
#column .compare-table {
    margin: 4rem 4.5rem 5rem;  /* 本文 p の左右余白(4.5rem)と揃える */
    border: .2rem solid #ddd;
    border-radius: 1.5rem;
    overflow: hidden;
    background-color: #fff;
}
#column .compare-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
#column .compare-table th,
#column .compare-table td {
    padding: 2.4rem 3rem;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #333;
    vertical-align: middle;
    text-align: left;
}
#column .compare-table tr > :first-child {
    border-left: none;
}
#column .compare-table tbody tr:last-child th,
#column .compare-table tbody tr:last-child td {
    border-bottom: none;
}
/* 見出し行：筋肉疲労＝ブランド赤、筋肉痛＝グレーで対比 */
#column .compare-table thead th {
    padding: 1.6rem 1rem;
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: .06em;
    color: #fff;
    background-color: #333;
}
#column .compare-table thead th + th + th {
    background-color: #7d7d7d;
}
#column .compare-table thead th.blank {
    width: 16rem;
    background-color: #f5f5f5;
}
/* 見出し列（状態／主な感覚／現れ方） */
#column .compare-table tbody th {
    font-weight: bold;
    text-align: center;
    background-color: #f5f5f5;
}

@media screen and (max-width: 830px) {
    #column .compare-table {
        margin: 2.5rem 0 3rem;
        border-radius: 1rem;
    }
    #column .compare-table th,
    #column .compare-table td {
        padding: 1.4rem 1.2rem;
        font-size: 1.3rem;
        line-height: 1.6;
    }
    #column .compare-table thead th {
        padding: 1.2rem .5rem;
        font-size: 1.4rem;
    }
    #column .compare-table thead th.blank {
        width: 7.5rem;
    }
    #column .compare-table tbody th {
        padding: 1.4rem .6rem;
    }
}

/* ---------- 段落間の余白 ---------- */
/* 原稿の段落区切りを保つため、連続する p の間に1行分弱の空きを入れる */
#column.muscle-fatigue-column p + p {
    margin-top: 1.2em;
}
#column.muscle-fatigue-column p + p.m-top20 {
    margin-top: 20px;
}
#column.muscle-fatigue-column .reference-link p + p {
    margin-top: 5px;   /* 参考文献同士は既存どおり詰める */
}

/* ---------- 参考文献リンク ---------- */
/* 本文直下に置くため上を少し詰め、次のブロックとの間隔を確保 */
#column .block-detail-list-item .reference-link {
    padding-top: 2rem;
}
/* 食事（栄養素の表）の直後に来る参考文献は表との間隔を取る */
#column .info-table + .reference-link {
    padding-top: 2.5rem;
}

.block-detail-list-item > dl > dt h3 span{
    font-size: .7em;
    margin: 1em auto 0;
    display: table;
    color: #333;
    padding: 1.2rem;
    border-bottom: 1px solid #c8c8c8;
    border-top: 1px solid #c8c8c8;
}
@media screen and (max-width: 830px) {
    .block-detail-list-item > dl > dt h3 span {
        font-size: .9em;
    }
}