@charset "UTF-8";

@media screen and (max-width:767px){


/* ===============================================
	layout
=============================================== */
body{
	display:flex;
  	flex-direction:column;
  	min-height:100vh;
	font-family:'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif;
	font-size:12px;
	line-height:18px;
	color:#333;
}
#wrap{
	width:100%;
	margin:0 auto;
}
header{
	width:100%;
	margin-top:10px;
}
nav{
	width:100%;
	background-color:#76c947;
	padding:1px 0;
	margin-bottom:5px;
}
#container{
	overflow:hidden;
}
#side-nav{
	margin:0 10px;
	text-align:center;
}
#content{
	margin:0 10px;
}
#top-content{
	margin:0 10px;
}
#top-right{
	margin:0 10px;
}
footer {
	width:100%;
	background:url(../img/common/bg_footer.jpg) repeat-x center 0;
	background-size:contain;
	margin-top:60px;
	padding-top:40px;
}

/* ===============================================
	header
=============================================== */

/* logo
-------------------------------------------------- */
h1 img{
	width:100%;
}

/* top nav
-------------------------------------------------- */
.top-nav{
	display:none;
}

/* ===============================================
	nav
=============================================== */
nav ul{}
nav li{
	text-align:center;
	background-color:#fff;
	border-radius:3px;
	margin:8px 10px;
}
nav li a{
	display:block;
	color:#666;
	text-decoration:none;
	text-align:center;
	padding:4px 0;
}
nav li a span{
	display:block;
}

/* ===============================================
	side nav
=============================================== */
.user-box{
	background-color:#c9e0fa;
	border-radius:7px;
	padding:15px 9px;
	margin-bottom:20px;
}
.user-ttl{
	text-align:center;
	border-bottom:3px solid #0068b7;
	padding-bottom:5px;
	margin-bottom:10px;
}
.user-ttl img{
	height:14px;
}
.login-box{
	background-color:#fff;
	border:2px solid #ec6941;
	border-radius:7px;
	padding:10px 8px 0 8px;
	margin-top:5px;
	text-align:center;
}
a.btn-login{
	display:inline-block;
	padding:10px 30px;
	background-color:#ec6941;
	border-radius:7px;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
}
a.btn-login:hover{
	color:#fff;
}
ul.user-nav{
	margin:10px 0;
}
ul.user-nav li{
	background-color:#fff;
	margin-bottom:10px;
}
ul.user-nav li a{
	display:block;
	text-align:center;
	border:1px solid #ec6941;
	border-radius:5px;
	color:#333;
	text-decoration:none;
	padding:8px 0;
}
ul.user-nav li br{
	display:none;
}

.calendar-box{
	border:1px solid #333;
	border-radius:7px;
	padding:15px 10px;
	margin-bottom:14px;
}
.calendar-ttl{
	text-align:center;
	border-bottom:3px solid #0068b7;
	padding-bottom:5px;
	margin-bottom:10px;
}
.calendar-ttl img{
	height:14px;
}
p.ttl-month{
	text-align:center;
	margin-bottom:5px;
}
.calendar-box table{
	border-collapse:collapse;
	width:100%;
}
.calendar-box th,
.calendar-box td{
	border:1px solid #333;
	text-align:center;
	line-height:24px;
	width:14%;
}
.calendar-box th{
	background-color:#b4d8f1;
}
p.ttl-open{
	background-color:#d2d2d2;
	padding:2px 5px;
	text-align:center;
}
p.txt-open{
	margin:5px 0;
	text-align:center;
}

ul.sidenav-btn{
	margin-bottom:20px;
}
ul.sidenav-btn li{
	margin-bottom:7px;
	background-color:#e0f0a6;
}
ul.sidenav-btn li a{
	display:block;
	height:42px;
}
ul.sidenav-btn li a.sn-suishin{
	background:#e0f0a6 url(../img/common/btn_suishin.jpg) no-repeat 0 0;
}
ul.sidenav-btn li a.sn-suishin:hover{
	background:#c1cf8c url(../img/common/btn_suishin.jpg) no-repeat 0 -42px;
}
ul.sidenav-btn li a.sn-unei{
	background:#e0f0a6 url(../img/common/btn_unei.jpg) no-repeat 0 0;
}
ul.sidenav-btn li a.sn-unei:hover{
	background:#c1cf8c url(../img/common/btn_unei.jpg) no-repeat 0 -42px;
}
ul.sidenav-btn li a.sn-sentei{
	background:#e0f0a6 url(../img/common/btn_sentei.jpg) no-repeat 0 0;
}
ul.sidenav-btn li a.sn-sentei:hover{
	background:#c1cf8c url(../img/common/btn_sentei.jpg) no-repeat 0 -42px;
}
ul.sidenav-btn li a.sn-toukei{
	background:#e0f0a6 url(../img/common/btn_toukei.jpg) no-repeat 0 0;
}
ul.sidenav-btn li a.sn-toukei:hover{
	background:#c1cf8c url(../img/common/btn_toukei.jpg) no-repeat 0 -42px;
}

a.btn-contact{
	background:url(../img/common/btn_contact.jpg) no-repeat center 0;
	display:block;
	height:31px;
}

/* ===============================================
	content
=============================================== */

/* top page - center column
-------------------------------------------------- */
.search-box{
	background-color:#e0f0a6;
	border-radius:5px;
	padding:10px;
	margin:10px 0;
}
.search-box table{
	width:98%;
}
.ttl-search{
	height:22px;
	font-size:16px;
	color:#000;
	background:url(../img/top/bg_search.png) no-repeat 0 0;
	background-size:auto 22px;
	padding:2px 0 0 30px;
	overflow:hidden;
	margin-bottom:10px;
}
.btn-detailed{
	background:url(../img/top/bg_search.png) no-repeat 0 5px;
	background-size:auto 12px;
	font-size:12px;
	display:block;
	float:right;
	padding:0 0 0 16px;
	text-decoration:none;
	color:#333;
}
.search-box td input{ 
	vertical-align:-0.2em;
}
.search-box td label{
	margin:0 15px 0 5px;
}
.inp-search {
	height:26px;
	width:100%;
    border:1px solid #7d7d7d;
	padding:0 10px;
	margin-bottom:10px;
}
.btn-search{
	width:100%;
	height:26px;
	background-color:#0068b7;
	color:#fff;
	font-size:14px;
    border:0 none;
    cursor:pointer;
	margin:0 8px;
	margin-bottom:10px;
}
.btn-search:hover{
	background-color:#3e95d8;
}

ul.search-btn{
	overflow:hidden;
	width:100%;
	margin-bottom:20px;
}
ul.search-btn li{
	float:left;
	margin-right:1%;
	width:24%;
	border:1px solid #a0a0a0;
	border-radius:5px;
	background-color:#fff;
	text-align:center;
}
ul.search-btn li a{
	text-decoration:none;
	display:block;
	padding:4px 0;
	color:#333;
}

.tab_box{
    width:100%;
    margin:10px 0;
}
input[type="radio"]{
    display:none;
}
.tab_area{
    font-size:0;
}
.tab_area label{
    width:24%;
    display:inline-block;
    padding:7px 0;
    text-align:center;
    font-size:12px;
    border-radius:5px 5px 0 0;
	cursor:pointer;
}
.panel_area{
	background:#fff;
}
.tab_panel{
    width:100%;
    padding:0;
	display:none;
	margin-bottom:20px;
}
.tab1_label{
	background-color:#76c947;
	color:#fff;
	margin-right:1%;
}
.tab2_label{
	background-color:#f0f684;
	color:#333;
	margin-right:1%;
}
.tab3_label{
	background-color:#c9e0fa;
	color:#333;
	margin-right:1%;
	
}
.tab4_label{
	background-color:#f4dadc;
	color:#333;
	float:right;
}
#tab1:checked ~ .tab_area .tab1_label{background:#76c947; color:#fff;}
#tab1:checked ~ .panel_area #panel1{ display:block; background-color:#76c947; border-radius:0 0 7px 7px; padding:5px;}
#tab2:checked ~ .tab_area .tab2_label{background:#f0f684; color:#333;}
#tab2:checked ~ .panel_area #panel2{display:block; background-color:#f0f684; border-radius:0 0 7px 7px; padding:5px;}
#tab3:checked ~ .tab_area .tab3_label{background:#c9e0fa; color:#333;}
#tab3:checked ~ .panel_area #panel3{display:block; background-color:#c9e0fa; border-radius:0 0 7px 7px; padding:5px;}
#tab4:checked ~ .tab_area .tab4_label{background:#f4dadc; color:#333;}
#tab4:checked ~ .panel_area #panel4{display:block; background-color:#f4dadc; border-radius:0 0 7px 7px; padding:5px;}
.panel-content{
	background-color:#fff;
	border-radius:5px;
	padding:5px;
}
.scroll{
	height:400px;
	overflow-y:scroll;
}
ul.library-news{
}
ul.library-news li{
	padding-left:58px;
	margin-bottom:5px;
}
ul.library-news li.kyotsu{
	background:url(../img/common/icn_kyotsu.jpg) no-repeat 0 3px;
	background-size:auto 15px;
}
ul.library-news li.wakaba{
	background:url(../img/common/icn_wakaba.jpg) no-repeat 0 3px;
	background-size:auto 15px;
}
ul.library-news li span{
	color:#003399;
}
.all-list{
	border-top:1px dotted #333;
	text-align:right;
	padding-top:10px;
}
a.btn-all{
	width:90px;
	height:20px;
	display:inline-block;
	background:url(../img/top/btn_all_sp.jpg) no-repeat 0 0;
	background-size:90px 20px;
	text-indent:-9999px;
}
a.btn-all:hover{
	background:url(../img/top/btn_all_sp_hv.jpg) no-repeat 0 0;
	background-size:90px 20px;
}

.ttl-library-map{
	background:#f18048 url(../img/top/icn_library.jpg) no-repeat 13px center;
	color:#fff;
	border-radius:5px;
	padding:10px 0 10px 45px;
	font-size:16px;
	display:block;
	margin:10px 0;
}
p.txt-map{
	padding:0 5px;
}
.map-img{
	margin:15px 0;
}
.map-img img{
	width:100%;
}
img[usemap] {
	border: none;
	height: auto;
	max-width: 100%;
	width: auto;
}

.qr-url{
	margin:20px 0;
}
a.qr-sp,
a.qr-gara{
	display:none;
}
.qr-sp-sp{
	background-color:#f2f2f2;
	text-align:center;
	border:1px solid #707070;
	border-radius:5px;
	padding:5px 10px;
	margin-bottom:10px;
}
.qr-sp-ttl{
	border-bottom:2px solid #2d882d;
	padding-bottom:3px;
	margin-bottom:5px;
}
.qr-sp-sp img{
	margin-top:5px;
}
.qr-gara-sp{
	background-color:#f2f2f2;
	text-align:center;
	border:1px solid #707070;
	border-radius:5px;
	padding:5px 10px;
}
.qr-gara-ttl{
	border-bottom:2px solid #2d882d;
	padding-bottom:3px;
	margin-bottom:5px;
}
.qr-gara-sp img{
	margin-top:5px;
}

/* top page - right column
-------------------------------------------------- */
a.btn-kodomo,
a.btn-ya{
	display:none;
}
a.btn-kodomo-sp,
a.btn-ya-sp{
	margin-bottom:20px;
}
a.btn-kodomo-sp img{
	width:100%;
	margin:10px 0;
}
a.btn-ya-sp img{
	width:100%;
	margin-bottom:10px;
}

ul.right-nav{
	background-color:#e0f0a6;
	border-radius:5px;
	padding:8px;
	margin-bottom:10px;
}
ul.right-nav li{
	background-color:#fff;
	margin-bottom:8px;
	padding:12px 0;
}
ul.right-nav li:last-child{
	margin-bottom:0;
}
ul.right-nav li:hover{
	background-color:#f6fff4;
}
ul.right-nav li a{
	display:block;
	text-align:center;
	text-decoration:none;
}
ul.right-nav li a.rn-shogai{
	background:url(../img/top/icon_clover.png) no-repeat 12px center;
	background-size:auto 18px;
	color:#225722;
}
ul.right-nav li a.rn-chiiki{
	background:url(../img/top/icon_map.png) no-repeat 7px center;
	background-size:auto 18px;
	color:#074356;
}
ul.right-nav li a.rn-shinbun{
	background:url(../img/top/icon_newsp.png) no-repeat 11px center;
	background-size:auto 18px;
	color:#333;
}
ul.right-nav li a.rn-online{
	background:url(../img/top/icon_database.png) no-repeat 14px center;
	background-size:auto 18px;
	color:#651c1c;
}
ul.right-nav li a.rn-dayori{
	background:url(../img/top/icon_dayori.png) no-repeat 10px center;
	background-size:auto 18px;
	color:#5c5c0e;
}
ul.right-nav li a.rn-link{
	background:url(../img/top/icon_link.png) no-repeat 13px center;
	background-size:auto 18px;
	color:#a04917;
}
ul.right-nav li a.rn-online br{
	display:none;
}

a.btn-digital{
	display:none;
}
a.btn-digital-sp img{
	width:100%;
	margin-bottom:10px;
}

/*  kccs add (Start) */
.org_tw-box{
	background-color: #c9e0fa;
}

.tw-box{
	background-color:#c9e0fa;
	border-radius:7px;
	padding:15px 9px;
	margin-bottom:20px;
}
.tw-ttl{
	text-align:center;
	border-bottom:3px solid #0068b7;
	padding-bottom:5px;
	margin-bottom:10px;
}

.musuaum-box{
	background-color:#f7f8f7;
	border-left:3px solid #666;
	color:#666;
	font-size:14px;
	font-weight:bold;
	padding:10px;
	margin-bottom:5px;
}
.musuaum-txt{
	text-align:left;
	font-size:14px;
	padding:5px;
	line-height:20px;
	margin-bottom:10px;
}

.musuaum-img{
	margin:15px 0;
}
.musuaum-img img{
	width:100%;
}

/* KCCS ADD (End) */



/* content
-------------------------------------------------- */
.path{
	display: none;
}
h2{
	background-color:#f5fff4;
	color:#4a8a3c;
	border-bottom:3px solid #4a8a3c;
	font-size:14px;
	font-weight:bold;
	padding:10px;
	margin-bottom:5px;
}
h3{
	background-color:#f7f8f7;
	border-left:3px solid #666;
	color:#666;
	font-size:14px;
	font-weight:bold;
	padding:10px;
	margin-bottom:5px;
}
p.txt{
	padding:5px;
	line-height:20px;
	margin-bottom:20px;
}

/* common :form
-------------------------------------------------- */

/*select*/
select::-ms-expand {
	display:none;
}
select {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding:5px 30px 5px 10px;
	border:1px solid #39455a;
	background-image:url(../img/common/select_arrow.png);
	background-repeat:no-repeat;
	background-size:12px 10px;
	background-position:right 10px center;
	background-color:#fff;
	color:#555;
	width:100%;
	border-radius:0;
}

/* common :font & margin & padding
-------------------------------------------------- */
a{
	color:#003399;
}
a:hover{
	color:#666;
}

.mb-0{
	margin-bottom:0px;
}
.mb-1{
  margin-bottom:10px;
}
.mb-2{
	margin-bottom:20px;
}
.mb-3{
   margin-bottom:30px;
}
.mb-4{
	margin-bottom:40px;
}
.my-3{
	margin:30px 0;
}
.my-1{
	margin:10px 0;
}
.mt-1{
	margin-top:10px;
}
.mt-2{
	margin-top:20px;
}

.w-full{
	width:100%;
	box-sizing:border-box;
}

/* ===============================================
	Footer
=============================================== */
.page-top{
	text-align:right;
	height:17px;
	margin-top:20px;
}
.page-top img{
	height:17px;
}
.footer-body{
	background-color:#f4f2d0;
	padding:0 10px;
}
.footer-content{
	margin:0 auto;
	color:#6a3906;
	padding:10px 0;
}
.copyright{
	text-align:right;
}

/*画面幅が480pxまでの時*/
}