@charset "utf-8";

#body,
#main{
	width: 100% ;
	margin: 0px auto ;
	padding: 0px ;
}

#slide-show-mainpic{
	margin: 0px auto 0px auto ;
	padding: 0px 0px 0px 0px 
	position: relative ;
	z-index: 1 ;
	background-attachment: fixed;
}

#main-pic-box{
	margin: 0px auto ;
	padding:0;
	position: absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*WebKitブラウザのレンダリングぼやけ対策*/
	backface-visibility: hidden;
	transform-style: preserve-3d;
}



#test-text002{
	width: 100% ;
	min-height: 497px ;
	background: url(../images/l-marl_main-img01.jpg) right bottom no-repeat ;
	margin: 50px auto 50px auto ;
}
#test-text002 .test-text002-inner{
	width: 90vw ;
	max-width: 1150px ;
	margin: 0px auto 0px auto ;
	padding: 120px 0px 0px 50px ;
	color: #232323 ;
	text-align: left ;
	line-height: 200% ;
	font-size: 15px ;
	position: relative ;
}
#test-text002 .test-text002-inner h3{
	margin: 0px 0px 20px 0px ;
	padding: 0px 0px 15px 10px ;
	color: #232323 ;
	font-size: 25px ;
	text-align: left ;
	/*font-weight: 700 ;*/
}
#test-text002 .test-text002-inner div{
	margin: 0px 0px 0px 10px ;
	text-align: left ;
	line-height: 200% ;
	font-size: 15px ;
}

#test-text002 .test-text002-inner img{
	position: absolute ;
	right: 60px ;
	top: 200px ;
	width: 400px ;
}







#slick-box{
	margin: 0px auto 0px auto ;
	padding: 0px 0px 0px 0px ;
	text-align: center ;
}
#slick-box .slick-box-text{
	
}
#slick-box .slick-box-text h2{
	width: 90% ;
}

#slick-box section{
	padding: 20px 0px 30px 0px ;
}

#slick-box a.slick-box-link{
	display: block ;
	margin: 10px 0px 0px auto ;
	padding: 0px 0px 0px 10px ;
}
#slick-box  a.slick-box-link:hover{
	opacity: .50; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=50); /* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	-khtml-opacity: .50; /* Safari 1.x */
	-moz-opacity: .50; /* FF lt 1.5, Netscape */
}



.bnr-box01 img{
	width: 90% ;
}






#event-news{
	width: 1100px ;
	margin: 40px auto 120px auto ;
	padding: 30px 0px 0px 0px ;
}

#event-news .event-box{
	width: 500px ;
	height: 400px ;
	float: left ;
	position: relative ;
	padding: 0px 0px 28px 0px ;
}
#event-news h3{
	width: 500px ;
	margin: 0px 0px 0px 0px ;
	padding: 0px 0px 20px 0px ;
	border-bottom: 2px solid #929292 ;
	text-align: center ;
}
.ichiran{
	display: block ;
	padding: 5px 15px ;
	background: #000000 ;
	color: #FFF ;
	position: absolute ;
	right: 20px ;
	top: 10px ;
	text-decoration: none ;
}
a.ichiran:visited{
	color: #FFF ;
}
a.ichiran:hover{
	color: #CCCCCC ;
	text-decoration: underline ;
	background: #232323 ;

}
#event-news .event-box dl{
	display: block ;
	min-height: 130px ;
	margin: 0px 0px 0px 0px ;
	padding: 10px ;
	border-bottom: 1px solid #929292 ;
}
#event-news .event-box dt{
	width: 80px ;
	text-align: center ;
	float: left ;
}
#event-news .event-box dt img{
	width: 90% ;
	padding: 10px 0px 0px 0px ;
}
#event-news .event-box dd{
	width: 350px ;
	float: left ;
	text-align: left ;
	margin: 0px 0px 0px 0px ;
	padding: 0px 0px 10px 20px ;
}
#event-news .event-box dd span{
	display: block ;
	font-weight: 700 ;
	font-size: 130% ;
}
#event-news .event-box dd table{
	width: 350px ;
	border-top: 1px dotted #CCCCCC ;
	border-bottom: 1px dotted #CCCCCC ;
	margin: 10px auto 0px auto ;
}
#event-news .event-box dd table th,
#event-news .event-box dd table td{
	padding: 5px  ;
	border-top: 1px dotted #CCCCCC ;
	border-bottom: 1px dotted #CCCCCC ;
	vertical-align: middle ;
	white-space: nowrap ;
}
#event-news .event-box dd table td{
	text-align: right ;
}

#event-news .event-scroll{
	height: 360px ;
	overflow: auto ;
	border-bottom: 2px solid #929292 ;
}
#event-news .event-scroll a img:hover{
	opacity: .50; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=50); /* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	-khtml-opacity: .50; /* Safari 1.x */
	-moz-opacity: .50; /* FF lt 1.5, Netscape */
}





#event-news .news-box{
	width: 500px ;
	height: 400px ;
	float: right ;
	position: relative ;
	padding: 0px 0px 28px 0px ;
}

#event-news .news-box table{
	width: 98% ;
	margin: 0px auto 0px 0px ;
}
#event-news .news-box table th,
#event-news .news-box table td{
	padding: 20px 5px 15px 5px ;
	border-top: 1px dotted #CCCCCC ;
	border-bottom: 1px dotted #CCCCCC ;
	vertical-align: middle ;

}
#event-news .news-box table th{
width: 85px ;
	text-align: center ;
}
#event-news .news-box table td{
	text-align: left ;

}


#event-news .news-scroll{
	height: 360px ;
	overflow: auto ;
	border-bottom: 2px solid #929292 ;
}
#event-news .news-scroll a img:hover{
	opacity: .50; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=50); /* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	-khtml-opacity: .50; /* Safari 1.x */
	-moz-opacity: .50; /* FF lt 1.5, Netscape */
}












#optimal{
	margin: 0px auto ;
	min-height: 1200px ;
	background: url(../images/back-test0001.jpg) center top no-repeat ;
}
#optimal .optimal-inner{
	width: 95% ;
	max-width: 1100px ;
	margin: 0px auto ;
	text-align: center ;
	position: relative ;
}

#optimal .optimal-inner .optimal-text{
	width: 400px ;
	height: 530px ;
	margin: 150px auto 0px auto ;
	padding: 0px 0px 0px 200px ;
	text-align: left ;
	font-size: 15px ;
	line-height: 250% ;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

#optimal .optimal-inner .optimal-text2{
	width: 400px ;
	margin: 0px 0px 0px -500px ;
}
#optimal .optimal-inner .optimal-text2 img{
	width: 100% ;
}



#link-box-grandmenu{
    width: 90%;
    max-width: 900px;
	text-align: center ;
    margin: 60px auto 120px auto;
}
#link-box-grandmenu .page-title {
    width: 100%;
    margin: 60px auto 60px auto;
}
#link-box-grandmenu img{
	width: 100% ;
}

#link-box-grandmenu h1 img{
	width: 199px ;
	text-align: center ;
}
#link-box-grandmenu .kochira{
	width: 205px ;
	margin: 30px auto 0px auto ;
}





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

	#main{
		padding-bottom: 100px ;
	}
	.test01_2{
		display: none ;
	}
	#main-pic-box .test02 img{
		width: 60vw;
		margin-top: -160px ;
	}




	#test-text002{
		width: 100% ;
		margin: 0px ;
	}
	#test-text002 .test-text002-inner{
		width: 90vw ;
		padding: 0px 0px 0px 0px ;
		line-height: 180% ;
	}
	#test-text002 .test-text002-inner h3{
		width: 90vw ;
		margin: 30px 0px 20px 0px ;
		padding: 20px 0px 15px 10px ;
		font-size:5vw ;
	}
	#test-text002 .test-text002-inner div{
		margin: 0px 0px 0px 10px ;
		text-align: left ;
		line-height: 180% ;
		font-size: 15px ;
		color: #000 ;
	}

	#test-text002 .test-text002-inner img{
		position: absolute ;
		right: 60px ;
		top: 200px ;
		width: 400px ;
	}



	#slick-box{
		width: 100% ;
		margin: 10px auto 10px auto ;
		padding: 0px ;
	}
	#slick-box .slick-box-text{
		width: 95% ;
		padding: 0px 5px ;
		margin: 0px auto ;
		font-size: 2vw ;
	}
	#slick-box a{
		width: 90% ;
	}
	#slick-box a img{
		width: 100% ;
	}




	#event-news{
		width: 100% ;
		margin: 20px auto 60px auto ;
		padding: 30px 0px 0px 0px ;
	}
	#event-news h3{
		margin: 0px 0px 0px 0px ;
		padding: 0px 0px 20px 30px ;
		border-bottom: 1px solid #929292 ;
		text-align: left ;
	}

	#event-news .event-box{
		width: 95% ;
		margin: 0px auto 50px auto ;
		float: none ;
		position: relative ;
	}

	#event-news .event-box dl{
		width: 95% ;
		display: block ;
		min-height: 130px ;
		margin: 0px 0px 0px 0px ;
		padding: 10px ;
		border-bottom: 1px solid #929292 ;
	}
	#event-news .event-box dt{
		width: 28% ;
		text-align: center ;
		float: left ;
	}
	#event-news .event-box dt img{
		width: 90% ;
		padding: 10px 0px 0px 0px ;
	}
	#event-news .event-box dd{
		width: 70% ;
		float: right ;
		text-align: left ;
		margin: 0px 0px 0px 0px ;
		padding: 0px 0px 10px 0px ;
	}
	#event-news .event-box dd span{
		display: block ;
		font-weight: 700 ;
		font-size: 130% ;
	}
	#event-news .event-box dd table{
		width: auto ;
		margin: 10px auto 0px auto ;
	}
	#event-news .event-box dd table th,
	#event-news .event-box dd table td{
		padding: 5px  ;
		border-top: 1px dotted #CCCCCC ;
		border-bottom: 1px dotted #CCCCCC ;
		vertical-align: middle ;
	}
	#event-news .event-box dd table td{
		text-align: left ;
		white-space: normal ;
	}

	#event-news .news-box{
		width: 95% ;
		margin: 0px auto 0px auto ;
		float: none ;
		position: relative ;
		padding: 0px 0px 28px 0px ;
		border-bottom: 1px solid #929292 ;
	}

	#event-news .news-box table{
		width: 100% ;
		margin: 20px auto 0px auto ;
	}
	#event-news .news-box table th,
	#event-news .news-box table td{
		padding: 20px 5px 15px 5px ;
		border-top: 1px dotted #CCCCCC ;
		border-bottom: 1px dotted #CCCCCC ;
		vertical-align: middle ;

	}
	#event-news .news-box table th{
	width: 100px ;
		text-align: center ;
	}
	#event-news .news-box table td{
		text-align: left ;

	}



	#optimal{
		margin: 0px auto 100px auto ;
		padding: 0px 0px 60px 0px ;
		min-height: 100px ;
		background: url(../images/back-test0001.jpg) center top no-repeat ;
		background-size: cover ;/*この場合は幅が自動設定*/
		border-bottom: 2px dotted #232323 ;
	}
	#optimal .optimal-inner{
		width: 100% ;
		margin: 0px auto ;
		text-align: center ;
		position: relative ;
	}

	#optimal .optimal-inner .optimal-text{
		width: 90% ;
		height: auto ;
		margin: 0px auto 0px auto ;
		padding: 0px 0px 0px 0px ;
		text-align: left ;
		font-size: 15px ;
		line-height: 180% ;
	  -ms-writing-mode: lr-tb;
	  writing-mode: horizontal-tb;
	}
	#optimal .optimal-inner .optimal-text2{
		display: none ;
		width: 90% ;
		margin: 0px 0px 0px 0px ;
	}
	#optimal .optimal-inner .optimal-text2 img{
		width: 100% ;
	}


	.title-test01 img{
		width: 90% ;
	}


	.test-bnr00{
		width: 100% ;
		text-align: center ;
		margin: 0px auto ;
	}
	.test-bnr00 img{
		width: 90% ;
	}


	#sp-buttom{
		display: block ;
		width: 100vw ;
		z-index: 1 ;
		position: fixed ;
		bottom: 0 ;
	}
	#sp-buttom img{
		width: 100% ;
	}


	#foot-box01{
		background: #383838 ;color: #FFF ;padding: 10px ;
	}
	#foot-box01 .foot-box01-1{width: 100% ;float: none ;text-align: center ;}
	#foot-box01 .foot-box01-1 img{width: 45vw ;height: auto ;margin: 5px auto 0px auto ;text-align: center ;}
	#foot-box01 .foot-box01-2{width: 90% ;margin: 0px auto ;text-align: center ;float: none ;padding: 25px 10px 100px 0px ;}
	#foot-box01 .foot-box01-3{display: none ;}

	#sns-mark01{
		width: 100px ;
		position: static ;
	}

}



/*　for PC　画面サイズが768pxからはここを読み込む */
@media screen and (min-width:768px) {
	#sp-buttom{
		display: none ;
	}


	.test01_2{
		display: block ;
	}
	#main-pic-box .test02 img{
		margin-top: 30px ;
	}



	#slick-box{
		width: 100% ;
		margin: 10px auto 10px auto ;
		padding: 0px ;
	}

	#slick-box div{
		width: 95% ;
		padding: 0px 5px ;
		margin: 0px ;
	}
	#slick-box a{
		width: 90% ;
	}
	#slick-box a img{
		width: 100% ;
}

	#sp-buttom{
		display: none ;
	}

}