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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.entry-title {
	display: none;
}

.d-flex {
	display: flex;
}

.padding0 {
	padding: 0;
}

.margin20px {
	margin: 20px;
}

.mr-5 {
	margin-right: 5px;
}

.mr-10 {
	margin-right: 10px;
}

/*固定ページの日付を非表示*/
.date-tags>.post-date {
	display: none;
}

/************************************
** ページをフェードイン表示する
************************************/


body {
	animation: ani-fadein 3s forwards;
	/*アニメーション指定*/

}

.bodyWrap {
	/* iOS用 */
	height: 100vh;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

@supports (-webkit-touch-callout: none) {
	html {
		height: -webkit-fill-available;
	}

	body {
		min-height: 100vh;
		min-height: -webkit-fill-available;
	}
}

.wakufadein {
	/*
	animation: ani-fadein 3s forwards;
	*/
	opacity: 0;
	transform: translateY(40px);
	transition: all 1s;
}

a {
	position: relative;
	display: inline-block;
	transition: .3s;
	color: #00a5be;
	text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active {
	color: #00a5be;
}

a::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #00a5be;
	transition: .3s;
	transform: translateX(-50%);
}

a:hover::after {
	width: 100%;
}

.waku_a_white a {
	color: white;
}

.waku_textcenter {
	text-align: center;
}

.waku_a_white a:link,
.waku_a_white a:visited,
.waku_a_white a:hover,
.waku_a_white a:active {
	color: white;
}

.waku_a_white a::after {
	background-color: white;
}

.go-to-top-button {
	opacity: 0.8 !important;
	/*透明度*/
}

.go-to-top-button::after {
	content: none;
}

@keyframes ani-fadein {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	/*アニメーション開始時*/
	100% {
		opacity: 1;
		transform: translateY(0);
	}

	/*アニメーション終了時*/
}

#content-in .article h2 {
	color: #00a5be;
	font-size: 20px;
	padding: 0;
}

.header-container-in.hlt-top-menu .logo-header img {
	padding: 4px;
}

hr.wp-block-separator {
	border: 0.5px solid;
}

hr.wp-block-separator.is-style-wide {
	border-bottom: 0px !important;
}

hr.wp-block-separator:before {
	background-color: transparent;
}

hr.wp-block-separator:after {
	background-color: transparent;
}

.article h3::before {
	background-color: #00a5be;
}

/* サイドバー */
.search-submit {
	color: #00a5be;
}

.sidebar h3::before {
	background-color: #00a5be;
}

/* list */
.article ul li,
.article ol li {
	list-style: none;
}

.article ul li:before,
.article ol li:before {
	content: '';
	position: relative;
	top: -2px;
	display: inline-block;
	width: 12px;
	/* 点の幅 */
	height: 12px;
	/* 点の高さ */
	border-radius: 50%;
	background: #00a5be;
	/* リストの前の点の色 */
	margin-right: .5em;
	padding-right: 0;
}


/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	justify-content: flex-start;
	box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
	display: inline-block;
	/* width: 49.5%; */
	width: 33.3%;
}



.max_image {
	position: relative;
	margin-right: calc(50% - 50vw + 8px);
	margin-left: calc(50% - 50vw + 8px);

}

.max_image img {
	display: block;
	width: 100%;
	height: auto;
}

.max_image div {
	position: absolute;
	color: blue;
}

.max_image p {
	position: absolute;
	top: 0;
	left: 0;
	color: white;
}

.wakuOverview_circle {
	position: relative;
	display: inline-block;
	width: 200px;
	height: 200px;
	background-color: #00a5be;
	border-radius: 50%;
	color: white;

}

.wakuOverview_circle span {
	position: absolute;
	display: inline-block;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 200px;
	padding: 20px;
	text-align: center;
}

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

/*834px以下*/
@media screen and (max-width: 834px) {

	/*必要ならばここにコードを書く*/
	.fp-new-entry-cards .new-entry-card-link.a-wrap {
		display: inline-block;
		width: 49.5%;
	}

	.instacontainer {
		flex-wrap: wrap;
		margin: 0;
	}

	.instaitem {
		flex-basis: 50%;
	}

}

/*480px以下*/
@media screen and (max-width: 480px) {

	/*必要ならばここにコードを書く*/
	.fp-new-entry-cards .new-entry-card-link.a-wrap {
		display: inline-block;
		width: 100%;
	}

	.instacontainer {
		flex-wrap: wrap;
		justify-content: center;
	}

	.instaitem {
		flex-basis: 25%;
	}

}