@charset "UTF-8";
/* =========================================================
   有限会社 野村造園 ─ リニューアル提案用デモサイト
   配色・字組は 13_Web構成.md「2. デザイン方針」に準拠
   ========================================================= */

:root{
  --bg:      #F7F5EF;  /* 生成りの紙色 */
  --bg-alt:  #EAE6DA;  /* 交互背景 */
  --ink:     #23282A;  /* 墨色 */
  --ink-mid: #545F5C;
  --green:   #2F5D45;  /* メイン・深緑 */
  --green-d: #244936;
  --brown:   #8A6B4F;  /* アクセント・幹の茶 */
  --line:    #D8D2C4;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  --wrap: 1100px;
  --pad: 20px;
  --sec-gap: 72px;
  --radius: 4px;
}

@media (min-width:768px){
  :root{ --pad:40px; --sec-gap:120px; }
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.9;
  overflow-x:hidden;           /* 375px で横スクロールを出さない保険 */
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--green); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.55;
  margin:0;
}

/* ---------- 共通レイアウト ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{ padding-block:var(--sec-gap); }
.section--alt{ background:var(--bg-alt); }

/* セクション見出し
   ※ h2 内の .h2__eyebrow は「h2 に川口市・剪定などの語を含める」という
      必須要件を満たすための小見出し。13_Web構成.md の確定文言そのものは
      .h2__main に置き、一字も変えていない */
.sec-head{ text-align:center; margin-bottom:44px; }
.sec-head h2{
  font-size:clamp(23px,5.2vw,32px);
  letter-spacing:.04em;
}
.h2__eyebrow{
  display:block;
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.6;
  color:var(--brown);
  margin-bottom:14px;
}
.h2__main{ display:block; }
.sec-head h2::after{
  content:"";
  display:block;
  width:48px; height:2px;
  background:var(--green);
  margin:22px auto 0;
}
.sec-lead{
  text-align:center;
  margin:-24px auto 40px;
  max-width:34em;
  color:var(--ink-mid);
}

/* ---------- 注記 ---------- */
.ai-note{
  font-size:12px;
  line-height:1.7;
  color:var(--ink-mid);
  margin:8px 0 0;
  letter-spacing:.02em;
}
.demo-note{
  font-size:13px;
  line-height:1.8;
  color:var(--ink-mid);
  margin-top:26px;
  text-align:center;
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:14px 30px;
  border:2px solid transparent;
  border-radius:var(--radius);
  font-family:var(--sans);
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.03em;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{ background:var(--green); color:#fff; border-color:var(--green); }
.btn--primary:hover{ background:var(--green-d); border-color:var(--green-d); }
.btn--ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.85); }
.btn--ghost:hover{ background:rgba(255,255,255,.24); }
.btn img{ width:20px; height:20px; flex:0 0 20px; }
.btn--ghost img{ filter:brightness(0) invert(1); }

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brown);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--green); color:#fff;
  padding:12px 20px;
}
.skip-link:focus{ left:0; }

/* =========================================================
   ヘッダー（PC のみ・ヒーロー通過後に出す）
   どのセクションからも問い合わせまで 1 タップにするための導線
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(247,245,239,.97);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  transition:transform .3s ease;
  display:none;
}
.site-header.is-shown{ transform:translateY(0); }
@media (min-width:768px){ .site-header{ display:block; } }
@media (prefers-reduced-motion:reduce){ .site-header{ transition:none; } }

.site-header__inner{
  display:flex; align-items:center; gap:20px;
  min-height:64px;
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
}
.site-header__name{
  font-family:var(--serif); font-weight:600; font-size:18px;
  letter-spacing:.06em; margin-right:auto; white-space:nowrap;
}
.site-header__tel{
  font-weight:700; font-size:19px; letter-spacing:.04em;
  color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; white-space:nowrap;
}
.site-header__tel img{ width:20px; height:20px; }
.site-header .btn{ min-height:44px; padding:8px 20px; font-size:15px; white-space:nowrap; }

/* =========================================================
   ① ヒーロー
   ========================================================= */
.hero{
  position:relative;
  min-height:76vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
@media (min-width:768px){ .hero{ min-height:82vh; } }

.hero__bg{
  position:absolute;
  top:-15%; left:0; width:100%; height:130%;
  z-index:-2;
  will-change:transform;
}
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(35,40,42,.62) 0%, rgba(35,40,42,.10) 60%, rgba(35,40,42,.20) 100%),
    rgba(35,40,42,.35);
}
.hero__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:120px var(--pad) 44px;
  color:#fff;
}
.hero__eyebrow{
  display:inline-block;
  font-size:13px; font-weight:700; letter-spacing:.18em;
  padding:7px 15px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);
  margin:0 0 22px;
}
.hero h1{
  font-size:clamp(25px,6.2vw,44px);
  line-height:1.5;
  letter-spacing:.03em;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  margin-bottom:20px;
}
.hero__lead{
  font-size:16px; line-height:1.9;
  max-width:32em;
  margin:0 0 26px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
@media (min-width:768px){ .hero__lead{ font-size:17px; } }

.hero__meta{
  list-style:none; margin:0 0 28px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 10px;
  font-size:13px; line-height:1.6;
}
.hero__meta li{
  padding:6px 13px;
  background:rgba(35,40,42,.42);
  border:1px solid rgba(255,255,255,.34);
  border-radius:var(--radius);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__cta .btn{ flex:1 1 260px; }
.hero__imgnote{
  margin:26px 0 0;
  font-size:11px; color:rgba(255,255,255,.78);
  letter-spacing:.02em;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* =========================================================
   ② お困りごと
   ========================================================= */
.trouble-grid{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .trouble-grid{ grid-template-columns:1fr 1fr; gap:20px; }
}
.trouble-card{
  display:flex; align-items:center; gap:18px;
  padding:22px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.trouble-card img{ width:56px; height:56px; flex:0 0 56px; }
.trouble-card p{
  margin:0;
  font-size:16px; line-height:1.75;
}
.trouble-close{
  margin:36px auto 0;
  max-width:36em;
  text-align:center;
  font-size:16px;
}

/* =========================================================
   ③ 料金の目安
   ========================================================= */
.price-lead{
  max-width:38em; margin:0 auto 36px;
  text-align:center;
}
.price-lead strong{
  font-family:var(--serif);
  font-size:clamp(20px,4.6vw,26px);
  color:var(--brown);
  font-weight:600;
  letter-spacing:.02em;
}
.price-boxes{
  display:grid; gap:16px; grid-template-columns:1fr;
  margin-bottom:32px;
  list-style:none; padding:0;
}
@media (min-width:768px){
  .price-boxes{ grid-template-columns:repeat(3,1fr); gap:20px; }
}
.price-box{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  text-align:center;
}
.price-box h3{
  font-size:19px; margin-bottom:12px; color:var(--green);
}
.price-box p{ margin:0; font-size:15px; line-height:1.8; color:var(--ink-mid); }
.center-cta{ text-align:center; }
.center-cta .btn{ min-width:min(100%,340px); }

/* =========================================================
   ④ 施工前と、施工後  ★感動設計の核
   ========================================================= */
.ba-grid{
  display:grid; gap:40px; grid-template-columns:1fr;
  list-style:none; margin:0; padding:0;
}
@media (min-width:768px){
  .ba-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
}

.ba{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--bg-alt);
  border:1px solid var(--line);
  touch-action:pan-y;            /* 縦スクロールは常にページへ渡す */
  user-select:none;
  -webkit-user-select:none;
  cursor:ew-resize;
}
.ba__layer{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.ba__layer img{
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}
.ba__layer--after{
  clip-path:inset(0 0 0 40%);
  will-change:clip-path;
}
/* 施工後の画像が読めない場合は施工前だけを表示し、レイアウトを崩さない */
.ba.is-noafter{ cursor:default; }
.ba.is-noafter .ba__layer--after,
.ba.is-noafter .ba__handle,
.ba.is-noafter .ba__tag--after{ display:none; }

.ba__tag{
  position:absolute; top:12px;
  z-index:3;
  padding:5px 12px;
  font-size:13px; font-weight:700; line-height:1.5;
  letter-spacing:.08em;
  color:#fff;
  background:rgba(35,40,42,.74);
  border-radius:var(--radius);
  pointer-events:none;
}
.ba__tag--before{ left:12px; }
.ba__tag--after{ right:12px; background:rgba(47,93,69,.88); }

/* ハンドル：見た目は 2px の白線、当たり判定は 44px */
.ba__handle{
  position:absolute;
  top:0; left:-22px;
  width:44px; height:100%;
  z-index:4;
  cursor:ew-resize;
  /* GSAP Draggable がインラインで touch-action:manipulation を当てるため !important で上書きする。
     pan-y にすることで縦スワイプは必ずページのスクロールに渡り、横方向だけを JS が拾う */
  touch-action:pan-y !important;
  background:transparent;
  border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.ba__handle::before{
  content:"";
  position:absolute; top:0; left:21px;
  width:2px; height:100%;
  background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.4);
}
.ba__knob{
  position:relative;
  width:40px; height:40px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.34);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ba__knob svg{ width:22px; height:22px; display:block; }
.ba__handle:focus-visible{ outline:none; }
.ba__handle:focus-visible .ba__knob{
  outline:3px solid var(--brown);
  outline-offset:3px;
}

.ba-item figcaption{
  margin-top:14px;
  font-size:15px; line-height:1.8;
}
.ba-close{
  margin:40px auto 0;
  max-width:38em; text-align:center;
  font-size:16px;
}

/* =========================================================
   ⑤ Q&A（アコーディオンにせず、全て開いた状態で表示）
   ========================================================= */
.qa-list{ max-width:800px; margin-inline:auto; }
.qa{
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.qa:first-of-type{ border-top:1px solid var(--line); }
.qa dt,.qa dd{ margin:0; }
.qa dt{
  display:flex; gap:12px;
  font-family:var(--serif); font-weight:600;
  font-size:17px; line-height:1.7;
  margin-bottom:12px;
}
.qa dd{
  display:flex; gap:12px;
  font-size:16px; line-height:1.9;
  color:var(--ink-mid);
}
.qa-mark{
  flex:0 0 auto;
  font-family:var(--serif); font-weight:600;
  font-size:19px; line-height:1.6;
}
.qa dt .qa-mark{ color:var(--green); }
.qa dd .qa-mark{ color:var(--brown); }

/* =========================================================
   ⑥ 任されている仕事（現場が大きい順に3段）
   ========================================================= */
.work-list{ list-style:none; margin:0; padding:0; }
.work-row{
  display:grid; gap:20px;
  grid-template-columns:1fr;
  align-items:center;
  padding-block:32px;
  border-bottom:1px solid var(--line);
}
.work-row:first-child{ border-top:1px solid var(--line); }
@media (min-width:768px){
  .work-row{ grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:44px; padding-block:44px; }
  .work-row:nth-child(even) .work-row__media{ order:2; }
}
.work-row__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius);
}
.work-row__num{
  display:block;
  font-size:12px; font-weight:700; letter-spacing:.2em;
  color:var(--brown); margin-bottom:8px;
}
.work-row h3{
  font-size:clamp(20px,4.4vw,25px);
  margin-bottom:12px;
}
.work-row p{ margin:0; font-size:16px; }
.work-row--last h3{ color:var(--green); }

.company-band{
  margin-top:44px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  text-align:center;
}
.company-band dl{
  margin:0; display:grid; gap:6px;
  font-size:15px; line-height:1.8;
}
.company-band dt{ font-family:var(--serif); font-weight:600; font-size:19px; margin-bottom:6px; }
.company-band dd{ margin:0; color:var(--ink-mid); }

/* =========================================================
   ⑦ ご依頼の流れ
   ========================================================= */
.flow{
  list-style:none; margin:0 0 40px; padding:0;
  display:grid; gap:14px; grid-template-columns:1fr;
}
@media (min-width:768px){
  .flow{ grid-template-columns:repeat(5,1fr); gap:16px; }
}
.flow li{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  display:flex; gap:16px; align-items:flex-start;
}
@media (min-width:768px){
  .flow li{ flex-direction:column; gap:12px; text-align:center; align-items:center; }
}
.flow__num{
  flex:0 0 40px;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--green); color:#fff;
  font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.flow__body h3{ font-size:17px; margin-bottom:4px; }
.flow__body p{ margin:0; font-size:14px; line-height:1.75; color:var(--ink-mid); }
.flow-media img{
  width:100%; max-height:360px; object-fit:cover;
  border-radius:var(--radius);
}

/* =========================================================
   ⑧ ごあいさつ
   ========================================================= */
.greet{
  display:grid; gap:28px; grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:768px){
  .greet{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:52px; }
}
.greet__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius);
}
.greet__body p{ margin:0 0 1.4em; font-size:16px; }
.greet__body p:last-child{ margin-bottom:0; }
.greet__quote{
  border-left:3px solid var(--brown);
  padding:4px 0 4px 18px;
  margin:0 0 1.4em;
  font-family:var(--serif);
  font-size:17px; line-height:1.9;
  color:var(--ink);
}
.greet__sign{
  font-family:var(--serif); font-weight:600;
  font-size:18px; letter-spacing:.06em;
}

/* =========================================================
   ⑨ ご相談ください（唯一、緑を全面に使うセクション）
   ========================================================= */
.contact{
  background:var(--green);
  color:#fff;
  padding-block:var(--sec-gap);
}
.contact .sec-head h2{ color:#fff; }
.contact .h2__eyebrow{ color:#CFE0D3; }
.contact .sec-head h2::after{ background:rgba(255,255,255,.72); }
.contact .sec-lead{ color:rgba(255,255,255,.9); }

.form{
  max-width:720px; margin-inline:auto;
  display:grid; gap:20px;
}
.field{ display:grid; gap:8px; }
.field label{
  font-size:15px; font-weight:700; letter-spacing:.04em;
}
.field .req{
  font-size:12px; font-weight:700;
  background:var(--brown); color:#fff;
  padding:2px 8px; border-radius:var(--radius);
  margin-left:8px;
}
.field input,.field textarea{
  width:100%;
  min-height:52px;
  padding:13px 14px;
  font-family:var(--sans);
  font-size:16px;              /* iOS の自動ズームを避けるため 16px を下回らない */
  line-height:1.7;
  color:var(--ink);
  background:#fff;
  border:1px solid transparent;
  border-radius:var(--radius);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#7A837F; }
.form .btn--primary{
  background:#fff; color:var(--green); border-color:#fff;
}
.form .btn--primary:hover{ background:var(--bg-alt); border-color:var(--bg-alt); }
.form-note{
  font-size:13px; color:rgba(255,255,255,.85);
  text-align:center; margin:0;
}

.contact-alt{
  max-width:720px; margin:44px auto 0;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.3);
  display:grid; gap:14px;
}
@media (min-width:768px){
  .contact-alt{ grid-template-columns:repeat(3,1fr); gap:16px; }
}
.contact-alt a,.contact-alt span{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px;
  padding:12px 10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.36);
  border-radius:var(--radius);
  color:#fff; text-decoration:none;
  font-size:14px; font-weight:700; letter-spacing:0;
  overflow-wrap:anywhere;
}
@media (min-width:768px){
  .contact-alt a,.contact-alt span{ padding:12px 8px; }
}
.contact-alt a:hover{ background:rgba(255,255,255,.22); }
.contact-alt img{ width:22px; height:22px; flex:0 0 22px; filter:brightness(0) invert(1); }

/* =========================================================
   ⑩ フッター
   ========================================================= */
.footer{
  background:var(--bg-alt);
  padding:56px 0 40px;
  border-top:1px solid var(--line);
}
.footer__name{
  font-family:var(--serif); font-weight:600;
  font-size:20px; letter-spacing:.06em; margin:0 0 14px;
}
.footer__info{ margin:0 0 22px; font-size:15px; line-height:1.9; }
.footer__info a{ color:var(--ink); }
.footer__area{
  margin:0 0 28px; font-size:15px; line-height:1.9;
  padding-top:20px; border-top:1px solid var(--line);
}
.footer__disclaimer{
  margin:0;
  padding:18px 20px;
  background:rgba(255,255,255,.66);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:13px; line-height:1.85; color:var(--ink-mid);
}
.footer__copy{
  margin:26px 0 0;
  font-size:12px; color:var(--ink-mid); letter-spacing:.04em;
}

/* =========================================================
   スマホ追従ボタン（768px 未満）
   ========================================================= */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0;
  z-index:70;
  display:none;
  transform:translateY(110%);
  transition:transform .28s ease;
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--green);
}
.mobile-bar.is-shown{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .mobile-bar{ transition:none; } }
@media (max-width:767.98px){ .mobile-bar{ display:flex; } }

.mobile-bar__cta,.mobile-bar__tel{
  height:56px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#fff;
  font-weight:700; letter-spacing:.02em;
}
.mobile-bar__cta{
  flex:0 0 70%; width:70%;
  background:var(--green);
  font-size:16px;
}
.mobile-bar__tel{
  flex:0 0 30%; width:30%;
  background:var(--brown);
  gap:3px; font-size:11px; line-height:1.3;
  flex-direction:column;
}
.mobile-bar__tel img{ width:22px; height:22px; filter:brightness(0) invert(1); }

@media (max-width:767.98px){
  body{ padding-bottom:56px; }
}

/* =========================================================
   モーション
   reduced-motion 時は .no-motion が付き、初期状態＝表示済みになる
   ========================================================= */
.js [data-reveal]{ opacity:0; transform:translateY(28px); }
.js.no-motion [data-reveal]{ opacity:1; transform:none; }