@charset "utf-8";
/* CSS Document */
/* 特集ページ用のボックスデザイン */
.feature-box {
    margin: 2rem 0;
    padding: 30px;
    background-color: #ffffff; /* 白背景 */
    border: 1px solid #eee;    /* 繊細な細い線 */
    border-radius: 8px;        /* 緩やかな角丸 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 非常に薄い影で浮遊感を出す */
    transition: transform 0.3s ease;
}

/* マウスホップした時の動き（お好みで） */
.feature-box:hover {
    transform: translateY(-3px);
}

.feature-title {
    display: flex;
    align-items: center;
    gap: 12px;           /* アイコンと文字の間隔 */
    margin-bottom: 15px;
    font-size: 22px;     /* 25pxより少し抑えた方が洗練されて見えます */
    font-weight: 600;
    color: #333;         /* 真っ黒すぎないグレー */
    letter-spacing: 0.05em; /* 文字間隔を少し広げて上品に */
    border-bottom: 1px solid #333; /* 下線でH2としての重みを出す */
    padding-bottom: 10px;
}

.feature-title img {
    object-fit: contain;
}

.feature-content {
    line-height: 1.8;    /* 行間を広めにとって読みやすく */
    color: #666;         /* テキストは少し薄くしてタイトルを際立たせる */
    font-size: 15px;
}
/* リスト全体のコンテナ */
.preparation-list {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9; /* ほんのりグレーで区切る */
    border-radius: 6px;
}

/* 「用意すべき事」のタイトル */
.list-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* タイトルの前に細いアクセントラインを入れる例 */
.list-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: #333; /* アクセントカラー（お好みで変えてください） */
    margin-right: 10px;
}

/* 箇条書き本体 */
.preparation-list ul {
    list-style: none; /* デフォルトの・を消す */
    padding: 0;
    margin: 0;
}

.preparation-list li {
    margin-bottom: 15px;
    padding-left: 1.2em;
    position: relative;
}

/* カスタムの「・」デザイン */
.preparation-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #333;
}

/* 項目名（太字） */
.item-name {
    display: block; /* 改行させる */
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-bottom: 4px;
}

/* 説明文 */
.item-description {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}
/* 親要素のクラスを付けることで、既存のh3より優先度が高くなります */
.preparation-list h3.list-title {
    display: block !important;    /* 万が一非表示にされていた場合 */
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    padding: 0 !important;        /* 既存のパディングをリセット */
    border: none !important;       /* 既存の下線を消す場合 */
    background: none !important;   /* 既存の背景色を消す場合 */
    
    /* デザインの再定義 */
    display: flex;
    align-items: center;
}

/* 縦線のアクセントも強制表示 */
.preparation-list h3.list-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 18px !important;
    background-color: #333 !important;
    margin-right: 10px !important;
}
/* 箇条書きの中のテキスト（説明文）を調整 */
.preparation-list .item-description {
    /* 強制的にサイズを指定 */
    font-size: 16px !important; /* 小さすぎる場合は16px、標準なら15pxがおすすめ */
    color: #444 !important;    /* 少し濃いめのグレーにして視認性をアップ */
    line-height: 1.7 !important; /* 行間を広げて「詰まった感」を解消 */
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

/* 項目名（太字部分）も念のため再調整 */
.preparation-list .item-name {
    font-size: 18px !important; /* 本文より少し大きくするとバランスが良いです */
    font-weight: bold !important;
    color: #222 !important;
    display: block !important;
}
/* 特集ボックス内のメイン説明文を調整 */
.feature-box .feature-content p {
    font-size: 16px !important;    /* 読みやすい標準サイズ（17pxでもお洒落です） */
    line-height: 1.8 !important;   /* 行間を広げて洗練された印象に */
    color: #444 !important;        /* 真っ黒すぎない落ち着いた色 */
    margin: 0 !important;          /* 既存の余白をリセット */
    padding-top: 10px !important;  /* タイトル（H2）との間隔を調整 */
    display: block !important;     /* 万が一消えていた場合の強制表示 */
}

/* テーブル内のリストの「・」と余白を強制的にリセット */
.date2 ul {
    list-style: none !important; /* 点を消す */
    padding: 0 !important;      /* 左の余白を消す */
    margin: 0 !important;       /* 外側の余白を消す */
}

.date2 li {
    list-style-type: none !important; /* 念のためli側でも消す */
    padding-left: 0 !important;       /* 前に設定したliの余白を打ち消す */
    margin: 0 !important;
}

/* 前回の ::before (・) がテーブル内にも出ている場合、それを非表示にする */
.date2 li::before {
    content: none !important;
}

/* リンクをボタンのように洗練させる（お好みで） */
.date2 .shop a {
    text-decoration: none;
    color: #0066c0; /* Amazonっぽい青 */
    font-weight: bold;
}

.date2 .shop a:hover {
    text-decoration: underline;
}