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

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

/************************************
** ヘッダー「キャッチフレーズ」調整
************************************/
.tagline {
	background-color:rgba(0,0,0,0.75);
}


/************************************
** コメント欄調整
************************************/
/* 非表示：メール */
.comment-form-email {
  display: none;
}
/* 非表示：メールアドレスが公開されることはありません。 */
.comment-notes {
  display: none;
}

/************************************
** Youtube埋め込み：横幅いっぱい
************************************/
.video-container {
	max-width: none;
}

/************************************
** エントリーカード（関連記事など）の隙間調整
************************************/
/* リンクカード？ */
/* .entry-card-wrap.a-wrap {
	margin-bottom: 2%;
} */

/* 関連記事 */
.related-entry-card-wrap.a-wrap {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

/************************************
** デフォルトの文字色調整
************************************/
/*緑色：色を濃く*/
.green {
  color: #379e63;
}

.bold-green {
  font-weight: bold;
  color: #379e63;
}

/*赤色：桃色(ff87c8)に変更→原色に戻す(ff0000)*/
.red {
  color: #ff0000;
}

.bold-red {
  font-weight: bold;
  color: #ff0000;
}

/************************************
** デフォルトのマーカーを太字に
************************************/
/*全体マーカー：太文字*/
.marker {
  font-weight: bold;
  background-color: #ff9;
}

.marker-red {
  font-weight: bold;
  background-color: #ffd0d1;
}

.marker-blue {
  font-weight: bold;
  background-color: #a8dafb;
}

/*下半分マーカー：太文字 */
.marker-under {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #ff9 60%);
}

.marker-under-red {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #ffd0d1 60%);
}

.marker-under-blue {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #a8dafb 60%);
}

/************************************
** 見出し
************************************/
/* 見出し1：記事タイトル */
.article h1 {
	margin-top: -20px;
	margin-left: -29px;
	margin-right: -29px;
	margin-bottom: 0px;
  	padding: 20px;
	color: #fff;
	background-color: #00AADD;
}

/* 見出し2 */
.article h2{
	color: #000;
	background-color: #ffffff;
	position: relative;
	margin-top: 0px;
	padding: 1rem .5rem;
	border-bottom: 5px solid #00AADD;
}

.article h2:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 6px;
	content: '';
	border-radius: 2px;
}

/* 見出し3 */
.article h3 {
	color: #000;
	margin-left: 10px;
	border-left: 6px solid #BBB;
	border-right: none;
	border-top: none;
	border-bottom: none;
	font-size: 22px;
	padding: 6px 20px;
}

/* 見出し4 */
.article h4 {
	color: #000;
	margin-left: 30px;
	margin-right: 30px;
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
}

/************************************
** アイキャッチ画像を全幅表示する
************************************/

/*枠組み*/
.eye-catch-wrap {
	margin-left: -29px; /*左の余白*/
	margin-right: -29px; /*右の余白*/
}

/*横幅 834px 以下に適用される*/
@media screen and (max-width: 834px){
	/*枠組み*/
	.eye-catch-wrap {
		margin-left: -20px; /*左の余白*/
		margin-right: -20px; /*右の余白*/
	}
}

/************************************
** Contact Form 7 必須アイコン
************************************/
.required::after {
  content: "必須";
  background-color: #f0ad4e;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  min-width: 10px;
  padding: 3px 7px;
  margin: 0px 5px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
}

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

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

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

/************************************
** 吹き出し内の改行幅調整
************************************/
.entry-content .speech-balloon p {
    margin: 0 0 1.2em; /*改行幅*/
}
/************************************
** 吹き出しアイコンのサイズ変更
** 吹き出し設定の個別ID(URL確認)ごとに設定が必要 @media screenは横幅(スマホ対応など)させるもの
************************************/

.sb-id-28 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-28 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-34 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-34 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-35 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-35 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-36 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-36 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-37 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-37 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-38 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-38 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-39 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-39 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-40 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-40 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-41 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-41 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-42 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-42 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-43 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-43 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-44 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-44 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-45 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-45 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-46 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-46 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-47 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-47 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-48 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-48 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-49 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-49 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-50 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-50 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-51 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-51 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-52 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-52 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-53 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-53 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-54 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-54 .speech-person {    width: 70px;    min-width: 70px;  }}

.sb-id-55 .speech-person {  width: 160px;  min-width: 160px;}
@media screen and (max-width: 480px){
	.sb-id-55 .speech-person {    width: 70px;    min-width: 70px;  }}