@charset "utf-8";
@media screen and (min-width: 320px) and (max-width: 768px){
	.wrapper{
		position: relative;
		overflow: hidden;
	}

	/*header
	--------------------------------------------*/
	.header{
		padding: 10px 0;
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1001;
		background: #fff;
		box-shadow: 0 0 8px #ccc;
	}

	.header h1{
		position: relative;
		z-index: 1000;
	}

	/*---------main_visual------------*/
	.main_visual {
		margin-top: 75px;
		width:100%;
		height: 55vw;
		position: relative;
		overflow: hidden;
		text-align: center;
		background-size: cover;
	}

	.main_visual video{
		position: absolute;
	    top:50%;
	    min-width: 100%;
	    min-height: 100%;
	    width: 100%;
	    height: auto;
	    transform: translate(-50%,-50%);
	  	-ms-transform: translate(-50%,-50%);
	}

	/*リンク
	--------------------------------------------*/
	.pagelinks{
	}

	.pagelinks li{
		padding: 25px 0;
	}

	.pagelinks li:first-child{
		background: url(../img/bg_img01.png) center no-repeat;
	}

	.pagelinks li:last-child{
		background: url(../img/bg_img02.png) center no-repeat;
	}

	.link_btn{
		width: 75%;
		font-size: 5vw;
		font-weight: bold;
		border-radius: 6px;
		margin: 0 auto;
	}

	.link_btn a{
		padding: 15px 0;
		display: block;
		color: #fff;
		border-radius: 6px;
	}

	.pagelinks li:first-child .link_btn a{
		background: url(../img/arr01.png) no-repeat,
					#55bed1;
		background-position: 90% 50%;
		box-shadow: 0px 7px 3px -3px #359db0;
		    		-webkit-box-shadow: 0px 7px 3px -3px #359db0;
		    		-moz-box-shadow: 0px 7px 3px -3px #359db0;
	}

	.pagelinks li:last-child .link_btn a{
		background: url(../img/arr01.png) no-repeat,
					#fcc800;
		background-position: 90% 50%;
		box-shadow: 0px 7px 3px -3px #dcaf00;
		    		-webkit-box-shadow: 0px 7px 3px -3px #dcaf00;
		    		-moz-box-shadow: 0px 7px 3px -3px #dcaf00;
	}

	#about,
	#works,
	#merit,
	#flow,
	#voice,
	#recruit,
	#company,
	#news{
		padding-top: 150px;
		margin-top: -150px;
	}

	/*共通
	--------------------------------------------*/
	.sec_ttl{
		font-size: 6.5vw;
		letter-spacing: 2px;
		margin-bottom: 20px;
	}

	.sec_ttl span{
		display: block;
		font-size: 3.7vw;
		color: #fcc800;
	}

	.cmn_btn{
		width: 70%;
		margin: 0 auto;
	}

	.cmn_btn a{
		background: #fcc800;
		box-shadow: 0px 7px 3px -3px #d1a600;
		    		-webkit-box-shadow: 0px 7px 3px -3px #d1a600;
		    		-moz-box-shadow: 0px 7px 3px -3px #d1a600;
		padding: 15px 0;
		display: block;
	}

	/*sec01
	--------------------------------------------*/
	.sec01{
		background:#fef7ef;
		padding: 40px 0;
	}

	.sec01_cont{
		margin-bottom: 25px;
	}

	.sec01_cont li:first-child{
		margin-bottom: 25px;
	}

	.sec01_cont li h4{
		color: #da683c;
		padding: 10px 0;
		font-size: 6vw;
		letter-spacing: 2px;
	}

	.sec01_cont p{
		text-align: left;
		letter-spacing: 2px;
	}

	/*sec02
	--------------------------------------------*/
	.sec02{
		padding: 40px 0;
	}

    .sec02_list{
    	margin-bottom: 25px;
    	padding: 0 2%;
    }

    #loopslider li{
    	width: 48%;
    	float: left;
        margin-right:4%;
        margin-bottom: 4%;
    }

    #loopslider li:nth-child(even){
        margin-right: 0;
    }

    #loopslider li:nth-child(2n+1):nth-last-child(-n+2),
	#loopslider li:nth-child(2n+1):nth-last-child(-n+2) ~ li{
		margin-bottom: 0;
	}

	#loopslider li .thumb{
		width: 100%;
		height: 35vw;
	}

	#loopslider li .place{
		text-align: left;
	}

	/*sec03
	--------------------------------------------*/
	.sec03{
		padding: 40px 0;
		background: url(../img/bg01.png) center no-repeat;
	}

	.sec03_list li{
		text-align: left;
		font-size: 6vw;
		color: #2468a2;
		background: url(../img/check.png) no-repeat,
					#fcc800;
		background-position: 7% 50%;
		border-radius: 55px;
		padding: 3% 3% 3% 20%;
		margin-bottom: 20px;
		letter-spacing: 2px;
	}

	.sec03_list li:last-child{
		margin-bottom: 0;
	}

	/*sec04
	--------------------------------------------*/
	.sec04{
		padding: 40px 0;
	}

	.flow_cont{
		border:1px solid #dfd3c4;
		background: #fef7ef;
		padding: 15px 10px;
		margin-bottom: 25px;
	}

	.flow_cont li{
		margin-bottom: 25px;
		position: relative;
	}

	.flow_cont li:last-child{
		margin-bottom: 0;
	}

	.flow_cont li:after{
		background: url(../img/sp_flow.png) no-repeat;
		position: absolute;
		content: '';
		width: 100%;
		height: 18px;
		margin: 0 auto;
		right: 0;
		left: 0;
		bottom: -35px;
	}

	.flow_cont li:last-child:after{
		background: none;
	}

	.flow_cont li dt{
		padding: 10px 0 10px 25px;
		color: #231815;
		background: url(../img/icon01.png) left center no-repeat;
		text-align: left;
		margin-bottom: 10px;
	}

	.flow_cont li:first-child dt{
		background: none;
		padding: 0;
	}

	.flow_cont li dd{
  		font-size: 6vw;
  		text-align: left;
  		margin: 0 auto;
	}

	.flow_cont li dd br{
		display: none;
	}

	.caution_txt{
		text-align: left;
	}

	/*sec05
	--------------------------------------------*/
	.sec05{
		padding: 40px 0;
		background: #fef7ef;
	}

	.voice_list li{
		margin-bottom: 30px;
	}

	.voice_list li:last-child{
		margin-bottom: 0;
	}

	.voice_list li dt{
		padding-left: 10%;
		background:url(../img/icon02.png) left center no-repeat;
		text-align: left;
		font-size: 4.3vw;
		margin-bottom: 5px;
	}

	.voice_list li dt span{
		font-size: 3.4vw;
	}

	.voice_list li dt span:before{
		content: '|';
		padding: 0 15px;
		color: #ece8e8;
	}

	.voice_list li dd{
		background: #fff;
		padding:10px 15px;
		text-align: left;
	}

	/*sec06
	--------------------------------------------*/
	.sec06{
		padding: 40px 0;
	}

	/*sec07
	--------------------------------------------*/
	.sec07{
		padding: 40px 0;
	}

	.company_tbl{
		margin-bottom: 25px;
	}

	.company_tbl dd a{
		color: #603626;
	}

	.bnr{
		background: url(../img/block.png);
		padding: 15px 10px;
	}

	.bnr_ttl{
		font-size: 6vw;
		color: #eac228;
		letter-spacing: 2px;
		margin-bottom: 15px;
	}

	.bnr_tel{
		margin-bottom:5px;
	}

	.bnr_tel>dl>dt{
		color: #fff;
		background: #7d7a7a;
		border-radius: 11.5px;
		padding: 3px 0;
	}

	.bnr_tel>dl>dd>dl>dt,
	.bnr_tel>dl>dd>dl>dd{
		display: inline-block;
		vertical-align: middle;
		box-sizing: border-box;
	}

	.bnr_tel>dl>dd>dl>dt{
		color: #464541;
	}

	.bnr_tel>dl>dd>dl>dt:after{
		content: ':';
		padding:0 3px;
	}

	.bnr_tel>dl>dd>dl>dd{
		font-size: 7vw;
	}

	.bnr_tel>dl>dd>dl>dd a{
		color: #464541;
	}

	.bnr_mail{
		font-size: 5vw;
	}

	.bnr_mail a{
		color: #fff;
		background: url(../img/mail01.png) no-repeat,
					#43b8ef;
		background-position: 10% 50%;
		border-radius: 6px;
		box-shadow: 0px 7px 3px -3px #2ca2d9;
		    		-webkit-box-shadow: 0px 7px 3px -3px #2ca2d9;
		    		-moz-box-shadow: 0px 7px 3px -3px #2ca2d9;
		padding: 10px 10px 10px 25px;
		display: block;
	}

	/*sec08
	--------------------------------------------*/
	.sec08{
		padding: 40px 0;
		background: #fef7ef;
	}

	.sec08_cont .sec08_block:first-child{
		margin-bottom: 25px;
	}

	.sec08_ttl h3{
		font-size: 6.5vw;
		float: left;
	}

	.sec08_ttl h3 span{
		font-size: 3.7vw;
		color: #fcc800;
		margin-left: 5px;
	}

	.more_btn{
		width: 35%;
		padding-top: 10px;
	}

	.sec08_ttl .more_btn{
		float: right;
	}

	.more_btn a{
		color: #fff;
		background: #7abd69;
		padding: 5px 0;
		display: block;
		border-radius: 4px;
	}

	.more_btn a span:after{
		content: '\02192';
		padding-left: 5px;
	}

	.post_list{
		background: #fff;
		padding: 15px 10px;
	}

	.post_list li{
		text-align: left;
		border-bottom: 1px solid #e3e3e3;
	}

	.post_list li a{
		padding: 20px 0 10px 0;
		display: block;
		color: #603626;
	}

	.post_list li a time{
		display: block;
		font-size: 3.4vw;
		letter-spacing: 2px;
	}

	/*下層共通
	--------------------------------------------*/
	.bt_main{
		background: url(../img/mv.png) center no-repeat;
		position: relative;
		height: 70vw;
	}

	.bt_ttl{
		color: #fff;
		font-size: 8vw;
		position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        text-shadow: 0 0 8px #584a39;
        letter-spacing: 2px;
	}

	.cmn_cont{
		padding: 40px 0;
	}

	.sub_ttl{
		font-size: 6vw;
		text-align: center;
		margin-bottom: 25px;
		padding-bottom: 5px;
		letter-spacing: 2px;
		background: url(../img/sub_border.png) bottom center no-repeat;
	}

	/*施工事例
	--------------------------------------------*/
	.works_list{
		margin-bottom: 10px;
	}

	.works_list li{
		width: 48%;
		margin-right: 4%;
		float: left;
		margin-bottom: 30px;
	}

	.works_list li:nth-child(even){
		margin-right: 0;
	}

	.works_list li:nth-child(2n+1):nth-last-child(-n+2),
	.works_list li:nth-child(2n+1):nth-last-child(-n+2) ~ li{
	    margin-bottom:0;
	}

	.works_list li a{
		display: block;
	}

	.works_list li .thumb{
		width: 100%;
		height: 35vw;
		margin-bottom: 10px;
	}

	.works_list li .place{
		text-align: left;
	}

	/*----------詳細---------*/
	.img_area{
		margin-bottom: 25px;
	}

	.main_img{
		margin-bottom: 25px;
	}

	.img_list li{
		width: 48%;
		height: 35vw;
		float: left;
		margin-right: 4%;
		margin-bottom: 4%;
	}

	.img_list li:nth-child(even){
		margin-right: 0;
	}

	.img_list li:nth-child(2n+1):nth-last-child(-n+2),
	.img_list li:nth-child(2n+1):nth-last-child(-n+2) ~ li{
		margin-bottom: 0;
	}

	.works .post_body{
		text-align: left;
		margin-bottom: 15px;
	}

	/*新着情報・コラム
	--------------------------------------------*/
	.news_list{
		margin-bottom: 10px;
	}

	.news_list li{
		padding: 15px;
		margin-bottom: 20px;
		text-align: left;
		border:1px solid #ccc;
	}

	.news_list li:last-child{
		margin-bottom: 0;
	}

	.news_list li time{
		color: #7abd69;
		text-align: left;
		font-size: 3.4vw;
		display: block;
	}

	.post-head{
		border-bottom: 1px solid #7abd69;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	.news .news_list li .post-ttl{
		font-size: 5vw;
	}

	.news .news_list li .post-body{
		display: block;
	}

	.news .more_btn{
		width: 45%;
		margin-left:auto;
		text-align: center;
	}

	/*------------詳細------------*/
	.news_body{
		border:1px solid #ccc;
		padding:15px;
		text-align: left;
		margin-bottom: 10px;
	}

	.news_body time{
		text-align: right;
		margin-top: 20px;
		color: #7abd69;
		font-size: 3.4vw;
		display: block;
	}

	/*foooter
	--------------------------------------------*/
	.footer{
		font-size: 12px;
		background: #fcc800;
		padding: 5px 0;
	}

	.copyright a{
		color: #603626;
	}
}