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

/* Root */
html {
	font-size: 12px;
	height:100%;
}
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*-----------------------------------------------

BASE STYLE 

-----------------------------------------------*/
body{
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, "ＭＳ Ｐゴシック", sans-serif;
	color: #333;
	line-height:1.7;
	font-size:12px;
	-webkit-text-size-adjust: 100%;
}
p{
	line-height:1.7;
	margin:0 0 1em;
}
/* Heading */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.5;
}
h1{
	font-size:24px;
	font-size:200%;
	font-weight:normal;
	margin:0;
}
h2{
	font-size:14px;
	font-size:116.6666%;
	color:#fff;
	border:1px solid #fff;
	outline:1px solid #ccc;
	margin:16px 1px 11px;
	text-align:center;
	background: #0053fc url( "../images/bg-h2.png" ) repeat-x;
	line-height:24px;
	padding:1px;
	letter-spacing:0.1em;
}
h3{
	background-color:#bfcfff;
	font-size:14px;
	font-size:116.6666%;
	text-align:center;
	color:#000068;
	margin:16px 0 10px;
	letter-spacing:0.1em
}
h4{
	font-size:13px;
	font-size:108.3333%;
	font-weight:normal;
	color:#000068;
	margin:0 0 3px;
}
h4:before{
	content:"●";
}
h5 {
	font-size: 12px;
	font-size: 100%;
	margin:1em 0 0.5em;
}
h6 {
	font-size: 12px;
	font-size: 100%;
	margin:1em 0 0.5em;
}

/* Link */
a{
	color:#0053fc;
	text-decoration:none;
}
@media screen and (min-width: 768px) , print{
	a:hover{
		text-decoration:underline;
	}
}

/* List */
ul{
	list-style-type:none;
	padding:0;
	margin:0 0 1em 0;
}
dd{
	margin-left:0;
}


/* Media */
figure{
	margin:0;
}
img{
	vertical-align:bottom;
}

/* Form */
input, select {
    vertical-align:middle;
	line-height:normal;
}

p.notice{
	color:#F47;
	text-align:center;
	margin:15px 0px;
	font-weight:bold;
}
p.notice:before{
	content:"※";
}
@media screen and (min-width: 768px) , print{
	p.notice{
		display:none;
	}
}

/*-----------------------------------------------

LAYOUT 

-----------------------------------------------*/
#main-container{
	padding-bottom:20px;
}
#global-header{
	position:fixed;
	top:0;
	left:0;
	z-index: 998;
	width:100%;
	background:#fff;
	border-bottom:1px solid #ddd;
}
#gnav-container{
	height:calc(100vh - 45px);
	border-top:1px solid #ccc;
	overflow-y: scroll !important;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
#site-nav{
	border-bottom:88px solid #ddd;
}
#container,
#main-container{
	margin-top:45px;
}
#side-bar{
	margin-left:10px;
	margin-right:10px;
}
#main-content{
	margin-left:10px;
	margin-right:10px;
}
@media screen and (min-width: 768px) , print{
	body{
		background-color:#09f;
	}
	#gnav-container{
		display:block !important;
		overflow-y: visible;
		height:auto;
		border-top:none;
	}
	#site-nav{
		position:fixed;
		top:90px;
		left:0;
		width:100%;
		background:#0053fc url( "../images/menu_bg.jpg" ) repeat-x;
		z-index: 999;
		border-bottom:none;
}
	#global-header{
		height:138px;
		border-bottom:none;
	}
	#main-container,
	#site-top{
		width:950px;
		margin:0 auto;
		background-color:#fff;
		height:100%;
		position:relative;
	}
	#container,
	#main-container{
		margin-top:138px;
	}
	#main-container:after{
		content:"";
		display:table;
		clear:both;
	}
	#side-bar{
		width:170px;
		float:left;
		margin-right:0;
	}
	#main-content{
		width:750px;
		float:right;
		margin-left:0;
	}
	#global-footer #footer-link{
		margin:0 auto;
		width:950px;
	}
	#global-footer .copyright p{
		margin:0 auto;
		width:950px;
	}
}
@media print{
	#global-header{
		position:relative;
		top:auto;
		left:auto;
		border-bottom:none;
		height:auto;
	}
	#site-nav{
		position:relative;
		top:auto;
		left:auto;
	}
	#container{
		margin-top:0;
	}
}

/*-----------------------------------------------

HEADER 

-----------------------------------------------*/
#global-header #site-id{
	position:relative;
	z-index:998;
	height:44px;
	display:inline-block;
}
#global-header h1{
	width:265px;
}
#global-header h1 img{
	width:100%;
	height:auto;
}

@media screen and (min-width: 768px) , print{
	#global-header #site-id{
		height:70px;
	}
	#global-header h1{
		width:400px;
	}
}

@media screen and (min-width: 768px) , print{
	#global-header #site-id{
		height:90px;
	}
	#global-header h1{
		width:530px;
	}
}

/*-----------------------------------------------

HEADER > GLOBAL-NAV

-----------------------------------------------*/
#gnav{
	position:relative;
	z-index:997;
}
#gnav #gnav-container{
	display:none;
}
#gnav .menu-toggle {
	position:absolute;
	right:0;
	top:-44px;
	width:50px;
	height:44px;
	display:block;
}
#gnav .menu-toggle .menu-icon {
	display:block;
	height:100%;
	background:#ff8300 url( "../images/menu-toggle-icon.png" );
	background-size:50px 42px;
	border-radius:5px;
}
body.show-menu #gnav .menu-toggle .menu-icon{
	background: #ff8300 url( "../images/menu-toggle-icon-close.png" );
	background-size:50px 42px;
}
body.show-menu{
	height:100%;
	overflow: hidden;
	position: relative;
}
body.show-menu::after{
	content:"";
	display: block;
	width:100%;
	height:100vh;
	background-color:rgba(0,0,0,0.6);
	position: fixed;
	top:0;
	left:0;
}

/* header-sub */
#header-sub{
	padding-left:10px;
	font-size: 12px;
}
#header-sub h5{
	color:#004129;
	margin-bottom:15px;
}
#header-sub #brows-setting #font-set,
#header-sub #brows-setting #voice{
	margin-bottom:10px;
}
#header-sub #brows-setting #voice {
    display:inline-block;
}
#header-sub #srchBox p{
	margin-bottom:0;
}
#srchBox #srch #srchForm {
    text-align:left;
}
#srchBox #srchBtn {
    width:60px;
    height:21px;
}

/* site-nav */
#site-nav ul.main-menu{
	font-size:13px;
	font-size:108.3333%;
}
#site-nav ul,
#site-nav li{
	margin:0;
}
#site-nav ul li a{
	display:block;
	height:44px;
	line-height:44px;
	border-top:1px solid #ddd;
	color:#444;
	padding-left:10px;
}
#site-nav ul.main-menu >li p{
	background-color:#0053fc;
	color:#fff;
	padding:2px 10px;
	margin:0;
}
@media screen and (max-width: 767px){
	#site-nav ul.main-menu ul li{
		position: relative;
	}
	#site-nav ul.main-menu ul li:before{
		content: "";
		position: absolute;
		right: 10px;
		top: 18px;
		display: block;
		width: 8px;
		height: 8px;
		border-top: solid 1px #0053fc;
		border-right: solid 1px #0053fc;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}
#site-nav ul.main-menu ul li.has-child li{
	padding-left:25px;
}
@media screen and (min-width: 768px) , print{
	#gnav .menu-toggle {
		display:none;
	}
	#header-sub{
		position:absolute;
		top:-90px;
		right:0;
		padding-left:0;
		text-align:right;
		width:350px;
	}
	#header-sub h5{
		margin:5px 0;
	}
	#header-sub #brows-setting #font-set{
		display:inline-block;
		margin-bottom:7px;
	}
	#header-sub #brows-setting #voice{
		margin-bottom:7px;
	}
	#header-sub #srchBox{
		height:30px;
		line-height:0.8;
	}
	#srchBox #srch #srchForm {
		text-align:right;
	}
	/* site-nav */
	#site-nav ul.main-menu{
		width:950px;
		margin:0 auto;
	}
	#site-nav ul.main-menu::after{
		content:"";
		display: block;
		clear: both;
	}
	#site-nav ul.main-menu > li{
		float:left;
		width:25%;
		border-right:2px solid #fff;
		text-align:center;
		height:48px;
	}
	#site-nav ul.main-menu > li:hover{
		cursor:pointer;
	}
	#site-nav ul.main-menu > li:first-child{
		border-left:2px solid #fff;
	}
	#site-nav ul.main-menu >li p{
		text-indent:-9999px;
		height:48px;
	}
	#site-nav ul.main-menu >li.facility-guide p{
		background-image:url( "../images/menu_1.jpg" );
	}
	#site-nav ul.main-menu >li.event-guide p{
		background-image:url( "../images/menu_2.jpg" );
	}
	#site-nav ul.main-menu >li.school p{
		background-image:url( "../images/menu_3.jpg" );
	}
	#site-nav ul.main-menu >li.sports-info p{
		background-image:url( "../images/menu_4.jpg" );
	}
	#site-nav ul.main-menu > li ul{
		display:none;
		position:relative;
	}
	#site-nav ul.main-menu ul li.has-child li{
		padding-left:0;
		width:100%;
	}
	#site-nav ul.main-menu > li ul ul{
		position:absolute;
		top:0;
		left:100%;
		width:100%;
		padding-left:2px;
	}
	#site-nav ul li a{
		background-color:#FC0;
		height:auto;
		border-top:1px solid #fff;
		color:#00F;
		padding:10px;
		text-align:left;
		line-height:1.2;
		font-size:14px;
		font-size:116.6666%;
	}
}

/*-----------------------------------------------

BY-PURPOSE

-----------------------------------------------*/
#by-purpose{
	width:250px;
	margin:20px auto;
}
#by-purpose ul{
	text-align:center;
	margin-top:-10px;
}
#by-purpose ul li{
	text-align:center;
	margin-top:10px;
}
#by-purpose ul li a img{
	width:100%;
}

@media screen and (min-width: 768px) , print{
	#by-purpose{
		padding:0 20px;
		width:100%;
		max-width:950px;
	}
	#by-purpose ul{
		text-align:center;
		margin-left:-10px;
		margin-top:0;
	}
	#by-purpose ul::after{
		content:"";
		display: block;
		clear: both;
	}
	#by-purpose ul li{
		margin-top:0;
		width:33.3333%;
		float:left;
		padding-left:10px;
	}
}

/*-----------------------------------------------

SIDE-BAR (LOCAL-NAV)

-----------------------------------------------*/
#side-bar #local-nav{
	width:100%;
	overflow:hidden;
}
#side-bar #local-nav ul{
	margin:0 -10px 10px 0;
}
#side-bar #local-nav ul:after{
	content:"";
	display:table;
	clear:both;
}
#side-bar #local-nav ul li{
	width:50%;
	float:left;
	border-right:10px solid #fff;
	margin-bottom:5px;
	height:50px;
	display:table;
}
#side-bar #local-nav ul li a{
	background-color:#bfcfff;
	text-align:center;
	color:#333;
	font-size:13px;
	font-size:108.3333%;
	line-height:1.1;
	text-decoration:none;
	padding:0 5px;
	display:table-cell;
	vertical-align:middle;
}
#side-bar #local-nav ul li.selected a{
	background-color:#4675ff;
	color:#fff;
}
#side-bar #local-nav ul li#reservation a{
	background-color:#eee;
	padding:0;
}
#side-bar #local-nav ul li#yousquare a{
	background-color:#bfcfff;
	padding:0;
}
#side-bar #local-nav ul li#yousquare a:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}
#side-bar #local-nav ul li.shinsei a{
    background-color:#ffcc99;
}
#side-bar #local-nav ul li.shinsei.selected a{
	background-color:#ff850c;
	color:#fff;
}
@media screen and (min-width: 768px) , print{
	#side-bar #local-nav ul{
		margin:0;
	}
	#side-bar #local-nav ul li{
		width:100%;
		margin-bottom:10px;
		border-right:none;
	}
	#side-bar #local-nav ul li a{
		-webkit-transition: background-color 0.2s ease-out;
		   -moz-transition: background-color 0.2s ease-out;
			 -o-transition: background-color 0.2s ease-out;
			-ms-transition: background-color 0.2s ease-out;
				transition: background-color 0.2s ease-out;
	}
	#side-bar #local-nav ul li a:hover{
		background-color:#4675ff;
		color:#fff;
	}
	#side-bar #local-nav ul li#reservation a:hover{
		background-color:#ddd;
	}
	#side-bar #local-nav ul li#yousquare a:hover{
		background-color:#bfcfff;
	}
    #side-bar #local-nav ul li.shinsei a:hover{
        background-color:#ff850c;
        color:#fff;
    }
}
/*左メニューを画像化した場合*/
.spappear { display: none!important;}
@media screen and (max-width: 320px){
.sphide { display: none!important;}
}
@media screen and (max-width: 320px){
.spappear { display: block!important;}
}

/*-----------------------------------------------

GO PAGE TOP

-----------------------------------------------*/
#go-page-top{
	z-index:900;
	position:fixed;
	bottom:40px;
	right:10px;
}
#go-page-top a{
	background-color:#999;
	background:rgba(50,50,50,0.5);
	display:block;
    -webkit-transition: background 0.2s ease-out;
       -moz-transition: background 0.2s ease-out;
         -o-transition: background 0.2s ease-out;
        -ms-transition: background 0.2s ease-out;
            transition: background 0.2s ease-out;
}
#go-page-top a:hover{
	background:rgba(50,50,50,0.8);
}

@media screen and (min-width: 768px) , print{
	#go-page-top{
		bottom:10px;
		right:15px;
	}
}

/*-----------------------------------------------

FOOTER

-----------------------------------------------*/
#global-footer{
	clear: both;
	background-color:#fc0;
	text-align:center;
	padding-top:10px;
}
#global-footer a{
	color:#00f;
	font-size:14px;
	font-size:116.666%;
}
#global-footer #footer-link{
	text-align:left;
	padding-left:1em;
}
#global-footer .copyright{
	background-color:#0053fc;
}
#global-footer .copyright p{
	margin-bottom:0;
	color:#fff;
	font-size:13px;
	font-size:108.3333%;
	line-height:1.2;
	padding:5px 0;
}

@media screen and (min-width: 768px) , print{
	#global-footer{
		padding-top:0;
	}
	#global-footer #site-bottom{
		background-color:#fc0;
	}
	#global-footer #footer-link{
		display:table;
		text-align:center;
		padding-left:0;
	}
	#global-footer #footer-link li{
		display:table-cell;
		border-left:1px solid #fff;
		margin:0;
		padding:8px 0;
	}
	#global-footer #footer-link li:first-child{
		border-left:none;
	}
	#global-footer .copyright p{
		text-align:right;
		padding:10px 10px 63px;

	}
	#global-footer .copyright p small{
		font-size:13px;
		font-size:108.3333%;
	}
}
@media screen and (min-width: 768px) , print{
	#global-footer #footer-link{
		border-left:1px solid #fff;
		border-right:1px solid #fff;
	}
	#global-footer .copyright p{
		padding:10px 0 0 0;
	}
	#global-footer .copyright{
		height:90px;
		background: #ddd url( "../images/footer_bg.jpg" ) repeat-x;
	}
}

/*-----------------------------------------------

CONTENT-HEADER

-----------------------------------------------*/
#main-visual{
	width:100%;
}
#main-visual img{
	width:100%;
	height:auto;
}
#fasility-name h1{
	background:#787878  url( "../images/bg-facility-title.png" ) repeat-y;
	font-size:15px;
	font-size:125%;
	line-height:1.3;
	padding:4px 12px;
	color:#fff;
	font-weight:bold;
	margin-bottom:10px;
}

@media screen and (min-width: 768px) , print{
	#fasility-name h1{
		background:#787878  url( "../images/bg-facility-title-l.png" ) repeat-y;
		font-size:24px;
		font-size:200%;
		padding:8px 25px;
	}
}

/*-----------------------------------------------

CONTENT-HEADER > BREADCRUMB-NAV

-----------------------------------------------*/
#breadcrumb-nav{
	display:none;
}

@media screen and (min-width: 768px) , print{
	#breadcrumb-nav{
		display:block;
		margin:10px 0;
	}
	#breadcrumb-nav ul{
		margin:0 0 0 10px;
	}
	#breadcrumb-nav ul:after{
	  content:"";
	  display:table;
	  clear:both;
	}
	#breadcrumb-nav ul li{
		float:left;
	}
	#breadcrumb-nav ul li:before{
		content:">";
		color:#999;
		padding:0 7px;
	}
	#breadcrumb-nav ul li:first-child:before{
		content:"";
		padding:0;
	}
}

/*-----------------------------------------------

MAIN-CONTENT

-----------------------------------------------*/
section#facility-news .content,
section#course-status .content{
	background-color:#bfcfff;
	padding:10px 1em;
	margin-bottom:10px;
}
section#facility-news .content ul.news-list{
	margin-bottom:0;
}
section#facility-news .content ul.news-list li{
	text-indent:-7.5em;
	padding-left:7.5em;
	padding-top:6px;
	line-height:1.5;
}
section#facility-news .content ul.news-list li:first-child{
	padding-top:0;
}
section#facility-news .content ul.news-list li a{
	color:#333;
}
section#facility-news .content ul.news-list li time{
	float:left;
	display:block;
	width:8em;
}
section#facility-news .content ul.news-list li a:hover{
	text-decoration:none;
	color:#0053fc;
}
section#facility-news h2,
section#course-status h2{
	margin-top:0;
}
section .introduction{
	background-color:#bfcfff;
	padding:8px 1em;
	margin-bottom:10px;
}
section .introduction p{
	margin-bottom:0;
}
th{
	width:9em;
}

/* opening-hours */
#opening-hours .caption ul li{
	display:inline-block;
	position:relative;
	margin-right:1em;
}
#opening-hours table .nespa-day,
.nespa-day span{
	background-color:#9f9;
}
#opening-hours table .nespa-time,
.nespa-time span{
	background-color:#ffbfbf;
}
.nespa-day span,.nespa-time span{
	width:2em;
	height:1.5em;
	display:inline-block;
	position:relative;
	top:3px;
	margin-right:5px;
}

/* サイトマップ */
.sitemap {
	padding:0 0 10px;
}
.sitemap a{
	display:block;
	line-height:1;
}
@media screen and (min-width: 768px) , print{
	.sitemap {
		float:left;
		padding:3px 10px 0 10px;
	}
}
/* お知らせ/ブログ 日付後にスペース */
/*section#facility-news li time:after {
	content:" ： ";
}*/

section#facility-news a:before {
	content:" ： ";
}

/* マウスオーバー */
a.white:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}

/* 施設fasility-nameに電話FAX番号追加201706 */
.contact {
	float: right;
	font-size:60%;
	padding-right:30px;
}
.contact a {
	color: #FFF;
}

/* 施設用バナー追加201706 */
#link-banner {
	max-width: 918px;
	width: 100%;
	margin: -10px auto 10px auto;
}
#link-banner ul {
	width:306px;
	margin:0 auto;
}
@media screen and (min-width: 459px) {
	#link-banner ul {
	width:459px;
	}
}
@media screen and (min-width: 768px) , print{
	#link-banner ul {
	width:auto;
	margin:0;
	}
}
#link-banner ul::after {
	content:"";
	clear: both;
	display: block;
}
#link-banner ul li {
	display: block;
	float:left;
	/*width: 153px;*/
}
#link-banner ul li img {
	padding: 0 4px;
}

/* facebook,twitter設置用 */
#fbtw_wrap {
	width: 100%;
	margin: 0 auto;
}
ul {
	list-style: none;
}
.fbtw {
	padding: 0;
	margin: 0;
	width: 100%;
}
.fbli, .twli {
	padding: 0;
	width: 100%;
	display: block;
	text-align: center;
}
.fbdiv, .twdiv {
	width: 100%;
	margin: 0 auto;
}
/*768px以上*/
@media screen and (min-width: 768px) , print{
	#fbtw_wrap {
		width: 750px;
		margin: 0 auto;
	}
	.fbli, .twli {
		width: 365px;
		margin: 0 auto;
	}
	.fbli {
		float: left;
	}
	.twli {
		float: right;
	}
	/*.fbdiv, .twdiv {
		width: 365px;
		margin: 0 auto;
	}*/
}

#fbtw_wrap ul li .fbdiv h2 {
	background: #3c579c url( "./../images/bg-h2-fb.png" ) repeat-x;
}
#fbtw_wrap ul li .twdiv h2 {
	background: #2ea2f7 url( "./../images/bg-h2-tw.png" ) repeat-x;
}

#fbtw_wrap img {
	width: 200px;
}

/* facebook用 */
.facebook-wrapper {
	max-width: 500px;
	margin: 0 auto;
}
.facebook-wrapper > .fb-page {
	width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
	width: 100% !important;
}
/* 生涯学習センターバナー追加201807 */
.shisetsumenu {
	padding: 0!important;
	background-color: #fff!important;
}

.shisetsumenu img {
	width: 100%;
	max-width: 170px;
}

table.status-table{
	width: 100%;
	font-size: 120%;
	margin:6px 0;
}
table.status-table th,
table.status-table td{
	border:1px solid #ccc;
	background: #fff;
	padding:0.25em;
}
table.status-table td{
	font-size: 100px;
	text-align: center;
	padding:0.1em;
}
.koushin{
	margin:12px 0;
}
.koushin a{
	border:1px solid #0053fc;
	padding:0.15em 0.5em;
	display: inline-block;
	border-radius: 5px;
	background: #fff;
}
h4.course-title::before{
	content:"";
}
.course-title .now{
	float:right;
	font-size: 12px;
	color:#333;
}
.alert-list li{
	padding-left:1em;
	text-indent: -1em;
	line-height: 1.5;
	margin:2px 0;
}