@charset "UTF-8";
/* ==========================================================================
   株式会社FreeGarden｜リニューアル提案デモ
   配色の三原則： 1) 背景の約8割は白  2) グラデーションを使わない（ヒーローの
   白ベール1か所のみ例外）  3) 影を一切使わない
   ========================================================================== */

:root{
  --base:      #FFFFFF;
  --blue-pale: #E9F5FB;
  --blue:      #4FBBE0;
  --navy:      #0F3A4E;
  --green:     #8CC63F;
  --gray:      #7E93A0;

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

  --container: 1120px;
  --gutter: 24px;
  --header-h: 84px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  color:var(--navy);
  background:var(--base);
  overflow-x:hidden;           /* 375px で横スクロールを出さない */
}
img{ max-width:100%; height:auto; display:block; }
ul,ol{ list-style:none; margin:0; padding:0; }
dl,dd{ margin:0; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:700; line-height:1.55; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
iframe{ border:0; display:block; }

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

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

/* ---------- layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--space-6); }

.note{
  font-size:13px; line-height:1.7; color:var(--gray); margin-top:var(--space-1);
}
.note--on-dark{ color:#C6D6DE; }

.ico{ width:1.25em; height:1.25em; flex:none; }
.ico--lead{ width:1em; height:1em; vertical-align:-.08em; margin-right:.35em; display:inline-block; }
.ico--tel{ width:20px; height:20px; }
.ico--clock{ width:18px; height:18px; vertical-align:-.25em; margin-right:.4em; display:inline-block; }
.ico--arrow{ width:18px; height:18px; }

/* ---------- 見出し共通 ---------- */
.sec-head{ margin-bottom:var(--space-5); }
.sec-head__title{
  font-size:clamp(24px, 3.2vw, 34px);
  color:var(--navy);
}
/* 見出し直下の緑の短い下線（強調＝緑の数少ない使いどころ） */
.sec-head__title::after{
  content:""; display:block; width:48px; height:3px;
  background:var(--green); margin-top:var(--space-3);
}
.sec-head__lead{ margin-top:var(--space-3); color:var(--gray); }

/* ---------- ボタン（影なし・角丸4px） ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:12px 28px;
  border-radius:4px;
  font-weight:700; font-size:16px; line-height:1.4;
  border:1px solid transparent;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--cta{ background:var(--green); color:var(--navy); }   /* 白文字にしない */
.btn--cta:hover{ background:#7FB833; }
.btn--tel{ background:var(--base); color:var(--navy); border-color:var(--blue); }
.btn--tel:hover{ background:var(--blue-pale); }
.btn--tel-lg{ font-size:22px; min-height:60px; padding-inline:32px; }
.btn--block{ display:flex; width:100%; }

/* 本文中に置かれた電話リンク（会社概要の表・フッター住所）も、行送りを変えずに
   タップ領域44px以上を確保する。上下パディングで当たり判定を広げ、
   同じ量の負のマージンで行の高さを元に戻す。 */
.company__row a[href^="tel:"],
.footer__addr a[href^="tel:"]{
  display:inline-block; padding-block:12px; margin-block:-12px;
}

/* ==========================================================================
   01 ヘッダー
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--base);
  border-bottom:2px solid var(--blue);   /* 現行サイトの空色の帯を「線」として継承 */
  transition:background-color .3s ease;
}
.header.is-scrolled{ background:rgba(255,255,255,.95); }
.header__inner{
  max-width:var(--container); margin-inline:auto; padding:10px var(--gutter);
  display:flex; align-items:center; gap:var(--space-3);
  min-height:var(--header-h);
}
.logo{ display:flex; flex-direction:column; justify-content:center; min-height:44px; flex:none; }
.logo__name{ display:block; font-family:var(--serif); font-weight:700; font-size:26px; line-height:1.2; color:var(--navy); }
.logo__sub{ display:block; font-size:11px; line-height:1.5; color:var(--gray); margin-top:2px; }

.gnav{ margin-left:auto; }
.gnav__list{ display:flex; gap:var(--space-3); }
.gnav__list a{
  display:flex; align-items:center; min-height:44px;
  font-size:15px; font-weight:500; color:var(--navy);
  border-bottom:2px solid transparent;
}
.gnav__list a:hover{ border-bottom-color:var(--green); }

.header__actions{ display:flex; align-items:center; gap:var(--space-2); flex:none; }
.header__tel{ display:flex; align-items:center; gap:8px; min-height:44px; }
.header__tel-num{ display:block; font-size:20px; font-weight:700; line-height:1.2; color:var(--navy); }
.header__tel-time{ display:block; font-size:11px; color:var(--gray); }
.header__cta{ min-height:48px; padding:10px 20px; }

.hamburger{
  display:none; width:44px; height:44px; padding:10px;
  background:none; border:1px solid var(--blue); border-radius:4px;
  flex-direction:column; justify-content:space-between; cursor:pointer;
}
.hamburger span{ display:block; height:2px; background:var(--navy); border-radius:1px; }

/* ==========================================================================
   02 ヒーロー
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:var(--header-h); overflow:hidden; background:var(--base);
}
.hero__bg{ position:absolute; inset:-15% 0; z-index:0; 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(90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.75) 38%,
    rgba(255,255,255,0) 62%);
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--container); margin-inline:auto;
  padding:var(--space-5) var(--gutter);
}
.hero__eyebrow{ font-size:14px; font-weight:500; color:var(--blue); letter-spacing:.04em; }
.hero__title{
  margin-top:var(--space-3);
  font-size:clamp(30px, 5.2vw, 58px);
  line-height:1.45; color:var(--navy);
}
.hero__lead{ margin-top:var(--space-4); max-width:34em; color:var(--navy); }
.hero__btns{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.hero__note{
  position:absolute; right:var(--gutter); bottom:16px; z-index:2;
  font-size:12px; color:var(--gray);
}
/* SplitText 相当（1文字ずつ） */
.hero__title .char{ display:inline-block; will-change:transform, opacity; }

/* ==========================================================================
   03 判断材料バッジ（背景=白／カード=薄い水色。枠線も影もなし）
   ========================================================================== */
.badges{ background:var(--base); padding-block:var(--space-5); }
.badges__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); }
.badge{ background:var(--blue-pale); border-radius:8px; padding:var(--space-3); }
.badge__ico{ width:40px; height:40px; }
.badge__title{ font-family:var(--sans); font-weight:700; font-size:17px; line-height:1.5; margin-top:var(--space-2); color:var(--navy); }
.badge__text{ font-size:14px; line-height:1.8; color:var(--gray); margin-top:6px; }

/* ==========================================================================
   04 ★感動設計★
   ========================================================================== */
.reveal{ background:var(--blue-pale); }
.reveal__pin{ min-height:100svh; display:flex; align-items:center; padding-block:var(--space-5); }
.reveal__grid{ display:grid; grid-template-columns:60% 40%; align-items:center; gap:var(--space-5); }

.reveal__stage{
  position:relative; margin:0; overflow:hidden; border-radius:8px;
  aspect-ratio:1448 / 1086; background:var(--blue-pale);
}
.reveal__stage > img,
.reveal__veil img{ width:100%; height:100%; object-fit:cover; }

/* 上層：グレースケール＋白75%のベール。矩形の「外側」だけに見える */
.reveal__veil{
  position:absolute; inset:0;
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
                    1.5% 29%, 1.5% 98.5%, 48% 98.5%, 48% 29%, 1.5% 29%);
  will-change:clip-path;
}
.reveal__veil img{ filter:grayscale(1); }
.reveal__veil::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.75); }

/* 水色の枠：矩形の初期位置はウッドデッキの領域（05-garden-overhead.png 実測） */
.reveal__frame{
  position:absolute; border:1.5px solid var(--blue);
  left:1.5%; top:29%; width:46.5%; height:69.5%;
  will-change:left, top, width, height;
}
.reveal__label{
  position:absolute; left:8px; top:8px;
  background:var(--blue); color:#fff;
  font-size:12px; font-weight:700; line-height:1;
  padding:6px 10px; border-radius:3px; white-space:nowrap;
  transition:opacity .4s ease;
}
.reveal__label--done{ background:var(--green); color:var(--navy); }

.reveal__states{ position:relative; }
.reveal__state{ transition:opacity .4s ease; }
.reveal__state:not(.is-on){
  position:absolute; inset:0; opacity:0; pointer-events:none;
}
.reveal__state.is-on{ position:relative; opacity:1; }
.reveal__head{ font-size:clamp(22px, 2.6vw, 32px); color:var(--navy); }
.reveal__body{ margin-top:var(--space-3); color:var(--navy); }
.reveal__disclaimer{ margin-top:var(--space-4); }

.reveal__static{ display:none; }

/* ==========================================================================
   05 お悩みから選ぶ
   ========================================================================== */
.worries{ background:var(--base); }
.worries__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.worry{ display:flex; }
.worry--lead{ grid-column:span 2; }
.worry__link{
  display:flex; flex-direction:column; width:100%;
  background:var(--base); border:1px solid var(--blue-pale); border-radius:8px;
  overflow:hidden; transition:border-color .2s ease;   /* 浮き上がらせない */
}
.worry__link:hover{ border-color:var(--blue); }
.worry__figure{ margin:0; position:relative; }
.worry__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.worry--lead .worry__figure img{ aspect-ratio:16/9; }
.worry__figure .note{ margin:6px 12px 0; }
.worry__body{ padding:var(--space-3); display:flex; flex-direction:column; flex:1; }
.worry__title{ font-family:var(--serif); font-weight:700; font-size:clamp(18px,2vw,24px); line-height:1.5; color:var(--navy); }
.worry--lead .worry__title{ font-size:clamp(21px,2.6vw,30px); }
.worry__name{ display:flex; align-items:center; gap:.4em; margin-top:var(--space-1); font-size:14px; font-weight:500; color:var(--blue); }
.worry__text{ margin-top:var(--space-2); font-size:15px; line-height:1.85; color:var(--gray); }
.worry__more{
  display:inline-flex; align-items:center; gap:.4em; align-self:flex-start;
  margin-top:auto; padding-top:var(--space-3);
  min-height:44px; font-size:15px; font-weight:700; color:var(--navy);
}
.worry__more::before{ content:""; }

/* ==========================================================================
   06 施工イメージ
   ========================================================================== */
.works{ background:var(--blue-pale); }
.works__note{ margin-top:var(--space-3); }
.works__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.work{ background:var(--base); border-radius:8px; padding:var(--space-3); }
.work__figure{ margin:0; }
.work__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }
.work__title{ display:flex; align-items:center; gap:.45em; font-size:20px; margin-top:var(--space-3); color:var(--navy); }
.work__text{ margin-top:var(--space-2); font-size:15px; line-height:1.85; color:var(--gray); }

/* ==========================================================================
   07 できる／できない（ページで唯一の濃い面。2か所目を作らないこと）
   ========================================================================== */
.honest{ position:relative; background:var(--navy); color:#fff; padding-block:var(--space-6); overflow:hidden; }
/* 上端→下端へのマスク展開用（背景色が広がる） */
.honest__mask{ position:absolute; inset:0; background:var(--base); z-index:0; }
.honest__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:center; }
.honest__title{ font-size:clamp(24px,3.2vw,36px); color:#fff; }
.honest__body{ margin-top:var(--space-3); color:#fff; }
.honest__em{ color:var(--green); font-weight:700; }
.honest .btn{ margin-top:var(--space-4); }
.honest__figure{ margin:0; }
.honest__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }

/* ==========================================================================
   08 対応エリア
   ========================================================================== */
.area{ background:var(--base); }
.area__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start; }
.area__body{ margin-top:var(--space-4); color:var(--navy); }
.area .btn{ margin-top:var(--space-4); }
.area__row{ display:flex; align-items:baseline; gap:var(--space-3); padding-block:var(--space-3); border-bottom:1px solid var(--blue-pale); }
.area__row:first-child{ border-top:1px solid var(--blue-pale); }
.area__row dt{ font-family:var(--serif); font-weight:700; font-size:clamp(22px,2.6vw,30px); color:var(--navy); min-width:4.5em; }
.area__row dd{ font-size:16px; font-weight:500; color:var(--blue); }

/* ==========================================================================
   09 ご相談の流れ
   ========================================================================== */
.flow{ background:var(--blue-pale); }
.flow__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start; }
.flow__list{ position:relative; }
.flow__line-wrap{ position:absolute; left:23px; top:12px; bottom:12px; width:2px; }
.flow__line{ display:block; width:100%; height:100%; background:var(--blue); transform-origin:top center; }
.flow__step{ position:relative; display:flex; gap:var(--space-3); padding-bottom:var(--space-4); }
.flow__step:last-child{ padding-bottom:0; }
.flow__mark{
  position:relative; z-index:1; flex:none;
  width:48px; height:48px; border-radius:50%;
  background:var(--base); border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.flow__mark--goal{ background:var(--green); border-color:var(--green); }
.flow__num{ font-weight:700; font-size:18px; color:var(--navy); }
.flow__title{ font-size:20px; color:var(--navy); }
.flow__text{ margin-top:6px; font-size:15px; line-height:1.85; color:var(--gray); }
.flow__figure{ margin:0; }
.flow__figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }

/* ==========================================================================
   10 会社概要
   ========================================================================== */
.company{ background:var(--base); }
.company__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start; }
.company__row{ display:grid; grid-template-columns:8.5em 1fr; gap:var(--space-3); padding-block:14px; border-bottom:1px solid var(--blue-pale); }
.company__row:first-child{ border-top:1px solid var(--blue-pale); }
.company__row dt{ font-weight:500; font-size:15px; color:var(--blue); }
.company__row dd{ font-size:16px; color:var(--navy); }
.company__row a{ text-decoration:underline; text-underline-offset:3px; }
.company__map{ border-radius:8px; overflow:hidden; border:1px solid var(--blue-pale); }
.company__map iframe{ width:100%; height:420px; }

/* ==========================================================================
   11 お問い合わせ（スカイブルーの単色面。グラデーションにしない）
   ========================================================================== */
.contact{ background:var(--blue); padding-block:var(--space-6); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start; }
.contact__title{ font-size:clamp(24px,3.2vw,36px); color:#fff; }
.contact__body{ margin-top:var(--space-3); color:#fff; }
.contact__lead .btn--tel{ margin-top:var(--space-4); border-color:var(--base); }
.contact__hours{ margin-top:var(--space-2); font-size:15px; color:#fff; }

.form{ background:var(--base); border-radius:8px; padding:var(--space-4); }
.form__demo{ font-size:13px; color:var(--gray); margin-bottom:var(--space-3); }
.form__field{ margin-bottom:var(--space-3); }
.form__label{ display:flex; align-items:center; gap:.6em; font-size:15px; font-weight:500; color:var(--navy); margin-bottom:6px; }
.form__req{ background:var(--blue-pale); color:var(--navy); font-size:11px; font-weight:700; padding:3px 8px; border-radius:3px; }
.form__input{
  width:100%; min-height:52px; padding:12px 14px;
  font:inherit; font-size:16px; color:var(--navy);
  background:var(--blue-pale); border:1px solid transparent; border-radius:4px;
}
.form__input:focus{ border-color:var(--blue); outline:none; background:var(--base); }
.form__input:focus-visible{ outline:3px solid var(--green); outline-offset:2px; }
.form__textarea{ min-height:132px; resize:vertical; line-height:1.8; }
.form__select{ appearance:none; background-image:none; }
.form__result{ margin-top:var(--space-2); font-size:14px; color:var(--navy); }

/* ==========================================================================
   12 フッター
   ========================================================================== */
.footer{ background:var(--navy); color:#fff; padding-block:var(--space-5); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-4); }
.footer__logo{ font-family:var(--serif); font-weight:700; font-size:24px; }
.footer__addr{ margin-top:var(--space-2); font-size:14px; line-height:2; color:#D7E4EA; }
.footer__addr a{ text-decoration:underline; text-underline-offset:3px; }
.footer__nav ul{ display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3); }
.footer__nav a{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:#fff; }
.footer__nav a:hover{ color:var(--green); }
.footer__disclaimer{
  margin-top:var(--space-4); padding-top:var(--space-3);
  border-top:1px solid rgba(255,255,255,.18);
  font-size:13px; line-height:1.8; color:var(--gray);
}

/* ==========================================================================
   スマホ追従CTAバー
   ========================================================================== */
.ctabar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--blue);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  gap:8px;
  transform:translateY(100%);
}
.ctabar__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.4em;
  min-height:48px; border-radius:4px;
  font-size:15px; font-weight:700; line-height:1.3;
  border:1px solid transparent;
}
.ctabar__btn--tel{ background:var(--base); color:var(--navy); border-color:var(--blue); }
.ctabar__btn--cta{ background:var(--green); color:var(--navy); }

/* ==========================================================================
   モーションの初期状態（JSが有効なときだけ隠す）
   ========================================================================== */
.js .js-reveal{ opacity:0; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width:1024px){
  :root{ --space-6:72px; --space-5:48px; }
  .gnav__list{ gap:var(--space-2); }
  .gnav__list a{ font-size:14px; }
  .header__tel-num{ font-size:17px; }
  .reveal__grid{ grid-template-columns:1fr; gap:var(--space-4); }
  .reveal__pin{ padding-block:var(--space-4); }
  .reveal__stage{ max-height:52svh; }
  .reveal__stage > img, .reveal__veil img{ height:100%; }
}

@media (max-width:767px){
  :root{ --header-h:64px; --gutter:16px; --space-6:56px; --space-5:40px; }

  body{ padding-bottom:64px; }   /* 追従CTAバーの高さ分 */

  /* ヘッダー：メニューはハンバーガーへ。電話ボタンは常に表示したまま */
  .header__inner{ min-height:var(--header-h); padding-block:8px; gap:var(--space-1); }
  .logo__name{ font-size:20px; }
  .logo__sub{ font-size:10px; }
  .hamburger{ display:flex; }
  .header__actions{ margin-left:auto; gap:8px; }
  .header__cta{ display:none; }
  .header__tel-body{ display:none; }
  .header__tel{
    width:44px; height:44px; justify-content:center;
    border:1px solid var(--blue); border-radius:4px;
  }
  .gnav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--base); border-bottom:2px solid var(--blue);
    margin:0; padding:0 var(--gutter);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .gnav.is-open{ max-height:60vh; padding-block:var(--space-1); }
  .gnav__list{ flex-direction:column; gap:0; }
  .gnav__list a{ min-height:52px; border-bottom:1px solid var(--blue-pale); }

  /* ヒーロー */
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 8px); }
  .hero__bg{ inset:0; }
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.86) 55%,
      rgba(255,255,255,.72) 100%);
  }
  .hero__inner{ padding-block:var(--space-5) 56px; }
  .hero__lead{ font-size:16px; }
  .hero__btns .btn{ flex:1 1 100%; }
  .hero__note{ bottom:8px; }

  /* バッジ 2×2 */
  .badges__list{ grid-template-columns:repeat(2,1fr); }
  .badge{ padding:var(--space-2); }
  .badge__title{ font-size:15px; }
  .badge__text{ font-size:13px; }

  /* 04 感動設計：ピン留めを無効化し、2状態を上下に並べた静的表示にする */
  .reveal__pin{ display:none; }
  .reveal__static{ display:block; padding-block:var(--space-6); }
  .reveal__static-item + .reveal__static-item{ margin-top:var(--space-5); }
  .reveal__static .reveal__head{ margin-top:var(--space-3); font-size:22px; }
  .reveal__static .reveal__stage{ aspect-ratio:1448/1086; }
  .reveal__veil--req{
    clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
                      1.5% 29%, 1.5% 98.5%, 48% 98.5%, 48% 29%, 1.5% 29%);
  }
  .reveal__frame--req{ left:1.5%; top:29%; width:46.5%; height:69.5%; }
  .reveal__frame--done{ left:0; top:0; width:100%; height:100%; }

  /* 1カラム化 */
  .worries__list,
  .honest__grid,
  .area__grid,
  .flow__grid,
  .company__grid,
  .contact__grid,
  .footer__grid{ grid-template-columns:1fr; }
  .worry--lead{ grid-column:auto; }
  .worry--lead .worry__figure img{ aspect-ratio:4/3; }
  .worry--lead .worry__title{ font-size:21px; }

  /* 06 施工イメージはスマホでは横スワイプ（ページ自体は横スクロールさせない） */
  .works__list{
    display:flex; grid-template-columns:none;
    gap:var(--space-3);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);
    padding:0 var(--gutter) var(--space-2);
  }
  .work{ flex:0 0 80%; scroll-snap-align:start; }

  .company__row{ grid-template-columns:1fr; gap:2px; }
  .company__map iframe{ height:280px; }

  .form{ padding:var(--space-3); }
  .btn--tel-lg{ width:100%; font-size:20px; }

  /* 追従CTAバー */
  .ctabar{ display:flex; }
}

@media (max-width:374px){
  .worry__title{ font-size:18px; }
  .ctabar__btn{ font-size:14px; }
}

/* ==========================================================================
   prefers-reduced-motion：全アニメーションを無効化
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .js-reveal{ opacity:1 !important; transform:none !important; }
  .ctabar{ transform:none; }
  .honest__mask{ display:none; }
}