@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* --- タブ見出しボックスの共通基本設定 --- */
.tab-caption-box {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5em;
}

/* リストマーカーの自動色統一（CSS変数を活用） */
.tab-caption-box ul li::before {
  color: var(--box-theme-color, #333); /* テーマカラーに連動 */
  font-weight: bold;
}

/* ----------------------------------
   スタイル選択パターン（全8種例）
---------------------------------- */

/* 1. デフォルト / メインカラー */
.tab-caption-box.is-style-default,
.tab-caption-box.style-1 {
  --box-theme-color: #4b6584;
  border: 2px solid var(--box-theme-color);
}
.tab-caption-box.style-1 .tab-caption-title {
  background-color: var(--box-theme-color);
  color: #fff;
}

/* 2. ポップ・オレンジ */
.tab-caption-box.style-2 {
  --box-theme-color: #ff7f50;
  border: 2px solid var(--box-theme-color);
}
.tab-caption-box.style-2 .tab-caption-title {
  background-color: var(--box-theme-color);
  color: #fff;
}

/* 3. ナチュラル・グリーン */
.tab-caption-box.style-3 {
  --box-theme-color: #2ed573;
  border: 2px solid var(--box-theme-color);
}
.tab-caption-box.style-3 .tab-caption-title {
  background-color: var(--box-theme-color);
  color: #fff;
}

/* 4. パステル・ピンク */
.tab-caption-box.style-4 {
  --box-theme-color: #ff6b81;
  border: 2px dashed var(--box-theme-color); /* 破線デザイン */
}
.tab-caption-box.style-4 .tab-caption-title {
  background-color: var(--box-theme-color);
  color: #fff;
}

/* 5. シック・グレー */
.tab-caption-box.style-5 {
  --box-theme-color: #747d8c;
  border: 1px solid #dcdde1;
  background-color: #f5f6fa;
}
.tab-caption-box.style-5 .tab-caption-title {
  background-color: var(--box-theme-color);
  color: #fff;
}

/* 6. シンプル下線風 */
.tab-caption-box.style-6 {
  --box-theme-color: #2f3542;
  border: 1px solid #e1e1e1;
}
.tab-caption-box.style-6 .tab-caption-title {
  background-color: transparent;
  color: var(--box-theme-color);
  border-bottom: 2px solid var(--box-theme-color);
}

/* 7. グラデーション */
.tab-caption-box.style-7 {
  --box-theme-color: #38ada9;
  border: 2px solid #38ada9;
}
.tab-caption-box.style-7 .tab-caption-title {
  background: linear-gradient(135deg, #78e08f, #38ada9);
  color: #fff;
}

/* 8. ダークモード風 */
.tab-caption-box.style-8 {
  --box-theme-color: #a4b0be;
  background-color: #2f3542;
  color: #fff;
}
.tab-caption-box.style-8 .tab-caption-title {
  background-color: #57606f;
  color: #fff;
}