/* ws.arculm.com C ヤスノリ建設有限会社 c.css v1.4
   上半分（自社サイト部分）の意匠と署名モーションのみ。site.css は変更しない。
   黄 #F2B705 の使用箇所：見出し下線（上半分h2）＋申込ボタン1つ＋アイコン点灯の瞬間のみ。
   ------------------------------------------------------------ */
.c-top { --c-navy: #17325A; --c-yellow: #F2B705; }

/* ヒーロー ---------------------------------------------------- */
.c-hero-head { padding-block: var(--space-4) var(--space-3); }
.c-name {
  margin: 0 0 var(--space-1); max-width: none;
  font-size: var(--fs-h3); font-weight: 900; letter-spacing: -0.02em;
  word-break: keep-all; overflow-wrap: anywhere;
}
.c-meta { margin: 0; max-width: none; font-size: var(--fs-note); line-height: 1.7; }

.c-hero-fig { position: relative; background: var(--c-navy); }
.c-hero-fig img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  filter: grayscale(1) contrast(1.25);
}
.c-h1band {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  padding: var(--space-3) 0; overflow: hidden;
}
.c-h1band h1 {
  width: min(100% - var(--space-4) * 2, 960px); margin: 0 auto;
  color: var(--white);
  font-size: clamp(30px, 9vw, 80px); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.15;
  animation: c-h1in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes c-h1in { from { transform: translateX(-106%); } to { transform: none; } }
@media (max-width: 480px) {
  .c-h1band { position: static; background: #000000; }
}

.c-hero-foot { display: grid; gap: var(--space-3); align-items: center; padding-block: var(--space-4); }
@media (min-width: 720px) { .c-hero-foot { grid-template-columns: 1fr auto; } }
.c-sub { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }

/* 署名モーション：ショベルの一筆描き */
.c-shovel { display: block; width: min(240px, 64vw); color: var(--c-navy); }
.c-shovel path {
  fill: none; stroke: currentColor; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
/* 画面に入ってから描き始める（共通部品 site.js が data-reveal に .is-in を付ける。
   classList を SVG要素へ付けずに済むよう、対象はラッパーの div）。
   遅延は表示起点。ページ読み込み起点ではない。
   注意：ここで `animation` の一括指定を使うと duration と delay が 0s にリセットされ、
   詳細度の低い .c-d1〜.c-d3 の指定が適用されない（v1.1までの不具合）。個別指定で書く。 */
.c-shovel-wrap.is-in .c-shovel path {
  animation-name: c-draw; animation-timing-function: linear; animation-fill-mode: forwards;
}
.c-shovel-wrap.is-in .c-d1 { animation-duration: 450ms; animation-delay: 0ms; }
.c-shovel-wrap.is-in .c-d2 { animation-duration: 480ms; animation-delay: 450ms; }
.c-shovel-wrap.is-in .c-d3 { animation-duration: 470ms; animation-delay: 930ms; }
@keyframes c-draw { to { stroke-dashoffset: 0; } }

/* スキップ・JS無効・reduced-motion では最終状態。
   上の発火規則より詳細度を高くするため、セレクタに .c-shovel-wrap を含める。 */
html.h1-done .c-h1band h1, html.sig-done .c-h1band h1, html.no-js .c-h1band h1 { animation: none; }
html.sig-done .c-shovel-wrap .c-shovel path,
html.no-js .c-shovel-wrap .c-shovel path { animation-name: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .c-h1band h1, .c-jobs.is-in li svg { animation-delay: 0ms !important; }
  .c-shovel-wrap .c-shovel path,
  .c-shovel-wrap.is-in .c-shovel path { animation-name: none; stroke-dashoffset: 0; }
}

/* 上半分の見出し：最太＋黄の下線（面） ------------------------ */
.c-h2 {
  width: fit-content;
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.15;
  padding-bottom: 8px; border-bottom: 8px solid var(--c-yellow);
}

/* 仕事の種類（設計箇所②）：紺の線画、左から順に黄へ点灯 -------- */
.c-jobs {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4) var(--space-2);
}
@media (min-width: 720px) { .c-jobs { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 480px) { .c-jobs { grid-template-columns: repeat(2, 1fr); } }
.c-jobs li { color: var(--c-navy); text-align: center; }
.c-jobs svg {
  width: 52px; height: 52px; margin: 0 auto var(--space-1);
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.c-jobs span {
  display: block; font-size: var(--fs-note); font-weight: 700; line-height: 1.5;
  word-break: keep-all; overflow-wrap: anywhere;
}
.c-jobs.is-in li svg { animation: c-light 900ms ease both; }
.c-jobs.is-in li:nth-child(1) svg { animation-delay: 400ms; }
.c-jobs.is-in li:nth-child(2) svg { animation-delay: 500ms; }
.c-jobs.is-in li:nth-child(3) svg { animation-delay: 600ms; }
.c-jobs.is-in li:nth-child(4) svg { animation-delay: 700ms; }
.c-jobs.is-in li:nth-child(5) svg { animation-delay: 800ms; }
.c-jobs.is-in li:nth-child(6) svg { animation-delay: 900ms; }
@keyframes c-light {
  0%, 100% { color: var(--c-navy); }
  35%, 70% { color: var(--c-yellow); }
}

/* 画像スロット ------------------------------------------------ */
.c-about-img { margin: var(--space-4) 0 0; }
.c-about-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--gray-paper); }
.c-texs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
  padding-block: var(--space-6);
}
.c-texs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--gray-paper); }

/* 社長のことば ------------------------------------------------ */
.c-rep { font-weight: 900; font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.c-quote {
  margin: 0 0 1.2em; padding: 0; max-width: var(--measure);
  color: var(--c-navy); font-weight: 700; font-size: 20px; line-height: 1.7;
}

/* 申込ボタン（黄を使う唯一のボタン） --------------------------- */
.c-apply.btn-primary { background: var(--c-yellow); color: var(--black); border-color: var(--black); }
.c-apply.btn-primary:hover { background: var(--c-navy); color: var(--white); }

/* ------------------------------------------------------------
   ★R0（SC007 / 2026-09-07）：改行系 3 モジュール（M1 基底・M2・M3）の規則は
     assets/site.css §11 へ移設した。5 ページ共通の機構であり、ページ固有の
     意匠ではないため（ChatGPT 意見書 E-22：実装契約は materializer 側に置く）。
     c.css に残るのは M4（強調 L1／L2。Semantic Seed が C 固有）と
     E2-a／E2-b（参照情報ブロックの意匠。D-08 の審議中）のみ。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   E3-2b 意味リズム組版（強調レベル L1／L2）実験。SC006 / 2026-09-07
   Semantic Seed: 原価 / 時間（arculm 氏選定）
   L2 = Q08 anchor 時間 focus「平均年齢」／L1 = Q11 bridge 原価×時間
   文字・語順・DOM 読み順は不変。公開時に再抽選しない（FREEZE 前提）。
   ------------------------------------------------------------ */
[data-break="phrase"] .l1 { font-weight: 700; }
[data-break="phrase"] .l2-zone { font-weight: 400; }
[data-break="phrase"] .l2-focus {
  font-size: var(--l2-size, 1.70em);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
[data-break="phrase"] .l2-rest { font-size: 1em; font-weight: 400; }

/* ------------------------------------------------------------
   E2-a 会社概要のカード化（案C：極薄の面、罫線なし、角丸なし）
   地色は新色を定義せず、C の副色（作業服の紺 #17325A）を極薄にした面を使う。
   角丸カードキット（DS §1-4 の避けたい印象）を避け、radius 0・影なしとする。
   ------------------------------------------------------------ */
.fact-card {
  background: rgba(23, 50, 90, 0.04);
  padding: 16px;                 /* 320px で内側幅を確保するため 16px。8px 基準の規約内 */
  margin: 0 0 1.2em;
  border-radius: 0;
}
@media (min-width: 480px) {
  .fact-card { padding: 24px; }
}
.fact-card > p { margin-bottom: 0.6em; }
.fact-card > ul { margin-bottom: 0; }

/* ------------------------------------------------------------
   E2-b 参照情報ブロックの項目区切り（左アクセントバー）実験。SC007 / 2026-09-07
   arculm 氏の指示：「各要素ごとに区切り線」＋色は薄い灰色（目立たず系統を示す）。
   水平罫線ではなく左バーを採る根拠（SC007 で計測）：
     ・水平罫線はカード高を 393px で +100px、320px で +100px 増やす。
       左バーは既定 ul の 40px インデントを解放するため 320px で -58px（窮屈さの改善）。
     ・区切りと項目マーカーを 1 装置に統合できる（中黒を廃す）。
     ・水平線を引かないため表・枠に見えない（arculm 氏の「枠にするより綺麗」を維持）。
   色：新色トークンを定義せず、C の副色（紺 #17325A）のアルファのみを使う（E2-a の方針を継承）。
     rgba(23,50,90,0.30) = rgb(179,188,201)。カード地色 rgb(246,247,248) 比 1.79:1。
     WCAG 1.4.11 の 3:1 は満たさない。項目境界の第一の手がかりは 16px の余白であり、
     バーはその補強と系統の明示を担う。0.25（1.61:1）／0.40（2.24:1）へは 1 行で差し替え可。
   list-style: none により Safari がリスト意味論を落とすため、ul に role="list" を付す。
   16px 未満を作らない／薄灰文字を使わない（DS §2-1・§2-3）は本規則の対象外＝罫線であり文字ではない。
   ------------------------------------------------------------ */
.fact-card > ul {
  padding-left: 0;
  list-style: none;
}
.fact-card > ul > li {
  border-left: 3px solid rgba(23, 50, 90, 0.30);
  padding-left: 12px;      /* site.css・b.css・d.css に先例あり */
}
.fact-card > ul > li + li { margin-top: 16px; }