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

/* Tablet */
@media (max-width: 959px){
	.pc{
		display: none !important;}
	.greeting{
		background-position: left 20px top 30px,right bottom;
		background-size: 300px ,100% ;
		padding: 10px;
	}
	.greeting_in{
		width: 65%;
	}
	.greeting h2{
		font-size: 1.2em;
	}
	.subtitle{
		height: 280px;
	}
	.subtitle h2{
		display: block;
		font-size: 2em;
		bottom: 50px;
		left: 50px;
		white-space: nowrap;
	}
	
	.bg_img01{
		background-size: 70%;
	}
	.breadcrumb-box{
		font-size: 80%;
		left: 70px;
		bottom: 10px
	}
	.contents_mail{
		padding: 10px;
	}
	.mailform{
		padding: 10px;
		margin: auto;
	}

	input[type='text'] ,input[type='date'] , textarea{
		width: 100% !important;
	}
	.tel_button{
		width: 100%;
		max-width: 700px;
		margin: auto;
		flex-direction: column;
	}
	.tel_button a{
		width: 100%;
		margin: 10px 0;
	}


}


/* sp */
@media (max-width: 768px){
	.pctb{
		display: none !important;
	}
	.slide_txt{
		width: 100%;
	}
	
	.slide_txt h2{
		color: #000;
		font-size: 1.1rem !important;
		line-height: 180% !important;
		padding: 0 10px;
		border-left: solid 5px #e70015;
	}
	.top_link{
		position: absolute;
		bottom:0px;
		top: auto;
		right: 7px;
		z-index: 10;
		width: 150px;
		text-align: center;
		padding: 0 10px;
	}
	
	.greeting{
		background-image:url("../img/bg_img03.jpg") ;
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: 100% ;
	}
	.greeting_in{
		width: 100%;
		height: inherit;
		padding-bottom: 200px;
	}
	.greeting_in img{
		display: block;
		margin: auto;
	}
	figure.effect-honey{
		margin-bottom: 30px;
	}
	.area{
		background-size: 100%;
	}
	.area_in{
		width: 100%;
		background-color: rgba(255,255,255,0.49);
		padding: 10px;
	}
	
	/* カルーセルスライダー ======================================== */
	.carousel div {
		margin: 0 5px;
		height: 180px;
		overflow: hidden;
	}
	
	.top_rec_flex{
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
	}
	
	.footer_in{
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
	}
	.footer_in div{
		padding: 10px;
	}
	.footer_in ul{
		margin: auto;
		max-width: 300px;
	}
	.bg_img01{
		background-size: 90%;
	}
	.flex_contents{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	/* 事業内容======================================== */
	.photo_flex{
		display: flex;
		align-items: center;
		flex-wrap: wrap
	}
	.photo_flex div{
		width: calc(100% / 2);
		padding: 5px;
	}
	.flex_services{
		flex-direction: column;
		max-width: 600px;
		margin: 30px auto;
	}
	.flex_services_type{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.flex_services_type dl{
		width: 100%;
		max-width: 500px;
		padding: 5px;
		margin-bottom: 30px;
	}
	/* ご依頼までの流れ======================================== */
	.flow_wrap02,.flow_wrap03{
		width: 100%;
		padding: 0.5em;
	}
	.flow_wrap02 dl,.flow_wrap03 dl{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flow_wrap02 dd,.flow_wrap03 dd{
		padding: 0.5em;
	}
	.flow_wrap02 dt,.flow_wrap03 dt{
		width: 100%;
	}
	/* 施工実績======================================== */
	.works_flex figure{
		width: calc(100% / 2 - 10px);
	}
	/* 採用情報======================================== */
	.recruit table{
		width: 100%;
	}
	.recruit table tr,.recruit table td{
		display: block;
		width: 100%;
	}
	.recruit table td{
		padding-top: 0;
	}
	.timeline dl{
		flex-direction: column;
	}
	.timeline dl dt{
		width: 100%;
	}
	.timeline dl dd{
		width: 100%;
	}
	.flex_contents .txt{
		width:100%;
		align-self: stretch;
		padding: 10px;
	}
	/* メールフォーム======================================== */
	.mailform{
		padding: 10px;
	}
	input[type='text'] ,input[type='date'] , textarea{
		width: 100% !important;
	}
	.tel_button{
		width: 100%;
		max-width: 600px;
	}
	.tel_button a{
		width: 100%;
	}


}