@charset "utf-8";
/*************************************************
 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) --- */




/*=======================================
 標準 ＞ 図書館系 ＞ info-section ＞ 重要なお知らせ
=======================================*/
body.top .importantNotice .sectionTitle {
  background: var(--color-bg-base-inner-title-dflt, #00ff00);
}

body.top .importantNotice .contentsPerSectionTitle {
  background: var(--color-bg-base-inner-list-dflt, #ffff00);
  padding-top     : 1em;
}

body.top .importantNotice ul > li {
  list-style-type : initial;
  font-size       : var(--font-size-20);
  line-height     : 1.75;
}

body.top .importantNotice .contentsPerSectionTitle {
  padding-left    : calc(10% + 1.5em);
  padding-right   : 10%;
}
body.top .importantNotice .contentsPerSectionTitle.flBxGene .button-wrapper.afterItems {
  width           : 8em;
}
body.top .importantNotice .contentsPerSectionTitle.flBxGene ul.importantNotice__list {
  width           : calc(100% - 8em);
}

@media (width < 576px) {

  body.top .importantNotice section {
    padding : 0; 
  }
}

body.top .hrzTeoEdgeNoLimit.importantNotice  {
  background : var(--color-bg-base-outer-dflt, #000000);
}

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;
}

body.top .importantNotice a.btn-like {
  background : var(--color-bg-btn-dflt, #00ff00);
  border     : 1px solid var(--color-brd-btn-dflt, #00ff00);
  color      : var(--color-txt-btn-dflt,#ff0000);
}

body.top .importantNotice a.btn-like:hover,
body.top .importantNotice a.btn-like:focus {
  background : var(--color-bg-btn-on, #0000ff);
  border     : 1px solid var(--color-brd-btn-on, #0000ff);
  color      : var(--color-txt-btn-on,#00ff00);
}





body.top .importantNotice .contentsPerSectionTitle.flBxGeneWhenWM1 {
  display : flex;
  padding-bottom: 1em;
  align-items: center;
}

body.top .importantNotice .button-wrapper.afterItems.hideWhenOnlyNW1 {
  display : block;
}
body.top .importantNotice .button-wrapper.forOnlyAllList.showWhenOnlyNW1 {
  display : none;
}

body.top .importantNotice.type2 section {
  margin         : 0 auto;
  max-width      : var(--hrzTeoLimter01-width-numScl);
  padding        : 1.25em 0;
  display        : flex;
}

body.top .importantNotice.type2 .sectionTitle {
  min-width : 11em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  align-items: center;
}
body.top .importantNotice.type2 .sectionTitle h2 {
  font-size : var(--font-size-18);
}

body.top .importantNotice.type2 .contentsPerSectionTitle {
  min-width : calc(100% - 11em);
  padding-inline : 0;
}

body.top .importantNotice.type2 .importantNotice__list {
  min-width : calc(100% - 11.5em);
  max-width : calc(100% - 11.5em);
  padding-inline : 3em 2em;
}

body.top .importantNotice.type2 .contentsPerSectionTitle .button-wrapper.afterItems {
  min-width : 11.5em;
}

body.top .importantNotice.type2 .contentsPerSectionTitle .button-wrapper.afterItems a.btn-like {
  top: calc(50% - 1.4em);
  height : 2.8em;
  max-height: 2.8em;
}

body.top .importantNotice .button-wrapper.forOnlyAllList {
  background: var(--color-bg-base-inner-list-dflt, #000000);
  justify-content: center;
  padding-right: 0;
}

body.top .importantNotice.type2 a.btn-like {
  padding-left : 1.2em;
  padding-right: 2.2em;
}

body.top .importantNotice.type2 a.btn-like::after {
  transform: unset;
  top : unset;
  width : 1em;
  height : 1em;
  border : none;
  background-image: var(--rightAllowBase-url-dflt);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.top .importantNotice.type2 a.btn-like:hover::after,
body.top .importantNotice.type2 a.btn-like:focus::after {
  border : none;
  background-image: var(--rightAllowBase-url-on);
}

@media (width < 1400px) {
  body.top .importantNotice.type2 section {
    max-width      : calc(100% - 2em);
  }
}

@media (width < 973px) {
  body.top .importantNotice .sectionTitle.withULWhenNM1 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 .importantNotice .sectionTitle.withULWhenNM1 h2::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    height: 3px;
    width: calc(100%);
    left: 0;
    top : calc(80% + 0px);
    background-color: var(--color-black);
  }

  body.top .importantNotice .contentsPerSectionTitle.flBxGeneWhenWM1 {
    display : block;
  }

  body.top .importantNotice .button-wrapper.afterItems.hideWhenOnlyNW1 {
    display : none;
  }
  body.top .importantNotice .button-wrapper.forOnlyAllList.showWhenOnlyNW1 {
    display : flex;
  }

  body.top .importantNotice.type2 section {
    max-width      : calc(100% - 2em);
    flex-direction : column;
  }

  body.top .importantNotice.type2 .sectionTitle {
    height    : 4em;
  }

  body.top .importantNotice.type2 .sectionTitle h2 {
    margin: auto;
  }
  
  body.top .importantNotice.type2 .importantNotice__list {
    max-width : unset;
  }
  
  body.top .importantNotice.type2 .button-wrapper .news-button.btn-like {
    height : 2.8em;
    max-height: unset;
  }
}

@media (width < 576px) {
  body.top .importantNotice.type2 section {
    padding : 0.25em;
    max-width      : unset;
  }

  body.top .importantNotice.type2 .sectionTitle {

  }
  body.top .importantNotice.type2 {
    padding: 0.5em;
  }
}





/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 図書館系 ＞ 開館時間情報 ＞ 施設別・パネル型
-========--========--========--========--========--========--========--========--========--========-*/
body.top .serviceTimeInfoCollector > * > .hcih-ih.heading {
  display             : none;
}
body.top .serviceTimeInfoCollector > * > .hcih-ih {
  position            : relative;
  display             : flex;
  /* 先頭と末尾の子要素は端に寄せられる */
  justify-content     : space-between;
  /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */
  flex-wrap           : wrap;
  gap                 : 0.125em 0;

  padding-left        : var(--sps-lcl1-layout-padding-left);
  padding-right       : var(--sps-lcl1-layout-padding-right);

  text-align          : center;
}
body.top .serviceTimeInfoCollector > * > .hcih-ih > * {
  width               :       16.6%; /* 親の左右padding除去した後の幅に対して  <= calc(100% / 6); */ 
  aspect-ratio        : calc(230 / 345); /* 230 / (180 + 165) */ 
}

body.top .serviceTimeInfoCollector .showFacilityInfo > * > .hcih-ih {
  display             : flex;
  flex-direction      : column;
  justify-content     : center;   /* 水平方向中央 */
  align-items         : center;   /* 垂直方向中央 */
  /* 文字を大きくした場合に、２行になることを想定 */
  height              : var(--font-size-44);
}
body.top .serviceTimeInfoCollector .showFacilityInfo > * > .hcih-ih > div {
  /* 文字を大きくした場合に、２行になることを想定 */
  font-size           : var(--font-size-22); 
  line-height         : 1;
}

body.top .serviceTimeInfoCollector .closeOrOpen > * > .hcih-ih              {
  font-size           : var(--font-size-64);
  line-height         : 1;
}
body.top .serviceTimeInfoCollector .statusDetail > * > .hcih-ih             {
  font-size           : var(--font-size-14);
  line-height         : 3;
}

body.top .serviceTimeInfoCollector .detailTitle > * > .hcih-ih              {
  padding-top    : var(--font-size-14);
  padding-bottom : var(--font-size-10); 
  font-size      : var(--font-size-12);
  line-height    : 2;
}

body.top .serviceTimeInfoCollector .openAndCloseInfo > * > .hcih-ih {
  display             : flex;
  flex-direction      : column;
  justify-content     : center;   /* 水平方向中央 */
  align-items         : center;   /* 垂直方向中央 */
  /* 文字を大きくした場合に、２行になることを想定 */
  /* 文字サイズ変更（大）に対応するため min-heightで指定 */
  min-height          : var(--font-size-44);
}
body.top .serviceTimeInfoCollector .openAndCloseInfo.hcih-h > * > .hcih-ih > div {
  /* 文字を大きくした場合に、２行になることを想定 */
  font-size           : var(--font-size-14); 
  line-height         : 1.5;
}

body.top .serviceTimeInfoCollector .openAndCloseInfo > * > .hcihih .timeBtwnOpenAndClose {
  font-size : var(--font-size-18);
}

body.top .serviceTimeInfoCollector .guideToOpenCalendar > * > .hcih-ih      {
  font-size      : var(--font-size-16);
  padding-top    : var(--font-size-16);
  padding-bottom : var(--font-size-16);
}




/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ 図書館系 ＞ 開館時間情報 ＞ 施設別・パネル型
-========--========--========--========--========--========--========--========--========--========-*/
body.top .serviceTimeInfoCollector {
  /*
  --color-bg-closeOrOpen-opened-dflt
  --color-bg-closeOrOpen-closed-dflt
  --color-bg-pannel-dflt
  */
}
body.top .serviceTimeInfoCollector.fxdWHItemCollector {
  --fxdWHItem-width-num: 220;
  --fxdWHItem-height-num: 310;

  --fxdWHItem-width-numScl: calc(var(--fxdWHItem-width-num) * 1px);
  --fxdWHItem-height-numScl: calc(var(--fxdWHItem-height-num) * 1px);
  --fxdWHItem-mrgn-btwn-items-numScl : 10px;

  --ItemCollector-column-length      : 6;
  --ItemCollector-max-width-numScl   : calc(var(--fxdWHItem-width-numScl) * var(--ItemCollector-column-length) + var(--fxdWHItem-mrgn-btwn-items-numScl) * (var(--ItemCollector-column-length) - 1));
}

body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih.heading {
  display   : none;
  font-size: var(--font-size-36);
  font-weight: var(--fontweight-regular, 400);
}
body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih.heading > * {
  width        : unset;
  aspect-ratio : unset;
}

body.top .serviceTimeInfoCollector.fxdWHItemCollector {}

body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih {
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fxdWHItem-mrgn-btwn-items-numScl);
  padding-block: 1rem;
  list-style: none;
  justify-content: flex-start;
  max-width: var(--ItemCollector-max-width-numScl);
  margin: 0 auto;
}

body.top .serviceTimeInfoCollector .serviceTimeInfoCollector > * > .hcih-ih > * {
  width: unset;
  aspect-ratio : calc(var(--fxdWHItem-width-num) / var(--fxdWHItem-height-num));
}

body.top .serviceTimeInfoCollector.fxdWHItemCollector .isServiceTimeInfo.hcih-h.fxdWHItem {
  display: block;
  max-width: var(--fxdWHItem-width-numScl, 220px);
  min-width: var(--fxdWHItem-width-numScl, 220px);

  background : var(--color-bg-pannel-dflt, #333333);
}

body.top .serviceTimeInfoCollector .closeOrOpenWithStatus.hcih-h {
  width: 50%;
  margin: 0 auto;
  background: var(--color-bg-closeOrOpen-opened-dflt, #99ff99);
}

body.top .serviceTimeInfoCollector .closeOrOpenWithStatus.hcih-h.closed {
  width: 50%;
  margin: 0 auto;
  background: var(--color-bg-closeOrOpen-closed-dflt, #ff9999);
}
body.top .serviceTimeInfoCollector .closeOrOpenWithStatus.hcih-h img {
  display : none;
  width       : 43%;
  margin      : 0 auto;
  padding-top : 1em;
}
body.top .serviceTimeInfoCollector .closeOrOpenWithStatus.hcih-h.opened img.showWhenOpen {
  display : block;
}
body.top .serviceTimeInfoCollector .closeOrOpenWithStatus.hcih-h.closed img.showWhenClose {
  display : block;
}

body.top .serviceTimeInfoCollector .showFacilityInfo.hcih-h {
  aspect-ratio : 220 / 118;
}
body.top .serviceTimeInfoCollector .closeOrOpenWithStatus.hcih-h {
  aspect-ratio : 220 / 112;
}
body.top .serviceTimeInfoCollector .closedInfo.hcih-h {
  aspect-ratio : 220 /  80;
}
body.top .serviceTimeInfoCollector .closeOrOpen > * > .hcih-ih {
  font-size: var(--font-size-36);
  line-height: 1.25;
}

@media (width < 1380px) {
  body.top .serviceTimeInfoCollector.fxdWHItemCollector {
    --fxdWHItem-mrgn-btwn-items-numScl : 10px;
    --ItemCollector-column-length      : 5;
  }
}

@media (width < 1240px) {
  body.top .serviceTimeInfoCollector.fxdWHItemCollector {
    --fxdWHItem-mrgn-btwn-items-numScl : 10px;
    --ItemCollector-column-length      : 4;
  }
}

@media (width < 1000px) {
  body.top .serviceTimeInfoCollector.fxdWHItemCollector {
    --fxdWHItem-mrgn-btwn-items-numScl : 10px;
    --ItemCollector-column-length      : 3;
  }

  body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih.heading {
    display   : none;
    font-size: var(--font-size-24);
  }

  body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih.heading .dateInfoZone {
    width : 100%;
  }
  body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih.heading .sectionTitle {
    width : 100%;
  }
}

@media (width < 760px) {
  body.top .serviceTimeInfoCollector.fxdWHItemCollector {
    --fxdWHItem-mrgn-btwn-items-numScl : 10px;
    --ItemCollector-column-length      : 2;
  }
}

@media (width < 520px) {
  body.top .serviceTimeInfoCollector.fxdWHItemCollector {
    --fxdWHItem-mrgn-btwn-items-numScl : 14px;
    --ItemCollector-column-length      : 2;

    --fxdWHItem-width-numScl  : calc((100% - var(--fxdWHItem-mrgn-btwn-items-numScl) * 1) / 2);
    --fxdWHItem-height-numScl: calc(var(--fxdWHItem-width-numScl) / 220 / 310);
  }

  body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih {
    padding-left        : var(--fxdWHItem-mrgn-btwn-items-numScl);
    padding-right       : var(--fxdWHItem-mrgn-btwn-items-numScl);
    gap                 : var(--fxdWHItem-mrgn-btwn-items-numScl);
  }

  body.top .serviceTimeInfoCollector .showFacilityInfo > * > .hcih-ih > div {
    font-size: var(--font-size-22);
  }

  body.top .serviceTimeInfoCollector .closeOrOpen > * > .hcih-ih {
    font-size: var(--font-size-32);
    line-height: 1.25;
  }

  body.top .serviceTimeInfoCollector .closedInfo > * > .hcih-ih > div {
    font-size: var(--font-size-20);
  }
}
@media (width < 420px) {
  body.top .serviceTimeInfoCollector .showFacilityInfo > * > .hcih-ih > div {
    font-size: var(--font-size-18);
  }

  body.top .serviceTimeInfoCollector .closeOrOpen > * > .hcih-ih {
    font-size: var(--font-size-28);
    line-height: 1.25;
  }

  body.top .serviceTimeInfoCollector .closedInfo > * > .hcih-ih > div {
    font-size: var(--font-size-16);
  }
}

@media (width < 350px) {
  body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih.heading {
    display   : none;
    font-size: var(--font-size-20);
  }

  body.top .serviceTimeInfoCollector .showFacilityInfo > * > .hcih-ih > div {
    font-size: var(--font-size-14);
  }

  body.top .serviceTimeInfoCollector .closeOrOpen > * > .hcih-ih {
    font-size: var(--font-size-20);
    line-height: 1.25;
  }
  body.top .serviceTimeInfoCollector .closedInfo > * > .hcih-ih > div {
    font-size: var(--font-size-12);
  }
}




/*-========--========--========--========--========--========--========--========--========--========-
 トップページ ＞ かんたん検索 ＞ 基本
-========--========--========--========--========--========--========--========--========--========-*/
body.top .bookEasySearchHolder {
  /*
  --color-brd-pannel-dflt
  --color-txt-pannel-dflt
  
  --color-bg-area-outer-dflt
  --color-bg-area-pannel-dflt

  --color-brd-seachtext-dlft
  --color-brd-seachtext-on
  
  --color-bg-btn-search-dlft
  
  --width-max-pannel-numScl 
  */
}

body.top .bookEasySearchHolder {
  display: flex;
  justify-content: center;   /* 中央寄せ */
  align-items: center;
  padding: 1.5rem;
  background: var(--color-bg-area-outer-dflt, #000000);       /* 背景色（任意） */
  border-radius: 8px;
}

body.top .bookEasySearch {
  margin : 0 auto;
  padding: 0.75em;
}

body.top .bookEasySearch .searchVUIHolder {
  width  : 100%;
  justify-content: center;
}

/* フォーム本体 */
body.top .bookEasySearch {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: fit-content;
  padding-inline: 3em;
  border : 2px solid var(--color-brd-pannel-dflt, #ff0000);
  color  : var(--color-txt-pannel-dflt, #0000ff);
}

/* タイトル部分 */
body.top .bookEasySearch .sectionTitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-22);
  font-weight: bold;
  padding : 0;
  min-width : 10.5em;
}

/* アイコンとテキスト */
body.top .bookEasySearch .sectionTitleForJpSpeaker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width ; 10em;
}

body.top .bookEasySearch .sectionTitleIcon {
  width: 20px;
  height: 20px;
}

/* 英語ラベル */
body.top .bookEasySearch .sectionTitleForNotJpSpeaker.en {
  font-size : var(--font-size-14);
  color  : var(--color-txt-pannel-dflt, #0000ff);
}

/* 入力エリア */
body.top .bookEasySearch .searchOVIEHolder {
  display: flex;
  gap: 0.5rem;
}

body.top .bookEasySearch .labelForSearchText {}

/* 入力フィールド */
body.top .bookEasySearch .searchText {
  background: var(--color-bg-seachtext-dflt, #0000ff);
  border: 2px solid var(--color-brd-seachtext-dflt, #ff0000);
  border-radius: 4px;
  font-size: var(--font-size-20);
  min-width: 18em;
  height : 2.8em;
}

body.top .bookEasySearch .searchText:hover,
body.top .bookEasySearch .searchText:focus {
  background: var(--color-bg-seachtext-on, #ff0000);
  border-color: var(--color-brd-seachtext-on, #00ff00);
}


/* ボタン */
body.top .bookEasySearch .searchTrigger {
  padding: 0.6rem 1.2rem;
  border: var(--btn-search-width-dflt, 0) solid var(--color-brd-btn-search-dflt, #00ff00);
  border-radius: 4px;
  background: var(--color-bg-btn-search-dflt, #00ff00);
  color: var(--color-txt-btn-search-dlft, #ff0000);
  height : 2.8em;
  font-size: var(--font-size-20);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s;
}

body.top .bookEasySearch .searchTrigger:hover,
body.top .bookEasySearch .searchTrigger:focus {
  background: var(--color-bg-btn-search-on, #0000ff);
  border: var(--btn-search-width-on, 0) solid var(--color-brd-btn-search-on, #0000ff);
  color: var(--color-txt-btn-search-on, #00ff00);
}

/* レスポンシブ */
@media (width < 1020px) {
  body.top .bookEasySearch {
    padding-inline: 1.5em;
  }
}

@media (width < 950px) {
  body.top .bookEasySearch {
    max-width : 100%;
    padding-inline: 1em;
  }

  body.top .bookEasySearch .searchVUIHolder {
    flex-direction: column;
  }

  body.top .bookEasySearch .sectionTitle {
    width : 100%;
    justify-content: center;
    padding-bottom : 0.5em;
  }
}

@media (width < 700px) {
  body.top .bookEasySearch .searchText {
    font-size: var(--font-size-16);
    min-width: 15em;
    height: 2.2em;
  }
  
  body.top .bookEasySearch .searchTrigger {
    font-size: var(--font-size-16);
    height: 2.2em;
    padding-block: 0;
  }
}
@media (width < 520px) {

  body.top .bookEasySearchHolder {
    padding-inline: 0.5em;
  }

  body.top .bookEasySearch {
    padding-left : 0;
    padding-right : 0;
  }

  body.top .bookEasySearch .searchOVIEHolder {
    max-width: 100%;
    justify-content: center;
    padding-inline: 1em;
  }

  body.top .bookEasySearch .sectionTitle {
    min-width: unset;
  }

  body.top .bookEasySearch .searchText {
    min-width: unset;
    flex : 1; /* 余白いっぱいに伸ばす */
    max-width : calc(100% - 4.5em);
  }

}





/*-========--========--========--========--========--========--========--========--========--========-
 トップページ ＞ 内部リンク集
-========--========--========--========--========--========--========--========--========--========-*/
body.top .insideLinksHolder .insideLinkCollector.fxdWHItemCollector  {
  /*
  --color-bg-fxdWHItem-base-dflt
  --color-bg-fxdWHItem-base-on
  --color-brd-fxdWHItem-link-self-dflt
  --color-brd-fxdWHItem-link-self-on
  --color-txt-fxdWHItem-dflt
  --color-txt-fxdWHItem-on
  */
  --fxdWHItem-width-numScl           : 270px;
  --fxdWHItem-height-numScl          : 100px;
  --fxdWHItem-mrgn-btwn-items-numScl : 16px;

  --ItemCollector-column-length      : 4;
  --ItemCollector-max-width-numScl   : calc(var(--fxdWHItem-width-numScl) * var(--ItemCollector-column-length) + var(--fxdWHItem-mrgn-btwn-items-numScl) * (var(--ItemCollector-column-length) - 1));
}

body.top .insideLinkCollector.fxdWHItemCollector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fxdWHItem-mrgn-btwn-items-numScl);
  padding-block: 1rem;
  list-style: none;
  justify-content: flex-start; /* 左寄せ */
  max-width : var(--ItemCollector-max-width-numScl);
  margin: 0 auto;
}

body.top .insideLinkCollector.fxdWHItemCollector .linkItem.fxdWH {
  display: block;
  max-width: var(--fxdWHItem-width-numScl, 270px);
  min-width: var(--fxdWHItem-width-numScl, 270px);
  max-height: var(--fxdWHItem-height-numScl, 100px);
  min-height: var(--fxdWHItem-height-numScl, 100px);
  box-sizing: border-box;

  background    : var(--color-bg-fxdWHItem-base-dflt, #00ff00);
}
body.top .insideLinkCollector.fxdWHItemCollector .linkItem.fxdWH:hover,
body.top .insideLinkCollector.fxdWHItemCollector .linkItem.fxdWH:focus-within {
  background    : var(--color-bg-fxdWHItem-base-on, #00ff00);
}

body.top .insideLinkCollector .linkItem.fxdWH a {
  display: flex;
  width : 100%;
  height : 100%;
  align-items: center;
  padding: 0;
  text-decoration: none;
  height: 100%;
  text-align: center;
  text-decoration: none;
  border      : 4px solid var(--color-brd-fxdWHItem-link-self-dflt, #00ff00);
  outline-color : var(--color-brd-fxdWHItem-outLine-dflt, #0000ff);
  color: var(--color-txt-fxdWHItem-dflt, #00ff00);
}

body.top .insideLinkCollector .linkItem.fxdWH a .graphHolder {
  position: absolute;
}

body.top .insideLinkCollector .linkItem.fxdWH a .leftBlock {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 4.0em;
  max-width: 4.0em;
}

body.top .insideLinkCollector .linkItem.fxdWH a .centerBlock {
  display: block;
  min-width: calc(100% - 4.0em - 0.25em);
  max-width: calc(100% - 4.0em - 0.25em);
  padding-block: 0.25em;
}

body.top .insideLinkCollector .linkItem.fxdWH a .rightBlock {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0.25em;
  max-width: 0.25em;
}

body.top .insideLinkCollector .linkItem.fxdWH a:hover,
body.top .insideLinkCollector .linkItem.fxdWH a:focus-within {
  border-color  : var(--color-brd-fxdWHItem-link-self-on, #0000ff);
  outline-color : var(--color-brd-fxdWHItem-link-outLine-on, #ff0000);
  color: var(--color-txt-fxdWHItem-on, #0000ff);
}

@media (width < 1150px) {
  body.top .insideLinksHolder .insideLinkCollector.fxdWHItemCollector  {
    --ItemCollector-column-length      : 3;
  }
}

@media (width < 860px) {
  body.top .insideLinksHolder .insideLinkCollector.fxdWHItemCollector  {
    --ItemCollector-column-length      : 2;
  }
}

@media (width < 580px) {
  body.top .insideLinksHolder .insideLinkCollector.fxdWHItemCollector  {
    --ItemCollector-column-length      : 1;
  }
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ トップページ ＞ バナー
-========--========--========--========--========--========--========--========--========--========-*/
body.top .bannerHolder {
  /*
  利用変数
  --gn-bannerHolder-url
  */
}

body.top .bannerHolder {
  width : 100%;
}

body.top .bannerHolder.multiItem {
  display: flex;
  justify-content: flex-end;
  gap: 0 0.5em;
  align-items: center;
  min-height: calc(70px + 1em);
  flex-wrap: wrap;
  padding-block: 0.5em;
}

body.top .bannerHolder .graphHolder {
  width : 100%;
  height : 100%;
}

body.top .bannerHolder.singleItem .graphHolder img {
  height : auto;
}

body.top .bannerHolder.singleItem img {
  display: block;
  width: 100%;
  height: auto; /* アスペクト比を維持 */
}

body.top .bannerHolder.multiItem .graphHolder img {
  min-width : 250px;
  max-width : 250px;
  min-height : 70px;
  max-height : 70px;
  height : auto;
}




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


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 .bookEasySearchHolder {
  --color-bg-area-outer-dflt : var(--color-white-for-bg-dflt);

  --color-brd-pannel-dflt    : var(--color-brd-02-src01-i);
  --color-txt-pannel-dflt    : var(--color-txt-05-src01-i);

  --color-bg-seachtext-dflt  : var(--color-white-for-bg-dflt);
  --color-brd-seachtext-dflt : var(--color-brd-01-src01-c);

  --color-bg-seachtext-on    : var(--color-bg-focused-06-src02-j);
  --color-brd-seachtext-on   : var(--color-brd-01-src01-c);

  --color-bg-btn-search-dflt : var(--color-bg-02-src01-c);
  --color-txt-btn-search-dlft : var(--color-white-for-txt-dflt);

  --color-bg-btn-search-on   : var(--color-bg-focused-03-src01-j);
  --color-txt-btn-search-on : var(--color-white-for-txt-on);
}

body.top .bookEasySearchHolder .bookEasySearch {
  border-radius: var(--rounded-12);
}
body.top .bookEasySearchHolder form.bookEasySearch {
  --color-txt-form-input-placeholder-dflt : var(--color-black-for-txt-dflt);
  --color-txt-form-input-placeholder-on   : var(--color-black-for-txt-on);
}

body.top .bookEasySearchHolder .searchText,
body.top .bookEasySearchHolder .searchTrigger {
  border-radius: var(--rounded-8);
}

/*****************************************************************************************************
 adjustPerSite ＞ トップページ ＞ 内部リンク集
*****************************************************************************************************/
/* 色付 */
body.top .insideLinksHolder .insideLinkCollector.fxdWHItemCollector {
  --color-bg-fxdWHItem-base-dflt  : var(--color-white-for-bg-dflt);
  --color-bg-fxdWHItem-base-on   : var(--color-white-for-bg-dflt);

  --color-brd-fxdWHItem-link-self-dflt : var(--color-white-for-brd-dflt);
  --color-brd-fxdWHItem-link-self-on   : var(--color-dflt-bgBrdOlnBs-focused-01);

  --color-txt-fxdWHItem-dflt : var(--color-black-for-bg-dflt);
  --color-txt-fxdWHItem-on   : var(--color-black-for-bg-dflt);
}

body.top .insideLinkCollector.fxdWHItemCollector .linkItem.fxdWH,
body.top .insideLinksHolder .insideLinkCollector.fxdWHItemCollector a {
  border-radius: var(--rounded-12);
}

/* 色付 */
body.top .insideLinksHolder .insideLinkCollector.fxdWHItemCollector a {
  background: linear-gradient(to top, var(--color-bg-09-src02-e) 65%, transparent 65%, transparent 100%);
}

body.top .insideLinkCollector .linkItem.fxdWH a .leftBlock .graphHolder {
  left : 0.8em;
}

/*=============================================
 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;
}

/*=============================================
 adjustPerSite ＞ 図書館系 ＞ info-section ＞ 重要なお知らせ
=============================================*/
/* 色付 */
body.top .importantNotice {
  --color-bg-base-outer-dflt       : var(--color-bg-01-src01-a);
}

body.top .importantNotice.type2 {
  --rightAllowBase-url-dflt        : url(../img/gene_btn_arrow.png);
  --rightAllowBase-url-on          : url(../img/gene_btn_arrow_on.png);
}
/* 色付 */
body.top .importantNotice.type2 {
  --color-bg-base-inner-title-dflt : var(--color-bg-05-src02-a);
  --color-bg-base-inner-list-dflt  : var(--color-white-for-bg-dflt);

  --color-bg-btn-dflt              : var(--color-bg-05-src02-a);
  --color-brd-btn-dflt             : var(--color-brd-03-src02-a);
  --color-txt-btn-dflt             : var(--color-txt-02-src01-c);

  --color-bg-btn-on                : var(--color-bg-focused-01-src01-a);
  --color-brd-btn-on               : var(--color-brd-focused-01-src01-a);
  --color-txt-btn-on               : var(--color-txt-focused-02-01);
}

/*===========================================================
 adjustPerSite ＞ 図書館系 ＞ 開館時間情報 ＞ 施設別・パネル型
===========================================================*/
/* 色付 */
body.top .serviceTimeInfoCollector {
  --color-bg-closeOrOpen-opened-dflt : var(--color-bg-10-src02-g);
  --color-bg-closeOrOpen-closed-dflt : var(--color-bg-16-src06-a);
  --color-bg-pannel-dflt             : var(--color-white-for-bg-dflt);
}

body.top .serviceTimeInfoCollector .showFacilityInfo.hcih-h,
body.top .serviceTimeInfoCollector .closedInfo.hcih-h {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.top .serviceTimeInfoCollector .facilityName {
  padding-top: 0.25em;
  padding-bottom: 0.5em;
}
body.top .serviceTimeInfoCollector .openTime {
  padding-top: 0.25em;
}
body.top .serviceTimeInfoCollector.fxdWHItemCollector > * > .hcih-ih.heading {
  display : flex;
}

/*===========================================================
 adjustPerSite ＞ トップページ ＞ スライダー
===========================================================*/
body.top .slider-container {
  --color-bg-top-slider-main-dflt           : var(--color-white-for-bg-dflt);

  --top-main-ctrl-LR-padding-numScl        : calc(var(--sHDsgnBsRct003-sorW) * 1px + 25%);

  /* ボタン「前へ」「次へ」*/
  --sldr-bg-prevNextGraph-prev-dflt-url  : url(../img/sld_arrow_prev_btn.png);
  --sldr-bg-prevNextGraph-prev-on-url    : url(../img/sld_arrow_prev_btn.png);
  --sldr-bg-prevNextGraph-next-dflt-url  : url(../img/sld_arrow_next_btn.png);
  --sldr-bg-prevNextGraph-next-on-url    : url(../img/sld_arrow_next_btn.png);

  /* ボタン「再生と停止」 ＞ 画像 */
  --ctrlBtn-stop-innerGraph-dflt-url      : url(../img/sld_stop.png);
  --ctrlBtn-stop-innerGraph-on-url        : url(../img/sld_stop_on.png);
  --ctrlBtn-playStart-innerGraph-dflt-url : url(../img/sld_playStart_arrow.png);
  --ctrlBtn-playStart-innerGraph-on-url   : url(../img/sld_playStart_arrow_on.png);

  --ctrlBtn-stop-innerGraph-width-numScl     : 40%;
  --ctrlBtn-stop-innerGraph-mrgn-left-numScl : 4px;

  --ctrlBtn-playStart-innerGraph-width-numScl  : 40%;
  --ctrlBtn-playStart-innerGraph-mrgn-left-numScl : 4px;
}

/* 色付 */
body.top .slider-container {
  /* ボタン「前へ」「次へ」*/
  --color-bg-prevNextGraph-dflt            : var(--color-white-for-bg-dflt);
  --color-bg-prevNextGraph-mask-dflt       : var(--color-bg-02-src01-c);

  --color-bg-prevNextGraph-on              : var(--color-white-for-bg-dflt);
  --color-bg-prevNextGraph-mask-on         : var(--color-bg-focused-03-src01-j);

  /* ボタン「ドット」 */
  --color-bg-ctrlBtn-dot-dflt              : var(--color-white-for-bg-dflt);
  --color-brd-ctrlBtn-dot-dflt             : var(--color-brd-01-src01-c);

  --color-bg-ctrlBtn-dot-on                : var(--color-bg-focused-08-src01-c);
  --color-oLn-ctrlBtn-dot-on               : var(--color-brd-focused-02-src01-c);

  --color-bg-ctrlBtn-dot-active-dflt       : var(--color-bg-02-src01-c);
  --color-bg-ctrlBtn-dot-active-on         : var(--color-bg-focused-08-src01-c);

  /* ボタン「再生と停止」 ＞ 背景と境界色 */
  --color-bg-ctrlBtn-dflt                  : var(--color-white-for-bg-dflt);
  --color-brd-ctrlBtn-dflt                 : var(--color-brd-04-src02-b);
  
  --color-bg-ctrlBtn-on                    : var(--color-bg-focused-01-src01-a);
  --color-brd-ctrlBtn-on                   : var(--color-bg-focused-01-src01-a);

  --color-bg-ctrlBtn-pressed-dflt          : var(--color-bg-02-src01-c);
  --color-brd-ctrlBtn-pressed-dflt         : var(--color-brd-focused-02-src01-c);

  --color-bg-ctrlBtn-pressed-on            : var(--color-bg-focused-07-src02-b);
  --color-brd-ctrlBtn-pressed-on           : var(--color-bg-focused-07-src02-b);

  /* ボタン「再生と停止」 ＞ ボタン識別グラフィック */
  --color-bg-ctrlBtn-innerGraph-dflt         : var(--color-bg-02-src01-c);
  --color-bg-ctrlBtn-innerGraph-on           : var(--color-bg-focused-07-src02-b);
  --color-bg-ctrlBtn-innerGraph-pressed-dflt : var(--color-white-for-bg-dflt);
  --color-bg-ctrlBtn-innerGraph-pressed-on   : var(--color-bg-focused-08-src01-c);
}

body.top .slider-container.full-width .slide-control.typeR1 {
  max-width: var(--hrzTeoLimter01-width-numScl);
  margin: 0 auto;
}

body.top .slider-container.full-width .slide-control.typeR1 .buttons {
  position: absolute;
  top :  5px;
  right: 0;
}

/*===========================================================
 adjustPerSite ＞ トップページ ＞ 内部リンク集
===========================================================*/
body.top .insideLinksHolder .insideLinkCollector.fxdWHItemCollector {
  padding-block: 3em;
}

/*===========================================================
 adjustPerSite ＞ トップページ ＞ バナー
===========================================================*/