/* ===== 20_site.css ===== */
/* ============================================================
   株式会社コトブキ造園土木（O00451）site.css
   生成: _作業/decompose.mjs ─ 手で直さず decompose 側を直して再生成する
   内訳: ①受領12ページの helmet 内CSSのunion（同一セレクタは先勝ち・index優先）
         ②インラインの animation/transition を退避したクラス（.kz-aN）
         ③style-hover を退避したホバークラス（.kz-hN）
         ④ページ別差分（共通ヘッダー/フッターに畳んだぶんの出し分け）
         ⑤JSが動かないときの保険
   ============================================================ */

/* ── ⓪ 固定ヘッダーの実高さ（R-18）─────────────────────────
   ヘッダーは position:fixed。CueZillaが描画して自前ヒーローが無いページ
   （記事詳細・送信確認/完了・404 等）で先頭が潜り込むのを防ぐ上余白に使う（29_override.css で適用）。
   実測値: PC 86px（padding 16×2＋ロゴ54）／SP 72px（padding 16×2＋ロゴ40）。 */
:root{--fixed-header-h:86px;}
@media (max-width:767px){:root{--fixed-header-h:72px;}}

/* ── ① 受領CSS union ─────────────────────────────────────── */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;font-size:16px;color:#20302A;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;}
a{color:inherit;}
span.line-chunk{display:inline-block;overflow-wrap:anywhere;word-break:normal;}
.num-bento{display:grid;gap:0;grid-template-columns:repeat(2,1fr);align-items:stretch;grid-template-areas:"kin kin" "kin kin" "shi dan" "shi dan" "sog juu" "area area" "kyuj kyuj" "kyuj kyuj" "nenr yuky" "kens kens";}
@media(min-width:760px){
.num-bento{grid-template-columns:repeat(4,1fr);grid-template-areas:"kin kin shi dan" "kin kin shi dan" "sog area area juu" "kens kyuj kyuj nenr" "kens kyuj kyuj yuky";}
}
.svc-row{display:grid;grid-template-columns:1fr;gap:0;align-items:stretch;}
.svc-media{position:relative;overflow:hidden;background:#eef1ec;height:clamp(210px,50vw,330px);order:-1;}
.svc-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,6vw,52px) clamp(20px,6vw,40px);}
@media(min-width:760px){
.svc-row{grid-template-columns:1fr 1fr;}
.svc-media{height:auto;min-height:clamp(290px,32vw,560px);order:0;}
.svc-row.rev .svc-media{order:-1;}
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #E2E166;outline-offset:3px;border-radius:0;}
@keyframes kb{from{transform:scale(1.0);}to{transform:scale(1.12);}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
@keyframes pulseDim{0%,100%{opacity:.45;}50%{opacity:1;}}
@keyframes loadBar{0%{transform:translateX(-100%);}50%{transform:translateX(0);}100%{transform:translateX(100%);}}
img{--bg:#dfe6df;}
.people-stage{position:static;width:100%;max-width:1060px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.people-hero{position:static;width:100%;height:auto;aspect-ratio:16/10;border-radius:0;overflow:hidden;background:#eef1ec;box-shadow:0 34px 70px rgba(12,44,60,.16);}
.pola{position:static;width:60%;margin:0;background:#fff;padding:9px 9px 7px;border-radius:0;box-shadow:0 18px 42px rgba(12,44,60,.24);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}
.pola .ph{position:relative;aspect-ratio:1/1;overflow:hidden;background:#eef1ec;border-radius:0;}
.pola figcaption{margin-top:9px;margin-bottom:3px;text-align:center;font-family:Outfit,'Zen Kaku Gothic New',sans-serif;font-weight:500;font-size:clamp(10px,1.1vw,13px);color:#52605a;letter-spacing:.02em;}
.pola:hover{transform:rotate(0deg) scale(1.04)!important;box-shadow:0 26px 56px rgba(12,44,60,.3);z-index:9;}
.pola-1{align-self:flex-start;margin:-26px 0 0 6%;transform:rotate(-4deg);}
.pola-2{align-self:flex-end;margin:-18px 6% 0 0;transform:rotate(4deg);}
.pola-3{align-self:center;margin:-16px 0 0 0;transform:rotate(-2deg);}
@media(min-width:821px){
.people-stage{position:relative;display:block;aspect-ratio:16/10;}
.people-hero{position:absolute;left:0;top:5%;width:67%;height:90%;}
.pola{position:absolute;width:auto;margin:0;}
.pola-1{width:25%;right:1%;top:-1%;left:auto;margin:0;transform:rotate(4.5deg);z-index:4;}
.pola-2{width:24%;right:18%;top:29%;left:auto;margin:0;transform:rotate(-6deg);z-index:6;}
.pola-3{width:26%;right:3%;top:52%;left:auto;margin:0;transform:rotate(3deg);z-index:5;}
}
.nav-dd{position:relative;display:inline-flex;align-items:center;}
.nav-dd .dd-caret{font-size:9px;margin-left:5px;}
.dd-panel{position:absolute;top:100%;left:0;padding-top:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease;z-index:140;}
.nav-dd:hover .dd-panel,.nav-dd:focus-within .dd-panel{opacity:1;visibility:visible;pointer-events:auto;}
.dd-inner{background:#fff;border-radius:0;box-shadow:0 18px 44px rgba(12,44,60,.18);border:1px solid rgba(17,70,95,.08);padding:8px;min-width:248px;display:flex;flex-direction:column;}
.dd-link{display:block;padding:11px 16px;border-radius:6px;font-size:16px;font-weight:600;color:#11465F;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s;}
.dd-link:hover{color:#176F94;background:#E9F5FB;}
.fb-band{height:clamp(240px,38vh,400px)!important;}
@media(max-width:860px){
.fb-band{height:clamp(160px,26vh,220px)!important;}
}
.gal-grid{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,13vw,180px);}
.gal-a{grid-column:span 2;grid-row:span 2;}
.gal-b{grid-column:span 1;grid-row:span 2;}
.gal-c{grid-column:span 1;grid-row:span 1;}
.gal-d{grid-column:span 1;grid-row:span 1;}
.gal-e{grid-column:span 2;grid-row:span 1;}
.gal-f{grid-column:span 1;grid-row:span 1;}
.gal-g{grid-column:span 1;grid-row:span 2;}
.gal-h{grid-column:span 1;grid-row:span 1;}
.gal-i{grid-column:span 2;grid-row:span 1;}
@media(max-width:860px){
.gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,26vw,170px);gap:8px;}
.gal-a{grid-column:span 2;grid-row:span 2;}
.gal-b{grid-column:span 1;grid-row:span 2;}
.gal-c,.gal-d,.gal-f,.gal-h{grid-column:span 1;grid-row:span 1;}
.gal-e{grid-column:span 2;grid-row:span 1;}
.gal-g{grid-column:span 1;grid-row:span 2;}
.gal-i{grid-column:span 2;grid-row:span 1;}
}
.ppl-imgwrap{position:relative;overflow:hidden;min-height:clamp(300px,56vw,420px);background:#D2EDF8;}
.ppl-content{padding:clamp(60px,9vw,104px) clamp(20px,5vw,64px);}
@media(min-width:861px){
.ppl-imgwrap{position:absolute;left:0;top:0;width:47%;height:100%;min-height:0;}
.ppl-content{margin-left:47%;padding:clamp(84px,10vw,140px) max(clamp(20px,5vw,64px),calc((100vw - 1180px)/2)) clamp(84px,10vw,140px) clamp(40px,4.5vw,72px);}
}
[data-navlink]{transition:color .2s ease,background .2s ease,box-shadow .2s ease;border-radius:6px;}
[data-navlink]:hover{color:#176F94 !important;background:#E9F5FB;box-shadow:0 0 0 7px #E9F5FB;}
nav[aria-label="モバイルナビゲーション"] a:hover{color:#176F94 !important;}
[data-navbtn-ghost]{transition:background .25s ease,border-color .25s ease,color .25s ease;}
[data-navbtn-ghost]:hover{background:#2BB2E8 !important;border-color:#2BB2E8 !important;color:#fff !important;}
nav[aria-label="フッターナビゲーション"] a:hover{color:#fff !important;text-decoration:underline;text-underline-offset:3px;}
nav[aria-label="フッターナビゲーション"] a{transition:transform .22s ease,color .2s ease;}
nav[aria-label="フッターナビゲーション"] a:hover{transform:translateX(6px);}
a[href="/privacypolicy"]:hover{color:#fff !important;}
a[href^="tel:"]:hover{color:#176F94 !important;}
a[data-kzs~="m1"]:hover,a[data-kzs~="m2"]:hover,a[data-kzs~="m3"]:hover,a[data-kzs~="m4"]:hover,a[data-kzs~="m4"]:hover{filter:brightness(1.08) !important;}
.card{transition:transform .25s ease,box-shadow .25s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(12,44,60,.16) !important;}
[data-float-entry]{transition:filter .2s ease,transform .2s ease;}
[data-float-entry]:hover{filter:brightness(1.08);transform:translateY(-2px);}
nav[aria-label="パンくず"] a:hover{color:#176F94 !important;text-decoration:underline;text-underline-offset:3px;}
[data-anchorbar] a:hover{filter:brightness(1.05) !important;box-shadow:0 6px 16px rgba(17,70,95,.18) !important;}
[data-drawer] a:hover{opacity:.82;}
a:has(img[src*="logo"]):hover{opacity:.82;}
a[data-kzs~="m5"]:hover{color:#176F94 !important;}
a[data-kzs~="m5"] span{display:inline-block;transition:transform .25s ease;}
a[data-kzs~="m5"]:hover span{transform:translateX(7px);}
html{scroll-behavior:smooth;}
@media(max-width:680px){
.concept-body{text-align:left;}
[data-lcb="light"]>.kz-lcb-scrim{position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.8) 54%,rgba(255,255,255,.22) 100%);pointer-events:none;z-index:0;}
[data-lcb="light"]>span{position:relative;z-index:1;}
}
.bnr-arw{display:inline-block;transition:transform .3s ease;will-change:transform;}
a:hover .bnr-arw{transform:translateX(7px);}
@media(prefers-reduced-motion:reduce){
[data-kzs~="m6"]{animation:none !important;}
}
.parts228_section{background:#E9F5FB;padding:clamp(56px,8vw,96px) clamp(20px,5vw,64px) clamp(72px,10vw,120px);}
.parts228_wrap{max-width:1180px;margin:0 auto;}
.parts228_post_list{display:grid;gap:clamp(18px,2.6vw,28px);grid-template-columns:1fr;}
.parts228_post_wrap{background:#fff;border:1px solid rgba(17,70,95,.1);border-radius:0;overflow:hidden;box-shadow:0 8px 24px rgba(12,44,60,.06);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;display:flex;flex-direction:column;}
.parts228_post_wrap:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(12,44,60,.16);}
.parts228_post_img{position:relative;aspect-ratio:16/11;background:#eef1ec;overflow:hidden;}
.parts228_post_img a{display:block;width:100%;height:100%;}
.parts228_post_img img{width:100%;height:100%;object-fit:cover;}
.parts228_post_status{display:flex;align-items:center;gap:12px;padding:18px 22px 0;}
.parts228_post_date{font-family:Outfit,sans-serif;font-size:13px;letter-spacing:.04em;color:#647169;}
.parts-blog-ex-tag_wrap{display:flex;flex-wrap:wrap;gap:8px;padding:12px 22px 0;}
.parts-blog-ex_tag{font-family:Outfit,sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;color:#176F94;background:#E9F5FB;border-radius:999px;padding:5px 12px;}
.parts228_post_title-excerpt{padding:8px 22px 24px;}
.parts228_post_title{margin:0;font-family:Outfit,'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:18px;line-height:1.65;color:#20302A;}
@media(min-width:621px){
.parts228_post_list{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:992px){
.parts228_post_list{grid-template-columns:repeat(3,1fr);}
}
.parts228_pagenation{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:clamp(40px,6vw,60px);}
.parts228_pagenation a,.parts228_pagenation span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;font-family:Outfit,sans-serif;font-weight:700;font-size:14px;text-decoration:none;color:#11465F;border:1px solid rgba(17,70,95,.2);border-radius:0;background:#fff;}
.parts228_pagenation .pagination_num.current{background:#2BB2E8;color:#0C2C3C;border-color:#2BB2E8;}
.parts228_pagenation .pagination_prev,.parts228_pagenation .pagination_next{color:#186F93;}
.mc-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
@media(max-width:760px){
.mc-row{grid-template-columns:1fr !important;}
.mc-row .mc-media{order:-1;min-height:clamp(220px,54vw,300px) !important;}
}
.contact_section{background:#fff;padding:clamp(8px,2vw,16px) clamp(20px,5vw,64px) clamp(72px,10vw,120px);}
.parts219_section_form{max-width:760px;margin:0 auto;}
.parts219_form_wrap form{display:flex;flex-direction:column;}
.parts219_form_wrap dl{display:flex;flex-direction:column;gap:9px;padding:16px 0;margin:0;}
.parts219_form_wrap dt{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px;font-size:19px;font-weight:700;color:#11465F;line-height:1.5;}
.parts219_form_wrap dt > span:first-child:not(.required){flex:0 1 auto;min-width:0;}
.parts219_form_wrap dd{margin:0;}
.parts219_form_wrap .required{flex:none;margin-left:0 !important;align-self:flex-start;white-space:nowrap;font-size:11px;font-weight:700;color:#fff;background:#11465F;padding:3px 9px;border-radius:0;}
.parts219_form_wrap input[type=text],.parts219_form_wrap input[type=email],.parts219_form_wrap input[type=tel],.parts219_form_wrap textarea{width:100%;font-size:19px;font-family:inherit;color:#20302A;padding:13px 14px;border:1px solid #c8d2cc;background:#fff;border-radius:0;}
.parts219_form_wrap input:focus,.parts219_form_wrap textarea:focus{outline:none;border-color:#2BB2E8;box-shadow:0 0 0 3px rgba(43,178,232,.18);}
.parts219_form_wrap textarea{min-height:150px;resize:vertical;}
.parts219_form_wrap input[type=file]{font-size:18px;color:#3a4842;width:100%;}
.parts219_form_wrap .form_address dd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.parts219_form_wrap input.zip{width:auto;max-width:150px;}
.parts219_form_wrap .form_address input[name=address]{flex:1;min-width:200px;}
.parts219_form_wrap .attention{display:block;flex-basis:100%;font-size:19px;font-weight:500;line-height:1.7;color:#c0392b;}
.parts219_form_wrap .error{margin:6px 0 0;font-size:19px;line-height:1.7;color:#c0392b;}
.parts219_form_wrap .contact_submit{margin-top:28px;text-align:center;}
.parts219_form_wrap .contact_submit input{font-family:inherit;font-size:19px;font-weight:700;color:#0C2C3C;background:#2BB2E8;border:none;padding:17px 48px;border-radius:999px;cursor:pointer;transition:transform .2s;}
.parts219_form_wrap .contact_submit input:hover{transform:translateY(-2px);}
[data-slider-track]::-webkit-scrollbar{display:none;}
[data-slider-prev]:hover,[data-slider-next]:hover{background:#2BB2E8 !important;color:#fff !important;}
.salary-grid{display:grid;grid-template-columns:1fr clamp(240px,34%,360px);gap:clamp(22px,3vw,40px);align-items:stretch;}
@media(max-width:760px){
.intv-row{grid-template-columns:1fr !important;}
.intv-row .intv-media{order:-1;min-height:clamp(220px,54vw,300px) !important;}
.salary-grid{grid-template-columns:1fr !important;}
.salary-photo{order:-1;min-height:clamp(200px,52vw,280px) !important;}
}
@media(max-width:720px){
.welfare-feature{grid-template-columns:1fr !important;}
.welfare-feature>div:first-child{min-height:clamp(220px,52vw,300px) !important;}
.wf-flip>div:first-child{min-height:auto !important;}
.wf-flip>div:last-child{order:-1;min-height:clamp(220px,52vw,300px) !important;}
}
.parts222_section{background:#E9F5FB;padding:clamp(56px,8vw,96px) clamp(20px,5vw,64px) clamp(72px,10vw,120px);}
.parts222_section > h2{max-width:1180px;margin:0 auto clamp(28px,4vw,40px);font-family:Outfit,'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(24px,3.6vw,38px);color:#11465F;}
.parts222_wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:start;}
.parts222_post_list{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,24px);}
.parts222_post_wrap{background:#fff;border:1px solid rgba(17,70,95,.1);border-radius:0;overflow:hidden;box-shadow:0 8px 24px rgba(12,44,60,.06);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.parts222_post_wrap:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(12,44,60,.14);}
.parts222_post_wrap > a{display:block;text-decoration:none;color:#20302A;}
.parts222_post_img{position:relative;aspect-ratio:16/10;background:#eef1ec;overflow:hidden;}
.parts222_post_img img{width:100%;height:100%;object-fit:cover;}
.parts222_post_status{display:flex;align-items:center;gap:12px;padding:16px 18px 0;}
.parts222_post_date{font-family:Outfit,sans-serif;font-size:13px;letter-spacing:.04em;color:#647169;}
.parts222_post_category{font-size:11px;font-weight:700;letter-spacing:.04em;color:#176F94;background:#E9F5FB;border-radius:999px;padding:4px 11px;}
.parts222_post_title-excerpt{padding:8px 18px 22px;}
.parts222_post_title{margin:0;font-family:Outfit,'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:17px;line-height:1.65;color:#20302A;}
@media(min-width:561px){
.parts222_post_list{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:992px){
.parts222_wrap{grid-template-columns:1fr 300px;}
}
.parts222_pagenation{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:clamp(36px,5vw,52px);}
.parts222_pagenation a,.parts222_pagenation span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;font-family:Outfit,sans-serif;font-weight:700;font-size:14px;text-decoration:none;color:#11465F;border:1px solid rgba(17,70,95,.2);border-radius:0;background:#fff;}
.parts222_pagenation .pagination_num.current{background:#2BB2E8;color:#0C2C3C;border-color:#2BB2E8;}
.parts222_pagenation .pagination_prev,.parts222_pagenation .pagination_next,.parts222_pagenation .page-item{color:#186F93;}
.parts222_pagenation .d-none{display:none;}
@media(min-width:1200px){
.parts222_pagenation .d-xl-block{display:inline-flex;}
}
.parts222_sidebar_wrap{background:#fff;border:1px solid rgba(17,70,95,.1);border-radius:0;overflow:hidden;margin-bottom:20px;}
.parts222_sidebar_wrap h3{margin:0;padding:14px 18px;font-family:Outfit,'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:16px;color:#fff;background:#11465F;}
.parts222_sidebar_wrap ul{list-style:none;margin:0;padding:0;}
.parts222_sidebar_wrap li{border-bottom:1px solid rgba(17,70,95,.08);}
.parts222_sidebar_wrap li:last-child{border-bottom:none;}
.parts222_sidebar_wrap li a{display:block;padding:13px 18px;text-decoration:none;color:#20302A;}
.parts222_sidebar_date{display:block;font-family:Outfit,sans-serif;font-size:12px;color:#647169;margin-bottom:4px;}
.parts222_sidebar_post_title{margin:0;font-size:14px;line-height:1.65;font-weight:500;color:#20302A;}
.category_post_count li a{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.parts222_sidebar_post_category{margin:0;font-size:14px;font-weight:500;color:#20302A;}
.parts222_sidebar_post_category_count{flex:none;font-family:Outfit,sans-serif;font-size:12px;font-weight:700;color:#176F94;border:1px solid rgba(43,178,232,.4);border-radius:0;padding:2px 9px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #E2E166;outline-offset:3px;border-radius:0;}
.parts210_section_content{padding:clamp(48px,7vw,80px) clamp(20px,5vw,64px) clamp(20px,3vw,32px);}
.parts210_content_wrap{max-width:720px;margin:0 auto;}
.parts210_content{font-size:clamp(17px,1.7vw,18px);line-height:2;color:#52605a;}
.parts213_section_form{max-width:720px;margin:0 auto;}
.parts213_form_wrap form{display:flex;flex-direction:column;}
.parts213_form_wrap dl{display:flex;flex-direction:column;gap:9px;padding:16px 0;margin:0;}
.parts213_form_wrap dt{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px;font-size:16px;font-weight:700;color:#11465F;line-height:1.5;}
.parts213_form_wrap dt > span:first-child:not(.required){display:flex;flex-direction:column;gap:4px;flex:0 1 auto;min-width:0;}
.parts213_form_wrap dd{margin:0;}
.parts213_form_wrap .required{flex:none;margin-left:0 !important;align-self:flex-start;white-space:nowrap;font-size:11px;font-weight:700;color:#fff;background:#11465F;padding:3px 9px;border-radius:0;}
.parts213_form_wrap input[type=text],.parts213_form_wrap input[type=email],.parts213_form_wrap textarea{width:100%;font-size:16px;font-family:inherit;color:#20302A;padding:13px 14px;border:1px solid #c8d2cc;background:#fff;border-radius:0;}
.parts213_form_wrap input:focus,.parts213_form_wrap textarea:focus{outline:none;border-color:#2BB2E8;box-shadow:0 0 0 3px rgba(43,178,232,.18);}
.parts213_form_wrap textarea{min-height:160px;resize:vertical;}
.parts213_form_wrap dd label{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:#3a4842;padding:8px 0;cursor:pointer;}
.parts213_form_wrap dd input[type=checkbox]{width:20px;height:20px;accent-color:#2BB2E8;flex:none;}
.parts213_form_wrap .attention{font-size:16px;font-weight:500;line-height:1.7;color:#c0392b;}
.parts213_form_wrap .error{margin:6px 0 0;font-size:16px;line-height:1.7;color:#c0392b;}
.parts213_form_wrap .contact_submit{margin-top:28px;text-align:center;}
.parts213_form_wrap .contact_submit input{font-family:inherit;font-size:16px;font-weight:700;color:#0C2C3C;background:#2BB2E8;border:none;padding:17px 48px;border-radius:999px;cursor:pointer;transition:transform .2s;}
.parts213_form_wrap .contact_submit input:hover{transform:translateY(-2px);}

/* ── ② インライン animation / transition の退避先 ─────────────
   CueZillaはフリーHTMLの style 属性から animation / transition を落とすため
   （教訓 cuezilla-strips-inline-animation-transition）、クラスへ逃がしてある。
   宣言ごとの !important は「受領ではインラインだった」強さを保つため。 */
.kz-a1{transition:background .35s ease,box-shadow .35s ease,padding .35s ease !important;}
.kz-a2{transition:filter .35s ease !important;}
.kz-a3{transition:all .25s !important;}
.kz-a4{transition:background .3s !important;}
.kz-a5{transition:transform .25s ease,background .25s ease,box-shadow .25s ease !important;}
.kz-a6{transition:opacity .35s ease,transform .35s ease,visibility .35s ease,background .25s ease !important;}
.kz-a7{animation:loadBar 1.3s ease-in-out infinite !important;}
.kz-a8{transition:opacity 1.3s ease !important;}
.kz-a9{transition:gap .25s !important;}
.kz-a10{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s !important;}
.kz-a11{transition:transform .2s !important;}
.kz-a12{transition:opacity .4s ease,transform .4s ease,box-shadow .25s ease !important;}
.kz-a13{animation:kb 12s ease-out forwards !important;}
.kz-a14{transition:transform .36s cubic-bezier(.2,.7,.2,1),box-shadow .36s cubic-bezier(.2,.7,.2,1) !important;}
.kz-a15{transition:all .2s !important;}
.kz-a16{transition:background .2s ease,color .2s ease !important;}
.kz-a17{transition:transform .34s cubic-bezier(.2,.7,.2,1),box-shadow .34s cubic-bezier(.2,.7,.2,1) !important;}
.kz-a18{transition:transform .2s,background .2s !important;}
/* 動きを減らす設定の端末では退避したアニメーションを止める（受領JSの reduced 判定と揃える） */
@media (prefers-reduced-motion: reduce){.kz-a7,.kz-a13{animation:none !important;}}

/* ── ③ style-hover の退避先（受領 dc-runtime の .scpN:hover 相当） ─
   受領インラインstyleと同じプロパティを変えるホバーは !important が無いと効かない
   （教訓 style-hover-class-needs-important-to-beat-inline-style）。 */
.kz-h1:hover{background:rgba(255,255,255,.16) !important;}
.kz-h2:hover{transform:translateY(-3px) !important;background:#166183 !important;box-shadow:0 14px 30px rgba(0,0,0,.28) !important;}
.kz-h3:hover{gap:16px !important;}
.kz-h4:hover{transform:translateY(-8px) !important;box-shadow:0 24px 50px rgba(12,44,60,.16) !important;}
.kz-h5:hover{transform:translateY(-3px) !important;}
.kz-h6:hover{box-shadow:none !important;}
.kz-h7:hover{transform:translateY(-6px) scale(1.01) !important;box-shadow:0 18px 38px rgba(12,44,60,.18) !important;}
.kz-h8:hover{transform:translateY(-6px) scale(1.01) !important;box-shadow:0 18px 38px rgba(17,70,95,.24) !important;}
.kz-h9:hover{transform:translateY(-2px) !important;}
.kz-h10:hover{background:#2BB2E8 !important;color:#0C2C3C !important;border-color:#2BB2E8 !important;}
.kz-h11:hover{transform:translateY(-3px) !important;background:rgba(255,255,255,.2) !important;}

/* ── ③b 受領がページごとに違う値を持っていた規則（ページ別に閉じ込め） ───
   受領は12ページが各々 helmet に ＜style＞ を持ち、同じセレクタで値が違う箇所があった
   （例: 採用ページだけ body/.dd-link が1段大きい）。union では先に読んだ値を既定にし、
   食い違う版だけをページ識別クラスで閉じ込める。:has() が落ちた環境向けに html.kz-p-* 版も併記。 */
body:has(.kz-p-numbers) .svc-media,html.kz-p-numbers .svc-media{position:relative;overflow:hidden;background:#eef1ec;height:clamp(210px,50vw,330px);}
@media(min-width:760px){
body:has(.kz-p-numbers) .svc-media,html.kz-p-numbers .svc-media{height:auto;min-height:clamp(290px,32vw,560px);}
}
body:has(.kz-p-recruit),html.kz-p-recruit body,body:has(.kz-p-formrecruit),html.kz-p-formrecruit body{font-family:'Noto Sans JP',sans-serif;font-size:19px;color:#20302A;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body:has(.kz-p-recruit) .dd-link,html.kz-p-recruit .dd-link,body:has(.kz-p-formrecruit) .dd-link,html.kz-p-formrecruit .dd-link{display:block;padding:11px 16px;border-radius:6px;font-size:19px;font-weight:600;color:#11465F;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s;}

/* ── ④ ページ別差分 ───────────────────────────────────────
   受領はページごとにヘッダー/フッター/ドロワーを持っていたが、CueZillaでは共通領域に
   1つしか置けない（R-22）。多数派（下層11ページ版）を納品し、差分をここで出し分ける。
   :has() が使えない環境向けに html.kz-p-* 版（BODY内JSが付与）も併記する。 */
/* TOP：ナビの間隔が受領indexだけ広い */
body:has(.kz-p-top) [data-nav-desktop],
html.kz-p-top [data-nav-desktop]{gap:clamp(10px,1.5vw,20px) !important;}
/* TOP：ドロワーの重なり順が受領indexだけヘッダーより下（z-index:115） */
body:has(.kz-p-top) [data-drawer],
html.kz-p-top [data-drawer]{z-index:115 !important;}
/* ドロワー下部のTEL行はTOPのみ */
.kz-drawer-tel{display:none;}
body:has(.kz-p-top) .kz-drawer-tel,
html.kz-p-top .kz-drawer-tel{display:block;}
/* ドロワーCTAは採用ページだけ「エントリーする（#entry）」に入れ替わる */
.kz-drawer-cta-recruit{display:none;}
body:has(.kz-p-recruit) .kz-drawer-cta-recruit,
html.kz-p-recruit .kz-drawer-cta-recruit{display:block;}
body:has(.kz-p-recruit) .kz-drawer-cta-default,
html.kz-p-recruit .kz-drawer-cta-default{display:none;}
/* 採用ページだけ受領の文字が1段大きい。共通化したヘッダー/フッター/ドロワーの該当要素だけを
   受領 recruit の実測値へ戻す（範囲を広く取ると SITE MAP・© など変わっていない12pxまで巻き込む）。
   ＝受領の値: ゴースト14→18 ／ ドロワー親18→20・子16→19・CTA16→19
             ／ フッター住所16→19・ナビ16→19・エリア注記14→18・採用バナー見出し17→20・プライバシー13→15 */
body:has(.kz-p-recruit) [data-navbtn-ghost],
html.kz-p-recruit [data-navbtn-ghost]{font-size:18px !important;}
body:has(.kz-p-recruit) [data-drawer] nav>a,
html.kz-p-recruit [data-drawer] nav>a{font-size:20px !important;}
body:has(.kz-p-recruit) [data-drawer] .kz-d-sub,
html.kz-p-recruit [data-drawer] .kz-d-sub{font-size:19px !important;}
body:has(.kz-p-recruit) [data-drawer] .kz-d-cta,
html.kz-p-recruit [data-drawer] .kz-d-cta{font-size:19px !important;}
body:has(.kz-p-recruit) footer .kz-f-addr,
body:has(.kz-p-recruit) footer nav[aria-label="フッターナビゲーション"] a,
html.kz-p-recruit footer .kz-f-addr,
html.kz-p-recruit footer nav[aria-label="フッターナビゲーション"] a{font-size:19px !important;}
body:has(.kz-p-recruit) footer .kz-f-areanote,
html.kz-p-recruit footer .kz-f-areanote{font-size:18px !important;}
body:has(.kz-p-recruit) footer .kz-f-rectitle,
html.kz-p-recruit footer .kz-f-rectitle{font-size:20px !important;}
body:has(.kz-p-recruit) footer .kz-f-privacy,
html.kz-p-recruit footer .kz-f-privacy{font-size:15px !important;}

/* ── ⑤ JSが動かないときの保険（R-4） ─────────────────────────
   BODY内JSは html に .js を付ける。付いていない＝JS不動なので、
   「JSが最終状態にするはずだったもの」を初期状態として見せる。 */
html:not(.js) [data-loader]{display:none !important;}
html:not(.js) [data-slide]{opacity:1 !important;}
html:not(.js) [data-slide]:not(:first-of-type){display:none !important;}
html:not(.js) [data-fv]{opacity:1 !important;transform:none !important;}
html:not(.js) [data-nav-desktop]{display:flex !important;}
html:not(.js) [data-float-entry]{display:none !important;}
/* ★PCナビとハンバーガーの切替点は 1320px（受領は 1080px）。
   実測: PCナビの実幅 999px＋ロゴ 209px＋左右padding 43px×2＋間隔16px = 約1310px 必要で、
   受領の 1080px 切替では 1080〜1310px の間でナビ右端（ブログ／お問い合わせ）が画面外に出て
   押せなくなっていた（受領ではルートの overflow-x:hidden に隠れて気づけない）。
   BODY内JSの判定値（1320）と必ず揃えること。 */
@media (max-width:1319px){
  html:not(.js) [data-nav-desktop]{display:none !important;}
  html:not(.js) [data-nav-burger]{display:inline-flex !important;}
}

/* ── TOPの施工実績カードパーツ（parts131415_blog 系）を、前後のフリーHTMLと1本の帯に見せる ──
   見出しは 05b の末尾、「一覧を見る」は 05c の先頭にあり、その間にCMSのカード一覧が入る。
   ★パーツ側の上下 padding を 0 にして、地色を前後と同じ #E9F5FB に揃える。
   ★余白の設計（2026-09-14 ディレクター指摘「パーツの上下余白は広くなりがち」）:
     このセクションの縦のリズムは【フリーHTML側が持つ】。
       ・見出しと一覧の間 … 05b の見出し枠が持つ margin-bottom: clamp(40px,6vw,60px)
       ・一覧とボタンの間 … 05c のボタン枠が持つ margin-top:  clamp(34px,5vw,52px)
     なので**パーツ側は縦方向に一切足さない**のが正解。section と直下のコンテナ／行ラッパーの
     上下 padding・margin を 0 にする（左右は触らない＝横幅の設計は残す）。 */
section[class*="parts131415_blog"]{background:#E9F5FB !important;background-image:none !important;padding-top:0 !important;padding-bottom:0 !important;}
section[class*="parts131415_blog"]>.container,
section[class*="parts131415_blog"]>.container-lg,
section[class*="parts131415_blog"]>.container-fluid,
section[class*="parts131415_blog"]>div{padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;}
section[class*="parts131415_blog"] .row{margin-top:0 !important;margin-bottom:0 !important;}
/* パーツが自前で出す見出し枠は 05b と二重になるので隠す（display:none なので余白ごと消える）。
   組立時にパーツの見出し欄を空にしてあれば出ないが、空にし忘れても事故らないための保険。 */
section[class*="parts131415_blog"] [class*="_blog_title_wrap"]{display:none !important;}
/* ★ここまでで消えるのは「パーツの中」の余白。**ブロックとブロックの間**にCueZillaが入れる余白
   （空 ＜p＞ ＋ free-area 由来・実測で下限100px前後）は add.css では消し切れない（R-19）。
   投入後に 05b／パーツ／05c の継ぎ目を実機で見て、開きすぎていたら実DOMを採ってから
   ここへ1行足す（R-28：投機で書かない）。 */

/* ── カードの意匠（受領のインラインstyleをパーツの実クラスへ起こしたもの・2026-09-14）──
   受領はカード装飾を全部インラインstyleで書いており、カード自体をCMSパーツへ譲った時点で
   その指定は消える（＝CueZilla既定の素のカードになる）。受領と同じ値をここに移す。
   ・カードの中身の並びは受領の flex order をそのまま使う:
       card-body ＞ ①サムネ（a の中・order:1）→ ②カテゴリ名（order:2）→ ③記事タイトル（a の中・order:2）
     ※受領は card-title(order:2) / a(order:3)、a の中が thumbnail(order:1) / card-text(order:2)。
   ・詳細度: CueZilla は .partsNNN_blog_＜ID＞ .card .card-body{…!important}(0,3,0) を自動で吐くので、
     クラスを重ねて (0,4,1) 以上にしたうえで宣言ごとに !important を付ける（R-28 の詳細度アーマー）。
   ★実DOMが受領と違っていたら当たらない。投入後に実機で必ず目視すること（00★申し送り★.md C-11）。 */
section[class*="parts131415_blog"] .row.row.row{display:grid !important;gap:clamp(16px,2.4vw,28px) !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)) !important;}
section[class*="parts131415_blog"] .col.col.col{padding:0 !important;}
section[class*="parts131415_blog"] .card.card.card{background:#fff !important;border:1px solid rgba(17,70,95,.08) !important;border-radius:0 !important;overflow:hidden !important;box-shadow:0 8px 24px rgba(12,44,60,.06) !important;height:100% !important;display:flex !important;flex-direction:column !important;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s !important;}
section[class*="parts131415_blog"] .card.card.card:hover{transform:translateY(-8px) !important;box-shadow:0 24px 50px rgba(12,44,60,.16) !important;}
section[class*="parts131415_blog"] .card-body.card-body.card-body{padding:0 !important;display:flex !important;flex-direction:column !important;flex:1 !important;justify-content:flex-start !important;}
section[class*="parts131415_blog"] .card-title.card-title.card-title{order:2 !important;margin:22px 22px 18px !important;align-self:stretch !important;text-align:center !important;font-family:Outfit,sans-serif !important;font-weight:700 !important;font-size:16px !important;letter-spacing:.1em !important;color:#176F94 !important;line-height:1.2 !important;}
section[class*="parts131415_blog"] .card-body.card-body>a{order:3 !important;text-decoration:none !important;color:#20302A !important;display:flex !important;flex-direction:column !important;}
section[class*="parts131415_blog"] .card-text.card-text.card-text{order:2 !important;margin:10px 22px 24px !important;font-family:Outfit,'Zen Kaku Gothic New',sans-serif !important;font-weight:700 !important;font-size:18px !important;line-height:1.65 !important;color:#20302A !important;}
section[class*="parts131415_blog"] [class*="_blog_thumbnail"]{order:1 !important;position:relative !important;aspect-ratio:16/11 !important;height:auto !important;background:#eef1ec !important;overflow:hidden !important;}
section[class*="parts131415_blog"] [class*="_blog_thumbnail"] img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important;display:block !important;}

/* ── TOPのNEWS帯（design-parts-52 系）の意匠 ─────────────────────────
   カードと同じ事情（受領はインラインstyleで書いており、パーツへ譲ると全部消える）。
   受領の値をそのまま実クラスへ移す。1行の横帯で、左に「● NEWS」、右に「日付＋タイトル」。
   ・帯の高さは .content の min-height:68px が決める＝section 側の上下 padding は 0 にする
     （パーツ既定の上下余白が乗ると帯が間延びする）。
   ・★受領は「● NEWS」の●を空の ＜span＞ で描いていたが、パーツ描画では出ない。
     AddCssInfo は ::before の content を落とす（R-27）ので、疑似要素ではなく
     h4 自身の background-image（radial-gradient）で●を描き、その分だけ padding-left を取る。 */
section[class*="design-parts-52"]{background:#fff !important;background-image:none !important;border-bottom:1px solid rgba(17,70,95,.12) !important;padding-top:0 !important;padding-bottom:0 !important;}
section[class*="design-parts-52"] .container.container{max-width:1180px !important;margin:0 auto !important;padding:0 clamp(20px,5vw,64px) !important;}
section[class*="design-parts-52"] .content.content{display:flex !important;align-items:center !important;gap:clamp(14px,3vw,32px) !important;min-height:68px !important;flex-wrap:wrap !important;}
section[class*="design-parts-52"] .banner-area.banner-area{margin:0 !important;flex:none !important;display:inline-flex !important;align-items:center !important;font-family:Outfit,sans-serif !important;font-weight:700 !important;letter-spacing:.16em !important;font-size:14px !important;color:#11465F !important;background:none !important;border:0 !important;border-radius:0 !important;text-align:left !important;padding:0 0 0 18px !important;background-image:radial-gradient(circle 4.5px at 4.5px 50%, #2BB2E8 0 100%, transparent 100%) !important;background-repeat:no-repeat !important;}
section[class*="design-parts-52"] .banner-area.banner-area>span:empty{display:none !important;}
section[class*="design-parts-52"] ul{list-style:none !important;margin:0 !important;padding:0 !important;flex:1 !important;min-width:240px !important;max-width:none !important;}
section[class*="design-parts-52"] li{margin:0 !important;min-height:0 !important;border:0 !important;}
section[class*="design-parts-52"] li a{display:flex !important;align-items:center !important;gap:18px !important;text-decoration:none !important;color:#20302A !important;padding:6px 0 !important;flex-wrap:wrap !important;}
section[class*="design-parts-52"] .parts-52-textarea{display:flex !important;align-items:center !important;gap:18px !important;flex-wrap:wrap !important;min-width:0 !important;width:auto !important;}
section[class*="design-parts-52"] .date{font-family:Outfit,sans-serif !important;font-size:13px !important;letter-spacing:.04em !important;color:#647169 !important;flex:none !important;}
section[class*="design-parts-52"] .d-inline-block{font-size:16px !important;font-weight:500 !important;min-width:0 !important;}

/* ── 施工実績一覧（/blog-ex/instance）のカテゴリタグを、複数あっても横並びにする ──
   （2026-09-14 ディレクター指摘「カテゴリが複数あるとき縦並びになる」）
   受領CSSは既に .parts-blog-ex-tag_wrap{display:flex;flex-wrap:wrap} だが、**CueZillaは一覧の
   タグ・カテゴリに max-width:28〜48% や display:block を既定で当てる**ため、
   詳細度(0,3,0)+!important の自動CSSに負けてチップが1つずつ改行される（R-28 の既知の型）。
   ＝「幅の制約を外す」「チップを inline-flex に戻す」「余白を受領値に戻す」の3点で潰す。
   クラス名に採番が入らない（parts-blog-ex-…）ので、クラスを重ねて (0,3,0) にして当てる。 */
.parts-blog-ex-tag_wrap.parts-blog-ex-tag_wrap.parts-blog-ex-tag_wrap,
[class*="blog-ex-tag_wrap"][class*="blog-ex-tag_wrap"]{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;gap:8px !important;padding:12px 22px 0 !important;margin:0 !important;width:auto !important;max-width:none !important;list-style:none !important;}
.parts-blog-ex-tag_wrap.parts-blog-ex-tag_wrap>*,
[class*="blog-ex-tag_wrap"][class*="blog-ex-tag_wrap"]>*{margin:0 !important;width:auto !important;max-width:none !important;flex:0 0 auto !important;display:inline-flex !important;}
.parts-blog-ex_tag.parts-blog-ex_tag.parts-blog-ex_tag,
[class*="blog-ex_tag"][class*="blog-ex_tag"]{display:inline-flex !important;align-items:center !important;width:auto !important;max-width:none !important;white-space:nowrap !important;font-family:Outfit,sans-serif !important;font-size:11px !important;font-weight:700 !important;letter-spacing:.06em !important;color:#176F94 !important;background:#E9F5FB !important;border:0 !important;border-radius:999px !important;padding:5px 12px !important;margin:0 !important;text-decoration:none !important;}
/* ★実機のDOMは受領と違い、タグ枠が【日付と同じ行（_post_status）の中】に入る（2026-09-14 実機のスクショで確認）。
   その形だと上の padding:12px 22px 0 が行の中で左右44pxを食い、チップが入り切らず1つずつ折り返す。
   ＝行の中にいるときは内側余白を持たせない（余白は親の _post_status が既に持っている）。
   ・flex:1 1 auto ＋ min-width:0 で残り幅を全部使う
   ・それでも足りなければ親を flex-wrap:wrap にして「タグの塊ごと」次の行へ落とす
     （チップ同士は横並びのまま。1つずつ縦に割れるのを防ぐ）
   ★上の既定は3重クラス(0,3,0)で当ててあるので、ここは (0,4,0) まで上げないと勝てない。 */
[class*="_post_status"]{flex-wrap:wrap !important;}
[class*="_post_status"] .parts-blog-ex-tag_wrap.parts-blog-ex-tag_wrap.parts-blog-ex-tag_wrap,
[class*="_post_status"] [class*="blog-ex-tag_wrap"][class*="blog-ex-tag_wrap"][class*="blog-ex-tag_wrap"],
[class*="_post_status"] [class*="_tag_wrap"][class*="_tag_wrap"][class*="_tag_wrap"]{padding:0 !important;margin:0 !important;flex:1 1 auto !important;min-width:0 !important;width:auto !important;max-width:none !important;}
/* 受領どおり「カードの直下」に置かれる形のときだけ、受領の内側余白を使う */
[class*="_post_wrap"]>[class*="blog-ex-tag_wrap"][class*="blog-ex-tag_wrap"][class*="blog-ex-tag_wrap"]{padding:12px 22px 0 !important;}

/* ── 一覧カード（施工実績 parts228／ブログ parts222）の高さ不揃いを直す ──
   （2026-09-14 ディレクター指摘）。原因は**CueZillaテーマ本体**の次の3つ。実物を読んで確認した:
     .parts228_post_wrap{ margin-bottom:55px }
     .parts228_post_wrap:nth-last-child(-n+3){ margin-bottom:0 }   ← ★これ
     .parts228_post_wrap .parts228_post_img{ height:240px }        ← サムネの比率も壊す(0,2,0)
   テーマは一覧を flex-wrap で組む前提なので「最後の3枚だけ下マージンを消す」で辻褄を合わせている。
   受領デザインは grid + gap なので、この下マージンは不要なうえ、
   **件数が3の倍数でないと :nth-last-child(-n+3) が行をまたぐ**（例: 5件なら4件目が前の行に居るのに
   マージン0になる）＝同じ行に 55px 差のカードが混ざり、高さが不揃いに見える。
   ブログ一覧(parts222)も同じ形（margin-bottom:55px ＋ :nth-child(7),:last-child で0）なので一緒に潰す。
   ★採番が変わっても効くよう接尾辞セレクタで当てる。テーマ側に !important は無いので1つで勝てる。 */
[class*="_post_wrap"],
[class*="_post_wrap"]:nth-last-child(-n+3),
[class*="_post_wrap"]:nth-child(-n+2),
[class*="_post_wrap"]:nth-child(7),
[class*="_post_wrap"]:last-child{margin-bottom:0 !important;}
/* サムネの固定高さ(240px)を外して受領の aspect-ratio に戻す（skin §4-c と同じ手当て） */
[class*="_post_wrap"] [class*="_post_img"]{height:auto !important;margin-bottom:0 !important;}
[class*="_post_wrap"] [class*="_post_img"] img{width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important;}
/* テーマが flex 用に置く「空のスペーサー」。grid化すると幅を持った空マスになり最終行が片寄る。
   ★content は AddCssInfo が落とすので打ち消しには使えない。display:none なら残る（R-27）。 */
[class*="_post_list"]::after{display:none !important;}
/* 一覧ラッパーのテーマ既定の上マージン（parts228_wrap は margin-top:45px）を殺す */
.parts222_wrap.parts222_wrap,.parts228_wrap.parts228_wrap{margin-top:0 !important;}
/* サイドバーの箱は受領CSSが gap で並べるので、テーマの nth-child マージンを殺す */
[class*="_sidebar"] [class*="_sidebar_wrap"]:nth-child(n+2){margin-top:0 !important;}

/* ── ページャー（parts222／parts228）の枠が二重になるのを止める ──
   （2026-09-14 ディレクター指摘）。教訓 theme-pagenation-double-ring-on-nested-nav の型。
   受領CSSは .parts222_pagenation a, .parts222_pagenation span の**両方**に枠を当てている。
   「1」「2」のような番号は1要素なので枠は1本だが、**「次へ」「最後」等は
   ＜span＞＜a＞…＜/a＞＜/span＞ の入れ子**で、外側spanと内側aの両方に枠が乗って二重リングになる。
   ラッパのタグ/クラスは不定なので要素名の決め打ちでは取りこぼす。
   ＝①子孫を総リセットして枠の元を消し、②直接の子にだけピルを1枚描き直す（受領と同じ見た目）。
   テーマ側は !important 非使用なので、こちらの !important が全プロパティで勝つ。 */
[class*="_pagenation"]{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;gap:8px !important;}
/* ① 子孫を総リセット＝二重リングの元を殲滅 */
[class*="_pagenation"] *{border:0 !important;background:none !important;border-radius:0 !important;box-shadow:none !important;margin:0 !important;padding:0 !important;min-width:0 !important;}
/* ② 直接の子（番号・現在ページ・前後ナビ）にだけ単線のピルを1枚 */
[class*="_pagenation"]>a,[class*="_pagenation"]>span{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-width:44px !important;height:44px !important;padding:0 12px !important;font-family:Outfit,sans-serif !important;font-weight:700 !important;font-size:14px !important;line-height:1 !important;text-decoration:none !important;color:#11465F !important;border:1px solid rgba(17,70,95,.2) !important;border-radius:0 !important;background:#fff !important;}
/* ③ ラッパの中に a がある形はクリック範囲をピル全体へ（枠は②の1枚だけ） */
[class*="_pagenation"]>*>a{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;height:100% !important;color:inherit !important;text-decoration:none !important;}
/* 現在ページ／前後ナビの色（受領の指定） */
[class*="_pagenation"]>.current,[class*="_pagenation"]>.pagination_num.current,[class*="_pagenation"]>span.current{background:#2BB2E8 !important;color:#0C2C3C !important;border-color:#2BB2E8 !important;}
[class*="_pagenation"]>.pagination_prev,[class*="_pagenation"]>.pagination_next{color:#186F93 !important;}
/* CMSは番号spanに Bootstrap の d-none d-xl-block を付けるため 1200px 未満で番号が消える。戻す。 */
[class*="_pagenation"] .d-none{display:inline-flex !important;}

/* ヘッダーの「お問い合わせ」ボタンのホバー（2026-09-14 ディレクター指摘：
   「背景が白になると、ホバー時に文字が見えなくなる」）。属性を2枚重ねて (0,3,0) にし、
   下の3つを一度に押さえる。
   ① ＜.kz-h1:hover{background:rgba(255,255,255,.16)}＞ (0,2,0) が
      受領の ＜[data-navbtn-ghost]:hover{background:#2BB2E8}＞ (0,2,0) と同点で、
      後ろに置かれるぶんだけ勝っていた。結果、白ヘッダーの上では
      「ほぼ白の背景＋文字色 #fff」になり文字が消えていた（＝報告された症状）。
   ② 白ヘッダーのページ用に下で当てている
      ＜body:not(:has([data-hero])) [data-navbtn-ghost]{color/border-color}＞ は (0,2,1) で、
      これも受領の :hover (0,2,0) に勝つため、白地ページだけホバーが「青い面に濃紺の枠」になる。
   ③ 受領の hover 文字色 #fff は #2BB2E8 の面に対して 2.43:1 しかない。
      このデザイン自身が「#2BB2E8 の面には #0C2C3C」を使っている
      （ドロワーの「エントリーする」ボタンが同じ組み合わせ）ので、それに合わせて 5.99:1 にする。 */
[data-navbtn-ghost][data-navbtn-ghost]:hover{background:#2BB2E8 !important;border-color:#2BB2E8 !important;color:#0C2C3C !important;}

/* 自前の写真ヒーローが無いページ（/form/recruit・記事詳細・送信確認/完了・404 等）は、
   ヘッダーを最初から白地にする。受領ヘッダーは「ヒーローに透過で重ねる」前提で文字が白のため、
   これが無いと初回描画が白地に白文字になる（BODY内JSも同じことをするが、CSSで先に決めてちらつきを消す）。 */
body:not(:has([data-hero])) [data-header]{background:rgba(255,255,255,.96) !important;box-shadow:0 6px 24px rgba(12,44,60,.10) !important;padding:10px clamp(16px,4vw,48px) !important;}
body:not(:has([data-hero])) [data-navlink]{color:#20302A !important;}
body:not(:has([data-hero])) [data-navbtn-ghost]{color:#11465F !important;border-color:rgba(17,70,95,.4) !important;}
body:not(:has([data-hero])) [data-nav-burger] span{background:#11465F !important;}

/* R-27対策で疑似要素から昇格させたスクリム（SPのみ表示。既定は非表示） */
.kz-lcb-scrim{display:none;}
@media (max-width:680px){
  [data-lcb="light"]>.kz-lcb-scrim{display:block;}
  [data-lcb="light"]>span:not(.kz-lcb-scrim){position:relative;z-index:1;}
}


/* ===== 29_override.css ===== */
/* ============================================================
   O00451 株式会社コトブキ造園土木 — override.css（結合順の最後／R-30）
   ★skin（cuezilla-skin.css）は採用していない。
     受領CSSが .parts210_ / .parts213_ / .parts219_ / .parts222_ / .parts228_ /
     .parts131415_blog / .design-parts-52 を自前でフルスタイルしている自己完結型のため、
     skin（全宣言 !important）を足すと受領デザインを上書きして崩す（cz-judgment §3）。
   ここには「受領CSSでは届かない面」だけを最小限で書く。
   ============================================================ */

/* CueZillaが自動描画するパンくず（parts231）の重複回避（R-10a）。
   ★一律には消さない。受領デザインがパンくずを持つページ（/form/inquiry・/privacypolicy）と、
   そもそもパンくずを置かない設計のページ（自前ヒーローが全面写真）だけを対象にする。
   記事詳細・施工実績詳細は自前パンくずが無いので自動側を残す。 */
body:has(.kz-page) [class*="_breadcrumb"]{display:none !important;}
/* :has() が使えない／落ちた場合の保険（BODY内JSが html に印を付ける） */
html.kz-haspage [class*="_breadcrumb"]{display:none !important;}

/* 固定ヘッダー（R-18）。CueZillaが描画して自前ヒーローが無いページ
   （記事詳細・送信確認/完了・404 等）で、先頭が固定ヘッダーに潜り込むのを防ぐ。
   値の定義は 20_site.css 先頭の :root にある。JS版（html.kz-syspage）と :has() 版の二重掛け。 */
html.kz-syspage body{padding-top:var(--fixed-header-h,86px) !important;}
body:not(:has(.kz-page)){padding-top:var(--fixed-header-h,86px);}

/* 一覧カード・サイドバーがテーマ既定の max-width（％）で潰れるのを解除（R-28）。
   受領CSSは grid で列幅を決めているので、％の制約が残ると列の1/3まで縮む。 */
.parts222_wrap>.parts222_main,.parts222_wrap>.parts222_sidebar,
.parts222_post_list>.parts222_post_wrap,.parts228_post_list>.parts228_post_wrap,
.parts131415_blog .row>.col{max-width:none !important;}
/* list-style:none を当てた ul に残るUA既定の左padding（R-28） */
.parts222_sidebar_wrap ul,.category_post_count{padding-left:0 !important;}

/* KEEP: 現行公開サイトのCSSにあって生成CSSに無かった規則（2026-09-17 ディレクター指示で追記）。
   生成側（受領データ）に対応する記述が無いため、再エクスポート・再生成で消えやすい。
   不要に見えても削除しないこと。 */
.parts228_post_status a{
width:100%!important;
}
/* /KEEP */

/* KEEP: 必須バッジをラベル直後へ寄せる（2026-09-17 ディレクター指示・実機で実測して確定）。
   真因はテーマ theme_default.css の .parts2NN_section_form dt が持つ justify-content:space-between。
   これがラベルと必須バッジを dt の両端へ押し広げていた（.required の margin-left:auto を
   外しただけでは実機がまったく動かなかったのはこのため）。
   加えて form_text_dt の行だけ .required が position:absolute で右上へ固定されていたので解除する。
   さらに parts213 の form_text_dt は「ラベル＋注記」が1つの span に包まれた別構造のため、
   display:contents で包みを外し、注記だけを order で次の行へ落としている。
   実測（PC 1280 / SP 375 とも全行）: ラベル右端と必須バッジの間隔 10px・同じ行・はみ出しなし。 */
.parts213_form_wrap dt,
.parts219_form_wrap dt{justify-content:flex-start !important;}
.parts213_form_wrap dt .required,
.parts219_form_wrap dt .required{position:static !important;}
.parts213_form_wrap dt.form_text_dt > span:first-child:not(.required){display:contents !important;}
.parts213_form_wrap dt.form_text_dt .attention{order:1;flex-basis:100%;display:block;}
/* /KEEP */