@charset "UTF-8";
/* CSS Document */
/*
Theme Name: 2016　緑の伝言
*/
/* =============================================
share
================================================ */
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; }

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

/* =============================================
sec1
================================================ */
#sec1 { position: relative; padding-bottom: 70.2%; }
#sec1 img { width: 100%; height: auto; position: absolute; }
#sec1 #child { position: absolute; top: 47%; width: 31.5%; left: 33.3%; transform-origin: 33% bottom; -moz-transform-origin: 33% bottom; -webkit-transform-origin: 33% bottom; -o-transform-origin: 33% bottom; -ms-transform-origin: 33% bottom; }

/* =============================================
sec2
================================================ */
#sec2 { overflow: hidden; }
#sec2 .center { overflow: hidden; width: 810px; transform: rotate(-32deg); -moz-transform: rotate(-32deg); -webkit-transform: rotate(-32deg); -o-transform: rotate(-32deg); -ms-transform: rotate(-32deg); background: url(img/section2/yazirushi.png) no-repeat 40% top; margin: 0 auto -60px; }
#sec2 .center div { float: left; width: 45%; }
#sec2 .center p { margin: 30px auto 0; line-height: 180%; color: #333; font-size: 105%; text-align: right; }
#sec2 .center div.jp { float: right; margin: 180px 0; }
#sec2 .center div.jp p { text-align: left; }

/* =============================================
sec3
================================================ */
#sec3 { background: url(img/section3/yazirushi.png) no-repeat center bottom #6DAE26; }
#sec3 .center { width: 610px; background: #6DAE26; visibility: visible !important; transform: rotate(-20deg); -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); padding: 80px 60px; margin: 0px auto; }
#sec3 .center h1, #sec3 .center h2 { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 600; font-size: 140%; margin-bottom: 25px; color: white; }
#sec3 .center p { margin: 30px auto 0; line-height: 180%; color: white; font-size: 105%; }
#sec3 .center .jp { padding-bottom: 80px; background: url(img/section3/tree.png) no-repeat right bottom; }

/* =============================================
sec4
================================================ */
#sec4 { padding-top: 200px; }
#sec4 h1 { font-weight: 600; font-size: 180%; text-align: center; margin-bottom: 30px; color: #6DAE26; }
#sec4 img { margin: auto; display: block; }
#sec4 ul { overflow: hidden; }
#sec4 ul li { float: left; width: 20%; font-size: 90%; margin-bottom: 50px; }
#sec4 ul li img { margin: 0; }
#sec4 ul li a { text-decoration: none; }
#sec4 ul li p.name { margin: 10px auto 5px; }
#sec4 ul li p.cate { color: #6DAE26; }
#sec4 ul + ul { margin: 0 10%; }
#sec4 ul + ul li { width: 25%; }
#sec4 #map div { overflow: hidden; zoom: 1; width: 340px; margin: 40px auto 100px; }
#sec4 #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%; }
#sec4 #map div a:first-child { margin-right: 20px; }
#sec4 #map div a span { font-size: 11px; }
#sec4 #map div a:hover { background: #81B410; color: white; }

/* =============================================
sec5
================================================ */
#sec5 { padding: 80px 0; }
#sec5 h2 { text-align: center; font-size: 110%; line-height: 180%; margin-bottom: 40px; }
#sec5 #main_img { margin: 80px auto 50px; text-align: center; }
#sec5 h1 { text-align: center; margin-bottom: 80px; }
#sec5 p { color: #333; text-align: center; font-size: 85%; line-height: 180%; margin-bottom: 50px; }