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



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

　共通：font

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

strong {font-weight: bold;}
.strong {font-weight:bold;} 
.red,
strong.red,
span.red {color: #d00;}
.red-bold{color: #d00;font-weight: bold;}
.red-italic{color: #d00;font-style:italic;}
strong .first {color:#f29e04;}
strong.first {color:#f29e04;}

/*.fc666 {color: #666;}*/
.fc666 {color: #555;}

.fs65 { font-size:65%;}
.fs70 { font-size:70%;}
.fs85 { font-size:85%;}
.fs90 { font-size:90%;}
.fs95 { font-size:95%;}
.fs100 { font-size:100%;}
.fs105 { font-size:105%;}
.fs110 { font-size:110%;}
.fs115 { font-size:115%;}
.fs120 { font-size:120%;}
.fs125 { font-size:125%;}
.fs130 { font-size:130%;}
.fs135 { font-size:135%;}
.fs140 { font-size:140%;}
.fs145 { font-size:145%;}
.fs150 { font-size:150%;}

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

　共通：line-height

------------------------------------------*/
.lh110 { line-height:110%;}
.lh120 { line-height:120%;}
.lh130 { line-height:130%;}
.lh140 { line-height:140%;}
.lh150 { line-height:150%;}
.lh160 { line-height:160%;}
.lh170 { line-height:170%;}
.lh180 { line-height:180%;}

#footer_wrap .lh140{
  line-height: 1.6;
}

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

　共通：margin/padding

------------------------------------------*/
.m-top0 {margin-top: 0px;}
.m-top5 {margin-top: 5px;}
.m-top8 {margin-top: 8px;}
.m-top10 {margin-top: 10px;}
.m-top15 {margin-top: 15px;}
.m-top20 {margin-top: 20px;}
.m-top22 {margin-top: 22px;}
.m-top25 {margin-top: 25px;}
.m-top30 {margin-top: 30px;}
.m-top35 {margin-top: 35px;}
.m-top40 {margin-top: 40px;}
.m-top50 {margin-top: 50px;}
.m-top55 {margin-top: 55px;}
.m-btm20 {margin-bottom: 20px;}

.p-left20 {padding-left: 20px;}
.p-left5 {padding-left: 5px;}

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

　共通：position

------------------------------------------*/
.text-left { text-align: left;}
.text-center { text-align: center;}
.text-right { text-align: right;}

.float-left {float: left;}
.float-right {float: right;}

.v-top{vertical-align:top;}
.v-middle{vertical-align:middle;}
.v-textb{vertical-align:text-bottom;}
.v-btm{vertical-align:bottom;}

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

　共通：img

------------------------------------------*/
img { border: 0;
max-width: 100%;
height: auto;
}
.img-block {display:block;}
.img-left {
	float: left;
	margin: 0 20px 0 0;
	background-color:#fff;
}

.img-left2 {
	float: left;
	margin: 0 20px 15px 0;
	background-color:#fff;
}

.img-right {
	float: right;
	margin: 0 0 0 20px;
	background-color:#fff;
}

.img-right2 {
	float: right;
	margin: 0 0 15px 20px;
	background-color:#fff;
}

.pagetop a,
#local-nav  a,
#header .title a{
  display: inline-block;
}

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

　共通：border

------------------------------------------*/
.border-ccc {border: 1px solid #ccc;}
.img-border {border: 1px solid #ccc;}

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

　localnav

------------------------------------------*/
#local-nav .box-nav {
	position: relative;
	width:217px;	
}

#local-nav .box-nav a:link   { color: #333; text-decoration: underline; }
#local-nav .box-nav a:visited   { color: #333; text-decoration:underline; }
#local-nav .box-nav a:active { color: #333;  text-decoration:none; }
#local-nav .box-nav a:hover  { color: #333; text-decoration:none; }

#local-nav .box-nav .box-main{
	background: url(../../images/localnav_bg.png) repeat-y left top;
	padding-bottom: 5px;
}

#local-nav .box-nav .box-main p{

	margin-left: 12px;
	margin-right: 8px;
}

#local-nav .box-nav .box-main .btn01,
#local-nav .box-nav .box-main ul {
	margin-left: 8px;
	margin-right: 8px;
}

#local-nav .box-nav .box-main ul li {
	position: relative;
	background: url(../../images/dot_gray01.png) repeat-x left top;
  	font-size: 100%;
}

#local-nav .box-nav .box-main ul li.top {
	background: none;
}


#local-nav .box-nav .box-main ul li a{
	display: block;
	padding: 6px 0 6px 22px;
	
	font-weight: bold;
}

#local-nav .box-nav .box-main ul li .icon-gray{
	position: absolute;
	left: 0px;
	top: 6px;
	width: 16px; !important
	height:16px; !important
	z-index:1;
}



#local-nav .box-nav .box-title{
	background: url(../../images/localnav_header_bg.png) repeat-y left top;
}

#local-nav .box-nav .box-title.box-title-kids div.side_kids,
#local-nav .box-nav .box-title h2 {
	background: url(../../images/localnav_header.png) no-repeat left top;
 min-height: 1em;
	padding:8px 15px 6px 40px;
	font-size: 110%;
	font-weight: bold;
  background-size: 100%;
}

#local-nav .box-nav .box-title .icon {
	position: absolute;
	left: 10px;
	top: 8px;
	width: 25px; !important
	height:25px; !important
	z-index:1;
}

#local-nav .box-nav .box-title-web{
	background: url(../../images/localnav_header_web_bg.png) repeat-y left top;
}

/*#local-nav .box-nav .box-title-web h2,*/
#local-nav .box-nav .box-title-web div.side_web{
	background: url(../../images/localnav_header_web.png) no-repeat left top;
	padding:8px 15px 6px 40px;
	font-size: 120%;
background-size: 100%;
	font-weight: bold;

}

#local-nav .box-nav .box-title-web .icon {
	position: absolute;
	left: 10px;
	top: 8px;
	width: 25px; !important
	height:25px; !important
	z-index:1;
}

#local-nav .side_cal {
	border: 1px solid #ABABAB;
	background: #FFF3E1;
	margin-bottom: .5em;
	padding: .5em;
	border-radius: 5px;
	font-weight: bold;
}

#local-nav .side_cal a {
	color:  #313131;
}

#local-nav .side_cal img {
	vertical-align: bottom;
	margin-right: .5em;
}
#local-nav .side_cal a img{
  vertical-align: middle;
}

#local-nav .side_group {
	border: 1px solid #ABABAB;
	background: #FFF3E1;
	padding: .5em;
	border-radius: 5px;
	font-weight: bold;
}

#local-nav .side_group a {
	color:  #313131;
}

#local-nav .side_group img {
	vertical-align: bottom;
	margin-right: .5em;
}


#local-nav .side_handbook {
	border: 1px solid #ABABAB;
	background: #FFF3E1;
	margin: .5em 0;
	padding: .5em;
	border-radius: 5px;
	font-weight: bold;
}

#local-nav .side_handbook a {
	color:  #313131;
}

#local-nav .side_handbook img {
	vertical-align: bottom;
	margin-right: .5em;
}


#local-nav .side_qa {
	border: 1px solid #ABABAB;
	background: #FFF3E1;
	padding: .5em;
	border-radius: 5px;
	font-weight: bold;
}

#local-nav .side_qa a {
	color:  #313131;
}

#local-nav .side_qa img {
	vertical-align: bottom;
	margin-right: .5em;
}

#local-nav .side_link {
	border: 1px solid #ABABAB;
	background: #FFF3E1;
	margin: .5em 0;
	padding: .5em;
	border-radius: 5px;
	font-weight: bold;
}

#local-nav .side_link a {
	color:  #313131;
}

#local-nav .side_link img {
	vertical-align: bottom;
	margin-right: .5em;
}

.qr_box img:hover {
/*  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";*/
}

.side_access {
	padding-bottom: 2em;
}
.box-nav .side_access{
	padding-bottom: .5em;
}

.box-title-kids {
}
/*#local-nav .box-nav .box-title.box-title-kids h2,*/
#local-nav .box-nav .box-title.box-title-kids div.side_kids{
  padding-left: 10px;
  
    font-size: 110%;
  font-weight: bold;
}
#local-nav .box-nav .box-title.box-title-kids h2 a,
#local-nav .box-nav .box-title.box-title-kids div.side_kids a{
  display: flex;
  align-items:center;
  height: 100%;
  
}


.side_cal, .side_group, .side_handbook, .side_qa, .side_link, .box-title-web, .side_access, .box-title-kids {
	position: relative;
    z-index: 1;
}

.side_cal a, .side_group a, .side_handbook a, .side_qa a, .side_link a, .box-title-web a, .side_access a, .box-title-kids a {
	/*position: absolute;
	top: 9px;
	left: 35px;
	width: 84%;
	height: 100%;
	z-index: 2; */
  /* 必要であればリンク要素の重なりのベース順序指定 */
}



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

　top-contents

------------------------------------------*/
#contents .search {
	position: relative;
	padding: 10px 0 0 10px;
	padding-bottom: 20px;	
}

#contents .new,
#contents .event  {
	position: relative;
	padding: 10px 0 0 0;
}



/*#contents .search .icon,
#contents .new .icon {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 64px; !important
	height:42px; !important
	z-index:1;	
}*/

#contents .search h2 {
	font-size: 140%;
	font-weight: bold;
	margin-bottom: .5em;
}

#contents .top_map h2 {
	font-size: 140%;
	font-weight: bold;
	margin-bottom: 1em;
}

#contents .top_map {
	padding: 10px 0 0 20px;
}



#contents .search p{

}

#contents .search ul{
	height: 26px;
}

#contents .search ul li {
	float: left;
	margin-right: 10px;
}

#contents .search ul li.last {
	margin-right: 0px;
}

#contents .new h2 {
	font-size: 140%;
	font-weight: bold;
	margin-bottom: .5em;
	background: #c5e6f9;
	border-radius: 5px;
	padding: .5em 0;
}

#contents .new h2:before {
	content: url(../../images/icn_top_new.png);
    margin: 10px;
    position: relative;
    top: 2px;
}

#contents .new .scroll,
#contents .event .scroll h3{
/*	height:250px;
	overflow: auto;*/
	background: url(../../images/dot_gray01.png) repeat-x left bottom;
}

#contents .new .scroll h3,
#contents .event .scroll h3 {
	position: relative;
	margin-top: 10px;
	padding: 5px 0 5px 35px;
	font-weight: bold;
	background: url(../../images/dot_gray01.png) repeat-x left top;
}

#contents .new .scroll .icon-new,
#contents .event .scroll .icon-new  {
	position: absolute;
	left: 0px;
	top: 5px;
	width: 24px; !important
	height:24px; !important
	z-index:1;	
}

#contents .new .scroll p,
#contents .event .scroll p
 {

	padding: 5px 0 15px 35px;
	
}

.topic {
	background-color: #FFECED;
	border: 1px solid #DD0000;
	border-radius: 5px;
	padding: 1em;
}

.topic .titile {
	font-weight: bold;
	color: #D00;
	font-size: 124%;
}

#contents .event h2 {
	font-size: 140%;
	font-weight: bold;
	margin-bottom: .5em;
	background: #fff7c7;
	border-radius: 5px;
	padding: .5em 0;
}

#contents .event h2:before {
	content: url(../../images/icn_top_event.png);
    margin: 10px;
    position: relative;
    top: 2px;
}

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

　コンテンツ共通:見出し

------------------------------------------*/
#contents .h1-contents{
	position: relative;
	/*background: url(../../images/h1_bg.png) repeat-y left top;*/
	background: #FFF;
}

#contents h1.h1-contents{
	position:static;
	margin-top: 10px;
	padding: 8px 5px 8px 35px;
	border-top: 2px solid #fdd7b3;
	border-bottom: 1px dotted #fdd7b3;
	background: url('../../images/icon_h1.png') no-repeat left center;
	font-size: 130%;
	font-weight: bold;
	color: #444444;
}

.kids #contents h1.h1-contents{
	position:static;
	margin-top: 10px;
	padding: 8px 5px 8px 0;
	border-top: 2px solid #fdd7b3;
	border-bottom: 1px dotted #fdd7b3;
	background: none;
	font-size: 130%;
	font-weight: bold;
	color: #444444;
}

#contents .h1-contents div,
#contents .h1-contents h1,
#contents .h1-contents h2 {
	/*background: url(https://www.lics-saas.nexs-service.jp/kawanishi/images/h1_header_bg.png) no-repeat left top;*/
	border: 1px solid #ccc;
	border-radius: 10px;
	padding:11px 15px 6px 42px;
	font-size: 140%;
	
	font-weight: bold;
}

#contents .h1-contents a:link   { color: #333; text-decoration:none; }
#contents .h1-contents a:visited   { color: #333; text-decoration:none; }
#contents .h1-contents a:active { color: #333;  text-decoration:underline; }
#contents .h1-contents a:hover  { color: #333; text-decoration:underline; }

#contents .h1-contents .icon {
	position: absolute;
	left: 10px;
	top: 13px;
	width: 25px; !important
	height:25px; !important
	z-index:1;
}

.h2-contents {
	margin: 25px 0 0;
	padding: 5px 5px 5px 7px;
	border-left: 3px solid #999999;
	border-bottom: 1px solid #999999;
	background: #fffdf4;
	font-size: 120%;

}

.h2-contents-top {
	margin: 15px 0 0;
}

.h3-contents {
	margin: 20px 0 0;
	padding: 3px 0px;
	border-bottom: 1px dotted #675a39;
	font-size: 110%;

}


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

　コンテンツ共通

------------------------------------------*/
.p-honbun {
	margin: 15px 0 0;
	font-size: 100%;

}

.p-chushaku {
	margin: 5px 0 0;
	font-size: 100%;

}

.p-honbun-top {
	margin: 5px 0 0;
	font-size: 100%;

}

.p-honbun-h {
	margin: 20px 0 0;
	font-size: 100%;

}

.p-honbun-s25 {
	margin: 25px 0 0;
	font-size: 100%;

}

.p-pagetop {
	margin: 25px 0 0;
	font-size: 100%;
	text-align: right;
}

.ul-disc {
	margin: 15px 0 0;
	list-style-type: disc;
}

ul ul.ul-disc {
	margin: 10px 0 10px 15px;
}

.ul-disc li {
	margin: 0 0 10px 30px;

	font-size: 100%;
}

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

.ul-none li {
	margin: 0 0 10px 15px;

	font-size: 100%;
}

.ol-decimal {
	margin: 15px 0 0;
	list-style-type: decimal;
}

.ol-decimal li {
	margin: 0 0 10px 30px;

	font-size: 100%;
}


.ul-underindex {
	margin: 20px 0 0;
	list-style-type: none;
}

.ul-underindex li {
	margin: 0 0 0 5px;
	padding: 0 0 10px 26px;
	background: url('../../images/icon_gray16x16.png') no-repeat left top 4px;
	font-size: 100%;
}

.ul-underindex-p {
	margin: 10px 0 0;
}

.ul-pagelink {
	margin: 20px 0 0;
	list-style-type: none;
}

.ul-pagelink li {
	margin: 0 0 0 5px;
	padding: 0 0 10px 26px;
	background: url('../../images/icon_gray16x16_2.png') no-repeat left top;
	font-size: 100%;
}

.ul-pdf {
	margin: 20px 0 0;
	list-style-type: none;
}

.ul-pdf li {
	margin: 0 0 0 5px;
	padding: 3px 0 10px 26px;
	background: url('../../images/icon_pdf.png') no-repeat left 6px;
	font-size: 100%;
}




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

　コンテンツ共通：table

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

.table-lefttop, .table-leftmiddle, .table-centertop, .table-centermiddle {
	width: 700px;
	margin: 15px 0 0;
	border-collapse:collapse;
	border-left: 1px solid #c8c8c8;
	border-top: 1px solid #c8c8c8;
}

.table-lefttop td, .table-leftmiddle td, .table-centertop td, .table-centermiddle td,
.table-lefttop th, .table-leftmiddle th, .table-centertop th, .table-centermiddle th {
	font-size: 100%;

	padding: 5px;
	border-right: 1px solid #c8c8c8;
	border-bottom: 1px solid #c8c8c8;
}

.table-lefttop th, .table-leftmiddle th, .table-centertop th, .table-centermiddle th {
	background: #fef6c7;
	font-weight: normal;
}

.table-lefttop td, .table-lefttop th {
	text-align: left;
	vertical-align: top;
}

.table-leftmiddle td, .table-leftmiddle th {
	text-align: left;
	vertical-align: middle;
}

.table-centertop td, .table-centertop th {
	text-align: center;
	vertical-align: top;
}

.table-centermiddle td, .table-centermiddle th {
	text-align: center;
	vertical-align: middle;
}

td.nowrap ,th.nowrap {white-space:nowrap;}

th.width100,
td.width100 {width:100px;}
th.width150,
td.width150 {width:150px;}
th.width200,
td.width200 {width:200px;}
th.width250,
td.width250 {width:250px;}

.color-pink {color: #EB7958; font-weight: bold;}

.margintop-25{ margin-top: 25px;}

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

　各コンテンツ毎:コンテンツインデックス（目次）

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

.h2-contentsindex,
.h2-contentsindexList li{
	margin: 20px 0 0;
	padding: 8px 5px 8px 25px;
	border-top: 2px solid #fdd7b3;
	border-bottom: 1px dotted #fdd7b3;
	background: url('../../images/icon_contentsindex.png') no-repeat left center;
	font-size:130%;
	font-weight: bold;
}

.kids .h2-contentsindex {
	margin: 20px 0 0;
	padding: 8px 5px 8px 0;
	border-top: 2px solid #fdd7b3;
	border-bottom: 1px dotted #fdd7b3;
	background: none;
	font-size:130%;
	
	font-weight: bold;
}

.kids .h2-contentsindex img,
.kids .h1-contents img {
	vertical-align: middle;
}

.h2-contentsindex-top {
	margin-top: 10px;
}

.ul-contentsindex {
	margin: 20px 0 0;
	list-style-type: none;
}

.ul-contentsindex-yohaku {
	margin: 0 0 25px;
}
.ul-contentsindex li {
	margin: 0 0 0 5px;
	padding: 0 0 10px 26px;
	background: url('../../images/icon_gray16x16.png') no-repeat left top 4px;
	font-size: 100%;
}

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

　各コンテンツ毎:カレンダー

------------------------------------------*/
#contents .h1-contents .calender-holiday{
	position: absolute;
	right: 10px;
	top: 8px;
	z-index:1;
	border: 1px solid #ccc;
	background: #f99;
	padding:5px;
	font-size: 90%;
	font-weight: bold;
}

#contents .calender-waku .waku01,
#contents .calender-waku .waku02,
#contents .calender-waku .waku03 {
	float:left;
	width:226px;
}

#contents .calender-waku .waku01,
#contents .calender-waku .waku02 {
	margin-right:11px;
}

#contents .calender-waku h3 {
	font-size: 100%;
	font-weight: bold;
}

#contents .calender-waku h3 span,
#contents .calender-add span{ 
	color: #ffcdcd;
	padding-right: 5px;
}

#contents .calender-add img {
	
}

#contents .calender-waku .calender{
	width: 100%;
	font-size:100%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin-top: 5px;
}

#contents .calender-waku .calender th,
#contents .calender-waku .calender td {
	padding: 4px 2px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-align: center;
	width: 14%;
}

#contents .calender-waku .calender th { background:#eaeaea;}
#contents .calender-waku .calender td { background:#fff;}
#contents .calender-waku .calender td.off { background:#f99;}
#contents .calender-waku .calender td.weekend { background:#e6ffff;}


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

　各コンテンツ毎:図書館所蔵雑誌リスト

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

td.w_maga_title ,th.w_maga_title {width: 500px; text-align: left;}

.ul-pagelink_maga {
	margin: 20px 0 0;
	list-style-type: none;
}

.ul-pagelink_maga li {
	display: inline;
	background: url('../../images/icon_gray16x16_2.png') no-repeat left top;
	margin: 0 10px 0 0;
	padding: 0 0 10px 30px;
	font-size: 100%;
}

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

　各コンテンツ毎:川西市子どもの読書活動推進協議会選定絵本リスト

------------------------------------------*/
th.w_ehon_no ,td.w_ehon_no{width: 1.5em; text-align: center;}


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

　本文へ

------------------------------------------*/
.skips {
	color: #fff;
	background-color: #535353;
	position: absolute;
	left: -3000px;
	z-index: 9999;
}
a.skips {
    background-color: #535353!important;
    color: #fff!important;
    text-align: center;
    padding: 5px 0;
    top: auto;
}
a.skips:active {
	display: block;
	width: 99.99%;
	font-size: 100%;

	top: 0;
	left: 0;
}
a.skips:focus {
	display: block;
	width: 99.99%;
	font-size: 100%;

	top: 0;
	left: 0;
}

:focus {
  outline-color: #2171cc;
  outline: 3px double #2171cc #fff; /* 外側の枠線 */
  outline-offset: 2px; /* 枠線同士の距離感 */
/*  box-shadow:
    -2px -2px #fff, 2px -2px #fff, 2px 2px #fff, -2px 2px #fff;*/
    
}


/* map */

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
margin-left: .5em;
margin-right: .5em;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%!important;
height: 100%;
}


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

　サイトマップ

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

ul#sitemap_list li a{
	margin-left:20px;
	padding:3px 0 5px 30px;
	line-height: 2;
	background: url(../../images/icon_gray16x16.png) no-repeat 0 .7em;
	font-size:116%;
	}
	
ul#sitemap_list li.d2{
	padding-top:3px;
	text-indent:2em;
	}
	
ul#sitemap_list li.d3{
	padding-top:3px;
	text-indent:3em;
	}	

/*----------------------------------------
aaaaaaaaa fontスタイル上書き
------------------------------------------*/
/*<font size="+1">*/
.size-plus1{
font-size:127.841%;
}
/*<font size="+0.5">*/
.size-plus05{
font-size:113.6365%;
}
.size-117{
  font-size: 117%;
}
.size-120{
  font-size: 120%;
}
.size-105{
  font-size: 105%;
}
.size-150{
  
  font-size: 150%;
}
.size-200{
  font-size: 200%;
}


.c333{
  color: #333333;
}
.c000{
  color: #000;
}