/* ============================================================
   C16 — base / header / section frame / footer
   ============================================================ */

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--base);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:var(--fs-17);
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
li{ list-style:none; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---- レイアウト単位 ------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--edge);
}
.measure{ max-width:var(--measure); }

/* ---- 帯（セクション） ----------------------------------- */
.band{
  padding-block:var(--pad-top) var(--pad-bottom);
  border-top:1px solid var(--line);
}
.band--surface{ background:var(--surface); }
.band--base   { background:var(--base); }
.band--tint   { background:var(--tint); }
.band--navy   {
  background:var(--navy);
  color:var(--on-navy);
  border-top-color:transparent;
}
.band--flush{ padding-block:0; border-top:0; }   /* ジグザグ等、内部で高さを持つ帯 */

/* ---- セクションヘッダー3点セット（全帯で同一規格） ------- */
.sec-head{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:var(--gap-head);
}
.sec-head__en{
  font-family:var(--en);
  font-size:var(--fs-14);
  font-weight:500;
  letter-spacing:.14em;
  color:var(--ink2);
  white-space:nowrap;
}
.sec-head__rule{
  flex:1;
  height:1px;
  background:var(--line);
}
.sec-head__ja{
  font-size:var(--fs-14);
  color:var(--ink2);
  white-space:nowrap;
}
.band--navy .sec-head__en,
.band--navy .sec-head__ja{ color:var(--on-navy-mute); }
.band--navy .sec-head__rule{ background:var(--on-navy-line); }

/* ---- 見出し ---------------------------------------------- */
.h-ja{
  font-family:var(--mincho);
  font-weight:600;
  font-size:var(--fs-40);
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--navy);
}
.h-ja--sm{ font-size:var(--fs-33); }
.band--navy .h-ja{ color:var(--surface); }

.lead{
  font-size:var(--fs-17);
  line-height:1.9;
  color:var(--ink);
}
.band--navy .lead{ color:var(--on-navy); }

.note{
  font-size:var(--fs-12);
  line-height:1.8;
  color:var(--ink2);
  letter-spacing:.04em;
}

.en-label{
  font-family:var(--en);
  font-size:var(--fs-12);
  font-weight:500;
  letter-spacing:.14em;
  color:var(--ink2);
}

/* ============================================================
   Header — 白ベタ84px / 影なし / スクロールで変形しない
   ============================================================ */
.hd{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.hd__in{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
}

/* ヴェシカ・モノグラム：2円の交差部だけが辰砂＝「接点」 */
.logo{ display:flex; align-items:center; gap:12px; }
.logo__mark{ width:38px; height:26px; flex:none; }
.logo__type{
  font-family:var(--en);
  font-size:18px;               /* ワードマークは造形なので級数スケール外 */
  font-weight:600;
  letter-spacing:.08em;
  color:var(--navy);
}

.nav{ display:flex; align-items:center; gap:28px; }
.nav__link{
  font-size:var(--fs-14);
  color:var(--ink);
  transition:color var(--dur-hover) var(--ease-out);
}
.nav__link:hover{ color:var(--navy); }
.nav__link .en{
  display:block;
  font-family:var(--en);
  font-size:var(--fs-12);
  font-weight:500;
  letter-spacing:.12em;
  color:var(--ink2);
  margin-bottom:3px;
  transition:color var(--dur-hover) var(--ease-out);
}
.nav__link:hover .en{ color:var(--navy); }

/* CTA：1px枠・塗りなし（Speee準拠。ベタ塗りCTAは作らない） */
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding-inline:26px;
  border:1px solid var(--line-strong);
  font-family:var(--en);
  font-size:var(--fs-14);
  font-weight:500;
  letter-spacing:.14em;
  color:var(--navy);
  background:transparent;
  transition:background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.btn-outline:hover{
  background:rgba(16,38,63,.05);
  border-color:var(--navy);
}
.btn-outline--on-navy{
  border-color:rgba(255,255,255,.55);
  color:var(--surface);
  height:64px; width:240px;
}
.btn-outline--on-navy:hover{
  background:rgba(255,255,255,.08);
  border-color:var(--surface);
}

/* ============================================================
   Footer — ネイビーの終章（ページの約12%）
   ============================================================ */
.ft{
  background:var(--navy);
  color:var(--on-navy);
  border-top:1px solid var(--on-navy-line);
  padding-block:64px 0;
}
.ft__main{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:64px;
  padding-bottom:56px;
}
.ft__logo{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.ft__logo .logo__type{ color:var(--surface); }
.ft__addr{
  font-size:var(--fs-14);
  line-height:2;
  color:var(--on-navy-mute);
}
.ft__parent{
  margin-top:16px;
  font-size:var(--fs-12);
  color:var(--on-navy-mute);
}
.ft__map{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.ft__col-ttl{
  font-family:var(--en);
  font-size:var(--fs-12);
  font-weight:500;
  letter-spacing:.14em;
  color:var(--on-navy-mute);
  padding-bottom:12px;
  margin-bottom:16px;
  border-bottom:1px solid var(--on-navy-line);
}
.ft__list li + li{ margin-top:10px; }
.ft__list a{
  font-size:var(--fs-14);
  color:var(--on-navy);
  transition:color var(--dur-hover) var(--ease-out);
}
.ft__list a::before{ content:"- "; color:var(--on-navy-mute); }
.ft__list a:hover{ color:var(--surface); }
.ft__list .is-reserved{
  font-size:var(--fs-14);
  color:var(--on-navy-mute);
}
.ft__list .is-reserved::before{ content:"- "; }

.ft__bottom{
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--on-navy-line);
}
.ft__copy{ font-size:var(--fs-12); color:var(--on-navy-mute); }
.ft__stamp{
  font-family:var(--en);
  font-size:var(--fs-12);
  letter-spacing:.2em;
  color:rgba(255,255,255,.4);
}

/* ============================================================
   提案用の注記（デモにのみ表示。制作メモは書かない）
   ============================================================ */
.memo{
  background:#EDEFF1;
  padding-block:26px;
  font-size:var(--fs-12);
  line-height:1.95;
  color:var(--ink2);
}
.memo b{ color:var(--navy); font-weight:700; }