/*メタバース*/

.metaverse #metaverseMain{ position: relative;}
.metaverse #metaverseMain h1 {position: absolute;}
.metaverse #metaverseMain h1 span {background-image: url(../img/metaverse/h1.png); background-repeat: no-repeat; background-position: 0 0; background-size: contain; display: block;}

.metaverseBlock h2 { font-weight: 700; color: #288048; font-size: 1.5em; text-align: center; line-height: 1.6em;}
.metaverseBlock .txtArea { padding-bottom: 2em;}
.outlineArea {background-color: #dff2f9;}
.eventArea {background-color: #fffade;}
.outlineArea section:not(:last-child)  { padding-bottom: 3em;}
.outlineArea h3{ text-align: center;}
.outlineArea h3 span { display: inline-block; background-color: #105995; padding: 5px 10px; font-size: 1.3em; color: #fff;}
.outlineArea.eventArea h3 span {background-color: #b83d47; margin-bottom: 1em; padding: 8px 10px; display: block;}
.outlineArea #schedule p { text-align: center; font-size: 1.5em; line-height: 1.5em; font-weight: bold; padding-top: 1em; }
.outlineArea .txt {
    line-height: 1.6em;
    padding: 0.5em 0;
}
.eventArea .txt {
    padding: 0.3em 1.5em;
}

.eventArea .eventOutline { padding: 2em 2em 0;}
.eventArea .eventOutline h4 { padding-bottom: 1em;}
.eventArea .eventOutline h4 span {font-size: 1.1em; color: #b83d47;}
.eventArea .eventOutline dl { padding-bottom: 1em; line-height: 1.6em;}
.eventArea .eventOutline dl dt { font-weight: bold;}

#howto ul, #info ul { text-align: center;}
.outlineArea .button {display: inline-block;}
.outlineArea .button a { text-align: center;
	background: -moz-linear-gradient(top, #cdb457, #b99a2f);
	background: -webkit-linear-gradient(top, #cdb457, #b99a2f);
	background: linear-gradient(to bottom, #cdb457, #b99a2f);
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	padding: 15px 0; color: #fff; font-weight: bold; display: block; font-size: 1.3em; text-shadow: 2px 2px 0px rgba(0,0,0,0.45);
}
.outlineArea .button a:hover {filter: brightness(1.1);}
#metaverseLink .button {}
#metaverseLink .button a {background-image: url(../img/metaverse/btn_metaverse.png); background-repeat: no-repeat; background-position: 0 0; background-size: contain; text-indent: -9999px; display: block; margin: 0 auto;}
#metaverseLink .button a:hover {filter: brightness(1.1);}
#metaverseLink .button .comingsoon {background-image: url(../img/metaverse/btn_metaverse.png); background-repeat: no-repeat; background-position: 0 0; background-size: contain; text-indent: -9999px; display: block; margin: 0 auto; opacity:0.3}


@media all and (min-width: 768px) {
	.metaverse .contentsBlock { padding-top: 25px!important;}
	.metaverse #metaverseMain{ width: 920px; margin: 0 auto;}
	.metaverse .ph_cut{padding: 0; margin: 0 auto;}
	.metaverse #metaverseMain .ph_cut, .metaverse #metaverseMain .ph_cut span {
    width: 920px;
    height: 608px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
	.metaverse #metaverseMain h1 { width: 700px; height: 190px; top:25px; left: 110px;}
	.metaverse #metaverseMain h1 span { width: 700px; height: 190px;}
	
	.metaverseBlock { padding: 30px 40px 40px;}
	
	.outlineArea { padding: 35px 30px; margin-bottom: 2.5em;}
	.eventArea { padding:0 0 30px; margin-bottom: 2.5em;}
	.outlineArea .button { width: 340px; margin: 10px 15px;}
	
	#metaverseLink .button a, #metaverseLink .button .comingsoon {width: 400px; height:130px; }

	.txtSm { font-size: 0.9em;}
	
	
}
@media all and (max-width: 767px) {
	.metaverse .ph_cut{padding: 0; margin: 0 auto;}
	.ph_cut span { width :100%; height: 0; padding: 66.086% 0 0;}
	.metaverse #metaverseMain h1 {top:10px; left:50%; width: 88%; margin-left: -44%;}
	.metaverse #metaverseMain h1 span { width: 100%; height: 0; padding-top: 27.142%;}
	
	.metaverseBlock { padding: 15px;}
	.metaverseBlock h2 { font-size: 1.1em;}
	
	.outlineArea { padding: 20px 15px; margin-bottom: 1.5em;}
	.eventArea { padding: 0 0 20px; margin-bottom: 1.5em;}
	.outlineArea section:not(:last-child)  { padding-bottom: 2em;}
	.outlineArea h3 span {font-size: 1.0em;}
	.outlineArea #schedule p { font-size: 1.4em; padding-top: 0.5em; }
	.eventArea .eventOutline h4 { text-align: center;}
	.eventArea .eventOutline { padding: 1.5em 1.5em 0;}
	.eventArea .eventOutline dl { font-size: 0.9em;}
	
	.outlineArea .button { width: 90%; margin: 10px auto;}
	.outlineArea .button a { font-size: 1.1em;}
	
	#metaverseLink .button a, #metaverseLink .button .comingsoon {width: 300px; height:98px; }
	
	.txtSm { font-size: 0.8em;}
	.notes { line-height: 1.5em;}

}