/* タブコンテナ全体のスタイル */
.tab-container {
  min-width: 970px; 
  margin: 20px auto;
  border: 0px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

/* ラジオボタン（非表示にする） */
.tab-button-crazy {
  display: none;
}

/* タブのラベル（ボタン）のスタイル */
.tab-label-funky {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #D7D7D7;
  color: #555;
  font-weight: 700;
  border-right: 1px solid #ddd;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 最後のラベルの右ボーダーを削除 */
.tab-label-funky:last-of-type {
  border-right: none;
}

/* アクティブなタブのスタイル */
.tab-button-crazy:checked + .tab-label-funky {
  background-color: #0A1A90;
  color: white;
}

/* コンテンツ表示エリアのスタイル */
.tab-content-zone {
  border-top: 1px solid #ddd;
  padding: 0px;
  background-color: #fff;
  /* position: relative; は不要になる場合が多いですが、今回は残しておきます */
  box-sizing: border-box;
}

/* 各コンテンツエリアの共通スタイル */
.tab-content-area {
  /* ★ここを大きく変更します */
  display: none; /* デフォルトで非表示にする */
  padding-top: 0px; /* 必要に応じて調整 */
  padding-bottom: 0px; /* 必要に応じて調整 */
  /* position: absolute; は削除 */
  /* top, left, width も削除 */
  /* transition は display には効かないため、ここでは意味がありません */
}

/* アクティブなコンテンツエリアの表示 */
#tab1-btn:checked ~ .tab-content-zone #content1,
#tab2-btn:checked ~ .tab-content-zone #content2,
#tab3-btn:checked ~ .tab-content-zone #content3 {
  display: block; /* チェックされたタブの内容を表示する */
  /* transition を使ってフェードインしたい場合は、opacity と visibility を組み合わせる必要があり、少し複雑になります。
     今回はシンプルに display: block; で切り替えます。 */
}

/* レスポンシブ対応 */
@media (max-width: 1100px) {

.tab-container {
  min-width: 350px; 
}


/* レスポンシブ対応 */
@media (max-width: 600px) {


  .tab-label-funky {
    display: block;
    border-right: none;
    border-bottom: 1px solid #ddd;
    text-align: center;
  }
  .tab-label-funky:last-of-type {
    border-bottom: none;
  }
  .tab-content-zone {
    min-height: auto;
  }
  .tab-content-area {
    /* スマホでは元々position: relativeでしたので大きな変更は不要 */
    /* top, left, width は既に削除済みなので、ここでは何もしません */
  }
}