/* ==========================================================
   JUKUIKU theme — base styles
   レイアウトの大部分はデザインからそのまま移したインライン style です。
   ここには共通の土台・レスポンシブ・記事本文などをまとめています。
   ========================================================== */

:root {
	--jk-ink: #12313B;
	--jk-sub: #45585E;
	--jk-line: #D8E4E7;
	--jk-accent: #008299;
	--jk-link: #00798F;
	--jk-link-hover: #005B6B;
	--jk-pale: #EEF8FA;
	--jk-photo: #DCE8EB;
	--jk-star: #7A520B;
}

html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #FFFFFF;
	color: var(--jk-ink);
	font-family: 'BIZ UDPGothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.8;
}
a { color: var(--jk-link); }
a:hover { color: var(--jk-link-hover); }
img { max-width: 100%; height: auto; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--jk-link); margin: 0; flex: 0 0 auto; }
input, select, textarea, button { font-family: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
	outline: 3px solid #F2B705; outline-offset: 2px;
}

.jk-site { min-height: 100vh; display: flex; flex-direction: column; }
.jk-main { flex: 1 0 auto; display: block; }
.jk-skip { position: absolute; left: -9999px; top: 0; background: #FFFFFF; padding: 8px 16px; z-index: 100; }
.jk-skip:focus { left: 8px; top: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons converted from design <a> */
.jk-btn { border: 0; background: transparent; font: inherit; cursor: pointer; color: inherit; text-align: center; }

/* ---------- header / menu ---------- */
.jk-header__sp { display: none; }
@media (max-width: 1023px) {
	.jk-hd-full { display: none !important; }
	.jk-hd-tab { display: flex !important; }
}
@media (max-width: 767px) {
	.jk-header__pc { display: none !important; }
	.jk-header__sp { display: flex; }
}
.jk-menu {
	position: fixed; inset: 0; z-index: 50; background: #FFFFFF;
	display: flex; flex-direction: column; overflow-y: auto; line-height: 1.7;
}
.jk-menu[hidden] { display: none; }
body.jk-menu-open { overflow: hidden; }

/* ---------- compare toggle ---------- */
.jk-compare-toggle {
	min-height: 44px; padding: 0 16px; border: 1px solid #7F969C; background: #FFFFFF; color: var(--jk-ink);
	font: inherit; font-size: 14px; border-radius: 2px; cursor: pointer;
}
.jk-compare-toggle[aria-pressed="true"] { border-color: var(--jk-link); background: #DDF2F6; color: #005B6B; font-weight: 700; }
.jk-compare-bar[hidden] { display: none !important; }
.jk-toast {
	position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 60;
	background: var(--jk-ink); color: #FFFFFF; padding: 10px 18px; font-size: 14px; border-radius: 2px;
}

/* ---------- list cards ---------- */
@media (max-width: 640px) {
	.jk-card { flex-direction: column-reverse !important; gap: 14px !important; }
	.jk-card__media { flex: 0 0 auto !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; min-height: 0 !important; }
	.jk-hero-title { font-size: clamp(32px, 9vw, 50px) !important; }
	.jk-hero-text { padding: 40px 16px 40px !important; }
	.jk-dl-row { flex-direction: column; gap: 2px !important; }
	.jk-dl-row > dt { flex: 0 0 auto !important; }
	.jk-sp-stack { flex-direction: column !important; }
}

/* ---------- column article body (post content) ---------- */
.jk-entry { display: flex; flex-direction: column; gap: 24px; }
.jk-entry > * { margin: 0; }
.jk-entry h2 {
	margin: 20px 0 0; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700;
	font-size: clamp(21px, 5.2vw, 26px); line-height: 1.5; padding-bottom: 8px;
	border-bottom: 1px solid #0097B2; word-break: keep-all; overflow-wrap: anywhere;
}
.jk-entry h3 { margin: 8px 0 0; font-size: 18px; color: #005B6B; }
.jk-entry ul, .jk-entry ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.jk-entry .wp-block-table, .jk-entry .jk-table-wrap { overflow-x: auto; margin: 0; }
.jk-entry table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; line-height: 1.6; }
.jk-entry th, .jk-entry td { padding: 10px 12px; border-bottom: 1px solid var(--jk-line); text-align: left; vertical-align: top; }
.jk-entry th { background: var(--jk-pale); white-space: nowrap; }
.jk-entry blockquote { margin: 0; padding: 12px 16px; background: #FBF3E2; font-size: 15px; }
.jk-entry .jk-note, .jk-entry .has-background { font-size: 15px; background: #FBF3E2; padding: 12px 16px; }
.jk-entry img { display: block; }
.jk-entry figure { margin: 0; }
.jk-entry .jk-lead { font-size: 17px; }
.jk-toc { border-top: 1px solid #0097B2; border-bottom: 1px solid var(--jk-line); padding: 16px 0; }
.jk-toc ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }

/* ---------- pagination ---------- */
.jk-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 24px; }
.jk-pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--jk-line); color: var(--jk-ink); text-decoration: none; box-sizing: border-box;
}
.jk-pager .page-numbers.current { background: var(--jk-accent); border-color: var(--jk-accent); color: #FFFFFF; font-weight: 700; }

/* generic page (page.php) */
.jk-page { max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: clamp(36px, 6vw, 64px) clamp(16px, 3.2vw, 40px) clamp(56px, 8vw, 88px); }
.jk-page h1 { margin: 0 0 24px; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: clamp(26px, 6vw, 34px); line-height: 1.4; }

/* SP: bottom CTA on the juku detail page */
.jk-sp-cta { display: none; }
@media (max-width: 767px) { .jk-sp-cta { display: flex; } }

/* top: new juku tiles (3 columns max) */
.jk-tile { max-width: calc((100% - 64px) / 3); }
@media (max-width: 1100px) { .jk-tile { max-width: calc((100% - 32px) / 2); } }
@media (max-width: 700px) { .jk-tile { max-width: none; } }

/* list: filter collapses on SP */
.jk-filter > summary { list-style: none; }
.jk-filter > summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) { .jk-filter__sum { display: none !important; } }
@media (max-width: 767px) { .jk-filter[open] > summary { margin-bottom: 12px; } }
.jk-errors:focus { outline: none; }

/* ---------- 1.4.0: header fixed / smartphone fixes ---------- */
.jk-header { position: sticky; top: 0; z-index: 40; }
body.admin-bar .jk-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .jk-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .jk-header { top: 0; } }
html { scroll-padding-top: 88px; }
@media (max-width: 767px) { html { scroll-padding-top: 72px; } }

/* iPhone で入力欄を選んだときに画面が拡大されないよう 16px 以上に */
@media (max-width: 767px) {
	input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 16px !important; }
}

/* トップの検索フォーム：スマホではエリアを1行目、学年と「探す」を2行目に */
@media (max-width: 640px) {
	.jk-hero-search > select:first-of-type { flex: 1 1 100% !important; border-right: 0 !important; border-bottom: 1px solid #D8E4E7 !important; }
	.jk-hero-search > select:last-of-type { flex: 1 1 0 !important; min-width: 0; }
	.jk-hero-search > button { flex: 0 0 auto !important; padding: 0 28px !important; }
}

/* 口コミ投稿：評価の選択 */
.jk-rate label:has(input:checked) { background: #008299 !important; border-color: #00798F !important; color: #FFFFFF !important; font-weight: 700; }
.jk-rate label:has(input:focus-visible) { outline: 3px solid #F2B705; outline-offset: 2px; }
@media (max-width: 480px) {
	.jk-rate > span:first-child { flex: 1 1 100%; }
	.jk-rate > span:last-child { flex: 1 1 100%; justify-content: space-between; }
	.jk-rate > span:last-child > label { flex: 1 1 0; width: auto !important; }
}

/* トップの動画：スマホは横長の枠で動画全体を表示し、校舎数の囲みは動画の下へ */
@media (max-width: 767px) {
	.jk-hero-media.has-video { display: block !important; min-height: 0 !important; background: #008299 !important; }
	.jk-hero-media.has-video .jk-hero-video { position: relative !important; display: block; inset: auto !important; height: auto !important; aspect-ratio: 604 / 360; object-position: center !important; }
	.jk-hero-media.has-video .jk-hero-count { position: static !important; padding: 16px !important; }
}

/* 協賛企業バナー（PR） */
.jk-pr { position: relative; display: flex; align-items: center; gap: 14px; border: 1px solid var(--jk-line); padding: 12px 20px; }
.jk-pr__tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; border: 1px solid #7F969C; color: var(--jk-sub); padding: 0 6px; border-radius: 2px; line-height: 1.6; }
.jk-pr__ban { display: block; flex: 0 1 360px; max-width: 360px; }
.jk-pr__ban img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.jk-pr__ban:hover img { opacity: .88; }
@media (max-width: 640px) {
	.jk-pr { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; }
	.jk-pr__ban { flex: 0 0 auto; max-width: 100%; width: 100%; }
}