:root{
  --paper:#FCFBF8;     /* 紙白 */
  --ink:#1B1916;       /* 墨 */
  --mute:#8D8578;
  --line:#E7E2D8;
  --tan:#A9743F;       /* 革のタン(点で使う) */
  --card:#F5F2EA;      /* 少し沈んだ面 */
  --ok:#5B7A4B;        /* 済みの緑(点) */
  --en:"Archivo", system-ui, sans-serif;
  --jp:"Noto Sans JP", system-ui, sans-serif;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; }
body{
  background:var(--paper); color:var(--ink); font-family:var(--jp); font-weight:400;
  line-height:1.9; letter-spacing:.02em; -webkit-font-smoothing:antialiased; font-size:15px;
}
a{ color:inherit; text-decoration:none; }

/* topbar */
.topbar{ display:flex; align-items:baseline; gap:16px;
  padding:18px 24px; border-bottom:1px solid var(--line); background:var(--paper); }
.brand{ font-family:var(--en); font-weight:700; font-size:19px; letter-spacing:.16em; }
.topbar__label{ font-size:12.5px; letter-spacing:.14em; color:var(--mute); }

.wrap{ max-width:640px; margin:0 auto; padding:0 24px; }

/* ヘッダーバンド(UMBAUヒーロー) */
.hband{ width:100%; height:150px; overflow:hidden; background:var(--paper); border-bottom:1px solid var(--line); }
.hband img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block; }

/* 今の状況 */
.status{ padding:40px 0 40px; border-bottom:1px solid var(--line); }
.status__eyebrow{ margin:0; font-family:var(--en); font-size:12px; letter-spacing:.16em; color:var(--tan); font-weight:600; }
.status__k{ margin:24px 0 6px; font-size:12px; color:var(--mute); letter-spacing:.14em; }
.status__stage{ margin:0; font-size:clamp(38px,10vw,58px); line-height:1.08; font-weight:700; letter-spacing:.01em; }
.status__until{ margin:20px 0 0; font-size:17px; font-weight:500; }
.status__until b{ color:var(--tan); font-weight:700; }
.status__updated{ margin:14px 0 0; font-size:11.5px; color:var(--mute); letter-spacing:.08em; }

/* block 共通 */
.block{ padding:36px 0; border-bottom:1px solid var(--line); }
.block__title{ margin:0 0 6px; font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--ink); }
.block__note{ margin:0 0 20px; font-size:12.5px; color:var(--mute); line-height:1.7; }

/* 音が大きい日 */
.noise{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.noise__item{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:var(--card); border-radius:6px; }
.noise__date{ flex:0 0 auto; font-family:var(--en); font-weight:700; font-size:15px; letter-spacing:.02em; min-width:58px; }
.noise__date small{ display:block; font-family:var(--jp); font-size:10.5px; font-weight:500; color:var(--mute); letter-spacing:.06em; margin-top:2px; }
.noise__body{ flex:1 1 auto; }
.noise__what{ display:block; font-size:14.5px; font-weight:500; line-height:1.6; }
.noise__when{ display:block; font-size:12px; color:var(--tan); margin-top:3px; letter-spacing:.06em; }
.noise__empty{ font-size:13px; color:var(--mute); padding:6px 0; }

/* 工程 progress */
.progress{ list-style:none; margin:0; padding:0; }
.progress__step{ display:flex; align-items:center; gap:14px; padding:11px 0; position:relative; }
.progress__dot{ flex:0 0 auto; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper); position:relative; z-index:1; }
.progress__step:not(:last-child)::before{ content:""; position:absolute; left:6.5px; top:24px; bottom:-6px; width:1.5px; background:var(--line); }
.progress__step.is-done .progress__dot{ background:var(--ok); border-color:var(--ok); }
.progress__step.is-done:not(:last-child)::before{ background:var(--ok); }
.progress__step.is-now .progress__dot{ background:var(--tan); border-color:var(--tan); box-shadow:0 0 0 4px rgba(169,116,63,.16); }
.progress__label{ font-size:14.5px; color:var(--mute); }
.progress__step.is-done .progress__label{ color:var(--ink); }
.progress__step.is-now .progress__label{ color:var(--ink); font-weight:700; }
.progress__now{ margin-left:8px; font-family:var(--en); font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--tan); border:1px solid var(--tan); padding:2px 7px; border-radius:999px; }

/* 車両・工期 */
.facts{ display:flex; flex-direction:column; gap:2px; }
.fact{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px dashed var(--line); }
.fact:last-child{ border-bottom:0; }
.fact__k{ font-size:13px; color:var(--mute); letter-spacing:.06em; flex:0 0 auto; }
.fact__v{ font-size:15px; font-weight:500; text-align:right; }

/* お知らせ */
.block--notice .notice__body{ margin:0; padding:16px 18px; background:#FBF3E8; border-left:3px solid var(--tan); border-radius:4px; font-size:14px; line-height:1.85; }

/* 連絡先 */
.contact__lead{ margin:0 0 20px; font-size:13.5px; color:var(--mute); }
.contact__row{ display:flex; gap:14px; align-items:baseline; padding-bottom:20px; }
.contact__k{ font-size:12.5px; color:var(--mute); letter-spacing:.06em; }
.contact__v{ font-size:15px; font-weight:500; }
.contact__actions{ display:flex; flex-direction:column; gap:10px; }
.btn{ display:block; text-align:center; padding:15px; border-radius:8px; font-size:14.5px; font-weight:700; letter-spacing:.04em; }
.btn--tel{ background:var(--ink); color:var(--paper); }
.btn--line{ background:#06C755; color:#fff; }

/* footer */
.foot{ text-align:center; padding:40px 24px 56px; }
.foot__brand{ margin:0; font-family:var(--en); font-weight:700; font-size:16px; letter-spacing:.16em; }
.foot__addr{ margin:6px 0 20px; font-size:11.5px; color:var(--mute); letter-spacing:.1em; }
.foot__making{ font-size:12px; color:var(--mute); border-bottom:1px solid var(--line); padding-bottom:2px; }
.foot__demo{ margin:26px 0 0; font-size:11px; color:var(--mute); letter-spacing:.05em; }

@media (min-width:720px){
  .status__stage{ font-size:60px; }
}