/** Shopify CDN: Minification failed Line 2193:0 Unexpected "}" **/ @charset "UTF-8"; /* ============================================================= AeroClip 2 LP (D1105) — Figma fuHHETAUq0I4LBN5PJ90mz 忠実版 PC 1440 固定寸。数値は get_design_context の転記。 --u = 1px@1440（1440 未満は等比縮小、以上は中央寄せ） ============================================================= */ @font-face { font-family: "AC2Mont"; font-weight: 400; font-display: swap; src: url("/cdn/shop/files/MontForAnker-Book.woff2?v=1736241676") format("woff2"); } @font-face { font-family: "AC2Mont"; font-weight: 600; font-display: swap; src: url("/cdn/shop/files/MontForAnker-SemiBold.woff2?v=1736241329") format("woff2"); } .ac2 { --ink: #172d39; --bg: #e4f0f7; --font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; --mont: "AC2Mont", "Mont For Anker", sans-serif; position: relative; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 400; font-synthesis: none; line-height: 1.5; overflow-x: clip; } .ac2 *, .ac2 *::before, .ac2 *::after { box-sizing: border-box; } /* テーマの見出し用 CSS（h1-h3 に太字/Noto Sans JP/行間）を打ち消す。(0,1,1) なので .ac2 .xxx のクラス指定 (0,2,0) には負ける */ .ac2 h1, .ac2 h2, .ac2 h3, .ac2 p, .ac2 ul, .ac2 figure { margin: 0; padding: 0; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } :where(.ac2 ul) { list-style: none; } :where(.ac2 img) { display: block; max-width: 100%; height: auto; } :where(.ac2 button) { font: inherit; color: inherit; } .ac2 .-palt { font-feature-settings: "palt" 1; } /* 1440 のデザイン枠。中身は px 固定。PC は .ac2-zoom の zoom（JS が --z を設定: min(vw,1560)/1440）で等比拡縮 */ .ac2 .ac2-zoom { zoom: var(--z, 1); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .ac2 .ac2-kv, .ac2 .ac2-why, .ac2 .ac2-concept, .ac2 .ac2-collage, .ac2 .ac2-spec, .ac2 .ac2-ksp, .ac2 .ac2-scene { position: relative; width: 1440px; margin: 0 auto; } /* --------------------------------------------------------------- 01. KV 7:437 1440×897 --------------------------------------------------------------- */ .ac2 .ac2-kv { height: 897px; overflow: hidden; } .ac2 .ac2-kv-bg { position: absolute; inset: 0; overflow: hidden; } .ac2 .ac2-kv-bg img { position: absolute; left: -34.52%; top: -14.77%; width: 165.95%; height: 115.05%; max-width: none; object-fit: cover; } .ac2 .ac2-kv-product-img { position: relative; width: 236px; height: 320px; } .ac2 .ac2-kv-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(228, 240, 247, 0) 68%, rgba(228, 240, 247, 0.6) 86%, var(--bg) 100%); } /* 末尾をページ地色 #e4f0f7 に合わせて境目を消す */ .ac2 .ac2-kv-copy { position: absolute; left: 0; top: 0; padding: 200px 120px; display: flex; flex-direction: column; gap: 14px; font-size: 40px; line-height: 1.5; letter-spacing: 0.24em; font-weight: 400; } /* 10/2「もう少し大きく」30→40（家風の上限 44 以内） */ .ac2 .ac2-kv-copy span { display: block; } .ac2 .ac2-kv-product { position: absolute; right: 0; bottom: 0; padding: 120px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; z-index: 3; } .ac2 .ac2-kv-product img { width: 236px; height: 320px; object-fit: cover; } .ac2 .ac2-kv-name { position: absolute; left: 120px; top: 470px; z-index: 4; font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; } /* コピーの下（左揃え）。10/2「とくに製品名を目立つように」22→64 */ /* --------------------------------------------------------------- 02. 選ばれる理由 1:133 1440×463 --------------------------------------------------------------- */ .ac2 .ac2-why { height: 463px; padding: 60px 80px; display: flex; flex-direction: column; gap: 20px; } .ac2 .ac2-why-title { height: 36px; padding: 0 40px; font-size: 24px; line-height: 1.5; } .ac2 .ac2-why-cards { display: flex; align-items: stretch; width: 1280px; height: 239px; } .ac2 .ac2-why-card { width: 339px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 20px 40px; border-right: 1px solid #f9f9f9; } .ac2 .ac2-why-card.-awards { width: 602px; border-right: 0; align-items: center; } .ac2 .ac2-why-head { display: flex; flex-direction: column; line-height: 1.35; width: 220px; font-feature-settings: "palt" 1; } .ac2 .ac2-why-card.-awards .ac2-why-head { width: 100%; } .ac2 .ac2-why-sub { font-size: 14px; opacity: 0.7; } .ac2 .ac2-why-main { font-size: 22px; position: relative; white-space: nowrap; } .ac2 .ac2-why-sup { position: absolute; left: 100%; top: 5px; margin-left: 1px; font-size: 9.03px; line-height: 1; } .ac2 .ac2-no1 { display: flex; align-items: center; justify-content: center; gap: 12px; width: 232.09px; height: 140px; } .ac2 .ac2-no1-laurel { width: 36.547px; height: 110px; } .ac2 .ac2-no1-core { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 135px; } .ac2 .ac2-no1-crown { width: 34px; height: 20px; } .ac2 .ac2-no1-num { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 84px; font-family: var(--mont); white-space: nowrap; } .ac2 .ac2-no1-no { font-size: 70px; line-height: 0.7; letter-spacing: -0.04em; margin-right: -11px; } .ac2 .ac2-no1-one { font-size: 120px; line-height: 0.7; } .ac2 .ac2-no1-sup { position: absolute; left: 127px; top: 4px; font-family: var(--font); font-size: 9.03px; line-height: 1; font-feature-settings: "palt" 1; } .ac2 .ac2-no1-ribbon { width: 48.877px; height: 16px; } .ac2 .ac2-sales { position: relative; width: 246px; height: 140px; padding: 22px 0; display: flex; align-items: flex-end; justify-content: center; } .ac2 .ac2-sales-map { position: absolute; left: 0.5px; top: 50%; transform: translateY(-50%); width: 243.636px; height: 120px; } .ac2 .ac2-sales-num { position: relative; display: flex; align-items: flex-end; gap: 1px; white-space: nowrap; } .ac2 .ac2-sales-big { font-family: var(--mont); font-size: 120px; line-height: 0.7; letter-spacing: -6px; } .ac2 .ac2-sales-unit { font-size: 39px; line-height: 1; } .ac2 .ac2-sales-tail { font-size: 22px; line-height: 1; } .ac2 .ac2-awards { display: flex; gap: 30px; align-items: flex-start; height: 140px; width: 522px; } .ac2 .ac2-awards li { display: flex; align-items: center; gap: 10px; height: 100%; } .ac2 .ac2-awards img { height: 80px; width: auto; flex: none; } .ac2 .ac2-awards p { font-size: 12px; line-height: 1.35; white-space: nowrap; } .ac2 .ac2-why-note { height: 28px; padding: 0 40px; font-size: 9px; line-height: 1.35; opacity: 0.5; font-feature-settings: "palt" 1; } /* --------------------------------------------------------------- 03. コンセプト 11:58 1440×1230 --------------------------------------------------------------- */ .ac2 .ac2-concept { height: 1230px; padding: 0 80px; display: flex; gap: 120px; align-items: center; justify-content: center; } .ac2 .ac2-concept-col { width: 477px; flex: none; display: flex; flex-direction: column; gap: 10px; align-self: stretch; } .ac2 .ac2-concept-col.-l { padding: 120px 0; } .ac2 .ac2-concept-col.-r { padding: 200px 0 60px; } .ac2 .ac2-concept-item { height: 480px; padding: 80px 120px; display: flex; flex-direction: column; justify-content: center; gap: 20px; border-radius: 0; } .ac2 .ac2-concept-icon-box { width: 230px; height: 230px; flex: none; display: grid; place-items: center; color: var(--ink); margin: -30px 0 -34px -24px; } /* 絵の余白ぶん詰めて文字とひと塊に（左も線の始点に揃える） */ .ac2 .ac2-concept-h + .ac2-concept-p { margin-top: -6px; } /* 手描きイラスト（SVG: 墨線の塗り + 水彩の 。build_svg.py） 描き出しはスクロール連動（JS が .hd-m の stroke-dashoffset を筆画の長さ順に進める）。描き終わりで mask を外す。漂いは常時（描き直しで止まって跳ねないように） */ .ac2 .ac2-hd { display: block; width: 230px; height: 230px; overflow: visible; } .ac2 .ac2-hd .hd-ink { fill: var(--ink); } .ac2 .ac2-hd .hd-m { stroke-dasharray: 1; stroke-dashoffset: 1; } .ac2 .ac2-hd.is-drawn .hd-ink { mask: none; } .ac2 .ac2-hd .hd-wash { transform-box: fill-box; transform-origin: 50% 50%; opacity: min(1, calc(var(--hp, 0) * 1.6)); transform: scale(calc(0.82 + 0.18 * var(--hp, 0))); } /* --hp = 描き出しの進み（JS）。戻すと水彩も引く */ .ac2 .ac2-hd { animation: hd-drift 6.4s ease-in-out infinite alternate; } .ac2 .ac2-concept-item:nth-child(2) .ac2-hd { animation-duration: 7.2s; animation-delay: -2s; } .ac2 .ac2-concept-col.-r .ac2-hd { animation-duration: 5.8s; animation-delay: -1s; } .ac2 .ac2-concept-col.-r .ac2-concept-item:nth-child(2) .ac2-hd { animation-duration: 6.8s; animation-delay: -3s; } @keyframes hd-drift { from { transform: translate(-3px, 4px) rotate(-1.5deg); } to { transform: translate(4px, -5px) rotate(1.5deg); } } /* 10/9 通話の絵を描き直し（正方形に収まる横顔）→ 旧の 1.3 倍拡大は外した */ .ac2.is-reduced .ac2-hd .hd-m { stroke-dashoffset: 0; } .ac2.is-reduced .ac2-hd, .ac2.is-reduced .ac2-hd .hd-wash { animation: none; transition: none; opacity: 1; transform: none; } .ac2.is-reduced .ac2-hd { --hp: 1; } .ac2 .ac2-concept-h { font-size: 24px; line-height: 1.5; letter-spacing: 2.4px; white-space: nowrap; font-weight: 500; } /* 淡い地で沈むので Medium に */ .ac2 .ac2-concept-p { font-size: 16px; line-height: 1.5; letter-spacing: 0.8px; color: rgba(23, 45, 57, 0.6); white-space: nowrap; } /* opacity は表出アニメの .is-in{opacity:1} に負けるので色で薄くする */ .ac2 .ac2-tate { flex: none; width: 86px; align-self: center; display: flex; gap: 12px; align-items: flex-end; justify-content: center; padding-bottom: 160px; } .ac2 .ac2-tate-line { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 24px 10px; background: #fff; } .ac2 .ac2-tate-line.-a { margin: 72px 0; } .ac2 .ac2-tate-chars { display: flex; flex-direction: column; width: 17px; font-size: 18px; line-height: 24px; text-align: center; letter-spacing: 5.4px; } .ac2 .ac2-tate-chars span { display: block; height: 24px; margin-right: -5.4px; } .ac2 .ac2-tate-punct { width: 5px; height: 5px; margin-right: 0.5px; } /* --------------------------------------------------------------- 04. 写真コラージュ 11:38 1440×1561（絶対配置・順序は Figma の重なり順） --------------------------------------------------------------- */ /* 04 ギャラリー（10/9 夕: 大津さんの Figma 11:38 のコラージュを基準に作り直し） 元の配置（左に縦長 720×760 を左端裁ち落とし、右上に横長 640×556、右中に 530×521、左下に縦長 420×502、すき間 20px の塊）を残し、 6 枚に増えた分は「右中を 2 枚に割って右端も裁ち落とし」「右下に横長」で足す。縦・横・正方形に近いものを混ぜる。見出しは左上の空き */ .ac2 .ac2-collage { height: 1800px; } .ac2 .ac2-collage-h { position: absolute; left: 120px; top: 120px; z-index: 3; font-size: 28px; line-height: 1.9; letter-spacing: 8.4px; white-space: nowrap; } .ac2 .ac2-ph { position: absolute; z-index: 3; overflow: hidden; margin: 0; } .ac2 .ac2-ph img { width: 100%; height: 100%; object-fit: cover; } .ac2 .ac2-ph.-s6 { left: -10px; top: 339px; width: 720px; height: 760px; } /* 家事: 元 listing2 の位置（縦長・左端裁ち落とし） */ .ac2 .ac2-ph.-s1 { left: 730px; top: 209px; width: 640px; height: 556px; } /* 通勤・通学: 元 溶け画像の位置（横長） */ .ac2 .ac2-ph.-s4 { left: 730px; top: 785px; width: 400px; height: 521px; } /* 在宅ワーク: 元 listing7 の位置を 2 つに割った左（やや縦長） */ .ac2 .ac2-ph.-s3 { left: 1150px; top: 785px; width: 300px; height: 521px; } /* 犬の散歩: 右端裁ち落としの細い縦長 */ .ac2 .ac2-ph.-s5 { left: 290px; top: 1119px; width: 420px; height: 502px; } /* 屋外での通話: 元 listing6 の位置（縦長） */ .ac2 .ac2-ph.-s2 { left: 730px; top: 1326px; width: 560px; height: 380px; } /* ワークアウト: 右下の横長 */ /* キャプション: 写真の上に単色で直接（座布団・影なし）。白が基本、明るい下地の写真だけ墨（-dark） */ .ac2 .ac2-ph-cap { position: absolute; left: 24px; bottom: 20px; font-size: 16px; line-height: 1.4; letter-spacing: 0.12em; color: #fff; will-change: opacity; } .ac2 .ac2-ph-cap.-dark { color: var(--ink); } .ac2 .ac2-ph-cap.-top { bottom: auto; top: 20px; } .ac2 .ac2-collage-gl { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .ac2 .ac2-collage-gl canvas { display: block; width: 100% !important; height: 100% !important; } /* WebGL が描いている間は、DOM の写真は隠してキャプションだけ残す（キャプションは JS が板の動きに合わせて動かす） */ .ac2 .ac2-collage.is-gl .ac2-ph { overflow: visible; } .ac2 .ac2-collage.is-gl .ac2-ph img { opacity: 0; } /* --------------------------------------------------------------- 05. スペック + 購入 11:294 1440×960 --------------------------------------------------------------- */ .ac2 .ac2-spec { height: 960px; padding: 160px 120px; display: flex; gap: 40px; align-items: flex-start; justify-content: center; } .ac2 .ac2-icons { width: 426px; flex: none; align-self: stretch; display: flex; flex-wrap: wrap; gap: 10px; align-content: center; align-items: flex-start; } .ac2 .ac2-icons li { width: 135.333px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; text-align: center; } .ac2 .ac2-icon-sound { position: relative; width: 37.457px; height: 38.15px; } .ac2 .ac2-icon-sound img { position: absolute; width: auto; height: auto; } .ac2 .ac2-icon-sound .-a { left: 14.81%; top: 32.26%; right: 15.87%; bottom: 0; } .ac2 .ac2-icon-sound .-b { left: 12.16%; top: 0; right: 13.46%; bottom: 71.21%; } .ac2 .ac2-icon { width: 80px; height: 80px; border-radius: 692.948px; background: rgba(255, 255, 255, 0.6); display: grid; place-items: center; overflow: hidden; } .ac2 .ac2-icon.-hours { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; line-height: 1; font-weight: 400; } .ac2 .ac2-icon.-hours b { font-size: 24.971px; letter-spacing: -0.2497px; font-weight: 400; } .ac2 .ac2-icon.-hours small { font-size: 9.017px; letter-spacing: -0.0902px; } .ac2 .ac2-icons p { font-size: 16px; line-height: 1.35; } .ac2 .ac2-icon-note { font-size: 10px; line-height: 1.5; opacity: 0.6; } .ac2 .ac2-visual { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .ac2 .ac2-visual-card { position: relative; height: 640px; padding: 0 60px; border-radius: 0; background: rgba(255, 255, 255, 0.4); overflow: hidden; display: flex; align-items: center; justify-content: center; } .ac2 .ac2-visual-3d { position: absolute; inset: 0; z-index: 2; cursor: grab; touch-action: pan-y; } .ac2 .ac2-visual-3d.is-drag { cursor: grabbing; } /* 10/22 つかんだときに下の静止画（製品画像・背景）がブラウザの画像ドラッグでつかめないように。文字の選択も出さない */ .ac2 .ac2-visual-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .ac2 .ac2-visual-card img { -webkit-user-drag: none; user-drag: none; pointer-events: none; } .ac2 .ac2-visual-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; } .ac2 .ac2-visual-card:has(.is-ready) .ac2-visual-product { opacity: 0; } .ac2 .ac2-visual-product { transition: opacity 0.6s; position: absolute; left: 60px; top: 162px; width: 334px; height: 316px; object-fit: contain; z-index: 2; } .ac2 .ac2-visual-hires { position: absolute; right: 30px; top: 30px; width: 45px; height: 60px; z-index: 3; } .ac2 .ac2-buy { width: 240px; flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 40px; } .ac2 .ac2-buy-head { display: flex; flex-direction: column; gap: 15px; } .ac2 .ac2-buy-lead { font-size: 18px; line-height: 1.5; letter-spacing: 0.9px; } .ac2 .ac2-buy-name { font-size: 40px; font-weight: 500; line-height: 1; } .ac2 .ac2-buy-price { display: flex; align-items: flex-end; gap: 4px; height: 23px; white-space: nowrap; font-feature-settings: "palt" 1; } .ac2 .ac2-yen { font-size: 20px; font-weight: 500; letter-spacing: 1px; line-height: 0.75; } .ac2 .ac2-price { font-size: 32px; line-height: 0.72; } .ac2 .ac2-tax { font-size: 10px; line-height: 1; opacity: 0.7; } .ac2 .ac2-buy-body { display: flex; flex-direction: column; gap: 14.125px; width: 233px; } .ac2 .ac2-colors { display: flex; flex-direction: column; gap: 10px; } .ac2 .ac2-swatches { display: flex; gap: 8px; } .ac2 .ac2-swatch { position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 2px; background: #fff; overflow: hidden; cursor: pointer; } .ac2 .ac2-swatch img { position: absolute; left: 12.99%; top: 0; width: 73.52%; height: 100%; max-width: none; object-fit: cover; } .ac2 .ac2-swatch.is-on { border-color: var(--ink); } .ac2 .ac2-colors-label { font-size: 12px; line-height: 1.5; letter-spacing: 1.2px; opacity: 0.7; } /* 共通 snippet lp-btns を Figma のボタン形状に（16:650 / 16:655） */ .ac2 .lp-btns { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; width: 233px; } .ac2 .lp-btns li { margin: 0; } .ac2 .lp-btns .lp-btn, .ac2 .lp-btns .lp-btn-amazon { box-sizing: border-box; height: 51px; min-height: 0; max-height: none; display: inline-flex; align-items: center; justify-content: center; padding: 18px 24px; border-radius: 4px; font-size: 15px; letter-spacing: 0.75px; line-height: 1; text-decoration: none; font-weight: 400; white-space: nowrap; } .ac2 .lp-btns .lp-btn { width: 77px; background: #00cbeb; color: #fff; border: 0; } .ac2 .lp-btns .lp-btn-amazon { width: 149px; background: transparent; color: var(--ink); border: 0.942px solid #ff9900; } .ac2 .lp-btns .is-more, .ac2 .lp-btns li:has(.lp-txtLink) { width: 100%; margin-top: 7.125px; } .ac2 .lp-txtLink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1; color: var(--ink); text-decoration: none; } /* --------------------------------------------------------------- 06. KSP 16:1201 1280×466.918（x 80） --------------------------------------------------------------- */ .ac2 .ac2-ksp { height: 466.918px; width: 1440px; padding: 0 80px; display: flex; gap: 10.063px; align-items: center; } .ac2 .ac2-card { position: relative; overflow: hidden; border-radius: 0; background: #fff; } .ac2 .ac2-card h3 { position: absolute; left: 0; right: 0; top: 30.19px; z-index: 2; text-align: center; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0.06em; } /* 太字なし。字間は他セクション（16px/0.8px, 24px/2.4px）に合わせる */ .ac2 .ac2-card h3.-lg { font-size: 24px; letter-spacing: 0.1em; } .ac2 .ac2-card h3.-white { color: #fff; } .ac2 .ac2-card.-chip { width: 454.843px; height: 466.918px; flex: none; background: linear-gradient(180deg, #f3fcff, #cfedff); } .ac2 .ac2-card.-chip h3 { font-size: 24px; letter-spacing: 0.1em; } .ac2 .ac2-card.-chip img { position: absolute; left: -45px; top: 118px; width: 557px; height: 413px; max-width: none; object-fit: cover; } .ac2 .ac2-ksp-mid { width: 402.516px; height: 466.918px; flex: none; display: flex; flex-direction: column; gap: 10.063px; } .ac2 .ac2-ksp-right { width: 402.516px; height: 466.918px; flex: none; display: flex; flex-direction: column; gap: 10.063px; } .ac2 .ac2-ksp-pair { flex: 1 0 0; display: flex; gap: 10.063px; min-height: 0; } .ac2 .ac2-ksp-pair .ac2-card { width: 196.226px; flex: none; } .ac2 .ac2-card.-calls { height: 228.428px; } .ac2 .ac2-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ac2 .ac2-card.-bass { background: rgba(220, 220, 222, 0.5); } .ac2 .ac2-card.-bass .ac2-card-bg { left: -29.49%; top: -20.26%; width: 167.69%; height: 144.05%; max-width: none; } .ac2 .ac2-card.-bass .ac2-card-diaphragm { position: absolute; left: 50%; top: 50%; width: 267px; height: 267px; max-width: none; margin: -133.7px 0 0 -133.3px; object-fit: cover; } .ac2 .ac2-card-badges { position: absolute; left: 156.45px; top: 169.32px; display: flex; flex-direction: column; gap: 3.14px; z-index: 2; } .ac2 .ac2-card-badges img { width: 27.225px; height: auto; } .ac2 .ac2-card.-water h3 { left: 23.14px; right: 23.14px; } .ac2 .ac2-card.-water img { position: absolute; left: -11px; top: 94px; width: 233.577px; height: 268.374px; max-width: none; object-fit: cover; object-position: 100% 0; transform: rotate(-16.94deg); } .ac2 .ac2-card.-compact .ac2-card-bg { left: 50%; top: 50%; width: 528px; height: 295px; max-width: none; margin: -114.2px 0 0 -263.9px; } .ac2 .ac2-card.-compact h3 { color: var(--ink); white-space: nowrap; } .ac2 .ac2-card-hrs { position: absolute; left: 52.43px; top: 84px; display: flex; align-items: flex-start; font-family: var(--mont); font-weight: 400; z-index: 2; } .ac2 .ac2-card-hrs b { font-size: 58.543px; line-height: 89.814px; font-weight: 400; } .ac2 .ac2-card-hrs span { font-size: 17.563px; line-height: 26.471px; margin-top: 45px; } .ac2 .ac2-card-hrs span.-jp { font-family: var(--font); font-weight: 400; font-size: 16px; letter-spacing: 0.06em; margin-top: 48px; margin-left: 4px; } .ac2 .ac2-card.-power img { position: absolute; left: 30.24px; top: 113.25px; width: 135.706px; height: 155.266px; object-fit: contain; } /* --------------------------------------------------------------- 07. シーン 16:2043 1440×1099 --------------------------------------------------------------- */ /* =============================================================== SP（1080px 未満）— PC の px 指定を上書き。390 幅基準、幅は % で流動 =============================================================== */ @media (max-width: 1079px) { .ac2 .ac2-zoom { zoom: 1; } .ac2 .ac2-kv, .ac2 .ac2-why, .ac2 .ac2-concept, .ac2 .ac2-collage, .ac2 .ac2-spec, .ac2 .ac2-ksp, .ac2 .ac2-scene { width: 100%; height: auto; margin: 0; } /* 01 KV */ .ac2 .ac2-kv { height: 640px; } .ac2 .ac2-kv-bg img { left: -70%; top: -6%; width: 230%; height: 112%; } .ac2 .ac2-kv-copy { padding: 48px 24px; gap: 12px; font-size: 22px; letter-spacing: 6px; } .ac2 .ac2-kv-product { padding: 28px 70px 28px 24px; gap: 12px; } .ac2 .ac2-kv-product img { width: 120px; height: 163px; } .ac2 .ac2-kv-name { left: 24px; top: 196px; font-size: 16px; } .ac2 .ac2-kv-product-img { width: 120px; height: 163px; } /* 02 選ばれる理由: タイトに。No.1 と 1.1億 を横 2 列、アワードは小さく 1 行 */ .ac2 .ac2-why { padding: 28px 20px 24px; gap: 10px; } .ac2 .ac2-why-title { height: auto; padding: 0; font-size: 18px; line-height: 1.4; } .ac2 .ac2-why-cards { flex-direction: row; flex-wrap: wrap; width: 100%; height: auto; } .ac2 .ac2-why-card { width: 50%; padding: 6px 0 2px; border-right: 0; gap: 2px; align-items: flex-start; } .ac2 .ac2-why-card.-awards { width: 100%; padding: 10px 0 0; margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.7); } .ac2 .ac2-why-head { width: auto; } .ac2 .ac2-why-sub { font-size: 11px; } .ac2 .ac2-why-main { font-size: 15px; display: inline-block; width: max-content; } .ac2 .ac2-why-sup { top: 2px; } /* No.1 / 1.1億 の図版は PC の 62%。zoom は iOS Safari で文字だけ縮まないため、寸法を個別に指定 */ .ac2 .ac2-no1 { width: 144px; height: 87px; gap: 7px; } .ac2 .ac2-no1-laurel { width: 22.6px; height: 68px; } .ac2 .ac2-no1-core { width: 84px; gap: 6px; } .ac2 .ac2-no1-crown { width: 21px; height: 12px; } .ac2 .ac2-no1-num { height: 52px; } .ac2 .ac2-no1-no { font-size: 43px; margin-right: -7px; } .ac2 .ac2-no1-one { font-size: 74px; } .ac2 .ac2-no1-sup { left: 79px; top: 2px; font-size: 8px; } .ac2 .ac2-no1-ribbon { width: 30px; height: 10px; } .ac2 .ac2-sales { width: 153px; height: 87px; padding: 14px 0; } .ac2 .ac2-sales-map { width: 151px; height: 74px; } .ac2 .ac2-sales-big { font-size: 74px; letter-spacing: -3.7px; } .ac2 .ac2-sales-unit { font-size: 24px; } .ac2 .ac2-sales-tail { font-size: 14px; } .ac2 .ac2-awards { width: 100%; height: auto; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; } .ac2 .ac2-awards li { height: auto; gap: 6px; align-items: flex-start; } /* SP はロゴとテキストを上揃え */ .ac2 .ac2-awards img { height: 40px; } .ac2 .ac2-awards p { font-size: 9px; line-height: 1.3; } .ac2 .ac2-why-note { padding: 0; height: auto; font-size: 9px; margin-top: 2px; } /* 03 コンセプト: PC と同じ構成（上にイヤホン、中央に縦書き、左右に 2 項目ずつ。右列は少し下げる） */ .ac2 .ac2-concept { padding: 226px 12px 8px; min-height: 0; flex-wrap: wrap; flex-direction: row; gap: 0 8px; align-items: flex-start; justify-content: center; } /* 上 194px はイヤホン 3D の分 */ .ac2 .ac2-concept-col { flex: 1 1 0; min-width: 0; width: auto; gap: 0; } .ac2 .ac2-concept-col.-l { padding: 0; } .ac2 .ac2-concept-col.-r { padding: 72px 0 0; } .ac2 .ac2-concept-item { height: auto; padding: 20px 0; gap: 10px; border-radius: 0; } .ac2 .ac2-concept-icon-box { width: 120px; height: 120px; margin: -10px 0 -14px -12px; } .ac2 .ac2-hd { width: 120px; height: 120px; } .ac2 .ac2-concept-h { font-size: 14px; letter-spacing: 1px; line-height: 1.5; white-space: normal; } .ac2 .ac2-concept-p { font-size: 11px; letter-spacing: 0.4px; white-space: normal; } /* SP: 2 行を 1 列につなげて横幅を抑える（イヤホンのストレス、→ さようなら。） */ .ac2 .ac2-tate { order: 0; flex: none; width: 26px; height: auto; padding: 0; gap: 0; flex-direction: column-reverse; align-self: center; align-items: center; justify-content: center; margin-top: 40px; } .ac2 .ac2-tate-line { padding: 12px 6px; gap: 2px; } .ac2 .ac2-tate-line.-a { margin: 0; padding-bottom: 4px; } .ac2 .ac2-tate-line.-b { padding-top: 0; } .ac2 .ac2-tate-chars { width: 13px; font-size: 13px; line-height: 17px; letter-spacing: 3px; } .ac2 .ac2-tate-chars span { height: 17px; margin-right: -3px; } .ac2 .ac2-tate-punct { width: 4px; height: 4px; } /* 04 コラージュ: 幅 % で組み直し（GL 側は DOM の矩形を読むので自動追従） */ /* 04 ギャラリー SP: PC と同じ考え方（左列は左端裁ち落としから、右列は右端裁ち落とし、すき間 10px、縦横を混ぜる） */ .ac2 .ac2-collage { height: 880px; } .ac2 .ac2-collage-h { left: 20px; top: 0; font-size: 20px; letter-spacing: 0.08em; line-height: 1.6; white-space: normal; } .ac2 .ac2-ph.-s6 { left: 0; top: 130px; width: calc(57% - 10px); height: 290px; } .ac2 .ac2-ph.-s1 { left: 57%; top: 130px; width: 43%; height: 200px; } .ac2 .ac2-ph.-s4 { left: 57%; top: 340px; width: calc(43% - 20px); height: 260px; } .ac2 .ac2-ph.-s5 { left: 20px; top: 430px; width: calc(57% - 30px); height: 240px; } .ac2 .ac2-ph.-s3 { left: 57%; top: 610px; width: 43%; height: 240px; } .ac2 .ac2-ph.-s2 { left: 0; top: 680px; width: calc(57% - 10px); height: 170px; } .ac2 .ac2-ph-cap { left: 12px; bottom: 10px; font-size: 12px; letter-spacing: 0.06em; } .ac2 .ac2-ph-cap.-top { top: 10px; } /* 05 スペック + 購入: 縦積み */ .ac2 .ac2-spec { padding: 48px 20px; flex-direction: column; gap: 28px; align-items: stretch; } .ac2 .ac2-icons { order: 5; width: 100%; align-self: auto; gap: 0; margin-top: 12px; } /* SP は購入ボタンの後ろへ */ .ac2 .ac2-icons li { width: 25%; padding: 8px 4px; } .ac2 .ac2-icon { width: 60px; height: 60px; } .ac2 .ac2-icon.-hours { width: 60px; } .ac2 .ac2-icon.-hours b { font-size: 19px; } .ac2 .ac2-icons p { font-size: 11px; letter-spacing: -0.02em; word-break: keep-all; } .ac2 .ac2-icon-note { font-size: 9px; } .ac2 .ac2-visual { flex: none; } .ac2 .ac2-visual-card { height: 440px; padding: 0; } .ac2 .ac2-visual-product { left: 50%; top: 80px; width: auto; height: 240px; transform: translateX(-50%); } .ac2 .ac2-buy { width: 100%; align-self: auto; align-items: center; text-align: center; gap: 24px; } .ac2 .ac2-buy-head { align-items: center; } .ac2 .ac2-buy-body { width: 100%; align-items: center; } /* SP: カラバリを 3D モデルの直下へ（購入パネルを contents 化して spec の flex 並びで順序指定） */ .ac2 .ac2-buy, .ac2 .ac2-buy-body { display: contents; } .ac2 .ac2-visual { order: 0; } .ac2 .ac2-colors { order: 1; align-self: center; align-items: center; margin-top: -12px; } .ac2 .ac2-buy-head { order: 2; align-self: center; text-align: center; margin-top: 8px; } .ac2 .ac2-buy-price { order: 3; align-self: center; } .ac2 .ac2-btns { order: 4; align-self: center; } .ac2 .ac2-colors { align-items: center; } .ac2 .lp-btns { justify-content: center; width: 100%; } .ac2 .lp-btns .is-more, .ac2 .lp-btns li:has(.lp-txtLink) { text-align: center; } /* 06 KSP: 縦積み + 2 列 */ .ac2 .ac2-ksp { width: 100%; height: auto; padding: 0 20px; flex-direction: column; gap: 10px; } .ac2 .ac2-card.-chip { width: 100%; height: 300px; } .ac2 .ac2-card.-chip img { left: 50%; top: 90px; width: 360px; height: auto; margin-left: -180px; } .ac2 .ac2-ksp-mid, .ac2 .ac2-ksp-right { width: 100%; height: auto; } .ac2 .ac2-card.-calls { height: 140px; } .ac2 .ac2-ksp-pair { flex: none; height: 220px; } .ac2 .ac2-ksp-pair .ac2-card { width: auto; flex: 1; } .ac2 .ac2-card h3 { left: 12px; right: 12px; top: 20px; font-size: 14px; } .ac2 .ac2-card h3.-lg, .ac2 .ac2-card.-chip h3 { font-size: 20px; } .ac2 .ac2-card.-bass .ac2-card-diaphragm { width: 200px; height: 200px; margin: -100px 0 0 -100px; } .ac2 .ac2-card-badges { left: auto; right: 12px; top: auto; bottom: 12px; } .ac2 .ac2-card.-water img { left: -20px; top: 80px; width: 200px; height: 230px; } .ac2 .ac2-card.-compact .ac2-card-bg { left: 0; top: 0; width: 100%; height: 100%; margin: 0; } .ac2 .ac2-card-hrs { left: 20px; top: 60px; } .ac2 .ac2-card-hrs b { font-size: 48px; line-height: 70px; } .ac2 .ac2-card-hrs span { margin-top: 36px; } .ac2 .ac2-card.-power img { left: 16px; top: 100px; width: 110px; height: 126px; } } /* --------------------------------------------------------------- 表出アニメーション（data-rv）。JS が画面内に入った要素へ .is-in を付ける up: ふわっと上がる / blur: ブラーから結像 / pop: 小さく弾む / wipe-down: 上から / wipe-right: 左から --------------------------------------------------------------- */ .ac2.is-js [data-rv] { opacity: 0; transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), clip-path 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.9s ease; } .ac2.is-js [data-rv="up"] { transform: translateY(22px); } .ac2.is-js [data-rv="blur"] { transform: translateY(12px); filter: blur(8px); } .ac2.is-js [data-rv="pop"] { transform: scale(0.72) translateY(8px); } .ac2.is-js [data-rv="wipe-down"] { opacity: 1; clip-path: inset(0 0 100% 0); } .ac2.is-js [data-rv="wipe-right"] { opacity: 1; clip-path: inset(0 100% 0 0); } .ac2.is-js [data-rv].is-in { opacity: 1; transform: none; filter: none; clip-path: none; } /* 拭き出し系だけ clip-path を補間。終点は枠より外側まで広げ、行間を詰めた文字のはみ出しを切らない */ .ac2.is-js [data-rv="wipe-down"].is-in, .ac2.is-js [data-rv="wipe-right"].is-in { clip-path: inset(-40px -40px -40px -40px); } .ac2.is-js.is-reduced [data-rv] { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; } /* =============================================================== クイック購入ヘッダー（lp-hd-second の置き換え） PC: [サムネ+製品名+製品詳細] [カラー] [価格] [購入 / Amazonで購入] SP: [サムネ+製品名] [価格] [購入する → モーダル] =============================================================== */ .ac2 .ac2-qb { position: sticky; top: 0; left: 0; z-index: 30; width: 100%; height: 52px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); font-family: var(--font); color: var(--ink); font-feature-settings: "palt" 1; transform: translateZ(1px); transition: background 0.3s, box-shadow 0.3s; } .ac2 .ac2-qb.is-stuck { background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 rgba(23, 45, 57, 0.08); } .ac2 .ac2-qb-inner { display: flex; align-items: center; gap: 28px; width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 32px; } .ac2 .ac2-qb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .ac2 .ac2-qb-id { display: flex; align-items: center; gap: 12px; margin-right: auto; text-align: left; } .ac2 .ac2-qb-thumb { width: 34px; height: 34px; border-radius: 0; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; } .ac2 .ac2-qb-thumb img { width: 26px; height: 32px; object-fit: contain; } .ac2 .ac2-qb-name { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; } .ac2 .ac2-qb-more { font-size: 12px; letter-spacing: 0.04em; padding: 5px 10px 5px 12px; border: 1px solid rgba(23, 45, 57, 0.2); border-radius: 999px; white-space: nowrap; transition: background 0.2s, border-color 0.2s; } .ac2 .ac2-qb-more::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(-45deg); } .ac2 .ac2-qb-id:hover .ac2-qb-more { background: #fff; border-color: rgba(23, 45, 57, 0.4); } .ac2 .ac2-qb-colors { display: flex; align-items: center; gap: 12px; } .ac2 .ac2-qb-dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } .ac2 .ac2-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--c, #fff); box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.18); cursor: pointer; transition: transform 0.2s; } .ac2 .ac2-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; transform: scale(0.85); transition: opacity 0.2s, transform 0.2s; } .ac2 .ac2-dot.is-on::after { opacity: 1; transform: scale(1); } .ac2 .ac2-dot:hover { transform: scale(1.08); } .ac2 .ac2-dot[data-color-idx="0"], .ac2 .ac2-swatch[data-color-idx="0"] { --c: #2b2c30; } .ac2 .ac2-dot[data-color-idx="1"], .ac2 .ac2-swatch[data-color-idx="1"] { --c: #6e2235; } .ac2 .ac2-dot[data-color-idx="2"], .ac2 .ac2-swatch[data-color-idx="2"] { --c: #ffffff; } .ac2 .ac2-dot[data-color-idx="3"], .ac2 .ac2-swatch[data-color-idx="3"] { --c: #b7c5d9; } .ac2 .ac2-qb-dots.-lg .ac2-dot { width: 30px; height: 30px; } .ac2 .ac2-qb-dots.-lg { gap: 14px; } .ac2 .ac2-qb .ac2-qb-color-name { min-width: 7em; font-size: 12px; letter-spacing: 0.04em; opacity: 0.75; white-space: nowrap; } .ac2 .ac2-qb .ac2-qb-price, .ac2 .ac2-modal .ac2-modal-price { font-family: var(--font); display: flex; align-items: baseline; gap: 3px; margin: 0; white-space: nowrap; line-height: 1; } .ac2 .ac2-qb-yen { font-size: 14px; font-weight: 500; } .ac2 .ac2-qb-price-num { font-size: 20px; letter-spacing: 0.01em; } .ac2 .ac2-qb-tax { font-size: 10px; opacity: 0.7; margin-left: 2px; } .ac2 .ac2-qb .lp-btns, .ac2 .ac2-modal .lp-btns { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; } .ac2 .ac2-qb .lp-btns li, .ac2 .ac2-modal .lp-btns li { margin: 0; } .ac2 .ac2-qb .lp-btns .lp-btn, .ac2 .ac2-qb .lp-btns .lp-btn-amazon { width: auto; margin: 0; box-sizing: border-box; height: 36px; min-width: 0; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 13px; letter-spacing: 0.06em; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } .ac2 .ac2-qb .lp-btns .lp-btn { background: #00cbeb; color: #fff; border: 0; } .ac2 .ac2-qb .lp-btns .lp-btn-amazon { background: transparent; color: var(--ink); border: 1px solid #ff9900; } .ac2 .ac2-qb .lp-btn:hover, .ac2 .ac2-qb .lp-btn-amazon:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 45, 57, 0.12); } .ac2 .ac2-qb-sp-buy { display: none; } /* ヘッダーの高さ分、KV を下げない（旧 lp-hd-second と同じく上に重ねる）。アンカーの着地だけ補正 */ .ac2 [id] { scroll-margin-top: 68px; } /* =============================================================== 製品詳細モーダル =============================================================== */ html.ac2-modal-open { overflow: hidden; } .ac2 .ac2-modal { width: min(920px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 64px); margin: auto; padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--ink); font-family: var(--font); font-feature-settings: "palt" 1; overflow: hidden; box-shadow: 0 40px 80px rgba(23, 45, 57, 0.18); } .ac2 .ac2-modal::backdrop { background: rgba(23, 45, 57, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ac2 .ac2-modal[open] { animation: ac2-modal-in 0.38s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2 .ac2-modal[open]::backdrop { animation: ac2-fade-in 0.3s ease; } .ac2 .ac2-modal.is-closing { animation: ac2-modal-out 0.22s ease forwards; } .ac2 .ac2-modal.is-closing::backdrop { animation: ac2-fade-out 0.22s ease forwards; } @keyframes ac2-modal-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes ac2-modal-out { to { opacity: 0; transform: translateY(12px) scale(0.99); } } @keyframes ac2-fade-in { from { opacity: 0; } } @keyframes ac2-fade-out { to { opacity: 0; } } .ac2 .ac2-modal-panel { position: relative; max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; } .ac2 .ac2-modal * { box-sizing: border-box; } .ac2 .ac2-modal h2, .ac2 .ac2-modal h3, .ac2 .ac2-modal p, .ac2 .ac2-modal ul, .ac2 .ac2-modal dl, .ac2 .ac2-modal dd { margin: 0; padding: 0; font-family: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; } .ac2 .ac2-modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(23, 45, 57, 0.06); cursor: pointer; transition: background 0.2s; } .ac2 .ac2-modal-close::before, .ac2 .ac2-modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -0.75px 0 0 -8px; background: var(--ink); transform: rotate(45deg); } .ac2 .ac2-modal-close::after { transform: rotate(-45deg); } .ac2 .ac2-modal-close:hover { background: rgba(23, 45, 57, 0.12); } .ac2 .ac2-modal-head { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 40px 48px 32px; background: linear-gradient(180deg, #eef6fb, #fff); } .ac2 .ac2-modal-visual { display: grid; place-items: center; height: 300px; border-radius: 0; background: #fff; } .ac2 .ac2-modal-visual img { width: auto; height: 250px; object-fit: contain; } .ac2 .ac2-modal-buy { display: flex; flex-direction: column; gap: 14px; justify-content: center; } .ac2 .ac2-modal .ac2-modal-lead { font-size: 14px; line-height: 1.6; letter-spacing: 0.06em; opacity: 0.75; } .ac2 .ac2-modal .ac2-modal-title { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: 0.01em; } .ac2 .ac2-modal-price .ac2-qb-yen { font-size: 16px; } .ac2 .ac2-modal-price .ac2-qb-price-num { font-size: 28px; } .ac2 .ac2-modal-colors { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .ac2 .ac2-modal .ac2-modal-color-name { font-size: 12px; letter-spacing: 0.06em; opacity: 0.7; } .ac2 .ac2-modal .lp-btns .lp-btn, .ac2 .ac2-modal .lp-btns .lp-btn-amazon { width: auto; margin: 0; box-sizing: border-box; height: 48px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 14px; letter-spacing: 0.06em; line-height: 1; text-decoration: none; white-space: nowrap; } .ac2 .ac2-modal .lp-btns .lp-btn { background: #00cbeb; color: #fff; border: 0; } .ac2 .ac2-modal .lp-btns .lp-btn-amazon { background: transparent; color: var(--ink); border: 1px solid #ff9900; } .ac2 .ac2-modal-body { padding: 8px 48px 40px; display: grid; gap: 28px; } .ac2 .ac2-modal .ac2-modal-sec h3 { font-size: 13px; font-weight: 400; letter-spacing: 0.12em; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid rgba(23, 45, 57, 0.1); } .ac2 .ac2-modal-feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; } .ac2 .ac2-modal .ac2-modal-feats li { font-size: 13px; line-height: 1.6; letter-spacing: 0.04em; opacity: 0.85; } .ac2 .ac2-modal .ac2-modal-feats b { display: block; font-size: 14px; font-weight: 500; opacity: 1; letter-spacing: 0.06em; } .ac2 .ac2-modal-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .ac2 .ac2-modal-spec div { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(23, 45, 57, 0.06); font-size: 13px; letter-spacing: 0.04em; } .ac2 .ac2-modal-spec dt { width: 8em; flex: none; opacity: 0.6; } .ac2 .ac2-modal .ac2-modal-note { margin-top: 10px; font-size: 11px; opacity: 0.55; } .ac2 .ac2-modal .ac2-modal-text { font-size: 13px; line-height: 1.7; letter-spacing: 0.04em; } .ac2 .ac2-modal-link { justify-self: start; font-size: 14px; letter-spacing: 0.06em; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .ac2 .ac2-modal-link::after { content: " ›"; } @media (max-width: 1079px) { .ac2 .ac2-qb { height: 56px; } .ac2 .ac2-qb-inner { gap: 12px; padding: 0 12px; } .ac2 .ac2-qb-thumb { width: 34px; height: 34px; } .ac2 .ac2-qb-thumb img { width: 26px; height: 32px; } .ac2 .ac2-qb-name { font-size: 14px; } @media (max-width: 400px) { .ac2 .ac2-qb-name { display: none; } } /* 狭い端末は名前を外してチップを優先 */ .ac2 .ac2-qb-more, .ac2 .ac2-qb-btns, .ac2 .ac2-qb .ac2-qb-color-name, .ac2 .ac2-qb-tax { display: none; } /* SP: カラーチップをヘッダーに詰め込む（小さく、名前は非表示） */ .ac2 .ac2-qb-colors { display: flex; gap: 0; margin-left: auto; } .ac2 .ac2-qb-id { margin-right: 0; } .ac2 .ac2-qb-dots { gap: 5px; } .ac2 .ac2-qb-dots .ac2-dot { width: 18px; height: 18px; } .ac2 .ac2-qb-price-num { font-size: 16px; } .ac2 .ac2-qb-yen { font-size: 12px; } .ac2 .ac2-qb-sp-buy { display: inline-flex !important; align-items: center; height: 36px; padding: 0 16px !important; border-radius: 999px; background: #00cbeb !important; color: #fff !important; font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; } /* モーダルは下から出るシート */ .ac2 .ac2-modal { width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: 0; } .ac2 .ac2-modal-panel { max-height: 88vh; } .ac2 .ac2-modal[open] { animation: ac2-sheet-in 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2 .ac2-modal.is-closing { animation: ac2-sheet-out 0.22s ease forwards; } @keyframes ac2-sheet-in { from { transform: translateY(100%); } to { transform: none; } } @keyframes ac2-sheet-out { to { transform: translateY(100%); } } .ac2 .ac2-modal-head { grid-template-columns: 110px 1fr; gap: 8px 16px; padding: 28px 20px 20px; align-items: end; } .ac2 .ac2-modal-visual { height: 130px; } .ac2 .ac2-modal-visual img { height: 110px; } .ac2 .ac2-modal-buy { display: contents; } .ac2 .ac2-modal-visual { grid-row: 1 / span 3; } .ac2 .ac2-modal-lead, .ac2 .ac2-modal-title, .ac2 .ac2-modal-price { grid-column: 2; } .ac2 .ac2-modal .ac2-modal-lead { font-size: 12px; } .ac2 .ac2-modal .ac2-modal-title { font-size: 24px; } .ac2 .ac2-modal-colors, .ac2 .ac2-modal-btns { grid-column: 1 / -1; } .ac2 .ac2-modal-btns .lp-btns { width: 100%; } .ac2 .ac2-modal-btns .lp-btns li { flex: 1; } .ac2 .ac2-modal .lp-btns .lp-btn, .ac2 .ac2-modal .lp-btns .lp-btn-amazon { width: 100%; padding: 0 12px; } .ac2 .ac2-modal-body { padding: 4px 20px 32px; gap: 24px; } .ac2 .ac2-modal-feats, .ac2 .ac2-modal-spec { grid-template-columns: 1fr; } } .ac2 .ac2-qb-price .product-price-v2-unit, .ac2 .ac2-qb-price .product-price-v2, .ac2 .ac2-modal-price .product-price-v2-unit, .ac2 .ac2-modal-price .product-price-v2 { display: flex; align-items: baseline; gap: 4px; margin: 0; } .ac2 .ac2-qb-price .product-price-v2-default { margin: 0; font-size: 20px; line-height: 1; } .ac2 .ac2-modal-price .product-price-v2-default { margin: 0; font-size: 28px; line-height: 1; } .ac2 .ac2-qb-price .product-price-v2-tax, .ac2 .ac2-modal-price .product-price-v2-tax { font-size: 10px; opacity: 0.7; } @media (max-width: 1079px) { .ac2 .ac2-qb-price .product-price-v2-default { font-size: 17px; } } /* 商品公開後に product-price-v2 が出す付帯情報（11/12）: 空の割引率枠の下余白を消し、クーポン札は 1 行の小さな札に。SP のバーは幅がないので札を出さない（モーダルに出る） */ .ac2 .ac2-qb-price .product-price-v2-discount-rate-wrap, .ac2 .ac2-modal-price .product-price-v2-discount-rate-wrap { margin: 0; } .ac2 .ac2-qb-price .product-price-v2-discount-rate-wrap:has(#discount-rate-mile:empty):not(:has(#product-price-v2-discount-rate)), .ac2 .ac2-modal-price .product-price-v2-discount-rate-wrap:has(#discount-rate-mile:empty):not(:has(#product-price-v2-discount-rate)) { display: none; } /* クーポン札（11/12）: ヘッダー・モーダル・購入セクション・下段 CTA で同じ札。赤地に白文字・1 行。共通の max-width: 70px で 2 行に割れるのを止める */ .ac2 p.product-price-v2-coupon-label { display: inline-block; flex: none; align-self: center; width: auto; max-width: none; margin: 0 0 0 6px; padding: 4px 6px; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; color: #fff; background: #cd3752; border-radius: 0; } .ac2 .ac2-buy-price p.product-price-v2-coupon-label, .ac2 .ac2-cta2-price p.product-price-v2-coupon-label { padding: 5px 8px; font-size: 12px; } .ac2 .ac2-buy-price p.product-price-v2-coupon-label, .ac2 .ac2-cta2-price p.product-price-v2-coupon-label { align-self: flex-end; margin-left: 8px; } @media (max-width: 1079px) { /* SP のバーは価格の下に小さく */ .ac2 .ac2-qb-price .product-price-v2-unit { flex-direction: column; align-items: flex-start; gap: 3px; } .ac2 .ac2-qb-price p.product-price-v2-coupon-label { align-self: flex-start; margin: 0; padding: 3px 4px; font-size: 9px; } .ac2 .ac2-modal-price p.product-price-v2-coupon-label { align-self: flex-start; margin: 6px 0 0; } } /* 購入セクションのスウォッチは製品画像でなく色チップ（4 色の画像が揃うまで） */ .ac2 .ac2-swatch { background: var(--c, #fff); box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.15); } /* .ac2 .ac2-qb button { background: none } (0,2,1) に負けないように */ .ac2 .ac2-qb .ac2-dot, .ac2 .ac2-modal .ac2-dot { background: var(--c, #fff); } /* ヘッダーは sticky（最上部では告知バー・メインヘッダーの下、スクロールで上端に吸着）。祖先の overflow で sticky が効かなくならないよう clip のみ */ /* テーマの #PageContainer { overflow: hidden } は sticky を無効にする。このページだけ、見た目が同じでスクロール容器を作らない clip に */ body:has(.page-aeroclip-2) #PageContainer { overflow: clip; } /* =============================================================== カラーチップ（購入セクション .ac2-swatch / ヘッダー・モーダル .ac2-dot 共通の表現） ケースに見立てる: 左上から光が当たる光沢グラデーション + メタルバンドの細い帯 + 上面のハイライト 選択中: 少し浮いて外側にリング =============================================================== */ .ac2 [data-color-idx="0"] { --c: #2b2c30; --c-hi: #55575d; --c-lo: #141518; --c-band: #8b8e95; } .ac2 [data-color-idx="1"] { --c: #6e2235; --c-hi: #9a4459; --c-lo: #3f0f1c; --c-band: #c98a9a; } .ac2 [data-color-idx="2"] { --c: #f3f2ef; --c-hi: #ffffff; --c-lo: #d9d7d2; --c-band: #b9ad98; } .ac2 [data-color-idx="3"] { --c: #b7c5d9; --c-hi: #dbe4f0; --c-lo: #8c9db6; --c-band: #eef3fa; } .ac2 .ac2-swatches { gap: 10px; } .ac2 .ac2-swatch, .ac2 .ac2-qb .ac2-dot, .ac2 .ac2-modal .ac2-dot { --chip-shadow: 0 1px 2px rgba(23, 45, 57, 0.18), 0 4px 10px rgba(23, 45, 57, 0.08); border: 0; background: radial-gradient(120% 70% at 28% 12%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, transparent 38.5%, var(--c-band) 38.5%, var(--c-band) 42%, transparent 42%), /* 10/19 Figma: 上下反転（帯を上寄りに＝実物のケースの継ぎ目） */ linear-gradient(145deg, var(--c-hi) 0%, var(--c) 48%, var(--c-lo) 100%); box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.12), inset 0 -3px 6px rgba(0, 0, 0, 0.12), var(--chip-shadow); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s; } .ac2 .ac2-swatch { width: 32px; height: 32px; border-radius: 9px; overflow: visible; } .ac2 .ac2-swatch img { display: none; } .ac2 .ac2-swatch:hover, .ac2 .ac2-qb .ac2-dot:hover, .ac2 .ac2-modal .ac2-dot:hover { transform: translateY(-2px); } /* 選択中: 地色のすき間を挟んだ濃紺リング + 浮き */ .ac2 .ac2-swatch.is-on, .ac2 .ac2-qb .ac2-dot.is-on, .ac2 .ac2-modal .ac2-dot.is-on { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.12), inset 0 -3px 6px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--bg), 0 0 0 4.5px var(--ink), 0 10px 18px rgba(23, 45, 57, 0.16); } .ac2 .ac2-swatch.is-on { border-color: transparent; } /* ドット（丸）はリングを ::after で描いていたので無効化し、上の box-shadow に統一 */ .ac2 .ac2-qb .ac2-dot::after, .ac2 .ac2-modal .ac2-dot::after { display: none; } .ac2 .ac2-qb .ac2-dot.is-on { box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.12), 0 0 0 2px #fff, 0 0 0 3.5px var(--ink), 0 4px 10px rgba(23, 45, 57, 0.14); transform: translateY(-1px); } .ac2 .ac2-modal .ac2-dot.is-on { box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.12), 0 0 0 3px #fff, 0 0 0 4.5px var(--ink), 0 6px 14px rgba(23, 45, 57, 0.16); } /* 10/22: ヘッダー・モーダルのチップも購入セクションと同じ角丸の四角に（32px で 9px と同じ比率） */ .ac2 .ac2-qb .ac2-dot, .ac2 .ac2-modal .ac2-dot { border-radius: 28%; } @media (prefers-reduced-motion: reduce) { .ac2 .ac2-swatch, .ac2 .ac2-dot { transition: none; } } /* ---- 省電力（スマホ）: スクロール中に毎フレーム再計算される効果を外す ---- */ @media (max-width: 1079px), (pointer: coarse) { .ac2 .ac2-qb, .ac2 .ac2-qb.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.96); } .ac2.is-js [data-rv="blur"] { filter: none; } .ac2 .ac2-modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(23, 45, 57, 0.4); } } /* =============================================================== 背景の水彩の雲（全体）: .ac2 の最背面。コンテンツ(.ac2-zoom)は前面 =============================================================== */ .ac2 .ac2-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .ac2 .ac2-zoom { position: relative; z-index: 1; } .ac2 .ac2-sky-cloud { position: absolute; top: var(--t); left: var(--l); width: calc(var(--w) * 1vw); max-width: none; height: auto; opacity: var(--o); will-change: transform; } .ac2 .ac2-sky-cloud.-flip { scale: -1 1; } .ac2 .ac2-sky-cloud.-c1 { --t: 13.5%; --l: -8%; --w: 64; --o: 0.9; } .ac2 .ac2-sky-cloud.-c2 { --t: 21%; --l: 60%; --w: 44; --o: 0.8; } .ac2 .ac2-sky-cloud.-c3 { --t: 31%; --l: 18%; --w: 56; --o: 0.85; } .ac2 .ac2-sky-cloud.-c4 { --t: 40%; --l: 72%; --w: 30; --o: 0.75; } .ac2 .ac2-sky-cloud.-c5 { --t: 49%; --l: -6%; --w: 42; --o: 0.8; } .ac2 .ac2-sky-cloud.-c6 { --t: 58%; --l: 44%; --w: 60; --o: 0.85; } .ac2 .ac2-sky-cloud.-c7 { --t: 68%; --l: 4%; --w: 46; --o: 0.8; } .ac2 .ac2-sky-cloud.-c8 { --t: 78%; --l: 52%; --w: 54; --o: 0.85; } .ac2 .ac2-sky-cloud.-c9 { --t: 88%; --l: 14%; --w: 32; --o: 0.75; } @media (max-width: 1079px) { .ac2 .ac2-sky-cloud { width: calc(var(--w) * 1.7vw); } } /* ---- KV オープニング: 水彩のしみのように下中央から空が広がる（mask-size のみ補間、終わったら mask を外す） ---- */ .ac2 .ac2-kv-bg.is-opening { -webkit-mask-image: var(--ac2-kv-mask); mask-image: var(--ac2-kv-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; animation: ac2-kv-bloom 2s cubic-bezier(0.55, 0.05, 0.3, 1) both; } @keyframes ac2-kv-bloom { 0% { -webkit-mask-size: 6% auto; mask-size: 6% auto; } 100% { -webkit-mask-size: var(--bloom-end, 300%) auto; mask-size: var(--bloom-end, 300%) auto; } /* 一息で空いっぱいに。終点は画面を覆い切る大きさ（PC 300% / SP 460%） */ } .ac2 .ac2-kv-bg.is-opened { -webkit-mask-image: none; mask-image: none; } @media (max-width: 1079px) { .ac2 .ac2-kv-bg.is-opening { animation-duration: 1.7s; --bloom-end: 460%; } } /* 10/22 KV のチラ見え対策: 読み込み直後から登場前の見た目（写真はしみの最小・コピーは透明）。JS が演出を組んだら .is-pre を外す。 JS が来なかったときだけ 5 秒で見せる */ .ac2 .ac2-kv.is-pre .ac2-kv-bg { -webkit-mask-image: var(--ac2-kv-mask); mask-image: var(--ac2-kv-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; -webkit-mask-size: 6% auto; mask-size: 6% auto; animation: ac2-kv-pre-bg 0s linear 5s forwards; } .ac2 .ac2-kv.is-pre .ac2-kv-copy, .ac2 .ac2-kv.is-pre .ac2-kv-name { opacity: 0; animation: ac2-kv-pre-show 0.6s ease 5s forwards; } @keyframes ac2-kv-pre-bg { to { -webkit-mask-size: 600% auto; mask-size: 600% auto; } } @keyframes ac2-kv-pre-show { to { opacity: 1; } } /* 写真の読み込み待ちの間は空だけ見せておく（読めたら広がり始める） */ .ac2 .ac2-kv-bg.is-waiting { -webkit-mask-image: var(--ac2-kv-mask); mask-image: var(--ac2-kv-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; -webkit-mask-size: 6% auto; mask-size: 6% auto; } /* =============================================================== CRF p.15-21（機能詳細 / CTA 2 回目 / 他ラインナップ / No.1 再掲） =============================================================== */ .ac2 .ac2-feat, .ac2 .ac2-cta2, .ac2 .ac2-lineup, .ac2 .ac2-review { position: relative; width: 1440px; margin: 0 auto; } .ac2 .ac2-why.-again { margin-top: 40px; } /* KSP ベント → 詳細へのジャンプ */ .ac2 .ac2-card-link { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end; padding: 14px 16px; text-decoration: none; color: var(--ink); } .ac2 .ac2-card-link span { font-size: 12px; letter-spacing: 0.06em; padding: 5px 10px 5px 12px; border-radius: 0; background: rgba(255, 255, 255, 0.85); opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; } .ac2 .ac2-card-link span::after { content: "›"; margin-left: 6px; } .ac2 .ac2-card:hover .ac2-card-link span, .ac2 .ac2-card-link:focus-visible span { opacity: 1; transform: none; } .ac2 .ac2-card { transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s; } .ac2 .ac2-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23, 45, 57, 0.08); } /* 機能詳細 */ .ac2 .ac2-feat { padding: 160px 120px 80px; } .ac2 .ac2-feat-head { margin-bottom: 96px; } .ac2 .ac2-feat-eyebrow { font-family: var(--mont); font-size: 13px; letter-spacing: 0.3em; opacity: 0.55; margin-bottom: 14px; } .ac2 .ac2-feat-title { font-size: 30px; line-height: 1.6; letter-spacing: 0.12em; } .ac2 .ac2-feat-group { display: flex; gap: 80px; align-items: flex-start; padding: 72px 0; border-top: 1px solid rgba(23, 45, 57, 0.1); } .ac2 .ac2-feat-label { position: sticky; top: 120px; width: 280px; flex: none; } .ac2 .ac2-feat-no { font-family: var(--mont); font-size: 64px; line-height: 1; letter-spacing: -0.02em; color: rgba(23, 45, 57, 0.18); margin-bottom: 18px; } .ac2 .ac2-feat-name { font-size: 24px; line-height: 1.6; letter-spacing: 0.1em; } .ac2 .ac2-feat-items { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 72px; } .ac2 .ac2-feat-items.-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 40px; } .ac2 .ac2-feat-media { position: relative; aspect-ratio: 16 / 9; margin-bottom: 28px; border-radius: 0; overflow: hidden; background: #fff; } .ac2 .ac2-feat-items.-grid .ac2-feat-media { aspect-ratio: 4 / 3; margin-bottom: 22px; } .ac2 .ac2-feat-media > img { position: absolute; inset: -6% 0; width: 100%; height: 112%; max-width: none; object-fit: cover; will-change: transform; } .ac2 .ac2-feat-media > img.-contain { inset: 8% 10%; width: 80%; height: 84%; object-fit: contain; } .ac2 .ac2-feat-media.-dark { background: #1d2733; } .ac2 .ac2-feat-media.-white { background: rgba(255, 255, 255, 0.72); } .ac2 .ac2-feat-media.-chip { background: linear-gradient(180deg, #f3fcff, #cfedff); } .ac2 .ac2-feat-media.-blank { background: #fff; display: grid; place-items: center; } .ac2 .ac2-feat-media.-blank span { font-size: 12px; letter-spacing: 0.08em; color: rgba(23, 45, 57, 0.4); } .ac2 .ac2-feat-badges { position: absolute; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .ac2 .ac2-feat-badges img { width: 54px; height: auto; } .ac2 .ac2-feat-hours { position: absolute; left: 36px; top: 28px; display: flex; align-items: baseline; gap: 6px; font-family: var(--mont); z-index: 2; } .ac2 .ac2-feat-hours b { font-size: 88px; line-height: 1; font-weight: 400; } .ac2 .ac2-feat-hours span { font-family: var(--font); font-size: 18px; } .ac2 .ac2-feat-h { font-size: 22px; line-height: 1.6; letter-spacing: 0.08em; margin-bottom: 14px; } .ac2 .ac2-feat-p { font-size: 15px; line-height: 1.9; letter-spacing: 0.04em; color: rgba(23, 45, 57, 0.72); } .ac2 .ac2-feat-note { margin-top: 12px; font-size: 11px; line-height: 1.7; color: rgba(23, 45, 57, 0.5); } /* カラバリの仮ビジュアル */ .ac2 .ac2-feat-colors > img.-contain { inset: 6% 20% 22%; width: 60%; height: 72%; transition: filter 0.5s; } .ac2 .ac2-feat-tint { position: absolute; inset: 6% 20% 22%; background: var(--feat-tint, #fff); mix-blend-mode: multiply; -webkit-mask: var(--ac2-prod-mask) center / contain no-repeat; mask: var(--ac2-prod-mask) center / contain no-repeat; transition: background-color 0.5s; pointer-events: none; } .ac2 .ac2-swatches.-feat { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: flex; gap: 14px; z-index: 2; } .ac2 .ac2-feat-colorname { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; letter-spacing: 0.08em; opacity: 0.7; } /* 製品 + CTA（2 回目） */ .ac2 .ac2-cta2 { padding: 80px 120px; } .ac2 .ac2-cta2-card { display: grid; grid-template-columns: 520px 1fr; gap: 64px; padding: 56px; border-radius: 0; background: rgba(255, 255, 255, 0.62); } .ac2 .ac2-cta2-visual { position: relative; height: 560px; border-radius: 0; background: #fff; display: grid; place-items: center; } .ac2 .ac2-cta2-product { height: 400px; width: auto; } .ac2 .ac2-cta2-new { position: absolute; left: 24px; top: 24px; font-family: var(--mont); font-size: 12px; letter-spacing: 0.2em; padding: 6px 12px; border-radius: 0; background: var(--ink); color: #fff; } .ac2 .ac2-cta2-hires { position: absolute; right: 24px; top: 24px; width: 45px; height: 60px; } .ac2 .ac2-cta2-body { display: flex; flex-direction: column; gap: 18px; } .ac2 .ac2-cta2-lead { font-size: 18px; line-height: 1.6; letter-spacing: 0.05em; } .ac2 .ac2-cta2-name { font-size: 40px; font-weight: 500; line-height: 1.1; } /* 下段 CTA の価格は購入セクション（.ac2-buy-price）と同じ組み（11/12） */ .ac2 .ac2-cta2-price { display: flex; align-items: flex-end; gap: 4px; height: 23px; margin: 12px 0 10px; white-space: nowrap; font-feature-settings: "palt" 1; } .ac2 .ac2-cta2-colors { display: flex; flex-direction: column; gap: 10px; } .ac2 .ac2-cta2-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 6px 0 0; } .ac2 .ac2-cta2-spec div { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid rgba(23, 45, 57, 0.08); } .ac2 .ac2-cta2-spec dt { font-size: 11px; letter-spacing: 0.06em; opacity: 0.6; } .ac2 .ac2-cta2-spec dd { margin: 0; font-size: 14px; line-height: 1.6; letter-spacing: 0.03em; } .ac2 .ac2-cta2-spec small { display: block; font-size: 11px; opacity: 0.6; } .ac2 .ac2-stars { color: #00a9e0; letter-spacing: 0.1em; } .ac2 .ac2-stars i { font-style: normal; color: rgba(23, 45, 57, 0.15); } .ac2 .ac2-cta2-note { font-size: 9px; opacity: 0.55; } .ac2 .ac2-cta2 .lp-btns { width: auto; } /* 他ラインナップ */ .ac2 .ac2-lineup { padding: 80px 120px 40px; } .ac2 .ac2-lineup .ac2-feat-title { margin-bottom: 40px; } .ac2 .ac2-lineup-list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .ac2 .ac2-lineup-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); } .ac2 .ac2-lineup-img { display: block; aspect-ratio: 1200 / 630; border-radius: 0; overflow: hidden; background: #fff; margin-bottom: 10px; } .ac2 .ac2-lineup-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2 .ac2-lineup-card:hover .ac2-lineup-img img { transform: scale(1.04); } .ac2 .ac2-lineup-img.-blank { display: grid; place-items: center; } .ac2 .ac2-lineup-img.-blank span { font-size: 12px; letter-spacing: 0.08em; color: rgba(23, 45, 57, 0.4); } .ac2 .ac2-lineup-eyebrow { font-size: 12px; letter-spacing: 0.1em; opacity: 0.6; } .ac2 .ac2-lineup-title { font-size: 18px; line-height: 1.6; letter-spacing: 0.05em; } .ac2 .ac2-lineup-more { font-size: 13px; letter-spacing: 0.06em; } .ac2 .ac2-lineup-more::after { content: " ›"; } /* レビュー動画（公開後） */ .ac2 .ac2-review { padding: 80px 120px; } .ac2 .ac2-review-frame { margin-top: 32px; aspect-ratio: 16 / 9; border-radius: 0; overflow: hidden; } .ac2 .ac2-review-frame iframe { width: 100%; height: 100%; border: 0; } @media (max-width: 1079px) { .ac2 .ac2-feat, .ac2 .ac2-cta2, .ac2 .ac2-lineup, .ac2 .ac2-review { width: 100%; } .ac2 .ac2-card-link span { opacity: 1; transform: none; font-size: 10px; padding: 3px 8px 3px 9px; } .ac2 .ac2-feat { padding: 72px 20px 32px; } .ac2 .ac2-feat-head { margin-bottom: 40px; } .ac2 .ac2-feat-title { font-size: 22px; letter-spacing: 0.08em; } .ac2 .ac2-feat-group { flex-direction: column; gap: 24px; padding: 40px 0; } .ac2 .ac2-feat-label { position: static; width: 100%; display: flex; align-items: baseline; gap: 14px; } .ac2 .ac2-feat-no { font-size: 40px; margin: 0; } .ac2 .ac2-feat-name { font-size: 19px; } .ac2 .ac2-feat-name br { display: none; } .ac2 .ac2-feat-items, .ac2 .ac2-feat-items.-grid { display: flex; flex-direction: column; gap: 40px; } .ac2 .ac2-feat-media, .ac2 .ac2-feat-items.-grid .ac2-feat-media { aspect-ratio: 4 / 3; margin-bottom: 18px; } .ac2 .ac2-feat-h { font-size: 17px; margin-bottom: 10px; } .ac2 .ac2-feat-p { font-size: 13px; line-height: 1.85; } .ac2 .ac2-feat-hours b { font-size: 60px; } .ac2 .ac2-feat-hours { left: 20px; top: 18px; } .ac2 .ac2-swatches.-feat { bottom: 34px; } .ac2 .ac2-cta2 { padding: 40px 20px; } .ac2 .ac2-cta2-card { grid-template-columns: 1fr; gap: 24px; padding: 20px; } .ac2 .ac2-cta2-visual { height: 320px; } .ac2 .ac2-cta2-product { height: 240px; } .ac2 .ac2-cta2-lead { font-size: 15px; } .ac2 .ac2-cta2-name { font-size: 30px; } .ac2 .ac2-cta2-spec { grid-template-columns: 1fr; } .ac2 .ac2-lineup { padding: 40px 20px 24px; } .ac2 .ac2-lineup .ac2-feat-title { margin-bottom: 24px; } .ac2 .ac2-lineup-list { grid-template-columns: 1fr; gap: 32px; } .ac2 .ac2-lineup-title { font-size: 15px; } .ac2 .ac2-review { padding: 40px 20px; } } .ac2 .ac2-cta2 .lp-btns { justify-content: flex-start; } .ac2 .ac2-cta2 .lp-btns .is-more, .ac2 .ac2-cta2 .lp-btns li:has(.lp-txtLink) { text-align: left; } .ac2 .ac2-feat-media:has(.ac2-feat-hours) > img.-contain { inset: 10% 6% 10% 46%; width: 48%; height: 80%; } .ac2 .ac2-feat-hours { top: 50%; transform: translateY(-50%); left: 8%; } /* 6つのおすすめポイント: v2（重ねカード）は 9/27 に撤回。.ac2-feat-text は素のまま、透かし番号は非表示 */ .ac2 .ac2-feat-ghost { display: none; } /* ---- 太字を使わない（見出し含む）。h4 もリセットに含める ---- */ .ac2 h4 { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } .ac2 .ac2-feat-h, .ac2 .ac2-feat-name, .ac2 .ac2-feat-title, .ac2 .ac2-cta2-name, .ac2 .ac2-lineup-title, .ac2 .ac2-feat-hours b, .ac2 .ac2-feat-p b { font-weight: 400; } /* ---- おまけコンテンツ（他ラインナップ / No.1）: 背景を敷いて製品紹介の終わりを示す ---- */ .ac2 .ac2-extra { position: relative; margin-top: 120px; } .ac2 .ac2-extra .ac2-why.-again { margin-top: 0; } .ac2 .ac2-extra-eyebrow { margin: 0 0 14px; font-family: var(--mont); font-size: 12px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.5); } @media (max-width: 1079px) { .ac2 .ac2-extra { margin-top: 56px; } .ac2 .ac2-extra-eyebrow { font-size: 10px; margin-bottom: 10px; } } /* 太字を使わない（Figma 由来の SemiBold/Bold 指定も含めて）。角丸はボタン以外なし */ .ac2 b, .ac2 strong, .ac2 small, .ac2 h3, .ac2 h4, .ac2-modal b, .ac2-modal h3, .ac2-modal strong { font-weight: 400; } /* CTA 2 回目: 選んだ色で製品写真を染める（機能詳細のカラバリと同じ仕組み） */ .ac2 .ac2-cta2-prodwrap { position: relative; display: block; line-height: 0; } .ac2 .ac2-feat-tint.-full { inset: 0; } /* カラバリ仮ビジュアル: 製品を上に寄せてチップと重ねない */ .ac2 .ac2-feat-colors > img.-contain { inset: 5% 30% 36%; width: 40%; height: 59%; } .ac2 .ac2-feat-colors > .ac2-feat-tint { inset: 5% 30% 36%; } .ac2 .ac2-swatches.-feat { bottom: 52px; } .ac2 .ac2-feat-colorname { bottom: 18px; } /* KV: 1560px を超える画面では、背景写真（元々 1440 枠より左右に約 480px 広い）を余白（--bleed）まで見せる。 縦は clip-path で枠どおりに切る。写真の左右端はフェードしてページ地へ溶かす */ .ac2 .ac2-kv { overflow: visible; clip-path: inset(0 calc(-1 * var(--bleed, 0px))); } .ac2 .ac2-kv-bg { left: calc(-1 * var(--bleed, 0px)); right: calc(-1 * var(--bleed, 0px)); overflow: visible; } .ac2 .ac2-kv-bg img { left: calc(var(--bleed, 0px) - 497.1px); width: 2389.7px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } .ac2 .ac2-kv-fade { left: calc(-1 * var(--bleed, 0px)); right: calc(-1 * var(--bleed, 0px)); } /* 10/22: KV 下端に背景写真の 1 行が線になって出ていた（パララックスで写真が下端を越えると、.ac2-kv の clip の端で写真が半透明に残る） → 写真は KV 下端の 6px 手前で切る（JS が parallax に合わせて inset を計算。これは JS 無しのときの既定）。ぼかしは最後の 16px を地色のべたに */ .ac2 .ac2-kv-bg { clip-path: inset(0 0 6px 0); } .ac2 .ac2-kv-fade { bottom: -1px; background: linear-gradient(180deg, rgba(228, 240, 247, 0) 68%, rgba(228, 240, 247, 0.6) 86%, var(--bg) calc(100% - 16px), var(--bg) 100%); } @media (max-width: 1079px) { .ac2 .ac2-kv { clip-path: none; overflow: hidden; } .ac2 .ac2-kv-bg { left: 0; right: 0; overflow: hidden; } .ac2 .ac2-kv-bg img { left: -70%; width: 230%; -webkit-mask-image: none; mask-image: none; } .ac2 .ac2-kv-fade { left: 0; right: 0; } } /* ---- スペックアイコンのマイクロインタラクション: 表出（.is-in）で一度だけ小さく動き、PC はホバーでもう一度。 音符だけは常時ゆっくり揺れる。物の形は変えず、位置/角度/拡大だけ ---- */ .ac2 .ac2-icon img, .ac2 .ac2-icon-sound { transform-origin: 50% 50%; } .ac2 .ac2-icon.-ear img { transform-origin: 40% 30%; } .ac2 .ac2-icon.-call img { transform-origin: 30% 70%; } .ac2 .ac2-icon.-multi img { transform-origin: 50% 100%; } .ac2 .ac2-icons li.is-in .ac2-icon.-sound .-a { animation: ac2-ic-spin 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) 0.45s both; } .ac2 .ac2-icons li.is-in .ac2-icon.-sound .-b { animation: ac2-ic-notes 3.2s ease-in-out 0.6s infinite; } .ac2 .ac2-icons li.is-in .ac2-icon.-ear img { animation: ac2-ic-nod 1.2s ease-in-out 0.5s both; } .ac2 .ac2-icons li.is-in .ac2-icon.-call img { animation: ac2-ic-ring 0.9s ease-in-out 0.5s both; } .ac2 .ac2-icons li.is-in .ac2-icon.-multi img { animation: ac2-ic-hop 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) 0.5s both; } @media (hover: hover) { .ac2 .ac2-icons li.is-in:hover .ac2-icon.-sound .-a { animation: ac2-ic-spin2 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) both; } .ac2 .ac2-icons li.is-in:hover .ac2-icon.-ear img { animation: ac2-ic-nod2 1.2s ease-in-out both; } .ac2 .ac2-icons li.is-in:hover .ac2-icon.-call img { animation: ac2-ic-ring2 0.9s ease-in-out both; } .ac2 .ac2-icons li.is-in:hover .ac2-icon.-multi img { animation: ac2-ic-hop2 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) both; } .ac2 .ac2-icons li.is-in:hover .ac2-icon.-hours b { animation: ac2-ic-hop2 0.7s cubic-bezier(0.3, 0.7, 0.3, 1) both; } } /* 定期の動き: JS が数秒おきに 1 つずつ .is-tick を付け直す（順番に一つずつ動く） */ .ac2 .ac2-icons li.is-tick .ac2-icon.-sound .-a { animation: ac2-ic-spin2 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) both; } .ac2 .ac2-icons li.is-tick .ac2-icon.-ear img { animation: ac2-ic-nod2 1.2s ease-in-out both; } .ac2 .ac2-icons li.is-tick .ac2-icon.-call img { animation: ac2-ic-ring2 0.9s ease-in-out both; } .ac2 .ac2-icons li.is-tick .ac2-icon.-multi img { animation: ac2-ic-hop2 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) both; } .ac2 .ac2-icons li.is-tick .ac2-icon.-hours b { animation: ac2-ic-hop2 0.7s cubic-bezier(0.3, 0.7, 0.3, 1) both; } /* 同じ動きを別名で持つのは、ホバーで animation-name を替えて再生し直すため */ @keyframes ac2-ic-spin { from { transform: rotate(-90deg); } to { transform: rotate(0); } } @keyframes ac2-ic-spin2 { from { transform: rotate(-90deg); } to { transform: rotate(0); } } @keyframes ac2-ic-notes { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5px) rotate(-4deg); } } @keyframes ac2-ic-nod { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-9deg); } 70% { transform: rotate(3deg); } } @keyframes ac2-ic-nod2 { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-9deg); } 70% { transform: rotate(3deg); } } @keyframes ac2-ic-ring { 0%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-10deg); } 30%, 60% { transform: rotate(8deg); } 75% { transform: rotate(-3deg); } } @keyframes ac2-ic-ring2 { 0%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-10deg); } 30%, 60% { transform: rotate(8deg); } 75% { transform: rotate(-3deg); } } @keyframes ac2-ic-hop { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.04); } 70% { transform: translateY(0.5px) scale(0.99); } } @keyframes ac2-ic-hop2 { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.04); } 70% { transform: translateY(0.5px) scale(0.99); } } .ac2 .ac2-icon.-hours b { font-variant-numeric: tabular-nums; display: inline-block; } .ac2.is-reduced .ac2-icons li .ac2-icon *, .ac2.is-reduced .ac2-icons li:hover .ac2-icon * { animation: none !important; } /* =============================================================== ページ下部の背景（10/1）: 白い帯をやめ、セクションごとに明度で際立たせる 全幅は ::before を左右 3000px はみ出させる（.ac2 の overflow-x: clip で切れる） =============================================================== */ .ac2 { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .ac2 .ac2-lineup, .ac2 .ac2-why.-again { isolation: isolate; } .ac2 .ac2-lineup::before, .ac2 .ac2-why.-again::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -3000px; right: -3000px; pointer-events: none; } /* あわせてチェック: 深いインクの帯。左上にミストブルーの光、薄いグレインでのっぺり感を消す */ .ac2 .ac2-lineup { padding: 96px 120px 104px; color: #fff; } .ac2 .ac2-lineup::before { background: var(--grain), radial-gradient(900px 520px at 3260px 0%, rgba(126, 186, 222, 0.22), transparent 70%), radial-gradient(700px 480px at 4325px 100%, rgba(110, 34, 53, 0.18), transparent 70%), linear-gradient(in oklch 170deg, #21404f 0%, #172d39 52%, #0f212b 100%); background-size: 180px 180px, auto, auto, auto; background-blend-mode: soft-light, normal, normal, normal; } .ac2 .ac2-lineup .ac2-feat-title { color: #fff; } .ac2 .ac2-lineup-card { color: #fff; } .ac2 .ac2-lineup-img { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .ac2 .ac2-lineup-img.-blank span { color: rgba(255, 255, 255, 0.5); } .ac2 .ac2-lineup-eyebrow { opacity: 0.55; } .ac2 .ac2-lineup-more { color: #7fd0ee; } .ac2 .ac2-lineup-card:hover .ac2-lineup-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(255, 255, 255, 0.4); } /* 選ばれる理由（再掲）: 地色より一段深いミストブルー。No.1 の後ろに柔らかいスポットライト。白いフッターと明度で分かれる */ .ac2 .ac2-why.-again { height: auto; padding: 88px 80px 96px; } .ac2 .ac2-why.-again::before { background: var(--grain), radial-gradient(520px 360px at calc(3000px + 260px) 62%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%), linear-gradient(in oklch 180deg, #d6e6f0 0%, #c8dae7 100%); background-size: 180px 180px, auto, auto; background-blend-mode: soft-light, normal, normal; } .ac2 .ac2-why.-again .ac2-why-card { border-right-color: rgba(255, 255, 255, 0.7); } @media (max-width: 1079px) { .ac2 .ac2-lineup { padding: 48px 20px 56px; } .ac2 .ac2-lineup::before { background-size: 180px 180px, 600px 360px, 500px 340px, auto; } .ac2 .ac2-why.-again { padding: 40px 20px 44px; } .ac2 .ac2-why.-again::before { background: var(--grain), radial-gradient(260px 200px at calc(3000px + 25vw) 55%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%), linear-gradient(in oklch 180deg, #d6e6f0 0%, #c8dae7 100%); background-size: 180px 180px, auto, auto; } } /* =============================================================== /polish round 1（10/1）: スマホの文字組み・整列・コントラスト =============================================================== */ .ac2 .ac2-ph-w { display: inline-block; } /* 文節の塊。Safari は auto-phrase 非対応なので、文節の途中で改行させない */ .ac2 .ac2-nw { white-space: nowrap; } .ac2 .ac2-icons-note-sp { display: none; } .ac2 .ac2-stars { color: var(--ink); } /* シアンは購入ボタン専用に */ @media (max-width: 1079px) { /* KV: 字間を詰めて「言葉」として読ませる */ .ac2 .ac2-kv-copy { font-size: 24px; letter-spacing: 0.12em; gap: 4px; line-height: 1.6; } .ac2 .ac2-kv-name { top: 186px; font-size: 18px; } /* 見出しの格を揃える（セクション見出し 20px） */ .ac2 .ac2-why-title { font-size: 20px; line-height: 1.5; } /* コンセプト: 左右のガターを 20px に */ .ac2 .ac2-concept { padding-left: 20px; padding-right: 20px; gap: 0 12px; } .ac2 .ac2-concept-icon-box { margin-left: -14px; } .ac2 .ac2-concept-h { font-size: 14px; letter-spacing: 0.04em; } .ac2 .ac2-concept-p { font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; color: rgba(23, 45, 57, 0.72); } /* 注釈: 小さすぎ・薄すぎを解消（11px / 濃さ 72%） */ .ac2 .ac2-why-note, .ac2 .ac2-feat-note, .ac2 .ac2-cta2-note, .ac2 .ac2-icons-note-sp { font-size: 10px; line-height: 1.6; opacity: 1; color: rgba(23, 45, 57, 0.72); } .ac2 .ac2-icons li .ac2-icon-note { display: none; } .ac2 .ac2-icons-note-sp { display: block; width: 100% !important; padding: 8px 4px 0 !important; text-align: left; } .ac2 .ac2-feat-no { color: rgba(23, 45, 57, 0.34); } .ac2 .ac2-feat-p { color: rgba(23, 45, 57, 0.8); } /* KSP カード: 見出しは左揃え・内側 16px、純白をやめて淡い面に、「詳しく」は板なしの文字リンク（左下） */ .ac2 .ac2-card { background: #f3f8fb; } .ac2 .ac2-card h3 { left: 16px; right: 16px; top: 18px; text-align: left; font-size: 15px; letter-spacing: 0.04em; } .ac2 .ac2-card h3.-lg, .ac2 .ac2-card.-chip h3 { font-size: 20px; } .ac2 .ac2-card-link { justify-content: flex-start; padding: 12px 16px; } .ac2 .ac2-card-link span { background: none; padding: 0; font-size: 11px; } .ac2 .ac2-card.-bass .ac2-card-link, .ac2 .ac2-card.-chip .ac2-card-link { color: #fff; } .ac2 .ac2-card.-chip .ac2-card-link span { color: var(--ink); } .ac2 .ac2-card-hrs { left: 16px; top: 52px; } .ac2 .ac2-card.-power img { left: auto; right: 6px; top: auto; bottom: 6px; width: 92px; height: 106px; } } @media (max-width: 1079px) { /* カラバリ: 製品を上に寄せて小さく、チップと重ねない（枠の高さ 188px 前後） */ .ac2 .ac2-feat-colors > img.-contain, .ac2 .ac2-feat-colors > .ac2-feat-tint { inset: 5% 33% 47%; width: 34%; height: 48%; } .ac2 .ac2-swatches.-feat { bottom: 38px; gap: 12px; } .ac2 .ac2-feat-colorname { bottom: 12px; font-size: 11px; } } /* /polish round 2（10/1） */ @media (max-width: 1079px) { /* ヒーローの左端もガター 20px に */ .ac2 .ac2-kv-copy { padding-left: 20px; padding-right: 20px; line-height: 1.55; letter-spacing: 0.08em; } .ac2 .ac2-kv-name { left: 20px; } /* 同格の見出しは 行間 1.55 / 字間 0.06em に揃える */ .ac2 .ac2-feat-title { line-height: 1.55; letter-spacing: 0.06em; } .ac2 .ac2-card h3.-lg, .ac2 .ac2-card.-chip h3 { line-height: 1.55; letter-spacing: 0.06em; } /* KSP: IP57 の見出しも内側 16px、32 と「時間」は同じベースラインで、画像と重ねない */ .ac2 .ac2-card.-water h3 { left: 16px; right: 16px; } .ac2 .ac2-card-hrs { top: 50px; align-items: baseline; } .ac2 .ac2-card-hrs b { font-size: 44px; line-height: 1; } .ac2 .ac2-card-hrs span, .ac2 .ac2-card-hrs span.-jp { margin-top: 0; margin-left: 4px; font-size: 15px; } .ac2 .ac2-card.-power img { width: 84px; height: 96px; } .ac2 .ac2-card.-bass .ac2-card-bg { left: -45%; top: -38%; width: 190%; height: 176%; } /* 画像の上下端にある暗い帯・えんじの帯を外して中央だけ使う */ .ac2 .ac2-card-link span { font-size: 12px; letter-spacing: 0.04em; } /* 小さすぎる文字の底上げ（下限 10〜11px） */ .ac2 .ac2-tax { font-size: 11px; } .ac2 .ac2-awards p { font-size: 10px; } .ac2 .ac2-cta2-spec dt { font-size: 11px; opacity: 1; color: rgba(23, 45, 57, 0.72); } /* 特長の本文を読み物のサイズに */ .ac2 .ac2-feat-h { font-size: 18px; margin-bottom: 12px; } .ac2 .ac2-feat-p { font-size: 14px; line-height: 1.8; letter-spacing: 0.02em; } .ac2 .ac2-feat-no { color: rgba(23, 45, 57, 0.55); } .ac2 .ac2-stars i { color: rgba(23, 45, 57, 0.28); } } @media (max-width: 1079px) { .ac2 .ac2-card-hrs { top: 74px; } /* 2 行の見出し（18 + 15×1.5×2 ≒ 63px）の下から */ } /* /polish round 3（10/1）: 仕上げ */ @media (max-width: 1079px) { .ac2 .ac2-feat-p br { display: none; } /* PC 用の手動改行は SP では外し、文節で自然に折り返す（行末のガタつき防止） */ .ac2 .ac2-kv-copy { line-height: 1.4; gap: 2px; } .ac2 .ac2-kv-name { top: 178px; } .ac2 .ac2-stars i { color: rgba(23, 45, 57, 0.5); } /* 空き星もはっきり（約 3.4:1） */ /* Thus カード: チップ画像を上に寄せ、「詳しく」は画像の外の無地に置く */ .ac2 .ac2-card.-chip { height: 330px; } .ac2 .ac2-card.-chip img { top: 78px; width: 300px; margin-left: -150px; } .ac2 .ac2-card.-chip .ac2-card-link, .ac2 .ac2-card.-chip .ac2-card-link span { color: var(--ink); } /* セクション間の縦の余白を 88〜96px に揃える */ .ac2 .ac2-concept { padding-bottom: 80px; } .ac2 .ac2-feat { padding-top: 48px; } .ac2 .ac2-lineup-list { gap: 56px; } /* アワード: 均等な 2 列、製品名の行間 */ .ac2 .ac2-awards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .ac2 .ac2-awards p { line-height: 1.5; } /* 暗い帯の小さい英字・ラベルを読みやすく */ .ac2 .ac2-extra-eyebrow { color: rgba(255, 255, 255, 0.68); } .ac2 .ac2-lineup-eyebrow { opacity: 0.72; } } /* =============================================================== 10/2 CRF 修正依頼 =============================================================== */ /* コンセプト: 上に浮いていたイヤホン 3D を外した分、上の余白を詰める */ @media (min-width: 1080px) { .ac2 .ac2-concept { height: 1000px; } .ac2 .ac2-concept-col.-l { padding: 40px 0 120px; } .ac2 .ac2-concept-col.-r { padding: 120px 0 40px; } } @media (max-width: 1079px) { /* KV: 見出しと製品名を大きく。製品は静止画（白） */ .ac2 .ac2-kv-copy { font-size: 27px; letter-spacing: 0.1em; padding-top: 44px; } .ac2 .ac2-kv-name { top: 186px; font-size: 38px; line-height: 1; } .ac2 .ac2-kv-product img, .ac2 .ac2-kv-product-img { width: 150px; height: 204px; } .ac2 .ac2-kv-product { padding: 24px 20px; } /* 選ばれる理由: アワードを 1 段に（3 列） */ .ac2 .ac2-awards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; } .ac2 .ac2-awards li { flex-direction: column; align-items: flex-start; gap: 4px; } .ac2 .ac2-awards img { height: 34px; } .ac2 .ac2-awards p { font-size: 10px; line-height: 1.4; white-space: normal; } .ac2 .ac2-concept { padding-top: 56px; } /* 1st CTA: 製品・特徴・購入ボタンまでスクロールなしで見える高さに（参考: Liberty 5 Pro Max） */ .ac2 .ac2-spec { padding: 24px 20px 40px; gap: 14px; } .ac2 .ac2-visual { order: 0; } .ac2 .ac2-visual-card { height: 230px; } .ac2 .ac2-visual-product { top: 28px; height: 174px; } .ac2 .ac2-visual-hires { right: 16px; top: 16px; width: 30px; height: 40px; } .ac2 .ac2-buy-head { order: 1; margin-top: 0; gap: 6px; } .ac2 .ac2-buy-lead { font-size: 13px; letter-spacing: 0.04em; } .ac2 .ac2-buy-name { font-size: 28px; } .ac2 .ac2-icons { order: 2; margin-top: 0; } .ac2 .ac2-icons li { padding: 4px 2px; gap: 4px; } .ac2 .ac2-icon, .ac2 .ac2-icon.-hours { width: 44px; height: 44px; } .ac2 .ac2-icon > img, .ac2 .ac2-icon-sound { transform: scale(0.72); } .ac2 .ac2-icon.-hours b { font-size: 15px; } .ac2 .ac2-icon.-hours small { font-size: 7px; } .ac2 .ac2-icons p { font-size: 10px; line-height: 1.3; } .ac2 .ac2-icons-note-sp { padding: 4px 4px 0 !important; } .ac2 .ac2-colors { order: 3; margin-top: 2px; gap: 4px; } .ac2 .ac2-buy-price { order: 4; } .ac2 .ac2-btns { order: 5; } .ac2 .ac2-spec .lp-btns .is-more, .ac2 .ac2-spec .lp-btns li:has(.lp-txtLink) { margin-top: 2px; } } /* 機能詳細（10/2 素材差し替え） */ .ac2 .ac2-feat-media > img.-contain.-bridge { inset: 4% 20%; width: 60%; height: 92%; } /* C ブリッジのアップ（片耳） */ .ac2 .ac2-feat-media .ac2-feat-guinness { position: absolute; left: 5%; top: 8%; width: auto; height: 34%; z-index: 2; } /* ギネス世界記録のロゴ（暗い面の左上） */ .ac2 .ac2-feat-media.-scene .ac2-feat-inset { position: absolute; left: 3%; bottom: 4%; width: 50%; height: auto; z-index: 2; } /* シーン写真の上に製品（青）。影は付けない */ .ac2 .ac2-feat-media:has(.ac2-feat-hours) > img.-contain { inset: 8% 6% 8% 44%; width: 50%; height: 84%; } @media (max-width: 1079px) { .ac2 .ac2-feat-media .ac2-feat-guinness { height: 30%; } } /* 機能詳細（10/5 MTG「アクションを少なく、LP の長さもコンパクトに」） 1 項目 = 1 段の縦積み（PC 4955px / SP 7186px）をやめ、グループの上に「番号 + 名前」を 1 行、項目は横に並べる。 列数は項目数（data-n）で決める。PC: 1 = 写真と文の横組み / 2〜4 = その数の列。SP: 1 = 全幅 / 2・4 = 2 列 / 3 = 先頭だけ全幅 + 2 列 */ .ac2 .ac2-feat { padding: 120px 120px 56px; } .ac2 .ac2-feat-head { margin-bottom: 40px; } .ac2 .ac2-feat-group { display: block; padding: 44px 0 56px; } .ac2 .ac2-feat-group:last-child { padding-bottom: 24px; } .ac2 .ac2-feat-label { position: static; width: auto; display: flex; align-items: baseline; gap: 18px; margin-bottom: 28px; } .ac2 .ac2-feat-no { font-size: 40px; margin: 0; } .ac2 .ac2-feat-name { font-size: 22px; } .ac2 .ac2-feat-name br { display: none; } .ac2 .ac2-feat-items[data-n] { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 32px; } .ac2 .ac2-feat-items[data-n="1"] { --n: 1; } .ac2 .ac2-feat-items[data-n="2"] { --n: 2; } .ac2 .ac2-feat-items[data-n="3"] { --n: 3; } .ac2 .ac2-feat-items[data-n="4"] { --n: 4; column-gap: 24px; } .ac2 .ac2-feat-items[data-n] .ac2-feat-media { aspect-ratio: 16 / 9; margin-bottom: 20px; } .ac2 .ac2-feat-items[data-n="3"] .ac2-feat-media, .ac2 .ac2-feat-items[data-n="4"] .ac2-feat-media { aspect-ratio: 4 / 3; } .ac2 .ac2-feat-items[data-n="1"] .ac2-feat-item { display: grid; grid-template-columns: 560px minmax(0, 1fr); column-gap: 56px; align-items: center; } .ac2 .ac2-feat-items[data-n="1"] .ac2-feat-media { aspect-ratio: 16 / 10; margin: 0; } .ac2 .ac2-feat-h { font-size: 18px; line-height: 1.6; letter-spacing: 0.06em; margin-bottom: 10px; } .ac2 .ac2-feat-items[data-n="1"] .ac2-feat-h { font-size: 22px; margin-bottom: 14px; } .ac2 .ac2-feat-items[data-n="4"] .ac2-feat-h { font-size: 17px; letter-spacing: 0.04em; } .ac2 .ac2-feat-p { font-size: 14px; line-height: 1.85; letter-spacing: 0.03em; } .ac2 .ac2-feat-note { margin-top: 10px; } .ac2 .ac2-feat-items[data-n="4"] .ac2-feat-badges img { width: 44px; } @media (max-width: 1079px) { .ac2 .ac2-feat { padding: 48px 20px 16px; } .ac2 .ac2-feat-head { margin-bottom: 8px; } .ac2 .ac2-feat-group { padding: 32px 0 36px; } .ac2 .ac2-feat-label { gap: 12px; margin-bottom: 18px; } .ac2 .ac2-feat-no { font-size: 32px; } .ac2 .ac2-feat-name { font-size: 17px; } .ac2 .ac2-feat-items[data-n] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 14px; } .ac2 .ac2-feat-items[data-n="1"] .ac2-feat-item, .ac2 .ac2-feat-items[data-n="3"] .ac2-feat-item:first-child { grid-column: 1 / -1; display: block; } .ac2 .ac2-feat-items[data-n] .ac2-feat-media, .ac2 .ac2-feat-items[data-n="3"] .ac2-feat-media, .ac2 .ac2-feat-items[data-n="4"] .ac2-feat-media { aspect-ratio: 1 / 1; margin-bottom: 12px; } .ac2 .ac2-feat-items[data-n="1"] .ac2-feat-media, .ac2 .ac2-feat-items[data-n="3"] .ac2-feat-item:first-child .ac2-feat-media { aspect-ratio: 16 / 9; margin-bottom: 16px; } .ac2 .ac2-feat-h, .ac2 .ac2-feat-items[data-n="4"] .ac2-feat-h { font-size: 14px; line-height: 1.55; letter-spacing: 0.03em; margin-bottom: 6px; } .ac2 .ac2-feat-p { font-size: 12px; line-height: 1.75; letter-spacing: 0.02em; } .ac2 .ac2-feat-note { margin-top: 6px; font-size: 10px; } /* 全幅の項目は読み物のサイズのまま */ .ac2 .ac2-feat-items[data-n="1"] .ac2-feat-h, .ac2 .ac2-feat-items[data-n="3"] .ac2-feat-item:first-child .ac2-feat-h { font-size: 17px; margin-bottom: 10px; } .ac2 .ac2-feat-items[data-n="1"] .ac2-feat-p, .ac2 .ac2-feat-items[data-n="3"] .ac2-feat-item:first-child .ac2-feat-p { font-size: 13px; line-height: 1.8; } .ac2 .ac2-feat-items[data-n="1"] .ac2-feat-note, .ac2 .ac2-feat-items[data-n="3"] .ac2-feat-item:first-child .ac2-feat-note { font-size: 11px; } /* 半分の幅の写真の上に載せるもの */ .ac2 .ac2-feat-items[data-n] .ac2-feat-badges { right: 10px; bottom: 10px; gap: 4px; } .ac2 .ac2-feat-items[data-n] .ac2-feat-badges img { width: 32px; } .ac2 .ac2-feat-media.-scene .ac2-feat-inset { width: 62%; } } /* 06 機能一覧（10/2 作り直し）: タイトル + 6 タイル。PC 3 列 × 2 段、SP 2 列 × 3 段 */ .ac2 .ac2-pts { position: relative; width: 1440px; margin: 0 auto; padding: 0 80px 40px; } .ac2 .ac2-pts-title { display: flex; flex-direction: column; gap: 6px; margin-bottom: 40px; font-size: 30px; line-height: 1.5; letter-spacing: 0.12em; font-weight: 400; } .ac2 .ac2-pts-name { font-size: 16px; letter-spacing: 0.08em; color: rgba(23, 45, 57, 0.72); } .ac2 .ac2-pts-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; } .ac2 .ac2-pt { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 12px; color: inherit; text-decoration: none; } .ac2 .ac2-pt-img { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(255, 255, 255, 0.72); margin-bottom: 10px; } .ac2 .ac2-pt.-dark .ac2-pt-img { background: #1d2733; } .ac2 .ac2-pt-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2 .ac2-pt.-contain .ac2-pt-img img { inset: 8% 12%; width: 76%; height: 84%; object-fit: contain; } .ac2 .ac2-pt-no { font-size: 14px; letter-spacing: 0.08em; color: rgba(23, 45, 57, 0.55); } .ac2 .ac2-pt-t { font-size: 20px; line-height: 1.5; letter-spacing: 0.06em; } .ac2 .ac2-pt-t br { display: none; } @media (hover: hover) { .ac2 .ac2-pt:hover .ac2-pt-img img { transform: scale(1.04); } } .ac2 .ac2-pts-note { margin-top: 24px; font-size: 10px; line-height: 1.6; color: rgba(23, 45, 57, 0.72); } @media (max-width: 1079px) { .ac2 .ac2-pts { width: 100%; padding: 0 20px; } .ac2 .ac2-pts-title { margin-bottom: 18px; font-size: 20px; letter-spacing: 0.06em; gap: 2px; } .ac2 .ac2-pts-name { font-size: 13px; } .ac2 .ac2-pts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } .ac2 .ac2-pt { gap: 2px 6px; align-items: start; } .ac2 .ac2-pt-img { aspect-ratio: 16 / 10; margin-bottom: 6px; } .ac2 .ac2-pt-no { font-size: 11px; line-height: 1.6; } .ac2 .ac2-pt-t { font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; } .ac2 .ac2-pt-t br { display: inline; } .ac2 .ac2-pts-note { margin-top: 12px; font-size: 10px; } } /* 2nd CTA（10/2）: SP をコンパクトに */ @media (max-width: 1079px) { .ac2 .ac2-cta2 { padding: 32px 20px; } .ac2 .ac2-cta2-card { gap: 14px; padding: 16px; } .ac2 .ac2-cta2-visual { height: 210px; } .ac2 .ac2-cta2-product { height: 168px; } .ac2 .ac2-cta2-new { left: 12px; top: 12px; font-size: 10px; padding: 4px 8px; } .ac2 .ac2-cta2-hires { right: 12px; top: 12px; width: 30px; height: 40px; } .ac2 .ac2-cta2-body { gap: 10px; text-align: center; align-items: center; } .ac2 .ac2-cta2-lead { font-size: 13px; line-height: 1.5; } .ac2 .ac2-cta2-name { font-size: 28px; margin-top: -4px; } .ac2 .ac2-cta2-colors { order: 1; align-items: center; gap: 4px; } .ac2 .ac2-cta2-price { order: 2; } .ac2 .ac2-cta2 .ac2-btns { order: 3; width: 100%; } .ac2 .ac2-cta2 .lp-btns { justify-content: center; } .ac2 .ac2-cta2 .lp-btns .is-more, .ac2 .ac2-cta2 .lp-btns li:has(.lp-txtLink) { text-align: center; margin-top: 2px; } /* スペック一覧は購入ボタンの下に 2 列で（読みたい人だけ読む） */ .ac2 .ac2-cta2-spec { order: 4; grid-template-columns: 1fr 1fr; gap: 0 14px; width: 100%; text-align: left; margin-top: 6px; } .ac2 .ac2-cta2-spec div { padding: 7px 0; gap: 1px; } .ac2 .ac2-cta2-spec dd { font-size: 12px; line-height: 1.5; } .ac2 .ac2-cta2-spec dt { font-size: 10px; } .ac2 .ac2-cta2-note { order: 5; align-self: flex-start; text-align: left; font-size: 8.5px; } /* 10/22 /vertical: 近くのスペック値（10px）より小さく */ } .ac2 .ac2-feat-media > .ac2-feat-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ===== 10/9 大津さん指示 ===== */ /* KV: 製品名は見出し（40px / SP 27px）より小さく */ .ac2 .ac2-kv-name { top: 452px; font-size: 32px; letter-spacing: 0.02em; } @media (max-width: 1079px) { .ac2 .ac2-kv-name { top: 186px; font-size: 21px; } } /* 1st CTA: PC は 32 時間アイコンの下の小さい注釈だけ（SP 用の大きい注釈が li の display:flex に負けて PC にも出ていた） */ @media (min-width: 1080px) { .ac2 .ac2-icons li.ac2-icons-note-sp { display: none; } .ac2 .ac2-icons p { white-space: nowrap; } } /* 注釈の ※ は文字の右肩に（上に浮かせない） */ /* 「製品についてもっと詳しく」の矢印は文字と同じ色に */ .ac2 .lp-txtLink { color: var(--ink); } .ac2 .lp-txtLink .icon-svg svg { fill: currentColor; } .ac2 .lp-txtLink:hover { color: var(--ink) !important; } /* 機能詳細: 白い面をやめ、ページの淡いミストブルーに馴染むグラデ（中心だけ明るく、目立たせない） */ .ac2 .ac2-feat-media.-white { background: radial-gradient(120% 95% at 50% 40%, #f7fbfd 0%, #e6f0f6 55%, #d3e3ed 100%); } /* 06 ワイヤレス充電: ケーブルの端を枠の下端に付ける */ .ac2 .ac2-feat-media > img.-contain.-floor { inset: auto 10% 0; width: 80%; height: 90%; object-position: 50% 100%; } /* 06 IP57: 製品を写真の左下へ（.ac2-feat-media > img の inset: -6% 0 の top が残って上に張り付いていた） */ .ac2 .ac2-feat-media.-scene .ac2-feat-inset { top: auto; right: auto; left: 4%; bottom: 6%; width: 46%; height: auto; } /* 01 つけ心地: 着用写真の左下に p.33 のループ動画を小窓で */ .ac2 .ac2-feat-mini { position: absolute; left: 20px; bottom: 20px; z-index: 2; width: 34%; aspect-ratio: 16 / 9; object-fit: cover; background: #ccc; } @media (max-width: 1079px) { .ac2 .ac2-feat-mini { left: 12px; bottom: 12px; width: 38%; } /* SP アイコン: 円を大きくして中身に余白（見切れ防止） */ .ac2 .ac2-icon, .ac2 .ac2-icon.-hours { width: 54px; height: 54px; } .ac2 .ac2-icon > img, .ac2 .ac2-icon-sound { transform: scale(0.62); } .ac2 .ac2-icon.-hours b { font-size: 16px; } /* SP 1st CTA: 製品名の直下にカラー、ボタンは小さく */ .ac2 .ac2-buy-head { order: 1; } .ac2 .ac2-colors { order: 2; margin-top: 0; gap: 4px; } .ac2 .ac2-icons { order: 3; } .ac2 .ac2-buy-price { order: 4; } .ac2 .ac2-btns { order: 5; } .ac2 .ac2-spec .ac2-swatches { gap: 8px; } .ac2 .ac2-spec .ac2-swatch { width: 26px; height: 26px; } .ac2 .ac2-colors-label { font-size: 11px; } /* コンセプト SP: 4 項目とも中央寄せ */ .ac2 .ac2-concept-item { align-items: center; text-align: center; } .ac2 .ac2-concept-icon-box { margin-left: auto; margin-right: auto; } } /* スペックアイコン（10/9 追加）: コンパクト = ケースがきゅっと縮む / 物理ボタン = 指先が押し込む / ワイヤレス充電 = ふわっと脈打つ。CRF 未支給のため既存アイコンの線（#172D39・1.29px）で作成。ワイヤレス充電は US Listing の図案（稲妻＋電波）を線画化 */ .ac2 .ac2-icons li.is-in .ac2-icon.-compact img, .ac2 .ac2-icons li.is-tick .ac2-icon.-compact img { animation: ac2-ic-squeeze 1s cubic-bezier(0.3, 0.7, 0.3, 1) 0.5s both; } .ac2 .ac2-icons li.is-in .ac2-icon.-button img, .ac2 .ac2-icons li.is-tick .ac2-icon.-button img { animation: ac2-ic-press 0.9s ease-in-out 0.5s both; } .ac2 .ac2-icons li.is-in .ac2-icon.-wireless img, .ac2 .ac2-icons li.is-tick .ac2-icon.-wireless img { animation: ac2-ic-pulse 1.1s ease-in-out 0.5s both; } .ac2 .ac2-icons li.is-tick .ac2-icon.-compact img, .ac2 .ac2-icons li.is-tick .ac2-icon.-button img, .ac2 .ac2-icons li.is-tick .ac2-icon.-wireless img { animation-delay: 0s; animation-name: ac2-ic-squeeze2; } .ac2 .ac2-icons li.is-tick .ac2-icon.-button img { animation-name: ac2-ic-press2; } .ac2 .ac2-icons li.is-tick .ac2-icon.-wireless img { animation-name: ac2-ic-pulse2; } @media (hover: hover) { .ac2 .ac2-icons li.is-in:hover .ac2-icon.-compact img { animation: ac2-ic-squeeze2 1s cubic-bezier(0.3, 0.7, 0.3, 1) both; } .ac2 .ac2-icons li.is-in:hover .ac2-icon.-button img { animation: ac2-ic-press2 0.9s ease-in-out both; } .ac2 .ac2-icons li.is-in:hover .ac2-icon.-wireless img { animation: ac2-ic-pulse2 1.1s ease-in-out both; } } @keyframes ac2-ic-squeeze { 0%, 100% { transform: scaleX(1); } 40% { transform: scaleX(0.84); } 70% { transform: scaleX(1.03); } } @keyframes ac2-ic-squeeze2 { 0%, 100% { transform: scaleX(1); } 40% { transform: scaleX(0.84); } 70% { transform: scaleX(1.03); } } @keyframes ac2-ic-press { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-1.5px, 1.5px) scale(0.94); } 60% { transform: translate(0.3px, -0.3px) scale(1.01); } } @keyframes ac2-ic-press2 { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-1.5px, 1.5px) scale(0.94); } 60% { transform: translate(0.3px, -0.3px) scale(1.01); } } @keyframes ac2-ic-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.1); opacity: 0.75; } 60% { transform: scale(0.97); opacity: 1; } } @keyframes ac2-ic-pulse2 { 0%, 100% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.1); opacity: 0.75; } 60% { transform: scale(0.97); opacity: 1; } } /* ===================================================================== 機能詳細 10/9 作り直し（.ac2-fd）: グループごとに形と動きを変える 起点はグループの [data-rv="fx"]（画面に入ると .is-in）。グループ自体は消さず、中身をそれぞれの動きで出す。 スクロール連動は [data-fx-scroll] に JS が --p（0 = 画面下から入る → 1 = 上へ抜ける）を渡す ===================================================================== */ .ac2.is-js [data-rv="fx"] { opacity: 1; transform: none; } .ac2 .ac2-fd { padding: 120px 120px 40px; } .ac2 .ac2-fd .ac2-feat-head { margin-bottom: 24px; } .ac2 .ac2-fd-g { position: relative; padding: 48px 0 60px; border-top: 1px solid rgba(23, 45, 57, 0.1); } .ac2 .ac2-fd-label { display: flex; align-items: baseline; gap: 18px; margin-bottom: 28px; } .ac2 .ac2-fd-no { font-family: var(--mont); font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: rgba(23, 45, 57, 0.3); } .ac2 .ac2-fd-name { font-size: 22px; line-height: 1.5; letter-spacing: 0.1em; font-weight: 400; } .ac2 .ac2-fd-h { font-size: 20px; line-height: 1.6; letter-spacing: 0.06em; font-weight: 400; margin-bottom: 12px; } .ac2 .ac2-fd-h.-sm { font-size: 16px; letter-spacing: 0.04em; margin-bottom: 8px; } .ac2 .ac2-fd-p { font-size: 14px; line-height: 1.9; letter-spacing: 0.03em; color: rgba(23, 45, 57, 0.75); } .ac2 .ac2-fd-p.-sm { font-size: 13px; line-height: 1.8; } .ac2 .ac2-fd-note { margin-top: 10px; font-size: 10px; line-height: 1.7; color: rgba(23, 45, 57, 0.6); } .ac2 .ac2-fd-stat { display: flex; align-items: baseline; gap: 6px; line-height: 1; font-family: var(--mont); } .ac2 .ac2-fd-stat b { font-size: 96px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ac2 .ac2-fd-stat span { font-family: var(--font); font-size: 20px; letter-spacing: 0.06em; } .ac2 .ac2-fd-stat span.-pre { font-size: 16px; margin-right: 2px; } .ac2 .ac2-fd-stat-cap { margin: 14px 0 28px; font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; } .ac2 .ac2-fd-stat.-light, .ac2 .ac2-fd-stat-cap.-light { color: #fff; } .ac2 .ac2-fd img { max-width: none; } .ac2 .ac2-fd :where(figure) { margin: 0; } /* 特異度 0: 個別の margin-bottom を潰さない */ /* 共通の出方（グループが .is-in になったら）: ラベル → 主役 → 文字の順。主役の出方はグループごとに下で上書き */ .ac2.is-js .ac2-fd-g .ac2-fd-label, .ac2.is-js .ac2-fd-g .ac2-fd-h, .ac2.is-js .ac2-fd-g .ac2-fd-p, .ac2.is-js .ac2-fd-g .ac2-fd-stat, .ac2.is-js .ac2-fd-g .ac2-fd-stat-cap, .ac2.is-js .ac2-fd-g .ac2-fd-note { opacity: 0; transform: translateY(18px); transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2.is-js .ac2-fd-g.is-in .ac2-fd-label, .ac2.is-js .ac2-fd-g.is-in .ac2-fd-h, .ac2.is-js .ac2-fd-g.is-in .ac2-fd-p, .ac2.is-js .ac2-fd-g.is-in .ac2-fd-stat, .ac2.is-js .ac2-fd-g.is-in .ac2-fd-stat-cap, .ac2.is-js .ac2-fd-g.is-in .ac2-fd-note { opacity: 1; transform: none; } .ac2.is-js .ac2-fd-g.is-in .ac2-fd-stat { transition-delay: 0.15s; } .ac2.is-js .ac2-fd-g.is-in .ac2-fd-stat-cap { transition-delay: 0.25s; } .ac2.is-js .ac2-fd-g.is-in .ac2-fd-h { transition-delay: 0.35s; } .ac2.is-js .ac2-fd-g.is-in .ac2-fd-p, .ac2.is-js .ac2-fd-g.is-in .ac2-fd-note { transition-delay: 0.45s; } /* ---- 01 つけ心地: 写真が奥へ引いていく（スクロール連動）＋ 2,000 のカウント ---- */ .ac2 .ac2-fd-fit { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 64px; align-items: center; } .ac2 .ac2-fd-fit-ph { position: relative; aspect-ratio: 736 / 440; overflow: hidden; } .ac2 .ac2-fd-fit-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.16 - 0.16 * var(--p, 1))); transform-origin: 60% 45%; will-change: transform; } .ac2.is-js .ac2-fd-g.-fit .ac2-fd-fit-ph { clip-path: inset(0 0 0 100%); transition: clip-path 1.3s cubic-bezier(0.7, 0, 0.2, 1); } .ac2.is-js .ac2-fd-g.-fit.is-in .ac2-fd-fit-ph { clip-path: inset(0 0 0 0); } .ac2 .ac2-fd-mini { position: absolute; left: 20px; bottom: 20px; z-index: 2; width: 32%; aspect-ratio: 16 / 9; object-fit: cover; background: #ccd; } .ac2.is-js .ac2-fd-g.-fit .ac2-fd-mini { opacity: 0; transform: translateY(16px) scale(0.92); transform-origin: 0 100%; transition: opacity 0.6s ease 1.1s, transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) 1.1s; } .ac2.is-js .ac2-fd-g.-fit.is-in .ac2-fd-mini { opacity: 1; transform: none; } /* ---- 02 サウンド: 暗い帯（画面幅いっぱい）。ドライバーが奥から迫って止まる、バッジが順に、音漏れの波紋 ---- */ .ac2 .ac2-fd-g.-sound { color: #fff; border-top: 0; padding: 64px 0 72px; margin: 0 0 8px; isolation: isolate; } .ac2 .ac2-fd-g.-sound::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -3000px; right: -3000px; background: radial-gradient(900px 600px at calc(3000px + 30%) 45%, rgba(110, 150, 196, 0.32), transparent 70%), linear-gradient(180deg, #0b121a, #121d29); } .ac2 .ac2-fd-g.-sound .ac2-fd-no { color: rgba(255, 255, 255, 0.4); } .ac2 .ac2-fd-g.-sound .ac2-fd-p { color: rgba(255, 255, 255, 0.78); } .ac2 .ac2-fd-sound { display: grid; grid-template-columns: 500px minmax(0, 1fr); column-gap: 72px; align-items: center; } .ac2 .ac2-fd-driver { aspect-ratio: 1; overflow: hidden; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); } /* 写真の四角い縁を帯の暗さになじませる */ .ac2 .ac2-fd-driver img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - 0.18 * var(--p, 0.5))); transform-origin: 46% 52%; will-change: transform; } /* 奥から迫る＝通過につれて寄りが解ける。回転は四隅が見えるのでしない */ .ac2.is-js .ac2-fd-g.-sound .ac2-fd-driver { opacity: 0; filter: blur(10px); transition: opacity 1.2s ease, filter 1.4s ease; } .ac2.is-js .ac2-fd-g.-sound.is-in .ac2-fd-driver { opacity: 1; filter: none; } .ac2 .ac2-fd-badges { display: flex; align-items: flex-end; gap: 12px; margin-top: 22px; } .ac2 .ac2-fd-badges img { height: 48px; width: auto; } .ac2 .ac2-fd-badges img + img { height: 24px; } .ac2.is-js .ac2-fd-g.-sound .ac2-fd-badges img { opacity: 0; transform: scale(0.6); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .ac2.is-js .ac2-fd-g.-sound.is-in .ac2-fd-badges img { opacity: 1; transform: none; transition-delay: 0.8s; } .ac2.is-js .ac2-fd-g.-sound.is-in .ac2-fd-badges img + img { transition-delay: 0.95s; } .ac2 .ac2-fd-leak { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; align-items: center; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.16); } .ac2 .ac2-fd-leak-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .ac2 .ac2-fd-leak-ph img { width: 100%; height: 100%; object-fit: cover; } /* 波紋の中心＝写真のイヤホン本体（元写真 1800×1116 の 737,391）。枠の比率と object-position で位置が変わるので PC・SP で別に持つ */ .ac2 .ac2-fd-ripple i { position: absolute; left: 39%; top: 35%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 50%; opacity: 0; } .ac2 .ac2-fd-g.-sound.is-in .ac2-fd-ripple i { animation: ac2-fd-ripple 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) 1.2s infinite; } .ac2 .ac2-fd-g.-sound.is-in .ac2-fd-ripple i + i { animation-delay: 2.1s; } @keyframes ac2-fd-ripple { 0% { transform: scale(0.3); opacity: 0.9; } 70% { opacity: 0.25; } 100% { transform: scale(1.6); opacity: 0; } } /* ---- 03 デザイン: 縦長の写真（中でゆっくり動く）、ブリッジが回り込んで止まる＋20%、4 色のチップが順に ---- */ .ac2 .ac2-fd-design { display: grid; grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: auto auto; gap: 40px 56px; } .ac2 .ac2-fd-cell.-compact { grid-row: 1 / span 2; } .ac2 .ac2-fd-ph { position: relative; overflow: hidden; margin-bottom: 20px; } .ac2 .ac2-fd-ph img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; } .ac2 .ac2-fd-ph.-tall { aspect-ratio: 4 / 5; } .ac2 .ac2-fd-ph.-tall img { object-position: 44% 50%; transform: translateY(calc((0.5 - var(--p, 0.5)) * 9%)); will-change: transform; } .ac2.is-js .ac2-fd-g.-design .ac2-fd-ph { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.2, 1); } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-fd-ph { clip-path: inset(0); } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-fd-ph.-colors { transition-delay: 0.3s; } .ac2 .ac2-fd-cell.-bridge { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; align-items: center; } .ac2 .ac2-fd-bridge { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(110% 90% at 50% 40%, #f7fbfd 0%, #e6f0f6 55%, #d3e3ed 100%); } .ac2 .ac2-fd-bridge img { width: 74%; height: auto; } .ac2.is-js .ac2-fd-g.-design .ac2-fd-bridge img { opacity: 0; transform: translateX(-40px) rotate(-28deg) scale(0.86); transition: opacity 0.8s ease 0.2s, transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-fd-bridge img { opacity: 1; transform: none; } .ac2 .ac2-fd-cell.-colors { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; align-items: center; } .ac2 .ac2-fd-ph.-colors { aspect-ratio: 1; margin: 0; } .ac2 .ac2-fd-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; } .ac2 .ac2-fd-chips li { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.04em; } .ac2 .ac2-fd-chips li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.2); } .ac2.is-js .ac2-fd-g.-design .ac2-fd-chips li { opacity: 0; transform: translateX(-10px); transition: opacity 0.5s ease, transform 0.6s ease; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-fd-chips li { opacity: 1; transform: none; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-fd-chips li:nth-child(1) { transition-delay: 0.8s; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-fd-chips li:nth-child(2) { transition-delay: 0.95s; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-fd-chips li:nth-child(3) { transition-delay: 1.1s; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-fd-chips li:nth-child(4) { transition-delay: 1.25s; } /* ---- 04 通話: ギネスの暗い大パネル（写真の上に白文字、ロゴは押印のように）、比較動画枠、Thus に光が走る ---- */ .ac2 .ac2-fd-call { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 32px 40px; } .ac2 .ac2-fd-cell.-guinness { position: relative; grid-row: 1 / span 2; min-height: 560px; overflow: hidden; color: #fff; background: #040608; } .ac2 .ac2-fd-guinness-bg { position: absolute; top: 0; left: 0; width: 100%; height: 66%; object-fit: cover; object-position: 50% 42%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); } /* 写真は上、下端は黒になじませ、文字はその下（文字と画像を重ねない） */ .ac2 .ac2-fd-guinness-logo { position: absolute; left: 36px; top: 36px; z-index: 2; width: 84px; height: auto; } .ac2.is-js .ac2-fd-g.-call .ac2-fd-guinness-logo { opacity: 0; transform: scale(1.7) rotate(-10deg); transition: opacity 0.35s ease 0.5s, transform 0.55s cubic-bezier(0.5, 1.6, 0.4, 1) 0.5s; } .ac2.is-js .ac2-fd-g.-call.is-in .ac2-fd-guinness-logo { opacity: 1; transform: none; } .ac2 .ac2-fd-guinness-text { position: absolute; left: 36px; right: 36px; bottom: 32px; z-index: 2; } .ac2 .ac2-fd-guinness-text .ac2-fd-p { color: rgba(255, 255, 255, 0.82); font-size: 13px; line-height: 1.85; } .ac2.is-js .ac2-fd-g.-call .ac2-fd-guinness-bg { transform: scale(1.08); transition: transform 2.4s cubic-bezier(0.2, 0.7, 0.2, 1); } .ac2.is-js .ac2-fd-g.-call.is-in .ac2-fd-guinness-bg { transform: none; } .ac2 .ac2-fd-blank { aspect-ratio: 16 / 9; margin-bottom: 16px; display: grid; place-items: center; background: radial-gradient(110% 90% at 50% 40%, #f7fbfd 0%, #e6f0f6 55%, #d3e3ed 100%); } .ac2 .ac2-fd-blank span { font-size: 12px; letter-spacing: 0.08em; color: rgba(23, 45, 57, 0.45); } .ac2 .ac2-fd-cell.-thus { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 24px; align-items: center; } .ac2 .ac2-fd-thus { position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #f3fcff, #cfedff); } .ac2 .ac2-fd-thus img { width: 86%; height: auto; } .ac2 .ac2-fd-sweep { position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%); transform: translateX(-70%); pointer-events: none; } .ac2 .ac2-fd-g.-call.is-in .ac2-fd-sweep { animation: ac2-fd-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.9s both, ac2-fd-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) 6s infinite; } @keyframes ac2-fd-sweep { from { transform: translateX(-70%); } to { transform: translateX(70%); } } /* ---- 05 再生時間: 32 のカウントと同時に、8 時間 → 32 時間のバーが伸びる ---- */ .ac2 .ac2-fd-battery { display: grid; grid-template-columns: 300px 280px minmax(0, 1fr); column-gap: 48px; align-items: center; } .ac2 .ac2-fd-stat.-xl b { font-size: 168px; letter-spacing: -0.04em; } .ac2 .ac2-fd-stat.-xl span { font-size: 22px; } .ac2 .ac2-fd-case { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(110% 90% at 50% 40%, #f7fbfd 0%, #e6f0f6 55%, #d3e3ed 100%); } .ac2 .ac2-fd-case img { width: 72%; height: auto; } .ac2.is-js .ac2-fd-g.-battery .ac2-fd-case img { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease 0.2s, transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; } .ac2.is-js .ac2-fd-g.-battery.is-in .ac2-fd-case img { opacity: 1; transform: none; } /* ---- 06 便利機能: サブ機能なので小さく 4 列。タイルごとに内容を実演する小さな動き（止まって見えない振れ幅で） ---- */ .ac2 .ac2-fd-misc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; } .ac2 .ac2-fd-tile-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 20px; display: grid; place-items: center; background: radial-gradient(110% 90% at 50% 40%, #f7fbfd 0%, #e6f0f6 55%, #d3e3ed 100%); } .ac2 .ac2-fd-tile-ph > img { width: 70%; height: 86%; object-fit: contain; } .ac2 .ac2-fd-tile-ph.-photo > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ac2.is-js .ac2-fd-g.-misc .ac2-fd-tile { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2.is-js .ac2-fd-g.-misc.is-in .ac2-fd-tile { opacity: 1; transform: none; } .ac2.is-js .ac2-fd-g.-misc.is-in .ac2-fd-tile:nth-child(2) { transition-delay: 0.1s; } .ac2.is-js .ac2-fd-g.-misc.is-in .ac2-fd-tile:nth-child(3) { transition-delay: 0.2s; } .ac2.is-js .ac2-fd-g.-misc.is-in .ac2-fd-tile:nth-child(4) { transition-delay: 0.3s; } /* ボタン: 本体がカチッと押し込まれ、ボタンの位置から輪が広がる */ .ac2 .ac2-fd-g.-misc.is-in .-button .ac2-fd-tile-ph > img { animation: ac2-fd-press 3.2s ease-in-out 0.9s infinite; transform-origin: 30% 60%; } .ac2 .ac2-fd-press { position: absolute; left: 77.6%; top: 68%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border: 1.5px solid rgba(23, 45, 57, 0.55); border-radius: 50%; opacity: 0; } .ac2 .ac2-fd-g.-misc.is-in .ac2-fd-press { animation: ac2-fd-ring 3.2s ease-out 0.9s infinite; } @keyframes ac2-fd-press { 0%, 22%, 100% { transform: translate(0, 0) scale(1); } 8% { transform: translate(-6px, 2px) scale(0.96); } 14% { transform: translate(1px, 0) scale(1.01); } } @keyframes ac2-fd-ring { 0%, 6% { transform: scale(0.4); opacity: 0; } 9% { opacity: 0.9; } 40%, 100% { transform: scale(1.8); opacity: 0; } } /* ワイヤレス充電: パッドから波紋が上へ広がる */ /* マルチポイント: スマホと PC に交互に「つながった」点が灯る */ .ac2 .ac2-fd-link i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #00cbeb; box-shadow: 0 0 0 0 rgba(0, 203, 235, 0.5); opacity: 0; z-index: 2; } .ac2 .ac2-fd-link i:nth-child(1) { left: 26%; top: 34%; } .ac2 .ac2-fd-link i:nth-child(2) { left: 80%; top: 22%; } .ac2.is-reduced .ac2-fd *, .ac2.is-reduced .ac2-fd *::before { animation: none !important; transition: none !important; } @media (max-width: 1079px) { .ac2 .ac2-fd { padding: 48px 20px 8px; } .ac2 .ac2-fd-g { padding: 30px 0 36px; } .ac2 .ac2-fd-label { gap: 12px; margin-bottom: 22px; } .ac2 .ac2-fd-no { font-size: 30px; } .ac2 .ac2-fd-name { font-size: 17px; } .ac2 .ac2-fd-h { font-size: 17px; margin-bottom: 8px; } .ac2 .ac2-fd-h.-sm { font-size: 14px; } .ac2 .ac2-fd-p { font-size: 13px; line-height: 1.8; } .ac2 .ac2-fd-p.-sm { font-size: 12px; line-height: 1.75; } .ac2 .ac2-fd-stat b { font-size: 64px; } .ac2 .ac2-fd-stat span { font-size: 16px; } .ac2 .ac2-fd-stat-cap { margin: 10px 0 18px; font-size: 13px; } /* 01: 写真を先に、数字と文はその下 */ .ac2 .ac2-fd-fit { grid-template-columns: 1fr; row-gap: 24px; } .ac2 .ac2-fd-fit-ph { order: -1; } .ac2 .ac2-fd-fit-text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; } /* 2,000人以上と説明を横に */ .ac2 .ac2-fd-fit-text .ac2-fd-stat b { font-size: 52px; } .ac2 .ac2-fd-fit-text .ac2-fd-stat-cap { margin: 0; font-size: 12px; line-height: 1.6; } .ac2 .ac2-fd-fit-text .ac2-fd-h, .ac2 .ac2-fd-fit-text .ac2-fd-p { grid-column: 1 / -1; } .ac2 .ac2-fd-fit-text .ac2-fd-h { margin-top: 18px; } .ac2 .ac2-fd-stat-cap br { display: none; } .ac2 .ac2-fd-mini { left: 12px; bottom: 12px; width: 38%; } /* 02: 暗い帯のまま縦に */ .ac2 .ac2-fd-g.-sound { padding: 40px 0 44px; } .ac2 .ac2-fd-sound { grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; row-gap: 0; align-items: end; } .ac2 .ac2-fd-sound-text { display: contents; } /* ドライバーと「12mm」を横に並べ、本文以下は全幅 */ .ac2 .ac2-fd-driver { grid-row: 1 / span 2; align-self: center; } .ac2 .ac2-fd-sound .ac2-fd-stat { grid-column: 2; grid-row: 1; } .ac2 .ac2-fd-sound .ac2-fd-stat-cap { grid-column: 2; grid-row: 2; align-self: start; margin-bottom: 0; } .ac2 .ac2-fd-sound .ac2-fd-h, .ac2 .ac2-fd-sound .ac2-fd-p, .ac2 .ac2-fd-badges, .ac2 .ac2-fd-leak { grid-column: 1 / -1; } .ac2 .ac2-fd-sound .ac2-fd-h { margin-top: 20px; } .ac2 .ac2-fd-badges { margin-top: 14px; } .ac2 .ac2-fd-badges img { height: 38px; } .ac2 .ac2-fd-badges img + img { height: 19px; } .ac2 .ac2-fd-leak { grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; margin-top: 24px; padding-top: 20px; } /* 03: 写真 → ブリッジ（横組み）→ 4 色（横組み） */ .ac2 .ac2-fd-design { grid-template-columns: 1fr; gap: 26px; } .ac2 .ac2-fd-cell.-compact { grid-row: auto; } .ac2 .ac2-fd-ph.-tall { aspect-ratio: 16 / 10; margin-bottom: 14px; } .ac2 .ac2-fd-cell.-bridge, .ac2 .ac2-fd-cell.-colors { grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; align-items: start; } .ac2 .ac2-fd-bridge-text .ac2-fd-stat b { font-size: 48px; } .ac2 .ac2-fd-chips { gap: 6px 12px; } .ac2 .ac2-fd-chips li { font-size: 11px; } /* 04: ギネスのパネル → 比較動画枠と Thus を 2 列 */ .ac2 .ac2-fd-call { grid-template-columns: 1fr 1fr; gap: 20px 14px; } .ac2 .ac2-fd-cell.-guinness { grid-column: 1 / -1; grid-row: auto; min-height: 470px; } .ac2 .ac2-fd-guinness-logo { left: 18px; top: 18px; width: 60px; } .ac2 .ac2-fd-guinness-bg { height: 46%; } .ac2 .ac2-fd-guinness-text { left: 18px; right: 18px; bottom: 18px; width: auto; } .ac2 .ac2-fd-guinness-text .ac2-fd-p { font-size: 12px; line-height: 1.75; } .ac2 .ac2-fd-cell.-thus { grid-template-columns: 1fr; row-gap: 12px; } .ac2 .ac2-fd-cell.-noise .ac2-fd-h, .ac2 .ac2-fd-cell.-thus .ac2-fd-h { font-size: 14px; } .ac2 .ac2-fd-cell.-thus .ac2-fd-p { font-size: 12px; line-height: 1.75; } .ac2 .ac2-fd-blank { aspect-ratio: 1; margin-bottom: 12px; } /* 05: 数字とケースを横に、バーと文はその下 */ .ac2 .ac2-fd-battery { grid-template-columns: minmax(0, 1fr) 150px; row-gap: 24px; column-gap: 16px; } .ac2 .ac2-fd-battery-text { grid-column: 1 / -1; } .ac2 .ac2-fd-stat.-xl b { font-size: 104px; } .ac2 .ac2-fd-stat.-xl span { font-size: 16px; } /* 06: 2 × 2 */ .ac2 .ac2-fd-misc { grid-template-columns: 1fr 1fr; gap: 28px 14px; } .ac2 .ac2-fd-tile-ph { margin-bottom: 12px; } } /* ===== 6つのおすすめポイント 10/9 A 案（.ac2-bento）: 3 段の非対称グリッド、角丸 16px（大津さんが A を選択）===== */ .ac2 .ac2-pts { padding: 0 120px 40px; } .ac2 .ac2-bento { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 300px 236px 340px; grid-template-areas: "a a a a a a a b b b b b" "a a a a a a a e e e f f" "d d d d d d d c c c c c"; } .ac2 .ac2-bt { position: relative; display: block; overflow: hidden; border-radius: 16px; color: var(--ink); text-decoration: none; isolation: isolate; background: radial-gradient(120% 95% at 50% 40%, #f7fbfd 0%, #e6f0f6 55%, #d3e3ed 100%); } .ac2 .ac2-bt-ph { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2 .ac2-bt:hover .ac2-bt-ph { transform: scale(1.035); } .ac2 .ac2-bt-tx { position: absolute; left: 32px; top: 28px; right: 32px; display: flex; flex-direction: column; } .ac2 .ac2-bt-no { font-family: var(--mont); font-size: 13px; letter-spacing: 0.14em; opacity: 0.7; margin-bottom: 10px; } .ac2 .ac2-bt-h { font-size: 26px; line-height: 1.5; letter-spacing: 0.08em; } .ac2 .ac2-bt-h.-sm { font-size: 16px; letter-spacing: 0.05em; white-space: nowrap; } .ac2 .ac2-bt-sub { margin-top: 10px; font-size: 14px; line-height: 1.7; letter-spacing: 0.04em; opacity: 0.82; } .ac2 .ac2-bt-go { position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; opacity: 0.75; transition: opacity 0.3s, transform 0.3s; } .ac2 .ac2-bt-go svg { width: 12px; height: 12px; } .ac2 .ac2-bt:hover .ac2-bt-go { opacity: 1; transform: translateY(2px); } .ac2 .ac2-bt-badges { position: absolute; right: 72px; bottom: 22px; display: flex; gap: 8px; align-items: flex-end; } .ac2 .ac2-bt-badges img { height: 56px; width: auto; max-width: none; } .ac2 .ac2-bt-badges img.-ldac { height: 20px; } .ac2 .ac2-bt-guin { position: absolute; left: 32px; bottom: 26px; height: 92px; width: auto; max-width: none; } .ac2 .ac2-bt.-t1 { grid-area: a; background: linear-gradient(90deg, #eaf2f7 0%, #dbe7ef 100%); } .ac2 .ac2-bt.-t1 .ac2-bt-ph { left: 36%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); } .ac2 .ac2-bt.-t1 .ac2-bt-tx { right: 58%; } .ac2 .ac2-bt.-t1 .ac2-bt-h { font-size: 32px; } .ac2 .ac2-bt.-t2 { grid-area: b; background: #05070b; } .ac2 .ac2-bt.-t2 .ac2-bt-ph { background-position: 50% 62%; } .ac2 .ac2-bt.-t3 { grid-area: c; } .ac2 .ac2-bt.-t3 .ac2-bt-ph { background-position: 50% 70%; } .ac2 .ac2-bt.-t3 .ac2-bt-tx { left: auto; text-align: right; align-items: flex-end; } /* 左上にケースがあるので、文字は右上の布の上 */ .ac2 .ac2-bt.-t4 { grid-area: d; background: linear-gradient(165deg, #4f6487 0%, #1b273c 48%, #0a0e16 100%); } .ac2 .ac2-bt.-t4 .ac2-bt-ph { background-position: 40% 50%; } .ac2 .ac2-bt.-t2 .ac2-bt-ph, .ac2 .ac2-bt.-t4 .ac2-bt-ph { left: 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%); mask-image: linear-gradient(90deg, transparent, #000 26%); } .ac2 .ac2-bt.-t5 { grid-area: e; } .ac2 .ac2-bt.-t5 .ac2-bt-ph { background-position: right 22px top 60px; background-size: auto 42%; } /* 画像は Liquid の style 属性で渡す（.css では file_url が使えない） */ .ac2 .ac2-bt.-t6 { grid-area: f; background: radial-gradient(110% 90% at 30% 70%, #f4f9fc 0%, #e2edf4 60%, #cfdfea 100%); } .ac2 .ac2-bt.-t6 .ac2-bt-ph { background-position: left 22px bottom 20px; background-size: auto 40%; } @media (max-width: 1079px) { .ac2 .ac2-pts { padding: 0 20px; } .ac2 .ac2-bento { gap: 10px; grid-template-columns: 1fr 1fr; grid-template-rows: 240px 210px 150px 190px; grid-template-areas: "a a" "b d" "c c" "e f"; } .ac2 .ac2-bt { border-radius: 12px; } .ac2 .ac2-bt-tx { left: 16px; top: 14px; right: 16px; } .ac2 .ac2-bt-no { font-size: 10px; margin-bottom: 4px; } .ac2 .ac2-bt-h, .ac2 .ac2-bt-h.-sm { font-size: 15px; letter-spacing: 0.04em; line-height: 1.45; } .ac2 .ac2-bt-sub { display: none; } .ac2 .ac2-bt-go { right: 10px; bottom: 10px; width: 26px; height: 26px; } .ac2 .ac2-bt-go svg { width: 9px; height: 9px; } .ac2 .ac2-bt-badges { right: 44px; bottom: 12px; gap: 5px; } .ac2 .ac2-bt-badges img { height: 34px; } .ac2 .ac2-bt-badges img.-ldac { height: 13px; } .ac2 .ac2-bt-guin { left: 16px; bottom: 14px; height: 54px; } .ac2 .ac2-bt.-t1 .ac2-bt-ph { left: 40%; } .ac2 .ac2-bt.-t1 .ac2-bt-tx { right: 60%; } .ac2 .ac2-bt.-t1 .ac2-bt-h { font-size: 16px; } .ac2 .ac2-bt.-t2 .ac2-bt-ph, .ac2 .ac2-bt.-t4 .ac2-bt-ph { left: 0; top: 30%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); } .ac2 .ac2-bt.-t2 .ac2-bt-ph { background-position: 60% 60%; } .ac2 .ac2-bt.-t4 .ac2-bt-ph { background-position: 70% 50%; } .ac2 .ac2-bt.-t3 .ac2-bt-ph { background-position: 50% 0%; } .ac2 .ac2-bt.-t5 .ac2-bt-tx { right: 16px; } .ac2 .ac2-bt.-t5 .ac2-bt-ph { background-size: auto 36%; background-position: right 44px bottom 14px; } .ac2 .ac2-bt.-t6 .ac2-bt-ph { background-size: auto 36%; background-position: left 16px bottom 14px; } } /* 10/9 夕「セクション間の余白をもう少し」: 実測で詰まっていた所（ギャラリー→おすすめ 94px、おすすめ→詳細 160px / SP 30〜48px）を PC 約 200px・SP 約 96px に */ .ac2 .ac2-pts { padding-top: 110px; } .ac2 .ac2-fd { padding-top: 200px; } @media (max-width: 1079px) { .ac2 .ac2-collage { margin-top: 56px; } .ac2 .ac2-pts { padding-top: 66px; } .ac2 .ac2-fd { padding-top: 96px; } } /* 10/9 夕「詳細がぎゅうぎゅう。尺を取ってよいので開放的に」「数字は Listing（AeroClip 2）の作りを参考に」 数字 = Gen の太字・Listing と同じシアン、単位は約 0.42 倍、上に小見出し（太字）。グループの上下と中の間隔を広げる */ .ac2 .ac2-fd-g { padding: 120px 0 128px; } .ac2 .ac2-fd-g.-sound { padding: 120px 0 128px; margin: 0; } .ac2 .ac2-fd-label { margin-bottom: 64px; } .ac2 .ac2-fd-stat { font-family: var(--font); gap: 4px; color: #00cbeb; } .ac2 .ac2-fd-stat b { font-weight: 700; font-size: 104px; letter-spacing: -0.03em; } .ac2 .ac2-fd-stat span { font-weight: 700; font-size: 44px; letter-spacing: 0; } .ac2 .ac2-fd-stat span.-pre { font-size: 26px; margin-right: 4px; } .ac2 .ac2-fd-stat.-light { color: #00cbeb; } .ac2 .ac2-fd-stat-cap { order: -1; margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; } .ac2 .ac2-fd-stat + .ac2-fd-h { margin-top: 40px; } .ac2 .ac2-fd-h { margin-bottom: 16px; } .ac2 .ac2-fd-p { line-height: 2; } /* 01: 文の列を広く、写真との間を空ける */ .ac2 .ac2-fd-fit { grid-template-columns: 420px minmax(0, 1fr); column-gap: 96px; } /* 02: ドライバーと文の間、音漏れカードの上を空ける */ .ac2 .ac2-fd-sound { column-gap: 104px; } .ac2 .ac2-fd-leak { margin-top: 56px; padding-top: 40px; } /* 05: 列の間を空け、32 を Listing の太字に */ .ac2 .ac2-fd-battery { grid-template-columns: 320px 300px minmax(0, 1fr); column-gap: 72px; } .ac2 .ac2-fd-stat.-xl b { font-size: 176px; } /* 10/14 CRF p.70: 「最大」と「時間」は同じ大きさに */ .ac2 .ac2-fd-stat.-xl span, .ac2 .ac2-fd-stat.-xl span.-pre { font-size: 44px; } .ac2 .ac2-fd-stat.-xl span.-pre { margin-right: 6px; } /* 06: タイルの間を広く */ .ac2 .ac2-fd-misc { gap: 0 40px; } .ac2 .ac2-fd-tile-ph { margin-bottom: 24px; } @media (max-width: 1079px) { .ac2 .ac2-fd-g, .ac2 .ac2-fd-g.-sound { padding: 64px 0 72px; } .ac2 .ac2-fd-label { margin-bottom: 32px; } .ac2 .ac2-fd-stat b { font-size: 64px; } .ac2 .ac2-fd-stat span { font-size: 26px; } .ac2 .ac2-fd-stat span.-pre { font-size: 16px; } .ac2 .ac2-fd-stat-cap { font-size: 13px; } .ac2 .ac2-fd-stat + .ac2-fd-h { margin-top: 28px; } .ac2 .ac2-fd-fit { row-gap: 32px; } .ac2 .ac2-fd-fit-text { display: block; } .ac2 .ac2-fd-fit-text .ac2-fd-stat b { font-size: 64px; } .ac2 .ac2-fd-fit-text .ac2-fd-stat-cap { margin: 0 0 8px; font-size: 13px; } .ac2 .ac2-fd-sound { row-gap: 0; } .ac2 .ac2-fd-leak { margin-top: 36px; padding-top: 28px; } .ac2 .ac2-fd-stat.-xl b { font-size: 104px; } .ac2 .ac2-fd-stat.-xl span.-pre { margin-right: 4px; } .ac2 .ac2-fd-misc { gap: 40px 14px; } } @media (max-width: 1079px) { .ac2 .ac2-fd-sound .ac2-fd-stat-cap { grid-row: 1; align-self: end; margin: 0 0 6px; } .ac2 .ac2-fd-sound .ac2-fd-stat { grid-row: 2; align-self: start; } } .ac2 .ac2-fd-stat { white-space: nowrap; } .ac2 .ac2-fd-battery { grid-template-columns: 380px 280px minmax(0, 1fr); column-gap: 64px; } .ac2 .ac2-fd-stat.-xl b { font-size: 156px; } .ac2 .ac2-fd-stat.-xl span { font-size: 48px; } /* 10/9 夕「サマリーの角丸は禁止」 */ .ac2 .ac2-bt { border-radius: 0; } @media (max-width: 1079px) { .ac2 .ac2-bt { border-radius: 0; } /* 05 SP: 数字を全幅で、ケースはその右下に小さく（横にはみ出さない） */ .ac2 .ac2-fd-battery { grid-template-columns: minmax(0, 1fr) 120px; column-gap: 8px; align-items: end; } .ac2 .ac2-fd-stat.-xl b { font-size: 88px; } .ac2 .ac2-fd-stat.-xl span, .ac2 .ac2-fd-stat.-xl span.-pre { font-size: 28px; } /* 10/14 CRF p.70: 「最大」も「時間」と同じ大きさ */ /* 02 SP: 小見出しを 1 行に */ .ac2 .ac2-fd-sound { grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; } .ac2 .ac2-fd-sound .ac2-fd-stat-cap { font-size: 12px; white-space: nowrap; } } @media (max-width: 1079px) { /* 後から足した PC の列指定（420px / 300px 等）が SP に効いてしまうので、SP の列を最後にもう一度 */ .ac2 .ac2-fd-fit { grid-template-columns: 1fr; column-gap: 0; } .ac2 .ac2-fd-fit-ph { width: 100%; } } /* ===== 機能詳細 03 / 04（10/9 B-1 案）: 主役を画面幅いっぱいに、脇 2 つは小さく静かに ===== */ .ac2 .ac2-b1-hero, .ac2 .ac2-b1-guin { position: relative; margin: 0 calc(-120px - var(--bleed, 0px)); overflow: hidden; } .ac2 .ac2-b1-hero { height: 680px; } .ac2 .ac2-b1-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(calc(1.08 - 0.08 * var(--p, 1))); will-change: transform; } .ac2 .ac2-b1-lead { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 120px; margin-top: 64px; } .ac2 .ac2-b1-lead .ac2-fd-h { margin: 0; font-size: 24px; } .ac2 .ac2-b1 .ac2-fd-chips { gap: 10px 22px; margin-top: 22px; } .ac2 .ac2-b1 .ac2-fd-chips li { font-size: 13px; } .ac2 .ac2-b1-side { display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; margin-top: 120px; padding-top: 64px; border-top: 1px solid rgba(23, 45, 57, 0.1); } .ac2 .ac2-b1-item { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; align-items: start; } .ac2 .ac2-b1-im { position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; background: radial-gradient(110% 90% at 50% 40%, #f7fbfd 0%, #e6f0f6 55%, #d3e3ed 100%); } .ac2 .ac2-b1-im > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; } .ac2 .ac2-b1-im > img.-cut { position: static; width: 76%; height: auto; object-fit: contain; } .ac2 .ac2-b1-im.-blank span { font-size: 11px; letter-spacing: 0.06em; color: rgba(23, 45, 57, 0.45); } .ac2 .ac2-b1-stat { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .ac2 .ac2-b1-stat b { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 0 3px; color: #00cbeb; } .ac2 .ac2-b1-guin { height: 720px; background: #05080c; color: #fff; } .ac2 .ac2-b1-guin-bg { position: absolute; right: 0; top: 0; width: 66%; height: 100%; max-width: none; object-fit: cover; object-position: 45% 45%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); } .ac2 .ac2-b1-guin-tx { position: absolute; left: calc(120px + var(--bleed, 0px)); top: 0; bottom: 0; width: 400px; display: flex; flex-direction: column; justify-content: center; } .ac2 .ac2-b1-guin-tx .ac2-fd-guinness-logo { position: static; width: 84px; height: auto; margin-bottom: 40px; } .ac2 .ac2-b1-guin-tx .ac2-fd-h { font-size: 24px; } .ac2 .ac2-b1-guin-tx .ac2-fd-p { color: rgba(255, 255, 255, 0.8); font-size: 14px; } /* 動き */ .ac2.is-js .ac2-b1 .ac2-b1-item { opacity: 0; transform: translateY(12px); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2.is-js .ac2-b1.is-in .ac2-b1-item { opacity: 1; transform: none; transition-delay: 0.6s; } .ac2.is-js .ac2-b1.is-in .ac2-b1-item + .ac2-b1-item { transition-delay: 0.75s; } /* 10/22 「他と比べて浮いてる」: 04 だけ写真を右から切り開き・ロゴを 1.7 倍 −10° から押印していた → 02（透過のドライバー）と同じ語彙に揃える。 写真はぼかしが取れながら 1.04 → 1 にゆっくり寄り、ロゴと Thus は 02 のバッジと同じ弾みで順に */ .ac2.is-js .ac2-b1-guin-bg { opacity: 0; filter: blur(10px); scale: 1.04; transition: opacity 1.2s ease, filter 1.4s ease, scale 2.2s cubic-bezier(0.22, 1, 0.36, 1); } .ac2.is-js .ac2-b1.is-in .ac2-b1-guin-bg { opacity: 1; filter: none; scale: 1; } .ac2.is-js .ac2-b1 .ac2-fd-guinness-logo { opacity: 0; transform: scale(0.6); transition: opacity 0.4s ease 0.8s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s; } .ac2.is-js .ac2-b1.is-in .ac2-fd-guinness-logo { opacity: 1; transform: none; } .ac2 .ac2-b1.is-in .ac2-fd-sweep { animation: ac2-fd-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1.2s both, ac2-fd-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) 6s infinite; } .ac2.is-js .ac2-b1 .ac2-fd-chips li { opacity: 0; transform: translateX(-10px); transition: opacity 0.5s ease, transform 0.6s ease; } .ac2.is-js .ac2-b1.is-in .ac2-fd-chips li { opacity: 1; transform: none; } .ac2.is-js .ac2-b1.is-in .ac2-fd-chips li:nth-child(1) { transition-delay: 0.5s; } .ac2.is-js .ac2-b1.is-in .ac2-fd-chips li:nth-child(2) { transition-delay: 0.62s; } .ac2.is-js .ac2-b1.is-in .ac2-fd-chips li:nth-child(3) { transition-delay: 0.74s; } .ac2.is-js .ac2-b1.is-in .ac2-fd-chips li:nth-child(4) { transition-delay: 0.86s; } @media (max-width: 1079px) { .ac2 .ac2-b1-hero, .ac2 .ac2-b1-guin { margin: 0 -20px; } .ac2 .ac2-b1-hero { height: 420px; } .ac2 .ac2-b1-lead { grid-template-columns: 1fr; row-gap: 16px; margin-top: 32px; } .ac2 .ac2-b1-lead .ac2-fd-h, .ac2 .ac2-b1-guin-tx .ac2-fd-h { font-size: 18px; } .ac2 .ac2-b1 .ac2-fd-chips li { font-size: 12px; } .ac2 .ac2-b1-side { grid-template-columns: 1fr; row-gap: 56px; margin-top: 72px; padding-top: 48px; } .ac2 .ac2-b1-item { grid-template-columns: 120px minmax(0, 1fr); column-gap: 18px; } .ac2 .ac2-b1-guin { height: 680px; } .ac2 .ac2-b1-guin-bg { left: 0; width: 100%; height: 56%; object-position: 55% 45%; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); } .ac2 .ac2-b1-guin-tx { left: 20px; right: 20px; top: auto; bottom: 36px; width: auto; display: block; } .ac2 .ac2-b1-guin-tx .ac2-fd-guinness-logo { width: 60px; margin-bottom: 24px; } .ac2 .ac2-b1-guin-tx .ac2-fd-p { font-size: 12px; line-height: 1.8; } .ac2 .ac2-b1-stat b { font-size: 24px; } } /* ===== 10/13 CRF 修正 ===== */ /* ギャラリー: 屋外での通話はスマホが写る位置で切る（WebGL は data-focus、こちらは読み込み前・WebGL なしの見え） */ .ac2 .ac2-ph.-s5 img { object-position: 72% 60%; } /* No.1: SP のアワード 3 列は、それぞれの列の中で中央揃え（左寄りに見えた） */ @media (max-width: 1079px) { .ac2 .ac2-awards li { align-items: center; text-align: center; } } /* コンセプト: PC だけ縦書き「イヤホンのストレス、さようなら。」を大きく */ @media (min-width: 1080px) { .ac2 .ac2-tate { width: 128px; gap: 18px; } .ac2 .ac2-tate-line { padding: 32px 13px; gap: 6px; } .ac2 .ac2-tate-chars { width: 26px; font-size: 26px; line-height: 36px; letter-spacing: 7.8px; } .ac2 .ac2-tate-chars span { height: 36px; margin-right: -7.8px; } .ac2 .ac2-tate-punct { width: 7px; height: 7px; } } /* 01 つけ心地: 2,000人以上の数字を外し、ループ動画は写真の上の小窓 → グループの下部（PC は説明文の下、SP はグループの最後） */ .ac2 .ac2-fd-mini { position: static; display: block; width: 100%; margin-top: 36px; } .ac2.is-js .ac2-fd-g.-fit .ac2-fd-mini { transform: translateY(16px); transform-origin: 50% 50%; transition-delay: 0.6s, 0.6s; } @media (max-width: 1079px) { .ac2 .ac2-fd-mini { width: 100%; margin-top: 24px; } } /* 02 サウンド SP: ドライバーと 12mm の組を中央に（左寄りだった）。音漏れの写真は全幅で上に */ @media (max-width: 1079px) { .ac2 .ac2-fd-sound { grid-template-columns: minmax(0, 1fr) 132px auto minmax(0, 1fr); } .ac2 .ac2-fd-driver { grid-column: 2; } .ac2 .ac2-fd-sound .ac2-fd-stat, .ac2 .ac2-fd-sound .ac2-fd-stat-cap { grid-column: 3; } .ac2 .ac2-fd-leak { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } .ac2 .ac2-fd-leak-ph { aspect-ratio: 16 / 9; } .ac2 .ac2-fd-leak-ph img { object-position: 50% 35%; } .ac2 .ac2-fd-ripple i { left: 40.9%; top: 35.1%; } } /* 05 再生時間: バーを外し、製品を大きく・グレーの地を外す（透過画像をそのまま置く） */ .ac2 .ac2-fd-case { aspect-ratio: auto; background: none; } .ac2 .ac2-fd-case img { width: 100%; } .ac2 .ac2-fd-battery { grid-template-columns: 340px 400px minmax(0, 1fr); column-gap: 56px; } @media (max-width: 1079px) { .ac2 .ac2-fd-battery { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; } .ac2 .ac2-fd-case { justify-self: center; width: 100%; max-width: 180px; } } /* 6つのおすすめポイント: 01 / 06 の写真差し替え、03 は 4 色とも入る切り方 */ .ac2 .ac2-bt.-t1 .ac2-bt-ph { background-position: 70% 30%; } .ac2 .ac2-bt.-t3 .ac2-bt-ph { background-position: 50% 55%; } .ac2 .ac2-bt.-t6 { background: #eef2f4; } .ac2 .ac2-bt.-t6 .ac2-bt-ph { background-position: 100% 50%; background-size: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 64%); mask-image: linear-gradient(180deg, transparent 0, transparent 34%, #000 64%); } /* 上に文字の場所を空ける */ /* SP: スクロールなしで 6 つが 1 画面に収まるように（ヘッダー下の残り高さで行の高さを決める） */ @media (max-width: 1079px) { .ac2 .ac2-pts { --row: clamp(108px, calc((100vh - 56px - 148px) / 4 - 8px), 166px); } @supports (height: 100svh) { .ac2 .ac2-pts { --row: clamp(108px, calc((100svh - 56px - 148px) / 4 - 8px), 166px); } } .ac2 .ac2-pts-title { margin-bottom: 14px; } .ac2 .ac2-bento { gap: 8px; grid-template-rows: repeat(4, var(--row)); grid-template-areas: "a a" "b d" "c c" "e f"; } .ac2 .ac2-bt-tx { left: 12px; top: 10px; right: 12px; } .ac2 .ac2-bt-no { margin-bottom: 2px; } .ac2 .ac2-bt-h, .ac2 .ac2-bt-h.-sm { font-size: 13px; line-height: 1.4; } .ac2 .ac2-bt.-t1 .ac2-bt-h { font-size: 15px; } .ac2 .ac2-bt-go { right: 8px; bottom: 8px; width: 22px; height: 22px; } .ac2 .ac2-bt-badges { right: 36px; bottom: 8px; } .ac2 .ac2-bt-badges img { height: 26px; } .ac2 .ac2-bt-badges img.-ldac { height: 10px; } .ac2 .ac2-bt-guin { left: 12px; bottom: 8px; height: 40px; } .ac2 .ac2-bt.-t1 .ac2-bt-ph { left: 32%; background-position: 62% 30%; } .ac2 .ac2-bt.-t1 .ac2-bt-tx { right: 66%; } .ac2 .ac2-bt.-t3 .ac2-bt-ph { background-position: 50% 58%; } .ac2 .ac2-bt.-t5 .ac2-bt-ph { background-size: auto 58%; background-position: right 34px bottom 8px; } .ac2 .ac2-bt.-t6 .ac2-bt-ph { background-size: cover; background-position: 100% 60%; } .ac2 .ac2-pts-note { margin-top: 8px; } } /* 03 デザイン: 全色 → 4 色を順にクロスフェード（1 枚 3.2 秒）。動きを減らす設定では全色の 1 枚だけ */ .ac2 .ac2-loop img { opacity: 0; animation: ac2-loop5 16s linear infinite paused; } .ac2 .ac2-fd-g.-design.is-in .ac2-loop img { animation-play-state: running; } /* 03 に着いてから全色 → 4 色の順で回す */ .ac2 .ac2-loop img:nth-child(1) { opacity: 1; animation-delay: -0.6s; } .ac2 .ac2-loop img:nth-child(2) { animation-delay: 2.6s; } .ac2 .ac2-loop img:nth-child(3) { animation-delay: 5.8s; } .ac2 .ac2-loop img:nth-child(4) { animation-delay: 9s; } .ac2 .ac2-loop img:nth-child(5) { animation-delay: 12.2s; } .ac2 .ac2-loop img.-all { object-position: 50% 52%; } @keyframes ac2-loop5 { 0% { opacity: 0; } 4% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ac2 .ac2-loop img { animation: none; } .ac2 .ac2-loop img:not(:first-child) { display: none; } } @media (max-width: 1079px) { .ac2 .ac2-b1-hero.ac2-loop { height: auto; aspect-ratio: 16 / 9; } /* SP は縦長に切ると全色が入らないので、写真の比率のまま */ } /* 03 コンパクト設計: 写真と「背中合わせ」の 2 枚を上に並べ、文は下。※ は 2 項目の下に 1 つ */ .ac2 .ac2-fd-g.-design .ac2-b1-item { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-im, .ac2 .ac2-b1-ims .ac2-b1-im { aspect-ratio: auto; height: 260px; } .ac2 .ac2-b1-ims { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; } .ac2 .ac2-b1-ims .ac2-b1-im > img { object-position: 50% 50%; } .ac2 .ac2-fd-g.-design .ac2-b1-im > img.-cut { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; } .ac2 .ac2-b1-side-note { grid-column: 1 / -1; margin-top: 28px; } @media (max-width: 1079px) { .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-im, .ac2 .ac2-b1-ims .ac2-b1-im { height: 180px; } .ac2 .ac2-fd-g.-design .ac2-b1-side { row-gap: 48px; } .ac2 .ac2-b1-side-note { margin-top: -24px; } } /* 06 ワイヤレス充電: シーン写真に差し替え（製品の切り抜き用の配置を外す） */ .ac2 .ac2-fd-tile.-wireless .ac2-fd-tile-ph.-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; } /* 04 通話: ギネスロゴの横に Thus ロゴ。英語記録名の注記はギネスの文の下（暗い地なので白） */ .ac2 .ac2-b1-logos { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 40px; } .ac2 .ac2-b1-logos .ac2-fd-guinness-logo { margin-bottom: 0; } .ac2 .ac2-thus-badge { width: 84px; height: auto; } .ac2 .ac2-fd-note.-guin { margin-top: 18px; } .ac2.is-js .ac2-b1 .ac2-thus-badge { opacity: 0; transform: scale(0.6); transition: opacity 0.4s ease 0.95s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s; } .ac2.is-js .ac2-b1.is-in .ac2-thus-badge { opacity: 1; transform: none; } @media (max-width: 1079px) { .ac2 .ac2-b1-logos { gap: 14px; margin-bottom: 24px; } .ac2 .ac2-thus-badge { width: 60px; } .ac2 .ac2-b1-guin { height: 760px; } } /* 04 Thus: 2 Pro の Thus セクションを、このページの明るい地で（チップ画像 + 見出し・リード・本文・機能・ボタン・注記） */ .ac2 .ac2-thus { display: grid; grid-template-columns: minmax(0, 1fr) 520px; column-gap: 88px; align-items: center; margin-top: 96px; padding: 72px 0 0; border-top: 1px solid rgba(23, 45, 57, 0.1); } .ac2 .ac2-thus-im { position: relative; margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: radial-gradient(80% 70% at 50% 55%, #ffffff 0%, #e8f4fb 45%, #cfe3ef 100%); } .ac2 .ac2-thus-im img.-chip { width: 74%; height: auto; } .ac2 .ac2-thus-sub { margin-top: 14px; font-size: 14px; letter-spacing: 0.06em; color: rgba(23, 45, 57, 0.6); } .ac2 .ac2-thus-h { font-size: 30px; line-height: 1.5; letter-spacing: 0.06em; font-weight: 400; } .ac2 .ac2-thus-tx > .ac2-fd-p { margin-top: 28px; } .ac2 .ac2-thus .ac2-fd-note { margin-top: 20px; } .ac2.is-js .ac2-thus-im img.-chip { opacity: 0; transform: translateY(20px) scale(0.96); transition: opacity 0.9s ease 0.3s, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s; } .ac2.is-js .ac2-thus.is-in .ac2-thus-im img.-chip { opacity: 1; transform: none; } @media (max-width: 1079px) { .ac2 .ac2-thus { grid-template-columns: minmax(0, 1fr); row-gap: 28px; margin-top: 56px; padding-top: 48px; } .ac2 .ac2-thus-h { font-size: 21px; } .ac2 .ac2-thus-sub { font-size: 12px; margin-top: 10px; } } /* 02 サウンド / 04 通話: 背景が重たい → 支給 PSD / TIF から切り抜いた製品を、明るい地に置く（10/13 CRF） */ .ac2 .ac2-fd-g.-sound { color: var(--ink); } .ac2 .ac2-fd-g.-sound::before { background: radial-gradient(900px 600px at calc(3000px + 28%) 48%, rgba(255, 255, 255, 0.9), transparent 70%), linear-gradient(180deg, #edf3f8 0%, #dde9f2 55%, #e4f0f7 100%); } /* 下端は地の色に溶かす（次の区切り線と二重の境目にしない） */ .ac2 .ac2-fd-g.-sound .ac2-fd-no { color: rgba(23, 45, 57, 0.4); } .ac2 .ac2-fd-g.-sound .ac2-fd-p { color: rgba(23, 45, 57, 0.82); } .ac2 .ac2-fd-driver { -webkit-mask-image: none; mask-image: none; aspect-ratio: 1800 / 1628; } .ac2 .ac2-fd-driver { overflow: visible; } .ac2 .ac2-fd-driver img { object-fit: contain; transform: scale(calc(0.88 + 0.12 * var(--p, 1))); } /* 奥から迫る: 寄りから戻すと切り抜きの端が枠で切れるので、小さい状態から等倍へ */ .ac2 .ac2-fd-g.-sound .ac2-fd-leak { border-top-color: rgba(23, 45, 57, 0.12); } .ac2 .ac2-b1-guin { background: radial-gradient(70% 90% at 72% 50%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #edf3f8 0%, #d7e4ee 100%); color: var(--ink); } .ac2 .ac2-b1-guin-bg { object-fit: contain; object-position: 60% 50%; -webkit-mask-image: none; mask-image: none; } .ac2 .ac2-b1-guin-tx .ac2-fd-p { color: rgba(23, 45, 57, 0.82); } .ac2 .ac2-fd-note.-guin { color: rgba(23, 45, 57, 0.6); } @media (max-width: 1079px) { .ac2 .ac2-b1-guin-bg { height: 50%; top: 2%; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; } } .ac2 .ac2-bt.-t2 { background: linear-gradient(160deg, #f4f8fb 0%, #dce8f1 100%); } .ac2 .ac2-bt.-t4 { background: linear-gradient(160deg, #eef4f8 0%, #d3e1ec 100%); } .ac2 .ac2-bt.-t2 .ac2-bt-ph, .ac2 .ac2-bt.-t4 .ac2-bt-ph { left: 34%; top: 8%; right: 2%; bottom: 8%; background-size: contain; background-position: 50% 50%; -webkit-mask-image: none; mask-image: none; } @media (max-width: 1079px) { .ac2 .ac2-bt.-t2 .ac2-bt-ph, .ac2 .ac2-bt.-t4 .ac2-bt-ph { left: 8%; top: 36%; right: 8%; bottom: 4%; background-position: 50% 100%; -webkit-mask-image: none; mask-image: none; } } /* R1 レビュー反映 */ .ac2 .ac2-fd-g.-design .ac2-b1-item { align-content: start; } /* 左右の見出し・数字の行の高さを揃える */ @media (max-width: 1079px) { .ac2 .ac2-pts { padding-top: 40px; } .ac2 .ac2-bt.-t2 .ac2-bt-ph, .ac2 .ac2-bt.-t4 .ac2-bt-ph { top: 68px; } /* 製品は見出しの下から */ .ac2 .ac2-bt.-t2 .ac2-bt-badges { display: none; } /* 小さいタイルではドライバーにかぶる。詳細 02 で見せる */ .ac2 .ac2-bt.-t6 .ac2-bt-ph { top: 40%; -webkit-mask-image: none; mask-image: none; } .ac2 .ac2-b1-guin-bg { left: 20px; width: calc(100% - 40px); } } @media (max-width: 1079px) { /* 04 SP: ギネス帯は高さ固定・文字の下端起点だと、狭い幅で文字が製品に食い込む → 上に製品、下に文字で流す */ .ac2 .ac2-b1-guin { height: auto; display: flex; flex-direction: column; } .ac2 .ac2-b1-guin-bg { position: relative; inset: auto; top: 0; left: 0; margin: 16px 20px 0; width: calc(100% - 40px); height: auto; aspect-ratio: 1800 / 1404; } .ac2 .ac2-b1-guin-tx { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; padding: 8px 20px 36px; } } /* R1 CRF 突き合わせ反映 */ .ac2 .ac2-cta2-spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* 長い項目名で左列だけ広がらないように */ @media (max-width: 1079px) { .ac2 .ac2-cta2-spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ac2 .ac2-b1-ims { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* 背中合わせの画像が小さくなりすぎないよう 1:1 */ .ac2 .ac2-b1-ims .ac2-b1-im { height: 200px; } } .ac2 .ac2-bt.-t6 .ac2-bt-ph { background-position: 30% 60%; } /* PC: スマホとケースが入る位置 */ /* R1 スマホ性能レビュー反映（画質・3D の質は変えない） */ /* 画面外の無限アニメは一時停止（JS の IntersectionObserver が .is-off を付ける） */ .ac2 .is-off, .ac2 .is-off *, .ac2 .is-off *::before, .ac2 .is-off *::after { animation-play-state: paused !important; } /* 06 マルチポイントの点: box-shadow のアニメは毎フレーム Paint になるので、擬似要素の transform + opacity に（見え方は同じ） */ .ac2 .ac2-fd-link i { box-shadow: none; } .ac2 .ac2-fd-link i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 203, 235, 0.55); opacity: 0; } .ac2 .ac2-fd-g.-misc.is-in .ac2-fd-link i { animation: ac2-fd-ping-dot 3s ease-out 1s infinite; } .ac2 .ac2-fd-g.-misc.is-in .ac2-fd-link i::after { animation: ac2-fd-ping-ring 3s ease-out 1s infinite; } .ac2 .ac2-fd-g.-misc.is-in .ac2-fd-link i:nth-child(2), .ac2 .ac2-fd-g.-misc.is-in .ac2-fd-link i:nth-child(2)::after { animation-delay: 2.5s; } @keyframes ac2-fd-ping-dot { 0% { opacity: 0; } 10%, 45% { opacity: 1; } 60%, 100% { opacity: 0; } } @keyframes ac2-fd-ping-ring { 0% { transform: scale(1); opacity: 1; } 45%, 100% { transform: scale(3.67); opacity: 0; } } /* 03 ループ: スクロールの寄り（--p）と will-change は内側の 1 枚に。画像 5 枚は opacity だけ */ .ac2 .ac2-loop-in { position: absolute; inset: 0; transform: scale(calc(1.08 - 0.08 * var(--p, 1))); will-change: transform; } .ac2 .ac2-b1-hero.ac2-loop img { transform: none; will-change: auto; } /* 04 通話: 比較動画（素材待ち）は Thus の下（10/13 CRF p.52）。区切り線と余白は Thus と同じ扱い */ .ac2 .ac2-b1-side.-after-thus { margin-top: 96px; padding-top: 72px; } @media (max-width: 1079px) { .ac2 .ac2-b1-side.-after-thus { margin-top: 56px; padding-top: 48px; } } /* R2 デザインレビュー反映 */ .ac2 .ac2-fd-g.-design .ac2-b1-item > div:last-child { display: flex; flex-direction: column; height: 100%; } .ac2 .ac2-fd-g.-design .ac2-b1-stat { margin-top: auto; padding-top: 14px; } /* 左右の数字の行を下端で揃える */ @media (max-width: 1079px) { .ac2 .ac2-bt.-t1 .ac2-bt-tx { right: auto; } .ac2 .ac2-bt.-t1 .ac2-bt-h { white-space: nowrap; } /* 「ストレスフリー」を割らない */ .ac2 .ac2-bt.-t2 .ac2-bt-ph { top: 48px; } /* 02 は見出しが 1 行 */ .ac2 .ac2-bt.-t5 .ac2-bt-ph { top: 50px; left: 8%; right: 34px; bottom: 6px; background-size: contain; background-position: 50% 100%; } .ac2 .ac2-bt.-t6 .ac2-bt-ph { top: max(40%, 52px); } .ac2 .ac2-bt.-t4 .ac2-bt-guin { height: 34px; } .ac2 .ac2-b1-guin-bg { margin-top: 32px; } } .ac2 .ac2-fd-g.-design .ac2-b1-side { align-items: stretch; } .ac2 .ac2-fd-g.-design .ac2-b1-item { grid-template-rows: auto 1fr; align-items: stretch; } /* 10/14 CRF p.61 / p.72: 1st・2nd CTA の「購入」と「Amazonで購入」は半分ずつの幅 */ .ac2 .ac2-btns .lp-btns { width: 288px; } .ac2 .ac2-btns .lp-btns > li:not(.is-more):not(:has(.lp-txtLink)) { flex: 1 1 0; min-width: 0; } .ac2 .ac2-btns .lp-btns .lp-btn, .ac2 .ac2-btns .lp-btns .lp-btn-amazon { width: 100%; padding: 0 12px; } @media (max-width: 1079px) { .ac2 .ac2-btns { width: 100%; } .ac2 .ac2-btns .lp-btns { width: 100%; max-width: 320px; margin: 0 auto; } } /* 10/14 CRF p.61（PC のみ）: 主役の 3 つ（-key）を大きく・白地＋アクセントの輪で、残り 5 つは小さく控えめに */ @media (min-width: 1080px) { .ac2 .ac2-icons { row-gap: 4px; } .ac2 .ac2-icons li.-key { padding: 0 8px 26px; gap: 14px; } .ac2 .ac2-icons li.-key .ac2-icon { width: 104px; height: 104px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 203, 235, 0.55), 0 10px 24px rgba(23, 45, 57, 0.08); } .ac2 .ac2-icons li.-key .ac2-icon > img, .ac2 .ac2-icons li.-key .ac2-icon-sound { scale: 1.25; } .ac2 .ac2-icons li.-key p { font-size: 17px; font-weight: 600; letter-spacing: 0.02em; } .ac2 .ac2-icons li:not(.-key):not(.ac2-icons-note-sp) { padding: 22px 6px 6px; gap: 8px; border-top: 1px solid rgba(23, 45, 57, 0.1); } .ac2 .ac2-icons li:not(.-key) .ac2-icon { width: 58px; height: 58px; } .ac2 .ac2-icons li:not(.-key) .ac2-icon > img, .ac2 .ac2-icons li:not(.-key) .ac2-icon-sound { scale: 0.78; } .ac2 .ac2-icons li:not(.-key) .ac2-icon.-hours b { font-size: 19px; } .ac2 .ac2-icons li:not(.-key) .ac2-icon.-hours small { font-size: 7px; } .ac2 .ac2-icons li:not(.-key) p { font-size: 13px; color: rgba(23, 45, 57, 0.8); } } /* 10/14 CRF p.63（SP のみ）: 1 画面に収める詰め方だと画像・文字とも小さい → 行の高さを画面幅基準にし、文字も一段大きく（PC はそのまま） */ @media (max-width: 1079px) { .ac2 .ac2-pts { --row: clamp(150px, 42vw, 200px); } @supports (height: 100svh) { .ac2 .ac2-pts { --row: clamp(150px, 42vw, 200px); } } .ac2 .ac2-bento { gap: 10px; } .ac2 .ac2-bt-tx { left: 14px; top: 12px; right: 14px; } .ac2 .ac2-bt-no { font-size: 12px; margin-bottom: 4px; } .ac2 .ac2-bt-h, .ac2 .ac2-bt-h.-sm { font-size: 15px; line-height: 1.45; } .ac2 .ac2-bt.-t1 .ac2-bt-h { font-size: 18px; } .ac2 .ac2-bt-go { right: 10px; bottom: 10px; width: 26px; height: 26px; } .ac2 .ac2-bt-badges { right: 44px; bottom: 10px; } .ac2 .ac2-bt-badges img { height: 30px; } .ac2 .ac2-bt-badges img.-ldac { height: 12px; } .ac2 .ac2-bt-guin { left: 14px; bottom: 10px; height: 48px; } .ac2 .ac2-bt.-t2 .ac2-bt-ph { top: 52px; } /* 製品は見出しの下から（文字を大きくした分だけ下げる） */ .ac2 .ac2-bt.-t4 .ac2-bt-ph { top: 78px; } .ac2 .ac2-bt.-t4 .ac2-bt-guin { height: 40px; } .ac2 .ac2-pts-note { margin-top: 10px; } } /* 10/14 CRF p.65: 02 ドライバーに「迫力あるサウンド」のエフェクト。振動板（右上の円盤）の面と同じ傾きの楕円の波紋が、 軸の向き（右上）へ押し出されながら広がる＋スタックの奥に呼吸する光。波紋は写真の後ろ（円盤の縁から現れる） */ .ac2 .ac2-fd-driver { position: relative; isolation: isolate; } .ac2 .ac2-fd-driver img { position: relative; z-index: 1; } .ac2 .ac2-fd-driver::before { content: ""; position: absolute; z-index: 0; left: 30%; top: 0; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(0, 203, 235, 0.22) 45%, rgba(0, 203, 235, 0) 100%); opacity: 0; transform: scale(0.85); pointer-events: none; } .ac2 .ac2-fd-g.-sound.is-in .ac2-fd-driver::before { animation: ac2-fd-glow 2.8s ease-in-out 0.6s infinite; } @keyframes ac2-fd-glow { 0%, 100% { opacity: 0.55; transform: scale(0.88); } 18% { opacity: 1; transform: scale(1.04); } } .ac2 .ac2-fd-wave { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .ac2 .ac2-fd-wave i { position: absolute; left: 83%; top: 20%; width: 46%; aspect-ratio: 2.3; border-radius: 50%; border: 2px solid rgba(0, 203, 235, 0.6); box-shadow: 0 0 22px rgba(0, 203, 235, 0.35), inset 0 0 14px rgba(0, 203, 235, 0.25); opacity: 0; transform: translate(-50%, -50%) rotate(48deg) scale(0.9); } .ac2 .ac2-fd-g.-sound.is-in .ac2-fd-wave i { animation: ac2-fd-wave 2.8s cubic-bezier(0.15, 0.55, 0.3, 1) 0.6s infinite; } .ac2 .ac2-fd-g.-sound.is-in .ac2-fd-wave i:nth-child(2) { animation-delay: 1.3s; } .ac2 .ac2-fd-g.-sound.is-in .ac2-fd-wave i:nth-child(3) { animation-delay: 2s; } .ac2 .ac2-fd-g.-sound.is-in .ac2-fd-wave i:nth-child(4) { animation-delay: 2.7s; } @keyframes ac2-fd-wave { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(48deg) translateY(0) scale(0.9); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(48deg) translateY(-150%) scale(1.9); } } .ac2.is-reduced .ac2-fd-wave, .ac2.is-reduced .ac2-fd-driver::before { display: none; } @media (max-width: 1079px) { .ac2 .ac2-fd-wave i { border-width: 1.5px; box-shadow: 0 0 10px rgba(0, 203, 235, 0.35); } } /* 10/14 CRF p.66（PC）: ブラウザの倍率で横幅が変わると固定高さの切り抜きで見切れる → PC は切替アニメをやめ、 全色は写真の比率のまま（見切れない）＋その下に 4 色を並べて一度に見せる。SP は従来どおりループ */ @media (min-width: 1080px) { .ac2 .ac2-b1-hero.ac2-loop { height: auto; overflow: visible; margin: 0; } .ac2 .ac2-b1-hero.ac2-loop .ac2-loop-in { position: static; transform: none; will-change: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ac2 .ac2-b1-hero.ac2-loop img, .ac2 .ac2-b1-hero.ac2-loop img:not(:first-child) { display: block; position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; opacity: 1; animation: none; } .ac2 .ac2-b1-hero.ac2-loop img.-all { grid-column: 1 / -1; aspect-ratio: 2000 / 1116; object-fit: cover; object-position: 50% 50%; } .ac2.is-js .ac2-fd-g.-design .ac2-loop img:not(.-all) { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-loop img:not(.-all) { opacity: 1; transform: none; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-loop img:nth-child(2) { transition-delay: 0.5s; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-loop img:nth-child(3) { transition-delay: 0.62s; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-loop img:nth-child(4) { transition-delay: 0.74s; } .ac2.is-js .ac2-fd-g.-design.is-in .ac2-loop img:nth-child(5) { transition-delay: 0.86s; } } /* 10/14 CRF p.69: 通話の聞き比べ（オフィス / 外出中 / 駅の中 × A社 / AeroClip 2）。Thus の下、04 の締め。 見出しは中央、3 枚のシーン写真を押すと再生。下の切り替えで聞き比べ（再生中は同じ位置から切り替わる） */ .ac2 .ac2-vs { margin-top: 96px; padding-top: 80px; border-top: 1px solid rgba(23, 45, 57, 0.1); } .ac2 .ac2-vs-head { text-align: center; margin-bottom: 48px; } .ac2 .ac2-vs-eyebrow { font-family: var(--mont); font-size: 13px; letter-spacing: 0.3em; color: #00a9c7; margin-bottom: 14px; } .ac2 .ac2-vs-h { font-size: 30px; line-height: 1.5; letter-spacing: 0.06em; font-weight: 400; } .ac2 .ac2-vs-h br.-sp { display: none; } .ac2 .ac2-vs-lead { margin-top: 14px; font-size: 14px; line-height: 1.8; letter-spacing: 0.05em; color: rgba(23, 45, 57, 0.72); } .ac2 .ac2-vs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .ac2 .ac2-vs-card { display: flex; flex-direction: column; gap: 14px; } .ac2 .ac2-vs-place { font-size: 17px; letter-spacing: 0.12em; text-align: center; } .ac2 .ac2-vs-ph { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; overflow: hidden; background: #d9e7f0; cursor: pointer; } .ac2 .ac2-vs-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s ease; } .ac2 .ac2-vs-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(23, 45, 57, 0.28), rgba(23, 45, 57, 0) 45%); transition: background 0.4s ease; } .ac2 .ac2-vs-card.is-playing .ac2-vs-ph::after { background: linear-gradient(20deg, rgba(23, 45, 57, 0.4), rgba(23, 45, 57, 0.08) 60%); } @media (hover: hover) { .ac2 .ac2-vs-ph:hover img { transform: scale(1.04); } } .ac2 .ac2-vs-btn { position: absolute; z-index: 1; left: 18px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 24px rgba(23, 45, 57, 0.18); display: grid; place-items: center; transition: transform 0.3s ease; } .ac2 .ac2-vs-ph:active .ac2-vs-btn { transform: scale(0.94); } .ac2 .ac2-vs-btn i { grid-area: 1 / 1; display: block; } .ac2 .ac2-vs-btn .-play { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #00b8d9; } .ac2 .ac2-vs-btn .-pause { width: 16px; height: 18px; border-left: 5px solid #00b8d9; border-right: 5px solid #00b8d9; box-sizing: border-box; opacity: 0; } .ac2 .ac2-vs-card.is-playing .ac2-vs-btn .-play { opacity: 0; } .ac2 .ac2-vs-card.is-playing .ac2-vs-btn .-pause { opacity: 1; } /* 再生中は波紋（音漏れ・ドライバーと同じ語彙） */ .ac2 .ac2-vs-btn::before, .ac2 .ac2-vs-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.9); opacity: 0; pointer-events: none; } .ac2 .ac2-vs-card.is-playing .ac2-vs-btn::before { animation: ac2-fd-ripple 2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; } .ac2 .ac2-vs-card.is-playing .ac2-vs-btn::after { animation: ac2-fd-ripple 2s cubic-bezier(0.2, 0.6, 0.3, 1) 1s infinite; } .ac2 .ac2-vs-bar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.35); } .ac2 .ac2-vs-bar i { display: block; height: 100%; background: #00cbeb; transform: scaleX(0); transform-origin: 0 50%; } .ac2 .ac2-vs-sw { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.08); } .ac2 .ac2-vs-opt { height: 40px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: rgba(23, 45, 57, 0.6); font: inherit; font-size: 14px; letter-spacing: 0.06em; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .ac2 .ac2-vs-opt.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(23, 45, 57, 0.1); } .ac2 .ac2-vs-opt.is-on:last-child { background: #00cbeb; color: #fff; box-shadow: 0 4px 12px rgba(0, 203, 235, 0.3); } .ac2 .ac2-vs-note { margin-top: 24px; text-align: center; } .ac2.is-js .ac2-vs .ac2-vs-card { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1); } .ac2.is-js .ac2-vs.is-in .ac2-vs-card { opacity: 1; transform: none; } .ac2.is-js .ac2-vs.is-in .ac2-vs-card:nth-child(2) { transition-delay: 0.12s; } .ac2.is-js .ac2-vs.is-in .ac2-vs-card:nth-child(3) { transition-delay: 0.24s; } @media (max-width: 1079px) { .ac2 .ac2-vs { margin-top: 56px; padding-top: 48px; } .ac2 .ac2-vs-head { margin-bottom: 28px; } .ac2 .ac2-vs-eyebrow { font-size: 11px; margin-bottom: 10px; } .ac2 .ac2-vs-h { font-size: 21px; } .ac2 .ac2-vs-h br.-sp { display: inline; } .ac2 .ac2-vs-lead { font-size: 13px; } .ac2 .ac2-vs-list { grid-template-columns: minmax(0, 1fr); gap: 28px; } .ac2 .ac2-vs-card { gap: 10px; } .ac2 .ac2-vs-place { font-size: 15px; text-align: left; } .ac2 .ac2-vs-btn { left: 14px; bottom: 16px; width: 50px; height: 50px; } .ac2 .ac2-vs-opt { height: 38px; font-size: 13px; } .ac2 .ac2-vs-note { text-align: left; } } /* ===== 10/14 Figma（大津さん修正）: 01〜06 の見出しを統一 + 02 の「12mm」 ===== 大きな文字は Figma の「縦方向のトリミング（キャップハイト〜ベースライン）」と同じく、文字の高さぴったりの箱にする（text-box） */ .ac2 .ac2-fd-label { align-items: center; gap: 18px; } .ac2 .ac2-fd-no, .ac2 .ac2-fd-g.-sound .ac2-fd-no { font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: rgba(23, 45, 57, 0.4); text-box: trim-both cap alphabetic; } .ac2 .ac2-fd-name { font-size: 32px; line-height: 1; letter-spacing: 0.15em; text-box: trim-both cap alphabetic; } .ac2 .ac2-fd-sound .ac2-fd-stat.-driver { display: flex; align-items: flex-end; gap: 10px; margin: 0; color: var(--ink); font-family: var(--font); } .ac2 .ac2-fd-stat.-driver b { font-size: 220px; font-weight: 300; line-height: 1; letter-spacing: -0.014em; font-variant-numeric: proportional-nums; text-box: trim-both cap alphabetic; } .ac2 .ac2-fd-stat.-driver .-side { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; } .ac2 .ac2-fd-stat.-driver .-cap { margin-top: -4px; font-size: 24px; line-height: 1.3; letter-spacing: 0.0375em; font-weight: 400; } .ac2 .ac2-fd-stat.-driver .-unit { font-size: 73px; font-weight: 600; line-height: 1; letter-spacing: 0; text-box: trim-both cap alphabetic; } .ac2 .ac2-fd-sound .ac2-fd-stat.-driver + .ac2-fd-h { margin-top: 40px; font-size: 25px; line-height: 1.75; letter-spacing: 0.048em; } .ac2 .ac2-fd-sound .ac2-fd-h + .ac2-fd-p { margin-top: 16px; } .ac2 .ac2-fd-sound .ac2-fd-badges { margin-top: 22px; } .ac2 .ac2-fd-sound .ac2-fd-leak { margin-top: 56px; } @media (max-width: 1079px) { .ac2 .ac2-fd-label { gap: 12px; } .ac2 .ac2-fd-no, .ac2 .ac2-fd-g.-sound .ac2-fd-no { font-size: 30px; } .ac2 .ac2-fd-name { font-size: 20px; letter-spacing: 0.1em; } .ac2 .ac2-fd-stat.-driver { gap: 6px; } .ac2 .ac2-fd-stat.-driver b { font-size: 84px; } .ac2 .ac2-fd-stat.-driver .-cap { margin-top: -2px; font-size: 12px; white-space: nowrap; } .ac2 .ac2-fd-stat.-driver .-unit { font-size: 28px; } .ac2 .ac2-fd-sound .ac2-fd-stat.-driver { grid-row: 1 / span 2; align-self: center; } .ac2 .ac2-fd-sound .ac2-fd-stat.-driver + .ac2-fd-h { margin-top: 24px; font-size: 18px; } .ac2 .ac2-fd-sound .ac2-fd-badges { margin-top: 16px; } .ac2 .ac2-fd-sound .ac2-fd-leak { margin-top: 36px; } } /* ===== 10/14 夜 Figma（大津さん修正 / LP 再現 10/14 19:30 の ac2-feat）===== セクション（01〜06）の区切りは線ではなく大きめの余白で見せる → 区切り線を外し、上の余白も外して「前の項目の下余白」だけで区切る（01 の上の線は残す）。 03 デザイン性は写真を時間で切り替え（右下のサムネイルのゲージ）、20% は大きな数字に。数字のカウントアップはやめ、1 桁ずつ立ち上がる動きに */ .ac2 .ac2-fd-g:not(.-fit), .ac2 .ac2-fd-g.-sound { border-top: 0; padding-top: 0; } .ac2 .ac2-fd-g.-sound { padding-top: 120px; } /* 02 は地の帯があるので帯の中の上余白は残す */ .ac2 .ac2-fd-g.-battery, .ac2 .ac2-fd-g.-misc { padding-bottom: 160px; } /* 02: 音漏れ低減の上の線を外す（写真 200px と文を横並び、上下中央） */ .ac2 .ac2-fd-leak, .ac2 .ac2-fd-g.-sound .ac2-fd-leak { border-top: 0; padding-top: 0; margin-top: 56px; } /* 03: 写真は画面幅いっぱい・比率そのまま。写真は重ねてクロスフェード、表示中だけゆっくり寄る */ .ac2 .ac2-dz { position: relative; } .ac2 .ac2-dz .ac2-b1-hero { height: auto; aspect-ratio: 2000 / 1116; margin: 0 calc(-120px - var(--bleed, 0px)); overflow: hidden; } .ac2 .ac2-dz-in { position: absolute; inset: 0; transform: scale(calc(1.08 - 0.08 * var(--p, 1))); will-change: transform; } .ac2 .ac2-dz .ac2-b1-hero .ac2-dz-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transform: none; will-change: auto; transition: opacity 1.1s ease; } .ac2 .ac2-dz .ac2-b1-hero .ac2-dz-in img.is-on { opacity: 1; } .ac2 .ac2-dz.is-run .ac2-b1-hero .ac2-dz-in img.is-on { animation: ac2-dz-zoom var(--dz-dur, 5s) linear both; } @keyframes ac2-dz-zoom { from { transform: scale(1.04); } to { transform: none; } } .ac2 .ac2-dz-ths { position: absolute; right: 0; bottom: 40px; display: flex; gap: 10px; } .ac2 .ac2-dz-th { position: relative; display: block; width: 58.46px; height: 43.86px; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; opacity: 0.55; transition: opacity 0.4s ease; } .ac2 .ac2-dz-th img { display: block; width: 100%; height: 100%; object-fit: cover; } .ac2 .ac2-dz-th:hover, .ac2 .ac2-dz-th.is-on { opacity: 1; } .ac2 .ac2-dz-th:focus-visible { outline: 2px solid #00cbeb; outline-offset: 2px; } .ac2 .ac2-dz-gauge { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.55); opacity: 0; transition: opacity 0.3s ease; } .ac2 .ac2-dz-gauge::after { content: ""; position: absolute; inset: 0; background: #00cbeb; transform: scaleX(0); transform-origin: 0 50%; } .ac2 .ac2-dz-th.is-on .ac2-dz-gauge { opacity: 1; } .ac2 .ac2-dz.is-run .ac2-dz-th.is-on .ac2-dz-gauge::after { animation: ac2-dz-gauge var(--dz-dur, 5s) linear both; } .ac2 .ac2-dz.is-off .ac2-dz-th.is-on .ac2-dz-gauge::after, .ac2 .ac2-dz.is-off .ac2-b1-hero .ac2-dz-in img.is-on { animation-play-state: paused; } @keyframes ac2-dz-gauge { to { transform: none; } } /* 03: 写真の下は 3 列（見出し / 説明 / カラー名）を下揃え。カラー名は 2 色ずつ 2 行 */ .ac2 .ac2-b1 .ac2-b1-lead { display: flex; justify-content: space-between; align-items: flex-end; gap: 0; margin-top: 40px; } .ac2 .ac2-b1-lead > * { flex: none; margin: 0; } .ac2 .ac2-b1-lead .ac2-fd-h { font-size: 24px; line-height: 1.6; letter-spacing: 0.06em; } .ac2 .ac2-b1-lead .ac2-fd-p { font-size: 14px; line-height: 2; letter-spacing: 0.03em; } .ac2 .ac2-b1 .ac2-b1-lead .ac2-fd-chips { width: 350px; margin: 0; display: flex; flex-wrap: wrap; gap: 0 22px; } .ac2 .ac2-b1-lead .ac2-fd-chips::after { content: ""; order: 1; flex-basis: 100%; } /* 2 色ずつで改行 */ .ac2 .ac2-b1-lead .ac2-fd-chips li:nth-child(n+3) { order: 2; margin-top: 10px; } .ac2 .ac2-b1 .ac2-b1-lead .ac2-fd-chips li { font-size: 12px; line-height: 1.5; letter-spacing: 0.04em; } /* 表示中の色のハイライト: ほかの色を薄くし、表示中の丸に輪を付ける（全色の写真のときは全部そのまま） */ .ac2 .ac2-b1-lead .ac2-fd-chips li::before { transition: box-shadow 0.4s ease, transform 0.4s ease; } .ac2.is-js .ac2-b1.is-in .ac2-b1-lead .ac2-fd-chips li { transition: opacity 0.45s ease, transform 0.6s ease; transition-delay: 0s; } .ac2.is-js .ac2-b1.is-in .ac2-b1-lead.is-pick .ac2-fd-chips li { opacity: 0.35; } .ac2.is-js .ac2-b1.is-in .ac2-b1-lead.is-pick .ac2-fd-chips li.is-on { opacity: 1; } .ac2 .ac2-b1-lead .ac2-fd-chips li.is-on::before { transform: scale(1.15); box-shadow: inset 0 0 0 1px rgba(23, 45, 57, 0.2), 0 0 0 2px #fff, 0 0 0 3px #00cbeb; } /* 03 の脇 2 つ: 上の線を外す。数字（20%）と見出し・本文を横並び */ .ac2 .ac2-b1-side, .ac2 .ac2-fd-g.-design .ac2-b1-side { margin-top: 120px; padding-top: 0; border-top: 0; column-gap: 96px; align-items: start; } .ac2 .ac2-b1-side-note { margin-top: 28px; } .ac2 .ac2-fd-g.-design .ac2-b1-item { display: flex; flex-direction: column; gap: 24px; height: auto; } .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-ims:last-child { display: grid; height: auto; } .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-tx, .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-tx:last-child { display: flex; flex-direction: row; align-items: flex-start; gap: 30px; height: auto; padding-right: 11.2px; } .ac2 .ac2-b1-tx > div { flex: 1 1 0; min-width: 0; } .ac2 .ac2-b1-num { flex: none; display: flex; flex-direction: column; gap: 10px; margin: 0; color: var(--ink); font-family: var(--font); } .ac2 .ac2-b1-num .-cap { font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; } .ac2 .ac2-b1-num .-row { display: flex; align-items: flex-end; } .ac2 .ac2-b1-num b { font-size: 98px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; text-box: trim-both cap alphabetic; } .ac2 .ac2-b1-num .-side { display: flex; flex-direction: column; justify-content: center; gap: 8.18px; } .ac2 .ac2-b1-num .-pct { font-size: 68px; font-weight: 400; line-height: 1; letter-spacing: 0.04em; text-box: trim-both cap alphabetic; } .ac2 .ac2-b1-num .-unit { font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0.04em; } .ac2 .ac2-b1-tx .ac2-fd-h.-sm { margin: 0 0 8px; font-size: 20px; line-height: 1.6; letter-spacing: 0.04em; } .ac2 .ac2-b1-item + .ac2-b1-item .ac2-b1-tx .ac2-fd-h.-sm { line-height: 1.5; } .ac2 .ac2-b1-tx .ac2-fd-p.-sm { font-size: 14px; line-height: 1.5; letter-spacing: 0.03em; } /* 04: 帯の上の余白 80 / 下 80 に写真（720）、見出しは帯の中の左上 */ .ac2 .ac2-b1-guin { height: auto; min-height: 880px; } /* 10/22: 1080 で本文が大きくなると注釈が下で切れていた → 中身に合わせて伸ばす */ .ac2 .ac2-b1-guin > .ac2-fd-label { position: absolute; z-index: 1; left: calc(120px + var(--bleed, 0px)); top: 110px; margin: 0; } .ac2 .ac2-b1-guin-bg { top: 80px; height: 720px; } .ac2 .ac2-b1-guin-tx { top: 268px; bottom: auto; justify-content: flex-start; } @media (min-width: 1080px) { /* 10/22: 文字を流れに戻して、本文が大きくなる 1080 でも枠が伸びる（以前は絶対配置で下が切れた） */ .ac2 .ac2-b1-guin-tx { position: relative; left: auto; top: auto; bottom: auto; margin: 268px 0 96px calc(120px + var(--bleed, 0px)); } } .ac2 .ac2-thus, .ac2 .ac2-vs { margin-top: 96px; padding-top: 0; border-top: 0; } /* 数字: カウントアップ（桁数で幅が揺れる）をやめ、1 桁ずつ下からふわっと立ち上がる（箱の大きさは変わらない） */ .ac2 .ac2-rise i { display: inline-block; font-style: normal; } .ac2.is-js .ac2-rise[data-rv] { opacity: 1; } .ac2.is-js .ac2-rise i { opacity: 0; transform: translateY(0.32em); filter: blur(6px); transition: opacity 0.7s ease, transform 1.1s cubic-bezier(0.16, 0.84, 0.24, 1), filter 0.8s ease; } .ac2.is-js .ac2-rise.is-in i { opacity: 1; transform: none; filter: none; transition-delay: 0.2s; } .ac2.is-js .ac2-rise.is-in i + i { transition-delay: 0.34s; } .ac2.is-js.is-reduced .ac2-rise i { opacity: 1; transform: none; filter: none; transition: none; } @media (prefers-reduced-motion: reduce) { .ac2 .ac2-dz .ac2-b1-hero .ac2-dz-in img.is-on { animation: none; } } @media (max-width: 1079px) { .ac2 .ac2-fd-g, .ac2 .ac2-fd-g.-sound { padding-bottom: 80px; } .ac2 .ac2-fd-g.-sound { padding-top: 64px; } .ac2 .ac2-fd-g.-battery, .ac2 .ac2-fd-g.-misc { padding-bottom: 100px; } .ac2 .ac2-fd-leak, .ac2 .ac2-fd-g.-sound .ac2-fd-leak { margin-top: 36px; } .ac2 .ac2-dz .ac2-b1-hero { margin: 0 -20px; } .ac2 .ac2-dz-ths { position: static; justify-content: flex-end; gap: 6px; margin-top: 10px; } /* SP は写真が小さく製品に重なるので、写真の下に右寄せ */ .ac2 .ac2-dz-th { width: 40px; height: 30px; } .ac2 .ac2-dz-gauge { height: 2px; } .ac2 .ac2-b1 .ac2-b1-lead { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; } .ac2 .ac2-b1-lead > * { flex: none; } .ac2 .ac2-b1-lead .ac2-fd-h { font-size: 18px; } .ac2 .ac2-b1-lead .ac2-fd-p { font-size: 13px; line-height: 1.8; } .ac2 .ac2-b1-lead .ac2-fd-p br { display: none; } .ac2 .ac2-b1 .ac2-b1-lead .ac2-fd-chips { width: auto; margin-top: 4px; } .ac2 .ac2-b1-side, .ac2 .ac2-fd-g.-design .ac2-b1-side { margin-top: 72px; row-gap: 56px; } .ac2 .ac2-b1-side-note { margin-top: -28px; } .ac2 .ac2-fd-g.-design .ac2-b1-item { gap: 20px; } .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-tx, .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-tx:last-child { flex-direction: column; gap: 18px; padding-right: 0; } .ac2 .ac2-b1-tx > div { flex: none; width: 100%; } .ac2 .ac2-b1-num { gap: 8px; } .ac2 .ac2-b1-num .-cap { font-size: 15px; } .ac2 .ac2-b1-num b { font-size: 72px; } .ac2 .ac2-b1-num .-side { gap: 6px; } .ac2 .ac2-b1-num .-pct { font-size: 50px; } .ac2 .ac2-b1-num .-unit { font-size: 12px; } .ac2 .ac2-b1-tx .ac2-fd-h.-sm, .ac2 .ac2-b1-item + .ac2-b1-item .ac2-b1-tx .ac2-fd-h.-sm { font-size: 17px; line-height: 1.6; } .ac2 .ac2-b1-tx .ac2-fd-p.-sm { font-size: 13px; line-height: 1.75; } .ac2 .ac2-b1-guin { height: auto; } .ac2 .ac2-b1-guin > .ac2-fd-label { position: static; padding: 56px 20px 0; } .ac2 .ac2-b1-guin-bg { top: 0; height: auto; } .ac2 .ac2-b1-guin-tx { top: auto; } .ac2 .ac2-thus, .ac2 .ac2-vs { margin-top: 56px; } } /* 10/14 夜: スペックのアイコン一覧（主要 3 つ＋残り 5 つ） 区切りの横線・主要 3 つの水色の輪・太字をやめる。SP も主要 3 つを 1 行目に大きく（残り 5 つは小さく 3 ＋ 2 で中央寄せ） */ @media (min-width: 1080px) { .ac2 .ac2-icons li:not(.-key):not(.ac2-icons-note-sp) { border-top: 0; } .ac2 .ac2-icons li.-key .ac2-icon { box-shadow: 0 10px 24px rgba(23, 45, 57, 0.08); } .ac2 .ac2-icons li.-key p { font-weight: 400; } } @media (max-width: 1079px) { .ac2 .ac2-icons { justify-content: center; row-gap: 6px; } .ac2 .ac2-icons li { width: 33.333%; } .ac2 .ac2-icons li.-key { padding: 4px 4px 10px; gap: 8px; } .ac2 .ac2-icons li.-key .ac2-icon { width: 80px; height: 80px; background: #fff; box-shadow: 0 8px 20px rgba(23, 45, 57, 0.08); } .ac2 .ac2-icons li.-key .ac2-icon > img, .ac2 .ac2-icons li.-key .ac2-icon-sound { scale: 1.2; } .ac2 .ac2-icons li.-key p { font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--ink); } .ac2 .ac2-icons li:not(.-key):not(.ac2-icons-note-sp) .ac2-icon { width: 48px; height: 48px; } .ac2 .ac2-icons li:not(.-key) .ac2-icon > img, .ac2 .ac2-icons li:not(.-key) .ac2-icon-sound { scale: 0.8; } .ac2 .ac2-icons li:not(.-key) .ac2-icon.-hours b { font-size: 16px; } .ac2 .ac2-icons li:not(.-key) .ac2-icon.-hours small { font-size: 6px; } .ac2 .ac2-icons li:not(.-key) p { color: rgba(23, 45, 57, 0.8); } } /* 10/14 夜: ギャラリーの犬の散歩を最後に横長で（区画の直後、段違いのグリッドの右列の続き）。空いた右の枠は在宅ワークを右端まで広げる */ .ac2 .ac2-ph.-s4 { width: 720px; } .ac2 .ac2-scene-wide { position: relative; z-index: 3; width: 640px; height: 420px; margin: -90.5px 0 0 calc(50% + 10px); overflow: hidden; } /* 右の列の最後（ワークアウトの 20px 下・右の列の左端そろえ）。ワークアウトより大きく在宅ワークより小さい横長 */ .ac2 .ac2-scene-wide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; } @media (max-width: 1079px) { .ac2 .ac2-ph.-s4 { width: calc(43% - 20px); } .ac2 .ac2-ph.-s5 { height: 420px; } /* 左下のワークアウトを右へ移した分、屋外での通話を下まで */ .ac2 .ac2-ph.-s2 { left: 57%; top: 610px; width: 43%; height: 240px; } .ac2 .ac2-scene-wide { width: 72%; height: auto; aspect-ratio: 640 / 420; margin: -2px 0 0 auto; } } /* 10/14 夜: 05「最大 32 時間」も 02 の「12mm」と同じ作りに（濃紺・細い数字・文字の高さぴったりの箱・漢字は太字にしない）。 「最大」は数字の左上、「時間」は数字の下端（ベースライン）に揃える */ .ac2 .ac2-fd-stat.-xl.-hours { display: flex; align-items: flex-end; gap: 8px; color: var(--ink); font-family: var(--font); } .ac2 .ac2-fd-stat.-xl.-hours b { font-size: 166px; font-weight: 300; line-height: 1; letter-spacing: -0.014em; font-variant-numeric: proportional-nums; text-box: trim-both cap alphabetic; } .ac2 .ac2-fd-stat.-xl.-hours span.-pre { align-self: flex-start; margin: -4px 0 0; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 0.0375em; } .ac2 .ac2-fd-stat.-xl.-hours span.-unit { font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-box: trim-both cap alphabetic; } @media (max-width: 1079px) { .ac2 .ac2-fd-stat.-xl.-hours { gap: 6px; } .ac2 .ac2-fd-stat.-xl.-hours b { font-size: 88px; } .ac2 .ac2-fd-stat.-xl.-hours span.-pre { margin-top: -2px; font-size: 13px; } .ac2 .ac2-fd-stat.-xl.-hours span.-unit { font-size: 26px; } } /* 10/14 夜: 02 の波紋は振動板の面から前へ出る（ドライバーの画像の手前に描く。奥の光は画像の後ろのまま） */ .ac2 .ac2-fd-wave { z-index: 2; } /* 10/14 夜: SP のアイコン。主要 3 つは絵の見た目の大きさをそろえる（サウンドは小さく、コンパクト・耳は大きく見えていた）。 残り 5 つは画面幅いっぱいに 1 列（文字は小さめ・字間なし） */ @media (max-width: 1079px) { .ac2 .ac2-icons { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); } .ac2 .ac2-icons li.-key .ac2-icon-sound { scale: 1.65; } .ac2 .ac2-icons li.-key .ac2-icon.-compact > img { scale: 1; } .ac2 .ac2-icons li.-key .ac2-icon.-ear > img { scale: 1.05; } .ac2 .ac2-icons li:not(.-key):not(.ac2-icons-note-sp) { width: 20%; padding: 4px 0; gap: 6px; } .ac2 .ac2-icons li:not(.-key):not(.ac2-icons-note-sp) .ac2-icon { width: 46px; height: 46px; } .ac2 .ac2-icons li:not(.-key) p { font-size: 9.5px; line-height: 1.35; letter-spacing: 0; white-space: nowrap; } .ac2 .ac2-icons li.ac2-icons-note-sp { padding-left: 20px !important; padding-right: 20px !important; } } /* 10/14 夜: 6 つのおすすめポイント 01: 写真を寄りにして、耳のイヤホンが分かる大きさに（左の溶けも浅く） 02: この段階から振動板の波紋を出す（02 の詳細と同じ動き・画像の手前） 05: PC は製品を見出しの下に大きく */ .ac2 .ac2-bt.-t1 .ac2-bt-ph { background-size: auto 190%; background-position: 54% 45%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); } .ac2 .ac2-bt.-t2 .ac2-bt-ph { container-type: size; } .ac2 .ac2-bt-wave { position: absolute; inset: 0; margin: auto; width: min(100cqw, calc(100cqh * 1800 / 1628)); height: min(100cqh, calc(100cqw * 1628 / 1800)); pointer-events: none; } /* 画像（contain）と同じ箱 */ .ac2 .ac2-bt-wave i { position: absolute; left: 83%; top: 20%; width: 46%; aspect-ratio: 2.3; border-radius: 50%; border: 1.5px solid rgba(0, 203, 235, 0.6); box-shadow: 0 0 14px rgba(0, 203, 235, 0.35), inset 0 0 10px rgba(0, 203, 235, 0.25); opacity: 0; transform: translate(-50%, -50%) rotate(48deg) scale(0.9); } .ac2 .ac2-bt.-t2.is-in .ac2-bt-wave i { animation: ac2-fd-wave 2.8s cubic-bezier(0.15, 0.55, 0.3, 1) 0.8s infinite; } .ac2 .ac2-bt.-t2.is-in .ac2-bt-wave i:nth-child(2) { animation-delay: 1.73s; } .ac2 .ac2-bt.-t2.is-in .ac2-bt-wave i:nth-child(3) { animation-delay: 2.67s; } .ac2.is-reduced .ac2-bt-wave { display: none; } @media (min-width: 1080px) { .ac2 .ac2-bt.-t5 .ac2-bt-ph { background-size: auto 60%; background-position: 50% calc(100% - 18px); } } @media (max-width: 1079px) { .ac2 .ac2-bt.-t1 .ac2-bt-ph { background-size: auto 200%; background-position: 50% 48%; } .ac2 .ac2-bt-wave i { border-width: 1px; box-shadow: 0 0 8px rgba(0, 203, 235, 0.35); } } /* 10/14 夜 Figma 2 回目: 03 の脇 2 つ（PC）。上 = 写真 2 枚（800）＋文字（400）、下 = 文字（400）＋ブリッジの写真（800×476）。注釈は右寄せ */ @media (min-width: 1080px) { .ac2 .ac2-b1-side, .ac2 .ac2-fd-g.-design .ac2-b1-side { display: flex; flex-direction: column; gap: 96px; } .ac2 .ac2-fd-g.-design .ac2-b1-item { flex-direction: row; align-items: stretch; gap: 0; } .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-ims, .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-ims:last-child { flex: none; width: 800px; display: grid; grid-template-columns: 471.3fr 314.2fr; gap: 14.49px; } .ac2 .ac2-fd-g.-design .ac2-b1-ims .ac2-b1-im { height: 376.81px; } .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-tx, .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-tx:last-child { flex: none; width: 400px; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px; padding: 40px 60px; } .ac2 .ac2-fd-g.-design .ac2-b1-item.-bridge > .ac2-b1-tx { padding: 40px; } .ac2 .ac2-b1-num { align-self: flex-start; } .ac2 .ac2-b1-tx > div { flex: none; } .ac2 .ac2-b1-item + .ac2-b1-item .ac2-b1-tx .ac2-fd-h.-sm { line-height: 1.6; } .ac2 .ac2-fd-g.-design .ac2-b1-item.-bridge > .ac2-b1-im { flex: none; width: 800px; height: 476px; } .ac2 .ac2-fd-g.-design .ac2-b1-item.-bridge > .ac2-b1-im > img.-cut { position: static; inset: auto; width: 474.7px; height: 223.6px; object-fit: contain; } .ac2 .ac2-b1-side-note { align-self: stretch; margin-top: -86px; text-align: right; } } @media (max-width: 1079px) { .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-ims, .ac2 .ac2-fd-g.-design .ac2-b1-item > .ac2-b1-im { order: -1; } /* SP は写真が上・文字が下 */ } /* SP のアイコン下 5 つ: 画面の端まで広げず、中央に寄せる */ @media (max-width: 1079px) { .ac2 .ac2-icons li:not(.-key):not(.ac2-icons-note-sp) { width: 17.5%; min-width: 0; } } /* 10/14 夜: SP のアワードのロゴを大きく（34 → 56px） */ @media (max-width: 1079px) { .ac2 .ac2-awards img { height: 56px; } .ac2 .ac2-awards li { gap: 8px; } } /* 10/14 夜: SP のアワード下の注釈（※1 / ※2）は限りなく小さく */ @media (max-width: 1079px) { .ac2 .ac2-why-note { font-size: 8px; line-height: 1.5; letter-spacing: 0; margin-top: 8px; } } /* 10/14 夜: 行末の「、」は右半分が空白なので、中央揃えだと行が左にずれて見える → 半角分詰めて見た目の中心を合わせる */ .ac2 .ac2-pq { display: inline-block; width: 0.5em; white-space: nowrap; } .ac2 .ac2-nb { white-space: nowrap; } /* 「、」の前で改行させない */ /* 箱は半角、点は全角のまま右へはみ出す（空白の右半分だけ詰める） */ } /* 10/14 夜: SP の 03 サムネイルは中央寄せ */ @media (max-width: 1079px) { .ac2 .ac2-dz-ths { justify-content: center; } } /* 10/14 夜: SP の 01 カード。寄りすぎで顔が下に寄り肩が切れていた → 少し引いて、頭の上に余白・肩まで入れる */ @media (max-width: 1079px) { .ac2 .ac2-bt.-t1 .ac2-bt-ph { background-size: auto 150%; background-position: 56% 36%; } } /* 10/14 夜: SP の主要 3 アイコンを中央に寄せる */ @media (max-width: 1079px) { .ac2 .ac2-icons li.-key { width: 29%; min-width: 0; } } /* 10/14 夜: 01 カードは写真をタイル一面に（左の溶けをやめる）。女性は右側、文字は左の空の上 */ .ac2 .ac2-bt.-t1 .ac2-bt-ph { left: 0; -webkit-mask-image: none; mask-image: none; background-size: auto 125%; background-position: 17% 65%; } @media (max-width: 1079px) { .ac2 .ac2-bt.-t1 .ac2-bt-ph { left: 0; background-size: auto 160%; background-position: 0% 39%; } } /* 10/14 夜: ギャラリー（PC）。左の列（家事・屋外での通話）を下げて、犬の散歩と縦の半分ほど重なる段違いに（屋外での通話は伸ばさない） */ @media (min-width: 1080px) { .ac2 .ac2-collage { height: 1956px; } /* 左の列を下げた分（WebGL は区画の中だけ描く） */ .ac2 .ac2-ph.-s6 { top: 654px; } /* 家事を下から始め、左の 2 枚の下端が犬の散歩の縦の半分あたりに来るように */ .ac2 .ac2-ph.-s5 { top: 1434px; } .ac2 .ac2-scene-wide { margin-top: -230px; } /* 犬の散歩はワークアウトの 20px 下のまま */ } /* =============================================================== 10/19 Figma（SP）: 製品カードの Thus アイコン・「回せます」マーク、アイコン下のギネス訴求 =============================================================== */ .ac2 .ac2-visual-thus { position: absolute; right: 30px; top: 100px; width: 45px; height: 45px; z-index: 3; } .ac2 .ac2-icons li.ac2-icons-gwr:not(.-key):not(.ac2-icons-note-sp) { width: 100%; flex-direction: row; align-items: center; gap: 16px; padding: 18px 10px 0; text-align: left; } .ac2 .ac2-icons-gwr img { flex: none; width: 84px; height: auto; } .ac2 .ac2-icons-gwr > div { flex: 1 1 0; min-width: 0; } .ac2 .ac2-icons li.ac2-icons-gwr:not(.-key) p { font-size: 14px; line-height: 1.6; white-space: normal; } .ac2 .ac2-icons-gwr small { display: block; margin-top: 6px; font-size: 8px; line-height: 1.6; color: rgba(23, 45, 57, 0.72); } @media (max-width: 1079px) { .ac2 .ac2-visual-thus { right: 16px; top: 62px; width: 30px; height: 30px; } .ac2 .ac2-icons li.ac2-icons-gwr:not(.-key):not(.ac2-icons-note-sp) { width: 100%; padding: 14px 20px 2px; gap: 12px; justify-content: flex-start; } .ac2 .ac2-icons-gwr img { width: 64px; } .ac2 .ac2-icons li.ac2-icons-gwr:not(.-key) p { font-size: 12px; line-height: 1.55; letter-spacing: 0; } .ac2 .ac2-icons-gwr small { margin-top: 4px; font-size: 7.5px; } } /* 10/19: おすすめポイント 03「洗練されたデザイン」は SP だと写真に重なるので 2 行に */ .ac2 .ac2-bt-h br.-sp { display: none; } @media (max-width: 1079px) { .ac2 .ac2-bt-h br.-sp { display: inline; } } /* =============================================================== 10/22 /vertical: 文字組みの決まり（ページ全体） =============================================================== */ /* 改行は文節で（PC・SP とも）。JS が文節の区切りに を入れて keep-all（.ac2-phrase-js）。JS が動かない・Segmenter 非対応のときだけ auto-phrase */ .ac2 { word-break: auto-phrase; } .ac2.ac2-phrase-js { word-break: keep-all; overflow-wrap: anywhere; } /* ※記号は 1 本の決まりに: 親の 60%・本文と同じ濃さ・字間を空けない。 テーマの sup { position: relative; top: -.5em } と vertical-align: super が二重に掛かって行の上へ浮いていた → baseline 基準で上げる量をここだけで持つ */ /* 注釈と※記号: 本文の大きさに連動させず、どこでも画面上 8px（視認できる最小）に統一。PC は .ac2-zoom の zoom を割り戻す（--z、SP は 1） ※記号は親の字面の上端に揃える（vertical-align: text-top）。テーマの sup { position: relative; top: -.5em } は打ち消す */ .page-aeroclip-2.ac2 sup { font-size: calc(8px / var(--z, 1)); line-height: 1; vertical-align: text-top; position: static; top: auto; padding: 0; margin: 0 0 0 0.1em; letter-spacing: 0; color: inherit; opacity: 1; } .page-aeroclip-2.ac2 .ac2-why-note, .page-aeroclip-2.ac2 .ac2-cta2-note, .page-aeroclip-2.ac2 .ac2-pts-note, .page-aeroclip-2.ac2 .ac2-fd-note, .page-aeroclip-2.ac2 .ac2-icon-note, .page-aeroclip-2.ac2 .ac2-icons-note-sp, .page-aeroclip-2.ac2 .ac2-feat-note, .page-aeroclip-2.ac2 .ac2-icons li.ac2-icons-gwr small, .page-aeroclip-2.ac2 .ac2-icons li.ac2-icons-note-sp, .page-aeroclip-2.ac2 .ac2-no1-sup, .page-aeroclip-2.ac2 .ac2-why-sup { font-size: calc(8px / var(--z, 1)); line-height: 1.6; letter-spacing: 0; font-weight: 400; } /* PC の級数の下限（画面上の実寸）: 1080 では zoom 0.75 で縮むので、本文 14px・小見出し 16px・ラベル 12px を割り戻した値を下限に持つ 1440 では 本文 15/14px、小見出し 22/18px（本文の 1.2 倍以上） */ @media (min-width: 1080px) { .page-aeroclip-2.ac2 .ac2-fd-p { font-size: max(15px, calc(14px / var(--z, 1))); } .page-aeroclip-2.ac2 .ac2-fd-p.-sm, .page-aeroclip-2.ac2 .ac2-fd-guinness-text .ac2-fd-p, .page-aeroclip-2.ac2 .ac2-b1-guin-tx .ac2-fd-p, .page-aeroclip-2.ac2 .ac2-bt-sub, .page-aeroclip-2.ac2 .ac2-thus-sub, .page-aeroclip-2.ac2 .ac2-vs-lead, .page-aeroclip-2.ac2 .ac2-why-sub, .page-aeroclip-2.ac2 .ac2-cta2-spec dd, .page-aeroclip-2.ac2 .ac2-icons li.ac2-icons-gwr:not(.-key) p, .page-aeroclip-2.ac2 .ac2-buy-lead, .page-aeroclip-2.ac2 .ac2-cta2-lead, .page-aeroclip-2.ac2 .lp-txtLink { font-size: max(14px, calc(14px / var(--z, 1))); } .page-aeroclip-2.ac2 .ac2-concept-p { font-size: max(16px, calc(14px / var(--z, 1))); } .page-aeroclip-2.ac2 .ac2-fd-h { font-size: max(22px, calc(18px / var(--z, 1))); } .page-aeroclip-2.ac2 .ac2-fd-h.-sm, .page-aeroclip-2.ac2 .ac2-bt-h.-sm { font-size: max(18px, calc(17px / var(--z, 1))); } .page-aeroclip-2.ac2 .ac2-icons p, .page-aeroclip-2.ac2 .ac2-colors-label, .page-aeroclip-2.ac2 .ac2-cta2-spec dt, .page-aeroclip-2.ac2 .ac2-fd-chips li, .page-aeroclip-2.ac2 .ac2-cta2-spec dd small, .page-aeroclip-2.ac2 .ac2-awards p { font-size: max(12px, calc(12px / var(--z, 1))); } .page-aeroclip-2.ac2 .ac2-icons li:not(.ac2-icons-gwr) p { font-size: max(13px, calc(12px / var(--z, 1))); } } /* 字間のある見出しの※記号は、字間ぶん前に詰める（「再生 ※」の隙間） */ .page-aeroclip-2.ac2 .ac2-fd-name sup { margin-left: -4.6px; } @media (max-width: 1079px) { .page-aeroclip-2.ac2 .ac2-fd-name sup { margin-left: -1.8px; } } /* =============================================================== 10/22 CRF p.75〜85 の修正（10/29） =============================================================== */ /* KV: キャッチコピーを大きく（PC のみ。SP は今のまま） */ @media (min-width: 1080px) { .page-aeroclip-2.ac2 .ac2-kv-copy { font-size: 40px; letter-spacing: 0.2em; } } /* 選ばれる理由: No.1 は Liberty シリーズ LP の見せ方（月桂樹の内側に 数量シェア※ / No.1 / 罫線 / 完全ワイヤレスイヤホン） */ .ac2 .ac2-why-card.-no1 { justify-content: center; padding: 20px; } .ac2 .ac2-why-card.-no1 .ac2-no1 { width: 100%; height: auto; gap: 2px; justify-content: space-between; } .ac2 .ac2-why-card.-no1 .ac2-no1-laurel { width: 59px; height: 176px; } .ac2 .ac2-why-card.-no1 .ac2-no1-core { position: relative; flex: 1 1 0; width: auto; gap: 0; padding-top: 4px; } .ac2 .ac2-no1-cap { position: absolute; left: 6px; top: 4px; font-size: 17px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; font-feature-settings: "palt" 1; } .page-aeroclip-2.ac2 .ac2-no1-cap .ac2-no1-sup { position: static; display: inline-block; vertical-align: top; margin-left: 2px; } .ac2 .ac2-why-card.-no1 .ac2-no1-num { height: auto; color: #b39457; background: linear-gradient(180deg, #d4bb84 0%, #a8874c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ac2 .ac2-why-card.-no1 .ac2-no1-no { font-size: 86px; margin-right: -14px; } .ac2 .ac2-why-card.-no1 .ac2-no1-one { font-size: 150px; } .ac2 .ac2-no1-cat { align-self: stretch; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(179, 148, 87, 0.7); font-size: 13px; line-height: 1.3; letter-spacing: 0.06em; text-align: center; white-space: nowrap; font-feature-settings: "palt" 1; } @media (max-width: 1079px) { .ac2 .ac2-why-card.-no1 { padding: 6px 8px 2px 0; } .ac2 .ac2-why-card.-no1 .ac2-no1-laurel { width: 30px; height: 90px; } .ac2 .ac2-why-card.-no1 .ac2-no1-core { padding-top: 2px; } .ac2 .ac2-no1-cap { left: 2px; top: 2px; font-size: 11px; letter-spacing: 0; } .ac2 .ac2-why-card.-no1 .ac2-no1-no { font-size: 44px; margin-right: -7px; } .ac2 .ac2-why-card.-no1 .ac2-no1-one { font-size: 76px; } .ac2 .ac2-no1-cat { margin-top: 8px; padding-top: 5px; font-size: 10px; letter-spacing: 0; } } /* 1st CTA: マルチポイント接続のアイコンは絵の重心が左下に寄っていて中心からずれて見える → 重心を円の中心へ（translate は登場の transform と重ねられる） */ .ac2 .ac2-icon.-multi img { translate: 1px -3px; } /* 1st CTA（SP）: ギネスの注釈は購入ボタンの下（製品についてもっと詳しくの下）。PC はアイコン下のまま */ .ac2 .ac2-gwr-note-sp { display: none; } @media (max-width: 1079px) { .ac2 .ac2-icons-gwr small { display: none; } .page-aeroclip-2.ac2 .ac2-gwr-note-sp { display: block; order: 6; align-self: stretch; margin: 0; font-size: 8px; line-height: 1.6; letter-spacing: 0; color: rgba(23, 45, 57, 0.72); text-align: left; } } /* 機能詳細: 見出しがコピー（長文・複数行）になったので行送りを持たせ、番号は 1 行目にそろえる */ .ac2 .ac2-fd-label { align-items: flex-start; } .ac2 .ac2-fd-no { flex: none; white-space: nowrap; } .ac2 .ac2-fd-name { line-height: 1.5; } .ac2 .ac2-fd-g.-call .ac2-b1-guin > .ac2-fd-label .ac2-fd-name { line-height: 1.6; } /* 02: いちばん目立たせるのはコピー → 12mm を一段小さく（11/6 PC はさらに一回り: 120→108 / 18→16 / 40→36） */ .ac2 .ac2-fd-stat.-driver b { font-size: 108px; } .ac2 .ac2-fd-stat.-driver .-cap { font-size: 16px; } .ac2 .ac2-fd-stat.-driver .-unit { font-size: 36px; } .ac2 .ac2-fd-sound .ac2-fd-stat.-driver + .ac2-fd-p { margin-top: 32px; } /* 03: コピーを「約20%」より目立たせる → 数字を小さく、コピーを大きく */ .ac2 .ac2-b1-num .-cap { font-size: 16px; } .ac2 .ac2-b1-num b { font-size: 64px; } .ac2 .ac2-b1-num .-pct { font-size: 40px; } .ac2 .ac2-b1-num .-unit { font-size: 12px; } /* % とコンパクト化の組は数字と同じ高さに収める（上端＝数字の頭、下端＝数字の足） */ .ac2 .ac2-b1-num .-side { align-self: stretch; justify-content: space-between; gap: 0; padding-left: 2px; } .ac2 .ac2-b1-num .-unit { text-box: trim-both cap alphabetic; } .page-aeroclip-2.ac2 .ac2-b1-tx .ac2-fd-h.-sm, .page-aeroclip-2.ac2 .ac2-b1-item + .ac2-b1-item .ac2-b1-tx .ac2-fd-h.-sm { font-size: 21px; line-height: 1.6; letter-spacing: 0.02em; margin-bottom: 14px; white-space: nowrap; } @media (max-width: 1079px) { .ac2 .ac2-fd-stat.-driver b { font-size: 64px; } .ac2 .ac2-fd-stat.-driver .-cap { font-size: 12px; } .ac2 .ac2-fd-stat.-driver .-unit { font-size: 22px; } .ac2 .ac2-fd-sound .ac2-fd-stat.-driver + .ac2-fd-p { margin-top: 20px; } .ac2 .ac2-b1-num .-cap { font-size: 13px; } .ac2 .ac2-b1-num b { font-size: 48px; } .ac2 .ac2-b1-num .-pct { font-size: 30px; } .ac2 .ac2-b1-num .-unit { font-size: 11px; } .page-aeroclip-2.ac2 .ac2-b1-tx .ac2-fd-h.-sm, .page-aeroclip-2.ac2 .ac2-b1-item + .ac2-b1-item .ac2-b1-tx .ac2-fd-h.-sm { font-size: 20px; } } /* 2nd CTA: 1st CTA と同じ最新の CG（3D）。描けたら静止画を隠す */ .ac2 .ac2-cta2-prodwrap { transition: opacity 0.6s; } .ac2 .ac2-cta2-visual:has(.is-ready) .ac2-cta2-prodwrap { opacity: 0; } /* 6つのおすすめポイント: 見出しが長いコピーになったので、写真は見出しの下・横から始める */ .page-aeroclip-2.ac2 .ac2-bt.-t1 .ac2-bt-tx { right: auto; } .page-aeroclip-2.ac2 .ac2-bt.-t1 .ac2-bt-h { white-space: nowrap; } .page-aeroclip-2.ac2 .ac2-bt.-t4 .ac2-bt-h { font-size: 22px; letter-spacing: 0.04em; } @media (min-width: 1080px) { .page-aeroclip-2.ac2 .ac2-bt.-t4 .ac2-bt-ph { left: 52%; } .page-aeroclip-2.ac2 .ac2-bt.-t5 .ac2-bt-ph { background-size: auto 46%; } .page-aeroclip-2.ac2 .ac2-bt.-t3 .ac2-bt-ph { background-position: 50% 28%; } } @media (max-width: 1079px) { .page-aeroclip-2.ac2 .ac2-bt.-t4 .ac2-bt-h { font-size: 15px; letter-spacing: 0.02em; } .page-aeroclip-2.ac2 .ac2-bt.-t2 .ac2-bt-ph { top: 80px; } .page-aeroclip-2.ac2 .ac2-bt.-t4 .ac2-bt-ph { top: 124px; left: 34%; } .page-aeroclip-2.ac2 .ac2-bt.-t3 { background: #eceef1; } .page-aeroclip-2.ac2 .ac2-bento { grid-template-rows: var(--row) var(--row) calc(var(--row) + 48px) var(--row); } .page-aeroclip-2.ac2 .ac2-bt.-t3 .ac2-bt-ph { top: 40px; background-size: 106% auto; background-position: 50% 58%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 20px); mask-image: linear-gradient(180deg, transparent, #000 20px); } /* 11/6 SP: 写真を見出しの下まで上げ、4 色＋ケースが切れずに入る画角に */ .page-aeroclip-2.ac2 .ac2-bt.-t4 .ac2-bt-ph { top: 112px; left: 40%; right: 0; bottom: 0; } .page-aeroclip-2.ac2 .ac2-bt.-t5 .ac2-bt-ph { top: 104px; } } @media (min-width: 1080px) { /* 03（PC）: コピーを 1 行ずつ収める（左右の余白を 40px に） */ .page-aeroclip-2.ac2 .ac2-fd-g.-design .ac2-b1-item.-pair > .ac2-b1-tx { padding: 40px; } /* 04（PC）: 見出しは 4 行のコピー。写真にかからない級数にし、ロゴと本文はその下から */ .page-aeroclip-2.ac2 .ac2-b1-guin > .ac2-fd-label .ac2-fd-name { font-size: 24px; letter-spacing: 0.08em; line-height: 1.6; text-box: none; } .page-aeroclip-2.ac2 .ac2-b1-guin-tx { margin-top: 330px; } } .ac2 .ac2-fd-name br.-pc { display: none; } @media (min-width: 1080px) { .ac2 .ac2-fd-name br.-pc { display: inline; } } /* SP: 6つのおすすめポイント 04 はギネスのロゴを小さくして見出しから離す */ @media (max-width: 1079px) { .page-aeroclip-2.ac2 .ac2-bt.-t4 .ac2-bt-guin { height: 30px; } } /* 11/2 修正: 既存の組みを動かさず足す分 */ @media (min-width: 1080px) { .ac2 .ac2-concept-p.-wide { width: max-content; white-space: nowrap; word-break: keep-all; } } /* 12mm の行の右にハイレゾ・LDAC */ .ac2 .ac2-fd-sound-text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; } .ac2 .ac2-fd-sound-text > * { grid-column: 1 / -1; } .ac2 .ac2-fd-sound-text > .ac2-fd-stat.-driver { grid-column: 1; grid-row: 1; } .ac2 .ac2-fd-sound .ac2-fd-sound-text > .ac2-fd-badges { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; } /* 約 は数字の左下 */ .ac2 .ac2-b1-num .-pre { align-self: flex-end; margin-right: 4px; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; text-box: trim-both cap alphabetic; } /* Thus の見出し */ .ac2 .ac2-thus-title { grid-column: 1 / -1; margin: 0 0 48px; font-size: 30px; line-height: 1.5; letter-spacing: 0.06em; } /* 2nd CTA: ハイレゾの下に Thus（1st CTA と同じ並び） */ .ac2 .ac2-cta2-thus { position: absolute; right: 24px; top: 94px; width: 45px; height: 45px; z-index: 3; } /* おすすめポイント 04: Thus ロゴ。PC はギネスロゴ（高さ 92px・幅 57.5px）の右に並べる（11/6）。SP は下の media で位置を上書き */ .ac2 .ac2-bt-thus { display: block; position: absolute; left: 106px; bottom: 26px; width: 60px; height: 60px; } @media (max-width: 1079px) { .ac2 .ac2-fd-sound-text { display: contents; } .ac2 .ac2-fd-sound-text > .ac2-fd-stat.-driver { grid-column: 3; grid-row: 2; align-self: start; } .ac2 .ac2-fd-sound .ac2-fd-sound-text > .ac2-fd-badges { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; margin: 0 0 8px; } .ac2 .ac2-fd-sound .ac2-fd-badges img { height: 30px; } .ac2 .ac2-fd-sound .ac2-fd-badges img + img { height: 15px; } .ac2 .ac2-fd-sound .ac2-fd-driver { grid-row: 1 / span 2; } .ac2 .ac2-b1-num .-pre { margin-right: 3px; font-size: 13px; } .ac2 .ac2-thus-title { margin: 0; font-size: 21px; } .ac2 .ac2-cta2-thus { right: 12px; top: 58px; width: 30px; height: 30px; } .page-aeroclip-2.ac2 .ac2-bt.-t4 .ac2-bt-ph { display: none; } .ac2 .ac2-bt-thus { display: block; position: absolute; left: 44px; bottom: 8px; width: 30px; height: 30px; } } /* 11/2 修正: No.1 の「1」の上端が切れないよう、グラデーションの箱を字の上まで広げる（line-height 0.7 だと箱が字より低い） */ .ac2 .ac2-why-card.-no1 .ac2-no1-num { padding-top: 28px; margin-top: -28px; } /* アワード: 列の間とロゴ〜文字の間を広げる。右の余白ぶんを使うので入れ物の右端までは出ない */ @media (min-width: 1080px) { .ac2 .ac2-why-card.-awards { padding-right: 0; } /* 狭い PC は文字が相対的に大きくなる（12px / z）ので、そのぶん間を詰めて右へ出さない */ .ac2 .ac2-awards { width: 100%; gap: min(48px, calc(48px - 72px * (1 / var(--z, 1) - 1))); } .ac2 .ac2-awards li { gap: min(16px, calc(16px - 18px * (1 / var(--z, 1) - 1))); } } @media (max-width: 1079px) { .ac2 .ac2-why-card.-no1 .ac2-no1-num { padding-top: 14px; margin-top: -14px; } .ac2 .ac2-awards { margin-top: 16px; } } /* 11/2 修正: コンセプトは右列 3 項目・左列 2 項目。左列は中央に寄せて互い違いにする */ @media (min-width: 1080px) { .ac2 .ac2-concept { height: 1420px; } .ac2 .ac2-concept-col.-l { padding: 0; justify-content: center; } .ac2 .ac2-concept-col.-r { padding: 40px 0; } .ac2 .ac2-concept-col.-r .ac2-concept-item { height: 440px; padding-top: 60px; padding-bottom: 60px; } .ac2 .ac2-concept-h.-wide { width: max-content; white-space: nowrap; word-break: keep-all; } } @media (max-width: 1079px) { .ac2 .ac2-concept { height: auto; } .ac2 .ac2-concept-col.-l { padding-top: 0; padding-bottom: 0; align-self: stretch; justify-content: center; } .ac2 .ac2-concept-col.-r { padding-top: 0; padding-bottom: 0; } } /* 11/4 修正 */ .ac2 .ac2-icons-gwr br.-sp { display: none; } @media (max-width: 1079px) { .ac2 .ac2-icons-gwr br.-sp { display: inline; } } /* アワード: 3 枠とも製品名が 5〜6 行になったので PC の間を詰めて枠内に収める */ @media (min-width: 1080px) { .ac2 .ac2-awards { gap: 24px; justify-content: space-between; } .ac2 .ac2-awards li { gap: 10px; } } @media (min-width: 1080px) and (max-width: 1279px) { .ac2 .ac2-awards { gap: 16px; } .ac2 .ac2-awards li { gap: 6px; } .ac2 .ac2-awards img { height: 56px; } } /* 製品カード: Thus の下に VGP 金賞（Hi-Res・Thus と同じ幅で積む） */ .ac2 .ac2-visual-vgp { position: absolute; right: 30px; top: 155px; width: 45px; height: auto; z-index: 3; } .ac2 .ac2-cta2-vgp { position: absolute; right: 24px; top: 149px; width: 45px; height: auto; z-index: 3; } /* デザイン: カラー名を押すとその色の写真へ（丸ごと押せる） */ .ac2 .ac2-fd-chips li { position: relative; } .ac2 .ac2-fd-chip { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; } .ac2 .ac2-fd-chip::after { content: ""; position: absolute; inset: -5px -8px; } .ac2 .ac2-fd-chip:focus-visible { outline: 2px solid #00cbeb; outline-offset: 4px; } @media (hover: hover) { .ac2 .ac2-b1-lead .ac2-fd-chips li:hover::before { transform: scale(1.15); } } @media (max-width: 1079px) { .ac2 .ac2-visual-vgp { right: 16px; top: 98px; width: 30px; } .ac2 .ac2-cta2-vgp { right: 12px; top: 94px; width: 30px; } /* 1st CTA: ギネスの行をロゴと文のまとまりごと中央へ */ .ac2 .ac2-icons li.ac2-icons-gwr:not(.-key):not(.ac2-icons-note-sp) { justify-content: center; } .ac2 .ac2-icons-gwr > div { flex: 0 1 auto; } /* おすすめポイント 04: ギネスのロゴを視認できる大きさに。Thus はその右へ */ .page-aeroclip-2.ac2 .ac2-bt.-t4 .ac2-bt-guin { height: 46px; bottom: 8px; } .ac2 .ac2-bt-thus { left: 48px; } } /* 11/9 SP の最終調整: KV は人物を引きに、おすすめ 01 は人物を大きく、シーン写真は上の空きを切って縦を詰める */ @media (max-width: 1079px) { .ac2 .ac2-kv-bg { background: linear-gradient(90deg, #b2d0dc 0%, #a7c7d3 22%, #a4c4d0 44%, #a2c3d2 65%, #a3c4d5 100%); } .ac2 .ac2-kv-bg img { left: calc(50% - 678px); top: auto; bottom: 13px; width: 1328px; height: auto; aspect-ratio: 4800 / 2073; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 90%, transparent 100%); } .ac2 .ac2-bt.-t1 .ac2-bt-ph { background-size: auto 185%; background-position: 12% 68%; } .ac2 .ac2-collage { height: 750px; } .ac2 .ac2-ph.-s5 { height: 290px; --ac2-crop-z: 1.448; --ac2-crop-x: 0.72; --ac2-crop-y: 0.435; } .ac2 .ac2-ph.-s4 { height: 195px; --ac2-crop-z: 1.333; --ac2-crop-x: 0.5; --ac2-crop-y: 0.6; } .ac2 .ac2-ph.-s2 { top: 545px; height: 175px; --ac2-crop-z: 1.371; --ac2-crop-x: 0.72; --ac2-crop-y: 0.457; } .ac2 .ac2-ph.-s2 img { object-position: 72% 50%; } .ac2 .ac2-ph.-s5 img, .ac2 .ac2-ph.-s4 img, .ac2 .ac2-ph.-s2 img { transform: scale(var(--ac2-crop-z)); transform-origin: calc(var(--ac2-crop-x) * 100%) calc(var(--ac2-crop-y) * 100%); } }