/* ===== 20_site.css ===== */ @charset "UTF-8"; /* ============================================================ S01973 合同会社ビサイホーム — site.css（受領 helmet の ＜style＞ ＋ 生成クラス） ・受領14ページの helmet CSS は**全ページ同一**だったので1本に集約した（順番は1行も変えていない）。 ・生成クラス .bhh＊ … style-hover / style-active の退避先（1宣言ずつ !important＝ クラスはインラインstyleに詳細度で勝てないため） .bhp＊ … style-before / style-after（疑似要素）を実要素へ昇格した先（R-27） .bhk＊ … CSS mask（data-URI 変数を参照。別オリジンCDNのURLでは効かない） .bha＊ … インラインの animation / transition の退避先（CueZillaが style 属性から除去する） ・受領CSSの ［style*="…"］ セレクタは data-bh-m のマーク属性へ振り替えた （dc-runtime が style 属性を再直列化するため、受領の生テキストのままでは当たらない）。 ・追加CSS欄はコメント内のタグ形の記号でMIMEが text/html に化ける（R-31）ので、 このファイルではタグ形の記号を書かない（全角で書く）。 ============================================================ */ /* R-18: ヘッダーは position:fixed。CueZillaが描くページ（施工実績/ブログ・問い合わせ・ 送信完了・404）の先頭が潜り込まないよう、skin が使う実高さを宣言する。 ★値はプレビュー（実機と同じ読込順で合成したもの）での実測。 PC（1265px幅）＝ ユーティリティ帯 38px ＋ ナビ行 92px ＝ 130px（縮む前の高い方を採る） SP（375px幅）＝ 64px */ :root{ --fixed-header-h: 130px; } @media (max-width:979px){ :root{ --fixed-header-h: 64px; } } /* R-10a: ページHTML内に受領のパンくずを持っているので、CueZilla自動パンくずは消す （消さないと下層ページでパンくずが2本出る）。 */ .parts231_breadcrumb{ display:none !important; } /* ---- 受領 helmet の ＜style＞（14ページ共通・元の順のまま） ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; } body { margin: 0; color: #2B3742; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; font-size: 16px; line-height: 1.95; background-color: #FBF6EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"); -webkit-font-smoothing: antialiased; overflow-x: hidden; text-wrap: pretty; } a { color: #3E8CB3; text-decoration: none; transition: color .3s ease, opacity .3s ease; } a:hover { color: #C1755A; } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #C1755A; outline-offset: 3px; } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; font-weight: 500; margin: 0; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } .en-script { font-family: "Nothing You Could Do", cursive; font-weight: 400; } @keyframes bisai-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes bisai-fadein { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes bisai-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(14px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } @media (min-width: 980px){ .site-header__utility,.site-header__inner,.site-header__logoslot, .site-header__logo,.site-header__circle,.site-header__nav a, .site-header__nav a svg,.site-header__logo img{ transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .26s ease, padding .38s cubic-bezier(.4,0,.2,1),gap .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1),height .38s cubic-bezier(.4,0,.2,1), bottom .38s cubic-bezier(.4,0,.2,1),min-height .38s cubic-bezier(.4,0,.2,1); } .site-header__utility{max-height:44px;opacity:1;overflow:hidden} .site-header[data-compact="1"] .site-header__utility{max-height:0 !important;opacity:0 !important} .site-header[data-compact="1"] .site-header__nav a svg{height:0 !important;opacity:0 !important} .site-header[data-compact="1"] .site-header__nav > a, .site-header[data-compact="1"] .site-header__group > a{gap:0 !important;min-height:26px !important} .site-header[data-compact="1"] .site-header__logoslot{height:34px !important} .site-header[data-compact="1"] .site-header__nav{align-items:center !important} .site-header[data-compact="1"] .site-header__inner{align-items:center !important;padding-top:9px !important;padding-bottom:9px !important} .site-header[data-compact="1"] .site-header__logo{width:88px !important;height:88px !important;bottom:-44px !important} .site-header[data-compact="1"] .site-header__logo img{width:84% !important} .site-header[data-compact="1"] .site-header__circle{width:170px !important;height:170px !important;bottom:-50px !important} @media (prefers-reduced-motion: reduce){ .site-header__utility,.site-header__inner,.site-header__logoslot, .site-header__logo,.site-header__circle,.site-header__nav a, .site-header__nav a svg,.site-header__logo img{transition:none} } } @keyframes bisai-twinkle { 0%, 100% { transform: scale(.82) rotate(0deg); opacity: .45; } 50% { transform: scale(1.12) rotate(12deg); opacity: 1; } } @media (prefers-reduced-motion: reduce){ [data-bh-m~="m1"]{ animation: none !important; } } h1, h2, h3, blockquote { word-break: auto-phrase; line-break: strict; text-wrap: pretty; } p, li, dt, dd, th, td, summary, figcaption, label { word-break: auto-phrase; line-break: strict; text-wrap: pretty; } @media (max-width: 560px) { [data-bh-m~="m3"] p, [data-bh-m~="m3"] li, p[data-bh-m~="m3"], li[data-bh-m~="m3"] { text-align: left !important; } h1 span[data-bh-m~="m2"], h2 span[data-bh-m~="m2"], h3 span[data-bh-m~="m2"], p span[data-bh-m~="m2"] { white-space: normal !important; } } @media (max-width:979px){ .fv__body{ padding-bottom: 112px !important } .fv__copy{ padding-right: 12px !important } .fv__h1{ max-width: none !important } .fv__h1-b{ display: none !important } .fv__h1-sp{ display: block !important } .fv__chips li{ font-size: 11px !important; letter-spacing: .02em !important; padding: 0 13px !important; min-height: 34px !important; white-space: nowrap } .bisai-site{ padding-bottom: 60px } } @media (min-width:1000px) and (max-width:1199px){ .float-viz--brush{ display:none !important } .float-viz--plans{ top: calc(clamp(-56px,-4vw,-10px) - 100px) !important; right: 12px !important } } @media (max-width:799px){ .reason-row--rev > div:first-child{ order: 2 } } .sign-tip{ z-index: 58 !important } @media (max-width:799px){ .sign-tip{ left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(300px, calc(100% - 20px)) !important } } .mobile-nav{ height: 100dvh } /* サイド固定CTA：ボタン幅を揃え、Instagramだけ間隔を空ける */ .side-cta > a{ width: 56px; box-sizing: border-box } .side-cta > a:first-child{ margin-bottom: 12px } .to-top{ opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none } .to-top[data-on="1"]{ opacity: 1; visibility: visible; transform: none; pointer-events: auto } @media (max-width:979px){ .to-top{ right: 12px; bottom: 72px } } @media (max-width:560px){ p span.cta-tel-line{ white-space: nowrap !important; display: block; line-height: 1.5 } p span.cta-tel-line + wbr{ display: none } } @media (max-width:400px){ .mobile-cta-bar{ grid-template-columns: 1.5fr 1fr 1fr } .mobile-cta-bar a span{ font-size: 12px !important } .mobile-cta-bar a span:first-child{ font-size: 10px !important } } @media (min-width:600px) and (max-width:979px){ .route-c{ grid-column: 1 / -1; width: min(100%, 360px); margin: clamp(30px,4.4vw,46px) auto 0 } } @media (min-width:980px) and (max-width:1249px){ .qual-card{ width: 94% !important; margin-left: 0 !important } .reason02-grid{ grid-template-columns: minmax(0,.78fr) minmax(0,1fr) !important } } @media (max-width:979px){ .ideas-ask-guide{ display:none !important } } @media (max-width:979px){ .ideas-ask{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; margin-top: clamp(26px,4.4vw,40px) } } @media (max-width:599px){ .ideas-ask button{ font-size: 14px !important; padding-left: 8px !important; padding-right: 8px !important } } .float-viz{display:none} @media (min-width:1000px){ .float-viz{display:block} } @media (max-width:979px){ nav[aria-label="パンくず"]{ gap: 2px 8px } nav[aria-label="パンくず"] a{ min-height: 44px; display: inline-flex; align-items: center } .site-header__logo{ min-height: 44px } } details > summary::-webkit-details-marker { display: none; } details > summary { list-style: none; } details[open] > summary svg { transform: rotate(180deg); } details > summary svg { transition: transform .25s ease; } /* ============================================================ 納品用の骨組み（受領の JS state を CSS へ移した分） ============================================================ */ /* PC/SPの出し分け（受領は JS state wide＝min-width:980px） */ .bh-desk{ display:contents } .bh-mob{ display:none } @media (max-width:979px){ .bh-desk{ display:none } .bh-mob{ display:contents } } /* 固定ヘッダーの逃げ余白（受領は headerSpacerDesktop / headerSpacerMobile の出し分け） */ .bh-hspacer{ height:58px } @media (min-width:980px){ .bh-hspacer{ height:clamp(104px,11vw,120px) } } /* 本文ブロックのラッパー（受領 .bisai-site の position/overflow を引き継ぐ。 min-height:100vh は付けない＝CMSではブロック単位に貼るため） */ .bh-body{ position:relative; overflow:hidden } /* PCのドロップダウン：受領は JS state（subWork 等）。CSSだけで開く＝JS不要 */ .site-header__sub{ display:none !important } .site-header__group:hover > .site-header__sub, .site-header__group:focus-within > .site-header__sub{ display:flex !important } /* SPドロワー：既定は非表示。BODY内JSが .is-on を付ける（本文ではないのでR-4の対象外） */ .mobile-nav{ display:none !important } .mobile-nav.is-on{ display:flex !important } /* 劣化サインの吹き出し：ホットスポットの後ろに並んでいるので兄弟セレクタで開ける （＝JSが無くてもホバー・キーボードで読める）。タップ用に JS も .is-on を付ける ★吹き出しは番号3・5のボタンに重なる位置に出ることがあり、他の番号の吹き出しが開いたままだと その番号ボタンを覆ってクリック/ホバーを奪う（カーソルがポインター⇔テキストで高速に切り替わる不具合の原因）。 吹き出し内はリンク等の操作要素を持たないため pointer-events:none で常にクリックを素通しする。 */ .sign-tip{ display:none !important; pointer-events:none !important } .sign-tip.is-on{ display:block !important } /* ★以前ここに data-bh-sign を絞らない汎用ルール（.bh-sign:hover ~ .sign-tip[data-bh-tip="0"]）があり、 どの番号をホバーしても番号0（①色あせ・変色）の吹き出しが必ず一緒に開いてしまっていた。 番号0専用は次の data-bh-sign="0" 限定ルールだけで足りるため削除。 */ [data-bh-signs] .bh-sign[data-bh-sign="0"]:hover ~ .sign-tip[data-bh-tip="0"], [data-bh-signs] .bh-sign[data-bh-sign="0"]:focus-within ~ .sign-tip[data-bh-tip="0"]{ display:block !important } [data-bh-signs] .bh-sign[data-bh-sign="1"]:hover ~ .sign-tip[data-bh-tip="1"], [data-bh-signs] .bh-sign[data-bh-sign="1"]:focus-within ~ .sign-tip[data-bh-tip="1"]{ display:block !important } [data-bh-signs] .bh-sign[data-bh-sign="2"]:hover ~ .sign-tip[data-bh-tip="2"], [data-bh-signs] .bh-sign[data-bh-sign="2"]:focus-within ~ .sign-tip[data-bh-tip="2"]{ display:block !important } [data-bh-signs] .bh-sign[data-bh-sign="3"]:hover ~ .sign-tip[data-bh-tip="3"], [data-bh-signs] .bh-sign[data-bh-sign="3"]:focus-within ~ .sign-tip[data-bh-tip="3"]{ display:block !important } [data-bh-signs] .bh-sign[data-bh-sign="4"]:hover ~ .sign-tip[data-bh-tip="4"], [data-bh-signs] .bh-sign[data-bh-sign="4"]:focus-within ~ .sign-tip[data-bh-tip="4"]{ display:block !important } [data-bh-signs] .bh-sign[data-bh-sign="5"]:hover ~ .sign-tip[data-bh-tip="5"], [data-bh-signs] .bh-sign[data-bh-sign="5"]:focus-within ~ .sign-tip[data-bh-tip="5"]{ display:block !important } .bh-sign:hover, .bh-sign:focus-within{ z-index:30 !important } /* 「何を大切にしたいか」の推奨パネル：既定は0番だけ表示（R-4） */ .bh-panel{ display:none !important } .bh-panel.is-on{ display:grid !important } /* 色シミュレーター：受領は JS が filter を直接書いていた → CSS変数へ（既定＝1番目の配色） */ [data-bh-color-root]{ --bh-cwall:saturate(0.1) brightness(1.06); --bh-cwing:saturate(0.1) brightness(1.06); --bh-ctrim:saturate(0.14) brightness(1.42); } [data-bh-cn]{ display:none } [data-bh-cn].is-on{ display:inline } /* 施工の流れスライダー（選ばれる理由 01）：既定＝1枚目 */ [data-bh-story-root]{ --bh-story:0 } /* プラン比較（SP表示）：既定＝参考価格。5項目すべてHTMLに焼いてある */ .bh-metric{ display:none !important } .bh-metric.is-on{ display:block !important } /* ビフォーアフター：既定＝50%（JSが無くても半々で見える） */ [data-bh-ba]{ --bh-ba:50% } /* R-24 でタップ発信にした補足行の電話番号。受領は素のテキストだったので a の既定色（#3E8CB3）に変わらないよう文字色を継がせる（見た目は受領のまま） */ a.bh-tel, a.bh-tel:hover{ color:inherit; white-space:nowrap; } /* 素材待ちのスロット（受領の image-slot に src が無かった箇所） */ .bh-slot-empty{ display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; background:#E1DACD; color:#5E6E78; font-size:13px; line-height:1.7; } /* ---- CSS mask 用シルエットの data-URI（別オリジンCDNのURLでは mask が効かない） ---- */ :root{ --bh-msk-house-01: url("data:image/webp;base64,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"); --bh-msk-house-02: url("data:image/webp;base64,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"); --bh-msk-house-04: url("data:image/webp;base64,UklGRhoNAABXRUJQVlA4WAoAAAAQAAAAPwEA/AAAQUxQSN0CAAARb6CgbRs2VQbt/omIADvnyU4Pb8i5bVvVk/skuLvzOhwilSctDrXTO7W7V6lwd3d3l9chn+0/E/nkfPfs3IdG9F+OG0mC5LAycJZsYXp/YBLPDaDXvVp2AbXUeg+0jVsdxi5gJqk+IM/NYiRqK+84RW3RRxS82R6XUijiFjFZZVvUVplGkbfYIxew0iMXsIHBWjJASfPJBRzwtZcFqG2hQMBBn1zAsUCtFTlAaoqjtnWCAddChda3RW3bhAOehdqC/D0bqsp2gNtaUZ6Lh2mK284C5dtwLZVzE3RU3k1U8DBW9pvILqDW6u4D1DbgPSy5WTY/jFFb1Ba1RSlYdYs8K6O2yjSsu5WedVFbSwZW3gbfqmyd+pS8uSzMwuI7GKhN0YvBihxg+1Sm6MVgfVvUtk1FwLMhutL0YtAKQM/IBcTDtKTpxeAsoG0TNKToxWDAPai8iewCasXcglaxL+WbWqiQktarp9QnbE6vMVLfEdBrrhG6n3pNlbKW3j8zPxX/5fYnDozcpXRqMIK2PMko9DQwkufdVEj680yjIPHynY/XxTip8H9V5/PM+Vwzv/oc62JEKX0OisdNZQrcVKah0UbJMuCmRWlYJRk3C7PQaolc3KxQHOZK/UrPzfocVGMXGkV+peemFdCOXZhWcuScBQFTS4yce6BgTEm/0pPALowuuvfgZsAH0NC7yO/XD+Am+ggiehUZN1EKVPQs6uufDHahRxFxU5kBHfXVNYPzP05Quo15IyVfrOSJm8oMyHkNdqIsO+Y2PVGWHXObnijLjnlNT5Rjx5w5fOjSoYeMFLgF//33jwkH9uzZM5OaXqbtnE5P59PD+XR3Pt2cT4XzCX/5CRIv3/XE7sdzPc/4MUnXNedzzPkcTLw2Op9VzmdJ4jU38WpMvKYlXmMSr9H09HY+vZxPz19+ejif7s6nm/OpcD5hUVquXC7lPusjfmvjr7oukDdgoLIzzngGAFZQOCAWCgAAMEMAnQEqQAH9AD7daK5QKL+koqqzCVPwG4lN2qrObIOwkJbAX5T+qdAVvfM2feP1/4n1D/oXeS+YfzsfQ5/r/S39Jr1KvQA6U7+45Jp9F/vn9Q/CPuM2qTcZ7CZUoObkIyYOUzt0e2+hmYz7fY4T8hqjlnh8V3BVs9c5am9h2maOmJXyguBMpyRz/7D6IF/sXP3bdQqseuvEUGtCtiJTg7CTYEd7HCgHFvEACf+ndOv6PHJzciYK30P+z0zf/UY4LltZkiqqBkRu/UhL3F3t9jhRTJp8WUBeyo0TcKl6VsKQz1WKV2n+oeJ6KfmhYVEAzxF9l/TWqtgzl83lwcvjia/hhnYKRnnLsDicFaGm5KO/++3MyQT92rqdJGtZEKmrsEcoIN2bIgssl63vSbGRrT96F60CpMkWBL1bcYra2qzjZ0iNiSjfVOKpJEnn82sD/0hCG/s3W8+O2J4LVT8rmGcISy8/9OfYfJXCfnriZq+6uble4OhE292+HaAbdtZb/NRLNAGUA5loK6LeMzVEsKkkP/hlOHFhdepC8WSQ+HF5UPtis+TtHHio2OlZFr8fckxMnifrIX+e+2t93so1o3T6/b++6VM8WnlehC36x9tDFNQyknilZ0S62PJ30HBWFawk1NQyknj4U9ee/7sgwraxCScl+0jUT0cU4TxVAvcDT5QStrPkgCc2hFnnI5mmqPTlVtAIP8Rw5XLpGjut2j4AAP71gwAADrPZPpbi6O4dhW3URjq+Om3ySagdIPndv59jAvVtpXEynLOGfjlvu883rtfufMi6kxSgQ3T60wkhX5h5cTxgqjR4dVre0X7IDbhTbTfzHF8G43/RUxLlc+pqBhfvT6+j3GdG+5X9XChHj28rPdHftdohtz5tP1fIEYa5Qi2/9c4j33fCw/7gYlmhaH0spimuDKL34siRql51qJmZtSlBA2Gdc7T6WtNGsKzTVQO2VyacHmZcYgALeLoc7dq6CzA7OOxDZv4NVC+TCmpLxTbKLSOvUpGQuCGA8NBueyVmKnm6YGT7Q2Y0QMqAOs5OJg4YDYbuCYpw4GxmhuZOdKYbXtpQxcWIv8tryAOXO+x1DRnWkv6JRMOr7mH0RNbyjOcdhqRm75GBQArjEhdlEFR3AzaansgXkLr25DYuMs2xXpEIprlMaCqoJAIVUabw5LS/wul1GW0m/0K12AhXHUUDJvp41pbFguQAALwYA9gPSaoHOADYCLSMjHP1JlTbdexLRfNNV8eZntXb2Uy5KH1dz3tuM5hmXyDAqcf8NQwpgA4VmBUYl0UC/7/Nu8nPPKhGZS47aCGXQrBhlK1BUE3m0hz/04OjvyuISZavQAOOK2q4XbdeNb0HIEyFlaEeFqoXd0fDI207keKqdMkiTlmpUKWhI383EH+l95cmVMgpZDSpR+zK6wIg6wGhHX3gFsFruKU4bNSmlkzxeBMt1MvtPnHujsdQBDfuBeCUAGldUW97cJZ+5ba8HURKFlNOWaIHXZvcoyDYI8qHcRBzbMYtiPDwy39/0AkbP2tDR2bqAjodid9hL8RAxvXgCs8QoJfxKwJ+8C3WwGlz3TWsHsgAAA42dB5EHoYVZGuJLQgNQciMTqLeBOW/1AZ66cDQlhrLJG27y1x1K7yhnLEg1jvsqvTAHCIH3J4392ew+49m0nj/kQUgqGSQLuyuoTDgYNTH+16o3LdDBzg7+emjsth5CdHKqq4ziufJ+fbrSsuKjjBemAFqBrI3lBauebynmJYcPyHGpDwRq0z3iXo9h4HND70TguC4EJ4/Ffi8UKbAueeMvEUH68nEADLo0WpFwe8M6CLtscAQsq7TeqVEeamz67AHM4OZ4dvahTSO4wWT7pJyZPfmLM+mcW3e2FnA3NNapuneC/BQfXoU0Qr3mj6xS57TJ+BA6FhQlAbG26F0YtHTv2jUSOyJfpAjD1qPpXeQNGxxU5V4p5Fazk0eE2zbpwvpKw29QdkzgQkg4TxBwf6Lx7cTonyknoRe00Lz/V8blqiJDws9ZTCMr55DbbuvcD7LAT1alkzRkppurzE4Q53hiRxt8WYJNgqbTJMOijZMJHszJVIqzvvu69lt3yYaVv1RHtFcG77zmA+xp6JA0uPA/PgAnNvoLaEhLlz9+4lTS/MCRvn2WBIbvyaavvl20l+rNGbqJ1ml+xtN+EImF56sZu9Er8z/o+SnA0/J40DbenXmYcQ/JxBt4cV45J2Rwvq8DCKiwmv8T1ZSbaYxTbP/h3vmxLqHLxi+ZKnWA2yHMy7Y/GUUwIg/XBTNpZYwKyLB7UC4oOGeJDHIqkwRt31uhDH7iAkI48xort1gAGXWA9Nk6WG+5QIqtwEPuyoxIirKIe6nk302d9WJ9RvY3K2sMVkKKt5IuMLYAVzoKatilKBhl8xh/LuFY8JKGEVb01NFU0FOXTHOIJTm2xqVqT6ZX/T0fGOTYsigZK/8txm/aqgbykn5szoJdIV3EW/vCWhxZHTYDH9TofHlh6OzBW7wIe4b0Z90jYeHUrBBOM0pfnkaO3l5hjZxtXcxp3rkPOvf1B2EdxTxo+2hKaCwGYv1Ia8Cz7ya+Y2l4NPGCcbFzAQcjEuiRGKGvUsm7G74NjwTrzEEnNUpLsQwD/7yVOHdhvF6S/S9YqdyrsnGUps/sA+rPJoCk9Hmb0Q18Ihc2sn9zl79mk4bo/4AEuqCyAhIY0Q315l4Z7rWxJhlbvf9tCOF38EyxYZoRSjBR3EEPyGr6EwwmJz9cz99/aJqAjlFVGAa5YEB1pwVrTTg3+DJMWplLZz9PAxBleXc/o3AnQcYag4AASN/eaD8PAAg6UMIMpF9xU/MZwAGD3GHXzzaVwhPMLC5vd/3TUjtRrUitCyBSVFSCsJwHcR2MAop5/+EI+OtDXGUi+qZA1I00ASula+0qe01xIEO97YdX7JZwuW+l62o9eIPmISudUAmPCtsDoAPxH/FFQ708kAp/ANmgzXQLMY5VM2nTG4Lv3vt5dK1Ey1v2VMm2JCGi0QkGJSsdOWXdoMhW1hBZkEY5qqJKq9odEHwaKP+afzD2wlmQv+XYqzfcgcyLXb64MCyBiQtm1WqA6R6cOjeexoNKqH+hwtFOoOE95lcqW/TAz+BWrdZuayb+edVQIQ2ECB7NAUHPFFmsalCjOICWNQ5uNCAXhfD4xK7lTgBaI/dgBKaBQ4pYq5E4qMhCSpCLe2apiXcQdUXwj4CZt5FxEvodMfMGq0RGpx/tAT+K54I58BvWlyR9OBkvTTO43N4I97jxHFFLnoDB2y+4h4F7wS6bOLZVAfIC3oGRTEM0jT/gWjGB8b067qd0ifVTjF9tYrq9NBouxGzWDONhG+MVHedjaS4pf4E+qb6jeqld5yF8VdJIAXnW7Z8v52cdgJvHUiBfEswu60KXlF0n/W2lAaTG+I87V1k9/MUQIIlFB4UIAA="); --bh-msk-house-05: url("data:image/webp;base64,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"); --bh-msk-tree-01: url("data:image/webp;base64,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"); --bh-msk-tree-02: url("data:image/webp;base64,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"); --bh-msk-tree-03: url("data:image/webp;base64,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"); --bh-msk-tree-04: url("data:image/webp;base64,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"); --bh-msk-tree-05: url("data:image/webp;base64,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"); --bh-msk-cloud-01: url("data:image/webp;base64,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"); } /* ---- 生成クラス：CSS mask の退避先 ---- */ .bhk1{-webkit-mask-image:var(--bh-msk-house-01);mask-image:var(--bh-msk-house-01);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk2{-webkit-mask-image:var(--bh-msk-house-05);mask-image:var(--bh-msk-house-05);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk3{-webkit-mask-image:var(--bh-msk-tree-02);mask-image:var(--bh-msk-tree-02);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk4{-webkit-mask-image:var(--bh-msk-tree-05);mask-image:var(--bh-msk-tree-05);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk5{-webkit-mask-image:var(--bh-msk-tree-01);mask-image:var(--bh-msk-tree-01);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk6{-webkit-mask-image:var(--bh-msk-cloud-01);mask-image:var(--bh-msk-cloud-01);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk7{-webkit-mask-image:var(--bh-msk-house-04);mask-image:var(--bh-msk-house-04);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk8{-webkit-mask-image:var(--bh-msk-house-02);mask-image:var(--bh-msk-house-02);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk9{-webkit-mask-image:var(--bh-msk-tree-03);mask-image:var(--bh-msk-tree-03);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk10{-webkit-mask-image:var(--bh-msk-tree-04);mask-image:var(--bh-msk-tree-04);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .bhk11{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 7%,#000 18%,#000 78%,rgba(0,0,0,.4) 93%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 7%,#000 18%,#000 78%,rgba(0,0,0,.4) 93%,transparent 100%);} .bhk12{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 42%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 42%,#000 100%);} .bhk13{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,rgba(0,0,0,.45) 90%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,rgba(0,0,0,.45) 90%,transparent 100%);} /* ---- 生成クラス：style-hover / style-active（1宣言ずつ !important） ---- */ .bhh1.bhh1.bhh1:hover{color:#C1755A !important;} .bhh2.bhh2.bhh2:hover{background:#E3A585 !important;color:#fff !important;} .bhh3.bhh3.bhh3:hover{background:#E9F3F8 !important;color:#1E3A50 !important;} .bhh4.bhh4.bhh4:hover{opacity:.78 !important;} .bhh5.bhh5.bhh5:hover{background:#E9F3F8 !important;} .bhh6.bhh6.bhh6:hover{background:#3E8CB3 !important;} .bhh7.bhh7.bhh7:hover{color:#F2C14E !important;} .bhh8.bhh8.bhh8:hover{background:#C1355A !important;transform:translateX(-3px) !important;} .bhh9.bhh9.bhh9:hover{background:#C1755A !important;color:#fff !important;transform:translateX(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.28) !important;} .bhh10.bhh10.bhh10:hover{background:#3E8CB3 !important;transform:translateX(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.28) !important;} .bhh11.bhh11.bhh11:hover{background:#C1755A !important;color:#fff !important;} .bhh12.bhh12.bhh12:hover{background:#C1355A !important;} .bhh13.bhh13.bhh13:hover{background:#C1755A !important;transform:translateY(-3px) !important;} .bhh14.bhh14.bhh14:hover{background:#fff !important;color:#1E3A50 !important;transform:translateY(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.22) !important;} .bhh16.bhh16.bhh16:hover{background:#C1755A !important;transform:translateY(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.22) !important;} .bhh17.bhh17.bhh17:hover{background:#1E3A50 !important;color:#fff !important;transform:translateY(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.22) !important;} .bhh18.bhh18.bhh18:hover{background:#3E8CB3 !important;color:#fff !important;transform:translateY(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.22) !important;} .bhh19.bhh19.bhh19:hover{background:#1E3A50 !important;transform:translateY(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.22) !important;} .bhh20.bhh20.bhh20:hover{background:#C1755A !important;color:#fff !important;transform:translateY(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.22) !important;} .bhh21.bhh21.bhh21:hover{background:#C1755A !important;transform:scale(1.14) !important;} .bhh22.bhh22.bhh22:hover{transform:translateY(-2px) !important;box-shadow:0 5px 0 #9FC4D8 !important;} .bhh23.bhh23.bhh23:active{transform:translateY(2px) !important;box-shadow:0 1px 0 #9FC4D8 !important;} .bhh24.bhh24.bhh24:hover{background:#1E3A50 !important;border-color:#1E3A50 !important;} .bhh25.bhh25.bhh25:hover{background:#1E3A50 !important;color:#fff !important;} .bhh26.bhh26.bhh26:hover{background:#9A5238 !important;transform:translateY(-3px) !important;box-shadow:0 10px 24px rgba(30,58,80,.22) !important;} /* ---- 生成クラス：style-before / style-after を実要素へ昇格した先（R-27） ---- */ .bhp1{position:absolute;inset:7px;border:1px solid rgba(30,58,80,.16);pointer-events:none;} .bhp2{position:absolute;inset:10px;border:1px solid rgba(30,58,80,.2);pointer-events:none;} .bhp4{position:absolute;left:clamp(30px,4vw,42px);bottom:-13px;width:26px;height:14px;background:#fff;clip-path:polygon(0 0,26px 0,7px 14px);} .bhp5{position:absolute;left:-35px;top:clamp(22px,2.8vw,32px);width:14px;height:14px;border-radius:50%;background:#3E8CB3;border:3px solid #FBF6EE;box-sizing:content-box;} .bhp6{position:absolute;left:-41px;top:clamp(22px,2.8vw,32px);width:14px;height:14px;border-radius:50%;background:#C1755A;border:3px solid #FBF6EE;box-sizing:content-box;} .bhp7{position:absolute;left:-35px;top:clamp(22px,2.8vw,32px);width:14px;height:14px;border-radius:50%;background:#C1755A;border:3px solid #FBF6EE;box-sizing:content-box;} /* ---- 生成クラス：インラインの animation / transition の退避先 ---- */ .bha1.bha1.bha1{animation:bisai-fadein .28s ease both;} .bha2.bha2.bha2{animation:bisai-fadein .3s ease both;} .bha3.bha3.bha3{transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;} .bha4.bha4.bha4{transition:transform .2s ease,background .2s ease;} .bha5.bha5.bha5{transition:background .2s ease,color .2s ease;} .bha6.bha6.bha6{transition:background .2s ease;} .bha7.bha7.bha7{transition:opacity .3s ease,transform .3s ease,visibility .3s ease,background .2s ease;} .bha8.bha8.bha8{transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;} .bha9.bha9.bha9{animation:bisai-breathe 5s ease-in-out infinite;} .bha10.bha10.bha10{animation:bisai-breathe 6s ease-in-out infinite;} .bha11.bha11.bha11{animation:bisai-fadein .24s ease both;} .bha12.bha12.bha12{animation:bisai-twinkle 3.2s ease-in-out 0s infinite;} .bha13.bha13.bha13{animation:bisai-twinkle 3.8s ease-in-out .7s infinite;} .bha14.bha14.bha14{animation:bisai-twinkle 2.9s ease-in-out 1.4s infinite;} .bha15.bha15.bha15{animation:bisai-twinkle 3.4s ease-in-out 2.1s infinite;} .bha16.bha16.bha16{transition:filter .55s ease;} .bha17.bha17.bha17{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;} .bha18.bha18.bha18{animation:bisai-breathe 5.5s ease-in-out infinite;} .bha19.bha19.bha19{transition:transform .55s cubic-bezier(.4,0,.2,1);} .bha20.bha20.bha20{transition:background .3s ease;} .bha21.bha21.bha21{transition:opacity .5s ease,transform .5s ease;} .bha22.bha22.bha22{transition:background .45s ease;} .bha23.bha23.bha23{transition:opacity .3s ease;} /* ===== 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; } .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; } /* ============================================================ §5 サイドバー / 最近の投稿 / カテゴリ記事数 ============================================================ */ [class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); } /* サイドバー見出し（「最近の投稿」「カテゴリ」）の可読性を確保。 theme_default は `.partsNNN_sidebar h3{ background-color:var(--main-color); color:#fff }` と 色を直当てするが、§12 の見出しリセットが**背景だけ**を transparent にするため、 ライト基調の案件では「白地に白文字」で消える（ダーク案件では地に映えるため露見しない）。 背景は戻さず（skinのフラット化方針を維持）、文字色だけトークンへ寄せて両基調で可読にする。 あわせて左右パディングも解除する：`padding:15px 20px` は**帯があった前提**の内側余白のため、 帯を透明化したまま残すと「見出しだけ20px字下げ」になり、直下の日付／タイトルと文頭がズレる。 （詳細ページ側の .recent_post_title には下で同じ手当てをしており、一覧側だけ取り残されていた） */ [class*="_sidebar"] h3{ color:var(--dyn-heading) !important; padding-left:0 !important; padding-right:0 !important; } [class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; } /* 「最近の投稿」見出し（詳細ページ側）の帯を外して一覧側と体裁を揃える。 theme_default は `.recent_posts_wrap .recent_post_title{ background-color:var(--main-color); color:#fff }` で帯を敷くが、 §12 の見出しリセットは (a) 包み(parts166_single_article / parts-blog-ex-single-wrap)が `_section` を含まない (b) 要素が ＜div＞（h2/h3でない）── の2点で**届かず**、帯だけが生き残る。 一方すぐ上の §5 が文字色を --dyn-heading（＝ライトでは濃色）へ寄せるため「濃い帯に濃い文字」となり、 案件ごとに帯との視認性を見て文字色を手当てする必要があった。帯を外せば一覧（§12で帯が外れる）と揃い、手当ても不要になる。 ※帯を活かしたい案件は案件側で `background:var(--dyn-accent); color:var(--dyn-on-accent)` を再指定する。 */ .recent_post_title{ background:transparent !important; padding-left:0 !important; } [class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; } /* 記事li の区切り罫線：theme_default が #666 をハードコードしており地に合わず過剰に見える → トークンへ */ [class*="_sidebar"] ul li, .recent_posts_wrap ul li{ border-bottom-color:var(--dyn-border) !important; } /* カテゴリ右の記事数を視認できるチップに */ [class*="_sidebar_post_category_count"]{ background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:0 8px !important; } /* カテゴリ一覧 li：theme_default 由来の左右縦罫線(1px solid #666)を除去（下罫線は区切りとして意図的に残す）。S01189還流 */ [class*="category_post_count"] li{ border-left:0 !important; border-right:0 !important; } /* カテゴリ名と件数チップが重ならないよう両端寄せ。 あわせて左右パディングを解除：theme_default は `.category_post_count ul li a{ padding:15px 20px }` と **帯／箱があった前提**の字下げを持つため、帯を外した状態では カテゴリ名だけが 20px 右にずれ、見出し(h3)や「最近の投稿」リストと頭が揃わない。 上下15pxはタップ領域として残す。 */ [class*="category_post_count"] li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-left:0 !important; padding-right:0 !important; } /* ============================================================ §6 詳細ページ（本文 / 署名 / SNS / 詳細内スライダー） ============================================================ */ .parts-blog-ex_text{ font-family:var(--dyn-font-body); color:var(--dyn-text) !important; line-height:1.9; } .parts-blog-ex_text h2, .parts-blog-ex_text h3{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; } .signature_wrap{ font-family:var(--dyn-font-display); color:var(--dyn-muted) !important; border-top:1px solid var(--dyn-border); padding-top:16px; } .slick-prev, .slick-next{ color:var(--dyn-accent-2) !important; } /* ※詳細本文の親ラッパーが固定class薄め。崩れる場合は実ページで本文コンテナを確認し追補 */ /* ============================================================ §7 お問い合わせフォーム ============================================================ */ .contact_section, [class*="_section_form"], [class*="_section_content"], [class*="_content_wrap"], [class*="_content"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; } [class*="_form_wrap"]{ max-width:720px; margin:0 auto; } [class*="_form_wrap"] label, [class*="_form_wrap"] dt, [class*="_form_wrap"] .ja, [class*="_form_wrap"] .en{ color:var(--dyn-text) !important; } /* 入力欄を十分な大きさに（チェック/ラジオは除外） */ [class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]), [class*="_form_wrap"] dd select{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } [class*="_form_wrap"] textarea, .form_textarea textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } /* チェックボックス/ラジオはサイズ統一 */ [class*="_form_wrap"] input[type="checkbox"], [class*="_form_wrap"] input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; } /* 必須バッジ: 文字を中央・折り返さない・角丸はトークン */ .required{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; } .error{ color:var(--dyn-accent-2) !important; } /* 「お問い合わせ内容」を囲む大きな箱(枠線)を撤去 */ .form_textarea, .form_text_dt{ border:none !important; background:transparent !important; } /* 送信ボタン。★セレクタに包み(.contact_submit 自体)を含めないこと： 包みは複数ボタンを載せるレイアウト用のdivで、ここを accent で塗ると (a) 完了ページ=藍の包みに藍のボタンが乗って同化し、ボタンが消えて見える (b) 確認ページ=すぐ下でアウトライン化する「戻る」が藍地に濃色文字となり判読不能（実測 1.01:1） になる。当てる先はボタン実体だけでよい（dynamic-form.md §1 の意図も「送信 .contact_submit input = accent地」）。 */ .contact_submit button, .contact_submit input{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; } /* 確認ページの「戻る」は副ボタン（送信＝アクセント／戻る＝アウトライン）＝誤導線防止 */ .contact_submit input[name="back"]{ background:transparent !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; } /* 送信前 disabled（reCAPTCHA未完了）の見え方 */ .contact_submit input[disabled]{ opacity:.5; cursor:not-allowed; } /* --- フォーム実コードで頻出するが §7本体に無かった部品（parts213等の実装を突き合わせ）--- */ /* ファイル添付の自作UI：受領のインライン style が #eee 地・#999 文字・明るいグラデで固定し、 ダーク地で白い箱・低コントラストになる。トークンで地・枠・文字を寄せる（label_file_upload に限定）。 */ .label_file_upload{ display:block; width:100%; padding:12px 14px; cursor:pointer; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } .label_file_upload button{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; pointer-events:none; } .label_file_upload span, #file-chosen, [id$="filechosen"]{ color:var(--dyn-muted) !important; } .des{ color:var(--dyn-muted) !important; } /* 注意書き（文字数制限・ファイル名規則等の補助）：色未指定/未定義var(--red)で可読性がばらつくため muted で固定（AA確保色） */ .attention{ color:var(--dyn-muted) !important; } /* 郵便番号は narrow に保つ：上の入力欄ルール `[class*="_form_wrap"] dd input:not([checkbox]):not([radio])` は (0,3,2)+!important で .zip も全幅化し〒[郵便番号][住所]を壊す。これに勝つよう :not() を重ねて 詳細度を (0,4,2) に上げて .zip だけ幅を戻す（parts219等 form_address系・番号非依存）。 */ [class*="_form_wrap"] dd input.zip:not([type="checkbox"]):not([type="radio"]){ width:9em !important; max-width:9em !important; display:inline-block; margin-right:8px; } /* プライバシー同意 */ .privacypolicy{ background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:16px; color:var(--dyn-muted) !important; } .privacypolicy-link{ color:var(--dyn-accent-2) !important; } /* 電話/メール等の content バー（角丸はトークン） */ [class*="_content"] [class*="btn"], [class*="_content"] a[class*="round"]{ border-radius:var(--dyn-radius) !important; } /* ============================================================ §7b お問い合わせフォーム ─ wpcf7 / .formBox 系（第2系統） ------------------------------------------------------------ 【重要】フォームには構造が2系統ある（dynamic-harvest.js の「フォーム系統」で判定）： ・§7 = parts_form/dl 系（[class*="_form_wrap"] / dt / dd / .required / .contact_submit） ・§7b = wpcf7/.formBox 系（.formWrap > .formBox > dt>label>span.req + dd>input, 送信=input.wpcf7-submit。SEIKEN/協力会社フォーム等 Contact Form 7 由来） §7 の `[class*="_form_wrap"]` は §7b 構造に当たらないため、当該系統では本セクションが要る。 いずれも番号非依存のセマンティッククラスで記述。 ============================================================ */ .formWrapbg, .formWrap, .form, [class*="formSec"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; } .formWrap{ max-width:720px; margin:0 auto; } .formBox{ margin-bottom:20px; } .formBox dt, .formBox label{ color:var(--dyn-text) !important; } .formBox dd input:not([type="checkbox"]):not([type="radio"]), .formBox dd select, .formWrap input[type="text"], .formWrap input[type="email"], .formWrap input[type="tel"]{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } .formBox dd textarea, .formWrap textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); } .formWrap input[type="checkbox"], .formWrap input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; } /* 必須バッジ（wpcf7系は .req） */ .req, .formBox .req{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; } .wpcf7-not-valid-tip, .wpcf7-response-output{ color:var(--dyn-accent-2) !important; } /* 送信（Contact Form 7） */ input.wpcf7-submit, .formWrap button[type="submit"]{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; min-height:54px !important; padding:14px 28px !important; font-size:16px !important; cursor:pointer; } /* プライバシー同意（両系統共通の .privacypolicy* は §7 で適用済） */ /* ============================================================ §14 自動CSSに負けた時の手順（R-27）※汎用アーマーは持たない＝安全契約 ------------------------------------------------------------ CueZilla は body内コンポの style 要素でパーツ単位に `.partsNNN_blog_＜ID＞ .card .card-body{…!important}` 等の高詳細度(0,3,0)+!important を吐く。§1〜§9 の単一属性セレクタ(0,1,0〜0,2,0)+!important は 同プロパティで【負ける】（症状：当てているのに反映されない＝崩れの常連）。 → 【禁止】[class*=…]を積んで(0,3,0)に並べる汎用アーマー（脆い・過剰マッチ・アーマーレース）。 ＝以前ここにあった `[class*="parts"][class*="_blog"] .card` 等は本契約により撤去した。 （theme_default 非importantへの色寄せは §8 の単一 `[class*="_blog"] .card`(0,2,0)+!important で足りる） → 【正】負けたパーツだけ、harvestで実採番を取り【案件CSS】末尾に (0,3,1) を1個足して確実に勝つ： section.parts131415_blog_xxxx .card .card-body{ … !important } ← 実採番。構造変化に不感 ※ skin は全案件共通なので案件固有の番号は書かない（負けた時だけ案件側で対処）。 ※ 採番取得＝verify/dynamic-harvest.js。当て方＝50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md §14。 */ /* 見出しのテーマ装飾(角丸/中央寄せ/背景/罫線)残りをパーツ内でリセット（R-21）。 theme_default は非importantなので、単一 [class*="_section"] + !important で確定勝ち（[class*]を積まない）。 */ [class*="_section"] h2, [class*="_section"] h3{ border-radius:0 !important; background:transparent !important; border:none !important; text-align:inherit !important; } /* ============================================================ §8 トップ用 お知らせ/ブログ teaser（notice-news / blog teaser） ============================================================ */ .parts040506_notice-news{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; } .parts040506_notice-news *{ color:var(--dyn-text) !important; } .parts040506_notice-news .title, .parts040506_notice-news .title a{ color:var(--dyn-heading) !important; } .parts040506_notice-news [class*="date"], .parts040506_notice-news .f_yugothic{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; } .parts040506_notice-news .more{ white-space:nowrap !important; color:var(--dyn-accent-2) !important; } .parts040506_notice-news a{ color:var(--dyn-accent-2) !important; } /* サムネ型ブログ teaser */ [class*="_blog_title_wrap"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; } [class*="_blog_thumbnail"]{ border-radius:var(--dyn-radius); } /* teaser内が Bootstrap .card（既定で白）の場合のダーク/トーン化 */ [class*="_blog"] .card{ background:var(--dyn-surface) !important; border-color:var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; } [class*="_blog"] .card-title, [class*="_blog"] .card-text{ color:var(--dyn-text) !important; } [class*="_blog"] .card-title{ font-family:var(--dyn-font-display) !important; } /* ============================================================ §9 Bootstrap汎用クラスの地ならし（パーツ内に限定） text-dark / bg-light 等がパーツ内でトーンを乱すのを抑える ============================================================ */ [class*="parts"] .text-dark{ color:var(--dyn-text) !important; } [class*="parts"] .bg-light{ background:var(--dyn-surface) !important; } .card-header.bg-light{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; } /* ============================================================ §10 プライバシーポリシー（templates/privacy-policy.html のフリーコーディング設置版） ※CueZilla既定パーツ(item_title/item_description)へ転記する場合は §5 等で別途適用される ============================================================ */ .privacy{ max-width:880px; margin:0 auto; padding:64px 24px; color:var(--dyn-text); font-family:var(--dyn-font-body); line-height:1.9; } .privacy__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,4vw,2.6rem); } .privacy__subtitle{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:1.2rem; margin-top:8px; } .privacy__lead{ color:var(--dyn-muted); margin:24px 0 40px; } .privacy-item{ margin-bottom:32px; } .privacy-item__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); border-left:3px solid var(--dyn-accent); padding-left:12px; margin-bottom:12px; } .privacy-item__body{ color:var(--dyn-text); } /* 原文の (1)(2)… 表記は【HTML側のテキスト】で持つ ※R-27対応（2026-08-26） 旧実装は `li::before` の content 宣言（`counter(pp)` を括弧で挟む）で番号を描いていたが、AddCssInfo は content 宣言をサニタイズで落とす（counter() は content 専用なのでCSS単独の代替が無い）。実機では番号が消えたうえに 下のぶら下げインデントだけが残り、本文が左へはみ出していた。 ★番号を捨てず HTML テキストへ移した理由: 本文が「上記(1)から(6)に掲げるほか」と番号を参照しており、 番号は装飾ではなく文書の一部（消すと文意が壊れる）。会社承認の定型文なので表記も変えられない。 → templates/privacy-policy.html の各 ＜li＞ 先頭に "(1) " 等を直接書く形へ変更した。 ★ぶら下げインデント（padding-left / text-indent）は残す: 番号が行頭テキストになった今も、 折り返し行を本文位置に揃えるために必要（＝この2行が番号の受け皿）。 番号を持たない古い privacy HTML に当たると字下げだけが見えるので、その場合はCSSではなく HTML側に番号を入れて直す。counter-reset / counter-increment は用が無くなったので外した。 */ .privacy-item__list{ list-style:none; margin:8px 0; padding:0; } .privacy-item__list li{ padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); } /* ============================================================ §11 下層ヘッダーパーツ（templates/subpage-header.html） サイトヘッダーとパンくずの間。フリーコーディングで別パーツ化 ============================================================ */ /* padding-top に固定ヘッダー高さ(--fixed-header-h)を加算＝固定ヘッダーへのめり込み防止。 固定ヘッダーが無いサイトは既定0で無影響。固定ヘッダー採用サイトは案件CSSで :root{ --fixed-header-h:88px } 等を設定（R-18）。 */ .subpage-header{ position:relative; padding:calc(72px + var(--fixed-header-h, 0px)) 24px 72px; background:var(--dyn-surface); text-align:center; overflow:hidden; } .subpage-header__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; z-index:0; } .subpage-header__inner{ position:relative; z-index:1; } .subpage-header__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,3rem); line-height:1.3; text-shadow:0 2px 14px rgba(0,0,0,.5); } .subpage-header__en{ font-family:var(--dyn-font-numeric); color:var(--dyn-muted); letter-spacing:.12em; margin-top:8px; } /* ============================================================ §12 システム定型ページ：送信完了(thanks) / 404 templates/thanks.html, templates/404.html 用。トークンスキン準拠 ============================================================ */ .thanks, .notfound{ max-width:760px; margin:0 auto; padding:calc(80px + var(--fixed-header-h, 0px)) 24px 96px; text-align:center; } /* CueZilla 既定404（section.not-found）はレイアウトを変えず、固定ヘッダー分の上余白だけ確保（R-18） */ .not-found{ padding-top: calc(var(--fixed-header-h, 0px) + 24px); } .thanks__title, .notfound__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.3; margin-bottom:28px; } .thanks__lead, .notfound__lead{ color:var(--dyn-text); line-height:2; margin-bottom:40px; } .thanks__action, .notfound__action{ margin-top:8px; } /* ============================================================ §13 Bootstrap(テーマ)既定の恒久打ち消し（R-20） ------------------------------------------------------------ CueZillaテーマが読み込む Bootstrap の "素のタグ/汎用クラス" が フリーHTMLに当たって崩す症状を、案件ごとの手当て無しで地ならしする。 ここは確認済みの実害2件（test0605）に限定して打ち消す。 ※「色/余白/タイポ」を意図して変える装飾は接頭辞クラス(.xw- 等)で 付け直す＝下記より高詳細度になり、本セクションに勝つ（壊さない）。 ============================================================ */ /* (a) ＜mark＞ / .mark の黄ハイライト背景：ロゴや見出しが黄色い箱になる症状 → 無効化。 意図的なマーカー装飾は専用クラスで（Bootstrap名 .mark を流用しない＝R-20）。 */ mark, .mark{ background-color:transparent !important; color:inherit !important; padding:0 !important; border-radius:0 !important; } /* (b) a:hover が Bootstrap青(#0a58ca)になる症状 → 既定は「ホバーで色を変えない」。 !important は付けない＝個別のホバー装飾(接頭辞クラスや site.css の指定)が そのまま勝ち、未指定リンクだけが青化を免れる（フォールバック）。 */ a:hover{ color:inherit; } /* (c) 電話番号リンク(tel:)の最低タップ確保（R-24／§5.5-3）。 本文中インラインでも折り返さない。CTA/ボタン用途は接頭辞クラスで44px確保。 */ a[href^="tel:"]{ white-space:nowrap; } /* ===== 29_override.css ===== */ @charset "UTF-8"; /* ============================================================ S01973 合同会社ビサイホーム — override.css（案件の上書き専用・R-30） 結合順: 20_site.css → 21_cuezilla-skin.css → 29_override.css ここは「skin の後で効かせたいもの」だけを書く場所。skin 本体は編集しない（R-30）。 内訳 A. CueZillaテーマCSSの打ち消し（実機だけで起きる崩れ） B. skin の --dyn-＊ を案件の配色・角丸に合わせる C. CueZillaが描く動的パーツを受領デザインへ寄せる （受領データはパーツのDOMをそのまま作って**インラインstyleで**装飾していたため、 実機ではその装飾が付かない。ここでCSSとして当て直す） ★実機での最終調整は R-28（harvestEW で実DOMを採取 → 詳細度アーマー）で行う。 ここに書いてあるのは受領デザインからの写しであって、実機での検定は投入後に必要。 ============================================================ */ /* ============================================================ A. CueZillaテーマCSSの打ち消し ============================================================ */ /* テーマ（theme_default.css）の html,body｛height:100%｝は body の箱を1画面に固定するため、 トップFVの position:sticky が1画面で剥がれる（教訓 cuezilla-theme-html-body-height-100-kills-sticky）。 min-height を付けるのは、短いページ（送信完了・404）が縦に詰まらないようにするため。 */ html{ height:auto !important; } body{ height:auto !important; min-height:100vh; min-height:100dvh; } /* ★html に overflow-x を足さない。テーマは body 側にだけ overflow-x:hidden を持ち、それが ビューポートへ伝播して横スクロールを止めている。html 側に指定を足すと伝播が切れて body がスクロールコンテナ化し、sticky が死ぬ （教訓 html-overflow-clip-stops-body-overflow-propagation-and-kills-sticky）。 横はみ出しの追加ガードは本文ラッパー（.bh-body｛overflow:hidden｝＝20_site.css）側で持つ。 */ /* ============================================================ B. skin の --dyn-＊（7値から導けないものだけ） ============================================================ */ :root{ /* 受領デザインは角を clip-path で落とす意匠なので、パーツ側の角丸は 0 にそろえる */ --dyn-radius: 0; /* カード面は紙色（--background-color と同じ #FBF6EE）。地は白なので surface とは別 */ --dyn-surface: #FBF6EE; /* 罫線は淡いベージュ。--sub-color（#5E6E78＝補助文字の色）から導くと罫線が濃すぎる */ --dyn-border: #E1DACD; /* 見出しは濃紺。--text-color（#2B3742＝本文）とは別に持たせる */ --dyn-heading: #1E3A50; /* リンク・ホバーの寄せ先（受領は a:hover が #C1755A、パーツ内の文字ホバーは #9A5238） */ --dyn-accent-2: #9A5238; /* 一覧カードの最小幅・間隔（受領のグリッド指定と同じ） */ --dyn-card-min: 280px; --dyn-gap: clamp(24px, 3.4vw, 44px); /* 書体（受領 helmet と同じ2書体。link は 01_サイト情報.md の HEAD内欄で読み込む） */ --dyn-font-display: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; --dyn-font-body: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; /* 受領デザイン全面に敷かれている紙の質感（受領インラインstyleと同一の data-URI）。 パーツの地にも同じ質感を出すために変数化しておく。 */ --bh-noise: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27300%27%20height=%27300%27%3E%3Cfilter%20id=%27s%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.55%27%20numOctaves=%273%27/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type=%27discrete%27%20tableValues=%270%200.15%200.45%200.8%201%27/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width=%27300%27%20height=%27300%27%20filter=%27url%28%23s%29%27%20opacity=%270.2%27/%3E%3C/svg%3E); } /* CueZillaテーマは Bootstrap を読む。受領デザインは a:hover を #C1755A にしていたので戻す（R-20） */ .bh-body a:hover, [class*="parts"] a:hover{ color:#9A5238; } /* ============================================================ C-1. トップ「お知らせ帯」（design-parts-52 系） 受領: 白地＋影の1行帯／左に水色の NEWS ラベル（角を落とした形） ============================================================ */ [class*="design-parts-52"]{ position:relative; z-index:3; height:auto !important; min-height:0 !important; max-height:none !important; background:#fff !important; box-shadow:0 2px 16px rgba(30,58,80,.09) !important; padding:clamp(10px,1.4vw,14px) 0 !important; margin:0 !important; } [class*="design-parts-52"] .container, [class*="design-parts-52"] .container-lg{ max-width:1240px; margin:0 auto !important; padding:0 clamp(16px,4vw,40px) !important; } [class*="design-parts-52"] .content{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,2vw,30px); } [class*="design-parts-52"] .content ul{ max-height:100px !important; overflow:hidden !important; } [class*="design-parts-52"] .banner-area{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:132px; min-height:40px; padding:0 18px !important; margin:0 !important; background:#3E8CB3; color:#fff; font-size:16px; letter-spacing:.22em; font-weight:500; font-family:var(--dyn-font-display); clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); } [class*="design-parts-52"] ul{ flex:1 1 300px; margin:0; padding:0; list-style:none; } [class*="design-parts-52"] li{ min-height:56px; display:flex; align-items:center; } [class*="design-parts-52"] li > a{ display:flex; align-items:center; min-height:44px; width:100%; color:#1E3A50; } [class*="design-parts-52"] .parts-52-textarea{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(10px,2vw,24px); } [class*="design-parts-52"] .date{ flex:0 0 auto; font-size:13px; letter-spacing:.1em; color:#5E6E78; } /* ============================================================ C-2. トップ「ブログ新着」（parts131415_blog 系） 受領: 濃紺の地／中央の BLOG 見出し／紙色のカード＋内側に7pxの細枠 ★カードの内枠は受領では ::before + content だった。追加CSSは content を落とす（R-27）ので 背景グラデーション4枚で同じ線を描く（背景はサニタイズで残る）。 ============================================================ */ [class*="parts131415_blog"]{ position:relative; background-color:#1E3A50 !important; background-image:var(--bh-noise) !important; /* ★上余白は 0（2026-09-16 ディレクター指示）。直前のブロックとの間隔はそちらが持つ。 下だけ受領デザインの余白を残す。CueZillaのパーツ自動CSSに負けないよう !important。 */ padding:0 0 clamp(60px,9vw,120px) !important; } [class*="parts131415_blog"] .container-lg, [class*="parts131415_blog"] .container{ max-width:1240px; margin:0 auto; padding:0 clamp(18px,5vw,64px); } [class*="parts131415_blog"] [class*="_blog_title_wrap"]{ text-align:center; margin-bottom:clamp(28px,4vw,52px); } [class*="parts131415_blog"] [class*="_blog_title_wrap"] h2, [class*="parts131415_blog"] [class*="_blog_title_wrap"] .title{ font-family:var(--dyn-font-display) !important; font-size:clamp(26px,4vw,44px); letter-spacing:.24em; color:#fff !important; font-weight:500; } [class*="parts131415_blog"] [class*="_blog_title_wrap"] p{ margin-top:8px; font-size:16px; letter-spacing:.08em; color:#E9F3F8; } /* skin §4-b が .row を auto-fill グリッドにして子の Bootstrap 幅を落とす。列数はここで決める。 ★auto-fill（最小幅280px）だと、実機の器の幅しだいで4列になってしまった（2026-09-16 実機で確認）。 受領デザインの指定は Bootstrap の row-cols-1 / row-cols-sm-2 / row-cols-lg-3 ＝ **1列 → 2列 → 3列** なので、その段で列数を固定する（器の幅に左右されない）。 ★minmax(0,1fr) にするのは、グリッド子の min-width:auto で中身の最小幅ぶん膨らんで はみ出すのを防ぐため（教訓 css-grid-child-min-width-auto-overflow）。 */ [class*="parts131415_blog"] .row{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:clamp(16px,2.4vw,26px) !important; } @media (max-width:991px){ [class*="parts131415_blog"] .row{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } @media (max-width:575px){ [class*="parts131415_blog"] .row{ grid-template-columns:minmax(0, 1fr) !important; } } [class*="parts131415_blog"] .card{ position:relative; height:100%; border:0; border-radius:0; background-color:#FBF6EE; background-image: linear-gradient(rgba(30,58,80,.18),rgba(30,58,80,.18)), linear-gradient(rgba(30,58,80,.18),rgba(30,58,80,.18)), linear-gradient(rgba(30,58,80,.18),rgba(30,58,80,.18)), linear-gradient(rgba(30,58,80,.18),rgba(30,58,80,.18)); background-repeat:no-repeat; background-position:7px 7px, 7px calc(100% - 8px), 7px 7px, calc(100% - 8px) 7px; background-size:calc(100% - 14px) 1px, calc(100% - 14px) 1px, 1px calc(100% - 14px), 1px calc(100% - 14px); } [class*="parts131415_blog"] .card-body{ padding:clamp(18px,2.4vw,26px) !important; display:flex; flex-direction:column; gap:12px; height:100%; background:transparent; } [class*="parts131415_blog"] .card-title{ font-size:13px; letter-spacing:.14em; color:#9A5238; text-align:center; font-weight:700; font-family:var(--dyn-font-body); } [class*="parts131415_blog"] .card-body a{ display:flex; flex-direction:column; gap:12px; color:#1E3A50; } [class*="parts131415_blog"] .card-body a:hover{ color:#9A5238; } [class*="parts131415_blog"] .card-text{ font-size:16px; font-weight:700; line-height:1.7; } [class*="parts131415_blog"] [class*="_blog_thumbnail"]{ width:100% !important; height:240px !important; overflow:hidden !important; background:#fff !important; padding:0 !important; margin:0 !important; } [class*="parts131415_blog"] [class*="_blog_thumbnail"] img{ width:100% !important; height:100% !important; max-height:none !important; object-fit:cover !important; } /* ============================================================ C-3. ブログ一覧（parts222 系）＝ /blog（当初 /blog-ex/news としていたが、blog-ex は施工実績専用のため修正） ============================================================ */ .parts222_section, [class*="parts222_section"]{ position:relative; background-color:#fff; background-image:var(--bh-noise); padding:clamp(50px,7vw,96px) 0 clamp(60px,9vw,120px); } [class*="parts222_wrap"]{ max-width:1360px; margin:0 auto; padding:0 clamp(18px,5vw,64px); display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,3.4vw,44px); align-items:start; } @media (min-width:900px){ [class*="parts222_wrap"]{ grid-template-columns:minmax(0,1fr) minmax(0,300px); } } [class*="parts222_main"]{ min-width:0; } [class*="parts222_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)) !important; gap:clamp(18px,2.6vw,28px) !important; } [class*="parts222_post_wrap"]{ display:flex !important; flex-direction:column; background:#FBF6EE !important; color:#1E3A50 !important; max-width:none !important; border-radius:0 !important; } [class*="parts222_post_wrap"]:hover{ color:#9A5238 !important; } [class*="parts222_post_img"]{ width:100%; aspect-ratio:16/10; height:auto !important; overflow:hidden; background:#c9cec9; } [class*="parts222_post_img"] img{ width:100%; height:100%; object-fit:cover; } [class*="parts222_post_status"]{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:clamp(16px,2.2vw,22px) clamp(16px,2.2vw,22px) 0; } [class*="parts222_post_date"]{ font-size:13px; letter-spacing:.1em; color:#5E6E78 !important; } [class*="parts222_post_category"]{ padding:4px 10px !important; background:#E9F3F8 !important; font-size:12px !important; color:#2A6C8E !important; border:0 !important; border-radius:0 !important; max-width:none !important; } [class*="parts222_post_title-excerpt"]{ padding:10px clamp(16px,2.2vw,22px) clamp(16px,2.2vw,22px); } [class*="parts222_post_title"]{ font-family:var(--dyn-font-display) !important; font-size:17px !important; line-height:1.7; letter-spacing:.03em; color:inherit !important; } /* サイドバー */ [class*="parts222_sidebar"]{ min-width:0; max-width:none !important; display:flex; flex-direction:column; gap:clamp(20px,3vw,30px); } [class*="parts222_sidebar_wrap"]{ background:#FBF6EE; max-width:none !important; } [class*="parts222_sidebar_wrap"] h3{ padding:14px 18px !important; background:#1E3A50 !important; color:#fff !important; font-size:16px !important; letter-spacing:.1em; text-align:left !important; border:0 !important; border-radius:0 !important; font-family:var(--dyn-font-display) !important; } [class*="parts222_sidebar_wrap"].category_post_count h3{ background:#3E8CB3 !important; } [class*="parts222_sidebar_wrap"] ul{ padding:6px 18px 14px !important; margin:0; list-style:none; } [class*="parts222_sidebar_wrap"] li{ border-bottom:1px solid #E1DACD; } [class*="parts222_sidebar_wrap"] li > a{ display:block; padding:14px 0; color:#1E3A50; } [class*="parts222_sidebar_wrap"] li > a:hover{ color:#9A5238; } [class*="_sidebar_date"]{ display:block; font-size:12px; letter-spacing:.1em; color:#5E6E78; } [class*="_sidebar_post_title"]{ margin-top:4px; font-size:16px; line-height:1.7; } [class*="category_post_count"] li > a{ display:flex; align-items:center; justify-content:space-between; gap:12px; } [class*="_sidebar_post_category"]{ font-size:16px; } [class*="_sidebar_post_category_count"]{ min-width:34px; text-align:center; border:1px solid #C9D8E1; padding:2px 6px; font-size:12px; color:#5E6E78; } /* ============================================================ C-4. 施工実績一覧（parts228 系）＝ /blog-ex/instance ============================================================ */ .parts228_section, [class*="parts228_section"]{ position:relative; background-color:#fff; background-image:var(--bh-noise); padding:clamp(50px,7vw,96px) 0 clamp(60px,9vw,120px); } [class*="parts228_wrap"]{ max-width:1360px; margin:0 auto; padding:0 clamp(18px,5vw,64px); } [class*="parts228_main"]{ min-width:0; } [class*="parts228_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important; gap:clamp(20px,3vw,34px) !important; } [class*="parts228_post_wrap"]{ background:#FBF6EE !important; display:flex !important; flex-direction:column; max-width:none !important; border-radius:0 !important; } [class*="parts228_post_img"]{ width:100%; aspect-ratio:4/3; height:auto !important; overflow:hidden; background:#c9cec9; } [class*="parts228_post_img"] img{ width:100%; height:100%; object-fit:cover; } [class*="parts228_post_status"]{ padding:clamp(16px,2.2vw,24px); display:flex; flex-direction:column; gap:10px; flex:1 1 auto; } [class*="parts228_post_date"]{ font-size:13px; letter-spacing:.1em; color:#5E6E78 !important; } [class*="parts228_post_title"]{ font-family:var(--dyn-font-display) !important; font-size:17px !important; line-height:1.7; letter-spacing:.03em; } [class*="parts228_post_title"] a{ color:#1E3A50; } [class*="parts228_post_title"] a:hover{ color:#9A5238; } /* タグ（受領は「地域カテゴリ」を水色、「工事種別」を暖色にしていたが、実DOMでは タグの種類をクラスで判別できない。1種類にそろえてある＝00★申し送り★.md C-1 参照 */ .parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; } .parts-blog-ex_tag{ padding:5px 12px !important; background:#E9F3F8 !important; font-size:12px !important; color:#2A6C8E !important; border:0 !important; border-radius:0 !important; max-width:none !important; } /* ============================================================ C-5. ページ送り（parts222 / parts228 共通・受領と同じ四角ボタン） ============================================================ */ [class*="_pagenation"]{ margin-top:clamp(28px,4vw,48px); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; } /* ★箱（枠・地色・48px）を持たせるのは ＜a＞ と現在地(.current)だけ。 parts222 の番号は ＜span class="pagination_num"＞＜a＞2＜/a＞＜/span＞ の二重構造で届くので、 外側の素の span には地色も枠も寸法も持たせない（＝skin §3(B)の方針どおり箱を再定義しない）。 2026-10-15 修正: 旧版は span.pagination_num 自体を現在地と同じ navy 塗りにしていたため、 その中の ＜a＞（文字色 navy）が navy 地に重なり、現在地以外の数字が全部見えなくなっていた。 寸法も span と a で二重に効き、ページ送りが2行に折り返していた。 */ [class*="_pagenation"] span{ min-width:0; min-height:0; height:auto; padding:0; border:0 !important; background:transparent !important; display:inline-flex; align-items:center; justify-content:center; } [class*="_pagenation"] a{ min-width:48px; min-height:48px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; border-radius:0 !important; border:1px solid #1E3A50 !important; color:#1E3A50 !important; background:transparent !important; transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease; } [class*="_pagenation"] a:hover{ background:#1E3A50 !important; color:#fff !important; transform:translateY(-3px); box-shadow:0 10px 24px rgba(30,58,80,.22); } /* 現在地だけ塗りつぶし。テーマが付ける d-xl-block が display:block を !important で当ててくるため、 中央寄せは flex ではなく text-align / line-height で作る （display を !important で奪うと、SP で d-none が負けて数字が出てしまう）。 */ [class*="_pagenation"] .current{ min-width:48px !important; min-height:48px !important; padding:0 12px !important; background:#1E3A50 !important; color:#fff !important; border:1px solid #1E3A50 !important; font-size:16px; text-align:center; line-height:46px; } /* ============================================================ C-6. フォーム（お問い合わせ parts213 ／ 応募 parts219） 構造・タップ高・添付UIは skin §7 が受け持つ。ここは受領の配色にそろえるだけ。 ============================================================ */ .contact_section, [class*="_section_form"]{ position:relative; background-color:#fff; background-image:var(--bh-noise); padding:clamp(30px,5vw,60px) 0 clamp(60px,9vw,120px); } [class*="_form_wrap"]{ max-width:940px; margin:0 auto; padding:0 clamp(18px,5vw,64px); } /* 設問（dl）どうしの間隔。受領デザインは form 側の gap:22px だけで詰まっていたので、 1問ごとに上下30pxの余白を足す（2026-09-16 ディレクター指示「応募フォームが窮屈」）。 ★このセレクタは お問い合わせ（parts213）・応募（parts219）・確認・完了の**全フォーム共通**。 */ [class*="_form_wrap"] dl{ margin:30px 0; display:flex; flex-direction:column; gap:8px; } [class*="_form_wrap"] dt{ font-size:16px; color:#1E3A50; display:flex !important; flex-wrap:wrap; align-items:center !important; justify-content:flex-start !important; gap:10px; font-family:var(--dyn-font-body); } [class*="_form_wrap"] dd{ margin:0; } [class*="_form_wrap"] .required{ font-size:11px !important; padding:3px 8px !important; background:#C1755A !important; color:#fff !important; letter-spacing:.08em; border-radius:0 !important; } [class*="_form_wrap"] .attention{ font-size:12px !important; color:#9A5238 !important; } [class*="_form_wrap"] .error{ font-size:12px !important; color:#9A5238 !important; } [class*="_form_wrap"] input[type="text"], [class*="_form_wrap"] input[type="email"], [class*="_form_wrap"] input[type="tel"], [class*="_form_wrap"] input[type="number"], [class*="_form_wrap"] input[type="url"], [class*="_form_wrap"] textarea{ background:#fff !important; border:1px solid #C9D8E1 !important; border-radius:0 !important; color:#2B3742 !important; font-size:16px !important; } [class*="_form_wrap"] .contact_submit input, [class*="_form_wrap"] input[type="submit"]{ min-height:56px; padding:0 40px; background:#1E3A50 !important; color:#fff !important; border:0 !important; border-radius:0 !important; font-size:16px !important; letter-spacing:.1em; } [class*="_form_wrap"] input[name="back"]{ background:transparent !important; color:#1E3A50 !important; border:1px solid #1E3A50 !important; } /* ============================================================ C-7. 送信完了 / 404（skin §12。受領デザインに該当画面が無いので配色だけそろえる） ============================================================ */ .thanks, .notfound, .not-found{ background-color:#FBF6EE; background-image:var(--bh-noise); color:#2B3742; } .thanks h1, .thanks h2, .notfound h1, .not-found h1{ font-family:var(--dyn-font-display); color:#1E3A50; } /* ============================================================ D. 実採番アーマー（R-28） CueZillaはパーツごとに `(0,3,0)+!important` の自動CSSを吐くので、上の番号非依存セレクタ （属性セレクタ＝(0,1,0)）が負けることがある。**実機で採番を確認できたものだけ**ここへ足す。 ★このブロックは実機の採番に依存する＝パーツを作り直すと接尾辞が変わって効かなくなる。 そのときは実機で採り直して書き換える（上の番号非依存セレクタ側は触らない）。 ============================================================ */ /* トップのブログ新着枠（実機採番: parts131415_blog_RENFmwFV4d／2026-09-16 ディレクター確認） ・上余白 0（下は受領デザインのまま） ・カードは3列（受領の row-cols-lg-3 と同じ）。器の幅に関わらず4列にならないよう列数で固定 */ section.parts131415_blog_RENFmwFV4d{ padding-top:0 !important; } section.parts131415_blog_RENFmwFV4d .row{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; } @media (max-width:991px){ section.parts131415_blog_RENFmwFV4d .row{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } @media (max-width:575px){ section.parts131415_blog_RENFmwFV4d .row{ grid-template-columns:minmax(0, 1fr) !important; } }