@charset "utf-8";
body#main {background:#F1F8D9;}

#contents {background:#90C57C;}

.visual {position:relative; display:flex; flex-wrap:wrap; justify-content:center; padding:50px 0; background:#F1F8D9; overflow:hidden;}
.visual:after {display:block; content:""; position:absolute; left:-45px; right:-45px; bottom:-100px; height:280px; border-radius:100% 100% 0 0; background:#90C57C; z-index:0;}
.tree {position:absolute; left:350px; bottom:140px; width:151px; height:133px; background:url('/trail/img/main/tree.png') no-repeat center bottom; z-index:1;}
.s_tower {position:absolute; left:50px; bottom:40px; width:282px; height:532px; background:url('/trail/img/main/s_tower.png') no-repeat center bottom; z-index:1;}
.ginkgo {position:absolute; left:-200px; bottom:70px; width:759px; height:517px; background:url('/trail/img/main/main_tree.png') no-repeat center bottom; background-size:100%; z-index:1;}
.people1 {position:absolute; left:580px; bottom:50px; width:135px; height:163px; background:url('/trail/img/main/people1.png') no-repeat center bottom; z-index:1; animation:people 3s infinite;}
@keyframes people {
	0% {transform:rotate(0deg);}
	20% {transform:rotate(5deg);}
	40% {transform:rotate(0deg);}
	60% {transform:rotate(5deg);}
	80% {transform:rotate(0deg);}
}
.windmill {position:absolute; right:20px; bottom:90px; width:246px; height:319px; background:url('/trail/img/main/windmill.png') no-repeat center bottom; z-index:1;}
.windmill_fan {position:absolute; left:0; top:0; width:246px; height:246px; background:url('/trail/img/main/windmill_fan.png') no-repeat center center; animation:windmill 6s infinite linear;}
@keyframes windmill {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
.people2 {position:absolute; right:230px; bottom:40px; width:311px; height:148px; background:url('/trail/img/main/people2.png') no-repeat center bottom; z-index:1;}


.slogan {padding-top:100px; z-index:2;}
.slogan_e {font-size:18px; color:#359D5F; font-weight:bold; letter-spacing:0;}
.slogan_ttl {width:475px; margin:10px 0 40px; padding-bottom:23%; background:url('/trail/img/inc/slogan.png') no-repeat; background-size:100%;}
.slogan_txt {margin-left:20px; font-size:18px; line-height:170%; color:#666;}
.map {position:relative; width:700px; height:750px; background:url('/trail/img/main/map.png?v2024') no-repeat; z-index:2;}

.map_course1 {position:absolute; right:43px; top:72px; width:310px; height:167px;}
.map_course1.on {background:url('/trail/img/main/map_course1_on.png') no-repeat;}
.map_course2 {position:absolute; right:43px; top:149px; width:323px; height:282px;}
.map_course2.on {background:url('/trail/img/main/map_course2_on.png?v2024') no-repeat;}
.map_course3 {position:absolute; right:113px; bottom:26px; width:385px; height:348px;}
.map_course3.on {background:url('/trail/img/main/map_course3_on.png?v2024') no-repeat;}
.map_course4 {position:absolute; left:202px; bottom:128px; width:221px; height:175px;}
.map_course4.on {background:url('/trail/img/main/map_course4_on.png') no-repeat;}

.map a span {display:none;}
.map a.on span {position:absolute; display:block; text-align:center; width:65px; height:65px; padding-top:15px; font-weight:bold; font-size:14px; line-height:125%; border-radius:50%; background:#fff; animation:map_spot 1s infinite;}
.map_course1.on span {right:35px; top:-50px; color:#EF9600;}
.map_course2.on span {right:60px; top:-90px; color:#4EB7E9;}
.map_course3.on span {right:80px; top:-20px; color:#BF3629;}
.map_course4.on span {right:120px; top:-80px; color:#EC6800;}
.map a.on span:after {content:""; position:absolute; left:-10px; top:-10px; width:89px; height:124px; background:url('/trail/img/main/map_location_on.png') no-repeat;}
.map_course1.on span:after {filter:invert(59%) sepia(28%) saturate(6410%) hue-rotate(13deg) brightness(108%) contrast(101%);}
.map_course2.on span:after {filter:invert(65%) sepia(64%) saturate(559%) hue-rotate(169deg) brightness(92%) contrast(99%);}
.map_course3.on span:after {filter:invert(35%) sepia(29%) saturate(2698%) hue-rotate(332deg) brightness(83%) contrast(104%);}
.map_course4.on span:after {filter:invert(55%) sepia(44%) saturate(6673%) hue-rotate(5deg) brightness(97%) contrast(101%);}
@keyframes map_spot {
	0% {transform:translateY(0);}
	50% {transform:translateY(5px);}
	0% {transform:translateY(0);}
}
.map_mb {display:none;}
/*motion*/
.slogan_e {opacity:0; transform:translateX(10px); transition:1s;}
.slogan_ttl {opacity:0; transform:translateX(10px); transition:1s .2s;}
.slogan_txt {opacity:0; transform:translateX(10px); transition:1s .5s;}
body.on .slogan_e,
body.on .slogan_ttl,
body.on .slogan_txt {opacity:1; transform:translateX(0);}

.notice {position:relative; display:flex; justify-content:space-between; align-items:center; padding:20px 35px; border-radius:15px; border:2px solid #fff; z-index:1;}
.notice_ttl {flex-shrink:0; width:220px; padding-left:40px; font-size:22px; color:#fff; background:url('/trail/img/main/notice_ttl.png') no-repeat left center; background-size:24px;}
.notice_list {display:flex; flex:1 1 auto; min-width:0;}
.notice_list>li {width:50%;}
.notice_list>li>a {position:relative; display:block; padding-left:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.notice_list>li>a:before {content:""; position:absolute; left:0; top:10px; width:3px; height:3px; background:#fff;}
.notice_more {position:relative; flex-shrink:0; width:25px; height:18px;}
.notice_more:after {display:block; content:''; position:absolute; left:0; top:8px; width:100%; height:2px; border-radius:6px; background:#fff; box-shadow:0px -7px 0px #fff, 0px 7px 0px #fff}

.stamp {position:relative; margin-top:15px;}
.stamp:before {content:""; position:absolute; left:50%; top:-60px; margin-left:-500px; width:230px; height:230px; background:url('/trail/img/main/stamp1.png') no-repeat; background-size:100%; z-index:0;}
.stamp>a {display:block; text-align:center; padding:50px 20px; border-radius:15px; color:#fff; background:#EF9600; transition:.5s;}
.stamp>a:hover {color:#f4e2af; text-decoration:none;}
.stamp_ttl {font-size:32px; font-weight:bold;}
.stamp_txt {margin-top:10px;}
.stamp_img {position:absolute; right:50%; bottom:20px; margin-right:-400px; transform:translateY(-15px); transition:.6s; z-index:1;}
.stamp>a:hover .stamp_img {transform:translateY(0);}
.stamp_img2 {position:absolute; right:50%; bottom:-20px; margin-right:-450px; opacity:0; transition-duration:.3s; transition-delay:.3s; z-index:0;}
.stamp>a:hover .stamp_img2 {opacity:1;}

footer {position:relative; background:#90C57C;}
footer:before {content:""; position:absolute; left:0; bottom:0; width:348px; height:383px; background:url('/trail/img/main/nd_logo_w.png') no-repeat left bottom; z-index:0;}
footer:after {content:""; position:absolute; right:0; bottom:0; width:442px; height:457px; background:url('/trail/img/main/y_tower.png') no-repeat right bottom;}

#layerpop {position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); z-index:99999;}
#layerpop .popup {position:absolute; left:50%; top:50%; font-size:0; transform:translate(-50%, -50%); overflow:hidden; border-radius:20px; box-shadow:0 5px 12px rgba(0,0,0,.25); background:#110c51;}
#layerpop .popup p {overflow:hidden; border-radius:0 0 20px 20px;}
#layerpop .closed {position:absolute; display:block; right:0; top:0; width:70px; height:70px; border-radius:0 0 0 20px; overflow:hidden; border:0; text-indent:-5000px; background:rgba(0,0,0,.6); cursor:pointer;}
#layerpop .closed:after,
#layerpop .closed:before{position:absolute; left:35px; top:15px; width:1px; height:40px; background:#fff; transform:rotate(45deg); content:"";}
#layerpop .closed:before{transform:rotate(-45deg);}
#layerpop .popClose {text-align:right; padding:10px 20px; font-size:16px; color:#fff;}
#layerpop .popClose * {vertical-align:middle;}

.quicklink {margin-top:54px; display:flex; opacity:0; transform:translateX(10px); transition:1s .9s;}
.quicklink li {margin-right:16px;}
.quicklink li a {display:block; text-align:center; padding:19px 10px; padding-top:115px; width:184px; font-size:1.1rem; font-weight:600; border-radius:15px; background:#fff no-repeat; box-shadow:2px 5px 0 rgba(0,0,0,.15); transition:.5s;}
.quicklink li.ic01 a {background-image:url('/trail/img/main/qlink01.png'); background-position:center 33px;}
.quicklink li.ic02 a {background-image:url('/trail/img/main/qlink02.png'); background-position:center 19px;}
.quicklink li a:hover,
.quicklink li a:focus {transform:translateY(-10px);}
body.on .quicklink {opacity:1; transform:translateX(0);}

/*small_pc*/
@media screen and (max-width:1440px){
	.people1 {display:none;}
	.people2 {right:5%;}
}

/*small_pc2*/
@media screen and (max-width:1180px){
	.slogan {padding-top:14%;}
	.slogan_txt {display:none;}
	.s_tower {left:5%; bottom:10px; max-width:22%; background-size:100%;}
	.ginkgo {left:-10%; bottom:10%; max-width:50%;}
	.tree {left:27%; bottom:13%; max-width:15%; background-size:100%;}
	.windmill {display:none;}
	.people2 {bottom:4%; max-width:40%; background-size:100%;}
}


/*tablet*/
@media screen and (max-width:800px){
	.visual:after {height:30%;}
	.slogan {max-width:75%;}
	.slogan_ttl {max-width:100%; margin-bottom:12%; background-size:100%;}
	.map {display:none;}
	.map_mb {display:block; width:90%; padding:10px 20px; margin:0 auto 30%; border-radius:15px; background:#fff; z-index:3;}
	.map_mb>ul>li {position:relative; padding:15px 5px;}
	.map_mb>ul>li:nth-of-type(n+2) {border-top:1px solid #eaeaea;}
	.map_ttl {font-size:14px; font-weight:bold;}
	.course1 .tag {color:#EF9600;}
	.course2 .tag {color:#4EB7E9;}
	.course3 .tag {color:#BF3629;}
	.course4 .tag {color:#EC6800;}
	.map_txt {margin-top:5px; font-size:13px;}
	.map_mb a {position:absolute; right:0; top:15px; display:block; text-align:center; width:40px; height:40px; line-height:40px; border-radius:50%; color:#fff; font-weight:bold; font-size:14px; letter-spacing:0;}
	.course1 a {background:#EF9600;}
	.course2 a {background:#4EB7E9;}
	.course3 a {background:#BF3629;}
	.course4 a {background:#EC6800;}


	.notice_ttl {width:150px;}
	.notice_list>li {width:100%;}
	.notice_list>li:nth-of-type(n+2) {display:none;}

	.stamp:before {left:3%; top:-30px; margin-left:0; max-width:35%; background-size:100%;}
	.stamp_img {display:none;}
	.stamp_img2 {right:0; max-width:35%; margin-right:0; background-size:100%; opacity:1;}

	footer:before {left:-50px; width:200px; background-size:100%;}
	.quicklink {margin:0 -8% 20px; justify-content:space-between;}
	.quicklink li {margin-right:0; width:calc(50% - 10px);}
	.quicklink li a {width:100%; font-size:1rem;}
	.quicklink li a:hover, .quicklink li a:focus {transform:translateY(0);}
}


@media screen and (max-width:600px){
	.notice {padding:15px 20px;}
	.notice_ttl {width:24px; height:24px; text-indent:-100%; font-size:0; line-height:0; overflow:hidden;}
	.notice_list>li>a {padding-left:0; font-size:14px;}
	.notice_list>li>a:before {display:none;}

	.stamp {margin-top:10px;}
	.stamp>a {padding:40px 20px;}
	.stamp_ttl {position:relative; font-size:22px; z-index:1;}
	.stamp_txt {display:none;}

	footer:before {display:none;}
}