@charset "utf-8";

/* ============================================================
   pr_news-article.css  v2.1  2026-05
   NEWS / FEATURE 記事本文エリア専用スタイル
   適用ページ: /blog/ 系 記事詳細
   スコープ: .fr_page-blog-detail .fr_blog-detail-mainArea
   クラス接頭辞: .na- (news-article)
   ============================================================

   コンポーネント一覧:
     h2               ... セクション見出し（CMS h1 直下の最上位見出し）
     .na-badge        ... h2 内の丸バッジ（番号・ラベル等）
     .na-lead         ... KV下のリード小テキスト
     .na-desc         ... h2直下キャッチコピー
     .na-toc          ... ページ内目次（1行1項目のシンプルリスト）
       .na-toc-title  ... 目次見出し（"INDEX" 等）
                          <a> に js_fr_page-link を付与でスムーススクロール動作
     .na-section-label... サブセクション見出し（14px・左ボーダー付き）
     .na-quote-block  ... 引用・補足情報ブロック（レビュー・コメント等に利用）
       .na-quote-row  ... ブロック内横並び行
       .na-quote-name ... 発言者名・項目名
       .na-quote-stars... 評価記号（星など）
       .na-quote-count... 件数・補足数値
       .na-quote-gauge... ゲージ画像横並びラッパー（3枚均等分割）
     .na-item-label   ... 記事内アイテム小見出し（"NO.1"、"STEP 1"等）
     .na-product-btn  ... 商品グリッドセル内CTAエリア（アローなし）
     .na-ghost-btn    ... アウトラインボタン
     .na-cta-group    ... ゴーストボタンのグループラッパー
       .na-2col       ... PCで2列横並び
     .na-cta-primary  ... フルwidthメインCTAボタン
     .na-img-border   ... 画像に薄いボーダーを付与（カラーバリエーション等に利用）
     .na-img-75       ... PC で画像幅を75%に制限（SP は100%）
     .na-img-50       ... PC で画像幅を50%に制限（SP は100%）
     .na-img-33       ... PC で画像幅を33%に制限（SP は100%）

   アローのルール:
     .na-product-btn .na-ghost-btn → アローなし（画像直下でコンテキスト明確）
     .na-cta-group    .na-ghost-btn → CSS ::after で › を自動付与
     .na-cta-primary               → CSS ::after で › を自動付与
     HTMLにアロー文字を手書きしない

   フォントサイズルール:
     見出し系要素は 14px 未満を使用しない
   ============================================================ */


/* =====================
   BOX-SIZING リセット
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea *,
.fr_page-blog-detail .fr_blog-detail-mainArea *::before,
.fr_page-blog-detail .fr_blog-detail-mainArea *::after {
    box-sizing: border-box;
}

/* img をブロック化 + コンテナからはみ出させない */
.fr_page-blog-detail .fr_blog-detail-mainArea img.alignnone {
    display: block;
    max-width: 100%;
}

/* 記事エリアのオーバーフローを封じてサイドバーのカラム落ちを防止 */
.fr_page-blog-detail .fr_blog-detail-mainArea {
    overflow: hidden;
}

/* タブ flex-item の min-width: auto を解除（文字列幅がコンテナを押し広げるのを防ぐ） */
.fr_page-blog-detail .fr_blog-detail-mainArea .nav-tabs > li {
    float: none;
    flex: 1;
    margin: 0;
    min-width: 0;
    overflow: hidden;
}

/* 商品グリッド .row を flex 化して等高カラムを実現 */
.fr_page-blog-detail .fr_blog-detail-mainArea .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: -6px;  /* col の padding-left を打ち消して外側のツラをフラッシュに */
    margin-right: -6px; /* col の padding-right を打ち消して外側のツラをフラッシュに */
}
/* 各カラムを縦 flex にしてボタンを下揃え可能にする */
.fr_page-blog-detail .fr_blog-detail-mainArea .col-sm-6,
.fr_page-blog-detail .fr_blog-detail-mainArea .col-xs-6 {
    display: flex;
    flex-direction: column;
    padding-left: 6px;
    padding-right: 6px;
}


/* =====================
   h2: シリーズ見出し
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1.4;
    margin: 36px 0 10px;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
}

/* h3: 記事内小見出し（一般用の予備） */
.fr_page-blog-detail .fr_blog-detail-mainArea h3 {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.03em;
    margin: 20px 0 6px;
    padding: 0;
    border: none;
}


/* =====================
   .na-badge
   h2 内の丸バッジ（番号・ラベル等）
   使い方: <h2><span class="na-badge">1</span>見出しテキスト</h2>
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #3b0163;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    letter-spacing: 0;
    line-height: 1;
}


/* =====================
   .na-lead
   KV直下のリード小テキスト
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-lead {
    text-align: center;
    font-size: 13px;
    color: #999;
    line-height: 1.8;
    margin: 0 0 20px;
}


/* =====================
   .na-desc
   h2 直下キャッチコピー
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    margin: -2px 0 16px;
}


/* =====================
   Bootstrap タブ 上書き
   等分割 / 背景白 / マージンなし / ブランドカラーボーダー
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .nav-tabs {
    display: flex;
    border: 1px solid #3b0163;
    border-bottom: 2px solid #3b0163;
    margin-bottom: 0;
    padding: 0;
}

/* .nav-tabs > li は冒頭のリセットブロックで定義済み（重複削除） */

/* タブ間セパレーター（2番目以降の左ボーダー） */
.fr_page-blog-detail .fr_blog-detail-mainArea .nav-tabs > li + li {
    border-left: 1px solid #3b0163;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .nav-tabs > li > a {
    display: block;
    text-align: center;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 10px 8px;
    color: #3b0163;
    background: #fff;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
    white-space: nowrap;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .nav-tabs > li > a:hover {
    background: #f5f6f8;
    text-decoration: none;
    color: #3b0163;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .nav-tabs > li.active > a,
.fr_page-blog-detail .fr_blog-detail-mainArea .nav-tabs > li.active > a:hover,
.fr_page-blog-detail .fr_blog-detail-mainArea .nav-tabs > li.active > a:focus {
    background: #3b0163;
    color: #fff;
    text-decoration: none;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .tab-content {
    padding-top: 28px;
}


/* =====================
   .na-toc
   ページ内目次（タブ冒頭などに置くシンプルなリンクリスト）

   使い方:
     <div class="na-toc">
       <p class="na-toc-title">INDEX</p>
       <ul>
         <li><a href="#section-id" class="js_fr_page-link">セクション名</a></li>
         <li><a href="#section-id" class="js_fr_page-link">No.1: ランキング記事ならこの形式</a></li>
       </ul>
     </div>
   js_fr_page-link クラスで既存のスムーススクロール（pr_common.js）が動作する
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-toc {
    margin-bottom: 28px;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    background: #f5f6f8;
}

/* 見出し「目次」 */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-toc-title {
    font-size: 14px;
    font-weight: bold;
    color: #444;
    letter-spacing: 0.05em;
    margin: 0 0 4px;
}

/* リスト共通リセット */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-toc ol,
.fr_page-blog-detail .fr_blog-detail-mainArea .na-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 各アイテム：「・」を ::before で付与 */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-toc li {
    font-size: 14px;
    line-height: 2;
    padding-left: 1em;
    text-indent: -1em;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-toc li::before {
    content: "・";
    color: #aaa;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-toc a {
    color: #3b0163;
    text-decoration: none;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-toc a:hover {
    text-decoration: underline;
}


/* =====================
   区切り線
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea hr {
    border: none;
    border-top: 1px solid #e2d9ed;
    margin: 32px 0;
}


/* =====================
   .na-section-label
   サブセクション見出し（「カラーバリエーション」「人気カラーランキング」等）
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-section-label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #444;
    letter-spacing: 0.05em;
    margin: 24px 0 8px;
    padding: 5px 0 5px 12px;
    border-left: 3px solid #888;
}


/* =====================
   .na-quote-block
   引用・補足情報ブロック（レビュー・コメント・注釈等に利用）
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-block {
    background: #f5f6f8;
    padding: 12px 16px 10px;
    margin: 10px 0;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-block + .na-quote-block {
    margin-top: 0;
}


/* =====================
   .na-quote-gauge
   ゲージ画像（サイズ感・ストレッチ感・厚さ）横並びラッパー
   PC・SP ともに3枚均等配置
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-gauge {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-gauge img.alignnone {
    flex: 1 1 0;
    min-width: 0;
    max-width: 33.333%; /* 1枚のみの場合も1/3幅に制限・左寄せ */
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 8px;
    font-size: 14px;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-name {
    font-weight: bold;
    color: #333;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-stars {
    color: #3b0163;
    letter-spacing: 1px;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-count {
    color: #999;
    font-size: 13px;
}


/* =====================
   .na-item-label
   記事内アイテム小見出し（"NO.1"、"STEP 1"等）
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-item-label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #222;
    letter-spacing: 0.05em;
    margin: 24px 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
}


/* =====================
   .na-product-btn
   商品グリッドセル内CTAエリア（アローなし）
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-product-btn {
    text-align: center;
    margin-top: auto; /* カラム等高時にボタンを下揃えにする */
    padding-top: 8px;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-product-btn .na-ghost-btn {
    width: 100%; /* 画像幅に揃える（max-width / margin: auto を使わない） */
    padding: 7px 6px;
    font-size: 13px;
}

/* na-product-btn 内は ::after アロー非表示 */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-product-btn .na-ghost-btn::after {
    content: none;
}


/* =====================
   .na-ghost-btn
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-ghost-btn {
    display: block;
    text-align: center;
    padding: 10px 14px;
    border: 1px solid #3b0163;
    color: #3b0163;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    transition: background 0.3s, color 0.3s;
    line-height: 1.5;
    background: #fff;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-ghost-btn:hover {
    background: #3b0163;
    color: #fff !important;
    text-decoration: none;
}

/* .na-cta-group 直下には › を自動付与 */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-group .na-ghost-btn::after {
    content: '\00a0\203a';
    font-size: 16px;
    line-height: 1;
    vertical-align: -1px;
}


/* =====================
   .na-cta-group + .na-2col
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-group {
    margin: 10px 0 8px;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-group .na-ghost-btn + .na-ghost-btn {
    margin-top: 8px;
}


/* =====================
   .na-cta-primary
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-primary {
    display: block;
    text-align: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #3b0163;
    color: #3b0163;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-decoration: none !important;
    transition: background 0.35s, color 0.35s;
    margin: 8px 0 32px;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-primary::after {
    content: '\00a0\203a';
    font-size: 18px;
    line-height: 1;
    vertical-align: -1px;
}

.fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-primary:hover {
    background: #3b0163;
    color: #fff !important;
    text-decoration: none;
}


/* =====================
   .na-img-border
   画像に薄いボーダーを付与（カラーバリエーション・白背景画像の輪郭出し等に利用）
   ===================== */
.fr_page-blog-detail .fr_blog-detail-mainArea img.alignnone.na-img-border {
    border: 1px solid #eee;
}


/* =====================
   .na-img-75 / .na-img-50 / .na-img-33
   img.alignnone に追加して PC での幅を制限する
   SP (〜767px) は幅制限を解除して常に100%表示
   使い方: <img class="alignnone na-img-50" src="..." alt="..." />
   ===================== */


/* =====================
   PC (768px+)
   ===================== */
@media (min-width: 768px) {

    .fr_page-blog-detail .fr_blog-detail-mainArea img.alignnone.na-img-75 {
        width: 75% !important;
    }

    .fr_page-blog-detail .fr_blog-detail-mainArea img.alignnone.na-img-50 {
        width: 50% !important;
    }

    .fr_page-blog-detail .fr_blog-detail-mainArea img.alignnone.na-img-33 {
        width: 33.333% !important;
    }

    .fr_page-blog-detail .fr_blog-detail-mainArea h2 {
        font-size: 20px;
        margin: 40px 0 12px;
    }

    /* .na-2col: PC で2列横並び */
    .fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-group.na-2col {
        display: flex;
        gap: 10px;
    }

    .fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-group.na-2col .na-ghost-btn {
        flex: 1;
    }

    .fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-group.na-2col .na-ghost-btn + .na-ghost-btn {
        margin-top: 0;
    }
}


/* =====================
   SP (〜767px)
   ===================== */
@media (max-width: 767px) {

    .fr_page-blog-detail .fr_blog-detail-mainArea h2 {
        font-size: 16px;
        gap: 10px;
        margin: 28px 0 8px;
    }

    .fr_page-blog-detail .fr_blog-detail-mainArea .na-badge {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    /* SP 2カラムで商品ボタンが狭くなる分を詰める */
    .fr_page-blog-detail .fr_blog-detail-mainArea .na-product-btn .na-ghost-btn {
        padding: 6px 4px;
        font-size: 13px;
    }

    .fr_page-blog-detail .fr_blog-detail-mainArea .na-quote-block {
        padding: 12px 12px 8px;
    }

    .fr_page-blog-detail .fr_blog-detail-mainArea .na-cta-primary {
        padding: 12px 12px;
    }
}