/* ============================================================
   BASE WEIGHT — garage makers market
   ミニマル・中目黒系: 白地 / 黒 / 細い罫線 / 余白 / 差し色は点only
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#FFFFFF;
  --ink:#141412;
  --soft:#8B8B85;
  --line:#E7E7E2;
  --accent:#FF4D00; /* international orange — 点でしか使わない */
  --en:"Inter",sans-serif;
  --jp:"Noto Sans JP",sans-serif;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--jp);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:2.0;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.top{
  display:flex;justify-content:space-between;align-items:center;
  max-width:960px;margin:0 auto;padding:26px 24px;
}
.top__logo{font-family:var(--en);font-weight:800;font-size:15px;letter-spacing:.14em}
.top__logo span{font-size:8px;vertical-align:super;margin-left:2px;color:var(--soft)}
.top__nav{display:flex;gap:26px}
.top__nav a{font-family:var(--en);font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--soft)}
.top__nav a:hover{color:var(--ink)}

/* ---------- FV ---------- */
.fv{padding:64px 24px 84px;border-bottom:1px solid var(--line)}
.fv__grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:end}
.fv__ph{margin:0}
.fv__ph img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
@media(max-width:760px){
  .fv__grid{grid-template-columns:1fr;gap:36px}
  .fv__ph{order:2}
}
.fv__vol{font-family:var(--en);font-weight:500;font-size:11px;letter-spacing:.34em;color:var(--soft)}
.fv__title{
  font-family:var(--en);font-weight:800;
  font-size:clamp(72px,14vw,148px);
  line-height:.92;letter-spacing:-.01em;
  margin:24px 0 34px;
}
.fv__lead{font-size:19px;font-weight:700;letter-spacing:.06em}
.fv__sub{margin-top:14px;color:#4c4c47;font-size:14px}
.fv__fact{
  margin-top:52px;
  display:grid;grid-template-columns:repeat(4,auto);gap:14px 56px;
  justify-content:start;
}
.fv__fact div{}
.fv__fact dt{font-family:var(--en);font-weight:500;font-size:10px;letter-spacing:.26em;color:var(--soft);margin-bottom:2px}
.fv__fact dd{font-family:var(--en);font-weight:700;font-size:15px;letter-spacing:.04em}
.fv__fact dd small{font-size:11px;font-weight:500;color:var(--soft);margin-left:4px}
@media(max-width:640px){
  .fv{padding:52px 24px 60px}
  .fv__fact{grid-template-columns:1fr 1fr;gap:18px 24px}
}

/* ---------- section ---------- */
.sec{padding:72px 24px;border-bottom:1px solid var(--line)}
.sec__h{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--en);font-weight:800;font-size:24px;letter-spacing:.08em;
  margin-bottom:34px;
}
.sec__h em{font-style:normal;font-size:11px;font-weight:500;color:var(--accent);letter-spacing:.2em}
.sec__h span{font-family:var(--jp);font-size:12px;font-weight:500;color:var(--soft);letter-spacing:.14em}

/* ---------- info ---------- */
.info div{
  display:grid;grid-template-columns:120px 1fr;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.info div:last-child{border-bottom:none}
.info dt{font-size:13px;font-weight:700;letter-spacing:.1em;color:#4c4c47}
.info dd{font-size:14px}
.info__note{display:block;font-size:12px;color:var(--soft);margin-top:2px}
@media(max-width:640px){
  .info div{grid-template-columns:84px 1fr;gap:14px}
}

/* ---------- news ---------- */
.news{list-style:none}
.news li{border-bottom:1px solid var(--line)}
.news li:last-child{border-bottom:none}
.news a{
  display:grid;grid-template-columns:64px 112px 1fr auto;gap:20px;align-items:center;
  padding:14px 2px;
}
.news__th{width:64px;height:64px;object-fit:cover;display:block;background:#F2F2EF}
.news .news__noimg{width:64px;height:64px;background:#F6F6F3;border:1px solid var(--line)}
.news a:hover .news__t{opacity:.55}
.news time{font-family:var(--en);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--soft)}
.news__t{font-size:14.5px;font-weight:500;transition:opacity .18s}
.news__arrow{font-family:var(--en);font-size:12px;color:var(--soft)}
@media(max-width:640px){
  .news a{grid-template-columns:56px 1fr;gap:4px 16px;align-items:center}
  .news__th,.news .news__noimg{width:56px;height:56px;grid-row:1 / span 2}
  .news time{grid-column:2}
  .news__t{grid-column:2}
  .news__arrow{display:none}
}

/* ---------- makers ---------- */
.makers__lead{font-size:13.5px;color:#4c4c47;margin:-10px 0 26px}


/* ---------- article (?id=) ---------- */
.post{max-width:680px;margin:0 auto;padding:56px 24px 88px}
.post__back{display:inline-block;font-size:12.5px;color:var(--soft);letter-spacing:.06em}
.post__back:hover{color:var(--ink)}
.post__back--foot{margin-top:56px}
.post__meta{margin-top:34px;display:flex;align-items:center;gap:14px}

.post__meta time{font-family:var(--en);font-weight:500;font-size:12px;color:var(--soft);letter-spacing:.08em}
.post__title{font-size:26px;font-weight:700;line-height:1.7;letter-spacing:.04em;margin:14px 0 40px}
.post__ph{margin:0 0 40px}
.post__ph img{width:100%;height:auto;display:block}  /* メイン画像はアップした縦横比のまま(一覧サムネのみ正方形クロップ) */
.post__loading{display:flex;align-items:center;gap:12px;margin-top:56px;color:var(--soft);font-size:13.5px}
.post__loading[hidden]{display:none}  /* display:flex が hidden属性に勝つのを防ぐ */
.post__loading .spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:bwspin .8s linear infinite}
@keyframes bwspin{to{transform:rotate(360deg)}}
.news__loading{display:flex;align-items:center;gap:12px;padding:18px 2px;color:var(--soft);font-size:13.5px}
.news__loading .spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:bwspin .8s linear infinite}
.post__body{font-size:15px}
.post__body h2{
  font-size:16px;font-weight:700;letter-spacing:.08em;
  margin:44px 0 14px;padding-left:14px;border-left:2px solid var(--ink);line-height:1.6;
}
.post__body p{margin:0 0 22px}
.post__body ul{margin:0 0 22px;padding-left:1.3em}
.post__body li{margin-bottom:6px}
.post__body strong{font-weight:700}
.post__body figure{margin:0 0 22px}
.post__body figure img{width:100%;height:auto;display:block}
.post__err{color:var(--soft);font-size:14px;margin-top:40px}

/* ---------- footer ---------- */
.foot{max-width:960px;margin:0 auto;padding:56px 24px 64px;text-align:left}
.foot__logo{font-family:var(--en);font-weight:800;font-size:13px;letter-spacing:.14em}
.foot__logo span{font-size:7px;vertical-align:super;color:var(--soft)}
.foot__cp{font-family:var(--en);font-size:10.5px;color:var(--soft);letter-spacing:.08em;margin-top:6px}
.foot__make{margin-top:22px}
.foot__make a{font-size:12px;color:var(--soft);border-bottom:1px solid var(--line);padding-bottom:2px}
.foot__make a:hover{color:var(--ink)}