@charset "utf-8";


/* header
------------------------------------------------ */
@media only print, only screen and (min-width: 641px){
	ul#gnavi{
		margin:0 auto 60px;
	}
}

/* contents
------------------------------------------------ */
div#contents{
	padding:0;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	background-color:transparent;
	overflow:visible;
}
div#contents div.inner{
	max-width:1024px;
	margin:0 auto;
	padding:60px 0;
}
h2.ttl {
	width: 480px;
	position: relative;
	margin: 0 auto 60px;
	padding: 0 0 15px;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px #4e7aff solid;
}
h2.ttl::after {
	width: 17px;
	height: 17px;
	content: "";
	position: absolute;
	bottom: -9px;
	left: calc(50% - 17px/2);
	display: block;
	text-align: center;
	letter-spacing: normal;
	border-bottom: 1px #4e7aff solid;
	border-right: 1px #4e7aff solid;
	background-color: #fff;
	transform: rotate(45deg);
}

@media screen and (max-width:1084px){
	div#contents div.inner{
		width:calc(100% - 120px);
	}
}
@media screen and (max-width: 960px) {
	h2.ttl {
		margin-bottom:30px;
	}
}
@media screen and (max-width: 540px) {
	div#contents div.inner{
		width:calc(100% - 60px);
	}
	h2.ttl {
		width: 100%;
		font-size: 24px;
	}
	h2.ttl strong {
		width: 100%;
		margin-left: 0;
	}
}



/* slideshow
------------------------------------------------ */
div#slideshow ul#slider li a,
div#slideshow ul#slider li span{
	/*padding:600px 0 0 0;*/
	padding:300px 0 0 0;
}


/* concept
------------------------------------------------ */
div#contents div#concept{
	width:42em;
	position: absolute;
	/*top:calc(90px + 300px - 6em);*/
	top:calc(90px + 150px - 6em);
	left:calc(50vw - 21em);
	padding:0;
	text-align: center;
	background-color:transparent;
}
div#concept p{
	display: inline;
	padding: 0 15px;
	color: #fff;
	font-size: 36px;
	font-weight:bold;
	text-align: center;
	/*background-color: rgba(0,0,0,0.5);*/
}
div#concept p br.sp{
	display:none;
}
@media screen and (max-width:760px){
	div#contents div#concept{
		width:100vw;
		left:0;
	}
	div#concept p {
		font-size: 30px;
	}
}
@media screen and (max-width:540px){
	div#concept p {
		font-size: 24px;
	}
	div#concept p br.sp{
		display:block;
	}
}
@media screen and (max-width:420px){
	div#concept p {
		font-size: 20px;
	}
}

/* activity
------------------------------------------------ */
div#contents div#activity{
	width:100vw;
	max-width:none;
	margin:0 0 0 calc(-50vw + 50%);
}
div#activity ul{
	max-width:1024px;
	margin:0 auto;
}
div#activity ul li{
	width:calc(25% - 22.5px);
	margin:0 30px 30px 0;
}
div#activity ul li a{
	width:100%;
	position:relative;
	display:block;
	padding-top:calc(60% + 15px);
}
div#activity ul li a:before{
	width:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
	display:block;
	padding-top:60%;
	border-radius:15px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:60% auto;
	overflow:hidden;
	transition:all 0.3s linear;
}
div#activity ul li:nth-child(4n){
	margin-right:0;
}
div#activity ul li:nth-child(1) a:before{background-color:#64966e;background-image:url(../img/top/act1.png);}
div#activity ul li:nth-child(2) a:before{background-color:#32aad2;background-image:url(../img/top/act2.png);}
div#activity ul li:nth-child(3) a:before{background-color:#b48296;background-image:url(../img/top/act3.png);}
div#activity ul li:nth-child(4) a:before{background-color:#e182aa;background-image:url(../img/top/act4.png);}
div#activity ul li:nth-child(5) a:before{background-color:#beaa50;background-image:url(../img/top/act5.png);}
div#activity ul li:nth-child(6) a:before{background-color:#5abe8c;background-image:url(../img/top/act6.png);}
div#activity ul li:nth-child(7) a:before{background-color:#006cb5;background-image:url(../img/top/act7.png);}
div#activity ul li:nth-child(8) a:before{background-color:#3caa96;background-image:url(../img/top/act8.png);}

div#activity ul li:hover a::before{
	background-size:65% auto;
}

@media screen and (max-width:1084px){
	div#activity ul{
		width:calc(100% - 120px);
	}
	div#activity ul li{
		width:calc(25% - 11.25px);
		margin-right:15px;
		margin-bottom:15px;
	}
	div#activity ul li a{
		padding-top:calc(60% + 5px);
	}
}
@media screen and (max-width:860px){
}
@media screen and (max-width:640px){
	div#activity ul{
		width:calc(100% - 60px);
	}
}
@media screen and (max-width:540px){
	div#activity ul li{
		width:calc(50% - 7.5px);
	}
	div#activity ul li:nth-child(4n){
		margin-right:15px;
	}
	div#activity ul li:nth-child(2n){
		margin-right:0;
	}
	div#activity ul li a{
		font-size:16px;
	}
}
@media screen and (max-width:420px){
	div#activity ul {
		width: calc(100% - 30px);
	}
	div#activity ul li a{
		font-size:14px;
	}
}
@media screen and (max-width:350px){
	div#activity ul{
		width:calc(100% - 60px);
	}
}


/* topics_list
------------------------------------------------ */
div#contents div#topics.inner{
	width:100%;
}
div#topics.inner{
	text-align:center;
}
div#topics_list{
	margin-bottom:30px;
}
div#topics_list div.tab_box{
	display:none;
}
div#topics_list div.tab_box.active{
	display:block;
}


/* calendar
------------------------------------------------ */
div#contents div#programs.inner{
	width:100%;
}
div.calendar_box{
	overflow:hidden;
}

/* link_rule
------------------------------------------------ */
#link_rule{
	color:#0063c6;
	text-decoration:underline;
	cursor:pointer;
	transition:all 0.3s linear;
}
#link_rule:hover{
	color:#ff6400;
	text-decoration:none;
}
#link_rule + ul{
	display:none;
	margin-top:10px;
	margin-bottom:-15px;
}
#link_rule + ul li{
	width:100%;
	display:block;
	margin-bottom:10px;
}