に出力する。 * そのため body.ipo-live-mode というセレクタでは当たらない。 * 要素を限定せず .ipo-live-mode と書くこと。 */ .ipo-live-mode .l-header, .ipo-live-mode .l-fixHeader, .ipo-live-mode .l-sidebar, .ipo-live-mode .l-footer, .ipo-live-mode .p-breadcrumb, .ipo-live-mode .c-postTitle, .ipo-live-mode .l-articleBottom, .ipo-live-mode #sidebar, .ipo-live-mode .p-fixBtn, .ipo-live-mode .c-shareBtns { display: none !important; } .ipo-live-mode, body:has(.ipo-live-mode) { background: #131b38; } .ipo-live-mode .l-content, .ipo-live-mode .l-mainContent, .ipo-live-mode .post_content { margin: 0 !important; padding: 0 !important; max-width: none !important; } /* ---- 1枚板 ---- */ .ipo-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, 161, 58, .20) 0%, rgba(240, 161, 58, 0) 55%), linear-gradient(160deg, #2a3663 0%, #141c3a 100%); color: #fff; font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Meiryo", sans-serif; overflow: hidden; } .ipo-live__head { flex: 0 0 auto; } .ipo-live__brand { display: flex; align-items: center; gap: .8vw; margin: 0 0 .8vh; } .ipo-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; } .ipo-live__site { font-size: 2.1vh; color: #b9c1de; letter-spacing: .02em; } .ipo-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; } .ipo-live__title::before, .ipo-live__title::after { content: none; } .ipo-live__lead { margin: 1vh 0 0; font-size: 2.6vh; color: #ffc07a; line-height: 1.4; } .ipo-live__stamp { margin: .6vh 0 0; font-size: 2vh; color: #9aa4c8; font-variant-numeric: tabular-nums; } .ipo-live__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 2vh 0 0; /* * 中身が入りきらないとき、フッターの上に重なって文字が二重に見える。 * 本番だけで起きる（テーマのCSSがぶんだけ背が高くなるため、 * ローカルのプレビューでは再現しない）。はみ出しは重ねずに切る。 */ overflow: hidden; } .ipo-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; } .ipo-live__url { color: #ffc07a; font-weight: 700; white-space: nowrap; } /* ---- 2枚組 ---- */ .ipo-live__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2vw; height: 100%; } .ipo-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; } .ipo-live__panel h2 { margin: 0 0 1.6vh; padding: 0 0 0 .8vw; background: none; border: 0; border-left: .6vh solid #f0a13a; border-radius: 0; color: #fff; font-size: 3vh; line-height: 1.3; } .ipo-live__panel h2::before, .ipo-live__panel h2::after { content: none; } /* ---- カウンタ ---- */ .ipo-live__counts { display: flex; gap: 1.2vw; margin: 0 0 2vh; } .ipo-live__count { flex: 1 1 0; display: flex; align-items: baseline; justify-content: center; gap: .5vw; padding: 1.4vh 0; border-radius: 1.2vh; background: rgba(0, 0, 0, .22); } .ipo-live__count b { font-size: 7.4vh; line-height: 1; font-variant-numeric: tabular-nums; } .ipo-live__count span { font-size: 2.2vh; color: #ccd2e6; } .ipo-live__count.-open b { color: #5fe0a0; } .ipo-live__count.-new b { color: #ffc07a; } .ipo-live__count.-close b { color: #ff8f8a; } /* ---- 動きのリスト ---- */ .ipo-live__moves { margin: 0; padding: 0; list-style: none; overflow: hidden; } .ipo-live__moves li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tag name" "tag text"; gap: .2vh .8vw; padding: 1vh 0; border-bottom: .1vh dashed rgba(255, 255, 255, .16); font-size: 2.1vh; } .ipo-live__moves em { grid-area: tag; align-self: center; font-style: normal; font-weight: 700; padding: .3vh .7vw; border-radius: .6vh; font-size: 1.9vh; white-space: nowrap; } .ipo-live__moves em.-new { background: rgba(255, 192, 122, .18); color: #ffc07a; } .ipo-live__moves em.-open { background: rgba(95, 224, 160, .18); color: #5fe0a0; } .ipo-live__moves em.-close { background: rgba(255, 143, 138, .18); color: #ff8f8a; } .ipo-live__moves b { grid-area: name; font-weight: 700; } .ipo-live__moves span { grid-area: text; color: #b9c1de; font-size: 1.85vh; } /* ---- 表 ---- */ .ipo-live__table { width: 100%; border-collapse: collapse; } .ipo-live__table th, .ipo-live__table td { /* * 1.25vh だとカレンダー（6行＋見出し）が注記ごとフッターに食い込む。 * 本番はテーマのぶんさらに背が高くなるので、余白を24px以上残す */ padding: .95vh .6vw; border-bottom: .1vh solid rgba(255, 255, 255, .14); text-align: left; font-size: 2.4vh; background: none; color: #fff; } .ipo-live__table th { font-weight: 700; white-space: nowrap; } .ipo-live__table .-sub { color: #ccd2e6; font-size: 2.1vh; } .ipo-live__table .-val { text-align: right; font-weight: 700; font-size: 3.4vh; color: #ffc07a; font-variant-numeric: tabular-nums; white-space: nowrap; } .ipo-live__table .-val small { font-size: .5em; margin-left: .2em; color: #b9c1de; } .ipo-live__note { margin: 1.4vh 0 0; font-size: 1.8vh; color: #9aa4c8; } .ipo-live__none { font-size: 2.6vh; color: #ccd2e6; } .ipo-live__none.-big { font-size: 3.6vh; text-align: center; margin: auto; line-height: 1.6; } .ipo-live__none.-big small { display: block; margin-top: 1.4vh; font-size: .62em; color: #9aa4c8; } /* ---- 順位ボード ---- */ .ipo-live__rank { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.1vh; } .ipo-live__rank li { display: flex; align-items: center; gap: 1.4vw; padding: 1.2vh 1.4vw; background: rgba(255, 255, 255, .07); border-radius: 1.2vh; } .ipo-live__no { flex: 0 0 auto; width: 5.6vh; height: 5.6vh; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .25); font-size: 2.8vh; font-weight: 700; font-variant-numeric: tabular-nums; } .ipo-live__rank li:nth-child(1) .ipo-live__no { background: #f6c445; color: #4a3607; } .ipo-live__rank li:nth-child(2) .ipo-live__no { background: #d8dde3; color: #38404a; } .ipo-live__rank li:nth-child(3) .ipo-live__no { background: #e2b183; color: #4d3115; } .ipo-live__name { flex: 1 1 auto; font-size: 3vh; font-weight: 700; } .ipo-live__lead-badge { flex: 0 0 auto; font-size: 1.8vh; color: #ffc07a; background: rgba(255, 192, 122, .16); padding: .4vh .8vw; border-radius: .6vh; white-space: nowrap; } .ipo-live__num { flex: 0 0 auto; font-size: 4.2vh; font-weight: 700; color: #ffc07a; font-variant-numeric: tabular-nums; } .ipo-live__num small { font-size: .45em; margin-left: .2em; color: #b9c1de; } /* ---- 率の順位表（バー付き） ---- */ /* * バーと補助数字のぶん背が高い。 * 本番はテーマのCSSでさらに約24px伸びるので、ローカルで20px余っていても足りない。 * verify_on_live.py（本番のCSSを効かせた状態）で余白を見ながら決めた値 */ .ipo-live__rank.-rate { gap: .6vh; } .ipo-live__rank.-rate li { padding: .55vh 1.4vw; } .ipo-live__rank.-rate .ipo-live__no { width: 4.8vh; height: 4.8vh; font-size: 2.4vh; } .ipo-live__rank.-rate .ipo-live__name { font-size: 2.7vh; } .ipo-live__rank.-rate .ipo-live__num { font-size: 3.8vh; } .ipo-live__rank.-rate .ipo-live__name { display: flex; flex-direction: column; gap: .45vh; } .ipo-live__bar { display: block; height: 1vh; border-radius: .6vh; background: rgba(255, 255, 255, .1); overflow: hidden; } .ipo-live__bar i { display: block; height: 100%; background: #ffc07a; border-radius: .6vh; } .ipo-live__num .ipo-live__sub { display: block; font-style: normal; font-size: .38em; font-weight: 400; color: #b9c1de; text-align: right; } /* ---- 大きな1数字（銘柄カードの必要資金／動きなしの日数） ---- */ .ipo-live__big { margin: 0 0 2vh; font-size: 8.6vh; font-weight: 700; line-height: 1.05; color: #ffc07a; font-variant-numeric: tabular-nums; } .ipo-live__big small { font-size: .38em; margin-left: .2em; color: #b9c1de; } .ipo-live__big span { display: block; margin-top: .6vh; font-size: .28em; font-weight: 400; color: #ccd2e6; } /* ---- 事実の並び（定義リスト） ---- */ .ipo-live__facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1.1vh 1.4vw; align-items: baseline; } .ipo-live__facts dt { font-size: 2.1vh; color: #9aa4c8; white-space: nowrap; } .ipo-live__facts dd { margin: 0; font-size: 2.6vh; font-weight: 700; font-variant-numeric: tabular-nums; } .ipo-live__state { font-style: normal; font-size: 2.1vh; padding: .4vh .9vw; border-radius: .6vh; margin-right: .8vw; } .ipo-live__state.-open { background: rgba(95, 224, 160, .18); color: #5fe0a0; } .ipo-live__state.-new { background: rgba(255, 192, 122, .18); color: #ffc07a; } .ipo-live__state.-close { background: rgba(255, 143, 138, .18); color: #ff8f8a; } .ipo-live__days { margin-left: .8vw; font-size: 2.2vh; color: #ccd2e6; } /* ---- 幹事証券のチップ（最大14社を2列で畳む） ---- */ .ipo-live__leadline { margin: 0 0 1.4vh; font-size: 2.8vh; font-weight: 700; } .ipo-live__leadline span { display: inline-block; margin-right: .8vw; padding: .3vh .8vw; border-radius: .6vh; background: rgba(255, 192, 122, .16); color: #ffc07a; font-size: .62em; vertical-align: middle; } .ipo-live__chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .8vh .7vw; } .ipo-live__chips li { padding: .7vh 1vw; border-radius: .8vh; background: rgba(255, 255, 255, .08); font-size: 2.1vh; white-space: nowrap; } .ipo-live__chips li.-lead { background: rgba(255, 192, 122, .18); color: #ffc07a; font-weight: 700; } /* ---- 3つ並びの数字（必要資金のものさし） ---- */ .ipo-live__three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6vw; margin: 0 0 3vh; } .ipo-live__stat { padding: 1.8vh 1.2vw; background: rgba(255, 255, 255, .07); border-radius: 1.2vh; text-align: center; } .ipo-live__stat b { display: block; font-size: 5.6vh; font-weight: 700; color: #ffc07a; line-height: 1.05; font-variant-numeric: tabular-nums; } .ipo-live__stat b small { font-size: .4em; margin-left: .15em; color: #b9c1de; } .ipo-live__stat span { display: block; margin-top: .8vh; font-size: 2.2vh; color: #ccd2e6; } .ipo-live__stat em { display: block; margin-top: .4vh; font-style: normal; font-size: 1.8vh; color: #9aa4c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- レンジ帯 ---- */ .ipo-live__range { margin: 0 0 2.4vh; } .ipo-live__range-bar { position: relative; height: 2.4vh; border-radius: 1.2vh; background: linear-gradient(90deg, #5fe0a0 0%, #ffc07a 55%, #ff8f8a 100%); } .ipo-live__range-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); } .ipo-live__range-mark.-median { width: 2.6vh; height: 2.6vh; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5vh rgba(19, 27, 56, .85); } /* 1銘柄＝1本の目盛り。中央値マーカーと重なっても情報が壊れないよう細く薄く */ .ipo-live__tick { position: absolute; top: 50%; transform: translate(-50%, -50%); width: .3vh; height: 3.4vh; background: rgba(19, 27, 56, .55); border-radius: .2vh; } .ipo-live__range-legend { display: flex; justify-content: space-between; margin-top: 1.2vh; font-size: 2vh; color: #ccd2e6; font-variant-numeric: tabular-nums; } .ipo-live__punch { margin: 0 0 .4vh; font-size: 3vh; font-weight: 700; } .ipo-live__punch b { color: #ffc07a; font-size: 1.25em; } /* ---- 価格帯ごとの内訳 ---- */ .ipo-live__bands { margin: 2.4vh 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2vw; } .ipo-live__bands li { padding: 1.4vh 1vw; background: rgba(255, 255, 255, .06); border-radius: 1vh; text-align: center; } .ipo-live__bands b { display: block; font-size: 4.2vh; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; } .ipo-live__bands b small { font-size: .42em; margin-left: .15em; color: #b9c1de; } .ipo-live__bands span { display: block; margin-top: .5vh; font-size: 2vh; color: #ccd2e6; } /* ---- 銘柄カードの位置づけ ---- */ .ipo-live__compare { margin: 2vh 0 0; font-size: 2.2vh; color: #ccd2e6; } .ipo-live__compare b { color: #ffc07a; font-size: 1.35em; margin: 0 .15em; font-variant-numeric: tabular-nums; } /* ---- 月別の縦棒 ---- */ .ipo-live__months { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(12, 1fr); gap: .6vw; align-items: end; height: 34vh; } .ipo-live__months li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .ipo-live__mbar { width: 100%; min-height: .6vh; border-radius: .6vh .6vh 0 0; background: rgba(255, 192, 122, .55); } .ipo-live__months li.-peak .ipo-live__mbar { background: #ffc07a; } .ipo-live__months li.-zero .ipo-live__mbar { background: rgba(255, 255, 255, .12); } .ipo-live__months li.-future .ipo-live__mbar { background: none; border-bottom: .2vh dashed rgba(255, 255, 255, .18); } .ipo-live__months li.-future b, .ipo-live__months li.-future em { color: #5c6489; } .ipo-live__months b { margin-top: .6vh; font-size: 2.2vh; font-variant-numeric: tabular-nums; } .ipo-live__months li.-zero b { color: #6f7899; } .ipo-live__months em { font-style: normal; font-size: 1.8vh; color: #9aa4c8; } /* ---- 縦長の画面では2枚組を縦積みにする（撮影用ではないが崩さない） ---- */ @media (max-aspect-ratio: 5/4) { .ipo-live__grid { grid-template-columns: 1fr; } .ipo-live__title { font-size: 4.4vh; } } /* ============================================================ * 収録用ボード第2弾（毎日・毎週かならず変わるもの） * ============================================================ */ /* ---- 締切カウントダウン ---- */ .ipo-live__cdname { margin: 0 0 1vh; font-size: 3vh; font-weight: 700; } .ipo-live__cd { display: flex; align-items: baseline; gap: .4vw; } .ipo-live__cd b { font-size: 15vh; line-height: 1; color: #ffc07a; font-variant-numeric: tabular-nums; } .ipo-live__cd span { font-size: 4vh; color: #ccd2e6; } /* 合計の板は、大きな数字＋表＋注記＋導線で詰まるので数字を少し小さく */ .ipo-live__big.-total { font-size: 7vh; margin-bottom: 1.2vh; } /* ---- 口座への導線（画面はクリックできないので読み上げ用のURLを出す） ---- */ .ipo-live__cta { margin: 1.4vh 0 0; padding: 1vh 1.2vw; border-radius: 1vh; background: rgba(255, 192, 122, .14); font-size: 2.1vh; color: #ffd9ab; } .ipo-live__cta b { margin-left: .8vw; color: #ffc07a; font-size: 1.15em; } /* ---- 2週間の帯カレンダー ---- */ .ipo-week { display: flex; flex-direction: column; gap: .9vh; } .ipo-week__head, .ipo-week__row { display: flex; align-items: center; gap: 1vw; } .ipo-week__name { flex: 0 0 26%; font-size: 2.2vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ipo-week__days { flex: 1 1 auto; display: grid; grid-template-columns: repeat(14, 1fr); gap: .3vw; } .ipo-week__day { text-align: center; font-size: 1.7vh; color: #9aa4c8; } .ipo-week__day.-sat { color: #8fb7ff; } .ipo-week__day.-sun { color: #ff9b95; } .ipo-week__day.-today { color: #fff; font-weight: 700; } .ipo-week__cell { height: 3.4vh; border-radius: .5vh; background: rgba(255, 255, 255, .07); } .ipo-week__cell.-bb { background: #ffc07a; } .ipo-week__cell.-ap { background: #5fe0a0; } .ipo-week__cell.-today { box-shadow: inset 0 0 0 .3vh #fff; } .ipo-live__legend { margin: 1.6vh 0 0; font-size: 1.9vh; color: #ccd2e6; } .ipo-live__legend i { display: inline-block; width: 2.2vh; height: 1.4vh; margin: 0 .5vw 0 1.4vw; border-radius: .3vh; vertical-align: middle; } .ipo-live__legend i.-bb { background: #ffc07a; } .ipo-live__legend i.-ap { background: #5fe0a0; } .ipo-live__legend i.-today { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .25vh #fff; } /* ---- 上場までの道のり ---- */ .ipo-road { list-style: none; margin: 0 0 2vh; padding: 0; display: flex; } .ipo-road__step { flex: 1 1 0; position: relative; text-align: center; padding-top: 3.4vh; } .ipo-road__step::before { content: ""; position: absolute; top: 1.5vh; left: 0; right: 0; height: .5vh; background: rgba(255, 255, 255, .12); } .ipo-road__step.-done::before { background: #ffc07a; } .ipo-road__dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3.2vh; height: 3.2vh; border-radius: 50%; background: #2b3358; box-shadow: inset 0 0 0 .4vh rgba(255, 255, 255, .25); } .ipo-road__step.-done .ipo-road__dot { background: #ffc07a; box-shadow: none; } .ipo-road__step.-now .ipo-road__dot { background: #5fe0a0; box-shadow: 0 0 0 .8vh rgba(95, 224, 160, .25); } .ipo-road__step b { display: block; margin-top: 1vh; font-size: 2.3vh; } .ipo-road__date { display: block; font-size: 1.8vh; color: #9aa4c8; font-variant-numeric: tabular-nums; } .ipo-road__left { display: block; font-size: 1.8vh; color: #ffc07a; } .ipo-road__step.-unknown b, .ipo-road__step.-unknown .ipo-road__date { color: #6f7899; } .ipo-live__facts.-wide { grid-template-columns: auto 1fr auto 1fr; } /* ---- ◯×の表 ---- */ .ipo-matrix { width: 100%; border-collapse: collapse; } .ipo-matrix th, .ipo-matrix td { padding: .9vh .6vw; border-bottom: .1vh solid rgba(255, 255, 255, .14); font-size: 2.1vh; color: #fff; text-align: center; } .ipo-matrix thead th { color: #ccd2e6; font-size: 1.9vh; } .ipo-matrix tbody th { text-align: left; font-weight: 700; } .ipo-matrix td.-ok { color: #5fe0a0; font-size: 2.6vh; font-weight: 700; } .ipo-matrix td.-ng { color: #6f7899; } /* ---- 銘柄カードの「どんな会社か」（1〜2行） ---- */ .ipo-live__biz { margin: 0 0 1.4vh; padding: 1vh 1.2vw; border-left: .5vh solid rgba(255, 192, 122, .55); background: rgba(255, 255, 255, .05); border-radius: 0 1vh 1vh 0; font-size: 2.1vh; line-height: 1.6; color: #e6ebff; } /* ---- 銘柄の選択欄（収録用。撮るときは Esc か × で消す） ---- */ .ipo-pick { position: absolute; top: 2vh; right: 2vw; z-index: 2; display: flex; align-items: center; gap: .5vw; padding: .6vh .6vw; border-radius: 1vh; background: rgba(0, 0, 0, .38); border: .2vh solid rgba(255, 255, 255, .18); } .ipo-pick select { max-width: 26vw; padding: .5vh .6vw; border: 0; border-radius: .7vh; background: #fff; color: #2b3358; font-size: 1.9vh; font-family: inherit; } .ipo-pick__hide { width: 3.2vh; height: 3.2vh; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 2vh; line-height: 1; cursor: pointer; } .ipo-pick__hide:hover { background: rgba(255, 255, 255, .35); }