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

家具と家電の

レンタル・サブスク

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

Rokid スマートAIグラスを月額レンタル|全部入りの最新AIグラス

2026/06/26

/* 記事テンプレ側の見出し・日付を隠し、先頭余白を詰める(管理画面適応・CSS最上部) */ body.content2 .datetime { padding: 0 16px; display: none; } .TitleComponent[data-size=h1] { margin-top: 32px; display: none; } body.content2 .TitleComponent[data-size=h1] { margin-top: 0 !important; display: none !important; } body.content2 .SectionComponent:first-child { margin-top: 0 !important; } /* ============================================================ CLAS-curated × rokid — Production styles(管理画面CSSフィールド貼付用) ルートクラス .rkd-root / .brand-page-rokid 配下にスコープ。 既存CLAS CSS(CSS Modulesマングリング)との衝突を属性セレクタ+!importantで回避。 ============================================================ */ /* 既存ページ側要素の強制非表示(embed干渉を潰す) */ [class*="ProductIntroduction__title"], [class*="ProductIntroduction__button"], [class*="ProductIntroduction__description"], [class*="ProductListPage__stripeBackground"], [class*="SearchCondition"], [class*="CategoryList"] { display: none !important; } [class*="ProductIntroduction__section"] picture { display: none !important; } /* LP内の画像は強制表示・全面充填(CSS Modules書換・hostのimg規則に勝つ) */ [class*="rkd-root"] img, [class*="brand-page-rokid"] img { display: block !important; max-width: 100% !important; } [class*="rkd-hero__bg"], [class*="rkd-price__bg"] { position: absolute !important; inset: 0 !important; z-index: 0 !important; } [class*="rkd-ph"] img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; } /* ホスト記事コンテナ .article_detail の幅制限(768px)・overflow:hidden を解除(本LPを含むページのみ)。 既存CSS: @media(min-width:768px){ body .article_detail{width:768px;overflow:hidden} } を打ち消し全幅化 */ @media screen and (min-width: 768px) { body .article_detail:has(.rkd-root) { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; } } .rkd-root { width: 100%; } /* ============================================================ 先端ガジェット LP — Rokid スマートAIグラス Apple型 縦スクロール × CLAS 白ベースミニマル(繊細・余白主義) - #fff ベース / カードシャドウ禁止 / グリーンは文字のみ / Terracottaは CTA塗りのみ - 画像が主役。fluid type(clamp)/ 一貫した余白スケール ※フォントウェイトは kosuke 明示指示で 400以上(design.md 200-300 を上書き) ============================================================ */ .rkd-root{ --primary:#D96C45; --primary-dark:#C45A35; --green:#3A8E7B; --ink:#11110f; --text:#2c302b; --mid:#6b7268; --light:#9aa096; --line:#ececec; --warm:#f7f5f1; /* 余白スケール */ --s-sec:clamp(80px,12vw,168px); --s-gap:clamp(20px,3vw,40px); } .rkd-root *{margin:0;padding:0;box-sizing:border-box} .rkd-root{ font-family:futura-pt, arial, "Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--text); background:#fff; line-height:1.9; font-weight:400; letter-spacing:.02em; padding-bottom:62px; } .rkd-root img{max-width:100%;display:block} .rkd-root a{color:inherit;text-decoration:none} /* ===== 画像枠 ===== */ .rkd-ph{background:#efeae3;width:100%;height:100%;display:flex;align-items:center;justify-content:center; color:#c4bdb2;font-size:9px;letter-spacing:.2em;text-transform:uppercase;text-align:center;overflow:hidden;position:relative} .rkd-ph::before{content:attr(data-img);padding:0 12px} .rkd-ph:has(img)::before{content:none} .rkd-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ===== レイアウト ===== */ .rkd-wrap{max-width:1080px;margin:0 auto;padding:0 28px} .rkd-narrow{max-width:640px;margin:0 auto;padding:0 28px} .rkd-root section{position:relative} /* スクロール出現アニメは廃止(管理画面がJSを弾くため・CSSのみ運用)。.reveal クラスは無害な残置 */ /* ===== タイポ(fluid・全て400以上) ===== */ .rkd-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--light);font-weight:600;display:block} .rkd-root h1,.rkd-root h2,.rkd-root h3{color:var(--ink);font-weight:600} .rkd-root h2{font-size:clamp(27px,4.6vw,50px);letter-spacing:.005em;line-height:1.28;font-weight:600} .rkd-root h3{font-size:clamp(17px,2vw,21px);letter-spacing:.02em;line-height:1.5;font-weight:500} .rkd-lead{font-size:clamp(14.5px,1.5vw,17px);color:var(--mid);line-height:1.95;font-weight:400} .rkd-accent{color:var(--green)} /* ===== ① HERO ===== */ .rkd-hero{height:100svh;min-height:600px;display:flex;align-items:center;position:relative;overflow:hidden} .rkd-hero__bg{position:absolute;inset:0;z-index:0} .rkd-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.42) 100%)} .rkd-hero__inner{position:relative;z-index:2;width:100%;max-width:1080px;margin:0 auto;padding:0 28px;color:#fff} .rkd-hero__inner .rkd-eyebrow{color:rgba(255,255,255,.82)} .rkd-hero__pre{font-size:clamp(12px,1.4vw,15px);color:rgba(255,255,255,.86);font-weight:500;margin:18px 0 8px;letter-spacing:.04em} .rkd-hero h1{color:#fff;font-size:clamp(34px,7vw,82px);font-weight:600;letter-spacing:-.01em;line-height:1.14; text-shadow:0 2px 40px rgba(0,0,0,.35)} .rkd-hero__sub{color:rgba(255,255,255,.95);font-size:clamp(18px,2.8vw,28px);font-weight:500;margin-top:18px;line-height:1.7; letter-spacing:.01em;text-shadow:0 1px 24px rgba(0,0,0,.4)} /* ===== ② ハイライト(横スクロールカルーセル・Apple風/矢印つき) ===== */ .rkd-hl{padding:var(--s-sec) 0;text-align:center} .rkd-hl-lead{font-size:clamp(14px,1.6vw,16px);color:var(--mid);font-weight:500;letter-spacing:.06em;margin-top:18px} .rkd-hl h2{margin:6px 0 0} .rkd-hl-quote{font-size:clamp(15px,1.7vw,18px);color:var(--text);font-weight:400;max-width:27em;margin:22px auto 0;line-height:1.95} .rkd-hl-scroller{position:relative;margin-top:clamp(44px,6vw,76px)} .rkd-hl-track{display:flex;align-items:flex-start;gap:var(--s-gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#d8d2c8 transparent; padding-inline:max(28px,calc((100% - 1080px)/2));scroll-padding-inline:max(28px,calc((100% - 1080px)/2)); -webkit-overflow-scrolling:touch;padding-bottom:16px} .rkd-hl-track::-webkit-scrollbar{height:6px} .rkd-hl-track::-webkit-scrollbar-thumb{background:#d8d2c8;border-radius:3px} .rkd-hl-card{flex:0 0 auto;width:clamp(270px,82vw,392px);scroll-snap-align:start;text-align:left} .rkd-hl-img{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#efeae3} .rkd-hl-img .rkd-ph{position:absolute;inset:0} .rkd-hl-card h3{margin:20px 0 8px} .rkd-hl-card p{font-size:14px;color:var(--mid);font-weight:400;line-height:1.85} /* ===== 体験(全幅・交互・繊細) ===== */ .rkd-exp__media{height:clamp(440px,72vh,760px);position:relative} .rkd-exp__body{padding:clamp(56px,9vw,120px) 28px} .rkd-exp__body .rkd-inner{max-width:520px;margin:0 auto} .rkd-exp__body .rkd-eyebrow{color:var(--green)} .rkd-exp h2{margin:14px 0 20px} .rkd-exp .rkd-tiny{font-size:13px;color:var(--light);margin-top:20px;letter-spacing:.02em;font-weight:400} @media(min-width:880px){ .rkd-exp.rkd-split{display:grid;grid-template-columns:1.05fr .95fr;align-items:center} .rkd-exp.rkd-split .rkd-exp__media{height:92vh;min-height:620px} .rkd-exp.rkd-split.rkd-rev .rkd-exp__media{order:2} } /* ===== イヤホン(小・センター) ===== */ .rkd-bonus{padding:var(--s-sec) 0;text-align:center;background:var(--warm)} .rkd-bonus .rkd-eyebrow{color:var(--green)} .rkd-bonus h3{font-weight:600;font-size:clamp(20px,3vw,30px);margin:14px 0 14px;color:var(--ink)} .rkd-bonus p{font-size:clamp(14px,1.6vw,16px);color:var(--mid);max-width:26em;margin:0 auto;font-weight:400;line-height:1.95} /* ===== なぜCLASで(コア) ===== */ .rkd-why{padding:var(--s-sec) 0 clamp(40px,5vw,64px)} .rkd-why .rkd-narrow{text-align:center} .rkd-why .rkd-eyebrow{color:var(--green)} .rkd-why h2{margin:18px 0 28px} .rkd-why p{font-size:clamp(15px,1.8vw,18px);line-height:2.05;color:var(--text);font-weight:400} .rkd-why .rkd-big{font-size:clamp(17px,2vw,20px);margin-top:10px;font-weight:500;color:var(--ink)} /* ===== ギャラリー(製品ディテール・小カルーセル) ===== */ .rkd-gallery{padding:clamp(24px,3vw,44px) 0 clamp(56px,7vw,96px);text-align:center} .rkd-gallery .rkd-eyebrow{color:var(--light)} .rkd-gallery h3{font-size:clamp(16px,2vw,20px);font-weight:500;margin-top:10px;color:var(--ink)} .rkd-gal-scroller{position:relative;margin-top:clamp(28px,4vw,44px)} .rkd-gal-track{display:flex;align-items:flex-start;gap:18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#d8d2c8 transparent; padding-inline:max(28px,calc((100% - 1080px)/2));scroll-padding-inline:max(28px,calc((100% - 1080px)/2)); -webkit-overflow-scrolling:touch;padding-bottom:16px} .rkd-gal-track::-webkit-scrollbar{height:6px} .rkd-gal-track::-webkit-scrollbar-thumb{background:#d8d2c8;border-radius:3px} .rkd-gal-item{flex:0 0 auto;width:clamp(218px,70vw,308px);scroll-snap-align:start} .rkd-gal-img{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#efeae3} .rkd-gal-img .rkd-ph{position:absolute;inset:0} /* ===== 料金(全幅・背景画像) ===== */ .rkd-price{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden} .rkd-price__bg{position:absolute;inset:0;z-index:0} .rkd-price__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.5) 55%,rgba(0,0,0,.62))} .rkd-price__inner{position:relative;z-index:2;padding:0 28px;color:#fff} .rkd-price .rkd-eyebrow{color:rgba(255,255,255,.8)} .rkd-price .rkd-buy{font-size:clamp(14px,1.6vw,16px);color:rgba(255,255,255,.78);letter-spacing:.04em;font-weight:400;margin-top:14px} .rkd-price .rkd-mo-row{font-size:clamp(16px,2vw,20px);color:#fff;margin-top:14px;font-weight:500;display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap} .rkd-price .rkd-mo{color:#fff;font-weight:600;font-size:clamp(46px,9vw,96px);letter-spacing:-.01em;line-height:1;text-shadow:0 2px 40px rgba(0,0,0,.3)} .rkd-price .rkd-tax{font-size:13px;color:rgba(255,255,255,.7)} .rkd-price .rkd-msg{font-size:clamp(14px,1.7vw,17px);color:rgba(255,255,255,.92);font-weight:400;line-height:2.0;max-width:26em;margin:30px auto 0;text-shadow:0 1px 20px rgba(0,0,0,.35)} /* ===== クロージング ===== */ .rkd-closing{padding:var(--s-sec) 0;text-align:center} .rkd-closing h2{margin-bottom:12px} .rkd-closing p{font-size:clamp(14px,1.6vw,16px);color:var(--mid);margin-bottom:34px;font-weight:400} .rkd-closing .rkd-cta-note{font-size:12px;color:var(--light);margin:14px 0 0;font-weight:400;line-height:1.7} .rkd-btn{display:inline-block;background:var(--primary);color:#fff !important;font-size:15px !important;font-weight:600 !important;letter-spacing:.06em; padding:16px 44px !important;border-radius:32px;transition:background .25s,transform .25s} .rkd-btn:hover{background:var(--primary-dark);transform:translateY(-1px)} /* ===== 下部固定CTA ===== */ .rkd-fixedbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 18px} .rkd-fixedbar__name{font-size:12.5px;color:var(--text);font-weight:500;letter-spacing:.02em;line-height:1.35} .rkd-fixedbar__name span{display:block;font-size:9.5px;color:var(--light);letter-spacing:.16em;text-transform:uppercase;font-weight:600} .rkd-fixedbar__cta{display:flex;flex-direction:column;align-items:center;gap:2px} .rkd-fixedbar__note{font-size:9.5px;color:var(--mid);line-height:1.2;letter-spacing:.02em;white-space:nowrap;font-weight:400} .rkd-fixedbar .rkd-btn{padding:8px 22px !important;font-size:13px !important;white-space:nowrap} @media(min-width:768px){.rkd-fixedbar{padding:8px 36px}.rkd-fixedbar__name{font-size:14px}.rkd-fixedbar__note{font-size:10.5px}.rkd-fixedbar .rkd-btn{padding:9px 30px !important;font-size:14px !important}} /* ===== フッター ===== */ .rkd-foot{padding:48px 28px 32px;text-align:center;border-top:1px solid var(--line)} .rkd-foot p{font-size:11px;color:var(--light);line-height:1.95;font-weight:400} #id { visibility: visible !important; }

この記事をシェアする