/* accent: 松葉 */
:root { --accent: #2F5D50; }

/* A26 法人サイト共通の骨組み。--accent は build.py が法人ごとに先頭へ差し込み、
   構図・文字組み・配色の個性は assets/themes/<theme>.css が後ろから上書きする。
   外部フォント・外部通信なし（信用のためのサイトで第三者へリクエストを飛ばさない）。 */

:root {
  --paper: #f6f7f7;
  --surface: #fff;
  --ink: #1b2328;
  --sub: #4f5c63;
  --rule: #d6dcdf;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "BIZ UDPMincho", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.9;
  line-break: strict;
  overflow-wrap: anywhere;
  font-feature-settings: "palt";
}

/* 未照合の項目を含むプレビューを、公開ページと取り違えないための帯 */
.preview-band {
  margin: 0;
  padding: .625rem 1.25rem;
  border-bottom: 1px solid #e3c98a;
  background: #fff6de;
  color: #3b3020;
  font-size: .8125rem;
  line-height: 1.6;
  text-align: center;
}

.name { margin: 0; font-weight: 600; word-break: auto-phrase; text-wrap: balance; }
.eyebrow { margin: 0 0 1.5rem; font-size: .75rem; font-weight: 700; letter-spacing: .24em; }
.tagline { margin: 0; text-wrap: pretty; }

.sitenav ul { margin: 0; padding: 0; list-style: none; }
.sitenav a { display: block; min-height: 44px; text-decoration: none; }

h2 { margin: 0; font-weight: 600; }

/* 会社概要：審査で読まれる本体。どのテーマでも「項目→値」が一目で追えること */
.profile { margin: 0; }
.profile > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.profile dt { margin: 0; color: var(--sub); font-size: .875rem; font-weight: 600; }
.profile dd { margin: 0; font-size: 1rem; word-break: auto-phrase; }  /* 「和田第2ビル」などを語の途中で折らない */
.profile ul { margin: 0; padding-left: 1.1em; }

.pager a { display: inline-flex; flex-direction: column; min-height: 44px; text-decoration: none; }
.pager span { color: var(--sub); font-size: .8125rem; }

.colophon { color: var(--sub); font-size: .8125rem; line-height: 1.8; }
.colophon p { margin: 0; }

a { color: var(--accent); text-underline-offset: .2em; }

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

@media (max-width: 640px) {
  .profile > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: 1rem 0; }
}

/* 銀行・取引先が印刷して稟議に添えることがある */
@media print {
  :root { --paper: #fff; --surface: #fff; }
  .preview-band { border: 1px solid #000; }
  .sitenav, .pager { display: none; }
  a { color: inherit; text-decoration: none; }
}

/* 黒地・縦書き社名の表示テーマ（両社共通。色は台帳の accent から作るので、法人ごとに地の色が変わる）。
   参考: 写真1枚＋小さな字間広めの文字だけで組む構図。写真の位置には、いまは縦書きの社名を置く。
   HTML は他テーマと同じ。.masthead を display: contents にして、見出しの各要素を .page の格子へ直接並べる。 */

:root {
  --paper: color-mix(in srgb, var(--accent) 22%, #080808);
  --ink: #ecebe8;
  --sub: color-mix(in srgb, #ecebe8 58%, var(--paper));
  --rule: color-mix(in srgb, #ecebe8 14%, var(--paper));
  --glow: color-mix(in srgb, var(--accent) 45%, #ecebe8);
}

body { background: var(--paper); color: var(--ink); line-height: 2; }
a { color: var(--ink); }
:focus-visible { outline-color: var(--glow); }

.page {
  display: grid;
  /* 画像の列が細くなりすぎないよう最小幅を持たせる（800px 幅で猫が帯状になった・2026-10-02） */
  grid-template-columns: 3.5rem minmax(0, 34rem) minmax(min(42vw, 30rem), 1fr);
  grid-template-rows: 1fr auto auto auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  min-height: 100svh;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 3vw, 2.5rem) 0;
}
.masthead { display: contents; }

/* 左端の縦書き（参考の「名前を縦に流す帯」） */
.eyebrow {
  grid-column: 1; grid-row: 1 / -1;
  align-self: start;
  margin: 0;
  writing-mode: vertical-rl;
  color: var(--sub);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .6em;
}

/* 右半分の画像（A25 生成・台帳の hero_image）。上端の色をサイトの地に合わせてあるので枠は地の色で埋める */
.hero {
  grid-column: 3; grid-row: 1 / -1;
  justify-self: end;
  align-self: start;
  position: sticky;
  top: clamp(2rem, 6vh, 4rem);
  height: calc(100svh - 2 * clamp(2rem, 6vh, 4rem));
  aspect-ratio: 3 / 4;
  max-width: 100%;
  margin: 0;
  background: var(--paper);
}
.hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 列が画像より細いと左右が切れる。猫は左寄りなので左を残す（A25 指定） */
[data-hero="bikusu_cat"] img { object-position: 25% 50%; }

/* 社名：画像の右上（暗いまま残した帯）に重ねる。画像が無いサイトでは列の右上に立つ */
.name {
  grid-column: 3; grid-row: 1 / -1;
  justify-self: end;
  align-self: start;
  position: sticky;
  top: clamp(2rem, 6vh, 4rem);
  margin: 2rem clamp(1rem, 2.5vw, 2.5rem) 0 0;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 300;
  /* 10字（ナルメディア合同会社）×字送り1.28em が画面の高さに収まる大きさ */
  font-size: clamp(2rem, calc((100svh - 12rem) / 13), 5.5rem);
  line-height: 1.3;
  letter-spacing: .28em;
}

.tagline {
  grid-column: 2; grid-row: 2;
  margin: 0 0 2.5rem;
  color: var(--sub);
  font-family: var(--serif);
  font-size: .9375rem;
  letter-spacing: .12em;
  line-height: 2.1;
}

.sitenav { grid-column: 2; grid-row: 3; margin-bottom: 1.75rem; }
.sitenav ul { display: flex; flex-wrap: wrap; gap: 0 2.25rem; }
.sitenav a {
  display: flex; align-items: center;
  color: var(--sub);
  font-size: .8125rem;
  letter-spacing: .3em;
}
.sitenav a:hover, .sitenav a[aria-current="page"] { color: var(--ink); }
.sitenav a[aria-current="page"] { box-shadow: inset 0 -1px var(--glow); }

main { grid-column: 2; grid-row: 4; padding-bottom: 2.5rem; }
h2 {
  margin: 0 0 1.25rem;
  color: var(--glow);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .5em;
}

/* 事実の一覧：参考の「日付＋一行」のお知らせと同じ細さで並べる */
.profile > div {
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--rule);
}
.profile dt { color: var(--sub); font-size: .75rem; font-weight: 400; letter-spacing: .2em; }
.profile dd { font-size: .8125rem; letter-spacing: .1em; }
.profile [data-fact="corporate_number"] dd { font-variant-numeric: tabular-nums; letter-spacing: .18em; }

.pager { margin-top: 1.75rem; }
.pager a { color: var(--ink); font-size: .8125rem; letter-spacing: .2em; }
.pager span { color: var(--sub); font-size: .6875rem; letter-spacing: .3em; }

.colophon {
  display: flex; flex-wrap: wrap; gap: .25rem 2rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2.5rem) 2rem calc(3.5rem + clamp(1.25rem, 3vw, 2.5rem) + clamp(1.5rem, 4vw, 4rem));
  font-size: .6875rem;
  letter-spacing: .12em;
}

/* スマホ：社名を上に大きく、その下に一覧 */
@media (max-width: 760px) {
  .page {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 1rem;
    min-height: 0;
  }
  .eyebrow { grid-row: 2 / -1; letter-spacing: .45em; }
  /* 画像は切らずに画面幅いっぱい（左右と上の余白を打ち消す） */
  .hero {
    grid-column: 1 / -1; grid-row: 1;
    position: static;
    height: auto;
    width: auto;
    max-width: none;
    margin: calc(-1 * clamp(2rem, 6vh, 4rem)) calc(-1 * clamp(1.25rem, 3vw, 2.5rem)) 2rem;
  }
  .name {
    grid-column: 2; grid-row: 1;
    position: static;
    margin: 0 0 2.5rem;
    font-size: min(8.5vw, 2.75rem);
  }
  .hero ~ .masthead .name { margin: 0; }
  .tagline { grid-row: 2; }
  .sitenav { grid-row: 3; }
  .sitenav ul { gap: 0 1.5rem; }
  main { grid-row: 4; }
  .profile > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .colophon { padding-left: calc(1.25rem + 2.5rem); }
}

@media print {
  :root { --paper: #fff; --ink: #000; --sub: #333; --rule: #ccc; --glow: #333; }
  .page { display: block; min-height: 0; }
  .name, .eyebrow { writing-mode: horizontal-tb; position: static; }
  .hero { display: none; }
}