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

/*=============================
  main
=============================*/
#main{
	padding-top: 55px;
	position: relative;
}
#main::after{
	content: '';
	display: block;
	width: 100%;
	height: 350px;
	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.3rem;
	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.25em;
	width: calc(100% - 0.5em);
	height: 10px;
	background: #d1edf5;
	isolation: isolate;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
	z-index: -1;
}


#main .aniArea{
	height: 540px;
	position: relative;
	margin-top: 25px;
	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% + 145px);
	width: 50px;
	height: 50px;
	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: 350px;
	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:-170px;
	left:calc(50% - 370px);
	width: 740px;
	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: 45px 25px 125px;
}
#bloc01 img.mori{
	position: absolute;
	top:-65px;
	left:calc(50% - 162px);
	width: 325px;
	height: auto;
	z-index: 0;
}
#bloc01 .ie{
	position: absolute;
	top:-185px;
	left:calc(50% - 110px);
	width: 240px;
	height: 202px;
	z-index: 1;
}

#bloc01 > .inner{
}
#bloc01 .box{
	position: relative;
}
#bloc01 .box02{margin-top: 40px;}

#bloc01 .box .txtArea{
	position: relative;
}
#bloc01 .box .txtArea .titArea{
	position: relative;
	z-index: 1;
}
#bloc01 .box02 .txtArea .titArea{
	left:25px;
}
#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.19rem;
	letter-spacing: 0.05em;
}

#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: -10px;}
#bloc01 .box .txtArea .titArea ul.titList li span{
	display: inline-block;
}
#bloc01 .box .txtArea .titArea ul.titList_ye li{
	padding: 2px;
}
#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 + 2px) calc(0.5em + 2px) calc(0.5em + 2px) calc(1em + 2px);
	isolation: isolate;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
}
#bloc01 .box .txtArea .titArea ul.titList_ye li:nth-child(even){padding-left: calc(1em + 2px);}
#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: 7px;
	border-radius: 7px;
	z-index: 1;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 0);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4) 3px );
}
#bloc01 .box .txtBox .txt{
	position: relative;
	z-index: 2;
	background: #FFF;
	isolation: isolate;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	padding: 15px 20px;
	font-size: 0.16rem;
	letter-spacing: 0.05em;
	line-height: 1.75;
	position: relative;
}


#bloc01 .box img.tree{
	position: absolute;
	z-index: 20;
}
#bloc01 .box01 img.tree01{
	top:130px;
	left:-10px;
	width: 25px;
	height: auto;
}
#bloc01 .box01 img.tree02{
	bottom:-25px;
	left:-20px;
	width: 42px;
	height: auto;
}
#bloc01 .box01 img.tree03{
	bottom:220px;
	right:0px;
	width: 40px;
	height: auto;
}
#bloc01 .box02 img.tree04{
	bottom:-37.5px;
	right:5px;
	width: 63px;
	height: auto;
}
#bloc01 .box02 img.tree05{
	bottom:-92px;
	left:-10px;
	width: 33px;
	height: auto;
}


#bloc01 .box02 img.pic03 {
	position: absolute;
	top:-128px;
	left:calc(50% + 50px);
	width: 82.5px;
	height: auto;
	z-index: 10;
}


#bloc01 .box01 .pic01,
#bloc01 .box02 .pic02{
	position: relative;
	z-index: 10;
}
#bloc01 .box01 .pic01{
	aspect-ratio: 520/370;
	width: 68vw;
	margin-left: auto;
	margin-right: auto;
	bottom:-10px;
}
#bloc01 .box02 .pic02{
	aspect-ratio: 900/770;
	width: 56.6vw;
	left:calc(50% - 150px);
	top: -8px;
}


#bloc01 .car{
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 50px;
	z-index: 20;
}
#bloc01 .car img{
	position: absolute;
	bottom:0;
	left:100%;
	width: 92.5px;
	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: 40px 0 25px;
}
#bloc02 > .inner{
	position: relative;
}
#bloc02 h2{
	text-align: center;
	font-size: 0.22rem;
	letter-spacing: 0.05em;
}
#bloc02 h2 span.sp_bg{
	display: inline-block;
	position: relative;
	padding: 0.15em 0 0.2em;
}
#bloc02 h2 span.sp_bg:nth-of-type(2){
	padding: 0.15em 0 0.25em 0.5em;
	margin-top: 0.5em;
}
#bloc02 h2 span.sp_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: 3px;
	border-radius: 3px;
}

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

#bloc02 img.pic01,
#bloc02 img.pic02{
	position: absolute;
}
#bloc02 img.pic01{
	width: 68px;
	height: auto;
	right:calc(50% + 97px);
	top:70px;
}
#bloc02 img.pic02{
	width: 61px;
	height: auto;
	left:calc(50% + 92.5px);
	top:75px;
}


#bloc02 .prof{
	justify-content: flex-end;
	align-items: center;
	margin-top: 45px;
	padding-right: 35px;
}
#bloc02 .prof .name{
	padding-top: 2em;
	margin-right: 0.5em;
}
#bloc02 .prof .name span{
	display: block;
	text-align: center;
}
#bloc02 .prof .name span.fs{
	font-size: 0.12rem;
	letter-spacing: 0.025em;
}
#bloc02 .prof .name span.fl{
	font-size: 0.17rem;
	letter-spacing: 0.025em;
	margin-top: 0.5em;
}
#bloc02 .prof img{
	width: 175px;
	height: auto;
}


/* bloc03
=============================*/
#bloc03{
	padding: 70px 25px 215px;
	background: #6ED3E0;
	position: relative;
}
#bloc03::before{
	content: '';
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 180px;
	background: url(../img/top/bloc03_kumo.svg) top left -100px /auto 175%;
}


#bloc03 .btList li:nth-child(n+2){
	margin-top: 25px;
}
#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: 20px 0;
	display: grid;
	place-content: center;
}
#bloc03 .btList li a.vmg_c{
	height: 130px;
}
/*
#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.15rem;
	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.22rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
}
#bloc03 .btList li a .copy .bg{
	text-decoration: underline;
	text-underline-offset: -1em;
	text-decoration-thickness: calc(1em + 7px);
	text-decoration-color: #f7b149;
}


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

#bloc03 .btList li a .pic01{
	top:-50px;
	left:calc(50% + 57px);
	width: 117px;
	height: 97px;
}
#bloc03 .btList li a .pic01 img{
	top:unset;
	bottom:0;
}

#bloc03 .btList li a .pic02{
	top:-24px;
	left:calc(50% + 85px);
	width: 75px;
	height: 95px;
}
#bloc03 .btList li a .pic03{
	top:-42px;
	left:calc(50% + 50px);
	width: 73px;
	height: 90px;
}
#bloc03 .btList li a .pic04{
	top:-23px;
	right:calc(50% + 135px);
	width: 55px;
	height: 153px;
}
#bloc03 .btList li a .pic04_3{
	top:-17px;
	left:calc(50% + 14px);
	width: 80px;
	height: 52px;
}
#bloc03 .btList li a .pic04_4{
	bottom:-10px;
	right:0;
	width: 41px;
	height: auto;
}
#bloc03 .btList li a .pic05{
	bottom:-11px;
	left:calc(50% + 86.5px);
	width: 86.5px;
	height: 70px;
}
#bloc03 .btList li a .pic05_3{
	top:-17.5px;
	right:calc(50% + 65px);
	width: 80px;
	height: auto;
}