【サービスローンチ8周年記念】HAPPY STARTキャンペーン

/* ================================================================ CLAS × サービスローンチ8周年 100円キャンペーン（HAPPY START） — Tag Page LP CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください prefix: .wcs-（weekly-sale-tag-page.css と共通。同一ページに同時に 読み込まれることはないため衝突しない） 構成の踏襲元: weekly-sale-tag-page.css（週替わり20%OFFセール） Last build: 2026-08-07 ★重要（v2-FIX・weekly-sale-tag-pageから継承): 商品カードを挟んで複数 チャンクに分割入稿すると、.wcs-root の外側に出るチャンクが発生し、 .wcs-root 依存のCSS変数・子孫セレクタが軒並み効かなくなる事象が 実際に発生した。そのため: - 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="8th-anniversary"]) { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } body *:has(> * > [data-tag-page="8th-anniversary"]) { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } body *:has(> * > * > [data-tag-page="8th-anniversary"]) { padding-top: 0 !important; margin-top: 0 !important; } /* ---------------------------------------------------------------- 記事タイトル・更新日の重複表示を非表示 実際に公開済みの記事ページ（洗濯機の選び方 /article/2600、 空調家電 /article/2551）で確認した確定クラス名。h1/time等の推測 セレクタではなく、この確定クラス名をそのまま使う。 ---------------------------------------------------------------- */ .TitleComponent { display: none !important; } .datetime { display: none !important; } /* ---------------------------------------------------------------- 変数（:root＝ページ全体に定義。.wcs-root の子孫かどうかに依存しない） FV画像（サーモンピンク×ゴールド×ネイビー）から実際に採取した配色。 ---------------------------------------------------------------- */ :root { --wcs-primary: #245b9b; /* ネイビー（FVの「HAPPY START」帯から採取） */ --wcs-primary-dark: #16395f; --wcs-primary-pale: #eaf1fa; --wcs-secondary: #e58f90; /* サーモンピンク（FV背景から採取） */ --wcs-black: #1a1a1a; --wcs-text: #1a1a1a; --wcs-sub: #4a4a4a; --wcs-muted: #767676; --wcs-border: #f1dcdc; --wcs-white: #ffffff; --wcs-shadow: 0 2px 16px rgba(26,61,92,.08); --wcs-overview-bg: #fdeeee; /* FV背景のサーモンピンクを淡くしたトーン */ --wcs-overview-border: #245b9b; --wcs-overview-accent: #245b9b; } /* ---------------------------------------------------------------- 全称リセット・タイポグラフィベース [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; } /* ---------------------------------------------------------------- 共通: Eyebrow / H2 / Lead ---------------------------------------------------------------- */ .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サニタイズで除去される事例があるため不使用） 実画像サイズ: SP 1844×2138 / PC 3000×1688 ---------------------------------------------------------------- */ .wcs-hero { position: relative !important; overflow: hidden !important; background: var(--wcs-overview-bg); padding: 0 !important; margin: 0 !important; min-height: 0; aspect-ratio: 1844 / 2138; } section[aria-label="サービスローンチ8周年 HAPPY STARTキャンペーン"] { 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; } .wcs-hero__bg img.wcs-hero__img--pc { display: none !important; } .wcs-hero__bg img.wcs-hero__img--sp { display: block !important; } @media (min-width: 768px) { .wcs-hero { max-width: 1140px !important; margin: 0 auto !important; aspect-ratio: 3000 / 1688; } .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-section .wcs-h2 { color: #e58f8f !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: 92px; } .wcs-thumb__circle { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0; transition: transform .2s; } .wcs-thumb__circle--price { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--wcs-white) !important; letter-spacing: 0; text-align: center; } /* 価格帯ごとのグラデーション（各セクションのタイトル/バッジ色と揃える） */ .wcs-thumb__circle--tier100 { background: linear-gradient(135deg, #f2b6b6, #e58f8f); } .wcs-thumb__circle--tier300 { background: linear-gradient(135deg, #a9c6e6, #709ed0); } .wcs-thumb__circle--tier500 { background: linear-gradient(135deg, #f2cb99, #ebb06c); } .wcs-thumb__circle--tier800 { background: linear-gradient(135deg, #c2b0ff, #957aff); } .wcs-thumb__circle img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 !important; filter: brightness(0) invert(1); } .wcs-thumb:hover .wcs-thumb__circle { transform: scale(1.05); } @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; } .wcs-thumb__circle--price { font-size: 12px; } } /* ---------------------------------------------------------------- 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; } } /* ---------------------------------------------------------------- Price Tier Section（月額100円 / 300円 / 500円 / 800円） ---------------------------------------------------------------- */ .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-primary); border-radius: 20px; padding: 6px 20px; letter-spacing: .02em; white-space: nowrap; } /* 価格帯ごとのタイトル文字色／バッジ塗り色（HAPPY START FVの配色に合わせた指定） */ .wcs-category--tier100 .wcs-category__head .wcs-h2 { color: #e58f8f !important; } .wcs-category--tier100 .wcs-category__badge { background: linear-gradient(135deg, #f2b6b6, #e58f8f); } .wcs-category--tier300 .wcs-category__head .wcs-h2 { color: #709ed0 !important; } .wcs-category--tier300 .wcs-category__badge { background: linear-gradient(135deg, #a9c6e6, #709ed0); } .wcs-category--tier500 .wcs-category__head .wcs-h2 { color: #ebb06c !important; } .wcs-category--tier500 .wcs-category__badge { background: linear-gradient(135deg, #f2cb99, #ebb06c); } .wcs-category--tier800 .wcs-category__head .wcs-h2 { color: #957aff !important; } .wcs-category--tier800 .wcs-category__badge { background: linear-gradient(135deg, #c2b0ff, #957aff); } .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側のコメントマーカーのみで 挿入位置を示す）。 ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- 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-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; }