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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ====================================================================== */
/* === 3. テキストマーカースタイル === */
/* ====================================================================== */

/* タイトフィットマーカーの共通部分 (もしあれば) */
.tight-marker-base { /* 例: 新しい共通クラス */
  color: #333333;
  padding: 0.05em 0.2em;
  border-radius: 2px;
  line-height: 1.6; /* サイトの基本行間に合わせる */
  background-repeat: no-repeat;
  font-weight: bold;
  background-size: 100% 0.7em;  /* 背景の高さ (調整ポイント1) */
  background-position: 0 0.15em; /* 背景の垂直位置 (調整ポイント2) */
  /* box-decoration-break: clone; */ /* 行をまたぐ場合の見た目調整 (任意) */
}

.tight-pink-marker {
  /* @extend .tight-marker-base; */ /* SCSSなどを使っている場合 */
  /* 共通部分をここにコピーするか、上記のように共通クラスをHTML側で併用 */
  color: #333333; padding: 0.05em 0.2em; border-radius: 2px; line-height: 1.6; background-repeat: no-repeat; font-weight: bold; background-size: 100% 1.2em; background-position: 0 0.15em;
  background-image: linear-gradient(#ffdbf8, #ffdbf8);
}

.tight-red-marker {
  color: #333333; padding: 0.05em 0.2em; border-radius: 2px; line-height: 1.6; background-repeat: no-repeat; font-weight: bold; background-size: 100% 1.2em; background-position: 0 0.15em;
  background-image: linear-gradient(#ffd6db, #ffd6db);
}

.tight-Blue-marker { /* クラス名大文字・小文字注意: Blue -> blue の方が一般的 */
  color: #333333; padding: 0.05em 0.2em; border-radius: 2px; line-height: 1.6; background-repeat: no-repeat; font-weight: bold; background-size: 100% 1.2em; background-position: 0 0.15em;
  background-image: linear-gradient(#d9e9ff, #d9e9ff);
}

.tight-yellow-marker {
  color: #333333; padding: 0.05em 0.2em; border-radius: 2px; line-height: 1.6; background-repeat: no-repeat; font-weight: bold; background-size: 100% 1.2em; background-position: 0 0.15em;
  background-image: linear-gradient(#fcffaf, #fcffaf);
}
/* 注: tight-markerの背景サイズと位置は、フォントや行間によって微調整が必要です */
/* 上記では例として 0.7em と 0.15em に統一しましたが、元々の値が異なる場合はそちらを優先してください */


/* ====================================================================== */
/* === 4. 個別テキスト記号スタイル === */
/* ====================================================================== */

/* チェック各種 */
.checkmarkA-1 { /* 青 */
  color: #0095e5;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #0095e5;
}
.checkmarkA-2 { /* 緑 */
  color: #00d040;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #00d040;
}
.checkmarkA-3 { /* 黄 */
  color: #dfdc00;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #dfdc00;
}
.checkmarkA-4 { /* 桃 */
  color: #ff59c3;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #ff59c3;
}
.checkmarkA-5 { /* 赤 */
  color: #ff4d01;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #ff4d01;
}

/* 電球各種 */
.pointmarkA-6 { /* 青 */
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #0070e5;
}
.pointmarkA-7 { /* 緑 */
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #00e814;
}
.pointmarkA-8 { /* 黄 */
  font-size: 20px; /* 元のコードでここだけ20pxでした */
  font-weight: bold;
  text-shadow: 1px 1px 3px #e6e800;
}
.pointmarkA-9 { /* 紫 (コメントでは桃になっていましたが色は紫系) */
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #ff59c3; /* 元のコードでは #ff59c3 でした */
}
.pointmarkA-10 { /* 赤 */
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #ff4d01;
}

/* その他ポイントマーク */
.pointmarkA-11 { /* 三角赤旗 (コメントの指示と色が異なる？元は青) */
  color: #0095e5; /* 元のコードでは青でした */
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #fff;
}
.pointmarkA-12 { /* ポイント四角青旗 */
  color: #0095e5;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #fff;
}
.pointmarkA-13 { /* ポイント三つ葉緑 */
  color: #00d040;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #fff;
}


/* ====================================================================== */
/* === 5. テーマ特有のスタイルなど === */
/* ====================================================================== */

.entry-card-wrap .entry-card {
  text-decoration: none;
}

/* 枠1 */
.box1 {
	margin:2em auto;
	padding:1em 1.5em 1em; /* ボックス内側余白 */
	border:solid 1px #b8b8b8;/*線の種類・太さ・色*/
}

/* 灰枠2 */
.box2 {
	margin:2em auto;
	background-color:#f4f4f4; /* ボックス背景色 */
	padding:1em 1.5em 1em; /* ボックス内側余白 */
	border:solid 1px #b8b8b8;/*線の種類・太さ・色*/
}

/* 青枠3 */
.box3 {
	margin:2em auto;
	background-color:#f4faff; /* ボックス背景色 */
	padding:1em 1.5em 1em; /* ボックス内側余白 */
	border:solid 1px #55b0ff;/*線の種類・太さ・色*/
}

/* 緑枠4 */
.box4 {
	margin:2em auto;
	background-color:#f8fff8; /* ボックス背景色 */
	padding:1em 1.5em 1em; /* ボックス内側余白 */
	border:solid 1px #1bb132;/*線の種類・太さ・色*/
}

/* 黄枠5 */
.box5 {
	margin:2em auto;
	background-color:#fefbf1; /* ボックス背景色 */
	padding:1em 1.5em 1em; /* ボックス内側余白 */
	border:solid 1px #e8c400;/*線の種類・太さ・色*/
}

/* 桃枠6 */
.box6 {
	margin:2em auto;
	background-color:#fff2f2; /* ボックス背景色 */
	padding:1em 1.5em 1em; /* ボックス内側余白 */
	border:solid 1px #e391b9;/*線の種類・太さ・色*/
}

/* 赤枠7 */
.box7 {
	margin:2em auto;
	background-color:#FFF8F8; /* ボックス背景色 */
	padding:1em 1.5em 1em; /* ボックス内側余白 */
	border:solid 1px #EA6363;/*線の種類・太さ・色*/
}

/* 字白枠15 */
.box15{
	margin: 2em auto; /* ボックスの余白 */
	background-color:#ffffff; /* ボックス背景色 */
	padding:1.3em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 1px solid #c7c7c7;	/* ボックスの線 (太さ　種類　色)*/
}
.box15 .box-title {
	background-color:#ffffff; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: #333; /* タイトル文字色 */
	padding: 0 7px;/*タイトルの余白*/
	line-height: 1.2;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -8px; /*上から（-8px）移動*/
	left: 20px; /*左から(20px)移動*/
}

/* 字灰枠16 */
.box16{
	margin: 2em auto; /* ボックスの余白 */
	background-color:#f2f2f2; /* ボックス背景色 */
	padding:1.3em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 1px solid #bcbcbc;	/* ボックスの線 (太さ　種類　色)*/
}
.box16 .box-title {
	background-color:#f2f2f2; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: #333; /* タイトル文字色 */
	padding: 0 7px;/*タイトルの余白*/
	line-height: 1.2;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -8px; /*上から（-8px）移動*/
	left: 20px; /*左から(20px)移動*/
}

/* 字青枠17 */
.box17{
	margin: 2em auto; /* ボックスの余白 */
	background-color:#f4faff; /* ボックス背景色 */
	padding:1.3em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 2px solid #55b0ff;	/* ボックスの線 (太さ　種類　色)*/
}
.box17 .box-title {
	background-color:#ebf6ff; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: #333; /* タイトル文字色 */
	padding: 0 7px;/*タイトルの余白*/
	line-height: 1.2;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -8px; /*上から（-8px）移動*/
	left: 20px; /*左から(20px)移動*/
}

/* 字緑枠18 */
.box18{
	margin: 2em auto; /* ボックスの余白 */
	background-color:#f8fff8; /* ボックス背景色 */
    padding:1.3em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 2px solid #46c359;	/* ボックスの線 (太さ　種類　色)*/
}
.box18 .box-title {
	background-color:#f8fff8; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: #333; /* タイトル文字色 */
	padding: 0 7px;/*タイトルの余白*/
	line-height: 1.2;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -8px; /*上から（-8px）移動*/
	left: 20px; /*左から(20px)移動*/
}

/* 字桃枠19 */
.box19{
	margin: 2em auto; /* ボックスの余白 */
	background-color:#fff9fc; /* ボックス背景色 */
    padding:1.3em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 2px solid #eebcda;	/* ボックスの線 (太さ　種類　色)*/
}
.box19 .box-title {
	background-color:#fff9fc; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: #333; /* タイトル文字色 */
	padding: 0 7px;/*タイトルの余白*/
	line-height: 1.2;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -8px; /*上から（-8px）移動*/
	left: 20px; /*左から(20px)移動*/
}

/* 字黄枠20 */
.box20{
	margin: 2em auto; /* ボックスの余白 */
	background-color:#fefbf1; /* ボックス背景色 */
    padding:1.3em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 2px solid #dedb20;	/* ボックスの線 (太さ　種類　色)*/
}
.box20 .box-title {
	background-color:#fef8da; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: #333; /* タイトル文字色 */
	padding: 0 7px;/*タイトルの余白*/
	line-height: 1.2;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -8px; /*上から（-8px）移動*/
	left: 20px; /*左から(20px)移動*/
}

/* 字赤枠21 */
.box21{
	margin: 2em auto; /* ボックスの余白 */
	background-color:#fff8f8; /* ボックス背景色 */
    padding:1.3em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 2px solid #ee5569;	/* ボックスの線 (太さ　種類　色)*/
}
.box21 .box-title {
	background-color:#fff8f8; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: #ee5569; /* タイトル文字色 */
	padding: 0 7px;/*タイトルの余白*/
	line-height: 1.2;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -8px; /*上から（-8px）移動*/
	left: 20px; /*左から(20px)移動*/
}

/* 箱青枠22 */
.box22{
	margin: 1em auto; /* ボックスの余白 */
	background-color:#f4faff; /* ボックス背景色 */
	padding:1.6em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に)*/
	border: 2px solid #7cbff1;	/* ボックスの線 (太さ　種類　色)*/
}
.box22 .box-title {
	background-color:#7cbff1; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	color: #fff ; /* タイトル文字色 */
	padding: 6px 7px;/*タイトルの余白*/
	padding-bottom: 4px; /* 下の余白を減らす */
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -10px; /*上から（0px）移動*/
	left: 20px; /*左から(0px)移動*/
	border-radius: 3px; /* 角を3pxの半径で丸くする */
}

/* 箱緑枠23 */
.box23{
	margin: 1em auto; /* ボックスの余白 */
	background-color:#F8FFF8; /* ボックス背景色 */
    padding:1.6em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に)*/
	border: 2px solid #58c862;	/* ボックスの線 (太さ　種類　色)*/
}
.box23 .box-title {
	background-color:#58c862; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	color: #fff ; /* タイトル文字色 */
	padding: 6px 7px;/*タイトルの余白*/
	padding-bottom: 4px; /* 下の余白を減らす */
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -10px; /*上から（0px）移動*/
	left: 20px; /*左から(0px)移動*/
	border-radius: 3px; /* 角を3pxの半径で丸くする */
}

/* 箱赤枠24 */
.box24{
	margin: 1em auto; /* ボックスの余白 */
	background-color:#FFF8F8; /* ボックス背景色 */
    padding:1.6em 1.5em 0em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に)*/
	border: 2px solid #ee5569;	/* ボックスの線 (太さ　種類　色)*/
}
.box24 .box-title {
	background-color:#f56c7e; /* タイトル背景色 */
	font-size: 1.1em;/* タイトル文字の大きさ */
	color: #fff ; /* タイトル文字色 */
	padding: 6px 7px;/*タイトルの余白*/
	padding-bottom: 4px; /* 下の余白を減らす */
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -10px; /*上から（0px）移動*/
	left: 20px; /*左から(0px)移動*/
	border-radius: 3px; /* 角を3pxの半径で丸くする */
}

blockquote {
  padding: 20px;
  text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "Helvetica", "Sans-Serif";
  background-color: #e9fffb; /* 背景色 */
  quotes: "“" "”" "‘" "’";
}

blockquote::before,
blockquote::after {
  content: open-quote;
  font-size: 4.5em;
  color: #4fbaa6; /* 引用符の色 */
}

blockquote::after {
  content: close-quote;
}

blockquote span {
  display: block;
}

/*** 文字間の調整 ***/
.entry-content {
  letter-spacing: 0.06em;
}

/*** リンクテキスト カスタマイズ ***/
a{ /*リンクテキスト装飾無し*/
  text-decoration: none;
}
.post a:hover { /*リンクテキストホバー時アンダーライン表示*/
  text-decoration: underline;
}
.share-button{ /*シェアボタン装飾無し*/
  text-decoration: none!important;
}
.follow-button{ /*フォローボタン装飾無し*/
  text-decoration: none!important;
}
.cat-link{ /*カテゴリーラベル装飾無し*/
  text-decoration: none!important;
}
.tag-link{ /*タグラベル装飾無し*/
  text-decoration: none!important;
}
.blogcard-wrap.external-blogcard-wrap.a-wrap.cf,
.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf { /*ブログカード装飾無し*/
  text-decoration: none!important;
}

 /* 新着記事文字の大きさ */
.widget-entry-card-content{
 font-size: 10pt;
}

/*YouTube動画の中央配置*/
.video-container{
margin: 0px auto;
}

/* ツイート埋め込みを中央配置する */
.twitter-tweet {
	width: 500px !important;
	margin-left: auto;
	margin-right: auto;
}

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

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

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