@charset "utf-8";

/* フォレスタ守山 / クオリティ（PC・SPデザイン 2026.10） */
.is-quality-page {
  --quality-brown: #795b36;
  --quality-soft: #f6f6f3;
  --quality-ink: #211b18;
}
.l-page.quality { padding: 90px 0 0; color: var(--quality-ink); }
.quality-container { width: min(73%, 1400px); margin-inline: auto; }
.quality picture, .quality img { display: block; width: 100%; height: auto; }
.quality h1, .quality h2, .quality h3, .quality h4 { font-weight: 400; }
.quality-sp-only { display: none; }
.quality-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quality-copy { font-size: clamp(12px, .84vw, 16px); line-height: 2.4; }
.quality-note { font-size: clamp(10px, .58vw, 12px); line-height: 1.7; margin-top: 12px; }
.quality-heading {color: var(--quality-brown);font-size: clamp(23px, 2vw, 38px);line-height: 1.55;letter-spacing: .12em;}
.quality-heading__note { font-size: .5em; letter-spacing: .08em; white-space: nowrap; }
.quality-heading + .quality-copy { margin-top: 30px; }
.quality-category {padding: 10px 20px;color: #fff;background: linear-gradient(#624a2e, #725635);font-size: clamp(20px, 1.55vw, 30px);line-height: 1.3;letter-spacing: .1em;text-align: center;}
.quality-section-lead {margin-top: 35px;font-size: clamp(17px, 1.45vw, 28px);line-height: 1.9;letter-spacing: .08em;text-align: center;}
.quality a:focus-visible, .quality-page-top:focus-visible { outline: 3px solid #b99555; outline-offset: 5px; }

/* タイトル・ZEH */
.quality-intro { padding-top: clamp(110px, 11.2vw, 215px); text-align: center; }
.quality-intro h1 { font-family: garamond, 'Times New Roman', serif; font-size: clamp(44px, 4.8vw, 92px); letter-spacing: .065em; line-height: 1.1; }
.quality-intro h1 span { display: block; margin-top: 10px; font-family: 'Zen Old Mincho', serif; font-size: clamp(11px, .84vw, 16px); letter-spacing: .22em; }
.quality-intro > p {margin: 54px 0 44px;font-size: clamp(20px, 1.9vw, 36px);line-height: 1.7;letter-spacing: .14em;}
.quality-zeh { padding: 76px 0 125px; }
.quality-zeh__title { width: 58.7%; margin: 0 auto; }
.quality .quality-zeh__diagram { width: 71.4%; margin: 75px auto 45px; }
.quality-zeh__copy { text-align: center; }

/* 太陽光発電・エネファーム */
.quality-solar { background: var(--quality-soft); padding: 60px 0; }
.quality-solar__inner { display: grid; grid-template-columns: 45% 51%; justify-content: space-between; align-items: center; }
.quality-solar__photo img { aspect-ratio: 535 / 290; object-fit: cover; }
.quality-enefarm { margin-top: 110px; }
.quality-enefarm__grid { display: grid; grid-template-columns: minmax(0, 73%) minmax(0, 24%); column-gap: 3%; position: relative; }
.quality-enefarm__grid > .quality-heading { grid-column: 1; padding-right: 24%; white-space: nowrap; }
.quality-enefarm__copy { grid-column: 1; margin-top: 36px; }
.quality .quality-enefarm__logo { position: absolute; width: 16%; top: 8px; right: 27%; }
.quality-enefarm__product { grid-column: 2; grid-row: 1 / 4; align-self: start; margin-top: -45px; }
.quality-benefits { grid-column: 1; margin-top: 45px; }
.quality-benefits h4 { font-size: clamp(20px, 1.55vw, 30px); line-height: 1.4; letter-spacing: .12em; color: #776737; }
.quality-benefits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5%; margin-top: 12px; }
.quality-benefits .quality-note { margin-top: 8px; }
.quality-resilience { margin-top: 25px; }
.quality-car { display: grid; grid-template-columns: 41% 55%; justify-content: space-between; align-items: start; margin-top: 180px; }
.quality-car .quality-copy { margin-top: 35px; }
.quality .quality-car__award { width: 47%; margin: 16px 0 0 auto; }

/* 全館空調・換気 */
.quality-clean { margin-top: 245px; }
.quality-air { display: grid; grid-template-columns: 21% 25% 48.7%; grid-template-rows: auto 1fr; column-gap: 2.65%; margin-top: 80px; align-items: start; }
.quality-air > h3 { grid-column: 1 / 3; grid-row: 1; margin-bottom: 30px; }
.quality-air__copy { grid-column: 1; grid-row: 2; }
.quality-air__room { grid-column: 2; grid-row: 2; }
.quality-air__diagram { grid-column: 3; grid-row: 1 / 3; }
.quality-air .quality-copy { margin-top: 0; }
.quality-ventilation { margin-top: 130px; }
.quality-ventilation > h3, .quality-ventilation > p { text-align: center; }
.quality-ventilation > .quality-copy { margin-top: 8px; }
.quality-ventilation__grid { display: grid; grid-template-columns: 51.5% 46.5%; gap: 2%; align-items: stretch; margin-top: 26px; }
.quality-ventilation__grid picture { align-self: center; }
.quality-filter { display: grid; grid-template-columns: 46% 50.6%; justify-content: space-between; margin-top: 70px; }
.quality-filter h3 {font-size: clamp(21px, 1.65vw, 32px);letter-spacing: .08em;line-height: 1.6;}
.quality-filter .quality-copy { margin-top: 12px; }
.quality .quality-filter__chart { width: 90%; margin: 30px auto 0; }

/* 電子錠。SPではロゴをドアの横へ移動する。 */
.quality-security { margin-top: 190px; padding-bottom: 170px; }
.quality-security .quality-section-lead { margin-top: 34px; }
.quality-security .quality-section-lead span { font-size: .7em; white-space: nowrap; letter-spacing: .08em; }
.quality-security__grid { display: grid; grid-template-columns: 30% 29.5% 34.5%; column-gap: 3%; row-gap: 34px; margin-top: 60px; align-items: start; }
.quality-security__intro { grid-column: 2 / 4; grid-row: 1; }
.quality-security__door { grid-column: 1; grid-row: 1 / 4; }
.quality-security__family { grid-column: 2; grid-row: 2; }
.quality-security__operations { grid-column: 3; grid-row: 2; }
.quality-security__linkage { grid-column: 2; grid-row: 3; }
.quality-security__logos { grid-column: 3; grid-row: 3; align-self: center; }
.quality-security__grid h3 {position: relative;padding-left: 1.15em;color: var(--quality-brown);font-size: clamp(18px, 1.4vw, 27px);line-height: 1.45;letter-spacing: .05em;}
.quality-security__grid h3::before { content: ''; position: absolute; left: 0; top: .25em; width: .8em; height: .8em; background: var(--quality-brown); }
.quality-security__operations h3 + p { margin-top: 4px; line-height: 1.9; }
.quality-security__operations p + h3 { margin-top: 22px; }
.quality-security__linkage p { margin-top: 12px; }

/* 共通フッターの手前 */
a.quality-page-top { display: flex; justify-content: center; align-items: center; gap: 30px; padding: 34px 0; background: #10130e; color: #b7a58d; font-family: garamond, serif; font-size: 18px; letter-spacing: .2em; }
.quality-page-top span { font-size: 24px; }
.quality-disclaimer { width: 88%; margin: 28px auto 0; font-size: 10px; line-height: 1.8; }
.is-quality-page .footer { margin-top: 0; }

@media (max-width: 1000px) {
  .l-page.quality { padding: 0; }
  .quality-container { width: 87.5%; }
  .quality-sp-only { display: block; }
  br.quality-sp-only { display: inline; }
  .quality-pc-only { display: none; }
  .quality-copy { font-size: clamp(13px, 3.3vw, 22px); line-height: 1.75; text-align: justify; }
  .quality-note { font-size: clamp(10px, 2.6vw, 17px); line-height: 1.6; margin-top: 12px; }
  .quality-heading { font-size: clamp(21px, 5.2vw, 34px); line-height: 1.55; letter-spacing: .19em; }
  .quality-heading__note { font-size: .6em; letter-spacing: .02em; }
  .quality-heading + .quality-copy { margin-top: 24px; }
  .quality-category { padding: 8px 12px; font-size: clamp(18px, 4.3vw, 28px); line-height: 1.25; }
  .quality-section-lead { font-size: clamp(17px, 4.55vw, 30px); line-height: 1.65; letter-spacing: .1em; margin-top: 24px; }
  .quality-intro { width: 100%; padding-top: 13%; }
  .quality-intro h1 { font-size: clamp(29px, 7.3vw, 50px); letter-spacing: .04em; }
  .quality-intro h1 span { font-size: clamp(10px, 2.3vw, 16px); margin-top: 8px; letter-spacing: .16em; }
  .quality-intro > p { font-size: clamp(16px, 3.9vw, 26px); line-height: 1.35; letter-spacing: .18em; margin: 6% 2% 12%; }
  .quality-zeh { padding: 20px 0 16%; }
  .quality-zeh__title { width: 100%; }
  .quality .quality-zeh__diagram { width: 107%; max-width: none; margin: 14% -3.5% 10%; }
  .quality-zeh__copy { text-align: justify; }
  .quality-solar { padding: 17% 0; }
  .quality-solar__inner { display: block; }
  .quality-solar__photo { margin-top: 12%; }
  .quality-enefarm { margin-top: 15%; }
  .quality-enefarm__grid { grid-template-columns: 42% 58%; gap: 0; }
  .quality-enefarm__grid > .quality-heading { grid-column: 1 / -1; font-size: clamp(20px, 5vw, 34px); padding: 0; letter-spacing: .15em; white-space: normal; }
  .quality-enefarm__copy { grid-column: 1 / -1; margin-top: 24px; }
  .quality .quality-enefarm__logo { position: static; grid-column: 1; grid-row: 3; width: 95%; align-self: center; margin-top: 15%; }
  .quality-enefarm__product { grid-column: 2; grid-row: 3; margin-top: 15px; }
  .quality-benefits { grid-column: 1 / -1; margin-top: 35px; }
  .quality-benefits h4 { font-size: clamp(21px, 5.1vw, 34px); letter-spacing: .1em; }
  .quality-benefits__grid { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
  .quality-benefits .quality-note { margin-top: 16px; }
  .quality-resilience { width: 114.286%; margin: 28% -7.143% 0; }
  .quality-car { display: block; margin-top: 24%; }
  .quality-car .quality-copy { margin-top: 30px; }
  .quality .quality-car__award { width: 49%; margin: 24px auto 35px; }
  .quality-clean { margin-top: 22%; }
  .quality-air { display: flex; flex-direction: column; margin-top: 10%; gap: 0; }
  .quality-air > h3 { margin-bottom: 24px; }
  .quality-air__room { margin-top: 30px; }
  .quality-air__diagram { margin-top: 12px; }
  .quality-ventilation { margin-top: 20%; }
  .quality-ventilation > h3, .quality-ventilation > p { text-align: left; }
  .quality-ventilation > .quality-copy { margin-top: 24px; }
  .quality-ventilation__grid { width: 106%; margin: 30px -3% 0; grid-template-columns: 1fr; gap: 14px; }
  .quality-filter { display: block; margin-top: 26%; }
  .quality-filter h3 { font-size: clamp(22px, 5.4vw, 36px); letter-spacing: .15em; }
  .quality-filter .quality-copy { margin-top: 28px; }
  .quality .quality-filter__chart { width: 100%; margin-top: 24px; overflow: hidden; }
  .quality-filter__chart img { width: 125%; max-width: none; margin-left: -12.5%; }
  .quality-filter figure { width: 106%; margin: 24px -3% 0; }
  .quality-security { margin-top: 32%; padding-bottom: 0; }
  .quality-security .quality-section-lead { width: 106%; margin: 30px -3% 0; font-size: clamp(17px, 4.4vw, 29px); line-height: 1.6; letter-spacing: .13em; }
  .quality-security .quality-section-lead span { display: block; font-size: .72em; margin-top: 6px; }
  .quality-security__grid { grid-template-columns: 50% 42%; column-gap: 8%; row-gap: 30px; margin-top: 40px; }
  .quality-security__intro { grid-column: 1 / -1; grid-row: 1; margin-bottom: 15px; }
  .quality-security__door { grid-column: 1; grid-row: 2; }
  .quality-security__logos { grid-column: 2; grid-row: 2; }
  .quality-security__family { grid-column: 1 / -1; grid-row: 3; }
  .quality-security__operations { grid-column: 1 / -1; grid-row: 4; }
  .quality-security__linkage { grid-column: 1 / -1; grid-row: 5; }
  .quality-security__grid h3 { font-size: clamp(21px, 5.2vw, 34px); }
  .quality-security__operations h3 + p { margin-top: 20px; }
  .quality-security__operations p + h3 { margin-top: 45px; }
  .quality-security__linkage p { margin-top: 24px; }
  .quality-actions { width: 77%; margin: 30% auto 40%; }
  .quality a.quality-action { display: flex; position: relative; align-items: center; justify-content: center; min-height: 56px; padding: 18px 40px 18px 20px; background: linear-gradient(105deg, #831b22, #480e13); color: #fff; font-size: clamp(16px, 3.9vw, 25px); letter-spacing: .15em; }
  .quality a.quality-action--request { background: linear-gradient(105deg, #32744c, #132e21); }
  .quality-action + .quality-action { margin-top: 35px; }
  .quality-action::after { content: ''; position: absolute; right: 20px; width: 26px; height: 7px; background: url(../img/btn_arrow_white.svg) no-repeat center / contain; }
  .quality a.quality-action:hover { opacity: .8; }
  a.quality-page-top { padding: 28px 0; font-size: 16px; }
  .quality-disclaimer { width: 87.5%; font-size: clamp(10px, 2.6vw, 17px); margin-top: 20px; }
}
/* タブレットでも図版内の文字を読みやすく保つ。共通ヘッダーは800pxで切替。 */
@media (min-width: 801px) and (max-width: 1000px) {
  .l-page.quality { padding-top: 90px; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .quality-container { width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.is-quality-page) { animation: none; }
  .is-quality-page a { transition: none; }
}