/*/////////////////////////////////////////////////////////

*TOP

/////////////////////////////////////////////////////////*/




/*/////////////////////////////////////////////////////////
*opening
/////////////////////////////////////////////////////////*/

html, body {height: 100%;}

#opening {
  height: 924px;
  position: relative;
  margin-bottom: 0;
}

div#opening ul {
  position: absolute;
  top: 160px;
  left: 50%;
  margin-left: -81px;
  width: 160px;
}
div#opening ul li {
  display: none;
  width: 160px;
  position: absolute;
  text-align: center;
}
div#opening dl {
  position: absolute;
  width: 344px;
  top: 560px;
  left: 50%;
  margin-left: -173px;
}
div#opening dl dt, div#opening dl dd {text-align: center;}
div#opening dl dt {margin-bottom: 12px;}
div#opening dl dd {margin-bottom: 12px;}

body.on #wrapper {height: 100%;display: none;}
body.on #opening {height: 100%;}
body.on #opening ul {display: none;}
body.on #opening dt, body.on #opening dd {display: none;}
body.on #contents, body.on #tabs, body.on header, body.on #g_nav, body.on footer {display: none;}

#wrapper {background: url(../img/top/opening/bg_01.jpg) center 0 no-repeat;}






/*/////////////////////////////////////////////////////////
*Intro
/////////////////////////////////////////////////////////*/

div.sec_intro {
	width:100%;
	height: 917px;
	position: relative;
	background: url(../img/top/topimg_bg.jpg) top center no-repeat;
	}

div.sec_intro div.logo_area{
	width:300px;
	height: 917px;
	position: absolute;
	top:0;
	left:0;
	background: #FFFFFF;
	}

div.sec_intro div.logo_area h1{
	margin:0px auto 0px;
	padding-top:320px;
	width:163px;
	height: 294px;
	}

div.sec_intro h2{
	width:175px;
	height: 410px;
	position: absolute;
	top:85px;
	right:5%;
	}

div.sec_intro p.bana{
	width:230px;
	height: 237px;
	position: absolute;
	top:90px;
	left:350px;
	}
	
div.sec_intro p.pic{
	width:600px;
	height: 480px;
	position: absolute;
	bottom:0;
	right:0;
	}
	



/*//////////////////////////////////////
Section
///////////////////////////////////////*/

div#section{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	width:100%;
	}



/*bm-------------------------------------------*/

.bmMenu{min-width:960px}
.bmMenu li{position:relative;}
.bmMenu li a{display:block;position:relative;height:300px;overflow:hidden;background:#7a8e88;}
.bmMenu li a h3{position:absolute;text-align:center;z-index:2;top:30px;left:36%; }
.bmMenu li a h3 img{display:block}
.bmMenu li a .bg{position:relative;z-index:1;display:block;height:300px;background:no-repeat center center;background-size:cover}
.bmMenu li a:hover .bg{
	-webkit-transition:opacity .3s ease-in;-moz-transition:opacity .3s ease-in;-o-transition:opacity .3s ease-in;
	transition:opacity .3s ease-in;-moz-opacity:.3;-khtml-opacity:.3;-webkit-opacity:.3;opacity:.3;-ms-filter:alpha(opacity=30);filter:alpha(opacity=30)
	}
	
/**/
.column2 li{width:50%;float:left;}
.column2 .item02{margin-right:0}
.column2 .item04{margin-right:0}
.column2 li h3{margin-left:-85px}

.column2 .item01 .bg{z-index:1;display:block;height:300px;background:url(../img/top/bm_bgimg01_202506_2.jpg) no-repeat center center;background-size:cover}
.column2 .item02 .bg{background:#256754;}
.column2 .item03 .bg{z-index:1;display:block;height:300px;background:url(../img/top/bm_bgimg02.jpg) no-repeat center center;background-size:cover}
.column2 .item04 .bg{background:#ffffff;}



/*bf-------------------------------------------*/

.bfMenu{min-width:960px}
.bfMenu li{position:relative;}
.bfMenu li a{display:block;position:relative;height:600px;overflow:hidden;background:#000000;}
.bfMenu li a h3{position:absolute;text-align:center;z-index:2}
.bfMenu li a h3 img{display:block}
.bfMenu li a .bg{position:relative;z-index:1;display:block;height:600px;background:no-repeat center center;background-size:cover}
.bfMenu li a:hover .bg{
	-webkit-transition:opacity .3s ease-in;-moz-transition:opacity .3s ease-in;-o-transition:opacity .3s ease-in;
	transition:opacity .3s ease-in;-moz-opacity:.3;-khtml-opacity:.3;-webkit-opacity:.3;opacity:.3;-ms-filter:alpha(opacity=30);filter:alpha(opacity=30)
	}
	
/**/
.column3 li{width:33.3%;float:left;}
.column3 .item03{margin-right:0}
.column3 li h3{top:130px;left:43%}

.column3 .item01 .bg{background-image:url(../img/top/bf_bgimg01.jpg)}
.column3 .item02 .bg{background-image:url(../img/top/bf_bgimg02.jpg)}
.column3 .item03 .bg{background-image:url(../img/top/bf_bgimg03.jpg)}




/*//////////////////////////////////////
News
///////////////////////////////////////*/

div#news{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	width:100%;
	height:420px;
	background: #000 url(../img/top/news_bg.jpg) no-repeat left top;
	}

div.news_wrap{
	margin:0px auto 0px auto;
	padding:0px 0px 0px 0px;
	width:640px;
	}
	
div.news_wrap h2{
	margin:0px auto 50px;
	padding:60px 0px 0px 0px;
	width:109px;
	height:97px;
}

div.news_wrap dl{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	width:640px;
	clear:both;
	overflow:hidden;
	border-bottom: 1px dotted #6a6a6a;
	}
div.news_wrap dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
div.news_wrap dt{
	margin:5px 0px 5px 0px;
	padding:5px 0px 5px 60px;
	width:80px;
	float:left;
	}
	
div.news_wrap dd{
	margin:5px 0px 5px 0px;
	padding:5px 0px 5px 0px;
	width:470px;
	float:right;
	}

div#news a:link {color: #fff;text-decoration: none;}
div#news a:visited {color: #fff;text-decoration: none;}
div#news a:hover {text-decoration: underline;}





/*
body.sp #tabs .li05 aside, #ie8 #tabs .li05 aside {
  display: none;
}
body.sp #player, #ie8 #player {
  display: none;
}
body.sp #bgmBtn, #ie8 #bgmBtn {
  display: none;
}

body.sp #playersp {
  display: block;
}

#ie8 #playerie {
  display: block;
}
*/

/*//////////////////////////////////////
LP Banner
///////////////////////////////////////*/
.topbnr {
    width: 100%;
    width: calc(100% - 300px);
    margin: 20px 0 20px 300px;

}
.topbnr > a {
    display: block;
    width: 100%;
    height: 100%;
}
.topbnr > a:hover {
	opacity: .8;
}
.topbnr > a img {
    max-width: 100%;
    filter: drop-shadow(4px 6px 2px rgba(0,0,0,.5));
}

@media screen and (min-width: 2520px) {
    .topbnr {
        width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}