@charset "UTF-8";

body {
	margin:0;
	padding:0;
	font-family: "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", "���C���I", Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif;
	color: #000;
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	background-size: 400% 400%;
	animation: AnimationName 9s ease infinite;
	background: #E1E8EA;
	font-weight: bold;
}

a {
   color:#aba6a6;
   text-decoration:none;
}

a:hover {
   color:#aba6a6;
   text-decoration:none;
}

img { border:0;}

h1,h2,h3,h4,h5,h6,img{
	margin:0;
	padding: 0px;
}

ol,ul,li{list-style: none;margin: 0px;padding: 0px;}


html,body {
	height: 100%;
	padding: 0;
	margin: 0;
}


#top {
	background: #E1E8EA;
	height: 100vh;
	position: relative;
}

#top_top {
	position: absolute;
	width: calc(100% - 14%);
	margin-left: 7%;
	top: 0px;
	background-color: #EDE6E3;
	text-align: center;
	font-size: 22px;
	line-height: 180%;
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	padding-top: 20px;
	padding-bottom: 20px;
	font-family: "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", "���C���I", Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif;
	font-weight: bolder;
}

#top_left {
	position: relative;
	height: calc(100% - 30%);
	width: calc(50% - 14%);
	top: 20%;
	background: #fff;
	float: left;
	margin-left: 7%;
	text-align: center;
}

#logo { position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-70%);
  -webkit- transform: translateY(-50%) translateX(-70%);}

#logo img {
	width:140%;
}

#top_social {
	position: absolute;
	width: 30%;
	left: 7%;
	bottom: 4%;
}

#top_social_in {
	float: left;
	width: 30px;
	margin-right: 3%;
}

#top_scroll {
	position: absolute;
	width: 40px;
	left: calc(25% - 20px);
	bottom: 3%;
}

#top_right {
	position: relative;
	width: calc(60% - 15%);
	top: 250px;
	float: right;
	margin-right: 7%;
}

.right_box_bootom {
	margin-top: 80px;
}

#ticket {
	width: 606px;
	position: fixed;
	right: 0px;
	bottom: 0px;
}

#container {
	width: 86%;
	margin-top: 50px;
	margin-right: 7%;
	margin-left: 7%;
	padding-top: 50px;
	padding-bottom: 130px;
}

.title {
	width: 500px;
	margin-bottom: -15px;
	margin-top: 50px;
}

.artist_bottom {
	width: 80%;
	font-size: 20px;
	margin-top: 30px;
	margin-bottom: 20px;
}

#content_box {
	width: 100%;
	margin-top: 160px;
}

#concept_title {
	width: 25%;
	float: left;
}
#concept_text {
	width: 70%;
	float: left;
	margin-left: 5%;
	font-size: 16px;
	line-height: 210%;
}

#goods_title {width: 25%; float: left; margin-right: 75%; margin-bottom: 50px;}
#goods_photo {width: 50%;float: left;}
#goods_photo img {width: 100%;}
#goods_info {width: 45%;float: left;margin-left: 5%;}
#goods_info_01 {font-size: 30px; margin-bottom: 50px;}
#goods_info_02 {font-size: 30px; margin-bottom: 10px;}
#goods_info_03 {font-size: 20px; margin-bottom: 30px;}
#goods_info_text {font-size: 16px; margin-bottom: 25px; line-height: 200%;}
#goods_buy {width: 100%;}
			
			
#page{
	background-color: #FFF;
	width: 100%;
	font-size: 16px;
	line-height: 220%;
	letter-spacing: 0.1em;
	margin-bottom: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
}
#center {
	background-color: #FFF;
	width: 100%;
	font-size: 16px;
	line-height: 220%;
	letter-spacing: 0.1em;
	margin-top: 50px;
	margin-bottom: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

.support {
	width: 100%;
	overflow: hidden;
	margin-top: 50px;
	margin-bottom: 150px;
}

.banner, .bannerA {
	width: 33%;
	text-align: center;
	float: left;
}


.banner img {
	width: 70%;
}

.bannerA img {
	width: 80%;
}

.support2 {
	width: 100%;
	margin-top: 50px;
	margin-bottom: 150px;
	text-align: center;
}

.banner2 {
	width: 33%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 150px;
	float: left;
}

.banner2 img {
	width: 95%;
}

.artist {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: center;
}

.artistbox {
	margin-top: 50px;
}


.grid {
	width: 100%;
	overflow: hidden;
	margin-top: 50px;
}

figure {
	background: #eaeaea;
	height: auto;
	padding: 0px;
	position: relative;
	overflow: hidden;
	width: 25%;
	float: left;
	margin: 0px;
}

figure img { width: 100%;}

figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
	color: #FFF;
	padding-left: 20px;
	font-size: 16px;
}

figure:hover figcaption { opacity: 1;}

#engrish {
	width: 40px;
	position: fixed;
	right: 0px;
	top: 0px;
}
	
#japanese {
	width: 40px;
	position: fixed;
	right: 40px;
	top: 0px;
}

.motion{
	overflow: hidden;
	transition: 1.2s;
}

.motion-mv01{
	opacity: 0;

}
.mv01{
	opacity: 1.0;	
}

.motion-mv02{
	opacity: 0;
	transform: translate(0,40px); 
	-webkit-transform: translate(0,40px); 
}
.mv02{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


@supports (display: grid) {.module { margin: 0;}}

#foot {
	font-size: 46px;
	text-align: center;
	margin-bottom: 20px;
	letter-spacing: 0.1em;
}

#foot_contact {
	font-size: 16px;
	text-align: center;
	margin-bottom: 70px;
	letter-spacing: 0.1em;
}

#bottom_social {
	width: 150px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

#bottom_social_in {
	float: left;
	width: 25%;
	margin-right: 4%;
	margin-left: 4%;
}

.sp {display: none !important;}
.pc {display: block !important;}


@media screen and (max-width: 640px) {
.sp {display: block !important;}
.pc {display: none !important;}

#top_top {
	margin-left: 7%;
	font-size: 12px;
	padding-top: 10px;
	padding-bottom: 0px;
}

#top_left {
	height: calc(50% - 30%);
	width: calc(100% - 14%);
	top: 20%;
}
#top_social {
	position: absolute;
	width: 30%;
	left: auto;
	top: 42%;
	right: 7%;
}
#top_social_in {
	float: right;
	width: 30px;
	margin-right: 0%;
	margin-left: 3%;
}

#top_scroll {display: none;}

#top_right {
	width: calc(100% - 15%);
	top: 220px;
	margin-right: 7%;
}

.right_box_bootom {
	margin-top: 40px;
}

#container {
	padding-top: 0px;
	padding-bottom: 80px;
}

.title {
	width: 100%;
	margin-bottom: -15px;
	margin-top: 50px;
}

figure {
	background: #E1E8EA;
	overflow: visible;
	width: 50%;
	margin-bottom: 15px;
}

figcaption {
	position: relative;
	left: 0;
	bottom:-15;
	background: rgba(0,0,0,.0);
	opacity: 1;
	color: #000;
	padding-left: 0px;
	font-size: 12px;
	font-weight: bold;
	line-height: 12px;
	height: 20px;
}

.support {
	width: 100%;
	overflow: hidden;
	margin-top: 50px;
	margin-bottom: 50px;
}


.artist_bottom {
	width: 100%;
	font-size: 16px;
	margin-top: 30px;
	margin-bottom: 20px;
}

.support2 {
	width: 100%;
	margin-top: 50px;
	margin-bottom: 150px;
	text-align: center;
}
	
.banner img {
	width: 100%;
}	

.banner2 {
	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

.banner2 img {
	width: 80%;
}
	
#content_box {margin-top: 80px;}

#concept_title {
	width: 75%;	margin-bottom: 20px;
}
#concept_text {
	width: 100%;
	margin-left: 0%;
	font-size: 14px;
	line-height: 180%;
}

#goods_title {width: 75%; margin-right: 25%; margin-bottom: 20px;}
#goods_photo {width: 100%;margin-bottom: 20px;}
#goods_photo img {width: 100%;}
#goods_info {width: 100%;margin-left: 0%;}
#goods_info_01 {font-size: 20px; margin-bottom: 10px;}
#goods_info_02 {font-size: 20px; margin-bottom: 10px;}
#goods_info_03 {font-size: 15px; margin-bottom: 30px;}
#goods_info_text {font-size: 14px; margin-bottom: 25px; line-height: 200%;}

#page{
	font-size: 14px;
	line-height: 200%;
	padding-top: 30px;
	padding-bottom: 30px;
}
#center {
	background-color: #FFF;
	width: 100%;
	font-size: 14px;
	line-height: 220%;
	letter-spacing: 0.1em;
	margin-top: 50px;
	margin-bottom: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

#foot {
	font-size: 22px;
}

#ticket {
	width: 80%;
	position: fixed;
	right: 0px;
	bottom: 0px;
}

#engrish {
	width: 40px;
	position: fixed;
	right: 0px;
	top: 0px;
}
	
#japanese {
	width: 40px;
	position: fixed;
	right: 40px;
	top: 0px;
}
}


#dummy{clear: both;}