/* ============================================================
   そばに v2 — 明るい・あたたかい・写真主体
   実測ベース: kissyo.net(丸ピル/写真65%/#333) + famitra(游ゴ/1色+CTA)
   design-spec-v2.md §5 のトークン以外を直書きしない
   ============================================================ */
:root{
  /* 色 */
  --white:#FFFFFF;
  --cream:#FAF6EC;
  --tint:#EEF4EC;                 /* 薄緑 */
  --ink:#332E29;
  --ink2:#6B655D;
  --green:#2A6340;                /* 主・白字7.1:1 */
  --green-deep:#1F5233;
  --orange:#B24E1C;               /* 強調・白字5.25:1 */
  --line:rgba(51,46,41,.14);
  --line-green:rgba(42,99,64,.22);

  /* 書体（全編ゴシック・実測準拠） */
  --gothic:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","游ゴシック体","Yu Gothic",YuGothic,Meiryo,sans-serif;

  /* 級数（9段のみ） */
  --fs-13:13px; --fs-15:15px; --fs-17:17px; --fs-20:20px; --fs-24:24px;
  --fs-30:30px; --fs-38:38px; --fs-46:46px; --fs-60:60px;

  /* 形・余白 */
  --r:10px;                       /* 写真・カード */
  --r-pill:999px;                 /* ボタン */
  --pad-t:88px; --pad-b:104px;
  --container:1120px; --edge:22px;

  --ease:cubic-bezier(.33,1,.68,1);
  --shadow:0 10px 28px rgba(51,46,41,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--gothic); font-size:var(--fs-17); font-weight:400;
  line-height:1.9; letter-spacing:.02em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:600; line-height:1.5; letter-spacing:.03em}
p,ul,ol,dl,dd,figure,fieldset{margin:0; padding:0}
li{list-style:none}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

/* ---------- 注記バー ---------- */
.notice{
  background:var(--green-deep); color:var(--white);
  font-size:var(--fs-13); line-height:1.7; text-align:center;
  padding:9px var(--edge);
}

/* ---------- ヘッダー ---------- */
.head{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.head__in{
  max-width:var(--container); margin:0 auto; padding:12px var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; min-height:44px}
.brand__mark{color:var(--green); line-height:0}
.brand__mark .lamp{fill:var(--orange)}
.brand__txt b{display:block; font-size:var(--fs-24); font-weight:700; letter-spacing:.12em; line-height:1.2}
.brand__txt small{display:block; font-size:var(--fs-13); color:var(--ink2); letter-spacing:.06em}
.head__contact{display:flex; align-items:center; gap:18px}
.head__tel a{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:var(--fs-24); font-weight:700; color:var(--green-deep); letter-spacing:.03em; min-height:44px;
}
.head__tel .tel-ico{display:inline-flex; color:var(--green); line-height:0}
.head__tel span{display:block; font-size:var(--fs-13); color:var(--ink2); line-height:1.3}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  font-family:var(--gothic); font-size:var(--fs-15); font-weight:700; letter-spacing:.05em;
  padding:13px 26px; border-radius:var(--r-pill); border:2px solid var(--green);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--fill{background:var(--green); color:var(--white)}
.btn--line{background:var(--white); color:var(--green-deep)}
.btn--lg{font-size:var(--fs-17); padding:16px 34px}
.btn--xl{font-size:var(--fs-20); padding:18px 30px; width:100%}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}

/* ---------- 見出し共通 ---------- */
.sec-eyebrow{
  display:inline-block; color:var(--green); font-size:var(--fs-15); font-weight:700;
  letter-spacing:.22em; margin-bottom:14px;
}
.sec-eyebrow::before{content:"― "; letter-spacing:0}
.sec-ttl{font-size:var(--fs-38); font-weight:700; letter-spacing:.04em}
.sec-lead{margin-top:16px; color:var(--ink2)}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(1100px 520px at 86% -10%, var(--tint), rgba(238,244,236,0) 62%),
    linear-gradient(var(--cream), var(--cream));
  overflow:hidden;
}
.hero__in{
  max-width:var(--container); margin:0 auto; padding:64px var(--edge) 84px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,46%);
  gap:30px 48px; align-items:center;
}
.hero__eyebrow{
  display:inline-block; background:var(--white); border:1px solid var(--line-green);
  color:var(--green-deep); font-size:var(--fs-13); font-weight:600; letter-spacing:.08em;
  padding:7px 16px; border-radius:var(--r-pill); margin-bottom:22px;
}
.hero__ttl{font-size:var(--fs-46); font-weight:700; line-height:1.4; letter-spacing:.04em}
.hero__lead{margin-top:20px; max-width:32em}
.hero__badges{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
.hero__badges li{
  background:var(--white); border:1px solid var(--line-green); border-radius:var(--r);
  padding:12px 18px 13px; text-align:center; box-shadow:0 4px 14px rgba(42,99,64,.07);
}
.hero__badges b{display:block; font-size:var(--fs-13); font-weight:600; color:var(--ink2); letter-spacing:.06em}
.hero__badges strong{
  display:block; font-size:var(--fs-24); font-weight:700; color:var(--green-deep);
  letter-spacing:.04em; line-height:1.3;
}
.hero__badges strong span{font-size:var(--fs-15)}
.hero__cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}

.hero__photos{position:relative; min-height:430px}
.hero__ph1{position:absolute; right:0; top:0; width:94%}
.hero__ph1 img{border-radius:14px; box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover}
.hero__ph2{position:absolute; left:-16px; bottom:-10px; width:44%}
.hero__ph2 img{
  border-radius:14px; box-shadow:var(--shadow); aspect-ratio:1/1; object-fit:cover;
  border:6px solid var(--white);
}

/* ---------- こんなときに ---------- */
.worry{background:var(--white)}
.worry__in{max-width:var(--container); margin:0 auto; padding:var(--pad-t) var(--edge) var(--pad-b); text-align:center}
.worry__list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
  margin-top:42px; text-align:left;
}
.worry__list li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--cream); border-radius:var(--r); padding:24px 22px;
}
.worry__check{color:var(--green); flex:none; padding-top:2px}
.worry__list b{color:var(--green-deep)}
.worry__note{margin-top:28px; color:var(--ink2)}

/* ---------- 8つのサービス ---------- */
.svc{background:var(--tint)}
.svc__in{max-width:var(--container); margin:0 auto; padding:var(--pad-t) var(--edge) var(--pad-b)}
.svc__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:44px;
}
.card{
  background:var(--white); border-radius:var(--r); overflow:hidden; box-shadow:0 6px 18px rgba(51,46,41,.07);
}
.card figure{aspect-ratio:3/2; overflow:hidden}
.card figure img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.card:hover figure img{transform:scale(1.02)}
.card__body{padding:18px 18px 22px}
.card__num{font-size:var(--fs-13); font-weight:700; color:var(--orange); letter-spacing:.14em}
.card__body h3{font-size:var(--fs-20); font-weight:700; margin:6px 0 8px}
.card__body p{font-size:var(--fs-15); line-height:1.8; color:var(--ink2)}

/* ---------- 選ばれる理由 ---------- */
.why{background:var(--white)}
.why__in{max-width:var(--container); margin:0 auto; padding:var(--pad-t) var(--edge) var(--pad-b)}
.why__row{
  display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:44px; align-items:center; margin-top:56px;
}
.why__row--rev .why__fig{order:2}
.why__fig img{border-radius:14px; aspect-ratio:3/2; object-fit:cover; width:100%; box-shadow:var(--shadow)}
.why__num{
  display:inline-block; background:var(--green); color:var(--white); font-size:var(--fs-13);
  font-weight:700; letter-spacing:.14em; padding:6px 16px; border-radius:var(--r-pill);
}
.why__txt h3{font-size:var(--fs-30); font-weight:700; margin:16px 0 14px; line-height:1.55}
.why__txt p{color:var(--ink2)}

/* ---------- 料金 ---------- */
.fee{background:var(--cream)}
.fee__in{max-width:var(--container); margin:0 auto; padding:var(--pad-t) var(--edge) var(--pad-b)}
.fee__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:44px}
.fee__item{background:var(--white); border-radius:var(--r); padding:30px 26px 28px; box-shadow:0 6px 18px rgba(51,46,41,.06)}
.fee__no{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--tint); color:var(--green-deep); font-size:var(--fs-20); font-weight:700;
}
.fee__item h3{font-size:var(--fs-20); font-weight:700; margin:16px 0 10px}
.fee__item p{font-size:var(--fs-15); line-height:1.85; color:var(--ink2)}
.fee__note{margin-top:26px; color:var(--ink2); text-align:center}

/* ---------- 流れ ---------- */
.flow{background:var(--white)}
.flow__in{max-width:var(--container); margin:0 auto; padding:var(--pad-t) var(--edge) var(--pad-b)}
.flow__steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:44px;
  counter-reset:step;
}
.flow__steps li{position:relative; background:var(--cream); border-radius:var(--r); padding:26px 22px 24px}
.flow__steps li:not(:last-child)::after{
  content:""; position:absolute; right:-16px; top:50%; margin-top:-7px;
  border-left:11px solid var(--green); border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.flow__no{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; background:var(--green); color:var(--white);
  font-size:var(--fs-20); font-weight:700;
}
.flow__steps h3{font-size:var(--fs-20); font-weight:700; margin:14px 0 8px}
.flow__steps p{font-size:var(--fs-15); line-height:1.8; color:var(--ink2)}

/* ---------- FAQ ---------- */
.faq{background:var(--tint)}
.faq__in{max-width:820px; margin:0 auto; padding:var(--pad-t) var(--edge) var(--pad-b)}
.faq details{
  background:var(--white); border-radius:var(--r); margin-top:16px;
  box-shadow:0 4px 14px rgba(51,46,41,.05); overflow:hidden;
}
.faq details:first-of-type{margin-top:40px}
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px;
  font-size:var(--fs-17); font-weight:700; padding:20px 22px; min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"Q"; flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--green); color:var(--white);
  font-size:var(--fs-15); font-weight:700;
}
.faq summary::after{
  content:"＋"; margin-left:auto; color:var(--green); font-size:var(--fs-20); font-weight:400;
}
.faq details[open] summary::after{content:"−"}
.faq details .faq__body{padding:0 22px 22px 70px; color:var(--ink2)}

/* ---------- CTA ---------- */
.cta{background:var(--green-deep)}
.cta__in{
  max-width:var(--container); margin:0 auto; padding:var(--pad-t) var(--edge) var(--pad-b);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:26px; align-items:start;
}
.cta__card{background:var(--white); border-radius:14px; padding:34px 30px 30px}
.cta__card--main{border-top:6px solid var(--orange)}
.cta__card h2{font-size:var(--fs-24); font-weight:700; margin-bottom:12px}
.cta__card>p{color:var(--ink2); font-size:var(--fs-15); line-height:1.85}
.cta__card>p b{color:var(--ink)}
.cta__side{display:grid; gap:26px}
.cta__tel{margin-top:16px; border-top:1px solid var(--line); padding-top:18px}
.cta__tel a{
  display:inline-block; font-size:var(--fs-38); font-weight:700; color:var(--green-deep);
  letter-spacing:.02em; text-decoration:none; min-height:44px; line-height:1.3;
}
.cta__tel span{display:block; font-size:var(--fs-13); color:var(--ink2); margin-top:4px}

.form{margin-top:22px}
.form label{display:block; font-size:var(--fs-15); font-weight:600; margin-bottom:18px}
.form input,.form textarea{
  display:block; width:100%; margin-top:7px; font:inherit; font-size:var(--fs-17);
  padding:13px 14px; border:1.5px solid var(--line); border-radius:8px;
  background:var(--white); color:var(--ink);
}
.form input:focus,.form textarea:focus{border-color:var(--green); outline:none}
.form ::placeholder{color:var(--ink2); opacity:.55}
.form textarea{line-height:1.8; resize:vertical}
.form fieldset{border:0; margin-bottom:20px}
.form legend{font-size:var(--fs-15); font-weight:600; padding:0; margin-bottom:6px}
.form .radio{display:inline-flex; align-items:center; gap:8px; margin:0 18px 0 0; min-height:44px; font-weight:400}
.radio input{width:20px; height:20px; margin:0; accent-color:var(--green)}
.form__note{margin-top:12px; font-size:var(--fs-13); color:var(--ink2); text-align:center}

/* ---------- フッター ---------- */
.foot{background:var(--white); border-top:1px solid var(--line)}
.foot__in{max-width:var(--container); margin:0 auto; padding:56px var(--edge) 48px}
.foot__brand b{display:block; font-size:var(--fs-24); font-weight:700; letter-spacing:.12em}
.foot__brand small{display:block; font-size:var(--fs-13); color:var(--ink2); margin-top:4px}
.foot__info{margin-top:28px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px}
.foot__info>div{
  display:grid; grid-template-columns:96px 1fr; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--line); font-size:var(--fs-15);
}
.foot__info dt{color:var(--ink2)}
.foot__note{margin-top:28px; font-size:var(--fs-13); color:var(--ink2); line-height:1.9}

/* ---------- モーション ----------
   設計: ①ロード演出（マスク＋段差） ②朝の光のスイープ（独自演出）
        ③スクロールリビール ④写真のゆるいパララックス
   JSが落ちた場合・reduced-motion では初期状態を作らず、常に最終状態を表示する。
   -------------------------------------------------------------- */

/* 初期状態は .js-anim（＝JSが動く環境）のときだけ作る */
.js-anim .a-up   { opacity:0; transform:translateY(20px) }
.js-anim .a-fade { opacity:0 }
.js-anim .a-mask { clip-path:inset(0 0 100% 0) }
.js-anim .brand__mark .lamp { opacity:0 }

/* 朝の光（ヒーロー写真を一度だけ通る） */
.hero__ph1{ overflow:hidden; border-radius:14px }
.hero__ph1 img{ border-radius:0 }
.sweep{
  position:absolute; inset:-30% -40%; pointer-events:none; opacity:0;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 42%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 58%);
  transform:translateX(-130%);
}

/* パララックス用（写真は枠より少し大きく持たせる） */
.why__fig{ position:relative; overflow:hidden; border-radius:14px; aspect-ratio:3/2 }
.why__fig img{
  position:absolute; left:0; top:-6%; width:100%; height:112%;
  object-fit:cover; border-radius:0; box-shadow:none;
}

/* ホバー（動かしすぎない） */
.card{ transition:transform .45s var(--ease), box-shadow .45s var(--ease) }
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(51,46,41,.12) }
.card figure img{ transition:transform 1.1s var(--ease) }
.card:hover figure img{ transform:scale(1.03) }

/* ヘッダー（スクロールで影） */
.head{ transition:box-shadow .35s var(--ease) }
.head.is-scrolled{ box-shadow:0 6px 20px rgba(51,46,41,.08) }

/* FAQ の開閉はJSで高さを送る */
.faq details .faq__body{ overflow:hidden }
.faq details p{ margin:0 }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important }
  .a-up,.a-fade,.a-mask{ opacity:1 !important; transform:none !important; clip-path:none !important }
  .sweep{ display:none }
  .brand__mark .lamp{ opacity:1 !important }
}

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow__steps li:nth-child(even)::after{display:none}
}
@media (max-width:900px){
  :root{--pad-t:64px; --pad-b:76px; --fs-46:34px; --fs-38:28px; --fs-30:24px}
  .hero__in{grid-template-columns:1fr; padding-bottom:64px}
  .hero__photos{min-height:0; margin-top:6px}
  .hero__ph1{position:relative; width:100%}
  .hero__ph2{position:absolute; left:0; bottom:-18px; width:38%}
  .worry__list{grid-template-columns:1fr}
  .why__row{grid-template-columns:1fr; gap:22px; margin-top:44px}
  .why__row--rev .why__fig{order:0}
  .fee__grid{grid-template-columns:1fr}
  .cta__in{grid-template-columns:1fr}
}
@media (max-width:620px){
  :root{--edge:18px}
  .head__in{justify-content:center; text-align:center}
  .head__contact{width:100%; justify-content:center; flex-wrap:wrap; gap:10px}
  .svc__grid{grid-template-columns:1fr; gap:18px}
  .flow__steps{grid-template-columns:1fr}
  .flow__steps li:not(:last-child)::after{display:none}
  .hero__cta .btn{width:100%}
  .faq details .faq__body{padding-left:22px}
  .cta__tel a{font-size:var(--fs-30)}
}