/* =========================================================================
 * 注文住宅ジャーナル（journal CPT）記事デザイン
 * 正本: marketing/journal_chumon/01_風致地区/houryuji_fuuchi_preview.html
 * schema基盤フェーズ3 / 2026-07-07 導入
 * 全セレクタは .journal-wrap 配下にスコープ（テーマ共通 page-system.css / style.css を汚さない）
 * ========================================================================= */

.journal-wrap{
  --j-ink:#23211c; --j-sub:#6b655c; --j-line:#e4ddd0; --j-washi:#faf8f2;
  --j-accent:#8a6a45; --j-accent-d:#6f5436; --j-ai:#33485c; --j-box:#f3eee3;
  background:var(--j-washi);
  color:var(--j-ink);
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  line-height:1.95;
  font-size:17px;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  padding:0 0 20px;
}
.journal-wrap *{box-sizing:border-box;}
.journal-wrap .j-inner{max-width:760px;margin:0 auto;padding:0 22px;}

/* パンくず */
.journal-wrap .j-bread{
  font-family:"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:12px;color:var(--j-sub);letter-spacing:.06em;
  padding:18px 0 0;
}
.journal-wrap .j-bread a{color:var(--j-sub);text-decoration:none;}
.journal-wrap .j-bread a:hover{color:var(--j-accent);text-decoration:underline;}
.journal-wrap .j-bread span.sep{margin:0 8px;color:var(--j-line);}

/* ヒーロー */
.journal-wrap .j-hero{padding:34px 0 10px;}
.journal-wrap .j-cat{
  font-family:"Hiragino Sans",sans-serif;font-size:11px;letter-spacing:.28em;
  color:var(--j-accent);font-weight:700;
}
.journal-wrap .j-hero h1{
  font-size:30px;line-height:1.5;margin:14px 0 18px;font-weight:600;
  letter-spacing:.01em;color:var(--j-ink);border:none;padding:0;
}
.journal-wrap .j-meta{
  font-family:"Hiragino Sans",sans-serif;font-size:12px;color:var(--j-sub);letter-spacing:.08em;
  border-top:1px solid var(--j-line);border-bottom:1px solid var(--j-line);padding:12px 0;
}
.journal-wrap .j-eyecatch{margin:26px 0 0;}
.journal-wrap .j-eyecatch img{width:100%;height:auto;border-radius:6px;display:block;}

/* 本文共通 */
.journal-wrap .j-body{padding-top:8px;}
.journal-wrap .j-body p{margin:16px 0;}
.journal-wrap .j-body a{color:var(--j-ai);}
.journal-wrap .j-body strong,
.journal-wrap .j-body .em{color:var(--j-accent-d);font-weight:600;}
.journal-wrap .j-lead{font-size:17.5px;margin:30px 0;}
.journal-wrap .j-lead .pull{
  display:block;border-left:3px solid var(--j-accent);background:#fff;
  padding:14px 18px;margin:18px 0;color:var(--j-accent-d);font-size:18px;
}

.journal-wrap .j-body h2{
  font-size:22px;font-weight:600;margin:56px 0 20px;padding-bottom:12px;
  border-bottom:1px solid var(--j-line);letter-spacing:.02em;color:var(--j-ink);
  background:none;
}
.journal-wrap .j-body h2 .n{
  color:var(--j-accent);font-family:"Hiragino Sans",sans-serif;font-size:14px;
  margin-right:10px;letter-spacing:.1em;
}
.journal-wrap .j-body h3{
  font-size:18px;font-weight:600;margin:34px 0 12px;color:var(--j-accent-d);
  border:none;padding:0;background:none;
}

/* 目次 */
.journal-wrap .j-toc{
  background:#fff;border:1px solid var(--j-line);border-radius:6px;
  padding:20px 24px;margin:26px 0;font-family:"Hiragino Sans",sans-serif;font-size:15px;
}
.journal-wrap .j-toc .t{font-size:12px;letter-spacing:.2em;color:var(--j-accent);font-weight:700;margin-bottom:10px;}
.journal-wrap .j-toc ol{margin:0;padding-left:1.4em;}
.journal-wrap .j-toc li{margin:7px 0;}
.journal-wrap .j-toc a{color:var(--j-ink);text-decoration:none;}
.journal-wrap .j-toc a:hover{color:var(--j-accent);text-decoration:underline;}

/* 結論・注記ボックス */
.journal-wrap .concl{
  background:var(--j-box);border:1px solid var(--j-line);border-radius:6px;
  padding:24px 26px;margin:30px 0;
}
.journal-wrap .concl .t{font-family:"Hiragino Sans",sans-serif;font-size:12px;letter-spacing:.2em;color:var(--j-accent);font-weight:700;margin-bottom:12px;}
.journal-wrap .concl ul{margin:0;padding-left:1.1em;}
.journal-wrap .concl li{margin:10px 0;}
.journal-wrap .concl p{margin:12px 0;}

.journal-wrap .note{
  background:#fff;border:1px dashed var(--j-accent);border-radius:6px;
  padding:14px 18px;margin:22px 0;font-size:14.5px;color:var(--j-accent-d);
  font-family:"Hiragino Sans",sans-serif;line-height:1.8;
}
.journal-wrap .calc{
  background:#fff;border:1px solid var(--j-line);border-radius:6px;padding:18px 20px;
  margin:20px 0;font-family:"Hiragino Sans",sans-serif;font-size:15px;line-height:1.9;
}
.journal-wrap .calc b{color:var(--j-accent-d);}

/* テーブル */
.journal-wrap .j-body table{
  width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;
  font-family:"Hiragino Sans",sans-serif;background:#fff;
}
.journal-wrap .j-body th,
.journal-wrap .j-body td{border:1px solid var(--j-line);padding:10px 12px;text-align:left;vertical-align:top;}
.journal-wrap .j-body th{background:var(--j-box);font-weight:600;letter-spacing:.04em;}
.journal-wrap .j-body td.k{background:#fbf9f4;font-weight:600;white-space:nowrap;}
.journal-wrap .j-tablewrap{overflow-x:auto;}

/* FAQ */
.journal-wrap .faq{border-top:1px solid var(--j-line);margin-top:8px;}
.journal-wrap .faq .q{font-weight:600;margin:22px 0 8px;font-size:17px;}
.journal-wrap .faq .q::before{content:"Q.";color:var(--j-accent);margin-right:8px;font-family:"Hiragino Sans",sans-serif;}
.journal-wrap .faq .a{color:var(--j-sub);font-size:16px;margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--j-line);}
.journal-wrap .faq .a::before{content:"A.";color:var(--j-accent-d);margin-right:8px;font-weight:600;}

/* CTA — 本サイトのデザイン言語に統一（生成り背景・角ゴ・金茶#B89B4E）。2026-07-07 ダーク版から刷新 */
.journal-wrap .cta{
  background:#f7f3ea;color:var(--j-ink);
  border:1px solid #e4ddd0;border-top:3px solid #B89B4E;border-radius:8px;
  padding:38px 32px;margin:48px 0;text-align:center;
}
.journal-wrap .cta h3{
  color:var(--j-ink);margin:0 0 16px;font-size:22px;line-height:1.6;border:none;padding:0;
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:700;
}
.journal-wrap .cta p{color:var(--j-sub);font-size:15px;margin:0 0 16px;font-family:"Hiragino Sans",sans-serif;text-align:left;line-height:1.95;}
.journal-wrap .cta .cta-note{
  background:#fff;border-left:3px solid #B89B4E;padding:14px 18px;margin:8px 0 24px;
  color:var(--j-ink);font-size:15px;text-align:left;line-height:1.9;font-family:"Hiragino Sans",sans-serif;
}
.journal-wrap .cta .btns{display:flex;flex-direction:column;gap:12px;max-width:480px;margin:0 auto;}
.journal-wrap .cta .btn{
  display:block;padding:16px;border-radius:6px;text-decoration:none;font-weight:700;
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-size:15px;letter-spacing:.04em;
  transition:opacity .2s,background .2s;
}
.journal-wrap .cta .btn.p{background:#B89B4E;color:#fff;}
.journal-wrap .cta .btn.p:hover{opacity:.88;}
.journal-wrap .cta .btn.s{background:#fff;color:#8a6a45;border:1px solid #cbb78a;}
.journal-wrap .cta .btn.s:hover{background:#faf6ec;}
.journal-wrap .cta .btn.l{background:#fff;color:#8a6a45;border:1px solid #cbb78a;}
.journal-wrap .cta .btn.l:hover{background:#faf6ec;}

/* 出典 */
.journal-wrap .src{
  font-size:12.5px;color:var(--j-sub);font-family:"Hiragino Sans",sans-serif;line-height:1.9;
  background:#fff;border:1px solid var(--j-line);border-radius:6px;padding:18px 20px;margin:24px 0;
}
.journal-wrap .src a{color:var(--j-ai);word-break:break-all;}
.journal-wrap .src b{color:var(--j-ink);}

/* アーカイブ一覧 */
.journal-wrap .j-archive{max-width:820px;margin:0 auto;padding:30px 22px;}
.journal-wrap .j-archive .j-card{
  display:block;background:#fff;border:1px solid var(--j-line);border-radius:6px;
  padding:22px 24px;margin:0 0 16px;text-decoration:none;color:var(--j-ink);transition:box-shadow .2s;
}
.journal-wrap .j-archive .j-card:hover{box-shadow:0 4px 16px rgba(35,33,28,.08);}
.journal-wrap .j-archive .j-card .c{font-family:"Hiragino Sans",sans-serif;font-size:11px;letter-spacing:.2em;color:var(--j-accent);font-weight:700;}
.journal-wrap .j-archive .j-card .ttl{font-size:19px;font-weight:600;margin:8px 0;line-height:1.5;}
.journal-wrap .j-archive .j-card .ds{font-size:14px;color:var(--j-sub);font-family:"Hiragino Sans",sans-serif;line-height:1.8;}
.journal-wrap .j-archive .j-card .dt{font-family:"Hiragino Sans",sans-serif;font-size:12px;color:var(--j-sub);margin-top:10px;}
.journal-wrap .j-archive .j-empty{text-align:center;color:var(--j-sub);padding:40px 0;font-family:"Hiragino Sans",sans-serif;}
.journal-wrap .j-archive .j-title{text-align:center;margin:10px 0 30px;}
.journal-wrap .j-archive .j-title .en{font-family:"Hiragino Sans",sans-serif;font-size:11px;letter-spacing:.3em;color:var(--j-accent);font-weight:700;}
.journal-wrap .j-archive .j-title h1{font-size:26px;font-weight:600;margin:8px 0 0;border:none;padding:0;}

@media(max-width:560px){
  .journal-wrap .j-hero h1{font-size:24px;}
  .journal-wrap{font-size:16px;}
}