@charset "UTF-8";

/****************************************/
/* Copyright (C) 2017 NPO HonyaTaishou */
/****************************************/

/****************************************/
/* Common CSS Document */
/****************************************/
/* page layout */

html { font-family: "Meiryo","���C���I","�q���M�m�p�S Pro","Hiragino Kaku Gothic Pro",sans-serif;}
body {
	margin: 0px;
	text-align: center;
	}
#container{
	width: 760px;
	text-align: left;
	margin:0px auto;
	}
#header{
	height: 85px;
	background-image: url(../images/head_bg00.gif);
	background-repeat: repeat-x;
	padding-left: 11px;
	}
#header #logo{
	float:left;
	padding-top: 11px;
	height: 29px;
	width:131px;
	display:block;
	}
#header #toggle{
	}
	
	
/****************************************/
/* navigation imageStyle*/

#navi{
	clear:both;
	float:left;
	list-style: none;
	padding-top: 13px;
	}
#navi ul{}
#navi li{ float:left;}
#navi li a{
	display:block;
	width:103px;
	height:18px;
	overflow:hidden;
	/*margin-right:0px;*/
	padding-top: 7px;
	color:#993300;
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
	text-align: center;
	line-height:1;
	background: linear-gradient(rgba(255, 163, 34, 0), rgba(255, 163, 34, 1));
	mix-blend-mode:multiply;
	border: #FF8E14 solid 1px;
	border-radius: 5px 5px 0 0;
}
#navi li#gnLogin a { color: #B0002D;text-shadow: -1px -1px 2px #fff, 1px 1px 2px #fff;}

#navi li a:hover{
	background: linear-gradient(rgba(255, 230, 181, 0.8), rgba(255, 230, 181, 0));
	mix-blend-mode:normal;
}

#about #navi li#gnAbout a,
#npo #navi li#gnNpo a,
#history #navi li#gnHistory a,
#news #navi li#gnTopics a,
#love #navi li#gnLove a { 
	background: linear-gradient(rgba(255, 155, 26, 0.5), rgba(228, 115, 17, 1)); 
	color: #fff5ee;
	mix-blend-mode:normal; 
	font-weight: normal;
}


	
#toggle{display:none;}
/****************************************/
/* contact Style*/

#contact{
	float:right;
	width:100px;
	list-style: none;
	padding-top: 0px;
	padding-right: 15px;
	}
#contact li{
	float:left;
	display:block;
	margin-right:3px;
	}
#contact li#bncont a{
/*	float:left;*/
	display:block;
	width:88px;
	height:0px;
	overflow:hidden;
	padding-top:31px;
	background:url(../images/button_cont.gif) no-repeat 0 0;
	}
/****************************************/
/* banner Style*/

#banner{
	/*float:left;
	width:500px;*/
	list-style: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 10px;
	overflow: hidden;
	}
#banner li{
	float:left;
	display:block;
	margin-right:3px;
	}

/****************************************/
/* body */

#topicPath{
	font-size: 80%;
	color: #333333;
	}
#contents{
	padding: 0px 10px;
	}
img.photo{
	padding: 3px;
	border: 1px solid #d0c6ac;
	margin: 10px;
	background-color: #FFFFFF;
	}
	
#prizeNote{
	display: block;
	margin: 15px auto;
	padding: 15px;
	border: 1px dotted #FFCC00;
	clear: both;
	background-color: #FFFFEC;
	}
#footNote{
	display: block;
	margin: 15px auto;
	padding: 15px;
	border: 1px dotted #FFCC00;
	clear: both;
	background-color: #FFFFEC;
	}
#upLink a{
	float:right;
	display:block;
	width:78px;
	height:0px;
	overflow:hidden;
	padding-top:16px;
	background:url(../images/bt_pageTop.gif) no-repeat 0 0;
	clear: both;
	margin-bottom:10px;
	}
#upLink a:hover{
	background-position:0 -15px;
	}
	
ul#pageLink{
	list-style: none;
	clear:both;
	padding: 0 10%;
	}

#pageLink li{
	float:left;
	font-size: 80%;
	padding:10px;
	} 
#pageLink li img{
	display: inline;
	} 
#pageLink li img a:link{
	display: inline;
	text-decoration: none;	
	} 
#pageLink li#pLl{
	background-image: url(../images/icon_arrow_left.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 15px;
	} 
#pageLink li#pLc{
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	}
#pageLink li#pLr{
	background-image: url(../images/icon_arrow_right.gif);
	background-repeat: no-repeat;
	background-position: right;
	padding-right: 15px;
	}
/****************************************/
/* footer */
#footer{
	padding-left: 11px;
	clear: both;
	height: 40px;
	
	background-color: #FFBD3A;
	border-top: #FF7500 solid 1px;
	}

#footer_menu { clear: both; text-align: center; margin: 30px 40px 15px; font-size: 0;margin-top: 80px;}
#footer_menu a {
    padding: 0px 15px;
    border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	font-size: 13px;
	display:inline-block;
	margin-top: 5px;
	margin-left: -1px;
}
address {
	color:#FFFFFF;
	padding-top:15px;
	margin-right:35px;
	text-align:right;
	font-size:70%;
}

/****************************************/
/* font */
p{
	font-size: 86%;
	line-height: 150%;
	}
p,table,ol,ul,dt,dd{
	color:#333333;
	}
.textarea{
	padding: 20px;
	}
.point{
	font-weight: normal;
	color: #FF0000;
	}
.remarkable{
	font-size: 110%;
	font-weight: bold;
	}

.lead{
	padding:15px;
	}
.left{
	float: left;
	}
.right{
	float: right;
	}
.center{
	margin: 0 auto;
	text-align: center;
	}
.move{
	padding-left:50px;
	margin: 10px auto;
	}
.announce{
	clear: both;
	border: 1px solid #FF0000;
	margin: 8px;
	padding: 8px;
	}
.fcolor178 {
	color: #00c;
	}
.fcolor179,
.fcolor180 {
	color: #c00;
	}

.menuButton { display:none;}

/*media Queries スマートフォンとタブレットサイズ（756px以下）で適応したいCSS
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 760px) {
	p {font-size: 100%;}

	#container { width: 100%; position: relative; padding-top: 47px; min-width: 300px;}
	
	#contents{ padding: 5px 10px 0px;}
	
	#header { 
		background-size: auto 50px; 
		height: 50px; 
		left: 0;
		padding-left: 0; 
		position: fixed; 
		top:0;
		width: 100vw;
		z-index: 50;
	}
	#navi,#usernavi { 
		position: absolute;
		float: none;
		top: 47px;
		left: -80%;
		width: 80%;
		z-index:52;
		padding-top: 0;
		-webkit-transition: all .5s ease;
		transition: all .5s ease;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		}
	#navi ul,
	#usernavi ul { 
		background-color: #FFBD3A;
		height: calc(100vh - 50px); 
		width: auto; 
	}
	#navi li, #usernavi li { float: none;}
	#navi li a,
	#usernavi li a {
		border-radius: 0;
		display:block;
		float:none;
		font-size: 1em;
		padding-bottom: 12px;
		padding-top: 18px; 
		width: auto;
	}
	#navi li a,
	#navi li a:hover,
	#about #navi li#gnAbout a,
	#npo #navi li#gnNpo a,
	#history #navi li#gnHistory a,
	#news #navi li#gnTopics a,
	#love #navi li#gnLove a { 
		background: linear-gradient(rgba(255, 163, 34, 0), rgba(255, 163, 34, 1));
		color:#993300;
		mix-blend-mode:normal; 
		font-weight: normal;
	}
	#header #logo{ margin-left: 60px;}

	/* menuButton */
	.menuButton,
	.menuButton span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
  	}
	.menuButton {
		width: 22px;
		height: 19px;
		position: fixed;
		top: 16px;
    	left: 18px;
		z-index: 4;
	}
	.menuButton span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #333;
		border-radius: 4px;
	}
	.menuButton span:nth-of-type(1) {
		top: 0;
		}
	.menuButton span:nth-of-type(2) {
		top: 8px;
	}
	.menuButton span:nth-of-type(3) {
		bottom: 0;
	}
  	.menu-open .menuButton span:nth-of-type(1) {
		-webkit-transform: translateY(8px) rotate(-315deg);
		transform: translateY(8px) rotate(-315deg);
	}
	.menu-open .menuButton span:nth-of-type(2) {
		opacity: 0;
  	}
  	.menu-open .menuButton span:nth-of-type(3) {
		-webkit-transform: translateY(-8px) rotate(315deg);
		transform: translateY(-8px) rotate(315deg);
  	}
  	.menu-open #navi,
  	.menu-open #usernavi { left: 0;}
  	
	.overlay {
		position: fixed;
		z-index:3;
		visibility: hidden;
		width: 100%;
		height: calc(100% - 50px);
	}
	.menu-open #menu-overlay {
		visibility: visible;
		cursor: pointer;
	}
  	
  	
}

@media only screen and (max-width: 480px) {
	/* footer */
	#footer { height: auto; padding-bottom: 10px;}
	address { text-align: center;}

	/* fooer menu for SP */
	#footer_menu { margin: 30px 0 0; text-align: left; border-top:#999 solid 1px;}
	#footer_menu a { 
		width: calc((100% - 2px)/2); 
		padding: 10px 0; 
		margin:0;
		border-width: 0 0 1px; 
		border-color: #999; 
		border-style: solid; 
		text-align: center;
	}
	#footer_menu a:nth-child(odd) { border-right: #999 solid 1px;}
	#footer_menu a:nth-last-child(1) { border-bottom: none;}
}

.you_tube{
	position:relative;
    width:100%;
    height:0;
    padding-top:75%;
}
.you_tube iframe{position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

@media only screen and (max-width: 340px) {
	#header #logo{ margin-left: 50px;}
}