/* body ボディ
-----------------------------------------------------*/

body {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka‐等幅";
font-size:100%;
line-height: 140%;
letter-spacing:1px;
color: #333333;
background-image:url(images/body_back.png);
background-repeat:repeat-x;
background-color:#cccccc;
text-align: center;
margin: 0px auto;
padding: 0px;
}

a:hover {
text-decoration: none;
}


/* container コンテナ
-----------------------------------------------------*/

#container {
width:900px;
margin: 0px auto;
border-left:#999999 solid 1px;
border-right:#999999 solid 1px;
background-color:#FFFFFF;
text-align: left;
}

/* header ヘッダー
-----------------------------------------------------*/

#header {
height:110px;
color:#FFFFFF;
background-image:url(images/header_back2.png);
background-repeat:no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:900px;
}

#header_left {
float:left;
}

#header_left2 {
float:left;
font-size:35px;
line-height: 140%;
font-weight:bold;
margin: 30px 0px 0px 10px;
overflow: hidden;
display: inline;
}

#header_right {
font-size:10px;
float:right;
text-align:right;
margin: 87px 10px 0px 0px;
}

#header_right ul {
list-style:none;
display:block;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#header_right li {
float:left;
padding: 0px 0px 0px 30px;
background: url(images/header_li.gif) no-repeat 20px 0.7em;
}

#header_right li a, #header_right li a:link, #header_right li a:visited {
color: #FFFFFF;
text-decoration: none;
}

#header_right li a:hover {
text-decoration:underline;
}

h1 {
font-size:13px;
font-weight:normal;
background:#522a02;
color:#FFFFFF;
height:15px;
width:890px;
margin: 0px;
padding: 0px 0px 5px 10px;
}

/* menu メニュー
-----------------------------------------------------*/

#menu {
color:#000000;
font-weight:bold;
background:#4784b7;
background-image:url(images/menu_back.png);
height:38px;
font-size:12px;
}

#menu ul {
list-style:none;
display:block;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#menu ul ul{
display:none;
position:absolute;
background-image:none;
width:179px;
top:100%;
left:0;
}

#menu li.home {
list-style:none;
float:left;
text-align:center;
width:180px;
border-left:none;
background-image:url(images/menu_li_home.gif);
margin: 0px 0px 0px 0px;
}

#menu li {
list-style:none;
float:left;
text-align:center;
width:179px;
border-left:solid #999999 1px;
background-image:url(images/menu_li.gif);
margin: 0px 0px 0px 0px;
}

#menu a, #menu a:link, #menu a:visited {
color: #333333;
text-decoration: none;
padding: 10px 10px 10px 10px;
display:block;
}

#menu a:hover {
color: #333333;
padding: 10px 10px 10px 10px;
background:#ececec;
text-decoration: none;
}

#menu li li {
   clear:both;
   background-image:none;
   background:#CCCCCC;
   border-right:#999999 1px solid;
   border-bottom:#999999 1px solid;
   width:178px;
}

#menu li:hover {
   position:relative;
}

#menu li:hover > ul {
   display: block
}

* html #menu li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column1'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}

* html #menu li li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column2'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}

* html #menu li li li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column3'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}

#menu .column1 {position:relative;}
#menu .column1 ul {display:block;}
#menu .column1 * ul {display:none;}

#menu .column2 {position:relative;}
#menu .column2 ul {display:block;}
#menu .column2 * ul {display:none;}

#menu .column3 {position:relative;}
#menu .column3 ul {display:block;}
#menu .column3 * ul {display:none;}

/* pan パンくずリスト
-----------------------------------------------------*/

.pan {
font-size:10px;
padding: 10px 20px 0px 20px;
}

/* main メイン
-----------------------------------------------------*/

#main {
float:right;
width:648px;
background: #FFFFFF;
margin: 0px 5px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}

#main .category {
width:648px;
margin: 0px 0px 15px 0px;
}

#main h2 {
background-image:url(images/h2.gif);
background-repeat:no-repeat;
height:17px;
font-size:110%;
color:#FFFFFF;
font-weight:bold;
margin: 10px 10px 10px 10px;
padding: 11px 10px 10px 20px;
}

#main h3 {
font-size:105%;
border-left:#522a02 solid 6px;
border-bottom:#cccccc solid 1px;
padding: 5px 10px 5px 5px;
margin: 0px;
}

#main .entry_body {
margin: 15px 24px 15px 24px;
padding: 0px 0px 0px 0px;
}

#main p {
margin: 10px 10px 20px 10px;
padding: 0px 0px 0px 0px;
}

#main blockquote {
margin: 20px 10px 20px 10px;
padding: 10px 10px 10px 10px;
border:#999999 dotted 1px;
background: #FFFFFF;
}

#main ul {
margin: 0px 30px 0px 28px;
padding: 0px 0px 10px 0px;
}

#main ol {
margin: 0px 30px 0px 35px;
padding: 0px 0px 10px 0px;
}

#main li {
line-height: 140%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
}

#main .red {
color:#CC0000;
font-weight:bold;
}

.modoru {
font-size:10px;
text-align:right;
padding: 5px 5px 5px 5px;
margin: 0px 34px 0px 0px;
}

/* main table メインのテーブル
-----------------------------------------------------*/

#main table ul {
margin: 5px 0px 5px 20px;
padding: 0px 0px 0px 0px;
}

#main table {
margin: 10px 0px 20px 0px;
padding: 0px 0px 0px 0px;
width:600px;
border:solid #cccccc 1px;
border-collapse:collapse;
}

#main caption {
margin: 0px 0px 10px 0px;
font-size:110%;
font-weight:bold;
}

#main th {
padding: 10px 10px 10px 10px;
border:solid #cccccc 1px;
background-color:#f8f8f8;
text-align:center;
}

#main td {
padding: 10px 10px 10px 10px;
border:solid #cccccc 1px;
}


#main .clear {
clear:both;
visibility:hidden;
height: 0;
padding: 0;
margin: 0;
}

/* new 更新情報
-----------------------------------------------------*/

#main .new {
height: 150px;
overflow: auto;
margin-right: auto;
margin-left: auto;
}

#main .new li {
border-bottom:#CCCCCC dotted 2px;
margin: 5px 0px 5px 0px;
padding: 5px 0px 10px 0px;
}

/* sub サブ
-----------------------------------------------------*/

#sub {
float:left;
font-size:12px;
width:240px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background:#663300;
border-right:#999999 1px solid;
border-bottom:#999999 1px solid;
color:#FFFFFF;
}

#sub .category {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}

#sub h3 {
color:#FFFFFF;
background:#522a02;
font-size:12px;
text-align:left;
font-weight:bold;
margin: 5px 5px 5px 5px;
padding: 10px 10px 10px 10px;
border:#996633 1px solid;
}

#sub .h3kazari {
border-left:#ffffff solid 5px;
padding: 0px 0px 0px 5px;
}

#sub .entry_body {
margin: 5px 5px 5px 5px;
padding: 10px 10px 10px 10px;
background: #332B99;
}

#sub p {
margin: 5px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}

#sub blockquote {
margin: 5px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border:#663300 dotted 1px;
}

#sub .soto {
margin: 0px 10px 0px 10px;
}

#sub ul {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
background: #332B99;
}

#sub li {
line-height: 120%;
list-style:none;
margin: 5px 0px 5px 0px;
border:#663300 1px solid;
}

#sub li a, #sub li a:link, #sub li a:visited {
color:#FFFFFF;
text-decoration:none;
display:block;
padding: 10px 10px 10px 10px;
}

#sub li a:hover {
color:#333333;
background:#cc9966;
text-decoration: none;
padding: 10px 10px 10px 10px;
}

/* footer フッター
-----------------------------------------------------*/

#footer {
text-align:center;
font-size:10px;
background: #FFFFFF;
border-top:#522a02 solid 20px;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
clear:both;
}

#footer p {
margin: 5px 25px 5px 25px;
padding: 0px 0px 0px 0px;
}

/* ｃａｌｅｎｄａｒ カレンダー
-----------------------------------------------------*/

#calendar{

body, h1, h2, h3, h4, h5, h6, p,
 ul, ol, dl, dt, dd, li, table,
 th, td, form, fieldset, select,
 option, button, span, input, main
float:left;
font-size:12px;
width:240px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background:#332b99;
}


{
    font-weight: normal;
    font-style: normal;
    font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","ＭＳ ゴシック",sans-serif;
    margin: 0px;
    padding: 0px;
    
    
}

#libraryHours-main {
    box-sizing: border-box;
    background-color: #fff;
    width: 212px;
    height: 100%;
    border: 1px solid #ccc;
    border-bottom: 4px solid #000;
}

.libraries {
    height: auto;
    padding: 10px 0px;
    border-bottom: 1px solid #ccc;
    background: #222;
    z-index: 0;
}

.selects {
    background: #fff;
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    width: 90%;
}

.selects select {
    width: 100%;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1px 20px 0px 10px;
    font-size: 14px; 
    background: url("./img/iconMenuTriangleSP.png") no-repeat;
    background-position-y: 12px;
    background-position-x: 166px;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
}

.selects select:focus{
  outline: 1px dotted #212121;
}

.selects select::-ms-expand{
  display: none;
}

.selects select::-moz-focus-inner{
  border: 0;
}

.select select option{
  text-shadow: none;
}

.icon-down{
    display: inline-block;
    width:30px;
    height:16px;
}

.calendar {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

.calendar thead {
    background-color: #f5f5f5;
}

.calendar tbody {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.calendar tbody td {
    padding-top: 1px;
}

.calendar tr:first-child > td {
    padding-top: 5px;
}

.calendar tr:last-child > td span {
    margin-bottom: 4px;
}

.calendar tr td span {
    display: block;
    width: 25px;
    height: 21px;
}

.calendar thead tr:nth-child(2) th {
    color: #555;
    padding-top: 5px;
}

.calendar thead tr th:first-of-type,
.calendar tr > td:first-of-type {
    padding-left: 10px;
}

.calendar thead tr > th:last-of-type,
.calendar tr > td:last-of-type {
    padding-right: 10px;
}

.calendar th, .calendar td {
    text-align: center;
    -webki-ttransition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.calendar .currDay {
    cursor: default;
}

.calendar .selected {
    background-color: #22A7F0 !important;
    color: #FFF !important;
}

.calendar #currM {
    padding-top: 4px;
    font-size: 18px;
}

.calendar #prev {
    background: url("./img/iconCalendarPrev.png") no-repeat right;
    cursor: pointer;
}

.calendar #next {
    background: url("./img/iconCalendarNext.png") no-repeat left;
    cursor: pointer;
}

.calendar .currDay span {
    text-decoration: underline;
}

.calendar .eventDay span {
    border-radius: 3px;
    background: #208880;
    color: #fff;
}

.calendar .eventDay {
    cursor: pointer;
}

.calendar .closingDay span {
    border-radius: 50%;
    background: #f3b3cd;
}

.calendarIcon {
    margin-left: 24px;
    margin-top: 7px;
    height: 24px;
}

.calendarIcon li {
    list-style: none;
    float: left;
    margin-right: 10px;
    font-size: 12px;
}

.calendarIcon li:last-child {
    margin-right: 0px;
}

.calendarIcon .todayIcon {
    border-bottom: 1px solid #212121;
}

.calendarIcon .closedIcon::before {
    content: url('./img/iconCalendarListClosed.png');
    padding-right: 4px;
}

.calendarIcon .eventIcon::before {
    content: url('./img/iconCalendarListEvent.png');
    padding-right: 4px;
}
}