{{ toastMessage }}
家具と家電のレンタル ・サブスク CLAS (クラス)
メニュー

家具と家電の

レンタル・サブスク

カート {{ cartQuantity }}
{{ categoriesBarTitle }}

狭い部屋でも圧迫感なし。ホワイト&ベージュ系ソファ特集

2026/06/23

/* ================================================================ CLAS × ソファ特集「狭い部屋でも圧迫感なし。」— 記事ページ LP CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください ※ 差し色チェア CSS が入っている場合は【末尾に追記】してください prefix: .sof- Last build: 2026-06-23 カラーテーマ: アイボリー × ウォームサンド ─ ホワイト・ベージュ系ソファに合わせ、ページ全体を淡く温かみのある アイボリートーンでまとめる。差し色チェアページ(.sas-)とは別系統。 ================================================================ */ /* ---------------------------------------------------------------- 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*="CheckedItem"], [class*="RecentItem"], [class*="WatchedItem"], [class*="BrowsedItem"] { display: none !important; } /* ---------------------------------------------------------------- CLAS グローバル h2/h3 装飾(下線・ボーダー)を LP 内でリセット ---------------------------------------------------------------- */ .sof-root h1, .sof-root h2, .sof-root h3 { border: none !important; border-bottom: none !important; padding-bottom: 0 !important; padding-left: 0 !important; margin-bottom: 0 !important; } .sof-root h1::before, .sof-root h1::after, .sof-root h2::before, .sof-root h2::after, .sof-root h3::before, .sof-root h3::after { display: none !important; content: none !important; } /* ---------------------------------------------------------------- 変数 / ベース テーマ: アイボリー × ウォームサンド ─ ホワイト・ベージュ系ソファが主役。ページの枠組みはごく淡く、 ソファそのものの質感と白さを引き立てる設計。 ---------------------------------------------------------------- */ .sof-root { --sof-deep: #1C1815; /* ウォームブラック(見出し・フレーム) */ --sof-mid: #5A4E46; /* ウォームダークグレー */ --sof-accent: #A4917E; /* ウォームサンド(アクセント) */ --sof-light: #F5F1EB; /* アイボリー(セクション背景) */ --sof-pale: #FAF8F5; /* 極淡アイボリー(カード背景) */ --sof-text: #1A1A18; --sof-sub: #4A4540; --sof-muted: #80786E; --sof-border: #E5DDD5; /* ウォームサンドボーダー */ --sof-white: #FFFFFF; --sof-shadow: 0 2px 16px rgba(28,24,21,.07); font-family: futura-pt, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: var(--sof-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.8; font-weight: 400; letter-spacing: calc(1em * 3 / 100); } .sof-root *, .sof-root *::before, .sof-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .sof-root img { max-width: 100%; display: block; } .sof-root a { color: inherit; text-decoration: none; } .sof-root ul { list-style: none; } .sof-root p { margin: 0; } /* ---------------------------------------------------------------- アスペクト比ヘルパー ---------------------------------------------------------------- */ .sof-aspect { position: relative; overflow: hidden; } .sof-aspect img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .sof-aspect--4x5 { aspect-ratio: 4 / 5; } .sof-aspect--4x3 { aspect-ratio: 4 / 3; } .sof-aspect--16x9 { aspect-ratio: 16 / 9; } /* ライフスタイル写真(ピラー・コンセプト)は上端基準 */ .sof-pillar__media img, .sof-concept__visual img { object-position: center top !important; } .sof-img--center { object-position: center center !important; } .sof-img--top { object-position: center 20% !important; } /* ---------------------------------------------------------------- 共通: Eyebrow / H2 / Lead ---------------------------------------------------------------- */ .sof-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--sof-accent) !important; margin-bottom: 12px; } .sof-h2 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 200; color: var(--sof-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); margin-bottom: 18px; } .sof-h2--center { text-align: center; } .sof-lead { font-size: 13px; font-weight: 300; line-height: 2.1; color: var(--sof-sub); letter-spacing: calc(1em * 4 / 100); text-align: center !important; max-width: 700px; margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------- Framing Band ---------------------------------------------------------------- */ .sof-root .sof-framing { background: #1C1815 !important; color: #d8d0c8 !important; text-align: center !important; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 10px 24px; font-weight: 500; } .sof-root .sof-framing * { color: #d8d0c8 !important; } .sof-root .sof-framing strong { color: #ffffff !important; font-weight: 700; } /* ---------------------------------------------------------------- Hero fallback 色: #D8D2CA(ソファ商品写真の白背景に近い淡グレー) ---------------------------------------------------------------- */ .sof-root .sof-hero { position: relative !important; overflow: hidden !important; background: #D8D2CA; min-height: 520px; padding: 0 !important; margin: 0 !important; } .sof-root .sof-hero .sof-hero__img-pc, .sof-root .sof-hero .sof-hero__img-sp { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; z-index: 0; } .sof-root .sof-hero .sof-hero__img-sp { display: none !important; } @media (max-width: 767px) { .sof-root .sof-hero { min-height: 0; aspect-ratio: 4 / 5; } .sof-root .sof-hero .sof-hero__img-pc { display: none !important; } .sof-root .sof-hero .sof-hero__img-sp { display: block !important; object-position: center center !important; } } /* グラデーション遮幕 */ .sof-root .sof-hero .sof-hero__grad { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 55% !important; z-index: 1 !important; pointer-events: none !important; display: block !important; object-fit: fill !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* テキストオーバーレイ */ .sof-root .sof-hero .sof-hero__overlay { position: absolute !important; left: 0; right: 0; bottom: 6%; z-index: 2; padding: 0 48px; text-align: center; } .sof-root .sof-hero .sof-hero__caption { color: #ffffff !important; font-size: clamp(13px, 1.6vw, 17px); line-height: 1.85; font-weight: 500; letter-spacing: .04em; text-shadow: 0 1px 8px rgba(0,0,0,.6), 0 2px 20px rgba(0,0,0,.4); max-width: 760px; margin: 0 auto; } .sof-root .sof-hero .sof-hero__anchor { display: inline-block; margin-top: 18px; color: rgba(255,255,255,.9) !important; font-size: 12px; letter-spacing: .12em; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; text-decoration: none !important; } @media (max-width: 767px) { .sof-root .sof-hero .sof-hero__overlay { bottom: 10%; padding: 0 20px; } .sof-root .sof-hero .sof-hero__caption { font-size: 13px; } } /* ---------------------------------------------------------------- Intro Section ---------------------------------------------------------------- */ .sof-root .sof-intro-section { padding: 64px 40px; background: var(--sof-white); text-align: center !important; } .sof-root .sof-intro-section .sof-intro-lead { font-size: 15px; line-height: 2.0; color: var(--sof-sub); max-width: 680px; margin: 16px auto 0; text-align: center !important; } @media (max-width: 600px) { .sof-root .sof-intro-section { padding: 48px 20px; } } /* ---------------------------------------------------------------- Quick Thumbs ---------------------------------------------------------------- */ .sof-thumbs { padding: 24px 40px; background: var(--sof-white); display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--sof-border); border-bottom: 1px solid var(--sof-border); } .sof-thumb { display: block; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid var(--sof-border); flex-shrink: 0; transition: border-color .2s, transform .2s; } .sof-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .sof-thumb:hover { border-color: var(--sof-accent); transform: scale(1.08); } @media (max-width: 600px) { .sof-thumbs { padding: 16px 20px; gap: 8px; } .sof-thumb { width: 48px; height: 48px; } } /* ---------------------------------------------------------------- Concept Section ---------------------------------------------------------------- */ .sof-concept { padding: 88px 40px; background: var(--sof-light); } .sof-concept__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; max-width: 1100px; margin: 0 auto; align-items: center; } .sof-concept__copy p { font-size: 13px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--sof-sub); margin-top: 16px; } @media (max-width: 760px) { .sof-concept { padding: 60px 20px; } .sof-concept__grid { grid-template-columns: 1fr; gap: 36px; } .sof-concept__visual { order: -1; } } /* ---------------------------------------------------------------- Pillars(3つのルール) ---------------------------------------------------------------- */ .sof-pillars { background: var(--sof-white); } .sof-pillar { padding: 80px 40px; border-top: 1px solid var(--sof-border); } .sof-pillar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1100px; margin: 0 auto; align-items: center; } .sof-pillar--reverse .sof-pillar__grid { direction: rtl; } .sof-pillar--reverse .sof-pillar__text, .sof-pillar--reverse .sof-pillar__media { direction: ltr; } .sof-pillar__num { font-family: futura-pt, arial, "Noto Sans JP", sans-serif; font-size: 72px; font-weight: 200; color: #E2DAD2 !important; line-height: 1; letter-spacing: calc(1em * 4 / 100); display: block; margin-bottom: 12px; } .sof-pillar__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 36 / 100); text-transform: uppercase; color: var(--sof-accent) !important; display: block; margin-bottom: 12px; } .sof-pillar__title { font-size: clamp(18px, 2.2vw, 24px); font-weight: 200; color: var(--sof-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); margin-bottom: 18px; } .sof-pillar__body { font-size: 13px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--sof-sub); max-width: 560px; } @media (max-width: 760px) { .sof-pillar { padding: 56px 20px; } .sof-pillar__grid { grid-template-columns: 1fr; gap: 32px; direction: ltr; } .sof-pillar--reverse .sof-pillar__grid { direction: ltr; } } /* ---------------------------------------------------------------- Items Section ---------------------------------------------------------------- */ .sof-root .sof-items-section { padding: 88px 40px; background: var(--sof-light); } .sof-root .sof-items-section .sof-items-head { text-align: center !important; margin-bottom: 52px; } .sof-root .sof-items-section .sof-lead { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .sof-item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; } @media (max-width: 860px) { .sof-item-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .sof-item-grid { grid-template-columns: 1fr; max-width: 400px; } .sof-root .sof-items-section { padding: 60px 20px; } } /* Item Card */ .sof-item-card { display: block; background: var(--sof-white); border: 1px solid var(--sof-border); border-radius: 2px; overflow: hidden; text-decoration: none !important; color: inherit; transition: box-shadow .25s, transform .25s; } .sof-item-card:hover { box-shadow: 0 8px 28px rgba(28,24,21,.10); transform: translateY(-3px); } .sof-item-card__media { overflow: hidden; } .sof-item-card .sof-aspect img { object-position: center center !important; } .sof-item-card__body { padding: 18px 20px 22px; } .sof-item-card__num { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); color: var(--sof-accent) !important; display: block; margin-bottom: 6px; } .sof-item-card__brand { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 18 / 100); color: var(--sof-deep) !important; text-transform: uppercase; display: block; margin-bottom: 4px; } .sof-item-card__name { font-size: 13px; font-weight: 300; color: var(--sof-text) !important; line-height: 1.7; letter-spacing: calc(1em * 6 / 100); display: block; margin-bottom: 8px; } /* ---- 月額価格バッジ ---- */ .sof-item-card__price { display: inline-block; font-size: 13px; font-weight: 500; color: var(--sof-deep) !important; letter-spacing: calc(1em * 2 / 100); margin-bottom: 12px; padding: 3px 10px; background: var(--sof-light) !important; border: 1px solid var(--sof-border); border-radius: 2px; } .sof-item-card__features { display: flex; flex-direction: column; gap: 6px; } .sof-item-card__features li { font-size: 11px; font-weight: 300; line-height: 1.8; letter-spacing: calc(1em * 4 / 100); color: var(--sof-sub); padding-left: 14px; position: relative; } .sof-item-card__features li::before { content: '—'; position: absolute; left: 0; color: var(--sof-accent); font-size: 11px; top: 1px; } /* ---------------------------------------------------------------- Related Nav ---------------------------------------------------------------- */ .sof-related { padding: 72px 40px; background: var(--sof-white); } .sof-related__head { text-align: center; margin-bottom: 40px; } .sof-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1060px; margin: 0 auto; } @media (max-width: 860px) { .sof-related__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .sof-related__grid { grid-template-columns: 1fr; max-width: 400px; } .sof-related { padding: 56px 20px; } } .sof-related__card { display: block; border: 1px solid var(--sof-border); border-radius: 2px; overflow: hidden; text-decoration: none !important; color: inherit; background: var(--sof-white); transition: box-shadow .22s, transform .22s, border-color .22s; } .sof-related__card:hover { box-shadow: var(--sof-shadow); transform: translateY(-3px); border-color: var(--sof-accent); } .sof-related__card-img { overflow: hidden; background: var(--sof-light); } .sof-related__card-img img { transition: transform .35s; } .sof-related__card:hover .sof-related__card-img img { transform: scale(1.04); } .sof-related__card-content { padding: 16px 18px 18px; } .sof-related__card-tag { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--sof-accent) !important; display: block; margin-bottom: 8px; } .sof-related__card-title { font-size: 13px; font-weight: 300; color: var(--sof-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 6 / 100); margin-bottom: 6px; } .sof-related__card-desc { font-size: 11px; font-weight: 300; line-height: 1.9; letter-spacing: calc(1em * 4 / 100); color: var(--sof-sub); margin-bottom: 12px; } .sof-related__card-arrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 20 / 100); color: var(--sof-accent) !important; } /* ---------------------------------------------------------------- Core Message — ウォームブラック背景 ---------------------------------------------------------------- */ .sof-root .sof-core-msg-section { padding: 88px 40px; background: #1C1815 !important; } .sof-root .sof-core-msg-section .sof-core-msg { max-width: 760px; margin: 0 auto; text-align: center !important; } .sof-root .sof-core-msg-section .sof-core-msg * { color: #d8d0c8 !important; } .sof-root .sof-core-msg-section .sof-core-msg .sof-core-msg__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 32 / 100); text-transform: uppercase; color: rgba(216,208,200,.5) !important; display: block; margin-bottom: 16px; } .sof-root .sof-core-msg-section .sof-core-msg .sof-core-msg__head { font-size: clamp(18px, 2.5vw, 26px); font-weight: 200; color: #F5F0EB !important; margin-bottom: 20px; line-height: 2.0; letter-spacing: calc(1em * 14 / 100); } .sof-root .sof-core-msg-section .sof-core-msg .sof-core-msg__body { font-size: 12px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: #d8d0c8 !important; max-width: 620px; margin: 0 auto; } @media (max-width: 600px) { .sof-root .sof-core-msg-section { padding: 64px 20px; } } /* ---------------------------------------------------------------- 記事ページ デフォルト タイトル・日付 非表示 (CMS が自動挿入する <section> タイトルと <p class="datetime"> を隠す) ---------------------------------------------------------------- */ .article_detail > section:first-child { display: none !important; } p.datetime { display: none !important; } #id { visibility: visible !important; }
ブークレソファ Albi(アルビー)
ブークレソファ Albi(アルビー) 3P ホワイト 汚損補償 無し 配送0円プラン
あとから購入可能
7,000 円/月〜
商品をくわしく見る
ブークレソファ Albi(アルビー)
ブークレソファ Albi(アルビー) 2.5P ホワイト 汚損保障 無し 配送0円プラン
あとから購入可能
5,500 円/月〜
商品をくわしく見る
ブークレソファ Albi(アルビー)
ブークレソファ Albi(アルビー) オットマン ホワイト 汚損保障無し 配送0円プラン
あとから購入可能
1,900 円/月〜
商品をくわしく見る
ボリュームローバックソファ
ボリュームローバックソファ 2P ベージュ 汚損補償 無し 配送0円プラン
あとから購入可能
8,000 円/月〜
商品をくわしく見る
ワンルーム フロアソファ
ワンルーム フロアソファ 1P ベージュ 汚損補償 無し 配送0円プラン
あとから購入可能
3,000 円/月〜
商品をくわしく見る
ワンルーム フロアソファ
ワンルーム フロアソファ 2P ベージュ 汚損補償無し 配送0円プラン
あとから購入可能
4,500 円/月〜
商品をくわしく見る
リビングソファ Meissa(メイサ)
リビングソファ Meissa(メイサ) 2P ブークレグレー 汚損保障 無し 配送0円プラン
あとから購入可能
4,500 円/月〜
商品をくわしく見る
入荷待ち リビングソファ Meissa(メイサ)
リビングソファ Meissa(メイサ) 2P コーデュロイベージュ 汚損保障 無し 配送0円プラン
あとから購入可能
4,500 円/月〜
商品をくわしく見る
リビングソファ Meissa(メイサ)
リビングソファ Meissa(メイサ) 3P ブークレグレー 汚損保障無し 配送0円プラン
あとから購入可能
6,501 円/月〜
商品をくわしく見る
入荷待ち リビングソファ Meissa(メイサ)
リビングソファ Meissa(メイサ) 3P コーデュロイベージュ 汚損保障無し 配送0円プラン
あとから購入可能
6,501 円/月〜
商品をくわしく見る
入荷待ち リビングソファ Meissa(メイサ)
リビングソファ Meissa(メイサ) 3P コーデュロイグレー 汚損保障無し 配送0円プラン
あとから購入可能
6,501 円/月〜
商品をくわしく見る
入荷待ち ビーンソファ
ビーンソファ 2P ライトグレー 汚損補償 無し 配送0円プラン
あとから購入可能
6,501 円/月〜
商品をくわしく見る
nora. プラリネ ソファ
nora. プラリネ ソファ シェーズ セメント 汚損補償 無し 配送0円プラン
あとから購入可能
6,000 円/月〜
商品をくわしく見る
nora. プラリネ ソファ
nora. プラリネ ソファ コーナー セメント 汚損補償 無し 配送0円プラン
あとから購入可能
4,000 円/月〜
商品をくわしく見る
nora. プラリネ ソファ
nora. プラリネ ソファ 1人掛け セメント 汚損補償 無し 配送0円プラン
あとから購入可能
3,000 円/月〜
商品をくわしく見る
ステッチソファ&オットマン
ステッチソファ&オットマン 2P ホワイト 汚損補償 無し 配送0円プラン
あとから購入可能
3,800 円/月〜
商品をくわしく見る
入荷待ち 3Pソファベッド Atria(アトリア)
3Pソファベッド Atria(アトリア) 3P ブークレホワイト 汚損保障 無し 配送0円プラン
あとから購入可能
4,500 円/月〜
商品をくわしく見る
1Pローソファ Ramka(ラムカ)
1Pローソファ Ramka(ラムカ) 1P オフホワイト 汚損保障 無し 配送0円プラン
あとから購入可能
2,200 円/月〜
商品をくわしく見る
1Pローソファ Ramka(ラムカ)
1Pローソファ Ramka(ラムカ) 1P グレージュ 汚損保障 無し 配送0円プラン
あとから購入可能
2,200 円/月〜
商品をくわしく見る
3Pソファベッド Capella(カペラ)
3Pソファベッド Capella(カペラ) 3P グレージュ 汚損保障 無し 配送0円プラン
あとから購入可能
3,500 円/月〜
商品をくわしく見る
Koala KINFORT ソファ
Koala KINFORT ソファ 2.5人掛け プレミアムライン‗ サンドベージュ 汚損補償 無し 配送0円プラン
あとから購入可能
5,550 円/月〜
商品をくわしく見る
入荷待ち Koala KINFORT ソファ
Koala KINFORT ソファ 2人掛け プレミアムライン‗ サンドベージュ 汚損補償 無し 配送0円プラン
あとから購入可能
5,550 円/月〜
商品をくわしく見る
CIRCLE ソファ ソリッド ナチュラル
CIRCLE ソファ ソリッド ナチュラル 2人掛け BEIGE NA 汚損補償 無し 配送0円プラン
あとから購入可能
4,500 円/月〜
商品をくわしく見る
CIRCLE ソファ ソリッド ナチュラル
CIRCLE ソファ ソリッド ナチュラル 1人掛け BEIGE NA 汚損補償 無し 配送0円プラン
2,800 円/月〜
商品をくわしく見る
nora. マナー ソファ
nora. マナー ソファ 2人掛け アリボリ― 本体のみ 配送0円プラン
あとから購入可能
6,000 円/月〜
商品をくわしく見る
入荷待ち AIMO ソファ
AIMO ソファ 2人掛け アイボリー 汚損補償 無し 配送0円プラン
あとから購入可能
3,800 円/月〜
商品をくわしく見る
回転ソファ座椅子 IZU(イズ)
回転ソファ座椅子 IZU(イズ) Lサイズ オフホワイト 汚損補償 無し 配送0円プラン
あとから購入可能
4,500 円/月〜
商品をくわしく見る
回転ソファ座椅子 IZU(イズ)
回転ソファ座椅子 IZU(イズ) SMサイズ オフホワイト 汚損補償 付き 配送0円プラン
あとから購入可能
3,800 円/月〜
商品をくわしく見る

この記事をシェアする