@charset "utf-8";
/* ==========================================================================
   名和造園土木 見本サイト v2
   配色の出どころ：Googleマップの現場写真（空の青＝濃紺／クレーンの朱赤）
   角丸は 0 で統一（機械と現場の主題に合わせる）
   アクセントは朱赤 1色のみ。他の差し色は使わない
   朱赤は写真の中にほぼ無い色（実測 3.1%）なので、ボタンが写真に埋もれない
   ========================================================================== */
:root{
  /* 色（1アクセント固定） */
  --ink:      #111D30;   /* 地の濃色＝濃紺。写真の空とつながる */
  --ink-2:    #1B2C45;
  --paper:    #FFFFFF;
  --tint:     #F1F3F5;   /* 冷たいグレー。ベージュは使わない */
  --line:     #D7DBE0;
  --body:     #4A5563;
  --y:        #CF4126;   /* 朱赤（クレーンの色）。ページ内で唯一のアクセント */
  --y-l:      #F07A52;   /* 濃紺の上に置く明るい朱（小さい文字用） */
  --y-d:      #A93318;
  --on-y:     #FFFFFF;   /* 朱赤の上の文字（コントラスト比 4.73:1／AA合格） */
  --ink-rgb:  17,29,48;  /* 幕・影・モーダルで使う濃色（--ink と同じ色） */
  --line-dk:  #2A3E5A;   /* 濃色セクションの罫線 */
  --dim:      #9FAAB9;   /* 濃色の上の小さい文字 */
  --dim-2:    #BCC6D2;   /* 濃色の上の注記 */
  --th-bg:    #E6E9EE;   /* 会社概要の見出しセル */
  --ftr-bg:   #0B1524;
  --ftr-line: #22344B;
  --field-bg: #17263C;
  --field-bd: #3C5170;

  /* 文字 */
  --f: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic Medium","游ゴシック Medium",YuGothic,Meiryo,sans-serif;
  --h1:   clamp(30px, 4.6vw, 56px);
  --h2:   clamp(23px, 2.9vw, 36px);
  --h3:   clamp(19px, 1.9vw, 24px);
  --tx:   16px;
  --lh:   1.9;

  /* 余白（VISUAL_DENSITY 3 ＝ ゆったり） */
  --sec:  clamp(64px, 8vw, 120px);
  --wrap: 1180px;
  --pad:  clamp(20px, 5vw, 48px);
  --hdr-h: 68px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 8px); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:var(--tx); line-height:var(--lh);
  letter-spacing:.04em; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3{ margin:0; letter-spacing:.03em; line-height:1.35; font-weight:700; }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }
p{ margin:0; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- ボタン（角丸0で統一） ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  padding:15px 30px; font-size:15px; font-weight:700; letter-spacing:.1em;
  border:2px solid transparent; border-radius:0; text-decoration:none;
  transition:transform .18s cubic-bezier(.16,1,.3,1), background-color .18s, color .18s;
}
.btn--y{ background:var(--y); color:var(--on-y); }
.btn--y:hover{ background:var(--y-d); }
.btn--line{ border-color:currentColor; background:transparent; color:#fff; }
.btn--line:hover{ background:#fff; color:var(--ink); }
.btn:active{ transform:translateY(1px); }

/* ---------- 断り書き ---------- */
.notice{
  background:var(--ink); color:var(--dim-2); font-size:12.5px; line-height:1.75;
  padding:11px var(--pad); text-align:center; letter-spacing:.02em;
}

/* ---------- ヘッダー ---------- */
.hdr{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); }
.hdr.is-small{ box-shadow:0 6px 20px rgba(var(--ink-rgb),.07); }
.hdr__in{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  height:var(--hdr-h); display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.brand{ text-decoration:none; margin-right:auto; }
.brand__n{ display:block; font-size:15.5px; font-weight:700; letter-spacing:.06em; }
.brand__s{ display:block; font-size:10.5px; color:var(--body); letter-spacing:.14em; margin-top:2px; }
.nav{ display:flex; gap:clamp(12px,1.8vw,26px); }
.nav a{ font-size:14px; text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; }
.nav a:hover{ border-bottom-color:var(--y); }
.hdr__tel{ font-size:17px; font-weight:700; letter-spacing:.03em; text-decoration:none; }
.hdr__cta{ padding:11px 20px; font-size:13.5px; }
.burger{ display:none; }

/* ---------- ヒーロー（左寄せ・写真の上に幕） ---------- */
.hero{ position:relative; min-height:min(640px, calc(100dvh - var(--hdr-h))); display:flex; align-items:flex-end; }
.hero__ph{ position:absolute; inset:0; }
.hero__ph img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(var(--ink-rgb),.86) 0%, rgba(var(--ink-rgb),.68) 38%, rgba(var(--ink-rgb),.12) 72%, rgba(var(--ink-rgb),0) 100%);
}
.hero__body{ position:relative; z-index:1; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) clamp(48px,7vw,86px); color:#fff; }
.hero__eyebrow{ font-size:12px; letter-spacing:.22em; color:var(--y-l); margin-bottom:18px; font-weight:700; }
.hero h1{ font-size:var(--h1); line-height:1.24; letter-spacing:.02em; margin-bottom:22px; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.hero__lead{ font-size:16.5px; line-height:1.95; max-width:34em; color:#E4E6E9; margin-bottom:32px; }
.hero__btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- 困りごと（文字だけの帯） ---------- */
.trouble{ background:var(--ink); color:#fff; padding-block:var(--sec); }
.trouble h2{ margin-bottom:clamp(28px,4vw,44px); }
.trouble__list{ list-style:none; margin:0 0 34px; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line-dk); }
.trouble__list li{ padding:24px 0; border-bottom:1px solid var(--line-dk); padding-right:32px; }
.trouble__list li:nth-child(odd){ border-right:1px solid var(--line-dk); padding-left:0; }
.trouble__list li:nth-child(even){ padding-left:32px; }
.trouble__list b{ display:block; font-size:18px; margin-bottom:7px; }
.trouble__list b::before{ content:""; display:inline-block; width:14px; height:2px; background:var(--y-l);
  vertical-align:middle; margin-right:12px; }
.trouble__list span{ display:block; font-size:14.5px; color:var(--dim); line-height:1.85; padding-left:26px; }
.trouble__note{ font-size:15px; color:var(--dim-2); }

/* ---------- できること（左右交互・2回まで） ---------- */
.svc{ padding-block:var(--sec); }
.svc__h{ margin-bottom:clamp(30px,4vw,52px); max-width:22em; }
.svc__row{ display:grid; grid-template-columns:1.15fr .85fr; align-items:center;
  gap:clamp(24px,4vw,56px); margin-bottom:clamp(28px,4vw,48px); }
.svc__row:last-child{ margin-bottom:0; }
.svc__row--flip{ grid-template-columns:.85fr 1.15fr; }
.svc__row--flip .svc__ph{ order:2; }
.svc__ph img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.svc__tx{ padding-inline:var(--pad); max-width:640px; }
.svc__row--flip .svc__tx{ margin-left:auto; }
.svc__tx h3{ margin-bottom:14px; }
.svc__tx h3::after{ content:""; display:block; width:40px; height:3px; background:var(--y); margin-top:14px; }
.svc__tx p{ color:var(--body); }
.svc__tags{ margin-top:16px; font-size:13.5px; color:var(--ink); letter-spacing:.06em; }

/* ---------- 機械（写真の上に白いカードを重ねる） ---------- */
.kikai{ position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center;
  background:var(--tint); }
.kikai__ph img{ width:100%; height:100%; max-height:760px; object-fit:cover; }
.kikai__card{ padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px); max-width:620px; }
.kikai__card h2{ margin-bottom:20px; }
.kikai__card p{ color:var(--body); margin-bottom:28px; }
.kikai__card b{ color:var(--ink); }

/* ---------- 規模（全幅の帯） ---------- */
.scale{ position:relative; }
.scale__ph img{ width:100%; height:clamp(220px,30vw,380px); object-fit:cover; }
.scale__tx{ position:absolute; inset:auto 0 0 0; padding:clamp(20px,3vw,34px) var(--pad);
  background:linear-gradient(0deg, rgba(var(--ink-rgb),.9), rgba(var(--ink-rgb),0)); }
.scale__tx p{ max-width:var(--wrap); margin-inline:auto; color:#fff; font-size:clamp(15px,1.6vw,18px); }

/* ---------- 施工事例（非対称グリッド・4件＝4セル） ---------- */
.works{ padding-block:var(--sec); background:var(--tint); }
.works h2{ margin-bottom:clamp(26px,3.5vw,42px); }
.works__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.works__it{ margin:0; background:var(--paper); }
.works__it--big{ grid-column:span 2; grid-row:span 2; }
.works__it img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.works__it--big img{ aspect-ratio:16/11; }
.works__it figcaption{ padding:16px 18px 20px; }
.works__it b{ display:block; font-size:15.5px; margin-bottom:6px; }
.works__it span{ display:block; font-size:13.5px; color:var(--body); line-height:1.8; }

/* ---------- 人 ---------- */
.team{ position:relative; }
.team__ph img{ width:100%; height:clamp(260px,36vw,480px); object-fit:cover; object-position:center 42%; }
.team__tx{ padding-block:clamp(30px,4vw,52px); }
.team__tx h2{ margin-bottom:14px; }
.team__tx p{ color:var(--body); max-width:40em; }

/* ---------- 会社概要 ---------- */
.cmp{ padding-block:var(--sec); background:var(--tint); }
.cmp__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:start; }
.cmp h2{ margin-bottom:22px; }
.cmp table{ width:100%; border-collapse:collapse; background:var(--paper); }
.cmp th,.cmp td{ text-align:left; font-size:14.5px; padding:13px 16px; vertical-align:top; line-height:1.75; }
.cmp th{ width:8.5em; font-weight:700; background:var(--th-bg); white-space:nowrap; }
.cmp tr + tr th, .cmp tr + tr td{ border-top:1px solid var(--line); }
.cmp__map{ height:100%; min-height:320px; }
.cmp__map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }

/* ---------- お問い合わせ ---------- */
.con{ padding-block:var(--sec); background:var(--ink); color:#fff; }
.con__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.con h2{ margin-bottom:16px; }
.con__l > p{ color:var(--dim-2); margin-bottom:28px; }
.con__tel{ display:inline-block; text-decoration:none; font-size:clamp(28px,3.4vw,40px);
  font-weight:700; letter-spacing:.02em; line-height:1.2; }
.con__tel small{ display:block; font-size:12px; letter-spacing:.2em; color:var(--y-l); margin-bottom:8px; font-weight:700; }
.con__hours{ margin-top:14px; font-size:13.5px; color:var(--dim); }
.con__f{ display:grid; gap:16px; }
.con__f label{ display:grid; gap:7px; font-size:13.5px; font-weight:700; letter-spacing:.06em; }
.con__f input,.con__f textarea{
  font:inherit; font-size:15px; font-weight:400; letter-spacing:.03em;
  padding:13px 14px; border:1px solid var(--field-bd); border-radius:0;
  background:var(--field-bg); color:#fff;
}
.con__f textarea{ resize:vertical; }
.con__f input::placeholder,.con__f textarea::placeholder{ color:var(--dim); }
.con__f input:focus,.con__f textarea:focus{ outline:2px solid var(--y); outline-offset:1px; border-color:var(--y); }
.con__f .btn{ justify-self:start; margin-top:4px; }

/* ---------- フッター ---------- */
.ftr{ background:var(--ftr-bg); color:var(--dim); padding-block:38px; font-size:13.5px; }
.ftr__n{ color:#fff; font-size:15px; font-weight:700; margin-bottom:8px; }
.ftr__c{ margin-top:20px; padding-top:16px; border-top:1px solid var(--ftr-line); font-size:12px; }

/* ---------- 見本用のお知らせ ---------- */
.modal{ position:fixed; inset:0; z-index:100; background:rgba(var(--ink-rgb),.6);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.modal[hidden]{ display:none; }
.modal__bx{ background:#fff; padding:32px 30px 26px; max-width:420px; width:100%; text-align:center; }
.modal__bx p{ white-space:pre-line; margin-bottom:22px; font-size:15px; }

/* ==========================================================================
   スマホ（768px 以下は1カラムに落とす）
   ========================================================================== */
@media (max-width:900px){
  .cmp__in,.con__in{ grid-template-columns:1fr; }
  .kikai{ grid-template-columns:1fr; }
  .kikai__ph img{ max-height:420px; }
}
@media (max-width:768px){
  .nav{ position:absolute; top:var(--hdr-h); left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:8px var(--pad) 16px; display:none; }
  .nav.is-open{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--line); }
  .nav a:hover{ border-bottom-color:var(--line); }
  .hdr__cta{ display:none; }
  .hdr__tel{ font-size:15px; }
  .burger{ display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 10px; background:none; border:0; cursor:pointer; }
  .burger span{ display:block; height:2px; background:var(--ink); }

  .hero{ min-height:auto; display:block; }
  .hero__ph{ position:relative; }
  .hero__ph img{ content:url("images/hero-sp.webp"); aspect-ratio:3/4; }
  .hero::after{ inset:auto 0 0 0; height:62%;
    background:linear-gradient(0deg, rgba(var(--ink-rgb),.94) 26%, rgba(var(--ink-rgb),.55) 62%, rgba(var(--ink-rgb),0) 100%); }
  .hero__body{ position:absolute; bottom:0; padding-bottom:32px; }
  .hero__btns .btn{ flex:1 1 auto; }

  .trouble__list{ grid-template-columns:1fr; }
  .trouble__list li,
  .trouble__list li:nth-child(odd),
  .trouble__list li:nth-child(even){ padding:20px 0; border-right:0; padding-left:0; }

  .svc__row,.svc__row--flip{ grid-template-columns:1fr; gap:20px; }
  .svc__row--flip .svc__ph{ order:0; }
  .svc__tx{ margin-left:0; }

  .works__grid{ grid-template-columns:1fr; }
  .works__it--big{ grid-column:auto; grid-row:auto; }
  .works__it--big img{ aspect-ratio:4/3; }

  .con__tel{ font-size:30px; }
}

/* ==========================================================================
   動きを減らす設定を尊重する
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}