@charset "UTF-8";


/* ==================== STORY ==================== */
#storyBox{margin:0; position:absolute; top:0; left:0;}
#joukeiContainer{ width:800px; text-align:center; position:absolute; top:0; left:0;}
#joukeiImgList li{ position:absolute; top:0; left:0; z-index:0;}
#joukeiThuList li{ position:absolute; top:650px; left:170px; width: 365px; height: 135px; }
#joukeiBtnList{ width:312px; height:70px; position:absolute; top:1100px; left:344px;}
#joukeiBtnList ul{ float:left; display:block; position:relative; margin:1px;}
#joukeiBtnList ul li{ margin:0; padding:0; cursor:pointer; width:76px; height:76px;}
#joukeiBtnList ul li img.jBtnOn{ position:absolute; top:0; left:0;}
#joukeiBtnList ul li img.jBtnOff{ position:absolute; top:4px; left:4px; opacity:0.6; -webkit-transition:opacity 400ms ease-in-out; -moz-transition:opacity 400ms ease-in-out; transition:opacity 400ms ease-in-out;}
#joukeiBtnList ul li img.jBtnOff:hover{ opacity:1; filter:alpha(opacity=90); -ms-filter:"alpha(opacity=90)";}

.ring_link1, .ring_link2,
.ring_link3, .ring_link4 { display: block; width: 140px; height: 15px; position: absolute; left: 145px; z-index: 50; }
.ring_link1 { top: 75px; }
.ring_link2 { top: 95px; }
.ring_link3 { top: 42px; left: 265px; }
.ring_link4 { top: 108px; left: 355px; }

@media screen and (max-width: 1024px) {
	.ring_link1, .ring_link2,
	.ring_link3, .ring_link4 { width: 155px; }
	.ring_link3 { left: 275px; }
	.ring_link4 { left: 365px; }
}
/* ==================== MATERIAL ==================== */
#materialCover{ width:1000px; position:absolute; top:550px; left:0; z-index:1;}
#section07_Material div.hlBox img{ z-index:1;}

#sliderBox{ margin:auto; position:absolute; top:560px; left:0px;}

#slider{
	width:700px;
	margin:auto auto auto 150px;
	text-align:center;
	height:400px;
	visibility:hidden;
	overflow:hidden;
	position:absolute;
	top:140px;
	left:0px;
	display:block;
	z-index:0;
}

.sliderContainer { text-align:center; position:absolute; width:1760px; display:block;}
.sliderContainer ul li { float:left; width:400px; height:400px; margin:auto 20px;}


/*----------btn----------*/
#matBtnList{ position:absolute; top:520px; left:435px;}
#matBtnSet{ position:absolute; top:0px; z-index:2; width:auto;}
a.matBtn{ position:absolute; top:0;}
#currentMat{ position:absolute; top:0px; z-index:0;}


/*----------nameList----------*/
#matNameList{ width:180px; position:absolute; top:490px; left:420px; padding-bottom:5px; border-bottom:1px; border-width: 0px 0px 1px 0px; border-style:solid; border-color: #999; text-align:center;}
#matNameList p{ color:#666; font-size:12px; letter-spacing:1px;}