@charset "UTF-8";
/* CSS Document */
@import url(animate.css);
/* =============================================
share
================================================ */
a { color: #000000; }

a:hover { color: #777; }

/*a img {
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
		 -o-transition: 0.2s ease-in-out;
			transition: 0.2s ease-in-out;
	backface-visibility: hidden;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}*/
p, .text { line-height: 1.8; }

.center { margin: 0 auto; max-width: 920px; }

body { font-family: "Noto Sans JP", sans-serif; font-weight: 400; color: #333; }

@media screen and (min-width: 768px) { .ma100 { margin-bottom: 100px; }
  .ma90 { margin-bottom: 90px; }
  .ma80 { margin-bottom: 80px; }
  .ma70 { margin-bottom: 70px; }
  .ma60 { margin-bottom: 60px; }
  .ma55 { margin-bottom: 55px; }
  .ma50 { margin-bottom: 50px; }
  .ma45 { margin-bottom: 45px; }
  .ma40 { margin-bottom: 40px; }
  .ma35 { margin-bottom: 35px; }
  .ma35 { margin-bottom: 35px; }
  .ma30 { margin-bottom: 30px; }
  .ma25 { margin-bottom: 25px; }
  .ma20 { margin-bottom: 20px; }
  .ma15 { margin-bottom: 15px; }
  .ma10 { margin-bottom: 10px; } }
@media screen and (max-width: 767px) { .sp-ma90 { margin-bottom: 90px; }
  .sp-ma80 { margin-bottom: 80px; }
  .sp-ma70 { margin-bottom: 70px; }
  .sp-ma60 { margin-bottom: 60px; }
  .sp-ma55 { margin-bottom: 55px; }
  .sp-ma50 { margin-bottom: 50px; }
  .sp-ma45 { margin-bottom: 45px; }
  .sp-ma40 { margin-bottom: 40px; }
  .sp-ma35 { margin-bottom: 35px; }
  .sp-ma35 { margin-bottom: 35px; }
  .sp-ma30 { margin-bottom: 30px; }
  .sp-ma25 { margin-bottom: 25px; }
  .sp-ma20 { margin-bottom: 20px; }
  .sp-ma15 { margin-bottom: 15px; }
  .sp-ma10 { margin-bottom: 10px; } }
.pc-block { display: block; }
@media screen and (max-width: 767px) { .pc-block { display: none; } }

.sp-block { display: none; }
@media screen and (max-width: 767px) { .sp-block { display: block; } }

.text-center { text-align: center; }

.text-right { text-align: right; }

/**************************************** flex
*****************************************/
@media screen and (min-width: 768px) { .flex { display: flex; flex-wrap: wrap; align-items: flex-start; } }
@media screen and (max-width: 767px) { .sp-flex { display: flex; flex-wrap: wrap; align-items: flex-start; } }
@media screen and (min-width: 768px) { .flex-ce { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } }
@media screen and (max-width: 767px) { .sp-flex-ce { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } }
@media screen and (min-width: 768px) { .flex-mce { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } }
@media screen and (max-width: 767px) { .sp-flex-mce { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } }
@media screen and (min-width: 768px) { .flex-re { display: flex; flex-direction: row-reverse; } }
@media screen and (max-width: 767px) { .flex-re { display: flex; flex-direction: row-reverse; } }
@media screen and (min-width: 768px) { .flex-rt { display: flex; flex-direction: column-reverse; } }
@media screen and (max-width: 767px) { .sp-flex-rt { display: flex; flex-direction: column-reverse; } }
@media screen and (min-width: 768px) { .flex-r { display: flex; justify-content: flex-end; } }
@media screen and (max-width: 767px) { .sp-flex-r { display: flex; justify-content: flex-end; } }
/* =============================================
footer
================================================ */
#toTop { display: none; position: fixed; right: 0; z-index: 999; }
#toTop img { width: 100%; height: auto; }
@media screen and (min-width: 768px) { #toTop { bottom: 120px; width: 100px; } }
@media screen and (max-width: 767px) { #toTop { bottom: 30px; width: 70px; } }

#foot_area { position: relative; bottom: 0px; padding-top: 20px; z-index: 99; background: #81B327; line-height: 180%; }
@media screen and (max-width: 767px) { #foot_area { padding-left: 5%; padding-right: 5%; } }

#footer, #footer a { font-size: 14px; text-decoration: none; text-align: center; color: white; }

#footer span { font-size: 12px !important; }

#footer small { display: block; text-align: center; padding: 30px 0 20px; font-size: 12px; }

/* =============================================
loading
================================================ */
#loader-bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: white; z-index: 9999; transition: ease 1s; }
#loader-bg.remove { transform: translate(100%, 0); }
#loader-bg::after { content: ""; display: block; width: 40px; height: 40px; background: #eee; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; } }
/* =============================================
top
================================================ */
#sec0, #sec1, #sec2, #sec3, #sec4 { position: sticky; overflow: hidden; top: 0; height: 100vh; background: linear-gradient(#C0E4EF, #fff); }
#sec0 .tree, #sec1 .tree, #sec2 .tree, #sec3 .tree, #sec4 .tree { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; }
#sec0 .text, #sec1 .text, #sec2 .text, #sec3 .text, #sec4 .text { z-index: 9; font-weight: 700; }
#sec0 .cont, #sec1 .cont, #sec2 .cont, #sec3 .cont, #sec4 .cont { height: 100%; }

#sec1 .cont::after, #sec2 .cont::after, #sec3 .cont::after, #sec4 .cont::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; z-index: 2; background: #6DAE26; transition: ease .5s; opacity: 1; }
#sec1 .cont.animated::after, #sec2 .cont.animated::after, #sec3 .cont.animated::after, #sec4 .cont.animated::after { opacity: 0; }

@media screen and (min-width: 768px) { .blank { height: 50vh; } }
@media screen and (max-width: 767px) { .blank { height: 100vh; } }

#sec0 { background: #6DAE26; }
#sec0 .txt-ef.animated, #sec0 .txt-ef.animated::after { animation-duration: 2s; }
#sec0 .cont { display: flex; align-items: center; flex-wrap: wrap; align-content: center; }
#sec0 .text { width: 100%; color: #222; text-align: center; font-size: 1.3rem; }
#sec0 .text .en { font-size: 1.1rem; --animation-delay: var(--delay, 1s); }
#sec0 .text p { display: inline-block; }
#sec0 .logo .aniview { --animation-delay: var(--delay, 2s); }
@media screen and (min-width: 768px) { #sec0 .logo { margin-top: 150px; width: 270px; } }
@media screen and (max-width: 767px) { #sec0 .logo { width: 50vw; left: 5%; } }
#sec0 .scroll { position: absolute; bottom: 0; left: 50%; width: 231.5px; height: 203.5px; margin-left: -115px; animation-delay: 4s; }
@media screen and (max-width: 767px) { #sec0 .scroll { transform: scale(0.7); transform-origin: bottom center; } }
#sec0 .scroll.animated { opacity: 1; }
#sec0 .scroll img { width: 100%; height: auto; }
#sec0 .scroll a { display: block; position: absolute; bottom: 0; left: 50%; width: 231.5px; height: 203.5px; margin-left: -115px; }
#sec0 .scroll .bar { position: relative; width: 1px; height: 105px; margin: -40px auto -65px; }
#sec0 .scroll .bar::after { content: ""; width: 1px; height: 100%; position: absolute; background: black; transform-origin: top; animation: transformScroll 3s ease-in-out infinite; }
@keyframes transformScroll { 0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; } }
#sec1 { background: url(../img/p1_bg.jpg) no-repeat top right; background-size: cover; overflow: hidden; }
@media screen and (max-width: 767px) { #sec1 { background-position: center left; } }
#sec1 .tree { background-image: url(../img/p1.png); background-position: center; transform: scale(2); transform-origin: center; transition-delay: 1s; transition: ease 1s; filter: blur(10px); }
@media screen and (max-width: 767px) { #sec1 .tree { background-size: 117% auto; margin-top: -65%; background-position: right; } }
#sec1 .cont::after { background: black; }
#sec1 .animated .tree { transform: scale(1); filter: blur(0); }
#sec1 .txt-ef.animated, #sec1 .txt-ef.animated::after { --animation-delay: 1s; }
#sec1 .text { position: absolute; width: 24em; }
@media screen and (min-width: 768px) { #sec1 .text { top: 11%; left: 8%; } }
@media screen and (max-width: 767px) { #sec1 .text { bottom: 15%; left: 5%; width: 84%; } }
#sec1 .text p { display: inline-block; }

#sec2 { background: url(../img/p2_bg.jpg) no-repeat top right; background-size: cover; }
#sec2 .tree { background-image: url(../img/p2.png); background-position: center; transform: scale(2); transform-origin: center; transition-delay: 1s; transition: ease 1s; filter: blur(5px); }
@media screen and (max-width: 767px) { #sec2 .tree { background-size: 100% auto; background-position: top; top: -10%; } }
#sec2 .animated { overflow: hidden; }
#sec2 .animated .tree { transform: scale(1) translate(0); filter: blur(0); }
#sec2 .txt-ef.animated, #sec2 .txt-ef.animated::after { --animation-delay: 1s; }
#sec2 .text { position: absolute; width: 30em; }
@media screen and (min-width: 768px) { #sec2 .text { top: 22%; left: 36%; } }
@media screen and (max-width: 767px) { #sec2 .text { top: 50%; width: 60%; left: 15%; } }
#sec2 .text p { display: inline-block; }

#sec3 { background: url(../img/p3_bg.jpg) no-repeat top right; background-size: cover; }
#sec3 .tree { background-image: url(../img/p3.png); background-position: center; transform: scale(4); transform-origin: center; transition-delay: 1s; transition: ease 1s; filter: blur(5px); }
#sec3 .animated { overflow: hidden; }
#sec3 .animated .tree { transform: scale(1) translate(0); filter: blur(0); }
#sec3 .txt-ef.animated, #sec3 .txt-ef.animated::after { z-index: 2; --animation-delay: 1s; }
#sec3 .text { position: absolute; }
@media screen and (min-width: 768px) { #sec3 .text { width: 23em; top: 31%; left: 45%; } }
@media screen and (max-width: 767px) { #sec3 .text { width: 80%; left: 10%; top: 40%; } }
#sec3 .text p { color: white; display: inline-block; }

#sec4 { background: url(../img/p4_bg.jpg) no-repeat center; background-size: cover; z-index: 3; overflow: hidden; }
#sec4 .img { width: 100%; background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom; position: absolute; height: 200%; left: 0; transition: ease 2s 1s; bottom: -40%; opacity: 0; }
@media screen and (max-width: 767px) { #sec4 .img { height: 100%; width: 120%; margin-left: -20%; } }
#sec4 .animated { overflow: hidden; }
#sec4 .animated .img { opacity: 1; transform: translate(0%); bottom: 0; }
#sec4 .txt-ef.animated, #sec4 .txt-ef.animated::after { z-index: 2; --animation-delay: 1s; }
#sec4 .img4_1 { background-image: url(../img/p4.png); transition-delay: 0s; transition-duration: 2s; }
@media screen and (max-width: 767px) { #sec4 .img4_1 { z-index: 2; } }
#sec4 .img4_2 { background-image: url(../img/p4_2.png); transition-delay: -0.2s; }
@media screen and (max-width: 767px) { #sec4 .img4_2 { margin-left: 0%; } }
#sec4 .img4_3 { background-image: url(../img/p4_3.png); transition-delay: -0.5s; }
#sec4 .img4_4 { background-image: url(../img/p4_4.png); transition-delay: -1s; }
#sec4 .text { position: absolute; }
@media screen and (min-width: 768px) { #sec4 .text { width: 18em; top: 13%; left: 32%; } }
@media screen and (max-width: 767px) { #sec4 .text { width: 70%; left: 10%; top: 9%; } }
#sec4 .text p { max-width: 80%; display: inline-block; text-shadow: #c0e5ee 1px 1px; }

.relative_sec { position: sticky; z-index: 9; }

.tree_num { position: relative; z-index: 2; width: 250px; display: flex; justify-content: space-between; align-items: flex-end; }
.tree_num p { max-width: 100% !important; font-size: 90%; font-weight: bold; }
.tree_num p span { font-size: 110%; display: block; }
.tree_num img { width: 45px; }

/* =============================================
文字エフェクト
================================================ */
.txt-ef { opacity: 0; }

.txt-ef.animated, .txt-ef.animated::after { display: inline-block; animation-delay: var(--animation-delay, 2s); animation-iteration-count: var(--iterations, 1); animation-duration: var(--duration, 1000ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.txt-ef.animated { --animation-delay: var(--delay, 0); --animation-duration: var(--duration, 800ms); --animation-iterations: var(--iterations, 1); position: relative; animation-name: clip-text; cursor: default; }
.txt-ef.animated::after { content: ""; position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; background-color: #6DAE26; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation-name: text-revealer; }

@keyframes clip-text { from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); } }
@keyframes text-revealer { 0%, 50% { transform-origin: 0 50%; }
  60%, 100% { transform-origin: 100% 50%; }
  60% { transform: scaleX(1); }
  100% { transform: scaleX(0); } }
/* =============================================
本文
================================================ */
.copy_area { background: linear-gradient(#fff 0%, #c0e4ef 34.98%, #c0e4ef 100%); position: relative; margin: auto; padding-top: 50px; }
.copy_area img { width: 100%; height: auto; }
.copy_area .center { position: relative; z-index: 4; }
@media screen and (min-width: 768px) { .copy_area .center { padding-bottom: 180px; padding-left: 20px; padding-right: 20px; } }
@media screen and (min-width: 768px) and (max-width: 999px) { .copy_area .center { padding-left: 5%; padding-right: 5%; } }
@media screen and (max-width: 767px) { .copy_area .center { padding: 0px 5% 100px; } }
.copy_area .pic_area .font80 { font-size: 80%; }

.logo { margin-top: 60px; margin-left: auto; margin-right: auto; }
@media screen and (min-width: 768px) { .logo { margin-bottom: 100px; width: 624px; } }
@media screen and (max-width: 767px) { .logo { margin-bottom: 70px; width: 80%; } }
.logo img { width: 100%; height: auto; }

h1 { text-align: center; font-size: 140%; margin-bottom: 70px; line-height: 1.5; }
h1 span { margin-top: 20px; display: block; }

/* =============================================
スポンサー
================================================ */
.sponsor::before, #tree_map::after { content: ""; display: block; width: 100%; height: 170px; position: relative; z-index: 2; background: url(../img/arch.svg) no-repeat center; }
@media screen and (min-width: 768px) { .sponsor::before, #tree_map::after { background-size: 100% 100%; } }
@media screen and (max-width: 767px) { .sponsor::before, #tree_map::after { background-size: 170% 100%; } }

.sponsor::before { margin-top: -170px; }

#tree_map::after { margin-bottom: -170px; transform: rotate(180deg); }

.sponsor { position: relative; background: white; text-align: center; padding: 80px 0 40px; }
.sponsor h3 { color: #6DAE26; font-weight: bold; margin-bottom: 40px; }
.sponsor h3 img { vertical-align: middle; margin-right: 20px; height: 50px; }
.sponsor .flex { justify-content: space-around; align-items: center; display: flex; flex-wrap: wrap; }
.sponsor .center { max-width: 760px; margin-top: -50px; position: relative; z-index: 2; }
@media screen and (max-width: 767px) { .sponsor .center { width: 90%; } }

.sponsor li { text-align: center; width: auto; }
@media screen and (min-width: 768px) { .sponsor li { width: 33%; } }
@media screen and (max-width: 767px) { .sponsor li { width: 49%; margin: 0 0 20px; text-align: center; vertical-align: middle; } }

.sponsor img { width: 100%; }

.sponsor h3 img { width: auto; }

.sponsor p { font-size: 80%; }

/* =============================================
tree_map
================================================ */
#tree_map { position: relative; background-color: white; padding: 80px 0 40px; }
#tree_map h1 { font-size: 180%; text-align: center; margin-bottom: 30px; color: #333; }
#tree_map img { margin: auto; display: block; max-width: 700px; width: 90%; height: auto; }
#tree_map .btn { overflow: hidden; zoom: 1; max-width: 350px; margin: 40px auto; text-align: center; }
#tree_map div a { display: inline-block; background: white; text-decoration: none; font-size: 110%; text-align: center; padding: 10px 0; border-radius: 30px; border: solid 1px #6DAE26; font-weight: bold; line-height: 130%; }
@media screen and (min-width: 768px) { #tree_map div a { width: 156px; } }
@media screen and (max-width: 767px) { #tree_map div a { width: 136px; } }
#tree_map div a:first-child { margin-right: 20px; }
#tree_map div a span { font-size: 11px; }
#tree_map div a:hover { background: #81B410; color: white; }
#tree_map > div { margin-bottom: -50px; position: relative; z-index: 3; }

/* =============================================
poster
================================================ */
#poster { position: relative; background: #EEEEEE; padding: 250px 0 60px; }
@media screen and (min-width: 768px) and (max-width: 999px) { #poster { padding-left: 5%; padding-right: 5%; } }
@media screen and (max-width: 767px) { #poster { padding: 180px 5% 2px; } }
#poster img { width: 100%; height: auto; margin-bottom: 50px; display: block; box-sizing: border-box; }
#poster h1 { text-align: center; margin-bottom: 80px; }
#poster p { color: #333; text-align: center; font-size: 85%; line-height: 180%; margin-bottom: 50px; }