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

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

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

/*背景色を白にする（白くしない場合、body{ }部分は削除してOKです）*/
body {
	background-color:#fff!important;
}

/*セクション枠（数値はお好みで調整できます）*/
.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;/*中央揃え*/
	position:relative;/*起点*/
}

/*ボタンのスタイル*/
.link-btn a {
	display: inline-block;/*インラインブロック要素*/
	border:1px solid #b5b5ae; /*枠線（太さ、種類、色）*/
	color: var(--cocoon-text-color);/*文字色*/
	min-width: 100%;/*ボタンの最大幅*/
	width: auto;/*ボタンの幅*/
	padding: .7em 2em .7em 1em;/*内側余白（上・右・下・左）*/
	text-decoration: none;/*文字装飾なし*/
	border-radius: 99px;/*ボタンの角*/
	transition: .3s all;/*変化をゆっくり*/
}

/*矢印のスタイル*/
.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%;/*下からの位置*/
}


/*マウスオーバー時の変化*/
.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);
}




/* 記事を横並びにする(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置 */
	flex-wrap: wrap;
	justify-content: center;/*カード中央寄せ*/
}

/*新着記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*人気記事サムネイル（大）*/
.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*モバイルで横１列*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*モバイルで横２列*/	
	}	
}

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

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

/* 親要素にflexを指定しタブを横並びに*/
.tab-wrap {
	--active-tab-color:#b5b5ae; /*選択したタブの色をここに指定*/
	--tab-gap:10px;/*タブ間の余白*/
	display: flex;
	flex-wrap: wrap;
	gap:var(--tab-gap);
}

/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	color: var(--active-tab-color);
	border-bottom:1px solid var(--active-tab-color);
	text-align: center;
	padding: .5em 1em;
	order: -1;/*タブを上段に表示する*/
	cursor: pointer;
	flex-grow:1;
	position:relative;
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	display: none;/*いったん非表示状態に設定*/
}

/* アクティブなタブ、チェックされているラジオボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:var(--active-tab-color);
	color:#fff;
}

/*吹き出し部分*/
.tab-switch:checked+.tab-label:after{
	background-color: var(--active-tab-color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	height: 10px;
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	width: 20px;
}

.tab-switch:checked+.tab-label+.tab-content {
	display: block;/*選択されたらコンテンツ表示する*/
	margin-top:1em;
}
	
/* ラジオボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}



/* アピールエリアフルスクリーン（ヘッダー固定なし）---------- */

/*position起点*/
.front-top-page .container {
	position: relative;
	overflow: hidden;
	z-index:1;
}

/*画面横幅いっぱいになるように設定*/
.front-top-page .appeal,
.front-top-page .appeal-in,
.front-top-page .header-container {
	position: absolute;
	top: 0;
	width: 100vw;
}

/*画面縦幅いっぱいになるように設定*/
.front-top-page .appeal{
	height:100svh; /*高さ調整*/
	background-size: cover; /*背景をフィットさせる*/
}

.front-top-page .appeal-in {
	height:100%; /*高さいっぱい*/
}

/*アピールエリア+余白分コンテンツを下げる*/
.front-top-page .content {
	margin-top: calc(100svh + 24px);
}

/*重なりを指定*/
.front-top-page .header-container {
	z-index: 3; /*ヘッダーを最前面に表示*/
}

.front-top-page .appeal {
	z-index: 2;
}

.front-top-page .header-container,
.front-top-page .navi,
.front-top-page .navi-in a:hover {
	background-color: initial;/*背景色リセット*/
}

/*アピールコンテンツエリア*/
.appeal-content {
	background-color:initial; /*背景色リセット*/
}


	
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
 .appeal{
 background-position-x: 60%;/* 左端からの位置 */
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
 .appeal{
 background-position-x: 60%;/* 左端からの位置 */
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
 .appeal{
 background-position-x: 60%;/* 左端からの位置 */
	}
}