CLAS サーキュラーエコノミー推進キャンペーン

/* ================================================================ CLAS × サーキュラーエコノミー推進キャンペーン — Tag Page LP CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください prefix: .ce- 構成の踏襲元: weekly-sale-tag-page.css / autumn-winter-earlybird-tag-page.css 配色は社内ブランドトークン（design.md）に準拠: 白ベース／ Terracotta(#D96C45)はCTA等ごく小面積のみ／Green(#3A8E7B)は文字色アクセントのみ。 ★重要（v2-FIX踏襲）: 商品カードを挟んで複数チャンクに分割入稿すると、 .ce-root の外側に出るチャンクが発生し、.ce-root 依存のCSS変数・ 子孫セレクタが効かなくなる事象が別ページで確認されている。そのため: - CSS変数は :root （ページ全体）に定義し、.ce-root の有無に依存しない - セクション単位のスタイルは `.ce-root .foo` ではなく `.foo` の 直接セレクタで書く（祖先関係を要求しない） - 全称リセットは `.ce-root *` ではなく `[class*="ce-"]` 自身に効かせる ================================================================ */ /* ---------------------------------------------------------------- 記事ページの本文カラム制約を解除（★最重要・2026-09-10確認の既知の罠） main.article_detail は現行テンプレートで実測768px固定幅+overflow:hidden。 これを解除しないと、Hero/背景色セクションにどんな width/margin を 指定しても768pxの外側が問答無用でクリップされ、一切反映されない。 ---------------------------------------------------------------- */ main.article_detail { overflow: visible !important; } /* ---------------------------------------------------------------- CLAS 既存ページ側 要素の強制非表示 ---------------------------------------------------------------- */ [class*="ProductIntroduction__section"] { background: transparent !important; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; } [class*="ProductIntroduction__section"] > *:not([class*="htmlContainer"]) { display: none !important; height: 0 !important; overflow: hidden !important; } [class*="htmlContainer"] { padding: 0 !important; margin: 0 !important; overflow: visible !important; } [class*="ProductListPage__stripeBackground"], [class*="SearchCondition"], [class*="CategoryList"], [class*="CategorySection"], [class*="CategoryBanner"], [class*="CategorySelector"], [class*="CategoryNavigation"], [class*="CategoryTree"], [class*="ViewedItem"], [class*="CheckedItem"], [class*="RecentItem"], [class*="WatchedItem"], [class*="BrowsedItem"] { display: none !important; } /* ---------------------------------------------------------------- FV上部の余白対策 ---------------------------------------------------------------- */ body *:has(> [data-tag-page="ce-circular-economy"]) { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } body *:has(> * > [data-tag-page="ce-circular-economy"]) { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } body *:has(> * > * > [data-tag-page="ce-circular-economy"]) { padding-top: 0 !important; margin-top: 0 !important; } /* ---------------------------------------------------------------- 記事タイトル・更新日の重複表示を非表示 ★重要: .TitleComponent は記事重複タイトル(H1)専用ではなく、 「商品セクション」機能側で編集者が入力する小見出し(H2等)にも 同じクラスが使い回される共通コンポーネント。無条件にdisplay:noneにすると 商品セクションの小見出しまで消える（実機/article/2659で確認済み、 2026-09-14訂正）。data-size属性でH1だけに絞る。 ---------------------------------------------------------------- */ .TitleComponent[data-size="h1"] { display: none !important; } .datetime { display: none !important; } /* ---------------------------------------------------------------- 変数（:root＝ページ全体に定義。design.md準拠のブランドトークン） ---------------------------------------------------------------- */ :root { --ce-primary: #D96C45; /* Terracotta — CTA等ごく小面積のみ */ --ce-primary-dark: #C45A35; --ce-primary-light: #FDF0EC; --ce-secondary: #4F8CEE; /* 元は#3A8E7B(グリーン)。2026-09-16指示で青に統一 */ --ce-secondary-dark:#4F8CEE; /* 元は#2E7565(濃いグリーン)。2026-09-16指示で青に統一 */ --ce-secondary-light:#E8F4F0; --ce-navy: #2D312F; --ce-black: #323630; --ce-text: #323630; --ce-sub: #646B61; --ce-muted: #979E94; --ce-border: #e8e8e8; --ce-white: #ffffff; --ce-warm-bg: #f2f4f1; /* ベージュ系背景は全てこの色に統一（2026-09-16指示、当初F7FFEBから再変更） */ --ce-badge-blue: #4F8CEE; /* 割引バッジの楕円ベタ色（2026-09-16指示、共通箇所は全て同色） */ } /* ---------------------------------------------------------------- 全称リセット・タイポグラフィベース ---------------------------------------------------------------- */ [class*="ce-"] { box-sizing: border-box; font-family: futura-pt, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: var(--ce-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class*="ce-"]::before, [class*="ce-"]::after { box-sizing: border-box; } .ce-root { line-height: 1.8; font-weight: 400; letter-spacing: calc(1em * 3 / 100); } .ce-root, .ce-root * { margin: 0; padding: 0; } .ce-root img { max-width: 100%; display: block; } .ce-root a { color: inherit; text-decoration: none; } .ce-root ul { list-style: none; } .ce-root p { margin: 0; } [class*="ce-"] img { max-width: 100%; display: block; } [class*="ce-"] a { color: inherit; text-decoration: none; } [class*="ce-"] ul { list-style: none; margin: 0; padding: 0; } [class*="ce-"] p { margin: 0; } /* ---------------------------------------------------------------- 共通: Eyebrow / H2 / Lead ---------------------------------------------------------------- */ .ce-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--ce-secondary) !important; margin-bottom: 12px; } .ce-h2 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 400; color: var(--ce-black) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); margin-bottom: 18px; border: none !important; padding-bottom: 0 !important; padding-left: 0 !important; } .ce-h2::before, .ce-h2::after { display: none !important; content: none !important; } .ce-h2--center { text-align: center; } .ce-lead { font-size: 13px; font-weight: 400; line-height: 2.1; color: var(--ce-sub); letter-spacing: calc(1em * 4 / 100); max-width: 700px; } /* ---------------------------------------------------------------- Framing Band → 黒帯・テキストは削除。 PCは元の高さ(40px)を余白として保持、SPはトルツメ（高さ0）。 ---------------------------------------------------------------- */ .ce-framing { height: 0; } @media (min-width: 768px) { .ce-framing { height: 40px; } } /* ---------------------------------------------------------------- Hero — PC/SP画像はplain <img>2枚 + CSSのdisplay切替 実画像サイズ: PC 3642×1620 / SP 1337×1604（sipsで実測、aspect-ratio一致） PC幅は参照ページ https://clas.style/article/2659 の .ogg-hero と同じ max-width: 1000px に統一（getComputedStyleで実測確認済み） ---------------------------------------------------------------- */ .ce-hero { position: relative !important; overflow: hidden !important; background: var(--ce-warm-bg); padding: 0 !important; margin: 0 !important; min-height: 0; aspect-ratio: 1337 / 1604; } section[aria-label^="サーキュラーエコノミー推進キャンペーン"] { position: relative !important; overflow: hidden !important; isolation: isolate; } .ce-hero__bg { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 0 !important; } .ce-hero__bg img.ce-hero__img { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; max-width: none !important; margin: 0 !important; } /* SP: 実画像サイズ(1337x1604)基準。PC画像は非表示 */ .ce-hero__bg img.ce-hero__img--pc { display: none !important; } .ce-hero__bg img.ce-hero__img--sp { display: block !important; } /* PC: 実画像サイズ(3642x1620)に一致させる。SP画像は非表示 はみ出し（上限付き中央寄せ）: article_detail(768px)の外まで広げつつ 1000px（参照ページ https://clas.style/article/2659 の実測値）で頭打ちにする */ @media (min-width: 768px) { .ce-hero { width: 100vw !important; max-width: 1000px !important; margin-left: calc(50% - min(50vw, 500px)) !important; margin-right: calc(50% - min(50vw, 500px)) !important; aspect-ratio: 3642 / 1620; } .ce-hero__bg img.ce-hero__img--pc { display: block !important; } .ce-hero__bg img.ce-hero__img--sp { display: none !important; } } /* ---------------------------------------------------------------- Anchor Thumbs（3本柱それぞれの商品セクションへのショートカット） カテゴリ写真が存在しないため線画SVGアイコンを使用 ---------------------------------------------------------------- */ .ce-anchor-section { padding: 40px 20px 32px; background: var(--ce-white); text-align: center !important; border-bottom: 1px solid var(--ce-border); } .ce-thumbs { margin-top: 24px; display: flex; justify-content: center; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .ce-thumb { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; width: 120px; } .ce-thumb__circle { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--ce-warm-bg); border: 1px solid var(--ce-border); flex-shrink: 0; transition: transform .2s; } .ce-thumb__circle svg { width: 34px; height: 34px; color: var(--ce-secondary-dark); display: block; margin: 0 !important; } .ce-thumb:hover .ce-thumb__circle { transform: scale(1.05); } .ce-thumb__label { font-size: 12px; font-weight: 500; color: var(--ce-black) !important; text-align: center; letter-spacing: calc(1em * 4 / 100); line-height: 1.6; } @media (max-width: 600px) { .ce-anchor-section { padding: 32px 16px 24px; } .ce-thumbs { gap: 24px; } .ce-thumb { width: 96px; } .ce-thumb__circle { width: 72px; height: 72px; } .ce-thumb__circle svg { width: 28px; height: 28px; } } /* ---------------------------------------------------------------- Overview（キャンペーン概要） ---------------------------------------------------------------- */ .ce-overview-section { padding: 56px 40px; background: var(--ce-warm-bg) !important; text-align: center !important; /* はみ出し（完全フルブリード）: article_detail(768px)の外まで背景を広げる */ width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .ce-overview-section .ce-overview-lead, .ce-overview-lead { font-size: 14px; line-height: 2.0; color: var(--ce-sub); max-width: 640px; margin: 16px auto 0; text-align: center !important; } /* 保険: 万一クラス自体がCMS側で欠落しても親の.ce-overview-section配下のpは 中央寄せされるようにしておく（詳細度0,2,1で単一クラスの競合ルールに勝つ） */ .ce-overview-section p { text-align: center !important; } .ce-overview-meta { display: inline-block; margin-top: 20px; font-size: 12px; font-weight: 500; color: var(--ce-secondary-dark) !important; background: var(--ce-white); border: 1px solid var(--ce-secondary); border-radius: 20px; padding: 6px 18px; } @media (max-width: 600px) { .ce-overview-section { padding: 40px 20px; } } /* ---------------------------------------------------------------- Category Section（CIRCLEシリーズ / ブランド家具 / 環境配慮素材） ---------------------------------------------------------------- */ .ce-category { padding: 96px 40px 0; border-top: 1px solid var(--ce-border); max-width: 1100px; margin: 0 auto; } .ce-category__head { display: flex; align-items: baseline; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; margin-bottom: 8px; } .ce-category__badge { font-size: 15px; font-weight: 700; color: var(--ce-white) !important; background: var(--ce-badge-blue) !important; border-radius: 20px; padding: 5px 18px; letter-spacing: .02em; white-space: nowrap; } .ce-category .ce-lead { text-align: center !important; margin-left: auto; margin-right: auto; margin-bottom: 4px; } /* リード文の直後に来る要素＝通常は商品セクション機能側のウィジェット。 ただし.ce-category__image（商品カード直前の差し込み画像）がある場合は そちらに独自の余白を持たせたいので除外し、画像の直後の要素（＝ウィジェット） 側をゼロリセットする。 */ .ce-category .ce-lead + *:not(.ce-category__image) { margin-top: 0 !important; padding-top: 0 !important; } .ce-category .ce-category__image + * { margin-top: 0 !important; padding-top: 0 !important; } /* ---------------------------------------------------------------- 商品カード直前の差し込み画像 縦横比2.2:1 / object-position:center bottomで、画像上部（バナー等の 見せたくない部分）をなるべくトリミングして隠す設計（2026-09-16指示）。 ★注意: AR3.4まで上げた際、環境配慮素材のテーブル全体が見切れる事故が 発生（2026-09-16）。3枚とも主要被写体が全部入るかを実際に検証した上で 2.2に着地。「小さく」の要望が来ても、まず被写体が欠けないか検証してから ARを上げること（bottom基準の物体は視認できる下限がある）。 ★方針転換（2026-09-16）: 当初フルブリード（画面幅いっぱい）だったが、 「画面幅いっぱいでなくてよい。本文幅よりほんの少し広いだけでいい」と 要望変更。本文幅(1100px)よりひと回り広い1150px固定・中央寄せに変更。 ★実装方式（2026-09-16再修正）: 左右フェードは (1) mask-image → CMS入稿後に反映されず（サニタイズの疑い） (2) 実DOM要素<span>によるオーバーレイ → HTML差し替えが必要になり、 CSSのみ差し替えでは反映されない（運用上HTMLは触りたくない事情あり） の2案とも運用に乗らなかったため、HTML変更が一切不要な ::before/::after疑似要素でのオーバーレイに変更。 .ce-category__imageというクラス自体は変更していないため、 CSSファイルの差し替えだけで反映されるはず。 ---------------------------------------------------------------- */ .ce-category__image { /* 親.ce-category(max-width:1100px)に閉じ込められないよう、 上限付きはみ出しで画面中央基準の1150px幅にする（1200pxから再調整） */ position: relative; margin-top: 32px; overflow: hidden; aspect-ratio: 2.2 / 1; width: 100vw !important; max-width: 900px !important; margin-left: calc(50% - min(50vw, 450px)) !important; margin-right: calc(50% - min(50vw, 450px)) !important; } .ce-category__image img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; margin: 0 !important; } .ce-category__image::before, .ce-category__image::after { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 40px !important; pointer-events: none; z-index: 1; } .ce-category__image::before { left: 0 !important; background: linear-gradient(to right, var(--ce-white) 0%, rgba(255,255,255,0) 100%) !important; } .ce-category__image::after { right: 0 !important; background: linear-gradient(to left, var(--ce-white) 0%, rgba(255,255,255,0) 100%) !important; } /* ブランド家具の画像だけ、椅子の脚元でなく椅子本体が見えるようクロップ位置を調整 （bottom=100%とcenter 30%の中間、center 65%に着地：2026-09-16指示） */ #pillar-brand .ce-category__image img { object-position: center 65%; } @media (max-width: 760px) { .ce-category { padding: 64px 20px 0; } .ce-category__image { margin-top: 24px; } } /* ---------------------------------------------------------------- Why CLAS（サブスクのメリット） ---------------------------------------------------------------- */ .ce-reasons-section { padding: 72px 40px; background: var(--ce-white); } .ce-reasons-grid { display: flex; flex-wrap: wrap; gap: 16px; max-width: 1000px; margin: 0 auto 32px; } .ce-reason-card { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); background: var(--ce-warm-bg); border-radius: 8px; padding: 20px 16px; text-align: center; } .ce-reason-card__icon { display: flex; justify-content: center; margin-bottom: 10px; } .ce-reason-card__icon svg { width: 26px; height: 26px; color: var(--ce-secondary-dark) !important; } .ce-reason-card__title { font-size: 14px; font-weight: 500; color: var(--ce-black) !important; line-height: 1.5; margin-bottom: 6px; } .ce-reason-card__desc { font-size: 11px; color: var(--ce-muted); line-height: 1.7; } @media (max-width: 760px) { .ce-reasons-section { padding: 48px 20px; } .ce-reason-card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); } } .ce-compare-table { width: 100%; max-width: 700px; margin: 0 auto; border-collapse: collapse; font-size: 12px; } .ce-compare-table th { background: var(--ce-navy); color: var(--ce-white) !important; padding: 8px 12px; font-weight: 500; text-align: left; } .ce-compare-table td { padding: 8px 12px; border-bottom: 1px solid var(--ce-border); } .ce-compare-table tr:last-child td { border-bottom: none; } .ce-compare-table__highlight { background: var(--ce-warm-bg); font-weight: 500; } .ce-compare-table__check { color: var(--ce-secondary-dark) !important; font-weight: 500; } .ce-compare-table__cross { color: #b0b0b0 !important; } /* ---------------------------------------------------------------- Core Message / CTA ---------------------------------------------------------------- */ .ce-core-msg-section { padding: 72px 40px; background: var(--ce-navy) !important; /* はみ出し（完全フルブリード）: article_detail(768px)の外まで背景を広げる */ width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .ce-core-msg { max-width: 700px; margin: 0 auto; text-align: center !important; } .ce-core-msg * { color: var(--ce-white) !important; } .ce-core-msg__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: rgba(255,255,255,.55) !important; display: block; margin-bottom: 14px; } .ce-core-msg__head { font-size: clamp(18px, 2.5vw, 24px); font-weight: 400; margin-bottom: 20px; line-height: 1.9; letter-spacing: calc(1em * 10 / 100); border: none !important; padding-bottom: 0 !important; padding-left: 0 !important; } .ce-core-msg__head::before, .ce-core-msg__head::after { display: none !important; content: none !important; } .ce-core-msg .ce-core-msg__body, .ce-core-msg__body { font-size: 12px; line-height: 2.0; letter-spacing: calc(1em * 4 / 100); max-width: 560px; margin: 0 auto 24px; text-align: center !important; } /* 保険: 単一クラスの競合ルールに詳細度で確実に勝つためのフォールバック */ .ce-core-msg p { text-align: center !important; } .ce-core-msg__cta { display: inline-block; background: var(--ce-primary) !important; color: var(--ce-white) !important; font-size: 13px; font-weight: 500; padding: 12px 32px; border-radius: 24px; letter-spacing: .06em; } @media (max-width: 600px) { .ce-core-msg-section { padding: 48px 20px; } } /* ---------------------------------------------------------------- キャンペーン概要（利用規約ブロック） ---------------------------------------------------------------- */ .ce-terms-section { padding: 72px 40px; background: var(--ce-white); max-width: 760px; margin: 0 auto; } .ce-terms-title { font-size: 22px; font-weight: 700; color: var(--ce-black) !important; margin-bottom: 12px; } .ce-terms-title::after { content: ""; display: block; width: 40px; height: 2px; background: var(--ce-secondary); margin-top: 12px; } .ce-terms-item { padding: 24px 0; border-top: 1px solid var(--ce-border); } .ce-terms-item:first-of-type { border-top: none; padding-top: 32px; } .ce-terms-item__label { font-size: 15px; font-weight: 700; color: var(--ce-black) !important; margin-bottom: 8px; } .ce-terms-item__body { font-size: 13px; color: var(--ce-sub); line-height: 1.9; } .ce-terms-item__body p + p { margin-top: 4px; } @media (max-width: 600px) { .ce-terms-section { padding: 48px 20px; } } #id5f8lul2v4c { visibility: visible !important; }