@charset "UTF-8";
*{
  box-sizing: border-box;
  margin : 0;
  padding: 0;
}
html{
  width : 100%;
  height: 100%;
  font-size: 62.5%;
  font-feature-settings: "palt";
  font-family: sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  width : 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  color : #000000;
  background-color : #ffffff;
}
img{
  width: 100%;
  max-width: 100%;
  vertical-align: top;
  image-rendering: -webkit-optimize-contrast;
}
hr{
  border: solid 0 #fff;
  clear : both;
}
a{
  color: inherit;
  text-decoration: none;
}
p{
  font-size:1.5rem;
  width : 100%;
  padding:0 1rem;
}
h1,h3{
  padding : 1rem 1rem 0;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  width: 100%;
  color: #fff;
  text-shadow: 1px 1px 1px #1d1e66, -1px -1px 1px #1d1e66, -1px 1px 1px #1d1e66, 1px -1px 1px #1d1e66, 0px 1px 1px #1d1e66, 0 -1px 1px #1d1e66, -1px 0 1px #1d1e66, 1px 0 1px #1d1e66;
}
header h3{
  padding : 0;
  width : auto;
  position : absolute;
  bottom : 1rem;
  right : 1rem;
  text-align : center;
}
header .font{
  font-family: ta-dansyaku, sans-serif;
}
h1 span,h3 span{
  font-size: 1.6rem;
}
a:hover{
  filter:alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  -moz-opacity:0.7;
  -khtml-opacity: 0.7;
  opacity:0.7;
  zoom:1;
}
.nowrap{
  white-space: nowrap;
}
.inner{
  margin : 0 auto;
  padding : 2rem;
  width : 100%;
  height : 100%;
  max-width : 80rem;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap:1rem;
  z-index : 1;
  position : relative;
}
header{
  width : 100%;
  height: 80vh;
  background-image : url(bgI_top.webp);
  background-repeat : no-repeat;
  background-attachment : scroll;
  background-position : center center;
  background-size : cover;
  position : relative;
}
header h2{
  margin : 1rem auto;
  display:flex;
  width : 90%;
  height: calc(80vh - 21.1rem);
  font-size: 2rem;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  justify-content: center;
  align-items: center;
  color : #f1daef;
  text-shadow: 1px 1px 1px #1d1e66, -1px -1px 1px #1d1e66, -1px 1px 1px #1d1e66, 1px -1px 1px #1d1e66, 0px 1px 1px #1d1e66, 0 -1px 1px #1d1e66, -1px 0 1px #1d1e66, 1px 0 1px #1d1e66;
  letter-spacing : .8rem;
  background-image : url(logo_01.webp);
  background-repeat : no-repeat;
  background-attachment : scroll;
  background-position : center center;
  background-size : contain;
}
nav{
  background : none 0% 0% / auto auto repeat scroll padding-box border-box #787878;
}
nav .inner{
  padding : 1rem;
  max-width : 118rem;
}
nav a{
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 120px;
  height: 120px;
  margin: 0;
  padding: 1rem;
  font-weight : 700;
  transition: 0.5s;
  font-size : 1.6rem;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap:0;
  line-height : 1.1;
}
nav a.btn_01{
  border : 2px solid #a43c99;
  color : #a43c99;
  background-color : #f5e4f3;
}
nav a:hover.btn_01{
  color: #fff;
  background: #a43c99;
}
nav a.btn_02{
  border : 2px solid #e30000;
  color : #e30000;
  background-color : #ffdfdf;
}
nav a:hover.btn_02{
  color: #fff;
  background: #e30000;
}
nav a.btn_03{
  border : 2px solid #ff8040;
  color : #ff8040;
  background-color : #ffebe1;
}
nav a:hover.btn_03{
  color: #fff;
  background: #ff8040;
}
nav a.btn_04{
  border : 2px solid #008040;
  color : #008040;
  background-color : #dfffef;
}
nav a:hover.btn_04{
  color: #fff;
  background: #008040;
}
nav a.btn_05{
  border : 2px solid #0059b3;
  color : #0059b3;
  background-color : #dbedff;
}
nav a:hover.btn_05{
  color: #fff;
  background: #0059b3;
}
nav a.btn_06{
  border : 2px solid #1d1e66;
  color : #1d1e66;
  background-color : #e3e3f7;
}
nav a:hover.btn_06{
  color: #fff;
  background: #1d1e66;
}
nav a.btn_07{
  border : 2px solid #000000;
  color : #000000;
  background-color : #f0f0f0;
}
nav a:hover.btn_07{
  color: #fff;
  background: #000000;
}
nav a.btn_08{
  border : 2px solid #ff0080;
  color : #ff0080;
  background-color : #ffdbed;
}
nav a:hover.btn_08{
  color: #fff;
  background: #ff0080;
}
nav a.btn_09{
  background-image : url(img/tsukushi.webp);
  background-repeat : no-repeat;
  background-attachment : scroll;
  background-position : center center;
  background-size : contain;
}
@media screen and (max-width:1180px){
  nav .inner{
  max-width : 66rem;
}
}
@media screen and (max-width:660px){
  nav .inner{
  max-width : 40rem;
}
}
@media screen and (max-width:400px){
  h1,h3{
  padding : .5rem .5rem 0;
  font-size: 1.8rem;
}
h1 span,h3 span{
  font-size: 1.3rem;
}
header h2{
  font-size: 1.5rem;
  letter-spacing : .4rem;
}
nav .inner{
  padding : 0.1rem;
  gap:0.1rem;
}
nav a,nav .dummy{
  width: calc((100% - 0.4rem) / 3);
  height: auto;
  aspect-ratio:2 / 1;
}
}
section{
  filter: drop-shadow(0px 2px 2px #000);
  color : #ffffff;
  background-repeat: no-repeat;
  background-attachment : fixed;
  background-position: center center;
  background-size: cover;
  position: relative;
}
section::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}
#howto{
  width: 100%;
  padding: 0 10px;
  background-color : #2d2d2d;
}
h4{
  font-size: 2.2rem;
  font-family: ta-dansyaku, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  width: 95%;
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff,
              -1px 1px 1px #fff, 1px -1px 1px #fff,
              0px 1px 1px #fff,  0-1px 1px #fff,
              -1px 0 1px #fff, 1px 0 1px #fff;
}
p.t_txt{
  width: 90%;
  padding: 20px 0 0;
  font-size: 1.5rem;
  text-align: left;
  line-height : 1.6;
}
footer{
  padding : 20px 0px;
  filter: drop-shadow(0px 2px 2px #000);
  color : #ffffff;
  background-color : #000000;
}
footer .inner{
  width: 90%;
  max-width: 700px;
  background-image : url(img/batten.webp);
  background-repeat : no-repeat;
  background-position : center top;
  background-size : contain;
  font-weight: 700;
  text-align: center;
  padding-top : 80px;
}
footer h4{
  padding: 10px 0;
  color : #fff;
  text-shadow:1px 1px 1px #1d1e66, -1px -1px 1px #1d1e66,
              -1px 1px 1px #1d1e66, 1px -1px 1px #1d1e66,
              0px 1px 1px #1d1e66,  0-1px 1px #1d1e66,
              -1px 0 1px #1d1e66, 1px 0 1px #1d1e66;
}
footer p{
  padding : 0px 0px 10px 1.2rem;
  font-size : 1.2rem;
}
footer .date{
  color : #1d1e66;
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, 1px 0px 1px #fff, -1px 0px 1px #fff, 0px 1px 1px #fff, 0px -1px 1px #fff;
}
footer span{
  font-size : 1.8rem;
}
footer .date span.b,footer .venue span{
  font-size : 2rem;
}
footer .venue{
  color : #1d1e66;
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, 1px 0px 1px #fff, -1px 0px 1px #fff, 0px 1px 1px #fff, 0px -1px 1px #fff;
}
footer span.bb{
  font-size : 2.5rem;
  font-weight : 900;
}
footer span.red{
  color : #e64437;
}
footer label{
  width: 100%;
  margin: 0 auto;
  padding: 0px 0px 5px;
  max-width: 500px;
  font-size: 1.2rem;
  color: white;
  display: block;
  font-weight: 500;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 0px 1px 1px #000, 0-1px 1px #000, -1px 0 1px #000, 1px 0 1px #000;
}
.c_txt{
  margin : auto;
  padding : 10px 0px 0px;
  width : 97%;
  max-width : 500px;
  background-color : rgba(29, 30, 102, 0.75);
  border-radius: 5px;
  text-align : left;
}
.c_txt ul{
  font-size: 14px;
  line-height: 1.5;
  padding:0 2rem;
}
.c_txt li + li{
  margin-top: 5px;
}
.c_txt li{
  margin : auto;
  padding : 0px 20px 5px 15px;
  font-size : 1.4rem;
  font-weight : 600;
  z-index : 30;
  position: relative;
  list-style-type : none;
}
.c_txt li::before{
  content: "";
  position: absolute;
  top: .4em;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
}
footer .member{
  width : 98%;
  max-width : 360px;
  margin : 0px auto;
  padding : 30px 0px 0px;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: flex-start;
  gap : 5px;
  line-height : 1.4;
  color : white;
  font-size : 1.15rem;
}
footer .member a{
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  gap : 1rem;
}
footer .member div{
  width : calc(calc(100% - 10px) / 3);
}
footer .member div.take{
  width : 70%;
  line-height : 1.3;
}
footer .member img{
  max-width: 60px;
  max-height: 60px;
}
h5{
  font-size: 25px;
  font-weight: 100;
  margin: 10px auto;
  position: relative;
  padding: 1px 0 9px;
  width: 100%;
  height: 35px;
  background-size: 30px auto;
  background-repeat: no-repeat;
  background-position: left center;
  background-attachment: scroll;
  font-family: ruika, sans-serif;
  line-height: 35px;
  filter: drop-shadow(0px 2px 2px #000);
}
#time-table h5{
  background-image : url(img/watch.svg);
}
#event h5,#tsukushichan h5{
  background-image : url(img/run.svg);
}
#sponsorship h5{
  background-image : url(img/sponsor.svg);
}
#access h5{
  background-image : url(img/access.svg);
}
h5::after{
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, #fff, transparent);
  background: linear-gradient(to right, #fff, transparent);
}
h5::before{
  content: "　 ";
}
h5.evet{
  background-image : url(img/run.svg);
}
h6{
  display: inline-block;
  position: relative;
  padding: 0 2.5em;
  font-size : 1.9rem;
  font-weight : 700;
}
h6::before,
h6::after{
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 45px;
  height: 3px;
  background-color: #ffffff;
}
h6::before{
  left: 0;
}
h6::after{
  right: 0;
}
p.sub{
  width: 95%;
  margin: 5px auto;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: right;
  padding: 0;
  line-height: 1;
}
#time-table{
  background-image : url(img/batten2.webp);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
#time-table .stage{
  width: 100%;
  display:flex;
  justify-content: space-between;
}
#time-table .txt p{
  background-image : linear-gradient(to right, #0064c8, transparent);
  border-radius: .5rem;
  padding: 1rem 2rem;
}
#time-table .txt p.rig{
  background-image : linear-gradient(to left, #0064c8, transparent);
  text-align : right;
}
#time-table .stage p{
  width : 45%;
  font-size: 1.6rem;
  font-weight : 100;
  font-family: ruika, sans-serif;
}
#time-table .event{
  width: 100%;
  display:flex;
  flex-wrap:wrap;
  align-content: center;
  gap:1rem;
}
#time-table .event p{
  width: 80%;
  max-width: 50rem;
  background-image : linear-gradient(to right, #408080, transparent, #408080);
  border-radius: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
  -webkit-box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) inset, 0 0 4px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) inset, 0 0 4px rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) inset, 0 0 4px rgba(255, 255, 255, 0.2);
  font-weight: 800;
  line-height: 1.1;
}
#time-table .event p.ws{
  margin-right:auto;
}
#time-table .event p.rs{
  margin-left:auto;
  justify-content: space-between;
  background-image : linear-gradient(to right, #305b5b, transparent, #305b5b);
}
#time-table .event p.as{
  margin:0;
  width: 100%;
  max-width: 100%;
  background-image : linear-gradient(to right, #6a0000, #003d79, #6a0000);
}
#time-table .event p.as{
  margin:0;
  width: 100%;
  max-width: 100%;
  background-image : linear-gradient(to right, #0059b3, transparent, #0059b3);
}
#time-table .event p.as2{
  background-image : linear-gradient(to right, #0064c8, transparent, #0064c8);
}
#time-table .event p label{
  display:flex;
  align-items: center;
  font-size: 1.5rem;
  background-size: auto 20px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url(img/watch.svg);
  padding-left: 25px;
}
#time-table .event p b{
  font-size: 2rem;
  display:flex;
  flex-wrap:wrap;
  align-items: flex-end;
  gap:0;
}
#time-table .event p b i{
  font-size : 1.7rem;
  font-style : normal;
  text-decoration : none;
  white-space: nowrap;
}
#time-table .event p.ws label{
  order: 1;
}
#time-table .event p.rs label{
  order: 2;
}
#time-table .event p.ws b{
  order: 2;
}
#time-table .event p.rs b{
  order: 1;
}
#time-table .event p span{
  order: 3;
  font-weight : 400;
  width : 100%;
}
#map{
  width:100%;
  height : 100%;
  overflow-x: auto;
}
#map .inner{
  padding:0;
  max-width:initial;
  width: auto;
  height: 100%;
  position: relative;
  aspect-ratio:2 / 1;
  background-image : url(img/map.webp);
  background-repeat : no-repeat;
  background-attachment : scroll;
  background-position : left center;
  background-size : cover;
}
#map ol{
  width: 100%;
  height: 100%;
  position: relative;
  counter-reset: my-counter;
  list-style: none;
}
#map li{
  font-size: 1.3rem;
  position : absolute;
  line-height : 1;
  text-shadow: 0.5px 0.5px 0.5px #fff, -0.5px -0.5px 0.5px #fff, -0.5px 0.5px 0.5px #fff, 0.5px -0.5px 0.5px #fff, 0 0.5px 0.5px #fff, 0 -0.5px 0.5px #fff, -0.5px 0 0.5px #fff, 0.5px 0 0.5px #fff;
  -webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1));
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 1));
}
#map ol li::before{
  content: counter(my-counter);
  counter-increment: my-counter;
  font-size: 2.2vh;
  color:#ffffff;
  display: block;
  float: left;
  line-height: 2.2vh;
  text-align: center;
  height: 2.2vh;
  width: 4vh;
  border-radius: 50%;
  font-weight: 700;
}
#map ol li label{
  padding:.5rem;
  display:flex;
  align-items: center;
  gap:.5rem;
  height: 2.2vh;
}
#map ol li b{
  font-weight: 800;
}
#map ol li i{
  color : #000000!important;
  font-style : normal;
  font-weight: 700;
}
#map ol li.left{
  transform: translate(0, -50%);
}
#map ol li.right{
  transform: translate(-100%, -50%);
  padding-right:4.1vh;
}
#map ol li.right::before{
  right:0;
  position : absolute;
}
#map ol li.top{
  transform: translate(-50%, 0);
  padding-top:2vh;
}
#map ol li.top::before{
  top:0;
  left:1.35px;
  position : absolute;
}
#map ol li.top label,
#map ol li.bot label{
  flex-wrap:wrap;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap:0;
}
#map ol li.bot{
  transform: translate(-50%, -100%);
  padding-bottom:2vh;
}
#map ol li.bot::before{
  bottom:0;
  left:1.35px;
  position : absolute;
}
#map ol li.bot label{
  flex-wrap:wrap;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  height: auto;
}
#map ol li.game{
  color : #008040;
}
#map ol li.game::before{
  background-color: #008040;
}
#map ol li.shop{
  color : #0000ff;
}
#map ol li.shop::before{
  background-color: #0000ff;
}
#map ol li.eat{
  color : #ff0000;
}
#map ol li.eat::before{
  background-color: #ff0000;
}
#map ul{
  width: 100%;
  height: 100%;
  position : absolute;
  counter-reset: my-counter;
  list-style: none;
  top : 0px;
  left : 0px;
}
#map ul li.img{
  transform: translate(-50%, -50%);
  display: flex;
}
#map ul li.ring{
  width : 10vh;
  height : 10vh;
}
#map ul li.sign{
  width : 3vh;
  height : 3vh;
}
#map ul li.txt{
  color:#1d1e66;
  font-size: 1.4rem;
  font-weight: 900;
  filter: drop-shadow(0px 2px 2px #000);
  display:flex;
  flex-direction: column;
  gap:.3rem;
}
#map ul li.pt{
  color:#3054b4;
}
#map ul li.txt b{
  font-size: 3rem;
  font-weight: 100;
  font-family: ruika, sans-serif;
}
#map ul li.area b{
  font-size: 1.8rem;
  color:#a43c99;
  transform: rotate(-20deg);
}
@media screen and (max-height:780px){
  #map ol li,#map ul li.txt{
  font-size: 1.1rem;
}
#map ol li::before{
  font-size: 1.8vh;
  line-height: 1.8vh;
  height: 1.8vh;
  width: 3vh;
}
#map ul li.txt b{
  font-size: 2rem;
}
#map ul li.area b{
  font-size: 1.5rem;
}
}
#shop-list .inner{
  max-width: 150rem;
  font-size:1.6rem;
}
#shop-list br{
  display: none;
}
#shop-list ol{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 2rem) / 3));
  gap: 1rem;
  counter-reset: my-counter;
  list-style: none;
}
@media screen and (max-width: 1200px) {
  #shop-list ol {
  grid-template-columns: repeat(2, calc((100% - 1rem) / 2));
  grid-template-rows: repeat(22, 1fr);
}
}
@media screen and (max-width: 600px) {
  #shop-list ol {
  display: flex;
  flex-direction: column;
}
}
#shop-list ol li{
  padding :.2rem 1rem;
  border-radius: .5rem;
  -webkit-box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) inset, 0 0 4px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) inset, 0 0 4px rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) inset, 0 0 4px rgba(255, 255, 255, 0.2);
  background-color : #0c0c0c;
}
#shop-list ol li::before{
  content: counter(my-counter);
  counter-increment: my-counter;
  display: block;
  float: left;
  width:2.5rem;
  border-radius: .5rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
}
#shop-list ol li.eat::before,div.btn p.eat{
  background-color : #ff0000;
}
#shop-list ol li.game::before,div.btn p.game{
  background-color : #008040;
}
#shop-list ol li.shop::before,div.btn p.shop{
  background-color : #0000ff;
}
div.btn p.all{
  background-color : #000000;
}
div.btn p.pay{
  background-color : #400040;
}
#shop-list ol li label{
  margin-left:3rem;
  display:flex;
  flex-wrap:wrap;
  gap:.1rem;
}
#shop-list ol li label i{
  width:100%;
  font-size:1.3rem;
}
div.btn{
  display:flex;
  gap:.5rem;
}
div.btn p{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: stretch;
  margin : auto;
  padding:.5rem .8rem;
  font-size:1.3rem;
  line-height : 1;
  border-radius: .5rem;
  cursor: pointer;
  font-weight : 700;
}
div.btn p span{
  white-space: nowrap;
}