/* --red=ネイビー(主役) ／ --gold=金(差し色) ／ --bg=アイボリー背景 ／ --card=白カード */
:root { --red:#1c2b4a; --gold:#8a6e22; --ink:#1a1a1a; --sub:#595959; --faint:#8c8c8c; --line:#e4ddce; --bg:#f6f3ee; --card:#ffffff; }
.card-shadow { }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.serif { font-family:"Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif; font-weight:500; }
.wrap { max-width:1080px; margin:0 auto; padding:0 40px; }
.label { font-size:12px; letter-spacing:3px; color:var(--gold); }
.ic { line-height:1; }
.card-ic { font-size:26px; color:var(--gold); display:block; margin-bottom:14px; }
.stat-ic { font-size:22px; color:var(--gold); display:block; margin-bottom:10px; }
.nav-ic { font-size:15px; color:var(--faint); margin-right:6px; vertical-align:-2px; }
nav a.active .nav-ic { color:var(--red); }
.line-ic { font-size:18px; color:var(--gold); margin-right:10px; vertical-align:-3px; }
.faq-ic { font-size:17px; color:var(--gold); margin-right:8px; vertical-align:-2px; }
.btn .ti, .cta-main .ti, .more .ti, .form button .ti { vertical-align:-2px; margin:0 4px; }
.btn .ti { font-size:24px; vertical-align:-6px; }

/* header */
header { display:flex; justify-content:space-between; align-items:center; padding:22px 40px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(246,243,238,.95); backdrop-filter:saturate(120%) blur(2px); z-index:10; }
.logo { font-size:16px; letter-spacing:5px; text-decoration:none; }
nav { display:flex; gap:26px; font-size:13px; letter-spacing:1.2px; }
nav a { color:var(--sub); text-decoration:none; padding-bottom:3px; border-bottom:1px solid transparent; }
nav a:hover { color:var(--ink); }
nav a.active { color:var(--red); border-bottom-color:var(--red); }
/* スマホ用メニュートグル（PCでは非表示） */
.nav-toggle, .fnav-toggle { display:none; }

/* home hero */
.home-hero { padding:84px 0 64px; }
.home-hero h1 { font-size:44px; line-height:1.6; margin:22px 0 26px; }
.home-hero p { font-size:14px; line-height:2.2; color:var(--sub); max-width:480px; }
.cta-row { margin-top:38px; display:flex; gap:30px; font-size:13px; flex-wrap:wrap; }
.cta-main { border-bottom:1px solid var(--red); padding-bottom:7px; color:var(--ink); text-decoration:none; }
.cta-sub { border-bottom:1px solid var(--line); padding-bottom:7px; color:var(--sub); text-decoration:none; }
.full-img { width:100%; height:400px; object-fit:cover; display:block; }
.img-cap { text-align:right; font-size:11px; color:var(--faint); letter-spacing:1px; padding:10px 40px; }

/* page hero banner (sub pages) */
.page-hero { position:relative; height:300px; background-color:#81d8d0; background-size:cover; background-position:left center; background-repeat:no-repeat; display:flex; align-items:flex-end; }
.page-hero .ov { position:absolute; inset:0; background:transparent; }
.page-hero .wrap { position:relative; padding-bottom:38px; }
.page-hero .label { color:#0e3b39; opacity:1; }
.page-hero h1 { color:#0e3b39; font-size:34px; margin-top:12px; }

/* sub nav tabs */
.subnav { display:flex; border-bottom:1px solid var(--line); margin-top:0; flex-wrap:wrap; }
.subnav a { padding:18px 26px; font-size:14px; color:var(--sub); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.subnav a.active { color:var(--red); border-bottom-color:var(--red); }
.subnav a:first-child { padding-left:0; }

/* stats */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:66px 0; }
.stats > div { background:var(--card); border:0.5px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(40,30,10,.04); padding:26px 28px; }
.stats .num { font-size:34px; }
.stats .num.sm { font-size:20px; line-height:1.5; }
.stats .num small { font-size:15px; }
.stats .cap { font-size:12px; letter-spacing:1px; color:var(--faint); margin-top:8px; }

/* generic section */
section { border-top:1px solid var(--line); padding:78px 0; }
section.first { border-top:none; }
section h2 { font-size:28px; margin:16px 0 14px; }
.lead { font-size:14px; line-height:2.1; color:var(--sub); max-width:560px; margin-bottom:42px; }
.about2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:26px; }
.about2 p { font-size:14px; line-height:2.1; color:var(--sub); }
.about-link { color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:3px; text-decoration:none; display:inline-block; margin-top:16px; font-size:13px; }

/* 4-up grid (管理組合) */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid2 > div { background:var(--card); border:0.5px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(40,30,10,.04); padding:28px 30px; }
.no { font-size:12px; color:var(--gold); margin-bottom:8px; }
.grid2 h3 { font-size:16px; font-weight:600; margin-bottom:8px; }
.grid2 p { font-size:13px; line-height:1.95; color:var(--sub); }

/* steps */
.steps { display:flex; gap:14px; }
.steps > div { flex:1; background:var(--card); border:0.5px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(40,30,10,.04); padding:26px 24px; }
.steps .when { font-size:13px; color:var(--gold); margin-bottom:6px; }
.steps h3 { font-size:14px; margin-bottom:6px; }
.steps p { font-size:12.5px; line-height:1.9; color:var(--sub); }

/* works list */
.works-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; }
.more { font-size:12px; letter-spacing:1px; color:var(--sub); border-bottom:1px solid var(--line); padding-bottom:5px; text-decoration:none; }
.work { display:flex; align-items:center; gap:22px; background:var(--card); border:0.5px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(40,30,10,.04); padding:16px 22px; margin-bottom:12px; text-decoration:none; }
.work img { width:128px; height:80px; object-fit:cover; flex-shrink:0; border-radius:6px; }
.work .t { flex:1; }
.work h3 { font-size:15px; font-weight:600; }
.work p { font-size:12px; color:var(--faint); margin-top:5px; }
.work .yr { font-size:14px; color:var(--faint); }

/* property grid (大規模修繕一覧) */
.props { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); column-gap:40px; }
.props > div { display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); }
.props .pn { font-size:14px; }
.props .pl { font-size:12px; color:var(--faint); white-space:nowrap; }

/* type cards (各種改修) */
.types > div { background:var(--card); border:0.5px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(40,30,10,.04); padding:28px 30px; margin-bottom:14px; display:grid; grid-template-columns:200px 1fr; gap:24px; }
.types .tk { font-size:17px; }
.types .tk small { display:block; font-size:11px; letter-spacing:1.5px; color:var(--gold); margin-top:6px; }
.types p { font-size:13.5px; line-height:2; color:var(--sub); }

/* mvv */
.mvv > div { background:var(--card); border:0.5px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(40,30,10,.04); padding:32px; margin-bottom:14px; display:grid; grid-template-columns:170px 1fr; gap:24px; }
.mvv .k { color:var(--gold); letter-spacing:2px; font-size:14px; }
.mvv h3 { font-size:20px; margin-bottom:12px; }
.mvv p { font-size:14px; line-height:2; color:var(--sub); }

/* value cards */
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.values > div { background:var(--card); border:0.5px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(40,30,10,.04); padding:28px; }
.values .vn { font-size:12px; color:var(--gold); }
.values h3 { font-size:18px; margin:10px 0 10px; }
.values p { font-size:13px; line-height:1.9; color:var(--sub); }

/* info table */
.info { width:100%; border-collapse:collapse; }
.info th, .info td { text-align:left; vertical-align:top; padding:18px 0; border-bottom:1px solid var(--line); font-size:14px; }
.info th { width:190px; color:var(--sub); font-weight:500; }
.info td { line-height:1.85; }

/* 施工実績リスト */
.rec-h { font-size:16px; font-weight:600; margin:36px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.rec-h .ti { color:var(--gold); margin-right:8px; vertical-align:-2px; font-size:18px; }
.reclist { display:grid; grid-template-columns:1fr 1fr; gap:0 44px; }
.reclist > div { font-size:13.5px; line-height:1.6; color:var(--sub); padding:10px 0 10px 18px; border-bottom:1px solid var(--line); position:relative; }
.reclist > div::before { content:""; position:absolute; left:2px; top:17px; width:5px; height:5px; background:var(--gold); border-radius:50%; }

/* faq */
.faq > div { background:var(--card); border:0.5px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(40,30,10,.04); padding:22px 26px; margin-bottom:12px; }
.faq h3 { font-size:15px; font-weight:600; margin-bottom:8px; }
.faq p { font-size:13px; line-height:1.95; color:var(--sub); }

/* form */
.form { max-width:640px; }
.form label { display:block; font-size:13px; margin:22px 0 8px; color:var(--sub); }
.form .req { color:var(--red); font-size:11px; margin-left:6px; }
.form input, .form select, .form textarea { width:100%; padding:13px 14px; border:1px solid var(--line); font-size:14px; font-family:inherit; background:#fff; }
.form textarea { min-height:140px; resize:vertical; }
.form button { margin-top:30px; background:var(--red); color:#fff; border:none; padding:15px 54px; font-size:14px; letter-spacing:3px; cursor:pointer; }
.cinfo { border-top:1px solid var(--line); margin-top:8px; padding-top:30px; font-size:14px; line-height:2.1; color:var(--sub); }
.cinfo b { color:var(--ink); font-weight:500; }

/* prose */
.prose { max-width:760px; }
.prose p { font-size:14px; line-height:2; color:var(--sub); margin-bottom:14px; }
.prose h3 { font-size:16px; margin:32px 0 12px; }
.prose ol { margin:0 0 14px 1.4em; }
.prose li { font-size:14px; line-height:2; color:var(--sub); }

/* closing CTA */
.closing { text-align:center; }
.closing h2 { font-size:26px; margin-bottom:12px; }
.closing p { font-size:13px; color:var(--sub); margin-bottom:32px; }
.btn { display:inline-block; border:1px solid var(--red); color:var(--red); font-size:13px; letter-spacing:2px; padding:15px 48px; text-decoration:none; }
.tel { font-size:12px; color:var(--faint); margin-top:18px; }

/* footer */
footer { border-top:1px solid var(--line); padding:40px; }
.fnav { display:flex; gap:22px; flex-wrap:wrap; font-size:12px; margin-bottom:20px; }
.fnav a { color:var(--sub); text-decoration:none; }
.fbar { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--faint); flex-wrap:wrap; gap:10px; }

.note { font-size:12px; color:var(--faint); line-height:1.8; margin-top:30px; padding-top:18px; border-top:1px dashed var(--line); }

@media (max-width:760px){
  /* ヘッダー：ハンバーガー式ドロップダウン */
  header { padding:14px 20px; flex-direction:row; justify-content:space-between; align-items:center; gap:0; }
  .nav-toggle { display:block; background:none; border:none; color:var(--red); font-size:24px; line-height:1; padding:4px; cursor:pointer; }
  header nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:rgba(246,243,238,.98); backdrop-filter:saturate(120%) blur(2px); border-bottom:1px solid var(--line); box-shadow:0 8px 18px rgba(40,30,10,.10); }
  header.nav-open nav { display:flex; }
  header nav a { width:100%; padding:14px 22px; border-bottom:1px solid var(--line); }
  header nav a.active { border-bottom-color:var(--line); }
  /* フッター：リンク一覧を開閉式に */
  .fnav-toggle { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; background:none; border:1px solid var(--line); color:var(--sub); font-family:inherit; font-size:13px; padding:11px 14px; cursor:pointer; }
  .fnav-toggle .ti { transition:transform .2s ease; }
  .fnav-toggle.open .ti { transform:rotate(180deg); }
  footer .fnav { display:none; flex-direction:column; gap:0; margin:12px 0 0; }
  footer .fnav.open { display:flex; }
  footer .fnav a { padding:11px 2px; border-bottom:1px solid var(--line); }
  .wrap { padding:0 22px; }
  .home-hero h1 { font-size:30px; }
  .page-hero h1 { font-size:26px; }
  .stats, .grid2, .props, .values { grid-template-columns:1fr; }
  .grid2 > div, .grid2 > div:nth-child(even){ padding:24px; }
  .steps { flex-direction:column; gap:14px; }
  .steps > div { padding:24px; }
  .types > div, .mvv > div { grid-template-columns:1fr; gap:10px; }
  .info th { width:120px; }
  .img-cap { padding:10px 22px; }
  .about2 { grid-template-columns:1fr; gap:18px; }
  .reclist { grid-template-columns:1fr; }
}