/* 輸入車向け・国産車向け・バッテリー規格向けのレイアウト */
/* 横並び */
/* 横並び */
.three-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

/* 3列の“箱”は a が担当（flex itemはaなのでここが重要） */
.three-cols a{
  display: block;
  flex: 0 0 calc((100% - 24px) / 3);
  max-width: calc((100% - 24px) / 3);
  box-sizing: border-box;
  min-width: 0;
  line-height: 0;
}

/* 画像は箱の100% */
.three-cols img{
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.2s ease;
  cursor: pointer;
}

.three-cols img:hover{
  filter: brightness(0.75);
}

/* タブレット以下：2列（imgではなくaに指定） */
@media screen and (max-width: 768px){
  .three-cols a{
    flex: 0 0 calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
  }
}


/* カーソルが来たところを暗くする */
.three-cols img:hover {
  filter: brightness(0.75); /* 数値を下げるほど暗くなる */
}

/* セクション見出し　◾️ */
.section-title{

  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 8px;
  padding-left: 8px;
  border-left: 4px solid #002B6E;
  line-height: 1.4;
}

.font_up{
  font-size: 22px;
  font-weight: bold;
}

/* 余白 */
.space{
  margin: min(40px, calc(40 / 1440 * 100vw));
}

/* ───────────────────────────────────────────────────────── */
/* styles.css */
/* ───────────────────────────────────────────────────────── */

.table-wrap {
  max-width: 1000px;
  margin: 16px auto;
  padding: 0 12px;
}

.category-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.category-table th,
.category-table td {
  border: 1px solid #e6e8ee;
  padding: 12px 10px;
  font-size: 16px;
  word-break: break-word;
}

.category-table th {
  text-align: left;
  background: #f1f3f8;
}

/* セル全体クリック（リンク文字は表示しない＝カテゴリ文字だけ） */
.cell-link {
font-weight: 700;
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 12px 10px;
  margin: -12px -10px; /* tdのpaddingを打ち消して全面クリック */
}

.cell-link:hover {
  background: #eef3ff;
}

.cell-link:focus {
  outline: 3px solid #b9c7ea;
  outline-offset: -2px;
}

/* ===== レスポンシブ（スマホはカード化） ===== */
@media (max-width: 768px) {
  .category-table thead {
    display: none;
  }

  .category-table,
  .category-table tbody,
  .category-table tr,
  .category-table td {
    display: block;
    width: 100%;
  }

  .category-table tr {
    border: 3px solid #e6e8ee;
    margin: 0 0 12px 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .category-table td {
    border: none;
  }

  .category-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
  }

  /* スマホ時はラベル分があるので、全面クリックは通常paddingに戻す */
  .cell-link {
    margin: 0;
    padding: 10px;
  }
}

/* セクション全体：上下余白を縮める */
.pro-support {
  max-width: 900px;
  margin: 32px auto;          /* ← ここを大幅に縮小 */
  padding: 24px 16px;         /* ← 内側余白も控えめに */
  text-align: center;
}

/* 英文：上下余白を詰める */
.pro-eyebrow {
  margin: 0 0 6px;            /* 下だけ少し */
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #5a6072;
}

/* 見出し＋罫線 */
.pro-title {
  margin: 0;                  /* 余計なマージンを消す */
  padding-bottom: 10px;       /* ← 線の「上」にしっかり隙間 */
  border-bottom: 2px solid #002B6E;
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
}

/* 説明文：詰め気味 */
.pro-text {
  margin: 16px 0 0;           /* 上だけ最低限 */
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}