/* スマホの番人シリーズの導線用（2026-08-11 追加） */
/* --- ヘッダーのシリーズ切替：ナビの他の項目と同じ文字の見た目＋小さな山形（一般的な形）。
       間隔はナビの他の項目とまったく同じ26pxにそろえる --- */
.nav nav .prod{position:relative;display:inline-block;margin-left:26px;vertical-align:middle}
/* 「スマホの番人シリーズ」＝周りと同じ黒い文字・太字だけで見分ける（2026-08-11 Rさん確定。赤の帯は却下） */
.nav nav .prod>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0;font-size:14.5px;font-weight:900;color:var(--text);white-space:nowrap;user-select:none}
.nav nav .prod>summary::-webkit-details-marker{display:none}
.nav nav .prod>summary:hover{color:var(--brand-d)}
.nav nav .prod>summary>svg{width:12px;height:12px;color:var(--text);transition:transform .18s ease}
.nav nav .prod[open]>summary>svg{transform:rotate(180deg)}
/* メニュー（スマートフォン幅）の「スマホの番人シリーズ」も同じ＝黒い文字の太字（他の行と同じ作り） */
.menu-links a.menu-series{font-weight:900}
.prod-list{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:352px;max-width:86vw;background:#fff;border:1.5px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(16,28,52,.18);padding:10px;z-index:80}
.prod-cap{display:block;padding:6px 12px 9px;font-size:11.5px;font-weight:900;letter-spacing:.12em;color:var(--sub)}
/* 2件が上下でまったく同じ位置から始まるように、絵・名前・状態・説明を1本の列にそろえる。
   ヘッダーのナビの a には左の余白26pxが付くため、この一覧の中では打ち消す（片方だけずれる原因だった） */
.nav nav .prod-list a{margin:0;font-size:inherit;font-weight:inherit;color:var(--text);text-decoration:none}
.prod-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:12px;text-decoration:none;color:var(--text)}
.prod-item img{flex:none;width:40px;height:40px;border-radius:11px;margin-top:1px}
.prod-txt{flex:1 1 auto;min-width:0;display:block}
.prod-item b{display:block;font-size:14.5px;font-weight:900;line-height:1.45}
.prod-tag{display:inline-block;margin:4px 0 5px;font-style:normal;font-size:10.5px;font-weight:900;padding:2px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep)}
.prod-item small{display:block;font-size:12px;color:var(--sub);line-height:1.6}
.prod-check{flex:none;align-self:center;color:var(--brand-d)}
.prod-check svg{width:18px;height:18px;display:block}
a.prod-item:hover{background:var(--brand-soft)}
.prod-item.is-current{background:#F5F7FB;cursor:default}
@media(max-width:920px){.nav nav .prod>summary{font-size:12px;padding:6px 2px}
  .prod-list{left:auto;right:0;transform:none}}
.series-card-sec{padding:0 0 12px}
.series-card{display:flex;align-items:center;gap:22px;flex-wrap:wrap;border:1px solid var(--brand-line);border-radius:20px;background:var(--surface);padding:26px 28px;box-shadow:0 10px 30px rgba(16,28,52,.06)}
.series-ic{width:76px;height:76px;border-radius:18px;flex:none}
.series-body{flex:1 1 320px}
.series-head{display:inline-block;font-size:.82rem;font-weight:800;letter-spacing:.04em;color:var(--brand);margin-bottom:4px}
.series-body h3{font-size:1.32rem;line-height:1.5;margin-bottom:6px}
.series-tag{display:inline-block;margin-left:10px;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep);vertical-align:middle}
.series-body p{color:var(--sub)}
.series-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:14px;background:var(--brand);color:#fff;font-weight:800;white-space:nowrap}
.series-btn:hover{background:var(--brand-d)}
.series-btn .cta-arrow{width:18px;height:18px}
.series-band{background:var(--surface-cool);border-top:1px solid var(--line)}
.series-band h2{text-align:center}
.series-band .sub{text-align:center;margin-bottom:26px}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:1000px;margin:0 auto}
.sb-card{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;text-align:center}
.sb-card:hover{border-color:var(--brand-line);box-shadow:0 12px 34px rgba(16,28,52,.08)}
.sb-card img{width:64px;height:64px;border-radius:16px;margin:0 auto 12px}
.sb-card b{display:block;font-size:1.06rem;margin-bottom:6px}
.sb-tag{display:inline-block;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep);margin-bottom:8px}
.sb-card p{color:var(--sub);font-size:.94rem}
.sb-card.is-current{background:var(--brand-soft);border-color:var(--brand-line)}
.soon-badge{display:inline-flex;align-items:center;padding:14px 22px;border-radius:14px;background:var(--brand-d);color:#fff;font-weight:800}
.soon-badge.big{font-size:1.06rem;padding:16px 28px}
/* 見出しの語のまとまり＝行の途中で割らない */
.nb{white-space:nowrap}
/* 番人B（スマホの番人 セキュリティ）のページの緑＝アプリ本体の colors.xml と同じ値。
   bannin_green #0E8F50／bannin_green_dark #0A6E3C／bannin_band #E3F4EA／bannin_line #DDEAE1。
   面のグラデーションはアプリのアイコンの緑 #2FA366 から主色 #0E8F50・濃緑 #0A6E3C へ（すべてアプリの値） */
body.sec{--brand:#0E8F50;--brand-d:#0A6E3C;--brand-deep:#0A6E3C;--brand-soft:#E3F4EA;--brand-line:#DDEAE1;
  --brand-grad:linear-gradient(120deg,#2FA366 0%,#0E8F50 55%,#0A6E3C 100%);
  --blue:#0E8F50;--blue-dark:#0A6E3C;--blue-soft:#E3F4EA;--grad:var(--brand-grad)}
body.sec .hero-mock .phone-after{position:static;transform:none;margin:0 auto}
/* 白地の上の押しどころは主色。押している間だけ濃緑 */
body.sec .nav .cta{background:var(--brand);box-shadow:0 8px 18px rgba(14,143,80,.30)}
body.sec .menu-cta{background:var(--brand);box-shadow:0 12px 26px rgba(14,143,80,.30)}
body.sec .series-btn{background:var(--brand)}
body.sec .series-btn:hover{background:var(--brand-d)}
body.sec .sticky-store{box-shadow:0 10px 28px rgba(10,110,60,.35)}
/* 緑の面の上に置く押しどころは、白地に濃い緑の文字にして浮かせる（背景と同色にしない） */
body.sec .bottom-cta .soon-badge,body.sec .coming-bar .soon-badge,body.sec .dark .soon-badge,
body.sec .bottom-cta .series-btn,body.sec .coming-bar .series-btn,body.sec .dark .series-btn{
  background:#fff;color:var(--brand-deep);box-shadow:0 12px 28px rgba(6,44,25,.28);border:2px solid #fff}
body.sec .bottom-cta .soon-badge:hover,body.sec .dark .soon-badge:hover{background:#F2FBF6}
@media(max-width:900px){.series-card{padding:20px}.series-btn{width:100%;justify-content:center}}