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

/* =============================================
tree
================================================ */
#tree { text-align: center; padding-top: 180px; min-height: 1280px; position: relative; background: url(img/main_img_bg.jpg) no-repeat top center; }
#tree h2, #tree h3 { color: white; font-weight: bold; font-size: 200%; line-height: 150%; margin: 30px auto; text-shadow: 1px 1px 20px #000,1px 1px 20px #000,1px 1px 20px #000; }
#tree .gaiyo { position: relative; }
#tree ul { margin: 80px auto 0; position: relative; height: 430px; }
#tree ul li { display: inline-block; background: rgba(98, 136, 28, 0.85); border: solid 1px white; color: white; padding: 12px 20px 10px; font-size: 110%; position: absolute; }
#tree ul li::before { content: url(img/ico.png); vertical-align: middle; display: inline-block; margin-right: 10px; }
#tree ul li span { display: block; font-size: 80%; }
#tree ul #btn { display: block !important; padding: 0; background: none; left: 50%; top: 100px; margin-left: -100px; border: none; width: 240px; height: 240px; transform-origin: center; }
#tree ul #btn:before { display: none; }
#tree ul #btn a { cursor: pointer; display: block; width: 240px; height: 240px; position: absolute; top: 50px; left: -8px; background: url(img/top_open.png) no-repeat center; transform-origin: center; -moz-transform-origin: center; -webkit-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; }
#tree ul #btn a.open { width: 85px; height: 85px; left: 75px; top: 130px; background: url(img/top_close.png) no-repeat center; }
#tree ul #tree1 { top: 10px; left: 20px; }
#tree ul #tree2 { top: 0; left: 680px; }
#tree ul #tree3 { top: 140px; left: 200px; }
#tree ul #tree4 { top: 130px; left: 595px; }
#tree ul #tree5 { top: 350px; left: 100px; }
#tree ul #tree6 { top: 250px; left: 730px; }
#tree ul #tree7 { top: 400px; left: 680px; }
#tree ul #tree8 { top: 510px; left: 660px; }
#tree ul #tree9 { top: 490px; left: 240px; }
#tree ul #tree10 { top: 600px; left: 110px; }

/* =============================================
text
================================================ */
.text { padding: 40px 0; text-align: center; line-height: 180%; color: #333; width: 750px; margin: auto; }
.text img { margin: 60px auto; display: block; }

/* =============================================
karte
================================================ */
.karte { background: url(img/tree_ico.png) no-repeat center bottom #81B327; text-align: center; color: white; padding: 60px 0 160px; line-height: 140%; /*カルーセル*/ /*スライド数のドットの色を変える*/ /*スライド画像の横幅可変*/ }
.karte span { font-size: 80%; display: block; margin-top: 12px; line-height: 130%; }
.karte .variable-width { margin: 60px auto; }
.karte .slick-slide { padding: 0 16px; margin-bottom: 30px; text-align: center; }
.karte .slick-dots li.slick-active button:before, .karte .slick-dots li button:before { color: #fff; }
.karte img { max-width: 100%; height: auto; margin-bottom: 10px; }

/* =============================================
docter
================================================ */
.docter { color: #81B327; background: #F5F4F0; padding: 60px 0; margin-bottom: 130px; }
.docter .center { width: 840px; }
.docter h4 { font-size: 130%; font-weight: bold; margin-bottom: 40px; }
.docter p { line-height: 180%; font-size: 90%; margin-bottom: 40px; }
.docter h5 { font-size: 105%; font-weight: bold; margin-bottom: 30px; }
.docter h5 span { padding-left: 30px; font-weight: bold; }
.docter .profile { overflow: hidden; margin-bottom: 40px; }
.docter .profile div { float: left; width: 70%; }
.docter .profile div + div { float: right; width: 25%; padding-top: 65px; line-height: 150%; text-align: center; }

/* =============================================
map
================================================ */
#map h1 { font-weight: 600; font-size: 180%; text-align: center; margin-bottom: 30px; color: #6DAE26; }
#map img { margin: auto; display: block; }
#map .btn { overflow: hidden; zoom: 1; width: 340px; margin: 40px auto; }
#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%; }
#map div a:first-child { margin-right: 20px; }
#map div a span { font-size: 11px; }
#map div a:hover { background: #81B410; color: white; }

/* =============================================
poster
================================================ */
#poster { padding: 80px 0; }
#poster h2 { text-align: center; font-size: 110%; line-height: 180%; margin-bottom: 40px; }
#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; }