@charset "UTF-8";
/**********************************************************************
	広報誌・資料一覧（page-kouhou.php）- className : kh-
***********************************************************************/
.kh {
  --kh-ink: #333;
  --kh-sub: #666;
  --kh-line: #e3e6ea;
  --kh-soft: #f5f5f5;
  --kh-navy: #0d4270;
  --kh-navy-soft: #e8eef5;
  --kh-red: #d9534f;
  --kh-yellow: #f5c400;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--kh-ink);
  font-size: 15px;
  line-height: 1.7;
  padding-bottom: 60px;
}
.kh *, .kh *::before, .kh *::after { box-sizing: border-box; }
.kh img { max-width: 100%; height: auto; display: block; }
.kh ul { list-style: none; margin: 0; padding: 0; }
.kh p { margin: 0; }
.kh-panel[hidden] { display: none !important; }

.kh-lead { color: var(--kh-sub); margin: 0 0 24px !important; }

/* タブ */
.kh-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--kh-navy); margin-bottom: 28px; }
.kh-tab {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--kh-line); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: var(--kh-soft); color: var(--kh-sub);
  font: inherit; font-size: 15px; font-weight: bold; line-height: 1.4;
  padding: 11px 24px; cursor: pointer; white-space: nowrap;
}
.kh-tab[aria-selected="true"] { background: var(--kh-navy); border-color: var(--kh-navy); color: #fff; }
.kh-tab small { font-size: 12px; font-weight: normal; margin-left: 2px; opacity: .85; }
.kh-tab:focus-visible { outline: 3px solid var(--kh-yellow); outline-offset: 1px; }
/* PC：タブを幅いっぱいに均等に広げる */
@media screen and (min-width: 1024px) {
  .kh-tab { flex: 1 1 auto; padding: 11px 12px; }
}

/* シリーズの見出し（季節と生きもの など） */
.kh .kh-series-title {
  font-size: 17px; font-weight: bold; color: var(--kh-navy); background: none; border: 0;
  margin: 6px 0 14px; padding: 0 0 0 12px; border-left: 5px solid var(--kh-navy); line-height: 1.4;
}
.kh .kh-grid + .kh-series-title { margin-top: 30px; }

/* 2段目のタブ（小学校・中学校の中の教科）：大きめのボタンで、薄い帯の上に並べる */
.kh-subtabs { display: flex; flex-wrap: wrap; gap: 10px; margin: -10px 0 28px; padding: 12px; background: #f1f5fa; border-radius: 10px; }
.kh-subtab {
  appearance: none; -webkit-appearance: none;
  min-width: 140px; border: 2px solid #c7d2df; border-radius: 8px; background: #fff; color: var(--kh-navy);
  font: inherit; font-size: 17px; font-weight: bold; line-height: 1.4; letter-spacing: .05em;
  padding: 11px 30px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 0 #c7d2df; transition: background .15s, border-color .15s, color .15s;
}
.kh-subtab:hover { border-color: var(--kh-navy); }
.kh-subtab[aria-selected="true"] { border-color: var(--kh-navy); background: var(--kh-navy); color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.kh-subtab small { font-size: 12px; font-weight: normal; margin-left: 2px; opacity: .85; letter-spacing: 0; }
.kh-subtab:focus-visible { outline: 3px solid var(--kh-yellow); outline-offset: 2px; }
@media screen and (max-width: 767px) {
  .kh-subtabs { gap: 8px; padding: 10px; }
  .kh-subtab { flex: 1 1 0; min-width: 0; font-size: 15px; padding: 10px 6px; }
}
.kh-subpanel[hidden] { display: none !important; }

/* ボタン */
.kh-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.kh a.kh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid transparent; border-radius: 999px;
  padding: 8px 20px; font-size: 14px; font-weight: bold; line-height: 1.2;
  text-decoration: none; transition: opacity .15s;
}
.kh a.kh-btn:hover { opacity: .85; text-decoration: none; }
.kh a.kh-btn-pdf { background: var(--kh-red); color: #fff; }
.kh a.kh-btn-db { background: #fff; color: var(--kh-navy); border-color: var(--kh-navy); }
.kh a.kh-btn-sm { flex: 1 1 auto; padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }

/* 最新号 */
.kh-feature {
  display: grid; grid-template-columns: 260px 1fr; gap: 32px;
  background: var(--kh-soft); border-radius: 10px; padding: 28px; margin-bottom: 44px;
}
.kh-feature-cover img { width: 100%; background: #fff; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.kh-badge { display: inline-block; background: var(--kh-yellow); color: #333; font-size: 12px; font-weight: bold; padding: 2px 12px; border-radius: 999px; }
.kh .kh-feature-title { font-size: 24px; font-weight: bold; line-height: 1.4; margin: 6px 0 6px; padding: 0; background: none; border: 0; }
.kh-feature-title small { font-size: 14px; font-weight: normal; color: var(--kh-sub); margin-left: 10px; }
.kh .kh-feature-desc { color: var(--kh-sub); margin-bottom: 16px; }
.kh .kh-toc-title { font-size: 13px; font-weight: bold; color: var(--kh-navy); margin: 22px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--kh-line); }
.kh .kh-toc { columns: 2; column-gap: 28px; font-size: 13.5px; }
.kh-toc li { break-inside: avoid; display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dotted #d6d9de; }
.kh-toc li span { flex: 1; }
.kh-toc li small { display: block; font-size: 12.5px; color: var(--kh-sub); }
.kh-toc li b { font-weight: normal; color: var(--kh-sub); min-width: 2em; text-align: right; }

/* 一覧 */
.kh .kh-sec-title { font-size: 18px; font-weight: bold; margin: 0 0 16px; padding: 0; background: none; border: 0; }
.kh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; } /* PCは1行4冊 */
.kh-card { display: flex; flex-direction: column; }
/* 同じ行のカードで「表紙・号数・題名・ボタン・目次」の段をそろえる。
   目次を開いても伸びるのは目次の段だけで、隣のカードのボタンは動かない */
@supports (grid-template-rows: subgrid) {
  .kh-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  .kh-card .kh-card-toc { align-self: start; }
}
@supports not (grid-template-rows: subgrid) {
  .kh-grid { align-items: start; }
}
.kh-card-thumb {
  display: block; aspect-ratio: 182 / 257; overflow: hidden;
  background: var(--kh-soft); border: 1px solid var(--kh-line); border-radius: 3px;
  transition: transform .15s, box-shadow .15s;
}
.kh .kh-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 用紙サイズが小さい資料（B5など）は表紙も小さく表示する */
.kh .kh-card-thumb[style*='--kh-thumb-scale'] { display: flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; }
.kh .kh-card-thumb[style*='--kh-thumb-scale'] img { width: calc(100% * var(--kh-thumb-scale)); height: calc(100% * var(--kh-thumb-scale)); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.kh .kh-card-thumb--wide { display: flex; align-items: center; background: #eef1f5; }
.kh .kh-card-thumb--wide img { height: auto; object-fit: contain; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
a.kh-card-thumb:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,.15); }
.kh .kh-card-label { font-size: 12px; color: var(--kh-sub); margin-top: 10px; }
.kh .kh-card-title { font-size: 15px; font-weight: bold; line-height: 1.4; margin: 0 0 10px; padding: 0; background: none; border: 0; }
.kh-card .kh-btns { align-self: start; }
.kh-card-toc { margin-top: 8px; font-size: 12.5px; }
.kh-card-toc summary { cursor: pointer; color: var(--kh-navy); }
.kh .kh-card-toc ul { list-style: disc; padding-left: 1.2em; margin-top: 6px; color: var(--kh-sub); }

/* 表紙の拡大 */
.kh-zoom { display: block; position: relative; cursor: zoom-in; }
.kh-zoom::after {
  content: ""; position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(13,66,112,.85) no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  opacity: .9; transition: opacity .15s;
}
.kh-zoom:hover::after { opacity: 1; }
.kh-lightbox {
  position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out;
}
.kh-lightbox[hidden] { display: none !important; }
.kh-lightbox figure { margin: 0; text-align: center; }
.kh-lightbox img { max-width: min(90vw, 600px); max-height: calc(100vh - 90px); width: auto; height: auto; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: default; }
.kh-lightbox figcaption { color: #fff; font-size: 14px; margin-top: 10px; }
.kh-lightbox-close {
  position: absolute; top: 12px; right: 16px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff;
  font-size: 28px; line-height: 44px; cursor: pointer;
}
.kh-lightbox-close:hover { background: rgba(255,255,255,.3); }
html.kh-lightbox-open { overflow: hidden; }

/* 準備中 */
.kh-preparing { border: 2px dashed var(--kh-line); border-radius: 10px; background: var(--kh-soft); text-align: center; padding: 56px 20px; color: var(--kh-sub); }
.kh .kh-preparing-title { font-size: 18px; font-weight: bold; color: var(--kh-navy); margin-bottom: 8px; }

/* タブレット縦（768〜1023px）：タブが1列に入りきらないので4列で折り返す */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .kh-tabs { flex-wrap: wrap; gap: 6px; padding-bottom: 12px; }
  .kh-tab { flex: 1 1 calc(20% - 5px); padding: 10px 6px; border-radius: 6px; border-bottom: 1px solid var(--kh-line); }
  .kh-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 22px; } /* タブレット縦は1行3冊 */
  .kh-tab[aria-selected="true"] { border-bottom-color: var(--kh-navy); }
}

@media screen and (max-width: 767px) {
  /* タブが増えても横にはみ出さないよう、スマホでは2列で折り返す */
  .kh-tabs { flex-wrap: wrap; gap: 6px; border-bottom: 0; padding-bottom: 12px; border-bottom: 2px solid var(--kh-navy); }
  .kh-tab { flex: 1 1 calc(50% - 3px); padding: 10px 6px; font-size: 14px; border-radius: 6px; border-bottom: 1px solid var(--kh-line); }
  .kh-tab[aria-selected="true"] { border-bottom-color: var(--kh-navy); }
  .kh-feature { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .kh-feature-cover { max-width: 200px; margin: 0 auto; }
  .kh .kh-feature-title { font-size: 20px; }
  .kh .kh-toc { columns: 1; }
  .kh-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .kh-card .kh-btns { flex-direction: column; gap: 6px; }
}

/* 号数などの補足が無いカードは、その行の余白を詰める
   （subgrid の行をそろえるため、要素自体は残して高さだけ0にする） */
.kh-card-label:empty { margin-top: 0; min-height: 0; }