*{font-size:16px;padding:0;margin:0;box-sizing:border-box;}
html,body{}
h1{font-size:24px;}
h2{font-size:20px;}
h3{font-size:18px;}

button{
	padding:5px 25px;
	border-radius:7px;
	border:1px solid #999;
	background:#FFF;
	font-size:90%;
}

.inner{
	width:100%;
	max-width:1100px;
	padding:0 20px;
	margin:0 auto;
}

.center{
	text-align:center;
}

.red{color:#E60012;}
.green{color:#009944;}
.gray{color:#595656;}
.small{font-size:90%;}
.big{font-size:120%;}
.bold{font-weight:bold;}

/* header
---------------------------------------------------------*/
header{
	padding:30px 0 30px;
	background:url(../../img/eyecatch.jpg) center top /cover no-repeat;
}

/*
body#index header{
	padding:40px 0 calc(28%);
	background:url(../../img/eyecatch.jpg) center bottom /cover no-repeat;
}
*/


header #logo{
	text-align:center;
}

header #logo img{
    max-width:45%;
    width:100%;
    height:auto;
}

header #search{
	text-align:center;
	height:40px;
	box-sizing:border-box;
}

header form{
	display:block;
	width:100%;
	max-width:500px;
	padding:0;
	margin:20px auto;
	box-sizing:border-box;
/*	border:1px solid #ccc;*/
	height:40px;
	background:#FFF;
}

header #search input,
header #search button{
	display:inline-block;
	margin:0;
	border-radius:0;
	line-height:0;
	font-size:20px;
	height:100%;
	box-sizing:border-box;
}

header #search button{
	width:80px;
	cursor:pointer;
	background:linear-gradient(#E5D42E 50%,#D5C41E 50%);
	padding:0;
	height:40px;
	vertical-align:middle;
	border:1px solid #CCC;
	border-left:none;
}

header #search button img{
	width:20px;
	height:20px;
	margin:0;
	padding:0;
	color:#FFF;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,.5));
}

header #search input{
	height:40px;
	padding:10px 10px;
/*	border:none;*/
	width:calc(100% - 80px);
	background:none;
	vertical-align:middle;
	border:1px solid #CCC;
}

header h1{
	text-align:center;
}

/* main
---------------------------------------------------------*/
main{
	min-height:calc(100vh - 490px);
	margin:30px 0;
}

main h2{
	margin:1em 0;
	text-align:center;
/*	text-align:left;*/
	padding:10px;
	border-radius:7px;
}

main p{
	margin:1em 0;
}

main .sbox{
	padding:20px;
	background:#F0F0F0;
	margin:20px 0 40px;
	border-radius:9px;
}

main .sbox ul{
	list-style:none;
	padding:20px;
}

main .sbox ul li{
	display:inline-block;
}

main .today{
	background:#FFF;
	border:none;
}

main .today button{
	display:block;
	width:150px;
	margin:0 0 0 auto;
}

main .today ul li{
	display:block;
	margin-bottom:20px;
}



main #bana{
	margin:20px 0;
}

main #bana ul{
	list-style:none;
	display:flex;
}

main #bana ul li{
	flex:1;
}

main #bana ul li a{
	display:block;
	text-align:center;
	text-decoration:none;
	color:#000;
}

main #bana ul li a img{
	width:100%;
	max-width:100px;
}


/*####################################  640px  ####################################*/
@media(max-width:640px){

	main #bana ul{
		flex-wrap:wrap;
	}

	main #bana ul li{
		width:49%;
		flex:auto;
	}
}

/*   eventbox 
-------------------------------------------------------------------*/

#eventbox{
	margin-bottom:20px;
	display:flex;
	flex-wrap:wrap;
}

.eventbox{
    width:calc((100% / 3) - 10px);
	border:1px solid #ccc;
	padding:10px;
	margin:10px 5px 0;
	border-radius:5px;
}

.eventbox h4{
	cursor:pointer;
}

.eventbox h4:hover{
	color:red;
}

.eventbox p{
	line-height:1.3;
	margin:10px 0 0;
	font-size:14px;
}

.eventbox .cn{
	padding:2px 5px;
	margin:0 5px 0 0;
	color:#FFF;
	background:#666;
	font-size:12px;
	line-height:1.0;
	border-radius:3px;
	display:inline-block;
}

.eventbox .gn{
	background:#C60;
}

.eventbox .pn{
	background:#693;
}
.eventbox .mo{
	color:#000;
	background:#FFF;
	border-radius:0;
	border:1px solid #262626;
}

.eventbox .datetime span{
	font-size:14px;
	display:inline-block;
}

/*####################################  700px以下  ####################################*/
@media(max-width:700px){
.eventbox{
    width:calc((100% / 2) - 10px);
}

}

/*####################################  500px  ####################################*/
@media(max-width:500px){
.eventbox{
    width:calc(100% - 10px);
}

}
/* selecter
---------------------------------------------------------*/

#selecter{
	padding:3px 5px;
	border-radius:5px;
}


/* nav
---------------------------------------------------------*/
nav{
	padding:20px 0;
	background:#4267B2;
}

nav ul{
	margin:0 auto;
	width:100%;
	list-style:none;
	text-align:center;
}

nav ul li{
	border-right:1px solid #FFF;
	display:inline-block;
}

nav ul li:nth-child(1){
	border-left:1px solid #FFF;
}

nav ul li a{
	display:block;
	text-decoration:none;
	color:#000;
	padding:0 10px;
	color:#FFF;
}


/* footer
---------------------------------------------------------*/
footer{
	background:#4267B2;
	padding:20px 0;
}

footer *{
	color:#FFF;
	font-size:14px;
}

footer #copyright{
	text-align:center;
	font-size:40px;
}