/* ============ トークン ============ */
:root{
  --paper:#F7F5EF; --white:#FFFFFF; --ink:#1C1C1A; --ink2:#5A5A54;
  --green:#1F4B3F; --green2:#8FA99B; --rule:#DCD6C8; --sand:#EFECE2;
  --mincho:'Shippori Mincho',serif;
  --gothic:'Zen Kaku Gothic New',sans-serif;
  --wrap:1120px; --hero:1360px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:96px; }
body{ margin:0; background-color:var(--paper); color:var(--ink);
  font-family:var(--gothic); font-size:17px; line-height:1.9; letter-spacing:.03em;
  -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,.l-lead,.c-btn,summary{ word-break:auto-phrase; text-wrap:balance; }
h1,h2,h3{ font-family:var(--mincho); font-weight:600; letter-spacing:.05em; margin:0; }
h1{ font-size:64px; line-height:1.42; }
h2{ font-size:40px; line-height:1.5; }
h3{ font-size:24px; line-height:1.6; }
p{ margin:0 0 1.4em; }
p:last-child{ margin-bottom:0; }


/* ============ 共通レイアウト ============ */
/* 余白は固定。max-width に padding が含まれるので、vw のままだと
   画面が広いほど本文が細くなってしまう */
.l-wrap{ width:100%; max-width:calc(var(--wrap) + 48px); margin:0 auto; padding:0 24px; }
.l-sec{ position:relative; padding:110px 0; }
.l-sec--band{ background-color:var(--white); }
.l-sec--dark{ background:var(--green); color:var(--paper); }
.l-eyebrow{ display:block; font-family:var(--gothic); font-size:13px; letter-spacing:.34em;
  color:var(--green); margin:0 0 22px; }
.l-eyebrow::before{ content:""; display:inline-block; width:30px; height:1px;
  background:var(--green); margin-right:14px; vertical-align:middle; }
.l-sec--dark .l-eyebrow{ color:var(--green2); }
/* 緑の背景（.c-nb）の上のラベル。var(--green2) だと 3.89:1 で基準の4.5未満のため、紙色72%（5.55:1）にする（2026-10-14） */
.c-nb .l-eyebrow{ color:rgba(247,245,239,.72); }
/* 見出しの改行位置を語のかたまりで指定する。本文には使わない。
   「390pxではここで折る」ではなく「このかたまりは割らない」という宣言なので、
   端末の幅が変わっても効く */
.np{ display:inline-block; }
/* PCの細いカラム用の強制改行。1カラムになるスマホでは邪魔なので消す */
@media (max-width:768px){ .u-br-pc{ display:none; } }
.l-sec--dark .l-eyebrow::before{ background:var(--green2); }
.c-nb .l-eyebrow::before{ background:rgba(247,245,239,.72); }
.l-lead{ font-size:17px; line-height:2.1; color:var(--ink2); max-width:34em; }
.l-note{ font-size:16px; line-height:1.9; color:var(--ink2); }

/* シグネチャモチーフ：境界点の記号（ページ内で繰り返す） */
/* 境界点の記号。十字を枠の外へ出すことで、文字化け（□）に見えないようにする */
.l-mark{ display:inline-block; width:13px; height:13px; border:1.5px solid var(--green);
  position:relative; flex:0 0 auto; }
.l-mark::before,.l-mark::after{ content:""; position:absolute; background:var(--green); }
.l-mark::before{ left:-5px; right:-5px; top:50%; height:1.5px; transform:translateY(-50%); }
.l-mark::after{ top:-5px; bottom:-5px; left:50%; width:1.5px; transform:translateX(-50%); }

/* ボタン */
.c-btn{ display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  padding:17px 42px; background:var(--green); color:var(--paper); text-decoration:none;
  font-weight:700; letter-spacing:.16em; font-size:16px; transition:opacity .25s; }
.c-btn:hover{ opacity:.86; }
.c-btn small{ font-weight:400; font-size:13px; letter-spacing:.08em; opacity:.82; }
.c-btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.c-tel{ text-decoration:none; color:inherit; }
.c-tel b{ display:block; font-family:var(--mincho); font-size:28px; letter-spacing:.06em; }
.c-tel small{ display:block; font-size:13px; letter-spacing:.08em; color:var(--ink2); margin-top:4px; }
.l-sec--dark .c-tel small{ color:rgba(247,245,239,.72); }
.c-actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }


/* ロゴ記号：測った土地と、分けた線と、境界点。32pxでも形が残るように太めに引く */
.c-logomark{ display:block; width:34px; height:34px; flex:0 0 auto; }
.c-logomark__lot{ fill:none; stroke:var(--green); stroke-width:2.2; stroke-linejoin:miter; }
.c-logomark__split{ fill:none; stroke:var(--green); stroke-width:1.2; opacity:.5; }
.c-logomark__pt{ fill:var(--green); stroke:none; }
.c-ft .c-logomark__lot,.c-ft .c-logomark__split{ stroke:var(--green2); }
.c-ft .c-logomark__pt{ fill:var(--green2); }

/* ============ ヘッダー（parts: header-06 を再実装） ============ */
.c-hd{ position:sticky; top:0; z-index:60; background:rgba(247,245,239,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); }
.c-hd__in{ max-width:var(--hero); margin:0 auto; padding:0 4vw;
  display:flex; align-items:center; gap:24px; min-height:78px; }
.c-hd__brand{ text-decoration:none; display:flex; align-items:flex-start; gap:13px; flex:0 0 auto; }
.c-hd__brand .c-logomark{ width:34px; height:34px; margin-top:1px; }
.c-hd__brand span{ font-family:var(--mincho); font-size:21px; letter-spacing:.14em; line-height:1.15; }
.c-hd__brand small{ display:block; font-size:12px; letter-spacing:.22em; color:var(--ink2);
  font-family:var(--gothic); margin-top:2px; }
.c-hd__nav{ margin-left:auto; display:flex; align-items:center; gap:20px; min-width:0; }
.c-hd__nav a{ text-decoration:none; font-size:16px; letter-spacing:.08em; white-space:nowrap; }
.c-hd__nav a:hover{ color:var(--green); }
.c-hd__side{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.c-hd__tel b{ font-size:21px; }
.c-hd__tel small{ font-size:12px; }
.c-hd__cta{ padding:12px 22px; font-size:16px; white-space:nowrap; }
.c-hd__cta small{ font-size:12px; }
/* スマホのメニュー内に出す電話とCTA。PCでは常に隠す（メディアクエリの中だけに書くとPCで露出する） */
.c-hd__navcta{ display:none; }
.c-hd__burger{ display:none; width:44px; height:44px; border:1px solid var(--rule);
  background:transparent; cursor:pointer; margin-left:auto; }
.c-hd__burger span{ display:block; width:20px; height:1.4px; background:var(--ink); margin:4px auto; }


/* 4者の記号。生成画像をやめ、サイトと同じ製図の線で描く */
.c-roles__mark{ display:block; width:44px; height:44px; }
.c-roles__mark path,.c-roles__mark rect,.c-roles__mark circle{
  fill:none; stroke:var(--green); stroke-width:1.6;
  stroke-linecap:butt; stroke-linejoin:miter; vector-effect:non-scaling-stroke; }

/* ナビ：ホバーで下線が左から横に伸びる */
.c-hd__nav > a{ position:relative; padding-bottom:4px; }
.c-hd__nav > a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.4px;
  background:var(--green); transform:scaleX(0); transform-origin:left center;
  transition:transform .38s cubic-bezier(.22,1,.36,1); }
.c-hd__nav > a:hover::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .c-hd__nav > a::after{ transition:none; }
}

/* FV直下の見出しは、右の本文を読む間ずっと左に留める */
.c-intro__col{ position:relative; }
.c-intro__head{ position:sticky; top:106px; }

/* ============ ファーストビュー ============ */
.hero{ width: 100%; max-width:none; margin:0; }
.c-fv{ position:relative; width: 100%; overflow:hidden;
  /* 超ワイドの窓でヒーローが平たくなりすぎると、地面の図が上下で切れる。
     幅に応じた下限を持たせて、縦横比が 2.3 を超えないようにする */
  height:calc(100vh - 78px); min-height:max(760px, 44vw); }
/* 写真と図をひとつの台に載せる。台は写真と同じ縦横比を持ち、ヒーローを覆う大きさに広がる。
   切り取られるのは台ごとなので、写真と図の位置関係は窓の形が変わってもずれない。 */
.c-fv__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.c-fv__stage{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  aspect-ratio:1536 / 1024; width:auto; height:auto; min-width:100%; min-height:100%; }
.c-fv__stage img{ display:block; width:100%; height:100%; object-fit:cover; }
.c-fv__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(102deg,
    rgba(247,245,239,.96) 0%, rgba(247,245,239,.93) 26%,
    rgba(247,245,239,.62) 46%, rgba(247,245,239,.12) 64%, rgba(247,245,239,0) 100%); }
/* 写真の上の計測オーバーレイ。細い暗色の線は草に負けるので、白＋影で浮かせる */
.c-fv__plan{ position:absolute; inset:0; width:100%; height:100%; z-index:2;
  filter:drop-shadow(0 1px 4px rgba(28,28,26,.5)); }
.c-fv__plan-sp{ display:none; }
.c-fv__plan path,.c-fv__plan rect,.c-fv__plan circle{ fill:none; stroke-linecap:butt; stroke-linejoin:miter; }
.c-fv__fill{ fill:rgba(247,245,239,.24); stroke:none; }
.c-fv__plan text{ font-family:var(--gothic); font-size:12px; font-weight:500; letter-spacing:.02em;
  fill:#FFFFFF; stroke:rgba(28,28,26,.62); stroke-width:3.4px; paint-order:stroke fill; }
.c-fv__copy .l-eyebrow{ font-size:16px; letter-spacing:.28em; }
.c-fv__in{ position:relative; z-index:5; max-width:var(--hero); margin:0 auto; padding:0 4vw;
  height:100%; display:flex; flex-direction:column; justify-content:center; }
.c-fv__copy{ width:min(620px,46%); }
.c-fv__copy h1{ margin:0; font-size:60px; }
/* 姿勢の一行。見出しより小さく、しかし本文より強く出す */
.c-fv__strap{ display:flex; align-items:center; gap:14px; margin:26px 0 0;
  font-family:var(--mincho); font-size:23px; letter-spacing:.06em; color:var(--green); }
.c-fv__sub{ margin:26px 0 0; padding-top:24px; border-top:1px solid var(--rule);
  font-size:16px; line-height:2.2; color:var(--ink2); }
.c-fv__sub b{ color:var(--ink); font-weight:500; }
.c-fv__copy .c-actions{ margin-top:34px; }
.c-fv__cap{ position:absolute; right:4vw; bottom:4vh; z-index:5; font-size:13px;
  letter-spacing:.22em; color:var(--ink2); }
.c-fv__cap::before{ content:""; display:inline-block; width:20px; height:1px;
  background:var(--green2); margin-right:12px; vertical-align:middle; }

@keyframes fvdraw{ to{ stroke-dashoffset:0; } }
@keyframes fvfade{ to{ opacity:1; } }
@keyframes fvrise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.j .c-fv__dw{ stroke-dasharray:1; stroke-dashoffset:1; animation:fvdraw 1.4s cubic-bezier(.6,.04,.3,1) forwards; }
.j .c-fv__dw--a{ animation-delay:.45s; animation-duration:1.2s; }   /* 外周を引く */
.j .c-fv__dw--b{ animation-delay:1.9s;  animation-duration:.6s; }   /* 分筆線 */
.j .c-fv__dw--c{ animation-delay:2.2s;  animation-duration:.8s; }   /* 寸法の控え */
.j .c-fv__fill{ opacity:0; animation:fvfade .9s ease 1.6s forwards; }  /* 面が満ちる */
.j .c-fv__fi{ opacity:0; animation:fvfade 1s ease forwards; }
.j .c-fv__fi--1{ animation-delay:2.7s; }
.j .c-fv__fi--2{ animation-delay:3.2s; }
.j .c-fv__pt{ opacity:0; animation:fvfade .5s ease forwards; }
.j .c-fv__pt--1{ animation-delay:2.70s; } .j .c-fv__pt--2{ animation-delay:2.80s; }
.j .c-fv__pt--3{ animation-delay:2.90s; } .j .c-fv__pt--4{ animation-delay:3.00s; }
.j .c-fv__pt--5{ animation-delay:3.10s; }
.j .c-fv__copy .l-eyebrow{ opacity:0; animation:fvrise 1.2s ease .5s forwards; }
.j .c-fv__copy h1{ opacity:0; animation:fvrise 1.4s ease .8s forwards; }
.j .c-fv__strap{ opacity:0; animation:fvrise 1.2s ease 1.2s forwards; }
.j .c-fv__sub{ opacity:0; animation:fvrise 1.2s ease 1.5s forwards; }
.j .c-fv__copy .c-actions{ opacity:0; animation:fvrise 1.2s ease 1.8s forwards; }
.j .c-fv__cap{ opacity:0; animation:fvrise 1.2s ease 3.4s forwards; }

/* ============ ② 名義を変えるだけなら（intro-16 静かな雑誌見開き） ============ */
.c-intro{ background-color:var(--white); }
/* 装飾：紙の質感。写真を敷くと被写体（枝や葉）が透けて意味を持ってしまうので、
   被写体の無いノイズだけをCSSで描く */
.c-intro__deco{ position:absolute; inset:0; z-index:0; pointer-events:none;
  /* 和紙のマクロ写真。被写体は写っていない。cover なので継ぎ目も出ない */
  background-image:url("../images/texture-washi.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  mix-blend-mode:multiply; opacity:.26; }
.c-intro .l-wrap{ position:relative; z-index:1; }
.c-intro__grid{ display:grid; grid-template-columns:47fr 53fr; gap:64px; align-items:stretch; }
.c-intro__body{ font-size:17px; line-height:2.15; }
.c-intro__body strong{ font-weight:500; }
.c-intro__pull{ font-family:var(--mincho); font-size:26px; line-height:1.85;
  margin:34px 0; padding:0 0 0 26px; border-left:2px solid var(--green); }
.c-intro__law{ margin-top:44px; padding:26px 28px; background-color:var(--sand); border:1px solid var(--rule); }
.c-intro__law p{ font-size:16px; line-height:2; color:var(--ink2); margin:0; }
.c-intro__law b{ color:var(--ink); }
.c-intro__fig{ position:relative; }
.c-intro__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.c-intro__fig figcaption{ margin-top:14px; font-size:13px; letter-spacing:.16em; color:var(--ink2); }

/* ============ ③ 4つの約束（features-04 罫線インデックス） ============ */
.c-promise__head{ display:grid; grid-template-columns:52fr 48fr; gap:64px; align-items:end;
  margin-bottom:56px; }
.c-promise__list{ border-top:1px solid var(--rule); }
/* ホバーで文字を動かさない。左の余白は最初から確保しておき、
   白い覆いの濃さだけを変える（opacity は滑らかに変わる） */
.c-promise__item{ position:relative; display:grid; grid-template-columns:88px 1fr 34px; gap:26px;
  align-items:center; padding:30px 30px 30px 22px; border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit; isolation:isolate; }
.c-promise__item > *{ position:relative; z-index:1; }
/* 白い覆い。濃さだけが変わるので、位置も文字も動かない */
.c-promise__item::after{ content:""; position:absolute; inset:0; z-index:0;
  background:#FFFFFF; opacity:0; transition:opacity .75s ease; }
.c-promise__item:hover::after{ opacity:.72; }
/* 左の罫線が上から下へ伸びる */
.c-promise__item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; z-index:2;
  background:var(--green); transform:scaleY(0); transform-origin:top center;
  transition:transform .7s cubic-bezier(.33,.9,.4,1); }
.c-promise__item:hover::before{ transform:scaleY(1); }
.c-promise__item:hover .c-promise__arrow{ transform:translateX(7px); }
@media (prefers-reduced-motion: reduce){
  .c-promise__item::after,.c-promise__item::before,.c-promise__arrow{ transition:none; }
}
.c-promise__no{ font-family:var(--mincho); font-size:16px; letter-spacing:.24em; color:var(--green); }
.c-promise__ttl{ font-family:var(--mincho); font-size:27px; letter-spacing:.05em; }
.c-promise__txt{ display:block; font-family:var(--gothic); font-size:16px;
  letter-spacing:.03em; color:var(--ink2); margin-top:8px; line-height:1.95; }
.c-promise__arrow{ font-size:20px; color:var(--green); text-align:right;
  transition:transform .7s cubic-bezier(.33,.9,.4,1); }

/* ============ ④ 4者の役割分担（写真つき 2×2） ============ */
.c-roles{ background-color:var(--white); }
.c-roles__grid{ display:grid; grid-template-columns:1fr 1fr; gap:38px 34px; margin-top:60px; }
.c-roles__card{ background-color:var(--paper); border:1px solid var(--rule); }
.c-roles__ph{ margin:0; overflow:hidden; }
.c-roles__ph img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.c-roles__card:hover .c-roles__ph img{ transform:scale(1.035); }
.c-roles__body{ position:relative; padding:30px 30px 28px; }
.c-roles__badge{ position:absolute; right:26px; top:-28px; width:56px; height:56px;
  background-color:var(--paper); border:1px solid var(--rule); display:grid; place-items:center; }
.c-roles__who{ font-family:var(--mincho); font-size:21px; letter-spacing:.04em; line-height:1.6;
  margin:0 68px 12px 0; }
.c-roles__who em{ display:block; font-style:normal; font-family:var(--gothic);
  font-size:13px; letter-spacing:.2em; color:var(--green); margin-bottom:8px; }
.c-roles__what{ font-size:16px; line-height:1.95; color:var(--ink2); margin:0 0 16px; }
.c-roles__lic{ display:inline-block; font-size:13px; letter-spacing:.12em; color:var(--green);
  border:1px solid var(--green2); padding:5px 12px; }
.c-roles__note{ margin-top:38px; padding:22px 26px; border:1px solid var(--rule); }
.c-roles__note p{ font-size:16px; line-height:1.95; color:var(--ink2); margin:0; }
/* 4者の記号。サイトと同じ製図の線で描く */
.c-roles__mark{ display:block; width:34px; height:34px; }
.c-roles__mark path,.c-roles__mark rect,.c-roles__mark circle{
  fill:none; stroke:var(--green); stroke-width:1.8;
  stroke-linecap:butt; stroke-linejoin:miter; vector-effect:non-scaling-stroke; }

/* ============ 全幅の写真帯 ============ */
.c-band{ position:relative; width:100%; }
.c-band img{ display:block; width:100%; height:440px; object-fit:cover; }
.c-band::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,28,26,.06) 0%, rgba(28,28,26,.10) 44%, rgba(28,28,26,.66) 100%); }
.c-band__cap{ position:absolute; left:0; right:0; bottom:38px; z-index:1; }
.c-band__cap p{ display:flex; align-items:flex-start; gap:16px; margin:0;
  font-family:var(--mincho); font-size:24px; line-height:1.75; color:var(--paper);
  text-shadow:0 1px 18px rgba(0,0,0,.4); }
.c-band__cap .l-mark{ margin-top:12px; border-color:var(--green2); }
.c-band__cap .l-mark::before,.c-band__cap .l-mark::after{ background:var(--green2); }

/* ============ ⑤ 8工程と日数（process-09 カレンダー） ============ */
.c-flow__head{ display:grid; grid-template-columns:1fr auto; gap:56px; align-items:end; }
.c-flow__pull{ text-align:right; padding-right:10px; }
.c-flow__pull b{ display:block; font-family:var(--mincho); font-size:104px; line-height:1;
  letter-spacing:.02em; color:var(--green); }
.c-flow__pull span{ display:block; font-size:13px; letter-spacing:.24em; color:var(--ink2); margin-top:10px; }
.c-flow__list{ margin-top:56px; border-top:1px solid var(--rule); }
.c-flow__step{ display:grid; grid-template-columns:60px 1fr 210px; gap:24px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--rule); }
.c-flow__step--key{ padding-left:18px; padding-right:8px; }
.c-flow__step--key{ background-color:var(--white); }
.c-flow__n{ font-family:var(--mincho); font-size:17px; color:var(--green); letter-spacing:.1em; }
.c-flow__t{ font-size:16.5px; line-height:1.8; }
.c-flow__t em{ font-style:normal; font-weight:700; }
.c-flow__d{ font-size:16px; letter-spacing:.06em; color:var(--ink2); text-align:right; padding-right:10px; }
.c-flow__step--key .c-flow__d{ color:var(--green); font-weight:700; }
.c-flow__bars{ display:flex; gap:6px; margin-top:10px; }
.c-flow__bar{ height:5px; background:var(--green2); flex:0 0 auto; }
.c-flow__step--key .c-flow__bar{ background:var(--green); }
.c-flow__say{ margin-top:40px; padding:30px 32px; background:var(--green); color:var(--paper); }
.c-flow__say p{ margin:0; font-family:var(--mincho); font-size:21px; line-height:1.9; }
.c-flow__say small{ display:block; font-family:var(--gothic); font-size:16px;
  line-height:1.95; color:rgba(247,245,239,.78); margin-top:14px; letter-spacing:.03em; }

/* ============ ⑥ 費用と見積書（pricing-09 見積り分解） ============ */
.c-cost{ background-color:var(--white); }
.c-cost__factors{ display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  margin-top:52px; border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.c-cost__factor{ padding:28px 30px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.c-cost__factor h3{ font-size:21px; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.c-cost__factor p{ font-size:16px; line-height:1.95; color:var(--ink2); margin:0; }
.c-cost__quote{ margin-top:64px; border:1px solid var(--ink); background-color:var(--paper); }
.c-cost__quote-hd{ display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; padding:22px 30px; border-bottom:1px solid var(--ink); flex-wrap:wrap; }
.c-cost__quote-hd h3{ font-size:22px; letter-spacing:.2em; }
.c-cost__quote-hd span{ font-size:13px; letter-spacing:.16em; color:var(--ink2); }
.c-cost__table{ width:100%; border-collapse:collapse; }
.c-cost__table th,.c-cost__table td{ padding:16px 30px; border-bottom:1px solid var(--rule);
  font-size:16px; text-align:left; font-weight:400; }
.c-cost__table td:nth-child(2){ text-align:center; white-space:nowrap; color:var(--ink2); font-size:16px; }
.c-cost__table td:nth-child(3){ text-align:right; white-space:nowrap; font-family:var(--mincho); font-size:17px; }
.c-cost__table tr.is-total td{ font-weight:700; background-color:var(--sand); border-bottom:1px solid var(--ink); }
.c-cost__table tr.is-total td:nth-child(3){ font-size:21px; }
.c-cost__quote-ft{ padding:22px 30px; }
.c-cost__quote-ft p{ font-size:16px; line-height:1.95; color:var(--ink2); margin:0 0 .6em; }

/* ============ ⑦ お隣の方へ（craft-14 約束状） ============ */
.c-nb{ background:var(--green); color:var(--paper); }
.c-nb .l-lead{ color:rgba(247,245,239,.8); }
.c-nb__qa{ margin-top:52px; border-top:1px solid rgba(247,245,239,.24); }
.c-nb__row{ display:grid; grid-template-columns:300px 1fr; gap:36px; padding:26px 0;
  border-bottom:1px solid rgba(247,245,239,.24); }
.c-nb__q{ font-family:var(--mincho); font-size:21px; letter-spacing:.04em; line-height:1.7;
  display:flex; align-items:flex-start; gap:12px; }
.c-nb__q .l-mark{ border-color:var(--green2); margin-top:9px; }
.c-nb__q .l-mark::before,.c-nb__q .l-mark::after{ background:var(--green2); }
.c-nb__a{ font-size:16px; line-height:2.05; color:rgba(247,245,239,.86); }
.c-nb__letter{ background-color:var(--paper); color:var(--ink);
  padding:56px 60px; max-width:840px; }
.c-nb__letter h3{ font-size:23px; letter-spacing:.14em; margin-bottom:34px; }
.c-nb__letter p{ font-size:16px; line-height:2.15; }
.c-nb__letter b{ font-weight:700; }
.c-nb__sign{ margin-top:40px; padding-top:24px; border-top:1px solid var(--rule);
  font-size:16px; line-height:2; color:var(--ink2); }
.c-nb__sign b{ display:block; font-family:var(--mincho); font-size:17px; color:var(--ink); font-weight:600; }


/* ② の書類写真 */
.c-intro__fig{ margin:38px 0 0; }
.c-intro__fig img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.c-intro__fig figcaption{ margin-top:14px; font-size:13px; letter-spacing:.14em; color:var(--ink2); }
.c-intro__fig figcaption::before{ content:""; display:inline-block; width:20px; height:1px;
  background:var(--green2); margin-right:12px; vertical-align:middle; }

/* ⑦ 封書の写真。手紙の紙面と幅をそろえる */
.c-nb__ph{ margin:64px auto 0; max-width:840px; }
.c-nb__ph img{ display:block; width:100%; aspect-ratio:21/8; object-fit:cover; }
.c-nb__letter{ margin:0 auto; }

/* ============ ⑧ 業務と料金（pricing-11 お品書き） ============ */
.c-price__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:52px; }
.c-price__col h3{ font-size:23px; padding-bottom:16px; border-bottom:2px solid var(--ink); }
.c-price__row{ display:flex; align-items:baseline; gap:12px; padding:14px 0;
  border-bottom:1px solid var(--rule); }
.c-price__row dt{ font-size:16px; white-space:nowrap; }
.c-price__row .dots{ flex:1 1 auto; border-bottom:1px dotted var(--rule); transform:translateY(-4px); }
.c-price__row dd{ margin:0; font-family:var(--mincho); font-size:18px; white-space:nowrap; }
.c-price__row--strong dt{ font-weight:700; }
.c-price__row--strong dd{ color:var(--green); }
.c-price__why{ display:block; font-size:13px; color:var(--ink2); letter-spacing:.02em;
  margin-top:6px; line-height:1.8; }
.c-price__notes{ margin-top:44px; padding:24px 28px; background-color:var(--white); border:1px solid var(--rule); }
.c-price__notes p{ font-size:16px; line-height:1.95; color:var(--ink2); margin:0 0 .6em; }
.c-price__notes b{ color:var(--ink); }

/* ============ ⑨ よくいただくご相談（faq-09 索引） ============ */
.c-faq{ background-color:var(--white); }
.c-faq__list{ margin-top:52px; border-top:1px solid var(--rule); }
.c-faq__item{ border-bottom:1px solid var(--rule); }
.c-faq__q{ width:100%; display:flex; align-items:center; gap:20px; padding:26px 0;
  background:none; border:0; cursor:pointer; text-align:left; font-family:var(--mincho);
  font-size:21px; letter-spacing:.04em; color:inherit; line-height:1.7; }
.c-faq__q span{ flex:1 1 auto; }
.c-faq__q i{ font-style:normal; font-family:var(--gothic); font-size:16px;
  letter-spacing:.16em; color:var(--green); flex:0 0 auto; width:34px; }
.c-faq__q em{ font-style:normal; flex:0 0 auto; width:16px; height:16px; position:relative; }
.c-faq__q em::before,.c-faq__q em::after{ content:""; position:absolute; background:var(--green);
  transition:transform .3s; }
.c-faq__q em::before{ left:0; right:0; top:50%; height:1.4px; transform:translateY(-50%); }
.c-faq__q em::after{ top:0; bottom:0; left:50%; width:1.4px; transform:translateX(-50%); }
.c-faq__q[aria-expanded="true"] em::after{ transform:translateX(-50%) scaleY(0); }
.c-faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.c-faq__item.is-open .c-faq__a{ grid-template-rows:1fr; }
.c-faq__a > div{ overflow:hidden; }
.c-faq__a p{ font-size:16px; line-height:2.05; color:var(--ink2);
  padding:0 0 28px 54px; margin:0; max-width:44em; }

/* ============ ⑩ お知らせ（news-03） ============ */
.c-news__grid{ display:grid; grid-template-columns:30fr 70fr; gap:64px; align-items:start; }
.c-news__list{ border-top:1px solid var(--rule); }
.c-news__item{ display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:center;
  padding:22px 0; border-bottom:1px dotted var(--rule); text-decoration:none; color:inherit; }
.c-news__item:hover .c-news__t{ color:var(--green); }
.c-news__item img{ width:150px; aspect-ratio:3/2; object-fit:cover; }
.c-news__meta{ font-size:13px; letter-spacing:.16em; color:var(--ink2); }
.c-news__t{ font-size:16.5px; line-height:1.8; margin-top:6px; transition:color .25s; }

/* ============ ⑪ 流れ＋最終CTA（cta-10 静かな受付） ============ */
.c-end{ background-color:var(--white); }
.c-end__steps{ margin-top:52px; display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.c-end__step{ padding:26px 24px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.c-end__step b{ display:block; font-family:var(--mincho); font-size:16px;
  letter-spacing:.24em; color:var(--green); margin-bottom:12px; }
.c-end__step p{ font-size:16px; line-height:1.9; margin:0; }
.c-end__cta{ margin-top:72px; padding:64px 56px; background:var(--green); color:var(--paper);
  text-align:center; }
.c-end__cta h3{ font-size:32px; line-height:1.7; margin-bottom:16px; }
.c-end__cta p{ font-size:16px; line-height:2; color:rgba(247,245,239,.82); max-width:40em; margin:0 auto 34px; }
.c-end__cta .c-actions{ justify-content:center; }
.c-end__cta .c-btn{ background-color:var(--paper); color:var(--ink); }
.c-end__cta .c-tel{ color:var(--paper); }
.c-end__cta .c-tel small{ color:rgba(247,245,239,.72); }
.c-end__cta .c-end__why{ margin-top:34px; font-size:16px; line-height:2; color:rgba(247,245,239,.72); }

/* ============ フッター（footer-03 CTA一体型＋NAP） ============ */
.c-ft{ background:var(--ink); color:var(--paper); padding:88px 0 40px; }
.c-ft a{ color:inherit; text-decoration:none; }
.c-ft a:hover{ color:var(--green2); }
.c-ft__top{ display:grid; grid-template-columns:36fr 64fr; gap:64px; }
.c-ft__brand{ display:flex; align-items:center; gap:14px; }
.c-ft__brand span{ font-family:var(--mincho); font-size:24px; letter-spacing:.14em; display:block; }
.c-ft__nap{ margin-top:22px; font-size:16px; line-height:2.05; color:rgba(247,245,239,.8); font-style:normal; }
.c-ft__map{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.c-ft__map h4{ font-size:13px; letter-spacing:.2em; color:var(--green2); margin:0 0 14px; font-weight:500; }
.c-ft__map ul{ list-style:none; margin:0; padding:0; }
.c-ft__map li{ font-size:16px; line-height:2.1; color:rgba(247,245,239,.78); }
.c-ft__legal{ margin-top:64px; padding-top:34px; border-top:1px solid rgba(247,245,239,.2); }
.c-ft__legal h4{ font-size:13px; letter-spacing:.2em; color:var(--green2); margin:0 0 20px; font-weight:500; }
.c-ft__firms{ width:100%; border-collapse:collapse; }
.c-ft__firms th,.c-ft__firms td{ padding:12px 16px 12px 0; text-align:left; font-weight:400;
  font-size:16px; line-height:1.8; color:rgba(247,245,239,.86);
  border-bottom:1px solid rgba(247,245,239,.14); vertical-align:top; }
.c-ft__firms th{ font-family:var(--mincho); font-size:16px; color:var(--paper); white-space:nowrap; }
.c-ft__end{ margin-top:34px; display:flex; justify-content:space-between; gap:20px;
  flex-wrap:wrap; font-size:13px; color:rgba(247,245,239,.6); }

/* ============ スクロール表示 ============
   隠すのは .rv-on が付いてから。このクラスは app.js が「自分で必ず出せる」と
   確認してから付ける。JSが落ちた場合は何も隠れない（本文が消えない）。 */
.rv-on .l-rv{ opacity:0; transform:translateY(22px); }
.rv-on .l-rv.is-in{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
@media print{ .l-rv{ opacity:1 !important; transform:none !important; } }

/* ============ レスポンシブ ============ */
/* 1181〜1320px：本文を16pxにしたぶんナビが横に詰まり、
   「お問い合わせ」に電話番号が重なる帯ができる。文字は16pxのまま、間隔と余白で逃がす */
@media (min-width:1181px) and (max-width:1320px){
  .c-hd__in{ padding:0 2.4vw; }
  .c-hd__nav{ gap:11px; }
  .c-hd__side{ gap:12px; }
}
@media (max-width:1180px){
  .c-hd__nav{ display:none; }
  .c-hd__burger{ display:block; }
  .c-hd__side{ display:none; }
  .c-hd__nav.is-open{ display:flex; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; background-color:var(--paper);
    border-bottom:1px solid var(--rule); padding:6px 7vw 24px; }
  .c-hd__nav.is-open a{ padding:15px 0; border-bottom:1px solid var(--rule); font-size:16px; }
  .c-hd__nav.is-open .c-hd__navcta{ display:flex; flex-direction:column; gap:16px;
    padding-top:22px; border:0; }
  .c-hd__nav.is-open .c-hd__navcta a{ border:0; padding:0; }
  .c-hd__nav.is-open .c-btn{ width:100%; }
  .c-roles__lane{ grid-template-columns:48px 1fr; gap:18px; }
  .c-roles__lic{ grid-column:2; text-align:left; }
  .c-roles__what{ grid-column:2; }
  .c-end__steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  body{ font-size:16px; }
  h1{ font-size:34px; }
  h2{ font-size:26px; }
  h3{ font-size:20px; }
  .l-sec{ padding:64px 0; }
  .l-wrap{ padding:0 7vw; }
  .c-fv{ height:auto; min-height:0; padding:0; }
  .c-fv__in{ padding:4.5vh 7vw 36vh; height:auto; }
  .c-fv__copy{ width:auto; }
  /* 上44%が .95〜.97 で、写真がほぼ見えなかった（本人指摘 2026-08-21）。
     文字が乗る帯だけ残して、写真を出す。数値は実測の読みやすさで決めている */
  .c-fv__scrim{ background:linear-gradient(180deg,
    rgba(247,245,239,.88) 0%, rgba(247,245,239,.82) 40%,
    rgba(247,245,239,.46) 62%, rgba(247,245,239,.10) 100%); }
  /* 覆いを薄くしたぶん、FV下部の薄い文字が写真に負ける。
     ここだけ濃くする（実測 3.3 → 基準の4.5未満だった） */
  .c-fv__copy .c-tel small{ color:var(--ink); }
  .c-fv__plan-pc{ display:none; }
  .c-fv__plan-sp{ display:block; position:absolute; left:0; right:0; z-index:2;
      top:auto; bottom:4vh; height:29vh; width:100%; }
  /* スマホでは図がFVの下端にあり、読み込み直後に動くと
     スクロールして着いた時にはもう描き終わっている（本人指摘 2026-08-21）。
     画面に入るまで止めておき、入ったら動かす。
     JSが動かない時に固まらないよう、app.js が保険で is-draw を必ず付ける */
  .j .c-fv__plan-sp .c-fv__dw,
  .j .c-fv__plan-sp .c-fv__fi,
  .j .c-fv__plan-sp .c-fv__pt{ animation-play-state:paused; }
  .j .c-fv__plan-sp.is-draw .c-fv__dw,
  .j .c-fv__plan-sp.is-draw .c-fv__fi,
  .j .c-fv__plan-sp.is-draw .c-fv__pt{ animation-play-state:running; }
  .c-fv__cap{ right:7vw; bottom:2vh; }
  .c-fv__copy h1{ font-size:32px; }
  .c-fv__strap{ font-size:18px; margin-top:20px; gap:10px; }
  .c-fv__copy .l-eyebrow{ font-size:13px; letter-spacing:.18em; }
  .c-fv .c-btn{ width:100%; }
  .c-intro__grid,.c-promise__head,.c-news__grid,.c-price__grid,.c-ft__top{ grid-template-columns:1fr; gap:38px; }
  .c-intro__pull{ font-size:20px; }
  .c-intro__head{ position:static; }
  .c-promise__item{ grid-template-columns:56px 1fr 20px; gap:16px; padding:26px 12px 26px 16px; }
  .c-roles__grid{ grid-template-columns:1fr; gap:30px; }
  .c-band img{ height:300px; }
  .c-band__cap p{ font-size:17px; gap:12px; }
  .c-band__cap{ bottom:26px; }
  .c-promise__ttl{ font-size:21px; }
  .c-flow__head{ grid-template-columns:1fr; gap:28px; }
  .c-flow__pull{ text-align:left; }
  .c-flow__pull b{ font-size:60px; }
  .c-flow__pull{ padding-right:0; }
  .c-flow__step{ grid-template-columns:44px 1fr; gap:14px; }
  .c-flow__d{ grid-column:2; text-align:left; }
  .c-cost__factors{ grid-template-columns:1fr; }
  .c-cost__table th,.c-cost__table td{ padding:13px 16px; font-size:16px; }
  .c-cost__quote-hd{ padding:18px 16px; }
  .c-cost__quote-ft{ padding:18px 16px; }
  .c-nb__row{ grid-template-columns:1fr; gap:12px; }
  .c-nb__letter{ padding:38px 7vw; }
  .c-nb__ph{ margin-top:40px; }
  .c-intro__fig{ margin-top:28px; }
  .c-faq__q{ font-size:17px; gap:12px; }
  .c-faq__a p{ padding-left:46px; }
  .c-news__item{ grid-template-columns:96px 1fr; gap:16px; }
  .c-news__item img{ width:96px; }
  .c-end__steps{ grid-template-columns:1fr; }
  .c-end__cta{ padding:44px 7vw; }
  /* 「持ち越さないために。」を切らずに1行へ収める（32pxだと画面をはみ出す） */
  .c-end__cta h3{ font-size:26px; }
  /* 「何も決めなくて大丈夫です。」は13文字。26pxだと390px幅で入らず
     「決めなくて／大丈夫です。」と割れる。**この見出しだけ**一段下げる */
  .c-end > .l-wrap > .l-rv > h2,
  .c-end__head h2{ font-size:24px; }
  .c-ft__map{ grid-template-columns:1fr 1fr; gap:24px; }
  .c-ft__firms th,.c-ft__firms td{ display:block; padding:6px 0; }
  .c-ft__firms tr{ display:block; padding:14px 0; border-bottom:1px solid rgba(247,245,239,.14); }
  .c-ft__firms th,.c-ft__firms td{ border:0; }
  .l-eyebrow{ letter-spacing:.2em; }
  /* 料金の行：業務名が長いと nowrap で横にはみ出すので、2カラムに畳む */
  .c-price__row{ display:grid; grid-template-columns:1fr auto; column-gap:14px; align-items:baseline; }
  .c-price__row dt{ white-space:normal; }
  .c-price__row .dots{ display:none; }
  .c-price__why{ grid-column:1 / -1; }
}

@media (max-width:768px){
  /* お見積書：3列のままだと項目名の列がつぶれて縦に伸びる。
     項目名を1行占有させ、数量と金額を下段の左右に置く */
  .c-cost__table, .c-cost__table tbody{ display:block; width:100%; }
  .c-cost__table tr{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
    padding:16px 16px; border-bottom:1px solid var(--rule); }
  .c-cost__table td{ display:block; border:0; padding:0; }
  .c-cost__table td:first-child{ flex:1 0 100%; font-size:16px; line-height:1.75; }
  .c-cost__table td:nth-child(2){ flex:0 0 auto; margin-right:auto; text-align:left; }
  .c-cost__table td:nth-child(3){ flex:0 0 auto; text-align:right; font-size:18px; }
  .c-cost__table tr.is-total{ background-color:var(--sand); border-bottom:1px solid var(--ink); }
  .c-cost__table tr.is-total td:nth-child(3){ font-size:21px; }
  .c-cost__table caption{ display:block; width:100%; text-align:left; padding:16px 16px 0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .j .c-fv__dw{ animation:none; stroke-dashoffset:0; }
  .j .c-fv__fi,.j .c-fv__pt,.j .c-fv__fill{ animation:none; opacity:1; }
  .j .c-fv__copy .l-eyebrow,.j .c-fv__copy h1,.j .c-fv__strap,.j .c-fv__sub,
  .j .c-fv__copy .c-actions,.j .c-fv__cap{ animation:none; opacity:1; transform:none; }
  .rv-on .l-rv{ opacity:1; transform:none; }
}

/* ============ フォーム安全弁（将来クライアントが手貼りしても崩れないように） ============ */
input,textarea,select{ max-width:100%; box-sizing:border-box; }
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{ width:100%; font-size:16px; }
/* 320〜360px：見出しの1行が入りきらない。余白と見出しだけ一段下げる */
@media (max-width:360px){
  .l-wrap{ padding:0 5vw; }
  .c-fv__copy h1{ font-size:30px; }
  h2{ font-size:23px; }
  /* 字間を詰めて、1文字だけ次行に落ちるのを防ぐ */
  .l-eyebrow{ letter-spacing:.16em; }
  .c-fv__copy .l-eyebrow{ letter-spacing:.1em; }
  .c-fv__strap{ font-size:16px; letter-spacing:0; }
  /* 320px では、語のかたまりが1行に入りきらず語中で割れる。
     「土地の測量に／ともなう」「ご兄弟で分ける話になる／と、」が出ていた */
  .c-nb__letter h3{ font-size:20px; letter-spacing:.08em; }
  .c-intro__pull{ font-size:18px; }
}