body { position: static!important; } #pp-final, #pp-final * { box-sizing: border-box; } #pp-final { --bg:#f7f4eb; --paper:#fffdf8; --ink:#17170f; --muted:#66624f; --gold:#c9a34a; --gold2:#efd47a; --line:#e8e0cb; --dark:#11110c; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color:var(--ink); background:var(--bg); line-height:1.85; font-size:15px; overflow:hidden; } #pp-final a { color:#7b5618; text-decoration:underline; text-underline-offset:2px; } #pp-final .tkf-hero { background:linear-gradient(135deg,#0d0d09 0%,#19180f 60%,#0d0d09 100%); color:#fff; padding:64px 22px 54px; text-align:center; border-bottom:3px solid var(--gold); position:relative; } #pp-final .tkf-hero:before { content:""; position:absolute; inset:0; opacity:.12; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:36px 36px; } #pp-final .tkf-hero-inner { position:relative; z-index:1; max-width:780px; margin:auto; } #pp-final .tkf-badge { display:inline-block; border:1px solid rgba(239,212,122,.55); color:var(--gold2); padding:5px 15px; border-radius:999px; font-size:11px; letter-spacing:.15em; margin-bottom:16px; } #pp-final .tkf-title { margin:0; font-family:"Noto Serif JP","Yu Mincho",serif; font-size:clamp(24px,4vw,34px); letter-spacing:.05em; } #pp-final .tkf-title em { color:var(--gold2); font-style:normal; } #pp-final .tkf-lead { margin:14px auto 0; max-width:680px; color:#d1cdbb; font-size:13px; } #pp-final .tkf-wrap { max-width:920px; margin:auto; padding:0 20px 56px; } #pp-final .tkf-sec { padding-top:48px; } #pp-final .tkf-kicker { color:#a57a25; font-size:11px; letter-spacing:.14em; font-weight:700; margin-bottom:5px; } #pp-final .tkf-h2 { font-family:"Noto Serif JP","Yu Mincho",serif; font-size:clamp(20px,3.2vw,26px); margin:0 0 8px; } #pp-final .tkf-desc { color:var(--muted); font-size:13px; margin:0 0 22px; } #pp-final .tkf-card { background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 5px 22px rgba(0,0,0,.05); } #pp-final table { width:100%; border-collapse:collapse; } #pp-final tr + tr { border-top:1px solid var(--line); } #pp-final th { width:190px; text-align:left; vertical-align:top; background:var(--dark); color:var(--gold2); padding:18px; font-size:13px; border-right:3px solid var(--gold); } #pp-final td { vertical-align:top; padding:18px 20px; background:#fff; font-size:13px; } #pp-final .tkf-sub { font-weight:800; margin:11px 0 4px; padding-left:10px; border-left:3px solid var(--gold); } #pp-final .tkf-sub:first-child { margin-top:0; } #pp-final ul { margin:7px 0 0 1.25em; padding:0; } #pp-final li { margin:4px 0; } #pp-final .tkf-note { margin-top:12px; padding:12px 14px; border:1px solid #e8d8a8; background:#fffbed; border-radius:9px; color:#5e4a17; font-size:12px; } #pp-final .tkf-darknote { margin-top:12px; padding:14px 16px; background:#181810; border-radius:9px; color:#d7d3bd; font-size:12px; } #pp-final .tkf-darknote strong { color:var(--gold2); } #pp-final .tkf-strong { font-weight:800; } #pp-final .tkf-footer { margin-top:48px; background:#0d0d09; color:#8f886c; text-align:center; padding:28px 18px; border-top:3px solid var(--gold); font-size:12px; } #pp-final .tkf-footer strong { color:var(--gold2); } #pp-final .tkf-updated { display:block; margin-top:6px; font-size:11px; color:#625f4f; } @media (max-width:680px){ #pp-final .tkf-hero { padding:48px 16px 42px; } #pp-final .tkf-wrap { padding:0 12px 42px; } #pp-final .tkf-card { border-radius:10px; } #pp-final table, #pp-final tbody, #pp-final tr, #pp-final th, #pp-final td { display:block; width:100%; } #pp-final th { border-right:0; border-bottom:2px solid var(--gold); padding:12px 14px; } #pp-final td { padding:14px; } } /* ============================================================ 旧ページから復元した動き（アニメーション） ・ヒーローの中はCSSだけで動かす（読み込んだ瞬間に必ず見える） ・表の行はJavaScriptが動いたときだけ動かす → JSが止まっていても文字は最初から見えるので、絶対に読めなくならない ============================================================ */ @keyframes tkf-scan { 0%{top:-6%} 100%{top:110%} } @keyframes tkf-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } @keyframes tkf-shine { 0%{background-position:-200% center} 100%{background-position:200% center} } @keyframes tkf-twinkle { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.2;transform:scale(.5)} } @keyframes tkf-up { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} } /* 金色の走査線が上から下へ流れる */ #pp-final .tkf-scan { position:absolute; left:0; right:0; height:2px; pointer-events:none; z-index:0; background:linear-gradient(90deg,transparent,rgba(201,163,74,.45),transparent); animation:tkf-scan 4s linear infinite; } /* 瞬く星 */ #pp-final .tkf-star { position:absolute; width:4px; height:4px; background:var(--gold); border-radius:50%; pointer-events:none; z-index:0; } #pp-final .tkf-star:nth-of-type(1){ top:15%; left:10%; animation:tkf-twinkle 2.1s ease infinite; } #pp-final .tkf-star:nth-of-type(2){ top:30%; left:85%; animation:tkf-twinkle 1.7s ease infinite .3s; } #pp-final .tkf-star:nth-of-type(3){ top:70%; left:8%; animation:tkf-twinkle 2.4s ease infinite .6s; } #pp-final .tkf-star:nth-of-type(4){ top:20%; left:60%; animation:tkf-twinkle 1.9s ease infinite .9s; } #pp-final .tkf-star:nth-of-type(5){ top:75%; left:90%; animation:tkf-twinkle 2.2s ease infinite 1.2s; } /* 中央のほのかな金色の光 */ #pp-final .tkf-hero:after { content:""; position:absolute; top:50%; left:50%; width:520px; height:260px; transform:translate(-50%,-50%); pointer-events:none; z-index:0; background:radial-gradient(ellipse, rgba(201,163,74,.18) 0%, transparent 70%); } /* 📋 がふわふわ上下する */ #pp-final .tkf-icon { display:block; font-size:44px; margin-bottom:12px; animation:tkf-float 5s ease-in-out infinite; } /* 見出しの「表示」に金色の光が流れる */ #pp-final .tkf-title em { font-style:normal; background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:tkf-shine 3s linear infinite; } /* ヒーローの中身がふわっと出る */ #pp-final .tkf-badge { animation:tkf-up .8s ease both .15s; } #pp-final .tkf-icon { animation:tkf-float 5s ease-in-out infinite, tkf-up .8s ease both .25s; } #pp-final .tkf-title { animation:tkf-up .8s ease both .3s; } #pp-final .tkf-lead { animation:tkf-up .8s ease both .4s; } /* --- 表の行：JSが動いたときだけ、スクロールに合わせてふわっと出す --- */ #pp-final.tkf-anim .tkf-card tr { opacity:0; transform:translateY(14px); } #pp-final.tkf-anim .tkf-card tr.tkf-in { animation:tkf-up .5s ease both; } #pp-final.tkf-anim .tkf-card tr.tkf-in:nth-child(2){ animation-delay:.05s } #pp-final.tkf-anim .tkf-card tr.tkf-in:nth-child(3){ animation-delay:.10s } #pp-final.tkf-anim .tkf-card tr.tkf-in:nth-child(4){ animation-delay:.15s } #pp-final.tkf-anim .tkf-card tr.tkf-in:nth-child(5){ animation-delay:.20s } #pp-final.tkf-anim .tkf-card tr.tkf-in:nth-child(n+6){ animation-delay:.25s } /* 動きが苦手な方の設定（OSの「視差効果を減らす」）では全部止める */ @media (prefers-reduced-motion: reduce) { #pp-final .tkf-scan, #pp-final .tkf-star, #pp-final .tkf-icon, #pp-final .tkf-title em, #pp-final .tkf-badge, #pp-final .tkf-title, #pp-final .tkf-lead { animation:none !important; } #pp-final.tkf-anim .tkf-card tr { opacity:1 !important; transform:none !important; animation:none !important; } } /* ============================================================ テーマに負けないようにする（この囲みの中は外の影響を受けない） ── 見出しや本文が白く消えた原因 ── .tkf-h2 や td は「自分の文字色を持たず、親から受け継ぐ」作りだった。 CSSでは、受け継ぎはテーマ側の直接指定（h2{color:#fff} 等）に必ず負ける。 → 中の文字は、自分で色を宣言して外の指定をはね返す。 ※ :where() を使っているので、この囲みの中の元の指定（金色の見出し等）は そのまま勝ち続ける。上書きしているのは「何も決めていなかった所」だけ。 ============================================================ */ #pp-final :where(h1,h2,h3,h4,h5,h6,p,div,span,em,strong,b,i,small, ul,ol,li,table,thead,tbody,tr,th,td,dl,dt,dd, section,main,header,footer,article,address,figure,figcaption){ color: inherit; font-family: inherit; text-shadow: none; text-transform: none; } /* 要の部分は、テーマが !important を使っていても勝てるように直接指定 */ #pp-final .tkf-title { color:#ffffff !important; } #pp-final .tkf-h2 { color:var(--ink) !important; } #pp-final .tkf-sub { color:var(--ink) !important; } #pp-final .tkf-desc { color:var(--muted) !important; } #pp-final .tkf-kicker{ color:#a57a25 !important; } #pp-final td, #pp-final td li { color:var(--ink) !important; } #pp-final th { color:var(--gold2) !important; } #pp-final .tkf-lead { color:#d1cdbb !important; } #pp-final .tkf-note { color:#5e4a17 !important; } #pp-final .tkf-darknote { color:#d8d2b8 !important; } #pp-final .tkf-footer{ color:#8f886c !important; } #pp-final .tkf-updated{ color:#625f4f !important; } #pp-final a { color:#7b5618 !important; } #pp-final .tkf-footer a { color:#c9a34a !important; } #pp-final .tkf-title em { color:transparent !important; -webkit-text-fill-color:transparent !important; } /* 背景も同様に押さえる（テーマが白や透明にしてくると表が読めなくなるため） */ #pp-final { background:var(--bg) !important; } #pp-final .tkf-card { background:var(--paper) !important; } #pp-final th { background:var(--dark) !important; } #pp-final table, #pp-final tbody, #pp-final tr, #pp-final td { background:transparent !important; } #pp-final .tkf-footer { background:#0d0d09 !important; } .eap-card .ytbox.eapctf-box{position:relative;background:#000;overflow:hidden} .eapctf-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px; background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.8);border-radius:50%;pointer-events:none} .eapctf-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%); width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid #fff} .eapyp-preview{margin:8px 0 4px;max-width:480px;background:#000;border-radius:8px;overflow:hidden;display:none;} .eapyp-preview.eapyp-on{display:block;} .eapyp-preview iframe{display:block;width:100%;aspect-ratio:16/9;border:0;} .eapyp-hint{font-size:12px;margin:4px 0;color:#2e7d32;display:none;} .eapyp-hint.eapyp-on{display:block;} .eapyp-hint.eapyp-ng{color:#c62828;} .eapx-checkout-info { background:#f0f9ff !important; padding:10px !important; border-radius:6px !important; margin-bottom:10px !important; border:1px solid #bae6fd !important; font-size:12px !important; } .eapx-checkout-info .ci-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; } .eapx-checkout-info .ci-label { color:#64748b !important; font-weight:bold; } .eapx-checkout-info .ci-value { color:#0f172a !important; font-weight:bold; } .eapx-checkout-info .ci-memo { background:#fffbeb !important; border:1px solid #fde68a !important; padding:8px !important; border-radius:4px !important; margin-top:6px !important; color:#92400e !important; font-size:12px !important; white-space:pre-wrap; word-break:break-word; } .eapx-checkout-info .ci-payment-paypay { color:#ef4444 !important; } .eapx-checkout-info .ci-payment-bank { color:#2563eb !important; } .eapx-checkout-info .ci-payment-card { color:#f59e0b !important; } .eapx-checkout-info .ci-completed { color:#059669 !important; font-size:11px; margin-top:4px; } .eapx-no-checkout { background:#f9fafb !important; padding:8px !important; border-radius:4px !important; margin-bottom:10px !important; border:1px dashed #d1d5db !important; font-size:11px !important; color:#9ca3af !important; text-align:center !important; } /* 発送先確認モーダル */ #eapx-addr-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:100010; display:none; } #eapx-addr-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:0; border-radius:12px; z-index:100011; width:90%; max-width:420px; box-shadow:0 12px 40px rgba(0,0,0,0.3); overflow:hidden; display:none; } #eapx-addr-modal * { color:#333 !important; text-align:left !important; } .eapx-addr-header { background:#0369a1; padding:16px 20px; } .eapx-addr-header h3 { color:#fff !important; margin:0 !important; font-size:1.2em !important; } .eapx-addr-body { padding:20px; } .eapx-addr-table { width:100%; border-collapse:collapse; } .eapx-addr-table th { text-align:left; padding:10px 12px; background:#f0f9ff; color:#0369a1 !important; font-weight:700; width:30%; border-bottom:1px solid #e0f2fe; font-size:13px; } .eapx-addr-table td { padding:10px 12px; border-bottom:1px solid #f1f5f9; font-size:14px; font-weight:500; } .eapx-addr-memo { background:#fffbeb; border:1px solid #fde68a; padding:12px; border-radius:6px; margin-top:12px; font-size:13px; color:#92400e !important; white-space:pre-wrap; word-break:break-word; } .eapx-addr-memo strong { color:#92400e !important; } .eapx-addr-not-found { text-align:center !important; padding:30px 20px; color:#9ca3af !important; } .eapx-addr-close { display:block; width:100%; padding:14px; background:#f1f5f9; border:none; border-top:1px solid #e2e8f0; font-size:15px; font-weight:bold; cursor:pointer; color:#64748b !important; text-align:center !important; } .eapx-addr-close:hover { background:#e2e8f0; } .eapx-addr-btn { background:#0369a1 !important; color:#fff !important; border:none !important; padding:8px 14px !important; border-radius:5px !important; cursor:pointer !important; font-weight:bold !important; font-size:12px !important; width:100% !important; display:block !important; margin-top:8px !important; text-align:center !important; } .eapx-addr-btn:hover { opacity:0.9; } .eapx-addr-loading { text-align:center !important; padding:40px 20px; color:#94a3b8 !important; } /* --- 根本的なレイヤーの分離と強制隔離 --- */ /* HP側の背景が透けるように設定 */ html, body { background-color: transparent !important; } /* 背景システム全体を包む絶対隔離コンテナ */ #edo-night-background-system { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: -2147483647 !important; pointer-events: none !important; /* HP側の操作を全てスルー */ overflow: hidden !important; margin: 0 !important; padding: 0 !important; display: block !important; visibility: visible !important; isolation: isolate !important; } /* 3Dキャンバス自体の設定 */ #canvas-container-edo { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -2 !important; pointer-events: auto !important; /* 背景のドラッグ操作は有効 */ } /* 背景内の告知レイヤー（最上部配置） */ #edo-bg-text-layer { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; /* 画面上部に配置（元の位置） */ text-align: center !important; box-sizing: border-box !important; padding: 50px 10% 0 !important; pointer-events: none !important; } /* 激しく熱気のある赤色発光アニメーション */ @keyframes fierceRedGlow { 0% { text-shadow: 0 0 15px rgba(255, 0, 0, 0.7), 0 0 30px rgba(200, 0, 0, 0.5), 0 4px 15px rgba(0, 0, 0, 0.9); } 100% { text-shadow: 0 0 25px rgba(255, 50, 50, 1), 0 0 60px rgba(255, 0, 0, 0.9), 0 0 100px rgba(200, 0, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.9); } } /* サンタ捕獲時の黄金ミラクル発光アニメーション */ @keyframes miracleGoldGlow { 0% { color: #FFF6A9 !important; text-shadow: 0 0 20px #FFD700, 0 0 50px #FF8800, 0 0 90px #FF0055, 0 4px 15px rgba(0, 0, 0, 0.95); transform: skewX(-5deg) scale(1.04); } 100% { color: #FFFFFF !important; text-shadow: 0 0 35px #FFFF00, 0 0 80px #00FFAA, 0 0 130px #FF00AA, 0 4px 15px rgba(0, 0, 0, 0.95); transform: skewX(-5deg) scale(1.10); } } /* エドオク メインテキスト（赤・極太ゴシック・斜体で勢いを演出） */ .main-announcement-edo { width: 100% !important; max-width: 95vw !important; margin: 0 auto !important; font-size: clamp(3rem, 12vw, 8rem) !important; font-family: "Impact", "Arial Black", "Noto Sans JP", "Yu Gothic", "MS Gothic", sans-serif !important; font-weight: 900 !important; /* 極太 */ font-style: italic !important; /* スピード感・勢いを出す斜体 */ color: #FF1111 !important; /* 鮮烈な赤 */ line-height: 1.1 !important; letter-spacing: 0.05em !important; animation: fierceRedGlow 1.5s infinite alternate ease-in-out !important; /* 鼓動のような速めの点滅 */ word-wrap: break-word !important; overflow-wrap: break-word !important; transform: skewX(-5deg) !important; /* さらに少し傾けてアグレッシブに */ transition: transform 0.3s ease !important; } /* サブタイトル（EDO KILLIFISH AUCTION） */ .sub-announcement-edo { font-family: "Impact", "Arial Black", "Noto Sans JP", "Yu Gothic", "MS Gothic", sans-serif !important; font-size: clamp(1rem, 3.5vw, 2.5rem) !important; color: #ffffff !important; /* 白文字で赤く光らせる */ font-weight: 900 !important; font-style: italic !important; letter-spacing: 0.15em !important; margin-top: 5px !important; transform: skewX(-5deg) !important; animation: fierceRedGlow 1.5s infinite alternate ease-in-out !important; text-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; } /* サンタ捕獲フィーバー時 */ #edo-bg-text-layer.miracle-fever .main-announcement-edo, #edo-bg-text-layer.miracle-fever .sub-announcement-edo { animation: miracleGoldGlow 0.35s infinite alternate ease-in-out !important; } /* v1.3.0: カートモーダルのスクロール構造を修正 */ #eap-ec-cart-modal-inner { display: flex !important; flex-direction: column !important; max-height: 85vh !important; padding: 20px 20px 16px !important; } #eap-ec-cart-modal-inner h2 { flex-shrink: 0; } #eap-ec-cart-items-wrap { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; min-height: 60px; } #eap-ec-cart-total { flex-shrink: 0; border-top: 1px solid #eee; padding-top: 10px !important; padding-bottom: 6px !important; } #eap-ec-checkout-btn, #eap-ec-cart-close-btn { flex-shrink: 0; } /* v1.6.0: カード内小計 */ .eapsnp-card-sub { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 8px; padding: 6px 10px; background: #f0f6ff; border-radius: 6px; font-size: .9em; } .eapsnp-card-sub .sub-label { color: #555; } .eapsnp-card-sub .sub-price { font-weight: bold; color: #c00; font-size: 1.1em; } /* ドロワー各アイテムの小計 */ .eapsnp-item-sub { font-size: .85em; color: #c00; font-weight: bold; margin-top: 3px; } /* ドロワーフッター送料行 */ .eapsnp-shipping-row { display: flex; justify-content: space-between; font-size: .84em; color: #888; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed #e0e0e0; } #eapsnp-confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;align-items:center;justify-content:center;padding:20px;box-sizing:border-box} #eapsnp-confirm-overlay.show{display:flex} #eapsnp-confirm-box{background:#fff;border-radius:14px;padding:28px 24px 20px;max-width:340px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.25);text-align:center} #eapsnp-confirm-box .snp-title{font-size:1.05rem;font-weight:bold;color:#1a3a6a;margin:0 0 8px} #eapsnp-confirm-box .snp-body{font-size:.9rem;color:#555;margin:0 0 20px;line-height:1.6} .snp-btns{display:flex;gap:12px} .snp-ok{flex:1;padding:13px;background:linear-gradient(135deg,#1a5fb4,#1a3a6a);color:#fff;border:none;border-radius:9px;font-size:1rem;font-weight:bold;cursor:pointer} .snp-cancel{flex:1;padding:13px;background:#f0f0f0;color:#555;border:1px solid #ddd;border-radius:9px;font-size:1rem;cursor:pointer} .eapmb-badge{position:fixed;left:50%;transform:translateX(-50%);bottom:74px;z-index:9998; display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px; font-size:15px;line-height:1.35;text-decoration:none; box-shadow:0 4px 18px rgba(0,0,0,0.28);max-width:92%;width:auto; animation:eapmbPop .35s ease;} @keyframes eapmbPop{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}} .eapmb-badge:hover{opacity:.92;} .eapmb-badge .eapmb-ic{font-size:24px;flex-shrink:0;} .eapmb-badge .eapmb-tx{font-weight:800;} .eapmb-badge .eapmb-sb{display:block;font-size:12px;font-weight:500;opacity:.9;margin-top:2px;} .eapmb-guest{background:#ffcf33;color:#5c4300;border:2px solid #e6b800;} .eapmb-partial{background:#4a90ff;color:#fff;border:2px solid #2f6fd8;} .eapmb-full{background:#2ecc71;color:#fff;border:2px solid #27ae60;cursor:default;} .eapmb-close{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%; background:#fff;color:#666;border:1px solid #ccc;font-size:14px;line-height:20px;text-align:center; cursor:pointer;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,0.2);} @media(max-width:480px){ .eapmb-badge{bottom:70px;font-size:14px;padding:11px 16px;} .eapmb-badge .eapmb-ic{font-size:22px;} } .eap-descvid-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:8px} .eap-descvid-box{position:relative;width:100%;padding-top:56.25%;border-radius:8px;overflow:hidden;background:#000} .eap-descvid-box iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} #eap-lc-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999999;align-items:center;justify-content:center;padding:20px;box-sizing:border-box} #eap-lc-overlay.show{display:flex} #eap-lc-box{background:#fff;border-radius:14px;padding:24px 20px 18px;max-width:300px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.25)} #eap-lc-box p{margin:0 0 16px;font-size:.95rem;color:#333;line-height:1.6} .eap-lc-btns{display:flex;gap:10px} .eap-lc-cancel{flex:1;padding:11px;background:#f0f0f0;color:#555;border:1px solid #ddd;border-radius:8px;font-size:.95rem;cursor:pointer} .eap-lc-ok{flex:1;padding:11px;background:#e53e3e;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:bold;cursor:pointer;text-decoration:none;display:block} /* ── オーバーレイ ── */ #ealr-ov{ display:none;position:fixed;inset:0;z-index:99999; background:rgba(0,0,0,.7); align-items:center;justify-content:center; padding:16px;box-sizing:border-box; } #ealr-ov.on{display:flex;animation:ealrIn .3s ease;} @keyframes ealrIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* ── カード ── */ #ealr-box{ background:#fff;border-radius:24px; padding:20px 20px 18px; max-width:380px;width:100%; max-height:92vh;overflow-y:auto; text-align:center; box-shadow:0 12px 48px rgba(0,0,0,.35); font-family:'Helvetica Neue',Arial,'Hiragino Sans',sans-serif; } /* ── ステップバー ── */ #ealr-stepbar{ display:flex;align-items:center;justify-content:center; margin-bottom:12px;gap:0; } .ealr-sd{ width:44px;height:44px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:18px;font-weight:bold; border:3px solid #e0e0e0;color:#bbb; background:#f5f5f5;transition:.4s; flex-shrink:0; } .ealr-sd.now{border-color:#06c755;background:#06c755;color:#fff; box-shadow:0 0 0 5px rgba(6,199,85,.2);} .ealr-sd.done{border-color:#06c755;background:#06c755;color:#fff;} .ealr-sl{width:48px;height:5px;background:#e0e0e0;border-radius:3px;transition:.4s;} .ealr-sl.done{background:#06c755;} .ealr-slabel{ display:flex;justify-content:space-between; margin:-6px 0 0;padding:0 4px; font-size:11px;color:#aaa; } .ealr-slabel span{width:44px;text-align:center;} /* ── アイコン ── */ #ealr-box .ealr-ico{font-size:36px;margin-bottom:4px;line-height:1;} /* ── テキスト ── */ #ealr-box h3{ font-size:16px;font-weight:bold;color:#1a1a1a; margin:0 0 8px;line-height:1.4; } #ealr-box .ealr-sub{ font-size:13px;color:#555;line-height:1.7; margin:0 0 10px; } /* ── メインボタン ── */ .ealr-main-btn{ display:flex;align-items:center;justify-content:center;gap:8px; width:100%;padding:13px 14px; background:#06c755;color:#fff;border:none; border-radius:12px;font-size:15px;font-weight:bold; cursor:pointer;text-decoration:none; box-shadow:0 4px 12px rgba(6,199,85,.4); transition:.15s;margin-bottom:10px; box-sizing:border-box; } .ealr-main-btn:hover{background:#05b34c;color:#fff;transform:translateY(-1px);} .ealr-main-btn:active{transform:translateY(0);} .ealr-main-btn svg{width:20px;height:20px;flex-shrink:0;} /* ── サブボタン ── */ .ealr-skip-btn{ display:block;width:100%;padding:9px; background:#fff;color:#999; border:1px solid #e0e0e0;border-radius:10px; font-size:13px;cursor:pointer; transition:.15s;box-sizing:border-box; } .ealr-skip-btn:hover{background:#f5f5f5;color:#777;} /* ── 移動中オーバーレイ ── */ #ealr-going{ display:none;position:fixed;inset:0;z-index:100000; background:rgba(6,199,85,.97); flex-direction:column; align-items:center;justify-content:center; font-family:'Helvetica Neue',Arial,'Hiragino Sans',sans-serif; } #ealr-going.on{display:flex;animation:ealrIn .2s ease;} #ealr-going .gg-ico{font-size:72px;margin-bottom:16px;} #ealr-going h2{font-size:24px;font-weight:bold;color:#fff;margin:0 0 8px;} #ealr-going p{font-size:16px;color:rgba(255,255,255,.85);margin:0;} #ealr-going .gg-dots span{ display:inline-block;width:10px;height:10px; background:#fff;border-radius:50%;margin:0 4px; animation:ealrDot 1.2s infinite;opacity:.3; } #ealr-going .gg-dots span:nth-child(2){animation-delay:.2s;} #ealr-going .gg-dots span:nth-child(3){animation-delay:.4s;} @keyframes ealrDot{0%,80%,100%{opacity:.3}40%{opacity:1}} .eap-v4-fav-btn { position: absolute !important; top: 8px !important; right: 8px !important; z-index: 9999 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(255,255,255,0.95) !important; border: 1px solid #eee !important; color: #ccc !important; font-size: 22px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } .eap-v4-fav-btn.is-active { color: #e60000 !important; border-color: #ffcccc !important; } .eap-v4-fav-btn.is-animating { transform: scale(1.3); } .eap-v4-fav-btn span { margin-top: 2px; display:block; pointer-events: none; } .eap-fav-link-btn { display: inline-block; background: #e91e63 !important; color: #fff !important; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: bold; text-decoration: none !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: opacity 0.3s; } .eap-fav-link-btn:hover { opacity: 0.9; } .eap-price-updated { animation: eapPriceFlash 1.5s ease-out forwards; } @keyframes eapPriceFlash { 0% { color: #ff0000; transform: scale(1.2); } 100% { color: #0a2a66; transform: scale(1); } } .eaprs-link{display:block;margin:12px auto 0;background:none;border:0;color:#06c755;font-size:13px;font-weight:bold;text-decoration:underline;cursor:pointer} #eaprs-step{display:none} #eaprs-step.active{display:block} #eaprs-step .eaprs-note{font-size:12px;color:#666;line-height:1.6;margin:10px 0 0} #eaprs-step .eaprs-msg{font-size:13px;line-height:1.6;margin:10px 0;padding:8px 10px;border-radius:6px;background:#f3f8f3;color:#225522;display:none} #eaprs-step .eaprs-msg.err{background:#fdf1f1;color:#a33} #eaprs-code-box{display:none} .eappd-box{display:none} /* --- 1. 常駐ボタン (FAB) --- */ #eap-kawaraban-fab { /* ▼ 位置修正: bottomを20pxから110pxに変更し、アプリのナビと被らないようにしました */ position: fixed; bottom: 80px; left: 20px; width: 70px; height: 70px; background: #d4af37 !important; border: 3px solid #fff !important; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; cursor: pointer; z-index: 999990; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; animation: eapFloat 3s ease-in-out infinite; } #eap-kawaraban-fab:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6) !important; } #eap-kawaraban-fab .icon { font-size: 24px !important; line-height: 1; margin-bottom: 2px; text-shadow: none !important; } #eap-kawaraban-fab .text { font-size: 11px !important; font-weight: bold !important; color: #fff !important; text-shadow: 1px 1px 0 #000 !important; font-family: serif !important; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -2px; height: 30px; line-height: 1; } @keyframes eapFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* --- 2. 瓦版モーダル --- */ #eap-kawaraban-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7) !important; z-index: 999998; opacity: 0; visibility: hidden; transition: all 0.3s; backdrop-filter: blur(3px); } #eap-kawaraban-modal { position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px; height: 85vh; background-color: #fcfaf2 !important; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); border: 8px solid #333 !important; border-bottom: none !important; border-radius: 15px 15px 0 0; box-shadow: 0 -10px 50px rgba(0,0,0,0.5) !important; z-index: 999999; transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; } body.eap-kawaraban-open #eap-kawaraban-overlay { opacity: 1; visibility: visible; } body.eap-kawaraban-open #eap-kawaraban-modal { bottom: 0; } body.eap-kawaraban-open { overflow: hidden; } .eap-modal-header { background: #333 !important; color: #fff !important; padding: 15px; text-align: center; position: relative; flex-shrink: 0; border-bottom: 2px solid #d4af37; } .eap-modal-title { font-size: 1.5em !important; font-weight: bold !important; font-family: serif !important; letter-spacing: 2px; color: #d4af37 !important; margin: 0 !important; } .eap-modal-close { position: absolute; top: 10px; right: 15px; background: transparent !important; border: none !important; color: #fff !important; font-size: 24px !important; cursor: pointer; } .eap-modal-content { flex-grow: 1; overflow-y: auto; padding: 0 20px 20px; -webkit-overflow-scrolling: touch; color: #333 !important; } /* --- 3. タブ --- */ .eap-tab-nav { display: flex; justify-content: center; gap: 10px; padding: 15px 0; position: sticky; top: 0; background: #fcfaf2; z-index: 10; border-bottom: 1px solid #ddd; margin-bottom: 15px; } .eap-tab-btn { background: #eee !important; border: 1px solid #ccc !important; padding: 10px 20px !important; border-radius: 30px !important; cursor: pointer; font-weight: bold !important; color: #555 !important; font-family: serif !important; font-size: 14px !important; transition: all 0.2s; outline: none !important; } .eap-tab-btn:hover { background: #e0e0e0 !important; } .eap-tab-btn.active { background: #d4af37 !important; color: #fff !important; border-color: #b8860b !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; transform: scale(1.05); } .eap-tab-content { display: none; animation: eapFadeIn 0.3s ease-out; } .eap-tab-content.active { display: block; } @keyframes eapFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* --- 4. コンテンツ --- */ .eap-section-title { font-size: 1.3em !important; font-weight: bold !important; border-left: 6px solid #d4af37 !important; padding-left: 12px !important; margin: 10px 0 15px !important; background: linear-gradient(to right, rgba(212,175,55,0.15), transparent) !important; line-height: 1.4 !important; font-family: serif !important; color: #333 !important; } .eap-news-item { border-bottom: 1px dashed #bbb !important; padding: 15px 0 !important; } .eap-news-item:last-child { border-bottom: none !important; } .eap-news-title { font-size: 1.1em !important; font-weight: bold !important; margin-bottom: 8px !important; line-height: 1.4 !important; } .eap-news-title a { color: #222 !important; text-decoration: none !important; border-bottom: 1px solid transparent; } .eap-news-title a:hover { border-bottom: 1px solid #d4af37; color: #d4af37 !important; } .eap-news-commentary { font-size: 0.95em !important; color: #444 !important; background: rgba(255,255,255,0.7) !important; padding: 10px !important; border-radius: 4px !important; border-left: 4px solid #ccc !important; margin-bottom: 8px !important; line-height: 1.6 !important; font-style: italic; } .eap-news-meta { font-size: 0.85em !important; color: #666 !important; text-align: right !important; font-family: sans-serif !important; } .eap-price-up { color: #c00 !important; font-weight: bold !important; font-size: 1.1em !important; } .eap-rank-badge { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; text-align: center; color: #fff !important; font-size: 12px !important; font-weight: bold !important; margin-right: 6px; vertical-align: middle; position: relative; top: -2px; } .rank-1 { background: #d4af37 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transform: scale(1.1); } .rank-2 { background: #757575 !important; } .rank-3 { background: #a17052 !important; } .rank-other { background: #555 !important; font-size: 11px !important; width: 20px; height: 20px; line-height: 20px; } .eap-no-data { text-align: center; color: #777; padding: 30px; font-size: 0.9em; background: rgba(0,0,0,0.02); border-radius: 8px; margin-top: 20px; } .eap-loading { text-align: center; padding: 40px; color: #999; font-family: sans-serif; } .eap-loading-spinner { display: inline-block; width: 30px; height: 30px; border: 3px solid rgba(212,175,55,0.3); border-radius: 50%; border-top-color: #d4af37; animation: spin 1s ease-in-out infinite; margin-bottom: 10px; } @keyframes spin { to { transform: rotate(360deg); } } /* --- 追加: ニューステロップ用CSS --- */ .eap-ticker-container { background: #222; color: #fff; overflow: hidden; position: relative; margin: 10px 0 0 0; /* タブの上、コンテンツ内のトップ */ border-radius: 4px; display: flex; align-items: center; height: 36px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .eap-ticker-label { background: #d4af37; color: #fff; padding: 0 10px; height: 100%; display: flex; align-items: center; font-weight: bold; font-size: 12px; z-index: 2; flex-shrink: 0; box-shadow: 2px 0 5px rgba(0,0,0,0.2); } .eap-ticker-content { flex-grow: 1; overflow: hidden; white-space: nowrap; position: relative; height: 100%; display: flex; align-items: center; } .eap-ticker-text { display: inline-block; padding-left: 100%; animation: eapMarquee 20s linear infinite; font-size: 13px; font-weight: bold; color: #fff; } @keyframes eapMarquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } html.eapmnu-on #edo-sub-menu{display:none!important} #eapmnu-sec{border-bottom:1px solid #2a2a2a;background:#161616} #eapmnu-sec.bottom{border-top:1px solid #2a2a2a;border-bottom:0} #eapmnu-head{display:flex;align-items:center;width:100%;padding:15px 20px;border:0;background:transparent;color:#d4af37; font:inherit;font-weight:bold;font-size:14px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent} #eapmnu-head:active{background:#333} #eapmnu-head .t{flex:1} #eapmnu-head .c{font-size:.8em;color:#888;transition:transform .2s} #eapmnu-head[aria-expanded="true"] .c{transform:rotate(180deg)} #eapmnu-list{background:#222} #eapmnu-list[hidden]{display:none!important} #eapmnu-list a{display:block;padding:13px 20px 13px 40px;color:#eee;text-decoration:none;font-size:14px;border-top:1px solid #2a2a2a;line-height:1.5} #eapmnu-list a:active{background:#333} html.eapmnu-open #eap-live-ticker-area,html.eapmnu-open .eap-duel-alert{visibility:hidden!important;opacity:0!important;pointer-events:none!important} html.eapmnu-open #eap-drawer-panel{box-sizing:border-box!important;padding-bottom:var(--eapmnu-navh,0px)!important}