@charset "UTF-8";

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

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

/* Ｈ１の装飾 */

h1 {
	position: relative; /*相対位置*/
	padding: 0.5em 0.5em 0.5em 2em; /*アイコン分のスペース*/
	padding-left: 1.5em !important;
	line-height: 1.8em; /*行高*/
	color: #ff6a6a; /*文字色*/
	border-top: dotted 1px gray;
	border-bottom: dotted 1px gray;
	background: #fffff4;
}

h1:before {
	font-family: "Font Awesome 5 Free"; /*忘れずに*/
	content: "\f138"; /*アイコンのユニコード*/
	font-weight: 900;
	position: absolute; /*絶対位置*/
	font-size: 1.3em; /*サイズ*/
	left: 0em; /*アイコンの位置*/
	top: 0.2em; /*アイコンの位置*/
	color: #ff6a6a; /*アイコン色*/
}

/* fritz 見出しＨ３の修飾*/
.page h3 {
	color: #364e96; /*文字色*/
	padding: 0.1em 0.5em; /*上下の余白*/
	border-top: solid 1px #6cb4e4; /*上線*/
	border-bottom: solid 1px #6cb4e4; /*下線*/
	border-left: solid 5px #7db4e6;
}

/* アイコンボックス */
.information-box::before,
.information::before {
	border-right: 1px solid #bde4fc;
}
.question-box::before,
.question::before {
	border-right: 1px solid #ffe766;
}
.alert-box::before,
.alert::before {
	border-right: 1px solid #f6b9b9;
}
.memo-box::before {
	border-right: 1px solid #8dd7c1;
}
.comment-box::before {
	border-right: 1px solid #ccd;
}
.ok-box::before {
	border-right: 1px solid #3cb2cc;
}
.ng-box::before {
	border-right: 1px solid #dd5454;
}
.good-box::before {
	border-right: 1px solid #98e093;
}
.bad-box::before {
	border-right: 1px solid #eb6980;
}
.profile-box::before {
	border-right: 1px solid #ccd;
}

.information-box::before,
.question-box::before,
.alert-box::before,
.information::before,
.question::before,
.alert::before,
.memo-box::before,
.comment-box::before,
.common-icon-box::before,
.ok-box::before,
.ng-box::before,
.good-box::before,
.bad-box::before,
.profile-box::before {
	font-size: 30px;
}
@media screen and (max-width: 480px) {
	.information-box,
	.common-icon-box {
		padding: 1em 1em 1em 4.25em;
		line-height: 1.6;
	}
	.information-box::before,
	.question-box::before,
	.alert-box::before,
	.information::before,
	.question::before,
	.alert::before,
	.memo-box::before,
	.comment-box::before,
	.common-icon-box::before,
	.ok-box::before,
	.ng-box::before,
	.good-box::before,
	.bad-box::before,
	.profile-box::before {
		font-family: "FontAwesome";
		position: absolute;
		line-height: 0.5em;
		top: 50%;
		left: 1em;
		padding-right: 0.45em;
		display: inline-block;
		font-size: 30px;
	}
}

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

	h1:before {
		font-family: "Font Awesome 5 Free"; /*忘れずに*/
		content: "\f138"; /*アイコンのユニコード*/
		font-weight: 900;
		position: absolute; /*絶対位置*/
		font-size: 1.3em; /*サイズ*/
		left: 0em; /*アイコンの位置*/
		top: 0.4em; /*アイコンの位置*/
		color: #ff6a6a; /*アイコン色*/
	}
}

/*1030px以下*/
@media screen and (max-width: 1030px) {
	/*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px) {
	/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
	/*必要ならばここにコードを書く*/
}

/* ナビメニュー 上下枠線 */
#navi {
	border-top: solid 1px #5fb3f5;
	border-bottom: solid 1px #5fb3f5;
}

/* ナビメニュー 文字*/
#navi {
	font-weight: bold; /* 太文字 */
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 影 */
}
/* ナビメニュー（アイコン） */
#navi .menu-item-has-children > a::after {
	display: none; /* 非表示 */
}

/* サムネイル */
.blogcard-thumbnail img,
.card-thumb img {
	object-fit: contain;
}