:root{
  --base:#160F0B;
  --base-deep:#0B0705;
  --base-deep-rgb:11,7,5;
  --text:#F4F0E8;
  --text-muted:#8B5A34;
  --surface:#EEE7DC;
  --accent:#FF8C00;
  --line-rgb:255,255,255;
  --font-heading:'Noto Serif JP', serif;
  --font-body:'Noto Sans JP', sans-serif;
}
/* paint-site テンプレート 共通スタイル
   色・フォントは config.json (design.colors / design.fontDirection) から
   :root カスタムプロパティとしてビルド時に注入される。
   hp_design_rules.md 準拠: アイコン不使用 / モバイルファースト / 角丸カード禁止 /
   3カラムアイコングリッド禁止 / グラデーション文字禁止 / 絵文字禁止 */

*{box-sizing:border-box;margin:0;padding:0}

:root{--header-h:76px}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-body,'Noto Sans JP',sans-serif);
  background:var(--base,#17130F);
  color:var(--text,#F4F0E8);
  line-height:1.85;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{font:inherit;background:none;border:none;cursor:pointer}
input,textarea{font:inherit;color:inherit;background:transparent}

.section-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:18px;
}
.section-label__en{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-muted,#8B5A34);
}
.section-label__heading{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:normal;
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:0.04em;
  color:var(--text,#F4F0E8);
  text-transform:none;
  margin:0;
}

.text-link{
  display:inline-block;
  margin-top:32px;
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  opacity:0.85;
}
.text-link:hover{opacity:1}

.cta-button{
  display:inline-block;
  padding:16px 36px;
  border:1px solid var(--text,#F4F0E8);
  text-decoration:none;
  font-size:0.85rem;
  letter-spacing:0.1em;
  text-align:center;
  transition:background 0.2s ease,color 0.2s ease;
}
.cta-button:hover{background:var(--text,#F4F0E8);color:var(--base,#17130F)}
.cta-button--tel,.cta-button--accent{border-color:var(--accent,#FF8C00);color:var(--accent,#FF8C00)}
.cta-button--tel:hover,.cta-button--accent:hover{background:var(--accent,#FF8C00);color:var(--base,#17130F)}

/* ---------- header ---------- */

/* FVの写真の上に常時重ねるため固定表示にする。透明度はスクロール量に応じて
   .site-header--scrolled(JSで付与)に切り替え、写真上でも下層コンテンツ上でも
   文字が読めるようにする。写真が隠れる分は各ページの先頭セクション側で
   var(--header-h)ぶんの上余白を確保する(FVはフルブリードのままでよい)。 */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 20px;
  border-bottom:1px solid rgba(var(--line-rgb),0.08);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:rgba(var(--base-deep-rgb),0.38);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background-color 0.3s ease;
}
.site-header--scrolled{
  background:rgba(var(--base-deep-rgb),0.92);
  border-bottom-color:rgba(var(--line-rgb),0.1);
}
.site-header__name{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:1rem;
  letter-spacing:0.08em;
  text-decoration:none;
}
.site-header__right{display:flex;align-items:center;gap:20px}
.site-header__phone{
  font-size:0.8rem;
  letter-spacing:0.03em;
  color:var(--accent,#FF8C00);
  text-decoration:none;
  white-space:nowrap;
}

/* モバイルのナビ開閉はチェックボックスハック(JS不使用・アイコン不使用)。
   <details>の閉じた中身はChromeがcontent-visibility:hiddenで隠し、authorのCSSでは
   上書きできない(意図的な仕様)ため使わない。 */
.site-nav__toggle{position:absolute;left:-9999px}

.site-nav{position:relative}
.site-nav__summary{
  display:inline-block;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  padding:6px 0;
}
.site-nav__list{
  display:none;
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  background:var(--base-deep,#0D0D0C);
  border:1px solid rgba(var(--line-rgb),0.1);
  padding:18px 22px;
  flex-direction:column;
  gap:14px;
  min-width:180px;
}
.site-nav__toggle:checked ~ .site-nav__list{display:flex}
.site-nav__list a{
  font-size:0.85rem;
  letter-spacing:0.03em;
  text-decoration:none;
  white-space:nowrap;
}
.site-nav__list a:hover{color:var(--accent,#FF8C00)}

/* 768px以上では常時展開したインラインナビにする */
@media(min-width:768px){
  .site-nav__summary{display:none}
  .site-nav__list{
    display:flex;
    position:static;
    flex-direction:row;
    background:none;
    border:none;
    padding:0;
    gap:28px;
    min-width:0;
  }
}

/* ---------- FV ---------- */

/* svh未対応ブラウザ向けに100vhを先に指定し、対応ブラウザでは100svhで上書きする。
   ヘッダーはposition:fixedでフローから外れているため、FVは常にビューポート全体(画面いっぱい)を占める。 */
.fv{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden}
.fv__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* コピーが乗る下部と、固定ヘッダーが乗る上部を重点的に暗くする。写真自体は変えず、
   オーバーレイの濃さだけで可読性と高級感(締まった印象)を両立させる。 */
.fv__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.32) 50%, rgba(0,0,0,0.55));
}
.fv__content{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 20px 64px;
  max-width:640px;
  color:#fff;
}
.fv__en{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.75rem;
  letter-spacing:0.12em;
  opacity:0.85;
  margin-bottom:14px;
}
.fv__heading{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:300;
  /* 狭い画面でも各行が折り返さないよう、下限をかなり低く取って画面幅に合わせて縮む
     余地を持たせる(white-space:nowrapと合わせて使う)。 */
  font-size:clamp(1.1rem, calc(6vw - 3px), 3.2rem);
  line-height:1.4;
  letter-spacing:0.08em;
  margin-bottom:24px;
  white-space:nowrap;
}
.fv__lead{
  font-size:0.9rem;
  line-height:2;
  opacity:0.88;
  max-width:30em;
}

/* z-index:0を指定してこのspan自身に新しいスタッキングコンテキストを作る。
   そうすることで子要素(.fv__underline)のz-index:-1が「このspanの中でだけ文字の背面に回る」
   効果になり、FVの写真そのものの背面まで沈み込むのを防げる。 */
.fv__underline-wrap{position:relative;display:inline-block;line-height:1;z-index:0}
/* 刷毛で一筆引いたような線。まっすぐな矩形ではなく、太さにムラのある塗りのSVG形状を
   clip-pathで左から右へ徐々に見せることで「描く」動きにする(transform:scaleXだと
   形そのものが横に伸び縮みして見えてしまうため使わない)。preserveAspectRatio="none"で
   見出しの実際の幅(可変)にぴったり合わせて伸ばす。z-index:-1で文字の背面(下に敷かれた
   刷毛の跡)に回す。 */
.fv__underline{
  position:absolute;
  left:0;
  bottom:-0.16em;
  width:100%;
  height:0.5em;
  overflow:visible;
  z-index:-1;
  clip-path:inset(0 100% 0 0);
  animation:fv-underline-draw 2.2s cubic-bezier(0.25,0.1,0.25,1) 1s forwards;
}
.fv__underline path{fill:var(--accent,#FF8C00)}
@keyframes fv-underline-draw{
  to{clip-path:inset(0 0% 0 0)}
}
@media(prefers-reduced-motion:reduce){
  .fv__underline{animation:none;clip-path:inset(0 0% 0 0)}
}

/* FV右側の縦書きコピー。画面中央付近から下に伸ばして配置する(top:50%起点、
   下方向にだけ伸びるようtransformでYの起点を上端に置く)。.fv__contentが画面幅を
   使うスマホ・タブロイド幅では文字が窮屈になるため、デスクトップ(1024px〜)のみ表示する。
   両サイドの細い金線は下地の写真の明暗によらず視認できるよう、暗すぎないゴールド
   (#C9A961)を採用(#B8973Fだと暗い写真の上で沈んで見えたため)。 */
.fv__vertical{
  display:none;
  position:absolute;
  top:50%;
  right:56px;
  z-index:1;
}
.fv__vertical-text{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:300;
  font-size:0.85rem;
  letter-spacing:0.3em;
  line-height:2.4;
  color:var(--text,#F4F0E8);
  padding:0 22px;
  margin:0;
  border-left:1px solid #C9A961;
  border-right:1px solid #C9A961;
}
@media(min-width:1024px){
  .fv__vertical{display:block}
}

/* ---------- section共通の余白リズム ---------- */

.works-preview,.founder,.company-info,.contact,.signs-change,
.before-works-section{
  padding:120px 20px;
  max-width:820px;
  margin:0 auto;
}
.before-works-section{padding:0;max-width:none}
/* .before-works-sectionはpadding:0(フルブリード)なので、直前セクションとの間隔が
   他のセクション間(上下120px)と揃うように上マージンだけ補う。 */
#services.before-works-section{margin-top:120px}

/* 写真付きセクション(対応できる工事/施工の流れ/料金の目安)は
   写真とテキストを左右に並べる(hp_design_rules.md準拠: 写真とテキストは独立ブロックで置く)。
   セクションごとに.split-section--reverseで左右を入れ替え、単調にならないようにする。
   スマホでは縦積み。写真を小さくしすぎないよう、デスクトップでもほぼ半々の幅を確保する。 */
.split-section{
  display:flex;
  flex-direction:column;
  gap:40px;
  padding:100px 20px;
  max-width:820px;
  margin:0 auto;
}
/* .split-section単体でクラスを重ねているのは意図的。768px/1440pxのメディアクエリ内で
   .split-section(単一クラス)がmax-widthを再定義しているため、詳細度が同じ単一クラスの
   ままだとソース順で負けてデスクトップで820pxが効かなくなる。詳細度を上げて確実に勝たせる。 */
.split-section.split-section--text-only{max-width:820px}
.split-section__media{flex:0 0 auto;width:100%}
.split-section__photo{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.split-section__body{flex:1 1 0;min-width:0}

@media(min-width:768px){
  .split-section{
    flex-direction:row;
    align-items:center;
    gap:64px;
    max-width:920px;
    padding:130px 20px;
  }
  .split-section--reverse{flex-direction:row-reverse}
  .split-section__media{flex:0 0 46%}
  .split-section__body{flex:1 1 0}
}

@media(min-width:1440px){
  .split-section{max-width:1100px;gap:88px}
}

/* ---------- 写真背景の見せ場+CTA(対応できる工事/施工の流れ) ----------
   hp_design_rules.mdの「写真へのテキスト重ねはFVのみ」の例外として、section-paint-overと
   同じ考え方で要所の見せ場に限って使う(全セクションをこの形にはしない)。
   高さはFV(100svh)より低い60〜70vh程度。svh非対応ブラウザ向けにvhを先に指定する。 */
.photo-cta{
  position:relative;
  height:65vh;
  height:65svh;
  min-height:380px;
  overflow:hidden;
}
.photo-cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-cta__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.62));
}
.photo-cta__content{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:14px;
  padding:20px 20px 48px;
  max-width:520px;
  color:#fff;
}
.photo-cta__label{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  opacity:0.85;
}
.photo-cta__heading{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:clamp(1.5rem,4vw,2.1rem);
  letter-spacing:0.03em;
  margin:0;
}
.photo-cta__text{font-size:0.9rem;line-height:1.9;opacity:0.92;max-width:32em;margin:0}
.photo-cta .cta-button{margin-top:6px}

@media(min-width:1024px){
  .photo-cta__content{padding:64px}
}

/* ---------- 施工の流れ(詳細ページ) ---------- */

.flow-detail{padding:0 20px 140px;max-width:780px;margin:0 auto}

.flow-list__item{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:40px 0;
  border-top:1px solid rgba(var(--line-rgb),0.1);
}
.flow-list__item:last-child{border-bottom:1px solid rgba(var(--line-rgb),0.1)}
.flow-list__media{flex:0 0 auto}
.flow-list__photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.flow-list__body{flex:1;min-width:0}
.flow-list__index{
  display:block;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:1.1rem;
  color:var(--text-muted,#8B5A34);
  margin-bottom:10px;
}
.flow-list__item h2{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.1rem;
  margin-bottom:10px;
}
.flow-list__item p{font-size:0.9rem;line-height:1.9;opacity:0.85}

@media(min-width:768px){
  .flow-list__item{flex-direction:row;align-items:flex-start;gap:40px;padding:48px 0}
  .flow-list__media{flex:0 0 300px}
  .flow-list__body{flex:1}
}

/* ---------- 塗り替えが必要なサイン ----------
   4点を写真+テキストの独立ブロックで並べる教育セクション。写真が主役のため
   カード背景・角丸・ドロップシャドウは付けない(hp_design_rules.md準拠、
   「3カラム角丸カード+アイコン」の定番型とは別物にする)。 */
.signs{padding:120px 20px;max-width:960px;margin:0 auto}
.signs__intro{font-size:0.92rem;opacity:0.85;max-width:32em;margin-bottom:56px}
.signs__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:56px 40px;
}
.signs__item{display:flex;flex-direction:column;gap:22px}
.signs__photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.signs__label{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted,#8B5A34);
  margin-bottom:10px;
}
.signs__item h3{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.02em;
  margin-bottom:14px;
}
.signs__item p:last-child{font-size:0.86rem;line-height:1.9;opacity:0.85}

@media(min-width:768px){
  .signs{max-width:920px;padding:150px 20px}
  .signs__intro{margin-bottom:64px}
  .signs__grid{grid-template-columns:repeat(2,1fr);gap:64px 48px}
}

@media(min-width:1440px){
  .signs{max-width:1240px;padding:180px 20px}
  .signs__grid{grid-template-columns:repeat(4,1fr);column-gap:56px;row-gap:0}
}

/* ---------- 代表のこだわり ---------- */

.founder__layout{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.founder__photo-wrap{flex:0 0 auto;max-width:220px}
.founder__photo{width:100%;aspect-ratio:3/4;object-fit:cover}
.founder__body{flex:1}
.founder__role{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.03em;
  margin-bottom:6px;
}
.founder__career{
  font-size:0.8rem;
  opacity:0.65;
  letter-spacing:0.02em;
  margin-bottom:24px;
}
.founder__message{font-size:0.95rem;line-height:2;opacity:0.9;max-width:34em}

@media(min-width:768px){
  .founder__layout{flex-direction:row;gap:56px;align-items:flex-start}
}

/* ---------- 塗り替えでどう変わるか ---------- */

.signs-change p{font-size:0.95rem;line-height:2;opacity:0.9;max-width:34em}

/* 職人写真つきの版(craftsman-work.jpgがある場合)。フルブリード写真+左が濃い横方向の
   グラデーション(テキスト側を濃く、写真の見せたい右側を薄く)で、明るい昼間の現場写真を
   サイトの黒基調になじませる。高さは固定vhではなくテキスト量+paddingで自然に決まる
   ようにする(段落の長さが変わっても間延び・窮屈にならないため)。 */
.signs-change.signs-change--photo{
  position:relative;
  overflow:hidden;
  max-width:none;
  padding:0;
  margin:0;
  min-height:460px;
}
/* 横長の実写を縦長のスマホ画面でcoverすると職人の姿だけで画面が埋まってしまうため、
   ブレークポイントごとにobject-positionを変え、スマホでは壁面(テキスト側)を
   多めに残す構図にする。 */
.signs-change__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:22% 40%;
}
.signs-change__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(0,0,0,0.92), rgba(0,0,0,0.68) 48%, rgba(0,0,0,0.45) 100%);
}
.signs-change__content{
  position:relative;
  z-index:1;
  max-width:520px;
  padding:100px 20px;
  color:#fff;
}
.signs-change__content .section-label__en{color:#fff;opacity:0.85}
.signs-change__content .section-label__heading{color:#fff}
.signs-change__content p{font-size:0.95rem;line-height:2;opacity:0.94;max-width:32em}

@media(min-width:768px){
  .signs-change__bg{object-position:50% 40%}
  .signs-change__content{padding:130px 48px}
}
@media(min-width:1024px){
  .signs-change__bg{object-position:63% 45%}
  .signs-change.signs-change--photo{min-height:560px}
  .signs-change__content{padding:150px 64px}
}
@media(min-width:1440px){
  .signs-change.signs-change--photo{min-height:640px}
  .signs-change__content{padding:170px 96px;max-width:600px}
}

/* ---------- 選ばれる理由 ----------
   3つを縦に並べるテキスト主体のセクション。アイコン付き3カラムカードにしないため、
   区切り線+余白だけで項目を分ける(カード背景・角丸・ドロップシャドウは使わない)。
   区切り線(.strengths__item)はセクション全幅のまま保ち、内側の.strengths__item-inner
   だけを左右交互(左寄せ→右寄せ→左寄せ)にずらして動きを出す。テキストの折り返し自体は
   どちらも左揃えのまま(日本語の右揃え本文は読みにくくなるため、位置だけを振る)。 */
.strengths{padding:120px 20px;max-width:820px;margin:0 auto}
.strengths__item{padding:48px 0;border-top:1px solid rgba(var(--line-rgb),0.1)}
.strengths__item:last-child{border-bottom:1px solid rgba(var(--line-rgb),0.1)}
.strengths__item-inner{max-width:30em}
.strengths__item--right .strengths__item-inner{margin-left:auto}
.strengths__label{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted,#8B5A34);
  margin-bottom:14px;
}
.strengths__item h3{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.6;
  letter-spacing:0.02em;
  margin-bottom:18px;
  max-width:22em;
}
.strengths__item p{font-size:0.92rem;line-height:2;opacity:0.88;max-width:36em}

/* 写真ありの項目のみ、テキスト+写真の2カラムに広げる(横並びのカード化はしない。
   1項目=1行のまま、founderセクションと同じ「テキスト+小さめ写真」の考え方を流用)。
   写真の無い項目は従来通りテキストのみの単一カラム。 */
.strengths__item--with-photo .strengths__item-inner{
  max-width:100%;
  display:flex;
  align-items:flex-start;
  gap:40px;
}
/* 641px以上に限定する。メディアクエリなしだと、このセレクタ(クラス3つ)の詳細度が
   下の@media(max-width:640px)側のcolumnルール(クラス2つ)より高くなり、幅を狭めても
   このrow-reverseが勝ち続けてしまう(--right項目だけモバイルでcolumnにならないバグの原因)。 */
@media (min-width:641px){
  .strengths__item--with-photo.strengths__item--right .strengths__item-inner{
    margin-left:0;
    flex-direction:row-reverse;
  }
}
.strengths__text{flex:1;min-width:0}
.strengths__photo{
  flex:0 0 220px;
  width:220px;
  aspect-ratio:4/3;
  object-fit:cover;
}
@media (max-width:640px){
  .strengths__item--with-photo .strengths__item-inner{flex-direction:column;gap:20px}
  .strengths__photo{width:100%;flex:none}
}

/* ---------- 料金 ---------- */

.pricing-list{border-top:1px solid rgba(var(--line-rgb),0.1)}
.pricing-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px 0;
  border-bottom:1px solid rgba(var(--line-rgb),0.1);
}
.pricing-row dt{font-size:0.92rem}
.pricing-row dd{font-size:1.1rem;font-family:var(--font-heading,'Noto Serif JP',serif)}
.pricing-row__note{
  display:block;
  font-family:var(--font-body,'Noto Sans JP',sans-serif);
  font-size:0.75rem;
  opacity:0.6;
  margin-top:4px;
}
.pricing-note{font-size:0.8rem;opacity:0.65;margin-top:24px}

@media(min-width:768px){
  .pricing-row{flex-direction:row;justify-content:space-between;align-items:baseline}
}

/* ---------- よくある質問 ----------
   通常時は質問のみ、クリック/タップまたはPCでのホバーで回答が展開されるアコーディオン。
   JS不使用のチェックボックスハック(site-nav__toggleと同じ手法)。回答はHTML上は常に
   存在し、grid-template-rowsのアニメーションで見た目だけ折りたたむため、FAQPage構造化
   データ(質問・回答の全文)と表示内容は一致したままになる(生成AIは非表示状態でも
   HTML上の全文を読める)。アイコン(+/シェブロン等)は使わず、questionの下線と色の変化
   だけで開閉可能であることを示す(hp_design_rules.md準拠)。 */
.faq{padding:120px 20px;max-width:820px;margin:0 auto}
.faq__item{padding:36px 0;border-top:1px solid rgba(var(--line-rgb),0.1)}
.faq__item:last-child{border-bottom:1px solid rgba(var(--line-rgb),0.1)}
.faq__item h3{margin:0}
.faq__toggle{position:absolute;left:-9999px}
.faq__question{
  display:inline-block;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.02em;
  cursor:pointer;
  border-bottom:1px solid rgba(var(--line-rgb),0.3);
  padding-bottom:4px;
  transition:color 0.2s ease,border-color 0.2s ease;
}
.faq__question:hover{color:var(--accent,#FF8C00);border-color:var(--accent,#FF8C00)}
.faq__answer-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.3s ease;
}
.faq__answer-inner{overflow:hidden;min-height:0}
.faq__answer{font-size:0.9rem;line-height:1.9;opacity:0.85;max-width:36em;padding-top:16px}
.faq__toggle:checked ~ .faq__answer-wrap,
.faq__item:hover .faq__answer-wrap{
  grid-template-rows:1fr;
}

/* ---------- 会社概要 ---------- */

.company-info__list{border-top:1px solid rgba(var(--line-rgb),0.1)}
.company-info__row{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 0;
  border-bottom:1px solid rgba(var(--line-rgb),0.1);
  font-size:0.88rem;
}
.company-info__row dt{opacity:0.6;font-size:0.78rem;letter-spacing:0.03em}
.company-info__row a{color:var(--accent,#FF8C00);text-decoration:none}

@media(min-width:768px){
  .company-info__row{flex-direction:row;gap:24px}
  .company-info__row dt{flex:0 0 8em}
  .company-info__row dd{flex:1}
}

/* ---------- お問い合わせ(LINE誘導) ---------- */

.contact__lead{font-size:0.9rem;opacity:0.85;margin-bottom:32px;max-width:32em}
.contact__cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  margin-bottom:48px;
}

/* QRコードはスマホでは(カメラで直接読めないため)表示せず、PC幅でのみ表示する */
.contact__qr{display:none}
@media(min-width:768px){
  .contact__qr{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .contact__qr img{width:160px;height:160px;border:1px solid rgba(var(--line-rgb),0.15)}
  .contact__qr-caption{font-size:0.78rem;opacity:0.7}
}

@media(min-width:480px){
  .contact__cta{flex-direction:row;align-items:center}
}

/* 以下、旧メールフォーム用スタイル。api/contact.js・assets/contact-form.jsは
   残しているが、トップページからは呼び出していないため未使用(将来の再利用のため保持)。 */
.contact-form{display:flex;flex-direction:column;gap:20px;max-width:520px}
.contact-form__row{display:flex;flex-direction:column;gap:8px}
.contact-form__row label{font-size:0.82rem;letter-spacing:0.02em;opacity:0.8}
.contact-form__row .required{
  font-size:0.68rem;
  color:var(--accent,#FF8C00);
  margin-left:0.6em;
  letter-spacing:0.05em;
}
.contact-form__row input,.contact-form__row textarea{
  border:1px solid rgba(var(--line-rgb),0.2);
  padding:12px 14px;
  font-size:0.9rem;
  resize:vertical;
}
.contact-form__row input:focus,.contact-form__row textarea:focus{
  outline:none;
  border-color:var(--accent,#FF8C00);
}
.contact-form__honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}
.contact-form .cta-button{align-self:flex-start;margin-top:8px}
.contact-form__status{font-size:0.82rem;min-height:1.4em;opacity:0.85}
.contact-form__status--error{color:#d98a7a}

/* ---------- footer ---------- */

.site-footer{
  border-top:1px solid rgba(var(--line-rgb),0.1);
  padding:64px 20px 40px;
  background:var(--base-deep,#0D0D0C);
}
.site-footer__inner{
  max-width:960px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:32px;
}
.site-footer__name{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:1rem;
  margin-bottom:8px;
}
.site-footer__address{font-size:0.8rem;opacity:0.7;margin-bottom:8px}
.site-footer__phone{color:var(--accent,#FF8C00);text-decoration:none;font-size:0.85rem}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:18px}
.site-footer__nav a{font-size:0.78rem;text-decoration:none;opacity:0.75}
.site-footer__nav a:hover{opacity:1}
.site-footer__copyright{
  max-width:960px;
  margin:32px auto 0;
  font-size:0.7rem;
  opacity:0.45;
  letter-spacing:0.03em;
}

@media(min-width:768px){
  .site-footer__inner{flex-direction:row;justify-content:space-between;align-items:flex-start}
}

/* ---------- hero (サブページ上部の簡易ヒーロー) ---------- */

.hero{padding:calc(var(--header-h) + 40px) 20px 64px;max-width:960px;margin:0 auto}
.hero__label{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.75rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--text-muted,#8B5A34);
  margin-bottom:14px;
}
.hero__heading{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:clamp(2rem,6vw,3rem);
  letter-spacing:0.04em;
  margin-bottom:24px;
}
.hero__lead{
  font-size:0.95rem;
  line-height:2;
  max-width:32em;
  opacity:0.8;
}

/* ---------- 一覧ページ: 施工事例リスト ---------- */

.case-list-section{padding:0 20px 140px;max-width:960px;margin:0 auto}
.case-row{border-top:1px solid rgba(var(--line-rgb),0.1)}
.case-row:last-child{border-bottom:1px solid rgba(var(--line-rgb),0.1)}

.case-row__link{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:40px 0;
  text-decoration:none;
}
@media(min-width:768px){
  .case-row__link{flex-direction:row;align-items:center;gap:48px}
}

.photo{width:100%;aspect-ratio:4/3;object-fit:cover;background:rgba(var(--line-rgb),0.06)}
.case-row__link .photo{flex:0 0 auto}
@media(min-width:768px){
  .case-row__link .photo{width:38%}
}
.photo-placeholder{
  background:repeating-linear-gradient(
    135deg,
    rgba(var(--line-rgb),0.04),
    rgba(var(--line-rgb),0.04) 2px,
    rgba(var(--line-rgb),0.07) 2px,
    rgba(var(--line-rgb),0.07) 4px
  );
}

.case-row__body{flex:1}
.case-row__label{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.75rem;
  letter-spacing:0.1em;
  color:var(--text-muted,#8B5A34);
  margin-bottom:10px;
}
.case-row__heading{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:0.02em;
  margin-bottom:12px;
}
.case-row__meta{font-size:0.85rem;opacity:0.75;margin-bottom:18px}
.case-row__cta{
  display:inline-block;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}
.works-preview .case-list{margin-bottom:8px}
.works-preview__empty{opacity:0.7;font-size:0.9rem;padding:24px 0}

/* ---------- 詳細ページ ---------- */

.back-link{
  display:block;
  margin:40px auto 0;
  max-width:780px;
  padding:0 20px;
  font-size:0.8rem;
  letter-spacing:0.04em;
  opacity:0.7;
  text-decoration:none;
}

.case-detail{max-width:780px;margin:0 auto;padding:calc(var(--header-h) + 24px) 20px 140px}
.case-detail__label{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.75rem;
  letter-spacing:0.1em;
  color:var(--text-muted,#8B5A34);
  margin-top:32px;
}
.case-detail__heading{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:clamp(1.8rem,5vw,2.4rem);
  letter-spacing:0.03em;
  margin:14px 0 56px;
}

.detail-photos{display:flex;flex-direction:column;gap:24px;margin-bottom:56px}
@media(min-width:768px){
  .detail-photos{flex-direction:row}
}
.detail-photos__item{flex:1}
.detail-photos__item figcaption{
  margin-top:10px;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-style:italic;
  font-size:0.7rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--text-muted,#8B5A34);
}

.info-table{border-top:1px solid rgba(var(--line-rgb),0.1);margin-bottom:56px}
.info-row{
  display:flex;
  gap:24px;
  padding:16px 0;
  border-bottom:1px solid rgba(var(--line-rgb),0.1);
}
.info-row__label{flex:0 0 7em;font-size:0.8rem;opacity:0.6;letter-spacing:0.03em}
.info-row__value{flex:1;font-size:0.9rem}

.detail-comment{font-size:0.95rem;line-height:2;margin-bottom:56px;white-space:pre-line}

.cta-group{display:flex;flex-direction:column;gap:16px}
@media(min-width:768px){
  .cta-group{flex-direction:row}
}
.cta-group .cta-button{flex:1}

/* ---------- オプションページ: 工法・塗料 / 料金の詳細 ---------- */

.methods-detail,.pricing-detail{
  padding:0 20px 140px;
  max-width:780px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:64px;
}
.methods-detail__item h2,.pricing-detail__category h2{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.4rem;
  margin-bottom:20px;
}
.methods-detail__item p{font-size:0.92rem;line-height:2;opacity:0.88}
.pricing-detail__category .pricing-list{margin-top:8px}

/* ---------- 1024px以上: セクション内側の余白・幅を少し広げる ---------- */

@media(min-width:1024px){
  .works-preview,.founder,.company-info,.contact,.signs-change,.strengths,.faq{
    max-width:920px;
  }
  .fv__content{max-width:720px;padding-left:64px;padding-bottom:96px}
}

/* ---------- 1440px以上: 最大幅を持たせて中央寄せ ---------- */

@media(min-width:1440px){
  .works-preview,.founder,.company-info,.contact,.signs-change,.strengths,.faq,
  .case-list-section,.case-detail,.flow-detail,.methods-detail,.pricing-detail{
    max-width:1040px;
  }
  .fv__content{max-width:820px}
}