/* ===== 20_site.css ===== */ /* ===== A) テーマ（受領そのまま） ===== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:#efe7da;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;display:block} span.line-chunk{display:inline-block;overflow-wrap:anywhere;word-break:normal} /* ===== 日本語の折り返し ===== 最終行に1〜2文字だけ残る「泣き別れ」を減らす（機械ゲート measure の 行末孤立）。 実測 2026-08-28: 全14ページで30件（例「…再現できる幅にな / ります。」）。 - text-wrap:pretty … 最終行が極端に短くならないよう行を配り直す - word-break:auto-phrase … 日本語を文節で折る。単語の途中や助詞の直前で切れなくなる - line-break:strict … 行頭に来てはいけない約物（）。、等）をより厳しく禁則する どれも対応していない環境では無視されるだけで、崩れは起きない。 ★行送りは変えていない（見た目の詰まり具合は従来どおり）。 */ /* ★文節折り（auto-phrase）は【見出しだけ】に効かせる。 見出しは短く行数も少ないので、語の途中で切れないことの利点が勝つ。 本文に効かせると、行末に文節1つぶん（5〜10字）の空きが毎行でき、 右端が不揃いに見えて「折り返しのバランスが悪い」状態になる （S00757 スマイルカミオンで実測・2026-08-28 に本文はベタ組みへ戻す結論）。 */ h1,h2,h3,h4,.od-ja{ text-wrap:pretty;word-break:auto-phrase;line-break:strict} h1,h2,h3,h4,.od-ja,p,li,dt,dd,.od-lead{ text-wrap:pretty;line-break:strict} /* ★本文は画面幅で使い分ける（どちらか一方では両立しないため・2026-08-28 実測）。 広い画面 … ベタ組み。文節で折ると行末に文節1つぶん（5〜10字）の空きが毎行でき、 右端が不揃いになって「折り返しのバランスが悪い」状態になる。 狭い画面 … 文節折り。1行の字数が少ないので、ベタ組みだと最終行に1〜2字だけ残る 「泣き別れ」が出る（実測: 広い画面は0件／モバイルだけ7件）。 */ p,li,dt,dd,.od-lead{word-break:normal} @media(max-width:640px){ p,li,dt,dd,.od-lead{word-break:auto-phrase} } /* 英字の見出し（筆記体・セリフの飾り）は日本語の文節折りの対象外にする */ .od-dis,.od-num,.od-kicker,.od-en{word-break:normal} /* ============ 和文書体 ============ 和文はすべて #top の --jp 一箇所で切り替わる。既定は Shippori Mincho。 他候補に変えるときは、次の2箇所だけ直す: 1) このファイル冒頭の Google Fonts の link（family=... と wght） 2) #top の style 内 --jp ・Zen Old Mincho … wght@400;500;600;700;900 / 字面が大きく格調は最上位 ・BIZ UDPMincho … wght@400;700 のみ / 視認性最優先。中間ウェイトが無いので 本文500・見出し600の設計は 400/700 に丸める必要がある ・BIZ UDMincho … 上と同じ制約＋等幅。約物の空きが広くなる ============================================ */ /* ============ 素材レイヤ（現行サイト＝白い塗り壁・白レンガの淡い写真地に寄せる） ============ */ .od-tex{position:absolute;inset:0;background-position:center;background-size:cover;pointer-events:none} /* 背景固定にするレイヤー。高さは1画面ぶん、位置はJSが毎フレーム合わせる */ .od-tex[data-fixed]{top:0;bottom:auto;height:100svh;will-change:transform} /* ★ちらつき対策（2026-08-31・第2弾）。背景固定（background-attachment:fixed）は スクロールのたびにその面を丸ごと描き直すため、上に載せた粒子（mix-blend-mode）と 重なって画面がチカチカする。1ページに十数面あるので影響が大きい。 奥行きよりも【安定して見えること】を優先し、地の柄はその場に固定して動かさない。 */ .od-fixnative .od-tex[data-fixed]{inset:0;height:auto;background-attachment:scroll; background-position:center center;background-size:cover;transform:none !important;will-change:auto} .od-tint{position:absolute;inset:0;pointer-events:none} .od-grain{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply; /* ★SVGのdata URIはURLエンコードして持つ（R-31）。生のまま "＜svg …>" と書くと、 CueZillaが追加CSSの先頭を覗いて「HTMLだ」と判定し、Content-Type を text/css ではなく text/html で配信する＝CSSが1行も効かなくなる。中身・見た目は生のときと同一。 */ background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23g)'%20opacity='0.5'/%3E%3C/svg%3E"); background-size:180px 180px} /* 現行サイトの銘板＝レンガ。画像が無いのでCSSで積む */ /* ★フッターの地紋。レンガは目が細かくちらつくため花柄（ダマスク）に差し替えた （ディレクター指示 2026-08-28）。レンガと同じ重ね方（色被せの上に overlay）で、 違いは【柄そのもの】と【繰り返さないこと】の2点。 ・柄は pat-damask.jpg（m-damask.jpg から作った継ぎ目の出ないタイル）。 壁紙の写真をそのまま敷き詰めると横一文字の切れ目が出るので、 中央を切り出して上下左右に鏡像で並べ、四辺が必ず一致するようにしてある。 生成: node _検証/_prep-damask.mjs ・柄が大きいので、レンガのような細かい明暗の反復（ちらつき）が起きない。 */ .od-damask{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay; background-image: radial-gradient(130% 90% at 16% 10%,rgba(255,255,255,.18),rgba(255,255,255,0) 58%), radial-gradient(115% 85% at 84% 92%,rgba(0,0,0,.24),rgba(0,0,0,0) 60%), url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.pw/images/1538/pat-damask.webp); background-size:auto,auto,clamp(420px,52vw,760px) auto; background-position:center,center,center; background-repeat:no-repeat,no-repeat,repeat} .od-brick{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay; background-image: radial-gradient(130% 90% at 16% 10%,rgba(255,255,255,.2),rgba(255,255,255,0) 58%), radial-gradient(115% 85% at 84% 92%,rgba(0,0,0,.22),rgba(0,0,0,0) 60%), url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.pw/images/1538/brick-wall.webp); background-size:auto,auto,1600px auto; background-position:center,center,center; background-repeat:no-repeat,no-repeat,repeat} /* ============ 見出し（現行サイトの「金の飾り罫＋番号付き筆記体＋淡紫の細ゴシック」を踏襲） ============ */ .od-orn{display:block;width:min(340px,80%);height:auto;margin:0 auto;opacity:.95} .od-orn--l{margin:0} .od-head{text-align:center} .od-num{display:block;font-family:'Great Vibes',cursive;font-size:clamp(1.55rem,1.15rem + 1.35vw,2.1rem); line-height:1.25;color:var(--goldDk,#8f6d34);margin:var(--sp-hair) 0 0;letter-spacing:.01em} .od-en,.od-dis,.od-num{transform:translateY(var(--inkY,0))} .od-en{display:block;font-family:'Great Vibes',cursive;font-weight:400;line-height:1.22; font-size:clamp(2.9rem,1.7rem + 4.4vw,5.4rem);color:var(--umber,#7f463f);margin:var(--sp-hair) 0 0} .od-ja{display:block;font-family:var(--jp);font-weight:600; letter-spacing:.11em;line-height:1.62;color:var(--lavDk,#6b5a92); font-size:clamp(1.14rem,1.02rem + .64vw,1.54rem);margin:var(--sp-hair) 0 0} .od-head .od-lead{margin-inline:auto} .od-lead{font-family:var(--jp);font-weight:500;letter-spacing:.045em; font-size:clamp(1.04rem,.99rem + .3vw,1.13rem);line-height:1.9;margin:var(--sp-item) 0 0;color:var(--ink2,#4a3a31); max-width:min(100%,var(--read))} /* ---- 現代化：番号＋ヘアラインの見出し（飾り罫はConceptと2つの銘板だけに残す） ---- */ /* 見出しは1カラム左揃え。番号→キッカー→英字→和文と、下へ行くほど間隔を詰める */ .od-hd{display:block;text-align:left} .od-kicker{display:flex;align-items:baseline;gap:.85em;margin:0; font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.34em; text-transform:uppercase;font-size:.78rem;color:#6f5428} .od-kicker .n{font-family:'Cormorant Garamond',serif;font-weight:400;letter-spacing:.12em; font-size:1.62em;line-height:1;color:inherit;flex:0 0 auto} .od-dis{font-family:'Great Vibes',cursive;font-weight:400;letter-spacing:.012em;line-height:1.22; font-size:clamp(2.5rem,1.5rem + 3.5vw,4.4rem);color:var(--maroon,#491a1a);margin:var(--sp-hair) 0 0} .od-dis--wide{font-size:clamp(2.9rem,1.7rem + 4.6vw,5.6rem)} .od-hd .od-ja{margin-top:var(--sp-hair)} .od-hr{display:block;height:1px;max-width:180px;margin:var(--sp-tight) 0 0; background:linear-gradient(90deg,var(--gold,#bc9960),rgba(188,153,96,0))} .od-hd .od-lead{margin-top:var(--sp-item)} .od-onDark .od-kicker .n{color:#e6c78d} .od-onDark .od-kicker{color:#f0d7a6} .od-onDark .od-dis{color:#fbf5ea} .od-onDark .od-hr{background:linear-gradient(90deg,#e6c78d,rgba(230,199,141,0))} /* ---- Instagram：写真の帯で見せる ---- */ .od-ig{position:relative;z-index:2;display:block;text-decoration:none;color:inherit;max-width:1180px;margin:0 auto} .od-ig-hd{display:flex;flex-direction:column;align-items:center;text-align:center} .od-ig-mark{display:flex;align-items:center;gap:.7rem;color:var(--umber,#7f463f)} .od-ig-mark svg{display:block} .od-ig-en{font-family:'Great Vibes',cursive;font-size:clamp(2.1rem,1.5rem + 2.2vw,3.1rem);line-height:1.25;color:var(--umber,#7f463f)} .od-ig-id{font-family:var(--jp);font-weight:600;letter-spacing:.12em; font-size:clamp(.96rem,.92rem + .3vw,1.06rem);color:var(--ink,#2b211c);margin-top:var(--sp-tight)} .od-ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.4rem,1vw,.8rem);margin-top:var(--sp-group)} @media(min-width:768px){.od-ig-grid{grid-template-columns:repeat(6,minmax(0,1fr))}} .od-ig-grid span{position:relative;display:block;aspect-ratio:1;overflow:hidden; border:1px solid rgba(188,153,96,.5);background:#d9cdb8} .od-ig-grid span::after{content:"";position:absolute;inset:0;background:rgba(43,26,18,.12);transition:opacity .5s ease} .od-ig-grid img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .7s cubic-bezier(.16,1,.3,1)} .od-ig:hover .od-ig-grid img,.od-ig:focus-visible .od-ig-grid img{transform:scale(1.07)} .od-ig:hover .od-ig-grid span::after,.od-ig:focus-visible .od-ig-grid span::after{opacity:0} .od-ig-more{display:inline-flex;align-items:center;gap:.9rem} .od-ig-more i{display:block;width:38px;height:1px;background:currentColor;position:relative;transition:width .45s cubic-bezier(.16,1,.3,1)} .od-ig-more i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)} .od-ig:hover .od-ig-more i,.od-ig:focus-visible .od-ig-more i{width:56px} /* 背景に敷く特大の筆記体（装飾。読み上げ対象外） */ .od-wm{position:absolute;z-index:1;left:50%;transform:translateX(-50%); font-family:'Great Vibes',cursive;line-height:.78; pointer-events:none;user-select:none;white-space:nowrap; font-size:clamp(6rem,19vw,19rem);color:var(--umber,#7f463f);opacity:.07} .od-onDark .od-wm{color:#f7efe2;opacity:.06} @media(max-width:767px){.od-wm{font-size:clamp(5rem,34vw,12rem);opacity:.06}} /* ============ 唐草コーナーの額縁（現行サイトの銘板の枠） ============ */ .od-plate{position:relative} .od-plate>.cnr{position:absolute;width:clamp(34px,5vw,52px);height:clamp(34px,5vw,52px);opacity:.85;pointer-events:none} .od-plate>.cnr.tl{top:clamp(19px,2.7vw,28px);left:clamp(19px,2.7vw,28px)} .od-plate>.cnr.tr{top:clamp(19px,2.7vw,28px);right:clamp(19px,2.7vw,28px);transform:scaleX(-1)} .od-plate>.cnr.bl{bottom:clamp(19px,2.7vw,28px);left:clamp(19px,2.7vw,28px);transform:scaleY(-1)} .od-plate>.cnr.br{bottom:clamp(19px,2.7vw,28px);right:clamp(19px,2.7vw,28px);transform:scale(-1,-1)} .od-plate>.rim{position:absolute;inset:clamp(14px,2.2vw,22px);border:1px solid rgba(255,248,238,.62);pointer-events:none} .od-plate>.rim::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,248,238,.32)} .od-plate--dark{color:#f7efe2} /* ============ 菱形バナー：現行サイトの実素材を「下敷き」と「菱形」に分けて重ねる ============ */ .od-dias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3.6vw,3.2rem); max-width:880px;margin:var(--sp-block) auto 0;position:relative;z-index:2} .od-bnr{position:relative;display:block;aspect-ratio:1;text-decoration:none;container-type:inline-size} .od-bnr img{position:absolute;inset:0;width:100%;height:100%;display:block} /* 下敷きの正方形は動かさない（元サイトの挙動） */ .od-bnr .back{z-index:1} /* ★菱形は clip-path で切る。差し替え用の写真（四角）を入れても菱形のまま収まる。 元の bnr-*-dia.png はもともと同じ形なので見た目は変わらない。 */ .od-bnr .dia{clip-path:polygon(50% 3.4%,96.6% 50%,50% 96.6%,3.4% 50%);object-fit:cover} /* ★菱形の枠装飾（二重罠＋上下のオーナメント）。 元の bnr-*-dia.png は写真と装飾が1枚になっていたので、 写真を差し替えても残るよう別レイヤーとして重ねる。 */ .od-bnr .dia-edge{position:absolute;inset:3.4%;z-index:3;pointer-events:none; background:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.pw/images/1538/bnr-dia-frame-thin.webp) center/100% 100% no-repeat;opacity:.9} /* 菱形と文字はひとまとまりで浮いて拡大する */ .od-bnr .dia-wrap{position:absolute;inset:0;z-index:2;transform-origin:50% 50%; transition:transform .55s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.16,1,.3,1)} .od-bnr:hover .dia-wrap,.od-bnr:focus-visible .dia-wrap{transform:scale(1.075); filter:drop-shadow(0 18px 26px rgba(40,24,16,.42))} .od-bnr .scrim{position:absolute;inset:0;pointer-events:none; clip-path:polygon(50% 3.4%,96.6% 50%,50% 96.6%,3.4% 50%); background:linear-gradient(180deg,rgba(28,17,11,0) 6%,rgba(28,17,11,.52) 22%,rgba(28,17,11,.64) 40%,rgba(28,17,11,.6) 58%,rgba(28,17,11,.2) 78%,rgba(28,17,11,0) 90%)} .od-bnr .txt{position:absolute;left:0;right:0;top:30%;display:flex;flex-direction:column; align-items:center;gap:5.4cqw;color:#fff;text-align:center;pointer-events:none} .od-bnr .txt .ja{font-family:var(--jp);font-weight:600;font-size:5.2cqw;line-height:1.35;white-space:nowrap; letter-spacing:.26em;text-indent:.26em;text-shadow:0 1px 6px rgba(0,0,0,.55)} .od-bnr .txt .en{font-family:'Great Vibes',cursive;font-size:15.5cqw;line-height:1.22; letter-spacing:.01em;text-shadow:0 2px 9px rgba(0,0,0,.5)} /* 金の光沢は菱形の内側だけを走る */ .od-bnr .sheen{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden; clip-path:polygon(50% 3.4%,96.6% 50%,50% 96.6%,3.4% 50%)} .od-bnr .sheen::before{content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:38%; background:linear-gradient(100deg,rgba(255,246,225,0),rgba(255,246,225,.55),rgba(255,246,225,0)); transform:skewX(-16deg);transition:left .9s cubic-bezier(.16,1,.3,1)} .od-bnr:hover .sheen::before,.od-bnr:focus-visible .sheen::before{left:130%} @media(prefers-reduced-motion:reduce){.od-bnr .sheen{display:none}.od-bnr .dia{transition:none}} /* 右端の縦タブ（現行サイトの固定バナーをそのまま使う） */ .od-tabs{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:8px} .od-tabs a{display:block;transition:transform .3s ease} .od-tabs a:hover,.od-tabs a:focus-visible{transform:translateX(-5px)} .od-tabs a.od-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; width:clamp(96px,7.6vw,120px);padding:clamp(.9rem,1.1vw,1.15rem) .45rem clamp(1rem,1.2vw,1.25rem); color:#fbf5ea;text-decoration:none;overflow:hidden; background-image:url(https://cdn.cuezilla-cms.com/enjoyworks-seisaku.pw/images/1538/brick-wall.webp);background-size:520px auto;background-position:center; box-shadow:0 12px 28px rgba(40,24,16,.36)} .od-tab::before{content:"";position:absolute;inset:0} .od-tab--wine::before{background:linear-gradient(160deg,rgba(122,43,50,.9),rgba(70,24,24,.95))} .od-tab--purple::before{background:linear-gradient(160deg,rgba(74,58,107,.9),rgba(38,29,58,.95))} .od-tab > *{position:relative} .od-tab .rim{position:absolute;inset:6px;border:1px solid rgba(247,239,226,.6);pointer-events:none} .od-tab .rim::before{content:"";position:absolute;inset:3px;border:1px solid rgba(247,239,226,.3)} .od-tab .ico{display:block;width:17px;height:17px;opacity:.92} .od-tab .en{font-family:'Great Vibes',cursive;font-size:clamp(1.52rem,1.4vw,1.86rem);line-height:1.05;margin-top:.24rem;transform:translateY(.144em)} .od-tab .ja{font-family:var(--jp);font-weight:500;font-size:.77rem;letter-spacing:.14em;line-height:1.7;text-align:center;margin-top:.42rem} @media(max-width:1199px){.od-tabs{display:none}} /* ============ ボタン（現行サイトの MAIL FORM ボタン＝細い額縁＋長い矢印） ============ */ /* ★左右の余白・矢印・字間は狭い幅で縮める。固定値にしてはいけない。 実測 375px: ラベル「応募・見学を相談」140.8px＋矢印34＋間隔14.4＋左右余白73.6＝262.8px に対して 置ける幅が 261px しか無く、2pxの不足でラベルが2行に折り返していた（ボタンの高さ 58→82px）。 ボタンは器の幅を超えられないので、【中身の側を幅なりに詰める】以外に1行を保つ方法がない。 ラベル自体は nowrap で固定し、足りないぶんは余白・矢印・字間が先に縮む順序にしてある。 */ .od-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:clamp(.6rem,2.6vw,.9rem); min-height:56px;padding:1rem clamp(1.35rem,5.6vw,2.3rem);text-decoration:none;cursor:pointer;white-space:nowrap; font-family:var(--jp);font-weight:600;font-size:1rem;letter-spacing:.1em; border:1px solid currentColor;transition:transform .28s ease,background-color .28s ease,color .28s ease,box-shadow .28s ease} .od-btn::before{content:"";position:absolute;inset:4px;border:1px solid currentColor;opacity:.4;transition:inset .28s ease,opacity .28s ease;pointer-events:none} .od-btn:hover::before,.od-btn:focus-visible::before{inset:2px;opacity:.8} .od-btn:hover,.od-btn:focus-visible{transform:translateY(-3px)} .od-btn .ar{display:block;width:34px;height:1px;background:currentColor;position:relative;flex:0 0 auto;transition:width .28s ease} .od-btn .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)} .od-btn:hover .ar,.od-btn:focus-visible .ar{width:46px} .od-btn--wine{background:var(--wine,#7a2b32);color:#fff8ef;border-color:var(--wine,#7a2b32)} .od-btn--wine:hover,.od-btn--wine:focus-visible{background:#68232a;box-shadow:0 12px 26px rgba(73,26,26,.3)} .od-btn--gold{background:var(--gold,#bc9960);color:#2b211c;border-color:var(--gold,#bc9960)} .od-btn--gold:hover,.od-btn--gold:focus-visible{background:#a8854e;color:#fff8ef;border-color:#a8854e} .od-btn--line{background:transparent;color:var(--ink,#2b211c);border-color:rgba(43,33,28,.45)} .od-btn--line:hover,.od-btn--line:focus-visible{background:var(--ink,#2b211c);color:#f7efe2;border-color:var(--ink,#2b211c)} .od-btn--onDark{background:transparent;color:#f7efe2;border-color:rgba(247,239,226,.55)} .od-btn--onDark:hover,.od-btn--onDark:focus-visible{background:#f7efe2;color:var(--maroon,#491a1a);border-color:#f7efe2} a:focus-visible,button:focus-visible{outline:3px solid var(--blue,#3a5f8a);outline-offset:3px} .od-plate--dark a:focus-visible,.od-onDark a:focus-visible,.od-dia:focus-visible{outline-color:var(--gold,#bc9960)} /* ============ セクションの器 ============ */ .od-sec{position:relative;overflow:hidden;padding:var(--sp-section) clamp(1.5rem,6vw,7rem)} /* ★背景が同じまま続く境目は、背景が切り替わる境目より狭くする。 制作ルール「セクション間の余白は背景色で機械的に決める」＝ 背景が切り替わる境目＝大 ／ 同一背景内のセクション間＝中 ／ セクション内の要素間＝小。 背景が変わる所は色そのものが切れ目になるうえ「別のかたまりに移った」合図なので大きく取り、 同じ背景が続く所は同じかたまりの中の並びなので詰める（＝外側が広い・内側が狭いの原則と同じ）。 これを入れる前は同背景の境目が 271px で、切替の境目（119〜164px）より広く逆転していた （実測 2026-08-28・機械ゲート spacing が こだわり／会社概要／働き方・待遇 でNG）。 */ /* ★★ 節間の圧縮はしない（ディレクター判断 2026-08-28・前の解釈を訂正）。 「同じ背景なら詰める」は【セクションの区切りが見えないとき】の話であって、 このサイトのように各セクションが写真・地紋・金の罫で区切られて完結している場合は、 同じ背景が続いていても1つのセクションとして完結しているので詰めない。 ＝どの節も上下は P_large（--sp-section）を持つ。 （以前ここで .30 に圧縮していたが「What We Do の下が狭い」と差し戻された） */ .od-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto} .od-onDark{color:#f2e8d8} .od-onDark .od-num{color:#e6c78d} .od-onDark .od-en{color:#fbf5ea} .od-onDark .od-ja{color:#e6dcf5} /* ★#e3d6c2 は「ここでしかできない仕事」の写真（青灰 rgb(76,97,119)）の上で 4.47:1 となり AA(4.5:1) に僅差で届かなかった（実測 2026-08-28・31幅中9幅）。 写真の平均色は幅で変わるので、境界ぎりぎりに置かず一段明るくして余裕を持たせる（5.3:1）。 */ .od-onDark .od-lead{color:#f2e9db} /* ============ ヒーロー ============ */ .od-hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center; padding:clamp(7rem,13vw,9rem) clamp(1.2rem,5vw,5rem) clamp(5rem,9vw,7rem);overflow:hidden} .od-hero-grid{position:relative;z-index:3;width:100%;max-width:830px;margin:0 auto} .od-hero-plate{position:relative;padding:clamp(2.4rem,5vw,3.6rem) clamp(1.6rem,4vw,3rem); background:rgba(44,26,20,.76);text-align:center} .od-hero-plate>.rim{border-color:rgba(251,245,234,.62)} .od-hero-plate>.rim::before{border-color:rgba(251,245,234,.32)} /* ★3枚のコピーは【重ねたグリッド】で持つ。絶対配置＋固定の高さにしてはいけない。 高さを min-height で決め打ちすると、狭い幅で本文が1行増えたぶんが箱からはみ出し、 下の 01/02/03 の切り替えに重なる（実測 360px: 3枚目の説明が3行になり 7px 食い込んだ）。 grid-area を揃えて重ねれば、箱の高さは【一番背の高い1枚】に自動で追随する＝重なりが起きない。 min-height は「短い時に痩せすぎない」ための下限としてだけ残す。 container-type は、下の見出し・説明の文字サイズを【この箱の幅】で頭打ちにするために置く。 */ .od-hero-copy{position:relative;display:grid;grid-template-columns:100%;align-items:start; container-type:inline-size;min-height:clamp(206px,28vw,248px)} .od-hero-slide{grid-area:1/1;position:relative;opacity:0;transition:opacity .9s ease;pointer-events:none} .od-hero-slide[data-on="1"]{opacity:1;pointer-events:auto} /* ★文字サイズは vw だけでなく【箱の幅】でも頭打ちにする（min の第2項）。 vw だけだと、箱の幅が変わる・利用者がブラウザの既定文字サイズを大きくしている、のどちらでも 1行に収まらなくなり行が増える。cqw なら箱に対する比なので、どの幅でも折り返し位置が変わらない。 係数の根拠＝実測した最長の塊: 見出し「「理想の空間」を、」=9.54em / 説明「業歴22年・21ブランドの施工認定。」=17.05em。 100/9.54=10.48 → 10cqw、100/17.05=5.86 → 5.7cqw（それぞれ数%の余裕を見た値）。 */ .od-hero-h1{font-family:var(--jp);font-weight:600;letter-spacing:.06em;line-height:1.42; font-size:min(clamp(1.64rem,1.06rem + 2.2vw,2.6rem),10cqw);color:#fdf9f2;margin:var(--sp-hair) 0 0;text-shadow:0 2px 10px rgba(0,0,0,.5)} .od-hero-sub{font-family:var(--jp);font-weight:500;color:#f0e5d6; font-size:min(clamp(.98rem,.93rem + .3vw,1.08rem),5.7cqw);line-height:1.85;letter-spacing:.05em;margin:var(--sp-item) auto 0;max-width:30em; text-shadow:0 1px 6px rgba(0,0,0,.6)} .od-hero-tag{display:inline-block;font-family:'Great Vibes',cursive;font-size:clamp(1.22rem,.98rem + .8vw,1.62rem); line-height:1.35;color:#eccb94;text-shadow:0 1px 6px rgba(0,0,0,.55)} .od-hero-ctrl{position:relative;z-index:4;display:flex;justify-content:center;gap:clamp(1rem,2.4vw,1.7rem);margin-top:var(--sp-group)} .od-hero-ctrl button{appearance:none;background:none;border:none;padding:12px 0 0;cursor:pointer; width:clamp(52px,8vw,74px);display:flex;flex-direction:column;gap:.55rem;min-height:44px} .od-hero-ctrl .n{font-family:'Cormorant Garamond',serif;font-size:.95rem;letter-spacing:.14em;color:#fdf9f2;opacity:.55;transition:opacity .4s ease} .od-hero-ctrl button[aria-current="true"] .n{opacity:1} .od-hero-ctrl .bar{position:relative;display:block;height:2px;background:rgba(253,249,242,.3);overflow:hidden} .od-hero-ctrl .bar span{position:absolute;inset:0;background:#eccb94;transform:scaleX(0);transform-origin:left center} /* 現行サイトのMV＝素材写真の全面モザイク（PSDから切り出した実素材） */ .od-mosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);z-index:0} /* ★タイルは拡大しない。大きさが違うと膨らむ量も変わり、継ぎ目が段になる（実測2.8pxの段差）。 代わりに全タイルを一律1pxだけ右と下へはみ出させる。量が同じなので継ぎ目は真っ直ぐのまま、 行の境目が半ピクセルに来ても地色が線として出ない。 */ .od-tile{position:relative;overflow:hidden;background:#cdbfa8;margin:0 -1px -1px 0; animation:odTileIn 1.15s cubic-bezier(.16,1,.3,1) both} /* ★ヒーローの登場は一度きり。 状態更新（子メニューの開閉など）で要素が作り直されると、CSSアニメは最初から再生される。 印を html に付けておけば、#top が作り直されても残るので二度目は再生されない。 */ html.od-entered .od-tile{animation:none !important} html.od-entered .od-hero-slide,html.od-entered .od-hero-plate{animation:none !important} /* 画像は少し大きめに置き、タイルごとに違う速さで動かす（面が奥行きを持つ） */ /* タイル自体は拡大しない（大きさが違うと膨らむ量も変わり、継ぎ目が段になる）。 はみ出しは画像側だけで持たせ、タイルの overflow:hidden で切る。 */ .od-tile img{position:absolute;left:-6%;top:-56px;width:112%;max-width:none;height:calc(100% + 112px);object-fit:cover} .od-tile:nth-child(1){animation-delay:.02s}.od-tile:nth-child(2){animation-delay:.10s} .od-tile:nth-child(3){animation-delay:.18s}.od-tile:nth-child(4){animation-delay:.26s} .od-tile:nth-child(5){animation-delay:.14s}.od-tile:nth-child(6){animation-delay:.22s} .od-tile:nth-child(7){animation-delay:.30s}.od-tile:nth-child(8){animation-delay:.08s} .od-tile:nth-child(9){animation-delay:.16s}.od-tile:nth-child(10){animation-delay:.24s} .od-tile:nth-child(11){animation-delay:.32s} .od-tile--a{grid-area:1/1/5/3} .od-tile--b{grid-area:1/3/6/7} .od-tile--c{grid-area:1/7/3/9} .od-tile--d{grid-area:1/9/3/13} .od-tile--e{grid-area:3/7/6/9} .od-tile--f{grid-area:3/9/6/11} .od-tile--g{grid-area:3/11/6/13} .od-tile--h{grid-area:5/1/9/3} .od-tile--i{grid-area:6/3/9/7} .od-tile--j{grid-area:6/7/9/11} .od-tile--k{grid-area:6/11/9/13} /* ★下端のわずかな暗みは「SCROLLの下敷き」の代わり（2026-08-31）。 箱を外すと SCROLL の白文字が明るいタイル（ダマスク）に乗って最悪3.12:1まで落ちる（実測）。 ただし SCROLL は【飾り文字であって読めなくても支障がない】ため、AA（4.5:1）を満たすところまで 暗くしない、というディレクター判断（2026-08-31）。「少し配慮する」量として、 AAを満たす強さの半分に落としてある。★これを「AA割れだから」と強く戻さないこと。 */ .od-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(20,12,9,.30) 0,rgba(20,12,9,.22) 84px,rgba(20,12,9,0) 200px), radial-gradient(108% 84% at 50% 46%,rgba(30,18,14,.04) 0%,rgba(26,16,12,.5) 62%,rgba(20,12,9,.68) 100%)} /* ★下敷きの箱は置かない（ディレクター指示 2026-08-31）。 写真の上の白文字なので読ませる手当ては要るが、それは【影】で作る。 箱にすると茶色の板が写真の上に浮いて見え、モザイクの継ぎ目と競合する。 影はヒーローの見出し・説明と同じ手当てなので、この一点だけ浮くこともない。 */ .od-hero-scroll{position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:4; display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#fdf9f2;pointer-events:none} .od-hero-scroll span{font-family:'Cormorant Garamond',serif;letter-spacing:.3em;text-transform:uppercase;font-size:.72rem; text-shadow:0 1px 4px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.5)} .od-hero-scroll i{display:block;width:1px;height:38px;background:currentColor;animation:odCue 2s ease-in-out infinite; box-shadow:0 0 5px rgba(0,0,0,.7)} @keyframes odCue{0%{transform:scaleY(.2);transform-origin:top;opacity:.3}50%{transform:scaleY(1);transform-origin:top;opacity:1}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom;opacity:.3}} /* ============ 実績カウンタ ============ */ .od-stats{position:relative;z-index:2;display:grid;gap:1px;background:rgba(188,153,96,.42); grid-template-columns:minmax(0,1fr);max-width:1180px;margin:0 auto;border:1px solid rgba(188,153,96,.42)} .od-stat{position:relative;background:rgba(250,246,238,.93);padding:clamp(2rem,3.6vw,2.7rem) clamp(1.4rem,3vw,2.2rem);text-align:center} .od-stat-lb{font-family:'Great Vibes',cursive;font-size:1.5rem;line-height:1.35;color:var(--goldDk,#8f6d34);display:block} .od-stat-num{--numFs:clamp(2.4rem,1.6rem + 2.8vw,3.7rem); font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--maroon,#491a1a); font-size:var(--numFs);line-height:1.1;display:flex;align-items:baseline;justify-content:center;gap:.3rem;margin:var(--sp-hair) 0 0} .od-stat-num::before{content:"0";width:0;overflow:hidden;font-size:var(--numFs);line-height:1.1} .od-stat-num small{font-family:var(--jp);font-size:clamp(.98rem,.92rem + .45vw,1.24rem);font-weight:600;letter-spacing:.08em} .od-stat p{font-family:var(--jp);font-weight:500;font-size:.96rem;line-height:1.8;letter-spacing:.03em;color:var(--ink2,#4a3a31);margin:var(--sp-tight) 0 0} /* ============ 理由カード ============ */ /* ★囲みのあるカードは文字量が違っても高さを揃える（ディレクター指示 2026-08-31）。 同じ体裁のものが並ぶのに高さだけ違うと、別の種類のものに見える。下層側は od-pages.css の 同名の指定が受け持つ（.od-cards は下層でも使うので、ここの指定が od-theme.css へ引き継がれる）。 */ .od-cards{display:grid;gap:var(--sp-item);grid-template-columns:minmax(0,1fr);margin-top:var(--sp-block); grid-auto-rows:1fr;align-items:stretch} .od-card{position:relative;padding:clamp(2rem,3.4vw,2.7rem) clamp(1.5rem,2.6vw,2.1rem); background:rgba(250,246,238,.9);border:1px solid rgba(188,153,96,.5)} .od-card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(188,153,96,.26);pointer-events:none} .od-card .no{font-family:'Cormorant Garamond',serif;font-size:2.3rem;line-height:1;color:var(--goldDk,#8f6d34);display:flex;align-items:center;gap:.7rem} .od-card h4{font-family:var(--jp);font-weight:600;font-size:clamp(1.07rem,1rem + .38vw,1.28rem); letter-spacing:.08em;line-height:1.8;margin:var(--sp-tight) 0 0;color:var(--lavDk,#6b5a92)} .od-card p{font-family:var(--jp);font-weight:500;font-size:.98rem;line-height:1.85;letter-spacing:.03em;margin:var(--sp-hair) 0 0;color:var(--ink2,#4a3a31)} /* ============ お悩みリスト ============ */ .od-concern{position:relative;padding:clamp(1.9rem,3.4vw,2.6rem);border:1px solid rgba(188,153,96,.5)} .od-concern::before{content:"";position:absolute;inset:6px;border:1px solid rgba(188,153,96,.26);pointer-events:none} .od-concern-h{font-family:'Great Vibes',cursive;font-size:2.3rem;line-height:1.35;color:#7d5f2e;margin:0 0 .4rem} .od-concern ul{list-style:none;margin:var(--sp-item) 0 0;padding:0;display:grid;gap:var(--sp-tight)} .od-concern li{display:flex;gap:.85rem;align-items:flex-start;font-family:var(--jp);font-weight:500;font-size:.99rem;line-height:1.75;letter-spacing:.03em} .od-concern li i{flex:0 0 auto;width:22px;height:22px;margin-top:.15rem;display:grid;place-items:center; border:1px solid currentColor;transform:rotate(45deg);font-size:.7rem;font-style:normal} .od-concern li i b{transform:rotate(-45deg);font-weight:700} /* ============ CTA（現行サイトの銘板＝レンガ＋白い二重罫＋唐草コーナー） ============ */ /* CTA帯も背景が切り替わる Row なので、上下は P_large（--sp-section）をそのまま使う */ .od-cta{position:relative;overflow:hidden;padding:var(--sp-section) clamp(1.5rem,6vw,7rem);text-align:center} .od-cta-tel{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.05em; font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);color:#fff8ef;text-decoration:none;display:inline-flex;align-items:center; min-height:52px;margin:.4rem 0 0;border-bottom:1px solid rgba(188,153,96,.75);transition:color .3s ease,border-color .3s ease} .od-cta-tel:hover{color:var(--gold,#bc9960);border-color:var(--gold,#bc9960)} /* ============ 新着情報（CMS: design-parts-52） ============ */ [class*="design-parts-52"]{position:relative;padding:clamp(3rem,6vw,4.5rem) clamp(1.5rem,6vw,7rem);background:var(--paper,#efe7da)} [class*="design-parts-52"].bg-color{background:var(--paper,#efe7da) !important} [class*="design-parts-52"] .container{max-width:1180px;margin:0 auto;position:relative;z-index:2} [class*="design-parts-52"] .content{display:flex;align-items:center;gap:0;padding:0;background:rgba(252,249,243,.96);border:1px solid rgba(188,153,96,.5)} [class*="design-parts-52"] h4.banner-area{flex:0 0 auto;display:flex;align-items:center;margin:0; background:var(--maroon,#491a1a) !important;color:#f7efe2 !important;font-family:'Cormorant Garamond',serif; letter-spacing:.28em;text-transform:uppercase;font-size:1rem;font-weight:600;padding:0 clamp(1.4rem,3vw,2.2rem);align-self:stretch;line-height:1} [class*="design-parts-52"] ul.mb-0{flex:1 1 auto;list-style:none;margin:0;padding:0} [class*="design-parts-52"] li{min-height:64px;display:flex;align-items:center;padding:.6rem clamp(1.1rem,3vw,2rem)} [class*="design-parts-52"] li a{display:flex;align-items:center;min-height:44px;width:100%;text-decoration:none;color:var(--ink2,#4a3a31);transition:color .3s} [class*="design-parts-52"] li a:hover{color:var(--wine,#7a2b32)} [class*="design-parts-52"] .parts-52-textarea{display:flex;align-items:baseline;gap:clamp(.9rem,2vw,1.8rem);flex-wrap:wrap} [class*="design-parts-52"] .parts-52-textarea .date{font-family:'Cormorant Garamond',serif;color:var(--umber,#7f463f);letter-spacing:.09em;font-size:1rem;font-weight:600} [class*="design-parts-52"] .parts-52-textarea .d-inline-block{font-family:var(--jp);font-weight:500;font-size:1.04rem;line-height:1.7;letter-spacing:.03em} @media(max-width:767px){[class*="design-parts-52"] .content{flex-direction:column;align-items:stretch} [class*="design-parts-52"] h4.banner-area{justify-content:flex-start;padding:.8rem clamp(1.4rem,3vw,2.2rem)}} /* ============ 記事カード（CMS: parts131415_blog） ============ */ [class*="parts131415_blog"].bg-img{background:transparent !important;background-image:none !important;padding:0} [class*="parts131415_blog"] .container-lg{max-width:1180px;margin:0 auto} [class*="parts131415_blog"] .parts131415_blog_title_wrap{display:none} [class*="parts131415_blog"] .row{display:flex;flex-wrap:wrap;margin:0 -.85rem} [class*="parts131415_blog"] .col{flex:0 0 100%;max-width:100%;padding:.85rem} @media(min-width:576px){[class*="parts131415_blog"] .row-cols-sm-2>.col{flex:0 0 50%;max-width:50%}} @media(min-width:992px){[class*="parts131415_blog"] .row-cols-lg-3>.col{flex:0 0 33.3333%;max-width:33.3333%}} [class*="parts131415_blog"] .card{position:relative;background:rgba(252,249,243,.97) !important; border:1px solid rgba(188,153,96,.5) !important;border-radius:0;height:100%;transition:transform .35s ease,box-shadow .35s ease} [class*="parts131415_blog"] .card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(58,38,28,.2)} [class*="parts131415_blog"] .card-body{padding:0;display:flex;flex-direction:column;height:100%} /* 表示順（見出し→本文→写真）はCueZillaパーツ仕様。並べ替えない */ [class*="parts131415_blog"] .parts131415_blog_thumbnail{width:100%;height:clamp(12.5rem,11rem + 8vw,14.5rem);overflow:hidden;border-top:1px solid rgba(188,153,96,.45);margin-top:auto} [class*="parts131415_blog"] .parts131415_blog_thumbnail img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease} [class*="parts131415_blog"] .card:hover .parts131415_blog_thumbnail img{transform:scale(1.06)} [class*="parts131415_blog"] .card-title{font-family:'Cormorant Garamond',serif;color:#f7efe2 !important; background:var(--green,#2e4a3c);align-self:flex-start;letter-spacing:.2em;text-transform:uppercase; font-size:.72rem;font-weight:600 !important;margin:1.15rem 1.35rem 0;padding:.36rem .8rem;text-align:left !important} [class*="parts131415_blog"] .card-body a{display:block;text-decoration:none;color:inherit} [class*="parts131415_blog"] .card-text{font-family:var(--jp);font-weight:600 !important; font-size:clamp(1.02rem,.96rem + .28vw,1.12rem);line-height:1.7;letter-spacing:.06em;color:var(--ink,#2b211c);margin:var(--sp-hair) 1.35rem 1.5rem} /* ============ フッター ============ */ .od-foot-nav{display:grid;gap:var(--sp-item)} .od-foot-nav nav{display:grid;align-content:start} .od-foot-nav a{text-decoration:none;color:#ded0b8;font-family:var(--jp);font-weight:500; font-size:.96rem;letter-spacing:.06em;padding:.42rem 0;min-height:44px;display:flex;flex-direction:column; justify-content:center;gap:.1rem;transition:color .3s} .od-foot-nav a:hover{color:var(--gold,#bc9960)} .od-foot-nav a em{font-family:'Cormorant Garamond',serif;font-style:normal;letter-spacing:.26em; font-size:.72rem;line-height:1;color:rgba(224,192,136,.82)} /* ============ 演出 ============ */ @keyframes odRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes odSlideL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}} @keyframes odSlideR{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}} @keyframes odFrameIn{from{opacity:0;transform:translateY(30px) scale(.975)}to{opacity:1;transform:none}} /* 画像はマスクで開く／見出しは行ごとに立ち上がる */ @keyframes odMask{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} @keyframes odLine{from{opacity:0;transform:translateY(.9em)}to{opacity:1;transform:none}} /* 筆記体の見出しは左から書き起こすように開く */ @keyframes odWipe{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 -12% 0 0)}} /* 菱形バナーは中心から菱形に開く */ @keyframes odDia{from{opacity:0;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)} to{opacity:1;clip-path:polygon(50% -28%,128% 50%,50% 128%,-28% 50%)}} /* MVのタイルは下から順に立ち上がる */ @keyframes odTileIn{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} /* ★遷移直後にドロワー（メニュー画面）が一瞬出るのを防ぐ（2026-08-31）。 ドロワーは条件付きで描かれるが、その条件がJSで決まるまでの描画途中に 全画面の暗い面が顔を出していた。既定は【隠す】。開いたときだけ出す。 */ #od-drawer{display:none !important} #od-drawer[data-open="1"]{display:flex !important} /* ============ イントロ ============ */ /* ★幕を出すのは【トップだけ】（2026-09-11・ディレクター指示）。 幕のHTMLは全ページ共通のヘッダーブロックに入っているので、既定は隠す。 html.od-top はBODY内JSが ＜body＞ 直後＝幕のHTMLより前に付ける印（下層でちらつかない）。 ★animation を html.od-top 側に置くのが要点。素の #intro-loader に animation を残すと、 display:none でもアニメは走り、visibility/opacity の都合で再表示時に破綻する。 */ #intro-loader{display:none} html.od-top #intro-loader{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center; background:#efe7da;animation:introDismiss 3.2s ease forwards} @keyframes introDismiss{0%,66%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}} /* ★一度終わったオープニングは二度と出さない（再描画でアニメが頭から再生されるのを止める） */ html.od-intro-done #intro-loader{display:none !important;animation:none !important} /* ★2026-08-31 に再開（ディレクター指示）。停止していたあいだの `display:none !important` は撤去。 ★演出の長さは【CSSとJSの対】。introDismiss の 3.2s と、componentDidMount の setTimeout(..., 3200) は必ず同じ値にすること。片方だけ変えると、幕が消えたのに display:none が残る／逆に幕が残る、のどちらかが起きる。 ★中の動きは幕が消え始める前に終わらせる。introDismiss は 66%＝2.11秒から薄くなるので、 金の線（introBar）は 0.35s+1.5s＝1.85秒で引き終わる。以前は 0.3s+2.2s＝2.5秒かかり、 【線を引いている途中で幕が消え始めていた】。 */ @keyframes introUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes introBar{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* 画面には出さず、Tabで最初に触れたときだけ現れる（固定ヘッダーの下を飛ばす） */ .od-skip{position:absolute;left:1rem;top:-3rem;z-index:100;padding:.7rem 1.2rem; background:var(--maroon,#491a1a);color:#fbf5ea;text-decoration:none;font-family:var(--jp); font-weight:600;font-size:.9rem;min-height:44px;display:inline-flex;align-items:center; transition:top .2s ease} .od-skip:focus{top:1rem} /* 目には見えないが読み上げには出る（ページの見出し用） */ /* ★scroll-margin-top は必須。スキップリンク（本文へ飛ぶ）の着地点がここなので、 指定が無いと固定ヘッダーの裏に本文の先頭が潜り、キーボード利用者が読み始めを見失う （WCAG 2.4.11・R-18／機械ゲート a11y の anchor-under-header）。 値はヘッダー高さと同じ式にする。 */ #od-main{display:flex;flex-direction:column;width:100%;scroll-margin-top:clamp(64px,8vw,84px)} .od-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ============ ロゴ組み（ヘッダー・ドロワー・フッターで共通） ============ 3箇所で別々に書いていたため、ヘッダーだけ新しくドロワーとフッターが古いままになっていた。 ここ1箇所を直せば3箇所とも変わる。色と大きさだけ文脈ごとに上書きする。 */ .od-lockup{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit} .od-lockup > img{width:auto;display:block;flex:0 0 auto;height:var(--lockMark,44px)} .od-lockup .t{display:flex;flex-direction:column;line-height:1.12} .od-lockup .co{font-family:var(--jp);font-weight:600;font-size:var(--lockCo,.7rem); letter-spacing:.26em;color:var(--lockCoC,var(--umber,#7f463f));white-space:nowrap} .od-lockup .nm{font-family:var(--jp);font-weight:600;font-size:var(--lockNm,1.14rem); letter-spacing:.1em;color:var(--lockNmC,var(--ink,#2b211c));margin-top:.18em;white-space:nowrap} .od-lockup .en{font-family:'Great Vibes',cursive;font-size:var(--lockEn,.92rem); line-height:1.3;color:var(--lockEnC,#7d5f2e);margin-top:.1em} /* ハンバーガーの「閉じる」は「開く」と同じ座標に置く（タップ位置を動かさない）。 開くボタンはヘッダー（高さ clamp(64px,8vw,84px)・右余白 clamp(1.2rem,5vw,3.4rem)）の中で 縦中央にあるので、同じ計算で固定する。 */ .od-dw-close{position:fixed;z-index:95;right:clamp(1.2rem,5vw,3.4rem); top:calc((clamp(64px,8vw,84px) - 46px) / 2)} /* ドロワーのCTAは1行に収める（狭い画面で2〜3行に折り返していた） */ .od-dw-cta{white-space:nowrap;font-size:clamp(.76rem,3.3vw,1rem);gap:.55rem; padding-left:clamp(.7rem,3vw,1.4rem);padding-right:clamp(.7rem,3vw,1.4rem)} /* ボタンが2つ以上並ぶ列。 1行に収まるときは等分、収まらないときは各自が全幅になる（＝どちらでも幅が揃う）。 中身の長さで幅が決まると、縦に積んだときに上下で幅が変わってしまう。 */ .od-btnrow{display:flex;flex-wrap:wrap;align-items:stretch;gap:.9rem} .od-btnrow > .od-btn{flex:1 1 200px} /* ============ ヘッダー・ドロワーの共通部品 ============ 同じ指定が4〜12回ずつインラインで繰り返されていたのでここへ集約した。 直すときはこの1箇所で済む（インラインに戻さないこと）。 */ .od-nav-a{text-decoration:none;color:inherit;padding:.85rem .1rem;transition:color .3s} .od-nav-a:hover{color:var(--wine,#7a2b32)} /* ===== ヘッダーの子メニュー（業務案内・採用情報） ===== ★開閉はCSSだけで行なう。JSの状態（setState）で出し入れしてはいけない。 onMouseEnter で状態を変えると、カーソルを乗せた瞬間に再描画が走って ＜a＞ が 別の要素に差し替わり、mousedown と mouseup が違う要素に落ちて【クリックが成立しない】。 ＝親の「業務案内」「採用情報」を押しても何も起きない（2026-08-28 実測・ディレクター報告）。 :focus-within を併記してあるのはキーボード操作でも開けるようにするため（ホバーだけだと開けない）。 */ .od-nav-menu{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease} .od-nav-drop:hover .od-nav-menu,.od-nav-drop:focus-within .od-nav-menu{opacity:1;visibility:visible;pointer-events:auto} .od-dd-a{text-decoration:none;color:var(--ink,#2b211c);font-size:.88rem;padding:.6rem .3rem; min-height:44px;display:flex;align-items:center;transition:color .3s} .od-dd-a:hover{color:var(--wine,#7a2b32)} .od-dw-row{display:flex;align-items:center;gap:1rem;padding:clamp(.95rem,3vw,1.3rem) 0; border-bottom:1px solid rgba(247,239,226,.12);color:#f7efe2;text-decoration:none;min-height:44px} .od-dw-sub{color:rgba(247,239,226,.75);text-decoration:none;font-size:.9rem;padding:.5rem 0; min-height:44px;display:flex;align-items:center;transition:color .3s} .od-dw-sub:hover{color:#e0c088} .od-dw-n{font-family:'Cormorant Garamond',serif;color:#e0c088;font-size:.9rem;letter-spacing:.18em} .od-dw-stack{display:flex;flex-direction:column;line-height:1.35} .od-dw-en{font-family:'Great Vibes',cursive;font-size:1.35rem;line-height:1.35} .od-dw-ja{font-family:var(--jp);font-weight:500;font-size:.85rem;letter-spacing:.1em;color:rgba(247,239,226,.72)} .cnr{color:#f0e2cd} /* ============ ブレークポイント ============ */ @media(max-width:560px){ /* 菱形は横に2つ並べない。並べると1枚が約163pxになり、中の文字が8pxまで落ちる */ .od-dias{grid-template-columns:minmax(0,1fr)} } @media(min-width:768px){ .od-stats{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(min-width:900px){ /* 理由カードは900pxから3列。768〜899pxで3列にすると1枚の内幅が157pxになり、 分割できない語（OLTREMATERIA・VALPAINT＝163px）が枠を超える。 日本語も1行10文字程度になって読みづらい */ .od-cards{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(min-width:1024px){ .od-hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(2rem,3.2vw,3.4rem)} } @media(max-width:640px){ .od-hd-sub{display:none} } @media(max-width:1023px){ .od-hero{min-height:88svh;padding-top:clamp(6.5rem,20vw,8rem)} .od-hero-copy{min-height:clamp(196px,50vw,250px)} .od-mosaic{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(8,1fr)} .od-tile--a{grid-area:1/1/3/3}.od-tile--b{grid-area:1/3/4/7}.od-tile--c{grid-area:3/1/5/3} .od-tile--d{grid-area:4/3/6/5}.od-tile--e{grid-area:4/5/6/7}.od-tile--f{grid-area:5/1/7/3} .od-tile--g{grid-area:6/3/8/5}.od-tile--h{grid-area:6/5/8/7}.od-tile--i{grid-area:7/1/9/3} .od-tile--j{grid-area:8/3/9/5}.od-tile--k{grid-area:8/5/9/7} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} /* ★出現演出の要素はCSS側でも最初から見せる。 いまはJSが reduced-motion を見て即座に表示しているので実害は出ていない （実測 2026-08-28: reduce で不可視0件／通常時は11件が出現待ち＝意図どおり）。 ただしJSが1行でも落ちれば opacity:0 のまま本文が消える＝動きを減らす設定の人だけ 白いページを見る、という最悪の形になる。CSSで二重に保証しておく。 教訓: 70_運用ルール/教訓メモリ/css-animation-hidden-base-state-blanks-under-motion-kill.md */ [data-rv],[data-anim]{opacity:1 !important;transform:none !important;clip-path:none !important} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} /* ★!important 必須（2026-09-11）。トップ限定化で表示側が `html.od-top #intro-loader` ＝id+class+type になったため、素の `#intro-loader{display:none}` では負けて、 動きを減らす設定の人にトップで幕が出てしまう。 */ #intro-loader{display:none !important} } /* ===== B) 下層ページ部品（受領そのまま） ===== */ /* ============================================================================ od-pages.css — 下層ページ専用のセクション部品 od-theme.css（トップページから生成）の後に読み込む。トークン（--sp-* / --ink 等）は od-theme.css の :root で定義済みのものをそのまま使う。ここでは新しい色を作らない。 ★下層は12枚ある。同じ型が続くと読み飛ばされるので、型を複数用意して混ぜて使う。 ページ側で直にHTMLを書かないこと（12枚のあいだで必ずばらつく）。 ============================================================================ */ /* ---- 大きなリンク行（子ページへの誘導） ---- */ .od-linkrow{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-item); padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.4rem,2.6vw,2.2rem); border:1px solid rgba(188,153,96,.5);background:rgba(252,249,243,.72); text-decoration:none;color:inherit;transition:background .35s ease,border-color .35s ease,transform .35s ease} .od-linkrow::before{content:"";position:absolute;inset:5px;border:1px solid rgba(188,153,96,.24);pointer-events:none;transition:inset .35s ease} .od-linkrow:hover{background:rgba(250,246,238,.95);border-color:var(--gold,#bc9960);transform:translateX(4px)} .od-linkrow:hover::before{inset:8px} .od-linkrow .t{display:flex;flex-direction:column;min-width:0} .od-linkrow .en{font-family:'Great Vibes',cursive;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);line-height:1.15;color:var(--maroon,#491a1a)} .od-linkrow .ja{font-family:var(--jp);font-weight:600;font-size:clamp(1rem,.95rem + .3vw,1.14rem);letter-spacing:.1em;color:var(--lavDk,#6b5a92);margin-top:var(--sp-hair)} .od-linkrow .p{font-family:var(--jp);font-weight:500;font-size:.95rem;line-height:1.9;letter-spacing:.03em;color:var(--ink2,#4a3a31);margin-top:var(--sp-tight)} .od-linkrow .ar{flex:0 0 auto;width:44px;height:1px;background:currentColor;position:relative;color:var(--goldDk,#8f6d34)} .od-linkrow .ar::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)} /* ---- 定義表（募集要項） ---- */ .od-dl{display:grid;grid-template-columns:minmax(0,1fr);margin:var(--sp-head) 0 0; border-top:1px solid rgba(188,153,96,.45)} .od-dl dt{font-family:var(--jp);font-weight:600;font-size:.96rem;letter-spacing:.1em;color:var(--lavDk,#6b5a92); padding:14px 0 var(--sp-hair)} .od-dl dd{margin:0;font-family:var(--jp);font-weight:500;font-size:1.02rem;line-height:1.95;letter-spacing:.04em; color:var(--ink2,#4a3a31);padding:0 0 14px;border-bottom:1px solid rgba(188,153,96,.3)} @media(min-width:768px){ .od-dl{grid-template-columns:minmax(0,15rem) minmax(0,1fr)} /* ★上下 padding は --sp-tight。--sp-item ずつだと行間が 77px になり、 見出しの塊からの距離（--sp-head 75px）を上回って「くくりの中が外より広い」になる。 */ /* 行間の合計（上下 padding の和）が 見出し→表（--sp-head）を超えないようにする */ .od-dl dt{padding:14px var(--sp-item) 14px 0;border-bottom:1px solid rgba(188,153,96,.3)} .od-dl dd{padding:14px 0} } /* ---- 流れ（選考ステップ） ---- */ .od-steps{list-style:none;margin:var(--sp-head) 0 0;padding:0;display:grid;gap:var(--sp-item); grid-template-columns:minmax(0,1fr);counter-reset:od-step} @media(min-width:768px){.od-steps{grid-template-columns:repeat(4,minmax(0,1fr))}} .od-steps li{position:relative;padding:clamp(1.4rem,2.4vw,1.9rem) clamp(1.2rem,2vw,1.6rem); background:rgba(252,249,243,.8);border:1px solid rgba(188,153,96,.45); font-family:var(--jp);font-weight:600;font-size:1rem;letter-spacing:.06em;line-height:1.7;color:var(--ink,#2b211c)} /* ★番号とラベルはそれぞれ独立した要素にする。ラベルを li の直下のテキストにすると 「li が2行あって最終行が2文字」＝泣き別れと機械判定される（意図した2段組みなのに）。 要素を分ければ、番号1行・ラベル1行として正しく数えられる。 */ .od-steps li .t{display:block} .od-steps li .n{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.9rem;line-height:1; letter-spacing:.06em;color:var(--goldDk,#8f6d34);margin-bottom:var(--sp-hair)} /* ---- 注記（未確定の数値など） ---- */ .od-note{font-family:var(--jp);font-weight:500;font-size:.88rem;line-height:1.95;letter-spacing:.04em; color:var(--ink2,#4a3a31);opacity:.78;margin:0;padding-left:1.1em;text-indent:-1.1em} /* ★暗い地では ink2 のままだと 1.36:1 で読めない。明るい側の文字色に切り替える */ .od-onDark .od-note{color:#e2d6c4;opacity:.86} /* ---- 写真と文章の2カラム（左右を入れ替えて変化をつける） ---- */ /* ★写真と本文の間は、本文の中のかたまり同士の空き（--sp-group）より広くする。 同値だと「くくりの中が外と同じ」になる（実測 768px 業務案内: 内42px / 外42px）。 */ .od-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-block);align-items:center} @media(min-width:900px){ .od-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.6rem,5vw,5rem)} .od-split--flip .od-split-fig{order:2} } .od-split-fig{position:relative;padding:10px;background:rgba(250,246,238,.8);border:1px solid rgba(188,153,96,.5)} .od-split-fig > div{position:relative;overflow:hidden;aspect-ratio:4/3} .od-split-fig img{width:100%;height:114%;object-fit:cover;position:absolute;inset:0;max-width:none} .od-onDark .od-split-fig{background:rgba(43,33,28,.5);border-color:rgba(188,153,96,.42)} /* ---- 大きな写真に銘板を重ねる（見せ場用） ---- */ .od-feature{position:relative;min-height:clamp(420px,54vh,600px);display:flex;align-items:center;justify-content:center} .od-feature-img{position:absolute;inset:0;overflow:hidden} .od-feature-img img{width:100%;height:100%;object-fit:cover;display:block;max-width:none} .od-feature .od-plate{position:relative;z-index:2;max-width:660px;text-align:center; padding:clamp(2.6rem,4.6vw,3.8rem) clamp(1.8rem,3.6vw,3rem)} /* ---- 引用・言い切りの一文 ---- */ .od-quote{text-align:center;max-width:44rem;margin:0 auto} .od-quote .en{display:block;font-family:'Great Vibes',cursive;font-size:clamp(2.2rem,1.6rem + 2.2vw,3.4rem); line-height:1.25;color:var(--gold,#bc9960)} .od-quote .ja{display:block;font-family:var(--jp);font-weight:600;font-size:clamp(1.14rem,1.02rem + .64vw,1.54rem); letter-spacing:.11em;line-height:1.62;margin-top:var(--sp-item)} /* ---- 写真を並べる帯 ---- */ .od-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.5rem,1.2vw,1rem);margin-top:var(--sp-head)} @media(min-width:768px){.od-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}} .od-gallery span{position:relative;overflow:hidden;aspect-ratio:1;background:#cdbfa8} .od-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)} .od-gallery span:hover img{transform:scale(1.06)} /* 6枚のときは3列（4列だと最後の行が2枚になって右が空く） */ @media(min-width:768px){.od-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ---- 工法カード（写真つき。1項目＝1枚） ---- ★段は「カード同士(--sp-block) > 写真→番号(--sp-item) > 番号→見出し→本文(--sp-tight) > 行間」。 外側ほど広い、を崩さないこと（崩すとカードの切れ目が読めなくなる）。 */ .od-craft{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-block);margin-top:var(--sp-head)} @media(min-width:768px){.od-craft{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.6rem,3vw,2.8rem)}} .od-craft .ph{display:block;overflow:hidden;aspect-ratio:4/3;background:#cdbfa8} .od-craft .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)} .od-craft article:hover .ph img{transform:scale(1.06)} .od-craft .n{display:block;font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1;letter-spacing:.06em; color:var(--goldDk,#8f6d34);margin-top:var(--sp-item)} /* ★暗い地では --goldDk のままだと 2.95:1 で大文字の基準3:1に届かない（numbered と同じ理由） */ .od-onDark .od-craft .n{color:var(--gold,#bc9960)} .od-craft h4{font-family:var(--jp);font-weight:600;font-size:clamp(1.14rem,1.02rem + .5vw,1.4rem); letter-spacing:.08em;line-height:1.6;color:var(--lavDk,#6b5a92);margin:var(--sp-tight) 0 0} .od-onDark .od-craft h4{color:#e6dcf5} /* 読み幅の上限は掛けない（列そのものが読み幅を決めているため。numbered と同じ） */ .od-craft p{font-family:var(--jp);font-weight:500;font-size:clamp(1.02rem,.97rem + .3vw,1.11rem); line-height:1.9;letter-spacing:.045em;color:var(--ink2,#4a3a31);margin:var(--sp-tight) 0 0;max-width:none} .od-onDark .od-craft p{color:#e2d6c4} /* ---- 番号つきの見せ方（大きな数字＋罫） ---- */ .od-numlist{display:grid;gap:var(--sp-group);margin-top:var(--sp-head)} .od-numrow{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-item);align-items:start} @media(min-width:768px){.od-numrow{grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:clamp(1.6rem,3vw,2.8rem)}} .od-numrow .n{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.8rem,2rem + 2.6vw,4.2rem); line-height:1;letter-spacing:.04em;color:var(--goldDk,#8f6d34)} .od-numrow .n::after{content:"";display:block;width:64px;height:1px;margin-top:var(--sp-tight); background:linear-gradient(90deg,var(--gold,#bc9960),rgba(188,153,96,0))} .od-numrow h4{font-family:var(--jp);font-weight:600;font-size:clamp(1.14rem,1.02rem + .5vw,1.4rem); letter-spacing:.08em;line-height:1.6;color:var(--lavDk,#6b5a92);margin:0} /* ★暗い地では数字を明るい金へ。--goldDk のままだと 2.95:1 で大文字の基準3:1に届かない（実測） */ .od-onDark .od-numrow .n{color:var(--gold,#bc9960)} .od-onDark .od-numrow .n::after{background:linear-gradient(90deg,var(--gold,#bc9960),rgba(188,153,96,0))} .od-onDark .od-numrow h4{color:#e6dcf5} .od-numrow p{font-family:var(--jp);font-weight:500;font-size:clamp(1.02rem,.97rem + .3vw,1.11rem); line-height:1.9;letter-spacing:.045em;color:var(--ink2,#4a3a31);margin:var(--sp-tight) 0 0; /* ★ここでは読み幅の上限（--read）を掛けない。 この本文は既に「番号の列を除いた列」の中にあり、列そのものが読み幅を決めている。 そこへさらに上限を重ねると、列の手前で折り返して右に余白が残る （実測 2026-08-28・業務案内: 列1025px に対し本文906px＝119px手前で折り返していた）。 上限が要るのは「版面いっぱいに置かれた本文」（.od-lead）だけ。 */ max-width:none} .od-onDark .od-numrow p{color:#e2d6c4} /* ============================================================================ ここから下は「枠外6ページ」（会社概要・お問い合わせ・ブログ・施工実績・ プライバシーポリシー・サイトマップ）のための部品。2026-08-28 追加。 ★余白は必ず外側が広い順に：--sp-block > --sp-group > --sp-item > --sp-tight ============================================================================ */ /* ---- タグ群（施工認定ブランドなど、短い語をたくさん並べる） ---- */ .od-tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-tight);margin:var(--sp-head) 0 0;padding:0} .od-tags li{font-family:var(--jp);font-weight:500;font-size:.94rem;letter-spacing:.06em;line-height:1.5; color:var(--ink2,#4a3a31);padding:.6em 1.05em;background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5)} .od-onDark .od-tags li{color:#e2d6c4;background:rgba(43,33,28,.5);border-color:rgba(188,153,96,.42)} /* ---- 連絡先の直接導線（電話・メール等を大きく置く） ---- */ .od-contact{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-item);margin-top:var(--sp-head)} @media(min-width:768px){.od-contact{grid-template-columns:repeat(2,minmax(0,1fr))}} .od-contact-item{padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.4rem,2.4vw,1.9rem); background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5)} /* ★色は --goldDk ではなく専用の濃い金にする。13.44px の小さな字なので 4.5:1 が要り、 --goldDk(#8f6d34) をこの地(rgb(250,246,240))に置くと 4.43:1 で 0.07 足りない（実測 _contrast.mjs）。 見た目を変えずに済む最小の暗さに落としてある。薄く戻すとコントラストNGで差し戻される。 */ .od-contact-item .lb{display:block;font-family:'Cormorant Garamond',serif;font-size:.84rem; letter-spacing:.24em;text-transform:uppercase;color:#8a6830;margin:0} .od-contact-item .v{display:block;font-family:'Cormorant Garamond',serif;font-weight:500; font-size:clamp(1.5rem,1.15rem + 1.2vw,2.05rem);line-height:1.24;letter-spacing:.03em; color:var(--maroon,#491a1a);margin:var(--sp-hair) 0 0;text-decoration:none;overflow-wrap:anywhere} a.v{transition:color .3s ease} a.v:hover{color:var(--goldDk,#8f6d34)} /* ★日本語の値（住所など）は欧文書体を当てない。Cormorant Garamond に和字が無く、 フォールバックで別の書体・別の太さになって同じ並びの中で1枚だけ浮く（実測 2026-08-28 会社概要／お問い合わせ）。 和文は和文書体で、欧文より一段小さく置く（同じ級数だと和字のほうが大きく見えるため）。 */ .od-contact-item .v--ja{font-family:var(--jp);font-weight:600; font-size:clamp(1.16rem,1.02rem + .5vw,1.42rem);letter-spacing:.08em;line-height:1.55} .od-contact-item .s{display:block;font-family:var(--jp);font-weight:500;font-size:.9rem;line-height:1.85; letter-spacing:.04em;color:var(--ink2,#4a3a31);margin:var(--sp-tight) 0 0} /* ---- 施工実績カード（写真が主役。ブログの文字主役カードと対にする） ---- */ .od-works{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-group);margin-top:var(--sp-head)} @media(min-width:640px){.od-works{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1024px){.od-works{grid-template-columns:repeat(3,minmax(0,1fr))}} .od-work{display:block;text-decoration:none;color:inherit;background:rgba(252,249,243,.9); border:1px solid rgba(188,153,96,.5);padding:10px; transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease} .od-work:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(58,38,28,.18);border-color:var(--gold,#bc9960)} /* ★span を並べているので display:block を明示する。既定の inline のままだと 写真・カテゴリ・タイトルが1行に流れ込んで積み上がらない（実測 2026-08-28）。 */ .od-work-img{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:#cdbfa8} .od-work-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)} .od-work:hover .od-work-img img{transform:scale(1.05)} /* カードの中（写真→本文）は、カード同士の間隔より狭くする */ /* 写真→本文は、本文の中（カテゴリ→タイトル）より広くする */ .od-work-body{display:block;padding:var(--sp-item) var(--sp-tight) var(--sp-tight)} /* ★カテゴリの見せ方はブログ（CMSパーツ parts131415_blog の .card-title）と同じ緑の塗りに揃える。 一覧が2種類あるのに片方だけ紫の線囲みだと、同じ「カテゴリ」に見えず並びが揃わない。 色は od-theme.css の --green。ここで新しい色は作らない。 */ .od-work-cat{display:inline-block;font-family:var(--jp);font-weight:600;font-size:.74rem;letter-spacing:.14em; line-height:1;color:#f7efe2;background:var(--green,#2e4a3c);padding:.4em .85em} .od-work-ttl{display:block;font-family:var(--jp);font-weight:600;font-size:1.05rem;line-height:1.65;letter-spacing:.05em; color:var(--ink,#2b211c);margin:13px 0 0} /* ---- ページ送り（一覧の下） ---- */ .od-pager{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:var(--sp-tight);margin:var(--sp-head) 0 0;padding:0} .od-pager a,.od-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:46px; padding:0 .7em;font-family:'Cormorant Garamond',serif;font-size:1.05rem;letter-spacing:.06em; color:var(--ink,#2b211c);text-decoration:none;background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5); transition:background .3s ease,color .3s ease,border-color .3s ease} .od-pager a:hover{background:var(--gold,#bc9960);border-color:var(--gold,#bc9960);color:#fbf5ea} .od-pager .now{background:var(--maroon,#491a1a);border-color:var(--maroon,#491a1a);color:#fbf5ea} /* ---- 問い合わせフォーム（実機はCueZillaが描画。ここは見た目の確認用） ---- */ .od-form{display:grid;gap:var(--sp-group);margin-top:var(--sp-head)} .od-form-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-tight)} @media(min-width:768px){.od-form-row{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:var(--sp-item);align-items:start}} .od-form-lb{display:flex;align-items:center;gap:.7em;font-family:var(--jp);font-weight:600;font-size:.98rem; letter-spacing:.08em;line-height:1.6;color:var(--lavDk,#6b5a92)} .od-form-lb label{color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer} @media(min-width:768px){.od-form-lb{padding-top:.95rem}} .od-form-req{font-family:var(--jp);font-weight:600;font-size:.72rem;letter-spacing:.1em;line-height:1; color:#fbf5ea;background:var(--maroon,#491a1a);padding:.44em .72em;white-space:nowrap} .od-form input[type=text],.od-form input[type=email],.od-form input[type=tel],.od-form textarea,.od-form select{ width:100%;min-height:54px;padding:.9rem 1rem;border-radius:0; background:rgba(252,249,243,.92);border:1px solid rgba(188,153,96,.55); font-family:var(--jp);font-weight:500;font-size:1rem;line-height:1.7;letter-spacing:.04em;color:var(--ink2,#4a3a31); transition:border-color .3s ease,box-shadow .3s ease} .od-form textarea{min-height:10rem;resize:vertical} .od-form input:focus,.od-form textarea:focus,.od-form select:focus{outline:none; border-color:var(--gold,#bc9960);box-shadow:0 0 0 3px rgba(188,153,96,.22)} .od-form ::placeholder{color:var(--ink2,#4a3a31);opacity:.42} .od-form-foot{display:flex;flex-direction:column;align-items:center;gap:var(--sp-item);margin-top:var(--sp-head)} /* ---- 規約の条文（プライバシーポリシー） ---- */ .od-legal{display:grid;gap:var(--sp-group);margin-top:var(--sp-head)} .od-legal h4{font-family:var(--jp);font-weight:600;font-size:clamp(1.04rem,.98rem + .34vw,1.22rem); letter-spacing:.07em;line-height:1.6;color:var(--lavDk,#6b5a92);margin:0 0 var(--sp-tight)} .od-legal p{font-family:var(--jp);font-weight:500;font-size:1rem;line-height:1.95;letter-spacing:.04em; color:var(--ink2,#4a3a31);margin:0} .od-legal p + p{margin-top:var(--sp-tight)} /* ★本文→箇条書き（--sp-item）は、箇条書きの中（--sp-hair）より必ず広くする。 同じ値にすると「くくりの中が外と同じ」＝余白の原則の違反になる（_spacing.mjs B）。 */ .od-legal ol{list-style:none;margin:var(--sp-item) 0 0;padding:0;display:grid;gap:var(--sp-hair)} .od-legal li{font-family:var(--jp);font-weight:500;font-size:.98rem;line-height:1.9;letter-spacing:.04em; color:var(--ink2,#4a3a31);padding-left:2.5em;text-indent:-2.5em} .od-legal a{color:var(--maroon,#491a1a)} /* ---- サイトマップ ---- */ /* ★子ページを ＜ul＞ の入れ子にしない（li.sub で見た目だけ字下げする）。 入れ子にすると「グループ間 > 見出し→一覧 > 親どうし > 親→子 > 子どうし」の5段が要り、 余白トークンは4段（block/group/item/tight）しか無いので必ずどこかが同値になる。 同値＝「くくりの中が外と同じ」で余白の原則に反する（_spacing.mjs B が検出する）。 */ /* 4段の階段: 見出し→一覧(block) > グループ間(group) > 見出し→リンク列(item) > リンク間(tight) */ .od-map{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-group);margin-top:var(--sp-head)} @media(min-width:768px){.od-map{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ★広い画面では4群を横一列に。リンクの文字が短いため2列だと右側が余り、 版面1126pxに対してインクが790px（70%）しか無かった（実測 2026-08-28・充填率ゲート #16）。 群はちょうど4つ（Products / Recruit / Company / Contacts）なので、そのまま4列にすれば版面が埋まる。 */ @media(min-width:1100px){.od-map{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-group)}} .od-map h4{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.5rem;letter-spacing:.09em; line-height:1.3;color:var(--goldDk,#8f6d34);margin:0;padding-bottom:.55rem; border-bottom:1px solid rgba(188,153,96,.5)} /* ★見出し→リンク列は、群どうしの間隔（--sp-group）より狭くする。 狭幅では clamp の下限どうしが接近して逆転しやすいので --sp-tight を使う。 */ .od-map ul{list-style:none;margin:var(--sp-tight) 0 0;padding:0;display:grid;gap:var(--sp-tight)} .od-map a{display:inline-flex;align-items:center;gap:.75em;font-family:var(--jp);font-weight:500; font-size:1.02rem;line-height:1.7;letter-spacing:.06em;color:var(--ink,#2b211c);text-decoration:none; min-height:44px;transition:color .3s ease} .od-map a::before{content:"";flex:0 0 auto;width:14px;height:1px;background:var(--gold,#bc9960)} .od-map a:hover{color:var(--maroon,#491a1a)} .od-map li.sub{padding-left:1.7em} .od-map li.sub a{font-size:.96rem;color:var(--ink2,#4a3a31)} /* ---- タップ領域の確保（44px）---------------------------------------------- 下層で新しく足したリンクは文字が小さく、指で押すには狭い（実測 20〜41px）。 本文中のリンクは inline-flex にして行の流れを保ったまま高さだけ稼ぐ。 ※ここを消すと _gate-pages.mjs の「タップ」で必ず差し戻される。 */ .od-map a{min-height:44px;align-items:center} .od-map a::before{transform:none} a.v{display:flex;align-items:center;min-height:44px} .od-dl a,.od-legal a,.od-note a,.od-duo a{display:inline-flex;align-items:center;min-height:44px} /* ★本文中のリンクは、色を当てないとブラウザ既定の青(#0000ee)のまま出る。 実測 2026-08-28: 会社概要の .od-dl（TEL/メール/Instagram）4本と お問い合わせの .od-note 1本が青のままだった。 この配色に青は無いので、サイトのワイン色(--maroon)へ統一する（.od-legal a / .od-duo a と同じ）。 */ .od-dl a,.od-note a{color:var(--maroon,#491a1a)} .od-dl a:hover,.od-note a:hover,.od-legal a:hover,.od-duo a:hover{color:var(--goldDk,#8f6d34)} /* ---- 注記（節の末尾に置く一文） ---- 独立した節にせず、直前の節の中へ入れている（理由は _検証/_parts.mjs の note）。 節の中の他のかたまりより外側なので、空きは --sp-block（節の中で一番広い段）を使う。 */ /* 注記は節の中の最後のかたまり。中身どうしの空き（--sp-block）と同値だと 「くくりの中が外と同じ」になるので、一段狭い --sp-group にする */ /* ★注記は節の中で最も外側のかたまり。中身（--sp-block）より広い空きが要る。 狭くすると「くくりの中の空きが外と同じ」で余白の原則に反する（_spacing.mjs B）。 */ .od-note-wrap{margin-top:calc(var(--sp-block) * 1.25)} /* ---- 番号つきの3列展開（1文が短い列挙用） ---- 縦積みだと1行が短く、広い画面で版面の右半分がまるごと空く。 3列に展開すると版面を自然に埋められる。番号は見出しの上に置いて縦に積む （横並びのままだと1列あたり約390pxで番号と本文が窮屈になる）。 */ @media(min-width:900px){ .od-numlist--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-group) clamp(2rem,3.4vw,3.2rem)} .od-numlist--3 .od-numrow{grid-template-columns:minmax(0,1fr);gap:var(--sp-tight)} .od-numlist--3 .od-numrow p{max-width:none} } @media(min-width:640px) and (max-width:899.98px){ .od-numlist--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-group)} } /* ★文字を載せる面は不透明に近づける（.94）。半透明のままだと下の写真が透けて 地色が暗くなり、淡紫の見出しがコントラスト基準を割る（実測 3.69/4.5・2026-08-28）。 */ /* ---- 番号つきの一文カード（「こんな方を歓迎します」など） ---- 案1の下層ページにある構成を案2の意匠で受けたもの。 案1は太い黒枠＋ショッキングピンクだが、ここでは金の細罫＋淡紫に置き換える（世界観は案2のまま）。 */ /* ★横に並べる。1行の言い切りを縦積みにすると版面の左半分で終わり、右がまるごと空く （実測 2026-08-28・充填率ゲート #16: 業務案内41% / 採用情報55%）。 項目数が2でも3でも4でも埋まるよう auto-fit にしてある。 */ .od-points{list-style:none;display:grid;gap:var(--sp-item);margin:var(--sp-head) 0 0;padding:0; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));align-items:stretch} /* ★4件のときは広い画面で2×2に固定する（ディレクター指示 2026-08-31・業務案内）。 auto-fit のままだと 1440px で3列になり【3+1】の半端な段になる（1024pxでは元から2列）。 3件の使い方（採用情報「こんな方を歓迎します」）は1列に収まっているので、そちらには付けない。 */ @media(min-width:1024px){.od-points--2{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ★5件のときは1列に固定する（ディレクター指摘 2026-09-02・採用情報「こんな方を歓迎」）。 auto-fit のままだと 1440px で 3列になり、下の段に2件だけ左寄せで残る。 長い一文の項目が含まれるので、横幅を使い切る1列が読みやすい。 */ .od-points--1{grid-template-columns:minmax(0,1fr)} .od-points li{height:100%} .od-points li{display:flex;gap:clamp(1rem,2vw,1.6rem);align-items:flex-start; padding:clamp(1.3rem,2.4vw,1.8rem) clamp(1.4rem,2.6vw,2rem); background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5)} .od-points .n{flex:0 0 auto;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.7rem; line-height:1.2;letter-spacing:.04em;color:var(--goldDk,#8f6d34)} .od-points .t{font-family:var(--jp);font-weight:500;font-size:clamp(1rem,.95rem + .3vw,1.1rem); line-height:1.9;letter-spacing:.045em;color:var(--ink2,#4a3a31)} .od-onDark .od-points li{background:rgba(43,33,28,.5);border-color:rgba(188,153,96,.42)} .od-onDark .od-points .t{color:#e2d6c4} /* ---- Q&A（採用FAQなど） ---- */ /* ★2列に。1問が短いので1列だと右が空く（実測 #16: 46〜57%）。 設問が長い案件では auto-fit が自動的に1列へ戻る。 */ .od-faq{display:grid;gap:var(--sp-item);margin:var(--sp-head) 0 0; grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));align-items:start} .od-faq > div{padding:clamp(1.3rem,2.6vw,1.9rem) clamp(1.4rem,2.8vw,2.1rem); background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5)} .od-faq dt{display:flex;gap:.8em;font-family:var(--jp);font-weight:600; font-size:clamp(1.02rem,.97rem + .3vw,1.14rem);line-height:1.7;letter-spacing:.06em; color:var(--lavDk,#6b5a92);margin:0} /* ★Q. は 4.43:1 で基準4.5にわずかに届かない（--goldDk）。連絡先ラベルと同じ濃さにする */ .od-faq dt .q{flex:0 0 auto;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.2rem; line-height:1.5;color:#7d5c28} .od-faq dd{margin:var(--sp-tight) 0 0;padding-left:1.9em;font-family:var(--jp);font-weight:500; font-size:1rem;line-height:1.95;letter-spacing:.04em;color:var(--ink2,#4a3a31)} /* ---- 2つの話題を横に並べる（給与の目安／休日・休暇 など・写真なし） ---- */ /* ★2つの話題の間（内側）は、見出しから離す距離（外側 --sp-block）より狭くする。 縦に積む狭い画面で同値になり「くくりの中が外と同じ」になっていた（実測 768/390px）。 */ .od-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-group);margin-top:var(--sp-head)} @media(min-width:860px){.od-duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.6rem,5vw,4.5rem)}} .od-duo h4{font-family:var(--jp);font-weight:600;font-size:clamp(1.14rem,1.02rem + .5vw,1.42rem); letter-spacing:.08em;line-height:1.6;color:var(--lavDk,#6b5a92);margin:0} .od-duo .big{font-family:'Cormorant Garamond',serif;font-weight:500; font-size:clamp(1.9rem,1.4rem + 1.8vw,2.7rem);line-height:1.25;letter-spacing:.03em; color:var(--maroon,#491a1a);margin:var(--sp-item) 0 0} .od-duo p{font-family:var(--jp);font-weight:500;font-size:1rem;line-height:1.95;letter-spacing:.04em; /* 2カラムの中なので列が既に読み幅を決めている。上限は重ねない（上の .od-numrow p と同じ理由） */ color:var(--ink2,#4a3a31);margin:var(--sp-tight) 0 0;max-width:none} .od-duo ul{list-style:none;margin:var(--sp-item) 0 0;padding:0;display:grid;gap:var(--sp-tight)} .od-duo li{display:flex;gap:.8em;font-family:var(--jp);font-weight:500;font-size:1rem;line-height:1.9; letter-spacing:.04em;color:var(--ink2,#4a3a31)} .od-duo li::before{content:"";flex:0 0 auto;width:14px;height:1px;background:var(--gold,#bc9960);transform:translateY(.9em)} .od-duo a{color:var(--maroon,#491a1a)} /* ---- 2本を「囲み」で見せる型（od-duo--card） ---- */ /* ★2本が枠も罫もなく横に並ぶと「なぜ隣り合っているのか」が読めず、地の続きに文章が2つ 浮いているように見える（ディレクター指摘 2026-08-28・こだわり Difference）。 紙の色と金の細罫で囲って、2本が対になっていることを目に見える形にする。 点数を増やさないため、囲みは他の部品（od-points / od-side）と同じ地・同じ罫を使う。 */ .od-duo--card{align-items:stretch} @media(min-width:860px){.od-duo--card{gap:var(--sp-group)}} .od-duo--card > div{display:flex;flex-direction:column;height:100%; padding:clamp(1.6rem,3vw,2.4rem) clamp(1.5rem,3vw,2.3rem); background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5)} /* 見出しの下に金の細罫を敷いて、囲みの中の「見出し／本文」を分ける */ .od-duo--card > div > h4{position:relative;padding-bottom:13px;margin-bottom:var(--sp-tight)} .od-duo--card > div > h4::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:1px; background:var(--gold,#bc9960)} /* 囲みの中では最初の本文の上余白を殺す（枠の padding と二重になる） */ .od-duo--card > div > h4 + p,.od-duo--card > div > h4 + ul{margin-top:0} .od-duo--card ul{margin-top:0} .od-onDark .od-duo--card > div{background:rgba(43,33,28,.5);border-color:rgba(188,153,96,.42)} /* ---- 小カードのグリッド（待遇・福利厚生など。枚数可変） ---- */ .od-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-item);margin-top:var(--sp-head)} @media(min-width:640px){.od-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1000px){.od-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ★4件のときは2×2。3列のままでは下の段に1枚だけ残る（同上）。 文量の差で卡ード内に縦の余白が出るので、中央揃えにして高さ差を目立たせない。 */ @media(min-width:1000px){.od-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}} .od-grid--2 > div{display:flex;flex-direction:column;justify-content:center} /* ★5件のときは最後の1枚を横いっぱいに伸ばし、下段の左寄せをなくす （ディレクター指摘 2026-09-03・働き方・待遇「福利厚生」）。 */ @media(min-width:1000px){ .od-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))} } .od-grid--5 > div:last-child{grid-column:1 / -1} .od-grid--5 > div{display:flex;flex-direction:column;justify-content:center} .od-grid > div{padding:clamp(1.5rem,2.6vw,2rem) clamp(1.4rem,2.4vw,1.8rem); background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5);border-left:3px solid var(--gold,#bc9960)} .od-grid h4{font-family:var(--jp);font-weight:600;font-size:clamp(1.04rem,.99rem + .34vw,1.18rem); letter-spacing:.07em;line-height:1.6;color:var(--lavDk,#6b5a92);margin:0} .od-grid p{font-family:var(--jp);font-weight:500;font-size:.94rem;line-height:1.85;letter-spacing:.04em; color:var(--ink2,#4a3a31);margin:var(--sp-tight) 0 0} /* ---- 働く人の声（スタッフ紹介） ---- */ .od-voices{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-group);margin-top:var(--sp-head)} @media(min-width:900px){.od-voices{grid-template-columns:repeat(2,minmax(0,1fr))}} .od-voice{position:relative;padding:clamp(2rem,3.6vw,2.8rem) clamp(1.7rem,3vw,2.4rem); background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5)} .od-voice::before{content:"";position:absolute;inset:6px;border:1px solid rgba(188,153,96,.24);pointer-events:none} .od-voice-who{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap} .od-voice-in{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.7rem;line-height:1; letter-spacing:.08em;color:var(--goldDk,#8f6d34)} .od-voice-role{font-family:var(--jp);font-weight:500;font-size:.84rem;letter-spacing:.08em;color:var(--ink2,#4a3a31)} .od-voice h4{font-family:var(--jp);font-weight:600;font-size:clamp(1.12rem,1.02rem + .42vw,1.32rem); line-height:1.65;letter-spacing:.06em;color:var(--maroon,#491a1a);margin:var(--sp-item) 0 0} .od-voice p{font-family:var(--jp);font-weight:500;font-size:1rem;line-height:2;letter-spacing:.04em; color:var(--ink2,#4a3a31);margin:var(--sp-tight) 0 0} /* ---- 施工認定ブランドの銘板グリッド（受注側の信頼の根拠） ---- */ /* ★420px 未満は1列（2026-08-28）。2列だと枠の中が90〜125pxしかなく、 OLTREMATERIA（12文字）MATTEOBRIONI デザインコンクリート が物理的に1行に入らない。 字を縮めて詰め込むと 320px で9px相当になり読めないので、列を減らして幅を与える。 1列のときは1行に収まるので、枠の高さも78→56pxに詰めて縦に伸びすぎないようにする。 */ /* ★等幅の枠に中央寄せ、をやめた（ディレクター指摘 2026-08-31）。 枠を等幅にすると、名前の長さの差がそのまま【枠の中の空きの差】になる。 実測 785px: MORTEX は左右59.2pxずつ空くのに OLTREMATERIA は21.5px＝空きが3倍近く違い、 1行に並んだときに文字の位置が揃わず不揃いに見えていた（枠の大きさは揃っていたので気づきにくい）。 枠を文字の幅に合わせれば、【どの名前も左右の空きが同じ】になる。 代わりに枠の幅は名前ごとに変わるが、揃うべきは「文字まわりの余白」のほう。 */ .od-brands{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-tight);margin-top:var(--sp-head); list-style:none;padding:0} @media(max-width:419px){.od-brands li{min-height:56px}} .od-brands li{list-style:none;display:flex;align-items:center;justify-content:center;text-align:center; max-width:100%;min-height:78px;padding:.7rem clamp(1.1rem,3vw,1.9rem);background:rgba(252,249,243,.94); border:1px solid rgba(188,153,96,.55); /* ★ブランド名は欧文・和文が混在するので、書体は Shippori Mincho に統一する （ディレクター指示 2026-08-28。欧文書体だと和名の行だけ別書体に落ちて揃わない） */ font-family:var(--jp);font-weight:600;font-size:.94rem;letter-spacing:.08em; line-height:1.4;color:var(--ink,#2b211c)} .od-brands li.ja{font-size:.9rem} /* ★狭い幅では枠が約150pxしかなく、OLTREMATERIA / デザインコンクリート のような 1語で長い名前が枠からはみ出す（実測 390px・320px）。折り返せるようにし、字面を一段下げる */ /* ★anywhere ではなく break-word。anywhere は「収まるのに割る」ことがある （実測 2026-08-28 390px: 文字幅118px・枠内125px で収まるのに OLTREMATERIA が2行に割れ、 最終行が「A」1文字だけになった＝機械ゲート #14 行末孤立）。 break-word は本当にはみ出すときだけ割る。 併せて、テーマがモバイルの li に掛ける word-break:auto-phrase を打ち消す （和文の文節で切る指定で、欧文のブランド名には意味がなく折り返し判断を狂わせる）。 */ .od-brands li > span{min-width:0;overflow-wrap:break-word;word-break:normal} @media(max-width:560px){ .od-brands li{font-size:.84rem;letter-spacing:.04em;padding:.7rem .45rem} .od-brands li.ja{font-size:.82rem} } /* ★明るい地に --gold(#bc9960) を置くと 2.21:1（大字の基準3:1）に届かない。濃い金にする */ .od-brands-more{text-align:center;font-family:var(--jp);font-weight:600; /* ★#8a6830 は紙の地（rgb(234,227,215)）の上で 4.01:1 で AA(4.5:1) に届かない （実測 2026-08-28・全幅）。見出しのキッカーと同じ #6f5428 に揃えて 5.5:1 にする。 */ font-size:clamp(1.02rem,.97rem + .3vw,1.14rem);letter-spacing:.08em;line-height:1.8;color:#6f5428; margin:var(--sp-item) 0 0} /* ---- 時刻つきタイムライン（1日の仕事の流れ） ---- */ /* ★読み幅の上限は掛けない。各行は「時刻＋短い一文」で長い本文ではないうえ、 上限を掛けると【行を仕切る罫線が版面の途中で切れて見える】（ディレクター指摘 2026-08-28）。 罫線は版面の端まで通すのが正しい。 */ .od-time{list-style:none;margin:var(--sp-head) 0 0;padding:0;max-width:none} /* ★行の上下 padding は控えめに。合計が見出しからの距離（--sp-head）を超えると 「くくりの中が外より広い」になる（実測 1440px: 内37px / 外36px）。 */ .od-time li{display:flex;gap:clamp(1rem,3vw,2rem);align-items:baseline; padding:clamp(.7rem,1.3vw,.85rem) 0;border-bottom:1px solid rgba(188,153,96,.34)} .od-time li:last-child{border-bottom:0} .od-time .h{flex:0 0 4.4rem;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.2rem; line-height:1.5;letter-spacing:.04em;color:var(--goldDk,#8f6d34)} .od-time .t{font-family:var(--jp);font-weight:500;font-size:clamp(.98rem,.93rem + .26vw,1.08rem); line-height:1.8;letter-spacing:.04em;color:var(--ink2,#4a3a31)} .od-time li.rest .h{color:rgba(143,109,52,.6)} .od-time li.rest .t{color:rgba(74,58,49,.72)} .od-onDark .od-time li{border-bottom-color:rgba(188,153,96,.28)} .od-onDark .od-time .h{color:var(--gold,#bc9960)} .od-onDark .od-time .t{color:#e2d6c4} .od-onDark .od-time li.rest .h{color:rgba(188,153,96,.55)} .od-onDark .od-time li.rest .t{color:rgba(226,214,196,.7)} /* ---- 数字で示す基盤（業歴・認定数・許可番号・対応エリア） ---- */ .od-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-item);margin-top:var(--sp-head)} @media(min-width:900px){.od-facts{grid-template-columns:repeat(4,minmax(0,1fr))}} .od-facts > div{text-align:center;padding:clamp(1.6rem,2.8vw,2.1rem) clamp(1rem,2vw,1.4rem); background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5)} .od-facts .v{display:block;font-family:'Cormorant Garamond',serif;font-weight:500; font-size:clamp(1.3rem,1.05rem + .9vw,1.72rem);line-height:1.3;letter-spacing:.04em; color:var(--maroon,#491a1a)} .od-facts .v.ja{font-family:var(--jp);font-weight:600;font-size:clamp(1.14rem,1rem + .6vw,1.44rem)} .od-facts .k{display:block;font-family:var(--jp);font-weight:500;font-size:.88rem;line-height:1.7; letter-spacing:.06em;color:var(--ink2,#4a3a31);margin-top:var(--sp-tight)} /* ---- 暗い地の上の線ボタン ---- .od-btn--line は明るい地向けに --ink（濃茶）で組まれているため、 暗い節（.od-onDark）に置くと 1.02:1 で読めない（実測 2026-08-28・こだわり）。 暗い地では明るい線と明るい文字に反転させる。 */ .od-onDark .od-btn--line{color:#f7efe2;border-color:rgba(247,239,226,.55)} .od-onDark .od-btn--line:hover,.od-onDark .od-btn--line:focus-visible{ background:#f7efe2;color:var(--ink,#2b211c);border-color:#f7efe2} /* ---- アクセス（地図の枠） ---- 実機では Googleマップの埋め込み、または事務所外観の写真が入る。 */ .od-map-frame{position:relative;margin-top:var(--sp-head);padding:10px; background:rgba(250,246,238,.9);border:1px solid rgba(188,153,96,.5)} .od-map-frame > div{position:relative;overflow:hidden;height:clamp(280px,42vw,440px);background:#cdbfa8} .od-map-frame image-slot,.od-map-frame img{position:absolute;inset:0;width:100%;height:100%} /* ---- ブログ一覧の2カラム（本文＋サイドバー） ---- 実機は CueZilla のブログ一覧パーツ（parts222系）が `_main` ＋ `_sidebar`（最近の投稿／カテゴリ別件数）の2カラムで描く。 仕様は templates/dynamic-blog-works.md §2-A。ここでは案2の意匠で同じ骨格を作る。 */ .od-blog2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-group);margin-top:var(--sp-head)} @media(min-width:1000px){.od-blog2{grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:clamp(2.4rem,4vw,4rem)}} /* ブログ2カラムの中は、2カラムの間(--sp-group)より狭い段で刻む */ .od-blog2 .od-pager{margin:var(--sp-item) 0 0} /* ブログ一覧の記事どうしの空きは、記事群→ページ送り(--sp-item)より狭くする。 実機の格子は .col の padding で空きを作る（トップの記事カード節）ので、そこを段に合わせる */ .od-blog2 [class*="parts131415_blog"] .row{margin:0 calc(var(--sp-tight) / -2)} .od-blog2 [class*="parts131415_blog"] .col{padding:calc(var(--sp-tight) / 2)} /* 箱どうしは、箱の中（見出し→リスト）より確実に広くする */ .od-side{display:grid;gap:var(--sp-item);align-content:start} .od-side section{background:rgba(252,249,243,.94);border:1px solid rgba(188,153,96,.5); padding:clamp(1.4rem,2.4vw,1.8rem) clamp(1.3rem,2.2vw,1.6rem)} .od-side h4{font-family:var(--jp);font-weight:600;font-size:1rem;letter-spacing:.09em;line-height:1.5; color:var(--lavDk,#6b5a92);margin:0 0 13px;padding-bottom:.55rem; border-bottom:1px solid rgba(188,153,96,.5)} .od-side ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .od-side a{display:flex;align-items:center;gap:.7em;min-height:44px;font-family:var(--jp);font-weight:500; font-size:.94rem;line-height:1.7;letter-spacing:.04em;color:var(--ink2,#4a3a31);text-decoration:none; transition:color .3s ease} .od-side a:hover{color:var(--maroon,#491a1a)} .od-side .cnt{margin-left:auto;flex:0 0 auto;font-family:'Cormorant Garamond',serif;font-size:.92rem; letter-spacing:.06em;color:#8a6830} .od-side .dt{display:block;font-family:'Cormorant Garamond',serif;font-size:.82rem;letter-spacing:.08em; color:#8a6830;margin-bottom:.2rem} .od-side .recent a{flex-direction:column;align-items:flex-start;gap:0;min-height:0;padding:.35rem 0} /* ============================================================================ 囲みのあるカードは、文字量が違っても高さを揃える（ディレクター指示 2026-08-31） ---------------------------------------------------------------------------- 同じ体裁のものが並ぶのに高さだけ違うと、別の種類のものに見える。 実測 2026-08-31・業務案内「こんなご要望に応えます」1024px: 01・02 が1行で85px、 03・04 が2行で118px＝上下の段で33px違っていた（1440pxでは4件が同じ行に入るので露見しない＝ 幅によって出たり消えたりする。目視だけでは取りこぼす）。 grid-auto-rows:1fr で【行の高さを全段そろえ】、align-items:stretch で各カードを行いっぱいに伸ばす。 ★ここに並べるのは「囲み（地・罫）を持つカード」だけ。囲みの無い本文リスト（.od-numlist 等）は 高さが揃っても見えず、無駄な空きが増えるだけなので入れない。 ★このファイルの後ろに置くこと。.od-faq が align-items:start を自分で指定しているため、 前に置くと打ち消されない（同じ詳細度なので後勝ち）。 ★ページの骨組み（本文＋サイドバーの2カラム＝.od-blog2）は入れない。カードの列ではないので、 揃えるとサイドバーが本文と同じ高さまで引き伸ばされるだけになる（実測1024px: 1286pxへ伸びた）。 ============================================================================ */ .od-points,.od-faq,.od-grid,.od-craft,.od-voices,.od-works{ grid-auto-rows:1fr;align-items:stretch} /* ★1列固定の使い方だけは高さを揃えない（ディレクター指摘 2026-09-02）。 横に並んでいないのに 1fr で揃えると、1行の項目の枠内に約35pxの空白が残る。 */ .od-points--1{grid-auto-rows:auto} .od-points--1 li{height:auto;align-items:center} /* ============================================================================ ★最下段に1枚だけ残さない（ディレクター指摘 2026-09-02／09-03、以後の全ページ共通ルール）。 列数が決まっているカード列は、余った最後の1枚を横いっぱいに伸ばす。 列数が可変（auto-fit）の .od-faq / .od-points は、枚数に応じた修飾子で列を固定する。 ============================================================================ */ @media(min-width:640px){ .od-grid:not(.od-grid--2):not(.od-grid--5) > div:last-child:nth-child(odd), .od-faq:not(.od-faq--3) > div:last-child:nth-child(odd), .od-works > *:last-child:nth-child(odd), .od-voices > *:last-child:nth-child(odd){grid-column:1 / -1} } @media(min-width:768px){ .od-craft > *:last-child:nth-child(odd){grid-column:1 / -1} } @media(min-width:1000px){ .od-grid:not(.od-grid--2):not(.od-grid--5) > div:last-child:nth-child(odd){grid-column:auto} .od-grid:not(.od-grid--2):not(.od-grid--5) > div:last-child:nth-child(3n+1){grid-column:1 / -1} } @media(min-width:1024px){ .od-works > *:last-child:nth-child(odd){grid-column:auto} .od-works > *:last-child:nth-child(3n+1){grid-column:1 / -1} } /* ★3件のFAQを3列に固定する。auto-fit のままだと 1440px で2列＋下段1枚になる （ディレクター指摘 2026-09-03・業務案内「よくある質問（受注編）」）。 */ @media(min-width:980px){.od-faq--3{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ★求人／受注の2枚のCTAを横並びに（ディレクター指摘 2026-09-03・こだわり）。 狭い幅では縦積みに戻る。 */ .od-cta-pair{display:grid;gap:var(--sp-item);grid-template-columns:minmax(0,1fr)} @media(min-width:900px){.od-cta-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}} .od-cta-pair > .od-plate{max-width:none;margin:0;height:100%} /* ---- 下層ヘッダー（FV）の説明文は版面いっぱいに置く（ディレクター指示 2026-08-31） ---- 本文の .od-lead は読み幅の上限（--read＝51em）を持っている。読ませる本文にはこれが要るが、 FVの一文は【帯の中の見出しの一部】で、右側が大きく余ると帯が締まらない （実測 1440px: 版面1180px に対して 922px で頭打ち＝258px 余っていた）。 ここだけ上限を外す。.od-lead 単体より詳細度が高いので、置く場所に関係なく効く。 ★本文（節の中のリード）には掛けないこと。長い文章を1180pxで流すと1行が長くなりすぎる。 ★1行でも2行でも帯の高さを変えない（ディレクター指示 2026-08-31）。 ページを移動したときにヘッダー帯の高さが変わると、下のコンテンツが上下に飛ぶ。 実測 1440px: 説明文1行のページが541px、2行のページが576px＝35px（ちょうど1行）違っていた。 説明文に【2行ぶんの場所】を先に確保しておけば、1行のページも2行のページも同じ高さになる。 line-height が 1.9 なので 2行＝3.8em。行数ではなく em で書く（文字サイズが幅で変わるため）。 */ .od-fv .od-lead{max-width:none;min-height:3.8em} /* 規約ページの前文も版面いっぱいに置く（ディレクター指示 2026-08-31）。 条文（.od-legal）が版面いっぱいに並ぶので、その前置きだけ読み幅で狭いと段が揃わない。 */ .od-legalsec .od-lead{max-width:none} /* ---- パンくず（下層ヘッダー帯の中） ---- ★実機（CueZilla）では、動的・システムページに CMS が parts231_breadcrumb を自動で描くので、 組み込み時に site.js で parts231 を帯の中へ移す （正本: 50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md「6. パンくず統一」）。 重なるのは ブログ／施工実績／お問い合わせ／プライバシーポリシー の4ページ。 ★★そのとき、こちらは display:none ではなく【DOMから remove する】こと。 この .od-bc は BreadcrumbList の構造化データを持っており（下の microdata）、 parts231 も同じ BreadcrumbList を持つ。隠すだけだと構造化データが2本のまま残る （検索エンジンは display:none でも読む）。見た目の重複だけでなく構造化の重複も消す。 ★リンクは 44px を確保する（このファイルの「タップ領域の確保」と同じ理由。 文字が .82rem と小さく、素のままだと 20px 前後で _gate-pages.mjs のタップ判定に落ちる）。 */ .od-bc{margin:0 0 var(--sp-item)} /* position を持つ ＜meta＞ は既定で非表示だが、flex の子になるので明示しておく */ .od-bc meta{display:none} .od-bc ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 .6em;margin:0;padding:0} .od-bc li{display:flex;align-items:center;gap:.6em;font-family:var(--jp);font-weight:500; font-size:.82rem;letter-spacing:.06em;line-height:1.7;color:#d3c3ab} .od-bc li + li::before{content:"／";color:rgba(211,195,171,.6)} .od-bc a{display:inline-flex;align-items:center;min-height:44px;color:#e6d8c0;text-decoration:none; transition:color .3s ease} .od-bc a:hover{color:var(--gold,#bc9960)} .od-bc [aria-current]{color:#fdf9f2} /* ===== 21_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; } /* ===== 22_override.css ===== */ /* ============================================================ 22_override.css … 案件ごとの上書き（結合順の最後＝ここだけが skin に勝てる） ★skin（21_skin.css）は全案件共通資産。案件では絶対に編集しないこと（R-30）。 ============================================================ */ /* ============================================================ CueZilla納品用の追補（受領データの dc ランタイム分をCSSへ置き換えたもの） ここから下は「受領デザインの見た目を1ミリも変えずに、CueZillaで同じ結果を出す」ための 置き換えだけを書く。意匠の変更はしない。 ============================================================ */ /* --- 1) 受領データの ＜div id="top" style="..."> が持っていた変数と地の設定 --- 受領はヘッダー〜フッターを1枚のdivで包み、そこに変数を書いていた。 CueZillaは ヘッダー / 本文 / フッター を別ブロックで出力するため同じdivを置けない。 継承されるように :root と body へ移す（値は受領のまま）。 */ :root{ --paper:#efe7da; --paper2:#faf6ee; --ink:#2b211c; --ink2:#4a3a31; --umber:#7f463f; --maroon:#491a1a; --gold:#bc9960; --goldDk:#8f6d34; --jp:'Shippori Mincho',serif; --sp-section:clamp(5.4rem,10.4vw,9.4rem); --sp-block:clamp(2.9rem,3.75vw,3.4rem); --sp-group:34px; --sp-item:26px; --sp-tight:20px; --sp-hair:20px; --read:51em; --sp-head:44px; --lav:#8b76ad; --lavDk:#6b5a92; --blue:#3a5f8a; --green:#2e4a3c; --wine:#7a2b32; --purple:#4a3a6b; } body{ font-family:var(--jp); color:var(--ink2,#4a3a31); font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1; overflow-x:hidden; position:relative; background:var(--paper,#efe7da); margin:0; } body img{max-width:100%} body *,body *::before,body *::after{box-sizing:border-box} /* --- 2) PC / SP の出し分け --- 受領データはJSの状態（isMobile = 画面幅1200px未満）でDOMごと出し分けていた。 CueZillaでは1本のHTMLに両方を入れ、同じ境目でCSSが出し分ける。 境目 1200px は受領データの実装値そのまま。 */ @media(max-width:1199.98px){ .od-pc{display:none !important} } @media(min-width:1200px){ .od-sp{display:none !important} } /* --- 3) ドロワー（SPメニュー）--- 受領は menuOpen が真のときだけDOMに出していた。納品では常にDOMに置き、 body.od-menu-open の有無で開閉する（BODY内JSが付け外しする）。 */ #od-drawer{display:none !important} body.od-menu-open #od-drawer{display:flex !important} body.od-menu-open{overflow:hidden} /* --- 4) style-hover 属性（受領のdcランタイム機能）をCSSの :hover へ --- 受領は91箇所で style-hover="..." を使っていた（値は4種類）。 */ .od-hv-wine:hover,.od-hv-wine:focus-visible{color:var(--wine,#7a2b32)} .od-hv-goldbg:hover,.od-hv-goldbg:focus-visible{background:rgba(188,153,96,.25)} .od-hv-gold:hover,.od-hv-gold:focus-visible{background:var(--gold,#bc9960);color:#2b211c} .od-hv-goldtx:hover,.od-hv-goldtx:focus-visible{color:var(--gold,#bc9960)} /* --- 5) JSが動かないときの保険 --- 受領は ＜noscript＞ にこの内容を持っていたが、追加CSSには ＜noscript＞ を置けないので html.js（BODY内JSが最初に付ける印）の有無で同じことをする。 ★ここが無いと、JSが1行でも落ちたときに本文が opacity:0 のまま消える。 */ html:not(.js) [data-rv],html:not(.js) [data-anim]{opacity:1 !important;transform:none !important;clip-path:none !important} html:not(.js) #intro-loader{display:none !important} html:not(.js) .od-hero-slide{opacity:1 !important;position:relative} html:not(.js) .od-hero-slide:not(:first-child){display:none} /* --- 6) 会社概要の地図枠 --- 受領CSS（od-pages.css）は .od-map-frame の中身として image-slot と img しか想定していない （.od-map-frame image-slot,.od-map-frame img{position:absolute;inset:0;width:100%;height:100%}）。 Googleマップを入れたので iframe にも同じ収まりを与える。これが無いと Google が吐いた width="600" height="450" の素の箱がそのまま出て、枠（高さ clamp(280px,42vw,440px)）から はみ出す／モバイルで横スクロールが出る。 */ .od-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* ★地図を枠いっぱいに（ディレクター指示 2026-09-10）。 受領CSSは .od-map-frame に padding:10px を持たせ、中の地図の周りに 10pxのマット（額縁の白い余白）を作っていた。枠の全域を地図にするため、その余白だけ詰める。 ・border（金の細罫 1px）と枠の位置・高さは受領のまま。消していない。 ・戻すときはこの1行を消せば元の額縁に戻る。 */ .od-map-frame{padding:0} /* ★実写に差し替えるまでの仮置き用（いまは未使用）。 地図を外して「画像未受領」の枠に戻す場合にまた使うので消さない。 */ .od-map-empty{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#d9cdb8 0 12px,#cfc1a8 12px 24px); color:#463829;font:600 12px/1.4 'Zen Kaku Gothic Antique',sans-serif;letter-spacing:.08em; } /* ============================================================ D) 動的パーツ（skin）へ、このサイトの書体と角の設定を渡す ------------------------------------------------------------ skin §0 が読む受け口に値を入れるだけ。--dyn-* は直書きしない （skinはテーマ変数7値に自動連動する設計。先回りで直書きすると二重管理になる）。 ★色は CueZilla の「テーマカラー設定」（16_theme-vars.txt）から自動で流れる。 ============================================================ */ :root{ /* 書体: このサイトは和文 明朝（Shippori Mincho）／数字・英字は Cormorant Garamond。 渡さないと skin の既定（ゴシック）になり、ブログ・施工実績だけ書体が変わる。 */ --font-display: 'Shippori Mincho', serif; --font-body: 'Shippori Mincho', serif; --font-numeric: 'Cormorant Garamond', 'Shippori Mincho', serif; /* 角丸: 受領デザインは border-radius:0 のみ（実測）＝角なしで統一する */ --dyn-radius: 0; } /* ============================================================ E) ブログ一覧テンプレート（/blog）を受領デザインに合わせる ------------------------------------------------------------ 受領データ（3_DESIGNER修正後/ブログ.dc.html ＋ od-pages.css / od-theme.css）は、 ブログ一覧を次の3点で描いている: ・2カラム … .od-blog2（本文 1fr ＋ サイドバー 17rem）／ .od-side（生成りの面＋金の細罫） ・記事カード … [class*="parts131415_blog"] .card（金の細罫・写真は最下段・角なし） ・ページ送り … .od-pager（46px角・生成りの面・金の罫・現在ページはマルーン） ところが実機（2026-09-10 実測 https://enjoyworks-seisaku.pw/blog）が描くのは CueZilla の parts222系markup（.parts222_wrap / _post_wrap / _post_img / _sidebar_* / _pagenation）で、 受領CSSのセレクタが **1つも届かない**。そのため CMS既定＋skin の見た目（茶色の罫・ゴシック見出し・ 面のないサイドバー・写真が最上段）で出ていた。ここで実markupへ受領と同じ値を渡す。 ★値はすべて受領CSSからの写し（新しい色・寸法・書体は作っていない）。出典を各ブロックに書いた。 ★実採番クラス（parts222_*）＋!important を使うのは skin §14 の手順どおり。 skin は [class*="_post_wrap"] 等に !important を持つため、詳細度で並ばないと届かない。 ＝ここを [class*="…"] で書くと「書いたのに効かない」になる。 ★skin（21_skin.css）は共通資産なので触っていない（R-30）。 ============================================================ */ /* --- E-1) 2カラムの骨格（出典: od-pages.css .od-blog2 / .od-side）--- CMS既定は flex＋主カラム width:780px 固定・サイドバー 28.179%（実測）。 受領は 1fr ＋ 17rem のグリッドで、1000px 未満は1カラム。 */ .parts222_wrap{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:var(--sp-group,34px) !important; max-width:1180px; margin-inline:auto; } @media(min-width:1000px){ .parts222_wrap{ grid-template-columns:minmax(0,1fr) minmax(0,17rem) !important; gap:clamp(2.4rem,4vw,4rem) !important; } } .parts222_main,.parts222_sidebar,.parts225_main,.parts228_main{width:auto !important;max-width:none !important;margin:0 !important;float:none !important} /* 節の余白は受領の .od-sec（padding:var(--sp-section) clamp(1.5rem,6vw,7rem)）に合わせる。 CMS既定は 100px 2.5vw 120px（実測）で、上下が他の節（一律 --sp-section）と揃っていなかった。 */ .parts222_section,.parts225_section,.parts228_section{padding:var(--sp-section) clamp(1.5rem,6vw,7rem);background:var(--paper,#efe7da)} /* --- E-2) カードの並び（出典: od-pages.css の .od-blog2 [class*="parts131415_blog"] .row/.col）--- 受領はブログページだけ格子の空きを --sp-tight（20px）に詰めている（トップの記事節は 27.2px）。 skin は auto-fill minmax(300px,1fr)＋gap:32px なので、受領の段に合わせ直す。 2列になる境目 576px は受領markupの row-cols-sm-2 と同じ。 */ .parts222_post_list{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:var(--sp-tight,20px) !important; } @media(min-width:576px){ .parts222_post_list{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } /* --- E-3) 記事カードの面と罫（出典: od-theme.css [class*="parts131415_blog"] .card）--- ★ここが今回いちばん見た目に出る差。skin は罫線に --dyn-border（＝テーマの --sub-color #7f463f）を 使うため「茶色の太い枠」に見えていた（16_theme-vars.txt の末尾で予告していた事象そのもの）。 受領の罫は金 rgba(188,153,96,.5)。 */ :is(.parts222_post_wrap,.parts225_post_wrap){ background:rgba(252,249,243,.97) !important; border:1px solid rgba(188,153,96,.5) !important; border-radius:0 !important; overflow:hidden; transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; } :is(.parts222_post_wrap,.parts225_post_wrap):hover{ transform:translateY(-5px); box-shadow:0 18px 38px rgba(58,38,28,.2); border-color:rgba(188,153,96,.85) !important; } /* カード全体を包む＜a＞を縦に伸ばす（skin と同じ等寸化の機構。順番だけ受領に合わせる） */ :is(.parts222_post_wrap,.parts225_post_wrap) > a{display:flex !important;flex-direction:column;min-height:100%;color:inherit;text-decoration:none} /* --- E-4) カード内の順番（出典: 受領markup ＝ ラベル → タイトル → 写真）--- CueZilla は「写真 → 日付 → タイトル」の順にDOMを吐く。受領デザインは写真が最下段 （od-theme.css の .parts131415_blog_thumbnail{margin-top:auto;border-top:…}）なので、 flex の order で見た目の順番だけ受領に合わせる（DOMは触らない＝CMSの出力はそのまま）。 */ :is(.parts222_post_wrap,.parts225_post_wrap) > a > :is(.parts222_post_status,.parts225_post_status){order:1} :is(.parts222_post_wrap,.parts225_post_wrap) > a > :is(.parts222_post_title-excerpt,.parts225_post_title-excerpt){order:2} :is(.parts222_post_wrap,.parts225_post_wrap) > a > :is(.parts222_post_img,.parts225_post_img){order:3} /* カテゴリチップ＋日付の行。受領のカードはこの位置に「カテゴリの緑チップ」を置いている （od-theme.css の .card-title）。parts222 も記事にカテゴリが付いていれば span:is(.parts222_post_category,.parts225_post_category) を吐く（verify/local-sandbox/blog/index.html の実出力）。 ★2026-09-10 の実機は記事1件がカテゴリ未設定のため、いまはチップが出ていない（日付だけ）。 ＝チップの見た目は sandbox で確認済み・実機では未確認。 見た目の順番は受領に合わせて「チップ → 日付」（DOMは日付 → チップ）。 skin の [class*="_post_status"] > span:last-child が「枠付きチップ」を全spanに当てるので、 同じ詳細度以上（span.クラス）＋!important で受領の姿に戻す。 */ :is(.parts222_post_status,.parts225_post_status){ order:1; display:flex !important; flex-wrap:wrap; align-items:center; gap:.9em; margin:1.15rem 1.35rem 0 !important; padding:0 !important; background:transparent !important; border:0 !important; } /* 日付は受領の日付表現（.od-side .dt ＝ Cormorant・金茶）。チップの意匠は流用しない （日付を緑のカテゴリチップに見せない）。 */ :is(.parts222_post_wrap,.parts225_post_wrap) :is(.parts222_post_status,.parts225_post_status) > span:is(.parts222_post_date,.parts225_post_date){ order:2; background:transparent !important; border:0 !important; padding:0 !important; border-radius:0 !important; font-family:'Cormorant Garamond',serif !important; font-size:.82rem; letter-spacing:.08em; color:#8a6830 !important; } /* カテゴリチップ（出典: od-theme.css [class*="parts131415_blog"] .card-title ＝ 緑地・生成りの字）。 書体もその宣言のまま（トップのブログ枠パーツと同じ顔にするため）。 */ :is(.parts222_post_wrap,.parts225_post_wrap) :is(.parts222_post_status,.parts225_post_status) > span:is(.parts222_post_category,.parts225_post_category){ order:1; align-self:center; background:var(--green,#2e4a3c) !important; color:#f7efe2 !important; border:0 !important; border-radius:0 !important; padding:.36rem .8rem !important; width:auto !important; max-width:none !important; font-family:'Cormorant Garamond',serif !important; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; line-height:1; } /* 記事タイトル（出典: od-theme.css [class*="parts131415_blog"] .card-text）。 CMS既定＋skin は 20px / 700 / --dyn-heading。受領は本文書体の 600・こげ茶（--ink）。 */ :is(.parts222_post_title-excerpt,.parts225_post_title-excerpt){ padding:var(--sp-hair,20px) 1.35rem 1.5rem !important; margin:0 !important; flex:1 1 auto !important; } :is(.parts222_post_title-excerpt,.parts225_post_title-excerpt) > h3:is(.parts222_post_title,.parts225_post_title){ font-family:var(--jp) !important; font-weight:600 !important; font-size:clamp(1.02rem,.96rem + .28vw,1.12rem) !important; line-height:1.7; letter-spacing:.06em; color:var(--ink,#2b211c) !important; margin:0 !important; text-align:left; } /* 抜粋は実機ではコメントアウトされていて出ない（実測）。将来オンにされたとき用に体裁だけ用意。 */ :is(.parts222_post_title-excerpt,.parts225_post_title-excerpt) > :is(.parts222_post_excerpt,.parts225_post_excerpt){ display:block; font-family:var(--jp) !important; font-weight:500 !important; font-size:.92rem; line-height:1.9; letter-spacing:.04em; color:var(--ink2,#4a3a31) !important; margin:.7em 0 0; } /* 写真（出典: od-theme.css .parts131415_blog_thumbnail ＋ 同 img）。 skin は aspect-ratio:16/10 で高さを作る。受領は固定高 clamp(12.5rem,11rem + 8vw,14.5rem)＋ 上に金の細罫。★aspect-ratio を auto に戻してから高さを与える（両方生かすと skin §6.5 の罠）。 ★セレクタは2クラス（:is(.parts222_post_wrap,.parts225_post_wrap) :is(.parts222_post_img,.parts225_post_img)）にする。テーマが同じ形で height:240px と margin-bottom:13px を持っており、1クラスでは詳細度で負ける （実測: サンドボックスで height が 240px のまま・写真の下に13pxの隙間が残った）。 margin-bottom を 0 にするのは、受領では写真がカードの下辺にぴたりと接しているため。 */ :is(.parts222_post_wrap,.parts225_post_wrap) :is(.parts222_post_img,.parts225_post_img){ aspect-ratio:auto !important; height:clamp(12.5rem,11rem + 8vw,14.5rem); width:100%; margin:0 !important; overflow:hidden; border-top:1px solid rgba(188,153,96,.45); border-radius:0; } :is(.parts222_post_wrap,.parts225_post_wrap) :is(.parts222_post_img,.parts225_post_img) img{ width:100%; height:100%; max-height:none; object-fit:cover; display:block; transition:transform .6s ease; } :is(.parts222_post_wrap,.parts225_post_wrap):hover :is(.parts222_post_img,.parts225_post_img) img{transform:scale(1.06)} /* --- E-5) サイドバー（出典: od-pages.css .od-side 一式）--- CMS既定＋skin は「面も罫も無い素のリスト＋メイリオの見出し」。 受領は生成りの面・金の細罫・薄紫の見出し（--lavDk）。 */ /* ★grid-template-columns と justify-content を明示する。タブレットのテーマ指定 `justify-content:space-between` が grid にも効き、列が中身の幅（実測130px）まで縮む。 */ .parts222_sidebar{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; justify-content:stretch !important; align-content:start; gap:var(--sp-item,26px); } /* ★タブレット（521〜991px）でテーマが .parts222_sidebar{display:flex;justify-content:space-between} .parts222_sidebar_wrap{max-width:47.735%;width:100%} を当て、サイドバーの箱を**横2列**に並べる。ここを打ち消さないと箱の幅が 62px まで潰れ、 「最近の投稿」が縦書きのように1文字ずつ折り返す（実測 820px）。 スマホと同じ「縦積み・幅いっぱい」に揃える（ディレクター指示 2026-09-10）。 */ .parts222_sidebar > .parts222_sidebar_wrap{ background:rgba(252,249,243,.94) !important; border:1px solid rgba(188,153,96,.5) !important; border-radius:0; padding:clamp(1.4rem,2.4vw,1.8rem) clamp(1.3rem,2.2vw,1.6rem) !important; margin:0 !important; width:auto !important; max-width:none !important; display:block !important; } /* 見出し（受領 .od-side h4）。実機の h3 は .f_meiryo を持つのでゴシックで出ていた（実測）。 */ .parts222_sidebar .parts222_sidebar_wrap > h3{ font-family:var(--jp) !important; font-weight:600 !important; font-size:1rem !important; letter-spacing:.09em; line-height:1.5; color:var(--lavDk,#6b5a92) !important; background:transparent !important; text-align:left !important; margin:0 0 13px !important; padding:0 0 .55rem !important; border-bottom:1px solid rgba(188,153,96,.5) !important; } .parts222_sidebar .parts222_sidebar_wrap ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} /* 区切り罫は受領には無い（面と余白で仕切る設計）。CMS既定の #666 を skin が茶(--dyn-border)に 直しているが、受領に合わせて外す。★戻すときはこの1ブロックを消せばskinの罫が復活する。 */ .parts222_sidebar .parts222_sidebar_wrap ul li{ border:0 !important; margin:0 !important; padding:0 !important; list-style:none; } .parts222_sidebar .parts222_sidebar_wrap ul li a{ display:flex; align-items:center; gap:.7em; min-height:44px; font-family:var(--jp); font-weight:500; font-size:.94rem; line-height:1.7; letter-spacing:.04em; color:var(--ink2,#4a3a31) !important; text-decoration:none; transition:color .3s ease; padding:.35rem 0 !important; } .parts222_sidebar .parts222_sidebar_wrap ul li a:hover{color:var(--maroon,#491a1a) !important} /* 最近の投稿は「日付を上に、タイトルを下に」の縦積み（受領 .od-side .recent a） */ .parts222_sidebar .parts222_sidebar_wrap:not(.category_post_count) ul li a{ flex-direction:column; align-items:flex-start; gap:0; min-height:0; } .parts222_sidebar .parts222_sidebar_wrap span.parts222_sidebar_date{ display:block; font-family:'Cormorant Garamond',serif !important; font-size:.82rem; letter-spacing:.08em; color:#8a6830 !important; margin:0 0 .2rem; } .parts222_sidebar .parts222_sidebar_wrap p.parts222_sidebar_post_title{ font-family:var(--jp) !important; font-weight:500 !important; font-size:.94rem !important; line-height:1.7; letter-spacing:.04em; color:inherit !important; margin:0 !important; } /* カテゴリ（受領 .od-side .cnt ＝ 素の Cormorant。skin はチップにしている） */ .parts222_sidebar .category_post_count ul li a{padding:.35rem 0 !important} .parts222_sidebar .category_post_count p.parts222_sidebar_post_category{ font-family:var(--jp) !important; font-weight:500 !important; font-size:.94rem !important; color:inherit !important; margin:0 !important; } .parts222_sidebar .category_post_count span.parts222_sidebar_post_category_count{ margin-left:auto; flex:0 0 auto; width:auto !important; min-width:0 !important; background:transparent !important; border:0 !important; padding:0 !important; border-radius:0 !important; font-family:'Cormorant Garamond',serif !important; font-size:.92rem; letter-spacing:.06em; color:#8a6830 !important; } /* --- E-6) ページ送り（出典: od-pages.css .od-pager ＋ .od-blog2 .od-pager）--- ★実markupは案件から受領した Blade テンプレート（2026-09-10 提供）で確定: ＜div class="parts222_pagenation"> ← カテゴリ一覧でも 222 のまま（採番が切り替わらない） ＜span class="pagination_prev">＜a＞<<最初＜/a＞＜/span＞ ＜span class="pagination_prev">＜a＞<<＜/a＞＜/span＞ ＜span class="pagination_num d-none d-xl-block">＜a＞2＜/a＞＜/span＞ ＜span class="pagination_num current d-none d-xl-block">1＜/span＞ ← 現在ページは＜a＞を持たない ＜span class="pagination_next">＜a＞次へ>>＜/a＞＜/span＞ ＜span class="page-item">＜a＞最後>>＜/a＞＜/span＞ ＜/div＞ ここから来る注意が3つある: (1) 箱は＜span＞に付ける。＜span＞と中の＜a＞の両方に枠を描くと**二重の箱**になる（skin §3 の注意）。 ＜a＞は「箱いっぱいのクリック領域」にするだけ（枠・地は持たせない）。 (2) 現在ページは＜a＞が無いので、＜span＞側だけで色を決める。 (3) 数字の＜span＞は Bootstrap の `d-none d-xl-block` を持つ＝**1200px未満は非表示**（CMSの仕様）。 そのため display は 1200px 以上でしか触らない。ここを常時 inline-flex にすると **CMSが隠しているはずの数字がスマホ・タブレットで出てしまう**。 ★未検証: 実機は記事1件でページャが出力されない（実測 height:0）。値は受領どおりで、 ローカルsandbox（実markupを写したもの）では正しく出ている。 */ :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation){ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-tight,20px); margin:var(--sp-item,26px) 0 0; padding:0; } /* 箱（＜span＞側）。受領の .od-pager a/span と同じ値 */ :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > :is(.pagination_prev,.pagination_next,.pagination_num,.page-item){ min-width:46px; min-height:46px; padding:0 .7em; margin:0 !important; text-align:center; line-height:44px; font-family:'Cormorant Garamond',serif; font-size:1.05rem; letter-spacing:.06em; color:var(--ink,#2b211c) !important; background:rgba(252,249,243,.94) !important; border:1px solid rgba(188,153,96,.5) !important; border-radius:0 !important; transition:background .3s ease,color .3s ease,border-color .3s ease; } /* 数字以外（最初/前/次/最後）は d-none を持たないので、常に中央揃えの箱にしてよい */ :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > :is(.pagination_prev,.pagination_next,.page-item){ display:inline-flex !important; align-items:center; justify-content:center; line-height:1; } /* 中の＜a＞は箱いっぱいのクリック領域。枠・地は持たせない（二重箱の防止） */ :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > :is(.pagination_prev,.pagination_next,.pagination_num,.page-item) > a{ display:block; min-height:44px; line-height:44px; color:inherit !important; text-decoration:none; background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; } :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > :is(.pagination_prev,.pagination_next,.pagination_num,.page-item):hover{ background:var(--gold,#bc9960) !important; border-color:var(--gold,#bc9960) !important; color:#fbf5ea !important; } /* 現在ページ（テーマは `.parts222_pagenation span.current` で黒地・白字を直当てするので 同じ詳細度以上＋!important で受領のマルーンに戻す） */ :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > span.current, :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > span.pagination_num.current{ background:var(--maroon,#491a1a) !important; border-color:var(--maroon,#491a1a) !important; color:#fbf5ea !important; } :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > span.current:hover, :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > span.pagination_num.current:hover{ background:var(--maroon,#491a1a) !important; border-color:var(--maroon,#491a1a) !important; color:#fbf5ea !important; } /* 押せないもの（1ページ目の「最初」「前」等）。テンプレートは＜a＞に .pe-none ＋ インラインの opacity:.65 を付ける。箱は＜span＞側にあるので、そのままだと 「箱は濃いまま・文字だけ薄い」か、＜span＞にも薄さを掛けると **.65×.65=.42 の二重掛け**になる。 → 薄さは箱（＜span＞）に1回だけ掛け、＜a＞側のインライン指定は打ち消す（!important はインラインに勝つ）。 */ :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > *:has(> a.pe-none){opacity:.65;pointer-events:none} :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > *:has(> a.pe-none) > a.pe-none{opacity:1 !important} /* 「…」の区切りは箱にしない。施工実績のテンプレートはページ数が多いとき `＜span class="pagination_num …">＜a class="pe-none border-0 bg-transparent">…＜/a＞＜/span＞` を出す。 これはページ番号ではなく省略記号なので、枠と地を外して区切りに見せる（CMSも a 側に border-0 / bg-transparent を付けており意図は同じ。箱は＜span＞側にあるのでここで外す）。 */ :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > .pagination_num:has(> a.border-0){ background:transparent !important; border:0 !important; min-width:0 !important; padding:0 .2em !important; } /* 数字だけは 1200px 以上で中央揃えの箱にする（下の幅では CMS が d-none で隠している＝触らない） */ @media(min-width:1200px){ :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > .pagination_num{ display:inline-flex !important; align-items:center; justify-content:center; line-height:1; } :is(.parts222_pagenation,.parts225_pagenation,.parts228_pagenation) > .pagination_num > a{ display:flex; align-items:center; justify-content:center; width:100%; line-height:1; } } /* --- E-6b) 写真ホバーの二重演出をやめる --- ブログパーツは本文の末尾に自前の＜style＞を持ち、992px以上で `.parts222_post_wrap a:hover img{opacity:.65}` を当てる（案件受領のBladeで確認）。 受領デザインのホバーは「カードが浮く＋写真がゆっくり拡大」で、**写真を薄くする指定は無い**。 両方効くと写真が白っぽく飛ぶので、透明度だけ戻す（拡大とカードの浮きは残す）。 ★パーツ側の＜style＞は本文の後ろ＝追加CSSより後に来るため、詳細度(0,2,2)を超える形＋!important が必要。 ★戻すときはこの1ブロックを消す。 */ :is(.parts222_post_wrap,.parts225_post_wrap) > a:hover :is(.parts222_post_img,.parts225_post_img) img{opacity:1 !important} /* ============================================================ E-7) 新着情報の帯（CMS: design-parts-52）— 記事が0件のときは帯ごと出さない ------------------------------------------------------------ 帯の意匠は納品CSS（20_site.css §新着情報）で受領どおりに当たっており、実機でも効いている （2026-09-10 実測: 節の padding 72px/112px ＝ 受領の clamp 値と一致）。 ただし **新着情報の登録が0件**のとき、CueZilla は「NEWS」ラベルと空の＜ul＞だけを吐くため、 金の罫で囲まれた**中身の無い帯**が144px分残る（実測: ul の高さ 0px）。 記事が入るまで帯を出さない。1件でも登録されれば自動で出る（＝入稿後の作業は不要）。 ★戻すときはこの1ブロックを消す。 */ [class*="design-parts-52"]:not(:has(li)){display:none !important} /* ============================================================ E-8) カテゴリ一覧（/blog/category/…）— CueZillaは別採番 parts225 で描く ------------------------------------------------------------ サイドバーの「カテゴリ」を押すと `/blog/category/＜slug＞` へ行くが、実機がここで使うのは **parts225系**（`.parts225_section / _wrap / _main / _post_list / _post_wrap …`）で、 ブログ一覧の parts222 とは別採番（2026-09-10 実測）。**サイドバーは出ない**（1カラム）。 カードの意匠は上の E-3〜E-4 が :is(…,.parts225_*) で両方に当たるようにしてあるので、 ここで足すのは「サイドバーが無い前提の並び」と「どのカテゴリかを示す見出し」だけ。 ★受領データにカテゴリ一覧ページのデザインは無い（CueZillaが描く領域）。 意匠は /blog と同じものを使い、新しい見た目は作っていない。 */ /* ★テーマは `.parts225_wrap{display:flex;justify-content:space-between;margin-top:45px}` を当てる。 flex のままだと主カラム（width:auto）が**中身の幅までしか伸びず**、カードが1列で 531px の巨大なカードになる（実測 1280px）。1カラムのグリッドにして幅いっぱいに使う。 margin-top:45px も落とす（見出しとカードの間は h2 の margin-bottom＝--sp-head で決める）。 */ .parts225_wrap{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; max-width:1180px; margin:0 auto !important; } /* サイドバーが無いぶん幅が広いので、列数は幅に追従させる（カードの最小幅は /blog と同じ感覚に）。 空きは受領のブログページと同じ --sp-tight。 */ .parts225_post_list{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr)) !important; gap:var(--sp-tight,20px) !important; } /* ★カテゴリ名の見出しを出す（skin §4(a) が隠しているものを、このページだけ戻す）。 skin は「自前の下層ヘッダーと二重になる」ため一覧パーツの自動 h2 を隠している。/blog では ヒーローが「ブログ」と言っているので隠したままが正しいが、**カテゴリ一覧はヒーローも パンくずも `/blog` と同じ表示**のため、隠すと「どのカテゴリを見ているのか手がかりが無い」 ページになる（実測: 見出し `お知らせ` が display:none で、本文にカテゴリ名がどこにも出ない）。 体裁は受領の節見出し `.od-ja`（明朝600・薄紫・字間.11em）＋金のヘアライン `.od-hr` に合わせる。 skin の非表示は !important なので、同じ詳細度（0,2,1）＋!important で戻す。 */ .parts225_section > h2.f_meiryo{ display:block !important; font-family:var(--jp) !important; font-weight:600 !important; font-size:clamp(1.14rem,1.02rem + .64vw,1.54rem) !important; letter-spacing:.11em; line-height:1.62; color:var(--lavDk,#6b5a92) !important; text-align:left !important; max-width:1180px; margin:0 auto var(--sp-head,44px) !important; padding:0 !important; background:transparent !important; position:relative; } .parts225_section > h2.f_meiryo::after{ content:""; display:block; height:1px; max-width:180px; margin:var(--sp-tight,20px) 0 0; background:linear-gradient(90deg,var(--gold,#bc9960),rgba(188,153,96,0)); } /* ============================================================ G) 施工実績の一覧テンプレート（/blog-ex/instance）を受領デザインに合わせる ------------------------------------------------------------ 受領データ（3_DESIGNER修正後/施工実績.dc.html ＋ od-pages.css の「施工実績カード」）は、 一覧を `.od-works`（1→2列(640px)→3列(1024px)）＋ `.od-work`（10pxの余白＝額縁・金の細罫・ 4:3の写真・緑のカテゴリチップ・明朝のタイトル）で描いている。 実機（2026-09-11 実測 https://enjoyworks-seisaku.pw/blog-ex/instance）が描くのは **parts228系**: div.parts228_post_wrap div.parts228_post_img > a > img ← 写真は最上段（受領と同じ並び） a ← 実機だけ本文側も＜a＞で包む（sandboxには無い） div.parts228_post_status ← ここが受領の .od-work-body に当たる span.parts228_post_date div.parts228_post_title-excerpt h3.parts228_post_title div.parts-blog-ex-tag_wrap > a > span.parts-blog-ex_tag ブログ一覧（parts222/225）とは**カードの作りが違う**ので、E のカード指定は当てていない （あちらは写真が最下段・額縁なし）。ここは受領の「施工実績カード」の値を写す。 ★実機は本文を＜a＞で包み、sandbox は包まない。どちらでも同じになるよう、 直下セレクタ（>）で長い鎖を作らずに書いている。 ============================================================ */ /* --- G-1) 骨格。テーマは flex＋margin-top:45px、SPでは max-width:335px まで絞る（実測）。 受領は1カラムのグリッド。 */ .parts228_wrap{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; max-width:1180px; margin:0 auto !important; } /* --- G-2) カードの並び（出典: od-pages.css .od-works）--- skin は auto-fill minmax(300px,1fr)＋gap:32px。受領は 1 → 2列(640px) → 3列(1024px)、 空きは --sp-group（34px）。高さは段ごとに揃える（受領 grid-auto-rows:1fr）。 */ .parts228_post_list{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:var(--sp-group,34px) !important; grid-auto-rows:1fr; align-items:stretch; } @media(min-width:640px){ .parts228_post_list{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } @media(min-width:1024px){ .parts228_post_list{grid-template-columns:repeat(3,minmax(0,1fr)) !important} } /* --- G-3) カード（出典: od-pages.css .od-work）--- ★受領の特徴は **padding:10px の額縁**（写真の外側に生成りの余白を回す）。 skin は padding 0・茶色の罫なので、両方をここで受領の値に戻す。 */ .parts228_post_wrap{ display:flex !important; flex-direction:column; height:100%; background:rgba(252,249,243,.9) !important; border:1px solid rgba(188,153,96,.5) !important; border-radius:0 !important; padding:10px !important; margin:0 !important; overflow:hidden; transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease; } .parts228_post_wrap:hover{ transform:translateY(-5px); box-shadow:0 18px 38px rgba(58,38,28,.18); border-color:var(--gold,#bc9960) !important; } /* 本文側の＜a＞。カードの残りを埋めて高さを揃える。 ★ここは「実機のDOMが2通りある」ことを前提に書く。CueZillaのテンプレートは本文を＜a＞で包むが、 その中にタグのリンク（.parts-blog-ex-tag_wrap の＜a＞）が入る。**＜a＞の入れ子はHTMLで禁止** なので、タグが1つでも付いた投稿ではブラウザがアンカーを分割し、 ・空の＜a＞＜/a＞ が兄弟として生まれる ・.parts228_post_status が＜a＞の外へ出て、日付・タイトルが各自の＜a＞に包まれる という別のDOMになる。**2026-09-11 に実機でタグを1つ付けた投稿で実測して確認済み** （`.parts228_post_status` が＜a＞の外に出て、日付・タイトル・タグがそれぞれ別の＜a＞に包まれ、 中身が空の＜a＞が5個生まれた）。タグ0件の投稿では起きないため、それまで露見していなかった。 → 直下セレクタ（>）で鎖を作らず、どちらの形でも同じ結果になるように書く。 */ .parts228_post_wrap > a{display:flex;flex-direction:column;color:inherit;text-decoration:none} .parts228_post_wrap > a:has(.parts228_post_status){flex:1 1 auto} .parts228_post_status a{color:inherit;text-decoration:none;display:block} /* 分割で生まれる「中身が要素でない＜a＞」（＝パーサの破片）を消す。 ★`:empty` では足りない。破片の中には改行・空白のテキストノードが残るため （2026-09-11 実機実測: 破片5個のうち `:empty` に一致したのは1個だけ。 `:not(:has(*))` なら5個すべてに一致）。 ★本物の＜a＞は必ず要素（.parts228_post_status / span / h3）を抱えているので消えない。 ★ただし修正版テンプレート（14_一覧テンプレート_blog-ex（修正版）.blade.php）の タイトルリンク `.parts228_post_link` は**中身がテキストだけ**＝要素の子を持たない。 除外しないとタイトルごと消える（2026-09-11 実測: h3 の高さが 0 になった）。 */ .parts228_post_wrap > a:not(:has(*)){display:none !important} .parts228_post_status a:not(:has(*)):not(.parts228_post_link){display:none !important} /* --- G-4) 写真（出典: od-pages.css .od-work-img ＝ 4:3・地は #cdbfa8・ホバーで1.05倍）--- ★テーマが `.parts228_post_wrap .parts228_post_img{height:240px;margin-bottom:13px}` を 2クラスで持つので、こちらも2クラス＋!important でないと届かない（parts222 で実測済みの罠）。 skin の aspect-ratio:16/10 も 4/3 に上書きする（高さは比率で決める＝auto）。 */ .parts228_post_wrap .parts228_post_img{ display:block; position:relative; overflow:hidden; aspect-ratio:4/3 !important; height:auto !important; width:100%; margin:0 !important; border-radius:0; background:#cdbfa8; } .parts228_post_wrap .parts228_post_img > a{display:block;width:100%;height:100%} .parts228_post_wrap .parts228_post_img img{ width:100%; height:100%; max-height:none; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); } .parts228_post_wrap:hover .parts228_post_img img{transform:scale(1.05)} /* --- G-5) 本文（出典: od-pages.css .od-work-body ＝ padding: --sp-item --sp-tight --sp-tight）--- skin は `[class*="_post_status"]` に margin:14px 16px 0 / padding:0 を !important で当てるので、 同じ詳細度＋!important で受領の余白に戻す。 */ /* ★並びは受領どおり「チップ → タイトル」。CueZilla は DOM 上 「日付 → タイトル → タグ」の順に出すので、flex の order で見た目だけ入れ替える （DOMは触らない）。日付はチップと同じ行に置く＝ブログ一覧のカードと同じ形。 ＝受領 `.od-work-cat`（写真の直下・タイトルの上）の位置に緑のチップが来る。 */ /* ★セレクタは2クラスにする。skin の `[class*="_post_status"]:has([class*="_title-excerpt"]){display:block !important}` が (0,2,0) で、 1クラス＋!important では**負ける**（実測: display が block のままで order が効かなかった）。 */ .parts228_post_wrap .parts228_post_status{ display:flex !important; flex-wrap:wrap; align-items:center; column-gap:.9em; row-gap:0; flex:1 1 auto; align-content:flex-start; margin:0 !important; padding:var(--sp-item,26px) var(--sp-tight,20px) var(--sp-tight,20px) !important; background:transparent !important; border:0 !important; } /* 修正版テンプレート（タグが .parts228_post_status の直下にある形） */ .parts228_post_status > .parts-blog-ex-tag_wrap{order:1;margin:0 !important} .parts228_post_status > span.parts228_post_date{order:2} .parts228_post_status > a:has(> span.parts228_post_date){order:2} .parts228_post_status > .parts228_post_title-excerpt{order:3;flex:1 0 100%;margin:13px 0 0 !important} /* 旧テンプレート（タグが .parts228_post_title-excerpt の中にある形）。 親が違うので order では上に出せない。器を縦の flex にしてタグだけ先頭へ送る。 ＝こちらも「チップ → タイトル」になる（日付は1行上に残る）。 */ .parts228_post_title-excerpt:has(> .parts-blog-ex-tag_wrap){display:flex;flex-direction:column} .parts228_post_title-excerpt > .parts-blog-ex-tag_wrap{order:-1;margin:0 0 13px !important} /* 日付。受領の施工実績カードに日付は無い（カテゴリチップとタイトルだけ）が、実機は必ず出す。 ブログ一覧と同じ日付表現（Cormorant・金茶）に揃える＝サイト内で日付の顔を1つにする。 */ .parts228_post_status span.parts228_post_date{ display:inline-block; background:transparent !important; border:0 !important; padding:0 !important; font-family:'Cormorant Garamond',serif !important; font-size:.82rem; letter-spacing:.08em; color:#8a6830 !important; margin:0 !important; } /* タイトルの器。余白はカード本文が持つのでここは0にする（skin は 10px 0 16px を !important） */ .parts228_post_title-excerpt{padding:0 !important;margin:0 !important} /* タイトル（出典: od-pages.css .od-work-ttl） */ .parts228_post_title-excerpt h3.parts228_post_title{ font-family:var(--jp) !important; font-weight:600 !important; font-size:1.05rem !important; line-height:1.65; letter-spacing:.05em; color:var(--ink,#2b211c) !important; margin:0 !important; text-align:left; } /* 抜粋（テーマは 14px。出たときのために受領の本文トーンに寄せる） */ .parts228_post_title-excerpt .parts228_post_excerpt{ display:block; font-family:var(--jp) !important; font-weight:500 !important; font-size:.92rem; line-height:1.9; letter-spacing:.04em; color:var(--ink2,#4a3a31) !important; margin:.7em 0 0; } /* --- G-6) タグ（実機だけにあるもの）--- 受領の施工実績カードが持つのは「緑のカテゴリチップ」1つで、タグの意匠は無い。 実機 parts228 は **カテゴリを出力せず**（テーマに `_post_category` が無い・実測）、 代わりに `.parts-blog-ex-tag_wrap` でタグを並べる。 ★**緑の塗りチップにする**（ディレクター指示 2026-09-11）。値は受領 od-pages.css の `.od-work-cat`（施工実績カードのカテゴリチップ）をそのまま写す＝ブログ一覧のカテゴリチップ （od-theme.css .card-title）とも同じ緑で揃う。 ※いったん「タグは複数並ぶので控えめな金枠に」としていたが、ディレクター判断で緑に統一。 戻す場合は color:#6f5428 / background:transparent / border:1px solid rgba(188,153,96,.5)。 ★実テンプレート（2026-09-11 受領）で **1枚のカードに出るタグは最大2件**（`if($i >= 2){break;}`）。 */ .parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:8px; margin:0 !important; padding:0 !important; } .parts-blog-ex_tag{ display:inline-block; font-family:var(--jp) !important; font-weight:600; font-size:.74rem; letter-spacing:.14em; line-height:1; color:#f7efe2 !important; background:var(--green,#2e4a3c) !important; border:0 !important; border-radius:0 !important; padding:.4em .85em !important; } .parts-blog-ex-tag_wrap > a{text-decoration:none} .parts-blog-ex-tag_wrap > a:not(:has(*)){display:none !important} /* タグ自体がリンク（タグ別一覧へ飛ぶ）。押せることが分かる程度に軽くするだけで、新しい色は作らない。 */ .parts-blog-ex-tag_wrap > a:hover .parts-blog-ex_tag{opacity:.82} /* --- G-8) カード全体を押せるようにする（修正版テンプレート用）--- `14_一覧テンプレート_blog-ex（修正版）.blade.php` を入れると、リンクは **タイトルの1本（.parts228_post_link）だけ**になる（＜a＞の入れ子をやめたため）。 そのままだとタイトルの文字しか押せないので、擬似要素でカード全体に当たり判定を広げる （いわゆる stretched link。リンクは1本のままなので読み上げも「タイトル」1件で済む）。 ★タグはリンクの上に出す必要があるので z-index を1つ上げる。 ★旧テンプレートのままなら `.parts228_post_link` が存在せず、この節は**何もしない** （新旧どちらのテンプレートでも壊れない）。 */ .parts228_post_wrap{position:relative} .parts228_post_link{color:inherit;text-decoration:none} .parts228_post_link::after{content:"";position:absolute;inset:0;z-index:0} .parts-blog-ex-tag_wrap{position:relative;z-index:1} /* 写真のリンクは修正版では読み上げ対象から外している（tabindex="-1" aria-hidden）。 カード全体が押せるので、見た目だけ従来どおりにする。 */ .parts228_post_wrap .parts228_post_img > a{position:relative;z-index:0} /* --- G-9) 一覧の上の見出しブロックと、カード列との間隔（ブログ／施工実績の両方）--- 修正版テンプレート（2026-09-11・ディレクター指示）が、受領データと同じ見出しを一覧の上に出す: ・施工実績 … Case Studies / Recent Projects / 最近の施工 ＋ 金の罫 ・ブログ　 … Articles / Latest Posts / 新着記事 ＋ 金の罫 どちらも `＜div class="od-wrap od-hd">` の入れもので、見出し自体の体裁は納品CSS（.od-kicker / .od-dis / .od-ja / .od-hr）が そのまま当たるので、ここで足すのは**見出しとカード列の間隔だけ**。 受領は `.od-works{margin-top:var(--sp-head)}`（44px）。ブログ側も同じ段（--sp-head）。 ★旧テンプレート（見出しが無い）では隣接セレクタが一致せず、この指定は何もしない。 ★カテゴリ／タグで絞り込んだページは、この見出しの代わりに絞り込み名の h2 が出る （体裁は節E-8／G-7）。 */ :is(.parts222_section,.parts225_section,.parts228_section) > .od-hd + :is(.parts222_wrap,.parts225_wrap,.parts228_wrap){ margin-top:var(--sp-head,44px) !important; } /* ★見出しの「Recent Projects」だけはテーマに奪われるので受領値へ戻す。 テーマの `.parts222_section h2 / .parts225_section h2 / .parts228_section h2` （font-size:35px / letter-spacing:1.75px / text-align:center / color:var(--main-color)）が (0,1,1) で、クラス1つの `.od-dis` (0,1,0) に勝つため。 ★ブログはさらにパーツ末尾の＜style＞が `.parts222_section h2{margin-bottom:30〜50px}` を 足してくる（本文の後ろ＝追加CSSより後）ので、margin もここで決める。 ★色は特に分かりにくい壊れ方をする: --main-color は実機で `#` が抜けており（`7a2b32`）、 color の値が無効→**継承**に落ちる。その結果マルーンでも茜でもない本文色で出る（実測）。 値は受領 od-theme.css の .od-dis の写し。 */ :is(.parts222_section,.parts225_section,.parts228_section) .od-hd h2.od-dis{ font-family:'Great Vibes',cursive !important; font-weight:400 !important; font-size:clamp(2.5rem,1.5rem + 3.5vw,4.4rem) !important; letter-spacing:.012em !important; line-height:1.22 !important; color:var(--maroon,#491a1a) !important; text-align:left !important; margin:var(--sp-hair,20px) 0 0 !important; background:transparent !important; } /* --- G-7) タグ別一覧の見出し（/blog-ex/instance/tag/＜id＞）--- 実テンプレート（2026-09-11 受領）は、タグで絞り込んだときだけ h2 に**タグ名**を出す （`@if($titletagName) ＜h2 class="f_meiryo f_bold">{{ $titletagName }}＜/h2＞ @endif`）。 絞り込みなしの一覧では h2 自体が出ない。 ところが skin §4(a) は一覧パーツの自動 h2 を隠すため、**タグを押すと「何で絞り込んでいるのか」 がどこにも出ないページ**になる（ブログのカテゴリ一覧＝節 E-8 と同じ問題）。 → parts228 でも h2 を戻す。体裁は受領の節見出し `.od-ja`＋金のヘアライン（E-8 と同じ）。 */ .parts228_section > h2.f_meiryo{ display:block !important; font-family:var(--jp) !important; font-weight:600 !important; font-size:clamp(1.14rem,1.02rem + .64vw,1.54rem) !important; letter-spacing:.11em; line-height:1.62; color:var(--lavDk,#6b5a92) !important; text-align:left !important; max-width:1180px; margin:0 auto var(--sp-head,44px) !important; padding:0 !important; background:transparent !important; position:relative; } .parts228_section > h2.f_meiryo::after{ content:""; display:block; height:1px; max-width:180px; margin:var(--sp-tight,20px) 0 0; background:linear-gradient(90deg,var(--gold,#bc9960),rgba(188,153,96,0)); } /* ★受領CSSの「最下段に1枚だけ残さない」（.od-works > *:last-child:nth-child(odd) を横いっぱいに）は **移していない**。静的ページは枚数が固定だがCMS一覧は投稿数で変わり、3列の最後の1枚が 幅1180pxまで伸びると 4:3 の写真が約885pxの巨大な帯になるため。 適用したい場合は下を有効にする（受領CSSと同じ条件・同じ境目）: @media(min-width:640px){ .parts228_post_list > *:last-child:nth-child(odd){grid-column:1 / -1} } @media(min-width:1024px){ .parts228_post_list > *:last-child:nth-child(odd){grid-column:auto} .parts228_post_list > *:last-child:nth-child(3n+1){grid-column:1 / -1} } ★ディレクター判断待ち（2026-09-11 時点は未適用＝最下段に空きが出る並び）。 */ /* ============================================================ H) 記事詳細ページの「最近の投稿」を、一覧ページのサイドバーと同じ体裁にする ------------------------------------------------------------ 対象: /blog/＜id＞ と /blog-ex/instance/＜id＞ の本文下に出る `.recent_posts_wrap` （2026-09-11 実測 https://enjoyworks-seisaku.pw/blog/105174）。 一覧ページのサイドバー（節E-5 の .parts222_sidebar_wrap）と**同じクラスではない**ため、 E-5 の指定が1つも届かず、CMS既定のまま出ていた: ・面も罫も無い（素のリスト） ・見出しは明朝17px/700のこげ茶で下罫なし ・ul に黒丸（list-style:disc） ・li に茶色の区切り罫（#7f463f） ・記事タイトルが**メイリオ**16px/700（f_meiryo が残る） ・日付が inline の 14px・茶（--sub-color） ここで E-5 と同じ値を渡す（新しい色・寸法は作らない。すべて E-5 からの写し）。 ★詳細ページのこのブロックは**サイドバーではなく本文下の全幅**。幅はそのまま、体裁だけ揃える。 ============================================================ */ /* 箱（E-5 の .parts222_sidebar_wrap と同じ面・罫・内側余白） */ .recent_posts_wrap{ background:rgba(252,249,243,.94) !important; border:1px solid rgba(188,153,96,.5) !important; border-radius:0; padding:clamp(1.4rem,2.4vw,1.8rem) clamp(1.3rem,2.2vw,1.6rem) !important; margin-top:var(--sp-group,34px) !important; } /* 見出し（E-5 の h3 と同じ。skin が背景と左右paddingを外すところまでは同じなので、 書体・色・下罫・余白をここで受領の値にする） */ .recent_posts_wrap > .recent_post_title{ font-family:var(--jp) !important; font-weight:600 !important; font-size:1rem !important; letter-spacing:.09em; line-height:1.5; color:var(--lavDk,#6b5a92) !important; background:transparent !important; text-align:left !important; margin:0 0 13px !important; padding:0 0 .55rem !important; border-bottom:1px solid rgba(188,153,96,.5) !important; } .recent_posts_wrap ul{list-style:none !important;margin:0 !important;padding:0 !important;display:grid;gap:9px} /* 区切り罫は一覧のサイドバーと同じく外す（面と余白で仕切る）。 ★戻すときはこの1ブロックを消せば skin の罫が復活する。 */ .recent_posts_wrap ul li{ list-style:none !important; border:0 !important; margin:0 !important; padding:0 !important; } /* 1件ぶんのリンク（日付を上、タイトルを下の縦積み＝E-5 の .recent a と同じ） */ .recent_posts_wrap ul li a{ display:flex !important; flex-direction:column; align-items:flex-start; gap:0; min-height:0; padding:.35rem 0 !important; font-family:var(--jp); font-weight:500; font-size:.94rem; line-height:1.7; letter-spacing:.04em; color:var(--ink2,#4a3a31) !important; text-decoration:none; transition:color .3s ease; } .recent_posts_wrap ul li a:hover{color:var(--maroon,#491a1a) !important} /* 日付（E-5 の .parts222_sidebar_date と同じ Cormorant・金茶）。 ★セレクタを深くする: テーマが `.recent_posts_wrap ul li a .recent_post_date`（0,2,3）で font-size:14px / margin-bottom:5px / letter-spacing:.03em を持つため、 浅いセレクタでは font-size が 14px のまま残る（実測）。 */ .recent_posts_wrap ul li a span.recent_post_date{ display:block; font-family:'Cormorant Garamond',serif !important; font-size:.82rem; letter-spacing:.08em; color:#8a6830 !important; margin:0 0 .2rem !important; } /* 記事タイトル。★詳細ページは＜h3＞（一覧サイドバーは＜p＞）で、 `.f_meiryo` が残るためゴシック16px/700で出ていた。書体・太さ・大きさを揃える。 */ .recent_posts_wrap ul li a h3{ font-family:var(--jp) !important; font-weight:500 !important; font-size:.94rem !important; line-height:1.7; letter-spacing:.04em; color:inherit !important; margin:0 !important; } /* ============================================================ I) お問い合わせフォーム（/form/inquiry ＋ 確認・完了）を受領デザインに合わせる ------------------------------------------------------------ 受領データ（3_DESIGNER修正後/お問い合わせ.dc.html ＋ od-pages.css の `.od-form*`）は フォームを次のように描いている: ・行 … `.od-form-row`（768px以上で **14rem のラベル列 ＋ 残り**／それ未満は縦積み） ・ラベル … `.od-form-lb`（明朝600・.98rem・字間.08em・薄紫 --lavDk） ・必須 … `.od-form-req`（マルーン地に生成りの字・.72rem・字間.1em） ・入力欄 … 生成りの面 rgba(252,249,243,.92)＋**金の細罫** rgba(188,153,96,.55)・高さ54px・角なし フォーカスで罫が金＋3pxのリング rgba(188,153,96,.22) ・送信 … `.od-btn--gold`（金地・こげ茶の字・高さ56px・字間.1em） 実機は CueZilla の **parts213系**（お問い合わせ）と **parts219系**（応募フォーム `/form/recruit`）。 ★2026-09-11 実測: `/form/recruit` は `parts219_section_form` / `parts219_form_wrap` で、 parts213 だけを見ていた指定が**1つも当たらず CMS既定のまま**だった（＝崩れて見えた）。 markup は同じ形（dl > dt/dd ＋ .contact_submit）なので、セレクタに parts219 を足すだけで揃う。 実機の markup（2026-09-11 実測 https://enjoyworks-seisaku.pw/form/inquiry）: section:is(.parts213_section_form,.parts219_section_form) > div:is(.parts213_form_wrap,.parts219_form_wrap) dl > dt（ラベル＋span.required） + dd（input / textarea / label+checkbox / p.error） div.contact_submit > input[type=submit] 受領CSSのセレクタは1つも届かないので、ここで同じ値を渡す。 ★実機で**壊れて見えていた2点**（どちらも原因は同じ）: ・「必須」バッジが **白い字のまま見えない**（実測 color:#fff / background:transparent） ・送信ボタンが **地も枠も無く白い字だけ**（実測 background:transparent / border:0 / color:#fff） テーマが `background-color:var(--main-color)` で色を付ける作りで、実機の `--main-color` は `#` が抜けた `7a2b32`＝**無効値**なので背景が付かず、白い字だけが残っていた。 ★CMSのテーマカラーを `#7a2b32` に直すのが本筋だが、ここで受領の色を直接当てるので 直す前でも読める・押せる状態になる（直した後も見た目は変わらない）。 ============================================================ */ /* --- I-1) 節と全体の幅（出典: 受領は `.od-sec` の中の `.od-wrap`＝1180px）--- */ :is(.parts213_section_form,.parts219_section_form){ padding:var(--sp-section) clamp(1.5rem,6vw,7rem) !important; background:var(--paper,#efe7da); } :is(.parts213_section_form,.parts219_section_form) :is(.parts213_form_wrap,.parts219_form_wrap){ max-width:1180px !important; width:auto !important; margin:0 auto !important; display:grid; gap:var(--sp-group,34px); } /* --- I-2) 1行（出典: .od-form-row）--- 実機は `dl{display:flex}` でラベルと入力を半分ずつ（実測 342.5px / 342.5px）。 受領は 768px 以上で 14rem のラベル列＋残り、それ未満は縦積み。 */ :is(.parts213_form_wrap,.parts219_form_wrap) dl{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:var(--sp-tight,20px) !important; margin:0 !important; padding:0 !important; } @media(min-width:768px){ :is(.parts213_form_wrap,.parts219_form_wrap) dl{ grid-template-columns:minmax(0,14rem) minmax(0,1fr) !important; gap:var(--sp-item,26px) !important; align-items:start; } } /* ラベル（出典: .od-form-lb） */ /* ★flex-wrap は nowrap にする。wrap のままだと、ラベルが長い行（「メールアドレス（確認用）」）で **ラベルを折り返さずにバッジのほうが次の行へ落ちる**（flex は wrap 時、まず基準幅で行に詰めてから はみ出した項目を送るため。実測: バッジが52px下・左端へ）。 nowrap にすると同じ行の中で**ラベル側が2行に折り返し、バッジは右に残る**。 */ :is(.parts213_form_wrap,.parts219_form_wrap) dt{ display:flex !important; align-items:center; flex-wrap:nowrap; gap:.7em; width:auto !important; padding:0 !important; margin:0 !important; font-family:var(--jp) !important; font-weight:600 !important; font-size:.98rem !important; letter-spacing:.08em; line-height:1.6; color:var(--lavDk,#6b5a92) !important; } @media(min-width:768px){ :is(.parts213_form_wrap,.parts219_form_wrap) dt{padding-top:.95rem !important} } /* ラベルが「本文＋注記」の入れ子（`.form_text_dt`）になっている行では、 注記が長いぶん「必須」バッジが別の行へ落ちて、ラベルの上下にばらける。 ラベル文（＋注記）を1つの縦組みにまとめ、バッジはその右に置く。 */ :is(.parts213_form_wrap,.parts219_form_wrap) dt{align-items:flex-start} :is(.parts213_form_wrap,.parts219_form_wrap) dt > span:not(.required){ display:flex; flex-direction:column; gap:.25em; flex:1 1 auto; min-width:0; order:0; } :is(.parts213_form_wrap,.parts219_form_wrap) dt span.required{order:1;align-self:flex-start;margin-top:.1em;flex:0 0 auto} /* ★注記が「ラベルの兄弟」として並ぶ行（ファイル添付）だけは折り返しを許す。 nowrap のままだと注記とラベルが同じ行を取り合い、ラベルが1文字ずつ縦に潰れる（実測）。 注記だけを次の行へ送れば、ラベルは1行のまま・注記は幅いっぱいになる。 ※「お問い合わせ内容」の行は注記がラベルの**中**にあるので、この指定には一致しない（そのままでよい）。 */ :is(.parts213_form_wrap,.parts219_form_wrap) dt:has(> .attention){flex-wrap:wrap} :is(.parts213_form_wrap,.parts219_form_wrap) dt > .attention{flex:1 1 100%;margin-top:.3em !important} :is(.parts213_form_wrap,.parts219_form_wrap) dd{width:auto !important;margin:0 !important;padding:0 !important} /* --- I-3) 「必須」バッジ（出典: .od-form-req）--- ★上のコメントのとおり、実機では白字・地なしで**見えていなかった**。 */ :is(.parts213_form_wrap,.parts219_form_wrap) dt span.required{ display:inline-block; white-space:nowrap; background:var(--maroon,#491a1a) !important; color:#fbf5ea !important; border:0 !important; border-radius:0 !important; font-family:var(--jp) !important; font-weight:600 !important; font-size:.72rem !important; letter-spacing:.1em; line-height:1; padding:.44em .72em !important; } /* 注記（テーマの `.attention` / `.des` はメイリオ・灰色。書体と濃さをサイトに合わせる） */ :is(.parts213_form_wrap,.parts219_form_wrap) :is(.attention,.des){ display:block; font-family:var(--jp) !important; font-weight:500 !important; font-size:.82rem !important; line-height:1.7 !important; letter-spacing:.03em; color:var(--ink2,#4a3a31) !important; opacity:.72; margin:.3em 0 0 !important; } /* --- I-4) 入力欄（出典: .od-form input/textarea/select）--- 実機は skin の面（--temporary-color）と**茶色の罫**（--sub-color #7f463f）。受領は生成りの面＋金の細罫。 ★チェックボックス・ラジオ・ファイル・送信ボタンは別物なので :not() で外す。 */ :is(.parts213_form_wrap,.parts219_form_wrap) :is( input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]), textarea, select){ width:100% !important; min-height:54px; border-radius:0 !important; padding:.9rem 1rem !important; background:rgba(252,249,243,.92) !important; border:1px solid rgba(188,153,96,.55) !important; font-family:var(--jp) !important; font-weight:500; font-size:1rem; line-height:1.7; letter-spacing:.04em; color:var(--ink2,#4a3a31) !important; transition:border-color .3s ease,box-shadow .3s ease; } :is(.parts213_form_wrap,.parts219_form_wrap) textarea{min-height:10rem !important;resize:vertical} :is(.parts213_form_wrap,.parts219_form_wrap) :is(input,textarea,select):focus{ outline:none; border-color:var(--gold,#bc9960) !important; box-shadow:0 0 0 3px rgba(188,153,96,.22) !important; } :is(.parts213_form_wrap,.parts219_form_wrap) ::placeholder{color:var(--ink2,#4a3a31);opacity:.42} /* --- I-5) チェックボックス（受領には無い。実機だけの部品なのでサイトのトーンに寄せる）--- */ :is(.parts213_form_wrap,.parts219_form_wrap) dd label{ display:inline-flex; align-items:center; gap:.5em; margin:0 1.2em .5em 0; cursor:pointer; font-family:var(--jp); font-weight:500; font-size:.96rem; letter-spacing:.04em; color:var(--ink2,#4a3a31); } :is(.parts213_form_wrap,.parts219_form_wrap) :is(input[type=checkbox],input[type=radio]){ width:18px !important; height:18px; min-height:0 !important; margin:0; padding:0 !important; accent-color:var(--gold,#bc9960); } /* --- I-6) エラー文（受領に見本は無い。読めない色だったので、サイトの赤系＝--wine に）--- 実機は本文と同じこげ茶16px（実測）で、エラーだと気づけない。 */ :is(.parts213_form_wrap,.parts219_form_wrap) p.error{ font-family:var(--jp) !important; font-weight:500 !important; font-size:.88rem !important; line-height:1.7; letter-spacing:.03em; color:var(--wine,#7a2b32) !important; margin:.5em 0 0 !important; } /* --- I-7) ファイル添付（テーマは灰色のブロック＋グラデのボタン）--- */ :is(.parts213_form_wrap,.parts219_form_wrap) .label_file_upload{ display:flex !important; align-items:center; gap:.8em; background:rgba(252,249,243,.92) !important; border:1px dashed rgba(188,153,96,.55) !important; padding:.9rem 1rem !important; font-family:var(--jp); font-weight:500; font-size:.94rem; color:var(--ink2,#4a3a31); } :is(.parts213_form_wrap,.parts219_form_wrap) .label_file_upload button{ height:auto !important; min-height:40px; padding:.4rem 1rem !important; background:var(--paper2,#faf6ee) !important; border:1px solid rgba(188,153,96,.55) !important; border-radius:0 !important; font-family:var(--jp) !important; font-weight:600; font-size:.86rem; letter-spacing:.06em; color:var(--ink,#2b211c) !important; } /* --- I-7b) 素のファイル入力（応募フォーム parts219 は `.label_file_upload` を使わず `＜input type="file">` をそのまま出す・2026-09-11 実測）--- */ /* ★セレクタを深くする。skin §7 の `[class*="_form_wrap"] dd input:not([type=checkbox]):not([type=radio])…`（0,3,2・!important）が ファイル入力にも当たっており、浅いセレクタでは灰色の面と茶色の罫のまま残る（実測）。 */ :is(.parts213_section_form,.parts219_section_form) :is(.parts213_form_wrap,.parts219_form_wrap) dd input[type=file]{ width:100% !important; min-height:54px; padding:.65rem 1rem !important; background:rgba(252,249,243,.92) !important; border:1px dashed rgba(188,153,96,.55) !important; border-radius:0 !important; font-family:var(--jp) !important; font-weight:500; font-size:.94rem; color:var(--ink2,#4a3a31) !important; } :is(.parts213_section_form,.parts219_section_form) :is(.parts213_form_wrap,.parts219_form_wrap) dd input[type=file]::file-selector-button{ margin:0 .9em 0 0; min-height:40px; padding:.4rem 1rem; background:var(--paper2,#faf6ee); border:1px solid rgba(188,153,96,.55); border-radius:0; font-family:var(--jp); font-weight:600; font-size:.86rem; letter-spacing:.06em; color:var(--ink,#2b211c); cursor:pointer; } /* --- I-8) 送信ボタン（出典: .od-btn ＋ .od-btn--gold）--- ★実機では地も枠も無く白い字だけだった（上のコメント参照）。 ★`＜input＞` には ::before を置けないため、受領の「内側の細い二重枠」だけは再現していない （色・大きさ・字間・ホバーは受領のまま）。 */ /* ★width も明示する。テーマが `:is(.parts213_section_form,.parts219_section_form) .contact_submit{width:220px}`（219系は301px）を 持っており、幅を戻さないとボタンの並びが左に寄る（実測: 幅1023の中で左端から460pxの箱の中で中央寄せ）。 */ :is(.parts213_form_wrap,.parts219_form_wrap) .contact_submit{ display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-tight,20px); width:auto !important; max-width:none !important; margin:var(--sp-head,44px) 0 0 !important; text-align:center; } :is(.parts213_form_wrap,.parts219_form_wrap) .contact_submit :is(input[type=submit],input[type=button],button){ width:auto !important; min-width:15rem; min-height:56px; padding:1rem clamp(1.35rem,5.6vw,2.3rem) !important; margin:0 !important; background:var(--gold,#bc9960) !important; color:#2b211c !important; border:1px solid var(--gold,#bc9960) !important; border-radius:0 !important; font-family:var(--jp) !important; font-weight:600 !important; font-size:1rem !important; letter-spacing:.1em !important; cursor:pointer; transition:transform .28s ease,background-color .28s ease,color .28s ease,box-shadow .28s ease; } :is(.parts213_form_wrap,.parts219_form_wrap) .contact_submit :is(input[type=submit],input[type=button],button):hover{ background:#a8854e !important; color:#fff8ef !important; border-color:#a8854e !important; transform:translateY(-3px); } /* 確認画面の「戻る」だけは副ボタン（出典: .od-btn--line）。 実markup: `＜input name="back" class="mx-2" type="submit" value="戻る">`（sandbox / 実テンプレートで確認）。 */ :is(.parts213_form_wrap,.parts219_form_wrap) .contact_submit input[name="back"]{ background:transparent !important; color:var(--ink,#2b211c) !important; border:1px solid rgba(43,33,28,.45) !important; min-width:11rem; } :is(.parts213_form_wrap,.parts219_form_wrap) .contact_submit input[name="back"]:hover{ background:var(--ink,#2b211c) !important; color:#f7efe2 !important; border-color:var(--ink,#2b211c) !important; } /* --- I-9) 完了画面（parts243-245）--- */ [class*="parts243-245_complete_form"]{ padding:var(--sp-section) clamp(1.5rem,6vw,7rem) !important; background:var(--paper,#efe7da); } [class*="parts243-245_complete_form"] .complete_msg_box{ max-width:var(--read,51em); margin:0 auto !important; background:rgba(252,249,243,.94) !important; border:1px solid rgba(188,153,96,.5) !important; padding:clamp(2rem,4vw,3rem) clamp(1.4rem,3vw,2.2rem) !important; font-family:var(--jp) !important; font-weight:500; font-size:1rem; line-height:1.95; letter-spacing:.04em; color:var(--ink2,#4a3a31) !important; text-align:center; } /* ★ボタンの行が完了メッセージの箱に**くっついている**（実測: 箱の下辺とボタン行の間 0px）。 入力・確認画面の `.contact_submit` は `:is(.parts213_form_wrap,.parts219_form_wrap)` の中なので節I-8の余白が効くが、 完了画面は `.container` の直下にあり、どの指定も当たっていなかった。 受領の `.od-form-foot{margin-top:var(--sp-head)}` と同じ段（44px）を入れる。 */ [class*="parts243-245_complete_form"] .contact_submit{ display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-tight,20px); width:auto !important; margin:var(--sp-head,44px) 0 0 !important; } /* 完了メッセージの見出し・本文。パーツが `.f_meiryo` を付けるためゴシックのまま出ていた （実測: メイリオ45px）。サイトの明朝に揃える。 */ [class*="parts243-245_complete_form"] .complete_msg_box h2{ font-family:var(--jp) !important; font-weight:600 !important; font-size:clamp(1.24rem,1.1rem + .7vw,1.7rem) !important; letter-spacing:.08em; line-height:1.6; color:var(--ink,#2b211c) !important; margin:0 0 var(--sp-item,26px) !important; text-align:center; } [class*="parts243-245_complete_form"] .complete_msg_box p{ font-family:var(--jp) !important; font-weight:500 !important; font-size:1rem !important; line-height:1.95; letter-spacing:.04em; color:var(--ink2,#4a3a31) !important; margin:0; } [class*="parts243-245_complete_form"] .btn-main{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:1rem clamp(1.35rem,5.6vw,2.3rem) !important; background:var(--gold,#bc9960) !important; color:#2b211c !important; border:1px solid var(--gold,#bc9960) !important; border-radius:0 !important; font-family:var(--jp) !important; font-weight:600 !important; font-size:1rem !important; letter-spacing:.1em !important; text-decoration:none; transition:transform .28s ease,background-color .28s ease,color .28s ease; } [class*="parts243-245_complete_form"] .btn-main:hover{ background:#a8854e !important; color:#fff8ef !important; border-color:#a8854e !important; transform:translateY(-3px); } /* ============================================================ J) ヘッダーの「採用に応募」（.od-btn--wine）がホバーで文字だけ青くなる ------------------------------------------------------------ 犯人は **Bootstrap の `a:hover{color:#0a58ca}`**（実機が読み込んでいる bootstrap 5.0.2）。 詳細度は (0,1,1) で、受領の `.od-btn--wine{color:#fff8ef}` は (0,1,0) ＝ **Bootstrap が勝つ**。 受領のホバー指定 `.od-btn--wine:hover{background:#68232a;box-shadow:…}` は**色を持たない**ので、 ホバーの瞬間だけ文字色が奪われて青くなる（他の変種は :hover 側で color を持つので無事）。 ＝受領の意図は「地が少し濃くなるだけ・文字は生成りのまま」。その状態に戻す。 ★受領CSS（20_site.css）は共通の写しなので触らず、ここで色だけ足す。 */ .od-btn--wine:hover,.od-btn--wine:focus-visible{color:#fff8ef} /* 変種クラスを持たない素の `.od-btn` も同じ理由で青くなりうるので守る （色は非ホバーのまま＝文脈から継承）。 */ a.od-btn:not([class*="od-btn--"]):hover, a.od-btn:not([class*="od-btn--"]):focus-visible{color:inherit} /* ============================================================ K) トップの動的パーツ2つ（新着情報 design-parts-52 ／ 記事カード parts131415_blog）を 受領デザインに戻す — **パーツ自身の＜style＞に負けていた** ------------------------------------------------------------ 2026-09-11 実測。どちらのパーツも **本文の中に自分用の＜style＞を出力**しており、 そこで使われるセレクタが `.parts131415_blog_PhNFDaRKlq`（乱数の接尾辞付き）のように **クラスを3〜4個重ねた形**で、しかも**追加CSSより後ろ**に出る。 そのため納品CSS（受領の写し）が同点以下の詳細度で負け、次のように崩れていた: 【新着情報 design-parts-52】 ・`.container{height:100%}` `.content{height:100%}` … 親が auto 高さのため **高さが 0/2px に潰れ**、 帯の中身（64pxの行）が箱からはみ出す（実測: section 144px＝上下padding だけ） ・`.container{max-width:var(--cotainer--width--pc)}` … 受領の 1180px ではなく **1280px** 【記事カード parts131415_blog】 ・`.card{padding:45px 30px 40px}` … 受領は 0（枠だけ）。カードが大きく間延び ・`.card-title{color:var(--main-color)}` … `--main-color` が `#` 欠落の無効値なので**継承**に落ち、 緑のチップの上に**こげ茶の字**（実測 #4a3a31）＝ほぼ読めない ・`.card-title{font-size:var(--fs--pc);margin-bottom:30px}` … 受領は .72rem／余白も別 ・`.card-text{height:55px;overflow:hidden;font-size:var(--fs--pc)}` … 受領は高さ固定なし ・`.container-lg{max-width:1280px;padding:0 50px}` … 受領は 1180px・左右padding なし ・`section{padding:150px 0}` … 受領は 0（節の余白はサイト側が持つ） さらに skin §4-b が `.row` を auto-fill のグリッドにし、`.col` の余白を 0 にしていた（!important）。 ★対処: **受領の指定をそのまま、セレクタの先頭に `section` を足して詳細度を1段上げ、 すべての宣言に !important を付けた**ものをここに置く（値は受領のコピー＝意匠は不変）。 乱数の接尾辞（`_PhNFDaRKlq`）には依存していないので、**パーツを作り直しても効き続ける**。 ★元の指定（20_site.css の §新着情報 / §記事カード）は消していない。ここはその「勝てる版」。 ============================================================ */ /* --- K-1) 新着情報（design-parts-52）--- */ section[class*="design-parts-52"]{position:relative !important;padding:clamp(3rem,6vw,4.5rem) clamp(1.5rem,6vw,7rem) !important;background:var(--paper,#efe7da) !important} section[class*="design-parts-52"].bg-color{background:var(--paper,#efe7da) !important} section[class*="design-parts-52"] .container{max-width:1180px !important;margin:0 auto !important;position:relative !important;z-index:2 !important} section[class*="design-parts-52"] .content{display:flex !important;align-items:center !important;gap:0 !important;padding:0 !important;background:rgba(252,249,243,.96) !important;border:1px solid rgba(188,153,96,.5) !important} section[class*="design-parts-52"] h4.banner-area{flex:0 0 auto !important;display:flex !important;align-items:center !important;margin:0 !important;background:var(--maroon,#491a1a) !important;color:#f7efe2 !important;font-family:'Cormorant Garamond',serif !important;letter-spacing:.28em !important;text-transform:uppercase !important;font-size:1rem !important;font-weight:600 !important;padding:0 clamp(1.4rem,3vw,2.2rem) !important;align-self:stretch !important;line-height:1 !important} section[class*="design-parts-52"] ul.mb-0{flex:1 1 auto !important;list-style:none !important;margin:0 !important;padding:0 !important} section[class*="design-parts-52"] li{min-height:64px !important;display:flex !important;align-items:center !important;padding:.6rem clamp(1.1rem,3vw,2rem) !important} section[class*="design-parts-52"] li a{display:flex !important;align-items:center !important;min-height:44px !important;width:100% !important;text-decoration:none !important;color:var(--ink2,#4a3a31) !important;transition:color .3s !important} section[class*="design-parts-52"] li a:hover{color:var(--wine,#7a2b32) !important} section[class*="design-parts-52"] .parts-52-textarea{display:flex !important;align-items:baseline !important;gap:clamp(.9rem,2vw,1.8rem) !important;flex-wrap:wrap !important} section[class*="design-parts-52"] .parts-52-textarea .date{font-family:'Cormorant Garamond',serif !important;color:var(--umber,#7f463f) !important;letter-spacing:.09em !important;font-size:1rem !important;font-weight:600 !important} section[class*="design-parts-52"] .parts-52-textarea .d-inline-block{font-family:var(--jp) !important;font-weight:500 !important;font-size:1.04rem !important;line-height:1.7 !important;letter-spacing:.03em !important} @media(max-width:767px){section[class*="design-parts-52"] .content{flex-direction:column !important;align-items:stretch !important} section[class*="design-parts-52"] h4.banner-area{justify-content:flex-start !important;padding:.8rem clamp(1.4rem,3vw,2.2rem) !important}} /* ★受領CSSには height の指定が無いので、パーツが付ける `height:100%` を明示的に外す。 親（section）が auto 高さのため、100% が 0 に解決されて帯が潰れていた（実測: container 0px / content 2px）。 */ section[class*="design-parts-52"] .container, section[class*="design-parts-52"] .container .content, section[class*="design-parts-52"] .container .content h4.banner-area{height:auto !important} /* SPでパーツが `h4.banner-area{height:35px;width:100%}` を当てるのも同様に外す（受領は縦積み＋自前padding） */ @media(max-width:767px){ section[class*="design-parts-52"] .container .content h4.banner-area{height:auto !important;width:auto !important} } /* --- K-2) 記事カード（parts131415_blog）--- */ /* ★左右の余白はサイトの節（.od-sec）と同じ `clamp(1.5rem,6vw,7rem)` を持たせる。 上下は 0（前後のフリーHTMLの節が持っているため）。 ※パーツの `padding:150px 0` は上下が二重になるので消すが、**左右まで0にすると スマホでカードが画面端に張り付く**（実測 414px: カード左端 0px・右端 15px＝はみ出し）。 受領は節の padding＋`.row` の負マージン＋`.col` の padding で カード端がちょうど節の余白位置に来る作り。 */ section[class*="parts131415_blog"]{padding:0 clamp(1.5rem,6vw,7rem) !important} /* ★`.bg-img` が付いた状態では詳細度がこちらのほうが高い（section+属性+クラス）。 左右の余白は上の指定と同じ値をここにも書く（こちらが勝つため）。 */ section[class*="parts131415_blog"].bg-img{background:transparent !important;background-image:none !important;padding:0 clamp(1.5rem,6vw,7rem) !important} section[class*="parts131415_blog"] .container-lg{max-width:1180px !important;margin:0 auto !important} section[class*="parts131415_blog"] .parts131415_blog_title_wrap{display:none !important} /* ★gap も0に戻す。skin §4-b が `gap:var(--dyn-gap)`（32px）を !important で当てており、 受領の「50%＋50%＋負のマージン」の組み方に 32px が足されて **1列に折り返していた**（実測）。 受領は gap を使わず、.col の padding（.85rem）で空きを作る。 */ section[class*="parts131415_blog"] .row{display:flex !important;flex-wrap:wrap !important;gap:0 !important;margin:0 -.85rem !important} section[class*="parts131415_blog"] .col{flex:0 0 100% !important;max-width:100% !important;padding:.85rem !important} @media(min-width:576px){section[class*="parts131415_blog"] .row-cols-sm-2>.col{flex:0 0 50% !important;max-width:50% !important}} @media(min-width:992px){section[class*="parts131415_blog"] .row-cols-lg-3>.col{flex:0 0 33.3333% !important;max-width:33.3333% !important}} section[class*="parts131415_blog"] .card{position:relative !important;background:rgba(252,249,243,.97) !important;border:1px solid rgba(188,153,96,.5) !important;border-radius:0 !important;height:100% !important;transition:transform .35s ease,box-shadow .35s ease !important} section[class*="parts131415_blog"] .card:hover{transform:translateY(-5px) !important;box-shadow:0 18px 38px rgba(58,38,28,.2) !important} section[class*="parts131415_blog"] .card-body{padding:0 !important;display:flex !important;flex-direction:column !important;height:100% !important} section[class*="parts131415_blog"] .parts131415_blog_thumbnail{width:100% !important;height:clamp(12.5rem,11rem + 8vw,14.5rem) !important;overflow:hidden !important;border-top:1px solid rgba(188,153,96,.45) !important;margin-top:auto !important} section[class*="parts131415_blog"] .parts131415_blog_thumbnail img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;transition:transform .6s ease !important} section[class*="parts131415_blog"] .card:hover .parts131415_blog_thumbnail img{transform:scale(1.06) !important} section[class*="parts131415_blog"] .card-title{font-family:'Cormorant Garamond',serif !important;color:#f7efe2 !important;background:var(--green,#2e4a3c) !important;align-self:flex-start !important;letter-spacing:.2em !important;text-transform:uppercase !important;font-size:.72rem !important;font-weight:600 !important;margin:1.15rem 1.35rem 0 !important;padding:.36rem .8rem !important;text-align:left !important} /* ★受領CSSが書いていない（＝既定のままでよい）プロパティを、パーツの＜style＞が上書きしてくる。 受領の姿に戻すために、ここだけは明示的に打ち消す（実測 2026-09-11）: ・`.container-lg{padding:0 50px}` … 受領は左右paddingなし（内容幅1180pxいっぱい） ・`.card{padding:45px 30px 40px}` … 受領は0。写真がカード幅いっぱいに来る作りなので、 これが残ると写真が内側に寄って別物になる ・`.card-text{height:55px;overflow:hidden}` … 受領は高さ固定なし。2行を超えるタイトルが 途中で切れてしまう */ section[class*="parts131415_blog"] .container-lg{padding:0 !important} section[class*="parts131415_blog"] .card{padding:0 !important} /* ★タイトルは **2行まで見せる**（ディレクター指示 2026-09-11）。 ・1行で切って「…」にするのではなく、2行に収まるものはそのまま全部見せる。 ・2行を超えたぶんだけ「…」で止める（`-webkit-line-clamp:2`）。 ★**2行ぶんの高さを常に確保する**のがポイント。写真は `margin-top:auto` でカードの下端に着くので、 1行のカードと2行のカードが混ざると本文の高さが変わり、**短いタイトルのカードだけ写真の上に 余白が空いて、写真の位置・高さが揃わない**（実測でそうなっていた）。 2行ぶん（line-height 1.7 × 2）を min-height で確保すれば、1行でも2行でもカードの高さが同じになり、 写真の上端がぴったり揃う。 ★パーツの＜style＞の `height:55px;overflow:hidden`（2行で問答無用に切る）は外したうえで、 この形にしている。`overflow:hidden` は「…」の表示に必要なので消さないこと。 */ section[class*="parts131415_blog"] .card-text{ height:auto !important; min-height:calc(1.7em * 2); white-space:normal !important; overflow:hidden !important; text-overflow:ellipsis; display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; } section[class*="parts131415_blog"] .card-body a{display:block !important;text-decoration:none !important;color:inherit !important} section[class*="parts131415_blog"] .card-text{font-family:var(--jp) !important;font-weight:600 !important;font-size:clamp(1.02rem,.96rem + .28vw,1.12rem) !important;line-height:1.7 !important;letter-spacing:.06em !important;color:var(--ink,#2b211c) !important;margin:var(--sp-hair) 1.35rem 1.5rem !important} /* ============================================================ F) CueZilla自動パンくずの非表示（R-10a） ------------------------------------------------------------ この案件は全下層ページのHTMLに自前パンくず（.od-bc・BreadcrumbList付き）を持っている。 実機ではCueZillaの parts231_breadcrumb が **それに加えて** 出力され、 ページ先頭に高さ51pxの帯が二重に入っていた（2026-09-10 実測 /blog・/work とも）。 固定ヘッダー（84px）の裏に隠れて見えないが、下層ヘッダーの位置を51px押し下げている。 トップ（/）には出力されないので、非表示にしても消えるパンくずは無い。 ============================================================ */ .parts231_breadcrumb{display:none !important} .parts-blog-ex-single_tag_wrap a{ color: #ffffff!important; }