/* 全体設定 */
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
width: 100%;
height: 100%;
font-family: "Yu Gothic", sans-serif;
background: #fff;
}
/* カラフル背景（相対サイズ） */
.bg-shapes {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background:
radial-gradient(circle at 10% 20%, #ff4fa3 0%, transparent 60%),
radial-gradient(circle at 80% 10%, #ffd400 0%, transparent 60%),
radial-gradient(circle at 20% 80%, #4fc3ff 0%, transparent 60%),
radial-gradient(circle at 90% 70%, #7cff7c 0%, transparent 60%),
radial-gradient(circle at 50% 50%, #c08cff 0%, transparent 60%),
radial-gradient(circle at 60% 30%, #ff2b2b 0%, transparent 60%);
opacity: 0.35;
z-index: 0;
}
.container {
max-width: 960px;
margin: auto;
padding: 24px;
position: relative;
z-index: 1;
}
/* ★★★ タイトル（2行・中央揃え・絶対折り返さない） ★★★ */
.title-line {
text-align: center;
margin: 0;
padding: 0;
white-space: nowrap; /* 折り返し禁止 */
}
/* ★ 上段：添付ロゴの虹色グラデーション ★ */
.title-main {
font-size: clamp(40px, 7vw, 90px);
font-weight: 900;
background: linear-gradient(
90deg,
#4cd964, /* 緑 */
#ffd400, /* 黄 */
#ff9500, /* 橙 */
#ff2b2b, /* 赤 */
#c08cff /* 紫 */
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 立体影 */
text-shadow:
-3px -3px 0 #ffffff,
3px -3px 0 #ffffff,
-3px 3px 0 #ffffff,
3px 3px 0 #ffffff,
0px 6px 0px rgba(0,0,0,0.15),
0px 10px 8px rgba(0,0,0,0.25);
}
/* ★ 下段：添付ロゴのピンク＋水色のぷっくり文字 ★ */
.title-sub {
font-size: clamp(32px, 6vw, 70px);
font-weight: 900;
color: #ff4fa3;
background: linear-gradient(180deg, #ffb7e6, #ff4fa3);
-webkit-background-clip: text;
-webkit-text-fill-color: #ff4fa3;
text-shadow:
-3px -3px 0 #ffffff,
3px -3px 0 #ffffff,
-3px 3px 0 #ffffff,
3px 3px 0 #ffffff,
0px -4px 6px rgba(255,255,255,0.9),
0px 6px 0px #ff8ac7,
0px 10px 6px rgba(255, 80, 160, 0.5),
0px 14px 12px rgba(0,0,0,0.25);
}
.subtitle {
text-align: center;
color: #555;
font-size: 18px;
margin-top: 10px;
}
/* メニュー */
.menu {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin: 40px 0;
}
.menu-item {
display: block;
padding: 20px;
border-radius: 16px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: white;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.menu-item:hover {
transform: translateY(-4px);
box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
/* 6人のキャラカラー（暖色→寒色） */
.pink { background: #ff4fa3; }
.red { background: #ff2b2b; }
.purple { background: #c08cff; }
.blue { background: #4fc3ff; }
.yellow { background: #ffd400; color: #333; }
.green { background: #7cff7c; color: #333; }
.footer {
text-align: center;
color: #777;
margin-top: 20px;
}
/* ===== ここから下は攻略サイトの追加分（封入率・カード一覧の表） ===== */
/* 背景の色が濃いので、読み物の部分は白い紙の上に置く */
.card {
background: #fff;
border-radius: 12px;
padding: 1.2em 1.4em;
margin: 1.2em 0;
box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}
.card h3 {
margin: 0 0 .8em;
font-size: 1.1em;
padding-bottom: .4em;
border-bottom: 2px solid #ff4fa3;
}
/* 表は横に長くなる。ページ全体を横スクロールさせず、表の中だけで送る */
.table-wrap { overflow-x: auto; }
.table-wrap table {
border-collapse: collapse;
width: 100%;
font-size: .95em;
}
.table-wrap th,
.table-wrap td {
border-bottom: 1px solid #eef0f4;
padding: .5em .45em;
text-align: left;
}
/* 折り返しを禁止すると、スマホ幅で右端の列が画面外に出る。
いちばん読みたい「何枚に1枚」が見えなくなるので、折り返しは許す。
番号とレア度だけは途中で割れると読めないので、そこだけ禁止する */
.table-wrap td.num,
.table-wrap td.rarity,
.table-wrap th { white-space: nowrap; }
.table-wrap thead th {
background: #fdf2f8;
border-bottom: 2px solid #ffc0dd;
position: sticky;
top: 0;
}
.table-wrap td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap td.rarity { letter-spacing: -.05em; }
.table-wrap tbody tr:hover { background: #fffaf0; }
.note { font-size: .9em; line-height: 1.8; color: #555; margin: .8em 0 0; }
.how { font-size: .95em; line-height: 1.9; color: #333; margin: 0 0 0 1.2em; padding: 0; }
/* 絞り込み。16px未満だとiOSがフォーカス時に拡大するので下回らせない */
.filter {
width: 100%;
padding: .6em .7em;
margin-bottom: .9em;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
}
/* ページ下部の移動リンク。トップのメニューより控えめにする */
.menu-sub { margin-top: 1.4em; }
.footer-note { font-size: .82em; line-height: 1.7; color: #666; }
/* 読み物ページの見出し。.title-main のグラデーションは
サイト名（大きく短い文字）向けで、ページ名に使うと背景に溶けて読めない */
.page-title {
text-align: center;
margin: 0;
font-size: clamp(26px, 6vw, 40px);
font-weight: 900;
color: #2b2b3a;
text-shadow: 0 2px 0 #fff, 0 3px 6px rgba(0, 0, 0, .12);
}
/* 率と目安は1つの枠にまとめる。列を分けると、スマホ幅で右端が切れて
いちばん読みたい「何枚に1枚」が見えなくなる */
.rate-main { font-weight: bold; }
/* 背景に色が付くので、添え字は薄いグレーだと沈む */
.rate-sub { color: #40454d; font-size: .86em; margin-left: .35em; white-space: nowrap; }
/* 狭い画面では率と目安を縦に積む。横に並べると入り切らない */
@media (max-width: 560px) {
.container { padding: 16px 12px; }
.card { padding: 1em .9em; }
.rate-sub { display: block; margin-left: 0; }
}
/* 見出しの直後に置く前置き。表を読む前に「何が言えるか」を先に渡す */
.lead { font-size: .95em; line-height: 1.85; color: #333; margin: 0 0 .9em; }
.lead-note { font-size: .86em; color: #777; margin: -.5em 0 .9em; }
/* 並べ替えできる見出し。押せることが分かる見た目にする */
.table-wrap th .sort {
background: none; border: none; padding: 0;
font: inherit; font-weight: bold; color: #a8206a;
cursor: pointer; white-space: nowrap;
}
.table-wrap th .sort::after { content: " ⇅"; font-size: .85em; color: #c9a3b6; }
.table-wrap th .sort.is-on { color: #7a1450; text-decoration: underline; }
.table-wrap th .sort[data-dir="down"]::after { content: " ▼"; color: #a8206a; }
.table-wrap th .sort[data-dir="up"]::after { content: " ▲"; color: #a8206a; }
/* 封入率の色分け。行の縞（hover）に負けないよう、背景は inline style で入れている。
hover の背景がこれを上書きすると色の意味が消えるので、そこは透かさない */
.table-wrap td.heat { border-left: 1px solid #fff; border-right: 1px solid #fff; }
.table-wrap tbody tr:hover td.heat { filter: brightness(.97); }
/* 色の意味を1行で示す。数字だけでも読めるので、これは補助 */
.legend { display: flex; align-items: center; gap: .5em; font-size: .82em; color: #777; margin: 0 0 .7em; }
.legend-bar {
flex: 1; height: .7em; border-radius: .35em;
background: linear-gradient(90deg,
rgb(232,90,70), rgb(247,140,85), rgb(253,190,110), rgb(253,232,160),
rgb(205,235,245), rgb(130,190,232), rgb(70,150,220));
}
.legend-l { order: -1; white-space: nowrap; }
.legend-r { white-space: nowrap; }
/* ボタンが1つのときは1列にして中央へ。.menu は2列のグリッドなので、
justify-content だけでは左の列に居座ったままになる。
ゲームが増えたらこの指定は付かず、通常の2列に戻る */
.menu-center {
grid-template-columns: minmax(0, 22em);
justify-content: center;
}
/* ===== ポータル（ゲーム選択）。ゲームごとのページとは配色を分ける ===== */
/* アイプリ以下は作品に寄せた暖色。ポータルは他のゲームも並ぶ場所なので、
droplog 自身の色（アイコンと同じ水色）にして中立にする */
.portal .bg-shapes {
background:
radial-gradient(circle at 12% 18%, #7fd8ff 0%, transparent 58%),
radial-gradient(circle at 84% 12%, #a9e8ff 0%, transparent 58%),
radial-gradient(circle at 22% 82%, #4a90d9 0%, transparent 62%),
radial-gradient(circle at 88% 76%, #8ecbff 0%, transparent 60%),
radial-gradient(circle at 50% 48%, #d6f2ff 0%, transparent 70%);
opacity: .45;
}
.portal-drop {
display: block;
margin: 0 auto .4em;
width: clamp(64px, 12vw, 104px);
height: auto;
filter: drop-shadow(0 4px 10px rgba(26, 60, 100, .28));
}
.portal-title {
text-align: center;
margin: 0;
font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
font-weight: 800;
font-size: clamp(28px, 6.5vw, 46px);
color: #12456f;
letter-spacing: .04em;
text-shadow: 0 2px 0 #fff, 0 4px 10px rgba(18, 69, 111, .18);
}
.portal .subtitle { color: #2a5f88; }
.portal .menu-item.pink { background: #2f8fd6; }
/* 攻略ポータルへ戻るボタン。中身のページより控えめな色にする */
.menu-item.portal { background: #6b7fa8; }
/* ===== ゲームページの装飾見出し ===== */
/* 丸ゴシック＋1文字ずつの色＋白フチ。公式ロゴの模写ではなく、
droplog の見出しとしての装飾。飾り（翼・星など）は付けない */
.deco-title {
text-align: center;
margin: 0;
font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
font-weight: 800;
font-size: clamp(30px, 8.5vw, 62px);
line-height: 1.18;
letter-spacing: .01em;
}
.deco-title span {
color: var(--c);
/* 白フチ→濃いフチ→影の三重。太さは em で置いて、字が大きくなると太くなる */
text-shadow:
0.055em 0 0 #fff, -0.055em 0 0 #fff,
0 0.055em 0 #fff, 0 -0.055em 0 #fff,
0.04em 0.04em 0 #fff, -0.04em 0.04em 0 #fff,
0.04em -0.04em 0 #fff, -0.04em -0.04em 0 #fff,
0.09em 0.09em 0 rgba(120, 80, 140, .22),
0 0.11em 0.12em rgba(80, 50, 100, .3);
}
.deco-sub {
text-align: center;
margin: .15em 0 0;
font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
font-weight: 800;
font-size: clamp(15px, 3.4vw, 22px);
color: #b4407e;
text-shadow: 0 2px 0 #fff;
}
/* 装飾見出しは2行組み。行ごとに大きさを変えて、下の行を主役にする */
.deco-line { display: block; }
.deco-title .deco-line:first-child { font-size: .58em; }
/* ポータルに並ぶ作品ボタン。文字自体が看板なので、地は色を邪魔しない程度に */
.menu-item.game-card {
background: rgba(255, 255, 255, .82);
padding: .5em .35em;
/* この1か所だけが画面幅で動く。中の寸法はすべて em なので、
どの幅でも並びの比率は変わらない（画像と同じ挙動） */
font-size: clamp(18px, 6.2vw, 34px);
font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
font-weight: 800;
line-height: 1.16;
box-shadow: 0 3px 10px rgba(20, 70, 110, .18);
}
.menu-item.game-card .deco-line:first-child { font-size: .62em; }
.menu-item.game-card span span {
color: var(--c);
text-shadow:
0.05em 0 0 #fff, -0.05em 0 0 #fff,
0 0.05em 0 #fff, 0 -0.05em 0 #fff,
0.07em 0.07em 0 rgba(90, 60, 120, .18);
}
/* 作品ロゴを横に並べる。狭い画面では縦に積む */
.logo-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
gap: clamp(10px, 4vw, 40px);
}
.logo {
font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
font-weight: 800;
font-size: clamp(24px, 6.4vw, 46px);
line-height: 1.16;
text-align: center;
}
.logo .deco-line:first-child { font-size: .6em; }
.logo span span {
color: var(--c);
text-shadow:
0.055em 0 0 #fff, -0.055em 0 0 #fff,
0 0.055em 0 #fff, 0 -0.055em 0 #fff,
0.04em 0.04em 0 #fff, -0.04em 0.04em 0 #fff,
0.04em -0.04em 0 #fff, -0.04em -0.04em 0 #fff,
0.09em 0.09em 0 rgba(120, 80, 140, .22),
0 0.11em 0.12em rgba(80, 50, 100, .3);
}
/* 1つの枠を左右に分けたボタン。行き先が2つある項目に使う */
.menu-item.split { display: flex; padding: 0; overflow: hidden; }
.menu-item.split a {
flex: 1;
display: flex; flex-direction: column; justify-content: center;
padding: 14px 8px;
color: inherit; text-decoration: none; font-size: .9em; line-height: 1.35;
}
.menu-item.split a:first-child { border-right: 2px solid rgba(255, 255, 255, .55); }
.menu-item.split a:hover { background: rgba(255, 255, 255, .22); }
.split-sub { font-size: .82em; opacity: .9; font-weight: normal; }
/* まだ用意できていない項目。押せないことが見て分かる形にする。
隠さないのは「これから増える」ことを伝えたいため */
.menu-item.is-soon {
background: #cfd4de;
color: #7b8494;
cursor: default;
box-shadow: none;
}
.menu-item.is-soon:hover { transform: none; }
.soon-note { font-size: .78em; font-weight: normal; }
/* レア度の色。検索ツールの盤面と同じ色を使い、見え方を揃える。
セル定義（data/cell）から引いているので、ゲームごとに勝手に決めない */
.rc-purple { background-color: #dda0dd; }
.rc-pink { background-color: #ffc0cb; }
.rc-red { background-color: #f08080; }
.rc-yellowgreen { background-color: #c9e265; }
.rc-yellow { background-color: #f0e68c; }
.rc-cyan { background-color: #a8e4f0; }
.rc-white { background-color: #ffffff; }
.rc-blue { background-color: #a9c8f5; }
.rc-green { background-color: #90ee90; }
.rc-gray { background-color: #d3d3d3; }
.rc-orange { background-color: #ffc080; }
.rc-brown { background-color: #c69c6d; }
/* 白は紙の上だと見えないので、枠で位置が分かるようにする */
.table-wrap td.rc-white { box-shadow: inset 0 0 0 1px #e2e5ec; }
.table-wrap td.rarity { text-align: center; font-weight: bold; }
/* 検定の結果。色を付けすぎると「差があるほうが良い」と読めるので控えめに */
.judge-same { color: #55637a; font-weight: bold; }
.judge-diff { color: #a8206a; font-weight: bold; }
/* 大きな段落。読み物のまとまりを示す。カードより外側の見出し */
.part {
margin: 1.8em 0 .6em;
font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
font-weight: 800;
font-size: 1.15em;
color: #2b2b3a;
text-shadow: 0 2px 0 #fff;
padding-left: .5em;
border-left: 6px solid #e0489a;
}
/* 見出しと中身の寄せを揃える。左右がちぐはぐだと目が迷う */
.table-wrap th,
.table-wrap td,
.table-wrap td.num { text-align: center; }
/* 有意差の判定。「あり」を目立たせすぎない。
差が出ることが良いことのように読めてしまうため */
.judge-same, .judge-diff { font-size: 1em; letter-spacing: .02em; }
/* 表のセルの余白。5列の表がスマホ幅に収まるところまで詰める */
@media (max-width: 420px) {
.table-wrap th,
.table-wrap td { padding: .5em .28em; font-size: .93em; }
.rate-sub { font-size: .8em; }
}
/* ===== 鬼滅バトスラ。アイプリとは別の見た目にする =====
アイプリ 丸ゴシック・淡い暖色。작품の雰囲気に合わせている
バトスラ 明朝・黒地・和柄。タイトルロゴが明朝＋和柄なので寄せる
模様は市松・麻の葉・鱗・亀甲・青海波・縞。いずれも日本古来の和柄で、
模様そのものは誰のものでもない。公式のイラストは使わず、CSSで描いている */
.kbs { background: #0d0d10; }
.kbs .bg-shapes {
background:
radial-gradient(circle at 15% 10%, rgba(216, 53, 42, .16) 0%, transparent 55%),
radial-gradient(circle at 85% 85%, rgba(31, 138, 76, .14) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0%, transparent 70%);
opacity: 1;
}
.kbs .footer,
.kbs .footer-note { color: #8b8f98; }
.kbs .footer a { color: #c9ced8; }
/* 見出し。丸ゴシックをやめて明朝に */
.kbs .deco-title,
.kbs .deco-sub,
.kbs .page-title,
.kbs .part,
.kbs .card h3,
.kbs .logo,
.kbs .menu-item.game-card {
font-family: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 800;
}
/* 1文字ずつの色分けは、黒地では読みにくく作品の印象にも合わない。
バトスラは2色。「日輪」を金、「バトルスラッシュ」を白にする */
.kbs .logo span span { color: #f2f4f8 !important; }
.kbs .logo .deco-line:first-child {
font-size: .78em; /* 公式ロゴは「日輪」も大きい */
letter-spacing: .12em;
}
.kbs .logo .deco-line:first-child span { color: #d9b24a !important; }
.kbs .page-title { color: #f2f4f8; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.kbs .subtitle { color: #aeb4c0; }
.kbs .deco-sub { color: #d8352a; text-shadow: 0 1px 0 #000; }
.kbs .part {
color: #f2f4f8;
text-shadow: none;
border-left-color: #d8352a;
}
/* 読み物の中身は白い紙のまま。表の数字は黒地だと読みにくい */
.kbs .card { background: #fbfbfc; }
.kbs .card h3 { color: #1a1a20; border-bottom-color: #d8352a; }
/* ロゴの縁取りは黒地だと白フチが強すぎる。締める */
.kbs .logo span span {
text-shadow:
0.05em 0 0 #000, -0.05em 0 0 #000,
0 0.05em 0 #000, 0 -0.05em 0 #000,
0 0.09em 0.14em rgba(0, 0, 0, .8);
}
/* ===== 和柄のボタン =====
模様は薄く敷いて、文字を読ませる。地色で6つを見分ける */
.kbs .menu-item {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
background-color: #1a1a20;
background-blend-mode: overlay;
}
/* 市松（炭治郎）。緑と黒の格子 */
.kbs .menu-item.pink {
background-color: #1f8a4c;
background-image: repeating-conic-gradient(rgba(0,0,0,.55) 0% 25%, transparent 0% 50%);
background-size: 26px 26px;
}
/* 麻の葉（禰豆子）。正三角形の格子＋各三角形の重心へ引いた線 */
.kbs .menu-item.blue {
background-color: #d1798f;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2760%27%20height%3D%2752%27%20viewBox%3D%270%200%2060%2052%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.3%27%20stroke-opacity%3D%270.55%27%3E%3Cpath%20d%3D%27M-15.00%20-25.98%20L0.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M15.00%20-25.98%20L0.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L0.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M-15.00%20-25.98%20L15.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M15.00%20-25.98%20L0.00%200.00%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L-15.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M15.00%20-25.98%20L15.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L15.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L15.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M15.00%20-25.98%20L0.00%200.00%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L30.00%200.00%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L15.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M15.00%20-25.98%20L30.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M45.00%20-25.98%20L30.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L30.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M15.00%20-25.98%20L45.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M45.00%20-25.98%20L30.00%200.00%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L15.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M45.00%20-25.98%20L45.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L45.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L45.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M45.00%20-25.98%20L30.00%200.00%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L60.00%200.00%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L45.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M45.00%20-25.98%20L60.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M75.00%20-25.98%20L60.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L60.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M45.00%20-25.98%20L75.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M75.00%20-25.98%20L60.00%200.00%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L45.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M75.00%20-25.98%20L75.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L75.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L75.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M75.00%20-25.98%20L60.00%200.00%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L90.00%200.00%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L75.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M75.00%20-25.98%20L90.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M105.00%20-25.98%20L90.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L90.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M75.00%20-25.98%20L105.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M105.00%20-25.98%20L90.00%200.00%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L75.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M105.00%20-25.98%20L105.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L105.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L105.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M105.00%20-25.98%20L90.00%200.00%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L120.00%200.00%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L105.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M105.00%20-25.98%20L120.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M135.00%20-25.98%20L120.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L120.00%20-17.32%27%2F%3E%3Cpath%20d%3D%27M105.00%20-25.98%20L135.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M135.00%20-25.98%20L120.00%200.00%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L105.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M135.00%20-25.98%20L135.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L135.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M150.00%200.00%20L135.00%20-8.66%27%2F%3E%3Cpath%20d%3D%27M135.00%20-25.98%20L120.00%200.00%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L150.00%200.00%27%2F%3E%3Cpath%20d%3D%27M150.00%200.00%20L135.00%20-25.98%27%2F%3E%3Cpath%20d%3D%27M-30.00%200.00%20L-15.00%208.66%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L-15.00%208.66%27%2F%3E%3Cpath%20d%3D%27M-15.00%2025.98%20L-15.00%208.66%27%2F%3E%3Cpath%20d%3D%27M-30.00%200.00%20L0.00%200.00%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L-15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M-15.00%2025.98%20L-30.00%200.00%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L0.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M-15.00%2025.98%20L0.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L0.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L-15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M-15.00%2025.98%20L15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L0.00%200.00%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L15.00%208.66%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L15.00%208.66%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L15.00%208.66%27%2F%3E%3Cpath%20d%3D%27M0.00%200.00%20L30.00%200.00%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L0.00%200.00%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L30.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L30.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L30.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L45.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L30.00%200.00%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L45.00%208.66%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L45.00%208.66%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L45.00%208.66%27%2F%3E%3Cpath%20d%3D%27M30.00%200.00%20L60.00%200.00%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L45.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L30.00%200.00%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L60.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L60.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L60.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L45.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L75.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L60.00%200.00%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L75.00%208.66%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L75.00%208.66%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L75.00%208.66%27%2F%3E%3Cpath%20d%3D%27M60.00%200.00%20L90.00%200.00%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L75.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L60.00%200.00%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L90.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L90.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L90.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L75.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L105.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L90.00%200.00%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L105.00%208.66%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L105.00%208.66%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L105.00%208.66%27%2F%3E%3Cpath%20d%3D%27M90.00%200.00%20L120.00%200.00%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L105.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L90.00%200.00%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L120.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L120.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M135.00%2025.98%20L120.00%2017.32%27%2F%3E%3Cpath%20d%3D%27M120.00%200.00%20L105.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L135.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M135.00%2025.98%20L120.00%200.00%27%2F%3E%3Cpath%20d%3D%27M-15.00%2025.98%20L0.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L0.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L0.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M-15.00%2025.98%20L15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L0.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L-15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L15.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L15.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L15.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L0.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L30.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L30.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L30.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L30.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M15.00%2025.98%20L45.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L30.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L15.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L45.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L45.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L45.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L30.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L60.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L45.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L60.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L60.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L60.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M45.00%2025.98%20L75.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L60.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L45.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L75.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L75.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L75.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L60.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L90.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L75.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L90.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L90.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L90.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M75.00%2025.98%20L105.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L90.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L75.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L105.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L105.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L105.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L90.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L120.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L105.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L120.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M135.00%2025.98%20L120.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L120.00%2034.64%27%2F%3E%3Cpath%20d%3D%27M105.00%2025.98%20L135.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M135.00%2025.98%20L120.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L105.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M135.00%2025.98%20L135.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L135.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M150.00%2051.96%20L135.00%2043.30%27%2F%3E%3Cpath%20d%3D%27M135.00%2025.98%20L120.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L150.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M150.00%2051.96%20L135.00%2025.98%27%2F%3E%3Cpath%20d%3D%27M-30.00%2051.96%20L-15.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L-15.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M-15.00%2077.94%20L-15.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M-30.00%2051.96%20L0.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L-15.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M-15.00%2077.94%20L-30.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L0.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M-15.00%2077.94%20L0.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M15.00%2077.94%20L0.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L-15.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M-15.00%2077.94%20L15.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M15.00%2077.94%20L0.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L15.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L15.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M15.00%2077.94%20L15.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M0.00%2051.96%20L30.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L15.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M15.00%2077.94%20L0.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L30.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M15.00%2077.94%20L30.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M45.00%2077.94%20L30.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L15.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M15.00%2077.94%20L45.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M45.00%2077.94%20L30.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L45.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L45.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M45.00%2077.94%20L45.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M30.00%2051.96%20L60.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L45.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M45.00%2077.94%20L30.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L60.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M45.00%2077.94%20L60.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M75.00%2077.94%20L60.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L45.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M45.00%2077.94%20L75.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M75.00%2077.94%20L60.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L75.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L75.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M75.00%2077.94%20L75.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M60.00%2051.96%20L90.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L75.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M75.00%2077.94%20L60.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L90.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M75.00%2077.94%20L90.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M105.00%2077.94%20L90.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L75.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M75.00%2077.94%20L105.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M105.00%2077.94%20L90.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L105.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L105.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M105.00%2077.94%20L105.00%2060.62%27%2F%3E%3Cpath%20d%3D%27M90.00%2051.96%20L120.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L105.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M105.00%2077.94%20L90.00%2051.96%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L120.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M105.00%2077.94%20L120.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M135.00%2077.94%20L120.00%2069.28%27%2F%3E%3Cpath%20d%3D%27M120.00%2051.96%20L105.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M105.00%2077.94%20L135.00%2077.94%27%2F%3E%3Cpath%20d%3D%27M135.00%2077.94%20L120.00%2051.96%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* 鱗（善逸）。黄色地に白い三角 */
.kbs .menu-item.purple {
background-color: #e8a81f;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2740%27%20viewBox%3D%270%200%2032%2040%27%3E%3Cg%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.8%27%3E%3Cpath%20d%3D%27M16%200%20L32%2020%20L0%2020%20Z%27%2F%3E%3Cpath%20d%3D%27M0%2040%20L8%2020%20L16%2040%20Z%27%2F%3E%3Cpath%20d%3D%27M16%2040%20L24%2020%20L32%2040%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* 青海波（伊之助）。青地に重なる半円 */
.kbs .menu-item.green {
background-color: #2f7fd0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2740%27%20height%3D%2720%27%20viewBox%3D%270%200%2040%2020%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.45%27%20stroke-width%3D%271.6%27%3E%3Cpath%20d%3D%27M-20.00%2020.00%20A20.00%2020.00%200%200%201%2020.00%2020.00%27%2F%3E%3Cpath%20d%3D%27M0.00%2020.00%20A20.00%2020.00%200%200%201%2040.00%2020.00%27%2F%3E%3Cpath%20d%3D%27M20.00%2020.00%20A20.00%2020.00%200%200%201%2060.00%2020.00%27%2F%3E%3Cpath%20d%3D%27M-14.40%2020.00%20A14.40%2014.40%200%200%201%2014.40%2020.00%27%2F%3E%3Cpath%20d%3D%27M5.60%2020.00%20A14.40%2014.40%200%200%201%2034.40%2020.00%27%2F%3E%3Cpath%20d%3D%27M25.60%2020.00%20A14.40%2014.40%200%200%201%2054.40%2020.00%27%2F%3E%3Cpath%20d%3D%27M-9.20%2020.00%20A9.20%209.20%200%200%201%209.20%2020.00%27%2F%3E%3Cpath%20d%3D%27M10.80%2020.00%20A9.20%209.20%200%200%201%2029.20%2020.00%27%2F%3E%3Cpath%20d%3D%27M30.80%2020.00%20A9.20%209.20%200%200%201%2049.20%2020.00%27%2F%3E%3Cpath%20d%3D%27M-4.40%2020.00%20A4.40%204.40%200%200%201%204.40%2020.00%27%2F%3E%3Cpath%20d%3D%27M15.60%2020.00%20A4.40%204.40%200%200%201%2024.40%2020.00%27%2F%3E%3Cpath%20d%3D%27M35.60%2020.00%20A4.40%204.40%200%200%201%2044.40%2020.00%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* 和柄はボタンに付いている（色クラスを鍵にしている）。
game/top.html の色を入れ替えるときは、ここも一緒に動かす。
いまの対応: pink=市松(封入率) blue=麻の葉(カード一覧)
purple=鱗(note) green=青海波(公式サイト) */
/* 準備中は模様を出さない。押せないことが色で分かるように */
.kbs .menu-item.is-soon {
background-color: #2a2a33;
background-image: none;
color: #7b8494;
text-shadow: none;
}
.kbs .menu-item.portal { background-color: #3a3f4d; background-image: none; }
.kbs .menu-item.split a:first-child { border-right-color: rgba(0, 0, 0, .35); }
/* 狭い画面ではボタンを縦に積む。横に2つ並べると1つあたりの幅が
ロゴの幅を下回り、「鬼滅の刃」が下に折り返して並びが変わってしまう */
@media (max-width: 960px) {
.menu { grid-template-columns: 1fr; }
}
/* 攻略ポータルTOPに並ぶバトスラのボタン。
飛んだ先と同じ見た目にして、押す前と後で印象を変えない */
.menu-item.game-card.kbs-card {
background: #14141a;
font-family: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
box-shadow: 0 3px 12px rgba(20, 20, 26, .35);
}
.menu-item.game-card.kbs-card .deco-line:first-child {
/* 公式ロゴは「日輪」のほうが大きい。下の行はカタカナ8文字で長いので、
こちらを少し詰めて2行の幅を合わせる */
font-size: 1.05em;
letter-spacing: .16em;
}
.menu-item.game-card.kbs-card .deco-line:last-child {
font-size: .72em;
letter-spacing: .02em;
}
.menu-item.game-card.kbs-card .deco-line:first-child span { color: #d9b24a !important; }
.menu-item.game-card.kbs-card span span {
color: #f2f4f8 !important;
text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, .6);
}
/* アイプリのボタン。飛んだ先の背景と同じ配色にする。
白いままだと隣の黒（バトスラ）に負けて、選択肢として弱く見える */
.menu-item.game-card.aipri-card {
background:
radial-gradient(circle at 12% 20%, rgba(255, 158, 205, .46) 0%, transparent 64%),
radial-gradient(circle at 82% 12%, rgba(255, 233, 145, .50) 0%, transparent 64%),
radial-gradient(circle at 20% 84%, rgba(155, 214, 255, .44) 0%, transparent 64%),
radial-gradient(circle at 88% 78%, rgba(180, 240, 195, .42) 0%, transparent 64%),
#ffffff;
box-shadow: 0 3px 12px rgba(160, 80, 130, .28);
}
/* 2作品を1つのボタンに並べる。横に置くと縦にも横にも収まる */
.menu-item.game-card .logo-pair {
display: flex;
justify-content: center;
align-items: flex-end;
gap: .42em;
}
.menu-item.game-card .logo-pair > span { display: block; }
/* 1つの枠に2作品を入れるので、1作品あたりの幅が半分になる */
.menu-item.game-card .logo-pair .deco-line {
font-size: 1.14em;
white-space: nowrap;
}
.menu-item.game-card .logo-pair .deco-line:first-child { font-size: .68em; }
/* 作品名の左に置くシリーズ名（「鬼滅の刃」など）。
どのアニメの話かが、ロゴだけでは分からないため */
.menu-item.game-card .logo-row {
display: flex;
align-items: center;
justify-content: center;
gap: .6em;
}
.menu-item.game-card .logo-prefix {
/* 4文字を、右の「バトルスラッシュ」8文字と同じ幅まで字間で広げる。
文字自体を大きくすると作品名より目立つので、字間で幅を合わせる */
font-size: .82em;
/* letter-spacing は最後の文字の後ろにも入るので、その分を戻す */
letter-spacing: .79em;
margin-right: -.79em;
white-space: nowrap;
}