@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
*/

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


#link-no-underline {
  text-decoration: none;
}

/* 背景色を白にする（不要なら削除） */
body {
	background-color: #fff!important;
}

/* トップページカスマイズ---------------------------------------------- */



/* トップページヘッダーまわり非表示*/
.home .article-header,
.home .article-footer{
	display: none;
}

/*セクションの枠（余白はお好みで調整できます）*/
.section-wrap{
	padding-top:5em;/*内側余白をあける（上）*/
	padding-bottom:5em;/*内側余白をあける（下）*/
	margin-bottom:0;/*下部外側余白を0にする（固定）*/
}

/* 見出し---------------------------------------------- */
.heading{
	text-align:center; /*中央寄せ*/
	font-size:2.5rem; /*文字の大きさ（お好みで調整）*/
	color: var(--cocoon-text-color);/*見出しの色*/
	letter-spacing:2px;/*文字間の余白*/
	line-height:1.6; /*行の高さ*/
	font-weight:bold;/*太字にする（不要なら削除）*/
	position:relative;/*起点*/
	padding-bottom:1rem;/*見出し下余白（内側）*/
	margin-bottom:3rem;/*見出し下余白（外側）*/
}

.heading span{
	display:block; /*ブロック要素にする*/
	font-size:.9rem; /*サブ見出しを小さめに（お好みで調整）*/
	font-weight:normal;/*通常の太さ（不要なら削除）*/
}

/*見出し下の線*/
.heading::after {
	display: block;
	content: "";
	width: 2.5rem;/*線の幅*/
	height: 1px;/*線の高さ*/
	border-radius: 10px;/*線の丸み*/
	background-color: var(--cocoon-text-color);/*線の色*/
	position: absolute;
	bottom: 0;/*下からの位置*/
	left: 50%;/*中央揃え*/
	transform: translateX(-50%);/*中央揃え調整*/
}




/* リンクボタン---------------------------------------------- */

/*ボタンの配置*/
.link-btn{
	display:block;/*ブロック要素*/
	text-align:center;/*中央揃え*/
}

/*ボタンのスタイル*/
.link-btn a {
	display: inline-block;/*インラインブロック要素*/
	border:1px solid #8b4513; /*枠線（太さ、種類、色）*/
	color: var(--cocoon-text-color);/*文字色*/
	min-width: fit-content;/*ボタンの最小幅（変更できます）*/
	width: auto;/*ボタンの幅*/
	padding: .7em 5em .7em 5em;/*内側余白（上・右・下・左）*/
	text-decoration: none;/*文字装飾なし*/
	border-radius: 0;/*ボタンの角*/
	transition: .3s all;/*変化をゆっくり*/
	position:relative;/*起点*/
}

/*834px以下*/
@media screen and (max-width: 834px){
	.link-btn a {
		min-width: 100%;/*ボタンの最小幅*/
	}
}

/*矢印のスタイル*/
.link-btn a:after {
	content: '';/*矢印の描写*/
	border-bottom: 1px solid var(--cocoon-text-color);/*下矢印の太さ、種類、色*/
	border-right: 1px solid var(--cocoon-text-color);/*右矢印の太さ、種類、色*/
	width: 15px;/*矢印の幅*/
	height: 3px;/*矢印の高さ*/
	transform: skewX(45deg);/*矢印の角度*/
	position: absolute;/*矢印の位置*/
	right: 20px;/*右からの位置*/
	bottom:50%;/*下からの位置*/
	transition: .3s all;/*矢印の変化をゆっくり*/
}


/*マウスオーバー時の変化*/
.link-btn a:hover{
	--link-btn-color:#b5b5ae;/*ボタン色*/
	background-color: var(--link-btn-color);
	border-color:var(--link-btn-color);
	color:var(--cocoon-white-color);
}

.link-btn a:hover:after {
	border-color:var(--cocoon-white-color);/*矢印の色*/
	right: 15px;/*矢印を少し動かす*/
}


/* 記事カードの最大幅を調整---------------------------------------------- */
.widget-entry-cards.card-large-image .a-wrap {
    max-width: 800px;
}


/* 記事を横並びにする(grid)---------------------------------------------- */
.widget-entry-cards {
	display: grid;/* グリッドレイアウトを適用 */
	justify-items: center;/*中央寄せ*/
	gap: 16px;/* 各グリッドアイテムの間に16pxの隙間を設定 */
}

/*新着記事サムネイル（大）*/
.new-entry-cards.large-thumb{
	grid-template-columns: repeat(2, 1fr);/* 2列でレイアウトを構成、各列が同じ幅で1frずつ分配 */
}

/*人気記事サムネイル（大）*/
.popular-entry-cards.large-thumb{
	grid-template-columns: repeat(3, 1fr);/* 3列でレイアウトを構成、各列が同じ幅で1frずつ分配 */
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb{
		   grid-template-columns: 1fr;/*モバイルで横１列*/	
		   gap: 0;
	}
       .cate .new-entry-cards.large-thumb,
       .popular-entry-cards.large-thumb{
		   grid-template-columns: repeat(2, 1fr);/* モバイルで2列 */
		   gap: 0;
	}	
}

/*モバイルで記事タイトル文字サイズを調整*/
/*834px以下*/
@media screen and (max-width: 834px){
	.cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title{
		font-size: 14px!important;/*カテゴリー、人気記事タイトルを少し小さめに*/
	}
}

/* タブ切り替え---------------------------------------------- */

/* タブ全体を囲むコンテナの設定 */
.tab-switch {
    --active-tab-color:#b5b5ae; /*選択したタブの色*/
    display: flex; /* タブを横並びに */
    flex-wrap: wrap; /* 幅に応じて折り返し */
    max-width: 100%; /* コンテナの最大幅を指定 */
    margin: auto;/* コンテナの中央寄せ */
    justify-content: center;/* タブの中央寄せ */
    gap: 10px 5px;/* タブ間の余白 */
}

/* 各タブボタンのスタイル設定 */
.tab-switch > label {
    flex: 1 1 auto; /* タブが均等に幅をとるが、幅を超えると折り返す */
    min-width: 70px; /* 各タブの最小幅を指定 */
    order: -1; /* コンテンツより上に表示 */
    position: relative; /* ::beforeの絶対位置指定に使用 */
    padding: .7em 1em; /* タブの内側余白 */
    border-bottom:1px solid var(--active-tab-color); /* タブの下線 */
    color: var(--active-tab-color); /* タブの文字色 */
    text-align: center; /* テキストを中央揃え */
    cursor: pointer; /* ホバー時にポインター表示 */
}

/* タブのホバーおよび選択時の色 */
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
    background-color: var(--active-tab-color); /* ホバー/選択時の背景色 */
    color: #fff; /* ホバー/選択時の文字色 */
}

/* 選択されたタブの下に表示される三角形のスタイル */
.tab-switch label:has(:checked)::before {
    position: absolute; /* 三角形をタブ内の特定位置に配置 */
    bottom: -8px; /* 三角形をタブの下に表示 */
    left: 50%; /* 中央寄せ */
    transform: translateX(-50%); /* 三角形の中央揃え調整 */
    width: 18px; /* 三角形の幅 */
    height: 9px; /* 三角形の高さ */
    background-color: var(--active-tab-color); /* 三角形の背景色 */
    content: ''; /* 擬似要素の内容（空） */
    clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形の形状を作成 */
}

/* ラジオボタンの非表示設定 */
.tab-switch input {
    display: none; /* 実際のラジオボタンは非表示 */
}

/* タブのコンテンツエリアの設定 */
.tab-switch > div {
    display: none; /* 初期状態では非表示 */
    width: 100%; /* コンテンツ幅を全体に設定 */
    padding: 1.5em 0; /* 内側余白 */
}

/* 選択されたタブに対応するコンテンツを表示 */
.tab-switch label:has(:checked) + div {
    display: block; /* 選択されたタブの内容を表示 */
}

.loader-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9); /* 背景色の調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}



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

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




}

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

}