/* ==========================================================================
Base
========================================================================== */
 
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea { font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Sans-serif; }
/* * Addresses margins handled incorrectly in IE 6/7. */
/* body { margin: 0; font-family: 'YuMincho', 'Yu Mincho', 'Noto Serif JP', 'Varela Round', sans-serif; } */
body { margin: 0; font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;}
.container {
	width: 100%;
}
@media screen and (min-width:768px) {
	.container {
		width: 960px;
		margin: 0 auto;
	}
}

/* ==========================================================================
Typography
========================================================================== */

h1 { font-size: 2em; margin: 0.67em 0; color: #007A46;  font-weight: bold;font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;}
h2 { font-size: 1.8em; margin: 0.83em 0; color: #007A46; font-weight: bold; font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;}
h3 { font-size: 1.3em; margin: 1em 0; font-weight: bold; font-family: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;}
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.75em; margin: 2.33em 0; }
strong { font-weight: bold; }
p { margin: 1em 0; }


/* ==========================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }

/* ==========================================================================
Global Styles
========================================================================== */
div.container a { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; text-decoration: underline!important;}
a:hover, a:focus { color: #a2d7ff;}
p { line-height: 1.6; font-size: 15px; font-weight: 500; }
/*h2::after { content: " "; border: solid 2px rgb(132, 189, 0); display: block; width: 35px; margin: 25px auto; }*/
.section-padding { padding: 60px 0 70px }
.dark-bg { background: #f3f5f8; }
.light-bg { background-color: #fff; }
.light-green-bg {background-color: #f1fce7}
.inner { padding-top: 50px; }
.bgcolor {background-color: rgb(242, 238, 228);}
.border_line {border-bottom: #c0c0c0 1px solid;}

#h_meta h1 {
	font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meryo, "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	margin: 0;
	line-height: 1.7;
}

div.accordion.-active li:before {
	box-sizing:content-box;
}

/* ==========================================================================
Hero
========================================================================== */
.hero { background: url('../img/main01.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 65px 0 100px 0; height: 500px; }
.hero h1 { font-size: 8vw; margin: 10px; color: white; text-shadow: 0px 0px 3px #000;}
.hero p { color: white; text-shadow: 0px 0px 3px #000; font-size: 3.5vw; font-weight: bold;}
@media screen and (min-width:768px) {
	.hero h1 {font-size: 50px;}
}
@media screen and (min-width:768px) {
	.hero p {font-size: 24px;}
}
@media screen and (min-width:1280px) {
	.hero {background-size:1280px;}
}
.hero .inner{
	padding-top: 100px;
}


/* ==========================================================================
Intro
========================================================================== */
.intro p { margin: 0 0 15px 0; }
.intro h2 { font-size: 5.5vw;}
@media screen and (min-width:768px) {
	.intro h2 {font-size: 1.8em;}
}
h2.arrow {text-transform: uppercase; color: #007A46; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; }

#vision-mission .wrapper { height: 380px; }
#vision-mission p { text-align: left; }


/* ==========================================================================
Swag
========================================================================== */
.swag { background: url('../img/main_img01.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 50px 0; }
.swag h1 { color: black; font-size: 35px; text-transform: uppercase; letter-spacing: 5px; }
.swag p {font-size: 17px;}
.down-arrow-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgb(0, 122, 69); display: inline-block; margin: 10px auto 20px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; }
.down-arrow-btn:hover, .down-arrow-btn:focus { color: #fff; background: rgb(0, 122, 69); }


/* ==========================================================================
Challenge
========================================================================== */
#challenge { background: url('../img/challenge.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 20px 0; }
#challenge h1 { color: white; font-size: 35px; text-transform: uppercase; letter-spacing: 5px; }
#challenge h1 span { display: block; font-size: 25px; margin-top: 20px; }
#challenge p {font-size: 17px; color: white;}


#support p {text-align: left;} 



/* ==========================================================================
History
========================================================================== */
#history {padding: 40px 0;}


/* ==========================================================================
Story
========================================================================== */
.story-heading {font-weight: bold; color: #309383; font-size: 17px; margin-bottom: 0;}
.story-wrapper { margin: 10px 0 10px 0; }
#story {background-color: #f1fce7;}
#story p {text-align: left;}

/* ==========================================================================
Activity
========================================================================== */
#activity {padding: 40px 0 20px 0;}
#activities {padding: 20px 0 20px 0;}

/* ==========================================================================
Achivement
========================================================================== */
#achievements img{
	width: 70%;
}
@media screen and (min-width:768px) {
	#achievements img{
		width: 100%;
	}
}

/* ==========================================================================
Donation
========================================================================== */
#donation p {text-align:left;}
#other-donation h2 {text-align: left;}
#other-donation h2::after { content: " "; border: none; display: block;}
#donation {padding-bottom: 0;}
#other-donation {padding-top: 10px;}


/* ==========================================================================
Activity
========================================================================== */
.activity img { margin-bottom: 0px; }


.up-btn { width: 50px; height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(61, 201, 179, 0.5); display: block; margin: 30px auto; color: #fff; font-size: 18px; line-height: 46px; text-align: center; margin-left: auto; margin-right: auto; }
.up-btn:hover, up-btn:focus { color: #fff; background: rgb(0, 122, 69); }
.contact-wrap { position: relative; }


/* ==========================================================================
Footer
========================================================================== */
#organization table {
	background-color: white;
	text-align: justify;
	border-bottom: 1px solid #f2eee4;
	width: 100%;
}
#organization tr:nth-child(2n-1) {
    background-color: #f2eee4;
}
#organization td{
	padding: 18px 20px;
	font-weight: normal;
}
#organization th{
	padding: 18px 20px;
	font-weight: bold;
}

ul.legals { list-style: none; color: #fff; line-height: 25px; }
ul.legals li { display: inline-block; }
ul.legals li::after { content: " |"; }
ul.legals li:last-child::after { content: ""; }
.legals { text-align: left; }
.credit { text-align: right;}
.credit p {font-size: 15px;}

#a_address, dl#a_contact, #a_contact dt {
	font-size: 14px;
    line-height: 24px;
	margin: 0;
	font-weight: normal;
}
#copyright_text, #copyright_link{
	margin: 0;
	font-weight: normal;
}

/*slick*/
.slick-prev:before, .slick-next:before {
	color:#007A46!important;
	font-size: 25px!important;
}
.slick-prev {left: -10px !important;; z-index: 1;}
.slick-next {right: 0px !important;; z-index: 1;}


/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6, .wp7, .wp9 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }