@charset "UTF-8";
@font-face {
  font-family: "hannari";
  src: url("font/hannari.eot?") format("eot");
  src: url("font/hannari.eot?#iefix") format("embedded-opentype"), url("font/hannari.woff") format("woff"), url("font/hannari.otf") format("opentype"); }
.hannari {
  font-family: "hannari"; }

.lora {
  font-family: 'Lora', serif; }

/*==================================

全体

===================================*/
body {
  color: #343426;
  font-family: Helvetica, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  line-height: 1.6em;
  font-size: 16px;
  -webkit-text-size-adjust: 100%; }

input, button, textarea, select {
  -webkit-appearance: none;
  border-radius: 0; }

/*==================================

ヘッダー

===================================*/
.kyotsu header {
  width: 100%;
  background-color: #F0F0E1;
  border-top: 5px #3D77BE solid; }
  .kyotsu header #headerIn {
    position: relative;
    padding-left: 250px;
    height: 250px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .kyotsu header #headerIn {
        position: static;
        padding-left: 0;
        height: auto; } }
    .kyotsu header #headerIn #searchAndLogo {
      width: 250px;
      height: 245px;
      background-color: #3D77BE;
      position: absolute;
      top: 0;
      left: 0;
      padding: 5px;
      z-index: 5; }
      @media screen and (max-width: 768px) {
        .kyotsu header #headerIn #searchAndLogo {
          width: 100%;
          height: auto;
          position: static; } }
      .kyotsu header #headerIn #searchAndLogo a {
        font-family: "hannari";
        font-size: 32px;
        text-align: center;
        display: block;
        color: #FFFFFF;
        text-decoration: none;
        margin: 80px auto 10px auto; }
        @media screen and (max-width: 768px) {
          .kyotsu header #headerIn #searchAndLogo a {
            margin: 10px auto; } }
      .kyotsu header #headerIn #searchAndLogo span {
        font-size: 14px;
        display: block;
        font-family: 'Lora', serif;
        text-align: center;
        color: #FFFFFF;
        margin-bottom: 65px; }
        @media screen and (max-width: 768px) {
          .kyotsu header #headerIn #searchAndLogo span {
            margin-bottom: 10px; } }
      @media screen and (max-width: 768px) {
        .kyotsu header #headerIn #searchAndLogo form {
          width: 250px;
          margin: 0 auto; } }
    .kyotsu header #headerIn #gNav {
      margin: 20px 0; }
      @media screen and (max-width: 768px) {
        .kyotsu header #headerIn #gNav {
          margin: 5px 10px 10px; } }
      .kyotsu header #headerIn #gNav li {
        display: inline-block; }
        @media screen and (max-width: 768px) {
          .kyotsu header #headerIn #gNav li {
            display: block;
            border-bottom: 1px solid #ccc; } }
        .kyotsu header #headerIn #gNav li a {
          display: inline-block;
          padding: 5px 21px 10px 22px;
          border-right: 1px #9B9B8C solid;
          font-size: 18px;
          font-family: "hannari";
          text-decoration: none;
          letter-spacing: -0.08em;
          color: #343426 !important; }
          @media screen and (max-width: 768px) {
            .kyotsu header #headerIn #gNav li a {
              padding: 5px;
              border-right: 0;
              display: block; } }
          .kyotsu header #headerIn #gNav li a:hover {
            background: url("images/common/thisPage.png") center bottom no-repeat; }
            @media screen and (max-width: 768px) {
              .kyotsu header #headerIn #gNav li a:hover {
                background: none; } }
      @media screen and (max-width: 768px) {
        .kyotsu header #headerIn #gNav li:last-child {
          border-bottom: 0; } }
      .kyotsu header #headerIn #gNav li:last-child a {
        border-right: none; }
  .kyotsu header #mainImg {
    margin: -170px auto 0;
    z-index: -1;
    width: 100%;
    height: 350px;
    background-image: url(images/shimabara/home/slide01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom; }
    @media screen and (max-width: 768px) {
      .kyotsu header #mainImg {
        margin: 0;
        height: 200px; } }

.news #gNav01 {
  background: url("images/common/thisPage.png") center bottom no-repeat !important; }
  @media screen and (max-width: 768px) {
    .news #gNav01 {
      background: none !important; } }

.guide #gNav02 {
  background: url("images/common/thisPage.png") center bottom no-repeat !important; }
  @media screen and (max-width: 768px) {
    .guide #gNav02 {
      background: none !important; } }

.shisetsu #gNav03 {
  background: url("images/common/thisPage.png") center bottom no-repeat !important; }
  @media screen and (max-width: 768px) {
    .shisetsu #gNav03 {
      background: none !important; } }

.event #gNav04 {
  background: url("images/common/thisPage.png") center bottom no-repeat !important; }
  @media screen and (max-width: 768px) {
    .event #gNav04 {
      background: none !important; } }

.bunshitsu #gNav05 {
  background: url("images/common/thisPage.png") center bottom no-repeat !important; }
  @media screen and (max-width: 768px) {
    .bunshitsu #gNav05 {
      background: none !important; } }

.konne #gNav05 {
  background: url("images/common/thisPage.png") center bottom no-repeat !important; }
  @media screen and (max-width: 768px) {
    .konne #gNav05 {
      background: none !important; } }

.matsudaira #gNav06 {
  background: url("images/common/thisPage.png") center bottom no-repeat !important; }
  @media screen and (max-width: 768px) {
    .matsudaira #gNav06 {
      background: none !important; } }

#searchBox {
  width: 175px;
  height: 30px;
  display: block;
  float: left;
  font-size: 16px;
  font-family: Helvetica, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  padding-left: 5px; }

#submitbutton {
  background: url("images/common/search.png") left top no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 60px;
  height: 30px;
  display: block;
  float: right; }

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

有明図書館専用CSS

------------------------------------------*/
#ariake header {
  border-top: 5px #CE726C solid; }
  #ariake header #headerIn #searchAndLogo {
    background-color: #CE726C; }
  #ariake header #headerIn #gNav li a {
    padding: 5px 37px 10px 34px; }
    @media screen and (max-width: 768px) {
      #ariake header #headerIn #gNav li a {
        padding: 5px; } }
  #ariake header #mainImg {
    background-image: url(images/ariake/home/slide01.png); }

/*==================================

メイン+サイドバー

===================================*/
#mainSideWrap {
  padding-top: 50px; }
  @media screen and (max-width: 768px) {
    #mainSideWrap {
      padding: 10px 0; } }

#main {
  width: 700px;
  float: right; }
  @media screen and (max-width: 768px) {
    #main {
      width: 100%;
      padding: 10px;
      float: none; } }

#sidebar {
  width: 250px;
  float: left;
  margin-bottom: 100px; }
  @media screen and (max-width: 768px) {
    #sidebar {
      width: 100%;
      max-width: 330px;
      float: none;
      margin: 0 auto;
      padding: 10px; } }
  @media screen and (max-width: 768px) {
    #sidebar ul.sideNav {
      max-width: 330px; } }
  #sidebar ul.sideNav li {
    width: 250px;
    border: #3D77BE 2px solid;
    margin-bottom: 10px; }
    @media screen and (max-width: 768px) {
      #sidebar ul.sideNav li {
        width: 100%;
        max-width: 330px; }
        #sidebar ul.sideNav li img {
          width: 100%;
          max-width: 328px; } }
    #sidebar ul.sideNav li a.arrow {
      display: block;
      width: 248px;
      background: url("images/shimabara/common/arrow-blue.png") 95% center no-repeat;
      min-height: 48px;
      line-height: 48px;
      padding-left: 8px;
      text-decoration: none; }
      @media screen and (max-width: 768px) {
        #sidebar ul.sideNav li a.arrow {
          width: 100%;
          max-width: 328px;
          background: url("images/shimabara/common/arrow-blue.png") right 10px center no-repeat; } }
      #sidebar ul.sideNav li a.arrow:hover {
        background-color: #3D77BE;
        color: #FFFFFF; }
    #sidebar ul.sideNav li.ariake {
      border: #CE726C 2px solid; }
      #sidebar ul.sideNav li.ariake a.arrow {
        background: url("images/shimabara/common/arrow-red.png") 95% center no-repeat;
        color: #CE726C; }
        #sidebar ul.sideNav li.ariake a.arrow:hover {
          background-color: #CE726C;
          color: #fff; }
  #sidebar #sideaboutLibrary {
    margin-bottom: 20px; }
    #sidebar #sideaboutLibrary p.aboutlib {
      font-family: "hannari";
      font-size: 24px;
      text-align: center;
      color: #3D77BE;
      margin: 55px 0 10px; }
      @media screen and (max-width: 768px) {
        #sidebar #sideaboutLibrary p.aboutlib {
          text-align: left; } }
    #sidebar #sideaboutLibrary #aboutAriake {
      color: #CE726C; }
    #sidebar #sideaboutLibrary p.add {
      font-size: 14px;
      padding: 10px 0;
      border-top: 1px #3D77BE solid;
      line-height: 1.5em; }
  #sidebar iframe {
    width: 250px;
    height: 450px;
    border: 0; }
    @media screen and (max-width: 768px) {
      #sidebar iframe {
        width: 100%;
        height: 300px; } }

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

有明図書館専用CSS

------------------------------------------*/
#ariake #sidebar ul.sideNav li {
  border: #CE726C 2px solid; }
  #ariake #sidebar ul.sideNav li a.arrow {
    background: url("images/ariake/common/arrow-red.png") 95% center no-repeat; }
    #ariake #sidebar ul.sideNav li a.arrow:hover {
      background-color: #CE726C;
      color: #FFFFFF; }
  #ariake #sidebar ul.sideNav li.shimabara {
    border: #3D77BE 2px solid; }
    #ariake #sidebar ul.sideNav li.shimabara a.arrow {
      background: url("images/shimabara/common/arrow-blue.png") 95% center no-repeat;
      color: #3D77BE; }
      #ariake #sidebar ul.sideNav li.shimabara a.arrow:hover {
        background-color: #3D77BE;
        color: #fff; }
#ariake #sidebar #sideaboutLibrary p.add {
  border-top: 1px #CE726C solid; }

/*==================================

フッター

===================================*/
.kyotsu footer {
  background-color: #3D77BE; }
  .kyotsu footer p {
    font-family: 'Times New Roman', Times, serif;
    color: #FFFFFF;
    font-size: 12px;
    text-align: center;
    padding: 15px 0; }
    @media screen and (max-width: 768px) {
      .kyotsu footer p {
        padding: 5px 0;
        font-size: 9px; } }

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

有明図書館専用CSS

------------------------------------------*/
#ariake footer {
  background-color: #CE726C; }

/*==================================

共通要素

===================================*/
h3 {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 15px;
  letter-spacing: 0.05em; }

.w1000 {
  width: 1000px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .w1000 {
      width: 100%; } }

.moretext {
  text-align: right;
  font-size: 14px;
  color: #3D77BE; }

.h2Wrap {
  border-bottom: 2px #A2A2A2 solid;
  padding-bottom: 15px; }
  @media screen and (max-width: 768px) {
    .h2Wrap {
      padding-bottom: 5px; } }
  .h2Wrap h2 {
    display: table-cell;
    padding-right: 20px;
    font-size: 30px;
    font-family: "hannari";
    height: 50px;
    line-height: 40px; }
    @media screen and (max-width: 768px) {
      .h2Wrap h2 {
        display: block;
        padding-right: 0;
        height: auto; } }
  .h2Wrap p {
    vertical-align: middle;
    font-size: 14px;
    border-left: 1px solid #A2A2A2;
    padding-left: 20px;
    display: table-cell; }
    @media screen and (max-width: 768px) {
      .h2Wrap p {
        border-left: 0;
        padding-left: 0;
        display: block; } }

p.pageTop {
  text-align: right;
  height: 50px; }
  @media screen and (max-width: 768px) {
    p.pageTop {
      /*margin-top:40px;*/ } }
  p.pageTop a img {
    display: inline; }

table.commonTable {
  width: 700px;
  font-size: 18px;
  border-bottom: #A5A5A5 dotted 1px; }
  @media screen and (max-width: 768px) {
    table.commonTable {
      width: 100%; } }
  table.commonTable th, table.commonTable td {
    padding: 10px 0;
    vertical-align: top;
    border-top: #A5A5A5 dotted 1px;
    text-align: left; }
    @media screen and (max-width: 768px) {
      table.commonTable th, table.commonTable td {
        display: block;
        width: 100% !important; } }
  @media screen and (max-width: 768px) {
    table.commonTable th {
      border-bottom: 0;
      padding-bottom: 0; } }
  @media screen and (max-width: 768px) {
    table.commonTable td {
      border-top: 0;
      padding-top: 0; } }

a img:hover {
  opacity: 0.8; }

.editlink {
  display: inline;
  font-size: 14px !important; }

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

島原図書館専用CSS

------------------------------------------*/
#shimabara a {
  color: #3D77BE;
  text-decoration: underline; }

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

有明図書館専用CSS

------------------------------------------*/
#ariake a {
  color: #CE726C;
  text-decoration: underline; }
#ariake .moretext {
  color: #CE726C; }

/*========================================

エントランス

========================================*/
#entrance {
  height: 100%;
  width: 100%; }
  @media screen and (max-width: 768px) {
    #entrance {
      height: auto !important; } }
  #entrance header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100px;
    width: 100%;
    padding: 30px 35px 0 55px;
    border-top: #282126 5px solid;
    background-color: #FFFFFF; }
    @media screen and (max-width: 768px) {
      #entrance header {
        text-align: center;
        position: static;
        height: auto;
        padding: 10px 0 0;
        margin-bottom: 20px; } }
    #entrance header #h1Wrap {
      float: left;
      width: 390px; }
      @media screen and (max-width: 768px) {
        #entrance header #h1Wrap {
          float: none;
          width: 100%;
          margin: 0 auto; } }
      #entrance header #h1Wrap h1 {
        font-family: "hannari";
        font-size: 28px;
        color: #282126;
        margin-right: 1em;
        height: 30px;
        line-height: 30px;
        float: left; }
        @media screen and (max-width: 768px) {
          #entrance header #h1Wrap h1 {
            margin-right: 0;
            float: none;
            margin: 0 auto; } }
      #entrance header #h1Wrap p {
        font-family: 'Lora', serif;
        font-size: 14px;
        color: #666659;
        height: 30px;
        padding-top: 8px;
        float: left; }
        @media screen and (max-width: 768px) {
          #entrance header #h1Wrap p {
            height: auto;
            float: none;
            margin: 0 auto 20px; } }
    #entrance header #entrancesearch {
      width: 370px;
      float: right; }
      @media screen and (max-width: 768px) {
        #entrance header #entrancesearch {
          width: 100%;
          float: none;
          margin: 0 auto; } }
      #entrance header #entrancesearch p {
        font-family: "hannari";
        float: left; }
        @media screen and (max-width: 768px) {
          #entrance header #entrancesearch p {
            float: none;
            margin: 0 auto 5px; } }
      #entrance header #entrancesearch form {
        float: right; }
        @media screen and (max-width: 768px) {
          #entrance header #entrancesearch form {
            float: none;
            width: 250px;
            margin: 0 auto; } }
        #entrance header #entrancesearch form #searchBox {
          border: 1px solid #BDBDAE;
          height: 30px;
          width: 175px;
          display: block;
          float: left;
          margin-right: 5px; }
        #entrance header #entrancesearch form #submitbutton {
          display: block;
          width: 60px;
          float: right; }
  #entrance #entranceMain {
    width: 100%; }
    @media screen and (max-width: 768px) {
      #entrance #entranceMain {
        padding: 10px; } }
    #entrance #entranceMain div {
      padding: 110px 10px 10px; }
      @media screen and (max-width: 768px) {
        #entrance #entranceMain div {
          margin-bottom: 10px;
          padding-top: 10px; } }
    #entrance #entranceMain #entranceShimabara {
      width: 50%;
      float: left;
      height: 100%;
      background-image: url(images/common/bak-shimabara-img.png);
      background-size: cover; }
      @media screen and (max-width: 768px) {
        #entrance #entranceMain #entranceShimabara {
          width: 100%;
          float: none;
          height: auto; } }
      #entrance #entranceMain #entranceShimabara a.touch span.wrap {
        background-image: url(images/common/bac-blue.png);
        /*&:hover {
            span {
                color: darken( $ariake, 50%);
            }
        }*/ }
      #entrance #entranceMain #entranceShimabara a.touch span.arrow {
        color: #3D77BE; }
        #entrance #entranceMain #entranceShimabara a.touch span.arrow span {
          background-image: url(images/common/arrow-blue-13.png); }
      #entrance #entranceMain #entranceShimabara a.touch:hover {
        color: black; }
        #entrance #entranceMain #entranceShimabara a.touch:hover span.arrow {
          color: black; }
    #entrance #entranceMain #entranceAriake {
      height: 100%;
      width: 50%;
      float: right;
      background-image: url(images/common/bak-ariake-img.png);
      background-size: cover; }
      @media screen and (max-width: 768px) {
        #entrance #entranceMain #entranceAriake {
          width: 100%;
          float: none;
          height: auto; } }
      #entrance #entranceMain #entranceAriake a.touch span.wrap {
        background-image: url(images/common/bac-red.png); }
        #entrance #entranceMain #entranceAriake a.touch span.wrap:hover span {
          color: #2c110f; }
      #entrance #entranceMain #entranceAriake a.touch span.arrow {
        color: #CE726C; }
        #entrance #entranceMain #entranceAriake a.touch span.arrow span {
          background-image: url(images/common/arrow-red-13.png); }
      #entrance #entranceMain #entranceAriake a.touch:hover {
        color: #2c110f; }
        #entrance #entranceMain #entranceAriake a.touch:hover span.arrow {
          color: #2c110f; }
    #entrance #entranceMain a.touch {
      display: block;
      width: 100%;
      color: #FFFFFF; }
      @media screen and (max-width: 768px) {
        #entrance #entranceMain a.touch {
          margin-bottom: 200px; } }
      #entrance #entranceMain a.touch span.wrap {
        display: block;
        /*color: #FFFFFF;*/
        padding: 20px 0; }
        #entrance #entranceMain a.touch span.wrap span {
          display: block;
          text-align: center; }
        #entrance #entranceMain a.touch span.wrap span.name {
          font-family: "hannari";
          font-size: 40px;
          display: block;
          margin-bottom: 0.5em; }
        #entrance #entranceMain a.touch span.wrap span.add {
          font-family: 'Lora', serif;
          font-size: 16px;
          display: block; }
      #entrance #entranceMain a.touch span.arrow {
        display: block;
        background-image: url(images/common/bac-white.png);
        font-family: "hannari";
        font-size: 24px;
        padding: 0px 10px 0px 15px; }
        #entrance #entranceMain a.touch span.arrow span {
          display: block;
          background-repeat: no-repeat;
          background-position: right 50%;
          padding: 5px 0px 15px 0px; }
  #entrance footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background-color: #282126;
    padding: 15px 25px; }
    @media screen and (max-width: 768px) {
      #entrance footer {
        position: static;
        padding: 10px; } }
    #entrance footer ul {
      float: left; }
      @media screen and (max-width: 768px) {
        #entrance footer ul {
          float: none; } }
      #entrance footer ul li {
        float: left;
        background-image: url(images/common/arrow-yellos-8.png);
        background-repeat: no-repeat;
        background-position: right center;
        margin-right: 2.5em; }
        @media screen and (max-width: 768px) {
          #entrance footer ul li {
            float: none;
            display: block;
            margin-right: 0;
            background-image: none; } }
        #entrance footer ul li a {
          display: block;
          padding-right: 20px;
          color: #FFFFFF;
          font-size: 14px; }
          @media screen and (max-width: 768px) {
            #entrance footer ul li a {
              background-image: url(images/common/arrow-yellos-8.png);
              background-repeat: no-repeat;
              background-position: right center;
              display: inline-block;
              padding-right: 15px; } }
          #entrance footer ul li a:hover {
            text-decoration: underline; }
    #entrance footer p {
      color: #FFFFFF;
      font-size: 12px;
      float: right;
      font-family: 'Lora', serif; }

/*=======================================

ホーム

========================================*/
@media screen and (max-width: 768px) {
  .home #main {
    margin-bottom: 40px; } }
.home #main .newsList {
  margin-bottom: 40px; }
  @media screen and (max-width: 768px) {
    .home #main .newsList {
      /*max-width:330px;*/
      margin-bottom: 10px; } }
  .home #main .newsList li {
    width: 330px;
    float: left;
    margin: 40px 38px 0 0; }
    @media screen and (max-width: 768px) {
      .home #main .newsList li {
        clear: both;
        width: 100%;
        min-height: 83px;
        /*max-width:330px;*/
        float: none;
        margin: 10px 0 10px;
        padding: 0 0 10px;
        border-bottom: 1px solid #ccc; } }
    .home #main .newsList li a {
      display: block;
      margin-bottom: 10px; }
      @media screen and (max-width: 768px) {
        .home #main .newsList li a img {
          margin-bottom: 5px;
          /*width:100%;
          max-width:330px;*/
          width: 100px;
          float: left;
          margin-right: 15px; } }
    .home #main .newsList li p.date {
      color: #686859;
      font-size: 14px; }
      @media screen and (max-width: 768px) {
        .home #main .newsList li p.date {
          font-size: 12px; } }
    @media screen and (max-width: 768px) {
      .home #main .newsList li p.text {
        overflow: hidden; } }
    .home #main .newsList li a {
      display: block;
      font-size: 18px; }
      @media screen and (max-width: 768px) {
        .home #main .newsList li a {
          font-size: 16px; } }
  .home #main .newsList li:nth-child(2n) {
    margin: 40px 0px 0 0; }
    @media screen and (max-width: 768px) {
      .home #main .newsList li:nth-child(2n) {
        margin: 10px 0 10px; } }
.home #main .moretext {
  padding-bottom: 30px; }

/*========================================

サブページ共通

========================================*/
.sub #naviWrap {
  background-color: #FFFFFF;
  margin: -170px auto 0;
  width: 100%;
  height: 175px; }
  @media screen and (max-width: 768px) {
    .sub #naviWrap {
      margin: 0 auto 0;
      height: auto;
      padding: 10px; } }
  .sub #naviWrap #pankuzu {
    margin: 0 0 0 -20px;
    padding-top: 10px; }
    @media screen and (max-width: 768px) {
      .sub #naviWrap #pankuzu {
        margin: 0 0 0 0;
        padding-top: 0; } }
    .sub #naviWrap #pankuzu * {
      display: inline-block;
      margin: 0 5px;
      letter-spacing: 0.05em;
      font-size: 12px; }
    @media screen and (max-width: 768px) {
      .sub #naviWrap #pankuzu p {
        margin: 0; } }
    .sub #naviWrap #pankuzu span {
      color: #333326; }
  .sub #naviWrap #navi {
    padding-left: 300px;
    position: relative;
    height: 175px; }
    @media screen and (max-width: 768px) {
      .sub #naviWrap #navi {
        padding-left: 0;
        height: auto;
        position: static; } }
    .sub #naviWrap #navi h2 {
      position: absolute;
      height: 50px;
      bottom: 5px;
      left: 295px;
      font-family: "hannari";
      font-size: 54px;
      letter-spacing: -0.05em;
      color: #333326; }
      @media screen and (max-width: 768px) {
        .sub #naviWrap #navi h2 {
          position: static;
          height: auto;
          line-height: 100%;
          font-size: 40px;
          text-align: center;
          margin: 20px 0; } }
      .sub #naviWrap #navi h2 span {
        font-size: 24px; }
        @media screen and (max-width: 768px) {
          .sub #naviWrap #navi h2 span {
            font-size: 18px; } }
.sub ul#pageguide {
  margin-bottom: 50px; }
  .sub ul#pageguide li {
    padding: 0 10px; }
    .sub ul#pageguide li a {
      padding: 8px 0;
      color: #666666;
      display: block;
      background-position: right center;
      background-repeat: no-repeat;
      text-decoration: none; }
      .sub ul#pageguide li a:hover {
        text-decoration: underline; }
@media screen and (max-width: 768px) {
  .sub ul#gNav {
    display: none; } }
@media screen and (max-width: 768px) {
  .sub #sidebar {
    display: none; } }

#shimabara ul#pageguide {
  border-bottom: 1px solid #3D77BE; }
  #shimabara ul#pageguide li {
    border-top: 1px solid #3D77BE; }
    #shimabara ul#pageguide li a {
      background-image: url(images/shimabara/common/arrow-blue.png); }

#ariake ul#pageguide {
  border-bottom: 1px solid #CE726C; }
  #ariake ul#pageguide li {
    border-top: 1px solid #CE726C; }
    #ariake ul#pageguide li a {
      background-image: url(images/ariake/common/arrow-red.png); }

/*========================================

新着情報一覧

========================================*/
.news #main table th {
  color: #676759;
  width: 130px;
  font-weight: 400; }

/*========================================

新着情報詳細

========================================*/
.news #main .date {
  color: #676759;
  font-size: 18px; }
  @media screen and (max-width: 768px) {
    .news #main .date {
      font-size: 12px; } }
.news #main .title {
  font-size: 34px;
  color: #343426;
  line-height: 1.4em;
  margin-bottom: 45px; }
  @media screen and (max-width: 768px) {
    .news #main .title {
      font-size: 24px; } }
.news #main div.note img {
  margin: 0 auto 45px;
  max-width: 700px; }
  @media screen and (max-width: 768px) {
    .news #main div.note img {
      margin: 0 auto 20px;
      width: 100%;
      max-width: 700px; } }
.news #main div.note div.text p {
  color: #333326; }
.news #main div.note div.text p + p {
  margin-top: 1em; }

/*========================================

利用案内

========================================*/
.guide section {
  margin-bottom: 50px; }
.guide h4 {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 0.5em; }
.guide .commonTable {
  color: #333326;
  font-size: 16px; }
  .guide .commonTable th {
    width: 185px;
    color: #4C2D26;
    font-weight: bold; }
    @media screen and (max-width: 768px) {
      .guide .commonTable th br {
        display: none; } }
  .guide .commonTable td table {
    border-bottom: none !important;
    width: 530px; }
    @media screen and (max-width: 768px) {
      .guide .commonTable td table {
        width: 100%; } }
    .guide .commonTable td table th {
      color: #3D77BE; }
    .guide .commonTable td table td {
      font-size: 14px; }
      .guide .commonTable td table td span {
        font-size: 12px;
        display: block;
        margin-top: 10px; }
.guide .commonUl {
  padding-left: 1em; }
  .guide .commonUl li {
    text-indent: -1em;
    margin-bottom: 0.2em; }

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

有明図書館専用CSS

------------------------------------------*/
#ariake .commonTable td th {
  color: #CE726C; }

/*========================================

施設案内

========================================*/
.shisetsu section {
  margin-bottom: 50px; }
  .shisetsu section iframe {
    width: 700px;
    height: 350px; }
    @media screen and (max-width: 768px) {
      .shisetsu section iframe {
        width: 100%;
        height: 250px; } }
  .shisetsu section #img-01, .shisetsu section #img-03 {
    margin-bottom: 30px; }
  .shisetsu section #img-02 {
    margin-top: 15px; }
  .shisetsu section table {
    width: 700px; }
    @media screen and (max-width: 768px) {
      .shisetsu section table {
        width: 100%; } }
    .shisetsu section table th {
      width: 115px; }
      @media screen and (max-width: 768px) {
        .shisetsu section table th {
          width: 50px;
          vertical-align: top; } }
      .shisetsu section table th span {
        display: block;
        width: 100px;
        height: 30px;
        margin: 10px 0 0; }
        @media screen and (max-width: 768px) {
          .shisetsu section table th span {
            width: 40px; } }
    .shisetsu section table #tab01 span {
      background-color: #FF5555; }
    .shisetsu section table #tab02 span {
      background-color: #FFFF66; }
    .shisetsu section table #tab03 span {
      background-color: #5B9DFF; }
    .shisetsu section table #tab04 span {
      background-color: #33CC33; }
    .shisetsu section table #tab05 span {
      background-color: #9E80DF; }
    .shisetsu section table #tab06 span {
      background-color: #B55A00; }
    .shisetsu section table td {
      padding: 10px 0 0; }
      @media screen and (max-width: 768px) {
        .shisetsu section table td {
          vertical-align: top; } }
  @media screen and (max-width: 768px) {
    .shisetsu section img {
      max-width: 100%; } }

/*========================================

イベント情報

========================================*/
.event section {
  margin-bottom: 50px; }
.event #section01 p + p {
  margin-top: 1em; }
.event #section01 p img {
  display: inline-block; }
  @media screen and (max-width: 768px) {
    .event #section01 p img {
      display: block;
      margin: 0 auto 10px; } }
.event #section01 p img + img {
  margin-left: 3px; }
  @media screen and (max-width: 768px) {
    .event #section01 p img + img {
      display: block;
      margin: 0 auto 10px; } }
.event #section02 table {
  width: 700px; }
  @media screen and (max-width: 768px) {
    .event #section02 table {
      width: 100%; } }
  .event #section02 table th {
    width: 170px;
    color: #4C2D26;
    font-weight: bold; }
  .event #section02 table td {
    color: #333326; }
    .event #section02 table td ul li {
      border-bottom: 1px dotted #A1A1A1;
      padding: 10px 0; }
    .event #section02 table td ul li:last-child {
      border-bottom: none; }
    .event #section02 table td p {
      font-size: 18px;
      color: #3D77BE; }
    .event #section02 table td span {
      font-size: 14px;
      line-height: 1.4em; }
.event #section03 div.sectionIn-l {
  width: 300px;
  min-height: 300px;
  background-image: url(images/common/bac-img-01.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  float: left; }
  @media screen and (max-width: 768px) {
    .event #section03 div.sectionIn-l {
      width: 100%;
      min-height: 1em;
      background-image: none;
      float: none;
      margin-bottom: 10px; } }
  .event #section03 div.sectionIn-l p {
    color: #676759;
    font-size: 14px; }
.event #section03 div.sectionIn-r {
  width: 390px;
  float: right;
  padding: 15px 0 15px 30px;
  border-left: #A1A1A1 1px solid; }
  @media screen and (max-width: 768px) {
    .event #section03 div.sectionIn-r {
      width: 100%;
      float: none;
      padding: 0;
      border-left: none; } }
  .event #section03 div.sectionIn-r ul li {
    margin-bottom: 0.5em; }
.event #section04 .commonTable th {
  width: 120px;
  padding-left: 10px;
  color: #4C2C26;
  font-weight: bold; }
  @media screen and (max-width: 768px) {
    .event #section04 .commonTable th {
      width: 100%;
      padding-left: 0; } }
.event #section04 .commonTable td {
  font-size: 16px; }
  @media screen and (max-width: 768px) {
    .event #section04 .commonTable td {
      font-size: 14px; } }
.event #section04 p {
  text-align: right;
  margin-top: 1em;
  font-size: 14px; }
  @media screen and (max-width: 768px) {
    .event #section04 p {
      text-align: left; } }

/*========================================

分室情報

========================================*/
.bunshitsu section p.text {
  margin-bottom: 50px; }
@media screen and (max-width: 768px) {
  .bunshitsu section ul {
    max-width: 330px;
    margin: 0 auto; } }
.bunshitsu section ul li {
  width: 220px;
  float: left;
  margin: 0 20px 45px 0; }
  @media screen and (max-width: 768px) {
    .bunshitsu section ul li {
      width: 100%;
      float: none;
      margin: 0 auto 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #999; } }
  @media screen and (max-width: 768px) {
    .bunshitsu section ul li img {
      width: 100%; } }
  .bunshitsu section ul li p.name {
    font-size: 18px;
    padding: 10px 0 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #A2A2A2;
    color: #3D77BE; }
    @media screen and (max-width: 768px) {
      .bunshitsu section ul li p.name {
        border-bottom: 0;
        padding: 5px 0;
        margin-bottom: 0; } }
  .bunshitsu section ul li p.address {
    font-size: 14px; }
    @media screen and (max-width: 768px) {
      .bunshitsu section ul li p.address {
        line-height: 150%; } }
.bunshitsu section ul li:nth-child(3n) {
  margin: 0 0 45px 0; }

/*========================================

松平文庫

========================================*/
.matsudaira section {
  margin-bottom: 50px; }
.matsudaira #section01 .text {
  line-height: 1.8em;
  margin-bottom: 30px; }
  .matsudaira #section01 .text p#imgWrap01 {
    float: left;
    margin-right: 30px; }
    @media screen and (max-width: 768px) {
      .matsudaira #section01 .text p#imgWrap01 {
        float: none;
        margin-right: 0; } }
    .matsudaira #section01 .text p#imgWrap01 img {
      width: 100%;
      max-width: 300px;
      margin: 0 auto 10px; }
    .matsudaira #section01 .text p#imgWrap01 img + img {
      margin-top: 30px; }
      @media screen and (max-width: 768px) {
        .matsudaira #section01 .text p#imgWrap01 img + img {
          margin-top: 10px; } }
  .matsudaira #section01 .text p#imgWrap02 {
    float: right;
    margin-left: 30px; }
    @media screen and (max-width: 768px) {
      .matsudaira #section01 .text p#imgWrap02 {
        float: none;
        margin-left: 0; } }
    .matsudaira #section01 .text p#imgWrap02 img {
      width: 100%;
      max-width: 300px;
      margin: 0 auto 10px; }
    .matsudaira #section01 .text p#imgWrap02 img + img {
      margin-top: 30px; }
      @media screen and (max-width: 768px) {
        .matsudaira #section01 .text p#imgWrap02 img + img {
          margin-top: 10px; } }
.matsudaira #section01 a#morematudaira {
  display: block;
  font-family: "hannari";
  background-color: #338C9E;
  padding: 20px;
  color: #FFFFFF;
  font-size: 22px;
  text-decoration: none;
  background-image: url(images/common/arrow-white-13.png);
  background-repeat: no-repeat;
  background-position: 95% center; }
  @media screen and (max-width: 768px) {
    .matsudaira #section01 a#morematudaira {
      padding: 10px 30px 10px 10px; } }
  .matsudaira #section01 a#morematudaira:hover {
    background-color: #276a77; }
  .matsudaira #section01 a#morematudaira span {
    font-size: 14px;
    display: inline-block;
    margin-right: 25px; }
    @media screen and (max-width: 768px) {
      .matsudaira #section01 a#morematudaira span {
        display: block; } }
.matsudaira #section02 ul.commonUl {
  padding-left: 2em; }
  .matsudaira #section02 ul.commonUl li {
    text-indent: -1.8em;
    margin-bottom: 0.8em; }
.matsudaira #section03 table.commonTable th {
  width: 120px;
  padding-left: 10px;
  color: #4C2C26;
  font-weight: bold; }
  @media screen and (max-width: 768px) {
    .matsudaira #section03 table.commonTable th {
      padding-left: 0px; } }
.matsudaira #section03 p {
  color: #B20000;
  text-align: right;
  margin-top: 1em; }
  @media screen and (max-width: 768px) {
    .matsudaira #section03 p {
      text-align: left; } }

/*========================================

こんねだより

========================================*/
.konne section div.sectionIn-l {
  width: 300px;
  min-height: 300px;
  background-image: url(images/common/bac-img-01.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  float: left; }
  @media screen and (max-width: 768px) {
    .konne section div.sectionIn-l {
      width: 100%;
      min-height: 1em;
      background-image: none;
      float: none;
      margin-bottom: 10px; } }
  .konne section div.sectionIn-l p {
    color: #676759;
    font-size: 14px; }
.konne section div.sectionIn-r {
  width: 390px;
  float: right;
  padding: 15px 0 15px 30px;
  border-left: #A1A1A1 1px solid; }
  @media screen and (max-width: 768px) {
    .konne section div.sectionIn-r {
      width: 100%;
      float: none;
      padding: 0;
      border-left: none; } }
  .konne section div.sectionIn-r ul li {
    margin-bottom: 0.5em; }

table.shiryo-list {
    width:100%;
    border-collapse: collapse;
    border-top: 1px dotted #a5a5a5;
    font-size: 90%;
    margin-bottom: 50px;
}
table.shiryo-list tr {
    border-bottom: 1px dotted #a5a5a5;
}
table.shiryo-list th {
    white-space: nowrap;
    padding-left: 0 !important;
}
table.shiryo-list th,
table.shiryo-list td {
    padding: 10px;
    text-align: left;
}

#sidebar ul.sideNav li.outer {
    border:#B6000D 2px solid !important;
}
#sidebar li.outer a {
    color: #B6000D !important;
}
#sidebar ul.sideNav li.outer a.arrow:hover {
    background: #B6000D !important;
    color: #fff !important;
}
#sidebar ul.sideNav li.outer a.arrow {
    background-image: url("images/shimabara/common/arrow-outer.png")  !important;
}

img.parking-img {
    width:100%;
}
ul.parking-desc {
    padding-left: 2em;
    list-style: disc;
}

/* 20250310 */
#sidebar ul.sideNav li a.arrow.row2 {
	line-height: 1;
	height: auto;
	min-height: auto;
	padding-top:1em;
	padding-bottom: 1em;
}
#sidebar ul.sideNav li a.arrow.row2 span {
	display: block;
}
#sidebar ul.sideNav li a.arrow.row2 span.small {
	font-size: 10px;
	margin-bottom: 5px;
}
#sidebar ul.sideNav li a.arrow.row2 span.title {

}

/*========================================

WP管理バーの整理

========================================*/
#wp-admin-bar-edit, #wp-admin-bar-new-content, #wp-admin-bar-comments, #wp-admin-bar-search {
  display: none; }