/* style[0] from index */ :root{ --bg:#f7f9fc; --chrome:#fff; --line:#e6eaf0; --text:#0b1220; --muted:#4b637a; --btn:#1f88ff; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif} .bar{display:flex;align-items:center;justify-content:space-between; padding:12px 16px;background:var(--chrome);border-bottom:1px solid var(--line)} .brand{font-weight:700} .navlinks a{margin-left:12px;color:var(--text);text-decoration:none; padding:8px 10px;border-radius:10px;border:1px solid transparent} .navlinks a:hover{background:#f0f4fa;border-color:var(--line)} .hero{display:grid;gap:20px;grid-template-columns:1.2fr 1fr;padding:28px 16px} .hero p{color:#111;margin:0 0 12px} @media (max-width:960px){.hero{grid-template-columns:1fr}} .btn{padding:.7rem 1rem;border-radius:.75rem;border:1px solid rgba(31,136,255,.15); background:linear-gradient(180deg,#3ba1ff,#1f88ff);color:#fff;cursor:pointer; box-shadow:0 6px 14px rgba(31,136,255,.25), inset 0 1px rgba(255,255,255,.15); font-weight:700;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease} .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(31,136,255,.28)} .ghost{padding:.7rem 1rem;border-radius:.75rem;border:1px solid var(--line);background:#fff;color:#0b1220;text-decoration:none} #mainEmbedFrame{ width:100%; height:70vh; border:1px solid var(--line); border-radius:12px; background:#fff } .right-pane{position:fixed;top:0;right:0;bottom:0;display:none;flex-direction:column;z-index:1000; width:min(720px,48vw);background:#0b0f14;border-left:1px solid #1d2230;box-shadow:-20px 0 60px rgba(0,0,0,.35)} .right-pane.show{display:flex} .rp-head{display:flex;align-items:center;justify-content:space-between; padding:10px 12px;background:#0f141d;border-bottom:1px solid #1d2230;color:#cdd6e0;font-weight:600} .iconbtn{border:1px solid #1d2230;background:#10151d;color:#e6ecf2;border-radius:10px;padding:6px 10px;cursor:pointer} iframe#mainFrame{flex:1 1 auto;width:100%;border:0;background:transparent} .loader{position:absolute;left:0;right:0;top:42px;bottom:0;display:none;align-items:center;justify-content:center;color:#cdd6e0} .right-pane.loading .loader{display:flex} :root{ --right-pane-w: 460px; } .right-pane{ width: var(--right-pane-w) !important; max-width: 100vw; } @media (max-width:1100px){ :root{ --right-pane-w: clamp(380px, 42vw, 480px); } } /* style[1] from index */ html[data-main="dom"] #mainEmbedFrame{display:none!important} html[data-main="iframe"] #mainRoot{display:none!important} /* style[2] from index */ #mainRoot #toMainBtn{display:none!important} /* style[3] from index */ /* === KMV: Fixed Top Cluster (header + hero) =================================== */ :root{ --hero-h: 360px; } html,body{ background: transparent !important; } .kmv-bg-fixed{ position:fixed; inset:0; z-index:-1; background: url('/meta/img/image_02.jpg') center / cover no-repeat fixed; filter: saturate(1.03) contrast(1.03) brightness(1.02); } .kmv-bg-fixed::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(90vh 60vh at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00)); } /* 固定クラスター（ヘッダー＋ヒーロー） */ .kmv-top-fixed{ position: fixed; left: 12px; right: 12px; top: 12px; z-index: 100; pointer-events: none; /* 中身だけクリック可にするため、子で上書き */ } .kmv-top-fixed > *{ pointer-events: auto; } /* ヘッダー白ガラス（構造はそのまま） */ header.bar{ background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.58); border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.22); color:#0e1216; margin: 0 0 8px 0; } /* ナビのピル（黒地に白文字） */ header.bar a{ color:#fff !important; background: rgba(0,0,0,.9); border: 1px solid rgba(0,0,0,.92); border-radius: 12px; padding: 6px 10px; text-decoration:none; } header.bar a:hover{ filter: brightness(1.06); } /* ヒーロースロット（ヘッダー直下。固定クラスター内） */ .kmv-hero-slot{ height: var(--hero-h); border: 1px solid #cfd8e3; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.55); box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5); display:grid; place-items:center; } .kmv-hero-slot .placeholder{ width: min(100%, 1080px); height: 100%; display:grid; place-items:center; color:#1b2736cc; font-weight:700; letter-spacing:.02em; background: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 6px, transparent 6px 12px); } .kmv-hero-slot .placeholder > div{ background: rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:10px 14px; } /* ============================================================================== */ /* style[4] from index */ /* === KMV: Glass & Pills refinement v3 ======================================== */ /* Background stays the same (added earlier) */ :root{ --hero-h: 360px; --kmv-ico: 16px; } /* White glass tone unified */ header.bar{ background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58)) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.65); border-radius: 14px; box-shadow: 0 12px 32px rgba(3,20,40,.18), inset 0 0 0 1px rgba(255,255,255,.14); color:#0e1216; margin: 0 0 10px 0; } /* Hero slot glass closer to header */ .kmv-hero-slot{ height: var(--hero-h); border: 1px solid rgba(255,255,255,.62); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.45)); box-shadow: 0 12px 32px rgba(3,20,40,.18), inset 0 1px 0 rgba(255,255,255,.28); display:grid; place-items:center; } /* Pills (right side) — black glass look */ header.bar nav a{ --ring: 0 0 0 0 rgba(0,0,0,0); display: inline-flex; align-items: center; gap: 8px; color:#fff !important; background: linear-gradient(180deg, rgba(8,12,18,.92), rgba(4,8,12,.88)); border: 1px solid rgba(255,255,255,.10); border-radius: 999px; padding: 7px 12px; text-decoration: none; line-height: 1; font-weight: 700; letter-spacing: .01em; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 18px rgba(0,0,0,.22), var(--ring); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } header.bar nav a:hover{ transform: translateY(-1px); filter: brightness(1.06); } header.bar nav a:active{ transform: translateY(0); filter: brightness(.98); } header.bar nav a.is-active{ --ring: 0 0 0 2px rgba(180,210,255,.35); } /* Icon seeds (by position if data-icon is absent) */ header.bar nav a::before{ content:""; width: var(--kmv-ico); height: var(--kmv-ico); mask: var(--ico) no-repeat center / contain; -webkit-mask: var(--ico) no-repeat center / contain; background: currentColor; opacity: .95; } /* Icons via nth-child (TOP, アカウント, メタマスク) */ header.bar nav a:nth-child(1){ --ico: url('data:image/svg+xml;utf8,'); } header.bar nav a:nth-child(2){ --ico: url('data:image/svg+xml;utf8,'); } header.bar nav a:nth-child(3){ --ico: url('data:image/svg+xml;utf8,'); } header.bar nav a[data-icon]{ --ico: attr(data-icon url); } /* 使う場合 */ /* Improve header layout spacing if needed */ header.bar .brand, header.bar strong, header.bar h1, header.bar h2{ color:#0e1216; } /* ============================================================================ */ /* style[5] from index */ /* === KMV: Pills refinement v4 (softer hover, richer black base) ============== */ header.bar nav{ display:flex; gap:8px; } /* Base: deep black glass with subtle gloss & vignette */ header.bar nav a{ color:#fff !important; background: radial-gradient(60% 140% at 30% 0%, rgba(255,255,255,.07), transparent 60%), linear-gradient(180deg, rgba(10,14,18,.96), rgba(6,10,14,.92)); border: 1px solid rgba(255,255,255,.10); border-radius: 999px; padding: 7px 12px; text-decoration: none; line-height: 1; font-weight: 700; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.25); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease; } /* Softer hover: tiny lift + very gentle brightening (not白過ぎ) */ header.bar nav a:hover{ transform: translateY(-1px); filter: brightness(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.28), 0 0 0 2px rgba(190,210,255,.18); } /* Active/press: slight sink */ header.bar nav a:active{ transform: translateY(0); filter: brightness(.99); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 14px rgba(0,0,0,.22); } /* Selected state */ header.bar nav a.is-active{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.28), 0 0 0 2px rgba(160,200,255,.28); border-color: rgba(160,200,255,.24); } /* Icons keep same size, just ensure opacity is good */ header.bar nav a::before{ opacity: .92; } /* ============================================================================ */ /* style[6] from index */ /* === KMV: Pills v5 — hover w/o color change ================================ */ header.bar nav a{ transition: transform .14s ease, box-shadow .14s ease; /* no filter/brightness */ } header.bar nav a:hover{ transform: translateY(-1.5px); /* keep same colors; only refine shadows */ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 22px rgba(0,0,0,.30), 0 0 0 2px rgba(190,210,255,.16); } header.bar nav a:active{ transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 16px rgba(0,0,0,.24); } /* ========================================================================= */ /* style[7] from index */ /* === KMV: Pills v6 — NO color change on hover (hard override) =============== */ header.bar nav a, header.bar nav a:hover, header.bar nav a:focus{ -webkit-filter: none !important; filter: none !important; } /* keep same background/colors on hover; only motion + shadow */ header.bar nav a{ transition: transform .16s ease, box-shadow .16s ease; /* no filter transition */ } header.bar nav a:hover, header.bar nav a:focus{ transform: translateY(-1.5px); /* Do not alter background or color */ background: inherit !important; color: inherit !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 22px rgba(0,0,0,.30), 0 0 0 2px rgba(190,210,255,.16); } /* ========================================================================= */ /* style[8] from index */ /* === KMV: micro polish v7 ================================================ */ :root{ --glass-blur: 12px; --pill-radius: 999px; --hud-radius: 14px; } /* Slight fade at hero bottom to blend with content */ .kmv-hero-slot::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(240,246,255,.30) 100%); pointer-events:none; border-radius: inherit; } /* Focus-visible rings for keyboard users */ header.bar nav a:focus{ outline:none; } header.bar nav a:focus-visible{ box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 3px rgba(150,190,255,.40), 0 10px 22px rgba(0,0,0,.30); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ header.bar nav a{ transition: none !important; } header.bar nav a:hover{ transform:none !important; } } /* Small screens: allow pills to wrap nicely */ header.bar nav{ flex-wrap: wrap; row-gap: 6px; } /* ============================================================================= */ /* style[9] from index */ /* === KMV: hero entry layout v8 ============================================= */ .kmv-hero-slot{ position: relative; display: block; } .kmv-hero-bg{ position:absolute; inset:0; z-index:0; background: url('') center / cover no-repeat; opacity: .78; filter: saturate(1.02) contrast(1.02); } .kmv-hero-bg::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 80% at 10% 90%, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 50%), radial-gradient(160% 120% at 100% 30%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%); } .kmv-hero-grid{ position:relative; z-index:1; height:100%; display:grid; grid-template-columns: 1fr minmax(320px, 640px); align-items: end; gap: 20px; padding: 24px; } .kmv-hero-cta{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; justify-content:flex-end; } .kmv-hero-cta .muted{ color:#102030; background: rgba(255,255,255,.55); padding:6px 10px; border-radius:10px; font-weight:700; border:1px solid rgba(0,0,0,.06); } .kmv-pill-lg{ appearance:none; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(8,12,18,.92), rgba(4,8,12,.88)); color:#fff; padding: 12px 18px; border-radius: 999px; font-weight: 800; letter-spacing:.02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.25); cursor: not-allowed; opacity:.88; } .kmv-pill-lg .soon{ margin-left:10px; padding:4px 8px; border-radius: 999px; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); font-weight: 800; font-size: 12px; letter-spacing:.04em; } .kmv-hero-video{ justify-self: end; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 16px; overflow:hidden; background: #000e; border:1px solid rgba(255,255,255,.55); box-shadow: 0 12px 32px rgba(3,20,40,.22), inset 0 1px 0 rgba(255,255,255,.18); } :root:not([data-kmv-mobile]) .kmv-hero-video video { width:100%; height:100%; object-fit:cover; display:block; } /* ========================================================================== */ /* style[10] from index */ /* === KMV: hero entry layout v9 tweaks ===================================== */ /* Grid paddings: a little tighter on the left, more on the right */ .kmv-hero-grid{ padding: 20px 26px 24px 14px; gap: 18px; } /* Two columns: left grows, right caps a bit smaller (and sits rightmost) */ .kmv-hero-grid{ grid-template-columns: 1fr minmax(360px, 560px); } /* CTA pill more to the left */ .kmv-hero-cta{ transform: translateX(-8px); } /* Video: slightly smaller and nudged right */ .kmv-hero-video{ max-width: 560px; margin-right: 6px; } /* Keep aspect & avoid clipping (already 16:9, height <= hero-h) */ /* ========================================================================== */ /* style[11] from index */ /* === KMV: hero entry v10 (alignment) ======================================= */ /* Pill: hard left align */ .kmv-hero-cta{ justify-self: start; transform: translateX(-16px); } /* Video: hard right align */ .kmv-hero-video{ max-width: 560px; margin-left: auto; margin-right: 0; justify-self: end; } /* Grid padding tiny tune */ .kmv-hero-grid{ padding: 20px 24px 24px 12px; } /* ========================================================================== */ /* style[12] from index */ /* === KMV: hero entry v11 — assertive alignment ============================== */ .kmv-hero-grid{ width:100%; display:grid; grid-template-columns: 1fr auto; /* left expands / right fits video */ align-items:end; gap: 18px; padding: 20px 10px 24px 10px; /* both edges tighter */ } .kmv-hero-grid .kmv-hero-cta{ place-self: end start; /* bottom-left */ margin: 0; transform:none; } .kmv-hero-grid .kmv-hero-video{ justify-self: end; /* right edge */ margin: 0; width: clamp(420px, 44vw, 560px); max-width: 560px; } /* Ensure the video box sits flush to right inner border */ .kmv-hero-video{ margin-right: 0 !important; } /* ========================================================================== */ /* style[13] from index */ /* KMV Hero Player — inline (fits .kmv-hero-video) */ /* ★ 修正点：displayトグルを撤廃して visibility/opacity 切替に変更 */ .kmv-hero-vid{position:relative;width:100%;height:100%;} .kmv-hero-stage{position:absolute;inset:0;background:#000;border-radius:inherit;overflow:hidden;} .kmv-hero-media{position:absolute;inset:0;display:block;opacity:0;visibility:hidden} .kmv-hero-media.active{opacity:1;visibility:visible} .kmv-hero-media>*{position:absolute;inset:0;width:100%;height:100%;} :root:not([data-kmv-mobile]) .kmv-hero-media video { object-fit:cover; display:block; } .kmv-hero-media iframe{width:100%!important;height:100%!important;border:0} .kmv-hero-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:8px;z-index:3} .kmv-hero-dot{width:10px;height:10px;border-radius:9999px;background:#99a3b5;opacity:.65;border:1px solid rgba(255,255,255,.6);cursor:pointer} .kmv-hero-dot[aria-selected="true"]{opacity:1;background:#fff} .kmv-hero-audio{position:absolute;right:10px;bottom:10px;z-index:4;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:6px 10px;font-size:12px;cursor:pointer;backdrop-filter:blur(6px)} .kmv-hero-audio:focus-visible{outline:2px solid #7cc4ff;outline-offset:2px} @media (prefers-reduced-motion: reduce){.kmv-hero-media video{transition:none;animation:none}} /* style[14] from index */ .kmv-acc-sheet{ position:fixed; top:56px; right:16px; background:rgba(20,20,24,.92); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:8px; display:grid; gap:6px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:transform .18s ease, opacity .18s ease; z-index:1000; } .kmv-acc-sheet.show{ transform:translateY(0); opacity:1; pointer-events:auto; } .kmv-acc-sheet .tab{ appearance:none; border:0; padding:10px 14px; border-radius:10px; background:#111; color:#fff; text-align:left; font:inherit; cursor:pointer; } .kmv-acc-sheet .tab:hover{ filter:brightness(1.08); } @media (prefers-reduced-motion: reduce){ .kmv-acc-sheet{ transition:none; } } /* Install paper: 背景(紙)の高さを十分に確保してはみ出し防止 + 少し下げる */ #kmvBlock-install.kmv-sec.paper{ /* 上下の余白を増やして紙の面積を広げる */ padding: 34px 0 56px !important; /* 万一幅により高さが足りないケースへの保険 */ min-height: clamp(220px, 12vh + 140px, 360px); } /* バナー自体（既存の調整に追加でOK） */ #kmvBlock-install .kmv-banner{ display:block; max-width:1050px; width:min(980px,96%); margin: 78px auto 18px; /* 紙の上端から少し下げる */ border:none !important; outline:none !important; box-shadow:none !important; background:transparent !important; } #kmvBlock-install .kmv-banner img{ display:block; width:100%; height:auto; border:0 !important; outline:0 !important; box-shadow:none !important; } #kmvBlock-install .kmv-banner:focus, #kmvBlock-install .kmv-banner:focus-visible{ outline:0 !important; box-shadow:none !important; }