@charset "utf-8";
/* CSS Document */

body{
	width:100%;
	color:#2222;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	line-height:1.05;
	text-align:left;
	padding:0;
	margin:0;
	background:#fff;
	position:relative;
}
	
/* all */
h1,h2,h3,h4,h5,p,dt,dd,li,th,td,address,strong,em,table,dl,ul,ol,img,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary
{
	padding:0;
	margin:0;
	background:transparent;
}

/* font */
h1,h2,h3,h4,h5,p,dt,dd,li,th,td,a,address,strong,em,form,input,textarea,select,submit,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
	color:inherit; line-height:inherit; font-family:inherit; font-size:inherit;
}

/* indivisual */
a{
	border:none; color:inherit; text-decoration:underline; word-wrap: break-word;
}
a:hover{
	text-decoration:none;
}
address,em{
	font-style:normal;
}
ul,ol{
	list-style:none none outside;
}
img{
	display:block; border:none;
}

/* jquery */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0; z-index:9999}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(img//loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(img//controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(img//controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(img//controls.png) no-repeat top center; width:31px; height:31px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}

/* common */
a:hover img{ opacity:0.64; }
.ac:after{ clear:both; content:""; display:block; }

/* contents */

.grp .read{
}

.grp .read{
	font-size:1.5em;
	line-height:1.5;
	text-align:center;
	margin:0 0 1em 0;
}

.grp .read2{
	font-size:1.5em;
	font-weight:bold;
	letter-spacing:0.2em;
	line-height:1.5;
	text-align:center;
	text-indent:0.2em;
	margin:0 0 1em 0;
}

.grp .image{
	margin:0 0 1.5em 0;
	position:relative;
}

.grp .image img{
	max-width:100%;
	min-width:100%;
	height:auto;
	margin:0 auto;
}

.post img{
	max-width:100%;
	min-width:100%;
	height:auto;
	margin:0 auto;
}

.post *:last-child{
	margin-bottom:0;
}

.post h3{
	color:#329c90;
	font-size:1.5em;
	letter-spacing:0.2em;
	text-align:center;
	text-indent:0.2em;
	margin:1.5em 0 0.5em 0;
}

.post h4{
	color:#329c90;
	letter-spacing:0.1em;
	text-align:center;
	text-indent:0.1em;
	margin:1.5em 0 0.5em 0;
}

.post p{
	line-height:1.75;
	margin:0 0 1rem 0;
}

.post table{
	width:100%;
	margin:0 0 1em 0;
	border-bottom:1px solid #cee9e6;
}

.post table th{
	color:#329c90;
	line-height:1.5;
	padding:0.5em 1em;
	border-top:1px solid #cee9e6;
}
.post table td{
	line-height:1.5;
	padding:0.5em 1em;
	border-top:1px solid #cee9e6;
}

.post ul{
	margin:0 0 1em 1.5em;
	list-style:disc;
}

.post ol{
	margin:0 0 1em 1.75em;
	list-style:decimal;
}

.post .no-list{
	margin-left:0;
	list-style:none;
}

.post li{
	line-height:1.5;
	padding:0.125em 0;
}

.post address{
	line-height:1.5;
	padding:0 0 0 0.5em;
	margin:0 0 1em 0;
	border-left:2px solid #329c90;
}

.aligncenter{
	text-align:center;
}

.aligncenter img{
	margin-left:auto;
	margin-right:auto;
}

.em3{
	width:3em !important;
}

.em4{
	width:4em !important;
}

.em5{
	width:5em !important;
}

.em6{
	width:6em !important;
}

.em7{
	width:7em !important;
}

.em10{
	width:10em !important;
}

.limit{
	color:#f62e95;
	font-weight:bold;
}

.limit strong{
	font-size:1.5em;
	font-family: 'Oswald', sans-serif;
}

.large{
	font-size:1.25em;
}

.max{
	font-size:1.5em;
}

.color{
	color:#329c90;
}

.wf{
	font-family: 'Oswald', sans-serif;
}

.middle{
	margin-top:3rem !important;
}

#back a{
	display:block;
	color:#fff;
	font-family: 'Oswald', sans-serif;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	padding:0.75em 0;
	margin:2em 0 0 0;
	background:#4bada2;
}

#back a:hover{
	background:#329c90;
}
	
#footer{
	width:100%;
	color:#fff;
	text-align:center;
	padding:1em 0;
	background:#329c90;
}
	
#footer address{
	line-height:1.5;
}

#how dl{
	width:50%;
	float:left;
	margin:3em 0 0 0;
	position:relative;
}

#how dl:nth-child(-n+2){
	margin-top:1em;
}

#how dl:nth-child(2n+1){
	clear:both;
}

#how dt{
	width:5em;
	color:#fff;
	letter-spacing:0.2em;
	text-align:center;
	text-indent:0.2em;
	padding:1em 0 1.25em 0;
	background:#33a396;
	border-radius:2.5em;
	position:absolute;
	top:-1em;
	left:0;
}

#how dt strong{
	display:block;
	font-size:1.5em;
	font-family: 'Oswald', sans-serif;
}

#how dt span{
	display:block;
	margin:0.25em 0 0 0;
}

#how dt span{
	display:block;
	margin:0.25em 0 0 0;
}

#how dd{
	text-align:center;
	margin:0 1em;
}

#how dd img{
	display:block;
	margin:0 0 0.5em 0;
}

#course li,
#report li{
	width:33.333%;
	float:left;
	margin:1em 0 0 0;
}

#course li:nth-child(-n+3),
#report li:nth-child(-n+3){
	margin-top:0;
}

#course li a,
#report li a{
	display:block;
	margin:0 0.5em;
}

#course li span{
	display:block;
	text-align:center;
	margin:0 0 0.25em 0;
}

#course li .mapLink{
	display:block;
	font-size:0.8em;
	text-align:center;
	margin:0.25rem 0 0 0;
}

/* device */
@media screen and (min-width:1120px){
	
	#header{
		width:100%;
		position:relative;
	}
	
	#header .menu{
		width:160px;
		position:fixed;
		top:50%;
		left:0px;
		z-index:9;
	}
	
	#header .menu nav{
		width:160px;
		position:absolute;
		top:-236px;
		left:0px;
	}
	
	#header h1 img{
		width:160px;
	}
	
	#header .image img{
		float:left;
		max-width:50%;
		min-width:50%;
		height:auto;
	}
	
	#header .text{
		position:absolute;
		top:50%;
		left:50%;
	}
	
	#header .text img{
		position:absolute;
		top:-46px;
		left:-307px;
	}
	
	#header .text2{
		position:absolute;
		top:50%;
		left:50%;
	}
	
	#header .text2 img{
		position:absolute;
		top:44px;
		left:-264px;
	}
	
	#header nav ul{
		width:160px;
	}
	
	#header nav li{
		width:160px;
		background:#fff;
	}
	
	#header nav li a{
		display:block;
		width:160px;
		padding:8px 0;
		opacity:1;
	}
	
	#header nav li a img{
		width:128px;
		margin:0 auto;
	}
	
	#header nav li:first-of-type{
		padding-top:8px;
	}
	
	#header nav li:nth-child(5){
		padding-bottom:8px;
	}
	
	#header nav li:last-of-type{
		padding-top:8px;
		padding-bottom:8px;
		background:#231714;
	}
	
	.grp{
		margin:102px 0 0 0;
		padding:68px 0 0 0;
		position:relative;
	}
	
	.grp:nth-child(2n+1){
		padding-bottom:3em;
		background:#eff8f7;
	}

	.grp .image .title{
		display:block;
		position:absolute;
		top:50%;
		left:50%;
	}
	
	.grp .image .title img{
		position:absolute;
		top:-102px;
		left:-240px;
		max-width:inherit;
		min-width:inherit;
	}

	h2{
		width:100%;
		position:absolute;
		top:-22px;
		left:0px;
	}

	h2 img{
		margin:0 auto;
	}

	.post{
		width:800px;
		margin:0 auto;
		position:relative;
	}
	
	#about{
		padding:80px 0 0 0;
		margin:0;
	}

	#about h2{
		margin:0 0 20px 0;
		position:static;
	}

	#about p{
		line-height:2;
		letter-spacing:0.2em;
		text-align:center;
		text-indent:0.2em;
	}

	#about li{
		width:160px;
		position:absolute;
		bottom:20px;
		left:-72px;
	}

	#about li:nth-child(2){
		left:auto;
		right:-72px;
	}
	
	#about li img{
		border-radius:80px;
	}
}


@media screen and (min-width:980px) and (max-width:1119px){
	
	#header{
		position:relative;
	}
	
	#header img{
		max-width:100%;
		min-width:100%;
		height:auto;
		margin:0 auto;
	}
	
	#header h1{
		width:12%;
		position:absolute;
		top:21%;
		left:44%;
	}
	
	#header h1 a:hover img{
		opacity:1;
	}
	
	#header .image img{
		float:left;
		max-width:50%;
		min-width:50%;
		height:auto;
	}
	
	#header .text{
		width:50%;
		position:absolute;
		top:48.5%;
		left:25%;
	}
	
	#header .text2{
		width:50%;
		position:absolute;
		top:66.5%;
		left:25%;
	}
	
	#header nav ul{
		background:#fff;
	}
	
	#header nav li{
		width:16.666%;
		float:left;
	}
	
	#header nav li:last-of-type{
		background:#231714;
	}
	
	#header nav li a{
		display:block;
		padding:0.75em 1em;
		border-right:1px solid #329c90;
	}
	
	#header nav li:last-of-type a{
		border-right:1px solid #231714;
	}
	
	.grp{
		margin:102px 0 0 0;
		padding:68px 0 0 0;
		position:relative;
	}
	
	.grp:nth-child(2n+1){
		padding-bottom:3em;
		background:#eff8f7;
	}

	.grp .image .title{
		display:block;
		position:absolute;
		top:50%;
		left:50%;
	}
	
	.grp .image .title img{
		position:absolute;
		top:-102px;
		left:-240px;
		max-width:inherit;
		min-width:inherit;
	}

	h2{
		width:100%;
		position:absolute;
		top:-22px;
		left:0px;
	}

	h2 img{
		margin:0 auto;
	}

	.post{
		width:800px;
		margin:0 auto;
		position:relative;
	}
	
	#about{
		padding:80px 0 0 0;
		margin:0;
	}

	#about h2{
		margin:0 0 20px 0;
		position:static;
	}

	#about p{
		line-height:2;
		letter-spacing:0.2em;
		text-align:center;
		text-indent:0.2em;
	}

	#about li{
		width:160px;
		position:absolute;
		bottom:20px;
		left:-72px;
	}

	#about li:nth-child(2){
		left:auto;
		right:-72px;
	}
	
	#about li img{
		border-radius:80px;
	}
}

@media screen and (max-width:979px){
	
	html{
		font-size:62.5%;
	}

	body{
		font-size:1.4rem;
	}
	
	#header{
		position:relative;
	}
	
	#header img{
		max-width:100%;
		min-width:100%;
		height:auto;
		margin:0 auto;
	}
	
	#header h1{
		width:40%;
		position:absolute;
		top:18.5%;
		left:30%;
	}
	
	#header h1 a:hover img{
		opacity:1;
	}
	
	#header .text{
		width:80%;
		position:absolute;
		top:39%;
		left:10%;
	}
	
	#header .text2{
		width:80%;
		position:absolute;
		top:45.5%;
		left:10%;
	}
	
	#header nav ul{
		background:#fff;
	}
	
	#header nav li{
		width:33.333%;
		float:left;
		border-top:1px solid #329c90;
	}
	
	#header nav li:last-of-type{
		background:#231714;
	}
	
	#header nav li:nth-child(-n+3){
		border-top:none;
	}
	
	#header nav li a{
		display:block;
		padding:0.75em 1em;
		border-right:1px solid #329c90;
	}
	
	#header nav li:nth-child(3n) a{
		border-right:1px solid #fff;
	}
	
	#header nav li:last-of-type a{
		border-right:1px solid #231714;
	}

	.grp .image .title{
		display:block;
		width:58%;
		position:absolute;
		top:0;
		left:21%;
	}

	h2{
		margin:3em auto 1em auto;
	}
	
	h2 img{
		max-width:100%;
		min-width:100%;
		height:auto;
		margin:0 auto;
	}

	.post{
		margin:0 3%;
	}

	.post iframe{
		width:100% !important;
	}

	.post table th,
	.post table td{
		font-size:80%;
	}

	#about p{
		line-height:2;
		text-align:left;
	}
	
	#about p br{
		display:none;
	}

	#about li{
		width:50%;
		float:left;
	}

	#how dd{
		font-size:0.8em;
		margin:0 1rem;
	}
}