.bg{
  height: 5px;
    background: #360000;
}



  .brand img {
  width: 100%;
  max-width: 50px;
}

.contents_top_img img,
.contents_bottom_img img{
  width: 100%;
}



.tab_01 img,
.tab_02 img,
.tab_03 img {
  max-width: 80px;
  width: 100%;
}

.tab-content img {
  width: 100%;
}



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

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

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

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





.tab_1,.tab_01 {
  background: #f5eed9;
}
.tab_2,.tab_02 {
  background: #aad200;
}
.tab_3,.tab_03{
  background: #f38e1c;
}

.tab_01:has(:checked) {
  background: #f5eed9;
}
.tab_02:has(:checked) {
  background: #aad200;
}
.tab_03:has(:checked) {
  background: #f38e1c;
}

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

/* タブコンテンツのスタイル */
.tab-switch > div {
  display: none; /* 初期状態ではコンテンツを非表示に */
  width: 100%; /* コンテンツの幅を全体に設定 */
}

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

.tab_inner {
  padding: 20px 0px;
}

/* swiper */
.swiper {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
  color: #f5eed9 !important;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px !important;
  top: 30% !important;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev{
   top: 30% !important;
   right: 10px !important;
}

:root {
  --swiper-navigation-size: 30px !important;
}