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

@media screen and (max-width: 1199px) {
/* 768pxまでの幅の場合に適応される */
	
	.br{
		display: block;
	}
	
	header nav ul li{
		width: 25%;
		height: 70px;
		font-size: 1.2rem;
		line-height: 70px;
		text-align: center;
		display: block;
	}

	header nav ul li a:hover{
		color: blue;
	}

	.mv{
		width: 100%;
		height: 550px;
		margin: 0 0 90px 0;
		padding-top: 160px;
		background-image: url("../images/ad_mv.png");
		background-position: center;
		background-size: cover;
		display: block;
		box-sizing: border-box;
		position: relative;
		top: 90px;
	}

	.con_box_01,.con_box_02,.con_box_03,.con_box_05{
		padding: 40px 20px;
	}

	.con_box_04{
		margin: 0 0 -6px 0;
	}

	.con_box_01 p,.con_box_02 p,.con_box_03 p,.con_box_05 p{
		font-size: 0.80rem;
		line-height: 1.8rem;
	}

	.con_box_02{
		background-color: #A2A2A4;
	}

	.con_box_05{
		background-color: #ECECEC;
		padding: 50px 20px 100px 20px;
	}

	h2,.con_box_tx{
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
	}

	h2{
		font-size: 2.1rem;
		margin-bottom: 20px;
	}

	h3{
		font-size: 1.8rem;
	}

	.space_01{
		margin-bottom: 20px;
	}

	.service_select{
		width: 100%;
		margin-bottom: 40px;
		display: block;
		grid-template-columns:repeat(3, 33.333%);
		grid-template-row:repeat(3, 75px);
	}

	.service_tx{
		width: 100%;
		height: 130px;
		padding: 20px 40px;
		color: #fff;
		background-color: rgba(67,66,65,0.80);
		z-index: 10;
		position: absolute;
		bottom: 0;
	}

	.service_tx p{
		line-height: 1.6rem;
		font-size: 0.9rem;
	}

	.service_01,.service_02{
		position: relative;
		margin: 0 0 20px 0;
	}
	
	.service_03{
		position: relative;
	}

	.service_01::before,.service_02::before,.service_03::before{
		content: "";
		width: 100%;
		height:300px;
		display: block;
		z-index: 1;
	}

	.service_01::before{
		background-image: url("../images/ad_img_01.png");
		background-position: right bottom;
		background-size: cover;

	}
	.service_02::before{
		background-image: url("../images/ad_img_02.png");
		background-position: right bottom;
		background-size: cover;

	}
	.service_03::before{
		background-image: url("../images/ad_img_03.png");
		background-position: right bottom;
		background-size: cover;
	}

	.con_box_03{
		width: 100%;
		background-image: url("../images/ad_img_04_mb.png");
		background-size: contain;
		background-position: right bottom;
		background-repeat:no-repeat;
	}

	.con_box_img{
		width: 100%;
		margin: 0 auto;
	}

	.con_box_img img{
		width: 100%;
		max-width: 600px;
		padding: 0;
		opacity: 0.95;
	}

	p.contact a{
		width: 70%;
		margin: 20px 0;
		padding: 10px 0;
		border: solid 1px #000;
		font-size: 1.0rem;
		text-align: center;
		display: block;
		background-color: rgba(255,255,255,0.5);
	}

	p.contact a:hover{
		border: solid 1px #eee;
		background-color: #aaa;
		color: #fff;
	}
	
}

@media screen and (max-width: 1000px) {
/* 768pxまでの幅の場合に適応される */
	
	.con_box_03{
		height: 1000px;
	}
}

@media screen and (max-width: 640px) {
/* 768pxまでの幅の場合に適応される */
	
	.service_tx{
		height: auto;
		padding: 20px;
	}
	
	.con_box_03{
		height: 750px;
	}
	
	p.contact a{
		width: 100%;
	}
	
}

@media screen and (max-width: 480px) {
/* 768pxまでの幅の場合に適応される */
	
	.br{
		display: inline;
	}
	
	header nav ul li{
		font-size: 1.0rem;
	}
	
	.con_box_03{
		height: 750px;
	}
		
}

@media screen and (max-width: 320px) {
/* 768pxまでの幅の場合に適応される */
		
	.con_box_03{
		height: 550px;
	}
	
}