@charset "utf-8";
#header { background-color: #E8E5DC;}

/*---------------------------------------------------------------------------
  TOPPAGE
---------------------------------------------------------------------------*/
#toppage { overflow: hidden;}
#toppage h3 {
	position: relative;
	font-family: 'Noto Serif JP', serif;
	line-height:100%;
	letter-spacing: 2px;
}
#toppage h3 strong,
#toppage h3 small { display: block; font-weight: normal; text-align: center;}
#toppage h3 strong { font-size: 193.8%; margin-bottom:15px; position: relative; }
#toppage h3 small { font-size: 62.5%; }
#toppage h3 strong::before {
	display: block; clear: both; content:"";
	position: absolute; top:-50px; right: 0; left: 0;
	margin: auto;
	width: 40px; height: 40px;
	background:url("../image/icon_mid.png") no-repeat;
	background-size: 100% auto;
}
#toppage .btn1 { 
	width:100%; max-width: 480px;
	background: url("../image/btn_bg.jpg");
	transition: 0.5s;
}
#toppage .btn1 a {
	position: relative; top: -10px; left: -8px;
	display: block;
	padding: 20px;
	font-family: 'Noto Serif JP', serif;
	font-size: 137.5%;
	color: #222;
	text-decoration: none;
	background: #F9D32B url("../image/arrow.png") no-repeat 95% center;
	transition: 0.5s;
}
#toppage .btn1 a:hover { 
	background-color: #87C4DA;
	background-position: 97% center;
}
#toppage .btn2 { clear: both; margin: 1% 0 0; width:98%; max-width: 250px; }
#toppage .btn2 a {
	display: block;
	padding: 15px 0;
	font-family: 'Noto Serif JP', serif;
	color: #222;
	text-decoration: none;
	background: url("../image/arrow.png") no-repeat 93% center;
	border-bottom: 1px solid #222;
	transition: 0.5s;
}
#toppage .btn2 a:hover {  
	padding-left: 15px;
	background-position: 97% center;
	border-bottom: 1px solid #fff;
}
@media only screen and (max-width:800px){
	#toppage h3 { margin-bottom: 5%;}
	#toppage h3 strong { font-size:162.5%; }
	#toppage .btn1 { margin: auto; width:96%;}
	#toppage .btn2 { margin: auto !important;}
}


/*** MAINIMG *************************************************/
#toppage .mainimg {  background-color: #E8E5DC;}
#toppage .mainimg h1 { text-align: center;}
#toppage .mainimg .box { position: relative; margin: auto;  max-width: 1400px;}
#toppage .mainimg .btn1 { position: absolute; left: 150px; bottom:-40px;}
#toppage .mainimg .scroll_icon { 
	position: absolute; bottom:80px; left: 0; right: 0; 
	margin: auto; width:75px; height: 75px;
	text-align:center;
	z-index: 99999;
}
#toppage .mainimg .scroll_icon p {
	position: absolute; left: 0; right: 0; bottom:-5px;
	margin: auto;
	font-family: 'Noto Serif JP', serif;
	font-size: 80%;
	text-shadow:  0 1px 2px #fff;
}
#toppage .mainimg .scroll_icon::before {
	display: block; content:""; clear: both;
	position: absolute; top: 0; left: 0; right: 0;
	margin: auto;
	width: 1px; height: 40px;
	background: #222;
	animation: linemove 1.0s ease-in-out infinite;
	opacity:0;
}
#toppage .mainimg .scroll_icon {
	-webkit-animation-name:scroll_icon;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	-moz-animation-name:scroll_icon;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}

@keyframes linemove {
	0% { height:0; top:0; opacity: 0; }
	30% { height:30px; opacity: 1; }
	100%{ height:0; top:50px; opacity: 0; }
}
@media only screen and (max-width:1400px){
	#toppage .mainimg .btn1 { left: 100px;}
	#toppage .mainimg img { width: 100%; height: auto; }
}
@media only screen and (max-width:800px){
	#toppage .mainimg .btn1 { 
		left: 0; right: 0; margin: auto;
		width:90%; max-width:inherit;
	}
	#toppage .mainimg img {
		width:100%;
		height:auto;
	}
}


/*** ABOUT ***************************************************/
#toppage .about { position: relative; margin: auto;  padding: 5% 0; max-width: 1000px; min-height: 550px;}
#toppage .about .photo { position: absolute; top:10%; right: -10%; width: 60%;}
#toppage .about .photo img { width: 100%; height: auto;}
#toppage .about h2 {
	margin:10% 0 2%;
	font-family: 'Noto Serif JP', serif;
	font-weight: normal;
	font-size: 193.8%;
	line-height: 150%;
}
#toppage .about .come {
	width: 50%;
	max-width: 490px;
}
#toppage .about .btn2 { margin-top: 5%;}
#toppage .about .btn2 a:hover { background-color: #F9D32B;}
@media only screen and (max-width:1050px){
	#toppage .about {  padding: 5% 2%;}
}
@media only screen and (max-width:800px){
	#toppage .about {  padding:20% 2% 25%;}
	#toppage .about { min-height:inherit;}
	#toppage .about h2 { float: left; margin: 5% 0; width: 60%; font-size:150%;}
	#toppage .about .photo { float: right; position: static; width: 40%;}
	#toppage .about .come { clear:both; padding-top: 5%; width:100%;}
	#toppage .about .btn2 { padding-top: 7%;}
}


/*** ACTIVITY ************************************************/
#toppage .activity {
	clear:both;
	display:block;
	background:#F9D32B url("../image/tit_bg_t.svg") no-repeat top center;
	background-size: auto 60px;
}
#toppage .activity::after {
	display: block; clear:both; content:"";
	width: 100%; height: 300px;
	background: url("../../image/top/activity_bg.jpg") no-repeat center center;
	background-size: cover;
}
#toppage .activity h3 { top:-10px; }
#toppage .activity .box { margin: auto;  padding: 5% 0; max-width: 1000px; overflow: hidden; }
#toppage .activity  #rss a { display:none; float:left; margin:20px 1%; width:31.3%; background: #fff; overflow: hidden; color:#222; text-decoration: none;}
#toppage .activity  #rss a:nth-child(1),
#toppage .activity  #rss a:nth-child(2),
#toppage .activity  #rss a:nth-child(3) {display: block;}
#toppage .activity  #rss a img { width: 100%; height:200px; object-fit: cover;}
#toppage .activity  #rss a p { padding:5%;}
#toppage .activity  #rss a p span+span { display: block; font-family: 'Noto Serif JP', serif;}
#toppage .activity .btn2 { clear: both; margin: 1% 1% 0;}
#toppage .activity .btn2 a:hover { background-color: #fff;}
@media only screen and (max-width:800px){
	#toppage .activity::after { height: 230px; }
	#toppage .activity .box { padding: 5% 0 10%;}
	#toppage .activity  #rss a { float:none; margin:1% 2%; width:96%; background: #fff;}
	#toppage .activity  #rss a img { float: left; width: 125px; height: 125px;}
	#toppage .activity  #rss a p { float: right; padding:3%; width:calc(100% - 125px);}
	#toppage .activity .btn2 { padding-top:7%;}
}


/*** YOUTUBE ***********************************************/
#toppage .movie { padding: 10% 0 5%;}
#toppage .movie h3 {}
#toppage .movie .box { margin:2% auto 0; max-width:1400px; overflow: hidden; }
#toppage .movie ul { 
	position: relative;
	float:left;
	margin:20px 0.5%;
	width:32.3%;
	text-align: center;
	background:#F9D32B;
	box-shadow: 7px 7px 0px 0 rgba(135,196,218,0.70);
}
#toppage .movie ul li.youtube { position: relative;}
#toppage .movie ul li.youtube  iframe {
	position: absolute; top: 0; right: 0;
	width: 100% !important; height: 100% !important;
}
#toppage .movie ul li.come {
	padding: 20px 0;
	font-family: 'Noto Serif JP', serif;
}
@media only screen and (max-width:800px){
	#toppage .movie { padding: 20% 0  10%;}
	#toppage .movie ul { float:none; margin:2%; width:96%;}
	#toppage .movie ul+ul { margin-top: 10%;}
}


/*** SUPPORT ********************************************/
#toppage .support {
	padding:4% 0;
	background: url("../../image/top/volunteer_bg.jpg") no-repeat center -50px;
	background-size: cover;
	overflow: hidden;
}
#toppage .support .box { margin: auto; padding: 10% 0; max-width: 1000px;}
#toppage .support .box::after {  display: block; clear: both; content:"";}
#toppage .support .cont:nth-child(1){ float: left; width:57%; padding-right:7%;}
#toppage .support .cont:nth-child(2){ float:right; width:43%; padding-left:7%;}
#toppage .support h4 {
	font-family: 'Noto Serif JP', serif;
	font-weight: normal;
	color: #fff;
	letter-spacing:4px;
	transition: 0.5s;
	text-shadow: 2px 2px 2px rgb(61 70 70);
}
#toppage .support .come {
	padding: 20px 0 50px;
	font-family: 'Noto Serif JP', serif;
	font-weight: normal;
	color: #fff;
	letter-spacing: 3px;
	text-shadow: 2px 2px 2px rgb(61 70 70);
}
#toppage .support .cont:nth-child(1) h4 {font-size:38px;}
#toppage .support .cont:nth-child(2) h4 {font-size: 137.5%;}
#toppage .support .btn1 { margin-top: 0%; }
#toppage .support .btn { 
	width:100%; max-width: 480px;
	background:rgba(135,196,218,0.35);
	transition: 0.5s;
}
#toppage .support .btn a {
	position: relative; top: -10px; left: -8px;
	display: block;
	padding: 20px 20px 20px 60px;
	font-family: 'Noto Serif JP', serif;
	font-size: 137.5%;
	color: #222;
	text-decoration: none;
	background:#fff url("../image/sns_li.png") no-repeat 20px center;
	background-size: 30px auto;
	transition: 0.5s;
}
#toppage .support .btn a:hover { 
	color: #fff;
	background:#00B800 url("../image/sns_li2.png") no-repeat 20px center;
	background-size: 30px auto;
}
@media only screen and (max-width:900px){
	#toppage .support .cont:nth-child(1) h4 {line-height: 130%;}
	#toppage .support .cont:nth-child(1),
	#toppage .support .cont:nth-child(2){
		float: none; margin: auto; width:90%; padding: 10px 0; text-align: center;
		border: none;
	}
	#toppage .support .cont:nth-child(1){
		margin-bottom: 10%;
		padding-bottom:10%;
		border-bottom:1px solid #ccc;
	}
	#toppage .support .btn1,
	#toppage .support .btn { margin:auto; width:96%;}
	#toppage .support .btn1 a,
	#toppage .support .btn a {font-size:112%;}
}
	

/*** VOLUNTEER ********************************************/
#toppage .volunteer {}
#toppage .volunteer .box { margin: auto; padding:5% 0; max-width: 1000px;}
#toppage .volunteer .box::after {  display: block; clear: both; content:"";}
#toppage .volunteer h4 {
	float: left;
	font-family: 'Noto Serif JP', serif;
	font-size: 137.5%;
	font-weight: normal;
	letter-spacing: 2px;
	transition: 0.5s;
}
#toppage .volunteer .btn {
	float:right;
}
#toppage .volunteer .btn a {
	display: block;
	padding: 20px 20px 20px 60px;
	font-family: 'Noto Serif JP', serif;
	font-size: 137.5%;
	color: #222;
	text-decoration: none;
	transition: 0.5s;
	background: url("../image/icon_mail.png") no-repeat 15px center;
	background-size: 30px;
}
#toppage .volunteer .btn a:hover {
	background-color:#eee;
}
@media only screen and (max-width:1050px){
	#toppage .volunteer .box { padding: 10% 2%; }
	#toppage .volunteer h4 { width: calc( 100% - 350px );}
	#toppage .volunteer .btn {  max-width: 350px ; }
}
@media only screen and (max-width:900px){
	#toppage .volunteer h4 { float: none; width:100%; text-align: center;}
	#toppage .volunteer .btn {float: none; margin:20px auto 0; width: 360px; text-align: center;}
}
@media only screen and (max-width:800px){
	#toppage .volunteer h4 { font-size: 100%;}
	#toppage .volunteer .btn a {font-size:112%;}

}