header{
	height:300px;
	width:100%;
	background-image:url(img/top-background.jpg);
	background-position: center center;
	background-size:cover;
	padding:0;
	margin:0;
}
header div{
	padding:0;
	margin:0;
}
header div.top-image{
	height:100%;
	width:100%;
	background-repeat:no-repeat;
	background-position: center center;
}
header div.slide-image{
	width:100%;
	height:300px;
	margin:0 auto;
	background-repeat: no-repeat;
	background-position: center center;
}
header div.bx-wrapper{
	background-color:transparent !important;
	border:0 !important;
}
button.slick-arrow{
	display:none !important;
}
h3{
	font-family: verdana;
	margin-top:0;
}
h4{
	line-height:40px;
	font-size:22px;
	font-family: 'Gaegu', cursive,verdana;
	margin-bottom:0;
	margin-top:0;
}
div.message{
	border:4px solid #eee;
	background-color: #fdfdfd;
	padding:16px;
	font-size:16px;
	margin-top:20px;
	color:#666;
	font-weight: bold;
}
div.box{
	/*margin:20px ;
	*/
	margin-top:20px;
}
div#body > div{
	margin-top:10px;
}
div#topics{
	font-size:18px;
}
div#rightside{
	font-size:18px;
}
ul#rightside{
	padding-left:22px;
	list-style-type: none;
	list-style-image: url('img/newwindow.png');
}
ul#rightside li{
	padding-left:0;
	margin-left:0;
}
ul#rightside li a{
	background-repeat:no-repeat;
}
div#topics ul{
	padding-left:22px;
}
div#topics ul{
	margin:0;
	padding:0;
}
div#topics ul li{
	font-size:14px;
	list-style-type: none;
	margin:0;
	padding:0;
	margin-bottom:2px;
	background-color:#fafafa
}
div#topics ul li > strong{
	text-indent:0.5em;
	font-size:14px;
	line-height:26px;
	font-weight: bold;
	text-align: left;
	display: block;
	background-color:#dcf3ff;
	color:black;
}
div#topics ul li a{
	display: block;
	color:black;
	;
	padding:10px;
	font-weight: normal;
	font-size:14px;
	padding-left:15px;
	padding-right: 40px;
}
div#topics div.topics > strong{
	display:block;
	background-color: #fff;
	letter-spacing:2px;
	line-height:40px;
	font-weight: normal;
	text-align: left;
	font-size:22px;
}
div#topics,div#rightside{
	margin-top:-10px;
}
div#topics ul.link li{
	padding:4px;
	border-radius:3px;
	background-image:url(img/index/topics-link-bg.png);
}
div#topics ul.link li a{
	padding:6px;
	text-align: center;
	font-size:22px;
	margin:4px;
	display: block;
	color:#000;
	background-color:rgba(255, 250, 247, 0.95);
}
div#topics ul.link li a > span{
	display: block;
	font-size:16px;
	font-weight: bold;
	color:white;
	background-color:rgba(0,0,0,0.4);
}
div#topics ul.link li a:hover{
	/* background: rgba(230,240,255,0.5);
	*/
	background-color:rgba(255, 250, 247, 0.98);
	text-decoration: none;
}
div#topics ul.link li a span.oi{
	color:#ff6c00;
}
div#topics ul.volunteer li a{
	background-image:url(img/index/right-arrow.png);
	background-repeat: no-repeat;
	background-position: right center;
	border-bottom:1px solid #eee;
}
div#topics ul.volunteer li a:hover{
	text-decoration: none;
	background: rgba(230,240,255,0.5);
	background-image:url(img/index/right-arrow.png);
	background-repeat: no-repeat;
	background-position: right center;
}
div#volunteer dl span.oi{
	color:#ffa700;
	font-size:80%;
}
div#schools{
	padding-top:10px;
	margin-top:10px;
	width:100%;
}
div#schools a{
	height:80px;
}
div#schools a > span{
	font-size:18px;
	margin:0;
	text-indent: 0 !important;
	padding-left: 46px !important;
	background-size:38px 38px;
	background-position: 1px 5px;
	background-repeat: no-repeat;
	line-height:25px !important;
	height:80px !important;
	display: block;
}
div#schools a > span > span{
	display: block;
	font-size:80%;
}
div#schools a.school{
	margin-bottom:6px;
	color:#333;
	padding:15px;
}
div#schools a.school:hover{
	text-decoration:none;
	color:#666;
	background-color:#fafafa;
}
header div.mobile{
	background-size:contain;
	background-repeat: no-repeat;
}
div.bx-controls-direction{
	display: none !important;
}
div.bx-wrapper{
	box-shadow: none !important;
}
*.slider{
	display: none;
}
.bx-viewport div.slider{
	display: block;
}
*.top-message div{
	font-size:24px;
	text-shadow:0 0 1px #555,0 0 1px #777,0 0 1px #999,2px 2px 3px #000;
	color:white;
}
*.indent{
	margin-left:1em;
}
a.ugscd-banner{
	display: inline-block;
	width:100%;
	height:calc( 2em + 40px );
	background-image:url(img/index/ugscd-banner.png);
	border-radius:5px;
	box-shadow:0 0 2px 1px #eee;
}
a.ugscd-banner div{
	display: inline-block;
	width:100%;
	padding:10px;
	padding-left:62px;
	background-image:url(../../image/ugscd.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size:40px;
	border-radius: 5px;
	color:#333;
	white-space: nowrap;
}
a.ugscd-banner div strong{
	display: block;
	font-size:105%;
}
a.ugscd-banner:hover{
	box-shadow:0 0 2px 1px #ccc;
}
@media (max-width: 766px) {
	div#schools a h4{
		line-height:50px !important;
		height:50px;
	}
}
@media (min-width: 567px) {
	header div.fullsize{
		display: block !important;
	}
	header div.mobile{
		display: none !important;
	}
	header div.sl-mobile{
		display: none !important;
	}
	header div.top-image div.sl-full{
		display: block !important;
		position: absolute !important;
		right:0px;
		top:180px;
		width: 70%;
		height:130px;
		background-color:rgba(255,255,255,0.0);
	}
	header div.top-image{
		position: relative !important;
		background-image:url(img/kokoro-main.png);
		background-size: contain;
		height: calc(100% - 20px);
		max-width: 900px;
		margin:0 auto;
	}

	a.ugscd-banner div strong{
		display: block;
		font-size:100%;
	}
}
/* Tablet */
@media (max-width: 567px) {
	header div.fullsize{
		display: none !important;
	}
	header div.mobile{
		display: block !important;
	}
	header div.sl-full{
		display: none !important;
	}
	header div.sl-mobile{
		display: block !important;
	}
	header div.top-image{
		background-image:url(img/kokoro-mobile.png);
		background-size: contain;
		max-width: 900px;
		margin:0 auto;
	}
	div#schools a h4{
		font-size:14px;
		line-height:15px !important;
		height:50px;
		padding-top:12px;
	}
	header div.top-image div.sl-mobile{
		display: block !important;
		position: absolute !important;
		right:0px;
		top:210px;
		width: 100%;
		height:130px;
		background-color:rgba(255,255,255,0.0);
		text-align: center;
	}
	header div.top-image div.sl-mobile img{
		display: block;
		margin:0 auto;
	}
	header div.top-image{
		position: relative !important;
		background-image:url(img/kokoro-main.png);
		background-size: contain;
		height: calc(100% - 20px);
		max-width: 900px;
		margin:0 auto;
		text-align: center;
	}
}
/* Tablet */
@media (max-width: 500px) {
	header div.top-image{
		background-image:url(img/kokoro-mobile.png);
		background-size:95%;
		background-position: center center;
	}
	div.top-message div img{
		display: block;
		margin:0 auto;
	}
}
/* Mobile */
@media (max-width: 380px) {
	header div.top-image{
		background-image:url(img/kokoro-mobile.png);
		background-size:95%;
		background-position: center center;
	}
}