@charset "UTF-8";

/* =========================================================================
   キャリア教育プラザ TOP
   design.md「案A：キャリアAIプラザ完全踏襲＋濃紺化」に準拠
   ========================================================================= */

/* ---------- 1. デザイントークン（design.md §3 カラーパレット） ---------- */
:root {
  --primary: #062B49;
  --primary-dark: #031A2E;
  --secondary: #124D73;
  --gold: #C9A961;
  --gold-dark: #B8860B;
  --base: #FFFFFF;   /* 下層ページは白を基調にする */
  --cream: #FFFDF8;  /* 下層ページ向けのごく薄いクリーム */
  --white: #FFFFFF;
  --text: #1A1A1A;
  --sub: #5C5C5C;
  --muted: #8A8A8A;
  --border: rgba(10, 24, 48, 0.08);
  --accent: #C9872A;        /* 落ち着いたブロンズ／山吹（ネイビー＋ゴールド路線に調和） */
  --accent-dark: #AC701D;   /* hover：通常色より少し濃く */
  --accent-soft: rgba(201, 135, 42, 0.12);
  --accent-shadow: rgba(201, 135, 42, 0.24);
  --primary-soft: rgba(18, 77, 115, 0.08);
  --gold-soft: rgba(201, 169, 97, 0.12);

  --container: 1180px;
  --radius: 4px;
  --radius-sm: 4px;
  --header-h: 122px; /* 上部バー＋ヘッダー本体のおおよその高さ */
}

/* ---------- 2. リセット / ベース ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  background: var(--white);
}

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

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

a {
  color: inherit;
}

h1, h2, h3 {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  margin: 0;
}

p {
  margin: 0;
  color: var(--sub);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 3. 共通レイアウト（design.md §5） ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--base  { background: var(--base); }
.section--top-soft { background: #F6FAFD; }
.section--news-soft {
  background: #FFFDF8;
  border-top: 1px solid rgba(10, 24, 48, 0.04);
  border-bottom: 1px solid rgba(10, 24, 48, 0.04);
}

/* セクション上部の細いゴールドヘアライン（区切りとリズム用・TOPで限定使用）。
   ごく薄い全幅ボーダーに、中央へ短いゴールドの差し色を重ねる上品な処理。 */
.section--hairline-top {
  position: relative;
  border-top: 1px solid rgba(6, 32, 51, 0.08);
}

.section--hairline-top::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 2px;
  background: var(--gold);
}

.section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.section__eyebrow {
  display: block;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.section__title {
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
  margin: 0 0 16px;
  /* 複数行見出しを語の途中で折らず、行のバランスを整える（未対応ブラウザは無視） */
  text-wrap: balance;
}

.section__lead {
  color: var(--sub);
  font-size: 1rem;
}

.section__lead--center {
  margin-inline: auto;
}

.section__foot {
  margin-top: 48px;
  text-align: center;
}

/* ---------- 4. ボタン（design.md §8） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 2px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: 0.25s ease;
  cursor: pointer;
}

.btn--primary {
  background: var(--accent);
  color: var(--white);
  border: 1px solid var(--accent);
  box-shadow: 0 14px 32px var(--accent-shadow);
}

.btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
}

.btn--secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn--secondary:hover {
  background: var(--primary);
  color: var(--white);
}

/* 濃色背景の上で使う透過ボタン */
.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.btn--ghost:hover {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}

.btn--block {
  width: 100%;
}

/* ---------- 5. カード共通（design.md §9） ---------- */
.card__label {
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 20px 0 8px;
}

.card__title {
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.card__text {
  color: var(--sub);
  font-size: 0.95rem;
  line-height: 1.85;
  margin: 0 0 18px;
}

.text-link,
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.text-link::after,
.card__link::after {
  content: "→";
  color: var(--accent);
  transition: transform 0.2s ease;
}

.text-link:hover,
.card__link:hover {
  color: var(--gold-dark);
}

.text-link:hover::after,
.card__link:hover::after {
  transform: translateX(4px);
}

/* 外部リンク（別サイト）であることを示す矢印 */
.card__link--external::after {
  content: "↗";
}

.card__link--external:hover::after {
  transform: translate(3px, -3px);
}

.related-company-link {
  position: relative;
}

.related-company-link::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: max-content;
  max-width: 230px;
  padding: 8px 12px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: center;
  background: #fff7df;
  border: 1px solid rgba(201, 169, 97, 0.48);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(3, 26, 46, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(0.96);
  transform-origin: center bottom;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.related-company-link:hover::before,
.related-company-link:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

/* ナビ等の外部リンクマーク */
.ext-mark {
  display: inline-block;
  margin-left: 3px;
  font-size: 0.78em;
  color: var(--gold-dark);
  vertical-align: 0.05em;
}

/* ---------- 6. 画像フレーム / プレースホルダー（design.md §10） ---------- */
.phframe {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 12px;
}

.phframe img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.phframe::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 52%;
  height: 52%;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  pointer-events: none;
}

/* 画像未準備時のプレースホルダー */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      var(--primary-soft),
      var(--primary-soft) 12px,
      transparent 12px,
      transparent 24px
    ),
    var(--cream);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.placeholder--4x3  { aspect-ratio: 4 / 3; }
.placeholder--16x9 { aspect-ratio: 16 / 9; }
.placeholder--map  { aspect-ratio: 16 / 7; }

/* ---------- 7. タグ ---------- */
.tag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 2px;
}

/* ---------- 8. スクロール表示アニメーション（汎用） ----------
   JS有効時のみ初期状態を隠す（.js は main.js が付与）。
   JS無効時は常に表示されるためコンテンツが消えない。 */
.js .reveal {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.js .reveal.reveal-up {
  transform: translateY(24px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Heroの CTA は本文より少し遅れて表示 */
.js .hero__actions--delay {
  transition-delay: 0.25s;
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* 上部ユーティリティバー */
.utility-bar {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 16px;
}

.utility-bar__info,
.utility-bar__links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.utility-bar__info a,
.utility-bar__links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.utility-bar__info a:hover,
.utility-bar__links a:hover {
  color: var(--gold);
}

.utility-bar__tel {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Header utility enhancement: inline SVG icons and clearer grouping */
.utility-bar {
  background: linear-gradient(90deg, #031A2E 0%, #062033 50%, #0B3558 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
}

.utility-bar__inner {
  min-height: 44px;
  gap: 18px;
}

.utility-bar__info,
.utility-bar__links {
  gap: 10px 14px;
}

.utility-bar__item,
.utility-bar__link,
.utility-bar__text {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.utility-bar__link {
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.utility-bar__text {
  color: rgba(255, 255, 255, 0.82);
}

.utility-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: #ffffff;
}

.utility-bar__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.utility-bar__icon svg,
.utility-bar__icon svg path,
.utility-bar__icon svg circle,
.utility-bar__icon svg rect,
.utility-bar__icon svg line,
.utility-bar__icon svg polyline {
  color: #ffffff;
  stroke: currentColor;
  fill: none;
}

.utility-bar__icon svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

.utility-bar__link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.11);
  transform: translateY(-1px);
}

.utility-bar__link:hover .utility-bar__icon,
.utility-bar__link:hover .utility-bar__icon svg,
.utility-bar__link:hover .utility-bar__icon svg path,
.utility-bar__link:hover .utility-bar__icon svg circle,
.utility-bar__link:hover .utility-bar__icon svg rect,
.utility-bar__link:hover .utility-bar__icon svg line,
.utility-bar__link:hover .utility-bar__icon svg polyline {
  color: #ffffff;
}

.utility-bar__link:hover .utility-bar__icon svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

/* ヘッダー本体 */
.header-bar {
  background: #ffffff;
  border-top: 3px solid #062033;
  border-bottom: 1px solid #0f2f4e;
}

.header-bar__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 74px;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-width: 330px;
  padding-right: 24px;
  text-decoration: none;
  margin-right: 0;
  /* 画像未配置でもロゴ枠が潰れないよう最小高さを確保 */
  min-height: 48px;
  border-right: 0;
}

.site-header__logo-img {
  width: 260px;
  height: auto;
  /* alt（テキスト）表示時の体裁を最低限整える */
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* グローバルナビ（PC） */
.site-nav__list {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.site-nav__item {
  position: relative;
}

.site-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.site-nav__item > a:hover {
  color: var(--gold-dark);
}

.site-nav__item--has-child > a::after {
  content: "▾";
  font-size: 0.7em;
}

/* ドロップダウン */
.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.12);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
}

.site-nav__item--has-child:hover .site-nav__dropdown,
.site-nav__item--has-child:focus-within .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-nav__dropdown a {
  display: block;
  padding: 10px 14px;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav__dropdown a:hover {
  background: #f7f5ef;
  color: var(--primary);
}

.header-bar__cta {
  min-height: 74px;
  padding: 0 16px;
  white-space: nowrap;
}

/* Global navigation enhancement: supports both fallback classes and WordPress menu classes */
.header-bar__inner {
  gap: 0;
}

.site-nav {
  display: flex;
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
}

.site-nav__list {
  align-items: stretch;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
}

.site-nav__item,
.site-nav__list > li {
  display: flex;
  position: relative;
  flex: 0 1 118px;
  min-width: 0;
}

.site-nav__list > .site-nav__item--contact {
  display: none;
}

.site-nav__item > a,
.site-nav__list > li > a,
.header-bar__cta {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  gap: 6px;
  min-width: 0;
  min-height: 74px;
  padding: 10px 14px;
  color: #062033;
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  background: #ffffff;
  border: 0;
  border-left: 1px solid rgba(10, 24, 48, 0.18);
  border-radius: 0;
  box-shadow: none;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.site-nav__item > a.related-company-link,
.site-nav__list > li > a.related-company-link {
  overflow: visible;
}

.site-nav__item > a.related-company-link::before,
.site-nav__list > li > a.related-company-link::before {
  content: none;
  display: none;
}

/* 区切り線はリンク（a）の border のみで管理し、li 側には線を出さない（二重線防止）。
   最後のナビ項目（会社概要）にだけ border-right を付けてメニュー右端を閉じる。
   border は border-box のためリンクの内側に収まり、hover/current の背景端と一致する。 */
.site-nav__list > li:last-child > a,
.site-nav__list > li:has(+ .site-nav__item--contact) > a {
  border-right: 1px solid rgba(10, 24, 48, 0.18);
}

.site-nav__item > a::before,
.site-nav__list > li > a::before,
.header-bar__cta::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.site-nav__item > a:hover,
.site-nav__list > li > a:hover,
.header-bar__cta:hover {
  color: var(--primary);
  background: #f7f5ef;
  border-color: rgba(10, 24, 48, 0.14);
  box-shadow: inset 0 -3px 0 var(--gold);
  transform: none;
}

.site-nav__item > a:focus-visible,
.site-nav__list > li > a:focus-visible {
  color: var(--primary);
  background: #f7f5ef;
  outline: 2px solid rgba(201, 169, 97, 0.58);
  outline-offset: -2px;
}

.site-nav__list > .current-menu-item > a,
.site-nav__list > .current_page_item > a,
.site-nav__list > .current-menu-ancestor > a,
.site-nav__list > .current_page_ancestor > a {
  color: var(--primary);
  background: #f7f5ef;
  border-color: rgba(10, 24, 48, 0.12);
  box-shadow: inset 0 -3px 0 var(--gold);
  transform: none;
}

.site-nav__item > a:hover::before,
.site-nav__list > li > a:hover::before,
.site-nav__list > .current-menu-item > a::before,
.site-nav__list > .current_page_item > a::before,
.site-nav__list > .current-menu-ancestor > a::before,
.site-nav__list > .current_page_ancestor > a::before,
.header-bar__cta:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.site-nav__en {
  position: relative;
  z-index: 1;
  color: currentColor;
  font-size: 0.68rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.site-nav__jp {
  position: relative;
  z-index: 1;
  color: currentColor;
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 800;
  white-space: nowrap;
}

.site-nav__item--has-child > a::after,
.site-nav__list > .menu-item-has-children > a::after,
.site-nav__list > .page_item_has_children > a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 8px;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
  opacity: 0.68;
  z-index: 1;
}

.site-nav .related-company-link::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  bottom: auto;
  z-index: 40;
  width: max-content;
  max-width: 230px;
  padding: 8px 12px;
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: center;
  background: #fff7df;
  border: 1px solid rgba(201, 169, 97, 0.48);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(3, 26, 46, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px) scale(0.96);
  transform-origin: center top;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.site-nav .related-company-link:hover::after,
.site-nav .related-company-link:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.site-nav__dropdown,
.site-nav__list .sub-menu,
.site-nav__list .children {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 250px;
  padding: 0;
  background: var(--white);
  border: 1px solid rgba(10, 24, 48, 0.14);
  border-radius: 4px;
  box-shadow: 0 20px 52px rgba(3, 26, 46, 0.14);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
}

.site-nav__item--has-child:hover .site-nav__dropdown,
.site-nav__item--has-child:focus-within .site-nav__dropdown,
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu,
.site-nav__list > li:hover > .children,
.site-nav__list > li:focus-within > .children {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-nav__dropdown li,
.site-nav__list .sub-menu li,
.site-nav__list .children li {
  list-style: none;
}

.site-nav__dropdown li + li,
.site-nav__list .sub-menu li + li,
.site-nav__list .children li + li {
  border-top: 1px solid rgba(10, 24, 48, 0.12);
}

.site-nav__dropdown a,
.site-nav__list .sub-menu a,
.site-nav__list .children a {
  display: block;
  padding: 13px 16px;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-nav__dropdown a:hover,
.site-nav__list .sub-menu a:hover,
.site-nav__list .children a:hover {
  color: var(--primary);
  background: #f7f5ef;
  box-shadow: inset 3px 0 0 var(--gold);
}

.header-bar__cta {
  flex: 0 0 auto;
  align-self: center;
  min-width: 112px;
  min-height: 44px;
  width: auto;
  max-width: 136px;
  margin-left: 14px;
  padding: 7px 16px;
  color: #ffffff;
  overflow: visible;
  background: #f28c28;
  border: 1px solid #f28c28;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(242, 140, 40, 0.18);
}

/* 旧：CTA 左に浮かせていた縦区切り線は、COMPANY の青背景の外側（白い余白）に
   はみ出して見える原因だったため廃止。区切り線は会社概要リンクの border-right で
   背景端と一致させて表示する。CONTACT はオレンジCTAとして独立したボタンのまま。 */
.header-bar__cta::after {
  display: none;
}

.header-bar__cta:hover {
  color: #ffffff;
  background: #d97316;
  border-color: #d97316;
  box-shadow: 0 10px 24px rgba(217, 115, 22, 0.22);
}

.header-bar__cta::before {
  display: none;
}

.header-bar__cta .site-nav__en {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.header-bar__cta .site-nav__jp {
  font-size: 0.82rem;
  line-height: 1.2;
}

@media (max-width: 1180px) {
  .site-header__logo {
    min-width: 290px;
    padding-right: 18px;
  }

  .site-nav__item > a,
  .site-nav__list > li > a {
    padding-inline: 10px;
  }

  .site-nav__item,
  .site-nav__list > li {
    flex-basis: 102px;
  }

  .header-bar__cta {
    min-width: 104px;
    max-width: 124px;
    width: auto;
    margin-left: 10px;
    padding-inline: 12px;
  }

  .site-nav__en {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
  }

  .site-nav__jp {
    font-size: 0.78rem;
  }
}

/* ハンバーガー（SPのみ表示） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--primary);
  transition: 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* スマホメニュー */
.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--white);
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu__nav {
  padding: 16px 24px 28px;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
}

.mobile-menu__list li {
  min-width: 0;
}

.mobile-menu__list a {
  display: block;
  padding: 14px 4px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.mobile-menu__list a:hover {
  color: var(--gold-dark);
}

.mobile-menu__list .sub-menu,
.mobile-menu__list .children {
  margin: 4px 0 8px 16px;
  padding-left: 14px;
  border-left: 1px solid rgba(10, 24, 48, 0.12);
}

.mobile-menu__list .sub-menu a,
.mobile-menu__list .children a,
.mobile-menu__child a {
  position: relative;
  color: #31445a;
  font-size: 0.92em;
  font-weight: 500;
}

.mobile-menu__list .sub-menu a,
.mobile-menu__list .children a {
  padding: 10px 4px 10px 0;
  border-bottom-color: rgba(10, 24, 48, 0.06);
}

.mobile-menu__child {
  margin-left: 16px;
  padding-left: 14px;
  border-left: 1px solid rgba(10, 24, 48, 0.12);
}

.mobile-menu__child a {
  padding: 10px 4px;
}

.mobile-menu__list .sub-menu a::before,
.mobile-menu__list .children a::before,
.mobile-menu__child a::before {
  content: "›";
  margin-right: 6px;
  color: #17a7d8;
  font-weight: 700;
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

body.is-menu-open {
  overflow: hidden;
}

/* =========================================================================
   HERO（design.md §7）
   ========================================================================= */
.hero {
  position: relative;
  color: var(--white);
  /* 画像未配置でも崩れないよう、下地に濃紺グラデーションを敷く */
  background: linear-gradient(120deg, var(--primary-dark) 0%, var(--secondary) 100%);
  overflow: hidden;
}

/* スライドはグリッドで同一セルに重ね、最も背の高いスライドで高さが決まる
   （絶対配置でないためコンテンツがはみ出さず、レスポンシブに強い） */
.hero__slides {
  display: grid;
}

.hero-slide {
  grid-area: 1 / 1;        /* 全スライドを重ねる */
  position: relative;
  display: flex;
  align-items: center;
  min-height: 528px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--primary-dark); /* 画像未配置時のフォールバック */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* フェードアウト中は表示を保ち、終了後に visibility を切る（クロスフェード＋フォーカス除外） */
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
  will-change: opacity;
}

.hero-slide--soft-filter {
  background-image: none !important;
}

.hero-slide--soft-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-bg);
  background-position: inherit;
  background-size: inherit;
  background-repeat: no-repeat;
  filter: brightness(0.9) saturate(0.94) contrast(1.03);
  transform: scale(1.01);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition: opacity 1.1s ease, visibility 0s;
}

/* 濃紺の半透明オーバーレイ（白文字の可読性確保） */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(3, 26, 46, 0.82) 0%,
    rgba(6, 43, 73, 0.66) 55%,
    rgba(3, 26, 46, 0.48) 100%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 88px; /* ドットと重ならないよう下を広めに */
  width: 100%;
}

.hero__body {
  max-width: 720px;
}

/* アクティブスライドのテキストを下からふわっと表示（フェードと同調） */
.hero-slide .hero__body > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-slide.is-active .hero__body > * {
  opacity: 1;
  transform: none;
}

.hero-slide.is-active .hero__body > *:nth-child(1) { transition-delay: 0.15s; }
.hero-slide.is-active .hero__body > *:nth-child(2) { transition-delay: 0.25s; }
.hero-slide.is-active .hero__body > *:nth-child(3) { transition-delay: 0.35s; }
.hero-slide.is-active .hero__body > *:nth-child(4) { transition-delay: 0.45s; }

/* ドットナビゲーション */
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.hero__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.hero__dot:hover {
  background: rgba(255, 255, 255, 0.45);
}

.hero__dot.is-active {
  background: var(--gold);
  border-color: var(--gold);
}

.hero__dot:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.hero__eyebrow {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 18px;
}

.hero__title {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.4;
  margin: 0 0 24px;
  /* 手動 br を優先しつつ、自然折り返し時も語の途中で割れにくくする */
  text-wrap: balance;
}

.hero__lead {
  color: rgba(255, 255, 255, 0.88);
  max-width: 620px;
  font-size: 1.05rem;
  margin: 0 0 36px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* =========================================================================
   INTRO
   ========================================================================= */
.intro {
  text-align: center;
  max-width: 860px;
}

.intro .section__lead {
  margin: 0 auto;
}

/* 3つ並びのポイントカード（全ページ共通。SINCE 2007 / NATIONWIDE 等）
   ── ただの薄ベージュの箱ではなく、上品な白カードに調整。PC3カラム・SP1カラム。 */
.intro__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 44px;
}

.intro__point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  flex: 1;
  padding: 30px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(3, 26, 46, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時は少しだけ浮く控えめなアニメーション */
.intro__point:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(3, 26, 46, 0.12);
}

.intro__point-label {
  color: var(--gold-dark);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* ラベル下に細いゴールドのアクセントライン（上品さを添える） */
.intro__point-label::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin: 9px auto 0;
  background: var(--gold);
  opacity: 0.75;
}

.intro__point-text {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.02rem;
}

/* =========================================================================
   SERVICE
   ========================================================================= */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* カード2枚構成：中央寄せで間延びを防ぐ */
.service-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 840px;
  margin: 0 auto;
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 28px;
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(3, 26, 46, 0.14);
}

.service-card .card__text {
  flex: 1;
}

/* =========================================================================
   COURSE（募集中コース）
   ── コース案内／募集中コース／関連コースは PC 2カラムで統一
   ========================================================================= */
.course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  /* 2カラム時にカードが広がりすぎないよう最大幅を設定し中央寄せ */
  max-width: 960px;
  margin-inline: auto;
}

.course-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(3, 26, 46, 0.14);
}

.course-card__media {
  /* phframe のゴールド装飾はカード内では非表示にして整然と見せる */
  padding: 0;
  border: none;
  aspect-ratio: 16 / 6.2;
  overflow: hidden;
}

.course-card__media::after {
  display: none;
}

.course-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-card__media .placeholder {
  height: 100%;
  aspect-ratio: auto;
}

.course-card__status {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  border-radius: 2px;
}

.course-card__status--open {
  background: var(--accent);
}

.course-card__status--preparing,
.course-card__status--always,
.course-card__status--active {
  background: var(--secondary);
}

.course-card__status--full {
  background: var(--gold-dark);
}

.course-card__status--closed,
.course-card__status--default {
  background: var(--muted);
}

.course-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.course-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.course-card__title {
  font-size: 1.06rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.course-card__title a {
  text-decoration: none;
}

.course-card .card__text {
  flex: 1;
  margin-bottom: 10px;
  font-size: 0.9rem;
  line-height: 1.62;
  /* 説明文が長くても一覧の高さを揃える（3行で省略） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card__meta {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}

.course-card__meta-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.course-card__meta dt {
  color: var(--primary);
  font-weight: 700;
}

.course-card__meta dd {
  min-width: 0;
  margin: 0;
  color: var(--sub);
}

.course-card__meta-row--start-date {
  color: var(--secondary);
}

.course-card__meta-row--start-date dt {
  color: var(--secondary);
  font-weight: 800;
}

.course-card__meta-row--start-date dd {
  color: var(--secondary);
  font-weight: 800;
}

.course-card__meta-row--deadline dt,
.course-card__meta-row--deadline dd {
  color: #B7362C;
  font-weight: 800;
}

.course-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}

.course-card__detail-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.2s ease;
}

.course-card__detail-link::after {
  content: none;
}

.course-card__detail-link:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.course-card__apply,
.course-card__guidance {
  width: 100%;
  justify-content: center;
  min-height: 42px;
  padding: 7px 16px;
  font-size: 0.9rem;
  text-align: center;
}

/* =========================================================================
   COURSE 研修別アクセントカラー
   ── course_category の slug をもとに `course-color--{key}` を付与（helpers.php）。
   　 各クラスが --course-accent / --course-accent-dark を定義し、
   　 申込ボタン・募集中ラベル・カード上端ラインに反映する。
   　 未該当の course は変数を持たないため、既定のオレンジ（--accent）のまま。
   ========================================================================= */
.course-color--action {
  --course-accent: #1f6fb2;       /* 行動援護：青系 */
  --course-accent-dark: #185a8f;
}

.course-color--accompanying {
  --course-accent: #7b3fb0;       /* 同行援護：紫系 */
  --course-accent-dark: #633191;
}

.course-color--equipment {
  --course-accent: #07883f;       /* 福祉用具：標準的な緑 */
  --course-accent-dark: #066a31;
}

.course-color--careworker {
  --course-accent: #c2185b;       /* 実務者研修：ピンク／赤紫系 */
  --course-accent-dark: #9e1149;
}

.course-color--suction {
  --course-accent: #a43a2f;       /* 喀痰吸引等研修・フォロー研修：深い赤茶系 */
  --course-accent-dark: #812b24;
}

.course-color--medicalcare {
  --course-accent: #e0701a;       /* 医療的ケア教員講習会：オレンジ系（既定より深め） */
  --course-accent-dark: #bd5c12;
}

.course-color--jobtraining {
  --course-accent: #124d73;       /* 職業訓練：濃紺／青系 */
  --course-accent-dark: #0a3553;
}

/* カード上端の研修カラーライン（該当 course のみ） */
.course-card[class*="course-color--"] {
  border-top: 3px solid var(--course-accent);
}

/* 募集中ラベルを研修カラーに（他ステータスは意味を持つ色を維持） */
[class*="course-color--"] .course-card__status--open {
  background: var(--course-accent);
}

/* 申込ボタンは研修ごとに色分けせず、共通の落ち着いた CTA 色（--accent）に統一する。
   研修別カラーはカード上端ライン・募集中ラベルなどの小さなアクセントに残す。 */

.notice--empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.section--news-soft .notice--empty {
  background: var(--white);
  border-color: rgba(10, 24, 48, 0.08);
  box-shadow: 0 8px 24px rgba(10, 24, 48, 0.03);
}

/* Course archive / taxonomy */
.course-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -12px auto 40px;
}

.course-filter__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 16px;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.course-filter__link:hover,
.course-filter__link.is-active {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}

.course-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.course-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 12px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border);
}

.course-pagination .page-numbers.current,
.course-pagination .page-numbers:hover {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}

/* Course detail */
.course-detail {
  /* FV の「募集内容を見る」アンカー着地時に固定ヘッダーへ潜らないよう余白を確保 */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.course-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.course-detail__main,
.course-detail__box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

.course-detail__main {
  padding: 36px 40px 44px;
}

.course-detail__head {
  margin-bottom: 28px;
}

.course-detail__status.course-card__status {
  position: static;
  display: inline-flex;
  margin-bottom: 16px;
}

.course-detail__title {
  margin-bottom: 0;
}

.course-detail__spec.spec-list {
  max-width: none;
  margin: 0 0 36px;
}

.course-feature-intro {
  margin: 0 0 28px;
  padding: 22px 24px;
  background: var(--primary-soft);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}

.course-feature-intro__title {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 1rem;
}

.course-feature-intro__text {
  color: var(--text);
  line-height: 1.9;
}

.course-feature-intro__text p {
  margin: 0;
}

.course-feature-intro__text p + p {
  margin-top: 0.8em;
}

.course-feature-intro__text ul,
.course-feature-intro__text ol {
  margin: 0.9em 0 0;
  padding-left: 1.4em;
}

.course-feature-intro__text ul {
  list-style: disc;
}

.course-feature-intro__text ol {
  list-style: decimal;
}

.course-feature-intro__text li + li {
  margin-top: 0.35em;
}

/* 整理図セクションの見出しは長文のため小見出しサイズへ調整（PC約22px / スマホ約18px） */
#trainingRelationTitle {
  font-size: clamp(1.15rem, 2.2vw, 1.375rem);
  line-height: 1.5;
}

.training-diagram {
  margin: 0;
}

.training-diagram__image {
  max-width: 920px;
  margin: 0 auto;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(10, 24, 48, 0.05);
}

.training-diagram__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.training-diagram__caption {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.8;
  text-align: center;
}

.kasan-reference__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.kasan-reference__card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(10, 24, 48, 0.05);
}

.kasan-reference__card .check-list {
  margin-top: 6px;
}

.kasan-note {
  max-width: 920px;
  margin: 28px auto 0;
  padding: 22px 24px;
  color: var(--sub);
  background: #FFFDF8;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}

.kasan-note p {
  color: var(--sub);
  font-size: 0.92rem;
  line-height: 1.9;
}

.kasan-note p + p {
  margin-top: 0.7em;
}

.kasan-simulator {
  max-width: 1040px;
  margin: 0 auto;
  padding: 30px;
  background: var(--white);
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 16px 42px rgba(10, 24, 48, 0.06);
}

.kasan-simulator__notice {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
  padding: 18px 20px;
  color: var(--sub);
  background: #FFFDF8;
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.8;
}

.kasan-simulator__controls {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 0.7fr 0.7fr;
  gap: 16px;
  align-items: end;
}

.kasan-simulator__field {
  display: grid;
  gap: 8px;
}

.kasan-simulator__field label {
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
}

.kasan-simulator__field select,
.kasan-simulator__field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--base);
  border: 1px solid rgba(10, 24, 48, 0.14);
  border-radius: var(--radius-sm);
  font: inherit;
}

.kasan-simulator__field select:focus,
.kasan-simulator__field input:focus {
  border-color: var(--sky);
  outline: 3px solid rgba(23, 167, 216, 0.18);
}

.kasan-simulator__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: 22px;
  margin-top: 24px;
}

.kasan-simulator__result,
.kasan-simulator__detail {
  padding: 24px;
  background: #F8FBFD;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius-sm);
}

.kasan-simulator__label {
  margin: 0 0 8px;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.kasan-simulator__title,
.kasan-simulator__detail-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.18rem;
  line-height: 1.5;
}

.kasan-simulator__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 0;
}

.kasan-simulator__summary div {
  padding: 16px;
  background: var(--white);
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius-sm);
}

.kasan-simulator__summary dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.kasan-simulator__summary dd {
  margin: 6px 0 0;
  color: var(--navy);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
}

.kasan-simulator__formula {
  margin: 14px 0 0;
  color: var(--sub);
  font-size: 0.9rem;
  line-height: 1.8;
}

.kasan-simulator__detail p {
  margin: 12px 0 0;
  color: var(--sub);
  font-size: 0.94rem;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .kasan-reference__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .kasan-simulator__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .kasan-reference__grid {
    grid-template-columns: 1fr;
  }

  .training-diagram__caption {
    text-align: left;
  }

  .kasan-reference__card,
  .kasan-note {
    padding: 22px 20px;
  }

  .kasan-simulator {
    padding: 22px 18px;
  }

  .kasan-simulator__controls,
  .kasan-simulator__summary {
    grid-template-columns: 1fr;
  }

  .kasan-simulator__result,
  .kasan-simulator__detail {
    padding: 20px;
  }
}

.course-flyers {
  margin: 34px 0 36px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.course-flyers--before-detail {
  margin-top: 0;
  margin-bottom: 36px;
  padding-top: 0;
  padding-bottom: 34px;
  border-top: 0;
  border-bottom: 1px solid var(--border);
}

.course-flyers__head {
  margin-bottom: 18px;
}

.course-flyers__title {
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.course-flyers__lead {
  margin: 0;
  color: var(--sub);
}

.course-flyers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.course-flyers__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 18px;
  color: var(--primary);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(3, 26, 46, 0.08);
}

.course-flyers__item:hover {
  transform: none;
  box-shadow: 0 14px 34px rgba(3, 26, 46, 0.08);
}

.course-flyers__trigger {
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
}

.course-flyers__trigger:focus-visible {
  outline: 3px solid rgba(201, 135, 42, 0.45);
  outline-offset: 4px;
}

.course-flyers__trigger:hover .course-flyers__image {
  filter: brightness(0.98);
}

.course-flyers__image {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: var(--cream);
  border-radius: var(--radius);
}

.course-flyers__caption {
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}

.flyer-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(3, 26, 46, 0.76);
}

.flyer-lightbox[hidden] {
  display: none;
}

body.is-flyer-lightbox-open {
  overflow: hidden;
}

.flyer-lightbox__dialog {
  position: relative;
  width: min(92vw, 960px);
  max-height: 92vh;
  padding: clamp(14px, 2vw, 22px);
  overflow: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.flyer-lightbox__close {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  color: var(--primary);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(3, 26, 46, 0.14);
}

.flyer-lightbox__image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 10px auto 0;
  object-fit: contain;
  background: var(--cream);
  border-radius: var(--radius);
}

.flyer-lightbox__caption {
  margin: 12px 0 0;
  color: var(--primary);
  font-weight: 700;
  text-align: center;
}

.application-flow {
  margin: 34px 0 0;
  padding: 26px 28px;
  background: var(--base);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}

.application-flow__title {
  margin: 0 0 14px;
  color: var(--primary);
  font-size: 1.3rem;
}

.application-flow p {
  color: var(--text);
  line-height: 1.9;
}

.application-flow p + p {
  margin-top: 0.9em;
}

.application-flow__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* 職業訓練courseの「訓練内容の問い合わせ」ボタンを1行に収める（application-flowは職業訓練course専用） */
.application-flow__actions .btn {
  white-space: nowrap;
  text-align: center;
}

.application-flow__guidance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 9px 18px;
  color: var(--primary);
  font-weight: 700;
  background: var(--white);
  border: 1px solid rgba(10, 24, 48, 0.1);
  border-radius: var(--radius);
}

.application-flow__note {
  margin-top: 18px;
}

.course-detail__content {
  color: var(--text);
}

.course-detail__content > * + * {
  margin-top: 1.2em;
}

.course-detail__content h2,
.course-detail__content h3 {
  margin-top: 1.8em;
}

.course-detail__content a {
  color: var(--secondary);
  font-weight: 700;
}

.course-detail__side {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 18px;
}

.course-detail__box {
  padding: 24px;
}

.course-detail__box-title {
  margin: 0 0 14px;
  color: var(--primary);
  font-weight: 700;
}

.course-detail__box-actions {
  display: grid;
  gap: 12px;
}

.course-detail__note {
  margin: 0;
  font-size: 0.9rem;
}

.course-detail__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.course-detail__terms a {
  display: inline-flex;
  padding: 4px 10px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--primary-soft);
}

/* =========================================================================
   NEWS（お知らせ）
   ========================================================================= */
.news-list {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.news-card {
  border-bottom: 1px solid var(--border);
}

.news-card__link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.news-card__link:hover {
  background: var(--white);
}

.news-card__date {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.news-card__category {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 3px 10px;
  text-align: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 2px;
}

.news-card__title {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
}

.news-card__link:hover .news-card__title {
  color: var(--gold-dark);
}

/* Standard post cards / archives */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

.post-grid--latest {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 169, 97, 0.42);
  box-shadow: 0 24px 58px rgba(3, 26, 46, 0.09);
}

.post-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--base);
}

.post-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card:hover .post-card__image {
  transform: scale(1.03);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 24px 28px;
}

.post-card__meta,
.post-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.post-card__category,
.post-detail__categories a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--primary-soft);
  border-radius: 2px;
}

.post-card__title {
  margin: 16px 0 10px;
  color: var(--primary);
  font-size: 1.15rem;
  line-height: 1.55;
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--gold-dark);
}

.post-card__excerpt {
  flex: 1;
  margin: 0 0 18px;
  color: var(--sub);
  font-size: 0.94rem;
  line-height: 1.9;
}

.post-card__link {
  margin-top: auto;
}

.post-detail__layout {
  max-width: 920px;
  margin: 0 auto;
}

.post-detail__main {
  padding: 36px 40px 44px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

.post-detail__head {
  margin-bottom: 24px;
}

.post-detail__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-detail__media {
  margin-bottom: 32px;
}

.post-detail__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 4px);
}

.post-detail__content {
  color: var(--text);
}

.post-detail__content > * + * {
  margin-top: 1.2em;
}

.post-detail__content h2,
.post-detail__content h3 {
  margin-top: 1.8em;
}

.post-detail__content a {
  color: var(--secondary);
  font-weight: 700;
}

.post-detail__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.post-detail__nav-item a {
  display: block;
  padding: 16px 18px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  background: var(--base);
  border: 1px solid var(--border);
}

.post-detail__nav-item a:hover {
  color: var(--gold-dark);
  border-color: rgba(201, 169, 97, 0.42);
}

.post-detail__nav-item--next {
  text-align: right;
}

.post-detail__back {
  margin-top: 28px;
  text-align: center;
}

.post-pagination {
  margin-top: 48px;
}

/* =========================================================================
   ACCESS（熊本研修センター）
   ========================================================================= */
.access {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.access__list {
  margin: 28px 0 0;
}

.access__row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.access__row dt {
  flex: 0 0 92px;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
}

.access__row dd {
  margin: 0;
  color: var(--sub);
  font-size: 0.95rem;
}

.access__row dd a {
  color: var(--secondary);
  font-weight: 700;
  text-decoration: none;
}

.access__actions {
  margin-top: 28px;
}

.access__map .placeholder {
  border: 1px solid var(--border);
}

.access__map iframe {
  display: block;
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

/* =========================================================================
   CTA BAND（design.md §11-6）
   ========================================================================= */
.cta-band {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 2px,
      transparent 2px,
      transparent 22px
    ),
    linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: var(--white);
  padding: 80px 0;
}

.cta-band__inner {
  text-align: center;
  max-width: 760px;
}

.cta-band__eyebrow {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 14px;
}

.cta-band__title {
  color: var(--white);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: 0 0 16px;
}

.cta-band__lead {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 32px;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.78);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
  padding-top: 72px;
  padding-bottom: 56px;
}

.site-footer__name {
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

.site-footer__desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.9;
  margin: 0 0 20px;
}

.site-footer__address {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-style: normal;
  line-height: 1.9;
}

.site-footer__address a {
  color: var(--gold);
  text-decoration: none;
}

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

.site-footer__heading {
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.site-footer__links li {
  margin-bottom: 10px;
}

.site-footer__links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__links a:hover {
  color: var(--gold);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bottom-inner {
  padding: 20px 24px;
}

.site-footer__copy {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  text-align: center;
  margin: 0;
}

/* =========================================================================
   下層ページ共通（研修一覧などの page テンプレート向け）
   ※ TOPの design system を再利用し、ここでは下層固有のクラスのみ追加
   ========================================================================= */

/* 下層ページ用 Hero（TOPのスライダーとは別。濃紺ベースで統一） */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 340px;
  color: var(--white);
  background-color: var(--primary-dark);   /* 画像未配置時のフォールバック */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(3, 26, 46, 0.86) 0%,
    rgba(6, 43, 73, 0.72) 60%,
    rgba(3, 26, 46, 0.55) 100%
  );
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 56px;
  padding-bottom: 56px;
  width: 100%;
}

.page-hero__eyebrow {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 14px;
}

.page-hero__title {
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 0 0 16px;
  text-wrap: balance;
}

.page-hero__lead {
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin: 0 0 28px;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* パンくず */
.breadcrumb {
  background: var(--base);
  border-bottom: 1px solid rgba(10, 24, 48, 0.08);
  padding: 14px 0;
}

.breadcrumb ol,
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}

.breadcrumb li {
  list-style: none;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: #31445a;
  line-height: 1.8;
  list-style: none;
}

.breadcrumb__item a {
  color: #17345c;
  text-decoration: none;
}

.breadcrumb__item a:hover {
  color: var(--gold-dark);
  text-decoration: underline;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin-right: 10px;
  color: var(--gold-dark);
}

.breadcrumb__item[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* 補助導線（カード外の関連リンク） */
.aux-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

.aux-links__label {
  color: var(--primary);
  font-weight: 700;
}

.aux-links__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-weight: 600;
  text-decoration: none;
}

.aux-links__link::before {
  content: "›";
  color: var(--gold-dark);
}

.aux-links__link:hover {
  color: var(--gold-dark);
  text-decoration: underline;
}

/* 受講形式・サポート（画像なしのテキストカード。service-card を踏襲したトーン）
   ── 特徴／学べる分野／受講スタイルなど feature 系は 3カラム維持 */
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px; /* 他グリッドと統一し、カード同士を少しゆとりある間隔に */
}

/* 関連コース／関連研修／関連ページ用：PC 2カラム（feature系とは分ける）
   .support-grid--2col を併記して使用する */
.support-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 960px;
  margin-inline: auto;
}

.support-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.support-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(3, 26, 46, 0.12);
}

.support-card__title {
  font-size: 1.15rem;
  margin: 6px 0 10px;
}

.support-card .card__text {
  margin: 0;
}

/* 求職者支援訓練Q&A：日程表付きコース予定 */
.course-schedule-list {
  display: grid;
  gap: 18px;
  max-width: 980px;
  margin-inline: auto;
}

.course-schedule-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 38px rgba(3, 26, 46, 0.06);
}

.course-schedule-card__title {
  margin: 6px 0 12px;
  color: var(--primary);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  line-height: 1.55;
}

.course-schedule-card__title a {
  color: inherit;
  text-decoration: none;
}

.course-schedule-card__title a:hover {
  color: var(--gold-dark);
  text-decoration: underline;
}

.course-schedule-card__meta {
  margin: 0;
  color: var(--text);
}

.course-schedule-card__meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
}

.course-schedule-card__meta dt {
  color: var(--primary);
  font-weight: 700;
}

.course-schedule-card__meta dd {
  margin: 0;
}

.course-schedule-card__actions {
  display: grid;
  gap: 10px;
  min-width: 188px;
}

.course-schedule-card__actions .btn {
  width: 100%;
  min-height: 48px;
  padding-inline: 18px;
  text-align: center;
}

@media (max-width: 720px) {
  .course-schedule-card {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .course-schedule-card__actions {
    min-width: 0;
  }
}

/* 求職者支援訓練：これまでの訓練実績 */
.training-results {
  display: grid;
  gap: 28px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

.training-results__group {
  display: grid;
  gap: 14px;
}

.training-results__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
}

.training-results__group-head h3 {
  color: var(--primary);
  font-size: 1rem;
  line-height: 1.5;
}

.training-results__group-head p {
  color: #b7362c;
  font-size: 0.86rem;
  font-weight: 700;
}

.training-results__table-wrap {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.training-results__table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.65;
}

.training-results__table th {
  padding: 11px 16px;
  color: var(--primary);
  font-weight: 800;
  text-align: center;
  background: #f7f5ef;
  border-bottom: 1px solid rgba(10, 24, 48, 0.08);
}

.training-results__table th:nth-child(2),
.training-results__table th:nth-child(4),
.training-results__table td:nth-child(2),
.training-results__table td:nth-child(4) {
  width: 92px;
}

.training-results__table td {
  padding: 11px 16px;
  color: var(--text);
  vertical-align: top;
  border-bottom: 1px solid rgba(10, 24, 48, 0.07);
}

.training-results__table tbody tr:nth-child(even) td {
  background: #fafafa;
}

.training-results__table tbody tr:last-child td {
  border-bottom: 0;
}

.training-results__num {
  color: var(--primary);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.training-results__note {
  padding-top: 2px;
  color: var(--sub);
  font-size: 0.86rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .training-results {
    gap: 22px;
    padding: 20px;
  }

  .training-results__table {
    min-width: 720px;
    font-size: 0.84rem;
  }

  .training-results__table th,
  .training-results__table td {
    padding: 10px 12px;
  }
}

/* 喀痰吸引等フォロー研修 */
.follow-empty,
.follow-panel,
.follow-fee-card,
.follow-curriculum-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(3, 26, 46, 0.06);
}

.follow-empty {
  max-width: 860px;
  margin-inline: auto;
  padding: 32px;
  text-align: center;
}

.follow-empty__title {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 1.15rem;
  font-weight: 800;
}

.follow-empty p:not(.follow-empty__title) {
  margin: 0 auto 22px;
  color: var(--sub);
  line-height: 1.9;
}

.follow-empty--compact {
  max-width: 760px;
}

.follow-panel {
  padding: 34px;
}

.follow-panel > p:first-child {
  margin-top: 0;
}

.follow-panel p {
  color: var(--sub);
  line-height: 1.95;
}

.note-box,
.follow-note {
  margin-top: 24px;
  padding: 16px 18px;
  color: var(--sub);
  line-height: 1.85;
  background: #fffdf8;
  border-left: 4px solid var(--gold-dark);
  border-radius: 6px;
}

.follow-fee-grid,
.follow-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 920px;
  margin-inline: auto;
}

.follow-fee-card,
.follow-curriculum-card {
  padding: 28px;
}

.follow-fee-card h3,
.follow-curriculum-card h3 {
  margin: 0 0 16px;
  color: var(--primary);
  font-size: 1.08rem;
}

.follow-fee-card__price {
  margin: 0;
  color: var(--primary);
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.25;
}

.follow-fee-card__price span {
  margin-left: 0.25em;
  font-size: 0.48em;
  font-weight: 700;
}

.follow-note {
  max-width: 920px;
  margin-inline: auto;
}

.follow-curriculum-card dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.follow-curriculum-card dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.follow-curriculum-card dl > div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.follow-curriculum-card dt,
.follow-curriculum-card dd {
  margin: 0;
  line-height: 1.7;
}

.follow-curriculum-card dt {
  color: var(--sub);
}

.follow-curriculum-card dd {
  color: var(--primary);
  font-weight: 800;
  white-space: nowrap;
}

.follow-application__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

/* FAQ（ネイティブ details/summary によるアコーディオン。JS不要） */
.container--narrow {
  max-width: 820px;
}

/* FAQ：横長の白い箱ではなく、背景になじむカードを縦に並べる
   （.faq / .faq__item / .faq__q / .faq__a を全ページ共通で使用） */
.faq {
  /* 大見出し（section__head）との距離を PC 約40px / SP 約28px に調整
     （section__head の下余白 48px・SP 36px と相殺） */
  margin-top: -8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq__item {
  /* 完全な白ではなく、背景になじむ淡い白（クリーム背景・白背景どちらにもなじむ） */
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(201, 169, 97, 0.18); /* ゴールド系の淡い枠 */
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(10, 24, 48, 0.04);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.faq__item[open] {
  border-color: rgba(201, 169, 97, 0.34);
  box-shadow: 0 10px 28px rgba(10, 24, 48, 0.06);
}

.faq__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 52px 20px 24px; /* 右側は矢印スペースを確保 */
  color: var(--primary);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6; /* 長い質問でも読みやすく・矢印と重ならない */
  list-style: none;
  cursor: pointer;
}

/* デフォルトの開閉マーカーを消す */
.faq__q::-webkit-details-marker {
  display: none;
}

/* 開閉矢印（ゴールドのシェブロン。線は少し細く・自然に回転） */
.faq__q::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--gold-dark);
  border-bottom: 1.5px solid var(--gold-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}

.faq__item[open] .faq__q::after {
  transform: translateY(-30%) rotate(225deg);
}

.faq__q:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: -2px;
}

.faq__a {
  /* 質問と同じカード内・同トーン（背景は付けない）。左右余白は質問とそろえる */
  padding: 0 24px 22px;
}

/* 回答の上に、かなり薄い区切り線 */
.faq__a::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 0 16px;
  background: rgba(201, 169, 97, 0.16);
}

.faq__a p {
  margin: 0;
  color: var(--sub);
  font-size: 0.95rem;
  line-height: 1.95; /* 読みやすい行間 */
}

/* =========================================================================
   下層ページ（研修詳細）向けコンポーネント
   ※ 既存の design system を再利用し、ここでは詳細ページ固有のクラスのみ追加
   ========================================================================= */

/* テキスト＋画像の2カラム（実務者研修とは 等） */
.media-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.media-row__body .section__title {
  text-align: left;
}

/* チェックリスト */
.check-list {
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--sub);
  font-size: 0.97rem;
  line-height: 1.8;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
}

.note-mark {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.8em;
}

/* 受講の流れ（ステップ） */
.flow {
  counter-reset: none;
  display: grid;
  gap: 0;
}

.flow__step {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 28px;
}

/* ステップ同士をつなぐ縦線 */
.flow__step::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: -4px;
  width: 2px;
  background: var(--border);
}

.flow__step:last-child {
  padding-bottom: 0;
}

.flow__step:last-child::before {
  display: none;
}

.flow__num {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.flow__body {
  padding-top: 4px;
}

.flow__title {
  color: var(--primary);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.flow__text {
  color: var(--sub);
  font-size: 0.95rem;
  margin: 0;
}

/* 注記・コールアウト（受講対象者／受講料の動的エリア など） */
.notice {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 28px 30px;
}

.notice--accent {
  border-left-color: var(--accent);
  background: var(--white);
}

.notice__title {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.notice__text {
  color: var(--sub);
  font-size: 0.95rem;
  margin: 0;
}

.notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

/* カード・チェックリスト・表・説明ブロックの直後に注意/補足ボックスが続く場合の余白
   （詰まりを防ぐ。セクション全体の余白は変えない）
   ── 該当の隣接箇所だけにピンポイントで効くよう隣接セレクタで指定。
   　 ブロックが各セクションの最後の要素になっているページには影響しない。
   ── clamp で PC 最大48px・SP 最小28px まで自動調整（個別の SP 指定は不要）。 */
.support-grid + .notice,
.service-grid + .notice,
.course-grid + .notice,
.voice-grid + .notice,
.media-row + .notice,
.check-list + .notice,
.flow + .notice,
.table-wrap + .notice,
.support-grid + .table-wrap,
.service-grid + .table-wrap {
  margin-top: clamp(28px, 4vw, 48px);
}

/* データ表（カリキュラム）。SPは横スクロール */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table th,
.data-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table thead th {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: none;
}

.data-table tbody th {
  color: var(--primary);
  font-weight: 700;
  background: var(--cream);
}

.data-table tbody td {
  color: var(--sub);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: none;
}

.table-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* 受講者の声 */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.voice-card {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 30px 26px;
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

.voice-card__quote {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.9;
}

.voice-card__meta {
  color: var(--gold-dark);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 関連リンク：上線なしで使う場合 */
.aux-links--plain {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  justify-content: center;
}

/* =========================================================================
   修了者作品集（ポートフォリオ）固有
   作品グリッドは .course-grid（2カラム）を再利用。ここでは固有要素のみ追加
   ========================================================================= */

/* カテゴリフィルター（見た目のみの仮UI。将来 WordPress 側で機能実装） */
.work-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 40px;
  max-width: 960px;
}

.work-filter__btn {
  padding: 8px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.work-filter__btn:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}

.work-filter__btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.work-filter__btn:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* 作品カードのメタ（表示名・修了年月など） */
.work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.portfolio-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 169, 97, 0.42);
  box-shadow: 0 24px 58px rgba(3, 26, 46, 0.09);
}

.portfolio-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
}

.portfolio-card__media::after {
  display: none;
}

.portfolio-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 24px 28px;
}

.portfolio-card__title a {
  text-decoration: none;
}

.portfolio-card .card__text {
  flex: 1;
}

.portfolio-card__tools {
  margin: 2px 0 18px;
  color: var(--sub);
  font-size: 0.9rem;
  line-height: 1.8;
}

.portfolio-card__tools span {
  display: block;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.portfolio-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: auto;
}

.portfolio-card__work-link {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  padding: 10px 18px;
  font-size: 0.92rem;
}

.portfolio-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.portfolio-detail__main {
  padding: 36px 40px 44px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

.portfolio-detail__media {
  margin-bottom: 28px;
}

.portfolio-detail__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 4px);
}

.portfolio-detail__content {
  color: var(--text);
}

.portfolio-detail__content > * + * {
  margin-top: 1.2em;
}

.portfolio-detail__content h2,
.portfolio-detail__content h3 {
  margin-top: 1.8em;
}

.portfolio-detail__content a {
  color: var(--secondary);
  font-weight: 700;
}

.portfolio-detail__side {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.portfolio-detail__meta {
  margin: 0 0 20px;
  border-top: 1px solid var(--border);
}

.portfolio-detail__meta div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.portfolio-detail__meta dt {
  color: var(--primary);
  font-weight: 700;
}

.portfolio-detail__meta dd {
  min-width: 0;
  margin: 0;
  color: var(--sub);
}

.portfolio-detail__terms {
  margin-bottom: 20px;
}

.portfolio-back {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.portfolio-empty {
  margin-bottom: 0;
}

/* =========================================================================
   レスポンシブ（design.md §14）
   ========================================================================= */

/* タブレット（〜1024px） */
@media (max-width: 1024px) {
  :root {
    --header-h: 122px;
  }

  .header-bar__cta {
    display: none; /* タブレット以下では CTA はメニュー側に集約 */
  }

  .service-grid,
  .course-grid,
  .support-grid,
  .post-grid--latest {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .course-detail__layout {
    grid-template-columns: 1fr;
  }

  .course-detail__side {
    position: static;
  }

  .portfolio-detail__layout {
    grid-template-columns: 1fr;
  }

  .portfolio-detail__side {
    position: static;
  }
}

/* タブレット縦・スマホ（〜1024px）：ナビをハンバーガーへ */
@media (max-width: 1024px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-menu {
    display: none;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu.is-open {
    display: block;
  }

  .mobile-menu__nav {
    max-height: inherit;
    overflow-y: auto;
    padding-bottom: 32px;
    -webkit-overflow-scrolling: touch;
  }
}

/* スマホ（〜768px） */
@media (max-width: 768px) {
  :root {
    --header-h: 108px;
  }

  .container {
    padding: 0 18px;
  }

  .section {
    padding: 64px 0;
  }

  .section__head {
    margin-bottom: 36px;
  }

  /* 上部バーは住所・営業時間を隠し、電話とSNS等を優先 */
  .utility-bar {
    display: block;
    font-size: 0.78rem;
  }

  .utility-bar__inner {
    min-height: 38px;
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 6px 10px;
  }

  .utility-bar__info,
  .utility-bar__links {
    gap: 6px 8px;
  }

  .utility-bar__item--address,
  .utility-bar__item--hours,
  .utility-bar__link-item--recruit,
  .utility-bar__link-item--news {
    display: none;
  }

  .utility-bar__link {
    padding: 4px 6px;
  }

  .utility-bar__icon,
  .utility-bar__icon svg {
    width: 15px;
    height: 15px;
  }

  .header-bar__inner {
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .site-header__logo {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0;
    border-right: 0;
  }

  .site-header__logo-img {
    width: 200px;
  }

  .nav-toggle {
    flex: 0 0 44px;
    margin-left: auto;
  }

  .hero-slide {
    min-height: 560px;
    /* スマホでは画像を右寄せにして、右側のメイン被写体が切れないようにする
       （--soft-filter スライドの ::before は background-position: inherit のため自動で追従） */
    background-position: right center;
  }

  .hero__lead {
    font-size: 1rem;
  }

  .service-grid,
  .course-grid,
  .support-grid,
  .follow-fee-grid,
  .follow-curriculum-grid,
  .post-grid,
  .post-grid--latest {
    grid-template-columns: 1fr;
  }

  /* SP：コース／関連コースのカード間 gap を控えめに */
  .course-grid,
  .support-grid--2col,
  .follow-fee-grid,
  .follow-curriculum-grid,
  .post-grid {
    gap: 20px;
  }

  .follow-empty,
  .follow-panel,
  .follow-fee-card,
  .follow-curriculum-card {
    padding: 24px 20px;
  }

  .follow-curriculum-card dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .follow-curriculum-card dd {
    white-space: normal;
  }

  .post-card__body,
  .post-detail__main {
    padding: 24px 20px;
  }

  .post-detail__nav {
    grid-template-columns: 1fr;
  }

  .post-detail__nav-item--next {
    text-align: left;
  }

  .course-filter {
    justify-content: flex-start;
    margin-bottom: 32px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .portfolio-card__body {
    padding: 22px 20px 24px;
  }

  .portfolio-detail__main {
    padding: 24px 20px;
  }

  .portfolio-detail__meta div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .course-detail__main,
  .course-detail__box {
    padding: 24px 20px;
  }

  .course-feature-intro {
    padding: 18px 18px;
  }

  .course-flyers {
    margin: 28px 0 32px;
    padding-top: 26px;
  }

  .course-flyers__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .course-flyers__image {
    height: auto;
  }

  .application-flow {
    padding: 22px 18px;
  }

  .application-flow__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .application-flow__guidance,
  .application-flow__actions .btn {
    width: 100%;
  }

  .course-pagination {
    margin-top: 36px;
  }

  .intro__points {
    flex-direction: column;
  }

  .access,
  .media-row,
  .voice-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* 「実務者研修とは」は画像→テキストの順で見せる */
  .media-row__figure {
    order: -1;
  }

  /* FAQカード：SPでは左右paddingを少し小さく（ただし狭すぎない） */
  .faq__q {
    padding: 16px 44px 16px 18px;
  }

  .faq__q::after {
    right: 16px;
  }

  .faq__a {
    padding: 0 18px 18px;
  }

  /* ボタンは横幅いっぱいに近づける */
  .hero__actions .btn,
  .page-hero__actions .btn,
  .cta-band__actions .btn,
  .section__foot .btn,
  .notice__actions .btn {
    width: 100%;
  }

  .hero__actions,
  .page-hero__actions,
  .cta-band__actions,
  .notice__actions {
    flex-direction: column;
  }

  .hero__actions,
  .hero-actions,
  .page-hero__actions,
  .cta-band__actions,
  .cta-actions,
  .button-group,
  .notice__actions,
  .section__foot {
    margin-bottom: 28px;
  }

  .breadcrumb {
    padding: 16px 0;
  }

  .breadcrumb__list {
    gap: 4px 8px;
  }

  .breadcrumb__item {
    font-size: 0.75rem;
    line-height: 1.9;
  }

  /* お知らせ：縦積み */
  .news-card__link {
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-start;
  }

  .news-card__title {
    flex: 1 1 100%;
  }
}

/* =========================================================================
   会社概要（information）固有
   ※ 既存の design system を再利用し、ここでは会社概要ページ固有のクラスのみ追加
   ========================================================================= */

/* --- 拠点カード（本社・熊本研修センター・北海道研修センター） --- */
.location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.location-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

/* 地図エリア（Googleマップ iframe またはプレースホルダー） */
.location-card__map {
  border-bottom: 1px solid var(--border);
}

.location-card__map .placeholder--map {
  aspect-ratio: 16 / 10;
}

.location-card__map iframe {
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
}

.location-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 26px;
}

.location-card__name {
  color: var(--primary);
  font-size: 1.18rem;
  font-weight: 700;
  margin: 4px 0 14px;
}

/* 拠点カード内の定義リストは .access__list / .access__row を流用し、ラベル幅のみ調整 */
.location-card .access__list {
  margin-top: 0;
}

.location-card .access__row {
  padding: 10px 0;
}

.location-card .access__row dt {
  flex: 0 0 68px;
}

.location-card__actions {
  margin-top: auto;
  padding-top: 18px;
}

/* --- 会社情報（レスポンシブ定義リスト。表ではなくSPでも崩れない作り） --- */
.spec-list {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.spec-list__row {
  display: flex;
  gap: 24px;
  padding: 18px 8px;
  border-bottom: 1px solid var(--border);
}

.spec-list__row dt {
  flex: 0 0 200px;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
}

.spec-list__row dd {
  margin: 0;
  color: var(--sub);
  font-size: 0.95rem;
}

.spec-list__row dd a {
  color: var(--secondary);
  font-weight: 700;
  text-decoration: none;
}

.spec-list__row dd a:hover {
  color: var(--gold-dark);
  text-decoration: underline;
}

/* --- 会社沿革（タイムライン） --- */
.history {
  max-width: 880px;
  margin: 0 auto;
  border-left: 2px solid var(--border);
}

.history__item {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding: 0 0 24px 30px;
}

.history__item:last-child {
  padding-bottom: 0;
}

/* タイムラインの結節点（ゴールドの小さなドット） */
.history__item::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 7px;
  width: 14px;
  height: 14px;
  background: var(--gold);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
}

.history__date {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.history__text {
  margin: 0;
  color: var(--sub);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* --- 会社概要 固有レスポンシブ --- */
@media (max-width: 1024px) {
  .location-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .location-grid {
    grid-template-columns: 1fr;
  }

  .spec-list__row {
    flex-direction: column;
    gap: 4px;
    padding: 16px 4px;
  }

  .spec-list__row dt {
    flex: none;
  }

  .history__item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-bottom: 22px;
  }
}

/* =========================================================================
   お問い合わせ（contact）固有
   ※ 既存の design system を再利用し、ここではフォーム固有のクラスのみ追加
   　 静的段階は「見た目と設計」のみ。送信処理は WordPress フォーム実装時に行う。
   ========================================================================= */

/* 白すぎないフォームカード（クリーム背景になじむ淡い白＋ゴールド系の枠） */
.form-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 44px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

.form-row {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
}

/* 必須／任意ラベル */
.form-label .req,
.form-label .opt {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 2px;
  vertical-align: 1px;
}

.form-label .req {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.form-label .opt {
  background: var(--primary-soft);
  color: var(--secondary);
}

/* 入力欄共通 */
.form-control {
  width: 100%;
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: var(--muted);
}

.form-control:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(18, 77, 115, 0.12);
}

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

/* セレクト（ゴールドのシェブロンを付与） */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B8860B' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

/* 個人情報の取り扱い同意 */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 28px;
  padding: 20px 22px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.form-consent__check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--primary);
}

.form-consent__label {
  color: var(--sub);
  font-size: 0.92rem;
  line-height: 1.8;
}

.form-consent__label a {
  color: var(--secondary);
  font-weight: 700;
  text-decoration: underline;
}

.form-consent__label a:hover {
  color: var(--gold-dark);
}

/* 送信ボタンと補足文 */
.form-submit {
  text-align: center;
}

.form-submit .btn {
  min-width: 280px;
}

.form-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

/* contact 固有レスポンシブ */
@media (max-width: 768px) {
  .form-card {
    padding: 28px 20px;
  }

  .form-submit .btn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================================
   TOPページ固有（レイアウト調整）
   ※ 下層ページに影響しないよう、TOP専用の修飾クラスのみ追加
   ========================================================================= */

/* セクションを少しコンパクトに（窮屈にならない範囲で上下余白を圧縮） */
.section--compact {
  padding: 76px 0;
}

/* 見出し下の余白を少し詰める */
.section__head--tight {
  margin-bottom: 34px;
}

/* 「主な学び」グリッド：カード内余白・画像プレースホルダーを少しコンパクトに */
.service-grid--compact .service-card {
  padding: 16px 16px 24px;
}

.service-grid--compact .service-card .placeholder {
  aspect-ratio: 16 / 10; /* 4/3 より縦が短く、間延びを防ぐ */
}

.service-grid--compact .service-card .card__label {
  margin-top: 16px;
}

/* TOP限定：募集中セクションは PC 3カラム（下層ページの course-grid 2カラムは維持） */
.course-grid--top3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: none;
}

.course-grid--top3 .course-card__media {
  aspect-ratio: 16 / 5;
}

.course-grid--top3 .course-card__body {
  padding: 14px 16px 16px;
}

.course-grid--top3 .course-card__tags {
  gap: 5px;
  margin-bottom: 7px;
}

.course-grid--top3 .course-card__title {
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: 6px;
}

.course-grid--top3 .course-card .card__text {
  margin-bottom: 8px;
  font-size: 0.86rem;
  line-height: 1.55;
  -webkit-line-clamp: 2;
}

.course-grid--top3 .course-card__meta {
  gap: 3px;
  margin-top: 8px;
  padding-top: 8px;
}

.course-grid--top3 .course-card__meta-row {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.38;
}

.course-grid--top3 .course-card__actions {
  gap: 8px;
  margin-top: 10px;
}

.course-grid--detail-only .course-card__detail-link {
  align-self: stretch;
  width: 100%;
  min-height: 38px;
  padding: 6px 14px;
  color: #ffffff;
  font-size: 0.86rem;
  background: var(--course-accent, var(--accent));
  border: 1px solid var(--course-accent, var(--accent));
  border-radius: 2px;
}

.course-grid--detail-only .course-card__detail-link:hover {
  color: #ffffff;
  background: var(--course-accent-dark, var(--accent-dark));
  border-color: var(--course-accent-dark, var(--accent-dark));
  text-decoration: none;
}

.course-grid--detail-only .course-card__apply,
.course-grid--detail-only .course-card__guidance {
  display: none;
  min-height: 38px;
  padding: 6px 14px;
  font-size: 0.86rem;
}

/* タブレットは2カラム（既存メディアクエリより後に定義して確実に上書き） */
@media (max-width: 1024px) {
  .course-grid--top3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホは1カラム */
@media (max-width: 768px) {
  .course-grid--top3 {
    grid-template-columns: 1fr;
  }

  /* コンパクトセクションのSP余白も少しだけ詰める（窮屈にしない） */
  .section--compact {
    padding: 52px 0;
  }

  .section__head--tight {
    margin-bottom: 26px;
  }
}

/* =========================================================================
   全体トーン調整（明るい白・薄グレー・淡いブルー寄り）
   ========================================================================= */
.phframe,
.intro__point,
.service-card,
.course-card,
.support-card,
.post-card,
.portfolio-card,
.voice-card,
.location-card,
.parking-card,
.form-card,
.course-detail__main,
.course-detail__box,
.notice,
.faq__item,
.table-wrap,
.form-consent,
.application-flow {
  background: var(--white);
  border-color: rgba(10, 24, 48, 0.08);
  box-shadow: 0 12px 32px rgba(10, 24, 48, 0.05);
}

.intro__point:hover,
.service-card:hover,
.course-card:hover,
.support-card:hover,
.post-card:hover,
.portfolio-card:hover,
.voice-card:hover,
.location-card:hover {
  box-shadow: 0 18px 42px rgba(10, 24, 48, 0.08);
}

.placeholder,
.course-flyers__image,
.post-card__media,
.application-flow,
.form-consent {
  background: var(--base);
}

.course-feature-intro {
  background: #F6FAFD;
  border-left-color: var(--gold);
}

.faq__item {
  border-color: rgba(10, 24, 48, 0.08);
}

.faq__item[open] {
  border-color: rgba(23, 167, 216, 0.22);
  box-shadow: 0 14px 34px rgba(10, 24, 48, 0.07);
}

.faq__a::before {
  background: rgba(10, 24, 48, 0.08);
}

.data-table tbody th {
  background: var(--base);
}

/* =========================================================================
   受講者用駐車場（parking）固有
   ※ 非公開の実用案内ページ。駐車場は1か所のみ（一覧UI・複数カードは持たない）
   ========================================================================= */
.parking-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 40px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(3, 26, 46, 0.06);
}

.parking-card__lead {
  margin: 0 0 20px;
  color: var(--sub);
  font-size: 0.97rem;
}

/* カード内の spec-list は幅いっぱい・上線なしで使う */
.parking-card .spec-list {
  max-width: none;
  border-top: none;
}

.parking-card .spec-list__row:first-child {
  padding-top: 0;
}

.parking-map {
  max-width: 760px;
  margin: 28px auto 0;
}

.parking-map .placeholder--map {
  border: 1px solid var(--border);
}

.parking-map__action {
  margin-top: 16px;
  text-align: center;
}

@media (max-width: 768px) {
  .parking-card {
    padding: 26px 20px;
  }
}

/* SP下層Hero: CTAボタン群の直下に余白を確保する */
@media (max-width: 767px) {
  .page-hero .page-hero__inner > .page-hero__actions,
  .page-hero .page-hero__actions,
  .page-hero__actions {
    margin-bottom: 36px !important;
    padding-bottom: 0;
  }
}

/* モーション低減設定の尊重 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  /* reveal は動かさず、最初から表示する */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Heroスライドのフェード・テキストの動きを無効化（瞬時切替） */
  .hero-slide {
    transition: none !important;
  }

  .hero-slide .hero__body > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* hover の浮き上がりも無効化 */
  .service-card:hover,
  .course-card:hover,
  .support-card:hover,
  .voice-card:hover,
  .intro__point:hover {
    transform: none;
  }
}

/* final breadcrumb fix */
.breadcrumb ol,
.breadcrumb ul,
.breadcrumb li,
.breadcrumb__list,
.breadcrumb__item {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  margin-left: 0;
  padding: 0;
  padding-left: 0;
}

.breadcrumb ol,
.breadcrumb ul,
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style-position: outside;
}

.breadcrumb li,
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.8;
}

.breadcrumb__item + .breadcrumb__item::before,
.breadcrumb li + li::before {
  content: "›";
  margin-right: 10px;
  color: #b08a2e;
}

.breadcrumb {
  background: #F8FBFD;
  border-bottom: 1px solid rgba(10, 24, 48, 0.06);
  padding: 14px 0;
}

@media (max-width: 767px) {
  .breadcrumb {
    padding: 16px 0;
  }

  .breadcrumb ol,
  .breadcrumb ul,
  .breadcrumb__list {
    gap: 4px 8px;
    list-style-type: none !important;
    list-style-position: outside;
    margin-left: 0;
    padding-left: 0;
  }

  .breadcrumb li,
  .breadcrumb__item {
    list-style-type: none !important;
    font-size: 12px;
    line-height: 1.9;
  }
}

/* mobile hero CTA spacing */
@media (max-width: 767px) {
  .page-hero .page-hero__actions {
    margin-bottom: 22px !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 420px) {
  .utility-bar__link-item--instagram {
    display: none;
  }
}

/* =========================================================================
   研修申込フォーム（/application/）
   Snow Monkey Forms の差し込み前提。送信処理はテーマ側に持たせない。
   ========================================================================= */
.application-page .section--base {
  background: #fffdf8;
}

.application-page .page-hero {
  min-height: 230px;
}

.application-page .page-hero__inner {
  min-height: 230px;
  padding-top: 36px;
  padding-bottom: 34px;
}

.application-page .page-hero__title {
  font-size: clamp(1.9rem, 3vw, 2.65rem);
}

.application-page .page-hero__lead {
  margin-top: 10px;
}

.application-page .page-hero__actions {
  margin-top: 18px;
}

.application-page .breadcrumb {
  padding-block: 10px;
}

.application-page > .section {
  padding-top: 56px;
  padding-bottom: 56px;
}

.application-page .section:first-of-type {
  padding-top: 48px;
  padding-bottom: 36px;
}

.application-page .section--base {
  padding-top: 46px;
}

.application-lead,
.application-target,
.application-form-area,
.application-course-list {
  background: #ffffff;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(10, 24, 48, 0.05);
}

.application-lead {
  max-width: 920px;
  margin-inline: auto;
  padding: 26px 32px;
}

.application-lead__list {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.application-lead__list li {
  position: relative;
  padding-left: 24px;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.75;
}

.application-lead__list li::before {
  content: "";
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gold);
}

.application-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}

.application-main {
  display: grid;
  gap: 20px;
}

.application-target,
.application-form-area,
.application-course-list {
  padding: 24px;
}

.application-target__card,
.application-target__empty,
.application-form-placeholder,
.application-hidden-values {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius-sm);
  background: #f8fbfd;
}

.application-target__label,
.application-hidden-values__title,
.application-form-placeholder__title {
  margin: 0 0 8px;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.application-hidden-values summary {
  cursor: pointer;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.application-hidden-values[open] summary {
  margin-bottom: 8px;
}

.application-target__title {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: clamp(1.08rem, 1.9vw, 1.34rem);
  line-height: 1.5;
}

.application-target__meta,
.application-hidden-values dl {
  display: grid;
  gap: 0;
  margin: 0 0 12px;
  border-top: 1px solid rgba(10, 24, 48, 0.08);
}

.application-target__meta div,
.application-hidden-values dl div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(10, 24, 48, 0.08);
}

.application-target__meta dt,
.application-hidden-values dt {
  color: var(--primary);
  font-weight: 800;
}

.application-target__meta dd,
.application-hidden-values dd {
  margin: 0;
  color: var(--sub);
  overflow-wrap: anywhere;
}

.application-target__empty p {
  margin: 0;
  color: var(--text);
  line-height: 1.9;
}

.application-target__empty p + p {
  margin-top: 0.8em;
}

.application-form-placeholder {
  background: #ffffff;
  border-style: dashed;
}

.application-form-embed {
  margin-top: 18px;
}

.application-course-selector__note,
.application-start-date-selector .application-course-selector__lead {
  display: none;
}

.application-form-embed form,
.application-form-embed .smf-form,
.application-form-embed .snow-monkey-form {
  display: grid;
  gap: 14px;
}

.application-form-embed .smf-item,
.application-form-embed .wp-block-snow-monkey-forms-item,
.application-form-embed form > p,
.application-form-embed form > div {
  margin: 0;
}

.application-form-embed .smf-item__label,
.application-form-embed label,
.application-form-embed legend {
  display: inline-block;
  margin: 0 0 6px;
  color: var(--primary);
  font-weight: 800;
  line-height: 1.45;
}

.application-form-embed input[type="text"],
.application-form-embed input[type="email"],
.application-form-embed input[type="tel"],
.application-form-embed input[type="url"],
.application-form-embed input[type="number"],
.application-form-embed input[type="date"],
.application-form-embed textarea,
.application-form-embed select {
  width: min(100%, 520px);
  min-height: 42px;
  padding: 8px 11px;
  color: var(--primary);
  font: inherit;
  line-height: 1.6;
  border: 1px solid rgba(10, 24, 48, 0.18);
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(10, 24, 48, 0.03);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.application-form-embed textarea {
  width: min(100%, 680px);
  min-height: 112px;
  resize: vertical;
}

.application-form-embed input[type="text"]:focus,
.application-form-embed input[type="email"]:focus,
.application-form-embed input[type="tel"]:focus,
.application-form-embed input[type="url"]:focus,
.application-form-embed input[type="number"]:focus,
.application-form-embed input[type="date"]:focus,
.application-form-embed textarea:focus,
.application-form-embed select:focus {
  outline: 3px solid rgba(23, 167, 216, 0.18);
  border-color: rgba(23, 167, 216, 0.68);
  box-shadow: 0 0 0 1px rgba(23, 167, 216, 0.08);
}

.application-form-embed input[readonly].is-application-synced {
  background: #f8fbfd;
  color: var(--primary);
  font-weight: 700;
}

.application-form-embed input[type="radio"],
.application-form-embed input[type="checkbox"] {
  width: 1.05em;
  height: 1.05em;
  margin: 0 8px 0 0;
  accent-color: var(--secondary);
}

.application-form-embed .smf-radio-button-control,
.application-form-embed .smf-checkbox-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px;
}

.application-form-embed .smf-radio-button-control__control,
.application-form-embed .smf-checkbox-control__control {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.application-form-embed .smf-radio-button-control label,
.application-form-embed .smf-checkbox-control label,
.application-form-embed .smf-radio-button-control__control label,
.application-form-embed .smf-checkbox-control__control label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.55;
}

.application-form-embed .smf-action,
.application-form-embed .smf-form--simple-table .smf-action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.application-form-embed button,
.application-form-embed input[type="submit"],
.application-form-embed input[type="button"],
.application-form-embed .smf-button-control__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(242, 140, 40, 0.18);
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.application-form-embed button:hover,
.application-form-embed input[type="submit"]:hover,
.application-form-embed input[type="button"]:hover,
.application-form-embed .smf-button-control__control:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(242, 140, 40, 0.24);
}

/* Contact form plugin area. Keep form sending/confirmation inside the plugin. */
.contact-form-embed {
  margin-top: 0;
}

.contact-form-embed form,
.contact-form-embed .smf-form,
.contact-form-embed .snow-monkey-form {
  display: grid;
  gap: 16px;
}

.contact-form-embed .smf-item,
.contact-form-embed .wp-block-snow-monkey-forms-item,
.contact-form-embed form > p,
.contact-form-embed form > div {
  margin: 0;
}

.contact-form-embed .smf-item__label,
.contact-form-embed label,
.contact-form-embed legend {
  display: inline-block;
  margin: 0 0 7px;
  color: var(--primary);
  font-weight: 800;
  line-height: 1.45;
}

.contact-form-embed input[type="text"],
.contact-form-embed input[type="email"],
.contact-form-embed input[type="tel"],
.contact-form-embed input[type="url"],
.contact-form-embed textarea,
.contact-form-embed select {
  width: min(100%, 620px);
  min-height: 46px;
  padding: 10px 12px;
  color: var(--primary);
  font: inherit;
  line-height: 1.6;
  border: 1px solid rgba(10, 24, 48, 0.18);
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(10, 24, 48, 0.03);
}

.contact-form-embed textarea {
  min-height: 138px;
  resize: vertical;
}

.contact-form-embed input[type="text"]:focus,
.contact-form-embed input[type="email"]:focus,
.contact-form-embed input[type="tel"]:focus,
.contact-form-embed input[type="url"]:focus,
.contact-form-embed textarea:focus,
.contact-form-embed select:focus {
  outline: 3px solid rgba(23, 167, 216, 0.18);
  border-color: rgba(23, 167, 216, 0.68);
}

.contact-form-embed input[type="radio"],
.contact-form-embed input[type="checkbox"] {
  width: 1.05em;
  height: 1.05em;
  margin: 0 8px 0 0;
  accent-color: var(--secondary);
}

.contact-form-embed .smf-radio-button-control,
.contact-form-embed .smf-checkbox-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px;
}

.contact-form-embed .smf-radio-button-control__control,
.contact-form-embed .smf-checkbox-control__control {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.contact-form-embed .smf-radio-button-control label,
.contact-form-embed .smf-checkbox-control label,
.contact-form-embed .smf-radio-button-control__control label,
.contact-form-embed .smf-checkbox-control__control label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.55;
}

.contact-form-embed .smf-action,
.contact-form-embed .smf-form--simple-table .smf-action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.contact-form-embed button,
.contact-form-embed input[type="submit"],
.contact-form-embed input[type="button"],
.contact-form-embed .smf-button-control__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(242, 140, 40, 0.18);
}

.contact-form-embed button:hover,
.contact-form-embed input[type="submit"]:hover,
.contact-form-embed input[type="button"]:hover,
.contact-form-embed .smf-button-control__control:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.contact-form-placeholder__title {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 1.12rem;
  font-weight: 800;
}

.contact-form-placeholder__list {
  display: grid;
  gap: 6px;
  margin: 16px 0;
  padding-left: 1.2em;
}

.application-course-selector {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.application-start-date-selector {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(23, 167, 216, 0.18);
  border-radius: var(--radius-sm);
  background: #f8fbfd;
}

.application-course-selector__title {
  margin: 0;
  color: var(--primary);
  font-size: 1.02rem;
  line-height: 1.5;
}

.application-course-selector__lead,
.application-course-selector__note {
  margin: 6px 0 0;
  color: var(--sub);
  font-size: 0.88rem;
  line-height: 1.65;
}

.application-course-selector__options {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.application-start-date-selector__options {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.application-course-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(10, 24, 48, 0.1);
  border-radius: var(--radius-sm);
  background: #f8fbfd;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.application-start-date-option {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  color: var(--primary);
  font-weight: 800;
  border: 1px solid rgba(10, 24, 48, 0.1);
  border-radius: var(--radius-sm);
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.application-course-option:hover,
.application-course-option.is-selected {
  border-color: rgba(23, 167, 216, 0.42);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(10, 24, 48, 0.06);
}

.application-start-date-option:hover,
.application-start-date-option.is-selected {
  border-color: rgba(23, 167, 216, 0.5);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(10, 24, 48, 0.05);
}

.application-course-option__input {
  margin-top: 0.28em;
  accent-color: var(--secondary);
}

.application-start-date-option__input {
  accent-color: var(--secondary);
}

.application-start-date-static {
  margin: 0;
  padding: 9px 12px;
  width: fit-content;
  max-width: 100%;
  color: var(--primary);
  font-weight: 800;
  line-height: 1.7;
  background: #ffffff;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius-sm);
}

.application-course-option__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.application-course-option__title {
  color: var(--primary);
  font-weight: 800;
  line-height: 1.55;
}

.application-course-option__meta {
  color: var(--sub);
  font-size: 0.84rem;
  line-height: 1.55;
}

.application-form-embed > *:first-child {
  margin-top: 0;
}

.application-form-embed > *:last-child {
  margin-bottom: 0;
}

.application-form-placeholder p,
.application-form-placeholder li {
  color: var(--text);
  line-height: 1.85;
}

.application-form-placeholder ul {
  margin: 14px 0 0;
  padding-left: 1.2em;
}

.application-form-placeholder .btn {
  margin-top: 16px;
}

.application-form-placeholder__note {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 4px solid var(--gold);
  background: #fffdf8;
  font-weight: 700;
}

.application-course-list {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.application-course-list__title {
  margin: 0;
  color: var(--primary);
  font-size: 1.15rem;
}

.application-course-list__lead {
  margin: 10px 0 18px;
  color: var(--sub);
  font-size: 0.92rem;
  line-height: 1.75;
}

.application-course-list__items {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.application-course-list__items a {
  display: block;
  padding: 12px 14px;
  color: var(--primary);
  font-size: 0.93rem;
  font-weight: 800;
  line-height: 1.6;
  text-decoration: none;
  border: 1px solid rgba(10, 24, 48, 0.08);
  border-radius: var(--radius-sm);
  background: #f8fbfd;
}

.application-course-list__items a:hover {
  color: var(--secondary);
  border-color: rgba(23, 167, 216, 0.28);
  background: #ffffff;
}

.application-course-list__empty {
  color: var(--sub);
  font-size: 0.92rem;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .application-layout {
    grid-template-columns: 1fr;
  }

  .application-course-list {
    position: static;
  }
}

@media (max-width: 768px) {
  .application-page .page-hero,
  .application-page .page-hero__inner {
    min-height: 250px;
  }

  .application-page .page-hero__inner {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .application-page > .section {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .application-lead,
  .application-target,
  .application-form-area,
  .application-course-list {
    padding: 22px 18px;
  }

  .application-target__card,
  .application-target__empty,
  .application-form-placeholder,
  .application-hidden-values,
  .application-course-selector,
  .application-start-date-selector {
    padding: 16px 14px;
  }

  .application-target__meta div,
  .application-hidden-values dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .application-course-option,
  .application-start-date-option {
    padding: 12px;
  }

  .application-form-embed form,
  .application-form-embed .smf-form,
  .application-form-embed .snow-monkey-form {
    gap: 16px;
  }
}

/* Header logo display tuning */
.site-header__logo .custom-logo {
  width: 260px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .site-header__logo .custom-logo {
    width: 200px;
  }
}

/* =========================================================================
   デザインリニューアルレイヤー v2.0「Quiet Luxury Navy」
   ─────────────────────────────────────────────────────────────────────────
   旧・洗練レイヤー v1.1〜v1.3 を統合して置き換えた、最終上書きレイヤー。
   HTML構造・PHPロジック・JS・フォーム処理は一切変更せず、CSSのみで
   タイポグラフィ／余白／質感／ホバー演出を刷新する。
   方向性：濃紺×ゴールドの信頼感はそのままに、
   ・見出しは明朝体（Shippori Mincho B1）で品格を出す
   ・英字アイブロウは幾何学サンセリフ（Jost）＋広い字間で現代的に
   ・ヘアライン、余白、控えめな光で「静かな高級感」に寄せる
   不要になった場合はこのブロックを丸ごと削除すれば従来の見た目に戻る。
   ========================================================================= */

/* ---------- 0. トークン ---------- */
:root {
  /* 既存CSSが参照する未定義エイリアスの解決（旧v1.1から継承） */
  --navy: var(--primary);
  --sky: #17A7D8;

  /* 書体 */
  --font-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-en: "Jost", "Avenir Next", "Helvetica Neue", "Noto Sans JP", sans-serif;

  /* 質感（影・線・イージング） */
  --ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ds-shadow-card: 0 1px 2px rgba(4, 18, 34, 0.05), 0 14px 34px rgba(4, 18, 34, 0.06);
  --ds-shadow-card-hover: 0 6px 14px rgba(4, 18, 34, 0.07), 0 26px 56px rgba(4, 18, 34, 0.12);
  --ds-shadow-soft: 0 1px 2px rgba(4, 18, 34, 0.04), 0 10px 26px rgba(4, 18, 34, 0.05);
  --ds-border: rgba(6, 32, 51, 0.10);
  --ds-border-strong: rgba(6, 32, 51, 0.16);
  --ds-gold-line: rgba(201, 169, 97, 0.45);
  --ds-gold-line-soft: rgba(201, 169, 97, 0.22);
  --ds-ink: #04121F;
  --ds-ink-2: #062033;
}

/* ---------- 1. ベースタイポグラフィ ---------- */
body {
  background: #ffffff;
  font-feature-settings: "palt" 1;
}

::selection {
  background: rgba(6, 43, 73, 0.9);
  color: #ffffff;
}

/* 大見出しは明朝体で品格を（カード見出し等の小さな見出しはゴシックのまま） */
.section__title,
.hero__title,
.page-hero__title,
.cta-band__title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  /* 日本語見出しを文節単位で折り返す（未対応ブラウザでは無視される） */
  word-break: auto-phrase;
}

/* 英字アイブロウ・ラベルは Jost ＋ 広い字間 */
.section__eyebrow,
.hero__eyebrow,
.page-hero__eyebrow,
.cta-band__eyebrow {
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.card__label {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- 2. セクションの余白と背景 ---------- */
.section {
  position: relative;
  padding: 104px 0;
}

.section--compact {
  padding: 84px 0;
}

.section--white {
  background: #ffffff;
}

.section--top-soft,
.section--base {
  background: linear-gradient(180deg, #F5F8FA 0%, #FCFDFE 100%);
}

.section--cream,
.section--news-soft {
  background: linear-gradient(180deg, #FAF7F1 0%, #FEFDFB 100%);
  border-top: 0;
  border-bottom: 0;
}

.section--hairline-top {
  border-top-color: rgba(6, 32, 51, 0.07);
}

.section--hairline-top::before {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
}

.section__head {
  margin-bottom: 56px;
}

.section__head--tight {
  margin-bottom: 40px;
}

.section__eyebrow {
  margin-bottom: 16px;
}

.section__title {
  font-size: clamp(1.75rem, 3.6vw, 2.55rem);
  line-height: 1.5;
}

/* タイトル下のアクセントライン：細く長く、両端をフェード */
.section__head .section__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 18%, var(--gold) 82%, transparent 100%);
}

.media-row__body .section__title::after {
  margin-left: 0;
  margin-right: auto;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 70%, transparent 100%);
}

.section__lead {
  color: var(--sub);
  line-height: 2.1;
}

/* ---------- 3. ボタン ---------- */
.btn {
  min-height: 54px;
  padding: 0 32px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  transition: background-color 0.3s var(--ds-ease), border-color 0.3s var(--ds-ease),
    color 0.3s var(--ds-ease), transform 0.3s var(--ds-ease), box-shadow 0.3s var(--ds-ease);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(201, 135, 42, 0.18), 0 14px 30px rgba(201, 135, 42, 0.18);
}

.btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(172, 112, 29, 0.22), 0 18px 36px rgba(172, 112, 29, 0.22);
}

.btn--secondary {
  border-width: 1px;
}

.btn--secondary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(4, 18, 34, 0.18);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--primary);
  transform: translateY(-2px);
}

/* ---------- 4. ヘッダー ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 0 rgba(6, 32, 51, 0.06), 0 12px 32px rgba(3, 26, 46, 0.06);
}

/* 上部ユーティリティバー：最暗紺のフラットな帯に整理 */
.utility-bar {
  background: var(--ds-ink);
  border-bottom: 0;
  font-size: 0.78rem;
}

.utility-bar__inner {
  min-height: 40px;
}

.utility-bar__text,
.utility-bar__link {
  color: rgba(255, 255, 255, 0.72);
}

.utility-bar__icon {
  color: var(--gold);
}

.utility-bar__icon svg,
.utility-bar__icon svg path,
.utility-bar__icon svg circle,
.utility-bar__icon svg rect,
.utility-bar__icon svg line,
.utility-bar__icon svg polyline {
  color: var(--gold);
}

.utility-bar__link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transform: none;
}

.utility-bar__link:hover .utility-bar__icon,
.utility-bar__link:hover .utility-bar__icon svg,
.utility-bar__link:hover .utility-bar__icon svg path,
.utility-bar__link:hover .utility-bar__icon svg circle,
.utility-bar__link:hover .utility-bar__icon svg rect,
.utility-bar__link:hover .utility-bar__icon svg line,
.utility-bar__link:hover .utility-bar__icon svg polyline {
  color: var(--gold);
}

/* ヘッダー本体：太い紺帯や仕切り線を捨て、白いミニマルな帯に */
.header-bar {
  background: #ffffff;
  border-top: 0;
  border-bottom: 1px solid rgba(6, 32, 51, 0.08);
  box-shadow: none;
}

.header-bar__inner {
  min-height: 80px;
}

/* ナビ：タイル型の枠線を全廃し、ゴールドの下線アニメーションだけで魅せる */
.site-nav__item > a,
.site-nav__list > li > a {
  min-height: 80px;
  padding: 12px 10px;
  color: var(--ds-ink-2);
  background: transparent;
  border-left: 0;
}

.site-nav__list > li:last-child > a,
.site-nav__list > li:has(+ .site-nav__item--contact) > a {
  border-right: 0;
}

.site-nav__en {
  color: var(--gold-dark);
  font-family: var(--font-en);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.site-nav__jp {
  font-size: 0.86rem;
  font-weight: 700;
}

.site-nav__item > a::before,
.site-nav__list > li > a::before {
  left: 18px;
  right: 18px;
  height: 2px;
  background: var(--gold);
}

.site-nav__item > a:hover,
.site-nav__list > li > a:hover,
.site-nav__list > .current-menu-item > a,
.site-nav__list > .current_page_item > a,
.site-nav__list > .current-menu-ancestor > a,
.site-nav__list > .current_page_ancestor > a {
  color: var(--primary);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.site-nav__item > a:focus-visible,
.site-nav__list > li > a:focus-visible {
  background: transparent;
  outline: 2px solid rgba(201, 169, 97, 0.6);
  outline-offset: -2px;
}

/* ドロップダウン：ガラス質の白＋ゴールドの上端ライン */
.site-nav__dropdown,
.site-nav__list .sub-menu,
.site-nav__list .children {
  min-width: 264px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(6, 32, 51, 0.08);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 24px 56px rgba(3, 26, 46, 0.16);
}

.site-nav__dropdown li + li,
.site-nav__list .sub-menu li + li,
.site-nav__list .children li + li {
  border-top: 1px solid rgba(6, 32, 51, 0.06);
}

.site-nav__dropdown a,
.site-nav__list .sub-menu a,
.site-nav__list .children a {
  padding: 14px 18px;
  font-weight: 600;
}

.site-nav__dropdown a:hover,
.site-nav__list .sub-menu a:hover,
.site-nav__list .children a:hover {
  background: #FAF7F0;
  box-shadow: inset 2px 0 0 var(--gold);
}

/* ヘッダーCTA：トークンのアクセント色に統一し、シャープに */
.header-bar__cta {
  min-height: 48px;
  padding: 8px 18px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(201, 135, 42, 0.24);
}

.header-bar__cta:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 12px 26px rgba(172, 112, 29, 0.3);
  transform: translateY(-1px);
}

.header-bar__cta .site-nav__en {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- 5. ヒーロー（TOP） ---------- */
.hero {
  isolation: isolate;
  background: linear-gradient(120deg, var(--ds-ink) 0%, #052640 58%, #071525 100%);
  border-bottom: 1px solid var(--ds-gold-line-soft);
}

/* キャッチコピー2行＋余白圧縮を前提に、コンパクトな高さに抑える */
.hero-slide {
  min-height: 530px;
}

/* シネマティックな二重オーバーレイ（左を深く、下端を締める） */
.hero__overlay {
  background:
    linear-gradient(90deg, rgba(3, 20, 36, 0.9) 0%, rgba(5, 38, 64, 0.68) 52%, rgba(3, 20, 36, 0.3) 100%),
    linear-gradient(180deg, rgba(3, 20, 36, 0.2) 0%, rgba(3, 20, 36, 0.05) 45%, rgba(3, 20, 36, 0.62) 100%);
}

.hero__inner {
  padding-top: 48px;
  padding-bottom: 84px;
}

/* 大きな英字ウォーターマーク（右上・ごく薄く。下部のドットと重ねない） */
.hero::after {
  content: "CAREER EDUCATION PLAZA";
  position: absolute;
  right: clamp(16px, 4vw, 64px);
  top: 26px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.06);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.8vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.22em;
  white-space: nowrap;
  pointer-events: none;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--gold);
  font-size: 0.78rem;
  margin-bottom: 14px;
}

.hero__eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--gold);
}

.hero__body {
  max-width: 780px;
}

/* 手動<br>の2行構成が折り返しで3行以上にならないサイズに抑える */
.hero__title {
  font-size: clamp(1.5rem, 3.6vw, 2.7rem);
  line-height: 1.5;
  margin-bottom: 16px;
  text-shadow: 0 4px 28px rgba(3, 20, 36, 0.45);
}

.hero__lead {
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
  font-size: 0.98rem;
  line-height: 1.9;
  margin-bottom: 26px;
  text-shadow: 0 2px 16px rgba(3, 20, 36, 0.4);
}

/* ドット → 細いバーに */
.hero__dots {
  bottom: 20px;
  gap: 10px;
}

.hero__dot {
  width: 36px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.hero__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.hero__dot.is-active {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14);
}

/* ---------- 6. 下層ページヒーロー ---------- */
.page-hero {
  min-height: 380px;
  background-color: var(--ds-ink);
}

.page-hero__overlay {
  background:
    linear-gradient(90deg, rgba(3, 20, 36, 0.9) 0%, rgba(5, 38, 64, 0.72) 58%, rgba(3, 20, 36, 0.45) 100%),
    linear-gradient(180deg, rgba(3, 20, 36, 0.12) 0%, rgba(3, 20, 36, 0.5) 100%);
}

/* 内側に細いゴールドフレーム（品格の演出） */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 1;
  border: 1px solid rgba(201, 169, 97, 0.2);
  pointer-events: none;
}

.page-hero__inner {
  padding-top: 72px;
  padding-bottom: 72px;
}

.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
}

.page-hero__eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
}

.page-hero__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.45;
  text-shadow: 0 4px 24px rgba(3, 20, 36, 0.4);
}

.page-hero__lead {
  color: rgba(255, 255, 255, 0.84);
  line-height: 2.05;
  text-shadow: 0 2px 14px rgba(3, 20, 36, 0.35);
}

/* ---------- 7. カード共通の質感 ---------- */
.intro__point,
.service-card,
.course-card,
.support-card,
.post-card,
.portfolio-card,
.voice-card,
.location-card,
.parking-card,
.form-card,
.course-detail__main,
.course-detail__box,
.training-results,
.kasan-reference__card,
.kasan-simulator,
.application-lead,
.application-target,
.application-form-area,
.application-course-list {
  background: #ffffff;
  border-color: var(--ds-border);
  box-shadow: var(--ds-shadow-card);
  transition: transform 0.4s var(--ds-ease), box-shadow 0.4s var(--ds-ease), border-color 0.4s var(--ds-ease);
}

.intro__point:hover,
.service-card:hover,
.support-card:hover,
.post-card:hover,
.portfolio-card:hover,
.voice-card:hover,
.location-card:hover {
  transform: translateY(-5px);
  border-color: var(--ds-gold-line);
  box-shadow: var(--ds-shadow-card-hover);
}

.course-card {
  transition: transform 0.4s var(--ds-ease), box-shadow 0.4s var(--ds-ease);
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ds-shadow-card-hover);
}

/* 画像はカードホバーでゆっくりズーム（overflow はカード側で管理済み） */
.course-card__media {
  border-bottom: 1px solid rgba(6, 32, 51, 0.06);
}

.course-card__image,
.post-card__image {
  transition: transform 0.9s var(--ds-ease);
}

.course-card:hover .course-card__image,
.post-card:hover .post-card__image {
  transform: scale(1.06);
}

/* ---------- 8. SERVICEカード（TOP）：写真を全幅で見せるエディトリアル型 ---------- */
#service .service-grid {
  align-items: stretch;
}

#service .service-card {
  padding: 0;
  overflow: hidden;
}

#service .service-card .phframe {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ds-ink-2);
  overflow: hidden;
}

#service .service-card .phframe::after {
  display: none;
}

#service .service-card__image {
  width: 100%;
  aspect-ratio: 800 / 520;
  display: block;
  object-fit: cover;
  transition: transform 0.9s var(--ds-ease);
}

#service .service-card:hover .service-card__image {
  transform: scale(1.05);
}

#service .service-card .placeholder {
  aspect-ratio: 800 / 520;
  color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(120deg, #052640 0%, #0A3A5C 100%);
}

#service .service-card .card__label,
#service .service-card .card__title,
#service .service-card .card__text,
#service .service-card .card__link {
  margin-left: 28px;
  margin-right: 28px;
}

#service .service-card .card__label {
  margin-top: 26px;
}

#service .service-card .card__link {
  margin-bottom: 28px;
}

/* ---------- 9. コースカードの精緻化 ---------- */
.course-card[class*="course-color--"] {
  border-top-width: 3px;
}

.course-card__status {
  padding: 4px 12px;
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.12em;
  border-radius: 2px;
  box-shadow: 0 8px 18px rgba(3, 26, 46, 0.18);
}

.course-card__meta {
  border-top-color: var(--ds-gold-line-soft);
}

.tag {
  padding: 3px 11px;
  background: rgba(201, 169, 97, 0.1);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 2px;
}

.course-grid--detail-only .course-card__detail-link {
  min-height: 42px;
  letter-spacing: 0.08em;
  border-radius: 2px;
  box-shadow: 0 8px 18px rgba(6, 32, 51, 0.14);
}

/* ---------- 10. NEWS ---------- */
.news-list {
  border-top-color: rgba(6, 32, 51, 0.12);
}

.news-card {
  border-bottom-color: rgba(6, 32, 51, 0.08);
}

.news-card__link {
  position: relative;
  padding: 24px 12px;
  transition: background 0.3s var(--ds-ease), padding 0.3s var(--ds-ease);
}

.news-card__link:hover {
  background: rgba(255, 255, 255, 0.85);
  padding-left: 22px;
}

.news-card__date {
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
}

.news-card__category {
  background: transparent;
  border: 1px solid rgba(6, 43, 73, 0.28);
  border-radius: 2px;
  padding: 2px 10px;
}

.news-card__link:hover .news-card__title {
  color: var(--primary);
}

/* ---------- 11. ACCESS ---------- */
.access__body {
  position: relative;
  padding: 40px 40px 44px;
  background: #ffffff;
  border: 1px solid var(--ds-border);
  border-top: 2px solid var(--gold);
  box-shadow: var(--ds-shadow-card);
}

.access__row {
  border-bottom-color: rgba(6, 32, 51, 0.07);
}

.access__map iframe {
  border-radius: 4px;
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-card);
}

/* ---------- 12. CTAバンド ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 108px 0;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.08) 0%, transparent 42%),
    linear-gradient(120deg, var(--ds-ink) 0%, #052640 58%, #071525 100%);
  border-top: 1px solid var(--ds-gold-line-soft);
  border-bottom: 1px solid var(--ds-gold-line-soft);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(201, 169, 97, 0.16);
  pointer-events: none;
}

.cta-band::after {
  content: "CONTACT";
  position: absolute;
  right: -1vw;
  bottom: 6px;
  color: rgba(255, 255, 255, 0.045);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(4rem, 11vw, 9rem);
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  z-index: 1;
}

.cta-band__eyebrow {
  font-size: 0.8rem;
  margin-bottom: 18px;
}

.cta-band__title {
  font-size: clamp(1.55rem, 3.4vw, 2.3rem);
  line-height: 1.6;
  margin-bottom: 20px;
}

.cta-band__lead {
  color: rgba(255, 255, 255, 0.8);
  line-height: 2.1;
  margin-bottom: 40px;
}

/* ---------- 13. フッター ---------- */
.site-footer {
  background: linear-gradient(170deg, #04121F 0%, #031A2E 100%);
  border-top: 1px solid var(--ds-gold-line);
}

.site-footer__inner {
  padding-top: 84px;
  padding-bottom: 64px;
}

.site-footer__name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.site-footer__desc,
.site-footer__address {
  color: rgba(255, 255, 255, 0.62);
}

.site-footer__heading {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.66);
  transition: color 0.25s var(--ds-ease);
}

.site-footer__links a::before {
  content: "";
  width: 6px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ds-ease);
}

.site-footer__links a:hover {
  color: #ffffff;
}

.site-footer__links a:hover::before {
  transform: scaleX(1);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__copy {
  font-family: var(--font-en);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
}

/* ---------- 14. 画像フレーム・リンク・細部 ---------- */
.phframe {
  background: #FAF7F1;
  border-color: rgba(6, 32, 51, 0.08);
}

.phframe::after {
  right: -12px;
  bottom: -12px;
  width: 46%;
  height: 46%;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  opacity: 0.85;
}

.text-link,
.card__link {
  transition: color 0.25s var(--ds-ease);
  text-underline-offset: 5px;
}

.breadcrumb {
  background: #FBFBF9;
}

/* FAQ・表・詳細ボックス（下層ページ） */
.course-detail__main,
.course-detail__box,
.application-lead,
.application-target,
.application-form-area,
.application-course-list {
  background: linear-gradient(180deg, #FCFDFE 0%, #ffffff 96px);
}

.faq__item[open] {
  border-color: var(--ds-gold-line);
  box-shadow: var(--ds-shadow-soft);
}

.data-table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) th {
  background: #FAFBFD;
}

.data-table tbody tr:hover td,
.data-table tbody tr:hover th {
  background: #F4F7FA;
}

/* ---------- 15. フォーム ---------- */
.application-form-embed input[type="text"],
.application-form-embed input[type="email"],
.application-form-embed input[type="tel"],
.application-form-embed input[type="url"],
.application-form-embed input[type="number"],
.application-form-embed input[type="date"],
.application-form-embed textarea,
.application-form-embed select {
  min-height: 46px;
  padding: 10px 13px;
  border-radius: 3px;
}

.application-form-embed button,
.application-form-embed input[type="submit"],
.application-form-embed input[type="button"],
.application-form-embed .smf-button-control__control {
  box-shadow: 0 2px 6px rgba(201, 135, 42, 0.16), 0 10px 22px rgba(201, 135, 42, 0.14);
}

/* ---------- 16. フォーカスリング（アクセシビリティ） ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.course-card__detail-link:focus-visible,
.course-filter__link:focus-visible {
  outline: 3px solid rgba(201, 169, 97, 0.55);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 17. レスポンシブ調整 ---------- */
@media (max-width: 1180px) {
  .site-nav__en {
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 72px 0;
  }

  .section--compact {
    padding: 56px 0;
  }

  .section__head {
    margin-bottom: 40px;
  }

  .section__head .section__title::after {
    margin-top: 16px;
  }

  /* ベースCSSの 768px 用 min-height:560px を打ち消してSPも短く */
  .hero-slide {
    min-height: 415px;
  }

  .hero__inner {
    padding-top: 40px;
    padding-bottom: 68px;
  }

  .hero__title {
    font-size: clamp(1.4rem, 5.6vw, 1.9rem);
    letter-spacing: 0.02em;
  }

  .hero__lead {
    font-size: 0.92rem;
    margin-bottom: 22px;
  }
}

@media (max-width: 767px) {

  .hero::after,
  .cta-band::after {
    display: none;
  }

  .hero__dot {
    width: 26px;
  }

  .page-hero::before,
  .cta-band::before {
    inset: 8px;
  }

  .section__title,
  .page-hero__title,
  .cta-band__title {
    letter-spacing: 0.04em;
  }

  #service .service-card .card__label,
  #service .service-card .card__title,
  #service .service-card .card__text,
  #service .service-card .card__link {
    margin-left: 22px;
    margin-right: 22px;
  }

  .access__body {
    padding: 28px 22px;
  }

  .news-card__link:hover {
    padding-left: 12px;
  }

  /* カードの浮きは控えめに（タップ時の違和感を避ける） */
  .intro__point:hover,
  .service-card:hover,
  .support-card:hover,
  .course-card:hover,
  .voice-card:hover {
    transform: translateY(-2px);
  }

  .cta-band {
    padding: 76px 0;
  }
}

@media (max-width: 600px) {
  /* フッターナビはSPでは1カラムに（3カラムのままだと窮屈なため） */
  .site-footer__nav {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ---------- 18. 会社概要「主な事業内容」カードの装飾 ----------
   #business セクション限定（他ページの .support-card には影響しない）。
   大きな通し番号・ゴールドの伸びるライン・明朝見出し・罫線リストで
   エディトリアル調に仕上げる。 */
#business .support-grid {
  counter-reset: biz;
}

#business .support-card {
  counter-increment: biz;
  position: relative;
  padding: 34px 30px 28px;
  overflow: hidden;
}

/* 大きな通し番号（01〜06）。ホバーでゴールドに色づく */
#business .support-card::before {
  content: "0" counter(biz);
  position: absolute;
  top: 16px;
  right: 22px;
  font-family: var(--font-en);
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(6, 43, 73, 0.08);
  pointer-events: none;
  transition: color 0.4s var(--ds-ease);
}

#business .support-card:hover::before {
  color: rgba(201, 169, 97, 0.4);
}

/* 上端のゴールドライン。ホバーで端まで伸びる */
#business .support-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(201, 169, 97, 0.4) 100%);
  transition: width 0.5s var(--ds-ease);
}

#business .support-card:hover::after {
  width: 100%;
}

#business .card__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--gold-dark);
}

#business .support-card__title {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

#business .support-card .card__text {
  font-size: 0.93rem;
  line-height: 1.85;
}

/* 掲載項目リスト：チェック丸をやめ、ゴールドの小さなひし形＋細い罫線に */
#business .check-list {
  margin: 20px 0 0;
  gap: 0;
}

#business .check-list li {
  padding: 9px 0 9px 22px;
  font-size: 0.9rem;
  line-height: 1.7;
}

#business .check-list li + li {
  border-top: 1px solid rgba(6, 32, 51, 0.07);
}

#business .check-list li::before {
  content: "";
  left: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: 0;
  background: var(--gold);
  border-radius: 1px;
  transform: translateY(-50%) rotate(45deg);
}

/* 導線リンクはカード下端に固定し、上に細い区切り線 */
#business .support-card .card__link {
  margin-top: auto;
  padding-top: 18px;
}

#business .check-list + .card__link {
  margin-top: 18px;
  border-top: 1px solid rgba(6, 32, 51, 0.07);
}

@media (max-width: 768px) {
  #business .support-card {
    padding: 28px 22px 24px;
  }

  #business .support-card::before {
    font-size: 2.3rem;
    top: 14px;
    right: 18px;
  }
}

/* === ChatGPT generated renewal photo replacements: 2026-07-04 === */
:root {
  --cep-photo-service-care: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-service-care-20260704.jpg');
  --cep-photo-service-jobtraining: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-service-jobtraining-20260704.jpg');
  --cep-photo-service-ai: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-service-ai-20260704.jpg');
  --cep-photo-course-action-01: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-action-01-20260704.jpg');
  --cep-photo-course-action-02: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-action-02-20260704.jpg');
  --cep-photo-course-equipment: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-equipment-20260704.jpg');
  --cep-photo-course-careworker: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-careworker-20260704.jpg');
  --cep-photo-course-suction-kumamoto: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-suction-kumamoto-20260704.jpg');
  --cep-photo-course-suction-doutou: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-suction-doutou-20260704.jpg');
  --cep-photo-hero-care: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-hero-care-20260704.jpg');
  --cep-photo-hero-jobtraining: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-hero-jobtraining-20260704.jpg');
  --cep-photo-hero-ai: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-hero-ai-20260704.jpg');
  --cep-photo-page-action: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-page-action-20260704.jpg');
  --cep-photo-page-equipment: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-page-equipment-20260704.jpg');
  --cep-photo-page-suction: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-page-suction-20260704.jpg');
  --cep-photo-page-company: url('https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-page-company-20260704.jpg');
}

.hero .hero-slide:nth-child(1) {
  --hero-bg: var(--cep-photo-hero-care) !important;
  background-position: center 42%;
}

.hero .hero-slide:nth-child(2) {
  background-image: var(--cep-photo-hero-jobtraining) !important;
  background-position: center 42%;
}

.hero .hero-slide:nth-child(3) {
  background-image: var(--cep-photo-hero-ai) !important;
  background-position: center 42%;
}

#service .service-card .phframe {
  background-size: cover;
  background-position: center 43%;
  background-repeat: no-repeat;
}

#service .service-card .service-card__image {
  opacity: 0;
}

#service .service-card:nth-of-type(1) .phframe { background-image: var(--cep-photo-service-care); }
#service .service-card:nth-of-type(2) .phframe { background-image: var(--cep-photo-service-jobtraining); }
#service .service-card:nth-of-type(3) .phframe { background-image: var(--cep-photo-service-ai); }

.course-card:has(img[alt*="7月開講"]),
.course-card:has(img[alt*="9月開講"]),
.course-card:has(img[alt*="福祉用具専門相談員"]),
.course-card:has(img[alt*="介護福祉士実務者研修"]),
.course-card:has(img[alt*="九州（熊本）"]),
.course-card:has(img[alt*="北海道（道東）"]) {
  --cep-course-photo-position: center 40%;
}

.course-card:has(img[alt*="7月開講"]) .course-card__media,
.course-card:has(img[alt*="9月開講"]) .course-card__media,
.course-card:has(img[alt*="福祉用具専門相談員"]) .course-card__media,
.course-card:has(img[alt*="介護福祉士実務者研修"]) .course-card__media,
.course-card:has(img[alt*="九州（熊本）"]) .course-card__media,
.course-card:has(img[alt*="北海道（道東）"]) .course-card__media {
  background-size: cover;
  background-position: var(--cep-course-photo-position);
  background-repeat: no-repeat;
}

.course-card:has(img[alt*="7月開講"]) .course-card__image,
.course-card:has(img[alt*="9月開講"]) .course-card__image,
.course-card:has(img[alt*="福祉用具専門相談員"]) .course-card__image,
.course-card:has(img[alt*="介護福祉士実務者研修"]) .course-card__image,
.course-card:has(img[alt*="九州（熊本）"]) .course-card__image,
.course-card:has(img[alt*="北海道（道東）"]) .course-card__image {
  opacity: 0;
}

.course-card:has(img[alt*="7月開講"]) .course-card__media { background-image: var(--cep-photo-course-action-01); }
.course-card:has(img[alt*="9月開講"]) .course-card__media { background-image: var(--cep-photo-course-action-02); }
.course-card:has(img[alt*="福祉用具専門相談員"]) .course-card__media { background-image: var(--cep-photo-course-equipment); }
.course-card:has(img[alt*="介護福祉士実務者研修"]) .course-card__media { background-image: var(--cep-photo-course-careworker); }
.course-card:has(img[alt*="九州（熊本）"]) .course-card__media { background-image: var(--cep-photo-course-suction-kumamoto); }
.course-card:has(img[alt*="北海道（道東）"]) .course-card__media { background-image: var(--cep-photo-course-suction-doutou); }

body.page-id-7 .page-hero,
body.page-id-11 .page-hero {
  background-image: var(--cep-photo-hero-care) !important;
  background-position: center 42%;
}

body.page-id-13 .page-hero,
body.page-id-15 .page-hero {
  background-image: var(--cep-photo-page-action) !important;
  background-position: center 42%;
}

body.page-id-17 .page-hero {
  background-image: var(--cep-photo-page-equipment) !important;
  background-position: center 42%;
}

body.page-id-19 .page-hero,
body.page-id-21 .page-hero,
body.page-id-103 .page-hero {
  background-image: var(--cep-photo-page-suction) !important;
  background-position: center 42%;
}

body.page-id-23 .page-hero,
body.page-id-29 .page-hero,
body.post-type-archive-portfolio .page-hero {
  background-image: var(--cep-photo-hero-jobtraining) !important;
  background-position: center 42%;
}

body.page-id-33 .page-hero,
body.page-id-35 .page-hero,
body.page-id-140 .page-hero {
  background-image: var(--cep-photo-page-company) !important;
  background-position: center 42%;
}
/* === /ChatGPT generated renewal photo replacements: 2026-07-04 === */


/* Fallback title background for page-hero pages not individually mapped. */
.page-hero {
  background-image: var(--cep-photo-page-company);
  background-position: center 42%;
}



/* === Career Plaza correction photo replacements: 2026-07-04 === */
:root {
  --cep-correction-hero-accompanying: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-hero-accompanying-visual-support-20260704.jpg");
  --cep-correction-action-after-school: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-action-after-school-day-20260704.jpg");
  --cep-correction-course-action-online: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-action-online-study-20260704.jpg");
  --cep-correction-course-equipment-online: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-equipment-online-study-20260704.jpg");
  --cep-correction-service-care-classroom: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-service-care-classroom-no-pc-20260704.jpg");
  --cep-correction-service-jobtraining-hybrid: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-service-jobtraining-class-online-20260704.jpg");
  --cep-correction-action-relation-diagram: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-action-relation-diagram-20260704.png");
}

body.page-template-page-training-accompanying .page-hero {
  background-image: var(--cep-correction-hero-accompanying) !important;
  background-position: center 45% !important;
}

body.page-template-page-training-action #about .placeholder--4x3 {
  background-image: var(--cep-correction-action-after-school) !important;
  background-size: cover !important;
  background-position: center 44% !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
}

body.page-template-page-training-action #training-relation .placeholder--16x9 {
  background-image: var(--cep-correction-action-relation-diagram) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
  color: transparent !important;
}

.course-card__media:has(img[alt*="9月開講"][alt*="オンライン行動援護"]),
.course-card__media:has(img[alt*="9月開始コース"][alt*="オンライン福祉用具"]) {
  background-size: cover !important;
  background-position: center 44% !important;
  background-repeat: no-repeat !important;
}

.course-card__media:has(img[alt*="9月開講"][alt*="オンライン行動援護"]) {
  background-image: var(--cep-correction-course-action-online) !important;
}

.course-card__media:has(img[alt*="9月開始コース"][alt*="オンライン福祉用具"]) {
  background-image: var(--cep-correction-course-equipment-online) !important;
}

.course-card__media:has(img[alt*="9月開講"][alt*="オンライン行動援護"]) > img,
.course-card__media:has(img[alt*="9月開始コース"][alt*="オンライン福祉用具"]) > img {
  opacity: 0 !important;
}

body.home .service-card:nth-of-type(1) .phframe,
body.home .service-card:nth-of-type(2) .phframe {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body.home .service-card:nth-of-type(1) .phframe {
  background-image: var(--cep-correction-service-care-classroom) !important;
  background-position: center 45% !important;
}

body.home .service-card:nth-of-type(2) .phframe {
  background-image: var(--cep-correction-service-jobtraining-hybrid) !important;
  background-position: center 45% !important;
}

body.home .service-card:nth-of-type(1) .service-card__image,
body.home .service-card:nth-of-type(2) .service-card__image {
  opacity: 0 !important;
}
/* === /Career Plaza correction photo replacements: 2026-07-04 === */



/* === Career Plaza correction photo replacements 2: 2026-07-04 === */
:root {
  --cep-correction2-service-care-whiteboard: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-service-care-whiteboard-writing-20260704.jpg");
  --cep-correction2-service-jobtraining-tablet-pc: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-service-jobtraining-tablet-pc-20260704.jpg");
  --cep-correction2-course-equipment-whiteboard-stream: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-equipment-female-whiteboard-stream-20260704.jpg");
  --cep-correction2-course-action-online-unified: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-course-action-online-study-20260704.jpg");
}

body.home .service-card:nth-of-type(1) .phframe {
  background-image: var(--cep-correction2-service-care-whiteboard) !important;
  background-size: cover !important;
  background-position: center 45% !important;
  background-repeat: no-repeat !important;
}

body.home .service-card:nth-of-type(2) .phframe {
  background-image: var(--cep-correction2-service-jobtraining-tablet-pc) !important;
  background-size: cover !important;
  background-position: center 50% !important;
  background-repeat: no-repeat !important;
}

body.home .service-card:nth-of-type(1) .service-card__image,
body.home .service-card:nth-of-type(2) .service-card__image {
  opacity: 0 !important;
}

.course-card__media:has(img[alt*="7月開講"][alt*="オンライン行動援護"]),
.course-card__media:has(img[alt*="9月開講"][alt*="オンライン行動援護"]) {
  background-image: var(--cep-correction2-course-action-online-unified) !important;
  background-size: cover !important;
  background-position: center 44% !important;
  background-repeat: no-repeat !important;
}

.course-card__media:has(img[alt*="9月開始コース"][alt*="オンライン福祉用具"]) {
  background-image: var(--cep-correction2-course-equipment-whiteboard-stream) !important;
  background-size: cover !important;
  background-position: center 48% !important;
  background-repeat: no-repeat !important;
}

.course-card__media:has(img[alt*="7月開講"][alt*="オンライン行動援護"]) > img,
.course-card__media:has(img[alt*="9月開講"][alt*="オンライン行動援護"]) > img,
.course-card__media:has(img[alt*="9月開始コース"][alt*="オンライン福祉用具"]) > img {
  opacity: 0 !important;
}
/* === /Career Plaza correction photo replacements 2: 2026-07-04 === */


/* === Course cards use post featured images: 2026-07-04 === */
body .course-card__media:has(> img.course-card__image) {
  background-image: none !important;
}

body .course-card__media:has(> img.course-card__image) > img.course-card__image {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}
/* === /Course cards use post featured images: 2026-07-04 === */


/* === Force course card media to thumbnail image only: 2026-07-04 === */
body .course-card__media.phframe:has(> img.course-card__image[alt]) {
  background-image: none !important;
}

body .course-card__media.phframe:has(> img.course-card__image[alt]) > img.course-card__image[alt] {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}
/* === /Force course card media to thumbnail image only: 2026-07-04 === */

/* codex-suction-no-pc-20260705: page hero image override */
body.page-id-19 .page-hero,
body.page-id-21 .page-hero,
body.page-id-103 .page-hero {
  background-image: url("https://career-plaza.com/renewal/wp-content/uploads/2026/07/cep-renewal-suction-medical-practical-no-pc-20260705.jpg") !important;
  background-position: center 48% !important;
}
/* /codex-suction-no-pc-20260705 */


/* =========================================================================
   デザイン最終調整レイヤー v2.1「Design Final」(2026-07-05)
   ─────────────────────────────────────────────────────────────────────────
   Career Plaza Theme Design Final 専用の最終上書きレイヤー。
   HTML構造・PHPロジック・JS・フォーム処理・文言・画像は一切変更せず、
   CSSのみで細部(プレースホルダー・カード・余白・小さな統一感)を整える。
   不要になった場合はこのブロックを丸ごと削除すれば v2.0 の見た目に戻る。
   ========================================================================= */

/* ---------- 1. 画像プレースホルダーの上質化 ----------
   斜めストライプの仮置き感をやめ、静かなブルーグレーのグラデーションと
   細いヘアラインで「準備中でも上品」な見た目にする。
   #service 内・個別ページの !important 指定(写真差し込み)はそのまま優先される。 */
.placeholder {
  background: linear-gradient(135deg, #F1F5F9 0%, #FAFCFD 52%, #EDF3F7 100%);
  color: #9AA9B7;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  border: 1px solid rgba(6, 32, 51, 0.06);
}

/* ---------- 2. スマホメニューの配色統一 ----------
   子メニューの「›」がスカイブルーで浮いていたため、
   パンくず・FAQ矢印と同じゴールド系に統一する。 */
.mobile-menu__list .sub-menu a::before,
.mobile-menu__list .children a::before,
.mobile-menu__child a::before {
  color: var(--gold-dark);
}

/* ---------- 3. カードが1件だけのときは中央寄せ ----------
   募集中の職業訓練・お知らせなどが1件のみのとき、グリッド左端に寄って
   間延びして見えるため、1件のときだけ中央に配置する(2件以上は従来どおり)。 */
.course-grid > .course-card:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 470px;
  margin-inline: auto;
}

.post-grid > .post-card:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.portfolio-grid > .portfolio-card:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

/* ---------- 4. 角丸の統一(四角基調+軽い角丸) ----------
   FAQ(14px)・イントロカード(10px)だけ角丸が大きく浮いていたため、
   全体の「四角基調に軽い角丸」のトーンへ揃える。 */
.faq__item {
  border-radius: 8px;
}

.intro__point {
  border-radius: 8px;
}

/* ---------- 5. ボタン・ピルの細部統一 ---------- */
/* 職業訓練の案内ピルの角丸をボタン(2px)と揃える */
.application-flow__guidance {
  border-radius: 2px;
}

/* 押下時はわずかに沈む(浮き上がりの戻し。派手にしない) */
.btn:active,
.header-bar__cta:active,
.course-grid--detail-only .course-card__detail-link:active {
  transform: translateY(0);
}

/* ---------- 6. サイドボックス見出しの整え ----------
   course詳細・申込ページのサイドボックス見出しに細いゴールド下線を敷き、
   本文との区切りをはっきりさせる(文言は変更しない)。 */
.course-detail__box-title,
.application-course-list__title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-gold-line-soft);
}

.application-course-list__lead {
  margin-top: 12px;
}

/* ---------- 7. チラシキャプションの整え ---------- */
.course-flyers__caption {
  letter-spacing: 0.06em;
}

/* ---------- 8. スマホ微調整 ---------- */
@media (max-width: 768px) {
  /* 1件だけの中央寄せカードは全幅で自然に */
  .course-grid > .course-card:only-child,
  .post-grid > .post-card:only-child,
  .portfolio-grid > .portfolio-card:only-child {
    max-width: none;
  }
}


/* ---------- 9. スマホの横はみ出し防止 ----------
   1カラム化時のグリッドが「1fr」だと中身の最小幅(改行できない日付行など)で
   トラックが画面より広がり、数pxの横スクロールが発生していたため、
   minmax(0, 1fr) にして必ず画面内に収める(申込ページで実測5px超過を確認)。 */
@media (max-width: 1024px) {
  .application-layout,
  .course-detail__layout,
  .portfolio-detail__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* application-main 自体も grid のため、暗黙カラム(auto)が中身の最小幅で
     膨らまないよう明示的に minmax(0, 1fr) の1カラムにする */
  .application-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .application-main,
  .application-side {
    min-width: 0;
  }

  .application-main > *,
  .application-side > * {
    max-width: 100%;
    min-width: 0;
  }
}