/* =====================================================================
 * 大阪の学校の歴史：QJWeb（https://qjweb.jp/）の形（2026-11-12 台帳 [1788]）。editorial.css・school.css のあとに読む。
 *   白い頭（ロゴ・太い黒枠の検索）→ 黒い帯に斜体の英字のメニュー → 淡い模様の背景
 *   → 上のスライド（左に絵・右に白いカード＝黒い札・青い題名・説明・波線・ドットの日付・▶MORE）
 *   → 大きな斜体の英字の見出し＋全幅の水色の帯 → 白いカード（NEW のシール・札・青い題名・説明・波線・日付・MORE）
 * ===================================================================== */
:root { --qj-ink: #161616; --qj-blue: #1a5fb4; --qj-cyan: #3cc0ec; --qj-yellow: #ffe234; --qj-pink: #ff5fc8; --qj-sub: #555; }
body { background: #f3f3f1 url(../img/qj-bg.svg) 0 0 / 360px 360px; color: var(--qj-ink); overflow-x: hidden; }
.qj-en, .qj-h, .gnav a small, .qj-tag, .qj-more { font-family: "Montserrat", "Inter", sans-serif; font-style: italic; font-weight: 800; letter-spacing: .02em; }
.qj-date { font-family: "DotGothic16", monospace; font-size: 20px; letter-spacing: .06em; color: #333; }

/* ---- 頭 ---- */
.notice { background: #fff; color: var(--qj-sub); font-size: 13px; border-bottom: 1px solid #e6e6e6; }
.site-head { background: #fff; border-bottom: 0; }
.head-row { min-height: 76px; }
.site-head .logo .ja { font-weight: 900; }
.qj-search { display: flex; align-items: center; border: 3px solid var(--qj-ink); border-radius: 4px; height: 40px; width: min(220px, 40vw); background: #fff; }
.qj-search input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 0 10px; background: none; }
.qj-search button { width: 38px; height: 38px; margin-right: -3px; border: 0; border-radius: 50%; background: var(--qj-ink); color: #fff; display: grid; place-items: center; cursor: pointer; }
.qj-search svg { width: 18px; height: 18px; }
.site-head .gnav { background: #241c1c; border: 0; }
.site-head .gnav ul { justify-content: center; gap: 0 34px; padding: 0 16px; }
.site-head .gnav a { color: #fff; padding: 9px 0; font-size: 13px; display: flex; align-items: baseline; gap: 8px; }
.site-head .gnav a small { font-size: 14px; color: #fff; text-transform: uppercase; opacity: 1; }
.site-head .gnav a[aria-current="page"] small, .site-head .gnav a:hover small { color: var(--qj-yellow); }

/* ---- 見出し（大きな斜体の英字＋矢印＋全幅の水色の帯） ---- */
.sec-head { position: relative; display: block; margin: 0 0 34px; padding: 0 0 0; }
.sec-head h2 { font-family: "Montserrat", "Inter", sans-serif; font-style: italic; font-weight: 800; font-size: clamp(40px, 5vw, 60px); line-height: 1; text-transform: uppercase; color: var(--qj-ink); margin: 0; position: relative; z-index: 1; display: inline-block; padding-bottom: 14px; }
.sec-head h2::after { content: ""; position: absolute; left: 0; right: -10px; bottom: 0; height: 4px; background: var(--qj-ink); clip-path: polygon(0 40%, 92% 40%, 92% 0, 100% 50%, 92% 100%, 92% 60%, 0 60%); }
.sec-head .ja { display: block; position: relative; margin: -18px calc(50% - 50vw) 0; padding: 22px 16px 18px; background: var(--qj-cyan); text-align: center; font-weight: 700; font-size: 15px; color: var(--qj-ink); }
.sec-head .more { position: absolute; right: 0; top: 18px; z-index: 1; font-family: "Montserrat", sans-serif; font-style: italic; font-weight: 800; color: var(--qj-ink); }

/* ---- 上のスライド（1枚ずつ・左に絵／右に白いカード） ---- */
.hero { padding: 64px 0 40px; }
.hero .slides { position: relative; }
.hero .slide > a { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; width: 100%; margin: 0; text-decoration: none; color: var(--qj-ink); background: #fff; box-shadow: 10px 0 0 var(--qj-blue); }
.hero .slide-ph { aspect-ratio: auto; height: 100%; min-height: 300px; }
.hero .slide-ph img { width: 100%; height: 100%; object-fit: cover; }
.hero .initial { display: none; }
.hero .slide-text { position: static; padding: 30px 34px 26px; background: #fff; color: var(--qj-ink); display: flex; flex-direction: column; gap: 14px; text-shadow: none; }
.hero .slide-text .cat { display: flex; gap: 6px; margin: 0; }
.hero .slide-text h2 { color: var(--qj-blue); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; font-weight: 700; margin: 0; }
.qj-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.qj-tag { display: inline-block; background: var(--qj-ink); color: #fff; font-size: 12px; padding: 2px 8px; text-transform: uppercase; }
.qj-wave { height: 8px; background: radial-gradient(circle at 6px -2px, transparent 5px, #333 5.5px, #333 6.8px, transparent 7.3px) 0 0 / 12px 8px repeat-x; border: 0; margin: 4px 0 0; }
.qj-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qj-more { font-size: 16px; color: var(--qj-ink); text-decoration: underline; text-underline-offset: 3px; }
.qj-more::before { content: "▶"; font-style: normal; margin-right: 4px; font-size: 13px; }
.hero .slider-ctrl { justify-content: center; margin-top: 26px; }
.hero .dots button { width: 22px; height: 6px; border-radius: 0; background: #bdbdbd; }
.hero .dots button[aria-current="true"] { background: var(--qj-ink); }

/* ---- 白いカード ---- */
.grid4 { gap: 22px; }
.grid4 .card { position: relative; background: #fff; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--qj-ink); box-shadow: 0 1px 0 #e5e5e5; }
.grid4 .card .ph { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #ddd; }
.grid4 .card .ph img { width: 100%; height: 100%; object-fit: cover; }
.grid4 .card .cat { display: none; }
.grid4 .card h3 { color: var(--qj-blue); font-size: 18px; line-height: 1.45; margin: 0; font-weight: 700; }
.grid4 .card .tags { display: none; }
.qj-ex { font-size: 13.5px; line-height: 1.7; color: #333; margin: 0; font-weight: 700; }
.qj-new { position: absolute; left: 8px; top: 8px; z-index: 1; background: var(--qj-yellow); color: var(--qj-ink); font-family: "Montserrat", sans-serif; font-style: italic; font-weight: 800; font-size: 12px; padding: 3px 12px; border-radius: 999px; transform: rotate(-4deg); }
.grid4 .card time, .grid4 .card .card-soon { font-family: "DotGothic16", monospace; font-size: 17px; }
.grid4 .card:hover h3 { text-decoration: underline; }

/* ---- 下の帯（ふつうの段）は白に ---- */
.band-1, .band-2 { background: transparent; }
.web-list li > a, .web-list li > div { background: #fff; }

@media (max-width: 760px) {
  .hero { padding: 26px 0 20px; }
  .hero .slide > a { grid-template-columns: 1fr; box-shadow: 6px 6px 0 var(--qj-blue); }
  .hero .slide-ph { min-height: 0; aspect-ratio: 16 / 9; }
  .hero .slide-text { padding: 18px 18px 16px; }
  .qj-search { display: none; }
  .site-head .gnav ul { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; gap: 0 22px; }
  .sec-head .more { position: static; display: inline-block; margin: 10px 0 0; }
}

/* ---- 直し（2026-11-12）：全幅の帯ではみ出さない・前の検索のアイコンを隠す（新しい検索窓があるので） ---- */
html, body { overflow-x: clip; }
.head-row > a.icon-btn[href="/schools/"] { display: none; }
@media (max-width: 760px) { .head-row > a.icon-btn[href="/schools/"] { display: inline-grid; } }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid4 .card h3, .qj-ex { overflow-wrap: anywhere; }
@media (max-width: 960px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .grid4 .card { padding: 10px 10px 12px; } .grid4 .card h3 { font-size: 16px; } }
.qj-foot { flex-wrap: wrap; row-gap: 4px; } .qj-foot .qj-more { margin-left: auto; }

/* =====================================================================
 * 2026-11-13 カツ「メインビジュアルを前後のスライドを半分ずつ見えるように」「いまのデザインを維持しつつ、背景の模様・色あい・フォントなどを違う感じに」
 *   前後を半分のぞかせる（--sw を画面の約半分に）・背景＝生成りの方眼紙・色＝黒板の緑／からし色／れんが色・書体＝DM Serif Display 斜体＋Zen Kaku Gothic New＋Courier Prime
 * ===================================================================== */
:root { --qj-ink: #1f2a26; --qj-blue: #2f5d50; --qj-cyan: #e9b949; --qj-yellow: #e9b949; --qj-pink: #c8553d; --qj-sub: #5b5f57; --paper: #f7f2e6; }
body { background-color: var(--paper); background-image: linear-gradient(rgba(47, 93, 80, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 93, 80, .09) 1px, transparent 1px), linear-gradient(rgba(47, 93, 80, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 93, 80, .16) 1px, transparent 1px); background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px; font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; }
.qj-en, .qj-h, .gnav a small, .qj-tag, .qj-more, .sec-head h2, .sec-head .more, .qj-new { font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: .01em; }
.sec-head h2 { text-transform: none; font-size: clamp(44px, 5.4vw, 66px); }
.site-head .gnav { background: #22322c; }
.site-head .gnav a small { font-size: 16px; text-transform: none; }
.site-head .gnav a[aria-current="page"] small, .site-head .gnav a:hover small { color: var(--qj-yellow); }
.qj-tag { background: var(--qj-blue); font-size: 13px; text-transform: none; padding: 1px 9px; }
.qj-date, .grid4 .card time, .grid4 .card .card-soon { font-family: "Courier Prime", "Courier New", monospace; font-size: 16px; letter-spacing: .02em; color: var(--qj-sub); }
.qj-new { background: var(--qj-pink); color: #fff; font-size: 14px; transform: rotate(-3deg); }
.qj-more { color: var(--qj-pink); }
.qj-wave { background: radial-gradient(circle at 6px -2px, transparent 5px, var(--qj-blue) 5.5px, var(--qj-blue) 6.8px, transparent 7.3px) 0 0 / 12px 8px repeat-x; }
.qj-search { border-color: var(--qj-blue); }
.qj-search button { background: var(--qj-blue); }
.grid4 .card { box-shadow: 0 0 0 1px rgba(47, 93, 80, .14); }
.grid4 .card h3 { color: var(--qj-blue); }
.hero .slide-text h2 { color: var(--qj-blue); }
.hero .slide > a { box-shadow: 8px 8px 0 var(--qj-yellow); }

/* 前後を半分のぞかせる（PC：真ん中の1枚＝画面の約半分・左右に前後が半分ずつ） */
.hero { overflow: hidden; }
.hero .slider { --sw: min(1040px, 52vw); --sg: 28px; }
.hero .slide { transition: transform .6s ease, opacity .6s; }
.hero .slide:not(.is-current) { opacity: .45; }
.hero .slide:not(.is-current) .slide-text { opacity: 1; }
.hero .slide-text { padding: 24px 26px 20px; gap: 12px; }
.hero .slide-text h2 { font-size: clamp(19px, 1.7vw, 26px); }
.hero .slide-text .qj-ex { font-size: 13px; }
@media (max-width: 760px) {
  .hero .slider { --sw: 78vw; --sg: 12px; }
  .hero .slide-text h2 { font-size: 18px; }
}

/* =====================================================================
 * 学校の道具（2026-11-13）：黒板・チョーク・黒板消し・磁石・定規・マスキングテープ・はなまる・時間割・机・鉛筆
 * ===================================================================== */
:root { --board: #26453a; --board2: #2e5244; --wood: #a4703f; --wood2: #7d522b; --chalk: #f3f1e8; --chalk-y: #f6dc6b; --chalk-p: #f2a7a7; }
.klee, .board-head, .sec-head .ja, .qj-new, .site-head .logo .ja { font-family: "Klee One", "Zen Kaku Gothic New", serif; font-weight: 600; }

/* 黒板（一番上） */
.hero { position: relative; margin: 26px auto 10px; width: min(1400px, calc(100% - 32px)); padding: 78px 0 86px; background:
  radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .06), transparent 45%), radial-gradient(ellipse at 75% 70%, rgba(255, 255, 255, .05), transparent 40%),
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px), linear-gradient(160deg, var(--board2), var(--board));
  border: 16px solid var(--wood); border-image: linear-gradient(135deg, #b98552, var(--wood) 40%, var(--wood2)) 1; box-shadow: inset 0 0 40px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .18); overflow: hidden; }
.board-head { position: absolute; left: 34px; right: 34px; top: 18px; display: flex; justify-content: space-between; align-items: flex-start; color: var(--chalk); text-shadow: 0 0 1.5px rgba(255, 255, 255, .7); pointer-events: none; z-index: 2; }
.board-title { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .08em; border-bottom: 2px dashed rgba(243, 241, 232, .6); padding-bottom: 2px; }
.board-date { font-size: clamp(14px, 1.3vw, 18px); text-align: right; line-height: 1.5; }
.hero .slide > a { box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.hero .slide > a::before, .hero .slide > a::after { content: ""; position: absolute; top: -9px; width: 20px; height: 20px; border-radius: 50%; z-index: 3; box-shadow: 0 2px 3px rgba(0, 0, 0, .4), inset 0 -3px 0 rgba(0, 0, 0, .2); }
.hero .slide > a::before { left: 22px; background: #d94b3d; }
.hero .slide > a::after { right: 22px; background: #2f74c0; }
.hero .slider-ctrl { border-top-color: rgba(243, 241, 232, .4); }
.hero .slider-ctrl .arrow { color: var(--chalk); }
.hero .dots button { background: rgba(243, 241, 232, .35); }
.hero .dots button[aria-current="true"] { background: var(--chalk-y); }
.board-tray { position: absolute; left: -16px; right: -16px; bottom: -16px; height: 34px; background: linear-gradient(#b98552, var(--wood2)); box-shadow: 0 -3px 6px rgba(0, 0, 0, .25); display: flex; align-items: center; gap: 18px; padding: 0 60px; z-index: 2; }
.chalk { display: block; width: 58px; height: 11px; border-radius: 3px; background: var(--chalk); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); transform: rotate(-3deg); }
.chalk--y { background: var(--chalk-y); width: 46px; transform: rotate(4deg); }
.chalk--p { background: var(--chalk-p); width: 38px; }
.chalk--s { width: 24px; transform: rotate(10deg); }
.eraser { display: block; margin-left: auto; width: 96px; height: 26px; border-radius: 4px; background: linear-gradient(#3b3b45 0 55%, #e9e4d6 55% 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }

/* 見出しの帯＝木の定規（目盛り付き） */
.sec-head .ja { background: linear-gradient(#f4d98a, #e8c25e); background-image: repeating-linear-gradient(90deg, rgba(90, 60, 20, .55) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(90, 60, 20, .7) 0 1.5px, transparent 1.5px 50px), linear-gradient(#f4d98a, #e8c25e);
  background-size: auto 9px, auto 15px, auto; background-repeat: repeat-x; background-position: 0 0, 0 0, 0 0; border-top: 1px solid #c79a3a; border-bottom: 2px solid #b8862a; font-size: 18px; padding: 24px 16px 14px; color: #3a2a12; }

/* カード＝マスキングテープで留めたノートの紙・NEW＝はなまる */
.grid4 .card { background: #fffef9 linear-gradient(transparent 0 31px, rgba(47, 93, 80, .10) 31px 32px) 0 0 / 100% 32px; }
.grid4 .card::before { content: ""; position: absolute; left: 50%; top: -9px; width: 74px; height: 20px; margin-left: -37px; background: rgba(233, 185, 73, .75); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); z-index: 2; }
.grid4 .card:nth-child(3n+2)::before { background: rgba(200, 85, 61, .6); transform: rotate(2deg); }
.grid4 .card:nth-child(3n+3)::before { background: rgba(80, 140, 190, .6); transform: rotate(-1deg); }
.qj-new { width: 56px; height: 56px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: #d33c2c; border: 3px double #d33c2c; font-size: 14px; left: auto; right: 8px; top: 8px; transform: rotate(-12deg); box-shadow: none; }

/* 年表＝時間割表 */
#map { background: transparent; }
#map .line-map { background: #fffef9; border: 2px solid var(--qj-blue); padding: 26px 10px 18px; box-shadow: 6px 6px 0 rgba(47, 93, 80, .18); }

/* 足元＝木の机＋鉛筆 */
.site-foot { position: relative; background: linear-gradient(180deg, #b07a46, #8f5d31); background-image: repeating-linear-gradient(178deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 22px), linear-gradient(180deg, #b07a46, #8f5d31); color: #fdf6e8; padding-top: 56px; }
.site-foot a, .site-foot .foot-h, .site-foot .sub, .site-foot p, .site-foot span { color: #fdf6e8; }
.foot-pencil { position: absolute; top: 18px; left: calc(50% - 120px); width: 240px; height: 24px; transform: rotate(-4deg); overflow: visible; }
.foot-cta { background: rgba(0, 0, 0, .18); }

@media (max-width: 760px) {
  .hero { width: calc(100% - 16px); border-width: 10px; padding: 66px 0 70px; }
  .board-head { left: 16px; right: 16px; top: 12px; }
  .board-tray { left: -10px; right: -10px; bottom: -10px; height: 26px; padding: 0 22px; gap: 10px; }
  .chalk { width: 40px; height: 9px; } .eraser { width: 64px; height: 20px; }
}

/* ---- スマホは横長の1行（2026-11-13 カツ「スマホで縦長は見にくいからここ工夫したい」）：左に絵・右に札と題名と日付。説明文は出さない ---- */
@media (max-width: 760px) {
  .grid4 { grid-template-columns: 1fr; gap: 14px; }
  .grid4 .card { display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-areas: "ph tags" "ph h3" "ph foot"; grid-template-rows: auto 1fr auto; column-gap: 12px; row-gap: 6px; padding: 10px; align-items: start; }
  .grid4 .card .ph { grid-area: ph; aspect-ratio: auto; width: 100%; min-height: 100px; align-self: stretch; }
  .grid4 .card .ph img { height: 100%; object-position: left center; }
  .grid4 .card .qj-tags { grid-area: tags; }
  .grid4 .card h3 { grid-area: h3; font-size: 15px; line-height: 1.45; }
  .grid4 .card .qj-ex, .grid4 .card .qj-wave { display: none; }
  .grid4 .card .qj-foot { grid-area: foot; }
  .grid4 .card .qj-date, .grid4 .card time { font-size: 13px; }
  .grid4 .card .qj-more { font-size: 14px; }
  .grid4 .card > .card-soon { grid-area: foot; font-size: 13px; }
  .qj-new { width: 44px; height: 44px; font-size: 12px; right: auto; left: 4px; top: 4px; }
  .grid4 .card::before { width: 54px; height: 16px; margin-left: -27px; top: -7px; }
}
/* 頭は英語なし（2026-11-13 カツ「ヘッダーは全て英語なしで」）：メニューは日本語だけ・Klee One で少し大きく */
.site-head .gnav a { font-family: "Klee One", "Zen Kaku Gothic New", sans-serif; font-weight: 600; font-size: 15px; color: #f3f1e8; }
.site-head .gnav a[aria-current="page"], .site-head .gnav a:hover { color: var(--qj-yellow); }
.site-head .gnav a { padding: 10px 20px; } .site-head .gnav ul { gap: 0; }

/* ---- 跡地の今：リンクの無い行（準備中）も、リンクのある行と同じ並べ方・余白に（2026-11-13 カツ「余白おかしい」） ---- */
.web-list li > a, .web-list li > div { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 20px; }
@media (max-width: 767px) { .web-list li > a, .web-list li > div { grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 14px; } }

/* ---- 年表：縦の線の真ん中に丸を置く（2026-11-13 カツ「記号の左右中央ずれやめて」）。丸は 24px で左の余白 12px＝中心 24px、線は幅 6px で左 21px＝中心 24px ---- */
@media (max-width: 767px) {
  #map .line-map { padding-left: 12px; padding-right: 12px; }
  #map .line-map::before { left: 23px; }
}
.site-foot { background-color: #8f5d31; }

/* ---- 見やすさの直し（2026-11-13 カツ「視認性悪いと思うところ再度全体確認して色変えて」）：コントラスト比を測って基準（4.5・大きい字 3）に届かない所を直す ---- */
.qj-more { color: #a33a26; }
.site-foot { background-color: #6f4524; background-image: repeating-linear-gradient(178deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 22px), linear-gradient(180deg, #7d4f2a, #5e3a1d); }
.site-foot a, .site-foot .foot-h, .site-foot .sub, .site-foot p, .site-foot span, .site-foot strong { color: #fffaf0; }
.foot-cta { background: rgba(0, 0, 0, .28); border-color: #fffaf0; }
.foot-cta a { background: #fffaf0; color: #2f5d50 !important; font-weight: 700; border: 0; }
.foot-cta a:hover { background: #e9b949; color: #1f2a26 !important; }

/* ---- 頭の見切れを直す（2026-11-13 カツ「サイズによってのヘッダーの見切れを解消して。PCのときハンバーガーいらんかな」）
 *   3列を「左右同じ幅・真ん中＝ロゴ」に。検索窓は右の列の右端・幅は列に収まる大きさまで。三本線は押しても何も開かない飾りなので消す */
.head-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 16px; width: min(1200px, calc(100% - 32px)); }
.head-row > button.icon-btn { display: none; }
.head-row .logo { grid-column: 2; }
.head-row .qj-search { grid-column: 3; justify-self: end; width: min(240px, 100%); }
.head-row > a.icon-btn[href="/schools/"] { grid-column: 3; justify-self: end; }
@media (max-width: 760px) { .head-row { grid-template-columns: 44px 1fr 44px; width: calc(100% - 16px); } }

/* ---- 頭の固定・右下の上に戻る（2026-11-13・新メディア共通） ---- */
.site-head { position: sticky; top: 0; z-index: 50; transition: box-shadow .2s; }
.site-head--scrolled { box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.totop { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--qj-blue); color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); transition: opacity .2s, transform .2s; }
.totop:hover { background: var(--qj-pink); }
.totop--hide { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .totop, .site-head { transition: none; } }

/* ---- 記事の絵の「イメージ」の札（2026-11-13・AI で描いた絵＝実際の校舎ではない） ---- */
.grid4 .card .ph { position: relative; }
.ai-badge { position: absolute; right: 6px; bottom: 6px; background: rgba(31, 42, 38, .78); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 3px; letter-spacing: .05em; }
.hero .slide-ph { position: relative; }
@media (max-width: 760px) { .site-head .logo .ja { font-size: clamp(16px, 5.2vw, 22px); white-space: nowrap; letter-spacing: .02em; } .head-row .logo { min-width: 0; } }

/* ---- 表の行の頭（年）がスマホで1字ずつ縦に折れない（2026-11-13・校区の移り変わり） ---- */
.bld tbody th[scope="row"] { min-width: 6.8em; word-break: keep-all; overflow-wrap: anywhere; }

/* ---- ロゴ（タイトル込みの SVG・2026-11-13 大阪閉校ノート） ---- */
.site-head .logo-img { display: block; height: 52px; width: auto; }
.foot-logo-img { display: block; height: 60px; width: auto; max-width: 100%; margin-bottom: 14px; }
@media (max-width: 760px) { .site-head .logo-img { height: 38px; max-width: 64vw; } }

/* 跡地の地図（Google マップ・2026-11-13 台帳 [1795]） */
.a-map { margin: 24px 0 8px; }
.a-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; background: #e8e2d2; }
.a-map figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 14px; line-height: 1.7; color: #3a443f; }
.a-map .addr { font-weight: 700; color: #1f2a26; }
.a-map .links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.a-map .links a { color: #2f5d50; text-decoration: underline; text-underline-offset: 3px; }
.a-map .note { font-size: 13px; color: #5a625e; }

/* 黒板（メインビジュアル）を画面いっぱいの幅に（2026-11-13 カツ「メインビジュアルはフルワイドにしようか」）。木の枠は上下だけ */
.hero { width: 100%; margin: 0 0 10px; border-left-width: 0; border-right-width: 0; }
.board-head { left: max(34px, calc((100% - 1340px) / 2)); right: max(34px, calc((100% - 1340px) / 2)); }
@media (max-width: 767px) { .hero { width: 100%; border-left-width: 0; border-right-width: 0; } .board-head { left: 16px; right: 16px; } }