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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* サイト全体 */
a{text-decoration:none;	}
a:hover {color:#db657f;}

/* フッター非表示 */
#footer{
	display:none;
}
/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}

/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*はみ出した部分を非表示 ※IE対策*/
}

/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}

/*H2見出し*/
.article h2{
	color:#fff;
	background-color:#6f695f;
	margin-top:2rem;
	padding:1rem;
	box-shadow: 5px 5px 5px #ddd;
}

/*H3見出し*/
.article h3{
	margin-top:2rem;
	padding:0.5rem;	
	border-width:1px 1px 1px 0.5rem;
	box-shadow: 5px 5px 5px #ddd;}

/*H4見出し*/
.article h4{
	border-color:#fff;
    background-image: repeating-linear-gradient(-45deg, #A7A5A180, #A7A5A180 1px, transparent 1px, transparent 5px);
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: auto 0.75em; }

/*段落BOXの設定リセット*/
.is-style-information-box, .information-box,.information, .is-style-question-box, .question-box, .question, .is-style-alert-box, .alert-box, .alert, .is-style-memo-box, .memo-box, .is-style-comment-box, .comment-box, .is-style-ok-box, .ok-box, .is-style-ng-box, .ng-box, .is-style-good-box, .good-box, .is-style-bad-box, .bad-box, .is-style-profile-box, .profile-box, .common-icon-box, .has-box-style {
	padding: 20px 25px;
}
.is-style-information-box::before,.information-box::before,.information::before, .is-style-question-box::before, .question-box::before, .question::before, .is-style-alert-box::before, .alert-box::before, .alert::before, .is-style-memo-box::before, .memo-box::before, .is-style-comment-box::before, .comment-box::before, .is-style-ok-box::before, .ok-box::before,  .is-style-ng-box::before, .ng-box::before, .is-style-good-box::before, .good-box::before, .is-style-bad-box::before, .bad-box::before, .is-style-profile-box::before, .profile-box::before {
	top: 0;
	left: 25px;
	width: auto;
	margin-left: 0 !important;
	padding-right: 0;
	border: none;
	font-size: 28px;
}
.is-style-question-box::before, .question-box::before, .question::before, .is-style-alert-box::before, .alert-box::before, .alert::before, .is-style-information-box::before, .information-box::before, .information::before, .is-style-ok-box::before, .ok-box::before {
	background: #F4F3F1;
	border-radius: 50%;
}


/*情報BOX*/
.is-style-information-box, .information-box, .information {
	background: #F4F3F1;
	border: 1px solid #87cdff;
}
.is-style-information-box::before,
.information-box::before,
.information::before {
	color: #87cdff;
}

/*質問BOX*/
.is-style-question-box, .question-box, .question {
	background: #F4F3F1;
	border: 1px solid #cfbabd;
}
.is-style-question-box::before, .question-box::before, .question::before {
	color: #cfbabd;
}

/*アラートBOX*/
.is-style-alert-box, .alert-box, .alert {
	background: #F4F3F1;
	border: 1px solid #e9cd00;
}
.is-style-alert-box::before, .alert-box::before, .alert::before {
	color: #e9cd00;
}

/*メモBOX*/
.is-style-memo-box, .memo-box {
	background: #F4F3F1;
	border: 1px solid #ef9b82;
}
.is-style-memo-box::before, .memo-box::before {
	color: #ef9b82;
}

/*コメント BOX*/
.is-style-comment-box, .comment-box {
	background: #F4F3F1;
	border: 1px solid #cdccb9;
}
.is-style-comment-box::before, .comment-box::before {
	color: #cdccb9;
	font-weight:900;
}

/*GOOD BOX*/
.is-style-good-box, .good-box {
	background: #F4F3F1;
	border: 1px solid #df7790;
}
.is-style-good-box::before, .good-box::before {
	color: #df7790;
}

/*BAD BOX*/
.is-style-bad-box, .bad-box {
	background: #F4F3F1;
	border: 1px solid #b7c4cc;
}
.is-style-bad-box::before, .bad-box::before {
	color: #b7c4cc;
}

/*プロフィール BOX*/
.is-style-profile-box, .profile-box {
	background: #F4F3F1;
	border: 1px solid #c3c3c3;
}
.is-style-profile-box::before, .profile-box::before {
	color: #c3c3c3;
}

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

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

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