@charset 'utf-8';

/* common
------------------------------------------------ */
.page__title--index { background-image: url(../../img/game/title_index.jpg); }
.page__title--ticket { background-image: url(../../img/game/title_ticket.jpg); }
.page__title--access { background-image: url(../../img/game/title_access.jpg); }

/* season__select
------------------------------------------------ */
.season__select { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 70px; max-width: 960px; }
.season__select--title { margin-right: 16px; font-size: 1.6rem; }
.season__select__form select { padding: 6px; width: 150px; height: 32px; background-color: #fff; border: 1px solid #000; border-radius: 4px; font-size: 1.6rem; color: inherit; }

@media only screen and (max-width: 768px) {
	.season__select { margin-bottom: 40px; padding: 0 20px; }
	.season__select--title { font-size: 1.4rem; }
	.season__select__form select { width: 130px; height: 30px; font-size: 1.4rem; }
}

/* nav
------------------------------------------------ */
.game-nav { margin-bottom: 45px; }
.game-nav > .wrap { max-width: 960px; }
.game-nav-lists { display: grid; grid-template-columns: repeat(3,calc(100% / 3)); }
.game-nav-lists__item { position: relative; height: 46px; font-size: 1.6rem; font-weight: bold; line-height: 1.2; }
.game-nav-lists__item > a { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; background-color: #fff; border: 1px solid #003884; text-align: center; color: #003884; }
.game-nav-lists__item > a::after { content: ''; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 5px; height: 10px; background: url(../../img/icon/arrow2.png) no-repeat center center; background-size: 100%; }
.game-nav-lists__item:nth-of-type(3n-1) > a,
.game-nav-lists__item:nth-of-type(3n) > a { border-left: none; }
.game-nav-lists__item > a.is-active { background-color: #003884; color: #fff; }
.game-nav-lists__item > a.is-active::after { background-image: url(../../img/icon/arrow1.png); }

@media only screen and (max-width: 768px) {
	.game-nav { margin-bottom: 25px; padding: 0 20px; }
	.game-nav-lists__item { height: 40px; font-size: 1.2rem; }
	.game-nav-lists__item > a::after { right: 12px; }
}

/* matches
------------------------------------------------ */
.game-matches + .game-matches { margin-top: 80px; }
.game-matches > .wrap { max-width: 960px; }
.game-matches-title { margin-bottom: 20px; font-size: 2.4rem; font-weight: bold; color: #003884; }
.game-matches-lists { display: grid; }
.game-matches-lists__item { padding-bottom: 16px; border-bottom: 1px solid #707070; }
.game-matches-lists__title { margin-bottom: 6px; padding-left: 10px; border-left-width: 4px; border-left-style: solid; font-size: 1.6rem; font-weight: bold; line-height: 1.5; }
.game-matches-lists__photo { position: relative; aspect-ratio: 1 / 0.6; margin-bottom: 12px; }
.game-matches-lists__photo { background-color: #F3F3F3; }
.game-matches-lists__photo img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: 80%; max-width: inherit; }
.game-matches-lists__photo.is-eyecatch img { top: 0; left: 0; transform: none; width: 100%; height: 100%; max-width: inherit; object-fit: cover; }
.game-matches-lists__info { position: relative; padding: 0 10px; }
.game-matches-lists__link { display: flex; justify-content: center; align-items: center; gap: 6px; position: absolute; top: 0; left: 0; width: 100px; height: 26px; border: 1px solid #003884; font-size: 1.2rem; font-weight: bold; line-height: 1.2; color: #003884; }
.game-matches-lists__link::after { content: ''; width: 5px; height: 10px; background: url(../../img/icon/arrow2.png) no-repeat center center; background-size: 100%; }
.game-matches-lists__date { margin-bottom: 16px; text-align: right; font-family: 'Oswald', sans-serif; font-size: 1.8rem; font-weight: 600; line-height: 1.5; }
.game-matches-lists__date .is-week { padding-left: 0.2em; font-size: 1.2rem; }
.game-matches-lists__date .is-time { padding-left: 0.6em; font-size: 1.6rem; }
.game-matches-lists__against { font-size: 1.4rem; line-height: 1.5; }
.game-matches-lists__against .is-vs { padding-right: 0.2em; font-size: 1.2rem; }
.game-matches-lists__against .is-extra { font-size: 1.2rem; }
.game-matches-lists__location { display: flex; align-items: center; margin-top: 16px; }
.game-matches-lists__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; }
.game-matches-lists__location__name { padding-left: 10px; width: calc(100% - 20px); font-size: 1.2rem; line-height: 1.5; }

.game-matches-lists__item.is-home .game-matches-lists__title { border-left-color: #003884; color: #003884; }
.game-matches-lists__item.is-home .game-matches-lists__location__title { background-color: #003884; }
.game-matches-lists__item.is-away .game-matches-lists__title { border-left-color: #C60000; color: #C60000; }
.game-matches-lists__item.is-away .game-matches-lists__location__title { background-color: #C60000; }

@media only screen and (min-width: 769px) {
	.game-matches-lists { gap: 30px; grid-template-columns: repeat(3,calc((100% / 3) - (30px / (3 / 2)))); }
}

@media only screen and (max-width: 768px) {
	.game-matches { padding: 0 20px; }
	.game-matches + .game-matches { margin-top: 40px; }
	.game-matches-title { margin-bottom: 18px; font-size: 1.8rem; }
	.game-matches-lists { gap: 30px; }
	.game-matches-lists__item { padding-bottom: 14px; }
	.game-matches-lists__title { margin-bottom: 4px; padding-left: 8px; font-size: 1.4rem; }
	.game-matches-lists__photo { margin-bottom: 10px; }
	.game-matches-lists__info { padding: 0; }
	.game-matches-lists__link { gap: 6px; height: 26px; font-size: 1.2rem; }
	.game-matches-lists__date { margin-bottom: 12px; font-size: 1.6rem; }
	.game-matches-lists__date .is-week { font-size: 1.2rem; }
	.game-matches-lists__date .is-time { font-size: 1.4rem; }
	.game-matches-lists__against { font-size: 1.4rem; }
	.game-matches-lists__against .is-vs { font-size: 1.2rem; }
	.game-matches-lists__against .is-extra { font-size: 1.2rem; }
	.game-matches-lists__location { margin-top: 14px; }
	.game-matches-lists__location__title { width: 40px; height: 20px; font-size: 1.2rem; }
	.game-matches-lists__location__name { padding-left: 10px; width: calc(100% - 20px); font-size: 1.2rem; }
}

/* game__schedule
------------------------------------------------ */
.game__schedule { margin-bottom: 120px; max-width: 960px; }
.game__schedule:last-child { margin-bottom: 0; }
.game__schedule .title--2 { margin-bottom: 0; }
.game__schedule--item { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; border-bottom: 1px solid #707070; padding: 27px 3.571% 20px; }
.game__schedule__section { width: 100px; font-size: 1.8rem; font-weight: 600; padding: 0 10px 16px 0; }
.game__schedule__dates { width: 220px; font-size: 1.6rem; padding: 0 10px 16px 0; }
.game__schedule__opponent { width: calc(100% - 320px); font-size: 1.8rem; padding: 0 10px 16px 0; }
.game__schedule__arena { font-size: 1.6rem; padding-left: 14px; }
.game__schedule__arena a { text-decoration: underline; }
.game__schedule__ticket a { display: inline-block; font-size: 1.6rem; text-decoration: underline; margin-left: 60px; }
.game__schedule__ticket a:visited { color: #003884; }
.game__schedule--away,
.game__schedule--home { font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 600; width: 12.5%; max-width: 100px; text-align: center; padding: 2px 0 3px; color: #fff; }
.game__schedule--away {background-color: #C60000;}
.game__schedule--home {background-color: #003884;}

@media only screen and (max-width: 768px) {
	.game__schedule { margin-bottom: 60px; padding: 0 20px; }
	.game__schedule .title--2 { font-size: 1.6rem;}
	.game__schedule--item { height: auto; padding: 13px 0; }
	.game__schedule__section { width: 18%; font-size: 1.4rem; margin: 5px 0; padding: 0 2% 0 0; }
	.game__schedule__dates { width: 80%; font-size: 1.2rem; margin: 5px 0; padding: 0; }
	.game__schedule__opponent { width: 100%; font-size: 1.4rem; margin: 5px 0; padding: 0; }
	.game__schedule__arena { font-size: 1.2rem; margin: 5px 0; padding: 0 2% 0 2%; }
	.game__schedule__ticket a { font-size: 1.2rem; margin-left: 0; }
	.game__schedule--away,
	.game__schedule--home { font-size: 1.2rem; width: 27%; max-width: 70px; margin: 5px 0; padding: 2px 0 3px; }
}

/* game__ticket
------------------------------------------------ */
.game__ticket { max-width: 800px; }
.game__ticket__howto__table__sp {display: none;}
.game__ticket__buy {margin-bottom: 85px;}
.game__ticket__buy__table {border-spacing: 0; margin-bottom: 25px;border-collapse: collapse;}
.game__ticket__buy__table thead tr {background-color: #003884; height: 47px;}
.game__ticket__buy__table thead tr th { padding: 0 6px; color: #fff;font-size: 1.6rem;}
.game__ticket__buy__table td {font-size:1.6rem; height: 30px; padding-right: 30px; padding-left: 30px;}

.game__ticket__buy__table__detail {font-size: 1.6rem; text-align: center; line-height: 42px; border-bottom: 1px dotted;}

.game__ticket__price__table { margin-bottom: 20px; border-spacing: 0; border-collapse: collapse; }
.game__ticket__price__table th,
.game__ticket__price__table td { padding: 6px 30px; font-size: 1.6rem; vertical-align: middle; }
.game__ticket__price__table thead th { background: #003884; color: #fff; }
.game__ticket__price__table tbody th,
.game__ticket__price__table tbody td { text-align: center; border-bottom: solid #ccc 1px; }
.game__ticket__price__table tbody th { background: #efefef; border-bottom-color: #fff; }

.game__ticket__buy--note {font-size: 1.6rem}

.game__ticket__howto {margin-bottom: 85px;}
.game__ticket__howto__table {width: 100%; max-width: 800px; margin-bottom: 25px;border-collapse: collapse;}
.game__ticket__howto__table th,
.game__ticket__howto__table td {font-size:1.6rem; border: 1px solid #707070;}
.game__ticket__howto__table th{padding: 12px 32px;background-color: #003884; color: #fff;font-weight: 600; white-space: nowrap;}
.game__ticket__howto__table td {padding: 12px 24px;font-size:1.6rem;}
.game__ticket__howto__table--logo  {text-align: center;}
.game__ticket__howto--note { font-size: 1.6rem; }

.game__ticket__contact {margin-bottom: 85px;}
.game__ticket__contact__note {font-size: 1.6rem;}
.game__ticket__contact__note__table {display: table;}
.game__ticket__contact__note__table__sp {display: none;}
.game__ticket__contact__note__table td {border: 0px solid #707070;  text-align: left; text-align: left;}

.game__ticket__manner {margin-bottom: 85px;}
.game__ticket__manner--subtitle {font-size: 1.8rem; color: #003884; margin-bottom: 5px;margin-top: 60px;}
.game__ticket__manner__note {font-size: 1.6rem; margin-bottom: 60px;}
.game__ticket__manner__focus { text-align: center; font-size: 2rem; margin-bottom: 20px;}
.game__ticket__manner__focus--banner { margin: 20px auto 0; width: 220px; }
.game__ticket__manner__focus--banner > a { display: block; width: 100%; }
.game__ticket__manner--li {font-size: 1.6rem;}

.game__ticket__manner__content {font-size: 1.6rem}
.game__ticket__manner__content table { margin-bottom: 20px; border-spacing: 0; border-collapse: collapse; }
.game__ticket__manner__content table th,
.game__ticket__manner__content table td { padding: 6px 30px; font-size: 1.6rem; vertical-align: middle; }
.game__ticket__manner__content table thead th { background: #003884; color: #fff; }
.game__ticket__manner__content table tbody th,
.game__ticket__manner__content table tbody td { text-align: center; border-bottom: solid #ccc 1px; }
.game__ticket__manner__content table tbody th { background: #efefef; border-bottom-color: #fff; }
.game__ticket__manner__content h4 {font-size: 1.8rem; color: #003884; margin-bottom: 5px;margin-top: 60px;}
.game__ticket__manner__content p + p { margin-top: 20px; }
.game__ticket__manner__content ul { margin-top: 60px; font-size: 1.6rem; }
.game__ticket__manner__content ul:first-child { margin-top: 0; }
.game__ticket__manner__content h4 + ul { margin-top: 0; }
.game__ticket__manner__content ul li { position: relative; padding-left: 1em; }
.game__ticket__manner__content ul li::before { content: '\30FB'; position: absolute; top: 0; left: 0; }
.game__ticket__manner__content img.aligncenter { display: block; margin: 0 auto; }

@media only screen and (max-width: 768px) {
	.game__ticket { padding: 0 20px; }

	.game__ticket__buy { margin-bottom: 40px;}

	.game__ticket__buy__table__wrapper { overflow-x:scroll; overflow-y:visible; width: calc(100% + 40px); margin: 0 -20px;}
	.game__ticket__buy__table__wrapper td, th { padding: 0px 10px;}
	.game__ticket__buy__table {margin: auto; margin-bottom: 16px; width: 100%; white-space: nowrap; margin-left: 20px;}
	.game__ticket__buy__table thead tr {background-color: #003884; height: 40px;}
	.game__ticket__buy__table thead tr th {color: #fff;font-size: 1.2rem;}
	.game__ticket__buy__table td {font-size:1.2rem; height: 30px; padding-right: 1px; padding-left: 1px;}
	.game__ticket__buy__table__detail {font-size: 1.2rem; text-align: center; line-height: 42px; border-bottom: 1px dotted;}
	.game__ticket__price__table { margin-bottom: 16px; width: 100%; }
	.game__ticket__price__table th,
	.game__ticket__price__table td { padding: 4px 18px; font-size: 1.2rem; }
	.game__ticket__buy--note {font-size: 1.2rem}

	.game__ticket__contact {margin-bottom: 40px;}
	.game__ticket__contact__note {font-size: 1.2rem;}
	.game__ticket__contact__note__table {display: none;}
	.game__ticket__contact__note__table__sp {display: table;}
	.game__ticket__contact__note__table__sp td {vertical-align: top;}

	.game__ticket__howto { margin-bottom: 50px; }
	.game__ticket__howto__table {display: none;}
	.game__ticket__howto__table__sp {display: table; width: 100%; margin-bottom: 25px;border-collapse: collapse; margin-bottom: 10px;}
	.game__ticket__howto__table__sp th {background-color: #003884; color: #FFF; text-align: left; border: 0.5px solid #003884; font-size: 1.2rem; line-height: 28px; padding-left: 10px;}
	.game__ticket__howto__table__sp td {height: 60px; font-size:1.2rem; border: 0.5px solid #707070; padding: 10px;}
	.game__ticket__howto__table__sp td:first-child{width: 100px;}
	.game__ticket__howto__table__sp--logo  {text-align: center;}
	.game__ticket__howto--note { font-size: 1.2rem; }

	/*.game__ticket__manner {margin-bottom: 80px;}*/
	.game__ticket__manner__note {font-size: 1.2rem; margin-bottom: 30px;}
	.game__ticket__manner__focus { font-size: 1.4rem; margin-bottom: 10px;}
	.game__ticket__manner__focus--banner { margin-top: 10px; }
	.game__ticket__manner--li {font-size: 1.2rem; }
	.game__ticket__manner--subtitle { font-size: 1.2rem; margin-top: 30px;}

	.game__ticket__manner { margin-bottom: 50px; }
	.game__ticket__manner__content {font-size: 1.2rem}
	.game__ticket__manner__content table { margin-bottom: 16px; width: 100%; }
	.game__ticket__manner__content table th,
	.game__ticket__manner__content table td { padding: 4px 18px; font-size: 1.2rem; }
	.game__ticket__manner__content h4 { font-size: 1.2rem; margin-top: 30px;}
	.game__ticket__manner__content p + p { margin-top: 10px; }
	.game__ticket__manner__content ul { margin-top: 30px; font-size: 1.2rem; }
}

/* game__access
------------------------------------------------ */
.game__access { max-width: 1024px; }

.game__access__title--car {background-image: url(../../img/game/access/icon_car.png);}
.game__access__title--bus {background-image: url(../../img/game/access/icon_bus.png);}
.game__access__title--car, 
.game__access__title--bus {margin-bottom: 10px; font-size: 1.6rem; font-weight: normal; color: #003884; border-bottom: 1px dotted #A7A7A7; background-repeat: no-repeat;background-position: 0% 50%;line-height: 50px; padding-left: 58px;}

.game__access__sport {margin-bottom: 60px;} 
.game__access__sport__list {width: 100%; display: flex; align-items: center; }
.game__access__sport__list--item { width: calc(50% - 17px); height: 240px; text-align: center; font-size: 1.4rem; line-height: 20px;}
.game__access__sport__list--item:first-child { margin-right: 17px; }
.game__access__sport__list--item:nth-child(2) { margin-right: -1px; }
.game__access__sport__list--item:last-child { margin-left: 17px; }
.game__access__sport__list--item:first-child a { padding-top: 110px;}
.game__access__sport__list--item:nth-child(2) a { padding-top: 110px;}
.game__access__sport__list--item:last-child a { padding-top: 100px;}
.game__access__sport__list--item a { display: block; width: 100%; height: 100%; background-color: #E6E6E6; }

.game__access__map p {font-size: 1.4rem; margin-bottom: 40px;}
.game__access__map--timetable {font-size: 1.4rem; margin-bottom: 40px; text-decoration: underline;}
.game__access__map--timetable a {color: #003884;}

.game__access__map__direction {width: 100%; display: flex; flex-wrap: wrap;margin-bottom: 40px;}
.game__access__map__direction--item {width: calc(50% - 22px); display: block;}
.game__access__map__direction--item:nth-child(2n+1) {margin-right: 44px;}
.game__access__map__direction--item p {font-size: 1.4rem; margin: 10px 0 40px;}

@media only screen and (max-width: 768px) {
	.game__access { padding: 0 20px;}

	.game__access__title--car {background-image: url(../../img/game/access/icon_car.png);}
	.game__access__title--bus {background-image: url(../../img/game/access/icon_bus.png);}
	.game__access__title--car,
	.game__access__title--bus {margin-bottom: 8px; font-size: 1.2rem; background-position: 0% 50%; background-size: 30px 30px; line-height: 40px; padding-left: 40px;}

	.game__access__sport__list {width: 100%; display: block; align-items: center; }
	.game__access__sport__list--item {width: 100%; font-size: 1.1rem; display: inline-block; background-color: #E6E6E6;text-align: center; height: 134px; }
	.game__access__sport__list--item:first-child { margin: 0 0 9px; }
	.game__access__sport__list--item:nth-child(2) { margin: 0 0 9px; }
	.game__access__sport__list--item:last-child { margin:0; }
	.game__access__sport__list--item:first-child a { padding-top: 60px;}
	.game__access__sport__list--item:nth-child(2) a { padding-top: 60px;}
	.game__access__sport__list--item:last-child a { padding-top: 50px;}

	.game__access__map p {font-size: 1.2rem; margin-bottom: 30px;}
	.game__access__map--timetable {font-size: 1.2rem;}

	.game__access__map__direction {width: 100%; display: block; margin-bottom: 20px;}
	.game__access__map__direction--item {width: 100%; display: block;}
	.game__access__map__direction--item p {font-size: 1.2rem; margin: 10px 0 30px;}
}