@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  --primary-color: #d97706;
  --primary-light: #f59e0b;
  --accent-color: #ea580c;
  --accent-hover: #c2410c;
  --text-main: #333333;
  --text-light: #666666;
  --bg-body: #ffffff;
  --bg-white: #ffffff;
  --bg-light: #fff7ed;
  --bg-footer: #fff7ed;
  --border-color: #e0b78a;
  --shadow-sm: 0 2px 6px rgba(217,119,6,0.08);
  --shadow-md: 0 6px 16px rgba(217,119,6,0.12);
  --shadow-lg: 0 12px 24px rgba(217,119,6,0.15);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --font-family: 'Noto Sans JP', sans-serif;
  --font-en: 'Roboto', sans-serif;
  --transition: all 0.3s ease;
}

/* Base & Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-family);
  color: var(--text-main);
  background-color: var(--bg-body);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-light); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-color); }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }

/* Layout */
.l-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.l-wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  margin-top: 40px;
  margin-bottom: 60px;
}
.l-main { min-width: 0; }
.l-sidebar { width: 100%; }

@media (max-width: 991px) {
  .l-wrapper { grid-template-columns: 1fr; gap: 30px; }
}

/* Affiliate Note */
.c-affiliate-note {
  font-size: 0.75rem;
  color: #999;
  margin: 0;
}

/* Header */
.c-header {
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}
.c-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100px;
  padding: 10px 0;
  gap: 20px;
}
.c-header__inner .header_logo { flex-shrink: 0; padding-left: 0; }
.c-header__inner .header_logo img { max-height: 60px; width: auto; }
.c-header__inner > span { display: flex; justify-content: flex-end; align-items: center; max-width: 100%; width: 100%; }
.c-header__inner > span img { max-width: 100%; height: auto; max-height: 90px; border-radius: 0; }

@media (max-width: 767px) {
  .c-header__inner { flex-direction: column; justify-content: center; padding: 15px 0; gap: 15px; }
  .c-header__inner > span { justify-content: center; }
}

/* Breadcrumb（c-breadcrumb-wrapper の本体定義は L3000 付近に集約） */
.c-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.c-breadcrumb li { display: flex; align-items: center; }
.c-breadcrumb li:not(:last-child)::after {
  content: '>';
  margin-left: 8px;
  font-size: 0.8rem;
  opacity: 0.5;
}
.c-breadcrumb a { color: var(--text-light); }
.c-breadcrumb a:hover { color: var(--primary-light); }

/* Typography */
.c-heading-1, .l-main h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 24px;
  line-height: 1.4;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
  position: relative;
}
.c-heading-1::after, .l-main h1::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent-color);
}
.c-heading-2, .l-main h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 40px 0 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #eef2f9 0%, #ffffff 100%);
  border-left: 6px solid var(--primary-color);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}
.c-heading-3, .l-main h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 30px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.c-heading-3::before, .l-main h3::before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: var(--primary-light);
  border-radius: 2px;
}
.c-heading-4, .l-main h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 24px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px dotted var(--border-color);
}
.c-heading-5, .l-main h5 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 20px 0 12px;
  border-left: 3px solid var(--border-color);
  padding-left: 10px;
}
.c-heading-6, .l-main h6 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 16px 0 10px;
}

/* Footer */
.c-footer {
  background: var(--primary-color);
  color: rgba(255, 255, 255, 0.8);
  padding: 30px 0 20px;
  font-size: 0.85rem;
  margin-top: 60px;
}
.c-footer a { color: #fff; text-decoration: none; transition: color 0.3s; }
.c-footer a:hover { color: var(--accent-color); }
.c-footer__disclaimer {
  margin-bottom: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}
.c-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}
.c-footer__links a { position: relative; }
@media (min-width: 768px) {
  .c-footer__links a:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: -17px;
    color: rgba(255, 255, 255, 0.3);
  }
}
@media (max-width: 767px) {
  .c-footer__links { gap: 15px; flex-direction: column; text-align: center; }
  .c-footer__links a { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; }
  .c-footer__links a:last-child { border-bottom: none; }
}
.c-footer__copy { text-align: center; font-family: var(--font-en); margin-top: 15px; font-size: 0.8rem; }

/* Components */
.c-summary-box {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-md);
}
.c-summary-box__title {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-summary-box p { margin-bottom: 0; }

/* Buttons */
.c-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  background: var(--accent-color);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(232, 97, 10, 0.3);
  transition: var(--transition);
  text-align: center;
  border: none;
  cursor: pointer;
  width: 100%;
  max-width: 400px;
}
.c-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 97, 10, 0.4);
  color: #fff;
}
.c-btn::after {
  content: '→';
  margin-left: 10px;
  transition: transform 0.3s;
}
.c-btn:hover::after { transform: translateX(5px); }

/* Tables */
.c-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 30px 0;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
.c-table th, .c-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  text-align: left;
}
.c-table th:last-child, .c-table td:last-child { border-right: none; }
.c-table tr:last-child th, .c-table tr:last-child td { border-bottom: none; }
.c-table th {
  background: var(--primary-color);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
.c-table tbody tr:nth-child(even) { background: #f9fbfd; }

/* Mobile Table */
@media (max-width: 767px) {
  .c-table thead { display: none; }
  .c-table tr { display: block; border-bottom: 2px solid var(--border-color); }
  .c-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    border-right: none;
    text-align: right;
    padding: 12px 16px;
  }
  .c-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 15px;
    text-align: left;
  }
}

/* FAQ */
.c-faq { margin: 40px 0; }
.c-faq__item {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.c-faq__q {
  padding: 20px;
  font-weight: 700;
  color: var(--primary-color);
  display: flex;
  gap: 15px;
  background: #fff;
}
.c-faq__q::before {
  content: 'Q.';
  color: var(--accent-color);
  font-size: 1.2rem;
  font-family: var(--font-en);
}
.c-faq__a {
  padding: 0 20px 20px;
  display: flex;
  gap: 15px;
  color: var(--text-main);
}
.c-faq__a::before {
  content: 'A.';
  color: var(--primary-light);
  font-weight: 700;
  font-size: 1.2rem;
  font-family: var(--font-en);
}

/* Sidebar Modules */
.c-widget {
  background: var(--bg-light);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
.c-widget__title {
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--primary-color);
  color: #fff;
  padding: 16px 24px;
  margin: -24px -24px 20px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.c-widget__title--sub {
  margin: 30px -24px 20px;
  border-radius: 0;
}
.c-widget__list { list-style: none; }
.c-widget__list li { margin-bottom: 12px; }
.c-widget__list a {
  display: flex;
  align-items: center;
  color: var(--text-main);
  font-size: 0.95rem;
}
.c-widget__list a::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--primary-light);
  border-right: 2px solid var(--primary-light);
  transform: rotate(45deg);
  margin-right: 12px;
}
.c-widget__list a:hover { color: var(--primary-light); padding-left: 5px; }

/* Lists */
.c-list { list-style: none; margin: 20px 0; }
.c-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 10px;
}
.c-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--primary-light);
  border-radius: 50%;
}

/* CTA Card */
.c-cta-card {
  background: #fff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 40px 30px;
  margin: 40px 0;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.c-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}
.c-cta-card__logo { margin: 0 auto 20px; max-height: 50px; width: auto; }
.c-cta-card__title { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; }
.c-cta-card__text { margin-bottom: 30px; color: var(--text-light); font-size: 1.05rem; }

/* Comparison Table (Hikaku) */
.l-main--wide { grid-column: 1 / -1; } /* 1カラム表示用 */

.c-table-hikaku-wrap {
  overflow-x: auto;
  margin: 40px 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  background: #fff;
}
.c-table-hikaku {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.c-table-hikaku th, .c-table-hikaku td {
  padding: 12px 8px; /* はみ出さないように余白を少し詰める */
  border: 1px solid var(--border-color);
  text-align: center;
  vertical-align: middle;
  font-size: 0.9rem; /* フォントを少し小さくして収める */
}
.c-table-hikaku th {
  background: var(--bg-body);
  color: var(--primary-color);
  font-weight: 700;
  /* スマホ以外では折り返しを許容しつつなるべく1行に */
  word-break: keep-all; 
}
/* 固定列ヘッダー */
.c-table-hikaku th.col-head { 
  background: var(--primary-color); 
  color: #fff; 
  position: sticky; 
  left: 0; 
  z-index: 10; 
  min-width: 150px;
}
.c-table-hikaku td.col-head { 
  background: #fafafa; 
  font-weight: 700; 
  position: sticky; 
  left: 0; 
  z-index: 10; 
  text-align: left; 
}
/* おすすめ列ハイライト */
.c-table-hikaku th.recommended {
  background: #fffcf5;
  border: 2px solid var(--accent-color);
  border-bottom: none;
  position: relative;
}
.c-table-hikaku td.recommended {
  background: #fffcf5;
  border-left: 2px solid var(--accent-color);
  border-right: 2px solid var(--accent-color);
}
.c-table-hikaku tr:last-child td.recommended {
  border-bottom: 2px solid var(--accent-color);
}
.c-table-hikaku .recommended-badge {
  display: block;
  background: var(--accent-color);
  color: #fff;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 20px;
  margin: -30px auto 10px;
  width: max-content;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(232, 97, 10, 0.4);
}
.c-table-hikaku .price { 
  font-size: 1.3rem; 
  font-weight: 700; 
  color: var(--accent-hover); 
  display: block;
  margin-bottom: 5px;
}
.c-table-hikaku .btn-wrap { padding: 10px; }
.c-table-hikaku .c-btn { 
  padding: 12px 20px; 
  font-size: 0.95rem; 
  width: 100%; 
}

/* スマホ表示時のテーブル微調整 */
@media (max-width: 991px) {
  .c-table-hikaku-wrap { 
    border-radius: 0; 
    border-left: none; 
    border-right: none; 
    margin: 20px -20px; 
    width: calc(100% + 40px); 
  }
  /* スマホの横スクロール時に一番左の列を少し影で浮かせる */
  .c-table-hikaku th.col-head::after, .c-table-hikaku td.col-head::after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 100%;
    box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.15);
  }
}

/* モバイル表示時のカード型レイアウト（比較表） */
@media (max-width: 767px) {
  .c-table-hikaku-wrap { overflow-x: visible; background: transparent; border: none; box-shadow: none; margin: 20px 0; width: 100%; }
  .c-table-hikaku, .c-table-hikaku tbody, .c-table-hikaku tr, .c-table-hikaku td { display: block; width: 100%; }
  .c-table-hikaku { min-width: 0; }
  .c-table-hikaku thead { display: none; }
  .c-table-hikaku tr { 
    margin-bottom: 24px; 
    background: #fff; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-sm); 
    overflow: hidden;
  }
  .c-table-hikaku td { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 16px; 
    border-bottom: 1px solid #eee; 
    text-align: right; 
    border-right: none;
    border-left: none;
  }
  .c-table-hikaku td:last-child { border-bottom: none; }
  .c-table-hikaku td::before { 
    content: attr(data-label); 
    font-weight: 700; 
    color: var(--primary-color); 
    width: 40%; 
    text-align: left; 
    flex-shrink: 0;
  }
  .c-table-hikaku td.campaign-detail {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
  }
  .c-table-hikaku td.campaign-detail::before {
    margin-bottom: 8px;
    width: 100%;
  }
  .c-table-hikaku td[data-label="詳細"] { justify-content: center; background: #fafafa; }
  .c-table-hikaku td[data-label="詳細"]::before { display: none; }
  .c-table-hikaku .c-btn-detail { width: 100%; max-width: 300px; padding: 12px; }
}

/* 行ベースの比較表 (hikaku_table) */
.c-table--sortable th {
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
}
.c-table--sortable th:hover { background: var(--primary-light); }
.c-table--sortable th.is-active {
  background: var(--accent-color);
  color: #fff;
}
.c-table--sortable td.is-active {
  background: #fffcf5;
}

/* 備考欄（キャンペーン等）の幅を確保し、縦長になるのを防ぐ */
.c-table--sortable td.campaign-detail {
  min-width: 200px; /* PC画面に収まるように調整 */
  padding: 12px 16px;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* 詳細ボタンのスタイリッシュ化 */
.c-btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--bg-white);
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  min-width: 80px;
  transition: all 0.2s;
  white-space: nowrap;
}
.c-btn-detail:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.c-btn-detail::after {
  content: '>';
  margin-left: 6px;
  font-family: var(--font-en);
}

/* 絞り込み検索ウィジェット (jouken) */
.c-search-box {
  background: #fcfcfc;
  border: 2px solid var(--border-color);
}
.c-search-group {
  margin-bottom: 20px;
}
.c-search-label {
  display: block;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.c-select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
.c-checkbox-list label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--text-main);
  cursor: pointer;
}
.c-checkbox-list input[type="checkbox"],
.c-checkbox-list input[type="radio"] {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

/* ===================================================================
   既存コンテンツ互換用スタイル（レガシー互換）
   （過去の記事ページにそのまま適用してもデザインが崩れないための定義）
=================================================================== */
/* 注記（annotation） */
ul.annotation {
  list-style: none;
  margin: 20px 0;
  font-size: 0.85rem;
  color: var(--text-light);
}
ul.annotation li { margin-bottom: 6px; padding-left: 1em; text-indent: -1em; line-height: 1.5; }
ul.annotation li::before { content: '※'; margin-right: 4px; color: var(--text-light); }

/* ドットリスト（dot） */
ul.dot {
  list-style: none;
  margin: 15px 0;
  padding-left: 5px;
}
ul.dot li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 8px;
}
ul.dot li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: var(--primary-light);
  font-size: 0.7em;
  line-height: 2.2;
}

/* 関連トピック・カード型（c-related-topics）— CV 上のクラスター内相互リンクに使用
   構造：<li> がカード本体、<a> はタイトル部分のリンク、<span class="__desc"> は補足説明（リンク外）
   理由：アンカーテキストを「タイトル」のみに絞ることで SEO シグナルをクリーンに保つ
   li 全体クリック：<a>::after で擬似要素オーバーレイによりカード全面をクリック可能に拡張 */
.c-related-topics {
  list-style: none;
  margin: 20px 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.c-related-topics li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.c-related-topics li:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.c-related-topics a {
  display: inline-block;
  text-decoration: none;
  color: var(--primary-color);
  transition: color 0.2s;
}
.c-related-topics a:hover {
  text-decoration: underline;
}
/* li 全面をクリック可能にするオーバーレイ：a の擬似要素を li 全体へ拡張。
   __desc はリンク外だがカードクリックで遷移する UX を実現。 */
.c-related-topics a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.c-related-topics__desc {
  position: relative;
  z-index: 2;
  font-size: 0.86rem;
  color: var(--text-light);
  line-height: 1.6;
}
.c-related-topics__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.4;
}

/* 関連リンク（related-links） */
ul.related-links { margin: 20px 0; list-style: none; }
ul.related-links li { margin-bottom: 12px; }
ul.related-links li a {
  display: inline-flex;
  align-items: center;
  color: var(--primary-light);
  font-weight: 500;
}
ul.related-links li a::before {
  content: '>';
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-en);
  font-weight: bold;
}

/* 旧FAQ（dl.faq） */
dl.faq { margin: 30px 0; }
dl.faq dt {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 10px;
  padding: 12px 15px 12px 2.5rem;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  position: relative;
}
dl.faq dt::before { content: 'Q.'; position: absolute; left: 15px; color: var(--accent-color); font-weight: 700; font-family: var(--font-en); }
dl.faq dd {
  margin: 0 0 20px;
  padding: 0 15px 15px 2.5rem;
  position: relative;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
}
dl.faq dd::before { content: 'A.'; position: absolute; left: 15px; color: var(--primary-light); font-weight: 700; font-family: var(--font-en); }

/* もっと見るリンク（more） */
p.more, p.more-s { margin: 20px 0; }
p.more a, p.more-s a {
  display: inline-flex;
  align-items: center;
  color: var(--primary-light);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: all 0.2s;
}
p.more a::after, p.more-s a::after {
  content: '→';
  margin-left: 6px;
  transition: transform 0.2s;
}
p.more a:hover, p.more-s a:hover { text-decoration-color: var(--primary-light); }
p.more a:hover::after, p.more-s a:hover::after { transform: translateX(5px); }

/* 文字装飾（bold, orange, red, highlight等） */
span.bold { font-weight: 700; }

/* 要点ボックス（summary-box）のタイトル：旧 <p><strong>○○の要点</strong></p> から
   strong 装飾誤用を排除し、p.summary-title + CSS で太字維持に置き換え */
p.summary-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary-color);
  margin: 0 0 8px;
}
.orange { color: var(--accent-color); font-weight: 700; }
.red { color: #e60000; font-weight: 700; }
.text-hightlight { font-weight: 700; background-color: #ffff00; padding: 0 4px; }
.textsmall, .text85 { font-size: 0.85rem; }
.text120 { font-size: 1.2rem; }

/* 段落・余白・配置（padding-top, margin-bottom, t-center等汎用クラス） */
.padding-top { padding-top: 20px; }
.padding-bottom { padding-bottom: 20px; }
.padding-content { padding: 0 10px 10px; }
.margin-bottom { margin-bottom: 20px; }
.t-center { text-align: center; }
.clear { clear: both; }
.right_col { float: right; }
.left_col { float: left; }

/* 結論ファースト要約ボックス（旧 summary-box） */
.summary-box {
  background: #f0f6ff;
  border-left: 4px solid var(--primary-color);
  padding: 16px 18px;
  margin: 15px 0 25px;
  line-height: 1.7;
}
.summary-box p { margin: 0 0 6px; padding: 0; }
.summary-box p:last-child { margin-bottom: 0; }
.summary-box strong { font-weight: 700; }

/* CSSボタン（bt-detail / bt-web / a.req） */
.bt-detail, .bt-web, a.req {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: var(--accent-color);
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  margin: 10px 0;
  box-shadow: 0 4px 10px rgba(232, 97, 10, 0.3);
  transition: all 0.3s;
}
.bt-detail:hover, .bt-web:hover, a.req:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}
.bt-detail { background: var(--bg-white); color: var(--primary-color); border: 2px solid var(--primary-color); box-shadow: none; }
.bt-detail:hover { background: var(--primary-color); color: #fff; }

/* その他のリスト（sitemap, annotation_voice） */
ul.sitemap { margin: 20px 10px 20px 20px; list-style-type: disc; }
ul.sitemap li { padding-bottom: 5px; }
ul.sitemap li.subc { margin-left: 20px; list-style-type: circle; }
ul.annotation_voice { list-style: none; padding: 0; margin: 15px 0; }
ul.annotation_voice li { padding-left: 1.2em; margin-bottom: 5px; position: relative; }
ul.annotation_voice li::before { content: '※'; position: absolute; left: 0; }

/* ホバー透過（hover_alpha） */
a.hover_alpha:hover img { opacity: 0.7; transition: opacity 0.3s; }

/* 新テンプレート用リスト（c-list） */
.c-list { list-style: none; margin: 15px 0; padding-left: 0; }
.c-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 10px;
  line-height: 1.7;
}
.c-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--primary-light);
  border-radius: 50%;
}

/* メインコンテンツ内の基本段落スタイル */
.l-main p {
  margin-bottom: 16px;
  line-height: 1.8;
}

/* em（強調）のフォールバック */
.l-main em { font-weight: 700; font-style: normal; }

/* ===================================================================
   Antigravity 追加分（2026-04-28）
   - Mobile Navigation
   - Hero Section
   - Trust Badges
   - Ranking Card
   - Merit Card
   - CTA Card HTML example styles
=================================================================== */

/* ------------------------------------------------------------------
   Mobile Navigation（ハンバーガーメニュー）
------------------------------------------------------------------ */
.c-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  flex-shrink: 0;
}
.c-hamburger:hover { background: var(--bg-light); }
.c-hamburger__line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(2) {
  opacity: 0;
}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {
  .c-hamburger { display: flex; }
  /* ヘッダーにハンバーガーを置く場合の横並び調整 */
  .c-header__inner--with-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    gap: 10px;
  }
  .c-header__inner--with-nav .header_logo { order: 1; }
  .c-header__inner--with-nav .c-hamburger { order: 2; }
  .c-header__inner--with-nav > span { order: 3; width: 100%; justify-content: center; }
}

/* モバイルナビ オーバーレイ */
.c-mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.c-mobile-nav-overlay.is-open {
  display: block;
  opacity: 1;
}

/* モバイルナビ 本体 */
.c-mobile-nav {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  z-index: 201;
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.c-mobile-nav.is-open { right: 0; }

.c-mobile-nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--primary-color);
  color: #fff;
  flex-shrink: 0;
}
.c-mobile-nav__title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.c-mobile-nav__close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px;
  transition: opacity 0.2s;
}
.c-mobile-nav__close:hover { opacity: 0.7; }

.c-mobile-nav__body { flex: 1; padding: 8px 0; }

.c-mobile-nav__section-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 20px 8px;
}
.c-mobile-nav__list { list-style: none; }
.c-mobile-nav__list li { border-bottom: 1px solid #f0f0f0; }
.c-mobile-nav__list a {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: var(--text-main);
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s;
  gap: 12px;
}
.c-mobile-nav__list a::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--primary-light);
  border-right: 2px solid var(--primary-light);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.c-mobile-nav__list a:hover {
  background: var(--bg-light);
  color: var(--primary-color);
}

/* ------------------------------------------------------------------
   Hero Section（トップページ専用）
------------------------------------------------------------------ */
.c-hero {
  background: linear-gradient(135deg, #eef3fb 0%, #f9f6f0 100%);
  padding: 60px 0 50px;
  overflow: hidden;
  position: relative;
}
.c-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(217,119,6,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.c-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.c-hero__body { order: 1; }
.c-hero__image { order: 2; }

.c-hero__h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.45;
  margin-bottom: 20px;
}
.c-hero__h1 strong { font-weight: 700; }

.c-hero__sub {
  font-size: 1.05rem;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* ヒーローCTAボタン群 */
.c-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.c-btn--primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 28px;
  background: var(--accent-color);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(232, 97, 10, 0.35);
  transition: var(--transition);
  white-space: nowrap;
  text-align: center;
  gap: 8px;
}
.c-btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(232, 97, 10, 0.45);
  color: #fff;
}
.c-btn--secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 26px;
  background: #fff;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  border: 2px solid var(--primary-color);
  transition: var(--transition);
  white-space: nowrap;
  text-align: center;
  gap: 8px;
}
.c-btn--secondary:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-2px);
}

/* ヒーロー画像 */
.c-hero__image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-light);
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 991px) {
  .c-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .c-hero__image { order: -1; max-width: 480px; margin: 0 auto; width: 100%; }
  .c-hero { padding: 40px 0; }
}
@media (max-width: 767px) {
  .c-hero { padding: 30px 0; }
  .c-hero__h1 { font-size: 1.45rem; }
  .c-hero__cta { flex-direction: column; }
  .c-btn--primary, .c-btn--secondary { width: 100%; max-width: 340px; }
}

/* ------------------------------------------------------------------
   Ranking Card（ランキングカード）
------------------------------------------------------------------ */
.c-ranking-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 30px 0;
}
@media (max-width: 991px) { .c-ranking-list { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; } }
@media (max-width: 767px) { .c-ranking-list { gap: 20px; } }

.c-ranking-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.c-ranking-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* No.1 強調 */
.c-ranking-card--1st {
  border: 2px solid #FFD700;
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.25);
}
.c-ranking-card--1st:hover { box-shadow: 0 10px 32px rgba(255, 215, 0, 0.35); }

/* 順位バッジ */
.c-ranking-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: #fff;
}
.c-ranking-card__badge--1st { background: linear-gradient(90deg, #B8860B, #FFD700, #B8860B); color: #5a3e00; }
.c-ranking-card__badge--2nd { background: linear-gradient(90deg, #888, #C0C0C0, #888); }
.c-ranking-card__badge--3rd { background: linear-gradient(90deg, #8B5522, #CD7F32, #8B5522); }
.c-ranking-card__badge--default { background: var(--primary-color); }

.c-ranking-card__badge-crown {
  font-size: 1.1rem;
}

/* カード本体 */
.c-ranking-card__body {
  padding: 20px 20px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c-ranking-card__logo-wrap {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.c-ranking-card__logo-wrap img {
  max-height: 60px;
  width: auto;
  border-radius: 0;
  object-fit: contain;
}

.c-ranking-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 6px;
  text-align: center;
}
.c-ranking-card__catch {
  font-size: 0.85rem;
  color: var(--accent-color);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* 料金グリッド */
.c-ranking-card__price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.c-ranking-card__price-item {
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  text-align: center;
}
.c-ranking-card__price-label {
  font-size: 0.72rem;
  color: var(--text-light);
  display: block;
  margin-bottom: 4px;
}
.c-ranking-card__price-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-color);
  display: block;
}

/* 特徴リスト */
.c-ranking-card__features {
  list-style: none;
  margin-bottom: 16px;
  flex: 1;
}
.c-ranking-card__features li {
  font-size: 0.88rem;
  color: var(--text-main);
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}
.c-ranking-card__features li:last-child { border-bottom: none; }
.c-ranking-card__features li::before {
  content: '✓';
  color: var(--accent-color);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.85rem;
}

/* CTAボタンエリア */
.c-ranking-card__cta {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-light);
  border-top: 1px solid var(--border-color);
}
.c-ranking-card__cta .c-btn--primary {
  font-size: 0.9rem;
  padding: 12px 20px;
  width: 100%;
  max-width: 100%;
}
.c-ranking-card__cta .c-btn-detail {
  width: 100%;
  justify-content: center;
}

/* ------------------------------------------------------------------
   Merit Cards（メリット・特長カード グリッド）
------------------------------------------------------------------ */
.c-merit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 30px 0;
}
@media (max-width: 767px) { .c-merit-grid { grid-template-columns: 1fr; gap: 14px; } }
@media (min-width: 1024px) { .c-merit-grid { grid-template-columns: repeat(4, 1fr); } }

.c-merit-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s;
}
.c-merit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.c-merit-card__icon {
  font-size: 2.4rem;
  margin-bottom: 14px;
  display: block;
  line-height: 1;
}
.c-merit-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
}
.c-merit-card__text {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* ------------------------------------------------------------------
   Preview Compare Table（トップ用簡易比較表）
------------------------------------------------------------------ */
.c-preview-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
.c-preview-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 480px;
}
.c-preview-table th, .c-preview-table td {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  text-align: center;
  vertical-align: middle;
  font-size: 0.92rem;
}
.c-preview-table th {
  background: var(--primary-color);
  color: #fff;
  font-weight: 600;
}
.c-preview-table td:first-child { font-weight: 700; text-align: left; }
.c-preview-table tbody tr:hover { background: #f9fbfd; }

/* ------------------------------------------------------------------
   Section Header（汎用セクション見出し）
------------------------------------------------------------------ */
.c-section-header {
  text-align: center;
  margin-bottom: 36px;
}
.c-section-header__label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-color);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 4px 16px;
  border: 1px solid var(--accent-color);
  border-radius: 50px;
}
.c-section-header__title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.4;
  margin: 0 0 12px;
}
.c-section-header__desc {
  font-size: 0.95rem;
  color: var(--text-light);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ------------------------------------------------------------------
   Article Eyecatch（記事アイキャッチ画像エリア）
------------------------------------------------------------------ */
.c-eyecatch {
  margin-bottom: 28px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.c-eyecatch img {
  width: 100%;
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.c-eyecatch__caption {
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: right;
  padding: 6px 12px;
  background: var(--bg-light);
  border-top: 1px solid var(--border-color);
}

/* ------------------------------------------------------------------
   CTA Card（申し込みCTAカード）HTML サンプル用補足スタイル
------------------------------------------------------------------ */
.c-cta-card__service-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
}
.c-cta-card__price-note {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 24px;
}

/* ------------------------------------------------------------------
   Index Page full-width sections（トップページ専用 幅いっぱい）
------------------------------------------------------------------ */
.l-full {
  width: 100%;
  background: var(--bg-light);
  padding: 60px 0;
}
.l-full + .l-full { border-top: 1px solid var(--border-color); }
.l-full--white { background: #fff; }
.l-full--dark {
  background: var(--primary-color);
  color: #fff;
}
.l-full--dark h2, .l-full--dark h3 { color: #fff; }

@media (max-width: 767px) {
  .l-full { padding: 40px 0; }
}

/* ===================================================================
   Renewal 移植時の追記（2026-04-28）
   - 既存テンプレ構造（#header / #top / #mainContents）に新デザイン適用
=================================================================== */

/* ヘッダー（既存 #header）：PC で sticky・SP で static */
#header {
  background: #fff;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}
@media (max-width: 767px) {
  #header { position: static; }
}

/* #top に flex レイアウト */
#top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  max-width: 1200px;
  margin: 0 auto;
}
#top .header_logo { flex-shrink: 0; }
#top .header_logo img { width: auto; height: auto; max-width: 100%; max-height: 80px; }
#top > span {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}
#top > span img { max-width: 100%; height: auto; max-height: 90px; border-radius: 0; }
#top .c-hamburger { flex-shrink: 0; margin-left: auto; }

@media (max-width: 991px) {
  #top { gap: 8px; padding: 8px 12px; }
  #top > span { order: 3; flex-basis: 100%; justify-content: center; }
}

@media (max-width: 767px) {
  #top .header_logo img { max-height: 50px; }
}

/* ヒーロー：画像エリアが無いときは単一カラム・テキスト最大760px */
.c-hero__inner:not(:has(.c-hero__image)):not(:has(.c-hero__ranking)) {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------
   ヒーロー：おすすめランキング TOP3 カード（画像の代わりに右カラム配置）
------------------------------------------------------------------ */
.c-hero__ranking {
  display: flex;
  flex-direction: column;
  gap: 12px;
  order: 2;
}
.c-hero__ranking-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-hero__ranking-title::before {
  content: '★';
  color: var(--accent-color);
  font-size: 1.05rem;
}
.c-hero__ranking-note {
  font-size: 0.78rem;
  color: var(--text-light);
  margin: 4px 0 0;
  text-align: right;
}

.c-rank-card {
  display: flex;
  gap: 14px;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 16px 14px 14px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  position: relative;
}
.c-rank-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(217,119,6,0.16);
  border-color: var(--accent-color);
  color: inherit;
}
.c-rank-card__badge {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.c-rank-card__badge small {
  font-size: 0.55rem;
  font-weight: 700;
  margin-left: 1px;
}
.c-rank-card__badge--first {
  background: linear-gradient(135deg, #ffb84d 0%, #ea580c 100%);
  width: 56px;
  height: 56px;
  font-size: 1.6rem;
  box-shadow: 0 4px 10px rgba(234,88,12,0.35);
}
.c-rank-card__badge--second {
  background: linear-gradient(135deg, #b8c2d2 0%, #7d8aa3 100%);
}
.c-rank-card__badge--third {
  background: linear-gradient(135deg, #d4ad7b 0%, #a37340 100%);
}
.c-rank-card__main {
  flex: 1;
  min-width: 0;
}
.c-rank-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 4px;
  line-height: 1.3;
}
.c-rank-card__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0 0 6px;
  color: var(--accent-color);
  flex-wrap: wrap;
}
.c-rank-card__yen {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-light);
}
.c-rank-card__num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-color);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -0.01em;
  margin-left: 2px;
}
.c-rank-card__tilde {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-color);
}
.c-rank-card__sub {
  font-size: 0.82rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.5;
}
.c-rank-card__features {
  list-style: none;
  margin: 6px 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-rank-card__features li {
  font-size: 0.83rem;
  color: #333333;
  padding-left: 18px;
  position: relative;
  line-height: 1.45;
}
.c-rank-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color);
  font-weight: 800;
}
.c-rank-card__score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.78rem;
  color: var(--text-light);
}
.c-rank-card__score b {
  font-size: 1.15rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.c-rank-card__score small {
  font-size: 0.7rem;
  color: var(--text-light);
}

/* 1位カードは枠を強調 */
.c-rank-card--first {
  border: 2px solid var(--accent-color);
  background: linear-gradient(180deg, #fff8f2 0%, #ffffff 50%);
  box-shadow: 0 4px 14px rgba(234,88,12,0.12);
}
.c-rank-card--first::after {
  content: 'BEST';
  position: absolute;
  top: -8px;
  right: 14px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(234,88,12,0.3);
}

/* レスポンシブ：991px以下では2-3位を横並びにコンパクト化（場所節約） */
@media (max-width: 991px) {
  .c-hero__ranking { order: -1; max-width: 540px; margin: 0 auto; width: 100%; }
}
@media (max-width: 480px) {
  .c-rank-card { padding: 12px 14px 12px 12px; gap: 10px; }
  .c-rank-card__badge { width: 38px; height: 38px; font-size: 1.1rem; }
  .c-rank-card__badge--first { width: 48px; height: 48px; font-size: 1.4rem; }
  .c-rank-card__num { font-size: 1.3rem; }
  .c-rank-card__features li { font-size: 0.78rem; }
}

/* ------------------------------------------------------------------
   SVG図解（仕組み・用途別おすすめ等の解説図）
------------------------------------------------------------------ */
.c-mechanism,
.c-figure-svg {
  margin: 24px auto 32px;
  padding: 0;
}

/* ------------------------------------------------------------------
   用途別おすすめカード（HTML+CSS+小SVG・レスポンシブ）
------------------------------------------------------------------ */
.c-usecase {
  background: linear-gradient(to right, #eef3fb, #ffffff, #f9f6f0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 20px;
  margin: 24px 0 0;
}
.c-usecase__title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 6px;
}
.c-usecase__subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 20px;
}
.c-usecase-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.c-usecase-card {
  background: #ffffff;
  border: 1.5px solid #d97706;
  border-radius: 10px;
  padding: 32px 10px 8px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}
.c-usecase-card--best {
  background: linear-gradient(180deg, #fde0d0, #fbcdb1);
  border-color: #ea580c;
  border-width: 2.5px;
}
.c-usecase-card__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #ea580c;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 0;
  border-radius: 8px 8px 0 0;
}
.c-usecase-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef3fb;
  border: 1.5px solid #d97706;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-usecase-card__icon svg {
  width: 22px;
  height: 22px;
}
.c-usecase-card--best .c-usecase-card__icon {
  background: #ffffff;
  border-color: #ea580c;
}
.c-usecase-card__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.mainContentsInner .c-usecase-card__label {
  font-size: 0.75rem;
  color: #666;
  margin: 0 0 2px;
  line-height: 1.3;
}
.mainContentsInner .c-usecase-card__persona {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 4px;
  line-height: 1.3;
}
.c-usecase-card__divider {
  border: none;
  border-top: 1px solid #d97706;
  opacity: 0.3;
  margin: 6px 14px 4px;
}
.c-usecase-card--best .c-usecase-card__divider {
  border-color: #ea580c;
  opacity: 0.55;
}
.mainContentsInner .c-usecase-card__cta {
  font-size: 0.75rem;
  color: #666;
  margin: 0;
  line-height: 1.3;
}
.mainContentsInner .c-usecase-card__service {
  font-size: 1.2rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 4px;
  line-height: 1.2;
}
.c-usecase-card--best .c-usecase-card__service {
  color: #ea580c;
}
.mainContentsInner .c-usecase-card__price {
  font-size: 0.875rem;
  color: #d97706;
  margin: 0;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  .c-usecase-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .c-usecase-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .c-usecase { padding: 18px 14px; }
  .c-usecase__title { font-size: 1.05rem; }
}
@media (max-width: 380px) {
  .c-usecase-cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   コスト構成フロー（① + ② + ③ = 結果）レスポンシブカード
------------------------------------------------------------------ */
.c-costflow {
  background: linear-gradient(to right, #eef3fb, #ffffff, #f9f6f0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 20px;
  margin: 24px 0 0;
}
.c-costflow__title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 6px;
}
.mainContentsInner .c-costflow__subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 20px;
}
.c-costflow__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}
.c-costflow__op {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #d97706;
  padding: 0 4px;
}
.c-costflow__op--equals {
  color: #ea580c;
}
.c-costflow-card {
  background: #ffffff;
  border: 1.5px solid #d97706;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.c-costflow-card__head {
  background: #d97706;
  color: #ffffff;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 0;
}
.c-costflow-card__body {
  padding: 12px 8px 6px;
  text-align: center;
}
.c-costflow-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fde0d0;
  border: 1.5px solid #ea580c;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ea580c;
  flex-shrink: 0;
}
.c-costflow-card__icon--invisible {
  visibility: hidden;
}
.c-costflow-card__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.mainContentsInner .c-costflow-card__value {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0;
  line-height: 1.3;
}
.mainContentsInner .c-costflow-card__unit {
  font-size: 0.75rem;
  color: #666;
  margin: 2px 0 0;
  min-height: 1em;
}
.c-costflow-card__divider {
  border: none;
  border-top: 1px solid #d97706;
  opacity: 0.3;
  margin: 6px 14px 4px;
}
.mainContentsInner .c-costflow-card__note {
  font-size: 0.875rem;
  color: #666;
  margin: 4px 0 0;
  line-height: 1.45;
}
.c-costflow-card--result {
  background: linear-gradient(180deg, #ea580c, #c44a00);
  border-color: #c44a00;
  border-width: 2px;
}
.c-costflow-card--result .c-costflow-card__head {
  background: transparent;
}
.c-costflow-card--result .c-costflow-card__icon {
  background: #ffffff;
  border-color: #ffffff;
}
.c-costflow-card--result .c-costflow-card__value,
.c-costflow-card--result .c-costflow-card__unit,
.c-costflow-card--result .c-costflow-card__note {
  color: #ffffff;
}
.c-costflow-card--result .c-costflow-card__divider {
  border-color: #ffffff;
  opacity: 0.4;
}
@media (max-width: 800px) {
  .c-costflow__grid {
    grid-template-columns: 1fr;
  }
  .c-costflow__op {
    padding: 6px 0;
    font-size: 1.4rem;
  }
}

/* ------------------------------------------------------------------
   棒グラフ比較（積み上げバー・レスポンシブ）
------------------------------------------------------------------ */
.c-bargraph {
  background: linear-gradient(to right, #eef3fb, #ffffff, #f9f6f0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 20px;
  margin: 24px 0 0;
}
.c-bargraph__title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 6px;
}
.mainContentsInner .c-bargraph__subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 24px;
}
.c-bargraph__sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 18px;
}
.c-bargraph__section {
  text-align: center;
}
.c-bargraph__section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 14px;
}
.c-bargraph__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 36px;
  border-bottom: 1.5px solid #d97706;
  padding-bottom: 0;
  min-height: 240px;
  position: relative;
}
.c-bargraph__bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.mainContentsInner .c-bargraph__bar-amount {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 6px;
  white-space: nowrap;
}
.c-bargraph__bar-amount--efax {
  color: #ea580c;
}
.c-bargraph__bar {
  width: 56px;
  display: flex;
  flex-direction: column-reverse;
  border: 1px solid #d97706;
}
.c-bargraph__bar--efax {
  height: 43px;
  background: linear-gradient(180deg, #ea580c, #c44a00);
  border-color: #c44a00;
}
.c-bargraph__seg--machine { height: 108px; background: #7f8a99; }
.c-bargraph__seg--phone-b { height: 61px; background: #d97706; }
.c-bargraph__seg--phone-r { height: 41px; background: #d97706; }
.c-bargraph__seg--comm { height: 5px; background: #3b6db5; }
.c-bargraph__seg--paper { height: 5px; background: #d4c5a0; }
.c-bargraph__seg--toner { height: 22px; background: #3a3a3a; }
.mainContentsInner .c-bargraph__bar-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #d97706;
  margin: 8px 0 0;
}
.c-bargraph__bar-label--efax { color: #ea580c; }
.c-bargraph__bar-sublabel {
  font-size: 0.75rem;
  color: #666;
  font-weight: 400;
  margin-left: 2px;
}
.c-bargraph__labels {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-top: 8px;
}
.c-bargraph__labels > div {
  min-width: 56px;
  text-align: center;
}
.c-bargraph__bar-label {
  white-space: nowrap;
}
.c-bargraph__legend-color--machine { background: #7f8a99; }
.c-bargraph__legend-color--phone   { background: #d97706; }
.c-bargraph__legend-color--comm    { background: #3b6db5; }
.c-bargraph__legend-color--paper   { background: #d4c5a0; }
.c-bargraph__legend-color--toner   { background: #3a3a3a; }
.c-bargraph__legend-color--efax    { background: #ea580c; }
.c-bargraph__badge {
  position: absolute;
  top: 8px;
  left: calc(50% + 18px);
  background: #fde0d0;
  border: 1.5px solid #ea580c;
  color: #ea580c;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
}
.c-bargraph__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  font-size: 0.75rem;
  color: #666;
  padding-top: 14px;
  border-top: 1px solid #fde6cc;
}
.c-bargraph__legend-label {
  font-weight: 700;
  color: #d97706;
  margin-right: 4px;
}
.c-bargraph__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.c-bargraph__legend-item--efax {
  color: #ea580c;
  font-weight: 700;
}
.c-bargraph__legend-color {
  display: inline-block;
  width: 12px;
  height: 10px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .c-bargraph__sections { grid-template-columns: 1fr; gap: 24px; }
  .c-bargraph__bars { gap: 28px; }
}

/* ------------------------------------------------------------------
   電子帳簿保存法 3要件 × 対応（要件→✓→対応の3列レイアウト）
------------------------------------------------------------------ */
.c-denshichobo {
  background: linear-gradient(to right, #eef3fb, #ffffff, #f9f6f0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 20px;
  margin: 24px 0 0;
}
.mainContentsInner .c-denshichobo p {
  margin: 0;
  line-height: 1.3;
}
.mainContentsInner .c-denshichobo p.c-denshichobo__title {
  margin: 0 0 6px;
}
.mainContentsInner .c-denshichobo p.c-denshichobo__subtitle {
  margin: 0 0 18px;
}
.mainContentsInner .c-denshichobo p.c-denshichobo__req-desc,
.mainContentsInner .c-denshichobo p.c-denshichobo__resp-desc {
  margin-top: 4px;
}
.c-denshichobo__title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 6px;
}
.c-denshichobo__subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 18px;
}
.c-denshichobo__heads {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.c-denshichobo__heads-req {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
}
.c-denshichobo__heads-resp {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #ea580c;
}
.c-denshichobo__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-denshichobo__row {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 12px;
  align-items: stretch;
}
.c-denshichobo__req {
  background: #ffffff;
  border: 1.5px solid #d97706;
  border-left-width: 6px;
  border-radius: 8px;
  padding: 14px 14px 14px;
}
.c-denshichobo__req-title {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0;
  line-height: 1.2;
}
.c-denshichobo__req-desc {
  font-size: 0.875rem;
  color: #666;
  margin: 4px 0 0;
  line-height: 1.4;
}
.c-denshichobo__check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-denshichobo__check-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3ecf6b, #28a85c);
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-denshichobo__check-circle svg {
  width: 18px;
  height: 18px;
}
.c-denshichobo__resp {
  background: #fde0d0;
  border: 1.5px solid #ea580c;
  border-radius: 8px;
  padding: 14px 14px 14px;
}
.c-denshichobo__resp-title {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0;
  line-height: 1.2;
}
.c-denshichobo__resp-desc {
  font-size: 0.875rem;
  color: #666;
  margin: 2px 0 0;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .c-denshichobo__heads {
    display: none;
  }
  .c-denshichobo__rows {
    gap: 22px;
  }
  .c-denshichobo__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ------------------------------------------------------------------
   3ステップフロー（STEP1 → STEP2 → GOAL3）
------------------------------------------------------------------ */
.c-stepflow {
  background: linear-gradient(to right, #eef3fb, #ffffff, #f9f6f0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 20px;
  margin: 24px 0 0;
}
.c-stepflow__title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 6px;
}
.c-stepflow__subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 18px;
}
.c-stepflow__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}
.c-stepflow__grid--4 {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
}
.c-stepflow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #d97706;
}
.c-stepflow__card {
  background: #ffffff;
  border: 1.5px solid #d97706;
  border-radius: 10px;
  padding: 16px 14px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.c-stepflow__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #d97706;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  flex-shrink: 0;
}
.c-stepflow__badge-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
.c-stepflow__badge-num {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.mainContentsInner .c-stepflow p {
  margin: 0;
  line-height: 1.4;
}
.mainContentsInner .c-stepflow p.c-stepflow__title {
  margin: 0 0 6px;
}
.mainContentsInner .c-stepflow p.c-stepflow__subtitle {
  margin: 0 0 18px;
}
.c-stepflow__heading {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0;
  line-height: 1.35;
}
.c-stepflow__divider {
  border: none;
  border-top: 1px solid #d97706;
  opacity: 0.3;
  margin: 8px 14px 8px;
}
.c-stepflow__note {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
  line-height: 1.45;
}
.c-stepflow__card--goal {
  background: linear-gradient(180deg, #ea580c, #c44a00);
  border-color: #c44a00;
  border-width: 2px;
}
.c-stepflow__card--goal .c-stepflow__badge {
  background: #ffffff;
  color: #ea580c;
}
.c-stepflow__card--goal .c-stepflow__heading {
  color: #ffffff;
}
.c-stepflow__card--goal .c-stepflow__divider {
  border-color: #ffffff;
  opacity: 0.4;
}
.c-stepflow__card--goal .c-stepflow__note {
  color: #ffffff;
  opacity: 0.95;
}
@media (max-width: 700px) {
  .c-stepflow__grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .c-stepflow__arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}

/* ------------------------------------------------------------------
   アプリスクリーン3枚横並び（PC・SP どちらも横並び維持）
------------------------------------------------------------------ */
.c-app-screens {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0;
}
.c-app-screens picture {
  flex: 1 1 0;
  min-width: 0;
  max-width: 186px;
}
.c-app-screens img {
  width: 100%;
  height: auto;
  display: block;
}

.c-mechanism__svg,
.c-figure-svg__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: #ffffff;
}
.c-mechanism__caption,
.c-figure-svg__caption {
  font-size: 0.88rem;
  color: var(--text-light);
  text-align: center;
  margin: 12px 8px 0;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .c-mechanism,
  .c-figure-svg { margin: 16px auto 24px; }
  .c-mechanism__caption,
  .c-figure-svg__caption { font-size: 0.82rem; text-align: left; }
}

/* 旧サイドバーメニュー（#menu）非表示・モバイルナビが代替 */
#menu { display: none; }

/* メインコンテンツ幅制約（旧#contents だけに max-width + padding を適用） */
#contents {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
#contentsInner, #mainContents { width: 100%; max-width: none; padding: 0; margin: 0; box-sizing: border-box; }
.mainContentsInner { box-sizing: border-box; }
@media (max-width: 767px) {
  #contents { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------------
   既存 .mainContentsInner 配下に Antigravity デザイン適用
   （新クラス c-heading-* / c-table を付け替えなくても見た目を新化）
------------------------------------------------------------------ */

/* 段落 */
.mainContentsInner p { margin-bottom: 16px; line-height: 1.8; }
.mainContentsInner em { font-weight: 700; font-style: normal; }

/* h1 */
.mainContentsInner h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-top: 32px;
  margin-bottom: 24px;
  line-height: 1.4;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
  position: relative;
}
.mainContentsInner h1::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent-color);
}

/* h2 */
.mainContentsInner h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 48px 0 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #eef2f9 0%, #ffffff 100%);
  border-left: 6px solid var(--primary-color);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}

/* h3（class="blue" 含む） */
.mainContentsInner h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 32px 0 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.mainContentsInner h3::before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: var(--primary-light);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 0.6em;
}

/* h4 / h5 / h6 */
.mainContentsInner h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px dotted var(--border-color);
}
.mainContentsInner h5 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 20px 0 10px;
  border-left: 3px solid var(--border-color);
  padding-left: 10px;
}
.mainContentsInner h6 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 16px 0 8px;
}

/* もっと見るリンク（p.more / p.more-s）— 単独でも連続でも詰める */
.mainContentsInner p.more,
.mainContentsInner p.more-s {
  margin: 12px 0;
  line-height: 1.6;
}
.mainContentsInner p.more + p.more,
.mainContentsInner p.more-s + p.more-s,
.mainContentsInner p.more + p.more-s,
.mainContentsInner p.more-s + p.more {
  margin-top: 4px;
}

/* ul.dot 連続リスト項目の間隔 */
.mainContentsInner ul.dot { margin: 14px 0; }
.mainContentsInner ul.dot li { margin-bottom: 6px; line-height: 1.7; }

/* 関連リンク（ul.related-links） */
.mainContentsInner ul.related-links { margin: 14px 0; }
.mainContentsInner ul.related-links li { margin-bottom: 6px; }

/* テーブル：既存 class="table-fixed" / "table-auto" / "price-table" を新デザイン化 */
table.table-fixed,
table.table-auto,
table.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 28px 0;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
/* テーブル説明文（HTML5 caption・SEO/AIO 視認性も兼ねる） */
.mainContentsInner table > caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-light);
  padding: 4px 2px 8px;
  font-weight: 400;
}
.mainContentsInner table.table-fixed th,
.mainContentsInner table.table-auto th,
.mainContentsInner table.price-table th {
  padding: 14px 12px;
  background: var(--primary-color);
  color: #fff;
  font-weight: 600;
  border-right: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  vertical-align: middle;
}
.mainContentsInner table.table-fixed th:last-child,
.mainContentsInner table.table-auto th:last-child,
.mainContentsInner table.price-table th:last-child { border-right: none; }
.mainContentsInner table.table-fixed td,
.mainContentsInner table.table-auto td,
.mainContentsInner table.price-table td {
  padding: 14px 12px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.mainContentsInner table.table-fixed td:last-child,
.mainContentsInner table.table-auto td:last-child,
.mainContentsInner table.price-table td:last-child { border-right: none; }
.mainContentsInner table.table-fixed tr:last-child td,
.mainContentsInner table.table-auto tr:last-child td,
.mainContentsInner table.price-table tr:last-child td { border-bottom: none; }
.mainContentsInner table.table-fixed tbody tr:nth-child(even) td,
.mainContentsInner table.table-auto tbody tr:nth-child(even) td,
.mainContentsInner table.price-table tbody tr:nth-child(even) td { background: #f9fbfd; }

/* 1列目を service カラムとして強調（背景なし・太字のみ） */
.mainContentsInner table td.service,
.mainContentsInner table td.service.bold { background: transparent; font-weight: 700; }

/* ranking.html 等の総合評価テーブル：列幅を割り当て直し */
table.table-fixed td.marks,
table.table-auto td.marks {
  min-width: 90px;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  vertical-align: middle;
}
table.table-fixed td.item,
table.table-auto td.item {
  min-width: 160px;
  white-space: nowrap;
  font-size: 0.85rem;
  line-height: 1.7;
  vertical-align: middle;
}
table.table-fixed td.comment,
table.table-auto td.comment {
  min-width: 280px;
  font-size: 0.88rem;
  line-height: 1.7;
  text-align: left;
}
table.table-fixed td.detail,
table.table-auto td.detail {
  min-width: 130px;
  text-align: center;
  vertical-align: middle;
}

/* サービス概要セクション：各社の見出し間隔を広めに（service_list.html 各社サマリ等） */
.mainContentsInner p.more + h3 {
  margin-top: 56px;
}

/* データセル：サービス名以外の内訳はセンタリング
   ※ 個別ページの料金プラン表（table-fixed.price-table）は除外（左寄せのまま） */
table.table-fixed:not(.price-table) td.init-fee,
table.table-fixed:not(.price-table) td.monthly-fee,
table.table-fixed:not(.price-table) td.fee-send,
table.table-fixed:not(.price-table) td.fee-receipt,
table.table-fixed:not(.price-table) td.area-number,
table.table-fixed:not(.price-table) td.small-business,
table.table-fixed:not(.price-table) td.project-receipt,
table.table-fixed:not(.price-table) td.project-all,
table.table-fixed:not(.price-table) td.send-many,
table.table-fixed:not(.price-table) td.iphone,
table.table-fixed:not(.price-table) td.android,
table.table-fixed:not(.price-table) td.mail-fax,
table.table-fixed:not(.price-table) td.foreign,
table.table-fixed:not(.price-table) td.number,
table.table-fixed:not(.price-table) td.file,
table.table-auto td.init-fee,
table.table-auto td.monthly-fee,
table.table-auto td.year-plan,
table.table-auto td.send-fee,
table.table-auto td.monthly100 {
  text-align: center;
}
table.table-auto td.campaign-detail {
  text-align: left;
}

/* SP：テーブル横スクロール（カラム多い表は横スクロールで見せる） */
@media (max-width: 767px) {
  table.table-fixed,
  table.table-auto,
  table.price-table {
    display: block;
    overflow-x: auto;
  }
  /* 内部の thead/tbody を table 表示に戻し、最小幅を確保 */
  table.table-fixed > thead, table.table-fixed > tbody,
  table.table-auto > thead, table.table-auto > tbody,
  table.price-table > thead, table.price-table > tbody {
    display: table;
    width: 100%;
    min-width: 540px;
  }
  /* ヘッダーセルは1行で表示（折り返さない） */
  table.table-fixed > thead th, table.table-fixed > tr:first-child th,
  table.table-auto > thead th, table.table-auto > tr:first-child th,
  table.price-table > thead th, table.price-table > tr:first-child th {
    white-space: nowrap;
  }
  /* SP：display:block 化された table 内で caption が 1文字幅に縮むのを防ぐ */
  table.table-fixed > caption,
  table.table-auto > caption,
  table.price-table > caption {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
    padding: 4px 4px 8px;
  }
}

/* ===================================================================
   Renewal 追加修正（2026-04-28 第2弾）
=================================================================== */

/* ============================================================
   PC ナビゲーション（c-pc-nav）
   #top の flex-wrap で2行目に full width 表示
============================================================ */
#top { flex-wrap: wrap; }
.c-pc-nav {
  flex-basis: 100%;
  width: 100%;
  order: 99;
  border-top: 1px solid var(--border-color);
  margin: 8px -16px 0;
  padding: 0;
  background: #fff;
}
.c-pc-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.c-pc-nav__list li { margin: 0; }
.c-pc-nav__list a {
  display: inline-block;
  padding: 14px 18px;
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.c-pc-nav__list a:hover {
  color: var(--primary-color);
  border-bottom-color: var(--accent-color);
}
@media (max-width: 991px) {
  .c-pc-nav { display: none; }
}

/* ============================================================
   パンくず + アフィリエイト案内（横並びラッパー）
============================================================ */
.c-breadcrumb-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 14px 20px 6px;
  margin: 0 auto;
  max-width: 1200px;
}
#pankuzu {
  font-size: 0.85rem;
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#pankuzu a {
  color: var(--text-light);
  text-decoration: none;
}
#pankuzu a:hover { color: var(--primary-color); }
#pankuzu a:not(:last-child)::after {
  content: '\003E';
  margin-left: 8px;
  opacity: 0.45;
  font-size: 0.8rem;
}
/* social.tpl のプロモーション注釈 */
.c-breadcrumb-wrapper .c-promotion-note {
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: #999;
  text-align: right;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}
.c-breadcrumb-wrapper .c-promotion-note p { margin: 0; padding: 0; font-size: inherit; word-break: break-word; overflow-wrap: anywhere; }

/* 内部ページ（mainContentsInner 直下に c-breadcrumb-wrapper があるページ）: 余分な padding/max-width を除去 */
.mainContentsInner > .c-breadcrumb-wrapper {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  margin: 0;
}

/* hikaku ページ: c-breadcrumb-wrapper（pankuzu+affiliate）→ title → main（フル幅）
   ※ 条件検索（.searchbox）は main-area 内に移動し、比較表の上に横並び配置 */
.mainContentsInner:has(> .main-area) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "breadcrumb"
    "title"
    "main";
  gap: 0;
  align-items: start;
}
.mainContentsInner:has(> .main-area) > .c-breadcrumb-wrapper { grid-column: 1 / -1; grid-row: 1; padding: 14px 0 6px; max-width: none; margin: 0; }
.mainContentsInner:has(> .main-area) > .title { grid-area: title; }
.mainContentsInner:has(> .main-area) > .main-area { grid-area: main; min-width: 0; }

/* hikaku ページ内の .main-area-inner 直下 pankuzu/social を h2 の上に */
.main-area-inner {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.main-area-inner > * { order: 10; }
.main-area-inner > #pankuzu { order: 1; }
.main-area-inner > .c-promotion-note { order: 2; }
/* h2 や本文は order 10 のまま source 順 */

/* 絞り込みフォーム（.searchbox）の新デザイン
   ※ hikaku ページでは比較表の上に横並びフィルタとして配置 */
.searchbox {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 12px 0 20px;
}
.searchbox-inner { padding: 0; }
.searchbox form#searchform {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
}
.searchbox dl { margin: 0; padding: 0; }
.searchbox dl:first-of-type { border-right: 1px solid var(--border-color); }
.searchbox dl dt.title {
  background: var(--primary-color);
  color: #fff;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}
.searchbox dl dd { margin: 0; padding: 12px 14px; }
.searchbox dl dd ul { list-style: none; margin: 0; padding: 0; }
.searchbox dl dd li {
  margin-bottom: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.searchbox dl:last-of-type dd ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 14px;
}
.searchbox dl:last-of-type dd ul li { margin-bottom: 0; }
.searchbox dl dd label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  color: var(--text-main);
}
.searchbox dl dd input[type="checkbox"],
.searchbox dl dd input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.searchbox .bt-search {
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--border-color);
}
.searchbox .bt-search input[type="submit"] {
  display: inline-block;
  background: var(--accent-color);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.searchbox .bt-search input[type="submit"]:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
/* bn_search_smallbtn: 元の画像ボタンが空なので value 経由ではなく ::before 風に表示 */
.searchbox .bn_search_smallbtn[value=""] { display: none; }
.searchbox .bn_search_smallbtn { min-width: 100px; }
.searchbox .bn_search_smallbtn:not([value=""])::before { content: '検索する'; }

@media (max-width: 767px) {
  .searchbox form#searchform {
    grid-template-columns: 1fr;
  }
  .searchbox dl:first-of-type { border-right: none; border-bottom: 1px solid var(--border-color); }
  .searchbox dl:last-of-type dd ul {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* 内部ページの #pankuzu スタイル */
.mainContentsInner > #pankuzu {
  font-size: 0.85rem;
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 14px 0 4px;
  margin: 0;
  border-bottom: none;
}
/* 内部ページの affiliate 案内（social.tpl）も整形 */
.mainContentsInner > .c-promotion-note {
  font-size: 0.78rem;
  color: #999;
  margin: 0;
  padding: 0;
  width: auto;
  border: none;
}
.mainContentsInner > .c-promotion-note p { margin: 0; padding: 0; font-size: inherit; }

/* ============================================================
   bt-detail / bt-web 空ボタンに ::before でテキスト注入
============================================================ */
.bt-detail, .bt-web, a.req {
  height: auto;
  width: auto;
  line-height: 1.4;
  overflow: visible;
  text-indent: 0;
  background-image: none;
  min-width: 120px;
  padding: 10px 18px;
  font-size: 0.85rem;
  white-space: nowrap;
}
.bt-detail:empty::before { content: '詳細を見る'; }
.bt-web:empty::before { content: '公式サイトへ'; }
a.req:empty::before { content: '詳しく見る'; }

/* テーブル内の bt-detail：横幅自動・センタリング */
table .bt-detail, table .bt-web {
  display: inline-flex;
  margin: 0 auto;
}
td.detail { text-align: center; }

/* ============================================================
   フッター #footer
============================================================ */
#footer {
  background: var(--bg-footer);
  color: var(--text-main);
  padding: 30px 20px 22px;
  font-size: 0.85rem;
  margin-top: 60px;
  border-top: 1px solid var(--border-color);
}
#footer .copyright {
  max-width: 1200px;
  margin: 0 auto;
}
#footer .copyright > p {
  color: var(--text-light);
  font-size: 0.78rem;
  line-height: 1.7;
  margin: 0 0 18px;
  padding: 22px 0 0;
}
#footer .company {
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.9;
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
  color: var(--text-main);
}
#footer .company a {
  color: var(--primary-color);
  text-decoration: none;
  margin: 0 4px;
  transition: color 0.2s;
}
#footer .company a:hover { color: var(--accent-color); text-decoration: underline; }
#footer .company .smart { color: var(--text-light); margin: 0 2px; }

/* ============================================================
   フッターのサイト全体ナビゲーション（テールページ全28を網羅）
   旧 menu.tpl の隠しリンク撤去（リニューアル 2026-05-02）の代替として、
   業種・機能・周辺・FAQ の4ブロックをフッターから可視リンクで提供。
============================================================ */
#footer .footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 36px;
  padding-bottom: 28px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}
#footer .footer-nav__col {
  min-width: 0;
}
#footer .footer-nav__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--accent-color, #ff8c00);
  letter-spacing: 0.02em;
}
#footer .footer-nav__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer .footer-nav__col li {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
#footer .footer-nav__col li + li {
  margin-top: 2px;
}
#footer .footer-nav__col a {
  display: block;
  padding: 5px 0 5px 14px;
  position: relative;
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.86rem;
  transition: color 0.2s, padding-left 0.2s;
}
#footer .footer-nav__col a::before {
  content: "›";
  position: absolute;
  left: 2px;
  top: 5px;
  color: var(--accent-color, #ff8c00);
  font-weight: 700;
}
#footer .footer-nav__col a:hover {
  color: var(--accent-color, #ff8c00);
  padding-left: 18px;
  text-decoration: underline;
}
#footer .footer-nav__disclaimer {
  color: rgba(255,255,255,0.78);
  font-size: 0.78rem;
  line-height: 1.7;
  margin: 0 0 18px;
  padding: 0;
}

/* タブレット：3カラム（中間幅で空間を活用） */
@media (max-width: 1100px) {
  #footer .footer-nav {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 28px;
  }
}

/* タブレット縦：2カラム */
@media (max-width: 820px) {
  #footer .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 24px;
  }
}

/* スマホ：2カラム（縦一列だと縦長すぎるため、コンパクトな2カラムを維持） */
@media (max-width: 520px) {
  #footer {
    padding: 24px 14px 18px;
  }
  #footer .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
    padding-bottom: 22px;
    margin-bottom: 18px;
  }
  #footer .footer-nav__title {
    font-size: 0.86rem;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
  #footer .footer-nav__col a {
    font-size: 0.78rem;
    padding: 4px 0 4px 12px;
  }
}

/* 極小スマホ（iPhone SE 等 360px 以下）でのみ 1カラム */
@media (max-width: 359px) {
  #footer .footer-nav {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CV ボタンエリアのセンタリング
============================================================ */
.t-center .bt-detail,
.t-center .bt-web,
.t-center a.req,
.padding-bottom > .bt-detail,
.padding-bottom > .bt-web,
.padding-content > .bt-detail,
.padding-content > .bt-web,
p.t-center .bt-detail,
p.t-center .bt-web {
  margin-left: auto;
  margin-right: auto;
}

/* CV ブロック全体のセンタリング・幅大きめ */
.padding-bottom .bt-detail,
.padding-bottom .bt-web,
.padding-content .bt-detail,
.padding-content .bt-web,
.t-center .bt-detail,
.t-center .bt-web {
  min-width: 280px;
  padding: 14px 30px;
  font-size: 1rem;
}

/* CV 画像ボタン（hover_alpha + bn_application.gif 等）のセンタリング
   base CSS の img { display: block } を上書きして text-align: center を有効化 */
.t-center a {
  display: inline-block;
}
.t-center a picture,
.t-center a picture img,
.t-center a > img {
  display: inline-block;
  margin: 0 auto;
}
.t-center a.hover_alpha {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* CV エリア（.t-center 内）のみセンタリング・本文 .padding-bottom には影響させない */
p.t-center { text-align: center; }
p.t-center a { display: inline-block; }
p.t-center a img, p.t-center a picture { display: inline-block; }
.t-center > p.padding-bottom a, .t-center .padding-bottom a { display: inline-block; }
.t-center > p.padding-bottom a img, .t-center > p.padding-bottom a picture { display: inline-block; }

/* 受信OK/送信OK 等のサービス名内バッジ画像はインライン表示 */
span.bold img,
table.table-auto td.service img,
table.table-auto td.service picture {
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================
   sticky header と h1 の重なり防止
   #header 高さ ≈ 187px（PC）→ scroll-padding は余裕を持って 200px
============================================================ */
html { scroll-padding-top: 200px; }
@media (max-width: 991px) {
  html { scroll-padding-top: 0; }
}

/* 内部ページの .title（H1ラッパー）に十分な上余白 */
.title {
  padding-top: 40px;
  margin-bottom: 8px;
}
.title .inner h1, .title h1 {
  margin-top: 0;
  scroll-margin-top: 200px;
}
@media (max-width: 991px) {
  .title { padding-top: 20px; }
  .title .inner h1, .title h1 { scroll-margin-top: 0; }
}

/* ============================================================
   比較表（hikaku-main）SP カード型レイアウト
   td の class（service / init-fee / monthly-fee 等）を使ってラベル表示
============================================================ */
@media (max-width: 767px) {
  /* PC用ヘッダー行（class="smart"）は SP で非表示 */
  table.table-auto tr.smart { display: none; }

  /* PC のみ改行する br（SP では消す） */
  br.pc-br { display: none; }

  /* テーブルをカード型に切替 */
  table.table-auto {
    display: block;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  table.table-auto > tbody { display: block; min-width: auto; }
  table.table-auto > tbody > tr,
  table.table-auto > tr {
    display: block;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    overflow: hidden;
  }
  .mainContentsInner table.table-auto td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #eee;
    text-align: right;
    font-size: 0.9rem;
  }
  .mainContentsInner table.table-auto > tbody > tr > td:last-child,
  .mainContentsInner table.table-auto > tr > td:last-child { border-bottom: none; }

  /* td の class からラベル生成 */
  table.table-auto td::before {
    font-weight: 700;
    color: var(--primary-color);
    text-align: left;
    flex-shrink: 0;
    font-size: 0.85rem;
  }
  table.table-auto td.service { display: block; text-align: left; background: var(--bg-light); padding: 14px 16px; }
  table.table-auto td.service::before { display: none; }
  table.table-auto td.init-fee::before { content: '初期費用'; }
  table.table-auto td.monthly-fee::before { content: '月額料金'; }
  table.table-auto td.year-plan::before { content: '年払い割引'; }
  table.table-auto td.send-fee::before { content: '送信料金'; }
  table.table-auto td.transmission-num::before { content: '同報件数'; }
  table.table-auto td.foreign-fee::before { content: '海外送信料金'; }
  table.table-auto td.efax-cost::before { content: 'eFax の送信料金'; }
  table.table-auto td.toones-cost::before { content: '秒速FAX の送信料金'; }
  table.table-auto td.country-code::before { content: '国番号'; }
  table.table-auto td.efax-support::before { content: 'eFax 対応'; }
  table.table-auto td.receive-limit::before { content: '月間受信無料枠'; }
  table.table-auto td.receive-addr::before { content: '同時転送先メール'; }
  table.table-auto td.receive-format::before { content: '受信ファイル形式'; }
  table.table-auto td.mail-support::before { content: 'メール送信'; }
  table.table-auto td.mail-domain::before { content: '宛先メールアドレスの形式'; }
  table.table-auto td.mail-method::before { content: '主な送信操作'; }
  table.table-auto td.format-note::before { content: '用途・備考'; }
  table.table-auto td.monthly100::before { content: '150枚送信時 ひと月の総額'; }
  table.table-auto td.campaign-detail::before { content: '備考'; }
  /* 備考は長文になりやすいので、ラベルを上・本文を下にしてフル幅で折り返す
     line 947 の旧テーブルfallback `white-space: nowrap` を打ち消すため normal を明示 */
  table.table-auto td.campaign-detail {
    display: block;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  table.table-auto td.campaign-detail::before {
    display: block;
    margin-bottom: 4px;
  }
  table.table-auto td.detail { justify-content: center; background: #fafafa; padding: 14px 16px; flex-direction: column; gap: 8px; }
  table.table-auto td.detail::before { display: none; }

  /* SP では table-auto の min-width 強制を解除 */
  table.table-auto > tbody { min-width: 0; width: 100%; }

  /* table-fixed（solar の比較表 6〜7列）SP: 横スクロール時に1セル内で文字単位改行が起きないよう nowrap。
     説明セル（td.reason の説明文・td.recommend の長文）は折り返し許容 */
  .mainContentsInner table.table-fixed td {
    white-space: nowrap;
  }
  .mainContentsInner table.table-fixed td.reason,
  .mainContentsInner table.table-fixed td.recommend.t-left {
    white-space: normal;
    min-width: 200px;
  }
  /* 横スクロール可能であることを示すヒント（右端にうっすらグラデーション） */
  .mainContentsInner table.table-fixed {
    background-image: linear-gradient(to right, transparent calc(100% - 24px), rgba(217,119,6,0.08));
  }
}

/* ページ内目次（意味のある目次のみ・index of contents） */
.toc-box {
    background: #f5f7fa;
    padding: 15px 20px;
    border: 1px solid #ddd;
    margin: 0 0 20px 0;
}

.toc-box .toc-title {
    font-weight: bold;
    margin: 0 0 8px 0;
    font-size: 16px;
}

.toc-box ul.dot {
    margin: 0;
    padding: 0 0 0 20px;
}

.toc-box ul.dot li {
    padding-bottom: 4px;
}


/* =========================================================
   c-reason-cards: efax/index.html「eFaxを選ぶ5つの理由」サマリ図解
   PC: 5列横並び / SP: 1列縦並び（important.md §5 準拠）
   ========================================================= */
.c-reason-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 20px 0 28px;
}
.c-reason-card {
  background: linear-gradient(180deg, #eef3fb, #ffffff);
  border: 1.5px solid #d97706;
  border-radius: 10px;
  padding: 18px 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.mainContentsInner .c-reason-card__num {
  font-size: 1rem;
  color: #d97706;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}
.c-reason-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #d97706;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-reason-card__icon svg {
  width: 30px;
  height: 30px;
  display: block;
  color: #d97706;
}
.mainContentsInner .c-reason-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 6px;
  line-height: 1.4;
}
.mainContentsInner .c-reason-card__title em {
  color: #ea580c;
  font-style: normal;
}
.mainContentsInner .c-reason-card__desc {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .c-reason-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .c-reason-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    padding: 12px 14px 14px;
    gap: 14px;
  }
  .mainContentsInner .c-reason-card__num {
    margin: 0 0 6px;
    flex-basis: 100%;
    width: auto;
    text-align: left;
  }
  .c-reason-card__icon {
    margin: 0;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
  }
  .c-reason-card__icon svg {
    width: 26px;
    height: 26px;
  }
  .c-reason-card__body {
    flex: 1;
  }
  .mainContentsInner .c-reason-card__title {
    font-size: 1rem;
  }
}

/* PC専用ユーティリティ：SP では非表示（改行 br などの制御用） */
.pc-only { display: inline; }
@media (max-width: 768px) {
  .pc-only { display: none; }
}

/* ====== c-smartphone-flow : スマホでFAX送信4ステップ図解 (smartphone.html) ====== */
.mainContentsInner .c-smartphone-flow {
  margin: 24px 0 32px;
}
.mainContentsInner .c-smartphone-flow__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainContentsInner .c-smartphone-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 16px;
  background: #f7f9fc;
  border-radius: 8px;
  border: 1px solid #d8e0ec;
  list-style: none;
  text-align: center;
}
.mainContentsInner .c-smartphone-flow__num {
  font-size: 1rem;
  color: #ea580c;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1;
}
.mainContentsInner .c-smartphone-flow__phone {
  width: 70px;
  height: 110px;
  border: 2px solid #d97706;
  border-radius: 10px;
  padding: 6px 4px 8px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.mainContentsInner .c-smartphone-flow__phone::before {
  content: '';
  width: 18px;
  height: 3px;
  background: #d97706;
  border-radius: 2px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.mainContentsInner .c-smartphone-flow__phone::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 1.5px solid #d97706;
  border-radius: 50%;
  margin-top: 2px;
  flex-shrink: 0;
}
.mainContentsInner .c-smartphone-flow__screen {
  flex: 1;
  width: 100%;
  background: #f0f4fa;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ea580c;
}
.mainContentsInner .c-smartphone-flow__screen svg {
  width: 36px;
  height: 36px;
}
.mainContentsInner .c-smartphone-flow__title {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0;
  text-align: center;
  line-height: 1.3;
}
.mainContentsInner .c-smartphone-flow__desc {
  font-size: 0.875rem;
  color: #555;
  margin: 0;
  text-align: center;
  line-height: 1.45;
}
.mainContentsInner .c-smartphone-flow__arrow {
  align-self: center;
  color: #d97706;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.mainContentsInner .c-smartphone-flow__arrow svg {
  width: 24px;
  height: 24px;
  display: block;
}
.mainContentsInner .c-smartphone-flow__caption {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin-top: 14px;
}
@media (max-width: 700px) {
  .mainContentsInner .c-smartphone-flow__grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .mainContentsInner .c-smartphone-flow__arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}

/* ====== c-mailfax-howto : メーラー画面モック+宛先記法解説 (mail-fax.html) ====== */
.mainContentsInner .c-mailfax-howto {
  margin: 24px 0 32px;
}
.mainContentsInner .c-mailfax-howto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.mainContentsInner .c-mailfax-howto__mock {
  background: #ffffff;
  border: 1.5px solid #d97706;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(26, 58, 110, 0.1);
}
.mainContentsInner .c-mailfax-howto__titlebar {
  background: #d97706;
  color: #ffffff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
}
.mainContentsInner .c-mailfax-howto__titlebar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.mainContentsInner .c-mailfax-howto__titlebar-dot:first-child {
  background: #ff5f57;
}
.mainContentsInner .c-mailfax-howto__titlebar-title {
  margin-left: 8px;
  font-weight: 700;
  font-size: 0.875rem;
}
.mainContentsInner .c-mailfax-howto__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mainContentsInner .c-mailfax-howto__field {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #d8e0ec;
  padding-bottom: 8px;
  font-size: 0.875rem;
}
.mainContentsInner .c-mailfax-howto__field--last {
  border-bottom: none;
  padding-bottom: 0;
}
.mainContentsInner .c-mailfax-howto__label {
  color: #666;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.875rem;
}
.mainContentsInner .c-mailfax-howto__value {
  color: #d97706;
  font-weight: 700;
  font-size: 1rem;
  word-break: break-all;
}
.mainContentsInner .c-mailfax-howto__attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fde0d0;
  border: 1px solid #ea580c;
  border-radius: 4px;
  padding: 4px 10px;
  color: #ea580c;
  font-size: 0.875rem;
  font-weight: 700;
}
.mainContentsInner .c-mailfax-howto__attach svg {
  width: 14px;
  height: 14px;
}
.mainContentsInner .c-mailfax-howto__send {
  align-self: flex-end;
  background: #ea580c;
  color: #ffffff;
  border-radius: 4px;
  padding: 6px 18px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-top: 4px;
}
.mainContentsInner .c-mailfax-howto__explain {
  background: #f7f9fc;
  border: 1px solid #d8e0ec;
  border-radius: 8px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mainContentsInner .c-mailfax-howto__explain-title {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0;
  text-align: center;
}
.mainContentsInner .c-mailfax-howto__address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 700;
  background: #ffffff;
  border: 1px dashed #d97706;
  border-radius: 6px;
  padding: 12px 8px;
}
.mainContentsInner .c-mailfax-howto__addr-num {
  color: #ea580c;
  border-bottom: 2px solid #ea580c;
}
.mainContentsInner .c-mailfax-howto__addr-at {
  color: #666;
  margin: 0 2px;
}
.mainContentsInner .c-mailfax-howto__addr-domain {
  color: #d97706;
  border-bottom: 2px solid #d97706;
}
.mainContentsInner .c-mailfax-howto__legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}
.mainContentsInner .c-mailfax-howto__legend-item {
  text-align: center;
  font-size: 0.875rem;
  color: #444;
  line-height: 1.45;
}
.mainContentsInner .c-mailfax-howto__legend-item--num {
  border-top: 3px solid #ea580c;
  padding-top: 6px;
}
.mainContentsInner .c-mailfax-howto__legend-item--domain {
  border-top: 3px solid #d97706;
  padding-top: 6px;
}
.mainContentsInner .c-mailfax-howto__tip {
  background: #fff5ec;
  border-left: 4px solid #ea580c;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #444;
  margin: 0;
  line-height: 1.45;
}
.mainContentsInner .c-mailfax-howto__caption {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin-top: 14px;
}
@media (max-width: 700px) {
  .mainContentsInner .c-mailfax-howto__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ====== c-forwardflow : 1FAX→複数アドレス同時配信 樹形図 (forward.html) ====== */
.mainContentsInner .c-forwardflow {
  margin: 24px 0 32px;
}
.mainContentsInner .c-forwardflow__grid {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 16px;
  align-items: center;
}
.mainContentsInner .c-forwardflow__source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  background: #d97706;
  color: #ffffff;
  border-radius: 10px;
  min-width: 130px;
  text-align: center;
}
.mainContentsInner .c-forwardflow__source-icon svg {
  width: 48px;
  height: 48px;
  display: block;
}
.mainContentsInner .c-forwardflow__source-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.mainContentsInner .c-forwardflow__source-sub {
  font-size: 0.875rem;
  margin: 0;
  opacity: 0.85;
  line-height: 1.3;
}
.mainContentsInner .c-forwardflow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
}
.mainContentsInner .c-forwardflow__arrow svg {
  width: 36px;
  height: 36px;
  display: block;
}
.mainContentsInner .c-forwardflow__targets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.mainContentsInner .c-forwardflow__target {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: #f7f9fc;
  border: 1px solid #d8e0ec;
  border-left: 4px solid #ea580c;
  border-radius: 6px;
  list-style: none;
}
.mainContentsInner .c-forwardflow__target-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
  flex-shrink: 0;
}
.mainContentsInner .c-forwardflow__target-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}
.mainContentsInner .c-forwardflow__target-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mainContentsInner .c-forwardflow__target-role {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706;
  margin: 0;
  line-height: 1.3;
}
.mainContentsInner .c-forwardflow__target-email {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
  line-height: 1.3;
  word-break: break-all;
}
.mainContentsInner .c-forwardflow__note {
  margin-top: 14px;
  padding: 10px 14px;
  background: #fff5ec;
  border-left: 4px solid #ea580c;
  font-size: 0.875rem;
  color: #444;
  line-height: 1.5;
}
.mainContentsInner .c-forwardflow__note b {
  font-weight: 700;
}
.mainContentsInner .c-forwardflow__caption {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin-top: 14px;
}
@media (max-width: 700px) {
  .mainContentsInner .c-forwardflow__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mainContentsInner .c-forwardflow__source {
    min-width: 0;
  }
  .mainContentsInner .c-forwardflow__arrow {
    transform: rotate(90deg);
  }
}

/* ========================================
   コンビニFAX 送信手順フロー（cvn step-flow）
   PC: 4列横並び / SP: 2x2 グリッド
   ======================================== */
.mainContentsInner .step-flow {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  counter-reset: step;
}
.mainContentsInner .step-flow li {
  background: #f9fbfd;
  border: 1px solid #d4dce8;
  border-radius: 8px;
  padding: 14px 12px 16px;
  text-align: center;
  position: relative;
}
.mainContentsInner .step-flow .step-num {
  display: inline-block;
  background: #d97706;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.mainContentsInner .step-flow .step-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
}
.mainContentsInner .step-flow .step-title {
  font-weight: 700;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.4;
  color: #d97706;
}
.mainContentsInner .step-flow .step-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #333;
  text-align: left;
}
@media (max-width: 768px) {
  .mainContentsInner .step-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0 24px;
  }
  .mainContentsInner .step-flow li {
    padding: 12px 10px 14px;
  }
  .mainContentsInner .step-flow .step-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
  }
  .mainContentsInner .step-flow .step-title {
    font-size: 13.5px;
    margin-bottom: 4px;
  }
  .mainContentsInner .step-flow .step-desc {
    font-size: 12px;
    line-height: 1.5;
  }
  .mainContentsInner .step-flow .step-num {
    font-size: 10px;
    padding: 2px 8px;
    margin-bottom: 8px;
  }
}

/* ============================================================
   solar リニューアル追加クラス（2026-05-07）
============================================================ */

/* 本文用の通常箇条書き（ul.annotation の※注釈とは別物） */
.mainContentsInner ul.c-list {
  list-style: none;
  margin: 12px 0 18px;
  padding: 0 0 0 4px;
}
.mainContentsInner ul.c-list li {
  position: relative;
  padding: 4px 0 4px 22px;
  margin: 0 0 4px;
  line-height: 1.7;
  color: var(--text-main);
  font-size: 1rem;
}
.mainContentsInner ul.c-list li::before {
  content: "●";
  position: absolute;
  left: 4px;
  top: 7px;
  color: var(--accent-color);
  font-size: 0.7rem;
}

/* テーブル内の詳細ボタン（internetfax と同じくらいの存在感）*/
.mainContentsInner a.c-btn--detail {
  display: inline-block;
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  background: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
  line-height: 1.2;
  min-width: 120px;
  text-align: center;
}
.mainContentsInner a.c-btn--detail::after {
  content: " →";
  font-weight: 700;
}
.mainContentsInner a.c-btn--detail:hover,
.mainContentsInner a.c-btn--detail:focus {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(217,119,6,0.25);
}
/* 都道府県リンクなど、タグ風の横並びリンクリスト */
.mainContentsInner ul.c-pref-list {
  list-style: none;
  margin: 8px 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.mainContentsInner ul.c-pref-list li { margin: 0; }
.mainContentsInner ul.c-pref-list a {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.mainContentsInner ul.c-pref-list a:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}
.mainContentsInner ul.c-pref-list a.is-highlight {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  font-weight: 700;
}

/* 情報出典・更新日などのインフォボックス */
.mainContentsInner .c-info-box {
  margin: 24px 0;
  padding: 16px 20px;
  background: #fafafa;
  border-left: 4px solid var(--primary-light);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  line-height: 1.7;
}
.mainContentsInner .c-info-box p { margin: 0 0 8px; font-weight: 700; }
.mainContentsInner .c-info-box ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.mainContentsInner .c-info-box ul.c-list { padding-left: 4px; list-style: none; }
.mainContentsInner .c-info-box li { margin-bottom: 4px; }

/* 番号付きステップリスト（HowTo 用） */
.mainContentsInner ol.c-step-list {
  list-style: none;
  margin: 14px 0 22px;
  padding: 0;
  counter-reset: stepcount;
}
.mainContentsInner ol.c-step-list li {
  counter-increment: stepcount;
  position: relative;
  padding: 12px 16px 12px 56px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  line-height: 1.7;
}
.mainContentsInner ol.c-step-list li::before {
  content: counter(stepcount);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mainContentsInner table.table-fixed td.detail a.c-btn--detail,
.mainContentsInner table.table-auto td.detail a.c-btn--detail {
  margin: 0 auto;
}

/* テーブル内 td の寄せ override（個別テーブル対応） */
.mainContentsInner table td.t-center { text-align: center !important; }
.mainContentsInner table td.t-left   { text-align: left   !important; }
.mainContentsInner table td.t-right  { text-align: right  !important; }

/* solar：3ステップカードの最初のカード（c-rank-card--first）の BEST バッジは意味がズレるため非表示
   ※ c-rank-card は c-hero 内（mainContentsInner の外）にあるためセレクタは .mainContentsInner で囲わない */
.c-rank-card--first::after { display: none !important; }

/* 姉妹サイト（standard-project 配下の他サブサイト相互リンク）。前後に区切り線で「分解」 */
#footer .c-sister-sites {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--border-color);
}
#footer .c-sister-sites__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 12px;
}
#footer .c-sister-sites__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
}
#footer .c-sister-sites__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: border-color 0.2s;
}
#footer .c-sister-sites__list li:hover {
  border-color: var(--accent-color);
}
#footer .c-sister-sites__list a {
  display: inline-block;
  color: var(--primary-color);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0;
}
#footer .c-sister-sites__list a:hover {
  color: var(--accent-color);
  text-decoration: underline;
  padding-left: 0;
}
#footer .c-sister-sites__desc {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.5;
}

/* solar 旧クラス互換：SP/PC 出し分け（only_mb / only_mb_s / only_fav_tab_pc / only_tab_pc）
   旧 mobile.css のメディアクエリ出し分けを新 responsive.css でも維持 */
@media (max-width: 767px) {
  .only_fav_tab_pc, .only_tab_pc { display: none !important; }
}
@media (min-width: 768px) {
  .only_mb, .only_mb_s { display: none !important; }
}

/* ========================================================================
   ヘッダー CV バナー（SVG・グリエネ + Amazonギフト訴求）
   ヘッダー右側に表示・全ページ共通CV
   ======================================================================== */
.c-cv-banner {
  display: block;
  width: 100%;
  max-width: 728px;
  margin-left: auto;
  text-decoration: none;
  position: relative;
  transition: opacity 0.2s, transform 0.2s;
}
.c-cv-banner:hover { opacity: 0.93; transform: translateY(-1px); }
.c-cv-banner__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.c-cv-banner__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================
   CV プロバイダー（住宅用／産業用 一括見積もり 5社並列）
   旧 cv_jyutaku.tpl / cv_sangyo.tpl のリニューアル版
   ======================================================================== */
.mainContentsInner .c-cv-providers {
  margin: 36px 0 48px;
  padding: 24px 22px 28px;
  background: linear-gradient(180deg, #fff8f4 0%, #fff 100%);
  border: 1px solid #f4d8c8;
  border-radius: 10px;
}
.mainContentsInner .c-cv-providers__heading {
  font-size: 1.18rem;
  color: var(--accent-color);
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--accent-color);
  font-weight: 700;
}
.mainContentsInner .c-cv-providers__heading::before { content: none; }
.mainContentsInner .c-cv-providers__lead {
  font-size: 0.95rem;
  line-height: 1.85;
  margin: 0 0 22px;
}

.mainContentsInner .c-cv-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mainContentsInner .c-cv-list li::before { content: none; }

.mainContentsInner .c-cv-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  align-items: start;
}
.mainContentsInner .c-cv-card--featured {
  border: 2px solid var(--accent-color);
  background: linear-gradient(180deg, #fff 0%, #fffaf6 100%);
  box-shadow: 0 4px 12px rgba(232, 116, 47, 0.10);
}

.mainContentsInner .c-cv-card__media {
  display: block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity 0.2s;
}
.mainContentsInner .c-cv-card__media:hover { opacity: 0.85; }
.mainContentsInner .c-cv-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.mainContentsInner .c-cv-card__body { min-width: 0; }
.mainContentsInner .c-cv-card__tag {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--accent-color);
  background: #fff1e6;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 6px;
  font-weight: 700;
}
.mainContentsInner .c-cv-card__name {
  font-size: 1.18rem;
  margin: 0 0 8px;
  padding: 0;
  font-weight: 700;
}
.mainContentsInner .c-cv-card__name::before { content: none; }
.mainContentsInner .c-cv-card__name a {
  color: var(--primary-color);
  text-decoration: none;
}
.mainContentsInner .c-cv-card__name a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}
.mainContentsInner .c-cv-card__body p {
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0 0 10px;
}
.mainContentsInner .c-cv-card__gift {
  background: #fffbe6;
  border-left: 3px solid #e8a82f;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  font-size: 0.88rem !important;
}
.mainContentsInner .c-cv-card__gift-tag {
  display: inline-block;
  background: #e8a82f;
  color: #fff;
  font-size: 0.75rem;
  padding: 1px 8px;
  border-radius: 3px;
  margin-right: 6px;
  font-weight: 700;
  vertical-align: middle;
}
.mainContentsInner .c-cv-card__cta { margin: 12px 0 0 !important; }
.mainContentsInner .c-cv-card__cta a {
  display: inline-block;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
}

/* CV 直販サブセクション（AD-HOME / 東京ガス 等の控えめ枠） */
.mainContentsInner .c-cv-direct {
  margin: 8px 0 0;
  padding: 16px 18px;
  background: #fafafa;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.mainContentsInner .c-cv-direct__heading {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-light);
  margin: 0 0 12px !important;
}
.mainContentsInner .c-cv-direct__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 16px;
}
.mainContentsInner .c-cv-direct__list li {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.mainContentsInner .c-cv-direct__list li::before { content: none; }
.mainContentsInner .c-cv-direct__name {
  font-size: 0.98rem !important;
  font-weight: 700;
  margin: 0 0 4px !important;
}
.mainContentsInner .c-cv-direct__name a {
  color: var(--primary-color);
  text-decoration: none;
}
.mainContentsInner .c-cv-direct__name a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}
.mainContentsInner .c-cv-direct__list p:last-child {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  color: var(--text-light);
  margin: 0 !important;
}

/* SP（768px 以下）：画像上、本文下に縦並び */
@media (max-width: 767px) {
  .mainContentsInner .c-cv-providers {
    padding: 18px 14px 22px;
  }
  .mainContentsInner .c-cv-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  .mainContentsInner .c-cv-card__media {
    max-width: 280px;
    margin: 0 auto;
  }
  .mainContentsInner .c-cv-card__name { font-size: 1.06rem; text-align: center; }
  .mainContentsInner .c-cv-card__tag { display: block; text-align: center; }
  .mainContentsInner .c-cv-card__cta { text-align: center; }
  .mainContentsInner .c-cv-card__cta a { display: block; }
}

/* ============================================================
   ハイブリッド図解クラス（HTML+CSS+小SVGアイコン）
   internetfax §5 知見：1枚SVG+text は SP で文字が読めなくなるため、
   レイアウトはHTML+CSS、文字はHTMLテキストで構成する
============================================================ */

/* 共通：figure 枠 */
.c-figure-html {
  margin: 24px 0;
  padding: 18px 22px;
  background: #fafafa;
  border: 1px solid #e0b78a;
  border-radius: 8px;
}
.c-figure-html__caption {
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
  margin: 0 0 16px;
  font-weight: 700;
}
.c-figure-html__note {
  font-size: 0.875rem;
  color: #6b7280;
  text-align: center;
  margin-top: 12px;
}

/* ----- 水平バーグラフ（c-hbar）：保証年数・効率・発電量・価格バー等の汎用 ----- */
.c-hbar {
  display: grid;
  gap: 8px;
}
.c-hbar__row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) 4fr minmax(70px, auto);
  align-items: center;
  gap: 10px;
}
.mainContentsInner .c-hbar__label {
  text-align: right;
  font-weight: 700;
  font-size: 0.95rem;
  color: #374151;
  margin: 0;
  line-height: 1.4;
}
.c-hbar__track {
  background: #f1f5f9;
  border-radius: 3px;
  height: 24px;
  overflow: hidden;
}
.c-hbar__bar {
  height: 100%;
  border-radius: 3px;
}
.c-hbar__bar--green   { background: #16a34a; }
.c-hbar__bar--orange  { background: #fb923c; }
.c-hbar__bar--yellow  { background: #fcd34d; }
.c-hbar__bar--red     { background: #dc2626; }
.c-hbar__bar--blue    { background: #0ea5e9; }
.c-hbar__bar--amber   { background: #f59e0b; }
.c-hbar__bar--purple  { background: #7c3aed; }
/* 幅 modifier（10%刻み・5%刻み・1%刻み追加） */
.c-hbar__bar--w100 { width: 100%; }
.c-hbar__bar--w95  { width: 95%; }
.c-hbar__bar--w43  { width: 43%; }
.c-hbar__bar--w22  { width: 22%; }
.c-hbar__bar--w9   { width: 9%; }
.c-hbar__bar--w7   { width: 7%; }
.c-hbar__bar--w5   { width: 5%; }
.c-hbar__bar--w90  { width: 90%; }
.c-hbar__bar--w85  { width: 85%; }
.c-hbar__bar--w83  { width: 83.3%; }
.c-hbar__bar--w80  { width: 80%; }
.c-hbar__bar--w75  { width: 75%; }
.c-hbar__bar--w72  { width: 72%; }
.c-hbar__bar--w70  { width: 70%; }
.c-hbar__bar--w68  { width: 68%; }
.c-hbar__bar--w67  { width: 66.7%; }
.c-hbar__bar--w65  { width: 65%; }
.c-hbar__bar--w62  { width: 62%; }
.c-hbar__bar--w60  { width: 60%; }
.c-hbar__bar--w58  { width: 58%; }
.c-hbar__bar--w55  { width: 55%; }
.c-hbar__bar--w52  { width: 52%; }
.c-hbar__bar--w50  { width: 50%; }
.c-hbar__bar--w48  { width: 48%; }
.c-hbar__bar--w45  { width: 45%; }
.c-hbar__bar--w42  { width: 42%; }
.c-hbar__bar--w40  { width: 40%; }
.c-hbar__bar--w38  { width: 38%; }
.c-hbar__bar--w35  { width: 35%; }
.c-hbar__bar--w32  { width: 32%; }
.c-hbar__bar--w30  { width: 30%; }
.c-hbar__bar--w25  { width: 25%; }
.c-hbar__bar--w20  { width: 20%; }
.c-hbar__bar--w15  { width: 15%; }
.c-hbar__bar--w10  { width: 10%; }
.mainContentsInner .c-hbar__value {
  font-weight: 700;
  font-size: 0.95rem;
  color: #374151;
  margin: 0;
  white-space: nowrap;
  text-align: left;
}
/* 凡例 */
.c-hbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: #6b7280;
}
.c-hbar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.c-hbar-legend__swatch {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.c-hbar-legend__swatch--green   { background: #16a34a; }
.c-hbar-legend__swatch--orange  { background: #fb923c; }
.c-hbar-legend__swatch--yellow  { background: #fcd34d; }
.c-hbar-legend__swatch--red     { background: #dc2626; }
.c-hbar-legend__swatch--blue    { background: #0ea5e9; }
.c-hbar-legend__swatch--amber   { background: #f59e0b; }
.c-hbar-legend__swatch--purple  { background: #7c3aed; }
.c-hbar-legend__swatch--navy    { background: #1e3a8a; }
@media (max-width: 700px) {
  .c-figure-html { padding: 14px 12px; }
  /* SPでは grid 3列を解除して縦並び（ラベル → バー → 値）に。
     行ごとのラベル文字数で bar 左端がズレるのを回避。 */
  .c-hbar__row {
    display: block;
    margin-bottom: 14px;
  }
  .mainContentsInner .c-hbar__label {
    display: block;
    text-align: left;
    margin: 0 0 4px 0;
    font-size: 0.875rem;
  }
  .c-hbar__track {
    height: 20px;
    width: 100%;
  }
  .mainContentsInner .c-hbar__value {
    display: block;
    text-align: right;
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
  }
}

/* c-hbar--inline modifier:
   track背景を表示せず、bar幅でvalueを直後に密着させるレイアウト。
   暗黙のスケール基準がなく「100%との比較」を見せる必要がない比較表で使う。
   HTML構造：__row 直下に label と track のみ、value は track 内（bar の兄弟）に置く。
   max-width で全体を中央寄せにして左右バランスを取る。
*/
.c-hbar--inline {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  column-gap: 12px;
  row-gap: 10px;
}
.c-hbar--inline .c-hbar__row {
  display: contents;
}
.c-hbar--inline .c-hbar__track {
  display: flex;
  align-items: center;
  background: transparent;
  height: auto;
  overflow: visible;
  border-radius: 0;
  min-width: 0;
}
.c-hbar--inline .c-hbar__bar {
  height: 22px;
  flex-shrink: 0;
  border-radius: 3px;
  /* w100 行で value が track 外にはみ出さないよう、value の最大幅分を確保 */
  max-width: calc(100% - 130px);
}
.mainContentsInner .c-hbar--inline .c-hbar__value {
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 0 10px;
  color: #374151;
}
@media (max-width: 700px) {
  /* SPでは grid 2列を解除して、ラベル → バー → 値 を縦並びに切り替える。
     ラベルが長文（日本語）の時に track が極端に狭くなりバーと値が破綻するのを回避。 */
  .c-hbar--inline {
    display: block;
    max-width: 100%;
  }
  .c-hbar--inline .c-hbar__row {
    display: block;
    margin-bottom: 14px;
  }
  .mainContentsInner .c-hbar--inline .c-hbar__label {
    display: block;
    margin: 0 0 4px 0;
    font-size: 0.875rem;
    text-align: left;
  }
  .c-hbar--inline .c-hbar__track {
    display: block;
    width: 100%;
    background: transparent;
  }
  .c-hbar--inline .c-hbar__bar {
    height: 20px;
    border-radius: 3px;
    max-width: 100%;
  }
  .mainContentsInner .c-hbar--inline .c-hbar__value {
    display: block;
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    text-align: right;
  }
}

/* ----- 縦積み上げバー＋右凡例（c-vstack）：費用内訳など合計100%の構成比を縦表現 ----- */
.c-vstack {
  display: flex;
  align-items: stretch;
  gap: 20px;
  max-width: 720px;
  margin: 14px auto 0;
}
.c-vstack__bar {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  border: 1px solid #d1d9e6;
  border-radius: 4px;
  overflow: hidden;
  min-height: 360px;
}
.c-vstack__seg { width: 100%; }
.c-vstack__seg--red    { background: #dc2626; }
.c-vstack__seg--orange { background: #fb923c; }
.c-vstack__seg--amber  { background: #f59e0b; }
.c-vstack__seg--yellow { background: #fcd34d; }
.c-vstack__seg--green  { background: #16a34a; }
.c-vstack__seg--blue   { background: #0ea5e9; }
.c-vstack__seg--gray   { background: #94a3b8; }
/* flex-grow で比率指定（合計100%相当） */
.c-vstack__seg--h43 { flex-grow: 43; }
.c-vstack__seg--h22 { flex-grow: 22; }
.c-vstack__seg--h9  { flex-grow: 9; }
.c-vstack__seg--h7  { flex-grow: 7; }
.c-vstack__seg--h5  { flex-grow: 5; }
.c-vstack__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.mainContentsInner .c-vstack__legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: #374151;
  margin: 0;
  line-height: 1.4;
}
.c-vstack__legend-sw {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}
.c-vstack__legend-sw--red    { background: #dc2626; }
.c-vstack__legend-sw--orange { background: #fb923c; }
.c-vstack__legend-sw--amber  { background: #f59e0b; }
.c-vstack__legend-sw--yellow { background: #fcd34d; }
.c-vstack__legend-sw--green  { background: #16a34a; }
.c-vstack__legend-sw--blue   { background: #0ea5e9; }
.c-vstack__legend-sw--gray   { background: #94a3b8; }
@media (max-width: 700px) {
  .c-vstack { gap: 14px; max-width: none; }
  .c-vstack__bar { flex: 0 0 60px; min-height: 340px; }
  .mainContentsInner .c-vstack__legend li { font-size: 0.8125rem; gap: 6px; }
}

/* ----- 積み上げ横棒（c-stackbar）：費用内訳など合計100%の構成比 ----- */
.c-stackbar {
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #d1d9e6;
  margin: 14px 0 0;
}
.c-stackbar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  white-space: nowrap;
  overflow: hidden;
}
.c-stackbar__seg--red    { background: #dc2626; }
.c-stackbar__seg--orange { background: #fb923c; }
.c-stackbar__seg--amber  { background: #f59e0b; }
.c-stackbar__seg--yellow { background: #fcd34d; color: #92400e; text-shadow: none; }
.c-stackbar__seg--green  { background: #16a34a; }
.c-stackbar__seg--blue   { background: #0ea5e9; }
.c-stackbar__seg--gray   { background: #94a3b8; }
/* 幅modifier（合計100%になるよう積み上げる） */
.c-stackbar__seg--w5  { width: 5%; }
.c-stackbar__seg--w6  { width: 6%; }
.c-stackbar__seg--w7  { width: 7%; }
.c-stackbar__seg--w8  { width: 8%; }
.c-stackbar__seg--w9  { width: 9%; }
.c-stackbar__seg--w10 { width: 10%; }
.c-stackbar__seg--w12 { width: 12%; }
.c-stackbar__seg--w15 { width: 15%; }
.c-stackbar__seg--w20 { width: 20%; }
.c-stackbar__seg--w22 { width: 22%; }
.c-stackbar__seg--w25 { width: 25%; }
.c-stackbar__seg--w30 { width: 30%; }
.c-stackbar__seg--w35 { width: 35%; }
.c-stackbar__seg--w40 { width: 40%; }
.c-stackbar__seg--w43 { width: 43%; }
.c-stackbar__seg--w50 { width: 50%; }
.c-stackbar__seg--w60 { width: 60%; }
/* 凡例（PC: 4列、SP: 2列に自動切替） */
.c-stackbar-legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px 14px;
}
.mainContentsInner .c-stackbar-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #374151;
  margin: 0;
  line-height: 1.5;
}
.c-stackbar-legend__sw {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.c-stackbar-legend__sw--red    { background: #dc2626; }
.c-stackbar-legend__sw--orange { background: #fb923c; }
.c-stackbar-legend__sw--amber  { background: #f59e0b; }
.c-stackbar-legend__sw--yellow { background: #fcd34d; }
.c-stackbar-legend__sw--green  { background: #16a34a; }
.c-stackbar-legend__sw--blue   { background: #0ea5e9; }
.c-stackbar-legend__sw--gray   { background: #94a3b8; }
@media (max-width: 700px) {
  .c-stackbar { height: 32px; }
  .c-stackbar__seg { font-size: 0.6875rem; }
}

/* ----- 4ボックスグリッド（c-cardgrid）：代替手段フロー・選び方カード等 ----- */
.c-cardgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.c-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
.c-cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
.c-cardgrid__item {
  background: #fff;
  border: 1.5px solid #e0b78a;
  border-radius: 8px;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
}
.c-cardgrid__item--accent {
  background: linear-gradient(180deg, #fffbe5, #fff);
  border-color: #d97706;
}
.c-cardgrid__item--star {
  background: linear-gradient(180deg, #ecfdf5, #fff);
  border-color: #16a34a;
  border-width: 2px;
}
.mainContentsInner .c-cardgrid__title {
  font-size: 1rem;
  font-weight: 700;
  color: #9a3412;
  margin: 0 0 6px;
  line-height: 1.3;
  text-align: center;
}
.mainContentsInner .c-cardgrid__sub {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0 0 12px;
  text-align: center;
}
.mainContentsInner .c-cardgrid__row {
  font-size: 0.875rem;
  color: #374151;
  margin: 0 0 8px;
  text-align: center;
}
.mainContentsInner .c-cardgrid__row b {
  display: block;
  font-size: 1rem;
  margin-top: 2px;
}
.c-cardgrid__star {
  display: inline-block;
  font-size: 1rem;
  color: #16a34a;
  font-weight: 700;
}
@media (max-width: 700px) {
  .c-cardgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .c-cardgrid--2 { grid-template-columns: 1fr; }
  .c-cardgrid__item { padding: 12px 10px; }
  .mainContentsInner .c-cardgrid__title { font-size: 0.95rem; }
}

/* ----- ステップフロー（c-stepflow-h）：5工程フロー（垂直統合プロセス等） ----- */
.c-stepflow-h {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 6px;
  align-items: center;
}
.c-stepflow-h__step {
  background: #fef3c7;
  border: 1.5px solid #d97706;
  border-radius: 8px;
  padding: 14px 8px;
  text-align: center;
}
.c-stepflow-h__step--end {
  background: #16a34a;
  border-color: #166534;
  color: #fff;
}
.mainContentsInner .c-stepflow-h__num {
  font-size: 0.75rem;
  font-weight: 700;
  color: #d97706;
  margin: 0 0 4px;
}
.c-stepflow-h__step--end .c-stepflow-h__num,
.mainContentsInner .c-stepflow-h__step--end .c-stepflow-h__num { color: #bbf7d0; }
.mainContentsInner .c-stepflow-h__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #9a3412;
  margin: 0;
  line-height: 1.3;
}
.c-stepflow-h__step--end .c-stepflow-h__title,
.mainContentsInner .c-stepflow-h__step--end .c-stepflow-h__title { color: #fff; }
.c-stepflow-h__arrow {
  color: #9a7445;
  font-size: 1.2rem;
  font-weight: 700;
}
@media (max-width: 700px) {
  .c-stepflow-h {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .c-stepflow-h__arrow {
    text-align: center;
    transform: rotate(90deg);
    padding: 2px 0;
  }
  .mainContentsInner .c-stepflow-h__title { font-size: 0.875rem; }
}

/* ----- タイムライン（c-timeline-h）：HIT→MODULUSの時系列フロー等 ----- */
.c-timeline-h {
  display: grid;
  gap: 8px;
}
.c-timeline-h__item {
  display: grid;
  grid-template-columns: 80px auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #d1d9e6;
}
.c-timeline-h__item:last-child { border-bottom: none; }
.mainContentsInner .c-timeline-h__year {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0;
  text-align: right;
}
.c-timeline-h__item--milestone .c-timeline-h__year,
.mainContentsInner .c-timeline-h__item--milestone .c-timeline-h__year { color: #dc2626; }
.c-timeline-h__item--end .c-timeline-h__year,
.mainContentsInner .c-timeline-h__item--end .c-timeline-h__year { color: #16a34a; }
.c-timeline-h__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1e3a8a;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #1e3a8a;
  margin-top: 4px;
}
.c-timeline-h__item--milestone .c-timeline-h__dot { background: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
.c-timeline-h__item--end .c-timeline-h__dot { background: #16a34a; box-shadow: 0 0 0 1px #16a34a; }
.mainContentsInner .c-timeline-h__text {
  font-size: 0.9375rem;
  color: #374151;
  margin: 0;
  line-height: 1.5;
}
.c-timeline-h__item--milestone .c-timeline-h__text,
.mainContentsInner .c-timeline-h__item--milestone .c-timeline-h__text { font-weight: 700; color: #9a3412; }
.c-timeline-h__item--end .c-timeline-h__text,
.mainContentsInner .c-timeline-h__item--end .c-timeline-h__text { font-weight: 700; color: #166534; }
@media (max-width: 700px) {
  .c-timeline-h__item {
    grid-template-columns: 60px auto 1fr;
    gap: 8px;
  }
  .mainContentsInner .c-timeline-h__year { font-size: 0.875rem; }
  .mainContentsInner .c-timeline-h__text { font-size: 0.875rem; }
}

/* ----- 2カラム比較（c-compare2）：構造断面比較・before/after等 ----- */
.c-compare2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.c-compare2__col {
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
}
.c-compare2__col--bad   { border-color: #f87171; background: #fff7ed; }
.c-compare2__col--good  { border-color: #4ade80; background: #f0fdf4; }
.mainContentsInner .c-compare2__heading {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px;
  color: #374151;
}
.c-compare2__col--bad .c-compare2__heading,
.mainContentsInner .c-compare2__col--bad .c-compare2__heading { color: #9a3412; }
.c-compare2__col--good .c-compare2__heading,
.mainContentsInner .c-compare2__col--good .c-compare2__heading { color: #166534; }
.c-compare2__svg {
  margin: 0 auto 12px;
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
}
.mainContentsInner .c-compare2__note {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0 0 8px;
  text-align: center;
}
.mainContentsInner .c-compare2__result {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid #e0b78a;
}
.c-compare2__col--bad .c-compare2__result { color: #7f1d1d; }
.c-compare2__col--good .c-compare2__result { color: #166534; }
@media (max-width: 700px) {
  .c-compare2 { grid-template-columns: 1fr; gap: 12px; }
}

/* ----- ポジショニングマップ（c-posmap）：価格×サポート等の2軸マップ ----- */
.c-posmap {
  position: relative;
  background: #fff;
  border: 1px solid #e0b78a;
  border-radius: 8px;
  padding: 30px 20px 50px 60px;
}
.c-posmap__svg {
  width: 100%;
  height: auto;
  display: block;
}
.mainContentsInner .c-posmap__axis-x {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  margin: 6px 0 0;
}
.mainContentsInner .c-posmap__axis-y {
  font-size: 0.75rem;
  color: #6b7280;
  position: absolute;
  left: -8px;
  top: 50%;
  transform-origin: 0 0;
  transform: rotate(-90deg) translate(-50%, 0);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .c-posmap {
    padding: 20px 10px 30px 40px;
  }
  .mainContentsInner .c-posmap__axis-x { font-size: 0.6875rem; }
}

/* ----- 中央ハブ＋4方向枝（c-hubaxis）：4軸判断フレーム等 ----- */
.c-hubaxis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 110px auto;
  gap: 12px;
  align-items: stretch;
}
.c-hubaxis__hub {
  grid-column: 2;
  grid-row: 2;
  background: #dc2626;
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  width: 110px;
  height: 110px;
  margin: 0 auto;
}
.c-hubaxis__branch {
  background: #fef3c7;
  border: 2px solid #d97706;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.c-hubaxis__branch--n { grid-column: 2; grid-row: 1; }
.c-hubaxis__branch--e { grid-column: 3; grid-row: 2; background: #fde68a; }
.c-hubaxis__branch--s { grid-column: 2; grid-row: 3; background: #fbbf24; }
.c-hubaxis__branch--w { grid-column: 1; grid-row: 2; background: #fb923c; }
.mainContentsInner .c-hubaxis__btitle {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  text-align: center;
  color: #9a3412;
}
.c-hubaxis__branch--w .c-hubaxis__btitle,
.c-hubaxis__branch--s .c-hubaxis__btitle,
.mainContentsInner .c-hubaxis__branch--w .c-hubaxis__btitle,
.mainContentsInner .c-hubaxis__branch--s .c-hubaxis__btitle { color: #fff; }
.mainContentsInner .c-hubaxis__bnote {
  font-size: 0.8125rem;
  margin: 0;
  text-align: center;
  color: #92400e;
}
.c-hubaxis__branch--w .c-hubaxis__bnote,
.c-hubaxis__branch--s .c-hubaxis__bnote,
.mainContentsInner .c-hubaxis__branch--w .c-hubaxis__bnote,
.mainContentsInner .c-hubaxis__branch--s .c-hubaxis__bnote { color: #fff; }
@media (max-width: 700px) {
  .c-hubaxis {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    min-height: auto;
    gap: 8px;
  }
  .c-hubaxis__hub {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    border-radius: 8px;
    padding: 14px;
  }
  .c-hubaxis__branch--n { grid-column: 1; grid-row: 2; }
  .c-hubaxis__branch--e { grid-column: 1; grid-row: 3; }
  .c-hubaxis__branch--s { grid-column: 1; grid-row: 4; }
  .c-hubaxis__branch--w { grid-column: 1; grid-row: 5; }
}

/* ----- 屋根配置比較（c-roofcompare）：寄棟屋根のパネル配置 ----- */
.c-roofcompare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.c-roofcompare__col {
  text-align: center;
}
.mainContentsInner .c-roofcompare__heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: #374151;
}
.c-roofcompare__svg {
  width: 100%;
  height: auto;
  max-width: 280px;
  margin: 0 auto;
  display: block;
}
.mainContentsInner .c-roofcompare__result {
  font-size: 1rem;
  font-weight: 700;
  margin: 12px 0 0;
}
.c-roofcompare__col--bad .c-roofcompare__result,
.mainContentsInner .c-roofcompare__col--bad .c-roofcompare__result { color: #7f1d1d; }
.c-roofcompare__col--good .c-roofcompare__result,
.mainContentsInner .c-roofcompare__col--good .c-roofcompare__result { color: #92400e; }
@media (max-width: 700px) {
  .c-roofcompare { grid-template-columns: 1fr; gap: 16px; }
}

/* ----- SVG内テキストのフォント継承（本文と同じ Noto Sans JP に揃える） ----- */
.c-figure-svg svg text,
.mainContentsInner .c-figure-svg svg text {
  font-family: inherit;
}

/* ----- c-figure-svg__inline-legend : SVG下のインライン色凡例（system.html SVG2 等） ----- */
.c-figure-svg__inline-legend,
.mainContentsInner .c-figure-svg__inline-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 14px 0 0;
  padding: 0;
  font-size: 15px;
  color: #374151;
  line-height: 1.5;
}
.mainContentsInner .c-figure-svg__inline-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.c-figure-svg__legend-mark,
.mainContentsInner .c-figure-svg__legend-mark {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}
.c-figure-svg__legend-mark--electron { background: #dc2626; }
.c-figure-svg__legend-mark--hole { background: #1a3a6e; }

/* ----- c-figure-svg__roof-labels : SVG下の4等分カラムラベル（yane.html 屋根形状図 等） ----- */
.c-figure-svg__roof-labels,
.mainContentsInner .c-figure-svg__roof-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  text-align: center;
  line-height: 1.4;
}
.mainContentsInner .c-figure-svg__roof-labels > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mainContentsInner .c-figure-svg__roof-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1a3a6e;
}
.mainContentsInner .c-figure-svg__roof-sub {
  font-size: 0.8125rem;
  color: #555;
}

/* ----- c-figure-legend : SVG/HTML 図解の番号付き凡例（system.html 等） ----- */
.c-figure-legend,
.mainContentsInner .c-figure-legend {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mainContentsInner .c-figure-legend > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}
.c-figure-legend__num,
.mainContentsInner .c-figure-legend__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent-color, #d97706);
  color: var(--accent-color, #d97706);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (max-width: 700px) {
  .mainContentsInner .c-figure-legend > li { font-size: 13.5px; }
  .c-figure-legend__num,
  .mainContentsInner .c-figure-legend__num { width: 24px; height: 24px; font-size: 13px; }
}


/* ============================================================
   c-stepflow：N段ステップフロー（① → ② → ③ → GOAL）
   internetfax 由来。solar 配色（オレンジ系）で展開。
   用途：戦略・段階的設計の可視化（自家消費率の積み上げ等）
============================================================ */
.c-stepflow {
  background: linear-gradient(to right, #fff7ee, #ffffff, #fff3e6);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(232, 97, 10, 0.08);
  padding: 24px 20px;
  margin: 20px 0 0;
}
.c-stepflow__title {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: #c44a00;
  margin: 0 0 6px;
}
.mainContentsInner .c-stepflow__subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 18px;
  line-height: 1.5;
}
.c-stepflow__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}
.c-stepflow__grid--4 {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}
.c-stepflow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #c44a00;
}
.c-stepflow__card {
  background: #ffffff;
  border: 1.5px solid #e8610a;
  border-radius: 10px;
  padding: 16px 14px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.c-stepflow__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e8610a;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  flex-shrink: 0;
}
.c-stepflow__badge-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
.c-stepflow__badge-num {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}
.mainContentsInner .c-stepflow p {
  margin: 0;
  line-height: 1.4;
}
.mainContentsInner .c-stepflow p.c-stepflow__title { margin: 0 0 6px; }
.mainContentsInner .c-stepflow p.c-stepflow__subtitle { margin: 0 0 18px; }
.mainContentsInner .c-stepflow .c-stepflow__heading {
  font-size: 1rem;
  font-weight: 700;
  color: #c44a00;
  margin: 0;
  line-height: 1.35;
}
.c-stepflow__divider {
  border: none;
  border-top: 1px solid #e8610a;
  opacity: 0.3;
  margin: 8px 14px 8px;
}
.mainContentsInner .c-stepflow .c-stepflow__note {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
  line-height: 1.45;
}
.c-stepflow__metric {
  font-size: 1.3rem;
  font-weight: 700;
  color: #e8610a;
  display: block;
  margin: 6px 0 0;
  line-height: 1.2;
}
.c-stepflow__card--goal {
  background: linear-gradient(180deg, #e8610a, #c44a00);
  border-color: #c44a00;
  border-width: 2px;
}
.c-stepflow__card--goal .c-stepflow__badge {
  background: #ffffff;
  color: #e8610a;
}
.mainContentsInner .c-stepflow__card--goal .c-stepflow__heading,
.mainContentsInner .c-stepflow__card--goal .c-stepflow__note {
  color: #ffffff;
}
.c-stepflow__card--goal .c-stepflow__metric {
  color: #ffffff;
}
.c-stepflow__card--goal .c-stepflow__divider {
  border-color: #ffffff;
  opacity: 0.4;
}
@media (max-width: 700px) {
  .c-stepflow__grid,
  .c-stepflow__grid--4 {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .c-stepflow__arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}


/* ============================================================
   c-costflow-card：足し算フロー（① + ② + ③ = 結果）
   internetfax 由来。solar 配色で展開。
   用途：手段の組み合わせ→結果（自家消費比率の手段別積み上げ等）
============================================================ */
.c-costflow {
  background: linear-gradient(to right, #fff7ee, #ffffff, #fff3e6);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(232, 97, 10, 0.08);
  padding: 24px 20px;
  margin: 20px 0 0;
}
.c-costflow__title {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: #c44a00;
  margin: 0 0 6px;
}
.mainContentsInner .c-costflow__subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  margin: 0 0 20px;
  line-height: 1.5;
}
.c-costflow__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}
.c-costflow__grid--3plus {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
}
.c-costflow__op {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #e8610a;
  padding: 0 4px;
}
.c-costflow__op--equals {
  color: #c44a00;
}
.c-costflow-card {
  background: #ffffff;
  border: 1.5px solid #e8610a;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.c-costflow-card__head {
  background: #e8610a;
  color: #ffffff;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 4px;
  line-height: 1.3;
}
.c-costflow-card__body {
  padding: 12px 8px 10px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.mainContentsInner .c-costflow-card__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #c44a00;
  margin: 0;
  line-height: 1.3;
}
.mainContentsInner .c-costflow-card__unit {
  font-size: 0.78rem;
  color: #666;
  margin: 2px 0 0;
  line-height: 1.3;
  min-height: 1em;
}
.c-costflow-card__divider {
  border: none;
  border-top: 1px solid #e8610a;
  opacity: 0.3;
  margin: 6px 14px 4px;
}
.mainContentsInner .c-costflow-card__note {
  font-size: 0.85rem;
  color: #666;
  margin: 4px 0 0;
  line-height: 1.45;
}
.c-costflow-card--result {
  background: linear-gradient(180deg, #e8610a, #c44a00);
  border-color: #c44a00;
  border-width: 2px;
}
.c-costflow-card--result .c-costflow-card__head {
  background: transparent;
}
.mainContentsInner .c-costflow-card--result .c-costflow-card__value,
.mainContentsInner .c-costflow-card--result .c-costflow-card__unit,
.mainContentsInner .c-costflow-card--result .c-costflow-card__note {
  color: #ffffff;
}
.c-costflow-card--result .c-costflow-card__divider {
  border-color: #ffffff;
  opacity: 0.4;
}
@media (max-width: 800px) {
  .c-costflow__grid,
  .c-costflow__grid--3plus {
    grid-template-columns: 1fr;
  }
  .c-costflow__op {
    padding: 6px 0;
    font-size: 1.4rem;
  }
}


/* ============================================================
   c-usecase-card：用途別おすすめ（メイン1点強調・他は補助）
   internetfax 由来。solar 配色で展開。
   用途：複数選択肢の中で1点だけ強調したい場面（CO2削減量の比較等）
============================================================ */
.c-usecase-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}
.c-usecase-card {
  background: #ffffff;
  border: 1.5px solid #d1d9e6;
  border-radius: 10px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.c-usecase-card--best {
  background: linear-gradient(180deg, #fff3e6, #ffffff);
  border-color: #e8610a;
  border-width: 2.5px;
  box-shadow: 0 4px 14px rgba(232, 97, 10, 0.18);
}
.c-usecase-card__ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #e8610a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.mainContentsInner .c-usecase-card__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #666;
  margin: 6px 0 4px;
}
.c-usecase-card--best .c-usecase-card__label {
  color: #c44a00;
}
.mainContentsInner .c-usecase-card__metric {
  font-size: 1.5rem;
  font-weight: 800;
  color: #c44a00;
  margin: 4px 0;
  line-height: 1.1;
}
.c-usecase-card--best .c-usecase-card__metric {
  font-size: 1.95rem;
  color: #e8610a;
}
.mainContentsInner .c-usecase-card__unit {
  font-size: 0.78rem;
  color: #666;
  margin: 0 0 6px;
}
.c-usecase-card__divider {
  border: none;
  border-top: 1px solid #d1d9e6;
  width: 70%;
  margin: 6px auto;
}
.c-usecase-card--best .c-usecase-card__divider {
  border-color: #e8610a;
  opacity: 0.4;
}
.mainContentsInner .c-usecase-card__note {
  font-size: 0.82rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .c-usecase-cards {
    grid-template-columns: 1fr 1fr;
  }
  .c-usecase-card--best {
    grid-column: 1 / -1;
  }
}
@media (max-width: 380px) {
  .c-usecase-cards {
    grid-template-columns: 1fr;
  }
}


/* table-fixed 行ハイライト（特定行を淡オレンジで強調・nextenergy 中間ポジション等） */
.mainContentsInner table.table-fixed tr.row-highlight > td.service,
.mainContentsInner table.table-fixed tr.row-highlight > td.recommend,
.mainContentsInner table.table-fixed tr.row-highlight > td.reason {
  background: #fff3e6;
}


/* c-unit-calc：単位換算ウィジェット（words/w_kw_kwh / words/a_w_v 用） */
.c-unit-calc {
  background: #fffaf2;
  border: 1px solid #f3d8b8;
  border-radius: 8px;
  padding: 18px 20px;
  margin: 18px 0 22px;
}
.c-unit-calc__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.c-unit-calc__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
}
.c-unit-calc__field label {
  font-weight: 600;
  color: #5a3a10;
}
.c-unit-calc__field input,
.c-unit-calc__field select {
  padding: 8px 10px;
  border: 1px solid #d1d9e6;
  border-radius: 4px;
  background: #fff;
  font-size: 1rem;
  font-family: inherit;
}
.c-unit-calc__field input:focus,
.c-unit-calc__field select:focus {
  outline: 2px solid #e8610a;
  outline-offset: -1px;
  border-color: #e8610a;
}
.c-unit-calc__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  background: #fff;
  border: 1px solid #f3d8b8;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.c-unit-calc__result-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-right: 1px solid #f3e0c8;
}
.c-unit-calc__result-row:last-child {
  border-right: none;
}
.mainContentsInner .c-unit-calc__result-name {
  font-size: 0.82rem;
  color: #666;
  margin: 0;
  line-height: 1.3;
}
.mainContentsInner .c-unit-calc__result-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #c84e0a;
  margin: 0;
  line-height: 1.3;
  word-break: break-all;
}
.mainContentsInner .c-unit-calc__formula {
  font-size: 0.875rem;
  color: #5a3a10;
  margin: 0;
  padding-top: 4px;
  border-top: 1px dashed #f3d8b8;
}
.mainContentsInner .c-unit-calc__formula b {
  color: #c84e0a;
}
.mainContentsInner .c-unit-calc__context {
  font-size: 0.875rem;
  color: #444;
  margin: 8px 0 0;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .c-unit-calc__results {
    grid-template-columns: 1fr 1fr;
  }
  .c-unit-calc__result-row {
    border-right: none;
    border-bottom: 1px solid #f3e0c8;
    padding: 8px 4px;
  }
  .c-unit-calc__result-row:nth-last-child(-n+2) {
    border-bottom: none;
  }
}
@media (max-width: 380px) {
  .c-unit-calc__results {
    grid-template-columns: 1fr;
  }
  .c-unit-calc__result-row {
    border-bottom: 1px solid #f3e0c8;
  }
  .c-unit-calc__result-row:last-child {
    border-bottom: none;
  }
}


/* c-sitemap：HTMLサイトマップ用の構造化リンクリスト */
.c-sitemap-section {
  margin: 12px 0 22px;
}
.c-sitemap-section + .c-sitemap-subhead {
  margin-top: 18px;
}
.mainContentsInner .c-sitemap-subhead {
  font-size: 0.95rem;
  font-weight: 700;
  color: #5a3a10;
  margin: 12px 0 6px;
  padding: 4px 0 4px 10px;
  border-left: 3px solid var(--primary-color, #e8610a);
  background: #fffaf2;
  line-height: 1.4;
}
.c-sitemap-inline {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.c-sitemap-inline li {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
.c-sitemap-inline li a {
  display: inline-block;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #e0d4c0;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #444;
  text-decoration: none;
  transition: all 0.15s;
}
.c-sitemap-inline li a:hover {
  background: #fff3e6;
  border-color: var(--primary-color, #e8610a);
  color: var(--primary-color, #e8610a);
}
.c-sitemap-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.c-sitemap-list li {
  margin: 0;
  padding: 6px 0 6px 18px;
  line-height: 1.5;
  border-bottom: 1px dotted #e0d4c0;
  position: relative;
}
.c-sitemap-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  background: var(--primary-color, #e8610a);
  border-radius: 50%;
}
.c-sitemap-list li:last-child {
  border-bottom: none;
}
.c-sitemap-list li a {
  font-weight: 600;
  color: #c84e0a;
  text-decoration: none;
  margin-right: 8px;
}
.c-sitemap-list li a:hover {
  text-decoration: underline;
}
.mainContentsInner .c-sitemap-list .c-sitemap-list__desc {
  display: inline;
  font-size: 0.875rem;
  color: #666;
}
@media (max-width: 700px) {
  .mainContentsInner .c-sitemap-list .c-sitemap-list__desc {
    display: block;
    margin-top: 2px;
  }
}


/* c-formulas：用語ページ用の式リスト（W=A×V等） */
.c-formulas {
  background: #fffaf2;
  border-left: 4px solid #e8610a;
  border-radius: 4px;
  padding: 12px 18px;
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
}
.c-formulas li {
  font-size: 1.05rem;
  font-weight: 700;
  color: #5a3a10;
}


/* ===========================================================
   /hikaku/ 費用収支シミュレーション 専用スタイル（2026-05-09）
   =========================================================== */

/* H1直下のリード段落：summary-box・H2「条件を絞り込んで〜」を削除した分、
   上余白を圧縮して比較表との距離を縮める。下は検索フォームとの間に少し空ける */
.mainContentsInner .c-hikaku-lead {
  padding-top: 10px;
  margin-bottom: 24px;
}

/* 検索フォーム */
.mainContentsInner .c-hikaku-search {
  background: #fff8ef;
  border: 1px solid #f0d9b3;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 16px 0 24px;
}
.mainContentsInner .c-hikaku-search__field {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}
.mainContentsInner .c-hikaku-search__field:last-of-type {
  margin-bottom: 18px;
}
.mainContentsInner .c-hikaku-search__legend {
  font-size: 1rem;
  font-weight: 700;
  color: #5a3a10;
  padding: 0 0 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0d9b3;
  width: 100%;
}
.mainContentsInner .c-hikaku-search__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 0;
}
.mainContentsInner .c-hikaku-search__options--grid3 {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.mainContentsInner .c-hikaku-search__option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid #e8d5b5;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  margin: 0;
  font-size: 0.95rem;
}
.mainContentsInner .c-hikaku-search__option:hover {
  background: #fff5e6;
  border-color: var(--primary-color);
}
.mainContentsInner .c-hikaku-search__option input[type="radio"] {
  margin: 0 8px 0 0;
  flex-shrink: 0;
}
.mainContentsInner .c-hikaku-search__option:has(input[type="radio"]:checked) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  font-weight: 700;
}
.mainContentsInner .c-hikaku-search__option span {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.3;
}
.mainContentsInner .c-hikaku-search__option small {
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 1px;
}
.mainContentsInner .c-hikaku-search__submit {
  text-align: center;
  margin-top: 18px;
}
.mainContentsInner .c-hikaku-search__submit .c-btn--primary {
  min-width: 280px;
  padding: 12px 28px;
  font-size: 1rem;
}

@media (max-width: 700px) {
  .mainContentsInner .c-hikaku-search {
    padding: 14px 14px;
  }
  .mainContentsInner .c-hikaku-search__options {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .mainContentsInner .c-hikaku-search__options--grid3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .mainContentsInner .c-hikaku-search__option {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  .mainContentsInner .c-hikaku-search__submit .c-btn--primary {
    min-width: 0;
    width: 100%;
  }
}

/* 比較結果テーブル：ソート選択列の強調＋PC/SP表示調整 */
.mainContentsInner .c-hikaku-table th.is-sorted,
.mainContentsInner .c-hikaku-table td.is-sorted {
  background: #fff5e6 !important;
}
.mainContentsInner .c-hikaku-table th.is-sorted {
  background: #f5d5a8 !important;
}
/* 1列目（メーカー／パネル型番）はデータが左揃えなのでヘッダーも左揃えに統一 */
.mainContentsInner .c-hikaku-table thead th:first-child {
  text-align: left;
}
/* 上下中央揃えで揃える（マルチラインのサブタイトルでセル高が伸びても他列と整合） */
.mainContentsInner .c-hikaku-table tbody td {
  vertical-align: middle;
}
.mainContentsInner .c-hikaku-table .c-hikaku-table__sortmark {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 400;
  color: #5a3a10;
  margin-top: 2px;
}
.mainContentsInner .c-hikaku-table td.service small {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: #555;
  margin-top: 2px;
  white-space: normal;
  line-height: 1.4;
}
.mainContentsInner .c-hikaku-table td.detail {
  white-space: nowrap;
}
.mainContentsInner .c-hikaku-table td.detail .c-btn--detail {
  white-space: nowrap;
}
/* SPで thead/tbody が display:table で独立計算されると列幅がズレる問題を、
   div ラッパー側で overflow-x を取り、table 自体は通常表示にして解決する */
.mainContentsInner .c-hikaku-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-image: linear-gradient(to right, transparent calc(100% - 24px), rgba(217,119,6,0.08));
}
@media (max-width: 767px) {
  /* table-fixed のデフォルト SP CSS（display:block・thead/tbody を display:table 化）を
     c-hikaku-table では解除。div ラッパー側で横スクロールするため table は通常 table 表示 */
  .mainContentsInner table.table-fixed.c-hikaku-table {
    display: table;
    overflow-x: visible;
    background-image: none;
    width: 100%;
    min-width: 580px;
    table-layout: auto;
  }
  .mainContentsInner table.table-fixed.c-hikaku-table > thead,
  .mainContentsInner table.table-fixed.c-hikaku-table > tbody {
    display: table-row-group;
    width: auto;
    min-width: 0;
  }
}

/* ----------------------------------------------------------------------
   service ページ（/solar/service/{id}/）専用
   PC：通常テーブル2つ＋H2（既存維持）
   SP：H2＋テーブルをコンパクト化、横スクロールやめてカード調1画面に収める
   対象：service.tpl.html の「費用と回収年数」「長期収支」テーブル
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mainContentsInner h2.c-payback-h2 {
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 18px 0 6px;
    padding: 8px 12px;
  }
  .mainContentsInner table.table-fixed.c-payback-table {
    display: table;
    width: 100%;
    min-width: 0;
    background-image: none;
    margin: 0 0 14px;
    table-layout: fixed;
  }
  .mainContentsInner table.table-fixed.c-payback-table > tbody {
    display: table-row-group;
    width: auto;
    min-width: 0;
  }
  .mainContentsInner table.table-fixed.c-payback-table caption {
    display: none;
  }
  .mainContentsInner table.table-fixed.c-payback-table td {
    white-space: normal;
    padding: 10px 12px;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .mainContentsInner table.table-fixed.c-payback-table td.service {
    width: 50%;
    background: var(--bg-light);
  }
  .mainContentsInner table.table-fixed.c-payback-table td.recommend {
    font-weight: 700;
    font-size: 1rem;
  }
  /* 四隅の角丸（display: table では overflow: hidden が効きにくいため td に直接設定） */
  .mainContentsInner table.table-fixed.c-payback-table tr:first-child td:first-child {
    border-top-left-radius: var(--radius-md);
  }
  .mainContentsInner table.table-fixed.c-payback-table tr:first-child td:last-child {
    border-top-right-radius: var(--radius-md);
  }
  .mainContentsInner table.table-fixed.c-payback-table tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-md);
  }
  .mainContentsInner table.table-fixed.c-payback-table tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-md);
  }
}