/* =========================================================
   Bilingual Training — コラム等（WordPressテンプレート）共通の枠
   トップページ（legacy/index）の配色・ナビ・フッターを移植
   ========================================================= */
:root {
  --ink: #0E1B2C;
  --ink-soft: #1A2840;
  --cream: #F4EFE5;
  --cream-deep: #ECE4D2;
  --vermillion: #C8472B;
  --vermillion-deep: #A53A22;
  --brass: #B8924D;
  --charcoal: #2A2A2A;
  --muted: #6B7280;
  --line: rgba(14, 27, 44, 0.12);
  --line-strong: rgba(14, 27, 44, 0.28);
  --font-jp-serif: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --font-jp-sans: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
  --font-logo: "Fraunces", "Times New Roman", serif;
  --font-en-serif: "Newsreader", "Times New Roman", serif;
  --font-en-sans: "IBM Plex Sans", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-jp-sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="en"] body { font-family: var(--font-en-sans); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
#main { padding-top: 70px; min-height: 60vh; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.serif { font-family: var(--font-jp-serif); }
.bt-en-serif { font-family: var(--font-en-serif); }
.bt-en { font-family: var(--font-en-sans); }
.section-eyebrow {
  font-family: var(--font-en-sans); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--vermillion); margin-bottom: 14px;
}

/* ---- NAV ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(244, 239, 229, 0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }
.nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.logo {
  font-family: var(--font-logo); font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
}
.logo em { font-style: italic; color: var(--vermillion); font-weight: 300; }
.logo-mark {
  display: inline-block; width: 8px; height: 8px; background: var(--vermillion);
  transform: rotate(45deg); margin-right: 4px; vertical-align: middle;
}
.logo .jp { font-family: var(--font-jp-serif); font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
.nav-links {
  display: flex; gap: 28px; font-family: var(--font-en-sans); font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.nav-links a { padding: 4px 0; transition: color 0.2s; }
.nav-links a:hover { color: var(--vermillion); }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.cta-nav {
  background: var(--ink); color: var(--cream); padding: 10px 22px; border-radius: 999px;
  font-family: var(--font-en-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  transition: background 0.2s; white-space: nowrap;
}
.cta-nav:hover { background: var(--vermillion); }
#mobile-menu-btn { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; color: var(--ink); }
.mobile-nav { display: none; border-top: 1px solid var(--line); padding: 8px 20px 16px; background: var(--cream); }
.mobile-nav.active { display: block; }
.mobile-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mobile-nav a.mobile-nav__cta { border-bottom: none; margin-top: 12px; text-align: center; background: var(--ink); color: var(--cream); border-radius: 999px; }

/* ---- ボタン ---- */
.btn-primary {
  background: var(--vermillion); color: var(--cream); padding: 15px 28px; border-radius: 4px;
  font-family: var(--font-en-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 12px; border: none; cursor: pointer; transition: all 0.25s;
}
.btn-primary:hover { background: var(--vermillion-deep); transform: translateY(-1px); }
.btn-secondary {
  color: var(--ink); font-family: var(--font-en-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  padding: 14px 0; border-bottom: 1px solid currentColor; display: inline-flex; align-items: center; gap: 10px;
}
.btn-secondary:hover { color: var(--vermillion); }
.arrow { transition: transform 0.25s; }
a:hover > .arrow { transform: translateX(4px); }

/* ---- FOOTER ---- */
footer { background: #07111d; color: rgba(244,239,229,0.6); padding: 60px 40px 32px; font-size: 13px; }
.footer-inner { max-width: 1240px; margin: 0 auto 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }
.footer-brand .logo { color: var(--cream); margin-bottom: 16px; }
.footer-brand p { font-size: 12px; line-height: 1.7; max-width: 320px; }
.footer-col h5 {
  font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 16px;
}
.footer-col a { display: block; padding: 4px 0; font-size: 13px; }
.footer-col a:hover { color: var(--brass); }
.footer-bottom {
  max-width: 1240px; margin: 0 auto; border-top: 1px solid rgba(244,239,229,0.1); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: rgba(244,239,229,0.4); font-family: var(--font-en-sans); letter-spacing: 0.04em;
}

@media (min-width: 981px) and (max-width: 1240px) {
  .logo .jp { display: none; }
  .nav-inner { gap: 24px; }
  .nav-links { gap: 18px; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  .nav-inner { padding: 18px 24px; gap: 20px; }
  .nav-links { gap: 13px; font-size: 12px; letter-spacing: 0.02em; }
  .cta-nav { padding: 9px 16px; font-size: 12px; }
}
@media (max-width: 980px) {
  .logo { font-size: 18px; }
  .nav-links, .cta-nav { display: none; }
  .nav-inner { padding: 14px 20px; gap: 16px; }
  #mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
  #main { padding-top: 58px; }
  .container { padding: 0 20px; }
  footer { padding: 48px 24px 28px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}