@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* --- 比較表デザイン（リニューアル版） --- */

/* テーブル全体の枠と角丸設定 */
.custom-comparison-table table {
    border-collapse: separate; /* 角丸を効かせるために必要 */
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd; /* 外枠の色 */
    border-radius: 8px; /* 角の丸み */
    overflow: hidden; /* 角丸からはみ出た背景を切る */
    margin-bottom: 2em;
}

/* ヘッダー（項目行）のデザイン */
.custom-comparison-table th {
    background-color: #eef4f9; /* ヘッダー背景色（落ち着いた青グレー） */
    color: #333;
    font-weight: bold;
    padding: 15px 10px; /* 上下の余白を広げる */
    text-align: center; /* ヘッダー文字は中央寄せ */
    border-bottom: 2px solid #fff; /* ヘッダーの下に白い線を入れて区切りを明確に */
    border-right: 1px solid #fff; /* 縦の区切り線 */
}

/* データセル（中身）のデザイン */
.custom-comparison-table td {
    padding: 12px 10px; /* 余白を広げて読みやすく */
    border-bottom: 1px solid #eee; /* 薄い区切り線 */
    border-right: 1px solid #eee; /* 薄い縦線 */
    text-align: center; /* 内容は中央寄せ */
    vertical-align: middle; /* 上下中央配置 */
}

/* 1列目（項目名）だけの特別ルール */
.custom-comparison-table td:first-child {
    text-align: left; /* 項目名は左寄せ */
    font-weight: bold; /* 少し太字に */
    background-color: #fafafa; /* ほんの少しグレーにして見出し感を出す */
    color: #555;
}

/* 最後の列の右線を消す */
.custom-comparison-table th:last-child,
.custom-comparison-table td:last-child {
    border-right: none;
}

/* ストライプ（1行おきの色変え） */
.custom-comparison-table tbody tr:nth-child(even) td {
    background-color: #fff;
}
.custom-comparison-table tbody tr:nth-child(odd) td {
    background-color: #f9fcff; /* 非常に薄い青みを入れる */
}
/* 1列目はストライプの影響を受けず背景固定したい場合（お好みで削除可） */
.custom-comparison-table tbody tr:nth-child(odd) td:first-child {
    background-color: #fafafa;
}

/* ホバーエフェクト（マウスを乗せた行を目立たせる） */
.custom-comparison-table tbody tr:hover td {
    background-color: #fffde7; /* 薄い黄色 */
    transition: background-color 0.2s;
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .custom-comparison-table th, 
    .custom-comparison-table td {
        padding: 8px 5px; /* スマホでは余白を少し詰める */
        font-size: 14px; /* 文字サイズ調整 */
    }
}