/* Jizai Data Works — 全ページ共通スタイル
   白地固定のモノトーン。ダークモードは持たない。
   値はすべて :root のトークンから引く。 */

:root {
  /* 無彩色ランプ */
  --bg:    #FFFFFF; /* 背景 */
  --fg:    #000000; /* 本文・見出し・リンク */
  --muted: #6E6E6E; /* 弱い文字（白地とのコントラスト 5.1:1） */
  --rule:  #C9C9C9; /* 強いヘアライン・背景の図版 */
  --hair:  #E0E0E0; /* 通常のヘアライン */

  /* 書体 — 追加読み込みなし。本文は OS ゴシック、見出しは OS 明朝。 */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-display: "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "Yu Mincho", YuMincho, "BIZ UDPMincho", "Noto Serif JP", "MS PMincho", serif;

  /* タイプスケール */
  --t-mark:    clamp(38px, 7vw, 76px);
  --t-catch:   clamp(28px, 5.2vw, 56px);
  --t-section: clamp(32px, 6vw, 64px);
  --t-h1:      clamp(30px, 5.4vw, 52px);
  --t-h2:      clamp(21px, 2.4vw, 28px);
  --t-contact: clamp(19px, 2.2vw, 26px);
  --t-lead:    clamp(17px, 1.8vw, 19px);
  --t-body:    16px;
  --t-small:   14px;

  --lh-body:    1.95;
  --lh-display: 1.45;
  --lh-mark:    1.12;
  --lh-catch:   1.36;
  --track-body:    0.02em;
  --track-mark:    0.12em;
  --track-display: 0.05em;

  /* 余白スケール */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --hero-pad:     clamp(40px, 5vw, 72px);
  --hero-pad-sub: clamp(48px, 9vw, 88px);

  /* レイアウト */
  --measure: 720px;  /* 本文幅 */
  --frame: 1200px;   /* 広い画面での外枠 */
  --pad: 24px;
}

/* ---------- ベース ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* 白地固定。Android Chrome の自動ダークテーマによる反転を止める。
     ダークの分岐を足すのではなく、明色だけを宣言している。 */
  color-scheme: only light;
}

body {
  margin: 0;
  /* 横の余白は body が持つ。.frame は幅だけを決めるので、
     中の罫線と .frame 自身の罫線が同じ幅で揃う。 */
  padding-left: var(--pad);
  padding-right: var(--pad);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

.frame {
  max-width: var(--frame);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- ファーストビュー ---------- */

.hero {
  padding-top: var(--hero-pad);
  padding-bottom: var(--s5);
}

/* トップのファーストビューだけは1画面ぶんを確保する。メニュー・屋号・
   キャッチコピー・図版の4つで画面を埋め、次のセクションを覗かせない。
   svh はアドレスバーが出ている状態の高さ（非対応ブラウザは直前の vh を使う）。
   メニューは上端に固定し、余った高さはロックアップ＋図版の塊の上下に等分される
   （.lockup の margin-top: auto と .net の margin-bottom: auto）。 */
.hero--top {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.top-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s1) var(--s3);
  margin-bottom: var(--s4);
  font-size: var(--t-small);
}

.lockup {
  margin-top: auto;
}

.hero--sub {
  padding-top: var(--hero-pad-sub);
  padding-bottom: var(--s5);
}

/* 幾何学ネットワーク（装飾。読み上げ対象外）。
   屋号とキャッチコピーの下に置く帯。活字の下端に少しだけ食い込ませて1つの塊に
   見せる。負の margin は % 指定（＝枠の幅に対する割合）で、図も枠幅でスケール
   するため、どの画面幅でも同じだけ（＝図の座標で 48 ぶん）重なる。
   図の上端 48 ぶん（viewBox の y 372〜420）は活字が来る領域なので空けてある。
   この値を深くするなら、図のノードも一緒に下げること。 */
.net {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -4%;
  margin-bottom: auto;
}

.net-links line {
  stroke: var(--hair);
  stroke-width: 1;
}

/* ノードの図案。線幅は <use> の scale ぶんだけ太くなり、大きい node ほど濃く見える。 */
.net-nodes use {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.n-dot { fill: var(--rule); }

.globe * {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.25;
}

/* 経線。scaleX で潰し／反転させて自転に見せる。--sx は静止時（モーション
   を切っている環境）の幅で、これが無いと4本とも輪郭と重なってしまう。 */
.globe-spin {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(var(--sx, 1));
}

/* 屋号（左）とキャッチコピー（右）で1つの塊に見せる */
.mark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-mark);
  font-weight: 600; /* 明朝の Demibold / W6 に届く最小の指定 */
  line-height: var(--lh-mark);
  letter-spacing: var(--track-mark);
  font-feature-settings: "palt" 1;
  white-space: nowrap;
}

.catch {
  margin: var(--s4) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-catch);
  font-weight: 600;
  line-height: var(--lh-catch);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  font-feature-settings: "palt" 1;
}

/* 下位ページの1行ワードマーク（トップへ戻る導線） */
.mark-sub {
  margin: 0;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.page-title {
  margin: var(--s4) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--track-display);
  font-feature-settings: "palt" 1;
}

.hero-lead {
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  font-size: var(--t-lead);
}

.hero-lead p {
  margin: 0;
}

/* ---------- セクション ---------- */

.row {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}

.row-title {
  position: relative;
  margin: 0 0 var(--s5);
  padding-bottom: var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: var(--track-display);
  font-feature-settings: "palt" 1;
}

/* 見出し下の罫線。スクロールで左から引かれる。 */
.row-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--rule);
  transform-origin: left center;
}

.row-body {
  max-width: var(--measure);
}

.row-body > :first-child {
  margin-top: 0;
}

.row-body p {
  margin: var(--s2) 0 0;
}

/* 本文＋図版のセクション。図版は本文の右の余白に置き、
   余白が無くなる幅では本文の下に落とす（重ねない）。 */
.row-body--fig {
  max-width: none;
}

.row-text {
  max-width: var(--measure);
}

.row-text > :first-child {
  margin-top: 0;
}

.row-fig {
  display: block;
  width: 200px;
  height: 200px;
  margin: var(--s5) 0 0;
}

/* ---------- 事業の3本立て ---------- */

/* 特異性を .row-body より上げて、記述順に依存させない */
.row-body.pillars {
  max-width: none;
}

.pillar + .pillar {
  margin-top: var(--s6);
}

.pillar h3 {
  margin: var(--s3) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-feature-settings: "palt" 1;
}

.pillar p {
  max-width: var(--measure);
  margin: var(--s2) 0 0;
}

.pillar-fig {
  display: block;
  width: 120px;
  height: 120px;
}

.pillar-fig [data-draw],
.row-fig [data-draw] {
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.5;
}

.pillar-fig [data-fade],
.row-fig [data-fade] {
  fill: var(--fg);
}

/* ---------- ミッション ---------- */

.statement {
  font-family: var(--font-display);
  font-size: var(--t-contact);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-feature-settings: "palt" 1;
}

.statement + p {
  margin-top: var(--s4);
}

/* ---------- 連絡先 ---------- */

.mail {
  font-size: var(--t-contact);
}

.note {
  color: var(--muted);
  font-size: var(--t-small);
}

/* ---------- 事業者情報（定義リスト） ---------- */

/* 表は本文より広く使う（特異性を .row-body より上げて記述順に依存させない） */
.row-body.spec-block {
  max-width: 960px;
}

.spec {
  margin: 0;
}

.spec > div {
  padding: var(--s3) 0;
  border-top: 1px solid var(--hair);
}

.spec > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.spec > div:last-child {
  padding-bottom: 0;
}

.spec dt {
  color: var(--muted);
  font-size: var(--t-small);
}

.spec dd {
  margin: 0;
}

.spec dd ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- フッター ---------- */

.site-foot {
  padding-top: var(--s4);
  padding-bottom: var(--s6);
  border-top: 1px solid var(--rule);
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: 0;
  font-size: var(--t-small);
}

.foot-meta {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: var(--t-small);
}

/* ---------- モーション ----------
   .js は IntersectionObserver がある場合だけ付く。JS 無し・
   prefers-reduced-motion: reduce のときは下のブロックが一切効かず、
   図版も本文も最初から完成した状態で表示される。 */

@keyframes net-draw { to { stroke-dashoffset: 0; } }

/* ノードは透明度だけで出す。<use> は transform 属性で位置を持つので、
   CSS 側で transform を動かすと配置ごと消える。 */
@keyframes net-pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 自転。経線の見かけの幅は cos（経度）なので、その値をそのまま刻んでいる。
   scaleX が負になる区間は経線が裏側へ回ったところ。 */
@keyframes globe-turn {
  0%     { transform: scaleX(1); }
  12.5%  { transform: scaleX(0.71); }
  25%    { transform: scaleX(0); }
  37.5%  { transform: scaleX(-0.71); }
  50%    { transform: scaleX(-1); }
  62.5%  { transform: scaleX(-0.71); }
  75%    { transform: scaleX(0); }
  87.5%  { transform: scaleX(0.71); }
  100%   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: text-decoration-thickness 150ms ease;
  }

  /* ファーストビュー：中心から線が伸び、ノードが順に点く */
  .net-links line {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: net-draw 900ms ease forwards;
    animation-delay: var(--d, 0s);
  }

  .net-nodes > * {
    opacity: 0;
    animation: net-pop 600ms ease forwards;
    animation-delay: var(--d, 0s);
  }

  .globe-spin {
    animation: globe-turn 12s linear infinite;
  }

  /* セクション見出しの罫線 */
  .js .row-title::after {
    transform: scaleX(0);
    transition: transform 900ms ease;
  }

  .js .row.is-in .row-title::after {
    transform: none;
  }

  /* 事業3本 */
  .js .pillar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms ease, transform 700ms ease;
  }

  .js .pillar.is-in {
    opacity: 1;
    transform: none;
  }

  /* 線は1本ずつ引く。順番は各要素の style="--i:n" が決める。
     事業3本は各カード、ミッションと連絡先はセクションが画面に入ったら引き始める。 */
  .js .pillar-fig [data-draw],
  .js .row-fig [data-draw] {
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    transition: stroke-dashoffset 900ms ease;
    transition-delay: calc(var(--i, 0) * 110ms);
  }

  .js .pillar.is-in .pillar-fig [data-draw],
  .js .row.is-in .row-fig [data-draw] {
    stroke-dashoffset: 0;
  }

  .js .pillar-fig [data-fade] {
    opacity: 0;
    transition: opacity 600ms ease 500ms;
  }

  .js .pillar.is-in .pillar-fig [data-fade] {
    opacity: 1;
  }
}

/* ---------- 760px 未満：ネットワークは縦を確保して中央を切り出す ----------
   幅なりに縮めると帯が潰れて図として読めなくなるため、
   高さを固定して preserveAspectRatio="slice" に左右を切らせる。 */

@media (max-width: 759px) {
  .net {
    height: 220px;
  }
}

/* ---------- 560px 以上：概要の項目名を左に置く ---------- */

@media (min-width: 560px) {
  .spec > div {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    column-gap: var(--s3);
    align-items: baseline;
  }
}

/* ---------- 760px 以上：屋号とキャッチコピーを左右に並べる ---------- */

@media (min-width: 760px) {
  .lockup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* 罫線は引かない。屋号とキャッチコピーは余白だけで分ける。 */
    column-gap: var(--s6);
    align-items: center;
  }

  .catch {
    margin: 0;
  }
}

/* ---------- 900px 以上：事業3本を横に並べ、余白を広げる ---------- */

@media (min-width: 900px) {
  :root {
    --pad: 40px;
    --t-body: 17px;
  }

  .pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s5);
  }

  .pillar + .pillar {
    margin-top: 0;
  }

  /* 見出しが1行でも2行でも本文の開始位置を揃える（2行ぶんを確保） */
  .pillar h3 {
    min-height: calc(2em * var(--lh-display));
  }
}

/* ---------- 1080px 以上：本文の右の余白に図版を置く ----------
   これ未満の幅では余白が足りないので、図版は本文の下に落ちる。 */

@media (min-width: 1080px) {
  .row-body--fig {
    display: grid;
    /* 本文は --measure のまま、図版は右の余白の中央に置く */
    grid-template-columns: minmax(0, var(--measure)) auto;
    column-gap: var(--s5);
    align-items: center;
  }

  .row-fig {
    margin: 0;
    justify-self: center;
  }
}