人気商品月額20%OFFセール

/* ================================================================ CLAS × 週替わり20%OFFセール — Tag Page LP CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください prefix: .wcs- 構成の踏襲元: cool-item-tag-page.css（アイスブルー特集ページ） Last build: 2026-08-04 ★重要（v2-FIX）: 商品カードを挟んで複数チャンクに分割入稿すると、 .wcs-root の外側に出るチャンクが発生し、.wcs-root 依存のCSS変数・ 子孫セレクタが軒並み効かなくなる事象が実際に発生した（Why CLAS以降の 配色が完全に失われる形で表面化）。そのため: - CSS変数は :root （ページ全体）に定義し、.wcs-root の有無に依存しない - セクション単位のスタイルは `.wcs-root .foo` ではなく `.foo` の 直接セレクタで書く（祖先関係を要求しない） - 全称リセットは `.wcs-root *` ではなく `[class*="wcs-"]` 自身に効かせる という方針に統一している。今後スタイルを追加する際もこの方針を踏襲すること。 ================================================================ */ /* ---------------------------------------------------------------- CLAS 既存ページ側 要素の強制非表示 CSS Modules がクラス名をプレフィックス書換するため 属性セレクタ [class*="..."] で回避 ---------------------------------------------------------------- */ [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; } /* FV上部ブルー余白修正: htmlContainer以外のProductIntroduction直下子要素を全非表示 */ [class*="ProductIntroduction__section"] > *:not([class*="htmlContainer"]) { display: none !important; height: 0 !important; overflow: hidden !important; } /* htmlContainerのpadding/marginをリセット */ [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上部の余白対策 クラス名に依存せず、当ページ固有の data-tag-page 属性を目印にして 親要素・祖先要素の余白を直接ゼロにする。 ---------------------------------------------------------------- */ body *:has(> [data-tag-page="weekly-sale"]) { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } body *:has(> * > [data-tag-page="weekly-sale"]) { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } body *:has(> * > * > [data-tag-page="weekly-sale"]) { padding-top: 0 !important; margin-top: 0 !important; } /* ---------------------------------------------------------------- 記事タイトル・更新日の重複表示を非表示 実際に公開済みの他記事ページ（洗濯機の選び方 /article/2600、 空調家電 /article/2551）を確認したところ、いずれも下記の確定クラス名を display:none にする方法で統一されていた。h1/time等の推測ベースの セレクタではなく、この確定クラス名をそのまま使う。 ---------------------------------------------------------------- */ .TitleComponent { display: none !important; } .datetime { display: none !important; } /* ---------------------------------------------------------------- 変数（:root＝ページ全体に定義。.wcs-root の子孫かどうかに依存しない） ---------------------------------------------------------------- */ :root { --wcs-primary: #669988; --wcs-primary-dark: #3d5c52; --wcs-primary-pale: #eff5f3; --wcs-secondary: #998866; --wcs-black: #1a1a1a; --wcs-text: #1a1a1a; --wcs-sub: #4a4a4a; --wcs-muted: #767676; --wcs-border: #dfeae6; --wcs-white: #ffffff; --wcs-shadow: 0 2px 16px rgba(26,61,92,.08); --wcs-overview-bg: #fffbdd; --wcs-overview-border: #78c7ff; --wcs-overview-accent: #78c7ff; } /* ---------------------------------------------------------------- 全称リセット・タイポグラフィベース [class*="wcs-"] は「wcs-を含むクラスを持つ要素自身」に直接効かせる 自己参照セレクタ（祖先セレクタではない）。.wcs-root の子孫かどうかや 商品カード分割で親要素が変わっても、各要素自身が確実にリセットされる。 ---------------------------------------------------------------- */ [class*="wcs-"] { box-sizing: border-box; font-family: futura-pt, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: var(--wcs-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class*="wcs-"]::before, [class*="wcs-"]::after { box-sizing: border-box; } .wcs-root { line-height: 1.8; font-weight: 400; letter-spacing: calc(1em * 3 / 100); } .wcs-root, .wcs-root * { margin: 0; padding: 0; } .wcs-root img { max-width: 100%; display: block; } .wcs-root a { color: inherit; text-decoration: none; } .wcs-root ul { list-style: none; } .wcs-root p { margin: 0; } /* 商品カード分割で .wcs-root の外に出た要素向けの保険リセット */ [class*="wcs-"] img { max-width: 100%; display: block; } [class*="wcs-"] a { color: inherit; text-decoration: none; } [class*="wcs-"] ul { list-style: none; margin: 0; padding: 0; } [class*="wcs-"] p { margin: 0; } /* ---------------------------------------------------------------- アスペクト比ヘルパー ---------------------------------------------------------------- */ .wcs-aspect { display: block; position: relative; overflow: hidden; } .wcs-aspect img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; margin: 0 !important; } .wcs-aspect--1x1 { aspect-ratio: 1 / 1; } /* ---------------------------------------------------------------- 共通: Eyebrow / H2 / Lead h2/h3はサイト側のグローバル下線・ボーダー装飾を持つため、 .wcs-h2 自身にリセットを直接持たせる（祖先セレクタに依存しない） ---------------------------------------------------------------- */ .wcs-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--wcs-primary-dark) !important; margin-bottom: 12px; } .wcs-h2 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 400; color: var(--wcs-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; } .wcs-h2::before, .wcs-h2::after { display: none !important; content: none !important; } .wcs-h2--center { text-align: center; } .wcs-lead { font-size: 13px; font-weight: 400; line-height: 2.1; color: var(--wcs-sub); letter-spacing: calc(1em * 4 / 100); max-width: 700px; } .wcs-lead--center { text-align: center !important; margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------- Framing Band ---------------------------------------------------------------- */ .wcs-framing { background: var(--wcs-black) !important; color: var(--wcs-white) !important; text-align: center !important; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 10px 24px; font-weight: 500; } .wcs-framing * { color: var(--wcs-white) !important; } .wcs-framing strong { color: var(--wcs-overview-accent) !important; font-weight: 700; } /* ---------------------------------------------------------------- Hero — PC/SP画像はplain <img>2枚 + CSSのdisplay切替 （<picture>/<source>は管理画面のHTMLサニタイズで除去される事例があるため不使用） ---------------------------------------------------------------- */ .wcs-hero { position: relative !important; overflow: hidden !important; background: var(--wcs-primary-pale); padding: 0 !important; margin: 0 !important; min-height: 0; aspect-ratio: 1782 / 2138; } section[aria-label="今週の20%OFFセール"] { position: relative !important; overflow: hidden !important; isolation: isolate; } .wcs-hero__bg { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 0 !important; } .wcs-hero__bg img.wcs-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: 実画像サイズ(1782x2138)基準。PC画像は非表示 */ .wcs-hero__bg img.wcs-hero__img--pc { display: none !important; } .wcs-hero__bg img.wcs-hero__img--sp { display: block !important; } /* PC: 実画像サイズ(3000x1462)に一致させる。SP画像は非表示 */ @media (min-width: 768px) { .wcs-hero { max-width: 1140px !important; margin: 0 auto !important; aspect-ratio: 3000 / 1462; } .wcs-hero__bg img.wcs-hero__img--pc { display: block !important; } .wcs-hero__bg img.wcs-hero__img--sp { display: none !important; } } /* ---------------------------------------------------------------- Anchor Thumbs（各カテゴリの商品セクションへのショートカット） ---------------------------------------------------------------- */ .wcs-anchor-section { padding: 40px 20px 32px; background: var(--wcs-white); text-align: center !important; border-bottom: 1px solid var(--wcs-border); } .wcs-thumbs { margin-top: 24px; display: flex; justify-content: center; align-items: flex-start; gap: 28px; flex-wrap: wrap; } .wcs-thumb { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; width: 92px; } .wcs-thumb__circle { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; /* FV画像から採取した実際の配色（ゴールド→ブルー）でグラデーションを敷く */ background: linear-gradient(135deg, #ffe380, #78c7ff); flex-shrink: 0; transition: transform .2s; } .wcs-thumb__circle img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 !important; /* CLASのカテゴリ画像（写真ベース）を白抜きシルエット化 */ filter: brightness(0) invert(1); } .wcs-thumb:hover .wcs-thumb__circle { transform: scale(1.05); } .wcs-thumb__label { font-size: 12px; font-weight: 500; color: var(--wcs-black) !important; text-align: center; letter-spacing: calc(1em * 4 / 100); } @media (max-width: 600px) { .wcs-anchor-section { padding: 32px 16px 24px; } .wcs-thumbs { gap: 16px; } .wcs-thumb { width: 76px; } .wcs-thumb__circle { width: 68px; height: 68px; } .wcs-thumb__circle img { width: 36px; height: 36px; } } /* ---------------------------------------------------------------- Overview（キャンペーン概要） ---------------------------------------------------------------- */ .wcs-overview-section { padding: 56px 40px; background: var(--wcs-overview-bg); text-align: center !important; } .wcs-overview-section .wcs-eyebrow { color: var(--wcs-overview-accent) !important; } .wcs-overview-section .wcs-h2 { /* このセクションの見出しだけ一段階小さく */ font-size: clamp(18px, 2.4vw, 24px); } .wcs-overview-lead { font-size: 14px; line-height: 2.0; color: var(--wcs-sub); max-width: 640px; margin: 16px auto 0; text-align: center !important; } .wcs-overview-meta { display: inline-block; margin-top: 20px; font-size: 12px; font-weight: 500; color: var(--wcs-overview-accent) !important; background: var(--wcs-white); border: 1px solid var(--wcs-overview-border); border-radius: 20px; padding: 6px 18px; } @media (max-width: 600px) { .wcs-overview-section { padding: 40px 20px; } } /* ---------------------------------------------------------------- Category Section（洗濯機 / ソファ / ダイニング） ---------------------------------------------------------------- */ .wcs-category { /* 前カテゴリの商品カードとの間はしっかり空け、内部（見出し〜商品カード）は詰める */ padding: 96px 40px 0; border-top: 1px solid var(--wcs-border); max-width: 1100px; margin: 0 auto; } .wcs-category__head { display: flex; align-items: baseline; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; margin-bottom: 8px; } .wcs-category__badge { font-size: 18px; font-weight: 700; color: var(--wcs-white) !important; background: #78c7ff; border-radius: 20px; padding: 6px 20px; letter-spacing: .02em; white-space: nowrap; } .wcs-category .wcs-lead { text-align: center !important; margin-left: auto; margin-right: auto; margin-bottom: 4px; } /* リード文の直後に来る要素＝記事機能側が入稿する商品カードウィジェット。 クラス名が分からないため「wcs-leadの直後の要素」という構造で狙い撃ちし、 ウィジェット自身が持つ上マージン/パディングを潰してセクションの まとまり感を出す（商品カードの分割入稿でここが親要素ごと変わっても 構造的に効く） */ .wcs-category .wcs-lead + * { margin-top: 0 !important; padding-top: 0 !important; } @media (max-width: 760px) { .wcs-category { padding: 64px 20px 0; } } /* ---------------------------------------------------------------- 商品カード挿入エリア ★ 実際の商品カードは「商品セクション」機能側で入稿される。 このCSS側では見た目を用意しない（HTML側のコメントマーカーのみで 挿入位置を示す）。機能側が出力するマークアップのクラス名が確定した 時点で、必要に応じて [class*="..."] セレクタで余白・グリッド崩れ等を 上書きするCSSを追記すること（cool-item-tag-pageのProductIntroduction リセットと同様のパターンを想定）。 ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- Why CLAS（サブスクのメリット） grid-template-columns は管理画面で無効化される事例があるため flex-wrap + calc()幅指定で組む ---------------------------------------------------------------- */ .wcs-reasons-section { padding: 72px 40px; background: var(--wcs-white); } .wcs-reasons-grid { display: flex; flex-wrap: wrap; gap: 16px; max-width: 1000px; margin: 0 auto 32px; } .wcs-reason-card { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); background: var(--wcs-primary-pale); border-radius: 8px; padding: 20px 16px; text-align: center; } .wcs-reason-card__icon { display: flex; justify-content: center; margin-bottom: 10px; } .wcs-reason-card__icon svg { width: 26px; height: 26px; color: var(--wcs-primary-dark) !important; } .wcs-reason-card__title { font-size: 14px; font-weight: 500; color: var(--wcs-black) !important; line-height: 1.5; margin-bottom: 6px; } .wcs-reason-card__desc { font-size: 11px; color: var(--wcs-muted); line-height: 1.7; } @media (max-width: 760px) { .wcs-reasons-section { padding: 48px 20px; } .wcs-reason-card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); } } .wcs-compare-table { width: 100%; max-width: 700px; margin: 0 auto; border-collapse: collapse; font-size: 12px; } .wcs-compare-table th { background: var(--wcs-black); color: var(--wcs-white) !important; padding: 8px 12px; font-weight: 500; text-align: left; } .wcs-compare-table td { padding: 8px 12px; border-bottom: 1px solid var(--wcs-border); } .wcs-compare-table tr:last-child td { border-bottom: none; } .wcs-compare-table__highlight { background: var(--wcs-primary-pale); font-weight: 500; } .wcs-compare-table__check { color: var(--wcs-primary-dark) !important; font-weight: 500; } .wcs-compare-table__cross { color: #b0b0b0 !important; } /* ---------------------------------------------------------------- Core Message / CTA ---------------------------------------------------------------- */ .wcs-core-msg-section { padding: 72px 40px; background: var(--wcs-black) !important; } .wcs-core-msg { max-width: 700px; margin: 0 auto; text-align: center !important; } .wcs-core-msg * { color: var(--wcs-white) !important; } .wcs-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; } .wcs-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; } .wcs-core-msg__head::before, .wcs-core-msg__head::after { display: none !important; content: none !important; } .wcs-core-msg__body { font-size: 12px; line-height: 2.0; letter-spacing: calc(1em * 4 / 100); max-width: 560px; margin: 0 auto 24px; } .wcs-core-msg__cta { display: inline-block; background: var(--wcs-primary) !important; color: var(--wcs-white) !important; font-size: 13px; font-weight: 500; padding: 12px 32px; border-radius: 24px; letter-spacing: .06em; } @media (max-width: 600px) { .wcs-core-msg-section { padding: 48px 20px; } } /* ---------------------------------------------------------------- キャンペーン概要（利用規約ブロック） ---------------------------------------------------------------- */ .wcs-terms-section { padding: 72px 40px; background: var(--wcs-white); max-width: 760px; margin: 0 auto; } .wcs-terms-title { font-size: 22px; font-weight: 700; color: var(--wcs-black) !important; margin-bottom: 12px; } .wcs-terms-title::after { content: ""; display: block; width: 40px; height: 3px; background: var(--wcs-overview-accent); margin-top: 12px; } .wcs-terms-item { padding: 24px 0; border-top: 1px solid var(--wcs-border); } .wcs-terms-item:first-of-type { border-top: none; padding-top: 32px; } .wcs-terms-item__label { font-size: 15px; font-weight: 700; color: var(--wcs-black) !important; margin-bottom: 8px; } .wcs-terms-item__body { font-size: 13px; color: var(--wcs-sub); line-height: 1.9; } .wcs-terms-item__body p + p { margin-top: 4px; } @media (max-width: 600px) { .wcs-terms-section { padding: 48px 20px; } } #id { visibility: visible !important; }