/*
Theme Name: Cocoon Child Pet
Template: cocoon-master
Description: 犬とリクガメと私の365日 専用子テーマ（Bloggerからの移行スタイル・4キャラ会話・完全独立版。マラソンブログの要素は一切含まない）
Author: ハル
Version: 1.1.0
*/

/* =========================================================
   犬とリクガメと私の365日 — 記事本文スタイル（Blogger踏襲）
   キャラ: ハル(owner) / レオ / あんず / タル吉
   画像は本子テーマ内に自己ホスト（外部サイト参照なし）
   ========================================================= */

/* ---- 見出し h2 ---- */
.h2-style {
  background-color: #FFEB3B !important;   /* 明るい黄色 */
  color: #111111 !important;
  border-left: 10px solid #f64949;
  padding: 20px 24px !important;
  margin: 28px 0;
  font-size: 1.6em;
  font-family: 'Verdana', sans-serif;
  border-radius: 6px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
  line-height: 1.5;
  font-weight: bold;
  display: block;
  width: 100%;
  scroll-margin-top: 100px;
  box-sizing: border-box;
}
.h2-style::before,
.h2-style::after { content: none; }

/* ---- リード文ボックス ---- */
.article-box {
  background-color: #f5f5f5;
  border-radius: 30px;
  padding: 20px;
  margin: 20px 0;
}

/* ---- テーブル ---- */
.no-ad-table-wrapper { overflow-x: auto; margin: 10px 0; }
.table_style {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  border-radius: 5px;
  width: 100%;
}
.table_style th,
.table_style td {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 4px 10px;
}
.table_style th { background-color: #f2f2f2; }

/* =========================================================
   会話パート（ハル・レオ・あんず・タル吉）
   ========================================================= */
.talk-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 auto 10px auto;
}
.talk-wrap p { margin: 0; }
.talk-end { clear: both; }

/* アイコン共通 */
.owner-icon, .leo-icon, .anzu-icon, .tarukichi-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  box-shadow: 1px 1px 5px #aaa;
  border: 3px solid #fff;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* あんず（左） */
.anzu-icon      { background-image: url("images/characters/anzu.png"); float: left; margin-right: 5px; }
/* レオ（右） */
.leo-icon       { background-image: url("images/characters/leo.png"); float: right; background-size: 120%; }
/* タル吉（右） */
.tarukichi-icon { background-image: url("images/characters/tarukichi.png"); float: right; }
/* ハル＝owner（右） */
.owner-icon     { background-image: url("images/characters/haru.png"); float: right; }

/* 吹き出し（左＝緑） */
.talk-left {
  position: relative;
  background: #fff;
  border: 2px solid #aef26a;
  padding: 3%;
  border-radius: 10px;
  width: 70%;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 1px 1px 5px #aaa;
}
.talk-left:before {
  content: ""; position: absolute; left: -20px; top: 25%;
  transform: translateY(-50%); border: 10px solid transparent; border-right-color: #666;
}
.talk-left:after {
  content: ""; position: absolute; left: -16px; top: 25%;
  transform: translateY(-50%); border: 9px solid transparent; border-right-color: #fff;
}

/* 吹き出し（右＝ピンク） */
.talk-right {
  position: relative;
  background: #fff;
  border: 2px solid #fda1f1;
  padding: 3%;
  border-radius: 10px;
  width: 70%;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 1px 1px 5px #aaa;
}
.talk-right:before {
  content: ""; display: inline-block; border: 10px solid transparent; border-left-color: #666;
  position: absolute; right: -20px; top: 25%; margin-top: -9px;
}
.talk-right:after {
  content: ""; display: inline-block; border: 9px solid transparent; border-left-color: #fff;
  position: absolute; right: -16px; top: 25%; margin-top: -8px;
}

/* =========================================================
   リスト（チェックマーク）
   ========================================================= */
.clear-list {
  list-style: none;
  margin: 30px auto;
  padding: 40px;
  background-color: #fff8fa;
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: block;
  max-width: 100%;
  box-sizing: border-box;
}
.clear-list::before,
.clear-list::after { content: ""; display: block; height: 20px; }
.clear-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #222;
}
.clear-list li::before {
  content: "\2714";
  position: absolute; left: 0; top: 3px;
  color: #007bff; font-size: 1.2rem; font-weight: bold;
}
ul.clear-list ins.adsbygoogle,
ol.clear-list ins.adsbygoogle { display: none !important; }

/* =========================================================
   画像（figure）
   ========================================================= */
.article-box img, article figure img { max-width: 100%; height: auto; }
figure { margin: 1em 0; }
figcaption { font-size: 0.9em; color: #666; margin-top: 6px; }

/* =========================================================
   モバイル
   ========================================================= */
@media (max-width: 834px) {
  .talk-left, .talk-right { width: 62%; }
  .owner-icon, .leo-icon, .anzu-icon, .tarukichi-icon { width: 72px; height: 72px; }
  .clear-list { padding: 24px 18px; }
  .h2-style { font-size: 1.35em; padding: 14px 16px !important; }
}