/* ==============================
   タブ切り替えコンポーネント
   tab.js と併用する
   ============================== */

/* タブボタン群のラッパー */
.day-tab-wrap {
  text-align: right;
  margin-bottom: 10px;
}

/* タブボタン（デフォルト） */
.day-tab {
  padding: 0.5em 2em;
  border: 1px solid #aaa;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

/* タブボタン（選択中） */
.day-tab.active {
  background: #c8882e;
  color: #fff;
  border-color: #c8882e;
  box-shadow: 0 2px 6px rgba(217, 140, 50, 0.4);
}

/* セクションヘッダー：見出し＋タブボタンを横並びにする */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* section-header 内の h3 は下マージン不要（親が管理） */
.section-header h3 {
  margin-bottom: 0;
}

/*
  section-header 内では h3 の装飾線（::before / ::after）を上書きする。
  alacarte.css などで h3 に装飾線が定義されている場合に対応。
*/
.section-header h3::before {
  flex-grow: 0;
  width: 16em;
  margin-right: 0.8em;
}
.section-header h3::after {
  display: none;
}

/* タブで切り替えるコンテンツ本体（JSで display 制御） */
.day-content {
  /* display は tab.js が制御するため、初期値はHTMLのstyle属性で管理 */
}