@charset "utf-8";

.slick-dots li{margin:0}
.slick-dots li.slick-active button:before{color:var(--green)}

.slick-arrow{background:var(--green);border-radius:50%}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus{background:var(--green);opacity:.75}
.slick-arrow:before{content:"";display:inline-block;width:.5em;height:.5em;background:#fff;clip-path:polygon(0 0, 100% 50%, 0 100%);opacity:1;transition:.4s}
.slick-prev,.slick-next{top:inherit;bottom:-35px;transform-origin: center}
.slick-prev{left:10%;}
.slick-prev.slick-arrow:before{transform:rotate(180deg)}
.slick-next{right:10%}
.slick-dots{width:900px;left:0;right:0;margin:auto}

#top section{margin:5em auto}

#news-list+a{display:inline-block;padding:.2em 1em;background:linear-gradient(to bottom, rgba(128,92,34,1) 0%,rgba(90,51,23,1) 100%);color:#fff;border-radius:.5em}
#news-list+a:before{content:"";display:inline-block;width:.8em;height:.8em;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);margin-right:.5em}
#news-list+a:hover{color:#fbc64c;}
#news-list+a:hover:before{background:#fbc64c}

h2.info:before{content:url(../img/top/top_h2_info.png);}
h2.info:after{content:url(../img/top/h2_tree.png);}
h2.sns:before{content:url(../img/top/top_h2_sns.png);}
h2.sns:after{content:url(../img/top/h2_bird.png);}

ul.tile,ul.sns{margin:2em auto;display:flex;flex-wrap: wrap;justify-content:space-between}
ul.tile li,ul.sns li{width:32%}
ul.tile li a{display:block;background:#fff;overflow:hidden;color:#000;border:1px #999 solid}
ul.tile li a img{transition: .4s}
ul.tile li figcaption{padding:1em;position:relative;font-weight:bold;background:#fff}
ul.tile li figcaption:before{content:"";width:15%;height:5px;display:inline-block;background:var(--green);position:absolute;top:0;left:0;transition:.4s}
ul.tile li a time{display:block;font-weight:normal;margin:.5am 0}
ul.tile li a:hover img{transform:scale(1.05)}
ul.tile li a:hover figcaption:before{width:30%;background:/*#ffc107*/var(--orange)}


ul.sns li a{display:block;text-align:center;font-weight:bold;color:#fff;padding:1em 0;letter-spacing:.1em;border:2px solid}
ul.sns li.twitter a{background:#30a7df;border-color:#30a7df}
ul.sns li.instagram a{background:#d93075;border-color:#d93075}
ul.sns li.facebook a{background:#103778;border-color:#103778}
ul.sns li a:hover{opacity:.8;transform:scale(1.05)}

@media screen and (max-width: 540px){ 
.slick-dots{width:90%}
.slick-prev,.slick-next{top:0;bottom:0;margin:auto;z-index:+1}

ul.tile li,ul.sns li{width:95%;margin:1em auto}
}