/* 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;
}

/* =====================================================================
   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:1fr auto; padding:20px 26px 12px; gap:16px;
               align-items:start; border-top:6px solid var(--primary); }
.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); }
.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 86px; 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; }
.flyer .spec { width:100%; border-collapse:collapse; font-size:11.5px; }
.flyer .spec th { background:var(--primary); color:#fff; text-align:left; padding:4px 8px; width:36%;
                  font-weight:500; border:1px solid var(--primary); }
.flyer .spec td { padding:4px 8px; border:1px solid var(--line); color:var(--ink); }
.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; }
.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; }
.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 .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; }