@charset "utf-8";
/*===============================
	main
================================*/
/* メインビジュアル */
.mainVisual {
  	background-image: url("../img/mainVisual.JPG");
}


/* こんなお悩みありませんか？
----------------------------------------*/
.problem {
	margin: 96px auto 0;
}
.problem .wrapper {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, 1fr);
	margin: 20px auto;
	max-width: 1280px;
}
.problem .item-box {
	padding: 5px;
	background:rgba(255,255,255,0.5);
	box-shadow: 2px 2px 4px gray;
	text-align: center;
}
.problem .item-box p {
	padding: 10px;
}
.problem .item-box img {
	width: 100%;
 	height: 50%;
  	object-fit: cover;
}


/* info(ひとつでも当てはまったら)
----------------------------------------*/
.info {
	margin: 96px 0 0;
	padding: 50px 20px 70px;
	background-image: url("../img/info.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #fff;
}
.info p {
	margin: 20px 0;
}
.info .btn {
	width: 300px;
	margin: 0 auto;
}


/* service / works
----------------------------------------*/
.area {
	margin: 96px 20px;
}
.area .contents {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
}
.area .group {
	position: relative;
	max-width: 100%;
	margin: 24px auto;	
	background:rgba(255,175,8,0.5);
	box-shadow: 10px 10px 6px #D6D6D6;
	text-align: center;
}
.area .group a {
	color: #060606;
}
.area .group:hover {
	background: #0064B3;
	opacity: .7;
}
.area .group img {
	width: 600px;
	height: 400px;
	padding: 28px;
}
.area h3 {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 30px 0;	
	background: rgba(255,255,255,0.7);
	font-size: 2rem;
}



/*===============================
	pc
================================*/
@media screen and (min-width: 960px) {
	
	/* こんなお悩みありませんか？
	----------------------------------------*/
	.problem .wrapper {
		grid-template-columns: repeat(4, 1fr);
	}
	.problem .item-box img {
		height: 60%;
	}
	
	/* info(ひとつでも当てはまったら)
	----------------------------------------*/
	.info {
		background-attachment: fixed;
	}

		
	/* service / works
	----------------------------------------*/
	.area {
		margin: 120px 0;
	}
	.area .contents {
		max-width: 1280px;
		margin: 0 auto;
		flex-wrap: nowrap;
	}
	.area .group {
		width: 50%;
		margin: 24px;	
	}
	.area .group img {
		height: 400px;
	}	
	
}