/*
Theme Name: SSL Store
Theme URI: https://www.ssl-store.jp/
Author: 株式会社ニジモ
Author URI: https://www.ssl-store.jp/
Description: SSLストア公式WordPressテーマ。多ブランド対応の SSL証明書専門店向けデザイン。
Version: 3.2.29
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: sslstore
*/

/* ================================================
   DESIGN TOKENS (CSS Variables)
   ================================================ */
:root {
  /* Base */
  --bg: #fafaf7;
  --bg-card: #ffffff;
  --bg-soft: #f4f3ef;
  --text: #1a1a1a;
  --text-sub: #5a5a5a;
  --text-mute: #8a8a8a;
  --border: #e8e5dd;
  --border-strong: #d6d3c9;
  --hairline: #f0ede4;

  /* Universal accents */
  --gold: #b89968;
  --gold-soft: #e8dcc4;
  --navy: #1c2840;

  /* BRAND COLORS - 各認証局のアイデンティティ */
  --b-fujissl: #d8324a;
  --b-fujissl-soft: #fde9ed;
  --b-fujissl-dark: #b3253a;

  --b-digicert: #1565c0;
  --b-digicert-soft: #e3f0fa;
  --b-digicert-dark: #0d4894;

  --b-verisign: #b89968;
  --b-verisign-soft: #f7f0e2;
  --b-verisign-dark: #8a6f44;

  --b-geotrust: #2e7d32;
  --b-geotrust-soft: #e8f3ea;
  --b-geotrust-dark: #1f5722;

  --b-sectigo: #0a5d3d;
  --b-sectigo-soft: #e3f0ec;
  --b-sectigo-dark: #064128;

  --b-rapidssl: #e88a00;
  --b-rapidssl-soft: #fdf0db;
  --b-rapidssl-dark: #b86c00;

  --b-comodo: #c62828;
  --b-comodo-soft: #fce8e8;
  --b-comodo-dark: #9a1d1d;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 24px;
  --header-height: 88px;
  --radius: 8px;
  --radius-sm: 4px;
}

/* ================================================
   RESET & BASE
   ================================================ */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  line-height: 1.7;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
.num { font-family: "DM Sans", "Noto Sans JP", sans-serif; font-feature-settings: "tnum"; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* WordPress core/editor compatibility */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ================================================
   UTILITY BAR (TOP NAVY)
   ================================================ */
.util-bar {
  background: var(--navy);
  color: #fff;
  font-size: 12px;
}
.util-bar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px var(--container-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.util-bar a { color: rgba(255, 255, 255, 0.85); }
.util-bar a:hover { color: var(--gold); }
.util-news { display: flex; align-items: center; gap: 10px; }
.util-news .badge {
  background: var(--gold);
  color: var(--navy);
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.util-right { display: flex; gap: 20px; font-size: 11px; }

/* ================================================
   HEADER
   ================================================ */
.site-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 18px 0;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.site-logo:hover { color: var(--text); }
.logo-mark {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--b-fujissl) 0%, var(--b-fujissl-dark) 100%);
  color: #fff;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(216, 50, 74, 0.25);
}
.logo-mark svg { width: 22px; height: 22px; fill: #fff; }
.logo-text small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.header-search {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}
.header-search input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  color: var(--text);
}
.header-search button {
  background: var(--text);
  color: #fff;
  border: none;
  padding: 11px 18px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0 5px 5px 0;
}
.header-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.h-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-sub);
  transition: background 0.15s, color 0.15s;
  text-align: center;
}
.h-action:hover { background: var(--bg-soft); color: var(--text); }
.h-action .icn { font-size: 18px; }
.tel-block {
  text-align: right;
  border-left: 1px solid var(--border);
  padding-left: 16px;
  margin-left: 8px;
}
.tel-block .tel-label { font-size: 10px; color: var(--text-mute); }
.tel-block .tel-num {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.1;
  display: block;
  text-decoration: none;
}
.tel-block .tel-num:hover {
  color: var(--b-fujissl);
}
.tel-block .tel-hours { font-size: 10px; color: var(--text-mute); }

/* ================================================
   MAIN NAV
   ================================================ */
.main-nav {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.main-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-items {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 4px;
}
.nav-close { display: none; }
.main-nav a {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a.active,
.main-nav .current-menu-item > a {
  color: var(--text);
  border-bottom-color: var(--b-fujissl);
}
.main-nav .menu-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}
.nav-cta {
  margin-left: auto;
  background: var(--b-fujissl);
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm);
  border-bottom: none !important;
  font-size: 12px;
}
.nav-cta:hover {
  background: var(--b-fujissl-dark);
  border-bottom-color: transparent !important;
}

/* ================================================
   ACHIEVEMENT BANNER
   ================================================ */
.achievement {
  background: linear-gradient(90deg, var(--navy) 0%, #2c3a5a 100%);
  color: #fff;
  padding: 12px 0;
  text-align: center;
}
.achievement-inner {
  display: flex;
  justify-content: center;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}
.achievement-inner .stat { display: flex; align-items: baseline; gap: 6px; }
.achievement-inner .stat b {
  color: var(--gold);
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.achievement-inner .divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.2);
}

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
}
.btn-primary {
  background: var(--b-fujissl);
  color: #fff;
  box-shadow: 0 2px 8px rgba(216, 50, 74, 0.2);
}
.btn-primary:hover { background: var(--b-fujissl-dark); color: #fff; }
.btn-outline {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--text); color: var(--text); }
.btn-ghost { color: var(--text-sub); background: transparent; }
.btn-ghost:hover { background: var(--bg-soft); color: var(--text); }
.btn-sm { padding: 8px 14px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { width: 100%; }

/* ================================================
   HERO
   ================================================ */
.hero {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%);
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-block;
  background: var(--b-fujissl-soft);
  color: var(--b-fujissl-dark);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.hero h1 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.hero h1 .accent {
  background: linear-gradient(transparent 65%, var(--gold-soft) 65%);
  padding: 0 4px;
}
.hero-lead {
  color: var(--text-sub);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 24px;
  max-width: 560px;
}
.hero-features {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-features li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
}
.hero-features li::before {
  content: "✓";
  color: var(--b-geotrust);
  font-weight: 700;
  margin-right: 6px;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Hero showcase card */
.hero-showcase {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.hero-showcase-head {
  background: var(--b-fujissl);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-showcase-head .label {
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.hero-showcase-head .pick {
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.hero-showcase-body { padding: 24px; }
.hero-showcase-body .brand {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--b-fujissl);
  margin-bottom: 4px;
}
.hero-showcase-body .name {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.hero-showcase-body .specs { margin-bottom: 18px; }
.hero-showcase-body .specs li {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--hairline);
}
.hero-showcase-body .specs .lbl { color: var(--text-mute); }
.hero-showcase-body .specs .val { font-weight: 700; }
.hero-showcase-body .specs .val.gold { color: var(--b-fujissl-dark); }
.hero-showcase-price {
  background: var(--b-fujissl-soft);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  margin-bottom: 14px;
}
.hero-showcase-price .lbl { font-size: 11px; color: var(--text-mute); margin-bottom: 4px; }
.hero-showcase-price .price {
  font-family: "DM Sans", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--b-fujissl);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-showcase-price .yen { font-size: 18px; margin-right: 2px; }
.hero-showcase-price .unit { font-size: 12px; color: var(--text-sub); margin-left: 4px; font-weight: 500; }
.hero-showcase-price .tax { font-size: 10px; color: var(--text-mute); margin-top: 4px; }

/* ================================================
   QUICK SELECTOR
   ================================================ */
.quick-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: -24px auto 0;
  max-width: 1152px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.quick-select-label {
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quick-select-label .icn {
  width: 32px; height: 32px;
  background: var(--gold-soft);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold);
  font-size: 16px;
}
.quick-select-label small {
  display: block;
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 500;
}
.quick-options { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-options button {
  padding: 9px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  transition: all 0.15s;
}
.quick-options button:hover,
.quick-options button.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

/* ================================================
   SECTIONS
   ================================================ */
.section { padding: 64px 0 32px; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--text);
}
.section-head h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.section-head h2 small {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.15em;
  font-weight: 500;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.section-head .more {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 700;
  transition: color 0.15s;
}
.section-head .more:hover { color: var(--b-fujissl); }

/* ================================================
   BRAND STRIP
   ================================================ */
.brand-strip-section { padding: 40px 0; }
.brand-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
}
.brand-strip a {
  padding: 24px 12px;
  border-right: 1px solid var(--border);
  text-align: center;
  transition: background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  min-width: 0; /* shrink correctly within grid */
}
.brand-strip a:last-child { border-right: none; }

/* Tablet: 4 + 3 layout (no orphans) */
@media (max-width: 1100px) {
  .brand-strip { grid-template-columns: repeat(4, 1fr); }
  .brand-strip a {
    border-bottom: 1px solid var(--border);
  }
  .brand-strip a:nth-child(4n),
  .brand-strip a:last-child {
    border-right: none;
  }
  .brand-strip a:nth-last-child(-n+3) {
    border-bottom: none;
  }
}

/* Mobile: 2 columns */
@media (max-width: 600px) {
  .brand-strip { grid-template-columns: repeat(2, 1fr); }
  .brand-strip a {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 16px 8px;
  }
  .brand-strip a:nth-child(2n) { border-right: none; }
  .brand-strip a:nth-last-child(-n+2):nth-child(odd),
  .brand-strip a:nth-last-child(-n+1) { border-bottom: none; }
  .brand-logo-text { font-size: 15px !important; }
  .brand-logo-tag { font-size: 9px !important; }
}
.brand-strip a:hover { background: var(--bg-soft); }
.brand-strip a:hover::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
}
.brand-strip a.bs-fujissl:hover::after { background: var(--b-fujissl); }
.brand-strip a.bs-digicert:hover::after { background: var(--b-digicert); }
.brand-strip a.bs-verisign:hover::after { background: var(--b-verisign); }
.brand-strip a.bs-geotrust:hover::after { background: var(--b-geotrust); }
.brand-strip a.bs-sectigo:hover::after { background: var(--b-sectigo); }
.brand-strip a.bs-rapidssl:hover::after { background: var(--b-rapidssl); }
.brand-strip a.bs-comodo:hover::after { background: var(--b-comodo); }

.brand-logo-text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bs-fujissl .brand-logo-text { color: var(--b-fujissl); }
.bs-digicert .brand-logo-text { color: var(--b-digicert); }
.bs-verisign .brand-logo-text { color: var(--b-verisign); }
.bs-geotrust .brand-logo-text { color: var(--b-geotrust); }
.bs-sectigo .brand-logo-text { color: var(--b-sectigo); }
.bs-rapidssl .brand-logo-text { color: var(--b-rapidssl); }
.bs-comodo .brand-logo-text { color: var(--b-comodo); }
.brand-logo-tag { font-size: 10px; color: var(--text-mute); }

/* ================================================
   BRAND SECTIONS
   ================================================ */
.brand-section {
  margin-bottom: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.brand-section-head {
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  border-top: 4px solid;
}
.brand-mark {
  width: 64px; height: 64px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1;
}
.brand-info h3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-info h3 .badge-pop {
  background: var(--b-fujissl);
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.brand-info h3 .badge-acme {
  background: var(--b-geotrust-soft);
  color: var(--b-geotrust-dark);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.brand-info p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
}
.brand-section-head .more-link {
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
}
.brand-section-head .more-link:hover { background: var(--text); color: #fff; }

/* Brand-specific colors */
.brand-section.fujissl .brand-section-head { border-top-color: var(--b-fujissl); }
.brand-section.fujissl .brand-mark { background: var(--b-fujissl-soft); color: var(--b-fujissl); }
.brand-section.digicert .brand-section-head { border-top-color: var(--b-digicert); }
.brand-section.digicert .brand-mark { background: var(--b-digicert-soft); color: var(--b-digicert); }
.brand-section.verisign .brand-section-head { border-top-color: var(--b-verisign); }
.brand-section.verisign .brand-mark { background: var(--b-verisign-soft); color: var(--b-verisign); }
.brand-section.geotrust .brand-section-head { border-top-color: var(--b-geotrust); }
.brand-section.geotrust .brand-mark { background: var(--b-geotrust-soft); color: var(--b-geotrust); }
.brand-section.sectigo .brand-section-head { border-top-color: var(--b-sectigo); }
.brand-section.sectigo .brand-mark { background: var(--b-sectigo-soft); color: var(--b-sectigo); }
.brand-section.rapidssl .brand-section-head { border-top-color: var(--b-rapidssl); }
.brand-section.rapidssl .brand-mark { background: var(--b-rapidssl-soft); color: var(--b-rapidssl); }
.brand-section.comodo .brand-section-head { border-top-color: var(--b-comodo); }
.brand-section.comodo .brand-mark { background: var(--b-comodo-soft); color: var(--b-comodo); }

/* ================================================
   PRODUCT CARDS
   ================================================ */
.brand-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-card);
}
.product {
  padding: 20px 24px;
  border-right: 1px solid var(--border);
  transition: background 0.15s;
  position: relative;
}
.product:last-child { border-right: none; }
.product:hover { background: var(--bg-soft); }
.product-tag-row {
  display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap;
}
.product-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tag-type-dv { background: #e8f3ea; color: var(--b-geotrust-dark); }
.tag-type-ov { background: #e3f0fa; color: var(--b-digicert-dark); }
.tag-type-ev { background: #fde9ed; color: var(--b-fujissl-dark); }
.tag-acme { background: #1a1a1a; color: #fff; }
.tag-new { background: var(--b-rapidssl); color: #fff; }
.tag-popular { background: var(--gold); color: var(--text); }

.product-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
}
.product-desc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 14px;
  min-height: 38px;
}
.product-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--text-mute);
  flex-wrap: wrap;
}
.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.product-price-row .lbl { font-size: 10px; color: var(--text-mute); }
.product-price {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.product-price .yen { font-size: 14px; margin-right: 1px; }
.product-price .unit { font-size: 11px; color: var(--text-sub); font-weight: 500; margin-left: 2px; }
.product-actions { display: flex; gap: 6px; }
.product-actions .btn { flex: 1; }

/* ================================================
   USE CASE CARDS
   ================================================ */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.usecase {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.15s, transform 0.15s;
}
.usecase:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}
.usecase .icn {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.uc-1 .icn { background: var(--b-fujissl-soft); }
.uc-2 .icn { background: var(--b-digicert-soft); }
.uc-3 .icn { background: var(--b-geotrust-soft); }
.uc-4 .icn { background: var(--b-rapidssl-soft); }
.usecase h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.usecase p { font-size: 12px; color: var(--text-sub); line-height: 1.7; margin-bottom: 12px; }
.usecase a { font-size: 12px; font-weight: 700; color: var(--text); }
.usecase a:hover { color: var(--b-fujissl); }

/* ================================================
   TRUST BAR
   ================================================ */
.trust {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-item {
  border-right: 1px solid var(--border);
  padding-right: 24px;
}
.trust-item:last-child { border-right: none; }
.trust-item .icn {
  width: 36px; height: 36px;
  background: var(--gold-soft);
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--gold);
  font-size: 18px;
  margin-bottom: 12px;
}
.trust-item h5 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.trust-item p { font-size: 12px; color: var(--text-sub); line-height: 1.7; }

/* ================================================
   NEWS / INFO BLOCKS
   ================================================ */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.info-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.info-block h3 {
  background: var(--bg-soft);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-block h3 a { font-size: 11px; color: var(--text-sub); font-weight: 500; }
.info-block h3 a:hover { color: var(--b-fujissl); }
.info-block ul { padding: 4px 20px 16px; }
.info-block li {
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.info-block li:last-child { border-bottom: none; }
.info-block .date {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: var(--text-mute);
  margin-right: 8px;
  font-weight: 500;
  flex-shrink: 0;
}
.info-block .tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 700;
  margin-right: 6px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.info-block li a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.tag-imp { background: var(--b-fujissl); color: #fff; }
.tag-info { background: var(--bg-soft); color: var(--text-sub); }
.tag-done { background: var(--b-geotrust); color: #fff; }
.info-block li a:hover { color: var(--b-fujissl); text-decoration: underline; }

/* ================================================
   FOOTER
   ================================================ */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 56px 0 24px;
  margin-top: 64px;
  font-size: 12px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-grid h5 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}
.footer-grid li { padding: 5px 0; }
.footer-grid a { color: rgba(255, 255, 255, 0.7); }
.footer-grid a:hover { color: var(--gold); }
.footer-grid .lead { line-height: 1.8; color: rgba(255, 255, 255, 0.65); }
.footer-grid .pay-row {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 16px;
}
.footer-grid .pay-row span {
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 7px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

/* ================================================
   PAGE CONTENT (single / page templates)
   ================================================ */
.page-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.95;
}
.page-content h1 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.page-content h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 22px;
  font-weight: 900;
  margin: 36px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--b-fujissl);
}
.page-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 24px 0 12px;
  color: var(--b-fujissl-dark);
}
.page-content p { margin-bottom: 16px; }
.page-content a { color: var(--b-digicert); text-decoration: underline; }
.page-content ul, .page-content ol { margin: 16px 0 16px 1.5em; }
.page-content li { list-style: disc; margin-bottom: 6px; }
.page-content ol li { list-style: decimal; }
.page-content blockquote {
  border-left: 4px solid var(--b-fujissl);
  padding: 8px 16px;
  margin: 16px 0;
  background: var(--bg-soft);
  font-style: italic;
}
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.page-content th, .page-content td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
}
.page-content th { background: var(--bg-soft); font-weight: 700; }
.page-content code {
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  font-family: "DM Sans", monospace;
}

/* Breadcrumb */
.breadcrumb {
  padding: 16px 0;
  font-size: 12px;
  color: var(--text-mute);
}
.breadcrumb a { color: var(--text-sub); }
.breadcrumb a:hover { color: var(--b-fujissl); }
.breadcrumb .sep { margin: 0 6px; color: var(--border-strong); }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  .header-main { grid-template-columns: auto 1fr auto; gap: 12px; }
  .header-search { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .quick-select { grid-template-columns: 1fr; }
  .brand-products { grid-template-columns: 1fr; }
  .product { border-right: none; border-bottom: 1px solid var(--border); }
  .product:last-child { border-bottom: none; }
  .usecase-grid { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust-item { border-right: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .brand-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  :root { --container-padding: 16px; }
  .util-bar-inner, .achievement-inner { font-size: 11px; }
  .util-right { display: none; }
  .h-action { display: none; }
  .brand-section-head { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .hero h1 { font-size: 28px; }
  .brand-strip { grid-template-columns: 1fr 1fr; }
  .trust { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-content { padding: 24px; }
}

/* ================================================
   47-DAY RULE COUNTDOWN
   ================================================ */
.countdown-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--b-fujissl-dark);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--b-fujissl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.countdown-compact .cd-c-icon { font-size: 14px; }
.countdown-compact strong { color: var(--b-fujissl); font-family: "DM Sans", sans-serif; font-size: 14px; }

.countdown-large {
  background: linear-gradient(135deg, #1c2840 0%, #2d3a5a 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 36px 40px;
  margin: 24px 0;
  text-align: center;
  box-shadow: 0 12px 32px rgba(28, 40, 64, 0.15);
  position: relative;
  overflow: hidden;
}
.countdown-large::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(216,50,74,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.countdown-large .cd-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.countdown-large .cd-target {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.countdown-large .cd-days {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.countdown-large .cd-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 80px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -0.04em;
}
.countdown-large .cd-label {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 32px;
  color: #fff;
  font-weight: 900;
  margin-left: 8px;
}
.countdown-large .cd-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 28px;
  position: relative; z-index: 1;
}
.countdown-large .cd-sub strong { color: var(--gold); }

.countdown-large .cd-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative; z-index: 1;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cd-phase {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 14px 12px;
  transition: all 0.2s;
}
.cd-phase.is-current {
  background: rgba(216, 50, 74, 0.2);
  border-color: var(--b-fujissl);
}
.cd-phase.is-passed {
  opacity: 0.5;
  background: rgba(46, 125, 50, 0.15);
}
.cd-phase-name {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.cd-phase-label {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}
.cd-phase-status {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.cd-phase-status strong {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  color: var(--gold);
  font-weight: 700;
}
.cd-status-passed { color: #5fc97e; font-weight: 700; }
.cd-phase-date {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

@media (max-width: 700px) {
  .countdown-large { padding: 24px 20px; }
  .countdown-large .cd-digit { width: 48px; height: 64px; font-size: 40px; }
  .countdown-large .cd-label { font-size: 24px; }
  .countdown-large .cd-phases { grid-template-columns: 1fr; }
}

/* ================================================
   FUJISSL AWARENESS BANNER (sister site introduction)
   ================================================
   控えめな気付き喚起バナー。SSL以外の専門商品を
   「興味ある人だけ」気づくスタイル。
================================================ */
.fujissl-awareness {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--b-digicert);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin: 24px 0;
  position: relative;
}
.fujissl-awareness .fawb-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fujissl-awareness .fawb-tag {
  background: var(--b-digicert);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.fujissl-awareness .fawb-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin-bottom: 18px;
  color: var(--text);
}
.fujissl-awareness .fawb-title strong {
  color: var(--b-digicert);
}
.fujissl-awareness .fawb-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-bottom: 20px;
  list-style: none;
  padding: 0;
}
.fujissl-awareness .fawb-products li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  list-style: none;
}
.fujissl-awareness .fawb-icn {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--bg-soft);
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.fujissl-awareness .fawb-products li strong {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}
.fujissl-awareness .fawb-products li small {
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.5;
}
.fujissl-awareness .fawb-action {
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.fujissl-awareness .fawb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--b-digicert);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.fujissl-awareness .fawb-link:hover {
  background: var(--b-digicert-dark);
  color: #fff;
}
.fujissl-awareness .fawb-note {
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.6;
}

/* Compact variant — for product pages, less visual weight */
.fujissl-awareness.is-compact {
  padding: 20px 24px;
  margin: 16px 0;
}
.fujissl-awareness.is-compact .fawb-title { font-size: 15px; margin-bottom: 12px; }
.fujissl-awareness.is-compact .fawb-products { grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.fujissl-awareness.is-compact .fawb-products li { font-size: 12px; }
.fujissl-awareness.is-compact .fawb-products li small { display: none; }
.fujissl-awareness.is-compact .fawb-action { padding-top: 12px; }

@media (max-width: 700px) {
  .fujissl-awareness { padding: 20px; }
  .fujissl-awareness .fawb-products { grid-template-columns: 1fr; }
  .fujissl-awareness .fawb-action { flex-direction: column; align-items: stretch; }
  .fujissl-awareness .fawb-link { justify-content: center; }
  .d-md { display: none; }
}

/* ============================================
 * Brand Capability Tags (auto-aggregated)
 * Shows at top of each brand section to indicate
 * what types/features the brand offers.
 * ============================================ */
.brand-capability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.cap-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.4;
}

/* Type tags — solid brand color */
.cap-tag.cap-type {
  border: 2px solid currentColor;
  background: transparent;
  font-weight: 900;
  font-size: 12px;
  padding: 3px 11px;
}
.cap-tag.cap-dv { color: #2e7d32; }
.cap-tag.cap-ov { color: #1565c0; }
.cap-tag.cap-ev { color: #d8324a; }

/* Feature tags */
.cap-tag.cap-feature {
  background: #1c2840;
  color: #fff;
  border: none;
}
.cap-tag.cap-acme {
  background: linear-gradient(135deg, #b89968 0%, #d4af7a 100%);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.cap-tag.cap-wildcard {
  background: #f1f1f1;
  color: #1c2840;
  border: 1px solid #ccc;
}
.cap-tag.cap-multi {
  background: #f1f1f1;
  color: #1c2840;
  border: 1px solid #ccc;
}
.cap-divider {
  color: #ccc;
  font-weight: 400;
  font-size: 13px;
  margin: 0 2px;
}

/* Product card badges */
.product-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}
.badge-type, .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.badge-type.badge-dv { background: #2e7d32; color: #fff; }
.badge-type.badge-ov { background: #1565c0; color: #fff; }
.badge-type.badge-ev { background: #d8324a; color: #fff; }
.badge.badge-acme {
  background: linear-gradient(135deg, #1c2840 0%, #2a3a5a 100%);
  color: #d4af7a;
  border: 1px solid #b89968;
  font-weight: 900;
}
.badge.badge-popular {
  background: #b89968;
  color: #fff;
}
.badge.badge-cheapest {
  background: #d8324a;
  color: #fff;
}
.badge.badge-new {
  background: #ff5722;
  color: #fff;
}
.badge.badge-featured {
  background: #b89968;
  color: #fff;
}
.badge.badge-wildcard,
.badge.badge-multi {
  background: #f1f1f1;
  color: #1c2840;
  border: 1px solid #ccc;
}

/* Brand info h3 inline badges (e.g. ACME, 当店イチオシ) */
.brand-info h3 .badge-acme,
.brand-info h3 .badge-popular,
.brand-info h3 .badge-legacy {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}
.brand-info h3 .badge-acme {
  background: linear-gradient(135deg, #1c2840 0%, #2a3a5a 100%);
  color: #d4af7a;
  border: 1px solid #b89968;
}
.brand-info h3 .badge-popular {
  background: #b89968;
  color: #fff;
}

/* Mobile: smaller cap tags */
@media (max-width: 760px) {
  .brand-capability-tags { gap: 5px; }
  .cap-tag { font-size: 10px; padding: 3px 8px; }
  .cap-tag.cap-type { font-size: 11px; padding: 2px 7px; }
}

/* ============================================
 * Product Page (page.php conditional template)
 * ============================================ */
.product-page { background: #fafbfc; }

.product-hero { padding: 48px 0 56px; }
.product-hero-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
.product-hero-text h1 { font-weight: 900; color: #1c2840; }

.ph-price-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(28, 40, 64, 0.08);
  padding: 24px;
  position: sticky;
  top: 80px;
}
.ph-brand-mark {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.ph-product-name {
  font-size: 16px;
  font-weight: 700;
  color: #1c2840;
  margin-bottom: 20px;
  line-height: 1.5;
}
.ph-price-block {
  background: #fde9ed;
  padding: 16px 18px;
  border-radius: 6px;
  margin-bottom: 16px;
  text-align: center;
}
.ph-price-label { font-size: 12px; color: #666; margin-bottom: 4px; font-weight: 700; }
.ph-price {
  font-size: 32px;
  font-weight: 900;
  color: #d8324a;
  line-height: 1;
}
.ph-price .yen { font-size: 18px; margin-right: 2px; }
.ph-price .unit { font-size: 13px; color: #666; font-weight: 700; margin-left: 4px; }
.ph-price-renew { font-size: 11px; color: #666; margin-top: 6px; }

/* ACME notice (FujiSSL誘導) */
.acme-notice-section { padding: 32px 0; background: #fff8db; border-top: 1px solid #f0d97a; border-bottom: 1px solid #f0d97a; }
.acme-notice {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 28px 32px;
  border-radius: 8px;
  border-left: 6px solid #b89968;
  box-shadow: 0 2px 12px rgba(184, 153, 104, 0.15);
}
.acme-notice-icon { font-size: 56px; line-height: 1; text-align: center; padding-top: 8px; }
.acme-notice h2 {
  margin: 0 0 8px;
  font-size: 22px;
  color: #1c2840;
  font-weight: 900;
}
.acme-notice p { margin: 0 0 10px; line-height: 1.7; }
.acme-features {
  margin: 16px 0;
  padding: 12px 16px;
  background: #f9f7f0;
  border-radius: 4px;
  list-style: none;
}
.acme-features li {
  padding: 2px 0;
  font-size: 13px;
  color: #1c2840;
}
.acme-notice .btn-primary {
  background: #b89968;
  color: #fff;
  border-color: #b89968;
  margin-right: 8px;
  margin-top: 8px;
}
.acme-notice .btn-primary:hover { background: #a08555; border-color: #a08555; }
.acme-notice .btn-outline {
  margin-top: 8px;
}

/* Product content section */
.product-content-section { padding: 48px 0; background: #fff; }
.product-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.85;
  color: #333;
}
.product-content h2 { font-size: 22px; margin: 32px 0 12px; color: #1c2840; }
.product-content h3 { font-size: 18px; margin: 24px 0 8px; color: #1c2840; }
.product-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.product-content th, .product-content td { padding: 8px 12px; border: 1px solid #ddd; font-size: 13px; }
.product-content th { background: #f5f5f7; font-weight: 700; }

/* Bottom CTA */
.product-cta-section { padding: 48px 0; background: #1c2840; color: #fff; }
.product-cta { text-align: center; max-width: 700px; margin: 0 auto; }
.product-cta h2 { color: #fff; margin: 0 0 16px; font-size: 24px; }
.product-cta .cta-price {
  font-size: 36px;
  color: #d4af7a;
  font-weight: 900;
  margin: 16px 0;
}
.product-cta .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.product-cta .btn-outline {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.product-cta .btn-outline:hover { background: #fff; color: #1c2840; border-color: #fff; }

@media (max-width: 760px) {
  .product-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .ph-price-card { position: static; }
  .acme-notice { grid-template-columns: 1fr; padding: 20px; }
  .acme-notice-icon { font-size: 40px; padding: 0; }
}

/* ============================================
 * FAQ Page Styles
 * ============================================ */
.faq-page { background: #fafbfc; }

/* Hero */
.faq-hero {
  background: linear-gradient(135deg, #1c2840 0%, #2a3a5a 100%);
  color: #fff;
  padding: 56px 0 64px;
  text-align: center;
}
.faq-hero h1 {
  color: #fff;
  font-size: 36px;
  margin: 0 0 12px;
  font-weight: 900;
}
.faq-hero-lead {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin: 0 auto 32px;
  max-width: 600px;
  line-height: 1.7;
}
.faq-search {
  display: flex;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.faq-search input[type="search"] {
  flex: 1;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  background: transparent;
  outline: none;
  min-width: 0;
}
.faq-search button {
  background: var(--b-fujissl);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
.faq-search button:hover { background: var(--b-fujissl-dark); }

/* 47日ルール highlight */
.faq-highlight-section { padding: 32px 0 0; }
.faq-highlight {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
  background: #fff;
  padding: 28px 32px;
  border-radius: 8px;
  border-left: 6px solid #b89968;
  box-shadow: 0 2px 12px rgba(184, 153, 104, 0.15);
}
.faq-highlight-icon { font-size: 56px; line-height: 1; text-align: center; padding-top: 8px; }
.faq-highlight-tag {
  display: inline-block;
  background: #1c2840;
  color: #d4af7a;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}
.faq-highlight h2 {
  margin: 4px 0 8px;
  font-size: 22px;
  color: #1c2840;
  font-weight: 900;
}
.faq-highlight p { margin: 0 0 14px; line-height: 1.7; }
.faq-highlight .btn-primary {
  background: #b89968;
  color: #fff;
  border-color: #b89968;
  margin-right: 8px;
}
.faq-highlight .btn-primary:hover { background: #a08555; border-color: #a08555; }

/* Category cards */
.faq-categories-section { padding: 48px 0; }
.section-title {
  font-size: 22px;
  font-weight: 900;
  color: #1c2840;
  margin: 0 0 24px;
  text-align: center;
}
.faq-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.faq-cat-card {
  background: #fff;
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  border-top: 4px solid #666;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.faq-cat-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.faq-cat-icon { font-size: 36px; margin-bottom: 12px; }
.faq-cat-name {
  font-weight: 800;
  font-size: 15px;
  color: #1c2840;
  margin-bottom: 6px;
  line-height: 1.4;
}
.faq-cat-count {
  font-size: 12px;
  color: #888;
  font-family: "DM Sans", sans-serif;
}

/* Popular questions */
.faq-popular-section { padding: 32px 0 48px; background: #f6f7f7; }
.faq-popular-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.faq-popular-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
.faq-popular-item:hover {
  border-left-color: var(--b-fujissl);
  background: #fff8f8;
}
.faq-q-mark {
  font-weight: 900;
  color: var(--b-fujissl);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  flex-shrink: 0;
}
.faq-q-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
}
.faq-q-arrow {
  color: #888;
  font-size: 14px;
  flex-shrink: 0;
}

/* FAQ list (subcategory) */
.faq-list-section { padding: 32px 0 48px; }
.faq-accordion { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  color: #1c2840;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: #fafafa; }
.faq-q-toggle {
  margin-left: auto;
  font-size: 24px;
  color: #888;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] .faq-q-toggle { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--border); background: #fafafa; }
.faq-answer {
  padding: 18px 24px;
  background: #fafbfc;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }

.faq-pagination {
  margin-top: 32px;
  text-align: center;
}

/* Single FAQ */
.faq-single-hero {
  background: linear-gradient(135deg, #1c2840 0%, #2a3a5a 100%);
  color: #fff;
  padding: 48px 0;
}
.faq-single-cat {
  margin-bottom: 16px;
}
.faq-single-cat a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 13px;
  background: rgba(255,255,255,0.1);
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
}
.faq-single-cat a:hover { background: rgba(255,255,255,0.2); }
.faq-single-q {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.faq-q-mark-lg {
  font-size: 40px;
  font-weight: 900;
  color: #d4af7a;
  font-family: "DM Sans", sans-serif;
  line-height: 1;
  flex-shrink: 0;
}
.faq-single-q h1 {
  color: #fff;
  font-size: 26px;
  line-height: 1.5;
  margin: 0;
  font-weight: 700;
}

.faq-single-answer-section { padding: 48px 0; }
.faq-single-answer {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 32px 40px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.faq-a-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  color: #2e7d32;
}
.faq-a-mark {
  font-size: 24px;
  font-weight: 900;
  font-family: "DM Sans", sans-serif;
  color: #2e7d32;
}
.faq-answer-body {
  font-size: 15px;
  line-height: 1.85;
  color: #333;
}
.faq-answer-body h2 { font-size: 20px; margin: 24px 0 12px; color: #1c2840; }
.faq-answer-body h3 { font-size: 17px; margin: 20px 0 8px; color: #1c2840; }
.faq-answer-body ul, .faq-answer-body ol { padding-left: 24px; }
.faq-answer-body code { background: #f5f5f7; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
.faq-answer-body pre { background: #1c2840; color: #d4af7a; padding: 16px; border-radius: 6px; overflow-x: auto; }
.faq-answer-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.faq-answer-body th, .faq-answer-body td { padding: 8px 12px; border: 1px solid #ddd; }
.faq-answer-body th { background: #f5f5f7; font-weight: 700; }
.faq-meta { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border); color: #888; text-align: right; }

/* Related FAQs */
.faq-related-section { padding: 32px 0; background: #f6f7f7; }
.faq-related-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-related-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
.faq-related-item:hover {
  border-left-color: var(--b-fujissl);
  background: #fffafa;
}

/* Contact CTA */
.faq-contact-cta { padding: 48px 0; }
.faq-contact-box {
  background: #1c2840;
  color: #fff;
  border-radius: 8px;
  padding: 40px 32px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.faq-contact-box h2 { color: #fff; margin: 0 0 12px; font-size: 22px; }
.faq-contact-box p { margin: 0 0 16px; color: rgba(255,255,255,0.85); }
.faq-contact-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.faq-contact-box .btn-outline {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.faq-contact-box .btn-outline:hover { background: #fff; color: #1c2840; border-color: #fff; }

/* Mobile */
@media (max-width: 760px) {
  .faq-hero { padding: 40px 0 48px; }
  .faq-hero h1 { font-size: 28px; }
  .faq-search { flex-direction: column; gap: 4px; }
  .faq-highlight { grid-template-columns: 1fr; padding: 20px; }
  .faq-highlight-icon { font-size: 40px; padding: 0; }
  .faq-popular-list { grid-template-columns: 1fr; }
  .faq-single-q { flex-direction: column; gap: 8px; }
  .faq-single-q h1 { font-size: 20px; }
  .faq-single-answer { padding: 24px 20px; border-radius: 0; }
}

/* ============================================
 * FAQ Landing - by-category blocks
 * ============================================ */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

.faq-bycategory-section {
  padding: 16px 0 48px;
}
.faq-cat-block {
  background: #fff;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  scroll-margin-top: 80px;
}
.faq-cat-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 900;
  color: #1c2840;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.faq-cat-block-icon { font-size: 24px; }
.faq-cat-block-count {
  font-size: 12px;
  color: #888;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  margin-left: auto;
  background: #f6f7f7;
  padding: 3px 12px;
  border-radius: 12px;
}
.faq-cat-questions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-cat-questions li {
  border-bottom: 1px dashed var(--border);
}
.faq-cat-questions li:last-child {
  border-bottom: none;
}
.faq-cat-questions li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  text-decoration: none;
  color: inherit;
  font-size: 13.5px;
  transition: all 0.15s;
}
.faq-cat-questions li a:hover {
  background: #fafafa;
  padding-left: 12px;
  color: var(--b-fujissl);
}
.faq-cat-block-more {
  text-align: right;
  margin: 12px 0 0;
}

/* Mobile */
@media (max-width: 760px) {
  .faq-cat-block { padding: 18px 20px; }
  .faq-cat-block-title { font-size: 16px; }
  .faq-cat-block-icon { font-size: 20px; }
  .faq-cat-questions li a { font-size: 13px; padding: 10px 2px; }
}

/* ============================================
 * FAQ Spotlight — お問合せ多数の質問を冒頭に
 * 驚かせず、でも確実に目に入る設計
 * ============================================ */
.faq-spotlight-section { padding: 32px 0 8px; }
.faq-spotlight {
  background: #fff;
  border: 1px solid #e6dcc5;
  border-left: 5px solid #b89968;
  border-radius: 6px;
  padding: 24px 32px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.faq-spotlight-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}
.faq-spotlight-tag {
  background: #b89968;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.faq-spotlight-title {
  font-size: 19px;
  line-height: 1.55;
  color: #1c2840;
  margin: 4px 0 12px;
  font-weight: 800;
}
.faq-spotlight-lead {
  font-size: 14px;
  line-height: 1.75;
  color: #444;
  margin: 0 0 16px;
}
.faq-spotlight-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.faq-spotlight-actions .btn-primary {
  background: #b89968;
  color: #fff;
  border-color: #b89968;
}
.faq-spotlight-actions .btn-primary:hover {
  background: #a08555;
  border-color: #a08555;
}

@media (max-width: 760px) {
  .faq-spotlight { padding: 20px; }
  .faq-spotlight-title { font-size: 16px; }
  .faq-spotlight-actions .btn { flex: 1; min-width: 140px; text-align: center; }
}

/* ============================================
 * Global Nav - ACME自動更新リンク（FujiSSL誘導用）
 * 控えめだけど目に入る、ナビと調和するデザイン
 * ============================================ */
.main-nav a.nav-acme {
  color: #b89968 !important;
  font-weight: 700;
  padding: 6px 14px !important;
  border: 1.5px solid #d4af7a;
  border-radius: 4px;
  margin: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
  background: transparent;
  font-size: 13px;
}
.main-nav a.nav-acme:hover {
  background: #fdf8ed;
  border-color: #b89968;
  color: #8a6f44 !important;
}
.main-nav a.nav-acme::after {
  content: "↗";
  font-size: 10px;
  opacity: 0.6;
  margin-left: 1px;
}
.nav-acme-icon {
  font-size: 14px;
  line-height: 1;
  color: #d4af7a;
}

@media (max-width: 760px) {
  .main-nav a.nav-acme {
    margin: 4px 0 0;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================
 * Nav - Pending items (準備中)
 * ============================================ */
.main-nav .nav-pending {
  color: #999;
  cursor: not-allowed;
  position: relative;
  opacity: 0.6;
}
.main-nav .nav-pending:hover {
  color: #999;
}
.main-nav .nav-pending::after {
  content: "準備中";
  font-size: 9px;
  background: #ccc;
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 600;
}

/* Override ACME button for in-nav ACME自動更新 */
.main-nav a.nav-acme {
  padding: 6px 14px !important;
  font-size: 13px;
}

/* ============================================
 * Responsive Tables - th上 / td下 の縦積み
 * 運営会社ページ等の表組みをスマホで読みやすく
 * ============================================ */
@media (max-width: 760px) {
  .page-content table,
  .page-content tbody,
  .page-content tr {
    display: block;
    width: 100%;
  }
  .page-content thead {
    display: none; /* hide thead on mobile */
  }
  .page-content tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }
  .page-content th,
  .page-content td {
    display: block;
    width: 100%;
    border: none;
    padding: 10px 14px;
    text-align: left;
    word-break: break-all;
  }
  .page-content th {
    background: var(--bg-soft);
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
  }
  .page-content td {
    background: var(--bg-card);
    padding-top: 8px;
    font-size: 14px;
  }
  /* If only td (no th), don't add extra styling */
  .page-content tr:not(:has(th)) td {
    border-bottom: 1px solid var(--border);
  }
}

/* ============================================
 * Mobile Hamburger Menu
 * ============================================ */
.nav-hamburger {
  display: none;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-radius: 4px;
}
.nav-hamburger:hover {
  background: var(--bg-soft);
}
.nav-hamburger .hb-icon-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
}
.nav-hamburger .hb-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}
.nav-close {
  display: none;
  background: transparent;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 16px;
  width: 36px;
  height: 36px;
  padding: 0;
}
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
}
body.nav-locked { overflow: hidden; }

@media (max-width: 760px) {
  /* On mobile, hide the visible nav bar (but keep .main-nav for menu panel) */
  .main-nav {
    background: transparent;
    border: none;
    height: 0;
    padding: 0;
  }
  .main-nav-inner {
    height: 0;
    padding: 0;
    overflow: visible;
  }
  /* Show header hamburger on mobile */
  .nav-hamburger.nav-hamburger-header {
    display: inline-flex;
  }
  /* Hide PC-only icons in header-right on mobile to make room for hamburger */
  .header-right .h-action {
    display: none;
  }
  /* Compact tel-block on mobile - just show clickable number */
  .header-right .tel-block {
    text-align: right;
    margin-right: 4px;
  }
  .header-right .tel-block .tel-label,
  .header-right .tel-block .tel-hours {
    display: none;
  }
  .header-right .tel-block .tel-num {
    font-size: 16px;
    color: var(--b-fujissl);
  }
  .header-right .tel-block .tel-num::before {
    content: "📞 ";
    font-size: 14px;
  }
  .header-right {
    gap: 8px;
  }

  .nav-items {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    background: #fff;
    z-index: 999;
    overflow-y: auto;
    padding: 72px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .nav-items.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  /* No overlay needed - full screen */
  .nav-overlay { display: none !important; }
  .nav-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: #f6f7f7;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: #666;
    z-index: 1000;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
  }
  .nav-close:hover { background: #eee; color: #000; }

  .nav-items a,
  .nav-items .nav-pending {
    display: block;
    padding: 16px 24px !important;
    border-bottom: 1px solid var(--border);
    font-size: 14px !important;
    white-space: normal;
    border-radius: 0 !important;
    border-left: 4px solid transparent;
    margin: 0 !important;
    text-align: left !important;
  }
  .nav-items a:hover {
    background: var(--bg-soft);
    border-left-color: var(--b-fujissl);
  }
  .nav-items a.active {
    background: var(--bg-soft);
    border-left-color: var(--b-fujissl);
    color: var(--b-fujissl);
  }
  .nav-items .menu-divider {
    display: none;
  }
  .nav-items .nav-pending {
    color: #aaa;
    cursor: not-allowed;
  }
  .nav-items .nav-pending::after {
    content: "準備中";
    display: inline-block;
    font-size: 9px;
    background: #ccc;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 8px;
    vertical-align: middle;
  }
  .nav-items a.nav-acme {
    color: #b89968 !important;
    border-left-color: #b89968 !important;
    background: #fdf8ed;
    font-weight: 700;
    border-radius: 0 !important;
    border: none;
    border-bottom: 1px solid var(--border);
    border-left: 4px solid #b89968;
  }
  .nav-items a.nav-cta {
    background: var(--b-fujissl);
    color: #fff !important;
    margin: 16px 20px !important;
    border-radius: 4px !important;
    text-align: center !important;
    border: none !important;
    padding: 14px 20px !important;
  }
}

/* ============================================
 * Mobile Util Bar - 重要バナーを控えめに
 * ============================================ */
@media (max-width: 760px) {
  .util-bar { font-size: 10px; }
  .util-bar-inner {
    padding: 6px 12px;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }
  .util-news {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 10px;
    line-height: 1.4;
  }
  .util-news .badge {
    font-size: 9px;
    padding: 1px 6px;
  }
  .util-news > span:not(.badge) {
    flex: 1;
    min-width: 0;
  }
  .countdown-compact {
    padding: 3px 10px;
    font-size: 11px;
  }
  .countdown-compact strong { font-size: 12px; }
  .countdown-compact .cd-c-icon { font-size: 12px; }
}

/* ============================================
 * Mobile Achievement Bar - 高さを大幅圧縮
 * ============================================ */
@media (max-width: 760px) {
  .achievement {
    padding: 8px 0;
  }
  .achievement-inner {
    gap: 12px;
    font-size: 10px;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 0 12px;
  }
  .achievement-inner .stat {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  .achievement-inner .stat b {
    font-size: 13px;
    line-height: 1.1;
  }
  .achievement-inner .divider {
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
  }
  /* 4つ目「24時間365日 自動発行」はスマホでは非表示してスッキリ */
  .achievement-inner .stat:last-child {
    display: none;
  }
  .achievement-inner .divider:last-of-type {
    display: none;
  }
}

/* ============================================
 * Mobile Header Layout Fine-tuning
 * ロゴと右側ブロックを左右端からほどよくオフセット
 * ============================================ */
@media (max-width: 760px) {
  .header-main {
    padding: 14px 6px 14px 16px !important;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .site-logo {
    gap: 8px;
    font-size: 18px;
  }
  .logo-mark {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .logo-text small { display: none; }
  .header-right {
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
  }
  .nav-hamburger.nav-hamburger-header {
    padding: 8px 10px !important;
    border: 1px solid var(--border);
    margin-right: -2px;
  }
}

/* ============================================
 * Product Page - Highlights, Spec, Related
 * ============================================ */
.section-title-sm {
  font-size: 18px;
  font-weight: 900;
  color: #1c2840;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Highlight cards */
.product-highlights-section {
  padding: 32px 0 8px;
}
.product-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.highlight-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid #666;
  border-radius: 6px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hc-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.hc-label {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 4px;
}
.hc-value {
  font-size: 16px;
  font-weight: 900;
  color: #1c2840;
  margin-bottom: 6px;
  line-height: 1.4;
}
.hc-desc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.6;
}

/* Spec table */
.product-spec-section {
  padding: 32px 0;
}
.product-spec-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.product-spec-table th,
.product-spec-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  text-align: left;
}
.product-spec-table tr:last-child th,
.product-spec-table tr:last-child td {
  border-bottom: none;
}
.product-spec-table th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--text-sub);
  width: 180px;
  white-space: nowrap;
}
.product-spec-table td {
  color: var(--text);
}

/* Content section */
.product-content-section {
  padding: 32px 0;
}

/* Related products */
.product-related-section {
  padding: 32px 0;
  background: var(--bg-soft);
}
.related-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.related-product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid #666;
  border-radius: 6px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.related-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.related-product-card .badge-type {
  display: inline-block;
  margin-bottom: 8px;
  width: fit-content;
}
.rp-name {
  font-size: 15px;
  font-weight: 800;
  color: #1c2840;
  margin-bottom: 6px;
  line-height: 1.4;
}
.rp-desc {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 12px;
  line-height: 1.6;
  flex: 1;
}
.rp-price {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--b-fujissl);
  margin-bottom: 8px;
}
.rp-price span {
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 500;
  margin-left: 2px;
}
.rp-cta {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 700;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

@media (max-width: 760px) {
  .product-highlights { grid-template-columns: 1fr; }
  .related-products-grid { grid-template-columns: 1fr; }
  .product-spec-table th { width: 100px; font-size: 12px; }
  .product-spec-table td { font-size: 12px; }
}

/* ============================================
 * Product Hero - Dramatic Title Display
 * 商品名を主役にする豪華なヒーロー
 * ============================================ */
.product-hero {
  padding: 48px 0;
}
.product-hero-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  border-radius: 3px;
  margin-bottom: 20px;
}
.product-hero-title {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 18px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ph-title-brand {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  font-family: "DM Sans", "Zen Kaku Gothic New", sans-serif;
}
.ph-title-brand-only {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  font-family: "DM Sans", "Zen Kaku Gothic New", sans-serif;
}
.ph-title-variant {
  font-size: 22px;
  font-weight: 700;
  color: #1c2840;
  margin-top: 4px;
}
.product-hero-tagline {
  font-size: 17px;
  color: #1c2840;
  font-weight: 700;
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 3px solid currentColor;
  display: inline-block;
}
.product-hero-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-sub);
  margin: 16px 0 0;
}
.product-tag-row {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 760px) {
  .product-hero { padding: 28px 0; }
  .ph-title-brand,
  .ph-title-brand-only {
    font-size: 40px;
  }
  .ph-title-variant {
    font-size: 17px;
  }
  .product-hero-tagline {
    font-size: 14px;
  }
}

/* ============================================
 * Product Content (旧コンテンツ整理整頓)
 * 既存の生HTMLをCSSで読みやすく見せる
 * ============================================ */
.product-content {
  font-size: 14px;
  line-height: 1.85;
  color: #333;
}
/* 見出しを階層化 */
.product-content h2 {
  font-size: 22px;
  font-weight: 900;
  color: #1c2840;
  margin: 40px 0 20px;
  padding: 12px 18px;
  background: linear-gradient(90deg, var(--bg-soft) 0%, transparent 100%);
  border-left: 5px solid var(--b-fujissl);
  border-radius: 2px;
}
.product-content h3 {
  font-size: 18px;
  font-weight: 800;
  color: #1c2840;
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-content h3::before {
  content: "▶";
  color: var(--b-fujissl);
  font-size: 12px;
}
.product-content h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 24px 0 10px;
}
/* 段落 */
.product-content p {
  margin: 0 0 14px;
}
/* リスト */
.product-content ul,
.product-content ol {
  margin: 12px 0 16px;
  padding-left: 24px;
}
.product-content ul li,
.product-content ol li {
  margin-bottom: 6px;
  line-height: 1.75;
}
.product-content ul li::marker {
  color: var(--b-fujissl);
}
/* テーブル */
.product-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  background: #fff;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.product-content table th,
.product-content table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.product-content table tr:last-child th,
.product-content table tr:last-child td {
  border-bottom: none;
}
.product-content table th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
  width: 28%;
}
/* 強調 */
.product-content strong {
  color: #1c2840;
  font-weight: 700;
}
.product-content em {
  background: #fff8db;
  font-style: normal;
  padding: 1px 4px;
  border-radius: 2px;
}
/* コードブロック */
.product-content code {
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  font-family: "DM Sans", "Courier New", monospace;
  color: #c62828;
}
.product-content pre {
  background: #1c2840;
  color: #d4af7a;
  padding: 14px 18px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
  margin: 14px 0;
  line-height: 1.6;
}
.product-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
/* リンク */
.product-content a {
  color: var(--b-fujissl);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.product-content a:hover {
  color: var(--b-fujissl-dark);
}
/* 画像 */
.product-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 12px 0;
}

/* ACME notice variants */
.acme-notice.acme-status-native {
  border-color: rgba(216, 50, 74, 0.3);
  background: linear-gradient(135deg, rgba(216, 50, 74, 0.04) 0%, rgba(184, 153, 104, 0.04) 100%);
}
.acme-notice.acme-status-sister {
  border-color: rgba(255, 152, 0, 0.4);
  background: rgba(255, 152, 0, 0.04);
}
.acme-notice.acme-status-none {
  border-color: var(--border-strong);
  background: var(--bg-soft);
}

@media (max-width: 760px) {
  .product-content h2 { font-size: 18px; padding: 10px 14px; margin: 28px 0 16px; }
  .product-content h3 { font-size: 16px; margin: 24px 0 12px; }
  .product-content h4 { font-size: 14px; }
  .product-content table { font-size: 12px; }
  .product-content table th, .product-content table td { padding: 8px 10px; }
}

/* ============================================================
   Contact Form 7 modernization (2026 style)
   ============================================================ */

/* リセット：既存のテーブルレイアウトを破棄 */
.wpcf7,
.wpcf7-form,
.entry-content .wpcf7 table,
.product-content .wpcf7 table {
  background: transparent;
  border: none;
}

.wpcf7 {
  max-width: 720px;
  margin: 24px auto;
}

.wpcf7-form {
  background: #fff;
  border-radius: 12px;
  padding: 8px 0;
}

/* テーブルベースのレイアウトをブロックに変換 */
.wpcf7 table,
.wpcf7 tbody,
.wpcf7 tr,
.wpcf7 td,
.wpcf7 th {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
}

/* 行のスペーシング */
.wpcf7 tr {
  margin-bottom: 22px;
}

/* ラベルセル（th） */
.wpcf7 th,
.wpcf7 td:first-child:not(:only-child) {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark, #2c2c2c);
  padding-bottom: 6px;
  text-align: left;
}

/* 必須バッジ */
.wpcf7 th .required,
.wpcf7 .wpcf7-validates-as-required + ::after,
.wpcf7 label:has(.wpcf7-validates-as-required)::after,
.wpcf7 th:contains("必須") {
  /* テキスト中の「必須」「任意」をバッジ化するJSが必要 */
}

/* 入力欄のモダン化 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fafbfc;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-sizing: border-box;
  font-family: inherit;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: #1565c0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}

.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* 送信ボタンのモダン化 */
.wpcf7 input[type="submit"],
.wpcf7-submit {
  background: #1565c0;
  color: #fff;
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.2);
  font-family: inherit;
  width: auto;
  min-width: 200px;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7-submit:hover {
  background: #0d4a8c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}

.wpcf7 input[type="submit"]:active,
.wpcf7-submit:active {
  transform: translateY(0);
}

/* 注釈テキスト */
.wpcf7 .info-note,
.wpcf7 td br + small,
.wpcf7 td > small {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* 必須ラベルの自動変換（テキスト中の「必須」を赤バッジ化） */
.wpcf7-required-badge {
  display: inline-block;
  background: linear-gradient(135deg, #d8324a, #a82038);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 1px;
  box-shadow: 0 2px 4px rgba(216,50,74,0.2);
}

.wpcf7-optional-badge {
  display: inline-block;
  background: linear-gradient(135deg, #8a929a, #6a727a);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 1px;
}

/* バリデーションエラー */
.wpcf7-not-valid {
  border-color: #d8324a !important;
  background: #fff5f6 !important;
}

.wpcf7-not-valid-tip {
  color: #d8324a;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* 応答メッセージ */
.wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid !important;
}

.wpcf7-mail-sent-ok {
  background: #e8f5e9 !important;
  border-color: #4caf50 !important;
  color: #2e7d32;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background: #fff5f6 !important;
  border-color: #d8324a !important;
  color: #c62828;
}

/* reCAPTCHA フィールドのレイアウト */
.wpcf7 .g-recaptcha,
.wpcf7 [data-sitekey] {
  margin: 8px 0;
}

/* モバイル */
@media (max-width: 760px) {
  .wpcf7 {
    margin: 16px 0;
  }
  .wpcf7-form {
    padding: 0;
  }
  .wpcf7 input[type="submit"],
  .wpcf7-submit {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Landing page components (用途/ブランド/インストール/見積もり)
   2026 modern style for first-time visitors
   ============================================================ */

/* セクション内ヒーロー */
.lp-hero {
  margin: -20px -20px 32px;
  padding: 56px 32px;
  background: linear-gradient(135deg, #1a3a6e 0%, #2c5fa8 100%);
  color: #fff;
  border-radius: 16px 16px 0 0;
  text-align: center;
}
.lp-hero h2 {
  color: #fff !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.lp-hero .lp-hero-sub {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 720px;
  opacity: 0.95;
}
.lp-hero .lp-hero-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

/* ステップカード */
.lp-step-section { margin: 48px 0; }
.lp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: #1565c0;
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 16px;
  margin-right: 12px;
  vertical-align: middle;
}
.lp-section-title {
  font-size: 24px !important;
  font-weight: 800;
  margin: 48px 0 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #1a2a4a;
}

/* DV/OV/EV 比較カード（3カラム） */
.lp-cert-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}
.lp-cert-card {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 14px;
  padding: 24px 20px;
  position: relative;
  transition: all 0.2s;
}
.lp-cert-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(21,101,192,0.12);
  border-color: #1565c0;
}
.lp-cert-card-icon { font-size: 32px; margin-bottom: 8px; }
.lp-cert-card-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #888;
  margin-bottom: 4px;
}
.lp-cert-card-title {
  font-size: 22px;
  font-weight: 800;
  color: #1a2a4a;
  margin-bottom: 8px;
}
.lp-cert-card-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 16px;
  min-height: 60px;
}
.lp-cert-card-stat {
  background: #f5f7fa;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
.lp-cert-card-stat b { color: #1565c0; }
.lp-cert-card-products {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}
.lp-cert-card-products a {
  display: block;
  padding: 4px 0;
  color: #1565c0;
  text-decoration: none;
}
.lp-cert-card-products a:hover { text-decoration: underline; }

/* DV/OV/EV カードのアクセント色 */
.lp-cert-card.lp-cert-dv { border-top: 4px solid #4caf50; }
.lp-cert-card.lp-cert-ov { border-top: 4px solid #1565c0; }
.lp-cert-card.lp-cert-ev { border-top: 4px solid #d8324a; }

/* ユースケースカード（横長） */
.lp-usecases { margin: 32px 0; }
.lp-usecase {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: center;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 14px;
  transition: all 0.2s;
}
.lp-usecase:hover {
  border-color: #1565c0;
  box-shadow: 0 4px 16px rgba(21,101,192,0.1);
  transform: translateX(2px);
}
.lp-usecase-icon {
  font-size: 48px;
  text-align: center;
  line-height: 1;
}
.lp-usecase-body { min-width: 0; }
.lp-usecase-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a2a4a;
  margin: 0 0 4px;
}
.lp-usecase-desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 8px;
  line-height: 1.6;
}
.lp-usecase-pick {
  font-size: 13px;
  color: #1565c0;
  font-weight: 600;
}
.lp-usecase-cta {
  white-space: nowrap;
  padding: 10px 18px;
  background: #1565c0;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s;
}
.lp-usecase-cta:hover { background: #0d4a8c; }

/* シェイプ（シングル/ワイルド/マルチ）カード */
.lp-shape-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}
.lp-shape-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
}
.lp-shape-card h4 {
  font-size: 16px;
  margin: 0 0 8px;
  color: #1a2a4a;
  font-weight: 700;
}
.lp-shape-card .lp-shape-cover {
  background: #f5f7fa;
  padding: 10px 14px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  color: #555;
  margin: 10px 0;
}
.lp-shape-card .lp-shape-for {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* ブランドカード（2-3列） */
.lp-brand-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 32px 0;
}
.lp-brand-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 14px;
  padding: 26px 24px;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.lp-brand-card:hover {
  border-color: #1565c0;
  box-shadow: 0 6px 20px rgba(21,101,192,0.1);
  transform: translateY(-2px);
}
.lp-brand-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.lp-brand-card-logo {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #1565c0, #0d4a8c);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
}
.lp-brand-card-fujissl .lp-brand-card-logo { background: linear-gradient(135deg, #d8324a, #b8294a); }
.lp-brand-card-digicert .lp-brand-card-logo { background: linear-gradient(135deg, #00bcd4, #0097a7); }
.lp-brand-card-geotrust .lp-brand-card-logo { background: linear-gradient(135deg, #ff9800, #f57c00); }
.lp-brand-card-sectigo .lp-brand-card-logo { background: linear-gradient(135deg, #4caf50, #388e3c); }
.lp-brand-card-rapidssl .lp-brand-card-logo { background: linear-gradient(135deg, #9c27b0, #7b1fa2); }
.lp-brand-card-comodo .lp-brand-card-logo { background: linear-gradient(135deg, #607d8b, #455a64); }
.lp-brand-card-verisign .lp-brand-card-logo { background: linear-gradient(135deg, #795548, #5d4037); }

.lp-brand-card-name {
  font-size: 20px;
  font-weight: 800;
  color: #1a2a4a;
  margin: 0;
}
.lp-brand-card-tagline {
  font-size: 12px;
  color: #666;
  margin: 2px 0 0;
}
.lp-brand-card-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 14px;
  flex-grow: 1;
}
.lp-brand-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 12px;
}
.lp-brand-card-features li {
  padding: 4px 0;
  color: #444;
}
.lp-brand-card-features li::before {
  content: "✓";
  color: #4caf50;
  font-weight: 800;
  margin-right: 6px;
}
.lp-brand-card-price-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #f5f7fa;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 12px;
}
.lp-brand-card-acme-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
}
.lp-brand-card-cta {
  display: block;
  text-align: center;
  padding: 10px 18px;
  background: #1565c0;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s;
}
.lp-brand-card-cta:hover { background: #0d4a8c; }

/* 大きな価格表示 */
.lp-price-hero {
  background: linear-gradient(135deg, #f5f7fa 0%, #e3e9f1 100%);
  border-radius: 14px;
  padding: 32px 40px;
  text-align: center;
  margin: 24px 0;
  border: 1px solid #d0d8e0;
}
.lp-price-hero-label {
  font-size: 13px;
  color: #666;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.lp-price-hero-amount {
  font-size: 52px;
  font-weight: 900;
  color: #d8324a;
  line-height: 1;
  margin-bottom: 6px;
}
.lp-price-hero-amount .yen { font-size: 32px; }
.lp-price-hero-unit {
  font-size: 14px;
  color: #666;
}

/* 4ステップフロー */
.lp-flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 32px 0;
  position: relative;
}
.lp-flow-step {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  position: relative;
}
.lp-flow-step-num {
  position: absolute;
  top: -12px;
  left: 20px;
  width: 28px; height: 28px;
  background: #1565c0;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.lp-flow-step-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a2a4a;
  margin: 6px 0 6px;
}
.lp-flow-step-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* 大きなCTA */
.lp-final-cta {
  background: linear-gradient(135deg, #1a3a6e 0%, #2c5fa8 100%);
  color: #fff;
  border-radius: 14px;
  padding: 40px;
  text-align: center;
  margin: 48px 0 24px;
}
.lp-final-cta h2 {
  color: #fff !important;
  font-size: 24px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.lp-final-cta p {
  margin: 0 0 20px;
  opacity: 0.95;
  font-size: 15px;
}
.lp-final-cta .cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.lp-final-cta .cta-button {
  padding: 14px 28px;
  background: #fff;
  color: #1565c0 !important;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform 0.1s, box-shadow 0.2s;
  font-size: 15px;
}
.lp-final-cta .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.lp-final-cta .cta-button-secondary {
  background: rgba(255,255,255,0.15);
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.4);
}
.lp-final-cta .cta-button-secondary:hover {
  background: rgba(255,255,255,0.25);
}

/* インフォボックス */
.lp-info-box {
  background: #fff8db;
  border-left: 4px solid #ffc107;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 13px;
  line-height: 1.7;
}
.lp-info-box-blue {
  background: #e3f2fd;
  border-left-color: #1565c0;
}

/* 3カラム料金グループ（quote ページ用） */
.lp-pricing-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.lp-pricing-group {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px 20px;
}
.lp-pricing-group.featured {
  border-color: #1565c0;
  border-width: 2px;
  position: relative;
}
.lp-pricing-group.featured::before {
  content: "おすすめ";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #1565c0;
  color: #fff;
  padding: 4px 16px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.lp-pricing-group-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a2a4a;
  margin: 0 0 4px;
}
.lp-pricing-group-sub {
  font-size: 12px;
  color: #666;
  margin: 0 0 16px;
}
.lp-pricing-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.lp-pricing-group ul li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lp-pricing-group ul li:last-child { border-bottom: none; }
.lp-pricing-group ul li a {
  color: #1565c0;
  text-decoration: none;
  font-weight: 600;
}
.lp-pricing-group ul li .price {
  color: #d8324a;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

/* モバイル対応 */
@media (max-width: 760px) {
  .lp-hero { padding: 36px 20px; margin: -16px -16px 24px; }
  .lp-hero h2 { font-size: 24px !important; }
  .lp-hero .lp-hero-sub { font-size: 15px; }
  .lp-section-title { font-size: 20px !important; }
  .lp-cert-cards { grid-template-columns: 1fr; }
  .lp-shape-cards { grid-template-columns: 1fr; }
  .lp-brand-cards { grid-template-columns: 1fr; }
  .lp-flow-steps { grid-template-columns: 1fr 1fr; }
  .lp-pricing-groups { grid-template-columns: 1fr; }
  .lp-usecase {
    grid-template-columns: 60px 1fr;
    gap: 14px;
  }
  .lp-usecase-cta {
    grid-column: 1 / -1;
    text-align: center;
  }
  .lp-usecase-icon { font-size: 36px; }
  .lp-price-hero { padding: 24px 20px; }
  .lp-price-hero-amount { font-size: 36px; }
  .lp-price-hero-amount .yen { font-size: 24px; }
  .lp-final-cta { padding: 28px 20px; }
  .lp-final-cta h2 { font-size: 20px !important; }
}

/* ============================================================
   Support hub & technical docs (2026 modern style)
   ============================================================ */

/* サポートハブ：カテゴリカードグリッド */
.support-hub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 32px 0;
}
.support-category {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 14px;
  padding: 24px 26px;
  transition: all 0.2s;
}
.support-category:hover {
  border-color: #1565c0;
  box-shadow: 0 6px 20px rgba(21,101,192,0.1);
  transform: translateY(-2px);
}
.support-category-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.support-category-title {
  font-size: 18px;
  font-weight: 800;
  color: #1a2a4a;
  margin: 0 0 4px;
}
.support-category-sub {
  font-size: 12px;
  color: #666;
  margin: 0 0 12px;
}
.support-category-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.support-category-links li {
  padding: 6px 0;
  border-top: 1px solid #f0f0f0;
}
.support-category-links li:first-child { border-top: none; }
.support-category-links a {
  color: #1565c0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.support-category-links a:hover { text-decoration: underline; }
.support-category-links .new-badge {
  display: inline-block;
  background: #d8324a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}
.support-category-links .updated-badge {
  display: inline-block;
  background: #1565c0;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}
.support-category-links .pending-badge {
  display: inline-block;
  background: #f0f0f0;
  color: #888;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* 技術ドキュメント用：コードブロック */
.tech-doc pre,
.tech-doc code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}
.tech-doc pre {
  background: #1a2332;
  color: #e8eaed;
  padding: 18px 22px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.7;
  position: relative;
}
.tech-doc pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.tech-doc p code,
.tech-doc li code,
.tech-doc td code,
.tech-doc h3 code,
.tech-doc h4 code {
  background: #f0f3f7;
  color: #b8294a;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  border: 1px solid #e0e7ee;
}

/* コードブロックのタイトル */
.tech-doc .code-label {
  display: inline-block;
  background: #2c5fa8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px 6px 0 0;
  letter-spacing: 1px;
  margin-bottom: 0;
}
.tech-doc .code-label + pre {
  margin-top: 0;
  border-radius: 0 10px 10px 10px;
}

/* 手順番号付きステップ */
.tech-doc ol.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
  margin: 24px 0;
}
.tech-doc ol.steps > li {
  counter-increment: step;
  padding: 20px 24px 20px 70px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 12px;
  position: relative;
}
.tech-doc ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #1565c0, #0d4a8c);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}
.tech-doc ol.steps > li > h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1a2a4a;
}

/* インラインアラート（注意・警告・ヒント） */
.tech-doc .alert {
  padding: 14px 18px;
  border-radius: 8px;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.7;
  border-left: 4px solid;
}
.tech-doc .alert-warning {
  background: #fff8db;
  border-color: #ffc107;
}
.tech-doc .alert-danger {
  background: #fff5f6;
  border-color: #d8324a;
}
.tech-doc .alert-info {
  background: #e3f2fd;
  border-color: #1565c0;
}
.tech-doc .alert-success {
  background: #e8f5e9;
  border-color: #4caf50;
}
.tech-doc .alert b {
  display: block;
  margin-bottom: 4px;
}

/* テクニカルドキュメントのナビ（前後） */
.tech-doc-nav {
  display: flex;
  gap: 12px;
  margin: 32px 0 20px;
  width: 100%;
}
.tech-doc-nav a {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  text-decoration: none;
  color: #1a2a4a;
  transition: all 0.2s;
}
.tech-doc-nav a:only-child {
  flex: 1 1 100%;
}
.tech-doc-nav a:hover {
  border-color: #1565c0;
  background: #f7faff;
}
.tech-doc-nav .nav-label {
  font-size: 11px;
  color: #888;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.tech-doc-nav .nav-title {
  font-size: 14px;
  font-weight: 700;
  color: #1565c0;
}
.tech-doc-nav .nav-next { text-align: right; }

/* OS / プラットフォームアイコン */
.platform-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #1565c0, #0d4a8c);
  color: #fff;
  border-radius: 6px;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  font-weight: 800;
  margin-right: 8px;
  vertical-align: middle;
}
.platform-icon.apache { background: linear-gradient(135deg, #d44a26, #a13319); }
.platform-icon.nginx { background: linear-gradient(135deg, #009639, #006a28); }
.platform-icon.iis { background: linear-gradient(135deg, #00bcf2, #0078d4); }
.platform-icon.certbot { background: linear-gradient(135deg, #003a70, #002850); }
.platform-icon.aws { background: linear-gradient(135deg, #ff9900, #cc7a00); }
.platform-icon.linux { background: linear-gradient(135deg, #333, #000); }
.platform-icon.windows { background: linear-gradient(135deg, #00a4ef, #0078d4); }

/* レスポンシブ */
@media (max-width: 760px) {
  .support-hub { grid-template-columns: 1fr; }
  .tech-doc pre { font-size: 12px; padding: 14px 16px; }
  .tech-doc ol.steps > li { padding: 16px 16px 16px 56px; }
  .tech-doc ol.steps > li::before { left: 14px; top: 16px; width: 30px; height: 30px; font-size: 13px; }
  .tech-doc-nav { flex-direction: column; }
}

/* ============================================================
   Hero & breadcrumb polish (v3.2.9)
   見た目を高級化：ヒーロー余白拡大・パンくず余白・タイトル統合
   ============================================================ */

/* ヒーロー含むページ向け：.page-content のパディングを縮小 */
.page-content:has(.lp-hero) {
  padding: 0;
}
.page-content:has(.lp-hero) > * {
  margin-left: 48px;
  margin-right: 48px;
}
.page-content:has(.lp-hero) > .lp-hero,
.page-content:has(.lp-hero) > .tech-doc > .lp-hero {
  margin-left: 0;
  margin-right: 0;
}
/* tech-doc コンテナを使うページ：tech-doc 内の要素もパディング扱う */
.page-content:has(.lp-hero) > .tech-doc {
  margin: 0;
  padding: 0;
}
.page-content:has(.lp-hero) > .tech-doc > * {
  padding-left: 48px;
  padding-right: 48px;
}
.page-content:has(.lp-hero) > .tech-doc > .lp-hero {
  padding-left: 32px;
  padding-right: 32px;
}

/* ヒーロー自体の余白拡大（高級感） */
.lp-hero {
  margin: 0 0 36px;
  padding: 64px 40px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(135deg, #1a3a6e 0%, #2c5fa8 100%);
  color: #fff;
  box-shadow: 0 8px 32px rgba(26, 58, 110, 0.15);
}
.lp-hero h2 {
  color: #fff !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0 auto 16px !important;
  max-width: 800px;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.lp-hero .lp-hero-sub {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 auto;
  max-width: 720px;
  opacity: 0.95;
}
.lp-hero .lp-hero-badge {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
}

/* デフォルトページタイトル（ヒーローなしの場合のみ表示） */
.page-content > h1.page-title-default {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

/* パンくず：上下の余白を拡大、横並びレイアウト改善 */
.breadcrumb {
  padding: 20px 0 12px;
  font-size: 13px;
  color: var(--text-mute, #888);
  line-height: 1.8;
}
.breadcrumb a {
  color: var(--text-sub, #555);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--b-fujissl, #1565c0);
  text-decoration: underline;
}
.breadcrumb .sep {
  margin: 0 8px;
  color: var(--border-strong, #ccc);
}

/* tech-doc 内のパンくずインライン版（ヒーロー上に表示する用） */
.tech-doc > p:first-child {
  font-size: 13px !important;
  color: #888 !important;
  margin: 24px 48px 16px !important;
  padding: 0 !important;
}

/* tech-doc 内見出しのパディング調整（ヒーロー以外） */
.page-content:has(.lp-hero) > .tech-doc > h2,
.page-content:has(.lp-hero) > .tech-doc > h3 {
  margin-top: 36px;
}

/* レスポンシブ：モバイル */
@media (max-width: 760px) {
  .page-content:has(.lp-hero) > * {
    margin-left: 16px;
    margin-right: 16px;
  }
  .page-content:has(.lp-hero) > .tech-doc > * {
    padding-left: 16px;
    padding-right: 16px;
  }
  .page-content:has(.lp-hero) > .tech-doc > .lp-hero {
    padding-left: 20px;
    padding-right: 20px;
  }
  .tech-doc > p:first-child {
    margin: 16px 16px 12px !important;
  }
  .lp-hero {
    padding: 40px 24px;
    margin: 0 0 24px;
  }
  .lp-hero h2 {
    font-size: 24px !important;
  }
  .lp-hero .lp-hero-sub {
    font-size: 14px;
  }
}

/* :has() 非対応ブラウザ向けフォールバック（古いSafari等） */
@supports not selector(:has(*)) {
  .page-content {
    padding: 0;
  }
  .page-content > h2,
  .page-content > h3,
  .page-content > p,
  .page-content > ul,
  .page-content > ol,
  .page-content > table,
  .page-content > details,
  .page-content > div:not(.lp-hero):not(.lp-final-cta):not(.lp-pricing-groups):not(.lp-cert-cards):not(.lp-shape-cards):not(.lp-brand-cards):not(.lp-usecases):not(.lp-flow-steps):not(.lp-info-box):not(.support-hub),
  .page-content > article {
    margin-left: 48px;
    margin-right: 48px;
  }
}

/* ============================================================
   謎の透明ブロック退治（v3.2.12）
   wpautop が生成する空 <p></p> やゴミ要素を非表示
   ============================================================ */

/* 空の段落・空の div は表示しない */
.page-content p:empty,
.tech-doc p:empty,
.tech-doc-nav p:empty {
  display: none !important;
}

/* tech-doc-nav 内に紛れ込んだ p / br を消す */
.tech-doc-nav > p,
.tech-doc-nav > br,
.tech-doc-nav > div:not([class*="nav"]):empty {
  display: none !important;
}

/* tech-doc-nav の <a> 内の <div> に余計な枠線が付かないようリセット */
.tech-doc-nav a > div {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tech-doc-nav a > div.nav-label {
  font-size: 11px;
  color: #888;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 4px !important;
}
.tech-doc-nav a > div.nav-title {
  font-size: 14px;
  font-weight: 700;
  color: #1565c0;
}

/* ============================================================
   お問い合わせフォーム強化（v3.2.13）
   CF7 のデフォルト見た目を高級化
   ============================================================ */

/* お問い合わせフォームコンテナ */
.contact-form-wrap {
  background: linear-gradient(135deg, #f7faff 0%, #fff 100%);
  border: 1px solid #e0e7ee;
  border-radius: 16px;
  padding: 36px 40px;
  margin: 24px 0 32px;
  box-shadow: 0 4px 16px rgba(21,101,192,0.04);
}
.contact-form-intro {
  background: #e8f4fd;
  border-left: 4px solid #1565c0;
  padding: 16px 20px;
  border-radius: 8px;
  margin: 16px 0 24px;
}
.contact-form-intro p {
  margin: 0;
}

/* CF7 フォーム全体のリセット＋モダン化 */
.wpcf7 {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}
.wpcf7-form {
  display: block;
}

/* CF7 がテーブルで吐く場合：行をブロック化 */
.wpcf7 table,
.wpcf7 tbody,
.wpcf7 thead {
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}
.wpcf7 tr {
  display: block !important;
  margin-bottom: 20px;
  border: none !important;
  background: transparent !important;
}
.wpcf7 th,
.wpcf7 td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}
.wpcf7 th {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a2a4a !important;
  margin-bottom: 8px !important;
  padding-bottom: 4px !important;
}

/* ラベル */
.wpcf7 label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1a2a4a;
  margin-bottom: 8px;
}

/* 「必須」「任意」バッジ */
.wpcf7 .required,
.wpcf7-form .required {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  background: #d8324a;
  color: #fff;
  border-radius: 4px;
  vertical-align: middle;
}
.wpcf7 .optional,
.wpcf7-form .optional {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  background: #888;
  color: #fff;
  border-radius: 4px;
  vertical-align: middle;
}

/* 入力欄 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  border: 2px solid #d0d8e0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1a2a4a !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  line-height: 1.6 !important;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none !important;
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1) !important;
}
.wpcf7 textarea {
  min-height: 180px !important;
  resize: vertical !important;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #aab2bb;
}

/* 送信ボタン */
.wpcf7 input[type="submit"],
.wpcf7-submit {
  display: inline-block !important;
  padding: 16px 40px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1565c0 0%, #0d4a8c 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.25) !important;
  margin-top: 12px !important;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(21, 101, 192, 0.35) !important;
  background: linear-gradient(135deg, #0d4a8c 0%, #082f5a 100%) !important;
}
.wpcf7 input[type="submit"]:active,
.wpcf7-submit:active {
  transform: translateY(0) !important;
}
.wpcf7 input[type="submit"]:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* チェックボックス・ラジオ */
.wpcf7 .wpcf7-list-item {
  margin: 0 16px 0 0 !important;
}
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
}

/* 認証（reCAPTCHA / 数式CAPTCHA等）周り */
.wpcf7-quiz-label,
.wpcf7-form-control-wrap.quiz {
  display: block;
  margin-top: 8px;
}

/* 確認・エラーメッセージ */
.wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border: 2px solid #d8324a !important;
  background: #fff5f6 !important;
  color: #a01030 !important;
}
.wpcf7 form.sent .wpcf7-response-output {
  border: 2px solid #4caf50 !important;
  background: #e8f5e9 !important;
  color: #1b5e20 !important;
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #d8324a;
  background: #fff5f6;
  border-left: 3px solid #d8324a;
  border-radius: 4px;
}

/* 入力欄エラー時の枠線 */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
  border-color: #d8324a !important;
  background: #fff8f9 !important;
}

/* レスポンシブ */
@media (max-width: 760px) {
  .contact-form-wrap {
    padding: 24px 20px;
    margin: 20px 0;
  }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea {
    padding: 12px 14px !important;
    font-size: 16px !important; /* iOS のズーム防止 */
  }
  .wpcf7 input[type="submit"] {
    width: 100%;
    padding: 14px !important;
  }
}

/* ============================================================
   お問い合わせカードのクリック性向上（v3.2.14）
   ============================================================ */

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* お問い合わせカード（アンカーリンク化されたもの） */
.contact-card-link {
  transition: all 0.2s ease;
}
.contact-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(21, 101, 192, 0.15);
}
.contact-card-link:active {
  transform: translateY(-2px);
}

/* AIチャットカードは jpsol オレンジでホバー */
.contact-card-chatbot:hover {
  box-shadow: 0 12px 24px rgba(255, 107, 0, 0.2) !important;
  border-color: #cc5500 !important;
}

/* アンカー先のオフセット（固定ヘッダの裏に隠れないよう） */
#contact-chatbot,
#contact-form {
  scroll-margin-top: 120px;
}

/* ============================================================
   /select-approval/ 用途フィルタUI（v3.2.18）
   ============================================================ */

/* フィルタチップバー */
.usecase-filter-bar {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  margin: 24px 0 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #f7faff 0%, #fff 100%);
  border: 1px solid #d0e3f0;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(21,101,192,0.04);
  grid-column: 1 / -1; /* もし親が grid だった場合に全幅化 */
}
.usecase-filter-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a2a4a;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.usecase-filter-chips {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px;
  align-items: center;
}
.usecase-chip {
  display: inline-block;
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  background: #fff;
  border: 1.5px solid #d0d8e0;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.4;
}
.usecase-chip:hover {
  border-color: #1565c0;
  color: #1565c0;
  transform: translateY(-1px);
}
.usecase-chip.active {
  background: linear-gradient(135deg, #1565c0, #0d4a8c);
  color: #fff;
  border-color: #0d4a8c;
  box-shadow: 0 4px 12px rgba(21,101,192,0.25);
}

/* 現在のフィルタを示すバナー */
.usecase-current-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #e8f4fd, #c8e6fa);
  border: 2px solid #1565c0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(21,101,192,0.12);
  animation: bannerSlideIn 0.4s ease;
  width: 100%;
  box-sizing: border-box;
  grid-column: 1 / -1; /* grid 親でも全幅 */
}
@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.usecase-current-label {
  font-size: 15px;
  font-weight: 700;
  color: #0d4a8c;
}
.usecase-current-clear {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #1565c0;
  background: #fff;
  border: 1.5px solid #1565c0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
.usecase-current-clear:hover {
  background: #1565c0;
  color: #fff;
}

/* カードのハイライト / フェード状態 */
.lp-usecase.usecase-highlighted {
  border-color: #1565c0 !important;
  border-width: 2px !important;
  background: linear-gradient(135deg, #fff 0%, #f7faff 100%) !important;
  box-shadow: 0 8px 24px rgba(21,101,192,0.18) !important;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}
.lp-usecase.usecase-dimmed {
  opacity: 0.35;
  filter: grayscale(0.3);
  transition: all 0.3s ease;
}
.lp-usecase.usecase-dimmed:hover {
  opacity: 0.7;
  filter: grayscale(0);
}

/* スクロール先のアンカーオフセット（ヘッダ固定対策） */
.lp-usecase[id^="usecase-"] {
  scroll-margin-top: 120px;
}

/* レスポンシブ */
@media (max-width: 760px) {
  .usecase-filter-chips {
    gap: 6px;
  }
  .usecase-chip {
    padding: 6px 12px;
    font-size: 12px;
  }
  .usecase-current-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .usecase-current-clear {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   tech-doc 見出しの視覚階層強化（v3.2.26）
   h2 = セクション扉（大きい・罫線・帯）
   h3 = サブセクション（中・左に色帯）
   h4 = 細目（小・小さい色付き四角）
   ============================================================ */

/* h2：セクションの扉。左に太い色帯＋下に罫線 */
.tech-doc h2,
.page-content .tech-doc h2 {
  position: relative;
  font-size: 24px;
  font-weight: 900;
  color: #1a2a4a;
  margin: 56px 0 20px;
  padding: 14px 0 14px 22px;
  border-bottom: 3px solid #1565c0;
  background: linear-gradient(90deg, rgba(21,101,192,0.06) 0%, rgba(21,101,192,0) 60%);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.tech-doc h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #1565c0 0%, #0d4a8c 100%);
}

/* 1番目の h2 だけ上余白少なめ */
.tech-doc > h2:first-of-type,
.tech-doc > p:first-child + h2,
.tech-doc > .alert:first-of-type + h2 {
  margin-top: 32px;
}

/* h3：サブセクション。左に細めの色帯 */
.tech-doc h3,
.page-content .tech-doc h3 {
  position: relative;
  font-size: 18px;
  font-weight: 800;
  color: #1565c0;
  margin: 32px 0 14px;
  padding: 4px 0 4px 14px;
  border-left: 4px solid #1565c0;
  line-height: 1.5;
}

/* h4：細目。小さい色付き四角アクセント */
.tech-doc h4,
.page-content .tech-doc h4 {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  color: #1a2a4a;
  margin: 24px 0 10px;
  padding-left: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.tech-doc h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #1565c0;
  border-radius: 2px;
}

/* steps 内の h4 は別スタイル（既存維持・上書きしない） */
.tech-doc ol.steps > li > h4 {
  padding-left: 0;
}
.tech-doc ol.steps > li > h4::before {
  display: none;
}

/* p の直後の見出しは上余白を詰める */
.tech-doc p + h3,
.tech-doc ul + h3,
.tech-doc table + h3 {
  margin-top: 28px;
}
.tech-doc p + h4,
.tech-doc ul + h4 {
  margin-top: 20px;
}

/* h2 -> h3 / h4 がすぐ続く場合の調整 */
.tech-doc h2 + h3,
.tech-doc h2 + h4 {
  margin-top: 16px;
}

/* リード段落（h2の直前にある冒頭の説明文）を強調 */
.tech-doc > p:first-of-type,
.tech-doc > p.lead {
  font-size: 16px;
  line-height: 1.85;
  color: #2a3a5a;
  padding: 4px 0;
}

/* セクションの区切り感を出すため、長い h2 セクション後は薄い罫線 */
.tech-doc h2 + p,
.tech-doc h2 + .alert,
.tech-doc h2 + ul,
.tech-doc h2 + ol,
.tech-doc h2 + table,
.tech-doc h2 + h3,
.tech-doc h2 + h4 {
  /* 直後の要素の上余白はリセット（h2 が大きい余白持ってるので） */
}

/* レスポンシブ */
@media (max-width: 760px) {
  .tech-doc h2,
  .page-content .tech-doc h2 {
    font-size: 20px;
    padding: 12px 0 12px 18px;
    margin: 40px 0 16px;
  }
  .tech-doc h2::before {
    width: 5px;
  }
  .tech-doc h3,
  .page-content .tech-doc h3 {
    font-size: 16px;
    margin: 24px 0 10px;
  }
  .tech-doc h4,
  .page-content .tech-doc h4 {
    font-size: 14px;
    margin: 18px 0 8px;
  }
}

/* ============================================================
   見出し階層化を FAQ 回答エリア・商品ページにも適用（v3.2.27）
   .tech-doc だけでなく、.faq-answer-body や .product-content にも
   同じデザインを当てて、サイト全体で統一感を出す
   ============================================================ */

/* h2 ─ セクションの扉 */
.faq-answer-body h2,
.product-content h2 {
  position: relative;
  font-size: 22px;
  font-weight: 900;
  color: #1a2a4a;
  margin: 48px 0 18px;
  padding: 12px 0 12px 20px;
  border-bottom: 3px solid #1565c0;
  background: linear-gradient(90deg, rgba(21,101,192,0.06) 0%, rgba(21,101,192,0) 60%);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.faq-answer-body h2::before,
.product-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #1565c0 0%, #0d4a8c 100%);
}

/* h2 のリセット：その他既存スタイルの上書き */
.faq-answer-body h2:first-of-type {
  margin-top: 24px;
}

/* h3 ─ サブセクション */
.faq-answer-body h3,
.product-content h3 {
  position: relative;
  font-size: 17px;
  font-weight: 800;
  color: #1565c0;
  margin: 28px 0 12px;
  padding: 4px 0 4px 14px;
  border-left: 4px solid #1565c0;
  line-height: 1.5;
  border-bottom: none;
  background: none;
}

/* h4 ─ 細目 */
.faq-answer-body h4,
.product-content h4 {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  color: #1a2a4a;
  margin: 22px 0 10px;
  padding-left: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.faq-answer-body h4::before,
.product-content h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #1565c0;
  border-radius: 2px;
}

/* p の直後の見出しは余白詰める */
.faq-answer-body p + h3,
.faq-answer-body ul + h3,
.faq-answer-body table + h3,
.product-content p + h3,
.product-content ul + h3,
.product-content table + h3 {
  margin-top: 24px;
}
.faq-answer-body p + h4,
.faq-answer-body ul + h4,
.product-content p + h4,
.product-content ul + h4 {
  margin-top: 18px;
}

/* h2 直後の h3 / h4 は余白詰める */
.faq-answer-body h2 + h3,
.faq-answer-body h2 + h4,
.product-content h2 + h3,
.product-content h2 + h4 {
  margin-top: 14px;
}

/* リード段落（h2の直前の冒頭説明）を強調 */
.faq-answer-body > p:first-of-type {
  font-size: 16px;
  line-height: 1.85;
  color: #2a3a5a;
}

/* レスポンシブ */
@media (max-width: 760px) {
  .faq-answer-body h2,
  .product-content h2 {
    font-size: 19px;
    padding: 10px 0 10px 16px;
    margin: 36px 0 14px;
  }
  .faq-answer-body h2::before,
  .product-content h2::before {
    width: 5px;
  }
  .faq-answer-body h3,
  .product-content h3 {
    font-size: 15px;
    margin: 22px 0 10px;
  }
  .faq-answer-body h4,
  .product-content h4 {
    font-size: 14px;
    margin: 16px 0 8px;
  }
}

/* ============================================================
   コードブロック・インラインコードを FAQ ページ・商品ページにも適用（v3.2.28）
   .tech-doc だけだった視認性スタイルを全体に広げる
   ============================================================ */

/* pre（コードブロック）─ 濃紺背景 + 白文字 */
.faq-answer-body pre,
.product-content pre,
.page-content pre {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  background: #1a2332 !important;
  color: #e8eaed !important;
  padding: 18px 22px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.7;
  border: 1px solid #2a3a52;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.faq-answer-body pre code,
.product-content pre code,
.page-content pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0;
  font-size: inherit;
  border: none;
  white-space: pre;
}

/* インラインコード ─ 薄いグレー背景 + 赤文字 */
.faq-answer-body p code,
.faq-answer-body li code,
.faq-answer-body td code,
.faq-answer-body h3 code,
.faq-answer-body h4 code,
.product-content p code,
.product-content li code,
.product-content td code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  background: #f0f3f7;
  color: #b8294a;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  border: 1px solid #e0e7ee;
  white-space: nowrap;
}

/* シンタックスハイライト風の装飾（簡易） */
.faq-answer-body pre code .comment,
.product-content pre code .comment {
  color: #7a8a9f;
  font-style: italic;
}

/* ============================================================
   FAQ ページの2カラムレイアウト（v3.2.29）
   左：サイドバー（目次 + 関連FAQ + ACME宣伝 + BIMI宣伝）
   右：本文
   ============================================================ */

/* レイアウトコンテナ */
.faq-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}

/* サイドバー本体 */
.faq-sidebar {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 4px;
  /* スクロールバー控えめ */
  scrollbar-width: thin;
  scrollbar-color: #c5cdd6 transparent;
}
.faq-sidebar::-webkit-scrollbar {
  width: 6px;
}
.faq-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.faq-sidebar::-webkit-scrollbar-thumb {
  background: #c5cdd6;
  border-radius: 3px;
}

/* サイドバー共通ブロック */
.faq-sidebar-block {
  background: #fff;
  border: 1px solid #e0e7ee;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.faq-sidebar-title {
  font-size: 13px;
  font-weight: 800;
  color: #1a2a4a;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8eef5;
  letter-spacing: 0.02em;
}

/* === 目次 === */
.faq-toc ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: toc-counter;
}
.faq-toc li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0;
}
.faq-toc a {
  display: block;
  padding: 7px 10px 7px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a5666;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: all 0.15s ease;
  border-radius: 0 6px 6px 0;
}
.faq-toc a:hover {
  background: #f0f6fc;
  color: #1565c0;
  border-left-color: #c0d5e6;
}
.faq-toc a.is-active {
  background: linear-gradient(90deg, rgba(21,101,192,0.08), rgba(21,101,192,0));
  color: #1565c0;
  font-weight: 700;
  border-left-color: #1565c0;
}
/* 目次のインデント（h3, h4） */
.faq-toc .toc-h2 { font-weight: 600; }
.faq-toc .toc-h3 a { padding-left: 28px; font-size: 12px; }
.faq-toc .toc-h4 a { padding-left: 40px; font-size: 12px; color: #6a7686; }
.faq-toc .toc-h4 a.is-active { color: #1565c0; }

/* === 関連 FAQ === */
.faq-sidebar-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.faq-sidebar-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0;
  border-bottom: 1px solid #f0f3f7;
}
.faq-sidebar-list li:last-child {
  border-bottom: none;
}
.faq-sidebar-list a {
  display: block;
  padding: 10px 0;
  font-size: 13px;
  line-height: 1.55;
  color: #4a5666;
  text-decoration: none;
  transition: color 0.15s ease;
}
.faq-sidebar-list a::before {
  content: "Q.";
  display: inline-block;
  margin-right: 6px;
  color: #1565c0;
  font-weight: 800;
  font-size: 11px;
}
.faq-sidebar-list a:hover {
  color: #1565c0;
}

/* === 宣伝カード（共通） === */
.faq-sidebar-promo {
  display: block;
  padding: 18px;
  border-radius: 12px;
  text-decoration: none;
  margin-bottom: 14px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.faq-sidebar-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.faq-sidebar-promo-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
}
.faq-sidebar-promo-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.3;
}
.faq-sidebar-promo-desc {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 10px;
}
.faq-sidebar-promo-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* === ACME 宣伝カード（青系） === */
.faq-sidebar-promo-acme {
  background: linear-gradient(135deg, #1565c0 0%, #0d4a8c 100%);
  color: #fff;
}
.faq-sidebar-promo-acme .faq-sidebar-promo-link {
  color: #b8d4f0;
}

/* === BIMI 宣伝カード（オレンジ系） === */
.faq-sidebar-promo-bimi {
  background: linear-gradient(135deg, #ff6b00 0%, #cc5500 100%);
  color: #fff;
}
.faq-sidebar-promo-bimi .faq-sidebar-promo-link {
  color: #ffd8b8;
}

/* === レスポンシブ === */
@media (max-width: 980px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .faq-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    order: 2; /* モバイルでは本文の下に */
  }
  .faq-single-answer {
    order: 1;
  }
  .faq-toc-block {
    /* モバイルでは目次は折りたたみ */
    display: none;
  }
  /* 関連FAQと宣伝はモバイルでも残す */
}

/* タブレット〜大画面の調整 */
@media (min-width: 1200px) {
  .faq-layout {
    max-width: 1200px;
    grid-template-columns: 280px 1fr;
    gap: 56px;
  }
}