@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root {
	--theme-color-lighter: #E5F6FF;
	--theme-color-light: #009CEA;
	--theme-color: #007cba;
	--theme-color-dark: #006ba1;
	--theme-color-darker: #005a87;
	--theme-color-darkest: #003651;
	--main-color-light: #777;
	--main-color-dark: #333;
	--gold: #ceb076;
	--kin-aka : #ea5506;  /* 金赤 */

	--health : rgba(77, 99, 159, .9);   /* 健康であるために 4d639f */
	--seikatu : rgba(53, 108, 146, .9);  /* 生活習慣病 356c92 */
	--cancer : rgba(58, 97, 79, .9);      /* ガン特集 c9ced1 */
	--onaka : rgba(223, 212, 190, .9);    /* おなかの病気 dfd4be */
	--igaku : rgba(146, 161, 166, .9);    /* 医学ミニ情報 92a1a6 */
	--nihonjin : rgba(166, 123, 45, .9); /* 日本人について a67b2d */
	--kyoudo : rgba(189, 165, 187, .9);   /* 郷土案内 bda5bb */

	--t-health : rgba(77, 99, 159, .4);   /* 健康であるために 4d639f */
	--t-seikatu : rgba(53, 108, 146, .4);  /* 生活習慣病 356c92 */
	--t-cancer : rgba(58, 97, 79, .4);      /* ガン特集 c9ced1 */
	--t-onaka : rgba(223, 212, 190, .4);    /* おなかの病気 dfd4be */
	--t-igaku : rgba(146, 161, 166, .4);    /* 医学ミニ情報 92a1a6 */
	--t-nihonjin : rgba(166, 123, 45, .4); /* 日本人について a67b2d */
	--t-kyoudo : rgba(189, 165, 187, .4);   /* 郷土案内 bda5bb */
}
div.error{
	display:none;
}
body {
	font-family: Jost, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif !important;
	text-align: justify;
	text-justify: inter-ideograph;
}
#containter {
	margin-top: 0;
}
/* 見出し リセット */
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6, .sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6{
	color: #333;
	background: none;
	border: none;
	font-family: 'リュウミン B-KL';
	font-weight: normal;
	border-radius: 0;
	padding: 0;
	margin: 10px 0;
}
.article h2.title {
	display: inline-block;
	line-height: 1.5;
	border-bottom: 2px solid var(--theme-color);
	margin: 40px 0 20px;
}
h2.before-v-bar, h2.after-v-bar {
	position: relative;
	margin-bottom: 70px;
}
h2.before-v-bar:before {
	content: "";
	width: 1px;
	height: 50px;
	background: #aaa;
	position: absolute;
	top: -55px;
	left: 0;
	right: 0;
	margin: auto;
}
.bg-image-box .title-box {
	width: 200px;
	height: 200px;
	backdrop-filter: blur(6px);
	background-color: rgba(102,0,0,.75) ;
}
.bg-image-box .title-box h2 {
	color: white;
	text-shadow: 1px 1px 1px black;
}
#sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6{
	font-family: 'TBUDゴシック R';
	padding-left: 5px;
	border-left: 4px solid var(--theme-color-dark);
}
#sidebar h1 { font-size: 1.5rem; }
#sidebar h2 { font-size: 1.4rem; }
#sidebar h3 { font-size: 1.3rem; }
#sidebar h4 { font-size: 1.2rem; }
#sidebar h5 { font-size: 1.1rem; }
#sidebar h6 { font-size: 1rem; }
.header, header, entry-title, .date-tags, .single #header-in {
	display: none;
}
/* パンくずリスト */
.breadcrumb {
	font-size: .95rem;
}
.breadcrumb a {
	color: #333;
}
.breadcrumb a:hover {
	color: #aaa;
}
.breadcrumb .fa-folder,
.breadcrumb .fa-file {
	display: none; /*非表示*/
}
.breadcrumb-item + .breadcrumb-item::before {
	display: none;
}
.desc {
	font-size: .97rem;
}

/* navi メニュー ****************************** */
body.home #container {
	margin-top: 100px;
}
.appeal {
	background-size: cover;
}
.appeal-content {
	background: none;
}
.appeal-title {
	font-family: '教科書ICA M';
	font-size: 3.4rem;
	font-weight: normal;
	color: white;
	text-shadow: 2px 2px 2px grey;
}
nav {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}
#navi .navi-in > ul > li {
	transition: 0.5s linear; /* アニメーションした画像が元のサイズに戻るとき */
}
#navi .navi-in > ul > li:hover {
	border-bottom: 4px solid var(--theme-color);
	transition-duration: 0.2s;	/*変化に掛かる時間*/
	animation-timing-function: ease;
}
.fixed-header .navi, body:not(.home) #navi {
	background-color: rgba(255, 255, 255, .95)!important;
	box-shadow: 0 1px 2px -1px rgba(0,0,0,.1), 0 3px 4px 0 rgba(0,0,0,.1), 0 1px 10px 0 rgba(0,0,0,.1);
}
.navi-in a {
	font-family: Jost, '新ゴ R';
}
/* 現在のurlからメニューをハイライト */
body:not(.home) #navi .navi-in a.active{
 background-color: var(--theme-color-lighter); /*テーマカラーより若干濃く*/
}
/* nav 内の検索ボックス */
#navi .nav-search {
	height: auto;
	line-height: 30px;
}
#navi .search-box {
	margin: 11px 6px 0;
}
#navi .search-box input {
	font-size: .85rem;
	padding: 3px;
}
#navi .search-submit {
	font-size: 1rem;
	top: calc(50% - 14px);
}
#footer{
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin: 0 -50vw;
}
/* 共通 */
.opacity-0 {
	opacity: 0;
}
.d-none {
	display: none;
}
/*子要素の幅を親要素の幅まで広げる*/
.full-wide{
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	padding: 0;
	margin: 30px -50vw;
	background-repeat:  no-repeat; /* 画像の繰り返し  */
	background-position: center center;
}
/*本文背景のパララックスが画像*/
.bg_dark{
	color: white;
	text-shadow: 1px 1px 1px #000;  
}
.bg_dark::before {
	content: '';
	position: absolute;
	/* 輪郭がぼやけてしまうのでブラー範囲を広げる */
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	background: inherit;
	filter: brightness(.4);
	z-index: -1;
}
.bg_cover {
	height: 500px;
	max-height: 50vh;
}
.content_center {
	display:flex;
	position: relative; /*これがないと前面のcover画像が表示されない*/
	justify-content: center;
	align-items: center;
	overflow: hidden;
	z-index: 0;
	background-attachment: fixed !important;
}
.pointer:hover {
	cursor: pointer;
}
/* 投稿ページに追加された ヘッダー部 eye-catch  */
.single .eye-catch-box, .category .eye-catch-box{
	position: relative;
	justify-content: center;
	align-items: center;
	margin: 100px auto;
	max-width: 1000px;
}
.single .title-box, .category .title-box{
	position: absolute;
	padding: 40px;
	margin: 0 auto;
	width: calc(100% - 140px);
	bottom: -80px;
	box-shadow: 10px 0px 8px -10px rgba(3, 0, 0, 1), -10px 0px 8px -10px rgba(3, 0, 0, 1);
	background-color: white;
}
.single .title-box .title{
	padding: 0;
	margin: 6px 0 !important;
	box-sizing: border-box;
	overflow: break-word;
}
.title-box .jp {
	font-family: 'リュウミン B-KL';
}
/* 投稿ページとカテゴリー一覧ページのアイキャッチ */
.eye-catch-box .categories, {
	display: block;
	color: var(--theme-color);
	line-height: 1;
	font-size: .9rem;
}
.eye-catch-box .eye-catch-img {
	width: 100%;
	height: 400px;
}
.category .eye-catch-box .eye-catch-img {
	height: 350px;
}
.eye-catch-img img {
	width: 100%!important;
	height: 400px;
	object-fit: cover;
}
.single .eye-catch-box .time {
	display: block;
	line-height: 1;
	font-size: .8rem;
	color: #555;
}
/* カテゴリーボックス categories */
#categories {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(100px, auto);
	gap: 20px;
}
#categories .cat_box {
	position: relative;
}
#categories .cat_box:hover {
	cursor: pointer;
}
#categories .cat_img {
	overflow: hidden;
}
#categories .cat_img img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: 1s linear;
}
#categories .cat_box:hover .cat_img img {
	transform: scale(1.2);
	transition: .5s ease-in-out;
}
#categories .text_box {
	position: relative;
	width: calc(100% - 40px);
	margin-left: auto;
	padding: 20px;
	background-color: white;
	top: -60px;
	right: 0;
}
#categories .text_box .cat_title {
	display: inline-block;
	font-size: 1.2rem;
	margin: 10px 0 0;
}
#categories .text_box .cat_text {
	font-family: 'リュウミン R-KL';
	font-size: 1.05rem;
	letter-spacing: -0.05rem;
	margin-top: 18px;
	margin-bottom: 0!important;
}
#categories .cat_box:hover .cat_text {
	color: var(--theme-color-darker);
	transition: 1s all;
}
#categories .cat_box:nth-child(1) .cat_title{
	border-bottom: 3px solid #ffa8a8;
}
#categories .cat_box:nth-child(6) .cat_title{
	border-bottom: 3px solid #ffa8d3;
}
#categories .cat_box:nth-child(2) .cat_title{
	border-bottom: 3px solid #ffa8ff;
}
#categories .cat_box:nth-child(7) .cat_title{
	border-bottom: 3px solid #d3a8ff;
}
#categories .cat_box:nth-child(3) .cat_title{
	border-bottom: 3px solid #a8a8ff;
}
#categories .cat_box:nth-child(8) .cat_title{
	border-bottom: 3px solid #a8d3ff;
}
#categories .cat_box:nth-child(4) .cat_title{
	border-bottom: 3px solid #a8ffff;
}
#categories .cat_box:nth-child(9) .cat_title{
	border-bottom: 3px solid #a8ffd3;
}
#categories .cat_box:nth-child(5) .cat_title{
	border-bottom: 3px solid #a8ffa8;
}
/*　----------------　カルーセル　--------------------*/
body.home main#main {
	padding-top: 0;
	padding: 20px 0;
}
body.home .entry-content {
	/*margin-top: 0;*/
}
body.home #content-in.wrap {
	width: 100%;
}
/* 記事内画像（img）＋リンク(a)にhoverで隣接イメージを拡大 */
figure.carousel-entry-card-thumb, figure.card-thumb{
	overflow: hidden;
	margin-bottom: 0; /* overflowと合わせて必須 */
}
.card-thumb img:hover, .a-wrap:hover img, .owl-carousel img:hover {
	transform: scale(1.2);	/*画像の拡大率*/
	transition-duration: 0.5s;	/*変化に掛かる時間*/
	animation-timing-function: ease;
}
.card-thumb img, .owl-carousel img {
	height: 100%;
	vertical-align: bottom; /* 下にできる余白を除去 */
	transition: 1s linear; /* アニメーションした画像が元のサイズに戻るとき */
}
.card-thumb img.carousel-entry-card-thumb-image {
	display: inline-block;
}
.wp-post-carousel-image {
	position: relative;
	height: 100%;
}
.wp-posts-carousel-title {
	position: absolute;
	bottom: 0;
	left: 0;
}
/************************************
**　トップ新着・人気・関連記事ウィジェット 投稿日・更新日表示
************************************/
.widget-entry-card-title {
	font-family: 'TBUDゴシック R';
	font-size: .9rem;
}
.widget-entry-card-date {
	display: block;
	position: absolute;
	right: 0;/*右寄せ*/
	bottom: 0;
	font-size: 18px; /*フォントサイズ*/
}
.widget-entry-card-date::before{ /*投稿日のアイコンの変更*/
	font-family: "Font Awesome 5 Free";
	content: "\f017"; /*fa-clockアイコン*/
	font-weight: 400; /*アイコンの種類regular*/
	padding-right: 0px; /*右余白*/
	font-size: 14px; /*フォントサイズ*/
}
.widget-entry-card-update-date::before{ /*更新日のアイコンの変更*/
	font-family: "Font Awesome 5 Free";
	content: "\f1da"; /*fa-historyアイコン*/
	font-weight: 900; /*アイコンの種類solid*/
	padding-right: 5px; /*右余白*/
	font-size: 14px; /*フォントサイズ*/
}
.widget-entry-cards.ranking-visible .card-thumb::before {
	width: 22px;
	height: 24px;
}
body.slug-sketch .entry-content, body.slug-iyo-view .entry-content{
	font-size: 2rem;
	font-family: '教科書ICA M';
}
body.slug-sketch .article img, body.slug-iyo-view .article img {
	/*width: 100%;
	height: 480px;
	margin-top: 40px;
	object-fit: cover;*/
}
@media screen and (max-width: 1300px) {
	#categories {
		grid-template-columns: repeat(3, 1fr);
	}
	.post-update {
		display: none;
	}
}
@media screen and (max-width: 1023px) {
	#categories {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 768px) {
	#categories {
		grid-template-columns: repeat(1, 1fr);
	}
}