@import url("/js/slick/slick.css");
@import url("/js/slick/slick-theme.css");
:root {
  --fcsgRed:  #ff4c4f;
  --fcsgBlue: #008eff;
}

html { scroll-behavior: smooth }
body {
  background-image: none;
  padding: 0;
  margin: 0;
  height: 100%;
  -webkit-text-size-adjust: none;
  min-width: initial
}
main {
  padding-bottom: 0;
  font-family: "zen-antique", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #474747;
  background-image: url(./image/bg1.png);
  background-repeat: repeat;
  background-size: auto;
  background-position: left;
  overflow: hidden;
  font-size:min(4vw,20px);
  line-height: 1.8;
  color: #FFF
}
#TOP { padding-top: 100px; margin-top: -100px }
i { font-style:normal }
p { margin-bottom:min(5vw,1.5em) }
table,td,th { border-spacing: 0; border: none; padding: 0; border-collapse: collapse }
dl,dt,dd { margin:0; padding:0 }
a[name] { display: block; margin-top:-100px; padding-top:100px }
.textRe,.textBoRe { color:var(--fcsgRed) }
ul.textKome li:before { color:var(--fcsgRed) }

/* header */
div.spHeader { min-width:1000px }
div.spHeader > h1 { background-image: url(./image/mainView.jpg) }

/* contents */
.inner { width: 100%; max-width:760px; margin:auto; padding:min(9vw,3em) min(4vw,1em); box-sizing:border-box }
article:nth-of-type(1) {
  background-image: url(./image/bg2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
}
article:nth-of-type(2) {
  background-image: url(./image/bg3.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right center;
}
article:last-of-type { background-color: #474747 }
.doc1 { margin-bottom: 3rem }
.doc1::before,
.doc1::after { content: ""; display: block; height: min(3vw,28px); background-repeat: no-repeat; background-size: 100% auto }
.doc1::before { background-image: url(./image/docBgT.svg); background-position: top }
.doc1::after { background-image: url(./image/docBgB.svg); background-position: bottom }
.doc1 > .docInner { background-image: url(./image/docBg.svg); background-repeat: repeat-y; background-size: auto; padding: 0 min(5vw,2rem); padding-bottom: 1px }
/* 下向きの吹き出し */
.bubble {
  position: relative;
  background: #fff;
  padding: 5px 1rem;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #000;
  display: inline-block;
  margin-bottom: 1rem;
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.doc2 { border: var(--fcsgBlue) 1px solid; padding: 0 1rem 1rem; text-align: center }
.doc2 > .docInner { display: flex; justify-content: center; margin-bottom: 1rem }
.doc2 > .docInner > span { font-size:min(5vw,24px); color: #000; display: inline-block; background-color: var(--fcsgBlue); height: 38px; line-height: 38px }
.doc2 > .docInner::before,
.doc2 > .docInner::after { content: ""; background-image: url(./image/doc2BgR.svg); width: 35px; height: 38px; display: inline-block }
.doc2 > .docInner::before { transform: scale(-1, 1) }

/* TITLE */
h2 {
  margin: 0 0 min(6vw,2rem);
  border-left: none;
  padding: 0;
  min-height: initial;
  font-size: min(11vw,52px);
  font-weight: normal;
  line-height: 1.2;
  color: #FFF;
  background-color: transparent;
  text-align: center;
  font-family: "protest-revolution", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
}
h2 > span:first-of-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
h2 > span:first-of-type::before { content: ""; background: url(./image/h2Img.png) no-repeat left top; background-size: min(14vw,75px) auto; display: block; width: min(14vw,75px) }
h2 > span:last-of-type { display: block; font-size: min(4vw,16px); background-color: #d54c4f; color: #000; font-family: "zen-antique", sans-serif; margin-top: 5px }
h3 {
  margin: 0 0 1rem;
  padding: 0;
  min-height: initial;
  font-size: min(6vw,38px);
  line-height: 1.3;
  position: relative;
  border: none;
  font-weight: normal;
  text-align: center;
  color: var(--fcsgBlue);
}
.subT { text-align: center; margin-bottom: 1.5rem }
.subT > span { display: inline-block; border-top: #FFF 1px solid; border-bottom: #FFF 1px solid; padding:0.2rem 0.5rem }

/*ボタン*/
a[class^="btn"] {
  border-radius: 20px 0 20px 0;
  color: #FFF;
  text-decoration: none;
  display:inline-block;
  text-align: center;
  padding:min(2vw,0.5rem) min(8vw,3rem);
  font-size:min(5vw,24px)
}
.btn.blue { background-image: linear-gradient(170deg,#0014b5,#003db9); box-shadow: 4px 4px 0px 0 #000 }
.btn.black { border-radius: 50px; background-color: #000; font-size: min(3.5vw,20px) }
.btn.small { padding:min(2vw,0.5rem) min(5vw,1.5rem); font-size:min(4.3vw,18px) }

/* GAME */
.gameDoc { background-color: #FFF; padding: 1rem; border-radius: 6px; color: #000; text-align: center; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.3rem; font-size: min(5vw,24px) }
.gameDoc .day > span:first-of-type { font-size: min(8vw,40px) }
.gameDoc .day > span:last-of-type { font-size: min(6vw,30px) }

/* TICKET */
#ticketWrap h3 { color: #FFF }

/* EVENT */
.dayWrap { display: flex; justify-content: center; gap: 0.5rem }
.dayWrap > .day { background-color: #1a1a1a; padding: 0.1rem 0.8rem; font-size:min(3.2vw,20px); border-radius: 0.8rem 0.8rem 0 0 }
.dayWrap > .day > span { font-size: min(5.2vw,36px); padding-right: 5px }

/* NEWS */
#newsWrap li { border-bottom:#fff 2px solid; padding:0 }
#newsWrap li a { padding:min(2vw,1em) 0; display:flex; align-items: flex-start; justify-content: flex-start; color:#FFF }
#newsWrap li a > span { width:98% }
#newsWrap li a:before {
  font-family: "Font Awesome 6 Free";
  content: "\f054";
  font-weight: 900;
  color: var(--fcsgBlue);
  width: 20px;
  height: 20px;
  font-size: 10px;
  text-align: center;
  margin-right: 1%;
  border-radius: 100%;
  background-color: #272727;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}
#newsWrap li a:hover { text-decoration:none }


/*FONT*/
.f13 { font-size:min(2.7vw,13px) }
.f30 { font-size:min(4.2vw,30px) }
.f40 { font-size:min(5vw,40px) }
.f42 { font-size:min(5.2vw,42px) }
.f44 { font-size:min(5.6vw,44px) }
.f50 { font-size:min(6vw,50px) }


/*==================================================
～1040
==================================================*/
@media screen and ( max-width:1040px) {
  main > article { padding:0 }
  a[name] { display: block; margin-top:-80px; padding-top:80px }
  /* header */
  div.spHeader { min-width:initial }
  div.spHeader > h1 { margin-top: 80px }
  /* contents */
  article:nth-of-type(2) { background-size: 100%; background-position: right -10vw top 10vw }
  /* GAME */
  .gameDoc { flex-direction: column; gap: min(2vw,10px) }
/*～1040 END*/
}
/*==================================================
～670
==================================================*/
@media screen and ( max-width:670px ){
  a[name] { display: block; margin-top:-50px; padding-top:50px }
  /* header */
  div.spHeader { min-width:initial; margin-top: 0 }
  div.spHeader > h1 { background-image:url(./image/mainView_sp.jpg); height: 100vw; margin-top: 50px }
/*～670 END*/
}

/*==================================================
FONT
==================================================*/
  *[class^="font"] { font-style: normal }
/*
  -------日本語
  ・Zen Antique Regular
  font-family: "zen-antique", sans-serif;
  font-weight: 400;
  font-style: normal;

  -------英語
  ・Protest Revolution Regular
  font-family: "protest-revolution", sans-serif;
  font-weight: 400;
  font-style: normal;
*/

/*==================================================
余白
==================================================*/
.mg1e   { margin:        min(4vw,1em)!important }
.mgT05e { margin-top:    min(3.5vw,0.5em)!important }
.mgT1e  { margin-top:    min(4vw,1em)!important }
.mgT2e  { margin-top:    min(5.5vw,2em)!important }
.mgT3e  { margin-top:    min(6vw,3em)!important }
.mgB05e { margin-bottom: min(3.5vw,0.5em)!important }
.mgB1e  { margin-bottom: min(4vw,1em)!important }
.mgB15e { margin-bottom: min(5vw,1.5em)!important }
.mgB2e  { margin-bottom: min(5.5vw,2em)!important }
.mgB25e { margin-bottom: min(5.8vw,2.5em)!important }
.mgB3e  { margin-bottom: min(6vw,3em)!important }
.pd1e   { padding:       min(4vw,1em)!important }
.pd025e { padding:       min(1vw,0.25em)!important }
.pd05e  { padding:       min(3.5vw,0.5em)!important }
.pdT05e { padding-top:   min(3.5vw,0.5em)!important }
.pdT2e  { padding-top:   min(5.5vw,2em)!important }
.pdB05e { padding-bottom:min(3.5vw,0.5em)!important }
.pdB3e  { padding-bottom:min(6vw,3em)!important }