@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
/*==================================
//リセット
==================================*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  /*ikkrweb preview ie9 emulator ie7 varnish error*/
  /*background:transparent;*/
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  /*ikkrweb preview ie9 emulator ie7 varnish error*/
  /*background:transparent;*/
}
/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input, select {
  vertical-align: middle;
}
body {
  font-size: 1rem;
  font-family: "BIZ UDPゴシック", "BIZ UDPGothic", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "YoGo-Medium", "游ゴシック体", "Yu Gothic", YuGothic, Arial, Helvetica, sans-serif;
  color: #543f32;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 1rem;
  }
}
img {
  border: none;
  vertical-align: top;
}
p, li, address, table, dt, dd {
  line-height: 180%;
}
ul, ol {
  list-style: none;
}
section{
	box-sizing: border-box;
}
address {
  font-style: normal;
}
a:link {
  color: #543f32;
  text-decoration: underline;
}
a:visited {
  color: #6e6e6e;
  text-decoration: underline;
  font-weight: 400;
}
a:hover {
  color: #00118F;
  text-decoration: none;
}

/*==================================
//文字サイズ拡大_基本設定
==================================*/
html[data-fontsize=up] {
  font-size: 133.3%; /* 21.328px */
}
html[data-fontsize=up2] {
  font-size: 166.7%; /* 26.672px */
}
html[data-fontsize=up3] {
  font-size: 200%; /* 32px */
}

/*==================================
//フォーカスインジケータ_基本設定
==================================*/
a:focus-visible,
button:focus-visible,
input:focus-visible {
  /* ブラウザ標準の枠線を消す */
  outline: none;
  
  /* 外側に枠線を付ける*/
  outline: 3px solid #00118f;
  outline-offset: 0.3125rem;
}

/*==================================
//表示・非表示
==================================*/
@media only screen and (max-width: 768px) {
  .is-pc, .view-pc {
    display: none !important;
  }
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.hide {
  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;
  }
}
.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: 0;
  padding-right: 0;
}
@media only screen and (min-width: 830px) {
  .container.S {
    max-width: 800px;
  }
}
/*==================================
//文字揃え
==================================*/
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
span.line_break {
  display: block;
}
/*==================================
//margin-padding設定
==================================*/
@media only screen and (max-width: 768px) {
  .mt_XS_sp, .mt_XS, .editArea p, .editArea ul, .editArea ol {
    margin-top: 0.625rem; /* 10px */
  }
  .mt_SS_sp, .mt_SS {
    margin-top: 0.625rem; /* 10px */
  }
  .mt_S_sp, .mt_S, .list_ul, .list_ol, .editArea h4, .editArea h2 + p, .editArea img, .editArea table {
    margin-top: 1.25rem; /* 20px */
  }
  .mt_M_sp, .mt_M, .editArea * + h2, .editArea h3 {
    margin-top: 1.875rem; /* 30px */
  }
  .mt_L_sp, .mt_L {
    margin-top: 2.5rem; /* 40px */
  }
  .mt_LL_sp, .mt_LL {
    margin-top: 3.125rem; /* 50px */
  }
  .mt_XL_sp, .mt_XL {
    margin-top: 3.75rem; /* 60px */
  }
  .mt_XXL_sp, .mt_XXL {
    margin-top: 5rem; /* 80px */
  }
  .mb_XS_sp, .mb_XS {
    margin-bottom: 0.625rem; /* 10px */
  }
  .mb_SS_sp, .mb_SS {
    margin-bottom: 0.625rem; /* 10px */
  }
  .mb_S_sp, .mb_S {
    margin-bottom: 1.25rem; /* 20px */
  }
  .mb_M_sp, .mb_M {
    margin-bottom: 1.875rem; /* 30px */
  }
  .mb_L_sp, .mb_L {
    margin-bottom: 2.5rem; /* 40px */
  }
  .mb_LL_sp, .mb_LL {
    margin-bottom: 3.125rem; /* 50px */
  }
  .mb_XL_sp, .mb_XL {
    margin-bottom: 3.75rem; /* 60px */
  }
  .mb_XXL_sp, .mb_XXL {
    margin-bottom: 5rem; /* 80px */
  }
  .pt_XS_sp, .pt_XS {
    padding-top: 0.625rem; /* 10px */
  }
  .pt_SS_sp, .pt_SS {
    padding-top: 0.625rem; /* 10px */
  }
  .pt_S_sp, .pt_S {
    padding-top: 1.25rem; /* 20px */
  }
  .pt_M_sp, .pt_M {
    padding-top: 1.875rem; /* 30px */
  }
  .pt_L_sp, .pt_L {
    padding-top: 2.5rem; /* 40px */
  }
  .pt_LL_sp, .pt_LL {
    padding-top: 3.125rem; /* 50px */
  }
  .pt_XL_sp, .pt_XL {
    padding-top: 3.75rem; /* 60px */
  }
  .pt_XXL_sp, .pt_XXL {
    padding-top: 5rem; /* 80px */
  }
  .pb_XS_sp, .pb_XS {
    padding-bottom: 0.625rem; /* 10px */
  }
  .pb_SS_sp, .pb_SS {
    padding-bottom: 0.625rem; /* 10px */
  }
  .pb_S_sp, .pb_S {
    padding-bottom: 1.25rem; /* 20px */
  }
  .pb_M_sp, .pb_M {
    padding-bottom: 1.875rem; /* 30px */
  }
  .pb_L_sp, .pb_L {
    padding-bottom: 2.5rem; /* 40px */
  }
  .pb_LL_sp, .pb_LL {
    padding-bottom: 3.125rem; /* 50px */
  }
  .pb_XL_sp, .pb_XL {
    padding-bottom: 3.75rem; /* 60px */
  }
  .pb_XXL_sp, .pb_XXL {
    padding-bottom: 5rem; /* 80px */
  }
}
@media only screen and (min-width: 769px) {
  .ml_XS_pc, .ml_XS {
    margin-left: 0.9375rem; /* 15px */
  }
  .mt_XS_pc, .mt_XS, .editArea p, .editArea ul, .editArea ol {
    margin-top: 0.625rem; /* 10px */
  }
  .mt_SS_pc, .mt_SS {
    margin-top: 1.25rem; /* 20px */
  }
  .mt_S_pc, .mt_S, .list_ul, .list_ol, .editArea h4, .editArea h2 + p, .editArea img, .editArea table {
    margin-top: 1.875rem; /* 30px */
  }
  .mt_M_pc, .mt_M, .editArea * + h2, .editArea h3 {
    margin-top: 2.5rem; /* 40px */
  }
  .mt_L_pc, .mt_L {
    margin-top: 3.125rem; /* 50px */
  }
  .mt_LL_pc, .mt_LL {
    margin-top: 3.75rem; /* 60px */
  }
  .mt_XL_pc, .mt_XL {
    margin-top: 5rem; /* 80px */
  }
  .mt_XXL_pc, .mt_XXL {
    margin-top: 6.25rem; /* 100px */
  }
  .mb_XS_pc, .mb_XS {
    margin-bottom: 0.625rem; /* 10px */
  }
  .mb_SS_pc, .mb_SS {
    margin-bottom: 1.25rem; /* 20px */
  }
  .mb_S_pc, .mb_S {
    margin-bottom: 1.875rem; /* 30px */
  }
  .mb_M_pc, .mb_M {
    margin-bottom: 2.5rem; /* 40px */
  }
  .mb_L_pc, .mb_L {
    margin-bottom: 3.125rem; /* 50px */
  }
  .mb_LL_pc, .mb_LL {
    margin-bottom: 3.75rem; /* 60px */
  }
  .mb_XL_pc, .mb_XL {
    margin-bottom: 5rem; /* 80px */
  }
  .mb_XXL_pc, .mb_XXL {
    margin-bottom: 6.25rem; /* 100px */
  }
  .pt_XS_pc, .pt_XS {
    padding-top: 0.625rem; /* 10px */
  }
  .pt_SS_pc, .pt_SS {
    padding-top: 1.25rem; /* 20px */
  }
  .pt_S_pc, .pt_S {
    padding-top: 1.875rem; /* 30px */
  }
  .pt_M_pc, .pt_M {
    padding-top: 2.5rem; /* 40px */
  }
  .pt_L_pc, .pt_L {
    padding-top: 3.125rem; /* 50px */
  }
  .pt_LL_pc, .pt_LL {
    padding-top: 3.75rem; /* 60px */
  }
  .pt_XL_pc, .pt_XL {
    padding-top: 5rem; /* 80px */
  }
  .pt_XXL_pc, .pt_XXL {
    padding-top: 6.25rem; /* 100px */
  }
  .pb_XS_pc, .pb_XS {
    padding-bottom: 0.625rem; /* 10px */
  }
  .pb_SS_pc, .pb_SS {
    padding-bottom: 1.25rem; /* 20px */
  }
  .pb_S_pc, .pb_S {
    padding-bottom: 1.875rem; /* 30px */
  }
  .pb_M_pc, .pb_M {
    padding-bottom: 2.5rem; /* 40px */
  }
  .pb_L_pc, .pb_L {
    padding-bottom: 3.125rem; /* 50px */
  }
  .pb_LL_pc, .pb_LL {
    padding-bottom: 3.75rem; /* 60px */
  }
  .pb_XL_pc, .pb_XL {
    padding-bottom: 5rem; /* 80px */
  }
  .pb_XXL_pc, .pb_XXL {
    padding-bottom: 6.25rem; /* 100px */
  }
}
/*==================================
//グリッドレイアウト
==================================*/
@media only screen and (min-width: 769px) {
  .grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden;
    margin-right: -1.875rem; /* 30px */
  }
  .gridItem {
    margin: 0 1.875rem 1.875rem 0; /* 30px */
  }
  .gridItem.x1 {
    width: calc(8.33333% - 1.875rem); /* 30px */
  }
  .gridItem.x2 {
    width: calc(16.66666% - 1.875rem); /* 30px */
  }
  .gridItem.x3 {
    width: calc(24.99999% - 1.875rem); /* 30px */
  }
  .gridItem.x4 {
    width: calc(33.33332% - 1.875rem); /* 30px */
  }
  .gridItem.x5 {
    width: calc(41.66665% - 1.875rem); /* 30px */
  }
  .gridItem.x6 {
    width: calc(49.99998% - 1.875rem); /* 30px */
  }
  .gridItem.x7 {
    width: calc(58.33331% - 1.875rem); /* 30px */
  }
  .gridItem.x8 {
    width: calc(66.66664% - 1.875rem); /* 30px */
  }
  .gridItem.x9 {
    width: calc(74.99997% - 1.875rem); /* 30px */
  }
  .gridItem.x10 {
    width: calc(83.3333% - 1.875rem); /* 30px */
  }
  .gridItem.x11 {
    width: calc(91.66663% - 1.875rem); /* 30px */
  }
  .grid_small {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden;
    margin-right: -0.9375rem; /* 15px */
  }
  .gridItem_small {
    margin: 0 0.9375rem 0.9375rem 0; /* 30px */
  }
  .gridItem_small.x1 {
    width: calc(8.33333% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x2 {
    width: calc(16.66666% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x3 {
    width: calc(24.99999% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x4 {
    width: calc(33.33332% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x5 {
    width: calc(41.66665% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x6 {
    width: calc(49.99998% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x7 {
    width: calc(58.33331% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x8 {
    width: calc(66.66664% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x9 {
    width: calc(74.99997% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x10 {
    width: calc(83.3333% - 0.9375rem); /* 30px */
  }
  .gridItem_small.x11 {
    width: calc(91.66663% - 0.9375rem); /* 30px */
  }
}
@media only screen and (max-width: 768px) {
  .grid {
    display: block;
  }
}
/*==================================
//背景
==================================*/
.bgc_cream {
  background-color: #FFFCF6;
}
@media only screen and (max-width: 768px){
  .bgc_cream {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.bgc_green {
  background-color: #D8EBCE;
}
.bgc_yellow{
 background-color: #FFFBC7;
}

.bg_line{
  height: 120px;
  background-image: url("../img_top/bg_line.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}


/*==================================
//moreボタン
==================================*/
/* ----- 白 ----- */
.btn_more a {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  padding: 1rem 0;
  border: 1px solid #4C4948;
  border-radius: 0.1875rem;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  color: #543F32;
  background-color: #fff;
  transition: background-color .3s ease;
}
.btn_more a::after {
  content: '';
  display: block;
  position: absolute;
  right: 1.7em;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 2px solid #4C4948;
  border-right: 2px solid #4C4948;
  transform: translateY(-50%) rotate(45deg);
}
html[data-fontsize=up2] .btn_more a::after,
html[data-fontsize=up3] .btn_more a::after{
	content: none;
}


@media only screen and (max-width: 1024px){
	.btn_more a::after{
		right: 0.4em;
	}
}

@media only screen and (min-width: 769px) {
  .btn_more a:hover {
    background-color: #D8EBCE;
  }
}

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

/* ----- ピンク ----- */
.btn_more-pink a {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  padding: 1rem 0;
  border: 1px solid #4C4948;
  border-radius: 0.1875rem;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  color: #543F32;
  background-color: #F9D2D4;
  transition: background-color .3s ease;
}

@media only screen and (min-width: 769px) {
  .btn_more-pink a:hover {
    background-color: #D8EBCE;
  }
}

/* -----フォーカスインジケータ----- */
.btn_more a:focus-visible,
.btn_more-pink a:focus-visible{
  background-color: #D8EBCE;
  outline: none;
}


/*==================================
//見出し
==================================*/
/* -----h2----- */
h2 {
  font-size: 1.5rem;/* 24px */
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 768px) {
  h2 {
    font-size: 1.375rem;/* 22px */
  }
}


/* お知らせ・かんたん検索見出し  */
h2.h_top1{
    position: relative;
    width: 100%;
    margin: 0 auto 2.5rem;
	padding: 0.9375rem;
	background-color: #D8EBCE;
    outline: 2px dashed #fff; /* 拡大時に太くさせないため固定値 */
    outline-offset: -0.417em; /* h2のフォントサイズと連動させたいのでem指定 */
    border-radius: 2.1875rem;
    box-shadow: 0 0.125rem 0.125rem 0.1rem rgba(0, 0, 0, 0.16);
}


@media only screen and (max-width: 768px) {

}

/* 開館情報・図書館カレンダー見出し  */
h2.h_top2 {
    text-align: center;
    padding: 0.4em 0.5em;
    position: relative;
    color: #543F32;
    width: 100%;
}
h2.h_top2::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.4rem;
    bottom: -0.1em;
    pointer-events: none;
    z-index: 1;
    background: repeating-radial-gradient(circle, #543F32 0 0.2rem, transparent 0.2rem 1.2rem);
    background-size: 1.2rem 0.4rem;
}


/* 貸出ベスト見出し  */
h2.h_top3{
    text-align: center;
    padding: 0.4em 0.5em 0.6em;
    position: relative;
    color: #543F32;
    width: 100%;
}
h2.h_top3::after {
content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.4rem;
    bottom: 0.3rem;
    pointer-events: none;
    z-index: 1;
    background: repeating-radial-gradient(circle, #543F32 0 0.2rem, transparent 0.2rem 1.2rem);
    background-size: 1.2rem 0.4rem;
}



/* PICK UP  */
h2.h_top4{
    position: relative;
    width: 100%;
    margin: 0 auto 2.5rem;
	padding: 0.9375rem;
	background-color: #F9D2D4;
    outline: 2px dashed #fff; /* 拡大時に太くさせないため固定値 */
    outline-offset: -0.417em; /* h2のフォントサイズと連動させたいのでem指定 */
    border-radius: 2.1875rem;
    box-shadow: 0 0.125rem 0.125rem 0.1rem rgba(0, 0, 0, 0.16);
}


@media only screen and (max-width: 768px) {

}
/* -----h3----- */
h3 {
  font-size: 1.25rem;
  font-weight: 600;
}


/* -----h4----- */
h4 {
  font-size: 1.125rem;
  font-weight: 600;
}

/*================================
//ヘッダー（PC）
================================*/
/* -----全体----- */
#header {
  position: relative;
  box-sizing: border-box;
  padding-bottom: 3.125rem;
  /* max-width: 1170px; */
  background-color: #FFFCF6;
}
#header .header-subnav-area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* -----本文へ----- */
@media screen and (min-width: 769px) {
  #blockSkip a{
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    left: 0;
    top: 0;
    margin-top: -9999px;
    font-size: 1.125rem;
	font-weight: 700;
    line-height: 1;
    color: #6C3524;
  }
}
/* フォーカスインジケータ */
#blockSkip a:focus {
  position: relative;
  width: fit-content;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1.25rem;
}
#blockSkip a:focus-visible{
  padding: 0.75rem;
  color: #000;
  background-color: #e7d984;
  border-radius: 0.625rem;
}

/* -----ヘッダーロゴ・リンク部分----- */
#header .header-contents-area{
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding: 1.25rem 0;
}
/* ロゴ */
#header .header-contents-area #header-logo {
	flex: 6;
  position: inherit;
}
#header .header-contents-area #header-logo img{
  width: 100%;
}
#header .header-contents-area #header-logo a {
  display: inline-block;
  transition: opacity 0.3s ease;
}

@media only screen and (min-width: 769px){
    #header .header-contents-area #header-logo a:hover {
      opacity: 0.7;
    }
}

/* アクセス・サイトマップ */
#header .header-link-area{
	flex: 4;
}
ul.link_site {
  display: flex;
  justify-content: flex-end;
  column-gap: 1.25rem;
  margin-top: 0.9375rem;
}
ul.link_site li a {
  color: #543f32;
}

/* SNS */
@media only screen and (min-width: 769px){
    ul.link_sns {
      display: flex;
      justify-content: flex-end;
      column-gap: 1.25rem;
      margin-top: 0.9375rem;
    }

    ul.link_sns li a{
      transition: opacity 0.3s ease;
    }
    ul.link_sns li a img{
      width: 1.875rem;
      height: auto;
    }
	ul.link_sns li a:hover{
	  opacity: 0.7;
		 
	}
}



/* -----閲覧補助 大枠---- */
#header .header-subnav-area .header-subnav-area-inner {
  display: flex;
  align-items: center;
  column-gap: 0 1.25rem;
}

 /* タイトル＋ボタン */
#header .header-subnav-area .header-size, 
#header .header-subnav-area .header-color {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

/*-----閲覧補助 タイトル部分-----*/
#header .header-subnav-area .header-size .title, 
#header .header-subnav-area .header-color .title {
  font-size: 1rem;
  line-height: 1;
  color: #000;
}

/*-----閲覧補助 ボタン部分-----*/
#header .header-subnav-area .header-size button, 
#header .header-subnav-area .header-color dd {
  line-height: 1;
}

#header .header-subnav-area .header-size button, 
#header .header-subnav-area .header-color button {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 0;
  vertical-align: bottom;
  font-weight: 400;
}

/*-----ボタン部分：文字サイズ-----*/
#header .header-subnav-area .header-size {
  column-gap: 0.5625rem;
  margin-right: 1.25rem;
}
#header .header-subnav-area .header-size .normal-on, 
#header .header-subnav-area .header-size .normal-off, 
#header .header-subnav-area .header-size .big-on, 
#header .header-subnav-area .header-size .big-off {
  display: block;
  border-radius: 0.1875rem;
  width: max-content;
  padding: 0.15625rem 0.375rem;
  line-height: 1;
  text-decoration: none;
  font-size: 1.125rem;
  font-family: "YoGo-Medium", "游ゴシック体", "Yu Gothic", YuGothic, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;
}

#header .header-subnav-area .header-size .normal-on.hide, 
#header .header-subnav-area .header-size .normal-off.hide, 
#header .header-subnav-area .header-size .big-on.hide, 
#header .header-subnav-area .header-size .big-off.hide {
  display: none;
}

/* ボタン部分：文字サイズ＿標準 */
#header .header-subnav-area .header-size .normal-on {
  background-color: #fff;
  color: #000;
  border: solid 1px #5e5e5e;
}
/* ボタン部分：文字サイズ＿拡大 */
#header .header-subnav-area .header-size .big-off {
  background-color: #096395;
  color: #fff;
  border: solid 1px #096395;
}
/* ボタン部分：文字サイズ＿標準に戻す */
#header .header-subnav-area .header-size .normal-off {
  background-color: #096395;
  color: #fff;
  border: solid 1px #096395;
}
/* ボタン部分：文字サイズ＿最大状態 */
#header .header-subnav-area .header-size .big-on {
  background-color: #fff;
  color: #000;
  border: solid 1px #5e5e5e;
}

/* ボタン部分：文字サイズ＿ホバーアクション */
@media only screen and (min-width: 769px){
	 /* 「標準」のとき、「標準」ボタンを無効化 */
	 /* 「最大状態」のとき、「拡大」ボタンを無効化 */
	html[data-fontsize="default"] .header-size .scsize[data-fontsize="default"],
	html[data-fontsize="up3"] .header-size .scsize[data-fontsize="up3"] {
	    pointer-events: none;
		cursor: default;
	}
	
	#header .header-subnav-area .header-size .big-off:hover, 
	#header .header-subnav-area .header-size .normal-off:hover	 {
	 text-decoration: underline;
	}	
}

/* ボタン部分：文字サイズ＿フォーカスインジケータ */
#header .header-subnav-area .header-size button:focus-visible .big-off,
#header .header-subnav-area .header-size button:focus-visible .normal-off {
  text-decoration: underline;
}


/* -----ボタン部分：背景色変更----- */
#header .header-subnav-area .header-color dd a {
  font-size: 1.125rem;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;	  
}
#header .header-subnav-area .header-color dd a:hover {
  opacity: 0.85;
}
#header .header-subnav-area .header-color dd a span {
  background-color: inherit !important;
  color: inherit !important;
}


/* ボタン部分：背景色変更_黒 */	
#header .header-subnav-area .header-color .item a {
  background-color: #000;
  color: #fff;
  border: solid 1px #000;
  padding: 0.15625rem 0.9375rem;
}	
/* ボタン部分：背景色変更_青 */	
#header .header-subnav-area .header-color .item2 a {
  background-color: #096395;
  color: #fff;
  border: solid 1px #096395;
  padding: 0.79375rem;
}	
/* ボタン部分：背景色変更_標準 */
#header .header-subnav-area .header-color .item3 a {
  background-color: #fff;
  color: #000;
  border: solid 1px #5e5e5e;
  padding: 0.15625rem 0.375rem;
  width: max-content;
}

/* -----ボタン部分：背景色変更_フォーカスインジケータ----- */
.header-color .item a:focus-visible {
  border: 4px solid #fff;
}
#header .header-subnav-area .header-color .item2 a {
  background-color: #096395;
  color: #fff !important;
}
#header .header-subnav-area .header-color .item2 a:focus-visible {
  border: 4px solid #fff;
}
#header .header-subnav-area .header-color .item3 a:focus-visible {
  border: 4px solid #fff;
}

/*================================
★グローバルメニュー（PC）
================================*/
#header-nav {
    background-color: #FFFCF6;
    border-bottom: solid 2px #96B467;
    display: block;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

#header-nav .in ul.list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#header-nav .in ul.list li.nav {
    display: block;
    width: 24.99999%;
    text-align: center;
    border-right: solid 2px #96B467;
    box-sizing: border-box;
}

#header-nav .in ul.list li.nav:nth-child(1){
	border-left:  solid 2px #96B467;
}

#header-nav .in ul.list li.nav a {
	font-size: 1.125rem;
	font-weight: 700;
    text-align: center;
    display: block;
    color: #543F32;
    text-decoration: none;
    box-sizing: border-box;
    transition: .3s;
    position: relative;
    padding-top: 70px;
	line-height: 3;
}

#header-nav .in ul.list li.nav6 > a{
	line-height: 1.5;
}

#header-nav .in ul.list li.nav a::before{
	display: block;
    position: absolute;
    content: "";
	top: 10px;
    left: 0;
    right: 0;
    height: 60px;
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#header-nav .in ul.list li.nav1 > a::before{
	background-image: url("../img_common/nav-icon01.png");
}
#header-nav .in ul.list li.nav2 > a::before{
	background-image: url("../img_common/nav-icon02.png");
}
#header-nav .in ul.list li.nav3 > a::before{
	background-image: url("../img_common/nav-icon03.png");
}
#header-nav .in ul.list li.nav4 > a::before{
	background-image: url("../img_common/nav-icon04.png");
}
#header-nav .in ul.list li.nav5 > a::before{
	background-image: url("../img_common/nav-icon05.png");
}
#header-nav .in ul.list li.nav6 > a::before{
	background-image: url("../img_common/nav-icon06.png");
}

@media only screen and (min-width: 769px){
	#header-nav .in ul.list li.nav a:hover{
		color: #fff;
		background-color: #543F32;
	}
}


/* フォーカスインジケータ  */
#header-nav .in ul.list li.nav a:focus-visible {
	outline: none;
	border: 2px solid #fff;
	color: #fff;
	background-color: #543F32;
}	

/*================================
★ヘッダー（SP）
================================*/
@media screen and (max-width: 768px) {
/*-----全体-----*/
  #sp-header {
    position: relative;
    width: 100vw;
	height: 100px; /* ヘッダー高さ固定のため、あえてpx指定 */
    padding: 0 15px;
	background-color: #FFFCF6;
	  border-top: solid 10px #BFDEAE;
	border-bottom: solid 0.125rem #BFDEAE;
  }
	

/*-----ロゴ-----*/
  #sp-header-logo img {
    width: 280px;
	height: auto;
	padding: 28px 0; /* ヘッダー高さ固定のため、あえてpx指定 */
  }
/*-----ハンバーガーメニューopenボタン-----*/
  .menu-btn-menu {
    position: absolute;
    right: 15px; /* ヘッダー高さ固定のため、あえてpx指定 */
    top: 20px; /* ヘッダー高さ固定のため、あえてpx指定 */
    width: 50px; /* ヘッダー高さ固定のため、あえてpx指定 */
    height: 50px; /* ヘッダー高さ固定のため、あえてpx指定 */
    cursor: pointer;
  }
  .menu-btn-menu img {
    width: 100%;
    height: auto;
	  
  }
/*-----ハンバーガーメニューcloseボタン-----*/
  .modal-menu-close {
    position: absolute;
    right: 15px; /* ヘッダー高さ固定のため、あえてpx指定 */
    top: 20px; /* ヘッダー高さ固定のため、あえてpx指定 */
    width: 50px; /* ヘッダー高さ固定のため、あえてpx指定 */
    height: 50px; /* ヘッダー高さ固定のため、あえてpx指定 */
    cursor: pointer;
  }
  .modal-menu-close img {
    width: 100%;
    height: auto;
  }
/*-----ハンバーガーメニュー背景-----*/
  #sp-header .modal-menu-bg {
    width: 100%;
	height: 48.75rem;
    position: absolute;
    top: 90px; /*固定値のため、あえてpx指定*/
    left: 0;
    right: 0;
    z-index: 998;
    background-color: rgba(28, 28, 28, 0.95);
	display: none;

  }
/*-----ハンバーガーメニュー中身全体-----*/
  .modal-menu {
    display: none;
    position: absolute;
    z-index: 998;
    width: 100%;
    top: 100px; /*固定値のため、あえてpx指定*/
    left: 50%;
    transform: translateX(-50%);
  }
/*-----グローバルメニュー-----*/
  #sp-header .modal-menu .in {
    padding-top: 60px; /*固定値のため、あえてpx指定*/
  }
  #sp-header .modal-menu .in ul.list li.nav {
    text-align: center;
	  letter-spacing: .2em;
  }
  #sp-header .modal-menu .in ul.list li.nav a {
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
  }

 /*----- SNS -----*/
    #sp-header .modal-menu ul.link_sns {
      display: flex;
      justify-content: center;
      column-gap: 1.875rem;
      margin-top: 0.9375rem;
	  padding-bottom: 60px;
    }
	
    #sp-header .modal-menu ul.link_sns li a img{
      width: 1.875rem;
      height: auto;
    }

	
/*-----閲覧補助 大枠-----*/
  #sp-header .modal-menu .support-block {
    background-color: #fff;
    margin-left: 0.9375rem;
    margin-right: 0.9375rem;
    padding: 1.875rem 1.25rem;
  }
	html[data-fontsize=up2] #sp-header .modal-menu .support-block,
	html[data-fontsize=up3] #sp-header .modal-menu .support-block{
    margin-left: 0.3125rem;
    margin-right: 0.3125rem;		
	}
	
	
  /* タイトル＋ボタン */
  #sp-header .modal-menu .support-block .header-size, 
  #sp-header .modal-menu .support-block .header-color {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
	
	
/*-----閲覧補助 タイトル部分-----*/
  #sp-header .modal-menu .support-block .title {
    margin-right: 0.625rem;
    line-height: 1;
    color: #000;
  }
  html[data-fontsize=up2] #sp-header .modal-menu .support-block .title,
  html[data-fontsize=up3] #sp-header .modal-menu .support-block .title{
    line-height: 2;
  }	
	
	
/*-----閲覧補助 ボタン部分-----*/
  #sp-header .modal-menu .support-block .subnav-button{
	display: flex;
    justify-content: space-between;
    align-items: center;
	column-gap: 1.25rem;
  }

  #sp-header .modal-menu .support-block .header-size button, 
  #sp-header .modal-menu .support-block .header-color dd {
    line-height: 1;
  }

  #sp-header .modal-menu .support-block .header-size button, 
  #sp-header .modal-menu .support-block .header-color button {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    padding: 0;
    vertical-align: bottom;
    font-weight: 400;
    border-radius: 0.1875rem;
  }

/*-----ボタン部分：文字サイズ-----*/
  #sp-header .modal-menu .support-block .header-size {
    column-gap: 0.625rem;
    margin-bottom: 1.875rem;
  }
  #sp-header .modal-menu .support-block .header-size .normal-on, 
  #sp-header .modal-menu .support-block .header-size .normal-off, 
  #sp-header .modal-menu .support-block .header-size .big-on, 
  #sp-header .modal-menu .support-block .header-size .big-off {
    border-radius: 0.1875rem;
    border: 1px solid #fff;
    display: block;
  }
  #sp-header .modal-menu .support-block .header-size .normal-on.hide, 
  #sp-header .modal-menu .support-block .header-size .normal-off.hide, 
  #sp-header .modal-menu .support-block .header-size .big-on.hide, 
  #sp-header .modal-menu .support-block .header-size .big-off.hide {
    display: none;
  }
  #sp-header .modal-menu .support-block .header-size .normal-on span, 
  #sp-header .modal-menu .support-block .header-size .normal-off span, 
  #sp-header .modal-menu .support-block .header-size .big-on span, 
  #sp-header .modal-menu .support-block .header-size .big-off span {
    display: block;
    padding: 1rem 0.5rem;
    border-radius: 0.1875rem;
    text-decoration: none;
    font-size: 1.125rem;
	font-family: "YoGo-Medium", "游ゴシック体", "Yu Gothic", YuGothic, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;
  }
  #sp-header .modal-menu .support-block .header-size .normal-on span:hover, 
  #sp-header .modal-menu .support-block .header-size .normal-off span:hover, 
  #sp-header .modal-menu .support-block .header-size .big-on span:hover, 
  #sp-header .modal-menu .support-block .header-size .big-off span:hover {
    opacity: 0.85;
  }
  #sp-header .modal-menu .support-block .header-size .normal-on span span, 
  #sp-header .modal-menu .support-block .header-size .normal-off span span, 
  #sp-header .modal-menu .support-block .header-size .big-on span span, 
  #sp-header .modal-menu .support-block .header-size .big-off span span {
    background-color: inherit !important;
    color: inherit !important;
  }
  /* ボタン部分：文字サイズ標準 */
  #sp-header .modal-menu .support-block .header-size .normal-on {
    background-color: #fff;
    color: #000;
    border: solid 1px #5e5e5e;
  }
  /* ボタン部分：文字サイズ拡大 */
  #sp-header .modal-menu .support-block .header-size .big-off {
    background-color: #096395;
    color: #fff;
  }
  /* ボタン部分：文字サイズ標準に戻す */
  #sp-header .modal-menu .support-block .header-size .normal-off {
    background-color: #096395;
    border-color: #096395;
    color: #fff;
  }
  /* ボタン部分：文字サイズ最大状態 */
  #sp-header .modal-menu .support-block .header-size .big-on {
    background-color: #fff;
    color: #000;
    border: solid 1px #5e5e5e;
  }
	
  /*-----ボタン部分：背景色-----*/
  #sp-header .modal-menu .support-block .header-color dd a {
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
	font-size: 1.125rem;
    font-weight: 400;
  }
  #sp-header .modal-menu .support-block .header-color dd a:hover {
    opacity: 0.85;
  }
  #sp-header .modal-menu .support-block .header-color dd a span {
    background-color: inherit !important;
    color: inherit !important;
  }
  /* ボタン部分：背景色 黒 */
  #sp-header .modal-menu .support-block .header-color .item a {
    background-color: #000 !important;
    color: #fff !important;
	padding: 1.0625rem;
	border: solid 1px #000;
  }
  /* ボタン部分：背景色 青 */
  #sp-header .modal-menu .support-block .header-color .item2 a {
    background-color: #096395;
    color: #fff !important;
	padding: 1.0625rem;
  }
  /* ボタン部分：背景色 標準 */
  #sp-header .modal-menu .support-block .header-color .item3 a {
    background-color: #fff;
    color: #000;
    border: solid 1px #5e5e5e;
	padding: 1rem 0.5rem;
  }
}

/*==================================
//新着タグ
==================================*/
/* タグ：共通設定 */
.tags {
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 5px;
  line-height: 1;
}

/* タグ：お知らせ */
.tags .tag1 {
    background-color: #D8EBCE;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
}
/* タグ：イベント */
.tags .tag2 {
    background-color: #FFFBC7;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
}
/* タグ：こども */
.tags .tag3 {
    background-color: #F9D0C3;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
}

/* タグ：大人 */
.tags .tag4 {
    background-color: #D4ECEA;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
}

/* タグ：重要 */
.tags .tag5 {
  color: #d70035;
  background-color: #fff;
  border: 2px solid #d70035;
  padding: 5px;
  border-radius: 5px;
  margin-right: 5px;  
}

/* タグ：NEW */
.pageRecent{
	color: #d70035;
	padding-left: 0.3125rem;
}


/*==================================
//メインビジュアル
==================================*/
.mv-area img{
	width: 100%;
	height: auto;
}

.mv-area .tags{
	margin-top: 0.625rem;
}

.mv-box{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  margin-top: 30px;
}

.mv-items{
	display: flex;
	column-gap: 15px;
	margin-bottom: 30px;
}

.mv-image {
    width: 43%;
}

.mv-info{
	margin-top: 10px;
	display: flex;
    flex-direction: column;
    align-items: self-start;
    row-gap: 10px;
}

.mv-items a{
	color: #543F32;
    font-weight: 700; 
}

@media only screen and (max-width: 599px) {
    .mv-box{
      display: block;
    }
}



/*==================================
//main
==================================*/
main {
  margin-top: 6.25rem;
  margin-bottom: 7.5rem;
}

/*==================================
//お知らせ
==================================*/
section.news {
  flex: 1;
  padding: 0rem 0.9375rem;
}
@media only screen and (max-width: 768px) {
  section.news {
    background: none;
    margin-top: 6.25rem;
  }
}

/* 記事部分：共通設定 */
section.news .box-in{
	 box-sizing: border-box;
	width: 100%;
	background-color: #fff;
	padding: 1.25rem;
	position: relative;
}

@media only screen and (min-width: 769px){
    section.news .box-in::after{
        position: absolute;
        display: block;
        content: "";
        top: 0;
        right: -0.9375rem;
        max-height: 80.0rem;
        width: 0.0625rem;
        height: 105%;
        background-color: #C9CACA;
    }	
}

@media only screen and (max-width: 768px){
	section.news .in .box .box-inner{
		padding: 30px;
	}
}

section.news .pageListExists ul li{
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  border-bottom: dotted 2px #C9CACA;	
  padding: 0.625rem 0;
}

section.news .pageListExists ul li:nth-child(1){
	padding-top: 0;
}

section.news .pageListExists ul li .date-tags {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.625rem;
}
@media only screen and (max-width: 768px){
    section.news .pageListExists ul li .date-tags {
      display: block;
    }
}

section.news .pageListExists ul li .pageDate {
  font-size: 1rem;
　font-weight: 700;
  line-height: 1;
  margin-right: 0.9375rem;
}



/* 記事リンク */
section.news .pageListExists ul li a{
	color: #543F32;
	font-weight: 700;
	
}

/*-----お知らせ一覧を見るボタン-----*/
section.news .btn_more{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 768px) {
  section.news .pageListExists ul li {
    margin-bottom: 1.875rem;
  }
  section.news .pageListExists ul li .date {
    display: block;
  }
  section.news .pageListExists ul li .pageDate {
    margin-bottom: 0.625rem;
  }
 section.news .pageListExists ul li .pageDate,
 section.news .pageListExists ul li a{
	font-size: 1.125rem;
	
 }
section.news .pageListExists ul li .tags{
    font-size: 1rem;
}
  section.news .btn_more {
    width: 100%;
  }
}



/*==================================
//かんたん検索
==================================*/
section.searchLib {
  flex: 1;
  margin-right: 0;
  padding-right: 0.9375rem;
}

/*-----見出し-----*/
@media only screen and (min-width: 769px){
    section.searchLib h2.h_top2{
      width: 20rem;
    }	
}


html[data-fontsize=up3] section.searchLib h2.h_top2{
	width: 17rem;
}

/*-----検索ボックス-----*/
.searchAreatop form.form {
  display: block;
  box-sizing: border-box;
}
.searchAreatop form.form input.searchtext {
  font-size: 14px; /* 固定値 */
  color: #000;
  padding: 15px 20px; /* 固定値 */
  border: 1px solid #543F32;
  border-radius: 0.25rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.searchAreatop form.form input.btn_search {
  padding: 0.5625rem 0;
  border: 1px solid #543F32;
  border-radius: 0.4375rem;
  background-color: #FFFBC7;
  color: #543F32;
  display: block;
  width: 100%;
  font-size: 1.125rem;
  text-align: center;
  transition: background-color 0.3s ease;
  font-weight: bold;
  box-sizing: border-box;
  cursor: pointer;
}
@media only screen and (min-width: 769px) {
  .searchAreatop form.form input.btn_search:hover {
    background-color: #CFE7BA;;
    color: #543F32;
  }
}

/*-----4つボタン-----*/
@media only screen and (max-width: 768px) {
  section.searchLib .btn_more a {
    font-size: 1.125rem;
  }
}

/*----- フォーカスインジケータ -----*/
  .searchAreatop form.form input.btn_search:focus-visible {
    background-color: #CFE7BA;
  }

/*==================================
//本日の開館状況
==================================*/
section.opening_status{
	background-color: #fff;
	border: 0.0625rem solid #543F32;
	border-radius: 0.3125rem;
}

section.opening_status .today-box {    
    border-radius: 0.625rem 0.625rem 0 0;
	
}

@media only screen and (max-width: 768px) {
    .section.opening_status .today-box {
        margin-bottom: 1.25rem;
    }
	.section.opening_status .today-box:nth-last-child(1){
		margin-bottom:0;
	}
}



/*-----見出し（図書館カレンダーと共通）-----*/
.today-box h3 {
  padding: 1.375rem 0;
  border: 1px solid #6C3524;
  border-radius: 0.625rem 0.625rem 0 0;
}
.today-box h3.yamada{
	background-color: #E8F48C;
}
.today-box h3.inatsuki{
	background-color: #FFFBC7;
}

.today-box h3.kaho{
	background-color: #F9D2D4;
}
.today-box h3.usui{
	background-color: #DDEEFF;
}


@media only screen and (max-width: 768px) {
  .today-box h3 {
    font-size: 1.125rem;
    line-height: 1;
    padding: 0.9871875rem 0;
  }
}



/*-----開館状況欄-----*/
section.opening_status ul.today {
  padding: 1.5rem 0;
  background-color: #fff;
  border: 1px solid #6C3524;
  border-top:none;
}
section.opening_status ul.today li {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.3125rem;
  font-size: 1.5rem;
  font-weight: 600;
}
section.opening_status ul.today li img {
  width: 1.875rem;
  height: auto;
}
@media only screen and (max-width: 768px) {
  section.opening_status ul.today {
    flex: 1;
    padding: 0.3125rem 0;
  }
  section.opening_status ul.today li {
    font-size: 1.375rem;
  }
}

/*----- 開館時間テキスト（図書館カレンダーと共通） -----*/
p.today-text {
    font-weight: 700;
    position: relative;
    padding-left: 2.0em;
	margin-top: 1.875rem;
}
p.today-text::before {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #D8EBCE;
    top: 0.3em;
    left: 0.1em;
}

/*==================================
//図書館カレンダー
==================================*/
section.calendar{
	background-color: #fff;
	border: 0.0625rem solid #543F32;
	border-radius: 0.3125rem;
}

/*----- 「カレンダーを見る」枠 -----*/
section.calendar .link-box{
  text-align: center;
  background-color: #fff;
  border: 1px solid #6C3524;
  border-top:none;
  position: relative;
  display: block;
  
}

/*----- 「カレンダーを見る」テキスト -----*/
section.calendar a.link-text {
  font-size: 1.125rem;
  font-weight: 700;
  /* text-decoration: none; */
  color: #543F32;
  position: relative;
  display: block;
  padding: 1.5rem 0;
  z-index: 0;
transition: .3s cubic-bezier(0.5, 1, 0.89, 1);
}
@media only screen and (min-width: 769px) {
	section.calendar a.link-text:hover{
		transform: scale(1.1);
	}
}

/*----- 「カレンダーを見る」外部リンクアイコン-----*/
section.calendar a.link-text::after{
  position: absolute;
  display: block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("../img_top/page_link.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  top: 1.5rem;
  right: 15%;
}
/* 拡大時の位置調整 */
html[data-fontsize=up] section.calendar a.link-text::after,
html[data-fontsize=up2] section.calendar a.link-text::after,
html[data-fontsize=up3] section.calendar a.link-text::after{
  top: 0;
  right: 1%;
}

/* -----フォーカスインジケータ----- */
section.calendar a.link-text:focus-visible{
	text-decoration: none;
	color: #fff;
    background-color: #543F32;
    outline: none;
}


/*==================================
//イベント一覧バナー
==================================*/
.bn_event{
    position: relative;
    border-radius: 999px;
    background-color: #D8EBCE;
	width: 59.999%;
	box-shadow: 10px 12px 0px 0px rgba(84, 63, 50, 1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;	
}
@media only screen and (max-width: 768px){
	.bn_event{
		width: 90%;
	}
	
}


/*----- クローバー -----*/
.bn_event ::before {
  content: '';
  display: block;
  position: absolute;
  top: -25%;
  left: -3.695%;
  width: 80px;
  height: 80px;
  background-image: url("../img_top/clover.png");
  background-repeat: no-repeat;
	background-size: contain;
}
@media only screen and (max-width: 768px){
    .bn_event ::before {
      top: -20%;
      left: -7%;
      width: 60px;
      height: 60px;
    }
	html[data-fontsize=up] .bn_event ::before,
	html[data-fontsize=up2] .bn_event ::before,
	html[data-fontsize=up3] .bn_event ::before{
	  top: 0;
	}
}
/*----- かまししちゃん（おすわり） -----*/
.bn_event ::after {
  content: '';
  display: block;
  position: absolute;
  top: 0px;
  right: -7.389%;
  width: 160px;
  height: 160px;
  background-image: url("../img_top/kamashishi-chan_osuwari.png");
  background-repeat: no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 768px){
    .bn_event ::after {
        top: 60%;
        right: -10%;
        width: 80px;
        height: 80px;
    }
}

/*----- リンク部分 -----*/
.bn_event a {
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  padding: 2.75rem 0;
  border-radius: 999px;
  position: relative;
  text-decoration: none;
  color: #543F32;
  transition: background-color .3s ease;
  font-size: 2rem;
}


/*----- クリックすると下がる -----*/
@media only screen and (min-width: 769px) {
  .bn_event:hover {
  transform: translateY(12px);
  box-shadow: 0px 0px 0px 0px rgba(84, 63, 50, 1);
  }
}

/* -----フォーカスインジケータ----- */
.bn_event a:focus-visible{
  border-radius: 0;
}

/*==================================
//貸出ベスト
==================================*/
/* -----本体----- */
section.ranking a {
  color: #543F32;
}
section.ranking .rank-box .contentsBox {
  background-color: #fff;
  border: 1px solid #6c3524;
  padding: 40px 20px;
}
section.ranking .rank-box .contentsBox ol.libbest {
  padding: 0 1.25rem;
}

/* -----リスト：●----- */
section.ranking .rank-box .contentsBox ol.libbest-style1 > li {
  position: relative;
  padding-left: 1.3125rem;
  padding-bottom: 1.25rem;
}
section.ranking .rank-box .contentsBox ol.libbest-style1 li::before {
  position: absolute;
  display: block;
  top: 0.46875rem;
  left: 0;
  content: "";
  width: 0.9375rem;
  height: 0.9375rem;
  background-color: #F9D2D4;
  border-radius: 50%;
}

/* -----リスト：数字----- */
section.ranking .rank-box .contentsBox ol.libbest-style2{
	counter-reset: num;
}
section.ranking .rank-box .contentsBox ol.libbest-style2 > li {
  /* counter(num)はスクリーンリーダーで読み上げられない */
  /* アクセシビリティの観点から、順位部分はlist-style: decimal;を使用する */
  list-style: decimal;
  padding-left: 1.25rem;
  padding-bottom: 1.25rem;
  position: relative;
}

section.ranking .rank-box .contentsBox ol.libbest-style2 > li:nth-child(-n+3)::marker {
  /* 1～3位の数字部分を背景と同色にし、視覚的には見えないがスクリーンリーダーでは読まれる状態にする */
  color: #fff; 
}

/* 1～3位のlist-style: decimal;部分と、アイコン＋counter(num)が重なるように配置する */
/* 1位 */
section.ranking .rank-box .contentsBox ol.libbest-style2 > li:first-child::before{
	position: absolute;
    display: block;
    background: url("../img_top/icon_crown01.png");
    background-size: contain;
	background-repeat: no-repeat;
    font-size: 0.875rem;
    font-weight: 900;
    counter-increment: num;
    content: counter(num) "";
    left: -1.625rem;
    bottom: 1.25rem;
    color: #543F32;
    width: 2.1875rem;
    height: 2.1875rem;
    text-align: center;
    box-sizing: border-box;
    line-height: 1;
    padding: 1.125rem 0;
}
/* 2位 */
section.ranking .rank-box .contentsBox ol.libbest-style2 > li:nth-child(2)::before{
	position: absolute;
    display: block;
    background: url("../img_top/icon_crown02.png");
    background-size: contain;
	background-repeat: no-repeat;
    font-size: 0.875rem;
    font-weight: 900;
    counter-increment: num;
    content: counter(num) "";
    left: -1.625rem;
    bottom: 1.25rem;
    color: #543F32;
    width: 2.1875rem;
    height: 2.1875rem;
    text-align: center;
    box-sizing: border-box;
    line-height: 1;
    padding: 1.125rem 0;
}
/* 3位 */
section.ranking .rank-box .contentsBox ol.libbest-style2 > li:nth-child(3)::before{
	position: absolute;
    display: block;
    background: url("../img_top/icon_crown03.png");
    background-size: contain;
	background-repeat: no-repeat;
    font-size: 0.875rem;
    font-weight: 900;
    counter-increment: num;
    content: counter(num) "";
    left: -1.625rem;
    bottom: 1.25rem;
    color: #543F32;
    width: 2.1875rem;
    height: 2.1875rem;
    text-align: center;
    box-sizing: border-box;
    line-height: 1;
    padding: 1.125rem 0;
}





/*==================================
//PICK UP
==================================*/
/* -----本体----- */
section.pickup ul.pu_list {

}
section.pickup ul.pu_list li.pu_item {
  text-align: center;
  box-sizing: border-box;
}
section.pickup ul.pu_list li.pu_item:nth-child(3n) {
  margin-right: 0;
}
section.pickup ul.pu_list li a {
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  color: #543F32;
  border: 1px solid #8D6449;
  border-radius: 0.3125rem;
  padding: 1.25rem 0;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  display: block;
  z-index: 1;
  transition: background-color 0.3s ease;
}

section.pickup ul.pu_list li a::before {
    position: absolute;
    content: "";
    top: 1.0em;
    right: 0.3em;
    background-color: #F9D2D4;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    transition: .3s;
}
section.pickup ul.pu_list li a::after {
    position: absolute;
    content: "";
    top: 1.5em;
    right: 0.9em;
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 0.125rem solid #543F32;
    border-right: 0.125rem solid #543F32;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .3s;
}

html[data-fontsize=up] section.pickup ul.pu_list li a::before,
html[data-fontsize=up] section.pickup ul.pu_list li a::after,
html[data-fontsize=up2] section.pickup ul.pu_list li a::before,
html[data-fontsize=up2] section.pickup ul.pu_list li a::after,
html[data-fontsize=up3] section.pickup ul.pu_list li a::before,
html[data-fontsize=up3] section.pickup ul.pu_list li a::after{
	content: none;
}


@media only screen and (min-width: 769px){
section.pickup ul.pu_list li a:hover::before  {
  right: 0;
}
section.pickup ul.pu_list li a:hover::after {
  right: 0.2em;
}
html[data-fontsize=up2] section.pickup ul.pu_list li a:hover::before{
	 right: 0.375rem;
}
html[data-fontsize=up2] section.pickup ul.pu_list li a:hover::after{
	right: 0.75rem;
}
	
	html[data-fontsize=up3] section.pickup ul.pu_list li a:hover{
		background-color: #D8EBCE;
	}
}



@media only screen and (max-width: 768px) {
  section.pickup ul.pu_list {
    
  }
  section.pickup ul.pu_list li.pu_item {
    width: 100%;
  }
	section.pickup ul.pu_list li a::before{
		content: none;
	}
	section.pickup ul.pu_list li a::after{
		right: 1.25rem;
	}
}


/* -----フォーカスインジケータ----- */
section.pickup ul.pu_list li a:focus-visible{
    background-color: #D8EBCE;
	outline: none;
	border: 3px solid #00118f;
}



/*==================================
//フッターナビ
==================================*/
.footer_nav{
	background-color: #D8EBCE;
    width: 100%;
}

.footer_nav ul.list{
    display: flex;
    justify-content: center;
	align-items: center;
    text-align: center;
    max-width: 73.125rem;
    margin: 0 auto;
}
.footer_nav ul.list li{
	border-right: 1px solid #543F32;
    line-height: 1.2;
	width: 16.66666%;
   	padding: 0.53125rem 0;
}
.footer_nav ul.list li:nth-last-child(1){
	border-right: none;
}

.footer_nav ul.list li a{
	color: #543F32;
	text-decoration: none;
	transition: text-decoration 0.3s ease;
    
}

@media only screen and (min-width: 769px){
	.footer_nav ul.list li a:hover{
		text-decoration: underline;
	}
}

@media only screen and (max-width: 1024px){
	.footer_nav ul.list{
        flex-wrap: wrap;
		padding: 0;
	}
	.footer_nav ul.list li{
        width: 50%;
		border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
		height: 3.4375rem;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.footer_nav ul.list li:nth-child(even){
        border-right: none;
		
	}
}


/*==================================
//フッター
==================================*/
footer {
  position: relative;
  background-color: #FFFCF6;
}

/* -----ロゴ+ページの先頭へPC----- */
footer .inner-pc{
 display: flex;
	justify-content: space-between;
}

/* -----ロゴPC----- */
footer .inner-pc .logo {
	display: block;
    width: 33.125rem;
    height: auto;
	transition: opacity 0.3s ease;
}
footer .inner-pc .logo img{
	width: 100%;
	height: auto;
	object-fit: cover;
	
}
@media only screen and (min-width: 769px){
	footer .inner-pc .logo:hover{
		opacity: 0.7;
	}
}


/* -----ページの先頭へPC----- */
footer .inner-pc #pagetop {
    display: block;
    transition: .3s ease;
	position: relative;
}

footer .inner-pc #pagetop img{
	width: 90px; /* 拡大したくないので固定値 */
	height: 90px; /* 拡大したくないので固定値 */
}

@media only screen and (min-width: 769px){
	footer .inner-pc #pagetop:hover{
		transform: translateY(-10px);
	}
}


/* -----ページの先頭へSP----- */
footer .inner-sp #pagetop {
  position: absolute;
  right: 18.75rem;
  top: 3.125rem;
  transition: .3s ease;
}

footer .inner-sp #pagetop img{
	width: 60px; /* 拡大したくないので固定値 */
	height: 60px; /* 拡大したくないので固定値 */
}

@media only screen and (min-width: 769px){
	footer .inner-sp #pagetop:hover{
		top: 1.0rem;
	}
}


@media screen and (max-width: 768px) {
  footer .inner-sp #pagetop{
    top: 1.25rem;
	right: 0.9375rem;
  }
}

/* -----ロゴSP----- */
footer .inner-sp .logo {
	display: block;
    height: auto;
	transition: opacity 0.3s ease;
	margin-top: 80px;
}
footer .inner-sp .logo img{
	width: 100%;
	height: auto;
	object-fit: cover;	
}


/* ----住所----- */
footer .libInfo {
  width: 100%;
  border-collapse: collapse;
  padding-left: 1.5rem;
}
footer .libInfo address {
  width: 100%;
  font-size: 1.125rem;
}
footer .libInfo address p:not(.subheading) {
  line-height: 2.2;
}
footer .libInfo address .subheading {
  position: relative;
  font-weight: 600;
}

footer .libInfo address .subheading::before {
  position: absolute;
  display: block;
  content: "";
  width: 0.9375rem;
  height: 0.9375rem;
  top: 0.46875rem;
  left: -1.5625rem;
  background-color: #F9D2D4;
  border-radius: 50%;
}

footer .libInfo address a.lib-link{
	color: #543F32;
	transition: opacity 0.3s ease;
}


@media only screen and (max-width: 768px) {
  .footer .libInfo {
    display: block;
    position: relative;
    text-align: left;
  }
  footer .libInfo address.footer_syonai .subheading, footer .libInfo address.footer_yufuin .subheading {
    padding-bottom: 0;
  }
}
/* -----コピーライト----- */
footer .copyright {
  font-size: 0.875rem;
  text-align: center;
  line-height: 2;
  background-color: #BFDEAE;
}
@media only screen and (max-width: 768px) {
  footer .copyright {
    font-size: 0.75rem;
  }
}

/*================================
★工事中ページ
================================*/
.kouji #header{
	border-bottom: solid 2px #96B467;
}

.kouji #sp-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
@media screen and (max-width: 768px) {
    #sp-header-logo img {
        width: 240px;
        height: auto;
        padding: 28px 0;
    }
}
.kouji #sp-header ul.sp-header-sns{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	column-gap: 10px;
}

.kouji #sp-header ul.sp-header-sns img{
	width: 30px;
}

.kouji main{
	margin-top: 3.75rem;
}

.kouji_text p{
 line-height: 2.5;
}

.kouji_image img{
	width: 100%;
}
.kouji_image{
	width: 480px;
	height: auto;
}
@media only screen and (max-width: 768px) {
  .kouji_image{
    width: 70%;
  }
}

.kouji_text address .subheading {
  position: relative;
  font-weight: 600;
}
.kouji_text address .subheading::before {
  position: absolute;
  display: block;
  content: "";
  width: 70%;
  height: 5px;
  bottom: 0;
  left: 0;
  background-color: #F9D2D4;
}

.kouji #footer{
	border-top: solid 2px #96B467;
}

/*==================================
//背景色変更時
==================================*/
html[data-bgcolor=color_black] body, html[data-bgcolor=color_black] p, html[data-bgcolor=color_black] div, html[data-bgcolor=color_black] table, html[data-bgcolor=color_black] h1, html[data-bgcolor=color_black] h2, html[data-bgcolor=color_black] h3, html[data-bgcolor=color_black] h4, html[data-bgcolor=color_black] h5, html[data-bgcolor=color_black] h6, html[data-bgcolor=color_black] ul, html[data-bgcolor=color_black] ol, html[data-bgcolor=color_black] li, html[data-bgcolor=color_black] td, html[data-bgcolor=color_black] th, html[data-bgcolor=color_black] dt, html[data-bgcolor=color_black] dd, html[data-bgcolor=color_black] dl, html[data-bgcolor=color_black] h1, html[data-bgcolor=color_black] h2, html[data-bgcolor=color_black] dt, html[data-bgcolor=color_black] caption, html[data-bgcolor=color_black] section, html[data-bgcolor=color_black] span, html[data-bgcolor=color_black] header, html[data-bgcolor=color_black] footer, html[data-bgcolor=color_black] nav {
  background-color: #000 !important;
  color: #FFFFFF !important;
  background-image: none !important;
}
html[data-bgcolor=color_black] a, html[data-bgcolor=color_black] button {
  background-color: #000 !important;
  color: #FFFF00 !important;
}
html[data-bgcolor=color_black] a:visited {
  color: #f5c77b !important;
}
html[data-bgcolor=color_black] a:hover {
  color: #f5c77b !important;
}
html[data-bgcolor=color_black] h1, html[data-bgcolor=color_black] h2, html[data-bgcolor=color_black] h3, html[data-bgcolor=color_black] h4, html[data-bgcolor=color_black] h5, html[data-bgcolor=color_black] h6 {
  background-image: none !important;
  border: 1px solid #E5D1AF;
}
html[data-bgcolor=color_black] h5 {
  padding: 10px 0px;
}
html[data-bgcolor=color_black] .wysiwyg .text_ {
  color: #ffdbea !important;
}
html[data-bgcolor=color_black] .wysiwyg .text2_ {
  color: #b6e2f3 !important;
}
html[data-bgcolor=color_black] #pdf-download {
  color: #333 !important;
}
html[data-bgcolor=color_black] #header-logo img, html[data-bgcolor=color_black] #sp-header-logo img,
html[data-bgcolor=color_black] #header-subnav .list li a,
html[data-bgcolor=color_black] #header-size .title img,
html[data-bgcolor=color_black] #header-color .title img,
html[data-bgcolor=color_black] header .header-subnav-in li img,
html[data-bgcolor=color_black] #footer-logo img,
html[data-bgcolor=color_black] #footer-character img {
  background-color: #fff !important;
}
html[data-bgcolor=color_black] header .header-in #header-nav .list .dropmenu {
  border: 1px solid #fff;
}
html[data-bgcolor=color_black] .side-nav-list {
  background-color: transparent !important;
}
html[data-bgcolor=color_black] .side-nav-list li span {
  background-color: transparent !important;
}

html[data-bgcolor=color_black] h2.h_top2::after,
html[data-bgcolor=color_black] h2.h_top3::after{
	content: none;
}

html[data-bgcolor=color_black] .bn_event{
	border: 1px solid #FFF !important;
	box-shadow: 10px 12px 0px 0px rgb(255 255 255) !important;
}

html[data-bgcolor=color_black] #keyword-area {
  background: transparent !important;
}
html[data-bgcolor=color_black] .toiawase .title, html[data-bgcolor=color_black] .toiawase .in {
  border: 1px solid #fff;
}
html[data-bgcolor=color_black] .toiawase .in {
  border-top: none;
}
html[data-bgcolor=color_black] #sp-header .modal-menu .sp-nav .title button.plus::after,
html[data-bgcolor=color_black] #sp-header .modal-menu .sp-nav .title button.mynus::after {
  background-color: #fff !important;
}
html[data-bgcolor=color_black] .gsst_a .gscb_a {
  color: inherit !important;
}
html[data-bgcolor=color_black] .faq-answer-area {
  background-image: url(../img_sub/v3.2/h2_faq_title_icon.png) !important;
  background-color: #fff !important;
}
html[data-bgcolor=color_black] .faq-block .faq-q-title::after {
  background-color: #fff !important;
}
html[data-bgcolor=color_black] .faq-block .faq-answer-area {
  background-image: none !important;
  background-color: inherit !important;
}
html[data-bgcolor=color_black] #pankuzu .in {
  background-image: url(../img_sub/v3.2/pankuzu_icon.png) !important;
  background-color: #fff !important;
}
html[data-bgcolor=color_black] #ashiato .in {
  background-image: url(../img_sub/v3.2/ashiato_icon.png) !important;
  background-color: #fff !important;
}
html[data-bgcolor=color_black] .anchor ul li a::after, html[data-bgcolor=color_black] .detail a::after, html[data-bgcolor=color_black] .page a::after, html[data-bgcolor=color_black] .dir a::after,
html[data-bgcolor=color_black] .link-item .icon1::after, html[data-bgcolor=color_black] .link-item .icon2::after,
html[data-bgcolor=color_black] #side-nav .side-nav-list li a::after, html[data-bgcolor=color_black] #side-nav .side-ranking li a::after {
  background-color: #fff !important;
}
html[data-bgcolor=color_black] .page a, html[data-bgcolor=color_black] .dir a, html[data-bgcolor=color_black] .table td, html[data-bgcolor=color_black] .table th {
  border-color: #fff !important;
}
html[data-bgcolor=color_black] .toiawase .mail a {
  border: 1px solid #fff !important;
}
html[data-bgcolor=color_black] .toiawase .mail a::after {
  background-color: #fff !important;
}
html[data-bgcolor=color_black] #side-nav .side-nav-list {
  border-color: #fff !important;
}
html[data-bgcolor=color_black] .attend-container {
  border-color: #fff !important;
}
html[data-bgcolor=color_black] .attend-container .attend-list li a::before {
  background-color: #fff !important;
}
html[data-bgcolor=color_black] .simple-enquete form input[type=radio] {
  border-color: #fff;
}
html[data-bgcolor=color_black] .simple-enquete form input[type=radio]:checked:before {
  background: #fff;
}
html[data-bgcolor=color_black] .simple-enquete form .item::after {
  background-color: #fff !important;
}
html[data-bgcolor=color_black] .simple-enquete form input[type=submit] {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #fff;
}
html[data-bgcolor=color_black] .event-search-area .box2 label::after, html[data-bgcolor=color_black] .event-search-area .event-search-term label::after, html[data-bgcolor=color_black] .recruit-event-search-area .box2 label::after, html[data-bgcolor=color_black] .recruit-event-search-area .event-search-term label::after {
  border-right: 2px solid #000 !important;
  border-bottom: 2px solid #000 !important;
}
html[data-bgcolor=color_black] .event-search-area .box2 input[type=checkbox]:checked + label::before, html[data-bgcolor=color_black] .event-search-area .event-search-term input[type=checkbox]:checked + label::before, html[data-bgcolor=color_black] .recruit-event-search-area .box2 input[type=checkbox]:checked + label::before, html[data-bgcolor=color_black] .recruit-event-search-area .event-search-term input[type=checkbox]:checked + label::before {
  background: #fff !important;
  border: 1px solid #231815;
}
html[data-bgcolor=color_black] .event-search-area .box2 input[type=checkbox]:checked + label::after, html[data-bgcolor=color_black] .event-search-area .event-search-term input[type=checkbox]:checked + label::after, html[data-bgcolor=color_black] .recruit-event-search-area .box2 input[type=checkbox]:checked + label::after, html[data-bgcolor=color_black] .recruit-event-search-area .event-search-term input[type=checkbox]:checked + label::after {
  opacity: 1;
  background: #fff !important;
}
html[data-bgcolor=color_black] div[class*=-ttl] .ttl-parts {
  -webkit-text-fill-color: #fff !important;
}
html[data-bgcolor=color_black] .splide .splide__pagination__page {
  background-color: transparent !important;
}

html[data-bgcolor=color_black] .mv-items,
html[data-bgcolor=color_black] .splide .splide__pagination li, html[data-bgcolor=color_black] .btn-parts a, html[data-bgcolor=color_black] .modal-support,
html[data-bgcolor=color_black] #header-nav .list > li .dropmenu, html[data-bgcolor=color_black] #header-nav .list > li .dropmenu .list2 > li a,
html[data-bgcolor=color_black] .sec-search .useful-list .list .item-in, html[data-bgcolor=color_black] .sec-search .life-list .list .item-in,
html[data-bgcolor=color_black] .sec-introduction .introduction-list .list .item-in,
html[data-bgcolor=color_black] #sp-header .modal-search-sp .in .life-list, html[data-bgcolor=color_black] .modal-search-sp .life-list .list .item-in,
html[data-bgcolor=color_black] #sp-header .go-to-pc-btn a, html[data-bgcolor=color_black] .menu-btn-close {
  border: 1px solid #fff !important;
}
html[data-bgcolor=color_black] .splide .splide__pagination li::before {
  color: #fff !important;
}
html[data-bgcolor=color_black] #pankuzu li + li a::after, html[data-bgcolor=color_black] #pankuzu li + li span::after,
html[data-bgcolor=color_black] #ashiato li + li a::after, html[data-bgcolor=color_black] #ashiato li + li span::after,
html[data-bgcolor=color_black] .splide .splide__toggle span, html[data-bgcolor=color_black] .item-img img, html[data-bgcolor=color_black] .modal-logo,
html[data-bgcolor=color_black] #sp-header .modal-search-sp .in .life-list button.plus::after,
html[data-bgcolor=color_black] #sp-header .modal-search-sp .in .life-list button.mynus::after {
  background-color: #fff !important;
}

html[data-bgcolor=color_black] .mv-area .tag-bg,
html[data-bgcolor=color_black] .box-news .pageRecent, html[data-bgcolor=color_black] .box-news .tag-bg,
html[data-bgcolor=color_black] #header .header-subnav-area .modal-search .in .modal-close-btn a {
  border: 1px solid #fff;
}
html[data-bgcolor=color_black] #header .header-subnav-area .header-page-number-search #number-search-container .input-wrap button, html[data-bgcolor=color_black] #header .header-subnav-area .header-page-number-search #sp-number-search-container .input-wrap button,
html[data-bgcolor=color_black] .sec-search .serch-box button,
html[data-bgcolor=color_black] .btn-lang-select {
  border-color: #fff !important;
}
html[data-bgcolor=color_black] a img:hover, html[data-bgcolor=color_black] a .item-in, html[data-bgcolor=color_black] .item-nolink img:hover, html[data-bgcolor=color_black] .item-nolink .item-in {
  outline-color: #fff !important;
  border-color: #fff !important;
}
html[data-bgcolor=color_black] a:hover, html[data-bgcolor=color_black] .item-nolink:hover {
  outline-color: #fff !important;
  border-color: #fff !important;
  text-decoration: underline !important;
}
html[data-bgcolor=color_black] a:hover p, html[data-bgcolor=color_black] .item-nolink:hover p {
  text-decoration: underline !important;
}
html[data-bgcolor=color_black] #header-nav .list {
  gap: 4px;
}
html[data-bgcolor=color_black] #header-nav .list li > a span {
  background: transparent !important;
}
html[data-bgcolor=color_black] #header-nav .list .active > a {
  outline: 2px solid #fff;
  outline-offset: -3px;
}
html[data-bgcolor=color_black] .sec-news .col-box .col-left #top-tab .tab-nav .list {
  gap: 4px;
}
html[data-bgcolor=color_black] .header-subnav-area, html[data-bgcolor=color_black] .header-subnav-area-inner {
  background-color: transparent !important;
}
html[data-bgcolor=color_black] .post-list a:hover, html[data-bgcolor=color_black] .box-koho .list a:hover, html[data-bgcolor=color_black] .sec-news .col-box .col-right .splide-wrapper a:hover {
  text-decoration: none !important;
}
html[data-bgcolor=color_black] .faq-block-acd .faq-q-title .plus::before, html[data-bgcolor=color_black] .faq-block-acd .faq-q-title .mynus::before {
  background-color: #fff !important;
}
html[data-bgcolor=color_black] .faq-block-acd .faq-answer-area {
  background-image: url(../img_sub/h2_faq_title_icon.png) !important;
  background-color: #fff !important;
}

html[data-bgcolor=color_black] .footer_nav ul.list li{
	border-color: #fff !important;
}