@charset "UTF-8";
/* ============================================================
   Security Choice / SWELLヘッダー リッチ化スキン v2
   「信頼・堅実・プロ」+ メガメニュー + SPドロワー改善
   追加CSSに貼るだけ（header.phpは触らない）
   テーマ実カラー(--color_main:#1790a2)に準拠
   ============================================================ */

:root {
    --sc-navy:        #112a46;
    --sc-navy-deep:   #0c1f34;
    --sc-teal:        #1790a2; /* テーマの--color_mainに合わせる */
    --sc-teal-dark:   #116c7a;
    --sc-orange:      #ff7a00;
    --sc-orange-dark: #e64a00;
    --sc-line:        #e2e8f0;
    --sc-muted:       #64748b;
}


.c-headLogo .c-headLogo__link {
    display: flex;
    text-decoration: none;
    align-items: center;
}

/* ============================================================
   1. 上部バー（企業帯）
============================================================ */
.l-header__bar {
    background: var(--sc-teal) !important;
    color: #fff !important;
}
.l-header__barInner {
    align-items: center;
    justify-content: space-between !important;
    min-height: 34px;
}
.l-header__bar .c-catchphrase {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    width: auto !important;
    opacity: 0.95;
}
.l-header__barInner::after {
    content: "全国対応  ｜  見積り無料  ｜  200機種以上を比較";
    color: rgba(255,255,255,0.82);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ============================================================
   2. ヘッダー本体
============================================================ */
.l-header__inner {
    box-shadow: none !important;
}
.l-header__logo .c-headLogo__img {
    height: auto;
    max-height: 44px;
    width: auto;
}
.l-fixHeader__logo .c-headLogo__img { max-height: 42px; }

/* ============================================================
   3. グローバルナビ ── 2段（英字＋和文）

   ※2026-09-18: メガメニューのセレクタを .menu-item-267 から
     .sc-nav-mega へ変更（20箇所）。menu-item-<ID> はメニュー項目を
     作り直すと変わり、指定が全部外れる（.menu-item-207 で実際に発生）。
     外観 > メニュー > 表示オプション > 「CSSクラス」を有効にして、
     「記事一覧」項目の CSS class 欄に sc-nav-mega を入れておくこと。
============================================================ */
.c-gnav > .menu-item > a {
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px;
    position: relative;
}
.c-gnav > .menu-item > a .ttl {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--sc-navy) !important;
    letter-spacing: 0.02em;
    line-height: 1.3 !important;
}
/* 下線ホバー */
.c-gnav > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 16px !important;
    right: 16px !important;
    bottom: 18px !important;
    top: auto !important;
    height: 2px !important;
    width: auto !important;
    background: var(--sc-teal) !important;
    transform: scaleX(0) !important;
    transform-origin: left center;
    transition: transform 0.28s ease !important;
}
.c-gnav > .menu-item:hover > a::after,
.c-gnav > .menu-item.-current > a::after {
    transform: scaleX(1) !important;
}
.c-gnav > .menu-item > a:hover .ttl { color: var(--sc-teal) !important; }

/* 英字サブラベル（和文と重複しない別単語） */
.c-gnav > .menu-item > a .ttl::before {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--sc-teal);
    opacity: 0.85;
    line-height: 1;
    margin-bottom: 2px;
}
.c-gnav > .menu-item-object-products     > a .ttl::before { content: "FIREWALL"; }
.c-gnav > .menu-item-object-wifi-ap      > a .ttl::before { content: "WIRELESS"; }
.c-gnav > .menu-item-object-nas-storage  > a .ttl::before { content: "STORAGE"; }
.c-gnav > .menu-item-object-vpn-router   > a .ttl::before { content: "NETWORK"; }
.c-gnav > .sc-nav-mega > a .ttl::before { content: "MEDIA"; } /* 記事一覧 */

/* ============================================================
   4. メガメニュー ── 「記事一覧」のサブメニューを横3カラムパネルに
   対象: .sc-nav-mega（記事一覧）配下の第1階層 sub-menu

   ★重要：SWELL設定「サブメニューをアコーディオン化する」がON前提。
   ON環境ではPCの子カテゴリ(sub-menu .sub-menu)が height:0 で閉じるため、
   PC幅(960px以上)だけ強制展開＋トグルボタン非表示で打ち消す。
============================================================ */
@media (min-width: 960px) {
    /* --- アコーディオンの打ち消し（PCのみ常時展開に戻す） --- */
    /* SWELLが閉じている第2階層を強制的に開く */
    .c-gnav > .sc-nav-mega .sub-menu .sub-menu {
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
        visibility: visible !important;
        transition: none !important;
    }
    /* PCではトグルボタン（開閉矢印）を隠す（ホバーで全部見えるので不要） */
    .c-gnav > .sc-nav-mega .c-submenuToggleBtn {
        display: none !important;
    }

    /* 親liは relative を維持（static にすると当たり判定が崩れる）。
       パネルは親li基準で中央配置し、ホバー範囲を親li自身に限定する。 */
    .c-gnav > .sc-nav-mega {
        position: relative;
    }
    /* ホバー時にパネルとトリガーの間に隙間があると閉じるため、
       親aの下に不可視のブリッジを作らず、パネルの上マージンを詰める */
    .c-gnav > .sc-nav-mega > .sub-menu {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0;
        /* 記事一覧は右寄りにあるため、パネルを右端基準で配置してはみ出し防止 */
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        top: 100% !important;
        margin-top: 0 !important;
        width: min(920px, 94vw) !important;
        max-width: 94vw !important;
        padding: 8px !important;
        background: #fff !important;
        border: 1px solid var(--sc-line) !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 32px rgba(17,42,70,0.12) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.22s ease, visibility 0.22s ease !important;
    }
    /* ★開くのは「記事一覧のli自身」にホバーした時だけに限定 */
    .c-gnav > .sc-nav-mega:hover > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    /* トリガーとパネルの間の隙間を埋めて途切れを防ぐ不可視ブリッジ */
    .c-gnav > .sc-nav-mega::after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        height: 10px;
        display: block;
    }
    /* 第1階層の各項目＝1カラム */
    .c-gnav > .sc-nav-mega > .sub-menu > .menu-item {
        flex: 1 1 0;
        position: static !important;
        padding: 12px 14px;
        border-right: 1px solid var(--sc-line);
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    .c-gnav > .sc-nav-mega > .sub-menu > .menu-item:last-child {
        border-right: none;
    }
    /* カラム見出し（製品選び等） */
    .c-gnav > .sc-nav-mega > .sub-menu > .menu-item > a {
        padding: 0 0 8px !important;
        margin-bottom: 6px;
        border-bottom: 2px solid var(--sc-line);
        position: relative;
    }
    .c-gnav > .sc-nav-mega > .sub-menu > .menu-item > a .ttl {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: var(--sc-navy) !important;
        left: 0 !important;
    }
    .c-gnav > .sc-nav-mega > .sub-menu > .menu-item > a::before {
        content: "" !important; /* 標準の「>」アイコンを消す */
        display: none !important;
    }
    .c-gnav > .sc-nav-mega > .sub-menu > .menu-item > a::after {
        content: "" !important;
        position: absolute;
        left: 0; bottom: -2px;
        width: 32px; height: 2px;
        background: var(--sc-teal);
        display: block !important;
        transform: none !important;
    }
    /* 第2階層＝カラム内リンク（常時表示・静的に展開） */
    .c-gnav > .sc-nav-mega > .sub-menu .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        box-shadow: none !important;
        background: transparent !important;
        transform: none !important;
        display: block !important;
        height: auto !important;
    }
    .c-gnav > .sc-nav-mega > .sub-menu .sub-menu::before {
        display: none !important;
    }
    .c-gnav > .sc-nav-mega > .sub-menu .sub-menu > .menu-item > a {
        padding: 7px 0 7px 16px !important;
        border-bottom: none !important;
    }
    .c-gnav > .sc-nav-mega > .sub-menu .sub-menu > .menu-item > a .ttl {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #475569 !important;
    }
    .c-gnav > .sc-nav-mega > .sub-menu .sub-menu > .menu-item > a::before {
        content: "\e921" !important;
        font-family: icomoon !important; /* ← これが無いと□に化ける */
        left: 0 !important;
        color: #a0aec0 !important;
        display: inline-block !important;
    }
    .c-gnav > .sc-nav-mega > .sub-menu .sub-menu > .menu-item > a:hover .ttl {
        color: var(--sc-teal) !important;
        left: 2px !important;
    }
    /* 記事一覧のホバー下線はメガメニューがあるので消す */
    .c-gnav > .sc-nav-mega > a::after { bottom: 18px !important; }
}

/* ============================================================
   5. 「無料診断」ナビ → オレンジCTAボタン化＋文言短縮

   ※2026-09-18: セレクタを .menu-item-207 から .sc-nav-cta へ変更。
     メニュー項目を作り直すと menu-item-<ID> が変わり、ここの12箇所が
     全部外れてボタンがただのリンクに戻る（実際に発生した）。
     外観 > メニュー > 表示オプション > 「CSSクラス」を有効にして、
     該当項目の CSS class 欄に sc-nav-cta を入れておくこと。
============================================================ */
.c-gnav > .sc-nav-cta > a {
    background: linear-gradient(135deg, var(--sc-orange) 0%, var(--sc-orange-dark) 100%) !important;
/*     border-radius: 8px; */
    margin: auto 4px auto 12px;
    padding: 10px 22px !important;
    box-shadow: 0 4px 12px rgba(230,74,0,0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    align-self: center;
}
.c-gnav > .sc-nav-cta > a .ttl {
    font-size: 0 !important; /* 元の長い文言を隠す */
    line-height: 1.3 !important;
}
.c-gnav > .sc-nav-cta > a .ttl::before {
    content: "ネットワーク・セキュリティ" !important;
    font-size: 9.5px !important;
    color: rgba(255,255,255,0.9) !important;
    text-align: center;
}
.c-gnav > .sc-nav-cta > a .ttl::after {
    content: "無料診断・相談";
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.c-gnav > .sc-nav-cta > a::after { display: none !important; }
.c-gnav > .sc-nav-cta:hover > a {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(230,74,0,0.32);
}

/* 追従ヘッダーにも同じCTA */
.l-fixHeader .c-gnav > .sc-nav-cta > a {
    background: linear-gradient(135deg, var(--sc-orange) 0%, var(--sc-orange-dark) 100%) !important;
/*     border-radius: 8px; */
    padding: 10px 22px !important;
}
.l-fixHeader .c-gnav > .sc-nav-cta > a .ttl { font-size: 0 !important; }
.l-fixHeader .c-gnav > .sc-nav-cta > a .ttl::before {
    content: "ネットワーク・セキュリティ" !important; font-size: 9.5px !important; color: rgba(255,255,255,0.9) !important;
}
.l-fixHeader .c-gnav > .sc-nav-cta > a .ttl::after {
    content: "無料診断・相談"; display: block; font-size: 15px; font-weight: 700; color: #fff;
}

/* ============================================================
   6. SP：ドロワー（p-spMenu）内の使い勝手改善
============================================================ */
@media (max-width: 959px) {
    .l-header__barInner::after { display: none; }

    /* SPメニュー内リンクを押しやすく（タップ領域拡大） */
    .p-spMenu .c-spnav a {
        padding: 14px 8px !important;
        font-size: 15px !important;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* 第1階層を主役級に */
    .p-spMenu .c-spnav > .menu-item > a .ttl {
        font-weight: 700;
        color: var(--sc-navy);
    }
    /* サブメニュー（子カテゴリ）を一段インデント＋薄い背景で階層を可視化 */
    .p-spMenu .c-spnav .sub-menu {
        background: #f7fafb;
        border-radius: 8px;
        margin: 4px 0 8px;
        padding: 4px 0;
    }
    .p-spMenu .c-spnav .sub-menu a {
        padding: 12px 8px 12px 20px !important;
        font-size: 14px !important;
        border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    }
    .p-spMenu .c-spnav .sub-menu .sub-menu {
        background: #eef4f5;
        margin: 2px 8px 6px;
    }
    .p-spMenu .c-spnav .sub-menu .sub-menu a {
        padding-left: 32px !important;
        font-size: 13px !important;
    }

    /* 「無料診断」をSPメニュー内でもオレンジCTA化 */
    .p-spMenu .c-spnav > .sc-nav-cta > a {
        background: linear-gradient(135deg, var(--sc-orange) 0%, var(--sc-orange-dark) 100%) !important;
        color: #fff !important;
        border-radius: 10px;
        margin: 12px 0 4px;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(230,74,0,0.2);
    }
    .p-spMenu .c-spnav > .sc-nav-cta > a .ttl {
        color: #fff !important;
        font-weight: 700;
    }

    /* アコーディオン開閉ボタン（c-submenuToggleBtn）を見やすく */
    .p-spMenu .c-submenuToggleBtn {
        color: var(--sc-teal);
    }
    .p-spMenu .c-submenuToggleBtn:after {
        border-color: var(--sc-teal);
        opacity: 0.3;
    }
    .p-spMenu .c-submenuToggleBtn.is-opened {
        color: var(--sc-orange);
    }
}
/* ==================================================
   Security Choice：アーカイブページ（カテゴリー・タグ・タクソノミー）改修 V2.1
   ================================================== */

/* --------------------------------------------------
   1. オリジナル見出しエリア（Lab感・権威性・立体感の大幅強化）
   -------------------------------------------------- */
.sc-archive-head {
    margin-bottom: 2em;
    padding: 2.5em 2em;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.sc-archive-head::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: linear-gradient(to right, rgba(226, 232, 240, 0.3) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(226, 232, 240, 0.3) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.sc-archive-head > * {
    position: relative;
    z-index: 1;
}

.sc-archive-head__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 1.5em;
}
.sc-archive-head__breadcrumb a {
    color: #64748b;
    text-decoration: none;
}
.sc-archive-head__breadcrumb a:hover {
    text-decoration: underline;
    color: var(--color_main);
}
.sc-archive-head__breadcrumb span[aria-current="page"] {
    color: #475569;
    font-weight: 600;
}
.sc-archive-head__crumb-sep {
    color: #cbd5e1;
}

.sc-archive-head__inner {
    display: flex;
    align-items: flex-start;
    gap: 1.25em;
}

.sc-archive-head__icon {
    flex: none;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color_main, #1790a2) 0%, #106370 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(23, 144, 162, 0.25);
}
.sc-archive-head__icon svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.sc-archive-head__meta-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 0.4em;
}

.sc-archive-head__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color_main);
    margin: 0;
}

.sc-archive-head__badge {
    display: inline-flex;
    align-items: center;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    color: #0d9488;
    font-size: 11px;
    font-weight: 700;
    padding: 0.2em 0.8em;
    border-radius: 4px;
}

.sc-archive-head__title {
    font-size: 1.65em;
    line-height: 1.35;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    position: relative;
    padding-bottom: .5em;
}
.sc-archive-head__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--color_main);
}

.sc-archive-head__lead {
    margin: 1.2em 0 0;
    font-size: .95em;
    line-height: 1.8;
    color: #475569;
}
.sc-archive-head__manual-desc {
    margin: 1.2em 0 0;
    padding: 1.2em 1.5em;
    background: #f8fafc;
    border-left: 4px solid #cbd5e1;
    border-radius: 0 8px 8px 0;
    font-size: .9em;
    line-height: 1.8;
    color: #475569;
}

@media (max-width: 599px) {
    .sc-archive-head { padding: 1.5em 1.25em; margin-bottom: 1.5em; border-radius: 12px; }
    .sc-archive-head__inner { flex-direction: column; gap: 0.75em; }
    .sc-archive-head__title { font-size: 1.35em; }
    .sc-archive-head__icon { width: 48px; height: 48px; border-radius: 12px; }
    .sc-archive-head__icon svg { width: 24px; height: 24px; }

}


/* --------------------------------------------------
   2. 回遊ナビ（UI/UX重視：スマホ横スクロール＆立体ボタン化）
   -------------------------------------------------- */
.sc-archive-nav {
    margin-bottom: 2.5em;
    padding: 1.5em;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.sc-archive-nav__title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: .9em;
    font-weight: 800;
    color: #334155;
    margin: 0 0 1em;
}
.sc-nav-subtitle-sm {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    margin-left: auto;
    display: none;
}

/* 親カテゴリー・現在地ナビのボタン化 */
.sc-archive-nav__parents {
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
    margin-bottom: 1.25em;
    padding-bottom: 1.25em;
    border-bottom: 1px solid #f1f5f9;
}
.sc-archive-nav__parent-pill {
    display: inline-flex;
    align-items: center;
    padding: .6em 1.4em;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: .85em;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-archive-nav__parent-pill:hover {
    background: #ffffff;
    border-color: var(--color_main);
    color: var(--color_main);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(23, 144, 162, 0.15);
}

.sc-archive-nav__parent-pill.is-current {
    background: linear-gradient(135deg, var(--color_main, #1790a2) 0%, #137988 100%);
    border-color: var(--color_main);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(23, 144, 162, 0.3);
}
.sc-archive-nav__parent-pill.is-current:hover {
    background: linear-gradient(135deg, #1aa4b9 0%, var(--color_main) 100%);
    color: #ffffff;
}

/* 絞り込み子条件リストのボタン化 */
.sc-archive-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
}
.sc-archive-nav__pill {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .55em 1.2em;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px; 
    font-size: .85em;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-archive-nav__count {
    color: #94a3b8;
    font-size: .85em;
    font-weight: 500;
}

.sc-archive-nav__pill:hover {
    background: #ffffff;
    color: var(--color_main);
    border-color: var(--color_main);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(23, 144, 162, 0.15);
}
.sc-archive-nav__pill:hover .sc-archive-nav__count {
    color: var(--color_main);
    opacity: 0.8;
}

/* ★スマホ時のUI/UX劇的最適化（横スクロール） */
@media (max-width: 599px) {
    .sc-archive-nav {
        padding: 1.15em 1em;
        margin-bottom: 1.5em;
        background: #f8fafc;
        border-radius: 12px;
        box-shadow: none;
    }
    
    .sc-nav-subtitle-sm {
        display: inline-block;
    }

    .sc-archive-nav__title {
        margin-bottom: 0.75em;
        padding: 0 0.25em;
		display:block;
    }

    .sc-archive-nav__parents-scroll-wrapper {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1em 0.75em -1em;
        padding: 0.5em 1em 0.75em 1em;
        border-bottom: 1px solid #e2e8f0;
    }
    .sc-archive-nav__parents {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5em;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .sc-archive-nav__parent-pill {
        flex: 0 0 auto;
        padding: 0.5em 1.2em;
        font-size: 13px;
    }

    .sc-archive-nav__list-scroll-wrapper {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1em;
        padding: 0 1em 0.5em 1em;
    }
    .sc-archive-nav__list {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5em;
    }
    .sc-archive-nav__pill {
        flex: 0 0 auto;
        padding: 0.45em 1.1em;
        font-size: 13px;
    }
    
    .sc-archive-nav__parents-scroll-wrapper::-webkit-scrollbar,
    .sc-archive-nav__list-scroll-wrapper::-webkit-scrollbar {
        height: 3px;
    }
    .sc-archive-nav__parents-scroll-wrapper::-webkit-scrollbar-thumb,
    .sc-archive-nav__list-scroll-wrapper::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }
	.p-termContent {
    margin-top: 2em;
	}
}

/* --------------------------------------------------
   3. メーカー(tax)等：一覧サムネイルを正方形比率に上書き
   -------------------------------------------------- */
.tax-maker .p-postList__thumb,
.tax-scale_tag .p-postList__thumb,
.tax-support_type .p-postList__thumb,
.tax-pain_point .p-postList__thumb {
    --list_posts_thumb_ratio: 100%;
}
/* ===================================================
   Section: Corporate Features (選ばれる理由)
   =================================================== */
.sc-features-wrap {
    background-color: #f8fafc; /* 少しだけ色を落として記事セクションと区別 */
    padding: 100px 0;
}
.sc-features-wrap .sc-section-title {
    margin-bottom: 70px;
}

.sc-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.sc-feature-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 50px 30px 40px;
    text-align: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sc-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}

/* 画像エリア（見切れずに美しく表示） */
.sc-feature-img {
    width: 100%;
    height: 160px;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-feature-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply; /* 白背景と綺麗に馴染ませる */
}

/* テキストエリア */
.sc-feature-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
    line-height: 1.5;
}
.sc-feature-title span {
    color: #1790a2; /* カギカッコの中などをブランドカラーに */
    display: block;
    font-size: 1.4rem;
    margin-top: 5px;
}
.sc-feature-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
    text-align: left; /* 長文は左揃えの方が読みやすい */
}

/* --- レスポンシブ (スマホ) --- */
@media (max-width: 900px) {
    .sc-features-wrap {
        padding: 70px 0;
    }
    .sc-features-grid {
        grid-template-columns: 1fr; /* スマホは1列縦積み */
        gap: 25px;
        padding: 0 15px;
    }
    .sc-feature-card {
        padding: 40px 20px;
    }
    .sc-feature-img {
        height: 140px;
        margin-bottom: 25px;
    }
    .sc-feature-title {
        font-size: 1.25rem;
    }
    .sc-feature-desc {
        text-align: center; /* スマホでは中央揃えの方が綺麗にまとまる */
    }
}
<style>
  .sc-cta-box {
    background: #f4f8fc;
    border: 2px solid #0056b3;
    border-radius: 8px;
    padding: 30px 20px;
    margin: 40px 0;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }
  .sc-cta-title {
    font-size: 1.4em;
    font-weight: bold;
    color: #222;
    margin-bottom: 15px;
    line-height: 1.5;
  }
  .sc-cta-title span { color: #0056b3; }
  .sc-cta-desc {
    font-size: 1em;
    color: #444;
    margin-bottom: 25px;
    line-height: 1.6;
  }
  .sc-cta-desc strong { color: #d9534f; }
  .sc-cta-btn {
    display: inline-block;
    background: #ff6b00;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    padding: 16px 32px;
    border-radius: 50px;
    box-shadow: 0 4px 0 #cc5500;
    transition: all 0.2s ease;
  }
  .sc-cta-btn:hover {
    transform: translateY(4px);
    box-shadow: none;
    opacity: 0.9;
  }
  .sc-cta-micro {
    font-size: 0.85em;
    color: #666;
    margin-top: 15px;
    line-height: 1.4;
  }
  @media (max-width: 768px) {
    .sc-cta-box { padding: 20px 15px; }
    .sc-cta-title { font-size: 1.2em; }
    .sc-cta-btn { font-size: 1.1em; padding: 14px 20px; display: block; }
  }
</style>
/* =========================================

   【完全版】レイアウト上書きとフッター被り防止

   ========================================= */



/* 1. 製品ページ（Wi-Fi, UTM, NAS, VPN）のみ、1カラム全幅にする */

body.single-wifi-ap #content > .l-container,

body.single-products #content > .l-container,

body.single-nas-storage #content > .l-container,

body.single-vpn-router #content > .l-container {

    display: block !important;

    max-width: 100% !important;

    padding: 0 !important;

}



body.single-wifi-ap .l-sidebar,

body.single-products .l-sidebar,

body.single-nas-storage .l-sidebar,

body.single-vpn-router .l-sidebar {

    display: none !important; /* 製品ページだけサイドバーを消す */

}



body.single-wifi-ap .l-mainContent,

body.single-products .l-mainContent,

body.single-nas-storage .l-mainContent,

body.single-vpn-router .l-mainContent {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 auto !important;

    padding: 0 !important;

}



/* 2. スマホ閲覧時、追従CTAによってフッターが隠れないための余白設定 */

@media screen and (max-width: 768px) {

    body {

        padding-bottom: 120px !important; /* 固定CTAの高さ分の余白を下部に確保 */

    }

}





/* =========================================

   Security Choice メガフッター（内部動線）

   ========================================= */



.sc-mega-footer {

    background-color: #f8fafc; /* 清潔感のある薄いグレー背景 */

    padding: 60px 0;

    border-top: 1px solid #e2e8f0;

}



.sc-mega-footer__inner {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* PC: 4カラムグリッド構成 */

.sc-mf-grid {

    display: grid;

    /* 左のDBエリアを少し広めに、残りを均等に */

    grid-template-columns: 1.4fr 1fr 1fr 1fr;

    gap: 40px;

}



/* --- タイトル共通 --- */

.sc-mf-title {

    font-size: 1.1rem;

    font-weight: 800;

    color: #1a202c;

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 2px solid #e2e8f0;

    position: relative;

}

.sc-mf-title::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 40px;

    height: 2px;

    background-color: #3182ce; /* アクセントカラー */

}

.sc-mf-title a {

    color: inherit;

    text-decoration: none;

    transition: color 0.2s;

}

.sc-mf-title a:hover {

    color: #3182ce;

}



/* --- DBリンクエリア (カードデザイン) --- */

.sc-mf-db-links {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.sc-mf-db-card {

    display: flex;

    align-items: center;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 10px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 2px 5px rgba(0,0,0,0.02);

}



.sc-mf-db-card:hover {

    border-color: #3182ce;

    box-shadow: 0 5px 15px rgba(49, 130, 206, 0.15);

    transform: translateY(-2px);

}



.sc-mf-db-icon {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    margin-right: 12px;

    background: #fff;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.sc-mf-db-icon img {

    max-width: 100%;

    height: auto;

}



.sc-mf-db-text {

    font-size: 0.9rem;

    font-weight: 700;

    color: #2d3748;

    line-height: 1.4;

}



/* --- カテゴリーリンクエリア (リストデザイン) --- */

.sc-mf-cat-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.sc-mf-cat-list li {

    margin-bottom: 12px;

}



.sc-mf-cat-list a {

    display: inline-flex;

    align-items: center;

    font-size: 0.95rem;

    color: #4a5568;

    text-decoration: none;

    transition: color 0.2s, transform 0.2s;

}



.sc-mf-cat-list a::before {

    content: '\003E'; /* 右向き矢印 > */

    font-size: 0.8rem;

    margin-right: 8px;

    color: #a0aec0;

    transition: color 0.2s;

}



.sc-mf-cat-list a:hover {

    color: #3182ce;

    transform: translateX(4px); /* ホバー時に少し右へ動くアニメーション */

}

.sc-mf-cat-list a:hover::before {

    color: #3182ce;

}



/* --- レスポンシブ対応 --- */



/* タブレット (2カラムに) */

@media screen and (max-width: 1024px) {

    .sc-mf-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 30px;

    }

}



/* スマホ (1カラムに) */

@media screen and (max-width: 600px) {

    .sc-mega-footer {

        padding: 40px 0;

    }

    .sc-mf-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    /* スマホ時はDBカードのテキストを少し小さく */

    .sc-mf-db-text {

        font-size: 0.85rem;

    }

}/* ===================================================

   Security Choice - FV (First View)

   【完全置き換え版】

   旧: sc-hero / sc-hero--left / sc-hero__* 系を削除し

   新: sc-fv-* 系に完全移行

   =================================================== */



/* ---------------------------------------------------

   CSS変数

--------------------------------------------------- */

:root {

    --sc-fv-text-main:   #112a46;

    --sc-fv-text-sub:    #136376;

    --sc-fv-accent:      #008b9c;

    --sc-fv-accent-dark: #007685;

    --sc-fv-orange:      #ff7a00;

    --sc-fv-orange-dark: #e64a00;

    --sc-fv-blue:        #0066cc;

    --sc-fv-blue-dark:   #004aa3;

    --sc-fv-bg-light:    #f4f9f9;

    --sc-fv-border:      #e2e8f0;

    --sc-fv-text-muted:  #475569;

}



/* ---------------------------------------------------

   ラッパー

--------------------------------------------------- */

.sc-fv-wrapper {

    font-family: "Noto Sans JP", sans-serif;

    color: var(--sc-fv-text-main);

    background-color: #ffffff;

    overflow: hidden;

}



/* ---------------------------------------------------

   ヒーローエリア（PC）

--------------------------------------------------- */

.sc-fv-hero {

    position: relative;

    background-image:

        linear-gradient( 90deg,rgba(255,255,255,0.98)  0%,rgba(255,255,255,0.92) 50%,rgba(255,255,255,0.40) 63%,rgba(255,255,255,0.00) 68%),url('https://security-choice.com/wp-content/uploads/2026/06/fv-new011.jpg');

    background-size: cover;

    background-position: center right;

    background-repeat: no-repeat;

    padding: 80px 20px 60px;

}



/* SP専用ビジュアル（PCでは非表示） */

.sc-fv-sp-visual {

    display: none;

}



/* コンテンツ幅制御（PC：左55%に収める） */

.sc-fv-inner {

    max-width: 760px; /* 1200px × 55% の実効幅 */

    margin-left: max(20px, calc((100vw - 1200px) / 2)); /* ← これが肝 */

    margin-right: 0;

    width: auto;

    padding: 0;

}



/* ---------------------------------------------------

   コピーエリア

--------------------------------------------------- */

.sc-fv-subcopy {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--sc-fv-text-sub);

    margin: 0 0 14px 0;

    letter-spacing: 0.05em;

    line-height: 1.6;

}



.sc-fv-maincopy {

    font-size: clamp(2rem, 3.5vw, 3.2rem);

    font-weight: 900;

    line-height: 1.4;

    letter-spacing: 0.02em;

    color: var(--sc-fv-text-main);

    margin: 0 0 30px 0;

}



/* 「最適解」ハイライト */

.sc-fv-bracket,

.sc-fv-highlight {

    color: var(--sc-fv-accent);

}



/* ---------------------------------------------------

   トラストバッジ

--------------------------------------------------- */

.sc-fv-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;

    margin-bottom: 32px;

justify-content: space-around;

}



.sc-fv-badge-top,

.sc-fv-badge-sub {

    display: flex;

    align-items: center;

}



.sc-fv-badge-top img,

.sc-fv-badge-sub img {

    height: 90px;

    width: auto;

    object-fit: contain;

    display: block;

}



/* ---------------------------------------------------

   CTAボタンエリア

--------------------------------------------------- */

.sc-fv-ctas {

    display: flex;

    gap: 16px;

    margin-bottom: 30px;

    flex-wrap: wrap;

}



/* ボタン共通 */

.sc-fv-btn {

    flex: 1;

    min-width: 260px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 24px 18px 18px;

    border-radius: 12px;

    text-decoration: none !important;

    color: #ffffff !important;

    box-shadow: 0 8px 20px rgba(0,0,0,0.15);

    transition: all 0.3s ease;

    position: relative;

}



.sc-fv-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(0,0,0,0.22);

    text-decoration: none !important;

    color: #ffffff !important;

}



/* オレンジCTA */

.sc-fv-btn--orange {

    background: linear-gradient(135deg, var(--sc-fv-orange) 0%, var(--sc-fv-orange-dark) 100%);

}

.sc-fv-btn--orange:hover {

    background: linear-gradient(135deg, #ff8c1a 0%, #f05000 100%);

}



/* 青CTA */

.sc-fv-btn--blue {

    background: linear-gradient(135deg, var(--sc-fv-blue) 0%, var(--sc-fv-blue-dark) 100%);

}

.sc-fv-btn--blue:hover {

    background: linear-gradient(135deg, #1a7ae0 0%, #0055c0 100%);

}



/* ボタン内レイアウト */

.sc-fv-btn-inner {

    display: flex;

    align-items: center;

}



.sc-fv-btn-icon {

    width: 55px;

    height: 55px;

    flex-shrink: 0;

    margin-right: 14px;

    object-fit: contain;

}



.sc-fv-btn-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



/* サブテキスト（上段） */

.sc-fv-btn-sub {

    font-size: 0.88rem;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 3px;

    opacity: 0.92;

}



/* メインテキスト */

.sc-fv-btn-main {

    font-size: 1.3rem;

    font-weight: 800;

    line-height: 1.25;

}



/* 「無料・3分で完了」ピル */

.sc-fv-btn-pill {

    background: #ffffff;

    color: var(--sc-fv-orange-dark);

    font-size: 0.78rem;

    font-weight: 800;

    padding: 3px 12px;

    border-radius: 20px;

    margin-top: 7px;

    display: inline-block;

    letter-spacing: 0.03em;

}



/* 右端矢印 */

.sc-fv-btn-arrow {

    width: 9px;

    height: 9px;

    border-top: 2.5px solid rgba(255,255,255,0.85);

    border-right: 2.5px solid rgba(255,255,255,0.85);

    transform: rotate(45deg);

    flex-shrink: 0;

    margin-left: 12px;

}



/* ---------------------------------------------------

   検索窓

--------------------------------------------------- */

.sc-fv-search-wrap {

    max-width: 100%;

}



.sc-fv-search-form {

    display: flex;

    align-items: stretch;

    background: rgba(255,255,255,0.92);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border: 1.5px solid var(--sc-fv-border);

    border-radius: 10px;

    overflow: hidden;

    padding: 5px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.06);

}



.sc-fv-search-icon {

    width: 22px;

    height: 22px;

    margin: auto 14px;

    color: var(--sc-fv-accent);

    flex-shrink: 0;

}



.sc-fv-search-input {

    flex: 1;

    border: none !important;

    background: transparent;

    font-size: 1rem !important;

    padding: 11px 0 !important;

    color: var(--sc-fv-text-main);

    outline: none !important;

    box-shadow: none !important;

}



.sc-fv-search-input::placeholder {

    color: #94a3b8;

    font-weight: 500;

}



.sc-fv-search-submit {

    background: var(--sc-fv-accent);

    color: #ffffff;

    border: none;

    padding: 0 30px;

    font-weight: 700;

    font-size: 1rem;

    border-radius: 7px;

    cursor: pointer;

    transition: background 0.25s ease;

    white-space: nowrap;

}



.sc-fv-search-submit:hover {

    background: var(--sc-fv-accent-dark);

}



.sc-fv-search-note {

    font-size: 0.82rem;

    color: var(--sc-fv-text-muted);

    margin: 9px 0 0 4px;

    font-weight: 600;

}



/* ---------------------------------------------------

   カテゴリ導線エリア

--------------------------------------------------- */

.sc-fv-categories-section {

    background-color: var(--sc-fv-bg-light);

    padding: 50px 20px 65px;

}



/* 「取扱製品から探す」見出し */

.sc-fv-cat-heading {

    text-align: center;

    font-size: 1.1rem;

    font-weight: 800;

    color: var(--sc-fv-text-main);

    margin-bottom: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    letter-spacing: 0.04em;

}



.sc-fv-cat-heading::before,

.sc-fv-cat-heading::after {

    content: '';

    display: block;

    width: 48px;

    height: 1px;

    background-color: #cbd5e1;

}



/* 4カラムグリッド（PC） */

.sc-fv-cat-grid {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



/* カード */

.sc-fv-cat-card {

    background: #ffffff;

    border: 1.5px solid var(--sc-fv-border);

    border-radius: 14px;

    padding: 24px 20px;

    display: flex;

    align-items: center;

    gap: 14px;

    text-decoration: none !important;

    color: var(--sc-fv-text-main) !important;

    transition: all 0.28s ease;

    box-shadow: 0 2px 8px rgba(0,0,0,0.03);

    position: relative;

}



.sc-fv-cat-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 22px rgba(0,0,0,0.07);

    border-color: var(--sc-fv-accent);

    text-decoration: none !important;

    color: var(--sc-fv-text-main) !important;

}



.sc-fv-cat-card-icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    object-fit: contain;

}



.sc-fv-cat-card-content h3 {

    font-size: 1.25rem;

    font-weight: 900;

    margin: 0 0 4px 0;

    color: var(--sc-fv-accent);

    line-height: 1.2;

}



.sc-fv-cat-card-content p {

    font-size: 0.83rem;

    line-height: 1.5;

    color: var(--sc-fv-text-muted);

    margin: 0;

    font-weight: 600;

}



/* カード右下矢印 */

.sc-fv-cat-arrow {

    position: absolute;

    bottom: 14px;

    right: 14px;

    width: 18px;

    height: 18px;

    color: var(--sc-fv-accent);

    opacity: 0.7;

    transition: opacity 0.25s ease, transform 0.25s ease;

}



.sc-fv-cat-card:hover .sc-fv-cat-arrow {

    opacity: 1;

    transform: translateX(3px);

}



/* ---------------------------------------------------

   レスポンシブ：タブレット（1024px以下）

--------------------------------------------------- */

@media screen and (max-width: 1024px) {

    .sc-fv-hero {

        padding: 70px 28px 50px;

    }

    .sc-fv-inner {

        width: 62%;

    }

}



/* ---------------------------------------------------

   レスポンシブ：スマホ（768px以下）

--------------------------------------------------- */

@media screen and (max-width: 768px) {



    /* ヒーロー：SP用背景＋縦グラデーション */

    .sc-fv-hero {

        background-image:

            linear-gradient(

                180deg,

                rgba(255,255,255,0.98)  0%,

                rgba(255,255,255,0.95) 45%,

                rgba(255,255,255,0.75) 65%,

                rgba(255,255,255,0.00) 100%

            ),

            url('https://security-choice.com/wp-content/uploads/2026/06/sp-fv.jpg');

        background-position: center top;

        padding: 0 0 36px;

    }



    /* SP専用ビジュアル */

    .sc-fv-sp-visual {

        display: block;

        width: 100%;

        aspect-ratio: 16 / 9;

        background-image:

            linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%),url('https://security-choice.com/wp-content/uploads/2026/06/sp-fv-new.jpg');

        background-size: cover;

        background-position: center;

        margin-bottom: 24px;

    }



    .sc-fv-inner {

        width: 100%;

        padding: 0 18px;

margin:auto;

    }



    /* コピー */

    .sc-fv-subcopy {

        font-size: 1rem;

        margin-bottom: 10px;

text-align:center;

    }



    .sc-fv-maincopy {

        font-size: 1.8rem;

        margin-bottom: 24px;

        line-height: 1.45;

text-align:center;

font-weight:bold;

    }



    /* バッジ：1枚目を中央大・2,3枚目を横並び */

    .sc-fv-badges {

        flex-wrap: wrap;

        justify-content: center;

        gap: 12px 10px;

        margin-bottom: 26px;

    }



    .sc-fv-badge-top {

        width: 66%;

        max-width: 300px;

        justify-content: center;

    }



    .sc-fv-badge-sub {

        width: calc(50% - 8px);

        max-width: 190px;

        justify-content: center;

    }



    .sc-fv-badge-top img,

    .sc-fv-badge-sub img {

        width: 100%;

        height: auto;

    }



    /* CTAボタン縦積み */

    .sc-fv-ctas {

        flex-direction: column;

        gap: 14px;

    }



    .sc-fv-btn {

        min-width: unset;

        padding: 15px 18px 15px 14px;

    }



    .sc-fv-btn-icon {

        width: 44px;

        height: 44px;

        margin-right: 12px;

    }



    .sc-fv-btn-main {

        font-size: 1.2rem;

    }



    .sc-fv-btn-sub {

        font-size: 0.82rem;

    }



    /* 検索窓：縦積み */

    .sc-fv-search-form {

        flex-direction: column;

        padding: 4px;

        background: rgba(255,255,255,0.97);

    }



    .sc-fv-search-icon {

        display: none;

    }



    .sc-fv-search-input {

        padding: 14px 16px !important;

        font-size: 1rem !important;

        text-align: left;

    }



    .sc-fv-search-submit {

        width: 100%;

        padding: 14px 0;

        border-radius: 7px;

        font-size: 1rem;

    }



    /* カテゴリカード：2カラム2行 */

    .sc-fv-categories-section {

        padding: 36px 14px 48px;

    }



    .sc-fv-cat-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }



    .sc-fv-cat-card {

        padding: 18px 12px 38px;

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 8px;

    }



    .sc-fv-cat-card-icon {

        width: 44px;

        height: 44px;

    }



    .sc-fv-cat-card-content h3 {

        font-size: 1.1rem;

        margin-bottom: 3px;

    }



    .sc-fv-cat-card-content p {

        font-size: 0.8rem;

    }



    /* SP：矢印を中央下に固定 */

    .sc-fv-cat-arrow {

        bottom: 10px;

        right: 50%;

        transform: translateX(50%);

    }



    .sc-fv-cat-card:hover .sc-fv-cat-arrow {

        transform: translateX(50%);

    }

}

/* ---------------------------------------------------

   PC時：オレンジCTAは従来通り縦並び

--------------------------------------------------- */

.sc-fv-btn--orange .sc-fv-btn-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.sc-fv-btn--orange .sc-fv-btn-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.sc-fv-btn--orange .sc-fv-btn-pill {

    margin-top: 7px;

}





/* ---------------------------------------------------

   SPのみ：オレンジCTAを 左テキスト＋右ピル に変更

--------------------------------------------------- */

@media screen and (max-width: 768px) {



    .sc-fv-btn--orange {

        padding: 12px 16px 12px 14px;

    }



    .sc-fv-btn--orange .sc-fv-btn-inner {

        flex: 1;

        min-width: 0;

    }



    .sc-fv-btn--orange .sc-fv-btn-content {

        width: 100%;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

    }



    .sc-fv-btn--orange .sc-fv-btn-text {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        min-width: 0;

    }



    .sc-fv-btn--orange .sc-fv-btn-sub {

        font-size: 0.78rem;

        line-height: 1.2;

        margin-bottom: 2px;

    }



    .sc-fv-btn--orange .sc-fv-btn-main {

        font-size: 1.12rem;

        line-height: 1.25;

        white-space: nowrap;

    }



    .sc-fv-btn--orange .sc-fv-btn-pill {

        margin-top: 0;

        flex-shrink: 0;

        font-size: 0.72rem;

        line-height: 1;

        padding: 6px 10px;

        white-space: nowrap;

    }



    .sc-fv-btn--orange .sc-fv-btn-icon {

        width: 42px;

        height: 42px;

        margin-right: 10px;

    }



    .sc-fv-btn--orange .sc-fv-btn-arrow {

        margin-left: 8px;

    }

} 
/* =========================================
   Security Choice Product Page - Premium UX
   ========================================= */

/* --- 1. 固定フッターによる「サイトフッター隠れ」対策 --- */
body {
    /* 追従CTAの高さ＋余裕分を確保 */
    padding-bottom: 120px !important; 
}
@media (min-width: 769px) {
    /* PCではCTAが少し細くなるので調整 */
    body {
        padding-bottom: 100px !important;
    }
}

/* SWELLのコンテナ上書き */
#content > .l-container {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.sc-product-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 10px 60px; /* 下部はbodyのpaddingで確保したのでここでは標準的でOK */
}

/* --- ヘッダーエリア --- */
.sc-product-header {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.sc-ph-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.sc-badge-maker {
    background-color: #004488;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
}
.sc-badge-eol {
    background-color: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
}
.sc-model-number {
    font-size: 14px;
    color: #666;
}
.sc-product-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #222;
    line-height: 1.3;
    margin: 0;
}
/* スマホタイトルのサイズ調整 */
@media (max-width: 768px) {
    .sc-product-title { font-size: 1.6rem; }
}

/* --- ヒーローセクション --- */
.sc-hero-section {
    display: flex;
    gap: 50px;
    margin-bottom: 60px;
    align-items: flex-start;
}
.sc-hero-image-col { flex: 1; width: 50%; }
.sc-hero-info-col { flex: 1; width: 50%; display: flex; flex-direction: column; }

/* 製品画像（白背景・シンプル化） */
.sc-product-image {
    /* 枠線や影を消して、画像をそのまま置くスタイル */
    text-align: center;
    padding: 20px;
}
.sc-img-responsive {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* 影やフィルターを削除し、素材そのものの白背景を活かす */
    filter: none; 
    box-shadow: none;
}

/* 価格エリア */
.sc-hero-price-area {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2f7;
}
.sc-price-label {
    font-size: 12px;
    color: #718096;
    margin-bottom: 4px;
    font-weight: 700;
}
.sc-price-display {
    font-size: 32px;
    font-weight: 800;
    color: #2d3748;
}

/* プロのレビューカード */
.sc-pro-review-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    border-left: 5px solid #0056b3;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.sc-review-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #0056b3;
    font-weight: 700;
}
.sc-review-body {
    font-size: 15px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}
.sc-poe-notice {
    font-size: 13px;
    background: #fffaf0;
    color: #9c4221;
    padding: 10px 15px;
    border-radius: 6px;
    margin-top: 15px;
}

/* レスポンシブ（ヒーローエリア縦積み） */
@media (max-width: 768px) {
    .sc-hero-section {
        flex-direction: column;
        gap: 30px;
    }
    .sc-hero-image-col, 
    .sc-hero-info-col {
        width: 100%;
    }
}

/* --- ビジュアルスペック（アイコン） --- */
.sc-visual-specs { margin-bottom: 60px; }
.sc-spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.sc-spec-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
}
.sc-spec-item .icon { font-size: 28px; margin-bottom: 8px; }
.sc-spec-item .label { font-size: 11px; color: #718096; font-weight: 700; margin-bottom: 5px; }
.sc-spec-item .value-main { font-size: 22px; font-weight: 800; color: #2d3748; }
.sc-spec-item .unit { font-size: 12px; font-weight: normal; margin-left: 2px; }
.sc-spec-item .value-sub { font-size: 14px; font-weight: 700; color: #4a5568; }
.sc-tag-standard {
    display: inline-block;
    background: #eef6ff;
    color: #0056b3;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}
@media (max-width: 768px) {
    .sc-spec-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 詳細スペック表 --- */
.sc-section-heading {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    color: #1a202c;
}
.sc-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.sc-spec-table th {
    background: #f8fafc;
    width: 30%;
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    color: #4a5568;
    border-bottom: 1px solid #e2e8f0;
}
.sc-spec-table td {
    padding: 15px 20px;
    color: #2d3748;
    border-bottom: 1px solid #e2e8f0;
}
@media (max-width: 768px) {
    .sc-spec-table th, .sc-spec-table td {
        display: block;
        width: 100%;
        border-bottom: none;
    }
    .sc-spec-table th { background: transparent; padding-bottom: 5px; color: #718096; font-size: 12px; }
    .sc-spec-table td { padding-top: 0; padding-bottom: 20px; border-bottom: 1px solid #eee; }
}

/* --- 【刷新】比較製品セクション（カードデザイン） --- */
.sc-related-section { margin-top: 60px; }
.sc-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 20px;
}
.sc-related-card {
    display: block;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s;
    overflow: hidden;
}
.sc-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: #cbd5e0;
}
.sc-related-thumb {
    background: #f9f9f9; /* 商品画像の背景だけ薄いグレーにして製品を際立たせる */
    padding: 20px;
    text-align: center;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-related-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply; /* 白背景画像を馴染ませる */
}
.sc-related-body {
    padding: 15px;
}
.sc-related-name {
    font-size: 16px;
    font-weight: 700;
    color: #0056b3;
    margin: 0 0 5px;
    line-height: 1.4;
}
.sc-related-model {
    font-size: 12px;
    color: #666;
    margin: 0 0 10px;
}
.sc-related-price {
    font-size: 18px;
    font-weight: 800;
    color: #2d3748;
    margin: 0;
}
@media (max-width: 768px) {
    .sc-related-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
        gap: 10px;
    }
    .sc-related-thumb { height: 140px; padding: 10px; }
    .sc-related-name { font-size: 14px; }
}


/* --- 【刷新】口コミセクション --- */
.sc-review-wrapper {
    margin-top: 60px;
}

/* フォームの見た目調整 */
.sc-review-form-box {
    margin-top: 40px;
    background: #f9fafb;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.sc-review-form-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 10px; }
.sc-review-form-note { font-size: 13px; color: #666; text-align: center; margin-bottom: 25px; }

/* 入力欄 */
.glsr-review-form input, 
.glsr-review-form textarea,
.glsr-review-form select {
    border: 1px solid #cbd5e0 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    background: #fff !important;
    font-size: 16px !important; /* スマホでズームしないサイズ */
}

/* 口コミ表示（一覧） */
.glsr-review {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 0 !important;
}
/* Anonymous（匿名）を消す */
.glsr-review-author { display: none !important; }

/* 役職（Title）をバッジ化 */
.glsr-review-title h4, /* プラグインの設定によってはh3/h4が変わるため */
.glsr-review-title {
    display: inline-block;
    background: #eef6ff;
    color: #0066cc;
    font-size: 12px !important;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 4px;
    margin-bottom: 8px !important;
}

/* 星の色 */
.glsr-star-rating .glsr-star-full { color: #f6ad55 !important; }

/* 0件時のメッセージ */
.glsr-not-found {
    text-align: center;
    padding: 30px;
    background: #fff;
    border: 1px dashed #ccc;
    border-radius: 8px;
    color: #777;
}


/* --- 追従CTA（フローティング） --- */
.sc-floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #ddd;
    padding: 15px 20px 20px; /* iPhoneの下部バー用に少し下を広めに */
    z-index: 9999;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    /* ぼかし効果でモダンに */
    backdrop-filter: blur(10px);
}

.sc-cta-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sc-cta-text {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.sc-cta-buttons {
    display: flex;
    gap: 15px;
}

.sc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    line-height: 1;
    transition: all 0.2s;
    white-space: nowrap;
}

.sc-btn.-primary {
    background: #333; /* 黒に近いグレーで高級感 */
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.sc-btn.-primary:hover {
    background: #000;
    transform: translateY(-2px);
}

.sc-btn.-secondary {
    background: #fff;
    color: #333;
    border: 2px solid #333;
}
.sc-btn.-secondary:hover {
    background: #f5f5f5;
}

/* スマホ時のCTA調整 */
@media (max-width: 768px) {
    .sp-hide { display: none; } /* テキスト非表示 */
    
    .sc-cta-buttons {
        width: 100%;
        flex-direction: column; /* 縦積み */
        gap: 10px;
    }
    .sc-btn {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }
    .sc-floating-cta {
        padding: 10px 15px 25px; /* 省スペース化 */
    }
}

/* =========================================
   修正版 CSS
   ========================================= */

/* --- 1. 固定CTAによるフッター被り対策 --- */
/* bodyに固定フッターの高さ分以上の余白を強制的に追加 */
body {
    padding-bottom: 160px !important; /* 少し余裕を持って広げました */
}
@media (min-width: 769px) {
    body {
        padding-bottom: 120px !important;
    }
}

/* --- 2. 製品画像のシンプル化（白背景・枠なし） --- */
.sc-product-image {
    background: transparent; /* 背景色なし */
    border-radius: 0;
    padding: 0; /* 余白なし */
    display: block;
    text-align: center;
    box-shadow: none; /* 影なし */
    border: none; /* 枠線なし */
}

.sc-img-responsive {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: none;
    box-shadow: none;
}

/* --- 3. 口コミ「役職」の表示修正（ズレ・重複解消） --- */

/* まず、タイトルの箱（帯）を整える */
.glsr-review-title {
    display: inline-flex !important; /* Flexboxで垂直中央揃え */
    align-items: center !important;  /* 上下中央 */
    background: #f0f7ff;
    border: 1px solid #cce0ff;
    padding: 6px 16px !important;    /* 余白を調整 */
    border-radius: 4px;
    margin-bottom: 12px !important;
    line-height: 1 !important;       /* 行間を締める */
    height: auto !important;
}

/* 中身のh3/h4タグのスタイルをリセット */
.glsr-review-title h3,
.glsr-review-title h4 {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    font-size: 14px !important;      /* 文字サイズを大きく */
    font-weight: bold !important;
    color: #004488 !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* 「役職：」ラベルの挿入（重複しないようhタグのみに指定） */
.glsr-review-title::before {
    content: none !important; /* 外側の重複を消す */
}

.glsr-review-title h3::before,
.glsr-review-title h4::before {
    content: "役職：" !important;
    font-weight: normal;
    color: #666;
    margin-right: 6px;
    font-size: 12px;
}

.glsr-default form.glsr-form textarea.glsr-textarea {

    height: 100px;
}
/* ===================================================
   Section: Diagnosis CTA Banner (無料診断キラーバナー)
   =================================================== */
/* 直上のおすすめ機器セクション（#f0f7ff）と背景色を合わせ、シームレスに繋ぐ */
.sc-section--diag-cta {
    padding: 0 20px 100px;
    background-color: #f0f7ff; 
}

.sc-diag-cta {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    margin: 0 auto;
    max-width: 1000px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* 上部のグラデーションライン */
.sc-diag-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #1790a2 0%, #3182ce 100%);
}

/* 背景のさりげない装飾（右下の波紋） */
.sc-diag-cta::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(23, 144, 162, 0.05) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: -1;
}

.sc-diag-cta h3 {
    font-size: 1.8rem;
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 20px;
    border: none !important;
    line-height: 1.5;
}

/* 強調テキストのマーカー装飾 */
.sc-diag-cta h3 span {
    color: #1790a2;
    position: relative;
    display: inline-block;
    z-index: 1;
}
.sc-diag-cta h3 span::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(23, 144, 162, 0.15);
    z-index: -1;
    border-radius: 4px;
}

.sc-diag-cta p {
    font-size: 1.05rem;
    color: #475569;
    margin-bottom: 40px;
    line-height: 1.8;
    font-weight: 600;
}

/* コンバージョンボタン（光沢エフェクト付き） */
.sc-diag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1790a2;
    color: #ffffff !important;
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.15rem;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 20px rgba(23, 144, 162, 0.3);
    border: none;
    position: relative;
    overflow: hidden;
}
.sc-diag-btn:hover {
    background: #137a8a;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(23, 144, 162, 0.4);
}

/* ホバー時にキラッと光るエフェクト */
.sc-diag-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg) translateY(-100%);
    transition: all 0.6s ease;
}
.sc-diag-btn:hover::before {
    transform: rotate(45deg) translateY(100%);
}

/* スマホ最適化 */
@media (max-width: 768px) {
    .sc-section--diag-cta { padding: 0 15px 60px; }
    .sc-diag-cta { padding: 40px 20px; border-radius: 12px; }
    .sc-diag-cta h3 { font-size: 1.4rem; }
    .sc-diag-cta p { font-size: 0.95rem; text-align: left; }
    .sc-diag-btn { width: 100%; padding: 16px 20px; font-size: 1.05rem; }
}


/* ===================================================
   Section: Bottom CTA (最下部CTA)
   =================================================== */
.sc-section--bottom-cta {
    padding: 80px 20px 120px; /* フッター前なので下部の余白を少し多めに */
    background-color: #f8fafc; /* 上のセクションと自然に繋げる */
}

.sc-cta {
    background: url('https://security-choice.com/wp-content/uploads/2026/01/AdobeStock_485297081.jpeg') no-repeat center center / cover;
    padding: 100px 40px;
    text-align: center;
    color: #ffffff;
    position: relative;
    border-radius: 24px; /* SaaSらしい少し大きめの角丸 */
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

/* オーバーレイを濃くしてテキストの可読性を高める */
.sc-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85); /* 深みのあるダークネイビー */
}

.sc-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto;
}

.sc-cta__title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 20px;
    line-height: 1.4;
    border: none;
    letter-spacing: 0.02em;
}
.sc-cta__title::after {
    display: none; /* SWELL標準の見出し線を消す */
}

.sc-cta__text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
    color: #cbd5e1; /* 真っ白ではなく少し明るいグレーで高級感を */
    font-weight: 500;
}

.sc-cta__btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* ボタン共通設定 */
.sc-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 40px;
    border-radius: 50px;
    font-weight: 800;
    text-decoration: none !important;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

/* プライマリボタン（無料診断） */
.sc-cta__btn--primary {
    background: #1790a2;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(23, 144, 162, 0.3);
    border: none;
}
.sc-cta__btn--primary:hover {
    background: #137a8a;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(23, 144, 162, 0.4);
}
/* キラッと光るエフェクト */
.sc-cta__btn--primary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg) translateY(-100%);
    transition: all 0.6s ease;
}
.sc-cta__btn--primary:hover::before {
    transform: rotate(45deg) translateY(100%);
}

/* セカンダリボタン（お問い合わせ） */
.sc-cta__btn--white {
    background: transparent;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}
.sc-cta__btn--white:hover {
    background: #ffffff;
    color: #0f172a !important;
    transform: translateY(-3px);
}

/* --- レスポンシブ (スマホ) --- */
@media (max-width: 768px) {
    .sc-section--bottom-cta {
        padding: 60px 15px 80px;
    }
    .sc-cta {
        padding: 50px 20px;
        border-radius: 16px;
    }
    .sc-cta__title {
        font-size: 1.6rem;
    }
    .sc-cta__text {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }
    .sc-cta__btns {
        flex-direction: column;
        gap: 15px;
    }
    .sc-cta__btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 1.05rem;
    }
}
/* ===================================================
   Section: Articles (お役立ち記事・カテゴリナビ)
   =================================================== */
.sc-section--articles {
    background-color: #ffffff; /* クリーンな白背景 */
    padding: 100px 0;
    border-top: 1px solid #e2e8f0;
}

/* --- カテゴリナビ（親）--- */
.sc-article-nav-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: #475569;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}
.sc-article-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.sc-tab-btn {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    padding: 12px 24px;
    border-radius: 8px; /* SaaSらしい少しの角丸 */
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.sc-tab-btn:hover {
    background: #ffffff;
    border-color: #1790a2;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(23, 144, 162, 0.1);
}
.sc-tab-btn.is-active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

/* --- キーワードタグ（子）--- */
.sc-article-tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 50px;
    flex-wrap: wrap;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.sc-tag-pill {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 6px 16px;
    border-radius: 50px; /* カプセル型 */
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s;
}
.sc-tag-pill::before {
    content: '# ';
    color: #94a3b8;
}
.sc-tag-pill:hover {
    background: #f1f5f9;
    color: #1790a2;
    border-color: #cbd5e1;
}

/* --- 記事グリッド (PC3列, 角丸なし) --- */
.sc-article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px;
}
.sc-article-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0; /* 完全シャープ（角丸なし） */
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}
.sc-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}
.sc-article-card__thumb {
    width: 100%;
    aspect-ratio: 1200 / 630;
    overflow: hidden;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.sc-article-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.sc-article-card:hover .sc-article-card__thumb img {
    transform: scale(1.05);
}

/* メタ情報 (カテゴリと日付) */
.sc-article-card__body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.sc-article-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sc-article-card__date {
    font-size: 0.85rem;
    color: #94a3b8;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
}
.sc-article-card__category {
    display: inline-block;
    background: #e8f4f6;
    color: #1790a2;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px; /* ここだけは小さな角丸を残すとUIとして綺麗です */
}
.sc-article-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.5;
    margin: 0 0 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* もっと見るボタン */
.sc-section-cta {
    text-align: center;
}
.sc-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 50px;
    border: 2px solid #cbd5e1;
    border-radius: 50px;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none !important;
    transition: all 0.3s;
}
.sc-btn-outline:hover {
    background-color: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

/* --- レスポンシブ (スマホ) --- */
@media (max-width: 900px) {
    .sc-section--articles { padding: 60px 0; }
    
    /* タブとタグは横スクロール（スワイプ）に */
    .sc-article-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 15px 10px;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .sc-article-tabs::-webkit-scrollbar { display: none; }
    .sc-tab-btn { white-space: nowrap; font-size: 0.95rem; padding: 10px 20px; }
    
    .sc-article-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 15px 15px;
        justify-content: flex-start;
        scrollbar-width: none;
        margin-bottom: 30px;
    }
    .sc-article-tags::-webkit-scrollbar { display: none; }
    .sc-tag-pill { white-space: nowrap; }

    /* スマホは1列縦積み */
    .sc-article-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }
    .sc-article-card__body {
        padding: 20px;
    }
}
/* ===================================================
   Section: Recommended Products (目的別おすすめ機器)
   =================================================== */
.sc-ranking-area { 
    padding: 100px 0; 
    background-color: #f0f7ff; /* メリハリをつける淡いブルー背景 */
}

/* グループごとの余白 */
.sc-rec-group { 
    margin-bottom: 100px; 
}
.sc-rec-group:last-child {
    margin-bottom: 0;
}

/* ヘッダー部分（添付画像のデザインを再現） */
.sc-rec-header { 
    text-align: center; 
    margin-bottom: 40px; 
}
.sc-rec-header__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}
.sc-rec-tag-main {
    background: #ffffff;
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.sc-rec-tag-sub {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}
.sc-rec-maintitle { 
    font-size: 2rem; 
    font-weight: 900; 
    color: #0f172a; 
    margin: 0 0 15px; 
    border: none !important; 
    line-height: 1.4;
}
.sc-rec-pill { 
    display: inline-block;
    background: #ffffff;
    color: #3182ce;
    font-size: 0.95rem; 
    font-weight: 700; 
    padding: 6px 20px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* =========================================
   PC表示: 3列カードグリッドレイアウト
========================================= */
.sc-rec-cards { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; 
    max-width: 1200px;
    margin: 0 auto;
}
.sc-rec-card { 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 40px 25px 30px; 
    text-decoration: none !important; 
    color: inherit !important; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.03); 
    position: relative;
    overflow: hidden;
}
.sc-rec-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08); 
    border-color: #cbd5e1; 
}

/* PROおすすめバッジ (1つ目のカード) */
.sc-rec-card.is-top { 
    border: 3px solid #1790a2; 
}
.sc-rec-pro-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #e8f4f6;
    color: #1790a2;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #cbe4e8;
}
.sc-rec-card.is-top {
    padding-top: 65px; /* バッジの分の余白 */
}

/* サムネイル画像 */
.sc-rec-card__thumb { 
    width: 160px; 
    height: 160px; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}
.sc-rec-card__thumb img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    mix-blend-mode: multiply; 
}

/* テキスト情報 */
.sc-rec-card__info { 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    width: 100%;
}
.sc-rec-card-tag { 
    display: inline-block; 
    font-size: 0.8rem; 
    padding: 6px 12px; 
    border-radius: 4px; 
    font-weight: 800; 
    margin-bottom: 15px; 
}
.sc-rec-card-tag.is-orange {
    background: #d69e2e;
    color: #ffffff;
}
.sc-rec-card-tag.is-blue {
    background: #ebf8ff;
    color: #2b6cb0;
}

.sc-rec-name { 
    font-size: 1.3rem; 
    font-weight: 800; 
    color: #0f172a; 
    margin: 0 0 12px; 
    line-height: 1.4; 
}
.sc-rec-desc { 
    font-size: 0.95rem; 
    color: #475569; 
    line-height: 1.6; 
    margin: 0; 
    text-align: left;
    width: 100%;
    padding-top: 15px;
    border-top: 1px dashed #e2e8f0;
}

/* もっと見るボタン（枠線デザイン） */
.sc-rec-more { 
    text-align: center; 
    margin-top: 35px; 
}
.sc-rec-btn { 
    display: inline-block;
    font-size: 1.05rem; 
    font-weight: 800; 
    color: #1790a2; 
    background: #ffffff;
    text-decoration: none !important; 
    border: 2px solid #1790a2;
    padding: 14px 40px;
    border-radius: 50px;
    transition: 0.3s; 
    box-shadow: 0 4px 10px rgba(23, 144, 162, 0.1);
}
.sc-rec-btn:hover { 
    background: #1790a2; 
    color: #ffffff;
    transform: translateY(-2px);
}

/* =========================================
   スマホ表示: 1画面に収まるコンパクトリスト
========================================= */
@media (max-width: 900px) {
    .sc-ranking-area { padding: 60px 0; }
    .sc-rec-maintitle { font-size: 1.5rem; }
    .sc-rec-group { margin-bottom: 60px; }
    .sc-rec-header__tags { flex-direction: column; gap: 5px; }
    
    /* スマホは縦積み（1列） */
    .sc-rec-cards { 
        grid-template-columns: 1fr; 
        gap: 12px; 
        padding: 0 15px;
    }
    
    /* スマホ時は横長カード（左画像・右テキスト）に変形して一画面に収める */
    .sc-rec-card { 
        flex-direction: row; 
        text-align: left; 
        padding: 20px 15px; 
        gap: 15px; 
        align-items: center;
    }
    .sc-rec-card.is-top {
        padding-top: 40px; /* バッジの分 */
        padding-left: 15px;
        flex-direction: row;
    }
    .sc-rec-pro-badge {
        font-size: 0.75rem;
        padding: 6px 0;
    }
    
    .sc-rec-card__thumb { 
        width: 80px; 
        height: 80px; 
        margin-bottom: 0; 
    }
    .sc-rec-card__info { 
        align-items: flex-start;
    }
    .sc-rec-card-tag { 
        font-size: 0.65rem; 
        padding: 4px 8px; 
        margin-bottom: 8px; 
    }
    .sc-rec-name { 
        font-size: 1.1rem; 
        margin-bottom: 5px; 
    }
    /* 説明文は2行で省略して高さを抑え、リストの一覧性を確保 */
    .sc-rec-desc { 
        font-size: 0.8rem; 
        padding-top: 0;
        border-top: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .sc-rec-btn {
        width: 90%;
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* ===================================================
   目的別おすすめ機器セクション：大見出しの特別装飾
=================================================== */

/* セクション全体を中央揃えにして、バッジ型見出しを中央配置 */
.sc-ranking-area {
    text-align: center;
}

/* 下の各ジャンルの中身は左揃えベースに戻す */
.sc-rec-group {
    text-align: left;
}
.sc-rec-header {
    text-align: center; /* ジャンルヘッダーは中央揃えを維持 */
}

/* 大見出しをゴールドのバッジ（リボン）風デザインに刷新 */
.sc-ranking-area .sc-section-title {
    display: inline-block;
    position: relative;
    background: linear-gradient(135deg, #d69e2e 0%, #b7791f 100%);
    color: #ffffff;
    font-size: 1.8rem;
    padding: 12px 60px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(214, 158, 46, 0.3);
    margin: 0 auto 80px;
    letter-spacing: 0.05em;
}

/* 共通CSSで付いている見出し下の青い線を非表示にする */
.sc-ranking-area .sc-section-title::after {
    display: none;
}



/* スマホ表示の調整 */
@media (max-width: 768px) {
    .sc-ranking-area .sc-section-title {
        font-size: 1.3rem;
        padding: 10px 30px;
        margin-bottom: 60px;
    }
    .sc-ranking-area .sc-section-title::before {
        top: -20px;
        font-size: 1.8rem;
    }
}
/* ===================================================
   Section: Pain Point (お悩みセクション)
   =================================================== */
.sc-pain-section {
    background-color: #f8fafc;
    padding: 100px 0; /* 左右のpaddingは削り、中のgridで管理 */
}
.sc-pain-section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 60px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.sc-pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* カードの基本設計 */
.sc-pain-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    padding: 35px;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.sc-pain-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(15,23,42,0.08);
    border-color: #cbd5e1;
}

/* 画像エリア (PC: 左側) */
.sc-pain-img-wrap {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    margin-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-pain-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply; /* 白背景を馴染ませる */
}

/* テキストエリア (PC: 右側) */
.sc-pain-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sc-pain-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1790a2;
    background: #e8f4f6;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    width: fit-content;
}
.sc-pain-badge.is-orange {
    background: #dd6b20;
    color: #ffffff;
}
.sc-pain-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    line-height: 1.4;
}
.sc-pain-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* クリックを促すリンク要素 */
.sc-pain-link {
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #1790a2;
    transition: transform 0.3s;
}
.sc-pain-card:hover .sc-pain-link {
    transform: translateX(5px); /* ホバー時に少し右へ動く */
}
.sc-pain-card.is-wide .sc-pain-link {
    color: #dd6b20;
}

/* 5つ目のカード (フルワイド特別レイアウト) */
/* アイコンを左にしてコンパクトに */
.sc-pain-card.is-wide {
    grid-column: 1 / -1; 
    flex-direction: row; 
    justify-content: flex-start;
    text-align: left; 
    background: #fffcf5;
    border-color: #fbd38d;
    padding: 40px;
}
.sc-pain-card.is-wide .sc-pain-img-wrap {
    margin: 0 40px 0 0; 
    width: 160px; 
    height: 160px;
}
.sc-pain-card.is-wide .sc-pain-title {
    font-size: 1.4rem;
}

/* --- レスポンシブ (スマホ・タブレット) --- */
/* スマホ時は間延びを防ぐため「左画像・右テキスト」の横長コンパクトリストに変形 */
@media (max-width: 900px) {
    .sc-pain-section { padding: 60px 0; }
    .sc-pain-section-title { font-size: 1.5rem; margin-bottom: 40px; padding: 0 15px; }
    
    .sc-pain-grid {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 15px;
        padding: 0 15px;
    }
    
    /* カード内を横長レイアウトに変更 */
    .sc-pain-card {
        flex-direction: row;
        padding: 20px 15px;
        align-items: center;
    }
    
    /* 画像を小さくしてスペース確保 */
    .sc-pain-img-wrap {
        width: 80px;
        height: 80px;
        margin: 0 15px 0 0;
    }
    
    .sc-pain-badge {
        font-size: 0.65rem;
        padding: 3px 6px;
        margin-bottom: 6px;
    }
    .sc-pain-title { 
        font-size: 1.05rem; 
        margin-bottom: 6px;
    }
    /* 説明文は2行で省略して高さを抑える */
    .sc-pain-desc { 
        font-size: 0.8rem; 
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .sc-pain-link {
        font-size: 0.85rem;
        margin-top: 8px;
    }
    
    /* 5つ目のCTAカードもスマホでは統一レイアウトに */
    .sc-pain-card.is-wide { 
        grid-column: auto; 
        padding: 20px 15px; 
    }
    .sc-pain-card.is-wide .sc-pain-img-wrap { 
        width: 80px; 
        height: 80px; 
        margin: 0 15px 0 0;
    }
    .sc-pain-card.is-wide .sc-pain-title { 
        font-size: 1.1rem; 
    }
}
/* ===================================================
   Security Choice - FV (First View)
   【完全置き換え版】
   旧: sc-hero / sc-hero--left / sc-hero__* 系を削除し
   新: sc-fv-* 系に完全移行
   =================================================== */

/* ---------------------------------------------------
   CSS変数
--------------------------------------------------- */
:root {
    --sc-fv-text-main:   #112a46;
    --sc-fv-text-sub:    #136376;
    --sc-fv-accent:      #008b9c;
    --sc-fv-accent-dark: #007685;
    --sc-fv-orange:      #ff7a00;
    --sc-fv-orange-dark: #e64a00;
    --sc-fv-blue:        #0066cc;
    --sc-fv-blue-dark:   #004aa3;
    --sc-fv-bg-light:    #f4f9f9;
    --sc-fv-border:      #e2e8f0;
    --sc-fv-text-muted:  #475569;
}

/* ---------------------------------------------------
   ラッパー
--------------------------------------------------- */
.sc-fv-wrapper {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--sc-fv-text-main);
    background-color: #ffffff;
    overflow: hidden;
}

/* ---------------------------------------------------
   ヒーローエリア（PC）
--------------------------------------------------- */
.sc-fv-hero {
    position: relative;
    background-image:
        linear-gradient( 90deg,rgba(255,255,255,0.98)  0%,rgba(255,255,255,0.92) 50%,rgba(255,255,255,0.40) 63%,rgba(255,255,255,0.00) 68%),url('https://security-choice.com/wp-content/uploads/2026/06/fv-new011.jpg');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    padding: 80px 20px 60px;
}

/* SP専用ビジュアル（PCでは非表示） */
.sc-fv-sp-visual {
    display: none;
}

/* コンテンツ幅制御（PC：左55%に収める） */
.sc-fv-inner {
    max-width: 760px; /* 1200px × 55% の実効幅 */
    margin-left: max(20px, calc((100vw - 1200px) / 2)); /* ← これが肝 */
    margin-right: 0;
    width: auto;
    padding: 0;
}

/* ---------------------------------------------------
   コピーエリア
--------------------------------------------------- */
.sc-fv-subcopy {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sc-fv-text-sub);
    margin: 0 0 14px 0;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.sc-fv-maincopy {
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--sc-fv-text-main);
    margin: 0 0 30px 0;
}

/* 「最適解」ハイライト */
.sc-fv-bracket,
.sc-fv-highlight {
    color: var(--sc-fv-accent);
}

/* ---------------------------------------------------
   トラストバッジ
--------------------------------------------------- */
.sc-fv-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 32px;
	justify-content: space-around;
}

.sc-fv-badge-top,
.sc-fv-badge-sub {
    display: flex;
    align-items: center;
}

.sc-fv-badge-top img,
.sc-fv-badge-sub img {
    height: 90px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ---------------------------------------------------
   CTAボタンエリア
--------------------------------------------------- */
.sc-fv-ctas {
    display: flex;
    gap: 16px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* ボタン共通 */
.sc-fv-btn {
    flex: 1;
    min-width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 18px 18px;
    border-radius: 12px;
    text-decoration: none !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    position: relative;
}

.sc-fv-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    text-decoration: none !important;
    color: #ffffff !important;
}

/* オレンジCTA */
.sc-fv-btn--orange {
    background: linear-gradient(135deg, var(--sc-fv-orange) 0%, var(--sc-fv-orange-dark) 100%);
}
.sc-fv-btn--orange:hover {
    background: linear-gradient(135deg, #ff8c1a 0%, #f05000 100%);
}

/* 青CTA */
.sc-fv-btn--blue {
    background: linear-gradient(135deg, var(--sc-fv-blue) 0%, var(--sc-fv-blue-dark) 100%);
}
.sc-fv-btn--blue:hover {
    background: linear-gradient(135deg, #1a7ae0 0%, #0055c0 100%);
}

/* ボタン内レイアウト */
.sc-fv-btn-inner {
    display: flex;
    align-items: center;
}

.sc-fv-btn-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    margin-right: 14px;
    object-fit: contain;
}

.sc-fv-btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* サブテキスト（上段） */
.sc-fv-btn-sub {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
    opacity: 0.92;
}

/* メインテキスト */
.sc-fv-btn-main {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
}

/* 「無料・3分で完了」ピル */
.sc-fv-btn-pill {
    background: #ffffff;
    color: var(--sc-fv-orange-dark);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 20px;
    margin-top: 7px;
    display: inline-block;
    letter-spacing: 0.03em;
}

/* 右端矢印 */
.sc-fv-btn-arrow {
    width: 9px;
    height: 9px;
    border-top: 2.5px solid rgba(255,255,255,0.85);
    border-right: 2.5px solid rgba(255,255,255,0.85);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-left: 12px;
}

/* ---------------------------------------------------
   検索窓
--------------------------------------------------- */
.sc-fv-search-wrap {
    max-width: 100%;
}

.sc-fv-search-form {
    display: flex;
    align-items: stretch;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--sc-fv-border);
    border-radius: 10px;
    overflow: hidden;
    padding: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.sc-fv-search-icon {
    width: 22px;
    height: 22px;
    margin: auto 14px;
    color: var(--sc-fv-accent);
    flex-shrink: 0;
}

.sc-fv-search-input {
    flex: 1;
    border: none !important;
    background: transparent;
    font-size: 1rem !important;
    padding: 11px 0 !important;
    color: var(--sc-fv-text-main);
    outline: none !important;
    box-shadow: none !important;
}

.sc-fv-search-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.sc-fv-search-submit {
    background: var(--sc-fv-accent);
    color: #ffffff;
    border: none;
    padding: 0 30px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.25s ease;
    white-space: nowrap;
}

.sc-fv-search-submit:hover {
    background: var(--sc-fv-accent-dark);
}

.sc-fv-search-note {
    font-size: 0.82rem;
    color: var(--sc-fv-text-muted);
    margin: 9px 0 0 4px;
    font-weight: 600;
}

/* ---------------------------------------------------
   カテゴリ導線エリア
--------------------------------------------------- */
.sc-fv-categories-section {
    background-color: var(--sc-fv-bg-light);
    padding: 50px 20px 65px;
}

/* 「取扱製品から探す」見出し */
.sc-fv-cat-heading {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--sc-fv-text-main);
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    letter-spacing: 0.04em;
}

.sc-fv-cat-heading::before,
.sc-fv-cat-heading::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background-color: #cbd5e1;
}

/* 4カラムグリッド（PC） */
.sc-fv-cat-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* カード */
.sc-fv-cat-card {
    background: #ffffff;
    border: 1.5px solid var(--sc-fv-border);
    border-radius: 14px;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    color: var(--sc-fv-text-main) !important;
    transition: all 0.28s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    position: relative;
}

.sc-fv-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.07);
    border-color: var(--sc-fv-accent);
    text-decoration: none !important;
    color: var(--sc-fv-text-main) !important;
}

.sc-fv-cat-card-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    object-fit: contain;
}

.sc-fv-cat-card-content h3 {
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0 0 4px 0;
    color: var(--sc-fv-accent);
    line-height: 1.2;
}

.sc-fv-cat-card-content p {
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--sc-fv-text-muted);
    margin: 0;
    font-weight: 600;
}

/* カード右下矢印 */
.sc-fv-cat-arrow {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    color: var(--sc-fv-accent);
    opacity: 0.7;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sc-fv-cat-card:hover .sc-fv-cat-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* ---------------------------------------------------
   レスポンシブ：タブレット（1024px以下）
--------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .sc-fv-hero {
        padding: 70px 28px 50px;
    }
    .sc-fv-inner {
        width: 62%;
    }
}

/* ---------------------------------------------------
   レスポンシブ：スマホ（768px以下）
--------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* ヒーロー：SP用背景＋縦グラデーション */
    .sc-fv-hero {
        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.98)  0%,
                rgba(255,255,255,0.95) 45%,
                rgba(255,255,255,0.75) 65%,
                rgba(255,255,255,0.00) 100%
            ),
            url('https://security-choice.com/wp-content/uploads/2026/06/sp-fv.jpg');
        background-position: center top;
        padding: 0 0 36px;
    }

    /* SP専用ビジュアル */
    .sc-fv-sp-visual {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-image:
            linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%),url('https://security-choice.com/wp-content/uploads/2026/06/sp-fv-new.jpg');
        background-size: cover;
        background-position: center;
        margin-bottom: 24px;
    }

    .sc-fv-inner {
        width: 100%;
        padding: 0 18px;
		margin:auto;
    }

    /* コピー */
    .sc-fv-subcopy {
        font-size: 1rem;
        margin-bottom: 10px;
		text-align:center;
    }

    .sc-fv-maincopy {
        font-size: 1.8rem;
        margin-bottom: 24px;
        line-height: 1.45;
		text-align:center;
		font-weight:bold;
    }

    /* バッジ：1枚目を中央大・2,3枚目を横並び */
    .sc-fv-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 10px;
        margin-bottom: 26px;
    }

    .sc-fv-badge-top {
        width: 66%;
        max-width: 300px;
        justify-content: center;
    }

    .sc-fv-badge-sub {
        width: calc(50% - 8px);
        max-width: 190px;
        justify-content: center;
    }

    .sc-fv-badge-top img,
    .sc-fv-badge-sub img {
        width: 100%;
        height: auto;
    }

    /* CTAボタン縦積み */
    .sc-fv-ctas {
        flex-direction: column;
        gap: 14px;
    }

    .sc-fv-btn {
        min-width: unset;
        padding: 15px 18px 15px 14px;
    }

    .sc-fv-btn-icon {
        width: 44px;
        height: 44px;
        margin-right: 12px;
    }

    .sc-fv-btn-main {
        font-size: 1.2rem;
    }

    .sc-fv-btn-sub {
        font-size: 0.82rem;
    }

    /* 検索窓：縦積み */
    .sc-fv-search-form {
        flex-direction: column;
        padding: 4px;
        background: rgba(255,255,255,0.97);
    }

    .sc-fv-search-icon {
        display: none;
    }

    .sc-fv-search-input {
        padding: 14px 16px !important;
        font-size: 1rem !important;
        text-align: left;
    }

    .sc-fv-search-submit {
        width: 100%;
        padding: 14px 0;
        border-radius: 7px;
        font-size: 1rem;
    }

    /* カテゴリカード：2カラム2行 */
    .sc-fv-categories-section {
        padding: 36px 14px 48px;
    }

    .sc-fv-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .sc-fv-cat-card {
        padding: 18px 12px 38px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .sc-fv-cat-card-icon {
        width: 44px;
        height: 44px;
    }

    .sc-fv-cat-card-content h3 {
        font-size: 1.1rem;
        margin-bottom: 3px;
    }

    .sc-fv-cat-card-content p {
        font-size: 0.8rem;
    }

    /* SP：矢印を中央下に固定 */
    .sc-fv-cat-arrow {
        bottom: 10px;
        right: 50%;
        transform: translateX(50%);
    }

    .sc-fv-cat-card:hover .sc-fv-cat-arrow {
        transform: translateX(50%);
    }
}
/* ---------------------------------------------------
   PC時：オレンジCTAは従来通り縦並び
--------------------------------------------------- */
.sc-fv-btn--orange .sc-fv-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sc-fv-btn--orange .sc-fv-btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sc-fv-btn--orange .sc-fv-btn-pill {
    margin-top: 7px;
}


/* ---------------------------------------------------
   SPのみ：オレンジCTAを 左テキスト＋右ピル に変更
--------------------------------------------------- */
@media screen and (max-width: 768px) {

    .sc-fv-btn--orange {
        padding: 12px 16px 12px 14px;
    }

    .sc-fv-btn--orange .sc-fv-btn-inner {
        flex: 1;
        min-width: 0;
    }

    .sc-fv-btn--orange .sc-fv-btn-content {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .sc-fv-btn--orange .sc-fv-btn-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
    }

    .sc-fv-btn--orange .sc-fv-btn-sub {
        font-size: 0.78rem;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .sc-fv-btn--orange .sc-fv-btn-main {
        font-size: 1.12rem;
        line-height: 1.25;
        white-space: nowrap;
    }

    .sc-fv-btn--orange .sc-fv-btn-pill {
        margin-top: 0;
        flex-shrink: 0;
        font-size: 0.72rem;
        line-height: 1;
        padding: 6px 10px;
        white-space: nowrap;
    }

    .sc-fv-btn--orange .sc-fv-btn-icon {
        width: 42px;
        height: 42px;
        margin-right: 10px;
    }

    .sc-fv-btn--orange .sc-fv-btn-arrow {
        margin-left: 8px;
    }
}
@media (max-width:699px) {
	.pconly {
		display:none;
	}
}



 @media (min-width:700px) {
	 .sponly {
		display:none;
	}
}



/* --- Common / Layout --- */
.l-sidebar { display: none !important; }
.l-mainContent { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
#content > .l-container { max-width: 100% !important; width: 100% !important; padding: 0 !important; }

/* セクション共通 */
.sc-section { padding: 100px 20px; max-width: 1440px; margin: 0 auto; clear: both; }
.sc-section-title { 
    text-align: center; font-size: 2rem; margin-bottom: 60px; font-weight: 800; 
    position: relative; padding-bottom: 20px; color: #1a202c;
}
.sc-section-title::after { 
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); 
    width: 60px; height: 5px; background: #3182ce; border-radius: 3px; 
}

.home #content {
    padding: 0px !important;
    max-width: 100% !important;
}



@media (max-width:699px) {

	.sc-section-title { 
		font-size: 1.5rem; 
}
	
}



.c-listMenu a {
    padding: 20px 1em 20px 1.5em !important;
}
   .home  .l-mainContent {
        padding: 0 !important;
    }
.page-id-202 .c-pageTitle {
    text-align: center !important;
	padding-top:20px;
}
.page-id-202 .c-pageTitle__inner {
    float: initial !important;
}

/* =========================================
   Security Choice 洗練されたフォーム装飾
   ========================================= */

/* 隠しフィールド */
.hidden-field {
    display: none !important;
}

/* フォームコンテナ（白浮き出しデザイン） */
.sc-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 50px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

/* 行の余白（広めにとって息苦しさを排除） */
.sc-form-row {
    margin-bottom: 35px;
}
.sc-form-row:last-child {
    margin-bottom: 0;
}

/* ラベル（見出し） */
.sc-form-label {
    font-weight: 700;
    color: #1e293b;
    font-size: 16px;
    margin-bottom: 12px; /* 入力欄との距離を適正化 */
    display: flex;
    align-items: center;
}

/* 必須マーク（モダンな赤色に） */
.sc-form-label .required {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* 入力欄共通（SaaS風の薄いグレー背景） */
.sc-form-container input[type="text"],
.sc-form-container input[type="email"],
.sc-form-container input[type="tel"],
.sc-form-container textarea,
.sc-form-container select {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #f8fafc;
    font-size: 16px !important; /* iOSズーム防止 */
    color: #334155;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    line-height: 1.5;
}

/* プルダウン特有 */
.sc-form-container select {
    cursor: pointer;
}

/* フォーカス時のリッチなエフェクト */
.sc-form-container input:focus,
.sc-form-container textarea:focus,
.sc-form-container select:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #1790a2; /* サイトのメインカラー */
    box-shadow: 0 0 0 4px rgba(23, 144, 162, 0.15);
}

/* プレースホルダーの文字色とサイズ */
.sc-form-container input::placeholder,
.sc-form-container textarea::placeholder {
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.6;
}

/* 補足テキスト */
.sc-form-note {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-top: -8px;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* =========================================
   カスタムチェックボックス（モダンUI）
   ========================================= */
.sc-checkbox-group .wpcf7-list-item {
    display: block;
    margin: 0 0 15px 0; /* 項目間の余白 */
}
.sc-checkbox-group .wpcf7-list-item:last-child {
    margin-bottom: 0;
}

/* デフォルトのチェックボックスを隠す */
.sc-checkbox-group input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* カスタムラベル */
.sc-checkbox-group .wpcf7-list-item-label {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    line-height: 1.5;
    color: #334155;
    font-size: 15px;
    padding-left: 36px; /* 箱の分の余白 */
    font-weight: 500;
    transition: color 0.2s;
}
.sc-checkbox-group .wpcf7-list-item-label:hover {
    color: #0f172a;
}

/* 四角い箱の部分 */
.sc-checkbox-group .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    background-color: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* チェックマーク */
.sc-checkbox-group .wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 5px;
    width: 6px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* チェックされた時の状態 */
.sc-checkbox-group input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background-color: #1790a2;
    border-color: #1790a2;
}
.sc-checkbox-group input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}

/* =========================================
   2カラムレイアウト（PC）
   ========================================= */
@media (min-width: 600px) {
    .sc-form-row-2col {
        display: flex;
        gap: 24px;
    }
    .sc-form-col {
        flex: 1;
    }
    .sp-only {
        display: none;
    }
}

/* =========================================
   ポリシー・送信ボタン
   ========================================= */
.sc-form-policy {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 18px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.6;
}

.sc-form-submit {
    text-align: center;
}

.sc-form-submit .wpcf7-submit {
    width: 100%;
    max-width: 400px;
    padding: 18px 40px !important;
    background-color: #1e293b !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.sc-form-submit .wpcf7-submit:hover {
    background-color: #0f172a !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* =========================================
   スマホ特化の微調整
   ========================================= */
@media (max-width: 599px) {
    .sc-form-container {
        padding: 25px 20px;
        border-radius: 12px;
    }
    .sc-form-row {
        margin-bottom: 28px;
    }
    .sc-form-label {
        font-size: 15px;
    }
    .sc-checkbox-group .wpcf7-list-item-label {
        font-size: 14px;
        line-height: 1.5;
        padding-top: 1px;
    }
    .sc-form-container textarea {
        min-height: 180px; /* テキストエリアを広くして入力しやすく */
    }
    .sc-form-container input::placeholder,
    .sc-form-container textarea::placeholder {
        font-size: 13px; /* プレースホルダーを小さくしてギチギチ感を解消 */
        line-height: 1.6;
    }
}


/* 任意マークのスタイル（必須マークのスタイルに合わせて微調整してください） */
.sc-form-label .optional {
    display: inline-block;
    background-color: #999; /* 落ち着いたグレー */
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}
/* 画像ブロックのキャプションを非表示にする */
.wp-block-image figcaption {
    display: none !important;
}
/* --- SEO記事下のCTAボックス（セキュリティ背景版） --- */
.sc-article-bottom-cta {
    margin: 60px 0 40px;
}

/* 背景画像の設定とボックスのスタイル */
.sc-cta-box.-security-bg {
    /* 指定された背景画像を設定 */
    background-image: url('https://security-choice.com/wp-content/uploads/2026/01/AdobeStock_573528232.jpeg');
    background-size: cover;     /* 画像をボックス全体に覆うように表示 */
    background-position: center; /* 画像の中央を表示 */
    position: relative;         /* オーバーレイのために必要 */
    z-index: 1;                 /* コンテンツを前面に */
    
    border-radius: 12px;        /* 角丸 */
    padding: 60px 30px;         /* 内側の余白を広めに */
    text-align: center;         /* テキストを中央揃え */
    color: #ffffff;             /* 文字色を白に */
    overflow: hidden;           /* 角丸から画像がはみ出ないように */
    box-shadow: 0 10px 25px rgba(0, 20, 60, 0.2); /* 独自の影を追加 */
}

/* 背景画像のオーバーレイ（文字を読みやすくするための半透明レイヤー） */
.sc-cta-box.-security-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 15, 50, 0.75); /* 青系の深く暗いオーバーレイ */
    z-index: -1; /* 文字の後ろに配置 */
}

/* タイトル */
.sc-cta-box__title {
    font-size: 1.8rem !important;
    font-weight: 800;
    margin-bottom: 20px !important;
    color: #ffffff !important; /* タイトルを白に */
    border: none !important;   /* SWELL標準の装飾を消す */
    line-height: 1.4 !important;
}
.sc-cta-box__title::before, .sc-cta-box__title::after { content: none !important; }

/* 本文 */
.sc-cta-box__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e0e7ff; /* 真っ白ではなく、少し青みがかった白で目に優しく */
    margin-bottom: 35px;
    font-weight: 500;
}

/* ボタン */
.sc-cta-box__btns .sc-btn.-security {
    width: 100%;
    max-width: 450px;
    padding: 20px 30px;
    font-size: 18px;
    /* 背景に映える明るい青のグラデーション */
    background: linear-gradient(135deg, #00a3ff 0%, #0066cc 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 100, 255, 0.4); /* 光るような影 */
    color: #fff;
    font-weight: bold;
    transition: all 0.3s ease;
	margin:auto;
}
.sc-cta-box__btns .sc-btn.-security:hover {
    transform: translateY(-3px); /* ホバー時に少し浮き上がる */
    box-shadow: 0 8px 25px rgba(0, 100, 255, 0.6);
    filter: brightness(1.1);
}
	.c-postTitle__ttl {
    margin: 30px 0px;
}

.single-post .c-categoryList__link , .single-post .c-tagList__link, .single-post .c-taxList__link {
    padding: 10px !important;
    font-size: 14px !important;
}




/* スマホ対応 */
@media (max-width: 768px) {
    .sc-cta-box.-security-bg { padding: 40px 20px; }
    .sc-cta-box__title { font-size: 1.4rem !important; }
    .sc-cta-box__text { font-size: 14px; margin-bottom: 25px; }
    .sc-cta-box__btns .sc-btn.-security {
        padding: 16px 20px;
        font-size: 16px;
    }
	.c-postTitle__ttl {
    margin: 20px 0px;
}
	.single-post .c-categoryList__link , .single-post .c-tagList__link, .single-post .c-taxList__link {
    padding: 7px !important;
    font-size: 12px !important;
}

}



  .sc-cta-box-est {
    background: #fff8eb;
    border: 2px solid #fd7e14;
    border-radius: 8px;
    padding: 30px 20px;
    margin: 40px 0;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }
  .sc-cta-box-est .sc-cta-title span { color: #fd7e14; }

.sc-cta-box-sec {
  background: #f2f9f5;
  border: 2px solid #198754;
  border-radius: 8px;
  padding: 30px 20px;
  margin: 40px 0;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.sc-cta-box-sec .sc-cta-title span { color: #198754; }

.sc-cta-box {
    background: #f4f8fc;
    border: 2px solid #0056b3;
    border-radius: 8px;
    padding: 30px 20px;
    margin: 40px 0;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }
/* =========================================
   Security Choice モダンDBアーカイブ（リブランディング版）
   ========================================= */

:root {
    --sc-main: #1790a2;        /* メインカラー */
    --sc-main-light: #e8f4f6;  /* メインカラーの極薄版（背景用） */
    --sc-main-hover: #137a8a;  /* メインカラーホバー用 */
    --sc-text: #334155;        /* 基本テキストカラー */
    --sc-bg: #f8fafc;          /* 全体背景色 */
    --sc-border: #e2e8f0;      /* 枠線カラー */
}

/* --- レイアウト全体 --- */
.sc-archive-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding: 0 10px;
    color: var(--sc-text);
}

/* --- イントロセクション --- */
.sc-archive-intro {
    padding: 60px 0;
    border-bottom: 1px solid var(--sc-border);
}
.sc-archive-intro__box {
    display: flex;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.sc-intro-col { padding: 40px; }
.sc-intro-col--text { flex: 1 1 55%; display: flex; flex-direction: column; justify-content: center; }
.sc-intro-col--img { flex: 1 1 45%;  display: flex; align-items: center; justify-content: center; padding: 0; }
.sc-intro-col--img img { width: 100%; height: 100%; object-fit: cover; }
.sc-intro-badge { display: inline-block; background: var(--sc-main); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 30px; margin-bottom: 15px; }
.sc-intro-concept { font-size: 16px; font-weight: 700; color: var(--sc-main); margin-bottom: 5px; }
.sc-intro-heading { font-size: 32px; font-weight: 800; color: #0f172a; margin-bottom: 20px; border: none !important; line-height: 1.3; }
.sc-intro-desc { font-size: 15px; line-height: 1.8; color: var(--sc-text); margin-bottom: 0; }

@media (max-width: 960px) {
    .sc-archive-intro__box { flex-direction: column; }
    .sc-intro-heading { font-size: 24px; }
    .sc-intro-col { padding: 0px 20px 30px; }
    .sc-intro-col--img { height: 200px; }
}

/* --- 左サイドバー（検索フィルター） --- */
.sc-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    padding: 25px;
    border: 1px solid var(--sc-border);
}
@media screen and (max-width: 900px) {
    .sc-archive-container { flex-direction: column; }
    .sc-sidebar { width: 100%; position: static; }
}
.sc-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid var(--sc-bg); padding-bottom: 10px; }
.sc-filter-heading { font-size: 15px; font-weight: 800; margin: 0; color: #0f172a; }
.sc-reset-btn { font-size: 12px; color: #94a3b8; text-decoration: underline; }
.sc-filter-group { margin-bottom: 25px; }
.sc-filter-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 12px; display: block; }

/* ラジオボタン（従業員規模）のSaaS風UI */
.sc-radio-list { display: flex; flex-direction: column; gap: 8px; }
.sc-radio-card { position: relative; cursor: pointer; margin: 0; }
.sc-radio-card input { position: absolute; opacity: 0; }
.sc-radio-body { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 12px 16px; background: #fff; border: 1px solid var(--sc-border); 
    border-radius: 8px; transition: all 0.2s; font-size: 13px; font-weight: 600; color: var(--sc-text);
}
.sc-radio-sub { font-size: 11px; color: #94a3b8; font-weight: normal; }
.sc-radio-card input:checked + .sc-radio-body { 
    background: var(--sc-main); color: #fff; border-color: var(--sc-main); 
}
.sc-radio-card input:checked + .sc-radio-body .sc-radio-sub { color: rgba(255,255,255,0.8); }

/* チェックボックス（メーカー・こだわり） */
.sc-check-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-check-tag { cursor: pointer; position: relative; margin: 0; }
.sc-check-tag input { position: absolute; opacity: 0; }
.sc-tag-body { 
    display: inline-block; padding: 8px 14px; background: var(--sc-bg); 
    border: 1px solid var(--sc-border); border-radius: 50px; font-size: 12px; 
    font-weight: 600; color: var(--sc-text); transition: all 0.2s; 
}
.sc-check-tag input:checked + .sc-tag-body { background: var(--sc-main); color: #fff; border-color: var(--sc-main); }

.sc-toggle-list { display: flex; flex-direction: column; gap: 8px; }
.sc-toggle-item { cursor: pointer; display: flex; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--sc-border); border-radius: 8px; transition: all 0.2s; }
.sc-toggle-item input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 4px; margin-right: 12px; position: relative; cursor: pointer; flex-shrink: 0; }
.sc-toggle-item input:checked { background-color: var(--sc-main); border-color: var(--sc-main); }
.sc-toggle-item input:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sc-toggle-body { font-size: 13px; font-weight: 600; color: var(--sc-text); }
.sc-toggle-item:has(input:checked) { background-color: var(--sc-main-light); border-color: var(--sc-main); }

.sc-search-btn-sticky { display: block; width: 100%; background: var(--sc-main); color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; margin-top: 20px; transition: 0.2s; }
.sc-search-btn-sticky:hover { background: var(--sc-main-hover); }

/* --- 右側メイン（製品カード） --- */
.sc-main-list { flex-grow: 1; }
.sc-sort-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--sc-border); }
.sc-hit-count { font-size: 14px; color: var(--sc-text); }
.sc-hit-count strong { font-size: 18px; color: #0f172a; margin-right: 4px; }
.sc-sort-form select { padding: 8px 30px 8px 15px; border-radius: 6px; border: 1px solid var(--sc-border); font-size: 13px; color: var(--sc-text); background-color: #fff; cursor: pointer; }

/* 製品カード */
.sc-card-row { display: flex; background: #fff; border: 1px solid var(--sc-border); border-radius: 12px; margin-bottom: 20px; overflow: hidden; transition: all 0.3s ease; }
.sc-card-row:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); border-color: #cbd5e0; }

.sc-card-thumb-link { width: 220px; flex-shrink: 0; background: #fff; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; border-right: 1px solid var(--sc-border); }
.sc-card-thumb-link img { max-width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.sc-maker-badge { position: absolute; top: 12px; left: 12px; background: var(--sc-bg); border: 1px solid var(--sc-border); padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 4px; color: var(--sc-text); }

.sc-card-body-row { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.sc-card-title { font-size: 1.3rem; margin: 0 0 4px; font-weight: 800; }
.sc-card-title a { text-decoration: none; color: #0f172a; transition: color 0.2s; }
.sc-card-title a:hover { color: var(--sc-link); }
.sc-model-num { font-size: 13px; color: #64748b; margin-bottom: 15px; font-family: 'Helvetica Neue', Arial, sans-serif; }

/* SVGスペックタグ */
.sc-spec-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.sc-tag-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--sc-bg); color: var(--sc-text); border: 1px solid var(--sc-border); }
.sc-tag-item svg { width: 14px; height: 14px; color: var(--sc-main); } /* アイコンの色をメインカラーに統一 */

/* プロコメント */
.sc-pro-comment-box { background: var(--sc-main-light); padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; position: relative; border-left: 4px solid var(--sc-main); }
.sc-comment-text { font-size: 13px; line-height: 1.6; color: var(--sc-text); margin: 0; font-weight: 500; }

/* フッター（価格とボタン） */
.sc-card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.sc-price-box .label { font-size: 11px; color: #64748b; display: block; margin-bottom: 2px; font-weight: 600; }
.sc-price-box .price { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; }
.sc-btn-detail { background: #0f172a; color: #fff; padding: 12px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; transition: 0.2s; text-decoration: none; }
.sc-btn-detail:hover { background: var(--sc-main); color: #fff; }

@media screen and (max-width: 650px) {
    .sc-card-row { flex-direction: column; }
    .sc-card-thumb-link { width: 85%; height: 250px; border-right: none; border-bottom: 1px solid var(--sc-border); margin: auto; }
    .sc-card-body-row { padding: 20px; }
    .sc-card-footer { flex-direction: column; align-items: flex-start; gap: 15px; }
    .sc-btn-detail { width: 100%; text-align: center; }
    .sc-sort-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
	.sc-archive-intro {
    padding: 30px 0;
}
}

/* ページネーション & ノーリザルト */
.sc-no-result { text-align: center; padding: 60px 20px; background: #fff; border-radius: 12px; border: 1px dashed #cbd5e1; }
.sc-btn-reset { display: inline-block; margin-top: 15px; padding: 10px 20px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 6px; color: var(--sc-text); text-decoration: none; font-weight: 600; }

/* =========================================
   ページネーション（ページ送り）の修正
   ========================================= */

.sc-pagination {
    margin-top: 50px !important;
    text-align: center;
}

/* リスト全体を横並びに強制 */
.sc-pagination ul.page-numbers {
    display: flex !important;
/*     flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 8px; /* ボタン同士の間隔 */
}

/* リスト項目の幅広化を防止 */
.sc-pagination ul.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important; /* 縦並びを防止 */
}

/* 数字・矢印ボタンのデザイン（正方形に統一） */
.sc-pagination .page-numbers {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 44px;  /* タップしやすいサイズ */
    height: 44px;
    text-decoration: none !important;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    background-color: #f1f5f9 !important; /* 薄いグレー（非選択時） */
    color: #475569 !important;
    box-shadow: none !important;
}

/* 現在のページ（ブランドカラー #1790a2 を適用） */
.sc-pagination .page-numbers.current {
    background-color: #1790a2 !important; 
    color: #ffffff !important;
    cursor: default;
}

/* ホバー時（リンクありのみ） */
.sc-pagination a.page-numbers:hover {
    background-color: #1c7094 !important; /* 少し濃い青 */
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* 矢印（»）の調整 */
.sc-pagination .page-numbers.next,
.sc-pagination .page-numbers.prev {
    font-size: 18px;
}

/* SWELL標準の不要なテキストを隠す */
.sc-pagination .screen-reader-text {
    display: none !important;
}


/* =========================================================
   R2: プロの本音レビューの帰属1行（2026-09-18 追加）
   single-products / wifi-ap / nas-storage / vpn-router の
   .sc-pro-review-card 内で使う。ここ以外では使わない。
   ========================================================= */
.sc-review-credit {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #d8dee6;
    font-size: 0.82em;
    line-height: 1.7;
    color: #667085;
}
.sc-review-credit a {
    color: #0056b3;
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 6px;
}
.sc-review-credit a:hover {
    opacity: 0.75;
}


/* ============================================================
   P3. スマホの使い勝手（2026-09-18 追加）

   実測で見つかった問題だけを直す。既存の @media ブロックは
   1つも触らず、ここにまとめる（触る回数を増やさないため）。

   実測で直したもの:
   1. 追従CTAが画面の16%を占有 → 2ボタンを横並びにして 126px→67px（8%）
   2. 追従CTAのボタンが 38px / 42px → 48px（指で押せる大きさ）
   3. ★ ページトップボタンが追従CTAの2つ目のボタンに重なっていた。
      右端52px分がページトップ扱いで、CTAを押したつもりが先頭へ飛んでいた
      （169製品ページ・記事で発生。改修前からの不具合）→ 上へ逃がす
   4. 一覧の製品名リンクが高さ17px（display:inline のため）→ 44px
   5. 絞り込みの「クリア」が19px → 44px
   6. 12px未満の文字（パンくず10px・各種ラベル11px・フッター11.3px）→ 12px
      一覧ページで 28件 → 0件

   触らなかったもの:
   ・問い合わせフォーム … 入力欄は56px高・16px で既に良好（iOSの自動ズームも起きない）
   ・Site Reviews の口コミ投稿フォーム … プラグイン側のため。更新で壊れるのを避ける
   ============================================================ */
@media (max-width: 768px) {

    /* 1・2. 追従CTA: 横並び＋48px */
    .sc-floating-cta {
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .sc-floating-cta .sc-cta-buttons {
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .sc-floating-cta .sc-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 13px !important;
        line-height: 1.3 !important;
        padding: 6px 4px !important;
        white-space: nowrap !important;
    }

    /* 3. ページトップボタンを追従CTAの上へ逃がす */
    .p-fixBtnWrap {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 4. 一覧の製品名リンクを押せる大きさに */
    .sc-card-title a {
        display: inline-block;
        padding: 8px 0;
    }

    /* 5. 絞り込みの「クリア」 */
    .sc-reset-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
    }

    /* 6. 12px未満の文字をなくす */
    .p-breadcrumb__text,
    .sc-maker-badge,
    .sc-price-box .label,
    .sc-spec-item .label,
    .sc-radio-sub,
    .sc-cta-micro,
    .sc-review-credit {
        font-size: 12px;
    }
    .sc-review-credit a {
        display: inline-block;
        padding: 6px 0;
    }
    .c-categoryList__link,
    .c-tagList__link {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .l-footer__nav a {
        font-size: 12px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}


/* ============================================================
   一覧ページ改修 第1弾（2026-09-18 追加）
   /products/ /wifi-ap/ /nas-storage/ /vpn-router/ の4本

   実測（改修前）:
     PC 1440×900 … 最初の製品が y=796〜859。最初の画面に製品がほぼ0件
     スマホ 375×812 … 最初の製品まで 1.7〜2.5画面スクロール
                      絞り込みフォームが 566〜1,030px・折りたたみなしで製品の手前にあった

   やったこと:
     A. 導入ブロックは上部のまま、スマホだけ写真と余白を詰めて 約585px → 約420px に
        （一覧の下へ移す案は、デザイン上 上部に置くほうがよいという判断で見送り）
     B. 絞り込みを <details> で包み、スマホでは閉じた状態で表示
        絞り込み・並び替えの後は、スマホで導入ブロックを飛ばして結果の頭から見せる（テンプレート側）
     G. 見出し直下に「全◯製品を掲載｜最終更新｜掲載・評価の基準」
   ============================================================ */

/* G. 見出し直下のメタ行
   SWELL の見出し（.c-pageTitle__inner）は float で浮いているため clear が要る */
.sc-archive-meta {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 12px 0 24px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #667085;
}
.sc-archive-meta__sep {
    color: #cfd8e3;
}
.sc-archive-meta a {
    color: #0056b3;
    text-decoration: underline;
}

/* B. 絞り込みの折りたたみ
   PC では開いたまま・見出しボタンは出さない（従来どおりの左カラム） */
.sc-filter-details > summary {
    display: none;
}

@media (max-width: 768px) {

    .sc-archive-meta {
        margin: 10px 0 16px;
    }

    /* A. 導入ブロックを詰める（文章はそのまま・写真 約230px → 140px）
       写真の列は縦並びでも flex-basis:45% が残って height が効かないため flex を上書きする */
    .sc-archive-intro {
        padding: 16px 0;
    }
    .sc-intro-col {
        padding: 18px 18px 16px;
    }
    .sc-intro-badge {
        margin-bottom: 8px;
        padding: 3px 10px;
        font-size: 11px;
    }
    .sc-intro-concept {
        margin-bottom: 2px;
        font-size: 14px;
    }
    .sc-intro-heading {
        margin-bottom: 8px;
        font-size: 21px;
    }
    .sc-intro-desc {
        font-size: 14px;
        line-height: 1.7;
    }
    .sc-intro-col--img {
        flex: 0 0 auto;
        height: 140px;
        padding: 0; /* 上の .sc-intro-col の余白を写真には付けない */
    }
    .sc-intro-figure {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    /* スマホでは外側の白いカードを外し、開いたときだけフォームにカードを付ける
       （閉じたボタンの周りに余白25pxの枠が残って二重の枠に見えるのを防ぐ） */
    .sc-sidebar {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .sc-filter-details {
        margin-bottom: 12px;
    }
    .sc-filter-details > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 50px;
        padding: 0 16px;
        border: 1px solid #cfd8e3;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        font-size: 15px;
        font-weight: 700;
        color: #112a46;
        cursor: pointer;
        list-style: none;
    }
    .sc-filter-details > summary::-webkit-details-marker {
        display: none;
    }
    .sc-filter-details__count {
        margin-left: 8px;
        padding: 1px 8px;
        border-radius: 999px;
        background: #0e7a8a;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }
    .sc-filter-details > summary::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid #667085;
        border-bottom: 2px solid #667085;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .2s;
    }
    .sc-filter-details[open] > summary {
        border-radius: 10px 10px 0 0;
        border-bottom-color: transparent;
    }
    .sc-filter-details[open] > summary::after {
        transform: rotate(-135deg) translateY(-2px);
    }
    .sc-filter-details[open] > .sc-filter-box {
        padding: 18px 16px;
        border: 1px solid #cfd8e3;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        background: #fff;
    }
    /* 開くと「条件で絞り込む」「条件を絞り込む」が2回出るため、内側の見出しを隠す（クリアは残す） */
    .sc-filter-details .sc-filter-heading {
        display: none;
    }
    .sc-filter-details .sc-filter-header {
        justify-content: flex-end;
    }
}


/* ============================================================
   一覧ページ改修 第2弾（2026-09-19 追加）— 製品カードを軽くする
   /products/ /wifi-ap/ /nas-storage/ /vpn-router/ ＋ 検索結果の製品表示（search.php）

   実測（改修前）:
     スマホ 375px … カード1枚 684px（写真250・見出し84・スペック74・コメント92・価格とボタン106）→ 1画面に約1件
     PC 1440px    … カード1枚 312px（1列）→ 1画面に約2.5件

   やったこと（見た目はCSSだけ。テンプレートは UTM のスループット追加と VPN の空の値を隠す2点のみ）:
     スマホ … 写真を左に小さく（92px）、製品名をその右に。コメントは2行まで。価格とボタンを横1列に
     PC     … 写真を小さく（170px）。1180px以上では価格とボタンを右の列に縦に並べて、全カードで価格の位置を揃える
   ============================================================ */

/* ---------- PC・タブレット（651px〜） ---------- */
@media (min-width: 651px) {
    .sc-card-row {
        margin-bottom: 14px;
    }
    .sc-card-thumb-link {
        width: 170px;
        padding: 14px;
    }
    .sc-card-body-row {
        padding: 18px 22px;
    }
    .sc-card-title {
        font-size: 1.15rem;
    }
    .sc-model-num {
        margin-bottom: 10px;
    }
    .sc-spec-tags {
        margin-bottom: 10px;
    }
    .sc-pro-comment-box {
        margin-bottom: 12px;
        padding: 10px 14px;
    }
    /* 「詳細スペックを見る」はどの幅でも1行・縮めない
       （価格が「¥350,000」のように長いと押し縮められ、「る」だけ折れる環境があった） */
    .sc-card-footer .sc-btn-detail {
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* コメントは2行まで（全文は詳細ページ） */
    .sc-comment-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

/* PC（1180px〜）: 価格とボタンを右の列に。全カードで価格が同じ位置に来る
   それより狭いと本文の列が細くなりすぎる（960pxで110px）ため、651〜1179px は横並びのまま詰めるだけ */
@media (min-width: 1180px) {
    .sc-card-body-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 172px;
        grid-template-areas:
            "head foot"
            "tags foot"
            "cmt  foot";
        grid-template-rows: auto auto 1fr;
        column-gap: 22px;
        align-content: start;
    }
    .sc-card-header      { grid-area: head; }
    .sc-spec-tags        { grid-area: tags; }
    .sc-pro-comment-box  { grid-area: cmt; margin-bottom: 0; align-self: start; }
    .sc-card-footer {
        grid-area: foot;
        margin-top: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 12px;
        padding-left: 20px;
        border-left: 1px solid var(--sc-border);
    }
    .sc-price-box {
        text-align: center;
    }
    .sc-card-footer .sc-btn-detail {
        padding: 10px 8px;
        text-align: center;
    }
}

/* ---------- スマホ（〜650px） ---------- */
@media screen and (max-width: 650px) {
    /* 写真（左）＋製品名（右）を1段目に、スペック・コメント・価格はその下に全幅で */
    .sc-card-row {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
        padding: 14px;
        margin-bottom: 12px;
        position: relative; /* メーカー名の位置の基準 */
    }
    .sc-card-body-row {
        display: contents;
    }
    .sc-card-thumb-link {
        grid-column: 1;
        grid-row: 1;
        width: 92px;
        height: 92px;
        margin: 0;
        padding: 6px;
        border: 1px solid var(--sc-border);
        border-radius: 8px;
        position: static; /* メーカー名を写真の枠の外（製品名の上）に出すため */
    }
    .sc-card-thumb-link img {
        max-height: 100%;
    }
    /* メーカー名は製品名の上に全文で（写真の上に重ねると 92px では「WatchGu…」と切れるため）
       製品名にメーカー名が入っていない製品がある（Firebox T45・Quantum Spark 1600 など）ので隠さない */
    .sc-maker-badge {
        top: 14px;
        left: 118px; /* 余白14 + 写真92 + 間隔12 */
        max-width: calc(100% - 132px);
        padding: 0 6px;
        line-height: 1.6;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 販売終了（VPN）: テンプレートが写真の枠に直接かけているグレー化を画像だけに移す
       （枠に filter があるとメーカー名の位置の基準が枠になり、「Y」のように切れるため） */
    .is-eol .sc-card-thumb-link {
        opacity: 1 !important;
        filter: none !important;
    }
    .is-eol .sc-card-thumb-link img {
        opacity: .6;
        filter: grayscale(1);
    }
    .sc-card-header {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        padding-top: 22px;
    }
    .sc-card-title {
        font-size: 16px;
        line-height: 1.4;
        margin: 0;
    }
    /* 製品名は2行まで。押せる高さ44pxは確保（P3） */
    .sc-card-title a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        min-height: 44px;
        padding: 8px 0;
        box-sizing: border-box;
    }
    .sc-model-num {
        font-size: 12px;
        margin: 0;
    }
    .sc-spec-tags,
    .sc-pro-comment-box,
    .sc-card-footer {
        grid-column: 1 / -1;
        margin: 0;
    }
    .sc-spec-tags {
        gap: 6px;
    }
    .sc-tag-item {
        padding: 3px 8px;
        gap: 4px;
    }
    .sc-tag-item svg {
        width: 12px;
        height: 12px;
    }
    .sc-pro-comment-box {
        padding: 8px 10px;
        border-left-width: 3px;
    }
    .sc-comment-text {
        font-size: 12.5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    /* 価格（左）とボタン（右）を横1列に */
    .sc-card-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .sc-price-box .price {
        font-size: 19px;
    }
    .sc-card-footer .sc-btn-detail { /* カードの中だけ（検索ページの「記事の一覧を見る」等は従来どおり） */
        width: auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 18px;
        white-space: nowrap;
    }
}

/* 小さいスマホ（〜374px。iPhone SE 初代・一部Android）: 価格とボタンが横1列に収まるよう少し詰める
   （320pxでは カードの内側238px に 価格89＋間隔12＋ボタン157 が入らず、はみ出していた） */
@media screen and (max-width: 374px) {
    .sc-card-row {
        padding: 12px;
        column-gap: 10px;
    }
    .sc-maker-badge {
        top: 12px;
        left: 114px; /* 余白12 + 写真92 + 間隔10 */
        max-width: calc(100% - 126px);
    }
    .sc-card-footer {
        gap: 8px;
    }
    .sc-price-box .price {
        font-size: 17px;
    }
    .sc-card-footer .sc-btn-detail {
        padding: 0 12px;
    }
}


/* ============================================================
   製品DB個別ページ → 関連記事（R4 先行分・2026-09-19 追加）
   single-*.php の見積もりCTAの直後・口コミの前に sc_output_related_articles() で出る
   PC: 3列のカード（既存の「関連製品」カードと同じ枠）／ スマホ: 写真を左にした横長の行
   ============================================================ */
.sc-rel-articles {
    margin-top: 50px;
}
.sc-rel-articles__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sc-rel-articles__item {
    margin: 0;
    padding: 0;
}
.sc-rel-articles__item::before {
    content: none; /* SWELL の ul の装飾を消す */
}
.sc-rel-articles__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    transition: all 0.3s;
}
.sc-rel-articles__link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e0;
}
.sc-rel-articles__thumb {
    display: block;
    aspect-ratio: 1200 / 630; /* サイトのアイキャッチの比率（1200×630）。PC・スマホとも切らずに表示 */
    background: #f1f5f9;
    overflow: hidden;
}
.sc-rel-articles__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sc-rel-articles__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
}
.sc-rel-articles__cat {
    align-self: flex-start;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--sc-main-light, #e6f4f6);
    color: var(--sc-main, #0e7a8a);
    font-size: 12px;
    font-weight: 700;
}
.sc-rel-articles__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}
.sc-rel-articles__link:hover .sc-rel-articles__title {
    color: var(--sc-link, #0056b3);
}

@media (max-width: 768px) {
    .sc-rel-articles {
        margin-top: 40px;
    }
    .sc-rel-articles__list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .sc-rel-articles__link {
        flex-direction: row;
        align-items: center;
        min-height: 72px;
    }
    .sc-rel-articles__thumb {
        flex: 0 0 112px;
        width: 112px;
        margin-left: 8px;
        border-radius: 6px; /* 比率は上の 1200/630 のまま（112×59） */
    }
    .sc-rel-articles__body {
        padding: 10px 12px;
        gap: 4px;
    }
    .sc-rel-articles__title {
        font-size: 14px;
    }
}