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

/*=============================
  main
=============================*/
#main{
	padding-top: 45px;
	position: relative;
}
#main::after{
	content: '';
	display: block;
	width: 100%;
	height: 550px;
	background: url(../img/top/main_awa.svg) repeat-x bottom center/auto 100%;
	position: absolute;
	bottom:0;
	left:0;
}
#main h1{
	text-align: center;
	font-size: 0.54rem;
	letter-spacing: 0.05em;
	color: var(--ELITE-NBLUE);
	position: relative;
	z-index: 10;
}
#main h1 span.bb{
	display: inline-block;
	padding-left: 0.5em;
	position: relative;
	padding-bottom: 0.2em;
	position: relative;
}
#main h1 span.bb:nth-of-type(n+2){
	margin-top: 0.5em;
}
#main h1 span.bb::before{
	content: '';
	display: block;
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 20px;
	background: #d1edf5;
	isolation: isolate;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
	z-index: -1;
}


#main .aniArea{
	height: 840px;
	position: relative;
	margin-top: 20px;
	user-select: none; /* CSS3 */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
}
#main .aniArea .ani_sun{
	position: absolute;
	top:0;
	right: calc(50% + 300px);
	width: 100px;
	height: 100px;
	animation: rotateAni 72s steps(144, end) 0s infinite;
}
#main .aniArea .ani_sun img{
	width: 100%;
	height: auto;
}
#main .aniArea .ani_walk{z-index: 1;}
#main .aniArea .ani_walk img{
	position: absolute;
	top:0;
	left:50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100%;
	max-width: 685px;
	height: auto;
}
#main .aniArea .ani_chikyu{
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
#main .aniArea .ani_chikyu img{
	position: absolute;
	bottom:-580px;
	left:calc(50% - 740px);
	width: 1480px;
	height: auto;
	/*animation: rotateAni 36s step-end 0s infinite;*/
	animation: rotateAni 72s steps(144, end) 0s infinite;
	/*animation: rotateAni 36s linear 0s infinite normal both;*/
}

@-webkit-keyframes rotateAni {
	0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes         rotateAni {
	0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}


/* bloc01
=============================*/
#bloc01{
	background: #079d71;
	position: relative;
	padding: 80px 20px 170px;
}
#bloc01 img.mori{
	position: absolute;
	top:-130px;
	left:calc(50% - 90px);
	width: 650px;
	height: auto;
	z-index: 0;
}
#bloc01 .ie{
	position: absolute;
	top:-375px;
	left:calc(50% + 15px);
	width: 480px;
	height: 405px;
	z-index: 1;
}

#bloc01 > .inner{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#bloc01 .box{
	position: relative;
}
#bloc01 .box02{margin-top: 100px;}

#bloc01 .box .txtArea{
	position: relative;
}
#bloc01 .box:nth-of-type(odd) > .txtArea{
	padding-right: 48.5%;
}
#bloc01 .box:nth-of-type(even) > .txtArea{
	padding-left: 48.5%;
}

#bloc01 .box .txtArea .titArea{
	position: relative;
	z-index: 1;
}
#bloc01 .box02 .txtArea .titArea{
	left:-95px;
}
#bloc01 .box .txtArea .titArea ul.titList{
	top:0;
	left:0;
}
#bloc01 .box .txtArea .titArea ul.titList_ye{
	position: relative;
	z-index: 10;
}
#bloc01 .box .txtArea .titArea ul.titList_w{
	position: absolute;
	z-index: 9;
}
#bloc01 .box .txtArea .titArea ul.titList li{
	font-size: 0.38rem;
	letter-spacing: 0.05em;
	width: 625px;
}

#bloc01 .box .txtArea .titArea ul.titList li:nth-child(2),
#bloc01 .box .txtArea .titArea ul.titList li:nth-child(3),
#bloc01 .box .txtArea .titArea ul.titList li:nth-child(4){margin-top: -20px;}
#bloc01 .box .txtArea .titArea ul.titList li span{
	display: inline-block;
}
#bloc01 .box .txtArea .titArea ul.titList_ye li{
	padding: 4px;
}
#bloc01 .box .txtArea .titArea ul.titList_ye li span{
	background: #FBED21;
	padding: 0.5em 0.5em 0.5em 1em;
	isolation: isolate;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
}
#bloc01 .box .txtArea .titArea ul.titList_w li span{
	background: #FFF;
	padding: calc(0.5em + 4px) calc(0.5em + 4px) calc(0.5em + 4px) calc(1em + 4px);
	isolation: isolate;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
}
#bloc01 .box .txtArea .titArea ul.titList_ye li:nth-child(even){padding-left: calc(1em + 4px);}
#bloc01 .box .txtArea .titArea ul.titList_w  li:nth-child(even){padding-left: 1em;}

#bloc01 .box .txtBox {position: relative;z-index: 0;}
#bloc01 .box .txtBox::before{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top:10px;
	left:10px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	z-index: 1;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 0);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.4) 4px, rgba(255, 255, 255, 0.4) 6px );
}
#bloc01 .box .txtBox .txt{
	position: relative;
	z-index: 2;
	background: #FFF;
	isolation: isolate;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	padding: 45px 35px 35px;
	font-size: 0.17rem;
	letter-spacing: 0.05em;
	line-height: 1.9;
	margin-top: -20px;
	position: relative;
}


#bloc01 .box img.tree{
	position: absolute;
	z-index: 20;
}
#bloc01 .box01 img.tree01{
	top:-50px;
	left:-120px;
	width: 60px;
	height: auto;
}
#bloc01 .box01 img.tree02{
	bottom:-10px;
	left:-70px;
	width: 85px;
	height: auto;
}
#bloc01 .box01 img.tree03{
	bottom:-120px;
	right:-150px;
	width: 80px;
	height: auto;
}
#bloc01 .box02 img.tree04{
	bottom:20px;
	right:-110px;
	width: 125px;
	height: auto;
}
#bloc01 .box02 img.tree05{
	bottom:-130px;
	left:-65px;
	width: 65px;
	height: auto;
}


#bloc01 .box02 img.pic03 {
	position: absolute;
	bottom:-55px;
	left:-160px;
	width: 165px;
	height: auto;
	z-index: 10;
}


#bloc01 .box01 .pic01,
#bloc01 .box02 .pic02{
	position: absolute;
	z-index: 10;
}
#bloc01 .box01 .pic01{
	aspect-ratio: 520/370;
	width: 52%;
	bottom:-60px;
	right:-11%;
}
#bloc01 .box02 .pic02{
	aspect-ratio: 900/770;
	width: 46%;
	bottom: -25px;
	left:-10%;
}


#bloc01 .car{
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 100px;
	z-index: 20;
}
#bloc01 .car img{
	position: absolute;
	bottom:0;
	left:100%;
	width: 186px;
	height: auto;
	animation: carAni 7.5s steps(100, end) 0s infinite;
	/*animation: carAni 5s linear 0s 1 normal both;*/
	
}
@-webkit-keyframes carAni {
	0% {left: 100%;}
	100% {left: /*-186px*/-100%;}
}
@keyframes         carAni {
	0% {left: 100%;}
	100% {left: /*-186px*/-100%;}
}

/* bloc02
=============================*/
#bloc02{
	position: relative;
	padding: 100px 20px 85px;
}
#bloc02 > .inner{
	position: relative;
	padding-bottom: 140px;
}
#bloc02 h2{
	text-align: center;
	font-size: 0.38rem;
	letter-spacing: 0.05em;
}
#bloc02 h2 span.pc_bg{
	display: inline-block;
	position: relative;
	padding: 0.15em 0.25em 0.15em 0;
}
#bloc02 h2 span.pc_bg::before{
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background: rgba(89,197,230,0.43);
	z-index: -1;
	isolation: isolate;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#bloc02 .txt{
	text-align: center;
	font-size: 0.16rem;
	letter-spacing: 0.025em;
	line-height: 2.5;
	margin-top: 3em;
}

#bloc02 img.pic01,
#bloc02 img.pic02{
	position: absolute;
}
#bloc02 img.pic01{
	width: 135px;
	height: auto;
	right:calc(50% + 325px);
	top:75px;
}
#bloc02 img.pic02{
	width: 125px;
	height: auto;
	left:calc(50% + 305px);
	top:75px;
}


#bloc02 .prof{
	position: absolute;
	bottom:0;
	left:calc(50% + 10px);
	align-items: flex-end;
	width: 370px;
}
#bloc02 .prof .name{padding-bottom: 1em;}
#bloc02 .prof .name span{
	display: block;
	text-align: center;
}
#bloc02 .prof .name span.fs{
	font-size: 0.15rem;
	letter-spacing: 0.025em;
}
#bloc02 .prof .name span.fl{
	font-size: 0.24rem;
	letter-spacing: 0.025em;
	margin-top: 0.5em;
}
#bloc02 .prof img{
	width: 215px;
	height: auto;
	margin-left: auto;
}


/* bloc03
=============================*/
#bloc03{
	padding: 95px 20px 260px;
	background: #6ED3E0;
	position: relative;
}
#bloc03::before{
	content: '';
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 240px;
	background: url(../img/top/bloc03_kumo.svg) repeat-x top left/auto 175%;
}
#bloc03 > .inner{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}


#bloc03 .btList{
	flex-wrap: wrap;
	justify-content: space-between;
}
#bloc03 .btList li{
	width: 48.8%;
	position: relative;
}
#bloc03 .btList li:first-child{
	width: 100%;
}
#bloc03 .btList li:nth-child(n+2){
	margin-top: 30px;
}
#bloc03 .btList li:nth-child(1){z-index: 1;}
#bloc03 .btList li:nth-child(2){z-index: 3;}
#bloc03 .btList li:nth-child(3){z-index: 2;}
#bloc03 .btList li:nth-child(4){z-index: 5;}
#bloc03 .btList li:nth-child(5){z-index: 4;}
#bloc03 .btList li a{
	background: #FFF;
	isolation: isolate;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
	color: var(--ELITE-NBLUE);
	height: 100%;
	position: relative;
}
#bloc03 .btList li a:not(.vmg_c){
	padding: 35px 0 45px 60px;
	display: block;
}
#bloc03 .btList li:first-child a{
	padding: 30px 0 35px 70px;
}
/*
#bloc03 .btList li:first-child a{
	height: 160px;
}
#bloc03 .btList li:nth-child(n+2) a{
	height: 200px;
}
*/
#bloc03 .btList li a .pname{
	font-size: 0.2rem;
	letter-spacing: 0.05em;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--ELITE-NBLUE);
	margin-bottom: 0.65em;
}
#bloc03 .btList li a .copy{
	font-size: 0.3rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
}
#bloc03 .btList li:first-child a .copy{
	font-size: 0.36rem;
}
#bloc03 .btList li a .copy .bg{
	text-decoration: underline;
	text-underline-offset: -1em;
	text-decoration-thickness: calc(1em + 7px);
	text-decoration-color: #f7b149;
}
@media screen and (max-width: 1040px) {
	#bloc03 .btList li a:not(.vmg_c){
		padding: 3.36vw 0 4.3269vw 5.769vw;
	}
	#bloc03 .btList li:first-child a{
		padding: 2.88vw 0 3.36vw 6.7307vw;
	}
	#bloc03 .btList li a .pname{
		font-size: 1.923vw;
	}
	#bloc03 .btList li a .copy{
		font-size: 2.88vw;
	}
	#bloc03 .btList li:first-child a .copy{
		font-size: 3.46vw;
	}
}


#bloc03 .btList li a .pic{
	position: absolute;
}

#bloc03 .btList li a .pic01{
	bottom:0;
	right:-25px;
	width: 236px;
	height: 100%;
}
#bloc03 .btList li a .pic01 img{
	top:unset;
	bottom:0;
}

#bloc03 .btList li a .pic02{
	top:-10px;
	right:-15px;
	width: 150px;
	height: 100%;
}
#bloc03 .btList li a .pic03{
	top:0;
	right:-70px;
	width: 146px;
	height: 180px;
}
#bloc03 .btList li a .pic04{
	top:calc(50% - 140px);
	left:-75px;
	width: 110px;
	height: 306px;
}
#bloc03 .btList li a .pic04_3{
	top:-33px;
	left:calc(50% - 30px);
	width: 163px;
	height: auto;
}
#bloc03 .btList li a .pic04_4{
	bottom:-10px;
	right:0;
	width: 82px;
	height: auto;
}
#bloc03 .btList li a .pic05{
	bottom:-15px;
	right:-60px;
	width: 173px;
	height: 140px;
}
#bloc03 .btList li a .pic05_3{
	top:-45px;
	left:62px;
	width: 160px;
	height: auto;
}
@media screen and (max-width: 1040px) {
	#bloc03 .btList li a .pic01{
		right:-2.4vw;
		width: 22.7vw;
	}
	#bloc03 .btList li a .pic02{
		top:-1vw;
		right:-1.44vw;
		width: 14.4vw;
	}
	#bloc03 .btList li a .pic03{
		top:0;
		right:-6.73vw;
		width: 14vw;
		height: 17.3vw;
	}
	#bloc03 .btList li a .pic04{
		top:calc(50% - 13.46vw);
		left:-7.2vw;
		width: 10.57vw;
		height: 29.4vw;
	}
	#bloc03 .btList li a .pic04_3{
		top:-3.17vw;
		left:calc(50% - 2.88vw);
		width: 15.67vw;
		height: 9.9vw;
	}
	#bloc03 .btList li a .pic04_4{
		bottom:-1vw;
		right:0;
		width: 7.88vw;
		height: 12.3vw;
	}
	#bloc03 .btList li a .pic05{
		bottom:-1.44vw;
		right:-5.77vw;
		width: 16.6vw;
		height: 13.46vw;
	}
	#bloc03 .btList li a .pic05_3{
		top:-4.3vw;
		left:5.96vw;
		width: 15.38vw;
		height: 11.35vw;
	}
}