/*
 * トップページ（ハブ型）のスタイル。
 * 親テーマの style.css には手を入れず、この1枚だけを追加で読み込む。
 *
 * 配色はサイトロゴから取っている。ロゴの有彩色を数えたところ #007EC4 が主色、
 * #6BCEFE が明色だったので、アクセントをこの2色に合わせ、無彩色も青へ寄せた。
 *
 * カテゴリーごとの色は各セクションの style="--c:..." から入ってくる。
 * 色は装飾ではなく分類そのものなので、見出しやバッジはこれを参照する。
 */

.tsuno-hub {
	--tsuno-line: #dde4ea;
	--tsuno-ink: #1f2933;
	--tsuno-sub: #6b7785;
	--tsuno-accent: #007ec4;
	--tsuno-accent-light: #6bcefe;
	--tsuno-ground: #f3f8fc;
}

/*
 * ---------- 親テーマの見出し装飾を打ち消す ----------
 *
 * AFFINGER は管理画面で設定した見出しの色を st-themecss-loader.php から
 * 動的に出力する。これは hub.css より後に、
 *   h2:not([class^="is-style-st-heading-custom-"]):not([class*=" ..."])
 * という詳細度 (0,2,1) の指定で読み込まれるため、
 * 素の .tsuno-sec__title (0,1,0) では負けて緑の帯になってしまう。
 *
 * そこで詳細度を上げたうえで、親テーマが強制してくる項目
 * （背景・色・枠線・余白）だけ !important で止めている。
 * ここを弱めると見出しがサイト既定の緑に戻る。
 */
.tsuno-hub .tsuno-sec__head .tsuno-sec__title,
.tsuno-hub .tsuno-sites .tsuno-sites__title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	background-image: none !important;
	color: var(--c, var(--tsuno-ink)) !important;
	font-size: 1.35rem;
	line-height: 1.3;
	font-weight: 700;
}

.tsuno-hub .tsuno-sites .tsuno-sites__title {
	color: var(--tsuno-ink) !important;
	font-size: 1.05rem;
}

.tsuno-hub .tsuno-sites .tsuno-sites__title--sub {
	margin-top: 1.6rem !important;
	padding-top: 1.2rem !important;
	border-top: 1px solid var(--tsuno-line) !important;
	font-size: 0.95rem;
}

/* カード見出し（h3）は白文字＋緑グラデーションを当てられている */
.tsuno-hub .tsuno-card .tsuno-card__body .tsuno-card__title {
	margin: 0 0 0.4rem !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	background-image: none !important;
	color: var(--tsuno-ink) !important;
	font-size: 0.92rem;
	line-height: 1.45;
	font-weight: 700;
	text-wrap: balance;
}

.tsuno-hub .tsuno-sec__title::before,
.tsuno-hub .tsuno-sec__title::after,
.tsuno-hub .tsuno-card__title::before,
.tsuno-hub .tsuno-card__title::after,
.tsuno-hub .tsuno-sites__title::before,
.tsuno-hub .tsuno-sites__title::after {
	content: none !important;
}

/* ---------- 最新のゲーム ---------- */

.tsuno-latests {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin: 0 0 2.5rem;
}

.tsuno-latest {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	border: 1px solid var(--tsuno-line);
	border-left: 4px solid var(--c);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s, transform 0.15s;
}

.tsuno-latest:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px -8px rgba(31, 41, 51, 0.4);
}

.tsuno-latest__thumb {
	aspect-ratio: 16 / 9;
	background: var(--tsuno-ground);
	overflow: hidden;
}

.tsuno-latest__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsuno-latest__body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.9rem 1rem;
}

.tsuno-latest__title {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--tsuno-ink);
	text-wrap: balance;
}

.tsuno-latest__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.74rem;
	color: var(--tsuno-sub);
	font-variant-numeric: tabular-nums;
}

.tsuno-latest__genre {
	padding: 0.1rem 0.45rem;
	border-radius: 3px;
	background: var(--tsuno-ground);
}

.tsuno-latest__cta {
	margin-top: auto;
	align-self: flex-start;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: var(--c);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
}

.tsuno-latest:hover .tsuno-latest__cta {
	filter: brightness(1.12);
}

/* ---------- セクション ---------- */

.tsuno-sec {
	margin: 0 0 2.75rem;
}

/*
 * 見出しの左に種別色の帯を出す。読者はセクションの色で
 * 「ゲームの話」「レビュー」を判断する。
 */
.tsuno-sec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.9rem;
	padding: 0 0 0.6rem 0.7rem;
	border-left: 4px solid var(--c, var(--tsuno-accent));
	border-bottom: 1px solid var(--tsuno-line);
	margin-bottom: 1rem;
}

.tsuno-sec__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.35rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--c, var(--tsuno-ink));
}

.tsuno-sec__title::before,
.tsuno-sec__title::after {
	content: none;
}

.tsuno-sec__more {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--c, var(--tsuno-accent));
	white-space: nowrap;
}

.tsuno-sec__more:hover {
	text-decoration: underline;
}

/* ---------- ジャンルの横長バナー ---------- */

.tsuno-banners {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.tsuno-banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 96px;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--tsuno-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--tsuno-ground);
	text-decoration: none;
	color: inherit;
	isolation: isolate;
	transition: border-color 0.15s;
}

.tsuno-banner:hover {
	border-color: var(--c);
}

/*
 * 収録タイトルのサムネイルを横に敷き詰めて背景にする。
 * そのままだと文字が読めなくなるので、
 * 色のかかったグラデーションを必ず上に重ねる。
 */
.tsuno-banner__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: flex;
}

.tsuno-banner__bg img {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsuno-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--c) 88%, transparent) 0%,
		color-mix(in srgb, var(--c) 62%, transparent) 46%,
		rgba(255, 255, 255, 0.06) 100%
	);
}

/* color-mix が無い環境では単色で塗る */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.tsuno-banner::before {
		background: linear-gradient(90deg, var(--c) 0%, rgba(255, 255, 255, 0.1) 100%);
		opacity: 0.85;
	}
}

.tsuno-banner__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 0 0 auto;
	min-width: 9em;
}

.tsuno-banner__name {
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.tsuno-banner__n {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.92);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.tsuno-banner__arrow {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 1.2rem;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	transition: transform 0.15s;
}

.tsuno-banner:hover .tsuno-banner__arrow {
	transform: translateX(4px);
}

/* ---------- 絞り込みボタン ---------- */

.tsuno-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.9rem;
}

.tsuno-filter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--tsuno-line);
	border-radius: 999px;
	background: #fff;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--tsuno-ink);
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.tsuno-filter:hover {
	border-color: var(--c);
	color: var(--c);
}

.tsuno-filter.is-on {
	background: var(--c);
	border-color: var(--c);
	color: #fff;
}

.tsuno-filter span {
	font-size: 0.7rem;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

.tsuno-filter--tag {
	font-weight: 400;
	color: var(--tsuno-sub);
}

.tsuno-reviews__empty {
	margin: 0.8rem 0 0;
	font-size: 0.82rem;
	color: var(--tsuno-sub);
}

/* ---------- ランキングの行（レビュー） ---------- */

.tsuno-rows {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.tsuno-row {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--tsuno-line);
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s;
}

.tsuno-row[hidden] {
	display: none;
}

.tsuno-row:hover {
	border-color: var(--c);
}

.tsuno-row__rank {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tsuno-ground);
	color: var(--tsuno-sub);
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.tsuno-row:nth-child(-n + 3) .tsuno-row__rank {
	background: var(--c);
	color: #fff;
}

.tsuno-row__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 42px;
	border-radius: 4px;
	background: var(--tsuno-ground);
	overflow: hidden;
}

.tsuno-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsuno-row__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.86rem;
	line-height: 1.45;
	font-weight: 700;
	color: var(--tsuno-ink);
}

.tsuno-row__badge {
	flex: 0 0 auto;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--c);
	color: #fff;
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------- カード ---------- */

.tsuno-grid {
	display: grid;
	gap: 1rem;
}

.tsuno-grid--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsuno-grid--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tsuno-card__link {
	display: block;
	height: 100%;
	border: 1px solid var(--tsuno-line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, transform 0.15s;
}

.tsuno-card__link:hover {
	border-color: var(--c, var(--tsuno-accent));
	transform: translateY(-2px);
}

.tsuno-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--tsuno-ground);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.tsuno-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsuno-card__noimg {
	font-size: 0.8rem;
	color: var(--tsuno-sub);
}

.tsuno-card__body {
	padding: 0.7rem 0.8rem 0.85rem;
}

.tsuno-card__genre {
	display: inline-block;
	margin-bottom: 0.35rem;
	padding: 0.1rem 0.45rem;
	border-radius: 3px;
	background: var(--tsuno-ground);
	font-size: 0.68rem;
	color: var(--tsuno-sub);
}

.tsuno-card__title {
	margin: 0 0 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.92rem;
	line-height: 1.45;
	font-weight: 700;
	color: var(--tsuno-ink);
	text-wrap: balance;
}

.tsuno-card__title::before,
.tsuno-card__title::after {
	content: none;
}

.tsuno-card__date {
	font-size: 0.72rem;
	color: var(--tsuno-sub);
	font-variant-numeric: tabular-nums;
}

/* ---------- 今月のキャラ投票 ---------- */

.tsuno-votes {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.7rem;
}

.tsuno-votecard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.55rem 0.6rem 0.65rem;
	border: 1px solid var(--tsuno-line);
	border-top: 3px solid var(--c);
	border-radius: 8px;
	background: #fff;
}

.tsuno-votecard__rank {
	position: absolute;
	top: -8px;
	left: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--c);
	color: #fff;
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 3px rgba(31, 41, 51, 0.3);
}

.tsuno-votecard__thumb {
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 5px;
	background: var(--tsuno-ground);
	overflow: hidden;
}

.tsuno-votecard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsuno-votecard__name {
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--tsuno-ink);
}

.tsuno-votecard__bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--tsuno-ground);
	overflow: hidden;
}

.tsuno-votecard__bar span {
	display: block;
	height: 100%;
	background: var(--c);
}

.tsuno-votecard__n {
	font-size: 0.72rem;
	color: var(--tsuno-sub);
	font-variant-numeric: tabular-nums;
}

/* ---------- 投票の下段（結果記事・投稿フォーム） ---------- */

/* 投票結果を縦に並べ、その下に投稿フォームを置く */
.tsuno-votefoot {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.tsuno-votefoot__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	margin: 0 0 0.5rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--tsuno-line);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--c);
}

.tsuno-votefoot__title a {
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--c);
	white-space: nowrap;
}

.tsuno-votefoot__title a:hover {
	text-decoration: underline;
}

.tsuno-voteform {
	border: 1px solid var(--tsuno-line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.tsuno-voteform__summary {
	padding: 0.6rem 0.9rem;
	background: var(--c);
	color: #fff;
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.tsuno-voteform__summary::-webkit-details-marker {
	display: none;
}

.tsuno-voteform__summary::before {
	content: "＋ ";
}

.tsuno-voteform[open] .tsuno-voteform__summary::before {
	content: "− ";
}

.tsuno-voteform__body {
	padding: 0.8rem 0.9rem 0.9rem;
}

.tsuno-voteform__note {
	margin: 0 0 0.7rem;
	font-size: 0.74rem;
	line-height: 1.6;
	color: var(--tsuno-sub);
}

/* Contact Form 7 の中身を詰めて出す */
.tsuno-voteform__body p {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
}

.tsuno-voteform__body input[type="text"],
.tsuno-voteform__body input[type="email"],
.tsuno-voteform__body input[type="url"],
.tsuno-voteform__body textarea,
.tsuno-voteform__body select {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--tsuno-line);
	border-radius: 4px;
	font-size: 0.82rem;
}

.tsuno-voteform__body textarea {
	min-height: 5em;
}

.tsuno-voteform__body input[type="submit"],
.tsuno-voteform__body .wpcf7-submit {
	width: auto;
	padding: 0.45rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: var(--c);
	color: #fff;
	font-size: 0.84rem;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- 制作メモ・お知らせ ---------- */

/*
 * 投票結果は縦1列に並べる。
 * .tsuno-notes と同じ詳細度だと記述順で負けるので、
 * クラスを2つ重ねて順序に依存しないようにしている。
 */
.tsuno-notes.tsuno-notes--one {
	grid-template-columns: minmax(0, 1fr);
}

.tsuno-notes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1rem;
}

.tsuno-note {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.45rem 0.5rem;
	border: 1px solid transparent;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, background-color 0.15s;
}

.tsuno-note:hover {
	border-color: var(--c);
	background: #fff;
}

.tsuno-note__thumb {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 5px;
	background: var(--tsuno-ground);
	overflow: hidden;
}

.tsuno-note__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsuno-note__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.tsuno-note__title {
	font-size: 0.84rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--tsuno-ink);
}

.tsuno-note__meta {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.7rem;
	color: var(--tsuno-sub);
	font-variant-numeric: tabular-nums;
}

.tsuno-note__cat {
	padding: 0.05rem 0.4rem;
	border-radius: 3px;
	background: var(--c);
	color: #fff;
	font-size: 0.66rem;
}

/* ---------- ジャンルのチップ（記事下・一覧上） ---------- */

.tsuno-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

.tsuno-chips--single,
.tsuno-archive-chips .tsuno-chips {
	--tsuno-line: #dde4ea;
	--tsuno-ink: #1f2933;
	--tsuno-sub: #6b7785;
	--tsuno-accent: #007ec4;
	--tsuno-ground: #f3f8fc;
}

.tsuno-chips--single {
	margin: 1.5rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--tsuno-line);
}

.tsuno-chips__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--tsuno-sub);
}

.tsuno-archive-chips {
	margin: 0 0 1.25rem;
}

.tsuno-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--tsuno-line);
	border-radius: 999px;
	background: #fff;
	font-size: 0.78rem;
	line-height: 1.5;
	text-decoration: none;
	color: var(--tsuno-ink);
	transition: border-color 0.15s, color 0.15s;
}

.tsuno-chip:hover {
	border-color: var(--tsuno-accent);
	color: var(--tsuno-accent);
}

.tsuno-chip__n {
	font-size: 0.7rem;
	color: var(--tsuno-sub);
	font-variant-numeric: tabular-nums;
}

/* ---------- 他サイトの紹介（最下部） ---------- */

.tsuno-sites {
	margin: 2.5rem 0 0;
	padding: 1.4rem 1.2rem 1.2rem;
	border: 1px solid var(--tsuno-line);
	border-radius: 10px;
	background: var(--tsuno-ground);
}

.tsuno-sites__title {
	margin: 0 0 0.9rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tsuno-ink);
}

.tsuno-sites__title::before,
.tsuno-sites__title::after {
	content: none;
}

.tsuno-sites__title--sub {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--tsuno-line);
	font-size: 0.95rem;
}

.tsuno-sites__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
}

.tsuno-site {
	display: flex;
	gap: 0.8rem;
	padding: 0.85rem 0.9rem;
	border: 1px solid var(--tsuno-line);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, transform 0.15s;
}

.tsuno-site:hover {
	border-color: var(--tsuno-accent);
	transform: translateY(-2px);
}

.tsuno-site__mark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(140deg, var(--tsuno-accent-light), var(--tsuno-accent));
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
}

.tsuno-site__mark--img {
	background: var(--tsuno-ground);
}

.tsuno-site__mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsuno-site__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.tsuno-site__name {
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--tsuno-ink);
}

.tsuno-site__desc {
	font-size: 0.76rem;
	line-height: 1.55;
	color: var(--tsuno-sub);
}

.tsuno-site__host {
	font-size: 0.7rem;
	color: var(--tsuno-accent);
	word-break: break-all;
}

.tsuno-sites__note {
	margin: 0.9rem 0 0;
	font-size: 0.76rem;
	line-height: 1.6;
	color: var(--tsuno-sub);
}

/* ---------- 画面が狭いとき ---------- */

@media only screen and (max-width: 959px) {
	.tsuno-grid--c3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tsuno-votes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* 帯が狭いと背景の写真が細くなりすぎるので枚数を減らす */
	.tsuno-banner__bg img:nth-child(n + 4) {
		display: none;
	}
}

@media only screen and (max-width: 599px) {
	.tsuno-grid--c2,
	.tsuno-grid--c3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 最新のゲームは縦積み（横並びだと画像も文字も潰れる） */
	.tsuno-latest {
		grid-template-columns: minmax(0, 1fr);
	}

	.tsuno-votes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tsuno-notes,
	.tsuno-sites__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tsuno-row__thumb {
		width: 46px;
		height: 35px;
	}

	.tsuno-banner {
		min-height: 84px;
	}

	.tsuno-banner__name {
		font-size: 1.2rem;
	}

	.tsuno-banner__body {
		min-width: 0;
	}

	.tsuno-banner__bg img:nth-child(n + 3) {
		display: none;
	}

	.tsuno-sec__more {
		margin-left: 0;
	}
}