秋のお出かけアイテム・ガジェット特集

2026/09/15

/* ================================================================ CLAS × お出かけアイテム・ガジェット（GEAR UP & GO OUT）— 記事ページ LP CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください prefix: .ogg- （Outing Gear & Gadget）構成の踏襲元: hayawari_kucho_aw_article.css（同じ記事ページテンプレートで FVフルブリード・商品カード繰り返し挿入の両方を本番で実現済み）配色は社内ブランドトークン（design.md）に準拠: 白ベース／ Terracotta(#D96C45)はCTA等ごく小面積のみ／Green(#3A8E7B)は文字色アクセントのみ。ベタ塗り大面積・box-shadow・boldな日本語見出しは使わない。 ★重要（過去の分割入稿事故の再発防止）: 商品カードを挟んで複数チャンクに分割入稿すると、.ogg-root の外側に出るチャンクが発生し、.ogg-root 依存の CSS変数・子孫セレクタが効かなくなる事象が別ページで確認されている。そのため: - CSS変数は :root （ページ全体）に定義し、.ogg-root の有無に依存しない - セクション単位のスタイルは `.ogg-root .foo` ではなく `.foo` の直接セレクタで書く（祖先関係を要求しない） - 全称リセットは `.ogg-root *` ではなく `[class*="ogg-"]` 自身に効かせる ================================================================ */ /* ---------------------------------------------------------------- ★最重要（記事ページ・2026-09-10確認済み）: main.article_detail 自体に overflow:hidden がかかっており、Hero等のはみ出し（幅広表示・フルブリード）が実装上は正しく計算されていても、この祖先要素で問答無用にクリップされ画面に一切見えなかった。この解除がフルブリードの大前提。 ---------------------------------------------------------------- */ main.article_detail { overflow: visible !important; } /* ---------------------------------------------------------------- CLAS 既存ページ側要素の強制非表示 ---------------------------------------------------------------- */ [class*="ProductIntroduction__section"] { background: transparent !important; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; } [class*="ProductIntroduction__section"] > *:not([class*="htmlContainer"]) { display: none !important; height: 0 !important; overflow: hidden !important; } [class*="htmlContainer"] { padding: 0 !important; margin: 0 !important; overflow: visible !important; } [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; } /* ---------------------------------------------------------------- FV上部の余白対策 ---------------------------------------------------------------- */ body *:has(> [data-tag-page="ogg-outing-gadget"]) { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } body *:has(> * > [data-tag-page="ogg-outing-gadget"]) { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } body *:has(> * > * > [data-tag-page="ogg-outing-gadget"]) { padding-top: 0 !important; margin-top: 0 !important; } /* ---------------------------------------------------------------- 記事タイトル・更新日の重複表示を非表示（確定クラス名） ★2026-09-15修正: .TitleComponent は「ページ重複タイトル(H1)」だけでなく、記事内で「セクション追加」機能から手入力した見出し(H2)にも同じクラス名が付く共通コンポーネントだった（/article/2659実機で確認）。無条件に display:noneにすると本文中の見出しまで消えてしまうため、重複タイトル側にのみ付く data-size="h1" でスコープする（本文見出しは data-size="h2"）。 ---------------------------------------------------------------- */ .TitleComponent[data-size="h1"] { display: none !important; } .datetime { display: none !important; } /* ---------------------------------------------------------------- 変数（:root＝ページ全体に定義。design.md準拠のブランドトークン） ---------------------------------------------------------------- */ :root { --ogg-primary: #D96C45; /* Terracotta — CTA等ごく小面積のみ */ --ogg-primary-dark: #C45A35; --ogg-primary-light: #FDF0EC; --ogg-secondary: #3A8E7B; /* Green — 文字色アクセントのみ */ --ogg-secondary-dark:#2E7565; --ogg-secondary-light:#E8F4F0; --ogg-navy: #2D312F; --ogg-black: #323630; --ogg-text: #323630; --ogg-sub: #646B61; --ogg-muted: #979E94; --ogg-border: #e8e8e8; --ogg-white: #ffffff; --ogg-warm-bg: #faf8f4; } /* ---------------------------------------------------------------- 全称リセット・タイポグラフィベース ---------------------------------------------------------------- */ [class*="ogg-"] { box-sizing: border-box; font-family: futura-pt, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: var(--ogg-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class*="ogg-"]::before, [class*="ogg-"]::after { box-sizing: border-box; } .ogg-root { line-height: 1.8; font-weight: 400; letter-spacing: calc(1em * 3 / 100); } .ogg-root, .ogg-root * { margin: 0; padding: 0; } .ogg-root img { max-width: 100%; display: block; } .ogg-root a { color: inherit; text-decoration: none; } .ogg-root ul { list-style: none; } .ogg-root p { margin: 0; } [class*="ogg-"] img { max-width: 100%; display: block; } [class*="ogg-"] a { color: inherit; text-decoration: none; } [class*="ogg-"] ul { list-style: none; margin: 0; padding: 0; } [class*="ogg-"] p { margin: 0; } /* ---------------------------------------------------------------- 共通: Eyebrow / H2 / Lead ---------------------------------------------------------------- */ .ogg-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--ogg-secondary) !important; margin-bottom: 12px; } .ogg-h2 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 300; color: var(--ogg-black) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); margin-bottom: 18px; border: none !important; padding-bottom: 0 !important; padding-left: 0 !important; } .ogg-h2::before, .ogg-h2::after { display: none !important; content: none !important; } .ogg-h2--center { text-align: center; } .ogg-lead { font-size: 13px; font-weight: 400; line-height: 2.1; color: var(--ogg-sub); letter-spacing: calc(1em * 4 / 100); max-width: 700px; } /* ---------------------------------------------------------------- Hero — PC/SP画像はplain <img>2枚 + CSSのdisplay切替（<picture>/<source>は管理画面のHTMLサニタイズで除去される事例があるため不使用）テキストは画像に焼き込み済みのため、CSSでのオーバーレイ文字は置かない。 ★横幅いっぱい（フルブリード）: 記事本文カラム(article_detail)は実測768px 固定のため、単純なmax-width指定だけでは親幅に頭打ちになり効かない。 margin-left/right: calc(50% - 50vw) の「はみ出し」テクニックでビューポート基準の中央寄せに切り替え、768pxより幅広に表示する（position:relative + left:50% + transformの方式は本番で反映されなかった実績があるため使わない。 margin+calc()のみで組む古典的な構文を優先＝CMSのCSSサニタイズで弾かれるリスクを避ける防御的選択。hayawari_kucho_aw_article.cssと同じ手法）。 ---------------------------------------------------------------- */ .ogg-hero { position: relative !important; overflow: hidden !important; isolation: isolate; background: var(--ogg-warm-bg); padding: 0 !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0; aspect-ratio: 1782 / 2138; /* SP実画像サイズ基準（モバイルファースト） */ } .ogg-hero__bg { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 0 !important; } .ogg-hero__bg img.ogg-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; } /* SP: 実画像サイズ(1782x2138)基準。PC画像は非表示 */ .ogg-hero__bg img.ogg-hero__img--pc { display: none !important; } .ogg-hero__bg img.ogg-hero__img--sp { display: block !important; } /* PC: 実画像サイズ(4758x2160)に一致させる。SP画像は非表示 */ @media (min-width: 768px) { .ogg-hero { aspect-ratio: 4758 / 2160; /* PCで大きすぎるとのフィードバックを受け、上限を1200px→1000pxにさらに縮小（半分500pxをmin(50vw, 500px)に指定）。768px本文カラムより一回り広い程度に留める。ワイドモニタでは1000px幅で中央寄せ、1000px未満のビューポートでは引き続き画面幅いっぱいまで広がる。 */ max-width: 1000px !important; margin-left: calc(50% - min(50vw, 500px)) !important; margin-right: calc(50% - min(50vw, 500px)) !important; } .ogg-hero__bg img.ogg-hero__img--pc { display: block !important; } .ogg-hero__bg img.ogg-hero__img--sp { display: none !important; } } /* ---------------------------------------------------------------- Anchor Thumbs（各カテゴリの商品セクションへのショートカット） ---------------------------------------------------------------- */ .ogg-anchor-section { padding: 40px 20px 32px; background: var(--ogg-white); text-align: center !important; border-bottom: 1px solid var(--ogg-border); } .ogg-thumbs { margin-top: 24px; display: flex; justify-content: center; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .ogg-thumb { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; width: 120px; } .ogg-thumb__circle { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--ogg-warm-bg); border: 1px solid var(--ogg-border); flex-shrink: 0; transition: transform .2s; } .ogg-thumb__circle img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; } .ogg-thumb:hover .ogg-thumb__circle { transform: scale(1.05); } .ogg-thumb__label { width: 100%; font-size: 12px; font-weight: 500; color: var(--ogg-black) !important; text-align: center; letter-spacing: calc(1em * 4 / 100); line-height: 1.6; } @media (max-width: 600px) { .ogg-anchor-section { padding: 32px 16px 24px; } .ogg-thumbs { gap: 20px; } .ogg-thumb { width: 84px; } .ogg-thumb__circle { width: 68px; height: 68px; } } /* ---------------------------------------------------------------- Overview（コンセプト）— エディトリアル（画像＋テキスト）で構成 ---------------------------------------------------------------- */ .ogg-overview-section { padding: 0 40px; background: var(--ogg-warm-bg); border-top: 1px solid var(--ogg-border); border-bottom: 1px solid var(--ogg-border); } @media (max-width: 600px) { .ogg-overview-section { padding: 0 20px; } } /* ---------------------------------------------------------------- Category Section（撮る・かけるガジェット / キャンプ・アウトドア / 旅行に / 車・子連れのおでかけ準備に）各カテゴリの冒頭はエディトリアル（画像＋テキスト）、以降に商品カードが続く ---------------------------------------------------------------- */ .ogg-category { padding: 0 40px; border-top: 1px solid var(--ogg-border); max-width: 1100px; margin: 0 auto; } @media (max-width: 760px) { .ogg-category { padding: 0 20px; } } /* ---------------------------------------------------------------- Editorial（画像＋テキストの紹介ブロック。コンセプト・各カテゴリ冒頭で使用）商品一覧のCSS欄はdisplay:gridを無効化する事例があるためflexboxで構成。左右反転は flex-direction:row-reverse で行う（direction:rtlは使わない）。 ---------------------------------------------------------------- */ .ogg-editorial { display: flex; align-items: center; gap: 48px; padding: 88px 0 40px; } .ogg-editorial--reverse { flex-direction: row-reverse; } .ogg-editorial__media { flex: 0 0 42%; max-width: 42%; } .ogg-editorial__media-ratio { aspect-ratio: 950 / 1157; overflow: hidden; border-radius: 4px; background: var(--ogg-white); } .ogg-editorial__media-ratio img { 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; } .ogg-editorial__body { flex: 1 1 auto; text-align: left !important; } .ogg-editorial__num { display: block; font-size: clamp(40px, 6vw, 64px); font-weight: 200; color: var(--ogg-secondary) !important; opacity: .4; line-height: 1; margin-bottom: 14px; } .ogg-editorial__eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 24 / 100); text-transform: uppercase; color: var(--ogg-secondary) !important; margin-bottom: 14px; } .ogg-editorial__head { font-size: clamp(20px, 2.6vw, 26px); font-weight: 300; color: var(--ogg-black) !important; line-height: 1.7; letter-spacing: calc(1em * 8 / 100); margin-bottom: 16px; border: none !important; padding: 0 !important; } .ogg-editorial__head::before, .ogg-editorial__head::after { display: none !important; content: none !important; } .ogg-editorial__text { font-size: 13px; line-height: 2.0; color: var(--ogg-sub); letter-spacing: calc(1em * 4 / 100); max-width: 520px; } @media (max-width: 760px) { .ogg-editorial { flex-direction: column; align-items: stretch; gap: 24px; padding: 56px 0 32px; } .ogg-editorial--reverse { flex-direction: column; } .ogg-editorial__media { flex: none; max-width: 100%; } .ogg-editorial__body { text-align: left !important; } .ogg-editorial__num { font-size: 36px; margin-bottom: 10px; } } /* ---------------------------------------------------------------- Why CLAS（サブスクのメリット） ---------------------------------------------------------------- */ .ogg-reasons-section { padding: 88px 40px 72px; background: var(--ogg-white); border-top: 1px solid var(--ogg-border); } .ogg-reasons-grid { display: flex; flex-wrap: wrap; gap: 16px; max-width: 1000px; margin: 32px auto 0; } .ogg-reason-card { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); background: var(--ogg-warm-bg); border-radius: 8px; padding: 20px 16px; text-align: center; } .ogg-reason-card__icon { display: flex; justify-content: center; margin-bottom: 10px; } .ogg-reason-card__icon svg { width: 26px; height: 26px; color: var(--ogg-secondary-dark) !important; } .ogg-reason-card__title { font-size: 14px; font-weight: 500; color: var(--ogg-black) !important; line-height: 1.5; margin-bottom: 6px; } .ogg-reason-card__desc { font-size: 11px; color: var(--ogg-muted); line-height: 1.7; } @media (max-width: 760px) { .ogg-reasons-section { padding: 56px 20px 48px; } .ogg-reason-card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); } } /* ---------------------------------------------------------------- Core Message / CTA ---------------------------------------------------------------- */ .ogg-core-msg-section { padding: 72px 40px; background: var(--ogg-navy) !important; } .ogg-core-msg { max-width: 700px; margin: 0 auto; text-align: center !important; } .ogg-core-msg * { color: var(--ogg-white) !important; } .ogg-core-msg__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: rgba(255,255,255,.55) !important; display: block; margin-bottom: 14px; } .ogg-core-msg__head { font-size: clamp(18px, 2.5vw, 24px); font-weight: 300; margin-bottom: 20px; line-height: 1.9; letter-spacing: calc(1em * 10 / 100); border: none !important; padding-bottom: 0 !important; padding-left: 0 !important; } .ogg-core-msg__head::before, .ogg-core-msg__head::after { display: none !important; content: none !important; } .ogg-core-msg__body { font-size: 12px; line-height: 2.0; letter-spacing: calc(1em * 4 / 100); max-width: 560px; margin: 0 auto 24px; } .ogg-core-msg__cta { display: inline-block; background: var(--ogg-primary) !important; color: var(--ogg-white) !important; font-size: 13px; font-weight: 500; padding: 12px 32px; border-radius: 24px; letter-spacing: .06em; } @media (max-width: 600px) { .ogg-core-msg-section { padding: 48px 20px; } }

対象カテゴリを見る

Outing Gear

その日をもっと楽しむ一台を、
お出かけ前に。

運動会に、紅葉狩りに、旅行に。今年の行楽シーズンは、いつもの持ち物にもう一台加えてみませんか。お出かけ先での「あったらいいな」を、月額で気軽に迎えられます。まずは気になる一台を試してみて、気に入ったらあとから購入に切り替えることもできます。

Capture & Wear

撮る・かけるガジェット

運動会の徒競走も、旅先の何気ない一瞬も。手ブレを抑えたVlogカメラや、かけるだけで写真・動画が撮れるスマートグラスがあれば、なにかと手が空かないお出かけシーンでもシャッターチャンスを逃しません。地図や翻訳の情報がすっと視界に重なるモデルなら、道に迷う心配もなく、海外旅行のお供にも心強い一台になります。

撮影機能のあるスマートグラス

Meta Glasses AIグラス Fury （調光タイプ）クラシックブラック/グレーレンズ汚損保障無しいつでも返せるプラン

秋のお出かけアイテム・ガジェット特集

対象カテゴリを見る

その日をもっと楽しむ一台を、お出かけ前に。

撮る・かけるガジェット

撮影機能のあるスマートグラス

運動会、レジャーなどのアクティブな動画撮影に【10/1までDJI全品20%OFF！】

キャンプ・アウトドア

アウトドアをもっと楽しく

使うときだけレンタルで収納いらず

旅行に

使うときだけ賢くレンタル

移動中も快適に

旅先での健康管理に

車・子連れのおでかけ準備に

いまだけ使いたい！試したい！が叶う

お出かけ前後の車の清掃に

その季節・そのイベントだけの一台を、身軽に迎えられます。

その時々のお出かけに、似合う一台を。

その日をもっと楽しむ一台を、
お出かけ前に。

その季節・そのイベントだけの一台を、
身軽に迎えられます。

その時々のお出かけに、
似合う一台を。