@charset "UTF-8";
/* CSS Document */
/* =============================================
share
================================================ */
.pc { display: block; }

.mb { display: none; }

@media screen and (min-width: 768px) { .pc { display: block; }
  .mb { display: none; } }
@media screen and (max-width: 767px) { .pc { display: none; }
  .mb { display: block; } }
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: 180%; }

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

body { font-family: Arial, Helvetica,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック"; }

.space20 { margin-bottom: 20px; }

.space30 { margin-bottom: 30px; }

.space40 { margin-bottom: 40px; }

.space50 { margin-bottom: 50px; }

.space60 { margin-bottom: 60px; }

/* footer */
#toTop { display: none; position: fixed; right: 0; z-index: 99; }
@media screen and (min-width: 768px) { #toTop { bottom: 120px; } }
@media screen and (max-width: 767px) { #toTop { bottom: 30px; }
  #toTop img { width: 70px; height: auto; } }

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

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

#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: #000; z-index: 9999; }

#loader { position: fixed; top: 50%; left: 50%; width: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: green; z-index: 2; }
#loader p { margin-bottom: 30px; }
#loader img { height: 25px; width: auto; }

/* =============================================
top
================================================ */
.main img { width: 100%; height: auto; }

.main_area { overflow: hidden; width: 100%; position: relative; }
@media screen and (min-width: 768px) { .main_area { padding-bottom: 110%; } }
@media screen and (max-width: 767px) { .main_area { padding-bottom: 163%; } }

.main { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-position: center; background-size: cover; }
@media screen and (min-width: 768px) { .main { background-image: url(../img/top_pic.jpg); } }
@media screen and (max-width: 767px) { .main { background-image: url(../img/top_pic_sp.jpg); } }

.copy { position: absolute; z-index: 2; }
@media screen and (min-width: 768px) { .copy { width: 280px; right: 5%; top: 6%; } }
@media screen and (max-width: 767px) { .copy { width: 50%; right: 7%; top: 5%; } }
.copy img { width: 100%; height: auto; margin-bottom: 30px; }

.logo { margin: auto; }
@media screen and (min-width: 768px) { .logo { width: 80%; max-width: 600px; } }
@media screen and (max-width: 767px) { .logo { width: 70%; } }
.logo img { width: 100%; height: auto; }

/* =============================================
本文
================================================ */
.copy_area { position: relative; margin: auto; }
.copy_area .center { position: relative; z-index: 4; }
@media screen and (min-width: 768px) { .copy_area .center { padding-top: 150px; padding-bottom: 100px; } }
@media screen and (max-width: 767px) { .copy_area .center { padding: 80px 5% 10px; } }
.copy_area .text { line-height: 250%; }
.copy_area p { margin-bottom: 60px; line-height: 220%; }

figure { background: #EEEEEE; margin: 0; padding: 100px 0; }
figure .center { display: block; font-size: 90%; }
@media screen and (max-width: 767px) { figure .center { padding-left: 5%; padding-right: 5%; } }
figure img { width: 100%; height: auto; margin-bottom: 20px; }

.ichimatsu { background-color: #81b328; display: flex; align-items: stretch; flex-wrap: wrap; }
.ichimatsu div { width: 33.33%; height: 33.33vw; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
@media screen and (min-width: 768px) { .ichimatsu div img { width: 100%; } }
@media screen and (max-width: 767px) { .ichimatsu div img { width: 150%; } }
.ichimatsu .pic1::before { background-image: url(../img/pic1-1.jpg); animation-duration: 22s; animation-delay: 0s; }
.ichimatsu .pic1::after { background-image: url(../img/pic1-2.jpg); animation-duration: 22s; animation-delay: 0s; }
.ichimatsu .pic2::before { background-image: url(../img/pic2-1.jpg); animation-duration: 22.5s; animation-delay: 0s; animation-direction: reverse; }
.ichimatsu .pic2::after { background-image: url(../img/pic2-2.jpg); animation-duration: 22.5s; animation-delay: 0s; animation-direction: reverse; }
.ichimatsu .pic3::before { background-image: url(../img/pic3-1.jpg); animation-duration: 21s; animation-delay: 0s; animation-direction: reverse; }
.ichimatsu .pic3::after { background-image: url(../img/pic3-2.jpg); animation-duration: 21s; animation-delay: 0s; animation-direction: reverse; }
.ichimatsu .pic4::before { background-image: url(../img/pic4-1.jpg); animation-duration: 22.5s; animation-delay: 0.2s; }
.ichimatsu .pic4::after { background-image: url(../img/pic4-2.jpg); animation-duration: 22.5s; animation-delay: 0.2s; }
.ichimatsu .pic5::before { background-image: url(../img/pic5-1.jpg); animation-duration: 22s; animation-delay: 0.3s; }
.ichimatsu .pic5::after { background-image: url(../img/pic5-2.jpg); animation-duration: 22s; animation-delay: 0.3s; }
.ichimatsu .pic6::before { background-image: url(../img/pic6-1.jpg); animation-duration: 23s; animation-delay: 0s; animation-direction: reverse; }
.ichimatsu .pic6::after { background-image: url(../img/pic6-2.jpg); animation-duration: 23s; animation-delay: 0s; animation-direction: reverse; }
.ichimatsu .pic { background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; }
.ichimatsu .pic::before, .ichimatsu .pic::after { content: ""; display: block; position: absolute; background-repeat: no-repeat; background-position: center; background-size: cover; left: 0; top: 0; width: 100%; height: 100%; }
.ichimatsu .pic::before { animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; animation-name: slideshow2; }
.ichimatsu .pic::after { opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; animation-name: slideshow; }

@keyframes slideshow { 0% { opacity: 0; }
  10% { opacity: 0; }
  40% { opacity: 0; }
  49.9% { opacity: 0; }
  50% { opacity: 1; transform: scale(1); }
  60% { opacity: 1; }
  90% { opacity: 1; }
  99.9% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); } }
@keyframes slideshow2 { 0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); } }
/* =============================================
スポンサー
================================================ */
.sponsor { text-align: center; }
@media screen and (min-width: 768px) { .sponsor { padding: 80px 0 40px; } }
@media screen and (max-width: 767px) { .sponsor { padding: 40px 0; } }
.sponsor h3 { color: #6DAE26; font-size: 90%; margin-bottom: 40px; }
.sponsor h3 img { vertical-align: middle; margin-right: 20px; height: 45px; }
@media screen and (max-width: 767px) { .sponsor h3 img { height: 50px; } }
@media screen and (min-width: 768px) { .sponsor .flex { justify-content: space-around; align-items: center; display: flex; flex-wrap: wrap; } }
@media screen and (max-width: 767px) { .sponsor .flex { display: inline; } }
@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 { margin: 0 30px 20px; } }
@media screen and (max-width: 767px) { .sponsor li { margin: 0 20px 20px; display: inline-block; text-align: center; vertical-align: middle; } }

.sponsor img { width: auto; }
@media screen and (min-width: 768px) { .sponsor img { height: 35px; } }
@media screen and (max-width: 767px) { .sponsor img { height: 30px; } }

.sponsor img.fujita { height: 45px; }

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

/* =============================================
tree_map
================================================ */
#tree_map { 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; }

/* =============================================
poster
================================================ */
#poster { background: #EEEEEE; padding: 100px 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-left: 5%; padding-right: 5%; } }
#poster img { width: 100%; height: auto; border: solid 1px #707070; 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; }