@charset "utf-8"; /* * あとづけ屋 GT スクロール演出 v0.3.0 (DRAFT / 商品34852限定) * * 配色は3系統だけ。黒・濃グレー・白（モノクローム）＋ * アクセント2色 #2ee6ff（シアン）/ #12d6c0（ティール）。他の色は足さない。 * * 動かすのは transform / opacity / filter / mix-blend-mode / * stroke-dashoffset / offset-distance だけ。 * width / height / top / left / margin は一切アニメーションさせない（CLS対策）。 * * ⚠️ 最初から隠さない。隠すのは に .gt-fx-ready が付いたときだけ。 * .gt-fx-ready は gt-fx.js が GSAP と ScrollTrigger の両方を確認できたときにのみ付く。 * つまり JavaScript が動かない環境では全部そのまま読める。 * * 注意: 子テーマ storefront-child の css/pc_w.css と css/sp_w.css に * `ul, ol { margin:0 !important; padding:0 !important }` がある。 * そのため一覧は ul/li ではなく div[role="list"] で組んでいる。 */ .gt-fx { --gt-bk: #000000; --gt-bk2: #0a0a0a; --gt-gy: #141414; --gt-gy2: #1c1c1c; --gt-fg: #ffffff; --gt-fg-dim: rgba(255, 255, 255, 0.72); --gt-line: rgba(255, 255, 255, 0.18); --gt-cyan: #2ee6ff; --gt-teal: #12d6c0; --gt-r: 2px; --gt-shift: 26px; position: relative; isolation: isolate; margin: 48px 0; padding: 0; background: var(--gt-bk); color: var(--gt-fg); font-family: inherit; line-height: 1.75; } .gt-fx *, .gt-fx *::before, .gt-fx *::after { box-sizing: border-box; } /* テーマの見出し色・下線に負けないよう明示する。余白は個別クラスに任せる。 */ .gt-fx h2, .gt-fx h3 { color: var(--gt-fg) !important; border: 0 !important; font-weight: 700; letter-spacing: 0.02em; } .gt-fx p, .gt-fx span, .gt-fx strong { color: var(--gt-fg-dim); } .gt-fx strong { color: var(--gt-cyan); font-weight: 700; } /* ============================================================ セクションの器 ============================================================ */ .gt-fx .gt-sec { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: 64px 20px; background: var(--gt-bk); contain: layout paint; } .gt-fx .gt-sec + .gt-sec { border-top: 1px solid var(--gt-line); } .gt-fx .gt-inner { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; } /* ============================================================ 幾何学レイヤー（装飾のみ・領域は取らない） data-active="grid|diagonal|radial|hex" の切替だけで模様が変わる。 切替に使うのは opacity / transform / mix-blend-mode だけ。 ============================================================ */ .gt-fx .gt-geo { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; } .gt-fx .gt-geo-p { position: absolute; top: -25%; right: -25%; bottom: -25%; left: -25%; display: block; opacity: 0; mix-blend-mode: screen; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } .gt-fx .gt-geo-p[data-pat="grid"] { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.085) 0 1px, rgba(255, 255, 255, 0) 1px 44px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.085) 0 1px, rgba(255, 255, 255, 0) 1px 44px); } .gt-fx .gt-geo-p[data-pat="diagonal"] { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.075) 0 1px, rgba(255, 255, 255, 0) 1px 26px), repeating-linear-gradient(-45deg, rgba(46, 230, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 52px); } .gt-fx .gt-geo-p[data-pat="radial"] { background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.075) 0 1px, rgba(255, 255, 255, 0) 1px 38px); } .gt-fx .gt-geo-p[data-pat="hex"] { background-image: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px 34px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px 34px), repeating-linear-gradient(0deg, rgba(18, 214, 192, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 34px); } .gt-fx .gt-geo[data-active="grid"] .gt-geo-p[data-pat="grid"], .gt-fx .gt-geo[data-active="diagonal"] .gt-geo-p[data-pat="diagonal"], .gt-fx .gt-geo[data-active="radial"] .gt-geo-p[data-pat="radial"], .gt-fx .gt-geo[data-active="hex"] .gt-geo-p[data-pat="hex"] { opacity: 1; } /* 出ていない模様は、次に出るときの助走として少しだけずらしておく */ .gt-fx .gt-geo:not([data-active="grid"]) .gt-geo-p[data-pat="grid"] { transform: scale(1.06); } .gt-fx .gt-geo:not([data-active="diagonal"]) .gt-geo-p[data-pat="diagonal"] { transform: rotate(4deg) scale(1.08); } .gt-fx .gt-geo:not([data-active="radial"]) .gt-geo-p[data-pat="radial"] { transform: scale(1.16); } .gt-fx .gt-geo:not([data-active="hex"]) .gt-geo-p[data-pat="hex"] { transform: rotate(-3deg) scale(1.08); } /* 常時ループ（ゆっくり回転・拡大）。装飾レイヤーだけに当てる。 */ .gt-fx .gt-geo[data-loop="1"] .gt-geo-p { animation: gt-drift 48s linear infinite; } @keyframes gt-drift { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } } /* ============================================================ 四隅のHUDブラケット ============================================================ */ .gt-fx .gt-hud { position: absolute; z-index: 1; top: 14px; right: 14px; bottom: 14px; left: 14px; display: block; pointer-events: none; } .gt-fx .gt-hud i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--gt-cyan); opacity: 0.55; } .gt-fx .gt-hud i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; } .gt-fx .gt-hud i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; } .gt-fx .gt-hud i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; } .gt-fx .gt-hud i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; } /* ============================================================ シアンの一瞬のフラッシュ 光過敏性発作への配慮: 1セクションにつき1回だけ・不透明度0.25以下・ 0.4秒以上かけて減衰。連続点滅はさせない。 ============================================================ */ .gt-fx .gt-flash { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; display: block; background: var(--gt-cyan); opacity: 0; pointer-events: none; mix-blend-mode: screen; } .gt-fx .gt-flash.is-flash { animation: gt-flash 0.9s ease-out 1 both; } @keyframes gt-flash { 0% { opacity: 0.25; } 100% { opacity: 0; } } /* ============================================================ 1. ヒーロー ============================================================ */ .gt-fx .gt-sec-hero { min-height: 300px; background: linear-gradient(180deg, var(--gt-bk) 0%, var(--gt-gy) 100%); text-align: center; } .gt-fx .gt-eyebrow { min-height: 20px; margin: 0 0 14px; padding: 0; color: var(--gt-cyan); font-size: 12px; font-weight: 700; letter-spacing: 0.26em; } .gt-fx .gt-title { margin: 0; padding: 0; font-size: clamp(22px, 4.4vw, 38px); line-height: 1.4; } .gt-fx .gt-lead { min-height: 28px; margin: 16px 0 0; padding: 0; font-size: clamp(15px, 2.2vw, 18px); } /* 薄い発光ノード（強い明滅にはしない） */ .gt-fx .gt-dots { position: relative; display: block; min-height: 26px; margin: 22px 0 0; text-align: center; } .gt-fx .gt-dots i { display: inline-block; width: 6px; height: 6px; margin: 0 7px; border-radius: var(--gt-r); background: var(--gt-cyan); opacity: 0.35; animation: gt-blink 4.2s ease-in-out infinite; } .gt-fx .gt-dots i:nth-child(2) { animation-delay: 0.7s; background: var(--gt-teal); } .gt-fx .gt-dots i:nth-child(3) { animation-delay: 1.4s; } .gt-fx .gt-dots i:nth-child(4) { animation-delay: 2.1s; background: var(--gt-teal); } .gt-fx .gt-dots i:nth-child(5) { animation-delay: 2.8s; } @keyframes gt-blink { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.85; } } /* 軽いグリッチ。出てすぐ静止する（1回だけ）。 */ .gt-fx-ready .gt-fx .gt-title.is-glitch { animation: gt-glitch 0.42s steps(2, end) 1 both; } @keyframes gt-glitch { 0% { transform: translate3d(-2px, 0, 0); filter: blur(1px); } 25% { transform: translate3d(3px, 0, 0); filter: none; } 50% { transform: translate3d(-1px, 0, 0); filter: blur(0.6px); } 75% { transform: translate3d(2px, 0, 0); filter: none; } 100% { transform: none; filter: none; } } /* ============================================================ 2. 特徴4つ（接続線とノード） ============================================================ */ .gt-fx .gt-sec-feat { min-height: 420px; background: var(--gt-bk2); } .gt-fx .gt-wire { position: relative; width: 640px; max-width: 100%; height: 36px; margin: 0 auto 26px; padding: 0; } .gt-fx .gt-wire-svg { display: block; width: 100%; height: 36px; overflow: visible; } .gt-fx .gt-wire-path { fill: none; stroke: var(--gt-cyan); stroke-width: 1; opacity: 0.7; } .gt-fx .gt-wire-node { fill: rgba(255, 255, 255, 0.28); transition: fill 0.4s ease; } .gt-fx .gt-wire.is-tied .gt-wire-node { fill: var(--gt-cyan); } /* 線上を流れる光点。offset-path は対応環境だけで動き、非対応なら静止する。 */ .gt-fx .gt-pulse, .gt-fx .gt-cta-pulse { position: absolute; top: 0; left: 0; display: block; width: 7px; height: 7px; border-radius: var(--gt-r); background: var(--gt-cyan); opacity: 0; pointer-events: none; filter: drop-shadow(0 0 6px var(--gt-cyan)); } @supports (offset-path: path("M 0 18 H 640")) { .gt-fx .gt-pulse { offset-path: path("M 0 18 H 640"); offset-distance: 0%; offset-rotate: 0deg; opacity: 0.9; animation: gt-run 3.6s linear infinite; } .gt-fx .gt-cta-pulse { offset-path: path("M 20 20 H 300 V 120 H 20 V 20"); offset-distance: 0%; offset-rotate: 0deg; opacity: 0.9; animation: gt-run 5.4s linear infinite; } } @keyframes gt-run { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } .gt-fx .gt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .gt-fx .gt-card { position: relative; overflow: hidden; min-height: 158px; margin: 0; padding: 24px 20px 22px; border: 1px solid var(--gt-line); border-radius: var(--gt-r); background: var(--gt-gy); list-style: none; } /* ノード（点灯前は暗く、点灯で光る） */ .gt-fx .gt-card .gt-node { position: absolute; top: 30px; left: 20px; display: block; width: 8px; height: 8px; border-radius: var(--gt-r); background: rgba(255, 255, 255, 0.22); transition: background 0.35s ease, filter 0.35s ease; } .gt-fx .gt-card.is-lit .gt-node { background: var(--gt-cyan); filter: drop-shadow(0 0 7px var(--gt-cyan)); } /* 細い線状のきらめき（登場時に1回だけ通る） */ .gt-fx .gt-card .gt-shine { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 56%); opacity: 0; pointer-events: none; mix-blend-mode: screen; transform: translate3d(-120%, 0, 0); } .gt-fx-ready .gt-fx .gt-card.is-in .gt-shine { animation: gt-shine 0.9s ease-out 1 both; } @keyframes gt-shine { 0% { opacity: 0; transform: translate3d(-120%, 0, 0); } 18% { opacity: 0.9; } 100% { opacity: 0; transform: translate3d(120%, 0, 0); } } /* カード内の弱いシアンフラッシュ（不透明度0.2・0.5秒で減衰・1回だけ） */ .gt-fx .gt-card .gt-card-flash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; background: var(--gt-cyan); opacity: 0; pointer-events: none; mix-blend-mode: screen; } .gt-fx-ready .gt-fx .gt-card.is-in .gt-card-flash { animation: gt-card-flash 0.5s ease-out 1 both; } @keyframes gt-card-flash { 0% { opacity: 0.2; } 100% { opacity: 0; } } .gt-fx .gt-card-title { position: relative; margin: 0 0 10px; padding: 0 0 0 20px; font-size: 16px; line-height: 1.6; } .gt-fx .gt-card-text { margin: 0; padding: 0 0 0 20px; font-size: 14px; } /* ============================================================ 3. 数字（テレメトリ） ============================================================ */ .gt-fx .gt-sec-num { min-height: 280px; background: var(--gt-bk); } .gt-fx .gt-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 26px 0; border-top: 1px solid var(--gt-line); border-bottom: 1px solid var(--gt-line); list-style: none; } .gt-fx .gt-num { min-height: 96px; margin: 0; padding: 0; text-align: center; list-style: none; } .gt-fx .gt-num-value { display: block; color: var(--gt-cyan); font-size: clamp(22px, 4.4vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .gt-fx .gt-num-unit { color: var(--gt-teal); font-size: 0.62em; font-weight: 700; letter-spacing: 0.04em; } .gt-fx .gt-num-label { display: block; min-height: 18px; margin-top: 8px; font-size: 12px; letter-spacing: 0.08em; } .gt-fx .gt-telemetry { min-height: 18px; margin: 18px 0 0; padding: 0; font-size: 11px; letter-spacing: 0.18em; text-align: center; } /* ============================================================ 4. 社会的証明（中身がある場合だけ出力される） ============================================================ */ .gt-fx .gt-sec-proof { min-height: 220px; background: var(--gt-gy2); } .gt-fx .gt-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .gt-fx .gt-proof-card { min-height: 120px; margin: 0; padding: 20px; border: 1px solid var(--gt-line); border-radius: var(--gt-r); background: var(--gt-gy); list-style: none; filter: grayscale(1); transition: filter 0.7s ease; } .gt-fx .gt-proof-card.is-in { filter: grayscale(0); } /* ============================================================ 5. 最終CTA ============================================================ */ .gt-fx .gt-sec-cta { min-height: 400px; background: linear-gradient(180deg, var(--gt-gy) 0%, var(--gt-bk) 100%); text-align: center; } .gt-fx .gt-link { position: relative; width: 320px; max-width: 100%; height: 140px; margin: 0 auto 24px; padding: 0; } .gt-fx .gt-link-svg { display: block; width: 100%; height: 140px; overflow: visible; } .gt-fx .gt-link-path { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; } /* 結ばれたノードだけ色を残す。線と背景はモノクロのまま。 */ .gt-fx .gt-link-node { fill: rgba(255, 255, 255, 0.3); transition: fill 0.5s ease; } .gt-fx .gt-link.is-tied .gt-link-node { fill: var(--gt-cyan); } .gt-fx .gt-link.is-tied .gt-link-node.gt-link-node-b { fill: var(--gt-teal); } .gt-fx .gt-cta-title { margin: 0 0 10px; padding: 0; font-size: clamp(18px, 3.2vw, 26px); } .gt-fx .gt-cta-text { min-height: 26px; margin: 0 0 22px; padding: 0; font-size: 15px; } .gt-fx .gt-cta-btn-wrap { min-height: 54px; margin: 0; padding: 0; } .gt-fx .gt-btn { display: inline-block; min-width: 268px; padding: 16px 28px; border: 1px solid var(--gt-cyan); border-radius: var(--gt-r); background: var(--gt-cyan); color: #000000 !important; font-size: 16px; font-weight: 700; text-decoration: none; filter: drop-shadow(0 0 10px rgba(46, 230, 255, 0.35)); transition: transform 0.22s ease, filter 0.22s ease; } .gt-fx .gt-btn:hover, .gt-fx .gt-btn:focus { color: #000000 !important; transform: translate3d(0, -2px, 0); filter: drop-shadow(0 0 20px rgba(46, 230, 255, 0.85)) brightness(1.06); } .gt-fx .gt-btn:focus-visible { outline: 2px solid var(--gt-fg); outline-offset: 3px; } .gt-fx .gt-note { min-height: 20px; margin: 16px 0 0; padding: 0; font-size: 12px; } /* ============================================================ 商品ギャラリー画像（.summary の外なので演出してよい） ⚠️ opacity は絶対に触らない（LCP保護 / fetchpriority=high の画像）。 暗い状態から発光へは filter の遷移だけで行う。 ============================================================ */ .gt-fx-ready .woocommerce-product-gallery__image img.wp-post-image { transition: filter 1.2s ease; } .gt-fx-ready .woocommerce-product-gallery__image img.wp-post-image.gt-img-dim { filter: grayscale(1) brightness(0.7); } .gt-fx-ready .woocommerce-product-gallery__image img.wp-post-image.gt-img-lit { filter: grayscale(0) brightness(1) drop-shadow(0 0 14px rgba(46, 230, 255, 0.4)); } /* ============================================================ 演出本体 に .gt-fx-ready が付いたときだけ隠す。 .gt-fx-ready は GSAP と ScrollTrigger の両方が使えたときにしか付かない。 ============================================================ */ .gt-fx-ready .gt-fx [data-anim] { opacity: 0; transition: opacity 0.62s ease, transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.62s ease; } .gt-fx-ready .gt-fx [data-anim="up"], .gt-fx-ready .gt-fx [data-anim="card"] { transform: translate3d(0, var(--gt-shift), 0); } .gt-fx-ready .gt-fx [data-anim="zoom"] { transform: scale(0.96); } .gt-fx-ready .gt-fx [data-anim="slide"] { transform: translate3d(46px, 0, 0); } .gt-fx-ready .gt-fx [data-anim="title"] { transform: scale(0.95); filter: blur(6px); } .gt-fx-ready .gt-fx [data-anim="fade"] { transform: none; } .gt-fx-ready .gt-fx [data-anim].is-in { opacity: 1; transform: none; filter: none; } /* 幾何学レイヤーは装飾なので隠さない */ .gt-fx-ready .gt-fx [data-anim="geo"] { opacity: 1; } /* ============================================================ モバイル（768px以下）は軽くする 幾何学レイヤーは1枚だけ・信号パルスと常時ループは止める ============================================================ */ @media (max-width: 768px) { .gt-fx { --gt-shift: 14px; } .gt-fx .gt-sec { padding: 44px 16px; } .gt-fx .gt-geo-p { display: none; } .gt-fx .gt-geo[data-active="grid"] .gt-geo-p[data-pat="grid"], .gt-fx .gt-geo[data-active="diagonal"] .gt-geo-p[data-pat="diagonal"], .gt-fx .gt-geo[data-active="radial"] .gt-geo-p[data-pat="radial"], .gt-fx .gt-geo[data-active="hex"] .gt-geo-p[data-pat="hex"] { display: block; } .gt-fx .gt-geo[data-loop="1"] .gt-geo-p { animation: none; } .gt-fx .gt-pulse, .gt-fx .gt-cta-pulse { display: none; } .gt-fx .gt-dots i { animation: none; opacity: 0.45; } .gt-fx .gt-cards { grid-template-columns: minmax(0, 1fr); } .gt-fx .gt-card { min-height: 0; } .gt-fx .gt-nums { grid-template-columns: minmax(0, 1fr); gap: 22px; } .gt-fx .gt-num { min-height: 0; } .gt-fx .gt-btn { min-width: 0; width: 100%; } .gt-fx-ready .gt-fx [data-anim] { transition-duration: 0.4s; } .gt-fx-ready .gt-fx [data-anim="title"] { transform: scale(0.98); filter: blur(3px); } .gt-fx-ready .gt-fx .gt-title.is-glitch { animation: none; } } /* ============================================================ 動きを減らす設定の人には、すべて静止して見せる ============================================================ */ @media (prefers-reduced-motion: reduce) { .gt-fx [data-anim], .gt-fx [data-anim].is-in, .gt-fx-ready .gt-fx [data-anim], .gt-fx-ready .gt-fx [data-anim].is-in { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; transition-delay: 0s !important; } .gt-fx, .gt-fx *, .gt-fx *::before, .gt-fx *::after, .gt-fx-ready .woocommerce-product-gallery__image img.wp-post-image { animation: none !important; transition: none !important; } .gt-fx .gt-pulse, .gt-fx .gt-cta-pulse, .gt-fx .gt-flash, .gt-fx .gt-card .gt-shine, .gt-fx .gt-card .gt-card-flash { opacity: 0 !important; } .gt-fx .gt-proof-card, .gt-fx-ready .woocommerce-product-gallery__image img.wp-post-image, .gt-fx-ready .woocommerce-product-gallery__image img.wp-post-image.gt-img-dim { filter: none !important; } .gt-fx .gt-btn:hover, .gt-fx .gt-btn:focus { transform: none !important; } }