/*************************************************
 top.css
**************************************************/

/*************************************************
 標準 ＞ トップページ ＞ レイアウト ＞ 共通
**************************************************/

body.top {
  /* background: var(--color-background-subtler); */
}

body.top .locusZone {
  display     : none;
}

/*****************************************************************************************************
 標準 ＞ パーツ ＞ トップページ ＞ 一覧表示領域系部品 ＞ ボタン「一覧を見る」 ＞ 標準
*****************************************************************************************************/

body.top .contentsPerSectionTitle .button-wrapper.afterItems a.btn-like {
  top                 : 100%;
}

body.top .button-wrapper .news-button.btn-like {
  max-height          : 2.25em;
}

body.top .button-wrapper.forOnlyAllList {
  position            : relative;
  display             : flex;
  /* 先頭と末尾の子要素は端に寄せられる */
  justify-content     : space-between;
  /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */
  flex-wrap           : wrap;
  justify-content     : flex-end;
}

/*=============================
 標準 ＞ パーツ ＞ Global Nav
=============================*/

/*==================================
 adjustPerSite ＞ パーツ ＞ Global Nav
==================================*/

/*=======================================
 標準 ＞ パーツ ＞ トップページ ＞ その他
=======================================*/

body.top .sectionTitle.withUL h2 {
  position            : relative;
  width               : fit-content;
  padding-block-start : var(--space-16, 16px);
  padding-block-end   : var(--space-16, 16px);
  font-size           : var(--font-size-24);
  font-weight         : var(--fontweight-medium);
  line-height         : 1.5;
  letter-spacing      : var(--tracking-5);
}

body.top .sectionTitle.withUL h2::after {
  content             : '';
  position            : absolute;
  inset-inline-end    : 0;
  inset-block-end     : 0;
  height              : 3px;
  width               : calc(100%);
  left                : 0;
  top                 : calc(75% + 0px);
  background-color    : var(--color-black);
}


/* --- 追加スタイル (top.css) --- */


/* --- 追加スタイル (top.css) --- */

/*************************************************
 adjustPerSite ＞ トップページ ＞ レイアウト ＞ 共通
**************************************************/

.hzrTeoEdgeNoLimit.grayBack {
  background  : var(--color-site-proper-91-a);
}

.tooWhtRow {
  background  : var(--color-neutral-0);
}
.topGryRow {
  background  : var(--color-neutral-5);
}

.hzrTeoEdgeNoLimit.waveBack {
  display             : block;
  top                 : 0; 
  width               : 100%;
  height              : auto;
  aspect-ratio        : 1280 / 54;
  background-color    : #777;
  mask-image          : url(../img/nami.png);
  mask-repeat         : repeat-x;
  mask-size           : contain;
  -webkit-mask-image  : url(../img/nami.png);
  -webkit-mask-repeat : repeat-x;
  -webkit-mask-size   : contain;
}
.hzrTeoEdgeNoLimit.waveBack.rawColor {
  background-color    : var(--color-site-proper-91-a);
}
.hzrTeoEdgeNoLimit.waveBack.white {
  background-color    : var(--color-neutral-0);
}

body.top .contentsPerSectionTitle {
  padding-left    : var(--sps-glbl-layout-padding-left);
  padding-right   : var(--sps-glbl-layout-padding-right);
}

/*****************************************************************************************************
 adjustPerSite ＞ パーツ ＞ トップページ ＞ 一覧表示領域系部品 ＞ ボタン「一覧を見る」 ＞ 標準
*****************************************************************************************************/
body.top .button-wrapper.forOnlyAllList {
  padding-top         : 2.1em;
  padding-bottom      : 2.1em;
  padding-right       : 10%; 
}


/*=============================================
 adjustPerSite ＞ パーツ ＞ トップページ ＞ その他
=============================================*/
body.top .sectionTitle {
  padding-left   : 10%; 
  padding-right  : 10%; 
}

body.top .sectionTitle h2 {
  margin-bottom  : 0;
  font-size      : var(--font-size-32);
  letter-spacing : var(--space-2);
  line-height    : 1;
}
body.top .sectionTitle p {
  font-size      : var(--font-size-18);
  letter-spacing : var(--space-2);
  line-height    : 1;
}

body.top .importantNotice .sectionTitle.withUL h2::after {
  top            : calc(90% + 0px);
}

@media (width < 576px) {
  body.top .importantNotice section {
    padding : 0; 
  }
}


/*=============================================
 adjustPerSite ＞ 図書館系 ＞ info-section ＞ 重要なお知らせ
=============================================*/

body.top .hzrTeoEdgeNoLimit.importantNotice  {
  background: var(--color-site-proper-91-a);
}

body.top .importantNotice .contentsPerSectionTitle.flBxGene {
  padding-bottom     : 1em;
}

body.top ul.importantNotice__list {
  margin-block         : unset;
  padding-inline-start : unset;
}

body.top .important-notice__item {
  grid-column          : 2;
  display              : grid;
  row-gap              : var(--space-6);
  grid-auto-flow       : row;
  padding-block        : var(--space-24, 24px);
}

body.top .important-notice__item  a {
  position             : relative;
  padding-inline-start : 0.8em;
  color                : var(--color-text-bold);
  font-size            : var(--font-size-17);
  font-weight          : var(--fontweight-regular);
  letter-spacing       : var(--tracking-50);
  text-decoration      : none;
}


/*===============================================================
 adjustPerSite ＞ TOP ＞ Slider
=============================================================== */
:where(:root) {
  --top-slider-main-ctrl-LR-padding    : calc(var(--sHDsgnBsRct003-sorW) * 1px + 7.5%);
  --top-slider-main-ctrl-Btns-tp-mrgn  : 15px;
  --top-slider-main-ctrl-plBtn-LR-mrgn : 30px;
}

body.top .slider-container {
  background: var(--color-site-proper-91-a);
}

body.top .slider-container.full-width .slide-control {
  position      : relative;
  display       : flex;
  align-items   : center;
  width         : 100%;
  min-height    : calc(48px + 8px);
  padding-block : var(--space-4, 4px);
}

body.top .slider-container.full-width .slide-deco .preOverlayToSlickList.waveBack {
  position            : absolute;
  top                 : 0; 
  width               : 100%;
  height              : auto;
  aspect-ratio        : 1280 / 54;
  /*
  background-image    : url(../img/nami.png);
  background-repeat   : repeat-x;
  background-size     : contain;
  background-position : center;]
  */
  background-color      : #777;
  mask-image            : url(../img/nami.png);
  mask-repeat           : repeat-x;
  mask-size             : contain;
  mask-position         : center;
  -webkit-mask-image    : url(../img/nami.png);
  -webkit-mask-repeat   : repeat-x;
  -webkit-mask-size     : contain;
  -webkit-mask-position : center;

  /* 基本としてはposition absoluteの要素のみを想定 */
  /* 見た目だけを上へ移動する */
  transform: translateY(calc(-100% + 1px));
}

body.top .slider-container.full-width .slide-deco .preOverlayToSlickList.waveBack.rawColor {
  background            :var(--color-site-proper-91-a);
}

/* スライダー操作域 ＞ typeR1（右寄せ）型 */
body.top .slider-container.full-width .slide-control.typeR1 {
  padding             : 0 var(--top-slider-main-ctrl-LR-padding);
  justify-content     : flex-end;
}
/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ 格納領域 */
body.top .slider-container.full-width .slide-control.typeR1 .slider-pagination {
  width               : calc(100% - 60px);
}
/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ 格納領域 */
body.top .slider-container.full-width .slide-control.typeR1 ul.slick-dots  {
  padding             : 0;
  justify-content     : flex-end;
  max-width           : 100%;
}
/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ ラッパー */
body.top .slider-container.full-width .slide-control.typeR1 li {
  margin              : 0 3px;
}

/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ 通常ドット */
body.top .slider-container.full-width .slide-control li .dot {
  background-color    : var(--color-bg-slider-ctrl-btn-enabled-notOn);
  border-color        : var(--color-brd-slider-ctrl-btn-enabled-notOn);
  /* outline-color       : var(--color-oLn-slider-ctrl-btn-enabled-notOn); */
  outline             : none;
}

/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ アクティヴ時 */
body.top .slider-container.full-width .slide-control.typeR1 li.slick-active .dot {
  background-color    : var(--color-bg-slider-ctrl-btn-active-notOn);
}

/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ ホバー時 */
body.top .slider-container.full-width .slider-pagination .dot:hover,
body.top .slider-container.full-width .slider-pagination .dot:focus-within {
  outline             : 1px solid var(--color-oLn-slider-ctrl-btn-enabled-on);
  outline-color       : var(--color-background-slider-dot-on-border);
}

/* 再生と停止 */
body.top .slider-container.full-width .slide-control.typeR1 .buttons {
  position            : initial;
  margin              : 0;
  margin-top          : var(--top-slider-main-ctrl-Btns-tp-mrgn);
}
body.top .slider-container .buttons.imgSwitch button{
  width               : 30px;
  height              : 50px;
}
body.top .slider-container .buttons.imgSwitch button.js-play {
  margin-left         : var(--top-slider-main-ctrl-plBtn-LR-mrgn);
  margin-right        : var(--top-slider-main-ctrl-plBtn-LR-mrgn);

}
body.top .slider-container .buttons.imgSwitch button.js-stop {}

body.top .slider-container.full-width .slide-control.typeR1 .button.js-stop {}
body.top .slider-container.full-width .slide-control.typeR1 .button.js-play {}

body.top .slider-container.full-width .slick-dots {
  margin              : 0;
}
@media (width < 576px) {
  :where(:root) {
    --top-slider-main-ctrl-LR-padding    : calc(var(--sHDsgnBsRct003-sorW) * 1px + 5%);
    --top-slider-main-ctrl-plBtn-LR-mrgn : 15px;
  }

}

/*===========================================================
 adjustPerSite ＞ 図書館系 ＞ 開館時間情報 ＞ 施設別・パネル型
===========================================================*/
body.top .guideToOpenCalendar__hcih-ih .btn-like {
  font-size    : var(--font-size-12);
border: 2px solid var(--color-black);
}
body.top .guideToOpenCalendar__hcih-ih .btn-like::after {
  right        : 0.5em;
}

/* 原則：背景色は位置・サイズ・コンテンツを定めた最後に設定する */
body.top .mizuhomachi .clrfllBx__hcih-h {
  background          : var(--color-named-01-01-by-site);
}
body.top .motosayama .clrfllBx__hcih-h {
  background          : var(--color-named-01-02-by-site);
}
body.top .nagaoka .clrfllBx__hcih-h {
  background          : var(--color-named-01-03-by-site);
}
body.top .musashino .clrfllBx__hcih-h {
  background          : var(--color-named-01-04-by-site);
}
body.top .tonogaya .clrfllBx__hcih-h {
  background          : var(--color-named-01-05-by-site);
}

body.top .gryBx__hcih-h {
  background          : var(--color-site-proper-gry1);
}
body.top .gryBx__hcih-c {
    padding-bottom: var(--space-24);
}



@media (width < 1350px) {
  body.top .showFacilityName__hcih-ih > div { font-size: var(--font-size-16); }
  body.top .openAndCloseInfo__hcih-ih > div { font-size: var(--font-size-13); }
  body.top .guideToOpenCalendar__hcih-ih a.btn-like {
    font-size : var(--font-size-11);
   padding:0  var(--space-24);
   
  }
}
@media (width < 973px) {
  body.top .showFacilityName__hcih-ih > div { font-size  : var(--font-size-14); }
  body.top .openAndCloseInfo__hcih-ih       { min-height : 5em; } 
  body.top .openAndCloseInfo__hcih-ih > div { font-size  : var(--font-size-12); }
  body.top .guideToOpenCalendar__hcih-ih .btn-like { font-size: var(--font-size-10); }
  body.top .gryBx__hcih-c {padding-bottom: var(--space-16);}
}

@media (width < 576px) {
  body.top .guideToOpenCalendar__hcih-ih .btn-like { font-size: var(--font-size-12); }
  body.top .serviceTimeInfoCollector__hcih-ih {
    padding-left        : 0;
    padding-right       : 0;
    gap                 : 0.5em 0;
  }

  body.top .serviceTimeInfoCollector__hcih-ih > * {
    width               : 50%;
  }

  body.top .isServiceTimeInfo__hcih-h:nth-child(odd) {
    padding-left : 5%;
    padding-right : 1.25%;
  }

  body.top .isServiceTimeInfo__hcih-h:nth-child(even) {
    padding-left : 1.25%;
    padding-right : 5%;
  }
  body.top .gryBx__hcih-c {padding-bottom: var(--space-16);}

}
body.top .guideToOpenCalendar__hcih-ih .btn-like:hover,
body.top .guideToOpenCalendar__hcih-ih .btn-like:focus{
   border: 2px solid var(--color-border-button-hover-01);
}
/*============================================
 adjustPerSite ＞ 図書館系 ＞ ログイン系メニュー
/*==========================================*/


/*================================
 adjustPerSite ＞ 図書館系 ＞ 資料を探す
================================*/

body.top .searchBook .contentsPerSectionTitle.flBxGene {
  padding-left     : 10%;
}
/* 要素同士のレイアウト */
body.top .searchBook .search-form {
  width           : calc(100% - (675px + 10px));
  min-width       : 18em;
  padding-right   : 1em;
}
body.top .searchBook .information__list.flBxGene {
  /* width           : calc(100% / 14 * 9); */
  width           : 675px;
  /* padding-right   : 10px; */
  justify-content : space-between;
  flex-wrap       : wrap;
  top             : -1.5em;
  gap             : 1em 0;
}
/* 各要素のレイアウト ＞ 検索キーワード入力域 */
body.top .searchBook .search_wrap.main-visual__search-wrap {
  width           : 100%;
  padding-top     : 1em;
  padding-right   : 2.5em;
}
body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword.btnBrdAmbi {

}
body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword.btnBrdAmbi .search_txt {
  height          : 3em;
  font-size       : var(--font-size-16);
}
body.top .searchBook .searchSetMainVisual.likeSearchBtnInSearchKeyword.btnBrdAmbi .search_btn {
  height          : 3em;
  font-size       : var(--font-size-16);
}

/* 各要素のレイアウト ＞ ６つのボタン */
body.top .searchBook .btn-like {
  width            : 11.5em;
  margin           : 0.5em;
  font-size        : var(--font-size-18);
  background-color : var(--color-neutral-5);
}
/* 1210だと文字サイズ（大）の場合にデザイン崩れが発生する */
@media (width < 1350px) {
  body.top .searchBook .contentsPerSectionTitle.flBxGene {

  }

  body.top .searchBook .search-form.flBxWhnWM {
    display        : block;
  }
  body.top .searchBook .search_wrap.main-visual__search-wrap {
    padding-right  : 0;
    padding-bottom : 3em;
  }

  body.top .searchBook  .search-form {
    width         : 100%;
    padding       : 0;
  }
  body.top .searchBook .information__list.flBxGene {
    top             : 0;
    margin          : 0 auto;
    justify-content : space-around;
  }
}

@media (width < 576px) {
  body.top .searchBook .contentsPerSectionTitle.flBxGene {
    padding-left    : 10%;
    padding-right   : 10%;
  }

  body.top .searchBook .search-form {
    width         : 100%;
    min-width     : 100%;
    padding-right : 0;
  }
  body.top .searchBook .search_wrap.main-visual__search-wrap {
    padding-bottom : 2em;
  }
  body.top .searchBook .information__list.flBxGene {
    width : 100%;
  }
  body.top .searchBook .information__list.flBxGene li {
    display: block;
    margin : 0 auto;
  }

  body.top .searchBook .btn-like {
    width            : 11em;
    font-size        : var(--font-size-14);
    background-color : var(--color-neutral-5);
  }
}

/*============================================
 adjustPerSite ＞ お知らせ ＞ カード型リンク
============================================*/
body.top .cardLinkItemsCollectorHolder .labelList__hcih-ih {
  position        : relative;
  display         : flex;
  justify-content : flex-end;
  gap             : 2em;
  width           : 80%;
  /* transform の % は 親要素ではなく、自分のサイズ が基準 */
  /* 右へ（自身の幅100%分）, 上へ（自身の高さ分（-125%）、移動させる */
  transform       : translate(25%, -125%);
}

body.top .cardLinkItemsCollectorHolder .labelList__hcih-ih .divisionLabel {
  width         : 9em; /* 178px; */
  text-align    : center;
}

body.top .cardLinkItemsCollectorHolder .divisionLabelList {
  padding-left  : var(--sps-glbl-layout-padding-left);
  padding-right : var(--sps-glbl-layout-padding-right);
}
body.top .cardLinkItemsCollectorHolder .dataRowsHolder .divisionLabel {
  min-width       : 80%;
}

@media (width < 973px) {
  body.top .cardLinkItemsCollectorHolder .labelList__hcih-ih {
    width           : 100%;
    justify-content : center;
    gap             : 0.5em;
    transform       : none;
    padding-bottom  : 1em;
  }

}

@media (width < 576px) {
  body.top .cardLinkItemsCollectorHolder .divisionLabelList {
    font-size     : var(--font-size-16);
  }
  body.top .cardLinkItemsCollectorHolder .textInfoHolder .divisionLabel,
  body.top .cardLinkItemsCollectorHolder .labelList__hcih-ih .divisionLabel {
    font-size     : var(--font-size-14);
  }
  body.top .cardLinkItem__hcih-ih .deccription {
    font-size     : var(--font-size-14);
  }
}

@media (width < 420px) {
  body.top .cardLinkItemsCollectorHolder .updateDate {
    font-size     : var(--font-size-12);
  }
}

/*===============================================
 adjustPerSite ＞ 図書館系 ＞ イベント ＞ 施設別アイコン等付き
===============================================*/

/* 原則：背景色は位置・サイズ・コンテンツを定めた最後に設定する */
body.top .event.talkingMeeting .category.mizuhomachi {
  background          : var(--color-named-01-01-by-site);
}
body.top .event.talkingMeeting .category.motosayama  {
  background          : var(--color-named-01-02-by-site);
}
body.top .event.talkingMeeting .category.nagaoka  {
  background          : var(--color-named-01-03-by-site);
}
body.top .event.talkingMeeting .category.musashino  {
  background          : var(--color-named-01-04-by-site);
}
body.top .event.talkingMeeting .category.tonogaya  {
  background          : var(--color-named-01-05-by-site);
}