:root {
  --color-primary: #1f5f62;
  --color-primary-dark: #17494c;
  --color-primary-light: #e5f2f1;

  --color-secondary: #345b83;
  --color-secondary-light: #edf3f9;

  --color-accent: #d89b3c;
  --color-accent-light: #fff5e3;

  --color-bg: #f4f7f6;
  --color-surface: #ffffff;
  --color-surface-soft: #f8faf9;

  --color-text: #202b2c;
  --color-text-soft: #607071;
  --color-border: #d9e2df;
  --color-border-dark: #c7d3d0;

  --shadow-soft: 0 4px 18px rgba(27, 63, 64, 0.07);
  --shadow-card: 0 8px 26px rgba(27, 63, 64, 0.09);

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 18px;

  --container-width: 1120px;
  --header-height: 64px;
}

/* =========================================================
   Reset
========================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  color: var(--color-text);
  background:
    linear-gradient(180deg,
      #f7faf9 0,
      var(--color-bg) 280px);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  font-size: 15px;
  line-height: 1.75;
  word-break: break-word;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

/* =========================================================
   共通レイアウト
========================================================= */

.site-main {
  min-height: 60vh;
  padding: 18px 0 48px;
}

.container {
  width: min(calc(100% - 24px), var(--container-width));
  margin-inline: auto;
}

.container--narrow {
  max-width: 760px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-small);
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary {
  color: #fff;
  background: var(--color-primary);
}

.button--primary:hover {
  background: var(--color-primary-dark);
}

/* =========================================================
   ヘッダー
========================================================= */

.site-header {
  position: relative;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 24px), var(--container-width));
  min-height: var(--header-height);
  margin-inline: auto;
  gap: 14px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.site-brand__mark {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(31, 95, 98, 0.22);
}

.site-brand__roof {
  position: absolute;
  top: 7px;
  left: 8px;
  width: 22px;
  height: 9px;
  background: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.site-brand__building {
  position: absolute;
  top: 16px;
  left: 9px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 20px;
  height: 15px;
  padding: 3px;
  background: #fff;
  gap: 2px;
}

.site-brand__building span {
  width: 3px;
  height: 6px;
  background: var(--color-primary);
}

.site-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.site-brand__text strong {
  color: var(--color-primary-dark);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
}

.site-brand__text small {
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.header-search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1px solid #cee3e1;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 5px;
}

.header-search-link:hover {
  background: #d9ecea;
}

.site-nav {
  overflow-x: auto;
  border-top: 1px solid #eef2f1;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav__inner {
  display: flex;
  width: min-content;
  min-width: 100%;
  margin-inline: auto;
  padding: 0 12px;
}

.site-nav__link {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  color: var(--color-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.site-nav__link::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  content: "";
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--color-primary);
}

.site-nav__link.is-active::after {
  background: var(--color-primary);
}

/* =========================================================
   パンくず
========================================================= */

.breadcrumb {
  margin-bottom: 12px;
  overflow-x: auto;
  color: var(--color-text-soft);
  font-size: 0.72rem;
  white-space: nowrap;
  scrollbar-width: none;
}

.breadcrumb::-webkit-scrollbar {
  display: none;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  margin: 0 7px;
  color: #9aabaa;
  content: "›";
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

/* =========================================================
   学校ページ・ヒーロー
========================================================= */

.school-profile {
  display: block;
}

.school-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  overflow: hidden;
  min-height: 142px;
  background:
    linear-gradient(135deg,
      #ffffff 0%,
      #f4faf8 72%,
      #e5f2ef 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
}

.school-hero__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 18px 14px 18px 16px;
}

.school-hero__labels {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
  gap: 5px;
}

.school-label {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  color: #4c6060;
  background: #edf2f1;
  border: 1px solid #dbe4e2;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.school-label--type {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-color: #cbe2df;
}

.school-label--ownership {
  color: #345675;
  background: var(--color-secondary-light);
  border-color: #d6e1eb;
}

.school-hero__title {
  color: #173f41;
  font-size: clamp(1.3rem, 5vw, 2rem);
  line-height: 1.4;
  letter-spacing: 0.015em;
}

.school-hero__english {
  margin-top: 3px;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.74rem;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.school-hero__location {
  display: flex;
  align-items: center;
  margin-top: 9px;
  color: #4d6363;
  font-size: 0.78rem;
  gap: 6px;
}

.school-hero__location span {
  color: var(--color-accent);
  font-size: 0.48rem;
}

.school-hero__image {
  min-height: 142px;
  background: #e3ece9;
}

.school-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-hero__placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 142px;
  background:
    linear-gradient(150deg,
      #dcecea,
      #bed9d5);
}

.school-hero__placeholder-roof {
  position: absolute;
  top: 42px;
  width: 54px;
  height: 24px;
  background: rgba(255, 255, 255, 0.9);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.school-hero__placeholder-body {
  position: absolute;
  top: 64px;
  display: flex;
  justify-content: center;
  width: 50px;
  height: 40px;
  padding: 13px 8px 0;
  background: rgba(255, 255, 255, 0.9);
  gap: 5px;
}

.school-hero__placeholder-body i {
  display: block;
  width: 6px;
  height: 12px;
  background: #7eaaa4;
}

.field-card__source {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 6px;
  color: #55706e;
  background: #edf4f2;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 700;
}

.field-count-note {
  margin: -3px 0 10px;
  color: var(--color-text-soft);
  font-size: 0.58rem;
  line-height: 1.5;
}

/* =========================================================
   ページ内ナビ
========================================================= */

.school-page-nav {
  display: flex;
  overflow-x: auto;
  margin: 12px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  scrollbar-width: none;
}

.school-page-nav::-webkit-scrollbar {
  display: none;
}

.school-page-nav a {
  position: relative;
  flex: 1 0 auto;
  min-width: 84px;
  padding: 10px 12px;
  color: var(--color-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.school-page-nav a:not(:last-child)::after {
  position: absolute;
  top: 25%;
  right: 0;
  width: 1px;
  height: 50%;
  background: var(--color-border);
  content: "";
}

.school-page-nav a:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* =========================================================
   2カラム
========================================================= */

.school-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.school-layout__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.school-layout__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================================
   共通セクション
========================================================= */

.content-section {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.content-section--muted {
  background: #f7faf9;
}

.section-heading {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--color-border);
  gap: 10px;
}

.section-heading__icon {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 800;
}

.section-heading h2 {
  color: #1c4547;
  font-size: 1.05rem;
  line-height: 1.4;
}

.section-heading p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* =========================================================
   基本情報
========================================================= */

.information-list {
  display: block;
}

.information-list__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  border-bottom: 1px solid #e6ecea;
}

.information-list__row:first-child {
  border-top: 1px solid #e6ecea;
}

.information-list dt,
.information-list dd {
  padding: 10px 8px;
}

.information-list dt {
  color: #4e6665;
  background: #f3f7f6;
  font-size: 0.73rem;
  font-weight: 700;
}

.information-list dd {
  color: var(--color-text);
  font-size: 0.82rem;
}

.information-list__sub {
  display: block;
  margin-bottom: 1px;
  color: var(--color-text-soft);
  font-size: 0.72rem;
}

.external-links {
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
  gap: 8px;
}

.external-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 8px 13px;
  color: #405b5b;
  background: #f5f8f7;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 0.76rem;
  font-weight: 700;
  gap: 12px;
}

.external-link:hover {
  color: var(--color-primary-dark);
  border-color: #bcd2cf;
}

.external-link--primary {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.external-link--primary:hover {
  color: #fff;
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* =========================================================
   学校概要
========================================================= */

.school-description {
  color: #384b4b;
  font-size: 0.86rem;
  line-height: 1.9;
}

/* =========================================================
   学部・学科
========================================================= */

.program-panel {
  overflow: hidden;
  background: #f8faf9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.program-tree {
  display: flex;
  flex-direction: column;
}

.program-tree .program-tree {
  margin: 0 10px 8px 22px;
  border-left: 2px solid #d9e6e3;
}

.program-tree__item {
  position: relative;
}

.program-tree__content {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e9e7;
  gap: 9px;
}

.program-tree__item:last-child>.program-tree__content {
  border-bottom: 0;
}

.program-tree .program-tree .program-tree__content {
  position: relative;
  padding-left: 15px;
}

.program-tree .program-tree .program-tree__content::before {
  position: absolute;
  top: 50%;
  left: -2px;
  width: 10px;
  height: 2px;
  background: #d9e6e3;
  content: "";
}

.program-tree__type {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
}

.program-tree__name {
  min-width: 0;
  color: #283b3b;
  font-size: 0.82rem;
  font-weight: 700;
}

/* =========================================================
   学問分野
========================================================= */

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.field-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  align-items: center;
  min-height: 60px;
  padding: 9px 10px;
  background: #f8faf9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  gap: 9px;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.field-card:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
  transform: translateY(-1px);
}

.field-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-primary-dark);
  background: #dcecea;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 800;
}

.field-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.field-card__body strong {
  color: #244647;
  font-size: 0.8rem;
}

.field-card__body small {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.65rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.field-card__arrow {
  color: #78908f;
  font-size: 1.15rem;
}

/* =========================================================
   掲示板準備中
========================================================= */

.coming-soon {
  padding: 16px;
  color: #516463;
  background:
    repeating-linear-gradient(-45deg,
      #f8faf9,
      #f8faf9 10px,
      #f3f7f6 10px,
      #f3f7f6 20px);
  border: 1px dashed #bdceca;
  border-radius: var(--radius-small);
  font-size: 0.8rem;
  text-align: center;
}

.coming-soon__title {
  margin-bottom: 4px;
  color: var(--color-primary-dark);
  font-size: 0.88rem;
  font-weight: 800;
}

/* =========================================================
   サイドバー
========================================================= */

.side-card {
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.side-card h2 {
  margin-bottom: 10px;
  padding-bottom: 8px;
  color: #224849;
  border-bottom: 2px solid var(--color-primary-light);
  font-size: 0.9rem;
}

.side-summary {
  display: flex;
  flex-direction: column;
}

.side-summary li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px;
  border-bottom: 1px solid #e6ecea;
  gap: 10px;
}

.side-summary li:last-child {
  border-bottom: 0;
}

.side-summary span {
  color: var(--color-text-soft);
  font-size: 0.7rem;
}

.side-summary strong {
  color: #334949;
  font-size: 0.76rem;
  text-align: right;
}

.side-links {
  display: flex;
  flex-direction: column;
}

.side-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 3px;
  color: #3f5958;
  border-bottom: 1px solid #e6ecea;
  font-size: 0.75rem;
  font-weight: 700;
}

.side-links a:last-child {
  border-bottom: 0;
}

.side-links a:hover {
  color: var(--color-primary);
}

.side-links span {
  color: #829796;
  font-size: 1rem;
}

.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  color: #97a5a4;
  background: #eef2f1;
  border: 1px solid #dde5e3;
  border-radius: var(--radius-medium);
  font-size: 0.66rem;
}

/* =========================================================
   404
========================================================= */

.empty-state {
  margin-top: 34px;
  padding: 38px 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 800;
}

.empty-state h1 {
  color: #204849;
  font-size: 1.25rem;
}

.empty-state p {
  margin: 8px 0 18px;
  color: var(--color-text-soft);
  font-size: 0.82rem;
}

/* =========================================================
   フッター
========================================================= */

.site-footer {
  margin-top: 20px;
  color: #dce9e7;
  background: #173f41;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(calc(100% - 28px), var(--container-width));
  margin-inline: auto;
  padding: 30px 0 24px;
  gap: 24px;
}

.footer-brand__name {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.footer-brand__description {
  max-width: 520px;
  margin-top: 7px;
  color: #b8cfcc;
  font-size: 0.75rem;
  line-height: 1.75;
}

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

.footer-nav__group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-nav__title {
  margin-bottom: 3px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.footer-nav a {
  color: #b8cfcc;
  font-size: 0.7rem;
}

.footer-nav a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding: 12px;
  color: #9eb8b5;
  background: #103537;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.65rem;
  text-align: center;
  gap: 3px;
}

.site-footer__bottom a {
  color: #d5e6e4;
}

.site-footer__bottom a:hover {
  color: #fff;
}

/* =========================================================
   タブレット・PC
========================================================= */

@media (min-width: 600px) {
  .container {
    width: min(calc(100% - 32px), var(--container-width));
  }

  .site-header__inner {
    width: min(calc(100% - 32px), var(--container-width));
  }

  .site-brand__text strong {
    font-size: 1.35rem;
  }

  .header-search-link {
    padding-inline: 16px;
  }

  .site-nav__inner {
    width: min(calc(100% - 32px), var(--container-width));
    min-width: 0;
    padding: 0;
  }

  .site-nav__link {
    flex: 0 0 auto;
    min-width: 104px;
  }

  .school-hero {
    grid-template-columns: minmax(0, 1fr) 190px;
    min-height: 185px;
  }

  .school-hero__main {
    padding: 24px;
  }

  .school-hero__image,
  .school-hero__placeholder {
    min-height: 185px;
  }

  .school-hero__placeholder-roof {
    top: 54px;
    width: 70px;
    height: 30px;
  }

  .school-hero__placeholder-body {
    top: 81px;
    width: 66px;
    height: 50px;
  }

  .content-section {
    padding: 20px;
  }

  .information-list__row {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
    width: min(calc(100% - 40px), var(--container-width));
  }

  .site-footer__bottom {
    flex-direction: row;
    gap: 16px;
  }
}

@media (min-width: 900px) {
  .site-main {
    padding-top: 24px;
  }

  .school-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: 18px;
  }

  .school-layout__side {
    position: sticky;
    top: 18px;
  }

  .school-page-nav a {
    font-size: 0.77rem;
  }

  .school-hero__title {
    font-size: 2rem;
  }

  .section-heading h2 {
    font-size: 1.15rem;
  }
}

@media (min-width: 1100px) {
  .school-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 22px;
  }

  .content-section {
    padding: 22px;
  }
}

/* =========================================================
   一覧ページ共通ヒーロー
========================================================= */

.archive-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  padding: 16px;
  background:
    linear-gradient(135deg,
      #ffffff 0%,
      #f2f9f7 72%,
      #e1efec 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  gap: 12px;
}

.archive-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 13px;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 5px 13px rgba(31, 95, 98, 0.2);
}

.archive-hero__body {
  min-width: 0;
}

.archive-hero__body h1 {
  color: #173f41;
  font-size: clamp(1.2rem, 5vw, 1.7rem);
  line-height: 1.4;
}

.archive-hero__body p {
  margin-top: 4px;
  color: var(--color-text-soft);
  font-size: 0.74rem;
  line-height: 1.65;
}

.archive-hero__count {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  gap: 5px;
}

.archive-hero__count strong {
  color: var(--color-primary-dark);
  font-size: 1.15rem;
  line-height: 1;
}

.archive-hero__count span {
  color: var(--color-text-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

/* =========================================================
   地方ジャンプナビ
========================================================= */

.region-jump-nav {
  display: flex;
  overflow-x: auto;
  margin: 12px 0;
  padding: 7px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  gap: 5px;
  scrollbar-width: none;
}

.region-jump-nav::-webkit-scrollbar {
  display: none;
}

.region-jump-nav a {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #456160;
  background: #f3f7f6;
  border: 1px solid #e0e8e6;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.region-jump-nav a:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-color: #c7deda;
}

/* =========================================================
   都道府県一覧
========================================================= */

.prefecture-region-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.prefecture-region {
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.prefecture-region__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--color-primary-light);
  gap: 10px;
}

.prefecture-region__heading h2 {
  color: #204849;
  font-size: 0.95rem;
}

.prefecture-region__heading span {
  color: var(--color-text-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.prefecture-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.prefecture-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  min-height: 46px;
  padding: 8px 9px;
  background: #f8faf9;
  border: 1px solid #e0e8e6;
  border-radius: var(--radius-small);
  gap: 5px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.prefecture-card:hover {
  background: var(--color-primary-light);
  border-color: #bed6d2;
  transform: translateY(-1px);
}

.prefecture-card__name {
  overflow: hidden;
  color: #294a4b;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.prefecture-card__count {
  color: var(--color-text-soft);
  font-size: 0.70rem;
  white-space: nowrap;
}

.prefecture-card__arrow {
  color: #7c9694;
  font-size: 1rem;
}

/* =========================================================
   絞り込み
========================================================= */

.school-filter-panel {
  margin-top: 12px;
  padding: 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.school-filter-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.school-filter-panel__heading h2 {
  color: #23494a;
  font-size: 0.9rem;
}

.school-filter-panel__reset {
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.school-filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.school-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.school-filter-field>span {
  color: #536867;
  font-size: 0.67rem;
  font-weight: 700;
}

.school-filter-field select {
  width: 100%;
  min-height: 42px;
  padding: 8px 34px 8px 10px;
  color: #273c3c;
  background-color: #f8faf9;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  font-size: 0.76rem;
}

.school-filter-field select:focus {
  outline: 2px solid rgba(31, 95, 98, 0.16);
  border-color: var(--color-primary);
}

.school-filter-submit {
  min-height: 43px;
  margin-top: 2px;
  padding: 8px 15px;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-small);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.school-filter-submit:hover {
  background: var(--color-primary-dark);
}

.active-filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 9px;
  gap: 5px;
}

.active-filter-list__label {
  color: var(--color-text-soft);
  font-size: 0.64rem;
  font-weight: 700;
}

.active-filter-tag {
  padding: 3px 8px;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1px solid #c9dfdc;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
}

/* =========================================================
   検索結果見出し
========================================================= */

.school-result-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 18px 1px 9px;
  gap: 10px;
}

.school-result-heading h2 {
  color: #1e4546;
  font-size: 1rem;
}

.school-result-heading p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.66rem;
}

.school-result-heading>a {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 0.67rem;
  font-weight: 700;
}

/* =========================================================
   学校一覧カード
========================================================= */

.school-card-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.school-list-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.school-list-card__image {
  display: block;
  min-height: 144px;
  background:
    linear-gradient(145deg,
      #deece9,
      #c5dcd8);
}

.school-list-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-list-card__placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 144px;
  padding-bottom: 48px;
  gap: 4px;
}

.school-list-card__placeholder::before {
  position: absolute;
  width: 42px;
  height: 20px;
  margin-bottom: 19px;
  background: rgba(255, 255, 255, 0.88);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
}

.school-list-card__placeholder::after {
  position: absolute;
  width: 40px;
  height: 31px;
  margin-top: 31px;
  background: rgba(255, 255, 255, 0.88);
  content: "";
}

.school-list-card__placeholder i {
  position: relative;
  z-index: 1;
  width: 4px;
  height: 9px;
  margin-bottom: -24px;
  background: #76a39d;
}

.school-list-card__body {
  min-width: 0;
  padding: 10px 10px 9px;
}

.school-list-card__labels {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
  gap: 4px;
}

.school-list-label {
  padding: 2px 6px;
  color: #425c5b;
  background: #eef3f2;
  border: 1px solid #dde6e4;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.35;
}

.school-list-label--type {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-color: #c9dfdc;
}

.school-list-label--sub {
  color: #50677c;
  background: var(--color-secondary-light);
  border-color: #d5e1eb;
}

.school-list-card__title {
  color: #203f40;
  font-size: 0.9rem;
  line-height: 1.45;
}

.school-list-card__title a:hover {
  color: var(--color-primary);
}

.school-list-card__english {
  margin-top: 1px;
  overflow: hidden;
  color: #7a8b8a;
  font-size: 0.58rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.school-list-card__meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
  gap: 4px 10px;
}

.school-list-card__meta span {
  position: relative;
  color: #607372;
  font-size: 0.63rem;
}

.school-list-card__meta span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 2px;
  height: 2px;
  background: #9aacaa;
  border-radius: 50%;
  content: "";
}

.school-list-card__address {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: #607372;
  font-size: 0.65rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.school-list-card__detail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 7px;
  color: var(--color-primary);
  font-size: 0.66rem;
  font-weight: 800;
  gap: 5px;
}

.school-list-card__detail span {
  font-size: 0.95rem;
}

/* =========================================================
   ページネーション
========================================================= */

.pagination {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  margin-top: 18px;
  gap: 6px;
}

.pagination__prev,
.pagination__next,
.pagination__disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px;
  border-radius: var(--radius-small);
  font-size: 0.67rem;
  font-weight: 700;
}

.pagination__prev,
.pagination__next {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1px solid #c8deda;
}

.pagination__disabled {
  color: #a0adac;
  background: #f0f3f2;
  border: 1px solid #e3e8e7;
}

.pagination__numbers {
  display: flex;
  justify-content: center;
  min-width: 0;
  gap: 4px;
}

.pagination__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 36px;
  color: #4e6564;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 700;
}

.pagination__number.is-current {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   検索結果なし
========================================================= */

.school-result-empty {
  padding: 30px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.school-result-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
}

.school-result-empty h2 {
  color: #244849;
  font-size: 1rem;
}

.school-result-empty p {
  margin: 5px 0 15px;
  color: var(--color-text-soft);
  font-size: 0.74rem;
}

/* =========================================================
   タブレット・PC
========================================================= */

@media (min-width: 600px) {
  .archive-hero {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    padding: 20px;
    gap: 14px;
  }

  .archive-hero__icon {
    width: 58px;
    height: 58px;
    font-size: 1.15rem;
  }

  .archive-hero__count {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 0;
    padding-left: 20px;
    border-top: 0;
    border-left: 1px solid var(--color-border);
    gap: 3px;
  }

  .archive-hero__count strong {
    font-size: 1.4rem;
  }

  .prefecture-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .school-filter-form {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) 138px;
    align-items: end;
  }

  .school-list-card {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .school-list-card__image,
  .school-list-card__placeholder {
    min-height: 158px;
  }

  .school-list-card__body {
    padding: 13px 15px 11px;
  }

  .school-list-card__title {
    font-size: 1rem;
  }
}

@media (min-width: 900px) {
  .prefecture-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .prefecture-region {
    padding: 18px;
  }

  .school-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .school-list-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .school-list-card__image,
  .school-list-card__placeholder {
    min-height: 170px;
  }
}

@media (min-width: 1100px) {
  .prefecture-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* =========================================================
   学校種別一覧
========================================================= */

.school-type-group-list {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  gap: 14px;
}

.school-type-group {
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.school-type-group__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--color-primary-light);
  gap: 10px;
}

.school-type-group__heading h2 {
  color: #204849;
  font-size: 0.95rem;
}

.school-type-group__heading span {
  color: var(--color-text-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.school-type-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.school-type-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 14px;
  align-items: center;
  min-height: 74px;
  padding: 10px;
  background: #f8faf9;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-small);
  gap: 10px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.school-type-card:hover {
  background: var(--color-primary-light);
  border-color: #bed7d3;
  transform: translateY(-1px);
}

.school-type-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 11px;
  font-size: 0.82rem;
  font-weight: 800;
}

.school-type-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.school-type-card__body strong {
  color: #244849;
  font-size: 0.84rem;
}

.school-type-card__body small {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.64rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.school-type-card__body>span {
  margin-top: 3px;
  color: var(--color-primary);
  font-size: 0.62rem;
  font-weight: 700;
}

.school-type-card__arrow {
  color: #78908f;
  font-size: 1.1rem;
}

.school-filter-field select:disabled {
  color: #99a5a4;
  background: #eff2f1;
  cursor: not-allowed;
}

@media (min-width: 600px) {
  .school-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .school-type-group {
    padding: 18px;
  }

  .school-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   設置区分一覧
========================================================= */

.ownership-selection {
  margin-top: 14px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.ownership-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.ownership-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 88px;
  padding: 12px;
  background: #f8faf9;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-medium);
  gap: 11px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ownership-card:hover {
  background: var(--color-primary-light);
  border-color: #bed7d3;
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.ownership-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 13px;
  font-size: 0.9rem;
  font-weight: 800;
}

.ownership-card--1 .ownership-card__icon {
  background: #345b83;
}

.ownership-card--2 .ownership-card__icon {
  background: #1f5f62;
}

.ownership-card--3 .ownership-card__icon {
  background: #8b5e34;
}

.ownership-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ownership-card__body strong {
  color: #244849;
  font-size: 0.94rem;
}

.ownership-card__body small {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.67rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ownership-card__body>span {
  margin-top: 4px;
  color: var(--color-primary);
  font-size: 0.65rem;
  font-weight: 700;
}

.ownership-card__arrow {
  color: #78908f;
  font-size: 1.2rem;
}

@media (min-width: 600px) {
  .ownership-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ownership-card {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
  }

  .ownership-card__arrow {
    display: none;
  }
}

@media (min-width: 900px) {
  .ownership-selection {
    padding: 18px;
  }

  .ownership-card {
    min-height: 112px;
    padding: 16px;
  }
}

/* =========================================================
   学問分野の選択経路
========================================================= */

.field-guide,
.field-current-step {
  display: flex;
  overflow-x: auto;
  align-items: center;
  margin: 12px 0;
  padding: 9px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  gap: 7px;
  scrollbar-width: none;
}

.field-guide::-webkit-scrollbar,
.field-current-step::-webkit-scrollbar {
  display: none;
}

.field-guide__step {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

.field-guide__step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
}

.field-guide__step strong,
.field-current-step strong,
.field-current-step span {
  font-size: 0.67rem;
  white-space: nowrap;
}

.field-guide>i,
.field-current-step>i {
  color: #89a09e;
  font-style: normal;
}

.field-current-step__done {
  color: var(--color-primary);
  font-weight: 700;
}

/* =========================================================
   学問分野一覧
========================================================= */

.academic-field-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.academic-field-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 15px;
  align-items: center;
  min-height: 92px;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  gap: 10px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.academic-field-card:hover {
  background: var(--color-primary-light);
  border-color: #bfd8d4;
  transform: translateY(-1px);
}

.academic-field-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 13px;
  font-size: 0.88rem;
  font-weight: 800;
}

.academic-field-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.academic-field-card__body strong {
  color: #214647;
  font-size: 0.84rem;
}

.academic-field-card__body small {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.64rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.academic-field-card__counts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  gap: 5px;
}

.academic-field-card__counts em {
  padding: 2px 6px;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-radius: 999px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
}

.academic-field-card__arrow {
  color: #76908e;
  font-size: 1.15rem;
}

/* =========================================================
   学部・学科カテゴリ
========================================================= */

.program-category-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 15px;
}

.program-category-group {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.program-category-group__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}

.program-category-group__heading h2 {
  color: #214647;
  font-size: 0.92rem;
}

.program-category-group__heading span {
  color: var(--color-text-soft);
  font-size: 0.65rem;
  font-weight: 700;
}

.program-category-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.program-category-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  min-height: 72px;
  padding: 10px;
  background: #f8faf9;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-small);
  gap: 8px;
}

.program-category-card:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.program-category-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.program-category-card__type {
  align-self: flex-start;
  margin-bottom: 3px;
  padding: 2px 6px;
  color: var(--color-primary-dark);
  background: #dcecea;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 700;
}

.program-category-card strong {
  color: #294849;
  font-size: 0.8rem;
}

.program-category-card small {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.62rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.program-category-card em {
  margin-top: 4px;
  color: var(--color-primary);
  font-size: 0.70rem;
  font-style: normal;
  font-weight: 700;
}

.program-category-card__arrow {
  color: #78908f;
  font-size: 1.1rem;
}

/* =========================================================
   学部・学科詳細
========================================================= */

.program-category-summary {
  margin: 12px 0;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-soft);
}

.program-category-summary>div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.program-category-summary span {
  padding: 2px 7px;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.program-category-summary strong {
  color: #214647;
  font-size: 0.88rem;
}

.program-category-summary p {
  margin-top: 5px;
  color: var(--color-text-soft);
  font-size: 0.7rem;
}

.school-list-card__program {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: #436260;
  font-size: 0.66rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (min-width: 600px) {
  .academic-field-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .academic-field-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .program-category-group {
    padding: 18px;
  }

  .program-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.field-type-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 10px 0 12px;
  padding: 4px;
  background: #eaf2f0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  gap: 3px;
}

.field-type-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 5px 2px;
  color: #57706e;
  background: transparent;
  border-radius: 7px;
  font-size: 0.70rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.field-type-tabs a.is-active {
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 3px 9px rgba(31, 95, 98, 0.18);
}

@media (min-width: 600px) {
  .field-type-tabs a {
    min-height: 42px;
    font-size: 0.7rem;
  }
}

.field-direct-schools__note {
  margin: -2px 0 9px;
  color: var(--color-text-soft);
  font-size: 0.62rem;
  line-height: 1.55;
}

.field-direct-school-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.field-direct-school-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 69px;
  padding: 9px 28px 9px 10px;
  background: #f8faf9;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-small);
}

.field-direct-school-card:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.field-direct-school-card__type {
  align-self: flex-start;
  margin-bottom: 3px;
  padding: 2px 6px;
  color: var(--color-primary-dark);
  background: #dcecea;
  border-radius: 999px;
  font-size: 0.60rem;
  font-weight: 700;
}

.field-direct-school-card strong {
  color: #294a49;
  font-size: 0.78rem;
}

.field-direct-school-card small {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.59rem;
}

.field-direct-school-card__arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  color: #78908f;
  font-size: 1rem;
  transform: translateY(-50%);
}

@media (min-width: 600px) {
  .field-direct-school-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   学問分野・都道府県絞り込み
========================================================= */

.field-prefecture-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

@media (min-width: 600px) {
  .field-prefecture-filter {
    grid-template-columns: minmax(280px, 460px);
  }
}

/* =========================================================
   学校検索
========================================================= */

.school-search-panel {
  margin-top: 12px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.school-search-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.school-search-keyword {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.school-search-keyword>span:first-child {
  color: #405d5c;
  font-size: 0.72rem;
  font-weight: 800;
}

.school-search-keyword__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  overflow: hidden;
  min-height: 46px;
  background: #fff;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
}

.school-search-keyword__control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 95, 98, 0.11);
}

.school-search-keyword__control input {
  min-width: 0;
  padding: 9px 11px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.8rem;
}

.school-search-keyword__control input::placeholder {
  color: #99a7a6;
}

.school-search-keyword__control button {
  color: #fff;
  background: var(--color-primary);
  border: 0;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.school-search-keyword__control button:hover {
  background: var(--color-primary-dark);
}

.school-search-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.school-search-filter-submit {
  min-height: 43px;
  margin-top: 2px;
  padding: 8px 15px;
  color: #fff;
  background: var(--color-secondary);
  border: 0;
  border-radius: var(--radius-small);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.school-search-filter-submit:hover {
  background: #294d70;
}

.school-search-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  gap: 7px;
}

.school-search-actions .active-filter-list {
  margin-top: 0;
}

.school-search-clear {
  color: var(--color-primary);
  font-size: 0.67rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   検索開始前の案内
========================================================= */

.search-start-guide {
  margin-top: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.search-start-guide__heading {
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--color-primary-light);
}

.search-start-guide__heading h2 {
  color: #214647;
  font-size: 0.95rem;
}

.search-start-guide__heading p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.75rem;
}

.search-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.search-start-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 122px;
  padding: 11px;
  background: #f8faf9;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-small);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.search-start-card:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
  transform: translateY(-1px);
}

.search-start-card>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 7px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 800;
}

.search-start-card strong {
  color: #264849;
  font-size: 0.75rem;
  line-height: 1.4;
}

.search-start-card small {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.70rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (min-width: 600px) {
  .school-search-panel {
    padding: 18px;
  }

  .school-search-keyword__control {
    grid-template-columns: minmax(0, 1fr) 96px;
    min-height: 50px;
  }

  .school-search-keyword__control input {
    padding-inline: 14px;
    font-size: 0.85rem;
  }

  .school-search-filters {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) 150px;
    align-items: end;
  }

  .school-search-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .search-start-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .school-search-keyword {
    max-width: 760px;
    margin-inline: auto;
  }

  .search-start-guide {
    padding: 18px;
  }
}

/* =========================================================
   学校掲示板
========================================================= */

.school-comments-section {
  overflow: visible;
}

.school-comments-heading {
  position: relative;
  padding-right: 52px;
}

.school-comments-heading__count {
  position: absolute;
  top: 4px;
  right: 0;
  display: flex;
  align-items: baseline;
  color: var(--color-text-soft);
  font-size: 0.65rem;
  gap: 2px;
}

.school-comments-heading__count strong {
  color: var(--color-primary);
  font-size: 1rem;
}

.school-page-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: 3px;
  padding: 0 5px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  font-size: 0.56rem;
}

/* 投稿フォーム */

.school-comment-form-panel {
  margin-bottom: 20px;
  padding: 14px;
  background:
    linear-gradient(145deg,
      #f7fbfa,
      #eef6f4);
  border: 1px solid #d2e2df;
  border-radius: var(--radius-medium);
}

.school-comment-form-panel__heading {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

.school-comment-form-panel__heading h3 {
  color: #214849;
  font-size: 0.92rem;
}

.school-comment-form-panel__heading p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.65rem;
  line-height: 1.5;
}

.school-comment-form-panel__avatar,
.school-comment-empty__icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: #d5e9e6;
  border-radius: 50%;
}

.school-comment-form-panel__avatar i,
.school-comment-empty__icon i {
  position: absolute;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 50%;
}

.school-comment-form-panel__avatar b,
.school-comment-empty__icon b {
  position: absolute;
  bottom: 6px;
  width: 24px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 14px 14px 5px 5px;
}

.school-comment-form {
  display: flex;
  flex-direction: column;
}

.school-comment-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.school-comment-form__label {
  color: #3e5a59;
  font-size: 0.72rem;
  font-weight: 800;
}

.school-comment-form textarea {
  width: 100%;
  min-height: 132px;
  padding: 11px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  outline: 0;
  font-size: 0.82rem;
  line-height: 1.75;
  resize: vertical;
}

.school-comment-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 95, 98, 0.11);
}

.school-comment-form__counter {
  margin-top: 4px;
  color: var(--color-text-soft);
  font-size: 0.62rem;
  text-align: right;
}

.school-comment-guidelines {
  margin-top: 10px;
  padding: 10px;
  color: #556968;
  background: #fff;
  border: 1px solid #dce6e4;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-small);
  font-size: 0.66rem;
}

.school-comment-guidelines strong {
  color: #3b5453;
  font-size: 0.7rem;
}

.school-comment-guidelines ul {
  margin-top: 5px;
}

.school-comment-guidelines li {
  position: relative;
  padding-left: 12px;
  line-height: 1.6;
}

.school-comment-guidelines li::before {
  position: absolute;
  top: 0;
  left: 1px;
  color: var(--color-accent);
  content: "・";
}

.school-comment-guidelines p {
  margin-top: 6px;
  color: #728281;
  font-size: 0.70rem;
}

.school-comment-form__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 11px;
  gap: 8px;
}

.school-comment-form__footer p {
  color: var(--color-text-soft);
  font-size: 0.62rem;
  line-height: 1.5;
}

.school-comment-submit {
  min-height: 44px;
  padding: 9px 18px;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-small);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.school-comment-submit:hover {
  background: var(--color-primary-dark);
}

/* 投稿結果メッセージ */

.school-comment-message {
  position: sticky;
  z-index: 15;
  top: 8px;
  display: none;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-small);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.school-comment-message.is-visible {
  display: block;
}

.school-comment-message.is-success {
  color: #205b42;
  background: #e4f5ea;
  border: 1px solid #b9dec7;
}

.school-comment-message.is-error {
  color: #8a3333;
  background: #fff0f0;
  border: 1px solid #ebc4c4;
}

/* コメント一覧 */

.school-comment-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.school-comment {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.school-comment__avatar {
  position: relative;
  width: 38px;
  height: 38px;
  overflow: hidden;
  background: #d9ebe8;
  border: 1px solid #c8dfdb;
  border-radius: 50%;
}

.school-comment__avatar-head {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--color-primary);
  border-radius: 50%;
  transform: translateX(-50%);
}

.school-comment__avatar-body {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 23px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 13px 13px 4px 4px;
  transform: translateX(-50%);
}

.school-comment__content {
  min-width: 0;
}

.school-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 5px;
  gap: 5px 9px;
}

.school-comment__user {
  color: #294a49;
  font-size: 0.72rem;
}

.school-comment__date {
  color: #81908f;
  font-size: 0.8rem;
}

.school-comment__bubble {
  position: relative;
  padding: 12px 13px;
  background: #fff;
  border: 1px solid #d9e4e2;
  border-radius: 4px 13px 13px 13px;
  box-shadow: 0 4px 13px rgba(27, 63, 64, 0.06);
}

.school-comment__bubble::before {
  position: absolute;
  top: 0;
  left: -8px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid #d9e4e2;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  content: "";
}

.school-comment__text {
  color: #354a49;
  font-size: 0.79rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.school-comment__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 7px;
}

.school-comment__reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.school-comment-action {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 9px;
  color: #536a69;
  background: #f4f7f6;
  border: 1px solid #dce5e3;
  border-radius: 999px;
  font-size: 0.62rem;
  cursor: pointer;
  gap: 4px;
}

.school-comment-action:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-color: #c6ddda;
}

.school-comment-action.is-active {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.school-comment-action__icon {
  font-size: 0.8rem;
  line-height: 1;
}

.school-comment-action__count {
  min-width: 10px;
  font-weight: 800;
  text-align: center;
}

.school-comment__report {
  padding: 4px 2px;
  color: #7c8988;
  background: transparent;
  border: 0;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.school-comment__report:hover {
  color: #9a4545;
}

.school-comment button.is-loading {
  cursor: wait;
  opacity: 0.65;
}

.school-comment-list__notice {
  padding: 8px;
  color: var(--color-text-soft);
  background: #f4f7f6;
  border-radius: var(--radius-small);
  font-size: 0.64rem;
  text-align: center;
}

/* コメントなし */

.school-comment-empty {
  display: flex;
  align-items: center;
  padding: 17px;
  background: #f7faf9;
  border: 1px dashed #c9d8d5;
  border-radius: var(--radius-medium);
  gap: 11px;
}

.school-comment-empty strong {
  color: #315251;
  font-size: 0.8rem;
}

.school-comment-empty p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.67rem;
  line-height: 1.5;
}

/* =========================================================
   問題報告ダイアログ
========================================================= */

.school-comment-report-dialog {
  width: min(calc(100% - 24px), 520px);
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: auto;
  background: transparent;
  border: 0;
}

.school-comment-report-dialog::backdrop {
  background: rgba(15, 34, 35, 0.58);
  backdrop-filter: blur(2px);
}

.school-comment-report-dialog__panel {
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-large);
  box-shadow: 0 18px 60px rgba(9, 31, 32, 0.3);
}

.school-comment-report-dialog__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  background: #f3f8f7;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

.school-comment-report-dialog__heading h2 {
  color: #214849;
  font-size: 1rem;
}

.school-comment-report-dialog__heading p {
  margin-top: 3px;
  color: var(--color-text-soft);
  font-size: 0.67rem;
}

.school-comment-report-dialog__close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: #58706f;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 1.05rem;
  cursor: pointer;
}

.school-comment-report-form {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.school-comment-report-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.school-comment-report-form__field>span {
  color: #415d5c;
  font-size: 0.7rem;
  font-weight: 800;
}

.school-comment-report-form__field small {
  color: #899695;
  font-size: 0.8rem;
  font-weight: 400;
}

.school-comment-report-form select,
.school-comment-report-form textarea {
  width: 100%;
  padding: 9px 10px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  outline: 0;
  font-size: 0.76rem;
}

.school-comment-report-form textarea {
  resize: vertical;
}

.school-comment-report-form select:focus,
.school-comment-report-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 95, 98, 0.1);
}

.school-comment-report-form__message {
  display: none;
  padding: 8px 10px;
  border-radius: var(--radius-small);
  font-size: 0.75rem;
}

.school-comment-report-form__message.is-success,
.school-comment-report-form__message.is-error {
  display: block;
}

.school-comment-report-form__message.is-success {
  color: #205b42;
  background: #e5f5eb;
}

.school-comment-report-form__message.is-error {
  color: #8a3333;
  background: #fff0f0;
}

.school-comment-report-form__actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.school-comment-report-form__cancel,
.school-comment-report-form__submit {
  min-height: 42px;
  border-radius: var(--radius-small);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.school-comment-report-form__cancel {
  color: #526665;
  background: #f1f4f3;
  border: 1px solid var(--color-border);
}

.school-comment-report-form__submit {
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}

@media (min-width: 600px) {
  .school-comment-form-panel {
    padding: 18px;
  }

  .school-comment-form__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .school-comment-form__footer p {
    max-width: 62%;
  }

  .school-comment-submit {
    flex: 0 0 auto;
    min-width: 160px;
  }

  .school-comment {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }

  .school-comment__avatar {
    width: 44px;
    height: 44px;
  }

  .school-comment__bubble {
    padding: 14px 15px;
  }

  .school-comment__text {
    font-size: 0.82rem;
  }
}

/* =========================================================
   学校ページ・メインタブ
========================================================= */

.school-tab-nav {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin: 12px 0 14px;
  padding: 4px;
  background: #e9f1ef;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  gap: 4px;
}

/*
 * 2～5個のタブを均等幅で表示
 */
.school-tab-nav__button {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 8px 5px;
  color: #607473;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  gap: 5px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.school-tab-nav__button:hover {
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.6);
}

.school-tab-nav__button.is-active {
  color: #fff;
  background:
    linear-gradient(135deg,
      var(--color-primary),
      var(--color-primary-dark));
  box-shadow:
    0 4px 11px rgba(23, 73, 76, 0.2);
}

.school-tab-nav__button:focus-visible {
  outline: 3px solid rgba(31, 95, 98, 0.2);
  outline-offset: 2px;
}

.school-tab-nav__icon {
  display: inline-flex;
  flex: 0 0 25px;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 7px;
  font-size: 0.66rem;
  font-weight: 900;
}

.school-tab-nav__button.is-active .school-tab-nav__icon {
  color: var(--color-primary-dark);
  background: #fff;
}

.school-tab-nav__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
 * 以前のナビ用countをタブ内でも利用
 */
.school-tab-nav__button .school-page-nav__count {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  margin-left: 1px;
  color: var(--color-primary-dark);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.school-tab-nav__button:not(.is-active) .school-page-nav__count {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   学校ページ・タブパネル
========================================================= */

.school-tab-panel {
  display: none;
}

.school-tab-panel.is-active {
  display: block;
  animation: school-tab-panel-fade 0.2s ease;
}

.school-tab-panel[hidden] {
  display: none !important;
}

@keyframes school-tab-panel-fade {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * 動きを減らす設定を使用しているユーザー
 */
@media (prefers-reduced-motion: reduce) {
  .school-tab-panel.is-active {
    animation: none;
  }

  .school-tab-nav__button {
    transition: none;
  }
}

.school-layout__main>.school-tab-panel {
  min-width: 0;
}

.school-layout__main>.school-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* =========================================================
   タブ数増加への対応
========================================================= */

@media (max-width: 480px) {
  .school-tab-nav {
    gap: 3px;
  }

  .school-tab-nav__button {
    min-height: 46px;
    padding-inline: 3px;
    font-size: 0.75rem;
    gap: 3px;
  }

  .school-tab-nav__icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
  }

  /*
   * 4～5タブになった場合も横一列に収まりやすくする
   */
  .school-tab-nav__button:nth-last-child(n + 4),
  .school-tab-nav__button:nth-last-child(n + 4)~.school-tab-nav__button {
    flex-direction: column;
    min-height: 58px;
    font-size: 0.70rem;
    gap: 2px;
  }

  .school-tab-nav__button:nth-last-child(n + 4) .school-page-nav__count,
  .school-tab-nav__button:nth-last-child(n + 4)~.school-tab-nav__button .school-page-nav__count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    font-size: 0.5rem;
  }
}

@media (min-width: 600px) {
  .school-tab-nav {
    padding: 5px;
  }

  .school-tab-nav__button {
    min-height: 52px;
    font-size: 0.8rem;
    gap: 7px;
  }

  .school-tab-nav__icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 0.7rem;
  }
}

/* =========================================================
   トップページ
========================================================= */

.home-main {
  padding-top: 14px;
}

.home-main .container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* =========================================================
   トップ概要
========================================================= */

.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(135deg,
      #ffffff 0%,
      #f2f8f6 72%,
      #e3f0ed 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
}

.home-intro__body {
  padding: 18px 16px 14px;
}

.home-intro__eyebrow {
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.home-intro h1 {
  color: #173f41;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.home-intro__description {
  margin-top: 8px;
  color: #536968;
  font-size: 0.75rem;
  line-height: 1.75;
}

.home-intro__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.68);
  border-top: 1px solid var(--color-border);
}

.home-intro__stats>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 11px 4px;
  text-align: center;
}

.home-intro__stats>div:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.home-intro__stats strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-primary-dark);
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-intro__stats span {
  margin-top: 3px;
  color: var(--color-text-soft);
  font-size: 0.56rem;
  font-weight: 700;
}

/* =========================================================
   共通セクション
========================================================= */

.home-section,
.home-search {
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.home-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
  gap: 10px;
}

.home-section-heading h2 {
  color: #204748;
  font-size: 0.95rem;
  line-height: 1.4;
}

.home-section-heading p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.63rem;
  line-height: 1.45;
}

.home-section-heading>a {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 0.63rem;
  font-weight: 800;
}

/* =========================================================
   キーワード検索
========================================================= */

.home-search {
  background:
    linear-gradient(145deg,
      #ffffff,
      #f7faf9);
}

.home-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  overflow: hidden;
  min-height: 47px;
  background: #fff;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
}

.home-search-form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 95, 98, 0.1);
}

.home-search-form__keyword {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}

.home-search-form__icon {
  color: var(--color-primary);
  font-size: 1rem;
  text-align: center;
}

.home-search-form input {
  width: 100%;
  min-width: 0;
  padding: 9px 7px 9px 0;
  color: var(--color-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.76rem;
}

.home-search-form input::placeholder {
  color: #9aa8a7;
}

.home-search-form button {
  color: #fff;
  background: var(--color-primary);
  border: 0;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.home-search-form button:hover {
  background: var(--color-primary-dark);
}

.home-search-links {
  display: flex;
  overflow-x: auto;
  margin-top: 8px;
  gap: 6px;
  scrollbar-width: none;
}

.home-search-links::-webkit-scrollbar {
  display: none;
}

.home-search-links a {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #45615f;
  background: #f0f5f4;
  border: 1px solid #dde7e5;
  border-radius: 999px;
  font-size: 0.70rem;
  font-weight: 700;
}

/* =========================================================
   検索方法
========================================================= */

.home-search-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.home-search-method {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) 13px;
  align-items: center;
  min-height: 66px;
  padding: 9px;
  background: #f8faf9;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-small);
  gap: 9px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.home-search-method:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
  transform: translateY(-1px);
}

.home-search-method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
}

.home-search-method__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-search-method__body strong {
  color: #27494a;
  font-size: 0.76rem;
}

.home-search-method__body small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.70rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-search-method__arrow {
  color: #809593;
  font-size: 1rem;
}

/* =========================================================
   2カラム
========================================================= */

.home-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* =========================================================
   学校種別
========================================================= */

.home-compact-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.home-compact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 41px;
  padding: 7px 9px;
  background: #f8faf9;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
  gap: 6px;
}

.home-compact-link:hover {
  background: var(--color-primary-light);
  border-color: #c0d8d4;
}

.home-compact-link span {
  overflow: hidden;
  color: #315150;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-compact-link small {
  flex: 0 0 auto;
  color: var(--color-text-soft);
  font-size: 0.56rem;
}

/* =========================================================
   設置区分
========================================================= */

.home-ownership-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-ownership-link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 12px;
  align-items: center;
  min-height: 50px;
  padding: 7px 9px;
  background: #f8faf9;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
  gap: 8px;
}

.home-ownership-link:hover {
  background: var(--color-primary-light);
}

.home-ownership-link__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 9px;
  font-size: 0.7rem;
  font-weight: 800;
}

.home-ownership-link--1 .home-ownership-link__mark {
  background: #345b83;
}

.home-ownership-link--2 .home-ownership-link__mark {
  background: #1f5f62;
}

.home-ownership-link--3 .home-ownership-link__mark {
  background: #8b5e34;
}

.home-ownership-link__body {
  display: flex;
  flex-direction: column;
}

.home-ownership-link__body strong {
  color: #31504f;
  font-size: 0.72rem;
}

.home-ownership-link__body small {
  color: var(--color-text-soft);
  font-size: 0.57rem;
}

/* =========================================================
   都道府県
========================================================= */

.home-prefecture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.home-prefecture-grid a {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  background: #f8faf9;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
}

.home-prefecture-grid a:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.home-prefecture-grid span {
  overflow: hidden;
  color: #31504f;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-prefecture-grid small {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.60rem;
}

/* =========================================================
   学問分野
========================================================= */

.home-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.home-field-link {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 12px;
  align-items: center;
  min-height: 49px;
  padding: 7px 8px;
  background: #f8faf9;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
  gap: 8px;
}

.home-field-link:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.home-field-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  color: var(--color-primary-dark);
  background: #dcecea;
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 800;
}

.home-field-link__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-field-link__body strong {
  overflow: hidden;
  color: #31504f;
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-field-link__body small {
  color: var(--color-text-soft);
  font-size: 0.60rem;
}

/* =========================================================
   掲示板案内
========================================================= */

.home-board-guide {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  padding: 15px;
  background:
    linear-gradient(135deg,
      #eaf5f2,
      #f8fbfa);
  border: 1px solid #cfe1dd;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  gap: 11px;
}

.home-board-guide__icon {
  position: relative;
  width: 46px;
  height: 46px;
  background: var(--color-primary);
  border-radius: 50%;
}

.home-board-guide__icon span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  transform: translateX(-50%);
}

.home-board-guide__icon i {
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 26px;
  height: 16px;
  background: #fff;
  border-radius: 15px 15px 5px 5px;
  transform: translateX(-50%);
}

.home-board-guide__eyebrow {
  color: var(--color-primary);
  font-size: 0.70rem;
  font-weight: 800;
}

.home-board-guide h2 {
  margin-top: 2px;
  color: #204748;
  font-size: 0.95rem;
  line-height: 1.45;
}

.home-board-guide__body>p:not(.home-board-guide__eyebrow) {
  margin-top: 5px;
  color: #526867;
  font-size: 0.7rem;
  line-height: 1.7;
}

.home-board-guide ul {
  margin-top: 7px;
}

.home-board-guide li {
  position: relative;
  padding-left: 13px;
  color: #536867;
  font-size: 0.64rem;
  line-height: 1.65;
}

.home-board-guide li::before {
  position: absolute;
  left: 0;
  color: var(--color-primary);
  content: "✓";
  font-weight: 800;
}

.home-board-guide__link {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  margin-top: 1px;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-small);
  font-size: 0.72rem;
  font-weight: 800;
  gap: 7px;
}

.home-board-guide__link:hover {
  background: var(--color-primary-dark);
}

/* =========================================================
   サイト趣旨
========================================================= */

.home-purpose {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.home-purpose__heading {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--color-border);
  gap: 9px;
}

.home-purpose__heading>span {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 9px;
  font-size: 0.7rem;
  font-weight: 800;
}

.home-purpose__heading h2 {
  color: #204748;
  font-size: 0.9rem;
}

.home-purpose__heading p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.70rem;
}

.home-purpose__content {
  display: flex;
  flex-direction: column;
  color: #4f6463;
  font-size: 0.69rem;
  line-height: 1.8;
  gap: 7px;
}

.home-purpose__links {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border);
  gap: 6px;
}

.home-purpose__links a {
  padding: 5px 9px;
  color: #45615f;
  background: #f2f6f5;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* =========================================================
   タブレット・PC
========================================================= */

@media (min-width: 600px) {
  .home-intro {
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: stretch;
  }

  .home-intro__body {
    padding: 22px;
  }

  .home-intro__stats {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .home-intro__stats>div {
    justify-content: center;
    padding: 8px;
  }

  .home-intro__stats>div:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .home-intro__stats strong {
    font-size: 1.05rem;
  }

  .home-search-form {
    grid-template-columns: minmax(0, 1fr) 94px;
  }

  .home-search-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-prefecture-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-board-guide {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    padding: 18px;
  }

  .home-board-guide__link {
    grid-column: auto;
    min-width: 190px;
    margin-top: 0;
    padding-inline: 16px;
  }
}

@media (min-width: 900px) {
  .home-main .container {
    gap: 18px;
  }

  .home-section,
  .home-search,
  .home-purpose {
    padding: 18px;
  }

  .home-search-methods {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-search-method {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 82px;
  }

  .home-search-method__arrow {
    display: none;
  }

  .home-prefecture-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   固定ページ共通
========================================================= */

.simple-page-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background:
    linear-gradient(135deg,
      #ffffff,
      #edf6f4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  gap: 11px;
}

.simple-page-header__icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 800;
}

.simple-page-header h1 {
  color: #204748;
  font-size: 1.15rem;
  line-height: 1.4;
}

.simple-page-header p {
  margin-top: 3px;
  color: var(--color-text-soft);
  font-size: 0.75rem;
  line-height: 1.6;
}

.simple-content-card {
  margin-top: 13px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.simple-content-heading {
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--color-primary-light);
}

.simple-content-heading h2 {
  color: #214748;
  font-size: 0.92rem;
}

.simple-content-heading p {
  margin-top: 3px;
  color: var(--color-text-soft);
  font-size: 0.65rem;
  line-height: 1.55;
}

.simple-page-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
  gap: 8px;
}

/* =========================================================
   お問い合わせ
========================================================= */

.contact-guidance {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  padding: 13px;
  background: #f4f9f7;
  border: 1px solid #d6e5e2;
  border-radius: var(--radius-small);
  gap: 11px;
}

.contact-guidance__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.contact-guidance__body {
  min-width: 0;
}

.contact-guidance__body strong {
  color: #214849;
  font-size: 0.85rem;
}

.contact-guidance__body p {
  margin-top: 3px;
  color: #536968;
  font-size: 0.75rem;
  line-height: 1.65;
}

.contact-guidance__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 9px;
  padding: 7px 13px;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-small);
  font-size: 0.7rem;
  font-weight: 800;
  gap: 6px;
}

.contact-guidance__button:hover {
  background: var(--color-primary-dark);
}

.contact-topic-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.contact-topic {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  padding: 10px;
  background: #f8faf9;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
  gap: 9px;
}

.contact-topic__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 800;
}

.contact-topic h3 {
  color: #294b4a;
  font-size: 0.76rem;
}

.contact-topic p {
  margin-top: 3px;
  color: #5c706f;
  font-size: 0.65rem;
  line-height: 1.65;
}

.contact-notice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  margin-top: 13px;
  padding: 13px;
  background: #fff8e9;
  border: 1px solid #ead9ae;
  border-radius: var(--radius-medium);
  gap: 10px;
}

.contact-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: #a77c28;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
}

.contact-notice h2 {
  color: #70551d;
  font-size: 0.78rem;
}

.contact-notice p {
  margin-top: 3px;
  color: #725f36;
  font-size: 0.65rem;
  line-height: 1.65;
}

.contact-check-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.contact-check-list li {
  position: relative;
  padding-left: 18px;
  color: #536766;
  font-size: 0.67rem;
  line-height: 1.65;
}

.contact-check-list li::before {
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--color-primary);
  content: "✓";
  font-weight: 900;
}

@media (min-width: 600px) {
  .simple-page-header {
    padding: 19px;
  }

  .simple-page-header__icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 0.92rem;
  }

  .simple-content-card {
    padding: 18px;
  }

  .contact-guidance {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 16px;
  }

  .contact-guidance__icon {
    width: 56px;
    height: 56px;
  }

  .contact-topic-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .simple-page-actions {
    display: flex;
    justify-content: center;
  }

  .simple-page-actions .button {
    min-width: 180px;
  }
}

/* =========================================================
   プライバシーポリシー・免責事項
========================================================= */

.legal-page-nav {
  display: flex;
  overflow-x: auto;
  margin-top: 11px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-soft);
  gap: 5px;
  scrollbar-width: none;
}

.legal-page-nav::-webkit-scrollbar {
  display: none;
}

.legal-page-nav a {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: #45615f;
  background: #f1f6f5;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.legal-page-nav a:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
}

.legal-section {
  scroll-margin-top: 15px;
}

.legal-content {
  color: #4e6463;
  font-size: 0.7rem;
  line-height: 1.85;
}

.legal-content>*+* {
  margin-top: 9px;
}

.legal-content a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content ul {
  padding: 9px 10px;
  background: #f7faf9;
  border: 1px solid #e0e8e6;
  border-radius: var(--radius-small);
}

.legal-content li {
  position: relative;
  padding-left: 15px;
}

.legal-content li+li {
  margin-top: 4px;
}

.legal-content li::before {
  position: absolute;
  top: 0;
  left: 1px;
  color: var(--color-primary);
  content: "・";
  font-weight: 900;
}

.legal-notice {
  padding: 10px 11px;
  background: #fff8e9;
  border: 1px solid #ead9ae;
  border-left: 4px solid #b88b32;
  border-radius: var(--radius-small);
}

.legal-notice strong {
  color: #74571f;
  font-size: 0.72rem;
}

.legal-notice p {
  margin-top: 4px;
  color: #6e5c39;
}

.legal-operator {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.legal-operator>div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
}

.legal-operator>div:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.legal-operator dt,
.legal-operator dd {
  padding: 8px 9px;
}

.legal-operator dt {
  color: #49605f;
  background: #f3f7f6;
  font-weight: 800;
}

.legal-operator dd {
  min-width: 0;
  background: #fff;
}

.legal-updated {
  margin: 13px 2px 0;
  color: var(--color-text-soft);
  font-size: 0.70rem;
  text-align: right;
}

@media (min-width: 600px) {
  .legal-content {
    font-size: 0.73rem;
  }

  .legal-operator>div {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .legal-operator dt,
  .legal-operator dd {
    padding: 10px 12px;
  }
}

/* =========================================================
   学校ログについて・利用規約
========================================================= */

.about-school-log {
  overflow: hidden;
}

.about-school-log__intro {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  margin: -14px -14px 13px;
  padding: 16px 14px;
  background:
    linear-gradient(135deg,
      #e8f4f1,
      #f7fbfa);
  border-bottom: 1px solid #d4e5e1;
  gap: 11px;
}

.about-school-log__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 13px;
  font-size: 0.8rem;
  font-weight: 900;
}

.about-school-log__eyebrow {
  color: var(--color-primary);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.about-school-log__intro h2 {
  margin-top: 2px;
  color: #1d4546;
  font-size: 1rem;
  line-height: 1.5;
}

.about-school-log__message {
  padding: 11px;
  background: #f2f8f6;
  border: 1px solid #d6e5e1;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-small);
}

.about-school-log__message strong {
  color: #244d4d;
  font-size: 0.74rem;
}

.about-school-log__message p {
  margin-top: 4px;
}

/* =========================================================
   サイト機能
========================================================= */

.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.about-feature-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  background: #f8faf9;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
}

.about-feature-card>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 800;
}

.about-feature-card h3 {
  color: #294c4c;
  font-size: 0.72rem;
}

.about-feature-card p {
  margin-top: 3px;
  color: var(--color-text-soft);
  font-size: 0.62rem;
  line-height: 1.55;
}

/* =========================================================
   理念
========================================================= */

.about-principles {
  margin-top: 13px;
  padding: 14px;
  background:
    linear-gradient(145deg,
      #1f5f62,
      #174b4e);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.about-principles__heading {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}

.about-principles__heading h2 {
  color: #fff;
  font-size: 0.9rem;
}

.about-principles__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-principles__list>div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.about-principles__list>div>strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #1d5558;
  background: #fff;
  border-radius: 50%;
  font-size: 0.58rem;
}

.about-principles__list span {
  display: flex;
  flex-direction: column;
}

.about-principles__list b {
  color: #fff;
  font-size: 0.72rem;
}

.about-principles__list small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.70rem;
  line-height: 1.55;
}

/* =========================================================
   投稿ルール強調
========================================================= */

.posting-rule-highlight {
  padding: 11px;
  background: #eaf5f2;
  border: 1px solid #c9dfda;
  border-radius: var(--radius-small);
}

.posting-rule-highlight strong {
  color: var(--color-primary-dark);
  font-size: 0.75rem;
}

.posting-rule-highlight p {
  margin-top: 5px;
}

/* =========================================================
   禁止事項
========================================================= */

.prohibited-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.prohibited-list>div {
  padding: 9px 10px;
  background: #faf8f7;
  border: 1px solid #e7ded9;
  border-left: 3px solid #9c6352;
  border-radius: var(--radius-small);
}

.prohibited-list strong {
  color: #714a3f;
  font-size: 0.7rem;
}

.prohibited-list p {
  margin-top: 2px;
  color: #675c58;
  font-size: 0.64rem;
  line-height: 1.6;
}

@media (min-width: 600px) {
  .about-school-log__intro {
    margin: -18px -18px 15px;
    padding: 19px 18px;
  }

  .about-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-principles {
    padding: 18px;
  }

  .about-principles__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .about-principles__list>div {
    grid-template-columns: minmax(0, 1fr);
  }

  .prohibited-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   HTMLサイトマップ
========================================================= */

.sitemap-section {
  scroll-margin-top: 15px;
}

.sitemap-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.sitemap-link-grid a,
.sitemap-prefecture-grid a {
  display: flex;
  align-items: center;
  min-height: 39px;
  padding: 7px 9px;
  color: #365554;
  background: #f7faf9;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-small);
  font-size: 0.67rem;
  font-weight: 700;
}

.sitemap-link-grid a:hover,
.sitemap-prefecture-grid a:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.sitemap-prefecture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.sitemap-category-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.sitemap-category-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  padding: 7px 9px;
  color: #365554;
  background: #f8faf9;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
  gap: 8px;
}

.sitemap-category-list a:hover {
  background: var(--color-primary-light);
}

.sitemap-category-list span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sitemap-category-list small {
  flex: 0 0 auto;
  color: var(--color-text-soft);
  font-size: 0.55rem;
}

.sitemap-school-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sitemap-school-group {
  overflow: hidden;
  background: #f8faf9;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
}

.sitemap-school-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 10px;
  color: #315150;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  gap: 8px;
}

.sitemap-school-group summary small {
  color: var(--color-text-soft);
  font-size: 0.56rem;
}

.sitemap-school-group[open] summary {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-bottom: 1px solid #d4e3df;
}

.sitemap-school-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 8px;
  background: #fff;
  gap: 3px;
}

.sitemap-school-list a {
  padding: 5px 7px;
  color: #4a6261;
  border-radius: 5px;
  font-size: 0.63rem;
  line-height: 1.45;
}

.sitemap-school-list a:hover {
  color: var(--color-primary-dark);
  background: #f0f6f4;
}

@media (min-width: 600px) {
  .sitemap-link-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sitemap-prefecture-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sitemap-category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sitemap-school-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .sitemap-link-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sitemap-prefecture-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .sitemap-category-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sitemap-school-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   職業から進路を探す career.php
========================================================= */

.career-main {
  padding-top: 12px;
}

.career-main>.container {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* =========================================================
   ヘッダー
========================================================= */

.career-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  padding: 15px;
  background:
    linear-gradient(135deg,
      #ffffff 0%,
      #edf6f4 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  gap: 11px;
}

.career-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 900;
}

.career-header__eyebrow {
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.career-header h1 {
  margin-top: 2px;
  color: #183f41;
  font-size: 1.18rem;
  line-height: 1.45;
}

.career-header__description {
  margin-top: 6px;
  color: #536968;
  font-size: 0.8rem;
  line-height: 1.7;
}

.career-header__meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  gap: 6px;
}

.career-header__meta span {
  display: inline-flex;
  align-items: baseline;
  padding: 4px 8px;
  color: #526a68;
  background: #fff;
  border: 1px solid #dce7e4;
  border-radius: 999px;
  font-size: 0.7rem;
  gap: 3px;
}

.career-header__meta strong {
  color: var(--color-primary-dark);
  font-size: 0.82rem;
}

/* =========================================================
   共通セクション
========================================================= */

.career-section,
.career-filter {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.career-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
  gap: 10px;
}

.career-section-heading h2 {
  color: #204748;
  font-size: 1rem;
  line-height: 1.4;
}

.career-section-heading p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.74rem;
  line-height: 1.5;
}

.career-section-heading__count {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 800;
}

/* =========================================================
   学問分野
========================================================= */

.career-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.career-field-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 13px;
  align-items: center;
  min-height: 75px;
  padding: 9px;
  background: #f8faf9;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-small);
  gap: 9px;
}

.career-field-card:hover {
  background: var(--color-primary-light);
  border-color: #bdd6d2;
}

.career-field-card--primary {
  background: #f2f8f6;
  border-color: #cbdeda;
}

.career-field-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 900;
}

.career-field-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.career-field-card__labels {
  display: flex;
  margin-bottom: 2px;
}

.career-field-card__labels em {
  padding: 2px 6px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  font-size: 0.61rem;
  font-style: normal;
  font-weight: 800;
}

.career-field-card__labels em.is-secondary {
  color: #526c69;
  background: #e3ecea;
}

.career-field-card__body>strong {
  color: #294b4a;
  font-size: 0.86rem;
  line-height: 1.4;
}

.career-field-card__body>small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #657876;
  font-size: 0.7rem;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.career-field-card__count {
  margin-top: 3px;
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 800;
}

.career-field-card__arrow {
  color: #78908e;
  font-size: 1.1rem;
}

.career-count-note {
  margin-top: 8px;
  color: #71817f;
  font-size: 0.68rem;
  line-height: 1.5;
}

/* =========================================================
   都道府県
========================================================= */

.career-filter__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.career-filter__form label {
  color: #355352;
  font-size: 0.78rem;
  font-weight: 800;
}

.career-filter__form select {
  width: 100%;
  min-height: 43px;
  padding: 7px 34px 7px 10px;
  color: #354d4c;
  background: #fff;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);
  outline: 0;
  font-size: 0.78rem;
}

.career-filter__form select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 95, 98, 0.1);
}

.career-filter__form>a {
  justify-self: start;
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 700;
}

/* =========================================================
   学校一覧
========================================================= */

.career-school-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.career-school-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 93px;
  padding: 10px 30px 10px 10px;
  background: #f9fbfa;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
}

.career-school-card:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.career-school-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.career-school-card__meta span {
  padding: 2px 6px;
  color: #526b69;
  background: #e8f0ee;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
}

.career-school-card__name {
  margin-top: 5px;
  color: #244847;
  font-size: 0.86rem;
  line-height: 1.45;
}

.career-school-card__location {
  margin-top: 2px;
  color: #687a78;
  font-size: 0.72rem;
}

.career-school-card__fields {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
  gap: 4px;
}

.career-school-card__fields span {
  padding: 2px 6px;
  color: var(--color-primary-dark);
  background: #e7f2ef;
  border-radius: 5px;
  font-size: 0.63rem;
  font-weight: 700;
}

.career-school-card__arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  color: #819492;
  font-size: 1.2rem;
  transform: translateY(-50%);
}

/* =========================================================
   ページ送り
========================================================= */

.career-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  gap: 10px;
}

.career-pagination a,
.career-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 5px 10px;
  border-radius: var(--radius-small);
  font-size: 0.72rem;
}

.career-pagination a {
  color: #fff;
  background: var(--color-primary);
  font-weight: 800;
}

.career-pagination span {
  color: #607370;
  background: #f2f6f5;
}

/* =========================================================
   0件
========================================================= */

.career-empty {
  padding: 18px;
  color: #526866;
  background: #f7faf9;
  border: 1px dashed #cbd9d6;
  border-radius: var(--radius-small);
  text-align: center;
}

.career-empty strong {
  color: #315150;
  font-size: 0.86rem;
}

.career-empty p {
  margin-top: 4px;
  font-size: 0.74rem;
  line-height: 1.6;
}

/* =========================================================
   職業ランキング誘導
========================================================= */

.career-job-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 14px;
  background:
    linear-gradient(135deg,
      #204f52,
      #173f42);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  gap: 10px;
}

.career-job-guide__label {
  color: #a9d3ce;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.career-job-guide h2 {
  margin-top: 2px;
  color: #fff;
  font-size: 1rem;
}

.career-job-guide p {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  line-height: 1.65;
}

.career-job-guide>a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 7px 12px;
  color: #17484b;
  background: #fff;
  border-radius: var(--radius-small);
  font-size: 0.76rem;
  font-weight: 800;
  gap: 6px;
}

/* =========================================================
   PC
========================================================= */

@media (min-width: 600px) {

  .career-header {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 18px;
  }

  .career-header__icon {
    width: 56px;
    height: 56px;
  }

  .career-header h1 {
    font-size: 1.35rem;
  }

  .career-section,
  .career-filter {
    padding: 17px;
  }

  .career-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .career-school-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .career-filter__form {
    grid-template-columns: auto minmax(240px, 360px) auto;
    align-items: center;
  }

  .career-job-guide {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 18px;
  }

  .career-job-guide>a {
    min-width: 190px;
  }
}

@media (min-width: 900px) {

  .career-field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .career-school-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   career.php カテゴリ一覧
========================================================= */

.career-category-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.career-category-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 82px;
  padding: 10px 11px;
  background: #f9fbfa;
  border: 1px solid #dfe8e6;
  border-radius: var(--radius-small);
  gap: 8px;
}

.career-category-card:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.career-category-card__body {
  min-width: 0;
}

.career-category-card__body strong {
  display: block;
  color: #244847;
  font-size: 0.9rem;
  line-height: 1.45;
}

.career-category-card__body p {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: #607472;
  font-size: 0.76rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.career-category-card__body span {
  display: inline-block;
  margin-top: 5px;
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 800;
}

.career-category-card__arrow {
  color: #78908e;
  font-size: 1.2rem;
}

@media (min-width: 600px) {
  .career-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .career-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   学校詳細：関連職業
========================================================= */

.school-career-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.school-career-card {
  display: grid;
  grid-template-columns:
    36px minmax(0, 1fr) 18px;
  align-items: center;
  min-height: 58px;
  padding: 8px 9px;
  background: #f8faf9;
  border: 1px solid #dce6e4;
  border-radius: var(--radius-small);
  gap: 9px;
}

.school-career-card:hover {
  background: var(--color-primary-light);
  border-color: #bdd6d2;
}

.school-career-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.school-career-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.school-career-card__body strong {
  color: #284b4a;
  font-size: 0.84rem;
  line-height: 1.4;
}

.school-career-card__body small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #667977;
  font-size: 0.7rem;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.school-career-card__arrow {
  color: #738987;
  font-size: 0.85rem;
}

.school-career-note {
  display: flex;
  flex-direction: column;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  gap: 6px;
}

.school-career-note p {
  color: #71817f;
  font-size: 0.7rem;
  line-height: 1.55;
}

.school-career-note a {
  align-self: flex-start;
  color: var(--color-primary);
  font-size: 0.74rem;
  font-weight: 800;
}

@media (min-width: 600px) {
  .school-career-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .school-career-note {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .school-career-note p {
    max-width: 70%;
  }
}

/* =========================================================
   field.php：関連職業
========================================================= */

.field-career-section {
  padding: 14px;
  background:
    linear-gradient(145deg,
      #f5faf8,
      #ffffff);
  border: 1px solid #d6e4e1;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.field-career-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
  gap: 10px;
}

.field-career-heading__label {
  display: block;
  margin-bottom: 2px;
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.field-career-heading h2 {
  color: #204748;
  font-size: 1rem;
  line-height: 1.4;
}

.field-career-heading p {
  margin-top: 2px;
  color: var(--color-text-soft);
  font-size: 0.76rem;
  line-height: 1.5;
}

.field-career-heading>a {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.field-career-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.field-career-card {
  display: grid;
  grid-template-columns:
    36px minmax(0, 1fr) 18px;
  align-items: center;
  min-height: 64px;
  padding: 8px 9px;
  background: #fff;
  border: 1px solid #dce6e4;
  border-radius: var(--radius-small);
  gap: 9px;
}

.field-career-card:hover {
  background: var(--color-primary-light);
  border-color: #bdd6d2;
}

.field-career-card--primary {
  background: #f0f7f5;
  border-color: #c8ddda;
}

.field-career-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.field-career-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.field-career-card__meta {
  display: flex;
  margin-bottom: 2px;
}

.field-career-card__meta em {
  padding: 2px 6px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.field-career-card__meta em.is-secondary {
  color: #56706d;
  background: #e6eeec;
}

.field-career-card__body strong {
  color: #284b4a;
  font-size: 0.85rem;
  line-height: 1.4;
}

.field-career-card__body small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #657976;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.field-career-card__arrow {
  color: #748987;
  font-size: 0.85rem;
}

.field-career-note {
  margin-top: 8px;
  color: #71817f;
  font-size: 0.7rem;
  line-height: 1.55;
}

@media (min-width: 600px) {
  .field-career-section {
    padding: 16px;
  }

  .field-career-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .field-career-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   学校詳細：在籍・出身有名人
========================================================= */

.school-celebrity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.school-celebrity-item {
  display: grid;
  grid-template-columns:
    52px minmax(0, 1fr) 18px;
  align-items: center;
  min-height: 62px;
  padding: 5px 8px 5px 5px;
  background: #f9fbfa;
  border: 1px solid #dfe7e5;
  border-radius: var(--radius-small);
  gap: 9px;
}

.school-celebrity-item:hover {
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.school-celebrity-item__image {
  display: block;
  width: 52px;
  height: 52px;
  overflow: hidden;
  background: #eef3f2;
  border-radius: 8px;
}

.school-celebrity-item__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-celebrity-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.school-celebrity-item__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
}

.school-celebrity-item__name-row strong {
  color: #254847;
  font-size: 0.88rem;
  line-height: 1.4;
}

.school-celebrity-item__name-row small {
  color: #758684;
  font-size: 0.68rem;
}

.school-celebrity-item__kana {
  margin-top: 1px;
  color: #7a8b89;
  font-size: 0.69rem;
  line-height: 1.35;
}

.school-celebrity-item__occupations {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #566d6b;
  font-size: 0.74rem;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.school-celebrity-item__arrow {
  color: #788d8b;
  font-size: 0.82rem;
}

.school-celebrities-note {
  margin-top: 7px;
  color: #788684;
  font-size: 0.68rem;
  line-height: 1.5;
}

@media (min-width: 600px) {
  .school-celebrity-list {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .school-celebrity-item {
    grid-template-columns:
      56px minmax(0, 1fr) 18px;
    min-height: 66px;
  }

  .school-celebrity-item__image {
    width: 56px;
    height: 56px;
  }
}

/* =========================================================
   学校別有名人一覧
========================================================= */

.school-persons-main {
  padding-top: 12px;
}

.school-persons-header {
  padding: 15px;
  background:
    linear-gradient(135deg,
      #ffffff,
      #edf6f4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

.school-persons-header__eyebrow {
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.school-persons-header h1 {
  margin-top: 3px;
  color: #183f41;
  font-size: 1.18rem;
  line-height: 1.45;
}

.school-persons-header__description {
  margin-top: 6px;
  color: #566b69;
  font-size: 0.8rem;
  line-height: 1.7;
}

.school-persons-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 9px;
  gap: 5px;
}

.school-persons-header__meta span,
.school-persons-header__meta strong {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
}

.school-persons-header__meta span {
  color: #566e6c;
  background: #fff;
  border: 1px solid #dce7e4;
}

.school-persons-header__meta strong {
  color: #fff;
  background: var(--color-primary);
  font-weight: 800;
}

/* 学校ページへ戻る */

.school-persons-back {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 9px 0;
  padding: 7px 9px;
  background: #f7faf9;
  border: 1px solid #e0e8e6;
  border-radius: var(--radius-small);
  gap: 5px 10px;
}

.school-persons-back a {
  color: var(--color-primary);
  font-size: 0.74rem;
  font-weight: 800;
}

.school-persons-back span {
  color: #758582;
  font-size: 0.7rem;
}

/* no image補完 */

.school-celebrity-item__no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  background: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 900;
}

/* =========================================================
   ページネーション
========================================================= */

.school-persons-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  gap: 8px;
}

.school-persons-pagination__main {
  display: grid;
  grid-template-columns:
    minmax(70px, 1fr) auto minmax(70px, 1fr);
  align-items: center;
  width: 100%;
  gap: 7px;
}

.school-persons-pagination__main a,
.school-persons-pagination__main>span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 5px 8px;
  border-radius: var(--radius-small);
  font-size: 0.74rem;
  font-weight: 800;
}

.school-persons-pagination__main a {
  color: #fff;
  background: var(--color-primary);
}

.school-persons-pagination__main a:hover {
  background: var(--color-primary-dark);
}

.school-persons-pagination__main .is-disabled {
  color: #9ba7a5;
  background: #f2f5f4;
  cursor: default;
}

.school-persons-pagination__main strong {
  min-width: 64px;
  color: #506563;
  font-size: 0.74rem;
  text-align: center;
}

.school-persons-pagination__numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.school-persons-pagination__numbers a,
.school-persons-pagination__numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 33px;
  height: 33px;
  padding: 3px 6px;
  color: #526866;
  background: #f3f7f6;
  border: 1px solid #e0e7e5;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 700;
}

.school-persons-pagination__numbers a:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-color: #bfd7d3;
}

.school-persons-pagination__numbers .is-current {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   エラー・0件
========================================================= */

.school-persons-error,
.school-persons-empty {
  padding: 18px 12px;
  color: #5c706e;
  background: #f7faf9;
  border: 1px dashed #cbd9d6;
  border-radius: var(--radius-small);
  text-align: center;
}

.school-persons-error strong,
.school-persons-empty strong {
  color: #315150;
  font-size: 0.88rem;
}

.school-persons-error p,
.school-persons-empty p {
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.65;
}

@media (min-width: 600px) {
  .school-persons-header {
    padding: 18px;
  }

  .school-persons-header h1 {
    font-size: 1.35rem;
  }

  .school-persons-pagination__main {
    max-width: 420px;
  }
}

.school-celebrities-more {
  margin-top: 8px;
}

.school-celebrities-more a {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto 14px;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1px solid #c9deda;
  border-radius: var(--radius-small);
  font-size: 0.78rem;
  font-weight: 800;
  gap: 6px;
}

.school-celebrities-more a:hover {
  background: #dcece8;
}

.school-celebrities-more strong {
  padding: 2px 7px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 999px;
  font-size: 0.68rem;
}