@charset "UTF-8";
/* =========================================================
   匝瑳市立図書館 トップページ
   設計：FLOCSS
     Foundation … 変数・ベーススタイル（リセットは normalize.css）
     Layout     … l-  ヘッダー / メイン / フッター / コンテナ
     Object
       Component … c-  再利用する小さな部品
       Project   … p-  ページ固有のまとまり
       Utility   … u-  調整用の単機能クラス
   ブレイクポイント：860px（タブレット） / 560px（スマホ）
   ========================================================= */


/* =========================================================
   Foundation
   ========================================================= */
:root {
  --color-green: #7aa52e;
  --color-green-light: #dce9c3;
  --color-green-pale: #f3f8ea;
  --color-yellow: #eab124;
  --color-blue: #2ea7e0;
  --color-orange: #f0941d;
  --color-pink: #f0b8cf;
  --color-pink-light: #f6c4d6;
  --color-open: #a8d17f;
  --color-text: #333;
  --color-gray: #666;
  --color-line: #bbb;
  --container-width: 1000px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-text);
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  /* 薄い横ストライプ背景 */
  background-color: #fff;
  background-image: repeating-linear-gradient(0deg, #fff 0 6px, #f7f7f2 6px 8px);
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
/* 表示サイズはCSSで管理。HTMLのwidth/height属性は縦横比の確保（CLS防止）用 */
img { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }


/* =========================================================
   Layout
   ========================================================= */

/* ---------- l-container ---------- */
.l-container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ---------- l-header ---------- */
.l-header {
  background: #fff;
  border-bottom: 2px solid var(--color-green);
}
.l-header__inner {
  display: flex;
  align-items: center;
  height: 76px;
}
.l-header__logo { line-height: 0; }
.l-header__logo img { width: 250px; }

@media (max-width: 560px) {
  .l-header__inner { height: 64px; }
  .l-header__logo img { width: 210px; }
}

/* ---------- l-main ---------- */
.l-main { padding-bottom: 42px; }

/* ---------- l-content（下層ページの白いボックス） ---------- */
.l-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 40px 40px;
  border: 1px solid var(--color-green);
  background: #fff;
}

@media (max-width: 560px) {
  .l-content { padding: 20px 16px 28px; }
}

/* ---------- l-footer ---------- */
.l-footer {
  background: var(--color-green-light);
  padding: 38px 0 10px;
}
.l-footer__copyright {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
}


/* =========================================================
   Object / Component
   ========================================================= */

/* ---------- c-btn ---------- */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  color: #fff;
  font-size: 13px;
  letter-spacing: .03em;
  transition: filter .2s, transform .2s;
}
.c-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.c-btn__icon { flex: none; width: 22px; height: 22px; object-fit: contain; }
.c-btn--yellow { background: var(--color-yellow); }
.c-btn--blue { background: var(--color-blue); }
.c-btn--green { background: var(--color-green); }
.c-btn--pink { background: var(--color-pink); }
.c-btn--round { border-radius: 6px; font-size: 16px; letter-spacing: .04em; }

/* ---------- c-panel（緑ヘッダー付きの枠） ---------- */
.c-panel {
  border: 1px solid var(--color-green);
  background: #fff;
}
.c-panel__title {
  padding: 4px 0;
  background: var(--color-green);
  color: #fff;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .05em;
}

/* ---------- c-tag ---------- */
.c-tag {
  display: inline-block;
  flex: 0 0 58px;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.c-tag--yokaichiba { background: var(--color-green); }
.c-tag--common { background: var(--color-orange); }
.c-tag--nosaka { background: var(--color-blue); }

/* ---------- c-more（一覧リンク） ---------- */
.c-more {
  padding: 8px 14px 4px;
  text-align: right;
  font-size: 13px;
}
.c-more a:hover { text-decoration: underline; }
.c-more--green a { color: var(--color-green); }
.c-more--small { padding: 6px 22px; font-size: 12px; }

/* ---------- c-heading（見出し） ---------- */
/* 外側の余白は持たせず、使う側（p-）で調整する */
.c-heading-lv1 {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-green);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.c-heading-lv2 {
  padding: 4px 12px;
  border-left: 4px solid var(--color-green);
  background: var(--color-green-pale);
  font-size: 17px;
  font-weight: 500;
}
.c-heading-lv3 {
  position: relative;
  padding: 0 0 4px 16px;
  border-bottom: 1px dashed var(--color-green);
  font-size: 15px;
  font-weight: 700;
}
/* 先頭の丸印 */
.c-heading-lv3::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
}

@media (max-width: 560px) {
  .c-heading-lv1 { font-size: 20px; }
}


/* =========================================================
   Object / Project
   ========================================================= */

/* ---------- p-gnav ---------- */
.p-gnav { background: #fff; }
.p-gnav__list {
  display: flex;
  justify-content: center;
  padding-top: 14px;
  padding-bottom: 12px;
}
.p-gnav__item {
  position: relative;
  flex: 1;
  max-width: 180px;
}
.p-gnav__item + .p-gnav__item::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 2px;
  background: var(--color-green-light);
}
.p-gnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  color: var(--color-gray);
  font-size: 13px;
  transition: color .2s;
}
.p-gnav__icon { width: 48px; height: 40px; object-fit: contain; transition: transform .2s; }
.p-gnav__link:hover { color: var(--color-green); }
.p-gnav__link:hover .p-gnav__icon { transform: translateY(-3px); }

@media (max-width: 560px) {
  .p-gnav__list { padding-left: 6px; padding-right: 6px; }
  .p-gnav__link { font-size: 10px; letter-spacing: -.02em; }
  .p-gnav__icon { width: 36px; height: 30px; }
}

/* ---------- p-top-grid（4エリアのグリッド） ---------- */
.p-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  /* news / calendar は「パネル」「その下」の2行分を使う */
  grid-template-areas:
    "slider search"
    "news   calendar"
    "news   calendar";
  gap: 30px 20px;
  align-items: start;
}
.p-top-grid__slider   { grid-area: slider; min-width: 0; } /* slickの幅計算を崩さないため */
.p-top-grid__search   { grid-area: search; }
.p-top-grid__news     { grid-area: news; }
.p-top-grid__calendar { grid-area: calendar; }
/* 親グリッドの行を共有（subgrid）して、おしらせとカレンダーのパネルの高さを連動させる */
.p-top-grid__news,
.p-top-grid__calendar {
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
}

@media (max-width: 860px) {
  .p-top-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "slider"
      "search"
      "news"
      "calendar";
    row-gap: 24px;
  }
  /* 1列表示では横に並ばないので連動を解除 */
  .p-top-grid__news,
  .p-top-grid__calendar { display: block; }
}

/* ---------- p-slider ---------- */
/* slick初期化前は1枚目だけ表示（読み込み時のちらつき防止） */
.p-slider__list:not(.slick-initialized) .p-slider__item + .p-slider__item { display: none; }
.p-slider__item img {
  width: 100%;
  aspect-ratio: 567 / 289;
  object-fit: cover;
}
/* ドット（slick-theme.css は使わず独自スタイル） */
.p-slider .slick-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}
.p-slider .slick-dots button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d5e4bd;
  font-size: 0;
  cursor: pointer;
}
.p-slider .slick-dots .slick-active button { background: var(--color-green); }

/* ---------- p-search ---------- */
.p-search {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-search__box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 16px;
  border: 2px solid var(--color-green);
  background: #fff;
}
.p-search__label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.p-search__field {
  display: flex;
  border: 1px solid #ccc;
}
.p-search__field:focus-within { border-color: var(--color-green); }
.p-search__input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  font-size: 12px;
  outline: none;
}
.p-search__input::placeholder { color: #999; }
.p-search__submit {
  display: grid;
  place-items: center;
  width: 38px;
  border: 0;
  border-left: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
.p-search__submit img { width: 20px; height: 20px; object-fit: contain; }
.p-search__mypage { margin-left: 8px; }

@media (max-width: 860px) {
  .p-search__mypage { margin-left: 0; }
}

/* ---------- p-news ---------- */
/* 高さが伸びたときは「一覧」リンクを下端に寄せる */
.p-news,
.p-calendar { display: flex; flex-direction: column; }
.p-news .c-more,
.p-calendar .c-more { margin-top: auto; }
.p-news { padding-bottom: 6px; }
.p-news__list { padding: 14px 30px 0; }
.p-news__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
}
.p-news__link {
  flex: 1;
  padding: 5px 0 4px;
  border-bottom: 1px solid var(--color-line);
  font-size: 14px;
}
.p-news__link:hover { color: var(--color-green); }

@media (max-width: 560px) {
  .p-news__list { padding: 12px 14px 0; }
  /* タグをタイトルの上に */
  .p-news__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-line);
  }
  .p-news__item .c-tag { flex: none; padding: 0 10px; }
  .p-news__link {
    width: 100%;
    padding: 0;
    border-bottom: 0;
    font-size: 13px;
  }
}

/* ---------- p-books（新着資料・ランキング） ---------- */
.p-books {
  display: flex;
  gap: 50px;
  margin-top: 24px;
  padding-left: 72px;
}
.p-books__item a { display: block; transition: transform .2s; }
.p-books__item a:hover { transform: translateY(-4px) rotate(-1.5deg); }
.p-books__item img { width: 102px; }

@media (max-width: 860px) {
  .p-books { justify-content: center; gap: 24px; padding-left: 0; }
}
@media (max-width: 560px) {
  .p-books { gap: 10px; }
  .p-books__item img { width: 96px; }
}

/* ---------- p-calendar ---------- */
.p-calendar__body { padding: 10px 12px 0; }
.p-calendar__body img { width: 100%; }

/* ---------- p-hours（開館時間） ---------- */
.p-hours {
  display: flex;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.75;
}
.p-hours__desc {
  display: flex;
  flex-direction: column;
}
.p-hours__desc span + span { padding-left: 1em; white-space: pre; }

/* ---------- p-legend（カレンダー凡例） ---------- */
.p-legend { font-size: 12px; line-height: 1.75; }
.p-legend__item { display: flex; align-items: center; }
.p-legend__item::before { content: "※"; }
.p-legend__mark { width: 10px; height: 10px; margin-right: 2px; }
.p-legend__mark--open { background: var(--color-open); }
.p-legend__mark--closed { background: var(--color-pink-light); }

/* ---------- p-banners ---------- */
.p-banners {
  display: grid;
  grid-template-columns: repeat(3, 260px);
  gap: 22px 20px;
  margin-top: 36px;
  justify-content: center;
}
.p-banners__item a { display: block; transition: transform .2s, opacity .2s; }
.p-banners__item a:hover { transform: translateY(-2px); opacity: .85; }
.p-banners__item img { width: 100%; }

@media (max-width: 860px) {
  .p-banners { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .p-banners { grid-template-columns: 1fr; justify-items: center; }
  .p-banners__item { width: 100%; max-width: 320px; }
}

/* ---------- p-libraries（フッターの館情報） ---------- */
.p-libraries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.p-libraries__item {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.p-libraries__photo {
  flex: 0 0 160px;
  width: 160px;
  aspect-ratio: 160 / 120;
  object-fit: cover;
}
.p-libraries__info {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
}
.p-libraries__name { font-size: 14px; font-weight: 400; }
.p-libraries__more { display: block; text-align: right; }
.p-libraries__more:hover { color: var(--color-green); text-decoration: underline; }

@media (max-width: 860px) {
  .p-libraries { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .p-libraries__item { flex-direction: column; align-items: stretch; }
  .p-libraries__photo { flex-basis: auto; width: 100%; max-width: 260px; }
}


/* ---------- p-breadcrumb（パンくずリスト） ---------- */
.p-breadcrumb {
  padding: 28px 0 20px;
  color: var(--color-gray);
  font-size: 12px;
}
.p-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-breadcrumb__item + .p-breadcrumb__item::before { content: ">"; margin: 0 8px; }
.p-breadcrumb__item a { color: var(--color-green); }
.p-breadcrumb__item a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .p-breadcrumb { padding: 18px 0 14px; }
}

/* ---------- p-news-list（おしらせ一覧） ---------- */
.p-news-list__list { margin-top: 16px; }
.p-news-list__item { border-bottom: 1px solid var(--color-line); }
.p-news-list__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 32px 14px 4px;
  transition: color .2s, background-color .2s;
}
/* 右端の矢印 */
.p-news-list__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--color-green);
  border-right: 2px solid var(--color-green);
  transform: translateY(-50%) rotate(45deg);
}
.p-news-list__link:hover { color: var(--color-green); background: var(--color-green-pale); }
.p-news-list__title { flex: 1; }

@media (max-width: 560px) {
  /* タグをタイトルの上に */
  .p-news-list__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
  }
  .p-news-list__link .c-tag { flex: none; padding: 0 10px; }
}

/* ---------- p-calendar-list（年間カレンダー） ---------- */
/* 幅に応じて 3列 → 2列 → 1列 に自動で切り替え */
.p-calendar-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 24px 20px;
}
.p-calendar-list__body { padding: 10px; }
.p-calendar-list__body img { width: 100%; }

/* ---------- p-article（記事詳細） ---------- */
.p-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.p-article__body { margin-top: 24px; }
.p-article__body > * + * { margin-top: 16px; }
/* 見出しの余白（見出し自体のスタイルは c-heading） */
.p-article__body > .c-heading-lv2 { margin-top: 32px; }
.p-article__body > .c-heading-lv3 { margin-top: 24px; }
.p-article__body > .c-heading-lv2 + .c-heading-lv3 { margin-top: 16px; }
.p-article__table {
  display: grid;
  grid-template-columns: minmax(7em, max-content) 1fr; /* 項目名の長さに合わせて広げる */
  border-top: 1px solid var(--color-line);
}
.p-article__table dt,
.p-article__table dd {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-line);
}
.p-article__table dt { background: var(--color-green-pale); font-weight: 500; }
.p-article__list { padding-left: 1.5em; list-style: disc; }
.p-article__note { color: var(--color-gray); font-size: 13px; }
.p-article__back { max-width: 240px; margin: 40px auto 0; }

@media (max-width: 560px) {
  /* 見出しと内容を縦積みに */
  .p-article__table { grid-template-columns: 1fr; }
  .p-article__table dt { padding: 6px 12px; border-bottom: 0; }
}


/* =========================================================
   Object / Utility
   ========================================================= */
/* 必要に応じて u- クラスを追加 */