@charset "utf-8";
/* =========================================================
   有限会社 川出造園｜リニューアル提案デモ
   配色は 13_Web構成.md 第5章のとおり（色相の変更なし）
   ========================================================= */

:root{
  --base:#FFFFFF;
  --ground:#FEFAEF;
  --band:#FCEDC7;
  --green-bg:#E9F1E0;
  --accent:#F87D48;
  --accent-btn:#C4501F;
  --sub-green:#007A29;
  --ink:#2B2118;
  --ink-mute:#6B5B4C;
  --line:#E7DCC8;

  --wrap:1120px;
  --sec:96px;
  --r:12px;
  --shadow:0 2px 10px rgba(43,33,24,.07);
  --shadow-up:0 10px 26px rgba(43,33,24,.14);

  --font-h:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --font-b:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:17px;
  font-weight:400;
  line-height:1.9;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:700;line-height:1.45;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

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

/* ---- 見出し ---- */
.h-lead{font-size:15px;letter-spacing:.08em;color:var(--accent-btn);font-family:var(--font-h);margin-bottom:8px}
.h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:16px;position:relative;display:inline-block}
.h2::after{content:"";display:block;height:4px;width:56px;background:var(--accent);border-radius:2px;margin-top:14px}
.h2--center{display:block;text-align:center}
.h2--center::after{margin-inline:auto}
.lead{color:var(--ink-mute);max-width:46em}
.sec-head{margin-bottom:44px}

/* ---- ボタン ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:14px 30px;border-radius:999px;
  font-family:var(--font-h);font-weight:700;font-size:17px;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out;
}
.btn--primary{background:var(--accent-btn);color:#fff}
.btn--primary:hover{background:#a8410f}
.btn--tel{background:var(--sub-green);color:#fff}
.btn--tel:hover{background:#00631f}
.btn--ghost{background:#fff;color:var(--accent-btn);border-color:var(--accent-btn)}
.btn--ghost:hover{background:#FFF3EC}
.btn--lg{min-height:64px;font-size:19px;padding:16px 38px}
.btn .num{font-family:var(--font-b);font-weight:700;letter-spacing:.02em}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row--center{justify-content:center}
.sec-cta{margin-top:48px;text-align:center}

/* ---- テキストリンク（下線が左から右へ） ---- */
.tlink{
  display:inline;text-decoration:none;color:var(--accent-btn);font-weight:700;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size .2s ease-out;
}
.tlink:hover,.tlink:focus-visible{background-size:100% 2px}

/* ---- ヘッダー ---- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);
}
.header__in{display:flex;align-items:center;gap:14px;height:var(--hh,84px);transition:height .2s ease-out}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand__mark{width:34px;height:34px;flex:none}
.brand__name{font-family:var(--font-h);font-weight:700;font-size:17px;line-height:1.25;white-space:nowrap}
.brand__sub{display:block;font-family:var(--font-b);font-weight:400;font-size:11px;color:var(--ink-mute);letter-spacing:.06em}
.gnav{display:flex;gap:4px}
.gnav a{
  display:block;padding:8px 11px;border-radius:8px;text-decoration:none;white-space:nowrap;
  font-size:14.5px;font-weight:500;transition:background-color .2s ease-out,color .2s ease-out;
}
.gnav a:hover{background:var(--ground);color:var(--accent-btn)}
.gnav a[aria-current="page"]{color:var(--accent-btn);font-weight:700;background:var(--ground)}
.header__cta{display:flex;align-items:center;gap:12px}
.header__tel{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--font-b);font-weight:700;font-size:20px;color:var(--sub-green);white-space:nowrap;
}
.header__tel img{width:22px;height:22px}
.header__tel small{display:block;font-size:11px;font-weight:400;color:var(--ink-mute);letter-spacing:.02em}
.nav-toggle{display:none}
body{padding-top:84px}

/* ---- ファーストビュー ---- */
.hero{position:relative;background:var(--ground)}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__in{position:relative;padding-block:104px 132px;min-height:min(74vh,620px);display:flex;align-items:center}
.hero__panel{
  background:rgba(255,255,255,.93);border-radius:var(--r);
  padding:44px 44px 40px;max-width:660px;box-shadow:var(--shadow);
}
.hero h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:.01em}
.hero__sub{margin-top:18px;color:var(--ink-mute);font-size:17px}
.hero .btn-row{margin-top:30px}
.hero__note{margin-top:20px;font-size:12px;color:var(--ink-mute)}
.scroll-arrow{
  position:absolute;left:50%;bottom:22px;translate:-50% 0;
  width:26px;height:40px;border:none;background:none;padding:0;
}
.scroll-arrow span{
  display:block;width:14px;height:14px;margin-inline:auto;
  border-right:2px solid var(--accent-btn);border-bottom:2px solid var(--accent-btn);
  rotate:45deg;animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(-5px);opacity:.45}50%{transform:translateY(5px);opacity:1}}

/* ---- 予算スライダー（主役層） ---- */
.budget{background:var(--ground)}
.budget__box{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:36px;box-shadow:var(--shadow);
}
.budget__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.budget__figure{position:relative;border-radius:var(--r);overflow:hidden;background:var(--band);aspect-ratio:4/3}
.budget__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.budget__price{font-family:var(--font-b);font-weight:700;font-size:clamp(30px,4.4vw,40px);line-height:1.2;color:var(--accent-btn)}
.budget__price .unit{font-size:.5em;margin-left:6px;color:var(--ink)}
.budget__price .tax{display:inline-block;font-size:13px;font-weight:400;color:var(--ink-mute);margin-left:10px;vertical-align:middle}
.budget__meta{margin-top:6px;font-size:14px;color:var(--ink-mute)}
.budget__desc{margin-top:16px;font-size:17px}
.budget__desc--empty{color:var(--ink-mute);font-size:15px}
.budget__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{background:var(--band);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:500}

.slider{margin-top:34px}
.slider__label{font-family:var(--font-h);font-weight:700;font-size:15px;margin-bottom:6px}
.slider input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;display:block;
}
.slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--band)}
.slider input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--band)}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:34px;height:34px;margin-top:-13px;border-radius:50%;
  background:var(--accent-btn);border:4px solid #fff;box-shadow:0 2px 8px rgba(43,33,24,.3);
}
.slider input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--accent-btn);border:4px solid #fff;
  box-shadow:0 2px 8px rgba(43,33,24,.3);
}
.slider input[type=range]:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:6px}
.slider__ticks{display:grid;grid-template-columns:repeat(6,1fr);margin-top:4px}
.slider__ticks button{
  background:none;border:none;padding:6px 0;cursor:pointer;font:inherit;
  font-size:13px;font-weight:500;color:var(--ink-mute);text-align:center;
  border-top:2px solid var(--line);transition:color .2s ease-out,border-color .2s ease-out;
}
.slider__ticks button[aria-current="true"]{color:var(--accent-btn);font-weight:700;border-top-color:var(--accent)}
.slider__ticks button:hover{color:var(--accent-btn)}
.budget__cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.disclaimer{
  margin-top:18px;font-size:13px;line-height:1.8;color:var(--ink-mute);
  background:var(--band);border-radius:8px;padding:12px 16px;
}
.imgnote{margin-top:8px;font-size:12px;color:var(--ink-mute)}

/* ---- カード ---- */
.grid{display:grid;gap:24px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;
}
.card__media{overflow:hidden;aspect-ratio:4/3;background:var(--band)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease-out}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.card__title{font-size:19px;margin-bottom:8px}
.card__text{font-size:15px;color:var(--ink-mute);flex:1}
.card__more{margin-top:14px;font-size:14px;font-weight:700;color:var(--accent-btn)}
.card--trouble{background:var(--ground);text-align:center;padding:30px 22px}
.card--trouble .ico{width:56px;height:56px;margin:0 auto 14px}
.card--trouble .card__title{font-size:18px}

/* ---- 事例カード（works） ---- */
.work{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.work:nth-child(even) .work__media{order:2}
.work__media{overflow:hidden;aspect-ratio:4/3;background:var(--band)}
.work__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease-out}
.work:hover .work__media img{transform:scale(1.05)}
.work__body{padding:32px 34px 32px 8px}
.work:nth-child(even) .work__body{padding:32px 8px 32px 34px}
.work__price{font-family:var(--font-b);font-weight:700;font-size:34px;color:var(--accent-btn);line-height:1.2}
.work__price .unit{font-size:.55em;margin-left:4px;color:var(--ink)}
.work__price .tax{font-size:13px;font-weight:400;color:var(--ink-mute);margin-left:10px}
.work__meta{font-size:14px;color:var(--ink-mute);margin-top:4px}
.work__desc{margin-top:14px}
.work-list{display:grid;gap:28px}

/* ---- ビフォーアフター ---- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ba figure{margin:0}
.ba__frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--band)}
.ba__frame img{width:100%;height:100%;object-fit:cover}
.ba figcaption{margin-top:10px;font-family:var(--font-h);font-weight:700;font-size:17px}
.ba__tag{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;font-size:13px;padding:2px 14px;margin-right:8px;font-family:var(--font-b)}
.ba__tag--after{background:var(--sub-green)}

/* ---- できること一覧 ---- */
.can{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.can li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;gap:14px;align-items:flex-start}
.can img{width:40px;height:40px;flex:none}
.can b{display:block;font-family:var(--font-h);font-size:17px}
.can span{font-size:14px;color:var(--ink-mute);line-height:1.7}

/* ---- 会社のこと ---- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.about__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.about__media img{width:100%;height:100%;object-fit:cover}
.deflist{border-top:1px solid var(--line)}
.deflist div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.deflist dt{font-family:var(--font-h);font-weight:700;font-size:15px}
.deflist dd{margin:0;font-size:16px}

/* ---- FAQ アコーディオン ---- */
.faq{display:grid;gap:14px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq__q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--font-h);font-weight:700;font-size:18px;color:var(--ink);
  padding:20px 56px 20px 22px;position:relative;line-height:1.6;
}
.faq__q::before{content:"Q";color:var(--accent-btn);font-weight:700;margin-right:10px}
.faq__q::after{
  content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent-btn);border-bottom:2px solid var(--accent-btn);
  translate:0 -70%;rotate:45deg;transition:rotate .2s ease-out;
}
.faq__q[aria-expanded="true"]::after{rotate:-135deg;translate:0 -20%}
.faq__a{overflow:hidden;height:0}
.faq__a-in{padding:0 22px 22px;color:var(--ink-mute)}
.faq__a-in::before{content:"A";color:var(--sub-green);font-family:var(--font-h);font-weight:700;margin-right:10px}

/* ---- 流れ ---- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:f}
.flow li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;position:relative}
.flow li::before{
  counter-increment:f;content:counter(f);
  font-family:var(--font-b);font-weight:700;font-size:15px;color:#fff;background:var(--accent-btn);
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px;
}
.flow b{display:block;font-family:var(--font-h);font-size:17px;margin-bottom:4px}
.flow span{font-size:14px;color:var(--ink-mute);line-height:1.7}

/* ---- フォーム ---- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--shadow)}
.form .field{margin-bottom:22px}
.form label{display:block;font-family:var(--font-h);font-weight:700;font-size:15px;margin-bottom:7px}
.form .req{background:var(--accent-btn);color:#fff;font-size:11px;border-radius:4px;padding:1px 7px;margin-left:8px;font-family:var(--font-b);vertical-align:2px}
.form input,.form textarea,.form select{
  width:100%;font:inherit;font-size:16px;padding:13px 15px;border:1px solid var(--line);
  border-radius:8px;background:var(--ground);color:var(--ink);
}
.form input:focus,.form textarea:focus,.form select:focus{outline:3px solid var(--accent);outline-offset:1px;background:#fff}
.form textarea{min-height:150px;resize:vertical}
.form .hint{font-size:13px;color:var(--ink-mute);margin-top:6px}
.notice{
  background:var(--band);border-radius:8px;padding:14px 18px;font-size:15px;
  font-weight:500;margin-bottom:26px;
}
.tel-block{background:var(--green-bg);border-radius:var(--r);padding:34px;text-align:center}
.tel-block .num{font-family:var(--font-b);font-weight:700;font-size:clamp(30px,5vw,44px);color:var(--sub-green);text-decoration:none;letter-spacing:.01em;display:inline-block}
.tel-block .hours{font-size:15px;color:var(--ink-mute);margin-top:4px}

/* ---- 区切り帯 ---- */
.band-img{height:220px;overflow:hidden}
.band-img img{width:100%;height:100%;object-fit:cover}

/* ---- フッター ---- */
.footer{background:var(--ground);border-top:1px solid var(--line);padding-block:56px 28px;margin-top:0}
.footer__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
.footer h3{font-size:16px;margin-bottom:12px}
.footer__area{font-size:14px;color:var(--ink-mute);line-height:2}
.footer__info{font-size:15px;line-height:2}
.footer__info a{color:var(--sub-green);font-weight:700;text-decoration:none}
.footer__nav{display:grid;gap:6px;font-size:15px}
.footer__nav a{text-decoration:none}
.footer__nav a:hover{color:var(--accent-btn)}
.footer__demo{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.85;color:var(--ink-mute);
}
.footer__copy{margin-top:14px;font-size:12px;color:var(--ink-mute)}

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

/* ---- 404 ---- */
.err{text-align:center;padding-block:96px}
.err h1{font-size:clamp(26px,4vw,38px);margin-bottom:16px}

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

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1000px){
  .grid--4,.can,.flow{grid-template-columns:repeat(2,1fr)}
  .budget__grid{grid-template-columns:1fr;gap:24px}
  .about{grid-template-columns:1fr;gap:28px}
  .work,.work:nth-child(even){grid-template-columns:1fr}
  .work__media,.work:nth-child(even) .work__media{order:0}
  .work__body,.work:nth-child(even) .work__body{padding:26px 26px 30px}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){.gnav a{font-size:13.5px;padding:8px 8px}.header__tel{font-size:18px}}
@media (max-width:1040px){
  .gnav{
    position:fixed;inset:var(--hh,84px) 0 auto 0;background:#fff;flex-direction:column;gap:0;
    border-bottom:1px solid var(--line);padding:8px 20px 16px;display:none;box-shadow:var(--shadow);
  }
  .gnav.is-open{display:flex}
  .gnav a{padding:14px 8px;border-radius:0;border-bottom:1px solid var(--line);font-size:16px}
  .nav-toggle{
    display:grid;place-items:center;width:48px;height:48px;background:none;border:1px solid var(--line);
    border-radius:8px;cursor:pointer;gap:5px;order:3;
  }
  .nav-toggle i{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px}
  .header__tel small{display:none}
  .header__tel{font-size:0}
  .header__tel img{width:26px;height:26px}
  .brand__sub{display:none}
}
@media (max-width:720px){
  :root{--sec:64px}
  body{font-size:16px;padding-bottom:76px}
  .grid--3,.grid--2,.ba{grid-template-columns:1fr}
  .hero__panel{padding:28px 24px 26px}
  .hero__in{padding-block:56px 88px;min-height:auto}
  .budget__box{padding:22px 18px}
  .slider__ticks button{font-size:11px}
  .deflist div{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .footer__top{grid-template-columns:1fr}
  .form{padding:22px 18px}
  .spbar{
    display:grid;grid-template-columns:1fr 1fr;gap:0;position:fixed;inset:auto 0 0 0;z-index:99;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(43,33,24,.1);
  }
  .spbar a{
    min-height:64px;display:flex;align-items:center;justify-content:center;gap:8px;
    text-decoration:none;font-family:var(--font-h);font-weight:700;font-size:16px;
  }
  .spbar a:first-child{background:var(--sub-green);color:#fff}
  .spbar a:last-child{background:var(--accent-btn);color:#fff}
}
@media (max-width:480px){
  .grid--4,.can,.flow{grid-template-columns:1fr}
}

/* ---- アニメーションを止める ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .scroll-arrow span{animation:none}
}

/* ---- 追補 ---- */
.budget__price .note,.work__price .note{font-size:.4em;font-weight:400;color:var(--ink);margin-left:4px}
.work__desc.budget__desc--empty{margin-top:14px}
.about--rev > :first-child{order:2}
@media (max-width:1000px){.about--rev > :first-child{order:0}}
.svc{align-items:center}
.mailrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mailrow img{width:26px;height:26px;flex:none}
@media (max-width:430px){
  .hero h1{font-size:26px}
  .hero__panel{padding:24px 20px 22px}
}

/* ---- 会社案内：写真とリストを上揃えにし、左下に地図を置く ---- */
.about--top{align-items:start}
.mapbox{margin-top:14px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--ground)}
.mapbox iframe{display:block;width:100%;height:320px;border:0}
.mapnote{margin-top:8px;font-size:12px;line-height:1.75;color:var(--ink-mute)}
@media (max-width:720px){.mapbox iframe{height:260px}}