@charset "UTF-8";

/*==============================
		content設定
==============================*/


.hideOverlay{
    background: #eee;
    position: fixed;
    z-index: 1000000;
    width: 100%;
    height: 100vh;
}

.hideOverlay .symbolSet{
	position:absolute;
	width:100%;
	text-align:center;
	top:30%;
}

.hideOverlay .symbolSet .symbol{
	display:none;
}

.hideOverlay .symbolSet .symbol img{
    width: 200px;
}

.hideOverlay .symbolSet .catch{
	display:none;
	margin-top:70px;
}

.hideOverlay .symbolSet .catch img{
    width: 600px;
}

/*-----メイン画像設定-----*/


#mainImage{
	position: relative;
}

#mainImage h2{
	position: absolute;
	right: 50px;
	bottom: 20%;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	z-index: 1;
	font-weight: normal;
    color: #fff;
    text-shadow: 0 0 10px #000, 0 0 5px #000, 0 0 5px #000, 0 0 10px #000;
	letter-spacing: 0.1em;
	font-size: 30px;
	text-align: right;
}

.slick-next{
	display:none!important;
}

/*-----地元≠地域設定-----*/


#about h2{
	font-size:64px;
	margin-bottom:30px;
}

#about h3{
	font-weight:bold;
	margin-bottom:50px;
	
}

#about p{
	font-weight:bold;
	font-size:16px;
	line-height:2.5em;
	margin-bottom:40px;
}



/*-----事業内容-----*/
#main .main_box{
	flex:0 0 50%;
	-ms-flex:0 0 50%;
	text-align:center;
	color:#fff;
	height:400px;
    position: relative;
	overflow:hidden;
}

#main .main_box a{
	display: block;
    height: 400px;
}

#main .main_box.work a{
	background: url(/img/home/back_works.jpg) center / cover no-repeat;
}

#main .main_box.efforts a{
	background: url(/img/home/back_efforts.jpg) center / cover no-repeat;
}


#main .main_box .main_title{
	background: #2b2824;
    width: 50%;
    margin: auto;
    position: absolute;
    padding: 40px 20px;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	transition:all 0.5s;
}

#main .main_box a:hover{
	opacity:1;
}

#main .main_box a:hover .main_title{
	background:#00bfe2;
}

#main .main_box .main_title h3{
	font-size:22px;
}

#main .main_box .main_title h3:after{
	content: '';
    border-bottom: 1px solid #fff;
    display: block;
    width: 70px;
    margin: 10px auto;
}

#main .main_box .main_title p{
	font-size:16px;
	font-family: "Garamond" , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

/*-----施工事例-----*/

#case .case_list ul:after{
	content:"";
	display: block;
	width:30%;
}


#case .case_list .case_box{
	flex:0 0 30%;
	-ms-flex:0 0 30%;
	max-width: 30%;/*IE用*/
	margin-bottom:40px;
}

#case .case_list .case_box a{
	display:block;
}

#case .case_list .case_box .img_box{
	display: block;
	position: relative;
	width: 100%;
	height: 200px;
	margin-bottom:10px;
	overflow: hidden;
}

#case .case_list .case_box .img_box img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
    width: auto;
    height: 105%;
	max-width: inherit;
}

#case .case_list .case_box p .cate{
	margin-right:5px;
	border:1px solid;
	color:#4DC06F;
	padding:5px;
}

#case .case_list .case_box.still .img_box:before{
	content: '';
    position: absolute;
    right: 0;
    background: url(/img/home/still_cover_sp.png) right /contain repeat-y;
    width: 60px;
    height: 100%;
    display: block;
    z-index: 1;
}

#case .case_list .case_box.still p .cate{
	color:#F4823B;
}


/*-----ブログ-----*/

#blog {
	padding:100px 0;
}

#blog > .w980 {
    position: relative;
}

#blog > .w980 .chara{
    width: auto;
    position: absolute;
    right: -100px;
}

#blog .blog_list .blog_box{
	flex:0 0 48%;
	-ms-flex:0 0 48%;
	margin-bottom: 30px;
}

#blog .blog_list .blog_box a{
	max-width: 100%;/*IE用*/
}

#blog .blog_list .blog_box a >div{
	flex:0 0 48%;
	-ms-flex:0 0 auto;
	max-width: 48%;/*IE用*/
}

#blog .blog_list .blog_box a .txt_box .title{
	font-weight:bold;
}

#blog .blog_list .blog_box a .txt_box .cate{
	border: 1px solid;
	padding:0 5px;
	margin-bottom:10px;
	display: inline-block;
}

#blog .blog_list .blog_box a .txt_box  .txt{
	font-size:12px;
}

#blog .btn{
	margin: 50px auto 0;
}


/*-----お知らせ・キャッチコピー-----*/
#news_copy{
	background: #f2f2f2;
	padding:60px 0;
}

/*-----お知らせ-----*/

#news .title_box{
	flex:0 0 30%;
	-ms-flex:0 0 30%;
}

#news .btn.sp_only{
	display:none;
}

#news .news_list{
	flex:0 0 65%;
	-ms-flex:0 0 65%;
}

#news .news_list li a{
	display:block;
	padding:20px 10px;
	border-bottom: 1px dotted;
}

#news .news_list li a:hover{
    background: rgba(255,255,255,0.5);
}

#news .news_list li a span{
	padding-right:10px;
}

/*-----キャッチコピー-----*/

#copy{
	text-align:center;
	padding-bottom:160px;
}

#copy h2{
	margin-bottom:20px;
}

#copy p{
	font-weight:bold;
	line-height:2.5em;
	margin-bottom: 40px;
}

#copy .logo_w img{
	width:auto;
}


@media screen and (max-width:1180px){
	#blog > .w980 .chara{
		right: 0px;
	}
}

/*------------------------------
	タブレットの設定
------------------------------*/

@media screen and (max-width:960px) {
	
	/*-----ブログ-----*/
	#case .case_list .case_box .img_box{
		height: 160px;
	}
	/*-----お知らせ-----*/
	
	#news .title_box .btn{
		width:100%;
	}
	
	
}



/*------------------------------
	スマホの設定
------------------------------*/

@media screen and (max-width:600px){
	/*-----loader-----*/
	.hideOverlay .symbolSet{
		top:20%
	}

	.hideOverlay .symbolSet .symbol img{
		width: 30%;
	}
	
	.hideOverlay .symbolSet .catch{
		margin-top:50px;
	}
	
	.hideOverlay .symbolSet .catch img{
		width: 80%;
	}
	
	#mainImage h2{
		font-size: 18px;
	    letter-spacing: normal;
    	line-height: 1.5em;
		right: 10px;
		top: 20px;
		bottom: auto;
	}
	/*-----地元≠地域設定-----*/

	#about h2 {
		font-size: 40px;
		margin-bottom: 10px;
	}
	#about h3 {
		margin-bottom: 30px;
	}
	#about p{
		font-size:14px;
		line-height:2em;
	}
	/*-----事業内容-----*/
	#main .main_box{
		flex: 0 0 100%;
		height: 240px;
	}
	#main .main_box .main_title{
		padding: 20px;
	}
	#main .main_box .main_title h3 {
		font-size: 18px;
	}
	
	/*-----施工事例-----*/
	
	#case .case_list .case_box .img_box{
		height: 120px;
	}
	
	#case .case_list .case_box{
		flex: 0 0 48%;
		-ms-flex: 0 0 48%;
		max-width: 48%;/*IE用*/
		margin-bottom: 10%;
	}
	
	#case .case_list .case_box p .cate {
		margin-right: 0;
		padding: 0px;
		display: block;
		text-align: center;
	}
	
	/*-----ブログ-----*/
	#blog {
		padding: 40px 0;
	}
	
	#blog .blog_list .blog_box{
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;/*IE用*/
		margin-bottom:20px;
	}
	#blog .blog_list .blog_box .flex{
	    width: 100%;
	}
	#blog .blog_list .blog_box a .img_box{
		flex: 0 0 32%;
		-ms-flex: 0 0 32%;
		max-width: 32%;/*IE用*/
	}
	
	#blog .blog_list .blog_box a .txt_box{
		flex: 0 0 64%;
		-ms-flex: 0 0 64%;
		max-width: 64%;/*IE用*/
	}
	
	#blog > .w980 .chara{
		position: static;
	}
	
	
	/*-----お知らせ-----*/
	#news .title_box , #news .news_list{
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
	}
	
	#news .news_list{
		margin-bottom:40px;
	}
	
	/*-----キャッチコピー-----*/
	#copy p {
		line-height: 2em;
	}
	
	#copy .logo_w img{
		width:30%;
	}
}