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



#imageLinkGalleryNotice { display: none; }
body.single #imageLinkGalleryNotice { display: grid; }
.imageLinkGallery {
/* 	display: grid; */
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 3em;
	padding-left: 12px;
	padding-right: 12px;
}
.imageLinkGallery-item {
	display: block;
}
.imageLinkGallery > br,
.imageLinkGallery-item > br {
	display: none;
}
.imageLinkGallery-item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}
/* スマホ（～767px）は2×2に */
@media screen and (max-width: 767px) {
	.imageLinkGallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}






/****************************************************
 * カラーチャート
 ****************************************************/

:root {
	--white:				#FFF;
	--blue:					#88ABDA;
	--blue-light:			#B5CDE7;
	--blue-dark:			#69788A;
	--gray:					#C0C0C0;
	--gray-light:			#DCDCDC;
	--gray-dark:			#A9A9A9;
	--charcoal-gray:		#4E454A;
	--light-grayish-orange:	#EAE0DA;
	--accent-pink:			#FF3366;
	--link:					#0044CC;
	--link-hover:			#429EFF;
}



/****************************************************
 * テキストリンクの基本設定（ここじゃないと反映されない）
 ****************************************************/

a {
	color: #1A80DA;
	font-weight: 500;
	text-decoration: none;
	transition: all .3s;
}



/****************************************************
 * 画像の余白調整
 ****************************************************/

/* 画像の余白削除 */
img { vertical-align: top; }

/* 画像サイズを100% */
img { width: 100%; }

/* アイキャッチのサイズ */
.eye-catch { min-width: 100%; }



/****************************************************
 * 改行の調整
 ****************************************************/

@media screen and (min-width: 768px) {
	.brSP { display: none; }	/* スマホだけ改行したいとき */
}
@media screen and (max-width: 768px) {
	.brPC { display: none; }	/* パソコンだけ改行したいとき */
}



/****************************************************
 * スムーズスクロール
 ****************************************************/

html {
	scroll-behavior: smooth;
}



/****************************************************
 * YouTube動画のデザイン
 ****************************************************/

/* YouTube動画の中央化 */
.video-container {
	margin: 0 auto;
}
/* YouTube動画の中央化（カテゴリー記事の場合） */
.youtube-center {
	text-align: center;
}



/****************************************************
 * reCAPTCHAの中央表示
 ****************************************************/

.grecaptcha-badge {
	margin: auto;
}


/****************************************************
 * 検索窓の虫眼鏡の位置
 ****************************************************/

.search-box br {
	display: none;
}



/****************************************************
 * 記事内の監修者情報（オリジナル）
 ****************************************************/

/* 監修者情報（記事内） */
.supervisor {
	margin: 2em auto;
	background-color: var(--white);
	width: 100%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.supervisor:before {
	content: "監修者";
	color: var(--white);
	background-color: var(--blue-dark);
	display: block;
	width: calc(100% - 1.5rem*2);
	padding: 0.5rem 1.5rem;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.supervisor-contents {
	display: flex;
	align-items: center;
	padding: 1rem;
}
.supervisor-image {
	flex-basis: 25%;
	margin-right: 1rem;
}
@media print, screen and (min-width: 768px) {
	.supervisor-image {
		margin-right: 2rem;
	}
}
.supervisor-text {
	flex-basis: 75%;
}
.supervisor-name {
	font-size: 100%;
	font-weight: bold;
	border-bottom: 1px solid var(--color-main);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
@media print, screen and (min-width: 768px) {
	.supervisor-name {
		font-size: 110%;
	}
}
.supervisor-profile {
	font-size: 80%;
	margin-top: 0.5rem;
}
@media print, screen and (min-width: 768px) {
	.supervisor-profile {
		font-size: 90%;
	}
}
.supervisor-profile br {
	display: none;
}
.supervisor-profile p {
	margin-bottom: 1rem!important;
}
.supervisor-profile p:last-child {
	margin-bottom: 0.5rem!important;
}








/* ふわっとした動作（指定箇所に"fadeIn"を入れる） */
.fadeIn,
.eye-catch img {
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime {
	from { opacity: 0; }
	to { opacity: 1; }
}