@charset "UTF-8";
/* CSS Document */


/*TOP*/
#top{
	width:100%;
	margin:0 -200%;
    padding:180px 200% 0;
	}
	
#pori{
	width:100%;
	height:100%;
	margin:0 -160%;
    padding:0 160%;
	background:fixed;
	background-size:cover;
	}
	
#top > div{
	position:relative;
	margin:0 0 30px 0;
	height:430px;
	}
	
#t_img01,#t_img02,#t_img03,#t_img04{
	position:absolute;
	width:250px;
	height:250px;
	opacity:0;
	}
	
#t_img01{
	left:280px;
	top:0;
	}
	
#t_img02{
	left:550px;
	top:0;
	}
	
#t_img03{
	left:820px;
	top:0;
	}
	
#t_img04{
	left:1090px;
	top:0;
	}
	
#t_img05{
	position:absolute;
	left:260px;
	top:260px;
	opacity:0;
	}
	
#t_img06{
	position:absolute;
	left:520px;
	top:320px;
	opacity:0;
	}
	
hr#t_img07{
	position:absolute;
	left:200px;
	bottom:0;
	width:50px;
	border:1px #666 solid;
	opacity:0;
	}
	
#t_imgSP{
	display:none;
	}
	
	
#top > dl{
	line-height:180%;
	margin:0 auto 0;
	width:54%;
	padding:0 0 60px 0;
	box-sizing:border-box;
	color:#333;
	}
	
#top > dl dd div{
	display:inline-block;
	}
	
#top > dl dt{
	float: left;
	width: 12em;
	padding:6px 6px 12px 6px;
	font-size: 16px;
	text-align:left;
	clear:left;
	box-sizing:border-box;
	}
	
	
#top > dl dd{
	text-align:left;
	font-size: 16px;
	margin:0 0 16px 12em;
	padding:6px 6px 12px 6px;
	box-sizing:border-box;
	}
	
.top_back {
	position: relative;
	width: 100%;
	background:url(../img/back4.png) no-repeat fixed bottom;
	background-size:cover;
}


.top_back video {
	position:absolute;
	left: 0;
	top: 0;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:100%;
	z-index: -100;
}

@media screen and (max-width: 650px){
	#top{
	width:100%;
	margin:0 -200%;
    padding:0 200%;
	}
	
	#top > dl{
	margin:0 auto;
	width:90%;
	padding:0;
	box-sizing:border-box;
	}
	
		
	#top > dl dt{
		float: none;
		padding:6px;
		box-sizing:border-box;
		border-bottom:none;
		font-weight:bold;
		}
		
	#top > dl dd div{
	display:inline-block;
	}
		
		
	#top > dl dd{
		margin:0 0 16px 0;
		padding:0;
		box-sizing:border-box;
		}
		
	#top > div{
	position:static;
	margin:80px auto 0;
	padding:40px 0; 
	width:96%;
	height:auto;
	}
	
	#t_img01,#t_img02,#t_img03,#t_img04,#t_img05,#t_img06,hr#t_img07{
	display:none;
	}
	
	#t_imgSP{
	display:block;
	width:100%;
	margin:0 auto;
	}
	
	
	.top_back {
	position: relative;
	width: 100%;
	background:url(../img/back1_sp.jpg) no-repeat fixed;
	background-size:cover;
}

		
}

/*WORKS*/
#works{
	width:100%;
	margin:0 -200%;
    padding:0 200%;
	position:relative;
	}
	
#works #particles01{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	z-index:-10;
	}
		
#works article{
	width:50%;
	height:auto;
	font-size:123.1%;
	line-height:150%;
	margin:0 0 30px 0;
	padding:2%;
	float:left;
	box-sizing:border-box;
	}
	
hr.border{
	border-bottom:1px solid #666;
	border-top:none;
	margin-bottom:30px;
	z-index:9999;
	}

#works article#wb01,#works article#wb03{
	border-right:1px solid #666;
	}
	


	
#works h3{
	width:auto;
	height:78px;
	text-indent:-9999px;
	margin:0 0 20px 0;
	}
	
#works h3#w01{
	background:url(../img/w_title01.png) no-repeat top left/auto 100%;
	}
	
#works h3#w02{
	background:url(../img/w_title02.png) no-repeat top left/auto 100%;
	}
	
#works h3#w03{
	background:url(../img/w_title03.png) no-repeat top left/auto 100%;
	}
	
#works h3#w04{
	background:url(../img/w_title04.png) no-repeat top left/auto 100%;
	}
	
#works article > a{
	width:50%;
	display:block;
	margin:30px auto 0;
	padding:1em 0;
	box-sizing:border-box;
	border:2px solid #61b0e9;
	background:rgba(255,255,255,0.5);
	font-size:100%;
	letter-spacing:0.2em;
	color:#61b0e9;
	text-align:center;
	text-decoration:none;
	outline:none;
	position: relative;
  	z-index: 2;
	overflow: hidden;
	}
	
#works article > a:hover{
	color: #fff;
	}
	
#works article > a::after{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
#works article > a:hover::after {
	-webkit-transform: scale(2) rotate(180deg);
	transform: scale(2) rotate(180deg);
	background: #61b0e9;
	}
	
	
#works article > a::before,#works article > a::after{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	}
	
#works article > a,#works article > a::before,#works article > a::after
	{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	}
	
@media screen and (max-width: 650px){
	#works article{
	width:96%;
	margin:0 auto 50px;
	padding:0;
	float:none;
	}
	
	#works h3{
	width:auto;
	height:40px;
	margin:0 0 10px 0;
	}
	
	#works article#wb01,#works article#wb02,#works article#wb03,#works article#wb04{
	background:none;
	border:none; 
	}
}	
	
/*COMPANY*/
#company{
	width:100%;
	height:auto;
	margin:0 -200%;
    padding:0 200% 60px;
	/*background:url(../img/c_back02.jpg) no-repeat center center fixed;
	background-size:cover;
	-webkit-background-size:cover;
	overflow:hidden;*/
	}
	
	
	
/*タブ部分*/
article#data{
	margin:0 0 50px;
	}

article#data .tab_area ul li{
    display:block;
    float:left;
	width:33.3333%;
    box-sizing : border-box ;
    text-align:center;
    font-size:200%;
    padding:20px 0;
    color:#fff;
}

article#data .tab_area ul li.gaiyo{
	background:rgba(128,128,128,0.9);
	}
	
article#data .tab_area ul li.enkaku{
	background:rgba(77,77,77,0.9);
	}
	
article#data .tab_area ul li.rinen{
	background:rgba(102,201,114,0.9);
	}
 
@media screen and (min-width: 651px){
article#data .tab_area ul li:hover {
    opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
    cursor:pointer;
}
}
 
/*コンテンツ部分の表示領域を固定してはみ出さないようにする*/
article#data .content_area {
    max-width: 1240px;
    overflow: hidden;
    height: auto;
    position: relative;
}

article#data .content_block {
	height:auto;
    width: 100%;
}
 
 
#contents01 {
    background:rgba(128,128,128,0.9);
}
 
#contents02 {
    background:rgba(77,77,77,0.9);
}

#contents03 {
    background:rgba(102,201,114,0.9);
}




article#data dl{
	line-height:180%;
	margin:0 auto;
	width:76%;
	padding:20px 0;
	box-sizing:border-box;
	color:#fff;
	}
	
article#data dd div{
	display:inline-block;
	}
	
article#data dt{
	float: left;
	width: 10em;
	padding:6px 6px 12px 6px;
	font-size: 153.9%;
	text-align:left;
	clear:left;
	box-sizing:border-box;
	border-bottom:1px solid #fff;
	}
	
	
article#data dd{
	text-align:left;
	font-size: 138.5%;
	margin:0 0 12px 11em;
	padding:6px 6px 12px 6px;
	box-sizing:border-box;
	border-bottom:1px solid #fff;
	}
	
#company article#message{
	width:96%;
	margin:0 auto;
    padding:0 2%;
	background:#000;
	}
	

#company article#message > div{
	width:100%;
	background:url(../img/c_message_back.jpg) no-repeat top right/52% auto;
	}
	
	
#company article#message .text_message{
	width:60%;
	text-align:left;
	color:#fff;
	line-height:200%;
	font-size:16px;
	padding:30px 0;
	box-sizing:border-box;
	}
	
.rinen_box{
	line-height:180%;
	margin:0 auto;
	width:76%;
	padding:80px 0;
	box-sizing:border-box;
	color:#fff;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	}
	
 
@media screen and (max-width: 650px){	
	#company{
	background:none;
	}

	article#data .tab_area ul li{
		font-size:138.5%;
		}
		
	article#data .content_area{
		font-size:108%;
		}

	article#data dl{
	margin:0 auto;
	width:90%;
	padding:20px 0;
	box-sizing:border-box;
	color:#fff;
	}
	
	article#data dd div{
		display:inline-block;
		}
		
	article#data dt{
		float: none;
		width: 10em;
		padding:6px;
		box-sizing:border-box;
		border-bottom:none;
		font-weight:bold;
		}
		
		
	article#data dd{
		text-align:left;
		margin:0 0 30px 0;
		padding:6px;
		box-sizing:border-box;
		border-bottom:1px solid #fff;
		}
		
	#company article#message img{
		width:100%;
		height:auto;
		}
	
	#company article#message > div{
	background:none;
	}
	
	#company article#message .text_message{
	width:100%;
	text-align:left;
	color:#fff;
	line-height:150%;
	font-size:16px;
	padding:20px 2%;
	box-sizing:border-box;
	}
	
}	
	

	
	
	

/*ACCESS*/
#access{
	width:100%;
	margin:0 -200%;
    padding:0 200%;
	background:#fff;
	color:#000;
	}

#map_custmomize {
    width: 500px;
	height: 500px;
	overflow:hidden;
	border-radius: 250px;
	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
	margin:0 auto;
  }

.text_info{
	width:50%;
	padding:2em 1em;
	box-sizing:border-box;
	}
	
.text_info hr{
	width:100%;
	margin:20px 0;
	border-top:1px solid #333;
	border-bottom:none;
	}
	
.text_info dt{
	font-size:138.5%;
	margin:0 0 10px 0;
	}
	
.text_info dd{
	font-size:123.1%;
	margin:0 0 20px 0;
	}
	
.map_link{
	display:block;
	font-size:18px;
	text-align:center;
	margin:20px 0;
	}
	
@media screen and (max-width: 650px){
	
	#map_custmomize{
	 width: 100%;
     height: 250px;
	 margin:20px auto 0; 
	 float:none;
	 border-radius:0;
	}
	
	.text_info{
	width:100%;
	padding:1em;
	box-sizing:border-box;
	}
}
	

/*MEDIA*/
#media{
	background:#DBDBDB;
	margin:0 -200% -50px;
    padding:0 200%;
	}

@media screen and (max-width: 650px){
	#media{
		width:96%;
		background-size:100%;
		margin:0 auto;
		padding:0;
	}
}
	

	
@media print{
	.sp,a.sp,#works article > a.sp::after{display:none;}
}