@charset "UTF-8";

/* =========================================================================
   Voice "coming soon" child pages (/voice/junior-high/, /voice/high-school/,
   /voice/parents/). Ported from voice-junior-high.html / voice-high-school.html /
   voice-parents.html — the three mockups are identical except for accent
   color, category label, and the bottom "back" link, so they share one
   WordPress template (page-voice-coming-soon.php, selected manually per
   page via Page Attributes > Template — see that file's header comment for
   why slug-based auto-matching is unsafe here) and this one stylesheet.
   The category accent is swapped via a .vcs--pink / --blue / --orange
   modifier class on <main>, mirroring the mockups' per-file --accent var.
   Classes are prefixed .vcs- (Voice Coming Soon) to avoid clashing with
   generic sitewide names.
   ========================================================================= */

.vcs {
  --vcs-orange-accent: #FB7312;
  --vcs-grad-1: #F8B133;
  --vcs-grad-2: #F59F27;
  --vcs-pink: #FC75AE;
  --vcs-blue: #0385FE;
  --vcs-text-dark: #1A1A1A;
  --vcs-text-gray: #5B5B5B;
  --vcs-font-en: "Jost", sans-serif;
  --vcs-accent: var(--vcs-pink);
  font-family: "Noto Sans JP", sans-serif;
  color: var(--vcs-text-dark);
  line-height: 1.9;
  overflow-x: hidden;
  display: block;
}

.vcs--pink { --vcs-accent: var(--vcs-pink); }
.vcs--blue { --vcs-accent: var(--vcs-blue); }
.vcs--orange { --vcs-accent: var(--vcs-orange-accent); }

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

.vcs img { max-width: 100%; display: block; }
.vcs a { text-decoration: none; color: inherit; }

/* ---- breadcrumb ---------------------------------------------------------- */
.vcs-breadcrumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 20px 0;
  margin-top: 144px;
  font-size: 13px;
  color: var(--vcs-text-gray);
}
.vcs-breadcrumb a { color: var(--vcs-text-gray); }
.vcs-breadcrumb a:hover { text-decoration: underline; }
.vcs-breadcrumb span { margin: 0 6px; color: #ccc; }

/* ---- coming soon section -------------------------------------------------- */
.vcs-section { padding: 80px 20px 110px; position: relative; overflow: hidden; }
.vcs-section__inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.vcs-watermark {
  position: absolute;
  top: -14px;
  left: -6px;
  font-family: var(--vcs-font-en);
  font-weight: 800;
  font-size: clamp(50px, 9vw, 100px);
  letter-spacing: -.02em;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  color: rgba(0, 0, 0, .045);
}
.vcs-mark {
  width: 84px;
  height: 84px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vcs-grad-1), var(--vcs-grad-2));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.vcs-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
}
.vcs-mark svg { position: relative; z-index: 1; width: 38px; height: 38px; }
.vcs-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--vcs-accent);
  border-radius: 999px;
  padding: 5px 18px;
  margin-bottom: 18px;
}
.vcs-heading { font-size: 26px; font-weight: 900; color: var(--vcs-text-dark); line-height: 1.7; margin-bottom: 16px; }
.vcs-lead { font-size: 15.5px; color: var(--vcs-text-gray); margin-bottom: 40px; }
.vcs-cta-pair { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.vcs-back-link { font-size: 14px; font-weight: 700; color: var(--vcs-text-gray); }
.vcs-back-link:hover { text-decoration: underline; }

/* ---- page-local buttons -------------------------------------------------- */
.vcs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  border-radius: 999px;
  transition: transform .2s ease, filter .2s ease;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}
.vcs-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.vcs-btn--accent { background: var(--vcs-accent); color: #fff; }
.vcs-btn--outline { background: #fff; color: var(--vcs-text-dark); border: 1.5px solid var(--vcs-text-dark); }
.vcs-btn--outline:hover { transform: translateY(-2px); filter: none; }
.vcs-btn--lg { font-size: 16px; padding: 17px 34px; min-width: 250px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .vcs-breadcrumb { margin-top: 110px; }
  .vcs-section { padding: 56px 18px 80px; }
  .vcs-heading { font-size: 21px; }
  .vcs-btn--lg { min-width: 100%; }
  .vcs-watermark { font-size: 42px; }
}