/*
Theme Name: Mansion Owners
Theme URI: https://mansionowners.com/
Author: Mansion Owners
Description: マンション大規模修繕・改修工事の相談窓口「Mansion Owners」公式サイト用オリジナルテーマ。
Version: 1.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mansion-owners
*/

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

:root{
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --ink:#20262b;
  --ink-soft:#2c333a;
  --paper:#e9eae3;
  --paper-hi:#f4f4ef;
  --surface:#fbfaf6;
  --rust:#a1552f;
  --rust-hi:#c26a3f;
  --moss:#485338;
  --steel:#6b7078;
  --line: rgba(32,38,43,0.16);
  --line-strong: rgba(32,38,43,0.32);
  --on-ink:#e9e6db;
  --on-ink-soft: rgba(233,230,219,0.62);
  --shadow: 0 20px 50px -30px rgba(32,38,43,0.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--rust); color:var(--paper-hi); }

/* ---------- header / nav ---------- */
.banner{
  background:var(--ink);
  color:var(--on-ink-soft);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-align:center;
  padding:7px 12px;
}
header.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,56px);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:.03em;
  color:inherit;
  text-decoration:none;
  display:flex; align-items:baseline; gap:8px;
}
.brand span{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  color:var(--rust);
  letter-spacing:.14em;
}
nav.links{ display:flex; gap:clamp(14px,2vw,28px); }
nav.links a{
  color:inherit; text-decoration:none;
  font-size:13px; letter-spacing:.04em;
  opacity:.78;
}
nav.links a:hover{ opacity:1; }
.nav-cta{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.06em;
  border:1px solid var(--line-strong);
  padding:8px 14px;
  color:inherit; text-decoration:none;
  white-space:nowrap;
}
.nav-cta:hover{ border-color:var(--rust); color:var(--rust); }
@media (max-width:820px){ nav.links{ display:none; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(20px,4vw,56px) clamp(40px,6vw,72px);
  isolation:isolate;
  background:linear-gradient(155deg, #1c2a2f 0%, #20262b 55%, #2c3630 100%);
}
.hero-eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:12px; letter-spacing:.14em;
  color:rgba(233,230,219,.82);
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px;
}
.hero-eyebrow::before{ content:""; width:26px; height:1px; background:var(--rust-hi); }
.hero h1{
  font-weight:700;
  color:#f4f1e8;
  font-size:clamp(34px,6vw,68px);
  line-height:1.22;
  letter-spacing:-.02em;
  margin:0 0 22px;
  max-width:800px;
}
.hero-sub{
  color:rgba(244,241,232,.82);
  font-size:clamp(14px,1.4vw,17px);
  max-width:46ch;
  line-height:1.9;
  margin:0 0 34px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:"JetBrains Mono",monospace;
  font-size:12px; letter-spacing:.06em;
  padding:13px 22px;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:opacity .2s ease, background .2s ease, color .2s ease;
  border:1px solid transparent;
}
.btn.primary{ background:var(--rust-hi); color:#1a1410; }
.btn.primary:hover{ opacity:.88; }
.btn.ghost{ border-color:rgba(244,241,232,.5); color:#f4f1e8; }
.btn.ghost:hover{ border-color:#f4f1e8; }

/* ---------- generic section ---------- */
section{ padding:clamp(56px,9vw,110px) clamp(20px,4vw,56px); }
.wrap{ max-width:1180px; margin:0 auto; }
.eyebrow-label{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.16em;
  color:var(--rust);
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.eyebrow-label::before{ content:"§"; opacity:.7; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:44px; flex-wrap:wrap;
}
.section-head h2{
  font-weight:700; font-size:clamp(24px,3vw,34px); margin:0;
  letter-spacing:-.01em; text-wrap:balance;
}
.section-head p{ max-width:42ch; margin:0; color:var(--steel); font-size:14px; line-height:1.8; }

/* ---------- mission / vision / values ---------- */
.mv-block{ margin-bottom:34px; }
.mv-idx{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--rust); margin-bottom:8px; }
.mv-head{ font-size:clamp(22px,3vw,32px); font-weight:700; margin:0; letter-spacing:-.01em; text-wrap:balance; }
.values{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--line-strong); margin-top:20px;
}
.value-item{ padding:26px 24px 0 0; border-right:1px solid var(--line); }
.value-item:last-child{ border-right:none; }
.value-tag{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; color:var(--steel); margin-bottom:10px; }
.value-item h3{ font-size:clamp(17px,2vw,20px); font-weight:600; margin:0; line-height:1.6; }
@media (max-width:760px){
  .values{ grid-template-columns:1fr; }
  .value-item{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px; }
}

/* ---------- pain points ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.pain-num{
  width:56px; height:56px; border-radius:50%; background:var(--rust);
  color:var(--on-ink); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-num); font-size:22px; font-weight:700; margin-bottom:20px;
}
.pain-grid p{ font-size:16px; color:var(--ink-soft); line-height:1.75; margin:0; }
@media (max-width:760px){ .pain-grid{ grid-template-columns:1fr; gap:28px; } }

/* ---------- body copy ---------- */
.body-copy{ font-size:16px; color:var(--ink-soft); line-height:1.9; max-width:76ch; }
.body-copy p{ margin:0 0 20px; }
.body-copy p:last-child{ margin-bottom:0; }

/* ---------- stats band ---------- */
.stats-band{ background:var(--ink); color:var(--on-ink); }
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); }
.stat{ padding:0 30px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat-num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:700; font-size:clamp(34px,4.6vw,54px); color:var(--on-ink); line-height:1; }
.stat-label{ margin-top:14px; font-size:13px; color:var(--on-ink-soft); line-height:1.7; }
.stats-band .body-copy{ margin-top:40px; color:var(--on-ink-soft); max-width:80ch; }
.stats-band .body-copy p{ margin:0; }
@media (max-width:760px){
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1px solid var(--line); padding:24px 0; }
  .stat:first-child{ padding-top:0; }
}

/* ---------- pillars (feature list) ---------- */
.pillars{ border-top:1px solid var(--line-strong); }
.pillar-card{ display:grid; grid-template-columns:230px 1fr; gap:32px; padding:40px 0; border-bottom:1px solid var(--line); }
.pillar-idx{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--rust); margin-bottom:8px; }
.pillar-name{ font-weight:800; font-size:clamp(21px,2.4vw,27px); color:var(--ink); line-height:1.35; }
.pillar-body h3{ font-weight:500; font-size:16px; color:var(--ink-soft); margin:0 0 10px; }
.pillar-body p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.8; max-width:60ch; }
@media (max-width:760px){ .pillar-card{ grid-template-columns:1fr; gap:12px; } }

/* ---------- pricing ---------- */
.price-cards{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.price-cards.cols-3{ grid-template-columns:repeat(3,1fr); }
.price-cards.cols-2{ grid-template-columns:repeat(2,1fr); }
.price-card{ background:var(--surface); padding:30px 26px; display:flex; flex-direction:column; }
.price-card h3{ font-weight:700; font-size:18px; color:var(--rust); margin:0 0 4px; }
.price-card .amount{ font-family:var(--font-num); font-size:15px; color:var(--ink); margin:0 0 16px; }
.price-feat{ list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--ink-soft); line-height:1.9; }
.price-feat li{ padding-left:14px; position:relative; }
.price-feat li::before{ content:"—"; position:absolute; left:0; color:var(--rust); }
.price-note{ font-size:12px; color:var(--steel); margin-top:auto; padding-top:20px; line-height:1.7; }
@media (max-width:900px){ .price-cards, .price-cards.cols-2{ grid-template-columns:1fr; } }

/* ---------- pricing divider ---------- */
.page-split-block{
  background:var(--paper-hi);
  border-top:3px dashed var(--line-strong);
  border-bottom:3px dashed var(--line-strong);
  text-align:center;
}
.page-split-block h2{ font-size:clamp(28px,4vw,44px); font-weight:700; margin:0 0 16px; }
.page-split-block p{ font-size:15px; color:var(--ink-soft); margin:0 auto; max-width:52ch; }

/* ---------- plan steps ---------- */
.plan-step{ display:grid; grid-template-columns:200px 1fr; gap:32px; padding:36px 0; border-bottom:1px solid var(--line); }
.plan-step:first-child{ border-top:1px solid var(--line-strong); }
.plan-step .plan-num{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--rust); }
.plan-step h3{ font-weight:700; font-size:clamp(19px,2.2vw,23px); margin:0 0 12px; color:var(--ink); }
.plan-step .body-copy{ font-size:15px; }
.plan-note{ font-weight:700; }
@media (max-width:760px){ .plan-step{ grid-template-columns:1fr; gap:10px; } }

/* ---------- closing quote ---------- */
.quote-section{ background:var(--paper-hi); }
.quote-section blockquote{
  margin:0 auto; max-width:34ch; font-size:clamp(22px,3vw,32px); font-weight:700; line-height:1.6;
}

/* ---------- profile ---------- */
.profile{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(30px,5vw,72px); align-items:center; }
.profile-photo{ aspect-ratio:3/4; overflow:hidden; background:var(--paper-hi); border-radius:2px; }
.profile-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.94); }
.profile-role{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--rust); margin-bottom:10px; }
.profile h2{ font-weight:700; font-size:clamp(24px,3.4vw,34px); margin:0 0 18px; letter-spacing:-.01em; }
.profile p{ color:var(--ink-soft); line-height:2; font-size:15px; max-width:60ch; }
.story{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.story div{ border-left:2px solid var(--rust); padding-left:14px; }
.story b{ display:block; font-family:var(--font-num); font-size:22px; color:var(--ink); margin-bottom:6px; }
.story span{ font-size:12px; color:var(--steel); line-height:1.6; display:block; }
@media (max-width:760px){ .profile{ grid-template-columns:1fr; } .story{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
footer.titleblock{ background:var(--ink); color:var(--on-ink); }
footer.titleblock .brand{ color:var(--on-ink); margin-bottom:8px; }
.tb-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; border-top:1px solid var(--line); padding-top:44px; margin-top:36px; }
.tb-grid h2{ font-weight:700; font-size:clamp(22px,2.6vw,30px); margin:0; color:var(--on-ink); letter-spacing:-.01em; text-wrap:balance; }
.tb-fields{ font-family:var(--font-num); font-size:13px; line-height:2.4; border:1px solid var(--line); }
.tb-fields div{ display:grid; grid-template-columns:88px 1fr; padding:10px 16px; border-bottom:1px solid var(--line); }
.tb-fields div:last-child{ border-bottom:none; }
.tb-fields span.k{ color:var(--on-ink-soft); }
.tb-fields span.v{ color:var(--on-ink); }
.foot-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:56px; padding-top:20px; border-top:1px solid var(--line);
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.05em;
  color:var(--on-ink-soft); flex-wrap:wrap; gap:10px;
}
@media (max-width:760px){ .tb-grid{ grid-template-columns:1fr; } }

/* ---------- hero slider ---------- */
.hero{ overflow:hidden; }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 clamp(20px,4vw,56px) clamp(40px,6vw,72px);
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1.4s ease;
  pointer-events:none;
}
.hero-slide.is-active{ opacity:1; pointer-events:auto; }

/* ---------- header CTA buttons ---------- */
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-cta.primary{
  background:var(--rust-hi); color:#1a1410; border-color:var(--rust-hi);
}
.nav-cta.primary:hover{ opacity:.88; border-color:var(--rust-hi); color:#1a1410; }
@media (max-width:820px){ .nav-actions .nav-cta:not(.primary){ display:none; } }

/* ---------- values grid (4 balanced items) ---------- */
.values.values-4{
  grid-template-columns:repeat(2,1fr);
  gap:28px 48px;
  border-top:none;
}
.values.values-4 .value-item{ border-right:none; padding:0; }
.values.values-4 .value-item h3{ font-size:clamp(21px,2.6vw,28px); line-height:1.5; }
@media (max-width:600px){ .values.values-4{ grid-template-columns:1fr; } }

/* ---------- hero values slide ---------- */
.hero-values{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 48px; max-width:840px; }
.hero-value{ display:flex; gap:10px; color:#f4f1e8; font-size:clamp(20px,2.8vw,30px); font-weight:700; line-height:1.5; }
.hero-value-num{ font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--rust-hi); flex:none; }
@media (max-width:600px){ .hero-values{ grid-template-columns:1fr; } }