プロジェクター借り比べキャンペーン

/* ================================================================ CLAS × プロジェクター おまとめ比較割（2点同時注文 それぞれ月額40%OFF）— 記事ページ CSS ファイル名: projector-2set-40off-article.css ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください prefix: .wcs- 構成の踏襲元: hayawari_kucho_aw_article.css（秋冬家電 早割／20%OFF） Last build: 2026-10-15（対象カテゴリ: シーリングライト型／モバイル／据え置き型 ホームプロジェクター／期間: 10/16〜11/16） 配色: FVクリエイティブ（ミント地＋ディープティール＋イエロー）に合わせて変更 ★重要（v2-FIX）: 商品カードを挟んで複数チャンクに分割入稿すると、 .wcs-root の外側に出るチャンクが発生し、.wcs-root 依存のCSS変数・ 子孫セレクタが軒並み効かなくなる事象が実際に発生した（Why CLAS以降の 配色が完全に失われる形で表面化）。そのため: - CSS変数は :root （ページ全体）に定義し、.wcs-root の有無に依存しない - セクション単位のスタイルは `.wcs-root .foo` ではなく `.foo` の 直接セレクタで書く（祖先関係を要求しない） - 全称リセットは `.wcs-root *` ではなく `[class*="wcs-"]` 自身に効かせる という方針に統一している。今後スタイルを追加する際もこの方針を踏襲すること。 ================================================================ */ /* ---------------------------------------------------------------- ★最重要（2026-09-10発覚）: main.article_detail 自体に overflow:hidden がかかっており、Hero/Overview/Core Messageのはみ出し（幅広表示・ フルブリード）が実装上は正しく計算されていても、この祖先要素で 問答無用にクリップされ画面に一切見えなかった。 （旧テンプレートの記事ページ 例: /article/1867 は article_detail 自体が最初から画面幅いっぱいで、はみ出しテクニック自体が不要だった。 現行テンプレートは本文カラムが768px固定＋overflow:hiddenのため、 このoverflow指定を明示的に解除しない限りはみ出しは実現できない） ---------------------------------------------------------------- */ main.article_detail { overflow: visible !important; } /* ---------------------------------------------------------------- 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: #EEF6F4; --wcs-overview-border: #1E5B5C; --wcs-overview-accent: #1E5B5C; --wcs-fv-bg: #CFE9E7; --wcs-fv-yellow: #EEF263; } /* ---------------------------------------------------------------- 全称リセット・タイポグラフィベース [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 { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; 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-fv-yellow) !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="プロジェクター おまとめ比較割"] { 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)に一致させる（今回のFVも同サイズ）。SP画像は非表示 ★記事ページの本文カラム(article_detail)は実測768px固定で、単純な max-width指定だけでは親幅に頭打ちになり効かない。そのため margin-left/right: calc(50% - min(50vw, 上限の半分)) の「はみ出し」 テクニックでビューポート基準の中央寄せに切り替え、768pxより幅広に 表示できるようにしている（position/transformは使わず margin+calc+min のみで組む＝CMSのCSSサニタイズで弾かれにくい古典的な構文を優先）。 ★2026-09-10: 初回実装（left:50%+transform:translateX(-50%)方式）が 本番で反映されなかったため、!important不足を疑いこの方式に置き換え。 */ /* ★PCのFVは背景プレートを完全フルブリード(100vw)にしてFV地色を画面幅 いっぱいに敷き、画像フレームは768px固定（960pxからさらに80%に縮小） で中央配置する。 .wcs-hero＝プレート本体（画面幅いっぱい・背景=FV地色・高さは中の画像 フレームに追従）、.wcs-hero__bg＝画像フレーム（絶対配置から通常フロー の固定960px幅ブロックに変更し、自身のaspect-ratioで高さを決める。 中のimg2枚は従来通りこのフレームをposition:absoluteで覆う形のまま） */ @media (min-width: 768px) { .wcs-hero { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; aspect-ratio: auto !important; background: var(--wcs-fv-bg) !important; } .wcs-hero__bg { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 768px !important; max-width: 90% !important; margin: 0 auto !important; aspect-ratio: 3000 / 1462 !important; } .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-anchor-nav .wcs-h2 { color: var(--wcs-overview-accent) !important; } .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: 140px; } .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, #f4ece2, #d9573f); 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__circle--photo { background: var(--wcs-overview-bg); border: 1px solid var(--wcs-border); } .wcs-thumb__circle--photo img { width: 100%; height: 100%; object-fit: cover; filter: none; } /* 商品画像（グレー地の正方形）を円いっぱいに敷き、円の外の四角を切り落とす。 円の地色は商品画像の地色に近い薄緑 #E5E8E5 にして、境目が出ないようにする */ .wcs-thumb__circle--product { background: #E5E8E5; border: none; } .wcs-thumb__circle--product img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: none; } .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); line-height: 1.6; } @media (max-width: 600px) { .wcs-anchor-section { padding: 32px 16px 24px; } .wcs-thumbs { gap: 8px; } .wcs-thumb { width: 104px; } .wcs-thumb__circle { width: 68px; height: 68px; } .wcs-thumb__circle img { width: 36px; height: 36px; } .wcs-thumb__circle--photo img { width: 100%; height: 100%; } .wcs-thumb__circle--product img { width: 100%; height: 100%; } .wcs-thumb__label { font-size: 10px; letter-spacing: 0; } } /* ---------------------------------------------------------------- Overview（キャンペーン概要） ★背景色を敷いているセクションは、記事本文カラム(768px固定)の外まで ベタ塗りを伸ばすため、Heroと同じ「はみ出し」テクニックで画面幅いっぱいに している（この場合はmax-widthを付けず100vwのまま＝完全フルブリード）。 文字コンテンツは内側の .wcs-overview-inner でmax-width指定して 読みやすい幅に戻す。 ---------------------------------------------------------------- */ .wcs-overview-section { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 56px 40px; background: var(--wcs-overview-bg); text-align: center !important; } .wcs-overview-inner { max-width: 640px; margin: 0 auto; } .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; } } /* ---------------------------------------------------------------- Pairs（2台の組み合わせ例） grid は管理画面で無効化される事例があるため flex-wrap で組む ---------------------------------------------------------------- */ .wcs-pairs-section { padding: 64px 40px 72px; background: var(--wcs-white); } .wcs-pairs { display: flex; flex-wrap: wrap; gap: 16px; max-width: 1000px; margin: 24px auto 0; } .wcs-pair-card { flex: 1 1 calc(33.333% - 11px); min-width: 220px; border: 1px solid var(--wcs-border); border-radius: 8px; padding: 24px 20px; background: var(--wcs-white); text-align: center; } .wcs-pair-card__vs { font-size: 16px; font-weight: 500; color: var(--wcs-overview-accent) !important; letter-spacing: .06em; margin-bottom: 12px !important; } .wcs-pair-card__vs span { display: inline-block; font-size: 12px; font-weight: 400; color: var(--wcs-muted) !important; margin: 0 6px; } .wcs-pair-card__desc { font-size: 12px; line-height: 1.9; color: var(--wcs-sub); text-align: left; } @media (max-width: 760px) { .wcs-pairs-section { padding: 48px 20px 56px; } .wcs-pair-card { flex: 1 1 100%; } } /* ---------------------------------------------------------------- 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: var(--wcs-overview-accent); 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; } } /* SP: 「シーリングライト型プロジェクター」等の長い見出しが1行に収まるように */ @media (max-width: 600px) { .wcs-category .wcs-h2 { font-size: 18px; letter-spacing: .04em; margin-bottom: 10px; } .wcs-category__badge { font-size: 15px; padding: 4px 16px; } } /* ---------------------------------------------------------------- 商品カード挿入エリア ★ 実際の商品カードは「商品セクション」機能側で入稿される。 この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 { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; 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; }