この夏、暮らしをもう一点。

2026/07/08

<!-- S2608「この夏、暮らしをもう一点。」タグページ用キャンペーンマストヘッド（v9・FV画像差し込み済み） ★FV=デザイナー制作の1200×1200画像(clas.style/images/other/0000221500...)。ヒーロー全文言(50%OFF/タグライン/条件/商品/ロゴ)を内包→HTMLヒーローは廃止。STEP1以降はHTMLのまま。入稿先: product_tag(S2608) の banner_css_of_products_page / banner_html_of_products_page 方式: CMS入稿（HTML/CSS のみ・JS禁止）。白ベース・font-weight200-300・細線区切り・box-shadowなし。 ★体験: (A)カートに「対象ガジェット＋本ページ商品」が揃うと自動で50%OFF。 STEP1=対象ガジェットを選ぶ（tag「全国_クラファン話題」へ誘導）／STEP2=この夏の編集からもう一点。 ★対象ガジェット = tag「全国_クラファン話題」(tag_id 1191) 掲載商品。 STEP1のガジェットカードは (a)代表数点をハードコード or (b)PT Engineで在庫連動表示のどちらかで確定（下記コメント）。 ※期間・半額設定は本番化後に確定。煽り表現・家具系NG語は不使用。変化の主体は暮らし/自分。 ============================================================ ▼ ① banner_css_of_products_page に貼る（<style>タグ不要・CSSのみ） ============================================================ /* 親PLPのノイズ要素を隠す（白ベース路線・tag1191踏襲） */ .ProductListPage__stripeBackground, [class*="ProductListPage__stripeBackground"], .SearchCondition, [class*="SearchCondition"] { display:none !important; height:0 !important; overflow:hidden !important; } /* ===== Reset（.se26 配下のみ） ===== */ .se26, .se26 *, .se26 *::before, .se26 *::after { box-sizing:border-box !important; margin:0 !important; padding:0 !important; } .se26 { font-family: futura-pt, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif !important; color:#323630 !important; background:#FFFFFF !important; line-height:1.8 !important; -webkit-font-smoothing:antialiased !important; display:block !important; padding:0 0 8px !important; overflow:hidden !important; } /* ===== FV（デザイナー制作画像・1200×1200・ヒーロー全文言を内包） ===== */ .se26-fv { display:block !important; width:100% !important; max-width:900px !important; height:auto !important; margin:0 auto !important; } /* ===== Hero（旧・FV画像に置換済／未使用） ===== */ .se26-hero { text-align:center !important; padding:48px 20px 36px !important; } .se26-season { display:inline-block !important; font-family:futura-pt, arial, sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0.28em !important; text-transform:uppercase !important; color:#D96C45 !important; margin-bottom:20px !important; } .se26-cond { font-size:12px !important; font-weight:400 !important; line-height:1.8 !important; color:#646B61 !important; max-width:540px !important; margin:0 auto 12px !important; letter-spacing:0.02em !important; } .se26-hero-offer { margin-bottom:16px !important; } .se26-offer-pre { display:block !important; font-size:18px !important; font-weight:400 !important; letter-spacing:0.06em !important; color:#323630 !important; margin-bottom:4px !important; } .se26-hero-off { display:block !important; font-family:futura-pt, arial, sans-serif !important; font-weight:700 !important; font-size:54px !important; line-height:1.02 !important; letter-spacing:0.01em !important; color:#D96C45 !important; } .se26-tagline { font-size:15px !important; font-weight:400 !important; letter-spacing:0.08em !important; color:#646B61 !important; margin-bottom:16px !important; } .se26-rule { width:40px !important; height:2px !important; background:#D96C45 !important; margin:0 auto 18px !important; } .se26-lead { font-size:13px !important; font-weight:400 !important; line-height:2.0 !important; color:#646B61 !important; max-width:540px !important; margin:0 auto !important; } /* ===== STEP見出し（共通） ===== */ .se26-step { text-align:center !important; padding:44px 20px 0 !important; } .se26-step-idx { display:inline-block !important; font-family:futura-pt, arial, sans-serif !important; font-size:12px !important; font-weight:700 !important; letter-spacing:0.22em !important; text-transform:uppercase !important; color:#D96C45 !important; margin-bottom:10px !important; } .se26-step-h { font-size:19px !important; font-weight:400 !important; letter-spacing:0.08em !important; color:#323630 !important; margin-bottom:10px !important; } .se26-step-d { font-size:12px !important; font-weight:400 !important; line-height:1.9 !important; color:#646B61 !important; max-width:540px !important; margin:0 auto !important; } /* ===== STEP1 対象ガジェットカード ===== */ .se26-gadgets { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:20px 14px !important; max-width:820px !important; margin:24px auto 0 !important; padding:0 20px !important; } .se26-gcard { text-align:left !important; text-decoration:none !important; display:block !important; } .se26-gimg { width:100% !important; aspect-ratio:1/1 !important; background:#f2f3f2 !important; border-radius:8px !important; margin-bottom:10px !important; object-fit:cover !important; display:block !important; } .se26-gname { display:block !important; font-size:12px !important; font-weight:400 !important; line-height:1.6 !important; color:#323630 !important; } .se26-gprice { display:block !important; font-size:12px !important; font-weight:400 !important; color:#979E94 !important; margin-top:2px !important; } .se26-gmore-wrap { text-align:center !important; margin-top:26px !important; } .se26-gmore { display:inline-block !important; font-size:13px !important; letter-spacing:0.06em !important; color:#D96C45 !important; text-decoration:none !important; border:1px solid #D96C45 !important; border-radius:30px !important; padding:12px 30px !important; transition:background .2s ease, color .2s ease !important; } .se26-gmore:hover { background:#D96C45 !important; color:#FFFFFF !important; } /* ===== 4編集 lineup（STEP2） ===== */ .se26-themes { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:0 !important; max-width:900px !important; margin:24px auto 0 !important; border-top:1px solid #e8e8e8 !important; } .se26-theme { display:block !important; text-decoration:none !important; color:inherit !important; padding:26px 20px !important; text-align:center !important; border-bottom:1px solid #e8e8e8 !important; border-right:1px solid #e8e8e8 !important; transition:background .25s ease, transform .25s ease !important; } .se26-theme:nth-child(2n) { border-right:none !important; } .se26-theme:hover { background:#fafafa !important; transform:translateY(-2px) !important; } .se26-idx { display:block !important; font-family:futura-pt, arial, sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0.1em !important; color:#D96C45 !important; margin-bottom:10px !important; } .se26-theme-icon { display:block !important; width:72px !important; height:72px !important; border-radius:50% !important; object-fit:cover !important; background:#f2f3f2 !important; margin:0 auto 12px !important; } .se26-theme-h { font-size:15px !important; font-weight:400 !important; letter-spacing:0.08em !important; color:#323630 !important; margin-bottom:10px !important; } .se26-theme-d { font-size:12px !important; font-weight:400 !important; line-height:1.9 !important; color:#646B61 !important; margin-bottom:10px !important; } .se26-theme-items { font-size:11px !important; font-weight:400 !important; line-height:1.8 !important; color:#aab0a6 !important; letter-spacing:0.02em !important; } /* ===== 核メッセージ（淡い背景・限定1箇所） ===== */ .se26-core { background:#faf8f4 !important; border-top:1px solid #efe9e1 !important; border-bottom:1px solid #efe9e1 !important; padding:34px 20px !important; text-align:center !important; margin-top:44px !important; } .se26-core p { font-size:14px !important; font-weight:400 !important; line-height:2.1 !important; color:#4b5049 !important; max-width:600px !important; margin:0 auto !important; letter-spacing:0.02em !important; } /* ===== キャンペーン概要（規約テーブル） ===== */ .se26-summary { max-width:760px !important; margin:44px auto 0 !important; padding:0 20px !important; } .se26-sum-inner { border:1px solid #e8e8e8 !important; border-radius:12px !important; padding:28px 24px !important; background:#FFFFFF !important; } .se26-sum-title { font-size:16px !important; font-weight:400 !important; letter-spacing:0.12em !important; color:#323630 !important; padding-bottom:14px !important; margin-bottom:4px !important; border-bottom:1px solid #e8e8e8 !important; } .se26-sum-row { display:grid !important; grid-template-columns:96px 1fr !important; gap:12px !important; padding:14px 0 !important; border-bottom:1px solid #f0f0f0 !important; } .se26-sum-row:last-child { border-bottom:none !important; } .se26-sum-row dt { font-size:12px !important; font-weight:500 !important; letter-spacing:0.04em !important; color:#323630 !important; line-height:1.7 !important; } .se26-sum-row dd { font-size:12px !important; font-weight:400 !important; line-height:1.9 !important; color:#646B61 !important; } .se26-sum-off { color:#D96C45 !important; font-weight:500 !important; } /* ===== フッターCTA ===== */ .se26-cta { text-align:center !important; padding:44px 20px 12px !important; } .se26-cta-text { font-size:17px !important; font-weight:400 !important; letter-spacing:0.06em !important; color:#323630 !important; margin-bottom:12px !important; } .se26-cta-note { font-size:12px !important; letter-spacing:0.06em !important; color:#979E94 !important; } .se26-arrow { display:inline-block !important; margin-top:14px !important; font-size:18px !important; color:#D96C45 !important; line-height:1 !important; } /* ===== load animation は撤去（opacity:0前提のフェードが未発火だとホワイトアウトするため常時表示） ===== */ /* ===== PC ===== */ @media (min-width:768px){ .se26-hero { padding:84px 40px 52px !important; } .se26-season { font-size:15px !important; margin-bottom:28px !important; } .se26-cond { font-size:13px !important; margin-bottom:16px !important; } .se26-hero-offer { margin-bottom:18px !important; } .se26-offer-pre { font-size:26px !important; } .se26-hero-off { font-size:92px !important; } .se26-tagline { font-size:18px !important; margin-bottom:20px !important; } .se26-rule { margin-bottom:24px !important; } .se26-lead { font-size:15px !important; } .se26-step { padding-top:56px !important; } .se26-step-h { font-size:22px !important; } .se26-step-d { font-size:13px !important; } .se26-gadgets { grid-template-columns:repeat(4,1fr) !important; gap:24px !important; margin-top:28px !important; } .se26-gname { font-size:13px !important; } .se26-gprice { font-size:13px !important; } .se26-themes { grid-template-columns:repeat(4,1fr) !important; margin-top:28px !important; } .se26-theme { padding:36px 24px !important; } .se26-theme:nth-child(2n) { border-right:1px solid #e8e8e8 !important; } .se26-theme:nth-child(4n) { border-right:none !important; } .se26-theme-icon { width:88px !important; height:88px !important; } .se26-theme-h { font-size:16px !important; } .se26-theme-d { font-size:13px !important; } .se26-theme-items { font-size:12px !important; } .se26-core { padding:48px 40px !important; } .se26-core p { font-size:16px !important; } .se26-summary { margin-top:56px !important; } .se26-sum-inner { padding:36px 40px !important; } .se26-sum-title { font-size:18px !important; } .se26-sum-row { grid-template-columns:150px 1fr !important; gap:20px !important; padding:16px 0 !important; } .se26-sum-row dt { font-size:13px !important; } .se26-sum-row dd { font-size:13px !important; } .se26-cta { padding:60px 40px 16px !important; } .se26-cta-text { font-size:20px !important; } }