@charset "utf-8";
@import url('normalize.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&display=swap');

/* ----------------------------------------------

 * 設定をしなおす

---------------------------------------------- */
html{
  scroll-behavior: smooth;/*Safariは非対応*/
}
body {
  margin: 0 auto;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}
table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
img {
  vertical-align: middle;
  border: none;
  pointer-events: none;/* PCの右クリック禁止 */
  /* SPの長押し禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
  *behavior:url(boxsizing.htc);}

.elem{
  word-break: keep-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ----------------------------------------------

 * Starter set

---------------------------------------------- */
/*scrollbar*/
::-webkit-scrollbar{-webkit-appearance:none;width:12px; background-color:#333;}
::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(255,75,80,1);-webkit-box-shadow:0 0 1px #fff;}

/*clearfix*/
.clearfix:after {content: " "; display: block; height: 0;clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* ***DEF-font*** */
html, body, table, th, td, li, div, p, em, mark{font-family: 'Noto Sans JP', sans-serif; font-weight:400;}
strong{font-weight:600;}
i{font-weight:900; font-family:'Font Awesome 6 Free'; display:inline-block; font-style: normal;}
html {font-size: 62.5%;}
body {font-size: 1em; letter-spacing:1px; line-height:1.5;}
main p ,main td, main li, main em{font-size:1.5rem; line-height:1.5; font-weight:500; font-family: 'REM', 'Noto Sans JP', sans-serif;}
@media screen and (max-width: 600px) {
body, table, th, td, li, div, p, dl, dt, dd
main p ,main td,main li{font-size:1.6rem; line-height:1.7;}
}
html, body, table, th, td, li, div, p, dl, dt, dd, a,
h1,h2,h3,h4,h5,h6
{color:#222;}


a {outline:none; transition:.3s;}
a,a:hover,a:hover img {text-decoration: none;}
p > a{text-decoration:underline; color:#0064c8;}
p > a:hover{opacity:.5;}
img {max-width: 100%; height: auto; width:auto;}
p{margin: 0 0 1em 0;}
p + small{display:block;}


br.tb{display:none;}
br.sp{display:none;}
@media screen and (max-width: 768px) {
br.pc{display:none;}
br.tb{display:inherit;}
}
@media screen and (max-width: 600px) {
br.sp{display:inherit;}
}

#wrap{overflow-x:hidden; position:relative;}

/*fade*/
.sa {opacity: 0; transition: all 1s ease; transform: translate(0, 10px);}
.sa.slow {transition: all 2s ease;}
.sa.show {opacity: 1; transform: none;}


/*wave*/
.wave-container {  
  height:24px;
  background-color: rgba(255, 0, 0, 0);
  position: relative;
  transform:rotateX(180deg); 
}

.wave-container::before {   
  content: "";
  width: 100%;
  height: 24px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 0vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 93' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 1C19.5523 2 32.2291 3 51.5 6C104.5 13 200 30 300 46C400 62 500 77 600 71C700 65 800 37 900 21C987.526 3 1085.36 -1 1150 0C1169.54 -1 1180.49 0 1200 1V93H1150C1100 93 1000 93 900 93C800 93 700 93 600 93C500 93 400 93 300 93C200 93 100 93 50 93H0V1.98128Z' fill='%23ffffff'/></svg>");
}

@media(max-width:850px) {
  .wave-container::before {    
    height: 12px
  }  
}

hr{display:block; border:0; width:100px; height:5px; margin:5% auto; background:rgba(255,75,80,1);}


/*header*/
header{background:rgba(0,0,0,.9); position:absolute; left:0; top:0; width:100%; z-index:+1;}
header .logo img{width:auto; height:60px; position:absolute; left:0; top:0;}
header .text{display:flex; justify-content:center; align-items:center; height:60px;}
header .text p{color:#fff; line-height:1; text-align:center; margin:0;}
header .text p br{display:none;}
header .text p span{font-size:120%;}
@media screen and (max-width: 600px) {
header .text{height:50px;}
header .logo img{height:50px;}
header .text p{font-size:90%;}
header .text p br{display:inherit;}
}


/*nav*/
nav {
  display: block; position: fixed; top: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all .5s; z-index: 9001; opacity: 0;
  width: 300px; left: -300px; background: #222;}
.open nav {left: 0; opacity: 1;}
nav .inner {padding: 25px;}
nav .inner > a{display:inline-block; margin-bottom: 1em;}
nav .inner ul {list-style: none; margin: 0; padding: 0;}
nav .inner ul li {position: relative; margin: 0; border-bottom: 2px solid #eee;}
nav .inner ul li > em{display: block; color: #f5f5f5; font-size: 1.4rem; padding: 1em; font-weight:500; letter-spacing:.05em; font-style:normal;}
nav .inner ul li a {display: block; color: #f5f5f5; font-size: 1.4rem; line-height:1; padding: 1em 0; font-weight:500; letter-spacing:.05em; text-decoration: none; transition-duration: 0.2s;}
nav .inner ul li a:hover{background:yellow; color:#222;}
@media screen and (max-width: 600px) {
nav .inner {padding: 1em;}
nav {left: -250px; width: 250px;}
}
.toggle_btn {display: block; position: fixed; transition: all .5s; cursor: pointer; z-index: 9001;
  top: 0; right: 0; width: 50px; height: 50px; background:#222;}
.toggle_btn span {
  display: block; position: absolute; left: 0; height: 2px; background-color: white; border-radius: 4px; transition: all .5s;
  width: 30px;}
.toggle_btn span:nth-child(1) {top: 14px; left:10px;}
.toggle_btn span:nth-child(2) {top: 24px; left:10px;}
.toggle_btn span:nth-child(3) {bottom: 14px; left:10px;}
.open .toggle_btn{background:yellow;}
.open .toggle_btn span {background-color: #222;}
.open .toggle_btn span:nth-child(1) {-webkit-transform: translateY(10px) rotate(-315deg); transform: translateY(10px) rotate(-315deg);}
.open .toggle_btn span:nth-child(2) {opacity: 0;}
.open .toggle_btn span:nth-child(3) {-webkit-transform: translateY(-10px) rotate(315deg); transform: translateY(-10px) rotate(315deg);}
#mask {display: none; transition: all .5s;}
.open #mask {
  display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: .3; z-index: 9000; cursor: pointer;
  background: #222;}
@media screen and (min-width: 600px) {
.toggle_btn {width: 80px; height: 80px;}
.toggle_btn span {width: 40px;}
.toggle_btn span:nth-child(1) {top: 29px; left:20px;}
.toggle_btn span:nth-child(2) {top: 39px; left:20px;}
.toggle_btn span:nth-child(3) {bottom: 29px; left:20px;}
}


/*footer*/
footer .inner{background:#222; color:#ddd; font-size:1.2rem; text-align:center; line-height:1.3;}
footer .inner a{color:#eee;}
footer .inner a:hover{color:#aaa;}
p.to-top,.to-top i{display:block; color:rgba(255,75,80,1); font-size:5rem; width:5rem; height:5rem; cursor:pointer; padding:0; margin:0; text-align:center;}
p.to-top{position:fixed; bottom:0; right:0;}


/*intro*/
/*
#intro{background-image:url(../img/bg_main.jpg); background-size:cover; background-position:left 50% top 50%; background-repeat: no-repeat; position:relative;}
#intro .anclink{display:inline-block; overflow:hidden; border-top-left-radius:.5em; border-bottom-left-radius:.5em;  width:33%; max-width:180px; position:absolute; bottom:-5%; right:0; z-index:+1;}
#intro .anclink{animation-name:image0; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: .5s;}
@keyframes image0 {
0% {transform: translate(0,0px);}
100% {transform: translate(0,-5px);}
}
#intro > .inner{display:flex; justify-content:center; align-items:center; padding:100px 5% 40px 5%;}
#intro .inner .logo {max-width:400px; margin:0 auto;}
@media screen and (max-width: 1000px) {
#intro > .inner{padding:100px 5% 50px 5%;}
#intro .inner .logo {max-width:inherit; width:50%;}
}
@media screen and (max-width: 768px) {
#intro .anclink{max-width:150px;}
}
@media screen and (max-width: 600px) {
#intro > .inner{padding:110px 10% 80px 10%}
#intro > .inner .logo {width:100%;}
#intro .anclink{max-width:130px; bottom:-3%;}
}
*/


#intro2{background-image:url(../img/bg_main.jpg); background-size:cover; background-position:left 50% top 50%; background-repeat: no-repeat; position:relative;}
#intro2 .inner{display:flex; justify-content:center; align-items:center; padding:100px 0 60px 0;}
#intro2 .inner > div{width:auto; max-width:500px;}
#intro2 .logo img{width:100%; height:auto;}
@media screen and (max-width: 600px) {
#intro2 .inner{padding:80px 10% 40px 10%;}
}


#intro2 #accesslink, #intro2 #snslink{margin:3% 0;}
#intro2 #accesslink a, #intro2 #snslink a{display:block; background:rgba(250,40,50,1); border-radius:.5em; overflow:hidden; box-shadow:5px 5px 0 rgba(100,100,100,.2);}
#intro2 #snslink a{background:rgba(50,140,250,1);}
#intro2 #accesslink a:hover, #intro2 #snslink a:hover{background:rgba(255,180,0,1); box-shadow:5px 5px 0 rgba(255,255,255,0);}
#intro2 #accesslink a .text, #intro2 #snslink a .text{padding:0 5%; padding:1em 1em 1.3em 1em; line-height:1; font-size:3rem; font-weight:700; color:#fff; white-space:nowrap; text-align:center;}
#intro2 #accesslink a .text p, #intro2 #snslink a .text p{color:#fff; margin:0 0 .3em 0;}
i.fa-twitter:before {content: "𝕏"; font-family: unset; font-weight: bold;}
#intro2 #snslink a small{display:inline-block; font-size:80%;}
@media screen and (max-width: 768px) {
#intro2 #accesslink a .text{font-size:2.6rem;}
}
@media screen and (max-width: 600px) {
#intro2 #accesslink a .text, #intro2 #snslink a .text{font-size:2rem;}
}




/*title*/
.inner > .title{text-align:center;}
.inner > .title h2{margin:0 1em 3em 1em; font-size:1.4rem; line-height:1;}
.inner > .title h2 div{display:block; font-size:6rem;/*font-size:400%;*/ margin-bottom:10px; line-height:1;}
.inner > .title h2 div span{font-weight:900;margin:0 .05em; text-shadow:3px 3px 0 #fff;}
.inner > .title h2 div span:nth-child(4n-3){color:#fab41e;}
.inner > .title h2 div span:nth-child(4n-2){color:#e6463c;}
.inner > .title h2 div span:nth-child(4n-1){color:#aac800;}
.inner > .title h2 div span:nth-child(4n){color:#ff9696;}
@media screen and (max-width: 800px) {
.inner > .title h2{margin:1em 0 2em 0;}
.inner > .title h2 div{font-size:5rem;}
}
@media screen and (max-width: 600px) {
.inner > .title h2 div{font-size:4rem;}
}

/*bg-bottom*/
.bg-bottom{display:block; height:130px; background: rgb(255,255,255);background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
#workshop .inner{max-width:1400px; margin:8% auto 0 auto; padding:0 1em;}
@media screen and (max-width: 767px) {
.bg-bottom{height:50px;}
}

/*flex*/
.flex{display:flex; justify-content:center; align-items:center;}
.flex > div{padding:0 2%;}
@media screen and (max-width: 600px) {
.flex{display:block;}
.flex > div{padding:0;}
}

/**************************************************************
***************************************************************
                            EVENTS
***************************************************************
**************************************************************/
#events .inner{padding:5% 1em;}
#eventlist{display:flex; flex-wrap: wrap; margin:5em auto 0 auto; padding:0; max-width:1800px;}
#eventlist > li {margin: 1%; padding:1em 0; width: calc(25% - 2%); list-style-type:none; position:relative;}
#eventlist > li.long{display:block; width:98%; margin:1%;; padding:1em .5em;}
#eventlist > li.long.middle{width:73%;}
#eventlist > li.long .item{display:flex; width:100%; border:5px solid orange; border-radius:1em; padding:2%;}
#eventlist .img, #eventlist .long .img span{display:block; background:#fff; aspect-ratio: 5 / 3; position:relative;}
#eventlist .long .img{width:30%;}
#eventlist .long .text{width:70%; padding-left:3%;}
@media screen and (max-width: 1400px) {
#eventlist > li {width: calc(33% - 2%);}
#eventlist > li.long.middle{width:64%;}
#eventlist .long.middle .img{width:50%;}
#eventlist .long.middle .text{width:50%;}
}
@media screen and (max-width: 900px) {
#eventlist > li.long.middle .item{display:block;}
#eventlist .long.middle .img, #eventlist .long.middle .text{width:100%;}
}
@media screen and (max-width: 768px) {
#eventlist > li {width: calc(50% - 2%);}
#eventlist .long .img{width:40%;}
#eventlist .long .text{width:60%;}
#eventlist > li.long.middle {width:100%;}
#eventlist > li.long.middle .item{display:block;}
#eventlist > li.long.middle .img {max-width:400px; margin:0 auto;}
}
@media screen and (max-width: 600px) {
#eventlist{display:block; margin:2em 0 0 0;}
#eventlist > li {width:100%; margin:0;}
#eventlist > li.long, #eventlist > li.long.middle{width:100%; margin:0;}
#eventlist > li.long .item{display:block; padding:1em 1em 1.5em 1em; border:0; border-radius:.5em; padding:0;}
#eventlist .long .img{width:100%;}
#eventlist .long .text{width:100%; padding:0;}
#eventlist > li.long.middle .img {max-width:inherit;}
}
/*copyright*/
@media print {ul.eventlist .img img{ display: none;}}
/*icon*/
#eventlist > li .icon{position:absolute; left:0; top:0;}
#eventlist > li .icon img{display:inline-block; width:50px; height:auto; margin:0;}
@media screen and (max-width: 600px) {
#eventlist > li{padding:2% 2% 10% 2%; width:100%;}
#eventlist > li .icon img{width:40px;}
}
/*h3*/
#eventlist .text .title h3{line-height:1.3; margin:1em 0 0 0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
@media screen and (min-width: 768px) and (max-width: 1100px) {#eventlist .text .title h3{font-size:2rem;}}
@media screen and (min-width: 1101px) {#eventlist .text .title h3{font-size:2.3rem;}}
#eventlist .text .title span+h3{margin-top:0;}
#eventlist .text .title h3 span{background:linear-gradient(transparent 60%, #eee 60%);}
#eventlist .text .title div > span{background:#ccc; color:#fff; font-size:1.3rem; line-height:2em; padding:0 .5em; display:inline-block; margin:1em .3em .5em 0;}
#eventlist .text .title div > span.tip1{background:#001ebe;}
#eventlist .text .title div > span.tip2{background:#0096ff;}
#eventlist .text .title div > span.tip3{background:#005ae6;}
#eventlist .text .flex.mc{align-items:flex-start; display:flex !important;}
#eventlist .text .flex.mc .img{width:30%; max-width:150px;}
#eventlist .text .flex.mc .text{width:70%;}
#eventlist .text .flex.mc .text p{font-size:1.3rem; line-height:1.3; margin:0 0 .5em 0; letter-spacing:0;}
@media screen and (max-width: 600px) {
#eventlist .text .title div > span{ font-size:1.1rem;}
#eventlist .text .flex.mc{gap:15px;}
}
/*data*/
#eventlist .text .data{background:rgba(200,200,200,.2); padding:1em .5em; margin:1em 0;}
#eventlist .text time span{white-space:nowrap; display:inline-block; line-height:1; font-weight:700; font-size:130%;}
#eventlist .text time span.time{font-size:100%;}
#eventlist .text span i{display:inline-block; margin-right:.3em;}
#eventlist .text span.place{font-size:90%; font-weight:500; letter-spacing:0; display:block; line-height:1; margin:1em 0 0 0;}
@media screen and (max-width: 600px) {
#eventlist .text time span{font-size:110%;}
#eventlist .text time span.time{font-size:90%;}
#eventlist .text span.place{font-size:80%;}
}
/*btn*/
#eventlist .text a.btn{background:#eee; color:#fff; border-radius:2em; padding:.7em; display:block; box-shadow:2px 3px 2px rgba(200,200,200,.5); font-weight:600; font-size:90%; line-height:1; text-align:center; margin-top:2em;}
#eventlist .text a.btn:hover{box-shadow:0 0 0 #fff; background:#eee; color:#fff;}
@media screen and (max-width: 600px) {
#eventlist .text a.btn{margin-top:1em;}
}
/*colors*/
#eventlist > li .text .title h3 span{background:linear-gradient(transparent 60%, rgba(250,180,30,.5) 60%);}
#eventlist > li .text .data{background:rgba(250,180,30,.1);}
#eventlist > li .text a.btn{background:rgba(250,180,30,1);}
#eventlist > li .text a.btn:hover{background:rgba(255,150,0,1);}
#eventlist > li:nth-child(4n-2) .text .title h3 span{background:linear-gradient(transparent 60%, rgba(230,70,60,.5) 60%);}
#eventlist > li:nth-child(4n-2) .text .data{background:rgba(230,70,60,.1);}
#eventlist > li:nth-child(4n-2) .text a.btn{background:rgba(230,70,60,1);}
#eventlist > li:nth-child(4n-2) .text a.btn:hover{background:rgba(220,40,30,1);}
#eventlist > li:nth-child(4n-1) .text .title h3 span{background:linear-gradient(transparent 60%, rgba(170,200,0,.5) 60%);}
#eventlist > li:nth-child(4n-1) .text .data{background:rgba(170,200,0,.1);}
#eventlist > li:nth-child(4n-1) .text a.btn{background:rgba(170,200,0,1);}
#eventlist > li:nth-child(4n-1) .text a.btn:hover{background:rgba(150,180,0,1);}
#eventlist > li:nth-child(4n) .text .title h3 span{background:linear-gradient(transparent 60%, rgba(255,150,150,.5) 60%);}
#eventlist > li:nth-child(4n) .text .data{background:rgba(255,150,150,.1);}
#eventlist > li:nth-child(4n) .text a.btn{background:rgba(255,150,150,1);}
#eventlist > li:nth-child(4n) .text a.btn:hover{background:rgba(255,110,110,1);}



/**************************************************************
***************************************************************
                            CHECK
***************************************************************
**************************************************************/
/*
p.access{text-align:center; text-shadow:3px 3px 0 #fff; font-weight:900; margin:2em 0;}
@media screen and (min-width: 1200px) {
p.access{font-size:2.3rem;}
}
@media screen and (min-width: 601px) and (max-width: 1199px) {
p.access{font-size:2rem;}
}
@media screen and (max-width: 600px) {
p.access br{display: none;}
}

.accessbox{background:rgba(255,255,255,.7); padding:5%;}
.accessbox h3{font-size:2rem; margin:0 0 1em 0; line-height:1.3;}
.accessbox h3 span{background:linear-gradient(transparent 60%, yellow 60%);}
.accessbox h4{margin:0 0 .5em 0; line-height:1;}
.accessbox small{line-height:1.3; display:block; margin:.5em 0 0 0;}
.accessbox > ul{margin:0; padding:0;}
.accessbox > ul > li{margin:0; padding:0;}
.accessbox > ul.line > li{border-left:5px solid orange; margin:1.5em 0; padding:0 0 0 1em; list-style-type: none;}
.accessbox > ul.def > li{margin-left:1.5em;}
.accessbox > ul > li > ul{padding:.5em 0 0 1em;}
.accessbox > ul > li > ul > li{margin:0; line-height:1.3; font-size:95%;}
@media screen and (max-width: 600px) {
.accessbox h3{font-size:1.6rem;}
.accessbox > ul.line > li{border-left:3px solid orange; padding:0 0 0 .5em;}
.accessbox > ul.def > li{font-size:95%;}
}
/*map*/
/*
#maparea{overflow:hidden; position:relative; height:400px; width:95%; max-width:1200px; margin:50px auto 0 auto;}
#maparea iframe{display:block; width:100%; height:400px; position:absolute;}
*/

/**************************************************************
***************************************************************
                           SCHEDULE
***************************************************************
**************************************************************/
#schedule{background:repeating-linear-gradient(60deg, #ebfaff, #ebfaff 10px, #fff 0, #fff 20px, #ffffe6 0, #ffffe6 30px);}
#schedule .inner{padding:5% 0 0 0; margin:0 auto; max-width:1400px;}

/*imgmap*/
#imgmap{display:flex; justify-content:flex-start; align-items:flex-start; width:100%; margin:0 auto 80px auto;}
#imgmap .map{width:60%;}
#imgmap .map img{display:block; width:100%; height:auto;}
.map .clickable{position:relative; width:100%; height:100%;}
.map .clickable > div{position:absolute; left:0; top:0; display:none; text-align:center;}
.map .clickable > div i{display:block; margin:0 auto; font-size:300%; text-shadow:0 0 10px rgba(0,0,0,.5);}
.map .clickable > div small{display:block; text-align:center; font-weight:900; font-size:1.3rem; color:#222; letter-spacing:0; line-height:1; margin-bottom:.5em;}
.map .clickable.esports .pin_esports{display:block; top:50%; left:70%;}
.map .clickable.esports .pin_esports i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.fes .pin_fes{display:block; top:64%; left:67%;}
.map .clickable.fes .pin_fes i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.music .pin_music{display:block; top:58%; left:67%;}
.map .clickable.music .pin_music i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.city .pin_city{display:block; top:50%; left:65%;}
.map .clickable.city .pin_city i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.stage .pin_stage{display:block; top:29%; left:29%;}
.map .clickable.ryuji .pin_ryuji{display:block; top:29%; left:29%;}
.map .clickable.pri .pin_pri{display:block; top:29%; left:29%;}
.map .clickable.urtra .pin_urtra{display:block; top:29%; left:29%;}
.map .clickable.urtra .pin_urtra i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.dogen .pin_dogen{display:block; top:29%; left:29%;}
.map .clickable.dogen .pin_dogen i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.fish .pin_fish{display:block; top:29%; left:29%;}
.map .clickable.fire .pin_fire{display:block; top:33%; left:21%;}
.map .clickable.fire .pin_fire i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.play .pin_play{display:block; top:32%; left:12%;}
.map .clickable.book .pin_book{display:block; top:42%; left:28%;}
.map .clickable.book .pin_book i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.god .pin_god{display:block; top:42%; left:28%;}
.map .clickable.food .pin_food{display:block; top:20%; left:36%;}
.map .clickable.food .pin_food i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.work .pin_work{display:block; top:27%; left:38%;}
.map .clickable.work .pin_work i{text-shadow:0 0 10px rgba(255,255,255,.5);}
.map .clickable.ashi .pin_ashi{display:block; top:27%; left:36%;}
.map .clickable.stamp .pin_stamp{display:block; top:27%; left:38%;}
.map .clickable.stamp .pin_stamp i{text-shadow:0 0 10px rgba(255,255,255,.5);}
@media screen and (max-width: 1300px){
.map .clickable.esports .pin_esports{display:block; top:47%; left:69%;}
.map .clickable.fes .pin_fes{display:block; top:63%; left:67%;}
.map .clickable.music .pin_music{display:block; top:56%; left:67%;}
.map .clickable.city .pin_city{display:block; top:48%; left:64%;}
.map .clickable.stage .pin_stage{display:block; top:28%; left:28%;}
.map .clickable.ryuji .pin_ryuji{display:block; top:28%; left:28%;}
.map .clickable.pri .pin_pri{display:block; top:28%; left:28%;}
.map .clickable.urtra .pin_urtra{display:block; top:28%; left:28%;}
.map .clickable.dogen .pin_dogen{display:block; top:28%; left:28%;}
.map .clickable.fish .pin_fish{display:block; top:28%; left:28%;}
.map .clickable.fire .pin_fire{display:block; top:32%; left:20%;}
.map .clickable.play .pin_play{display:block; top:30%; left:12%;}
.map .clickable.food .pin_food{display:block; top:18%; left:36%;}
.map .clickable.work .pin_work{display:block; top:26%; left:38%;}
.map .clickable.ashi .pin_ashi{display:block; top:26%; left:36%;}
.map .clickable.stamp .pin_stamp{display:block; top:26%; left:38%;}
}
@media screen and (max-width: 1000px){
.map .clickable.esports .pin_esports{display:block; top:49%; left:70%;}
.map .clickable.fes .pin_fes{display:block; top:65%; left:67%;}
.map .clickable.music .pin_music{display:block; top:59%; left:67%;}
.map .clickable.city .pin_city{display:block; top:50%; left:65%;}
.map .clickable.stage .pin_stage{display:block; top:28%; left:29%;}
.map .clickable.ryuji .pin_ryuji{display:block; top:28%; left:29%;}
.map .clickable.pri .pin_pri{display:block; top:28%; left:29%;}
.map .clickable.urtra .pin_urtra{display:block; top:28%; left:29%;}
.map .clickable.dogen .pin_dogen{display:block; top:28%; left:29%;}
.map .clickable.fish .pin_fish{display:block; top:28%; left:29%;}
.map .clickable.fire .pin_fire{display:block; top:35%; left:21%;}
.map .clickable.play .pin_play{display:block; top:35%; left:12%;}
.map .clickable.book .pin_book{display:block; top:42%; left:29%;}
.map .clickable.god .pin_god{display:block; top:42%; left:29%;}
.map .clickable.food .pin_food{display:block; top:18%; left:36%;}
.map .clickable.work .pin_work{display:block; top:27%; left:39%;}
.map .clickable.ashi .pin_ashi{display:block; top:27%; left:36%;}
.map .clickable.stamp .pin_stamp{display:block; top:27%; left:39%;}
}
@media screen and (max-width: 767px){
.map .clickable.esports .pin_esports{display:block; top:51%; left:70%;}
.map .clickable.fes .pin_fes{display:block; top:67%; left:67%;}
.map .clickable.music .pin_music{display:block; top:60%; left:67%;}
.map .clickable.city .pin_city{display:block; top:52%; left:65%;}
.map .clickable.stage .pin_stage{display:block; top:31%; left:29%;}
.map .clickable.ryuji .pin_ryuji{display:block; top:31%; left:29%;}
.map .clickable.pri .pin_pri{display:block; top:31%; left:29%;}
.map .clickable.urtra .pin_urtra{display:block; top:31%; left:29%;}
.map .clickable.dogen .pin_dogen{display:block; top:31%; left:29%;}
.map .clickable.fish .pin_fish{display:block; top:31%; left:29%;}
.map .clickable.fire .pin_fire{display:block; top:35%; left:21%;}
.map .clickable.play .pin_play{display:block; top:35%; left:13%;}
.map .clickable.book .pin_book{display:block; top:42%; left:29%;}
.map .clickable.god .pin_god{display:block; top:42%; left:29%;}
.map .clickable.food .pin_food{display:block; top:21%; left:36%;}
.map .clickable.work .pin_work{display:block; top:28%; left:39%;}
.map .clickable.ashi .pin_ashi{display:block; top:28%; left:36%;}
.map .clickable.stamp .pin_stamp{display:block; top:28%; left:39%;}
}
@media screen and (max-width: 600px){
.map .clickable.esports .pin_esports{display:block; top:45%; left:69%;}
.map .clickable.fes .pin_fes{display:block; top:60%; left:66%;}
.map .clickable.music .pin_music{display:block; top:53%; left:65%;}
.map .clickable.city .pin_city{display:block; top:46%; left:62%;}
.map .clickable.stage .pin_stage{display:block; top:26%; left:27%;}
.map .clickable.ryuji .pin_ryuji{display:block; top:26%; left:27%;}
.map .clickable.pri .pin_pri{display:block; top:26%; left:27%;}
.map .clickable.urtra .pin_urtra{display:block; top:26%; left:27%;}
.map .clickable.dogen .pin_dogen{display:block; top:26%; left:27%;}
.map .clickable.fish .pin_fish{display:block; top:26%; left:27%;}
.map .clickable.fire .pin_fire{display:block; top:31%; left:19%;}
.map .clickable.play .pin_play{display:block; top:32%; left:11%;}
.map .clickable.book .pin_book{display:block; top:36%; left:27%;}
.map .clickable.god .pin_god{display:block; top:36%; left:27%;}
.map .clickable.food .pin_food{display:block; top:15%; left:35%;}
.map .clickable.work .pin_work{display:block; top:22%; left:37%;}
.map .clickable.ashi .pin_ashi{display:block; top:22%; left:35%;}
.map .clickable.stamp .pin_stamp{display:block; top:22%; left:37%;}
}
/*pin-color*/
.pin_esports i, .libtn.esports:before{color:rgba(255,60,0,1);}
.pin_fes i, .libtn.fes:before{color:rgba(250,0,150,1);}
.pin_music i, .libtn.music:before{color:rgba(230,0,0,1);}
.pin_city i, .libtn.city:before{color:rgba(250,90,150,1);}
.pin_stage i, .libtn.stage:before{color:rgba(220,250,0,1);}
.pin_ryuji i, .libtn.ryuji:before{color:rgba(250,250,0,1);}
.pin_pri i, .libtn.pri:before{color:rgba(255,190,0,1);}
.pin_urtra i, .libtn.urtra:before{color:rgba(90,220,90,1);}
.pin_dogen i, .libtn.dogen:before{color:rgba(50,220,150,1);}
.pin_fish i, .libtn.fish:before{color:rgba(150,250,200,1);}
.pin_fire i, .libtn.fire:before{color:rgba(200,150,0,1);}
.pin_play i, .libtn.play:before{color:rgba(160,230,0,1);}
.pin_book i, .libtn.book:before{color:rgba(90,200,90,1);}
.pin_god i, .libtn.god:before{color:rgba(220,200,0,1);}
.pin_food i, .libtn.food:before{color:rgba(0,140,230,1);}
.pin_work i, .libtn.work:before{color:rgba(100,100,220,1);}
.pin_ashi i, .libtn.ashi:before{color:rgba(140,200,255,1);}
.pin_stamp i, .libtn.stamp:before{color:rgba(0,200,220,1);}
@media screen and (max-width: 767px){
.map .clickable > div i{font-size:200%;}
.map .clickable > div small{font-weight:600; font-size:1.1rem; background:rgba(255,255,255,1);}
}
#imgmap .text{width:40%;}
#imgmap .text .item{display:block; border:3px solid; padding:4.5em 1.5em 1em 1.5em; margin:1em; border-radius:.5em; background:#fff; position:relative;}
#imgmap .text .item h3{ position:absolute; left:-.5em; top:.5em;  border-top-right-radius:3em; border-bottom-right-radius:3em; display:inline-block; margin:0 1em 0 0; background:#222; color:#fff; line-height:1; padding:.4em 2em .5em 1em; letter-spacing:0; font-size:1.8rem;}
#imgmap .text .item ul{margin:0; padding:0;}
#imgmap .text .item li{list-style-type:none; padding:0 0 0 1.5em; margin:1em 0; letter-spacing:0; line-height:1; cursor:pointer; position:relative; font-size:1.6rem;}
#imgmap .text .item li:before{content:"\f3c5"; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; left:0; top:0; /*display:block; width:.5em; height:.5em; border:4px solid; border-radius:2em;*/}
#imgmap .text .item small{display:inline-block; margin:0 0 0 1em;}
/*area-color*/
#imgmap .text .item.area1{border-color:rgba(250,70,0,1);}
#imgmap .text .item.area1 h3{background:rgba(250,70,0,1);}
#imgmap .text .item.area2{border-color:rgba(170,200,50,1);}
#imgmap .text .item.area2 h3{background:rgba(170,200,50,1);}
#imgmap .text .item.area3{border-color:rgba(0,150,250,1);}
#imgmap .text .item.area3 h3{background:rgba(0,150,250,1);}
@media screen and (max-width: 1000px) {
#imgmap{display:inherit;}
#imgmap .map{width:100%;}
#imgmap .text{width:100%; display:flex; justify-content:flex-start; align-items:flex-start;}
#imgmap .text .item{padding:3em 1.5em .5em 1.5em; margin:.5em; width:calc(100% / 3);}
#imgmap .text .item h3{display:flex; align-items:center; height:3em; top:-1em; font-size:1.4rem;}
#imgmap .text .item li{font-size:1.4rem;}
}
@media screen and (max-width: 767px){
#imgmap .text{display:block; padding:0 1em;}
#imgmap .text .item{margin:1.5em 0; width:100%; padding:1em 1.5em .5em 1.5em;}
#imgmap .text .item h3{height:2em;}
}

/*schedules*/
#schedules{margin:2em auto 0 auto; padding:0; display:flex; width:100%; position:relative;}
#schedules span.scroll{position:absolute; right:0; top:-2.5em; z-index:+2; font-size:1.3rem; color:#aaa; display:none;}
@media screen and (max-width: 1500px) {#schedules span.scroll{display:inherit;} #schedules{padding:0 1em;}}
#schedules > dd{margin:0; padding:0 0 1% 0; overflow-x:auto;}
::-webkit-scrollbar{-webkit-appearance:none;height:12px;}
.schedule{display:flex; justify-content:flex-start; align-items:flex-start; overflow:hidden; min-width:1400px; margin:0 auto;}
@media screen and (max-width: 600px){.schedule{min-width:1100px;}}
.schedule-time:before{display:block; color:#fff; text-align:center; position:absolute; width:100%; top:0; left:0; padding:.2em; font-size:1.5rem;}
.schedule-time.day1:before{content:"3日(金)"; background:#f6ac19;}
.schedule-time.day2:before{content:"4日(土)"; background:#aacf52;}
.schedule-time.day3:before{content:"5日(日)"; background:#ec6d6d;}
.schedule-time{display:block; width:100%; margin:0 1% 0 1%; position:relative; height:7rem;}
.schedule-time li{font-size:1rem; letter-spacing:0; text-align:center; list-style-type:none; white-space:nowrap; position:absolute; bottom:0;}
.schedule-time li:nth-child(1){left:calc(0% - .5em);}
.schedule-time li:nth-child(2){left:calc(9% - .5em);}
.schedule-time li:nth-child(3){left:calc(19% - .5em);}
.schedule-time li:nth-child(4){left:calc(29% - .5em);}
.schedule-time li:nth-child(5){left:calc(39% - .5em);}
.schedule-time li:nth-child(6){left:calc(48% - .5em);}
.schedule-time li:nth-child(7){left:calc(58% - .5em);}
.schedule-time li:nth-child(8){left:calc(68% - .5em);}
.schedule-time li:nth-child(9){left:calc(78% - .5em);}
.schedule-time li:nth-child(10){left:calc(88% - .5em);}
.schedule-time li:nth-child(11){left:calc(98% - .5em);}
.schedule-day{padding:0 2.5% 0 0; width:calc(100% / 3);}
.schedule.area1{background:#feece5; padding:.5% 0;}
.schedule.area2{background:#f6f9ea; padding:.5% 0;}
.schedule.area3{background:#e5f4fe; padding:.5% 0;}
.schedule-area {
  border-left:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1);
  width:100%; margin:10px 20px; font-size:1em;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), rgba(0,0,0,.1) calc(100% - 1px)),linear-gradient(90deg, transparent calc(100% - 1px), rgba(0,0,0,.1) calc(100% - 1px));
  background-size: 10% 2em; background-repeat: repeat; background-position: left top;
}
.area1 .schedule-area{height:8em;}
.area2 .schedule-area{height:20em;}
.area3 .schedule-area{height:8em;}
.schedule-area {position:relative;}
.schedule-area .item{position:absolute;}
.schedule-area .item dl{display:block; margin:.3em 0 .2em 0; padding:0;}
.schedule-area .item dt{text-align:center; font-size:1rem; border-radius:3px; white-space:nowrap; font-weight:500; letter-spacing:0;}
.item.esports1 dt, .item.esports2 dt{background:rgba(255,60,0,1); color:#fff;}
.item.esports1 {top:0; left:20%; width:70%;}
.item.esports2 {top:0; left:20%; width:70%;}
.item.fes1 dt, .item.fes2 dt, .item.fes3 dt {background:rgba(250,0,150,1); color:#fff;}
.item.fes1 {top:2em; left:10%; width:85%;}
.item.fes2 {top:2em; left:10%; width:85%;}
.item.fes3 {top:2em; left:10%; width:85%;}
.item.music dt {background:rgba(230,0,0,1); color:#fff;}
.item.music {top:4em; left:40%;}
.item.city dt {background:rgba(250,90,150,1); color:#fff;}
.item.city {top:6em; left:35%; width:45%;}
.item.stage1 dt, .item.stage2 dt {background:rgba(220,250,0,1);}
.item.stage1 {top:0; left:10%; width:70%;}
.item.stage2 {top:0; left:10%; width:90%;}
.item.ryuji dt {background:rgba(250,250,0,1);}
.item.ryuji {top:2em; left:50%; width:10%;}
.item.pri1 dt, .item.pri2 dt {background:rgba(255,190,0,1);}
.item.pri1 {top:4em; left:2.5%; width:10%;}
.item.pri2 {top:4em; left:42.5%; width:10%;}
.item.urtra1 dt, .item.urtra2 dt {background:rgba(90,220,90,1);}
.item.urtra1 {top:6em; left:2.5%; width:10%;}
.item.urtra2 {top:6em; left:42.5%; width:10%;}
.item.dogen1 dt, .item.dogen2 dt {background:rgba(50,220,150,1);}
.item.dogen1 {top:8em; left:25%; width:10%;}
.item.dogen2 {top:8em; left:55%; width:10%;}
.item.fire dt {background:rgba(200,150,0,1); color:#fff;}
.item.fire {top:10em; left:90%; width:5%;}
.item.play1 dt, .item.play2 dt, .item.play3 dt {background:rgba(160,230,0,1);}
.item.play1 {top:12em; left:0; width:70%;}
.item.play2 {top:12em; left:0; width:70%;}
.item.play3 {top:12em; left:0; width:70%;}
.item.fish dt{background:rgba(150,250,200,1);}
.item.fish {top:14em; left:5%; width:4%;}
.item.book1 dt, .item.book2 dt {background:rgba(90,200,90,1); color:#fff;}
.item.book1 {top:16em; left:20%; width:60%;}
.item.book2 {top:16em; left:10%; width:70%;}
.item.god1 dt, .item.god2 dt {background:rgba(220,200,0,1);}
.item.god1 {top:18em; left:10%; width:70%;}
.item.god2 {top:18em; left:10%; width:70%;}
.item.food1 dt, .item.food2 dt, .item.food3 dt {background:rgba(0,140,230,1); color:#fff;}
.item.food1 {top:0; left:0; width:95%;}
.item.food2 {top:0; left:0; width:95%;}
.item.food3 {top:0; left:0; width:95%;}
.item.work1 dt, .item.work2 dt, .item.work3 dt {background:rgba(100,100,220,1); color:#fff;}
.item.work1 {top:2em; left:10%; width:50%;}
.item.work2 {top:2em; left:10%; width:50%;}
.item.work3 {top:2em; left:10%; width:50%;}
.item.ashi1 dt, .item.ashi2 dt{background:rgba(140,200,255,1);}
.item.ashi1 {top:4em; left:10%; width:70%;}
.item.ashi2 {top:4em; left:10%; width:70%;}
.item.stamp1 dt, .item.stamp2 dt, .item.stamp3 dt{background:rgba(0,200,220,1); color:#fff;}
.item.stamp1 {top:6em; left:0; width:60%;}
.item.stamp2 {top:6em; left:0; width:60%;}
.item.stamp3 {top:6em; left:0; width:60%;}


/**************************************************************
***************************************************************
                             FOOD
***************************************************************
**************************************************************/
#food{background:url(../img/bg_food.gif);}
#food .inner{padding:5% 1em 0 1em;}
#food .title p{font-size:1.8rem; font-weight:bold;}
#foodlist{display:flex; flex-wrap: wrap; margin:5em auto 0 auto; padding:0; max-width:1800px;}
#foodlist > li {margin: 1%; width: calc(33% - 2%); list-style-type:none; position:relative;}
@media screen and (max-width: 1400px) {
#foodlist > li {width: calc(33% - 2%);}
}
@media screen and (max-width: 768px) {
#foodlist > li {width: calc(50% - 2%);}
}
@media screen and (max-width: 600px) {
#foodlist{display:block; margin:2em 0 0 0;}
#foodlist > li {width:100%; margin:1em 0;}
}

#foodlist > li > i{display:inline-block; position:absolute; left:-.5em; top:-.5em; line-height:40px; font-size:15px; width:40px; border-radius:20px; background:#00c8c8; color:#fff; text-align:center;}
#foodlist > li > i.fa-truck{background:#78c800;}
#foodlist .item{background:#fff; padding:1em; box-shadow:5px 5px 0 rgba(100,100,100,.1);}
#foodlist .item .img img{display:block;}
#foodlist .item .text{padding:5% 0 0 0;}
#foodlist .item h3{margin:0 0 .5em 0; line-height:1.3;}
#foodlist .item h3 small{letter-spacing:0;}
#foodlist .item p{line-height:1.5;}
#foodlist .item a{background:#eee; display:block; text-align:center; border-radius:2em; padding:.5em 1.5em; line-height:1; font-size:80%;}
#foodlist .item a:hover{background:#00b4e6; color:#fff;}
@media screen and (max-width: 600px) {
#food .inner{padding:3% 5% 0 5%;}
#food .title p{font-size:1.5rem;}

}
p.more{text-align:center; font-size:1.6rem; font-weight:bold; margin:2em 0 0 0;}


/**************************************************************
***************************************************************
                          WORKSHOP
***************************************************************
**************************************************************/
#workshop{background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23fbfbfb' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23f8f8f8' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23f4f4f4' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23f1f1f1' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23EDEDED' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23f1f1f1' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23f4f4f4' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23f8f8f8' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fbfbfb' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFFFFF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;}
#workshop .inner{padding:0 1em;}

#workshop .title+p{text-align:center;}
#workshop .title+p a{display:inline-block; line-height:1; font-size:80%; color:#fff; background:#0096c8; padding:.3em .5em; border-radius:3px; text-decoration: none;}
#workshop .title+p a:hover{background:#00b4e6;}
#workshop h3{text-align:left; margin:2em 0 .5em 0; font-size:2rem;}
#workshop h3+p{text-align:left; line-height:1.5; background:rgba(255,255,255,.5); padding:1.5em; margin:1em 0 2em 0;}
@media screen and (max-width: 768px) {
#workshop .title+p{text-align:left; line-height:1.5;}
}
@media screen and (max-width: 600px) {
#workshop .title+p{text-align:left; line-height:1.5;}
}


/*schedule*/
#workshop table{width:100%; background:#fff;}
#workshop table th{font-weight:600; line-height:3em; color:#fff; font-size:1.6rem;}
#workshop table th.day1{background:#f6ac19;}
#workshop table th.day2{background:#aacf52;}
#workshop table th.day3{background:#ec6d6d;}
#workshop table td{padding:1% 2%; border:0.5px solid #eee; vertical-align:top;}
#workshop table td a{display:flex; align-items:center; justify-content:center; border-radius:.3em;}
#workshop table td a:hover{opacity:.8;}
#workshop table td a > div{display:block; padding:1.5em .5em;}
#workshop table td a.row2{height:14em;}
#workshop table td a.col1{background:rgba(50,200,20,.5);}
#workshop table td a.col2{background:rgba(250,50,50,.5);}
#workshop table td a.col3{background:rgba(170,230,0,.5);}
#workshop table td a.col4{background:rgba(250,150,0,.5);}
#workshop table td a.col5{background:rgba(170,160,250,.5);}
#workshop table td a.col6{background:rgba(50,180,255,.5);}
#workshop table td a.col7{background:rgba(255,150,150,.5);}
#workshop table td a.col8{background:rgba(250,250,0,.5);}
#workshop table h4{margin:0 0 1em 0; padding:0; line-height:1; text-align:center;}
#workshop table h4 small{display:block; margin:0 0 .5em 0; padding:0; line-height:1;}
#workshop table time{margin:0; padding:0; display:block; line-height:1; text-align:center; font-size:90%;}
#workshop table time i{display:inline-block; margin:0 .5em 0 0;}
@media screen and (max-width: 767px) {
#workshop table th{line-height:1em; padding:.5em;}
#workshop table h4{font-size:85%;}
#workshop table h4 small{letter-spacing:0;}
#workshop table time{font-size:1.2rem;}
}
@media screen and (max-width: 600px) {
#workshop table th{font-size:1.4rem;}
#workshop table td a > div{display:block; padding:1em .4em;}
#workshop table h4 small{font-size:1rem;}
}


/*shoplist*/
#shoplist{display:flex; flex-wrap: wrap; margin:0 auto 0 auto; padding:0; max-width:1800px;}
#shoplist > li {margin: 1%; width: calc(25% - 2%); list-style-type:none; position:relative;}
@media screen and (max-width: 1400px) {
#shoplist > li {width: calc(33% - 2%);}
}
@media screen and (max-width: 768px) {
#shoplist > li {width: calc(50% - 2%);}
}
@media screen and (max-width: 600px) {
#shoplist{display:block; margin:2em 0 0 0;}
#shoplist > li {width:100%; margin:1em 0;}
}

#shoplist{display:flex; flex-wrap: wrap; padding:0; margin:5% 0 0 0;}
#shoplist > li {margin:1%; width: calc(100% / 3 - 2%); list-style-type:none; background:#fff; box-shadow:7px 7px 0 rgba(100,100,100,.1);}
@media screen and (max-width: 767px) {
#shoplist{display:block;}
#shoplist > li {width:100%; margin-left:0 !important;}
}
@media screen and (max-width: 767px) {
#shoplist > li {margin:1em;}
}
#shoplist li .item{padding:5%; border-top:10px solid;}
#shoplist li .item.col1{border-color:rgba(50,200,20,1);}
#shoplist li .item.col2{border-color:rgba(250,50,50,1);}
#shoplist li .item.col3{border-color:rgba(170,230,0,1);}
#shoplist li .item.col4{border-color:rgba(250,150,0,1);}
#shoplist li .item.col5{border-color:rgba(170,160,250,1);}
#shoplist li .item.col6{border-color:rgba(50,180,255,1);}
#shoplist li .item.col7{border-color:rgba(255,150,150,1);}
#shoplist li .item.col8{border-color:rgba(250,250,0,1);}
#shoplist li .item h2{margin:0 0 1em 0; line-height:1.3; font-size:2rem;}
#shoplist li .item h2 small{display:block; letter-spacing:0; line-height:1;}
#shoplist li .item h2 span{display:table; margin:0 0 1em 0; line-height:1; font-size:1.2rem; text-align:center; padding:.5em 1em; background:#aacf52; color:#fff;}
#shoplist li .item.col2 h2 span,#shoplist li .item.col5 h2 span{background:#f6ac19;}
#shoplist li .item.col7 h2 span, #shoplist li .item.col8 h2 span{background:#ec6d6d;}
#shoplist li .item h2 small{display:block; margin:0 0 .5em 0;}
#shoplist li .item .img{max-width:200px; margin:0 auto; overflow:hidden; border-radius:.5em;}
#shoplist li .item .img img{object-fit:cover; width:100%; height:100%;}
#shoplist li .item .img+small{display:block; font-size:1rem; line-height:1; text-align:center; margin:.5em 0 0 0;}
#shoplist li .item .data{line-height:1.7; margin:1em 0; background:#f5f5f5; padding:1em 1.5em; font-weight:600; text-align:left; font-size:85%; line-height:1.3; letter-spacing:0;}
#shoplist li .item .data a{display:inline-block; line-height:1; font-size:1rem; color:#fff; background:#0096c8; padding:.3em .5em; border-radius:3px;}
#shoplist li .item .data a:hover{background:#00b4e6;}
#shoplist li .item p{text-align:left; line-height: 1.5; margin:0;}
@media screen and (max-width: 600px) {
#shoplist li .item .img{max-width:150px;}
#shoplist li .item .data{padding:1em .5em;}
}


/**************************************************************
***************************************************************
                          WORKSHOP
***************************************************************
**************************************************************/
#guugoo{background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='65' height='65' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M.5.5v12h12V.5H.5zm13 13v12h12v-12h-12zm-13 13v12h12v-12H.5zm26 13v12h12v-12h-12zm13 13v12h12v-12h-12z'  stroke-width='1' stroke='none' fill='hsla(20, 100%, 92%, 1)'/><path d='M26.5.5v12h12V.5h-12zm0 13v12h12v-12h-12zm13 13v12h12v-12h-12zm-39 13v12h12v-12H.5zm0 13v12h12v-12H.5z'  stroke-width='1' stroke='none' fill='hsla(333, 100%, 94%, 1)'/><path d='M13.5.5v12h12V.5h-12zm39 13v12h12v-12h-12zm-39 13v12h12v-12h-12zm39 0v12h12v-12h-12zm-26 26v12h12v-12h-12z'  stroke-width='1' stroke='none' fill='hsla(82, 63%, 87%, 1)'/><path d='M52.5.5v12h12V.5h-12zm-13 13v12h12v-12h-12zm0 26v12h12v-12h-12zm13 0v12h12v-12h-12zm-39 13v12h12v-12h-12z'  stroke-width='1' stroke='none' fill='hsla(47, 100%, 88%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");}
#guugoo .inner{padding:5% 1em 0 1em;}

#guugoo .title+p{text-align:center;}
#guugoo .title+p a{display:inline-block; line-height:1; font-size:80%; color:#fff; background:#0096c8; padding:.3em .5em; border-radius:3px; text-decoration: none;}
#guugoo .title+p a:hover{background:#00b4e6;}
#guugoo h3{text-align:left; margin:2em 0 .5em 0; font-size:2rem;}
#guugoo h3+p{text-align:left; line-height:1.5; background:rgba(255,255,255,.5); padding:1.5em; margin:1em 0 2em 0;}
@media screen and (max-width: 768px) {
#guugoo .title+p{text-align:left; line-height:1.5;}
}
@media screen and (max-width: 600px) {
#guugoo .title+p{text-align:left; line-height:1.5;}
}

/*shoplist*/
#guugoolist{display:flex; flex-wrap: wrap; margin:0 auto 0 auto; padding:0;}
#guugoolist > li {margin:1%; width: calc(100% / 3 - 2%); list-style-type:none; background:#fff; box-shadow:7px 7px 0 rgba(100,100,100,.1);}
@media screen and (max-width: 900px) {
#guugoolist > li {width: calc(50% - 2%);}
}
@media screen and (max-width: 600px) {
#guugoolist{display:block; margin:2em 0 0 0;}
#guugoolist > li {width:100%; margin:1em 0;}
}
#guugoolist li .item{padding:5%;}
#guugoolist li .item h3{margin:1em 0; line-height:1.3; font-size:2rem;}
#guugoolist li .item .data{line-height:1.7; margin:1em 0; background:#f5f5f5; padding:1em 1.5em; font-weight:600; text-align:left; font-size:85%; line-height:1.3; letter-spacing:0;}
#guugoolist li .item .data time span{font-size:2rem;}
#guugoolist li .item .data time span.time{font-size:1.5rem;}
#guugoolist li .item .data span.place{display:block; margin:.5em 0 0 0;}
#guugoolist li .item .data span i{display:inline-block; margin-right:.5em;}
#guugoolist li .item p{text-align:left; line-height: 1.5; margin:0;}
@media screen and (max-width: 600px) {
#guugoolist li .item .data{padding:1em .5em;}
}


/**************************************************************
***************************************************************
                            LEAD
***************************************************************
**************************************************************/
#lead{background:url(../img/bg_lead.jpg) center bottom no-repeat #649aca; background-size:100%;}
#lead .inner{padding:8% 1em 15% 1em;}
#lead .inner h1{line-height:1.5; font-weight:900; text-align:center; transform:rotate(5deg); margin:0 0 2em 0; color:#fff; font-size:4rem;}
#lead .inner .flex{display:flex; justify-content:center; align-items:flex-start; max-width:1200px; margin:0 auto; gap:1%;}
#lead .inner .flex > div{width:calc(100% / 3);}
#lead .inner p{font-weight:600; text-align:center; line-height:2; margin:0; color:#fff; font-size:1.8em;}
@media screen and (max-width: 1000px) {
#lead .inner h1{font-size:3rem;}
#lead .inner p{font-size:1.5em;}
}
@media screen and (max-width: 600px) {
#lead .inner{padding:50px 5% 100px 5%;}
#lead .inner h1{ margin:0 0 1em 0; font-size:2.3rem;}
#lead .inner h1 br{display:none;}
#lead .inner p{ text-align:left; line-height:1.5; font-size:1.6rem;}
#lead .inner p br{display:none;}
}
.movbox{max-width:480px; margin:0 auto 5% auto;}
.movbox a:after{display:none;}
.movbox a{position:relative;}
.movbox a span{display:block; width:100%; text-align:center; position:absolute; top:0;}
.movbox a span:before{
  content: ''; display: inline-block;
  width:50px; height:40px; background-image: url(../img/arw_mov.png);
  background-repeat:no-repeat;
  background-size: contain; vertical-align: middle;
}
@media screen and (max-width: 600px) {
.movbox a span:before{width: 30px; height: 24px;}
}


/**************************************************************
***************************************************************
                           SUPPORT
***************************************************************
**************************************************************/

#support{background-color: #F8F8F8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23DDDDDD' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23EEEEEE'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E"); overflow:hidden;}
#support .inner{padding:10% 1em; text-align:center;}
#support .inner h3{font-size:2rem; font-weight:600; text-align:center;}



#support .inner ul, #support .inner li{list-style-type:none; margin:0; padding:0;}

#support .inner ul{display:flex; justify-content:center; flex-wrap: wrap; margin:0 auto 0 auto; padding:0; max-width:1000px;}
#support .inner ul > li {margin: .5%; width: calc(14% - 1%); list-style-type:none; position:relative;}
#support .inner ul.large{margin-bottom:1em;}
#support .inner ul.large > li {margin: 1%; width: calc(20% - 2%); list-style-type:none; position:relative;}
#support .inner li a{display:inline-block;}
@media screen and (max-width: 1000px) {
#support .inner ul.large > li {width: calc(30% - 2%);}
#support .inner ul > li {margin: 1%;}
#support .inner ul > li {width: calc(16.6% - 2%);}
}
@media screen and (max-width: 768px) {
#support .inner ul.large > li {width: calc(33% - 2%);}
}
@media screen and (max-width: 600px) {
#support .inner ul > li {width: calc(25% - 2%);}
}

/**************************************************************
***************************************************************
                           esports
***************************************************************
**************************************************************/
/*events*/
#esports .inner{padding:5% 1% 0 1%; max-width:1300px; margin:0 auto;}
.return{margin:30px 0;}
.return a{font-weight:bold; font-size:1.4rem;}
.return a:hover{color:orange;}
#esports .title h3{font-size:2.3rem;}
#esports .title h3 span{background:linear-gradient(transparent 60%, rgba(250,180,30,.5) 60%);}
#esports .data{background:rgba(250,180,30,.1); padding:1em; font-weight:600;}
#esports .data time{font-size:2rem;}
#esports .data span{margin:0 0 0 1em; white-space:nowrap; font-size:1.4rem;}
#esports .data span i{margin-right: .5em;}
#esports .flex{justify-content:flex-start; align-items:flex-start;}
#esports .flex .img{width:40%; padding:2%;}
#esports .flex .text{width:60%; padding:2%;}
#esports .flex .text p, #esports li, #esports th, #esports td{font-size:1.5rem; line-height:1.7;}
@media screen and (max-width: 600px) {
.return{margin:50px 0 30px 0;}
#esports .data span{margin:0;}
#esports .flex{display:block; padding:0;}
#esports .flex .img{width:100%; padding:0 0 1.5em 0;}
#esports .flex .text{width:100%; padding:0;}
#esports th{font-size:1.2rem; line-height:1.2 !important; padding:0 .3em; letter-spacing:0;}
}
ul.timeschedule{margin:0; padding:0;}
ul.timeschedule li{font-weight:600; line-height:1.3; margin:1em 0; padding:0 0 0 1em; list-style-type:none;}
ul.timeschedule li a{border-bottom:1px solid #e65000; color:#e65000;}
ul.timeschedule li a:hover{color:#e68700;}
ul.timeschedule li time{font-size:90%; display:inline-block; margin-right:1em; font-weight:500 !important;}
ul.timeschedule li small{display:inline-block; font-weight:500; margin:0 0 0 .5em; letter-spacing:0;}
#esports .flex.mc .img{width:25%; padding:2%;}
#esports .flex.mc .text{width:75%; padding:2%;}
#esports .flex.mc p{line-height:1.5;}
#esports .flex.box > div{width:50%;}
@media screen and (max-width: 768px) {
ul.timeschedule li time{display:block; line-height:1;}
#esports .flex.mc .img{width:40%; padding:2%;}
#esports .flex.mc .text{width:60%; padding:2%;}
}
@media screen and (max-width: 600px) {
#esports .flex.box, #esports .flex.mc{display:block;}
#esports .flex.box > div, #esports .flex.mc .img, #esports .flex.mc .text{width:100%; padding:1em 0 0 0 ;}
#esports .flex.mc .img img{width:200px; height:auto; display:block; margin:0 auto;}
#esports .flex.mc .text{padding:0 .5em;}
}
#esports h4{background:#222; color:#fff; line-height:1; padding:1em 1em 1.1em 1em; text-align:left; font-size:2rem;}
#esports h5{font-size:1.8rem; line-height:1; margin:0 0 1em 0;}
#esports h5.marker{font-size:2rem; margin:1.5em 0 1em 0;}
#esports h5.marker span{background:linear-gradient(transparent 60%, rgba(250,180,30,.5) 60%);}
#esports h6{font-size:1.6rem; line-height:1; margin:0 0 1em 0;}
#esports h5.day1{background:#e68700;color:#fff; padding:.5em .5em .5em 1em; margin:0 0 1em 0;}
#esports h5.day2{background:#e65000;color:#fff; padding:.5em .5em .5em 1em; margin:2em 0 1em 0;}
#esports h5.haifu{background:#ddd; padding:.5em .5em .5em 1em; margin:2em 0 1em 0;}
#esports .other{margin-top:3%; background:#f8f8f8; padding:3%; font-weight:500;}
#esports .other p{margin:0 0 1em 0 !important;}
#esports .other ul{margin:0; padding:0;}
#esports .other ul.come li{position:relative; list-style-type:none; padding:0 0 0 1.5em; margin:.5em 0; line-height: 1.3; letter-spacing:0;}
#esports .other ul.come li:before{content:"※"; position:absolute; left:0; top:0;}
@media screen and (max-width: 600px) {
#esports h5.marker{margin-top:1em;}
}
#esports .box{border:5px solid #ddd; padding:3%; border-radius:1em; margin:0 0 5% 0;}
table.idol th{border:1px solid #ccc; padding:.5em; background:#f5f5f5; font-weight:600; line-height:2 !important; white-space:nowrap;}
table.idol td{border:1px solid #ccc; padding:.5em;}


#esports .guest{display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap: wrap;}
#esports .guest > div{font-size:1.2rem; line-height:1; text-align:center; margin:0 1em 1em 0; width:100px;}
#esports .guest > div > p{width:100px; height:100px; margin:0 0 .5em 0; display:block;}
#esports .guest > div > p img{object-fit:cover; width:100%; height:100%;}
#esports .guest > div small{display:block; letter-spacing:0; white-space: nowrap; margin:.5em 0 0 0;}
@media screen and (max-width: 500px) {
#esports .guest > div{margin: 1%; width: calc(25% - 2%); letter-spacing:0;}
#esports .guest > div > p{width:100%; height:100%;}
}