@charset "utf-8";
/* =========================================================
   望月造園 デモサイト
   カラーは 13_Web構成.md 第5-1章（G5選定シート）を正とする
   ========================================================= */

:root{
  --c-bg:#FFFFFF;
  --c-surface:#FDFBEF;
  --c-accent:#A83232;
  --c-accent-dark:#7A2020;
  --c-accent-light:#F6E7E7;
  --c-sub:#4A6B3A;
  --c-text:#2B2B2B;
  --c-muted:#5C5C5C;
  --c-line:#E5E0D6;

  --wrap:1120px;
  --radius:8px;
  --shadow:0 2px 8px rgba(0,0,0,.06);
  --shadow-hover:0 6px 20px rgba(0,0,0,.12);
  --sec-y:96px;
  --header-h:84px;

  --font-sans:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-accent-dark)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}

/* フォーカスリングは消さない（アクセシビリティ） */
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 見出し ---------- */
h1,.h1{font-family:var(--font-serif);font-weight:500;font-size:40px;line-height:1.5;letter-spacing:.04em}
h2,.h2{font-size:30px;font-weight:700;line-height:1.5;letter-spacing:.03em}
h3,.h3{font-size:21px;font-weight:700;line-height:1.6}
.note{font-size:14px;line-height:1.7;color:var(--c-muted);letter-spacing:0}
.lead{font-size:17px;color:var(--c-text)}

.sec-head{text-align:center;margin-bottom:44px}
.sec-head .en{display:block;font-size:14px;letter-spacing:.18em;color:var(--c-sub);margin-bottom:8px;font-weight:700}
.sec-head p{margin-top:14px;color:var(--c-muted);font-size:16px}

/* ---------- セクション ---------- */
.section{padding-block:var(--sec-y)}
.section--tint{background:var(--c-surface)}
.section--tight{padding-block:64px}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:14px 28px;
  font-size:17px;font-weight:700;line-height:1.4;letter-spacing:.02em;
  border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;text-align:center;
  transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out;
}
.btn--primary{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.btn--primary:hover{background:var(--c-accent-dark);border-color:var(--c-accent-dark)}
.btn--outline{background:#fff;color:var(--c-accent-dark);border-color:var(--c-accent)}
.btn--outline:hover{background:var(--c-accent-light)}
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--white{background:#fff;color:var(--c-accent-dark);border-color:#fff}
.btn--white:hover{background:var(--c-accent-light)}
.btn--sm{min-height:44px;padding:8px 18px;font-size:15px}
.btn__icon{width:20px;height:20px;flex:none}

.btn-row{display:flex;flex-wrap:wrap;gap:16px}
.btn-row--center{justify-content:center}

/* ---------- ヘッダー ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:#fff;border-bottom:1px solid var(--c-line);
  transition:background-color .2s ease-out;
}
.header.is-compact{background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.header__inner{
  width:min(100% - 40px,1280px);margin-inline:auto;
  display:flex;align-items:center;gap:24px;
  height:var(--header-h);transition:height .2s ease-out;
}
.header.is-compact .header__inner{height:64px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--c-text);flex:none}
.brand__name{font-family:var(--font-serif);font-size:24px;font-weight:500;letter-spacing:.08em;line-height:1.2}
.brand__sub{font-size:11px;letter-spacing:.1em;color:var(--c-muted);line-height:1.4}
.gnav{margin-left:auto}
.gnav__list{display:flex;gap:22px}
.gnav__list a{
  position:relative;text-decoration:none;color:var(--c-text);font-size:15px;font-weight:700;
  padding-block:6px;display:inline-block;
}
.gnav__list a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--c-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out;
}
.gnav__list a:hover::after,.gnav__list a[aria-current="page"]::after{transform:scaleX(1)}
.header__cta{display:flex;align-items:center;gap:12px;flex:none}
.header__tel{
  display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--c-accent-dark);
  font-weight:700;font-size:19px;letter-spacing:.02em;white-space:nowrap;
}
.header__tel img{width:20px;height:20px}

/* ハンバーガー（960px未満で表示） */
.navtoggle{
  display:none;width:48px;height:48px;flex:none;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:0;position:relative;
}
.navtoggle span{
  position:absolute;left:13px;width:22px;height:2px;background:var(--c-text);border-radius:2px;
  transition:transform .2s ease-out,opacity .2s ease-out;
}
.navtoggle span:nth-child(1){top:16px}
.navtoggle span:nth-child(2){top:23px}
.navtoggle span:nth-child(3){top:30px}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- ヒーロー ---------- */
.hero{position:relative;margin-top:var(--header-h);min-height:min(78vh,620px);display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.97) 50%,rgba(255,255,255,.9) 60%,rgba(255,255,255,.4) 78%,rgba(255,255,255,0) 96%);
}
.hero__inner{position:relative;z-index:1;padding-block:72px}
.hero__body{max-width:640px}
.hero h1{margin-bottom:20px}
.hero__catch{font-family:var(--font-serif);font-size:26px;line-height:1.7;letter-spacing:.04em;margin-bottom:16px}
.hero__sub{color:var(--c-text);margin-bottom:28px;max-width:36em}
.hero__scroll{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:12px;letter-spacing:.14em;color:var(--c-muted);z-index:1;
}
.hero__scroll span{display:block;width:1px;height:38px;background:var(--c-muted);animation:scrollLine 1.8s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* 下層ページの帯ヒーロー */
.phead{position:relative;margin-top:var(--header-h);min-height:230px;display:flex;align-items:center;overflow:hidden}
.phead__bg{position:absolute;inset:0}
.phead__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.phead__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.95) 52%,rgba(255,255,255,.72) 68%,rgba(255,255,255,.2) 92%)}
.phead__inner{position:relative;z-index:1;padding-block:44px}
.phead h1{font-size:36px}
.phead p{margin-top:12px;color:var(--c-muted);max-width:40em}

/* ---------- パンくず ---------- */
.crumb{border-bottom:1px solid var(--c-line);background:#fff}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0;font-size:13px;color:var(--c-muted);list-style:none;margin:0}
.crumb a{color:var(--c-muted)}

/* ---------- 主役層：ドラッグ比較 ---------- */
.compare{max-width:900px;margin-inline:auto}
.compare__tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px}
.compare__tab{
  flex:1 1 200px;
  background:#fff;border:2px solid var(--c-line);border-radius:var(--radius);
  padding:12px 16px;font-size:15px;font-weight:700;line-height:1.6;color:var(--c-text);
  text-align:left;min-height:64px;
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
.compare__tab:hover{border-color:var(--c-accent);background:var(--c-accent-light)}
.compare__tab[aria-selected="true"]{background:var(--c-accent-light);border-color:var(--c-accent);color:var(--c-accent-dark)}
.compare__panel[hidden]{display:none}
.compare__frame{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius);box-shadow:var(--shadow);
  background:var(--c-line);touch-action:none;cursor:ew-resize;user-select:none;
}
.compare__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}
.compare__after{position:absolute;inset:0;clip-path:inset(0 0 0 50%);will-change:clip-path}
.compare__label{
  position:absolute;top:14px;z-index:2;
  background:rgba(43,43,43,.82);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;
  padding:5px 12px;border-radius:4px;pointer-events:none;
}
.compare__label--before{left:14px}
.compare__label--after{right:14px}
.compare__handle{
  position:absolute;top:0;bottom:0;left:50%;width:44px;margin-left:-22px;z-index:3;
  background:transparent;border:0;padding:0;cursor:ew-resize;touch-action:none;
  display:flex;align-items:center;justify-content:center;
}
.compare__handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.35)}
.compare__grip{
  position:relative;width:44px;height:44px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;color:var(--c-accent-dark);font-size:15px;font-weight:700;
}
.compare__handle:focus-visible .compare__grip{outline:3px solid var(--c-accent);outline-offset:3px}
.compare__caption{margin-top:18px;text-align:center;font-weight:700}
.compare__note{text-align:center;margin-top:4px}
.compare__hint{text-align:center;margin-top:10px;font-size:14px;color:var(--c-muted)}
.compare__cta{margin-top:30px;display:flex;justify-content:center}

/* ---------- カード ---------- */
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.cards4{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.cards4>*{flex:0 1 calc(25% - 15px);min-width:230px}

.card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  box-shadow:var(--shadow);text-decoration:none;color:var(--c-text);height:100%;
  transition:box-shadow .2s ease-out;
}
.card:hover{box-shadow:var(--shadow-hover)}
.card__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__icon{width:32px;height:32px}
.card__title{font-size:17px;font-weight:700;line-height:1.7}
.card__arrow{margin-top:auto;align-self:flex-end;width:22px;height:22px;opacity:.75}
.card__thumb{position:relative;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;aspect-ratio:4/3}
.card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease-out}
.card:hover .card__thumb img{transform:scale(1.05)}
.card__meta{font-size:14px;color:var(--c-muted)}

/* サービスカード */
.svc{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:box-shadow .2s ease-out}
.svc:hover{box-shadow:var(--shadow-hover)}
.svc__thumb{aspect-ratio:4/3;overflow:hidden}
.svc__thumb img{width:100%;height:100%;object-fit:cover}
.svc__body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.svc__list{display:flex;flex-wrap:wrap;gap:8px}
.svc__list li{
  font-size:14px;line-height:1.5;color:var(--c-sub);font-weight:700;
  border:1px solid var(--c-sub);border-radius:999px;padding:3px 12px;
}

/* サービスページ：写真とテキストを交互に配置 */
.svc-row--rev .card__thumb{order:2}

/* 理由 */
.reason{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}
.reason__item{display:flex;flex-direction:column;align-items:center;gap:12px}
.reason__icon{width:64px;height:64px;border-radius:50%;background:var(--c-sub);display:flex;align-items:center;justify-content:center}
.reason__icon img{width:32px;height:32px;filter:brightness(0) invert(1)}

/* 流れ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.flow__item{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:24px 20px;position:relative}
.flow__item::before{
  counter-increment:step;content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--c-accent);color:#fff;
  font-weight:700;font-size:16px;margin-bottom:12px;
}

/* エリア */
.area-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.area-list li{
  background:#fff;border:1px solid var(--c-line);border-radius:999px;
  padding:8px 20px;font-weight:700;font-size:16px;
}

/* ---------- 施工事例フィルタ ---------- */
.filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.filter__btn{
  background:#fff;border:2px solid var(--c-line);border-radius:999px;
  padding:9px 20px;font-size:15px;font-weight:700;color:var(--c-text);min-height:44px;
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
.filter__btn:hover{border-color:var(--c-accent);background:var(--c-accent-light)}
.filter__btn[aria-selected="true"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.work-card[hidden]{display:none}

/* ---------- お客様の声 ---------- */
.voice-card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;height:auto;display:flex;flex-direction:column;gap:14px;
}
.voice-card__head{display:flex;gap:14px;align-items:flex-start}
.voice-card__photo{width:96px;flex:none}
.voice-card__photo img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius)}
.voice-card__photo .note{margin-top:6px;font-size:12px;line-height:1.5}
.voice-card__who{font-size:19px;font-weight:700;line-height:1.5}
.voice-card__area{font-size:14px;color:var(--c-muted)}
.voice-card__q{margin-top:6px}
.voice-card__q dt{font-size:15px;font-weight:700;color:var(--c-accent-dark);margin-bottom:6px}
.voice-card__q dd{margin:0 0 14px;padding:0}
.placeholder{
  background:var(--c-surface);border:1px dashed var(--c-line);border-radius:6px;
  padding:10px 12px;font-size:14px;color:var(--c-muted);line-height:1.7;
}
.notice-bar{
  background:var(--c-accent-light);border-left:4px solid var(--c-accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 18px;font-size:15px;line-height:1.8;color:var(--c-text);margin-bottom:36px;
}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.faq__item{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.faq__q{
  width:100%;display:flex;align-items:center;gap:14px;
  background:none;border:0;padding:20px 22px;text-align:left;
  font-size:18px;font-weight:700;line-height:1.7;min-height:60px;
}
.faq__mark{flex:none;width:28px;height:28px;border-radius:50%;background:var(--c-accent-light);color:var(--c-accent-dark);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.faq__sign{margin-left:auto;flex:none;width:20px;height:20px;position:relative}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;background:var(--c-accent);border-radius:2px}
.faq__sign::before{top:9px;left:0;width:20px;height:2px}
.faq__sign::after{left:9px;top:0;width:2px;height:20px;transition:transform .2s ease-out}
.faq__q[aria-expanded="true"] .faq__sign::after{transform:scaleY(0)}
.faq__a{overflow:hidden}
.faq__a[hidden]{display:none}
.faq__a-inner{padding:0 22px 22px 64px;color:var(--c-text)}

/* ---------- フォーム ---------- */
.form{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field>label,.fieldset__legend{font-weight:700;font-size:16px}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field textarea,.field select{
  font-family:inherit;font-size:17px;line-height:1.7;color:var(--c-text);
  border:1px solid var(--c-line);border-radius:var(--radius);padding:12px 14px;background:#fff;width:100%;
}
.field textarea{min-height:150px;resize:vertical}
.field .hint{font-size:14px;color:var(--c-muted)}
.fieldset{border:1px solid var(--c-line);border-radius:var(--radius);padding:18px;margin:0}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin-top:12px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.7;min-height:44px;align-items:center}
.checks input{width:22px;height:22px;accent-color:var(--c-accent);flex:none}
.filebox{border:1px dashed var(--c-line);border-radius:var(--radius);background:var(--c-surface);padding:22px;text-align:center;color:var(--c-muted);font-size:15px}

.contact-ways{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:44px}
.way{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;text-align:center}
.way img{width:36px;height:36px;margin:0 auto 12px}
.way__value{font-size:28px;font-weight:700;letter-spacing:.02em;color:var(--c-accent-dark);text-decoration:none;word-break:break-all}
.way__value--mail{font-size:19px}

/* ---------- 会社概要表 ---------- */
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:16px 20px;border-bottom:1px solid var(--c-line);text-align:left;font-size:16px;line-height:1.8;vertical-align:top}
.table th{width:220px;background:var(--c-surface);font-weight:700;white-space:nowrap}
.table tr:last-child th,.table tr:last-child td{border-bottom:0}

/* 代表紹介 */
.owner{display:grid;grid-template-columns:360px 1fr;gap:40px;align-items:start}
.owner__photo img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.owner__photo .note{margin-top:8px}
.owner__body p+p{margin-top:16px}

/* 本文中リンク */
.rich a{
  position:relative;text-decoration:none;color:var(--c-accent-dark);font-weight:700;
  background-image:linear-gradient(var(--c-accent),var(--c-accent));
  background-size:0 2px;background-repeat:no-repeat;background-position:left bottom;
  transition:background-size .2s ease-out;
}
.rich a:hover{background-size:100% 2px}

/* ---------- CTA帯 ---------- */
.cta-band{background:var(--c-accent);color:#fff;padding-block:64px;text-align:center}
.cta-band h2{margin-bottom:14px}
.cta-band p{margin-bottom:28px;color:#fff}
.cta-band .btn-row{justify-content:center}

/* ---------- フッター ---------- */
.footer{background:#2B2B2B;color:#F2F0EA;padding-block:56px 40px;font-size:15px}
.footer a{color:#F2F0EA;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
.footer__brand .brand__name{color:#fff}
.footer__brand .brand__sub{color:#C9C5BB}
.footer__info{margin-top:16px;line-height:1.9;color:#D8D5CC}
.footer__list li{margin-bottom:10px}
.footer__demo{
  margin-top:36px;padding-top:22px;border-top:1px solid #454545;
  font-size:13px;line-height:1.8;color:#C9C5BB;
}
.footer__copy{margin-top:18px;font-size:12px;color:#A9A59B}

/* ---------- SP固定バー ---------- */
.spbar{display:none}

/* ---------- 基礎層アニメーションの初期状態 ---------- */
.js .reveal{opacity:0;transform:translateY(28px)}

/* ---------- Swiper ---------- */
.swiper{padding-bottom:52px!important}
.swiper-pagination-bullet-active{background:var(--c-accent)!important}
.swiper-button-next,.swiper-button-prev{color:var(--c-accent)!important;width:44px!important;height:44px!important}
.swiper-button-next::after,.swiper-button-prev::after{font-size:20px!important;font-weight:700}

/* ---------- 404 ---------- */
.err{margin-top:var(--header-h);padding-block:80px;text-align:center}
.err__img{max-width:680px;margin:0 auto 36px}
.err__img img{border-radius:var(--radius);box-shadow:var(--shadow)}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1080px){
  .gnav__list{gap:16px}
  .gnav__list a{font-size:14px}
  .header__tel{font-size:17px}
}
@media (max-width:960px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .cards4>*{flex:0 1 calc(50% - 10px)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .owner{grid-template-columns:1fr;gap:24px}
  .owner__photo{max-width:420px}
  .footer__top{grid-template-columns:1fr 1fr}
  .navtoggle{display:block}
  .gnav{
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--c-line);
    box-shadow:var(--shadow);display:none;
  }
  .gnav.is-open{display:block}
  .gnav__list{flex-direction:column;gap:0;padding:8px 20px 16px}
  .gnav__list li{border-bottom:1px solid var(--c-line)}
  .gnav__list li:last-child{border-bottom:0}
  .gnav__list a{display:block;padding:16px 4px;font-size:16px;min-height:44px}
  .gnav__list a::after{display:none}
}
@media (max-width:768px){
  :root{--sec-y:56px;--header-h:64px}
  body{font-size:16px}
  h1,.h1{font-size:28px}
  h2,.h2{font-size:24px}
  h3,.h3{font-size:19px}
  .hero__catch{font-size:21px}
  .phead h1{font-size:26px}
  .hero{min-height:auto;padding-block:8px}
  .hero__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 55%,rgba(255,255,255,.7) 100%)}
  .hero__inner{padding-block:48px 64px}
  .hero__scroll{display:none}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .svc-row--rev .card__thumb{order:0}
  .cards4>*{flex:1 1 100%}
  .reason{grid-template-columns:1fr;gap:28px}
  .flow{grid-template-columns:1fr}
  .contact-ways{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:26px}
  .table th,.table td{display:block;width:100%}
  .table th{border-bottom:0}
  .compare__tab{flex:1 1 100%;max-width:none;min-height:0}
  .compare__tabs{gap:8px}
  .voice-card__head{flex-direction:column}
  .footer{padding-bottom:96px}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  /* SP固定バーで電話・相談を常時出すため、ヘッダーのCTAは畳む */
  .header__cta .btn{display:none}
  .header__tel span{display:none}
  .header__tel{font-size:0;padding:10px}
  .header__tel img{width:24px;height:24px}
  .header__inner{gap:12px}
  .brand__name{font-size:21px}

  /* SP固定バー */
  .spbar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:99;
    background:var(--c-line);box-shadow:0 -2px 10px rgba(0,0,0,.12);
  }
  .spbar a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:60px;text-decoration:none;font-weight:700;font-size:16px;
  }
  .spbar__tel{background:#fff;color:var(--c-accent-dark)}
  .spbar__contact{background:var(--c-accent);color:#fff}
  .spbar img{width:20px;height:20px}
  .spbar__contact img{filter:brightness(0) invert(1)}
}

/* =========================================================
   prefers-reduced-motion：全アニメーションを無効化
   ========================================================= */
@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}
  .js .reveal{opacity:1;transform:none}
  .card__thumb img{transition:none}
  .card:hover .card__thumb img{transform:none}
  .hero__scroll span{animation:none}
}