/* 公開サイトのブロック 14 種の見た目の正本。
   samples/site-templates/01-corporativo.html の CSS を起こしたもので、
   編集プレビュー（Puck キャンバス）と公開ページ /site/[ruc] の両方がこの 1 枚を使う。

   色・書体・角丸・余白は :root ではなく .site-root に載せた 12 個の CSS 変数だけで決まる
   （--bg --surface --fg --muted --accent --accent-fg --line --font-display --font-body
     --radius --hero-h --density）。ブロックの中に色や書体をベタ書きしない。
   --density は data-density 属性として同じ値が付き、余白と本文サイズの 3 段を切り替える。 */

.site-root {
  --pad-y: 9rem;
  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --gap: 2.75rem;
  --fs: 16px;
  --lh: 1.75;
  --maxw: 1280px;

  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
.site-root[data-density="compact"] {
  --pad-y: 3.5rem;
  --pad-x: clamp(1rem, 4vw, 1.75rem);
  --gap: 1.75rem;
  --fs: 15px;
  --lh: 1.6;
  --maxw: 1180px;
}
.site-root[data-density="dense"] {
  --pad-y: 2.5rem;
  --pad-x: clamp(1rem, 3vw, 1.5rem);
  --gap: 1rem;
  --fs: 14px;
  --lh: 1.55;
  --maxw: 1180px;
}

.site-root *,
.site-root *::before,
.site-root *::after { box-sizing: border-box; }
.site-root h1, .site-root h2, .site-root h3 {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.04; margin: 0;
}
.site-root a { color: inherit; text-decoration: none; }
.site-root p { margin: 0 0 1.1em; }
.site-root img { max-width: 100%; }

/* 固定ナビの高さぶん逃がす。無いとアンカーで飛んだ先の見出しがナビに隠れる。 */
.site-root .blk { padding: var(--pad-y) var(--pad-x); position: relative; scroll-margin-top: 5rem; }
.site-root .wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; }
.site-root .eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.5rem; display: flex; align-items: center; gap: 0.75rem;
}
.site-root .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--accent); display: block; }
.site-root .lead { color: var(--muted); font-size: 0.94em; max-width: 56ch; }
.site-root .btn {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.7rem;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg);
  border-radius: var(--radius); font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
  cursor: pointer; font-family: inherit; transition: background 0.2s, color 0.2s;
}
.site-root .btn:hover { background: transparent; color: var(--accent); }
.site-root .btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.site-root .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.site-root .head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--gap); flex-wrap: wrap; margin-bottom: calc(var(--gap) * 1.4);
}
.site-root .head h2 { font-size: clamp(2rem, 4.6vw, 4rem); max-width: 18ch; }

/* ---------- nav ---------- */
.site-root .blk-nav {
  padding: 0 var(--pad-x); position: sticky; top: 0; z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.site-root .nav-in { display: flex; align-items: center; gap: 2.5rem; height: 76px; max-width: var(--maxw); margin: 0 auto; }
.site-root .brand { display: flex; align-items: center; gap: 0.8rem; margin-right: auto; }
.site-root .brand-mark { width: 30px; height: 30px; flex: 0 0 auto; }
.site-root .brand-txt { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; line-height: 1.05; }
.site-root .brand-txt small {
  display: block; font-family: var(--font-body); font-size: 9px;
  letter-spacing: 0.28em; color: var(--muted); text-transform: uppercase;
}
.site-root .nav-links { display: flex; gap: 2rem; font-size: 13.5px; color: var(--muted); }
.site-root .nav-links a { padding: 0.4rem 0; border-bottom: 1px solid transparent; }
.site-root .nav-links a:hover { color: var(--fg); border-bottom-color: var(--accent); }
.site-root .nav-cta {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg); border-bottom: 1px solid var(--accent); padding-bottom: 2px;
}
/* 狭い幅のメニュー。1100px 以下で .nav-links の代わりに出す。<details> の開閉だけで、スクリプトを持たない。 */
.site-root .nav-menu { display: none; position: relative; font-size: 13.5px; }
.site-root .nav-menu summary {
  list-style: none; cursor: pointer; padding: 0.4rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg);
}
.site-root .nav-menu summary::-webkit-details-marker { display: none; }
.site-root .nav-menu nav {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; min-width: 220px;
  display: flex; flex-direction: column; padding: 0.5rem 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.site-root .nav-menu nav a { padding: 0.6rem 1rem; color: var(--muted); }
.site-root .nav-menu nav a:hover { color: var(--fg); }

/* ---------- hero ---------- */
.site-root .blk-hero {
  min-height: var(--hero-h); display: flex; align-items: flex-end;
  padding-bottom: calc(var(--pad-y) * 0.55); overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--surface) 60%, var(--bg)) 100%);
}
.site-root .ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 52%; display: block; pointer-events: none; }
.site-root .hero-in { position: relative; z-index: 2; }
.site-root .hero-in h1 { font-size: clamp(2.6rem, 8.2vw, 7.5rem); max-width: 16ch; }
.site-root .hero-in h1 em { font-style: italic; color: var(--accent); }
.site-root .hero-sub { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-end; }
.site-root .hero-meta { margin-top: 2.5rem; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* ---------- stats ---------- */
.site-root .blk-stats {
  padding-top: calc(var(--pad-y) * 0.55); padding-bottom: calc(var(--pad-y) * 0.55);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface);
}
.site-root .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.site-root .stat { background: var(--surface); padding: 2.25rem 1.75rem; }
.site-root .stat .n { font-family: var(--font-display); font-size: clamp(2.4rem, 5.2vw, 4.6rem); letter-spacing: -0.03em; line-height: 1; }
.site-root .stat .n span { font-size: 0.42em; color: var(--accent); letter-spacing: 0; margin-left: 0.25rem; }
.site-root .stat .k { margin-top: 0.8rem; font-size: 11px; letter-spacing: 0.19em; text-transform: uppercase; color: var(--muted); }

/* ---------- operations ---------- */
/* 列は項目の数だけ作る（固定の 3 列だと 2 件のとき空いた升に枠の地の色が出て、空の画像の枠に見えた）。 */
.site-root .ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.site-root .op { background: var(--bg); padding: 2.5rem 2rem; min-height: 320px; display: flex; flex-direction: column; }
.site-root .op:hover { background: var(--surface); }
.site-root .op .idx { font-size: 11px; letter-spacing: 0.2em; color: var(--accent); }
.site-root .op h3 { font-size: 1.9rem; margin: 1.6rem 0 0.6rem; }
.site-root .op .place { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.site-root .op p { margin-top: 1.4rem; font-size: 0.92em; color: var(--muted); }
.site-root .op dl {
  margin: auto 0 0; display: grid; grid-template-columns: auto auto;
  gap: 0.35rem 1rem; font-size: 0.82em; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.site-root .op dt { color: var(--muted); }
.site-root .op dd { margin: 0; text-align: right; }

/* ---------- concessions ---------- */
.site-root .blk-concessions { background: var(--surface); border-top: 1px solid var(--line); }
.site-root .mapwrap {
  display: grid; grid-template-columns: 1fr 340px; gap: 1px;
  background: var(--line); border: 1px solid var(--line); height: 600px;
}
.site-root .mapcanvas { background: var(--bg); height: 100%; width: 100%; }
.site-root .mappanel { background: var(--bg); padding: 2rem 1.75rem; overflow: auto; }
.site-root .mappanel h3 { font-size: 1.75rem; margin-bottom: 0.35rem; }
.site-root .mappanel .code { font-size: 11px; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; }
.site-root .mappanel dl { margin: 1.75rem 0 0; font-size: 0.86em; }
.site-root .mappanel dt { color: var(--muted); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 1.15rem; }
.site-root .mappanel dd { margin: 0.2rem 0 0; }
.site-root .mappanel .empty { color: var(--muted); }
.site-root .badge {
  display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid var(--accent);
  color: var(--accent); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--radius);
}
.site-root .mapnote { margin-top: 1.5rem; font-size: 0.82em; color: var(--muted); display: flex; gap: 0.75rem; align-items: flex-start; }
.site-root .mapnote svg { flex: 0 0 auto; margin-top: 3px; }
.site-root .maplibregl-popup-content { background: var(--surface); color: var(--fg); border-radius: var(--radius); font-family: var(--font-body); }
.site-root .maplibregl-ctrl-group { background: #fff; border-radius: var(--radius); } /* 暗い preset でも地図の＋・−の黒い絵が見えるように地は白に固定（2026-11-02） */

/* ---------- sustainability ---------- */
.site-root .sos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap) 4rem; align-items: start; }
.site-root .pillars { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site-root .pillar { background: var(--bg); padding: 1.9rem 0.25rem; display: grid; grid-template-columns: 64px 1fr; gap: 1.5rem; }
.site-root .pillar .num { font-family: var(--font-display); font-size: 2.4rem; color: var(--accent); line-height: 1; }
.site-root .pillar h3 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.site-root .pillar p { margin: 0.5rem 0 0; font-size: 0.88em; color: var(--muted); }

/* ---------- suppliers ---------- */
.site-root .blk-suppliers { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site-root .gateway { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.site-root .gw-copy { background: var(--bg); padding: 3.25rem 2.75rem; }
.site-root .gw-copy h2 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
.site-root .steps { background: var(--bg); padding: 3.25rem 2.75rem; display: flex; flex-direction: column; }
/* 業者の申し込みの欄があるとき: 手順は左の見出しの下（.steps-inline）、欄は右（.gw-form）。 */
.site-root .gw-form { background: var(--bg); padding: 3.25rem 2.75rem; }
.site-root .steps.steps-inline { background: none; padding: 0; margin-top: 2rem; }
.site-root .gw-form input[type="file"] { padding: 0.6rem 0; border: 0; font-size: 0.88em; }
.site-root .step { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.site-root .step:last-of-type { border-bottom: 0; }
.site-root .step .sn {
  width: 38px; height: 38px; border: 1px solid var(--accent); color: var(--accent);
  border-radius: 50%; display: grid; place-items: center; font-size: 13px;
}
.site-root .step h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.site-root .step p { margin: 0.35rem 0 0; font-size: 0.88em; color: var(--muted); }
.site-root .gw-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- news ---------- */
.site-root .news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.site-root .news article { background: var(--bg); padding: 2.25rem 1.75rem 2.5rem; display: flex; flex-direction: column; min-height: 240px; }
.site-root .news article:hover { background: var(--surface); }
.site-root .news time { font-size: 11px; letter-spacing: 0.19em; color: var(--muted); text-transform: uppercase; }
.site-root .news h3 { font-size: 1.4rem; margin: 1.1rem 0 0; letter-spacing: -0.02em; }
.site-root .news .tag { margin-top: auto; padding-top: 1.5rem; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* ---------- careers ---------- */
.site-root .jobs { border-top: 1px solid var(--line); }
.site-root .job { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 1.5rem; align-items: center; padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.site-root .job h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
.site-root .job .m { font-size: 0.82em; color: var(--muted); letter-spacing: 0.06em; }
.site-root .job .go { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* ---------- cta ---------- */
.site-root .blk-cta {
  background: linear-gradient(120deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 22%, var(--surface)) 100%);
  border-top: 1px solid var(--line); text-align: center;
}
.site-root .blk-cta .eyebrow { justify-content: center; }
.site-root .blk-cta h2 { font-size: clamp(2rem, 5.4vw, 4.6rem); max-width: 22ch; margin: 0 auto; }
.site-root .blk-cta .lead { margin: 2rem auto 2.5rem; }

/* ---------- download（PDF） ---------- */
.site-root .blk-download .download {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  border: 1px solid var(--line); background: var(--surface); padding: 2rem;
}
.site-root .blk-download h3 { margin: 0; }
.site-root .blk-download .lead { margin: .5rem 0 0; max-width: 60ch; }

/* ---------- forms（contact / suppliers / complaints で共有） ---------- */
.site-root .contacto { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; }
.site-root .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.site-root .field { display: flex; flex-direction: column; gap: 0.5rem; }
.site-root .field.full { grid-column: 1 / -1; }
.site-root .field label { font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); }
.site-root .field input,
.site-root .field select,
.site-root .field textarea {
  font: inherit; background: transparent; color: var(--fg);
  border: 0; border-bottom: 1px solid var(--line); padding: 0.7rem 0; border-radius: 0;
  /* select は既定でいちばん長い選択肢の幅になり、狭い画面で枠の外へはみ出す。 */
  min-width: 0; max-width: 100%;
}
.site-root .field input:focus,
.site-root .field select:focus,
.site-root .field textarea:focus { outline: 0; border-bottom-color: var(--accent); }
.site-root .field select option { background: var(--surface); color: var(--fg); }
.site-root .formnote { font-size: 0.82em; color: var(--muted); }
.site-root .formok { color: var(--accent); font-size: 0.88em; }
.site-root .offices { display: grid; gap: 2rem; }
.site-root .office h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }
.site-root .office p { margin: 0.4rem 0 0; font-size: 0.88em; color: var(--muted); }

/* ---------- complaints（Libro de Reclamaciones） ---------- */
.site-root .blk-complaints { background: var(--surface); border-top: 1px solid var(--line); }
.site-root .book { display: grid; grid-template-columns: 320px 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.site-root .book-mark { background: var(--bg); padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.site-root .book-mark .sheet {
  border: 2px solid var(--accent); border-radius: var(--radius); padding: 1.25rem;
  text-align: center; color: var(--accent); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.site-root .book-form { background: var(--bg); padding: 2.5rem 2rem; }

/* ---------- privacy（Ley 29733） ---------- */
.site-root .blk-privacy { border-top: 1px solid var(--line); }
.site-root .consent {
  display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; background: var(--surface);
}
.site-root .consent .lead { margin: 0; }
.site-root .arco { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--gap); }
.site-root .arco div { background: var(--bg); padding: 1.5rem 1.25rem; }
.site-root .arco h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
.site-root .arco p { margin: 0.4rem 0 0; font-size: 0.85em; color: var(--muted); }

/* ---------- footer ---------- */
.site-root .blk-footer {
  padding-top: calc(var(--pad-y) * 0.55); padding-bottom: 3rem;
  border-top: 1px solid var(--line); background: var(--surface);
}
.site-root .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 3rem; padding-bottom: 3.5rem; }
.site-root .foot-grid h4 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.25rem; font-weight: 400; }
.site-root .foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; font-size: 0.88em; color: var(--muted); }
.site-root .foot-grid a:hover { color: var(--fg); }
.site-root .foot-bot {
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-top: 2rem; border-top: 1px solid var(--line); font-size: 0.78em; color: var(--muted);
}

/* 1101〜1200px ではメニューの項目に押されて社名が 2〜4 行に縮んでいた（2026-10-22、元の corporativo は 1180 幅で 106px）ので、
   1200px 以下はメニューの項目をボタンにまとめる。 */
@media (max-width: 1200px) {
  .site-root .nav-links { display: none; }
  .site-root .nav-menu { display: block; }
}
@media (max-width: 1100px) {
  .site-root .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .site-root .ops, .site-root .news, .site-root .arco { grid-template-columns: 1fr; }
  /* minmax(0, 1fr): 1fr だと中身の最小幅より狭くならず、Libro de Reclamaciones の選択肢の長い入力欄に合わせて
     幅 390px のスマホで 463〜502px に広がり、頁が横にはみ出していた（2026-10-22、10 の雛形すべて）。 */
  .site-root .mapwrap, .site-root .book { grid-template-columns: minmax(0, 1fr); height: auto; }
  .site-root .mapcanvas { height: 420px; }
  .site-root .sos, .site-root .gateway, .site-root .contacto { grid-template-columns: 1fr; }
  .site-root .foot-grid { grid-template-columns: 1fr 1fr; }
  .site-root .job { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-root { --pad-y: 3.5rem; }
  .site-root .nav-in { gap: 1rem; }
  .site-root .stats-grid { grid-template-columns: 1fr; }
  .site-root .fields { grid-template-columns: minmax(0, 1fr); }
}

/* SNS。URL を入れた分だけフッターに出る。色は currentColor 任せ。 */
.site-root .social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.site-root .social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--muted); transition: color .15s, border-color .15s;
}
.site-root .social a:hover { color: var(--accent); border-color: var(--accent); }
.site-root .social svg { width: 1.05rem; height: 1.05rem; }
/* ヘッダーでは上の余白を取らない。リンクのブロックでは名前を横に出す。 */
.site-root .nav-in .social { margin-top: 0; }
.site-root .social.labeled a { width: auto; gap: .55rem; padding: 0 .9rem; font-size: 13px; color: var(--fg); }

/* ES / EN の切替。ページが 2 言語を持つときだけナビに出る。 */
.site-root .lang-switch { display: flex; gap: .35rem; font-size: 12px; letter-spacing: .12em; }
.site-root .lang-switch a { color: var(--muted); padding: .2rem .3rem; border-bottom: 1px solid transparent; }
.site-root .lang-switch a[aria-current] { color: var(--fg); border-bottom-color: var(--accent); }

.site-root .news .news-sum { margin: .75rem 0 0; color: var(--muted); font-size: .95rem; }

/* SNS 投稿の公式埋め込み。高さが提供元ごとに違うのでグリッドで並べる。 */
.site-root .blk-embeds { background: var(--surface); border-top: 1px solid var(--line); }
.site-root .emb-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start;
}
.site-root .emb-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); overflow: hidden; min-height: 8rem;
}
.site-root .emb-card blockquote { margin: 0; }
.site-root .emb-video { position: relative; padding-top: 56.25%; }
.site-root .emb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-root .emb-ph { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; }
.site-root .emb-net {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.site-root .emb-url { font-size: .8rem; color: var(--muted); word-break: break-all; }

/* 同意ゲート。押されるまで第三者のスクリプトを読まない。 */
.site-root .emb-gate {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
  max-width: 46rem;
}
.site-root .emb-gate p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.7; }

/* ---------- 描き方（layout）。blocks.tsx の LAYOUTS の先頭（今までの描き方）は class を付けず、それ以外を .v-<描き方> で描く ---------- */

/* nav: centered = 1 段目にロゴを中央、2 段目に項目 */
.site-root .blk-nav.v-centered .nav-in { flex-wrap: wrap; justify-content: center; height: auto; gap: 0.75rem 2rem; padding: 1.1rem 0 0.9rem; }
.site-root .blk-nav.v-centered .brand { flex: 1 0 100%; justify-content: center; margin: 0; }
/* nav: dark = 文字色を地にした帯。中の色は地と文字を入れ替える */
.site-root .blk-nav.v-dark {
  background: var(--fg); color: var(--bg); border-bottom-color: var(--fg);
  --muted: color-mix(in srgb, var(--bg) 68%, var(--fg));
  --line: color-mix(in srgb, var(--bg) 24%, var(--fg));
}
.site-root .blk-nav.v-dark .nav-links a:hover,
.site-root .blk-nav.v-dark .nav-cta,
.site-root .blk-nav.v-dark .nav-menu summary,
.site-root .blk-nav.v-dark .lang-switch a[aria-current],
.site-root .blk-nav.v-dark .nav-menu nav a:hover { color: var(--bg); }
.site-root .blk-nav.v-dark .nav-menu nav { background: var(--fg); }

/* hero: center = 中央寄せの大きな文字 */
.site-root .blk-hero.v-center { align-items: center; text-align: center; }
.site-root .blk-hero.v-center .hero-in { display: flex; flex-direction: column; align-items: center; }
.site-root .blk-hero.v-center .eyebrow { justify-content: center; }
.site-root .blk-hero.v-center .hero-in h1 { max-width: 18ch; margin: 0 auto; }
.site-root .blk-hero.v-center .hero-sub { flex-direction: column; align-items: center; gap: 1.5rem; }
.site-root .blk-hero.v-center .lead { margin: 0 auto; }
/* hero: band = 低い帯の見出し */
.site-root .blk-hero.v-band { min-height: 0; align-items: center; padding-top: calc(var(--pad-y) * 0.6); padding-bottom: calc(var(--pad-y) * 0.5); }
.site-root .blk-hero.v-band .hero-in h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); max-width: 24ch; }
.site-root .blk-hero.v-band .hero-sub { margin-top: 1.25rem; }
.site-root .blk-hero.v-band .hero-meta { margin-top: 1.25rem; }
/* hero: split = 左に文字、右の枠に背景（地形・地図・写真・山稜） */
.site-root .blk-hero.v-split { align-items: center; padding-top: calc(var(--pad-y) * 0.55); }
.site-root .blk-hero.v-split .hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gap); align-items: center;
}
.site-root .blk-hero.v-split .hero-in h1 { font-size: clamp(2.4rem, 5.2vw, 5rem); }
.site-root .hero-media {
  position: relative; overflow: hidden; min-height: 440px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.site-root .hero-media .ridge { height: 70%; }

/* stats: big = 帯にせず大きな数字を並べる */
.site-root .blk-stats.v-big { background: var(--bg); border: 0; }
.site-root .blk-stats.v-big .stats-grid { background: none; gap: var(--gap); }
.site-root .blk-stats.v-big .stat { background: none; padding: 1.25rem 0 0; border-top: 2px solid var(--accent); }
.site-root .blk-stats.v-big .stat .n { font-size: clamp(3rem, 7vw, 6.5rem); }
/* stats: overlap = 直前の Hero の下端に重ねる（Hero の下の余白 0.55 より浅く重ねて文字を隠さない） */
.site-root .blk-stats.v-overlap {
  background: transparent; border: 0; z-index: 3;
  margin-top: calc(var(--pad-y) * -0.4); padding-top: 0;
}
.site-root .blk-stats.v-overlap .stats-grid {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--fg) 45%, transparent);
}

/* operations: rows = 1 件 1 行。写真があれば左右交互に大きく出す */
.site-root .blk-operations.v-rows .ops { grid-template-columns: minmax(0, 1fr); background: none; border: 0; gap: 0; border-top: 1px solid var(--line); }
.site-root .blk-operations.v-rows .op {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr;
  column-gap: var(--gap); min-height: 0; padding: var(--gap) 0; background: none; border-bottom: 1px solid var(--line);
}
.site-root .blk-operations.v-rows .op h3 { font-size: clamp(2rem, 3.6vw, 3rem); }
.site-root .blk-operations.v-rows .op dl { margin: 0; align-self: start; max-width: 28rem; }
.site-root .blk-operations.v-rows .op:has(.op-photo) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.site-root .blk-operations.v-rows .op:has(.op-photo) > :not(.op-photo) { grid-column: 2; }
.site-root .blk-operations.v-rows .op-photo {
  grid-column: 1; grid-row: 1 / span 5; width: 100%; height: 100%; min-height: 320px;
  object-fit: cover; border-radius: var(--radius);
}
.site-root .blk-operations.v-rows .op:nth-child(even):has(.op-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.site-root .blk-operations.v-rows .op:nth-child(even):has(.op-photo) > :not(.op-photo) { grid-column: 1; }
.site-root .blk-operations.v-rows .op:nth-child(even) .op-photo { grid-column: 2; }
/* operations: numbered = 枠を外し、大きな番号を付けて横に並べる */
.site-root .blk-operations.v-numbered .ops {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); background: none; border: 0; counter-reset: op;
}
.site-root .blk-operations.v-numbered .op { background: none; padding: 1.5rem 0 0; min-height: 0; border-top: 2px solid var(--accent); counter-increment: op; }
.site-root .blk-operations.v-numbered .op::before {
  content: counter(op, decimal-leading-zero); order: -2;
  font-family: var(--font-display); font-size: clamp(2.8rem, 4.4vw, 4rem); line-height: 1; color: var(--accent); margin-bottom: 1rem;
}
.site-root .blk-operations.v-numbered .op-photo { order: -1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1.25rem; border-radius: var(--radius); }
.site-root .blk-operations.v-numbered .op h3 { margin-top: 1rem; }

/* news: list = 日付・見出し・分類の行 */
.site-root .blk-news.v-list .news { grid-template-columns: minmax(0, 1fr); gap: 0; background: none; }
.site-root .blk-news.v-list .news article {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 0.4rem 2rem; align-items: baseline;
  min-height: 0; padding: 1.5rem 0; background: none; border-bottom: 1px solid var(--line);
}
.site-root .blk-news.v-list .news article:hover { background: none; }
.site-root .blk-news.v-list .news-photo { display: none; }
.site-root .blk-news.v-list .news time { grid-column: 1; grid-row: 1; }
.site-root .blk-news.v-list .news h3 { grid-column: 2; grid-row: 1; margin: 0; }
.site-root .blk-news.v-list .news .news-sum { grid-column: 2; margin: 0; }
.site-root .blk-news.v-list .news .tag { grid-column: 3; grid-row: 1; margin: 0; padding: 0; }
/* news: feature = 先頭の 1 件を大きく、残りを右に縦に */
.site-root .blk-news.v-feature .news { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.site-root .blk-news.v-feature .news article { min-height: 0; }
.site-root .blk-news.v-feature .news article:first-child { grid-row: span 2; }
.site-root .blk-news.v-feature .news article:first-child h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.site-root .blk-news.v-feature .news article:first-child .news-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1.25rem; }

/* 描き方の狭い幅。上の規則のほうが詳しい（class が多い）ので、1100px 以下の共通の規則とは別に 1 列へ戻す。 */
@media (max-width: 1100px) {
  .site-root .blk-hero.v-split .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .site-root .hero-media { min-height: 280px; }
  .site-root .blk-operations.v-rows .op:has(.op-photo),
  .site-root .blk-operations.v-rows .op:nth-child(even):has(.op-photo) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  /* :nth-child(n) は詳しさを上の左右交互の規則（class 7 個分）にそろえるため。写真も文も 1 列目に縦に並べる。 */
  .site-root .blk-operations.v-rows .ops .op:nth-child(n):has(.op-photo) > * { grid-column: 1; grid-row: auto; }
  .site-root .blk-operations.v-rows .op-photo { min-height: 0; aspect-ratio: 16 / 9; margin-bottom: 1.25rem; }
  .site-root .blk-news.v-feature .news { grid-template-columns: minmax(0, 1fr); }
  .site-root .blk-news.v-feature .news article:first-child { grid-row: auto; }
}
@media (max-width: 767px) {
  .site-root .blk-news.v-list .news article { grid-template-columns: minmax(0, 1fr); }
  .site-root .blk-news.v-list .news time,
  .site-root .blk-news.v-list .news h3,
  .site-root .blk-news.v-list .news .news-sum,
  .site-root .blk-news.v-list .news .tag { grid-column: 1; grid-row: auto; }
  .site-root .blk-stats.v-big .stats-grid { gap: 1.5rem; }
}

/* 業者の申し込みのファイルの欄（ブラウザの既定の文は OS の言語で出るので隠し、サイトの言語のボタンにする。2026-11-02） */
.site-root .filepick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-root .filepick-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.site-root .filepick-btn { cursor: pointer; }
.site-root .filepick-input:focus-visible + .filepick-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-root .filepick-names { font-size: 0.85em; opacity: 0.75; min-width: 0; overflow-wrap: anywhere; }