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

@media (max-width: 1200px){
	header nav ul li{
		padding: 0;
		margin-left: 15px;
	}
	.site-header h1 img{
		width: 200px;
	}
	.services_wrap{
		margin: 30px 10px;
		width: calc(100% - 20px);
	}
}

/* Tablet */
@media (max-width: 959px){
	.pc{
		display: none !important;}
	
	.slide_wrap::after{
		background-size: 60px;
	}

	.top_copy{
		top:50%;
	}
	
	.greeting p{
		padding: 10px;
		background: rgba(255,255,255,0.55);
	}
	.services_wrap{
		height: 500px;
	}
	.services_wrap .img,.services_wrap .img02{
		width: 70%;
	}
	.services_wrap .txt,.services_wrap .txt02{
		width: 80%;
		height: 250px;
		top:auto;
		bottom: 0;
	}
	
	.subtitle{
		height: 300px;
	}
	.subtitle h2{
		width: 100%;
	}
	.subtitle h2 span{
		font-size: 200%;
	}
	
	.breadcrumb-box{
		font-size: 80%;
	}
	
	.card001{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.card001 figure{
		width: 100%;
		max-width: 450px;
	}
	.card001 figure img{
		aspect-ratio: 16 / 9;
	}
	.card001 .arrow{
		transform: rotate(90deg);
		margin:10px;
	}
	
	.card002{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
	}
	.reverse{
		flex-direction: column-reverse;
	}
	
	.concept{
		padding: 15px;
	}
	.concept h4{
		font-size: 1.5em;
	}
	
	.price dl dt{
		min-width: 10em;
		max-width: 100%;
	}
	
	.contents_mail{
		padding: 10px;
	}
	.tel_button{
		width: 95%;
	}
	input[type='text'] ,input[type='date'] , textarea{
		width: 100% ;
	}
	#mailform table th,
	#mailform table td{
		display: block;
		width: 100%;
	}
}

/* sp */
@media (max-width: 750px){
	.pctb{
		display: none !important;
	}
	.news{
		flex-direction: column;
		justify-content: center;
		align-content: center;
	}
	.news h3{
		border-right:none;
		padding: 10px;
	}
	.news_in{
		width: 100%;
		padding: 10px;
	}
	.contents_half_l,.contents_half_r{
		width: 100%;
		margin: auto;
	}
	
	/* Topリクルート ======================================== */
	.top_recruit{
		background-size: 100%;
		background-position: bottom;
		min-height: 500px;
	}
	.top_recruit .contents_half_l{
		width: 100%;
		margin: auto;
	}
	.top_recruit img{
		display: block;
	}
	.catch_rec{
		font-size: 2em;
	}

	.top_link{
		position: absolute;
		bottom:0px;
		top: auto;
		right: 7px;
		z-index: 10;
		width: 150px;
		text-align: center;
		padding: 0 10px;
	}

	.contents_link{
		flex-direction: column;
		align-items: center;
		justify-content:space-around;
	}
	figure.effect-chico{
		margin-bottom: 30px;
		height: 300px
	}
	figure.effect-chico figcaption::before {
		top: 20px;
		right: 20px;
		bottom: 20px;
		left: 20px;
	}
	figure.effect-chico h3{
		position: absolute;
		top:25px;
		left: 25px;
		font-size: 1.5em;
	}
	figure.effect-chico h4{
		bottom: 25px;
		right: 25px;
	}
	figure.effect-chico p{
		position: absolute;
		top:50px;
		left: 25px;
		right: 25px;
		opacity: 1;
		transform: scale(1);
		line-height: 150%;
	}
	
	/* カルーセルスライダー ======================================== */
	.carousel_g{
		width: 100%;
	}
	.carousel_g div img{
		height: 200px;
	}
	.carousel_g .slick-next {
		right: 20px;
		z-index: 50;
	}
	.carousel_g .slick-prev {
		left: 20px;
		z-index: 50;
	}
	.area{
		background-size: 100%;
	}
	.area_in{
		width: 100%;
		background-color: rgba(255,255,255,0.49);
		padding: 10px;
	}
	.top_rec_flex{
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
	}

	.footer_in ul{
		margin: auto;
		max-width: 300px;
	}
	p.catch_footer{
		font-size: 1.2em;
		padding: 10px;
	}
	
	.subtitle h2{
		font-size: 1.2em;
	}
	.subtitle h2 span{
		font-size: 180%;
	}
	
	/* table======================================== */
	
	.triangle table tr{
		 border-bottom: none;
	}
	.triangle table th{
		border:none;
		padding: 10px 0;
	}
	.triangle table th,.triangle table td{
		display: block;
		width: 100%;
	}
	.triangle table th:after{
		content:'';
		position:absolute;
		width: 0px;
		height: 0px;
		border-top: 10px solid #0079c3;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		top:calc(100% - 1px);
		left:50%;
		right: auto;
		transform: translateX(-50%);
	}
	.triangle table td{
		text-align: center;
		padding: 20px 10px 10px ;
	}
	
	.flex_contents{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flex_contents .img img{
		width: auto;
		height: calc(100% - 30px);
		margin-top: 30px;
	}
	.arrow_box{
		position:relative;
		width:100%;
		height:100%;
		border-radius:15px;
	}
	.arrow_box:after{
		border: solid transparent;
		content:'';
		height:0;
		width:0;
		pointer-events:none;
		position:absolute;
		border-color: rgba(245, 245, 245, 0);
		border-top-width:20px;
		border-bottom-width:20px;
		border-left-width:20px;
		border-right-width:20px;
		margin-left: -20px;
		border-top-color:#dae8f2;
		top:calc(100% + 10px);
		left:50%;
	}
	.concept{
		padding: 10px;
		margin-bottom: 10px;
	}
	.c_02{
		margin: 0;
	}
	.c_01,.c_02,.c_03{
		background-size: 200px auto;
	}
	.company_top{
		background-size: 300%;
		background-position: bottom center;
	}
	
	/* 流れ======================================== */
	.flow_inner{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flow_txt{
		width: 100%;
	}
	
	/* メールフォーム======================================== */
	.contact_top ul{
		flex-direction: column;
	}
	.contact_top ul li{
		margin: 10px;
	}
	.contact_top ul li :last-child{
		margin: 10px;
	}
	.mailform{
		padding: 10px;
	}
	input[type='text'] ,input[type='date'] , textarea{
		width: 100% ;
	}
	.postcord{
		width:150px !important ;
	}
	.tel_button{
		width: 100%;
		max-width: 600px;
	}
	.tel_button a{
		width: 100%;
	}


}
@media (max-width: 450px){
	.bg_img01{
		background: url("../img/bg_img01.png") ,url("../img/bg_img01.png") ;
		background-repeat: no-repeat;
		background-size: 200%;
		background-position: top,bottom;
		background-attachment:local;
		background-color: rgba(255,255,255,0.75);
	}
	.services_wrap{
		margin-bottom: 10px;
	}
	
	.services_wrap .img,.services_wrap .img02{
		width: 90%;
	}
	.services_wrap .txt,.services_wrap .txt02{
		width: 90%;
		top:auto;
		bottom: 0;
	}
	
	.simple01 table th,.simple01 table td{
		display: block;
		width: 100%;
	}
	.simple01 table th{
		padding: 1em 1em 0.5em;
	}
	.simple01 table td{
		padding:0.5em 1em 1em;
	}
	.price dl {
		flex-direction: column;
	}
	.price dl dt{
		min-width: 6em;
		width: 100%;
		padding: 1em 1em 0.5em;
	}
	.price dl dd{
		min-width: 6em;
		width: 100%;
		padding: 0.5em 1em 1em;
	}

}