/* ===== 20_site.css ===== */ /* ============================================================ * S00734 株式会社中川工業 — 案件CSS（受領 add.css を機械変換） * ・画像URLは分解時のメディアトークンから CueZilla CDN の実URLへ解決済み（convert.mjs） * ・R-27：追加CSS欄が落とす content 宣言に依存しない形へ書き換え済み * ・動的パーツ（ブログ／施工実績／フォーム）の意匠は skin が持つ（ここには書かない） * ============================================================ */ /* ========================================================= Corporate Template — "same DNA, different face" DNA kept : blue×teal, outline English labels, pill+arrow buttons, numbered features, overlapping panels. Arranged : refreshed palette + secondary accent, diagonal / curved section dividers, restyled cards, an asymmetric hero, a stats strip, circle-arrow buttons. Content & images are placeholders. ========================================================= */ :root{ --blue: #0b6fb8; --blue-2: #0a5c9c; --navy: #0e2a47; --accent: #12b5a5; /* teal (contrast accent) */ --accent-2: #0d9bd4; /* bright blue (secondary) */ --ink: #1a2230; --gray: #4a5563; --bg-soft: #f4f8fc; --line: #dbe6ef; --white: #ffffff; --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; --en: "Josefin Sans", sans-serif; --maxw: 1140px; --radius: 22px; --radius-xl: 44px; --sec-pad: 120px; /* セクション上下パディング（全コンテンツ共通・下で画面幅ごとに調整） */ --sec-gap: 56px; /* 見出し→本文の間隔（共通） */ /* R-18: 固定ヘッダーの実高さ（skin がシステム描画ページの上余白に加算する） */ --fixed-header-h: 80px; /* skin の動的パーツが参照する書体トークン（本体と食い違わせない） */ --font-display: var(--jp); --font-body: var(--jp); --font-numeric: var(--en); } @media (max-width:1024px){ :root{ --fixed-header-h: 62px; } } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:110px; overflow-x:clip; } body{ margin:0; font-family:var(--jp); font-weight:500; color:var(--ink); background:var(--white); line-height:1.95; letter-spacing:.03em; -webkit-font-smoothing:antialiased; overflow-x:clip; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4,p{ margin:0; } .en{ font-family:var(--en); } .ng-container{ width:min(var(--maxw), calc(100% - 48px)); margin-inline:auto; } /* ---------- Material Symbols (Google) ---------- */ .material-symbols-rounded, .pcard__icon, .icard__icon, .btn-cta__icon, .btn-tel__icon, .side-fixed__icon, .fact__icon{ font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; font-feature-settings:'liga'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; -webkit-font-smoothing:antialiased; } /* ---------- placeholders ---------- */ .ph-img,.ph-bg{ background:repeating-linear-gradient(45deg,#dfe8f0 0 14px,#e9f0f6 14px 28px); position:relative; } .ph-bg{ background:linear-gradient(135deg,var(--navy),var(--blue) 70%); } .ph-bg--dark{ background:linear-gradient(rgba(14,42,71,.82),rgba(11,111,184,.72)),repeating-linear-gradient(45deg,#20364a 0 20px,#2a4258 20px 40px); } /* ========================================================= Shared bits : ghost English text, section head, buttons ========================================================= */ .ghost-en{ font-family:var(--en); font-weight:700; font-style:italic; line-height:.9; color:transparent; -webkit-text-stroke:1.5px rgba(11,111,184,.14); user-select:none; pointer-events:none; white-space:nowrap; } /* eyebrow: short bar + English (replaces original dotted style) */ .eyebrow{ display:inline-flex; align-items:center; gap:12px; padding-left:46px; background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-size:34px 3px; background-position:left center; font-family:var(--en); font-weight:600; letter-spacing:.22em; color:var(--blue); font-size:14px; } .eyebrow--center{ } .eyebrow--light{ color:#cfe6f7; } .sec-head{ margin-bottom:var(--sec-gap); } .sec-head--center{ text-align:center; } .sec-head--center .eyebrow{ padding-right:46px; background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)); background-size:34px 3px,34px 3px; background-position:left center,right center; } .sec-head__ttl{ font-size:clamp(28px,3.4vw,40px); font-weight:900; letter-spacing:.05em; margin-top:16px; line-height:1.5; } .sec-head__sub{ font-size:20px; font-weight:700; margin-top:10px; } .sec-head--light .sec-head__ttl,.sec-head--light .sec-head__sub{ color:#fff; } /* circle-arrow pill button */ .ng-btn{ --c:var(--navy); position:relative; display:inline-flex; align-items:center; gap:18px; min-width:280px; justify-content:space-between; padding:16px 16px 16px 40px; border:1.5px solid var(--c); border-radius:60px; font-weight:700; letter-spacing:.08em; color:var(--c); overflow:hidden; background-color:transparent; background-image:linear-gradient(var(--c),var(--c)); background-repeat:no-repeat; background-size:0% 100%; background-position:right center; transition:color .28s ease,border-color .28s ease,background-size .35s ease,background-position 0s .35s; } .ng-btn:hover{ background-size:100% 100%; background-position:left center; transition:color .28s ease,border-color .28s ease,background-size .35s ease,background-position 0s 0s; } .ng-btn > span{ position:relative; z-index:1; transition:color .28s; } .ng-btn__arrow{ width:40px; height:40px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; flex-shrink:0; transition:background .28s; } .ng-btn:hover{ color:#fff; } .ng-btn:hover .ng-btn__arrow{ background:var(--accent); } .ng-btn--light{ --c:#fff; } .ng-btn--light:hover{ color:var(--navy); } .ng-btn--light:hover .ng-btn__arrow{ background:var(--accent); } .ng-btn--accent{ --c:var(--accent); color:var(--accent); } /* orange CTA */ .btn-cta{ display:flex; align-items:center; gap:14px; background:linear-gradient(180deg,#17c9b5,var(--accent)); color:#fff; border-radius:60px; padding:11px 26px 11px 12px; box-shadow:0 8px 18px rgba(18,181,165,.3); transition:transform .2s,box-shadow .2s; } .btn-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(18,181,165,.4); } .btn-cta__icon{ width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); display:grid; place-items:center; font-size:20px; } .btn-cta__body{ display:flex; flex-direction:column; line-height:1.3; } .btn-cta__lead{ font-size:11px; opacity:.95; } .btn-cta__label{ font-weight:700; font-size:16px; letter-spacing:.05em; white-space:nowrap; } .btn-cta__lead{ white-space:nowrap; } .btn-cta--large{ padding:16px 40px 16px 18px; } .btn-cta--large .btn-cta__icon{ width:56px; height:56px; font-size:24px; } .btn-cta--large .btn-cta__label{ font-size:20px; } /* white tel button */ .btn-tel{ display:flex; align-items:center; gap:16px; background:#fff; color:var(--ink); border-radius:60px; padding:14px 40px; box-shadow:0 8px 18px rgba(0,0,0,.15); } .btn-tel__icon{ font-size:24px; color:var(--blue); } .btn-tel__body{ display:flex; flex-direction:column; line-height:1.2; } .btn-tel__num{ font-family:var(--en); font-weight:700; font-size:26px; font-style:italic; } .btn-tel__num .en{ font-size:15px; } .btn-tel__time{ font-size:11px; color:var(--gray); } /* ========================================================= Header ========================================================= */ .header{ position:fixed; inset:0 0 auto 0; z-index:100; padding:0; width:100%; transition:padding .35s ease; } .header__inner{ width:100%; max-width:none; margin-inline:auto; background:#fff; border-radius:0; box-shadow:0 2px 12px rgba(14,42,71,.08); height:80px; padding:0 0 0 40px; display:flex; align-items:center; gap:26px; transition:max-width .35s ease, border-radius .35s ease, height .35s ease, box-shadow .35s ease, padding-left .35s ease; } .header.is-scrolled{ padding:16px 24px; } .header.is-scrolled .header__inner{ max-width:1500px; border-radius:60px; box-shadow:0 8px 26px rgba(14,42,71,.1); height:74px; padding-left:32px; } .brand{ display:flex; flex-direction:column; line-height:1; flex-shrink:0; } .brand__sub{ font-size:10px; font-weight:700; color:var(--blue); letter-spacing:.15em; } .brand__main{ font-size:25px; font-weight:900; color:var(--navy); letter-spacing:.04em; } .gnav{ margin-left:auto; } .gnav__list{ display:flex; align-items:center; } .gnav__list li{ position:relative; padding:0 14px; } .gnav__list > li + li{ background-image:linear-gradient(var(--line),var(--line)); background-repeat:no-repeat; background-size:1px 14px; background-position:left center; } /* R-27: pull-down chevron as a real element (Material expand_more) - hidden by default = SP */ .gnav-a__caret{ display:none; width:.42em; height:.42em; margin-left:3px; margin-top:-.2em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); } .gnav__list a{ font-weight:700; font-size:15px; letter-spacing:.03em; transition:color .2s; padding-bottom:4px; white-space:nowrap; } .gnav__list a:hover{ color:var(--blue); } .gnav__list a.is-current{ color:var(--blue); border-bottom:2px solid var(--accent); } /* dropdown（親→子の全ページ導線） */ .gnav__sub{ display:none; } @media (min-width:1025px){ .gnav__list > li.has-sub > a{ display:inline-flex; align-items:center; gap:1px; } .gnav__list > li.has-sub > a .gnav-a__caret{ display:inline-block; } .gnav__sub{ display:block; position:absolute; top:100%; left:50%; min-width:200px; background:#fff; border-radius:14px; box-shadow:0 14px 34px rgba(14,42,71,.16); padding:10px; opacity:0; visibility:hidden; transform:translateX(-50%) translateY(12px); transition:opacity .2s,transform .2s; z-index:130; } .gnav__list > li.has-sub:hover .gnav__sub, .gnav__list > li.has-sub:focus-within .gnav__sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .gnav__sub li{ padding:0; } .gnav__sub a{ display:block; padding:10px 16px; border-radius:8px; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; } .gnav__sub a:hover{ background:var(--bg-soft); color:var(--blue); } .gnav__sub a.is-current{ border-bottom:none; } } .header__tel{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; } .header__tel-num{ font-family:var(--en); font-weight:700; font-size:25px; color:var(--ink); font-style:italic; } .header__tel-num .en{ font-size:15px; } .header__tel-time{ font-size:11px; color:var(--gray); } .header__cta{ align-self:stretch; border-radius:0; transition:border-radius .35s ease; flex-shrink:0; } .header__cta .btn-cta__body{ flex-shrink:0; } .header.is-scrolled .header__cta{ border-radius:0 60px 60px 0; } /* fixed side buttons */ .side-fixed{ position:fixed; top:120px; right:0; z-index:90; display:flex; flex-direction:column; gap:2px; } .side-fixed__btn{ width:92px; padding:16px 8px; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:700; font-size:13px; letter-spacing:.05em; transition:filter .2s; border-radius:10px 0 0 10px; } .side-fixed__btn:hover{ filter:brightness(1.08); } .side-fixed__label{ white-space:nowrap; letter-spacing:0; } .side-fixed__btn--orange{ background:linear-gradient(180deg,#17c9b5,var(--accent)); } /* CTA＝ティール（クラス名は後で改名） */ .side-fixed__btn--teal{ background:linear-gradient(180deg,#2f9bd6,var(--accent-2)); } /* 副＝ブルー */ .side-fixed__lead{ font-size:9px; font-weight:500; white-space:nowrap; letter-spacing:0; } .side-fixed__icon{ font-size:22px; } .side-copy{ position:fixed; right:14px; top:52%; transform:translateY(-50%); writing-mode:vertical-rl; z-index:80; font-family:var(--en); font-size:11px; letter-spacing:.2em; color:#a9bccb; } /* ========================================================= HOME hero — asymmetric split with diagonal cut ========================================================= */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; background:linear-gradient(150deg,rgba(14,42,71,.9),rgba(11,111,184,.9) 85%), url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/kv-welding.webp) center/cover no-repeat; color:#fff; overflow:hidden; } /* 巨大な N で中の写真を切り抜く（KEY VISUAL） */ .hero__cut{ position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); height:120vh; width:120vh; z-index:1; pointer-events:none; background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/kv-welding.webp) center/cover no-repeat; clip-path:polygon(0% 100%, 0% 0%, 30% 0%, 70% 60%, 70% 0%, 100% 0%, 100% 100%, 70% 100%, 30% 40%, 30% 100%); filter:drop-shadow(0 24px 60px rgba(0,0,0,.45)); } /* テキストの可読性を確保するスクリム */ .hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(100deg,rgba(10,28,50,.92) 0%,rgba(10,28,50,.62) 30%,rgba(10,28,50,0) 52%); } .hero__ghost{ position:absolute; left:2%; bottom:4%; font-size:clamp(90px,12vw,180px); -webkit-text-stroke:1.5px rgba(255,255,255,.16); z-index:3; } .hero__body{ position:relative; z-index:3; padding:120px 5% 100px 8%; max-width:640px; } .hero__title{ font-size:clamp(28px,3.6vw,46px); font-weight:900; line-height:1.55; letter-spacing:.06em; margin:22px 0 34px; } @media (min-width:1025px){ /* PC全画面でもキャッチコピーが折り返さないように */ .hero__body{ max-width:none; } .hero__title{ white-space:nowrap; } } .hero__title .ng-mark{ background:linear-gradient(transparent 62%,rgba(18,181,165,.55) 62%); padding:0 .1em; } .hero__badge{ position:absolute; right:3%; bottom:4%; z-index:4; width:min(24vw,320px); } .hero__badge-img{ display:block; width:100%; height:auto; } .hero__scroll{ position:absolute; left:40px; bottom:22px; z-index:4; writing-mode:vertical-rl; font-family:var(--en); letter-spacing:.3em; font-size:12px; color:#fff; } .hero__side{ position:absolute; left:22px; top:50%; transform:translateY(-50%); z-index:3; writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--en); font-weight:700; font-size:clamp(26px,3vw,52px); letter-spacing:.28em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.26); user-select:none; pointer-events:none; } .hero__scroll-line{ display:block; width:1px; height:52px; background:#fff; margin:14px auto 0; animation:scrollline 2s ease-in-out infinite; } @keyframes scrollline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ========================================================= MESSAGE ========================================================= */ .message{ position:relative; padding:var(--sec-pad) 0; overflow:hidden; background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)), url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/message-bg.webp) center/cover no-repeat; background-attachment:scroll, fixed; } .message__ghost{ position:absolute; top:40px; right:-20px; font-size:clamp(80px,12vw,170px); } .message__inner{ position:relative; z-index:1; width:min(var(--maxw),calc(100% - 48px)); margin-inline:auto; } .message__lead{ font-size:clamp(20px,2.2vw,28px); font-weight:900; line-height:1.9; margin:20px 0 44px; } .message__lead .ng-mark{ color:var(--blue); } .message__body{ max-width:780px; } .message__body p{ font-weight:500; margin-bottom:20px; color:var(--gray); } /* ========================================================= STATS strip (new) — diagonal navy band ========================================================= */ .stats{ background:linear-gradient(120deg,var(--navy),var(--blue-2)); color:#fff; padding:58px 6%; border-radius:0; width:100%; margin:0; box-shadow:0 20px 44px rgba(14,42,71,.18); } .stats__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start; width:min(var(--maxw),calc(100% - 48px)); margin-inline:auto; } .stat{ text-align:center; position:relative; } .stat+.stat{ background-image:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)); background-repeat:no-repeat; background-size:1px 80%; background-position:left center; } .stat__num{ font-family:var(--en); font-weight:700; font-size:clamp(40px,5vw,64px); line-height:1; color:#fff; } .stat__num .u{ font-size:.45em; color:var(--accent); margin-left:4px; } .stat__label{ display:block; font-size:14px; font-weight:700; margin-top:8px; letter-spacing:.05em; line-height:1.5; } /* ========================================================= SERVICE — horizontal cards ========================================================= */ .service{ padding:var(--sec-pad) 0; position:relative; overflow:hidden; } .service__ghost{ position:absolute; top:60px; left:50%; transform:translateX(-50%); font-size:clamp(90px,15vw,210px); } .service__cards{ display:grid; gap:32px; max-width:960px; margin:0 auto; } .scard{ display:grid; grid-template-columns:300px 1fr; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 12px 30px rgba(14,42,71,.1); transition:transform .25s,box-shadow .25s; } .scard:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(14,42,71,.16); } .scard__img{ min-height:220px; } /* SERVICE 写真: スクロールで左から右へ徐々に出現 */ .scard{ overflow:hidden; } .scard__img{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.2,.75,.25,1); } .scard.is-in .scard__img{ clip-path:inset(0 0 0 0); } .scard__body{ padding:36px 40px; position:relative; } .scard__no{ font-family:var(--en); font-weight:700; color:var(--accent); letter-spacing:.1em; } .scard__title{ font-size:23px; font-weight:900; color:var(--navy); margin:4px 0 12px; } .scard__title .en{ display:block; font-size:13px; font-weight:600; color:var(--blue); letter-spacing:.06em; } .scard__text{ color:var(--gray); margin-bottom:20px; } /* ========================================================= RECRUIT ========================================================= */ .recruit{ position:relative; display:grid; grid-template-columns:1fr 1fr; background:linear-gradient(150deg,var(--navy),var(--blue) 90%); color:#fff; overflow:hidden; } .recruit__ghost{ position:absolute; top:28px; left:-10px; z-index:2; -webkit-text-stroke:1.5px rgba(255,255,255,.16); font-size:clamp(80px,12vw,160px); } .recruit__body{ padding:var(--sec-pad) 6%; position:relative; z-index:3; } .recruit__title{ font-size:36px; font-weight:900; letter-spacing:.06em; margin:16px 0 24px; } .recruit__text{ max-width:460px; margin-bottom:36px; color:#dcebf6; } .recruit__img{ min-height:560px; position:relative; } .recruit__img{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 15%,#000 30%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 15%,#000 30%); } /* ========================================================= NEWS ========================================================= */ .news{ padding:var(--sec-pad) 0; background:var(--bg-soft); } .news__list{ max-width:900px; margin:0 auto; } .news__item{ border-bottom:1px solid var(--line); } .news__item:first-child{ border-top:1px solid var(--line); } .news__item a{ display:flex; align-items:center; gap:24px; padding:24px 12px; transition:background .2s,padding .2s; flex-wrap:wrap; } .news__item a:hover{ background:#fff; padding-left:22px; } .news__date{ font-family:var(--en); font-weight:600; color:var(--blue); letter-spacing:.05em; } .news__cat{ background:var(--navy); color:#fff; font-size:12px; font-weight:700; padding:3px 18px; border-radius:20px; } .news__ttl{ flex:1; min-width:240px; font-weight:500; } .news__more{ text-align:center; margin-top:52px; } /* ========================================================= CTA band (shared component) ========================================================= */ .cta{ position:relative; color:#fff; padding:var(--sec-pad) 0; overflow:hidden; text-align:center; } .cta .ph-bg{ position:absolute; inset:0; } .cta__ghost{ position:absolute; top:50px; left:50%; transform:translateX(-50%); z-index:1; -webkit-text-stroke:1.5px rgba(255,255,255,.2); font-size:clamp(80px,14vw,200px); } .cta__inner{ position:relative; z-index:2; width:min(var(--maxw),calc(100% - 48px)); margin-inline:auto; } .cta__lead{ font-family:var(--en); letter-spacing:.15em; color:#cfe6f7; margin-bottom:6px; } .cta__title{ font-size:36px; font-weight:900; letter-spacing:.08em; } .cta__text{ margin:22px 0 42px; } .cta__btns{ display:flex; justify-content:center; align-items:stretch; gap:24px; flex-wrap:wrap; } /* ========================================================= PAGE HERO (shared, lower pages) ========================================================= */ .phero{ position:relative; padding:170px 0 130px; color:#fff; overflow:hidden; } .phero .ph-bg{ position:absolute; inset:0; background:linear-gradient(rgba(14,42,71,.9),rgba(11,111,184,.82)), url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/recruit.webp) center/cover no-repeat; } .phero__ghost{ position:absolute; right:-10px; bottom:-6px; z-index:1; -webkit-text-stroke:1.5px rgba(255,255,255,.16); font-size:clamp(80px,13vw,180px); } /* 全体を一体のアウトラインに（塗りなし・線のみ） */ .phero__ghost--merged{ color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.28); letter-spacing:-.02em; filter:none; } .phero__inner{ position:relative; z-index:2; width:min(var(--maxw),calc(100% - 48px)); margin-inline:auto; } .phero__en{ display:block; font-weight:600; font-style:italic; letter-spacing:.2em; color:#cfe6f7; font-size:16px; } .phero__title{ font-size:clamp(30px,4vw,46px); font-weight:900; letter-spacing:.08em; margin-top:6px; } .phero__wave{ position:absolute; left:0; right:0; bottom:-1px; height:48px; background:var(--white); clip-path:ellipse(75% 100% at 50% 100%); } .breadcrumb{ background:var(--white); border-bottom:1px solid var(--line); } .breadcrumb__inner{ width:min(var(--maxw),calc(100% - 48px)); margin-inline:auto; padding:16px 0; font-size:13px; color:var(--gray); } .breadcrumb a:hover{ color:var(--blue); } .breadcrumb__sep{ margin:0 10px; color:var(--line); } /* ========================================================= Generic lower-page content sections (shared presentation) ========================================================= */ .section{ padding:var(--sec-pad) 0; } .works-sec{ position:relative; overflow:hidden; background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)), url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/works-bg.webp) center/cover no-repeat; background-attachment:scroll, fixed; } .works-sec > .ng-container{ position:relative; z-index:1; } /* WORKS: 3カラムのカード（カテゴリ→見出し→画像） */ .works-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:start; } .wcard{ background:#fff; padding:36px 32px 32px; box-shadow:0 12px 30px rgba(14,42,71,.08); } .wcard__cat{ display:block; text-align:center; font-size:14px; font-weight:700; color:var(--navy); letter-spacing:.08em; } .wcard__ttl{ font-size:16px; font-weight:700; line-height:1.8; color:var(--blue-2); margin:26px 0 24px; } .wcard__img{ aspect-ratio:4 / 3; } @media (max-width:860px){ .works-cards{ grid-template-columns:1fr; gap:24px; } } .section--soft{ background:var(--bg-soft); } .lead-block{ text-align:center; max-width:760px; margin:0 auto var(--sec-gap); } .lead-block .sec-head__ttl{ margin-top:14px; } .lead-block p{ color:var(--gray); margin-top:20px; } /* ---------- long-form content components (中川 各ページ本文) ---------- */ .content-block{ max-width:920px; margin:0 auto; } .content-block + .content-block{ margin-top:56px; } .c-h2{ font-size:clamp(21px,2.4vw,28px); font-weight:900; color:var(--navy); line-height:1.5; margin-bottom:18px; position:relative; padding-left:18px; } .c-h2{ background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-position:left 0px top 0.2em; background-size:5px calc(100% - 0.4em); } .c-h3{ font-size:18px; font-weight:800; color:var(--navy); margin:26px 0 8px; } .c-p{ color:var(--gray); margin-bottom:16px; } .c-p:last-child{ margin-bottom:0; } .c-list{ margin:18px 0; } .c-list li{ position:relative; padding-left:30px; margin-bottom:12px; color:var(--gray); } .c-ck{ position:absolute; left:0; top:.35em; width:20px; height:20px; border-radius:50%; background:var(--accent); } .c-ck > i{ position:absolute; left:6px; top:4px; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); } .c-list strong{ color:var(--navy); } .c-note{ font-size:13px; color:#8a99a8; margin-top:12px; } .panel{ background:#fff; border-radius:var(--radius); box-shadow:0 12px 30px rgba(14,42,71,.08); padding:40px 44px; } .panel--soft{ background:var(--bg-soft); box-shadow:none; } /* timeline（1日の流れ） */ .timeline{ max-width:620px; margin:24px auto 0; border-left:2px solid var(--line); padding-left:30px; } .timeline li{ position:relative; margin-bottom:20px; color:var(--gray); } .timeline li:last-child{ margin-bottom:0; } .tl-dot{ position:absolute; left:-38px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #fff,0 0 0 5px var(--line); } .timeline time{ font-family:var(--en); font-weight:700; color:var(--blue); margin-right:14px; } /* stepflow（工程・流れ） */ .stepflow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:16px; justify-content:center; } .stepflow__item{ flex:1; min-width:180px; background:#fff; border-radius:var(--radius); box-shadow:0 12px 30px rgba(14,42,71,.08); padding:26px 22px; text-align:center; border-top:5px solid var(--blue); } .stepflow__no{ font-family:var(--en); font-weight:700; color:var(--accent); letter-spacing:.1em; } .stepflow__ttl{ font-size:17px; font-weight:800; color:var(--navy); margin:6px 0 8px; } .stepflow__item p{ color:var(--gray); font-size:14px; } /* 物件チップ */ /* 施工実績: 2カラム詳細（左に画像・右にテキスト） */ @media (max-width:820px){ .work-detail{ grid-template-columns:1fr; gap:24px; } .work-detail--reverse .work-detail__img{ grid-column:1; grid-row:1; } .work-detail--reverse .work-detail__body{ grid-column:1; grid-row:2; } .work-detail__img{ min-height:220px; } } @media (max-width:560px){ .panel{ padding:28px 24px; } .stepflow__item{ min-width:140px; } } /* info table (company) */ .info-table{ width:min(900px,100%); margin:0 auto; border-top:1px solid var(--line); } .info-table dl{ display:grid; grid-template-columns:220px 1fr; border-bottom:1px solid var(--line); margin:0; } .info-table dt{ padding:24px 20px; font-weight:700; color:var(--navy); background:var(--bg-soft); } .info-table dd{ padding:24px 20px; margin:0; color:var(--gray); } /* feature grid (3-up cards, shared) */ .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .card-grid--2{ grid-template-columns:repeat(2,1fr); } .icard{ background:#fff; border-radius:var(--radius); padding:40px 30px; box-shadow:0 12px 30px rgba(14,42,71,.08); position:relative; border-top:5px solid var(--blue); } .icard__no{ font-family:var(--en); font-weight:700; font-size:40px; color:rgba(11,111,184,.16); line-height:1; } .icard__icon{ width:64px; height:64px; border-radius:50%; background:var(--bg-soft); display:grid; place-items:center; font-size:28px; margin:-10px 0 16px; } .icard__title{ font-size:20px; font-weight:900; color:var(--navy); margin-bottom:12px; } .icard__text{ color:var(--gray); font-size:15px; } /* REASON: 数字を大きく、アイコンは右上に大きくうっすら背景として */ .card-grid--reason .icard{ overflow:hidden; padding:38px 34px; } .card-grid--reason .icard__no{ font-size:64px; } .card-grid--reason .icard__icon{ position:absolute; top:-18px; right:-14px; width:auto; height:auto; margin:0; border-radius:0; background:none; font-size:130px; color:rgba(11,111,184,.08); place-items:start; pointer-events:none; } .card-grid--reason .icard__title{ position:relative; z-index:1; margin-top:6px; } .card-grid--reason .icard__text{ position:relative; z-index:1; } /* feature: card 01 spans full width, icon on the right */ .icard--feature{ grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:40px; padding:48px 48px; } .icard--feature .icard__no{ grid-column:1; font-size:56px; } .icard--feature .icard__icon{ grid-column:2; grid-row:1 / span 3; align-self:center; width:132px; height:132px; font-size:64px; margin:0; } .icard--feature .icard__title{ grid-column:1; font-size:32px; margin:6px 0 12px; } .icard--feature .icard__text{ grid-column:1; font-size:17px; } @media (max-width:560px){ .icard--feature{ grid-template-columns:1fr; text-align:center; } .icard--feature .icard__icon{ grid-column:1; grid-row:auto; justify-self:center; margin:8px 0 16px; } } /* FAQ accordion (shared) */ .faq-list{ max-width:860px; margin:0 auto; } .faq{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; } .faq__q{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; padding:24px 26px; background:none; border:none; cursor:pointer; font-weight:700; font-size:16px; color:var(--navy); font-family:inherit; } .faq__badge{ flex-shrink:0; width:36px; height:36px; border-radius:50%; color:#fff; font-family:var(--en); font-weight:700; display:grid; place-items:center; } .faq__badge--q{ background:var(--blue); } .faq__badge--a{ background:var(--accent); } .faq__mark{ margin-left:auto; width:22px; height:22px; position:relative; flex-shrink:0; } .faq__mark{ background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-position:center,center; background-size:2px 16px,16px 2px; transition:background-size .3s; } .faq.is-open .faq__mark{ background-size:2px 0,16px 2px; } .faq__a{ overflow:hidden; max-height:0; transition:max-height .35s ease; } .faq.is-open .faq__a{ max-height:800px; } .faq__a-inner{ overflow:hidden; } .faq__a-body{ display:flex; gap:16px; padding:0 26px 26px; color:var(--gray); } /* recruit job cards */ .job{ display:grid; grid-template-columns:1fr; gap:20px; } .job__item{ background:#fff; border-radius:var(--radius); box-shadow:0 12px 30px rgba(14,42,71,.08); padding:36px 40px; border-left:5px solid var(--accent); } .job__title{ font-size:20px; font-weight:900; color:var(--navy); margin-bottom:14px; } .job__meta{ display:grid; grid-template-columns:140px 1fr; gap:8px 0; color:var(--gray); font-size:15px; } .job__meta dt{ font-weight:700; color:var(--navy); } .job__meta dd{ margin:0; } /* pagetop */ .pagetop{ position:fixed; right:20px; bottom:20px; z-index:95; width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:16px; opacity:0; pointer-events:none; transition:opacity .3s; } .pagetop.is-show{ opacity:.92; pointer-events:auto; } /* hamburger */ .hamburger{ display:none; width:48px; height:48px; margin-left:auto; margin-right:12px; background:none; border:none; cursor:pointer; } .hamburger span{ display:block; width:26px; height:2px; background:var(--navy); margin:6px auto; transition:.3s; } .hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } /* reveal */ [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease; } [data-reveal].is-in{ opacity:1; transform:none; } /* 下層ページ 出現演出（上品・控えめ） */ [data-rv]{ will-change:opacity,transform; } [data-rv="up"]{ opacity:0; transform:translateY(18px); transition:opacity .95s cubic-bezier(.22,.7,.25,1),transform .95s cubic-bezier(.22,.7,.25,1); } [data-rv="left"]{ opacity:0; transform:translateX(-14px); transition:opacity .9s ease,transform .9s cubic-bezier(.22,.7,.25,1); } [data-rv="fade"]{ opacity:0; transition:opacity 1.1s ease; } [data-rv="bar"]{ opacity:0; transform:translateY(10px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.25,1); } .c-h2[data-rv="bar"]{ background-size:5px 0; transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.25,1),background-size .85s cubic-bezier(.22,.7,.25,1) .18s; } [data-rv="mask"]{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s cubic-bezier(.2,.75,.25,1); } [data-rv="up"].is-rv,[data-rv="left"].is-rv,[data-rv="bar"].is-rv{ opacity:1; transform:none; } [data-rv="fade"].is-rv{ opacity:1; } .c-h2[data-rv="bar"].is-rv{ background-size:5px calc(100% - 0.4em); } [data-rv="mask"].is-rv{ clip-path:inset(0 0 0 0); } /* ページヘッダーの入場 */ @keyframes ph-zoom{ from{ transform:scale(1.07); opacity:.35; } to{ transform:scale(1); opacity:1; } } @keyframes ph-ghost{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } } @keyframes rv-fadeup{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } .phero .ph-bg{ animation:ph-zoom 2.2s cubic-bezier(.2,.7,.25,1) both; } .phero__ghost{ animation:ph-ghost 1.5s cubic-bezier(.2,.7,.25,1) .25s both; } .phero__en{ animation:rv-fadeup .9s ease .12s both; } .phero__wave{ animation:rv-fadeup 1s ease .55s both; } .breadcrumb__inner{ animation:rv-fadeup .9s ease .5s both; } /* さりげないホバー */ .info-table dl{ transition:background-color .35s ease; } .info-table dl:hover{ background:rgba(11,111,184,.04); } .breadcrumb a{ position:relative; } .breadcrumb a{ padding-bottom:2px; background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-size:0% 1px; background-position:left bottom; transition:background-size .4s cubic-bezier(.22,.7,.25,1); } .breadcrumb a:hover{ background-size:100% 1px; } @media (prefers-reduced-motion:reduce){ [data-rv]{ opacity:1 !important; transform:none !important; clip-path:none !important; } .phero .ph-bg,.phero__ghost,.phero__en,.phero__wave,.breadcrumb__inner{ animation:none !important; } } /* 見出しの文字送り出現 */ .char-rv{ display:inline-block; opacity:0; transform:translateY(.5em); transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1); } .is-in .char-rv{ opacity:1; transform:none; } /* ========================================================= 下層ページ: ナンバリング記事ブロック（画像はドラッグ&ドロップ） ========================================================= */ .art{ position:relative; display:grid; grid-template-columns:1fr minmax(0,38%); grid-template-rows:auto 1fr; column-gap:56px; row-gap:20px; align-items:start; max-width:1040px; margin:0 auto; } .art + .art{ margin-top:96px; } .art__head{ grid-column:1; display:block; } .art__num{ display:none; } .art__head .eyebrow{ margin-bottom:12px; } .art__title{ position:relative; padding-left:18px; font-size:clamp(21px,2.4vw,28px); font-weight:900; color:var(--navy); line-height:1.5; } .art__title{ background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-position:left 0px top 0.2em; background-size:5px calc(100% - 0.4em); } .art__body{ grid-column:1; } .art__body .c-p:last-child,.art__body .c-list:last-child{ margin-bottom:0; } .art__photo{ grid-column:2; grid-row:1 / span 2; align-self:stretch; border-radius:var(--radius); overflow:hidden; box-shadow:0 16px 40px rgba(14,42,71,.12); min-height:340px; } .art--rev{ grid-template-columns:minmax(0,38%) 1fr; } .art--rev .art__head,.art--rev .art__body{ grid-column:2; } .art--rev .art__photo{ grid-column:1; } .art--full{ grid-template-columns:1fr; } .art--full .art__head,.art--full .art__body{ grid-column:1; } .art__sub{ font-size:18px; font-weight:800; color:var(--navy); margin:26px 0 8px; display:flex; align-items:center; gap:12px; } .art__sub{ padding-left:38px; background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat; background-size:26px 3px; background-position:left center; } @media (max-width:860px){ .art,.art--rev{ grid-template-columns:1fr; } .art__head,.art__body,.art--rev .art__head,.art--rev .art__body{ grid-column:1; } .art__photo,.art--rev .art__photo{ grid-column:1; grid-row:auto; } image-slot.art__photo,.art__photo,.art__photo image-slot{ min-height:220px; } .art + .art{ margin-top:64px; } } /* 下層ページ: 番号付きカテゴリ見出し（FAQ 等） */ .faq-cat{ display:flex; align-items:center; gap:14px; font-size:clamp(20px,2.2vw,26px); font-weight:900; color:var(--navy); margin-bottom:30px; padding-bottom:16px; border-bottom:2px solid var(--line); max-width:860px; margin-inline:auto; } .faq-cat .fact__icon{ flex-shrink:0; width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:24px; } .faq-cat__num{ flex-shrink:0; width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--en); font-weight:700; font-size:18px; display:grid; place-items:center; } /* 下層ページ: 面で見せる項目グリッド（箇条書きの代わり） */ .factgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; max-width:1040px; margin:0 auto; } .factgrid--2{ grid-template-columns:repeat(2,1fr); } @media (max-width:700px){ .factgrid--2{ grid-template-columns:1fr; } } /* 実績カード */ .works-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1040px; margin:0 auto; } .work-chip{ background:#fff; border-radius:var(--radius); padding:32px 30px; box-shadow:0 12px 30px rgba(14,42,71,.08); border-left:5px solid var(--blue); } .work-chip__cat{ font-family:var(--en); font-weight:600; font-size:13px; letter-spacing:.06em; color:var(--accent); } .work-chip__name{ font-size:22px; font-weight:900; color:var(--navy); margin:6px 0 0; } .work-chip p{ color:var(--gray); font-size:15px; } @media (max-width:700px){ .works-grid{ grid-template-columns:1fr; } } .fact{ background:#fff; border-radius:var(--radius); padding:30px 28px; box-shadow:0 12px 30px rgba(14,42,71,.08); border-top:4px solid var(--blue); } .fact__icon{ font-family:'Material Symbols Rounded'; font-feature-settings:'liga'; font-size:30px; color:var(--accent); line-height:1; } .fact__ttl{ font-size:17px; font-weight:800; color:var(--navy); margin:12px 0 8px; } .fact p{ color:var(--gray); font-size:15px; } .fact__photo{ aspect-ratio:1 / 1; height:auto; border-radius:var(--radius); overflow:hidden; margin:-8px 0 20px; } .fact__photo--contain{ aspect-ratio:1 / 1; background-color:#fff; background-size:contain !important; } /* 横並び3枚の写真 */ .photo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; } .photo-row__item{ height:220px; border-radius:var(--radius); overflow:hidden; box-shadow:0 12px 30px rgba(14,42,71,.1); } @media (max-width:700px){ .photo-row{ grid-template-columns:1fr; } .photo-row__item{ height:200px; } } .fact__val{ font-family:var(--en); font-weight:700; font-size:30px; color:var(--blue); line-height:1.2; } /* 下層ページ: 引用（代表メッセージ等） */ /* 下層ページ: 強調コメント帯 */ .statement{ background:var(--bg-soft); border-left:6px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:clamp(28px,3.5vw,40px); max-width:1040px; margin:0 auto; } .statement p{ font-size:clamp(17px,2vw,21px); font-weight:800; color:var(--navy); line-height:1.85; } /* 下層ページ: コンセプト帯 */ /* インタビュー（人を知る） */ .itv-list{ display:grid; gap:64px; max-width:1040px; margin:0 auto; } .itv{ display:grid; grid-template-columns:minmax(0,40%) 1fr; gap:44px; align-items:center; } .itv--rev{ grid-template-columns:1fr minmax(0,40%); } .itv--rev .itv__photo{ grid-column:2; grid-row:1; } .itv--rev .itv__body{ grid-column:1; grid-row:1; } .itv__photo{ aspect-ratio:4 / 3; border-radius:var(--radius); overflow:hidden; box-shadow:0 16px 40px rgba(14,42,71,.12); } .itv__name{ font-size:26px; font-weight:900; color:var(--navy); } .itv__meta{ display:block; font-family:var(--en); font-weight:600; font-size:14px; letter-spacing:.08em; color:var(--accent); margin:4px 0 18px; } .itv__text{ color:var(--gray); } @media (max-width:820px){ .itv,.itv--rev{ grid-template-columns:1fr; gap:24px; } .itv--rev .itv__photo{ grid-column:1; grid-row:1; } .itv--rev .itv__body{ grid-column:1; grid-row:2; } } /* ========================================================= 投稿一覧（施工実績・ブログ） ========================================================= */ .post-lead{ max-width:960px; margin:0 auto 72px; color:var(--gray); } @media (max-width:860px){ .post-grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; } } @media (max-width:560px){ .post-grid{ grid-template-columns:1fr; } } /* 成長ステップ（縦並び・番号付き） */ .steps{ max-width:900px; margin:0 auto; counter-reset:none; } .steps__item{ position:relative; display:grid; grid-template-columns:84px 1fr; gap:28px; padding:0 0 44px 0; } .steps__item{ background-image:linear-gradient(var(--line),var(--line)); background-repeat:no-repeat; background-position:left 41px top 76px; background-size:2px calc(100% - 76px); } .steps__item:last-child{ padding-bottom:0; } .steps__item:last-child{ background-image:none; } .steps__no{ width:84px; height:84px; border-radius:50%; background:linear-gradient(150deg,var(--navy),var(--blue)); color:#fff; font-family:var(--en); font-weight:700; font-size:32px; display:grid; place-items:center; box-shadow:0 10px 24px rgba(11,111,184,.28); } .steps__body{ padding-top:8px; } .steps__term{ display:inline-block; font-size:13px; font-weight:700; color:var(--blue); background:#fff; border:1px solid var(--blue); border-radius:60px; padding:4px 16px; } .steps__ttl{ font-size:22px; font-weight:900; color:var(--navy); margin:12px 0 8px; } .steps__body p{ color:var(--gray); } @media (max-width:560px){ .steps__item{ grid-template-columns:60px 1fr; gap:18px; padding-bottom:34px; } .steps__item{ background-position:left 29px top 64px; background-size:2px calc(100% - 64px); } .steps__no{ width:60px; height:60px; font-size:24px; } .steps__ttl{ font-size:19px; } } /* 1日のスケジュール（timeline 内の見出し） */ .timeline strong{ color:var(--navy); font-weight:800; } .timeline li{ margin-bottom:22px; } /* ========================================================= 信条セクション（会社概要） ========================================================= */ .creed{ position:relative; color:#fff; padding:clamp(80px,9vw,120px) 0; overflow:hidden; background-image:radial-gradient(circle closest-side,rgba(18,181,165,.35),rgba(18,181,165,0)),linear-gradient(150deg,var(--navy),var(--blue) 90%); background-repeat:no-repeat,no-repeat; background-size:60vh 60vh,auto; background-position:right -6% top -20%,center; } .creed__inner{ position:relative; z-index:1; width:min(var(--maxw),calc(100% - 48px)); margin-inline:auto; text-align:center; } .creed__eyebrow{ justify-content:center; } .creed__lead{ font-size:clamp(28px,4vw,46px); font-weight:900; line-height:1.6; letter-spacing:.05em; margin:20px 0 22px; } .creed__text{ max-width:640px; margin:0 auto; color:#dcebf6; } .creed__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; text-align:left; } .creed__item{ position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); padding:36px 30px 32px; backdrop-filter:blur(2px); } .creed__no{ font-family:var(--en); font-weight:700; font-size:40px; line-height:1; color:var(--accent); } .creed__ttl{ font-size:20px; font-weight:900; margin:10px 0 12px; } .creed__item p{ font-size:15px; color:#dcebf6; } .creed__close{ margin-top:48px; font-size:clamp(17px,2vw,21px); font-weight:800; letter-spacing:.04em; } @media (max-width:860px){ .creed__grid{ grid-template-columns:1fr; } } /* お問い合わせ: 見出しバー・電話・チェックボックス */ .cbar{ background:var(--navy); color:#fff; text-align:center; font-size:16px; font-weight:700; letter-spacing:.06em; padding:14px 20px; border-radius:60px; max-width:900px; margin:0 auto 24px; } .ctel{ max-width:900px; margin:0 auto 44px; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; } .ctel a{ font-family:var(--en); font-weight:700; font-size:32px; font-style:italic; color:var(--navy); } .ctel a:hover{ color:var(--blue); } .ctel__time{ font-size:13px; color:var(--gray); } .cnote{ max-width:900px; margin:0 auto 44px; color:var(--gray); font-size:15px; } .eform__checks{ display:flex; flex-wrap:wrap; gap:14px 28px; padding-top:12px; } .eform__check{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; } .eform__check input{ width:18px; height:18px; accent-color:var(--blue); } .eform__hint{ font-size:12px; color:#9aa4ad; margin-top:8px; } /* ========================================================= Responsive 追補（全ページ共通の詰め） ========================================================= */ @media (max-width:1024px){ /* ヒーロー左端の縦書きロゴ文字はモバイルでは隠す */ .hero__side{ display:none; } } @media (max-width:860px){ /* 一行固定の見出しはモバイルでは折り返す */ .sec-head__ttl.ng-s1{ white-space:normal !important; } .creed__inner,.eform,.cbar,.ctel,.cnote,.post-lead{ width:auto; } .pager{ flex-wrap:wrap; } } @media (max-width:760px){ .phero{ padding:130px 0 100px; } .ctel{ gap:8px; } .ctel a{ font-size:26px; } .cbar{ font-size:15px; padding:12px 18px; } } @media (max-width:560px){ :root{ --sec-pad:56px; } .stats{ padding:44px 0; } .stats__inner{ grid-template-columns:1fr; gap:30px; } .stat+.stat{ background-image:none; } .creed__item{ padding:28px 24px; } .creed__close{ margin-top:34px; } .work-chip{ padding:26px 24px; } .work-chip__name{ font-size:19px; } .fact{ padding:26px 24px; } .itv__name{ font-size:22px; } .side-box__ttl{ font-size:15px; } .art__sub{ font-size:17px; } .eform__label .req{ font-size:11px; padding:3px 10px; } .eform__checks{ gap:12px 18px; } .info-table dd,.info-table dt{ padding:16px 14px; } .breadcrumb__inner{ font-size:12px; } .btn-cta--large{ padding:14px 26px 14px 14px; } .btn-cta--large .btn-cta__label{ font-size:17px; } .btn-cta--large .btn-cta__icon{ width:46px; height:46px; font-size:20px; } } @media (max-width:420px){ .ng-btn,.ng-btn--light,.ng-btn--accent{ min-width:0; width:100%; padding-left:26px; } .pager__item{ min-width:38px; height:38px; padding:0 10px; } .steps__ttl{ font-size:18px; } .phero__title{ font-size:26px; } } /* ========================================================= FOOTER ========================================================= */ .footer{ position:relative; } .footer__grid{ display:grid; grid-template-columns:1fr 1fr; } .footer__left{ padding:80px 6% 56px; } .footer__nav{ display:flex; gap:60px; margin-bottom:52px; } .footer__nav ul li{ margin-bottom:16px; } .footer__nav a{ font-weight:700; border-bottom:1px dotted var(--line); padding-bottom:14px; display:block; min-width:190px; transition:color .2s; } .fnav-caret{ color:var(--accent); } .fnav-caret{ display:inline-block; width:.5em; height:.5em; margin-right:.45em; border-right:2px solid var(--accent); border-top:2px solid var(--accent); transform:rotate(45deg) translateY(.1em); } .footer__nav a:hover{ color:var(--blue); } .brand--footer{ margin-bottom:16px; } .footer__name{ font-weight:700; margin-bottom:6px; } .footer__addr{ font-size:14px; color:var(--gray); } .footer__copy{ margin-top:18px; font-size:12px; color:#9aa4ad; letter-spacing:.05em; } .footer__img{ min-height:100%; } /* ========================================================= Responsive ========================================================= */ @media (max-width:1200px){ .header__tel-num{ font-size:21px; } .gnav__list li{ padding:0 12px; } .hero__badge{ right:4%; } } @media (max-width:1024px){ .header__inner{ padding-left:24px; height:62px; } .brand__main{ font-size:21px; } .header__tel,.header__cta{ display:none; } .gnav{ position:fixed; inset:0; background:rgba(14,42,71,.97); margin:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; z-index:99; } .gnav.is-open{ opacity:1; pointer-events:auto; } .gnav__list{ flex-direction:column; } .gnav__list li{ padding:14px 0; } .gnav__list li+li::before{ display:none; } .gnav__list a{ color:#fff; font-size:20px; } .gnav__list a.is-current{ border:none; color:var(--accent); } .hamburger{ display:block; position:relative; z-index:100; } .side-fixed,.side-copy{ display:none; } .hero{ min-height:auto; } .hero__body{ padding:130px 8% 90px; max-width:none; } .hero__scrim{ background:linear-gradient(180deg,rgba(10,28,50,.9) 0%,rgba(10,28,50,.55) 55%,rgba(10,28,50,.78) 100%); } .hero__cut{ height:104vh; width:104vh; } .hero__badge{ left:auto; right:20px; bottom:20px; } } @media (max-width:860px){ :root{ --sec-pad:90px; --sec-gap:44px; } .stats__inner{ grid-template-columns:repeat(2,1fr); gap:36px 20px; } .stat:nth-child(3){ background-image:none; } .problem__list{ grid-template-columns:1fr 1fr; gap:36px 20px; } .card-grid,.card-grid--2{ grid-template-columns:1fr; } } @media (max-width:820px){ .feature{ grid-template-columns:1fr; } .feature__img{ min-height:240px; margin:0 !important; grid-column:1 !important; grid-row:1 !important; } .feature__img::after{ display:none; } .feature__body{ grid-column:1 !important; grid-row:2 !important; padding:40px 28px !important; margin-top:-30px; } .scard{ grid-template-columns:1fr; } .scard__img{ min-height:200px; } .recruit{ grid-template-columns:1fr; } .recruit__body{ padding:var(--sec-pad) 8%; } .recruit__img{ min-height:320px; } .footer__grid{ grid-template-columns:1fr; } .footer__img{ min-height:280px; order:-1; } .info-table dl{ grid-template-columns:1fr; } .info-table dt{ padding-bottom:6px; } .form__row{ grid-template-columns:1fr; gap:10px; } } @media (max-width:560px){ .ng-container{ width:calc(100% - 32px); } .sec-head__ttl{ font-size:25px; } :root{ --sec-pad:66px; --sec-gap:40px; } .ng-btn{ min-width:240px; } .cta__btns{ flex-direction:column; align-items:center; } .problem__list{ grid-template-columns:1fr; } .footer__nav{ flex-direction:column; gap:0; } } /* mobile: ドロワー内で子ページも展開表示（全ページ導線） */ @media (max-width:1024px){ .gnav{ align-items:flex-start; overflow-y:auto; padding:90px 20px 44px; } .gnav__list a{ font-size:18px; } .gnav__list > li{ padding:10px 0; width:100%; text-align:center; } .gnav__sub{ display:block; padding:4px 0 2px; } .gnav__sub a{ display:block; color:#cfe6f7; font-size:15px; font-weight:600; padding:4px 0; } .gnav__list > li.has-sub > a .gnav-a__caret{ display:none; } } /* R-7：受領のインラインstyleをクラスへ退避（背景画像は media-map 経由でCDNへ） */ .ng-bg1{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/footer.webp) center/cover no-repeat;} .ng-bg2{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/work-ac.webp) center/cover no-repeat;} .ng-bg3{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/work-fab.webp) center/cover no-repeat;} .ng-bg4{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/work-fab2.webp) center/cover no-repeat;} .ng-bg5{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/work-fab3.webp) center/cover no-repeat;} .ng-bg6{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/work-plumb.webp) center/cover no-repeat;} .ng-bg7{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/work-facility.webp) center/cover no-repeat;} .ng-bg8{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/work-area.webp) center/contain no-repeat;} .ng-bg9{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/reason-fab.webp) center/cover no-repeat;} .ng-bg10{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/reason-people.webp) center/cover no-repeat;} .ng-bg11{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/recruit-message.webp) center/cover no-repeat;} .ng-bg12{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/recruit-culture.webp) center/cover no-repeat;} .ng-bg13{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/people-ceo.webp) center/cover no-repeat;} .ng-bg14{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/itv-1.webp) center/cover no-repeat;} .ng-bg15{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/itv-2.webp) center/cover no-repeat;} .ng-bg16{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/itv-3.webp) center/cover no-repeat;} .ng-bg17{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/exp-work.webp) center/cover no-repeat;} .ng-bg18{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/rookie-work.webp) center/cover no-repeat;} .ng-bg19{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/rookie-cert.webp) center/cover no-repeat;} .ng-bg20{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/svc-ac.webp) center/cover no-repeat;} .ng-bg21{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/svc-fab.webp) center/cover no-repeat;} .ng-bg22{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/svc-plumb.webp) center/cover no-repeat;} .ng-bg23{background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/recruit.webp) center/cover no-repeat;} .ng-s1{white-space:nowrap;} .ng-s2{letter-spacing: 0.48px;} .ng-s3{letter-spacing: 0.03em;} .ng-s4{margin-top:96px;} .ng-s5{padding-bottom:0;} .ng-s6{font-size:clamp(24px,2.8vw,34px);} .ng-s7{margin-top:96px;margin-bottom:36px;} .ng-s8{margin-top:36px;} .ng-s9{text-align:center;margin-top:44px;} .ng-s10{margin-top:20px;} .ng-s11{margin-top:24px;} .ng-s12{text-align:center; margin-top:40px; color:var(--gray); font-weight:700;} .ng-s13{margin-top:96px;margin-bottom:44px;} .ng-s14{margin-bottom:36px;} .ng-s15{margin:0 0 30px;opacity:.92;} .ng-s16{text-align:center;margin-top:56px;} .ng-s17{margin-bottom:44px;} .ng-s18{margin-bottom:56px;} /* ===== 24_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 ===== */ /* ============================================================ * S00734 株式会社中川工業 — override（skin の後に結合される案件固有の上書き・R-30） * ここに書くのは「受領CSSでも skin でもない、CueZilla環境に合わせるための差分」だけ。 * skin 本体は編集しない。共通の崩れが見つかったら skin の正本へ還流する。 * ============================================================ */ /* ------------------------------------------------------------ * 1. CueZilla が自動挿入するパンくずを消す（R-10a） * 下層ヘッダーの直下に受領デザインのパンくず（.breadcrumb）を持っているため、 * 自動パンくずを残すと二重表示になる。全ページ共通で非表示にする。 * ------------------------------------------------------------ */ [class*="parts"][class*="_breadcrumb"], .p-breadcrumb, .c-breadcrumb{ display:none !important; } /* ------------------------------------------------------------ * 2. 採用バナーの写真＋左グラデ * 受領は写真をインラインstyle、左グラデを ::before で重ねていた。 * R-27 で ::before が使えないので、1つの要素に2レイヤーで描き直す。 * （インライン退避クラス .ng-bg* と同詳細度なので、後に結合されるこちらが勝つ） * ------------------------------------------------------------ */ .recruit__img{ background-image:linear-gradient(90deg,var(--blue),rgba(11,111,184,0)), url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/recruit.webp); background-size:30% 100%, cover; background-position:left center, center; background-repeat:no-repeat, no-repeat; } /* ------------------------------------------------------------ * 3. トップの R-6 分割（CueZillaパーツの前後でブロックが割れる） * 帯の上半分（見出し）と下半分（一覧ボタン）が別ブロックになるため、 * 上下の余白を詰めて 1つの帯に見えるようにする。 * ※ 帯の写真は background-attachment:fixed ＝ 画面基準で描かれるので、 * 分割しても上下の柄はつながって見える。 * ------------------------------------------------------------ */ .works-sec--head{ padding-bottom:0; } .works-sec--foot{ padding-top:40px; } .news--head{ padding-bottom:0; } .news--foot{ padding:0 0 var(--sec-pad); background:var(--bg-soft); } .news--foot .news__more{ margin-top:0; } /* パーツ本体が帯の地色を持たないので、抜粋パーツの前後に地色の切れ目が出ないよう余白だけ殺す */ .works-sec--head .lead-block, .news--head .sec-head{ margin-bottom:0; } /* 抜粋パーツ自身の地色を、前後のフリーHTMLブロックの帯に合わせる。 CueZilla は各ブロックを兄弟として出力するので「見出しブロックより後ろのパーツ」を指せる。 ★兄弟にならない出力だった場合はこの2行が当たらないだけ（害はない）。組立後に実DOMで確認する（R-28）。 施工実績の帯（works-bg）→ お知らせの帯（bg-soft）の順で、後の宣言が2つ目のパーツに勝つ。 */ .works-sec--head ~ section[class*="parts"]{ background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)), url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.uno/images/1519/works-bg.webp) center/cover no-repeat; background-attachment:scroll, fixed; } .news--head ~ section[class*="parts"]{ background:var(--bg-soft); } /* ------------------------------------------------------------ * 4. 動的ページ（一覧・フォーム）の導入文ブロック * 下層ヘッダー枠に入るため、下側の余白はパーツ側が持つ。 * ------------------------------------------------------------ */ .section--introonly{ padding-bottom:0; } .section--introonly > .ng-container > :last-child{ margin-bottom:0; } /* ------------------------------------------------------------ * 5. 動的パーツ（ブログ／施工実績／フォーム）の案件調整 * skin が番号非依存で当てているので、案件で足すのは * 「テーマ7値だけでは決まらない値」に限る。 * ------------------------------------------------------------ */ :root{ /* skin は罫線色を --sub-color に紐づけるが、この案件の --sub-color は本文用の濃いグレー。 カード枠・入力欄枠には受領デザインの罫線色（--line）を使う。 */ --dyn-border:#dbe6ef; /* 日付・補助テキストは受領の本文グレーに合わせる（薄すぎるとAA未達になるため） */ --dyn-muted:#4a5563; --dyn-radius:10px; /* 一覧の最小カード幅。この値で「ブログ本文欄=2列／施工実績=3列」に落ちる（受領デザインと同じ列数）。 実測: ブログ本文欄 820px→2列・施工実績 1180px→3列（local-sandbox・PC1280）。 ★投入後に実DOMで列数を確認する（R-28）。列が増減していたらこの値を調整する。 */ --dyn-card-min:276px; } /* 一覧カードはテーマ既定の max-width:% 制約を解除して列いっぱいに（R-28） */ [class*="_post_wrap"]{ max-width:none !important; } /* ブログ一覧は「本文＋サイドバー」。テーマは flex で 50/50 になるため列幅を明示する （受領デザインのサイドバーは 300px 固定。ここで max-width を解除すると逆に半分まで太る） */ [class*="_wrap"] > [class*="_sidebar"]{ flex:0 0 300px; max-width:300px !important; } [class*="_wrap"] > [class*="_main"]{ flex:1 1 auto; min-width:0; } @media (max-width:960px){ [class*="_wrap"] > [class*="_sidebar"]{ flex-basis:100%; max-width:none !important; } } /* テーマの書体クラス（f_meiryo / f_yugothic）を案件の書体へ寄せる。 skin が !important で当てている日付・見出しはそのまま（ここでは上書きしない）。 */ [class*="parts"] .f_meiryo, [class*="parts"] .f_yugothic, [class*="parts"][class*="_sidebar_wrap"] h3{ font-family:var(--dyn-font-body); } /* ------------------------------------------------------------ * 6. タップ領域の確保（R-19 軸②：最小44px） * 見た目の間隔を変えずに当たり判定だけ広げる（padding と負の margin を対で入れる）。 * ------------------------------------------------------------ */ .breadcrumb__inner a{ display:inline-block; padding:11px 4px; margin:-11px -4px; } .footer__addr a[href^="tel:"], .info-table a[href^="tel:"]{ display:inline-block; padding-block:12px; margin-block:-12px; } @media (max-width:1024px){ /* ドロワー内のリンク：見た目の位置は変えずに当たり判定だけ44pxへ広げる */ .gnav__list > li > .gnav-a{ display:block; padding-block:7px; margin-block:-7px; } .gnav__sub a{ padding-block:8px; margin-block:-4px; } .brand{ padding-block:7px; margin-block:-7px; } /* 全画面ドロワーの中身が画面より高いとき、上端が切れて届かなくなるのを防ぐ （通常時は margin:auto で従来どおり上下中央に見える） */ .gnav{ align-items:flex-start; overflow-y:auto; } .gnav__list{ margin-block:auto; } } .footer__copy a{ display:inline-block; padding-block:12px; margin-block:-12px; } /* CueZillaフォームの「ファイルを選択」ボタンが実測40px＝44px未満（skin既定のまま）。 案件側で最低高さだけ確保する（共通の見直しは skin 正本への還流候補・R-30） */ [class*="_form_wrap"] button{ min-height:44px; } /* 施工実績のタグと一覧ページャも skin 既定では 44px 未満（実測 タグ28px高・ページャ38px幅）。 見た目を変えずに当たり判定だけ広げる（共通の見直しは skin 正本への還流候補・R-30） */ [class*="-tag_wrap"] a{ display:inline-block; padding-block:8px; margin-block:-8px; } [class*="_pagenation"] a, [class*="_pagenation"] span{ min-width:44px; } /* ------------------------------------------------------------ * 6b. 極小幅（320px）の横はみ出し止め * 受領CSSは 420px 未満の CTA 電話ボタンに手当てが無く、320px で 14px はみ出す。 * 文字は変えず、余白と数字サイズだけ詰める。 * ------------------------------------------------------------ */ @media (max-width:420px){ .btn-tel{ padding:14px 18px; gap:10px; } .btn-tel__num{ font-size:22px; } .btn-tel__icon{ font-size:20px; } } /* ------------------------------------------------------------ * 7. R-20：Bootstrap 名クラスとの衝突回避の後始末 * .container / .btn / .mark は納品HTML側で .ng-container / .ng-btn / .ng-mark へ改名済み。 * ここでは skin §13 の打ち消しが自前のマーカー装飾に当たらないことだけ担保する。 * ------------------------------------------------------------ */ .hero__title .ng-mark{ padding:0 .1em; } /* ★skin §13(b) の `a:hover{color:inherit}` が、白抜き文字のボタンに当たると ホバー時だけ文字色が親から継承した値へ飛ぶ（受領デザインはホバーで文字色を変えない）。 実測（PC・全14ページ）: CTAの電話ボタンは白地に白（1.0:1）、ページトップは紺地に紺（1.1:1）で 読めなくなり、CTAボタン・追従ボタンは意図しない濃色へ反転していた。指定色に固定する。 */ .btn-tel:hover{ color:var(--ink); } .btn-cta:hover{ color:#fff; } .side-fixed__btn:hover{ color:#fff; } .pagetop:hover{ color:#fff; } /* ★.breadcrumb も Bootstrap のクラス名（テーマが `margin-bottom: var(--bs-breadcrumb-margin-bottom)` ＝実測1rem を当てる）。受領CSSは margin を宣言していないのでテーマの値がそのまま出る。 下層ヘッダー直下の帯なので余白は不要＝打ち消す（2026-09-02 実機で確認・ご指定）。 */ .breadcrumb{ margin-bottom:0rem; } /* ============================================================ * 8. ★判断待ち（ディレクター確認後に有効化する） * 受領デザインの小さい灰色テキストが WCAG AA（4.5:1）に届いていない。 * 意匠を勝手に変えないため既定では当てず、修正案だけ置いておく。 * 詳細は 00★申し送り★.md を参照。 * ------------------------------------------------------------ * .c-note{ color:#67757f; } （現状 #8a99a8 ＝ 白地に 2.9:1・注記文） * .footer__copy{ color:#6b7885; } （現状 #9aa4ad ＝ 白地に 2.5:1・著作権表示とプライバシーリンク） * .side-copy{ color:#7d93a5; } （現状 #a9bccb ＝ 白地に 2.1:1・PCのみ表示の縦組み著作権表示） * .breadcrumb__sep{ color:#9fb3c4; } （現状 #dbe6ef ＝ 白地に 1.3:1・パンくずの「／」） * .faq__badge--a{ background:#0e8f83; } （現状 #12b5a5 に白文字＝2.6:1。FAQの「A」バッジ） * ============================================================ */ /* ============================================================ * 9. 実機の採番に当てる調整（R-28：実DOMを見てから書く） * トップの抜粋パーツ。採番は実機で確認した値（2026-09-02 ユーザー指定）。 * ★採番は「そのブロックを貼り直すと変わる」ので、貼り替えたらこの行も直す。 * ============================================================ */ section.parts131415_blog_qZm3pTGwif, .parts131415_blog_qZm3pTGwif{ padding:30px 0 0 !important; } /* お知らせパーツが自動で出す見出し（フリーHTML側の NEWS 見出しと二重になる）を消す */ .parts040506_notice-news_Zm9hq9r0F2 .container .sec_title{ display:none !important; } /* お知らせパーツの地色を、前後のフリーHTML（NEWS帯）と同じ淡いブルーグレーに合わせる （#f4f8fc ＝ 受領CSSの --bg-soft ／ テーマ7値の --temporary-color と同値） */ .parts040506_notice-news_Zm9hq9r0F2 .container .content{ background:#f4f8fc !important; } .parts040506_notice-news_Zm9hq9r0F2.text-dark{ background:#f4f8fc !important; } /* カテゴリタグ（濃い地のチップ）の文字を白に */ .parts040506_notice-news_Zm9hq9r0F2 .container li span.categorytag{ color:#ffffff !important; }