@layer components {
  .tabsNav {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .tabsNav__btn {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0; /* imgの余白対策 */
  }

  .tabsNav__btn img {
    display: block;
    height: auto;
  }

  /* 選択中の見た目（必要なら） */
  .tabsNav__btn.is-active {
    outline: 2px solid #111827;
    outline-offset: 4px;
    border-radius: 0.5rem;
  }

  .tabsPanels__panel[hidden] {
    display: none;
  }

  /* 雛形ダミー */
  .tabsPanels__dummy {
    border: 1px dashed #cbd5e1;
    border-radius: 1rem;
    padding: 1.25rem;
    min-height: 10rem;
  }
}

/* --- タブ全体のコンテナ --- */
.tabsNav {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  margin: 40px 0;
  /* 全体の下線は非常に薄いグレーで区切り線として残す（不要なら削除可） */
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0;
}

/* --- タブボタンのスタイル --- */
.tabsNav__btn {
  background: none;
  border: none;       /* ボタン自体の枠線を削除 */
  outline: none;      /* クリック時の黒いフォーカス枠を削除 */
  padding: 10px 15px;
  cursor: pointer;
  opacity: 0.4;       /* 非選択時は薄くして差をつける */
  transition: all 0.3s ease;
  
  /* 選択時の下線（初期状態は透明） */
  border-bottom: 3px solid transparent; 
  margin-bottom: -1px; /* 下線が親の線と重なるように調整 */
}

/* --- 画像の調整 --- */
.tabsNav__btn img {
  display: block;
  border: none;          /* 画像自体の枠線も念のため削除 */
  max-width: 100%;
  height: auto;
  width: 180px;
  object-fit: contain;
}

/* --- ホバー時 --- */
.tabsNav__btn:hover {
  opacity: 0.7; /* マウスを乗せると少し濃くなる */
}

/* --- 選択中（Active）のデザイン --- */
.tabsNav__btn.is-active {
  opacity: 1;            /* 選択中はクッキリ表示（100%） */
  
  /* どちらの色にも偏らない「濃いグレー」の下線 */
  border-bottom-color: #555; 
}

/* --- レスポンシブ対応 --- */

/* タブレット (1024px以下) */
@media (max-width: 1024px) {
  .tabsNav {
    gap: 10px;
  }
  
  .tabsNav__btn img {
    width: 140px;
  }
}

/* スマホ (599px以下) */
@media (max-width: 599px) {
  .tabsNav {
    gap: 0;
    justify-content: space-between;
    margin: 20px 0;
  }

  .tabsNav__btn {
    padding: 5px;
    flex: 1;      /* 均等配置 */
    display: flex;
    justify-content: center;
  }

  .tabsNav__btn img {
    width: 100%;
    max-width: 100px;
  }
  
  /* スマホ時の下線調整 */
  .tabsNav__btn {
    border-bottom-width: 2px;
  }
}