@charset "UTF-8";

/************************************

reset

************************************/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
}

li {
  list-style-type: none;
}

img {
  border: 0;
  vertical-align: bottom;
}

table {
  border-collapse: collapse;
}

address,
em {
  font-style: normal;
}

/************************************

base

************************************/
html {
  font-size: 625%;
}

@media screen and (max-width: 750px) {
  html {
    font-size: 480%;
  }
}

body {
  position: relative;
  font-family: sans-serif;
  font-size: 0.2rem;
  color: #000;
  background: #FFF;
}

p {
  line-height: 1.65;
}

a {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

p a {
  color: #e6003e;
}

img {
  max-width: 100%;
  height: auto;
}

::-moz-selection {
  background: #e6003e;
  color: #FFF;
}

::selection {
  background: #e6003e;
  color: #FFF;
}

.access__map {
  width: 100%;
}

.access__map iframe {
  width: 100%;
  height: 600px;
}

@media screen and (max-width: 750px) {
  .access__map iframe {
    height: 400px;
  }
}

.access__container {
  max-width: 970px;
  margin: 0 auto;
  padding: .7rem 12px;
}

@media screen and (max-width: 750px) {
  .access__container {
    padding: 15% 5%;
  }
}

.access__heading {
  text-align: center;
}

@media screen and (max-width: 750px) {
  .access__heading {
    height: 10vw;
  }

  .access__heading img {
    max-width: auto;
    height: 100%;
    width: auto;
  }
}

.access__sub-heading {
  margin-top: 7%;
  color: #0075c1;
  font-size: .3rem;
  font-weight: bold;
}

.access__route {
  margin-top: 3%;
}

.access__caption {
  margin-top: .1rem;
  font-size: .16rem;
}

.access__route-img {
  margin-top: .3rem;
}

.btn-sns {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 2.1em;
  height: 2.1em;
  font-size: .3rem;
  text-decoration: none;
  color: #FFF;
  background: #000;
  border-radius: 50%;
  -webkit-transition: 0.2s all ease 0s;
  transition: 0.2s all ease 0s;
}

.btn-sns.-twitter:hover {
  background: #1DA1F2;
}

.btn-sns.-instagram:hover {
  background: #E34F60;
}

.btn-sns.-youtube:hover {
  background: #FF0000;
}

@media screen and (min-width: 768px) {
  .btn-ticket {
    display: inline-block;
    position: relative;
  }

  .btn-ticket::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 0;
  }

  .btn-ticket:hover::after {
    -webkit-animation: hoverFlash 0.4s linear forwards;
    animation: hoverFlash 0.4s linear forwards;
  }
}

.fanclub {
  padding: .8rem 12px;
  text-align: center;
}

@media screen and (max-width: 750px) {
  .fanclub {
    padding: 14% 12px;
  }
}

.fanclub__btn {
  display: inline-block;
  position: relative;
  margin-top: .2rem;
}

@media screen and (max-width: 750px) {
  .fanclub__btn {
    margin-top: 4%;
    padding: 0 25%;
  }
}

@media screen and (min-width: 768px) {
  .fanclub__btn a {
    display: inline-block;
  }

  .fanclub__btn a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 0;
  }

  .fanclub__btn a:hover::after {
    -webkit-animation: hoverFlash 0.4s linear forwards;
    animation: hoverFlash 0.4s linear forwards;
  }
}

.footer {
  padding: .5rem 12px;
  text-align: center;
  background: #e3e3e3;
}

.footer__logo {
  margin-top: .5rem;
}

@media screen and (max-width: 750px) {
  .footer__logo {
    padding: 0 15%;
  }
}

.footer__copyright {
  margin-top: .2rem;
  font-size: .12rem;
}

.list-circle__item {
  padding-left: 1em;
  text-indent: -1em;
  font-weight: bold;
  line-height: 1.4;
}

.list-circle__item::before {
  content: "●";
  color: #d8c473;
}

.list-circle__item+.list-circle__item {
  margin-top: .1rem;
}

.main {
  display: block;
  position: relative;
  height: 49vw;
  background: #000 url(images/main_bg.jpg) no-repeat center top;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
  .main {
    background: #000 url(images/main_bg@2x.jpg) no-repeat center top;
    background-size: cover;
  }
}

@media screen and (max-width: 750px) {
  .main {
    height: 134vw;
    background: #000 url(images/main_bg-sp.jpg) no-repeat center top/cover;
  }
}

.main__title {
  position: absolute;
  width: 74vw;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

.main__title img {
  max-width: none;
  width: 100%;
}

@media screen and (max-width: 750px) {
  .main__title {
    width: calc(100% - 24px);
  }
}

.match {
  display: -webkit-box;
  display: flex;
}

@media screen and (max-width: 750px) {
  .match {
    display: block;
  }
}

.match__item {
  -webkit-box-flex: 1;
  flex: 1;
  padding-bottom: 6.5%;
  text-align: center;
  background: #CCC no-repeat center center / cover;
}

.match__heading {
  padding: .08rem 28%;
  background: rgba(0, 0, 0, 0.45);
}

.match__detail {
  margin-top: 8%;
  padding: 0 8%;
}

.match__btn {
  margin-top: 4.5%;
  padding: 0 12%;
}

.movie {
  padding: 0 0 5% 0;
  background: #000 no-repeat center top / cover;
}

.movie__container {
  max-width: 1210px;
  margin: 0 auto;
}

.movie__player {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.movie__player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.player {
  padding: .7rem 0 0 0;
  background: no-repeat center center / cover;
}

@media screen and (max-width: 750px) {
  .player {
    padding: 12% 0 0 0;
  }
}

.player__header {
  max-width: 1330px;
  margin: 0 auto;
  padding: 0 12px;
  text-align: center;
}

@media screen and (max-width: 750px) {
  .player__heading {
    height: 10vw;
  }

  .player__heading img {
    max-width: auto;
    height: 100%;
    width: auto;
  }
}

.player__catch {
  margin-top: 2%;
}

.player__container {
  display: -webkit-box;
  display: flex;
  justify-content: space-around;
  -webkit-box-align: end;
  align-items: flex-end;
  max-width: 1380px;
  margin: 3% auto 0 auto;
}

@media screen and (max-width: 750px) {
  .player__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 10% auto 0 auto;
  }
}

.player__item {
  -webkit-box-flex: 1;
  flex: 1;
  margin: 0 1%;
}

@media screen and (max-width: 750px) {
  .player__item {
    width: 100%;
    margin: 0;
    padding: 5% 12px 0 12px;
    text-align: center;
    background: url(images/player_bg.jpg) no-repeat center center/cover;
  }

  .player__item:nth-of-type(1) {
    -webkit-box-ordinal-group: 3;
    order: 2;
  }

  .player__item:nth-of-type(2) {
    -webkit-box-ordinal-group: 2;
    order: 1;
  }

  .player__item:nth-of-type(3) {
    -webkit-box-ordinal-group: 4;
    order: 3;
  }
}

.rule {
  padding: .7rem 12px;
}

@media screen and (max-width: 750px) {
  .rule {
    padding: 15% 5%;
  }
}

.rule__container {
  max-width: 970px;
  margin: 0 auto;
}

.rule__heading {
  text-align: center;
}

@media screen and (max-width: 750px) {
  .rule__heading {
    height: 10vw;
  }

  .rule__heading img {
    max-width: auto;
    height: 100%;
    width: auto;
  }
}

.rule_schedule {
  margin-top: 7%;
  text-align: center;
}

.rule__overview {
  margin-top: 7%;
}

.rule__sub-heading {
  display: inline-block;
  min-width: 8em;
  padding: .3em;
  color: #FFF;
  text-align: center;
  font-weight: bold;
  background: #000;
}

.rule__summary+.rule__sub-heading {
  margin-top: 2%;
}

.rule__summary {
  margin-top: 1%;
  font-size: .26rem;
  font-weight: bold;
  line-height: 1.3;
}

.rule__detail {
  margin-top: 3%;
}

.sns__list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}

.sns__item {
  margin: 0 .07rem;
}

.ticket {
  padding: 10% 12px;
  background: no-repeat center center / cover;
}

@media screen and (max-width: 750px) {
  .ticket {
    padding: 15% 12px;
  }
}

.tiket__container {
  max-width: 970px;
  margin: 0 auto;
}

.tiket__heading {
  text-align: center;
}

@media screen and (max-width: 750px) {
  .tiket__heading {
    height: 10vw;
  }

  .tiket__heading img {
    max-width: auto;
    height: 100%;
    width: auto;
  }
}

.ticket__summary {
  margin-top: 2%;
  color: #FFF;
  font-weight: bold;
  text-align: center;
}

.ticlet__layout {
  max-width: 806px;
  margin: 2% auto 0 auto;
  border-radius: 6px;
  box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 750px) {
  .ticlet__layout {
    margin: 2% 0 0 0;
  }
}

.ticket__price {
  padding: 3% 12px;
  text-align: center;
}

/************************************

Animation

************************************/
.fade-in {
  opacity: 0;
}

.fade-in.is-show {
  -webkit-animation: fade 1s ease 0.1s forwards;
  animation: fade 1s ease 0.1s forwards;
}

@-webkit-keyframes mouseon {
  1% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mouseon {
  1% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  100% {
    opacity: 1;
  }
}

@keyframes fade {
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes hoverFlash {
  1% {
    opacity: 1;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes hoverFlash {
  1% {
    opacity: 1;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/************************************

Display switch

************************************/
.pc-block {
  display: block;
}

.pc-inline {
  display: inline;
}

.sp-block {
  display: none;
}

.sp-inline {
  display: none;
}

@media screen and (max-width: 750px) {
  .pc-block {
    display: none;
  }

  .sp-block {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .pc-inline {
    display: none;
  }

  .sp-inline {
    display: inline;
  }
}