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

家具と家電の

レンタル・サブスク

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

秋花粉特集

2026/08/18

/* ================================================================ CLAS 記事ページ「実はスギ・ヒノキだけじゃない。秋花粉に、月額で備える空気清浄機」— CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください prefix: .akf-(Aki-Kafun = 秋花粉) 設計方針([[clas-tagpage-cms-html-css-rules]] 準拠): - display:grid 不使用 → flexbox - <picture>/<source> 不使用 → img2枚 + メディアクエリ - inset省略記法 不使用 → top/right/bottom/left個別指定 - img:not(:first-child){margin-top:32px} 対策 → 自前imgは margin:0 !important - 記事テンプレートは自動でタイトル・更新日を表示するため display:none で重複回避 - 商品カードは「商品セクション」機能で分割入稿される前提のため、 CSS変数は :root に、セクションスタイルは .akf-root の子孫セレクタではなく [class*="akf-"] の直接セレクタで構成(途中で .akf-root の外に出ても崩れない) Last build: 2026-08-12 ================================================================ */ /* ---------------------------------------------------------------- 記事タイトル・更新日の自動表示を非表示(確定クラス名) ---------------------------------------------------------------- */ .TitleComponent { display: none !important; } .datetime { display: none !important; } /* ---------------------------------------------------------------- CLAS グローバル見出し装飾のリセット(祖先セレクタに依存しない) ---------------------------------------------------------------- */ .akf-h2, .akf-hero__title, .akf-point__title, .akf-type__title, .akf-benefit__title, .akf-cta__title { border: none !important; border-bottom: none !important; padding-bottom: 0 !important; padding-left: 0 !important; } .akf-h2::before, .akf-h2::after, .akf-hero__title::before, .akf-hero__title::after { display: none !important; content: none !important; } /* ---------------------------------------------------------------- 変数(:root に定義。.akf-root の外に出ても参照できるようにするため) ---------------------------------------------------------------- */ :root { --akf-primary: #D96C45; /* Terracotta — CTAのみ */ --akf-primary-dark: #C45A35; --akf-secondary: #3A8E7B; /* Green — 文字色アクセントのみ */ --akf-text: #323630; --akf-sub: #646B61; --akf-muted: #979E94; --akf-border: #E8E8E8; --akf-pale: #FAF8F4; --akf-white: #FFFFFF; } /* ---------------------------------------------------------------- 全称リセット(祖先セレクタではなく対象自身に直接効かせる) ---------------------------------------------------------------- */ [class*="akf-"] { box-sizing: border-box; margin: 0; padding: 0; font-family: futura-pt, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: var(--akf-text); -webkit-font-smoothing: antialiased; } .akf-root { background: var(--akf-white); line-height: 2.0; } .akf-root a { color: inherit; text-decoration: none; } .akf-root img { max-width: 100%; display: block; margin: 0 !important; } /* ---------------------------------------------------------------- 共通: Eyebrow / H2 / Lead / Body ---------------------------------------------------------------- */ .akf-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 24 / 100); text-transform: uppercase; color: var(--akf-secondary) !important; text-align: center; margin-bottom: 14px; } .akf-h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; color: var(--akf-text) !important; line-height: 1.7; letter-spacing: calc(1em * 8 / 100); text-align: center; margin-bottom: 28px; } .akf-lead { font-size: 14px; font-weight: 400; line-height: 2.0; letter-spacing: calc(1em * 2 / 100); color: var(--akf-sub); text-align: center; max-width: 720px; margin: 0 auto; } .akf-lead--narrow { max-width: 620px; } .akf-body { font-size: 14px; font-weight: 400; line-height: 2.0; letter-spacing: calc(1em * 2 / 100); color: var(--akf-sub); max-width: 720px; margin: 0 auto; } .akf-br-sp { display: none; } @media (max-width: 600px) { .akf-br-sp { display: inline; } } /* ---------------------------------------------------------------- Hero ---------------------------------------------------------------- */ .akf-hero { position: relative !important; overflow: hidden !important; background: #6B5D4C; aspect-ratio: 2400 / 1800; } .akf-hero__bg { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 0 !important; } .akf-hero__bg img.akf-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; } .akf-hero__bg img.akf-hero__img--sp { display: none !important; } .akf-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .akf-hero__overlay { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 6% !important; z-index: 2 !important; text-align: center; } .akf-hero__anchor { display: inline-block; color: #ffffff !important; font-size: 12px; font-weight: 400; letter-spacing: calc(1em * 8 / 100); border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 4px; text-decoration: none !important; text-shadow: 0 1px 6px rgba(0,0,0,.4); } @media (max-width: 767px) { .akf-hero { aspect-ratio: 1200 / 1500; } .akf-hero__bg img.akf-hero__img--pc { display: none !important; } .akf-hero__bg img.akf-hero__img--sp { display: block !important; } } /* ---------------------------------------------------------------- Lead Section ---------------------------------------------------------------- */ .akf-lead-section { padding: 56px 40px; } @media (max-width: 600px) { .akf-lead-section { padding: 40px 16px; } } /* ---------------------------------------------------------------- Generic Section ---------------------------------------------------------------- */ .akf-section { padding: 64px 40px; border-top: 1px solid var(--akf-border); } .akf-section--pale { background: var(--akf-pale); } @media (max-width: 600px) { .akf-section { padding: 48px 16px; } } /* ---------------------------------------------------------------- 選び方の4つの視点 — Points ---------------------------------------------------------------- */ .akf-points { display: flex; flex-wrap: wrap; gap: 32px; max-width: 1000px; margin: 0 auto; } .akf-point { flex: 0 0 calc(25% - 24px); max-width: calc(25% - 24px); text-align: center; } .akf-points .akf-point__icon { width: 56px; height: 56px; margin: 0 auto 14px !important; } .akf-point__title { font-size: 15px; font-weight: 500; color: var(--akf-text) !important; line-height: 1.6; letter-spacing: calc(1em * 4 / 100); margin-bottom: 12px; } .akf-point__body { font-size: 12px; font-weight: 400; line-height: 1.9; color: var(--akf-sub); letter-spacing: calc(1em * 2 / 100); } @media (max-width: 760px) { .akf-point { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); } } /* ---------------------------------------------------------------- タイプ別おすすめ — Type Blocks ---------------------------------------------------------------- */ .akf-type { padding: 48px 40px 0; } .akf-type--last { padding-bottom: 64px; } .akf-type__head { max-width: 640px; margin: 0 auto; text-align: center; } .akf-type__badge { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 12 / 100); color: #ffffff !important; background: var(--akf-primary); border-radius: 20px; padding: 4px 16px; margin-bottom: 14px; } .akf-type__title { font-size: 18px; font-weight: 500; color: var(--akf-secondary) !important; line-height: 1.6; letter-spacing: calc(1em * 4 / 100); margin-bottom: 14px; } .akf-type__body { font-size: 13px; font-weight: 400; line-height: 2.0; letter-spacing: calc(1em * 2 / 100); color: var(--akf-sub); } @media (max-width: 600px) { .akf-type { padding: 40px 16px 0; } .akf-type--last { padding-bottom: 48px; } } /* ---------------------------------------------------------------- 月額で迎えるという選択 — Benefits ---------------------------------------------------------------- */ .akf-benefits { display: flex; flex-wrap: wrap; gap: 28px; max-width: 1000px; margin: 40px auto 0; } .akf-benefit { flex: 0 0 calc(33.333% - 19px); max-width: calc(33.333% - 19px); background: var(--akf-white); border: 1px solid var(--akf-border); border-radius: 10px; padding: 28px 24px; text-align: center; } .akf-benefit__title { font-size: 14px; font-weight: 500; color: var(--akf-text) !important; letter-spacing: calc(1em * 4 / 100); margin-bottom: 12px; } .akf-benefit__body { font-size: 12px; font-weight: 400; line-height: 1.9; color: var(--akf-sub); letter-spacing: calc(1em * 2 / 100); } @media (max-width: 760px) { .akf-benefit { flex: 0 0 100%; max-width: 100%; } } /* ---------------------------------------------------------------- 価格比較テーブル ---------------------------------------------------------------- */ .akf-table-wrap { max-width: 640px; margin: 32px auto 0; overflow-x: auto; } .akf-table { width: 100%; border-collapse: collapse; font-size: 13px; } .akf-table th, .akf-table td { border: 1px solid var(--akf-border); padding: 14px 16px; text-align: center; color: var(--akf-text); } .akf-table thead th { background: var(--akf-pale); font-weight: 500; letter-spacing: calc(1em * 2 / 100); } .akf-table tbody td:first-child { background: var(--akf-pale); font-weight: 500; white-space: nowrap; } .akf-table__note { display: block; font-size: 10px; color: var(--akf-muted); margin-top: 4px; } .akf-table-caption { font-size: 11px; color: var(--akf-muted); text-align: center; max-width: 640px; margin: 12px auto 0; } /* ---------------------------------------------------------------- まとめ・CTA ---------------------------------------------------------------- */ .akf-cta-section { padding: 72px 40px; border-top: 1px solid var(--akf-border); text-align: center; } .akf-cta__title { font-size: clamp(18px, 2.4vw, 24px); font-weight: 500; color: var(--akf-text) !important; letter-spacing: calc(1em * 8 / 100); margin-bottom: 18px; } .akf-cta__body { font-size: 13px; font-weight: 400; line-height: 2.0; color: var(--akf-sub); max-width: 560px; margin: 0 auto 32px; letter-spacing: calc(1em * 2 / 100); } .akf-cta__button { display: inline-block; background: var(--akf-primary) !important; color: #ffffff !important; border-radius: 30px; padding: 14px 40px; font-size: 14px; font-weight: 500; letter-spacing: calc(1em * 4 / 100); transition: background-color .2s; } .akf-cta__button:hover { background: var(--akf-primary-dark) !important; } @media (max-width: 600px) { .akf-cta-section { padding: 56px 16px; } } #id9bgqq8c9yn { visibility: visible !important; }
#idmr6l0fzcag { visibility: visible !important; }
#iduu66z8534p { visibility: visible !important; }

この記事をシェアする