/*
 * tmo-blog Cocoon Child — アフィリエイト特化スタイル
 * cocoon-child/style.css に追記して使用
 */

/* ============================================================
   アフィリエイト商品ボックス
   使用例: <div class="aff-box"> ... </div>
   ============================================================ */
.aff-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
  background: #fafafa;
}
.aff-box__image {
  flex-shrink: 0;
  width: 120px;
  text-align: center;
}
.aff-box__image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.aff-box__body {
  flex: 1;
}
.aff-box__title {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0 0 6px;
  line-height: 1.4;
}
.aff-box__price {
  color: #c0392b;
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 8px;
}
.aff-box__desc {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 12px;
  line-height: 1.6;
}
.aff-box__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 600px) {
  .aff-box { flex-direction: column; }
  .aff-box__image { width: 100%; max-width: 180px; margin: 0 auto; }
}

/* ============================================================
   購入ボタン（Amazon / 楽天 / Yahoo）
   ============================================================ */
.btn-amazon,
.btn-rakuten,
.btn-yahoo {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 4px;
  color: #fff !important;
  font-size: 0.88em;
  font-weight: bold;
  text-decoration: none !important;
  transition: opacity 0.2s;
}
.btn-amazon  { background: #f79256; }
.btn-rakuten { background: #bf0000; }
.btn-yahoo   { background: #6aa3f8; }
.btn-amazon:hover,
.btn-rakuten:hover,
.btn-yahoo:hover  { opacity: 0.85; }

/* ============================================================
   評価ボックス（星 + 総合評価）
   ============================================================ */
.rating-box {
  border: 2px solid #f0c040;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
  background: #fffdf0;
}
.rating-box__title {
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 1.05em;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.95em;
}
.rating-row__label { width: 90px; flex-shrink: 0; color: #555; }
.stars { color: #f0c040; letter-spacing: 2px; }
.stars-empty { color: #ddd; }
.rating-row__score { font-weight: bold; }
.rating-total {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e8d880;
  font-size: 1.1em;
  font-weight: bold;
  text-align: right;
}

/* ============================================================
   メリット・デメリット表
   ============================================================ */
.merit-demerit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}
.merit, .demerit {
  border-radius: 6px;
  padding: 14px 16px;
}
.merit   { background: #eafaf1; border-left: 4px solid #27ae60; }
.demerit { background: #fdf2f2; border-left: 4px solid #e74c3c; }
.merit__title, .demerit__title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 0.95em;
}
.merit__title   { color: #27ae60; }
.demerit__title { color: #e74c3c; }
.merit ul, .demerit ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9em;
  line-height: 1.8;
}
@media (max-width: 600px) {
  .merit-demerit { grid-template-columns: 1fr; }
}

/* ============================================================
   比較表
   ============================================================ */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.92em;
}
.comparison-table th,
.comparison-table td {
  border: 1px solid #ddd;
  padding: 10px 14px;
  text-align: center;
  vertical-align: middle;
}
.comparison-table thead th {
  background: #2c3e50;
  color: #fff;
  font-weight: bold;
}
.comparison-table tbody tr:nth-child(even) { background: #f8f8f8; }
.comparison-table .highlight { background: #fff9e6 !important; font-weight: bold; }
.comparison-table .best { color: #e67e22; font-weight: bold; }

/* ============================================================
   まとめボックス
   ============================================================ */
.summary-box {
  border: 2px solid #3498db;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 32px 0;
  background: #f0f8ff;
  position: relative;
}
.summary-box::before {
  content: "まとめ";
  position: absolute;
  top: -13px;
  left: 20px;
  background: #3498db;
  color: #fff;
  font-size: 0.85em;
  font-weight: bold;
  padding: 2px 14px;
  border-radius: 20px;
}
.summary-box ul {
  margin: 0;
  padding-left: 20px;
  line-height: 2;
}

/* ============================================================
   CTA ボタン（記事内コンバージョン用）
   ============================================================ */
.cta-block {
  text-align: center;
  margin: 32px 0;
  padding: 24px;
  background: #fff8f0;
  border-radius: 8px;
  border: 1px dashed #f0a060;
}
.cta-block__text {
  font-size: 1.05em;
  font-weight: bold;
  margin-bottom: 14px;
}
.cta-btn {
  display: inline-block;
  background: #e67e22;
  color: #fff !important;
  padding: 14px 36px;
  border-radius: 50px;
  font-size: 1.05em;
  font-weight: bold;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.cta-btn:hover { background: #d35400; transform: translateY(-2px); }

/* ============================================================
   スキン (bizarre-foods-bluecurry) のアイキャッチ blur 効果を無効化
   スキンが .eye-catch img に blur(5px) / opacity:.5 を適用しているため上書き
   ============================================================ */

/* アイキャッチ画像のぼかし・透明・変形をリセット */
.article-header .eye-catch img,
.entry-header .eye-catch img,
.eye-catch-wrap .eye-catch img {
  height: auto !important;
  -webkit-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100% !important;
}

/* アイキャッチを正常表示（非表示になっていた場合も含め確実に表示） */
.article-header .eye-catch-wrap,
.entry-header .eye-catch-wrap {
  display: block !important;
  position: static !important;
}

/* タイトルの絶対配置（アイキャッチ上への重なり）を解除 */
.article-header h1.entry-title,
.entry-header h1.entry-title {
  position: static !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;
  color: #222 !important;
  text-shadow: none !important;
  font-size: 1.4em !important;
  margin: 20px 0 !important;
}

/* ============================================================
   見出しデザイン（参考サイト風）
   ============================================================ */

/* H2: 濃い青背景＋白文字＋≫アイコン */
.entry-content h2 {
  background: #175297;
  color: #fff !important;
  padding: 14px 20px;
  border-radius: 4px;
  font-size: 1.2em;
  margin: 40px 0 20px;
  position: relative;
}
.entry-content h2::before {
  content: "≫ ";
  font-weight: bold;
  color: #fff;
  opacity: 0.85;
}

/* H3: 左に青いボーダー＋アイコン */
.entry-content h3 {
  border-left: 5px solid #175297;
  padding: 6px 14px;
  color: #175297;
  font-size: 1.08em;
  margin: 32px 0 14px;
  background: transparent;
}
.entry-content h3::before {
  content: "＞ ";
  color: #00a2e8;
  font-weight: bold;
}

/* ============================================================
   目次ボックス（参考サイト風）
   使用例: [toc title="見出し" items="項目1,項目2,項目3"]
   ============================================================ */
.toc-box {
  border: 2px solid #175297;
  border-radius: 6px;
  padding: 20px 24px;
  margin: 28px 0;
  background: #fff;
}
.toc-box__title {
  color: #175297;
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px dotted #00a2e8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-box__title::before {
  content: "✔";
  color: #00a2e8;
}
.toc-box ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc-counter;
}
.toc-box ol li {
  counter-increment: toc-counter;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dotted #dde5f0;
  font-size: 0.95em;
}
.toc-box ol li:last-child { border-bottom: none; }
.toc-box ol li::before {
  content: counter(toc-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: #175297;
  color: #fff;
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: bold;
}
.toc-box ol li a {
  color: #175297;
  text-decoration: underline;
}
.toc-box ol li .toc-icon {
  color: #00a2e8;
  font-size: 0.9em;
  margin-right: 2px;
}

/* ============================================================
   更新通知バー
   使用例: [update_notice date="2026年4月23日"]テキスト[/update_notice]
   ============================================================ */
.update-notice {
  background: #f0f0f0;
  border-left: 4px solid #aaa;
  padding: 10px 16px;
  margin: 20px 0;
  font-size: 0.92em;
  color: #444;
  border-radius: 0 4px 4px 0;
  line-height: 1.6;
}
.update-notice__date {
  font-weight: bold;
  color: #333;
  margin-right: 6px;
}

/* ============================================================
   この記事のレベル 評価表
   使用例: [article_level beginner="4.0" importance="4.0" difficulty="2.0"]
   ============================================================ */
.article-level {
  width: 100%;
  max-width: 500px;
  margin: 24px auto;
  border-collapse: collapse;
  font-size: 0.95em;
}
.article-level caption {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 10px;
  text-align: center;
  color: #333;
}
.article-level td {
  border: 1px solid #ddd;
  padding: 12px 16px;
  vertical-align: middle;
}
.article-level td:first-child {
  width: 90px;
  background: #fff;
  color: #444;
  font-weight: bold;
}
.article-level td:last-child {
  background: #fff;
  text-align: left;
}
.article-level .lv-stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.article-level .lv-stars__icons {
  display: inline-flex;
  gap: 2px;
}
.article-level .lv-stars__icons span {
  font-size: 1.2em;
  line-height: 1;
}
.article-level .lv-stars__icons .on  { color: #f5a623; }
.article-level .lv-stars__icons .half {
  position: relative;
  display: inline-block;
  color: #ddd;
}
.article-level .lv-stars__icons .half::before {
  content: "★";
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: #f5a623;
}
.article-level .lv-stars__icons .off { color: #ddd; }
.article-level .lv-stars__score {
  color: #555;
  font-size: 0.9em;
}

/* ============================================================
   記事内 ポイントボックス（Cocoon のbox系と共存）
   ============================================================ */
.point-box {
  border-left: 5px solid #9b59b6;
  background: #faf5ff;
  padding: 14px 18px;
  margin: 20px 0;
  border-radius: 0 6px 6px 0;
}
.point-box__title {
  color: #9b59b6;
  font-weight: bold;
  margin-bottom: 6px;
}