@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

header,nav,footer {display:block;}

/*================================================
 *  一般・共通設定
 ================================================*/
html {
	min-height: 100%;
	position: relative;
	overflow-y: scroll;
}

body {
	font-size: 14px;
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #fff;
	width: 100%;
	text-align: left;
	text-justify: inter-ideograph;
	min-height: 100%;
	margin-bottom: 7em;
}

.inner {
	position: relative;
	width: 980px;
	margin: 0 auto;
}

nav {
	width: 100%;
	background: #fff;
}

nav:after {
	content: '';
	display: block;
	clear: both;
}

#contents {
	overflow: hidden;
	width: 980px;
	margin: 25px auto;
	background: #fff;
	height: 100%;
	padding-bottom: 10px;
}

#main {
	box-sizing: border-box;
	overflow: hidden;
	float: right;
	width: 698px;
	height: 100%;
}

#sub {
	box-sizing: border-box;
	overflow: hidden;
	float: left;
	width: 245px;
}

footer {
	position: fixed;
	box-sizing: border-box;
	width: 100%;
	margin: 5px auto 0 auto;
	overflow: hidden;
}

a {
	color: #3A668B;
	text-decoration: none;
}

a:hover {
	color: #2452dc;
	text-decoration: underline;
}

h2 {
	margin-bottom: 0.5em;
	padding: 10px 8px;
	font-size: 24px;
	color: #2452dc;
	border-bottom: 1px dotted #87A345;
	border-top: 3px solid #87A345;
	background: -webkit-linear-gradient(top, #fff 0%, #d8d8d8 100%);
	background: linear-gradient(to bottom, #fff 0%, #d8d8d8 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}

h3 {
	padding: .5em .75em;
	font-size: 18px;
	border-left: 6px solid #87A345;
	margin: 1em 0 0.5em 0;
	background-color: #eee;
}

h4 {
	margin: 0.5em 0;
	text-indent: 0.25em;
	font-size: 15px;
	padding: .75em 0 .25em 0;
	border-bottom: 3px double #87A345;
}

p {
	margin: .5em 0 .5em .25em;
	line-height: 1.5em;
}

ul, ol, dl {
	margin: 0;
}

ol li {
	list-style: decimal;
}

li {
	margin-left: 2em;
	line-height: 1.5em;
}

ul.request {
	margin-left: 2em;
	line-height: 1.5em;
	list-style: none;
}

table {
	border-collapse: collapse;
	border: 1px solid #ddd;
	line-height: 1.5em;
	table-layout: fixed;
	width: 100%;
}

th, td {
	padding: 8px;
	text-align: left;
	vertical-align: middle;
	border: 1px solid #ddd;
}

img.icon {
	margin: 0 3px;
	vertical-align: middle;
}

/* #mainで使用するリスト */
#main ul li {
	position: relative;
}

#main ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #2452dc;
	border-radius: 100%;
}

#main ul li li {
	position: relative;
}

#main ul li li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 5px;
	height: 5px;
	background-color: #fff;
	border: 1px solid #2452dc;
	border-radius: 100%;
}

/*================================================
 *  トップページ
 ================================================*/
/* クイックリンクの設定 */
#quicklink {
	box-sizing: border-box;
	overflow: hidden;
	float: left;
	width: 245px;
	margin-bottom: 1em;
}

#quicklink ul li {
	margin-left: 0;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 1em;
	border-bottom: dashed 1px silver;
}

#quicklink ul li.top {
	margin-left: 0;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 1em;
	border-top: dashed 1px silver;
	border-bottom: dashed 1px silver;
}

/* 開室カレンダーの設定 */
#calendar {
	box-sizing: border-box;
	overflow: hidden;
	float: left;
	width: 367px;
	padding: 0 0 0 37px;
	margin-bottom: 1em;
}

#calendar ul {
	padding: 10px 0 0 0;
	position: relative;
}

#calendar ul li::after {
	display: block;
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 8px;
}

#calendar ul li.Longday::after {
	background-color: #87A345;
	border: 1px solid #87A345;
	top: 12px;
}

#calendar ul li.Shortday::after {
	background-color: #b8dce6;
	border: 1px solid #b8dce6;
	top: 34px;
}

#calendar ul li.Holiday::after {
	background-color: #fff;
	border: 1px solid #333;
	top: 55px;
}

/* トップ画像の設定 */
div.slide-show {
    width: 331px; /* スライドショーの幅 */
    max-width: 100%; /* スマホで表示が欠けないように */
    float: right;
    position: relative;
}

.slide-show img { 
    animation: show 16s infinite; /* 16秒のスライドショーを繰り返し */
    max-width: 100%;
    height: auto;
    opacity: 0;
    position: absolute; /* 画像を重ねて表示 */
    left: 0;
    top: 0;
}
 
@keyframes show {
    0% {opacity: 0}
    17% {opacity: 1}
    33% {opacity: 1}
    50% {opacity: 0}
}
 
.slide-show img:nth-of-type(1) {
    position: relative;
}
 
.slide-show img:nth-of-type(2) {
    animation-delay: 0s;
}
 
.slide-show img:nth-of-type(3) {
    animation-delay: 4s;
}
 
.slide-show img:nth-of-type(4) {
    animation-delay: 8s;
}

.slide-show img:nth-of-type(5) {
    animation-delay: 12s;
}

 

#topimg img, #main img.map {
    max-width: 100%;
    height: auto;
    margin-bottom: 1em;
    width: 100%\9; /* IE8にのみ適用 */
}

/* ニュース部分の設定 */
#news {
	margin: 2em auto;
	border-bottom: 1px solid #87A345;
	width: 100%;
	clear: both;
}

/*================================================
 *  利用案内ページ
 ================================================*/
/* テーブルの設定 */
table.guide {
	margin: 8px 0;
}
tr.at {
	background: #87A345;
}

.guide th {
	background: #b8dce6;
	border: 1px solid #FFFFFF;
}

/* 図書室マップの画像設定 */
img.libmap {
	max-width: 100%;
	height: auto;
	width: 100%\9; /* IE8にのみ適用 */
	margin: 5px 0;
}

/* 請求記号ラベルテーブルの設定 */
table.clnlabel {
	border: none;
	border-collapse: collapse;
	margin: 15px 10px 10px 0;
}

.clnlabel th {
	border: solid 3px #C1CECF;
	text-align: center;
	width: 72px;
}

.clnlabel td {
	border: none;
	width: auto;
}

/* 請求記号ラベルテーブルの設定(数理) */
table.clnlabel2 {
	border: none;
	border-collapse: collapse;
	margin: 15px 10px 10px 0;
}

.clnlabel2 th {
	border: solid 3px #225662;
	text-align: center;
	width: 72px;
}

.clnlabel2 td {
	border: none;
	width: auto;
}

/*================================================
 *  カレンダー共通の設定、クラス別の背景色等の設定
 ================================================*/
/* 夜間開室あり（長い） */
div.cal_wrapper table.cal tr td div.Longday {
	background-color: #87A345;
}

/* 夜間開室なし(短い） */
div.cal_wrapper table.cal tr td div.Shortday {
	background-color: #b8dce6;
}

/* 閉室時の表示設定（背景白） */
div.cal_wrapper table.cal tr td div.Holiday {
	background-color: #fff;
}

/* 昨日以前の表示形式（白くなる） */
div.cal_wrapper table.cal tr td div.backward {
	color: #ccc;
	font-weight: normal;
	background-color: #fff;
}

/*================================================
 *  カレンダー全体の設定
 ================================================*/
/* カレンダー全体の余白(上下、左右） */
div.cal_wrapper {
	height: auto;
	overflow: hidden;
}

/* カレンダーの月移動ボタンの位置 */
div.cal_wrapper table.cal tr th div.cal_ui {
	float: right;
}

/* カレンダーの月移動ボタンについて */
div.cal_wrapper table.cal tr th div.cal_ui input {
	border: solid 1px #ccc;
	background-color: #fff;
	font-size: 12px;
	margin: 0px 1px;
	padding: 1px 5px;
	border-radius: 3px;
}

/* カレンダー全体中身について */
div.cal_wrapper table.cal tr td {
	border-top: solid 1px;
	border-color: #ccc;
	font-size: 14px;
	text-align: center;
	padding: 2px;
}

/* 日付部分のセル設定 */
div.cal_wrapper table.cal tr td div {
	position: relative;
	padding: 3px 5px;
	font-size: 14px;
	text-align: center;
	background-color: #fff;
}

/* スマートフォン向けの表示形式 */
@media screen and (max-width:767px) {
	div.cal_wrapper {
		height: auto;
		width: 100%;
	}
}

/*================================================
 *  アクセス（交通案内）のページ
 ================================================*/
#map {
	position: relative;
	padding-bottom: 90%;
	height: 0; 
	overflow: hidden;  
}

.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*================================================
 *  講習会のページ
 ================================================*/
/* 資料リスト：リスト */
ol.rlist {
	counter-reset: rlist;
}

ol li.rlist {
	position: relative;
	display: block;
	padding: 10px 0 0 0;
}
     
ol li:before {
	counter-increment: rlist;
	content: counter(rlist);
	position: absolute;	
	left: -26px;
	background: #b8dce6;
	height: 18px;
	width: 18px;
	border: 2px solid #3b98b2;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border-radius: 30px;
}

li.rlist:after {
	content: ''; 
	display: block; 
	position: absolute;
}

/* 資料リスト：凡例 */
p.block {
	margin: 0 0 1em 0;
	padding: 5px;
	border: 1px dashed #87A345;
}

img.k_rlist {
	width: 22px;
	height: 22px;
	margin: 0 5px 0 0;
	vertical-align: middle;
}

/* 資料リスト：小見出し */
p.rlistsub {
	position: relative;
	padding: .25em .5em .25em .75em;
	font-size: 18px;
	border-left: 6px solid #87A345;
	margin: .5em 0 0.5em 0;
	background-color: #eee;
}

/* 資料リスト：アイコン */
img.rlist {
	width: 22px;
	height: 22px;
	margin: 0 3px;
	vertical-align: middle;
}

/* 資料リスト：資料の説明 */
p.det {
	border-top: 1px dotted #3b98b2;
	padding: 3px 0 3px 5px;
	font-size: 12px;
}

/*================================================
 *  ヘッダー
 ================================================*/
header {
	text-align: center;
	box-sizing: border-box;
	overflow:hidden;
	position: relative;
	background: #fcfcfc;
	width: 100%;
	padding: 20px 10px;
}

.actnav {
	width: 40%;
	float: right;
	margin: 0.5em 0 0 0;
}

.actnav ul {
	list-style-type: none;
	margin: 5px 0;
}

.actnav li {
	float: right;
	overflow: hidden;
}

.actnav li#innerlink {
	margin: 0 0.5em 0 0;
	padding: 0 0.5em;
}

.actnav a {
	margin: 0;
	padding: 0.5em 0 0.5em 0.5em;
	display: block;
	text-decoration: none;
	height: 1.25em;
	font-size: 12px;
}

.actnav li#exlink {
	text-decoration: none;
	font-size: 12px;
	background: #2452dc;
	background: -moz-linear-gradient(top,#2452dc 0%,#5075e3);
	background: -webkit-gradient(linear, left top, left bottom, from(#2452dc), to(#5075e3));
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #fff;
	width: 120px;
	margin: 0 4px;
	display: flex;
}

.actnav li#exlink a {
	color: #fff;
	text-decoration: none;
	margin: auto;
}

#logo {
	float: left;
	overflow: hidden;
}

/*================================================
 *  グローバルナビゲーション
 ================================================*/
@media print, screen and (min-width:768px) {
	nav {
		background: #2452dc;
		box-shadow: 0 5px 6px rgba(0, 0, 0, .3);
		z-index: 3;
	}
	nav ul {
		margin: 0;
		padding: 0;
	}
	nav li {
		position: relative;
		width: 244px;
		float: left;
		margin: 0;
		padding: 0;
		text-align: center;
		list-style: none;
		border-right: 1px dotted #fff;
	}
	nav ul li.home {
		border-left: 1px dotted #fff;
		width: 243px;
	}
	nav li a {
		display: block;
		padding: 10px 0;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
	}
	nav li ul {
		display: block !important;
		position: absolute;
		top: 40px;
		left: 0;
		margin: 0;
		padding: 0;
		border-radius: 0 0 3px 3px;
		z-index: 3;
	}
	nav li ul li {
		overflow: hidden;
		width: 195px;
		height: 0;
		-moz-transition: .2s;
		-webkit-transition: .2s;
		-o-transition: .2s;
		-ms-transition: .2s;
		transition: .2s;
	}
	nav li ul li a {
		padding: 10px 15px;
		background: #87A345;
		text-align: left;
		font-weight: normal;
	}
	nav li:hover > a {
		background: #eee;
		color: #333;
		text-decoration: none;
	}
	nav li:hover > a:hover {
		background: #eee;
	}

	.gnav {
		display: block !important;
	}

	#spMenu {
		display: none;
	}

	.showNav {
		background: #aaaaaa !important;
	}

	.showSub {
		overflow: visible;
		min-height: 42px;
		border-bottom: 1px solid #2452dc;
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
	}
}

/*================================================
 *  サブコンテンツ
 ================================================*/
.submenu li {
	margin: 0;
	padding: 0;
	text-indent: 0.5em;
	line-height: 1.5em;
	border-left: 1px dotted #87A345;
	border-right: 1px dotted #87A345;
}

.submenu li.subtop {
	padding: 5px 2px;
	background: #2452dc;
	color: #ffffff;
	border: none;
}

.submenu li.subhead {
	background: #87A345;
	border: none;
}

.submenu li.subdet {
	border-left: 3px solid #87A345;
	background: #e9efd2;
}

.submenu li a {
	display: block;
	padding: 5px 2px;
	color: #000;
	border-bottom: 1px dotted #87A345;
	text-decoration: none;
}

.submenu li a:hover {
	 background: #f6f6f6 0px 10px no-repeat;
}

/*================================================
 *  フッター
 ================================================*/
@media print {
	footer {
		display: none;
	}
}

footer {
	clear: both;
	bottom: 0;
}

.footlink {
	width: 100%;
	padding: 15px 0 0 0;
	overflow: hidden;
	background: #2452dc;
}

.footlink ul {
	position: relative;
	float: left;
	left: 50%;
	margin: 0;
	padding: 0;
}

.footlink li {
	position: relative;
	left: -50%;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0 15px;
	font-size: 12px;
	text-align: center;
}

.footlink a {
	color: #efede9;
	text-decoration: none;
}

.footlink a:hover {
	color: #efede9;
	text-decoration: underline;
}

.copyright {
	clear: both;
	padding: 15px 5px;
	font-size: 11px;
	text-align: center;
	color: #efede9;
	background: #2452dc;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position: fixed;
	bottom: 40px;
	right: 15px;
}

.totop a {
	display: block;
	text-decoration: none;
}

/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
	.inner {
		width: 100%;
	}

	#contents {
		box-sizing: border-box;
		width: 100%;
		padding: 10px 10px 0 10px;
	}

	#main {
		float: none;
		width: 100%;
	}

	.actnav {
		width: 100%;
	}
	.actnav li#innerlink {
		padding: 0.5em 0;
	}
	.actnav li#exlink {
		margin: 0 2px;
		width: 32%;
	}
	.actnav li#exlink a {
		font-size: 12px;
		line-height: 1.5em;
	}

	nav ul li.home {
		width: 191px;
	}
	nav li {
		width: 190px;
		float: auto;
	}

	#sub {
		float: none;
		width: 100%;
		margin: 10px 0;
	}

	footer {
		width: 100%;
	}
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	.lock {
		overflow: hidden;
	}

	header {
		z-index: 2;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 5px;
	}

	#logo img {
		float: left;
		width: 90%;
	}

	#topimg {
		display: none;
	}

	#main img.map {
		width: 100%;
		width: 100%\9; /* IE8にのみ適用 */
	}

	.actnav {
		width: 100%;
	}
	.actnav li#innerlink {
		padding: 0.5em 0;
	}
	.actnav li#exlink {
		width: 30%;
		float: left;
		display: flex;
	}
	.actnav li#exlink a{
		font-size: 13px;
		margin: auto;
	}

	#quicklink {
		height: auto;
		width: 100%;
		margin: 10 0px;
	}

	#calendar {
		height: auto;
		width: 100%;
		margin: 10 0px;
	}

	#contents {
		float: none;
		width: 100%;
	}

	#main {
		float: none;
		width: 100%;
	}

	#sub {
		float: none;
		width: 100%;
	}

	img.libmap {
		position: relative;
		max-width: 100%;
		height: auto;
		width: 100%\9; /* IE8にのみ適用 */
	}

	nav {
		background: #2452dc;
	}
	nav ul {
		margin: 0;
		padding: 0;
	}
	nav ul li.home {
		width: 100%;
	}
	nav li {
		position: relative;
		width: 100%;
		float: none;
		margin: 0;
		text-align: left;
		list-style: none;
		border-bottom: 1px solid #87A345;
		background: #87A345;
	}
	nav li a {
		display: block;
		padding: 10px 30px;
		color: #fff;
		text-decoration: none;
		background: #2452dc;
	}
	nav li a:hover {
		color: #333;
		background: #eee;
	}

	.active > a:before {
		margin-top: 0;
	}
	.active > a:after {
		margin-top: 5px;
	}

	.gnav {
		display: none;
	}

	#spMenu {
		display: block;
		z-index: 2;
		position: fixed;
		top: 10px;
		right: 10px;
	}
	#spMenu:hover {
		cursor: pointer;
	}

	#navBtn {
		display: inline-block;
		position: relative;
		width: 30px;
		height: 30px;
		border-radius: 5%;
		background: #2452dc;
	}
	#navBtnIcon {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 2px;
		margin: -1px 0 0 -7px;
		background: #f1f1f1;
		transition: .2s;
	}
	#navBtnIcon:before,
	#navBtnIcon:after {
		display: block;
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 14px;
		height: 2px;
		background: #f1f1f1;
		transition: 0.3s;
	}
	#navBtnIcon:before {
		margin-top: -6px;
	}
	#navBtnIcon:after {
		margin-top: 4px;
	}
	#navBtn .close {
		background: transparent;
	}
	#navBtn .close:before,
	#navBtn .close:after {
		margin-top: 0;
	}
	#navBtn .close:before {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}
	#navBtn .close:after {
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}
}