/* タブ全体を囲むコンテナの設定 */
.tab-switch {
    display: flex; /* タブを横並びに配置 */
    flex-wrap: wrap; /* 幅を超えたら折り返し */
    max-width: 800px; /* コンテナの最大幅を指定 */
    margin: auto; /* コンテナを中央に配置 */
    justify-content: center; /* タブを中央に寄せる */
    padding: 5px;
}

.tab-switch:after {
  content: ''; /* 空の擬似要素を作成 */
  width: 100%; /* 幅をコンテナ全体に設定 */
  height: 1px; /* 線の高さを1pxに設定 */
  background-color: #757F96; /* 線の色 */
  display: block; /* ブロック要素として表示 */
  order: -1; /* 擬似要素を上部に配置 */
  margin-top: -5px; /* タブボタンから-5pxの余白を設定 */
}

/* 各タブボタンの設定 */
.tab-switch > label {
    flex: 1 1 auto; /* タブボタンが均等に幅をとるが、幅を超えると折り返す */
    order: -1; /* タブボタンを上部に配置 */
    position: relative; /* 子要素の絶対位置指定の基準 */
    padding: .7em 1em; /* 上下に0.7em、左右に1emの内側余白 */
    background-color: #f2f3f4; /* タブボタンの背景色 */
    color: #999; /* 文字色をグレーに設定 */
    text-align: center; /* 文字を中央揃え */
    cursor: pointer; /* カーソルをポインターに変更 */
    transition:.3s all;/*変化を滑らかに*/
}

/* タブボタンのホバーおよび選択状態のスタイル */
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
    background-color: #757F96; /* ホバー/選択時の背景色 */
    color: #fff; /* ホバー/選択時の文字色 */
}

/* ラジオボタン自体は非表示 */
.tab-switch input {
    display: none; /* ラジオボタンを見えなくする */
}

/* タブコンテンツのスタイル */
.tab-switch > div {
    display: none; /* 初期状態ではコンテンツを非表示に */
    width: 100%; /* コンテンツの幅を全体に設定 */
    padding: 1.5em 1em; /* 上下に1.5em、左右に1emの内側余白 */
    border:1px solid #757F96;
}

/* 選択されたタブのコンテンツを表示 */
.tab-switch label:has(:checked) + div {
    display: block; /* 選択されたタブのコンテンツを表示 */
}