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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ログイン中の管理者のみ広告を非表示にする */
body.logged-in .ad-container {
    display: none !important;
}

/* 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; /* 枠線と合わせる例 */
}

/* --- ボックスの基本スタイル --- */
.box22 {
  display: flex; /* アイコンとコンテンツを横並びに配置 */
  align-items: flex-start; /* 上揃えで表示 */
  border: 1px solid #f5c6cb; /* 枠線 */
  background-color: #f8d7da; /* 背景色 */
  border-radius: 4px; /* 角を少し丸める */
  padding: 16px; /* ボックス全体の内側の余白 */
  margin-bottom: 20px; /* ボックスの外側の下の余白 */
}

/* --- ボックスの基本スタイル --- */
.box22 {
  display: flex;
  /* ↓↓↓ この行を「center」に変更します ↓↓↓ */
  align-items: center; /* アイコンとテキストを上下中央で揃える */
  
  border: 1px solid #f5c6cb;
  background-color: #f8d7da;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
}

/* 「xmark」用のアイコンを ::before で作成 */
.box22.xmark::before {
  content: "❌";
  font-size: 1.5em;
  color: #721c24;
  margin-right: 12px;
  /* align-items: center を使う場合、line-height は不要なことが多いです */
}

/* テキストが入っている内側のボックスのスタイル */
.box22.xmark .box-content {
  border-left: 1px solid #f5c6cb;
  padding-left: 12px;
  padding-bottom: 10px;
}


/* ====================================================================== */
/* === 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;
  border-radius: 4px; /* 角丸追加 */
}

/* 灰枠2 */
.box2 {
  margin: 2em auto;
  background-color: #f4f4f4;
  padding: 1em 1.5em 1em;
  border: solid 1px #b8b8b8;
  border-radius: 4px; /* 角丸追加 */
}

/* 青枠3 */
.box3 {
  margin: 2em auto;
  background-color: #f4faff;
  padding: 1em 1.5em 1em;
  border: solid 1px #55b0ff;
  border-radius: 4px; /* 角丸追加 */
}

/* 緑枠4 */
.box4 {
  margin: 2em auto;
  background-color: #f8fff8;
  padding: 1em 1.5em 1em;
  border: solid 1px #1bb132;
  border-radius: 4px; /* 角丸追加 */
}

/* 黄枠5 */
.box5 {
  margin: 2em auto;
  background-color: #fefbf1;
  padding: 1em 1.5em 1em;
  border: solid 1px #e8c400;
  border-radius: 4px; /* 角丸追加 */
}

/* 桃枠6 */
.box6 {
  margin: 2em auto;
  background-color: #fff2f2;
  padding: 1em 1.5em 1em;
  border: solid 1px #e391b9;
  border-radius: 4px; /* 角丸追加 */
}

/* 赤枠7 */
.box7 {
  margin: 2em auto;
  background-color: #FFF8F8;
  padding: 1em 1.5em 1em;
  border: solid 1px #EA6363;
  border-radius: 4px; /* 角丸追加 */
}

/* 字白枠15 */
.box15 {
  margin: 2em auto;
  background-color: #ffffff;
  padding: 1.3em 1.5em 1em;
  position: relative;
  border: 1px solid #c7c7c7;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block; /* 念のため追加 */
  border-radius: 3px;    /* 念のため追加 */
}

/* 字灰枠16 */
.box16 {
  margin: 2em auto;
  background-color: #f2f2f2;
  padding: 1.3em 1.5em 1em;
  position: relative;
  border: 1px solid #bcbcbc;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block;
  border-radius: 3px;
}

/* 字青枠17 */
.box17 {
  margin: 2em auto;
  background-color: #f4faff;
  padding: 1.3em 1.5em 1em;
  position: relative;
  border: 2px solid #55b0ff;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block;
  border-radius: 3px;
}

/* 字緑枠18 */
.box18 {
  margin: 2em auto;
  background-color: #f8fff8;
  padding: 1.3em 1.5em 1em;
  position: relative;
  border: 2px solid #46c359;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block;
  border-radius: 3px;
}

/* 字桃枠19 */
.box19 {
  margin: 2em auto;
  background-color: #fff9fc;
  padding: 1.3em 1.5em 1em;
  position: relative;
  border: 2px solid #eebcda;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block;
  border-radius: 3px;
}

/* 字黄枠20 */
.box20 {
  margin: 2em auto;
  background-color: #fefbf1;
  padding: 1.3em 1.5em 1em;
  position: relative;
  border: 2px solid #dedb20;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block;
  border-radius: 3px;
}

/* 字赤枠21 */
.box21 {
  margin: 2em auto;
  background-color: #fff8f8;
  padding: 1.3em 1.5em 1em;
  position: relative;
  border: 2px solid #ee5569;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block;
  border-radius: 3px;
}

/* 箱青枠22 */
.box22 {
  margin: 1em auto;
  background-color: #f4faff;
  padding: 1.6em 1.5em 0.3em;
  position: relative;
  border: 1px solid #5e9ece;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block;         /* box24と同じ強力な修正 */
  border-radius: 3px !important; /* box24と同じ強力な修正 */
}

/* 箱緑枠23 */
.box23 {
  margin: 1em auto;
  background-color: #f8fff8;
  padding: 1.6em 1.5em 0.3em;
  position: relative;
  border: 1px solid #56ba5f;
  border-radius: 4px; /* 角丸追加 */
}
.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;
  left: 20px;
  display: inline-block;         /* box24と同じ強力な修正 */
  border-radius: 3px !important; /* box24と同じ強力な修正 */
}

/* 箱赤枠24 */
.box24 {
  margin: 1em auto;
  background-color: #FFF8F8;
  padding: 1.6em 1.5em 0.3em;
  position: relative;
  border: 1px solid #ee5569;
  border-radius: 4px; /* 追加済み */
}
.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;
  left: 20px;
  display: inline-block;         /* 追加済み */
  border-radius: 3px !important; /* 追加済み */
}

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){
  /*必要ならばここにコードを書く*/
}