/* ===== 20_site.css ===== */
/* ===== O01280 坂田防災 site.css =====
   受領 index.html の helmet 内 style をそのまま移し、セレクタだけ次の2点を機械変換した:
     1. ヘッダー / フッター / html・body・a・::placeholder 以外は .sk-lp へスコープ。
        追加CSSはサイト共通なので、素の section / section h2 等がCMS描画ページ
        （/form/inquiry・/privacypolicy・送信完了・404）へ漏れるのを止めるため。
     2. 受領に実体が無い image-slot 要素のセレクタは除外。
   宣言そのものは一切変えていない（!important の有無・値・順序は受領のまま）。
 */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#1A1A1A;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:#0B3399}
a:hover{color:#EC130D}
::placeholder{color:#5A6570}
@keyframes fvScroll{0%{transform:translateY(-100%)}60%,100%{transform:translateY(200%)}}
@keyframes fvFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes headIn{from{opacity:0;transform:translateY(26px) skewY(4deg)}to{opacity:1;transform:none}}
@keyframes bandRun{0%{clip-path:inset(0 100% 0 0)}42%{clip-path:inset(0 0 0 0)}52%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes headWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -6% 0 0)}}
@keyframes floatPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.sk-lp a[data-float="cta"]{animation:floatPulse 2.2s ease-in-out infinite}
@media (max-width:1180px){
  .sk-lp [data-scrollcue]{display:none!important}
}
@media (min-width:768px){
  .sk-lp [data-screen-label="01 FV"] h1 br[data-sp-br]{display:none}
  .sk-lp [data-screen-label="02 お悩み提起"] picture{text-align:center}
  .sk-lp [data-screen-label="02 お悩み提起"] img{width:81%!important;margin-left:auto;margin-right:auto}
}
@media (min-width:1025px){
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child{transform:translateX(-20px)}
  .sk-lp [data-screen-label="01 FV"] h1{letter-spacing:.015em!important}
}
@media (max-width:1280px){
  .sk-lp [data-screen-label="01 FV"] ul li:nth-last-child(1) span,.sk-lp [data-screen-label="01 FV"] ul li:nth-last-child(2) span{transform:translateY(-50%) scaleX(.9)!important}
}
@media (min-width:1025px) and (max-width:1280px){
  .sk-lp [data-screen-label="01 FV"] ul li span{font-size:clamp(11px,14cqw,17px)}
  .sk-lp [data-screen-label="01 FV"] ul li span b{font-size:clamp(14px,19cqw,23px)}
}
@media (min-width:768px) and (max-width:1024px){
  .sk-lp [data-screen-label="04 解決策・フロー"] ol{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:28px 20px!important}
  .sk-lp [data-screen-label="04 解決策・フロー"] div[data-flowline]{display:none!important}
  .sk-lp div[data-illust="works"]{right:16px!important}
  .sk-lp [data-screen-label="03 問題の深掘り"] ul li h3{font-size:21px!important;letter-spacing:-.01em!important}
}
@media (max-width:1024px){
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child span{width:112px!important;height:112px!important;font-size:15px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child span:first-child{position:relative!important;left:-5px!important}
  .sk-lp [data-screen-label="01 FV"] h1,.sk-lp [data-screen-label="01 FV"] h1 span{-webkit-text-stroke-width:10px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div{padding:0 24px!important}
  .sk-lp [data-screen-label="01 FV"] ul{grid-template-columns:repeat(3,minmax(0,150px)) minmax(60px,120px) repeat(3,minmax(0,150px))!important;justify-content:center!important;gap:10px!important}
  .sk-lp [data-screen-label="01 FV"] ul li[aria-hidden]{display:block!important}
  .sk-lp [data-screen-label="01 FV"] ul li span{font-size:clamp(11px,14cqw,17px)!important}
  .sk-lp [data-screen-label="01 FV"] ul li span b{font-size:clamp(14px,19cqw,23px)!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > p{font-size:clamp(15px,1.7vw,24px)!important;padding:10px 24px!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a[href="#form"]{background:#fff!important;color:#EC130D!important;border:2px solid #EC130D!important;box-shadow:0 4px 0 #A80B07!important}
}
@media (max-width:359px){
  header img{height:22px!important}
}
@media (max-width:767px){
  header > div > div{display:grid!important;grid-template-columns:auto auto!important;justify-content:end!important;align-items:center!important;gap:4px 6px!important;flex-shrink:1!important;min-width:0!important}
  header a[href^="tel:"]{grid-column:1 / -1!important;justify-self:end!important;font-size:16px!important;order:2!important}
  header a[data-nav="hp"] span[data-hp="long"]{display:none!important}
  header a[data-nav="hp"] span[data-hp="short"]{display:inline!important}
  header a[href^="tel:"]{font-size:12px!important}
}
@media (max-width:767px){
  header > div{padding:8px 10px!important;gap:6px!important;flex-wrap:nowrap!important}
  header > div > div{gap:6px!important;flex-shrink:1!important;min-width:0!important}
  header img{height:26px!important}
  header a[data-nav="hp"]{font-size:11px!important;padding:4px 8px!important;min-height:36px!important;border-width:1px!important;line-height:1.25!important;white-space:nowrap!important;text-align:center!important;flex:0 0 auto!important}
  header a[href^="tel:"]{font-size:13px!important}
  header a[href="/form/inquiry"], header a[href="/#form"]{padding:5px 10px!important;font-size:12px!important;min-height:44px!important;line-height:1.25!important;text-align:center!important;white-space:normal!important;flex-direction:column!important;flex:0 0 auto!important}
  header a[href="/form/inquiry"] span[data-nl], header a[href="/#form"] span[data-nl]{display:block!important}
  .sk-lp [data-screen-label="01 FV"]{min-height:calc(100dvh - 72px)!important;padding:0!important}
  .sk-lp [data-screen-label="01 FV"] > div:first-child{display:none!important}
  .sk-lp [data-screen-label="01 FV"] > div{padding:18px 0 22px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div{padding:0 16px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child{position:absolute!important;right:5px!important;top:-42px!important;left:auto!important;margin:0!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child span{width:80px!important;height:80px!important;font-size:10.5px!important;padding-left:0!important;margin-left:-14px!important;white-space:nowrap!important;line-height:1.35!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child span:last-child{padding-left:16px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child span:first-child{margin-left:0!important}
  .sk-lp [data-screen-label="01 FV"] h1,.sk-lp [data-screen-label="01 FV"] h1 span{-webkit-text-stroke-width:6px!important}
  .sk-lp [data-screen-label="01 FV"] h1{font-size:min(10.5cqw,33px)!important;line-height:1.4!important;margin-bottom:12px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > p{font-size:13px!important;padding:9px 12px!important;line-height:1.6!important;text-align:left!important}
  .sk-lp [data-screen-label="01 FV"] ul{grid-template-columns:repeat(3,minmax(0,92px))!important;justify-content:center!important;gap:8px!important;margin-top:14px!important}
  .sk-lp [data-screen-label="01 FV"] ul li span{font-size:12px!important;line-height:1.3!important}
  .sk-lp [data-screen-label="01 FV"] ul li span b{font-size:15px!important}
  .sk-lp [data-screen-label="01 FV"] ul li[aria-hidden]{display:none!important}
  .sk-lp [data-screen-label="01 FV"] ul + div{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:14px!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a{grid-column:auto!important;font-size:18px!important;letter-spacing:0!important;min-height:48px!important;padding:8px 4px!important;white-space:nowrap!important}
  .sk-lp [data-screen-label="02 お悩み提起"] img{margin-bottom:-64px!important}
  .sk-lp section{padding-top:56px!important;padding-bottom:64px!important}
  .sk-lp section > div{padding-left:16px!important;padding-right:16px!important}
  .sk-lp section h2{font-size:33px!important;line-height:1.4!important}
  .sk-lp section h2 span:first-child{font-size:18px!important;padding:3px 14px!important}
  .sk-lp section h3{font-size:19px!important}
  .sk-lp [data-screen-label="03 問題の深掘り"]{padding-top:28px!important}
  .sk-lp [data-screen-label="03 問題の深掘り"] ul{grid-template-columns:1fr!important}
  .sk-lp [data-screen-label="03 問題の深掘り"] ul li h3{font-size:20px!important}
  .sk-lp [data-screen-label="04 解決策・フロー"] ol{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 16px!important}
  .sk-lp [data-screen-label="04 解決策・フロー"] div[data-flowline]{display:none!important}
  .sk-lp [data-screen-label="05 レスポンスの強み"] > div{grid-template-columns:1fr!important;gap:28px!important}
  .sk-lp span[data-ghost="safety"]{font-size:30px!important;top:6px!important;right:14px!important;left:14px!important;text-align:right!important;white-space:normal!important}
  .sk-lp div[data-illust="staff"]{height:calc(79.2vw * 0.78 + 90px)!important}
  .sk-lp div[data-illust="staff"] img{width:79.2vw!important}
  .sk-lp div[data-illust="staff"][data-in-photo]{position:absolute!important;left:6px!important;right:auto!important;bottom:0!important;width:62%!important;height:fit-content!important;transform:none!important;overflow:visible!important}
  .sk-lp div[data-illust="staff"][data-in-photo] img{position:static!important;width:100%!important;transform:none!important;bottom:auto!important;margin-bottom:-9%!important}
  .sk-lp div[data-bg="record"]{background-position:40% center!important}
  .sk-lp [data-screen-label="06 実績"] p > span:first-child{font-size:62px!important}
  .sk-lp [data-screen-label="06 実績"] p > span:last-child{font-size:20px!important}
  .sk-lp [data-screen-label="06 実績"] > div > p:nth-of-type(2){font-size:14px!important;margin-top:8px!important}
  .sk-lp [data-screen-label="06 実績"] > div > p:nth-of-type(3){font-size:19px!important}
  .sk-lp [data-screen-label="10 問い合わせ"] > div > div{padding:20px 16px 22px!important;border-radius:18px!important}
  .sk-lp [data-screen-label="08 施工事例"] ul{grid-template-columns:1fr!important;gap:20px!important}
  .sk-lp [data-screen-label="08 施工事例"] ul li:last-child{max-width:none!important}
  .sk-lp div[data-illust="works"]{position:relative!important;right:auto!important;top:auto!important;width:min(72vw,300px)!important;margin:-56px auto 4px!important}
  .sk-lp [data-screen-label="08 施工事例"] ul li > div:first-child > div{min-height:132px!important}
  .sk-lp [data-screen-label="10 問い合わせ"] > div > div > div:first-child{grid-template-columns:1fr!important;gap:16px!important}
  .sk-lp [data-screen-label="10 問い合わせ"] a[data-cta="wide"]{min-width:0!important;width:100%!important;font-size:18px!important}
  .sk-lp [data-screen-label="07 資格と許可"] ul{grid-template-columns:repeat(2,1fr)!important;gap:24px!important}
  .sk-lp [data-screen-label="09 仕事への姿勢"] > div > p:nth-of-type(2){font-size:19px!important;padding:20px 14px!important}
  .sk-lp [data-screen-label="10 問い合わせ"] a[href^="tel:"]{font-size:27px!important}
  .sk-lp [data-screen-label="10 問い合わせ"] > div > div{padding:18px 14px!important}
  .sk-lp a[data-cta="wide"]{min-width:0!important;width:100%!important;box-sizing:border-box!important}
  .sk-lp a[data-float="cta"]{width:104px!important;height:104px!important;right:12px!important;bottom:72px!important;border-width:3px!important}
  .sk-lp a[data-float="cta"] span:first-child{display:block!important;width:20px!important;height:14px!important;line-height:0!important;margin:-14px 0 8px!important}
  .sk-lp a[data-float="cta"] span:first-child svg{width:20px!important;height:14px!important}
  .sk-lp a[data-float="cta"] span:nth-child(2){font-size:10px!important}
  .sk-lp a[data-float="cta"] span:last-child{font-size:12px!important}
  .sk-lp a[aria-label="ページトップへ戻る"]{width:48px!important;height:48px!important;right:12px!important;bottom:14px!important}
  .sk-lp div[aria-hidden="true"]:not([data-edge]):not([data-overlay]):not([data-illust]):not([data-bar]){height:64px!important}
  .sk-lp div[data-shikaku="wrap"]{margin-top:-64px!important;margin-bottom:-64px!important}
  .sk-lp div[aria-hidden="true"]:not([data-edge]):not([data-overlay]) > div{left:-100%!important;width:300%!important;border-radius:50% 50% 0 0 / 450px 450px 0 0!important}
  .sk-lp div[data-edge="down"]{height:64px!important}
  .sk-lp div[data-edge="down"] > div{left:-100%!important;width:300%!important}
  footer{padding:36px 0!important}
  div[data-footer="cols"]{grid-template-columns:1fr!important;gap:24px!important}
  footer > div{padding-left:16px!important;padding-right:16px!important}
  footer > div > p:first-child{font-size:22px!important}
}
@media (max-width:767px) and (max-height:720px){
  .sk-lp [data-screen-label="01 FV"] > div{padding:12px 0 16px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child{top:-34px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > div:first-child span{width:70px!important;height:70px!important;font-size:9.5px!important}
  .sk-lp [data-screen-label="01 FV"] h1,.sk-lp [data-screen-label="01 FV"] h1 span{-webkit-text-stroke-width:5px!important}
  .sk-lp [data-screen-label="01 FV"] h1{font-size:min(9cqw,28px)!important;margin-bottom:10px!important}
  .sk-lp [data-screen-label="01 FV"] > div > div > p{font-size:12px!important;padding:8px 10px!important}
  .sk-lp [data-screen-label="01 FV"] ul{grid-template-columns:repeat(3,minmax(0,84px))!important;gap:6px!important;margin-top:12px!important}
  .sk-lp [data-screen-label="01 FV"] ul li span{font-size:11.5px!important}
  .sk-lp [data-screen-label="01 FV"] ul li span b{font-size:14px!important}
  .sk-lp [data-screen-label="01 FV"] ul + div{gap:6px!important;margin-top:12px!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a{font-size:17px!important;min-height:46px!important}
}
@media (max-width:1599px){
  .sk-lp [data-screen-label="06 実績"] div[data-print]{width:380px!important;padding:12px!important}
  .sk-lp [data-screen-label="06 実績"] div[data-print] div[role="img"]{height:253px!important}
  .sk-lp [data-screen-label="06 実績"] div[data-print="tr"]{right:16px!important}
  .sk-lp [data-screen-label="06 実績"] div[data-print="bl"]{left:16px!important}
}
@media (max-width:1439px){
  .sk-lp [data-screen-label="06 実績"] div[data-print]{display:none!important}
}
@media (min-width:1440px){
  .sk-lp [data-screen-label="06 実績"] h2{font-size:46px!important}
}
@media (max-width:1024px){
  .sk-lp [data-screen-label="06 実績"] div[data-print]{display:none!important}
}
@media (max-width:767px){
  .sk-lp [data-screen-label="06 実績"] div[data-print]{display:none!important}
}
@media (max-width:1023px){
  .sk-lp [data-screen-label="04 解決策・フロー"] ol + p{text-align:center!important}
}
@media (min-width:1024px) and (max-width:1259px){
  .sk-lp div[data-promise] > div p:last-child{font-size:70px!important}
}
@media (min-width:768px) and (max-width:1023px){
  .sk-lp div[data-bg="flow"]{background-position:45% center!important}
  .sk-lp section h2{font-size:45px!important}
}
@media (min-width:768px){
  .sk-lp [data-screen-label="09 仕事への姿勢"] > div > div:last-child{margin-top:64px!important}
  .sk-lp div[data-illust="promise"] img{height:calc(100% + 330px)!important}
}
@media (max-width:1023px){
  .sk-lp div[data-promise]{gap:28px!important}
  .sk-lp div[data-promise] > div p:last-child{font-size:44px!important}
}
@media (max-width:767px){
  .sk-lp [data-screen-label="09 仕事への姿勢"]{background-size:auto 100%!important;background-position:center bottom!important}
  .sk-lp div[data-illust="promise"] img{height:calc((100% + 290px) * 0.85)!important;top:34px!important}
}
@media (max-width:767px){
  .sk-lp div[data-promise] > div p:last-child{font-size:34px!important}
}
@media (max-width:599px){
  .sk-lp div[data-promise]{grid-template-columns:1fr!important}
  .sk-lp div[data-promise] div[data-bar="promise"]{height:auto!important;align-self:stretch!important}
}
@media (min-width:1260px){
  .sk-lp [data-screen-label="07 資格と許可"] h2,.sk-lp [data-screen-label="07 資格と許可"] > div > p{max-width:840px}
}
@media (max-width:1259px){
  .sk-lp div[data-illust="duo"]{right:60px!important;width:230px!important;top:-100px!important}
}
@media (min-width:1025px) and (max-width:1259px){
  .sk-lp div[data-illust="duo"]{width:250px!important;top:-40px!important}
}
@media (max-width:900px){
  .sk-lp div[data-illust="duo"]{width:170px!important;top:-60px!important;right:40px!important}
}
@media (max-width:767px){
  .sk-lp div[data-illust="duo"]{width:138px!important}
}
@media (max-width:1259px) and (min-width:1px){
  .sk-lp div[data-illust="duo"]{opacity:1}
}
@media (min-width:1025px) and (max-width:1195px){
  .sk-lp [data-screen-label="01 FV"] > div > div{padding-left:32px!important;padding-right:32px!important}
  .sk-lp [data-screen-label="01 FV"] ul,.sk-lp [data-screen-label="01 FV"] ul + div{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(56px,1.1fr) repeat(3,minmax(0,1fr))!important;gap:10px!important;justify-content:stretch!important}
  .sk-lp [data-screen-label="01 FV"] ul li[aria-hidden]{display:block!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a{grid-column:auto!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a[href="#form"]{grid-column:1 / span 3!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a[href^="tel:"]{grid-column:5 / span 3!important}
}
@media (min-width:768px) and (max-width:1024px){
  .sk-lp [data-screen-label="01 FV"] > div > div{padding-left:32px!important;padding-right:32px!important}
  .sk-lp [data-screen-label="01 FV"] ul,.sk-lp [data-screen-label="01 FV"] ul + div{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(56px,1.1fr) repeat(3,minmax(0,1fr))!important;gap:10px!important;justify-content:stretch!important}
  .sk-lp [data-screen-label="01 FV"] ul li[aria-hidden]{display:block!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a{grid-column:auto!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a[href="#form"]{grid-column:1 / span 3!important}
  .sk-lp [data-screen-label="01 FV"] ul + div a[href^="tel:"]{grid-column:5 / span 3!important}
}

/* === 受領の本文ラッパーが持っていた「組み」をページ全体へ ===
   KEEP: 受領は 本文ラッパーの div（font-family / font-size:16px / line-height:1.8 / color:#1A1A1A）
   がヘッダー・本文・フッターを丸ごと包んでいた。CueZilla は枠が3つに分かれるので、
   ラッパー（.sk-lp）を引き継げるのは本文だけ。ヘッダー/フッターにも同じ組みを
   届けるため body に置く（受領CSSの body 規則には line-height が無い）。
   実測: これが無いとフッター社名の行間が 1.8→1.43 になり、フッターが 10〜19px 縮む。 */
body{font-size:16px;line-height:1.8}
/* /KEEP */

/* === 追従CTA／ページトップ（受領は dc の state で opacity/pointer-events を出し入れ）===
   KEEP: 納品は「既定＝表示／JSが動いたときだけ隠す」向きに反転してある（R-4）。
   逆向き（既定 opacity:0）にすると 01b_site.js を貼り忘れた瞬間にボタンが永久に出ない。 */
.sk-float{opacity:1;pointer-events:auto}
html.js .sk-float{opacity:0;pointer-events:none}
html.js .sk-float.is-on{opacity:1;pointer-events:auto}
/* /KEEP */

/* === インライン animation / transition の退避 ===
   KEEP: CueZilla は本文HTMLの style 属性から animation / transition を落とす
   （教訓 cuezilla-strips-inline-animation-transition）。3重クラス＝インライン相当の詳細度。
   このブロックを消すと演出とホバーの滑らかさが全部止まる。 */
.ska1.ska1.ska1{transition:opacity .15s;}
.ska2.ska2.ska2{transition:color .15s;}
.ska3.ska3.ska3{transition:background .15s,color .15s;}
.ska4.ska4.ska4{transition:transform .12s,box-shadow .12s,background .12s;}
.ska5.ska5.ska5{animation:fvFade 1s ease .3s both;}
.ska6.ska6.ska6{animation:fvScroll 1.8s cubic-bezier(.6,0,.3,1) infinite;}
.ska7.ska7.ska7{transition:opacity .5s ease .05s,transform 1.15s cubic-bezier(.2,.85,.24,1);}
.ska8.ska8.ska8{transition:opacity .25s;}
/* /KEEP */

/* === style-hover / style-focus 由来の生成クラス（3重クラスで詳細度確保）===
   受領の dc 専用属性を純CSSの :hover / :focus に置換したもの。JS不要。 */
.skx1.skx1.skx1:hover{opacity:.75;}
.skx2.skx2.skx2:hover{color:#EC130D;}
.skx3.skx3.skx3:hover{background:#0B3399;color:#fff;}
.skx4.skx4.skx4:hover{background:#FF3B34;transform:translateY(2px);box-shadow:0 1px 0 #A80B07;}
.skx5.skx5.skx5:hover{background:#FF3B34;transform:translateY(3px);box-shadow:0 1px 0 #A80B07;}
.skx6.skx6.skx6:hover{background:#FF3B34;color:#fff;border:2px solid #FF3B34;transform:translateY(3px);box-shadow:0 1px 0 #A80B07;}
.skx7.skx7.skx7:hover{opacity:.72;}
.skx8.skx8.skx8:hover{background:#082874;}


/* ===== 21_cuezilla-skin.css ===== */
/* ============================================================
   ★★★ このファイルは【全案件共通の資産】です。案件では編集しないでください ★★★
   ------------------------------------------------------------
   （Claude Code / Claude Design / 手作業、いずれの経路でも同じです）

   ■ 案件ごとの調整は、必ず `override.css` に書いてください。
     読み込み/結合順が  … → style.css → cuezilla-skin.css → 【override.css】  なので、
     override.css に書いた指定は本ファイルに打ち消されません。**案件の上書きが効く唯一の場所です。**
     （例: カード面を白にしたい → override.css に `:root{ --dyn-surface:#fff; }`）

   ■ なぜ編集してはいけないか
     本ファイルを案件で書き換えた瞬間、その案件の skin は共通資産から切り離されます。
     以後、共通側で直した修正（カード高さの不揃い／サイドバーの可読性／
     フォーム送信ボタンの崩れ 等）が **その案件には二度と届きません**。
     実際に S01189 で本ファイルの §0 が案件調整で書き換えられ、共通修正が届かなくなりました。
     「毎案件おなじ崩れを直している」の原因はこれです。

   ■ 共通で直すべき崩れを見つけたら
     案件で握り込まず、正本 `skin/cuezilla-skin.css` へ還流してください（全案件に効きます）。
     還流し忘れると、次の同期でその修正は消えます。

   詳細は R-30（70_運用ルール/運用ルール集.md）。
   ============================================================ */

/* ============================================================
   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件目以降の左に縦罫線）※R-27対応（2026-08-26）
   旧実装は `::before` の content 宣言（文字リテラル "›"）で区切りを描いていたが、AddCssInfo は
   疑似要素の content 宣言をサニタイズで落とすため、実機では区切りが消えて
   「ホーム私たちの歴史」のように語が詰まっていた。
   ★実要素（＜span＞）へ昇格させず「content を使わない罫線」で代替した理由:
     パンくずの運用第一候補は「CueZilla がページ階層から自動描画するパンくずパーツ」で、
     その markup に区切り用の要素を挿す手段が無い。templates/breadcrumb.html（明示設置版）だけ
     直しても自動描画側は直らないので、両経路に1本のCSSで効く手段を採った。
     border / padding はサニタイズ後も残る（R-27「残る」側）。
   ★物理プロパティ（border-left）で書く理由: サニタイズのホワイトリストに論理プロパティが
     載っていない可能性を避ける。和文サイトは横書きLTR固定なので意味は同じ。 */
.p-breadcrumb__item + .p-breadcrumb__item{
  margin-left:.7em; padding-left:.7em;
  border-left:1px solid var(--dyn-border) !important;
}
.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のフラット化方針を維持）、文字色だけトークンへ寄せて両基調で可読にする。
   あわせて左右パディングも解除する：`padding:15px 20px` は**帯があった前提**の内側余白のため、
   帯を透明化したまま残すと「見出しだけ20px字下げ」になり、直下の日付／タイトルと文頭がズレる。
   （詳細ページ側の .recent_post_title には下で同じ手当てをしており、一覧側だけ取り残されていた） */
[class*="_sidebar"] h3{ color:var(--dyn-heading) !important; padding-left:0 !important; padding-right:0 !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; }
/* カテゴリ名と件数チップが重ならないよう両端寄せ。
   あわせて左右パディングを解除：theme_default は `.category_post_count ul li a{ padding:15px 20px }` と
   **帯／箱があった前提**の字下げを持つため、帯を外した状態では
   カテゴリ名だけが 20px 右にずれ、見出し(h3)や「最近の投稿」リストと頭が揃わない。
   上下15pxはタップ領域として残す。 */
[class*="category_post_count"] li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-left:0 !important; padding-right:0 !important; }


/* ============================================================
   §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 自体)を含めないこと：
   包みは複数ボタンを載せるレイアウト用のdivで、ここを accent で塗ると
   (a) 完了ページ=藍の包みに藍のボタンが乗って同化し、ボタンが消えて見える
   (b) 確認ページ=すぐ下でアウトライン化する「戻る」が藍地に濃色文字となり判読不能（実測 1.01:1）
   になる。当てる先はボタン実体だけでよい（dynamic-form.md §1 の意図も「送信 .contact_submit input = accent地」）。 */
.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)… 表記は【HTML側のテキスト】で持つ ※R-27対応（2026-08-26）
   旧実装は `li::before` の content 宣言（`counter(pp)` を括弧で挟む）で番号を描いていたが、AddCssInfo は
   content 宣言をサニタイズで落とす（counter() は content 専用なのでCSS単独の代替が無い）。実機では番号が消えたうえに
   下のぶら下げインデントだけが残り、本文が左へはみ出していた。
   ★番号を捨てず HTML テキストへ移した理由: 本文が「上記(1)から(6)に掲げるほか」と番号を参照しており、
     番号は装飾ではなく文書の一部（消すと文意が壊れる）。会社承認の定型文なので表記も変えられない。
     → templates/privacy-policy.html の各 ＜li＞ 先頭に "(1) " 等を直接書く形へ変更した。
   ★ぶら下げインデント（padding-left / text-indent）は残す: 番号が行頭テキストになった今も、
     折り返し行を本文位置に揃えるために必要（＝この2行が番号の受け皿）。
     番号を持たない古い privacy HTML に当たると字下げだけが見えるので、その場合はCSSではなく
     HTML側に番号を入れて直す。counter-reset / counter-increment は用が無くなったので外した。 */
.privacy-item__list{ list-style:none; margin:8px 0; padding:0; }
.privacy-item__list li{ padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); }


/* ============================================================
   §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; }


/* ===== 29_override.css ===== */
/* O01280 坂田防災 — override（site.css → skin の後に結合・最後に当てる）
   本件は1ページLPサイト（掲載ドメイン sakata-bousai-lp.com）。LP本体は受領CSSが完結しているので、
   ここに書くのは「CueZillaテーマとの衝突の打ち消し」と「CMSが描くページ（お問い合わせ／
   プライバシー／送信完了／404）を受領のトンマナへ寄せる分」だけ。 */

/* KEEP: CueZilla自動パンくずは全ページ非表示（ユーザー標準ルール・採番非依存で当てる） */
[class*="_breadcrumb"], .p-breadcrumb{ display:none !important; }
/* /KEEP */

/* KEEP: sticky ヘッダーの復活（2行セット・片方だけでは不完全）
   theme_default が body{overflow-x:hidden}（＝スクロールコンテナ化）と html,body{height:100%}
   （＝stickyの可動域が1画面）を当てており、この2つ両方が position:sticky を殺す。
   教訓 cuezilla-theme-html-body-height-100-kills-sticky ／ body-overflowx-hidden-kills-sticky */
html, body{ height:auto !important; }
body{ overflow-x:clip !important; }
/* /KEEP */

/* KEEP: ★theme_default.css の全称セレクタ box-sizing:border-box を、LP（ヘッダー／本文／フッター）の中だけ
   既定の content-box に戻す。受領データは CueZilla のテーマCSSが無い状態で作られているので、
   全ての箱が content-box 前提で組まれている。border-box のまま実機に載せると
   **max-width:1200px + padding:0 20px の中身が 1200px → 1160px に痩せる**＝センター寄せの列が
   全セクションで 40px 狭くなる。実測（verify/local-sandbox の theme_default 込みで描画）:
   「09 仕事への姿勢」の "必要な工事を、" が 529px → 526px の枠に入らず 2行→3行に折れ、
   セクションが 998px → 969px に崩れた。
   ★インラインで box-sizing:border-box を書いている要素（FVの丸バッジ・資格リボン等）と
   受領CSSの a[data-cta="wide"] の border-box !important はそのまま勝つ＝受領どおり。
   ★CMSが描くページ（フォーム・パンくず等）は .sk-lp の外なので border-box のまま＝skin の前提を壊さない。 */
.sk-lp *, header, header *, footer, footer *{ box-sizing:content-box; }
/* /KEEP */

/* KEEP: ヘッダーは sticky（fixed ではない）＝場所を取るので、システム描画ページの
   先頭が潜り込むことは無い。skin の --fixed-header-h は 0 のままでよい（R-18）。
   ここを 88px などにすると下層の上余白が二重に空くので触らないこと。 */
:root{ --fixed-header-h: 0px; }
/* /KEEP */

/* KEEP: 「02 お悩み提起」の挿絵は picture ＋ source media で PC/SP の別画像へ差し替わる。
   縦横比が幅で変わる（PC 1504x996 ／ SP 864x1351）ので img の style には比率を焼けない。
   ここで source と同じ切り替え点の比率を与えて CLS を消す（verify/perf-audit.mjs の
   「寸法指定の無い画像」NG。★どちらか一方の比率で固定すると反対側の幅で挿絵が潰れる）。
   受領の source が (max-width:767px) なので、この 767px を動かさないこと。 */
.sk-lp picture[data-illust="onayami"] img{ aspect-ratio:1504/996; }
@media (max-width:767px){ .sk-lp picture[data-illust="onayami"] img{ aspect-ratio:864/1351; } }
/* /KEEP */

/* KEEP: モーションを減らす設定（OS/ブラウザの prefers-reduced-motion: reduce）への対応。
   受領CSS/受領JSには一切無く、verify/measure-pages.mjs #9 と rule-effect L004 が
   「入場演出のbase状態が不可視のまま逃げ道が無い」としてNG判定した
   （教訓 css-animation-hidden-base-state-blanks-under-motion-kill）。
   01_site.js 側も reduce のときは「隠してから見せる」を一切しない作りにしてあるが、
   JSが貼られていない・古い版が残っている場合の受け皿としてCSSでも可視化を保証する。 */
@media (prefers-reduced-motion: reduce){
  .sk-lp *, header *, footer *{ animation:none !important; transition:none !important; }
  .sk-lp [data-anim]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .sk-lp section[data-screen-label] h2{ visibility:visible !important; }
  html.js .sk-float{ opacity:1 !important; pointer-events:auto !important; }
  /* !important は付けない。同じ詳細度で後に来る＝これで勝つ。付けると convert の
     「Lenis打ち消しの残骸」検出（R-14）に誤って引っかかる。 */
  html{ scroll-behavior:auto; }
}
/* /KEEP */

/* KEEP: キーボード操作のフォーカスリング（受領CSSに :focus 系の指定が1つも無く、
   verify/a11y-audit.mjs が「現在位置が分からない」でNG判定した）。
   :focus-visible なのでマウス操作の見た目は一切変わらない。ブランド赤＋白フチで
   白地・濃紺地・写真地のどこでも見える。 */
.sk-lp a:focus-visible, .sk-lp button:focus-visible,
header a:focus-visible, footer a:focus-visible{
  outline:3px solid #EC130D !important; outline-offset:2px !important;
  box-shadow:0 0 0 6px rgba(255,255,255,.85) !important; border-radius:4px;
}
/* /KEEP */

/* KEEP: ページ内アンカー #form の着地が sticky ヘッダー（PC 82px / SP 99px）の裏に潜るのを防ぐ
   （WCAG 2.2 / 2.4.11・R-18。a11y-audit がNG判定した）。ヘッダー高さ＋余白ぶん。 */
#form{ scroll-margin-top:96px; }
@media (max-width:767px){ #form{ scroll-margin-top:112px; } }
html{ scroll-behavior:smooth; }
/* /KEEP */

/* KEEP: ヘッダーの 768〜821px 帯（iPad縦がここに入る）の横はみ出し対策。
   受領デザインはヘッダーに「SP版（〜767px）」と「PC版」しか持っておらず、PC版が収まるのは
   822px 以上（実測: ロゴ208 ＋ 右グループ564 ＋ 余白50 ＝ 822px）。その結果 768〜821px では
   ヘッダーだけが版面を突き抜け、**ページ全体に横スクロールが出る**（実測 768px で scrollWidth 835）。
   本文側は .sk-lp の overflow-x:clip が刈るのでヘッダーだけが残る＝ここで塞ぐ。
   ★新しい意匠は足していない。受領が 767px 以下用に持っているヘッダー規則を、そのままこの帯へ広げただけ。
   受領データ側の不具合なので 00★申し送り★.md C-1 に記載してある（デザイナー確認事項）。 */
@media (min-width:768px) and (max-width:821px){
  header > div{ padding:8px 10px !important; gap:6px !important; flex-wrap:nowrap !important; }
  header > div > div{
    display:grid !important; grid-template-columns:auto auto !important;
    justify-content:end !important; align-items:center !important;
    gap:4px 6px !important; flex-shrink:1 !important; min-width:0 !important;
  }
  header img{ height:26px !important; }
  header a[href^="tel:"]{
    grid-column:1 / -1 !important; justify-self:end !important; order:2 !important; font-size:13px !important;
  }
  header a[data-nav="hp"]{
    font-size:11px !important; padding:4px 8px !important; min-height:36px !important;
    border-width:1px !important; line-height:1.25 !important; white-space:nowrap !important;
    text-align:center !important; flex:0 0 auto !important;
  }
  header a[data-nav="hp"] span[data-hp="long"]{ display:none !important; }
  header a[data-nav="hp"] span[data-hp="short"]{ display:inline !important; }
  header a[href="/form/inquiry"], header a[href="/#form"]{
    padding:5px 10px !important; font-size:12px !important; min-height:44px !important;
    line-height:1.25 !important; text-align:center !important; white-space:normal !important;
    flex-direction:column !important; flex:0 0 auto !important;
  }
  header a[href="/form/inquiry"] span[data-nl], header a[href="/#form"] span[data-nl]{ display:block !important; }
}
/* /KEEP */

/* === CMSが描くページのトンマナ寄せ（受領LPの配色・書体に合わせる）=== */
/* skin は書体を var(--font-display / --font-body / --font-numeric) から取り、既定は明朝。
   受領LPは全面 Noto Sans JP なので3つとも実体を与える（skin側は編集しない＝R-30）。 */
:root{
  --font-display:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-numeric:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --dyn-radius:10px;   /* 受領LPのボタン・入力欄が 8〜10px */
}

/* 下層ヘッダー帯：skin 既定は --dyn-surface の淡色。LPのブランド濃紺に合わせる */
.subpage-header{ background:#0B3399 !important; }
.subpage-header__title{ color:#FFFFFF !important; text-shadow:0 2px 14px rgba(8,40,116,.5) !important; }
.subpage-header__en{ color:#9FC0E2 !important; }

/* 送信完了・404・プライバシーの見出し色（受領の見出し色に合わせる） */
.thanks__title, .notfound__title, .privacy__title, .privacy__subtitle,
.privacy-item__title{ color:#0B3399 !important; }
.privacy-item__title{ border-left-color:#EC130D !important; }

/* skin の --dyn-muted は --sub-color（#7C8894＝受領の入力欄の罫線色）に連動する。
   罫線としては受領どおりで正しいが、**補足文の文字色**としては白地で 3.9:1 ＝ AA(4.5:1)割れ。
   罫線はそのまま、文字だけ濃くする（verify/local-sandbox の parts213／プライバシーで実測）。 */
:root{ --dyn-muted:#4A5561; }

/* エラー文はリンク色（紺）ではなく赤で出す。skin 既定は --dyn-accent-2＝link-color で、
   本件はそれが紺なので「エラーだと気づけない青い文」になる（sandboxで実測）。 */
.error, [class*="_form_wrap"] .error{ color:#EC130D !important; }

/* 送信完了・404 の「TOPへもどる」は templates 側が class="btn" だけを持つ（装飾は案件側の担当）。
   LPのCTAと同じ意匠にする。Bootstrap の .btn(0,1,0) に勝つ詳細度で書いてある。 */
.thanks__action .btn, .notfound__action .btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; min-width:260px; padding:14px 28px; border-radius:10px;
  background:#EC130D; color:#FFFFFF; font-weight:900; font-size:18px; letter-spacing:.06em;
  text-decoration:none; box-shadow:0 3px 0 #A80B07; border:0;
}
@media(hover:hover){
  .thanks__action .btn:hover, .notfound__action .btn:hover{
    background:#FF3B34; transform:translateY(2px); box-shadow:0 1px 0 #A80B07;
  }
}

/* KEEP: グリッド項目の min-width:0（CSS Grid 既定の min-width:auto は中身の min-content 以上を
   要求するため、CMSが実サムネイルを入れた瞬間にSP幅でカードが横にはみ出す）。採番非依存。 */
[class*="_post_list"] > *, [class*="_post_list"]{ min-width:0 !important; }
/* /KEEP */

/* ============================================================
   /form/inquiry 導入セクション（04_下層ヘッダー_form-inquiry.html の .form-intro）
   ・20_site.css の縮小指定は .sk-lp（LP本文）スコープで、CMS描画ページには意図的に
     届かせていない（20_site.css 冒頭の注記）。よってこのページ用に同じ値を持ち直す。
   ・要素側は受領LPの値をそのままインラインstyleで持っているため、勝たせるには
     !important が要る。20_site.css の同じ指定と書き方を揃えてある。
   ・段階は 51px / 45px / 33px（見出し）、22px / 18px（赤帯）、34px / 27px（電話番号）。
   ============================================================ */
@media (min-width:768px) and (max-width:1023px){
  .form-intro__title{ font-size:45px !important; }
}
@media (max-width:767px){
  .form-intro{ padding:40px 0 32px !important; }
  .form-intro__inner{ padding-left:16px !important; padding-right:16px !important; }
  .form-intro__title{ font-size:33px !important; line-height:1.4 !important; }
  .form-intro__eyebrow{ font-size:18px !important; padding:3px 14px !important; }
  .form-intro__tel a{ font-size:27px !important; }
}

/* ============================================================
   お問い合わせ3画面（入力 /form/inquiry・確認・完了）の地色と主要ボタン色
   ─ 実機実測 2026-09-02 ─
   CMSのテーマ7値が 31_theme-vars.txt の指定と違う値で登録されている:
     main #AA0000（指定 #0B3399）／accent #000000（指定 #EC130D）／背景 #F8ECE3（指定 #FFFFFF）
   その結果、skin と完了テンプレが参照する var(--dyn-*) 経由で
     ・フォーム帯と完了ページの地 → ベージュ #F8ECE3
     ・「必須」バッジと送信ボタン → 暗赤 #AA0000
   になっていた。LP本体は具体値直書きなので影響を受けず、ヘッダーCTAだけ #EC130D で正しい。
   ★根治はCMSのテーマ7値を 31_theme-vars.txt どおりに直すこと。
     ここはテーマがどう設定されていても意図した色で出るように固定している。
   ============================================================ */

/* 地色を白に（入力・確認＝parts213／完了＝parts243-245。採番非依存） */
.contact_section,
[class*="_section_form"],
[class*="_complete_form"]{ background:#FFFFFF !important; }

/* 「必須」バッジ … ヘッダー「無料で相談」と同じ赤 */
[class*="_section_form"] .required{ background:#EC130D !important; color:#FFFFFF !important; }

/* 送信系ボタン … 入力「この内容で相談する」／確認「送信」／完了「TOPへもどる」。
   ★CueZillaの送信は input[type=submit]、完了ページだけ button.btn-main と要素が違う。
   ★確認画面の「戻る」は下で副ボタンにするので :not([name="back"]) で除外する。 */
[class*="_section_form"] .contact_submit input[type="submit"]:not([name="back"]),
[class*="_complete_form"] .contact_submit button.btn-main{
  background:#EC130D !important; color:#FFFFFF !important;
  border:0 !important; box-shadow:0 3px 0 #A80B07 !important;
}

/* 確認画面の「戻る」は副ボタンのまま（送信と同色にすると誤送信の導線になる） */
[class*="_section_form"] .contact_submit input[name="back"]{
  background:#FFFFFF !important; color:#EC130D !important;
  border:2px solid #EC130D !important; box-shadow:none !important;
}

/* ボタンを囲む div に skin が accent 地を付ける場合の打ち消し（3画面とも） */
[class*="_section_form"] .contact_submit,
[class*="_complete_form"] .contact_submit{ background:transparent !important; }

/* ============================================================
   ヘッダー「会社ホームページへ」ボタン（.skx3）のホバー文字色
   ─ 実機実測 2026-09-02 ─
   受領の規則 .skx3.skx3.skx3:hover{background:#0B3399;color:#fff} には !important が無く、
   要素側のインライン color:#0B3399 に負ける（インラインスタイル > 非!important の宣言）。
   そのため**ホバーで背景だけ紺になり、文字も紺のまま＝文字が消えていた**。
   検算: 3重クラス＋インラインcolor → !importantなし=紺 / !important付き=白（実機で確認）。
   20_site.css は「受領の宣言をそのまま保持する（!importantの有無も変えない）」方針なので、
   あちらは触らずここで打ち消す。
   ============================================================ */
.skx3.skx3.skx3:hover{ color:#FFFFFF !important; }

/* ============================================================
   プライバシーポリシーの地色を白に（2026-09-02）
   実機のクラスは privacypolicy-parts_<ランダム文字列> + bg-color。
   採番がランダムなので前方一致で当てる。.bg-color 単独で当てると
   他ページの帯まで巻き込むので使わない。
   ============================================================ */
section[class*="privacypolicy-parts"]{ background:#FFFFFF !important; }

/* ============================================================
   ヘッダーに追加した「消防設備のご相談」（data-nav="lp"・2026-09-02）
   意匠は「会社ホームページへ」（data-nav="hp"）と同じ .skx3 ska3。
   ★縮小指定は 20_site.css（≤767px）と 29_override.css の KEEP（768〜821px）が
     [data-nav="hp"] を名指ししていて lp には当たらない。同じ値をここで与える。
     20_site.css は受領の宣言をそのまま保持する方針なので向こうは触らない。
   ============================================================ */
@media (max-width:821px){
  header a[data-nav="lp"]{
    font-size:11px !important; padding:4px 8px !important; min-height:36px !important;
    border-width:1px !important; line-height:1.25 !important; white-space:nowrap !important;
    text-align:center !important; flex:0 0 auto !important;
  }
}

/* ============================================================
   ヘッダーに4つ目（消防設備のご相談）が入ったことへの追従・2026-09-02
   ─ 実機実測 ─
   ①822〜999px … 縮小指定が 821px までしか無いため、4つ目が入ると横にはみ出す
     （実測 822px:+167 / 900px:+89 / 980px:+9 / 1000px:なし ＝申し送り C-1 と同じ症状）。
     768〜821px と同じ縮小をこの帯にも与える。※KEEP の既存ブロックは触らず、別ブロックで足す。
   ②右側グループの列数 … 20_site.css(≤767) と KEEP(768〜821) は
     grid-template-columns:auto auto（2列）。子が3個の前提だったところに4個目が入ると
     3段になり、ヘッダーが約50px 高くなる（実測 375px:101→153px）。3列にして2段に戻す。
   ============================================================ */
@media (max-width:999px){
  header > div > div{ grid-template-columns:auto auto auto !important; }
}
@media (min-width:822px) and (max-width:999px){
  header > div{ padding:8px 10px !important; gap:6px !important; flex-wrap:nowrap !important; }
  header > div > div{
    display:grid !important; justify-content:end !important; align-items:center !important;
    gap:4px 6px !important; flex-shrink:1 !important; min-width:0 !important;
  }
  header img{ height:26px !important; }
  header a[href^="tel:"]{
    grid-column:1 / -1 !important; justify-self:end !important; order:2 !important; font-size:13px !important;
  }
  header a[data-nav="hp"], header a[data-nav="lp"]{
    font-size:11px !important; padding:4px 8px !important; min-height:36px !important;
    border-width:1px !important; line-height:1.25 !important; white-space:nowrap !important;
    text-align:center !important; flex:0 0 auto !important;
  }
  header a[data-nav="hp"] span[data-hp="long"]{ display:none !important; }
  header a[data-nav="hp"] span[data-hp="short"]{ display:inline !important; }
  header a[href="/form/inquiry"]{
    padding:5px 10px !important; font-size:12px !important; min-height:44px !important;
    line-height:1.25 !important; text-align:center !important; white-space:normal !important;
    flex-direction:column !important; flex:0 0 auto !important;
  }
  header a[href="/form/inquiry"] span[data-nl]{ display:block !important; }
}