/* 中検サイト 共通スタイル（PHP非依存・静的版）
   旧サイト（base.css / 30th_toppage.css）の見た目を、画像と同じ寸法で再現している。
   幅 760px 以下では画像ごと縮み、スマホ幅ではメニューと段組みを組み替える。 */
:root {
  --site-w: 760px;
  --ink: #333;
  --link: #0000ff;
  --link-hover: #993400;
  --orange: #c45600;
  --red: #ff0000;
  --grad-from: #dd3333;
  --grad-to: #e94545;
  --nav-bg: #b7bec8;
  --line: #999;
  --th-bg: #eeeeee;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "MS UI Gothic", sans-serif;
  font-size: 13px;
  line-height: 2;
}
img { max-width: 100%; height: auto; border: 0; vertical-align: top; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

.site { max-width: var(--site-w); margin: 20px auto 0; }

/* ---------- ヘッダー（ロゴ・協会名・よくある質問/お問合せ） ---------- */
.site-header { display: flex; align-items: stretch; background: linear-gradient(180deg, #e52b2b, #f07b7b); }
.site-header .brand { margin: 0; flex: 0 0 19.08%; }      /* 145 / 760 */
.site-header .brand-block { flex: 0 0 66.84%; }           /* 508 / 760 */
.site-header .util-nav { flex: 0 0 14.08%; display: flex; flex-direction: column; } /* 107 / 760 */
.site-header img { display: block; width: 100%; }

/* ---------- 上部メニュー（画像ボタン、ホバーで _on 画像） ---------- */
.global-nav { margin: 2px 0 3px; padding: 5px; background: var(--nav-bg); }
.global-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.global-nav a { display: block; background-size: 100% 100%; }
.global-nav img { display: block; width: 100%; }
.global-nav a:hover img { opacity: 0; }
.gnav-menu1 { background-image: url(/image/menu1_on.gif); }
.gnav-menu6 { background-image: url(/image/menu6_on.gif); }
.gnav-menu3 { background-image: url(/image/menu3_on.gif); }
.gnav-menu4 { background-image: url(/image/menu4_on.gif); }
.gnav-menu5 { background-image: url(/image/menu5_on.gif); }

/* ---------- 下層ページ：灰色の地に白い枠 ---------- */
.page-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 10px;
  padding: 0 10px 15px;
  background: url(/image/l_bg.gif) repeat;
}
.page-layout.no-side { grid-template-columns: 1fr; }
.page-layout > * { min-width: 0; }

.side-nav { padding-top: 36px; }
.side-nav > ul {
  list-style: none;
  margin: 0;
  padding: 16px 8px 16px 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px #f2f2f2, 0 1px 2px rgba(0,0,0,.25);
}
.side-nav > ul > li { padding-left: 18px; background: url(/image/icon1.gif) no-repeat 0 9px; }
.side-nav > ul > li + li { margin-top: 5px; }
.side-nav a { color: var(--orange); font-weight: bold; font-size: 14px; line-height: 1.6; display: inline-block; padding: 3px 0; }
.side-nav a:hover { color: var(--orange); }
.side-nav a[aria-current="page"] { text-decoration: underline; }
.side-nav li ul { list-style: none; margin: 0; padding: 0 0 0 4px; }
.side-nav li ul a { color: var(--ink); font-size: 13px; font-weight: normal; }
.side-nav li ul a::before { content: "・"; }

.page-title {
  margin: 0;
  padding: 8px 2px 6px;
  color: #fff;
  font-size: 17px;
  line-height: 22px;
  text-shadow: 1px 1px 1px #555;
}
.page-title::before { content: "◎ "; font-weight: normal; }
.content-box {
  padding: 16px 20px 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px #f2f2f2, 0 1px 2px rgba(0,0,0,.25);
  overflow-wrap: break-word;
}

/* ---------- 本文 ---------- */
.content-box > :first-child { margin-top: 0; }
.content-box p { margin: 0 0 .8em; }
.content-box ul, .content-box ol { margin: 0 0 1em; padding-left: 1.5em; }
/* 大見出し：赤のグラデーション */
.content-box h2 {
  margin: 24px 0 8px;
  padding: 2px 10px;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  background: linear-gradient(90deg, #dd3333, #e94545);
  border-radius: 3px;
}
.content-box h3 { margin: 18px 0 6px; padding-left: 6px; border-left: 4px solid var(--orange); font-size: 14px; line-height: 18px; }
.content-box h4 { margin: 14px 0 4px; font-size: 14px; }
.content-box h5 { margin: 8px 0 2px; font-size: 12px; color: var(--link); font-weight: normal; }
.content-box hr { border: 0; border-top: 1px dotted var(--line); margin: 16px 0; }

.fsr14 { color: var(--red); font-weight: bold; font-size: 14px; }
.fsb13 { color: #000; font-weight: bold; font-size: 13px; }
.font-blue { color: var(--link); font-weight: bold; }
.font-black { color: #000; font-weight: bold; }
.font-red, .red, .fc1, .em-red { color: var(--red); }
.em-blue { color: var(--link); }
.fb, .fwb { font-weight: bold; }
.yellow { color: #ff6600; }
.center { text-align: center; }
.right { text-align: right; }

/* テーブル：border-collapse: separate ＋ 角丸 */
.content-box table {
  width: 100%;
  margin: 4px 0 12px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}
.content-box th, .content-box td { padding: 6px 8px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; vertical-align: middle; text-align: left; }
.content-box th.edge-r, .content-box td.edge-r { border-right: 0; }
.content-box th.edge-b, .content-box td.edge-b { border-bottom: 0; }
.content-box th { background: var(--th-bg); color: #000; font-weight: bold; text-align: center; }
.content-box td p:last-child, .content-box th p:last-child { margin-bottom: 0; }
.content-box th img, .content-box td img { max-width: none; }
.content-box table.plain { border: 0; border-radius: 0; }
.content-box table.plain th, .content-box table.plain td { border: 0; background: none; vertical-align: top; }
/* 動画サムネイルの表は枠内に収める（サムネイルは320px幅のため、3列だと本文幅を超える） */
.content-box table.video-grid { width: 100%; table-layout: fixed; }
.content-box table.video-grid td img { max-width: 100%; }

.notice { padding: 10px 14px; border: 1px dashed var(--line); border-radius: 6px; background: #fafafa; }
.btn { display: inline-block; padding: 6px 18px; border-radius: 4px; background: linear-gradient(180deg, #e94545, #dd3333); color: #fff; font-weight: bold; }
.btn:hover { color: #fff; opacity: .9; text-decoration: none; }

/* ---------- トップページ ---------- */
.top-page .top-main {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 4px;
  padding: 4px 5px 5px;
  background: url(/image/contents_bk.gif) repeat;
}
.top-page .top-main > * { min-width: 0; }
.exam-title { margin: 0; }
.exam-title img { display: block; }
.exam-body { border: 1px solid #333366; border-top: 0; background: url(/image/kenteibi_bk.gif) repeat; }
.exam-next { padding: 6px 12px 8px; border-bottom: 1px dotted var(--line); text-align: center; }
.exam-next p { margin: 0; }
.exam-next .round-line { text-align: left; font-weight: bold; font-size: 18px; }
.exam-next .round, .exam-later .round { color: var(--link); font-weight: bold; }
.exam-next .status { margin-left: 1.5em; color: var(--red); }
.exam-next .date { font-size: 30px; white-space: nowrap; font-weight: bold; line-height: 1.3; color: #333; }
.exam-next .label { margin-top: 8px; text-align: left; font-size: 15px; font-weight: bold; }
.exam-next .sub-date { font-size: 16px; font-weight: bold; }
.exam-next .apply { font-size: 20px; font-weight: bold; line-height: 1.4; }
.exam-next .note { margin-top: 4px; text-align: left; font-size: 12px; line-height: 1.6; }
.exam-next .note strong { color: var(--red); font-size: 15px; }
.exam-later { padding: 4px 12px; font-size: 16px; font-weight: bold; }
.exam-later + .exam-later { border-top: 1px dotted var(--line); }
.exam-later .round { margin-right: 1.2em; }

.apply-buttons { display: grid; grid-template-columns: 146fr 149fr; gap: 0; margin-top: 4px; }
.apply-buttons a {
  display: block;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.btn-internet { grid-column: 1 / -1; aspect-ratio: 295 / 60; background-image: url(/image/btn_internet.jpg); }
.btn-internet:hover { background-image: url(/image/btn_internet_over.jpg); }
.btn-annai { aspect-ratio: 146 / 48; background-image: url(/image/btn_annai.jpg); }
.btn-annai:hover { background-image: url(/image/btn_annai_over.jpg); }
.btn-shoseki { aspect-ratio: 145 / 48; background-image: url(/image/btn_shoseki.jpg); }
.btn-shoseki:hover { background-image: url(/image/btn_shoseki_over.jpg); }

.top-news { background: #fff; }
.news-title { margin: 6px 0 0 4px; }
.news-scroll { height: 500px; overflow-y: auto; padding: 4px; }
.news-list { width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 1.5; }
.news-list td { padding: 5px 4px; vertical-align: top; }
.news-list td.date { width: 84px; white-space: nowrap; }
.news-list a { text-decoration: underline; }

.top-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.sns { display: flex; align-items: center; gap: 10px; }
.sns img { width: 45px; }
.sns a:last-child img { width: 170px; }
.top-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 110px); gap: 3px; }
.top-links a {
  display: block;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  background: url(/image/btn_bk1.png) no-repeat center / 100% 100%;
}
.top-links a:hover { color: #666; text-decoration: none; }

/* ---------- フッター ---------- */
.site-footer { margin-top: 12px; text-align: center; }
.footer-links { list-style: none; margin: 0 auto 18px; padding: 0 10px; display: flex; flex-wrap: wrap; justify-content: center; font-size: 12px; line-height: 20px; }
.footer-links li + li::before { content: "｜"; margin: 0 1.2em; color: var(--ink); }
.copyright { position: relative; }
.copyright img { display: block; width: 100%; }
.copyright .pagetop { position: absolute; right: 1%; top: 20%; width: 11.2%; height: 60%; overflow: hidden; text-indent: 200%; white-space: nowrap; }
.footer-address { margin: 0 0 20px; font-size: 13px; line-height: 20px; }

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .site { margin-top: 0; }
  .global-nav ul { grid-template-columns: repeat(3, 1fr); }
  .page-layout { grid-template-columns: 1fr; padding: 0 8px 12px; }
  .side-nav { order: 2; padding-top: 0; }
  .content-box { padding: 12px; }
  .top-page .top-main { grid-template-columns: 1fr; }
  .exam-title img { width: 100%; }
  .top-bottom { flex-direction: column; align-items: stretch; padding: 0 8px; }
  .top-links { grid-template-columns: repeat(2, 1fr); }
  .footer-links li + li::before { margin: 0 .5em; }

  /* テーブルは常にカード表示（data-label を ::before で表示） */
  .content-box table, .content-box thead, .content-box tbody, .content-box tr, .content-box th, .content-box td { display: block; width: 100%; }
  .content-box table { border: 0; border-radius: 0; overflow: visible; }
  .content-box thead { display: none; }
  .content-box tr { margin-bottom: 10px; border: 1px solid #ccc; border-radius: 10px; overflow: hidden; }
  .content-box table.plain tr { border: 0; border-radius: 0; margin-bottom: 4px; }
  .content-box th img, .content-box td img { max-width: 100%; }
  .content-box th, .content-box td { border-right: 0; }
  .content-box th.edge-b, .content-box td.edge-b { border-bottom: 1px solid #ccc; }
  .content-box tr > :last-child { border-bottom: 0; }
  .content-box td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: bold; color: var(--orange); }
}

/* ---------- 受付停止のお知らせ ---------- */
.closed-notice { margin: 10px 0 16px; padding: 16px 18px; border: 2px solid #dd3333; border-radius: 10px; background: #fff5f5; }
.closed-notice p { margin: 0 0 8px; }
.closed-notice .closed-title { font-size: 1.15em; font-weight: bold; color: #dd3333; }
.closed-notice .closed-contact { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #e9a0a0; }
.closed-label { display: inline-block; padding: 3px 10px; border: 1px solid #dd3333; border-radius: 4px; background: #fff5f5; color: #dd3333; font-size: .9em; font-weight: bold; }
.apply-closed { margin-top: 6px; padding: 10px 12px; border: 2px solid #dd3333; border-radius: 10px; background: #fff5f5; color: #dd3333; font-weight: bold; line-height: 1.6; }
/* 短いセル（級名・番号など）は折り返さない。build.py が nw を付ける */
.content-box td.nw, .content-box th.nw { white-space: nowrap; }

/* よくある質問：上部の分類ボタンを本文幅に収める */
.content-box table.faq-tabs { table-layout: fixed; }
.content-box table.faq-tabs th { padding: 2px; }
.content-box table.faq-tabs th img { max-width: 100%; height: auto; }

/* 団体コード：五十音の索引と一覧 */
.content-box table.kana-index { width: auto; margin: 0 auto 16px; }
.content-box table.kana-index td { padding: 4px 8px; text-align: center; }
.content-box table.code-list { width: 100%; }
.content-box table.code-list td:first-child, .content-box table.code-list th:first-child { width: 6em; text-align: center; background: var(--th-bg); }
@media (max-width: 768px) {
  .content-box table.kana-index { display: table; }
  .content-box table.kana-index tbody { display: table-row-group; }
  .content-box table.kana-index tr { display: table-row; border: 0; margin: 0; }
  .content-box table.kana-index td { display: table-cell; width: auto; padding: 3px 4px; }
  .content-box table.faq-tabs, .content-box table.faq-tabs tbody { display: block; }
  .content-box table.faq-tabs tr { display: flex; flex-wrap: wrap; gap: 4px; border: 0; }
  .content-box table.faq-tabs th { display: block; width: auto; flex: 1 1 30%; }
}
@media (max-width: 768px) {
  .content-box table.code-list td:first-child { width: 100%; text-align: left; background: none; }
}