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

.goods-img{
  margin: -1px 0 0;
}

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

.tab_01 img,
.tab_02 img,
.tab_03 img {
  width: 100%;
}

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

.tab_01 {
  width: 50%;
  margin: 0 0 -2px;
  background: linear-gradient(
  to bottom,
  #79c8e6 6%,
  #5e9ab6 45%,
  #27434d 70%,
  #ffeda1 100%
);
}

.tab_02 {
  width: 50%;
  margin: 0 0 -2px;
  background: linear-gradient(
  to bottom,
  #79c8e6 6%,
  #5e9ab6 45%,
  #27434d 70%,
  #79c8e6 100%
);
}

/* タブ全体を囲むコンテナの設定 */
.tab-switch {
  display: flex; /* タブを横並びに配置 */
  flex-wrap: wrap; /* 幅を超えたら折り返し */
  max-width: 800px; /* コンテナの最大幅を指定 */
  margin: -2px auto 0; /* コンテナを中央に配置 */
  justify-content: center; /* タブを中央に寄せる */
  background: linear-gradient(
  to bottom,
  #79c8e6 1%,
  #5e9ab6 6%,
  #27434d 10%,
  #79c8e6 100%
);
}

.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; /* 子要素の絶対位置指定の基準 */
  text-align: center; /* 文字を中央揃え */
  cursor: pointer; /* カーソルをポインターに変更 */
  transition: 0.3s all; /*変化を滑らかに*/
}

/* タブボタンのホバーおよび選択状態のスタイル */
.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;
}