@charset 'utf-8';

/* gallery
------------------------------------------------ */
.match-gallery > .wrap { max-width: 960px; }
.match-gallery-title { margin-bottom: 28px; text-align: center; font-size: 2.4rem; font-weight: bold; color: #003884; }
.match-gallery-detail { position: relative; }
.match-gallery-detail__hd { display: grid; margin-bottom: 20px; }
.match-gallery-detail__title { display: flex; align-items: center; padding-left: 30px; border-left-width: 4px; border-left-style: solid; font-size: 2rem; font-weight: bold; line-height: 1.5; }
.match-gallery-detail__date { display: flex; align-items: center; padding-left: 30px; border-left: 1px solid #707070; font-family: 'Oswald', sans-serif; font-size: 2.2rem; font-weight: 600; line-height: 1.5; }
.match-gallery-detail__date .is-week { padding: 0.2em 0 0 0.2em; font-size: 1.4rem; }
.match-gallery-detail__date .is-time { padding-left: 0.6em; font-size: 1.8rem; }
.match-gallery-detail__info { padding: 5px 0 5px 30px; border-left: 1px solid #707070; }
.match-gallery-detail__against { font-size: 1.6rem; line-height: 1.5; }
.match-gallery-detail__against .is-vs { padding-right: 0.4em; font-size: 1.4rem; }
.match-gallery-detail__against .is-extra { font-size: 1.4rem; }
.match-gallery-detail__location { display: flex; align-items: center; margin-top: 10px; }
.match-gallery-detail__location__title { display: flex; justify-content: center; align-items: center; width: 40px; height: 20px; font-family: 'Oswald', sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.2; color: #fff; }
.match-gallery-detail__location__name { padding-left: 10px; width: calc(100% -20px); font-size: 1.2rem; line-height: 1.5; }
.match-gallery-detail__content { position: relative; }
.match-gallery-detail__lists { display: grid; }
.match-gallery-detail__lists__item { position: relative; }
.match-gallery-detail__lists__item > a { display: block; position: relative; aspect-ratio: 1 / 0.6; overflow: hidden; }
.match-gallery-detail__lists__item img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.match-gallery-detail .pagination__detail { margin-top: 80px; }

.match-gallery-detail.is-home .match-gallery-detail__title { border-left-color: #003884; color: #003884; }
.match-gallery-detail.is-home .match-gallery-detail__location__title { background-color: #003884; }
.match-gallery-detail.is-away .match-gallery-detail__title { border-left-color: #C60000; color: #C60000; }
.match-gallery-detail.is-away .match-gallery-detail__location__title { background-color: #C60000; }

@media only screen and (min-width: 769px) {
	.match-gallery-detail__hd { grid-template-columns: 180px 260px calc(100% - (180px + 260px)); }
	.match-gallery-detail__lists { grid-template-columns: repeat(4,calc(100% / 4)); }
}

@media only screen and (max-width: 768px) {
	.match-gallery > .wrap { padding: 0 20px; }
	.match-gallery-title { font-size: 1.8rem; }
	.match-gallery-detail__hd { gap: 10px; margin-bottom: 18px; }
	.match-gallery-detail__title,
	.match-gallery-detail__date,
	.match-gallery-detail__info { padding-left: 20px; }
	.match-gallery-detail__title { font-size: 1.8rem; }
	.match-gallery-detail__date { font-size: 2rem; }
	.match-gallery-detail__date .is-week { font-size: 1.2rem; }
	.match-gallery-detail__date .is-time { font-size: 1.6rem; }
	.match-gallery-detail__against { font-size: 1.4rem; }
	.match-gallery-detail__against .is-vs { font-size: 1.2rem; }
	.match-gallery-detail__against .is-extra { font-size: 1.2rem; }
	.match-gallery-detail__lists { grid-template-columns: repeat(2,50%); }
	.match-gallery-detail .pagination__detail { margin-top: 60px; }
}