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

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

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

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

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

/* ==========================================================================
   スマートナビ連載（携帯料金・ポイ活・料金改定・ガジェット）全社共通カスタムスタイル
   ========================================================================== */

/* 1. 連載セクション基本構造
   -------------------------------------------------------------------------- */
.series-section {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    color: #3f3e3b;
    line-height: 1.8;
    margin-bottom: 45px;
}

/* 2. 統一見出しデザイン
   -------------------------------------------------------------------------- */
/* 各章のメイン見出し（下線付き） */
.series-section h2 {
    color: #4a443c;
    border-bottom: 2px solid #d4af37;
    padding-bottom: 10px;
    margin-top: 45px;
    margin-bottom: 20px;
    font-size: 1.35em;
    font-weight: 700;
}

/* 各章内のサブ見出し */
.series-section h3 {
    color: #59564f;
    font-size: 1.15em;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* 3. インラインテキスト強調（数字は赤系・文字はそれ以外・マーカー継続）
   -------------------------------------------------------------------------- */
/* 汎用太字 */
.series-section .cell-bold {
    font-weight: 700;
}

/* 【重要変更】キャンペーン新料金・割引後の数字（王道の赤系ハイライト・太字） */
.series-section .cell-emphasize-bold {
    color: #d9381e; /* 鮮やかな赤 */
    background-color: #fff5f5; /* ごく薄いピンク背景で読みやすく */
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 【重要追加】キャンペーンの「期間・条件」の文字（赤より一歩引いた、上品で目立つ深みブラウン） */
.series-section .cell-blue-bold {
    color: #6b4a2b; /* 落ち着いた濃いチョコレートブラウン */
    background-color: #f7f3f0; /* 優しいアースベージュ背景 */
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

/* デメリット・高額基本料・注意点の強調（警告の赤系・太字） */
.series-section .cell-bold-red {
    color: #ba1a1a;
    background-color: #ffebeb;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
}

/* テーブルヘッダー等の注目テキスト（赤太字） */
.series-section .cell-emphasize {
    color: #e54d42;
    font-weight: 700;
}

/* 青テキスト太字（外部リンクや特殊指定用） */
.series-section .cell-emphasize-blue {
    color: #0066cc;
    font-weight: 700;
}

/* 【継続】黄色のグラデーションアンダーバー（蛍光ペン風マーカー線） */
.series-section .marker-yellow {
    background: linear-gradient(transparent 60%, #fff2b2 40%);
    font-weight: 700;
    padding: 0 2px;
}

/* 4. 注記・補足・グレー文字
   -------------------------------------------------------------------------- */
/* 表の下などの免責事項・小さな注記 */
.series-section .snl-small-text {
    font-size: 0.82em;
    color: #7c7971;
    margin-top: 12px;
    margin-bottom: 15px;
    line-height: 1.6;
}

/* テーブル内の単位や補足用の小さなグレー文字 */
.series-section .cell-small-gray {
    font-size: 0.85em;
    color: #8c8980;
    font-weight: normal;
}

/* 5. 汎用ブロック・枠囲み（ボックス・カード）
   -------------------------------------------------------------------------- */
/* サブ結果ボックス（リード文直後の概要や要約・金左線） */
.series-section .snl-sub-result-box {
    background-color: #f7f6f0;
    border-left: 4px solid #d4af37;
    padding: 18px 20px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
}

/* 注目・注意喚起・選び方の判断基準（薄グレー背景カード） */
.series-section .question-highlight {
    background-color: #faf9f6;
    border: 1px solid #e8e6e0;
    padding: 22px;
    border-radius: 8px;
    margin: 30px 0;
}
.series-section .question-highlight h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

/* 注意点・デメリット専用ボックス（薄赤背景） */
.series-section .snl-card.caution-card {
    background-color: #fffafa;
    border: 1px solid #fcdede;
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
}

/* メリット・ポイント専用ボックス（薄緑背景） */
.series-section .snl-card.criteria-card {
    background-color: #fafdfb;
    border: 1px solid #defceb;
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
}

/* 各公式キャリア等へのエビデンス・ソース参照ボックス */
.series-section .official-reference-box {
    border: 1px solid #e6e4dc;
    background-color: #fcfbfa;
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 8px;
    font-size: 0.95em;
}
.series-section .official-reference-box .reference-title {
    font-weight: 700;
    color: #8c8980;
    margin-bottom: 8px;
}
.series-section .official-reference-box a {
    color: #0066cc;
    text-decoration: underline;
}
.series-section .official-reference-box a:hover {
    text-decoration: none;
}

/* 6. リスト装飾（ul / ol）
   -------------------------------------------------------------------------- */
.series-section .snl-list {
    margin: 0 0 15px 0;
    padding-left: 22px;
}

.series-section .snl-list li {
    margin-bottom: 10px;
    list-style-type: disc;
}

/* 7. レスポンシブ比較テーブル（基本＆拡張セル）
   -------------------------------------------------------------------------- */
/* 横スクロール対応コンテナ */
.series-section .snl-table-container {
    overflow-x: auto;
    margin: 25px 0;
    -webkit-overflow-scrolling: touch;
}

/* 比較テーブル基本スタイル */
.series-section .snl-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    min-width: 550px;
}

/* セル内テキスト中央揃え用 */
.series-section .text-center th,
.series-section .text-center td {
    text-align: center;
}

/* テーブルヘッダー（上品なアースカラー） */
.series-section .snl-comparison-table th {
    background-color: #f2ede4;
    color: #59564f;
    padding: 14px 12px;
    border: 1px solid #dcd6cb;
    font-weight: 700;
}

/* テーブルデータセル */
.series-section .snl-comparison-table td {
    padding: 14px 12px;
    border: 1px solid #dcd6cb;
    background-color: #ffffff;
}

/* 縞模様（1行おきの背景色変更） */
.series-section .stripe-row-a td {
    background-color: #faf9f5;
}

/* テーブル内の特定セルを赤系（薄ピンク背景＆赤太字）で目立たせるクラス */
.series-section .snl-comparison-table td.cell-highlight-red {
    background-color: #fff0f0 !important;
    color: #d9381e;
    font-weight: 700;
}

/* テーブル内の特定セルを緑系（薄緑背景＆緑太字）で目立たせるクラス */
.series-section .snl-comparison-table td.cell-highlight-green {
    background-color: #eafaf1 !important;
    color: #00885a;
    font-weight: 700;
}

/* 8. 記事最下部：まとめ・アフィリエイトレイアウト
   -------------------------------------------------------------------------- */
/* 最終結論・大枠まとめセクション */
.series-section .summary-section {
    margin-top: 50px;
    border-top: 2px solid #e8e6e0;
    padding-top: 35px;
}

.series-section .snl-big-result-box {
    background-color: #faf9f5;
    border: 1px solid #ebdcc5;
    padding: 25px;
    border-radius: 12px;
}

/* 最終判断・推奨ルート解説用ボックス（金茶左線デザイン） */
.series-section .summary-recommend-box {
    background-color: #f6f5f0;
    border-left: 4px solid #d4af37;
    padding: 20px 22px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
}

/* バナー・アフィリエイト用 Flexbox 横並び均等配置 */
.series-section .affiliate-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 30px 0 10px 0;
    width: 100%;
}

.series-section .affiliate-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

/* スマホ閲覧時（画面幅600px以下）の縦並び自動シフト */
@media screen and (max-width: 600px) {
    .series-section .affiliate-flex-container {
        flex-direction: column;
        gap: 20px;
    }
}

/* ==========================================================================
   9. 「本体にデータを置かない」という新常識 枠デザイン（破線型）
   ========================================================================== */
.series-section .concept-callout-box {
    background-color: #fcfbfa;
    border: 2px dashed #d4af37;
    padding: 25px;
    margin: 30px 0;
    border-radius: 10px;
    position: relative;
}

.series-section .concept-callout-box .callout-title {
    font-size: 1.15em;
    font-weight: 700;
    color: #4a443c;
    margin-top: 0;
    margin-bottom: 12px;
}

/* ==========================================================================
   10. 「無制限回線が最後のピース」 枠デザイン（実線角型）
   ========================================================================== */
.series-section .key-piece-box {
    background-color: #faf9f5;
    border: 1px solid #59564f;
    padding: 22px 25px;
    margin: 30px 0;
    border-radius: 6px;
}

.series-section .key-piece-box .piece-title {
    font-size: 1.15em;
    font-weight: 700;
    color: #4a443c;
    margin-top: 0;
    margin-bottom: 10px;
    border-left: 3px solid #d4af37;
    padding-left: 10px;
}

/* ==========================================================================
   11. 「ポイントの出口戦略」 枠デザイン（金茶実線型）
   ========================================================================== */
.series-section .exit-strategy-box {
    background-color: #fdfcf7;
    border: 1px solid #d4af37;
    padding: 22px 25px;
    margin: 30px 0;
    border-radius: 8px;
}

.series-section .exit-strategy-box .strategy-title {
    font-size: 1.15em;
    font-weight: 700;
    color: #4a443c;
    margin-top: 0;
    margin-bottom: 12px;
}

/* ==========================================================================
   12. 「あなたが選ぶべきサービスはどれ？」 枠デザイン（下線ナビ型）
   ========================================================================== */
.series-section .target-navigation-box {
    background-color: #fdfdfa;
    border: 1px solid #59564f;
    padding: 25px;
    margin: 30px 0;
    border-radius: 8px;
}

.series-section .target-navigation-box .navigation-title {
    font-size: 1.15em;
    font-weight: 700;
    color: #4a443c;
    margin-top: 0;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 2px solid #d4af37;
    display: inline-block;
}

/* ==========================================================================
   13. 「核心・ダイレクト結論」 枠デザイン（3px太実線型）
   ========================================================================== */
.series-section .direct-conclusion-box {
    background-color: #fdfbfa;
    border: 3px solid #d4af37;
    padding: 25px;
    margin: 35px 0;
    border-radius: 12px;
}

.series-section .direct-conclusion-box .conclusion-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #d4af37;
    margin-top: 0;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   14. 「基本的な設定手順」 タイムライン・ステップ装飾（olリスト型）
   ========================================================================== */
.series-section .step-timeline-flow {
    margin: 30px 0;
    padding: 0;
    list-style: none;
    position: relative;
}
.series-section .step-timeline-flow::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 18px;
    width: 2px;
    bottom: 20px;
    background-color: #ebdcc5;
}
.series-section .step-timeline-flow li {
    position: relative;
    margin-bottom: 30px;
    padding-left: 50px;
}
.series-section .step-timeline-flow li:last-child {
    margin-bottom: 0;
}
.series-section .step-timeline-flow {
    counter-reset: step-counter;
}
.series-section .step-timeline-flow li::before {
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    top: 2px;
    left: 2px;
    width: 32px;
    height: 32px;
    background-color: #d4af37;
    color: #ffffff;
    font-size: 0.95em;
    font-weight: 700;
    text-align: center;
    line-height: 32px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    z-index: 2;
}
.series-section .step-timeline-flow .step-block-title {
    font-size: 1.1em;
    font-weight: 700;
    color: #4a443c;
    margin-bottom: 8px;
    display: block;
}
.series-section .step-timeline-flow p {
    margin: 0;
    font-size: 0.95em;
    color: #59564f;
}

/* ==========================================================================
   15. 「要点・チェックリスト」 枠デザイン（1px金茶細実線型）
   ========================================================================== */
.series-section .point-checklist-box {
    background-color: #faf9f6;
    border: 1px solid #e1dbcf;
    border-top: 3px solid #d4af37;
    padding: 22px 25px;
    margin: 25px 0;
    border-radius: 0 0 8px 8px;
}

.series-section .point-checklist-box .checklist-title {
    font-size: 1.1em;
    font-weight: 700;
    color: #4a443c;
    margin-top: 0;
    margin-bottom: 12px;
}

/* ==========================================================================
   16. 「おすすめな人・しない人」 対比リストデザイン
   ========================================================================== */
.series-section .pro-con-comparison-list {
    margin: 25px 0;
    padding: 0;
    list-style: none;
}
.series-section .pro-con-comparison-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 0.95em;
}
.series-section .pro-con-comparison-list li:last-child {
    margin-bottom: 0;
}
.series-section .pro-con-comparison-list.recommend-yes li::before {
    content: '✔';
    position: absolute;
    left: 4px;
    color: #00885a;
    font-weight: 700;
    font-size: 1.1em;
}
.series-section .pro-con-comparison-list.recommend-no li::before {
    content: '×';
    position: absolute;
    left: 4px;
    color: #d9381e;
    font-weight: 700;
    font-size: 1.2em;
    top: -1px;
}