@charset "utf-8";
/* ==========================================================================
   固定ページ本文（page.php）専用スタイル
   旧 style.css も併読するため、本文の見た目はここで上書きして確定させる。
   すべて .toprp 配下にスコープしており、既存 style.css とは干渉しない。
   ========================================================================== */

/* 旧 style.css の body グローバル指定（text-align:justify / font-size:17px /
   display:flex）が新デザインへ入り込まないよう、各スコープ先頭で打ち消す。 */
.toprp {
  text-align: left;
  font-size: 16px;
  line-height: 1.7;

  --brand: #FBC600;
  --brand-hi: #FFD83A;
  --brand-dark: #C99700;
  --brand-on: #1a1a1a;
  --page-bg: #fffbef;
  --text: #1d1d1b;
  --text-mute: #6b6b66;
  --accent-soft: #fff5cc;
  --card-border: #efe6c5;
  --radius: 10px;

  background: var(--page-bg);
  color: var(--text);
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.toprp *,
.toprp *::before,
.toprp *::after { box-sizing: border-box; }
.toprp img { max-width: 100%; height: auto; }

.toprp-inner { max-width: 1200px; margin: 0 auto; }

/* --- ページ見出し --------------------------------------------------- */
.toprp-head {
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  padding: 48px 40px 0;
}
.toprp-head h1 {
  margin: 0;
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.35;
}
.toprp-head h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60%;
  height: 4px;
  background: var(--brand);
  border-radius: 2px;
}

/* --- パンくず -------------------------------------------------------- */
.toprp-bread {
  padding: 18px 0 20px;
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.8;
  overflow-x: auto;
}
.toprp-bread a { color: var(--text-mute); text-decoration: none; }
.toprp-bread a:hover { color: var(--text); text-decoration: underline; }
/* 区切り文字は Breadcrumb NavXT が出力するものをそのまま使う。
   CSSで擬似要素を足すと二重に出てしまうため、ここでは追加しない。 */

/* --- 本文 ------------------------------------------------------------ */
.toprp-body { padding: 48px 40px 80px; }
.toprp-content { font-size: 16px; line-height: 1.9; }

.toprp-content > *:first-child { margin-top: 0; }
.toprp-content p { margin: 0 0 1.6em; }
/* 下線は既定では出さず、マウスを乗せたときだけ出す */
.toprp-content a { color: var(--brand-dark); text-decoration: none; }
.toprp-content a:hover { text-decoration: underline; opacity: .7; }

.toprp-content h2 {
  margin: 2.4em 0 1em;
  padding: 12px 18px;
  background: var(--accent-soft);
  border-left: 6px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
}
.toprp-content h3 {
  margin: 2.2em 0 .9em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--card-border);
  font-size: 19px;
  font-weight: 800;
}
.toprp-content h4 {
  margin: 2em 0 .8em;
  padding-left: 14px;
  border-left: 4px solid var(--brand);
  font-size: 17px;
  font-weight: 800;
}

.toprp-content ul,
.toprp-content ol { margin: 0 0 1.6em; padding-left: 1.6em; }
.toprp-content li { margin-bottom: .5em; }
.toprp-content ul { list-style: disc; }
.toprp-content ol { list-style: decimal; }

.toprp-content blockquote {
  margin: 0 0 1.6em;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  color: var(--text-mute);
}
.toprp-content hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--card-border);
}

/* 表は横幅が足りないとき単体で横スクロールさせる（ページごと横に伸ばさない） */
.toprp-content .toprp-scroll { overflow-x: auto; margin: 0 0 1.6em; }
.toprp-content table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 15px;
}
.toprp-content th,
.toprp-content td {
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  text-align: left;
  vertical-align: top;
}
.toprp-content th { background: var(--accent-soft); font-weight: 800; white-space: nowrap; }

.toprp-content img { border-radius: var(--radius); }

/* Swiper のスライド画像は旧 style.css の指定（幅100%・高さ固定・object-fit）で
   成立している。上の .toprp img { height: auto } が同じ詳細度で後勝ちしてしまい、
   画像の高さが潰れて Swiper の幅計算まで破綻する（横スクロールが暴走する）ため、
   .toprp 配下でも元の指定に戻す。角丸もスライドには当てない。 */
.toprp .swiper-slide img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 0;
}
@media screen and (max-width: 759px) {
  .toprp .swiper-slide img { height: 150px; }
}

/* --- 旧テンプレートのカラム幅 -----------------------------------------
   旧 style.css はカラム幅を `.page-content-in .col-5` のように
   親コンテナ込みで指定していた。新デザインへ移行して .page-content-in が
   無くなったため、これらの指定が丸ごと外れて flex アイテムに幅が無くなり、
   中の Swiper が際限なく広がってページが横に破綻していた。
   同じ値を .toprp 配下にも用意する。 */
.toprp .col-12 { width: 100%; }
.toprp .col-10 { width: 100%; }
.toprp .col-3  { width: calc(100% / 3); }
.toprp .col-5 {
  width: calc(100% / 2 - 16px);
  margin: 0 8px;
  align-items: center;
}
.toprp .col-5-2 { width: calc(100% / 2); align-items: center; }
/* 念のため、幅指定が無いカラムでも際限なく広がらないようにする */
.toprp .col-flex > * { min-width: 0; max-width: 100%; }

/* --- 一覧（記事一覧・検索結果） -----------------------------------------
   本文用の .toprp-content と違い、散文向けの装飾は当てない。
   行の見た目は legacy.css の .article-list / .search-list / .pagination が持つ。 */
.toprp-list { font-size: 16px; }

/* --- 404 ---------------------------------------------------------------
   行き止まりにしないため、検索と主要ページへの導線を置く。 */
.notfound { max-width: 720px; }
.notfound-code {
  margin: 0 0 4px;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--brand);
}
.notfound-lead { margin: 0 0 32px; font-size: 16px; line-height: 1.9; }

/* 検索 */
.notfound-search {
  display: flex;
  gap: 10px;
  margin: 0 0 48px;
  flex-wrap: wrap;
}
.notfound-search input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}
.notfound-search input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.notfound-search button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: var(--brand);
  color: var(--brand-on);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s;
}
.notfound-search button:hover { background: var(--brand-hi); }
.notfound-search button svg { width: 16px; height: 16px; display: block; }

/* 主なページ */
.notfound-heading {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--brand);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
}
.notfound-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.notfound-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: border-color .2s, background .2s;
}
.notfound-links a:hover { border-color: var(--brand); background: var(--accent-soft); text-decoration: none; }
.notfound-chev { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-mute); line-height: 0; }
.notfound-chev svg { width: 100%; height: 100%; display: block; }

/* --- 下部の戻り導線 --------------------------------------------------- */
.toprp-foot { margin-top: 56px; text-align: center; }
.toprp-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--brand);
  color: var(--brand-on);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: all .2s;
}
.toprp-back:hover { background: var(--brand-hi); }

/* ==========================================================================
   SP（ヘッダー／トップと同じ 760px で切り替え）
   ========================================================================== */
@media screen and (max-width: 759px) {
  .toprp .col-5,
  .toprp .col-5-2 { width: 100%; margin: 0; align-items: center; }

  .toprp-head { padding: 28px 16px 0; }
  .toprp-head h1 { font-size: 22px; }
  .toprp-bread { padding: 14px 0 16px; font-size: 11px; }
  .toprp-body { padding: 28px 16px 48px; }
  .toprp-content { font-size: 15px; line-height: 1.85; }
  .toprp-content h2 { font-size: 18px; padding: 10px 14px; }
  .toprp-content h3 { font-size: 16px; }
  .toprp-content h4 { font-size: 15px; }
  .toprp-content th,
  .toprp-content td { padding: 10px 12px; font-size: 14px; }
  .notfound-code { font-size: 48px; }
  .notfound-lead { margin-bottom: 24px; font-size: 15px; }
  .notfound-search { margin-bottom: 36px; }
  .notfound-search input,
  .notfound-search button { flex: 1 1 100%; justify-content: center; }
  .notfound-links { grid-template-columns: 1fr; }

  .toprp-foot { margin-top: 40px; }
}