@charset "utf-8";

/* kv
---------------------------------------------- */
body {
	background:url(../images/bg.png) top center no-repeat #F56600;
	background-size:106% auto;
}
.wrap {
	color:#FFF;
}
#kv {
	position:relative;
}
	@media(max-width:767px) {
		#kv {
			width:auto;
			margin-left:0;
			padding:80px 0 75% 0;
			background:url(../images/bg_kv_sp.png) center bottom no-repeat;
			background-size:100%;
		}
		#kv img.kv {
			position:static;
			display:block;
			width:85%;
			margin:0 auto 15px auto;
			transform:none
		}
	}

#kv > strong {
	position:absolute;
	width:34.3%;
	right:8%;
	top:50%;
	transform:translateY(-50%);
}
	@media(max-width:767px) {
		#kv strong {
			position:static;
			display:block;
			width:67%;
			margin:0 auto;
			transform:none
		}
	}
#kv > strong > img {
	width:100%;
}
#kv > img.scroll {	/* scroll */
	display:none;
}
	@media(max-width:767px) {
		#kv > img.scroll {	/* scroll */
			display:block;
			position:absolute;
			top:54%;
			left:10px;
			width:22px;
		}
	}



/* concept
---------------------------------------------- */

#concept {
	z-index:50;
	position:relative;
	width:55%;
	aspect-ratio: 1750 / 1658;
	background:url(../images/bg_concept.png) left center no-repeat;
	background-size:contain;
	font-size:18px;
}
	@media(max-width:1099px) {
		#concept {
			width:73.3%;
			font-size:17px;
		}
	}
	@media(max-width:767px) {
		#concept {
			width:auto;
			aspect-ratio:auto;
			background:url(../images/bg_concept_sp.png) center bottom no-repeat;
			background-size:100%;
			padding-bottom:25%;
		}
	}
	@media(max-width:479px) {
		#concept {
			padding-bottom:37.5%;
		}
	}

#concept > div {
	position:absolute;
	margin-left:28%;
	top:50%;
	transform:translateY(-60%);
}
	@media(max-width:1279px) {
		#concept > div {
			margin-left:21%;
		}
	}
	@media(max-width:767px) {
		#concept > div {
			position:static;
			margin-left:12.5%;
			transform:translateY(-22%);
		}
	}
	@media(max-width:479px) {
		#concept > div {
			transform:translateY(-10%);
		}
	}

#concept > div > h2 {
	padding-top:75px;
	opacity:0;
	float:none;
	margin-bottom:10px;
}
#concept > div > h2 > img {
	width:119px;
}
#concept > div >  p {
	opacity:0;
	line-height:1.8;
	color:#650000;

	font-family: "Tsukimi Rounded", sans-serif;
	font-weight: 500;
	font-style: normal;
}
#concept > img.scroll {	/* scroll */
	position:absolute;
	top:-200px;
	left:30px;
	width:22px;
}
	@media(max-width:767px) {
		#concept > img.scroll {	/* scroll */
			display:none;
		}
	}
#concept > img.icon_addmission {
	display:none;
}
	@media(max-width:767px) {
		#concept > img.icon_addmission {
			  animation: anime1 3.5s infinite;
			display:block;
			position:absolute;
			width:38%;
			bottom:-3%;
			right:7%;
		}
	}

/* addmission
---------------------------------------------- */

/* common */
.wrap > section h2 {
	float:left;
}
	@media(max-width:767px) {
		.wrap > section h2 {
			float:none;
		}
	}

.wrap > section h2 > strong {
	font-size:15px;
	display:block;

	font-family: "Tsukimi Rounded", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.wrap > section h2 > img {
	padding:12px 0 18px 0;
	max-width:100%;
}
.wrap > section h2 > span {
	font-size:20px;
	display:block;

	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 800;
	font-style: normal;
}
.wrap > section a {
	display:inline-block;
	margin-top:1em;
}
.wrap > section a.linkMore {
	color:#FFF;
	margin-left:6em;
}
	@media(max-width:767px) {
		.wrap > section a.linkMore {
			margin-left:0;
			float:right;
		}
	}

.wrap > section a.linkMore > img {
	width:208px;
}
.wrap > section a.linkApplication {
	background:url(../images/link_arrow.png) right bottom no-repeat;
	background-size:280px 16px;
	color:#FFF;
	padding:0 4em 8px 0;
	margin-left:3em;
	font-size:17px;
}
	@media(max-width:767px) {
		.wrap > section a.linkApplication {
			margin-left:0;
			float:right;
		}
	}



#addmission {
	z-index:49;
	position:relative;
	width:72%; /* 920px */
	margin-top:-29%;
	float:right;
	aspect-ratio: 1678 / 1374;
	background:url(../images/bg_addmission.png) right center no-repeat;
	background-size:contain;
}
	@media(max-width:1279px) {
		#addmission {
			width:100%;
		}
	}
	@media(max-width:767px) {
		#addmission {
			width:auto;
			margin-top:0;
			float:none;
			aspect-ratio:auto;
			background:url(../images/bg_addmission_sp.png) center bottom no-repeat;
			background-size:cover;
			min-height:780px;
		}
	}
	@media(max-width:639px) {
		#addmission {
			min-height:680px;
		}
	}
	@media(max-width:479px) {
		#addmission {
			min-height:600px;
		}
	}

#addmission > div {
	position:absolute;
	width:100%;
	top:50%;
	transform:translateY(-55%);
}
	@media(max-width:767px) {
		#addmission > div {
			position:static;
			max-width:280px;
			margin:0 auto;
			transform:none;
		}
	}

#addmission > div > h2 {
	padding-top:30px;
	margin-left:7%;
}
	@media(max-width:1279px) {
		#addmission > div > h2 {
			padding-top:50px;
			margin-left:17%;
		}
	}
	@media(max-width:767px) {
		#addmission > div > h2 {
			padding-top:0;
			margin-left:0;
			margin-bottom:20px;
		}
	}

#addmission > div > h2 > strong {
	padding-bottom:12px;
}
#addmission > div > h2 > span {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: normal;
}
#addmission > div > h2 > span.no1 {
	color:#FFB516;
	font-size:28px;
	padding-bottom:8px;
}
#addmission > div > h2 > span.no2 {
	font-size:40px;
}
#addmission > div > p {
	float:right;
	width:62%;
	line-height:1.8;

	font-family: "Tsukimi Rounded", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size:17px;
}
	@media(max-width:1279px) {
		#addmission > div > p {
			width:52%;
		}
	}
	@media(max-width:979px) {
		#addmission > div > p {
			width:47%;
		}
	}
	@media(max-width:767px) {
		#addmission > div > p {
			float:none;
			width:auto;
			font-size:14px;
		}
	}

#addmission > img {
	position:absolute;
	top:-5%;
	right:14%;
	width:32%;
}
	@media(max-width:1279px) {
		#addmission > img {
			width:24%;
			right:5%;
		}
	}

	@media(max-width:767px) {
		#addmission > img.icon_addmission {
			display:none;
		}
	}

#addmission > img {
  animation: anime1 2.5s infinite;
  opacity: 1;
}
@keyframes anime1 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

/* music
---------------------------------------------- */
#music {
	z-index:48;
	position:relative;
	width:75%; /* 960px */
	margin-top:-23%;
	float:left;
	aspect-ratio: 2429 / 1876;
	background:url(../images/bg_music.png) left center no-repeat;
	background-size:contain;
}
	@media(max-width:1279px) {
		#music {
			margin-top:-25%;
			width:100%;
		}
	}
	@media(max-width:767px) {
		#music {
			width:auto;
			margin-top:0;
			float:none;
			aspect-ratio:auto;
			background:url(../images/bg_music_sp.png) center bottom no-repeat;
			background-size:cover;
			padding-bottom:65%;
		}
	}

#music > div {
	position:absolute;
	width:100%;
	top:28%;
}
	@media(max-width:767px) {
		#music > div {
			position:static;
			max-width:280px;
			margin:0 auto;
		}
	}

#music > div > h2 {
	padding-top:50px;
	margin-left:20%;
}
	@media(max-width:979px) {
		#music > div > h2 {
			margin-left:12%;
		}
	}
	@media(max-width:767px) {
		#music > div > h2 {
			padding-top:0;
			margin-left:0;
			margin-bottom:20px;
		}
	}

#music > div > h2 > span {
	color:#BE1D63;
}
#music > div > h2 > img {
	width:227px;
}
#music > div > div {
	float:right;
	width:49%;
	line-height:1.8;

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size:17px;
}
	@media(max-width:1279px) {
		#music > div > div {
			width:55%;
			font-size:15px;
		}
	}
	@media(max-width:767px) {
		#music > div > div {
			float:none;
			width:auto;
		}
	}

#music > div > div > strong {
	font-size:30px;
	line-height:1;
	margin-bottom:12px;
	display:block;
}

#music > div > div > p {
}



#music > img.icon_music {
	position:absolute;
	bottom:2%;
	left:7.7%;
	width:39%; /* 370px */
}
	@media(max-width:1279px) {
		#music > img.icon_music {
			width:32%;
		}
	}
	@media(max-width:767px) {
		#music > img.icon_music {
			left:4.4%;
			width:47.8%;
			bottom:10%;
		}
	}
	@media(max-width:379px) {
		#music > img.icon_music {
			bottom:6%;
		}
	}

#music > img.icon_music {
  animation: anime2 2s ease-in-out infinite;
}
 
@keyframes anime2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  10% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  20% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  35% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  50% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  70% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
 

#music > img.icon_shop {
	display:none;
}
	@media(max-width:1279px) {
		#music > img.icon_shop {
			animation: anime3 3.5s infinite;
			display:block;
			position:absolute;
			bottom:-5%;
			right:2.8%;
			width:30%;
		}
	}
	@media(max-width:979px) {
		#music > img.icon_shop {
			bottom:-6%;
			width:26%;
		}
	}
	@media(max-width:767px) {
		#music > img.icon_shop {
			bottom:-5%;
			width:36%;
		}
	}
	@media(max-width:379px) {
		#music > img.icon_shop {
			bottom:-6%;
		}
	}




/* common */
.shop {
	position:relative;
}
.shop > div {
	position:absolute;
	width:100%;
	top:50%;
	transform:translateY(-55%);
}
	@media(max-width:1279px) {
		.shop > div {
			transform:translateY(-50%);
		}
	}
	@media(max-width:767px) {
		.shop > div {
			position:static;
			max-width:280px;
			margin:0 auto;
			transform:none;
		}
	}

.shop > div > h2 {
	padding-top:30px;
	margin-left:10%;
}
	@media(max-width:1279px) {
		.shop > div > h2 {
			margin-left:12%;
		}
	}
	@media(max-width:979px) {
		.shop > div > h2 {
			padding-top:50px;
			margin-left:6%;
		}
	}
	@media(max-width:767px) {
		.shop > div > h2 {
			padding-top:0;
			margin-left:0;
			margin-bottom:20px;
		}
	}

.shop > div > div {
	float:right;
	width:58%;
}
	@media(max-width:1279px) {
		.shop > div > div {
			float:right;
			width:54%;
		}
	}
	@media(max-width:767px) {
		.shop > div > div {
			float:none;
			width:auto;
		}
	}

.shop > div > div > h3 {
	margin-bottom:12px;

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: bold;
	font-size:35px;
}
	@media(max-width:979px) {
		.shop > div > div > h3 {
			font-size:27px;
		}
	}

.shop > div > div > strong {
	display:inline-block;
	margin-bottom:12px;

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: bold;
	font-size:17px;
}
.shop > div > div > p {
	line-height:1.6;
	margin:0 1em 1em 0;
}
	@media(max-width:767px) {
		.shop > div > div > p {
			margin:0 0 1em 0;
		}
	}

.shop > div > div > figure {
	margin-bottom:5px;
}
	@media(max-width:767px) {
		.shop > div > div > figure {
			text-align:center;
		}
	}

.shop > div > div > figure >img {
	width:230px;
}

.shop > img {
	position:absolute;
	top:-8%;
	right:9.8%;
	width:33%;
}
	@media(max-width:1279px) {
		.shop > img {
			display:none;
		}
	}

.shop > img {
  animation: anime3 3.5s infinite;
  opacity: 1;
}
@keyframes anime3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  8% {
    transform: skew(5deg, 5deg);
  }
  15% {
    transform: skew(-4deg, -4deg);
  }
  23% {
    transform: skew(3deg, 3deg);
  }
  30% {
    transform: skew(-2deg, -2deg);
  }
  38% {
    transform: skew(1deg, 1deg);
  }
  45% {
    transform: skew(-0.6deg, -0.6deg);
  }
  55% {
    transform: skew(0.3deg, 0.3deg);
  }
}



/* food_drink
---------------------------------------------- */

#food_drink {
	float:right;
	z-index:47;
	width:72%; /* 920px */
	margin-top:-26%;
	aspect-ratio: 2328 / 1907;
	background:url(../images/bg_food_drink.png) right center no-repeat;
	background-size:contain;
}
	@media(max-width:1279px) {
		#food_drink {
			margin-top:-28.5%;
			width:100%;
		}
	}
	@media(max-width:767px) {
		#food_drink {
			width:auto;
			margin-top:0;
			float:none;
			aspect-ratio:auto;
			background:url(../images/bg_food_drink_sp.png) center bottom no-repeat;
			background-size:cover;
			padding-bottom:40%;
		}
	}

#food_drink > div > h2 > span, #food_drink > div > div > strong {
	color:#F79E0E;
}
#food_drink > div > h2 {
	margin-bottom:20px;
}
	@media(max-width:979px) {
		#food_drink > div > h2 {
			margin-left:8%;
			padding-top:65px;
		}
	}
	@media(max-width:767px) {
		#food_drink > div > h2 {
			margin-left:0;
			padding-top:0;
		}
	}

#food_drink > div > h2 > img {
	width:213px;
}
	@media(max-width:979px) {
		#food_drink > div > div > p {
			margin-right:30%;
		}
	}
	@media(max-width:767px) {
		#food_drink > div > div > p {
			margin-right:0;
		}
	}

#food_drink a.submit {
	color:#BE1D63;
	font-weight:bold;
	padding:10px 46px 10px 10px;
	background:url(../images/submit1.png) right 5px top 8px no-repeat #FFB515;
	background-size:35px 12px;
}
#food_drink a.submit:hover {
	opacity:0.9;
}



/* market
---------------------------------------------- */

#market {
	float:left;
	z-index:46;
	width:75%; /* 960px */
	margin-top:-22%;
	aspect-ratio: 2429 / 1876;
	background:url(../images/bg_market.png) left center no-repeat;
	background-size:contain;
}
	@media(max-width:1279px) {
		#market {
			width:100%;
			margin-top:-24.5%;
		}
	}
	@media(max-width:767px) {
		#market {
			width:auto;
			margin-top:0;
			float:none;
			aspect-ratio:auto;
				background:url(../images/bg_market_sp.png) center bottom no-repeat;
			background-size:cover;
			padding-bottom:30%;
		}
	}
		
#market > div > h2 > span, #market > div > div > strong {
	color:#650000;
}
	@media(max-width:767px) {
		#market > div > h2 {
			margin-bottom:20px;
		}
	}

#market > div > h2 > img {
	width:279px;
}

#market a.submit {
	color:#FFB515;
	font-weight:bold;
	padding:10px 46px 10px 10px;
	background:url(../images/submit2.png) right 5px top 8px no-repeat #BE1D63;
	background-size:35px 12px;
}
#market a.submit:hover {
	opacity:0.8;
}



/* workshop
---------------------------------------------- */

#workshop {
	float:right;
	z-index:45;
	width:72%; /* 920px */
	margin-top:-26%;
	aspect-ratio: 2328 / 1907;
	background:url(../images/bg_workshop.png) right center no-repeat;
	background-size:contain;
}
	@media(max-width:1279px) {
		#workshop {
			width:100%;
			margin-top:-28.5%;
		}
	}
	@media(max-width:767px) {
		#workshop {
			width:auto;
			margin-top:0;
			float:none;
			aspect-ratio:auto;
				background:url(../images/bg_workshop_sp.png) center bottom no-repeat;
			background-size:cover;
			padding-bottom:30%;
		}
	}

#workshop > div > h2 > span, #workshop > div > div > strong {
	color:#006D63;
}
	@media(max-width:979px) {
		#workshop > div > h2 {
			margin-left:10%;
		}
	}
	@media(max-width:767px) {
		#workshop > div > h2 {
			margin-left:0;
			padding-top:0;
		}
	}

#workshop > div > h2 > img {
	width:177px;
}

	@media(max-width:767px) {
		.venue_clear {
			background-color:#006D63;
		}
	}

#workshop a.submit {
	color:#FFFFFF;
	font-weight:bold;
	padding:10px 46px 10px 10px;
	background:url(../images/submit3.png) right 5px top 8px no-repeat #006D63;
	background-size:35px 12px;
}
#workshop a.submit:hover {
	opacity:0.9;
}



/* venue
---------------------------------------------- */

#venue {
	z-index:44;
	margin-top:-24%;
	background:url(../images/bg_venue.png) top center no-repeat;
	background-size:cover;
}
	@media(max-width:767px) {
		#venue {
			margin-top:0;
			background-color:#006D63;
		}
	}

#venue > div {
	width:calc(100% - 30px);
	max-width:640px;
	margin:0 auto;
	padding-bottom:100px;
	transform:translateY(-3%);
}
	@media(max-width:767px) {
		#venue > div {
			width:auto;
			position:static;
			transform:none;
			padding-bottom:25px;
		}
	}

#venue > div > div {
	width:47%;
	margin-bottom:40px;
}
	@media(max-width:767px) {
		#venue > div > div {
			width:auto;
			margin:0 12.5% 40px 12.5%;
		}
	}

#venue > div > div.left {
	float:left;
}
	@media(max-width:767px) {
		#venue > div > div.left {
			float:none;
			margin:0 12.5% 20px 12.5%;
		}
	}

#venue > div > div.right {
	float:right;
}
	@media(max-width:767px) {
		#venue > div > div.right {
			float:none;
		}
	}

#venue > div > div.left > h2 {
	padding:15px 0 20px 0;
}
#venue > div > div.left > img {
	width:100%;
}
#venue > div > div.right > p {
	line-height:1.8;

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size:17px;
}
#venue > div > img {
	width:81.25%;
	margin-left:15.625%;
	
}
	@media(max-width:767px) {
		#venue > div > img {
			width:100%;
			margin:25px 0 0 0;
		}
	}



/* access
---------------------------------------------- */
#access {
	background-color:#0A6A61;
}
#access > div {
	width:calc(100% - 30px);
	max-width:640px;
	margin:0 auto;
	transform:translateY(-3%);
}
	@media(max-width:767px) {
		#access > div {
			width:auto;
			margin:0 12.5%;
			transform:none;
		}
	}

#access > div > h2 {
	float:none;
	margin-bottom:8px;

	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: bold;
	font-size:17px;
}
#access > div > div {
	margin-bottom:70px;
}
	@media(max-width:767px) {
		#access > div > div {
			margin-bottom:30px;
		}
	}

#access > div > div.left {
	width:47%;
	float:left;
	text-align:center;
}
	@media(max-width:767px) {
		#access > div > div.left {
			width:auto;
			float:none;
		}
	}

#access > div > div.right {
	width:47%;
	float:right;
}
	@media(max-width:767px) {
		#access > div > div.right {
			width:auto;
			float:none;
		}
	}

#access > div > div.left {
	line-height:1.8;
	text-align:center;

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size:17px;
}

#access > div > div.left > h4 {
	line-height:1;
	text-align:left;
	padding:5px;
	color:#006d63;
	background-color:#FFF;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 800;
	font-style: bold;
	font-size:17px;
	margin-bottom:0.5em;
}
#access > div > div.left >h3 {
	text-align:left;
}
#access > div > div.left > p {
	margin-bottom:1em;
	padding-left:1em;
	text-align:left;
	line-height:1.6;
}
#access > div > div.left > p.p2 {
	padding-left:0;
	margin-bottom:0.5em;
}
#access > div > div.left > h4 > span {
	font-weight: 600;
	font-size:15px;
}
#access > div > div.left > a {
	margin-top:0;
	display:inline-block;
	color:#FFF;
	font-size:21px;
	background-color:#F56600;
	padding:12px 12px;
	border-radius:10px;

	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: bold;

}
#access > div > div.right > span {
	display:block;
	line-height:1.8;
	margin-bottom:25px;
}
#access > div > div.right > p {
	background-color:#FFB516;
	border-radius:15px;
	color:#0A6A61;
	padding:12px 18px;
	line-height:1.7;

	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size:13px;
}
#access > div > div.right > p > strong {
	padding:8px 0 12px 0;
	display:block;
	text-align:center;
	line-height:1.4;

	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: bold;
	font-size:17px;
}
#access > div > div.right > p > img {
	width:calc(100% - 20px);
	margin:0 10px 5px 10px;
}

/* map
---------------------------------------------- */
#map {
	width:100%;
	height:600px;
}

/* cover
---------------------------------------------- */

#cover {
	background-color:#F56600;
	position:fixed;
	width:100%;
	z-index:100;
	top:0;
	left:0;
	bottom:0;
	text-align:center;
}
#meter {
	width:200px;
	height:1px;
	position:relative;
	background-color:#999;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
#progress {
	width:0px;
	height:1px;
	background-color:#000;
}