:root {
    --bg-deep: #0a0e1a;
    --bg-elev: #131826;
    --bg-card: #1a2033;
    --bg-card-hover: #222a44;
    --border: #2a3349;
    --border-bright: #3a4365;
    --text: #e8ecf4;
    --text-dim: #94a3b8;
    --text-mid: #cbd5e1;
    --orange: #ff6b1a;
    --orange-bright: #ff8c4d;
    --orange-deep: #cc4e00;
    --orange-glow: rgba(255, 107, 26, 0.22);
    --gold: #ffd700;
    --green: #2ecc71;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; max-width: 100%; }
  html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
  body {
    background: var(--bg-deep);
    color: var(--text);
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "palt";
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: pretty;
    hanging-punctuation: allow-end;
  }
  p, dd, li, .lead, .sec-lead, .card p, .spec-item p, .merit-card p, .note-list li, summary {
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: pretty;
  }
  img { max-width: 100%; display: block; }
  a { color: var(--orange); text-decoration: none; }
  a:hover { color: var(--orange-bright); }
  .container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
  .br-sp { display: none; }
  @media (max-width: 560px) { .br-sp { display: inline; } }

  /* ===== HEADER ===== */
  header.site-head {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,14,26,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .site-head .inner {
    max-width: 1080px; margin: 0 auto; padding: 10px 20px;
    display: flex; align-items: center; gap: 12px;
  }
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand img { width: 30px; height: 30px; }
  .brand .logo-print { display: none; }
  .brand .bt { font-weight: 800; letter-spacing: 0.04em; font-size: 1.02rem; }
  .brand .bt small { display: block; font-size: 0.62rem; color: var(--text-dim); font-weight: 600; letter-spacing: 0.02em; }

  /* ===== HERO ===== */
  .hero {
    position: relative; text-align: center; padding: 64px 20px 56px;
    background:
      radial-gradient(900px 420px at 50% -10%, rgba(255,107,26,0.16), transparent 70%),
      linear-gradient(180deg, #0c111f 0%, var(--bg-deep) 100%);
    border-bottom: 1px solid var(--border);
  }
  .hero .partner-tag {
    display: inline-block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--orange-bright); border: 1px solid var(--orange-deep);
    background: rgba(255,107,26,0.08); padding: 6px 16px; border-radius: 999px; margin-bottom: 22px;
  }
  .hero h1 {
    font-size: clamp(1.7rem, 5.4vw, 2.9rem); font-weight: 800; line-height: 1.32;
    letter-spacing: 0.01em; margin-bottom: 20px;
  }
  .hero h1 .hl { color: var(--orange); }
  .hero .lead { font-size: clamp(0.95rem, 2.6vw, 1.1rem); color: var(--text-mid); max-width: 680px; margin: 0 auto 30px; }
  .hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .hero-points span {
    font-size: 0.84rem; font-weight: 700; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--border-bright);
    padding: 8px 15px; border-radius: 8px;
  }
  .hero-points span b { color: var(--orange); }

  /* ===== SECTION COMMON ===== */
  section { padding: 58px 0; }
  section:nth-of-type(even) { background: var(--bg-elev); }
  .sec-label { display: none; }
  .sec-title { text-align: center; font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 800; line-height: 1.4; margin-bottom: 14px; }
  .sec-lead { text-align: center; color: var(--text-mid); max-width: 720px; margin: 0 auto 38px; font-size: 0.96rem; }

  /* ===== CARDS GRID ===== */
  .grid { display: grid; gap: 16px; }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 760px) { .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

  .card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 22px 20px;
  }
  .card .ico { font-size: 1.6rem; margin-bottom: 10px; }
  .card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; line-height: 1.5; }
  .card p { font-size: 0.88rem; color: var(--text-dim); }

  /* ===== SPEC ===== */
  .spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  @media (max-width: 760px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
  .spec-item { text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 14px; }
  .spec-item .num { font-size: 1.7rem; font-weight: 800; color: var(--orange); line-height: 1.2; }
  .spec-item .num small { font-size: 0.9rem; }
  .spec-item h4 { font-size: 0.92rem; font-weight: 700; margin: 8px 0 4px; }
  .spec-item p { font-size: 0.8rem; color: var(--text-dim); }

  /* ===== PRICE TABLE ===== */
  .price-wrap { max-width: 940px; margin: 0 auto; }
  .price-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card); border: 1px solid var(--border-bright); border-radius: 14px; overflow: hidden; }
  .price-table th, .price-table td { padding: 13px 8px; text-align: center; border-bottom: 1px solid var(--border); }
  .price-table thead th { background: #141b2e; font-size: 0.78rem; color: var(--text-dim); font-weight: 700; letter-spacing: 0.02em; }
  .price-table tbody tr:last-child td { border-bottom: none; }
  .price-table .size { font-weight: 800; font-size: 0.98rem; }
  .price-table .size small { display: block; font-weight: 600; font-size: 0.68rem; color: var(--text-dim); line-height: 1.6; }
  .price-table .sale-price { color: var(--orange); font-weight: 800; font-size: 1.0rem; white-space: nowrap; }
  .price-table .month { color: var(--orange-bright); font-weight: 800; font-size: 0.96rem; white-space: nowrap; }
  .price-table .month small { color: var(--text-dim); font-weight: 600; font-size: 0.66rem; }
  .price-table .sub { color: var(--text-mid); font-size: 0.92rem; }
  .price-table .total { color: var(--text); font-weight: 700; font-size: 0.98rem; }
  .price-table .ref-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 1px 6px; margin-top: 4px; }
  .price-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 16px; line-height: 1.9; }
  .discount-banner { text-align: center; background: rgba(255,107,26,0.1); border: 1px dashed var(--orange-deep); border-radius: 10px; padding: 14px; margin-bottom: 24px; font-weight: 700; }
  .discount-banner b { color: var(--orange); }

  @media (max-width: 680px) {
    .price-table, .price-table thead, .price-table tbody, .price-table th, .price-table td, .price-table tr { display: block; width: 100%; }
    .price-table thead { display: none; }
    .price-table tbody tr { border-bottom: 1px solid var(--border-bright); padding: 6px 0; }
    .price-table tbody tr:last-child { border-bottom: none; }
    .price-table td { border-bottom: none; display: flex; justify-content: space-between; align-items: center; text-align: right; padding: 8px 16px; }
    .price-table td::before { content: attr(data-label); color: var(--text-dim); font-size: 0.78rem; font-weight: 700; text-align: left; }
    .price-table .size { text-align: right; }
    .price-table .size small { display: block; margin-top: 2px; }
  }

  /* ===== OPTION LIST ===== */
  .opt-list { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
  .opt-row { display: flex; align-items: flex-start; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
  .opt-row .tag { flex-shrink: 0; font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 6px; margin-top: 2px; }
  .opt-row .tag.std { background: rgba(46,204,113,0.15); color: var(--green); border: 1px solid rgba(46,204,113,0.4); }
  .opt-row .tag.opt { background: rgba(255,107,26,0.12); color: var(--orange); border: 1px solid var(--orange-deep); }
  .opt-row h4 { font-size: 0.98rem; font-weight: 700; margin-bottom: 3px; }
  .opt-row p { font-size: 0.85rem; color: var(--text-dim); }
  .opt-row .opt-body { flex: 1; }
  .opt-row .opt-body p { margin-bottom: 4px; }
  .opt-strong { color: var(--orange-bright) !important; font-weight: 700; }
  .opt-price { color: var(--orange) !important; font-weight: 800; font-size: 0.92rem; }
  .opt-link a { font-size: 0.8rem; }
  .opt-img { width: 132px; height: 100px; object-fit: cover; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--border-bright); }
  @media (max-width: 560px) { .opt-row { flex-wrap: wrap; } .opt-img { width: 100%; height: 160px; } }

  /* ===== GALLERY ===== */
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
  .gallery figure { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); }
  .gallery img { width: 100%; height: 240px; object-fit: contain; background: #0d1220; }
  .gallery figcaption { font-size: 0.78rem; color: var(--text-dim); padding: 9px 12px; }

  /* ===== NOTE ===== */
  .note-box { max-width: 820px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 26px 26px; }
  .note-list { list-style: none; display: grid; gap: 10px; }
  .note-list li { position: relative; padding-left: 22px; font-size: 0.88rem; color: var(--text-mid); }
  .note-list li::before { content: "※"; position: absolute; left: 0; color: var(--orange); }

  /* ===== FLOOR PLAN ===== */
  .plan-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-bottom: 30px; font-size: 0.82rem; color: var(--text-mid); }
  .plan-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .plan-legend i { width: 15px; height: 15px; border-radius: 4px; display: inline-block; border: 1px solid rgba(255,255,255,0.15); }
  .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  @media (max-width: 680px) { .plan-grid { grid-template-columns: 1fr; } }
  .plan-card { background: #eef2f8; border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 14px; }
  .plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .plan-size { font-weight: 800; font-size: 1.3rem; color: #1a2033; }
  .plan-cap { font-weight: 800; font-size: 0.92rem; color: #fff; background: var(--orange); padding: 5px 16px; border-radius: 999px; }
  .plan-dim { font-size: 0.73rem; color: #5b6b85; margin-top: 10px; text-align: center; font-weight: 600; line-height: 1.7; }
  .plan-note { font-size: 0.82rem; color: #3a4870; margin-top: 4px; text-align: center; font-weight: 700; }
  .fp-svg { width: 100%; height: auto; display: block; background: #fff; border-radius: 10px; }
  .fp-floor { fill: #ffffff; stroke: #27324a; stroke-width: 60; }
  .fp-monitor { fill: #222b40; }
  .fp-karaoke { fill: #46557f; stroke: #2c3656; stroke-width: 8; }
  .fp-speaker { fill: #5b6b85; stroke: #3a4870; stroke-width: 6; }
  .fp-table { fill: #e7d6ad; stroke: #c2a86f; stroke-width: 10; }
  .fp-sofa { fill: #cdd7ea; stroke: #8a99ba; stroke-width: 12; }
  .fp-person { fill: #ff6b1a; stroke: #ffffff; stroke-width: 16; }
  .fp-door { fill: none; stroke: #ff6b1a; stroke-width: 16; stroke-linecap: round; }
  .fp-dim { fill: #5b6b85; font-size: 122px; font-weight: 700; }
  .fp-klabel { fill: #ffffff; font-size: 90px; font-weight: 700; }
  .fp-splabel { fill: #ffffff; font-size: 78px; font-weight: 700; }
  .fp-item-d { fill: #7a6532; font-size: 112px; font-weight: 700; }
  .fp-ilabel { fill: #ff6b1a; font-size: 96px; font-weight: 700; }

  /* ===== FOOTER ===== */
  footer.site-foot { background: #070a13; border-top: 1px solid var(--border); padding: 40px 20px; text-align: center; }
  footer .fw-title { font-weight: 800; font-size: 1.1rem; letter-spacing: 0.05em; }
  footer .fw-sub { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 16px; }
  footer .company { font-size: 0.82rem; color: var(--text-dim); line-height: 2; }
  footer .copy { font-size: 0.7rem; color: var(--text-dim); margin-top: 16px; letter-spacing: 0.04em; }

  /* ===== PRINT (PDF) — 白背景・コンパクト ===== */
  @media print {
    @page { size: A4; margin: 8mm; }
    :root {
      --bg-deep: #ffffff; --bg-elev: #f5f7fa; --bg-card: #f4f6fb; --bg-card-hover: #eef2f8;
      --border: #d8dee9; --border-bright: #c2ccdd;
      --text: #1a2433; --text-dim: #5b6b85; --text-mid: #34405a;
    }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    html { font-size: 13.5px; }
    html, body { background: #ffffff !important; color: #1a2433 !important; }
    header.site-head { position: static; background: #ffffff !important; border-bottom: 1px solid #d8dee9; padding: 6px 20px; }
    .brand .bt, .brand .bt small { color: #1a2433; }
    .brand .logo-screen { display: none; }
    .brand .logo-print { display: inline-block; }
    .hero { background: #ffffff !important; border-bottom: 1px solid #d8dee9; padding: 16px 16px 14px !important; }
    .hero h1 { font-size: 1.55rem !important; margin-bottom: 10px; }
    .hero .lead { color: #34405a; margin-bottom: 10px; font-size: 0.9rem; }
    .hero .partner-tag { margin-bottom: 12px; }
    .hero-points span { padding: 5px 11px; font-size: 0.78rem; }
    section { padding: 14px 0 !important; }
    section:nth-of-type(even) { background: #f5f7fa !important; }
    .sec-title { font-size: 1.2rem !important; margin-bottom: 7px; }
    .sec-lead { margin-bottom: 12px; font-size: 0.8rem; }
    .grid { gap: 8px; }
    .card { padding: 11px 13px; }
    .card .ico { font-size: 1.3rem; margin-bottom: 5px; }
    .card h3 { font-size: 0.92rem; margin-bottom: 5px; }
    .card p { font-size: 0.78rem; }
    .spec-grid { gap: 8px; }
    .spec-item { padding: 12px 8px; }
    .spec-item .num { font-size: 1.4rem; }
    .price-table thead th { background: #eef2f8 !important; color: #34405a !important; }
    .price-table th, .price-table td { padding: 9px 6px; }
    .opt-list { gap: 8px; }
    .opt-row { padding: 11px 13px; }
    .opt-img { width: 110px; height: 84px; }
    .gallery { gap: 8px; }
    .gallery figure { background: #f4f6fb !important; }
    .gallery img { height: 135px; background: #eef2f8 !important; }
    .gallery figcaption { color: #5b6b85; padding: 6px 10px; }
    .plan-grid { gap: 9px; }
    .plan-card { padding: 11px; background: #eef2f8 !important; }
    .note-box { padding: 16px 18px; }
    .note-list { gap: 7px; }
    footer.site-foot { background: #f5f7fa !important; border-top: 1px solid #d8dee9; padding: 18px; }
    .card, .opt-row, .price-table, figure, .plan-card, .spec-item, .note-box, .discount-banner { break-inside: avoid; }
    /* 見出し自体を行・ページで割らない */
    h1, h2, h3, .sec-title, .sec-lead, .discount-banner { break-inside: avoid; page-break-inside: avoid; }
    /* 見出し(と導入文)の直後で改ページしない=本文と同じページに付ける */
    h1, h2, h3, .sec-title, .sec-lead { break-after: avoid; page-break-after: avoid; }
    /* セクション先頭ブロックを次のコンテンツと束ねる */
    .container > .sec-title + .sec-lead { break-before: avoid; }
    .grid, .spec-grid, .gallery, .plan-grid, .opt-list { break-before: avoid; }
    p, li { orphans: 3; widows: 3; }
    .plan-grid, .gallery, .spec-grid, .grid { break-inside: auto; }

    /* ===== ページ構成(グループごとに改ページ) ===== */
    #sec-price { break-before: page; page-break-before: always; }
    #sec-options { break-before: avoid; page-break-before: avoid; }
    #sec-floorplan { break-before: page; page-break-before: always; }
    #sec-gallery { break-before: page; page-break-before: always; }
    /* 製品スペックを丸ごと1ページ目に(4項目の行を分割させない) */
    .spec-grid { break-inside: avoid; page-break-inside: avoid; }

    /* 1ページ目(ヒーロー〜製品スペック)を1枚に収める圧縮 */
    .hero { padding: 10px 16px 8px !important; }
    .hero h1 { font-size: 1.34rem !important; margin-bottom: 7px; }
    .hero .lead { font-size: 0.8rem; margin-bottom: 8px; }
    .hero .partner-tag { margin-bottom: 8px; padding: 4px 13px; }
    .hero-points span { padding: 4px 9px; font-size: 0.72rem; }
    section { padding: 10px 0 !important; }
    .sec-title { font-size: 1.12rem !important; margin-bottom: 5px; }
    .sec-lead { font-size: 0.76rem; margin-bottom: 9px; }
    .card { padding: 8px 11px; }
    .card .ico { font-size: 1.15rem; margin-bottom: 3px; }
    .card h3 { font-size: 0.86rem; margin-bottom: 3px; }
    .card p { font-size: 0.74rem; line-height: 1.55; }
    .spec-item { padding: 10px 8px; }
    .spec-item .num { font-size: 1.25rem; }

    /* 設置イメージ: 写真を大きく・はっきり見せる(2カラム) */
    #sec-gallery .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    #sec-gallery .gallery img { height: 268px; object-fit: contain; background: #eef2f8; }
    #sec-gallery figcaption { font-size: 0.74rem; padding: 5px 8px; }

    /* 価格+オプションを1ページ(2枚目)に収める圧縮=最終行のはみ出し防止 */
    #sec-price .discount-banner { padding: 9px; margin-bottom: 13px; }
    #sec-price .price-table th, #sec-price .price-table td { padding: 7px 6px; }
    #sec-price .price-note { font-size: 0.72rem; line-height: 1.65; margin-top: 10px; }
    #sec-options { padding-top: 6px !important; }
    #sec-options .sec-lead { margin-bottom: 7px; }
    #sec-options .opt-list { gap: 7px; }
    #sec-options .opt-row { padding: 9px 12px; }
    #sec-options .opt-row h4 { font-size: 0.92rem; }
    #sec-options .opt-row p { font-size: 0.8rem; line-height: 1.5; }
    #sec-options .opt-img { width: 100px; height: 76px; }

    /* レイアウト図を圧縮し、導入メリット(見出し+3枚)を同ページに収める=中途半端なはみ出し防止 */
    #sec-floorplan { padding: 8px 0 !important; }
    #sec-floorplan .sec-lead { margin-bottom: 7px; font-size: 0.74rem; }
    #sec-floorplan .plan-legend { margin-bottom: 9px; font-size: 0.72rem; gap: 8px 12px; }
    #sec-floorplan .plan-grid { gap: 8px; }
    #sec-floorplan .plan-card { padding: 7px; }
    #sec-floorplan .plan-head { margin-bottom: 5px; }
    #sec-floorplan .plan-size { font-size: 1.05rem; }
    #sec-floorplan .plan-cap { font-size: 0.8rem; padding: 3px 11px; }
    #sec-floorplan .plan-dim { margin-top: 4px; line-height: 1.45; font-size: 0.68rem; }
    #sec-floorplan .plan-note { margin-top: 2px; font-size: 0.74rem; }
    #sec-floorplan .fp-svg { width: 76%; margin: 0 auto; }
    #sec-floorplan .price-note { display: none; }  /* 末尾の重複注記は省略(凡例で代替) */
    #sec-merit { break-before: avoid; page-break-before: avoid; padding-top: 2px !important; }
    #sec-merit .sec-title { margin-bottom: 5px; }
    #sec-merit .grid { break-inside: avoid; page-break-inside: avoid; gap: 8px; }
    #sec-merit .card { padding: 7px 10px; }
  }