に出力する。 * そのため body.fx-live-mode というセレクタでは当たらない。 * 要素を限定せず .fx-live-mode と書くこと（一度これで見出しがヘッダーに隠れた）。 */ .fx-live-mode .l-header, .fx-live-mode .l-fixHeader, .fx-live-mode .l-sidebar, .fx-live-mode .l-footer, .fx-live-mode .fx-footer-legal, .fx-live-mode .p-breadcrumb, .fx-live-mode .c-postTitle, .fx-live-mode .l-articleBottom, .fx-live-mode #sidebar, .fx-live-mode .p-fixBtn, .fx-live-mode .c-shareBtns { display: none !important; } .fx-live-mode, body:has(.fx-live-mode) { background: #1f2547; } .fx-live-mode .l-content, .fx-live-mode .l-mainContent, .fx-live-mode .post_content { margin: 0 !important; padding: 0 !important; max-width: none !important; } /* ---- 1枚板 ---- */ .fx-live { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; box-sizing: border-box; padding: 3.2vh 3vw 2.4vh; background: radial-gradient(120% 90% at 88% 8%, rgba(240, 138, 30, .20) 0%, rgba(240, 138, 30, 0) 55%), linear-gradient(160deg, #2b3358 0%, #1a2043 100%); color: #fff; font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Meiryo", sans-serif; overflow: hidden; } .fx-live__head { flex: 0 0 auto; } .fx-live__brand { display: flex; align-items: center; gap: .8vw; margin: 0 0 .8vh; } .fx-live__icon { width: 4.6vh; height: 4.6vh; border-radius: 50%; background: #fdf7ea center/cover no-repeat; border: .3vh solid rgba(255, 255, 255, .35); flex: 0 0 auto; } .fx-live__site { font-size: 2.1vh; color: #b9c1de; letter-spacing: .02em; } .fx-live__title { margin: 0; font-size: 6.2vh; font-weight: 700; line-height: 1.15; letter-spacing: .01em; background: none; padding: 0; border: 0; color: #fff; } .fx-live__title::before, .fx-live__title::after { content: none; } .fx-live__lead { margin: 1vh 0 0; font-size: 2.6vh; color: #ffc07a; line-height: 1.4; } .fx-live__stamp { margin: .6vh 0 0; font-size: 2vh; color: #9aa4c8; font-variant-numeric: tabular-nums; } .fx-live__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 2vh 0 0; } .fx-live__foot { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; padding-top: 1.4vh; border-top: .2vh solid rgba(255, 255, 255, .16); font-size: 1.7vh; color: #8c96bd; } .fx-live__url { color: #ffc07a; font-weight: 700; white-space: nowrap; } /* ---- 2枚組 ---- */ .fx-live__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2vw; height: 100%; } .fx-live__panel { background: rgba(255, 255, 255, .07); border: .2vh solid rgba(255, 255, 255, .14); border-radius: 1.6vh; padding: 2.4vh 1.8vw; display: flex; flex-direction: column; min-height: 0; } .fx-live__panel h2 { margin: 0 0 1.6vh; padding: 0 0 0 .8vw; background: none; border: 0; border-left: .6vh solid #f08a1e; border-radius: 0; color: #fff; font-size: 3vh; line-height: 1.3; } .fx-live__panel h2::before, .fx-live__panel h2::after { content: none; } /* ---- 拡大・縮小のカウンタ ---- */ .fx-live__counts { display: flex; gap: 1.6vw; margin: 0 0 2vh; } .fx-live__count { flex: 1 1 0; display: flex; align-items: baseline; justify-content: center; gap: .6vw; padding: 1.4vh 0; border-radius: 1.2vh; background: rgba(0, 0, 0, .22); } .fx-live__count b { font-size: 8vh; line-height: 1; font-variant-numeric: tabular-nums; } .fx-live__count span { font-size: 2.4vh; color: #ccd2e6; } .fx-live__count.-up b { color: #5fe0a0; } .fx-live__count.-down b { color: #ff8f8a; } .fx-live__alerts { margin: 0; padding: 0; list-style: none; overflow: hidden; } .fx-live__alerts li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dir name" "dir text"; gap: .2vh .8vw; padding: 1vh 0; border-bottom: .1vh dashed rgba(255, 255, 255, .16); font-size: 2.1vh; } .fx-live__alerts em { grid-area: dir; align-self: center; font-style: normal; font-weight: 700; padding: .3vh .7vw; border-radius: .6vh; font-size: 1.9vh; } .fx-live__alerts em.-up { background: rgba(95, 224, 160, .18); color: #5fe0a0; } .fx-live__alerts em.-down { background: rgba(255, 143, 138, .18); color: #ff8f8a; } .fx-live__alerts b { grid-area: name; font-weight: 700; } .fx-live__alerts span { grid-area: text; color: #b9c1de; font-size: 1.85vh; } /* ---- 表 ---- */ .fx-live__table { width: 100%; border-collapse: collapse; } .fx-live__table th, .fx-live__table td { padding: 1.25vh .6vw; border-bottom: .1vh solid rgba(255, 255, 255, .14); text-align: left; font-size: 2.4vh; background: none; color: #fff; } .fx-live__table th { font-weight: 700; white-space: nowrap; } .fx-live__table .-broker { color: #ccd2e6; font-size: 2.1vh; } .fx-live__table .-val { text-align: right; font-weight: 700; font-size: 3.4vh; color: #ffc07a; font-variant-numeric: tabular-nums; white-space: nowrap; } .fx-live__table .-val small { font-size: .5em; margin-left: .2em; color: #b9c1de; } .fx-live__table.-gap .-val.-up { color: #5fe0a0; } .fx-live__table.-gap .-val.-down { color: #ff8f8a; } .fx-live__note { margin: 1.4vh 0 0; font-size: 1.8vh; color: #9aa4c8; } .fx-live__none { font-size: 2.6vh; color: #ccd2e6; } .fx-live__none.-big { font-size: 4vh; text-align: center; margin: auto; } /* ---- キャンペーンのカード ---- */ .fx-live__cards { display: grid; /* 列数は枚数に応じて broadcast.php がインラインで上書きする */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6vh 1.4vw; align-content: center; } .fx-live__card { background: rgba(255, 255, 255, .08); border: .2vh solid rgba(255, 255, 255, .16); border-top: .7vh solid #f08a1e; border-radius: 1.4vh; padding: 1.8vh 1vw; display: flex; flex-direction: column; gap: .6vh; min-height: 0; } .fx-live__cardBroker { margin: 0; font-size: 1.9vh; color: #ffc07a; font-weight: 700; } .fx-live__card h3 { margin: 0; padding: 0; border: 0; background: none; color: #fff; font-size: 2.5vh; line-height: 1.35; } .fx-live__card h3::before, .fx-live__card h3::after { content: none; } .fx-live__cardPair { margin: 0; font-size: 1.9vh; color: #b9c1de; } .fx-live__cardText { margin: 0; font-size: 2.1vh; line-height: 1.6; color: #ccd2e6; } .fx-live__cardEnd { margin: auto 0 0; font-size: 2vh; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } /* ---- 順位ボード ---- */ .fx-live__rank { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.2vh; } .fx-live__rank li { display: flex; align-items: center; gap: 1.4vw; padding: 1.4vh 1.4vw; background: rgba(255, 255, 255, .07); border-radius: 1.2vh; } .fx-live__no { flex: 0 0 auto; width: 6vh; height: 6vh; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .25); font-size: 3vh; font-weight: 700; font-variant-numeric: tabular-nums; } .fx-live__rank li:nth-child(1) .fx-live__no { background: #f6c445; color: #4a3607; } .fx-live__rank li:nth-child(2) .fx-live__no { background: #d8dde3; color: #38404a; } .fx-live__rank li:nth-child(3) .fx-live__no { background: #e2b183; color: #4d3115; } .fx-live__name { flex: 1 1 auto; font-size: 3.2vh; font-weight: 700; } .fx-live__num { flex: 0 0 auto; font-size: 4.4vh; font-weight: 700; color: #ffc07a; font-variant-numeric: tabular-nums; } .fx-live__num small { font-size: .45em; margin-left: .2em; color: #b9c1de; } /* ---- 縦長の画面では2枚組を縦積みにする（撮影用ではないが崩さない） ---- */ @media (max-aspect-ratio: 5/4) { .fx-live__grid { grid-template-columns: 1fr; } .fx-live__cards { grid-template-columns: repeat(2, 1fr); } .fx-live__title { font-size: 4.4vh; } }