/* ===== 20_site.css ===== */ /* ============================================================ S01439 大邦建設株式会社 — site.css（CueZilla 追加CSS欄＝AddCssInfo へ投入） 生成: _作業/decompose.mjs（受領データ から機械生成） ・受領の helmet 内 style を、ページ間で衝突が出ないよう組み直したもの ・同じセレクタにページごとに違う宣言がある規則だけ .th-p-（ページキー）でスコープしてある （実測: a.hdr-cta:hover のリング色が トップ/業務案内=オレンジ・他=白／募集要項テーブルの SPレイアウトが3種類。素朴に1本へまとめると最後に読んだページの値が全ページへ効く） ・手で編集せず、入力側（受領データ）と分解スクリプトを直して再生成すること ============================================================ */ /* ヘッダーは position:sticky（fixed ではない）ので、システム描画ページの上余白加算は不要（R-18） */ :root{--fixed-header-h:0px;} /* 動的パーツの書体を案件の書体に合わせる（skin の --dyn-font-* へ渡す） */ :root{--font-display:'Zen Kaku Gothic New','Noto Sans JP',system-ui,sans-serif;--font-body:'Noto Sans JP',system-ui,sans-serif;--font-numeric:'Noto Sans JP',system-ui,sans-serif;} /* ===== 受領 helmet の style（ページ間の衝突だけ解いたもの） ===== */ *{box-sizing:border-box} body{margin:0;background:#FDF5EC;color:#26292B;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:#C4551A} a:hover{color:#E4681E} :focus-visible{outline:3px solid #E4681E;outline-offset:3px} span.line-chunk{display:inline-block;overflow-wrap:anywhere;word-break:normal} .pc-nav{display:none} .sp-only{display:block} .subnav{display:none} .has-sub:hover>.subnav,.has-sub:focus-within>.subnav{display:block} .has-sub{display:flex;align-items:center} @media (min-width:1024px){.pc-nav{display:flex;gap:0!important}} @media (min-width:1024px){.sp-only{display:none!important}} @media (min-width:1024px){.pc-nav a{font-size:.875rem!important;padding-left:9px!important;padding-right:9px!important;white-space:nowrap}} @media (min-width:1024px){.pc-nav .subnav a{font-size:.875rem!important;padding-left:12px!important;padding-right:12px!important}} @media (min-width:1024px){header a img{height:34px!important}} .pc-nav a:hover{color:#E4681E!important} .pc-nav .has-sub:hover>a{color:#E4681E!important} .pc-nav a[href="/form/inquiry"]:hover{color:#fff!important} a.hdr-cta:hover>span:first-child{transform:scaleX(1)!important} body:has(.th-p-index) a.hdr-cta:hover,html.th-p-index a.hdr-cta:hover,.th-p-index a.hdr-cta:hover{color:#fff!important;color:#fff;box-shadow:0 0 0 3px rgba(228,104,30,.55),0 10px 30px rgba(35,43,48,.12)!important;transform:translateY(-2px)} body:has(.th-p-work) a.hdr-cta:hover,html.th-p-work a.hdr-cta:hover,.th-p-work a.hdr-cta:hover{color:#fff!important;box-shadow:0 0 0 3px rgba(228,104,30,.55),0 10px 30px rgba(35,43,48,.12)!important;transform:translateY(-2px)} body:has(.th-p-workabout) a.hdr-cta:hover,html.th-p-workabout a.hdr-cta:hover,.th-p-workabout a.hdr-cta:hover,body:has(.th-p-instance) a.hdr-cta:hover,html.th-p-instance a.hdr-cta:hover,.th-p-instance a.hdr-cta:hover,body:has(.th-p-recruit) a.hdr-cta:hover,html.th-p-recruit a.hdr-cta:hover,.th-p-recruit a.hdr-cta:hover,body:has(.th-p-hataraki) a.hdr-cta:hover,html.th-p-hataraki a.hdr-cta:hover,.th-p-hataraki a.hdr-cta:hover,body:has(.th-p-reason) a.hdr-cta:hover,html.th-p-reason a.hdr-cta:hover,.th-p-reason a.hdr-cta:hover,body:has(.th-p-beginner) a.hdr-cta:hover,html.th-p-beginner a.hdr-cta:hover,.th-p-beginner a.hdr-cta:hover,body:has(.th-p-experienced) a.hdr-cta:hover,html.th-p-experienced a.hdr-cta:hover,.th-p-experienced a.hdr-cta:hover,body:has(.th-p-faq) a.hdr-cta:hover,html.th-p-faq a.hdr-cta:hover,.th-p-faq a.hdr-cta:hover,body:has(.th-p-info) a.hdr-cta:hover,html.th-p-info a.hdr-cta:hover,.th-p-info a.hdr-cta:hover,body:has(.th-p-blog) a.hdr-cta:hover,html.th-p-blog a.hdr-cta:hover,.th-p-blog a.hdr-cta:hover{color:#fff!important;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 10px 30px rgba(35,43,48,.12)!important;transform:translateY(-2px)} body:has(.th-p-inquiry) a.hdr-cta:hover,html.th-p-inquiry a.hdr-cta:hover,.th-p-inquiry a.hdr-cta:hover,body:has(.th-p-formrecruit) a.hdr-cta:hover,html.th-p-formrecruit a.hdr-cta:hover,.th-p-formrecruit a.hdr-cta:hover,body:has(.th-p-privacy) a.hdr-cta:hover,html.th-p-privacy a.hdr-cta:hover,.th-p-privacy a.hdr-cta:hover{color:#fff!important} @media (min-width:1024px){.pc-nav a[href="/form/inquiry"]{font-size:.875rem!important;padding:8px 20px!important;margin-left:10px!important;letter-spacing:.02em;box-shadow:0 2px 6px rgba(35,43,48,.08)}} @media (min-width:1024px){.pc-nav a[href="/form/inquiry"]:hover{box-shadow:0 10px 30px rgba(35,43,48,.12)}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} .ft-grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:repeat(4,1fr)} @media (max-width:1023px){.ft-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:767px){.ft-grid{grid-template-columns:1fr;gap:32px}} @media (max-width:767px){.ft-nav{gap:0!important}} @media (max-width:767px){.ft-nav>p{margin:0 0 10px!important}} @media (max-width:767px){.ft-nav>a{min-height:48px!important;display:flex;align-items:center;justify-content:space-between;font-size:.9rem!important;border-top:1px solid rgba(255,255,255,.1);padding-right:2px}} @media (max-width:767px){.ft-nav>a:last-child{border-bottom:1px solid rgba(255,255,255,.1)}} body:has(.th-p-index) a.hdr-cta,html.th-p-index a.hdr-cta,.th-p-index a.hdr-cta,body:has(.th-p-work) a.hdr-cta,html.th-p-work a.hdr-cta,.th-p-work a.hdr-cta,body:has(.th-p-workabout) a.hdr-cta,html.th-p-workabout a.hdr-cta,.th-p-workabout a.hdr-cta,body:has(.th-p-instance) a.hdr-cta,html.th-p-instance a.hdr-cta,.th-p-instance a.hdr-cta,body:has(.th-p-recruit) a.hdr-cta,html.th-p-recruit a.hdr-cta,.th-p-recruit a.hdr-cta,body:has(.th-p-hataraki) a.hdr-cta,html.th-p-hataraki a.hdr-cta,.th-p-hataraki a.hdr-cta,body:has(.th-p-reason) a.hdr-cta,html.th-p-reason a.hdr-cta,.th-p-reason a.hdr-cta,body:has(.th-p-beginner) a.hdr-cta,html.th-p-beginner a.hdr-cta,.th-p-beginner a.hdr-cta,body:has(.th-p-experienced) a.hdr-cta,html.th-p-experienced a.hdr-cta,.th-p-experienced a.hdr-cta,body:has(.th-p-faq) a.hdr-cta,html.th-p-faq a.hdr-cta,.th-p-faq a.hdr-cta,body:has(.th-p-info) a.hdr-cta,html.th-p-info a.hdr-cta,.th-p-info a.hdr-cta,body:has(.th-p-blog) a.hdr-cta,html.th-p-blog a.hdr-cta,.th-p-blog a.hdr-cta{transition:box-shadow .3s ease,transform .3s ease} body:has(.th-p-index) a.hdr-cta[data-cta-light]:hover,html.th-p-index a.hdr-cta[data-cta-light]:hover,.th-p-index a.hdr-cta[data-cta-light]:hover,body:has(.th-p-workabout) a.hdr-cta[data-cta-light]:hover,html.th-p-workabout a.hdr-cta[data-cta-light]:hover,.th-p-workabout a.hdr-cta[data-cta-light]:hover,body:has(.th-p-instance) a.hdr-cta[data-cta-light]:hover,html.th-p-instance a.hdr-cta[data-cta-light]:hover,.th-p-instance a.hdr-cta[data-cta-light]:hover,body:has(.th-p-recruit) a.hdr-cta[data-cta-light]:hover,html.th-p-recruit a.hdr-cta[data-cta-light]:hover,.th-p-recruit a.hdr-cta[data-cta-light]:hover,body:has(.th-p-hataraki) a.hdr-cta[data-cta-light]:hover,html.th-p-hataraki a.hdr-cta[data-cta-light]:hover,.th-p-hataraki a.hdr-cta[data-cta-light]:hover,body:has(.th-p-reason) a.hdr-cta[data-cta-light]:hover,html.th-p-reason a.hdr-cta[data-cta-light]:hover,.th-p-reason a.hdr-cta[data-cta-light]:hover,body:has(.th-p-beginner) a.hdr-cta[data-cta-light]:hover,html.th-p-beginner a.hdr-cta[data-cta-light]:hover,.th-p-beginner a.hdr-cta[data-cta-light]:hover,body:has(.th-p-experienced) a.hdr-cta[data-cta-light]:hover,html.th-p-experienced a.hdr-cta[data-cta-light]:hover,.th-p-experienced a.hdr-cta[data-cta-light]:hover,body:has(.th-p-faq) a.hdr-cta[data-cta-light]:hover,html.th-p-faq a.hdr-cta[data-cta-light]:hover,.th-p-faq a.hdr-cta[data-cta-light]:hover,body:has(.th-p-info) a.hdr-cta[data-cta-light]:hover,html.th-p-info a.hdr-cta[data-cta-light]:hover,.th-p-info a.hdr-cta[data-cta-light]:hover,body:has(.th-p-blog) a.hdr-cta[data-cta-light]:hover,html.th-p-blog a.hdr-cta[data-cta-light]:hover,.th-p-blog a.hdr-cta[data-cta-light]:hover{color:#1B1B1B!important} body:has(.th-p-work) a.hdr-cta[data-cta-light]:hover,html.th-p-work a.hdr-cta[data-cta-light]:hover,.th-p-work a.hdr-cta[data-cta-light]:hover{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 10px 30px rgba(35,43,48,.12)!important} body:has(.th-p-index) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-index a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-index a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-workabout) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-workabout a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-workabout a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-instance) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-instance a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-instance a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-recruit) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-recruit a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-recruit a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-hataraki) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-hataraki a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-hataraki a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-reason) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-reason a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-reason a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-beginner) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-beginner a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-beginner a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-experienced) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-experienced a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-experienced a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-faq) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-faq a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-faq a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-info) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-info a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-info a.hdr-cta[data-cta-light]:hover>span:last-child,body:has(.th-p-blog) a.hdr-cta[data-cta-light]:hover>span:last-child,html.th-p-blog a.hdr-cta[data-cta-light]:hover>span:last-child,.th-p-blog a.hdr-cta[data-cta-light]:hover>span:last-child{background:#1B1B1B!important;color:#fff!important} body:has(.th-p-index) [data-wipe-flash].is-flash,html.th-p-index [data-wipe-flash].is-flash,.th-p-index [data-wipe-flash].is-flash,body:has(.th-p-recruit) [data-wipe-flash].is-flash,html.th-p-recruit [data-wipe-flash].is-flash,.th-p-recruit [data-wipe-flash].is-flash,body:has(.th-p-faq) [data-wipe-flash].is-flash,html.th-p-faq [data-wipe-flash].is-flash,.th-p-faq [data-wipe-flash].is-flash,body:has(.th-p-info) [data-wipe-flash].is-flash,html.th-p-info [data-wipe-flash].is-flash,.th-p-info [data-wipe-flash].is-flash,body:has(.th-p-blog) [data-wipe-flash].is-flash,html.th-p-blog [data-wipe-flash].is-flash,.th-p-blog [data-wipe-flash].is-flash{animation:wipe-flash 1s ease-in-out 1 both} body:has(.th-p-index) section[data-thsw~="th-sw1"] a.hdr-cta:hover,html.th-p-index section[data-thsw~="th-sw1"] a.hdr-cta:hover,.th-p-index section[data-thsw~="th-sw1"] a.hdr-cta:hover,body:has(.th-p-index) a.hdr-cta[data-thsw~="th-sw1"]:hover,html.th-p-index a.hdr-cta[data-thsw~="th-sw1"]:hover,.th-p-index a.hdr-cta[data-thsw~="th-sw1"]:hover{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 10px 30px rgba(35,43,48,.12)!important} body:has(.th-p-index) [data-trace-line="a"].is-run,html.th-p-index [data-trace-line="a"].is-run,.th-p-index [data-trace-line="a"].is-run{animation:trace-a 1.9s cubic-bezier(.5,0,.5,1) 1 forwards} body:has(.th-p-index) .sp-sticky-cta,html.th-p-index .sp-sticky-cta,.th-p-index .sp-sticky-cta{display:flex} @media (min-width:1024px){body:has(.th-p-index) .sp-sticky-cta,html.th-p-index .sp-sticky-cta,.th-p-index .sp-sticky-cta{display:none!important}} @media (max-width:1023px){body:has(.th-p-index),html.th-p-index body{padding-bottom:56px}} body:has(.th-p-index) .cmp-grid,html.th-p-index .cmp-grid,.th-p-index .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:600px){body:has(.th-p-index) .cmp-grid,html.th-p-index .cmp-grid,.th-p-index .cmp-grid{grid-template-columns:1fr;gap:12px}} @media (max-width:1024px){body:has(.th-p-index) [data-trace],html.th-p-index [data-trace],.th-p-index [data-trace]{width:90%!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important}} @media (max-width:1024px){body:has(.th-p-index) .blog-outer,html.th-p-index .blog-outer,.th-p-index .blog-outer{padding-left:0!important;padding-right:0!important}} @media (max-width:600px){body:has(.th-p-index) h1,html.th-p-index h1,.th-p-index h1,body:has(.th-p-index) h2,html.th-p-index h2,.th-p-index h2{letter-spacing:-.01em}} @media (max-width:600px){body:has(.th-p-index) h2[data-wipe-order="1"],html.th-p-index h2[data-wipe-order="1"],.th-p-index h2[data-wipe-order="1"]{font-size:clamp(1.5rem,7.6vw,2.2rem)!important;max-width:none!important}} @media (max-width:600px){body:has(.th-p-index) section>div[data-thsw~="th-sw2"],html.th-p-index section>div[data-thsw~="th-sw2"],.th-p-index section>div[data-thsw~="th-sw2"]{padding-left:20px!important;padding-right:20px!important}} @media (max-width:600px){body:has(.th-p-index) section[data-thsw~="th-sw3"],html.th-p-index section[data-thsw~="th-sw3"],.th-p-index section[data-thsw~="th-sw3"]{padding-top:44px!important;padding-bottom:44px!important}} @media (max-width:900px){body:has(.th-p-work) .sites-grid,html.th-p-work .sites-grid,.th-p-work .sites-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media (max-width:600px){body:has(.th-p-work) h2+p[data-thsw~="th-sw4"],html.th-p-work h2+p[data-thsw~="th-sw4"],.th-p-work h2+p[data-thsw~="th-sw4"]{padding-left:30px!important}} @media (max-width:600px){body:has(.th-p-work) .sites-grid,html.th-p-work .sites-grid,.th-p-work .sites-grid{grid-template-columns:1fr!important}} @media (max-width:900px){body:has(.th-p-workabout) .flow-wrap,html.th-p-workabout .flow-wrap,.th-p-workabout .flow-wrap{grid-template-columns:1fr!important}} @media (max-width:900px){body:has(.th-p-workabout) .flow-photo,html.th-p-workabout .flow-photo,.th-p-workabout .flow-photo{position:relative!important;top:auto!important;height:clamp(240px,52vw,420px)!important}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl,html.th-p-workabout .cmp-tbl,.th-p-workabout .cmp-tbl{grid-template-columns:1fr!important;gap:16px}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl>div[data-thsw~="th-sw5"],html.th-p-workabout .cmp-tbl>div[data-thsw~="th-sw5"],.th-p-workabout .cmp-tbl>div[data-thsw~="th-sw5"]{display:grid!important;gap:0;border:1px solid #E3DED7;border-radius:14px;overflow:hidden;background:#fff}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl>div:nth-child(2),html.th-p-workabout .cmp-tbl>div:nth-child(2),.th-p-workabout .cmp-tbl>div:nth-child(2),body:has(.th-p-workabout) .cmp-tbl>div:nth-child(3),html.th-p-workabout .cmp-tbl>div:nth-child(3),.th-p-workabout .cmp-tbl>div:nth-child(3){display:none}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl .cmp-key,html.th-p-workabout .cmp-tbl .cmp-key,.th-p-workabout .cmp-tbl .cmp-key{border-radius:0!important;background:#26292B!important;color:#fff!important;padding:12px 16px!important;font-size:.8rem!important}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl .cmp-a,html.th-p-workabout .cmp-tbl .cmp-a,.th-p-workabout .cmp-tbl .cmp-a,body:has(.th-p-workabout) .cmp-tbl .cmp-b,html.th-p-workabout .cmp-tbl .cmp-b,.th-p-workabout .cmp-tbl .cmp-b{border:0!important;border-radius:0!important;padding:14px 16px 14px 92px!important;position:relative}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl .cmp-a,html.th-p-workabout .cmp-tbl .cmp-a,.th-p-workabout .cmp-tbl .cmp-a{background:#F2F5F8!important;border-bottom:1px solid #E3DED7!important}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl .cmp-b,html.th-p-workabout .cmp-tbl .cmp-b,.th-p-workabout .cmp-tbl .cmp-b{background:#FFF6EF!important}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl .cmp-a::before,html.th-p-workabout .cmp-tbl .cmp-a::before,.th-p-workabout .cmp-tbl .cmp-a::before,body:has(.th-p-workabout) .cmp-tbl .cmp-b::before,html.th-p-workabout .cmp-tbl .cmp-b::before,.th-p-workabout .cmp-tbl .cmp-b::before{position:absolute;left:16px;top:14px;font-size:.7rem;font-weight:700;letter-spacing:.06em;line-height:1.9}} @media (max-width:900px){body:has(.th-p-recruit) .lead-1line,html.th-p-recruit .lead-1line,.th-p-recruit .lead-1line{white-space:normal!important;max-width:34em!important;text-wrap:pretty}} @media (max-width:600px){body:has(.th-p-recruit) .flow-ol>li,html.th-p-recruit .flow-ol>li,.th-p-recruit .flow-ol>li{text-align:center}} @media (max-width:600px){body:has(.th-p-recruit) .flow-ol>li>p,html.th-p-recruit .flow-ol>li>p,.th-p-recruit .flow-ol>li>p{text-align:center!important}} @media (max-width:600px){body:has(.th-p-recruit) .req-dl,html.th-p-recruit .req-dl,.th-p-recruit .req-dl,body:has(.th-p-beginner) .req-dl,html.th-p-beginner .req-dl,.th-p-beginner .req-dl,body:has(.th-p-experienced) .req-dl,html.th-p-experienced .req-dl,.th-p-experienced .req-dl,body:has(.th-p-info) .req-dl,html.th-p-info .req-dl,.th-p-info .req-dl{grid-template-columns:1fr!important}} @media (max-width:600px){body:has(.th-p-recruit) .req-dl>dt,html.th-p-recruit .req-dl>dt,.th-p-recruit .req-dl>dt{border-right:0!important;padding-bottom:2px!important}} @media (max-width:600px){body:has(.th-p-beginner) .req-dl>dt,html.th-p-beginner .req-dl>dt,.th-p-beginner .req-dl>dt,body:has(.th-p-info) .req-dl>dt,html.th-p-info .req-dl>dt,.th-p-info .req-dl>dt{border-bottom:0!important;padding:12px 20px!important}} @media (max-width:600px){body:has(.th-p-experienced) .req-dl>dt,html.th-p-experienced .req-dl>dt,.th-p-experienced .req-dl>dt{border-right:0!important;padding-top:8px!important;padding-bottom:6px!important;text-align:center}} @media (max-width:600px){body:has(.th-p-recruit) .req-dl>dd,html.th-p-recruit .req-dl>dd,.th-p-recruit .req-dl>dd{padding-top:0!important}} @media (max-width:600px){body:has(.th-p-beginner) .req-dl>dd,html.th-p-beginner .req-dl>dd,.th-p-beginner .req-dl>dd,body:has(.th-p-info) .req-dl>dd,html.th-p-info .req-dl>dd,.th-p-info .req-dl>dd{padding:6px 20px 12px!important}} @media (max-width:600px){body:has(.th-p-experienced) .req-dl>dd,html.th-p-experienced .req-dl>dd,.th-p-experienced .req-dl>dd{padding-top:10px!important;padding-bottom:10px!important}} body:has(.th-p-hataraki) .staff-photo,html.th-p-hataraki .staff-photo,.th-p-hataraki .staff-photo{min-height:0!important;align-self:start;aspect-ratio:4/3;margin:clamp(16px,2.4vw,24px);border-radius:10px} @media (min-width:901px){body:has(.th-p-hataraki) .staff-photo-r,html.th-p-hataraki .staff-photo-r,.th-p-hataraki .staff-photo-r{order:2}} @media (min-width:901px){body:has(.th-p-hataraki) .staff-card:has(.staff-photo-r),html.th-p-hataraki .staff-card:has(.staff-photo-r),.th-p-hataraki .staff-card:has(.staff-photo-r){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important}} @media (max-width:900px){body:has(.th-p-hataraki) .staff-card,html.th-p-hataraki .staff-card,.th-p-hataraki .staff-card{grid-template-columns:1fr!important}} @media (max-width:900px){body:has(.th-p-hataraki) .staff-photo,html.th-p-hataraki .staff-photo,.th-p-hataraki .staff-photo{aspect-ratio:16/9;margin:0!important;border-radius:0!important}} @media (max-width:900px){body:has(.th-p-hataraki) .oneday-wrap,html.th-p-hataraki .oneday-wrap,.th-p-hataraki .oneday-wrap{grid-template-columns:1fr!important}} @media (max-width:900px){body:has(.th-p-hataraki) .oneday-photo,html.th-p-hataraki .oneday-photo,.th-p-hataraki .oneday-photo{position:relative!important;top:auto!important;height:clamp(300px,64vw,480px)!important;max-width:none!important;justify-self:stretch!important}} @media (max-width:700px){body:has(.th-p-reason) .rev-photo,html.th-p-reason .rev-photo,.th-p-reason .rev-photo{order:2}} @media (max-width:900px){body:has(.th-p-beginner) .support-grid,html.th-p-beginner .support-grid,.th-p-beginner .support-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media (max-width:600px){body:has(.th-p-beginner) .support-grid,html.th-p-beginner .support-grid,.th-p-beginner .support-grid{grid-template-columns:1fr!important}} body:has(.th-p-info) .req-dl>dt,html.th-p-info .req-dl>dt,.th-p-info .req-dl>dt,body:has(.th-p-info) .req-dl>dd,html.th-p-info .req-dl>dd,.th-p-info .req-dl>dd{display:flex;flex-direction:column;justify-content:center} @media (max-width:600px){body:has(.th-p-info) .access-note,html.th-p-info .access-note,.th-p-info .access-note{white-space:normal!important;font-size:.875rem!important}} /* ===== keyframes ===== */ @keyframes marquee-cta{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes wipe-flash{0%{text-shadow:none}35%{text-shadow:0 0 10px rgba(255,255,255,.9),0 0 24px rgba(255,255,255,.55)}100%{text-shadow:none}} @keyframes trace-a{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(-1 * var(--per,1000px))}} /* ============================================================ ランタイムの静的化 受領は Claude Design のランタイム（support.js / image-slot.js）が state から style を 作って当てていた。ランタイムを廃止するので、同じ結果をクラスとCSSで固定する。 ・JSが動かない場合の見え方も同時に決めている（R-4：本文が消えないこと） ============================================================ */ /* SPドロワー（受領は state で display を出し分けていた） */ .th-drawer{display:none;} .th-drawer.is-open{display:block;} /* JSが動かないときはドロワーを開いたまま出す＝スマホでナビが使えなくならないように。 ★!important が必須。ハンバーガーは平常時のインラインstyleに display:flex を持っているので クラスだけでは消せず「押しても何も起きないボタン」が残る。 */ html:not(.js) .th-drawer{display:block !important;} html:not(.js) [data-th-burger]{display:none !important;} /* 未撮影の写真枠（受領の空 image-slot）。何が入る枠かを読めるようにしてある＝申し送り D-1 */ .th-emptyslot{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;min-height:160px;padding:24px;box-sizing:border-box;background:repeating-linear-gradient(135deg,#F3EAE0 0 12px,#EFE4D5 12px 24px);border:2px dashed #D8C7B4;color:#8C7B69;font-size:.8rem;font-weight:700;line-height:1.7;} /* summary の既定マーカーを消す（受領は list-style:none だけ＝Safari では三角が残る） */ summary::-webkit-details-marker{display:none;} /* ── R-27：::before / ::after の content は AddCssInfo で落ちるので実要素へ昇格した ── 受領の該当規則（このCSSからは外してある）: @media (max-width:767px) .ft-nav>a::after{content:"›";color:#E4681E;font-size:1.05rem;line-height:1} @media (max-width:600px) .cmp-tbl .cmp-a::before{content:"建築型枠";color:#1B5EA8} @media (max-width:600px) .cmp-tbl .cmp-b::before{content:"土木型枠";color:#C4551A} 昇格先は HTML 側の span（.th-ftchev / .th-cmplbl）。既定は display:none にして、 元のメディアクエリの中だけで表示する（R-27「打ち消しは display:none で作り直す」）。 */ .th-ftchev,.th-cmplbl{display:none;} @media (max-width:767px){.ft-nav>a>.th-ftchev{display:inline;color:#E4681E;font-size:1.05rem;line-height:1;}} @media (max-width:600px){body:has(.th-p-workabout) .cmp-tbl .cmp-a>.th-cmplbl,html.th-p-workabout .cmp-tbl .cmp-a>.th-cmplbl,.th-p-workabout .cmp-tbl .cmp-a>.th-cmplbl,body:has(.th-p-workabout) .cmp-tbl .cmp-b>.th-cmplbl,html.th-p-workabout .cmp-tbl .cmp-b>.th-cmplbl,.th-p-workabout .cmp-tbl .cmp-b>.th-cmplbl{display:block;position:absolute;left:16px;top:14px;font-size:.7rem;font-weight:700;letter-spacing:.06em;line-height:1.9;} body:has(.th-p-workabout) .cmp-tbl .cmp-a>.th-cmplbl-a,html.th-p-workabout .cmp-tbl .cmp-a>.th-cmplbl-a,.th-p-workabout .cmp-tbl .cmp-a>.th-cmplbl-a{color:#1B5EA8;} body:has(.th-p-workabout) .cmp-tbl .cmp-b>.th-cmplbl-b,html.th-p-workabout .cmp-tbl .cmp-b>.th-cmplbl-b,.th-p-workabout .cmp-tbl .cmp-b>.th-cmplbl-b{color:#C4551A;}} /* ── [style*="…"] セレクタの無害化（教訓 dc-runtime-style-attr-selector-needs-cssom-normalized-match）── 受領CSSは下の文字列でインラインstyleを見ていたが、dc-runtime が style をCSSOMで再直列化する （コロン・カンマの直後に空白が入る）ため **受領プレビューでは1件も当たっていない**＝ 承認された見た目に効いていない。納品HTMLは生テキストを持つので放置すると納品側でだけ 当たり始めるため、当たらないマーカー属性へ振り替えて「効かない」状態を保っている。 効かせたい場合は意図的な差分として申し送りに書いてから data-thsw を付けること: th-sw1 ← [style*="background:#E4681E"]（受領で0件） th-sw2 ← [style*="max-width:1180px"]（受領で0件） th-sw3 ← [style*="clamp(48px,7vw,96px)"]（受領で0件） th-sw4 ← [style*="padding-left:clamp(38px"]（受領で0件） th-sw5 ← [style*="display:contents"]（受領で0件） ------------------------------------------------------------ */ /* インラインの transition / animation はCueZillaが保存時に落とすためクラスへ退避してある （教訓 cuezilla-strips-inline-animation-transition。宣言の中身は受領のまま） */ .th-t1{transition:transform .42s cubic-bezier(.65,0,.35,1);} .th-t2{animation:marquee-cta 18s linear infinite;} .th-t3{transition:transform 1.15s cubic-bezier(.76,0,.24,1);} .th-t4{transition:box-shadow .2s,transform .2s;} /* 装飾ゴースト文字のスライドイン。初期の非表示は html.js の内側だけに置く ＝JSが動かないときは最初から見える（R-4） */ html.js .th-sx1{transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .8s ease;transform:translateX(-60%);opacity:0;} /* 受領の style-hover / style-focus をクラスへ退避。同じプロパティが平常時のインラインstyleにも あるため、!important でないと1つも効かない（教訓 style-hover-class-needs-important-to-beat-inline-style） */ .th-hv1.th-hv1.th-hv1:hover{background:#FBEADD !important;} .th-hv2.th-hv2.th-hv2:hover{color:#fff !important;} .th-hv3.th-hv3.th-hv3:hover{background:rgba(255,255,255,.14) !important;} .th-hv4.th-hv4.th-hv4:hover{border-color:#E4681E !important;color:#C4551A !important;} .th-hv5.th-hv5.th-hv5:hover{box-shadow:0 10px 30px rgba(35,43,48,.12) !important;transform:translateY(-3px) !important;} .th-hv6.th-hv6.th-hv6:hover{background:#E4681E !important;color:#fff !important;} .th-hv7.th-hv7.th-hv7:hover{border-color:#E4681E !important;} .th-hv8.th-hv8.th-hv8:focus-visible{border-color:#E4681E !important;} .th-hv9.th-hv9.th-hv9:hover{background:#E4681E !important;} /* ============================================================ CueZillaが自動で入れるパンくずの非表示（R-10a）— ★全ページ一律 指示: 2026-09-10（組立スタッフ）。実機で「トップにも出る」「ブログ／施工実績の **記事詳細**にも出る」と報告があり、**サイト全体で出さない**方針に確定した。 ・下層の固定ページは受領デザインが自前パンくずを持つ（class の無い nav要素）ので二重になる ・トップと記事詳細は、そもそもCueZilla既定の見た目のパンくずを出したくない ★セレクタは1本・条件なし。以前は body:has(.th-p-*) でページを絞っていたが、 :has() のサニタイズ／BODY内JS未貼付／記事詳細に納品ブロックが無いこと、の3つが どれも効かない理由になり得た。条件を外して**依存ゼロ**にしてある。 ★採番非依存にするため .p-breadcrumb も併記（CueZillaは partsNNN_breadcrumb p-breadcrumb c-breadcrumb の3クラスを付ける。採番はサイトを作り直すと変わる）。 ★自前パンくずは class を持たない nav要素なので、この規則には当たらない（納品HTMLで実測0件）。 【戻したいとき】記事詳細だけ自動パンくずを出したい場合は、この規則を消すのではなく 下の1行を足す（納品ブロックが無いページ＝記事詳細・送信完了・404 だけで復活する）: body:not(:has(.th-page)) .parts231_breadcrumb{display:block !important;} ============================================================ */ .parts231_breadcrumb, .p-breadcrumb{display:none !important;} /* ===== 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 に定義があればそれを使用） --- KEEP: ★既定を明朝にしない（2026-08-31 ディレクター判断）。旧既定は display と numeric が `"Noto Serif JP","Yu Mincho",serif` / `"EB Garamond","Noto Serif JP",serif` ＝**明朝**で、 案件が `--font-*` を渡し忘れると**動的ページ（ブログ・施工実績）だけが明朝で出る**。 実測 S00757 スマイルカミオン: 記事タイトル・抜粋・タグ（display）7要素＋20要素、日付（numeric）各4要素が明朝になり、 ディレクター指摘「ブログページに明朝が活用されていますが、サイト全体のフォントで統一してください」を受けた。 ★渡し忘れは"案件のミス"だが、**気づけるのが公開直前の目視だけ**で、静的ページを見ている限り絶対に露見しない。 ＝**既定が事故を作っていた**ので、既定側を直す。方針は「今後進める案件がサイトに使用しているフォントで 反映される仕様にする」（ディレクター 2026-08-31）。 ★意図して明朝にしたい案件は、これまでどおり `--font-display` 等を渡せばそのまま効く（機構は不変）。 ★numeric は日付・英字ラベル用なので、和文本文より英字の顔が合う。sans を既定にしつつ英字を先頭へ置く。 ★既存の納品済み案件は影響を受けない（納品CSSは書き出し時にベイク済みで、再エクスポートしない限り変わらない）。 */ --dyn-font-display: var(--font-display, "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif); --dyn-font-body: var(--font-body, "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif); --dyn-font-numeric: var(--font-numeric, "Helvetica Neue",Arial,"Noto Sans JP",sans-serif); /* /KEEP */ /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 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; } /* KEEP: R-32 _pagenation 系の中の .pagination_num/_prev/_next は a を包む外箱（span）。上の(A)や、素の span を選ぶ生成CSSが付ける border・height:40px が中の a の枠と二重になり、高さもズレる（O01931 ほか毎回発生。テーマ自体は外箱に枠を付けない＝実機で確認）。外箱の枠と高さを消して a の箱だけを見せる */ [class*="_pagenation"] .pagination_num, [class*="_pagenation"] .pagination_prev, [class*="_pagenation"] .pagination_next{ border:none !important; height:auto !important; } /* /KEEP */ .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; } /* ============================================================ §4-b ブログ枠パーツ（parts131415_blog 系）＝ 内側でBootstrapが生きている型 ------------------------------------------------------------ §4 は parts222/225/228 の `_post_list` / `_post_wrap` 接尾辞を前提にしている。 parts131415_blog 系は接尾辞が違い（`.row.row-cols-lg-3 > .col > .card`）、§4のセレクタが **1つも届かない**。そのため案件ごとに同じCSSを書き直す状態になっていた。 教訓: 70_運用ルール/デザイン教訓/cms-part-bootstrap-grid-collapses-cards.md 70_運用ルール/デザイン教訓/cms-part-heading-typography-override.md （承認: 2026-09-01「A・B・C ＋ I ＋ G/H（受領チェック1項目）」） (a) カードが列幅のさらに1/3に潰れる（独立3案件で真因一致: S02150・O01540・S00459） パーツが吐く `.row.row-cols-1.row-cols-sm-2.row-cols-lg-3` は Bootstrap の `.row-cols-lg-3 > *{flex:0 0 auto; width:33.3333%}` が生きたまま。案件側で `.row` を grid 化しても **grid の子に残った width:33.3333% が「列幅の33.3%」として再び効く**ため、 341px の列の中でカードが 114px（サムネイル 52px）まで潰れる（実測 S02150 2026-08-25）。 ★崩れるのは実機だけで、受領データを単体で開くと正常に見える＝**受領物を見ている限り 絶対に気づけない**。だから案件ごとの気づきに任せず skin の既定にする。 → §4 の `_post_list` と同じ扱い（auto-fill グリッド＋子の幅指定を落とす）を対にして当てる。 **grid 化と子の無効化は必ずセット**。片方だけだと、grid 化なしで幅を落とせば1列に伸び、 幅を落とさず grid 化すれば上記の 1/3 潰れが起きる。 ★施工実績枠には当たらない。あちらは `.content.d-flex`（`.row` を持たない）で、 flex の子に幅を当てると3枚が横にあふれる。クラス名では枠を判別できない （CMSが `parts131415_blog_DKhwGnz7DM` のように乱数の接尾辞を付け、作り直すと変わる）ため、 **`.row` を持つか＝中身で分岐している**。 */ [class*="parts131415_blog"] .row{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; } [class*="parts131415_blog"] .row > *{ width:auto !important; max-width:none !important; min-width:0 !important; flex:none !important; margin:0 !important; padding:0 !important; } /* (b) パーツ見出しがCMS既定の書体・色のまま出てブランドタイポから浮く（独立2案件: S00459・S01926） レイアウト（配置・カラム）は案件CSSで整えられる一方、**パーツ自身が生成する見出し要素の 書体・色はパーツ内部に付いているため見落とされやすい**。結果「配置は整っているのに見出しだけ フォントが違う・色が違う」という部分的な浮きが残る。 実測: S00459 `.design-parts-11 .parts-title` が色 #0E6FB8 のまま／ S01926 `.parts131415_blog_title_wrap .title` が明朝のまま（一度PC幅だけ直して 「全端末で適用」と差し戻された＝BP単位の個別対応では同じ穴が別BPで再発する）。 → §4 の `_post_title` / §5 の `_sidebar_post_title` と同じ扱いで、**書体と色だけ**を寄せる。 ★サイズ・寄せは案件ごとのデザイン判断なので skin では触らない（§4の既存方針と同じ）。 そちらは 30_コード生成/AI生成指示書_CueZilla.md 側の手順で担保する。 ★全BP共通で当たる（メディアクエリの外に置いてある）。 ★実測で確認できた2クラスだけに絞ってある。`.card-title` / `.card-text` は当てていない （O01540 では `.card-title` が「濃緑地に白文字のチップ」＝見出しではなくラベルとして 使われており、`--dyn-heading` を当てると読めなくなる）。パーツが増えたら実機で確認して追記する。 */ [class*="_blog_title_wrap"] .title, [class*="design-parts-"] .parts-title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; } /* ============================================================ §4-c テーマが一覧サムネに掛ける「固定の高さ」を打ち消す（番号非依存） ------------------------------------------------------------ ★§4 の意図が theme_default に**黙って負けていた**のを直すぶん（2026-09-11 実測）。 何が起きていたか: §4 は `[class*="_post_img"]{ aspect-ratio:16/10 }` でサムネを等寸化する設計だが、 theme_default は `.parts228_post_wrap .parts228_post_img{ height:240px }` と `… img{ max-height:240px }` を持つ。**セレクタの詳細度は テーマ(0,2,0) > skin(0,1,0)** なので、 skin の aspect-ratio は計算に使われず**常にテーマの240pxで確定**していた。 実測（local-sandbox・theme+skin のみ・案件CSS無し）: 打ち消し前: .parts228_post_img の computed height = 240px（aspect-ratio:16/10 は設定されているのに無効） 打ち消し後: 233px（＝列幅375px ÷ 1.6）＝**skin 自身の設計どおりになる** ＝「skin を採用しているのにサムネだけテーマの寸法」という状態で、案件側は毎回 `.parts228_post_wrap .parts228_post_img img{ max-height:unset; height:200px }` を手で書いていた （実測: 収穫ログで4案件が同じ規則を貼っていた。機械化台帳 B1）。 線引き（§4 の既存方針と同じ。ここを広げないこと）: ・**打ち消すだけ**＝テーマが持ち込む固定値を外して §4 の aspect-ratio に戻す。 ・**寸法の具体値と色は入れない**。案件が貼っていた `height:200px` `margin-bottom:45px` `background:#FFFFFF` は**デザイン判断**なので案件CSSに残す（値は案件ごとに違う）。 ★入れなかったもの（実測して落とした・同じ検討を繰り返さないため）: `[class*="_sidebar"]{ max-width:none !important }`（案件が4件で手貼りしていた規則）は **skin に入れてはいけない**。theme_default は `.parts222_sidebar{ max-width:28.179%; width:100% }` と対で持っており、max-width だけ外すと width:100% が生きて**2カラムが崩れる**。 実測（local-sandbox）: main 780px + sidebar 333px → **main 590px + sidebar 590px**。 サイドバー幅は案件ごとのレイアウト判断なので、案件CSSで width とセットで指定すること。 ============================================================ */ [class*="_post_wrap"] [class*="_post_img"]{ height:auto !important; } /* テーマの height:240px を外し §4 の aspect-ratio に戻す */ [class*="_post_wrap"] [class*="_post_img"] img{ max-height:none !important; } /* 同 max-height:240px の頭打ちを外す（§4 の height:100% を効かせる） */ /* ============================================================ §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; } /* ===== 25_追補-designer-add.css ===== */ /* ============================================================ S01439 大邦建設株式会社 — 追補CSS（デザイナー同梱 add.css の写し・無改変） 出典: 受領データ/add.css 結合順を skin の後ろにするためファイル名に「追補」を入れている（convert.mjs の cssPrio）。 教訓 designer-add-css-covering-only-one-part-needs-skin-plus-tsuiho-order: この add.css は 新着情報（design-parts-52）と ブログ枠（parts131415_blog）しか書いていない。 施工実績一覧・フォーム・記事詳細・パンくずは skin が受け持つので skin は外していない。 skin は全宣言 !important なので、同詳細度だと結合順で skin が勝つ → この追補を後ろへ回す。 ★中身は1文字も変えていない。色の食い違いだけ 29_override.css で当て直してある。 ============================================================ */ /* KEEP: デザイナー成果物の写し。実パーツのクラス構造・省略表示・BPの正本なので 作り直さない・削らない（教訓 designer-add-css-palette-can-be-stale-…）。 */ /* === add.css 貼り付け ここから === */ /* ============================================================ 1. 新着情報（NEWS帯） design-parts-52 系 ※固有IDサフィックスに依存しないセレクタで指定 ============================================================ */ [class*="design-parts-52"].bg-color, [class*="design-parts-52"] { background: #F7F3EE !important; /* 元直値 #dddddd を上書き */ } [class*="design-parts-52"] .container { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 0 18px !important; } /* ラベルが行数分に伸びるのを防ぐ（stretch にしない） */ [class*="design-parts-52"] .content { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 14px 0 !important; } [class*="design-parts-52"] h4.banner-area { width: 100% !important; margin: 0 !important; background: #E4681E !important; /* 元直値 #bf172e を上書き */ color: #ffffff !important; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important; font-size: 0.76rem !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-align: center !important; padding: 10px 18px !important; border-radius: 5px 5px 0 0 !important; } [class*="design-parts-52"] ul.mb-0 { width: 100% !important; list-style: none !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #E3DED7 !important; border-top: 0 !important; border-radius: 0 0 5px 5px !important; } [class*="design-parts-52"] ul.mb-0 > li { display: flex !important; align-items: center !important; min-height: 60px !important; border-bottom: 1px solid #EFEBE5 !important; } [class*="design-parts-52"] ul.mb-0 > li:last-child { border-bottom: 0 !important; } [class*="design-parts-52"] ul.mb-0 > li > a { display: flex !important; align-items: center !important; width: 100% !important; min-height: 60px !important; padding: 12px 18px !important; text-decoration: none !important; color: #26292B !important; } [class*="design-parts-52"] ul.mb-0 > li > a:hover, [class*="design-parts-52"] ul.mb-0 > li > a:focus-visible { background: #FBEADD !important; } [class*="design-parts-52"] ul.mb-0 > li > a:focus-visible { outline: 3px solid #E4681E !important; outline-offset: -3px !important; } [class*="design-parts-52"] .parts-52-textarea { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 20px !important; } [class*="design-parts-52"] .parts-52-textarea span.date { color: #5B6266 !important; font-size: 0.82rem !important; font-variant-numeric: tabular-nums !important; min-width: 6.5em !important; } [class*="design-parts-52"] .parts-52-textarea span.d-inline-block { font-size: 0.95rem !important; font-weight: 500 !important; line-height: 1.7 !important; } /* PC（992px以上）：ラベルを左・記事を右の横1行に */ @media (min-width: 992px) { [class*="design-parts-52"] .content { flex-direction: row !important; align-items: center !important; gap: 0 !important; } [class*="design-parts-52"] h4.banner-area { width: 148px !important; flex: 0 0 148px !important; min-height: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border-radius: 5px 0 0 5px !important; } [class*="design-parts-52"] ul.mb-0 { flex: 1 1 auto !important; border-top: 1px solid #E3DED7 !important; border-left: 0 !important; border-radius: 0 5px 5px 0 !important; } } /* ============================================================ 2. BLOG（記事カード3列） parts131415_blog 系 ============================================================ */ [class*="parts131415_blog"] { background: #F7F3EE !important; /* bg-img の元サイト固有背景画像を打ち消す */ background-image: none !important; padding: clamp(56px, 8vw, 96px) 0 !important; } [class*="parts131415_blog"] .container-lg { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 0 20px !important; } [class*="parts131415_blog"] .parts131415_blog_title_wrap { margin: 0 0 clamp(28px, 4vw, 44px) !important; text-align: center !important; } [class*="parts131415_blog"] .parts131415_blog_title_wrap h2 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important; font-size: clamp(1.4rem, 5vw, 2.1rem) !important; font-weight: 900 !important; letter-spacing: 0.1em !important; margin: 0 0 10px !important; color: #26292B !important; /* 元直値 #ffffff を上書き */ } [class*="parts131415_blog"] .parts131415_blog_title_wrap p { margin: 0 !important; font-size: 0.92rem !important; color: #5B6266 !important; letter-spacing: 0.04em !important; } [class*="parts131415_blog"] .card { background: #ffffff !important; border: 1px solid #E3DED7 !important; border-radius: 12px !important; overflow: hidden !important; height: 100% !important; transition: box-shadow 0.2s, transform 0.2s !important; } [class*="parts131415_blog"] .card:hover, [class*="parts131415_blog"] .card:focus-within { box-shadow: 0 16px 40px rgba(35, 43, 48, 0.13) !important; transform: translateY(-3px) !important; } [class*="parts131415_blog"] .card-body { padding: 22px !important; } [class*="parts131415_blog"] h5.card-title { margin: 0 0 14px !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; color: #C4551A !important; text-align: center !important; } [class*="parts131415_blog"] .card-body > a { text-decoration: none !important; color: #26292B !important; display: block !important; } [class*="parts131415_blog"] .card-body > a:focus-visible { outline: 3px solid #E4681E !important; outline-offset: 3px !important; } [class*="parts131415_blog"] p.card-text { margin: 0 0 16px !important; font-size: 1.02rem !important; font-weight: 700 !important; line-height: 1.75 !important; color: #26292B !important; min-height: 3.5em !important; } [class*="parts131415_blog"] .parts131415_blog_thumbnail { height: 240px !important; background: #E8E2DA !important; border-radius: 8px !important; overflow: hidden !important; } [class*="parts131415_blog"] .parts131415_blog_thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } @media (max-width: 767px) { [class*="parts131415_blog"] .parts131415_blog_thumbnail { height: 205px !important; } } @media (min-width: 768px) and (max-width: 991px) { [class*="parts131415_blog"] .parts131415_blog_thumbnail { height: 215px !important; } } @media (prefers-reduced-motion: reduce) { [class*="parts131415_blog"] .card { transition: none !important; } [class*="parts131415_blog"] .card:hover { transform: none !important; } } /* === add.css 貼り付け ここまで === */ /* /KEEP */ /* ===== 29_override.css ===== */ /* ============================================================ S01439 大邦建設株式会社 — override.css（結合順の最後／R-30） 生成: _作業/decompose.mjs 結合順: 20_site.css → 21_cuezilla-skin.css → 25_追補-designer-add.css → 29_override.css ============================================================ */ /* ── CueZillaテーマCSSの打ち消し（実機でしか出ない崩れ）────────── ① テーマの html,body{height:100%} が sticky ヘッダーを1画面で殺す （教訓 cuezilla-theme-html-body-height-100-kills-sticky・3案件で再現）。height:auto で打ち消す。 ② ★横はみ出しのガードで html に overflow-x を足さないこと（実測 2026-09-08）。 テーマは body{overflow-x:hidden} を持っている。html が visible のあいだは この値がビューポートへ伝播し、body 自身は visible のまま＝sticky は生きる。 ところが html 側に overflow-x:clip を足すと伝播が html で止まり、body が自分の overflow-x:hidden を使う＝body がスクロールコンテナ化して **sticky ヘッダーが死ぬ** （ローカル検証で header.top が -500px まで流れるのを実測。教訓 body-overflowx-hidden-kills-sticky）。 横はみ出しはテーマの body{overflow-x:hidden} と、各ページラッパーの overflow-x:clip で足りる。 */ html,body{height:auto !important;} body{min-height:100dvh;} /* ── skin のトークンのうち、テーマ色7値から導けないものだけ固定する（R-30）── */ :root{--dyn-radius:14px;--dyn-border:#E3DED7;--dyn-card-min:270px;--dyn-gap:24px;} /* ── 一覧カード・サイドバーがテーマ既定の max-width（％）で潰れるのを解除（R-28）── */ [class*="_post_list"] > [class*="_post_wrap"], [class*="_wrap"] > [class*="_main"], [class*="_wrap"] > [class*="_sidebar"]{max-width:none !important;width:auto !important;} /* ── ★同梱 add.css と受領HTMLで色が食い違う箇所の当て直し ──────────── デザイナー同梱の add.css は、どのページからも読み込まれていない（link が1本も無い）＝ 適用した状態を誰も見ていない。実際に承認された見た目は受領HTMLのインラインstyle側なので、 **色だけ**を受領HTMLの値へ戻す（構造・余白・BPは add.css が正本なので触っていない）。 教訓 designer-add-css-palette-can-be-stale-verify-against-received-html。 ★add.css の配色を採る判断になったら、このブロックごと削除すれば add.css の値に戻る。 食い違いの実測（左=add.css / 右=受領HTML）: NEWS帯の地 #F7F3EE / #F7EFE3 NEWS帯のラベル #E4681E / #26292B（角丸も 5px / 8px） BLOG帯の地 #F7F3EE / #F7EFE3 サムネの下地 #E8E2DA / #F7EFE3 区切り線 #EFEBE5 / （受領は li の区切り線を持たない＝ul の外枠だけ） ------------------------------------------------------------ */ section[class*="design-parts-52"].bg-color, section[class*="design-parts-52"]{background:#F7EFE3 !important;} [class*="design-parts-52"] .banner-area, [class*="design-parts-52"] h4.banner-area{background:#26292B !important;color:#fff !important;border-radius:8px 8px 0 0 !important;} @media (min-width:992px){[class*="design-parts-52"] .banner-area, [class*="design-parts-52"] h4.banner-area{border-radius:8px 0 0 8px !important;} [class*="design-parts-52"] ul.mb-0{border-radius:0 8px 8px 0 !important;}} [class*="design-parts-52"] ul.mb-0{border-radius:0 0 8px 8px !important;box-shadow:0 2px 6px rgba(35,43,48,.08) !important;} section[class*="parts131415_blog"]{background:#F7EFE3 !important;} section[class*="parts131415_blog"] [class*="_blog_thumbnail"]{background:#F7EFE3 !important;} /* ── ★接頭辞クラスの当たりすぎを止める（教訓 cuezilla-part-fixed-height-and-prefix-class-overmatch）── CueZillaのパーツは**子要素にも同じ接頭辞のクラス**を付ける（parts131415_blog_title_wrap / parts131415_blog_thumbnail）。同梱 add.css はセクション向けの padding / background を [class*="parts131415_blog"] に書いているので、**サムネ枠にも上下96pxの余白と地色が乗る**。 実測（ローカル検証 2026-09-08）: サムネ枠 240px のうち 192px が padding になり、 中の画像が 48px に潰れた。add.css は無改変で納品する方針なので、ここで子要素だけ打ち消す。 ★実機のセクションは section 要素（class に container-fluid と parts131415_blog_XXXX を持つ）なので、 セクション向けの宣言は section で絞るのが正しい形。 */ [class*="parts131415_blog"]:not(section){padding:0 !important;background-color:transparent !important;} [class*="parts131415_blog_thumbnail"]{background-color:#F7EFE3 !important;} /* 空の見出し枠（CMS未入力）の margin が枠を貫通して下と相殺するのを止める（同教訓 追記5） */ [class*="_blog_title_wrap"]{display:flow-root;} /* Bootstrap の負のガターマージンが grid 化後も残り、列が container の外へはみ出す（同教訓 追記4） */ section[class*="parts131415_blog"] .row{margin:0 !important;} /* ── ★新着情報パーツ（design-parts-52）は「高さ固定のバー」で吐かれる（同教訓 1）── CueZillaが採番付きで .design-parts-52_XXXX{height:60px} を出すため、受領デザインの 角丸ラベル＋60pxの行がはみ出す。4段すべて height:auto に戻し、最低高さだけ確保する。 */ section[class*="design-parts-52"], section[class*="design-parts-52"] .container, section[class*="design-parts-52"] .container .content, section[class*="design-parts-52"] .container .content .banner-area{height:auto !important;} @media (min-width:992px){section[class*="design-parts-52"] .container .content .banner-area{min-height:60px !important;}} /* ── 一覧ページ（/blog・/blog-ex/instance）の背景写真 ────────── 受領はトップと違い、一覧の帯に背景写真を敷いている。add.css は background-image:none で 消してしまうので、そのページだけ受領どおりに戻す。 */ body:has(.th-p-blog) section[class*="parts131415_blog"]{background:linear-gradient(rgba(247,239,227,.93),rgba(247,239,227,.93)),url(https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1531/blog-list-bg.webp) center/cover no-repeat #F7EFE3 !important;} body:has(.th-p-instance) section[class*="parts131415_blog"]{background:linear-gradient(rgba(247,239,227,.93),rgba(247,239,227,.93)),url(https://cdn.cuezilla-cms.com/cuezilla-cms-test11.net/images/1531/works-list-bg.webp) center/cover no-repeat #F7EFE3 !important;} /* ── 施工実績一覧に parts228 系を置いた場合の受け皿（クラス系統が変わっても崩れないように）── 受領は施工実績の枠にも parts131415_blog 系のクラスを当てているが、CueZilla の施工実績一覧の 既定は parts228 系。どちらが置かれるか組立時に決まるため、両方に同じ地色を当てておく。 */ body:has(.th-p-instance) [class*="parts228"], body:has(.th-p-instance) [class*="parts222"]{background:#F7EFE3 !important;} /* ── ★ヘッダーの「お問い合わせ」ボタン：ホバー時の文字色を #000000 にする ────── 指示: 2026-09-10（組立スタッフ）。**受領デザインからの意図的な差分**。 受領は index の helmet CSS で以下を当てていた（ホバーで白いスイープが走る前提）: a.hdr-cta[data-cta-light]:hover → color:#1B1B1B a.hdr-cta[data-cta-light]:hover>span:last-child → background:#1B1B1B / color:#fff ヘッダーのボタンは span が2つ（スイープ＋文字）しか無いため、**最後の span＝文字そのもの**に 黒いチップが乗る形だった。文字色だけ #000000 にすると黒地に黒文字で読めなくなるので、 文字用 span のチップ地も同時に外す（白いスイープの上に黒文字が乗る）。 ★ヘッダー限定（#th-header）。CTA帯・下層の同クラスのボタンは受領のまま。 */ #th-header a.hdr-cta:hover{color:#000000 !important;} #th-header a.hdr-cta:hover > span{color:#000000 !important;} #th-header a.hdr-cta:hover > span:last-child{background:transparent !important;color:#000000 !important;}