@charset "UTF-8";
/* ============================================================
   jmh-article.css  —  jm-h.com 記事スタイル（統合版・完成品）
   ------------------------------------------------------------
   3部構成で1枚に統合：
     PART 1: 自動生成記事本文  …… build_content_html.py の出力（.article-section 配下）
     PART 2: 体験談記事レイアウト …… 手組みの体験談ページ（.jmh-case 配下）
     PART 3: WordPress テーマ統合 …… single テンプレ（.section_waku / .single_content 等）
   世界観：バーガンディ × クリーム × ゴールド。
   フォント方針：
     ・本文〜大半は --font-base（ゴシック）で統一。
     ・デザイン上フォントを変えたい箇所のみ --font-accent（明朝）を専用適用：
       記事タイトル / 体験談の引用 / 署名。
   ・配色トークンは :root に一本化（全系統が共有）。
   ・スマホ調整は末尾の @media に集約。
   ============================================================ */

:root{
  --c-burgundy:      #6b1e2e;
  --c-burgundy-deep: #4a1420;
  --c-burgundy-soft: #8a3548;
  --c-cream:         #faf6f0;
  --c-cream-deep:    #f3ecdf;
  --c-gold:          #b8935a;
  --c-gold-soft:     #d4b483;
  --c-ink:           #2c2420;
  --c-ink-soft:      #4a3f38;
  --c-line:          #e5dcc9;
  --c-radius:        10px;

  /* 統一フォント（ゴシック） */
  --font-base:   "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W4",'メイリオ',"Osaka","ＭＳ Ｐゴシック",sans-serif;
  /* 専用フォント（明朝）：タイトル・引用・署名など、変化を付けたい箇所のみ */
  --font-accent: "Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
}


/* ============================================================
   PART 1 — 自動生成記事本文（.article-section）
   build_content_html.py の content_html に対応。
   対応：h2 h3 p / blockquote / p.emphasis-box / p.top-fuki.okada_s
   / div.point-box / ul ol / table / img.new_img / strong
   ※このテーマでは本文は .single_content 直下に出力され .jmh-article では
     包まれない。読み幅・地色は PART 3 の .single_content 側で担保する。
   ============================================================ */

/* 任意の外枠（テーマが本文を .jmh-article で包む場合のみ有効） */
.jmh-article{
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  background: var(--c-cream);
}

/* ---- 基本タイポグラフィ（セクション単位で必ず効くように） ---- */
.article-section{
  font-family: var(--font-base);
  color: var(--c-ink);
  line-height: 1.95;
  font-size: 16.5px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}
.article-section p{
  margin: 1.1rem 0;
}
.article-section strong{
  color: var(--c-burgundy);
  font-weight: 700;
}

/* ---- 見出し h2 ---- */
.article-section h2{
  font-size: 1.35rem!important;
  font-weight: 700!important;
  color: var(--c-burgundy-deep)!important;
  margin: 3rem 0 1.4rem!important;
  padding: 0 0 .6rem!important;
  border-bottom: 2px solid var(--c-burgundy)!important;
  position: relative!important;
  letter-spacing: 0.04em!important;
  line-height: 1.55!important;
}
.article-section h2::after{       /* ゴールドの下線アクセント */
  content: ""!important;
  position: absolute!important;
  left: 0; bottom: -2px!important;
  width: 60px; height: 2px!important;
  background: var(--c-gold)!important;
}

/* ---- 見出し h3 ---- */
.article-section h3{
  font-size: 1.32rem!important;
  font-weight: 700!important;
  color: var(--c-burgundy)!important;
  margin: 2.2rem 0 1rem!important;
  padding: 0 0 .4rem 0!important;
  border-bottom: 1px dashed var(--c-line)!important;
  line-height: 1.6!important;
}

/* ---- セクション先頭画像 ---- */
.article-section img.new_img{
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 1.8rem auto 2.0rem;
  border-radius: var(--c-radius);
  box-shadow: 0 2px 14px rgba(74,20,32,.08);
}

/* ---- 引用 QUOTE（白カード／装飾引用符は無し・専用フォント=明朝） ---- */
.article-section blockquote{
  background: #fff;
  margin: 1.8rem 0;
  padding: 1.1rem 1.9rem;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  box-shadow: 0 2px 14px rgba(74,20,32,.06);
  font-family: var(--font-bace);
	font-weight:bold;
}
.article-section blockquote p{
  margin: 0.2em 0 1em;
  line-height: 1.7;
	color:#666;
}
.article-section blockquote p:last-child{ margin-bottom: 0; }
.article-section blockquote::before {display:none;}
.article-section blockquote::after {display:none;}

/* ---- 長文の強調 EMPHASIS（41字以上）→ 上品な強調枠 ---- */
.article-section p.emphasis-box{
  margin: 1.8rem 0;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(to right, var(--c-cream-deep), #fff);
  border-left: 4px solid var(--c-gold);
  border-radius: 0 var(--c-radius) var(--c-radius) 0;
  color: var(--c-burgundy-deep);
  font-weight: 600;
  line-height: 1.9;
}

/* ---- 岡田の吹き出し EMPHASIS（11〜40字）= p.top-fuki.okada_s ----
   .top-fuki / .okada_s の本スタイルは既存サイト側CSSで定義済み（顔写真付き吹き出し）。
   ここでは重複定義しない。プレビューでは別途そのCSSを読み込んで確認する。 */

/* ---- ポイント枠 POINT（白カード＋ゴールド左帯） ---- */
.article-section div.point-box{
  margin: 1.8rem 0;
  padding: 1.4rem 1.5rem 1.2rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-left: 5px solid var(--c-gold);
  border-radius: var(--c-radius);
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
}
.article-section div.point-box > :first-child{ margin-top: 0; }
.article-section div.point-box > :last-child{ margin-bottom: 0; }

/* ---- 箇条書き UL（olと同様に淡い背景の箱） ---- */
.article-section ul{
  list-style: none;
  margin: 1.6rem 0;
  padding: 1.2rem 1.4rem 1.2rem 1.7rem;
  background: var(--c-cream-deep);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
}
.article-section ul > li{
  position: relative;
  margin: .55rem 0;
  padding-left: .9rem;
  line-height: 1.85;
}
.article-section ul > li:first-child{ margin-top: 0; }
.article-section ul > li:last-child{ margin-bottom: 0; }
.article-section ul > li::before{
  content: "";
  position: absolute;
  left: -.2rem; top: .8em;
  width: 7px; height: 7px;
  background: var(--c-gold);
  border-radius: 50%;
}

/* ---- 番号付き OL（淡い背景の箱で少し目立たせる） ---- */
.article-section ol{
  list-style: none;
  counter-reset: jmh-ol;
  margin: 1.6rem 0;
  padding: 1.2rem 1.4rem 1.2rem 1.4rem;
  background: var(--c-cream-deep);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
}
.article-section ol > li{
  position: relative;
  counter-increment: jmh-ol;
  margin: .55rem 0;
  padding-left: 2.2rem;
  line-height: 1.85;
}
.article-section ol > li:first-child{ margin-top: 0; }
.article-section ol > li:last-child{ margin-bottom: 0; }
.article-section ol > li::before{
  content: counter(jmh-ol);
  position: absolute;
  left: 0; top: .15em;
  width: 1.5rem; height: 1.5rem;
  background: var(--c-burgundy);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5rem;
  font-family: var(--font-base);
  font-size: .82rem;
  font-weight: 700;
}

/* ---- 入れ子のリスト（POINT枠・引用カードの中）は箱の重複を避ける ---- */
.article-section div.point-box ul,
.article-section div.point-box ol,
.article-section blockquote ul,
.article-section blockquote ol{
  background: transparent;
  border: none;
  margin: .8rem 0;
  padding: 0;
}
.article-section div.point-box ul,
.article-section blockquote ul{
  padding-left: 1.2rem;
}

/* ---- 表 TABLE ---- */
.article-section table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0;
  font-size: .96rem;
  background: #fff;
}
.article-section th,
.article-section td{
  border: 1px solid var(--c-line);
  padding: .6rem .8rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.article-section thead th{
  background: var(--c-burgundy);
  color: var(--c-cream);
  font-weight: 700;
  letter-spacing: .02em;
}
.article-section tbody tr:nth-child(even){ background: var(--c-cream-deep); }

/* ---- 画像提案（divモード時のプレースホルダ） ---- */
.article-section .image-suggestion{
  margin: 1.5rem 0;
  min-height: 120px;
  border: 1px dashed var(--c-gold-soft);
  border-radius: var(--c-radius);
  background: repeating-linear-gradient(45deg,#fbf8f1,#fbf8f1 10px,#f5efe2 10px,#f5efe2 20px);
}


/* ============================================================
   PART 2 — 体験談記事レイアウト（.jmh-case）
   読了率最大化デザイン。手組み記事用のラッパー＋BEMクラス。
   ※配色トークン・フォント変数は上の :root を共有。
   ※このテーマ内で使う場合、記事タイトルはテーマ側 .waku_title が出すため、
     .jmh-case 内の <h1> は重複する。PART 3 末尾の任意指定で非表示にできる。
   ============================================================ */

.jmh-case{
  font-family: var(--font-base);
  color: var(--c-ink);
  line-height: 1.95;
  font-size: 16.5px;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  background: var(--c-cream);
  letter-spacing: 0.02em;
}
.jmh-case *{ box-sizing: border-box; }

/* ===== 見出し h1（タイトル＝専用フォント・明朝） ===== */
.jmh-case > h1{
  font-family: var(--font-accent);
  font-size: 1.4rem!important;
  line-height: 1.6;
  font-weight: 700;
  color: var(--c-burgundy-deep);
  margin: 0 0 32px;
  padding: 28px 24px 26px;
  background: #fff;
  border-left: 6px solid var(--c-burgundy);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 12px rgba(107, 30, 46, 0.08);
  position: relative;
}
.jmh-case > h1::after{
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background: var(--c-gold);
  margin-top: 14px;
}

/* ===== 導入文 ===== */
.jmh-case__intro{
  background: linear-gradient(to bottom, #fff, var(--c-cream-deep));
  padding: 24px 26px;
  border-radius: 10px;
  margin-bottom: 40px;
  border: 1px solid var(--c-line);
  position: relative;
}
.jmh-case__intro::before{
  content: "▼ はじめに";
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-gold);
  letter-spacing: 0.15em;
  margin-bottom: 10px;
  font-family: var(--font-base);
}
.jmh-case__intro p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.95;
  color: var(--c-ink-soft);
}

/* ===== セクション見出し h2（共通） ===== */
.jmh-case h2{
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-burgundy-deep);
  margin: 48px 0 22px;
  padding: 0 0 14px;
  border-bottom: 2px solid var(--c-burgundy);
  position: relative;
  letter-spacing: 0.04em;
}
.jmh-case h2::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--c-gold);
}

/* ===== ケーススタディ ===== */
.jmh-case__case{ margin-bottom: 44px; }
.jmh-case__case-lead{
  font-size: 0.98rem;
  color: var(--c-ink-soft);
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--c-cream-deep);
  border-radius: 6px;
  line-height: 1.85;
}

/* ===== 体験談の引用（装飾引用符は無し・専用フォント=明朝） ===== */
.jmh-case__quote{
  background: #fff;
  margin: 0;
  padding: 28px 30px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  box-shadow: 0 2px 14px rgba(74, 20, 32, 0.06);
  font-family: var(--font-accent);
}
.jmh-case__quote p{
  margin: 0 0 1.2em;
  line-height: 2.0;
  color: var(--c-ink);
  font-size: 1rem;
  text-indent: 1em;
}
.jmh-case__quote p:last-child{ margin-bottom: 0; }

/* ===== 岡田の分析セクション ===== */
.jmh-case__analysis{ margin-bottom: 44px; }
.jmh-case__analysis-intro{
  font-size: 1rem;
  color: var(--c-ink-soft);
  margin: 0 0 28px;
  line-height: 1.9;
}

/* ===== 分析ポイント ===== */
.jmh-case__point{
  background: #fff;
  margin: 0 0 22px;
  padding: 24px 26px 22px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  border-left: 5px solid var(--c-gold);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jmh-case__point:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(107, 30, 46, 0.1);
}
.jmh-case__point-title{
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-burgundy);
  margin: 0 0 14px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--c-line);
}
.jmh-case__point-body{
  margin: 0 0 16px;
  font-size: 0.98rem;
  line-height: 1.95;
  color: var(--c-ink);
}
.jmh-case__lesson{
  margin: 0;
  padding: 14px 18px;
  background: linear-gradient(to right, var(--c-cream-deep), #fff);
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--c-burgundy-deep);
  font-weight: 500;
  position: relative;
  font-family: var(--font-base);
}
.jmh-case__lesson::before{
  content: "💡";
  margin-right: 6px;
}

/* ===== 2026年現在の視点 ===== */
.jmh-case__update{
  background: linear-gradient(135deg, #fff 0%, var(--c-cream-deep) 100%);
  padding: 28px 28px 26px;
  border-radius: 12px;
  margin-bottom: 44px;
  border: 1px solid var(--c-gold-soft);
  position: relative;
}
.jmh-case__update h2{ margin-top: 0; }
.jmh-case__update-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.jmh-case__update-list li{
  padding: 12px 0 12px 4px;
  border-bottom: 1px dashed var(--c-line);
  line-height: 1.85;
  font-size: 0.97rem;
  color: var(--c-ink);
}
.jmh-case__update-list li:last-child{ border-bottom: none; }

/* ===== まとめ ===== */
.jmh-case__summary{
  background: #fff;
  padding: 32px 30px 28px;
  border-radius: 12px;
  border-top: 4px solid var(--c-burgundy);
  box-shadow: 0 4px 20px rgba(107, 30, 46, 0.08);
  margin-bottom: 24px;
}
.jmh-case__summary h2{ margin-top: 0; }
.jmh-case__summary-list{
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  counter-reset: summary-counter;
}
.jmh-case__summary-list li{
  position: relative;
  padding: 12px 0 12px 36px;
  line-height: 1.85;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--c-line);
  counter-increment: summary-counter;
}
.jmh-case__summary-list li:last-child{ border-bottom: none; }
.jmh-case__summary-list li::before{
  content: counter(summary-counter);
  position: absolute;
  left: 0;
  top: 14px;
  width: 26px;
  height: 26px;
  background: var(--c-burgundy);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-base);
}

/* ===== アクション ===== */
.jmh-case__action{
  margin: 24px 0 20px;
  padding: 20px 22px;
  background: var(--c-cream-deep);
  border-radius: 8px;
  border-left: 4px solid var(--c-gold);
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--c-ink);
}
.jmh-case__action::before{
  content: "🌱 今日からできること";
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-burgundy);
  margin-bottom: 8px;
  letter-spacing: 0.1em;
  font-family: var(--font-base);
}

/* ===== CTA ===== */
.jmh-case__cta{
  margin: 24px 0 20px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--c-burgundy) 0%, var(--c-burgundy-deep) 100%);
  border-radius: 10px;
  color: var(--c-cream);
  font-size: 0.98rem;
  line-height: 1.85;
  text-align: center;
  box-shadow: 0 4px 16px rgba(74, 20, 32, 0.2);
}
.jmh-case__cta a{
  display: inline-block;
  margin: 6px 4px 0;
  padding: 8px 18px;
  background: var(--c-gold);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
  font-family: var(--font-base);
  font-size: 0.95rem;
}
.jmh-case__cta a:hover{
  background: var(--c-gold-soft);
  transform: translateY(-1px);
}

/* ===== 締めの言葉 ===== */
.jmh-case__closing{
  margin: 20px 0 0;
  padding: 18px 4px 0;
  border-top: 1px dashed var(--c-line);
  font-size: 0.96rem;
  line-height: 1.95;
  color: var(--c-ink-soft);
  font-style: normal;
  text-align: center;
}

/* ===== 署名（専用フォント=明朝） ===== */
.jmh-case__sign{
  text-align: right;
  margin: 28px 4px 0;
  font-size: 0.95rem;
  color: var(--c-burgundy);
  font-weight: 600;
  letter-spacing: 0.1em;
  font-family: var(--font-accent);
}
.jmh-case__sign::before{
  content: "── ";
  color: var(--c-gold);
}


/* ============================================================
   PART 3 — WordPress テーマ統合（single テンプレの構造に合わせる）
   テーマ構造:
     .section_waku(.coral) #gocchin
       └ .titlewaku > h1.waku_title         … 記事タイトル（テーマ側）
       └ .single_content
            └ .section_shita_a
            └ .kiji_thum > img.img_75        … アイキャッチ
            └ the_content()                   … .article-section / .jmh-case
   ※レイアウト(#wrapper / .left-column / .right-column / サイドバー)は
     テーマ既存CSSに委ね、ここでは触らない。
   ============================================================ */

/* ---- タイトル枠：coral をやめてパレットに合わせる ----
   ★テンプレ側の style="background-color:coral;" を削除推奨。
     残っていても下記 !important で上書きするが、外した方が綺麗。 */
.section_waku .titlewaku{
  background: var(--c-burgundy) !important;
  border-radius: 8px 8px 0 0;
  padding: 18px 22px;
}
.section_waku .waku_title{       /* タイトル＝専用フォント・明朝 */
  margin: 0;
  font-family: var(--font-accent);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--c-cream);
}

/* ---- 本文コンテナ：.jmh-article の代わりに .single_content で読み幅・地色を担保 ---- */
.section_waku .single_content{
  background: var(--c-cream);
  padding: 10px 20px 48px;
}
/* the_content() 直下の自動記事セクションを中央寄せ・読み幅760pxに */
.single_content > .article-section{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* 体験談記事は .jmh-case 自身が幅・余白を持つので二重地色だけ抑える */
.single_content > .jmh-case{
  background: transparent;
  padding-top: 4px;
}

/* ---- アイキャッチ画像：本文画像(new_img)と同じ質感に ---- */
.single_content .kiji_thum{
  text-align: center;
  margin: 0 auto 1.6rem;
}
.single_content .kiji_thum img,
.single_content .kiji_thum img.img_75{
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--c-radius);
  box-shadow: 0 2px 14px rgba(74,20,32,.08);
}

/* ---- 区切り装飾（用途不明なので無害な余白のみ） ---- */
.single_content .section_shita_a{ margin-bottom: .4rem; }

/* ---- 任意：このテーマでは記事タイトルが .waku_title に出るため、
        .jmh-case 内の <h1> を使う場合は重複する。重複を消すなら次を有効化。
.single_content .jmh-case > h1{ display: none; }
*/


/* ============================================================
   スマホ最適化（全系統まとめて）
   ============================================================ */
@media (max-width: 600px){

  /* ---- PART 1: .article-section ---- */
  .jmh-article{ padding: 16px 14px 50px; }
  .article-section{ font-size: 16px; line-height: 1.9; }
  .article-section h2{ font-size: 1.2rem!important; margin: 2.4rem 0 1.2rem!important; }
  .article-section h3{ font-size: 1.25rem!important; }
  .article-section blockquote{ padding: 1.4rem 1.3rem; }
  .article-section div.point-box{ padding: 1.2rem 1.1rem; }
  .article-section table{ font-size: .9rem; }
  .article-section th, .article-section td{ padding: .45rem .55rem; }

  /* ---- PART 2: .jmh-case ---- */
  .jmh-case{
    padding: 16px 14px 50px;
    font-size: 16px;
    line-height: 1.9;
  }
  .jmh-case > h1{
    font-size: 1.32rem;
    padding: 22px 18px 20px;
    line-height: 1.55;
  }
  .jmh-case h2{
    font-size: 1.18rem;
    margin: 40px 0 18px;
  }
  .jmh-case__intro,
  .jmh-case__quote,
  .jmh-case__point,
  .jmh-case__update,
  .jmh-case__summary{
    padding: 20px 18px;
  }
  .jmh-case__quote p{ font-size: 0.97rem; line-height: 1.95; }
  .jmh-case__point-title{ font-size: 1.02rem; }
  .jmh-case__cta{ padding: 20px 18px; }

  /* ---- PART 3: WordPress テーマ ---- */
  .section_waku .single_content{ padding: 8px 14px 40px; }
  .section_waku .waku_title{ font-size: 1.25rem; }
}