@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;
}

/* ====================================================================== */
/* === 1. アイコン付きボックススタイル (.icon-box) ※元.box22から変更 === */
/* ====================================================================== */

/* 基本レイアウト */
.icon-box {
  display: flex;
  align-items: center; /* アイコンとテキストを上下中央で揃える */
  background-color: #f0f0f0; /* デフォルト背景色 */
  border: 1px solid #cccccc; /* デフォルト枠線色 */
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
}

/* テキストコンテンツ部分のスタイル */
.icon-box .box-content {
  flex-grow: 1;
  border-left: 2px solid #dddddd; /* デフォルト区切り線 */
  padding-left: 12px;
}

/* --- 「円 (情報)」記号のスタイル --- */
.icon-box.circle {
  background-color: #f4faff;
  border-color: #5e9ece;
}
.icon-box.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;
}
.icon-box.circle .box-content {
  border-left-color: #5e9ece;
}

/* --- 「xmark (エラー・バツ)」記号のスタイル --- */
.icon-box.xmark {
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.icon-box.xmark::before {
  content: "❌";
  flex-shrink: 0;
  font-size: 1.5em;
  color: #721c24;
  margin-right: 12px;
}
.icon-box.xmark .box-content {
  border-left-color: #f5c6cb;
}


/* ====================================================================== */
/* === 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-pink-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(#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 { /* クラス名を小文字に統一しました */
  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);
}


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

/* チェック各種 */
.checkmarkA-1 { color: #0095e5; font-size: 18px; font-weight: bold; text-shadow: 1px 1px 2px #0095e5; }
.checkmarkA-2 { color: #19a344; font-size: 18px; font-weight: bold; text-shadow: 1px 1px 2px #19a344; }
.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; font-weight: bold; text-shadow: 1px 1px 3px #e6e800; }
.pointmarkA-9 { font-size: 16px; font-weight: bold; text-shadow: 1px 1px 3px #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 !important;
  background-color: #ffffff !important;
  padding: 1em 2em 0.8em !important;
  border: solid 1px #b8b8b8 !important;
  border-radius: 4px !important;
}

/* 灰枠2 */
.box2 { margin: 2em auto; background-color: #f4f4f4; padding: 1em 2em 1em; border: solid 1px #b8b8b8; border-radius: 4px; }
/* 青枠3 */
.box3 { margin: 2em auto !important; background-color: #f4faff !important; padding: 1em 2em 1em !important; border: solid 1px #55b0ff !important; border-radius: 4px !important; }
/* 緑枠4 */
.box4 { margin: 2em auto; background-color: #f8fff8; padding: 1em 2em 1em; border: solid 1px #1bb132; border-radius: 4px; }
/* 黄枠5 */
.box5 { margin: 2em auto; background-color: #fefbf1; padding: 1em 2em 1em; border: solid 1px #e8c400; border-radius: 4px; }
/* 桃枠6 */
.box6 { margin: 2em auto; background-color: #fff2f2; padding: 1em 2em 1em; border: solid 1px #e391b9; border-radius: 4px; }
/* 赤枠7 */
.box7 { margin: 2em auto; background-color: #FFF8F8; padding: 1em 2em 1em; border: solid 1px #EA6363; border-radius: 4px; }

/* 字白枠15 */
.box15 { margin: 2em auto; background-color: #ffffff; padding: 1.3em 1.5em 0em; 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: -10px; left: 20px; display: inline-block; border-radius: 3px; }

/* 字灰枠16 */
.box16 { margin: 2em auto; background-color: #f2f2f2; padding: 1.3em 1.5em 0em; 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: -10px; left: 20px; display: inline-block; border-radius: 3px; }

/* 字青枠17 */
.box17 { margin: 5em auto !important; background-color: #f4faff; padding: 1.3em 1.5em 0em; position: relative; border: 1px 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: -10px; left: 20px; display: inline-block; border-radius: 3px; }

/* 字緑枠18 */
.box18 { margin: 2em auto; background-color: #f8fff8; padding: 1.3em 1.5em 0em; 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: -10px; left: 20px; display: inline-block; border-radius: 3px; }

/* 字桃枠19 */
.box19 { margin: 2em auto; background-color: #fff9fc; padding: 1.3em 1.5em 0em; 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: -10px; left: 20px; display: inline-block; border-radius: 3px; }

/* 字黄枠20 */
.box20 { margin: 2em auto; background-color: #fefbf1; padding: 1.3em 1.5em 0em; 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: -10px; left: 20px; display: inline-block; border-radius: 3px; }

/* 字赤枠21 */
.box21 { margin: 2em auto; background-color: #fff8f8; padding: 1.3em 1.5em 0em; 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: -10px; left: 20px; display: inline-block; border-radius: 3px; }

/* 箱白枠25 */
.box25 { margin: 2em auto; margin-bottom: 30px; background-color: #FFFFFF; padding: 1.6em 1.5em 0em; position: relative; border: 2px solid #c8c8c8; border-radius: 4px; }
.box25 .box-title { background-color: #b7b7b7; font-size: 1.1em; font-weight: 800; color: #fff; padding: 6px 7px; padding-bottom: 4px; line-height: 1; position: absolute; top: -15px; left: 20px; display: inline-block; border-radius: 3px !important; }

/* 箱青枠22 */
.box22 { margin: 2em auto; margin-bottom: 30px; background-color: #f4faff; padding: 1.6em 1.5em 0em; position: relative; border: 2px solid #5e9ece; border-radius: 4px; }
.box22 .box-title { background-color: #5e9ece; font-size: 1.1em; font-weight: bold; color: #fff; padding: 6px 7px; padding-bottom: 4px; line-height: 1; position: absolute; top: -15px; left: 20px; display: inline-block; border-radius: 3px !important; }

/* 箱緑枠23 */
.box23 { margin: 2em auto; margin-bottom: 30px; background-color: #f8fff8; padding: 1.6em 1.5em 0em; position: relative; border: 2px solid #54ae5c; border-radius: 4px; }
.box23 .box-title { background-color: #54ae5c; font-size: 1.1em; font-weight: bold !important; color: #fff; padding: 6px 7px; padding-bottom: 4px; line-height: 1; position: absolute; top: -15px; left: 20px; display: inline-block; border-radius: 3px !important; }

/* 箱赤枠24 */
.box24 { margin: 2em auto; margin-bottom: 30px; background-color: #FFF8F8; padding: 1.6em 1.5em 0em; position: relative; border: 2px solid #ff7897; border-radius: 4px; }
.box24 .box-title { background-color: #ff7897; font-size: 1.1em; font-weight: bold; color: #ffffff; padding: 6px 7px; padding-bottom: 4px; line-height: 1; position: absolute; top: -15px; left: 20px; display: inline-block; border-radius: 3px !important; }

/* 引用 (blockquote) */
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;
}

/* リンクテキスト カスタマイズ */
a { text-decoration: none; }
.post a:hover { text-decoration: underline; }
.share-button, .follow-button, .cat-link, .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;
}

/* 行間調整 */
.my-line-spacing {
  line-height: 2.3 !important; 
}

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

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

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