/* =============================================================================
   FujiSSL Docs — 商品システム CSS (product-system.css)
   メガメニュー / 商品サイドバー / FAQ体裁 / SSLチョイサー / 2カラム / 本文の読みやすさ
   既存 tech-docs.css の :root トークンを利用（--red, --paper, --ink, --line* など）。
   ========================================================================== */

:root{
  --crest:#852428;             /* NIJIMOロゴ色（書き換えない） */
  --ps-nav-w:288px;
  --ps-measure:760px;
}

/* =============================================================================
   1. グローバル メガメニュー（取扱商品一覧）
   header.php の primary メニュー先頭に products-megamenu.php が差し込む
   ========================================================================== */
.fujissl-megamenu-item{ list-style:none; position:relative; display:flex; align-items:center; height:100%; }
/* nav.main は親テーマが justify-content:center / flex:1（2項目だと中央で浮く）。
   かつ親の nav.main>li>a が私の指定より詳細度が高い。header.site で上げて統一・左寄せ。 */
header.site nav.main{ justify-content:flex-start; gap:2px; }
header.site nav.main > li.menu-item{ list-style:none; position:relative; display:inline-flex; align-items:center; }

header.site nav.main .fujissl-megamenu-trigger,
header.site nav.main .fujissl-nav-simple > a{
  display:inline-flex; align-items:center; gap:5px;
  margin:0; padding:8px 11px; height:auto; line-height:1.3;
  background:none; border:0; border-radius:6px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink); white-space:nowrap;
  transition:.15s var(--ease);
}
header.site nav.main .fujissl-megamenu-trigger:hover,
header.site nav.main .fujissl-nav-simple > a:hover{ color:var(--red-dark); background:var(--red-tint); }
header.site nav.main .fujissl-megamenu-item.open .fujissl-megamenu-trigger{ color:var(--red-dark); background:var(--red-tint); }
.fujissl-megamenu-caret{ width:15px; height:15px; transition:transform .2s var(--ease); }
.fujissl-megamenu-item.open .fujissl-megamenu-caret{ transform:rotate(180deg); }

.fujissl-megamenu-panel{
  position:absolute; top:calc(100% + 1px); left:-14px; width:640px; z-index:130;
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--red);
  border-radius:0 0 12px 12px; box-shadow:0 24px 50px -18px rgba(10,21,48,.28);
  padding:18px;
}
.fujissl-megamenu-panel[hidden]{ display:none; }
.fujissl-megamenu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.fujissl-megamenu-card{ display:flex; gap:13px; padding:13px 12px; border-radius:9px; border:1px solid transparent; transition:.15s var(--ease); }
.fujissl-megamenu-card:hover{ background:var(--red-tint); border-color:var(--red-soft); }
.fujissl-megamenu-icon{ width:38px; height:38px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--paper); border:1px solid var(--line-soft); }
.fujissl-megamenu-icon svg{ width:20px; height:20px; }
.fujissl-megamenu-text{ display:flex; flex-direction:column; min-width:0; }
.fujissl-megamenu-label{ font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.4; color:var(--ink); display:flex; align-items:center; gap:7px; }
.fujissl-megamenu-blurb{ font-size:12px; color:var(--muted,#6b7280); margin-top:2px; line-height:1.5; }
.fujissl-megamenu-badge{ font-family:var(--font-display); font-size:10px; font-weight:700; background:var(--green); color:#fff; padding:2px 7px; border-radius:5px; }

/* SSL手動更新メガメニュー（3列リンク集） */
.fujissl-megamenu-manual .fujissl-megamenu-panel-cols{ width:min(94vw,680px); left:auto; right:0; }
.fujissl-megamenu-auto .fujissl-megamenu-panel-cols{ width:min(94vw,680px); left:0; right:auto; }
.fujissl-megamenu-cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; padding:18px 20px; }
.fujissl-mm-col{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fujissl-mm-coltitle{ font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--red); letter-spacing:.03em; border-bottom:1px solid var(--line-soft); padding-bottom:5px; margin-bottom:4px; }
.fujissl-mm-col > a{ font-size:13px; color:var(--ink); text-decoration:none; padding:4px 2px; border-radius:5px; line-height:1.45; transition:.12s var(--ease); }
.fujissl-mm-col > a:hover{ color:var(--red-dark); background:var(--red-tint); padding-left:6px; }
.fujissl-mm-col-dark{ background:var(--ink,#0a1530); border-radius:9px; padding:14px 15px; }
.fujissl-mm-col.fujissl-mm-col-dark .fujissl-mm-coltitle{ color:#ffd28a !important; border-bottom-color:rgba(255,255,255,.22) !important; }
.fujissl-mm-col.fujissl-mm-col-dark > a{ color:rgba(255,255,255,.88) !important; font-size:12.5px; white-space:normal; word-break:break-word; }
.fujissl-mm-col.fujissl-mm-col-dark > a small{ display:block; font-size:10.5px; color:rgba(255,255,255,.55) !important; margin-top:1px; }
.fujissl-mm-col.fujissl-mm-col-dark > a:hover{ color:#fff !important; background:rgba(255,255,255,.12) !important; }
.fujissl-mm-cta{ background:var(--red); color:#fff !important; border-radius:6px; padding:7px 12px !important; text-align:center; font-weight:700; margin-top:4px; }
.fujissl-mm-cta:hover{ background:var(--red-dark); padding-left:12px !important; }
/* 自動化メニュー：ACMEを主役に強調 */
.fujissl-mm-strong{ font-weight:700 !important; color:var(--red-dark,#a50d26) !important; }
.fujissl-mm-reco{ display:inline-block; font-size:9.5px; font-weight:700; background:var(--red,#c8102e); color:#fff; padding:1px 6px; border-radius:4px; vertical-align:1px; margin-left:2px; }
@media (max-width:900px){
  .fujissl-megamenu-manual .fujissl-megamenu-panel-cols,
  .fujissl-megamenu-auto .fujissl-megamenu-panel-cols{ width:100%; right:auto; left:0; }
  .fujissl-megamenu-cols{ grid-template-columns:1fr; gap:10px; }
}

/* ── ハンバーガー / モバイルドロワー ───────────────────────── */
/* PCでは navwrap は存在しないかのように振る舞い、元の logo/nav/cta 横並びを維持 */
.fujissl-navwrap{ display:contents; }
.fujissl-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:9px;
  background:none; border:0; cursor:pointer; border-radius:8px;
}
.fujissl-burger span{
  display:block; height:2px; width:100%; background:var(--ink,#0a1530);
  border-radius:2px; transition:.25s var(--ease,ease);
}
.fujissl-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.fujissl-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.fujissl-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:980px){
  .fujissl-burger{ display:flex; margin-left:auto; }
  header.site .container{ position:relative; flex-wrap:wrap; }
  /* ドロワー本体：不透明パネルとして最前面に。初期は閉じる */
  .fujissl-navwrap{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch;
    width:100%; z-index:9999;
    background:#fff; border-top:1px solid var(--line-soft,#ebe6da);
    box-shadow:0 12px 28px rgba(10,21,48,.16);
    padding:8px 16px 18px; margin:0; gap:4px;
    max-height:calc(100vh - 100%); overflow-y:auto;
  }
  .fujissl-navwrap.open{ display:flex; }
  /* ナビをモバイルでは縦積み（親テーマの display:none 等を確実に上書き） */
  header.site .fujissl-navwrap nav.main{ display:flex !important; flex-direction:column; align-items:stretch; gap:2px; width:100%; visibility:visible !important; opacity:1 !important; height:auto !important; position:static !important; }
  header.site nav.main > li.menu-item{ display:block !important; width:100%; }
  header.site nav.main .fujissl-megamenu-trigger,
  header.site nav.main .fujissl-nav-simple > a{
    width:100%; justify-content:space-between; font-size:15px; padding:13px 14px;
    border-bottom:1px solid var(--line-soft,#ebe6da); border-radius:0;
  }
  /* メガメニューパネルはモバイルでは静的展開（アコーディオン的に） */
  header.site nav.main .fujissl-megamenu-item .fujissl-megamenu-panel{
    position:static; width:100%!important; box-shadow:none; border:0;
    margin:0; padding:0; background:var(--paper-2,#f5f1e8); border-radius:0;
    min-width:0!important; left:0!important; right:auto!important;
  }
  /* ドロワー内は全パネル1列・はみ出し防止 */
  header.site nav.main .fujissl-megamenu-grid,
  header.site nav.main .fujissl-megamenu-cols{ grid-template-columns:1fr!important; gap:4px!important; padding:8px 10px!important; }
  header.site nav.main .fujissl-megamenu-item .fujissl-megamenu-panel[hidden]{ display:none; }
  /* CTAボタンは縦並び・全幅（両方確実に表示） */
  header.site .fujissl-navwrap .header-cta{ display:flex !important; flex-direction:column; gap:8px; width:100%; margin-top:10px; }
  header.site .fujissl-navwrap .header-cta .btn{ display:flex !important; width:100%; text-align:center; justify-content:center; visibility:visible !important; opacity:1 !important; }
}

/* =============================================================================
   2. 2カラム シェル（single.php / page.php 共通）
   ========================================================================== */
.faqs-shell{
  position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:0 28px;
  align-items:start;
}
.faqs-shell-withside{
  display:grid; grid-template-columns:var(--ps-nav-w) minmax(0,1fr); gap:48px;
}
.faqs-shell-centered{ max-width:1240px; margin-left:auto; margin-right:auto; padding-left:28px; padding-right:28px; }
/* サイドバー全廃に伴い中央寄せは広く使う。長文記事は読み幅を保ち間延びを防ぐ */
.faqs-shell-centered .faqs-main{ max-width:none; width:100%; }

.faqs-leftnav{ min-width:0; }
.faqs-leftnav-sticky{ position:sticky; top:24px; padding:30px 0 60px; }
.faqs-main{ min-width:0; padding:34px 0 80px; }
.faqs-shell-withside .faqs-main{ max-width:none; }

/* =============================================================================
   3. 商品サイドバー（目的別 / 方法対応）
   ========================================================================== */
.psidebar-product{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--ink); padding:0 6px 12px; }
.psidebar-dot{ width:9px; height:9px; border-radius:50%; background:var(--crest); flex:none; }

/* 選んだ方法の見出し＋「別の方法を選ぶ」戻り導線（トグルは廃止） */
.psidebar-sub{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:-4px 6px 16px; padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
.psidebar-sub-name{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--red-dark); }
.psidebar-back{ font-family:var(--font-display); font-weight:600; font-size:11.5px; color:var(--muted,#6b7280); white-space:nowrap; }
.psidebar-back::before{ content:"↩ "; }
.psidebar-back:hover{ color:var(--red-dark); }

/* SSL方法選択（入口）/ssl/ ページ ― 幅を使って“入口”の佇まいに */
.ssl-gw-inner{ max-width:1160px; margin:0 auto; padding:0 32px; position:relative; }
.ssl-gw-hero{ position:relative; padding:44px 0 36px; background:linear-gradient(180deg,#fff,var(--paper)); border-bottom:1px solid var(--line-soft); overflow:hidden; }
.ssl-gw-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 85%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 85%);
}
.ssl-gw-hero .breadcrumb{ margin-bottom:16px; }
.ssl-gateway-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.07em; color:var(--crest); text-transform:uppercase; margin:0 0 10px; }
.ssl-gateway-title{ font-family:var(--font-display); font-weight:800; font-size:35px; letter-spacing:-.015em; line-height:1.25; margin:0 0 14px; color:var(--ink); }
.ssl-gateway-lead{ font-size:16px; color:#475069; line-height:1.9; max-width:760px; margin:0; }
.ssl-gateway-lead strong{ color:var(--ink); font-weight:700; }

.ssl-gw-body{ padding:40px 0 84px; }
.ssl-gw-body .ssl-choose{ gap:24px; }
.ssl-gw-body .ch-card{ padding:30px 28px 26px; }
.ssl-gw-body .ch-name{ font-size:19px; }
.ssl-gw-body .ch-desc{ font-size:14px; }

.ssl-gw-help{ text-align:center; margin:32px 0 0; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--muted,#6b7280); }
.ssl-gw-help strong{ color:var(--red-dark); }

.ssl-gw-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line-soft); font-family:var(--font-display); font-size:13.5px; color:#475069; }
.ssl-gw-trust > div{ display:flex; align-items:center; gap:9px; }
.ssl-gw-trust > div::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); opacity:.55; flex:none; }
.ssl-gw-trust strong{ color:var(--red-dark); font-weight:800; }

@media (max-width:980px){
  .ssl-gw-body .ssl-choose{ grid-template-columns:1fr; }
  .ssl-gateway-title{ font-size:27px; }
}

.psidebar-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.psidebar-link{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px; font-family:var(--font-body); font-weight:500; font-size:14px; color:#33405c; position:relative; transition:.14s var(--ease); }
.psidebar-ic{ width:18px; height:18px; color:var(--line-strong); flex:none; transition:.14s; }
.psidebar-ic svg{ width:18px; height:18px; }
.psidebar-link:hover{ background:#fff; color:var(--ink); }
.psidebar-link:hover .psidebar-ic{ color:var(--red); }
.psidebar-link.active{ background:var(--red-tint); color:var(--red-dark); font-weight:700; }
.psidebar-link.active::before{ content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:3px; background:var(--red); }
.psidebar-link.active .psidebar-ic{ color:var(--red); }
.psidebar-div{ height:1px; background:var(--line-soft); margin:14px 6px; }
.psidebar-extra .psidebar-link{ font-size:13px; color:var(--muted,#6b7280); }

/* =============================================================================
   4. 記事ヘッダー（FAQ / お知らせ・固定ページ 共通の体裁）
   ========================================================================== */
.faqs-cat{ display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.03em; color:var(--red-dark); background:var(--red-soft); padding:4px 12px; border-radius:999px; margin-bottom:16px; }
.faqs-cat.info{ color:var(--blue); background:var(--blue-soft); }

.faqs-title{ display:flex; gap:14px; align-items:flex-start; font-family:var(--font-display); font-weight:800; font-size:29px; line-height:1.5; letter-spacing:-.01em; margin:0 0 16px; color:var(--ink); }
.faqs-title.is-plain{ display:block; font-size:30px; }
.faqs-q-mark{ font-family:var(--font-serif); font-weight:700; color:var(--red); font-size:34px; line-height:1.2; flex:none; }
.faqs-q-text{ display:block; }

.article-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.05em; color:var(--muted,#6b7280); text-transform:uppercase; margin-bottom:8px; }
.article-lead{ font-size:16px; color:#475069; line-height:1.9; margin:0 0 6px; }

.faqs-meta{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--muted,#6b7280); padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid var(--line-soft); }
.faqs-meta-sep{ opacity:.5; }

/* 折り畳み目次（本文の上） */
details.faqs-toc{ background:#fff; border:1px solid var(--line-soft); border-radius:10px; margin-bottom:34px; overflow:hidden; }
details.faqs-toc summary{ cursor:pointer; list-style:none; padding:13px 18px; font-family:var(--font-display); font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:10px; color:var(--ink); }
details.faqs-toc summary::-webkit-details-marker{ display:none; }
details.faqs-toc summary::before{ content:""; width:13px; height:13px; border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg); transition:.2s; }
details.faqs-toc[open] summary::before{ transform:rotate(45deg); }
.faqs-toc-body{ padding:2px 18px 14px 40px; }
.faqs-toc-body a{ display:block; padding:5px 0 5px 14px; font-size:13.5px; color:#475069; border-left:2px solid var(--line-soft); }
.faqs-toc-body a:hover{ color:var(--red-dark); border-left-color:var(--red); }
.faqs-toc-body ul{ list-style:none; margin:0; padding:0; }

/* A. 回答（FAQのみ） */
.faqs-answer-mark{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.05em; color:var(--red-dark); margin-bottom:16px; }
.faqs-a-mark{ font-family:var(--font-serif); font-size:22px; }

/* 解決しない場合（FAQのみ） */
.faqs-fallback{ margin-top:30px; padding:22px 24px; border:1px dashed var(--line-strong); border-radius:12px; background:var(--paper); }
.faqs-fallback h2{ font-family:var(--font-display); font-weight:800; font-size:16px; margin:0 0 6px; border:0; padding:0; }
.faqs-fallback h2::before{ display:none; }
.faqs-fallback p{ font-size:14px; color:var(--muted,#6b7280); margin:0 0 14px; }
.faqs-fallback-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-outline{ display:inline-flex; align-items:center; border:1.5px solid var(--line-strong); color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:13px; padding:8px 16px; border-radius:8px; transition:.15s var(--ease); }
.btn-outline:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-tint); }

/* =============================================================================
   5. 本文の読みやすさ（.article-body の上書き：行間・幅・見出し）
   ========================================================================== */
.faqs-main .article-body{ font-size:16.5px; line-height:2.0; color:#1c2540; max-width:none; }
.faqs-main .article-body > * + *{ margin-top:1.4em; }
.faqs-main .article-body h2{ font-size:21px; margin-top:2.4em !important; padding-top:0; padding-bottom:.5em; border-bottom:1px solid var(--line-soft); }
.faqs-main .article-body h2::before{ position:static; opacity:1; width:5px; height:20px; border-radius:3px; background:var(--red); display:inline-block; margin-right:11px; vertical-align:-3px; }
.faqs-main .article-body h3{ font-size:17px; }
.faqs-main .article-body p{ margin-bottom:0; }

/* callout: tech-docs では grid(22px+1fr=アイコン前提)。アイコン無しで使うと
   見出し/段落が22px枠に潰れて日本語が1文字幅になる。アイコン無しは block に。 */
.faqs-main .article-body .callout:not(:has(.callout-icon)){ display:block; }
.faqs-main .article-body .callout-gold{
  background:var(--amber-soft); border-left:3px solid var(--amber); color:var(--ink);
}
.faqs-main .article-body .callout-gold h4{
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--amber); margin:0 0 8px;
}
.faqs-main .article-body .callout-gold p{ margin:0 0 .9em !important; }
.faqs-main .article-body .callout-gold p:last-child{ margin-bottom:0 !important; }

/* =============================================================================
   6. SSL ワンクッション チョイサー（[fujissl_ssl_methods]）
   ========================================================================== */
.ssl-choose{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:8px 0 12px; }
.ssl-choose .ch-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 22px 22px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:.18s var(--ease); }
.ssl-choose .ch-card:hover{ border-color:var(--red); box-shadow:0 16px 38px -20px rgba(10,21,48,.3); transform:translateY(-3px); }
.ssl-choose .ch-card.reco{ border-color:var(--red); border-width:1.5px; }
.ssl-choose .ch-ribbon{ position:absolute; top:0; right:0; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.04em; padding:5px 14px; border-bottom-left-radius:10px; }
.ssl-choose .ch-ic{ width:46px; height:46px; border-radius:11px; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line-soft); margin-bottom:16px; }
.ssl-choose .ch-ic svg{ width:24px; height:24px; }
.ssl-choose .ch-name{ font-family:var(--font-display); font-weight:800; font-size:18px; margin-bottom:6px; color:var(--ink); }
.ssl-choose .ch-desc{ font-size:13.5px; color:#475069; line-height:1.8; margin-bottom:16px; flex:1; }
.ssl-choose .ch-spec{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; font-family:var(--font-display); font-size:12.5px; }
.ssl-choose .ch-spec .row{ display:flex; justify-content:space-between; gap:10px; padding-bottom:7px; border-bottom:1px dashed var(--line-soft); }
.ssl-choose .ch-spec .row:last-child{ border-bottom:none; padding-bottom:0; }
.ssl-choose .ch-spec .k{ color:var(--muted,#6b7280); font-weight:600; }
.ssl-choose .ch-spec .v{ font-weight:700; color:var(--ink); text-align:right; }
.ssl-choose .ch-go{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:14px; padding:11px; border-radius:8px; border:1.5px solid var(--line-strong); color:var(--ink); transition:.16s var(--ease); }
.ssl-choose .ch-go:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-tint); }
.ssl-choose .ch-card.reco .ch-go{ background:var(--red); color:#fff; border-color:var(--red); }
.ssl-choose .ch-card.reco .ch-go:hover{ background:var(--red-dark); }

/* =============================================================================
   7. レスポンシブ
   ========================================================================== */
@media (max-width:980px){
  .faqs-shell-withside{ grid-template-columns:1fr; gap:8px; }
  .faqs-leftnav-sticky{ position:static; padding:16px 0; }
  .fujissl-megamenu-panel{ width:min(92vw,640px); left:0; }
  .fujissl-navwrap .fujissl-megamenu-panel{ width:100% !important; min-width:0 !important; left:0 !important; right:auto !important; max-width:100% !important; }
  .ssl-choose{ grid-template-columns:1fr; }
  .faqs-title{ font-size:24px; }
  .faqs-title.is-plain{ font-size:25px; }
}

/* =============================================================================
   8. 固定ページ（商品マーケLP等）の本文幅
   読みやすさキャップ(760px)は外しつつ、シェル自体は中央寄せの最大幅で置く。
   max-width:none(全幅)だと margin:0 auto が効かず、本文が左に貼り付いて右が空くため。
   ========================================================================== */
.docs-static-page .faqs-shell{ max-width:1240px !important; padding-left:28px !important; padding-right:28px !important; }
.docs-static-page .faqs-shell-withside{ gap:48px; align-items:stretch !important; grid-template-columns:var(--ps-nav-w) minmax(0,1fr) !important; }
/* sticky を効かせる: 左ナビ列を行の高さまで伸ばし、その中で内側要素を追従させる */
.docs-static-page .faqs-leftnav{ align-self:stretch !important; height:100%; }
.docs-static-page .faqs-leftnav-sticky{ position:sticky !important; top:24px; }
/* 本文列を残り幅いっぱいに（読みやすさキャップ760pxを解除） */
.docs-static-page .faqs-shell-withside .faqs-main{ max-width:none !important; width:auto !important; }
.docs-static-page .faqs-main{ max-width:none !important; }
.docs-static-page .faqs-main .article,
.docs-static-page .faqs-main .faqs-article{ max-width:none !important; width:100% !important; }
.docs-static-page .faqs-main .article-body{ max-width:none !important; width:100% !important; font-size:16px; line-height:1.9; }
/* コンテンツ自身の独自ラッパー(白背景＋max-width)が幅を絞っていても広げる（インラインstyleも上書き） */
.docs-static-page .faqs-main .article-body > *{ max-width:none !important; }
.docs-static-page .faqs-main .article-body img{ max-width:100% !important; height:auto; }
.docs-static-page .faqs-main .article-body > * + *{ margin-top:1.2em; }

/* =============================================================================
   9. SSLランディングページ（/ssl/ 玄関を一本化したLP）
   テーマ直描画。左サイドバー＋本文LP。.article-body を使わないので幅干渉なし。
   ========================================================================== */
/* 玄関LPはシェル中央寄せ＋本文列は残り幅いっぱい（カードを横に並べたいので760px制限を解除） */
/* /ssl/ 中央寄せを確実に効かせる：main を全幅コンテナにし、shell を中央寄せ＋広め */
.fujissl-ssl-gateway-page #main-content,
.fujissl-ssl-gateway-page .docs-faq-single{ width:100%; }
.fujissl-ssl-gateway-page .faqs-shell{ max-width:1180px !important; margin-left:auto !important; margin-right:auto !important; padding-left:28px !important; padding-right:28px !important; box-sizing:border-box; }
.fujissl-ssl-gateway-page .faqs-shell-withside .faqs-main,
.fujissl-ssl-gateway-page .faqs-shell-centered .faqs-main{ max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }

/* 玄関LPでもサイドバーを追従させる（docs-static-pageと同じ仕掛けを玄関ルートにも適用） */
.fujissl-ssl-gateway-page .faqs-leftnav{ align-self:stretch; height:100%; }
.fujissl-ssl-gateway-page .faqs-leftnav-sticky{ position:sticky; top:24px; }

.ssl-lp-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:14px 0 24px; }
.ssl-lp-hero-text{ min-width:0; }
.ssl-lp-hero-visual{ min-width:0; }
.ssl-lp-hero-visual svg{ display:block; width:100%; max-width:430px; height:auto; margin:0 auto; filter:drop-shadow(0 26px 46px rgba(10,21,48,.12)); }

.ssl-lp-trust{ display:flex; flex-wrap:wrap; gap:12px 28px; padding:18px 0; margin-bottom:4px; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); font-family:var(--font-display); font-size:13px; color:#475069; }
.ssl-lp-trust > div{ display:flex; align-items:center; gap:8px; }
.ssl-lp-trust > div::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); opacity:.55; flex:none; }
.ssl-lp-trust strong{ color:var(--red-dark); font-weight:800; }
.ssl-lp-title{ font-family:var(--font-display); font-weight:800; font-size:32px; line-height:1.32; letter-spacing:-.015em; color:var(--ink); margin:0 0 14px; }
.ssl-lp-title em{ color:var(--red); font-style:normal; }
.ssl-lp-lead{ font-size:16px; color:#475069; line-height:1.9; max-width:720px; margin:0 0 22px; }
.ssl-lp-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.ssl-lp-section{ padding:34px 0; border-top:1px solid var(--line-soft); }
.ssl-lp-h2{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink); margin:0 0 8px; display:flex; align-items:center; gap:11px; }
.ssl-lp-h2::before{ content:""; width:5px; height:21px; border-radius:3px; background:var(--red); flex:none; }
.ssl-lp-sub{ font-size:14px; color:#5b6478; line-height:1.85; margin:0 0 20px; }

/* ベネフィットカード */
.ssl-lp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.ssl-lp-card{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:22px 20px; }
.ssl-lp-card .ic{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--red-tint); color:var(--red); margin-bottom:14px; }
.ssl-lp-card .ic svg{ width:21px; height:21px; }
.ssl-lp-card h3{ font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--ink); margin:0 0 7px; }
.ssl-lp-card p{ font-size:13.5px; color:#5b6478; line-height:1.8; margin:0; }

/* 価格ティーザー */
.ssl-lp-price{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ssl-lp-price .pcard{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:22px 18px; text-align:center; }
.ssl-lp-price .pcard .t{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); }
.ssl-lp-price .pcard .amt{ font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--ink); margin:8px 0 4px; }
.ssl-lp-price .pcard .amt span{ font-size:12.5px; font-weight:600; color:#6b7280; margin-left:2px; }
.ssl-lp-price .pcard .d{ font-size:12.5px; color:#6b7280; }
.ssl-lp-price-note{ text-align:center; font-size:12.5px; color:#6b7280; margin-top:14px; }
.ssl-lp-price-note a{ color:var(--red-dark); text-decoration:underline; }

/* ダークCTA */
.ssl-lp-cta{ background:#0a1530; border-radius:16px; padding:42px 36px; text-align:center; margin-top:34px; }
.ssl-lp-cta h2{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 10px; color:#fff; }
.ssl-lp-cta p{ font-size:14.5px; color:#c2cadd; line-height:1.85; margin:0 auto 22px; max-width:560px; }
.ssl-lp-cta .acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ボタン */
.ssl-lp-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:14px; padding:12px 24px; border-radius:10px; background:var(--red); color:#fff; transition:.15s var(--ease); }
.ssl-lp-btn:hover{ background:var(--red-dark); color:#fff; }
.ssl-lp-btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.ssl-lp-btn.ghost:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-tint); }
.ssl-lp-cta .ssl-lp-btn.ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.ssl-lp-cta .ssl-lp-btn.ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

@media (max-width:980px){
  .ssl-lp-grid,
  .ssl-lp-price,
  .ssl-lp-section .ssl-choose{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .ssl-lp-grid,
  .ssl-lp-price,
  .ssl-lp-section .ssl-choose{ grid-template-columns:1fr; }
  .ssl-lp-title{ font-size:25px; }
}

/* SSL LP ヒーローは狭幅で縦積み（文字→画の順） */
@media (max-width:820px){
  .ssl-lp-hero{ grid-template-columns:1fr; gap:22px; }
  .ssl-lp-hero-visual svg{ max-width:380px; }
}

/* SSL LP ― ヒーロー強調（バッジ）＋2大ポイントの大カード */
.ssl-lp-lead strong{ color:var(--ink); font-weight:800; }
.ssl-lp-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.ssl-lp-badge{ display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--red-dark); background:var(--red-tint); border:1px solid #f3d4d8; padding:5px 13px; border-radius:999px; }

.ssl-lp-feat{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.ssl-lp-feat-card{ position:relative; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:28px 26px; }
.ssl-lp-feat-card.price{ background:linear-gradient(180deg,#ffffff,var(--red-tint)); border-color:#f0c9ce; }
.ssl-lp-feat-card .ic{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--red-tint); color:var(--red); margin-bottom:16px; }
.ssl-lp-feat-card.price .ic{ background:#fff; }
.ssl-lp-feat-card .ic svg{ width:24px; height:24px; }
.ssl-lp-feat-card h3{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); margin:0 0 10px; line-height:1.4; }
.ssl-lp-feat-card h3 em{ color:var(--red); font-style:normal; }
.ssl-lp-feat-card p{ font-size:14px; color:#4f5a72; line-height:1.85; margin:0 0 14px; }
.ssl-lp-bigprice{ font-family:var(--font-display); font-weight:800; font-size:40px; color:var(--red-dark); line-height:1; margin:0 0 14px; }
.ssl-lp-bigprice span{ font-size:14px; font-weight:700; color:#6b7280; margin-left:4px; }
.ssl-lp-chip{ display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:11.5px; color:#fff; background:var(--red); padding:5px 12px; border-radius:999px; }

@media (max-width:820px){ .ssl-lp-feat{ grid-template-columns:1fr; } }

/* =============================================================================
   10. 価格表ショートコード [fujissl_price_table]（/price/）
   ========================================================================== */
.fpt{ margin:6px 0 0; }
.fpt-tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
.fpt-table{ width:100%; border-collapse:collapse; background:#fff; }
.fpt-table thead th{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); background:var(--paper); padding:14px 16px; text-align:center; border-bottom:1px solid var(--line); }
.fpt-table thead th small{ display:block; font-weight:600; font-size:11px; color:#8a93a6; margin-top:2px; }
.fpt-table thead th.c-tier{ text-align:left; }
.fpt-table thead th.c-hl{ background:var(--red-tint); color:var(--red-dark); }
.fpt-table thead th.c-hl small{ color:var(--red); }
.fpt-table tbody th.c-tier{ text-align:left; padding:16px; border-bottom:1px solid var(--line-soft); white-space:nowrap; vertical-align:middle; }
.fpt-table tbody th .t-code{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--red-dark); margin-right:10px; }
.fpt-table tbody th .t-name{ font-size:12.5px; color:#6b7280; font-weight:500; }
.fpt-table tbody td{ text-align:center; padding:16px; border-bottom:1px solid var(--line-soft); font-size:13px; color:#475069; vertical-align:middle; }
.fpt-table tbody td b{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); }
.fpt-table tbody td small{ display:block; font-size:11px; color:#9aa1b0; margin-top:3px; font-weight:600; }
.fpt-table tbody td.c-hl{ background:var(--red-tint); }
.fpt-table tbody td.c-hl b{ color:var(--red-dark); }
.fpt-table tbody tr:last-child th, .fpt-table tbody tr:last-child td{ border-bottom:none; }
.fpt-table .na{ font-size:12px; color:#aab2c0; }

.fpt-opt{ margin-top:24px; }
.fpt-opt-h{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); margin:0 0 12px; }
.fpt-opt-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.fpt-opt-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line-soft); font-size:13.5px; color:#475069; }
.fpt-opt-list li b{ font-family:var(--font-display); font-weight:700; color:var(--ink); white-space:nowrap; text-align:right; }
.fpt-opt-list li b small{ display:block; font-weight:500; font-size:11px; color:#9aa1b0; margin-top:2px; }

.fpt-notes{ list-style:none; margin:24px 0 0; padding:18px 20px; background:var(--paper); border:1px solid var(--line-soft); border-radius:12px; display:flex; flex-direction:column; gap:8px; }
.fpt-notes li{ position:relative; padding-left:18px; font-size:12.5px; color:#5b6478; line-height:1.7; }
.fpt-notes li::before{ content:"\203B"; position:absolute; left:0; color:var(--red); }
.fpt-notes strong{ color:var(--ink); }
.fpt-notes a{ color:var(--red-dark); text-decoration:underline; }

.fpt-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.fpt-btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:14px; padding:12px 26px; border-radius:10px; background:var(--red); color:#fff; transition:.15s var(--ease); }
.fpt-btn:hover{ background:var(--red-dark); color:#fff; }
.fpt-btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.fpt-btn.ghost:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-tint); }

@media (max-width:720px){
  .fpt-opt-list{ grid-template-columns:1fr; }
  .fpt-table thead th, .fpt-table tbody td, .fpt-table tbody th.c-tier{ padding:12px 9px; }
  .fpt-table tbody td b{ font-size:17px; }
  .fpt-table tbody th .t-code{ font-size:16px; margin-right:6px; }
}

/* =============================================================================
   11. 見積フォーム ショートコード [fujissl_estimate_form]（/estimate/）
   ※ サイトの header/footer はテーマが出すので、フォーム自体はブランド帯なしの身軽版。
   ========================================================================== */
.fest{ --mute:#8a93a6; --ink-soft:#5b6478; font-family:var(--font-body); color:var(--ink); line-height:1.7; }
.fest *{ box-sizing:border-box; }
.fest-lead{ font-size:14px; color:var(--ink-soft); max-width:60ch; margin:0 0 18px; }
.fest-lead b{ color:var(--red-dark); font-weight:700; }
.fest-layout{ display:grid; grid-template-columns:1fr 350px; gap:26px; align-items:start; }

.fest-seg{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; background:var(--line-soft); border:1px solid var(--line); border-radius:13px; padding:6px; }
.fest-seg.solo{ grid-template-columns:1fr; margin-top:24px; }
.fest-seg button{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink-soft); background:transparent; border:0; border-radius:9px; padding:11px 8px 9px; cursor:pointer; transition:.15s var(--ease); line-height:1.25; }
.fest-seg button small{ display:block; font-weight:600; font-size:10.5px; color:var(--mute); margin-top:2px; }
.fest-seg button.on{ background:#fff; color:var(--red-dark); box-shadow:0 1px 0 var(--line-strong); }
.fest-seg button.on small{ color:var(--red); }
.fest-note{ display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink-soft); background:var(--red-tint); border:1px solid var(--red-soft); border-radius:11px; padding:11px 14px; margin:14px 0 4px; }
.fest-note .k{ flex:0 0 auto; font-family:var(--font-display); font-weight:800; color:var(--red-dark); font-size:12px; background:#fff; border:1px solid var(--red-soft); border-radius:6px; padding:2px 8px; }

.fest-tier{ margin-top:20px; }
.fest-tier-h{ display:flex; align-items:baseline; gap:10px; margin:0 0 6px; padding-bottom:7px; border-bottom:1.5px solid var(--line); }
.fest-tier-h b{ font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--red-dark); }
.fest-tier-h span{ font-size:12px; color:var(--mute); }

.fest-row{ display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line-soft); }
.fest-row.sub .fest-name{ padding-left:16px; }
.fest-row.sub .fest-name .lbl{ font-size:13px; color:var(--ink-soft); }
.fest-row.active{ background:var(--red-tint); border-radius:8px; }
.fest-name{ flex:1; min-width:0; }
.fest-name .lbl{ font-weight:500; font-size:14px; color:var(--ink); }
.fest-name .p{ font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
.fest-name .p em{ font-style:normal; color:var(--mute); font-weight:600; }

.fest-step{ display:flex; align-items:center; flex:0 0 auto; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden; background:#fff; }
.fest-step button{ width:34px; height:34px; border:0; background:#fff; color:var(--ink); font-size:17px; font-family:var(--font-display); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.12s var(--ease); padding:0; }
.fest-step button:hover{ background:var(--red-tint); color:var(--red-dark); }
.fest-step input{ width:42px; height:34px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); background:#fff; padding:0; }
.fest-step input:focus{ outline:0; background:var(--red-tint); }

.fest-sum{ position:sticky; top:18px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.fest-sum-h{ padding:16px 18px 14px; border-bottom:1px solid var(--line); }
.fest-sum-h .t{ font-family:var(--font-display); font-weight:800; font-size:14px; }
.fest-ate{ margin-top:10px; }
.fest-ate label{ display:block; font-size:11px; color:var(--mute); font-family:var(--font-display); font-weight:700; letter-spacing:.04em; margin-bottom:4px; }
.fest-ate .field{ display:flex; align-items:center; gap:8px; }
.fest-ate input{ flex:1; min-width:0; height:36px; border:1px solid var(--line-strong); border-radius:8px; padding:0 11px; font-family:var(--font-body); font-size:14px; color:var(--ink); background:var(--paper); }
.fest-ate input:focus{ outline:0; border-color:var(--red); background:#fff; }
.fest-ate .suf{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink-soft); }

.fest-items{ padding:6px 18px; max-height:320px; overflow:auto; }
.fest-empty{ color:var(--mute); font-size:13px; text-align:center; padding:24px 0; }
.fest-li{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px dashed var(--line-soft); }
.fest-li:last-child{ border-bottom:0; }
.fest-li .nm{ font-size:13px; color:var(--ink); line-height:1.45; }
.fest-li .qy{ font-size:11px; color:var(--mute); font-family:var(--font-display); font-weight:700; margin-top:1px; }
.fest-li .am{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink); white-space:nowrap; }
.fest-li.base .nm,.fest-li.base .am{ color:var(--red-dark); }
.fest-li.base .tag{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:10px; color:var(--red-dark); background:var(--red-tint); border:1px solid var(--red-soft); border-radius:5px; padding:1px 6px; margin-left:6px; }

.fest-totals{ padding:14px 18px; border-top:1px solid var(--line); background:var(--paper); }
.fest-totals .t{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); padding:3px 0; }
.fest-totals .grand{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
.fest-totals .grand .k{ font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--ink); }
.fest-totals .grand .v{ font-family:var(--font-display); font-weight:800; font-size:25px; color:var(--red-dark); }
.fest-totals .grand .v small{ font-size:13px; font-weight:700; color:var(--ink-soft); margin-left:3px; }
.fest-valid{ font-size:11px; color:var(--mute); margin-top:8px; text-align:right; }

.fest-acts{ padding:14px 18px 6px; display:flex; flex-direction:column; gap:9px; }
.fest-btn{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:14px; padding:13px; border-radius:10px; border:0; cursor:pointer; transition:.15s var(--ease); text-decoration:none; }
.fest-btn.primary{ background:var(--red); color:#fff; }
.fest-btn.primary:hover{ background:var(--red-dark); color:#fff; }
.fest-btn.primary:disabled{ background:var(--line-strong); cursor:not-allowed; }
.fest-btn.ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line-strong); }
.fest-btn.ghost:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-tint); }
.fest-mini{ font-size:11px; color:var(--mute); text-align:center; padding:6px 18px 16px; }
.fest-nextyear{ font-size:12px; line-height:1.6; color:var(--ink); background:var(--red-tint); border:1px solid var(--red-line,#f0d5d9); border-radius:8px; margin:0 18px 16px; padding:9px 12px; }
.fest-nextyear b{ color:var(--red-dark); font-variant-numeric:tabular-nums; }

.fest-honest{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); margin:18px 2px 0; padding:12px 14px; border:1px dashed var(--line-strong); border-radius:11px; line-height:1.6; }
.fest-honest b{ color:var(--red-dark); font-weight:700; }

@media (max-width:840px){
  .fest-layout{ grid-template-columns:1fr; }
  .fest-sum{ position:static; }
}

/* 見積書 PDF（印刷時のみ。サイトの header/footer/sidebar を隠して書類だけ出す） */
#fest-print{ display:none; }
@media print{
  body.fest-printing > *:not(#fest-print){ display:none !important; }
  body.fest-printing #fest-print{ display:block !important; }
}

/* =============================================================================
   12. 総合見積：製品カード（1段目）＋ /estimate/ 全幅・サイドバーなし
   ========================================================================== */
.fest-prod{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:8px; }
.fest-prod button{ flex:0 1 calc(33.333% - 8px); min-width:0; text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:15px 17px; cursor:pointer; transition:.15s var(--ease); }
.fest-prod button:hover{ border-color:var(--red-soft); }
.fest-prod button.on{ border-color:var(--red); box-shadow:0 12px 30px -20px rgba(178,31,45,.55); }
.fest-prod .pt{ font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.fest-prod .pt .d{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.fest-prod button.on .pt{ color:var(--red-dark); }
.fest-prod button.on .pt .d{ background:var(--red); }
.fest-prod .pd{ font-size:12px; color:var(--mute); margin-top:5px; line-height:1.5; }
.fest-seg{ margin-top:18px; }

@media (max-width:1100px){ .fest-prod button{ flex-basis:calc(50% - 6px); } }
@media (max-width:560px){ .fest-prod button{ flex-basis:100%; } }

/* /estimate/ は集中ページ：サイドバーを隠して1カラム全幅（このページのみ）
   docs-static-page 側の !important 制限に勝てるよう body 接頭辞で特異度を上げる */
body.fujissl-fullwidth .faqs-shell,
body.fujissl-fullwidth .faqs-shell-centered{ max-width:1240px !important; }
body.fujissl-fullwidth .faqs-shell-withside{ grid-template-columns:minmax(0,1fr) !important; gap:0 !important; }
body.fujissl-fullwidth .faqs-leftnav{ display:none !important; }
body.fujissl-fullwidth .faqs-main{ max-width:none !important; width:100% !important; }
body.fujissl-fullwidth .faqs-article,
body.fujissl-fullwidth .faqs-main .article{ max-width:none !important; width:100% !important; }
body.fujissl-fullwidth .faqs-main .article-body{ max-width:none !important; width:100% !important; }
body.fujissl-fullwidth .faqs-main .article-body > *{ max-width:none !important; }
body.fujissl-fullwidth .fest{ width:100%; }
/* 見積はツールなので「ドキュメント」ラベルと読了時間・最終更新は不要（このページのみ非表示） */
body.fujissl-fullwidth .article-eyebrow,
body.fujissl-fullwidth .faqs-meta{ display:none !important; }

/* =============================================================================
   13. 会社概要ショートコード [fujissl_company]（/company/・全幅）
   ========================================================================== */
.fcomp{ font-family:var(--font-body); color:var(--ink); }
.fcomp *{ box-sizing:border-box; }
.fcomp-intro{ padding:8px 0 30px; border-bottom:1px solid var(--line); margin-bottom:34px; }
.fcomp-intro-name{ font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--ink); letter-spacing:.01em; }
.fcomp-intro-name span{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--mute); margin-left:14px; letter-spacing:.06em; }
.fcomp-intro-lead{ font-size:15px; line-height:1.95; color:var(--ink-soft,#5b6478); margin:14px 0 0; }
.fcomp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.fcomp-chip{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--red-dark); background:var(--red-tint); border:1px solid var(--red-soft); border-radius:999px; padding:5px 13px; }

.fcomp-sec{ margin-top:40px; }
.fcomp-h{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); margin:0 0 4px; padding-left:13px; position:relative; }
.fcomp-h::before{ content:""; position:absolute; left:0; top:3px; width:5px; height:19px; border-radius:3px; background:var(--red); }
.fcomp-sub{ font-size:13px; color:var(--mute); margin:0 0 16px; padding-left:13px; }

/* 会社概要テーブル（定義リスト） */
.fcomp-table{ margin:16px 0 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.fcomp-row{ display:grid; grid-template-columns:220px 1fr; }
.fcomp-row + .fcomp-row{ border-top:1px solid var(--line-soft); }
.fcomp-row dt{ background:var(--paper); padding:15px 20px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink); border-right:1px solid var(--line-soft); }
.fcomp-row dd{ padding:15px 20px; margin:0; font-size:14px; line-height:1.8; color:#3a4255; }

/* 信頼の裏付け／お問い合わせ グリッド */
.fcomp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.fcomp-grid-3{ grid-template-columns:1fr 1fr 1fr; }
.fcomp-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.fcomp-card-t{ font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--ink); display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fcomp-card-no{ font-weight:700; font-size:12px; color:var(--red-dark); font-variant-numeric:tabular-nums; }
.fcomp-card-b{ font-size:13px; line-height:1.8; color:#5b6478; margin-top:7px; }

/* 強み */
.fcomp-feat{ background:var(--paper); border:1px solid var(--line-soft); border-radius:12px; padding:18px 20px; }
.fcomp-feat-t{ font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--red-dark); }
.fcomp-feat-b{ font-size:13px; line-height:1.85; color:#4a5266; margin-top:8px; }

/* 沿革 */
.fcomp-time{ list-style:none; margin:18px 0 0; padding:0; }
.fcomp-time li{ display:grid; grid-template-columns:72px 1fr; gap:16px; padding:0 0 18px 0; position:relative; }
.fcomp-time li::before{ content:""; position:absolute; left:7px; top:7px; bottom:-4px; width:2px; background:var(--line); }
.fcomp-time li:last-child::before{ display:none; }
.fcomp-time-y{ position:relative; font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--red-dark); padding-left:22px; }
.fcomp-time-y::before{ content:""; position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--red); }
.fcomp-time-b{ font-size:13.5px; line-height:1.8; color:#3a4255; }
.fcomp-time-b b{ display:block; font-family:var(--font-display); font-weight:700; color:var(--ink); margin-bottom:2px; }

/* アクセス */
.fcomp-access{ margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.fcomp-access-label{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--mute); letter-spacing:.04em; margin-bottom:5px; }
.fcomp-access-addr{ font-size:15px; color:var(--ink); font-weight:500; }
.fcomp-access-train{ list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:7px; }
.fcomp-access-train li{ font-size:13px; color:#5b6478; padding-left:18px; position:relative; }
.fcomp-access-train li::before{ content:"\25B8"; position:absolute; left:0; color:var(--red); }

/* お問い合わせ */
.fcomp-contact{ display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; text-decoration:none; transition:.15s var(--ease); }
a.fcomp-contact:hover{ border-color:var(--red); box-shadow:0 12px 30px -22px rgba(178,31,45,.5); }
.fcomp-contact-t{ font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--ink); }
.fcomp-contact-b{ font-size:13px; line-height:1.8; color:#5b6478; margin-top:6px; }
.fcomp-contact-b a{ color:var(--red-dark); font-weight:700; text-decoration:none; }

@media (max-width:820px){
  .fcomp-grid, .fcomp-grid-3{ grid-template-columns:1fr; }
  .fcomp-row{ grid-template-columns:1fr; }
  .fcomp-row dt{ border-right:none; border-bottom:1px solid var(--line-soft); padding:11px 14px; font-size:12.5px; }
  .fcomp-row dd{ padding:12px 14px 15px; font-size:13.5px; }
  .fcomp-intro-name{ font-size:25px; }
}

/* 会社概要：文章は通常の日本語折り返し（句読点での強制改行はしない） */

/* =============================================================================
   14. /what/ コンテンツ [fujissl_what]（サイドバー付き・装飾リッチ版）
   ========================================================================== */
.fwhat{ font-family:var(--font-body); color:var(--ink); }
.fwhat *{ box-sizing:border-box; }
.fwhat code{ background:var(--red-tint); color:var(--red-dark); font-family:var(--font-mono,monospace); font-size:.92em; padding:1px 6px; border-radius:5px; }
.fwhat h2{ font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--ink); margin:2.2em 0 .7em; padding-bottom:.4em; border-bottom:1px solid var(--line-soft); }
.fwhat h2::before{ content:""; display:inline-block; width:5px; height:20px; border-radius:3px; background:var(--red); margin-right:11px; vertical-align:-3px; }
.fwhat p{ font-size:15.5px; line-height:1.95; color:#3a4255; margin:0 0 1em; }
.fwhat strong{ color:var(--ink); font-weight:700; }
.fwhat a{ color:var(--red-dark); text-decoration:underline; }

/* ヒーロー */
.fwhat-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; background:linear-gradient(180deg,#fff, var(--paper)); border:1px solid var(--line); border-radius:18px; padding:34px 32px; margin:4px 0 8px; }
.fwhat-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--red); }
.fwhat-hero-h{ font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1.35; color:var(--ink); margin:10px 0 0 !important; padding:0 !important; border:0 !important; }
.fwhat-hero-h::before{ display:none !important; }
.fwhat-hero-h span{ color:var(--red-dark); }
.fwhat-hero-lead{ font-size:14.5px !important; line-height:1.9 !important; color:#4a5266 !important; margin:14px 0 0 !important; }
.fwhat-hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.fwhat-hero-visual{ display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.fwhat-bar{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line-strong); border-radius:10px; padding:11px 14px; font-size:13px; }
.fwhat-bar-ico{ font-size:15px; }
.fwhat-bar.bad .fwhat-bar-ico{ color:#c2410c; }
.fwhat-bar.good .fwhat-bar-ico{ color:#1a7f4b; }
.fwhat-bar-url{ font-family:var(--font-mono,monospace); color:#3a4255; flex:1; min-width:0; }
.fwhat-bar.bad .fwhat-bar-url{ color:#9aa1b0; text-decoration:line-through; }
.fwhat-bar-tag{ font-family:var(--font-display); font-weight:700; font-size:10.5px; padding:2px 8px; border-radius:5px; white-space:nowrap; }
.fwhat-bar-tag.bad{ color:#c2410c; background:#fff1ea; border:1px solid #fcd9c5; }
.fwhat-bar-tag.good{ color:#1a7f4b; background:#e9f7ef; border:1px solid #c3e9d3; }
.fwhat-bar-arrow{ text-align:center; color:var(--mute); font-size:18px; line-height:1; }

/* 価値カード */
.fwhat-points{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin:14px 0 0; }
.fwhat-point{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; }
.fwhat-point-ic{ width:40px; height:40px; border-radius:10px; background:var(--red-tint); color:var(--red-dark); display:flex; align-items:center; justify-content:center; }
.fwhat-point-ic svg{ width:22px; height:22px; }
.fwhat-point-t{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink); margin-top:13px; }
.fwhat-point-b{ font-size:13px; line-height:1.85; color:#5b6478; margin-top:7px; }

/* DV/OV/EV レベルカード */
.fwhat-levels{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin:8px 0; }
.fwhat-level{ position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 20px; display:flex; flex-direction:column; }
.fwhat-level.reco{ border-color:var(--red); box-shadow:0 16px 36px -24px rgba(178,31,45,.55); }
.fwhat-level-flag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-weight:800; font-size:11px; color:#fff; background:var(--red); border-radius:999px; padding:3px 14px; white-space:nowrap; }
.fwhat-level-badge{ width:48px; height:48px; border-radius:12px; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; }
.fwhat-level:not(.reco) .fwhat-level-badge{ background:var(--crest,#852428); }
.fwhat-level-name{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); margin-top:13px; }
.fwhat-level-desc{ font-size:13px; line-height:1.8; color:#5b6478; margin-top:7px; }
.fwhat-level-for{ font-size:12px; color:var(--red-dark); background:var(--red-tint); border:1px solid var(--red-soft); border-radius:8px; padding:7px 11px; margin-top:13px; line-height:1.6; }
.fwhat-level-price{ margin-top:auto; padding-top:14px; font-family:var(--font-display); }
.fwhat-level-price b{ font-weight:800; font-size:22px; color:var(--ink); }
.fwhat-level-price small{ font-weight:600; font-size:11px; color:var(--mute); margin-left:4px; }
.fwhat-note{ font-size:12.5px !important; color:var(--mute) !important; }

/* 選び方 */
.fwhat-choose{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; margin:8px 0; }
.fwhat-choose-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 18px; }
.fwhat-choose-row + .fwhat-choose-row{ border-top:1px solid var(--line-soft); }
.fwhat-choose-q{ font-size:14px; color:#3a4255; }
.fwhat-choose-a{ font-family:var(--font-display); font-size:13px; color:var(--ink-soft,#5b6478); white-space:nowrap; }
.fwhat-choose-a b{ color:var(--red-dark); font-weight:800; margin-right:4px; }

/* 更新方法 */
.fwhat-methods{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin:16px 0 8px; }
.fwhat-method{ position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 18px; }
.fwhat-method.reco{ border-color:var(--red); box-shadow:0 16px 36px -24px rgba(178,31,45,.55); }
.fwhat-method-tag{ position:absolute; top:-11px; left:16px; font-family:var(--font-display); font-weight:800; font-size:11px; color:#fff; background:var(--red); border-radius:999px; padding:3px 12px; }
.fwhat-method-tag.dev{ background:#5b6478; }
.fwhat-method-t{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink); }
.fwhat-method-b{ font-size:13px; line-height:1.8; color:#5b6478; margin-top:7px; }
.fwhat-method-p{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--red-dark); margin-top:13px; }
.fwhat-method-p small{ font-weight:600; font-size:11px; color:var(--mute); }

/* 濃紺CTAバンド */
.fwhat-cta-band{ background:#0f1b33; border-radius:18px; padding:38px 34px; text-align:center; margin:30px 0; }
.fwhat-cta-band-h{ font-family:var(--font-display); font-weight:800; font-size:23px; color:#fff; }
.fwhat-cta-band-b{ font-size:14px !important; line-height:1.85 !important; color:#aeb6c6 !important; margin:12px auto 0 !important; max-width:48ch; }
.fwhat-cta-band-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

/* ボタン */
.fwhat-btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:14px; padding:12px 26px; border-radius:10px; background:var(--red); color:#fff !important; text-decoration:none !important; transition:.15s var(--ease); }
.fwhat .fwhat-btn:not(.ghost):not(.light):not(.outline){ color:#fff !important; }
.fwhat-btn:hover{ background:var(--red-dark); color:#fff; }
.fwhat-btn.ghost{ background:#fff; color:var(--ink) !important; border:1.5px solid var(--line-strong); }
.fwhat-btn.ghost:hover{ border-color:var(--red); color:var(--red-dark) !important; background:var(--red-tint); }
.fwhat-btn.light{ background:#fff; color:#0f1b33 !important; }
.fwhat-btn.light:hover{ background:#f0f2f6; color:#0f1b33 !important; }
.fwhat-btn.outline{ background:transparent; color:#fff !important; border:1.5px solid rgba(255,255,255,.4); }
.fwhat-btn.outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff !important; }

/* FAQ */
.fwhat-faq{ list-style:none; margin:8px 0 1em; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.fwhat-faq li + li{ border-top:1px solid var(--line-soft); }
.fwhat-faq li a{ display:block; padding:13px 18px; font-size:14px; color:#3a4255; text-decoration:none; position:relative; }
.fwhat-faq li a::after{ content:"\203A"; position:absolute; right:18px; color:var(--mute); }
.fwhat-faq li a:hover{ background:var(--red-tint); color:var(--red-dark); }

@media (max-width:820px){
  .fwhat-hero{ grid-template-columns:1fr; }
  .fwhat-hero-h{ font-size:25px; }
}
@media (max-width:720px){
  .fwhat-points, .fwhat-levels, .fwhat-methods{ grid-template-columns:1fr; }
  .fwhat-choose-row{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* =============================================================================
   15. 取扱商品一覧 [fujissl_products]（全幅・商品入り口）
   ========================================================================== */
.fprod{ font-family:var(--font-body); color:var(--ink); }
.fprod *{ box-sizing:border-box; }
.fprod-intro{ margin-bottom:24px; }
.fprod-intro-lead{ font-size:16px; line-height:1.95; color:#3a4255; margin:0; }
.fprod-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.fprod-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; text-decoration:none; color:inherit; transition:.16s var(--ease); }
.fprod-card:hover{ border-color:var(--red); box-shadow:0 18px 40px -26px rgba(178,31,45,.5); transform:translateY(-2px); }
.fprod-card-icon{ width:44px; height:44px; }
.fprod-card-icon svg{ width:44px; height:44px; }
.fprod-card-name{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); margin-top:14px; }
.fprod-card-blurb{ font-size:13px; line-height:1.8; color:#5b6478; margin-top:8px; }
.fprod-card-pts{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.fprod-card-pts li{ font-size:12.5px; color:#475069; padding-left:18px; position:relative; }
.fprod-card-pts li::before{ content:""; position:absolute; left:2px; top:6px; width:7px; height:7px; border-radius:2px; background:var(--red); opacity:.55; }
.fprod-card-foot{ margin-top:auto; padding-top:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.fprod-card-price{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--red-dark); }
.fprod-card-price small{ display:block; font-weight:600; font-size:10.5px; color:var(--mute); margin-top:2px; }
.fprod-card-go{ font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--ink-soft,#5b6478); white-space:nowrap; }
.fprod-card:hover .fprod-card-go{ color:var(--red-dark); }

.fprod-help{ margin-top:40px; }
.fprod-h{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); margin:0 0 14px; padding-left:13px; position:relative; }
.fprod-h::before{ content:""; position:absolute; left:0; top:3px; width:5px; height:19px; border-radius:3px; background:var(--red); }
.fprod-help-grid{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.fprod-help-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 20px; text-decoration:none; color:inherit; }
.fprod-help-row + .fprod-help-row{ border-top:1px solid var(--line-soft); }
.fprod-help-row:hover{ background:var(--red-tint); }
.fprod-help-q{ font-size:14px; color:#3a4255; }
.fprod-help-a{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--red-dark); white-space:nowrap; }

.fprod-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.fprod-btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:14px; padding:13px 30px; border-radius:10px; background:var(--red); color:#fff; text-decoration:none; transition:.15s var(--ease); }
.fprod-btn:hover{ background:var(--red-dark); color:#fff; }
.fprod-btn.ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line-strong); }
.fprod-btn.ghost:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-tint); }

@media (max-width:980px){ .fprod-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .fprod-grid{ grid-template-columns:1fr; } .fprod-help-row{ flex-direction:column; align-items:flex-start; gap:4px; } }

/* =============================================================================
   16. SiteLock-Monitor 無料バナー [fujissl_sitelock 内 .fmon]
   ========================================================================== */
.fmon{ background:linear-gradient(180deg,#fff,var(--paper)); border:1.5px solid var(--red-soft); border-radius:18px; padding:28px 30px; margin:8px 0 4px; }
.fmon-flag{ display:inline-block; font-family:var(--font-display); font-weight:800; font-size:12px; color:#fff; background:var(--red); border-radius:999px; padding:4px 16px; letter-spacing:.04em; }
.fmon-h{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); margin-top:12px; line-height:1.45; }
.fmon-b{ font-size:14px !important; line-height:1.9 !important; color:#3a4255 !important; margin:10px 0 0 !important; }
.fmon-note{ font-size:12.5px !important; color:var(--mute) !important; margin:6px 0 0 !important; }
.fmon-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.fmon-list li{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:12.5px; line-height:1.75; color:#5b6478; }
.fmon-list li b{ display:block; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink); margin-bottom:4px; }
.fmon-steps{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.fmon-step{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.8; color:#3a4255; }
.fmon-step a{ color:var(--red-dark); text-decoration:underline; }
.fmon-step-n{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.fmon-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
@media (max-width:820px){ .fmon-list{ grid-template-columns:1fr; } }

/* =============================================================================
   17. よくある質問 [fujissl_faq]（サイドバー付き・アコーディオン）
   ========================================================================== */
.ffaq{ font-family:var(--font-body); color:var(--ink); }
.ffaq *{ box-sizing:border-box; }
.ffaq-lead{ font-size:15.5px; line-height:1.95; color:#3a4255; margin:0 0 18px; }
.ffaq-lead a, .ffaq-a a, .ffaq-foot a{ color:var(--red-dark); text-decoration:underline; }
.ffaq-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.ffaq-nav a{ font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--ink-soft,#5b6478); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 15px; text-decoration:none; transition:.15s var(--ease); }
.ffaq-nav a:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-tint); }
.ffaq-h{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); margin:2em 0 .7em; padding-left:13px; position:relative; scroll-margin-top:90px; }
.ffaq-h::before{ content:""; position:absolute; left:0; top:3px; width:5px; height:19px; border-radius:3px; background:var(--red); }
.ffaq-list{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.ffaq-item + .ffaq-item{ border-top:1px solid var(--line-soft); }
.ffaq-item summary{ list-style:none; cursor:pointer; padding:15px 44px 15px 18px; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--ink); position:relative; }
.ffaq-item summary::-webkit-details-marker{ display:none; }
.ffaq-item summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:20px; font-weight:700; color:var(--red); line-height:1; transition:.15s var(--ease); }
.ffaq-item[open] summary::after{ content:"\2212"; }
.ffaq-item summary:hover{ color:var(--red-dark); }
.ffaq-a{ padding:0 18px 16px; font-size:14px; line-height:1.9; color:#475069; }
.ffaq-a b{ color:var(--ink); font-weight:700; }
.ffaq-a code{ background:var(--red-tint); color:var(--red-dark); font-family:var(--font-mono,monospace); font-size:.92em; padding:1px 6px; border-radius:5px; }
.ffaq-foot{ margin-top:26px; padding:16px 18px; background:var(--paper); border:1px solid var(--line-soft); border-radius:12px; font-size:13.5px; color:#5b6478; }

/* FAQ リンク集（既存個別ページへ誘導／回答は重複させない） */
.ffaq-links{ list-style:none; margin:8px 0 0; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.ffaq-links li + li{ border-top:1px solid var(--line-soft); }
.ffaq-links li a{ display:block; padding:14px 44px 14px 18px; font-size:14px; line-height:1.6; color:#3a4255; text-decoration:none; position:relative; transition:.12s var(--ease); }
.ffaq-links li a::after{ content:"\2197"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--mute); font-size:14px; }
.ffaq-links li a:hover{ background:var(--red-tint); color:var(--red-dark); }
.ffaq-links li a:hover::after{ color:var(--red); }

/* =============================================================================
   18. FAQカテゴリーページ（category-faq.php）全幅・スティッキー目次
   ========================================================================== */
/* 全幅化：このページはサイドバー無し */
.fujissl-faq-page .faqs-shell{ display:block !important; max-width:1240px; margin:0 auto; }
.fujissl-faq-page .faqs-main{ max-width:none !important; width:100% !important; }
.fujissl-faq-page .faqs-article,
.fujissl-faq-page .article-body{ max-width:none !important; width:100% !important; }
/* スティッキー目次（カテゴリピル） */
.fujissl-faq-page .ffaq-nav{ position:sticky; top:12px; z-index:20; background:rgba(250,248,243,.92); backdrop-filter:saturate(1.2) blur(6px); -webkit-backdrop-filter:saturate(1.2) blur(6px); padding:12px; margin:0 -12px 26px; border-radius:12px; border:1px solid var(--line-soft); }
html{ scroll-behavior:smooth; }
.ffaq-h{ scroll-margin-top:80px; }

/* =============================================================================
   19. サイドバー全廃後の中央寄せ最適化
   ========================================================================== */
/* 静的固定ページ（会社概要など全幅指定済みは除く）：中央寄せを広く */
.docs-static-page:not(.fujissl-fullwidth) .faqs-shell{ max-width:1240px !important; margin:0 auto !important; }
.docs-static-page:not(.fujissl-fullwidth) .faqs-main{ max-width:none !important; width:100% !important; }
/* 長文記事の素のテキスト（見出し・段落）は読み幅を保ち間延び防止。カード等のリッチ要素は対象外 */
.faqs-shell-centered .article-body > h2,
.faqs-shell-centered .article-body > h3,
.faqs-shell-centered .article-body > p,
.faqs-shell-centered .article-body > ul,
.faqs-shell-centered .article-body > ol,
.faqs-shell-centered .article-body > blockquote,
.faqs-shell-centered .article-body > table{ max-width:880px; }
/* リッチ系（fwhat/fcomp/fprod/ffaq）は幅いっぱい使う */
.faqs-shell-centered .fwhat,
.faqs-shell-centered .fcomp,
.faqs-shell-centered .fprod,
.faqs-shell-centered .ffaq{ max-width:none; }

/* =============================================================================
   21. 手順ハブ＋関連FAQ [fujissl_guide_*]（.fgd）
   ========================================================================== */
.fgd{ font-family:var(--font-body); color:var(--ink); margin-top:8px; }
.fgd *{ box-sizing:border-box; }
.fgd-intro{ margin:0 0 22px; }
.fgd-badge{ display:inline-block; font-family:var(--font-display); font-weight:800; font-size:12px; color:#fff; background:#5b6478; border-radius:999px; padding:4px 14px; letter-spacing:.03em; }
.fgd-badge.reco{ background:var(--red); }
.fgd-badge.dev{ background:#1e4d8b; }
.fgd-h2{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink); margin:12px 0 0 !important; padding:0 !important; border:0 !important; }
.fgd-h2::before{ display:none !important; }
.fgd-lead{ font-size:15px !important; line-height:1.9 !important; color:#3a4255 !important; margin:10px 0 0 !important; }
.fgd-h{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); margin:2em 0 .7em; padding-left:13px; position:relative; }
.fgd-h::before{ content:""; position:absolute; left:0; top:3px; width:5px; height:19px; border-radius:3px; background:var(--red); }
.fgd-steps{ list-style:none; margin:18px 0 0; padding:0; counter-reset:none; display:flex; flex-direction:column; gap:12px; }
.fgd-step{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.fgd-step-n{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
.fgd-step-body{ min-width:0; flex:1; }
.fgd-step-t{ font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--ink); }
.fgd-step-d{ font-size:14px; line-height:1.85; color:#475069; margin-top:5px; }
.fgd-step-d strong{ color:var(--ink); font-weight:700; }
.fgd-step-link{ display:inline-block; margin-top:9px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--red-dark); text-decoration:none; }
.fgd-step-link:hover{ text-decoration:underline; }
.fgd-faq{ margin-top:8px; }
.fgd-foot{ margin-top:24px; padding:16px 18px; background:var(--paper); border:1px solid var(--line-soft); border-radius:12px; font-size:13.5px; line-height:1.85; color:#5b6478; }
.fgd-foot a{ color:var(--red-dark); text-decoration:underline; }
.fgd-foot strong{ color:var(--ink); font-weight:700; }

/* 手順ハブ: 目次ナビ＋FAQアコーディオン */
.fgd-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; padding:14px; background:var(--paper); border:1px solid var(--line-soft); border-radius:12px; position:sticky; top:12px; z-index:15; }
.fgd-nav a{ font-family:var(--font-display); font-weight:700; font-size:12.5px; color:#5b6478; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 15px; text-decoration:none; transition:.15s var(--ease); }
.fgd-nav a:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-tint); }
.fgd-clients-note{ font-size:13.5px !important; color:#5b6478 !important; margin:0 0 10px !important; }
.fgd-faq-acc{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; margin-top:8px; }
.fgd-faq-item + .fgd-faq-item{ border-top:1px solid var(--line-soft); }
.fgd-faq-item summary{ list-style:none; cursor:pointer; padding:15px 44px 15px 18px; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--ink); position:relative; }
.fgd-faq-item summary::-webkit-details-marker{ display:none; }
.fgd-faq-item summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:20px; font-weight:700; color:var(--red); line-height:1; }
.fgd-faq-item[open] summary::after{ content:"\2212"; }
.fgd-faq-item summary:hover{ color:var(--red-dark); }
.fgd-faq-a{ padding:0 18px 16px; }
.fgd-faq-a p{ font-size:14px !important; line-height:1.85 !important; color:#475069 !important; margin:0 0 8px !important; }
.fgd-faq-link{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--red-dark); text-decoration:none; }
.fgd-faq-link:hover{ text-decoration:underline; }
.fgd-h[id]{ scroll-margin-top:80px; }

/* =============================================================================
   22. ACME読み物: メリットカード/対応環境/タイムライン/画面モック（.fgd-article）
   ========================================================================== */
.fgd-merits{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0; }
.fgd-merit{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; position:relative; overflow:hidden; }
.fgd-merit::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--red); opacity:.85; }
.fgd-merit-ic{ width:48px; height:48px; border-radius:13px; background:var(--red-tint); color:var(--red-dark); display:flex; align-items:center; justify-content:center; font-size:25px; margin-bottom:14px; }
.fgd-merit-t{ font-family:var(--font-display); font-weight:800; font-size:16.5px; color:var(--ink); margin-bottom:7px; }
.fgd-merit-d{ font-size:13px; line-height:1.78; color:#4a5266; }

/* 対応環境 */
.fgd-env{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 8px; }
.fgd-env-card{ border-radius:16px; padding:22px; border:1px solid var(--line); background:#fff; }
.fgd-env-card.ok{ border-color:#bfe3cd; background:linear-gradient(180deg,#f3fbf6,#fff); }
.fgd-env-card.ng{ border-color:#f3d2c2; background:linear-gradient(180deg,#fef6f1,#fff); }
.fgd-env-head{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:16px; margin-bottom:6px; }
.fgd-env-card.ok .fgd-env-head{ color:#1a7f4b; }
.fgd-env-card.ng .fgd-env-head{ color:#c2410c; }
.fgd-env-badge{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; }
.fgd-env-card.ok .fgd-env-badge{ background:#1a9c5a; }
.fgd-env-card.ng .fgd-env-badge{ background:#d2691e; }
.fgd-env-sub{ font-size:12.5px; color:#5b6478; margin-bottom:12px; }
.fgd-env-list{ list-style:none; margin:0; padding:0; }
.fgd-env-list li{ font-size:13.5px; line-height:1.5; color:#3a4255; padding:7px 0 7px 24px; position:relative; border-top:1px dashed var(--line-soft); }
.fgd-env-list li:first-child{ border-top:0; }
.fgd-env-card.ok .fgd-env-list li::before{ content:"\2713"; position:absolute; left:2px; color:#1a9c5a; font-weight:800; }
.fgd-env-card.ng .fgd-env-list li::before{ content:"\2717"; position:absolute; left:2px; color:#d2691e; font-weight:800; }
.fgd-envtable{ width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fgd-envtable th{ background:var(--paper); text-align:left; padding:11px 14px; font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:13px; border-bottom:1px solid var(--line); }
.fgd-envtable td{ padding:11px 14px; border-bottom:1px solid var(--line-soft); color:#3a4255; vertical-align:top; }
.fgd-envtable tr:last-child td{ border-bottom:0; }
.fgd-envtable td:first-child{ font-weight:700; color:var(--ink); white-space:nowrap; }
.fgd-req{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.fgd-req-chip{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line-strong); border-radius:999px; padding:7px 14px; font-size:12.5px; color:#3a4255; }
.fgd-req-chip b{ color:var(--red-dark); }

/* 導入タイムライン（画面モック付き） */
.fgd-tl{ position:relative; margin:20px 0 8px; padding-left:0; }
.fgd-tl-step{ display:grid; grid-template-columns:54px 1fr; gap:18px; padding-bottom:26px; position:relative; }
.fgd-tl-step::before{ content:""; position:absolute; left:26px; top:50px; bottom:-4px; width:2px; background:var(--line); }
.fgd-tl-step:last-child::before{ display:none; }
.fgd-tl-num{ width:52px; height:52px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(178,31,45,.25); z-index:1; }
.fgd-tl-c{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.fgd-tl-t{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); margin-bottom:6px; }
.fgd-tl-d{ font-size:14px; line-height:1.85; color:#475069; }
.fgd-tl-d strong{ color:var(--ink); }
/* 画面風モック */
.fgd-mock{ margin-top:13px; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; background:#fff; }
.fgd-mock-bar{ display:flex; align-items:center; gap:6px; padding:8px 12px; background:#f4f1ea; border-bottom:1px solid var(--line); }
.fgd-mock-dot{ width:9px; height:9px; border-radius:50%; background:#d9d3c6; }
.fgd-mock-dot.r{ background:#e6857a; } .fgd-mock-dot.y{ background:#e8c66a; } .fgd-mock-dot.g{ background:#8fc99f; }
.fgd-mock-title{ margin-left:8px; font-size:11.5px; color:#7a8294; font-family:var(--font-mono,monospace); }
.fgd-mock-body{ padding:14px 16px; }
.fgd-mock-term{ background:#1d2333; color:#d7dcea; font-family:var(--font-mono,monospace); font-size:12px; line-height:1.7; padding:14px 16px; border-radius:0; overflow-x:auto; }
.fgd-mock-term .c{ color:#7f8aa3; } .fgd-mock-term .p{ color:#6fcf97; } .fgd-mock-term .v{ color:#e8c66a; }
.fgd-mock-field{ display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border:1px solid var(--line); border-radius:8px; margin:7px 0; font-size:12.5px; }
.fgd-mock-field .lbl{ color:#5b6478; } .fgd-mock-field .val{ font-family:var(--font-mono,monospace); color:var(--ink); }
.fgd-mock-cap{ font-size:11.5px; color:#8a93a5; margin-top:7px; text-align:center; }
@media(max-width:720px){ .fgd-merits{ grid-template-columns:1fr; } .fgd-env{ grid-template-columns:1fr; } .fgd-tl-step{ grid-template-columns:42px 1fr; gap:13px; } .fgd-tl-num{ width:40px; height:40px; font-size:17px; } .fgd-tl-step::before{ left:20px; } }

/* =============================================================================
   23. 対応環境: 診断(.fgd-diag)/セレクタ(.fgd-envsel)/○×表(.fgd-envjudge)
   ========================================================================== */
/* チェックリスト診断 */
.fgd-diag{ border:1px solid var(--line); border-radius:14px; padding:24px; background:linear-gradient(180deg,var(--paper),#fff); margin:16px 0; }
.fgd-diag-lead{ font-size:13.5px !important; color:#5b6478 !important; margin:0 0 14px !important; }
.fgd-diag-q{ display:flex; align-items:flex-start; gap:13px; padding:13px 0; border-bottom:1px dashed var(--line-strong); }
.fgd-diag-q:last-of-type{ border-bottom:0; }
.fgd-diag-check{ width:26px; height:26px; border-radius:7px; border:2px solid var(--red); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:transparent; font-weight:800; font-size:15px; cursor:pointer; user-select:none; transition:.12s var(--ease); }
.fgd-diag-check::before{ content:"\2713"; }
.fgd-diag-check.on{ background:var(--red); color:#fff; }
.fgd-diag-qt{ font-size:14px; line-height:1.55; color:var(--ink); padding-top:2px; }
.fgd-diag-qt small{ display:block; color:var(--mute); font-size:12px; margin-top:3px; line-height:1.5; }
.fgd-diag-result{ margin-top:16px; padding:15px 17px; border-radius:11px; background:#fff; border:1px solid var(--line); font-size:14px; line-height:1.7; color:#3a4255; }
.fgd-diag-result.ok{ background:#f3fbf6; border-color:#bfe3cd; }
.fgd-diag-result.ok strong{ color:#1a7f4b; }
.fgd-diag-result.mid{ background:#fffaf2; border-color:#f0dcb8; }
.fgd-diag-result strong{ color:var(--red-dark); }

/* 環境セレクタ */
.fgd-envsel{ margin:16px 0; }
.fgd-envsel-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.fgd-envsel-tab{ font-family:var(--font-display); font-weight:700; font-size:13px; padding:9px 16px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; color:#5b6478; transition:.12s var(--ease); }
.fgd-envsel-tab:hover{ border-color:var(--red); color:var(--red-dark); }
.fgd-envsel-tab.active{ background:var(--red); color:#fff; border-color:var(--red); }
.fgd-envsel-panel{ display:none; border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--paper); }
.fgd-envsel-panel.show{ display:block; }
.fgd-envsel-verdict{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.fgd-envsel-badge{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; color:#fff; flex:0 0 auto; }
.fgd-envsel-badge.o{ background:#1a9c5a; } .fgd-envsel-badge.warn{ background:#d2691e; } .fgd-envsel-badge.x{ background:#b21f2d; }
.fgd-envsel-vt{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); }
.fgd-envsel-list{ margin:6px 0 0; padding-left:18px; font-size:13.5px; line-height:1.85; color:#3a4255; }

/* ○×表 */
.fgd-envjudge{ width:100%; border-collapse:collapse; font-size:13.5px; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:14px 0; background:#fff; }
.fgd-envjudge th{ background:var(--paper); text-align:left; padding:12px 14px; font-family:var(--font-display); font-weight:700; font-size:13px; border-bottom:1px solid var(--line); }
.fgd-envjudge th:nth-child(2){ text-align:center; width:90px; }
.fgd-envjudge td{ padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:#3a4255; line-height:1.6; }
.fgd-envjudge tr:last-child td{ border-bottom:0; }
.fgd-envjudge td:first-child{ font-weight:700; color:var(--ink); white-space:nowrap; }
.fgd-judge{ text-align:center; font-weight:800; font-size:17px; }
.fgd-judge.o{ color:#1a9c5a; } .fgd-judge.t{ color:#c79a2e; } .fgd-judge.x{ color:#d2691e; }

/* =============================================================================
   24. ACME冒頭の図解: 有効期間カウントダウン/できること/DV-OV対比
   ========================================================================== */
/* 有効期間 短縮タイムライン */
.fgd-shrink{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0 8px; align-items:end; }
.fgd-shrink-col{ text-align:center; }
.fgd-shrink-bar{ border-radius:10px 10px 0 0; background:linear-gradient(180deg,var(--red),var(--red-dark)); margin:0 auto; width:100%; max-width:90px; display:flex; align-items:flex-start; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:15px; padding-top:10px; position:relative; transition:.4s var(--ease); }
.fgd-shrink-col:nth-child(1) .fgd-shrink-bar{ background:linear-gradient(180deg,#9aa1b0,#7a8294); }
.fgd-shrink-col:nth-child(2) .fgd-shrink-bar{ background:linear-gradient(180deg,#caa24f,#b8862e); }
.fgd-shrink-col:nth-child(3) .fgd-shrink-bar{ background:linear-gradient(180deg,#d2691e,#b8551a); }
.fgd-shrink-col:nth-child(4) .fgd-shrink-bar{ background:linear-gradient(180deg,var(--red),var(--red-dark)); }
.fgd-shrink-yr{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); margin-top:9px; }
.fgd-shrink-days{ font-size:11.5px; color:var(--mute); margin-top:1px; }
.fgd-shrink-note{ font-size:13px; color:#5b6478; text-align:center; margin:4px 0 0; }
.fgd-shrink-cap{ display:inline-block; background:var(--red-tint); color:var(--red-dark); font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:5px 13px; border-radius:999px; }

/* できること 4カード */
.fgd-auto{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0 10px; }
.fgd-auto-item{ display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:13px; padding:16px 18px; }
.fgd-auto-ic{ width:38px; height:38px; border-radius:10px; background:var(--red-tint); color:var(--red-dark); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:19px; }
.fgd-auto-t{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--ink); }
.fgd-auto-d{ font-size:12.5px; color:#5b6478; line-height:1.6; margin-top:2px; }
.fgd-auto-loop{ text-align:center; font-size:13px; color:#5b6478; margin:6px 0 0; }
.fgd-auto-loop b{ color:var(--red-dark); }

/* DV/OV 対比 */
.fgd-vs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 8px; }
.fgd-vs-card{ border-radius:15px; padding:20px; border:1px solid var(--line); }
.fgd-vs-card.other{ background:#f7f6f3; }
.fgd-vs-card.fuji{ background:linear-gradient(180deg,var(--red-tint),#fff); border-color:#f0c9ce; }
.fgd-vs-label{ font-family:var(--font-display); font-weight:800; font-size:13px; margin-bottom:12px; display:inline-block; padding:4px 12px; border-radius:999px; }
.fgd-vs-card.other .fgd-vs-label{ background:#e5e2db; color:#5b6478; }
.fgd-vs-card.fuji .fgd-vs-label{ background:var(--red); color:#fff; }
.fgd-vs-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; padding:7px 0; color:#3a4255; }
.fgd-vs-row .m{ width:20px; height:20px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; }
.fgd-vs-row .m.o{ background:#1a9c5a; } .fgd-vs-row .m.x{ background:#b9b3a6; }
.fgd-vs-card.fuji .fgd-vs-row{ font-weight:600; color:var(--ink); }
@media(max-width:720px){ .fgd-auto{ grid-template-columns:1fr; } .fgd-vs{ grid-template-columns:1fr; } .fgd-shrink-bar{ font-size:12px; } }

/* callout: アイコン無し（fgd-article内など）はgrid 2カラムをやめてblockに（1文字折返しバグ対策） */
.callout:not(:has(.callout-icon)){ display:block !important; }
.fgd-article .callout{ background:var(--paper); border:1px solid var(--line-soft); border-left:3px solid var(--red); border-radius:0 10px 10px 0; padding:16px 18px; margin:1.6em 0; }
.fgd-article .callout-info{ border-left-color:#1e4d8b; background:#eef4fb; }
.fgd-article .callout-gold{ border-left-color:#b8862e; background:linear-gradient(180deg,#fdf7e8,#fff); }
.fgd-article .callout p{ margin:0 0 .6em !important; font-size:14px; line-height:1.8; color:#3a4255; }
.fgd-article .callout p:last-child{ margin-bottom:0 !important; }
.fgd-article .callout h4{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink); margin:0 0 .5em; }

/* ダメ押し: fgd-article内のcalloutは:has()非対応ブラウザでも潰れないようgrid解除を最優先 */
.fgd-article .callout{ display:block !important; grid-template-columns:none !important; }

/* =============================================================================
   25. レスポンシブ精緻化（タブレット中間幅・スマホ）— 全fgd図解
   ========================================================================== */
/* タブレット〜中間幅: 3カラムを2カラムへ、詰まりを解消 */
@media (max-width: 980px){
  .fgd-merits{ grid-template-columns:1fr 1fr; }
  .fgd-vs[style*="repeat(3"]{ grid-template-columns:1fr 1fr !important; }
  .fgd-auto[style*="repeat(3"]{ grid-template-columns:1fr 1fr !important; }
  .fgd-nav{ position:static; }
}
/* スマホ: すべて1カラム、文字・余白を最適化 */
@media (max-width: 640px){
  .fgd-merits,
  .fgd-auto,
  .fgd-auto[style*="repeat"],
  .fgd-vs,
  .fgd-vs[style*="repeat(3"],
  .fgd-env{ grid-template-columns:1fr !important; gap:10px; }
  .fgd-merit{ padding:18px 16px; }
  .fgd-nav{ gap:6px; padding:11px; }
  .fgd-nav a{ font-size:12px; padding:6px 12px; }
  .fgd-shrink{ gap:6px; }
  .fgd-shrink-bar{ max-width:64px; font-size:12px; }
  .fgd-shrink-yr{ font-size:11.5px; } .fgd-shrink-days{ font-size:10px; }
  .fgd-tl-step{ grid-template-columns:40px 1fr; gap:12px; }
  .fgd-tl-num{ width:38px; height:38px; font-size:16px; }
  .fgd-tl-step::before{ left:19px; }
  .fgd-tl-c{ padding:14px 15px; }
  .fgd-envtable, .fgd-envjudge{ font-size:12.5px; }
  .fgd-envtable th, .fgd-envtable td, .fgd-envjudge th, .fgd-envjudge td{ padding:9px 10px; }
  .fgd-envsel-tabs{ gap:6px; }
  .fgd-envsel-tab{ font-size:12px; padding:8px 12px; }
  .fgd-mock-term{ font-size:11px; padding:12px; }
  .fgd-faq-item summary{ font-size:13.5px; padding:13px 40px 13px 15px; }
  /* 価格カードの数字が大きすぎないように */
  .fgd-vs-card [style*="font-size:24px"], .fgd-vs-card [style*="font-size:22px"]{ font-size:20px !important; }
}
/* 極小幅: 環境セレクタのタブを縦積みにして潰れ防止 */
@media (max-width: 420px){
  .fgd-envsel-tabs{ flex-direction:column; }
  .fgd-envsel-tab{ width:100%; text-align:center; }
  .fgd-nav{ flex-direction:column; }
  .fgd-nav a{ width:100%; text-align:center; }
}

/* REST API: こんな事業者に 3カード（.fgd-persona）＋対比の「向いている人」行 */
.fgd-persona{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 10px; }
.fgd-persona-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 20px; position:relative; overflow:hidden; }
.fgd-persona-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:#1e4d8b; }
.fgd-persona-ic{ width:52px; height:52px; border-radius:14px; background:#eaf1fb; color:#1e4d8b; display:flex; align-items:center; justify-content:center; font-size:27px; margin-bottom:14px; }
.fgd-persona-t{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); margin-bottom:8px; }
.fgd-persona-d{ font-size:13px; line-height:1.8; color:#4a5266; }
.fgd-persona-d strong{ color:var(--ink); font-weight:700; }
.fgd-vs-fit{ margin-top:10px; padding-top:11px; border-top:1px dashed var(--line-strong); font-size:12.5px; color:#5b6478; }
.fgd-vs-fit strong{ color:var(--ink); font-weight:700; }
.fgd-vs-card.fuji .fgd-vs-fit strong{ color:var(--red-dark); }
@media(max-width:980px){ .fgd-persona{ grid-template-columns:1fr; } }

/* =============================================================================
   26. FAQページ刷新: 検索ボックス/カテゴリカード/件数バッジ
   ========================================================================== */
.ffaq-search{ position:relative; margin:8px 0 22px; }
.ffaq-search-ic{ position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:18px; color:var(--mute); pointer-events:none; }
.ffaq-search-input{ width:100%; box-sizing:border-box; padding:16px 18px 16px 50px; font-size:15px; font-family:var(--font-body); color:var(--ink); background:#fff; border:1.5px solid var(--line-strong); border-radius:13px; transition:.15s var(--ease); }
.ffaq-search-input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-tint); }
.ffaq-search-input::placeholder{ color:#aab; }

/* カテゴリカード グリッド */
.ffaq-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 30px; }
.ffaq-card{ display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; text-decoration:none; transition:.15s var(--ease); }
.ffaq-card:hover{ border-color:var(--red); box-shadow:0 6px 18px rgba(178,31,45,.10); transform:translateY(-2px); }
.ffaq-card-ic{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; background:var(--red-tint); color:var(--red-dark); display:flex; align-items:center; justify-content:center; font-size:22px; }
.ffaq-card-body{ display:flex; flex-direction:column; min-width:0; }
.ffaq-card-t{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.3; }
.ffaq-card-n{ font-size:12px; color:var(--mute); margin-top:2px; }

/* 見出しの件数バッジ */
.ffaq-h{ scroll-margin-top:80px; }
.ffaq-h-n{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--red-dark); background:var(--red-tint); border-radius:999px; padding:2px 10px; margin-left:8px; vertical-align:middle; }
.ffaq-sec{ margin-bottom:8px; }

/* 検索ヒット無し */
.ffaq-noresult{ padding:24px; text-align:center; color:#5b6478; background:var(--paper); border:1px solid var(--line-soft); border-radius:12px; font-size:14px; }

@media (max-width: 980px){ .ffaq-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .ffaq-cards{ grid-template-columns:1fr; } .ffaq-search-input{ padding:14px 16px 14px 46px; font-size:14px; } }

/* =============================================================================
   27. トップページ（front-page.php）.ftop-*
   ========================================================================== */
.fujissl-top{ font-family:var(--font-body); color:var(--ink); }
.fujissl-top *{ box-sizing:border-box; }
.ftop-wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.ftop-section{ padding:64px 0; }
.ftop-h2{ font-family:var(--font-display); font-weight:800; font-size:27px; color:var(--ink); text-align:center; margin:0 0 8px; }
.ftop-h2.light{ color:#fff; }
.ftop-sub{ text-align:center; font-size:15px; color:#5b6478; line-height:1.85; max-width:680px; margin:0 auto 36px; }
.ftop-sub.light{ color:#c5cbd6; }

/* ヒーロー */
.ftop-hero{ background:linear-gradient(180deg,#fff,var(--paper)); border-bottom:1px solid var(--line); padding:64px 0 56px; }
.ftop-hero-inner{ max-width:1180px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.ftop-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.08em; color:var(--red-dark); margin-bottom:14px; }
.ftop-h1{ font-family:var(--font-display); font-weight:800; font-size:42px; line-height:1.25; color:var(--ink); margin:0 0 20px; letter-spacing:-.01em; }
.ftop-accent{ color:var(--red); }
.ftop-lead{ font-size:15.5px; line-height:1.9; color:#3a4255; margin:0 0 22px; }
.ftop-lead strong{ color:var(--ink); font-weight:700; }
.ftop-hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.ftop-chip{ font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--red-dark); background:var(--red-tint); border-radius:999px; padding:6px 14px; }
.ftop-hero-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.ftop-hero-btns.center{ justify-content:center; }
.ftop-btn{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:15px; padding:14px 28px; border-radius:11px; text-decoration:none; transition:.15s var(--ease); }
.ftop-btn.primary{ background:var(--red); color:#fff; box-shadow:0 4px 14px rgba(178,31,45,.25); }
.ftop-btn.primary:hover{ background:var(--red-dark); transform:translateY(-1px); }
.ftop-btn.ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line-strong); }
.ftop-btn.ghost:hover{ border-color:var(--red); color:var(--red-dark); }
.ftop-btn.light{ background:#fff; color:var(--ink); }
.ftop-btn.light:hover{ background:#f0ece4; }
.ftop-hero-trust{ font-size:12.5px; color:#7a8294; margin:22px 0 0; }
.ftop-hero-trust strong{ color:var(--ink); }
/* ヒーロー右: ブラウザ風 */
.ftop-hero-visual{ display:flex; justify-content:center; }
.ftop-browser{ width:100%; max-width:380px; background:#fff; border:1px solid var(--line-strong); border-radius:14px; overflow:hidden; box-shadow:0 16px 50px rgba(29,33,40,.12); }
.ftop-browser-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#f4f1ea; border-bottom:1px solid var(--line); }
.ftop-dot{ width:10px; height:10px; border-radius:50%; background:#d9d3c6; }
.ftop-dot.r{ background:#e6857a; } .ftop-dot.y{ background:#e8c66a; } .ftop-dot.g{ background:#8fc99f; }
.ftop-url{ margin-left:10px; font-size:12px; color:#7a8294; font-family:var(--font-mono,monospace); }
.ftop-browser-body{ padding:46px 24px; text-align:center; }
.ftop-lock{ font-size:46px; color:var(--red); }
.ftop-secure{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); margin-top:12px; }
.ftop-renew{ display:inline-block; margin-top:16px; font-size:13px; font-weight:700; color:#1a7f4b; background:#eaf7ef; border-radius:999px; padding:6px 16px; }

/* 取扱商品 */
.ftop-products{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ftop-prod{ display:block; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px; text-decoration:none; transition:.15s var(--ease); }
.ftop-prod:hover{ border-color:var(--red); box-shadow:0 10px 28px rgba(178,31,45,.10); transform:translateY(-3px); }
.ftop-prod-ic{ width:54px; height:54px; border-radius:14px; background:var(--red-tint); color:var(--red-dark); display:flex; align-items:center; justify-content:center; font-size:27px; margin-bottom:16px; }
.ftop-prod-t{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); margin-bottom:7px; }
.ftop-prod-d{ font-size:13px; line-height:1.7; color:#5b6478; min-height:54px; }
.ftop-prod-price{ font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--red-dark); margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); }
.ftop-prod-more{ text-align:center; font-size:13.5px; color:#5b6478; margin:24px 0 0; }
.ftop-prod-more a{ color:var(--red-dark); }

/* セルフサービス4カード：スマホで縦伸び防止（インラインstyleの4列指定を上書き）*/
@media (max-width:820px){
  .ftop-products{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
}
@media (max-width:480px){
  .ftop-products{ grid-template-columns:1fr !important; }
  .ftop-prod-d{ min-height:0 !important; }
}

/* certificate等の濃紺CTAバンド .ct-cta の文字が沈むのを防ぐ（本文CSSに白指定が無いため上書き）*/
.ct-cta{ color:#fff; }
.ct-cta .ct-cta-t{ color:#fff !important; }
.ct-cta .ct-cta-d{ color:rgba(255,255,255,0.82) !important; }

/* ドキュメント本文内で使う ftop カード（サーバー別ガイド等）の見え方を引き締める。
   ホームページの製品グリッドは .fgd-article の外なので影響しない。 */
.fgd-article .ftop-prod{ padding:20px 20px 18px; display:flex; flex-direction:column; }
.fgd-article .ftop-prod-ic{ width:44px; height:44px; border-radius:12px; font-size:22px; margin-bottom:13px; }
.fgd-article .ftop-prod-t{ font-size:15.5px; margin-bottom:5px; }
.fgd-article .ftop-prod-d{ min-height:0; font-size:12.5px; }
/* クリックできるカードである手がかり（ホバーで矢印がスッと出る） */
.fgd-article .ftop-prod{ position:relative; }
.fgd-article .ftop-prod::after{ content:"\2192"; position:absolute; right:18px; bottom:16px; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--red-dark); opacity:0; transform:translateX(-5px); transition:.18s var(--ease); }
.fgd-article .ftop-prod:hover::after{ opacity:1; transform:translateX(0); }

/* 47日問題（ダーク） */
.ftop-dark{ background:#1d2128; }
.ftop-shrink{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:640px; margin:0 auto 36px; align-items:end; }
.ftop-shrink-col{ text-align:center; }
.ftop-shrink-bar{ border-radius:10px 10px 0 0; margin:0 auto; width:100%; max-width:80px; display:flex; align-items:flex-start; justify-content:center; padding-top:10px; background:linear-gradient(180deg,#5b6478,#444b59); }
.ftop-shrink-bar span{ font-family:var(--font-display); font-weight:800; font-size:14px; color:#fff; }
.ftop-shrink-bar.danger{ background:linear-gradient(180deg,var(--red),var(--red-dark)); }
.ftop-shrink-col:nth-child(2) .ftop-shrink-bar{ background:linear-gradient(180deg,#caa24f,#b8862e); }
.ftop-shrink-col:nth-child(3) .ftop-shrink-bar{ background:linear-gradient(180deg,#d2691e,#b8551a); }
.ftop-shrink-yr{ font-family:var(--font-display); font-weight:700; font-size:13px; color:#c5cbd6; margin-top:9px; }
.ftop-dark-cta{ text-align:center; }
.ftop-dark-cta p{ font-size:15px; color:#e3e6eb; line-height:1.85; margin:0 0 20px; }
.ftop-dark-cta strong{ color:#fff; }

/* なぜFujiSSL */
.ftop-reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ftop-reason{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px; }
.ftop-reason-ic{ width:52px; height:52px; border-radius:14px; background:var(--red-tint); color:var(--red-dark); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:16px; }
.ftop-reason-t{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); margin-bottom:9px; }
.ftop-reason-d{ font-size:13.5px; line-height:1.85; color:#4a5266; }

/* 価格 */
.ftop-paper{ background:var(--paper); }
.ftop-price3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:860px; margin:0 auto; }
.ftop-price-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px; text-align:center; }
.ftop-price-card.featured{ border-color:var(--red); box-shadow:0 8px 24px rgba(178,31,45,.10); position:relative; }
.ftop-price-name{ font-family:var(--font-display); font-weight:700; font-size:14px; color:#5b6478; margin-bottom:10px; }
.ftop-price-val{ font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--ink); }
.ftop-price-val span{ font-size:15px; font-weight:700; }
.ftop-price-note{ font-size:12.5px; color:#7a8294; margin-top:8px; }
.ftop-price-more{ text-align:center; margin-top:28px; }

/* CTA */
.ftop-cta{ background:#1d2128; }
.ftop-cta-inner{ text-align:center; max-width:760px; }
.ftop-cta-h{ font-family:var(--font-display); font-weight:800; font-size:26px; color:#fff; margin:0 0 12px; }
.ftop-cta-b{ font-size:14.5px; color:#c5cbd6; line-height:1.85; margin:0 0 28px; }

@media (max-width:980px){
	.ftop-hero-inner{ grid-template-columns:1fr; gap:36px; }
	.ftop-hero-visual{ order:-1; }
	.ftop-products{ grid-template-columns:1fr 1fr; }
	.ftop-reasons{ grid-template-columns:1fr; }
	.ftop-h1{ font-size:34px; }
}
@media (max-width:600px){
	.ftop-products{ grid-template-columns:1fr; }
	.ftop-price3{ grid-template-columns:1fr; }
	.ftop-shrink{ gap:8px; }
	.ftop-h1{ font-size:28px; }
	.ftop-section{ padding:48px 0; }
	.ftop-prod-d{ min-height:0; }
}

/* =============================================================================
   28. リポジトリ（.frepo）: 階層ツリー / ダウンロード
   ========================================================================== */
.frepo-tree{ max-width:520px; margin:20px auto 8px; text-align:center; }
.frepo-node{ display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px; }
.frepo-node.root{ border-color:#bfe3cd; background:linear-gradient(180deg,#f3fbf6,#fff); }
.frepo-node.mid{ border-color:var(--red); box-shadow:0 4px 14px rgba(178,31,45,.10); }
.frepo-node.leaf{ border-color:var(--line-strong); }
.frepo-tag{ display:inline-block; font-family:var(--font-display); font-weight:800; font-size:11px; color:#fff; border-radius:999px; padding:3px 12px; margin-bottom:7px; }
.frepo-node.root .frepo-tag{ background:#1a9c5a; }
.frepo-node.mid .frepo-tag{ background:var(--red); }
.frepo-node.leaf .frepo-tag{ background:#5b6478; }
.frepo-name{ display:block; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); }
.frepo-desc{ display:block; font-size:12px; color:#5b6478; margin-top:3px; }
.frepo-arrow{ font-size:22px; color:var(--red); line-height:1.4; }
.frepo-dl{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.frepo-dl-item{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:16px 18px; text-decoration:none; transition:.15s var(--ease); }
.frepo-dl-item:hover{ border-color:var(--red); box-shadow:0 6px 18px rgba(178,31,45,.10); }
.frepo-dl-ic{ width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:var(--red-tint); color:var(--red-dark); display:flex; align-items:center; justify-content:center; font-size:20px; }
.frepo-dl-body{ flex:1; min-width:0; }
.frepo-dl-t{ display:block; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); }
.frepo-dl-d{ display:block; font-size:12px; color:#5b6478; margin-top:2px; }
.frepo-dl-btn{ flex:0 0 auto; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:#fff; background:var(--red); border-radius:8px; padding:8px 14px; }
.frepo-dl-item:hover .frepo-dl-btn{ background:var(--red-dark); }
@media(max-width:640px){ .frepo-dl{ grid-template-columns:1fr; } }

/* リポジトリ: サブ見出し・暗号方式ラベル */
.frepo-h3{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); margin:2em 0 .3em; }
.frepo-enc-label{ font-size:13px !important; font-weight:700; color:var(--red-dark) !important; margin:1em 0 .4em !important; }

/* リポジトリ: タブ・証明書メタ */
.frepo-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 16px; border-bottom:1px solid var(--line); padding-bottom:0; }
.frepo-tab{ font-family:var(--font-display); font-weight:700; font-size:13px; padding:11px 16px; border:1px solid var(--line); border-bottom:none; border-radius:10px 10px 0 0; background:#fff; cursor:pointer; color:#5b6478; transition:.12s var(--ease); position:relative; top:1px; }
.frepo-tab:hover{ color:var(--red-dark); }
.frepo-tab.active{ background:var(--red); color:#fff; border-color:var(--red); }
.frepo-panel{ display:none; }
.frepo-panel.show{ display:block; }
.frepo-dl-meta{ display:block; font-size:11.5px; color:#8a93a5; margin-top:3px; }
.frepo-meta{ margin-right:10px; } .frepo-meta b{ color:#5b6478; font-weight:700; margin-right:3px; }
.frepo-note-sm{ font-size:12.5px !important; color:#5b6478 !important; margin:10px 0 0 !important; }

/* リポジトリ: クロスルート説明（橋メタファー） */
.frepo-cross{ background:var(--paper); border:1px solid var(--line-soft); border-radius:14px; padding:22px; margin:8px 0 14px; }
.frepo-cross-h{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); margin:0 0 8px; }
.frepo-cross-lead{ font-size:14px !important; line-height:1.85 !important; color:#3a4255 !important; margin:0 0 16px !important; }
.frepo-cross-lead strong{ color:var(--red-dark); }
.frepo-bridge{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin:14px 0; }
.frepo-bridge-side{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:18px; text-align:center; }
.frepo-bridge-side.new{ border-color:#bfe3cd; }
.frepo-bridge-side.old{ border-color:#f0dcb8; }
.frepo-bridge-ic{ font-size:30px; margin-bottom:8px; }
.frepo-bridge-t{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink); }
.frepo-bridge-d{ font-size:12px; color:#5b6478; margin-top:4px; line-height:1.6; }
.frepo-bridge-verdict{ font-size:12.5px; line-height:1.5; margin-top:12px; padding:9px; border-radius:9px; }
.frepo-bridge-verdict.ok{ background:#eaf7ef; color:#1a7f4b; }
.frepo-bridge-verdict.warn{ background:#fdf3e8; color:#c2410c; }
.frepo-bridge-verdict strong{ font-size:13.5px; }
.frepo-bridge-arrow{ font-size:24px; color:var(--mute); }
.frepo-cross-note{ font-size:12.5px !important; line-height:1.8 !important; color:#5b6478 !important; margin:8px 0 0 !important; padding:12px 14px; background:#fff; border-radius:9px; border:1px solid var(--line-soft); }
.frepo-cross-note strong{ color:var(--ink); }
@media(max-width:640px){ .frepo-bridge{ grid-template-columns:1fr; } .frepo-bridge-arrow{ transform:rotate(90deg); } }

/* 価格カード: 最高水準バッジ */
.ftop-price-card{ position:relative; }
.ftop-price-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:11px; padding:4px 14px; border-radius:999px; white-space:nowrap; }

/* OV: 事前審査ビフォーアフター */
.fgd-ba{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
.fgd-ba-card{ border-radius:15px; padding:20px; border:1px solid var(--line); }
.fgd-ba-card.before{ background:#f7f6f3; }
.fgd-ba-card.after{ background:linear-gradient(180deg,var(--red-tint),#fff); border-color:#f0c9ce; }
.fgd-ba-head{ margin-bottom:14px; }
.fgd-ba-badge{ font-family:var(--font-display); font-weight:800; font-size:12.5px; padding:5px 13px; border-radius:999px; }
.fgd-ba-badge.x{ background:#e5e2db; color:#5b6478; } .fgd-ba-badge.o{ background:var(--red); color:#fff; }
.fgd-ba-flow{ display:flex; flex-direction:column; gap:8px; }
.fgd-ba-step{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:10px 13px; font-size:13px; color:#3a4255; }
.fgd-ba-step b{ color:var(--ink); }
.fgd-ba-step.once{ border-color:var(--red); }
.fgd-ba-step.hl{ background:var(--red-tint); border-color:#f0c9ce; }
.fgd-ba-step.hl b{ color:var(--red-dark); }
.fgd-ba-ar{ text-align:center; color:var(--mute); font-size:14px; }
.fgd-ba-note{ font-size:12px; color:#5b6478; margin-top:11px; text-align:center; }
@media(max-width:640px){ .fgd-ba{ grid-template-columns:1fr; } }

/* C群: 手順の全体像ステップバー */
.fgd-stepbar{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; background:var(--paper); border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px; margin:0 0 22px; }
.fgd-stepbar-item{ display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:#8a93a5; text-decoration:none; padding:5px 9px; border-radius:8px; }
.fgd-stepbar-item:hover{ color:var(--red-dark); }
.fgd-stepbar-item.active{ color:#fff; background:var(--red); }
.fgd-stepbar-n{ display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#e5e2db; color:#5b6478; font-size:11px; }
.fgd-stepbar-item.active .fgd-stepbar-n{ background:#fff; color:var(--red); }
.fgd-stepbar-sep{ color:#c5cbd6; font-size:14px; }
@media(max-width:640px){ .fgd-stepbar{ font-size:11px; } .fgd-stepbar-item{ padding:4px 6px; } .fgd-stepbar-sep{ display:none; } }

/* =============================================================================
   29. 本文リード帯・細部装飾（プレビューから本番へ移植）
   ========================================================================== */
/* リード文の強調帯（多くのページ冒頭で使用） */
.fgd-article .lead-strong{
	display:block; font-size:16.5px; font-weight:600; line-height:1.85;
	color:var(--ink); margin:0 0 1.4em; padding:16px 20px;
	background:var(--red-tint); border-left:3px solid var(--red);
	border-radius:0 10px 10px 0;
}
/* 本文中の細部装飾 */
.fgd-article .em{ color:var(--red-dark); font-weight:700; }
.fgd-article .note{ font-size:12.5px; color:#5b6478; }
.fgd-article .desc{ font-size:13px; color:#5b6478; }
.fgd-article .yen{ font-size:14px; font-weight:600; }
.fgd-article .ruby{ font-size:11px; color:#8a93a5; }


/* =============================================================================
   30. BIMI専用LP（#bimi-lp配下・本文styleに依存せずテーマ側で効かせる）
   ========================================================================== */
#bimi-lp#bimi-lp{font-family:'Zen Kaku Gothic New',sans-serif;color:#1c2540;line-height:1.8;width:100%;background:transparent;}#bimi-lp#bimi-lp *{box-sizing:border-box;}#bimi-lp#bimi-lp h1,#bimi-lp h2,#bimi-lp h3,#bimi-lp h4,#bimi-lp p,#bimi-lp ul{margin:0;padding:0;}#bimi-lp#bimi-lp h2::before,#bimi-lp h3::before,#bimi-lp h2::after{content:none !important;display:none !important;}#bimi-lp#bimi-lp h2{border:0 !important;}#bimi-lp#bimi-lp strong{background:none !important;color:#0a1530;font-weight:700;}#bimi-lp#bimi-lp a{transition:.16s;}#bimi-lp#bimi-lp .bl-hero{display:grid !important;grid-template-columns:1.15fr .85fr !important;gap:36px !important;align-items:center !important;padding:6px 0 42px;border-bottom:1px solid #ebe6da;margin-bottom:54px;max-width:none !important;}#bimi-lp#bimi-lp .bl-hero > div{max-width:none !important;margin:0 !important;}#bimi-lp#bimi-lp .bl-kicker{font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;letter-spacing:.07em;color:#852428;text-transform:uppercase;margin-bottom:14px;}#bimi-lp#bimi-lp .bl-h1{font-family:'Manrope','Zen Kaku Gothic New',sans-serif;font-weight:800;font-size:36px;line-height:1.35;letter-spacing:-.02em;color:#0a1530;margin-bottom:20px;}#bimi-lp#bimi-lp .bl-h1 .em{color:#c8102e;}#bimi-lp#bimi-lp .bl-lead{font-size:16.5px;color:#475069;line-height:1.95;margin-bottom:28px;}#bimi-lp#bimi-lp .bl-cta{display:inline-flex !important;align-items:center !important;gap:8px;background:#c8102e !important;color:#fff !important;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;padding:16px 34px;border-radius:8px;text-decoration:none !important;box-shadow:0 2px 0 #9a0c24;}#bimi-lp#bimi-lp .bl-cta:hover{background:#9a0c24;}#bimi-lp#bimi-lp .bl-heroimg{background:#fff;border:1px solid #ebe6da;border-radius:14px;padding:22px;text-align:center;box-shadow:0 18px 40px -24px rgba(10,21,48,.25);}#bimi-lp#bimi-lp .bl-heroimg .lbl{font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;color:#6b7280;display:block;margin-bottom:14px;letter-spacing:.04em;}#bimi-lp#bimi-lp .bl-heroimg img{max-width:100%;height:auto;border-radius:8px;}#bimi-lp#bimi-lp .bl-sec{margin-bottom:56px;}#bimi-lp#bimi-lp .bl-title{font-family:'Manrope','Zen Kaku Gothic New',sans-serif;font-weight:800;font-size:24px;color:#0a1530;letter-spacing:-.01em;display:flex !important;align-items:center !important;gap:12px;margin-bottom:28px;}#bimi-lp#bimi-lp .bl-title .bar{width:6px !important;height:24px !important;border-radius:3px;background:#c8102e !important;flex:none !important;}#bimi-lp#bimi-lp .bl-title.center{justify-content:center !important;}#bimi-lp#bimi-lp .bl-grid3{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:18px !important;max-width:none !important;}#bimi-lp#bimi-lp .bl-grid3 > .bl-card{max-width:none !important;margin:0 !important;width:auto !important;}#bimi-lp#bimi-lp .bl-card{background:#fff !important;border:1px solid #ebe6da;border-radius:12px;padding:24px 22px;}#bimi-lp#bimi-lp .bl-ic{width:42px !important;height:42px !important;border-radius:10px;background:#fef4f5 !important;border:1px solid #fde8eb;display:grid !important;place-items:center !important;color:#c8102e;margin-bottom:14px;}#bimi-lp#bimi-lp .bl-ic svg{width:23px;height:23px;}#bimi-lp#bimi-lp .bl-card h3{font-family:'Manrope','Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:16.5px;color:#0a1530;margin-bottom:9px;}#bimi-lp#bimi-lp .bl-card p{font-size:14px;color:#475069;line-height:1.85;}#bimi-lp#bimi-lp .bl-prices{display:grid !important;grid-template-columns:1fr 1fr !important;gap:22px !important;max-width:none !important;}#bimi-lp#bimi-lp .bl-prices > .bl-price{max-width:none !important;margin:0 !important;width:auto !important;}#bimi-lp#bimi-lp .bl-price{background:#fff !important;border:1px solid #d8d2c4;border-radius:14px;padding:40px 30px;text-align:center !important;position:relative !important;}#bimi-lp#bimi-lp .bl-price.reco{border:2px solid #c8102e;background:#fef4f5 !important;}#bimi-lp#bimi-lp .bl-ribbon{position:absolute !important;top:-15px;left:50% !important;transform:translateX(-50%) !important;background:#c8102e !important;color:#fff !important;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;padding:6px 18px;border-radius:6px;white-space:nowrap;}#bimi-lp#bimi-lp .bl-price h3{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:#6b7280;margin-bottom:14px;}#bimi-lp#bimi-lp .bl-price.reco h3{color:#c8102e;}#bimi-lp#bimi-lp .bl-price .desc{font-size:14.5px;color:#475069;line-height:1.7;margin-bottom:22px;}#bimi-lp#bimi-lp .bl-amt{font-family:'Manrope',sans-serif;font-weight:800;font-size:50px;line-height:1;color:#0a1530;letter-spacing:-.02em;}#bimi-lp#bimi-lp .bl-price.reco .bl-amt{color:#c8102e;}#bimi-lp#bimi-lp .bl-amt .yen{font-size:20px;font-weight:800;margin-left:2px;}#bimi-lp#bimi-lp .bl-tax{font-size:13px;color:#6b7280;margin-top:10px;font-family:'Manrope',sans-serif;}#bimi-lp#bimi-lp .bl-panel{background:#faf6ef !important;border:1px solid #ebe6da;border-radius:16px;padding:40px;max-width:none !important;}#bimi-lp#bimi-lp .bl-req{margin-bottom:28px;}#bimi-lp#bimi-lp .bl-req:last-child{margin-bottom:0;}#bimi-lp#bimi-lp .bl-req h3{font-family:'Manrope','Zen Kaku Gothic New',sans-serif;font-weight:800;font-size:18px;color:#c8102e;margin-bottom:10px;}#bimi-lp#bimi-lp .bl-req p{font-size:14.5px;color:#33405c;line-height:1.85;}#bimi-lp#bimi-lp .bl-code{background:#0d1117 !important;color:#e6edf3 !important;font-family:'JetBrains Mono',monospace;font-size:13.5px;padding:16px 18px;border-radius:8px;margin:14px 0;overflow-x:auto;}#bimi-lp#bimi-lp .bl-warn{font-size:13px;color:#c8102e;margin-top:10px;}#bimi-lp#bimi-lp .bl-link{color:#9a0c24;font-weight:700;text-decoration:underline;text-underline-offset:2px;}#bimi-lp#bimi-lp .bl-link:hover{color:#c8102e;}#bimi-lp#bimi-lp .bl-steps{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:14px !important;max-width:none !important;}#bimi-lp#bimi-lp .bl-steps > .bl-step{max-width:none !important;margin:0 !important;width:auto !important;}#bimi-lp#bimi-lp .bl-step{background:#fff !important;border:1px solid #ebe6da;border-radius:10px;padding:20px;text-align:center !important;}#bimi-lp#bimi-lp .bl-step .n{font-family:'Manrope',sans-serif;font-weight:800;color:#c8102e;font-size:14.5px;margin-bottom:8px;}#bimi-lp#bimi-lp .bl-step p{font-size:13px;color:#475069;line-height:1.7;}#bimi-lp#bimi-lp .bl-final{background:#0a1530 !important;border-radius:14px;padding:56px 40px;text-align:center !important;max-width:none !important;}#bimi-lp#bimi-lp .bl-final h2{font-family:'Manrope','Zen Kaku Gothic New',sans-serif;font-weight:800;font-size:30px;color:#fff !important;margin-bottom:16px;}#bimi-lp#bimi-lp .bl-final p{color:#94a3b8 !important;font-size:15.5px;margin-bottom:30px;line-height:1.8;}#bimi-lp#bimi-lp .bl-final .bl-cta{box-shadow:0 4px 16px rgba(196,16,46,.45);}@media(max-width:900px){#bimi-lp#bimi-lp .bl-grid3{grid-template-columns:repeat(2,1fr) !important;}#bimi-lp#bimi-lp .bl-steps{grid-template-columns:repeat(2,1fr) !important;}}@media(max-width:760px){#bimi-lp#bimi-lp .bl-hero{grid-template-columns:1fr !important;}#bimi-lp#bimi-lp .bl-prices{grid-template-columns:1fr !important;}#bimi-lp#bimi-lp .bl-grid3{grid-template-columns:1fr !important;}#bimi-lp#bimi-lp .bl-steps{grid-template-columns:1fr !important;}#bimi-lp#bimi-lp .bl-h1{font-size:28px;}}

/* =============================================================================
   20. ドキュメントツリー サイドバー（階層ある固定ページに自動表示）
   ========================================================================== */
.docs-tree-nav{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 18px 22px; box-shadow:0 6px 18px -14px rgba(10,21,48,.18); }
.docs-tree-root{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:800; font-size:14.5px; padding:6px 4px 14px; border-bottom:2px solid var(--red); margin-bottom:10px; letter-spacing:-.005em; transition:.15s var(--ease); }
.docs-tree-root:hover{ color:var(--red-dark); }
.docs-tree-root.is-current{ color:var(--red); }
.docs-tree-root-icon{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--red-tint); color:var(--red); flex:none; }
.docs-tree-root-icon svg{ width:14px; height:14px; }
.docs-tree-list, .docs-tree-list ul.children{ list-style:none; margin:0; padding:0; }
.docs-tree-list li{ margin:0; }
.docs-tree-list li a{ display:block; padding:8px 10px; font-size:13.5px; line-height:1.55; color:#3a4255; text-decoration:none; border-radius:6px; transition:.12s var(--ease); }
.docs-tree-list li a:hover{ background:var(--paper); color:var(--red-dark); }
.docs-tree-list .current_page_item > a,
.docs-tree-list .current_page_ancestor > a{ background:var(--red-tint); color:var(--red-dark); font-weight:700; position:relative; }
.docs-tree-list .current_page_item > a::before{ content:""; position:absolute; left:-4px; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--red); }
.docs-tree-list ul.children{ padding-left:14px; border-left:1px dashed var(--line); margin:2px 0 4px 10px; }
.docs-tree-list ul.children li a{ font-size:13px; padding:6px 10px; color:#5b6478; }

/* 既存ページ本文内に手入力された「目次風」の空箇条書きの崩れを軽減 */
.article-body ul li:empty,
.article-body ol li:empty{ display:none; }
.article-body ul li > ul:only-child{ margin-top:4px; }

/* =============================================================================
   21. ドキュメントツリーページ：本文クリーンアップ
   ========================================================================== */
/* 冗長な本文内インラインナビ（サイドバーと重複する階層ULリスト）を非表示
   :has() は2023年以降のモダンブラウザで広くサポート済み。
   ① 「ULの直下のLIが、直下にULを持つ」典型的な階層ナビパターンを検出（最も安全）
   ② :first-of-type の制約を外し、article-body内のどこにあっても効くようにする */
body.doc-tree-page .article-body ul:has(> li > ul){ display:none !important; }
body.doc-tree-page .article-body ul:has(> li > ol),
body.doc-tree-page .article-body ol:has(> li > ul){ display:none !important; }

/* 念のためfallback：空のliは全部非表示（v0.16.14で導入済みのものを再確認） */
body.doc-tree-page .article-body ul li:empty,
body.doc-tree-page .article-body ol li:empty{ display:none !important; }

/* タイポグラフィの引き締め */
body.doc-tree-page .article-body h2{ font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--ink); margin:2em 0 .7em; padding-left:14px; position:relative; line-height:1.5; }
body.doc-tree-page .article-body h2::before{ content:""; position:absolute; left:0; top:.18em; width:4px; height:.95em; background:var(--red); border-radius:2px; }
body.doc-tree-page .article-body h3{ font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--ink); margin:1.5em 0 .55em; }
body.doc-tree-page .article-body h4{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); margin:1.3em 0 .5em; }
body.doc-tree-page .article-body p{ margin:0 0 1.05em; line-height:1.85; color:#333a4a; }
body.doc-tree-page .article-body ul,
body.doc-tree-page .article-body ol{ margin:0 0 1.2em; padding-left:24px; }
body.doc-tree-page .article-body li{ margin:0 0 .35em; line-height:1.8; color:#333a4a; }
body.doc-tree-page .article-body strong{ color:var(--ink); font-weight:700; }
body.doc-tree-page .article-body a{ color:var(--red-dark); text-decoration:underline; text-underline-offset:2px; }
body.doc-tree-page .article-body a:hover{ color:var(--red); }

/* 赤字パラグラフ（「この項目は、XXXのみ必要な内容になります。」のような注意書き）を
   フチ赤の警告コールアウトに昇格させる */
body.doc-tree-page .article-body p[style*="color:red"],
body.doc-tree-page .article-body p[style*="color: red"],
body.doc-tree-page .article-body p[style*="color:#c8102e"],
body.doc-tree-page .article-body p[style*="color:#9a0c24"],
body.doc-tree-page .article-body p[style*="color: #c8102e"],
body.doc-tree-page .article-body p[style*="color: #9a0c24"],
body.doc-tree-page .article-body p > span[style*="color:red"]:only-child,
body.doc-tree-page .article-body p > strong[style*="color:red"]:only-child{
	display:block;
	background:#fef4f5;
	border-left:4px solid var(--red);
	padding:12px 16px;
	color:var(--red-dark) !important;
	border-radius:0 8px 8px 0;
	margin:1.3em 0;
	font-size:14px;
	font-weight:600;
	line-height:1.7;
}