@charset "utf-8";
/*index*/



/**/
.land01{}
.land01 .txtwrap{
	text-align: left;
	margin-bottom: 40px;
}
.land01 .img{
	width: 100%;
}
@media(min-width: 768px){
	.land01{
		display: flex;
		justify-content: space-between;
	}
	.land01 .txtwrap{
		width: 46%;
	}
	.land01 .img{
		width: 46%;
	}
}
/**/


/**/
.land02{
    width: 100%;
    margin: 5vw 0 15vw ;
/*    margin: 20vw 0 15vw;*/
    padding: 0;
    z-index: 2;
	position: relative;
}
/*
.land02::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -20vw;
    left: 0;
    z-index: -1;
	background-image: url(../images/landscape/bg01.jpg);
	background-size: 200% auto;
	background-position: top center;
	background-repeat: no-repeat;
}
@media(min-width: 768px){
	.land02::before {
    	top: -15vw;
		background-size: 100% auto;
	}
}
.land02::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -5vw;
    left: 0;
    z-index: -2;
    background-color: #bfa66f;
}
*/


/**/
.land03{
    width: 100%;
    margin: -10vw 0 10vw;
    padding: 10vw 0;
    z-index: 2;
	position: relative;
	background-color: #e5d4a1;
}
.land03::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
	background-image: url(../images/landscape/bg03.jpg);
	background-size: 200% auto;
	background-position: top center;
	background-repeat: no-repeat;
}
@media(min-width: 768px){
	.land03::before {
		background-size: 100% auto;
	}
}
.land03::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -5vw;
    left: 0;
    z-index: -2;
    background-color: #e5d4a1;
    transform: skewY(5deg);
}



.landscape{
	width: 90%;
	height:calc(120vw + 15px);
	overflow-y:hidden;
	overflow-x:scroll;
	margin: 0 auto ;
}
.landscape img{
	height:120vw;
	width:197vw;
	max-width:none;
}
@media(min-width: 768px){
	.landscape{
		width: 90%;
		height:auto;
		max-width: 1313px;
		overflow:hidden;
		margin: 0 auto;
		transform: translateX(4%);
	}
	.landscape img{
		width:100%;
		height:auto;
		max-width:100%;
	}
}
.hanrei{
	background-color: #fff;
	padding: 0;
	vertical-align: middle;
	font-size: 1.1rem;
	display: inline-block;
}
.hanrei .toyota{
	color: #d9517c;
	font-size: 120%;
}
.hanrei .panahome{
	color: #252d58;
	font-size: 120%;
}
.hanrei .misawahome{
	color: #095fa9;
	font-size: 120%;
}
.hanrei .kodate{
	height: 1.5em;
	vertical-align: -20%;
}
@media(min-width: 768px){
	.hanrei{
		margin-top: -10px;
		font-size: 1.4rem;
	}
}
/**/


/**/
.benefits{}
.benefits .unit01{
	background-image: url(../images/landscape/benefits_bg.png);
	background-size: 100% 100%;
	color: #fff;
	padding: 10px;
		margin-bottom: 40px;
}
.benefits .unit01 div{
	border: 1px solid #f0d49a;
	padding: 30px;
}
.benefits .unit01 .ttl01{
	font-size: 3rem;
	margin-bottom: 0.2em;
	font-weight: normal;
}
.benefits .unit01 .txt01{
	font-size: 2rem;
}
@media(min-width: 768px){
	.benefits{
		max-width: 1080px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.benefits .unit01{
		width: 48%;
	}
}


/**/
.green{
	background-color: #fff;
	padding: 40px 5%;
}
.greenList{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.greenList figure{
	width: 48%;
	margin-bottom: 30px;
}
.greenList figcaption{
	font-size:1.8rem;font-size:clamp(1.6rem, 1.8vw, 1.8rem);
		text-align: left;
}
@media(min-width: 768px){
	.green{
		background-color: #fff;
		padding: 40px 50px;
	}
	.greenList figure{
		width: 23%;
	}
}



.design{}
.design .unit01{
	margin-bottom: 50px;
	width: 100%;
}
.design .unit01 .ttl01{
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 25%, rgba(0,0,0,1) 50%, rgba(51,51,51,1) 75%, rgba(0,0,0,1) 100%);
	color: #fff;
	font-size:clamp(2.0rem, 2.5vw, 2.5rem);
	font-weight: normal;
	padding: 5px;
	margin-bottom: 20px;
}
.design .unit01 .txt01{
	font-size:clamp(1.6rem, 1.8vw, 1.8rem);
	text-align: left;
	margin-bottom: 20px;
}
.design .unit01 .img01{}
.design .unit01 .img01 figcaption{
	text-align: right;
	margin-top: 5px;
	font-size:clamp(1.4rem, 1.6vw, 1.6rem);
}
@media(min-width: 768px){
	.design{
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: wrap;
	}
	.design .unit01{
		width: 47.2%;
		max-width: 660px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}
	.design .unit01{
		width: 47.2%;
		max-width: 660px;
	}
	.design .unit01 .img01{
		margin-top: auto;
	}
}


.guideline01{}
.guideline01 .txtwrap{
	margin-bottom: 40px;
}
.guideline01 .txtwrap .ttl01{
	font-size:clamp(3.2rem, 4.8vw, 4.8rem);
	font-weight: normal;
	text-align: left;
	line-height: 1.5;
	font-feature-settings: "palt";
}
.guideline01 .img01{}
@media(min-width: 768px){
	.guideline01{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.guideline01 .txtwrap{
		margin-bottom: 0;
		width: 47.2%;
	}
	.guideline01 .img01{
		width: 47.2%;
		max-width: 660px;
	}
}


.guideline02{}
.guideline02 .unit01{
	margin-bottom: 40px;
}
.guideline02 .unit01 .ttl01{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	font-weight: normal;
	margin-bottom: 20px;
}
.guideline02 .unit01 .ttl01 .txt01{
	background-color: #000;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	font-size:clamp(1.6rem, 2vw, 2rem);
	width: 110px;
}
.guideline02 .unit01 .ttl01 .txt02{
	background-color: #8a784f;
	color: #fff;
	display: flex;
	justify-content: flex-start;
	align-items:center;
	width: calc(100% - 110px);
	font-size: 2.6rem;
	font-size:clamp(2rem, 2.6vw, 2.6rem);
	padding: 2px 0.5em;
}
.guideline02 .unit01 .txt03{
	text-align: left;
	color: #8a784f;
	font-size:clamp(2.2rem, 3vw, 3rem);
	margin-bottom: 10px;
	line-height: 1.5;
}
.guideline02 .unit01 .txt04{
	text-align: left;
	font-size:clamp(1.5rem, 1.7vw, 1.7rem);
	margin-bottom: 20px;
}
.guideline02 .unit01 .img01 figcaption{
	text-align: right;
	font-size:clamp(1.4rem, 1.6vw, 1.6rem);
	margin-top: 5px;
}
@media(min-width: 768px){
	.guideline02{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.guideline02 .unit01{
		width: 31.5%;
		max-width: 440px;
		margin-bottom: 0;
	}
}


.landToyota{
	width: 90%;
	max-width: 1400px;
	margin: 100px auto 0;
	background-image: url(../images/landscape/bg02.jpg);
	background-size: cover;
	background-position: center center;
	color: #fff;
	padding: 30px 5%;
	font-size:clamp(1.7rem, 4vw, 3.2rem);
}