@charset "utf-8";
/* ====== ベース ====== */
.c-tabs {
  --tab-gap: 0; /* ▼タブ下スペースを消す */
  --tab-pad-y: 0.6rem;
  --tab-pad-x: 1rem;
  --tab-border: 1px solid #1e3a8a; /* 紺に合うように変更 */
  --tab-accent: #ffcc00; /* アクティブ時の差し色：黄色っぽいアクセント */
  --panel-pad: 1rem;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
  display: grid;
  gap: var(--tab-gap);
}

/* ラジオは非表示 */
.c-tabs__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* タブラベル */
.c-tabs__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0; /* 下スペースをゼロに */
  margin-bottom: 0; /* ▼タブとパネルの間の余白を除去 */
}

.c-tabs__label {
  cursor: pointer;
  padding: var(--tab-pad-y) var(--tab-pad-x);
  border: var(--tab-border);
  border-bottom: none;
  background: #1e3a8a; /* ▼紺色ベタ */
  color: #fff; /* ▼非アクティブ時でも白文字で見えるように */
  user-select: none;
  line-height: 1;
  transition: all .15s ease;
}

.c-tabs__label:hover,
.c-tabs__label:focus-visible {
  outline: none;
  background: #274fb3; /* 少し明るい紺でホバー時 */
}

/* パネル共通 */
.c-tabs__panels {
  position: relative;
}

.c-tabs__panel {
  display: none;
  padding: var(--panel-pad);
  border: var(--tab-border);
  border-top: none;
  background: #fff;
}

/* ====== ラジオ選択に応じてパネル＆タブの見た目を切替 ====== */
#tab-1:checked ~ .c-tabs__labels label[for="tab-1"],
#tab-2:checked ~ .c-tabs__labels label[for="tab-2"],
#tab-3:checked ~ .c-tabs__labels label[for="tab-3"] {
  background: #fff; /* ▼アクティブ時は白背景 */
  color: #1e3a8a;   /* ▼文字は紺 */
  border-bottom: 1px solid #fff; /* ▼パネルと自然につなげる */
}

#tab-1:checked ~ .c-tabs__panels #panel-1,
#tab-2:checked ~ .c-tabs__panels #panel-2,
#tab-3:checked ~ .c-tabs__panels #panel-3 {
  display: block;
}

/* ====== テーブルの軽い体裁 ====== */
.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.c-table thead th {
  text-align: left;
  background: #f8fafc;
  border-bottom: 2px solid #e5e7eb;
  padding: .6rem .5rem;
  white-space: nowrap;
}

.c-table tbody td {
  border-top: 1px solid #eef2f7;
  padding: .55rem .5rem;
}

.c-table tbody tr:hover {
  background: #fbfdff;
}

/* ====== レスポンシブ ====== */
@media (max-width: 640px) {
  .c-tabs__label { flex: 1 1 50%; text-align: center; }
  .c-table { font-size: 0.9rem; }
}

/* 印刷時は全パネル表示 */
@media print {
  .c-tabs__panel { display: block !important; page-break-inside: avoid; }
  .c-tabs__labels { display: none; }
}