/**
 * 特定商取引法ページ - タブ切り替え機能用スタイル（ドロップダウン版）
 *
 * @package swell_child
 */

/* --------------------------------------------------
   タブ全体のスタイル
-------------------------------------------------- */
.tabs {
  font-family: sans-serif;
}

/* --------------------------------------------------
   ドロップダウンメニュー
-------------------------------------------------- */
.tab-dropdown {
  margin-bottom: 1.5em;
}

.tab-select {
  width: 100%;
  max-width: 600px;
  padding: 0.75em 1em;
  font-size: 1em;
  color: #fff;
  background-color: #1a1a1a;
  border: 1px solid #0099c4;
  border-radius: 4px;
  cursor: pointer;
  appearance: none; /* デフォルトの矢印を削除 */
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"%3E%3Cpath fill="%230099c4" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.5em;
  transition: all 0.2s ease;
}

.tab-select:hover {
  border-color: #00b8e6;
  background-color: #252525;
}

.tab-select:focus {
  outline: none;
  border-color: #00b8e6;
  box-shadow: 0 0 0 2px rgba(0, 153, 196, 0.2);
}

/* セレクトボックスのオプション */
.tab-select option {
  background-color: #1a1a1a;
  color: #fff;
  padding: 0.5em;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .tab-select {
    max-width: 100%;
    font-size: 0.95em;
  }
}

/* --------------------------------------------------
   タブコンテンツ（初期は非表示）
-------------------------------------------------- */
.tab-content {
  display: none;
  padding: 1em 0;
  animation: fadeIn 0.3s ease;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}