/* hanbai-templates.css — 販売図面（A4横マイソク）5テンプレート描画スタイル
   すべてのセレクタを .flyer 配下にスコープ（本番hanbai.htmlの他UIと衝突回避）。
   図面ルート要素： <div class="flyer tplX"> 。
   tpl1=紺金 / tpl2=信頼ブルー / tpl3=温・暖色 / tpl4=余白・上質 / tpl5=インパクト大型価格
   tpl1/2/3/5 は共通骨格（standard）＋テーマ変数差し替え。tpl4 だけ別マークアップ（minimal）。 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&family=Noto+Sans+JP:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

/* ===== ルート（A4横 1100×778） ===== */
.flyer {
  width:1100px; height:778px; background:var(--bg,#fff); position:relative; overflow:hidden;
  box-sizing:border-box; color:var(--ink,#14213d);
  font-family:'Noto Sans JP',sans-serif;
  /* デフォルト（tpl2相当）。各テンプレで上書き */
  --primary:#1a5f8a; --primary2:#114760; --accent:#e08a2e; --ink:#15384a;
  --bg:#ffffff; --soft:#f1f6fa; --line:#dde8ef;
  --hero1:#3f7da3; --hero2:#15384a; --price-size:58px;
  --head-font:'Noto Sans JP',sans-serif; --price-font:'Noto Sans JP',sans-serif;
}
.flyer *, .flyer *::before, .flyer *::after { margin:0; padding:0; box-sizing:border-box; }

/* ===== テンプレ別テーマ変数 ===== */
/* ① 紺金（flyer-navy-gold） */
.flyer.tpl1 {
  --primary:#223670; --primary2:#1a2a55; --accent:#bf9b30; --ink:#14213d;
  --bg:#ffffff; --soft:#f7f8fb; --line:#e4e7ef;
  --hero1:#3a4a6b; --hero2:#16203f; --price-size:58px;
  --head-font:'Noto Serif JP',serif; --price-font:'Noto Serif JP',serif;
}
/* ② 信頼ブルー */
.flyer.tpl2 {
  --primary:#1a5f8a; --primary2:#114760; --accent:#e08a2e; --ink:#15384a;
  --bg:#ffffff; --soft:#f1f6fa; --line:#dde8ef;
  --hero1:#3f7da3; --hero2:#15384a; --price-size:58px;
  --head-font:'Noto Sans JP',sans-serif; --price-font:'Noto Sans JP',sans-serif;
}
/* ③ 温・暖色（丸ゴシック） */
.flyer.tpl3 {
  --primary:#c2671a; --primary2:#9c4f12; --accent:#2f7d52; --ink:#5a3a1e;
  --bg:#fbf5ec; --soft:#fff8ef; --line:#ecdcc8;
  --hero1:#d98a3e; --hero2:#8a4d18; --price-size:58px;
  --head-font:'Zen Maru Gothic',sans-serif; --price-font:'Zen Maru Gothic',sans-serif;
}
/* ⑤ インパクト大型価格（太ゴシック・特大価格） */
.flyer.tpl5 {
  --primary:#14181d; --primary2:#0a0d10; --accent:#d12f2f; --ink:#14181d;
  --bg:#ffffff; --soft:#f4f5f6; --line:#dddfe2;
  --hero1:#3a4048; --hero2:#14181d; --price-size:84px;
  --head-font:'Noto Sans JP',sans-serif; --price-font:'Noto Sans JP',sans-serif;
}

/* ===== 標準テンプレ(①に統合)の色ムード＝旧①②③⑤＋緑を色セレクトで切替 ===== */
.flyer.tpl1.mood-shinrai { /* 信頼ブルー（既定） */
  --primary:#1a5f8a; --primary2:#114760; --accent:#e08a2e; --ink:#15384a;
  --bg:#ffffff; --soft:#f1f6fa; --line:#dde8ef; --hero1:#3f7da3; --hero2:#15384a;
  --price-size:58px; --head-font:'Noto Sans JP',sans-serif; --price-font:'Noto Sans JP',sans-serif; }
.flyer.tpl1.mood-ninshin { /* 高級紺金 */
  --primary:#223670; --primary2:#1a2a55; --accent:#bf9b30; --ink:#14213d;
  --bg:#ffffff; --soft:#f7f8fb; --line:#e4e7ef; --hero1:#3a4a6b; --hero2:#16203f;
  --price-size:58px; --head-font:'Noto Serif JP',serif; --price-font:'Noto Serif JP',serif; }
.flyer.tpl1.mood-honwaka { /* 温暖色 */
  --primary:#c2671a; --primary2:#9c4f12; --accent:#2f7d52; --ink:#5a3a1e;
  --bg:#fbf5ec; --soft:#fff8ef; --line:#ecdcc8; --hero1:#d98a3e; --hero2:#8a4d18;
  --price-size:58px; --head-font:'Zen Maru Gothic','Noto Sans JP',sans-serif; --price-font:'Zen Maru Gothic','Noto Sans JP',sans-serif; }
.flyer.tpl1.mood-impact { /* 黒×赤・特大価格 */
  --primary:#14181d; --primary2:#0a0d10; --accent:#d12f2f; --ink:#14181d;
  --bg:#ffffff; --soft:#f4f5f6; --line:#dddfe2; --hero1:#3a4048; --hero2:#14181d;
  --price-size:80px; --head-font:'Noto Sans JP',sans-serif; --price-font:'Noto Sans JP',sans-serif; }
.flyer.tpl1.mood-anshin { /* 安心グリーン */
  --primary:#1f6b4f; --primary2:#16503b; --accent:#d35400; --ink:#1d2b25;
  --bg:#ffffff; --soft:#eef5f1; --line:#cfe0d7; --hero1:#3f8a6b; --hero2:#1d2b25;
  --price-size:58px; --head-font:'Noto Sans JP',sans-serif; --price-font:'Noto Sans JP',sans-serif; }

/* =====================================================================
   STANDARD レイアウト（tpl1/2/3/5）
   ===================================================================== */
.flyer.tpl1, .flyer.tpl2, .flyer.tpl3, .flyer.tpl5 {
  display:grid; grid-template-rows:auto 1fr 132px;
}

/* ---- ヘッダー ---- */
.flyer .head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; padding:20px 26px 12px; gap:16px;
               align-items:start; border-top:6px solid var(--primary); }
/* ここがイチオシ＝ヘッダー中央（見出し横）にコンパクト表示 */
.flyer .head .points { margin-top:0; align-self:stretch; background:var(--soft);
  border-left:4px solid var(--accent); border-radius:5px; padding:7px 12px; max-width:360px; }
.flyer .head .points h4 { font-size:11px; color:var(--accent); font-weight:900; margin-bottom:3px; letter-spacing:.04em; }
.flyer .head .point { display:flex; gap:6px; align-items:flex-start; font-size:11px; line-height:1.35; margin-bottom:2px; color:var(--ink); }
.flyer .head .point .no { color:var(--primary); font-family:var(--head-font); font-weight:900; }
/* 備考＝間取り図の下（右下） */
.flyer .detail .memo { margin-top:8px; border:1px solid var(--line); border-radius:4px;
  padding:8px 11px; background:var(--soft); }
.flyer .detail .memo h4 { font-size:12px; color:var(--primary); font-weight:900; margin-bottom:4px; letter-spacing:.04em; }
.flyer .detail .memo-b { font-size:11.5px; line-height:1.7; color:var(--ink); }
.flyer .brandline { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.flyer .brandmark { width:30px; height:30px; border:2px solid var(--accent); display:flex;
                    align-items:center; justify-content:center; color:var(--primary);
                    font-weight:900; font-family:var(--head-font); }
.flyer .brandname { font-size:13px; letter-spacing:.16em; color:var(--primary); font-weight:700; }
.flyer .catch { font-family:var(--head-font); font-weight:900; font-size:30px; line-height:1.28; color:var(--ink); word-break:keep-all; overflow-wrap:anywhere; }
.flyer .catch .em { color:var(--primary); border-bottom:3px solid var(--accent); padding-bottom:2px; }
.flyer .pricewrap { text-align:right; white-space:nowrap; }
.flyer .price-label { font-size:12px; color:#8a93a0; letter-spacing:.1em; }
.flyer .price { font-family:var(--price-font); font-weight:900; font-size:var(--price-size);
                color:var(--primary); line-height:1; letter-spacing:-.01em; }
.flyer .price .man { font-size:.5em; }
.flyer .monthly { font-size:12px; color:#6b7480; margin-top:4px; }
.flyer .badges { grid-column:1/3; display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.flyer .badge { font-size:11px; font-weight:700; padding:4px 11px; border-radius:3px; letter-spacing:.04em; }
.flyer .b-1 { background:var(--primary); color:#fff; }
.flyer .b-2 { background:var(--accent); color:#fff; }
.flyer .b-3 { border:1px solid var(--primary); color:var(--primary); }

/* ---- 本文：左 写真 / 右 詳細 ---- */
.flyer .body { display:grid; grid-template-columns:1.5fr 1fr; gap:14px; padding:2px 26px 12px; min-height:0; }
.flyer .photos { display:grid; grid-template-rows:1fr 118px; gap:8px; min-height:0; }
.flyer .hero { border-radius:4px; position:relative; overflow:hidden;
               background:linear-gradient(135deg,var(--hero1),var(--hero2)); display:flex; align-items:flex-end; }
.flyer .hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 写真は背景画像方式（html2canvasがobject-fitを無視して引き伸ばす不具合の回避） */
.flyer .photofill { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.flyer .photofill.contain { background-size:contain; background-color:#fff; }
.flyer .m-hero, .flyer .floortile { position:relative; overflow:hidden; }
.flyer .hero .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                   color:rgba(255,255,255,.7); font-size:13px; letter-spacing:.2em; text-align:center; padding:8px; }
.flyer .hero .cap { position:relative; margin:10px; background:rgba(0,0,0,.5); color:#fff; font-size:12px;
                    padding:4px 10px; border-left:3px solid var(--accent); max-width:80%; }
.flyer .subs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.flyer .sub { border-radius:4px; background:linear-gradient(135deg,var(--hero1),var(--hero2));
              position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.flyer .sub img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.flyer .sub .lbl { color:rgba(255,255,255,.75); font-size:10px; letter-spacing:.15em; }
.flyer .sub span { position:absolute; bottom:4px; left:6px; color:#fff; font-size:10px;
                   background:rgba(0,0,0,.4); padding:1px 6px; border-radius:2px; }

.flyer .detail { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.flyer .spec { width:100%; border-collapse:collapse; font-size:11px; }
.flyer .spec th { background:var(--primary); color:#fff; text-align:left; padding:2.5px 7px; width:34%;
                  font-weight:500; border:1px solid var(--primary); line-height:1.35; }
.flyer .spec td { padding:2.5px 7px; border:1px solid var(--line); color:var(--ink); line-height:1.35; }
.flyer .floor { margin-top:8px; flex:1; border:1px solid var(--line); border-radius:4px; background:var(--soft);
                position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
                color:#a6afba; font-size:12px; letter-spacing:.2em; min-height:88px; }
.flyer .floor img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
/* 間取り図＋所在地（下部・最大2枠。間取り無→所在地表示） */
.flyer .floor-row { margin-top:8px; flex:0 1 auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; height:150px; min-height:84px; }
.flyer .floor-row.one { grid-template-columns:1fr; }
.flyer .fbox { position:relative; border:1px solid var(--line); border-radius:4px; background:var(--soft);
               overflow:hidden; display:flex; align-items:center; justify-content:center; }
.flyer .fbox .rl { position:absolute; left:0; top:0; z-index:1; background:var(--primary); color:#fff;
                   font-size:10px; padding:2px 8px; border-bottom-right-radius:4px; letter-spacing:0; }
.flyer .fbox .fph { color:#a6afba; font-size:12px; letter-spacing:.18em; }
.flyer .points { margin-top:8px; }
.flyer .points h4 { font-size:12px; color:var(--accent); font-weight:900; margin-bottom:5px; letter-spacing:.05em; }
.flyer .point { display:flex; gap:7px; align-items:flex-start; font-size:11.5px; margin-bottom:3px; }
.flyer .point .no { color:var(--primary); font-family:var(--head-font); font-weight:900; }

/* ---- 帯（会社情報 / 売主募集PR / QR） ---- */
.flyer .band { background:var(--primary); color:#fff; display:grid; grid-template-columns:1.35fr 1fr 150px; align-items:stretch; }
.flyer .band .co { padding:12px 22px; border-right:1px solid rgba(255,255,255,.18); }
.flyer .co .cn { font-family:var(--head-font); font-weight:700; font-size:14px; }
.flyer .co .ad { font-size:10.5px; color:rgba(255,255,255,.8); margin-top:3px; line-height:1.5; }
.flyer .co .lic { font-size:10px; color:rgba(255,255,255,.7); margin-top:2px; }
.flyer .co .tanto { margin-top:7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.flyer .co .nm { font-size:12px; }
.flyer .co .tel { font-size:20px; font-weight:900; color:var(--accent); font-family:var(--head-font); }
.flyer .band .pr { padding:11px 16px; background:var(--primary2); display:flex; flex-direction:column; justify-content:center; }
.flyer .pr .pr-h { font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.05em; margin-bottom:3px; }
.flyer .pr .pr-h::before { content:'▎'; }
.flyer .pr .pr-b { font-size:10.5px; line-height:1.55; color:rgba(255,255,255,.92); }
.flyer .band .qr { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:#fff; color:var(--primary); }
.flyer .band .qr img { width:74px; height:74px; display:block; }
/* フッター右端の会社ロゴ（QRの置き換え・2026-08-19）。
   ★縦横比は width/height:auto のまま max-* だけで収める＝引き伸ばさない。
   ★max-* が枠(150px)より小さいので、はみ出さない。 */
.flyer .band .qr img.brandlogo {
  width:auto; height:auto; max-width:126px; max-height:84px;
  object-fit:contain; display:block; }
.flyer .qrbox { width:74px; height:74px; border:3px solid var(--primary);
   background:linear-gradient(90deg,var(--primary) 25%,transparent 0) 0 0/14px 14px,
             linear-gradient(var(--primary) 25%,transparent 0) 0 0/14px 14px, #fff; }
.flyer .qr .qr-empty { width:74px; height:74px; border:2px dashed #c8c8c8; background:#fafafa;
   display:flex; align-items:center; justify-content:center; text-align:center;
   color:#aaa; font-size:9px; line-height:1.3; padding:4px; }
.flyer .qr .cta { font-size:11px; font-weight:900; color:var(--primary); }

/* =====================================================================
   MINIMAL レイアウト（tpl4 = 余白・上質）— flyer-minimal 構造
   ===================================================================== */
.flyer.tpl4 {
  display:flex; flex-direction:column; color:#1c1c1c; background:#fff;
  --gold:#b08d3e; --ink:#1c1c1c;
  font-family:'Noto Sans JP',sans-serif;
}
.flyer.tpl4 .topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 34px 12px; }
.flyer.tpl4 .tb-name { font-size:13px; letter-spacing:.34em; color:#1c1c1c; font-weight:500; }
.flyer.tpl4 .tb-sub { font-size:10px; letter-spacing:.3em; color:#9a8a5e; }
.flyer.tpl4 .rule-gold { height:1px; background:var(--gold); margin:0 34px; opacity:.6; }

.flyer.tpl4 .m-hero { position:relative; height:404px; margin:14px 34px 0; overflow:hidden;
        background:linear-gradient(120deg,#6c7787,#3a434f 55%,#222a33); }
.flyer.tpl4 .m-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.flyer.tpl4 .m-hero .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        color:rgba(255,255,255,.65); font-size:13px; letter-spacing:.28em; text-align:center; padding:10px; }
.flyer.tpl4 .m-hero .overlay { position:absolute; inset:0;
        background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 45%,transparent 70%); }
.flyer.tpl4 .m-hero .txt { position:absolute; left:34px; bottom:30px; right:34px; color:#fff; }
.flyer.tpl4 .m-hero .eyebrow { font-size:12px; letter-spacing:.3em; color:#e9dcb6; margin-bottom:10px; }
.flyer.tpl4 .m-hero .catch { font-family:'Noto Serif JP',serif; font-weight:700; font-size:34px; line-height:1.35;
        text-shadow:0 2px 18px rgba(0,0,0,.4); }
.flyer.tpl4 .m-hero .priceline { margin-top:16px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.flyer.tpl4 .m-hero .price { font-family:'Noto Serif JP',serif; font-weight:900; font-size:52px; line-height:1; }
.flyer.tpl4 .m-hero .price .man { font-size:.5em; font-weight:700; }
.flyer.tpl4 .m-hero .monthly { font-size:12px; color:#e6e6e6; font-weight:300; }
.flyer.tpl4 .m-hero .badges { position:absolute; right:24px; top:22px; display:flex; flex-direction:column; gap:7px; align-items:flex-end; }
.flyer.tpl4 .m-hero .badge { font-size:11px; letter-spacing:.08em; padding:5px 12px; background:rgba(255,255,255,.92); color:#1c1c1c; }
.flyer.tpl4 .m-hero .badge.gold { background:var(--gold); color:#fff; }

.flyer.tpl4 .lower { flex:1; display:grid; grid-template-columns:300px 1fr; gap:26px; padding:18px 34px 0; min-height:0; }
.flyer.tpl4 .subs { display:grid; grid-template-rows:repeat(3,1fr); gap:8px; }
.flyer.tpl4 .sub { background:linear-gradient(120deg,#6c7787,#333b45); position:relative; overflow:hidden; }
.flyer.tpl4 .sub img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.flyer.tpl4 .sub span { position:absolute; left:8px; bottom:6px; color:#fff; font-size:10px; letter-spacing:.12em;
        background:rgba(0,0,0,.4); padding:1px 7px; }
.flyer.tpl4 .info { min-width:0; }
.flyer.tpl4 .spec { width:100%; border-collapse:collapse; font-size:12px; font-weight:300; }
.flyer.tpl4 .spec tr { border-bottom:1px solid #ececec; }
.flyer.tpl4 .spec th { text-align:left; color:#9a8a5e; font-weight:500; padding:5px 10px 5px 0; width:30%;
        letter-spacing:.04em; white-space:nowrap; vertical-align:top; }
.flyer.tpl4 .spec td { padding:5px 0; color:#1c1c1c; }
.flyer.tpl4 .floortile { margin-top:12px; border:1px solid #ececec; background:#fafafa; position:relative;
        overflow:hidden; min-height:96px; display:flex; align-items:center; justify-content:center;
        color:#b5ab8e; font-size:11px; letter-spacing:.2em; }
.flyer.tpl4 .floortile img { width:100%; height:100%; object-fit:contain; max-height:140px; }
.flyer.tpl4 .pts { margin-top:14px; display:flex; gap:22px; }
.flyer.tpl4 .pt { flex:1; }
.flyer.tpl4 .pt .n { font-family:'Noto Serif JP',serif; color:var(--gold); font-size:18px; font-weight:900; }
.flyer.tpl4 .pt .t { font-size:11px; line-height:1.5; margin-top:3px; color:#333; font-weight:300; }

.flyer.tpl4 .foot { margin:16px 34px 18px; border-top:2px solid var(--gold); padding-top:12px;
        display:grid; grid-template-columns:1.4fr 1fr 120px; gap:20px; align-items:center; }
.flyer.tpl4 .co .cn { font-family:'Noto Serif JP',serif; font-weight:700; font-size:14px; }
.flyer.tpl4 .co .ad { font-size:10px; color:#777; margin-top:3px; line-height:1.5; }
.flyer.tpl4 .co .tel { font-size:18px; font-weight:900; font-family:'Noto Serif JP',serif; color:#1c1c1c; margin-top:5px; }
.flyer.tpl4 .co .tel small { font-size:11px; font-weight:400; color:#777; }
.flyer.tpl4 .pr { border-left:1px solid #e6e6e6; padding-left:18px; }
.flyer.tpl4 .pr .h { font-size:11px; letter-spacing:.1em; color:var(--gold); font-weight:700; margin-bottom:3px; }
.flyer.tpl4 .pr .b { font-size:10px; line-height:1.55; color:#555; font-weight:300; }
.flyer.tpl4 .qr { text-align:center; }
.flyer.tpl4 .qr img { width:68px; height:68px; margin:0 auto 4px; display:block; }
.flyer.tpl4 .qr img.brandlogo {
  width:auto; height:auto; max-width:120px; max-height:80px;
  object-fit:contain; margin:0 auto; display:block; }
.flyer.tpl4 .qrbox { width:68px; height:68px; margin:0 auto 4px; border:2px solid #1c1c1c;
    background:linear-gradient(90deg,#1c1c1c 25%,transparent 0) 0 0/13px 13px,
              linear-gradient(#1c1c1c 25%,transparent 0) 0 0/13px 13px,#fff; }
.flyer.tpl4 .qr .qr-empty { width:68px; height:68px; margin:0 auto 4px; border:2px dashed #c8c8c8; background:#fafafa;
    display:flex; align-items:center; justify-content:center; text-align:center; color:#aaa; font-size:8px; line-height:1.3; padding:3px; }
.flyer.tpl4 .qr .cta { font-size:10px; font-weight:700; letter-spacing:.05em; }

/* =====================================================================
   GRID8 レイアウト（⑥ tpl6 紺 / ⑦ tpl7 緑）— flyer-8photo-v2 構造
   8枚写真2×4グリッド＋右情報＋間取り/地図□＋帯。
   ===================================================================== */
.flyer.tpl6, .flyer.tpl7 {
  display:grid; grid-template-rows:auto 1fr 96px; color:var(--g-ink);
  font-family:'Noto Sans JP',sans-serif;
  --g-primary:#1c3d5a; --g-accent:#c0392b; --g-ink:#222b35;
  --g-soft:#eef2f6; --g-line:#cdd6df; --g-chip:#eaf0f6; --g-chipt:#1c3d5a;
}
.flyer.tpl7 {
  --g-primary:#1f6b4f; --g-accent:#d35400; --g-soft:#eef5f1;
  --g-line:#cfe0d7; --g-chip:#e7f1ec; --g-chipt:#1f6b4f;
}
/* ヘッダー帯 */
.flyer.tpl6 .hd, .flyer.tpl7 .hd {
  display:flex; align-items:center; gap:12px; background:var(--g-primary); color:#fff; padding:11px 20px; }
.flyer.tpl6 .hd .b1, .flyer.tpl7 .hd .b1 {
  background:rgba(255,255,255,.2); font-size:12px; font-weight:700; padding:3px 10px; border-radius:3px; white-space:nowrap; }
.flyer.tpl6 .hd .ti, .flyer.tpl7 .hd .ti {
  font-family:'Noto Serif JP',serif; font-weight:900; font-size:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flyer.tpl6 .hd .brand, .flyer.tpl7 .hd .brand {
  margin-left:auto; font-size:11px; letter-spacing:.14em; opacity:.92; white-space:nowrap; }
/* 本文：左8枚グリッド / 右 情報 */
.flyer.tpl6 .bd, .flyer.tpl7 .bd {
  display:grid; grid-template-columns:1.28fr 1fr; gap:14px; padding:12px 16px; min-height:0; }
.flyer.tpl6 .grid8, .flyer.tpl7 .grid8 {
  display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,1fr); gap:4px; min-height:0; }
/* ⑥=6枚（2列×3段） */
.flyer.tpl6 .grid8.grid6 { grid-template-rows:repeat(3,1fr); }
/* ⑧カスタム=4枚（2列×2段・大きく） */
.flyer.tpl6 .grid8.grid4, .flyer.tpl7 .grid8.grid4 { grid-template-rows:repeat(2,1fr); }
.flyer.tpl6 .cell, .flyer.tpl7 .cell {
  position:relative; border-radius:3px; overflow:hidden;
  background:linear-gradient(135deg,#62748a,#36434f);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-size:11px; }
.flyer.tpl6 .cell span, .flyer.tpl7 .cell span {
  position:absolute; left:5px; bottom:4px; background:rgba(0,0,0,.45); color:#fff; font-size:9.5px;
  padding:1px 6px; border-radius:2px; z-index:1; }
/* 写真は背景画像方式（html2canvas対策） */
.flyer.tpl6 .photofill, .flyer.tpl7 .photofill {
  position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.flyer.tpl6 .photofill.contain, .flyer.tpl7 .photofill.contain {
  background-size:contain; background-color:#fff; }
/* 右：物件情報 */
.flyer.tpl6 .right, .flyer.tpl7 .right { display:flex; flex-direction:column; min-height:0; }
.flyer.tpl6 .catch, .flyer.tpl7 .catch {
  font-size:13px; font-weight:700; color:var(--g-primary); margin-bottom:3px; }
.flyer.tpl6 .price, .flyer.tpl7 .price {
  line-height:1; margin-bottom:7px; border-bottom:2px solid var(--g-line); padding-bottom:7px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.flyer.tpl6 .price .pl, .flyer.tpl7 .price .pl {
  font-size:11px; color:#7a8390; align-self:flex-end; margin-bottom:6px; }
.flyer.tpl6 .price .pv, .flyer.tpl7 .price .pv {
  font-family:'Noto Serif JP',serif; font-weight:900; font-size:62px; color:var(--g-accent); }
.flyer.tpl6 .price .pv .man, .flyer.tpl7 .price .pv .man { font-size:28px; }
.flyer.tpl6 .price .mm, .flyer.tpl7 .price .mm {
  font-size:10.5px; color:#6b7480; align-self:flex-end; margin-bottom:6px; }
/* 物件情報テーブル（項目が増えたので少し詰める） */
.flyer.tpl6 .spec, .flyer.tpl7 .spec { width:100%; border-collapse:collapse; font-size:11px; }
.flyer.tpl6 .spec th, .flyer.tpl7 .spec th {
  background:var(--g-primary); color:#fff; text-align:left; padding:2.5px 8px; width:32%;
  font-weight:500; border:1px solid var(--g-primary); }
.flyer.tpl6 .spec td, .flyer.tpl7 .spec td {
  padding:2.5px 8px; border:1px solid var(--g-line); color:var(--g-ink); }
/* 備考（⑥右列） */
.flyer.tpl6 .memo, .flyer.tpl7 .memo { margin-top:6px; }
.flyer.tpl6 .memo h4, .flyer.tpl7 .memo h4 {
  font-size:11px; color:var(--g-primary); font-weight:900; margin-bottom:2px; }
.flyer.tpl6 .memo-b, .flyer.tpl7 .memo-b { font-size:10.5px; line-height:1.5; color:var(--g-ink); }
.flyer.tpl6 .pts, .flyer.tpl7 .pts { margin-top:7px; }
.flyer.tpl6 .pts h4, .flyer.tpl7 .pts h4 {
  font-size:11px; color:var(--g-accent); font-weight:900; margin-bottom:2px; }
.flyer.tpl6 .pts div, .flyer.tpl7 .pts div { font-size:10.5px; line-height:1.4; }
.flyer.tpl6 .feat, .flyer.tpl7 .feat { margin-top:6px; }
.flyer.tpl6 .feat h4, .flyer.tpl7 .feat h4 {
  font-size:11px; color:var(--g-primary); font-weight:900; margin-bottom:3px; }
.flyer.tpl6 .chips, .flyer.tpl7 .chips { display:flex; flex-wrap:wrap; gap:4px; }
.flyer.tpl6 .chip, .flyer.tpl7 .chip {
  background:var(--g-chip); color:var(--g-chipt); font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:11px; border:1px solid var(--g-line); }
/* 間取り＋地図：右列の残り高さに自動フィット（はみ出し＝帯へのめり込み防止） */
.flyer.tpl6 .rb, .flyer.tpl7 .rb {
  margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  flex:1 1 auto; min-height:120px; max-height:210px; }
/* 間取り無し時：地図を全幅で大きく */
.flyer.tpl6 .rb.single, .flyer.tpl7 .rb.single { grid-template-columns:1fr; }
.flyer.tpl6 .box, .flyer.tpl7 .box {
  border:1px solid var(--g-line); border-radius:3px; background:var(--g-soft); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#9aa6b2; font-size:11px; letter-spacing:.1em; text-align:center; }
.flyer.tpl6 .box .rl, .flyer.tpl7 .box .rl {
  position:absolute; left:0; top:0; background:var(--g-primary); color:#fff; font-size:10px;
  padding:2px 8px; border-bottom-right-radius:4px; z-index:1; letter-spacing:0; }
.flyer.tpl6 .box .ctatxt, .flyer.tpl7 .box .ctatxt {
  padding:6px 8px; font-size:10.5px; line-height:1.6; letter-spacing:0; color:#8a96a3; }
.flyer.tpl6 .box.cta, .flyer.tpl7 .box.cta { background:var(--g-soft); }
/* 下帯 */
.flyer.tpl6 .band, .flyer.tpl7 .band {
  background:var(--g-primary); color:#fff; display:grid; grid-template-columns:1.5fr 1fr 110px; }
.flyer.tpl6 .band .co, .flyer.tpl7 .band .co {
  padding:8px 18px; border-right:1px solid rgba(255,255,255,.18); }
.flyer.tpl6 .co .cn, .flyer.tpl7 .co .cn {
  font-family:'Noto Serif JP',serif; font-weight:700; font-size:13px; }
.flyer.tpl6 .co .ln, .flyer.tpl7 .co .ln { font-size:10px; color:#d2dbe6; margin-top:2px; line-height:1.5; }
.flyer.tpl6 .co .tn, .flyer.tpl7 .co .tn { font-size:11px; margin-top:3px; line-height:1.5; }
.flyer.tpl6 .band .pr, .flyer.tpl7 .band .pr {
  padding:8px 14px; background:rgba(0,0,0,.16); display:flex; flex-direction:column; justify-content:center; }
.flyer.tpl6 .pr .h, .flyer.tpl7 .pr .h {
  font-size:10px; font-weight:700; color:#ffd98a; margin-bottom:2px; }
.flyer.tpl6 .pr .x, .flyer.tpl7 .pr .x { font-size:10px; line-height:1.4; color:#eef2f8; }
.flyer.tpl6 .band .qr, .flyer.tpl7 .band .qr {
  background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.flyer.tpl6 .band .qr img, .flyer.tpl7 .band .qr img { width:58px; height:58px; display:block; }
.flyer.tpl6 .band .qr img.brandlogo, .flyer.tpl7 .band .qr img.brandlogo {
  width:auto; height:auto; max-width:92px; max-height:62px;
  object-fit:contain; display:block; }
.flyer.tpl6 .qrbox, .flyer.tpl7 .qrbox {
  width:58px; height:58px; border:3px solid var(--g-primary);
  background:linear-gradient(90deg,var(--g-primary) 25%,transparent 0) 0 0/11px 11px,
            linear-gradient(var(--g-primary) 25%,transparent 0) 0 0/11px 11px,#fff; }
.flyer.tpl6 .qr .c, .flyer.tpl7 .qr .c { font-size:10px; font-weight:900; color:var(--g-primary); }

/* =====================================================================
   COLLAGE 写真配置（tpl6/tpl7）— メイン大＋自動サブ
   mockups/flyer-collage.html を .flyer.tpl6/.tpl7 スコープへ移植
   ===================================================================== */
.flyer.tpl6 .pcol, .flyer.tpl7 .pcol {
  display:grid; grid-template-rows:1.25fr 1fr; gap:8px; min-height:0; }
/* サブが少ない（1〜2枚）時はメインを大きく */
.flyer.tpl6 .pcol.few, .flyer.tpl7 .pcol.few { grid-template-rows:1.5fr 1fr; }
/* サブ無し（メインのみ）はメイン全面 */
.flyer.tpl6 .pcol.solo, .flyer.tpl7 .pcol.solo { grid-template-rows:1fr; }
/* 1枚＋地図/間取り：メインを横長にし下にボックス（正方形セルで横長写真が縦長に切れるのを防ぐ） */
.flyer.tpl6 .pcol.solo.withlower, .flyer.tpl7 .pcol.solo.withlower { grid-template-rows:1.18fr 1fr; }
.flyer.tpl6 .main, .flyer.tpl7 .main {
  position:relative; border-radius:4px; overflow:hidden;
  margin:0; padding:0; max-width:none;  /* 編集画面の汎用 .main(max-width/margin/padding) の混入を打ち消す */
  background:linear-gradient(135deg,#62748a,#36434f); }
.flyer.tpl6 .subs, .flyer.tpl7 .subs {
  display:grid; gap:8px; min-height:0; grid-auto-rows:1fr; }
/* サブ列数（JSが .c1〜.c4 を付与） */
.flyer.tpl6 .subs.c1, .flyer.tpl7 .subs.c1 { grid-template-columns:1fr; }
.flyer.tpl6 .subs.c2, .flyer.tpl7 .subs.c2 { grid-template-columns:repeat(2,1fr); }
.flyer.tpl6 .subs.c3, .flyer.tpl7 .subs.c3 { grid-template-columns:repeat(3,1fr); }
.flyer.tpl6 .subs.c4, .flyer.tpl7 .subs.c4 { grid-template-columns:repeat(4,1fr); }
.flyer.tpl6 .pcol .cell, .flyer.tpl7 .pcol .cell {
  position:relative; border-radius:4px; overflow:hidden;
  background:linear-gradient(135deg,#62748a,#36434f); min-height:0; }
/* 写真本体：背景画像＋transform:scale（ズーム/移動・html2canvas 1.4.1対応） */
.flyer.tpl6 .ph, .flyer.tpl7 .ph {
  position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat; }
.flyer.tpl6 .pcol .phx, .flyer.tpl7 .pcol .phx {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.8); font-size:12px; letter-spacing:.1em; }
.flyer.tpl6 .main span, .flyer.tpl7 .main span,
.flyer.tpl6 .pcol .cell span, .flyer.tpl7 .pcol .cell span {
  position:absolute; left:5px; bottom:4px; z-index:1;
  background:rgba(0,0,0,.5); color:#fff; font-size:10px; padding:1px 7px; border-radius:2px; }

/* =====================================================================
   色ムード（mood-XXX）— flyer-moods.html の配色を tpl6/tpl7 の変数へ上書き
   既定 shinrai は従来の紺(tpl6)/緑(tpl7)をそのまま使う（上書きしない）
   ===================================================================== */
/* ① インパクト：黒×ビビッド赤 */
.flyer.tpl6.mood-impact, .flyer.tpl7.mood-impact {
  --g-primary:#141414; --g-accent:#e4002b; --g-soft:#f3f3f3;
  --g-line:#dcdcdc; --g-ink:#161616; --g-chip:#fdeaec; --g-chipt:#c4001f; }
/* ② ホンワカ：クリーム×テラコッタ */
.flyer.tpl6.mood-honwaka, .flyer.tpl7.mood-honwaka {
  --g-primary:#c98a3f; --g-accent:#e2603a; --g-soft:#fff4e6;
  --g-line:#ecdcc4; --g-ink:#5a4327; --g-chip:#fdeede; --g-chipt:#b06a1f; }
/* ③ 人心掌握：濃紺×ゴールド */
.flyer.tpl6.mood-ninshin, .flyer.tpl7.mood-ninshin {
  --g-primary:#1a2547; --g-accent:#c9a227; --g-soft:#f5f2ea;
  --g-line:#e3ddcb; --g-ink:#1a2233; --g-chip:#f3eeda; --g-chipt:#8a6d12; }
/* ④ 信頼：ネイビー（tpl6 既定相当・明示） */
.flyer.tpl6.mood-shinrai, .flyer.tpl7.mood-shinrai {
  --g-primary:#1c3d5a; --g-accent:#c0392b; --g-soft:#eef2f6;
  --g-line:#cdd6df; --g-ink:#222b35; --g-chip:#eaf0f6; --g-chipt:#1c3d5a; }
/* ⑤ 安心：グリーン */
.flyer.tpl6.mood-anshin, .flyer.tpl7.mood-anshin {
  --g-primary:#1f6b4f; --g-accent:#d35400; --g-soft:#eef5f1;
  --g-line:#cfe0d7; --g-ink:#1d2b25; --g-chip:#e7f1ec; --g-chipt:#1f6b4f; }
/* 売主募集の見出し色（暗背景でも視認できるようムードのアクセントに） */
.flyer.tpl6 .pr .h, .flyer.tpl7 .pr .h { color:var(--g-accent); filter:brightness(1.5); }

/* =====================================================================
   安心バッジ帯（買取再販の信頼材料・全テンプレ共通）
   下帯の直上に全幅1行。色ルール：紺=第三者/公的(保険・制度・検査)、緑=自社の約束(保証)。
   赤は使わない（価格専用）。選択時のみ has-assure で行を1つ増やす。
   ===================================================================== */
.flyer.tpl1.has-assure { grid-template-rows: auto 1fr auto 132px; }
.flyer.tpl6.has-assure, .flyer.tpl7.has-assure { grid-template-rows: auto 1fr auto 96px; }
.flyer .assure-band {
  display:flex; flex-wrap:nowrap; align-items:center; gap:14px;
  padding:6px 20px; background:#eef2f6; border-top:1px solid #cdd6df;
}
.flyer .assure-grp { display:flex; align-items:center; gap:6px; min-width:0; }
.flyer .assure-grp + .assure-grp { border-left:1px solid #c2ccd6; padding-left:14px; }
.flyer .assure-grp .ah { font-size:9px; font-weight:700; white-space:nowrap; line-height:1.15; flex:0 0 auto; }
.flyer .assure-grp.self .ah { color:#1f6b4f; }
.flyer .assure-grp.third .ah { color:#1c3d5a; }
.flyer .assure-chip {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius:5px; font-size:10.5px; font-weight:700; line-height:1.2;
  white-space:nowrap; font-family:'Noto Sans JP',sans-serif;
}
.flyer .assure-chip .ac { font-weight:900; flex:0 0 auto; }
.flyer .assure-chip.third { background:#eaf0f6; border:1px solid #1c3d5a; color:#1c3d5a; }
.flyer .assure-chip.self  { background:#eef6f1; border:1px solid #1f6b4f; color:#1f6b4f; }

/* =====================================================================
   ③ 写真訴求型（tpl9）＝ tpl6 の意匠を流用し bd を「左ヒーロー大＋右カラム」に。
   価格は白地の右カラムに置くため赤OK（写真上の沈みを回避）。
   ===================================================================== */
.flyer.tpl6.hero-layout .bd { grid-template-columns:1.62fr 1fr; }
.flyer.tpl6.hero-layout .hero {
  position:relative; border-radius:4px; overflow:hidden; min-height:0;
  background:linear-gradient(135deg,#62748a,#36434f);
}
.flyer.tpl6.hero-layout .hero .phx {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); font-size:13px; }
.flyer.tpl6.hero-layout .hero .hcap {
  position:absolute; left:0; right:0; bottom:0; padding:12px 16px; color:#fff; font-weight:700; font-size:16px;
  background:linear-gradient(transparent, rgba(0,0,0,.62)); }
.flyer.tpl6.hero-layout .right { display:flex; flex-direction:column; gap:8px; min-height:0; justify-content:flex-start; }
.flyer.tpl6.hero-layout .right .catch { font-size:15px; font-weight:700; color:var(--g-primary); line-height:1.35; }
.flyer.tpl6.hero-layout .right .spec { margin-top:2px; }

/* =====================================================================
   ② ビフォーアフター ストリップ（リフォーム前後・下帯/安心帯の上）
   DOM順は body → ba-strip → assure-band → band。行を1つ（両方なら2つ）増やす。
   ===================================================================== */
.flyer.tpl1.has-ba { grid-template-rows: auto 1fr auto 132px; }
.flyer.tpl1.has-ba.has-assure { grid-template-rows: auto 1fr auto auto 132px; }
.flyer.tpl6.has-ba, .flyer.tpl7.has-ba { grid-template-rows: auto 1fr auto 96px; }
.flyer.tpl6.has-ba.has-assure, .flyer.tpl7.has-ba.has-assure { grid-template-rows: auto 1fr auto auto 96px; }
.flyer .ba-strip {
  display:flex; align-items:center; gap:14px; padding:6px 20px;
  background:#f4f6f9; border-top:1px solid #cdd6df;
}
.flyer .ba-strip .ba-h { font-size:10px; font-weight:700; color:#1c3d5a; white-space:nowrap; flex:0 0 auto; }
.flyer .ba-pair { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.flyer .ba-cell { position:relative; width:96px; height:64px; border-radius:4px; overflow:hidden;
  border:1px solid #cdd6df; background:#e9edf2; flex:0 0 auto; }
.flyer .ba-cell .photofill { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.flyer .ba-cell .bl { position:absolute; top:0; left:0; z-index:1; font-size:9px; font-weight:700; color:#fff;
  padding:1px 5px; border-radius:0 0 4px 0; }
.flyer .ba-cell.b .bl { background:#6b7480; }
.flyer .ba-cell.a .bl { background:#1c3d5a; }
.flyer .ba-cell .ba-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#9aa4b0; font-size:10px; }
.flyer .ba-arrow { font-weight:900; color:#1c3d5a; font-size:16px; flex:0 0 auto; }