/* CSS Document */

/* ALL_setting
================================================== */
*{
	margin:0;
	padding:0;
	font-family: Meiryo, sans-serif, monospace;
	font-size: 12px;
}

.clear{clear:both;}

a {outline:none;}
a img {outline:none;}



body{
	height: 100%;
	width: 100%;
	background-color: #570004;
	-webkit-animation: fadein 2s linear 0s forwards;
	animation: fadein 2s linear 0s forwards;
}

.pc{ display: inherit; }
.sp{ display: none; }

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

@-webkit-keyframes fadein{
    0% {opacity:0;}
	50%{opacity: 0;}
    100% {opacity:1;}
}
@-moz-keyframes fadein{
    0% {opacity:0;}
	50%{opacity: 0;}
    100% {opacity:1;}
}
@keyframes fadein{
    0% {opacity:0;}
	50%{opacity: 0;}
    100% {opacity:1;}
}

/* footer_menu_setting
================================================== */
.footer_menu_wrapper{
	width: 100%;
	background-image: url(../image/fmp_menu_bg.jpg);
	background-repeat: repeat;
	background-position: center center;
	position: fixed;
	bottom: 0;
	z-index: 99;
}

.menu_box{
	width: 70%;
	margin: auto;
	display: table;
}

.menu_box_left_icon{
	width: 12%;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	display: table-cell;
	vertical-align: middle;
}

.menu_box_menu_icon{
	width: 9%;
	padding-left: 2%;
	padding-top: 1%;
	padding-bottom: 0.5%;
	display: table-cell;
	vertical-align: middle;
}

.menu_box_menu2_icon{
	width: 8%;
	padding-left: 2%;
	padding-top: 1%;
	padding-bottom: 0.5%;
	display: table-cell;
	vertical-align: middle;
}

.menu_box_menu3_icon{
	width: 8%;
	padding-left: 2%;
	padding-top: 1%;
	padding-bottom: 0.5%;
	display: table-cell;
	vertical-align: middle;
}
.menu_box_menu4_icon{
	width: 15%;
	padding-left: 2%;
	padding-top: 1%;
	padding-bottom: 0.5%;
	display: table-cell;
	vertical-align: middle;
}

.menu_box_star_icon{
	width: 5%;
	padding-left: 2%;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	display: table-cell;
	vertical-align: middle;
}

.menu_box_right_icon{
	width: 12%;
	padding-left: 2%;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	display: table-cell;
	vertical-align: middle;
}

/* drawer_setting
================================================== */
.tablet_menu{
	display: none;
}

@media screen and (max-width: 699px) {
.tablet_menu{
	display: inherit;
}
}
/* top_setting
================================================== */

.top_wrapper{
	width: 100%;
	height: 100%;
	background: url(../image/fmp_bg5.jpg) top center / cover no-repeat;
	min-height: 100vh;
}

.top_catch_copy{
	width: 36%;
	margin: auto;
	padding-top: 6%;
}

.top_logo{
	width: 40%;
	margin: auto;
	padding-top: 0%;
}

.top_text1{
	width: 30%;
	margin: auto;
	padding-top: 1%;
}

.top_text2{
	width: 26%;
	margin: auto;
	padding-top: 1%;
}

#Main{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	position: absolute;
}

#myCanvas{
	width:100%;
	height:100%;
}

.top_icon_box{
	width: 8%;
	display: table;
	position: absolute;
	top: 10px;
	right: 10px;
}

.top_icon{
	width: 23%;
	padding-right: 6%;
	display: table-cell;
}

/* about_setting
================================================== */

.about_wrapper{
	width: 100%;
	height: 100%;
	background: url(../image/fmp_about_bg.jpg) top center / cover repeat;
}

.about_text_box{
	width: 70%;
	margin: auto;
	padding-top: 3%;
	padding-bottom: 5%;
}

.about_title{
	width: 12%;
	text-align: center;
	margin: auto;
	padding-top: 5%;
}




/* artist_setting
================================================== */

.artist_wrapper{
	width: 100%;
	height: 100%;
	background: url(../image/fmp_artists_bg.jpg) top center;
	background-repeat: repeat;
}

.goods_wrapper{
	width: 100%;
	height: 100%;
	background: url(../image/fmp_goods_bg.jpg) top center;
	background-repeat: repeat;
}


.artist_title{
	width: 14%;
	margin: auto;
	padding-top: 3%;
}

.artist_text1{
	width: 16%;
	margin: auto;
	padding-top: 4%;
}

.artist_box_2{
	width: 40%;
	margin: auto;
	display: table;
	padding-top: 2%;
}

.artist_box_3{
	width: 64%;
	margin: auto;
	display: table;
	padding-top: 2%;
}

.artist_image_box{
	display: table-cell;
	padding-left: 4%;
	padding-right: 4%;
}

.artist_image_box:hover{
	opacity: 0.8;
}


/* tickets_setting
================================================== */

.tickets_wrapper{
	width: 100%;
	height: 100%;
	background: url(../image/fmp_tickets_bg.jpg) top center;
	background-repeat: repeat;
}

.tickets_title{
	width: 11%;
	margin: auto;
	padding-top: 3%;
}

.tickets_image{
	width: 70%;
	margin: auto;
	padding-top: 3%;
	padding-bottom: 2%;
	
}

.tickets_bt{
	width: 40%;
	margin: auto;
	padding-top: 1%;
	padding-bottom: 6%;
	
}

.tickets_bt:hover{
	opacity: 0.6;
}

.tickets_image_3{
	width: 30%;
	margin: auto;
}

.tickets_image_4{
	width: 24%;
	margin: auto;
	padding-top: 1%;
	padding-bottom: 1%;
}

.tickets_image_5{
	width: 70%;
	margin: auto;
	padding-bottom: 8%;
}

.tickets_image_6{
	width: 70%;
	margin: auto;
	padding-bottom: 2%;
}

.tickets_image_7{
	width: 70%;
	margin: auto;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #ffffff;
	padding-bottom: 2%;
	padding-top: 2%;
}


@media screen and (max-width: 699px){

.tickets_image_3{
	width: 80%;
	margin: auto;
}

.tickets_image_4{
	width: 80%;
	margin: auto;
	padding-top: 1%;
	padding-bottom: 1%;
}

.tickets_image_5{
	width: 80%;
	margin: auto;
	padding-bottom: 8%;
}

.tickets_image_6{
	width: 80%;
	margin: auto;
	padding-bottom: 6%;
}

}


/* goods_setting
================================================== */

.goods_title{
	width: 8%;
	margin: auto;
	padding-top: 4%;
}

.goods_text{
	width: 70%;
	margin: auto;
	padding-top: 3%;
	padding-bottom: 12%;
}

.goods_text2{
	font-size: 20px;
	color: white;
	text-align: center;
	padding-bottom: 6%;
}

.goods_image_box{
	width: 70%;
	margin: auto;
	padding-top: 2%;
	padding-bottom: 4%;
	display: block;
}

.goods_image_box1{
	width: 32%;
	padding-right: 1%;
	padding-bottom: 4%;
	padding-top: 1%;
	display: inline-block;
}

.goods_image_box1:hover{
	opacity: 0.8;
}

.goods_image_box2{
	width: 64%;
	padding-left: 2%;
	padding-bottom: 4%;
	display: inline-block;
}

.goods_image_box2:hover{
	opacity: 0.8;
}

.goods_title_text{
	width: 40%;
	margin: auto;
	padding-top: 2%;
}


.goods2_wrapper{
	width: 100%;
	height: 100%;
	background-color: #0f213b;
	background-repeat: repeat;
}

.goods_image{
	width: 80%;
	margin: auto;
	padding-top: 5%;
	padding-bottom: 2%;
	
}

/* notice_setting
================================================== */

.notice_text{
	padding-top: 4%;
	padding-bottom: 10%;
	color: white;
	font-size: 16px;
	line-height: 32px;
	width: 80%;
	margin: auto;
}

.copyright{
	font-size: 18px;
	text-align: center;
	padding-bottom: 8%;
	color: white;
}

.notice_wrapper{
	width: 100%;
	height: 100%;
	background-color: black;
}

/* sp_setting
================================================== */
@media screen and (max-width: 699px){

.top_icon_box{
	width: 36%;
	display: table;
	position: absolute;
	top: 10px;
	right: 10px;
}

.top_icon{
	width: 23%;
	padding-right: 6%;
	display: table-cell;
}

.top_wrapper{
	width: 100%;
	height: 50%;
	background: url(../image/fmp_bg4.jpg) top center / cover no-repeat;
	min-height: auto;
	padding-top: 80%
}

.top_catch_copy{
	width: 70%;
	margin: auto;
	padding-top: 6%;
}

.top_logo{
	width: 90%;
	margin: auto;
	padding-top: 5%;
}

.top_text1{
	width: 60%;
	margin: auto;
	padding-top: 5%;
}

.top_text2{
	width: 40%;
	margin: auto;
	padding-top: 3%;
	padding-bottom: 10%;
}

.about_text_box{
	width: 90%;
	margin: auto;
	padding-top: 3%;
	padding-bottom: 10%;
}

.about_title{
	width: 30%;
	text-align: center;
	margin: auto;
	padding-top: 10%;
}

.artist_title{
	width: 50%;
	margin: auto;
	padding-top: 10%;
}

.artist_text1{
	width: 50%;
	margin: auto;
	padding-top: 10%;
}

.artist_box_2{
	width: 100%;
	margin: auto;
	display: block;
	padding-top: 6%;
}

.artist_box_3{
	width: 100%;
	margin: auto;
	display: block;
	padding-top: 6%;
}

.artist_image_box{
	width: 80%;
	margin: auto;
	display: block;
	padding-left: 0%;
	padding-right: 0%;
	padding-top: 10%;
}

.goods_title{
	width: 28%;
	margin: auto;
	padding-top: 8%;
}

.goods_text{
	width: 90%;
	margin: auto;
	padding-top: 10%;
	padding-bottom: 16%;
}

.tickets_title{
	width: 34%;
	margin: auto;
	padding-top: 8%;
}

.tickets_image{
	width: 80%;
	margin: auto;
	padding-top: 8%;
	padding-bottom: 8%;
	
}

.tickets_bt{
	width: 80%;
	margin: auto;

	padding-bottom: 10%;
	
}

.goods_image_box{
	width: 90%;
	margin: auto;
	padding-top: 4%;
	padding-bottom: 4%;
	display: block;
}

.goods_image_box1{
	width: 100%;
	padding-right: 1%;
	padding-bottom: 4%;
	padding-top: 1%;
	display: block;
}

.goods_image_box2{
	width: 100%;
	padding-left: 2%;
	padding-bottom: 4%;
	display: block;
}

.goods_title_text{
	width: 90%;
	margin: auto;
	padding-top: 2%;
}

}