@charset "UTF-8";
/* =========================================================================
   株式会社 あさひ野建設 — assets/css/style.css
   制作サンプル用の1枚CSS（架空の会社）。外部リソースは一切読み込まない
   （Webフォント・CDNなし。font-family の指定は名前の列挙のみ）。

   設計根拠: docs/kensetsu-notes.md
     §3    見た目（書体・ウェイト・角丸・コンテナ幅・縦余白の実測値）
     §4-2  :root のトークンをそのまま全量採用（値・トークン名とも変更しない）
     §4-3  コントラスト比の表にある組み合わせだけを使う

   この register（硬い情報型）の作り分け:
     美容室 salon … 白地・細字・余白・角丸0
     カフェ cafe … 生成り・濃緑の色面・丸ゴシック・角丸24px
     当サイト   … 薄青灰の地・太字(--fw-h:700)・罫線と表が主役・角丸は最大6px
                  （情報密度を上げ、写真と表を交互に置く。影は使わない）

   色の運用（§4-3 厳守）:
     --c-alert はフォームの必須表示のみ。--c-accent(#F2B705) は必ず面（背景）
     としてのみ使い、文字色には決して使わない（白面に置くと 2.1:1 で不足）。
     本文・見出し・リンク・キャプションは §4-3 の表にある組み合わせだけで組む。
     ※ --c-ink-2 は §4-2 で定義されているが、§4-3 の表に組み合わせが無いため
       文字色としては使わない（定義のみ保持）。
     ※ --c-bg-sub（§4-2 の帯用トークン）を面として使う場合の #111826 との比は
       13.96:1 で、§4-3 の --c-bg と #111826（15.22:1）に準じる明度差がある。

   ブレークポイント: 640px（2列化） / 1024px（PC 4列・ヘッダー展開）
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. デザイントークン（docs/kensetsu-notes.md §4-2 をそのまま全量採用）
   ------------------------------------------------------------------------- */
:root{
  /* 面 */
  --c-bg:#E9EEF4;        /* 地色（薄い青灰）   既存2本（白地・生成り）の地色と非重複 */
  --c-bg-sub:#DDE4EC;    /* 帯・交互セクション */
  --c-surface:#FFFFFF;   /* カード面 */
  --c-line:#C2CBD6;      /* 罫線 */
  --c-line-strong:#9AA7B6;
  /* 濃色 */
  --c-deep:#0E2A47;      /* 主色：濃紺（ヘッダ／フッタ／反転面） 既存2本の主色（赤・濃緑）と非重複 */
  --c-deep-2:#0A1E33;    /* フッタ最深部 */
  --c-blue:#1D5DA8;      /* 副色：リンク・見出しラベル・数値の下線 */
  /* 差し色 */
  --c-accent:#F2B705;    /* 山吹（安全黄）：強調数字・バッジ・ホバー帯。既存2本の差し色（レンガ色・からし色）と非重複 */
  --c-alert:#B3261E;     /* 注意喚起のみ（フォームの「必須」）※使用面積は全ページの0.5%以下に限定 */
  /* 文字 */
  --c-ink:#111826;       /* 本文 */
  --c-ink-2:#3A4654;     /* 小見出し */
  --c-muted:#5A6472;     /* 補助文字・キャプション */
  --c-on-deep:#FFFFFF;
  --c-on-accent:#111826;

  /* 書体 */
  --ff-base:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ff-num:"Inter","Helvetica Neue",Arial,sans-serif; /* 数字・英字ラベル */
  --fs-body:16px; --lh-body:1.75; --ls-body:0.02em;
  --fs-h1:40px; --fs-h2:28px; --fs-h3:20px; --fs-small:13px;
  --fs-num-xl:44px;                        /* 実績数値 */
  --fw-h:700; --fw-num:700; --fw-body:400;

  /* 余白 */
  --sp-section:88px;      /* セクション縦余白（PC）実測中央値70px／上位80-100pxから採用 */
  --sp-section-sp:56px;   /* モバイル  */
  --sp-gap:24px;

  /* 幅 */
  --w-max:1240px;         /* 既存2本（1200px・1100px）と非重複 */
  --w-narrow:820px;
  --w-wide:1440px;

  /* 角丸 */
  --r-xs:2px;             /* タグ */
  --r-sm:3px;             /* 罫線付き小要素 */
  --r-md:4px;             /* ボタン・入力欄 */
  --r-lg:6px;             /* カード・表 */
}

/* 1-b. レイアウト補助（§4-2 のトークンは変更せず、追加のみ） */
:root{
  --header-h:76px;        /* 固定ヘッダー高（PC） */
  --header-h-sp:60px;     /* 固定ヘッダー高（モバイル） */
  --gutter:16px;          /* 左右の余白 */
  --t:200ms ease;
}
@media (min-width:1024px){
  :root{ --gutter:24px; }
}

/* -------------------------------------------------------------------------
   2. ベース
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }          /* JS が付ける hidden を確実に効かせる */

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

body{
  margin:0;
  padding-top:var(--header-h-sp);             /* 固定ヘッダー分 */
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--ff-base);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  overflow-wrap:break-word;
}
@media (min-width:1024px){
  body{ padding-top:var(--header-h); }
}

h1,h2,h3,h4{
  margin:0;
  font-weight:var(--fw-h);
  line-height:1.45;
  letter-spacing:.01em;
  color:var(--c-deep);
}
p{margin:0;}
ul,ol,dl,dd,figure{margin:0;padding:0;}
li{ list-style:none; }
fieldset{ min-width:0; margin:0; padding:0; border:0; }
legend{ padding:0; }

/* 余白の微調整（レイアウト用の小さなユーティリティ） */
.u-mt0{ margin-top:0; }
.u-mt14{ margin-top:14px; }
.u-mt24{ margin-top:24px; }
.u-mb24{ margin-bottom:24px; }

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--c-blue); text-decoration:underline; text-underline-offset:2px; }
a:hover{ text-decoration-thickness:2px; }

/* 数字は等幅系で組む（表・数値の一覧性を上げる）
   漢字を含む要素には --ff-num（和文グリフを持たない）を当てず、
   数字だけを .num で囲む。 */
.num,.numbers__num,.timeline__year,.news__date{
  font-family:var(--ff-num);
  font-weight:var(--fw-num);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.count{ font-weight:var(--fw-num); font-variant-numeric:tabular-nums; }

/* フォーカスリングは消さない。明るい面では青、濃紺の面では白（§4-3 の比を確保） */
:focus-visible{
  outline:3px solid var(--c-blue);
  outline-offset:2px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.section--deep :focus-visible,
.page-head :focus-visible,
.contact-band :focus-visible,
.sample-note :focus-visible{
  outline-color:var(--c-on-deep);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-deep); color:var(--c-on-deep);
  padding:12px 20px; border-radius:0 0 var(--r-md) 0;
}
.skip-link:focus{ left:0; }

/* -------------------------------------------------------------------------
   3. レイアウト部品
   ------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--w-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--sp-section-sp); }
@media (min-width:1024px){
  .section{ padding-block:var(--sp-section); }
}
.section--surface{ background:var(--c-surface); }
.section--band{ background:var(--c-bg-sub); }
.section--tight{ padding-block:32px; }

.section--deep{
  background:var(--c-deep);
  color:var(--c-on-deep);
}
.section--deep h2,
.section--deep h3{ color:var(--c-on-deep); }

/* 見出しは罫線で締める（硬い情報型の基本形） */
.section__head{
  margin-bottom:28px;
  padding-bottom:14px;
  border-bottom:2px solid var(--c-line);
}
.section--deep .section__head{ border-bottom-color:var(--c-on-deep); }
.section__head--plain{ border-bottom:0; padding-bottom:0; }

.section__en{
  display:block;
  margin-bottom:6px;
  font-family:var(--ff-num);
  font-size:12px;
  font-weight:var(--fw-num);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-blue);
}
.section--deep .section__en{ color:var(--c-on-deep); }

.section__title{ font-size:24px; }
@media (min-width:1024px){
  .section__title{ font-size:var(--fs-h2); }
}

.section__lead{
  margin-top:12px;
  max-width:var(--w-narrow);
  color:var(--c-muted);
}
.section--deep .section__lead{ color:var(--c-on-deep); }

.section__foot{ margin-top:28px; }

/* ボタン */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-family:inherit;
  font-size:15px;
  font-weight:var(--fw-h);
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--t), color var(--t), border-color var(--t);
}
.btn--accent{ background:var(--c-accent); color:var(--c-on-accent); }
.btn--accent:hover{ background:var(--c-blue); color:var(--c-on-deep); }
.btn--deep{ background:var(--c-deep); color:var(--c-on-deep); }
.btn--deep:hover{ background:var(--c-blue); color:var(--c-on-deep); }
.btn--outline{
  background:var(--c-surface);
  color:var(--c-deep);
  border-color:var(--c-line-strong);
}
.btn--outline:hover{ background:var(--c-blue); color:var(--c-on-deep); border-color:var(--c-blue); }
.btn--light{
  background:transparent;
  color:var(--c-on-deep);
  border-color:var(--c-on-deep);
}
.btn--light:hover{ background:var(--c-on-deep); color:var(--c-deep); }
.btn--block{ width:100%; }

/* タグ（山吹は面としてのみ使用。文字は --c-on-accent） */
.tag{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--r-xs);
  font-size:12px;
  font-weight:var(--fw-h);
  line-height:1.6;
  white-space:nowrap;
}
.tag--accent{ background:var(--c-accent); color:var(--c-on-accent); }
.tag--line{
  background:var(--c-bg);
  color:var(--c-deep);
  border:1px solid var(--c-line);
}

/* 注記・キャプション */
.note{
  font-size:var(--fs-small);
  color:var(--c-muted);
}
.section--deep .note{ color:var(--c-on-deep); }
.note--box{
  margin-top:16px;
  padding:12px 16px;
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  background:var(--c-bg);
  font-size:var(--fs-small);
  color:var(--c-ink);
}

/* パンくず */
.breadcrumb{ background:var(--c-bg-sub); border-bottom:1px solid var(--c-line); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:0 8px; padding-block:12px; font-size:var(--fs-small); }
.breadcrumb li+li::before{ content:"＞"; margin-right:8px; color:var(--c-muted); }
.breadcrumb a{ color:var(--c-blue); }
.breadcrumb [aria-current="page"]{ color:var(--c-ink); }

/* 下層ページの見出し帯 */
.page-head{ background:var(--c-deep); color:var(--c-on-deep); padding-block:36px 32px; }
.page-head__en{
  display:block;
  margin-bottom:8px;
  padding-left:10px;
  border-left:3px solid var(--c-accent);
  font-family:var(--ff-num);
  font-size:12px;
  font-weight:var(--fw-num);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-on-deep);
}
.page-head__title{ font-size:26px; color:var(--c-on-deep); }
@media (min-width:1024px){
  .page-head{ padding-block:48px 44px; }
  .page-head__title{ font-size:var(--fs-h1); }
}
.page-head__lead{ margin-top:12px; max-width:var(--w-narrow); color:var(--c-on-deep); }

/* -------------------------------------------------------------------------
   4. ヘッダー（濃紺・固定・常時 TEL と資料請求）
   ------------------------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:var(--c-deep);
  color:var(--c-on-deep);
  border-bottom:4px solid var(--c-accent);
}
.header__inner{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--header-h-sp);
}
@media (min-width:1024px){
  .header__inner{ min-height:var(--header-h); gap:16px; }
}

.brand{ order:1; display:block; text-decoration:none; }
.brand__name{
  display:block;
  color:var(--c-on-deep);
  font-size:14px;
  font-weight:var(--fw-h);
  line-height:1.3;
  white-space:nowrap;
}
.brand__en{
  display:block;
  font-family:var(--ff-num);
  font-size:9px;
  font-weight:var(--fw-num);
  letter-spacing:.14em;
  color:var(--c-on-deep);
  white-space:nowrap;
}
@media (min-width:1024px){
  .brand__name{ font-size:17px; }
  .brand__en{ font-size:10px; letter-spacing:.16em; }
}

/* ハンバーガー */
.nav-toggle{
  order:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:42px;
  height:38px;
  padding:0 10px;
  border:1px solid var(--c-on-deep);
  border-radius:var(--r-md);
  background:transparent;
  cursor:pointer;
}
.nav-toggle__bar{
  display:block;
  height:2px;
  margin:2px 0;
  background:var(--c-on-deep);
  transition:transform var(--t), opacity var(--t);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-4px) rotate(-45deg); }

/* ナビ（モバイルはヘッダー下のパネル。JSが hidden を付ける）
   パネル = 開閉する箱、nav = 6項目のリンク一覧（項目数は増やさない） */
.header__panel{
  position:absolute;
  top:100%; left:0; right:0;
  max-height:calc(100vh - var(--header-h-sp));
  overflow:auto;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-line);
  padding:4px var(--gutter) 20px;
}
.header__nav{ display:block; }
.header__list li + li{ border-top:1px solid var(--c-line); }
.header__list a{
  display:block;
  padding:14px 2px;
  color:var(--c-deep);
  font-weight:var(--fw-h);
  text-decoration:none;
}
.header__list a:hover{ background:var(--c-bg); }
.header__list a[aria-current="page"]{ background:var(--c-accent); color:var(--c-on-accent); }
.header__nav-extra{ margin-top:16px; }

@media (min-width:1024px){
  /* PC ではハンバーガーを出さない。ナビは常に横並びで見えている */
  .nav-toggle{ display:none; }
  .header__panel{
    order:2;
    position:static;
    flex:1 1 auto;
    min-width:0;
    max-height:none;
    overflow:visible;
    background:transparent;
    border-bottom:0;
    padding:0;
  }
  .header__list{ display:flex; flex-wrap:nowrap; justify-content:center; }
  .header__list li + li{ border-top:0; }
  .header__list a{
    padding:10px 9px;
    color:var(--c-on-deep);
    font-size:13px;
    white-space:nowrap;
  }
  .header__list a:hover{ background:var(--c-blue); color:var(--c-on-deep); }
  .header__nav-extra{ display:none; }
}
@media (min-width:1280px){
  .header__list a{ font-size:14px; padding:10px 11px; }
}

/* TEL */
.header__tel{
  order:2;
  margin-left:auto;
  text-align:right;
  line-height:1.25;
}
.header__tel-num{
  display:block;
  font-family:var(--ff-num);
  font-weight:var(--fw-num);
  font-size:14px;
  color:var(--c-on-deep);
  white-space:nowrap;
}
.header__tel-label{
  display:none;
  font-size:11px;
  color:var(--c-on-deep);
}
@media (min-width:1024px){
  .header__tel{ order:3; margin-left:0; }
  .header__tel-num{ font-size:16px; }
}
@media (min-width:1280px){
  .header__tel-label{ display:block; }
}

.header__cta{ order:4; display:none; }
@media (min-width:1024px){
  .header__cta{ display:block; }
  .header__cta .btn{ padding:12px 18px; font-size:14px; }
}
@media (min-width:1280px){
  .header__cta .btn{ padding:13px 22px; font-size:15px; }
}

/* -------------------------------------------------------------------------
   5. ヒーロー（写真は全幅、文字は濃紺の面に載せて可読性を固定する）
   ------------------------------------------------------------------------- */
.hero{ background:var(--c-deep); }
.hero__media{ width:100%; }
.hero__media img{
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
}
@media (min-width:1024px){
  .hero__media img{ max-height:520px; }
}
.hero__inner{
  position:relative;
  margin-top:-10px;
  padding:26px var(--gutter) 30px;
  background:var(--c-deep);
  border-top:4px solid var(--c-accent);
}
@media (min-width:1024px){
  .hero__inner{
    margin-top:-72px;
    padding:34px 36px 38px;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
}
.hero__en{
  display:block;
  margin-bottom:10px;
  font-family:var(--ff-num);
  font-size:12px;
  font-weight:var(--fw-num);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-on-deep);
}
.hero__title{
  font-size:26px;
  color:var(--c-on-deep);
}
@media (min-width:1024px){
  .hero__title{ font-size:var(--fs-h1); }
}
.hero__lead{
  margin-top:14px;
  max-width:var(--w-narrow);
  color:var(--c-on-deep);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

/* -------------------------------------------------------------------------
   6. 実績数値バー（濃紺の面・白文字・数字の下に山吹の短い下線）
   ------------------------------------------------------------------------- */
.numbers{ background:var(--c-deep); color:var(--c-on-deep); }
.numbers__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--c-line);        /* 1px の隙間が罫線になる */
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media (min-width:1024px){
  .numbers__grid{ grid-template-columns:repeat(4,1fr); }
}
.numbers__item{
  background:var(--c-deep);
  padding:22px 16px 20px;
}
@media (min-width:1024px){
  .numbers__item{ padding:26px 22px 24px; }
}
.numbers__value{
  display:inline-block;
  padding-bottom:8px;
  border-bottom:3px solid var(--c-accent);
  font-size:34px;
  line-height:1.1;
}
@media (min-width:1024px){
  .numbers__value{ font-size:var(--fs-num-xl); }
}
.numbers__num{ font-family:var(--ff-num); font-weight:var(--fw-num); }
.numbers__label{
  margin-top:10px;
  font-size:var(--fs-small);
  color:var(--c-on-deep);
}
/* 明るい面で使う場合（採用ページの「数字で見る」） */
.numbers--light{ background:transparent; color:var(--c-ink); }
.numbers--light .numbers__grid{ background:var(--c-line); }
.numbers--light .numbers__item{ background:var(--c-surface); }
.numbers--light .numbers__value{ color:var(--c-deep); }
.numbers--light .numbers__label{ color:var(--c-muted); }

/* -------------------------------------------------------------------------
   7. 事業内容 3面（写真と表を交互に置く）
   ------------------------------------------------------------------------- */
.biz__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-gap);
}
@media (min-width:900px){
  .biz__grid{ grid-template-columns:repeat(3,1fr); }
}
.biz__item{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.biz__item img{ width:100%; height:auto; }
.biz__body{ padding:18px; }
@media (min-width:1024px){
  .biz__body{ padding:20px 22px 24px; }
}
.biz__no{
  font-family:var(--ff-num);
  font-size:12px;
  font-weight:var(--fw-num);
  letter-spacing:.12em;
  color:var(--c-blue);
}
.biz__title{ margin-top:6px; font-size:var(--fs-h3); }
.biz__text{ margin-top:10px; font-size:15px; color:var(--c-ink); }
.biz__list{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--c-line);
  font-size:var(--fs-small);
  color:var(--c-muted);
}
.biz__list li + li{ margin-top:6px; }

/* -------------------------------------------------------------------------
   8. 施工実績（絞り込み＋カード）
   ------------------------------------------------------------------------- */
.works__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.count{
  font-size:15px;
  font-weight:var(--fw-num);
  color:var(--c-deep);
}
.section--deep .count{ color:var(--c-on-deep); }

.filter{
  margin-top:20px;
  padding:16px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
}
.filter__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.filter__row + .filter__row{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--c-line);
}
.filter__label{
  font-size:var(--fs-small);
  font-weight:var(--fw-h);
  color:var(--c-deep);
  white-space:nowrap;
}
.filter__btns{ display:flex; flex-wrap:wrap; gap:8px; }
.filter__btn{
  padding:8px 14px;
  border:1px solid var(--c-line-strong);
  border-radius:var(--r-sm);
  background:var(--c-surface);
  color:var(--c-deep);
  font-family:inherit;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
  transition:background-color var(--t), color var(--t), border-color var(--t);
}
.filter__btn:hover{ background:var(--c-blue); color:var(--c-on-deep); border-color:var(--c-blue); }
.filter__btn[aria-pressed="true"]{
  background:var(--c-deep);
  color:var(--c-on-deep);
  border-color:var(--c-deep);
}

.works-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-gap);
  margin-top:24px;
}
@media (min-width:640px){
  .works-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .works-grid{ grid-template-columns:repeat(4,1fr); }
}

.card{
  display:flex;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.card__link{
  display:flex;
  flex-direction:column;
  width:100%;
  color:inherit;
  text-decoration:none;
  transition:border-color var(--t);
}
.card__link:hover .card__title{ text-decoration:underline; }
.card__media{ margin:0; aspect-ratio:4 / 3; overflow:hidden; background:var(--c-bg); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:10px;
  padding:14px 15px 16px;
}
.card__title{
  font-size:15px;
  line-height:1.55;
  color:var(--c-deep);
}
.card__specs{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px 10px;
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--c-line);
  font-size:12.5px;
  line-height:1.6;
}
.card__specs dt{ color:var(--c-muted); white-space:nowrap; }
.card__specs dd{ color:var(--c-ink); }
.card__price{
  color:var(--c-deep);
  font-weight:var(--fw-num);
  font-size:13px;
}
.card__price .num{ font-size:15px; }
.works__empty{
  margin-top:24px;
  padding:18px;
  border:1px dashed var(--c-line-strong);
  border-radius:var(--r-sm);
  background:var(--c-surface);
  color:var(--c-ink);
  font-weight:var(--fw-h);
}

/* -------------------------------------------------------------------------
   9. 選ばれる理由（2列×3行の罫線グリッド）
   ------------------------------------------------------------------------- */
.reasons__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--c-line);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media (min-width:768px){
  .reasons__grid{ grid-template-columns:repeat(2,1fr); }
}
.reasons__item{ background:var(--c-surface); padding:20px 18px 22px; }
@media (min-width:1024px){
  .reasons__item{ padding:24px 26px 26px; }
}
.reasons__no{
  font-family:var(--ff-num);
  font-size:var(--fs-small);
  font-weight:var(--fw-num);
  letter-spacing:.1em;
  color:var(--c-blue);
}
.reasons__title{ margin-top:6px; font-size:var(--fs-h3); }
.reasons__text{ margin-top:10px; color:var(--c-muted); font-size:15px; }

/* -------------------------------------------------------------------------
   10. お知らせ（日付＋タグ＋見出しの1行リスト）
   ------------------------------------------------------------------------- */
.news{ border-top:1px solid var(--c-line); }
.news__item{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:baseline;
  gap:8px 12px;
  padding:14px 0;
  border-bottom:1px solid var(--c-line);
}
.news__date{
  font-size:var(--fs-small);
  color:var(--c-muted);
  white-space:nowrap;
}
.news__title{ font-size:15px; }
.news__title a{ color:var(--c-deep); }
@media (max-width:559px){
  .news__item{ grid-template-columns:auto auto; }
  .news__title{ grid-column:1 / -1; }
}

/* -------------------------------------------------------------------------
   11. 写真＋本文（保証・採用ダイジェストなど）
   ------------------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-gap);
}
@media (min-width:900px){
  .split{ grid-template-columns:5fr 6fr; gap:40px; align-items:start; }
  .split--reverse .split__media{ order:2; }
}
.split__media{ margin:0 auto; max-width:var(--w-narrow); }
.split__media img{
  width:100%;
  height:auto;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
}
.split__cap{ margin-top:8px; font-size:var(--fs-small); color:var(--c-muted); }
.split__body h3{ font-size:var(--fs-h3); }
.split__body p + p{ margin-top:12px; }
.split__body .btn{ margin-top:20px; }

/* 罫線付きの箇条書き */
.checks{ margin-top:16px; border-top:1px solid var(--c-line); }
.checks li{
  position:relative;
  padding:12px 0 12px 22px;
  border-bottom:1px solid var(--c-line);
  font-size:15px;
}
.checks li::before{
  content:"";
  position:absolute;
  left:0; top:20px;
  width:10px; height:2px;
  background:var(--c-blue);
}
.checks strong{ color:var(--c-deep); }

/* -------------------------------------------------------------------------
   12. 表（会社概要・募集要項）
   ------------------------------------------------------------------------- */
.table{
  width:100%;
  border-collapse:collapse;
  background:var(--c-surface);
  font-size:15px;
}
.table th,.table td{
  border:1px solid var(--c-line);
  padding:13px 16px;
  text-align:left;
  vertical-align:top;
}
.table th{
  width:34%;
  background:var(--c-bg);
  color:var(--c-deep);
  font-weight:var(--fw-h);
}
.table--fixed{ table-layout:fixed; }
.table--fixed th{ width:30%; }
.table caption{
  padding:0 0 10px;
  text-align:left;
  font-size:var(--fs-small);
  font-weight:var(--fw-h);
  color:var(--c-deep);
}

@media (max-width:639px){
  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack th,
  .table--stack td{ display:block; width:auto; }
  /* table を display:block にすると caption だけが table-caption のまま残り、
     幅が決まらずに1〜2文字ずつ折り返して縦書きのように見える。ここも block にする */
  .table--stack caption{ display:block; }
  .table--stack{ border:0; background:transparent; }
  .table--stack tr{
    margin-bottom:10px;
    border:1px solid var(--c-line);
    border-radius:var(--r-sm);
    background:var(--c-surface);
    overflow:hidden;
  }
  .table--stack th{
    border:0;
    border-bottom:1px solid var(--c-line);
    background:var(--c-bg);
    padding:9px 13px;
    font-size:14px;
  }
  .table--stack td{ border:0; padding:11px 13px; }
}

/* 募集要項の2職種を並べる */
.jobs{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-gap);
  margin-top:24px;
}
@media (min-width:1024px){
  .jobs{ grid-template-columns:repeat(2,1fr); gap:28px; }
}
.jobs__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  padding-bottom:10px;
  border-bottom:2px solid var(--c-deep);
}
.jobs__name{ font-size:var(--fs-h3); }
.jobs .table{ margin-top:0; }

/* 社員の声 */
.voices{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-gap);
  margin-top:24px;
}
@media (min-width:768px){
  .voices{ grid-template-columns:repeat(3,1fr); }
}
.voices__item{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:20px;
}
.voices__meta{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--c-line);
}
.voices__who{ font-family:var(--ff-num); font-weight:var(--fw-num); color:var(--c-deep); }
.voices__year{ font-size:var(--fs-small); color:var(--c-muted); }
.voices__text{ margin-top:12px; font-size:15px; }
.voices--single{ grid-template-columns:1fr; }

/* 前後の事例へのリンク */
.pager{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:32px;
}
@media (min-width:768px){
  .pager{ grid-template-columns:1fr 1fr; }
}
.pager a{
  display:block;
  padding:14px 16px;
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  background:var(--c-surface);
  color:var(--c-deep);
  font-weight:var(--fw-h);
  font-size:15px;
  text-decoration:none;
  transition:background-color var(--t), color var(--t);
}
.pager a:hover{ background:var(--c-blue); color:var(--c-on-deep); }
.pager span{
  display:block;
  margin-bottom:4px;
  font-size:var(--fs-small);
  font-weight:var(--fw-body);
  color:var(--c-muted);
}
.pager a:hover span{ color:var(--c-on-deep); }

/* 採用の流れ（4ステップ） */
.steps{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  margin-top:24px;
  background:var(--c-line);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  counter-reset:step;
}
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(4,1fr); }
}
.steps__item{ background:var(--c-surface); padding:20px 18px 22px; }
.steps__no{
  display:inline-block;
  margin-bottom:10px;
  padding:2px 8px;
  border-radius:var(--r-xs);
  background:var(--c-accent);
  color:var(--c-on-accent);
  font-family:var(--ff-num);
  font-size:12px;
  font-weight:var(--fw-num);
}
.steps__title{ font-size:16px; }
.steps__text{ margin-top:8px; font-size:var(--fs-small); color:var(--c-muted); }

/* -------------------------------------------------------------------------
   13. 施工事例詳細（写真のサムネイル＋拡大／定義リストの仕様表）
   ------------------------------------------------------------------------- */
.shots{ margin-top:20px; }
.shots__item{ margin-bottom:16px; }
.shots__item img{
  width:100%;
  height:auto;
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  background:var(--c-surface);
}
.shots__cap{ margin-top:8px; font-size:var(--fs-small); color:var(--c-muted); }
.shots[data-shots-ready] .shots__item{ display:none; margin-bottom:0; }
.shots[data-shots-ready] .shots__item.is-active{ display:block; }
.shots__thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--c-line);
}
.shots__thumb{
  width:88px;
  padding:0;
  border:2px solid var(--c-line);
  border-radius:var(--r-sm);
  background:var(--c-surface);
  cursor:pointer;
  overflow:hidden;
}
.shots__thumb img{ width:100%; height:auto; display:block; }
.shots__thumb[aria-pressed="true"]{ border-color:var(--c-deep); }
@media (min-width:768px){
  .shots__thumb{ width:104px; }
}

.spec-table{
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  background:var(--c-surface);
  overflow:hidden;
}
.spec-table__row{
  display:grid;
  grid-template-columns:1fr;
  border-bottom:1px solid var(--c-line);
}
.spec-table__row:last-child{ border-bottom:0; }
@media (min-width:640px){
  .spec-table__row{ grid-template-columns:180px 1fr; }
}
.spec-table dt{
  padding:12px 16px;
  background:var(--c-bg);
  color:var(--c-deep);
  font-weight:var(--fw-h);
  font-size:14px;
}
.spec-table dd{ padding:12px 16px; }

/* -------------------------------------------------------------------------
   14. 沿革（年表）
   ------------------------------------------------------------------------- */
.timeline{ margin-top:24px; border-top:2px solid var(--c-deep); }
.timeline__row{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--c-line);
}
@media (min-width:768px){
  .timeline__row{ grid-template-columns:150px 1fr; gap:20px; }
}
.timeline__year{ color:var(--c-blue); font-size:16px; }
.timeline__era{ display:block; font-family:var(--ff-base); font-size:var(--fs-small); color:var(--c-muted); letter-spacing:var(--ls-body); }
.timeline__text{ font-size:15px; }

/* -------------------------------------------------------------------------
   15. お問い合わせ（帯・フォーム）
   ------------------------------------------------------------------------- */
.contact-band{
  background:var(--c-deep);
  color:var(--c-on-deep);
  padding-block:32px;
}
.contact-band__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.contact-band__title{ font-size:var(--fs-h3); color:var(--c-on-deep); }
.contact-band__text{ margin-top:8px; color:var(--c-on-deep); font-size:15px; }
.contact-band__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.contact-band__tel{
  font-family:var(--ff-num);
  font-weight:var(--fw-num);
  font-size:22px;
  color:var(--c-on-deep);
  white-space:nowrap;
}
@media (min-width:1024px){
  .contact-band__tel{ font-size:28px; }
}

.contact-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-gap);
  margin-top:24px;
}
@media (min-width:768px){
  .contact-cards{ grid-template-columns:repeat(2,1fr); }
}
.contact-card{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:22px;
}
.contact-card__label{
  font-size:var(--fs-small);
  font-weight:var(--fw-h);
  color:var(--c-blue);
}
.contact-card__value{
  display:block;
  margin-top:6px;
  font-family:var(--ff-num);
  font-weight:var(--fw-num);
  font-size:26px;
  color:var(--c-deep);
}
.contact-card__sub{ margin-top:8px; font-size:var(--fs-small); color:var(--c-muted); }

.form{
  margin-top:20px;
  padding:22px 18px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
}
@media (min-width:768px){
  .form{ padding:28px 28px 32px; }
}
.field{ margin-bottom:22px; }
.field > label,
.field .field__label{
  display:block;
  margin-bottom:8px;
  font-weight:var(--fw-h);
  color:var(--c-deep);
  font-size:15px;
}
.req{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px;
  border-radius:var(--r-xs);
  background:var(--c-surface);   /* 白背景 */
  color:var(--c-alert);          /* #B3261E / #FFFFFF = 6.54:1 */
  font-size:11px;
  font-weight:var(--fw-h);
  line-height:1.7;
  vertical-align:1px;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea,
.field select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--c-line-strong);
  border-radius:var(--r-md);
  background:var(--c-surface);
  color:var(--c-ink);
  font-family:inherit;
  font-size:16px;
  line-height:1.6;
}
.field textarea{ min-height:160px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--c-muted); }
.field__hint{ margin-top:8px; font-size:var(--fs-small); color:var(--c-muted); }

.radios{ display:flex; flex-wrap:wrap; gap:8px; }
.radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid var(--c-line-strong);
  border-radius:var(--r-sm);
  background:var(--c-surface);
  color:var(--c-deep);
  font-size:14px;
  cursor:pointer;
}
.radio input{ width:18px; height:18px; margin:0; }
.radio:has(input:checked){ background:var(--c-deep); color:var(--c-on-deep); }
.radio:hover{ background:var(--c-bg); }
.radio:has(input:checked):hover{ background:var(--c-deep); }

.choice{ display:flex; align-items:flex-start; gap:10px; font-size:15px; }
.choice input{ width:18px; height:18px; margin:3px 0 0; }

.form-status{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid var(--c-line);
  border-left:4px solid var(--c-accent);
  border-radius:var(--r-sm);
  background:var(--c-bg);
  color:var(--c-ink);
  font-weight:var(--fw-h);
}
.form-actions{ margin-top:24px; }

/* -------------------------------------------------------------------------
   16. サンプル注記
   ------------------------------------------------------------------------- */
.sample-note{
  background:var(--c-deep);
  color:var(--c-on-deep);
  padding-block:20px;
}
.sample-note p{ font-size:var(--fs-small); color:var(--c-on-deep); }

/* -------------------------------------------------------------------------
   17. フッター
   ------------------------------------------------------------------------- */
.site-footer{
  background:var(--c-deep-2);
  color:var(--c-on-deep);
  padding-block:36px 24px;
}
.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media (min-width:768px){
  .footer__grid{ grid-template-columns:1.2fr 1fr; gap:32px; }
}
.footer__name{
  font-size:17px;
  font-weight:var(--fw-h);
  color:var(--c-on-deep);
}
.footer__en{
  display:block;
  margin-top:2px;
  font-family:var(--ff-num);
  font-size:10px;
  font-weight:var(--fw-num);
  letter-spacing:.16em;
  color:var(--c-on-deep);
}
.footer__info{ margin-top:14px; font-size:var(--fs-small); color:var(--c-on-deep); }
.footer__info dt{
  display:inline-block;
  min-width:5.5em;
  font-weight:var(--fw-h);
}
.footer__info div{ margin-top:6px; }
.footer__nav ul{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px 16px;
}
.footer__nav a{
  display:block;
  padding:6px 0;
  border-bottom:1px solid var(--c-line);
  color:var(--c-on-deep);
  font-size:14px;
  text-decoration:none;
}
.footer__nav a:hover{ text-decoration:underline; }
.footer__lead{
  margin-bottom:10px;
  font-family:var(--ff-num);
  font-size:11px;
  font-weight:var(--fw-num);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-on-deep);
}
.footer__bottom{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--c-line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--c-on-deep);
}

/* -------------------------------------------------------------------------
   18. 印刷（最低限、固定ヘッダーを解除して紙面で崩さない）
   ------------------------------------------------------------------------- */
@media (min-width:768px){ /* 例: 印刷時も本文幅を確保 */
  .footer__nav ul{ grid-template-columns:repeat(3,1fr); }
}

@media print{
  :root{ --sp-section:24px; --sp-section-sp:24px; }
  body{ padding-top:0; background:#FFFFFF; color:#000000; }
  .site-header{
    position:static;
    background:#FFFFFF;
    color:#000000;
    border-bottom:1px solid #000000;
  }
  .site-header .brand__name,
  .site-header .brand__en,
  .site-header .header__tel-num,
  .site-header .header__tel-label{ color:#000000; }
  .header__panel,
  .header__panel[hidden]{ display:block !important; position:static; }
  .header__list{ display:flex; flex-wrap:wrap; }
  .header__list a{ color:#000000; }
  .header__list a[aria-current="page"]{ background:transparent; color:#000000; text-decoration:underline; }
  .nav-toggle,
  .header__cta,
  .header__nav-extra,
  .skip-link,
  .works-filter,
  .filter,
  .contact-band__actions{ display:none !important; }
  .section--deep,
  .page-head,
  .numbers,
  .contact-band,
  .sample-note,
  .site-footer{ background:#FFFFFF !important; color:#000000 !important; }
  .section--deep h1,.section--deep h2,.section--deep h3,
  .page-head__title,.page-head__en,.page-head__lead,
  .numbers__value,.numbers__label,
  .contact-band__title,.contact-band__text,.contact-band__tel,
  .sample-note p,.footer__name,.footer__en,.footer__info,.footer__nav a,.footer__bottom,
  .section__lead,.note{ color:#000000 !important; }
  .card,.voices__item,.biz__item,.contact-card,.form,.spec-table{ break-inside:avoid; }
  .works-grid{ grid-template-columns:repeat(2,1fr); }
  .shots[data-shots-ready] .shots__item{ display:block !important; }
  a[href]::after{ content:""; }
}

/* -------------------------------------------------------------------------
   19. 動きを減らす設定を尊重する
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
}

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}