/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --color-primary:   #1a5fa8;
  --color-primary-d: #134a85;
  --color-primary-l: #e8f1fb;
  --color-accent:    #0d8cce;
  --color-text:      #1c2b3a;
  --color-text-sub:  #5a6a7a;
  --color-border:    #d8e2ec;
  --color-bg:        #f4f7fb;
  --color-bg-white:  #ffffff;
  --color-warn:      #d94f00;
  --color-warn-l:    #fff3ee;
  --color-ok:        #1a8a45;
  --color-ok-l:      #edfaf3;
  --color-caution:   #b07800;
  --color-caution-l: #fffbea;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 2px 12px rgba(0,0,0,.10);
  --transition: .18s ease;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--color-primary-d); }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ===== Layout ===== */
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.main-content { flex: 1; padding: 32px 0 64px; }

/* ===== Header ===== */
.site-header {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 16px;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary);
  white-space: nowrap;
  text-decoration: none;
}
.site-logo:hover { text-decoration: none; color: var(--color-primary-d); }
.logo-mark {
  width: 34px; height: 34px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: .85rem; letter-spacing: -.02em;
  flex-shrink: 0;
}
.header-nav { display: flex; gap: 4px; }
.header-nav a {
  font-size: .82rem;
  color: var(--color-text-sub);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.header-nav a:hover {
  background: var(--color-primary-l);
  color: var(--color-primary);
  text-decoration: none;
}
.header-nav a.active { color: var(--color-primary); font-weight: 600; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===== Mobile Nav Overlay ===== */
.mobile-nav {
  display: none;
  position: fixed;
  top: 60px; left: 0; right: 0; bottom: 0;
  background: var(--color-bg-white);
  z-index: 99;
  overflow-y: auto;
  padding: 20px;
  border-top: 1px solid var(--color-border);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: .95rem;
  color: var(--color-text);
}
.mobile-nav a:hover { background: var(--color-primary-l); text-decoration: none; }

/* ===== Breadcrumb ===== */
.breadcrumb {
  padding: 10px 0 0;
  font-size: .78rem;
  color: var(--color-text-sub);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li { display: flex; align-items: center; gap: 4px; }
.breadcrumb li + li::before { content: "›"; color: var(--color-border); }
.breadcrumb a { color: var(--color-text-sub); }
.breadcrumb a:hover { color: var(--color-primary); }

/* ===== Hero / Page Header ===== */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: #fff;
  padding: 52px 0 44px;
  text-align: center;
}
.page-hero h1 { font-size: 1.9rem; font-weight: 700; margin-bottom: 8px; }
.page-hero p  { font-size: 1rem; opacity: .88; }

.section-hero {
  background: var(--color-primary-l);
  border-bottom: 1px solid var(--color-border);
  padding: 32px 0 28px;
}
.section-hero h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; color: var(--color-primary); }
.section-hero p  { font-size: .9rem; color: var(--color-text-sub); }

/* ===== Search ===== */
.search-wrap {
  max-width: 660px;
  margin: 0 auto;
}
.search-box {
  display: flex;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #fff;
}
.search-box input {
  flex: 1;
  border: none;
  padding: 14px 18px;
  font-size: 1rem;
  outline: none;
  color: var(--color-text);
  background: transparent;
}
.search-box button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 14px 22px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.search-box button:hover { background: var(--color-primary-d); }

.search-results {
  display: none;
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.search-results.show { display: block; }
.search-result-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--color-primary-l); }
.result-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.badge-vps    { background: var(--color-primary-l); color: var(--color-primary); }
.badge-game   { background: #edf7ee; color: #1a7a3a; }
.badge-win    { background: #eef4ff; color: #1a4fd4; }
.badge-ai     { background: #f5eeff; color: #6b1ad4; }
.badge-web    { background: #fff8e6; color: #a06b00; }
.result-title { font-size: .9rem; font-weight: 600; flex: 1; }
.result-meta  { font-size: .72rem; color: var(--color-text-sub); margin-top: 2px; }
.result-no    { padding: 20px 16px; color: var(--color-text-sub); font-size: .9rem; text-align: center; }

/* ===== Status Banner ===== */
.status-banner {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 28px;
  border: 1px solid transparent;
}
.status-banner .status-icon { font-size: 1.2rem; flex-shrink: 0; }
.status-banner .status-detail { margin-left: auto; font-size: .82rem; }
.status-banner a { font-weight: 600; }
.status-ok     { background: var(--color-ok-l);      border-color: #9eded8; color: var(--color-ok); }
.status-warn   { background: var(--color-caution-l); border-color: #ffd970; color: var(--color-caution); }
.status-error  { background: var(--color-warn-l);    border-color: #f4a78a; color: var(--color-warn); }

/* ===== Section Heading ===== */
.section-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.section-heading h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  position: relative;
  padding-left: 12px;
}
.section-heading h2::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 4px;
  background: var(--color-primary);
  border-radius: 2px;
}
.section-heading a { font-size: .8rem; color: var(--color-text-sub); }
.section-heading a:hover { color: var(--color-primary); }

.section-block { margin-bottom: 40px; }

/* ===== Card Grid ===== */
.card-grid {
  display: grid;
  gap: 14px;
}
.col2 { grid-template-columns: repeat(2, 1fr); }
.col3 { grid-template-columns: repeat(3, 1fr); }
.col4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-1px);
}
.card-icon { font-size: 1.5rem; margin-bottom: 4px; }
.card-title { font-size: .95rem; font-weight: 700; color: var(--color-text); }
.card-desc  { font-size: .8rem; color: var(--color-text-sub); line-height: 1.5; }
.card-arrow { margin-top: auto; font-size: .78rem; color: var(--color-primary); font-weight: 600; }

/* Trouble cards */
.card-trouble { border-left: 3px solid var(--color-warn); }
.card-trouble .card-title { color: var(--color-warn); }

/* Purpose cards */
.card-purpose { border-left: 3px solid var(--color-accent); }

/* Usecase cards */
.card-usecase { border-left: 3px solid #7c3aed; }

/* Service cards */
.card-service { border-left: 3px solid var(--color-ok); }

/* Category cards */
.card-category { border-left: 3px solid var(--color-primary); }

/* ===== Link List ===== */
.link-list { display: flex; flex-direction: column; gap: 2px; }
.link-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  color: var(--color-text);
  transition: var(--transition);
  border: 1px solid transparent;
}
.link-list-item:hover {
  background: var(--color-primary-l);
  border-color: var(--color-border);
  color: var(--color-primary);
  text-decoration: none;
}
.link-list-item::before { content: "›"; color: var(--color-primary); font-weight: 700; }

/* ===== Notice / Info Box ===== */
.notice-list { display: flex; flex-direction: column; gap: 1px; }
.notice-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
}
.notice-item + .notice-item { margin-top: 4px; }
.notice-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.notice-tag {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.tag-end      { background: #fde8e8; color: #b91c1c; }
.tag-spec     { background: #fef3c7; color: #92400e; }
.tag-security { background: #fce7f3; color: #9d174d; }
.tag-biz      { background: #e0e7ff; color: #3730a3; }
.tag-price    { background: #d1fae5; color: #065f46; }
.tag-terms    { background: #f3e8ff; color: #6b21a8; }
.tag-maint    { background: #fff3e0; color: #e65100; }
.tag-fault    { background: #fce4ec; color: #b71c1c; }

.notice-title { font-size: .88rem; font-weight: 500; color: var(--color-text); flex: 1; }
.notice-date  { font-size: .72rem; color: var(--color-text-sub); white-space: nowrap; flex-shrink: 0; }

/* ===== Contact CTA ===== */
.contact-cta {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}
.contact-cta h3 { font-size: 1rem; margin-bottom: 8px; }
.contact-cta p  { font-size: .85rem; color: var(--color-text-sub); margin-bottom: 16px; }
.contact-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.contact-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  color: var(--color-text-sub);
}
.step-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
.step-arrow { font-size: 1rem; color: var(--color-border); margin-top: -8px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-decoration: none;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-d); color: #fff; text-decoration: none; }
.btn-outline { background: #fff; color: var(--color-primary); border: 2px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-l); text-decoration: none; }
.btn-sm { padding: 6px 14px; font-size: .82rem; }

/* ===== Filter Tabs ===== */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.filter-tab {
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  font-size: .82rem;
  cursor: pointer;
  transition: var(--transition);
  background: #fff;
  color: var(--color-text-sub);
}
.filter-tab:hover, .filter-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ===== Status Table ===== */
.status-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.status-table th, .status-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.status-table th { background: var(--color-bg); font-weight: 600; font-size: .8rem; color: var(--color-text-sub); }
.status-table tr:last-child td { border-bottom: none; }
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-ok   { background: var(--color-ok); }
.dot-warn { background: var(--color-caution); }
.dot-err  { background: var(--color-warn); }

/* ===== Startup Steps ===== */
.step-list { display: flex; flex-direction: column; gap: 0; }
.step-item {
  display: flex;
  gap: 16px;
  position: relative;
  padding-bottom: 28px;
}
.step-item:last-child { padding-bottom: 0; }
.step-item:last-child .step-line { display: none; }
.step-left { display: flex; flex-direction: column; align-items: center; }
.step-num-box {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-line { width: 2px; flex: 1; background: var(--color-border); margin-top: 4px; }
.step-body { flex: 1; padding-top: 6px; }
.step-body h3 { font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
.step-body p  { font-size: .84rem; color: var(--color-text-sub); }
.step-links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.step-link {
  font-size: .78rem;
  padding: 3px 10px;
  background: var(--color-primary-l);
  color: var(--color-primary);
  border-radius: 99px;
  font-weight: 500;
}
.step-link:hover { background: var(--color-primary); color: #fff; text-decoration: none; }

/* ===== Usecase Hub ===== */
.usecase-hub {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}
.usecase-hub-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--color-primary-l);
  border-bottom: 1px solid var(--color-border);
}
.usecase-hub-icon { font-size: 1.8rem; }
.usecase-hub-title { font-size: 1rem; font-weight: 700; color: var(--color-primary); }
.usecase-hub-desc  { font-size: .8rem; color: var(--color-text-sub); margin-top: 2px; }
.usecase-hub-body { padding: 16px 20px; }
.usecase-hub-links { display: flex; flex-wrap: wrap; gap: 8px; }
.usecase-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .83rem;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  color: var(--color-text);
  background: #fff;
  transition: var(--transition);
}
.usecase-hub-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-l);
  text-decoration: none;
}

/* ===== Service Cards ===== */
.service-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.service-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.service-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--color-primary);
  color: #fff;
}
.service-card-title { font-size: .95rem; font-weight: 700; }
.service-card-body  { padding: 14px 20px; }
.service-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.service-nav-link {
  font-size: .8rem;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  color: var(--color-text);
  transition: var(--transition);
}
.service-nav-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-l);
  text-decoration: none;
}

/* ===== Manual Category ===== */
.manual-section {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}
.manual-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
}
.manual-section-icon { font-size: 1.1rem; }
.manual-section-title { font-size: .95rem; font-weight: 700; flex: 1; }
.manual-section-toggle { font-size: .8rem; color: var(--color-text-sub); }
.manual-section-body { padding: 12px 18px; }
.manual-article-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.manual-article-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: .85rem;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.manual-article-link::before { content: "›"; color: var(--color-primary); font-weight: 700; }
.manual-article-link:hover { background: var(--color-primary-l); color: var(--color-primary); text-decoration: none; }

/* ===== Footer ===== */
.site-footer {
  background: #1a2535;
  color: #c0ccda;
  padding: 40px 0 20px;
  margin-top: auto;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
.footer-brand { color: #fff; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 10px;
  text-decoration: none;
}
.footer-logo:hover { color: #fff; text-decoration: none; }
.footer-logo .logo-mark { background: #3a7bd5; }
.footer-tagline { font-size: .8rem; color: #7a90a8; line-height: 1.6; }
.footer-col h4 { font-size: .8rem; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: .05em; text-transform: uppercase; }
.footer-col ul { display: flex; flex-direction: column; gap: 6px; }
.footer-col a { font-size: .82rem; color: #8aaac8; transition: var(--transition); }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
  border-top: 1px solid #2d3e54;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  color: #5a7090;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: #5a7090; }
.footer-links a:hover { color: #c0ccda; text-decoration: none; }

/* ===== Index Top ===== */
.service-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.service-entry {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
  transition: var(--transition);
  display: block;
  color: var(--color-text);
}
.service-entry:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-1px);
}
.service-entry-icon { font-size: 1.8rem; margin-bottom: 8px; }
.service-entry-title { font-size: .88rem; font-weight: 700; margin-bottom: 4px; }
.service-entry-desc  { font-size: .76rem; color: var(--color-text-sub); }

.vps-hero-entry {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1a7dbf 100%);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  color: #fff;
}
.vps-hero-text h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.vps-hero-text p  { font-size: .9rem; opacity: .88; }
.vps-hero-cta { flex-shrink: 0; }
.btn-white { background: #fff; color: var(--color-primary); font-weight: 700; }
.btn-white:hover { background: #e8f1fb; color: var(--color-primary-d); text-decoration: none; }

/* ===== Alert Box ===== */
.alert-box {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: .88rem;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.alert-box.info    { background: var(--color-primary-l);  border-color: #b3d0f0; color: var(--color-primary-d); }
.alert-box.warn    { background: var(--color-caution-l);  border-color: #ffd970; color: var(--color-caution); }
.alert-box.danger  { background: var(--color-warn-l);     border-color: #f4a78a; color: var(--color-warn); }
.alert-box h4 { font-size: .9rem; margin-bottom: 4px; }

/* ===== Search Filters (image 1 style) ===== */
.search-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.search-filter-label {
  font-size: .8rem;
  color: rgba(255,255,255,.85);
  margin-right: 6px;
  white-space: nowrap;
}
.search-filter-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: rgba(255,255,255,.9);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.4);
  transition: var(--transition);
  user-select: none;
}
.search-filter-radio input[type="radio"] { display: none; }
.search-filter-radio .radio-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}
.search-filter-radio input[type="radio"]:checked + .radio-dot {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--color-primary);
}
.search-filter-radio:has(input:checked) {
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.15);
}
.search-privacy {
  font-size: .74rem;
  color: rgba(255,255,255,.7);
  margin-top: 8px;
}
.search-privacy a { color: rgba(255,255,255,.85); text-decoration: underline; }

/* ===== Compact Notice Box (image 2 style) ===== */
.notice-compact {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  overflow: hidden;
  margin-bottom: 20px;
}
.notice-compact-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: #fafbfd;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}
.notice-compact-title {
  flex: 1;
  font-size: .88rem;
  font-weight: 700;
  text-align: center;
}
.notice-compact-all {
  font-size: .75rem;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  color: var(--color-text-sub);
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.notice-compact-all:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-l);
  text-decoration: none;
}
.notice-compact-list { padding: 0; }
.notice-compact-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}
.notice-compact-item:last-child { border-bottom: none; }
.notice-compact-item:hover { background: var(--color-primary-l); }
.notice-compact-date {
  font-weight: 700;
  font-size: .82rem;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.notice-compact-arrow {
  color: var(--color-warn);
  font-size: .75rem;
  flex-shrink: 0;
  font-weight: 700;
}
.notice-compact-text {
  font-size: .86rem;
  color: var(--color-primary);
  flex: 1;
}
.notice-compact-text:hover { text-decoration: underline; }
.notice-compact-footer {
  padding: 7px 16px;
  text-align: right;
  background: #fafbfd;
  border-top: 1px solid var(--color-border);
}
.notice-close-btn {
  font-size: .76rem;
  color: var(--color-text-sub);
  cursor: pointer;
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.notice-close-btn:hover { color: var(--color-warn); background: var(--color-warn-l); }

/* ===== Compact Notice Tabs (トップページ) ===== */
.notice-compact .notice-compact-header {
  padding: 0 16px;
  gap: 0;
}

.notice-compact-tabs {
  display: flex;
  flex: 1;
}

.notice-compact-tab {
  padding: 11px 16px;
  font-size: .84rem;
  font-weight: 600;
  color: #8a9ab0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s ease, border-bottom-color .15s ease;
  line-height: 1;
}

.notice-compact-tab:hover {
  color: var(--color-primary);
}

.notice-compact-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ===== Maintenance Compact ===== */
.maint-compact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #ffd970;
  border-radius: var(--radius-md);
  background: var(--color-caution-l);
  margin-bottom: 16px;
  font-size: .86rem;
}
.maint-compact-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 9px;
  background: var(--color-caution);
  color: #fff;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.maint-compact-text { flex: 1; color: var(--color-text); line-height: 1.5; }
.maint-compact-link {
  font-size: .78rem;
  padding: 4px 12px;
  border: 1px solid var(--color-caution);
  border-radius: 99px;
  color: var(--color-caution);
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.maint-compact-link:hover {
  background: var(--color-caution);
  color: #fff;
  text-decoration: none;
}
.maint-section {
  margin-bottom: 24px;
}
.maint-section-heading {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-text-sub);
  margin-bottom: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ===== Beginner Banner (image 3 style) ===== */
.beginner-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 28px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  margin-bottom: 28px;
}
.beginner-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.beginner-banner-icon {
  font-size: 2.2rem;
  color: var(--color-accent);
}
.beginner-banner-catch {
  font-size: .72rem;
  color: var(--color-text-sub);
  margin-bottom: 3px;
}
.beginner-banner-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}
.beginner-banner-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.beginner-banner-feature {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  color: var(--color-text);
}
.beginner-check {
  color: var(--color-ok);
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.beginner-banner-right { flex-shrink: 0; }
.btn-cta {
  background: var(--color-ok);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}
.btn-cta:hover { background: #156e38; color: #fff; text-decoration: none; }
.btn-cta-arrow {
  font-size: .8rem;
  border-left: 1px solid rgba(255,255,255,.4);
  padding-left: 10px;
}

/* ===== Quick Nav (image 1 style, blue scheme) ===== */
.quicknav-section { margin-bottom: 40px; }
.quicknav-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.quicknav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-border);
  border-radius: 99px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: var(--color-text);
  user-select: none;
}
.quicknav-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-primary);
}
.quicknav-card-wide  { grid-column: span 3; }
.quicknav-card-third { grid-column: span 2; }
.quicknav-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary-l);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  border: 1.5px solid #c5daf5;
}
.quicknav-label {
  font-size: .86rem;
  font-weight: 600;
  flex: 1;
  line-height: 1.4;
}
.quicknav-arrow {
  font-size: .9rem;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-left: 4px;
}
.quicknav-ext { font-size: .72rem; color: var(--color-text-sub); flex-shrink: 0; }

/* ===== Section Title Center (image 2/3 style) ===== */
.section-title-center {
  text-align: center;
  margin-bottom: 32px;
}
.section-title-center h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
  letter-spacing: .02em;
}
.section-title-center .title-bar {
  width: 40px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 0 auto;
}

/* ===== Category Grid (image 2 style) ===== */
.cat-section {
  padding: 48px 0 52px;
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
}
.cat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-white);
}
.cat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition);
}
.cat-card-header:hover {
  background: var(--color-primary-l);
}
.cat-card-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text);
}
.cat-card-arrow { color: var(--color-primary); font-size: .9rem; font-weight: 700; }
.cat-card-links {
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  color: var(--color-text);
  padding: 4px 2px;
  transition: var(--transition);
  border-radius: var(--radius-sm);
}
.cat-link::before { content: "›"; color: var(--color-primary); font-weight: 700; flex-shrink: 0; }
.cat-link:hover { color: var(--color-primary); text-decoration: none; padding-left: 4px; }

/* ===== Trouble Tag Cloud (image 3 style) ===== */
.trouble-section {
  background: #fdf8f2;
  border-top: 1px solid #ede8e0;
  border-bottom: 1px solid #ede8e0;
  padding: 48px 0 52px;
  margin-bottom: 0;
}
.trouble-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.trouble-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border: 1px solid #c8cdd4;
  border-radius: 99px;
  font-size: .85rem;
  color: var(--color-text);
  background: var(--color-bg-white);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.trouble-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-l);
  text-decoration: none;
}

/* ===== Content Carousel (image 1 style) ===== */
.content-section {
  background: var(--color-bg-white);
  padding: 52px 0 56px;
  border-top: 1px solid var(--color-border);
}
.content-section-desc {
  text-align: center;
  font-size: .88rem;
  color: var(--color-text-sub);
  margin-bottom: 36px;
}
.carousel-outer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.carousel-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.carousel-track {
  display: flex;
  gap: 20px;
  transition: transform .3s ease;
  will-change: transform;
}
.content-card {
  flex: 0 0 calc((100% - 40px) / 3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-white);
  transition: box-shadow var(--transition);
  cursor: pointer;
}
.content-card:hover { box-shadow: var(--shadow-md); }
.content-card-visual {
  height: 160px;
  display: flex;
  align-items: flex-end;
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
}
.content-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.content-card-visual-bg1 { background: linear-gradient(135deg, #3a7bd5 0%, #1a5fa8 100%); }
.content-card-visual-bg2 { background: linear-gradient(135deg, #0d8cce 0%, #0a6fa8 100%); }
.content-card-visual-bg3 { background: linear-gradient(135deg, #1a8a45 0%, #156e38 100%); }
.content-card-visual-bg4 { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.content-card-visual-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  position: relative;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.content-card-visual-icon {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 2.8rem;
  opacity: .35;
}
.content-card-body {
  padding: 16px 18px 20px;
}
.content-card-title {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}
.content-card-desc {
  font-size: .82rem;
  color: var(--color-text-sub);
  line-height: 1.6;
}

.carousel-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-primary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  user-select: none;
}
.carousel-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-l);
  box-shadow: var(--shadow-md);
}
.carousel-btn:disabled { opacity: .35; cursor: default; }

/* ===== Static Content Grid (carousel代替) ===== */
.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.content-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* サポートサイト一覧カード（視覚を少し変える） */
.content-card-service .content-card-visual { height: 120px; }
.content-card-service .content-card-visual-title { font-size: 1.15rem; }

/* ===== New Footer (image 2 style) ===== */
.footer-new { font-size: .85rem; margin-top: auto; }

/* アコーディオン行 */
.footer-accord-row {
  background: #f0f2f5;
  border-top: 1px solid #dde1e8;
  padding: 24px 0;
}
.footer-accord-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.footer-accord-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-text);
  transition: var(--transition);
  text-align: left;
}
.footer-accord-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-l);
}
.footer-accord-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--color-primary);
  font-size: .9rem;
  flex-shrink: 0;
  gap: 1px;
}
.footer-accord-icon .acc-label {
  font-size: .6rem;
  letter-spacing: .04em;
  color: var(--color-text-sub);
}
.footer-accord-body {
  display: none;
  margin-top: 8px;
  padding: 12px 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.footer-accord-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-accord-link {
  font-size: .82rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  transition: var(--transition);
}
.footer-accord-link::before { content: "›"; color: var(--color-primary); font-weight: 700; }
.footer-accord-link:hover { color: var(--color-primary); text-decoration: none; }

/* クイックリンク行 */
.footer-ql-row {
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}
.footer-ql-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 0;
}
.footer-ql-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: .85rem;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.footer-ql-item:hover {
  color: var(--color-primary);
  background: var(--color-primary-l);
  text-decoration: none;
}
.footer-ql-icon {
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* サブリンク行 */
.footer-sub-row {
  background: #f0f2f5;
  padding: 16px 0;
}
.footer-sub-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-sub-links { display: flex; gap: 24px; }
.footer-sub-links a {
  font-size: .82rem;
  color: var(--color-text-sub);
  display: flex;
  align-items: center;
  gap: 5px;
}
.footer-sub-links a::before { content: "›"; color: var(--color-primary); }
.footer-sub-links a:hover { color: var(--color-primary); text-decoration: none; }
.footer-sns { display: flex; gap: 16px; }
.footer-sns-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--color-text-sub);
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  transition: var(--transition);
}
.footer-sns-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}
.sns-x {
  width: 16px; height: 16px;
  background: #000;
  border-radius: 3px;
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===== サイトマップフッター ===== */
.footer-sitemap-row {
  border-top: 1px solid var(--color-border);
  padding: 40px 0 36px;
  background: var(--color-bg-white);
}
.footer-sitemap-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: .12em;
  margin-bottom: 22px;
}
.footer-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 32px;
}
.footer-sitemap-heading {
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.footer-sitemap-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-sitemap-links a {
  font-size: .78rem;
  color: var(--color-text-sub);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-sitemap-links a:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.footer-ext-link::after {
  content: " ↗";
  font-size: .7rem;
  opacity: .65;
}
body.index-modern .footer-sitemap-row {
  background: #fff;
  border-color: #e1e5ea;
}
body.index-modern .footer-sitemap-label {
  color: #8a9ab0;
}
body.index-modern .footer-sitemap-heading {
  color: #1a2b3c;
  border-color: #e8edf2;
}
body.index-modern .footer-sitemap-links a {
  color: #5a6b7a;
}
body.index-modern .footer-sitemap-links a:hover {
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .footer-sitemap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-sitemap-grid { grid-template-columns: 1fr; }
}

/* ポリシーリンク行 */
.footer-policy-row {
  background: #f0f2f5;
  border-top: 1px solid #dde1e8;
  padding: 14px 0;
}
.footer-policy-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.footer-policy-links a {
  font-size: .78rem;
  color: var(--color-text-sub);
}
.footer-policy-links a:hover { color: var(--color-primary); text-decoration: none; }

/* ブランドバー */
.footer-brand-bar {
  background: var(--color-primary);
  padding: 16px 0;
}
.footer-brand-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-bar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
}
.footer-bar-logo:hover { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-bar-logo .logo-mark { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); }
.footer-bar-copy {
  font-size: .72rem;
  color: rgba(255,255,255,.65);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .col4 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .service-entry-grid { grid-template-columns: repeat(2, 1fr); }
  .vps-hero-entry { flex-direction: column; text-align: center; }
  .beginner-banner { flex-wrap: wrap; gap: 16px; }
  .beginner-banner-left { flex: 0 0 100%; }
  .quicknav-grid { grid-template-columns: repeat(2, 1fr); }
  .quicknav-card-wide  { grid-column: span 1; }
  .quicknav-card-third { grid-column: span 1; }
  .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .content-card { flex: 0 0 calc((100% - 20px) / 2); }
  .footer-accord-grid { grid-template-columns: 1fr; }
  .footer-ql-grid { grid-template-columns: repeat(2, 1fr); }
  .content-grid { grid-template-columns: 1fr; }
  .content-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .header-nav { display: none; }
  .hamburger  { display: flex; }
  .col2, .col3 { grid-template-columns: 1fr; }
  .col4 { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 1.4rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .quicknav-grid { grid-template-columns: 1fr; }
  .quicknav-card-wide, .quicknav-card-third { grid-column: span 1; }
  .quicknav-card { border-radius: var(--radius-md); }
  .section-title-center h2 { font-size: 1.2rem; }
  .trouble-tags { gap: 8px; }
  .content-card { flex: 0 0 calc(100% - 0px); }
  .content-grid, .content-grid-4 { grid-template-columns: 1fr; }
  .footer-ql-grid { grid-template-columns: 1fr; }
  .footer-sub-inner { flex-direction: column; align-items: flex-start; }
  .footer-brand-inner { flex-direction: column; align-items: flex-start; }
  .service-entry-grid { grid-template-columns: repeat(2, 1fr); }
  .manual-article-list { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== Index Modern Blue Refresh ===== */
body.index-modern {
  --color-primary: #075dcc;
  --color-primary-d: #064897;
  --color-primary-l: #eaf4ff;
  --color-accent: #12a3e8;
  --color-text: #102033;
  --color-text-sub: #5b6c82;
  --color-border: #d8e4f2;
  --color-bg: #f5f8fc;
  --color-bg-white: #ffffff;
  --color-warn: #d3511f;
  --color-warn-l: #fff3ed;
  --color-ok: #16865a;
  --color-ok-l: #edf9f4;
  --color-caution: #b66a00;
  --color-caution-l: #fff8e9;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --shadow-sm: 0 10px 24px rgba(13, 50, 94, .08);
  --shadow-md: 0 18px 46px rgba(13, 50, 94, .13);
  --transition: .2s ease;
  background:
    linear-gradient(180deg, #f8fbff 0%, #f4f8fd 42%, #ffffff 100%);
  color: var(--color-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: 0;
}

body.index-modern a {
  text-underline-offset: 3px;
}

body.index-modern .container {
  max-width: 1120px;
  padding: 0 24px;
}

body.index-modern .site-header {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(204, 220, 239, .75);
  box-shadow: 0 8px 28px rgba(12, 43, 83, .06);
  backdrop-filter: blur(16px);
}

body.index-modern .header-inner {
  height: 68px;
  gap: 28px;
}

body.index-modern .site-logo {
  color: var(--color-text);
  font-size: 1rem;
  letter-spacing: 0;
}

body.index-modern .logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #0b66df 0%, #12a3e8 100%);
  box-shadow: 0 10px 22px rgba(7, 93, 204, .24);
  letter-spacing: 0;
}

body.index-modern .header-nav {
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

body.index-modern .header-nav a {
  color: #4f6177;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .8rem;
  font-weight: 600;
}

body.index-modern .header-nav a:hover,
body.index-modern .header-nav a.active {
  background: var(--color-primary-l);
  border-color: #cfe4ff;
  color: var(--color-primary);
  text-decoration: none;
}

body.index-modern .hamburger {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: #fff;
}

body.index-modern .hamburger span {
  background: var(--color-primary);
}

/* ヘッダー横幅・折り返し対策 */
body.index-modern .container {
  max-width: 1200px;
}
body.index-modern .header-inner {
  gap: 16px;
}
body.index-modern .header-nav a {
  white-space: nowrap;
}

/* ===== お問い合わせセクション ===== */
.contact-cta-section {
  background: var(--color-bg-white);
  padding: 52px 0 56px;
  border-top: 1px solid var(--color-border);
}
.contact-cta-box {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: rgba(12, 163, 232, .04);
  padding: 36px 40px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.contact-cta-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.contact-cta-subtitle {
  font-size: .88rem;
  color: var(--color-text-sub);
  margin-bottom: 24px;
  line-height: 1.6;
}
.contact-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-panel {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact-panel-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: var(--color-primary-l);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  font-size: 1.5rem;
  color: var(--color-accent);
}
.contact-panel-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.contact-phone-num {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 6px;
}
.contact-hours {
  font-size: .78rem;
  color: var(--color-text-sub);
}
.contact-mail-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
  margin-top: 12px;
}
.contact-mail-btn:hover { background: var(--color-primary-d); color: #fff; text-decoration: none; }
.contact-cta-note {
  font-size: .75rem;
  color: var(--color-text-sub);
  margin-top: 16px;
  line-height: 1.6;
}
.contact-cta-note a { color: var(--color-accent); }

@media (max-width: 640px) {
  .contact-panels { grid-template-columns: 1fr; }
  .contact-cta-box { padding: 24px 20px; }
}

/* ===== お問い合わせ前チェック（改修版） ===== */
.contact-check-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.contact-check-link {
  font-size: .95rem;
  font-weight: 700;
  color: var(--replica-blue, #1a6fd4);
  text-decoration: none;
}
.contact-check-link:hover { text-decoration: underline; }
.contact-check-desc {
  font-size: .83rem;
  color: var(--color-text-sub);
  margin: 4px 0 0 32px;
  line-height: 1.6;
}
.contact-cta-footer {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.contact-cta-footer-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
.contact-cta-footer-sub {
  font-size: .84rem;
  color: var(--color-text-sub);
  margin-bottom: 18px;
}
.contact-cta-btn {
  display: inline-block;
  padding: 12px 40px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}
.contact-cta-btn:hover { background: var(--color-primary-d); color: #fff; text-decoration: none; }

body.index-modern .mobile-nav {
  top: 68px;
  background: rgba(255, 255, 255, .98);
}

body.index-modern .page-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 96px;
  background:
    linear-gradient(135deg, #063f93 0%, #075dcc 52%, #0896d9 100%);
  text-align: center;
  isolation: isolate;
}

body.index-modern .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .12));
}

body.index-modern .page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 112px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16));
}

body.index-modern .page-hero .container {
  position: relative;
  z-index: 1;
}

body.index-modern .page-hero h1 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

body.index-modern .page-hero h1::before {
  content: "SUPPORT PORTAL";
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .86);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

body.index-modern .page-hero p {
  color: rgba(255, 255, 255, .86);
  font-size: 1.02rem;
  opacity: 1;
}

body.index-modern .search-wrap {
  position: relative;
  max-width: 780px;
  margin: 30px auto 0;
}

body.index-modern .search-box {
  min-width: 0;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 26px 56px rgba(3, 32, 74, .24);
}

body.index-modern .search-box input {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 18px 22px;
  font-size: 1rem;
}

body.index-modern .search-box input::placeholder {
  color: #8795a8;
}

body.index-modern .search-box button {
  min-width: 112px;
  border-radius: 0 7px 7px 0;
  background: #053f8e;
  font-weight: 800;
}

body.index-modern .search-box button:hover {
  background: #032f6e;
}

body.index-modern .search-results {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 10px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  text-align: left;
}

body.index-modern .search-result-item {
  padding: 14px 18px;
}

body.index-modern .search-filters {
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

body.index-modern .search-filter-label {
  color: rgba(255, 255, 255, .76);
  font-weight: 700;
}

body.index-modern .search-filter-radio {
  min-height: 34px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .92);
  font-weight: 700;
}

body.index-modern .search-filter-radio:hover,
body.index-modern .search-filter-radio:has(input:checked) {
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .18);
}

body.index-modern .search-filter-radio input[type="radio"]:checked + .radio-dot {
  box-shadow: inset 0 0 0 3px #075dcc;
}

body.index-modern .search-privacy {
  max-width: 680px;
  margin: 12px auto 0;
  color: rgba(255, 255, 255, .66);
  font-size: .76rem;
}

body.index-modern .main-content {
  position: relative;
  z-index: 2;
  margin-top: -42px;
  padding: 0 0 72px;
}

body.index-modern .maint-section {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(214, 227, 243, .95);
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow-md);
}

body.index-modern .maint-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #38506d;
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
}

body.index-modern .maint-section-heading::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f3a524;
  box-shadow: 0 0 0 4px rgba(243, 165, 36, .16);
}

body.index-modern .maint-compact {
  gap: 16px;
  margin-bottom: 0;
  padding: 14px 16px;
  border: 1px solid #f5d28d;
  border-left: 4px solid #e18a00;
  border-radius: 8px;
  background: linear-gradient(90deg, #fff8e8 0%, #ffffff 72%);
}

body.index-modern .maint-compact-badge {
  border-radius: 6px;
  background: #e18a00;
}

body.index-modern .maint-compact-text,
body.index-modern .notice-compact-text,
body.index-modern .cat-link,
body.index-modern .content-card-desc {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.index-modern .maint-compact-link,
body.index-modern .notice-compact-all,
body.index-modern .btn-cta,
body.index-modern .footer-accord-btn,
body.index-modern .footer-ql-item {
  border-radius: 8px;
}

body.index-modern .notice-compact {
  border-color: #d7e4f3;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

body.index-modern .notice-compact-header {
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border-bottom-color: #e4edf7;
}

body.index-modern .notice-compact-header > span[style] {
  display: none;
}

body.index-modern .notice-compact-title {
  text-align: left;
  color: var(--color-text);
  font-size: .98rem;
}

body.index-modern .notice-compact-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-right: 9px;
  border-radius: 4px;
  background: var(--color-primary);
  vertical-align: -2px;
}

body.index-modern .notice-compact-all {
  border-color: #cfe0f3;
  background: #f7fbff;
  color: var(--color-primary);
  font-weight: 700;
}

body.index-modern .notice-compact-item {
  gap: 12px;
  padding: 13px 18px;
  border-bottom-color: #edf3fa;
}

body.index-modern .notice-compact-item:hover {
  background: #f6fbff;
}

body.index-modern .notice-compact-date {
  color: #4c5f76;
}

body.index-modern .notice-compact-arrow {
  color: var(--color-primary);
}

body.index-modern .notice-compact-footer {
  background: #f9fbfe;
  border-top-color: #edf3fa;
}

body.index-modern .notice-close-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-l);
}

body.index-modern .beginner-banner {
  position: relative;
  overflow: hidden;
  gap: 26px;
  margin-bottom: 26px;
  padding: 24px 28px;
  border: 1px solid #b9d8ff;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #f1f8ff 0%, #ffffff 68%);
  box-shadow: var(--shadow-sm);
}

body.index-modern .beginner-banner::after {
  content: "";
  position: absolute;
  right: -64px;
  top: 0;
  width: 260px;
  height: 100%;
  background: linear-gradient(90deg, rgba(7, 93, 204, 0), rgba(7, 93, 204, .08));
  transform: skewX(-18deg);
  transform-origin: top right;
}

body.index-modern .beginner-banner-left,
body.index-modern .beginner-banner-mid,
body.index-modern .beginner-banner-right {
  position: relative;
  z-index: 1;
}

body.index-modern .beginner-banner-icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2f1ff;
  font-size: 1.9rem;
}

body.index-modern .beginner-banner-catch {
  color: var(--color-primary);
  font-weight: 800;
}

body.index-modern .beginner-banner-title {
  font-size: 1.1rem;
}

body.index-modern .beginner-banner-feature {
  font-weight: 700;
}

body.index-modern .btn-cta {
  background: var(--color-primary);
  box-shadow: 0 12px 22px rgba(7, 93, 204, .20);
}

body.index-modern .btn-cta:hover {
  background: var(--color-primary-d);
}

body.index-modern .quicknav-section {
  margin-bottom: 48px;
}

body.index-modern .quicknav-grid {
  gap: 14px;
}

body.index-modern .quicknav-card {
  min-height: 78px;
  align-items: center;
  padding: 18px;
  border: 1px solid #d8e4f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(14, 45, 85, .06);
}

body.index-modern .quicknav-card:hover {
  border-color: #9ec8fb;
  background: #f8fbff;
  box-shadow: 0 16px 34px rgba(14, 45, 85, .10);
  transform: translateY(-2px);
}

body.index-modern .quicknav-icon {
  width: 42px;
  height: 42px;
  border-color: #cbe3ff;
  border-radius: 8px;
  background: #eaf4ff;
}

body.index-modern .quicknav-label {
  color: var(--color-text);
  font-size: .9rem;
}

body.index-modern .section-title-center {
  margin-bottom: 34px;
}

body.index-modern .section-title-center h2 {
  color: var(--color-text);
  font-size: clamp(1.45rem, 2.8vw, 1.9rem);
  letter-spacing: 0;
}

body.index-modern .section-title-center .title-bar {
  width: 54px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

body.index-modern .cat-section,
body.index-modern .content-section {
  border-color: #e1ebf6;
  background: #fff;
}

body.index-modern .cat-section {
  padding: 58px 0 62px;
}

body.index-modern .cat-grid {
  gap: 18px;
}

body.index-modern .cat-card {
  border-color: #dce7f4;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(14, 45, 85, .05);
  transition: var(--transition);
}

body.index-modern .cat-card:hover {
  border-color: #a9cffc;
  box-shadow: 0 16px 34px rgba(14, 45, 85, .10);
  transform: translateY(-2px);
}

body.index-modern .cat-card-header {
  min-height: 54px;
  padding: 14px 18px;
  background: #f8fbff;
}

body.index-modern .cat-card-header:hover {
  background: var(--color-primary-l);
  text-decoration: none;
}

body.index-modern .cat-card-name {
  color: #102033;
  font-size: .96rem;
}

body.index-modern .cat-card-links {
  padding: 12px 18px 16px;
  gap: 4px;
}

body.index-modern .cat-link {
  min-height: 30px;
  color: #30445d;
}

body.index-modern .trouble-section {
  padding: 56px 0 60px;
  border-color: #dce9f7;
  background:
    linear-gradient(180deg, #f1f7ff 0%, #f8fbff 100%);
}

body.index-modern .trouble-tags {
  gap: 10px;
}

body.index-modern .trouble-tag {
  border-color: #cbdcef;
  border-radius: 8px;
  color: #2b415c;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(14, 45, 85, .04);
}

body.index-modern .trouble-tag:hover {
  border-color: #91bff5;
  background: #fff;
  box-shadow: 0 12px 24px rgba(14, 45, 85, .08);
}

body.index-modern .content-section {
  padding: 58px 0 64px;
}

body.index-modern .content-section[style] {
  background: #f6f9fd !important;
  border-top-color: #dde9f7 !important;
}

body.index-modern .content-section-desc {
  color: var(--color-text-sub);
  margin-bottom: 34px;
}

body.index-modern .content-card {
  border-color: #dce7f4;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(14, 45, 85, .05);
  transition: var(--transition);
  text-decoration: none;
}

body.index-modern .content-card:hover {
  border-color: #a9cffc;
  box-shadow: 0 18px 38px rgba(14, 45, 85, .12);
  transform: translateY(-2px);
  text-decoration: none;
}

body.index-modern .content-card-visual {
  height: 150px;
}

body.index-modern .content-card-visual-bg1 {
  background: linear-gradient(135deg, #075dcc 0%, #12a3e8 100%);
}

body.index-modern .content-card-visual-bg2 {
  background: linear-gradient(135deg, #1167d8 0%, #29b8a3 100%);
}

body.index-modern .content-card-visual-bg3 {
  background: linear-gradient(135deg, #16865a 0%, #58b46a 100%);
}

body.index-modern .content-card-visual-bg4 {
  background: linear-gradient(135deg, #395fd6 0%, #7d67d8 100%);
}

body.index-modern .content-card-visual-title {
  letter-spacing: 0;
}

body.index-modern .content-card-body {
  padding: 18px 20px 22px;
}

body.index-modern .footer-new {
  background: #0b2342;
}

body.index-modern .footer-accord-row {
  background: #102b4d;
  border-top-color: rgba(255, 255, 255, .08);
}

body.index-modern .footer-accord-btn,
body.index-modern .footer-accord-body {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

body.index-modern .footer-accord-btn:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(136, 194, 255, .5);
}

body.index-modern .footer-accord-icon .acc-label,
body.index-modern .footer-accord-link {
  color: rgba(255, 255, 255, .72);
}

body.index-modern .footer-accord-link:hover {
  color: #fff;
}

body.index-modern .footer-ql-row,
body.index-modern .footer-policy-row {
  border-color: rgba(255, 255, 255, .08);
  background: #0b2342;
}

body.index-modern .footer-ql-item,
body.index-modern .footer-policy-links a {
  color: rgba(255, 255, 255, .72);
}

body.index-modern .footer-ql-item:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

body.index-modern .footer-brand-bar {
  background: #071a31;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

body.index-modern .footer-bar-copy {
  color: rgba(255, 255, 255, .58);
}

body.index-modern :focus-visible {
  outline: 3px solid rgba(18, 163, 232, .42);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  body.index-modern .page-hero {
    padding: 62px 0 82px;
  }

  body.index-modern .main-content {
    margin-top: -32px;
  }

  body.index-modern .maint-compact {
    align-items: flex-start;
    flex-direction: column;
  }

  body.index-modern .maint-compact-link {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  body.index-modern .container {
    padding: 0 18px;
  }

  body.index-modern .header-inner {
    height: 64px;
  }

  body.index-modern .mobile-nav {
    top: 64px;
  }

  body.index-modern .site-logo {
    font-size: .94rem;
  }

  body.index-modern .page-hero {
    padding: 48px 0 72px;
    text-align: left;
  }

  body.index-modern .page-hero h1::before {
    margin-left: 0;
  }

  body.index-modern .page-hero p {
    font-size: .94rem;
  }

  body.index-modern .search-wrap {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
  }

  body.index-modern .search-box {
    width: 100%;
    flex-direction: column;
  }

  body.index-modern .search-box input {
    min-height: 58px;
  }

  body.index-modern .search-box button {
    min-width: 0;
    width: 100%;
    border-radius: 0 0 7px 7px;
    padding: 13px 16px;
  }

  body.index-modern .search-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
  }

  body.index-modern .search-filter-label {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.index-modern .search-filter-radio {
    justify-content: flex-start;
    min-width: 0;
    padding: 6px 8px;
    font-size: .75rem;
  }

  body.index-modern .search-privacy {
    overflow-wrap: anywhere;
  }

  body.index-modern .main-content {
    margin-top: -24px;
  }

  body.index-modern .notice-compact-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.index-modern .notice-compact-all {
    align-self: flex-start;
  }

  body.index-modern .notice-compact-item {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  body.index-modern .notice-compact-arrow {
    display: none;
  }

  body.index-modern .notice-compact-text {
    grid-column: 1 / -1;
  }

  body.index-modern .beginner-banner {
    padding: 20px;
  }

  body.index-modern .beginner-banner::after {
    display: none;
  }

  body.index-modern .beginner-banner-right,
  body.index-modern .btn-cta {
    width: 100%;
    justify-content: center;
  }

  body.index-modern .quicknav-card {
    min-height: 70px;
  }

  body.index-modern .trouble-tag {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* ===== Sakura Layout Replica / XServer Blue Tone ===== */
body.index-modern {
  --replica-blue: #1888d5;
  --replica-blue-dark: #07579d;
  --replica-blue-soft: #eaf6ff;
  --replica-blue-pale: #dff1ff;
  --replica-cyan: #24b7d7;
  --replica-green: #159b7a;
  --replica-text: #202936;
  --replica-muted: #687586;
  --replica-border: #d4d8dd;
  --replica-line: #1688d4;
  --replica-width: 1000px;
  background: #fff;
  color: var(--replica-text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
}

body.index-modern .container {
  max-width: 1180px;
}

body.index-modern .site-header {
  position: relative;
  height: 68px;
  border-top: 3px solid var(--replica-blue);
  border-bottom: 1px solid #edf0f4;
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
  backdrop-filter: none;
}

body.index-modern .header-inner {
  height: 65px;
}

body.index-modern .site-logo {
  gap: 9px;
  color: #7a7d84;
  font-size: 1.08rem;
  font-weight: 700;
}

body.index-modern .site-logo:hover {
  color: var(--replica-blue-dark);
}

body.index-modern .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 5px 5px 5px 14px;
  background: linear-gradient(135deg, var(--replica-blue) 0 50%, #cfd5dc 50% 100%);
  box-shadow: none;
  color: #fff;
  font-size: .65rem;
}


body.index-modern .header-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1d2633;
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
}

body.index-modern .header-nav a:hover {
  background: transparent;
  color: var(--replica-blue);
}

body.index-modern .header-nav a::before {
  display: none;
}
body.index-modern .nav-search {
  width: 22px;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
body.index-modern .nav-search::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 3px solid var(--replica-blue);
  border-radius: 50%;
  box-shadow: 8px 8px 0 -5px var(--replica-blue);
}

body.index-modern .hamburger {
  border-color: #d8e6f3;
}

body.index-modern .mobile-nav {
  top: 68px;
}

body.index-modern .page-hero {
  min-height: 288px;
  padding: 34px 0 36px;
  overflow: hidden;
  background: #fff;
  text-align: center;
}

body.index-modern .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(56deg, rgba(24, 136, 213, .22) 0 12%, transparent 12% 100%) left bottom / 50% 100% no-repeat,
    linear-gradient(124deg, transparent 0 69%, rgba(24, 136, 213, .18) 69% 82%, transparent 82% 100%) left top / 50% 100% no-repeat,
    linear-gradient(304deg, rgba(24, 136, 213, .20) 0 12%, transparent 12% 100%) right bottom / 50% 100% no-repeat,
    linear-gradient(236deg, transparent 0 68%, rgba(24, 136, 213, .15) 68% 82%, transparent 82% 100%) right top / 50% 100% no-repeat,
    linear-gradient(90deg, #f5fbff 0%, #fff 26%, #fff 74%, #f5fbff 100%);
  mask-image: none;
}

body.index-modern .page-hero::after {
  display: none;
}

body.index-modern .page-hero h1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 24px;
  color: #30343b;
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: .03em;
}

body.index-modern .page-hero h1::before {
  display: none;
  content: none;
}

body.index-modern .hero-title-icon {
  position: relative;
  width: 34px;
  height: 42px;
  border-radius: 5px;
  background: var(--replica-blue);
  flex-shrink: 0;
}

body.index-modern .hero-title-icon::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  width: 21px;
  height: 21px;
  border: 4px solid var(--replica-blue);
  border-radius: 50%;
  background: #fff;
}

body.index-modern .hero-title-icon::after {
  content: "";
  position: absolute;
  left: 37px;
  top: 39px;
  width: 15px;
  height: 4px;
  border-radius: 4px;
  background: var(--replica-blue);
  transform: rotate(45deg);
  transform-origin: left center;
}

body.index-modern .page-hero p {
  display: none;
}

body.index-modern .page-hero .search-privacy {
  display: block;
}

body.index-modern .search-wrap {
  max-width: 835px;
  margin: 0 auto;
  padding: 16px 18px 18px;
  border-radius: 4px;
  background: var(--replica-blue);
  color: #fff;
}

body.index-modern .search-box {
  position: relative;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
}

body.index-modern .search-box input {
  min-height: 54px;
  padding: 0 58px 0 16px;
  color: var(--replica-text);
  font-size: .9rem;
}

body.index-modern .search-box button {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 26px;
  min-width: 0;
  height: 26px;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  color: transparent;
  transform: translateY(-50%);
}

body.index-modern .search-box button::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--replica-blue);
  border-radius: 50%;
}

body.index-modern .search-box button::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 17px;
  width: 10px;
  height: 3px;
  border-radius: 3px;
  background: var(--replica-blue);
  transform: rotate(45deg);
}

body.index-modern .search-box button:hover {
  background: transparent;
}

body.index-modern .search-filters {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 16px;
}

body.index-modern .search-filter-label,
body.index-modern .search-privacy {
  color: #fff;
}

body.index-modern .search-filter-label {
  margin-right: 0;
  font-size: .82rem;
  font-weight: 700;
}

body.index-modern .search-filter-radio {
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}

body.index-modern .search-filter-radio:hover,
body.index-modern .search-filter-radio:has(input:checked) {
  border-color: #fff;
  background: rgba(255, 255, 255, .14);
}

body.index-modern .search-filter-radio input[type="radio"]:checked + .radio-dot {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--replica-blue);
}

body.index-modern .search-privacy {
  margin: 13px 0 0;
  max-width: none;
  text-align: left;
  font-size: .79rem;
  font-weight: 700;
}

body.index-modern .search-privacy a {
  color: #fff;
}

body.index-modern .search-results {
  top: calc(100% + 2px);
  margin-top: 0;
  border-color: #b7d9ef;
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(0, 50, 100, .14);
}

body.index-modern .main-content {
  margin-top: 0;
  padding: 40px 0 0;
  background: #fff;
}

body.index-modern .main-content > .container {
  display: flex;
  flex-direction: column;
}

body.index-modern .notice-compact,
body.index-modern .maint-section,
body.index-modern .beginner-banner,
body.index-modern .quicknav-section {
  width: 100%;
  max-width: var(--replica-width);
  margin-left: auto;
  margin-right: auto;
}

body.index-modern .notice-compact {
  order: 1;
  margin-bottom: 22px;
  border: 1px solid var(--replica-border);
  border-radius: 4px;
  box-shadow: none;
}

body.index-modern .notice-compact-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 48px;
  padding: 9px 18px;
  background: var(--replica-blue-pale);
  border-bottom: 1px solid var(--replica-border);
}

body.index-modern .notice-compact-header > span[style] {
  display: none;
}

body.index-modern .notice-compact-title {
  text-align: center;
  color: var(--replica-text);
  font-size: 1rem;
  font-weight: 700;
}

body.index-modern .notice-compact-title::before {
  display: none;
}

body.index-modern .notice-compact-all {
  position: absolute;
  right: 18px;
  top: 50%;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--replica-blue);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  transform: translateY(-50%);
}

body.index-modern .notice-compact-all:hover {
  background: var(--replica-blue-dark);
  color: #fff;
}

body.index-modern .notice-compact-list {
  background: #fff;
}

body.index-modern .notice-compact-item {
  min-height: 52px;
  padding: 14px 17px;
  border-bottom-color: #eef1f5;
}

body.index-modern .notice-compact-item:hover {
  background: #f7fbff;
}

body.index-modern .notice-compact-date {
  color: #102033;
  font-size: .98rem;
}

body.index-modern .notice-compact-arrow,
body.index-modern .cat-link::before,
body.index-modern .footer-accord-link::before {
  color: var(--replica-blue);
}

body.index-modern .notice-compact-text {
  color: #182638;
  font-size: .94rem;
  line-height: 1.65;
}

body.index-modern .notice-compact-text:hover {
  color: var(--replica-blue);
}

body.index-modern .notice-compact-footer,
body.index-modern .notice-close-btn {
  display: none;
}

body.index-modern .maint-section {
  order: 2;
  display: grid;
  grid-template-columns: 180px 1fr;
  margin-bottom: 40px;
  padding: 0;
  border: 2px solid var(--replica-blue);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

body.index-modern .maint-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px;
  border-right: 2px solid var(--replica-blue);
  color: var(--replica-blue);
  font-size: .98rem;
  font-weight: 700;
  text-align: center;
}

body.index-modern .maint-section-heading::before {
  display: none;
}

body.index-modern .maint-compact {
  min-height: 58px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  min-width: 0;
}

body.index-modern .maint-compact-badge {
  position: relative;
  padding: 0 0 0 18px;
  border-radius: 0;
  background: transparent;
  color: var(--replica-text);
  font-size: .94rem;
}

body.index-modern .maint-compact-badge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--replica-blue);
  transform: translateY(-50%);
}

body.index-modern .maint-compact-link {
  border: 0;
  color: var(--replica-blue);
  font-size: .88rem;
  font-weight: 700;
}

body.index-modern .maint-compact-text {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.index-modern .maint-compact-link:hover {
  background: transparent;
  color: var(--replica-blue-dark);
}

body.index-modern .beginner-banner {
  order: 3;
  margin-bottom: 40px;
  padding: 10px;
  border: 1px solid var(--replica-green);
  border-radius: 4px;
  background: #eaf8f4;
  box-shadow: none;
}

body.index-modern .beginner-banner::after {
  display: none;
}

body.index-modern .beginner-banner-left {
  flex: 0 0 38%;
}

body.index-modern .beginner-banner-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
}

body.index-modern .beginner-banner-icon::before,
body.index-modern .beginner-banner-icon::after {
  content: "";
  position: absolute;
  background: var(--replica-blue);
}

body.index-modern .beginner-banner-icon::before {
  left: 9px;
  top: 8px;
  width: 12px;
  height: 26px;
  transform: skewY(30deg);
}

body.index-modern .beginner-banner-icon::after {
  left: 21px;
  top: 8px;
  width: 12px;
  height: 26px;
  background: #e0a600;
  transform: skewY(-30deg);
}

body.index-modern .beginner-banner-catch {
  display: inline-block;
  margin-bottom: 2px;
  border-bottom: 3px dotted #e0a600;
  color: #142338;
  font-size: .82rem;
  font-weight: 500;
}

body.index-modern .beginner-banner-title {
  color: #142338;
  font-size: 1.52rem;
  font-weight: 500;
  line-height: 1.45;
}

body.index-modern .beginner-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--replica-green);
  color: #fff;
  font-size: .68rem;
}

body.index-modern .beginner-banner-feature {
  color: #142338;
  font-size: 1rem;
}

body.index-modern .btn-cta {
  min-width: 255px;
  justify-content: center;
  padding: 15px 22px;
  border-radius: 4px;
  background: var(--replica-blue);
  box-shadow: none;
  font-size: .96rem;
}

body.index-modern .btn-cta:hover {
  background: var(--replica-blue-dark);
}

body.index-modern .quicknav-section {
  order: 4;
  margin-bottom: 92px;
}

body.index-modern .quicknav-grid {
  gap: 10px 14px;
}

body.index-modern .quicknav-card {
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid var(--replica-blue);
  border-radius: 4px;
  background: #fffafd;
  box-shadow: none;
}

body.index-modern .quicknav-card:hover {
  border-color: var(--replica-blue-dark);
  background: #f3faff;
  box-shadow: none;
  color: var(--replica-blue-dark);
  transform: none;
}

body.index-modern .quicknav-icon,
body.index-modern .footer-ql-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(24, 136, 213, .55);
  border-radius: 50%;
  background: #fff;
  color: var(--replica-blue);
}

body.index-modern .quicknav-icon::before,
body.index-modern .footer-ql-icon::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--replica-blue);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

body.index-modern .icon-payment::before { content: "¥"; }
body.index-modern .icon-member::before { content: "▤"; }
body.index-modern .icon-faq::before { content: "?"; }
body.index-modern .icon-trouble::before { content: "◆"; }
body.index-modern .icon-notice::before { content: "!"; }
body.index-modern .icon-maint::before { content: "•"; font-size: 2rem; }
body.index-modern .icon-mail::before { content: "✉"; font-size: 1.2rem; }
body.index-modern .icon-login::before { content: "■"; font-size: 1rem; }
body.index-modern .icon-contact::before {
  content: "";
  inset: 8px;
  display: block;
  background:
    center / 26px 26px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 10.6a2.8 2.8 0 0 1 2.8-2.8h10a2.8 2.8 0 0 1 2.8 2.8v5.8a2.8 2.8 0 0 1-2.8 2.8h-6.2l-4.8 3v-3H11a2.8 2.8 0 0 1-2.8-2.8v-5.8Z'/%3E%3Cpath d='M11.6 12.8h8.8'/%3E%3Cpath d='M11.6 16h6.1'/%3E%3C/svg%3E");
}

body.index-modern .quicknav-label {
  color: var(--replica-text);
  font-size: .98rem;
  font-weight: 500;
}

body.index-modern .quicknav-arrow,
body.index-modern .quicknav-ext {
  color: var(--replica-blue);
  font-size: 1.3rem;
  font-weight: 800;
}

body.index-modern .section-title-center {
  margin-bottom: 40px;
}

body.index-modern .section-title-center h2 {
  color: #2e3238;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: .04em;
}

body.index-modern .section-title-center .title-bar {
  width: 58px;
  height: 2px;
  background: var(--replica-blue);
}

body.index-modern .cat-section {
  padding: 0 0 64px;
  border: 0;
  background: #fff;
}

body.index-modern .cat-section .container,
body.index-modern .trouble-section .container,
body.index-modern .content-section .container {
  max-width: calc(var(--replica-width) + 40px);
}

body.index-modern .cat-grid {
  gap: 34px 16px;
}

body.index-modern .cat-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.index-modern .cat-card:hover {
  box-shadow: none;
  transform: none;
}

body.index-modern .cat-card-header {
  min-height: 72px;
  padding: 0 22px;
  border: 1px solid var(--replica-border);
  border-radius: 4px;
  background: #f8f8f8;
}

body.index-modern .cat-card-header:hover {
  background: #f3faff;
  text-decoration: none;
}

body.index-modern .cat-card-name {
  color: #111d2c;
  font-size: 1.08rem;
  font-weight: 700;
}

body.index-modern .cat-card-arrow {
  color: var(--replica-blue);
  font-size: 1.4rem;
}

body.index-modern .cat-card-links {
  padding: 14px 14px 0;
  gap: 6px;
}

body.index-modern .cat-link {
  min-height: 25px;
  padding: 0;
  color: #1d2734;
  font-size: .98rem;
}

body.index-modern .cat-link:hover {
  color: var(--replica-blue);
  padding-left: 0;
}

body.index-modern .trouble-section {
  padding: 64px 0;
  border: 0;
  background: #f8fbff;
}

body.index-modern .trouble-tags {
  justify-content: flex-start;
  gap: 12px;
}

body.index-modern .trouble-tag {
  border: 1px solid #c8d8e6;
  border-radius: 4px;
  background: #fff;
  color: #263345;
  box-shadow: none;
}

body.index-modern .trouble-tag:hover {
  border-color: var(--replica-blue);
  color: var(--replica-blue);
  box-shadow: none;
}

body.index-modern .content-section {
  padding: 64px 0;
  border: 0;
  background: #fff;
}

body.index-modern .content-section[style] {
  background: #f7fbff !important;
  border-top: 0 !important;
}

body.index-modern .content-grid,
body.index-modern .content-grid-4 {
  gap: 16px;
}

body.index-modern .content-card {
  border: 1px solid var(--replica-border);
  border-radius: 4px;
  box-shadow: none;
}

body.index-modern .content-card:hover {
  border-color: var(--replica-blue);
  box-shadow: none;
  transform: none;
}

body.index-modern .content-card-visual {
  height: 132px;
  background: var(--replica-blue-soft);
}

body.index-modern .content-card-visual-bg1,
body.index-modern .content-card-visual-bg2,
body.index-modern .content-card-visual-bg3,
body.index-modern .content-card-visual-bg4 {
  background: linear-gradient(135deg, #eaf6ff 0%, #d6eeff 100%);
}

body.index-modern .content-card-visual-title {
  color: var(--replica-blue-dark);
  text-shadow: none;
  font-size: 1.35rem;
}

body.index-modern .content-card-visual-icon {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--replica-blue);
  border-radius: 50%;
  opacity: 1;
}

body.index-modern .content-card-visual-icon::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--replica-blue);
  font-size: 1.25rem;
  font-weight: 800;
}

body.index-modern .icon-community::before,
body.index-modern .icon-guide::before,
body.index-modern .icon-ai::before,
body.index-modern .icon-vps::before,
body.index-modern .icon-business::before,
body.index-modern .icon-domain::before,
body.index-modern .icon-ssl::before {
  content: "";
  inset: 6px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}

body.index-modern .icon-community::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='11.2' r='3.1'/%3E%3Cpath d='M10.6 22.2c1.5-2.8 3.6-4.1 5.4-4.1s3.9 1.3 5.4 4.1'/%3E%3Cpath d='M7.8 16a8.2 8.2 0 0 1 14.3-5.3'/%3E%3Cpath d='M24.2 16a8.2 8.2 0 0 1-14.3 5.3'/%3E%3Ccircle cx='7.6' cy='16' r='1.2' fill='%2307589d' stroke='none'/%3E%3Ccircle cx='24.4' cy='16' r='1.2' fill='%2307589d' stroke='none'/%3E%3C/svg%3E");
}

body.index-modern .icon-guide::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4.6 8.9 11.9v9.2L16 27V4.6Z' fill='%2319a05d'/%3E%3Cpath d='M16 4.6 23.1 11.9v9.2L16 27V4.6Z' fill='%23e0b400'/%3E%3Cpath d='M16 4.6 8.9 11.9v9.2L16 27l7.1-5.9v-9.2L16 4.6Z' fill='none' stroke='%2307589d' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.index-modern .icon-ai::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='5.8'/%3E%3Cpath d='M16 4.5v3.1M16 24.4v3.1M4.5 16h3.1M24.4 16h3.1M7.8 7.8l2.2 2.2M22 22l2.2 2.2M24.2 7.8 22 10M10 22l-2.2 2.2'/%3E%3Ccircle cx='16' cy='16' r='1.4' fill='%2307589d' stroke='none'/%3E%3Cpath d='M12.1 18.3 14.5 14.7 17.4 16.3 20 13.2'/%3E%3Ccircle cx='12.1' cy='18.3' r='1.1' fill='%2307589d' stroke='none'/%3E%3Ccircle cx='14.5' cy='14.7' r='1.1' fill='%2307589d' stroke='none'/%3E%3Ccircle cx='17.4' cy='16.3' r='1.1' fill='%2307589d' stroke='none'/%3E%3Ccircle cx='20' cy='13.2' r='1.1' fill='%2307589d' stroke='none'/%3E%3C/svg%3E");
}

body.index-modern .icon-vps::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7.4' width='18' height='6.4' rx='1.6'/%3E%3Crect x='7' y='18.2' width='18' height='6.4' rx='1.6'/%3E%3Ccircle cx='11' cy='10.6' r='1.1' fill='%2307589d' stroke='none'/%3E%3Ccircle cx='11' cy='21.4' r='1.1' fill='%2307589d' stroke='none'/%3E%3Cpath d='M15 10.6h6.4M15 21.4h6.4'/%3E%3C/svg%3E");
}

body.index-modern .icon-business::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='6.5' width='14' height='18.8' rx='1.6'/%3E%3Cpath d='M13 25.3V21h6v4.3M13 11h2.2M16 11h2.2M19 11h2.2M13 15h2.2M16 15h2.2M19 15h2.2'/%3E%3C/svg%3E");
}

body.index-modern .icon-domain::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='9.2'/%3E%3Cpath d='M6.8 16h18.4M16 6.8c3 2.7 4.5 5.8 4.5 9.2S19 22.5 16 25.2M16 6.8c-3 2.7-4.5 5.8-4.5 9.2s1.5 6.5 4.5 9.2M10 10.4c1.7 1 3.8 1.6 6 1.6s4.3-.6 6-1.6M10 21.6c1.7-1 3.8-1.6 6-1.6s4.3.6 6 1.6'/%3E%3C/svg%3E");
}

body.index-modern .icon-ssl::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 5.6 23.6 8.7v6.7c0 4.9-3 8.3-7.6 10.9-4.6-2.6-7.6-6-7.6-10.9V8.7L16 5.6Z'/%3E%3Cpath d='m12.2 16.3 2.4 2.4 5.2-5.2'/%3E%3C/svg%3E");
}

body.index-modern .footer-new,
body.index-modern .footer-accord-row,
body.index-modern .footer-ql-row,
body.index-modern .footer-policy-row,
body.index-modern .footer-brand-bar {
  background: #fff;
  color: var(--replica-text);
}

body.index-modern .footer-new {
  border-top: 1px solid var(--replica-border);
}

body.index-modern .footer-accord-row,
body.index-modern .footer-ql-row,
body.index-modern .footer-policy-row {
  border-color: #e1e5ea;
}

body.index-modern .footer-accord-btn,
body.index-modern .footer-accord-body {
  border-color: var(--replica-border);
  background: #f8f8f8;
  color: var(--replica-text);
}

body.index-modern .footer-accord-btn:hover,
body.index-modern .footer-ql-item:hover {
  background: #f3faff;
  color: var(--replica-blue);
}

body.index-modern .footer-accord-icon .acc-label,
body.index-modern .footer-accord-link,
body.index-modern .footer-ql-item,
body.index-modern .footer-policy-links a {
  color: #354254;
}

body.index-modern .footer-brand-bar {
  border-top: 1px solid #e1e5ea;
}

body.index-modern .footer-bar-logo {
  color: #707782;
}

body.index-modern .footer-bar-copy {
  color: #7b8795;
}

body.index-modern :focus-visible {
  outline: 3px solid rgba(24, 136, 213, .32);
  outline-offset: 3px;
}

@media (max-width: 1000px) {
  body.index-modern .header-nav {
    display: none;
  }

  body.index-modern .hamburger {
    display: flex;
  }

  body.index-modern .main-content {
    padding-top: 36px;
  }

  body.index-modern .maint-section {
    grid-template-columns: 150px 1fr;
  }

  body.index-modern .beginner-banner {
    align-items: stretch;
  }

  body.index-modern .beginner-banner-left {
    flex: 0 0 100%;
  }
}

@media (max-width: 640px) {
  body.index-modern .site-header {
    height: 66px;
  }

  body.index-modern .header-inner {
    height: 63px;
  }

  body.index-modern .mobile-nav {
    top: 66px;
  }

  body.index-modern .page-hero {
    min-height: 0;
    padding: 22px 0 28px;
    text-align: center;
  }

  body.index-modern .page-hero::before {
    background:
      linear-gradient(52deg, rgba(24, 136, 213, .18) 0 18%, transparent 18% 100%) left top / 100% 96px no-repeat,
      linear-gradient(128deg, transparent 0 70%, rgba(24, 136, 213, .12) 70% 100%) right top / 100% 120px no-repeat,
      #fff;
  }

  body.index-modern .page-hero h1 {
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    max-width: 100%;
    font-size: 1.56rem;
    line-height: 1.25;
    white-space: normal;
  }

  body.index-modern .hero-title-icon {
    width: 24px;
    height: 30px;
  }

  body.index-modern .hero-title-icon::before {
    left: 14px;
    top: 16px;
    width: 15px;
    height: 15px;
    border-width: 3px;
  }

  body.index-modern .hero-title-icon::after {
    left: 27px;
    top: 28px;
    width: 10px;
    height: 3px;
  }

  body.index-modern .search-wrap {
    padding: 14px;
    border-radius: 4px;
  }

  body.index-modern .search-box {
    display: block;
  }

  body.index-modern .search-box input {
    min-height: 56px;
    padding-right: 52px;
  }

  body.index-modern .search-box button {
    width: 26px;
    height: 26px;
  }

  body.index-modern .search-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.index-modern .search-filter-radio {
    justify-content: flex-start;
    font-size: .78rem;
  }

  body.index-modern .search-filter-label {
    text-align: left;
  }

  body.index-modern .main-content {
    padding-top: 40px;
  }

  body.index-modern .notice-compact,
  body.index-modern .maint-section,
  body.index-modern .beginner-banner,
  body.index-modern .quicknav-section {
    max-width: 100%;
  }

  body.index-modern .notice-compact-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 16px 22px;
  }

  body.index-modern .notice-compact-all {
    position: static;
    align-self: center;
    transform: none;
  }

  body.index-modern .notice-compact-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }

  body.index-modern .notice-compact-arrow {
    display: none;
  }

  body.index-modern .notice-compact-text {
    grid-column: auto;
  }

  body.index-modern .maint-section {
    grid-template-columns: 94px minmax(0, 1fr);
    margin-bottom: 40px;
  }

  body.index-modern .maint-section-heading {
    padding: 14px 10px;
    font-size: .9rem;
  }

  body.index-modern .maint-compact {
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
  }

  body.index-modern .beginner-banner {
    padding: 18px;
  }

  body.index-modern .beginner-banner-title {
    font-size: 1.5rem;
  }

  body.index-modern .beginner-banner-mid {
    gap: 8px;
  }

  body.index-modern .btn-cta {
    min-width: 0;
    width: 100%;
  }

  body.index-modern .quicknav-section {
    margin-bottom: 68px;
  }

  body.index-modern .quicknav-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  body.index-modern .quicknav-card-wide {
    grid-column: 1 / -1;
  }

  body.index-modern .quicknav-card-third {
    grid-column: span 1;
    min-height: 116px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }

  body.index-modern .quicknav-card-third .quicknav-label {
    font-size: .82rem;
  }

  body.index-modern .quicknav-card-third .quicknav-arrow,
  body.index-modern .quicknav-card-third .quicknav-ext {
    margin-left: 0;
    font-size: .95rem;
  }

  body.index-modern .quicknav-icon {
    width: 50px;
    height: 50px;
  }

  body.index-modern .cat-section {
    padding-bottom: 48px;
  }

  body.index-modern .cat-grid {
    gap: 24px;
  }

  body.index-modern .cat-card-header {
    min-height: 64px;
  }

  body.index-modern .section-title-center h2 {
    font-size: 2rem;
  }

  body.index-modern .trouble-tags {
    justify-content: center;
  }

  body.index-modern .trouble-tag {
    width: auto;
    justify-content: center;
  }
}

/* ===== お知らせ表示上限（常時4件まで） ===== */
body.index-modern .notice-compact-item:nth-child(n+5) {
  display: none;
}

/* ===== 障害メンテナンス情報 UI 修正 ===== */
body.index-modern .maint-compact-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px 3px 24px;
  background: #eef5ff;
  border: 1px solid #aacefd;
  border-radius: 4px;
  color: #0a5bb8;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

body.index-modern .maint-compact-badge::before {
  left: 8px;
  background: #0a5bb8;
}

body.index-modern .maint-compact-link {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 5px 14px;
  border: 1px solid var(--replica-blue);
  border-radius: 4px;
  background: transparent;
  color: var(--replica-blue);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

body.index-modern .maint-compact-link:hover {
  background: var(--replica-blue);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 900px) {
  body.index-modern .maint-compact {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* ===== お問い合わせページ 準備チェックリスト ===== */
.contact-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-checklist-group {
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
}
.contact-checklist-group:first-child { padding-top: 0; }
.contact-checklist-group:last-child  { border-bottom: none; padding-bottom: 0; }

.contact-checklist-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.contact-check-icon {
  font-size: 1.1rem;
  color: var(--color-primary);
  flex-shrink: 0;
  line-height: 1;
}
.contact-check-label {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-text);
}
.contact-check-subitems {
  padding-left: 30px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-check-subitems li {
  font-size: .83rem;
  color: var(--color-text-sub);
  line-height: 1.6;
  padding-left: 1em;
  position: relative;
}
.contact-check-subitems li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-text-sub);
}

/* ===== トップ お問い合わせCTA ===== */
body.index-modern .contact-cta-section {
  padding: 64px 0 68px;
  border-top: 1px solid #e6edf5;
  background: #fff;
}

body.index-modern .contact-cta-section .container {
  max-width: calc(var(--replica-width) + 40px);
}

body.index-modern .contact-cta-box {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

body.index-modern .contact-cta-head {
  max-width: 780px;
  margin: 0 auto 30px;
}

body.index-modern .contact-cta-title {
  margin-bottom: 12px;
  color: #2e3238;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.45;
}

body.index-modern .contact-cta-title::after {
  content: "";
  display: block;
  width: 58px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--replica-blue);
}

body.index-modern .contact-cta-subtitle {
  margin: 0;
  color: #647386;
  font-size: .94rem;
  line-height: 1.8;
}

body.index-modern .contact-cta-section .contact-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fff;
}

body.index-modern .contact-cta-section .contact-checklist-group {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: start;
  min-height: 0;
  padding: 20px 22px;
  border-right: 1px solid #e5edf6;
  border-bottom: 1px solid #e5edf6;
  color: #202936;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

body.index-modern .contact-cta-section .contact-checklist-group:nth-child(2n) {
  border-right: 0;
}

body.index-modern .contact-cta-section .contact-checklist-group:nth-last-child(-n+2) {
  border-bottom: 0;
}

body.index-modern .contact-cta-section .contact-checklist-group:hover {
  background: #f7fbff;
  color: var(--replica-blue-dark);
  text-decoration: none;
}

body.index-modern .contact-cta-section .contact-check-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid #b8daf8;
  border-radius: 4px;
  background: #edf8ff;
  color: #0a5bb8;
  font-size: .78rem;
  font-weight: 700;
}

body.index-modern .contact-cta-section .contact-check-link {
  display: block;
  grid-column: 2;
  color: #17283d;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: left;
}

body.index-modern .contact-cta-section .contact-check-desc {
  display: block;
  grid-column: 2;
  margin: 5px 0 0;
  color: #66778c;
  font-size: .84rem;
  line-height: 1.7;
  text-align: left;
}

body.index-modern .contact-cta-section .contact-check-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  margin-top: 5px;
  border-radius: 50%;
  background: #e2f3ff;
  color: var(--replica-blue-dark);
  font-size: .96rem;
  line-height: 1;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

body.index-modern .contact-cta-section .contact-checklist-group:hover .contact-check-arrow {
  background: #cfeaff;
  color: var(--replica-blue-dark);
  transform: translateX(2px);
}

body.index-modern .contact-cta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 18px 22px;
  border: 1px solid #c6e2f8;
  border-radius: 4px;
  background: #f2f9ff;
  color: #17283d;
  text-align: left;
}

body.index-modern .contact-cta-footer-title {
  margin-bottom: 4px;
  color: #17283d;
  font-size: .98rem;
  font-weight: 700;
}

body.index-modern .contact-cta-footer-sub {
  margin: 0;
  color: #607186;
  font-size: .84rem;
  line-height: 1.7;
}

body.index-modern .contact-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 198px;
  padding: 11px 16px 11px 18px;
  border: 1px solid #aacefd;
  border-radius: 4px;
  background: #eaf6ff;
  box-shadow: none;
  color: #0a5bb8;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

body.index-modern .contact-cta-btn:hover {
  border-color: #7dbff7;
  background: #dff1ff;
  color: #07579d;
  text-decoration: none;
}

body.index-modern .contact-cta-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1888d5;
  color: #fff;
  font-size: .95rem;
  line-height: 1;
}

@media (max-width: 900px) {
  body.index-modern .contact-cta-section .contact-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.index-modern .contact-cta-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  body.index-modern .contact-cta-btn {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  body.index-modern .contact-cta-section {
    padding: 48px 0 52px;
  }

  body.index-modern .contact-cta-title {
    font-size: 1.62rem;
  }

  body.index-modern .contact-cta-section .contact-checklist {
    grid-template-columns: 1fr;
  }

  body.index-modern .contact-cta-section .contact-checklist-group {
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    padding: 18px 16px;
    border-right: 0;
    border-bottom: 1px solid #e5edf6;
  }

  body.index-modern .contact-cta-section .contact-checklist-group:nth-last-child(-n+2) {
    border-bottom: 1px solid #e5edf6;
  }

  body.index-modern .contact-cta-section .contact-checklist-group:last-child {
    border-bottom: 0;
  }

  body.index-modern .contact-cta-footer {
    padding: 18px 16px;
  }

  body.index-modern .contact-cta-btn {
    align-self: stretch;
    width: 100%;
    min-width: 0;
  }
}

/* ===== お知らせページ パンくず ===== */
body.index-modern .breadcrumb-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  margin-bottom: 12px;
  color: var(--color-text-sub);
}
body.index-modern .breadcrumb-notice a {
  color: var(--color-primary);
  text-decoration: none;
}
body.index-modern .breadcrumb-notice a:hover { text-decoration: underline; }
body.index-modern .breadcrumb-notice .bc-sep {
  color: var(--color-text-sub);
  font-size: .8rem;
}
body.index-modern .breadcrumb-notice .bc-current {
  color: var(--color-text);
  font-weight: 600;
}

/* ===== お知らせページ Topテイスト寄せ ===== */
body.index-modern.notices-page .section-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 40px;
  border-bottom: 1px solid #dce7f4;
  background: #fff;
}

body.index-modern.notices-page .section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(56deg, rgba(24, 136, 213, .18) 0 12%, transparent 12% 100%) left bottom / 50% 100% no-repeat,
    linear-gradient(124deg, transparent 0 69%, rgba(24, 136, 213, .12) 69% 82%, transparent 82% 100%) left top / 50% 100% no-repeat,
    linear-gradient(304deg, rgba(24, 136, 213, .16) 0 12%, transparent 12% 100%) right bottom / 50% 100% no-repeat,
    linear-gradient(236deg, transparent 0 68%, rgba(24, 136, 213, .10) 68% 82%, transparent 82% 100%) right top / 50% 100% no-repeat,
    linear-gradient(90deg, #f5fbff 0%, #fff 26%, #fff 74%, #f5fbff 100%);
  z-index: 0;
}

body.index-modern.notices-page .section-hero .container,
body.index-modern.notices-page .main-content > .container {
  position: relative;
  z-index: 1;
  max-width: calc(var(--replica-width) + 40px);
}

body.index-modern.notices-page .breadcrumb-notice {
  margin-bottom: 16px;
}

body.index-modern.notices-page .section-hero h1 {
  display: block;
  margin-bottom: 12px;
  color: #2f3540;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 400;
  letter-spacing: .03em;
}

body.index-modern.notices-page .section-hero p {
  max-width: 860px;
  color: #5d6b7d;
  font-size: .98rem;
  line-height: 1.9;
}

body.index-modern.notices-page .section-hero-link {
  color: var(--replica-blue-dark);
  font-weight: 700;
  text-decoration: underline;
}

body.index-modern.notices-page .main-content {
  padding: 40px 0 12px;
  background: #fff;
}

body.index-modern.notices-page .notice-list {
  gap: 8px;
}

body.index-modern.notices-page .notice-item {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

body.index-modern.notices-page .notice-item + .notice-item {
  margin-top: 0;
}

body.index-modern.notices-page .notice-item:hover {
  border-color: #9bc6ef;
  background: #fbfdff;
  box-shadow: none;
}

body.index-modern.notices-page .notice-title {
  color: #162434;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.7;
}

body.index-modern.notices-page .notice-date {
  color: #66768a;
  font-size: .84rem;
  white-space: nowrap;
}

body.index-modern.notices-page .notice-tag,
body.index-modern.notices-page .notice-item-desc,
body.index-modern.notices-page .notice-item-action,
body.index-modern.notices-page .notice-item-head,
body.index-modern.notices-page .hero-title-icon {
  display: none;
}

body.index-modern.notices-page .notice-pager-wrap {
  margin-top: 34px;
}

/* ===== カテゴリページ / 困りごとページ 共通 ===== */
body.index-modern.manual-page .section-hero,
body.index-modern.trouble-page .section-hero,
body.index-modern.startup-page .section-hero,
body.index-modern.contact-page .section-hero,
body.index-modern.status-page .section-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 34px;
  border-bottom: 1px solid #dce7f4;
  background: #fff;
}


body.index-modern.manual-page .section-hero::before,
body.index-modern.trouble-page .section-hero::before,
body.index-modern.startup-page .section-hero::before,
body.index-modern.contact-page .section-hero::before,
body.index-modern.status-page .section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(56deg, rgba(24, 136, 213, .18) 0 12%, transparent 12% 100%) left bottom / 50% 100% no-repeat,
    linear-gradient(124deg, transparent 0 69%, rgba(24, 136, 213, .12) 69% 82%, transparent 82% 100%) left top / 50% 100% no-repeat,
    linear-gradient(304deg, rgba(24, 136, 213, .16) 0 12%, transparent 12% 100%) right bottom / 50% 100% no-repeat,
    linear-gradient(236deg, transparent 0 68%, rgba(24, 136, 213, .10) 68% 82%, transparent 82% 100%) right top / 50% 100% no-repeat,
    linear-gradient(90deg, #f5fbff 0%, #fff 26%, #fff 74%, #f5fbff 100%);
  z-index: 0;
}

body.index-modern.manual-page .section-hero .container,
body.index-modern.trouble-page .section-hero .container,
body.index-modern.startup-page .section-hero .container,
body.index-modern.contact-page .section-hero .container,
body.index-modern.status-page .section-hero .container,
body.index-modern.manual-page .main-content > .container,
body.index-modern.trouble-page .main-content > .container,
body.index-modern.startup-page .main-content > .container,
body.index-modern.contact-page .main-content > .container,
body.index-modern.status-page .main-content > .container {
  position: relative;
  z-index: 1;
  max-width: calc(var(--replica-width) + 40px);
}

body.index-modern.manual-page .section-hero h1,
body.index-modern.trouble-page .section-hero h1,
body.index-modern.startup-page .section-hero h1,
body.index-modern.contact-page .section-hero h1,
body.index-modern.status-page .section-hero h1 {
  margin-bottom: 10px;
  color: #2f3540;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 400;
  letter-spacing: .03em;
}

body.index-modern.manual-page .section-hero p,
body.index-modern.trouble-page .section-hero p,
body.index-modern.startup-page .section-hero p,
body.index-modern.contact-page .section-hero p,
body.index-modern.status-page .section-hero p {
  max-width: 860px;
  color: #5d6b7d;
  font-size: .98rem;
  line-height: 1.9;
}

body.index-modern.manual-page .main-content,
body.index-modern.trouble-page .main-content,
body.index-modern.startup-page .main-content,
body.index-modern.contact-page .main-content,
body.index-modern.status-page .main-content {
  padding: 40px 0 18px;
  background: #fff;
}

body.index-modern.manual-page .search-wrap,
body.index-modern.trouble-page .search-wrap {
  max-width: 835px;
  margin: 18px 0 0;
  padding: 16px 18px 18px;
  border-radius: 4px;
  background: var(--replica-blue);
  color: #fff;
}

body.index-modern.manual-page .search-box,
body.index-modern.trouble-page .search-box {
  position: relative;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
}

body.index-modern.manual-page .search-box input,
body.index-modern.trouble-page .search-box input {
  min-height: 54px;
  padding: 0 58px 0 16px;
  color: var(--replica-text);
  font-size: .9rem;
}

body.index-modern.manual-page .search-box button,
body.index-modern.trouble-page .search-box button {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 26px;
  min-width: 0;
  height: 26px;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  color: transparent;
  transform: translateY(-50%);
}

body.index-modern.manual-page .search-box button::before,
body.index-modern.trouble-page .search-box button::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--replica-blue);
  border-radius: 50%;
}

body.index-modern.manual-page .search-box button::after,
body.index-modern.trouble-page .search-box button::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 17px;
  width: 10px;
  height: 3px;
  border-radius: 3px;
  background: var(--replica-blue);
  transform: rotate(45deg);
}

body.index-modern.manual-page .search-box button:hover,
body.index-modern.trouble-page .search-box button:hover {
  background: transparent;
}

/* ===== カテゴリページ ===== */
body.index-modern.manual-page .cat-grid {
  gap: 28px 18px;
}

body.index-modern.manual-page .cat-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.index-modern.manual-page .cat-card:hover {
  box-shadow: none;
  transform: none;
}

body.index-modern.manual-page .cat-card-header {
  min-height: 70px;
  padding: 0 22px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fbfdff;
}

body.index-modern.manual-page .cat-card-header:hover {
  background: #f3faff;
}

div.cat-card-header {
  cursor: default;
}
div.cat-card-header:hover,
body.index-modern div.cat-card-header:hover,
body.index-modern.manual-page div.cat-card-header:hover {
  background: inherit;
  text-decoration: none;
}

.cat-link-text {
  display: block;
  padding: 5px 8px;
  font-size: .87rem;
  color: var(--color-text);
}

body.index-modern.manual-page .cat-card-name {
  color: #162434;
  font-size: 1.06rem;
}

body.index-modern.manual-page .cat-card-links {
  padding: 14px 16px 0;
  gap: 7px;
}

body.index-modern.manual-page .cat-link {
  color: #223247;
  font-size: .95rem;
}

/* ===== startup page ===== */
body.index-modern.startup-page .startup-intro-note {
  margin-bottom: 24px;
  font-size: .82rem;
  color: var(--color-text-sub);
  padding-left: 10px;
  border-left: 3px solid var(--color-border);
  line-height: 1.6;
}

body.index-modern.startup-page .startup-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

body.index-modern.startup-page .startup-layout > :first-child {
  order: 2;
}

body.index-modern.startup-page .startup-side-wrap {
  order: 1;
}

body.index-modern.startup-page .step-item {
  gap: 18px;
  padding-bottom: 20px;
}

body.index-modern.startup-page .step-left {
  flex-shrink: 0;
}

body.index-modern.startup-page .step-num-box {
  width: 40px;
  height: 40px;
  background: var(--replica-blue);
  box-shadow: 0 10px 22px rgba(24, 136, 213, .18);
  font-size: .95rem;
}

body.index-modern.startup-page .step-line {
  width: 2px;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(24, 136, 213, .45) 0%, rgba(24, 136, 213, .12) 100%);
}

body.index-modern.startup-page .step-body {
  padding: 18px 20px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

body.index-modern.startup-page .step-item:hover .step-body {
  border-color: #9bc6ef;
  background: #fbfdff;
}

body.index-modern.startup-page .step-body h3 {
  margin-bottom: 6px;
  color: #162434;
  font-size: 1rem;
}

body.index-modern.startup-page .step-body p {
  color: #617185;
  font-size: .84rem;
  line-height: 1.8;
}

body.index-modern.startup-page .step-links {
  margin-top: 12px;
  gap: 8px;
}

body.index-modern.startup-page a.step-link {
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  color: var(--color-primary);
  font-size: .84rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.index-modern.startup-page a.step-link:hover {
  background: none;
  color: var(--color-primary-d);
  text-decoration: underline;
}
body.index-modern.startup-page span.step-link {
  padding: 6px 12px;
  border: 1px solid #d8e4f2;
  background: #f7fbff;
  color: #0a5bb8;
  font-size: .8rem;
  font-weight: 700;
}

body.index-modern.startup-page span.step-link:hover {
  border-color: var(--replica-blue);
  background: var(--replica-blue);
}

body.index-modern.startup-page .step-link.is-static {
  cursor: default;
}

body.index-modern.startup-page .step-link.is-static:hover {
  border-color: #d8e4f2;
  background: #f7fbff;
  color: #0a5bb8;
}

body.index-modern.startup-page .startup-support-info {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #f7fbff;
}

body.index-modern.startup-page .startup-support-info .link-list {
  gap: 6px;
}

body.index-modern.startup-page .startup-support-info .link-list-item {
  padding: 10px 12px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fff;
}

body.index-modern.startup-page .startup-side-wrap {
  position: sticky;
  top: 76px;
}

body.index-modern.startup-page .startup-side-card {
  gap: 10px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  box-shadow: none;
  background: #fbfdff;
}

body.index-modern.startup-page .startup-side-title {
  padding-bottom: 8px;
  border-bottom: 1px solid #d8e4f2;
  color: var(--replica-blue);
}

body.index-modern.startup-page .startup-side-links {
  gap: 6px;
  font-size: .82rem;
}

body.index-modern.startup-page .startup-side-links .link-list-item {
  padding: 10px 12px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fff;
}

body.index-modern.startup-page .startup-side-actions {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #d8e4f2;
}

body.index-modern.startup-page .startup-side-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

body.index-modern.startup-page .startup-side-btn + .startup-side-btn {
  margin-top: 6px;
}

body.index-modern.startup-page .btn-outline {
  border-width: 1px;
  border-color: var(--replica-blue);
  color: var(--replica-blue);
}

body.index-modern.startup-page .btn-outline:hover {
  background: #eaf6ff;
}

/* ===== contact page ===== */
body.index-modern.contact-page .contact-intro-box {
  margin-bottom: 32px !important;
  border: 1px solid #cfe1f5;
  background: #f6fbff;
  color: #355372;
}

body.index-modern.contact-page .contact-intro-actions {
  margin-top: 12px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.index-modern.contact-page .contact-intro-actions .btn {
  border-width: 1px;
  border-color: var(--replica-blue);
  color: var(--replica-blue);
}

body.index-modern.contact-page .contact-intro-actions .btn:hover {
  background: #eaf6ff;
}

body.index-modern.contact-page .contact-method-heading {
  margin-bottom: 24px !important;
}

body.index-modern.contact-page .contact-method-heading h2 {
  color: #2f3540;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 400;
  letter-spacing: .03em;
}

body.index-modern.contact-page .contact-method-grid {
  align-items: stretch;
  margin-bottom: 40px !important;
}

body.index-modern.contact-page .contact-method-grid > .card {
  padding: 28px 24px !important;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  box-shadow: none;
  text-align: center;
}

body.index-modern.contact-page .contact-method-grid > .card:hover {
  border-color: #9bc6ef;
  box-shadow: none;
  transform: none;
  background: #fbfdff;
}

body.index-modern.contact-page .contact-method-grid > .card > div:first-child {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px !important;
  border: 1px solid rgba(24, 136, 213, .28);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f3faff 100%);
  color: transparent !important;
  font-size: 0 !important;
}

body.index-modern.contact-page .contact-method-grid > .card > div:first-child::before {
  content: "";
  position: absolute;
  inset: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.index-modern.contact-page .contact-method-grid > .card:nth-child(1) > div:first-child::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 7.8c1.1-1.1 2.5-1 3.4-.2l2 2c.9.9 1 2.3.2 3.4l-1.5 2c-.3.4-.3 1 .1 1.4l2.8 2.8c.4.4 1 .4 1.4.1l2-1.5c1.1-.8 2.5-.7 3.4.2l2 2c.9.9.8 2.3-.2 3.4l-1.1 1.1c-1.4 1.4-3.5 1.9-5.4 1.1-4.3-1.7-8.6-6-10.3-10.3-.8-1.9-.3-4 1.1-5.4Z'/%3E%3C/svg%3E");
}

body.index-modern.contact-page .contact-method-grid > .card:nth-child(2) > div:first-child::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.2' y='8.1' width='21.6' height='15.8' rx='2.4'/%3E%3Cpath d='m7.4 10 8.6 7 8.6-7'/%3E%3C/svg%3E");
}

body.index-modern.contact-page .contact-method-grid > .card:nth-child(3) > div:first-child::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2307589d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7.2c-5.8 0-10.4 3.8-10.4 8.8 0 2.6 1.3 4.8 3.6 6.3l-.8 3.7 4.1-2.3c1.1.3 2.3.4 3.5.4 5.8 0 10.4-3.8 10.4-8.8S21.8 7.2 16 7.2Z'/%3E%3C/svg%3E");
}

body.index-modern.contact-page .contact-method-grid > .card > div:nth-child(2) {
  margin-bottom: 8px !important;
  color: #162434 !important;
}

body.index-modern.contact-page .contact-method-grid > .card > div:nth-child(3),
body.index-modern.contact-page .contact-method-grid > .card p,
body.index-modern.contact-page .contact-method-grid > .card ul {
  color: #617185 !important;
}

body.index-modern.contact-page .contact-method-grid > .card:first-child > div:nth-child(3) {
  color: var(--replica-blue) !important;
}

body.index-modern.contact-page .contact-prep-card {
  padding: 28px 24px !important;
  margin-bottom: 32px !important;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  box-shadow: none;
}

body.index-modern.contact-page .contact-prep-grid {
  gap: 12px;
}

body.index-modern.contact-page .contact-prep-grid > div {
  padding: 14px 16px !important;
  border-radius: 4px !important;
  background: #f5fbff !important;
}

body.index-modern.contact-page .contact-prep-grid > div > div:first-child {
  margin-bottom: 6px !important;
  color: var(--replica-blue) !important;
}

body.index-modern.contact-page .contact-prep-grid ul {
  color: #617185 !important;
}

body.index-modern.contact-page .contact-warn-note {
  margin-bottom: 40px !important;
  border: 1px solid #f0d690;
  background: linear-gradient(90deg, #fff8e6 0%, #fffdf7 78%);
  color: #855400;
}

body.index-modern.contact-page .contact-warn-note strong,
body.index-modern.contact-page .contact-warn-note li strong {
  color: #6e4700;
}

/* ===== status page ===== */
body.index-modern.status-page .section-block {
  margin-bottom: 34px;
}

body.index-modern.status-page .status-summary-block {
  margin-bottom: 30px;
}

body.index-modern.status-page .section-heading {
  margin-bottom: 14px;
}

body.index-modern.status-page .section-heading h2 {
  padding-left: 0;
  color: #182638;
  font-size: 1.35rem;
}

body.index-modern.status-page .section-heading h2::before {
  display: none;
}

body.index-modern.status-page .status-page-banner {
  margin-bottom: 0;
  padding: 18px 22px;
  border: 1px solid #f0d690;
  border-radius: 4px;
  background: linear-gradient(90deg, #fff8e6 0%, #fffdf7 78%);
  box-shadow: none;
  color: #855400;
}

body.index-modern.status-page .status-page-banner .status-icon {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid #f0d690;
  border-radius: 12px;
  background: #fff7da;
  color: transparent;
  font-size: 0;
}

body.index-modern.status-page .status-page-banner .status-icon::before {
  content: "";
  position: absolute;
  inset: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23b66a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 6 27 25H5Z'/%3E%3Cpath d='M16 12v5.8'/%3E%3Ccircle cx='16' cy='21.2' r='1.2' fill='%23b66a00' stroke='none'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

body.index-modern.status-page .status-page-banner strong {
  display: block;
  color: #6e4700;
  font-size: 1rem;
  font-weight: 700;
}

body.index-modern.status-page .status-page-banner-meta {
  margin-top: 4px;
  color: #91631a;
  font-size: .85rem;
}

body.index-modern.status-page .filter-tabs {
  gap: 10px;
  margin-bottom: 14px;
}

body.index-modern.status-page .filter-tab {
  padding: 8px 16px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fbfdff;
  color: #223247;
  font-size: .84rem;
  font-weight: 700;
}

body.index-modern.status-page .filter-tab:hover,
body.index-modern.status-page .filter-tab.active {
  border-color: var(--replica-blue);
  background: var(--replica-blue);
  color: #fff;
}

body.index-modern.status-page .status-table-wrap {
  overflow: hidden;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fff;
}

body.index-modern.status-page .status-table {
  font-size: .9rem;
}

body.index-modern.status-page .status-table th,
body.index-modern.status-page .status-table td {
  padding: 12px 16px;
  border-bottom-color: #e4edf7;
}

body.index-modern.status-page .status-table th {
  background: #f7fbff;
  color: #627388;
  font-size: .8rem;
}

body.index-modern.status-page .status-table tbody tr:hover td {
  background: #fbfdff;
}

body.index-modern.status-page .status-dot {
  color: #223247;
  font-weight: 700;
}

body.index-modern.status-page .dot {
  width: 9px;
  height: 9px;
}

body.index-modern.status-page .notice-list {
  gap: 8px;
}

body.index-modern.status-page .notice-item {
  padding: 17px 18px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  cursor: default;
}

body.index-modern.status-page .notice-item + .notice-item {
  margin-top: 0;
}

body.index-modern.status-page .notice-item:hover {
  border-color: #9bc6ef;
  background: #fbfdff;
  box-shadow: none;
}

body.index-modern.status-page .notice-tag {
  font-size: .72rem;
  padding: 4px 10px;
}

body.index-modern.status-page .notice-title {
  color: #162434;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.7;
}

body.index-modern.status-page .notice-date {
  color: #66768a;
  font-size: .84rem;
  white-space: nowrap;
}

body.index-modern.status-page .history-tag-resolved {
  background: #fce4ec;
  color: #880e4f;
}

body.index-modern.status-page .status-detail-item {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

body.index-modern.status-page .status-detail-item-fault {
  border-left: 4px solid var(--color-warn);
}

body.index-modern.status-page .status-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

body.index-modern.status-page .status-detail-box {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e2ebf6;
  border-radius: 4px;
  background: #f7fbff;
  font-size: .84rem;
}

body.index-modern.status-page .status-detail-box-fault {
  border-color: #f1d7cc;
  background: #fff8f5;
}

body.index-modern.status-page .status-detail-grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 6px 10px;
}

body.index-modern.status-page .status-detail-label {
  color: #66768a;
  font-weight: 700;
}

body.index-modern.status-page .status-empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid #cde9de;
  border-radius: 4px;
  background: #f6fbff;
  color: var(--color-ok);
  font-size: .95rem;
  font-weight: 700;
}

body.index-modern.status-page .status-empty-icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid #9eded8;
  border-radius: 50%;
  background: #fff;
}

body.index-modern.status-page .status-empty-icon::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 11px;
  width: 13px;
  height: 7px;
  border-left: 3px solid var(--color-ok);
  border-bottom: 3px solid var(--color-ok);
  transform: rotate(-45deg);
}

body.index-modern.status-page .status-mock-block {
  margin-top: 16px;
}

body.index-modern.status-page .status-mock-note {
  margin-bottom: 8px;
  color: #617185;
  font-size: .78rem;
}

body.index-modern.status-page .status-history-link {
  margin-top: 12px;
  text-align: right;
}

body.index-modern.status-page .status-history-link a {
  color: #66768a;
  font-size: .82rem;
  text-decoration: none;
}

body.index-modern.status-page .status-history-link a:hover {
  color: var(--replica-blue);
  text-decoration: underline;
}

body.index-modern.status-page .status-subscribe-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #f5fbff;
}

body.index-modern.status-page .status-subscribe-title {
  margin-bottom: 6px;
  color: var(--replica-blue);
  font-size: .95rem;
  font-weight: 700;
}

body.index-modern.status-page .status-subscribe-text {
  color: #617185;
  font-size: .82rem;
}

body.index-modern.status-page .status-subscribe-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.index-modern.status-page .btn-outline {
  border-width: 1px;
  border-color: var(--replica-blue);
  color: var(--replica-blue);
}

body.index-modern.status-page .btn-outline:hover {
  background: #eaf6ff;
}

/* ===== 困りごとページ ===== */
body.index-modern.trouble-page .section-block {
  margin-bottom: 34px;
}

body.index-modern.trouble-page .faq-index-block {
  margin-bottom: 38px;
}

body.index-modern.trouble-page .section-heading {
  margin-bottom: 14px;
}

body.index-modern.trouble-page .section-heading h2 {
  padding-left: 0;
  color: #182638;
  font-size: 1.35rem;
}

body.index-modern.trouble-page .section-heading h2::before {
  display: none;
}

body.index-modern.trouble-page .card-grid {
  gap: 16px;
}

body.index-modern.trouble-page .faq-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.index-modern.trouble-page .faq-index-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fbfdff;
  color: #162434;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
}

body.index-modern.trouble-page .faq-index-item::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--replica-blue);
  box-shadow: 0 0 0 5px rgba(24, 136, 213, .12);
}

body.index-modern.trouble-page .faq-index-item::after {
  content: "›";
  margin-left: auto;
  color: var(--replica-blue);
  font-size: 1.15rem;
}

body.index-modern.trouble-page .faq-index-item:hover {
  border-color: #9bc6ef;
  background: #f3faff;
}

body.index-modern.trouble-page .card {
  border: 1px solid #d8e4f2;
  border-left: 1px solid #d8e4f2;
  border-radius: 4px;
  box-shadow: none;
  background: #fff;
  padding: 18px 18px 16px;
}

body.index-modern.trouble-page .card:hover {
  border-color: #9bc6ef;
  box-shadow: none;
  transform: none;
}

body.index-modern.trouble-page .card-trouble {
  border-left: 4px solid var(--replica-blue);
}

body.index-modern.trouble-page .card-trouble .card-title {
  color: #162434;
}
body.index-modern.trouble-page .card-trouble a.card-title {
  display: block;
  color: #162434;
  text-decoration: none;
}
body.index-modern.trouble-page .card-trouble a.card-title:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.index-modern.trouble-page .card-icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(24, 136, 213, .28);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f3faff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
  color: #0a74bc;
}

body.index-modern.trouble-page .card-icon::before {
  content: "";
  position: absolute;
  inset: 10px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.index-modern.trouble-page .card:hover .card-icon {
  border-color: rgba(24, 136, 213, .42);
  background: linear-gradient(180deg, #fff 0%, #e9f5ff 100%);
}

body.index-modern.trouble-page .icon-shield-lock::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-shield-lock'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M5.338%201.59a61%2061%200%200%200-2.837.856.48.48%200%200%200-.328.39c-.554%204.157.726%207.19%202.253%209.188a10.7%2010.7%200%200%200%202.287%202.233c.346.244.652.42.893.533q.18.085.293.118a1%201%200%200%200%20.101.025%201%201%200%200%200%20.1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7%2010.7%200%200%200%202.287-2.233c1.527-1.997%202.807-5.031%202.253-9.188a.48.48%200%200%200-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552%201.29%208.531%201.067%208%201.067c-.53%200-1.552.223-2.662.524zM5.072.56C6.157.265%207.31%200%208%200s1.843.265%202.928.56c1.11.3%202.229.655%202.887.87a1.54%201.54%200%200%201%201.044%201.262c.596%204.477-.787%207.795-2.465%209.99a11.8%2011.8%200%200%201-2.517%202.453%207%207%200%200%201-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7%207%200%200%201-1.048-.625%2011.8%2011.8%200%200%201-2.517-2.453C1.928%2010.487.545%207.169%201.141%202.692A1.54%201.54%200%200%201%202.185%201.43%2063%2063%200%200%201%205.072.56'%2F%3E%3Cpath%20d%3D'M9.5%206.5a1.5%201.5%200%200%201-1%201.415l.385%201.99a.5.5%200%200%201-.491.595h-.788a.5.5%200%200%201-.49-.595l.384-1.99a1.5%201.5%200%201%201%202-1.415'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-pc-display-horizontal::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-pc-display-horizontal'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M1.5%200A1.5%201.5%200%200%200%200%201.5v7A1.5%201.5%200%200%200%201.5%2010H6v1H1a1%201%200%200%200-1%201v3a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1v-3a1%201%200%200%200-1-1h-5v-1h4.5A1.5%201.5%200%200%200%2016%208.5v-7A1.5%201.5%200%200%200%2014.5%200zm0%201h13a.5.5%200%200%201%20.5.5v7a.5.5%200%200%201-.5.5h-13a.5.5%200%200%201-.5-.5v-7a.5.5%200%200%201%20.5-.5M12%2012.5a.5.5%200%201%201%201%200%20.5.5%200%200%201-1%200m2%200a.5.5%200%201%201%201%200%20.5.5%200%200%201-1%200M1.5%2012h5a.5.5%200%200%201%200%201h-5a.5.5%200%200%201%200-1M1%2014.25a.25.25%200%200%201%20.25-.25h5.5a.25.25%200%201%201%200%20.5h-5.5a.25.25%200%200%201-.25-.25'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-controller::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-controller'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M11.5%206.027a.5.5%200%201%201-1%200%20.5.5%200%200%201%201%200m-1.5%201.5a.5.5%200%201%200%200-1%20.5.5%200%200%200%200%201m2.5-.5a.5.5%200%201%201-1%200%20.5.5%200%200%201%201%200m-1.5%201.5a.5.5%200%201%200%200-1%20.5.5%200%200%200%200%201m-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1z'%2F%3E%3Cpath%20d%3D'M3.051%203.26a.5.5%200%200%201%20.354-.613l1.932-.518a.5.5%200%200%201%20.62.39c.655-.079%201.35-.117%202.043-.117.72%200%201.443.041%202.12.126a.5.5%200%200%201%20.622-.399l1.932.518a.5.5%200%200%201%20.306.729q.211.136.373.297c.408.408.78%201.05%201.095%201.772.32.733.599%201.591.805%202.466s.34%201.78.364%202.606c.024.816-.059%201.602-.328%202.21a1.42%201.42%200%200%201-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527s-2.496.723-3.224%201.527c-.119.131-.242.275-.368.423-.243.282-.494.575-.739.808-.398.38-.877.706-1.513.773a1.42%201.42%200%200%201-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364%201.094-1.772a2.3%202.3%200%200%201%20.433-.335l-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885%201.465a14%2014%200%200%200-.748%202.295%2012.4%2012.4%200%200%200-.339%202.406c-.022.755.062%201.368.243%201.776a.42.42%200%200%200%20.426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.504C4.861%209.969%205.978%209.027%208%209.027s3.139.942%203.965%201.855c.164.181.307.348.44.504.214.251.403.472.615.674.318.303.601.468.929.503a.42.42%200%200%200%20.426-.241c.18-.408.265-1.02.243-1.776a12.4%2012.4%200%200%200-.339-2.406%2014%2014%200%200%200-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27s-2.063.091-2.913.27'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-window-stack::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-window-stack'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M4.5%206a.5.5%200%201%200%200-1%20.5.5%200%200%200%200%201M6%206a.5.5%200%201%200%200-1%20.5.5%200%200%200%200%201m2-.5a.5.5%200%201%201-1%200%20.5.5%200%200%201%201%200'%2F%3E%3Cpath%20d%3D'M12%201a2%202%200%200%201%202%202%202%202%200%200%201%202%202v8a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2%202%202%200%200%201-2-2V3a2%202%200%200%201%202-2zM2%2012V5a2%202%200%200%201%202-2h9a1%201%200%200%200-1-1H2a1%201%200%200%200-1%201v8a1%201%200%200%200%201%201m1-4v5a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1V8zm12-1V5a1%201%200%200%200-1-1H4a1%201%200%200%200-1%201v2z'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-globe2::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-globe2'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M0%208a8%208%200%201%201%2016%200A8%208%200%200%201%200%208m7.5-6.923c-.67.204-1.335.82-1.887%201.855q-.215.403-.395.872c.705.157%201.472.257%202.282.287zM4.249%203.539q.214-.577.481-1.078a7%207%200%200%201%20.597-.933A7%207%200%200%200%203.051%203.05q.544.277%201.198.49zM3.509%207.5c.036-1.07.188-2.087.436-3.008a9%209%200%200%201-1.565-.667A6.96%206.96%200%200%200%201.018%207.5zm1.4-2.741a12.3%2012.3%200%200%200-.4%202.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332M8.5%205.09V7.5h2.99a12.3%2012.3%200%200%200-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51%208.5c.035.987.176%201.914.399%202.741A13.6%2013.6%200%200%201%207.5%2010.91V8.5zm3.99%200v2.409c.91.03%201.783.145%202.591.332.223-.827.364-1.754.4-2.741zm-3.282%203.696q.18.469.395.872c.552%201.035%201.218%201.65%201.887%201.855V11.91c-.81.03-1.577.13-2.282.287zm.11%202.276a7%207%200%200%201-.598-.933%209%209%200%200%201-.481-1.079%208.4%208.4%200%200%200-1.198.49%207%207%200%200%200%202.276%201.522zm-1.383-2.964A13.4%2013.4%200%200%201%203.508%208.5h-2.49a6.96%206.96%200%200%200%201.362%203.675c.47-.258.995-.482%201.565-.667m6.728%202.964a7%207%200%200%200%202.275-1.521%208.4%208.4%200%200%200-1.197-.49%209%209%200%200%201-.481%201.078%207%207%200%200%201-.597.933M8.5%2011.909v3.014c.67-.204%201.335-.82%201.887-1.855q.216-.403.395-.872A12.6%2012.6%200%200%200%208.5%2011.91zm3.555-.401c.57.185%201.095.409%201.565.667A6.96%206.96%200%200%200%2014.982%208.5h-2.49a13.4%2013.4%200%200%201-.437%203.008M14.982%207.5a6.96%206.96%200%200%200-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4%201.938.437%203.008zM11.27%202.461q.266.502.482%201.078a8.4%208.4%200%200%200%201.196-.49%207%207%200%200%200-2.275-1.52c.218.283.418.597.597.932m-.488%201.343a8%208%200%200%200-.395-.872C9.835%201.897%209.17%201.282%208.5%201.077V4.09c.81-.03%201.577-.13%202.282-.287z'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-browser-chrome::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-browser-chrome'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M16%208a8%208%200%200%201-7.022%207.94l1.902-7.098a3%203%200%200%200%20.05-1.492A3%203%200%200%200%2010.237%206h5.511A8%208%200%200%201%2016%208M0%208a8%208%200%200%200%207.927%208l1.426-5.321a3%203%200%200%201-.723.255%203%203%200%200%201-1.743-.147%203%203%200%200%201-1.043-.7L.633%204.876A8%208%200%200%200%200%208m5.004-.167L1.108%203.936A8.003%208.003%200%200%201%2015.418%205H8.066a3%203%200%200%200-1.252.243%202.99%202.99%200%200%200-1.81%202.59M8%2010a2%202%200%201%200%200-4%202%202%200%200%200%200%204'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-lock::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-lock'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M8%200a4%204%200%200%201%204%204v2.05a2.5%202.5%200%200%201%202%202.45v5a2.5%202.5%200%200%201-2.5%202.5h-7A2.5%202.5%200%200%201%202%2013.5v-5a2.5%202.5%200%200%201%202-2.45V4a4%204%200%200%201%204-4M4.5%207A1.5%201.5%200%200%200%203%208.5v5A1.5%201.5%200%200%200%204.5%2015h7a1.5%201.5%200%200%200%201.5-1.5v-5A1.5%201.5%200%200%200%2011.5%207zM8%201a3%203%200%200%200-3%203v2h6V4a3%203%200%200%200-3-3'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-sliders::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-sliders'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M11.5%202a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3M9.05%203a2.5%202.5%200%200%201%204.9%200H16v1h-2.05a2.5%202.5%200%200%201-4.9%200H0V3zM4.5%207a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3M2.05%208a2.5%202.5%200%200%201%204.9%200H16v1H6.95a2.5%202.5%200%200%201-4.9%200H0V8zm9.45%204a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3m-2.45%201a2.5%202.5%200%200%201%204.9%200H16v1h-2.05a2.5%202.5%200%200%201-4.9%200H0v-1z'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-key::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-key'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M0%208a4%204%200%200%201%207.465-2H14a.5.5%200%200%201%20.354.146l1.5%201.5a.5.5%200%200%201%200%20.708l-1.5%201.5a.5.5%200%200%201-.708%200L13%209.207l-.646.647a.5.5%200%200%201-.708%200L11%209.207l-.646.647a.5.5%200%200%201-.708%200L9%209.207l-.646.647A.5.5%200%200%201%208%2010h-.535A4%204%200%200%201%200%208m4-3a3%203%200%201%200%202.712%204.285A.5.5%200%200%201%207.163%209h.63l.853-.854a.5.5%200%200%201%20.708%200l.646.647.646-.647a.5.5%200%200%201%20.708%200l.646.647.646-.647a.5.5%200%200%201%20.708%200l.646.647.793-.793-1-1h-6.63a.5.5%200%200%201-.451-.285A3%203%200%200%200%204%205'%2F%3E%3Cpath%20d%3D'M4%208a1%201%200%201%201-2%200%201%201%200%200%201%202%200'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-credit-card::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-credit-card'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M0%204a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm2-1a1%201%200%200%200-1%201v1h14V4a1%201%200%200%200-1-1zm13%204H1v5a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1z'%2F%3E%3Cpath%20d%3D'M2%2010a1%201%200%200%201%201-1h1a1%201%200%200%201%201%201v1a1%201%200%200%201-1%201H3a1%201%200%200%201-1-1z'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-arrow-repeat::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-arrow-repeat'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M11.534%207h3.932a.25.25%200%200%201%20.192.41l-1.966%202.36a.25.25%200%200%201-.384%200l-1.966-2.36a.25.25%200%200%201%20.192-.41m-11%202h3.932a.25.25%200%200%200%20.192-.41L2.692%206.23a.25.25%200%200%200-.384%200L.342%208.59A.25.25%200%200%200%20.534%209'%2F%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M8%203c-1.552%200-2.94.707-3.857%201.818a.5.5%200%201%201-.771-.636A6.002%206.002%200%200%201%2013.917%207H12.9A5%205%200%200%200%208%203M3.1%209a5.002%205.002%200%200%200%208.757%202.182.5.5%200%201%201%20.771.636A6.002%206.002%200%200%201%202.083%209z'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .icon-graph-up-arrow::before {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%2307589d'%20class%3D'bi%20bi-graph-up-arrow'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M0%200h1v15h15v1H0zm10%203.5a.5.5%200%200%201%20.5-.5h4a.5.5%200%200%201%20.5.5v4a.5.5%200%200%201-1%200V4.9l-3.613%204.417a.5.5%200%200%201-.74.037L7.06%206.767l-3.656%205.027a.5.5%200%200%201-.808-.588l4-5.5a.5.5%200%200%201%20.758-.06l2.609%202.61L13.445%204H10.5a.5.5%200%200%201-.5-.5'%2F%3E%3C%2Fsvg%3E");
}

body.index-modern.trouble-page .card-title {
  font-size: 1rem;
}

body.index-modern.trouble-page .card-desc {
  color: #617185;
  font-size: .84rem;
}

body.index-modern.trouble-page .link-list {
  gap: 6px;
}

body.index-modern.trouble-page .link-list-item {
  padding: 10px 12px;
  border: 1px solid #d8e4f2;
  border-radius: 4px;
  background: #fbfdff;
}

body.index-modern.trouble-page .link-list-item:hover {
  background: #f3faff;
}

body.index-modern.trouble-page .alert-box.info {
  border: 1px solid #cfe1f5;
  background: #f6fbff;
  color: #355372;
}

@media (max-width: 640px) {
  body.index-modern.manual-page .section-hero,
  body.index-modern.trouble-page .section-hero,
  body.index-modern.startup-page .section-hero,
  body.index-modern.contact-page .section-hero,
  body.index-modern.status-page .section-hero {
    padding: 22px 0 26px;
  }

  body.index-modern.manual-page .section-hero::before,
  body.index-modern.trouble-page .section-hero::before,
  body.index-modern.startup-page .section-hero::before,
  body.index-modern.contact-page .section-hero::before,
  body.index-modern.status-page .section-hero::before {
    background:
      linear-gradient(52deg, rgba(24, 136, 213, .16) 0 18%, transparent 18% 100%) left top / 100% 96px no-repeat,
      linear-gradient(128deg, transparent 0 70%, rgba(24, 136, 213, .10) 70% 100%) right top / 100% 120px no-repeat,
      #fff;
  }

  body.index-modern.manual-page .section-hero h1,
  body.index-modern.trouble-page .section-hero h1,
  body.index-modern.startup-page .section-hero h1,
  body.index-modern.contact-page .section-hero h1,
  body.index-modern.status-page .section-hero h1 {
    font-size: 1.7rem;
  }

  body.index-modern.manual-page .section-hero p,
  body.index-modern.trouble-page .section-hero p,
  body.index-modern.startup-page .section-hero p,
  body.index-modern.contact-page .section-hero p,
  body.index-modern.status-page .section-hero p {
    font-size: .92rem;
    line-height: 1.75;
  }

  body.index-modern.manual-page .search-wrap,
  body.index-modern.trouble-page .search-wrap {
    padding: 14px;
  }

  body.index-modern.manual-page .search-box input,
  body.index-modern.trouble-page .search-box input {
    min-height: 56px;
  }

  body.index-modern.manual-page .cat-grid {
    gap: 22px;
  }

  body.index-modern.startup-page .startup-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body.index-modern.startup-page .step-item {
    gap: 12px;
    padding-bottom: 18px;
  }

  body.index-modern.startup-page .step-num-box {
    width: 36px;
    height: 36px;
    font-size: .9rem;
  }

  body.index-modern.startup-page .step-body {
    padding: 16px;
  }

  body.index-modern.startup-page .startup-side-wrap {
    position: static;
  }

  body.index-modern.startup-page .startup-side-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  body.index-modern.startup-page .startup-side-btn + .startup-side-btn {
    margin-top: 0;
  }

  body.index-modern.contact-page .contact-intro-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.index-modern.contact-page .contact-intro-actions .btn {
    justify-content: center;
    width: 100%;
  }

  body.index-modern.contact-page .contact-method-heading h2 {
    font-size: 1.9rem;
  }

  body.index-modern.contact-page .contact-method-grid > .card {
    padding: 22px 18px !important;
  }

  body.index-modern.contact-page .contact-prep-card {
    padding: 22px 18px !important;
  }

  body.index-modern.trouble-page .section-block {
    margin-bottom: 28px;
  }

  body.index-modern.status-page .status-page-banner {
    padding: 16px;
    align-items: flex-start;
  }

  body.index-modern.status-page .status-detail-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body.index-modern.status-page .status-table-wrap {
    overflow-x: auto;
  }

  body.index-modern.status-page .status-table {
    min-width: 620px;
  }

  body.index-modern.status-page .status-detail-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body.index-modern.status-page .status-empty-state {
    align-items: flex-start;
  }

  body.index-modern.status-page .status-subscribe-box {
    padding: 20px;
  }

  body.index-modern.status-page .status-subscribe-actions {
    width: 100%;
  }

  body.index-modern.status-page .status-subscribe-actions .btn {
    justify-content: center;
    flex: 1 1 170px;
  }

  body.index-modern.trouble-page .faq-index-grid {
    grid-template-columns: 1fr;
  }
}

body.index-modern.notices-page .notice-pager {
  gap: 8px;
}

body.index-modern.notices-page .pager-btn {
  width: 42px;
  height: 42px;
  border: 1px solid #d8e4f2;
  background: #fff;
  color: #728196;
  box-shadow: none;
}

body.index-modern.notices-page .pager-btn:hover:not(:disabled):not(.active) {
  border-color: var(--replica-blue);
  background: #f5fbff;
  color: var(--replica-blue);
}

body.index-modern.notices-page .pager-btn.active {
  border-color: var(--replica-blue);
  background: var(--replica-blue);
  box-shadow: 0 10px 22px rgba(24, 136, 213, .22);
}

@media (max-width: 640px) {
  body.index-modern.notices-page .section-hero {
    padding: 22px 0 26px;
  }

  body.index-modern.notices-page .section-hero::before {
    background:
      linear-gradient(52deg, rgba(24, 136, 213, .16) 0 18%, transparent 18% 100%) left top / 100% 96px no-repeat,
      linear-gradient(128deg, transparent 0 70%, rgba(24, 136, 213, .10) 70% 100%) right top / 100% 120px no-repeat,
      #fff;
  }

  body.index-modern.notices-page .section-hero h1 {
    font-size: 1.7rem;
  }

  body.index-modern.notices-page .section-hero p {
    font-size: .92rem;
    line-height: 1.75;
  }

  body.index-modern.notices-page .notice-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px;
  }

  body.index-modern.notices-page .notice-date {
    order: 0;
  }
}

/* ===== タブ切り替え — コンテンツ表示制御 ===== */

/* notices ページ: data-active-tab で表示するタイプだけ残す */
.notice-list[data-active-tab] .notice-item[data-notice-type] {
  display: none;
}
.notice-list[data-active-tab="notice"] .notice-item[data-notice-type="notice"],
.notice-list[data-active-tab="news"]   .notice-item[data-notice-type="news"] {
  display: flex;
}

/* トップページ compact: 同様 */
.notice-compact[data-active-tab] .notice-compact-item[data-notice-type] {
  display: none;
}
.notice-compact[data-active-tab="notice"] .notice-compact-item[data-notice-type="notice"],
.notice-compact[data-active-tab="news"]   .notice-compact-item[data-notice-type="news"] {
  display: flex;
}

/* ===== お知らせページ タブナビ ===== */
body.index-modern.notices-page .notice-tab-nav {
  display: flex;
  border-bottom: 2px solid #d8e4f2;
  margin-bottom: 28px;
}

body.index-modern.notices-page .notice-tab-btn {
  position: relative;
  padding: 12px 32px;
  font-size: .95rem;
  font-weight: 600;
  color: #728196;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.index-modern.notices-page .notice-tab-btn:hover {
  color: var(--color-primary);
}

body.index-modern.notices-page .notice-tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

body.index-modern.notices-page .notice-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: #e4edf8;
  color: #728196;
  font-size: .72rem;
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}

body.index-modern.notices-page .notice-tab-btn.active .notice-tab-count {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 640px) {
  body.index-modern.notices-page .notice-tab-btn {
    padding: 10px 20px;
    font-size: .88rem;
  }
}

/* ===== お知らせページ ページング ===== */
.notice-pager-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 8px;
}
.notice-pager {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-white);
  color: var(--color-text-sub);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
  padding: 0;
}
.pager-btn:hover:not(:disabled):not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-l);
}
.pager-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(26,95,168,.25);
}
.pager-btn:disabled {
  opacity: .3;
  cursor: default;
}
.pager-btn.pager-arrow {
  color: var(--color-text-sub);
  font-size: 1.1rem;
}

/* ===== Manual Sidebar Layout ===== */
.manual-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

.manual-toc {
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border: 1px solid #dce8f5;
  border-radius: 10px;
  background: #fff;
}

.toc-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8aa4be;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #e8f0fa;
  background: #f8fbff;
}

.toc-item {
  border-bottom: 1px solid #e8f0fa;
}
.toc-item:last-child {
  border-bottom: none;
}

.toc-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px 11px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  color: #1d2e42;
  text-align: left;
  gap: 6px;
  transition: background .15s, color .15s;
}
.toc-cat-btn:hover,
.toc-item.is-open > .toc-cat-btn {
  background: #eef5ff;
  color: #1a60b0;
}

.toc-arrow {
  flex-shrink: 0;
  font-size: .72rem;
  color: #9db5cc;
  transition: transform .2s;
  display: inline-block;
}
.toc-item.is-open > .toc-cat-btn .toc-arrow {
  transform: rotate(90deg);
}

.toc-sub-list {
  display: none;
  padding: 4px 0 8px;
  background: #f4f9ff;
}
.toc-item.is-open > .toc-sub-list {
  display: block;
}

.toc-sub-link {
  display: block;
  padding: 6px 14px 6px 26px;
  font-size: .82rem;
  color: #3a5470;
  text-decoration: none;
  line-height: 1.45;
  transition: color .15s, background .15s;
}
.toc-sub-link:hover {
  color: #1a60b0;
  background: #e4eeff;
  text-decoration: none;
}

.manual-content {
  min-width: 0;
}

@media (max-width: 860px) {
  .manual-layout {
    grid-template-columns: 1fr;
  }
  .manual-toc {
    position: static;
    max-height: none;
  }
}

/* ===== Manual Article ===== */
.article-toc {
  background: #f5f9ff;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 32px;
  font-size: .88rem;
}
.article-toc-title {
  font-weight: 700;
  color: #2a4060;
  margin-bottom: 10px;
  font-size: .9rem;
}
.article-toc-list {
  margin: 0;
  padding-left: 1.4em;
  line-height: 2;
  color: #1a5098;
}
.article-toc-list a { color: #1a5098; text-decoration: none; }
.article-toc-list a:hover { text-decoration: underline; }
.article-toc-list ol { padding-left: 1.4em; margin: 0; }

.article-section { margin-bottom: 40px; }

.article-h2 {
  font-size: 1.18rem;
  font-weight: 700;
  color: #162434;
  padding-bottom: 10px;
  border-bottom: 2px solid #1a60b0;
  margin: 0 0 20px;
}

.article-h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1d2e42;
  padding: 8px 14px;
  background: #eef5ff;
  border-left: 4px solid #1a60b0;
  border-radius: 0 6px 6px 0;
  margin: 24px 0 14px;
}

.article-steps { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }

.article-step {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #d8e8f6;
  border-radius: 8px;
}
.article-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: #1a60b0;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  margin-top: 2px;
}
.article-step-body { flex: 1; min-width: 0; }
.article-step-body h4 { font-size: .95rem; font-weight: 700; color: #1d2e42; margin: 0 0 8px; }
.article-step-body p { font-size: .88rem; color: #3a5060; line-height: 1.8; margin: 0 0 8px; }
.article-step-body p:last-child { margin-bottom: 0; }

.article-table { width: 100%; border-collapse: collapse; font-size: .87rem; margin: 12px 0; }
.article-table th, .article-table td {
  padding: 9px 13px;
  border: 1px solid #ccdae8;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.article-table th {
  background: #eef4fc;
  color: #1d2e42;
  font-weight: 600;
  width: 28%;
  white-space: nowrap;
}
.article-table .sub { font-size: .78rem; color: #7a95b0; display: block; margin-top: 3px; }

.article-note {
  background: #f0f7ff;
  border: 1px solid #b8d4ee;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: .87rem;
  color: #2a4060;
  line-height: 1.8;
}
.article-note-title {
  font-weight: 700;
  color: #1a5098;
  margin-bottom: 4px;
  font-size: .88rem;
}

.article-dl { margin: 12px 0; }
.article-dl dt {
  font-weight: 700;
  color: #1d2e42;
  font-size: .9rem;
  padding: 8px 13px;
  background: #eef4fc;
  border-left: 4px solid #1a60b0;
  border-radius: 0 5px 5px 0;
  margin: 14px 0 6px;
}
.article-dl dd { padding: 0 0 0 14px; font-size: .87rem; color: #3a5060; line-height: 1.8; margin: 0; }

.article-img {
  background: #e8f2fb;
  border: 1px dashed #9bbad8;
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  font-size: .78rem;
  color: #7a9ab8;
  margin: 10px 0;
}

.article-link-list { list-style: none; margin: 0; padding: 0; }
.article-link-list li { border-top: 1px solid #e0eaf5; }
.article-link-list li:last-child { border-bottom: 1px solid #e0eaf5; }
.article-link-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  font-size: .9rem;
  color: #1a5098;
  text-decoration: none;
}
.article-link-list a:hover { color: #1244c0; text-decoration: underline; }
.article-link-list a::before { content: "›"; font-weight: 700; color: #1a60b0; }

/* ===== FAQ カテゴリ一覧 ===== */
.faq-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.faq-cat-box {
  border: 1px solid #dce8f5;
  border-radius: 10px;
  background: #fff;
  transition: box-shadow .18s, transform .18s;
}
.faq-cat-box:hover {
  box-shadow: 0 4px 18px rgba(24,96,176,.13);
  transform: translateY(-2px);
}

.faq-cat-link {
  display: flex;
  align-items: center;
  padding: 18px 16px;
  gap: 14px;
  text-decoration: none !important;
  color: inherit;
  height: 100%;
}

.faq-cat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}
.faq-icon-contract { background: #e8a230; }
.faq-icon-server   { background: #2e7bd4; }
.faq-icon-vps      { background: #1a60b0; }
.faq-icon-app      { background: #7c52c8; }
.faq-icon-domain   { background: #28a06e; }
.faq-icon-ssl      { background: #1896a4; }
.faq-icon-game     { background: #e05a44; }
.faq-icon-prohibit { background: #8090a4; }
.faq-icon-support  { background: #3a6ea8; }

.faq-cat-body { flex: 1; min-width: 0; }
.faq-cat-ttl {
  font-size: .92rem;
  font-weight: 700;
  color: #1d2e42;
  margin-bottom: 3px;
  line-height: 1.4;
}
.faq-cat-desc {
  font-size: .78rem;
  color: #6b7e94;
  line-height: 1.5;
}
.faq-cat-arr {
  color: #b0c8e0;
  font-size: .9rem;
  flex-shrink: 0;
}

/* FAQ お問い合わせ */
.faq-contact-section {
  background: #f5f9ff;
  border: 1px solid #dce8f5;
  border-radius: 12px;
  padding: 28px 32px;
  margin: 40px 0 0;
}
.faq-contact-ttl {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1d2e42;
  margin-bottom: 6px;
}
.faq-contact-read {
  font-size: .88rem;
  color: #5d6b7d;
  margin-bottom: 20px;
  line-height: 1.7;
}
.faq-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.faq-contact-box {
  background: #fff;
  border: 1px solid #dce8f5;
  border-radius: 8px;
  padding: 18px 20px;
}
.faq-contact-box-ttl {
  font-size: .84rem;
  font-weight: 700;
  color: #1d2e42;
  margin-bottom: 8px;
}
.faq-contact-tel {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a60b0;
  letter-spacing: .02em;
  margin-bottom: 3px;
}
.faq-contact-hours { font-size: .78rem; color: #6b7e94; }
.faq-contact-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 28px;
  background: var(--color-primary);
  color: #fff !important;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s;
}
.faq-contact-btn:hover { background: var(--color-primary-d); }

.faq-note {
  font-size: .78rem;
  color: #7a8fa4;
  margin-top: 14px;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .faq-cat-grid       { grid-template-columns: repeat(2, 1fr); }
  .faq-contact-grid   { grid-template-columns: 1fr; }
  .faq-contact-section { padding: 20px; }
}
@media (max-width: 560px) {
  .faq-cat-grid { grid-template-columns: 1fr; }
}

/* ===== Unified Header ===== */
body.index-modern .site-header {
  position: relative;
  height: 68px;
  border-top: 3px solid var(--replica-blue);
  border-bottom: 1px solid #e7eef5;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 24px rgba(14, 45, 85, .06);
  backdrop-filter: blur(10px);
}

body.index-modern .header-inner {
  height: 65px;
  gap: 18px;
}

body.index-modern .site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #6e7785;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

body.index-modern .site-logo:hover {
  color: var(--replica-blue-dark);
}

body.index-modern .header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

body.index-modern .header-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #d9e6f2;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(13, 50, 94, .04);
  color: #294057;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.index-modern .header-nav a:hover,
body.index-modern .header-nav a.active {
  border-color: #b9d7f7;
  background: #eef6ff;
  color: var(--replica-blue);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(14, 45, 85, .08);
  transform: translateY(-1px);
}

body.index-modern .header-nav .nav-contact {
  border-color: var(--replica-blue);
  background: var(--replica-blue);
  color: #fff;
  box-shadow: 0 12px 24px rgba(24, 136, 213, .18);
}

body.index-modern .header-nav .nav-contact:hover,
body.index-modern .header-nav .nav-contact.active {
  border-color: var(--replica-blue-dark);
  background: var(--replica-blue-dark);
  color: #fff;
}

body.index-modern .hamburger {
  width: 42px;
  height: 42px;
  border: 1px solid #d9e6f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(14, 45, 85, .06);
}

body.index-modern .hamburger:hover {
  border-color: #b9d7f7;
  background: #f8fbff;
}

body.index-modern .hamburger span {
  background: var(--replica-blue);
}

body.index-modern .mobile-nav {
  top: 68px;
  padding: 16px;
  background: rgba(248, 251, 255, .98);
  border-top: 1px solid #e2ebf5;
}

body.index-modern .mobile-nav a {
  display: block;
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 1px solid #d9e6f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(14, 45, 85, .04);
  color: #294057;
  font-weight: 700;
  text-decoration: none;
}

body.index-modern .mobile-nav a:hover {
  background: #f4f9ff;
  border-color: #b9d7f7;
  color: var(--replica-blue);
  text-decoration: none;
}

/* ===== Manual TOC polish ===== */
body.index-modern .manual-toc {
  padding: 10px;
  border: 1px solid #dce8f5;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
  box-shadow: 0 18px 40px rgba(14, 45, 85, .08);
}

body.index-modern .toc-label {
  margin: -10px -10px 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #e7eef7;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #fbfdff 0%, #f1f7ff 100%);
}

body.index-modern .toc-item {
  margin-top: 8px;
  border: 1px solid #dce8f5;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

body.index-modern .toc-item:first-of-type {
  margin-top: 0;
}

body.index-modern .toc-cat-btn {
  min-height: 52px;
  padding: 14px 16px;
  gap: 14px;
  font-size: .9rem;
}

body.index-modern .toc-cat-btn:hover,
body.index-modern .toc-item.is-open > .toc-cat-btn {
  background: #eef6ff;
}

body.index-modern .toc-item.toc-item-current {
  border-color: var(--replica-blue, #1a6fd4);
  box-shadow: 0 0 0 1px rgba(24, 136, 213, .2), 0 10px 22px rgba(14, 45, 85, .08);
}

body.index-modern .toc-item.toc-item-current > .toc-cat-btn {
  background: var(--replica-blue, #1a6fd4);
  color: #fff;
  font-weight: 800;
}

body.index-modern .toc-item.toc-item-current > .toc-cat-btn .toc-arrow {
  color: #fff;
}

body.index-modern .toc-sub-list {
  padding: 8px;
  background: #fbfdff;
  border-top: 1px solid #e7eef7;
}

body.index-modern .toc-sub-link {
  position: relative;
  padding: 10px 12px 10px 26px;
  border-radius: 8px;
  line-height: 1.5;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

body.index-modern .toc-sub-link + .toc-sub-link {
  margin-top: 4px;
}

body.index-modern .toc-sub-link::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #8bb5e6;
  transform: translateY(-50%);
  transition: background .15s ease;
}

body.index-modern .toc-sub-link:hover::before {
  background: var(--replica-blue);
}

body.index-modern .toc-sub-link.toc-sub-link-active,
body.index-modern .toc-sub-link[aria-current="page"] {
  background: #dceeff;
  color: var(--replica-blue, #1a6fd4);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--replica-blue, #1a6fd4);
}

body.index-modern .toc-sub-link.toc-sub-link-active::before,
body.index-modern .toc-sub-link[aria-current="page"]::before {
  background: var(--replica-blue, #1a6fd4);
}

@media (max-width: 1000px) {
  body.index-modern .header-nav {
    display: none;
  }

  body.index-modern .hamburger {
    display: flex;
  }
}

@media (max-width: 860px) {
  body.index-modern .manual-toc {
    padding: 8px;
  }

  body.index-modern .toc-label {
    margin: -8px -8px 8px;
    border-radius: 10px 10px 0 0;
  }
}

@media (max-width: 640px) {
  body.index-modern .site-header {
    height: 66px;
  }

  body.index-modern .header-inner {
    height: 63px;
    gap: 12px;
  }

  body.index-modern .site-logo {
    font-size: .98rem;
  }

  body.index-modern .mobile-nav {
    top: 66px;
    padding: 14px;
  }
}

/* ── FAQ リスト（困りごとページ詳細） ─────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary.faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 4px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--color-text-main);
  cursor: pointer;
  user-select: none;
  line-height: 1.55;
}

.faq-item summary.faq-q::-webkit-details-marker { display: none; }

.faq-item summary.faq-q::before {
  content: "Q";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
}

.faq-item summary.faq-q::after {
  content: "›";
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--color-primary);
  transition: transform .2s;
}

.faq-item[open] summary.faq-q::after {
  transform: rotate(90deg);
}

.faq-item summary.faq-q:hover {
  color: var(--color-primary);
}

.faq-item .faq-a {
  padding: 4px 4px 20px 34px;
  font-size: .9rem;
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* ===== XServer ロゴ SVG 置き換え ===== */
.site-logo,
body.index-modern .site-logo {
  font-size: 0 !important;
  color: transparent !important;
  background-image: url('../images/xserver-logo.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  min-width: 148px;
  height: 38px;
  gap: 0;
}
.site-logo:hover,
body.index-modern .site-logo:hover {
  color: transparent !important;
  text-decoration: none;
}
.site-logo .logo-mark { display: none; }

.footer-bar-logo,
body.index-modern .footer-bar-logo {
  font-size: 0 !important;
  color: transparent !important;
  background-image: url('../images/xserver-logo-white.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  min-width: 120px;
  height: 30px;
  display: block;
  gap: 0;
}
.footer-bar-logo:hover,
body.index-modern .footer-bar-logo:hover {
  color: transparent !important;
  text-decoration: none;
}
.footer-bar-logo .logo-mark { display: none; }

@media (max-width: 640px) {
  .site-logo,
  body.index-modern .site-logo {
    min-width: 120px;
    height: 32px;
  }
}