/* ============================================================
   base.css — Universal editorial baseline
   全ページに適用される基礎スタイル (タイポグラフィ / ヘッダー / フッター / 共通コンポーネント)
   home.css は body.home スコープで上書きする
   ============================================================ */

/* ---------- Base ---------- */
html { background-color: var(--color-bg); }
body {
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 既存 style.css の鳥背景・スクロールボタンを無効化 */
body .content {
  background-image: none;
  background-color: transparent;
}
#scroll { display: none !important; }

a { color: inherit; text-decoration: none; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Heading reset (style.css の派手な h2/h3/h4 を中和) ---------- */
h1, h2, h3, h4, h5, h6 {
  display: block;
  background: none;
  background-color: transparent;
  color: inherit;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: none;
  border: none;
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;  /* 親の text-align を継承 (.service-cta 等の中央寄せに対応) */
  position: static;
  justify-content: initial;
}
h1::before, h1::after,
h2::before, h2::after,
h3::before, h3::after,
h4::before, h4::after { content: none; display: none; }

/* ---------- Header (default = opaque, inner page mode) ---------- */
header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height-pc);
  padding: 0 clamp(20px, 4vw, 40px);
  background-color: rgba(250, 250, 247, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color .25s ease, border-color .25s ease;
}

header .logo {
  width: 168px;
  aspect-ratio: 1 / 0.2954;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  color: transparent;
  overflow: hidden;
}
header .logo h1 { font-size: 0; margin: 0; padding: 0; }

/* PC nav */
header .pc_menu .menu,
header .pc_menu > ul,
header .pc_menu > div > ul {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
header .pc_menu ul ul { display: none; } /* sub-menus 非表示 (今回は出さない) */
header .pc_menu li {
  font-family: var(--font-sans-jp);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
header .pc_menu li a {
  color: var(--color-primary-900);
  padding: 6px 2px;
  border-radius: 0;
  background: transparent;
  transition: color .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
header .pc_menu li a:hover {
  color: var(--color-accent);
  background: transparent;
  border-bottom-color: var(--color-accent);
}
header .pc_menu li:last-child a {
  background: transparent;
  color: var(--color-primary-900);
  padding: 6px 2px;
  border-radius: 0;
}
header .pc_menu .current_page_item a {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  pointer-events: none;
}
/* 旧 style.css の last-child + current バッジ表示を上書き */
header .pc_menu li:last-child.current_page_item a,
header .pc_menu li.current_page_item:last-child a {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  border-radius: 0;
  padding: 6px 2px;
  border-bottom: 1px solid var(--color-accent);
}
header .pc_menu li:last-child a {
  border-radius: 0;
}
/* 旧 style.css の last-child hover (赤茶背景) を中和 */
header .pc_menu li:last-child a:hover {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  border-bottom-color: var(--color-accent);
}

/* ヘッダー右端のセミナー申込 CTA — ナビリンクとは別の「ボタン」見た目に差別化 */
header .pc_menu {
  display: flex;
  align-items: center;
  gap: 24px;
}
header .header-cta,
header .header-cta:link,
header .header-cta:visited {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  font-family: var(--font-sans-jp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary-900) !important;
  background-color: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  text-decoration: none;
}
header .header-cta::after {
  content: "→";
  margin-left: 8px;
  transition: transform .2s ease;
}
header .header-cta:hover,
header .header-cta:hover:visited,
header .header-cta:focus,
header .header-cta:active {
  /* gold は維持しつつ少し濃く、テキストを白系に。!important で旧 style.css の wine red を確実に上書き */
  background-color: #9C7E47 !important;
  border-color: #9C7E47 !important;
  color: #FAFAF7 !important;
}
header .header-cta:hover::after { transform: translateX(2px); }

/* SP nav button (PC: hidden) */
header .navBtn {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-primary-900);
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
}
/* 旧 style.css 由来の残り物プロパティをリセットして 3 本線をきれいに配置 */
header .navBtn span {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  width: 20px;
  height: 1.5px;
  background-color: var(--color-primary-900);
  border-radius: 0;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background-color .25s ease;
}
header .navBtn span:first-of-type  { transform: translate(-50%, calc(-50% - 7px)); }
header .navBtn span:nth-of-type(2) { display: block; transform: translate(-50%, -50%); }
header .navBtn span:last-of-type   { transform: translate(-50%, calc(-50% + 7px)); }

header .sp_menu { display: none; }

/* メニュー展開中は元のハンバーガーボタンを隠す (✕ ボタンとの重なり防止) */
header .sp_menu.is-open ~ .navBtn { display: none !important; }

@media (max-width: 1024px) {
  header {
    height: var(--header-height-sp);
    padding: 0 20px;
  }
  header .logo { width: 140px; }
  header .pc_menu { display: none; }
  header .navBtn { display: block; }

  /* SP オーバーレイ内のセミナー申込 CTA は大きめのボタン化 */
  /* (base.css の `header .sp_menu a { background: transparent !important }` を !important で再上書き) */
  header .sp_menu .header-cta--sp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 24px auto 48px !important;
    height: 52px;
    padding: 0 32px !important;
    background-color: var(--color-accent) !important;
    color: var(--color-primary-900) !important;
    border: 1px solid var(--color-accent) !important;
    border-bottom: 1px solid var(--color-accent) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-sans-jp);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  header .sp_menu .header-cta--sp::after { content: "→"; margin-left: 10px; }

  header .sp_menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: var(--color-primary-900);
    color: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow: auto;
    text-align: center; /* inline-flex な .header-cta--sp を水平中央寄せ */
  }
  header .sp_menu.is-open { transform: translateX(0); }
  header .sp_menu .menu,
  header .sp_menu > ul,
  header .sp_menu > div > ul {
    display: flex; flex-direction: column;
    gap: 28px; align-items: center;
    margin: 0; padding: 96px 24px 48px;
    list-style: none;
  }
  header .sp_menu li {
    font-family: var(--font-serif-jp);
    font-size: 20px;
    letter-spacing: 0.08em;
  }
  header .sp_menu a,
  header .sp_menu li:last-child a /* 旧 style.css の last-child navy を上書き */ {
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding: 8px 0;
    background: transparent !important;
    border-radius: 0;
    display: inline-block;
  }
  /* 現在ページの SP メニュー項目 — 旧 style.css の wine red (#6a1717) を上書き、PC と同じ gold accent に揃える */
  header .sp_menu .current_page_item a {
    color: var(--color-accent) !important;
    border-bottom-color: var(--color-accent) !important;
    pointer-events: none;
  }
  header .cross {
    position: absolute;
    top: 18px; right: 18px;
    width: 44px; height: 44px;
    cursor: pointer;
  }
  header .cross span {
    position: absolute; left: 50%; top: 50%;
    width: 22px; height: 1.5px;
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  header .cross span:last-of-type {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* ---------- Universal Footer (旧 home-footer を全ページに適用) ---------- */
.home-footer {
  background-color: var(--color-primary-900);
  color: rgba(255,255,255,0.7);
  padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 40px) 32px;
}
.home-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.home-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: 48px;
}
.home-footer__brand .logo-img {
  width: 180px;
  aspect-ratio: 1 / 0.2954;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
}
.home-footer__brand .org-name {
  font-family: var(--font-serif-jp);
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  margin: 0 0 12px;
}
.home-footer__brand .org-desc {
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.home-footer h4 {
  font-family: var(--font-display-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin: 0 0 18px;
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
  display: block;
  text-align: left;
}
.home-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-footer li {
  font-size: 13px;
  line-height: 1.6;
}
.home-footer a {
  color: rgba(255,255,255,0.7);
  transition: color .2s ease;
}
.home-footer a:hover { color: #fff; }
.home-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
}
.home-footer__bottom p { margin: 0; }
.home-footer__bottom .tagline {
  font-family: var(--font-serif-jp);
  letter-spacing: 0.18em;
}
@media (max-width: 1024px) {
  .home-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .home-footer__cols { grid-template-columns: 1fr; margin-bottom: 32px; }
  .home-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Universal Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  font-family: var(--font-sans-jp);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn--primary {
  background-color: var(--color-primary-900);
  color: #FAFAF7;
  border-color: var(--color-primary-900);
}
.btn--primary:hover {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}
.btn--secondary {
  background-color: transparent;
  color: var(--color-primary-900);
  border-color: var(--color-primary-900);
}
.btn--secondary:hover {
  background-color: var(--color-primary-900);
  color: #fff;
}
.btn--gold {
  background-color: var(--color-accent);
  color: var(--color-primary-900);
  border-color: var(--color-accent);
}
.btn--gold:hover {
  background-color: #C9A572;
  border-color: #C9A572;
}

/* ---------- Reveal (progressive enhancement) ---------- */
html.js-loaded .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
html.js-loaded .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js-loaded .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Layout helpers ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.container--narrow { max-width: var(--container-narrow); }

/* Section label (eyebrow) — used on multiple pages */
.section-label {
  font-family: var(--font-display-en);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-primary-700);
  margin: 0 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.section-label::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background-color: var(--color-accent);
}
.section-label--on-dark { color: rgba(255,255,255,0.7); }

/* SP utility */
.sp-only { display: none; }
.sp-hidden { display: inline; }
@media (max-width: 640px) {
  .sp-only   { display: inline; }
  .sp-hidden { display: none; }
}

/* SP: word-break: keep-all を使う長い日本語が画面外に突き抜けるのを防ぐ。
   `anywhere` は keep-all と併用可能で、acceptable break point が無い時のみ任意位置で改行する。 */
@media (max-width: 640px) {
  h1, h2, h3, h4, h5, h6, p, blockquote, li {
    overflow-wrap: anywhere;
  }
}