@charset "UTF-8";
/* CSS Document */
/*
Theme Name: 2018　緑の伝言
*/
article, aside, canvas, details, figcaption, figure, header, footer, hgroup, menu, nav, section, summary { display: block; }

.pc { display: block; }

.mb { display: none; }

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; }

a:hover img { opacity: 0.6; filter: alpha(opacity=60); }

body { min-width: 1280px; }

.animated { opacity: 0; }

.bounceIn { opacity: 1; }

.center { margin: 0 auto; width: 980px; }

/* IE8+, GChrome */
input, button { outline: 0; }

/* Firefox */
input::-moz-focus-inner, button::-moz-focus-inner { border: 0; }

/* footer */
#toTop { position: fixed; bottom: 300px; right: 0; z-index: 9999; }

#foot_area { position: relative; bottom: 0px; padding-top: 20px; z-index: 999; background: #6DAE26; line-height: 180%; }

#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; }

/* =============================================
top
================================================ */
#loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; z-index: 9999; }

#loader { display: none; position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: #6DAE26; z-index: 2; }
#loader p { margin-bottom: 10px; }

#top { position: relative; background: url(img/sec1_bg.jpg) no-repeat center; background-size: cover; height: 2000px; }
#top img { width: 35%; position: absolute; left: 15%; top: 20%; }

/* =============================================
map_area
================================================ */
#map_area { background: #333333; height: 1025px; position: relative; overflow: hidden; }
#map_area #map, #map_area #map_text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#map_area #map { background: url(img/map.svg) no-repeat center; background-size: auto 100%; transition: all 2s 0s ease; -webkit-transition: all 2s 0s ease; }
#map_area #map_text { transform: scale(6); -webkit-transform: scale(6); }
#map_area #map_text::after, #map_area #map_text::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
#map_area #map_text::after { background: url(img/map_text.svg) no-repeat center; background-size: auto 100%; transition: opacity 0.2s ease 0; -webkit-transition: opacity 0.2s ease 0; }
#map_area #map_text::before { background: url(img/yazirushi.svg) no-repeat center; background-size: auto 100%; transition: opacity 0.2s ease 0; -webkit-transition: opacity 0.2s ease 0; transform: scale(0); -webkit-transform: scale(0); }

#map_area.visible #map { transition-delay: 1.5s; -webkit-transition-delay: 1.5s; transform: scale(6); -webkit-transform: scale(6); }
#map_area.visible #map_text:after { transition-delay: 3.7s; -webkit-transition-delay: 3.7s; opacity: 1; animation-duration: 1s; -webkit-animation-duration: 1s; }
#map_area.visible #map_text:before { animation-name: fadeIn_yazirushi; animation-fill-mode: forwards; animation-duration: 1s; animation-timing-function: liner; animation-delay: 2.5s; -webkit-animation-name: fadeIn_yazirushi; -webkit-animation-fill-mode: forwards; -webkit-animation-duration: 1s; -webkit-animation-timing-function: liner; -webkit-animation-delay: 2.5s; }

@keyframes fadeIn_yazirushi { 0% { opacity: 0; }
  70% { opacity: 1; transform: scale(0); -webkit-transform: scale(0); }
  100% { opacity: 1; transform: scale(1); -webkit-transform: scale(1); } }
@-webkit-keyframes fadeIn_yazirushi { 0% { opacity: 0; }
  70% { opacity: 1; transform: scale(0); -webkit-transform: scale(0); }
  100% { opacity: 1; transform: scale(1); -webkit-transform: scale(1); } }
/* =============================================
detail
================================================ */
#detail { background: #6DAE26; text-align: center; padding: 160px 0 140px; position: relative; }
#detail #tree_ico { content: ""; display: block; position: absolute; margin-left: -87.5px; left: 50%; bottom: -2px; background: url(img/tree_ico.svg) no-repeat center bottom; width: 175px; height: 137px; }
#detail h1, #detail h2, #detail h3 { font-weight: bold; font-size: 150%; color: white; }
#detail h3 { font-size: 110%; margin: 30px auto -10px; }
#detail p { margin: 30px auto 0; line-height: 180%; color: white; font-size: 100%; margin-bottom: 120px; }

/* =============================================
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; width: 700px; height: auto; }
#tree_map .btn { overflow: hidden; zoom: 1; width: 340px; margin: 40px auto; }
#tree_map div a { display: block; float: left; background: white; color: #81B410; text-decoration: none; font-weight: bold; text-align: center; padding: 10px 0; width: 156px; border-radius: 30px; border: solid 1px #6DAE26; font-size: 13px; font-weight: bold; line-height: 130%; }
#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 img { width: 100%; height: auto; }
#poster #main_img { margin: 80px auto 50px; text-align: center; }
#poster h1 { text-align: center; margin-bottom: 80px; }
#poster p { color: #333; text-align: center; font-size: 85%; line-height: 180%; margin-bottom: 50px; }