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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 1a. 基本の箱のレイアウトスタイル (.box22) */
.box22 {
  display: flex;
  align-items: center;
  padding: 1em;
  margin: 1em auto;
  /* デフォルトのスタイル（各記号のスタイルで上書きされることを想定） */
  background-color: #f0f0f0; /* ややニュートラルなデフォルト背景色 */
  border: 1px solid #cccccc;   /* ややニュートラルなデフォルト枠線色 */
  /* transition: background-color 0.3s, border-color 0.3s; */ /* 色が変わる際のアニメーション（お好みで） */
}

/* 1b. テキストコンテンツ部分のスタイル (.box-content - 共通の区切り線色) */
.box-content {
  flex-grow: 1;
  /* デフォルトの区切り線の色 (これも各記号で上書き可能) */
  border-left: 2px solid #dddddd;
  padding-left: 0.8em;
}

/* --- 「円」記号のスタイル (例: 情報、ニュートラル) --- */
.box22.circle {
  background-color: #f4faff; /* 元の青系の背景色 */
  border-color: #5e9ece;    /* 元の青系の枠線色 */
}
.box22.circle::before {
  content: "";
  flex-shrink: 0;
  display: block;
  box-sizing: border-box;
  width: 2.0em;
  height: 2.0em;
  border-radius: 50%;
  border: 5px solid #5e9ece; /* 円の線の色 (枠線と合わせる) */
  margin-right: 0.8em;
}
.box22.circle .box-content { /* オプション: 「円」の時の区切り線の色 */
  border-left-color: #5e9ece; /* 枠線と合わせる例 */
}

/* --- 「チェックマーク」記号のスタイル (例: 成功、OK) --- */
.box22.checkmark {
  background-color: #d4edda; /* 成功を表す薄い緑の背景 */
  border-color: #c3e6cb;    /* 成功を表す緑系の枠線 */
}
.box22.checkmark::before {
  content: "✔"; /* 本来の記号に戻しました */
  flex-shrink: 0;
  font-size: 1.8em;
  font-weight: bold;
  color: #155724;          /* 濃い緑色のチェックマーク */
  line-height: 1;
  margin-right: 0.6em;
}
.box22.checkmark .box-content { /* オプション: 「チェックマーク」の時の区切り線の色 */
  border-left-color: #28a745; /* チェックマークの色と合わせる例 */
}

/* --- 「警告サイン」記号のスタイル (例: 注意、警告) --- */
.box22.warning {
  background-color: #fff3cd; /* 警告を表す薄い黄色の背景 */
  border-color: #ffeeba;    /* 警告を表す黄色系の枠線 */
}
.box22.warning::before {
  content: "⚠"; /* 本来の記号に戻しました */
  flex-shrink: 0;
  font-size: 1.8em;
  color: #856404;          /* 濃い黄色の警告マーク */
  line-height: 1;
  margin-right: 0.6em;
}
.box22.warning .box-content { /* オプション: 「警告サイン」の時の区切り線の色 */
  border-left-color: #ffc107; /* 警告マークの色と合わせる例 */
}

/* --- 「サムズダウン」記号のスタイル (例: 不承認、良くない) --- */
.box22.thumbsdown {
  background-color: #f8d7da; /* 不承認を表す薄い赤の背景 */
  border-color: #f5c6cb;    /* 不承認を表す赤系の枠線 */
}
.box22.thumbsdown::before {
  content: "👎"; /* 本来の記号に戻しました */
  flex-shrink: 0;
  font-size: 1.8em;
  color: #721c24;          /* 濃い赤色のサムズダウン */
  margin-right: 0.6em;
}
.box22.thumbsdown .box-content { /* オプション: 「サムズダウン」の時の区切り線の色 */
  border-left-color: #dc3545; /* サムズダウンの色と合わせる例 */
}

/* --- 「✖マーク」記号のスタイル (例: エラー、中止) --- */
.box22.xmark {
  background-color: #f8d7da; /* エラーを表す薄い赤の背景 */
  border-color: #f5c6cb;    /* エラーを表す赤系の枠線 */
}
.box22.xmark::before {
  content: "✖"; /* 本来の記号に戻しました */
  flex-shrink: 0;
  font-size: 2.0em;
  font-weight: bold;
  color: #721c24;          /* 濃い赤色の✖マーク */
  line-height: 1;
  margin-right: 0.8em;
}
.box22.xmark .box-content { /* オプション: 「✖マーク」の時の区切り線の色 */
  border-left-color: #dc3545; /* ✖マークの色と合わせる例 */
}


/* ====================================================================== */
/* === 2. その他の汎用ボックススタイル === */
/* ====================================================================== */

/* 青背景ボックス (プライマリ) */
.primary-box {
  background-color: #e5f2ff; /* 薄い水色 */
  color: #0b72c4; /* やや濃い青 (文字色) */
  border: 1px solid #b3d9ff; /* 水色系の枠線 (背景より少し濃いめに調整) */
  padding: 1em 1.2em;
  margin-bottom: 1.5em;
  border-radius: 5px;
}

/* 緑背景ボックス (成功) */
.success-box {
  background-color: #e1eee4; /* 薄い緑 */
  color: #146c43; /* 濃い緑 (文字色) */
  border: 1px solid #c3e6cb; /* 緑系の枠線 (背景より少し濃いめに調整) */
  padding: 1em 1.2em;
  margin-bottom: 1.5em;
  border-radius: 5px;
}

/* 黄色背景ボックス (警告) */
.warning-box {
  background-color: #f5f0d8; /* 薄いクリーム色 */
  color: #8a6d00; /* 暗い黄色 (文字色) */
  border: 1px solid #ffeeba; /* 黄色系の枠線 (背景より少し濃いめに調整) */
  padding: 1em 1.2em;
  margin-bottom: 1.5em;
  border-radius: 5px;
}

/* 桃色/赤系背景ボックス (危険/強調) */
.danger-box {
  background-color: #ffeaec; /* 薄い桃色 */
  color: #86195e; /* やや暗い赤紫色 (文字色) */
  border: 1px solid #f5c6cb; /* 桃色系の枠線 (背景より少し濃いめに調整) */
  padding: 1em 1.2em;
  margin-bottom: 1.5em;
  border-radius: 5px;
}

/* ボックス内の最後の要素の下側マージンを消す（見た目調整） */
.primary-box > :last-child,
.success-box > :last-child,
.warning-box > :last-child,
.danger-box > :last-child {
  margin-bottom: 0;
}


/* ====================================================================== */
/* === 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 #5e9ece;	/* ボックスの線 (太さ　種類　色)*/
}
.box22 .box-title {
	background-color:#5e9ece; /* タイトル背景色 */
	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 #56ba5f;	/* ボックスの線 (太さ　種類　色)*/
}
.box23 .box-title {
	background-color:#56ba5f; /* タイトル背景色 */
	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){
  /*必要ならばここにコードを書く*/
}