/* ==========================================================
   学科サイトの共通スタイル（2026-11 刷新）
   ・スマホを基準に書き、広い画面は min-width で足す
   ・reset.css（研究会と共用）の後に読み込む
   ・文字は 12px 以上。藤紫（--c-line）は線だけに使い、文字や白文字の地にしない
========================================================== */
:root {
  --c-paper: #ffffff;
  --c-wash: #f4f2f8;      /* 藤：面を分ける地 */
  --c-navy: #250e62;      /* 紫紺：見出し・リンク・ボタン */
  --c-ink: #242424;       /* 墨：本文 */
  --c-ink-sub: #555555;
  --c-line: #9383b2;      /* 藤紫：線のみ */
  --c-line-soft: #e3dfea;
  --c-core: #f2c14e;      /* 花芯：花の中心だけ（白地で 1.7:1 なので印や線に使わない） */

  --font-body: "Noto Sans JP", sans-serif;
  --font-head: "Zen Old Mincho", serif;

  --gutter: 20px;
  --measure: 720px;       /* 本文の幅 */
  --wide: 1120px;         /* ページの幅。ヘッダー・写真・本文・フッターの左端をここでそろえる */
  --bar-h: 60px;          /* 固定ヘッダーの高さ */
}

html {
  font-size: 100%;
  scroll-padding-top: calc(var(--bar-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  padding-top: var(--bar-h);
  overflow-wrap: break-word; /* anywhere にすると、メニューが文字の途中で折れる */
  /* 中身の短いページでも、フッターを画面の下に置く */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--c-navy);
  text-underline-offset: .2em;
}

/* reset.css が outline:0 にしているので戻す */
:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3,
.accordion-title,
.file-list a span:first-child {
  word-break: auto-phrase; /* 対応ブラウザでは文節で折り返す */
  text-wrap: pretty;
}

/* 別のタブで開くリンクの印（PDF は「PDF」の表示があるので付けない） */
a[target="_blank"]:not([href$=".pdf"])::after {
  content: "\2197";
  content: "\2197" / "（別のタブで開きます）";
  margin-left: .2em;
  font-size: .85em;
  text-decoration: none;
  display: inline-block;
}

/* 本文へ飛ぶリンク（Tab キーで移ったときだけ出す） */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 8px 16px;
  background: var(--c-navy);
  color: #fff;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

main:focus {
  outline: 0;
}

/* ---------- 共通の部品 ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 28px;
  background: var(--c-navy);
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.button:hover {
  background: #3a1c8a;
}

/* ---------- ヘッダー ---------- */
.site-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line-soft);
}

.site-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--bar-h);
  max-width: calc(var(--wide) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 12px;
}

.site-logo {
  flex: 0 1 300px;
  min-width: 0;
}

.site-logo a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.site-logo img {
  width: 100%;
}

.nav-toggle {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-navy);
  font: inherit;
  font-size: .75rem;
  line-height: 1;
  cursor: pointer;
}

.nav-toggle-lines {
  position: relative;
  display: block;
  width: 24px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.nav-toggle-lines::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  border-top: 2px solid currentColor;
}

/* 開いているときは「×」にする */
.nav-toggle[aria-expanded="true"] .nav-toggle-lines {
  border-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before,
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  border-top: 2px solid var(--c-navy);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after {
  transform: rotate(-45deg);
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--bar-h));
  overflow-y: auto;
  background: var(--c-paper);
  border-bottom: 2px solid var(--c-navy);
}

.site-nav.is-open {
  display: block;
}

.site-nav a {
  display: block;
  padding: 12px var(--gutter);
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.site-nav > ul > li + li {
  border-top: 1px solid var(--c-line-soft);
}

.site-nav .submenu a {
  padding-left: calc(var(--gutter) + 1.2em);
}

.site-nav a[aria-current="page"] {
  box-shadow: inset 4px 0 0 var(--c-navy);
}

/* ---------- トップの最初の画面（縦書きの標語） ---------- */
.hero {
  display: grid;
  grid-template-columns: 60% 1fr;
  grid-template-areas:
    "photo motto"
    "lead  lead"
    "cta   cta"
    "links links";
  max-width: var(--wide);
  margin: 0 auto;
}

.hero-photo {
  grid-area: photo;
  display: block;
}

.hero-photo img {
  width: 100%;
  aspect-ratio: 440 / 664;
  object-fit: cover;
}

/* 列は右から左へ流れる。文字は写真に重ねない */
.hero-motto {
  grid-area: motto;
  /* 縦書きでは column が右から左への並びになる */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: center; /* 枠を文字の高さにそろえ、3列の下端を合わせる */
  justify-self: center;
  padding: 16px 4px;
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: clamp(1.625rem, 8.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.hero-motto span {
  display: block;
  white-space: nowrap;
}

.hero-motto span + span {
  margin-top: .75em; /* 2列目は1字下げて、句の切れ目を見せる */
}

.hero-motto .hero-motto-rest {
  margin-top: 0;
  margin-right: .6em;
  align-self: flex-end;
  font-size: .5em;
  font-weight: 700;
  line-height: 1.6;
}

/* 読み込んだときに1回だけ、標語を上から書き下ろす */
@media (prefers-reduced-motion: no-preference) {
  .hero-motto span {
    animation: write-down .5s ease-out both;
  }

  .hero-motto span:nth-child(2) {
    animation-delay: .25s;
  }

  .hero-motto span:nth-child(3) {
    animation-delay: .5s;
  }

  @keyframes write-down {
    from {
      clip-path: inset(0 0 100% 0);
    }

    to {
      clip-path: inset(0 0 -10% 0);
    }
  }
}

.hero-lead {
  grid-area: lead;
  padding: 20px var(--gutter) 0;
  word-break: auto-phrase; /* 対応ブラウザでは文節で折り返す */
}

.hero-cta {
  grid-area: cta;
  padding: 16px var(--gutter) 0;
}

.hero-cta .button {
  width: 100%;
}

.hero-links {
  grid-area: links;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 16px;
  border-block: 1px solid var(--c-line-soft);
}

.hero-links li + li {
  border-left: 1px solid var(--c-line-soft);
}

.header-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 4px 2px;
  font-size: .875rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.header-link:hover {
  background: var(--c-wash);
}

/* ---------- 節と見出し ---------- */
.section {
  padding: 56px var(--gutter) 0;
}

.section-inner {
  max-width: var(--wide);
  margin: 0 auto;
}

.section h2 {
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------- 表彰欄（表彰者が出たときに index.html のコメントを外す） ---------- */
.award-announcement {
  padding: 16px var(--gutter);
  background: var(--c-wash);
  border-left: 4px solid var(--c-navy);
}

.award-container {
  max-width: var(--wide);
  margin: 0 auto;
}

.award-text p {
  color: var(--c-navy);
  font-weight: 700;
}

/* ---------- 10の花びら ---------- */
.fields {
  margin-top: 48px;
  padding-block: 44px;
  background: var(--c-wash);
}

.fields-text p {
  margin-top: 12px;
}

.fields-hint {
  color: var(--c-ink-sub);
  font-size: .875rem;
}

/* 花の大きさは画面の幅から決め、花びらの位置や大きさはその比で書く */
.flower {
  --size: min(calc(100vw - 16px), 480px);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 20px auto 0;
  left: 50%;
  transform: translateX(-50%);
}

.flower-petals li {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--angle)) translateY(calc(var(--size) * -.335)) rotate(calc(var(--angle) * -1));
}

.flower-petals a {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size) * .2);
  height: calc(var(--size) * .13);
  transform: translate(-50%, -50%);
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: clamp(.75rem, 3.4vw, 1rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

/* 花びらの形。リンクの一部なので、形のどこを押しても進む */
.flower-petals a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--size) * .2);
  height: calc(var(--size) * .33);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle));
}

.flower-petals a span {
  position: relative;
}

.flower-petals a:active::before {
  background: #d8cfe8;
}

.flower-petals a:hover::before {
  background: #e9e4f2;
}

.flower-petals a:focus-visible {
  outline: 0;
}

.flower-petals a:focus-visible::before {
  outline: 3px solid var(--c-navy);
  outline-offset: 1px;
}

.flower-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size) * .23);
  height: calc(var(--size) * .23);
  transform: translate(-50%, -50%);
  background: var(--c-core);
  border-radius: 50%;
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: clamp(.75rem, 3.4vw, 1rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* ---------- ニチブンの毎日から（横送り） ---------- */
.daily-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.daily-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
}

.daily-nav[hidden] {
  display: none;
}

.daily-count {
  color: var(--c-ink-sub);
  font-size: .875rem;
  white-space: nowrap;
}

.daily-controls {
  display: none;
  gap: 8px;
}

.daily-button {
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-navy);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.daily-button:hover:not(:disabled) {
  background: var(--c-wash);
}

.daily-button:disabled {
  opacity: .35;
  cursor: default;
}

.daily-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 340px);
  gap: 16px;
  margin: 20px calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter) 12px;
  overflow-x: auto;
  align-items: start; /* 説明の短いカードの下に空白を作らない */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}

.daily-item {
  scroll-snap-align: start;
}

.daily-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-wash);
}

.daily-item h3 {
  margin-top: 2px;
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.daily-item p:last-child {
  margin-top: 6px;
}

.daily-date {
  margin-top: 10px;
  color: var(--c-ink-sub);
  font-size: .875rem;
  line-height: 1.5;
}

/* ---------- お知らせ（トップ） ---------- */
.news-list {
  margin-top: 16px;
  border-top: 1px solid var(--c-line-soft);
}

.news-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line-soft);
}

.news-list a:first-child {
  display: block;
  color: var(--c-ink);
  text-decoration: none;
}

.news-list a:first-child:hover {
  color: var(--c-navy);
  text-decoration: underline;
}

.news-file {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 0;
  font-size: .875rem;
}

.news-more {
  margin-top: 24px;
}

.news-more .button {
  width: 100%;
}

/* ---------- 下層ページの見出し ---------- */
.page-head {
  padding: 40px var(--gutter) 28px;
  background: var(--c-wash);
}

.page-head h1 {
  max-width: var(--wide);
  margin: 0 auto;
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.page-section {
  padding-top: 40px;
}

.section-lead {
  max-width: var(--measure);
  margin-top: 12px;
}

/* ---------- 開閉の部品（お知らせ・よくあるご質問・各分野の紹介） ---------- */
.accordion {
  max-width: 860px;
  border-top: 1px solid var(--c-line-soft);
}

.accordion-item {
  border-bottom: 1px solid var(--c-line-soft);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 14px 2px;
  background: none;
  border: 0;
  color: var(--c-navy);
  font: inherit;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}

.accordion-trigger:hover {
  background: var(--c-wash);
}

.accordion-date {
  display: block;
  color: var(--c-ink-sub);
  font-size: .875rem;
  font-weight: 400;
}

/* ＋／－の印 */
.accordion-mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.accordion-mark::before,
.accordion-mark::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}

.accordion-mark::after {
  transform: rotate(90deg);
}

.accordion-trigger[aria-expanded="true"] .accordion-mark::after {
  display: none;
}

.accordion-panel {
  max-width: var(--measure);
  padding: 2px 2px 20px;
}

/* hidden="until-found" は余白を残すので消す */
.accordion-panel[hidden] {
  padding: 0;
}

.accordion-panel > * + * {
  margin-top: 10px;
}

.plain-list {
  padding-left: 1em;
}

.plain-list li {
  position: relative;
  padding: 2px 0 2px .9em;
}

.plain-list li::before {
  content: "";
  position: absolute;
  top: .8em;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--c-line);
  border-radius: 50%;
}

/* ---------- PDF の一覧（かわらばん・パンフレット・図録） ---------- */
.file-list {
  margin-top: 16px;
  border-top: 1px solid var(--c-line-soft);
}

.file-list li {
  border-bottom: 1px solid var(--c-line-soft);
}

.file-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 2px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.file-size {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  color: var(--c-navy);
  font-size: .75rem;
  font-weight: 400;
}

.file-list a:hover {
  background: var(--c-wash);
}

/* ---------- 授業・教員紹介 ---------- */
.page-head + .fields {
  margin-top: 0;
}

.section .accordion-heading {
  color: inherit;
  font: inherit;
}

.field-list {
  margin-top: 20px;
}

.field-teachers {
  color: var(--c-ink-sub);
  font-size: .875rem;
}

.accordion-panel .file-list {
  display: block;
  border-top: 0;
}

.accordion-panel .file-list li:last-child {
  border-bottom: 0;
}

.faculty-list {
  margin-top: 16px;
  border-top: 1px solid var(--c-line-soft);
}

.faculty-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line-soft);
}

/* 小さい写真（105×140 など）があるので、大きくしない */
.faculty-item img {
  width: 80px;
  height: 100px;
  object-fit: cover;
  object-position: top;
  background: var(--c-wash);
}

.faculty-item h3 {
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.faculty-item p {
  margin-top: 2px;
  font-size: .875rem;
  line-height: 1.6;
}

.faculty-item a {
  display: inline-block;
  margin-top: 2px;
  padding: 6px 0;
  font-size: .875rem;
  line-height: 1.5;
}

/* ---------- 書道 ---------- */
.breadcrumb {
  max-width: var(--wide);
  margin: 0 auto 8px;
  font-size: .875rem;
}

.breadcrumb a {
  display: inline-block;
  padding: 4px 0;
}

.shodo-gallery {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.shodo-gallery img {
  width: 100%;
}

.page-back {
  margin-top: 32px;
}

.page-back .button {
  width: 100%;
}

/* ---------- アクセス ---------- */
.access {
  display: grid;
  gap: 24px;
}

.access-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

.access-text h2 {
  font-size: 1.125rem;
}

.access-lead {
  margin-top: 8px;
  font-weight: 700;
}

.access-steps {
  margin-top: 12px;
  counter-reset: step;
}

.access-steps li {
  position: relative;
  padding: 10px 0 10px 40px;
  border-bottom: 1px solid var(--c-line-soft);
  counter-increment: step;
  line-height: 1.7;
}

.access-steps li::before {
  content: counter(step);
  position: absolute;
  top: 10px;
  left: 0;
  width: 28px;
  height: 28px;
  background: var(--c-navy);
  border-radius: 50%;
  color: #fff;
  font-size: .875rem;
  line-height: 28px;
  text-align: center;
}

.access-note {
  margin-top: 12px;
  color: var(--c-ink-sub);
  font-size: .875rem;
}

/* ---------- お問い合わせ ---------- */
.contact {
  max-width: var(--measure);
}

.contact-note {
  margin-top: 8px;
  font-size: .875rem;
}

.required {
  display: inline-block;
  margin: 0 4px;
  padding: 0 6px;
  background: var(--c-navy);
  border-radius: 2px;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: .1em;
}

.form-group {
  margin-top: 20px;
}

.form-label {
  display: block;
  color: var(--c-navy);
  font-weight: 700;
}

/* 文字は 16px 以上にする（小さいと iPhone が入力時に拡大する） */
.form-input,
.form-textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  color: var(--c-ink);
  font: inherit;
  font-size: 1rem;
}

.form-textarea {
  min-height: 180px;
  resize: vertical;
}

.form-policy {
  margin-top: 28px;
  border: 1px solid var(--c-line-soft);
  border-radius: 4px;
}

.form-policy summary {
  min-height: 48px;
  padding: 12px 14px;
  color: var(--c-navy);
  font-weight: 700;
  cursor: pointer;
}

.form-policy-text {
  padding: 0 14px 14px;
  font-size: .875rem;
  line-height: 1.75;
}

.form-policy-text p + p {
  margin-top: 8px;
}

.form-text-bold {
  font-weight: 700;
}

.form-caution-note {
  margin-top: 12px;
  font-size: .875rem;
}

.form-submit {
  width: 100%;
  margin-top: 20px;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.form-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fbeaea;
  border-left: 4px solid #a01f1f;
  color: #7a1616;
  font-size: .875rem;
}

/* 送信後は、contact.html のスクリプトがフォームを消してこちらを出す */
.success-message-text {
  display: none;
}

/* ---------- フッター ---------- */
.site-footer {
  margin-top: 64px;
  padding: 40px var(--gutter) 24px;
  background: var(--c-wash);
  font-size: .875rem;
}

.footer-inner {
  display: grid;
  gap: 28px;
  max-width: var(--wide);
  margin: 0 auto;
}

.footer-name {
  color: var(--c-navy);
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.footer-address {
  margin-top: 4px;
}

.footer-nav ul,
.footer-related {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 16px;
}

.footer-related {
  grid-template-columns: 1fr;
}

.footer-nav a,
.footer-related a {
  display: inline-block;
  padding: 7px 0;
  line-height: 1.5;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-related a:hover {
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line-soft);
  font-size: .75rem;
}

.footer-logo img {
  width: 132px;
}

/* ---------- タブレットの縦向き：横長の写真を切り抜いて、右に標語 ---------- */
@media (min-width: 600px) {
  .hero {
    grid-template-columns: 1fr 34%;
  }

  .hero-photo img {
    aspect-ratio: 1 / 1.05;
    max-height: calc(100vh - var(--bar-h) - 200px); /* 説明とボタンの分を残す */
    object-position: 58% 50%; /* 顔と筆が入る位置 */
  }

  .hero-motto {
    font-size: min(6vw, calc((100vh - var(--bar-h) - 200px) / 10.5));
  }
}

/* ---------- 広い画面 ---------- */
@media (min-width: 900px) {
  :root {
    --gutter: 32px;
  }

  .site-bar-inner {
    padding: 0 var(--gutter);
  }

  .hero {
    grid-template-columns: 1fr 380px;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
      "photo motto"
      "photo lead"
      "photo cta"
      "links links";
    max-width: calc(var(--wide) + var(--gutter) * 2);
    margin-top: 24px;
    padding: 0 var(--gutter);
  }

  .hero-photo img {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    min-height: 520px;
  }

  .hero-motto {
    padding: 8px 0 24px 32px;
    font-size: 2.5rem;
  }

  .hero-lead {
    padding: 0 0 0 32px;
  }

  .hero-cta {
    padding: 20px 0 0 32px;
  }

  .hero-links {
    margin-top: 24px;
  }

  .header-link {
    font-size: 1rem;
  }

  .section h2 {
    font-size: 2rem;
  }

  .fields-inner {
    display: grid;
    grid-template-columns: 1fr 480px;
    align-items: center;
    gap: 48px;
  }

  .fields-text {
    max-width: 30em;
  }

  .flower {
    --size: 480px;
    left: auto;
    margin: 0;
    transform: none;
  }

  .flower-petals a,
  .flower-core {
    font-size: 1rem;
  }

  .daily-controls {
    display: flex;
  }

  .daily-track {
    grid-auto-columns: calc((100% - 32px) / 3);
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .news-list a:first-child {
    max-width: var(--measure);
  }

  .news-more .button {
    width: auto;
  }

  .page-head {
    padding-block: 56px 36px;
  }

  .page-head h1 {
    font-size: 2.375rem;
  }

  .file-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
  }

  .file-list--single {
    max-width: 480px;
    grid-template-columns: 1fr;
  }

  .faculty-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
  }

  .shodo-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .page-back .button {
    width: auto;
  }

  .access {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    gap: 40px;
  }

  .access-map iframe {
    height: 480px;
  }

  .form-submit {
    width: auto;
    min-width: 240px;
  }

  .footer-inner {
    grid-template-columns: 1.4fr 1.2fr 1fr;
    align-items: start;
  }

  .footer-bottom {
    grid-column: 1 / -1;
  }
}

/* ---------- メニューを横に並べる（全項目が1行に入る幅から） ---------- */
@media (min-width: 1060px) {
  :root {
    --bar-h: 72px;
  }

  .site-logo {
    flex-basis: 340px;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    border: 0;
  }

  .site-nav > ul {
    display: flex;
    gap: 4px;
  }

  .site-nav > ul > li + li {
    border: 0;
  }

  .site-nav a {
    padding: 10px 10px;
    font-size: 1rem;
    white-space: nowrap;
  }

  .site-nav a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--c-navy);
  }

  .site-nav a:hover {
    background: var(--c-wash);
  }

  /* 書道のページでは、親の「授業・教員紹介」に現在地の印を出す */
  .site-nav .has-submenu:has(.submenu [aria-current]) > a {
    box-shadow: inset 0 -3px 0 var(--c-navy);
  }

  .site-nav .has-submenu {
    position: relative;
  }

  .site-nav .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: var(--c-paper);
    border: 1px solid var(--c-line-soft);
  }

  .site-nav .has-submenu:hover .submenu,
  .site-nav .has-submenu:focus-within .submenu {
    display: block;
  }

  .site-nav .submenu a {
    padding-left: 12px;
  }
}

/* ---------- 高さの足りない画面（スマホの横向き）：写真・標語・説明を横に並べ、1画面に収める ---------- */
@media (min-width: 600px) and (max-height: 520px) {
  .hero {
    --hero-h: calc(100vh - var(--bar-h) - 49px);
    grid-template-columns: 42% auto 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "photo motto lead"
      "photo motto cta"
      "links links links";
    margin-top: 0;
    padding: 0;
  }

  .hero-photo img {
    width: 100%;
    height: var(--hero-h);
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
  }

  .hero-motto {
    padding: 8px 20px;
    font-size: min(calc((100vh - var(--bar-h) - 49px - 16px) / 10), 2.5rem);
  }

  .hero-lead {
    align-self: end;
    padding: 0 16px 0 0;
    font-size: .875rem;
    line-height: 1.7;
  }

  .hero-cta {
    align-self: start;
    padding: 12px 16px 12px 0;
  }

  .hero-links {
    margin-top: 0;
  }
}