:root{
  /* ---- color（最終確定は※要確認。ここ1箇所で差替え可能） ---- */
  --bg:#ffffff;
  --bg2:#f4f3f1;
  --ink:#111111;
  --muted:#6b6b6b;
  --line:rgba(17,17,17,.14);
  --accent-orange:#ff7700;   /* ※要確認 */
  --accent-green:#00aa55;    /* ※要確認 */
  --accent:var(--accent-orange);  /* 塗り用（鮮やか）。JSがセクション切替でフェード更新 */
  --accent-text:var(--accent);    /* 濃色は廃止。文字もメインカラーと同色（JSが追従更新） */

  /* ---- font ---- */
  --sans:"Noto Sans JP",sans-serif;
  --en:"Archivo","Noto Sans JP",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);

  /* ---- 筋交い（足場クロスブレース）±30° ---- */
  --shear:-30deg;
  --shear-alt:30deg;
  --unshear:30deg;       /* 中身を正立に戻す */
  --unshear-alt:-30deg;
  --img-scale:1.6;       /* ±30°でフレーム傾けても縁の隙間を出さない */

  /* ---- タイポスケール（下限はすべて1rem以上を厳守） ---- */
  --fs-hero:clamp(2.75rem, 1.2rem + 7.5vw, 6.5rem);
  --fs-en:clamp(2.5rem, 1rem + 7vw, 6rem);
  --fs-h2:clamp(1.5rem, 1.15rem + 1.8vw, 2.6rem);
  --fs-h3:clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-lead:clamp(1.25rem, 1.05rem + 1vw, 2rem);
  --fs-body:clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
  --fs-label:clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-num:clamp(2.75rem, 1.5rem + 6vw, 5.5rem);

  /* ---- spacing（流動） ---- */
  --pad-y:clamp(4.5rem, 9vw, 9.5rem);
  --gutter:clamp(1.25rem, 5vw, 5rem);        /* 画面端の最小余白 */
  --content-max:1280px;                       /* コンテンツ最大幅（中央寄せ） */
  /* 最大幅を超えた分を左右余白に回して中央寄せ。狭い画面では --gutter のまま */
  --pad-x:max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --gap:clamp(1.5rem, 4vw, 3rem);

  /* ---- 左右の常駐エッジ（足場の建地＝縦の支柱）。0 にすると無効化 ---- */
  --edge:clamp(10px, 1.2vw, 16px);

  /* ---- 矢印アイコン（btn / ヘッダーCTA 共用のマスク） ---- */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6h21M16 1l5 5-5 5' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.75;
  overflow-x:clip;   /* hidden だと body がスクロールコンテナ化し window.scrollY が効かなくなる */
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ol,ul{list-style:none}
em{font-style:normal;color:var(--accent-text);transition:color .5s linear}
section{position:relative}
::selection{background:var(--accent);color:#fff}

/* ============ 左右の常駐エッジ（足場の建地）============
   既存の --accent をそのまま反映するだけ＝独立した動きは足さない。
   z-index はヘッダー(500)より上＝ページ全体の左右を貫く連続フレーム。
   pointer-events:none でクリックを邪魔しない。--edge:0 で無効化。 */
body::before,body::after{
  content:"";position:fixed;top:0;bottom:0;width:var(--edge);z-index:600;
  background:var(--accent);pointer-events:none}
body::before{left:0}
body::after{right:0}

/* ============ 筋交いシアー system ============ */
/* box を傾け、中身を逆skewで正立。隣接要素を逆向きにして「X」を作る */
.shear{transform:skewX(var(--shear))}
.shear>*{transform:skewX(var(--unshear))}
.shear--alt{transform:skewX(var(--shear-alt))}
.shear--alt>*{transform:skewX(var(--unshear-alt))}

/* 斜め画像: frame を傾け、img は逆skew + scaleで縁の隙間を消す */
.shimg{overflow:hidden;position:relative;background:var(--bg2)}
.shimg img{
  width:100%;height:100%;object-fit:cover;
  transform:skewX(var(--unshear)) scale(var(--img-scale));
  transition:transform 1s var(--ease);
  filter:grayscale(.08) contrast(1.04);
}
.shear--alt.shimg img{transform:skewX(var(--unshear-alt)) scale(var(--img-scale))}
a:hover .shimg img{transform:skewX(var(--unshear)) scale(calc(var(--img-scale) + .08))}
a:hover .shear--alt.shimg img{transform:skewX(var(--unshear-alt)) scale(calc(var(--img-scale) + .08))}

/* 斜めチップ: 背景だけ傾け、文字は正立 */
.tag{
  position:relative;display:inline-block;padding:.4em 1em;z-index:0;
  font-family:var(--en);font-weight:800;font-size:var(--fs-label);letter-spacing:.08em;
  color:#fff;
}
.tag::before{content:"";position:absolute;inset:0;background:var(--accent);
  transform:skewX(var(--shear));z-index:-1;transition:background .5s linear}

/* ============ Button ============ */
.btn{
  display:inline-flex;align-items:center;gap:.9rem;
  padding:1.05rem 2.4rem;font-family:var(--sans);font-weight:700;
  font-size:var(--fs-label);letter-spacing:.04em;position:relative;overflow:hidden;
  border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:color .4s,background .4s,border-color .4s;
}
.btn>span{position:relative;z-index:1}
.btn::after{content:"";width:1.6em;height:.6em;flex:0 0 auto;
  -webkit-mask:var(--arrow) no-repeat center/contain;
  mask:var(--arrow) no-repeat center/contain;
  background:currentColor;transition:transform .4s var(--ease)}
.btn:hover::after{transform:translateX(.3em)}
.btn--solid{background:var(--accent);color:#fff;transition:background .5s linear,filter .3s}
.btn--solid:hover{filter:brightness(1.08)}
.btn--line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn--line:hover{background:var(--ink);color:#fff}

/* ============ Header ============ */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1rem,2.2vw,1.6rem) var(--pad-x);color:#fff;
  background:rgba(255,255,255,0);transition:padding .4s var(--ease),background .4s,box-shadow .4s,color .4s;
}
.header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);
  box-shadow:0 1px 0 var(--line);padding-top:clamp(.7rem,1.4vw,1rem);padding-bottom:clamp(.7rem,1.4vw,1rem);color:var(--ink)}
.header__logo{font-family:var(--en);font-weight:900;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:.5rem}
.header__logo img{height:1.7em;width:auto;display:block}
.header__logo span{color:rgba(255,255,255,.65);transition:color .4s;
  display:inline-block;transform:skewX(var(--shear));margin-left:.08em}
.header.scrolled .header__logo span{color:var(--accent-text)}
.gnav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.gnav__inner{display:contents}   /* PCでは透過（リンクを gnav 直下の行として扱う） */
.gnav__logo{display:none}        /* ロゴはモバイルメニュー時のみ表示 */
.gnav__logo img{height:1.7em;width:auto;display:block}
.gnav a{font-weight:500;font-size:1rem;letter-spacing:.02em;position:relative;padding:.3rem 0}
.gnav a:not(.gnav__cta)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--accent);transition:width .35s var(--ease)}
.gnav a:not(.gnav__cta):hover::after{width:100%}
/* お問い合わせ: 背景ベタを skewX(-30°) で筋交い化（CTAは逆方向）、文字は正立・余白広め。
   ブログとの間隔を margin-left で確保。ヒーローと同じ矢印演出を ::after で追加。
   （.gnav a の padding に詳細度で勝つため a.gnav__cta で指定） */
.gnav a.gnav__cta{display:inline-flex;align-items:center;gap:.8rem;
  position:relative;color:#fff;font-weight:700;font-size:1.0625rem;padding:1.1rem 2.7rem;z-index:0;
  background:transparent;margin-left:clamp(.8rem,2vw,2rem)}
.gnav a.gnav__cta::before{content:"";position:absolute;inset:0;background:var(--accent);
  transform:skewX(var(--shear));z-index:-1;transition:background .5s linear,filter .3s}
.gnav a.gnav__cta::after{content:"";width:1.6em;height:.6em;flex:0 0 auto;
  -webkit-mask:var(--arrow) no-repeat center/contain;
  mask:var(--arrow) no-repeat center/contain;
  background:currentColor;transition:transform .4s var(--ease)}
.gnav a.gnav__cta:hover::before{filter:brightness(1.08)}
.gnav a.gnav__cta:hover::after{transform:translateX(.3em)}
.gnav a:not(.gnav__cta){color:#fff}
.header.scrolled .gnav a:not(.gnav__cta){color:var(--ink)}
.burger{display:none;width:46px;height:46px;background:none;border:none;
  position:relative;cursor:pointer;font-size:1rem;color:inherit}
.burger span{position:absolute;left:12px;width:22px;height:2px;background:currentColor;transition:.3s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:26px}
.burger.open span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger.open span:nth-child(2){top:22px;transform:rotate(-45deg)}

/* ============ Splash ============ */
.splash{
  position:fixed;inset:0;z-index:900;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  transition:opacity .65s var(--ease);
  animation:om-splashFailsafe 1s ease 4s forwards;
}
@keyframes om-splashFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.splash.is-out{opacity:0;pointer-events:none}
.splash__logo{
  font-family:var(--en);font-weight:900;
  font-size:clamp(2.5rem,9vw,5.5rem);letter-spacing:.05em;
  color:#fff;
  opacity:0;transform:translateY(1rem);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.splash__logo span{
  color:var(--accent-orange);
  display:inline-block;transform:skewX(var(--shear));transition:none;
}
.splash.is-in .splash__logo{opacity:1;transform:none}
.splash__tag{
  font-size:clamp(.875rem,2vw,1.125rem);letter-spacing:.22em;
  color:rgba(255,255,255,.5);font-weight:300;
  opacity:0;transition:opacity .75s var(--ease) .35s;
}
.splash.is-in .splash__tag{opacity:1}
.splash__bar{
  position:absolute;bottom:0;left:0;height:3px;
  background:var(--accent-orange);
  width:0;transition:width 2.2s linear .1s;
}
.splash.is-in .splash__bar{width:100%}

/* ============ Gnav: ドロップダウン（PC） ============ */
.gnav__item{position:relative;display:inline-flex;align-items:center}
.gnav__hd{display:contents} /* PC: 透過。link が gnav flex item として参加 */
.gnav__tog{display:none}    /* PC: 非表示 */
/* ホバーギャップブリッジ：リンク下端〜ドロップ上端のギャップでhoverが切れるのを防ぐ */
.gnav__item--drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:1rem}
.gnav__drop{
  position:absolute;top:calc(100% + .8rem);left:50%;
  transform:translateX(-50%) translateY(-.5rem);
  background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  min-width:188px;padding:.4rem 0;list-style:none;
  border-top:2px solid var(--accent);
  opacity:0;visibility:hidden;pointer-events:none;z-index:10;
  transition:border-color .5s linear,opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.gnav__item:hover .gnav__drop{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);pointer-events:auto;
}
/* ドロップ内リンク：白背景の上に濃色で。既存の color:#fff ルールを上書き */
.gnav .gnav__drop a{
  display:block;padding:.6rem 1.4rem;
  color:var(--ink);font-size:.9375rem;font-weight:500;
  white-space:nowrap;transition:background .2s,color .2s;
}
.gnav .gnav__drop a::after{content:none} /* アンダーライン演出を抑制 */
.gnav .gnav__drop a:hover{background:var(--bg2);color:var(--accent-text)}
.gnav .gnav__drop a:hover::after{content:none}
.header.scrolled .gnav .gnav__drop a{color:var(--ink)} /* scrolled 時の上書き打消し */

/* ============ Section head ============ */
.sec-head{padding:var(--pad-y) var(--pad-x) clamp(1.5rem,4vw,3rem)}
/* 番号: 塗りチップをやめ、accent色（緑/オレンジ・切替）の極細数字を skewX(30°) で傾ける。
   サイズは英語見出し(--fs-en)と同等まで拡大。 */
.sec-head__no{
  font-family:var(--en);font-weight:200;font-size:calc(var(--fs-en) * 1.3);line-height:1;letter-spacing:.02em;
  color:var(--accent);display:inline-block;transform:skewX(var(--shear));transform-origin:left bottom;
  transition:color .5s linear;
}
.sec-head__en{font-family:var(--en);font-weight:900;font-size:var(--fs-en);line-height:.95;
  letter-spacing:-.02em;margin:.4rem 0 .2rem}
.sec-head__en .char{display:inline-block;transform:translateY(105%);opacity:0}
.is-in .sec-head__en .char,.sec-head__en.is-in .char{transform:none;opacity:1}
.sec-head__ja{color:var(--muted);font-size:var(--fs-label);letter-spacing:.18em;
  display:flex;align-items:center;gap:.8rem}
.sec-head__ja::before{content:"";width:70px;height:5px;background:var(--accent);
  transform:skewX(var(--shear));transition:background .5s linear}
.sec-head--invert .sec-head__en{color:#fff}
.sec-head--invert .sec-head__ja{color:rgba(255,255,255,.7)}

/* 共通の大きめリード */
.lead-big{font-size:var(--fs-lead);font-weight:700;line-height:1.55;margin-bottom:var(--gap)}

/* ============ Hero（メインビジュアル）============
   極大・極細の見出しを上下に分割し、中央右にコピーを挟む。背景は淡色（写真なし）。 */
.hero{min-height:clamp(640px,92svh,960px);position:relative;display:grid;
  grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);background:var(--bg2);
  padding:clamp(4.5rem,7vw,6rem) var(--pad-x) clamp(3rem,5vw,4.5rem);overflow:hidden}
.hero__title{display:contents}
.hero__line{display:block;grid-column:1;justify-self:stretch;position:relative;text-align:left;overflow:visible;z-index:1}
.hero__line--top{grid-row:1;overflow:visible;clip-path:inset(0 -9999px -100vh -9999px)}
.hero__line--top .hero__lineInner{transform:translateX(calc(-50% + 9vw)) skewX(var(--shear)) translateY(-0.12em)}
.hero--spread .hero__line--top .hero__lineInner{letter-spacing:5vw;transform:translateX(calc(-50% + 9vw)) skewX(var(--shear)) translateY(-0.12em)}
.hero__line--bottom{grid-row:3}
.hero__line--bottom .hero__lineInner{transform:translateX(calc(-50% + 9vw)) skewX(var(--shear)) translateY(0.12em)}
.hero--spread .hero__line--bottom .hero__lineInner{letter-spacing:5vw;transform:translateX(calc(-50% + 9vw)) skewX(var(--shear)) translateY(0.12em)}
/* 幅に依存せず中央固定。字間拡大で中央の文字を軸に左右へ開く */
.hero__lineInner{display:inline-block;white-space:nowrap;position:relative;left:50%;
  font-family:var(--sans);font-weight:300;color:#fff;line-height:1.04;
  font-size:min(clamp(3.25rem,18vw,16rem), 21svh);letter-spacing:-.01em;
  transform:translateX(calc(-50% + 9vw)) skewX(var(--shear));transform-origin:center;
  transition:letter-spacing 1.6s var(--ease);
  text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero--spread .hero__lineInner{letter-spacing:5vw}
.hero__mid{grid-row:2;grid-column:1;display:flex;align-items:center;justify-content:flex-end;z-index:1}
.hero__copy{display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  gap:0;max-width:40rem}
.hero__sub{font-weight:700;font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);letter-spacing:.08em;
  color:#fff;margin-bottom:.6rem}
.hero__lead{font-size:var(--fs-body);color:rgba(255,255,255,.88);line-height:1.85;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.hero__lead-sp{display:none}
.hero__cta{display:flex;flex-wrap:nowrap;gap:1rem;justify-content:flex-end}
.hero .btn--line{color:#fff;border-color:rgba(255,255,255,.75)}
.hero .btn--line:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
.hero__scroll{position:absolute;left:var(--pad-x);bottom:clamp(1.6rem,4vw,3rem);z-index:1;
  display:flex;align-items:center}
.hero__scroll i{width:48px;height:2px;background:var(--line);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--accent);
  animation:scrline 1.8s var(--ease) infinite;transition:background .5s linear}
@keyframes scrline{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---- Hero background slideshow ---- */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.5) 100%)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease;z-index:0}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transition:none;filter:none;transform:scale(1.06)}
.hero__slide:nth-child(1) img{animation:hero-drift-r 16s ease-in-out infinite alternate}
.hero__slide:nth-child(2) img{animation:hero-drift-l 16s ease-in-out infinite alternate;animation-delay:-5.3s}
.hero__slide:nth-child(3) img{animation:hero-drift-r 16s ease-in-out infinite alternate;animation-delay:-10.7s}
@keyframes hero-drift-r{from{transform:scale(1.06) translateX(-1.5%)}to{transform:scale(1.06) translateX(1.5%)}}
@keyframes hero-drift-l{from{transform:scale(1.06) translateX(1.5%)}to{transform:scale(1.06) translateX(-1.5%)}}
@media(prefers-reduced-motion:reduce){.hero__slide img{animation:none!important}}

/* ============ About ============ */
.about__body{padding:0 var(--pad-x) var(--gap);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.about__big{font-size:var(--fs-h2);font-weight:900;line-height:1.5;margin-bottom:1.4rem}
.about__big em{color:var(--accent-text);font-style:normal}
.about__txt{color:var(--muted);margin-bottom:2rem}
/* 筋交い「X」: 2枚を重ね、逆向きシアーで交差 */
.cross{position:relative;aspect-ratio:10/9}
.cross .shimg{position:absolute;width:72%;aspect-ratio:16/11;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.cross .shear{top:0;left:0;z-index:1;width:90%}
.cross .shear--alt{bottom:0;right:0;z-index:2;width:50%}

/* ============ Interlude（ABOUT–SERVICE間のスパニング写真帯） ============
   写真の高さ ≒ 45vw × 8/21 = 17.143vw（margin-left:55% → 残り45%が写真幅）
   スキューの張り出し(tan30°×高さ)を考慮してmargin-leftを右寄せに。
   margin-top + height + margin-bottom = 0 にして、レイアウトへの影響をゼロにする。
   セクション間の余白は .about__body と .service>.sec-head の padding で独立制御。 */
.interlude{overflow:hidden;position:relative;z-index:1;
  margin-top:calc(-1 * var(--gap));
  margin-bottom:calc(-17.143vw + var(--gap))}
.interlude .shimg{margin-left:55%;aspect-ratio:21/8;width:auto;min-width:0}

/* ============ Service ============ */
.service>.sec-head{padding-top:var(--gap)}
.service__inner{padding:0 var(--pad-x) var(--pad-y)}
.cards{display:grid;gap:var(--gap)}
.cards--2{grid-template-columns:1fr 1fr;margin-bottom:var(--gap)}
.card{border:1.5px solid var(--line);padding:clamp(2rem,3.5vw,3rem);position:relative;
  background:var(--bg);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 24px 50px rgba(0,0,0,.08)}
.card__no{font-family:var(--en);font-weight:200;font-size:var(--fs-en);line-height:1;letter-spacing:.02em;
  color:var(--accent);display:block;margin-bottom:.4rem;
  transform:skewX(var(--shear));transform-origin:left bottom;transition:color .5s linear}
.card__no::before{content:none}
.card__ttl{font-size:var(--fs-h3);font-weight:900;margin:1rem 0 .7rem}
.card__ttl small{font-size:var(--fs-label);font-weight:700;color:var(--accent-text);transition:color .5s linear}
.card__txt{color:var(--muted)}

/* ============ Reason ============ */
.reason__list{padding:0 var(--pad-x);display:grid;gap:0;margin-bottom:var(--gap)}
.reason__item{padding:clamp(1.6rem,3vw,2.6rem) 0;border-top:1.5px solid var(--line);
  display:grid;grid-template-columns:1fr clamp(280px,34vw,440px);grid-template-rows:auto 1fr;
  gap:0 clamp(2rem,4vw,4rem);align-items:start}
.reason__item:last-child{border-bottom:1.5px solid var(--line)}
.reason__ttl{grid-column:1;font-size:var(--fs-h3);font-weight:900;margin-bottom:.6rem;line-height:1.4}
.reason__txt{grid-column:1;color:var(--muted);max-width:62ch}
.reason__item .shimg{grid-column:2;grid-row:1/span 2;width:100%;aspect-ratio:3/2;align-self:center}
.reason>.btn{margin:0 var(--pad-x) var(--pad-y)}

/* Reason: 4枚カードのグリッド（空白をなくし密度を上げた独自レイアウト） */
.reasongrid{padding:0 var(--pad-x);margin:0 0 var(--gap);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,2.8vw,2.4rem)}
.rcard{position:relative;display:flex;flex-direction:column}
.rcard__fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg2);margin-bottom:1.1rem}
.rcard__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);
  transition:transform 1s var(--ease);filter:grayscale(.08) contrast(1.04)}
.rcard:hover .rcard__fig img{transform:scale(1.09)}
.rcard__fig::after{content:"";position:absolute;left:0;bottom:0;width:46%;height:.8rem;
  background:var(--accent);transform:skewX(var(--shear-alt));transform-origin:left bottom;
  transition:background .5s linear}
.rcard__no{font-family:var(--en);font-weight:200;font-size:clamp(2rem,3.4vw,2.8rem);line-height:.9;
  color:var(--accent);display:inline-block;transform:skewX(var(--shear));transform-origin:left bottom;
  transition:color .5s linear}
.rcard__ttl{font-size:1.2rem;font-weight:900;line-height:1.45;margin:.5rem 0 .5rem}
.rcard__txt{color:var(--muted);line-height:1.85;font-size:1rem}
@media(max-width:1024px){.reasongrid{grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,2.4rem)}}
@media(max-width:560px){.reasongrid{grid-template-columns:1fr}}
/* ============ Numbers（背景の囲みのみ skewX(-30°)・中身は正立） ============ */
.numbers{background:transparent;position:relative;overflow:hidden}
.numbers__list{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  margin-inline:var(--pad-x);padding:clamp(2.5rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem)}
/* 背景の黒い囲みだけを skewX(-30°)。数字・区切り線は正立のまま囲みの内側に収める */
.numbers__list::before{content:"";position:absolute;
  top:0;bottom:0;left:calc(-1 * var(--pad-x));right:calc(-1 * var(--pad-x));
  background:var(--ink);transform:skewX(var(--shear));z-index:0}
.num-item{position:relative;z-index:1;text-align:center;
  padding:clamp(1.2rem,3vw,2rem) clamp(.5rem,2vw,1.25rem)}
.num-item:not(:last-child)::after{content:"";position:absolute;right:0;top:8%;height:84%;
  width:1px;background:rgba(255,255,255,.22);
  transform:skewX(var(--shear));transform-origin:center}
.num-item>*{display:block}
.num-item__val{font-family:var(--en);font-weight:900;font-size:var(--fs-num);line-height:1;
  color:var(--accent);transition:color .5s linear;white-space:nowrap}
/* 「名」「万」「時間」など付属の単位は数字より小さく（数字は大きいまま） */
.num-unit{font-size:.4em;font-weight:700;margin-left:.1em;letter-spacing:.02em}
.num-item__label{margin-top:1rem;color:rgba(255,255,255,.75);font-size:var(--fs-label);letter-spacing:.04em;
  min-height:3.4em}  /* ラベル行数の不揃いで下端がガタつくのを抑える */
.num-item__label small{display:block;font-size:1rem;opacity:.6;margin-top:.2rem}
/* タブレット以下：2×2＋周囲の余白を広めに（デバイス幅に対して窮屈にならないよう） */
@media(max-width:1024px){
  .numbers__list{grid-template-columns:1fr 1fr;margin-inline:clamp(1.5rem,7vw,4rem);
    padding:clamp(2rem,5vw,3rem) clamp(1.5rem,5vw,3rem);row-gap:0}
  .num-item{padding-block:clamp(1.6rem,5vw,2.4rem)}
  .num-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
  .num-item:nth-child(2n){border-right:none}
  .num-item:nth-child(2n)::after{display:none}
  .reason__item{grid-template-columns:1fr;padding-block:clamp(1.4rem,4vw,2.4rem)}
  .reason__item .shimg{grid-column:1;grid-row:auto;margin-top:1.2rem;aspect-ratio:16/9;width:70%}
}

/* ============ Works ============ */
.works__gallery{padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gap);margin-bottom:var(--gap)}
/* wcard: トップ・下層ページ共通カード */
.wcard{display:block}
.wcard .shimg{aspect-ratio:3/2;margin-bottom:1rem;overflow:hidden;background:var(--bg2)}
.wcard .shimg img{width:100%;height:100%;object-fit:cover;transform:none;transition:transform .8s var(--ease)}
.wcard:hover .shimg img{transform:scale(1.06)}
.wcard__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.wcard .tag{font-size:1rem}
.wcard__ttl{font-size:1.2rem;font-weight:700;line-height:1.55}
.wcard:hover .wcard__ttl{color:var(--accent-text);transition:color .3s}
.wcard__txt,.wcard__meta{color:var(--muted);font-size:1rem;line-height:1.8;margin-top:.4rem}
.works>.btn{margin:0 var(--pad-x) var(--pad-y)}

/* ============ Recruit（採用の入口）＝インパクト重視のダーク帯 ============ */
.recruit{background:var(--ink);color:#fff;overflow:hidden}
.recruit__inner{padding:var(--pad-y) var(--pad-x)}
.recruit__lead{font-family:var(--en);font-weight:800;letter-spacing:.32em;color:var(--accent);
  font-size:var(--fs-label);margin-bottom:1.4rem;transition:color .5s linear}
.recruit__ttl{font-size:clamp(2rem,1.2rem + 3vw,3.6rem);font-weight:900;line-height:1.4;
  margin-bottom:1.2rem;color:#fff;letter-spacing:.01em}
.recruit__ttl em{color:var(--accent);filter:saturate(.75) brightness(1.08)}
.recruit__txt{color:rgba(255,255,255,.7);font-size:var(--fs-lead);font-weight:500;
  margin-bottom:clamp(2.5rem,5vw,4rem)}
.recruit__facts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  margin:0 calc(-1 * var(--pad-x)) clamp(2.5rem,5vw,4rem)}
.recruit__facts::before{content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.07);transform:skewX(var(--shear));z-index:0}
.recruit__facts>li{position:relative;z-index:1;text-align:center;
  padding:clamp(1.6rem,3vw,2.4rem) clamp(.5rem,2vw,1rem)}
.recruit__facts>li:not(:last-child)::after{content:"";position:absolute;right:0;top:8%;height:84%;
  width:1px;background:rgba(255,255,255,.22);transform:skewX(var(--shear));transform-origin:center}
.recruit__facts b{font-family:var(--en);font-weight:900;font-size:var(--fs-num);
  line-height:1;color:var(--accent);display:block;transition:color .5s linear}
.recruit__facts b small{font-size:.4em;font-weight:700;margin-left:.06em}
.recruit__facts span{display:block;margin-top:1rem;font-size:var(--fs-label);
  color:rgba(255,255,255,.75);letter-spacing:.04em}
.recruit__facts span small{display:block;font-size:1rem;opacity:.6;font-weight:400;margin-top:.2rem}
.recruit__factslabel{font-weight:900;font-size:1.2rem;color:#fff;margin-bottom:1.3rem;
  display:flex;align-items:center;gap:.8rem}
.recruit__factslabel::before{content:"";width:48px;height:4px;flex:0 0 auto;
  background:var(--accent);transform:skewX(var(--shear));transition:background .5s linear}
.recruit__facts--4{grid-template-columns:repeat(4,1fr)}

/* ============ 代表メッセージ ============ */
.message__body{padding:0 var(--pad-x) var(--pad-y);display:grid;
  grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* 写真は skew させない（本文に食い込むため）。画像は正立で cover 表示 */
.message__photo{width:100%;aspect-ratio:3/4}
.message__photo img{transform:none}
.message__quote p{font-size:var(--fs-lead);font-weight:700;line-height:1.7;margin-bottom:1.2rem}
.message__quote p:last-of-type{font-size:var(--fs-body);font-weight:500;color:var(--muted)}
.message__quote cite{display:block;font-style:normal;font-weight:700;margin:1.5rem 0 2rem;letter-spacing:.08em}

/* ============ NEWS ============ */
.news__list{padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gap);margin-bottom:var(--gap)}
.news__item .shimg{width:100%;aspect-ratio:3/2;margin-bottom:1.2rem}
.news__item .shimg img{transform:none}
.news__item a:hover .shimg img{transform:scale(1.05)}
.news__meta time{font-family:var(--en);font-weight:700;letter-spacing:.06em;font-size:1rem;color:var(--muted)}
.news__meta time small{font-size:.95em;opacity:.8;margin-left:.3em}
/* カテゴリはチップをやめ、シンプルな小ラベルに */
.news__meta .tag{margin-left:.8rem;padding:0;background:none;color:var(--accent-text);
  font-family:var(--en);font-weight:800;font-size:1rem;letter-spacing:.06em}
.news__meta .tag::before{display:none}
.news__meta h3{font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);font-weight:700;margin-top:.7rem;line-height:1.55}
.news__item a:hover h3{color:var(--accent-text);transition:color .3s}
.news>.btn{margin:0 var(--pad-x) var(--pad-y)}

/* ============ CTA（受注/採用 分離） ============ */
.cta__split{display:grid;grid-template-columns:1fr 1fr}
.cta__col{padding:var(--pad-y) var(--gutter);display:flex;flex-direction:column;align-items:flex-start}
/* 2色帯は全幅のまま、中身は中央のコンテンツ幅に合わせて寄せる（広い画面で間延びさせない） */
.cta__col--order{background:var(--ink);color:#fff;
  padding-left:max(var(--gutter), calc(100% - var(--content-max) / 2));align-items:flex-start}
.cta__col--recruit{background:var(--accent);color:#fff;transition:background .5s linear;
  padding-right:max(var(--gutter), calc(100% - var(--content-max) / 2))}
.cta__label{font-family:var(--en);font-weight:800;letter-spacing:.25em;font-size:var(--fs-label);
  opacity:.85;margin-bottom:1.2rem}
.cta__ttl{font-size:var(--fs-h2);font-weight:900;line-height:1.3;margin-bottom:1.2rem}
.cta__txt{margin-bottom:2.2rem;opacity:.9;max-width:34ch}
.cta__col--order .btn--solid{background:var(--accent)}
.cta__col--recruit .btn--solid{background:#fff;color:var(--ink)}

/* ============ Footer ============ */
.footer{background:var(--ink);color:#fff;padding:var(--pad-y) var(--pad-x) clamp(2rem,4vw,3rem);overflow:hidden}
.footer__top{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  padding-bottom:clamp(3rem,6vw,5rem)}
.footer__logo{font-family:var(--en);font-weight:900;font-size:clamp(1.5rem,3vw,2rem);
  display:inline-flex;align-items:center;gap:.55rem}
.footer__logo img{height:1.5em;width:auto;display:block}
.footer__logo span{color:var(--accent);transition:color .5s linear;
  display:inline-block;transform:skewX(var(--shear));margin-left:.08em}
.footer__name{font-weight:700;margin-top:.6rem}
.footer__addr,.footer__tel{color:rgba(255,255,255,.7);font-size:var(--fs-label);margin-top:.6rem}
.footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:.3rem 1.5rem;align-content:start}
.footer__nav a{color:rgba(255,255,255,.85);font-size:var(--fs-label);position:relative;width:fit-content;
  padding:.5rem 0;display:inline-flex;align-items:center}  /* タップ領域 ≥44px 確保 */
.footer__nav a:hover{color:var(--accent);transition:color .3s}
.footer__big{font-family:var(--en);font-weight:900;font-size:clamp(4rem,22vw,18rem);line-height:.85;
  letter-spacing:-.03em;color:var(--accent);-webkit-text-stroke:none;
  transform:skewX(var(--shear));transform-origin:left;margin:1rem 0;
  transition:color .5s linear;opacity:.75}
.footer__copy{color:rgba(255,255,255,.55);font-size:1rem;letter-spacing:.04em}

/* ============ Reveal ============ */
.reveal-up{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease),transform .9s var(--ease);
  animation:om-reveal-failsafe .9s var(--ease) 1.8s both}
.reveal-up.is-in{opacity:1;transform:none;animation:none}
/* JS/IntersectionObserver が発火しない環境でも必ず表示（デプロイ時のレイアウト崩れ防止） */
@keyframes om-reveal-failsafe{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
.hero__title .line>span{transition:transform 1s var(--ease)}
.hero.is-in .hero__title .line>span{transform:none}

/* =========================================================
   Breakpoint 1: 1240px — ナビがハンバーガーに
   ========================================================= */
@media(max-width:1240px){
  :root{--gutter:clamp(2.1875rem,8.75vw,5rem)}  /* 1.75× */
  .burger{display:block;z-index:560}
  .gnav{position:fixed;inset:0;width:100%;height:100vh;background:#fff;
    flex-direction:column;justify-content:flex-start;align-items:center;gap:1rem;
    padding:3rem var(--gutter) 1rem;overflow-y:auto;
    transform:translateX(100%);transition:transform .4s var(--ease),visibility .4s;
    visibility:hidden;z-index:540}
  .gnav::-webkit-scrollbar{width:6px}
  .gnav::-webkit-scrollbar-track{background:transparent}
  .gnav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .gnav.open{transform:none;visibility:visible}
  .gnav__logo{display:none}
  .gnav__inner{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1rem;margin-bottom:auto;width:100%}
  .gnav a:not(.gnav__cta){color:var(--ink)}
  .gnav a{font-size:clamp(1rem,2.5vw,1.25rem)}
  .gnav a.gnav__cta{padding:1rem 2.4rem;margin-left:0;margin-top:2rem}
  /* ---- Gnav: ドロップダウン（モバイル・アコーディオン） ---- */
  .gnav__item--drop::after{display:none} /* PCブリッジをモバイルで無効化 */
  .gnav__item{display:block;width:100%}
  .gnav__hd{display:flex;align-items:center;justify-content:space-between;width:100%}
  .gnav__hd > a,
  .gnav__item:not(.gnav__item--drop) > a,
  .gnav__inner > a:not(.gnav__cta){font-size:clamp(1.25rem,3vw,1.6rem);color:var(--ink)}
  .gnav__hd > a{flex:1}
  .gnav__tog{display:none}
  .gnav__drop{
    position:static;transform:none;
    opacity:1;visibility:visible;pointer-events:auto;
    background:none;box-shadow:none;border-top:none;
    border-left:2px solid var(--accent);
    padding:0 0 0 1.1rem;margin-top:.5rem;margin-left:0;
    max-height:none;overflow:visible;
    transition:border-color .5s linear;
    min-width:0;z-index:auto;
  }
  .gnav .gnav__drop a{
    padding:.55rem 1.1rem;font-size:1rem;color:var(--ink);
  }
  .numbers__list::before{left:calc(-1 * clamp(1.5rem,7vw,4rem));right:calc(-1 * clamp(1.5rem,7vw,4rem))}
  .footer__big{font-size:clamp(3.5rem,19vw,18rem)}
}

/* =========================================================
   Breakpoint 2: 640px — シングルカラム
   ========================================================= */
@media(max-width:640px){
  :root{--gutter:clamp(2rem,7.5vw,3.5rem)}  /* 1.75× mobile */
  /* hero: ファーストビュー内に全要素を収める */
  .hero{padding-top:clamp(4.5rem,9vh,6.5rem);padding-bottom:clamp(1.2rem,3vh,2rem);min-height:100svh}
  .hero__lineInner{font-size:clamp(2.5rem,13vw,16rem)}
  .hero__mid{justify-content:stretch}
  .hero__copy{align-items:flex-end;text-align:right;max-width:none;width:100%}
  .hero__sub{font-size:clamp(1.1rem,5.2vw,1.5rem);letter-spacing:.04em;white-space:nowrap}
  .hero__lead-pc{display:none}
  .hero__lead-sp{display:inline}
  .hero__cta{justify-content:flex-end;flex-wrap:wrap}
  .hero__cta .btn{flex:1 1 100%}
  .about__body{grid-template-columns:1fr;gap:3rem}
  .interlude{display:none}
  /* 狭幅では横並び＋±30°が重なり潰れるため、縦積みの逆シアー（ジグザグ）に */
  .cross{min-height:auto;aspect-ratio:auto;display:grid;grid-template-columns:1fr;gap:1.4rem}
  .cross .shimg{position:static;width:100%;aspect-ratio:16/10;box-shadow:none}
  .cards--2{grid-template-columns:1fr}
  .reason__item{grid-template-columns:1fr;padding-block:clamp(1.2rem,5vw,2rem)}
  .reason__item .shimg{grid-column:1;grid-row:auto;margin-top:1rem;aspect-ratio:16/9}
  .works__gallery{grid-template-columns:1fr;gap:2.5rem}
  .recruit__facts{grid-template-columns:1fr;margin-inline:0}
  .recruit__facts>li{text-align:left}
  .recruit__facts>li:not(:last-child)::after{display:none}
  .recruit__facts>li:not(:last-child){border-bottom:1px solid rgba(255,255,255,.16)}
  .message__body{grid-template-columns:1fr;gap:2rem}
  .news__list{grid-template-columns:1fr;gap:2.5rem}
  .cta__split{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:2.5rem}
  .numbers__list{margin-inline:0;padding-inline:clamp(1rem,5vw,2rem)}
  .numbers__list::before{left:-3rem;right:-3rem}
  .recruit__facts::before{left:-3rem;right:-3rem}
  .footer__big{font-size:clamp(3.5rem,19vw,18rem)}
}

/* ============ reduced-motion: 配色は固定オレンジ・動き停止 ============ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  :root{--accent:var(--accent-orange);--accent-text:var(--accent-orange)}
  .reveal-up,.sec-head__en .char,.hero__title .line>span{opacity:1!important;transform:none!important}}

/* ============ レスポンシブ・タイポ調整（トップページ／不自然な改行の抑制） ============ */
.about__big,.rcard__ttl,.recruit__ttl,.message__quote p,.hero__sub{text-wrap:balance}
.about__txt,.rcard__txt,.recruit__txt,.card__txt,.reason__txt,.num-item__label{text-wrap:pretty}
@media(max-width:720px){
  /* 本文コピー中の手動改行を無効化（自然な折返しに任せる） */
  .recruit__txt br,.message__quote p:not(:first-child) br,.about__txt br{display:none}
}
@media(max-width:520px){
  /* 極小画面では見出し・カードタイトルの手動改行も自然折返しへ */
  .rcard__ttl br,.recruit__ttl br,.about__big br,.message__quote p:first-child br{display:none}
}

/* ===== sub.css（受領・下層共通）===== */
/* =========================================================
   株式会社鈴木興業 — 下層ページ共通パーツ（style.css を継承して使用）
   方針: トップと同じ設計言語を流用
     - 筋交いシアー ±30°（--shear / --shear-alt / --img-scale）
     - 配色切替 オレンジ⇄グリーン（--accent / --accent-text を JS が更新）
     - clamp 流動・フォント下限 ≥1rem
     - BP は 1240px / 640px の2点のみ
   命名: 下層専用は短い接頭辞で衝突回避（pg- / crumbs / lead / media / steps …）
   ※ どのパーツも「文字量が増えても崩れない」ことを最優先に設計。
     見出しは折返し前提、表はラベル幅可変、カードは高さ揃え、英大文字は overflow-wrap。
   ========================================================= */

/* ---- 下層共通の小トークン ---- */
:root{
  --pad-y-sub:clamp(3.5rem, 7vw, 7rem);     /* 下層セクションの上下（トップより気持ち詰める） */
  --measure:74ch;                            /* 本文の最適行長 */
  --radius:0;                                /* 角は立てる（硬質トーン維持） */
  --soft:0 24px 50px rgba(0,0,0,.08);
  --soft-lg:0 30px 60px rgba(0,0,0,.16);
}

/* 中央寄せの内側ラッパ（pad-x はトップと共通の左右余白ロジック） */
.wrap{padding-inline:var(--pad-x)}
/* 下層ページではセクション番号（数字読み）を非表示に＝見出しをすっきり */
.sec-head__no{display:none}
/* セクション下端／上下の縦余白ユーティリティ（旧インラインstyleを集約） */
.wrap--pb{padding-bottom:var(--pad-y-sub)}
.wrap--py{padding-block:var(--pad-y-sub)}
.section--sub{padding-block:var(--pad-y-sub)}
.section--tint{background:var(--bg2)}
.section--dark{background:var(--ink);color:#fff}

/* =========================================================
   01. ページヘッダー（下層FV）pg-hero
   - 大きな EN 見出し（極細）＋ 和文サブ ＋ パンくず ＋ リード
   - 背景に斜めの写真フレーム（筋交い）。文字は正立で可読性確保。
   ========================================================= */
.pg-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:clamp(7.5rem,14vw,11rem) var(--pad-x) clamp(3rem,6vw,5rem)}
.pg-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* 写真は右側に斜めフレームで配置。文字側（左）はグラデで沈める */
.pg-hero__fig{position:absolute;top:-10%;right:-12%;width:min(58%,720px);height:120%;
  overflow:hidden;transform:skewX(var(--shear));background:var(--bg2)}
.pg-hero__fig img{width:100%;height:100%;object-fit:cover;
  transform:skewX(var(--unshear)) scale(var(--img-scale));
  filter:grayscale(.12) contrast(1.05) brightness(.85)}
.pg-hero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(17,17,17,.96) 38%,rgba(17,17,17,.55) 62%,rgba(17,17,17,.25) 100%)}
.pg-hero__inner{position:relative;z-index:2;max-width:var(--content-max);margin-inline:auto;width:100%}
.pg-hero__en{font-family:var(--en);font-weight:200;line-height:.95;letter-spacing:-.01em;
  font-size:var(--fs-en);color:#fff;overflow-wrap:anywhere}
.pg-hero__en span{display:inline-block;transform:skewX(var(--shear));transform-origin:left bottom}
.pg-hero__ja{display:flex;align-items:center;gap:.9rem;margin-top:1rem;
  font-size:var(--fs-h3);font-weight:900;letter-spacing:.04em}
.pg-hero__ja::before{content:"";width:64px;height:5px;background:var(--accent);flex:0 0 auto;
  transform:skewX(var(--shear));transition:background .5s linear}
.pg-hero__lead{margin-top:1.6rem;max-width:none;color:rgba(255,255,255,.82);
  font-size:var(--fs-body);line-height:1.95}

/* =========================================================
   02. パンくず crumbs（pg-hero 内でも単体でも使える）
   ========================================================= */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .6rem;
  font-size:1rem;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.crumbs--ink{color:var(--muted)}                 /* 白背景に置くとき */
.crumbs li{display:inline-flex;align-items:center;gap:.6rem}
.crumbs li:not(:last-child)::after{content:"";width:.5em;height:.5em;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.6;margin-left:.2rem}
.crumbs a{color:inherit;transition:color .3s}
.crumbs a:hover{color:var(--accent-text)}
.crumbs [aria-current]{color:#fff;font-weight:700}
.crumbs--ink [aria-current]{color:var(--ink)}
/* パンくずバー: 下層ヘッダー(pg-hero)の直下・外側に置く白背景の帯 */
.crumb-bar{padding-block:clamp(.85rem,2vw,1.25rem);border-bottom:1.5px solid var(--line);background:var(--bg)}
.crumb-bar .crumbs{max-width:var(--content-max);margin-inline:auto}

/* =========================================================
   03. セクション見出し（下層版）sec-head は流用。
   下層では番号なしの簡易見出し lead-head も用意。
   ========================================================= */
.lead-head{max-width:var(--content-max);margin-inline:auto;margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.lead-head__en{font-family:var(--en);font-weight:800;letter-spacing:.28em;
  font-size:var(--fs-label);color:var(--accent-text);transition:color .5s linear}
.lead-head__ttl{font-size:var(--fs-h2);font-weight:900;line-height:1.45;margin-top:.6rem;
  letter-spacing:.01em}
.lead-head__ttl em{color:var(--accent-text)}
.section--dark .lead-head__ttl{color:#fff}
.section--dark .lead-head__en{color:var(--accent)}
/* 見出し左／本文右の編集的2カラム。本文はコンテンツ幅いっぱいまで伸びる */
.intro-split{max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,clamp(20rem,38%,30rem)) 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:start}
.intro-split .lead-head{margin:0}
/* 本文の先頭をタイトル1行目（キッカーの下）に合わせる */
.intro-split .prose{max-width:none;margin-top:calc(var(--fs-label)*1.75 + .6rem)}
.intro-split .prose p{max-width:none}
/* intro-split 直後のコンテンツブロックに上マージンを付与 */
.intro-split + .features,
.intro-split + .spec,
.intro-split + .form,
.intro-split + .map-embed{margin-top:clamp(2.5rem,5vw,4rem)}
.map-embed{border-radius:4px;overflow:hidden;aspect-ratio:16/7}

/* =========================================================
   04. 本文リード prose（長文が崩れない素の文章ブロック）
   ========================================================= */
.prose{max-width:var(--content-max);margin-inline:auto}
.prose>*+*{margin-top:1.3em}
.prose p{max-width:var(--measure);color:var(--ink);line-height:1.95}
.prose .muted{color:var(--muted)}
.prose h3{font-size:var(--fs-h3);font-weight:900;line-height:1.5;margin-top:2.4em}
.prose h4{font-size:1.2rem;font-weight:700;line-height:1.6;margin-top:1.8em;
  padding-left:.9rem;border-left:4px solid var(--accent);transition:border-color .5s linear}
.prose strong{font-weight:700}
.prose em{color:var(--accent-text)}
.prose a:not(.btn){color:var(--accent-text);text-decoration:underline;text-underline-offset:.25em;
  text-decoration-thickness:1.5px}
.prose ul.dots{max-width:var(--measure)}
.prose ul.dots li{position:relative;padding-left:2.6em;line-height:1.9}
.prose ul.dots li+li{margin-top:.5em}
.prose ul.dots li::before{content:"";position:absolute;left:0;top:.85em;width:1.8em;height:.25em;
  background:var(--accent);transform:skewX(var(--shear));transition:background .5s linear}

/* =========================================================
   05. メディア＋テキスト media（2カラム。--reverse で左右反転＝ジグザグ用）
   - 画像は筋交いシアー。テキストが長くても画像高さに引っ張られないよう align-start。
   ========================================================= */
.media{max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.media+.media{margin-top:clamp(3rem,7vw,6rem)}
/* 列内の写真は正立（フレームを skew すると画面端まで食い込むため）。
   筋交いの気配は overflow:hidden 内に収まる斜めアクセント帯で表現＝はみ出さない。 */
.media__fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg2);box-shadow:var(--soft)}
.media__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);
  transition:transform 1s var(--ease);filter:grayscale(.06) contrast(1.04)}
.media__fig:hover img{transform:scale(1.09)}
.media__fig::after{content:"";position:absolute;left:0;bottom:0;width:54%;height:1rem;
  background:var(--accent);transform:skewX(var(--shear-alt));transform-origin:left bottom;
  transition:background .5s linear}
.media--reverse .media__fig::after{left:auto;right:0;transform:skewX(var(--shear));transform-origin:right bottom}
.media--reverse .media__body{order:-1}
.media__kicker{font-family:var(--en);font-weight:800;letter-spacing:.22em;font-size:var(--fs-label);
  color:var(--accent-text);transition:color .5s linear}
.media__ttl{font-size:var(--fs-h2);font-weight:900;line-height:1.45;margin:.7rem 0 1.1rem}
.media__ttl em{color:var(--accent-text)}
.media__txt{color:var(--muted);line-height:1.95;max-width:60ch}
.media__txt+.media__txt{margin-top:1.1rem}
.media__body .btn{margin-top:1.8rem}
/* 小見出し付きの箇条（メディア本文内） */
.media__points{margin:1.4rem 0 0;display:grid;gap:.7rem}
.media__points li{position:relative;padding-left:2.6rem;color:var(--ink);line-height:1.8}
.media__points li::before{content:"";position:absolute;left:0;top:.72em;width:1.8em;height:.175em;
  background:var(--accent);transform:skewX(var(--shear));transition:background .5s linear}

/* =========================================================
   06. 斜め写真の全幅帯 band（区切りのリズム作り。トップの interlude 発展）
   ========================================================= */
.band{position:relative;overflow:hidden;height:clamp(220px,34vw,460px);background:#fff}
/* 写真は右寄せの斜め帯。左に白い余白を作り、そこにキャプションを黒文字で置く */
.band__fig{position:absolute;inset:-10% 7% -10% 46%;overflow:hidden;transform:skewX(var(--shear-alt))}
.band__fig img{width:100%;height:100%;object-fit:cover;
  transform:skewX(var(--unshear-alt)) scale(var(--img-scale));filter:grayscale(.1) contrast(1.05)}
.band__cap{position:absolute;left:var(--pad-x);bottom:clamp(1.4rem,4vw,2.6rem);z-index:2;
  color:var(--ink);max-width:none}
.band__cap b{display:block;font-size:clamp(1.6rem,2.9vw,2.5rem);font-weight:900;line-height:1.4;margin-top:.4rem}
.band__cap span{font-family:var(--en);font-weight:800;letter-spacing:.2em;font-size:1rem;
  color:var(--accent)}

/* =========================================================
   07. 注釈・補足ボックス callout（注意/ポイント/補足の3トーン）
   ========================================================= */
.callout{max-width:var(--content-max);margin-inline:auto;position:relative;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);
  background:var(--bg2);border-left:5px solid var(--accent);transition:border-color .5s linear}
.callout__label{display:inline-flex;align-items:center;gap:.8rem;font-weight:900;
  font-size:1rem;letter-spacing:.08em;margin-bottom:.6rem;color:var(--accent-text);
  transition:color .5s linear}
.callout__label::before{content:"!";font-family:var(--en);font-weight:200;
  font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;
  color:var(--accent);transform:skewX(var(--shear));transition:color .5s linear}
.callout p{line-height:1.9}
.callout--note{border-left-color:var(--muted);background:#fafafa}
.callout--note .callout__label{color:var(--muted)}
.callout--note .callout__label::before{content:"i";color:var(--muted)}

/* =========================================================
   08. プロセス／ステップ steps（縦の連結タイムライン。長文に強い）
   ========================================================= */
.steps{max-width:var(--content-max);margin-inline:auto;display:grid;gap:0}
.step{position:relative;display:grid;grid-template-columns:clamp(3.4rem,7vw,5rem) 1fr;
  gap:clamp(1.2rem,3vw,2.4rem);padding:clamp(1.6rem,3.5vw,2.8rem) 0}
.step+.step{border-top:1.5px solid var(--line)}
/* 区切り線から少しだけ下りる短い縦タブ（数字とは重ならない高さ・区切り線と同色） */
.step+.step::before{content:"";position:absolute;left:calc(clamp(3.4rem,7vw,5rem)/2 - 1px);
  top:0;height:clamp(1rem,2.2vw,1.6rem);width:1.5px;background:var(--line);z-index:1}
.step__no{position:relative;z-index:1;align-self:start;
  width:clamp(3.4rem,7vw,5rem);height:auto;background:none;
  display:block;padding-top:.15em}
.step__no span{font-family:var(--en);font-weight:200;
  font-size:clamp(2.4rem,5.5vw,3.8rem);line-height:1;
  color:var(--accent);display:inline-block;
  transform:skewX(var(--shear));transform-origin:left bottom;
  transition:color .5s linear}
.step__body{align-self:center}
.step__ttl{font-size:var(--fs-h3);font-weight:900;line-height:1.5;margin-bottom:.5rem}
.step__ttl small{font-family:var(--en);font-weight:800;letter-spacing:.1em;color:var(--accent-text);
  font-size:1rem;margin-left:.6rem;transition:color .5s linear}
.step__txt{color:var(--muted);line-height:1.9}

/* =========================================================
   09. 沿革タイムライン timeline（年＋出来事。行数可変に対応）
   ========================================================= */
.timeline{max-width:var(--content-max);margin-inline:auto;
  border-top:1.5px solid var(--line)}
.timeline__row{display:grid;grid-template-columns:clamp(7rem,16vw,11rem) 1fr;
  gap:clamp(1rem,3vw,2.5rem);padding:clamp(1.4rem,3vw,2.2rem) 0;
  border-bottom:1.5px solid var(--line);align-items:baseline}
.timeline__year{font-family:var(--en);font-weight:900;font-size:clamp(1.4rem,3vw,2.2rem);
  line-height:1;color:var(--accent-text);transition:color .5s linear;white-space:nowrap}
.timeline__year small{display:block;font-family:var(--sans);font-size:1rem;font-weight:500;
  color:var(--muted);margin-top:.3rem;letter-spacing:.04em}
.timeline__ttl{font-weight:700;font-size:1.15rem;line-height:1.6;margin-bottom:.3rem}
.timeline__txt{color:var(--muted);line-height:1.85}

/* =========================================================
   10. 定義テーブル spec（会社概要・仕様表。ラベル幅は内容で伸縮）
   ========================================================= */
.spec{max-width:var(--content-max);margin-inline:auto;width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;vertical-align:top;
  padding:clamp(1rem,2.4vw,1.5rem) clamp(.8rem,2vw,1.6rem);
  border-bottom:1.5px solid var(--line);line-height:1.85}
.spec th{width:clamp(8rem,22%,15rem);font-weight:700;color:var(--ink);
  background:var(--bg2);white-space:nowrap}
.spec td{color:var(--muted)}
.spec td strong{color:var(--ink);font-weight:700}
.spec tr:first-child th,.spec tr:first-child td{border-top:1.5px solid var(--line)}
.spec td .note{display:block;font-size:1rem;color:var(--accent-text);margin-top:.3rem;
  transition:color .5s linear}

/* =========================================================
   11. 料金・比較テーブル table-x（横スクロール退避つき）
   ========================================================= */
.table-x{max-width:var(--content-max);margin-inline:auto;overflow-x:auto;
  -webkit-overflow-scrolling:touch;border:1.5px solid var(--line)}
.table-x table{width:100%;min-width:560px;border-collapse:collapse}
.table-x th,.table-x td{padding:clamp(.9rem,2vw,1.3rem) clamp(.8rem,2vw,1.4rem);
  text-align:left;border-bottom:1px solid var(--line);line-height:1.7}
.table-x thead th{background:var(--ink);color:#fff;font-weight:700;letter-spacing:.04em;
  position:sticky;top:0;white-space:nowrap}
.table-x tbody th{font-weight:700;background:var(--bg2);white-space:nowrap}
.table-x td{color:var(--muted)}
/* 「特徴」列（2列目）は幅を抑え、2行に折り返してよい */
.table-x tr>*:nth-child(2){width:40%}
.table-x .is-pick{color:var(--accent-text);font-weight:700;transition:color .5s linear}

/* =========================================================
   12. 数字パネル stats（数字＋見出し＋説明文。トップの numbers 発展）
   ========================================================= */
.stats{max-width:var(--content-max);margin-inline:auto;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr)}
.stats::before{content:"";position:absolute;inset:0;background:var(--bg2);
  transform:skewX(var(--shear));z-index:0}
.section--dark .stats::before{background:rgba(255,255,255,.06)}
.stat{position:relative;z-index:1;padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1rem,2.5vw,1.8rem)}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:12%;height:76%;width:1px;
  background:var(--line);transform:skewX(var(--shear))}
.section--dark .stat:not(:last-child)::after{background:rgba(255,255,255,.18)}
.stat__val{font-family:var(--en);font-weight:900;font-size:var(--fs-num);line-height:1;
  color:var(--accent);transition:color .5s linear}
.stat__val .u,.stat__val .num-unit{font-size:.36em;font-weight:700;margin-left:.1em}
.stat__ttl{font-weight:700;font-size:1.15rem;margin-top:.9rem;line-height:1.5}
.section--dark .stat__ttl{color:#fff}
.stat__txt{color:var(--muted);font-size:1rem;line-height:1.8;margin-top:.5rem}
.section--dark .stat__txt{color:rgba(255,255,255,.7)}

/* =========================================================
   13. 特徴リスト features（アイコン的な番号＋見出し＋本文。2列グリッド）
   ========================================================= */
.features{max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.5vw,2.6rem);
  counter-reset:feat}
.feature{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,3.5vw,2.8rem);align-items:start}
.feature__icon{counter-increment:feat;width:auto;height:auto;background:none;
  font-size:0;color:transparent;display:block;transform:none;align-self:start}
.feature__icon::after{content:counter(feat,decimal-leading-zero);
  font-family:var(--en);font-weight:200;font-size:clamp(2rem,4vw,2.8rem);line-height:1;
  color:var(--accent);display:inline-block;
  transform:skewX(var(--shear));transform-origin:left bottom;
  transition:color .5s linear}
.feature__icon span{display:none}
.feature__ttl{font-size:1.25rem;font-weight:900;line-height:1.5;margin-bottom:.4rem}
.feature__txt{color:var(--muted);line-height:1.85}

/* =========================================================
   14. カード3種 cards（接頭辞流用。単調回避のため意図的に別表情）
   ========================================================= */
.cards--3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  max-width:var(--content-max);margin-inline:auto}
/* 14a アイコンカード（枠線＋番号チップ。トップの .card と同系） */
.card--icon{border:1.5px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem);background:var(--bg);
  display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.card--icon:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--soft)}
.card--icon .card__no{font-family:var(--en);font-weight:900;font-size:var(--fs-label);color:#fff;
  position:relative;display:inline-block;padding:.35em .9em;z-index:0;align-self:flex-start}
.card--icon .card__no::before{content:"";position:absolute;inset:0;background:var(--accent);
  transform:skewX(var(--shear));z-index:-1;transition:background .5s linear}
.card--icon .card__ttl{font-size:var(--fs-h3);font-weight:900;margin:1rem 0 .7rem;line-height:1.5}
.card--icon .card__txt{color:var(--muted);line-height:1.85}
/* 14b 画像カード（上に斜め写真。リンク前提） */
.card--media{display:flex;flex-direction:column}
.card--media .shimg{aspect-ratio:3/2;margin-bottom:1.1rem;overflow:hidden;background:var(--bg2)}
.card--media .shimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform .8s var(--ease)}
.card--media:hover .shimg img{transform:scale(1.08)}
.card--media .tag{align-self:flex-start;margin-bottom:.7rem}
.card--media .card__ttl{font-size:1.2rem;font-weight:700;line-height:1.55}
.card--media:hover .card__ttl{color:var(--accent-text);transition:color .3s}
.card--media .card__txt{color:var(--muted);line-height:1.8;margin-top:.5rem}
/* 14c 塗りカード（ダーク。強調用） */
.card--fill{background:var(--ink);color:#fff;padding:clamp(1.8rem,3.5vw,2.6rem);
  display:flex;flex-direction:column}
.card--fill .card__ttl{font-size:var(--fs-h3);font-weight:900;line-height:1.5;margin-bottom:.7rem}
.card--fill .card__ttl em{color:var(--accent)}
.card--fill .card__txt{color:rgba(255,255,255,.74);line-height:1.85}
.card--fill .btn{margin-top:auto}

/* =========================================================
   15. アコーディオン（FAQ）faq — <details>/<summary> ベース（JS無しでも動く）
   ========================================================= */
.faq{max-width:var(--content-max);margin-inline:auto;border-top:1.5px solid var(--line)}
.faq__item{border-bottom:1.5px solid var(--line)}
.faq__q{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  align-items:start;gap:1rem;padding:clamp(1.2rem,2.6vw,1.8rem) 0;font-weight:700;
  font-size:1.15rem;line-height:1.6}
.faq__q::-webkit-details-marker{display:none}
.faq__q .qmark{font-family:var(--en);font-weight:900;color:var(--ink)}
.faq__q .toggle{position:relative;width:1.4em;height:1.4em;flex:0 0 auto;margin-top:.1em}
.faq__q .toggle::before,.faq__q .toggle::after{content:"";position:absolute;background:var(--accent);
  transition:transform .35s var(--ease),background .5s linear}
.faq__q .toggle::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%)}
.faq__q .toggle::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.faq__item[open] .toggle::after{transform:translateX(-50%) scaleY(0)}
.faq__a{display:grid;grid-template-columns:auto 1fr;gap:1rem;
  padding:0 0 clamp(1.2rem,2.6vw,1.8rem) 0}
.faq__a .amark{font-family:var(--en);font-weight:900;color:var(--muted)}
.faq__a p{color:var(--muted);line-height:1.9}
.faq__a p+p{margin-top:.8rem}

/* =========================================================
   16. タブ tabs（JS切替。セグメントコントロール型）
   ========================================================= */
.tabs{max-width:var(--content-max);margin-inline:auto}
.tabs__nav{display:flex;flex-wrap:wrap;gap:0;
  background:var(--bg2);padding:.4rem;border-bottom:none;
  margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.tabs__btn{appearance:none;border:none;cursor:pointer;font-family:inherit;
  font-size:var(--fs-body);font-weight:700;letter-spacing:.02em;color:var(--muted);
  background:transparent;
  padding:1rem 1.8rem;flex:1;position:relative;transition:background .25s,color .25s}
.tabs__btn::after{display:none}
.tabs__btn[aria-selected="true"]{background:var(--ink);color:#fff}
.tabs__btn:hover:not([aria-selected="true"]){background:rgba(17,17,17,.07);color:var(--ink)}
.tabs__panel{display:none;animation:tabin .5s var(--ease)}
.tabs__panel.is-active{display:block}
.tabs__panel .prose p,.tabs__panel .prose ul.dots{max-width:none}
@keyframes tabin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* =========================================================
   17. スタッフ紹介 member（写真＋プロフィール＋インタビュー抜粋）
   ========================================================= */
.members{max-width:var(--content-max);margin-inline:auto;display:grid;gap:clamp(2rem,5vw,4rem)}
.member{display:grid;grid-template-columns:clamp(240px,42%,480px) 1fr;
  gap:clamp(1.6rem,4vw,3rem);align-items:start}
.member:nth-child(even){grid-template-columns:1fr clamp(240px,42%,480px)}
.member:nth-child(even) .member__fig{order:2}
.member__fig{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg2);box-shadow:var(--soft)}
.member__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);
  filter:grayscale(.08) contrast(1.04);transition:transform 1s var(--ease)}
.member__fig:hover img{transform:scale(1.08)}
.member__fig::after{content:"";position:absolute;left:0;bottom:0;width:58%;height:1rem;
  background:var(--accent);transform:skewX(var(--shear-alt));transform-origin:left bottom;
  transition:background .5s linear}
.member:nth-child(even) .member__fig::after{left:auto;right:0;transform:skewX(var(--shear));transform-origin:right bottom}
.member__role{font-family:var(--en);font-weight:800;letter-spacing:.2em;font-size:1rem;
  color:var(--accent-text);transition:color .5s linear}
.member__name{font-size:var(--fs-h3);font-weight:900;margin:.5rem 0 .2rem}
.member__name small{font-size:1rem;font-weight:500;color:var(--muted);margin-left:.6rem;letter-spacing:.04em}
.member__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:.8rem 0 1.2rem;
  font-size:1rem;color:var(--muted)}
.member__meta b{color:var(--ink);font-weight:700;margin-right:.3rem}
.member__q{font-weight:700;font-size:1.2rem;line-height:1.6;margin:1.2rem 0 .5rem;
  padding-left:.9rem;border-left:4px solid var(--accent);transition:border-color .5s linear}
.member__a{color:var(--muted);line-height:1.9;max-width:88ch}
.member__a+.member__q{margin-top:1.6rem}
/* 人物間の区切り */
.member+.member{margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(3rem,7vw,5rem);border-top:1px solid var(--line)}

/* =========================================================
   18. 1日の流れ schedule（時刻＋内容。縦並び）
   ========================================================= */
.schedule{max-width:var(--content-max);margin-inline:auto;display:grid;gap:0}
.sch{display:grid;grid-template-columns:max-content 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;border-top:1.5px solid var(--line);align-items:baseline}
.schedule .sch:last-child{border-bottom:1.5px solid var(--line)}
.sch__time{font-family:var(--en);font-weight:900;font-size:1.4rem;color:var(--accent-text);
  transition:color .5s linear;white-space:nowrap}
.sch__ttl{font-weight:700;font-size:1.15rem;margin-bottom:.3rem}
.sch__txt{color:var(--muted);line-height:1.85}
/* 休憩行を就業時間と色分け（時刻・内容をアクセント色に） */
.sch--rest .sch__time,.sch--rest .sch__txt{color:var(--accent-text);font-weight:700;
  transition:color .5s linear}

/* =========================================================
   19. 実績ギャラリー works-grid（メタ付き。トップの gitem と同系・列数違い）
   20. 実績詳細ヘッダー work-detail（プロジェクト概要）→ spec を併用
   ========================================================= */
.works-grid{max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
/* .wcard 系は style.css に一本化（index/blog-ex/parts 共通） */
/* フィルタ風チップ（見た目のみ。実機能は実装ページで） */
.filter{max-width:var(--content-max);margin-inline:auto;display:flex;flex-wrap:wrap;gap:.6rem;
  margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.filter__chip{appearance:none;border:1.5px solid var(--line);background:var(--bg);cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.02em;
  padding:.6rem 1.3rem;transition:.3s}
.filter__chip:hover{border-color:var(--accent);color:var(--accent-text)}
.filter__chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* =========================================================
   21. 関連ページリンク relnav（次に見てほしい導線。単調なカード羅列を避けた横長）
   ========================================================= */
.relnav{max-width:var(--content-max);margin-inline:auto;display:grid;
  grid-template-columns:1fr 1fr;gap:1.5rem}
.rel{position:relative;display:flex;align-items:center;gap:1.2rem;overflow:hidden;
  padding:clamp(1.4rem,3vw,2rem);border:1.5px solid var(--line);background:var(--bg);
  transition:border-color .4s,transform .4s var(--ease)}
.rel:hover{border-color:var(--accent);transform:translateX(6px)}
.rel__no{font-family:var(--en);font-weight:200;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;
  color:var(--accent);transform:skewX(var(--shear));transition:color .5s linear;flex:0 0 auto}
.rel__body{flex:1;min-width:0}
.rel__en{display:block;font-family:var(--en);font-weight:800;letter-spacing:.18em;font-size:1rem;color:var(--muted)}
.rel__ttl{display:block;font-size:1.2rem;font-weight:900;margin-top:.2rem;line-height:1.5}
.rel__arrow{flex:0 0 auto;width:1.8em;height:.7em;
  -webkit-mask:var(--arrow) no-repeat center/contain;mask:var(--arrow) no-repeat center/contain;
  background:var(--ink);transition:transform .4s var(--ease),background .4s}
.rel:hover .rel__arrow{transform:translateX(.3em);background:var(--accent)}

/* =========================================================
   22. CTA帯 cta-band（下層末尾。トップの cta を1枚帯に再構成）
   ========================================================= */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding:clamp(3.5rem,7vw,6rem) var(--pad-x)}
.cta-band__fig{position:absolute;inset:-10% -6%;z-index:0;transform:skewX(var(--shear-alt));opacity:.28}
.cta-band__fig img{width:100%;height:100%;object-fit:cover;
  transform:skewX(var(--unshear-alt)) scale(var(--img-scale));filter:grayscale(.2)}
.cta-band__inner{position:relative;z-index:1;max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.cta-band__en{font-family:var(--en);font-weight:800;letter-spacing:.28em;color:var(--accent);
  font-size:var(--fs-label);transition:color .5s linear}
.cta-band__ttl{font-size:var(--fs-h2);font-weight:900;line-height:1.4;margin:.8rem 0 1rem}
.cta-band__ttl em{color:var(--accent)}
.cta-band__txt{color:rgba(255,255,255,.74);line-height:1.9;max-width:54ch}
.cta-band__act{display:flex;flex-direction:column;gap:1rem;justify-self:start;align-items:stretch;align-self:end}
.cta-band .btn--solid{background:var(--accent)}
.cta-band .btn--line{color:#fff;border-color:rgba(255,255,255,.7)}
.cta-band .btn--line:hover{background:transparent;border-color:#fff;color:#fff}

/* =========================================================
   23. お問い合わせフォーム form（入力UI一式）
   ========================================================= */
.form{max-width:880px;margin-inline:auto}
.form__row{display:grid;gap:.6rem;margin-top:clamp(1.2rem,3vw,2rem);margin-bottom:clamp(1.4rem,3vw,2rem)}
.form__row--2{grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem)}
.form__label{font-weight:700;font-size:var(--fs-label);display:flex;align-items:center;gap:.7rem}
.form__req{font-family:var(--en);font-weight:800;font-size:1rem;letter-spacing:.06em;
  color:var(--accent-text);display:inline-block;white-space:nowrap;transition:color .5s linear}
.form__opt{font-size:1rem;font-weight:500;color:var(--muted);border:1.5px solid var(--line);
  padding:.1em .6em}
.form__field{font-family:inherit;font-size:var(--fs-body);width:100%;
  padding:.9rem 1.1rem;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);
  transition:border-color .3s,box-shadow .3s}
.form__field:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea.form__field{min-height:11rem;resize:vertical;line-height:1.8}
select.form__field{appearance:none;
  background-image:var(--arrow);background-repeat:no-repeat;
  background-position:right 1.1rem center;background-size:1.4em .8em;padding-right:3rem}
.form__help{font-size:1rem;color:var(--muted);line-height:1.7}
.form__check{display:flex;align-items:flex-start;gap:.7rem;line-height:1.8;color:var(--muted)}
.form__check input{margin-top:.35em;width:1.1em;height:1.1em;accent-color:var(--accent);flex:0 0 auto}
.form__submit{display:flex;justify-content:center;margin-top:clamp(1.6rem,3.5vw,2.6rem)}
.form__submit .btn{padding-inline:clamp(3rem,8vw,5rem)}

/* enjoyworks型 dl レイアウト（ラベル左／入力右・意匠は鈴木興業） */
.form dl{display:grid;grid-template-columns:14rem 1fr;gap:.6rem clamp(1.2rem,3vw,2.4rem);
  align-items:start;margin-bottom:clamp(1.4rem,3vw,2rem)}
.form dl:last-of-type{margin-bottom:0}
.form dt{font-weight:700;font-size:var(--fs-label);display:flex;align-items:flex-start;
  justify-content:space-between;gap:.7rem;padding-top:.9rem;line-height:1.5}
.form dt>:first-child{min-width:0}
.form dt .form__req{flex:0 0 auto}
.form dd{margin:0}
.form dd .form__field{margin:0}
.form__note{display:block;font-size:.82em;font-weight:400;color:var(--muted);
  line-height:1.6;margin-top:.4rem}
.form__checks{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;padding-top:.55rem}
.form__checks .form__check{margin:0}
@media (max-width:640px){
  .form dl{grid-template-columns:1fr;gap:.6rem}
  .form dt{padding-top:0}
}

/* =========================================================
   カタログ表示専用（実ページには不要）spec-marker / spec-grid
   ========================================================= */
.catalog__note{max-width:var(--content-max);margin:0 auto clamp(2.5rem,5vw,4rem);
  padding:1.6rem;border:1.5px dashed var(--line);color:var(--muted);line-height:1.9;background:var(--bg2)}
.partmark{max-width:var(--content-max);margin:0 auto;padding-top:clamp(2rem,4vw,3rem)}
/* 番号: ベタ塗りチップをやめ、トップの小見出しと同じトーンの細い英字キッカーに */
.partmark__no{display:inline-block;font-family:var(--en);font-weight:800;letter-spacing:.2em;
  font-size:1rem;color:var(--accent-text);transition:color .5s linear}
.partmark__no::before{content:"PART "}
.partmark__no span{display:inline}
/* 見出し先頭: トップの sec-head__ja と同じ細長い斜めバー */
.partmark__ttl{display:flex;align-items:center;gap:.9rem;
  font-size:1.4rem;font-weight:900;margin:.5rem 0 .3rem;line-height:1.4}
.partmark__ttl::before{content:"";width:64px;height:5px;flex:0 0 auto;
  background:var(--accent);transform:skewX(var(--shear));transition:background .5s linear}
.section--dark .partmark__no{color:var(--accent)}
.partmark__use{color:var(--muted);font-size:1rem;line-height:1.8}
.partmark__use code{font-family:var(--en);background:var(--bg2);padding:.1em .5em;
  border:1px solid var(--line);font-size:1em}

/* =========================================================
   レスポンシブ — BP1: 1240px（タブレット）/ BP2: 640px（SP）
   ========================================================= */
@media(max-width:1240px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .cards--3,.works-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  /* テキスト→画像の縦積み（トップの reason と同じ思想） */
  .media{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.6rem)}
  .media--reverse .media__body{order:0}
  .media__fig{width:78%;aspect-ratio:16/10}
  .media__txt{max-width:none}              /* DETAIL本文をコンテンツ幅いっぱいに */
  .cta-band__inner{grid-template-columns:1fr;gap:2rem}
  .cta-band__txt{max-width:none}           /* CTA本文をコンテンツ幅いっぱいに */
  .features{grid-template-columns:1fr}
  .relnav{grid-template-columns:1fr}       /* NAVIGATEを1カラム化（rel__bodyの窮屈な折返し解消） */
  /* table-x: 各行をカード型に変換 */
  .table-x{border:none}
  .table-x table,.table-x tbody{display:block}
  .table-x thead{display:none}
  .table-x tr{display:grid;grid-template-columns:1fr 1fr;
    gap:.5rem 1.6rem;padding:clamp(1rem,2.5vw,1.4rem);
    background:var(--bg2);border:1.5px solid var(--line);
    margin-bottom:clamp(.8rem,2vw,1rem)}
  .table-x tr>th{grid-column:1/-1;font-size:clamp(1rem,2.2vw,1.15rem);font-weight:700;
    background:none;white-space:normal;padding:0 0 .6rem;
    border-bottom:1.5px solid var(--line);border-top:none;line-height:1.5}
  .table-x tr>td{padding:0;border:none;display:flex;flex-direction:column;gap:.2rem}
  .table-x tr>td::before{content:attr(data-label);font-size:.875rem;font-weight:700;color:var(--ink)}
}
@media(max-width:640px){
  :root{--measure:100%}
  .pg-hero__fig{width:120%;right:-30%;top:auto;bottom:-20%;height:70%;opacity:.5}
  .pg-hero__bg::after{background:linear-gradient(120deg,rgba(17,17,17,.95) 55%,rgba(17,17,17,.7) 100%)}
  .media__fig{width:100%}
  .stats{grid-template-columns:1fr}
  .stat{padding-block:clamp(1.4rem,5vw,2rem)}
  .stat:not(:last-child)::after{display:none}
  .stat:not(:last-child){border-bottom:1px solid var(--line)}
  .section--dark .stat:not(:last-child){border-bottom:1px solid rgba(255,255,255,.16)}
  .cards--3,.works-grid{grid-template-columns:1fr}
  .form__row--2{grid-template-columns:1fr}
  .relnav{grid-template-columns:1fr}
  .intro-split{grid-template-columns:1fr;gap:clamp(1.2rem,4vw,2rem)}
  /* スタッフ: 写真を上に */
  .member,.member:nth-child(even){grid-template-columns:1fr}
  .member__fig,.member:nth-child(even) .member__fig{order:-1;aspect-ratio:4/3;width:100%}
  /* スペック表: ラベルを上に積む */
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:100%}
  .spec th{background:none;padding-bottom:.2rem;border-bottom:none}
  .spec td{padding-top:.2rem;border-top:none!important;border-bottom:none}
  .spec tr{padding:1rem 0;border-bottom:1.5px solid var(--line)}
  .spec tr:first-child th{border-top:none}
  /* NUMBERS: 歪んだグレー背景を約1.7倍に広げる（はみ出しは下のclipで処理） */
  .section--dark{overflow-x:clip}
  .stats::before{inset:0 -35%}
  /* ステップ: 番号を小さく */
  .step{grid-template-columns:clamp(2.8rem,12vw,3.4rem) 1fr}
  .step+.step::before{left:calc(clamp(2.8rem,12vw,3.4rem)/2 - 1px)}
  /* イントロ2カラムは縦積みになるので本文の上余白をリセット */
  .intro-split .prose{margin-top:0}
  /* バンド: モバイルは写真を全面に。暗化は写真(.band__fig)内のみ＝写真だけを暗くする */
  .band__fig{inset:-10% -4%}
  .band__fig::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.42))}
  .band__cap{color:#fff;max-width:none;top:50%;bottom:auto;transform:translateY(-50%)}
  /* タイムライン: 年を上に */
  .timeline__row{grid-template-columns:1fr;gap:.4rem}
  .schedule .sch{grid-template-columns:1fr;gap:.3rem}
}

/* =========================================================
   24. ドキュメント型レイアウト doc（下層専用）
   左スティッキー索引（セクションナビ）＋本文の2カラム。
   トップの全幅スタック構成と明確に差別化＝「読ませる」下層の骨格。
   ========================================================= */
.doc{max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:clamp(200px,23%,264px) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:start}
/* --- 左：索引 --- */
.doc__index{position:sticky;top:clamp(5.5rem,9vw,7rem);align-self:start}
.doc__index-en{font-family:var(--en);font-weight:800;letter-spacing:.24em;font-size:1rem;
  color:var(--muted);padding-bottom:.9rem;border-bottom:1.5px solid var(--ink);
  display:block}
.doc__nav{display:flex;flex-direction:column}
.doc__nav a{position:relative;display:grid;grid-template-columns:2rem 1fr;gap:.7rem;
  align-items:baseline;padding:.95rem 0 .95rem 1rem;border-bottom:1px solid var(--line);
  color:var(--muted);transition:color .3s}
.doc__nav a::before{content:"";position:absolute;left:0;top:50%;width:4px;height:0;
  background:var(--accent);transform:translateY(-50%) skewX(var(--shear));
  transition:height .35s var(--ease),background .5s linear}
.doc__nav a .n{font-family:var(--en);font-weight:800;font-size:1rem;color:var(--accent-text);
  display:inline-block;transform:skewX(var(--shear));transition:color .5s linear}
.doc__nav a .t{font-weight:700;font-size:1.0625rem;line-height:1.45}
.doc__nav a:hover{color:var(--ink)}
.doc__nav a.is-active{color:var(--ink)}
.doc__nav a.is-active::before{height:1.5em}
/* --- 右：本文 --- */
.doc__main{min-width:0}
.doc__sec{scroll-margin-top:clamp(5rem,9vw,6.5rem)}
.doc__sec+.doc__sec{margin-top:clamp(3.5rem,7vw,6rem);
  padding-top:clamp(3.5rem,7vw,6rem);border-top:1.5px solid var(--line)}
.doc__head{margin-bottom:clamp(1.6rem,3.2vw,2.4rem)}
.doc__head .en{font-family:var(--en);font-weight:800;letter-spacing:.24em;
  font-size:var(--fs-label);color:var(--accent-text);transition:color .5s linear}
.doc__head .ttl{display:flex;align-items:flex-start;gap:.9rem;
  font-size:var(--fs-h2);font-weight:900;line-height:1.4;margin-top:.5rem}
.doc__head .ttl .no{font-family:var(--en);font-weight:200;font-size:1.3em;line-height:.9;
  color:var(--accent);transform:skewX(var(--shear));transform-origin:left bottom;
  flex:0 0 auto;transition:color .5s linear}
.doc__lead{font-size:var(--fs-lead);font-weight:500;line-height:1.7;
  letter-spacing:.01em;color:var(--ink);max-width:36ch;margin:0 0 clamp(2rem,4vw,3rem)}
.doc__lead em{color:var(--accent-text)}

/* 定義リスト methods（工法・設備の用語＋技術解説。AIO向け構造） */
.methods{display:grid;gap:0;border-top:1.5px solid var(--ink)}
.method{display:grid;grid-template-columns:clamp(8rem,28%,15rem) 1fr;
  gap:clamp(1rem,3vw,2.6rem);padding:clamp(1.4rem,3vw,2.1rem) 0;
  border-bottom:1.5px solid var(--line);align-items:baseline}
.method__name{font-weight:900;font-size:1.2rem;line-height:1.5}
.method__name .en{display:block;font-family:var(--en);font-weight:800;letter-spacing:.14em;
  font-size:.9375rem;color:var(--muted);margin-top:.35rem}
.method__desc{color:var(--muted);line-height:1.95}
.method__desc b{color:var(--ink);font-weight:700}
.method__desc .spec-line{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.8rem;
  font-size:1rem}
.method__desc .spec-line span{color:var(--ink)}
.method__desc .spec-line span b{color:var(--accent-text);transition:color .5s linear;margin-right:.3rem}
/* フロー（対応の流れ）の番号は斜体（skew）を外す＝数字を見分けやすく */
.doc .step__no span{transform:none}

@media(max-width:1024px){
  .doc{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.4rem)}
  .doc__index{position:static;top:auto}
  .doc__index-en{padding-bottom:.7rem}
  .doc__nav{flex-direction:row;flex-wrap:wrap;gap:.5rem}
  .doc__nav a{border-bottom:none;border:1.5px solid var(--line);padding:.6rem 1rem;
    border-radius:0}
  .doc__nav a::before{display:none}
  .doc__nav a.is-active{border-color:var(--accent);color:var(--ink)}
  .doc__sec+.doc__sec{margin-top:clamp(2.6rem,6vw,4rem);padding-top:clamp(2.6rem,6vw,4rem)}
}
@media(max-width:640px){
  .method{grid-template-columns:1fr;gap:.5rem}
  .doc__nav a .t{font-size:1rem}
  .doc__lead{max-width:none}
}

/* 画像付き仕様カード spec-card（工法・設備の画像＋特徴） */
.spec-grid{display:grid;gap:clamp(1.2rem,2.6vw,1.8rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.spec-grid--2{grid-template-columns:repeat(2,1fr)}
.spec-grid--3{grid-template-columns:repeat(3,1fr)}
.spec-card{display:flex;flex-direction:column;background:var(--bg);border:1.5px solid var(--line);
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s}
.spec-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:var(--soft)}
.spec-card__fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.spec-card__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);
  transition:transform .9s var(--ease);filter:grayscale(.06) contrast(1.04)}
.spec-card:hover .spec-card__fig img{transform:scale(1.09)}
.spec-card__fig::after{content:"";position:absolute;left:0;bottom:0;width:48%;height:.85rem;
  background:var(--accent);transform:skewX(var(--shear-alt));transform-origin:left bottom;
  transition:background .5s linear}
.spec-card__body{padding:clamp(1.2rem,2.4vw,1.7rem);display:flex;flex-direction:column;gap:.55rem;flex:1}
.spec-card__en{font-family:var(--en);font-weight:800;letter-spacing:.16em;font-size:.875rem;color:var(--muted)}
.spec-card__name{font-size:1.25rem;font-weight:900;line-height:1.4}
.spec-card__txt{color:var(--muted);line-height:1.9}
@media(max-width:1024px){
  .spec-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .spec-grid--2,.spec-grid--3{grid-template-columns:1fr}
}

/* 26. 選ばれる理由 reason（番号付き論証レジスター） */
.reasons{max-width:var(--content-max);margin-inline:auto;display:grid;gap:clamp(4.5rem,8vw,8rem)}
.reason__head{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.2rem);
  align-items:end;border-bottom:1.5px solid var(--ink);
  padding-bottom:clamp(1rem,2.2vw,1.6rem);margin-bottom:clamp(2rem,4vw,3rem)}
.reason__no{font-family:var(--en);font-weight:200;font-size:clamp(3.6rem,9vw,6.5rem);line-height:.78;
  color:var(--accent);transform:skewX(var(--shear));transform-origin:left bottom;
  transition:color .5s linear}
.reason__titles .en{font-family:var(--en);font-weight:800;letter-spacing:.2em;
  font-size:var(--fs-label);color:var(--accent-text);transition:color .5s linear}
.reason__titles .ja{font-size:var(--fs-h2);font-weight:900;line-height:1.35;margin-top:.4rem}
.reason__titles .ja em{color:var(--accent-text)}
.reason__body{display:grid;grid-template-columns:1fr clamp(300px,42%,480px);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.reason__txt p{color:var(--muted);line-height:1.95;max-width:62ch}
.reason__txt p+p{margin-top:1.1rem}
.reason__points{margin-top:1.5rem;display:grid;gap:.7rem}
.reason__points li{position:relative;padding-left:2.6rem;color:var(--ink);line-height:1.8}
.reason__points li::before{content:"";position:absolute;left:0;top:.72em;width:1.8em;height:.175em;
  background:var(--accent);transform:skewX(var(--shear));transition:background .5s linear}
.reason__fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg2);box-shadow:var(--soft)}
.reason__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);
  transition:transform 1s var(--ease);filter:grayscale(.06) contrast(1.04)}
.reason__fig:hover img{transform:scale(1.09)}
.reason__fig::after{content:"";position:absolute;right:0;bottom:0;width:50%;height:.95rem;
  background:var(--accent);transform:skewX(var(--shear));transform-origin:right bottom;
  transition:background .5s linear}

/* 27. 読み物コラム column（ダーク帯。引用付きエッセイ） */
.column{max-width:var(--content-max);margin-inline:auto;background:var(--ink);color:#fff;
  display:grid;grid-template-columns:clamp(300px,40%,460px) 1fr;overflow:hidden}
.column__fig{position:relative;overflow:hidden;background:var(--bg2);min-height:300px}
.column__fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.05) brightness(.92)}
.column__fig::after{content:"";position:absolute;right:0;top:0;width:1rem;height:46%;
  background:var(--accent);transform:skewX(var(--shear-alt));transform-origin:right top;
  transition:background .5s linear}
.column__body{padding:clamp(2rem,5vw,4rem)}
.column__label{font-family:var(--en);font-weight:800;letter-spacing:.28em;font-size:var(--fs-label);
  color:var(--accent);transition:color .5s linear}
.column__ttl{font-size:var(--fs-h2);font-weight:900;line-height:1.4;margin:.8rem 0 1.3rem}
.column__ttl em{color:var(--accent)}
.column__txt p{color:rgba(255,255,255,.76);line-height:1.95}
.column__txt p+p{margin-top:1.1rem}
.column__quote{font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:900;line-height:1.55;color:#fff;
  border-left:4px solid var(--accent);padding-left:1.2rem;margin:1.8rem 0;transition:border-color .5s linear}

@media(max-width:1024px){
  .reason__body{grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2.2rem)}
  .reason__fig{order:-1;width:100%}
  .reason__txt p{max-width:none}
  .column{grid-template-columns:1fr}
  .column__fig{min-height:0;aspect-ratio:16/9}
}
@media(max-width:640px){
  .reason__head{grid-template-columns:1fr;gap:.4rem;align-items:start}
}

/* 28. 代表メッセージ message（書簡型。肖像＋リード＋署名） */
.message{max-width:var(--content-max);margin-inline:auto;display:grid;
  grid-template-columns:clamp(280px,38%,440px) 1fr;gap:clamp(2rem,5vw,4rem);align-items:stretch}
.message__fig{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg2);box-shadow:var(--soft);align-self:start}
.message__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);
  filter:grayscale(.08) contrast(1.04);transition:transform 1s var(--ease)}
.message__fig:hover img{transform:scale(1.08)}
.message__fig::after{content:"";position:absolute;left:0;bottom:0;width:56%;height:1rem;
  background:var(--accent);transform:skewX(var(--shear-alt));transform-origin:left bottom;
  transition:background .5s linear}
.message__body{min-width:0;display:flex;flex-direction:column}
.message__lead{font-size:var(--fs-h2);font-weight:900;line-height:1.5;margin-bottom:1.5rem}
.message__lead em{color:var(--accent-text)}
.message__txt p{color:var(--muted);line-height:1.95;max-width:60ch}
.message__txt p+p{margin-top:1.1rem}
.message__sign{margin-top:auto;display:flex;align-items:baseline;gap:.9rem;
  border-top:1.5px solid var(--line);padding-top:clamp(1.2rem,2.5vw,1.8rem)}
.message__sign .role{color:var(--muted);font-size:var(--fs-label)}
.message__sign .name{font-size:1.5rem;font-weight:900;letter-spacing:.04em}
.message__sign .name small{font-family:var(--en);font-weight:800;letter-spacing:.1em;
  font-size:.9rem;color:var(--muted);margin-left:.6rem}
@media(max-width:1024px){
  .message{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.4rem)}
  .message__fig{width:min(78%,360px)}
  .message__txt p{max-width:none}
  .message__sign{margin-top:clamp(1.8rem,4vw,2.4rem)}
}

/* =========================================================
   29. 採用ページ ダークテーマ theme-dark（白黒反転・骨太）
   body.theme-dark を付けたページ全体を黒基調に反転する。
   ========================================================= */
body.theme-dark{background:var(--ink);color:#fff}
.theme-dark .crumb-bar{background:#000;border-bottom-color:rgba(255,255,255,.14)}
.theme-dark .crumbs--ink{color:rgba(255,255,255,.55)}
.theme-dark .crumbs--ink [aria-current]{color:#fff}
.theme-dark .crumbs--ink a:hover{color:var(--accent-text)}
.theme-dark .section--tint{background:#1c1c1c}
.theme-dark .sec-head__ja{color:#fff}
.theme-dark .lead-head__ttl{color:#fff}
.theme-dark .prose p{color:rgba(255,255,255,.78)}
.theme-dark .prose p.muted{color:rgba(255,255,255,.5)}
.theme-dark .feature__ttl{color:#fff}
.theme-dark .feature__txt{color:rgba(255,255,255,.7)}
.theme-dark .media__ttl{color:#fff}
.theme-dark .media__txt{color:rgba(255,255,255,.72)}
.theme-dark .media__points li{color:#fff}
.theme-dark .step+.step{border-top-color:rgba(255,255,255,.16)}
.theme-dark .step+.step::before{background:rgba(255,255,255,.16)}
.theme-dark .step__ttl{color:#fff}
.theme-dark .step__txt{color:rgba(255,255,255,.7)}
.theme-dark .methods{border-top-color:rgba(255,255,255,.45)}
.theme-dark .method{border-bottom-color:rgba(255,255,255,.16)}
.theme-dark .method__name{color:#fff}
.theme-dark .method__desc{color:rgba(255,255,255,.72)}
.theme-dark .method__desc b{color:#fff}
.theme-dark .spec th{background:#262626;color:#fff}
.theme-dark .spec td{color:rgba(255,255,255,.78)}
.theme-dark .spec th,.theme-dark .spec td{border-bottom-color:rgba(255,255,255,.16)}
.theme-dark .spec tr:first-child th,.theme-dark .spec tr:first-child td{border-top-color:rgba(255,255,255,.16)}
.theme-dark .spec td strong{color:#fff}
.theme-dark .rel{background:transparent;border-color:rgba(255,255,255,.2)}
.theme-dark .rel:hover{border-color:var(--accent)}
.theme-dark .rel__ttl{color:#fff}
.theme-dark .rel__arrow{background:#fff}
.theme-dark .btn--line{color:#fff;border-color:rgba(255,255,255,.6)}
.theme-dark .btn--line:hover{background:#fff;color:var(--ink)}
.theme-dark .lead-big{font-size:var(--fs-h2);font-weight:900;line-height:1.4;color:#fff;max-width:22ch}
.theme-dark .lead-big em{color:var(--accent)}
.theme-dark .sch{border-top-color:rgba(255,255,255,.16)}
.theme-dark .schedule .sch:last-child{border-bottom-color:rgba(255,255,255,.16)}
.theme-dark .sch__txt,.theme-dark .sch__ttl{color:#fff}
.theme-dark .callout{background:#262626;border-left-color:var(--accent)}
.theme-dark .callout p{color:rgba(255,255,255,.78)}
.theme-dark .callout__ttl{color:#fff}
.theme-dark .sch--rest .sch__time,.theme-dark .sch--rest .sch__txt{color:var(--accent-text)}
.theme-dark .member__name{color:#fff}
.theme-dark .member__txt,.theme-dark .member__a{color:rgba(255,255,255,.72)}
.theme-dark .member__age{color:rgba(255,255,255,.5)}
.theme-dark .member+.member{border-top-color:rgba(255,255,255,.14)}
/* reason register on dark */
.theme-dark .reason__head{border-bottom-color:rgba(255,255,255,.4)}
.theme-dark .reason__titles .ja{color:#fff}
.theme-dark .reason__txt p{color:rgba(255,255,255,.74)}
.theme-dark .reason__points li{color:#fff}
/* form on dark */
.theme-dark .form dt,.theme-dark .form__label{color:#fff}
.theme-dark .form__field{background:#1c1c1c;border-color:rgba(255,255,255,.22);color:#fff}
.theme-dark .form__field::placeholder{color:rgba(255,255,255,.4)}
.theme-dark .form__field:focus{border-color:var(--accent)}
.theme-dark .form__check,.theme-dark .form__help,.theme-dark .form__note{color:rgba(255,255,255,.7)}
.theme-dark .form__opt{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.6)}
.theme-dark .form a{color:var(--accent-text)}

/* 30. 資質タイル creed（採用ターゲットの資質。骨太なタイル） */
.creed{max-width:var(--content-max);margin-inline:auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem)}
.creed__item{position:relative;border:1.5px solid rgba(255,255,255,.18);
  padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .4s,background .4s,transform .5s var(--ease)}
.creed__item:hover{border-color:var(--accent);background:rgba(255,119,0,.07);transform:translateY(-5px)}
.creed__no{font-family:var(--en);font-weight:200;font-size:clamp(2.4rem,4vw,3.4rem);line-height:.9;
  color:var(--accent);transform:skewX(var(--shear));transform-origin:left bottom;
  align-self:flex-start;margin-bottom:.4rem;transition:color .5s linear}
.creed__en{font-family:var(--en);font-weight:800;letter-spacing:.16em;font-size:.875rem;color:var(--accent)}
.creed__ttl{font-size:1.45rem;font-weight:900;color:#fff;line-height:1.35}
.creed__txt{color:rgba(255,255,255,.68);line-height:1.85;font-size:1rem;margin-top:.2rem}
@media(max-width:1024px){.creed{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.creed{grid-template-columns:1fr}}

/* 31. 年収ステップアップ payladder ＋ 福利厚生 perks（creed--3） */
.payladder{max-width:var(--content-max);margin-inline:auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.payladder__item{position:relative;border:1.5px solid var(--line);background:var(--bg);
  padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.4rem}
.payladder__item:not(:last-child)::after{content:"";position:absolute;right:-.85rem;top:50%;z-index:2;
  width:1.1rem;height:1.1rem;border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg)}
.payladder__yr{font-family:var(--en);font-weight:800;letter-spacing:.12em;font-size:.875rem;
  color:var(--accent-text);transition:color .5s linear}
.payladder__stage{font-weight:700;font-size:1.05rem;color:var(--ink)}
.payladder__amt{font-family:var(--en);font-weight:900;font-size:clamp(2.2rem,4.5vw,3rem);line-height:1;
  color:var(--accent);margin-top:.3rem;transition:color .5s linear}
.payladder__amt small{font-family:var(--sans);font-size:1rem;font-weight:700;margin-left:.15em;color:var(--accent)}
.payladder__note{color:var(--muted);font-size:1rem;line-height:1.7;margin-top:.2rem}
.theme-dark .payladder__item{background:transparent;border-color:rgba(255,255,255,.18)}
.theme-dark .payladder__stage{color:#fff}
.theme-dark .payladder__note{color:rgba(255,255,255,.6)}
.creed--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.creed--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.creed--3{width:100%}}

/* 32. インタビュー（コンパクトカード・写真はグレープレースホルダ） */
.vcards{max-width:var(--content-max);margin-inline:auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.2rem)}
.vcard{display:flex;flex-direction:column;border:1.5px solid var(--line);background:var(--bg)}
.vcard__ph{aspect-ratio:4/3;background:#cfccc6;display:flex;align-items:center;justify-content:center;
  font-family:var(--en);font-weight:800;letter-spacing:.2em;font-size:.875rem;color:#8a877f}
.vcard__body{padding:clamp(1.2rem,2.4vw,1.7rem);display:flex;flex-direction:column;gap:.35rem;flex:1}
.vcard__role{font-family:var(--en);font-weight:800;letter-spacing:.12em;font-size:.8125rem;color:var(--accent-text)}
.vcard__name{font-size:1.25rem;font-weight:900;line-height:1.3}
.vcard__age{font-size:1rem;color:var(--muted)}
.vcard__txt{color:var(--muted);line-height:1.85;font-size:1rem;margin-top:.5rem}
.theme-dark .vcard{background:transparent;border-color:rgba(255,255,255,.18)}
.theme-dark .vcard__name{color:#fff}
.theme-dark .vcard__age{color:rgba(255,255,255,.5)}
.theme-dark .vcard__txt{color:rgba(255,255,255,.6)}
@media(max-width:900px){.vcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vcards{grid-template-columns:1fr}}
@media(max-width:640px){
  .payladder{grid-template-columns:1fr}
  .payladder__item:not(:last-child)::after{right:50%;top:auto;bottom:-.85rem;
    transform:translateX(50%) rotate(135deg)}
}

/* =========================================================
   19. marquee（中腹ディバイダー）
   フッター大型 SUZUKI と同じ筋交いシアー書体（--en / --shear）を
   流す。バンド跡のリズムを引き継ぐ無限スクロール帯。
   ========================================================= */
.marquee{position:relative;overflow:hidden;background:var(--ink)}
.marquee__track{display:flex;width:max-content;will-change:transform;
  animation:marquee-scroll 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{flex:0 0 auto;font-family:var(--en);font-weight:900;
  font-size:clamp(3.4rem,10vw,8rem);line-height:1.04;letter-spacing:-.03em;
  color:var(--accent);transform:skewX(var(--shear));
  padding:.18em clamp(1.2rem,3vw,2.6rem);white-space:nowrap;
  transition:color .5s linear}
.marquee__item .marquee__dot{color:#fff}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation-duration:0s;animation:none}
}

/* =========================================================
   33. レスポンシブ・タイポ調整（不自然な改行の抑制）
   本文コピー内の手動 <br> は狭い画面で折返しを崩すため無効化。
   見出しは text-wrap で自然に折り返す。
   ========================================================= */
.message__lead,.lead-head__ttl,.media__ttl,.reason__titles .ja,
.cta-band__ttl,.column__ttl,.creed__ttl,.card__ttl,.doc__head .ttl,
.hero__sub,.about__big,.sec-head__en{text-wrap:balance}
.prose p,.media__txt,.method__desc,.reason__txt p,.step__txt,
.message__txt p,.doc__lead,.callout p,.feature__txt,.num-item__label,
.rcard__txt,.column__txt p,.creed__txt,.vcard__txt,.spec td{text-wrap:pretty}

@media(max-width:720px){
  /* 本文コピー中の手動改行を無効化（自然な折返しに任せる） */
  .message__txt br,.media__txt br,.method__desc br,.callout p br,
  .prose p br,.reason__txt p br,.step__txt br,.column__txt p br{display:none}
  /* 見出しの手動改行は残しつつ、長い英字見出しの食み出しを防ぐ */
  .sec-head__en,.pg-hero__en{word-break:break-word;overflow-wrap:anywhere}
}

@media(max-width:520px){
  /* 極小画面では大見出しの手動改行も自然折返しへ */
  .message__lead br,.media__ttl br,.lead-head__ttl br,
  .reason__titles .ja br,.cta-band__ttl br,.column__ttl br{display:none}
  /* 施工実績フィルタchipの折返しを許可（横スクロールを避ける） */
  .filter{flex-wrap:wrap}
}


/* ===== 40_skin.css ===== */
/* ============================================================
   CueZilla 動的パーツ スキンキット v1.0
   ------------------------------------------------------------
   目的: ブログ/施工実績(blog-ex)/お問い合わせ/パンくず/ページヘッダー等の
         CueZilla 既定パーツを、サイトのトンマナ（ダーク/ライト・ブランド色・
         フォント・角丸）に "自動で寄せる" 汎用CSS。案件ごとの調整を最小化する。

   思想:
     (1) 色は CueZilla テーマ変数(--main-color 等)から自動連動
         → サイトのテーマ設定がそのまま skin にも効く（色は一元管理）
     (2) フォント/角丸/グリッド幅はトークンで指定（テーマ変数に無いため）
     (3) partsNNN は採番が可変だが接尾辞は共通(_post_wrap 等)
         → 属性セレクタ [class*="_xxx"] で番号非依存に当てる（単一属性セレクタまで。積んで詳細度を稼がない）

   ★適用範囲と安全契約（重要・memory: cuezilla-css-safety-contract）:
     ・本skinは「CueZilla既定の動的パーツ」だけを寄せる。サイトのフリーコーディング設計には当てない
       （生成サイトCSSは変数非依存＋具体値＋自作接頭辞クラスで組む＝構造的に非衝突・skinと干渉しない）。
     ・[class*=…]を積んで詳細度を同点/超過させる手法は禁止（脆い・過剰マッチ・アーマーレース）。
       単一の番号非依存セレクタ＋!important1個で当てる（theme_defaultは非importantなので確定勝ち）。
     ・!important可は「レイヤーで越えられない相手」＝theme_default／body内インライン／BSユーティリティ／
       .partsNNN_blog_<ID>(0,3,0) のみ。後者(0,3,0)+!importantには詳細度で負けるため、
       負けた時だけ §14 の手順で実採番(0,3,1)を【案件CSS】に足して勝つ（汎用skinには番号を書かない）。
     ・変数の注意：実機は body内コンポ<style>の:rootが7色(--main-color等)を撒きうる（490件中16件）。
       →§0の--dyn-*はその頁で乗っ取られ得る。動的パーツの色合わせには許容だが、サイト設計の主機構にしない。

   使い方:
     1. §0 のトークンを案件に合わせて調整（ダーク/ライトはプリセットをコピー）
     2. CueZilla テーマカラー(--main-color 等)をブランド値に設定
     3. 本ファイルをサイト全体CSS(AddCssInfo)へ貼る（サイト固有のフリーコーディングCSSの後ろ）
   ============================================================ */


/* ============================================================
   §0  トークン ─ ここだけ案件ごとに調整
   ============================================================ */
:root{
  /* --- 色: CueZilla テーマ変数から自動取得（無い場合のフォールバック付き） ---
     ※これらは【動的パーツの色合わせ用】。生成サイトCSSはこの変数に依存せず具体値で書く（安全契約）。
       実機では body内コンポ<style>の:rootが --main-color 等を頁単位で上書きしうる＝--dyn-*も追従する。 */
  --dyn-bg:        var(--background-color, #ffffff);   /* ページ/セクション背景 */
  --dyn-surface:   var(--temporary-color, #f4f4f2);    /* カード/パネル/入力欄の面 */
  --dyn-text:      var(--text-color, #222222);         /* 本文 */
  --dyn-heading:   var(--text-color, #111111);         /* 見出し */
  --dyn-muted:     var(--sub-color, #8a8a8a);          /* 補助/日付 */
  --dyn-border:    var(--sub-color, #dddddd);          /* 罫線/枠 */
  --dyn-accent:    var(--main-color, #1e3a5f);         /* アクセント（ボタン/チップ/見出しバー） */
  --dyn-accent-2:  var(--link-color, var(--main-color, #1e3a5f)); /* リンク/ホバー */
  --dyn-on-accent: #ffffff;                             /* アクセント面の上の文字 */

  /* --- フォント（site.css の :root に定義があればそれを使用） --- */
  --dyn-font-display: var(--font-display, "Noto Serif JP","Yu Mincho",serif);
  --dyn-font-body:    var(--font-body, "Noto Sans JP","Yu Gothic",sans-serif);
  --dyn-font-numeric: var(--font-numeric, "EB Garamond","Noto Serif JP",serif);

  /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 0 --- */
  --dyn-radius: 6px;
  /* --- 一覧カードの最小幅 / 段組ギャップ --- */
  --dyn-card-min: 300px;
  --dyn-gap: 32px;
}

/* === テーマ プリセット（使う方を §0 の後にコピペして上書き） =========
   【ダーク】
   :root{
     --dyn-bg:#0A0A0A; --dyn-surface:#111110; --dyn-text:#F4F1EC; --dyn-heading:#FAF7F1;
     --dyn-muted:#8C857A; --dyn-border:#3A352D; --dyn-accent:#8E3A22; --dyn-accent-2:#B0533A;
     --dyn-on-accent:#FAF7F1; --dyn-radius:0;
   }
   【ライト】
   :root{
     --dyn-bg:#ffffff; --dyn-surface:#f7f7f5; --dyn-text:#222222; --dyn-heading:#111111;
     --dyn-muted:#8a8a8a; --dyn-border:#e3e3e3; --dyn-accent:#1e3a5f; --dyn-accent-2:#1e3a5f;
     --dyn-on-accent:#ffffff; --dyn-radius:6px;
   }
   ※ CueZilla テーマ変数(--main-color 等)を設定する場合は §0 が自動連動するのでプリセット不要。
   ============================================================ */


/* ============================================================
   §1  パンくず（CueZilla parts###_breadcrumb / p-breadcrumb）
   実markup: div.parts###_breadcrumb.p-breadcrumb.c-breadcrumb
             > ul.p-breadcrumb__inner(BreadcrumbList) > li.p-breadcrumb__item(ListItem)
   CueZilla共通CSSにパンくず装飾は無い → skin側で横並び・区切り・配色を付与
   ============================================================ */
[class*="_breadcrumb"], .p-breadcrumb{ background:var(--dyn-bg) !important; }
.p-breadcrumb__inner{
  list-style:none; margin:0 auto; padding:14px 24px;
  max-width:1200px; display:flex; flex-wrap:wrap; align-items:center;
}
.p-breadcrumb__item{
  display:inline-flex; align-items:center;
  color:var(--dyn-muted) !important; font-family:var(--dyn-font-body);
  font-size:.78rem; letter-spacing:.04em;
}
.p-breadcrumb__item a{ color:var(--dyn-muted) !important; text-decoration:none; }
.p-breadcrumb__item a:hover{ color:var(--dyn-accent-2) !important; text-decoration:underline; }
.p-breadcrumb__item:last-child{ color:var(--dyn-text) !important; }   /* 現在地 */
/* 区切り（2件目以降の前に "›"） */
.p-breadcrumb__item + .p-breadcrumb__item::before{
  content:"\203A"; margin:0 .6em; color:var(--dyn-border) !important; font-size:.95em;
}
.p-breadcrumb meta{ display:none; }   /* schema.org の <meta itemprop="position"> は非表示 */


/* ============================================================
   §2  ページヘッダー（[class*="_article_header"]）画像上のタイトル
   ============================================================ */
[class*="_article_header"] .ja, [class*="_article_header"] h1, [class*="_article_header"] h2{
  color:var(--dyn-heading) !important; font-family:var(--dyn-font-display) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.5) !important;
}
[class*="_article_header"] .en{ color:var(--dyn-muted) !important; font-family:var(--dyn-font-numeric) !important; letter-spacing:.1em; text-shadow:0 1px 10px rgba(0,0,0,.5) !important; }


/* ============================================================
   §3  ページネーション（2系統。テーマCSSの持ち方が違うので扱いを分ける＝崩れ防止）
   ・.pagination_*（enjoyworks系）            … テーマが素 → 体裁＋色を一式付与
   ・[class*="_pagenation"]（parts222/225/228系）… テーマが体裁を持つ（flex/padding/border/白黒ハードコード）
        → レイアウト・サイズはテーマに任せ、ハードコードの白黒(#000/#fff)だけブランド色へ置換（最小限）。
          a/.current 以外（余白用の素の <span>）には触らない＝二重ボックス化を防ぐ。
          --dyn-accent は §0 で var(--main-color) にバインド済み＝サイトのCMS色に自動一致（案件側の手当て不要）。
   ============================================================ */
/* (A) pagination_* 系：テーマ装飾が無いので一式付与 */
.pagination_num, .pagination_prev, .pagination_next{
  font-family:var(--dyn-font-numeric); color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.pagination_num.current{ background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.pagination_num:hover, .pagination_prev:hover, .pagination_next:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }

/* (B) _pagenation 系：色だけ寄せる（ジオメトリはテーマのまま＝箱を再定義しない） */
[class*="_pagenation"] a{ border-color:var(--dyn-accent) !important; color:var(--dyn-text) !important; }
[class*="_pagenation"] span.current, [class*="_pagenation"] .current, [class*="_pagenation"] .active{
  background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
[class*="_pagenation"] a:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }
.pe-none{ opacity:.3; pointer-events:none; }


/* ============================================================
   §4  ブログ / 施工実績(blog-ex) 一覧（番号非依存）
   ============================================================ */
/* 一覧セクションの地 */
[class*="_post_list"], [class*="_post_wrap"]{ } /* 下で個別指定 */
/* カード並び（最小幅を確保して細くなりすぎない） */
[class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; }
/* カード */
[class*="_post_wrap"]{
  /* カード等寸化：中身を縦に積み、内側の <a>/本文枠を flex で伸長させて高さを揃える（S01189還流） */
  display:flex !important; flex-direction:column;
  margin:0 !important;   /* theme_default の margin-bottom(55px等)残存で最終行カードだけ高さ不揃いになるのを打ち消す */
  width:auto !important; max-width:none !important; text-decoration:none;
  background:var(--dyn-surface) !important; border:1px solid var(--dyn-border) !important;
  border-radius:var(--dyn-radius); overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
[class*="_post_wrap"]:hover{ transform:translateY(-4px); border-color:var(--dyn-accent-2) !important; }
[class*="_post_wrap"] > a{ display:flex; flex-direction:column; flex:1 1 auto; color:inherit; }  /* カード全体ラップ<a>を縦伸長（内容を上下に満たす） */
/* サムネ等寸化：グリッド列の幅から高さを算出（幅制約下＝§6.5の aspect-ratio×height 併用の罠には該当しない） */
[class*="_post_img"]{ width:100%; display:block; border-radius:0; aspect-ratio:16/10; overflow:hidden; }
[class*="_post_img"] img{ width:100%; height:100%; object-fit:cover; display:block; }
/* カード内のテキストに左右余白 */
[class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; flex-wrap:wrap; justify-content:flex-start !important; gap:10px; align-items:center; }
[class*="_post_status"]:has([class*="_title-excerpt"]){ display:block !important; }   /* parts228系「日付｜タイトル」の横並びを解除（:has非対応環境ではflex-wrapで折返し） */
[class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; flex:1 1 auto; }   /* 本文枠を伸長＝カード等寸化の要 */
[class*="_post_status"]:has([class*="_title-excerpt"]) [class*="_title-excerpt"]{ padding:10px 0 16px !important; }   /* 施工実績は左端揃え */
[class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; font-weight:700 !important; line-height:1.5; }
[class*="_post_excerpt"]{ color:var(--dyn-muted) !important; }
[class*="_post_date"]{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* カテゴリ/ステータスは1チップに。
   テーマは既に _post_category に border:1px solid var(--main-color) を持つ＝枠を“足す”と2重になるので
   同一要素に !important で単一の枠を確定（色は --dyn-accent=var(--main-color) で一致）。幅は % 制約を解除し content 幅に。 */
[class*="_post_category"]:not([class*="_sidebar"]), [class*="_post_status"] > span:last-child{
  /* :not(_sidebar) ＝ この§4チップ装飾が §5 の _sidebar_post_category_count へ漏れ二重適用されるのを防ぐ（S01189還流） */
  width:auto; max-width:none !important;
  background:var(--dyn-bg) !important; border:1px solid var(--dyn-accent) !important;
  border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent) !important;
}
.parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
.parts-blog-ex_tag{ font-size:.72rem; color:var(--dyn-muted) !important; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:2px 8px; }

/* --- 一覧パーツ固有の崩れ2点（実共有CSS=theme parts222/225/228 を突き合わせて確定）---
   (a) 自動セクション見出し（「ブログ」「施工実績」等）の撤去：
       テーマは `.parts222_section h2 / .parts228_section h2` に
       color:var(--main-color)/font-size:35px/text-align:center を付与し、
       一覧上部に大見出しを自動描画する。自前の下層ヘッダー(hero)と二重化＝崩れ。
       → 一覧パーツ(_post_list を含む _section)直下の素の h2 だけ隠す。
         残したいサイトは案件CSSで個別に復帰。`:has()` 非対応保険に f_meiryo 版も併記。 */
[class*="_section"]:has([class*="_post_list"]) > h2,
[class*="_section"] > h2.f_meiryo{ display:none !important; }
/* (b) flex前提の余白スペーサー ::after の無効化：
       テーマは `.parts228_post_list::after{content:"";width:32.465%}` で flex の最終行詰めをする。
       §4 で _post_list を grid 化すると、この ::after が「空のゴースト列」になり最終行が片寄る。
       → grid では不要なので除去（content:none で擬似要素自体を消す）。 */
[class*="_post_list"]::after{ content:none !important; display:none !important; }


/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
/* サイドバー見出し（「最近の投稿」「カテゴリ」）の可読性を確保。
   theme_default は `.partsNNN_sidebar h3{ background-color:var(--main-color); color:#fff }` と
   色を直当てするが、§12 の見出しリセットが**背景だけ**を transparent にするため、
   ライト基調の案件では「白地に白文字」で消える（ダーク案件では地に映えるため露見しない）。
   背景は戻さず（skinのフラット化方針を維持）、文字色だけトークンへ寄せて両基調で可読にする。 */
[class*="_sidebar"] h3{ color:var(--dyn-heading) !important; }
[class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
/* 「最近の投稿」見出し（詳細ページ側）の帯を外して一覧側と体裁を揃える。
   theme_default は `.recent_posts_wrap .recent_post_title{ background-color:var(--main-color); color:#fff }` で帯を敷くが、
   §12 の見出しリセットは (a) 包み(parts166_single_article / parts-blog-ex-single-wrap)が `_section` を含まない
   (b) 要素が <div>（h2/h3でない）── の2点で**届かず**、帯だけが生き残る。
   一方すぐ上の §5 が文字色を --dyn-heading（＝ライトでは濃色）へ寄せるため「濃い帯に濃い文字」となり、
   案件ごとに帯との視認性を見て文字色を手当てする必要があった。帯を外せば一覧（§12で帯が外れる）と揃い、手当ても不要になる。
   ※帯を活かしたい案件は案件側で `background:var(--dyn-accent); color:var(--dyn-on-accent)` を再指定する。 */
.recent_post_title{ background:transparent !important; padding-left:0 !important; }
[class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* 記事li の区切り罫線：theme_default が #666 をハードコードしており地に合わず過剰に見える → トークンへ */
[class*="_sidebar"] ul li, .recent_posts_wrap ul li{ border-bottom-color:var(--dyn-border) !important; }
/* カテゴリ右の記事数を視認できるチップに */
[class*="_sidebar_post_category_count"]{ background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:0 8px !important; }
/* カテゴリ一覧 li：theme_default 由来の左右縦罫線(1px solid #666)を除去（下罫線は区切りとして意図的に残す）。S01189還流 */
[class*="category_post_count"] li{ border-left:0 !important; border-right:0 !important; }
/* カテゴリ名と件数チップが重ならないよう両端寄せ */
[class*="category_post_count"] li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; }


/* ============================================================
   §6  詳細ページ（本文 / 署名 / SNS / 詳細内スライダー）
   ============================================================ */
.parts-blog-ex_text{ font-family:var(--dyn-font-body); color:var(--dyn-text) !important; line-height:1.9; }
.parts-blog-ex_text h2, .parts-blog-ex_text h3{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
.signature_wrap{ font-family:var(--dyn-font-display); color:var(--dyn-muted) !important; border-top:1px solid var(--dyn-border); padding-top:16px; }
.slick-prev, .slick-next{ color:var(--dyn-accent-2) !important; }
/* ※詳細本文の親ラッパーが固定class薄め。崩れる場合は実ページで本文コンテナを確認し追補 */


/* ============================================================
   §7  お問い合わせフォーム
   ============================================================ */
.contact_section, [class*="_section_form"], [class*="_section_content"], [class*="_content_wrap"], [class*="_content"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
[class*="_form_wrap"]{ max-width:720px; margin:0 auto; }
[class*="_form_wrap"] label, [class*="_form_wrap"] dt, [class*="_form_wrap"] .ja, [class*="_form_wrap"] .en{ color:var(--dyn-text) !important; }
/* 入力欄を十分な大きさに（チェック/ラジオは除外） */
[class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]),
[class*="_form_wrap"] dd select{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
[class*="_form_wrap"] textarea, .form_textarea textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
/* チェックボックス/ラジオはサイズ統一 */
[class*="_form_wrap"] input[type="checkbox"], [class*="_form_wrap"] input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; }
/* 必須バッジ: 文字を中央・折り返さない・角丸はトークン */
.required{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.error{ color:var(--dyn-accent-2) !important; }
/* 「お問い合わせ内容」を囲む大きな箱(枠線)を撤去 */
.form_textarea, .form_text_dt{ border:none !important; background:transparent !important; }
/* 送信ボタン */
.contact_submit, .contact_submit button, .contact_submit input{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; }
/* 確認ページの「戻る」は副ボタン（送信＝アクセント／戻る＝アウトライン）＝誤導線防止 */
.contact_submit input[name="back"]{ background:transparent !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; }
/* 送信前 disabled（reCAPTCHA未完了）の見え方 */
.contact_submit input[disabled]{ opacity:.5; cursor:not-allowed; }

/* --- フォーム実コードで頻出するが §7本体に無かった部品（parts213等の実装を突き合わせ）--- */
/* ファイル添付の自作UI：受領インライン<style>が #eee 地・#999 文字・明るいグラデで固定し、
   ダーク地で白い箱・低コントラストになる。トークンで地・枠・文字を寄せる（label_file_upload に限定）。 */
.label_file_upload{ display:block; width:100%; padding:12px 14px; cursor:pointer;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
.label_file_upload button{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; pointer-events:none; }
.label_file_upload span, #file-chosen, [id$="filechosen"]{ color:var(--dyn-muted) !important; }
.des{ color:var(--dyn-muted) !important; }
/* 注意書き（文字数制限・ファイル名規則等の補助）：色未指定/未定義var(--red)で可読性がばらつくため muted で固定（AA確保色） */
.attention{ color:var(--dyn-muted) !important; }
/* 郵便番号は narrow に保つ：上の入力欄ルール `[class*="_form_wrap"] dd input:not([checkbox]):not([radio])`
   は (0,3,2)+!important で .zip も全幅化し〒[郵便番号][住所]を壊す。これに勝つよう :not() を重ねて
   詳細度を (0,4,2) に上げて .zip だけ幅を戻す（parts219等 form_address系・番号非依存）。 */
[class*="_form_wrap"] dd input.zip:not([type="checkbox"]):not([type="radio"]){ width:9em !important; max-width:9em !important; display:inline-block; margin-right:8px; }
/* プライバシー同意 */
.privacypolicy{ background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:16px; color:var(--dyn-muted) !important; }
.privacypolicy-link{ color:var(--dyn-accent-2) !important; }
/* 電話/メール等の content バー（角丸はトークン） */
[class*="_content"] [class*="btn"], [class*="_content"] a[class*="round"]{ border-radius:var(--dyn-radius) !important; }


/* ============================================================
   §7b  お問い合わせフォーム ─ wpcf7 / .formBox 系（第2系統）
   ------------------------------------------------------------
   【重要】フォームには構造が2系統ある（dynamic-harvest.js の「フォーム系統」で判定）：
     ・§7  = parts_form/dl 系（[class*="_form_wrap"] / dt / dd / .required / .contact_submit）
     ・§7b = wpcf7/.formBox 系（.formWrap > .formBox > dt>label>span.req + dd>input,
              送信=input.wpcf7-submit。SEIKEN/協力会社フォーム等 Contact Form 7 由来）
   §7 の `[class*="_form_wrap"]` は §7b 構造に当たらないため、当該系統では本セクションが要る。
   いずれも番号非依存のセマンティッククラスで記述。
   ============================================================ */
.formWrapbg, .formWrap, .form, [class*="formSec"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.formWrap{ max-width:720px; margin:0 auto; }
.formBox{ margin-bottom:20px; }
.formBox dt, .formBox label{ color:var(--dyn-text) !important; }
.formBox dd input:not([type="checkbox"]):not([type="radio"]),
.formBox dd select,
.formWrap input[type="text"], .formWrap input[type="email"], .formWrap input[type="tel"]{
  width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important;
  min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formBox dd textarea, .formWrap textarea{
  width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formWrap input[type="checkbox"], .formWrap input[type="radio"]{
  width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important;
  vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important;
}
/* 必須バッジ（wpcf7系は .req） */
.req, .formBox .req{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important;
  white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important;
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
.wpcf7-not-valid-tip, .wpcf7-response-output{ color:var(--dyn-accent-2) !important; }
/* 送信（Contact Form 7） */
input.wpcf7-submit, .formWrap button[type="submit"]{
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
  border:none !important; border-radius:var(--dyn-radius) !important;
  min-height:54px !important; padding:14px 28px !important; font-size:16px !important; cursor:pointer;
}
/* プライバシー同意（両系統共通の .privacypolicy* は §7 で適用済） */


/* ============================================================
   §14  自動CSSに負けた時の手順（R-27）※汎用アーマーは持たない＝安全契約
   ------------------------------------------------------------
   CueZilla は body内コンポ<style>でパーツ単位に `.partsNNN_blog_<ID> .card .card-body{…!important}`
   等の高詳細度(0,3,0)+!important を吐く。§1〜§9 の単一属性セレクタ(0,1,0〜0,2,0)+!important は
   同プロパティで【負ける】（症状：当てているのに反映されない＝崩れの常連）。

   → 【禁止】[class*=…]を積んで(0,3,0)に並べる汎用アーマー（脆い・過剰マッチ・アーマーレース）。
        ＝以前ここにあった `[class*="parts"][class*="_blog"] .card` 等は本契約により撤去した。
        （theme_default 非importantへの色寄せは §8 の単一 `[class*="_blog"] .card`(0,2,0)+!important で足りる）
   → 【正】負けたパーツだけ、harvestで実採番を取り【案件CSS】末尾に (0,3,1) を1個足して確実に勝つ：
        section.parts131415_blog_xxxx .card .card-body{ … !important }   ← 実採番。構造変化に不感
     ※ skin は全案件共通なので案件固有の番号は書かない（負けた時だけ案件側で対処）。
     ※ 採番取得＝verify/dynamic-harvest.js。当て方＝50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md §14。 */
/* 見出しのテーマ装飾(角丸/中央寄せ/背景/罫線)残りをパーツ内でリセット（R-21）。
   theme_default は非importantなので、単一 [class*="_section"] + !important で確定勝ち（[class*]を積まない）。 */
[class*="_section"] h2, [class*="_section"] h3{
  border-radius:0 !important; background:transparent !important; border:none !important; text-align:inherit !important;
}


/* ============================================================
   §8  トップ用 お知らせ/ブログ teaser（notice-news / blog teaser）
   ============================================================ */
.parts040506_notice-news{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.parts040506_notice-news *{ color:var(--dyn-text) !important; }
.parts040506_notice-news .title, .parts040506_notice-news .title a{ color:var(--dyn-heading) !important; }
.parts040506_notice-news [class*="date"], .parts040506_notice-news .f_yugothic{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
.parts040506_notice-news .more{ white-space:nowrap !important; color:var(--dyn-accent-2) !important; }
.parts040506_notice-news a{ color:var(--dyn-accent-2) !important; }
/* サムネ型ブログ teaser */
[class*="_blog_title_wrap"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_blog_thumbnail"]{ border-radius:var(--dyn-radius); }
/* teaser内が Bootstrap .card（既定で白）の場合のダーク/トーン化 */
[class*="_blog"] .card{ background:var(--dyn-surface) !important; border-color:var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; }
[class*="_blog"] .card-title, [class*="_blog"] .card-text{ color:var(--dyn-text) !important; }
[class*="_blog"] .card-title{ font-family:var(--dyn-font-display) !important; }


/* ============================================================
   §9  Bootstrap汎用クラスの地ならし（パーツ内に限定）
       text-dark / bg-light 等がパーツ内でトーンを乱すのを抑える
   ============================================================ */
[class*="parts"] .text-dark{ color:var(--dyn-text) !important; }
[class*="parts"] .bg-light{ background:var(--dyn-surface) !important; }
.card-header.bg-light{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }


/* ============================================================
   §10  プライバシーポリシー（templates/privacy-policy.html のフリーコーディング設置版）
   ※CueZilla既定パーツ(item_title/item_description)へ転記する場合は §5 等で別途適用される
   ============================================================ */
.privacy{ max-width:880px; margin:0 auto; padding:64px 24px; color:var(--dyn-text); font-family:var(--dyn-font-body); line-height:1.9; }
.privacy__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,4vw,2.6rem); }
.privacy__subtitle{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:1.2rem; margin-top:8px; }
.privacy__lead{ color:var(--dyn-muted); margin:24px 0 40px; }
.privacy-item{ margin-bottom:32px; }
.privacy-item__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); border-left:3px solid var(--dyn-accent); padding-left:12px; margin-bottom:12px; }
.privacy-item__body{ color:var(--dyn-text); }
/* 原文の (1)(2)… 表記を維持（auto ol の "1." ではなく括弧付き番号で表示） */
.privacy-item__list{ list-style:none; counter-reset:pp; margin:8px 0; padding:0; }
.privacy-item__list li{ counter-increment:pp; padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); }
.privacy-item__list li::before{ content:"(" counter(pp) ") "; }


/* ============================================================
   §11  下層ヘッダーパーツ（templates/subpage-header.html）
   サイトヘッダーとパンくずの間。フリーコーディングで別パーツ化
   ============================================================ */
/* padding-top に固定ヘッダー高さ(--fixed-header-h)を加算＝固定ヘッダーへのめり込み防止。
   固定ヘッダーが無いサイトは既定0で無影響。固定ヘッダー採用サイトは案件CSSで :root{ --fixed-header-h:88px } 等を設定（R-18）。 */
.subpage-header{ position:relative; padding:calc(72px + var(--fixed-header-h, 0px)) 24px 72px; background:var(--dyn-surface); text-align:center; overflow:hidden; }
.subpage-header__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; z-index:0; }
.subpage-header__inner{ position:relative; z-index:1; }
.subpage-header__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,3rem); line-height:1.3; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.subpage-header__en{ font-family:var(--dyn-font-numeric); color:var(--dyn-muted); letter-spacing:.12em; margin-top:8px; }


/* ============================================================
   §12  システム定型ページ：送信完了(thanks) / 404
   templates/thanks.html, templates/404.html 用。トークンスキン準拠
   ============================================================ */
.thanks, .notfound{ max-width:760px; margin:0 auto; padding:calc(80px + var(--fixed-header-h, 0px)) 24px 96px; text-align:center; }
/* CueZilla 既定404（section.not-found）はレイアウトを変えず、固定ヘッダー分の上余白だけ確保（R-18） */
.not-found{ padding-top: calc(var(--fixed-header-h, 0px) + 24px); }
.thanks__title, .notfound__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.3; margin-bottom:28px; }
.thanks__lead, .notfound__lead{ color:var(--dyn-text); line-height:2; margin-bottom:40px; }
.thanks__action, .notfound__action{ margin-top:8px; }


/* ============================================================
   §13  Bootstrap(テーマ)既定の恒久打ち消し（R-20）
   ------------------------------------------------------------
   CueZillaテーマが読み込む Bootstrap の "素のタグ/汎用クラス" が
   フリーHTMLに当たって崩す症状を、案件ごとの手当て無しで地ならしする。
   ここは確認済みの実害2件（test0605）に限定して打ち消す。
   ※「色/余白/タイポ」を意図して変える装飾は接頭辞クラス(.xw- 等)で
     付け直す＝下記より高詳細度になり、本セクションに勝つ（壊さない）。
   ============================================================ */
/* (a) <mark> / .mark の黄ハイライト背景：ロゴや見出しが黄色い箱になる症状 → 無効化。
       意図的なマーカー装飾は専用クラスで（Bootstrap名 .mark を流用しない＝R-20）。 */
mark, .mark{
  background-color:transparent !important; color:inherit !important;
  padding:0 !important; border-radius:0 !important;
}
/* (b) a:hover が Bootstrap青(#0a58ca)になる症状 → 既定は「ホバーで色を変えない」。
       !important は付けない＝個別のホバー装飾(接頭辞クラスや site.css の指定)が
       そのまま勝ち、未指定リンクだけが青化を免れる（フォールバック）。 */
a:hover{ color:inherit; }

/* (c) 電話番号リンク(tel:)の最低タップ確保（R-24／§5.5-3）。
       本文中インラインでも折り返さない。CTA/ボタン用途は接頭辞クラスで44px確保。 */
a[href^="tel:"]{ white-space:nowrap; }


/* ===== 50_override.css ===== */
/* ===== 案件追補（override）：skin の後に適用（結合順 site→skin→override） ===== */

/* R-18: 固定ヘッダー高さ。skin §11/§12（subpage-header / thanks / 404）の
   固定ヘッダーめり込み防止に使用。受領ヘッダー scrolled 状態のおよその高さ。 */
:root{ --fixed-header-h:76px; }

/* R-10a: 下層ページのパンくずは、静的ページは本文内・システムページは下層ヘッダーパーツ内に
   .crumb-bar として内包している。CueZilla の自動パンくずと二重表示になるため抑止する。
   ※実機で自動パンくずのクラスが _breadcrumb 系でない場合は要調整（実機確認事項・申し送り記載）。 */
[class*="_breadcrumb"], .p-breadcrumb{ display:none !important; }

/* TOPページ限定の打ち消し（受領は TOP=style.css のみ・下層=style.css+sub.css の分離設計。
   統合CSSでは sub.css の下層専用ルールがTOPにも漏れるため、TOP本文を包む .top-page でスコープして戻す）。 */
/* ① セクション番号 01.. を表示（sub.css の .sec-head__no{display:none} を打ち消す） */
.top-page .sec-head__no{ display:inline-block !important; }
/* ② 代表メッセージ：sub.css の下層書簡型 .message / .message__body がTOPに漏れるのを打ち消す。
   ・section.message のグリッド化を解除（通常ブロックへ）
   ・.message__body は TOPの style.css 本来の 2カラムグリッド（.8fr 1.2fr）へ戻す（sub.css の flex を無効化）。
     grid-template-columns は style.css の .message__body が持つため display だけ戻せば可（@640の1fr化も維持される）。 */
.top-page .message{ display:block !important; max-width:none !important; margin-inline:0 !important; grid-template-columns:none !important; }
.top-page .message__body{ display:grid !important; }

/* 実機調整（R-28）：CueZilla動的パーツの上余白を詰め、静的部との二重余白を解消。
   （静的部側の下余白は 16a/17a の該当ブロックで .wrap--pb → .wrap にして0化。） */
.parts131415_blog_Ub1KALSymY{ padding-top:0 !important; }   /* TOP：ブログ一覧パーツ */
.parts228_section{ padding-top:0 !important; }               /* 施工実績：一覧パーツ */
.parts222_section{ padding-top:0 !important; }               /* ブログ：一覧パーツ */

/* 採用ページ（/recruit）を黒基調に。受領は body.theme-dark だったが、本文を .theme-dark でラップして復元。
   sub.css §29 の body.theme-dark は body 限定なので、ラッパー div 用に背景/文字色をここで付与
   （.theme-dark <desc> の各配色ルールは sub.css がそのまま適用される）。 */
.theme-dark{ background:var(--ink); color:#fff; }

.filter__chip[aria-current="page"]{background:#000;color:#fff;border-color:#000}
.filter__chip[aria-current="page"]:hover{background:#000;color:#fff;border-color:#000}
.parts222_post_wrap{background:none !important;border:none !important}
.parts228_post_wrap{background:none !important;border:none !important}
.parts225_section{padding-top:0 !important}
.parts166_single_article{padding-top:0 !important}
.design-parts-11_suZvkSBoPi{padding-top:0 !important}
.design-parts-11_suZvkSBoPi .container .content ul li a{border:none !important;background:none !important}