@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){
  /*必要ならばここにコードを書く*/
}


/*フルスクリーン*/
.image-full {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.imageimage-full img {
	display: block;
	width: 100%;
	height: auto;
}


/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #6b4e3b;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

#navi .navi-in a:hover {
  background-color: #efebe8;
  transition: all 0.3s ease-in-out;
  color: #000000;
}

/*グローバルメニューの高さ*/
#navi .navi-in > ul li{
	height: 40px;
	line-height: 40px;
}

/* グローバルメニュー間の区切り
*/

#navi .navi-in > ul > li{
  border-left: 1px solid #cccccc;
}

#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #b3b3b3;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 

/* ヘッダーの現在のページのメニュー背景色を変える　*/
#navi .current_page_item {
  background-color: #e2d8c9;
}


/************************************
** アコーディオンの見出しを左詰めにする
************************************/
.toggle-button {
	text-align: left;
}

/*---------------------------------
ボックス（白抜き）の枠の色と太さを変える
--------------------------------*/
.blank-box {border-width: 1px; border-color: #CCCCCC; margin-left: 0px; margin-right :0px;} /* 枠の太さと灰色の変更 */

.blank-box.bb-yellow {border-color: #FAB162; margin-left: 0px; margin-right :0px;} /* 黄色 */

.blank-box.bb-red {border-color: #FD8FA3; margin-left: 0px; margin-right :0px;} /* 赤色 */

.blank-box.bb-blue {border-color: #5FB3F5; margin-left: 0px; margin-right :0px;} /* 青色 */

.blank-box.bb-green {border-color: #95CE4B; margin-left: 0px; margin-right :0px;} /* 緑色 */

/*---------------------------------
コンタクトフォーム7　送信ボタンのカスタマイズ
--------------------------------*/
input.wpcf7-submit {
padding:1em !important;/* ボタン内の余白 */
margin:2em 0em !important;/* ボタンの上下の余白 */
background-color: #4670ba !important;/* 背景の色 */
border-radius: 10px !important;/* 角を丸く*/
color: #fff !important;/* 文字の色*/
font-size: 18px !important;/* 文字の大きさ */
font-weight: bold !important;/* 文字の太さ*/
width: 50%;/* ボタンの横幅*/
transition:0.5s;/* 背景色が変わるまでの時間*/
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.10);/* 薄っすらとボタンにドロップシャドウをかける*/
}

input.wpcf7-submit:hover {
background-color:#2991c8 !important;/* マウスを乗せたときの背景色 */
color: #fff !important;/* マウスを乗せたときの文字の色 */
}

.btn-submit {
    width: 100%;
    text-align: center;
}


/*ヘッダーを幅いっぱいに*/
.header-in {width: 100%;}
.header-in img {width: 100%;}
.logo-image span, .logo-image a {width: 100%;}
.logo-image, .logo-image a {padding: 0;}

/*766px以下でロゴを消す*/
@media screen and (max-width: 766px){
	img.site-logo-image{
		visibility: hidden;
	}
}

/*766px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 766px){
	.logo-image span {
	  background-image: url(https://takahashikiyomi.com/wp-content/uploads/2025/06/header_naka05m.jpg);
	  background-size: auto 30px;
	  background-position: center bottom;
	  background-size: cover;
	  background-repeat: no-repeat;
	  height: calc( ( 100vw - var( --scrollbar-width, 17px)) * 200 / 800);
	}
}


/************************************
** ■見出しカスタマイズ（h1）
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
  padding: 0;
  margin: 0;
  font-size: medium;
  border-collapse: separate;
  border-spacing: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
  position:relative;
}

.article h1{ /*見出し１（タイトル）カスタマイズ*/
  color: #ffffff; /* フォントカラー*/
  background: #4670ba; /*背景カラー*/
  text-align: center; /*テキスト位置*/
  font-size: 26px; /*フォントサイズ*/
  letter-spacing: 1px; /*文字間隔*/
  margin: 20px -8px 20px -8px;
  padding: 9px 10px 9px 10px;
  border-radius: 5px; /*角の丸め*/
  line-height: 35px; /*高さ*/
  /* border-left: 10px solid #828f99; 左ラインの太さとカラー*/
  /*border-bottom: 1px solid #828f99; アンダーラインの太さとカラー*/
  }

.article h2{ /*見出し２カスタマイズ*/
  color: #ffffff; /* フォントカラー*/
  background: #4670ba; /*背景カラー*/
  text-align: center; /*テキスト位置*/
  font-size: 24px; /*フォントサイズ*/
  letter-spacing: 1px; /*文字間隔*/
  margin: 15px -8px 20px -8px;
  padding: 10px 7px 10px 10px;
  border-radius: 10px; /*角の丸め*/
  line-height: 27px; /*高さ*/
  /* border-left: 8px solid #cccccc; 左ラインの太さとカラー*/
  /* border-bottom: 1px solid #cccccc; アンダーラインの太さとカラー*/
  }
  

.article h2 > img {
  position: relative;
  top: 4px;
}

.article h3{ /*見出し3カスタマイズ*/
  color: #ffffff; /* フォントカラー*/
  background: #44c1ca; /*背景カラー*/
  text-align: center; /*テキスト位置*/
  font-size: 22px; /*フォントサイズ*/
  letter-spacing: 1px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 9px 7px 9px 10px;
  border-radius: 10px; /*角の丸め*/
  line-height: 25px; /*高さ*/
  /* border-left: 6px solid #dddddd; 左ラインの太さとカラー*/
  /* border-bottom: 1px solid #dddddd; アンダーラインの太さとカラー*/
  }

.article h3 > img {
  position: relative;
  top: 4px;
}

  
.article h4{ /*見出し4カスタマイズ*/
  color: #ffffff; /* フォントカラー*/
  background: #44c1ca; /*背景カラー*/
  text-align: center; /*テキスト位置*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 1px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 8px 7px 8px 10px;
  border-radius: 10px; /*角の丸め*/
  line-height: 23px; /*高さ*/
  /* border-left: 4px solid #eaeaea; 左ラインの太さとカラー*/
  /* border-bottom: 1px solid #eaeaea; アンダーラインの太さとカラー*/
  }
  
.article h5{ /*見出し5カスタマイズ*/
  background: #f7f7f7; /*背景カラー*/
  font-size: 18px; /*フォントサイズ*/
  letter-spacing: 1px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 5px 5px 5px 5px;
  border-left: 2px solid #f2f2f2; /*左ラインの太さとカラー*/
  line-height: 21px; /*高さ*/
  border-bottom: 1px solid #f2f2f2; /*アンダーラインの太さとカラー*/
  }
  
.article h6{ /*見出し6カスタマイズ*/
  background: #ffffff; /*背景カラー*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 1px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 5px 5px 5px 5px;
  border-left: 1px solid #f7f7f7; /*左ラインの太さとカラー*/
  line-height: 19px; /*高さ*/
  border-bottom: 1px solid #f7f7f7; /*アンダーラインの太さとカラー*/
  }

.padding-0{
	padding: 0px;
}

/*全ページ共通*/
/*
.entry-title {
display: none;
}
*/
.content { 
margin-top: 0; 
}

.main {
padding-top:0px;
}

.entry-content {
margin-top:0px;
}

.video-container {
margin: 0px auto;
max-width: 100%;
}

.article .wp-block-image {
  margin-bottom: 0;
  line-height: 0;
}

.tagline{
   display:none;
}

.site-name-text {
display: none;
}

/*---------------------------------
カラムのスマホ表示で逆にする
--------------------------------*/
@media screen and (max-width: 599px) {
  .inverted {
    flex-direction:column-reverse!important;
  }
}
/*---------------------------------
 イメージに影をつける
--------------------------------*/
.shadow_img {
    box-shadow: 3px 3px 15px -5px #000;
}

.grecaptcha-badge { visibility: hidden; }

/*---------------------------------
ロゴの上下のすき間を消す
--------------------------------*/
.logo-image {
  padding: 0;
}


.logo-image span, .logo-image a {
display: block;
padding: 0
}

/*---------------------------------
 * 固定ページのみ投稿日を非表示 
--------------------------------*/
.page .date-tags {
display: none;
}

/*---------------------------------
コンテンツの左右のマージンを消す
main {
padding: 0!important;
}
--------------------------------*/

/* アコーディオン（トグル）-------------------------------------------------------- */

/* ボタンのアイコンを常に表示 */
:where(
    .is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l, 
    .is-style-toggle3, .is-style-toggle3-l, .is-style-toggle4, 
    .is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button::before {
	opacity: 1;
}

/* ボタンの背景色（スタイル1, FAQ1） */
.toggle-box:where(.is-style-toggle1, .is-style-toggle1-l, .is-style-faq1) .toggle-button {
	background-color: #f5f4f3;
}

/* スタイル1 & 2 & FAQ1, FAQ2：シンプルな枠線 */
.toggle-box:where(
    .is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l, 
    .is-style-faq1, .is-style-faq2) {
	border: 1px solid var(--cocoon-custom-border-color);
}

/* スタイル3 & FAQ3：下線のみ */
.toggle-box:where(.is-style-toggle3, .is-style-toggle3-l, .is-style-faq3) {
	border-bottom: 1px solid var(--cocoon-custom-border-color);
}

/* ボタンのデフォルトスタイル（角丸なし・枠なし） */
:where(
    .is-style-toggle1, .is-style-toggle1-l, .is-style-toggle2, .is-style-toggle2-l, 
    .is-style-toggle3, .is-style-toggle3-l, .is-style-toggle4, 
    .is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button {
	border-radius: 0;
	border: none;
}

/* ボタンの背景なし（スタイル2,3,4, FAQ2,3） */
:where(
    .is-style-toggle2, .is-style-toggle2-l, .is-style-toggle3, .is-style-toggle3-l, 
    .is-style-toggle4, .is-style-faq2, .is-style-faq3) .toggle-button {
	background: none;
}

/* ボタンの余白調整 */
:where(.is-style-toggle1, .is-style-toggle2, .is-style-toggle3) .toggle-button {
	padding: 0.5em 1em;
}

/* 左寄せボタン（スタイル1L, 2L, 3L） */
:where(.is-style-toggle1-l, .is-style-toggle2-l, .is-style-toggle3-l) .toggle-button {
	padding: 0.5em 2em 0.5em 1em;
	text-align: left;
}

/* アイコンの配置（左寄せタイプ & FAQスタイル） */
:where(.is-style-toggle1-l, .is-style-toggle2-l, .is-style-toggle3-l, .is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button::before {
	position: absolute;
	right: 1em;
	margin: 0;
	font-size: 1em;
}

/* チェック時のボタンスタイル */
:where(.is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l, .is-style-faq1, .is-style-faq2) .toggle-checkbox:checked ~ .toggle-button {
	border-bottom-color: transparent;
}

/* チェック時のコンテンツスタイル（ボーダー削除） */
:where(
    .is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l, 
    .is-style-toggle3, .is-style-toggle3-l, .is-style-toggle4, 
    .is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-content {
	border: none;
	border-radius: 0;
}


/* 余白調整（スタイル1,2） */
:where(.is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l).toggle-wrap .toggle-content {
	padding: 0 1.5em;
}

/* チェック時の余白調整 */
:where(
    .is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l) .toggle-checkbox:checked ~ .toggle-content {
	padding: 1em 1.5em;
}

/* 点線ボーダー（スタイル2, FAQ2） */
:where(.is-style-toggle2, .is-style-toggle2-l, .is-style-faq2) .toggle-checkbox:checked ~ .toggle-button {
	border-bottom: 1px dashed var(--cocoon-custom-border-color);
}

/* ボタン風デザイン（スタイル4） */
.is-style-toggle4 .toggle-button {
	width: fit-content;
	border: 1px solid var(--cocoon-custom-border-color);
	border-radius: 99px;
	background-color: unset;
	padding: 0.3em 1.2em;
	margin: auto;
}

/* チェック時のボタン（スタイル4） */
.is-style-toggle4 .toggle-checkbox:checked ~ .toggle-button {
	border-radius: 99px;
	margin-bottom:1em;
}


/* FAQボタンとコンテンツの基本配置 */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button,
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-content {
	position: relative;
	text-align: left;
}

/* FAQコンテンツの余白 */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3).toggle-wrap .toggle-content {
	padding: 0 2em 0 2.2em;
}

/* FAQのボタン・チェック時コンテンツの余白 */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button{
	padding: 0.5em 2em 0.5em 2.2em;
}

:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-content {
	padding: 1em 2em 1em 2.2em;
}

/* Q&Aラベル設定 */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button:after,
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-content:after {
	font-weight: bold;
	position: absolute;
	left: 1em;
}

/*「Q」マーク */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button:after {
	content: 'Q';
	color: #bc5731;
	top: 0.5em;
}

/*「A」マーク */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-content:after {
	content: 'A';
	color: #004aad;
	top: 1em;
}

/* FAQのアイコン変更（開閉時） */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button::before {
	content: "\f0d7";
}

:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-button::before {
	content: "\f0d8";
}

/* タブブロックのスタイル ----------------------------------------------*/

:root {
/* 	--cocoon-tab-label-font-size: 20px; タブのフォントサイズ */
	--cocoon-tab-label-color: #f2f2f2; /* タブの背景色 */
	--cocoon-tab-label-active-color: #4670ba; /* 選択したタブの背景色 */
}

.tab-label-group .tab-label {
    font-size: 16px; /* タブのフォントサイズ */
}

/* 2 タブ幅均等配置スタイル */
:where(.is-style-tab2-1,.is-style-tab2-2,.is-style-tab2-3,.is-style-tab2-4,.is-style-tab2-5,.is-style-tab2-6,.is-style-tab2-7,.is-style-tab2-8,.is-style-tab2-9,.is-style-tab2-10,.is-style-tab3-1,.is-style-tab3-2,.is-style-tab3-3,.is-style-tab3-4,.is-style-tab3-5,.is-style-tab3-6,.is-style-tab3-7,.is-style-tab3-8,.is-style-tab3-9,.is-style-tab3-10) .tab-label-group .tab-label {
    flex: 1; /* 各タブの幅を自動調整 */
}

/* 3 タブが横幅を超えた場合に複数行で表示する */
:where(.is-style-tab3-1,.is-style-tab3-2,.is-style-tab3-3,.is-style-tab3-4,.is-style-tab3-5,.is-style-tab3-6,.is-style-tab3-7,.is-style-tab3-8,.is-style-tab3-9,.is-style-tab3-10) .tab-label-group{
    flex-wrap: wrap; 
}

/* タブ全体のグループスタイル */
:where(.is-style-tab1-2,.is-style-tab1-3,.is-style-tab1-4,.is-style-tab1-5,.is-style-tab1-6,.is-style-tab1-7,.is-style-tab1-8,.is-style-tab1-9,.is-style-tab1-10,.is-style-tab2-2,.is-style-tab2-3,.is-style-tab2-4,.is-style-tab2-5,.is-style-tab2-6,.is-style-tab2-7,.is-style-tab2-8,.is-style-tab2-9,.is-style-tab2-10,.is-style-tab3-2,.is-style-tab3-3,.is-style-tab3-4,.is-style-tab3-5,.is-style-tab3-6,.is-style-tab3-7,.is-style-tab3-8,.is-style-tab3-9,.is-style-tab3-10) .tab-content-group {
	border: none; /* タブ内容の枠線をなしにする */
	padding:1.2em 0;/* 上下の余白を設定 */
}

/* タブのラベル部分のスタイル */
:where(.is-style-tab1-1,.is-style-tab1-2,.is-style-tab1-3,.is-style-tab1-4,.is-style-tab1-5,.is-style-tab1-6,.is-style-tab1-7,.is-style-tab1-8,.is-style-tab1-9,.is-style-tab1-10,.is-style-tab2-1,.is-style-tab2-2,.is-style-tab2-3,.is-style-tab2-4,.is-style-tab2-5,.is-style-tab2-6,.is-style-tab2-7,.is-style-tab2-8,.is-style-tab2-9,.is-style-tab2-10,.is-style-tab3-1,.is-style-tab3-2,.is-style-tab3-3,.is-style-tab3-4,.is-style-tab3-5,.is-style-tab3-6,.is-style-tab3-7,.is-style-tab3-8,.is-style-tab3-9,.is-style-tab3-10) .tab-label-group .tab-label {
    padding: 0.6em 1.5em; /* タブの内側余白を設定 */
    text-align: center; /* 文字を中央揃え */
    transition: .3s all;/*なめらかに変化*/
}

/*タブ間の余白なしスタイル*/
:where(.is-style-tab1-1,.is-style-tab2-1,.is-style-tab3-1) .tab-label-group{
	gap:0;
}

:where(.is-style-tab1-1,.is-style-tab2-1,.is-style-tab3-1) .tab-content-group {
    border-radius: 0;
}

/* 吹き出しスタイル */

/* 吹き出しスタイルのラベルグループの下部余白 */
:where(.is-style-tab1-3,.is-style-tab1-5,.is-style-tab1-7,.is-style-tab1-9,.is-style-tab2-3,.is-style-tab2-5,.is-style-tab2-7,.is-style-tab2-9,.is-style-tab3-3,.is-style-tab3-5,.is-style-tab3-7,.is-style-tab3-9) .tab-label-group {
    padding-bottom: 1em; /* 吹き出し先端部分のための余白 */
}
/* 吹き出しラベルのスタイル */
:where(.is-style-tab1-3,.is-style-tab1-5,.is-style-tab1-7,.is-style-tab1-9,.is-style-tab2-3,.is-style-tab2-5,.is-style-tab2-7,.is-style-tab2-9,.is-style-tab3-3,.is-style-tab3-5,.is-style-tab3-7,.is-style-tab3-9) .tab-label-group .tab-label {
    position: relative; /* 吹き出し先端を位置調整できるようにする */
}

/* 選択された吹き出しラベルに吹き出し先端を追加 */
:where(.is-style-tab1-3,.is-style-tab1-5,.is-style-tab1-7,.is-style-tab1-9,.is-style-tab2-3,.is-style-tab2-5,.is-style-tab2-7,.is-style-tab2-9,.is-style-tab3-3,.is-style-tab3-5,.is-style-tab3-7,.is-style-tab3-9) .tab-label-group .tab-label.is-active:before {
    background-color: var(--cocoon-tab-label-active-color); /* 吹き出し先端の色 */
    clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形の形状を指定 */
    content: ''; /* 空の内容を追加（装飾目的） */
    position: absolute; /* 吹き出し先端を位置指定 */
    left: 50%; /* 水平方向の中央揃え */
    transform: translateX(-50%); /* 中央揃えを補正 */
    bottom: -7px; /* タブラベルから下に配置 */
    height: 8px; /* 吹き出し先端の高さ */
    width: 16px; /* 吹き出し先端の幅 */
    z-index: 1;
}

:where(.is-style-tab1-1,.is-style-tab1-2,.is-style-tab1-3,.is-style-tab1-6,.is-style-tab1-7,.is-style-tab1-10,.is-style-tab2-1,.is-style-tab2-2,.is-style-tab2-3,.is-style-tab2-6,.is-style-tab2-7,.is-style-tab2-10,.is-style-tab3-1,.is-style-tab3-2,.is-style-tab3-3,.is-style-tab3-6,.is-style-tab3-7,.is-style-tab3-10) .tab-label-group .tab-label {
    border-radius: 0; /* タブの角丸をなしにする */
}

/* 丸いタブスタイル */
:where(.is-style-tab1-4,.is-style-tab1-5,.is-style-tab1-8,.is-style-tab1-9,.is-style-tab2-4,.is-style-tab2-5,.is-style-tab2-8,.is-style-tab2-9,.is-style-tab3-4,.is-style-tab3-5,.is-style-tab3-8,.is-style-tab3-9) .tab-label-group .tab-label {
    border-radius: 99px; /* タブを丸くする */
}

/* ボーダースタイル */

/* ラベルの枠線スタイル */
:where(.is-style-tab1-6,.is-style-tab1-7,.is-style-tab1-8,.is-style-tab1-9,.is-style-tab2-6,.is-style-tab2-7,.is-style-tab2-8,.is-style-tab2-9,.is-style-tab3-6,.is-style-tab3-7,.is-style-tab3-8,.is-style-tab3-9) .tab-label-group .tab-label {
    border: 1px solid var(--cocoon-tab-label-active-color); /* 枠線を追加 */
}
/* 選択されていないタブラベルの背景をなしにする */
:where(.is-style-tab1-6,.is-style-tab1-7,.is-style-tab1-8,.is-style-tab1-9,.is-style-tab1-10,.is-style-tab2-6,.is-style-tab2-7,.is-style-tab2-8,.is-style-tab2-9,.is-style-tab2-10,.is-style-tab3-6,.is-style-tab3-7,.is-style-tab3-8,.is-style-tab3-9,.is-style-tab3-10) .tab-label-group .tab-label:not(.is-active) {
    background-color: unset; /* 背景色をリセット */
}


/* 下線スタイル */

/* タブラベルのスタイル */
:where(.is-style-tab1-10,.is-style-tab2-10,.is-style-tab3-10) .tab-label-group .tab-label {
    background: none; /* 背景色をなしにする */
    border-bottom: 2px solid var(--cocoon-tab-label-color); /* 下線を追加 */
}
/* 選択されたタブのスタイル */
:where(.is-style-tab1-10,.is-style-tab2-10,.is-style-tab3-10) .tab-label-group .tab-label.is-active {
    background:none;/* 背景色をなしにする */
    border-color: var(--cocoon-tab-label-active-color); /* 下線の色を変更 */
    color: var(--cocoon-tab-label-active-color); /* 文字色を設定 */
}

/*ホバー時*/
:where(.is-style-tab1-1,.is-style-tab1-2,.is-style-tab1-3,.is-style-tab1-4,.is-style-tab1-5,.is-style-tab1-6,.is-style-tab1-7,.is-style-tab1-8,.is-style-tab1-9,.is-style-tab1-1,.is-style-tab2-2,.is-style-tab2-3,.is-style-tab2-4,.is-style-tab2-5,.is-style-tab2-6,.is-style-tab2-7,.is-style-tab2-8,.is-style-tab2-9,.is-style-tab3-1,.is-style-tab3-2,.is-style-tab3-3,.is-style-tab3-4,.is-style-tab3-5,.is-style-tab3-6,.is-style-tab3-7,.is-style-tab3-8,.is-style-tab3-9) .tab-label-group .tab-label:hover{
    background-color:var(--cocoon-tab-label-active-color);
    color: var(--cocoon-white-color);
}

:where(.is-style-tab1-10,.is-style-tab2-10,.is-style-tab3-10) .tab-label-group .tab-label:hover {
    border-color:var(--cocoon-tab-label-active-color);
    color: var(--cocoon-tab-label-active-color);
}