@charset "UTF-8";
/* ==========================================================
   クローバータウン豊中上野東  (2026-09)
   キーカラー: パンフレット特色 C80 M10 Y50 → #05A292
   ブレークポイント: 768px（未満＝スマホ）
   ========================================================== */
:root {
  --key: #05a292;
  --key-dark: #037b6f;
  --key-deep: #025e55;
  --key-light: #d8f0ec;
  --key-pale: #eff9f7;
  --accent: #f08c3c;          /* CTA 来場予約 */
  --text: #2b2b2b;
  --muted: #666;
  --line: #d9e2e0;
  --mark: #fff27a;            /* 見出しのマーカー */
  --navy: #0f2c51;
  --serif: "Noto Serif JP", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --script: "Tangerine", cursive;
  --head-h: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--text); font-size: 15px; line-height: 1.9; background: #fff; overflow-x: hidden; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[id] { scroll-margin-top: calc(var(--head-h) + 8px); }
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.sp { display: none; }
@media (max-width: 767px) {
  body { font-size: 14px; }
  .pc { display: none; }
  .sp { display: inline; }
  :root { --head-h: 58px; }
}

/* ---------- fade ---------- */
.js .fade { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .fade { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--head-h); background: var(--key); color: #fff; transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, .15); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; max-width: 1400px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.logo__mark { width: 38px; height: 38px; color: #fff; }
.logo__txt { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: .06em; white-space: nowrap; }
.gnav { display: flex; align-items: center; gap: 24px; }
.gnav ul { display: flex; gap: 4px; }
.gnav ul a { display: block; padding: 6px 12px; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.3; text-align: center; letter-spacing: .05em; border-radius: 4px; transition: background .2s; }
.gnav ul a:hover { background: rgba(255, 255, 255, .15); }
.gnav ul .en { display: block; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 12px; opacity: .8; letter-spacing: .08em; }
.gnav__cta { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 40px; padding: 0 14px; border-radius: 20px; font-size: 14px; font-weight: 700; text-decoration: none; transition: opacity .2s; }
.btn:hover { opacity: .85; }
.btn--request { background: #fff; color: var(--key-dark); }
.btn--reserve { background: var(--accent); color: #fff; }
.menu-btn { display: none; }
@media (max-width: 1200px) {
  .gnav ul a { padding: 6px 8px; font-size: 13px; }
  .gnav__cta { display: none; }
}
@media (max-width: 1000px) {
  .menu-btn { display: block; position: relative; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
  .menu-btn span { position: absolute; left: 10px; width: 24px; height: 2px; background: #fff; transition: transform .3s, opacity .3s; }
  .menu-btn span:nth-child(1) { top: 14px; } .menu-btn span:nth-child(2) { top: 21px; } .menu-btn span:nth-child(3) { top: 28px; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .gnav { position: fixed; top: var(--head-h); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 24px 40px; background: var(--key); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .35s, visibility .35s; }
  .gnav.is-open { transform: none; visibility: visible; }
  .gnav ul { flex-direction: column; gap: 0; }
  .gnav ul a { display: flex; align-items: baseline; gap: 16px; padding: 16px 4px; font-size: 15px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .25); border-radius: 0; }
  .gnav ul .en { display: inline-block; width: 150px; font-family: var(--script); font-weight: 700; font-size: 34px; opacity: 1; letter-spacing: 0; line-height: 1; }
  .gnav__cta { display: flex; margin-top: 24px; }
  .gnav__cta .btn { flex: 1; height: 48px; border-radius: 24px; }
}
@media (max-width: 767px) {
  .site-header__inner { padding: 0 8px 0 14px; }
  .logo__mark { width: 30px; height: 30px; }
  .logo__txt { font-size: 15px; letter-spacing: .03em; }
}

/* ---------- key visual (仮) ---------- */
.mv { position: relative; margin-top: var(--head-h); background: #cfe6f2; overflow: hidden; }
.mv__bg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.mv__title { position: absolute; top: 50%; right: 8%; transform: translateY(-50%); color: #fff; text-align: center; text-shadow: 0 0 18px rgba(0, 60, 90, .35); }
.mv__en { font-family: var(--script); font-weight: 700; font-size: clamp(56px, 7vw, 110px); line-height: 1; }
.mv__en svg { width: .45em; height: .45em; vertical-align: .6em; margin-left: .05em; color: #fff; }
.mv__sub { font-family: "Cormorant Garamond", serif; font-size: clamp(14px, 1.4vw, 22px); letter-spacing: .12em; margin-top: 4px; }
.mv__ja { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: .08em; margin-top: 10px; }
.mv__temp { position: absolute; left: 12px; bottom: 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 3px; }
.mv-band { background: var(--key); color: #fff; text-align: center; padding: 14px 16px 16px; font-family: var(--serif); }
.mv-band__main { font-size: clamp(18px, 2vw, 26px); font-weight: 600; letter-spacing: .1em; color: #fff7c2; line-height: 1.5; }
.mv-band__sub { font-size: clamp(13px, 1.2vw, 16px); letter-spacing: .1em; }
@media (max-width: 767px) {
  .mv__bg { aspect-ratio: 3 / 4; }
  .mv__title { top: 18%; right: 0; left: 0; transform: none; }
}

/* ---------- section common ---------- */
.sec { padding: 110px 0 0; }
.ttl { display: flex; align-items: baseline; gap: 36px; margin-bottom: 56px; }
.ttl__en { font-family: var(--script); font-weight: 700; font-size: 92px; line-height: 1; color: var(--key); letter-spacing: .01em; }
.ttl__ja { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: .15em; }
.script-ttl { font-family: var(--script); font-weight: 700; font-size: 58px; line-height: 1.1; color: var(--key); padding-bottom: 10px; border-bottom: 1px solid var(--key); }
.sub-ttl { font-family: var(--serif); font-weight: 600; font-size: 17px; margin: 14px 0 20px; }
.label-line { font-weight: 700; font-size: 18px; color: var(--key); padding-bottom: 8px; border-bottom: 1px solid var(--key); margin-bottom: 20px; font-family: "Barlow", sans-serif; letter-spacing: .04em; }
.note { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 20px; }
@media (max-width: 767px) {
  .sec { padding-top: 72px; }
  .ttl { gap: 18px; margin-bottom: 32px; }
  .ttl__en { font-size: 64px; }
  .ttl__ja { font-size: 16px; }
  .script-ttl { font-size: 46px; }
  .sub-ttl { font-size: 15px; }
}

/* ---------- concept ---------- */
.concept__grid { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: start; }
.concept__lead { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.9; }
.concept__area { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--key); letter-spacing: .08em; margin: 20px 0 18px; }
.concept__txt > p + p { margin-top: 1em; }
.concept__brand { margin-top: 36px; padding: 26px 30px; background: var(--key-pale); border-left: 4px solid var(--key); }
.concept__brand-head { font-family: var(--serif); font-size: 15px; margin-bottom: 12px; line-height: 1.7; }
.concept__brand-head strong { font-size: 22px; color: var(--key); }
.concept__brand-head svg { width: 22px; height: 22px; color: var(--key); vertical-align: -3px; margin-left: 4px; }
.concept__img img { border-radius: 200px 200px 0 0; width: 100%; }
.concept-banner { position: relative; margin-top: 90px; }
.concept-banner > img { display: block; width: 100%; max-height: 720px; object-fit: cover; }
.concept-banner__badges { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(2, 150px); gap: 10px 14px; }
.concept-banner__badges li { width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .93); border: 2px solid var(--key); box-shadow: 0 0 0 5px rgba(255, 255, 255, .6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--key-dark); font-weight: 700; line-height: 1.35; font-size: 15px; }
.concept-banner__badges li:nth-child(2n) { transform: translateY(40px); }
.concept-banner__badges b { font-family: "Barlow", sans-serif; font-size: 30px; margin: 0 2px; }
.concept-banner__badges small { font-size: 12px; color: var(--text); margin-top: 4px; font-weight: 500; }
.concept-banner__note { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .6); }
@media (max-width: 900px) {
  .concept__grid { grid-template-columns: 1fr; gap: 36px; }
  .concept__img { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .concept__lead { font-size: 15px; }
  .concept__area { font-size: 24px; }
  .concept__brand { padding: 20px; }
  .concept-banner { margin-top: 60px; }
  .concept-banner__badges { position: static; transform: none; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px; background: var(--key-pale); }
  .concept-banner__badges li { width: 100%; height: auto; aspect-ratio: auto; border-radius: 12px; padding: 14px 6px; box-shadow: none; font-size: 13px; }
  .concept-banner__badges li:nth-child(2n) { transform: none; }
  .concept-banner__badges b { font-size: 24px; }
  .concept-banner__note { position: static; color: var(--muted); text-shadow: none; padding: 0 20px; }
}

/* ---------- location ---------- */
.pickup { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pickup__name { font-size: 28px; font-weight: 700; color: var(--key); letter-spacing: .06em; }
.pickup .time { font-size: 13px; color: var(--muted); margin: 2px 0 14px; }
.shopping { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 100px; align-items: start; }
.shopping__txt p + p { margin-top: 1em; }
figure img { width: 100%; }
figcaption { margin-top: 8px; line-height: 1.5; }
figcaption b { display: block; font-size: 14px; }
figcaption span { font-size: 12px; color: var(--muted); }
.shopping__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.med-edu { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 100px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.duo figcaption { text-align: center; }
.time-list { margin-top: 24px; background: var(--key-pale); padding: 18px 22px; }
.time-list__head { font-weight: 700; color: var(--key-dark); font-size: 14px; }
.time-list__head:not(:first-child) { margin-top: 14px; }
.time-list dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px dotted #b8cfca; padding: 4px 0; line-height: 1.6; }
.time-list dd { white-space: nowrap; }
.time-list dd b { font-family: "Barlow", sans-serif; font-size: 17px; color: var(--key); margin: 0 1px; }
@media (max-width: 767px) {
  .pickup, .shopping, .med-edu { grid-template-columns: 1fr; gap: 28px; }
  .pickup__img { order: -1; }
  .shopping, .med-edu { margin-top: 64px; }
  .shopping__txt { order: -1; }
  .med-edu { gap: 64px; }
  .time-list { padding: 14px 16px; }
  .time-list dl div { flex-direction: column; gap: 0; }
  .time-list dd { text-align: right; }
}

/* 周辺施設一覧 */
.facilities { margin-top: 110px; }
.facilities__ttl { text-align: center; font-size: 24px; font-weight: 700; color: var(--key); letter-spacing: .1em; margin-bottom: 20px; }
.fac-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.fac-tabs button { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 18px; border-radius: 18px; border: 1px solid var(--key); background: #fff; color: var(--key-dark); cursor: pointer; }
.fac-tabs button.is-active { background: var(--key); color: #fff; }
.fac-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px 16px; }
.fac-list li { text-align: center; line-height: 1.5; }
.fac-list li[hidden] { display: none; }
.fac-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; }
.fac-list .n { font-size: 13px; font-weight: 700; }
.fac-list .t { font-size: 12px; color: var(--muted); }
.scroll-hint { display: none; }
@media (max-width: 1000px) { .fac-list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
  .facilities { margin-top: 72px; }
  .fac-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -20px 20px; padding: 0 20px 4px; }
  .fac-tabs button { white-space: nowrap; }
  .fac-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .fac-list { display: flex; gap: 12px; width: max-content; }
  .fac-list li { width: 62vw; max-width: 260px; scroll-snap-align: start; }
  .scroll-hint { display: block; text-align: right; font-size: 12px; color: var(--key-dark); margin-top: 4px; }
}

/* ---------- access ---------- */
.access__lead { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: -24px 0 40px; }
.map-block { margin-bottom: 56px; }
.map-block .label, .landplan .label { display: inline-block; background: var(--key); color: #fff; font-size: 14px; font-weight: 700; padding: 4px 28px; margin-bottom: 14px; }
.map-block a { display: block; border: 1px solid var(--line); }
.map-block img { width: 100%; }
.map-block--near { max-width: 820px; margin-left: auto; margin-right: auto; }
.map-block--near .label { display: table; }
.map-hint { font-size: 12px; color: var(--muted); margin-top: -40px; }
.carnav { display: flex; align-items: center; justify-content: center; gap: 18px; background: var(--key); color: #fff; border-radius: 40px; padding: 14px 30px; max-width: 760px; margin: 50px auto 60px; }
.carnav img { width: 40px; flex-shrink: 0; }
.carnav b { font-weight: 700; }
.gmap iframe { display: block; width: 100%; height: 420px; border: 0; }
.traffic__ttl { font-family: var(--serif); font-weight: 600; font-size: 20px; text-align: center; margin: 60px 0 24px; }
.traffic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.traffic li { border: 1px solid var(--line); border-top: 4px solid var(--key); padding: 18px 16px; text-align: center; background: #fff; }
.traffic .line { font-size: 12px; color: var(--muted); }
.traffic .st { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.4; margin-bottom: 8px; }
.traffic .st small { font-size: 14px; }
.traffic .tm { font-family: var(--serif); font-size: 15px; }
.traffic .tm span { font-size: 12px; margin-right: 8px; color: var(--muted); font-family: var(--sans); }
.traffic .tm b { font-size: 30px; color: var(--key); font-weight: 500; margin: 0 2px; }
@media (max-width: 767px) {
  .access__lead { font-size: 16px; margin: -12px 0 28px; }
  .map-block { margin-bottom: 44px; }
  .map-hint { margin-top: -30px; }
  .carnav { border-radius: 12px; padding: 14px 18px; font-size: 13px; gap: 12px; margin: 40px 0; }
  .gmap iframe { height: 320px; }
  .traffic { grid-template-columns: 1fr 1fr; gap: 10px; }
  .traffic li { padding: 14px 8px; }
  .traffic .st { font-size: 19px; }
  .traffic .tm b { font-size: 24px; }
}

/* ---------- land plan ---------- */
.landplan__lead { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: -24px 0 36px; }
.landplan__grid { display: grid; grid-template-columns: 1fr 300px; gap: 50px; align-items: center; }
.landplan__img { max-width: 600px; justify-self: center; }
.landplan__points { display: grid; gap: 20px; }
.landplan__points li { position: relative; background: #fff; border: 1px solid var(--line); padding: 26px 16px; text-align: center; font-family: var(--serif); overflow: hidden; }
.landplan__points li::before, .landplan__points li::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.landplan__points li::before { left: 0; top: 0; border-width: 30px 30px 0 0; border-color: var(--key-light) transparent transparent; }
.landplan__points li::after { right: 0; bottom: 0; border-width: 0 0 30px 30px; border-color: transparent transparent var(--key-light); }
.landplan__points .l { font-size: 28px; font-weight: 700; color: var(--key); line-height: 1.4; }
.landplan__points .s { font-size: 15px; }
@media (max-width: 767px) {
  .landplan__lead { font-size: 18px; margin: -12px 0 24px; }
  .landplan__grid { grid-template-columns: 1fr; gap: 28px; }
  .landplan__points li { padding: 20px 12px; }
  .landplan__points .l { font-size: 24px; }
}

/* ---------- housing plan ---------- */
.houseplan__lead { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: -24px 0 44px; }
.plan { border: 1px solid var(--key); margin-bottom: 60px; }
.plan__head { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--key); color: #fff; padding: 22px 30px; }
.plan__no { font-family: var(--serif); font-size: 64px; line-height: 1; white-space: nowrap; }
.plan__no span { font-size: 26px; margin-right: 4px; }
.plan__type { font-family: var(--serif); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; line-height: 1.2; }
.plan__type .ldk { font-size: 34px; }
.plan__type .kind { font-size: 24px; }
.plan__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.plan__tags li { background: #fff; color: var(--key-dark); font-family: var(--serif); font-size: 12px; font-weight: 600; padding: 2px 12px; line-height: 1.8; }
.plan__catch { font-family: var(--serif); font-size: 16px; letter-spacing: .05em; }
.plan__spec { font-family: var(--serif); font-size: 13px; line-height: 1.7; white-space: nowrap; }
.plan__spec div { display: flex; gap: 8px; }
.plan__spec dt::after { content: "／"; }
.plan__body { padding: 40px 40px 34px; }
.plan__fig { max-width: 980px; margin: 0 auto; }
.plan__fig--tall { max-width: 820px; }
.feat { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; }
.feat li { color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; line-height: 1.5; border-radius: 2px; }
.feat .c1 { background: #1f7a4d; } .feat .c2 { background: #a5286a; } .feat .c3 { background: #6c55a3; } .feat .c4 { background: #e8672a; }
.feat .c5 { background: #e9508d; } .feat .c6 { background: #2e3b8f; } .feat .c7 { background: #8a5a2b; } .feat .c8 { background: #1aa3dd; } .feat .c9 { background: #3dbfc5; }
.plan__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.plan__points .num { font-family: var(--serif); font-size: 44px; color: var(--key); line-height: 1; }
.plan__points h4 { font-family: var(--serif); font-size: 17px; color: var(--key-dark); line-height: 1.5; margin: 8px 0 10px; }
.plan__points p:not(.num) { font-size: 13px; line-height: 1.8; }
.plan__note { font-size: 12px; color: var(--muted); margin-top: 22px; text-align: right; }
@media (max-width: 900px) {
  .plan__head { grid-template-columns: auto 1fr; }
  .plan__spec { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 18px; white-space: normal; }
}
@media (max-width: 767px) {
  .houseplan__lead { font-size: 16px; margin: -12px 0 28px; }
  .plan { margin-bottom: 40px; }
  .plan__head { gap: 10px 14px; padding: 18px 16px; }
  .plan__no { font-size: 46px; }
  .plan__no span { font-size: 18px; }
  .plan__type .ldk { font-size: 26px; }
  .plan__type .kind { font-size: 18px; }
  .plan__main { min-width: 0; }
  .plan__catch { grid-column: 1 / -1; font-size: 14px; }
  .plan__spec { font-size: 12px; }
  .plan__body { padding: 20px 14px 20px; }
  .plan__points { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
  .plan__note { text-align: left; }
}

/* ==========================================================
   Housing Building（全分譲地共通）
   図の中の文字は container query 単位(cqw)で図と一緒に拡縮する
   ========================================================== */
.hb { margin-top: 110px; padding-bottom: 20px; }
.hb__ttl { background: var(--key); color: #fff; padding: 14px 0; margin-bottom: 50px; }
.hb__ttl .container { display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap; }
.hb__ttl .en { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.2; letter-spacing: .02em; }
.hb__ttl h2 { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .1em; }
.mk { background: linear-gradient(transparent 62%, var(--mark) 62%); }

.hb-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--key-light); padding: 40px 50px; margin-bottom: 70px; }
.hb-top__desc { font-weight: 700; color: var(--key-dark); font-size: 21px; line-height: 1.8; }
.hb-top ul { display: flex; align-items: center; gap: 18px; }
.hb-top li:not(.amp) { width: 150px; height: 130px; display: flex; align-items: center; justify-content: center; background: #fff; border: 3px double var(--key); outline: 1px solid var(--key); outline-offset: 5px; text-align: center; color: var(--key-dark); font-weight: 700; font-size: 20px; line-height: 1.5; }
.hb-top .amp { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--navy); }
@media (max-width: 900px) {
  .hb-top { flex-direction: column; padding: 28px 20px; }
  .hb-top__desc { text-align: center; font-size: 18px; }
}
@media (max-width: 767px) {
  .hb { margin-top: 72px; }
  .hb__ttl { margin-bottom: 32px; }
  .hb__ttl .en { font-size: 30px; }
  .hb__ttl h2 { font-size: 13px; }
  .hb-top { margin-bottom: 48px; }
  .hb-top ul { gap: 8px; width: 100%; justify-content: center; }
  .hb-top li:not(.amp) { flex: 1; width: auto; max-width: 110px; height: 96px; font-size: 14px; outline-offset: 3px; }
  .hb-top .amp { font-size: 18px; }
}

.hb-item { margin-bottom: 90px; }
.hb-head { display: flex; align-items: center; gap: 40px; margin-bottom: 36px; }
.pbox { flex-shrink: 0; width: 180px; min-height: 180px; background: var(--key); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 8px; font-family: var(--serif); }
.pbox__no { font-family: "Cormorant Garamond", serif; font-size: 26px; line-height: 1.2; }
.pbox__no.num { font-size: 30px; }
.pbox__ja { font-weight: 700; font-size: 20px; line-height: 1.5; margin: 8px 0; letter-spacing: .06em; }
.pbox__en { font-family: "Cormorant Garamond", serif; font-size: 14px; line-height: 1.3; opacity: .9; }
.hb-head h3 { font-weight: 700; font-size: 21px; line-height: 1.9; color: #444; }
.hb-head__row { display: flex; align-items: center; gap: 30px; }
.hb-head .ykk { width: 130px; }
@media (max-width: 767px) {
  .hb-item { margin-bottom: 64px; }
  .hb-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
  .pbox { width: 150px; min-height: 150px; margin: 0 auto; }
  .pbox__ja { font-size: 17px; }
  .hb-head h3 { font-size: 16px; }
  .hb-head__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hb-head .ykk { width: 100px; }
}

/* UA値グラフ（元画像 3068x1212 と同じ比率・配置） */
.ua-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ua { position: relative; container-type: inline-size; width: 100%; min-width: 720px; aspect-ratio: 2000 / 790; font-family: var(--sans); color: #333; }
.ua > * { position: absolute; margin: 0; }
.ua__band { left: 10.25%; width: 60%; }
.ua__band.b5 { top: 5.3%; height: 21%; background: #f7dcd6; }
.ua__band.b4 { top: 26.3%; height: 21.3%; background: #f8e4cf; }
.ua__band.b3 { top: 47.6%; height: 21.1%; background: #dfebd8; }
.ua__band.b0 { top: 68.7%; height: 11.4%; background: #dfe4e8; }
.ua__band + .ua__band { border-top: 2px solid #fff; }
.ua__axis-y { left: 10.15%; top: 1.5%; width: 2px; height: 78.8%; background: #333; }
.ua__axis-x { left: 10.15%; top: 80.1%; width: 60.7%; height: 2px; background: #333; }
.ua__yl { right: 90.9%; text-align: right; font-size: 1.55cqw; line-height: 1.25; white-space: nowrap; transform: translateY(-50%); }
.ua__yl small { display: block; font-size: 1.2cqw; margin-right: -.4em; }
.ua__yl.hi, .ua__yl.lo { font-size: 1.15cqw; color: #666; }
.ua__yl.hi { top: 7.8%; } .ua__yl.lo { top: 79%; }
.ua__yl.g5 { top: 26%; } .ua__yl.g4 { top: 47.5%; } .ua__yl.g3 { top: 69%; }
.ua__v { top: 14%; bottom: 17%; width: 0; border-left: 2px dotted #333; }
.ua__v.x1 { left: 14.25%; top: 54%; } .ua__v.x2 { left: 28.05%; top: 33%; } .ua__v.x3 { left: 41.85%; top: 33%; } .ua__v.x4 { left: 55.65%; top: 12%; }
.ua__v::after { content: ""; position: absolute; left: -2px; bottom: 0; width: 2px; height: 3%; min-height: 8px; background: #333; }
.ua__xl { top: 84%; transform: translateX(-50%); text-align: center; font-size: 1.65cqw; line-height: 1.3; white-space: nowrap; }
.ua__xl.x1 { left: 14.25%; } .ua__xl.x2 { left: 28.05%; } .ua__xl.x3 { left: 41.85%; } .ua__xl.x4 { left: 55.65%; }
.ua__uv { font-size: 1.15cqw; white-space: nowrap; transform: translateY(-100%); }
.ua__uv.a1 { left: 15.2%; top: 53.6%; } .ua__uv.a2 { left: 28.8%; top: 32.6%; } .ua__uv.a3 { left: 42.6%; top: 32.6%; } .ua__uv.a4 { left: 56.1%; top: 11.4%; }
.ua__arrow { width: 13.45%; height: 12.9%; display: flex; align-items: center; justify-content: center; padding-right: 1.8%; color: #fff; font-weight: 700; font-size: 1.15cqw; line-height: 1.55; text-align: center; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); }
.ua__arrow.a1 { left: 14.25%; top: 54.2%; background: #6b6b6b; }
.ua__arrow.a2 { left: 28.05%; top: 33.2%; background: #6b6b6b; }
.ua__arrow.a3 { left: 41.85%; top: 33.2%; background: #e8901a; }
.ua__arrow.a4 { left: 55.65%; top: 11.8%; background: #e0525a; }
.ua__pill { left: 36%; top: 7.8%; width: 17.35%; height: 15.6%; border-radius: 999px; background: #0b4b91; color: #fff2a0; font-weight: 700; font-size: 1.4cqw; line-height: 1.5; display: flex; align-items: center; justify-content: center; text-align: center; }
.ua__note { left: 62%; top: 86%; font-size: 1.1cqw; line-height: 1.6; color: #555; }
.ua__box { left: 73.3%; top: 14.2%; width: 25.1%; height: 59%; background: #d4daec; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 1.9cqw; line-height: 1.45; color: #222; }
.ua__box .big { font-size: 1.9cqw; margin: .5cqw 0 0; }
.ua__box .big span { font-size: 3.2cqw; color: #1f63b5; background: linear-gradient(transparent 70%, var(--mark) 70%); }
.ua__box .uav { position: static; font-size: 1.5cqw; color: #1f63b5; margin-bottom: 1.8cqw; }
@media (max-width: 767px) {
  .ua-wrap::after { content: "← 横にスクロールできます →"; display: block; text-align: center; font-size: 12px; color: var(--key-dark); margin-top: 6px; }
}

/* 窓 */
.win { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.win h4, .floor h4 { font-size: 20px; font-weight: 700; color: var(--key-dark); padding-bottom: 8px; border-bottom: 1px solid var(--key); margin-bottom: 14px; }
.win p, .floor p { font-size: 14px; }
.win__col > img { margin-top: 20px; }
.glass { margin-top: 20px; }
.glass__fig { display: block; width: 100%; height: auto; }
.glass__box { margin-top: 10px; }
.glass__badge { background: #3f6fa8; color: #fff; text-align: center; font-weight: 700; font-size: 17px; line-height: 1.5; padding: 12px; }
.glass__badge span { font-size: 26px; }
.glass__badge b { font-family: "Barlow", sans-serif; font-size: 40px; color: #ffe93a; margin: 0 2px; }
.glass__badge sup { font-size: 12px; }
.glass .glass__note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.7; }
@media (max-width: 767px) {
  .win { grid-template-columns: 1fr; gap: 44px; }
  .win h4, .floor h4 { font-size: 17px; }
  .glass__badge { font-size: 14px; }
  .glass__badge span { font-size: 20px; }
  .glass__badge b { font-size: 32px; }
}

/* 吹抜けの参考プラン（元画像 1800x801 と同じ比率・配置） */
.room { display: grid; grid-template-columns: 3fr 1fr; gap: 40px; }
.rplan { position: relative; container-type: inline-size; }
.rplan img { display: block; width: 100%; }
.rplan > p { position: absolute; margin: 0; line-height: 1.3; }
.rplan__label { left: .6%; top: 4.4%; width: 25.9%; height: 25%; border: .17cqw solid #222; background: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; font-size: 2.2cqw; line-height: 1.6 !important; }
.rplan__fl { width: 5.6cqw; height: 5.6cqw; border: .15cqw solid var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 2.3cqw; background: #fff; }
.rplan__fl.f1 { left: 9.4%; top: 35.1%; } .rplan__fl.f2 { left: 64.1%; top: 15.4%; }
.rplan__free { left: 42.6%; top: 11.5%; width: 17cqw; height: 17cqw; border-radius: 50%; background: rgba(15, 44, 81, .96); color: #fff; font-weight: 700; font-size: 2.3cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rplan__free span { color: #f3e57a; font-size: 2.65cqw; line-height: 1.25; margin-bottom: .3cqw; }
.rplan__or { width: 4.7cqw; height: 4.7cqw; border-radius: 50%; background: var(--navy); color: #fff; font-size: 2.3cqw; display: flex; align-items: center; justify-content: center; top: 54.8%; }
.rplan__or.o1 { left: 31.8%; } .rplan__or.o2 { left: 75.55%; }
.rplan__t { transform: translate(-50%, -50%); font-size: 1.75cqw; color: #555; text-align: center; white-space: nowrap; }
.rplan__t.t1 { left: 22.5%; top: 66.8%; } .rplan__t.t2 { left: 47.8%; top: 63.4%; } .rplan__t.t3 { left: 65.8%; top: 65.9%; } .rplan__t.t4 { left: 91.6%; top: 62.2%; }
.room__sub { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; margin-top: 24px; align-items: start; }
.room h4 { font-size: 19px; font-weight: 700; color: var(--key-dark); line-height: 1.5; margin-bottom: 10px; }
.room p { font-size: 14px; }
.bignum { font-family: "Barlow", sans-serif; font-weight: 400; font-size: 54px; color: var(--key-light); line-height: 1; margin-right: 10px; vertical-align: -6px; -webkit-text-stroke: 1px var(--key); }
.room__side h4 .bignum { margin: 0 0 0 10px; }
.room__side img { margin-top: 16px; }
.req { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; }
.req__item { background: var(--key-light); text-align: center; padding: 12px 8px; color: var(--key-dark); font-weight: 700; font-size: 16px; line-height: 1.4; display: flex; flex-direction: column; justify-content: center; }
.req__item .sm { font-size: 12px; }
.req__item--lead { background: var(--key); color: #fff; }
@media (max-width: 900px) { .room { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .room__sub { grid-template-columns: 1fr; }
  .room h4 { font-size: 17px; }
  .bignum { font-size: 42px; }
  .req { grid-template-columns: 1fr 1fr; }
  .req__item { font-size: 14px; }
}

/* 床暖房（元画像 1263x766 と同じ比率・配置） */
.floor { display: grid; grid-template-columns: 1fr 1.9fr; gap: 40px; }
.floor__side > img:first-child { margin-bottom: 20px; }
.floor__side > img:last-child { margin-top: 20px; }
.heat { position: relative; container-type: inline-size; aspect-ratio: 1263 / 766; margin-bottom: 24px; }
.heat > * { position: absolute; margin: 0; }
.heat__banner { left: 24.4%; top: 0; width: 75.6%; height: 13%; border-radius: 999px; background: #e8821e; color: #fff; text-align: center; font-weight: 700; font-size: 2.7cqw; line-height: 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.heat__banner small { font-size: 1.75cqw; }
.heat__photo { left: 24.4%; top: 17.4%; width: 75.6%; height: 82.6%; object-fit: cover; }
.heat__t { left: .2%; width: 20.2%; height: 18.4%; border: .25cqw solid #e8821e; border-radius: 1.1cqw; background: #fff; color: #e8821e; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 3.3cqw; line-height: 1.15; }
.heat__t small { font-size: 1.4cqw; margin-bottom: .3cqw; }
.heat__t b { font-family: "Barlow", sans-serif; font-weight: 600; font-size: 4.3cqw; }
.heat__t::after { content: ""; position: absolute; left: 100%; top: 50%; width: 35%; height: .2cqw; background: currentColor; }
.heat__t.t1 { top: 19.1%; } .heat__t.t2 { top: 49.3%; }
.heat__t.t3 { top: 79.4%; color: #e2602a; border-color: #e2602a; }
.heat__t.t3::after { top: 57%; }
@media (max-width: 900px) { .floor { grid-template-columns: 1fr; } .floor__main { order: -1; } }

/* 保証と補償 */
.peace__ttl { background: var(--key); color: #fff; text-align: center; font-weight: 700; font-size: 20px; letter-spacing: .08em; padding: 14px 16px; line-height: 1.6; margin-bottom: 20px; }
.peace__grid { display: grid; grid-template-columns: 1fr 3fr; gap: 16px; }
.pc-card { border: 1px solid var(--key); padding: 22px 24px; background: #fff; }
.pc-card h4 { font-family: var(--serif); color: var(--key); font-weight: 700; font-size: 26px; line-height: 1.4; text-align: center; letter-spacing: .08em; }
.pc-card .sm { text-align: center; color: var(--key); font-family: var(--serif); font-size: 15px; margin: 4px 0 14px; }
.pc-card p:not(.sm) { font-size: 13px; line-height: 1.9; }
.pc-card--quake { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.q-head { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding-right: 26px; border-right: 1px solid var(--key); }
.q-head h4 { text-align: left; }
.q-head .no { grid-row: 1; grid-column: 2; font-family: "Barlow", sans-serif; font-size: 76px; line-height: 1; color: var(--key); }
.q-head .sm { grid-column: 1 / -1; margin: 6px 0 0 !important; }
.grades { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.grades li { border: 1px solid var(--key); padding: 16px 10px; text-align: center; }
.grades h4 { font-family: var(--serif); color: var(--key); font-weight: 700; font-size: 17px; letter-spacing: .08em; margin-bottom: 6px; }
.grades p { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--key); font-family: var(--serif); font-weight: 700; font-size: 20px; }
.grades .no { font-family: "Barlow", sans-serif; font-size: 52px; line-height: 1; font-weight: 500; }
.grades .sm { color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.3; text-align: left; }
.peace__bottom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; align-items: center; margin-top: 30px; }
.logos { display: grid; gap: 18px; }
.logos img { max-width: 360px; width: 100%; }
.ground { border: 1px solid var(--key); padding: 22px 28px; }
.ground h4 { text-align: center; color: var(--key); font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.ground .no { font-family: "Barlow", sans-serif; font-size: 44px; margin: 0 2px; line-height: 1; }
.ground p { font-size: 13px; line-height: 1.9; }
@media (max-width: 900px) {
  .peace__grid { grid-template-columns: 1fr; }
  .peace__bottom { grid-template-columns: 1fr; }
  .logos { justify-items: center; }
}
@media (max-width: 767px) {
  .peace__ttl { font-size: 16px; }
  .pc-card { padding: 18px 16px; }
  .pc-card h4 { font-size: 22px; }
  .pc-card--quake { grid-template-columns: 1fr; gap: 12px; }
  .q-head { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--key); justify-content: center; }
  .grades { grid-template-columns: 1fr; gap: 10px; }
  .grades h4 { font-size: 15px; }
  .grades .no { font-size: 44px; }
  .ground { padding: 18px 16px; }
  .ground h4 { font-size: 19px; }
}

/* ---------- outline ---------- */
.otable { margin-bottom: 40px; }
.otable__head { background: var(--key); color: #fff; font-size: 18px; letter-spacing: .12em; padding: 12px 18px; font-family: var(--serif); }
.otable dl { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid #999; }
.otable dl > div { display: grid; grid-template-columns: 150px 1fr; border-right: 1px solid #999; border-bottom: 1px solid #999; }
.otable dl > div.wide { grid-column: 1 / -1; }
.otable dt { background: #9ad6ce; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; padding: 12px 8px; line-height: 1.5; font-family: var(--serif); }
.otable dl > div:nth-child(4n+3) dt, .otable dl > div:nth-child(4n+4) dt { background: var(--key-light); }
.otable dd { padding: 12px 16px; font-size: 13px; line-height: 1.7; font-family: var(--serif); display: flex; flex-direction: column; justify-content: center; }
.otable dd.tbd { color: #c0392b; background: #fffbe0; }
@media (max-width: 767px) {
  .otable__head { font-size: 15px; }
  .otable dl { grid-template-columns: 1fr; }
  .otable dl > div { grid-template-columns: 104px 1fr; }
  .otable dl > div:nth-child(n) dt { background: var(--key-light); }
  .otable dt { font-size: 12px; padding: 10px 6px; }
  .otable dd { padding: 10px 12px; font-size: 12.5px; }
}

/* ---------- CTA / footer ---------- */
.cta { padding: 60px 0 70px; }
.cta__inner { display: flex; align-items: flex-start; justify-content: center; }
.cta__btn { flex: 1; max-width: 420px; text-decoration: none; text-align: center; }
.cta__btn .t { display: block; height: 58px; line-height: 58px; color: #fff; font-weight: 700; font-size: 20px; letter-spacing: .05em; transition: opacity .2s; }
.cta__btn:hover .t { opacity: .85; }
.cta__btn .s { display: block; font-size: 12px; margin-top: 10px; }
.cta__btn--request .t { background: var(--key); border-radius: 29px 0 0 29px; padding-right: 30px; }
.cta__btn--reserve .t { background: var(--accent); border-radius: 0 29px 29px 0; padding-left: 30px; }
.cta__top { position: relative; z-index: 1; flex-shrink: 0; width: 88px; height: 88px; margin: -15px -30px 0; border-radius: 50%; background: var(--key-deep); color: #fff; font-family: "Barlow", sans-serif; font-weight: 700; font-size: 18px; text-decoration: none; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; }
.cta__top::before { content: ""; position: absolute; top: 18px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-bottom-color: #fff; border-top: 0; }
@media (max-width: 767px) {
  .cta { padding: 40px 0 50px; }
  .cta__inner { flex-direction: column; align-items: stretch; gap: 20px; }
  .cta__btn { max-width: none; }
  .cta__btn .t { border-radius: 29px !important; padding: 0 !important; font-size: 17px; }
  .cta__top { display: none; }
}
.site-footer { background: var(--key); color: #fff; padding: 30px 0 18px; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer .tel a { display: flex; align-items: center; gap: 10px; font-family: "Barlow", sans-serif; font-weight: 700; font-size: 34px; text-decoration: none; line-height: 1.2; }
.site-footer .tel img { width: 40px; }
.site-footer .tel p { font-size: 12px; }
.site-footer .links { display: flex; gap: 12px; }
.site-footer .links a { display: block; width: 150px; padding: 12px 0; text-align: center; font-size: 13px; text-decoration: none; background: #eee9dc; color: #333; border: 3px double #bba980; }
.site-footer .agent { text-align: center; font-size: 12px; }
.site-footer .agent img { width: 250px; margin-top: 4px; }
.copy { text-align: center; font-size: 12px; margin-top: 18px; }
@media (max-width: 767px) {
  .site-footer { padding-bottom: 80px; }
  .site-footer__inner { flex-direction: column; text-align: center; }
  .site-footer .tel a { justify-content: center; font-size: 30px; }
  .site-footer .links { flex-direction: column; width: 100%; max-width: 300px; }
  .site-footer .links a { width: 100%; }
}

/* ---------- 追従ボタン ---------- */
.float-nav { position: fixed; right: 16px; bottom: 90px; z-index: 90; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.float-nav.is-show { opacity: 1; visibility: visible; }
.float-nav a { width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: transform .2s; }
.float-nav a:hover { transform: scale(1.05); }
.float-nav svg { width: 26px; height: 26px; }
.f-request { background: var(--key); }
.f-reserve { background: var(--accent); }
.f-tel { display: none !important; }
.f-top { background: var(--key-deep); }
.f-top svg { width: 30px; height: 30px; }
@media (max-width: 767px) {
  .float-nav { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; }
  .float-nav a { flex: 1; width: auto; height: 58px; border-radius: 0; box-shadow: none; font-size: 12px; }
  .f-tel { display: flex !important; background: var(--key-deep); }
  .f-top { flex: 0 0 58px !important; background: #333; }
}

/* ---- 2026-09-29 スマホ調整 ---- */
.ttl__ja { white-space: nowrap; }
.swipe-hint { display: none; text-align: center; font-size: 12px; color: var(--key-dark); margin-top: 6px; }
.zoom-hint { display: none; font-size: 12px; color: var(--muted); margin-top: 6px; }
.heat__banner { font-size: max(2.7cqw, 13px); }
.heat__banner small { font-size: max(1.75cqw, 10px); }
.heat__t small { font-size: max(1.4cqw, 9px); }
.heat__t { font-size: max(3.3cqw, 13px); }
.heat__t b { font-size: max(4.3cqw, 18px); }
@media (max-width: 767px) {
  .ttl__en { font-size: 54px; }
  .zoom-hint { display: block; }
  .rplan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rplan { min-width: 640px; }
  .swipe-hint { display: block; }
  .room__sub { margin-top: 28px; }
  .plan__head { grid-template-columns: 1fr; }
  .plan__no { font-size: 40px; }
  .plan__spec { gap: 0 14px; }
  .heat__banner { left: 0; width: 100%; height: 13%; }
  .heat { aspect-ratio: auto; display: flex; flex-direction: column; gap: 10px; }
  .heat > * { position: static; }
  .heat__banner { order: 0; padding: 8px 12px; border-radius: 12px; height: auto; }
  .heat__photo { order: 1; width: 100%; height: auto; }
  .heat__t { order: 2; width: 100%; height: auto; flex-direction: row; gap: 10px; padding: 6px 12px; border-radius: 8px; font-size: 16px; }
  .heat__t small { font-size: 12px; margin: 0; }
  .heat__t b { font-size: 24px; }
  .heat__t::after { display: none; }
}
.room > *, .floor > *, .win > *, .med-edu > *, .pickup > *, .shopping > *, .concept__grid > * { min-width: 0; }
.ttl { flex-wrap: wrap; row-gap: 4px; }
.ttl__en { white-space: nowrap; }

/* ---- 2026-09-29 修正②：コンセプト帯・ハウスプランのスライド ---- */
/* 丸アイコン群の左端＝ヘッダーの分譲地名（logo__txt）の左端
   ヘッダー: 最大幅1400px・左右24px余白・マーク38px＋間隔10px */
.concept-banner > img { max-height: none; aspect-ratio: 2400 / 1050; }
.concept-banner__inner { position: absolute; inset: 0; max-width: 1400px; margin: 0 auto; padding: 0 24px 0 calc(24px + 38px + 10px); pointer-events: none; }
.concept-banner__badges { left: calc(24px + 38px + 10px); }
.concept-banner__badges li { pointer-events: auto; }
@media (max-width: 1000px) {
  .concept-banner__badges { grid-template-columns: repeat(2, 120px); gap: 8px 10px; }
  .concept-banner__badges li { width: 120px; height: 120px; font-size: 13px; }
  .concept-banner__badges b { font-size: 24px; }
  .concept-banner__badges li:nth-child(2n) { transform: translateY(26px); }
}
@media (max-width: 767px) {
  .concept-banner__inner { position: static; padding: 0; }
}

.hp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.hp-tabs button { width: 100%; border: 0; padding: 0; cursor: pointer; font: inherit; background: var(--key-light); color: var(--key-dark); display: flex; flex-direction: column; transition: opacity .2s, box-shadow .2s; }
.hp-tabs button:hover { opacity: .8; }
.hp-tabs .no { display: block; background: #8ccfc6; color: #fff; font-family: var(--serif); font-size: 26px; line-height: 1; padding: 14px 10px; transition: background .3s; }
.hp-tabs .sub { display: block; font-family: var(--serif); font-size: 16px; padding: 18px 10px; }
.hp-tabs button.is-active .no { background: var(--key); }
.hp-tabs button.is-active { box-shadow: 0 0 0 2px var(--key) inset; }
.hp-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hp-stage { position: relative; }
.hp-viewport { overflow: hidden; transition: height .5s ease; }
.hp-track { display: flex; align-items: flex-start; transition: transform .6s ease; will-change: transform; touch-action: pan-y; }
.hp-slide { flex: 0 0 100%; min-width: 0; margin-bottom: 0; }
.hp-arrow { position: absolute; top: 260px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--key); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: opacity .2s; }
.hp-arrow:hover { opacity: .8; }
.hp-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-top: 3px solid #fff; border-right: 3px solid #fff; }
.hp-arrow--prev { left: -24px; } .hp-arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.hp-arrow--next { right: -24px; } .hp-arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.hp-count { text-align: center; font-family: "Barlow", sans-serif; font-size: 15px; color: var(--muted); margin-top: 14px; letter-spacing: .1em; }
.hp-count .cur { color: var(--key); font-weight: 700; }
.js .hp-slide:not(.is-current) .fade { opacity: 1; transform: none; }
@media (max-width: 1200px) { .hp-arrow--prev { left: -8px; } .hp-arrow--next { right: -8px; } }
@media (max-width: 767px) {
  .hp-tabs { gap: 6px; margin-bottom: 18px; }
  .hp-tabs .no { font-size: 18px; padding: 10px 4px; }
  .hp-tabs .sub { font-size: 12px; padding: 10px 4px; }
  .hp-arrow { top: 150px; width: 38px; height: 38px; }
  .hp-arrow::before { width: 10px; height: 10px; }
  .hp-arrow--prev { left: -12px; } .hp-arrow--next { right: -12px; }
}
@media (prefers-reduced-motion: reduce) { .hp-track, .hp-viewport { transition: none; } }
@media (max-width: 767px) {
  .hp-arrow { display: none; }
  .hp-count::after { content: "　スワイプでも切り替えできます"; font-family: var(--sans); font-size: 11px; letter-spacing: 0; }
}

/* ---- 2026-09-29 修正③：丸アイコンを大きく・明朝体に ---- */
.concept-banner__badges { grid-template-columns: repeat(2, 180px); gap: 12px 16px; }
.concept-banner__badges li { width: 180px; height: 180px; font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.4; }
.concept-banner__badges li:nth-child(2n) { transform: translateY(48px); }
.concept-banner__badges b { font-family: var(--serif); font-weight: 700; font-size: 38px; line-height: 1.1; }
.concept-banner__badges small { font-family: var(--serif); font-size: 13px; }
@media (max-width: 1100px) {
  .concept-banner__badges { grid-template-columns: repeat(2, 140px); gap: 8px 12px; }
  .concept-banner__badges li { width: 140px; height: 140px; font-size: 14px; }
  .concept-banner__badges b { font-size: 30px; }
  .concept-banner__badges small { font-size: 11px; }
  .concept-banner__badges li:nth-child(2n) { transform: translateY(30px); }
}
@media (max-width: 767px) {
  .concept-banner__badges { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .concept-banner__badges li { width: 100%; height: auto; font-size: 14px; }
  .concept-banner__badges li:nth-child(2n) { transform: none; }
  .concept-banner__badges b { font-size: 26px; }
  .concept-banner__badges small { font-size: 12px; }
}

/* ---- 2026-09-29 修正④：KVの物件ロゴを左側に（ヘッダーの分譲地名の左端に揃える） ---- */
.mv__title { right: auto; left: calc(max(0px, (100% - 1400px) / 2) + 24px + 38px + 10px); }
@media (max-width: 767px) {
  .mv__title { left: 0; right: 0; }
}

/* ---- 2026-10-06 修正⑤：ハウスプラン5区画・ポイントを別ブロックに ---- */
.hp-tabs { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.hp-tabs .no { font-size: 22px; }
.hp-tabs .sub { font-size: 14px; padding: 14px 6px; }
.feat .c10 { background: #7a9a2e; }
.plan__fig { max-width: 920px; }
.plan-points { margin-top: 50px; border: 1px solid var(--key); padding: 36px 40px 30px; }
.plan-points .plan__points { margin-top: 0; }
.plan-points .plan__note { margin-top: 24px; }
@media (max-width: 767px) {
  .hp-tabs { gap: 4px; }
  .hp-tabs .no { font-size: 14px; padding: 9px 2px; }
  .hp-tabs .sub { font-size: 10px; padding: 8px 2px; line-height: 1.3; }
  .plan-points { margin-top: 32px; padding: 22px 16px; }
}

/* ---- 2026-10-06 修正⑥：KV本番画像（PC 16:7 / SP 5:8）に差し替え ---- */
@media (max-width: 767px) {
  .mv__bg { aspect-ratio: 5 / 8; }
  .mv__title { top: 10.5%; }
  .mv__en { font-size: 64px; }
}