@charset "UTF-8";
/*---------------------------------------------
//全体リセット
---------------------------------------------*/
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
}

body, div, dl, dt, dd, ul, ol, li, 
h1, h2, h3, h4, h5, h6, 
pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before, q:after {
  content: '';
}

abbr, acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  *font-size: 100%;
}

legend {
  color: #000;
}

figure {
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*:focus {
  outline: 0;
  outline: none;
}

/* clearfix */
.cf {
  zoom: 1;
}

.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

main {
  display: block;
}

a:hover {
  cursor: pointer;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.body_wrap{
overflow: hidden;
}

/*---------------------------------------------
//margin・padding設定
---------------------------------------------*/
@media only screen and (max-width: 768px) {
  .mt_XS_sp,
  .mt_XS,
  .editArea p,
  .editArea ul,
  .editArea ol {
    margin-top: 10px;
  }
  .mt_SS_sp,
  .mt_SS {
    margin-top: 10px;
  }
  .mt_S_sp,
  .mt_S,
  .list_ul,
  .list_ol,
  .editArea h4,
  .editArea h2 + p,
  .editArea img,
  .editArea table {
    margin-top: 20px;
  }
  .mt_M_sp,
  .mt_M,
  .editArea * + h2,
  .editArea h3 {
    margin-top: 30px;
  }
  .mt_L_sp,
  .mt_L {
    margin-top: 40px;
  }
  .mt_LL_sp,
  .mt_LL {
    margin-top: 50px;
  }
  .mt_XL_sp,
  .mt_XL {
    margin-top: 60px;
  }
  .mt_XXL_sp,
  .mt_XXL {
    margin-top: 80px;
  }
  .mb_XS_sp,
  .mb_XS {
    margin-bottom: 10px;
  }
  .mb_SS_sp,
  .mb_SS {
    margin-bottom: 10px;
  }
  .mb_S_sp,
  .mb_S {
    margin-bottom: 20px;
  }
  .mb_M_sp,
  .mb_M {
    margin-bottom: 30px;
  }
  .mb_L_sp,
  .mb_L {
    margin-bottom: 40px;
  }
  .mb_LL_sp,
  .mb_LL {
    margin-bottom: 50px;
  }
  .mb_XL_sp,
  .mb_XL {
    margin-bottom: 60px;
  }
  .mb_XXL_sp,
  .mb_XXL {
    margin-bottom: 80px;
  }
  .pt_XS_sp,
  .pt_XS {
    padding-top: 10px;
  }
  .pt_SS_sp,
  .pt_SS {
    padding-top: 10px;
  }
  .pt_S_sp,
  .pt_S {
    padding-top: 20px;
  }
  .pt_M_sp,
  .pt_M {
    padding-top: 30px;
  }
  .pt_L_sp,
  .pt_L {
    padding-top: 40px;
  }
  .pt_LL_sp,
  .pt_LL {
    padding-top: 50px;
  }
  .pt_XL_sp,
  .pt_XL {
    padding-top: 60px;
  }
  .pt_XXL_sp,
  .pt_XXL {
    padding-top: 80px;
  }
  .pb_XS_sp,
  .pb_XS {
    padding-bottom: 10px;
  }
  .pb_SS_sp,
  .pb_SS {
    padding-bottom: 10px;
  }
  .pb_S_sp,
  .pb_S {
    padding-bottom: 20px;
  }
  .pb_M_sp,
  .pb_M {
    padding-bottom: 30px;
  }
  .pb_L_sp,
  .pb_L {
    padding-bottom: 40px;
  }
  .pb_LL_sp,
  .pb_LL {
    padding-bottom: 50px;
  }
  .pb_XL_sp,
  .pb_XL {
    padding-bottom: 60px;
  }
  .pb_XXL_sp,
  .pb_XXL {
    padding-bottom: 80px;
  }
}

@media only screen and (min-width: 769px) {
  .ml_XS_pc, .ml_XS {
    margin-left: 15px;
  }
  .mt_XS_pc,
  .mt_XS,
  .editArea p,
  .editArea ul,
  .editArea ol {
    margin-top: 10px;
  }
  .mt_SS_pc,
  .mt_SS {
    margin-top: 20px;
  }
  .mt_S_pc,
  .mt_S,
  .list_ul,
  .list_ol,
  .editArea h4,
  .editArea h2 + p,
  .editArea img,
  .editArea table {
    margin-top: 30px;
  }
  .mt_M_pc,
  .mt_M,
  .editArea * + h2,
  .editArea h3 {
    margin-top: 40px;
  }
  .mt_L_pc,
  .mt_L {
    margin-top: 50px;
  }
  .mt_LL_pc,
  .mt_LL {
    margin-top: 60px;
  }
  .mt_XL_pc,
  .mt_XL {
    margin-top: 80px;
  }
  .mt_XXL_pc,
  .mt_XXL {
    margin-top: 100px;
  }
  .mb_XS_pc,
  .mb_XS {
    margin-bottom: 10px;
  }
  .mb_SS_pc,
  .mb_SS {
    margin-bottom: 20px;
  }
  .mb_S_pc,
  .mb_S {
    margin-bottom: 30px;
  }
  .mb_M_pc,
  .mb_M {
    margin-bottom: 40px;
  }
  .mb_L_pc,
  .mb_L {
    margin-bottom: 50px;
  }
  .mb_LL_pc,
  .mb_LL {
    margin-bottom: 60px;
  }
  .mb_XL_pc,
  .mb_XL {
    margin-bottom: 80px;
  }
  .mb_XXL_pc,
  .mb_XXL {
    margin-bottom: 100px;
  }
  .pt_XS_pc,
  .pt_XS {
    padding-top: 10px;
  }
  .pt_SS_pc,
  .pt_SS {
    padding-top: 20px;
  }
  .pt_S_pc,
  .pt_S {
    padding-top: 30px;
  }
  .pt_M_pc,
  .pt_M {
    padding-top: 40px;
  }
  .pt_L_pc,
  .pt_L {
    padding-top: 50px;
  }
  .pt_LL_pc,
  .pt_LL {
    padding-top: 60px;
  }
  .pt_XL_pc,
  .pt_XL {
    padding-top: 80px;
  }
  .pt_XXL_pc,
  .pt_XXL {
    padding-top: 100px;
  }
  .pb_XS_pc,
  .pb_XS {
    padding-bottom: 10px;
  }
  .pb_SS_pc,
  .pb_SS {
    padding-bottom: 20px;
  }
  .pb_S_pc,
  .pb_S {
    padding-bottom: 30px;
  }
  .pb_M_pc,
  .pb_M {
    padding-bottom: 40px;
  }
  .pb_L_pc,
  .pb_L {
    padding-bottom: 50px;
  }
  .pb_LL_pc,
  .pb_LL {
    padding-bottom: 60px;
  }
  .pb_XL_pc,
  .pb_XL {
    padding-bottom: 80px;
  }
  .pb_XXL_pc,
  .pb_XXL {
    padding-bottom: 100px;
  }
}


/*---------------------------------------------
//フォントサイズの設定
---------------------------------------------*/
@media only screen and (max-width: 768px) {
  .font_XS_sp,
  .font_XS {
    font-size: 1rem;
  }
  .font_SS_sp,
  .font_SS {
    font-size: 1.2rem;
  }
  .font_S_sp, .tabBox .tabArea label p,
  .font_S {
    font-size: 1.4rem;
  }
  .font_M_sp,
  .font_M,
  .h_3,
  .h_fM_fb,
  .cardJob .area,
  .cardJob .jobList li,
  .card.column .contents,
  .cardInfo .cat,
  .cardInfo .contents .title,
  .tabBox .panelArea .tabPanel .tabBtn,
  .tabBox .panelArea .tabPanel .keyword input,
  .btn_more,
  .btn_blueL,
  .btn_whiteL,
  .boxEmg .title,
  .condTxt,
  .sortTxt,
  .form_h {
    font-size: 1.8rem;
  }
  .font_L_sp,
  .font_L,
  .h_2,
  .editArea h2,
  .h_yufu,
  .h_syonai,
  .h_yufuin,
  .h_faq,
  .tabBox .panelArea .tabPanel .tab_h,
  .pager,
  .biz_h {
    font-size: 2rem;
  }
  .font_LL_sp,
  .font_LL {
    font-size: 2.2rem;
  }
  .font_XL_sp,
  .font_XL,
  .h_1 {
    font-size: 2.5rem;
  }
}

@media only screen and (min-width: 769px) {
  .font_XS_pc,
  .font_XS {
    font-size: 1.2rem;
  }
  .font_SS_pc, .table_pl tbody,
  .font_SS {
    font-size: 1.4rem;
  }
  .font_S_pc,
  .font_S {
    font-size: 1.6rem;
  }
  .font_M_pc, .tabBox .panelArea .tabPanel .checkItem,
  .font_M,
  .h_3,
  .h_fM_fb,
  .cardJob .area,
  .cardJob .jobList li,
  .card.column .contents,
  .cardInfo .cat,
  .cardInfo .contents .title,
  .tabBox .panelArea .tabPanel .tabBtn,
  .tabBox .panelArea .tabPanel .keyword input,
  .btn_more,
  .btn_delete,
  .btn_blueL,
  .btn_whiteL,
  .boxEmg .title,
  .condTxt,
  .sortTxt,
  .form_h {
    font-size: 1.8rem;
  }
  .font_L_pc, .tabBox .tabArea label p,
  .font_L,
  .h_yufu,
  .h_syonai,
  .h_yufuin,
  .h_faq,
  .tabBox .panelArea .tabPanel .tab_h,
  .pager,
  .biz_h {
    font-size: 2rem;
  }
  .font_LL_pc,
  .font_LL {
    font-size: 2.6rem;
  }
  .font_XL_pc,
  .font_XL,
  .h_1 {
    font-size: 3.7rem;
  }
}
/*---------------------------------------------
 全体レイアウト
---------------------------------------------*/
html {
  font-size: 62.5%;
  font-family: "BIZ UDPGothic", sans-serif;
  font-style: normal;
  color: #342E19;
  line-height: 1.8;
  position: relative;
  height: 100%;
}

@media only screen and (min-width: 769px) {
  html {
    min-height: 100%;
    position: relative;
  }
}

@media all and (-ms-high-contrast: none) {
  html {
    font-family: 'fontAwesome';
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  html:not(:target) {
    font-family: 'fontAwesome';
  }
}

body {
  font-size: 1.6rem;
  opacity: 1;
  -webkit-transition: .2s .1s;
  transition: .2s .1s;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-bottom: 0;
}



img {
  max-width: 100%;
  vertical-align: bottom;
  height: auto;
}

a {
  color: #342E19;
  text-decoration: none;
}

h1, h2, h3, h4 {
  line-height: 1.4;
}

p + p {
  margin-top: .2em;
}

@media only screen and (max-width: 768px) {
  .is-pc {
    display: none !important;
  }
}

@media only screen and (min-width: 769px) {
  .is-sp {
    display: none !important;
  }
}

#ie {
  display: none;
}

/* コンテンツ幅 */
.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%; 
}

@media only screen and (max-width: 768px) {
  .container {
     padding-left: 15px; 
     padding-right: 15px; 
  }
}

@media only screen and (min-width: 769px) {
  .container {
    max-width: 1230px;
    padding-left: 30px;
    padding-right: 30px;
  }
}

.containerTop {
  margin-left: auto;
  margin-right: auto;
  width: 100%; 
}

@media only screen and (max-width: 768px) {
  .containerTop {
     /* padding-left: 15px; */
     /* padding-right: 15px;  */
  }
}

@media only screen and (min-width: 769px) {
  .containerTop {
    max-width: 1230px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

.container.L {
  padding-left: 0;
  padding-right: 0;
}

@media only screen and (min-width: 1030px) {
  .container.L {
    max-width: 1000px;
  }
}

.container.M {
  padding-left: 0;
  padding-right: 0;
}

@media only screen and (min-width: 930px) {
  .container.M {
    max-width: 900px;
  }
}

.container.S {
  padding-left: 15px;
  padding-right: 15px;
}

@media only screen and (min-width: 830px) {
  .container.S {
    max-width: 800px;
  }
}

/* テキスト位置 */
.t_left {
  text-align: left;
}

.t_ctr {
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .t_ctr_sp, .condTxt, .sortBox {
    text-align: center;
  }
}

@media only screen and (min-width: 769px) {
  .t_ctr_pc {
    text-align: center;
  }
}

.t_right {
  text-align: right;
}

/* フォント系 */
.f_bold, 
.h_1, .h_2, .editArea h2, .h_3, .h_4, 
.h_fM_fb, .h_faq, 
.h_top1, .h_top2, .h_top3, .h_top4, 
.area, .cardInfo .cat, .cardInfo .contents, .navItem, .condBox, .sortTxt, .biz_h, 
.sitemap li.item, .form_h, .calBox .calendar th, .calBox .month, .globalMenu li {
  font-weight: 600;
}

.f_blue, .form_h {
  color: #0F71BA;
}

.f_blue a {
  color: #0F71BA;
}

.f_red {
  color: #d70035;
}

.f_red a {
  color: #d70035;
}

.f_white {
  color: #fff;
}

/* 背景色 */

.bgc_white {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 20px 15px;
}
.bgc_cream {
  background-color: #F8F4E6;
}

.bgc_blue {
  background-color: #0F71BA;
}

.bgc_sky {
  background-color: #E3F0F8;
}

.bgc_gray {
  background-color: #f5f5f5;
}



/* ボーダー */
.bor_none {
  border: none;
}


/*--------------------------------
//グリッドレイアウト
--------------------------------*/
@media only screen and (max-width: 768px) {
  .grid {
    display: block;
  }
}

@media only screen and (min-width: 767px) {
  .grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: hidden;
    margin-right: -30px;
  }
  .gridItem {
    margin: 0 30px 30px 0;
  }
  .gridItem.x1 {
    width: calc(8.33333% - 30px);
  }
  .gridItem.x2 {
    width: calc(16.66666% - 30px);
  }
  .gridItem.x3 {
    width: calc(24.99999% - 30px);
  }
  .gridItem.x4 {
    width: calc(33.33332% - 30px);
  }
  .gridItem.x5 {
    width: calc(41.66665% - 30px);
  }
  .gridItem.x6 {
    width: calc(49.99998% - 30px);
  }
  .gridItem.x7 {
    width: calc(58.33331% - 30px);
  }
  .gridItem.x8 {
    width: calc(66.66664% - 30px);
  }
  .gridItem.x9 {
    width: calc(74.99997% - 30px);
  }
  .gridItem.x10 {
    width: calc(83.3333% - 30px);
  }
  .gridItem.x11 {
    width: calc(91.66663% - 30px);
  }
}

/* sp グリッド維持で横スクロール */
.g_all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
  margin-right: -30px;
}

.g_all .item {
  margin: 0 30px 30px 0;
}

.g_all .item.x1 {
  width: calc(8.33333% - 30px);
}

.g_all .item.x2 {
  width: calc(16.66666% - 30px);
}

.g_all .item.x3 {
  width: calc(24.99999% - 30px);
}

.g_all .item.x4 {
  width: calc(33.33332% - 30px);
}

.g_all .item.x5 {
  width: calc(41.66665% - 30px);
}

.g_all .item.x6 {
  width: calc(49.99998% - 30px);
}

.g_all .item.x7 {
  width: calc(58.33331% - 30px);
}

.g_all .item.x8 {
  width: calc(66.66664% - 30px);
}

.g_all .item.x9 {
  width: calc(74.99997% - 30px);
}

.g_all .item.x10 {
  width: calc(83.3333% - 30px);
}

.g_all .item.x11 {
  width: calc(91.66663% - 30px);
}

/* sp 2個並びグリッド */
@media only screen and (max-width: 768px) {
  .half_sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: hidden;
  }
  .half_sp .inner {
    width: calc(44% - $column-space);
  }
}

/*---------------------------------------------
// パンくずリスト
---------------------------------------------*/
#breadc li {
  display: inline-block;
  color: #7d7d7d;
  position: relative;
  padding-right: .3em;
  margin-right: .6em;
}

/* #breadc li::after {
/*  left: 100%;
/*  top: 37%;
/*  position: absolute;
/*  content: '';
/*  display: block;
/*  width: 5px;
/*  height: 5px;
/*  border-top: 2px solid #8d6449;
/*  border-right: 2px solid #8d6449;
/*  -webkit-transform: rotate(45deg);
/*          transform: rotate(45deg);
/*}
*/

/*#breadc li:last-child::after {
/*  content: none;
/*}
*/

#breadc a {
  text-decoration: underline;
  color: #7d7d7d;
}

#breadc li a {
  text-decoration: underline;
  color: #7d7d7d;
}

@media only screen and (min-width: 769px) {
  #breadc li a {
    -webkit-transition: .3s;
    transition: .3s;
  }
  #breadc li a:hover {
    color: #8d6449;
  }
}

/*---------------------------------------------
//トップページ見出し
---------------------------------------------*/
/***** 共通 *****/
.h_top1,
.h_top2,
.h_top3,
.h_top4,
.h_top5{
  position: relative;
  text-align: center;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  font-size: 2.8rem;
}

.h_top1,
.h_top2,
.h_top3,
.h_top4{
  background: url(../images/line.png) bottom center no-repeat;
}


/***** お知らせ・かんたん検索 *****/
.h_top1,.h_top2 {
  width: 80%;
}

@media only screen and (max-width: 769px) {
 .h_top1, h_top2 {
   width: 100%;
   font-size: 2.6rem;
 }
}


/***** 本日の開館状況・図書館カレンダー *****/
.h_top3 {
  width: 70%;
}

@media only screen and (max-width: 769px) {
 .h_top3 {
   width: 80%;
   font-size: 2.6rem;
 }
}


/***** 貸出ベスト *****/
.h_top4 {
  font-size: 2.6rem;
  width: 100%;
}

@media only screen and (max-width: 769px) {
 .h_top4 {
   width: 80%;
 }
}


/***** PICKUP *****/
.h_top5 {
  text-align: center;
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.h_top5::before,
.h_top5::after{
content: "";
display: block;
position: absolute;
width: 40%;
height: 3px;
top: 50%;
transform: translateY(-50%);
background-color: #CCEAF4;
}

.h_top5::before{
left: 0;
}
.h_top5::after{
right: 0;
}

@media only screen and (max-width:768px) {
 .h_top5 {
  font-size: 2.6rem;
 }

 .h_top5::before,
 .h_top5::after{
  width: 30%;
  height: 6px;
 }
}


/*---------------------------------------------
//下層ページ見出し
---------------------------------------------*/

/*--- 見出し1 ---*/
 .h_page1 {
    color: #342E19;
    font-family: "Noto Sans", sans-serif;
    font-size: 2.9rem;
    font-weight: 500;
    padding: 3.5rem 3.0rem;
    position: relative;
    background-color: #F3DFA9;
    /*margin-top: 20px;*/
}

 .h_page1::before, 
 .h_page1::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border-color: transparent #fff;
    border-style: solid;
    display: inline-block;
}

 .h_page1::before {
    left: 0;
    border-width: 50px 0px 50px 20px;
}

 .h_page1::after {
    right: 0;
    border-width: 50px 20px 50px 0px;
}

@media only screen and (max-width:768px) {
  .h_page1 {
  font-size: 2.4rem;
 }
}


/*--- 見出し2 ---*/
 .h_page2{
    padding: 3.0rem;
    font-size: 2.6rem;
    font-weight: 600;
    position: relative;
    background-color: #fff;
    border: 3px solid #F3DFA9;
    margin-top: 50px;
}

 .h_page2::before, 
 .h_page2::after {
    position: absolute;
    content: '';
}

 .h_page2::before {
    top: 0;
    left: 1.5rem;
    border-top: 1.8rem solid #F3DFA9;
    border-right: 1.5rem solid #F3DFA9;
    border-bottom: 1.8rem solid transparent;
}
 .h_page2::after {
    top: 0;
    left: 0;
    border-top: 1.8rem solid #F3DFA9;
    border-left: 1.5rem solid #F3DFA9;
    border-bottom: 1.8rem solid transparent;
}

@media only screen and (max-width:768px) {
  .h_page2 {
  font-size: 2.2rem;
  padding: 2.0rem;
  margin-top: 30px;
 }
  .h_page2::before {
    top: 0;
    left: 0.9rem;
    border-top: 1.2rem solid #F3DFA9;
    border-right: 0.9rem solid #F3DFA9;
    border-bottom: 1.2rem solid transparent;
}
 .h_page2::after {
    top: 0;
    left: 0;
    border-top: 1.2rem solid #F3DFA9;
    border-left: 0.9rem solid #F3DFA9;
    border-bottom: 1.2rem solid transparent;
}
}
 
/*--- 見出し3 ---*/
 .h_page3{
    padding: 3.0rem 2.0rem;
    font-size: 2.4rem;
    font-weight: 600;
    position: relative;
    background-color: #fff;
    border-bottom: 3px solid #F3DFA9;
    margin-top: 50px;
}

 .h_page3::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background-color: #EDD8DC;
}

@media only screen and (max-width:768px) {
  .h_page3 {
  font-size: 2.0rem;
  padding: 1.5rem 2.0rem;
  margin-top: 30px;
 }
  .h_page3::before {
    width: 15px;
    }
}

/*--- 見出し4 ---*/
 .h_page4{
    padding: 1.5rem 3.0rem;
    font-size: 2.2rem;
    font-weight: 600;
    position: relative;
    background-color: #fff;
    margin-top: 30px;
}

 .h_page4::before {
    position: absolute;
    content: '';
    top: 1.1rem;
    left: 0;
    width: 30px;
    height: 30px;
    background-color: #EDD8DC;
    border-bottom-right-radius: 100px;
}

@media only screen and (max-width:768px) {
  .h_page4{ 
  font-size: 1.8rem;
  padding: 1.5rem 2.0rem;
  margin-top: 30px;
 }
  .h_page4::before {
    width: 20px;
    height: 20px;
}
}

/*--- 見出し5 ---*/
 .h_page5{
    padding: 1.5rem 3.0rem;
    font-size: 2.2rem;
    font-weight: 600;
    position: relative;
    background-color: #fff;
}

 .h_page5::before,
 .h_page5::after{
    position: absolute;
    content: '';
    border-radius: 50%
}


 .h_page5::before {
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 25px;
    height: 25px;
    border: 2px solid #F3DFA9;
    
}
 .h_page5::after {
    top: 3.3rem;
    left: 10px;
    width: 20px;
    height: 20px;
    background-color: #EDD8DC;
    
}

@media only screen and (max-width:768px) {
  .h_page5{ 
  font-size: 1.8rem;
  padding: 0.8rem 2.0rem;
 }
  .h_page5::before {
    width: 15px;
    height: 15px;    
}
 .h_page5::after {
    top: 2.3rem;
    left: 8px;
    width: 12px;
    height: 12px;
    
}
}


/*--- 見出し6 ---*/
 .h_page6{
    padding: 0.5rem 3.0rem;
    font-size: 2.0rem;
    font-weight: 600;
    position: relative;
    background-color: #fff;
}

 .h_page6::before {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    left: 1.0rem;
    width: 15px;
    height: 15px;
    background-color: #F3DFA9;
    }
    
    
@media only screen and (max-width:768px) {
 .h_page6{
    padding: 0.5rem 2.4rem;
    font-size: 1.6rem;
}
 .h_page6::before {
    left: 0.8rem;
    }
}

@media only screen and (max-width: 768px) {
  .h_1 {
    padding: 5px;
    margin: 5px 0;
  }
  .h_2 {
    padding: 5px;
    margin: 5px 0;
  }
  .h_3 {
    padding: 5px;
    margin: 5px 0;
  }
  .h_4 {
    padding: 0 5px;
    margin: 5px 0;
  }
  .h_5 {
    padding: 0 5px;
    margin: 5px 0;
  }
  .h_6 {
    padding: 0 5px;
    margin: 5px 0;
  }
}


/*--- リンク ---*/
 .h_page1 a,
 .h_page2 a,
 .h_page3 a,
 .h_page4 a,
 .h_page5 a,
 .h_page6 a{
  text-decoration: underline;
 }

 @media only screen and (min-width: 769px) {
  .h_page1 a:hover,
  .h_page2 a:hover,
  .h_page3 a:hover,
  .h_page4 a:hover,
  .h_page5 a:hover,
  .h_page6 a:hover{
   opacity: 0.6;
  }
 }

/*---------------------------------------------
//トップページボタン（ブラウン共通設定）
---------------------------------------------*/
.btn_moreNews,
.btn_moreSearch,
.btn_moreCalender,
.btn_moreCalenderOPAC,
.btn_accessMap
 {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  padding: 10px 10px;
  border: 1px solid #342E19;
  background-color: #fff;
  position: relative;
  border-radius: 10px;
  font-weight: bold;
}

.btn_moreNews::before, .btn_moreNews::after,
.btn_moreSearch::before, .btn_moreSearch::after,
.btn_moreCalender::before, .btn_moreCalender::after,
.btn_moreCalenderOPAC::before, .btn_moreCalenderOPAC::after,
.btn_accessMap::before, .btn_accessMap::after{
  content: '';
  display: block;
  position: absolute;
}

.btn_moreNews::before,
.btn_moreSearch::before,
.btn_moreCalender::before,
.btn_moreCalenderOPAC::before,
.btn_accessMap::before{
  right: 1em;
  width: 30px;
  height: 30px;
  background-color: #342E19;
  border-radius: 50%;
}

.btn_moreNews::after,
.btn_moreSearch::after,
.btn_moreCalender::after,
.btn_moreCalenderOPAC::after,
.btn_accessMap::after{
  right: 1.7em;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

@media only screen and (min-width: 769px) {
  .btn_moreNews,
  .btn_moreSearch,
  .btn_accessMap,
  .btn_moreCalender,
  .btn_moreCalenderOPAC {
    -webkit-transition: .3s;
    transition: .3s;
  }

  .btn_moreNews:hover,
  .btn_moreSearch:hover,
  .btn_accessMap:hover,
  .btn_moreCalender:hover,
  .btn_moreCalenderOPAC:hover {
    background-color: #342E19;
    color: #fff;
  }

  .btn_moreNews:hover::after,
  .btn_moreSearch:hover::after,
  .btn_accessMap:hover::after,
  .btn_moreCalender:hover::after,
  btn_moreCalenderOPAC:hover::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}

/*---------------------------------------------
//トップページボタン（水色共通設定）
---------------------------------------------*/
.btn_login, 
.btn_password,
.btn_moreBest{
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  padding: 10px 10px;
  border: 1px solid #342E19;
  position: relative;
  border-radius: 10px;
  font-weight: bold;
  background-color: #CCEAF4;
}

.btn_login::before, .btn_login::after,
.btn_password::before, .btn_password::after,
.btn_moreBest::before, .btn_moreBest::after{
  content: '';
  display: block;
  position: absolute;
}

.btn_login::before,
.btn_password::before,
.btn_moreBest::before{
  right: 1em;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
}
.btn_login::after,
.btn_password::after,
.btn_moreBest::after{
  right: 1.7em;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #342E19;
  border-right: 2px solid #342E19;
  transform: translateY(-50%) rotate(45deg);
}

@media only screen and (min-width: 769px) {
  .btn_login,
  .btn_password,
  .btn_moreBest,
  .btn_search:hover {
    -webkit-transition: .3s;
    transition: .3s;
  }

  .btn_login:hover,
  .btn_password:hover,
  .btn_moreBest:hover,
  .btn_search:hover {
    background-color: #342E19;
    color: #fff;
  }

  .btn_login:hover::after,
  .btn_password:hover::after,
  .btn_moreBest:hover::after {
    border-top: 2px solid #342E19;
    border-right: 2px solid #342E19;
  }
}

/*---------------------------------------------
//トップページ各ボタン詳細設定
---------------------------------------------*/
/***** お知らせ一覧へボタン *****/
.btn_moreNews {
  width: 220px;
}


/***** かんたん検索 検索するボタン *****/
.btn_search {
  margin-left: auto;
  margin-right: auto;
  padding: 10px 25px;
  border: none;
  border-radius: 10px;
  background-color: #F9CCAA;
  color: #342E19;
  display: block;
  max-width: 800px;
  width: 100%;
  text-align: center;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-appearance: none;
      font-weight: bold;
}
@media only screen and (min-width: 769px) {
  .btn_search:hover {
    -webkit-transition: .3s;
    transition: .3s;
  }

  .btn_search:hover {
    cursor: pointer;
    background-color: #342E19;
    color: #fff;
  }

}

/***** かんたん検索エリア 茶色ボタン *****/

.btn_moreSearch{
  width: 100%;
}

/***** かんたん検索エリア 水色ボタン *****/
.btn_login,.btn_password{
width: 100%;
}

/***** 休館日アクセスマップへボタン *****/
.closed_day .btn_accessMap{
 width: 260px;
}

/***** カレンダー 茶色ボタン *****/
.btn_moreCalender{
  width: 70%;
}

.btn_moreCalenderOPAC{
  width: 70%;
}
@media only screen and (max-width: 768px) {
.btn_moreCalenderOPAC::after{
  top: 1.5em;
}
}

/***** 貸出ベスト水色ボタン *****/
.btn_moreBest {
  width: 90%;
}


/***** フッターアクセスマップへボタン *****/
.footer .btn_accessMap{
  width: 260px;
  margin-left: 0;
  margin-right: 0;
}

@media only screen and (max-width: 768px) {
.footer .btn_accessMap{
  margin-left: 5px;
}
}


/*---------------------------------------------
//リンク
---------------------------------------------*/
.link_a {
  text-decoration: underline;
  color: #333;
}

.link_a:not(.btn_more)[target=_blank] {
  position: relative;
  padding-right: .7em;
  margin-right: .2em;
}

.link_a:not(.btn_more)[target=_blank]::after {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1rem;
  content: '\f08e';
  font-family: 'fontAwesome';
}


@media only screen and (min-width: 769px) {
  .link_a:not(.btn_more) {
    -webkit-transition: .3s;
    transition: .3s;
  }
  .link_a:not(.btn_more):hover {
    opacity: .7;
  }
}

.contents a {
  text-decoration: underline;
  color: #333;
}

.contents a:not(.btn_more)[target=_blank] {
  position: relative;
  padding-right: .7em;
  margin-right: .2em;
}

.contents a:not(.btn_more)[target=_blank]::after {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1rem;
  content: '\f08e';
  font-family: 'fontAwesome';
}



@media only screen and (min-width: 769px) {
  .contents a:not(.btn_more) {
    -webkit-transition: .3s;
    transition: .3s;
  }
  .contents a:not(.btn_more):hover {
    opacity: .7;
  }
}

/* リンク 下層ページデフォルト */
.editArea a {
  text-decoration: underline;
}

.editArea a[target=_blank] {
  position: relative;
  padding-right: .7em;
  margin-right: .2em;
}

/*.editArea a[target=_blank]::after {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1rem;
  content: '\f08e';
  font-family: 'fontAwesome';
}
*/

.editArea a[target=_blank]::after {
    content: "";
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    top: 0;
    right: -1rem;
    background-image: url(/common/images/icon_blank.png);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 1.6rem;
}


@media only screen and (min-width: 769px) {
  .editArea a {
    -webkit-transition: .3s;
    transition: .3s;
  }
  .editArea a:hover {
    opacity: .7;
  }
}




/*---------------------------------------------
// レイアウトパーツ
---------------------------------------------*/
/* テキスト */
.container p {
  padding: 0 20px;
  margin: 10px 0;
}
@media only screen and (max-width: 768px) {
  .container p {
    padding: 0 5px;
    margin: 5px 0;
  }
}

/* テーブル */
.table {
  width: 100%;
}

.table thead th {
  background: #E3F0F8;
  font-weight: bold;
}

.table tbody {
  border-top: 1px solid #69B0E3;
}

.table tbody tr {
  border-bottom: 1px solid #69B0E3;
}

.table tbody th {
  font-weight: bold;
  background: #E3F0F8;
}

@media only screen and (max-width: 768px) {
  .table tbody th {
    border-bottom: 1px solid #69B0E3;
  }
}

@media only screen and (min-width: 769px) {
  .table tbody th {
    border-bottom: 1px solid #69B0E3;
    vertical-align: middle;
    width: 200px;
    padding-left: 30px;
  }
}

.table th, .table td {
  padding: .5em .8em;
}

@media only screen and (max-width: 768px) {
  .table th, .table td {
    width: 100%;
    display: block;
  }
}


/* テーブル */
 .table_st {
  color: #342E19;
  width: 98%;
  border: 1px solid #736458;
  text-align: center;
  margin: 10px 1%;
}

.table_st thead th {
  background: #CCEAF4;
  font-weight: bold;
}

.table_st tbody {
  border-top: 1px solid #736458;
/*  font-size: large;  */
/*  font-weight: bold;  */
}

.table_st tbody tr {
  border-bottom: 1px solid #736458;
}

@media only screen and (min-width: 769px) {
   .table_st tbody th {
    border-bottom: 1px solid #736458;
    vertical-align: middle;
    width: 200px;
    padding-left: 30px;
  }
}

.table th, .table td {
  padding: .5em .8em;
}

.table_st {
  width: 98%;
  border: 1px solid #2c4f54;
  text-align: center;
  margin: 10px 1%;
}



/*@media only screen and (max-width: 768px) {
/*  .table_st {
/*    font-size: 0.8rem;
/*  }
/*}
*/


.table_st thead {
    border-bottom: 1px solid #2c4f54;
  }
  


.table_st thead th {
    background: #CCEAF4;
    font-weight: bold;
    text-align: center;
    padding: .5em .8em;
  }
.table_st thead th:not(:first-child) {
    border-left: 1px solid #736458;
  }
.table_st tbody th  {
   background: #CCEAF4;
   font-weight: bold;
}

.table_st tbody tr {
  border-bottom: 1px solid #736458;
}

.table_st tbody th, .table_st tbody td {
  padding: .5em .8em;
}

.table_st tbody td {
    border-left: 1px solid #736458;
  }


/* カード（記事一覧） */
@media only screen and (min-width: 769px) {
  .card article {
    -webkit-transition: .5s;
    transition: .5s;
  }
  .card article:hover {
    opacity: .9;
    -webkit-box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.15);
            box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.15);
  }
}

.card .cardBtn {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 100px);
}

.card.column figure {
  border: 1px solid #acacac;
}

.card.column .contents {
  background-color: #0F71BA;
  color: #fff;
  min-height: 122px;
  padding: 15px;
}

@media only screen and (max-width: 768px) {
  .card.half {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: hidden;
  }
  .card.half article {
    width: calc(49.99998% - 8px);
  }
  .card.half article:nth-child(odd) {
    margin-right: 16px;
  }
}



/* 番号なしリスト */
 .list_ul {
  margin: 10px 0;
}

 .list_ul li {
  line-height: 2;
  text-indent: 1.6rem;
  padding: 0 20px;
}

.list_ul li::before {
  display: inline-block;
  text-indent: 0;
  content: '●';
  color: #736458;
  -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
  line-height: 1;
  vertical-align: 0;
  width: 1.5rem;
  margin-right: 0.5rem;
}

.list_ul li a {
  color: #342E19;
  text-decoration: underline;
}


/* お知らせ一覧用リスト */
ul.list_news {
  padding: 0.5em;
  list-style-type: none;
}
ul.list_news li.list_news_item {
  position: relative;
  padding: 1em 1em 1em 2.3em;
  border-bottom: 2px dotted #C9CACA;
}
*/


/*
/*ul.list_news li.list_news_item:after,
/*ul.list_news li.list_news_item:before{
/*  position: absolute;
/*	content: "";
/*	display: block;
/*	width: 12px;
/*	height: 12px;
/*	border: 2px solid #8d6449;
/*	top: 40%;
/*	left: 3px;
/*	transform: rotate(45deg);
/*}
/*
/*ul.list_news li.list_news_item:after {
/*  top: 40%;
/*	left: 10px;
/*	height: 12px;
/*	width: 12px;
/*	transform: rotate(45deg);
/*	border: none;
/*	background: rgba(243,152,0, 0.5);
/*}
*/
ul.list_news li.list_news_item:after{
	left: 0em;
    top: 30%;
    position: absolute;
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: url(../images/com/icon_footer_th.png) center no-repeat;
}



ul.list_news li.list_news_item a {
  transition: .3s;
  text-decoration: underline;
}
ul.list_news li.list_news_item a:hover {
  opacity: .7;
}



/* 番号付きリスト */
 .list_ol {
  margin: 10px 0;
  counter-reset: num;
}

.list_ol li {
  line-height: 2;
  text-indent: 1.6rem;
  padding: 0 20px;
}

.list_ol li::before {
  display: inline-block;
  text-indent: 0em;
  font-size: 1.5rem;
  width: 1.5rem;
  height: 1.6rem;
  line-height: 1.2;
  counter-increment: num;
  content: counter(num);
  background-color: #736458;
  color: #fff;
  text-align: center;
  margin-right: 0.5rem;
}

 .list_ol li a {
  color: #342E19;
  text-decoration: underline;
}


/* ジャンルリスト  */
.list_genre{
 position: relative;
 padding: 1em 0;
 border-bottom: 2px dotted #C9CACA;
}

.list_genre:before {
    position: absolute;
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    top: 2.0em;
    left: 0;
    transform: rotate(45deg);
    background-color: #F9CCAA;
}


/* バナー  */
.bnrTop {
  text-align: center;
}

@media only screen and (min-width: 769px) {
  .bnrTop a {
    -webkit-transition: .3s;
    transition: .3s;
  }
  .bnrTop a:hover {
    opacity: .7;
  }
}

/* スクロール */
@media only screen and (max-width: 768px) {
  .scrollX {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .scrollX > * {
    min-width: 1230px;
  }
}

@media only screen and (max-width: 1170px) {
  .scrollX {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .scrollX > * {
    min-width: 1170px;
  }
}

/* map */
.iframeMap iframe {
  width: 100%;
}

/*---------------------------------------------
//header
---------------------------------------------*/
.header {
  background-color: #D8EDE3;
  border-top: 15px solid #342E19;
  border-bottom: 1px solid #342E19;
  position: relative;
  width: 100%;
  top: 0;
  z-index: 999;
}


.headerMain {
  box-sizing: border-box;
  padding-top: 15px;
  margin-right: 5px;
  margin-bottom: 15px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .header{
   position: fixed;
  }
  .headerMain {
    margin-top: 20px;
  }
   .mb_header {
    height: 150px;
  }
}
}



/****** サイトマップ、X ******/
.headerMain{
display: flex;
justify-content: space-between;
align-items: end;
}]

.header .headerMain ul{
  vertical-align: middle;
}

.headerMain .link_area_header {
  position: absolute;
  bottom: 0;
  right: 0;
}

.headerMain .link_area_header li {
  display: inline-block;
  vertical-align: middle;
}

.headerMain li a {
  -webkit-transition: .5s;
  transition: .5s;
}

.link_siteMap a{
 text-decoration: underline #342E19;
 margin-right: 40px;
}

.link_siteMap a:hover{
 text-decoration: none;
 opacity: 0.6;
}


.link_officialX{
  line-height: 1;
}
.link_officialX:hover{
 opacity: 0.6;
}


.headerMain .logo {
  width: 320px;
  height: auto;
  display: inline-block;
  }


@media only screen and (max-width: 768px) {
  .headerMain .logo {
    width: 260px;
    height: auto;
    margin-left: 15px;
  }
}


/****** グローバルメニュー ******/
.header .nav {
  display: block;
  box-sizing: border-box;
  position: relative;
  max-width: 1230px;
  text-align: center;
}

.header .nav img{
width: auto;
height: 80px;
}

.globalMenu{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: end;
}



.menu-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 15px;
}


.sub{
 font-size: 1.4rem;
 color:#736458;

}


.header .nav li {
  display: block;
  width: 16.66%;
  text-align: center;
  border-right: solid 1px #342E19;  
  box-sizing: border-box;
}

.header .nav li:first-child {
  border-left: solid 1px #342E19;
}


.header .nav li > a {
  text-align: center;
  display: block;
  padding: 15px 0;
  text-decoration: none;
  box-sizing: border-box;
  line-height: 1.4em;
  transition: .1s;
}

.header .nav li > a:hover {
  background-color: #F8F4E6;
}



/****** ハンバーガーメニュー ******/
.hamburger {
  position: absolute;
  right: 10px;
  top: 20px;
  width: 40px;
  /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px;
  /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 500;
}
@media only screen and (min-width: 769px) {
  .hamburger {
    top: 5px;
    right: 15px;
  }
}
@media only screen and (min-width: 1230px) {
  .hamburger {
    right: 50px;
  }
}
.hamburger.tophamb {
  top: 8px;
  right: 15px;
}
.hamburger .navLine {
  position: absolute;
  right: 0;
  width: 33px;
  height: 3px;
  background-color: #342E19;
  transition: all .6s;
}
.hamburger .navLine_1 {
  top: 10px;
}
.hamburger .navLine_2 {
  top: 20px;
}
.hamburger .navLine_3 {
  top: 30px;
}

.nav-open .navLine_1 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 25px;
}

.nav-open .navLine_2 {
  width: 0;
  left: 50%;
}

.nav-open .navLine_3 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 25px;
}


.nav-open .hamburger .navLine {
  background-color: #fff;
}

.navBox {
  text-align: center;
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(28, 28, 28, 0.9);
  padding-top: 60px;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto;
}

/* 表示された時用のCSS */
.nav-open .navBox {
  top: 0;
}

.navList {
  list-style: none;
  padding-top: 30px;
}


@media only screen and (min-width: 769px) {
  .navList {
    padding-top: 10px;
  }
}

.navItem {
  letter-spacing: .2em;
  text-align: center;
  padding: 10px;
  height: 50px;
  display: block;
  text-decoration: none;
  color: #fff;
  -webkit-transition: .3s;
  transition: .3s;
}


@media only screen and (max-width: 768px) {
  .navItem {
    font-size: 1.8rem;
  }
  .ud-sp{
    color: #fff;
  }

}

.navBtn {
  position: absolute;
  position: fixed;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 300;
}


@media only screen and (max-width: 768px) {
  .navBtn {
    right: 20px;
    top: 20px;
  }
}


@media only screen and (min-width: 769px) {
  .navBtn {
    right: 65px;
    bottom: 0px;*/
    top: 74px;
  }
}


@media only screen and (min-width: 1230px) {
  .navBtn {
    right: calc(50% - 550px);
  }
}



/*---------------------------------------------
//footer
---------------------------------------------*/
.footer {
  width: 100%;
  background-color: #D8EDE3;
  position: relative;
}

.footer_copy{
background-color: #342E19;
color: #FFFFFB;
text-align: center;
}

.footer .toTop {
  position: absolute;
  z-index: 20;
  right: 5px;
  top: 0;
}


.footer .toTop img {
  display: block;
}

.footer .libName {
  font-size: 2.0rem;
  font-weight: bold;
}


.footerIframe {
  aspect-ratio: 4 / 3;
  max-height: 280px;
  margin-top: 2.5em;
}
.footerIframe iframe {
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 769px) {  
  .footer .toTop {
    top: 0;
    right: 0;
    -webkit-transition: .3s;
    transition: .3s;
  }
  .footer .toTop:hover {
    top: -20px;
  }
}

@media only screen and (max-width: 769px) {
  .footer .toTop {
    top: -180px;
  }

}



@media only screen and (min-width: 1230px) {
  .footer .toTop {
    right: calc(50% - 585px);
  }
}

@media only screen and (max-width: 769px) {
  .footer .logo {
    width: 320px;
    height: auto;
  }

}


@media only screen and (max-width: 769px) {
  .mt_footer_sp {
    width: 100%;
    height: 120px;
  }

}


/*---------------------------------------------
//トップスライド
---------------------------------------------*/
.slide {
  position: relative;
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .slide {
    padding: 100% 0 0;
  }
}

@media only screen and (min-width: 769px) {
  .slide {
    padding: 32.15% 0 0;
  }
}

.slideWrap {
  width: 100%;
}

@media only screen and (min-width: 769px) {
  .slideWrap {
    max-width: 1230px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
  }
}

.slide button {
  border: none;
  background: none;
}

.slideBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slideItem {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  opacity: 0;
  -webkit-transition: 3s;
  transition: 3s;
}

.slideItem img {
  width: 100%;
}

.slideItem.is-show {
  opacity: 1;
  z-index: 10;
  -webkit-transition: 3s;
  transition: 3s;
}

.slideItem:hover {
  opacity: .8;
}

.slideCtl {
  z-index: 10;
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 10px;
}

.slideCtl li {
  padding: 0 20px;
  display: inline-block;
}

.slideCtl li button {
  color: #fff;
  text-shadow: 1px 1px 1px #999;
}

.slideCtl li .current {
  color: #969696;
}


/*--------------------------------
//お知らせ・かんたん検索
--------------------------------*/

/***** お知らせリスト *****/
.li_info {
  /* margin-bottom: -20px; */
  border-right: dotted 1px #ddd;
  box-sizing: border-box;
}
@media only screen and (max-width: 769px) {
  .li_info {
    border-right: none;
  }
}

.li_list {
  margin-bottom: 15px;
  margin-right: 15px;
 border-bottom: 2px dotted #C9CACA;
  box-sizing: border-box;
}

.li_inner {
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .li_inner {
    display: block;
  }
}


.li_inner .li_time {
  margin-right: 15px;
}

.li_cat {
  margin-left: -.5em;
}
.li_cat li {
  display: inline-block;
  text-align: center;
  padding: .2em 10px;
  font-size: 1.4rem;
  margin-left: .5em;
  margin-bottom: .5em;
  border-radius: 5px;
}


/***** お知らせラベル *****/
/* NEW!ラベル */
.li_cat .new {
  color: #B91313;
}
/* お知らせラベル */
.li_cat .news {
  background-color: #CCEAF4;
}
/* イベントラベル */
.li_cat .event {
  background-color: #AECE96;
}
/* 重要ラベル */
.li_cat .emg {
  color: #B91313;
  background-color: #fff;
  border: 2px solid #B91313;
}
/*.li_cat .recruit, .li_cat .event, .li_cat .co, .li_cat .uij, .li_cat .emg {
/*  width: 120px;
/*}
*/

  a.li_txt {
    line-height: 2;
    font-weight: bold;
    transition: .3s;
    text-decoration: underline;
  }
  
@media only screen and (min-width: 769px) {
  .li_txt {
    -webkit-flex: 1;
            flex: 1;
  }
  a.li_txt:hover {
    text-decoration: none;
  }
}


/***** かんたん検索 入力BOX *****/
.searchAreatop {
  padding: 0 15px 10px 15px;
  background-color: #fff;
  border-radius: 0 0 10px 10px / 0 0 10px 10px;
}

.form .searchtext {
  width: 100%;
  border: 1px solid #342E19;
  border-radius: 4px;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  padding: 10px 20px;
}


/*--------------------------------
//貸出ベスト
--------------------------------*/
.lend_best{
 background-color: #fff;
 border-radius: 10px;
}


.contentsBox {
  max-width: 500px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
}


@media only screen and (max-width: 768px) {
.contentsBox {
  max-width: 355px;
  border: 1px solid #342E19;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0;
}
}

.contentsBox .title1, .contentsBox .title2, .contentsBox .title3 {
  vertical-align: middle;
  width: 100%;
  text-align: center;
  font-weight: 600;
}
.contentsBox .title1 {
  background-color: #c2dfbd;
  height: 68px;
  line-height: 68px;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #2c4f54;
}
.contentsBox .title2 {
  background-color: #e7d984;
  height: 68px;
  line-height: 68px;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #2c4f54;
}
.contentsBox .title3 {
  background-color: #e6a3a3;
  height: 68px;
  line-height: 68px;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #2c4f54;
}
.contentsBox .calCont {
  padding: 20px 10px 30px;
  border-radius: 0 0 10px 10px
}
/*.contentsBox ol li {
  padding-left: 0;
  margin-left: 0; 数字表示がリスト項目内に収まるようにする
}*/
ol.libbest {
  /*list-style: decimal;*/
  list-style-type: none;
  padding-left: 20px;
  counter-reset: num;
  /*margin: 10px 0;*/
  font-size: 1.6rem;
}
ol.libbest > li {
  line-height: 2;
  position: relative;
  padding: 0.2em 0 0.2em 2.5em;
}
ol.libbest > li::before {
  position: absolute;
  font-size: 1.6rem;
  font-weight: bold;
  counter-increment: num;
  content: counter(num) ".";
  left: 0;
  top: 25%;
  width: 22px;
  height: 22px;
  text-align: center;
  box-sizing: border-box;
  line-height: 1;
  padding: 6px 0;
}


ol.libbest li a{
 display: block;
   width: 100%; 
  height: 100%; 
  text-decoration: underline;
}
ol.libbest li a:hover {
 text-decoration: none;
}
ol.libbest li a:visited {
  color: #951c54;
}


/*ol.libbest li:first-child{
  position: relative;
}
ol.libbest li:first-child::after {
  position: absolute;
  background: url("../images/first-crown.png")
}*/
@media only screen and (min-width:767px) {
  .contentsBox .calCont {
    padding: 20px 20px 40px;
  }
  /*.contentsBox ol {
    padding-left: 40px;
  }
  .contentsBox ol li {
    padding-left: 0;
    margin-left: 0;
  }*/
}
.contentsBox .calendar td, .contentsBox .calendar th, .contentsBox .month {
  text-align: center
}
.contentsBox.calendar .sun {
  color: #d70035;
}
.contentsBox .calendar .sat {
  color: #0c5bac;
}
.contentsBox .calendar th {
  padding: 10px;
}
.contentsBox .calendar td {
  background-color: #fff;
}
.contentsBox .calendar td {
  margin: 2px;
  padding: 5px;
  border: 1px solid #2c4f54;
  /*  display: block;  */
  /*  cursor: pointer;*/
  background-color: #fff;
  font-size: 1.2rem
}
@media only screen and (min-width:767px) {
  .contentsBox .calendar td {
    padding: 10px;
    transition: .3s;
  }
  /*  .contentsBox .calendar td:hover {
/*    background-color: #86e1e3;
/*  }
*/
}
.contentsBox .calendar td a {
  text-decoration: underline;
}
.contentsBox .calendar td.closingday1 {
  background-color: #c2dfbd;
}
.contentsBox .calendar td.closingday2 {
  background-color: #e7d984;
}
.contentsBox .calendar td.closingday3 {
  background-color: #e6a3a3;
}
.contentsBox .calendar table {
  width: 100%;
}

.calpage_link {
  text-decoration: underline;
}
@media only screen and (max-width: 768px) {
/*  .calendar-box {
    padding: 10px;
  }*/
  .calendar-box .calFooter .legend > span {
    height: 2.2rem;
    width: 64px;
  }
}
/*--------------------------------
//本日の開館状況
--------------------------------*/
.opening_status,
.opening_hours,
.closed_day,
.container_cal{
    border-radius: 10px;
    background-color: #fff;
}

.opening_hours ul,
.closed_day ul{
width: fit-content;
margin-left: auto;
margin-right: auto;
}

.today-box {
  display: flex;
  justify-content: center; /* ボックス全体を中央揃え */
}

.today {
  display: flex;
  justify-content: center; /* リスト全体を中央揃え */
  flex-direction: column; /* リストを縦方向に配置 */
  width: fit-content;
}
.today li {
  letter-spacing: 0.2em;
  font-size: 2.6rem;
  font-weight: 600;

}


/*--------------------------------
//開館時間・休館日
--------------------------------*/
.circle {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: #342E19;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.8rem;
}

.indent_26rem{
display:inline-block;
width:2.6rem;
}

/*--------------------------------
//カレンダー（準備中ページ）
--------------------------------*/
#comingsoon .calBox {
    max-width: 90%;
}

#comingsoon .calendar-box .calFooter{
 display: block;
}

#comingsoon .legendText{
width: 70%;
}
@media only screen and (max-width: 768px){
 #comingsoon .legendText{
  width: 100%;
 }
}

#comingsoon .bgc_white {
  padding: 40px 15px;
}


/*--------------------------------
//カレンダー
--------------------------------*/
/*** 全体 ***/
.calBox {
    max-width: 70%;
    border: 1px solid #342E19;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}
.event-info-row .event {
    flex-grow: 1;
    border: 1px solid #2c4f54;
}
.center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.event-calendar-row .event div,
.event-info-row .event div {
    padding: 0.5rem;
}

.event-calendar-row .event .close,
.event-info-row .event .close {
    color: #CF2121;
}
.event-calendar-row .event .holiday,
.event-info-row .event .holiday {
    color: #fff;
    background-color: #e06838;
    font-weight: bold;
}


/*** カレンダー名 ***/
.calBox .title1{
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-weight: 600;
}
.calBox .title1 {
    background-color: #E2F1EA;
    height: 68px;
    line-height: 68px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #342E19;
}

/*** ？？？ ***/
.calBox .calCont {
    background-color: #fff;
    padding: 20px 10px 30px;
    border-radius: 0 0 10px 10px;
}
@media only screen and (min-width: 767px) {
    .calBox .calCont {
        padding: 20px 20px 40px;
    }
}


.calBox .calendar td,
.calBox .calendar th,
.calBox .month {
    text-align: center;
}

/*** ？？？ ***/
.calBox .calendar .sun {
    color: #d70035;
}
.calBox .calendar .sat {
    color: #0c5bac;
}
.calBox .calendar th {
    padding: 10px;
}
.calBox .calendar td {
    background-color: #fff;
}
.calBox .calendar td {
    margin: 2px;
    padding: 5px;
    border: 1px solid #2c4f54;
    background-color: #fff;
    font-size: 1.2rem;
    width: calc(100% / 7);
}
@media only screen and (min-width: 767px) {
    .calBox .calendar td {
        padding: 10px;
        transition: 0.3s;
    }
}

.calBox .calendar td a {
    text-decoration: underline;
}
.calBox .calendar td.closingday1 {
    background-color: #c2dfbd;
}
.calBox .calendar td.closingday2 {
    background-color: #e7d984;
}
.calBox .calendar td.closingday3 {
    background-color: #e6a3a3;
}
.calBox .calendar table {
    width: 100%;
}

.grid_cal{
display: flex;
padding-left: 0;
padding-right: 0;}


.container_calinfo {
flex: 4;
border-radius: 10px;
margin-right: 15px;
background-color: #fffffb;

}

.container_calinfo h2{
width: 100%;
}


.table {
 display: table;
 border-collapse: collapse;
 border-spacing: 0;
}

/**** <年月> ****/
.calHeader.table {
 border-bottom: 1px solid #342E19;
 background-color: #fff;
 overflow: hidden;
}

.previous-anchor,.next-anchor{
 padding: 5px 15px;
}

/**** 曜日・日付 ****/
.row {
    display: table-row;
}
.cell {
 display: table-cell;
 background-color: #fff;
 vertical-align: middle;
}


.cell.btns.next-btn a,
.cell.btns.previous-btn a,
.calpage_link a,
{
 text-decoration: underline;
}

.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

.event-calendar-row,
.event-info-row {
    display: flex;
    background-color: #fffffb;
}
.event-calendar-row .week,
.event-calendar-row .day,
.event-calendar-row .event {
    flex: 1;
    border: 1px solid #2c4f54;
}
.event-info-row .week,
.event-info-row .day {
    flex-basis: 80px;
    border: 1px solid #2c4f54;
}


.event-calendar-row.text-center,
.weekdays, .week, .day{
 font-weight: bold;
}

.week.sunday {
    color: #d70035;
    font-weight: bold;
}
.week.saturday {
    color: #0c5bac;
    font-weight: bold;
}

.calendar-box {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    /* border: 1px solid #342E19; */
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    table-layout: fixed; /* 固定レイアウトを使用してセルが均等に配置されるようにする */
}

.calendar-box .calHeader {
    width: 100%;
    padding: 0.5rem 0;
}
.calendar-box .calHeader .btns {
    width: 25%;
}
.calendar-box .main {
    width: 90%;
    margin: 20px auto;
    padding: 20px 10px 30px;
}
.calendar-box .main .cell-date {
    padding: 0.3rem 0;
    border: 1px solid #333;
}


.calendar-box .main .cell-date a{
     text-decoration: underline;
}
@media only screen and (min-width: 769px){
.calendar-box .main .cell-date a:hover{
     text-decoration: none;
     opacity: 0.6;
}
}

.calendar-box .main .close {
    background-color: #FBB03B;
}
.calendar-box .main .event {
    background-color: #dce7db;
}
.calendar-box .main .outside {
    visibility: hidden;
}


.calendar-box table {
    width: 100%;
}

/*** フッター部分 ***/
.calendar-box .calFooter {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 90%;
margin: 0 auto 20px auto;
}

@media only screen and (max-width: 768px){
.calendar-box .calFooter{
display: block;
}
}


/*** フッター イベント・休館日部分 ***/
.legendLabel{
display: flex;
justify-content: space-between;
align-items: center;
width: 25%;
}
.legendEvent, .legendClose{
display: flex;
justify-content: start;
align-items: center;
}

@media only screen and (max-width: 768px){
.legendLabel{
width: 65%;
}
}

.legendEvent .event,
.legendClose .close {
    width: 25px;
    height: 10px;
    border: 1px solid #2c4f54;
    vertical-align: middle;
    display: inline-block;
}

.legendEvent .event {
    background-color: #AECE96;
}

.legendClose .close {
    background-color: #FBB03B;
}


/*** フッター 営業日部分 ***/
.legendText{
width: 40%;
}
@media only screen and (max-width: 768px){
.legendText{
width: 100%;
}
}
.legend20PM, .legend18PM{
display: flex;
justify-content: space-between;
align-items: center;


.calendar-box .main .week {
    font-weight: bold;
    /*border-bottom: 1px solid #c1c1c1;*/
}
.calendar-box .main .week.sunday {
    color: #b91313;
}
.calendar-box .main .week.saturday {
    color: #005eaa;
}
.event-calendar,
.event-info {
    width: 100%;
    clear: both;
}


/*--------------------------------
  貸出ベスト
--------------------------------*/
.contentsBox .title1{
  vertical-align: middle;
  width: 100%;
  text-align: center;
  font-weight: 600;
}
.contentsBox .title1{
  background-color: #c2dfbd;
  height: 68px;
  line-height: 68px;
  border-radius: 10px 10px 0 0;
}

.contentsBox .calCont{  
  padding: 20px 10px 30px;
  border-radius: 0 0 10px 10px
}

.contentsBox ol{
 list-style: decimal;
 padding-left: 40px;
 margin: 0;
}
.contentsBox ol li {
  padding-left: 0;
  margin-left: 0;
}


@media only screen and (min-width:767px){
  .contentsBox .calCont {
    padding: 20px 20px 40px;
  }

  .contentsBox ol {
    padding-left: 40px;
  }
  .contentsBox ol li {
    padding-left: 0;
    margin-left: 0;
  }
}
.contentsBox .calendar td,
.contentsBox .calendar th,
.contentsBox .month {
  text-align:center
}
.contentsBox.calendar .sun {
  color: #d70035;
}
.contentsBox .calendar .sat {
  color: #0c5bac;
}
.contentsBox .calendar th {
  padding: 10px;
}
.contentsBox .calendar td {
  background-color: #fff;
}
.contentsBox .calendar td {
  margin: 2px;
  padding: 5px;
  border: 1px solid #2c4f54;
  background-color: #fff;
  font-size: 1.2rem
}
@media only screen and (min-width:767px) {
  .contentsBox .calendar td{ 
    padding:10px;
    transition: .3s;
  }
}

.contentsBox .calendar td a {
  text-decoration: underline;
}
.contentsBox .calendar td.closingday1 {
  background-color: #c2dfbd;
}
.contentsBox .calendar td.closingday2 {
  background-color: #e7d984;
}
.contentsBox .calendar td.closingday3 {
  background-color: #e6a3a3;
}
.contentsBox .calendar table {
  width:100%;
}
.calpage_link{
 text-decoration: underline;
}

@media only screen and (max-width: 768px) {
    .calendar-box {
        padding: 10px;
    }

    .calendar-box .calFooter .legend > span {
        height: 2.2rem;
        width: 64px;
        
    }
}


}


/*---------------------------------------------
//トップpickupバナー
---------------------------------------------*/
a.bnr_pickup {
  position: relative;
  width: 100%;
  padding: 0.8em;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: #342E19;
  border: 1px solid #342E19;
  overflow: hidden;
  font-size: 2.4rem;
  display: inline-block;
  cursor: pointer;
  transition: color 0.3s;
  vertical-align: middle;
  border-radius: 4px;
  z-index: 888;

}

a.bnr_pickup::before,
a.bnr_pickup::after{
  content: '';
  position: absolute;
}


a.bnr_pickup::before {
  top: 0;
  left: 0;
  width: 30px; 
  height: 100%;
  background: #CCEAF4;
  border-radius: 0 100% 100% 0 / 50%;
  z-index: -1;
  transition: width 0.4s cubic-bezier(.4,0,.2,1),
              border-radius 0.4s cubic-bezier(.4,0,.2,1);
}

a.bnr_pickup:hover::before,
a.bnr_pickup:focus::before {
  width: 100%;
  border-radius: 4px;
}

a.bnr_pickup::after{
right: 1.2em;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #342E19;
    border-right: 2px solid #342E19;
    transform: translateY(-50%) rotate(45deg);
}


@media only screen and (max-width:769px) {
  a.bnr_pickup {
   display: block; 
   max-width: 355px;
   margin-left: auto;
   margin-right: auto;
    font-size: 2.0rem;
  }
}


/*---------------------------------------------
//サイトマップ
---------------------------------------------*/
.sitemap li.item + li.item {
  margin-top: .5em;
}

.sitemap a {
  color: #0F71BA;
  text-decoration: underline;
}

.sitemap li.item::before {
  display: inline-block;
  content: '●';
  color: #69B0E3;
  -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
  line-height: 1;
  vertical-align: .08em;
  width: 1.5em;
  margin-right: .1em;
}

.sitemap li.item .itemList {
  padding-left: 20px;
}

.sitemap li.item .itemList li {
  position: relative;
  margin-top: .5em;
  padding-left: 1.5em;
}

.sitemap li.item .itemList li::before {
  position: absolute;
  left: 0;
  top: .3em;
  content: 'ー';
  color: #69B0E3;
  line-height: 1em;
  height: 1em;
  width: 1.5em;
}

/*---------------------------------------------
//フォーム
---------------------------------------------*/
.form .text {
  width: 100%;
  border: 1px solid #69B0E3;
  border-radius: 4px;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  padding: 10px 20px;
}

.form .textarea {
  width: 100%;
/*  height: 200px;*/
  height: 100px;
  border: 1px solid #69B0E3;
  border-radius: 4px;
  padding: 10px 20px;
}

.form .checkItem {
  display: inline-block;
  margin-bottom: 20px;
}

.form .checkItem:not(:last-child) {
  margin-right: 30px;
}

@media only screen and (min-width: 769px) {
  .form .checkItem:not(:last-child) {
    margin-right: 50px;
    min-width: 155px;
  }
}

/*.form .checkItem input[type="checkbox"] {
  display: none;
}*/

.form .checkItem input[type="checkbox"]:checked ~ label{
  color: #0F71BA;
}

.form .checkItem input[type="checkbox"] + label {
  position: relative;
  padding-left: 30px;
}

.form .checkItem input[type="checkbox"] + label::before {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 1px solid #0F71BA;*/
  border-radius: 3px;*/
  content: "";
  cursor: pointer;
  display: block;
  width: 20px;
  height: 20px;
}

.form .checkItem input[type="checkbox"]:checked + label::before {
  background: #0F71BA;
}

.form .checkItem input[type="checkbox"]:checked + label::after {
  content: "";
  display: block;
  width: 14px;
  height: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  position: absolute;
  top: 30%;
  left: 7px;
  -webkit-transform: rotate(-45deg) translateY(-50%);
          transform: rotate(-45deg) translateY(-50%);
}

.form .radioItem {
  display: inline-block;
  margin-bottom: 20px;
}

.form .radioItem:not(:last-child) {
  margin-right: 30px;
}

@media only screen and (min-width: 769px) {
  .form .radioItem:not(:last-child) {
    margin-right: 50px;
    min-width: 155px;
  }
}

.form .radioItem input[type="radio"] {
  display: none;
  line-height: normal;
}

/*---------------------------------------------
//formスタイル
---------------------------------------------*/

input:focus {
  background: #E3F0F8;
}

/*---------------------------------------------
//検索欄スタイル
---------------------------------------------*/
.searchArea {
  padding: 25px 15px;
  background-color: #fff;
  border-radius: 0 0 10px 10px / 0 0 10px 10px;
}

@media only screen and (min-width: 769px) {
  .searchArea {
    padding: 50px 80px;
  }
}

.searchArea .search_h {
  color: #0F71BA;
  font-size: 1.8rem;
  font-weight: 600;
  padding-left: 13px;
  border-left: 10px solid #0F71BA;
}

/*--------------------------------
//イベント
--------------------------------*/

/*---------------------------------------------
//印刷用スタイル
---------------------------------------------*/

@media print{
/* 幅はコンテンツサイズに合わせて修正 */
html,body{width:1024px;margin:0;padding:0;overflow-x:hidden;} 
body,body > .wrap{background:none;}
  .header {
   display:none;
  }
  .footer {
   display:none;
  }
  
  .pt_none{
    display:none;
  }
}


/*--------------------------------
//グリッドレイアウト
--------------------------------*/
@media only screen and (max-width: 768px) {
  .grid {
    display: block;
  }
}

@media only screen and (min-width: 767px) {
  .grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: hidden;
    margin-right: -30px;
  }
  .gridItem {
    margin: 0 30px 30px 0;
  }
  .gridItem.x1 {
    width: calc(8.33333% - 30px);
  }
  .gridItem.x2 {
    width: calc(16.66666% - 30px);
  }
  .gridItem.x3 {
    width: calc(24.99999% - 30px);
  }
  .gridItem.x4 {
    width: calc(33.33332% - 30px);
  }
  .gridItem.x5 {
    width: calc(41.66665% - 30px);
  }
  .gridItem.x6 {
    width: calc(49.99998% - 30px);
  }
  .gridItem.x7 {
    width: calc(58.33331% - 30px);
  }
  .gridItem.x8 {
    width: calc(66.66664% - 30px);
  }
  .gridItem.x9 {
    width: calc(74.99997% - 30px);
  }
  .gridItem.x10 {
    width: calc(83.3333% - 30px);
  }
  .gridItem.x11 {
    width: calc(91.66663% - 30px);
  }
}