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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/* === TASK-011-COMMON-CSS-START (D自動設置 2026-06-14) === */
/*! makeru.jp TASK-011 共通スタイル（記事内インラインCSSの代替）
 * 設置: WP管理画面 外観→カスタマイズ→追加CSS に貼り付け、または子テーマで読込。
 * このCSSはサイト全体に1度だけ置けば全TASK-011記事に適用される。
 */
/* ========== TASK-011 記事内カスタムCSS ========== */

/* ヒーロー画像エリア */
.hero-image-wrap {
  position: relative;
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 2em;
}
.hero-image-wrap img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.hero-image-wrap figcaption {
  font-size: 0.75em;
  color: #888;
  text-align: right;
  padding: 0.3em 0.5em;
}

/* comparison_cards（3tier・B-1） */
.comparison-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1.5em 0;
}
.comparison-card {
  flex: 1 1 180px;
  border-radius: 10px;
  padding: 1.2em 1em;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.comparison-card.small  { background: #e8f5e9; border: 2px solid #66bb6a; }
.comparison-card.medium { background: #fff8e1; border: 2px solid #ffca28; }
.comparison-card.large  { background: #fce4ec; border: 2px solid #ef9a9a; }
.comparison-card .card-image { font-size: 2.2em; margin-bottom: 0.2em; }
.comparison-card .card-label { font-size: 0.85em; font-weight: bold; color: #555; margin-bottom: 0.3em; }
.comparison-card .card-size  { font-size: 2em; font-weight: 900; line-height: 1.1; margin-bottom: 0.3em; }
.comparison-card.small  .card-size { color: #2e7d32; }
.comparison-card.medium .card-size { color: #f57f17; }
.comparison-card.large  .card-size { color: #c62828; }
.comparison-card .card-desc  { font-size: 0.85em; color: #444; line-height: 1.5; }

/* steps_figure（逆算Nステップ・B-2） */
.steps-figure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  background: #f3e5f5;
  border: 2px solid #ce93d8;
  border-radius: 10px;
  padding: 1.2em 1em;
  margin: 1.5em 0;
  justify-content: center;
}
.step-box {
  background: #fff;
  border: 2px solid #ba68c8;
  border-radius: 8px;
  padding: 0.7em 1em;
  text-align: center;
  min-width: 130px;
  flex: 0 0 auto;
}
.step-box .step-num { font-size: 0.75em; color: #7b1fa2; font-weight: bold; }
.step-box .step-text { font-size: 0.9em; font-weight: bold; color: #333; line-height: 1.4; }
.step-arrow { font-size: 1.8em; color: #ba68c8; font-weight: bold; }
.step-result {
  background: #7b1fa2;
  color: #fff;
  border-radius: 8px;
  padding: 0.7em 1.2em;
  text-align: center;
  flex: 0 0 auto;
}
.step-result .step-num { font-size: 0.75em; opacity: 0.8; }
.step-result .step-text { font-size: 1em; font-weight: 900; line-height: 1.4; }

/* decision_flowchart（条件分岐フロー・B-3） */
.decision-flowchart {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 1.5em;
  margin: 1.5em 0;
}
.flow-question {
  background: #1976d2;
  color: #fff;
  border-radius: 8px;
  padding: 0.7em 1.2em;
  font-weight: bold;
  margin-bottom: 0.8em;
}
.flow-branch {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin-bottom: 1em;
}
.flow-yes {
  flex: 1 1 180px;
  border-radius: 8px;
  padding: 0.8em 1em;
  font-size: 0.9em;
  background: #e8f5e9;
  border: 2px solid #66bb6a;
}
.flow-no {
  flex: 1 1 180px;
  border-radius: 8px;
  padding: 0.8em 1em;
  font-size: 0.9em;
  background: #e3f2fd;
  border: 2px solid #64b5f6;
}
.flow-yes strong,
.flow-no  strong { display: block; margin-bottom: 0.3em; }
.flow-warning {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 8px;
  padding: 0.8em 1.2em;
  font-size: 0.9em;
  margin-top: 0.8em;
}

/* 要点ボックス（H-2 B-4要素4） */
.point-box {
  background: #e3f2fd;
  border-left: 4px solid #1976d2;
  border-radius: 0 8px 8px 0;
  padding: 0.9em 1.2em;
  margin: 1em 0;
}
.point-box p { margin: 0; }

/* 強調（トンさんFB#8: 重要箇所を赤字太字/マーカー/下線で目立たせる） */
.em-strong { color: #c62828; font-weight: 700; }
.em-marker { background: linear-gradient(transparent 55%, #fff59d 55%); font-weight: 700; }
.em-underline { text-decoration: underline; text-decoration-color: #c62828; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }

/* セクション画像スロット（トンさんFB#7: 各H2直下に画像を置く） */
.section-image { margin: 1.2em 0; text-align: center; }
.section-image img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
.section-image figcaption { font-size: 0.8em; color: #777; margin-top: 0.4em; }
.img-instruction {
  display: block; border: 2px dashed #f0a500; background: #fff8e1;
  color: #8a6d00; border-radius: 8px; padding: 1em 1.2em;
  font-size: 0.9em; text-align: center; line-height: 1.6;
}

/* アフィリエイト枠（トンさんFB#5: 商品画像リンクの差込位置・M設計） */
.affiliate-slot {
  border: 2px dashed #4caf50; background: #f1f8e9;
  color: #33691e; border-radius: 8px; padding: 1em 1.2em;
  margin: 1.4em 0; font-size: 0.9em; text-align: center; line-height: 1.6;
}
/* === TASK-011-COMMON-CSS-END === */