/* =========================================================
   株式会社サンプル デモサイト　案06「アーチ窓」
   やわらかなモダン：ラベンダーグレー × プラム × バター
   ========================================================= */

:root {
  --bg: #E7E4EC;        /* 地：淡いラベンダーグレー */
  --ink: #3B2F45;       /* 文字：深いプラム */
  --ink-soft: #5A4E66;  /* 補助文字（地・白面の上でAA以上） */
  --butter: #F1D98F;    /* 小さな面のアクセント（文字色には使わない） */
  --wis: #B9B1C6;       /* 藤灰（補助） */
  --paper: #FBFAFC;     /* 白い面 */
  --wall: #D9D3E1;      /* 画像枠の下地 */
  --rule: #7F7390;      /* 操作部品の枠線（地に対して3:1以上） */
  --line: rgba(59, 47, 69, .16);

  --f-head: "Hiragino Maru Gothic ProN", "HG丸ｺﾞｼｯｸM-PRO", "Yu Gothic", "Meiryo", sans-serif;
  --f-body: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --arch: 999px 999px 0 0; /* 上が半円のアーチ */
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
  line-break: strict;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}

p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; }
a { color: inherit; }
small { font-size: inherit; }

/* 文節単位で折り返す */
.nb { display: inline-block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
main:focus { outline: none; }

.wrap {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- 本文へ移動 ---------- */
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
}
.skip:focus { top: 8px; outline-color: var(--butter); }

/* ---------- デモ表示 ---------- */
.demo-note {
  padding: 5px var(--gutter);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
  text-align: center;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(231, 228, 236, .96);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  width: min(1320px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { width: 22px; height: 28px; flex: none; color: var(--ink); }
.brand__text { white-space: nowrap; line-height: 1.2; }
.brand__name {
  font-family: var(--f-head);
  font-size: 19px;
  letter-spacing: .14em;
}
.brand__kind {
  margin-left: 4px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

#site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0px, .6vw, 8px);
}
#site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 clamp(8px, 1vw, 14px);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* 現在地の印：小さなアーチ */
#site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 10px;
  height: 8px;
  margin-left: -5px;
  border-radius: 5px 5px 0 0;
  background: var(--ink);
  opacity: 0;
}
#site-nav a:hover::after { opacity: .3; }
#site-nav a[aria-current="page"]::after { opacity: 1; }
.nav-top { display: none; }

.menu-toggle { display: none; }

@media (max-width: 800px) {
  .site-header__inner { min-height: 60px; }
  .brand__name { font-size: 17px; }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    min-width: 7.2em;
    justify-content: center;
    padding: 0 16px 0 14px;
    border: 1.5px solid var(--ink);
    border-radius: 22px 22px 4px 4px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-family: var(--f-head);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  .menu-toggle__icon { position: relative; width: 16px; height: 10px; flex: none; }
  .menu-toggle__icon::before,
  .menu-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform .2s ease, top .2s ease, bottom .2s ease;
  }
  .menu-toggle__icon::before { top: 0; }
  .menu-toggle__icon::after { bottom: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 4.25px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { bottom: 4.25px; transform: rotate(-45deg); }

  #site-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .menu-toggle[aria-expanded="true"] + #site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  #site-nav ul {
    display: block;
    width: min(560px, 100% - 2 * var(--gutter));
    margin-inline: auto;
    padding-block: 8px 28px;
  }
  .nav-top { display: block; }
  #site-nav li { border-bottom: 1px solid var(--line); }
  #site-nav a {
    min-height: 60px;
    padding: 0 4px;
    gap: 14px;
    font-family: var(--f-head);
    font-size: 17px;
  }
  #site-nav a::after {
    position: static;
    order: -1;
    flex: none;
    width: 10px;
    height: 13px;
    margin: 0;
    border-radius: 5px 5px 0 0;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--wis);
    opacity: 1;
  }
  #site-nav a:hover::after { opacity: 1; }
  #site-nav a[aria-current="page"]::after { background: var(--ink); box-shadow: none; }
}

/* =========================================================
   共通部品
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 10px 30px;
  border: 1.5px solid var(--ink);
  border-radius: 27px 27px 6px 6px; /* 上がアーチ */
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-head);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: #54455f; border-color: #54455f; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--butter); border-color: var(--butter); }
.btn[disabled],
.btn[disabled]:hover {
  background: transparent;
  border: 1.5px dashed var(--rule);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.page-head { padding-block: clamp(48px, 8vw, 104px) clamp(36px, 5vw, 64px); }
.page-head__mark {
  display: block;
  width: 30px;
  height: 40px;
  margin-bottom: 22px;
  border-radius: 15px 15px 0 0;
  background: var(--butter);
  box-shadow: 0 1.5px 0 var(--ink);
}
.page-head h1 { font-size: clamp(30px, 5.2vw, 48px); line-height: 1.4; }
.lead {
  margin-top: 18px;
  max-width: 34em;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.6vw, 17px);
}

.section { padding-block: clamp(72px, 11vw, 150px); }
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head h2 { font-size: clamp(24px, 3.4vw, 34px); }
.sec-head p { margin-top: 12px; color: var(--ink-soft); }
.sec-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 40px;
}
.sec-head--split p { margin-top: 0; }

.center { margin-top: clamp(44px, 6vw, 72px); text-align: center; }
.note { color: var(--ink-soft); font-size: 14px; }
.tbd { color: var(--ink-soft); }

/* ---------- 画像スロット ---------- */
.img-slot {
  position: relative;
  overflow: hidden;
  background: var(--wall);
  isolation: isolate;
}
.img-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-slot > img { position: absolute; inset: 0; }
.arch { border-radius: var(--arch); }

.ph { position: absolute; inset: 0; }
.ph svg { display: block; width: 100%; height: 100%; }
.ph-label {
  position: absolute;
  left: 0; right: 0;
  bottom: 14px;
  width: max-content;
  max-width: calc(100% - 16px);
  margin-inline: auto;
  padding: 3px 12px;
  border-radius: 4px;
  background: rgba(251, 250, 252, .92);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: center;
}

.shot { position: relative; }
.shot .ph-label { bottom: 46px; } /* サンプル表示のタグと重ねない */
.shot__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 5px 12px;
  background: var(--butter);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
}

/* =========================================================
   TOP
   ========================================================= */
.hero { padding-block: clamp(20px, 4vw, 48px) clamp(64px, 9vw, 128px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.hero__copy { padding-bottom: clamp(8px, 4vw, 60px); }
.hero__eyebrow {
  margin-bottom: 22px;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: .1em;
}
.hero h1 { font-size: clamp(27px, 4vw, 48px); line-height: 1.5; }
.hero__lead { margin-top: 24px; max-width: 25em; color: var(--ink-soft); }
.hero .actions { margin-top: 36px; }

.hero__stage { position: relative; }
.hero__stage::before { /* バターの小さなアーチ面 */
  content: "";
  position: absolute;
  left: -8%;
  bottom: -6%;
  width: 34%;
  aspect-ratio: 3 / 4;
  border-radius: var(--arch);
  background: var(--butter);
}
.hero__window {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 6;
  max-height: 78vh;
  width: 100%;
}

/* 見せ場：アーチ窓が下から上へ開く（一度だけ） */
@keyframes arch-open {
  from { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); }
  to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
}
@keyframes arch-settle {
  from { transform: scale(1.12) translateY(4%); }
  to { transform: none; }
}
.hero__window.is-opening { animation: arch-open 1.7s cubic-bezier(.65, 0, .2, 1) .15s both; }
.hero__window.is-opening > * { animation: arch-settle 2.3s cubic-bezier(.2, .7, .2, 1) .15s both; }

/* 三つの事業（大小のアーチが並ぶ） */
.trio {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
}
.trio .img-slot { aspect-ratio: 3 / 4; }
.trio h3 { margin-top: 22px; font-size: clamp(18px, 1.9vw, 22px); }
.trio p { margin-top: 4px; color: var(--ink-soft); font-size: 15px; }

/* 物件・施工事例の予告 */
.band-paper { background: var(--paper); }
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 7vw, 112px);
  align-items: start;
}
.duo__main .img-slot { aspect-ratio: 4 / 5; }
.duo__text { padding-top: clamp(0px, 4vw, 56px); }
.duo__text h2 { font-size: clamp(24px, 3.4vw, 34px); }
.duo__text p { margin-top: 16px; color: var(--ink-soft); }
.duo__text .actions { margin-top: 32px; }
.duo__sub { width: 70%; margin-top: clamp(48px, 7vw, 104px); margin-left: auto; }
.duo__sub .img-slot { aspect-ratio: 1 / 1.12; }

/* サテライトの予告（プラムの面） */
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink :focus-visible { outline-color: var(--butter); }
.band-ink .muted { color: #DCD5E4; }
.satellite-teaser {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
}
.satellite-teaser h2 { font-size: clamp(24px, 3.4vw, 34px); }
.satellite-teaser p { margin-top: 16px; }
.satellite-teaser .actions { margin-top: 32px; }
.framed {
  position: relative;
  max-width: 460px;
  margin: 0 18px 18px 0;
}
.framed::before { /* 窓枠の線（バター） */
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--butter);
  border-radius: var(--arch);
}
.framed .img-slot { position: relative; z-index: 1; aspect-ratio: 3 / 4; }

/* 相談の入口（大きなアーチの白い面） */
.cta {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(104px, 12vw, 136px) clamp(20px, 6vw, 80px) clamp(48px, 6vw, 72px);
  border-radius: 240px 240px 8px 8px;
  background: var(--paper);
  text-align: center;
}
.cta h2 { font-size: clamp(23px, 3.2vw, 32px); }
.cta p { display: inline-block; margin-top: 16px; color: var(--ink-soft); text-align: left; }
.cta .actions { justify-content: center; margin-top: 32px; }

/* =========================================================
   物件・施工事例
   ========================================================= */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 28px;
  margin-bottom: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter button {
  min-height: 46px;
  padding: 8px 18px;
  border: 1.5px solid var(--rule);
  border-radius: 23px 23px 4px 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-family: var(--f-head);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.filter button:hover { background: var(--paper); }
.filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter-status { color: var(--ink-soft); font-size: 14px; }

.pj-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 9%;
  row-gap: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(80px, 12vw, 160px);
}
.pj:nth-child(even) { transform: translateY(clamp(0px, 9vw, 128px)); }
.pj .img-slot { aspect-ratio: 4 / 5; }
.pj__body { padding-top: 22px; }
.pj__kind { color: var(--ink-soft); font-size: 13px; letter-spacing: .08em; }
.pj__title { margin-top: 4px; font-size: clamp(18px, 2vw, 22px); }
.pj__spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.pj__spec div { padding: 10px 8px 0 0; }
.pj__spec dt { color: var(--ink-soft); font-size: 12px; }
.pj__spec dd { font-size: 13px; }
.pj-foot { padding-bottom: clamp(72px, 10vw, 140px); }

/* =========================================================
   事業紹介
   ========================================================= */
.biz-trio {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  padding-bottom: clamp(24px, 4vw, 48px);
}
.biz:nth-child(2) { margin-top: clamp(0px, 7vw, 96px); }
.biz .img-slot { aspect-ratio: 3 / 4.1; }
.biz h2 { margin-top: 28px; font-size: clamp(21px, 2.2vw, 26px); }
.biz p { margin-top: 10px; }
.biz dl { margin-top: 22px; border-top: 1px solid var(--line); }
.biz dl div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.biz dt { color: var(--ink-soft); font-size: 12px; }
.biz dd { font-size: 14px; }

/* =========================================================
   会社概要
   ========================================================= */
.sheet {
  padding: clamp(20px, 6vw, 80px) clamp(20px, 7vw, 104px);
  border-radius: 6px;
  background: var(--paper);
}
.outline { width: 100%; border-collapse: collapse; }
.outline th,
.outline td {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.outline tr:last-child th,
.outline tr:last-child td { border-bottom: 0; }
.outline th {
  width: 12em;
  padding-right: 2em;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 14px;
  line-height: 2.05;
}
.outline td ul { list-style: none; }
.sheet .note { margin-top: 20px; }

.rep__grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(32px, 7vw, 104px);
  align-items: center;
}
.portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  padding: 24px;
  border: 1.5px dashed var(--rule);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}
.rep h2 { font-size: clamp(24px, 3.2vw, 32px); }
.rep__name { margin-top: 14px; font-family: var(--f-head); font-size: 18px; letter-spacing: .1em; }
.rep__text { margin-top: 18px; color: var(--ink-soft); }

/* =========================================================
   サテライトオフィス
   ========================================================= */
.doorway {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(36px, 6vw, 80px);
  border-radius: 6px;
  background: #D5CEDE; /* 壁 */
  overflow: hidden;
}
.doorway__opening { /* 出入口の厚み */
  width: min(440px, 100% - 2 * clamp(20px, 6vw, 64px));
  padding: clamp(12px, 2.2vw, 22px) clamp(12px, 2.2vw, 22px) 0;
  border-radius: var(--arch);
  background: #BEB5CB;
}
.doorway__opening .img-slot { aspect-ratio: 3 / 4.2; }
.doorway__floor {
  position: relative;
  width: 100%;
  height: clamp(56px, 8vw, 96px);
  background: #C8BFD3;
}
.doorway__floor::before { /* 出入口からこぼれる光 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(min(440px, 100% - 2 * clamp(20px, 6vw, 64px)) * 1.5);
  height: 100%;
  transform: translateX(-50%);
  background: var(--butter);
  opacity: .62;
  clip-path: polygon(16.67% 0, 83.33% 0, 100% 100%, 0 100%);
}
.doorway__floor::after { /* 敷居 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(440px, 100% - 2 * clamp(20px, 6vw, 64px));
  height: 6px;
  transform: translateX(-50%);
  background: #A79DB6;
}
.doorway-caption { margin-top: 14px; color: var(--ink-soft); font-size: 13px; }

.facts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 6vw, 96px);
  align-items: start;
}
.facts-grid h2 { font-size: clamp(22px, 3vw, 30px); }
.facts { border-top: 1px solid var(--line); }
.facts div {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--ink-soft); font-size: 14px; }
.facts-grid .note { margin-top: 20px; }
.facts-grid .actions { margin-top: 32px; }

/* =========================================================
   お問い合わせ
   ========================================================= */
.channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 48px);
}
.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(64px, 8vw, 96px) clamp(20px, 4vw, 48px) clamp(36px, 5vw, 56px);
  border-radius: 999px 999px 8px 8px;
  background: var(--paper);
  text-align: center;
}
.channel__icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 60px;
  height: 72px;
  padding-bottom: 12px;
  border-radius: 30px 30px 0 0;
  background: var(--butter);
  color: var(--ink);
}
.channel__icon svg { width: 30px; height: 30px; }
.channel h2 { margin-top: 24px; font-size: clamp(22px, 2.6vw, 28px); }
.channel p { max-width: 24em; margin-top: 12px; color: var(--ink-soft); text-align: left; }
.channel .btn { margin-top: 28px; }
.contact-foot { padding-block: clamp(36px, 5vw, 56px) clamp(72px, 10vw, 140px); }

/* =========================================================
   フッター
   ========================================================= */
.site-footer {
  padding-block: clamp(56px, 7vw, 88px) 28px;
  background: var(--ink);
  color: #DCD5E4;
  font-size: 14px;
}
.site-footer :focus-visible { outline-color: var(--butter); }
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 36px 64px;
}
.site-footer__brand p + p { margin-top: 4px; }
.site-footer__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--paper);
  font-family: var(--f-head);
  font-size: 18px;
  letter-spacing: .08em;
}
.site-footer__name .brand__mark { color: var(--paper); }
.site-footer__nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 40px;
}
.site-footer__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper);
  text-decoration: none;
}
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(251, 250, 252, .18);
  font-size: 12px;
}

/* =========================================================
   スマートフォン（1カラム）
   ========================================================= */
@media (max-width: 800px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__stage { order: -1; }
  .hero__stage::before { left: -8px; bottom: -14px; width: 36%; }
  .hero__window { aspect-ratio: 1 / 1.08; max-height: none; }
  .hero__copy { padding-bottom: 0; }

  .trio { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .trio__item { width: 84%; }
  .trio__item:nth-child(2) { margin-left: auto; }
  .trio .img-slot { aspect-ratio: 4 / 5; }

  .duo { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .duo__text { padding-top: 0; }
  .duo__sub { width: 72%; margin-top: 48px; }

  .satellite-teaser { grid-template-columns: minmax(0, 1fr); }
  .framed { width: calc(100% - 12px); margin: 0 12px 12px 0; }
  .framed::before { inset: 12px -12px -12px 12px; }

  .pj-list { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .pj:nth-child(even) { transform: none; }

  .biz-trio { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .biz:nth-child(2) { margin-top: 0; }
  .biz .img-slot { aspect-ratio: 4 / 5; }

  .rep__grid { grid-template-columns: minmax(0, 1fr); }
  .portrait { width: min(240px, 70%); }

  .facts-grid { grid-template-columns: minmax(0, 1fr); }

  .channels { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .outline th,
  .outline td { display: block; width: auto; padding: 0; }
  .outline tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .outline tr:last-child { border-bottom: 0; }
  .outline th,
  .outline td { border-bottom: 0; }
  .outline th { font-size: 13px; line-height: 1.8; }

  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pj__spec { grid-template-columns: minmax(0, 1fr); }
  .pj__spec div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pj__spec dt, .pj__spec dd { font-size: 13px; }
}

/* 狭い端末：社名を2段にしてメニューボタンの幅を確保 */
@media (max-width: 400px) {
  .brand { gap: 8px; }
  .brand__text { display: flex; flex-direction: column; line-height: 1.25; }
  .brand__name { font-size: 16px; letter-spacing: .1em; }
  .brand__kind { margin-left: 0; font-size: 11px; letter-spacing: .18em; }
  .menu-toggle { min-width: 0; padding: 0 14px 0 12px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__window.is-opening,
  .hero__window.is-opening > * { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* ─── モバイルメニュー：閉じる／HOME（TATEURI 必須・メニューを開いている間だけ表示） ─── */
.mobile-nav-extra { display: none; }
html.tt-nav-open #site-nav .mobile-nav-extra {
  position: relative; z-index: 5; display: flex; flex: 0 0 auto; align-self: stretch; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box; width: 100%; margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid rgba(128, 128, 128, .35);
}
html.tt-nav-open #site-nav a.mobile-nav-home,
html.tt-nav-open #site-nav button.mobile-nav-close {
  display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 44px; margin: 0; padding: 0 2px;
  font: inherit; font-size: 14px; line-height: 1; letter-spacing: .12em; color: inherit; text-decoration: none;
  background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; transform: none; cursor: pointer;
}
html.tt-nav-open #site-nav a.mobile-nav-home { font-weight: 700; letter-spacing: .2em; box-shadow: inset 0 -3px 0 var(--butter); }
html.tt-nav-open #site-nav a.mobile-nav-home::before, html.tt-nav-open #site-nav a.mobile-nav-home::after,
html.tt-nav-open #site-nav button.mobile-nav-close::before, html.tt-nav-open #site-nav button.mobile-nav-close::after { content: none; display: none; }
html.tt-nav-open #site-nav button.mobile-nav-close svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* メニューを開いている間、デモバーが画面に見えていれば一時的に外す（各案のメニュー位置は元のまま） */
html.tt-bar-hide #demo-bar { display: none; }

/* ─── 横スクロール防止（TATEURI 規則。sticky を壊さないよう hidden ではなく clip） ─── */
html, body { overflow-x: clip; }

/* ─── DEMO BAR（TATEURI 共通・通常フローに置く） ─── */
#demo-bar { position: relative; z-index: 1200; background: #101215; border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 7px 16px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.demo-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: rgba(255, 255, 255, .55); }
.demo-badge { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: rgba(200, 168, 92, .18); color: #C8A85C; padding: 3px 10px; flex-shrink: 0; }
.demo-link { display: inline-block; padding: 4px 0; color: #C8A85C; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.demo-copy { color: rgba(255, 255, 255, .3); font-size: 11px; }
@media (max-width: 640px) { .demo-copy { display: none; } }