ドラムデビューキャンペーン

2026/07/17

/* ================================================================ CLAS ドラムデビュー！キャンペーン LP CSS（2026年版） ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください ※ 既存の他LP CSSが入っている場合は【末尾に追記】してください（置換不可） prefix: .wsh- ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap'); /* ---------------------------------------------------------------- CLAS 既存ページ側要素の強制非表示 ---------------------------------------------------------------- */ [class*="ProductIntroduction__section"] picture { display: none !important; } [class*="ProductIntroduction__title"], [class*="ProductIntroduction__button"], [class*="ProductIntroduction__description"], [class*="ProductListPage__stripeBackground"], [class*="SearchCondition"], [class*="CategoryList"], [class*="CategorySection"], [class*="CategoryBanner"], [class*="CategorySelector"], [class*="CategoryNavigation"], [class*="CategoryTree"], [class*="ViewedItem"], [class*="RecommendedItem"], [class*="ProductSortBar"] { display: none !important; } .article_detail > section:first-child { display: none !important; } p.datetime { display: none !important; } /* ページ全体の横幅オーバーフロー防止 */ html, body { overflow-x: hidden !important; max-width: 100% !important; } .article_detail { max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; /* CMS の overflow:hidden を解除して hero の全幅展開を許可 */ padding-top: 0 !important; margin-top: 0 !important; } .article_detail > * { max-width: 100% !important; box-sizing: border-box !important; } /* FV直上の白い余白をゼロに */ .article_detail > *:first-child, .article_detail > section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; } /* CMS商品ブロック全般のコンテナ制御 */ [class*="BlockComponent"], [class*="block-component"], [class*="ProductList"], [class*="productList"], [class*="ArticleComponent"], [class*="articleComponent"], [class*="ItemList"], [class*="itemList"], [class*="SearchResult"], [class*="searchResult"], [class*="ProductGrid"], [class*="productGrid"] { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* BlockComponent / SectionComponent の背景色とマージンをリセット */ .BlockComponent { background-color: transparent !important; margin-top: 0 !important; } .SectionComponent, [class*="SectionComponent"], [class*="HtmlComponent"] { background-color: transparent !important; overflow: visible !important; margin-top: 0 !important; padding-top: 0 !important; } /* ---------------------------------------------------------------- CSS Variables ---------------------------------------------------------------- */ :root { --wsh-orange: #E06830; --wsh-orange-lt: #FDF0E8; --wsh-navy: #2C4870; --wsh-steel: #3E618A; --wsh-steel-lt: #EDF1F7; --wsh-cream: #FAF8F4; --wsh-cream-md: #F3EFE7; --wsh-white: #FFFFFF; --wsh-text: #1A1E26; --wsh-sub: #4A5464; --wsh-border: #D8D4CC; --wsh-shadow: 0 2px 16px rgba(44,72,112,.10); } /* ---------------------------------------------------------------- Root ---------------------------------------------------------------- */ .wsh-root { font-family: futura-pt, 'Jost', "Noto Sans JP", sans-serif; color: var(--wsh-text); background: var(--wsh-white) !important; -webkit-font-smoothing: antialiased; /* overflow-x: hidden は hero の負マージン全幅展開をクリップするため削除 */ /* html, body の overflow-x: hidden が横スクロール防止を担う */ } .wsh-root *, .wsh-root *::before, .wsh-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .wsh-root ul { list-style: none; } .wsh-root a { text-decoration: none; } .wsh-root img { display: block; width: 100%; } /* ---------------------------------------------------------------- Container ---------------------------------------------------------------- */ .wsh-container { max-width: 800px; margin: 0 auto; padding: 0 40px; } @media (max-width: 540px) { .wsh-container { padding: 0 20px; } } /* ---------------------------------------------------------------- Hero ---------------------------------------------------------------- */ .wsh-hero { background: #fce8e0 !important; padding: 48px 0; line-height: 0; /* コンテナ幅を突き破ってビューポート幅いっぱいに広げる */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; } .wsh-hero__img-pc { display: block; margin: 0 auto; width: 100%; max-width: 760px; height: auto; } .wsh-hero__img-sp { display: none !important; } @media (max-width: 540px) { .wsh-hero { padding: 0; background: transparent !important; } .wsh-hero__img-pc { display: none !important; } .wsh-hero__img-sp { display: block !important; width: 100%; height: auto; } } /* ---------------------------------------------------------------- Lead Text ---------------------------------------------------------------- */ .wsh-lead-section { background: var(--wsh-white) !important; padding: 56px 0; } @media (max-width: 540px) { .wsh-lead-section { padding: 40px 20px; } } .wsh-lead-text { font-size: 16px; font-weight: 400; line-height: 2.2; letter-spacing: calc(1em * 2 / 100); color: var(--wsh-text) !important; text-align: center; margin-bottom: 24px; } .wsh-lead-text:last-child { margin-bottom: 0; } @media (max-width: 540px) { .wsh-lead-text { font-size: 13px; } } /* ---------------------------------------------------------------- 3大特典 Overview ---------------------------------------------------------------- */ .wsh-overview-section { background: #f0f7f3 !important; padding: 64px 40px; } @media (max-width: 540px) { .wsh-overview-section { padding: 48px 20px; } } .wsh-overview__heading { text-align: center; font-size: 24px; font-weight: 500; color: var(--wsh-navy) !important; letter-spacing: calc(1em * 16 / 100); margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--wsh-border); } .wsh-overview-grid { display: flex; flex-direction: column; gap: 12px; } .wsh-overview-item { display: flex; align-items: center; gap: 24px; background: var(--wsh-white) !important; border: 1px solid var(--wsh-border); padding: 24px; } .wsh-ov-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; min-width: 76px; height: 76px; background: var(--wsh-navy) !important; color: var(--wsh-white) !important; border-radius: 12px; } .wsh-ov-badge__label { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 12 / 100); } .wsh-ov-badge__num { font-family: futura-pt, 'Jost', sans-serif; font-size: 30px; font-weight: 400; line-height: 1.1; letter-spacing: .06em; } .wsh-ov-content { flex: 1; } .wsh-ov-label { font-size: 19px; font-weight: 500; color: var(--wsh-navy) !important; line-height: 1.7; letter-spacing: calc(1em * 4 / 100); margin-bottom: 6px; } .wsh-ov-pct { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; line-height: 1; margin-bottom: 0; } .wsh-ov-pct__num { font-family: futura-pt, 'Jost', sans-serif; font-size: clamp(40px, 8vw, 48px); font-weight: 600; color: var(--wsh-orange) !important; letter-spacing: .04em; } .wsh-ov-pct__unit { font-family: futura-pt, 'Jost', sans-serif; font-size: clamp(20px, 4vw, 23px); font-weight: 600; color: var(--wsh-orange) !important; letter-spacing: .06em; } .wsh-ov-sub { font-size: 15px; font-weight: 400; letter-spacing: calc(1em * 4 / 100); color: var(--wsh-sub) !important; margin-bottom: 3px; } .wsh-ov-sarani { display: inline-block; background: var(--wsh-orange) !important; color: var(--wsh-white) !important; font-size: 9px; font-weight: 600; letter-spacing: calc(1em * 6 / 100); padding: 2px 8px; margin-right: 4px; vertical-align: middle; line-height: 1.7; } /* ---------------------------------------------------------------- Section Tokuten Badge ---------------------------------------------------------------- */ .wsh-tokuten-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; background: var(--wsh-navy) !important; color: var(--wsh-white) !important; border-radius: 14px; margin: 0 auto 32px; } .wsh-tokuten-badge__label { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 14 / 100); } .wsh-tokuten-badge__num { font-family: futura-pt, 'Jost', sans-serif; font-size: 38px; font-weight: 400; line-height: 1.1; letter-spacing: .06em; } /* ---------------------------------------------------------------- Section Banner（紺ボーダー囲み） ---------------------------------------------------------------- */ .wsh-banner { background: transparent !important; border: 1.5px solid var(--wsh-navy) !important; padding: 14px 24px; margin-bottom: 4px; position: relative; } .wsh-banner::before { display: none; } .wsh-banner p { color: var(--wsh-navy) !important; font-size: 17px; font-weight: 500; text-align: center; letter-spacing: calc(1em * 8 / 100); line-height: 1.8; } /* 特典3セクション内バナー（紺背景の上では白ボーダー・白テキスト） */ .wsh-tokuten3-section .wsh-banner { border-color: rgba(255,255,255,.5) !important; } .wsh-tokuten3-section .wsh-banner p { color: rgba(255,255,255,.9) !important; } /* ---------------------------------------------------------------- %OFF Hero Display ---------------------------------------------------------------- */ .wsh-off-hero { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0 32px; } .wsh-off-hero__num { font-family: futura-pt, 'Jost', sans-serif; font-size: clamp(56px, 13vw, 96px); font-weight: 500; color: var(--wsh-orange) !important; line-height: 1; letter-spacing: .06em; } .wsh-off-hero__right { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .wsh-off-hero__top { font-size: 15px; font-weight: 500; color: var(--wsh-orange) !important; letter-spacing: calc(1em * 6 / 100); } .wsh-off-hero__pct { font-family: futura-pt, 'Jost', sans-serif; font-size: clamp(24px, 5vw, 38px); font-weight: 500; color: var(--wsh-orange) !important; line-height: 1; letter-spacing: .08em; } /* MAXテキスト（小サイズ） */ .wsh-max { display: inline-block; font-size: .36em; font-weight: 500; letter-spacing: .12em; vertical-align: middle; margin-right: .05em; line-height: 1; opacity: .8; } /* 特典2用小さいサイズ */ .wsh-off-hero--sm .wsh-off-hero__num { font-size: clamp(40px, 9vw, 68px); } .wsh-off-hero--sm .wsh-off-hero__pct { font-size: clamp(18px, 3.5vw, 28px); } /* ---------------------------------------------------------------- 特典1：ドラム式洗濯機 ---------------------------------------------------------------- */ .wsh-drum-section { background: var(--wsh-white) !important; padding: 64px 40px 0; } @media (max-width: 540px) { .wsh-drum-section { padding: 48px 20px 0; } } .wsh-drum-section .BlockComponent { margin-top: 0 !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* ---------------------------------------------------------------- 縦型コーナー ---------------------------------------------------------------- */ .wsh-tategata-section { background: var(--wsh-white) !important; padding: 64px 40px 0; } @media (max-width: 540px) { .wsh-tategata-section { padding: 48px 20px 0; } } .wsh-tategata-section .BlockComponent { margin-top: 0 !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .wsh-tategata-intro { text-align: center; font-size: 16px; font-weight: 500; color: var(--wsh-navy) !important; letter-spacing: calc(1em * 10 / 100); margin-bottom: 20px; } /* ---------------------------------------------------------------- 特典2：ランドリーグッズ ---------------------------------------------------------------- */ .wsh-tokuten2-section { background: var(--wsh-white) !important; padding: 64px 40px 0; } @media (max-width: 540px) { .wsh-tokuten2-section { padding: 48px 20px 0; } } .wsh-tokuten2-section .BlockComponent { margin-top: 0 !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .wsh-tokuten2-lead { text-align: center; font-size: 14px; font-weight: 400; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--wsh-sub) !important; margin-bottom: 12px; } .wsh-tokuten2-lead strong { color: var(--wsh-orange) !important; font-weight: 600; } /* ---------------------------------------------------------------- 特典3：2点同時注文でさらに10%OFF ---------------------------------------------------------------- */ .wsh-tokuten3-section { background: var(--wsh-navy) !important; padding: 64px 40px 48px; text-align: center; } @media (max-width: 540px) { .wsh-tokuten3-section { padding: 48px 20px 40px; } } .wsh-tokuten3-section .wsh-tokuten-badge { background: rgba(255,255,255,.15) !important; border: 1px solid rgba(255,255,255,.3); } .wsh-tokuten3-section .wsh-off-hero { justify-content: center; align-items: center; padding: 8px 0 20px; } .wsh-tokuten3-section .wsh-off-hero__num, .wsh-tokuten3-section .wsh-off-hero__top, .wsh-tokuten3-section .wsh-off-hero__pct { color: var(--wsh-white) !important; } .wsh-tokuten3-section .wsh-ov-sarani { background: rgba(255,255,255,.2) !important; font-size: 11px; align-self: center; } .wsh-tokuten3-label { font-size: 17px; font-weight: 500; color: rgba(255,255,255,.8) !important; letter-spacing: calc(1em * 8 / 100); margin-bottom: 4px; } .wsh-tokuten3-body { font-size: 16px; font-weight: 400; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: rgba(255,255,255,.7) !important; max-width: 540px; margin: 0 auto; } .wsh-tokuten3-body strong { color: var(--wsh-white) !important; font-weight: 600; } @media (max-width: 540px) { .wsh-tokuten3-body { font-size: 14px; } } /* ---------------------------------------------------------------- 安心の理由 ---------------------------------------------------------------- */ .wsh-anshin-section { background: var(--wsh-white) !important; padding: 72px 40px; } @media (max-width: 540px) { .wsh-anshin-section { padding: 56px 20px; } } .wsh-anshin-heading-wrap { text-align: center; margin-bottom: 48px; } .wsh-anshin-heading { display: inline-block; font-size: 18px; font-weight: 500; color: var(--wsh-navy) !important; letter-spacing: calc(1em * 10 / 100); border: 1px solid var(--wsh-navy); padding: 15px 32px; line-height: 1; } .wsh-anshin-accent { color: var(--wsh-orange) !important; font-style: normal; font-weight: 600; } .wsh-anshin-item { text-align: center; padding: 40px 0; border-bottom: 1px solid var(--wsh-border); } .wsh-anshin-item:last-child { border-bottom: none; } .wsh-anshin-num { display: block; font-family: futura-pt, 'Jost', sans-serif; font-size: 60px; font-weight: 300; color: var(--wsh-orange) !important; line-height: 1; letter-spacing: .1em; } .wsh-anshin-num::after { content: ""; display: block; width: 24px; height: 1px; background: var(--wsh-orange) !important; margin: 12px auto 20px; } .wsh-anshin-title { font-size: 19px; font-weight: 500; color: var(--wsh-navy) !important; letter-spacing: calc(1em * 5 / 100); line-height: 1.9; margin-bottom: 20px; } .wsh-anshin-body { font-size: 16px; font-weight: 400; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--wsh-sub) !important; max-width: 620px; margin: 0 auto; } @media (max-width: 540px) { .wsh-anshin-body { font-size: 14px; } } /* ---------------------------------------------------------------- 特典内容（Terms） ---------------------------------------------------------------- */ .wsh-terms-section { background: var(--wsh-white) !important; padding: 64px 40px 72px; } @media (max-width: 540px) { .wsh-terms-section { padding: 48px 20px 56px; } } .wsh-terms-box { background: var(--wsh-white) !important; border: 1px solid var(--wsh-border); padding: 36px 28px; } .wsh-terms-title { font-size: 18px; font-weight: 500; color: var(--wsh-navy) !important; letter-spacing: calc(1em * 10 / 100); text-align: center; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--wsh-border); } .wsh-terms-block { margin-bottom: 20px; } .wsh-terms-block:last-child { margin-bottom: 0; } .wsh-terms-label { font-size: 14px; font-weight: 600; color: var(--wsh-navy) !important; letter-spacing: calc(1em * 4 / 100); margin-bottom: 6px; } .wsh-terms-body { font-size: 14px; font-weight: 400; line-height: 2; letter-spacing: calc(1em * 3 / 100); color: var(--wsh-sub) !important; }

家事、育児、仕事をがんばるファミリーに。
仕事もプライベートも楽しみたい、アクティブなあなたに。

そんなあなたの毎日をサポートする「ドラム式洗濯機」をオトクにお使いいただくため、
「ドラムデビューCP」を開催！

天気を気にせず、夜でも気にせず、ボタン一つで洗濯から乾燥までおまかせ。

生まれた「時間」と「心のゆとり」で、あなたの暮らしはもっと豊かになります。
さあ、あなたにぴったりの一台を見つけて、快適な毎日をスタートしませんか？

《キャンペーン2大特典》

特典 1

数量限定！
対象人気ドラム式洗濯機

月額利用料

MAX30%OFF

特典 2

洗濯機を含む
２点同時注文で

洗濯機のお届け配送手数料

10%OFF

特典 1

MAX30

レンタル料ずーっと %OFF

TWINBIRD（ツインバード）ドラム式洗濯乾燥機【洗濯9kg/乾燥4.5kg】 FW-FD90W ホワイトいつでも返せるプラン

ドラムデビューキャンペーン

乾燥機能付きにアップグレードしたい方へ

【10kg以上】サイズアップしたい方へ

スペースを有効活用できるランドリー収納とセットで

キャスター付きで移動がラクなワゴンとセットで

新生活の必需家電をセットで（冷蔵庫）

新生活の必需家電とセットで（電子レンジ）

初期費用を抑えられる月額制であんしん。

試して、自分に合わなかったら返却できてあんしん。

ライフステージの変化や引っ越しがあってもあんしん。

関連カテゴリから探す