@charset "UTF-8";
body {
    background-color: #ffffff;
}


	
	
/* fv
--------------------- */
#fv {
	width: 100%;
	height: 100vh;
	position: relative;
}
	#fv .cloud-bg {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #EAEEF8;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
		#fv .cloud-bg .logo {
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(200 * var(--vw-ratio));
			height: 100%;
			position: fixed;
			top: 0;
			left: 50%;
			margin-left: calc(-100 * var(--vw-ratio));
		}
		#fv .cloud-bg .cloud01 {
			width: calc(962 * var(--vw-ratio));
			position: fixed;
			top: calc(-111 * var(--vw-ratio));
			left: calc(-214 * var(--vw-ratio));
		}
		#fv .cloud-bg .cloud02 {
			width: calc(1008 * var(--vw-ratio));
			top: calc(290 * var(--vw-ratio));
			position: fixed;
			top: calc(-148 * var(--vw-ratio));
			right: calc(-110 * var(--vw-ratio));
		}
		#fv .cloud-bg .cloud03 {
			width: calc(930 * var(--vw-ratio));
			position: fixed;
			top: calc(274 * var(--vw-ratio));
			left: calc(-157 * var(--vw-ratio));
		}
		#fv .cloud-bg .cloud04 {
			width: calc(978 * var(--vw-ratio));
			position: fixed;
			top: calc(290 * var(--vw-ratio));
			right: calc(-200 * var(--vw-ratio));
		}
		#fv .cloud-bg .cloud05 {
			width: calc(1200 * var(--vw-ratio));
			position: fixed;
			top: calc(480 * var(--vw-ratio));
			left: calc(0 * var(--vw-ratio));
		}

	#fv .visual {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -2;
	}
		#fv .visual img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* 画面いっぱいに表示 */
			display: block;
			will-change: transform, filter; /* アニメーションの軽量化 */
		}
		#fv .visual .pht01 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 2;
		}
		#fv .visual .pht02 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

	#fv .txt-en  {
		opacity: 0;
		width: 100%;
		padding: 0 calc(20 * var(--vw-ratio));
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
	}
@media screen and (max-width: 767px) {
	#fv {
		height: 100dvh;
	}
		#fv .cloud-bg {
			height: 100dvh;
		}
	
		#fv .visual {
			height: 100dvh;
		}
			#fv .visual img {
				width: 200%;
				height: auto;
			}
}


	
	
/* message
--------------------- */
#message {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
    position: relative;
	color: #fff;
    z-index: 1;
}
	#message .txt-16 {
		line-height: calc(44 * var(--vw-ratio));
		font-weight: 500;
		text-align: center;
	}

	#message .txt-20 {
		margin-top: calc(30 * var(--vw-ratio));
		font-weight: 700;
		text-align: center;
	}
	#message h2 {
		font-size: calc(26 * var(--vw-ratio));
		font-weight: 700;
		text-align: center;
	}
@media screen and (max-width: 767px) {
	#message {
		height: 100dvh;
	}
		#message .txt-16 {
			line-height: calc(40 * var(--vw-ratio));
		}
		#message .txt-20 {
			margin-top: calc(25 * var(--vw-ratio));
		}
		#message h2 {
			font-size: calc(24 * var(--vw-ratio));
		}
}


	
	
/* section
--------------------- */
.section {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: fixed; /* fixedに変更 */
    top: 0;
    left: 0;
    opacity: 0; /* 初期状態は非表示 */
}
	.section .leaf {
		position: absolute;
		z-index: 2;
	}
	.section .pht {
		position: absolute;
		z-index: 2;
	}

	.section .txt-en {
		width: 100%;
		padding: 0 calc(20 * var(--vw-ratio));
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
@media screen and (max-width: 767px) {
	.section {
		height: 100dvh;
	}
}


	
	
/* housing-energy
--------------------- */
#housing-energy {
	z-index: 2;
	background: #D2FFFF url("../img/housing-energy_bg.webp") no-repeat center / 100%;
}
	#housing-energy .leaf01 {
		width: calc(425 * var(--vw-ratio));
		top: calc(290 * var(--vw-ratio));
		left: calc(-30 * var(--vw-ratio));
	}
	#housing-energy .leaf02 {
		width: calc(331 * var(--vw-ratio));
		bottom: calc(-70 * var(--vw-ratio));
		right: calc(-7 * var(--vw-ratio));
		z-index: 0;
	}

	#housing-energy .pht01 {
		width: calc(284 * var(--vw-ratio));
		top: calc(100 * var(--vw-ratio));
		left: calc(147 * var(--vw-ratio));
	}
	#housing-energy .pht02 {
		width: calc(293 * var(--vw-ratio));
		top: calc(160 * var(--vw-ratio));
		left: calc(389 * var(--vw-ratio));
	}
	#housing-energy .pht03 {
		width: calc(227 * var(--vw-ratio));
		bottom: calc(53 * var(--vw-ratio));
		right: calc(337 * var(--vw-ratio));
		z-index: 0;
	}
	#housing-energy .pht04 {
		width: calc(200 * var(--vw-ratio));
		top: calc(220 * var(--vw-ratio));
		right: calc(345 * var(--vw-ratio));
	}
@media screen and (max-width: 767px) {
	#housing-energy {
		background: #D2FFFF url("../img/housing-energy_bg.webp") no-repeat center / 250%;
	}
		#housing-energy .leaf01 {
			width: 80%;
			top: calc(200 * var(--vw-ratio));
		}
		#housing-energy .leaf02 {
			width: 45%;
			right: calc(-10 * var(--vw-ratio));
			bottom: calc(-40 * var(--vw-ratio));
		}

		#housing-energy .pht01 {
			width: 40%;
			top: calc(70 * var(--vw-ratio));
			left: calc(50 * var(--vw-ratio));
		}
		#housing-energy .pht02 {
			width: 46%;
			top: calc(120 * var(--vw-ratio));
			left: 45%;
		}
		#housing-energy .pht03 {
			width: 36%;
			bottom: calc(120 * var(--vw-ratio));
			right: calc(200 * var(--vw-ratio));
		}
		#housing-energy .pht04 {
			width: 26%;
			top: auto;
			bottom: calc(350 * var(--vw-ratio));
			right: calc(250 * var(--vw-ratio));
		}
}


	
	
/* mobility
--------------------- */
#mobility {
	background: #FFFFC8 url("../img/mobility_bg.webp") no-repeat center / 100%;
	z-index: 3;
}
	#mobility .leaf01 {
		width: calc(678 * var(--vw-ratio));
		top: calc(130 * var(--vw-ratio));
		left: calc(-50 * var(--vw-ratio));
		z-index: 1;
		mix-blend-mode: multiply;
	}
	#mobility .leaf02 {
		width: calc(482 * var(--vw-ratio));
		top: calc(90 * var(--vw-ratio));
		right: calc(90 * var(--vw-ratio));
		z-index: 2;
		mix-blend-mode: multiply;
	}
	#mobility .leaf03 {
		width: calc(392 * var(--vw-ratio));
		bottom: calc(-120 * var(--vw-ratio));
		right: calc(-120 * var(--vw-ratio));
		z-index: 2;
	}

	#mobility .pht01 {
		width: calc(1088 * var(--vw-ratio));
		top: 50%;
		left: 50%;
		margin-top: calc(-300 * var(--vw-ratio));
		margin-left: calc(-550 * var(--vw-ratio));
		z-index: 1;
	}
	#mobility .pht02 {
		width: calc(1163 * var(--vw-ratio));
		top: 50%;
		left: 50%;
		margin-top: calc(-200 * var(--vw-ratio));
		margin-left: calc(-550 * var(--vw-ratio));
		z-index: 3;
	}
@media screen and (max-width: 767px) {
	#mobility {
		background: #FFFFC8 url("../img/mobility_bg.webp") no-repeat left 30% top 20% / 220%;
	}
		#mobility .leaf01 {
			width: 100%;
			top: calc(80 * var(--vw-ratio));
			left: calc(-40 * var(--vw-ratio));
		}
		#mobility .leaf02 {
			width: 60%;
			top: 50%;
			right: calc(90 * var(--vw-ratio));
		}
		#mobility .leaf03 {
			width: 60%;
			bottom: calc(-70 * var(--vw-ratio));
			right: calc(-70 * var(--vw-ratio));
			z-index: -1;
		}

		#mobility .pht01 {
			width: 90%;
			top: auto;
			bottom: calc(-20 * var(--vw-ratio));
			left: calc(-50 * var(--vw-ratio));
			margin-top: 0;
			margin-left: 0;
		}
		#mobility .pht02 {
			width: 70%;
			top: 50%;
			left: auto;
			right: calc(10 * var(--vw-ratio));
			margin-top: calc(-300 * var(--vw-ratio));
			margin-left: 0;
		}
}


	
	
/* medical-health
--------------------- */
#medical-health {
	background: #B6F2DF url("../img/medical-health_bg.webp") no-repeat center / 100%;
	z-index: 4;
}
	#medical-health .leaf01 {
		width: calc(254 * var(--vw-ratio));
		bottom: calc(130 * var(--vw-ratio));
		left: calc(-30 * var(--vw-ratio));
		z-index: 1;
	}
	#medical-health .leaf02 {
		width: calc(315 * var(--vw-ratio));
		top: calc(5 * var(--vw-ratio));
		left: 50%;
		margin-left: calc(-70 * var(--vw-ratio));
		z-index: 1;
	}

	#medical-health .pht01 {
		width: calc(904 * var(--vw-ratio));
		top: 50%;
		left: 50%;
		margin-top: calc(-300 * var(--vw-ratio));
		margin-left: calc(-300 * var(--vw-ratio));
		z-index: 1;
	}
	#medical-health .pht02 {
		width: calc(450 * var(--vw-ratio));
		top: calc(80 * var(--vw-ratio));
		left: calc(50 * var(--vw-ratio));
		z-index: 0;
	}
@media screen and (max-width: 767px) {
	#medical-health {
		background: #B6F2DF url("../img/medical-health_bg.webp") no-repeat center top 30% / 200%;
	}
		#medical-health .leaf01 {
			width: 35%;
			bottom: calc(130 * var(--vw-ratio));
			left: calc(-30 * var(--vw-ratio));
		}
		#medical-health .leaf02 {
			width: 55%;
			top: calc(-20 * var(--vw-ratio));
			left: calc(-40 * var(--vw-ratio));
			margin-left: 0;
		}

		#medical-health .pht01 {
			width: 70%;
			top: 50%;
			left: auto;
			right: calc(20 * var(--vw-ratio));
			margin-top: calc(-350 * var(--vw-ratio));
			margin-left: 0;
		}
		#medical-health .pht02 {
			width: 60%;
			top: 50%;
			left: calc(-10 * var(--vw-ratio));
			margin-top: calc(-40 * var(--vw-ratio));
		}
}


	
	
/* food
--------------------- */
#food {
	background: #FFEAB2;
	z-index: 5;
}
	#food .leaf01 {
		width: calc(422 * var(--vw-ratio));
		top: calc(-80 * var(--vw-ratio));
		right: calc(-40 * var(--vw-ratio));
		z-index: 1;
	}

	#food .pht01 {
		width: calc(380 * var(--vw-ratio));
		top: calc(80 * var(--vw-ratio));
		left: calc(50 * var(--vw-ratio));
		z-index: 0;
	}
	#food .pht02 {
		width: calc(1080 * var(--vw-ratio));
		top: calc(80 * var(--vw-ratio));
		left: 50%;
		margin-left: calc(-550 * var(--vw-ratio));
		z-index: 1;
	}
@media screen and (max-width: 767px) {
	#food .leaf01 {
		width: 70%;
		top: calc(-80 * var(--vw-ratio));
		right: calc(-60 * var(--vw-ratio));
		z-index: 1;
	}

	#food .pht01 {
		width: 55%;
		top: auto;
		bottom: calc(180 * var(--vw-ratio));
		left: calc(-20 * var(--vw-ratio));
		z-index: 2;
	}
	#food .pht02 {
		width: 110%;
		top: calc(160 * var(--vw-ratio));
		left: calc(30 * var(--vw-ratio));
		margin-left: 0;
		z-index: 1;
	}
}


	
	
/* recommend
--------------------- */
#recommend {
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: none;
	z-index: 6;
}
	#recommend h2 {
		font-size: calc(77 * var(--vw-ratio));
		font-weight: 500;
		color: #B9B9B9;
		text-align: center;
		line-height: 1.3em;
		padding-top: calc(100 * var(--vw-ratio));
		position: relative;
		z-index: 2;
	}

	#recommend .list {
		width: 100%;
		padding: 0 calc(15 * var(--vw-ratio));
		position: relative;
		z-index: 2;
	}
		#recommend .list a.linkbox {
			width: 24.5%;
			display: block;
			position: relative;
   			pointer-events: none;
		}
			#recommend .list a.linkbox .text {
				width: 86%;
				border-radius: calc(20 * var(--vw-ratio)) calc(20 * var(--vw-ratio)) 0 0;
				padding: calc(40 * var(--vw-ratio)) calc(40 * var(--vw-ratio)) 0 calc(40 * var(--vw-ratio));
				background: #fff;
				position: absolute;
				bottom: calc(-20 * var(--vw-ratio));
				left: 7%;
			}
				#recommend .list a.linkbox .text .number {
					font-size: calc(30 * var(--vw-ratio));
					font-weight: 500;
					line-height: 1;
					color: #8FCF3E;
					position: absolute;
					top: calc(-13 * var(--vw-ratio));
					left: calc(40 * var(--vw-ratio));
				}

				#recommend .list a.linkbox .text .head {
					font-weight: 500;
					line-height: 1;
					padding-left: calc(15 * var(--vw-ratio));
					margin-bottom: calc(12 * var(--vw-ratio));
					position: relative;
				}
				#recommend .list a.linkbox .text .head:before {
					content: "";
					width: calc(8 * var(--vw-ratio));
					height: calc(8 * var(--vw-ratio));
					border-radius: 50%;
					background: #8FCF3E;
					position: absolute;
					top: calc(2 * var(--vw-ratio));
					left: 0;
				}

				#recommend .list a.linkbox .text h3 {
					height: calc(75 * var(--vw-ratio));
					font-size: calc(22 * var(--vw-ratio));
					font-weight: 500;
					line-height: 1.3em;
				}

				#recommend .list a.linkbox .text .more {
					width: calc(150 * var(--vw-ratio));
					height: calc(40 * var(--vw-ratio));
					border-radius: calc(20 * var(--vw-ratio));
					background: #8FCF3E;
					color: #fff;
					text-align: center;
					line-height: calc(42 * var(--vw-ratio));
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#recommend .list a.linkbox:hover .text .more {
					background: #008900;
					letter-spacing: 0.06em;
				}
@media screen and (max-width: 767px) {
	#recommend {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
	}
		#recommend h2 {
			font-size: calc(46 * var(--vw-ratio));
			padding-left: calc(20 * var(--vw-ratio));
			text-align: center;
			line-height: 1.1em;
			padding-top: calc(80 * var(--vw-ratio));
			margin-bottom: calc(20 * var(--vw-ratio));
		}

		#recommend .list {
			display: block;
		}
			#recommend .list a.linkbox {
				width: 100%;
				margin-bottom: calc(60 * var(--vw-ratio));
			}
				#recommend .list a.linkbox .text h3 {
					height: calc(75 * var(--vw-ratio));
				}
				#recommend .list a.linkbox .text .more {
					margin: 0 auto;
				}

				#recommend .list .swiper-button-prev {
					width: calc(46 * var(--vw-ratio));
					height: calc(46 * var(--vw-ratio));
					background: url("../img/btn_arrow_prev.svg") no-repeat center / 100%;
					border-radius: 50%;
					top: auto;
					bottom: calc(-80 * var(--vw-ratio));
					left: auto;
					right: calc(75 * var(--vw-ratio));
					margin: 0;
				}
				#recommend .list .swiper-button-prev:after {
					display: none;
				}

				#recommend .list .swiper-button-next {
					width: calc(46 * var(--vw-ratio));
					height: calc(46 * var(--vw-ratio));
					background: url("../img/btn_arrow_next.svg") no-repeat center / 100%;
					border-radius: 50%;
					top: auto;
					bottom: calc(-80 * var(--vw-ratio));
					left: auto;
					right: calc(20 * var(--vw-ratio));
					margin: 0;
				}
				#recommend .list .swiper-button-next:after {
					display: none;
				}

		#recommend .txt-en {
			position: static;
		}
}