/*
Theme Name: Owase High School
Description: Public child theme for Mie Prefectural Owase High School.
Author: Mie Prefectural Owase High School
Template: twentytwentyone
Version: 1.6.9
Requires at least: 6.9
Requires PHP: 7.3
Text Domain: owase-school
*/

/*
 * ファイルを直接編集する前に -------------------------------------------------
 *
 * このスタイルシートは、引き継ぎ時点の公開サイトの見た目を再現するために書かれて
 * います。公開中の210ページを 1280 / 768 / 375 の3幅で、全要素の位置と大きさまで
 * 公開サイトの写しと突き合わせて一致させてあります。ここを変えると、その一致が
 * 壊れます。値を動かす前に、公開サイトのどの指定に対応しているか確認してください。
 *
 * 特に次の2点が間違えやすいところです。
 *
 *   - ルートの文字サイズは 992px 未満で 14px に下がります。rem と em を取り違え
 *     ると、1280px では合っていても 992px 未満だけずれます。
 *   - 要素セレクタで書いてある指定は、TablePress など他のCSSに打ち消されないよう
 *     わざとその強さにしてあります。クラスで書き直すと負けます。
 * ---------------------------------------------------------------------------
 */

:root {
	--owase-blue: #337ab7;
	--owase-blue-dark: #23527c;
	--owase-text: #212529;
	--owase-container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
/*
 * The published site keeps the root at 14px and grows it to 16px only on the
 * desktop layout, so every rem size below 992px is 7/8 of its desktop value.
 */
html { font-size: 14px; scroll-behavior: smooth; }
@media (min-width: 992px) { html { font-size: 16px; } }
body.owase-school {
	margin: 0;
	background: #fff;
	color: var(--owase-text);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	/* Long unbroken text, such as a pasted address, wraps instead of running off the column. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}
/*
 * Link colour and underline come from the school's own Additional CSS, exactly
 * as on the published site. Nothing is set here, or it would outrank it.
 * Places that must not be underlined say so individually, as they do there.
 *
 * The element defaults below stay at element specificity for the same reason:
 * the school's Additional CSS narrows several of them by screen width, and a
 * class-qualified selector here would silently outrank it.
 */
img { max-width: 100%; height: auto; vertical-align: middle; }
p { margin: 0 0 1.2em; line-height: 1.7; }
@media (min-width: 768px) { p { line-height: 1.9; } }
dl, ol, ul { margin-top: 1.5em; margin-bottom: 1.2em; }
table { width: 100%; max-width: 100%; border-collapse: collapse; border-spacing: 0; border-top: 1px solid rgba(0,0,0,.05); }
table td, table th { border-bottom: 1px solid rgba(0,0,0,.05); }
th { font-weight: 400; text-align: inherit; }
/* Cell spacing stays at element level so a table plugin that styles its own cells still wins, as it does on the published site. */
td, th { padding: 1em; font-size: 14px; line-height: 1.5; }
/*
 * The published site steps the content width at each breakpoint instead of
 * letting it grow with the window, so a tablet shows the same column the
 * current site shows.
 */
.container { width: 100%; margin: 0 auto; padding: 0 15px; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: var(--owase-container); } }
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.col { position: relative; width: 100%; padding: 0 15px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus { z-index: 100000; top: 5px; left: 5px; width: auto; height: auto; padding: 15px 23px; clip: auto; background: #fff; color: #222; }

/* Header: dimensions and order match the current public site. */
.siteHeader { position: relative; z-index: 100; background: #fff; }
.headerTop { height: 41px; margin-top: -7px; border-bottom: 1px solid rgba(0,0,0,.04); background: #f9f9f9; color: #1e73be; font-size: 12px; }
.headerTop .container { display: flex; align-items: flex-start; height: 41px; }
.headerTop_description { position: relative; top: 7px; flex: 1; margin: 0 !important; padding: 9px 20px 14px 0; line-height: 1.4; }
.owase-header-contact-nav { position: relative; top: 15px; margin: 0; padding: 0; }
.owase-header-contact-nav ul { margin: 0; padding: 0; list-style: none; }
.headerTop_tel { margin: 0 !important; white-space: nowrap; }
.headerTop_tel_wrap { display: block; padding: 0 15px; line-height: 1.4; }
/* Same footprint as the icon font the published header uses. */
.owase-phone-icon { width: .625em; height: 1em; margin-right: 6px; vertical-align: -.125em; }
.headerTop_tel_wrap .owase-phone-icon { margin-left: .4em; }
.headerTop_contactBtn { position: relative; top: 7px; align-self: stretch; margin: 0; padding: 0; }
.headerTop_contactBtn a { display: inline-block; padding: .375rem 1.5rem; border: 1px solid #007bff; border-radius: 0 0 4px 4px; background: #007bff; color: #fff !important; font-size: 14px; line-height: 1.5; }
.headerTop_contactBtn a:hover { border-color: #0069d9; background: #0069d9; text-decoration: none !important; }
.siteHeadContainer { min-height: 206px; }
.navbar-header { position: relative; height: 106px; }
.siteHeader_logo { position: absolute; top: 16px; left: 0; width: 453px; height: 90px; margin: 0; padding: 5px 0; font-size: 0; }
.siteHeader_logo a, .siteHeader_logo img { display: block; }
.siteHeader_logo a { color: #333; }
.siteHeader_logo img { width: 453px; height: 80px; object-fit: contain; object-position: left center; }
.owase-menu-toggle { display: none; }
/*
 * Past 160px of scrolling the published site detaches the navigation and keeps
 * it at the top of the window. The bar is parked above the viewport so that it
 * slides down rather than appearing abruptly, as the current site does.
 */
.gMenu_outer { width: 100%; }
/*
 * Narrow screens use this same element as the drop-in menu panel, so every
 * detached-bar rule is confined to the width that shows the bar at all.
 */
@media (min-width: 992px) {
	.gMenu_outer { top: -54px; transition: top 1s; }
	.header_scrolled .gMenu_outer { position: fixed; top: 0; left: 0; z-index: 1000; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
	.header_scrolled .gMenu_outer > nav { width: 960px; margin: 0 auto; padding: 0 15px; }
	/* The bar leaves the flow, so the header keeps the space it occupied. */
	.header_scrolled .navbar-header { margin-bottom: 75px; }
}
@media (min-width: 1200px) {
	.header_scrolled .gMenu_outer > nav { width: var(--owase-container); }
	.header_scrolled .navbar-header { margin-bottom: 86px; }
}
/* Below the widest breakpoint the published header centres its logo and menu. */
@media (max-width: 1199px) {
	.siteHeadContainer { min-height: 0; padding-bottom: 14px; }
	.navbar-header { height: 111px; padding-top: 16px; }
	.siteHeader_logo { position: static; width: 100%; height: auto; text-align: center; }
	.siteHeader_logo a, .siteHeader_logo img { margin-right: auto; margin-left: auto; object-position: center; }
	.gMenu_outer > nav { text-align: center; }
}
/*
 * Written against body so the general list spacing does not reach the menu.
 * Only the vertical spacing is reset: a blanket `margin` here would outrank the
 * horizontal offset that centres a submenu under its parent.
 */
body.owase-school .gMenu, body.owase-school .gMenu ul { margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
/* The bar takes its height from the menu images, as the published site does. */
.gMenu { display: flex; width: 100%; }
.gMenu > li { position: relative; flex: 1 1 0; min-width: 0; }
/* The published hover mark is an underline that grows out from the left. */
.gMenu > li::before { position: absolute; bottom: 0; left: 0; width: 0; border-bottom: 1px solid #2e6da4; content: ""; transition: all .5s ease-out; }
.gMenu > li:hover::before, .gMenu > li:focus-within::before, .gMenu > li[class*="current"]::before { width: 100%; }
.gMenu > li > a { display: block; padding: 14px 12px; color: #333; font-size: 12px; line-height: 1.4; }
.gMenu > li > a:hover, .gMenu > li > a:focus { text-decoration: none; }
.gMenu_name { display: block; width: 100%; font-weight: 500; line-height: 0; }
.gMenu_name .menu-image-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.gMenu_name img.menu-image { display: block; width: 140px; max-width: 100%; height: auto; margin: 0 auto; }
.gMenu > li > .sub-menu { position: absolute; z-index: 1000; top: 100%; left: 50%; width: 240px; margin-left: -120px; padding: 0; max-height: 0; overflow: hidden; opacity: 0; background: #191919; box-shadow: 1px 1px 3px rgba(0,0,0,.2); transition: all .5s; }
/*
 * Hover only. Opening on focus as well leaves the panel of a clicked item on
 * screen while the page is still loading, and a second panel opens over it as
 * soon as the pointer reaches the next item.
 */
.gMenu > li:hover > .sub-menu { max-height: 1000px; opacity: 1; }
.gMenu .sub-menu a { display: block; padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 12px; line-height: 1.4; }
.gMenu .sub-menu a:hover, .gMenu .sub-menu a:focus { background: #337ab7; color: #fff; text-decoration: none; }
.gMenu .sub-menu-toggle, .gMenu .acc-btn { display: none !important; }

/* Return-to-top control, shown as soon as the page leaves the top. */
.page_top_btn { position: fixed; right: 2%; bottom: 3%; z-index: 99999; display: block; width: 40px; height: 38px; border: 0; background: rgba(0,0,0,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon fill='%23ffffff' points='24,15.9 38.2,30 36.7,31.4 24,18.7 11.3,31.4 9.8,30'/%3E%3C/svg%3E") center no-repeat; background-size: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 0 0 2px rgba(0,0,0,.8); color: transparent; opacity: 0; pointer-events: none; transition: opacity .3s; }
.page_top_btn:hover, .page_top_btn:focus { color: transparent; text-decoration: none; }
.scrolled .page_top_btn { opacity: 1; pointer-events: auto; }

/* Full-width current photo carousel. */
.owase-slider { position: relative; width: 100%; overflow: hidden; background: #000; }
.owase-slider-inner { position: relative; width: 100%; aspect-ratio: 1400 / 931; }
.owase-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .6s ease; }
.owase-slide.is-active { z-index: 1; opacity: 1; }
.owase-slide img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.owase-slider-control { position: absolute; z-index: 3; top: 50%; width: 52px; height: 72px; margin-top: -36px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.65); font: 300 64px/64px Arial, sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.5); cursor: pointer; }
.owase-slider-prev { left: 15px; }
.owase-slider-next { right: 15px; }
.owase-slider-indicators { position: absolute; z-index: 3; right: 0; bottom: 12px; left: 0; display: flex; justify-content: center; gap: 4px; }
.owase-slider-indicators button { width: 30px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.5); }
.owase-slider-indicators button.is-active { background: #fff; }

/* Inner-page photograph title and breadcrumb. */
.page-header { margin: 0; padding: 0; border: 0; background: url("../../uploads/top.jpg") no-repeat 50% center / cover; }
/* Keeps the title's own spacing inside the band, as the grid wrapper does there. */
.page-header .container { display: block; overflow: hidden; }
/*
 * The title carries its own vertical spacing and the band takes its height from
 * it. On a page the heading padding comes from the school's own stylesheet, so
 * it is not repeated here; the label above an article is not a heading and has
 * none, which is why the band is shorter there, exactly as on the published site.
 */
.page-header_pageTitle { width: 100%; margin: 3em 0 2.9em; color: #fff; font-size: 1.75rem; font-weight: 500; line-height: 1.1; }
.breadSection { min-height: 2rem; border-bottom: 1px solid #eee; }
.breadcrumb { display: flex; flex-wrap: wrap; margin: 0 -15px !important; padding: 6px 15px; list-style: none; }
.breadcrumb li { min-width: 0; line-height: 1.2; }
.breadcrumb a { padding-bottom: 2px; color: #666; }
.breadcrumb span { font-size: .75em; }
.breadcrumb li + li::before { margin: 0 .5em; color: #777; font-size: 12px; content: "/"; }
/* Same house mark the published trail shows before HOME. */
.owase-crumb-home {
	display: inline-block;
	width: 1.125em; height: 1em;
	background-color: currentColor;
	vertical-align: -.1em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 1 1 8h2v7h4v-4.5h4V15h4V8h2L9 1z'/%3E%3C/svg%3E") center / 1.125em 1em no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 1 1 8h2v7h4v-4.5h4V15h4V8h2L9 1z'/%3E%3C/svg%3E") center / 1.125em 1em no-repeat;
}
.breadcrumb li[aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*
 * Main public content. The published site steps this padding at every
 * breakpoint, and because the root shrinks at 992px the rem values give both
 * steps at once: 2rem, 2.5rem, then 3rem and 3.5rem on the widest layout.
 */
.siteContent { padding: 2rem 0; }
@media (min-width: 768px) { .siteContent { padding: 2.5rem 0; } }
@media (min-width: 992px) { .siteContent { padding: 3rem 0 3.5rem; } }
@media (min-width: 1200px) { .siteContent { padding: 3.5rem 0 4rem; } }
/* Eight club pages are published without the space above and below the body. */
.siteContent.siteContent-paddingVertical-off { padding-top: 0; padding-bottom: 0; }
/* The published site lays the content row out as a block with a clearfix, not
   as a flex line, so the section's own bottom margin escapes the row. */
.siteContent > .container > .row { display: block; }
.siteContent > .container > .row::after { display: block; clear: both; content: ""; }
@media (max-width: 991px) { .mainSection { margin-bottom: 2rem; } }
.mainSection { font-size: 1rem; }
.entry { width: 100%; }
.entry-full { margin-bottom: 3rem; }
.entry-body { width: 100%; }
.entry-body::after { display: block; clear: both; content: ""; }
.entry-body img { max-width: 100%; height: auto; }
/*
 * The published list spacing is a length, not a ratio, so a larger run of text
 * inside an item keeps the row height of the item around it. Written unitless
 * it would be recomputed per span and open the rows on narrow screens.
 */
.entry-body li { margin-bottom: .8rem; line-height: 1.65em; }
/*
 * `.contents1` is the school's own content wrapper and its width, indent and
 * clearing come from the school's Additional CSS. Nothing is set here: adding
 * automatic side margins pushed every block that uses it into the middle of
 * the column instead of leaving it against the left edge.
 */
.entry-body iframe { display: block; width: 95%; max-width: 100%; margin-right: auto; margin-left: auto; }
/* Embeds take their size from the school's own Additional CSS, as published. */
.entry-body h2, .mainSection > h2, .owase-post-list h2 {
	position: relative;
	clear: both;
	margin: 1.5em 0 1.2em;
	border: 0;
	border-radius: 4px;
	background: var(--owase-blue);
	color: #fff;
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
}
.entry-body h2::before, .mainSection > h2::before {
	position: absolute; bottom: -20px; left: 40px; z-index: 2;
	width: 0; height: 0; border: 10px solid transparent; border-top-color: var(--owase-blue); content: "";
}
.entry-body h2 a { color: #fff; }
.entry-body h3 {
	position: relative;
	clear: both;
	margin: 1.5em 0 1.2em;
	border-radius: 4px;
	background: #efefef;
	color: #333;
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
}
/*
 * Heading sizes follow the published scale (1.5rem / 1.25rem / 1rem) and take
 * their indent from the school's Additional CSS, which sets it in em so it
 * tracks the size. Fixed 18px/14px headings made these smaller than the body
 * text they introduce.
 */
.entry-body h4 { clear: both; margin: 1.5em 0 1.2em; font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.entry-body h5 { clear: both; margin: 1.5em 0 1.2em; font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.entry-body h6 { clear: both; margin: 1.5em 0 1.2em; font-size: 1rem; font-weight: 500; line-height: 1.2; }
/* The published site zeroes the top margin of a heading that opens its block. */
.entry-body h2:first-child, .entry-body h3:first-child, .entry-body h4:first-child, .entry-body h5:first-child, .entry-body h6:first-child { margin-top: 0; }
/*
 * At 480px the school's Additional CSS drops every h2 to 18px. It reaches the
 * published heading because that one is styled at element level; the rules
 * above are class-qualified, so the same width is repeated here.
 */
@media (max-width: 480px) {
	.entry-body h2, .mainSection > h2, .owase-post-list h2 { font-size: 18px; }
}
.entry-body .aligncenter { display: block; margin: 0 auto 12px; }
/*
 * Float spacing as published: 20px on the text side, 4px above and 12px below.
 * The published rule that adds the lower gap names `.alignleft` and
 * `img.alignright`, so a floated block that is not an image keeps no gap under
 * it. The wrapping around every floated photo depends on these exact values.
 */
.entry-body .alignleft, .entry-body img.alignleft { float: left; margin-top: 4px; margin-right: 20px; }
.entry-body .alignright, .entry-body img.alignright { float: right; margin-top: 4px; margin-left: 20px; }
.entry-body .alignleft, .entry-body img.alignright { margin-bottom: 12px; }
/*
 * A captioned image is a framed, centred box on the published site, not a bare
 * image with a line of text under it. The caption keeps its indent and line
 * spacing from the school's Additional CSS because it is a paragraph.
 */
.entry-body .wp-caption { max-width: 100%; margin: 2.5rem 0; padding: 0 0 5px; border: 1px solid #e5e5e5; background: #fcfcfc; line-height: 18px; text-align: center; }
/* A caption box keeps its own vertical gap and takes its side gap from the alignment. */
.entry-body .wp-caption.alignleft { margin: 2.5rem 20px 2.5rem 0; }
.entry-body .wp-caption.alignright { margin: 2.5rem 0 2.5rem 20px; }
.entry-body .wp-caption.aligncenter { margin: 2.5rem auto; }
.entry-body .wp-caption img { max-width: 95%; margin: 10px 0 9px; }
.entry-body .wp-caption-text { margin: 0; color: #888; font-size: 12px; }
/*
 * A quotation is a framed box with a grey quote mark in the upper left and the
 * lower right, as published. The published marks come from the old theme's icon
 * font, so the typographic characters stand in for them.
 */
.entry-body blockquote { position: relative; margin: 0 0 14px; padding: 35px 20px 30px; border: 5px solid #eee; background: #fcfcfc; }
.entry-body blockquote::before, .entry-body blockquote::after { position: absolute; color: #ccc; font-size: 16px; font-weight: 700; line-height: 1.5; }
.entry-body blockquote::before { top: 10px; left: 20px; content: "\201C"; }
.entry-body blockquote::after { right: 20px; bottom: 10px; content: "\201D"; }
.entry-body input, .entry-body textarea, .entry-body select { max-width: 100%; }
.owase-edit-link { clear: both; height: 30px; margin: 0; padding: 0; border: 0; font-size: 13px; line-height: 30px; }

/* Current contact panel displayed above the home fixed-page body. */
.owase-contact-strip { margin-bottom: 36px; border: 4px solid rgba(0,0,0,.07); }
.owase-contact-frame { display: flex; align-items: center; justify-content: space-between; padding: 19px 30px; background: rgba(0,0,0,.02); }
.owase-contact-text { display: flex; flex-direction: column; margin: 0 !important; padding-left: 14px; line-height: 1.7; }
.owase-contact-text strong { color: #333; font-size: 25px; line-height: 1.05; }
.owase-contact-icon { width: 1em; height: 1em; margin-right: .2em; vertical-align: -.12em; }
body.owase-school .owase-contact-frame > a { display: inline-block; padding: 13px 22px; border-radius: 4px; background: #007bff; color: #fff; font-size: 18px; }
body.owase-school .owase-contact-frame > a:hover { background: #0069d9; color: #fff; text-decoration: none; }
.home .entry-body > h1.screen-reader-text { position: absolute !important; }
/*
 * The home headings carry their size, margin and lower padding in the saved
 * page itself, so nothing is set for them here.
 */
.home .entry-body .owase-home-banner { width: 100%; margin: 0 0 1em; background: #fff; line-height: 0; text-align: center; }
.home .entry-body .owase-home-banner > a { display: block; width: 100%; aspect-ratio: 2172 / 430; overflow: hidden; background: #fff; }
.home .entry-body .owase-home-banner img { display: block; width: 100%; height: 100% !important; margin: 0; object-fit: contain; object-position: center; }
.home .entry-body .owase-home-banner > a:focus-visible { outline: 3px solid #1e73be; outline-offset: 3px; }
.home .entry-body table[style*="table-layout"] img { width: 235px; max-width: 100%; }

/* Post detail and listings. */
.entry-header { margin-bottom: 1.5rem; }
.entry-header::after { display: table; clear: both; content: ""; }
@media (min-width: 992px) { .entry-header { margin-bottom: 2.2rem; } }
.entry-meta { margin-bottom: .8rem; padding-left: 3px; }
.entry-meta_items { font-size: 12px; }
.entry-meta_items + .entry-meta_items { margin-left: 10px; }
/*
 * The published date carries a small calendar mark. There it comes from the old
 * theme's icon font, which is not part of the replacement, so the same mark is
 * drawn here and takes the surrounding text colour.
 */
.entry-meta .published::before {
	display: inline-block;
	width: 1em; height: 1em;
	margin-right: 5px;
	background-color: currentColor;
	vertical-align: -.12em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='.5' y='2.5' width='13' height='11' rx='1.5' fill='none' stroke='%23000'/%3E%3Crect x='.5' y='2.5' width='13' height='3' rx='1.5'/%3E%3Crect x='3' y='.5' width='1.4' height='3'/%3E%3Crect x='9.6' y='.5' width='1.4' height='3'/%3E%3Crect x='2.6' y='7' width='2' height='2'/%3E%3Crect x='6' y='7' width='2' height='2'/%3E%3Crect x='9.4' y='7' width='2' height='2'/%3E%3Crect x='2.6' y='10.2' width='2' height='2'/%3E%3Crect x='6' y='10.2' width='2' height='2'/%3E%3Crect x='9.4' y='10.2' width='2' height='2'/%3E%3C/svg%3E") center / 1em 1em no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='.5' y='2.5' width='13' height='11' rx='1.5' fill='none' stroke='%23000'/%3E%3Crect x='.5' y='2.5' width='13' height='3' rx='1.5'/%3E%3Crect x='3' y='.5' width='1.4' height='3'/%3E%3Crect x='9.6' y='.5' width='1.4' height='3'/%3E%3Crect x='2.6' y='7' width='2' height='2'/%3E%3Crect x='6' y='7' width='2' height='2'/%3E%3Crect x='9.4' y='7' width='2' height='2'/%3E%3Crect x='2.6' y='10.2' width='2' height='2'/%3E%3Crect x='6' y='10.2' width='2' height='2'/%3E%3Crect x='9.4' y='10.2' width='2' height='2'/%3E%3C/svg%3E") center / 1em 1em no-repeat;
	content: "";
}
/* The published site floats the category label to the right of the date row. */
.entry-meta_items_term { display: block; float: right; }
@media (max-width: 767px) {
	/* Narrow screens put the label on its own line under the date. */
	.entry-meta_items_term, .entry-meta_items + .entry-meta_items_term { float: none; margin-top: 6px; margin-left: 0; }
}
/* The published label carries the category's own colour; blue is the fallback. */
.entry-term-button { display: inline-block; padding: 4px .8rem 2px; vertical-align: middle; border-radius: .25rem; background: #1e73be; color: #fff !important; font-size: .8rem; line-height: 1; }
.entry-title { margin: 0 0 .5rem; padding: .5em; font-size: 32px; font-weight: 500; line-height: 1.4; }
@media (max-width: 767px) { .entry-title { font-size: 26px; } }
.entry-footer { display: block; overflow: hidden; margin: 0 0 3rem; }
.entry-footer.owase-edit-link { margin: 0; }
/* The published site keeps the category row in the markup but does not show it. */
.entry-footer dl { display: none; }

/*
 * Previous and next post: a bordered card with the thumbnail, the category
 * label over it, the relation, the title and the date, exactly as published.
 * The later post shows its thumbnail on the other side.
 */
.postNextPrev { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.owase-postnav-card { display: flex; flex: 0 0 calc(100% - 30px); margin: 0 15px; overflow: hidden; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; background: #fff; }
@media (min-width: 768px) { .owase-postnav-card { flex-basis: calc(50% - 30px); } }
.owase-postnav-card.postNextPrev_next { flex-direction: row-reverse; }
/* The published card holds the thumbnail at the proportions of its placeholder
   picture and lets the text column stretch to it, with a hairline between the
   two, so the card height follows the picture rather than the title. */
.owase-postnav-thumb { position: relative; flex: 0 0 41.666667%; max-width: 41.666667%; padding: 0; overflow: hidden; border-right: 1px solid #e5e5e5; font-size: 0; line-height: 0; }
.owase-postnav-thumb::before { display: block; padding-top: 62%; content: ""; }
.owase-postnav-thumb img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.owase-postnav-term { position: absolute; top: 0; right: 0; padding: 3px 8px; background: #1e73be; color: #fff; font-size: 10px; line-height: 1.5; }
.owase-postnav-body { flex: 0 0 58.333333%; max-width: 58.333333%; padding: 1rem 1.2rem; }
.postNextPrev_label { margin: 0 0 12px; font-size: 12px; line-height: 1; }
.owase-postnav-title { margin: 1.5em 0 .6em; font-size: 14px; font-weight: 700; line-height: 1.4; }
body.owase-school .owase-postnav-title a { color: #333; }
.owase-postnav-date { margin-top: .4rem; color: #666; font-size: 11px; line-height: 1.5; }

/*
 * Post listing, category listing and search results. The published entry is a
 * plain row: the date with its calendar mark, the category label in its own
 * colour, the title at listing size, and a clickable excerpt. No thumbnail.
 */
.sticky { overflow: hidden; padding: 1em; background-color: #f5f5f5; }
.archive-header { margin-bottom: 1em; }
.archive-header_title { margin: 0 0 .5rem; padding: .5em; font-size: 2rem; font-weight: 500; line-height: 1.4em; }
.well p:last-child { margin-bottom: 0; }
.postList article.media { padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.postList .media-heading { margin: 0 0 .4em; padding: 0; font-size: 20px; font-weight: 400; line-height: 1.4em; }
body.owase-school .postList .media-heading a { color: #464646; }
body.owase-school .postList .media-body_excerpt { display: block; color: #464646; }
.postList .media-body_excerpt p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Page numbers. The published listing centres a single row of bordered boxes,
   the current one filled, the first and last rounded at their outer corners. */
.navigation.pagination { display: flex; margin-top: 2rem; margin-bottom: 0; padding-left: 0; border-radius: .25rem; list-style: none; }
.navigation.pagination .nav-links { margin: 0 auto; }
ul.page-numbers { margin: 0; padding: 0; }
ul.page-numbers li { display: block; float: left; margin: 0; overflow: hidden; line-height: 1.65em; list-style: none; }
ul.page-numbers li a, ul.page-numbers li span.page-numbers { display: block; margin-left: -1px; padding: 6px 12px; border: 1px solid #ddd; color: #464646; }
ul.page-numbers li a:hover { background-color: #efefef; text-decoration: none; }
ul.page-numbers li span.page-numbers.current { background-color: #337ab7; color: #fff; }
ul.page-numbers li:first-child a { margin-left: 0; }
ul.page-numbers li:first-child > .page-numbers, ul.page-numbers li:first-child > a { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
ul.page-numbers li:last-child > .page-numbers, ul.page-numbers li:last-child > a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

/* Footer reconstructed from the current Global menu. */
.siteFooter { padding: 0; border-top: 3px solid var(--owase-blue); background: #e2e2e2; color: #2c3e50; }
.siteContent_after { padding: 2rem 0; }
.footerWidget { padding-top: 2rem; padding-bottom: calc(2rem + 29px); }
.fnav { color: #2c3e50; font-size: .9rem; line-height: 1.5; }
.fnav-screen-reader-text { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fnav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.75rem 2rem; padding: .25rem 0 1.5rem; }
.fnav-section { border: 0; }
.fnav-section > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid #d8d4cc; color: #2c3e50; font-size: .95rem; font-weight: 600; list-style: none; }
.fnav-section > summary::-webkit-details-marker { display: none; }
.fnav-section-link { flex: 0 1 auto; padding-bottom: 1px; color: inherit !important; transition: color .2s ease; }
.fnav-section-link::after { margin-left: .35em; color: #c47a3d; font-size: .75em; opacity: 0; content: "↗"; transition: opacity .2s ease; }
.fnav-section > summary:hover { border-bottom-color: #c47a3d; color: #c47a3d; }
.fnav-section > summary:hover .fnav-section-link::after { opacity: .7; }
.fnav-chevron { flex-shrink: 0; width: .55em; height: .55em; margin-right: .2em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }
.fnav-section[open] > summary .fnav-chevron { transform: rotate(-135deg); }
.fnav-sublist { margin: 0; padding: .65rem 0 0 .25rem; list-style: none; }
.fnav-sublist li { margin-bottom: .8em; padding: .25rem 0; }
.fnav-sublist a { display: inline-block; padding-bottom: 1px; color: #4a5568 !important; line-height: 1.65; text-decoration: none; transition: color .15s ease, padding .15s ease; }
.fnav-sublist a:hover { padding-left: 4px; color: #c47a3d !important; text-decoration: none; }
.fnav-utility { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #d8d4cc; }
.fnav-extra-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fnav-extra-links a { display: inline-block; padding-bottom: 1px; color: #4a5568 !important; font-size: .875rem; text-decoration: none; transition: color .15s ease; }
.fnav-extra-links a:hover { color: #c47a3d !important; }
.fnav-search { display: flex; flex: 1 1 220px; align-items: stretch; max-width: 280px; overflow: hidden; border: 1px solid #d8d4cc; border-radius: 999px; background: #fff; }
.fnav-search:focus-within { border-color: #c47a3d; box-shadow: 0 0 0 3px rgba(196,122,61,.15); }
.fnav-search { transition: border-color .2s ease, box-shadow .2s ease; }
/* Form controls inherit the page font, as they do on the published site. */
.fnav-search input, .fnav-search button { font-family: inherit; }
.fnav-search input { flex: 1; min-width: 0; padding: .55rem .9rem; border: 0; outline: 0; background: transparent; color: #2c3e50; font-size: .875rem; line-height: 1.5; }
.fnav-search input::placeholder { color: #999; }
.fnav-search button { padding: 0 1rem; border: 0; background: transparent; color: #555; font-size: .9rem; cursor: pointer; transition: color .15s ease, background .15s ease; }
.fnav-search button:hover { background: rgba(196,122,61,.08); color: #c47a3d; }
.fnav-search svg { display: block; width: 16px; height: 16px; }
.copySection { padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid #d0d0d0; text-align: center; }
.copySection p { margin: 0 15px 5px; font-size: 12px; }

/* Plugin output and legacy content stay usable at narrow widths. */
#toc_container { max-width: 100%; }
.tablepress-scroll-wrapper { max-width: 100%; overflow-x: auto; }
.instagram-gallery-feed { max-width: 100%; }

@media (min-width: 768px) {
	.fnav-section > summary { cursor: default; }
	.fnav-section > summary .fnav-chevron { display: none; }
	.fnav-section > .fnav-sublist { display: block !important; }
}

@media (max-width: 991px) {
	.headerTop { display: none; }
	.siteHeadContainer { height: auto; min-height: 0; padding-top: 5px; padding-bottom: 4px; }
	.navbar-header { position: relative; display: block; height: auto; padding-top: 0; }
	.siteHeader_logo { position: relative; top: 0; left: auto; width: 100%; height: auto; margin: 0; padding: 0 45px; }
	/* The published logo keeps its own size until the screen makes it smaller. */
	.siteHeader_logo img { width: auto; height: auto; max-width: 100%; max-height: 80px; margin: 0 auto; object-fit: fill; }
	/* The published menu button stays on screen while the page scrolls. */
	.owase-menu-toggle { position: fixed; top: 5px; left: 5px; z-index: 2100; display: block; width: 34px; height: 34px; padding: 0; overflow: hidden; border: 1px solid #333; border-radius: 2px; background: rgba(255,255,255,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='0.8'%3E%3Crect x='9.8' y='13.2' width='28.5' height='2'/%3E%3Crect x='9.8' y='23' width='28.5' height='2'/%3E%3Crect x='9.8' y='32.8' width='28.5' height='2'/%3E%3C/g%3E%3C/svg%3E") center no-repeat; background-size: 34px 34px; text-indent: -9999px; cursor: pointer; }
	.owase-menu-open .owase-menu-toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='0.8'%3E%3Crect x='9.8' y='23' transform='rotate(-45 24 24)' width='28.5' height='2'/%3E%3Crect x='23' y='9.8' transform='rotate(-45 24 24)' width='2' height='28.5'/%3E%3C/g%3E%3C/svg%3E"); }
	.owase-menu-icon { display: none; }
	.owase-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
	/* Full-window panel that drops in from above, as the published site does. */
	.gMenu_outer { position: fixed; top: -2000px; right: 0; left: 0; z-index: 2000; display: block; width: 100%; height: 100vh; max-height: none; padding: 45px 10px 0; overflow-y: scroll; border-bottom: 1px solid #e5e5e5; background: #fff; box-shadow: none; transition: top .5s ease-out; }
	.owase-menu-open .gMenu_outer { top: 0; }
	.gMenu { display: block; width: 100%; height: auto; margin-bottom: 21px; border-top: 1px solid #ccc; }
	.gMenu > li { border: 0; }
	.gMenu > li::before { display: none; }
	.gMenu > li > a { height: auto; min-height: 0; padding: 9.8px 42px 9.8px 7px; border-bottom: 1px solid #ccc; font-size: 14px; line-height: 1.65; text-align: left; }
	.gMenu_name { line-height: 1.4; }
	.gMenu_name img.menu-image { display: inline; width: 140px; margin: 0; }
	/* Child menus fold away behind their own control, as on the published site. */
	.gMenu .acc-btn { position: absolute; top: 8px; right: 8px; z-index: 2; display: block !important; width: 28px; height: 28px; padding: 0; overflow: hidden; border: 0; border-radius: 2px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpolygon fill='%23000000' fill-opacity='0.8' points='24,32.1 9.8,18 11.3,16.6 24,29.3 36.7,16.6 38.2,18'/%3E%3C/svg%3E") center no-repeat; background-size: 28px 28px; text-indent: -9999px; cursor: pointer; }
	.gMenu .acc-btn.acc-btn-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='0.8'%3E%3Crect x='9.8' y='23' transform='rotate(-45 24 24)' width='28.5' height='2'/%3E%3Crect x='23' y='9.8' transform='rotate(-45 24 24)' width='2' height='28.5'/%3E%3C/g%3E%3C/svg%3E"); }
	.gMenu > li > .sub-menu { position: relative; top: auto; left: auto; width: 100%; margin-left: 0; max-height: 0; overflow: hidden; opacity: 0; background: transparent; box-shadow: none; transition: all .5s ease-in; }
	.gMenu > li > .sub-menu.acc-child-open { max-height: 1000px; opacity: 1; }
	.gMenu > li:hover > .sub-menu, .gMenu > li:focus-within > .sub-menu { max-height: 0; opacity: 0; }
	.gMenu > li:hover > .sub-menu.acc-child-open, .gMenu > li:focus-within > .sub-menu.acc-child-open { max-height: 1000px; opacity: 1; }
	.gMenu .sub-menu a { padding: 9.8px 7px 9.8px 21px; border-bottom: 1px solid #ccc; background: transparent; color: #333; font-size: 14px; line-height: 1.65; }
	.gMenu .sub-menu a:hover, .gMenu .sub-menu a:focus { background: transparent; color: #333; }
	.owase-contact-frame { align-items: flex-start; gap: 20px; }
}

@media (max-width: 767px) {
	.container { padding-right: 15px; padding-left: 15px; }
	.siteHeader_logo { padding: 0 45px; }
	.owase-menu-toggle { width: 34px; height: 34px; }
	.owase-slider-inner { aspect-ratio: 1400 / 931; }
	.owase-slider-control { width: 38px; height: 50px; margin-top: -25px; font-size: 44px; line-height: 44px; }
	.owase-slider-prev { left: 4px; }
	.owase-slider-next { right: 4px; }
	.breadcrumb { flex-wrap: nowrap; overflow: hidden; }
	.breadcrumb li:not(:first-child):not(:last-child) { display: none; }
	/*
	 * Nothing narrows headings, unfloats photos or turns tables into scrolling
	 * strips here. The published site keeps its floats and full-width tables at
	 * every width and only reduces table text at 480px, from the school's own
	 * Additional CSS, so anything added here would replace that behaviour.
	 */
	.owase-contact-strip { display: block; margin-bottom: 25px; }
	.owase-contact-frame { display: block; padding: 21px; }
	.owase-contact-text strong { padding: 5px 0; font-size: 25px; }
	body.owase-school .owase-contact-frame > a { display: block; margin-top: 14px; padding: 10px 14px; font-size: 16px; text-align: center; }
	.fnav-grid { grid-template-columns: 1fr; gap: 0; }
	.fnav-section > summary { cursor: pointer; }
	.fnav-utility { display: block; }
	.fnav-search { max-width: none; margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.owase-slide { transition: none; }
}