/* R-18: 固定ヘッダーの実高さ（システム描画ページの潜り込み防止に使う）。 実値は BODY内JS が実測して --ot-hdr-h を上書きする。 */ :root{ --fixed-header-h: var(--ot-hdr-h,92px); } /* ===== 受領 helmet CSS（ページ横断で重複排除して結合） ===== */ /* ---- index ---- */ html { scroll-behavior: smooth; } @keyframes meshA { 0% { transform: translate3d(-22%,-16%,0) scale(1.05); } 33% { transform: translate3d(18%,10%,0) scale(1.4); } 66% { transform: translate3d(6%,-20%,0) scale(1.15); } 100% { transform: translate3d(-22%,-16%,0) scale(1.05); } } @keyframes meshB { 0% { transform: translate3d(24%,18%,0) scale(1.3); } 33% { transform: translate3d(-20%,-14%,0) scale(1); } 66% { transform: translate3d(-4%,22%,0) scale(1.22); } 100% { transform: translate3d(24%,18%,0) scale(1.3); } } @keyframes meshC { 0% { transform: translate3d(-8%,26%,0) scale(1); } 33% { transform: translate3d(20%,-18%,0) scale(1.35); } 66% { transform: translate3d(-24%,4%,0) scale(1.1); } 100% { transform: translate3d(-8%,26%,0) scale(1); } } @keyframes marqueeL { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes marqueeR { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } } @keyframes cmPulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes fvWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes meshDrift { 0% { background-position: 0% 50%, 100% 20%, 40% 100%, 50% 50%; } 50% { background-position: 35% 25%, 65% 65%, 12% 70%, 50% 50%; } 100% { background-position: 0% 50%, 100% 20%, 40% 100%, 50% 50%; } } @keyframes fvTextIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* __rwd-reset */ *, *::before, *::after { box-sizing: border-box; } img, video, svg { max-width: 100%; } body { margin:0; background:#050605; color:#F2F4F2; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif; line-height:1.95; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a { color:#3FBF58; text-decoration:none; } a:hover { color:#8AE0A6; } :focus-visible { outline:2px solid #3FBF58; outline-offset:3px; } @keyframes otRise { from { opacity:0; transform:translateY(18px);} to { opacity:1; transform:none; } } @keyframes otLine { from { transform:scaleX(0);} to { transform:scaleX(1);} } @media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation:none !important; transition:none !important; } html{scroll-behavior:auto;} } /* ---- work ---- */ span.line-chunk { display:inline-block; overflow-wrap:anywhere; word-break:normal; } /* ---- recruit-requirements ---- */ table.ot { width:100%; border-collapse:collapse; } table.ot th, table.ot td { text-align:left; vertical-align:top; padding:clamp(14px,1.6vw,22px) 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:clamp(14px,1.1vw,16px); line-height:1.9; } table.ot th { width:30%; min-width:150px; color:#3FBF58; font-weight:700; padding-right:20px; } table.ot td { color:#FFFFFF; font-weight:400; } @media (max-width: 620px){ table.ot th, table.ot td { display:block; width:auto; border-bottom:none; padding:6px 0; } table.ot tr { display:block; border-bottom:1px solid rgba(255,255,255,.14); padding:14px 0; } } /* ============================================================ ページ間で値が違ったセレクタの解決（union は初出優先で1本化するため明示的に分ける） table.ot は 募集概要（初出＝ベース）／会社概要／プライバシーの3種で padding・font-size・th幅 が違う。ベース以外はマーカークラスで当て直す。 ============================================================ */ table.ot.ot-tbl-info th, table.ot.ot-tbl-info td{ padding:clamp(18px,2.2vw,30px) 0; font-size:clamp(15px,1.4vw,20px); } table.ot.ot-tbl-info th{ width:28%; min-width:140px; } table.ot.ot-tbl-pp th{ width:28%; min-width:140px; } @media (max-width: 620px){ table.ot.ot-tbl-info th, table.ot.ot-tbl-info td{ padding:6px 0; } } /* ============================================================ 本文ラッパー（受領の
相当） ※受領の全画面固定背景 div（position:fixed;z-index:0）は納品していないため z-index の積み増しは不要。地色は body{background:#050605} が担う。 ============================================================ */ .ot-main{display:block;position:relative;} /* 下層ページの導入文（.ot-lead_section / .ot-lead_wrap / .ot-lead）は 受領が parts210_* のクラス名を借りていただけで CSS は当たっていない（意匠はインラインstyle）。 CueZillaテーマとの衝突を避けるため改名しただけなので、ここに規則は不要（R-20）。 */ /* ============================================================ 共通ヘッダー（02_header.html） 受領 SiteHeader.dc.html の {{ }} 束縛インラインstyle をクラス化（R-7） ・PC（≥1080px）＝グローバルナビ＋プルダウン（受領はJSのhover state → CSS :hover / :focus-within） ・SP（≤1079px）＝ハンバーガー＋全画面ドロワー（開閉と現在地は BODY内JS） ・受領 renderVals の headerBg は常に #FFFFFF（スクロールでも変わらない） ============================================================ */ :root{ --ot-hdr-h:92px; } .ot-hd{position:fixed;top:0;left:0;right:0;z-index:120;background:#FFFFFF;box-shadow:0 -16px 0 0 #FFFFFF;transition:background .3s ease;} /* PC / SP の出し分け（受領 sc-if isWide / isNarrow ＝ 境界1080px と同値） display:contents なのでラッパーはレイアウトに影響しない */ .ot-only-wide{display:contents;} .ot-only-narrow{display:none;} @media (max-width:1079px){ .ot-only-wide{display:none;} .ot-only-narrow{display:contents;} } /* ハンバーガー */ .ot-burger{width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:transparent;border:1px solid rgba(10,12,10,.25);color:#0A0C0A;cursor:pointer;align-self:center;position:relative;} .ot-bar{position:absolute;display:block;width:22px;height:2px;background:#3FBF58;} .ot-bar-t{transform:translateY(-7px);transition:transform .28s ease;} .ot-bar-m{opacity:1;transition:opacity .2s ease;} .ot-bar-b{transform:translateY(7px);transition:transform .28s ease;} .ot-burger[aria-expanded="true"] .ot-bar-t{transform:translateY(0) rotate(45deg);} .ot-burger[aria-expanded="true"] .ot-bar-m{opacity:0;} .ot-burger[aria-expanded="true"] .ot-bar-b{transform:translateY(0) rotate(-45deg);} /* PCナビのプルダウン（受領は onMouseEnter/Leave の state → CSSに置換） */ .ot-dd{position:relative;display:flex;align-items:center;} .ot-dd-menu{position:absolute;top:100%;left:-14px;min-width:230px;display:none;flex-direction:column;background:#FFFFFF;border-top:2px solid #3FBF58;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:6px 0;z-index:5;} .ot-dd-menu-wide{min-width:250px;} .ot-dd:hover > .ot-dd-menu, .ot-dd:focus-within > .ot-dd-menu{display:flex;} /* SPドロワー（高さは BODY内JS が実測して --ot-hdr-h を更新） */ .ot-drawer{position:fixed;left:0;right:0;top:var(--ot-hdr-h,92px);bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:8px clamp(14px,2.4vw,34px) 40px;border-top:1px solid rgba(10,12,10,.1);background:#FFFFFF;z-index:119;} .ot-drawer[hidden]{display:none;} .ot-acc{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;} .ot-acc-mk{display:block;width:8px;height:8px;border-right:2px solid #3FBF58;border-bottom:2px solid #3FBF58;transform:translateY(-3px) rotate(45deg);transition:transform .25s ease;} .ot-acc[aria-expanded="true"] .ot-acc-mk{transform:translateY(-2px) rotate(-135deg);} .ot-sub{display:flex;flex-direction:column;padding-bottom:8px;} .ot-sub[hidden]{display:none;} /* 現在地（BODY内JS が pathname から .is-cur を付ける） */ .ot-hd .ot-only-wide a.is-cur{color:#3FBF58;} .ot-drawer a.is-cur{color:#3FBF58;} /* ============================================================ 共通フッター（03_footer.html） 受領 SiteFooter.dc.html の {{ navCols }} / {{ navDivider }}（幅1080pxで切替）をクラス化 ============================================================ */ .ot-fnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px 24px;align-content:start;} .ot-fnav-link{color:#FFFFFF;font-size:13px;padding:11px 0;min-height:44px;display:flex;align-items:center;border-bottom:none;transition:color .25s ease;} @media (max-width:1079px){ .ot-fnav{grid-template-columns:1fr;} .ot-fnav-link{border-bottom:1px solid rgba(255,255,255,.12);} } /* ============================================================ TOP：FVスライダー（受領は state で opacity / ドット色を切替 → クラス化） ・1枚目は HTML 側に .is-on を付けてある＝JSが動かなくても1枚は必ず見える ============================================================ */ .ot-fv-img{opacity:0;transition:opacity 1.4s ease;} .ot-fv-img.is-on{opacity:1;} .ot-fv-dot{width:34px;height:3px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.45);transition:background .4s ease;} .ot-fv-dot.is-on{background:#3FBF58;} /* ============================================================ TOP：TVCM の再生前オーバーレイ（受領は state で opacity / pointer-events を切替） ============================================================ */ .ot-cm-ov{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(5,6,5,.68);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1;pointer-events:auto;transition:opacity .45s ease;} .ot-cm-ov.is-playing{opacity:0;pointer-events:none;} /* ============================================================ TOP：CTA（下線が右へ伸びるホバー） 受領は onMouseEnter/Leave のJSだったが data-cta-rest と data-cta-hover が全箇所同値 ＝色は変わらない → CSSの :hover / :focus-visible で同じ挙動になる ============================================================ */ .ot-cta:hover [data-cta-line], .ot-cta:focus-visible [data-cta-line]{transform:translateX(20px)!important;} .ot-cta:hover [data-cta-tick], .ot-cta:focus-visible [data-cta-tick]{transform:translateX(20px) rotate(34deg)!important;} /* ============================================================ TOP：ブログ帯の前後ブロック（CueZillaパーツが出せない意匠の退避先） ・見出し＋リード文 → 05b 末尾（.ot-blog-head） ・「記事一覧」ボタン → 05c 先頭（.ot-blog-foot） ・あいだの余白はパーツ側の上下 padding を 29_override.css で 0 にして辻褄を合わせる ============================================================ */ .ot-blog-head{position:relative;background:#050605;padding:clamp(70px,10vw,150px) clamp(16px,3vw,56px) 0;} .ot-blog-head-inner{max-width:1500px;margin:0 auto;} .ot-blog-foot{position:relative;background:#050605;padding:0 clamp(16px,3vw,56px) clamp(70px,10vw,150px);} .ot-blog-foot-inner{max-width:1500px;margin:0 auto;} /* ============================================================ 応募フォームのフッターブロック内の注記（04e） ============================================================ */ .ot-formnote{position:relative;background:#050605;padding:0 clamp(16px,3vw,56px) clamp(40px,6vw,90px);} .ot-formnote-inner{max-width:900px;margin:0 auto;} /* ============================================================ TOPの「色が戻る」演出（data-reveal-root）の JS不動フォールバック 受領は帯を translateX(±101%) で隠してJSで出す＝JSが動かないと写真が見えない。 BODY内JS が html に .ot-js を付けるまでは素の可視状態にしておく（R-4）。 ============================================================ */ html:not(.ot-js) [data-band]{transform:none!important;} html:not(.ot-js) [data-reveal="colorwrap"]{filter:none!important;} html:not(.ot-js) [data-reveal="shade"]{opacity:0!important;} /* ============================================================ インライン animation / transition の退避クラス （CueZillaはフリーコード本文の style から animation/transition を落とす） ============================================================ */ .ota1{animation:fvWipe .72s cubic-bezier(.76,0,.24,1) .15s both;} .ota2{animation:fvTextIn .5s ease .82s both;} .ota3{transition:filter 1.1s ease;} .ota4{transition:transform 1.1s cubic-bezier(.76,0,.24,1) 0s;} .ota5{transition:opacity 1.1s ease;} .ota6{transition:transform 1.1s cubic-bezier(.76,0,.24,1) .14s;} .ota7{transition:color .3s ease;} .ota8{transition:transform .3s ease;} .ota9{animation:meshDrift 22s ease-in-out infinite;} .ota10{animation:marqueeL 140s linear infinite;} .ota11{animation:cmPulse 2.6s ease-out infinite;} .ota12{animation:marqueeR 140s linear infinite;} .ota13{transition:background .3s ease,color .3s ease;} /* ============================================================ style-hover / style-focus から抽出したホバー/フォーカス（受領の擬似hover再現） ============================================================ */ .oth1:hover{color:#3FBF58!important} .oth2:hover{background:#3FBF58!important;color:#04140A!important} .oth3:hover{background:#FFFFFF!important;color:#3FBF58!important} .oth4:hover{background:rgba(63,191,88,.55)!important;border-color:#3FBF58!important} .oth5:hover{color:#008F11!important} .oth6:hover{background:#FFFFFF!important;color:#0A0C0A!important} .oth7:hover{color:#8AE0A6!important} /* ============================================================ レスポンシブ束縛（受領 renderVals が幅で変えていた style）の抽出 境界＝1080px（wide/narrow）と 768px（mid）＝受領の判定と同値 ============================================================ */ @media (max-width:1079px){ .otr1{flex-direction:column!important;align-items:stretch!important;padding-top:var(--ot-hdr-h,92px)!important} .otr2{position:relative!important;height:auto!important;aspect-ratio:16 / 9!important;flex:0 0 auto!important} .otr3{flex:1 1 auto!important;justify-content:center!important;padding:clamp(24px,4vw,40px) clamp(16px,3vw,40px)!important} .otr4{font-size:clamp(18px,4.4vw,40px)!important} .otr5{font-size:clamp(23px,6.1vw,56px)!important} .otr6{font-size:clamp(18px,4.1vw,38px)!important} .otr7{font-size:clamp(13px,2.2vw,20px)!important} .otr9{order:-1!important} .otr10{grid-template-columns:1fr!important} .otr11{position:static!important} .otr12{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media (max-width:767px){ .otr5{font-size:min(5.8vw,28px)!important;white-space:nowrap!important} .otr8{grid-template-columns:1fr!important} .otr12{grid-template-columns:1fr!important} } /* ===== 21_add.css ===== */ /* ============================================================ 21_add.css — デザイナー作 add.css（受領データ/add.css）をそのまま納品 ・受領では下層の動的4ページ（ブログ／施工実績／お問い合わせ／応募フォーム）だけが読み込んでいた。 ・CueZillaの追加CSS欄はサイト共通なのでTOPのパーツにも当たる。 冒頭コメントの配色（アクセント #00EB25 ほか）は受領HTMLの確定配色（#3FBF58）と食い違うため、 色だけを 29_override.css で確定配色へ揃えている（構造・余白はこのファイルが正）。 /* KEEP: デザイナー作の正本。削除・整理しない（CLAUDE.md 共有ファイル編集ルール） */ ============================================================ */ /* === add.css 貼り付け ここから === */ /* 有限会社オーティ企画｜トップページ 動的セクション（NEWS帯／記事カード）用 */ /* テーマ配色：背景 #0B0C0B・面 #0F110F/#141714・アクセント #00EB25 / #00EB25 */ /* --------------------------------------------------------------- 1. 新着情報（NEWS帯）＝ design-parts-52 系 直値上書き：ラベル背景 #bf172e → #00EB25 ／ .bg-color #dddddd → #101210 --------------------------------------------------------------- */ [class*="design-parts-52"] { background: #101210 !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; } [class*="design-parts-52"] .container { padding: 0 clamp(16px, 3vw, 56px) !important; max-width: none !important; } [class*="design-parts-52"] .content { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: clamp(12px, 2vw, 32px) !important; /* padding: 14px 0 !important;*/ } [class*="design-parts-52"] h4.banner-area { margin: 0 !important; background: #00EB25 !important; color: #04140A !important; font-family: "Barlow Condensed", "Noto Sans JP", sans-serif !important; font-weight: 700 !important; letter-spacing: .24em !important; font-size: 14px !important; line-height: 1.6 !important; padding: 8px 22px !important; border-radius: 0 !important; } [class*="design-parts-52"] ul { list-style: none !important; margin: 0 !important; padding: 0 !important; flex: 1 1 320px !important; min-width: 0 !important; } [class*="design-parts-52"] li { min-height: 44px !important; display: flex !important; align-items: center !important; } [class*="design-parts-52"] li a { display: flex !important; align-items: center !important; width: 100% !important; color: #EDEFED !important; text-decoration: none !important; } [class*="design-parts-52"] li a:hover, [class*="design-parts-52"] li a:focus-visible { color: #00EB25 !important; } [class*="design-parts-52"] .parts-52-textarea { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px 20px !important; width: 100% !important; } [class*="design-parts-52"] .parts-52-textarea .date { font-family: "Barlow Condensed", "Noto Sans JP", sans-serif !important; letter-spacing: .12em !important; font-size: 13px !important; color: #8FA697 !important; } [class*="design-parts-52"] .parts-52-textarea .d-inline-block { font-size: 14px !important; line-height: 1.7 !important; max-width: 100% !important; } /* PC（992px以上）で 1行＝1件・高さ60px */ @media (min-width: 992px) { [class*="design-parts-52"] li { min-height: 60px !important; } [class*="design-parts-52"] .parts-52-textarea { flex-wrap: nowrap !important; } [class*="design-parts-52"] .parts-52-textarea .d-inline-block { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* --------------------------------------------------------------- 2. 記事カード（3列カードグリッド）＝ parts131415_blog 系 直値上書き：h2 #ffffff → テーマ色 ／ .bg-img の元サイト背景画像 → 単色面 --------------------------------------------------------------- */ [class*="parts131415_blog"] { background-image: none !important; background: #0F110F !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; /* padding: clamp(70px, 10vw, 150px) clamp(16px, 3vw, 56px) !important;*/ } [class*="parts131415_blog"] .container-lg { max-width: 1500px !important; margin: 0 auto !important; padding: 0 !important; } [class*="parts131415_blog"] .parts131415_blog_title_wrap { margin-bottom: clamp(30px, 4vw, 56px) !important; text-align: left !important; } [class*="parts131415_blog"] .parts131415_blog_title_wrap h2 { color: #F2F4F2 !important; font-weight: 700 !important; font-size: clamp(24px, 3.6vw, 46px) !important; line-height: 1.5 !important; margin: 0 0 18px !important; } [class*="parts131415_blog"] .parts131415_blog_title_wrap p { color: #CFD6CF !important; font-size: clamp(14px, 1.1vw, 16px) !important; line-height: 1.95 !important; max-width: 760px !important; margin: 0 !important; } [class*="parts131415_blog"] .card { background: #141714 !important; border: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 0 !important; height: 100% !important; } [class*="parts131415_blog"] .card-body { padding: clamp(18px, 1.8vw, 26px) !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } [class*="parts131415_blog"] h5.card-title { margin: 0 !important; font-family: "Barlow Condensed", "Noto Sans JP", sans-serif !important; letter-spacing: .18em !important; font-size: 12px !important; font-weight: 700 !important; color: #00EB25 !important; } [class*="parts131415_blog"] .card-body a { display: flex !important; flex-direction: column !important; gap: 14px !important; color: #EDEFED !important; text-decoration: none !important; } [class*="parts131415_blog"] .card-body a:hover, [class*="parts131415_blog"] .card-body a:focus-visible { color: #8AE0A6 !important; } [class*="parts131415_blog"] p.card-text { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.8 !important; } [class*="parts131415_blog"] .parts131415_blog_thumbnail { background: #0B0C0B !important; overflow: hidden !important; } [class*="parts131415_blog"] .parts131415_blog_thumbnail img { /* width: 100% !important; height: 240px !important; object-fit: cover !important; display: block !important;*/ } @media (max-width: 991.98px) { [class*="parts131415_blog"] .parts131415_blog_thumbnail img { height: 215px !important; } } @media (max-width: 575.98px) { [class*="parts131415_blog"] .parts131415_blog_thumbnail img { height: 205px !important; } } /* === add.css 貼り付け ここまで === */ /* === add.css 貼り付け（下層ページ 動的パーツ）ここから === */ /* 施工実績＝parts228系 ／ ブログ＝parts222系 ／ お問い合わせ＝parts213系 ／ 応募＝parts219系 */ /* ----------------------------------------------------------- 3. 施工実績一覧 ＝ parts228 系 ----------------------------------------------------------- */ .parts228_section { background: transparent !important; padding: 0 clamp(16px, 3vw, 56px) clamp(70px, 10vw, 150px) !important; } .parts228_wrap { max-width: 1500px !important; margin: 0 auto !important; } .parts228_post_list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 2.6vw, 40px) !important; } @media (max-width: 991.98px) { .parts228_post_list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 575.98px) { .parts228_post_list { grid-template-columns: 1fr !important; } } .parts228_post_wrap { background: #141714 !important; border: 1px solid rgba(255,255,255,.07) !important; display: flex !important; flex-direction: column !important; } .parts228_post_img { background: #0B0C0B !important; overflow: hidden !important; } .parts228_post_img a { display: block !important; } .parts228_post_img img { width: 100% !important; height: 240px !important; object-fit: cover !important; display: block !important; } @media (max-width: 575.98px) { .parts228_post_img img { height: 210px !important; } } .parts228_post_status { padding: clamp(16px,1.8vw,24px) clamp(16px,1.8vw,24px) 0 !important; } .parts228_post_date { font-family: "Barlow Condensed", "Noto Sans JP", sans-serif !important; letter-spacing: .12em !important; font-size: 13px !important; color: #8FA697 !important; } .parts228_post_title-excerpt { padding: 10px clamp(16px,1.8vw,24px) clamp(18px,2vw,26px) !important; } .parts228_post_title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.8 !important; color: #EDEFED !important; } .parts228_post_wrap a { color: #EDEFED !important; text-decoration: none !important; } .parts228_post_wrap a:hover, .parts228_post_wrap a:focus-visible { color: #8AE0A6 !important; } .parts-blog-ex-tag_wrap { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 clamp(16px,1.8vw,24px) clamp(16px,1.8vw,24px) !important; } .parts-blog-ex_tag { font-size: 11px !important; letter-spacing: .08em !important; color: #00EB25 !important; border: 1px solid rgba(0,235,37,.5) !important; padding: 4px 10px !important; line-height: 1.6 !important; } .parts228_post_excerpt { margin: 0 !important; padding: 0 clamp(16px,1.8vw,24px) clamp(18px,2vw,26px) !important; color: #A9B2A9 !important; font-size: 13px !important; line-height: 1.9 !important; } .parts228_pagenation { list-style: none !important; margin: clamp(40px,5vw,72px) 0 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } .parts228_pagenation a, .parts228_pagenation span { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px !important; font-size: 13px !important; border: 1px solid rgba(255,255,255,.18) !important; color: #EDEFED !important; text-decoration: none !important; } .parts228_pagenation .pagination_num.current a, .parts228_pagenation .pagination_num.current span { background: #00EB25 !important; border-color: #00EB25 !important; color: #04140A !important; font-weight: 700 !important; } .parts228_pagenation a:hover { border-color: #00EB25 !important; color: #00EB25 !important; } /* ----------------------------------------------------------- 4. ブログ一覧＋サイドバー ＝ parts222 系 ----------------------------------------------------------- */ .parts222_section { background: transparent !important; padding: 0 clamp(16px,3vw,56px) clamp(70px,10vw,150px) !important; } .parts222_section > h2 { max-width: 1500px !important; margin: 0 auto clamp(30px,4vw,56px) !important; font-size: clamp(24px,3.6vw,46px) !important; font-weight: 700 !important; color: #F2F4F2 !important; line-height: 1.5 !important; } .parts222_wrap { max-width: 1500px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0,1fr) 320px !important; gap: clamp(28px,4vw,64px) !important; align-items: start !important; } @media (max-width: 1199.98px) { .parts222_wrap { grid-template-columns: 1fr !important; } } .parts222_post_list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: clamp(20px,2.4vw,36px) !important; } @media (max-width: 575.98px) { .parts222_post_list { grid-template-columns: 1fr !important; } } .parts222_post_wrap { background: #141714 !important; border: 1px solid rgba(255,255,255,.07) !important; display: flex !important; flex-direction: column !important; color: #EDEFED !important; text-decoration: none !important; } .parts222_post_wrap:hover, .parts222_post_wrap:focus-visible { color: #8AE0A6 !important; } .parts222_post_img { background: #0B0C0B !important; overflow: hidden !important; } .parts222_post_img img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; display: block !important; } .parts222_post_status { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px 16px !important; padding: clamp(16px,1.8vw,24px) clamp(16px,1.8vw,24px) 0 !important; } .parts222_post_date { font-family: "Barlow Condensed", "Noto Sans JP", sans-serif !important; letter-spacing: .12em !important; font-size: 13px !important; color: #8FA697 !important; } .parts222_post_category { font-size: 11px !important; letter-spacing: .08em !important; color: #00EB25 !important; border: 1px solid rgba(0,235,37,.5) !important; padding: 3px 10px !important; } .parts222_post_title-excerpt { padding: 10px clamp(16px,1.8vw,24px) clamp(18px,2vw,26px) !important; } .parts222_post_title { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.8 !important; } .parts222_pagenation { list-style: none !important; margin: clamp(40px,5vw,72px) 0 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } .parts222_pagenation a, .parts222_pagenation span { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px !important; font-size: 13px !important; border: 1px solid rgba(255,255,255,.18) !important; color: #EDEFED !important; text-decoration: none !important; } .parts222_pagenation .pagination_num.current a, .parts222_pagenation .pagination_num.current span { background: #00EB25 !important; border-color: #00EB25 !important; color: #04140A !important; font-weight: 700 !important; } .parts222_pagenation a:hover { border-color: #00EB25 !important; color: #00EB25 !important; } .parts222_sidebar { display: flex !important; flex-direction: column !important; gap: clamp(24px,3vw,40px) !important; } .parts222_sidebar_wrap h3 { margin: 0 0 14px !important; background: rgba(255,255,255,.055) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .16em !important; color: #00EB25 !important; padding: 12px 16px !important; } .parts222_sidebar_wrap ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .parts222_sidebar_wrap li { border-bottom: 1px solid rgba(255,255,255,.12) !important; } .parts222_sidebar_wrap li a { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 14px 4px !important; min-height: 44px !important; color: #EDEFED !important; text-decoration: none !important; } .parts222_sidebar_wrap li a:hover, .parts222_sidebar_wrap li a:focus-visible { color: #8AE0A6 !important; } .parts222_sidebar_date { font-family: "Barlow Condensed", "Noto Sans JP", sans-serif !important; letter-spacing: .12em !important; font-size: 12px !important; color: #8FA697 !important; } .parts222_sidebar_post_title { margin: 0 !important; font-size: 14px !important; line-height: 1.7 !important; } .parts222_sidebar_wrap.category_post_count li a { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } .parts222_sidebar_post_category { margin: 0 !important; font-size: 14px !important; } .parts222_sidebar_post_category_count { font-family: "Barlow Condensed", "Noto Sans JP", sans-serif !important; font-size: 12px !important; border: 1px solid rgba(255,255,255,.2) !important; padding: 2px 9px !important; color: #A9B2A9 !important; } /* ----------------------------------------------------------- 5. フォーム ＝ parts213 系（お問い合わせ）／ parts219 系（応募） 装飾枠は足さない：入力欄だけのフラット ----------------------------------------------------------- */ .contact_section { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .parts213_section_form, .parts219_section_form { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .parts213_form_wrap, .parts219_form_wrap { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; max-width: 900px !important; margin: 0 auto !important; } .parts213_form_wrap dl, .parts219_form_wrap dl { margin: 0 0 clamp(20px,2.4vw,30px) !important; padding: 0 !important; border: none !important; } .parts213_form_wrap dt, .parts219_form_wrap dt { margin: 0 0 8px !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 10px !important; font-size: 14px !important; font-weight: 700 !important; color: #F2F4F2 !important; } .parts213_form_wrap dd, .parts219_form_wrap dd { margin: 0 !important; padding: 0 !important; } .parts213_form_wrap .required, .parts219_form_wrap .required { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; color: #04140A !important; background: #00EB25 !important; padding: 2px 8px !important; } .parts213_form_wrap .attention, .parts219_form_wrap .attention { display: block !important; margin-top: 4px !important; font-size: 12px !important; font-weight: 400 !important; color: #FF7A6B !important; line-height: 1.8 !important; } .parts213_form_wrap input[type="text"], .parts213_form_wrap input[type="email"], .parts213_form_wrap input[type="tel"], .parts213_form_wrap textarea, .parts219_form_wrap input[type="text"], .parts219_form_wrap input[type="email"], .parts219_form_wrap input[type="tel"], .parts219_form_wrap textarea { width: 100% !important; box-sizing: border-box !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 0 !important; color: #F2F4F2 !important; font-family: inherit !important; font-size: 15px !important; line-height: 1.8 !important; padding: 13px 14px !important; min-height: 48px !important; } .parts213_form_wrap textarea, .parts219_form_wrap textarea { min-height: 180px !important; resize: vertical !important; } .parts213_form_wrap input::placeholder, .parts219_form_wrap input::placeholder, .parts219_form_wrap textarea::placeholder, .parts213_form_wrap textarea::placeholder { color: #6E7A6E !important; } .parts213_form_wrap input:focus, .parts213_form_wrap textarea:focus, .parts219_form_wrap input:focus, .parts219_form_wrap textarea:focus { outline: 2px solid #00EB25 !important; outline-offset: 1px !important; } .parts219_form_wrap .form_address dd { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } .parts219_form_wrap .form_address dd > span { color: #A9B2A9 !important; font-size: 14px !important; } .parts219_form_wrap .form_address input.zip { width: 140px !important; flex: 0 0 auto !important; } .parts219_form_wrap .form_address input[name="address"] { flex: 1 1 260px !important; width: auto !important; } .parts219_form_wrap input[type="file"] { color: #DCE2DC !important; font-size: 14px !important; min-height: 44px !important; } .parts213_form_wrap label, .parts219_form_wrap label { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; margin-right: 18px !important; color: #F2F4F2 !important; font-size: 14px !important; } .parts213_form_wrap .error, .parts219_form_wrap .error { margin: 6px 0 0 !important; color: #FF7A6B !important; font-size: 12px !important; } .contact_submit { margin-top: clamp(24px,3vw,40px) !important; } .contact_submit input[type="submit"] { -webkit-appearance: none !important; appearance: none !important; background: transparent !important; border: 1px solid #00EB25 !important; border-radius: 0 !important; color: #F2F4F2 !important; font-family: inherit !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: .1em !important; padding: 15px 44px !important; min-height: 48px !important; cursor: pointer !important; transition: background .25s ease, color .25s ease !important; } .contact_submit input[type="submit"]:hover, .contact_submit input[type="submit"]:focus-visible { background: #00EB25 !important; border-color: #00EB25 !important; color: #04140A !important; } /* === add.css 貼り付け（下層ページ 動的パーツ）ここまで === */ /* /KEEP */ /* ===== 29_override.css ===== */ /* ============================================================ 29_override.css — CueZilla標準テーマ／自動描画パーツへの上書き（案件固有・R-30） ★skin（cuezilla-skin.css）は不採用（cz-judgment §3）。 デザイナー作 add.css（21_add.css）が動的パーツを !important で自前フルstyle済みで、 skin を足すと結合順（site → add → skin → override）で skin が後勝ちして意匠を壊すため。 ============================================================ */ /* ---- 固定要素・stickyが効くようにする（theme_default 対策） ------------------- ① body{overflow-x:hidden} がスクロールコンテナを作り position:sticky を殺す → clip にする （教訓 cuezilla-sticky-header-fix。受領も body に overflow-x:hidden を持っている） ② html,body{height:100%} で箱が1画面で止まる → auto に戻す */ html, body{ height:auto!important; min-height:100%; } body{ overflow-x:clip!important; } /* ---- CueZilla自動パンくずは全ページ非表示 -------------------------------------- 受領デザインが各ページに独自のパンくず（