サイズが合えばおトク！ベッド＆マットレスSALE

/* ================================================================ CLAS × ベッド & マットレス SALE「サイズが合えばおトク」— 記事ページ LP CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください ※ 差し色チェア CSS / ソファ CSS が入っている場合は【末尾に追記】してください（置換不可） prefix: .bed- Last build: 2026-06-24 カラーテーマ: ディープネイビー × オフホワイト × SALEレッド キャンペーン期間: 2026年6月24日〜7月8日 ================================================================ */ /* ---------------------------------------------------------------- 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; } /* ---------------------------------------------------------------- CSS Variables — :root で定義することで、CMSが各ブロックを 別コンテナに包んでも全セクションで変数が有効になります ---------------------------------------------------------------- */ :root { --bed-deep: #1A2640; --bed-mid: #4A5A6B; --bed-accent: #C8402A; --bed-gold: #B8956A; --bed-light: #F5F4F1; --bed-pale: #FAFAF8; --bed-border: #E2DDD8; --bed-white: #FFFFFF; --bed-text: #2D3748; --bed-sub: #6B7280; --bed-shadow: 0 2px 16px rgba(26,38,64,.08); } .bed-root { font-family: futura-pt, "Noto Sans JP", arial, sans-serif; color: var(--bed-text); background: var(--bed-pale) !important; -webkit-font-smoothing: antialiased; } .bed-root *, .bed-root *::before, .bed-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .bed-root ul { list-style: none; } .bed-root a { text-decoration: none; } .bed-root img { display: block; width: 100%; } /* ---------------------------------------------------------------- Utilities ---------------------------------------------------------------- */ .bed-container { max-width: 800px; margin: 0 auto; padding: 0 40px; } @media (max-width: 540px) { .bed-container { padding: 0 20px; } } .bed-eyebrow { display: block; font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 32 / 100); text-transform: uppercase; text-align: center; color: var(--bed-gold) !important; margin-bottom: 12px; } .bed-h2 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 200; color: var(--bed-deep) !important; line-height: 1.85; letter-spacing: calc(1em * 12 / 100); margin-bottom: 20px; } .bed-h2--center { text-align: center !important; } .bed-lead { font-size: 13px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--bed-sub); max-width: 600px; text-align: center !important; margin: 0 auto 28px; } /* Aspect ratio helper */ .bed-aspect { position: relative; overflow: hidden; } .bed-aspect img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .bed-aspect--16x9 { padding-top: 56.25%; } .bed-aspect--4x3 { padding-top: 75%; } /* ---------------------------------------------------------------- Framing Band ---------------------------------------------------------------- */ .bed-root .bed-framing { background: var(--bed-deep) !important; color: rgba(255,255,255,.6) !important; text-align: center !important; font-size: 10px; font-weight: 400; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; padding: 10px 20px; line-height: 1; } .bed-root .bed-framing strong { color: var(--bed-white) !important; font-weight: 600; } /* ---------------------------------------------------------------- Hero ---------------------------------------------------------------- */ .bed-hero { position: relative; overflow: hidden; background: #1A2F4A !important; /* フォールバック背景 */ } .bed-hero__img-pc, .bed-hero__img-sp { width: 100%; object-fit: cover; object-position: center center; } /* PC: デフォルトでPC画像表示、SP画像は非表示 */ .bed-hero__img-pc { display: block; min-height: 520px; object-position: center top; } .bed-hero__img-sp { display: none !important; } /* SP: 767px以下でPC非表示・SP表示に切り替え */ @media (max-width: 767px) { .bed-hero__img-pc { display: none !important; } .bed-hero__img-sp { display: block !important; aspect-ratio: 750 / 940; } .bed-hero { min-height: unset; } } .bed-hero__overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 40px 40px 52px; } @media (max-width: 540px) { .bed-hero__overlay { padding: 28px 24px 40px; } } /* SALE バッジ */ .bed-hero__sale-badge { display: inline-block; background: var(--bed-accent) !important; color: var(--bed-white) !important; font-size: 11px; font-weight: 700; letter-spacing: calc(1em * 16 / 100); padding: 5px 14px 4px; margin-bottom: 10px; } .bed-hero__period { display: block; font-size: 11px; font-weight: 400; letter-spacing: calc(1em * 8 / 100); color: rgba(255,255,255,.72) !important; margin-bottom: 14px; } .bed-hero__catch { font-size: clamp(26px, 4vw, 38px); font-weight: 200; color: var(--bed-white) !important; line-height: 1.55; letter-spacing: calc(1em * 8 / 100); margin-bottom: 16px; } .bed-hero__sub { display: none !important; } .bed-hero__overlay { text-align: center; } .bed-hero__anchor { display: inline-block; font-size: 14px; font-weight: 400; letter-spacing: calc(1em * 18 / 100); color: rgba(245,244,241,.9) !important; border-bottom: 1px solid rgba(245,244,241,.4) !important; padding-bottom: 2px; transition: opacity .2s; } .bed-hero__anchor:hover { opacity: .7; } /* ---------------------------------------------------------------- Campaign Intro ---------------------------------------------------------------- */ .bed-intro-section { padding: 72px 40px; background: var(--bed-white) !important; } @media (max-width: 540px) { .bed-intro-section { padding: 56px 20px; } } .bed-intro__body { font-size: 14px; font-weight: 300; line-height: 2.2; letter-spacing: calc(1em * 5 / 100); color: var(--bed-text); margin-bottom: 28px; max-width: 620px; } .bed-intro__deadline { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--bed-border); border-left: 3px solid var(--bed-accent); background: var(--bed-light) !important; max-width: 520px; } .bed-intro__deadline-label { font-size: 10px; font-weight: 600; letter-spacing: calc(1em * 20 / 100); text-transform: uppercase; color: var(--bed-accent) !important; white-space: nowrap; } .bed-intro__deadline-date { font-size: 13px; font-weight: 300; letter-spacing: calc(1em * 4 / 100); color: var(--bed-deep) !important; } @media (max-width: 600px) { .bed-intro__deadline { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ---------------------------------------------------------------- 3 Points ---------------------------------------------------------------- */ .bed-points-section { padding: 80px 40px; background: var(--bed-light) !important; } @media (max-width: 540px) { .bed-points-section { padding: 60px 20px; } } .bed-points-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 760px; margin: 0 auto; } @media (max-width: 760px) { .bed-points-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; } } .bed-point { background: var(--bed-white) !important; border: 1px solid var(--bed-border); border-radius: 2px; padding: 36px 28px 40px; text-align: center; } .bed-point__icon { width: 52px; height: 52px; margin: 0 auto 20px; color: var(--bed-deep); } .bed-point__icon svg { width: 100%; height: 100%; } .bed-point__num { display: block; font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 24 / 100); color: var(--bed-gold) !important; margin-bottom: 10px; } .bed-point__title { font-size: 16px; font-weight: 200; color: var(--bed-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 8 / 100); margin-bottom: 14px; } .bed-point__asterisk { font-size: 10px; vertical-align: super; margin-left: 2px; color: var(--bed-sub) !important; } .bed-points__note { font-size: 10px; font-weight: 300; color: var(--bed-sub) !important; letter-spacing: calc(1em * 3 / 100); text-align: right; margin-top: 12px; max-width: 800px; margin-left: auto; margin-right: auto; } .bed-point__body { font-size: 12px; font-weight: 300; line-height: 2.0; letter-spacing: calc(1em * 3 / 100); color: var(--bed-sub); } /* ---------------------------------------------------------------- Items Section Heading ---------------------------------------------------------------- */ .bed-items-head-section { padding: 72px 40px 52px; background: var(--bed-white) !important; text-align: center; } @media (max-width: 540px) { .bed-items-head-section { padding: 56px 20px 40px; } } .bed-items-badges { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; } .bed-badge--sale { display: inline-block; background: var(--bed-accent) !important; color: var(--bed-white) !important; font-size: 12px; font-weight: 600; letter-spacing: calc(1em * 8 / 100); padding: 6px 16px; } .bed-badge--period { display: inline-block; background: transparent !important; color: var(--bed-accent) !important; border-color: var(--bed-accent) !important; font-size: 12px; font-weight: 300; letter-spacing: calc(1em * 4 / 100); border: 1px solid var(--bed-border); padding: 5px 14px; } /* ---------------------------------------------------------------- Category Sections（ベッドフレーム / マットレス） ---------------------------------------------------------------- */ .bed-category-section { background: #FFFFFF !important; padding: 40px 40px 8px; border-top: 1px solid #E2DDD8; } @media (max-width: 540px) { .bed-category-section { padding: 32px 20px 8px; } } /* CMS BlockComponent（商品カード）の margin-top を詰める */ .BlockComponent { margin-top: 0 !important; } .bed-category-header { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; max-width: 800px; margin-left: auto; margin-right: auto; } .bed-category-title { font-size: 18px; font-weight: 200; color: var(--bed-deep) !important; letter-spacing: calc(1em * 10 / 100); line-height: 1; } .bed-category-count { font-size: 11px; font-weight: 400; color: var(--bed-sub) !important; letter-spacing: calc(1em * 8 / 100); border: 1px solid var(--bed-border); padding: 3px 10px; border-radius: 1px; } /* ---------------------------------------------------------------- Related Nav ---------------------------------------------------------------- */ .bed-related { padding: 72px 40px; background: var(--bed-light) !important; } @media (max-width: 480px) { .bed-related { padding: 56px 20px; } } .bed-related__head { text-align: center; margin-bottom: 40px; } .bed-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; } @media (max-width: 860px) { .bed-related__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .bed-related__grid { grid-template-columns: 1fr; max-width: 400px; } } .bed-related__card { display: block; border: 1px solid var(--bed-border); border-radius: 2px; overflow: hidden; text-decoration: none !important; background: var(--bed-white); transition: box-shadow .22s, transform .22s, border-color .22s; } .bed-related__card:hover { box-shadow: var(--bed-shadow); transform: translateY(-3px); border-color: var(--bed-gold); } .bed-related__card-img { overflow: hidden; background: var(--bed-light); } .bed-related__card-img img { transition: transform .35s; } .bed-related__card:hover .bed-related__card-img img { transform: scale(1.04); } .bed-related__card-content { padding: 14px 16px 18px; } .bed-related__card-tag { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 24 / 100); text-transform: uppercase; color: var(--bed-gold) !important; display: block; margin-bottom: 6px; } .bed-related__card-title { font-size: 12px; font-weight: 300; color: var(--bed-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 5 / 100); margin-bottom: 10px; } .bed-related__card-arrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 16 / 100); color: var(--bed-gold) !important; } /* ---------------------------------------------------------------- Core Message ---------------------------------------------------------------- */ .bed-core-msg-section { padding: 88px 40px; background: var(--bed-deep) !important; text-align: center; } @media (max-width: 540px) { .bed-core-msg-section { padding: 64px 20px; } } /* ----------------------------------------------------------------- Campaign Terms ----------------------------------------------------------------- */ .bed-terms-section { padding: 56px 40px 64px; background: var(--bed-pale) !important; border-top: 1px solid var(--bed-border); } @media (max-width: 540px) { .bed-terms-section { padding: 40px 20px 48px; } } .bed-terms__title { font-size: 11px; font-weight: 400; letter-spacing: calc(1em * 12 / 100); color: var(--bed-sub) !important; text-transform: uppercase; text-align: center; margin-bottom: 24px; max-width: 800px; margin-left: auto; margin-right: auto; } .bed-terms__list { max-width: 800px; margin: 0 auto; } .bed-terms__row { display: flex; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--bed-border); align-items: baseline; } .bed-terms__row:last-child { border-bottom: none; } .bed-terms__label { font-size: 11px; font-weight: 400; color: var(--bed-sub) !important; letter-spacing: calc(1em * 6 / 100); white-space: nowrap; min-width: 140px; } .bed-terms__desc { font-size: 12px; font-weight: 300; color: var(--bed-text) !important; letter-spacing: calc(1em * 4 / 100); line-height: 1.7; } @media (max-width: 540px) { .bed-terms__row { flex-direction: column; gap: 4px; } .bed-terms__label { min-width: unset; } } .bed-core-msg { max-width: 680px; margin: 0 auto; } .bed-core-msg__eyebrow { display: block; font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 32 / 100); text-transform: uppercase; color: rgba(184,149,106,.65) !important; margin-bottom: 20px; } .bed-core-msg__head { font-size: clamp(18px, 2.5vw, 24px); font-weight: 200; color: rgba(245,244,241,.92) !important; line-height: 2.0; letter-spacing: calc(1em * 12 / 100); margin-bottom: 20px; } .bed-core-msg__body { font-size: 12px; font-weight: 300; line-height: 2.2; letter-spacing: calc(1em * 4 / 100); color: rgba(200,196,190,.72) !important; max-width: 560px; margin: 0 auto; } #id { visibility: visible !important; }