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

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

/************************************
** *見出しデザイン
************************************/
/*見出し初期化*/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
/* H2見出しの疑似要素をリセット*/
.article h2 > span::after {content: none;}
.entry-content h2 > span::before {
    content: none;
}
/* H4見出しの疑似要素をリセット*/
.entry-content h4 > span::before {
    content: none;
}

/****** h1装飾*/
.article h1 {
	 font-size:32px;
	width: fit-content;
	padding: 0 3em;
	margin: 0 auto;
	text-align: center;
	position: relative;
	color:#333;/*文字色（黒）*/  
}

.article h1::before, 
.article h1::after {
	content: '';
	background: #10B5B9;
	width: 2em;
	height: 2px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.article h1::before {
	left: 0;
}
.article h1::after {
	right: 0;
}

/****** h2装飾*/
.article h2 {
  font-weight: bold;
  padding-bottom: 0.5em;
  text-align: center;
  position: relative;
}
.article h2::after {
  content: '';
  background-color: #F08402;
  width: 2em;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/****** h3装飾*/
.article h3 {
  font-size:32px;



/****** h4装飾 */
.article h4{
	font-size:25px;
 	padding: 0.2em 0;/*内側余白調整*/
       border-bottom: dotted 6px #f5b448; /*点線・太さ・色*/
       color:#333;/*文字色（黒）*/
}


/****** h5装飾*/
.article h5 {
  font-size:20px;
	
}

/****** h6装飾 */
.article h6{
	font-size:18px;
}

/* すべてのページのタイトルを非表示にする*/
.entry-title {
display: none;
}


/* 見出し ------------------------------------------------------------ */
.heading {
	text-align: center; /* 見出しを中央揃え */
	font-size: 3rem; /* 見出しの文字サイズ */
	color:#b5b5ae; /* 見出しの色を設定 */
	letter-spacing: 2px; /* 文字間隔を2px */
	line-height: 1.6; /* 行の高さを1.6倍 */
	font-weight: bold; /* 太字に設定 */
	position: relative; /* 基準点を設定 */
	padding-bottom: 1rem; /* 下部の内側余白を1rem */
	margin-bottom: 2rem; /* 下部の外側余白を3rem */
}

/*480px以下*/
@media screen and (max-width: 480px){
	.heading {
	font-size: 3rem; /* 見出しの文字サイズ */
	}
}

.heading span {
	display: block; /* サブ見出しをブロック要素化 */
	font-size: .9rem; /* サブ見出しの文字サイズ */
	font-weight: normal; /* サブ見出しを通常の太さに設定 */
}

/* 見出し下の線 */
.heading::after {
	display: block; /* 擬似要素をブロック要素に */
	content: ""; /* 内容を空に */
	width: 2.5rem; /* 線の幅を2.5rem */
	height: 1px; /* 線の高さを1px */
	border-radius: 10px; /* 線に丸みを追加 */
	background-color:#b5b5ae; /* 線の色を設定 */
	position: absolute; /* 位置を絶対配置に */
	bottom: 0; /* 下部の位置を基準に */
	left: 50%; /* 左から50%で中央揃え */
	transform: translateX(-50%); /* 中央寄せを調整 */
}

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

/*新着記事サムネイル（大）*/
.new-entry-cards.large-thumb{
	grid-template-columns: repeat(3, 1fr); /* 2列で均等に分配 */
}

/*モバイル対応：画面幅834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb{
		   grid-template-columns: 1fr;/*モバイルで横１列*/	
		   gap: 0;
	}
}

/*YouTube動画の中央配置*/
.video-container{
margin: 0px auto;
}

/************************************
**リンクボタンデザイン
************************************/
/* リンクボタン---------------------------------------------- */

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

/* ボタンのスタイル */
.link-btn a {
	display: inline-block; /* インラインブロック要素 */
	border: 1px solid #b5b5ae; /* ボタンの枠線（色はグレー） */
	color: var(--cocoon-text-color); /* 文字色 */
	min-width: fit-content; /* ボタンの最小幅を自動調整 */
	width: auto; /* ボタンの幅を自動調整 */
	padding: .7em 5em; /* 内側余白を上下0.7em, 左右5em */
	text-decoration: none; /* 下線を削除 */
	border-radius: 0; /* 角の丸みを0 */
	transition: .3s all; /* 変化をスムーズに */
	position: relative; /* 起点設定 */
}

/* 834px以下のボタン幅調整 */
@media screen and (max-width: 834px) {
	.link-btn a {
		min-width: 100%; /* モバイルでの最小幅を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); /* 45度傾斜 */
	position: absolute; /* 位置を絶対配置に */
	right: 20px; /* 右から20pxに配置 */
	bottom: 50%; /* 下から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; /* 矢印の位置を左へ少し移動 */
}