@charset "UTF-8";
/* ============================================================
もんど☆すとらの 人気投票 ─ 共有スタイル
単体部門ページと組み合わせ部門ページの両方から読み込む。
HTMLの に と書く
============================================================ */
/* ------------------------------------------------------------
① 設定値 ─ 色や寸法をここに集約する
------------------------------------------------------------
:root ＝ ページ全体を指す特別なセレクタ。
-- で始まる名前は「カスタムプロパティ」（CSSの変数）で、
使うときは var(--名前) と書く。
色を変えたくなったら、ここ1箇所を直せば全体に反映される
------------------------------------------------------------ */
:root {
/* --- インク ---
わずかに赤茶を含んだ黒。純黒より紙になじみ、
赤インクとも喧嘩しない */
--ink: #2a2320; /* 本文 */
--ink-mid: #5c5148; /* 補助的な文字 */
--ink-pale: #918477; /* さらに薄い文字 */
/* --- 紙 ---
黄ばんだ再生紙。card は同系でわずかに明るい */
--paper: #e5dcc4; /* 地色 */
--card: #f2ead6; /* カードや記入欄の面 */
/* --- 赤インク ---
rosso は投票済みの印にだけ使う。
ruggine（錆）はその同系で彩度を落としたもので、
見出しや区分など、赤ほど主張させたくない箇所に使う */
--rosso: #94232a; /* 投票済みの印 */
--rosso-dk: #75181e; /* 押したとき */
--ruggine: #8a5a48; /* 錆色。見出し・区分 */
--ruggine-pale: #b39682; /* さらに淡い錆色 */
--rule: rgba(42, 35, 32, 0.26); /* 罫線 */
--rule-fine:rgba(42, 35, 32, 0.12); /* さらに細い罫線 */
/* 書体。見出しは明朝、本文はゴシック。
カンマ区切りで「あれば使う」候補を並べる */
--serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
"Noto Serif JP", "MS PMincho", serif;
--sans: "Hiragino Sans", "Yu Gothic", "YuGothic",
"Noto Sans JP", "Meiryo", sans-serif;
--plate-w: 118px; /* 顔グラの横幅 */
--bar-h: 96px; /* 画面下に固定する記入欄の高さ */
}
/* ------------------------------------------------------------
② 全体の下地
------------------------------------------------------------ */
/* * ＝ すべての要素。box-sizing を一括で設定しておくと、
padding が幅に足されて計算が狂う問題を最初から防げる */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0 0 calc(var(--bar-h) + 24px);
/* calc() ＝ 計算式。下端の固定バーに隠れないよう余白を確保する */
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 15px;
line-height: 1.75;
}
/* 中身の横幅を制限して中央に置くための共通の箱 */
.wrap {
max-width: 940px;
margin: 0 auto;
padding: 0 20px;
}
/* 数字とローマ数字だけ明朝にし、字間を開ける。
投票用紙の番号らしさを出すための指定 */
.num {
font-family: var(--serif);
letter-spacing: 0.08em;
font-feature-settings: "palt";
}
/* ------------------------------------------------------------
③ 見出し
------------------------------------------------------------ */
.head {
border-bottom: 1px solid var(--rule);
background: linear-gradient(180deg, var(--card), var(--paper));
/* linear-gradient ＝ 色を上から下へなめらかに変える背景 */
padding: 30px 0 22px;
}
.head__eyebrow {
margin: 0;
font-size: 12px;
letter-spacing: 0.08em;
color: var(--ruggine);
}
.head__title {
font-family: var(--serif);
font-size: 30px;
font-weight: 600;
letter-spacing: 0.06em;
margin: 4px 0 0;
line-height: 1.3;
}
.head__slug {
display: inline-block;
margin-top: 10px;
padding: 3px 12px;
border: 1px solid var(--ruggine-pale);
color: var(--ruggine);
font-family: var(--serif);
font-size: 12px;
letter-spacing: 0.14em;
}
.head__guide {
margin: 16px 0 0;
padding-left: 14px;
border-left: 3px solid var(--ruggine);
font-size: 13px;
color: var(--ink-mid);
}
/* ------------------------------------------------------------
投票仕様の折りたたみ
------------------------------------------------------------
と はHTMLだけで開閉できる仕組み。
JavaScriptは使っていない
------------------------------------------------------------ */
.spec {
margin: 12px 0 0 14px;
border: 1px solid var(--rule-fine);
background: var(--card);
}
/* 見出しの行。list-style を消して自前の記号に差し替える */
.spec__head {
list-style: none;
padding: 8px 12px;
font-family: var(--serif);
font-size: 13px;
color: var(--ruggine);
cursor: pointer;
user-select: none;
}
.spec__head::-webkit-details-marker { display: none; }
/* 開閉の記号。閉じているとき「＋」、開くと「−」 */
.spec__head::before {
content: "＋";
margin-right: 6px;
font-size: 11px;
color: var(--ink-pale);
}
.spec[open] .spec__head::before { content: "－"; }
.spec__head:hover { color: var(--rosso); }
.spec__body {
padding: 2px 14px 12px;
border-top: 1px solid var(--rule-fine);
font-size: 12.5px;
color: var(--ink-mid);
}
.spec__lead {
margin: 12px 0 4px;
font-family: var(--serif);
font-size: 12.5px;
color: var(--ink);
}
.spec__body ul {
margin: 0;
padding-left: 1.3em;
}
.spec__body li { margin-bottom: 2px; }
.spec__body b { color: var(--ink); }
/* ------------------------------------------------------------
④ 部門タブ
------------------------------------------------------------ */
.depts {
position: sticky;
top: 0;
z-index: 20;
/* position: sticky ＝ 画面上端に達したらそこで貼りつく。
z-index ＝ 重なりの順序。数字が大きいほど手前 */
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.depts__row {
display: flex;
gap: 2px;
max-width: 940px;
margin: 0 auto;
padding: 0 20px;
overflow-x: auto; /* 画面が狭いときは横スクロール */
}
.dept {
flex: 0 0 auto;
font: inherit;
display: flex;
align-items: center;
gap: 7px;
padding: 11px 15px;
background: none;
border: none;
border-bottom: 3px solid transparent;
/* transparent ＝ 透明。ふだんは見えない線を引いておき、
選択時に色を付ける。こうすると文字の位置がずれない */
color: var(--ink-mid);
cursor: pointer;
white-space: nowrap;
}
.dept:hover {
color: var(--ink);
}
.dept__no {
font-size: 12px;
color: var(--ink-pale);
}
.dept__name {
font-size: 13.5px;
}
/* 現在開いている部門 */
.dept.on {
color: var(--ink);
border-bottom-color: var(--rosso);
}
.dept.on .dept__no {
color: var(--rosso);
}
/* 記入済みの部門に付く小さな印 */
.dept__mark {
font-size: 10px;
color: var(--rosso);
opacity: 0;
}
.dept.done .dept__mark {
opacity: 1;
}
/* ------------------------------------------------------------
⑤ 部門の説明と絞り込み
------------------------------------------------------------ */
.dept-note {
font-family: var(--serif);
font-size: 16px;
margin: 22px 0 18px;
}
.filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 12px 0;
border-top: 1px solid var(--rule-fine);
border-bottom: 1px solid var(--rule-fine);
}
.filters__label {
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ruggine);
margin-right: 4px;
}
/* 地域ボタンの並び。折り返しながら横に並べる */
.regions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.region {
font: inherit;
font-size: 12.5px;
padding: 4px 11px;
background: none;
border: 1px solid var(--rule);
border-radius: 2px;
color: var(--ink-mid);
cursor: pointer;
}
.region:hover {
border-color: var(--ruggine);
color: var(--ruggine);
}
.region.on {
background: var(--ruggine);
border-color: var(--ruggine);
color: var(--card);
}
.count {
margin-left: auto; /* 右端へ寄せる */
font-size: 12px;
color: var(--ink-pale);
}
/* ------------------------------------------------------------
⑥ キャラ一覧
------------------------------------------------------------ */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--plate-w), 1fr));
/* auto-fill ＝ 入るだけ列を作る。
minmax(118px, 1fr) ＝ 最低118px、余れば均等に広げる。
キャラが何人でも、画面幅がいくつでも自動的に整う */
gap: 16px 12px;
padding: 22px 0 8px;
}
.cell {
position: relative;
/* 中の「i」ボタンを絶対位置で置くための基準 */
}
.card {
font: inherit;
display: block;
width: 100%;
padding: 7px 7px 9px;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 2px;
cursor: pointer;
text-align: center;
transition: border-color .12s, box-shadow .12s, transform .12s;
}
.card:hover {
border-color: var(--ink-mid);
transform: translateY(-2px);
/* translateY ＝ 縦にずらす。押せることを示す軽い反応 */
}
/* 顔グラの枠。縦横比を固定しておくと、
画像の読み込み前後でレイアウトがずれない */
.card__plate {
position: relative;
display: block;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #d8cdb2;
border: 1px solid var(--rule-fine);
}
/* 画像は枠に対して絶対位置で貼りつける。
height:100% だと、親の高さが aspect-ratio 由来のとき
環境によっては高さが0になることがあるため、
inset で四辺を枠に合わせるほうが確実 */
.card__plate img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* object-fit: cover ＝ 枠いっぱいに、比率を保ったまま収める */
}
/* 二つ名。キャラ名の上に細いゴシックで小さく添える。
空文字のキャラでもカードの高さを揃えるため、
min-height で1行ぶんの場所を確保しておく */
.card__nidana {
display: block;
margin-top: 6px;
min-height: 1.35em;
font-family: var(--sans);
font-weight: normal;
font-size: 9.0px;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--ink-pale);
}
/* キャラ名。明朝で少し大きく、字間を空けて主役にする */
.card__name {
display: block;
margin-top: 1px;
font-family: var(--serif);
font-weight: bold;
font-size: 12.0px;
line-height: 1.35;
letter-spacing: 0.03em;
color: var(--ink);
}
/* 投票済みのカードでは、名前も赤に寄せる */
.card.on .card__name { color: var(--rosso); }
/* 投票済みのカード */
.card.on {
border-color: var(--rosso);
box-shadow: 0 0 0 2px var(--rosso) inset;
/* inset ＝ 内側に影を落とす。ここでは二重罫線の代わりに使っている */
}
/* カードの右上に出る、どの部門で選んだかの印 */
.badges {
position: absolute;
top: 4px;
right: 4px;
display: flex;
gap: 3px;
}
.badge {
min-width: 18px;
height: 18px;
line-height: 18px;
padding: 0 3px;
background: var(--rosso);
color: var(--card);
font-family: var(--serif);
font-size: 11px;
text-align: center;
}
/* 詳細を開く「i」ボタン */
.info {
position: absolute;
top: -6px;
left: -6px;
width: 22px;
height: 22px;
padding: 0;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 50%;
color: var(--ink-mid);
font-family: var(--serif);
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.info:hover {
background: var(--ruggine);
border-color: var(--ruggine);
color: var(--card);
}
.empty {
grid-column: 1 / -1; /* 列をすべて使い切る */
padding: 40px 0;
text-align: center;
color: var(--ink-pale);
}
/* ------------------------------------------------------------
⑦ 記入欄
------------------------------------------------------------ */
.entry {
margin: 26px 0;
padding: 18px 20px;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 2px;
}
.entry__title {
font-family: var(--serif);
font-size: 15px;
margin: 0 0 4px;
letter-spacing: 0.04em;
}
.entry__sub {
margin: 0 0 12px;
font-size: 12px;
color: var(--ink-mid);
}
.field {
margin-bottom: 16px;
}
.field:last-child {
margin-bottom: 0;
}
.label {
display: block;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: 0.1em;
color: var(--ruggine);
}
.label__req {
margin-left: 6px;
padding: 1px 6px;
background: var(--rosso);
color: var(--card);
font-size: 10px;
letter-spacing: 0.08em;
}
.inp,
.ta {
font: inherit;
font-size: 14px;
width: 100%;
padding: 9px 11px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 2px;
color: var(--ink);
}
.ta {
min-height: 74px;
resize: vertical; /* 縦方向にだけ引き伸ばせる */
}
.inp:focus,
.ta:focus {
outline: none;
border-color: var(--ruggine);
box-shadow: 0 0 0 2px rgba(65, 105, 93, 0.18);
}
.counter {
margin-top: 4px;
text-align: right;
font-size: 11px;
color: var(--ink-pale);
}
.counter.over {
color: var(--rosso);
}
/* ------------------------------------------------------------
⑧ 画面下に固定する投票用紙（このページの主役）
------------------------------------------------------------ */
.scheda {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
/* position: fixed ＝ スクロールしても画面に貼りついたまま */
background: var(--card);
border-top: 1px solid var(--ink);
box-shadow: 0 -6px 18px rgba(27, 42, 51, 0.10);
}
.scheda__inner {
display: flex;
align-items: center;
gap: 16px;
max-width: 940px;
margin: 0 auto;
padding: 10px 20px;
min-height: var(--bar-h);
}
.slots {
display: flex;
gap: 5px;
flex: 1 1 auto;
overflow-x: auto;
}
/* ひとつの記入枠 */
.slot {
font: inherit;
flex: 0 0 auto;
width: 46px;
padding: 3px 2px 4px;
background: var(--paper);
border: 1px solid var(--rule-fine);
border-radius: 2px;
cursor: pointer;
text-align: center;
}
.slot:hover {
border-color: var(--ruggine);
}
.slot__thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 3 / 4;
background: rgba(27, 42, 51, 0.06);
overflow: hidden;
}
.slot__thumb img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slot__no {
display: block;
margin-top: 2px;
font-size: 10px;
color: var(--ink-pale);
line-height: 1.2;
}
.slot.filled {
border-color: var(--rosso);
background: var(--card);
}
.slot.filled .slot__no {
color: var(--rosso);
}
/* 部門の切れ目に入れる細い縦線 */
.slot-sep {
flex: 0 0 auto;
width: 1px;
align-self: stretch;
background: var(--rule-fine);
margin: 4px 3px;
}
.scheda__act {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
/* ------------------------------------------------------------
⑨ ボタン
------------------------------------------------------------ */
.btn {
font: inherit;
font-size: 13.5px;
padding: 11px 20px;
border-radius: 2px;
cursor: pointer;
white-space: nowrap;
}
.btn--main {
background: var(--rosso);
border: 1px solid var(--rosso);
color: var(--card);
letter-spacing: 0.08em;
}
.btn--main:hover {
background: #7d1c22;
}
.btn--main:disabled {
background: rgba(27, 42, 51, 0.10);
border-color: transparent;
color: var(--ink-pale);
cursor: not-allowed;
}
.btn--quiet {
background: none;
border: 1px solid var(--rule);
color: var(--ink-mid);
}
.btn--quiet:hover {
border-color: var(--rosso);
color: var(--rosso);
}
/* ------------------------------------------------------------
⑩ ポップアップ
------------------------------------------------------------ */
.modal {
display: none; /* ふだんは隠しておく */
position: fixed;
inset: 0; /* 上下左右すべて0。画面全体を覆う */
z-index: 50;
background: rgba(27, 42, 51, 0.55);
padding: 20px;
overflow-y: auto;
}
/* JavaScript が open を付け外しして開閉する */
.modal.open {
display: block;
}
.modal__box {
position: relative;
max-width: 560px;
margin: 40px auto;
padding: 26px 28px 28px;
background: var(--card);
border-top: 4px solid var(--rosso);
border-radius: 2px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.modal__close {
position: absolute;
top: 8px;
right: 10px;
width: 30px;
height: 30px;
padding: 0;
background: none;
border: none;
color: var(--ink-mid);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.modal__close:hover {
color: var(--rosso);
}
.modal__title {
font-family: var(--serif);
font-size: 21px;
margin: 0;
letter-spacing: 0.04em;
}
.modal__sub {
margin: 2px 0 16px;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--ruggine);
}
/* 詳細の中身 */
.detail {
display: flex;
gap: 16px;
}
.detail__img {
flex: 0 0 128px;
}
.detail__img img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border: 1px solid var(--rule);
}
.detail__meta {
margin-bottom: 8px;
font-size: 11px;
letter-spacing: 0.1em;
color: var(--ruggine);
}
.detail__note {
margin: 0;
font-size: 13.5px;
}
/* 確認画面の各行 */
/* 確認画面の各行。
左に文字（review__body）、右に顔グラ（review__faces）を並べる。
align-items: flex-start ＝ 高さが違っても上端で揃える */
.review__row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--rule-fine);
}
/* 文字の側。余った幅をすべて使う。
min-width: 0 は、長い文が入っても
顔グラを押し出さないようにするための指定 */
.review__body {
flex: 1 1 auto;
min-width: 0;
}
/* 顔グラの側。幅は中身なりで、多いときは折り返す */
.review__faces {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px;
max-width: 45%;
}
.review__face {
display: block;
width: 42px;
}
.review__face img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border: 1px solid var(--rosso);
border-radius: 2px;
background: #d8cdb2;
}
.review__head {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 12px;
letter-spacing: 0.1em;
color: var(--ruggine);
}
.review__pick {
font-family: var(--serif);
font-size: 16px;
margin-top: 2px;
}
.review__none {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-pale);
}
.review__comment {
margin-top: 4px;
padding-left: 11px;
border-left: 2px solid var(--rule);
font-size: 13px;
color: var(--ink-mid);
white-space: pre-wrap;
/* pre-wrap ＝ 入力された改行をそのまま表示する */
}
.modal__submit {
width: 100%;
margin-top: 20px;
}
.modal__foot {
margin: 12px 0 0;
font-size: 11.5px;
color: var(--ink-pale);
text-align: center;
}
/* ------------------------------------------------------------
⑪ 短い通知
------------------------------------------------------------ */
.toast {
position: fixed;
left: 50%;
bottom: calc(var(--bar-h) + 18px);
transform: translateX(-50%) translateY(10px);
z-index: 60;
padding: 9px 18px;
background: var(--ink);
color: var(--card);
border-radius: 2px;
font-size: 13px;
opacity: 0;
pointer-events: none; /* 通知の上をクリックしても素通りする */
transition: opacity .18s, transform .18s;
}
.toast.on {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ------------------------------------------------------------
⑫ 画面が狭いとき
------------------------------------------------------------
@media ＝ 条件付きの指定。
ここでは「画面幅が600px以下のとき」だけ中身が効く
------------------------------------------------------------ */
@media (max-width: 600px) {
:root {
--plate-w: 92px;
--bar-h: 88px;
}
.head__title {
font-size: 23px;
}
.grid {
gap: 12px 8px;
}
.scheda__inner {
flex-wrap: wrap;
gap: 8px;
padding: 8px 14px;
}
.scheda__act {
width: 100%;
}
.btn--main {
flex: 1 1 auto;
}
.modal__box {
margin: 10px auto;
padding: 22px 18px 24px;
}
.detail {
flex-direction: column;
}
/* 画面が狭いときは、顔グラを文字の下へ回す。
横に並べたままだと、どちらも潰れて読めなくなるため */
.review__row {
flex-direction: column;
gap: 8px;
}
.review__faces {
max-width: 100%;
justify-content: flex-start;
}
.review__face {
width: 38px;
}
.detail__img {
flex: 0 0 auto;
max-width: 140px;
}
}
/* ------------------------------------------------------------
⑬ 動きを抑える設定にしている人への配慮
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
}
/* ------------------------------------------------------------
⑭ キーボード操作のための枠
------------------------------------------------------------
:focus-visible ＝ キーボードで移動してきたときだけ効く。
マウスでクリックしたときには出ないので邪魔にならない
------------------------------------------------------------ */
:focus-visible {
outline: 2px solid var(--ruggine);
outline-offset: 2px;
}
/* ------------------------------------------------------------
もう一方のページへの導線
------------------------------------------------------------ */
.otherpage {
margin: 30px 0 10px;
text-align: center;
font-size: 13px;
}
.otherpage a { color: var(--ruggine); }
/* 説明文のいれもの。位置だけ整える */
.detail__body { flex: 1 1 auto; min-width: 0; }
/* ------------------------------------------------------------
⑮ 組み合わせ部門ページ専用
------------------------------------------------------------
kumiawase.html だけで使う。単独部門ページには影響しない
------------------------------------------------------------ */
/* 今の枠に選ばれている顔ぶれ */
.party {
margin: 0 0 14px;
padding: 12px 14px;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 2px;
}
.party__row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
}
/* 選ばれている一人。押すと外れる */
.party__one {
position: relative;
font: inherit;
width: 62px;
padding: 0;
background: none;
border: none;
cursor: pointer;
text-align: center;
}
.party__one img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border: 1px solid var(--rosso);
border-radius: 2px;
}
.party__name {
display: block;
margin-top: 2px;
font-family: var(--serif);
font-size: 10.5px;
line-height: 1.3;
color: var(--ink);
}
/* 右上の × 印。ふだんは薄く、乗せると赤くなる */
.party__x {
position: absolute;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
line-height: 17px;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 50%;
font-size: 12px;
color: var(--ink-pale);
}
.party__one:hover .party__x {
background: var(--rosso);
border-color: var(--rosso);
color: var(--card);
}
/* まだ埋まっていない席 */
.party__empty {
width: 62px;
aspect-ratio: 3 / 4;
border: 1px dashed var(--rule-fine);
border-radius: 2px;
}
/* そのうち、成立に必要な席は濃く出す */
.party__empty.must {
border-color: var(--ruggine-pale);
}
.party__msg {
margin: 9px 0 0;
font-size: 12px;
color: var(--ink-pale);
}
.party__msg.warn {
color: var(--rosso);
}
/* この枠を空にするボタン。文の末尾に小さく添える */
.party__clear {
font: inherit;
font-size: 11.5px;
margin-left: 10px;
padding: 2px 9px;
background: none;
border: 1px solid var(--rule);
border-radius: 2px;
color: var(--ink-mid);
cursor: pointer;
}
.party__clear:hover {
border-color: var(--rosso);
color: var(--rosso);
}
/* 画面下の投票用紙で、人数の足りない枠の空席 */
.slot.must {
border-color: var(--ruggine-pale);
border-style: dashed;
}
@media (max-width: 600px) {
.party { padding: 10px; }
.party__one,
.party__empty { width: 52px; }
}