@charset "utf-8";

.ttl {
	color: #7B5700;
}
/* PC ================================================== */
@media all and (min-width:960px){
#landplan {
	width: 100%;
	height: auto;
	padding: 230px 0px 0px;
	background-color: #FAF9F2;
}
	.landplan--inner {
		width: 100%;
		margin: auto auto;
	}
		.landplan-main {
			width: 100%;
			margin: auto auto auto 0;
			padding: 0 0 70px;
		}
		.conteiner {
			width:100%;
			max-width: 1200px;
			margin:0 auto 100px;
			position: relative;
			overflow: hidden;
		}
		.top-ttl-area {
			margin: 30px auto 30px;
		}
		.top-ttl {
			font-size: 28px;
			text-align: center;
			padding: 0 0 80px;
		}
		.visual01 {
			width: 90%;
			width: 1200px;
			height: auto;
		}

		.lifeplan-area {
			width: 100%;
			max-width: 1000px;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 30px;
			margin: 0 auto;
		}
			.lifeplan-box {
				width: 100%;
			}
			.lifeplan-box img {
				width: 100%;
				height: auto;
				object-fit: cover;
			}

}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
	.header-logo {
		background-color: #fff;
	}
	#landplan {
		width: 100%;
		height: auto;
		padding: 100px 0px 70px;
		background-color: #FAF9F2;
	}
		.landplan--inner {
			width: 100%;
			margin: auto auto;
		}
			.landplan-main {
				width: 100%;
				margin: auto auto auto 0;
			}
			.conteiner {
				width:100%;
				margin:0 auto 100px;
				position: relative;
				overflow: hidden;
			}
			.top-ttl-area {
				margin: 50px auto 70px;
			}

			.top-ttl {
				font-size: 24px;
				text-align: center;
			}
			.visual01 {
				width: 100%;
				height: auto;
			}
			.lifeplan-area {
				width: 90%;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 30px;
				margin: 0 auto;
			}
				.lifeplan-box {
					width: 100%;
				}
				.lifeplan-box img {
					width: 100%;
					height: auto;
					object-fit: cover;
				}
	
}

/* SP ================================================== */
@media all and (max-width:559px){
	.header-logo {
		background-color: #fff;
	}
	#landplan {
		width: 100%;
		height: auto;
		padding: 100px 0px 70px;
		background-color: #FAF9F2;
	}
		.landplan--inner {
			width: 100%;
			margin: auto auto;
		}
			.landplan-main {
				width: 100%;
				margin: auto auto auto 0;
			}
			.conteiner {
				width:100%;
				margin:0 auto;
				position: relative;
				overflow: hidden;
			}
			.visual01 {
				width: 100%;
				height: auto;
			}
			.top-ttl-area {
				margin: 50px auto 70px;
			}
			.top-ttl {
				font-size: 16px;
				text-align: center;
			}
			.lifeplan-area {
				width: 90%;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 30px;
				margin: 0 auto;
			}
				.lifeplan-box {
					width: 100%;
				}
				.lifeplan-box img {
					width: 100%;
					height: auto;
					object-fit: cover;
				}
				.lifeplan-box p {
					font-size: 12px;
				}
}