/* Shared school navigation. Kept separate from the existing page styles. */
.koka-chrome { --koka-red:#e90000; --koka-blue:#003b93; --koka-gray:#ededed; font-family: 'Barlow Numerals', 'Zen Kaku Gothic New', sans-serif; color:#000; font-size:14px; font-weight:500; line-height:1.6; }
.koka-chrome *, .koka-chrome *::before, .koka-chrome *::after { box-sizing:border-box; }
.koka-chrome a, .koka-chrome a:link, .koka-chrome a:visited { color:inherit; text-decoration:none; }
.koka-chrome a[target='_blank']::after { content:none; }
.koka-chrome ul { list-style:none; padding:0; margin:0; }
.koka-chrome button { color:inherit; font:inherit; border:0; cursor:pointer; }
.koka-chrome a:focus-visible, .koka-chrome button:focus-visible, .koka-chrome summary:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.koka-chrome [hidden], #koka-mobile-menu[hidden] { display:none !important; }
.koka-brand { display:block; }
.koka-brand img { display:block; width:100%; height:auto; }
/* リニューアルページのパンくずは、各画面幅でヘッダーロゴの左端に揃える。 */
:root { --koka-breadcrumb-gutter:33px; }
@media (max-width:1270px) {
  :root { --koka-breadcrumb-gutter:24px; }
}
@media (max-width:1023px) {
  :root { --koka-breadcrumb-gutter:13px; }
}
/* 従来ページのパンくず。リニューアルページは下の共通配置を使用する。 */
#wrapperPankuzu #pankuzu .breadcrumbs .row {
  box-sizing: border-box;
  width: calc(100% - 104px);
  max-width: 1296px;
  margin: 0 auto;
  padding: 10px 0;
}
#wrapperPankuzu #pankuzu .breadcrumbs article section ul { padding: 0; line-height: 24px; }
@media (max-width: 1023px) {
  #wrapperPankuzu #pankuzu .breadcrumbs .row { width: calc(100% - 64px); }
}
@media (max-width: 767px) {
  #wrapperPankuzu #pankuzu .breadcrumbs .row { width: 100%; padding: 10px 20px 10px; }
  #wrapperPankuzu #pankuzu .breadcrumbs article section ul { line-height: 20px; }
}
.koka-course-breadcrumb,
.koka-junior-courses-breadcrumb,
.koka-events-breadcrumb,
.koka-philosophy-page #wrapperPankuzu #pankuzu .breadcrumbs .row {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:10px var(--koka-breadcrumb-gutter);
}
.koka-philosophy-page #wrapperPankuzu .breadcrumbs article { width:100%; max-width:none; margin:0; }
.koka-philosophy-page #wrapperPankuzu #pankuzu .breadcrumbs article section ul { display:flex; flex-wrap:wrap; justify-content:flex-start; margin:0; text-align:left; }
.koka-philosophy-page #wrapperPankuzu #pankuzu .breadcrumbs article section ul li { display:flex; align-items:center; }
/* PCヘッダーは高さ130px。上下2段を65pxずつにし、右端の65px幅のサイドバーに合わせる。 */
#koka-site-header {
  position: relative;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(280px, 393px) 1fr;
  grid-template-rows: 65px minmax(0, 1fr);
  column-gap: 30px;
  height: 130px;
  padding: 0 109px 0 33px;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}
#koka-site-header .koka-brand-wrap { grid-row:1 / 3; align-self:center; margin:0; padding:0; font-size:0; line-height:0; }
/* 上段のリンクとSNSは、上側の余白を15pxにして配置を整える。 */
.koka-header-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding-top: 15px;
}
.koka-utility { display:flex; align-items:center; gap:24px; font-size:13px; font-weight:400; color:#555; white-space:nowrap; }
.koka-utility a { display:flex; align-items:center; gap:6px; }
.koka-utility a:hover { color:var(--koka-red); }
.koka-utility img { display:block; width:20px; height:20px; }
.koka-socials { display:flex; align-items:center; justify-content:center; gap:9px; }
.koka-socials a { display:flex; align-items:center; justify-content:center; width:20px; height:24px; }
.koka-socials a:hover { opacity:.65; }
.koka-socials a > img { display:block; width:22px; height:auto; max-width:none; }
.koka-socials__square { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:#000; }
.koka-socials__square img { display:block; width:auto; height:15px; max-width:16px; }
.koka-socials a[aria-label='YouTube'] .koka-socials__square img { width:6px; height:auto; }
.koka-socials__line { position:relative; display:block; width:20px; height:20px; overflow:hidden; border-radius:6px; background:#000; }
.koka-socials__line img { position:absolute; display:block; width:66px; height:auto; max-width:none; left:-36.937px; top:-7.877px; }
.koka-nav { align-self:stretch; margin:0; }
.koka-nav > ul { display:flex; justify-content:flex-end; align-items:stretch; height:100%; gap:30px; white-space:nowrap; }
.koka-nav__trigger {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  padding: 10px 0 18px;
  background: transparent;
  font-size: 18px !important;
  font-weight: 500;
  letter-spacing: .8px;
  line-height: 1.4;
}
.koka-nav__trigger::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--koka-red); opacity:1; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.koka-nav__item:is(:hover,.is-open) > .koka-nav__trigger { color:var(--koka-red); opacity:1; }
.koka-nav__item:is(:hover,.is-open) > .koka-nav__trigger::after { transform:scaleX(1); }
.koka-nav__item { position:relative; height:100%; }
.koka-dropdown { position:absolute; top:calc(100% + 19px); left:50%; width:560px; max-width:calc(100vw - 120px); padding:34px 40px 38px; background:#fff; border:0; border-radius:30px; box-shadow:0 12px 32px rgb(0 0 0 / .1); opacity:0; visibility:hidden; transform:translate(-50%,-5px); transition:opacity .18s,transform .18s,visibility .18s; pointer-events:none; white-space:normal; text-align:left; }
.koka-dropdown::before { content:''; position:absolute; left:0; right:0; bottom:100%; height:20px; }
.koka-nav__item:is(:hover,.is-open):not(.is-dismissed) .koka-dropdown { opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto; transition:opacity .18s,transform .18s; }
.koka-nav__item:nth-child(n+4) .koka-dropdown { left:auto; right:0; transform:translateY(-5px); }
.koka-nav__item:nth-child(n+4):is(:hover,.is-open):not(.is-dismissed) .koka-dropdown { transform:translateY(0); }
.koka-dropdown__title { margin:0 0 18px; font-size:28px; font-weight:700; letter-spacing:1.4px; line-height:1.5; color:var(--koka-red); }
.koka-dropdown ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
/* 見出しを表示したメニューも、高さの低い画面では一覧内をスクロールできる。 */
.koka-dropdown > ul { max-height:calc(100svh - 282px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:4px; margin:-4px; }
.koka-dropdown a { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:50px; padding:10px 0; border-bottom:dotted 1px #d9d9d9; font-size:14px; font-weight:500; letter-spacing:.6px; line-height:1.6; }
.koka-dropdown a::before { content:none; }
.koka-dropdown a::after { content:''; flex:none; width:22px; height:22px; border-radius:50%; background-image:url('/img/cmn/renewal/arrow-head.svg'),url('/img/cmn/renewal/arrow-circle.svg'); background-position:center; background-repeat:no-repeat; background-size:6.476px 6.476px,22px 22px; transition:transform .18s; }
.koka-dropdown a:hover { color:var(--koka-red); opacity:1; }
.koka-dropdown a:hover::after { transform:translateX(3px); }
/* 中学校・高等学校：左にコース紹介、右に入試・イベントを配置する。 */
.koka-dropdown__heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.koka-dropdown__heading > .koka-dropdown__title { margin:0; }
.koka-dropdown .koka-dropdown__top-link { min-height:0; padding:0; border:0; gap:12px; font-size:13px; letter-spacing:.3px; white-space:nowrap; }
.koka-dropdown--school > ul { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; }
.koka-dropdown--school .koka-nav-course-group,
.koka-dropdown--school .koka-nav-admission-group { min-width:0; }
.koka-dropdown--school .koka-nav-course-list,
.koka-dropdown--school .koka-nav-admission-list { display:block; }
.koka-dropdown--school .koka-nav-course-list a,
.koka-dropdown--school .koka-nav-admission-list a { min-height:46px; margin:0; padding:10px 0; gap:12px; letter-spacing:.3px; }
.koka-dropdown .koka-nav-course-link > span { min-width:0; }

/* スクロール後はPCヘッダーを1段にまとめる。元の高さはスペーサーで保持する。 */
.koka-header-spacer { display: none; }
@keyframes koka-fixed-header-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@media (min-width: 1024px) {
  #koka-site-header.is-compact {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: 65px;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    box-shadow: 0 4px 18px rgb(0 0 0 / .08);
    animation: koka-fixed-header-in .35s cubic-bezier(.22, 1, .36, 1) both;
  }
  #koka-site-header.is-compact + .koka-header-spacer { display: block; }
  #koka-site-header.is-compact .koka-brand-wrap { grid-row: 1; }
  #koka-site-header.is-compact .koka-header-utility { display: none; }
  #koka-site-header.is-compact .koka-nav { grid-column: 2; grid-row: 1; }
  #koka-site-header.is-compact .koka-nav__trigger {
    padding: 0;
    font-size: 16px !important;
  }
}

#koka-menu-toggle, #koka-mobile-menu, #koka-bottom-menu { display:none; }
/* PCの固定サイドバー。画面の高さが足りない場合も、全リンクへスクロールして到達できる。 */
#koka-side-menu {
  position: fixed;
  z-index: 1100;
  top: 0;
  right: 0;
  width: 65px;
  height: auto;
  max-height: 100svh;
  overflow-y: auto;
  scrollbar-width: none;
  margin: 0;
}
#koka-side-menu > ul {
  display: grid;
  grid-template-rows: repeat(3, 65px);
  height: 195px;
  background: var(--koka-red);
  color: #fff;
}
#koka-side-menu > ul li + li { border-top:1px solid rgb(255 255 255 / .5); }
#koka-side-menu > ul a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  line-height: 1.4;
}
#koka-side-menu > ul img { display:block; width:auto; height:24px; }
#koka-side-menu > ul .access img { height:22px; }
#koka-side-menu a:hover { filter:brightness(.94); }
/* 縦書きリンクは文字の実寸に合わせ、上下20pxの余白で配置する。固定高さによる空白を作らない。 */
.koka-side-special { height:auto; background:var(--koka-gray); }
.koka-side-special a {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: auto;
  padding: 20px 0;
  gap: 8px;
}
.koka-side-special a + a {
  position: relative;
}
.koka-side-special a + a::before { content:''; position:absolute; top:0; left:18px; width:29px; border-top:1px solid #999; }
.koka-side-special a > span:first-child {
  flex: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 3px;
}
/* サイドバー内の補助アイコンだけ拡大し、スマートフォンのメニューには影響させない。 */
#koka-side-menu .koka-external { width:22px; height:22px; }
#koka-side-menu .koka-external img { width:18px; height:18px; }
#koka-side-menu .koka-round-arrow,
#koka-side-menu .koka-round-arrow-bg { width:24px; height:24px; }
#koka-side-menu .koka-round-arrow-icon { left:8.115px; top:8.115px; width:7.77px; height:7.77px; }
.koka-external { display:flex; align-items:center; justify-content:center; width:18px; height:18px; }
.koka-external img { display:block; width:15.1px; height:15.1px; }
.koka-round-arrow { position:relative; display:block; width:20px; height:20px; flex:none; transition:transform .2s ease; }
#koka-side-menu a:is(:hover,:focus-visible) .koka-round-arrow { transform:translateX(3px); }
.koka-round-arrow-bg { position:absolute; inset:0; width:20px; height:20px; }
.koka-round-arrow-icon { position:absolute; left:6.762px; top:6.762px; width:6.476px; height:6.476px; }

#wrapperFooter.koka-site-footer { margin:0; width:100%; max-width:none; background:#fff; }
.koka-footer-container { width:calc(100% - 200px); max-width:1200px; margin:0 auto; }
.koka-footer-top { padding:96px 0 60px; background:#e4f1fa; }
.koka-footer-cards { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-bottom:96px; }
.koka-footer-card { position:relative; min-height:204px; padding:29px 90px 35px 56px; background:#fff; transition:box-shadow .2s; }
.koka-footer-card:is(:hover,:focus-visible) { opacity:1; box-shadow:0 8px 24px rgb(0 59 147 / .1); }
.koka-footer-card-title { display:block; margin-bottom:16px; font-family: 'Barlow Numerals', 'Zen Kaku Gothic New', sans-serif; font-size:40px; font-weight:700; letter-spacing:2px; line-height:1.25; color:var(--koka-blue); }
.koka-footer-card > span:last-of-type { display:block; font-size:15px; letter-spacing:2.25px; line-height:29px; }
.koka-footer-card:first-child > span:last-of-type { max-width:410px; }
.koka-footer-card:last-child { padding-left:47px; }
.koka-footer-card:last-child > span:last-of-type { max-width:375px; }
.koka-footer-card > img { position:absolute; right:33px; top:50%; transform:translateY(-50%); width:41px; height:auto; transition:transform .2s ease; }
.koka-footer-card:is(:hover,:focus-visible) > img { transform:translate(5px,-50%); }
.koka-sitemap { display:grid; grid-template-columns:1fr 1fr 1.08fr 1fr 1fr; gap:24px; margin:0; }
.koka-sitemap-title { display:flex; align-items:center; gap:8px; margin:0 0 16px; font-size:16px; font-weight:700; letter-spacing:2.4px; line-height:1.5; white-space:nowrap; }
.koka-sitemap-title::before { content:''; width:10px; height:10px; flex:none; background:var(--koka-red); border-radius:50%; }
.koka-sitemap-list { font-size:15px; letter-spacing:2.25px; line-height:32px; }
.koka-sitemap-list + .koka-sitemap-title { margin-top:58px; }
.koka-sitemap-list li { position:relative; padding-left:12px; }
.koka-sitemap-list li::before { content:'・'; position:absolute; left:-4px; }
.koka-sitemap-list .koka-sitemap-subtitle { font-weight:700; padding:0; }
.koka-sitemap-list .koka-sitemap-subtitle::before { content:none; }
.koka-sitemap-list .koka-sitemap-subtitle:not(:first-child) { margin-top:24px; }
.koka-sitemap a:hover, .koka-school-links a:hover { color:var(--koka-red); }
.koka-footer-info { display:grid; grid-template-columns:37% 1fr; gap:24px; padding-top:88px; padding-bottom:88px; }
.koka-footer-school-info .koka-brand { width:360px; max-width:100%; margin:0 0 49px -9px; }
.koka-footer-school-info address { font-style:normal; font-size:14px; letter-spacing:.7px; line-height:24px; }
.koka-footer-school-info address p { margin:0 0 11px; }
.koka-footer-school-info address a[href^='mailto:'] { text-decoration:underline; }
.koka-school-links { display:block; }
.koka-school-links summary { display:block; margin:0 0 45px; color:var(--koka-red); font-size:24px; letter-spacing:3.6px; line-height:35px; cursor:default; list-style:none; }
.koka-school-links summary::-webkit-details-marker { display:none; }
.koka-school-links .koka-plus { display:none; }
.koka-school-links > ul { display:grid; grid-template-columns:1.2fr 1fr 1fr; grid-auto-flow:column; grid-template-rows:repeat(5,auto); column-gap:24px; font-size:14px; line-height:28px; letter-spacing:.7px; }
.koka-school-links > ul li { position:relative; padding-left:12px; }
.koka-school-links > ul li::before { content:'・'; position:absolute; left:-3px; }
.koka-school-links > ul li:nth-child(6) { grid-row:1 / 6; }
.koka-school-links > ul li:nth-child(n+7) { grid-column:3; }
.koka-footer-bottom { padding:36px 0; background:var(--koka-red); color:#fff; }
.koka-footer-bottom .koka-footer-container { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.koka-footer-bottom nav ul { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; font-size:12px; letter-spacing:.6px; font-weight:700; }
.koka-footer-bottom small { font-size:11px; letter-spacing:.3px; line-height:24px; text-align:right; }
.koka-footer-bottom a:hover { text-decoration:underline; }

@media (min-width:1024px) and (max-width:1270px) {
  #koka-site-header { grid-template-columns:280px 1fr; padding-left:24px; padding-right:89px; column-gap:20px; }
  #koka-site-header.is-compact { grid-template-columns:245px minmax(0,1fr); }
  .koka-header-utility { gap:18px; }
  .koka-utility { gap:15px; font-size:12px; }
  /* 小さめのPCでも文字は18pxを保ち、リンク間隔で横幅を調整する。 */
  .koka-nav > ul { gap:16px; }
  .koka-nav__trigger { letter-spacing:0; }
  .koka-footer-container { width:calc(100% - 80px); }
  .koka-footer-card { padding-left:35px; }
  .koka-sitemap { gap:16px; }
  .koka-sitemap-list { font-size:13px; letter-spacing:1px; }
  .koka-sitemap-title { font-size:14px; letter-spacing:1px; }
  .koka-footer-info { grid-template-columns:34% 1fr; }
  .koka-school-links > ul { font-size:12px; column-gap:14px; }
}

@media (max-width:1023px) {
  #koka-site-header { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; height:65px; padding:0 0 0 13px; }
  #koka-site-header .koka-brand-wrap { width:216px; max-width:calc(100% - 85px); }
  .koka-header-utility, .koka-nav, #koka-side-menu { display:none; }
  #koka-menu-toggle { display:block; position:relative; flex:none; width:65px; height:65px; padding:0; background:var(--koka-red); }
  .koka-menu-open-icon { display:block; width:65px; height:65px; max-width:none; }
  .koka-menu-close-icon { display:none; }
  .koka-menu-close-icon > img { display:block; width:15px; height:15px; margin:0 auto 6px; }
  .koka-menu-close-icon > span { display:block; font-family: 'Barlow Numerals', 'Zen Kaku Gothic New', sans-serif; font-size:11px; font-weight:700; letter-spacing:1.65px; color:#fff; line-height:15px; }
  #koka-menu-toggle[aria-expanded='true'] .koka-menu-open-icon { display:none; }
  #koka-menu-toggle[aria-expanded='true'] .koka-menu-close-icon { display:block; }
  body.koka-menu-is-open { position:fixed; width:100%; overflow:hidden; }
  body.koka-menu-is-open #koka-site-header { position:fixed; inset:0 0 auto; width:100%; }
  #koka-mobile-menu { display:block; position:fixed; z-index:999; inset:65px 0 0; overflow:auto; overscroll-behavior:contain; background:var(--koka-red); color:#fff; }
  #koka-mobile-menu nav { margin:0; }
  .koka-mobile-primary summary,
  .koka-mobile-primary > li > a { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:15px 26px; border-bottom:1px solid rgb(255 255 255 / .5); font-size:14px; font-weight:500; letter-spacing:2.1px; line-height:23px; list-style:none; cursor:pointer; }
  .koka-mobile-primary summary::-webkit-details-marker { display:none; }
  /* キーボード操作の枠を項目内に収め、次の行に白い線がはみ出すのを防ぐ。 */
  .koka-mobile-primary summary:focus-visible,
  .koka-mobile-primary > li > a:focus-visible { outline-offset:-4px; }
  .koka-mobile-primary .koka-plus { display:block; width:15px; height:15px; flex:none; }
  .koka-mobile-primary details[open] summary { background:rgb(0 0 0 / .06); }
  .koka-mobile-primary details[open] .koka-plus { transform:rotate(45deg); }
  /* カテゴリ内の全リンクを共通の行にする。グループの境界にも余白や別の線を追加しない。 */
  .koka-mobile-primary details > ul { background:var(--koka-gray); color:#000; }
  .koka-mobile-primary details > ul a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:13px 26px; margin:0; border-bottom:1px solid #d9d9d9; font-size:13px; font-weight:500; letter-spacing:0; line-height:24px; }
  .koka-mobile-primary .koka-nav-course-group,
  .koka-mobile-primary .koka-nav-admission-group { padding:0; margin:0; background:transparent; }
  .koka-mobile-primary .koka-nav-course-link > span { min-width:0; }
  .koka-mobile-primary > li > a::after,
  .koka-mobile-primary details > ul a::after { content:none; }

  .koka-mobile-special { display:grid; grid-template-columns:1fr 1fr; color:#000; background:var(--koka-gray); }
  .koka-mobile-special a { display:flex; justify-content:space-between; align-items:center; min-height:55px; padding:12px 15px 12px 25px; gap:6px; font-size:14px; letter-spacing:1.3px; }
  .koka-mobile-special a + a { border-left:1px solid var(--koka-red); padding-left:21px; }
  .koka-mobile-links { display:grid; grid-template-columns:1fr 1fr; }
  .koka-mobile-links li { border-bottom:1px solid rgb(255 255 255 / .5); }
  .koka-mobile-links li:nth-child(even) { border-left:1px solid rgb(255 255 255 / .5); }
  .koka-mobile-links a { display:flex; align-items:center; min-height:54px; padding:13px 25px; font-size:14px; font-weight:500; letter-spacing:2.1px; line-height:25px; }
  #koka-mobile-menu .koka-socials { gap:14px; min-height:98px; padding:30px 0; }
  #koka-mobile-menu .koka-socials a { width:28px; height:28px; }
  #koka-mobile-menu .koka-socials__square { background:white; width:21px; height:21px; }
  #koka-mobile-menu .koka-socials li:nth-child(2) .koka-socials__square { background:transparent; }
  #koka-mobile-menu .koka-socials li:nth-child(2) img { width:10px; height:auto; max-width:none; }
  /* メニューのLINEは背景が透過した白いSVGを使い、黒いPNG背景と合成処理をなくす。 */
  #koka-mobile-menu .koka-socials__line {
    mix-blend-mode:normal;
    width:28px;
    height:27px;
    border-radius:0;
    background:transparent url('/img/cmn/line-white.svg') center / 25px 25px no-repeat;
  }
  #koka-mobile-menu .koka-socials__line img { display:none; }
  #koka-bottom-menu { display:block; position:fixed; z-index:980; inset:auto 0 0; background:var(--koka-red); color:#fff; padding-bottom:env(safe-area-inset-bottom); border:1px solid #de7070; }
  #koka-bottom-menu ul { display:grid; grid-template-columns:repeat(3,1fr); }
  #koka-bottom-menu li + li { border-left:1px solid rgb(255 255 255 / .5); }
  #koka-bottom-menu a { display:flex; align-items:center; justify-content:center; gap:10px; height:58px; font-size:14px; white-space:nowrap; }
  #koka-bottom-menu img { display:block; width:auto; height:20px; }
  #koka-bottom-menu .access img { height:18px; }
  body.koka-menu-is-open #koka-bottom-menu { visibility:hidden; }
  #wrapperFooter.koka-site-footer { padding-bottom:calc(60px + env(safe-area-inset-bottom)); border-top:1px solid #ededed; }
  .koka-footer-top { display:none; }
  .koka-footer-container { width:100%; max-width:none; }
  .koka-footer-info { display:block; padding:60px 20px 55px; }
  .koka-footer-school-info .koka-brand { width:276px; max-width:100%; margin:0 0 39px 19px; }
  .koka-footer-school-info address { padding:0 0 0 6px; margin-right:-13px; font-size:14px; line-height:24px; letter-spacing:.7px; }
  .koka-footer-school-info address p { margin:0 0 8px; }
  .koka-footer-school-info address p:nth-child(2) { font-size:13px; letter-spacing:.4px; white-space:nowrap; }
  .koka-footer-school-info address a[href^='mailto:'] { text-decoration:none; }
  /* 学園リンク：角丸の枠、薄い区切り線、＋／−で開閉を示すモバイル用一覧。 */
  .koka-school-links {
    margin-top:36px;
    overflow:hidden;
    border:1px solid #e3e8ee;
    border-radius:12px;
    background:#fff;
  }
  .koka-school-links summary {
    display:flex;
    align-items:center;
    position:relative;
    min-height:55px;
    margin:0;
    padding:15px 48px 15px 18px;
    color:var(--koka-red);
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    line-height:24px;
    cursor:pointer;
  }
  .koka-school-links summary::before,
  .koka-school-links summary::after {
    content:'';
    position:absolute;
    right:19px;
    top:50%;
    width:12px;
    height:1.5px;
    background:currentColor;
    transform:translateY(-50%);
  }
  .koka-school-links summary::after {
    transform:translateY(-50%) rotate(90deg);
    transition:transform .2s ease;
  }
  .koka-school-links .koka-plus { display:none; }
  .koka-school-links summary:focus-visible { outline-offset:-4px; }
  .koka-school-links[open] summary { background:#f5f7fa; }
  .koka-school-links[open] summary::after { transform:translateY(-50%); }
  .koka-school-links > ul {
    display:block;
    padding:4px 18px 10px;
    border-top:1px solid #e3e8ee;
    background:#f5f7fa;
    font-size:13px;
    line-height:1.7;
    letter-spacing:.3px;
  }
  .koka-school-links > ul li { padding:0; border-bottom:1px solid #e3e8ee; }
  .koka-school-links > ul li:last-child { border-bottom:0; }
  .koka-school-links > ul li::before { content:none; }
  .koka-school-links > ul a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:44px;
    padding:10px 0;
    overflow-wrap:anywhere;
  }
  .koka-chrome .koka-school-links > ul a::after {
    content:'↗';
    position:static;
    flex:none;
    margin:0;
    font:500 15px/1 sans-serif;
    color:#8191a6;
  }
  .koka-school-links:not([open]) > ul { display:none; }
  .koka-footer-bottom { padding:26px 17px 16px; background:var(--koka-gray); color:#000; }
  .koka-footer-bottom .koka-footer-container { display:block; }
  .koka-footer-bottom nav ul { display:block; font-size:10px; font-weight:400; letter-spacing:.5px; line-height:28px; }
  .koka-footer-bottom small { display:block; margin-top:20px; padding-top:15px; border-top:1px solid #d5d5d5; font-size:10px; font-weight:400; letter-spacing:.3px; line-height:18px; text-align:left; }
}
@media (max-width:360px) {
  .koka-mobile-special a { padding-left:16px; font-size:12px; letter-spacing:.5px; }
  .koka-mobile-special a + a { padding-left:12px; }
  .koka-mobile-links a { padding-left:18px; font-size:12px; letter-spacing:1.5px; }
  .koka-footer-school-info .koka-brand { margin-left:6px; }
  .koka-footer-school-info address { font-size:12px; }
  .koka-footer-school-info address p:nth-child(2) { font-size:11px; }
  #koka-bottom-menu a { font-size:12px; gap:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .koka-chrome *, .koka-chrome *::before, .koka-chrome *::after { transition:none !important; }
  #koka-site-header.is-compact { animation:none; }
}

/* The sticky header occupies its own row; the old fixed-header offset is no longer needed. */
@media (max-width:640px) {
  #koka-site-header ~ #wrapperContent #content.top main article #main_visual { margin-top:0; }
}


/* 従来ページも、モバイルではヘッダー直下にパンくずを表示する。 */
@media (max-width: 1023px) {
  #koka-site-header ~ #PageHeader,
  #koka-site-header ~ #PageHeader_kyogaku,
  #PageHeader.koka-legacy-page-header,
  #PageHeader_kyogaku.koka-legacy-page-header {
    margin-top: 0;
  }
  #wrapperPankuzu.koka-legacy-breadcrumb {
    display: block;
    width: 100%;
    margin: 0;
  }
  #wrapperPankuzu.koka-legacy-breadcrumb #pankuzu .breadcrumbs article {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  #wrapperPankuzu.koka-legacy-breadcrumb #pankuzu .breadcrumbs .row {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px var(--koka-breadcrumb-gutter);
  }
  #wrapperPankuzu.koka-legacy-breadcrumb #pankuzu .breadcrumbs article section ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    line-height: 24px;
    text-align: left;
  }
  #wrapperPankuzu.koka-legacy-breadcrumb #pankuzu .breadcrumbs article section ul li {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #wrapperPankuzu.koka-legacy-breadcrumb li + li::before {
    flex: none;
  }
}
@media (max-width: 767px) {
  #wrapperPankuzu.koka-legacy-breadcrumb #pankuzu .breadcrumbs article section ul {
    line-height: 20px;
  }
}