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

/*********************************************/
/*  smarthills-mainvisual
/*********************************************/


#hitoyoshi-visual{
	margin: 86px auto  0%;
	width: 100%;
	background: url("../img/nagata/mv-back.webp")no-repeat;
	background-position: center;
	background-size: cover;
	height: 100vh;
	z-index: 2;
	display: block;
}

#hitoyoshi-visual p{
	padding:130px 0;
}

#hitoyoshi-visual .mv-ttl{
	width: 70%;
	padding-top: 6%;
}

#hitoyoshi-visual .mv-ttl02{
	position: absolute;
  bottom: 0;
  right: 5%;
	width: 8%;
}

#hitoyoshi-visual .mv-ttl03{
	position: absolute;
  bottom: -1%;
  left: -1%;
	width: 24%;
}

#hitoyoshi-visual .abs-box {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 3%;
	width: 36%;
	position: absolute;
	left: 61%;
	bottom: 30px;
}

/* *********** ******************************** */
@media screen and (max-width: 1700px) {
	/* ---------------------------------- */

	/* ---------------------------------- */
}
/* *********** ******************************** */
@media screen and (max-width: 1300px) {
	/* ---------------------------------- */
	#hitoyoshi-visual .mv-ttl{
	padding-top: 12%;
}


	/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
	/* ---------------------------------- */

	/* ---------------------------------- */
}
/* ******************************************* */
@media screen and (max-width: 1024px) {
	/* ---------------------------------- */
	#hitoyoshi-visual .mv-ttl{
	width: 90%;
	padding-top: 12%;
}
	
	#hitoyoshi-visual .mv-ttl02{
	width: 9%;
}

#hitoyoshi-visual .mv-ttl03{
	width: 30%;
}

	/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
	/* ---------------------------------- */
	#hitoyoshi-visual .mv-ttl{
	padding-top: 16%;
}
	
	#hitoyoshi-visual .mv-ttl02{
	width: 12%;
}

#hitoyoshi-visual .mv-ttl03{
	width: 37%;
}
	
	#hitoyoshi-visual .abs-box {
		flex-direction:column;
		justify-content:center;
		width: 13%;
        gap: 15px;
        bottom: 24px;
        left: 82%;
}
	/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
	/* ---------------------------------- */
	#hitoyoshi-visual .mv-ttl02{
	width: 15%;
}

#hitoyoshi-visual .mv-ttl03{
	width: 43%;
}
	/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
	/* ---------------------------------- */    

	#hitoyoshi-visual{
		margin: 75px auto 0;
		height: 600px;
	}
	
	#hitoyoshi-visual .mv-ttl{
		width: 95%;
	padding-top: 20%;
}
	
	#hitoyoshi-visual .mv-ttl02{
  bottom: 23%;
	width: 15%;
}

#hitoyoshi-visual .mv-ttl03{
  bottom: 19%;
	width: 43%;
}
	    #hitoyoshi-visual .abs-box {
        width: 21%;
        left: 74%;
    }
	/* ---------------------------------- */
}
/* ******************************************* */
@media screen and (max-width: 380px) {
	/* ---------------------------------- */

	/* ---------------------------------- */
}

/*********************************************/
/*  block01
/*********************************************/

#block01{
	margin: 0 auto;
	position: relative;
	background-color: #FDF0DD;
	width: 100%;
	aspect-ratio: 1915 / 1868;
	background-size: cover;
	background-position: center;
}

#block01 .left{
	margin: 0% auto;
	position: absolute;
	top: -7%;
	right: 0px;
	z-index: -1;
}



#block01 article{
	padding: 10% 15% 0;
	text-align: center;
	position: relative;
}

#block01 article .block01-1 .title01{
	font-size:24px;
	line-height: 1.5em;
	letter-spacing: 0.06em;
	padding-top: 3%;
}

#block01 article .block01-1 .info-ttl{
	font-size:80px;
	margin-bottom:35px;
	color: #009944;
}


#block01 article::after{
	position: absolute;
	content: '';
	top: 35%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 1px;
	background: #000;
	height: 65px;
}

#block01 article .block01-2{
	padding: 7% 0;
}

#block01 article .block01-2 p{
	line-height: 2.0em;
	letter-spacing: 0.04em;
	padding-top: 3%;
}

#block01 .ttltxt{
	font-size:30px;
	line-height: 3.5em;
}

#block01 .Green{
	color: #009944;
}

#block01 .yellow{
	color: #e08500;
}

#block01 article .block01-2 ul{
	margin: 5% auto;
	display: flex;
	align-items: center;
	flex-flow:  row nowrap;
	justify-content: space-around;
	padding: 0 20%;
}

#block01 article .block01-2 ul li{
	margin: 0 auto;
	width: 30%;
}


.slider-hitoyoshi{
	margin: 3% auto;
}

.slider-hitoyoshi2{
	padding-bottom: 9%;
}

.slider-hitoyoshi img,.slider-hitoyoshi2 img{
	padding: 0 3%;
}

/* *********** ******************************** */
@media screen and (max-width: 1400px) {
	/* ---------------------------------- */

	#block01 article .block01-2{
		padding: 10% 0;
	}

	#block01 article::after{
		position: absolute;
		content: '';
		top: 34%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width: 1px;
		background: #000;
		height: 55px;
	}

	#block01 article .block01-1 .title01{
		font-size:20px;
	}


	#block01 article .block01-2 ul{
		padding: 0 14%;
	}




	/* ---------------------------------- */
}


/* *********** ******************************** */
@media screen and (max-width: 1200px) {
	/* ---------------------------------- */

	#block01 .left img{
		max-width: 300px;
	}

	#block01 article .block01-2 ul{
		margin: 5% auto;
		padding: 0 5%;
	}

	#block01 article::after{
		top: 32%;
	}



	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1024px) {
	/* ---------------------------------- */

	#block01 article::after{
		position: absolute;
		content: '';
		top: 32%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width: 1px;
		background: #000;
		height: 45px;
	}

	#block01 article .block01-1 .info-ttl {
		font-size: 60px;
		padding-top: 100px;
	}

	#block01 article .block01-1 .title01 {
		font-size: 18px;
	}

	/* ---------------------------------- */
}
/* *********** ******************************** */
@media screen and (max-width: 900px) {
	/* ---------------------------------- */

	#block01 article::after{
		position: absolute;
		content: '';
		top: 35%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width: 1px;
		background: #000;
		height: 40px;
	}

	#block01 article .block01-1 .title01{
		font-size:17px;
	}



	/* ---------------------------------- */
}



/* *********** ******************************** */
@media screen and (max-width: 768px) {
	/* ---------------------------------- */

	#block01 article::after{
		position: absolute;
		content: '';
		top: 31%;
	}

	#block01 p,
	#block02 p{
		font-size:14px;
	}

	#block01 article .block01-1 .title01{
		font-size:16px;
	}

	#block01 article .block01-2{
		padding: 15% 0 10% 0;
	}

	#block01 article{
		padding: 5% 5%;
	}

	#block01 .left img{
		max-width: 200px;
	}


	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 648px) {
	/* ---------------------------------- */

	#block01 article::after{
		position: absolute;
		content: '';
		top: 29%;
		height: 35px;
	}

	#block01 p,
	#block02 p{
		font-size:14px;
	}


	#block01 article{
		padding: 20% 5% 0;
	}

	#block01 article .block01-2 ul{
		margin: 10% auto;
		padding: 0 5%;
	}

	#block01 article .block01-1 .title01{
		margin: 3% auto;
		line-height: 1.5em;
	}

	#block01 article .block01-1 .info-ttl {
		font-size:45px;
		padding-top:0;
		line-height: 1;
	}

	#block01 article .ttltxt {
		font-size:20px;
	}

	#block01 article .block01-1 .title01 {
		font-size: 14px;
	}

	#block01 article .txt {
		font-size: 13px;
	}


	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 480px) {
	/* ---------------------------------- */

	#block01 article::after{
		position: absolute;
		content: '';
		top: 29%;
		height: 35px;
	}

	#block01 p,
	#block02 p{
		font-size:12px;
	}


	#block01 article .block01-2 ul{
		margin: 10% auto;
		padding: 0 5%;
	}

	#block01 article .block01-2 ul{
		margin: 10% auto;
		padding: 0 0%;
	}


	#block01 article .block01-1 .title01{
		font-size:15px;
	}

	#block01 article .block01-2 p span{
		font-size:18px;
	}


	/* ---------------------------------- */
}


@media screen and (max-width: 409px) {
	/* ---------------------------------- */
    #block01 article::after {
        top: 27%;
    }
	
	#block01 article .block01-1 .title01{
		font-size:13px;
	}

	/* ---------------------------------- */
}
/* *********** ******************************** */
@media screen and (max-width: 380px) {
	/* ---------------------------------- */
	#block01 article{
		padding: 20% 3% 0% 3%;
	}
	#block01 p,
	#block02 p{
		font-size:12px;
	}
	#block01 article .block01-2 ul{
		margin: 10% auto;
		padding: 0 5%;
	}
	#block01 article .block01-2 p span{
		font-size:17px;
	}
	
		#block01 article::after{
		top: 26%;
	}
	
	/* ---------------------------------- */
}


/*********************************************/
/* block02
/*********************************************/
#block02{
	margin: 0 auto;
	position: relative;
}

#block02:before {
	content: '';
	display: block;
	width: 50%;
	aspect-ratio: 1024 / 108;
	position: absolute;
	bottom: calc(100% - 50px);
	left: 50%;
	transform: translateX(-48%);
	background-image: url("../img/nagata/info-mozi01@2x.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#block02 .left {
    margin: 0% auto;
    position: absolute;
    top: -16%;
    width: 30%;
    left: 0px;
    z-index: 2;
}

#block02 .title02{
	margin: 0 auto;
	padding: 0 20%;
}

#block02 article{
	background-color: #fff;
	background-size: cover;
	background-position: center;
	aspect-ratio: 1920 / 900;
	width: 100%;
}

#block02 article .flex-box{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-around;
	margin: 0 auto;
	width:70%;
	padding-top:9%;
}

#block02 article .floor-map{
	margin: 0 auto;
	width:70%;
	padding-top:9%;
}


#block02 article .floor-txt{
	font-size:35px;
	color: #0e890e;
	padding-bottom:4%;
}

#block02 article .left03{
	aspect-ratio: 532 / 457;
	width:40%;
}

#block02 article .right03{
	aspect-ratio: 501 / 504;
	width:40%;
}



#block02 article .right02 p{
	text-align: left;
	line-height: 1.7;
	letter-spacing: 0.05em;
}

#block02 article .right02{
	margin-left:2%;
}


#block02 article .right02 img{
	margin: 5% 0 0;
}

#block02 article .right02 ul{
	margin: 3% auto;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-flow: row nowrap;
}

#block02 article .right02 ul li{
	width: 43%;
	padding: 0 0 3% 0;
}



#block02 article .left-img02{
	width:100%;
}

#block02 article .sankou-txt{
	font-size:35px;
	padding-bottom:3%;
	color:#153872;
}

#block02 article .flex-box1{
	display: flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:nowrap;
	width:100%;
	margin:0 auto;
	padding:2% 0;
}


#block02 article .flex-box2{
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content:space-between;
	flex-wrap:nowrap;
	width:100%;
	margin:0 auto;
	gap:25px 0;
}

#block02 article .box-L{
	display: flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:nowrap;
	width:100%;
	margin: 0 auto;
}

#block02 article .sankou{
	width:61%;
	margin: 0 auto;
	padding-bottom:7%;
}

#block02 article .sankou-kome{
	text-align:left;
}

#block02 article .box-M1{
	width:70%;
}

#block02 article .box-M2{
	width:21%;
}

/* *********** ******************************** */
@media screen and (max-width: 1300px) {
	/* ---------------------------------- */

	#block02 article .right02 p{
		font-size: 15px;
	}

	#block02 article .left-img02{
		width:92%;
	}
	
	
	#block02 article .box1, .box2, .box3{
		height:50%;
	}
	
	#block02 article .sankou{
	width:63%;
}
	


	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1024px) {
	/* ---------------------------------- */
	#block02 article{
		padding: 10% 7%;
		display: block;
	}


	#block02 .left{
		margin: 0% auto;
		position: absolute;
		top: -15%;
		left: 0px;
		z-index: 2;
	}

	#block02 article .right02{
		margin: 5% auto 0;
		width:80%;
	}

	#block02 article .right02 p{
		font-size:14px;
	}

	#block02 article .right02 p{
		padding: 0 0 0 3%;
	}

	#block02 article .left-img02{
		width:88%;
	}

	#block02 article {
		padding: 0% 0%;
	}

	#block02:before {
		bottom: calc(100% - 20px);
	}

	#block02 article .sankou-kome {
    font-size: 14px;
	text-align:center;
}
	#block02 article .right02 ul {
    margin: 0% auto;
}
	
	#block02 article .floor-txt {
    font-size: 27px;
}
	
	#block02 article .sankou-txt {
    font-size: 27px;
}


	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 768px) {
	/* ---------------------------------- */

	#block02 article .right02 p{
		font-size: 14px;
	}

	#block02 .left img{
		max-width: 250px;
	}

	#block02 article{
		padding: 0% 0% 10%;
		display: block;
	}
	
	#block02 article .flex-box{
	display: block;
}

	
	#block02 article .right02 img{
		text-align: left;
		margin: 10% 0 0;
	}

#block02 article .flex-box {
        width: 90%;
        padding-top: 0%;
    }
	
#block02 article .right02{
		margin: 10% auto 0;
	}
	
#block02 article .mb768{
		padding: 10% 0 10%;
	line-height: 1.5;
	letter-spacing: 1.4px;
		
    }
	
	
#block02 article .floor-map {
    width: 100%;
}
	
	#block02 article .sankou{
	width:90%;
}
	
	#block02 article .box-L {
		flex-direction:column;
		gap:20px 0;
	}
	
	#block02 article .box-M1{
	width:100%;
}

#block02 article .box-M2{
	width:30%;
}
	#block02 article .flex-box1 {
    padding: 4% 0;
}

	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 648px) {
	/* ---------------------------------- */
	#block02 article{
		padding: 7% 8%;
	}

	#block02 .left img{
		max-width: 200px;
	}

	#block02 article .floor-txt{
		font-size: 20px;
		padding-bottom: 6%;
	}

	#block02 article .sankou-txt {
		font-size: 20px;
	}
	
	#block02 article .left03 {
    width: 47%;
}
	
		#block02 article .right03 {
    width: 45%;
}
	
	    #block02 article .right02 {
        width: 94%;
    }
	
	#block02 article .left-img02 {
        width: 79%;
    }
	
		#block02 article .left02 {
        width: 97%;
    }
	
	#block02 article .flex-box {
        width: 100%;
    }
	
		#block02 article .sankou{
	width:100%;
}

	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 480px) {
	/* ---------------------------------- */

	#block02 article .right02 p{
		font-size: 12px;
	}
	
	    #block02:before {
        width:90%;
    }
	
	    #block02 article .sankou-kome {
        font-size: 13px;
    }
	/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 420px) {
	/* ---------------------------------- */
	#block02 .left img{
		max-width: 160px;
	}

	#block02 article{
		padding: 10% 5%;
	}
	    #block02 .left {
        top: -10%;
    }

	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 380px) {
	/* ---------------------------------- */

	#block02 article .right02 p{
		font-size: 12px;
	}
	/* ---------------------------------- */
}


/*********************************************/
/* ぱららっくす
/*********************************************/
.img-block img{
	width:100%;
	height:auto;
	display:block;
}


@media screen and (max-width: 1300px) {

	
}

@media screen and (max-width: 1024px) {

	.paralax{
		width: 150%;
	}   

	.parallax-wrap{
		height:380px;
	}   
}

@media screen and (max-width: 768px) {

	.paralax{
		width: 170%;
	}   

	.parallax-wrap{
		height:330px;
	}   
}

@media screen and (max-width: 648px) {

	.paralax{
		width: 180%;
	}   

	.parallax-wrap{
		height:270px;
	}   
}

@media screen and (max-width: 480px) {

	.paralax{
		width: 230%;
	}   

	.parallax-wrap{
		height:200px;
	}   
}

@media screen and (max-width: 380px) {

	.paralax{
		width: 260%;
	}   

	.parallax-wrap{
		height:170px;
	}   
}


/*********************************************/
/* block03
/*********************************************/
#block03{
	padding: 12% 0 20% 0;
	position: relative;
	background-color: #FDF0DD;
}

#block03 .right,
#block05 .right{
	position: absolute;
	top:-10%;
	right: 0%;
	z-index:999;
}

#block05 .right{
	top: -11%;
	right: -5%;
}

#block03 .left,
#block05 .left{
	position: absolute;
	bottom: -16%;
	left: 0%;
	z-index:-1;
}

#block05 .left{
	left: -5%;
}


#block03 .title03 {
	padding-bottom: 0;
	position: relative;
	color: #E78831;
	font-size: 35px;
	letter-spacing: 0.05em;
	line-height: 2.0em;
	z-index: 2;
}

#block03 ul{
	margin: 0 auto;
	width: 70%;
	padding: 2% 10%;
	background: #fff;
} 

#block03 ul:before {
	content: '';
	display: block;
	width: 70%;
	aspect-ratio: 1270 / 140;
	position: absolute;
	bottom: 89%;
	left: 15%;
	background-size: cover;
	background-position: center;
	z-index:-1;
}

#block03 ul:after {
	content: '';
	display: block;
	width: 70%;
	aspect-ratio: 1270 / 101;
	position: absolute;
	top: calc(100% - 1px);
	left: 15%;
	background-size: cover;
	background-position: center;
}

#block03 ul li{
	margin: 0 0 3%;
	border-bottom: #c1c3c7 1px solid;
	display: flex;
	justify-content: space-between;
	align-items: top;
	flex-flow:  row nowrap;
	text-align: left;
	line-height: 1.5em;
	letter-spacing: 0.03em;
	padding: 0 0 3%;
}


#block03 ul li .item{
	width: 30%;
	padding: 0 0 0 2%;
}

#block03 ul li .detail{
	width: 65%;
	text-align: left;
}

/* *********** ******************************** */
@media screen and (max-width: 1400px) {
	/* ---------------------------------- */

	#block03 ul li p{
		font-size: 15px;
	}


	#block03 ul{
		width: 75%;
	} 

	#block03 .left img,
	#block03 .right img{
		max-width: 300px;
	}

	#block03 ul:before {
		width: 75%;
		bottom: 90%;
		left: 12.5%;
	}

	#block03 ul:after {
		width: 75%;
		left: 12.5%;
	}
	/* ---------------------------------- */
}
/* *********** ******************************** */
@media screen and (max-width: 1200px) {
	/* ---------------------------------- */

	#block03 ul{
		padding: 4% 7%;
	} 


	#block03 ul:before {
		bottom: 91%;
	}
	/* ---------------------------------- */
}
/* *********** ******************************** */
@media screen and (max-width: 1024px) {
	/* ---------------------------------- */
	#block03 ul{
		width: 80%;
	}

	#block03 .title03{
		margin: 5% auto 4%;
		font-size:27px;
	}
	
	#block03 .title03 {
    font-size: 27px;
}

	#block03{
		margin: 0 auto 0;
		position: relative;
	}

	#block03 .left img,
	#block03 .right img,
	#block05 .left img,
	#block05 .right img{
		max-width: 250px;
	}

	#block03 ul:before {
		width: 80%;
		bottom: 91%;
		left: 10%;
	}

	#block03 ul:after {
		width: 80%;
		left: 10%;
	}
	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 768px) {
	/* ---------------------------------- */
	#block03 ul li p{
		font-size: 14px;
	}

	#block03 ul:before {
		bottom: 92%;
	}

	/* ---------------------------------- */
}
/* *********** ******************************** */
@media screen and (max-width: 648px) {
	/* ---------------------------------- */
	#block03 ul li p{
		font-size: 13px;
	}

	#block03 ul{
		width: 90%;
	}


	#block03 .left img,
	#block03 .right img,
	#block05 .left img,
	#block05 .right img{
		max-width: 200px;
	}

	#block03 .right{
		top:-3%;
	}

	#block03 .title03{
		margin: 5% auto 4%;
		font-size:18px;
	}

	#block03 ul:before {
		width: 90%;
		bottom: 94%;
		left: 5%;
	}

	#block03 ul:after {
		width: 90%;
		left: 5%;
	}

	#block03 .left,{
		bottom: -7%;
	}

	/* ---------------------------------- */
}



/* *********** ******************************** */
@media screen and (max-width: 480px) {
	/* ---------------------------------- */

	#block03 {
		margin: 0 auto 0;
	}

	#block03 ul li{
		display: block;
		line-height: 1.2em;
	}


	#block03 ul li .item{
		width: 100%;
		padding: 0 0 0 2%;
	}

	#block03 ul li .detail{
		width: 100%;
		text-align: left;
		padding: 0 0 0 2%;
	}

	#block03 .left img,
	#block03 .right img,
	#block05 .left img,
	#block05 .right img{
		max-width: 150px;
	}

	#block03 ul:before {
		bottom: 94.5%;
	}


	/* ---------------------------------- */
}


/* *********** ******************************** */
@media screen and (max-width: 380px) {
	/* ---------------------------------- */
	#block03 ul li p{
		font-size: 12px;
	}

	#block03 ul{
		padding: 8% 5%;
	} 


	#block03 .left img,
	#block03 .right img,
	#block05 .left img,
	#block05 .right img{
		max-width: 130px;
	}
	    #block03 ul:before {
        bottom: 95.1%;
    }

	/* ---------------------------------- */
}



/* ----------------------------
-----block04------------------- */
#block04{
	padding: 5% 0 0 0;
	position: relative;
	background-color: #FDF0DD;
}
#block04 .title04{
	width: 100%;
	padding: 0 15%;
	margin: 0 auto 0;
}


#block04 .hitoyoshi-town{
	font-size: 60px;
	color: #009944;
	padding-bottom: 3%;
}

#block04::before{
	position: absolute;
	content: '';
	top: -7%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 1px;
	background: #000;
	height: 65px;
}

#block04 .title01{
	font-size: 35px;
	line-height: 3.0em;
	letter-spacing: 0.06em;
	display: block;
	color: #000;
	margin: 0 auto;	
}

#block04 .shuhen-list{
	margin: 3% auto;
	background: url("../img/nagata/about-back-img01@2x.webp")no-repeat;
	background-size: cover;
	background-position: center;

	padding: 6% 10%;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-flow: wrap;
	gap:20px 2%;
}

#block04 .shuhen-list .shuhen-item{
	width: 23.5%;
	background: #fff;
	padding: 1.5% 2%;
	font-size:18px;
	letter-spacing: 0.03em;
	line-height: 2;
	border: 2px solid #E78831;
	border-radius: 5%;
}

#block04 .shuhen-list .shuhen-item .img-box{
	width: 100%;
	aspect-ratio: 1.34;
}

#block04 .shuhen-list .shuhen-item .img-box img{
	max-width: initial;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#block04 .shuhen-list .shuhen-item .txt{
	margin-top: 1em;
	color: #E78831;
}
#block04 .shuhen-list .shuhen-item .notice{
	font-size: 70%;
}


/* *********** ******************************** */
@media screen and (max-width: 1600px) {
	#block04 .shuhen-list{
		padding: 6% 8%;
	}
	#block04 .title01{
		font-size:17px;
	}
}
/* *********** ******************************** */
@media screen and (max-width: 1500px) {
	#block04 .shuhen-list .shuhen-item .txt{
		text-align: center;
	}

	#block04 .title01{
		font-size:16px;
	}
}

/* *********** ******************************** */
@media screen and (max-width: 1300px) {
	#block04 .title01{
		font-size:20px;
	}
	#block04 .shuhen-list{
		padding: 6% 8%;
	}	
	#block04 .shuhen-list .shuhen-item {
		width: calc(96% / 3);
		font-size: 14px;
	}
	#block04 .title01{
		width:30%;
	}
}

/* *********** ******************************** */
@media screen and (max-width: 1100px) {
	#block04 .shuhen-list{
		padding: 6% 8%;
	}
	#block04 .title01{
		font-size:18px;
	}

}

/* *********** ******************************** */
@media screen and (max-width: 1024px) {
	#block04{
		margin: 0 auto 3%;
		position: relative;
	}
	#block04 .shuhen-list .shuhen-item{
		width: 31%;
		background: #fff;
		padding: 1.5%;
	}
	#block04 .shuhen-list{
		padding: 6% 8%;
	}
	#block04::before{
		position: absolute;
		content: '';
		top: -5%;
	}

	#block04 .title01{
		width:40%;
	}

}

/* ******************************************* */
@media screen and (max-width: 768px) {
	#block04{
		margin: 0 auto 3%;
		position: relative;
	}
	
	#block04 .title04{
	padding: 0 5%;
}
	
	#block04 .shuhen-list .shuhen-item{
		width: 48%;
		background: #fff;
		padding: 1.5%;
	}
	#block04 .shuhen-list{
		padding: 6% 14%;
	}
	#block04::before{
		position: absolute;
		content: '';
		top: -2%;
		height: 45px;
	}
	#block04 .title01{
		font-size:16px;
	}
	#block04 .shuhen-list .shuhen-item .txt{
		font-size:13px;
	}
	
	#block04 .hitoyoshi-town {
    padding-bottom: 6%;
    padding-top: 4%;
}
}

/* *********** ******************************** */
@media screen and (max-width: 648px) {
	#block04 .shuhen-list{
		padding: 17% 6%;
		margin: 9% auto;
	}
	#block04 .smart-hills {
		padding: 0 8%;
	}

	#block04 .title01 {
		font-size: 14px;
		width:50%;
	}


	#block04 .hitoyoshi-town {
		padding-bottom: 6%;
		font-size: 48px;
	}
}

/* *********** ******************************** */
@media screen and (max-width: 480px) {
	#block04{
		margin: 0 auto 3%;
		padding-top: 10%;
		position: relative;
	}
	#block04 .shuhen-list{
		padding: 6% 5%;
	}
	#block04 .shuhen-list .shuhen-item .txt{
		font-size:12px;
		padding: 7% 0 0;
	}

}


/* *********** ******************************** */
@media screen and (max-width: 420px) {
	#block04 .shuhen-list{
		padding: 6% 5%;
	}
	#block04 .shuhen-list .shuhen-item .txt{
		padding: 0 0 0 ;
		line-height: 20px;
	}

	#block04 .title01 {
		width:68%;
	}

    #block04 .hitoyoshi-town {
        font-size: 45px;
    }
	
	}



/* *********** ******************************** */
@media screen and (max-width: 380px) {
	/* ---------------------------------- */
	#block04 .shuhen-list{
		
		padding: 6% 5%;
	}
	
	    #block04 .hitoyoshi-town {
        font-size: 33px;
    }
	
	#block04 .shuhen-list .shuhen-item .txt {
    margin-top: 0;
		line-height:1.5;
}
	/* ---------------------------------- */
}

/* ----------------------------
-----block05------------------- */
#block05{
	margin: 5% auto 0;
	width: 100%;
	position: relative;
}

#block05 article{
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-flow: row nowrap;
	padding: 3% 15% 7%;
}

#block05 article .map{
	width: 50%
}

#block05 article .access{
	text-align: left;
}

#block05 article .access img{
	margin: 0 auto 5%;
}

#block05 article .access p{
	margin: 0 0 9%;
	font-size: 16px;
	line-height: 1.6em;
	letter-spacing: 0.05em;
}

#block05 article .access a p{
	background-color:#139BBA;
	color:white;
	width: 45%;
	text-align: center;
	padding:0.5% 3% 1%;
}

#block05 article .access a p:hover{
	border: #E78831 solid 1px;
	color: #E78831;
	background-color:#fff;
	transition: 0.4s;
}

#block05 article .access-ttl{
	color: #E78831;
	font-size:60px;
	margin: 0 0 9%;
	line-height: 1.6em;
	letter-spacing: 0.05em;
}

/* *********** ******************************** */
@media screen and (max-width: 1600px) {
	/* ---------------------------------- */


	#block05 article{
		padding: 4% 7% 9%;
	}

	#block05 article .access img{
		padding: 0 20% 0 0;
	}

	#block05 article .map{
		width: 40%
	}

	#block05 article .access{
		text-align: left;
	}


	/* ---------------------------------- */
}


/* *********** ******************************** */
@media screen and (max-width: 1300px) {
	/* ---------------------------------- */

	#block05 article{
		padding: 7% 2% 11%;
	}

	#block05 article .access a p{
		width: 38%;
	}

	/* ---------------------------------- */
}



/* *********** ******************************** */
@media screen and (max-width: 1024px) {
	/* ---------------------------------- */

	#block05 article{
		padding: 5% 2% 10%;
	}


	#block05 article .access p{
		margin: 0 0 9%;
		font-size: 15px;
	}

	/* ---------------------------------- */
}



/* *********** ******************************** */
@media screen and (max-width: 900px) {
	/* ---------------------------------- */

	#block05 article{
		display: block;
	}

	#block05 article .map{
		margin: 0 auto;
		width:100%
	}

	#block05 article .access{
		margin: 10% auto;
		width: 100%;
		text-align: center;
	}

	#block05 article .access img{
		padding: 0 15% 0 ;
	}

	#block05 article .access a p{
		margin: 0 auto;
	}


	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 768px) {
	/* ---------------------------------- */
	#block05 article .access p{
		margin: 0 0 9%;
		font-size: 14px;
		width: 100%;
        padding: 8% 0;
        margin: 0 auto;
	}

	#block05 .left {
		bottom: 8%;
		left: -3%;
	}

	#block05 article {
		padding: 8% 15% 0%;
	}
	
	

	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 480px) {
	/* ---------------------------------- */
	#block05 article .access p{
		font-size: 13px;
	}
	
	#block05 article .access-ttl {
    font-size: 45px;
}

	/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 380px) {
	/* ---------------------------------- */
	#block05 article .access p{
		font-size: 12px;
	}
	
	#block05 article .access-ttl {
    font-size: 40px;
}
	

	/* ---------------------------------- */
}

#reserve{
	margin: 5% auto;
}

.map-area{
	width:95%;
	max-width:1000px;
	margin:0 auto;
}

.happa{
	width:100%;
}