:root{
  --base:#FFFFFF;
  --base-deep:#F1F8F9;
  --base-deep-rgb:241,248,249;
  --text:#222222;
  --text-muted:#5B6B70;
  --surface:#FFFFFF;
  --accent:#1F7F8A;
  --on-accent:#FFFFFF;
  --price-col:18rem;
  --line-rgb:23,19,15;
  --font-heading:'Noto Sans JP', sans-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}

/* コンテナ(全セクション共通の最大幅・左右の余白・上下の余白)。本文の左端をどのセクションでも
   同じ位置にそろえるため、各セクションの幅と余白はこの変数だけで決める。
   --wrap は左右の余白を含む最大幅(PCで本文の幅は --wrap - 2 × --gutter)。 */
:root{--header-h:76px;--wrap:1120px;--gutter:20px;--section-y:80px}
@media(min-width:768px){:root{--gutter:40px;--section-y:100px}}

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}
/* WebP用の<picture>(src/optimize-images.js)は箱を作らず、中の<img>がそのまま配置される */
picture{display:contents}
picture > source{display:none}
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}

/* 押しやすさのため高さは48px以上(スマホの指の大きさの目安)。 */
.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:14px 36px;
  border:1px solid var(--text,#F4F0E8);
  text-decoration:none;
  font-size:0.85rem;
  line-height:1.5;
  letter-spacing:0.1em;
  text-align:center;
  transition:background 0.2s ease,color 0.2s ease,filter 0.2s ease;
}
.cta-button:hover{background:var(--text,#F4F0E8);color:var(--base,#17130F)}
.cta-button--tel{border-color:var(--accent,#FF8C00);color:var(--accent,#FF8C00)}
.cta-button--tel:hover{background:var(--accent,#FF8C00);color:var(--base,#17130F)}
/* 主な問い合わせボタン(LINE等)はアクセント色で塗る。文字色(--on-accent)はビルド時に
   アクセント色とのコントラストから白か濃い色を選ぶ。ホバーは色を足さず少し暗くするだけ。 */
.cta-button--accent{
  background:var(--accent,#FF8C00);
  border-color:var(--accent,#FF8C00);
  color:var(--on-accent,#fff);
  font-weight:500;
}
.cta-button--accent:hover{background:var(--accent,#FF8C00);color:var(--on-accent,#fff);filter:brightness(0.9)}

/* ---------- 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;
}
/* ロゴ画像(config.images.logo)使用時。ヘッダー高さ(--header-h:76px)を変えないよう、
   ロゴ高さ+上下paddingの合計を76pxに収める(スマホ40+18*2 / PC46+15*2)。
   横長ロゴでもメニュー・電話番号を押し出さないよう最大幅も抑える。 */
.site-header:has(.site-header__logo){padding-top:18px;padding-bottom:18px}
.site-header__name:has(.site-header__logo){display:block;line-height:0;flex-shrink:0}
.site-header__logo{display:block;height:40px;width:auto;max-width:42vw}
@media(min-width:768px){
  .site-header:has(.site-header__logo){padding-top:15px;padding-bottom:15px}
  .site-header__logo{height:46px;max-width:none}
}
/* ヘッダーの見せ方(config.design.headerStyle → html[data-header-style])。
   暗い色のロゴをダーク基調のサイトで色を変えずに読ませるための2通り。
   影・グラデーションは付けない(hp_design_rules.md)。 */

/* "light": ヘッダーを明るいすりガラスの面にする。色・不透明度・ぼかしは config.design.headerGlass
   (ビルド時に--header-glass-*として注入。未指定なら生成り(--surface)の不透明な面)。
   ぼかし非対応の環境では下が透けると文字が読めなくなるため、不透明な同色を代替にする。
   ヘッダー内の文字はMENU・ナビ・電話番号ともbase色(暗色)に揃え、アクセント色・textMuted色は使わない。 */
[data-header-style="light"] .site-header,
[data-header-style="light"] .site-header--scrolled{
  background:rgb(var(--header-glass-rgb,238,231,220));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(23,19,15,0.12);
  color:var(--base,#17130F);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  [data-header-style="light"] .site-header,
  [data-header-style="light"] .site-header--scrolled{
    background:rgba(var(--header-glass-rgb,238,231,220),var(--header-glass-opacity,1));
    -webkit-backdrop-filter:blur(var(--header-glass-blur,14px));
    backdrop-filter:blur(var(--header-glass-blur,14px));
  }
}
[data-header-style="light"] .site-header:has(.site-header__logo){padding-top:15px;padding-bottom:15px}
[data-header-style="light"] .site-header__logo{height:46px}
[data-header-style="light"] .site-header__phone{color:var(--base,#17130F)}
/* ホバーは色を変えず下線で示す(textMutedは半透明の面の下が黒のとき4.5:1を切るため) */
[data-header-style="light"] .site-header__phone:hover,
[data-header-style="light"] .site-nav__list a:hover{color:inherit;text-decoration:underline;text-underline-offset:0.3em}
/* メニュー展開部分はヘッダー(backdrop-filterを持つ親)の中にあり、入れ子のbackdrop-filterは
   ブラウザが正しく描画しないため、半透明にせず同じ色の不透明な面にする。 */
[data-header-style="light"] .site-nav__list{background:rgb(var(--header-glass-rgb,238,231,220));border-color:rgba(23,19,15,0.12)}
/* 読みやすさの条件(下が黒でもロゴが4.5:1)から不透明度は9割以上になり、写真をヘッダーの下に
   潜り込ませても透けはほぼ見えず上端が隠れるだけのため、FVはヘッダーの下から始める。 */
[data-header-style="light"] .fv{margin-top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h))}
@media(min-width:768px){
  [data-header-style="light"] .site-header:has(.site-header__logo){padding-top:12px;padding-bottom:12px}
  [data-header-style="light"] .site-header__logo{height:52px}
}

/* "glass": 暗いグレーのすりガラス。下の写真・背景が透けて見えることが分かる不透明度にし、
   トップのFVはヘッダーの下に潜り込ませる(全面写真。透けが活きるように)。色・不透明度・ぼかしは
   config.design.headerGlass、ぼかし非対応の環境だけは不透明に近い代替色(headerGlass.fallback)。
   文字色(MENU・ナビ・電話番号・メニュー展開)は従来の暗いヘッダーの配色をそのまま使う。
   ロゴの色は変えない(暗い色のロゴは読みにくくなるが、全体のトーンを優先する前提)。
   上端・下端とも同じ値にし、スクロール前後で透け具合を変えない。 */
[data-header-style="glass"] .site-header,
[data-header-style="glass"] .site-header--scrolled{
  background:rgba(var(--header-glass-fallback-rgb,40,40,40),var(--header-glass-fallback-opacity,0.9));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  [data-header-style="glass"] .site-header,
  [data-header-style="glass"] .site-header--scrolled{
    background:rgba(var(--header-glass-rgb,50,50,50),var(--header-glass-opacity,0.55));
    -webkit-backdrop-filter:blur(var(--header-glass-blur,12px));
    backdrop-filter:blur(var(--header-glass-blur,12px));
  }
}
[data-header-style="glass"] .site-header:has(.site-header__logo){padding-top:15px;padding-bottom:15px}
[data-header-style="glass"] .site-header__logo{height:46px}
@media(min-width:768px){
  [data-header-style="glass"] .site-header:has(.site-header__logo){padding-top:12px;padding-bottom:12px}
  [data-header-style="glass"] .site-header__logo{height:52px}
}

/* "logoPlate": ヘッダーは暗いまま、ロゴの後ろにだけ生成りの面を敷く。面の余白はロゴの
   上下より左右を広く取り、角はわずかに落とすだけにする(カードに見せない)。 */
[data-header-style="logoPlate"] .site-header:has(.site-header__logo){padding-top:11px;padding-bottom:11px}
[data-header-style="logoPlate"] .site-header__name:has(.site-header__logo){
  background:var(--surface,#EEE7DC);
  padding:6px 12px;
  border-radius:2px;
}
[data-header-style="logoPlate"] .site-header__logo{height:42px}
@media(min-width:768px){
  [data-header-style="logoPlate"] .site-header:has(.site-header__logo){padding-top:9px;padding-bottom:9px}
  [data-header-style="logoPlate"] .site-header__name:has(.site-header__logo){padding:6px 14px}
  [data-header-style="logoPlate"] .site-header__logo{height:46px}
}
.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}
/* 表示位置は images.heroFocus(--fv-focus)。スマホだけ変える場合は images.heroFocusMobile(--fv-focus-sm) */
.fv__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fv-focus,50% 50%)}
@media(max-width:767px){.fv__bg{object-position:var(--fv-focus-sm,var(--fv-focus,50% 50%))}}

/* design.fvLayout: "split"。写真と文字を分けて並べる(文字を写真に重ねない)。
   スマホ: 写真が上、文字とボタンが下。PC(1024px〜): 写真が右(幅6割)、文字が左。
   背景色・写真のつなぎ方・装飾の位置はサイトの site.css で決める(ここは骨組みだけ)。
   装飾(images.fvDecoration)は back=写真の背面、front=写真の前面、文字はその上。 */
.fv--split{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  background:var(--base);
}
/* ヘッダーの種類ごとの .fv の高さ指定(属性セレクタ付き)より優先させるため html を前に付ける */
html .fv.fv--split{height:auto}
.fv--split .fv__media{position:relative;z-index:1;aspect-ratio:var(--fv-media-ratio,13/14);max-height:62svh;width:100%}
.fv--split .fv__content{
  position:relative;
  z-index:3;
  height:auto;
  max-width:none;
  justify-content:flex-start;
  align-items:flex-start;
  padding:28px var(--gutter) 56px;
  color:var(--text);
}
.fv--split .fv__heading{font-size:var(--fv-heading-size,clamp(1.1rem, calc(6vw - 3px), 3.2rem))}
.fv--split .fv__tagline,.fv--split .fv__en,.fv--split .fv__lead{opacity:1}
.fv--split .fv__en{color:var(--text-muted)}
.fv--split .fv__lead{margin-bottom:28px}
/* 装飾の層。分割レイアウトでは写真の枠の中に置き(写真の端を基準に位置を決める)、はみ出しは
   .fv の overflow:hidden で切る。back は写真の背面(z-index:-1。写真の枠がスタッキングコンテキスト)。
   各SVGの位置・大きさ・出し分けはサイトの site.css で .fv__decoration-svg--<ファイル名> に書く。 */
.fv__decoration{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fv__decoration--back{z-index:0}
.fv__decoration--front{z-index:2}
.fv--split .fv__decoration{overflow:visible}
.fv--split .fv__decoration--back{z-index:-1}
.fv--split .fv__decoration--front{z-index:1}
.fv__decoration svg{position:absolute;display:block}
.fv__cta{margin-top:4px}
@media(max-width:767px){
  .fv__cta{width:100%}
}
@media(min-width:1024px){
  html .fv.fv--split{height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h))}
  .fv--split{
    flex-direction:row;
    align-items:stretch;
    min-height:560px;
    max-height:900px;
  }
  .fv--split .fv__media{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:60%;
    aspect-ratio:auto;
    max-height:none;
  }
  /* 文字の左端は下のセクションの本文の左端(コンテナ)にそろえる */
  .fv--split .fv__content{
    width:40%;
    justify-content:center;
    padding:48px 40px 48px max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }
}
/* 手持ちカメラ風のかすかな揺れ(config.effects.handheldCamera)。撮影者の呼吸で画が漂う程度の動き。
   横・縦・回転・ズームを入れ子の要素にそれぞれ別の周期で割り当て、各動きはease-in-outの往復
   (速度が滑らかに0→最大→0になる)にする。周期がずれているため合成した軌道は毎回同じにならず、
   不規則に漂って見える。すべてtransformのみ(合成レイヤーで動くのでスマホでも重くならない)。
   値はビルド時に--handheld-*として注入。写真は揺れ幅・回転から計算した倍率(--handheld-scale)
   だけ常に拡大し、揺れても端に隙間が出ないようにする。FVが画面外のときはJSで一時停止する。 */
.fv__camera,.fv__sway-x,.fv__sway-y{position:absolute;inset:0}
.fv__camera{
  transform:scale(var(--handheld-scale,1.04));
  animation:handheld-zoom var(--handheld-zoom-duration,40s) ease-in-out infinite alternate;
}
.fv__sway-x{animation:handheld-sway-x var(--handheld-duration-x,9s) ease-in-out infinite alternate}
.fv__sway-y{animation:handheld-sway-y var(--handheld-duration-y,11s) ease-in-out infinite alternate}
.fv__camera .fv__bg{animation:handheld-rotate var(--handheld-duration-r,10s) ease-in-out infinite alternate}
/* 開始位置を各軸でずらし、読み込み直後に全軸が同時に同じ向きへ動き出さないようにする */
.fv__sway-y{animation-delay:calc(var(--handheld-duration-y,11s) * -0.35)}
.fv__camera .fv__bg{animation-delay:calc(var(--handheld-duration-r,10s) * -0.7)}
.fv.is-paused .fv__camera,.fv.is-paused .fv__sway-x,.fv.is-paused .fv__sway-y,
.fv.is-paused .fv__camera .fv__bg{animation-play-state:paused}
@keyframes handheld-zoom{
  from{transform:scale(var(--handheld-scale,1.04))}
  to{transform:scale(calc(var(--handheld-scale,1.04) * var(--handheld-zoom,1.03)))}
}
@keyframes handheld-sway-x{
  from{transform:translate3d(calc(var(--handheld-sway,3px) * -1),0,0)}
  to{transform:translate3d(var(--handheld-sway,3px),0,0)}
}
@keyframes handheld-sway-y{
  from{transform:translate3d(0,calc(var(--handheld-sway,3px) * -0.7),0)}
  to{transform:translate3d(0,calc(var(--handheld-sway,3px) * 0.7),0)}
}
@keyframes handheld-rotate{
  from{transform:rotate(calc(var(--handheld-rotate,0.2deg) * -1))}
  to{transform:rotate(var(--handheld-rotate,0.2deg))}
}
/* 「視差効果を減らす」がオンなら止める(拡大だけ残し、写真の見え方は変えない) */
@media(prefers-reduced-motion:reduce){
  .fv__camera,.fv__sway-x,.fv__sway-y,.fv__camera .fv__bg{animation:none;animation-name:none}
}

/* コピーが乗る下部と、固定ヘッダーが乗る上部を重点的に暗くする。写真自体は変えず、
   オーバーレイの濃さだけで可読性と高級感(締まった印象)を両立させる。 */
.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;
}
/* 何屋でどこの会社かを添える一行(content.fvTagline)。コピーより目立たせないよう、英文コピーと
   同程度の小ささ・薄さにし、字間を開けてラベルとして読ませる */
.fv__tagline{
  font-size:0.72rem;
  font-weight:400;
  letter-spacing:0.16em;
  opacity:0.78;
  margin-bottom:10px;
}
.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(--fv-underline,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,.signs,.strengths,.faq,
.stats,.notice,.showcase,.articles-preview,
.before-works-section{
  padding:var(--section-y) var(--gutter);
  max-width:var(--wrap);
  margin:0 auto;
}
.before-works-section{padding:0;max-width:none}
/* .before-works-sectionはpadding:0(フルブリード)なので、直前セクションとの間隔が
   他のセクション間と揃うように上マージンだけ補う。 */
#services.before-works-section{margin-top:var(--section-y)}

/* 写真付きセクション(対応できる工事/施工の流れ/料金の目安)は
   写真とテキストを左右に並べる(hp_design_rules.md準拠: 写真とテキストは独立ブロックで置く)。
   セクションごとに.split-section--reverseで左右を入れ替え、単調にならないようにする。
   スマホでは縦積み。写真を小さくしすぎないよう、デスクトップでもほぼ半々の幅を確保する。 */
.split-section{
  display:flex;
  flex-direction:column;
  gap:40px;
  padding:var(--section-y) var(--gutter);
  max-width:var(--wrap);
  margin:0 auto;
}
.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;
  }
  .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{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 var(--gutter) 48px;
  max-width:var(--wrap);
  margin:0 auto;
  color:#fff;
}
.photo-cta__content > *{max-width:520px}
.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-top:64px;padding-bottom:64px}
}

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

.flow-detail{padding:0 var(--gutter) var(--section-y);max-width:var(--wrap);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__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__intro{margin-bottom:64px}
  .signs__grid{grid-template-columns:repeat(2,1fr);gap:64px 48px}
}

@media(min-width:1440px){
  .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:var(--wrap);
  margin:0 auto;
  padding:var(--section-y) var(--gutter);
  color:#fff;
}
.signs-change__content > *{max-width:560px}
.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%}
}
@media(min-width:1024px){
  .signs-change__bg{object-position:63% 45%}
  .signs-change.signs-change--photo{min-height:560px}
}
@media(min-width:1440px){
  .signs-change.signs-change--photo{min-height:640px}
}

/* ---------- 選ばれる理由 ----------
   3つを縦に並べるテキスト主体のセクション。アイコン付き3カラムカードにしないため、
   区切り線+余白だけで項目を分ける(カード背景・角丸・ドロップシャドウは使わない)。
   区切り線(.strengths__item)はセクション全幅のまま保ち、内側の.strengths__item-inner
   だけを左右交互(左寄せ→右寄せ→左寄せ)にずらして動きを出す。テキストの折り返し自体は
   どちらも左揃えのまま(日本語の右揃え本文は読みにくくなるため、位置だけを振る)。 */
.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}
/* 写真が1枚もないときは交互にせず全幅の1列(render.jsのrenderStrengths) */
.strengths--single .strengths__item-inner{max-width:none}
.strengths--single .strengths__item h3{max-width:none}
.strengths--single .strengths__item p{max-width:40em}
.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}
}

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

/* 項目名と金額を2列のグリッドにし、金額(注記を含む)の列は固定幅にする。料金詳細ページは
   カテゴリごとに別の<dl>になるため、列幅を中身から自動で決めると表ごとに金額の位置がずれる。
   固定幅にしておけば、項目名の長さやカテゴリに関係なく、全行の金額の左端が縦一直線に揃う
   (長い項目名は項目名の列の中で折り返す)。幅は一番長い注記「面積・下地状態により変動」が
   1行に収まる値。スマホ幅でも同じ2列で揃える。 */
.pricing-list{border-top:1px solid rgba(var(--line-rgb),0.1)}
.pricing-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 10rem;
  column-gap:20px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid rgba(var(--line-rgb),0.1);
}
.pricing-row dt{font-size:0.92rem;min-width:0;overflow-wrap:anywhere}
.pricing-row dd{font-size:1.1rem;font-family:var(--font-heading,'Noto Serif JP',serif);text-align:left}
.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}
/* 支払い方法(terms.pricing.payment)は注記のすぐ下に続ける */
.pricing-note + .pricing-note--payment{margin-top:8px}

/* ---------- 保証(content.warranty) ----------
   render.jsのrenderWarranty()。料金目安の直後に続けて読ませるため、上の余白は料金側の下余白に
   任せて0にし、幅・左端も料金(.split-section--text-only)に揃える。「最長10年保証」の数字だけを
   明朝の大きな字にし、色・枠・背景は足さない(線と余白で区切る控えめな見せ方)。アクセント色は
   押せるボタン(CTA)と紛れるので使わない。 */
.warranty{padding:0 var(--gutter) var(--section-y);max-width:var(--wrap);margin:0 auto}
.warranty__headline{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 0.2em;
  padding:28px 0 24px;
  border-top:1px solid rgba(var(--line-rgb),0.1);
  border-bottom:1px solid rgba(var(--line-rgb),0.1);
  font-family:var(--font-heading,'Noto Serif JP',serif);
  line-height:1;
}
.warranty__affix{font-size:1.35rem;font-weight:500;letter-spacing:0.08em}
.warranty__number{
  font-size:clamp(4.2rem,20vw,6rem);
  font-weight:500;
  letter-spacing:0.02em;
}
.warranty__note{font-size:0.85rem;line-height:1.9;opacity:0.75;margin-top:20px;max-width:32em}
@media(min-width:768px){
  .warranty__affix{font-size:1.6rem}
  /* PC幅は2文が1行ずつ収まる幅があるので、語の途中(お見積/り)で折り返さないよう幅制限を外す */
  .warranty__note{max-width:none}
}


/* ---------- よくある質問 ----------
   通常時は質問のみ、クリック/タップで回答が展開されるアコーディオン。
   JS不使用のチェックボックスハック(site-nav__toggleと同じ手法)。回答はHTML上は常に
   存在し、grid-template-rowsのアニメーションで見た目だけ折りたたむため、FAQPage構造化
   データ(質問・回答の全文)と表示内容は一致したままになる(生成AIは非表示状態でも
   HTML上の全文を読める)。アイコン(画像・アイコンフォント)は使わず、質問の右端の「＋／−」の
   文字で開閉できることと今の状態を示す。 */
.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:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:color 0.2s ease;
}
/* 開閉の合図は右端の「＋／−」の文字だけ(記号の画像・アイコンフォントは使わない)。閉じているとき＋、開いているとき− */
.faq__question::after{
  content:"+";
  flex:0 0 auto;
  width:1em;
  text-align:center;
  font-family:var(--font-body,'Noto Sans JP',sans-serif);
  font-weight:400;
  font-size:1.35rem;
  line-height:1;
  color:var(--accent,#FF8C00);
}
.faq__toggle:checked + h3 .faq__question::after{content:"\2212"}
.faq__question:hover{color:var(--accent,#FF8C00)}
.faq__toggle:focus-visible + h3 .faq__question{outline:2px solid var(--accent,#FF8C00);outline-offset:4px}
.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{
  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 var(--gutter) 40px;
  background:var(--base-deep,#0D0D0C);
}
.site-footer__inner{
  max-width:calc(var(--wrap) - var(--gutter) * 2);
  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__logo{display:block;height:64px;width:auto;max-width:100%;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:calc(var(--wrap) - var(--gutter) * 2);
  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) var(--gutter) 64px;max-width:var(--wrap);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:40em;
  opacity:0.8;
}

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

.case-list-section{padding:0 var(--gutter) var(--section-y);max-width:var(--wrap);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 var(--gutter) var(--section-y);
  max-width:var(--wrap);
  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){
  .fv__content{max-width:720px;padding-left:64px;padding-bottom:96px}
}

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

@media(min-width:1440px){
  .case-detail{max-width:1040px}
  .fv__content{max-width:820px}
}

/* ---------- スクロールで浮かび上がる演出(config.effects.reveal) ----------
   .js-reveal はJS(render.jsのrevealScript)が付与する。JSが動かない環境では付かないため、
   要素は最初から普通に表示される。付与対象・対象外はconfig側のセレクタで決まる。
   ease-outで減速して止まる動き。移動量20px・1.05秒(開始前の0.2秒の間はJS側のtransition-delay)。 */
.js-reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1.05s cubic-bezier(0.22,0.61,0.36,1),transform 1.05s cubic-bezier(0.22,0.61,0.36,1);
}
.js-reveal.is-revealed{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-reveal{opacity:1;transform:none;transition:none}
}

/* ---------- セクション背景の演出(config.effects.backdrop) ----------
   render.jsのapplyBackdrops()が付けるクラス。黒ベースの背景に暗いグレーで薄く敷き、
   本文のコントラストとアクセント(オレンジ)の見え方を損なわない濃さにとどめる。
   疑似要素はisolation:isolate+z-index:-1でセクションの中身の背面に回す。
   セクション本体は中央寄せ(max-width)のため、疑似要素は画面の端まで伸ばし
   (left/rightを calc((100% - 100vw) / 2) で画面端に合わせる)、はみ出しはmainの
   overflow-x:clipで切る(clipはスクロールコンテナを作らないのでsection-paint-overの
   stickyを壊さない)。 */
main{overflow-x:clip}
.has-watermark,.has-brush{position:relative;isolation:isolate}

/* A. 大きな英字の透かし。画面端で一部が切れる雑誌風の配置。
   content の「/ ""」は代替テキストを空にする指定で、スクリーンリーダーに読ませない
   (未対応ブラウザでは1行目の宣言が使われる)。 */
.has-watermark::before{
  content:attr(data-watermark);
  content:attr(data-watermark) / "";
  position:absolute;
  z-index:-1;
  top:48px;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:300;
  font-size:clamp(5.5rem,26vw,15rem);
  line-height:1;
  letter-spacing:0.02em;
  white-space:nowrap;
  /* 文字の中を上から下へ薄くなるグラデーションで塗り、下端は背景に溶かす。
     輪郭線は下端まで残って溶け込みを邪魔するため付けない。
     上端・下端の濃さは config.effects.backdrop.watermark(build.jsが:rootに注入)で上書きできる。
     見出し上のラベル(--text-muted)より目立たせないこと。
     iOS Safariのため -webkit-background-clip と -webkit-text-fill-color を併記する */
  background-image:linear-gradient(to bottom,rgba(var(--line-rgb),var(--watermark-top,0.12)),rgba(var(--line-rgb),var(--watermark-bottom,0)));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  pointer-events:none;
  user-select:none;
}
.has-watermark--right::before{right:calc((100% - 100vw) / 2 - 0.14em)}
.has-watermark--left::before{left:calc((100% - 100vw) / 2 - 0.14em)}

/* B. 刷毛目の質感。横方向に引き伸ばしたノイズ(feTurbulence)で刷毛の筋を描いた
   インラインSVGをタイル状に敷き、上下をマスクでぼかして一筆の帯に見せる。
   画像ファイルは使わない(SVGはブラウザが一度ラスタライズしたものを使い回す)。 */
.has-brush::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:40px;
  height:min(78%,640px);
  left:calc((100% - 100vw) / 2);
  width:100vw;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.045' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.6 0 0 0 0 0.57 0 0 0 3 -1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size:1200px 600px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 60%,transparent),linear-gradient(100deg,#000 35%,transparent 90%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 60%,transparent),linear-gradient(100deg,#000 35%,transparent 90%);
  mask-composite:intersect;
  opacity:0.15;
  pointer-events:none;
}

/* overflow:clip未対応の古いブラウザでは横スクロールを防ぐため、はみ出しをセクション内で切る */
@supports not (overflow:clip){
  .has-watermark,.has-brush{overflow:hidden}
}

/* ---------- 施工前後の比較スライダー(config.effects.beforeAfterSlider) ----------
   render.jsのcompareSliderHtml()。施工後の写真の上に施工前の写真を重ね、施工前側を
   clip-pathで境目(--pos、JSが更新)より左だけ残す。2枚の比率がずれないよう、
   どちらも枠(4:3)いっぱいにobject-fit:coverで敷く。touch-action:pan-yで縦スクロールは
   ブラウザに任せ、横方向の指の動きだけをドラッグとして受け取る。 */
.ba-compare{margin:0 0 56px}
.ba-compare__frame{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:rgba(var(--line-rgb),0.06);
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  cursor:ew-resize;
}
.ba-compare__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.ba-compare__img--before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
/* 境目の線。操作しやすいよう当たり判定(幅44px)は広く取り、見える線は疑似要素の1本だけにする
   (アイコン・矢印は使わない)。中央に短い太線を置いて「つまめる場所」を示す。 */
.ba-compare__handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos,50%);
  width:44px;
  transform:translateX(-50%);
  outline:none;
}
.ba-compare__handle::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,0.85);
  box-shadow:0 0 6px rgba(0,0,0,0.35);
}
.ba-compare__handle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:4px;
  height:40px;
  transform:translate(-50%,-50%);
  background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,0.4);
  transition:height 0.2s ease;
}
.ba-compare.is-dragging .ba-compare__handle::after,
.ba-compare__handle:focus-visible::after{height:56px}
.ba-compare__handle:focus-visible::before{width:2px;background:var(--accent,#FF8C00)}
.ba-compare__tag{
  position:absolute;
  top:12px;
  padding:4px 9px;
  font-size:0.68rem;
  letter-spacing:0.12em;
  color:#fff;
  background:rgba(0,0,0,0.5);
  pointer-events:none;
}
.ba-compare__tag--before{left:12px}
.ba-compare__tag--after{right:12px}
.ba-compare__caption{
  margin-top:10px;
  font-size:0.72rem;
  letter-spacing:0.03em;
  opacity:0.6;
}

/* ---------- スマホ下部の追従ボタン(config.effects.stickyCta) ----------
   render.jsのstickyCtaHtml()。スマホ幅(767px以下)だけ表示する。隠れている間は
   visibility:hiddenでタップ・フォーカスを受けない(消える動きが終わってから切り替える)。
   iPhoneのホームバーに掛からないよう下余白にenv(safe-area-inset-bottom)を足す
   (viewport-fit=coverはこの機能が有効なときだけrender.jsが付ける)。 */
.sticky-cta{display:none}
@media(max-width:767px){
  .sticky-cta{
    display:flex;
    gap:10px;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    background:rgba(var(--base-deep-rgb),0.9);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(var(--line-rgb),0.1);
    transform:translateY(100%);
    opacity:0;
    visibility:hidden;
    transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),opacity 0.6s ease,visibility 0s linear 0.6s;
  }
  .sticky-cta.is-visible{
    transform:none;
    opacity:1;
    visibility:visible;
    transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),opacity 0.6s ease,visibility 0s;
  }
  .sticky-cta__button{
    flex:1;
    display:block;
    min-height:48px;
    padding:13px 12px;
    border:1px solid var(--accent,#FF8C00);
    color:var(--accent,#FF8C00);
    text-align:center;
    text-decoration:none;
    font-size:0.84rem;
    letter-spacing:0.12em;
  }
  .sticky-cta__button--line{border-color:rgba(var(--line-rgb),0.5);color:var(--text,#F4F0E8)}
  /* ボタンで本文の最後が隠れないよう、ボタンの高さぶん本文の下に余白を足す */
  .has-sticky-cta main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .sticky-cta,.sticky-cta.is-visible{transform:none;transition:none}
}

/* viewport-fit=cover(追従ボタン有効時)で横向きのiPhoneでもノッチに文字が掛からないようにする */
.has-sticky-cta body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.has-sticky-cta .site-header{
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
}

/* ---------- ホームに戻る(config.effects.homeBack) ----------
   下層ページの上部と本文の最後に置く控えめなテキストリンク(.text-linkと同じ線と字間)。
   トップの各セクションはヘッダーの高さぶん下で止まるようにし、#works等へ直接移動したときに
   見出しが固定ヘッダーに隠れないようにする。 */
section[id]{scroll-margin-top:var(--header-h)}
.page-back{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;margin-bottom:32px}
.case-detail .page-back{margin:40px 0 0}
.page-back .back-link{margin:0;padding:0;max-width:none}
.home-back{
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  opacity:0.7;
  transition:opacity 0.2s ease,color 0.2s ease;
}
.home-back:hover{opacity:1;color:var(--accent,#FF8C00)}
/* 一覧・流れ・料金などは直前のリストの区切り線があるため線を引かず、詳細ページだけ線で区切る */
.page-back--end{margin:48px 0 0}
.methods-detail .page-back--end,.pricing-detail .page-back--end{margin-top:0}
.case-detail .page-back--end{margin-top:72px;padding-top:32px;border-top:1px solid rgba(var(--line-rgb),0.1)}

/* ---------- 初回表示のロゴ演出(config.effects.opening) ----------
   render.jsのopeningHtml()。<html>にis-openingが付いたときだけ表示する(既定はdisplay:none
   のため、JSが動かない環境・検索エンジンには本文だけが見える)。背景は上下2枚の板で、
   最後に上下へ静かに開いてFVを見せる。ロゴの色はそのまま使い、背景はサイトで一番暗い
   base-deepを中心だけbaseまで持ち上げる(ロゴの茶色とのコントラストは約3:1)。
   動きはすべてtransformとopacityのみ。時間の管理もCSSのアニメーション遅延で行い(JSのタイマーだと
   CSSの読み込み待ちでずれるため)、JSは開き始め・開き終わりのイベントでクラスを切り替えるだけ。
   流れ(秒): ブロック0.05〜0.83 → 線0.6〜0.98 → 社名0.75〜1.17 → ロゴが薄れ1.3〜1.52 →
   上下に開く1.42〜1.87。 */
.opening{display:none}
html.is-opening .opening{display:block;position:fixed;inset:0;z-index:1000}
.opening__panel{
  position:absolute;
  left:0;
  right:0;
  height:calc(50% + 1px);
}
.opening__panel--top{animation:opening-open-top 0.45s cubic-bezier(0.76,0,0.24,1) 1.42s forwards}
.opening__panel--bottom{animation:opening-open-bottom 0.45s cubic-bezier(0.76,0,0.24,1) 1.42s forwards}
.opening__panel--top{top:0;background:radial-gradient(ellipse 80% 70% at 50% 100%,var(--base,#160F0B),var(--base-deep,#0B0705))}
.opening__panel--bottom{bottom:0;background:radial-gradient(ellipse 80% 70% at 50% 0%,var(--base,#160F0B),var(--base-deep,#0B0705))}
.opening__logo{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:opening-logo-out 0.22s ease 1.3s forwards;
}
.opening__logo svg{width:min(58vw,420px);height:auto;overflow:visible}
/* 建物マーク: 1段目のブロックを左から、続いて梁・屋根・塔の順に、下から持ち上がって積み上がる */
.opening [data-opening="block"]{
  transform-box:fill-box;
  opacity:0;
  animation:opening-stack 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay:calc(0.05s + var(--i,0) * 0.035s);
}
/* オレンジの線: 左端を起点に右へ引く */
.opening [data-opening="line"]{
  transform-box:fill-box;
  transform-origin:0 50%;
  transform:scaleX(0);
  animation:opening-line 0.38s cubic-bezier(0.65,0,0.35,1) 0.6s forwards;
}
/* 社名: わずかに浮かびながらふわっと現れる */
.opening [data-opening="name"]{
  transform-box:fill-box;
  opacity:0;
  animation:opening-name 0.42s cubic-bezier(0.22,1,0.36,1) 0.75s forwards;
}
@keyframes opening-stack{
  from{opacity:0;transform:translate3d(0,60%,0)}
  to{opacity:1;transform:none}
}
@keyframes opening-line{
  to{transform:scaleX(1)}
}
@keyframes opening-name{
  from{opacity:0;transform:translate3d(0,6%,0)}
  to{opacity:1;transform:none}
}
/* 開く: ロゴが薄れ、上下の板がそれぞれ画面の外へ退く */
@keyframes opening-logo-out{
  to{opacity:0;transform:scale(1.03)}
}
@keyframes opening-open-top{
  to{transform:translate3d(0,-100%,0)}
}
@keyframes opening-open-bottom{
  to{transform:translate3d(0,100%,0)}
}
html.is-opening-out .opening{pointer-events:none}
/* タップ・スクロールで飛ばしたときは、その場から短く閉じる */
html.is-opening-skip .opening__logo{animation:opening-logo-out 0.2s ease forwards}
html.is-opening-skip .opening__panel--top{animation:opening-open-top 0.32s cubic-bezier(0.76,0,0.24,1) forwards}
html.is-opening-skip .opening__panel--bottom{animation:opening-open-bottom 0.32s cubic-bezier(0.76,0,0.24,1) forwards}
/* 演出の間はFVの動き(手持ちカメラ風の揺れ・ズーム、見出しの下線)を止めておき、開き始めてから動かす */
html.is-opening:not(.is-opening-out) .fv *{animation-play-state:paused !important}
@media(prefers-reduced-motion:reduce){
  html.is-opening .opening{display:none}
}

/* ---------- セクション間の電話相談(content.inlineCta) ----------
   render.jsのrenderInlineCta()。施工事例・料金目安の直後に置く控えめな導線。ボタンは既存の
   .cta-button--tel をそのまま使い、背景・枠・影は足さずに余白だけで区切る。 */
.inline-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:8px 20px 64px;
  text-align:center;
}
.inline-cta__text{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:0.95rem;
  letter-spacing:0.08em;
  opacity:0.9;
}
.inline-cta .cta-button{width:100%;max-width:360px}
.inline-cta__note{font-size:0.75rem;letter-spacing:0.04em;opacity:0.6}

/* ---------- 「対応できる工事」(section-paint-over)のスマホ幅の調整 ----------
   部品(templates/components/section-paint-over)のCSSは<style>で後から読み込まれるので、
   .before-works-section を前に付けて詳細度で上書きする。PC幅(768px以上)は変えない。
   - スクロールを促す表示(.scroll-cue。「SCROLL」の文字と、点が流れる縦線)は、既定の右下では
     見落としやすいため、右端寄り(横位置は部品の既定right:1.5remのまま)の縦方向の中央に置き、
     文字を太く・明るくする。.scroll-cueにはJSがスクロール追従のtransform(translateY)を
     毎フレーム書き込むため、縦中央寄せにtransformは使わず、top/bottomとmargin:autoで行う
     (演出の動きはそのまま)
   - 工事名・説明文の位置は部品の既定(画面下部)のまま、太さだけ上げる
   - 写真の中央に薄い陰り、文字に影を足し、明るい写真の上でも読めるようにする */
@media(max-width:767px){
  .before-works-section .scroll-cue{
    top:0;
    bottom:0;
    margin:auto 0;
    height:max-content;
  }
  .before-works-section .scroll-cue__label{
    font-weight:700;
    color:rgba(255,255,255,0.9);
    text-shadow:0 1px 12px rgba(0,0,0,0.6);
  }
  .before-works-section .scroll-cue__line{background:rgba(255,255,255,0.45)}
  .before-works-section .pt-copy,
  .before-works-section .pt-intro__copy{text-shadow:0 1px 14px rgba(0,0,0,0.55)}
  .before-works-section .pt-scrim,
  .before-works-section .pt-intro__scrim{
    background:
      linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 70%),
      linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 55%);
  }
  .before-works-section .pt-copy h2,
  .before-works-section .pt-copy h3,
  .before-works-section .pt-intro__copy h2,
  .before-works-section .pt-intro__copy h3{
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:0.08em;
  }
  .before-works-section .pt-copy p,
  .before-works-section .pt-intro__copy p{
    font-size:0.95rem;
    font-weight:500;
    letter-spacing:0.04em;
    opacity:1;
  }
}

/* ---------- 取扱塗料メーカー(content.paintMakers) ----------
   工法・塗料ページの一覧。ロゴは使わず社名の文字だけを、料金表と同じ細い区切り線で
   2列(768px以上は3列)に並べる。長い社名でもはみ出さないよう列はminmax(0,1fr)。 */
.paint-makers__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:24px;
  margin-top:24px;
  border-top:1px solid rgba(var(--line-rgb),0.1);
}
.paint-makers__list li{
  padding:14px 0;
  border-bottom:1px solid rgba(var(--line-rgb),0.1);
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:0.95rem;
  letter-spacing:0.06em;
  overflow-wrap:anywhere;
}
@media(min-width:768px){
  .paint-makers__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- FVの下線: まっすぐな線(design.fvUnderline: "line") ----------
   刷毛の筆跡(既定)と同じ位置・同じ描く動きで、太さが一定の細い線にする。 */
.fv__underline--line{height:0.28em;bottom:-0.1em}

/* ---------- 記事(pages.articles): 一覧・トップのプレビュー ----------
   事例一覧(.case-row)と同じ区切り線と余白のリズムにそろえ、カード・影は使わない。 */

.article-list-section{padding:0 var(--gutter) var(--section-y);max-width:var(--wrap);margin:0 auto}
.article-row{border-top:1px solid rgba(var(--line-rgb),0.1)}
.article-row:last-child{border-bottom:1px solid rgba(var(--line-rgb),0.1)}
.article-row__link{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:36px 0;
  text-decoration:none;
}
@media(min-width:768px){
  .article-row__link{flex-direction:row;align-items:center;gap:40px}
}
.article-row__cover{width:100%;aspect-ratio:16/10;object-fit:cover;background:rgba(var(--line-rgb),0.06)}
@media(min-width:768px){
  .article-row__cover{flex:0 0 auto;width:30%}
}
.article-row__body{flex:1}
.article-row__date{
  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;
}
.article-row__heading{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:1.2rem;
  line-height:1.6;
  letter-spacing:0.02em;
  margin-bottom:10px;
}
.article-row__excerpt{font-size:0.88rem;line-height:1.9;opacity:0.75}
.articles-preview .article-list{margin-bottom:8px}

/* ---------- 記事の詳細ページ ----------
   本文はNotionのブロックをそのままHTMLにしたもの。読みやすさを優先し、1行を短め(34字前後)にする。 */

.article-detail{max-width:720px;margin:0 auto;padding:calc(var(--header-h) + 24px) 20px 140px}
.article-detail .page-back{margin:40px 0 0}
.article-detail .page-back--end{margin-top:72px;padding-top:32px;border-top:1px solid rgba(var(--line-rgb),0.1)}
.article-detail__date{
  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;
}
.article-detail__heading{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  font-size:clamp(1.6rem,4.6vw,2.2rem);
  line-height:1.5;
  letter-spacing:0.03em;
  margin:14px 0 40px;
}
.article-detail__cover{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:48px}

.article-body{font-size:1rem;line-height:2;margin-bottom:72px;overflow-wrap:anywhere}
.article-body > * + *{margin-top:1.4em}
.article-body h2,.article-body h3,.article-body h4{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-weight:700;
  line-height:1.6;
  letter-spacing:0.02em;
}
.article-body h2{font-size:1.4rem;margin-top:2.6em;padding-bottom:10px;border-bottom:1px solid rgba(var(--line-rgb),0.15)}
.article-body h3{font-size:1.15rem;margin-top:2.2em}
.article-body h4{font-size:1rem;margin-top:1.8em}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li + li{margin-top:0.4em}
.article-body li > ul,.article-body li > ol{margin-top:0.4em}
.article-body a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.article-body strong{font-weight:700}
.article-body code{font-size:0.88em;padding:0.1em 0.35em;background:rgba(var(--line-rgb),0.08)}
.article-body blockquote{padding-left:1.2em;border-left:2px solid var(--accent);opacity:0.88}
.article-body hr{border:0;border-top:1px solid rgba(var(--line-rgb),0.15);margin:2.6em 0}
.article-callout{padding:20px 22px;border:1px solid rgba(var(--line-rgb),0.15)}
.article-callout > * + *{margin-top:0.8em}
.article-figure img{width:100%;height:auto}
.article-figure figcaption{margin-top:8px;font-size:0.8rem;opacity:0.7}
.article-code{padding:18px 20px;overflow-x:auto;font-size:0.85rem;line-height:1.7;background:rgba(var(--line-rgb),0.06)}
.article-code code{padding:0;background:none}
.article-table{overflow-x:auto}
.article-table table{border-collapse:collapse;width:100%;font-size:0.9rem;line-height:1.7}
.article-table th,.article-table td{padding:10px 12px;border:1px solid rgba(var(--line-rgb),0.15);text-align:left;vertical-align:top}
.article-table th{font-weight:700}
.article-toggle summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.article-toggle[open] summary{margin-bottom:0.8em}
.article-link a{word-break:break-all}


/* ---------- 白い不透明なヘッダー(design.headerStyle: "paper") ----------
   明るい基調(design.theme: "light")のサイト用。面は surface(白)、文字は text 色。
   写真の上に重ねないので、FVはヘッダーの下から始める。 */
[data-header-style="paper"] .site-header,
[data-header-style="paper"] .site-header--scrolled{
  background:var(--surface,#FFFFFF);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(var(--line-rgb),0.1);
  color:var(--text,#222);
}
[data-header-style="paper"] .site-nav__list{background:var(--surface,#FFFFFF)}
[data-header-style="paper"] .site-header:has(.site-header__logo){padding-top:18px;padding-bottom:18px}
[data-header-style="paper"] .fv{margin-top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h))}
@media(min-width:768px){
  [data-header-style="paper"] .site-header:has(.site-header__logo){padding-top:17px;padding-bottom:17px}
  [data-header-style="paper"] .site-header__logo{height:42px}
}
/* 電話番号の代わりにLINEへの短いリンクを出すとき(company.tel が空で lineUrl がある) */
.site-header__line{border:1px solid var(--accent);padding:6px 12px;letter-spacing:0.08em}
.site-header__line:hover{background:var(--accent);color:var(--surface,#fff)}

/* ---------- 写真の仮の枠(images.* の {"placeholder": "…"}) ----------
   実写がそろうまでの間だけ使う。写真と同じ大きさ・比率の面に「写真準備中：◯◯」を出す。 */
.photo-placeholder--labeled{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  text-align:center;
  border:1px dashed rgba(var(--line-rgb),0.35);
}
.photo-placeholder__label{font-size:0.75rem;letter-spacing:0.05em;opacity:0.7;line-height:1.7}
.photo-cta__bg.photo-placeholder--labeled{align-items:flex-start;justify-content:flex-end;background:#3a4448;color:#fff}

/* 代表の挨拶など、改行を含む長い文章は改行をそのまま生かす */
.founder__message{white-space:pre-line}

.contact__note{font-size:0.8rem;opacity:0.7;margin:-24px 0 40px}

@media(max-width:767px){
  /* 電話がなくLINEが窓口のときの追従ボタン(ほかの主なCTAと同じ塗り) */
  .sticky-cta__button--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);font-weight:500}
}

/* ---------- 実績の数字(content.stats) ----------
   数字を大きく、ラベルは小さく。メダル画像・カードは使わず、上下の線で区切る。 */
.stats__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(var(--line-rgb),0.12);
}
.stats__item{padding:28px 0 24px;border-bottom:1px solid rgba(var(--line-rgb),0.12)}
.stats__item:nth-child(odd){padding-right:16px}
.stats__item dt{font-size:0.78rem;letter-spacing:0.06em;opacity:0.7;margin-bottom:10px}
.stats__item dd{display:flex;align-items:baseline;gap:0.15em;line-height:1}
.stats__number{
  font-family:var(--font-heading,'Noto Sans JP',sans-serif);
  font-weight:700;
  font-size:clamp(2.6rem,11vw,3.6rem);
  letter-spacing:0.01em;
  color:var(--accent);
}
.stats__unit{font-size:0.95rem;font-weight:500}
@media(min-width:768px){
  .stats__list{grid-template-columns:repeat(4,1fr)}
  .stats__item{padding:32px 24px 28px 0}
}

/* ---------- お客様の声(content.voices) ----------
   章替わりとして背景を base-deep の面に切り替える(サイト全体で2〜3面まで)。
   顔写真・星評価・カードは使わず、文章と属性だけを線で区切って並べる。 */
.voices{background:var(--base-deep);padding:var(--section-y) var(--gutter)}
.voices__inner{max-width:calc(var(--wrap) - var(--gutter) * 2);margin:0 auto}
.voices__list{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(var(--line-rgb),0.12)}
.voices__item{padding:32px 0;border-bottom:1px solid rgba(var(--line-rgb),0.12)}
.voices__body{font-size:0.92rem;line-height:2}
.voices__attr{margin-top:14px;font-size:0.75rem;letter-spacing:0.08em;opacity:0.65}
@media(min-width:768px){
  .voices__list{grid-template-columns:repeat(2,1fr);column-gap:56px}
}

/* ---------- ご依頼の前に(content.notice) ---------- */
.notice__list{border-top:1px solid rgba(var(--line-rgb),0.12)}
.notice__list li{
  padding:16px 0 16px 1.2em;
  border-bottom:1px solid rgba(var(--line-rgb),0.12);
  font-size:0.86rem;
  line-height:1.9;
  position:relative;
}
.notice__list li::before{content:"";position:absolute;left:0;top:calc(16px + 0.95em);width:0.5em;height:1px;background:currentColor;opacity:0.5}

/* ---------- 作業前と作業後(トップの比較。content.showcase / images.showcase) ---------- */
.showcase__lead{font-size:0.92rem;line-height:2;opacity:0.88;max-width:34em;margin-bottom:40px}
.showcase .ba-compare{margin-bottom:0}
.showcase .ba-compare__frame{aspect-ratio:3/4}
.showcase__notes{display:grid;grid-template-columns:1fr;gap:20px;margin-top:32px}
.showcase__note dt{font-size:0.75rem;letter-spacing:0.12em;color:var(--accent);margin-bottom:6px}
.showcase__note dd{font-size:0.88rem;line-height:1.9}
@media(min-width:768px){
  .showcase__notes{grid-template-columns:1fr 1fr;gap:40px}
  .showcase .ba-compare__frame{aspect-ratio:4/5;max-height:640px}
}
.pricing-detail__body{font-size:0.88rem;line-height:1.95;opacity:0.88;margin-top:16px}
/* PC幅の作業前後の比較は、文章を左・写真を右の2列にする */
@media(min-width:1024px){
  .showcase{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,440px);
    column-gap:80px;
    align-items:start;
  }
  .showcase > .section-label,.showcase > .showcase__lead,.showcase > .showcase__notes{grid-column:1}
  .showcase > .ba-compare{grid-column:2;grid-row:1 / span 4}
  .showcase__notes{grid-template-columns:1fr;gap:28px}
}
/* 金額の列の幅(design.priceColumnWidth)はPC幅だけに効かせる(スマホで項目名が細く折り返さないように)。
   PCでは項目名の列も固定幅(--price-name-col)にして表全体の幅を詰め、項目名と金額が離れすぎないようにする
   (料金詳細ページのカテゴリごとの表でも金額の左端は縦一直線にそろう)。 */
@media(min-width:768px){
  .pricing-list{max-width:calc(var(--price-name-col,14rem) + 32px + var(--price-col,10rem))}
  .pricing-row{grid-template-columns:var(--price-name-col,14rem) var(--price-col,10rem);column-gap:32px}
}

/* ---------- 読みやすさ(明るい基調: design.theme "light") ----------
   本文・注記を半透明(opacity)で薄くすると、白・淡い色の面の上でコントラスト比が4.5:1を下回る
   ことがあるため、明るい基調では半透明をやめて不透明な色で塗る。本文は --text、注記・補足は
   --text-muted(白・base-deep のどちらの面でも4.5:1以上になる色を config に指定する)。
   写真の上に重ねる文字(FV・見せ場・原因の写真背景)は対象外。 */
[data-theme="light"] body{font-weight:400}
[data-theme="light"] :is(
  .signs__intro,.signs__item p:last-child,.founder__message,.signs-change:not(.signs-change--photo) p,
  .strengths__item p,.faq__answer,.contact__lead,.hero__lead,.methods-detail__item p,
  .showcase__lead,.pricing-detail__body,.flow-list__item p,.case-row__meta,.article-row__excerpt,
  .warranty__note,.inline-cta__text
){opacity:1;color:var(--text)}
[data-theme="light"] :is(
  .founder__career,.pricing-row__note,.pricing-note,.company-info__row dt,.contact__qr-caption,
  .works-preview__empty,.info-row__label,.ba-compare__caption,.inline-cta__note,.article-figure figcaption,
  .photo-placeholder__label,.contact__note,.stats__item dt,.voices__attr,.back-link,
  .site-footer__address,.site-footer__nav a,.site-footer__copyright
){opacity:1;color:var(--text-muted)}

/* PC幅は本文を一回り大きくする(rem指定の文字・余白がすべて同じ比率で大きくなる) */
@media(min-width:1024px){
  html{font-size:106.25%}
}

/* ---------- 明るいFV(design.fvTone: "light") ----------
   明るい写真の上に暗い色の文字を置く。暗いオーバーレイは出さない(render.js)。
   文字の読みやすさは写真の明るさに頼るため、文字の後ろが明るい写真を選び、images.heroFocus で合わせる。 */
.fv--light .fv__content{color:var(--text)}
.fv--light .fv__tagline,.fv--light .fv__en,.fv--light .fv__lead{opacity:1}
.fv--light .fv__en{color:var(--text-muted)}
.fv--light .fv__heading{font-weight:700}
.fv--light .fv__lead{font-weight:500;margin-bottom:20px}
.fv__note{font-size:0.8rem;line-height:1.9;letter-spacing:0.04em;margin-bottom:24px}
.fv--light .fv__content{justify-content:center;padding-bottom:48px}

/* ---------- FVの水しぶき(config.effects.fvSplash) ----------
   render.jsのFV_SPLASH_HTML。写真の上に細かい水滴ときらめきを重ね、ゆっくり舞わせる(CSSだけ)。
   水滴は写真の主役側(PCは右、スマホは下)に置き、文字の側にかかるものは白のグラデーションの下に入る。
   色は白と --fv-splash-tint(既定はアクセント色)の半透明。動かすのは transform と opacity だけ。
   写真の読み込みとは無関係(写真の<img>には何も足さない)。 */
.fv-splash{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fv-splash__item{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  opacity:0;
  animation:fv-splash-float var(--d) ease-in-out var(--delay) infinite;
  will-change:transform,opacity;
}
@media(max-width:767px){
  .fv-splash__item{left:var(--xs);top:var(--ys)}
}
.fv-splash__item svg{display:block;width:100%;height:100%;overflow:visible}
.fv-splash__item circle{fill:rgba(255,255,255,0.6);stroke:var(--fv-splash-tint,var(--accent));stroke-opacity:0.6;stroke-width:1.1}
.fv-splash__item .fv-splash__shine{fill:#fff;fill-opacity:0.9;stroke:none}
.fv-splash__item--tint circle{fill:var(--fv-splash-tint,var(--accent));fill-opacity:0.28}
.fv-splash__item--spark path{fill:#fff;stroke:var(--fv-splash-tint,var(--accent));stroke-opacity:0.55;stroke-width:0.8}
.fv-splash__item--spark.fv-splash__item--tint path{fill:var(--fv-splash-tint,var(--accent));fill-opacity:0.45;stroke:none}
.fv-splash__item--spark{animation-name:fv-splash-twinkle}
@keyframes fv-splash-float{
  0%{transform:translate(0,0) scale(0.85);opacity:0}
  20%{opacity:0.9}
  70%{opacity:0.75}
  100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}
}
@keyframes fv-splash-twinkle{
  0%,100%{transform:scale(0.4) rotate(0deg);opacity:0}
  45%{transform:scale(1) rotate(20deg);opacity:0.9}
  60%{transform:scale(0.9) rotate(28deg);opacity:0.7}
}
/* 写真自体を20秒かけて1.04倍まで拡大し、また戻す(effects.fvSplash.zoom) */
.fv--zoom .fv__bg{animation:fv-zoom 20s ease-in-out infinite alternate;transform-origin:var(--fv-focus,50% 50%)}
@keyframes fv-zoom{
  from{transform:scale(1)}
  to{transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .fv-splash__item,.fv--zoom .fv__bg{animation:none}
  .fv-splash__item{opacity:0.7}
}

/* ---------- FVの実績バッジ(content.fvBadges) ----------
   render.jsのfvBadgesHtml()。白の半透明の円にアクセント色の細い線と文字、月桂樹は線画のSVG。
   金色・立体感・影は使わない。FVの文字の下に横並びで置き、狭い画面では横並びのまま縮める */
.fv-badges{
  --badge-size:clamp(82px, 23vw, 100px);
  display:flex;
  gap:clamp(8px, 2.6vw, 16px);
  list-style:none;
  margin:4px 0 24px;
  padding:0;
}
.fv-badge{
  position:relative;
  flex:0 0 auto;
  width:var(--badge-size);
  height:var(--badge-size);
  border-radius:50%;
  background:rgba(255,255,255,0.94);
  border:1px solid var(--accent);
  color:var(--accent);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.2;
}
.fv-badge__laurel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:0.9;
  stroke-linejoin:round;
  pointer-events:none;
}
.fv-badge__label{
  position:relative;
  font-size:max(11px, calc(var(--badge-size) * 0.12));
  font-weight:500;
  letter-spacing:0.02em;
  margin-top:-8%;
}
.fv-badge__value{
  position:relative;
  font-size:calc(var(--badge-size) * 0.27);
  font-weight:700;
  letter-spacing:0.02em;
  font-feature-settings:"palt";
}
.fv-badge__unit{font-size:0.42em;font-weight:700;margin-left:0.1em}
@media(min-width:1024px){
  .fv-badges{--badge-size:116px;gap:18px;margin:8px 0 32px}
}

/* ---------- 写真だけの帯(images.photoBands / layout.topSections の "photoBand:<key>") ---------- */
.photo-band--bleed .photo-band__inner{display:grid;grid-template-columns:repeat(var(--band-count,2),1fr)}
.photo-band--bleed .photo-band__img{width:100%;height:clamp(200px,40vw,560px);object-fit:cover}
.photo-band--row{padding:40px 0 var(--section-y)}
.photo-band--row .photo-band__inner{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  padding:0 var(--gutter);
  scrollbar-width:thin;
}
.photo-band--row .photo-band__img{flex:0 0 68%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:start}
@media(min-width:768px){
  .photo-band--row .photo-band__inner{
    display:grid;
    grid-template-columns:repeat(var(--band-count,3),1fr);
    gap:24px;
    overflow:visible;
    max-width:var(--wrap);
    margin:0 auto;
  }
  .photo-band--row .photo-band__img{width:100%}
}

/* ---------- sites/yakuwa/site.css ---------- */
/* YAKUWA固有のスタイル(共通の style.css の後ろに足される)。色は sites/yakuwa/tone.md に従う。
   FV: STUDIO版と同じ「洗濯機の後ろに水しぶきが広がる画像」を全面に敷き、左上に文字を置く。
   暗いオーバーレイは使わない(design.fvTone: "light")。 */

:root{--fv-underline:#40B1BD;--fv-splash-tint:#40B1BD}

/* ---------- FV ---------- */
/* 文字の読みやすさ: 文字を置く側だけ、画像の上に白の半透明のグラデーションを重ねる
   (文字の背後はしっかり白く、洗濯機と水しぶきの側に向かって透明)。暗いオーバーレイと文字の影は使わない(tone.md)。
   スマホは上から下へ、PCは左から右へ。重なり順は 画像 < 白のグラデーション < 文字 */
.fv--light::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0.94) 0,
    rgba(255,255,255,0.9) var(--fv-scrim-solid,300px),
    rgba(255,255,255,0) var(--fv-scrim-end,380px));
}
.fv--light .fv__content{z-index:2}
.fv--light .fv__heading{font-weight:800}
.fv--light .fv__lead{font-weight:500;color:var(--text)}
.fv--light .fv__note{font-weight:500;color:var(--text)}

/* スマホ: STUDIO版と同じく文字は上側、洗濯機は画面の中央〜下側に見せる */
.fv--light .fv__content{justify-content:flex-start;padding-top:32px;padding-bottom:40px}
.fv--light .fv__heading{font-size:clamp(1.75rem, 8.2vw, 2.3rem);line-height:1.4;margin-bottom:16px}
.fv--light .fv__lead{font-size:1rem;line-height:1.8;margin-bottom:12px}
.fv--light .fv__note{font-size:0.86rem;line-height:1.8}
.fv--light .fv__cta{margin-top:auto}
@media(max-width:767px){
  .fv__cta{width:100%}
}
/* PC: 文字は左側(STUDIO版と同じく画面の左から1割弱の位置)、縦は中央。
   画像は少し右へずらし(空いた左側は白のグラデーションの下に入る)、洗濯機と水しぶきを文字から離す */
@media(min-width:1024px){
  .fv--light{background:#fff}
  .fv--light .fv__bg{
    left:auto;right:0;width:calc(100% - 7vw);
    /* ずらした画像の左端が境目に見えないよう、白の背景へなじませる */
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14%);
    mask-image:linear-gradient(to right, transparent 0, #000 14%);
  }
  .fv--light::after{
    background:linear-gradient(to right,
      rgba(255,255,255,0.94) 0,
      rgba(255,255,255,0.88) 33%,
      rgba(255,255,255,0) 50%);
  }
  .fv--light .fv__content{
    justify-content:center;
    padding:48px 0 64px clamp(40px, 7.5vw, 108px);
    max-width:680px;
  }
  .fv--light .fv__heading{font-size:clamp(2.4rem, 3.3vw, 3.1rem)}
  .fv--light .fv__lead{font-size:1.18rem}
  .fv--light .fv__note{font-size:0.95rem}
  .fv--light .fv__cta{margin-top:12px;align-self:flex-start}
}

/* ---------- 作業の流れ(トップの見せ場): 空の写真を暗く沈めず、文字は青空の上に置く ---------- */
#flow .photo-cta__overlay{background:linear-gradient(to bottom, rgba(10,40,90,0.45), rgba(10,40,90,0.15) 70%)}
#flow .photo-cta__content{justify-content:flex-start;padding-top:64px}
#flow .photo-cta__text{text-shadow:0 1px 8px rgba(0,20,60,0.45)}

/* 料金表(PC): 項目名の列は一番長い「ウルトラファインバルブ取り付け」が1行に収まる幅 */
:root{--price-name-col:14.5rem}