/* ================================================================
   wagaya Jobs Agent — main.css
   Single stylesheet for index.html
   Merged from: styles.css, styles-2.css, lp-enhance.css,
   polish.css, cvr.css, mobile.css, seo.css + shared parts of about-styles.css
   Brand colors updated: red #9F2B3A / yellow #F8D45E
   ================================================================ */

/* ===== TOKENS ===== */
:root {
  --red:        #9F2B3A;
  --red-deep:   #C2192B;
  --red-soft:   #FCE3E3;
  --red-softer: #FEF0F0;
  --pink:       #FCE3E3;
  --yellow:     #F8D45E;
  --yellow-soft:#FEF3C7;
  --green-line: #06C755;
  --green-line-deep: #05B14C;
  --ink:  #1A1A1A;
  --ink-2:#2A2A2A;
  --muted:#7A7A7A;
  --line: #ECECEC;
  --bg:       #FFFFFF;
  --bg-tint:  #FBFAF8;
  --shadow-card: 0 18px 40px -22px rgba(40,20,20,.18), 0 4px 10px -4px rgba(40,20,20,.06);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; }
html { overflow-x: clip; overscroll-behavior-x: none; }
body {
  font-family: "Noto Sans JP", "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  line-height: 1.7;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; }

/* ===== TYPOGRAPHY ===== */
.serif-script {
  font-family: "Allura", "Sacramento", cursive;
  font-weight: 400;
  color: var(--red);
  font-style: normal;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--red);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1.5px;
  background: var(--red);
  display: inline-block;
}
.h-en {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.h-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
.icon-stroke { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Smartphone-only line breaks */
br.br-sp { display: none; }
@media (max-width: 768px) {
  br.br-sp { display: block; }
}


.lang-switcher {
  position: relative;
  margin-right: 8px;
  flex-shrink: 0;
}
.lang-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lang-switcher-trigger:hover,
.lang-switcher.is-open .lang-switcher-trigger {
  border-color: rgba(159,43,58,.35);
  box-shadow: 0 4px 12px -6px rgba(159,43,58,.25);
}
.lang-globe { color: var(--red); flex-shrink: 0; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.lang-switcher.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: "Noto Sans JP", "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.lang-menu button:hover { background: rgba(159,43,58,.06); color: var(--red); }
.lang-menu button.active {
  background: rgba(159,43,58,.1);
  color: var(--red);
  font-weight: 800;
}

.mnav-lang { padding: 8px 0 16px; border-bottom: 1px solid rgba(0,0,0,.06); margin-bottom: 16px; }
.mnav-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.mnav-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: "Noto Sans JP", "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mnav-lang-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239F2B3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 3 4 6.5 4 9s-1.5 6-4 9c-2.5-3-4-6.5-4-9s1.5-6 4-9Z'/%3E%3C/svg%3E");
}
.mnav-lang-btn:hover { border-color: rgba(159,43,58,.35); color: var(--red); }
.mnav-lang-btn.active {
  border-color: var(--red);
  background: rgba(159,43,58,.08);
  color: var(--red);
}

[data-lang-only="jp"],
[data-lang-only="en"],
[data-lang-only="zh"],
[data-lang-only="vi"] { display: none !important; }
body[data-lang-effective="jp"] [data-lang-only="jp"],
body[data-lang-effective="en"] [data-lang-only="en"],
body[data-lang-effective="zh"] [data-lang-only="zh"],
body[data-lang-effective="vi"] [data-lang-only="vi"] { display: revert !important; }

/* legacy — remove if unused */
.lang-toggle { display: none !important; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(159,43,58,.45);
}
.btn-primary:hover { background: var(--red-deep); transform: translateY(-1px); }
.btn-ghost {
  background: #fff;
  color: var(--red);
  border: 1.5px solid #fff;
}
.btn-ghost:hover { background: var(--red-softer); }
.btn .plane { width: 16px; height: 16px; }
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  background: var(--green-line);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(6,199,85,.55);
  transition: transform .15s ease, background .2s;
  white-space: nowrap;
}
.btn-line:hover { background: var(--green-line-deep); transform: translateY(-1px); }
.btn-line .ic { width: 18px; height: 18px; }
.btn-fb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  background: #1877F2;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(24,119,242,.55);
  transition: transform .15s ease, background .2s;
  white-space: nowrap;
}
.btn-fb:hover { background: #166FE5; transform: translateY(-1px); }
.btn-fb .ic { width: 18px; height: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-row .btn-primary, .cta-row .btn-line { padding: 18px 30px; font-size: 15px; }

/* ===== HEADER ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159,43,58,.18), transparent);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 88px;
  gap: 28px;
  min-width: 0;
}
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.logo .mark-svg { width: 46px; height: 46px; flex-shrink: 0; }
.logo-text {
  font-family: "Plus Jakarta Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: .08em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: .55em;
  white-space: nowrap;
}
.logo-gray { color: #9C9C9C; }
.logo-red  { color: var(--red); font-weight: 400; }
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 600;
  flex-wrap: nowrap;
}
.nav-site-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex: 1;
  flex-wrap: nowrap;
}
.nav-site-bar a {
  white-space: nowrap;
  line-height: 1.2;
}
.nav-page-bar {
  display: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-page-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 44px;
  flex-wrap: nowrap;
}
.nav-page-bar a {
  font-size: 13px;
  font-weight: 500;
  color: #6b6b76;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: none;
}
.nav-page-bar a:hover { color: var(--red); }
.nav-page-bar a.is-active { color: var(--red); font-weight: 700; }
@media (min-width: 981px) {
  .nav-page-bar { display: block; }
  section[id] { scroll-margin-top: 140px; }
}

/* ===== Side links (PC) ===== */
.side-links {
  display: none;
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  flex-direction: column;
  gap: 2px;
  padding: 10px 6px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.18);
}
@media (min-width: 1100px) {
  .side-links { display: flex; }
}
.side-links a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: #6b6b76;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.side-links a:hover { color: var(--red); background: rgba(159,43,58,.06); }
.side-links a.is-active {
  color: var(--red);
  background: rgba(159,43,58,.08);
  font-weight: 800;
}
.side-links a.is-active::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 4px;
  vertical-align: middle;
}

.mnav-section-label {
  margin: 12px 0 6px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9aa6;
}
.nav a { white-space: nowrap; line-height: 1.2; }
.nav a:hover { color: var(--red); }
.nav-site { font-weight: 600; }
.nav-site.is-active { color: var(--red); }
.nav-site--employer {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-site--employer:hover { border-color: var(--red); color: var(--red); }
.header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.header-cta .btn-primary { padding: 12px 20px; font-size: 13px; }
.header-cta .btn-line    { padding: 12px 18px; font-size: 13px; }
.menu-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  color: var(--red);
  display: grid; place-items: center;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}
.menu-btn-bar {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-btn-bar:nth-child(1) { top: 0; }
.menu-btn-bar:nth-child(2) { top: 6px; }
.menu-btn-bar:nth-child(3) { top: 12px; }
.menu-btn.is-open .menu-btn-bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-btn.is-open .menu-btn-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn.is-open .menu-btn-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (max-width: 1180px) { .header-cta .btn-line { display: none; } }
@media (max-width: 980px)  { .nav-site-bar { display: none; } }
@media (min-width: 981px)  { .menu-btn { display: none; } }

/* Vietnamese header: labels are longer — keep the logo from being squeezed
   (which caused the logo text to overlap the nav) and tighten spacing to fit. */
body[data-lang="vi"] .logo { flex-shrink: 0; }
body[data-lang="vi"] .site-header .wrap { gap: 16px; }
body[data-lang="vi"] .nav-site-bar { gap: 14px; min-width: 0; }
body[data-lang="vi"] .nav-site-bar a { font-size: 12.5px; }
body[data-lang="vi"] .nav-site--employer { padding: 6px 11px; }
body[data-lang="vi"] .header-cta { gap: 10px; }
body[data-lang="vi"] .header-cta .btn-primary { padding: 11px 14px; font-size: 12px; }
body[data-lang="vi"] .header-cta .btn-line { padding: 11px 13px; font-size: 12px; }
/* VI: no Facebook/contact button in the top header (kept in the sticky CTA / page body) */
body[data-lang="vi"] .header-cta [data-contact-chat] { display: none !important; }
/* Narrow desktop: VI top nav would still be tight → use the hamburger menu */
@media (max-width: 1180px) {
  body[data-lang="vi"] .nav-site-bar { display: none !important; }
  body[data-lang="vi"] .menu-btn { display: grid !important; }
}

/* ===== Mobile Nav Drawer ===== */
.mobile-nav {
  position: fixed;
  top: 88px;
  left: 0; right: 0;
  background: #fff;
  z-index: 49;
  padding: 0 24px 28px;
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s ease, visibility .22s ease;
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
  border-top: 1px solid rgba(0,0,0,.06);
}
@media (max-width: 768px) {
  .mobile-nav {
    top: 64px;
    max-height: calc(100dvh - 64px);
  }
}
.mobile-nav[aria-hidden="false"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.mnav-links {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 20px;
}
.mnav-link {
  display: block;
  padding: 14px 4px;
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.05);
  letter-spacing: .01em;
  transition: color .15s, padding-left .15s;
}
.mnav-link:last-child { border-bottom: none; }
.mnav-link:hover, .mnav-link:active { color: var(--red); padding-left: 8px; }
.mnav-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mnav-cta .btn-primary {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%;
  padding: 15px 20px; font-size: 15px;
}
.mnav-line {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%;
  padding: 15px 20px; font-size: 15px;
  border-radius: 999px;
}

/* backdrop */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 48;
  backdrop-filter: blur(2px);
}
.mobile-nav-backdrop.active { display: block; }

/* ===== Scroll to top ===== */
.scroll-to-top {
  position: fixed;
  right: 16px;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line, #ececef);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.scroll-to-top svg { width: 16px; height: 16px; }
.scroll-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-to-top:hover {
  border-color: var(--red);
  color: var(--red);
}
@media (max-width: 768px) {
  .scroll-to-top--above-sticky.is-visible {
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 769px) {
  .scroll-to-top { right: 24px; bottom: 24px; }
}

body.nav-open .site-header-main .menu-btn {
  z-index: 51;
}
body.nav-open .scroll-to-top,
body.nav-open .sticky-cta {
  visibility: hidden;
  pointer-events: none;
}

/* hamburger → X（SVG版フォールバック） */
.menu-btn svg { transition: transform .2s ease; }
body.nav-open .menu-btn:not(.is-open) svg { transform: rotate(90deg); }

/* ===== AIO SUMMARY ===== */
.aio-summary {
  background: linear-gradient(180deg, #fff 0%, #FBF5F4 100%);
  padding: 40px 0 16px;
  position: relative;
}
.aio-summary-card {
  max-width: 940px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #F0E8E8;
  border-radius: 22px;
  padding: 30px 36px 32px;
  box-shadow: 0 14px 36px -24px rgba(40,20,20,.18);
  position: relative;
  overflow: hidden;
}
.aio-summary-card::before {
  content: "";
  position: absolute;
  width: 6px; top: 26px; bottom: 26px; left: 0;
  background: var(--red);
  border-radius: 0 4px 4px 0;
}
.aio-summary-card .label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .22em; color: var(--red);
  text-transform: uppercase; margin-bottom: 14px; padding-left: 4px;
}
.aio-summary-card .label::before { content: ""; width: 22px; height: 2px; background: var(--red); display: inline-block; }
.aio-summary-card h2 {
  font-family: "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: 22px; margin: 0 0 14px; line-height: 1.55; letter-spacing: .02em;
}
.aio-summary-card p  { margin: 0; font-size: 14.5px; line-height: 2; color: #333; font-feature-settings: "palt"; }
.aio-summary-card p b { color: var(--red); }
.aio-summary-card ul {
  margin: 16px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 6px 24px;
}
.aio-summary-card ul li {
  font-size: 13px; color: #444; padding-left: 24px; position: relative; line-height: 1.85;
}
.aio-summary-card ul li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--red);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4 10-10'/></svg>");
  background-position: center; background-repeat: no-repeat; background-size: 11px;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 56px 0 110px;
  background:
    radial-gradient(ellipse 60% 50% at 12% 18%, rgba(248,212,94,.18), transparent 70%),
    radial-gradient(ellipse 70% 60% at 90% 80%, rgba(252,227,227,.6), transparent 70%),
    #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; top: -120px; left: -160px;
  width: 460px; height: 460px;
  background: var(--red-soft);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  z-index: 0; filter: blur(2px); opacity: .8;
}
.hero::after {
  content: "";
  position: absolute; right: -120px; bottom: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(248,212,94,.6), rgba(248,212,94,0) 70%);
  border-radius: 50%; z-index: 0;
}
.hero .wrap { position: relative; z-index: 2; }

/* Mobile hero — subtle full-bleed photo behind copy (desktop only) */
.hero-mobile-gallery {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 18px;
}
.hero-mobile-thumb {
  aspect-ratio: 1;
  border-radius: 14px;
  background: #eee center/cover no-repeat;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.15);
}

.hero-bg-mobile { display: none; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Eyebrow stamp */
.hero-stamp {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--red); color: var(--red);
  padding: 8px 16px 8px 12px; border-radius: 999px;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: .12em; margin-bottom: 22px;
  box-shadow: 0 4px 14px -4px rgba(159,43,58,.18);
}
.hero-stamp .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  position: relative; animation: hero-pulse 2s ease-out infinite;
}
.hero-stamp .pulse::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--red); opacity: .6;
  animation: hero-pulse-ring 2s ease-out infinite;
}
@keyframes hero-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes hero-pulse-ring { 0%{transform:scale(.8);opacity:.7} 100%{transform:scale(2);opacity:0} }
.hero-stamp .jp { font-family: "Noto Sans JP", sans-serif; font-weight: 800; letter-spacing: .04em; font-size: 12.5px; }

/* Headline */
.hero h1 { margin: 0 0 22px; }
.hero-script-v2 {
  font-family: "Noto Sans JP", "Plus Jakarta Sans", sans-serif;
  color: var(--red); font-weight: 700;
  font-size: clamp(14px, 1.6vw, 22px);
  line-height: 1.2; display: block; margin-bottom: 10px;
  letter-spacing: .02em; white-space: nowrap;
}
.hero-title-v2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800; font-size: 54px;
  letter-spacing: -.025em; line-height: .98;
  color: var(--ink); display: block;
  white-space: nowrap;
  font-feature-settings: "ss01","cv11";
}
.hero-title-v2 .dot  { color: var(--red); }
.hero-title-v2 .hl-yellow { position: relative; display: inline-block; }

/* Japanese sub-headline */
.hero-sub-jp {
  font-family: "Noto Sans JP", sans-serif; font-weight: 800;
  font-size: 22px; line-height: 1.65; letter-spacing: .02em;
  color: var(--ink); margin: 0 0 14px;
}
.hero-sub-jp .ac { color: var(--red); }

.hero-lead-v2 {
  font-size: 14.5px; line-height: 2; color: #3a3a3a;
  margin: 0 0 24px; max-width: 480px;
}

/* Anchor chips */
.anchor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.anchor-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid rgba(159,43,58,.2);
  box-shadow: 0 4px 12px -6px rgba(159,43,58,.18);
  color: var(--red); padding: 9px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  font-family: "Noto Sans JP", sans-serif; letter-spacing: .04em;
  transition: transform .15s, background .2s;
}
.anchor-chip:hover { transform: translateY(-2px); background: var(--red-soft); }
.anchor-chip svg { width: 14px; height: 14px; }

/* CTA buttons */
.hero-cta-v2 {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-start; margin: 0 0 22px;
}
.hero-cta-v2 .cta-pair {
  display: inline-flex; flex-direction: column;
  align-items: stretch; gap: 10px;
}
.hero-cta-v2 .cta-pair > a { width: 100%; }
.hero-cta-v2 .btn-big {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 20px 34px; border-radius: 999px;
  font-weight: 800; font-size: 16px; letter-spacing: .02em;
  transition: transform .15s, box-shadow .2s;
  white-space: nowrap; position: relative;
}
.hero-cta-v2 .btn-red {
  background: var(--red); color: #fff;
  box-shadow: 0 14px 28px -10px rgba(159,43,58,.55);
}
.hero-cta-v2 .btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -10px rgba(159,43,58,.65);
}
.hero-cta-v2 .btn-line-big {
  background: var(--green-line); color: #fff;
  box-shadow: 0 14px 28px -10px rgba(6,199,85,.5);
}
.hero-cta-v2 .btn-line-big:hover {
  background: var(--green-line-deep); transform: translateY(-2px);
}
.hero-cta-v2 .btn-fb-big {
  background: #1877F2; color: #fff;
  box-shadow: 0 14px 28px -10px rgba(24,119,242,.5);
}
.hero-cta-v2 .btn-fb-big:hover {
  background: #166FE5; transform: translateY(-2px);
}
.hero-cta-v2 .btn-big svg { width: 18px; height: 18px; flex-shrink: 0; }
.hero-cta-v2 .badge-free {
  position: absolute; top: -10px; right: -8px;
  background: var(--yellow); color: var(--ink);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: 10px; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 999px;
  transform: rotate(6deg); white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

/* CTA pair role labels */
.role-label { display: block; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.role-label.rl-red   { color: var(--red); }
.role-label.rl-green { color: #05813A; }
.role-label.rl-white { color: #fff !important; opacity: .95; }

/* Hesitation killers */
.hero-hesitation {
  margin-top: 22px; display: flex; flex-wrap: wrap;
  gap: 10px 24px; font-size: 12px; color: #444;
}
.hero-hesitation span { display: inline-flex; align-items: center; gap: 6px; }
.hero-hesitation .em {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  font-size: 10px; font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif;
}

/* Flags */
.hero-flags { margin-top: 16px; display: flex; align-items: center; gap: 14px; font-size: 12px; flex-wrap: wrap; }
.hero-flags .label {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
  letter-spacing: .18em; color: var(--red); font-size: 11px; text-transform: uppercase;
}
.hero-flags .flag-list { display: flex; gap: 8px; }
.hero-flags .flag-svg { width: 26px; height: 18px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* Visual side */
.hero-visual-v2 {
  position: relative; aspect-ratio: 1/1; min-height: 540px;
  overflow: hidden;
}
.hero-blob-frame {
  position: absolute; inset: 0;
  background: var(--red-soft);
  border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
  transform: rotate(-3deg); z-index: 0;
}
.hero-photo-v2 {
  position: absolute; inset: 16px;
  background: center/cover no-repeat;
  border-radius: 64% 36% 58% 42% / 52% 50% 50% 48%;
  z-index: 1;
  box-shadow: 0 30px 60px -30px rgba(40,20,20,.25);
  animation: blob-morph 14s ease-in-out infinite;
}
.hero-photo-v2.hero-slider { overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
@keyframes blob-morph {
  0%,100% { border-radius: 64% 36% 58% 42% / 52% 50% 50% 48%; }
  33%      { border-radius: 56% 44% 64% 36% / 58% 42% 58% 42%; }
  66%      { border-radius: 48% 52% 42% 58% / 50% 60% 40% 50%; }
}

/* Free sticker */
.free-sticker {
  position: absolute; top: 4%; right: 0;
  width: 130px; height: 130px;
  background: var(--yellow); border-radius: 50%;
  display: grid; place-items: center; text-align: center; z-index: 3;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  color: var(--ink); line-height: 1.1;
  box-shadow: 0 12px 24px -8px rgba(180,140,30,.5);
  transform: rotate(-8deg);
  animation: float-y 6s ease-in-out infinite;
}
.free-sticker::before {
  content: ""; position: absolute; inset: 6px;
  border: 1.5px dashed rgba(0,0,0,.25); border-radius: 50%;
}
.free-sticker .big   { font-size: 26px; line-height: 1; }
.free-sticker .small { font-size: 10px; letter-spacing: .14em; margin-top: 2px; }
.free-sticker .jp    { font-family: "Noto Sans JP", sans-serif; font-size: 11px; margin-top: 4px; opacity: .9; }
@keyframes float-y { 0%,100%{transform:rotate(-8deg) translateY(0)} 50%{transform:rotate(-8deg) translateY(-8px)} }

/* People card */
.people-card {
  position: absolute; right: -12px; bottom: 28px;
  background: linear-gradient(180deg,#fff,#FFFBFA);
  border: 1px solid #F1ECEC;
  border-radius: 22px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 38px -16px rgba(40,20,20,.22); z-index: 3; max-width: 260px;
}
.people-card .avs { display: flex; }
.people-card .avs .av {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff; background: #ddd center/cover no-repeat;
  margin-left: -10px; box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.people-card .avs .av:first-child { margin-left: 0; }
.people-card .txt { font-size: 11.5px; line-height: 1.5; color: #2e2e2e; }
.people-card .txt b { color: var(--red); font-weight: 800; font-size: 13px; }

/* Hero floating decorations */
.hero-dot-cluster {
  position: absolute; top: 90px; right: -10px;
  width: 80px; height: 80px; z-index: 1;
  background-image: radial-gradient(circle, var(--red) 2.2px, transparent 2.5px);
  background-size: 12px 12px; opacity: .6;
}
.hero-dot-cluster.left {
  left: 44%; top: auto; bottom: 60px;
  background-image: radial-gradient(circle, var(--yellow) 2.5px, transparent 2.8px);
  opacity: 1;
}
.hero-squiggle-v2 {
  position: absolute; top: 40%; left: 50%;
  color: var(--red); width: 60px; z-index: 1; opacity: .5;
}

/* ===== TRUST BAR ===== */
.trust-bar {
  background: linear-gradient(180deg,#FDF8F7 0%,#FBF5F4 100%);
  padding: 70px 0 76px;
  border-top: 1px solid #f3eeee;
  border-bottom: 1px solid #f3eeee;
}
.trust-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 18px; max-width: 1080px; margin: 0 auto 36px;
}
.trust-cell {
  background: #fff; border-radius: 18px; padding: 22px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 6px 18px -12px rgba(159,43,58,.15);
  border: 1px solid rgba(159,43,58,.08);
}
.trust-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red-soft), #fff);
  display: grid; place-items: center; color: var(--red);
}
.trust-icon svg { width: 22px; height: 22px; }
.trust-text { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.4; }
.trust-text .en {
  display: block; font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600; font-size: 10.5px; color: var(--red);
  letter-spacing: .14em; margin-bottom: 2px;
}
.lang-row {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap; max-width: 980px;
  margin: 0 auto; padding-top: 6px;
}
.lang-row .label {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: .24em; color: var(--red);
  text-transform: uppercase; white-space: nowrap;
}
.flags { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.flag-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #2e2e2e; }
.flag-svg { width: 28px; height: 20px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.1); flex-shrink: 0; }

/* ===== SECTION BASE ===== */
.section { padding: 90px 0; position: relative; overflow: hidden; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 { font-size: 38px; margin: 12px 0 0; letter-spacing: .04em; line-height: 1.4; }
.section-head p { color: #4a4a4a; font-size: 14.5px; margin: 16px 0 0; line-height: 1.95; max-width: 620px; margin-inline: auto; }
.section-head .accent-script {
  font-family: "Allura", cursive; font-weight: 400; color: var(--red);
  font-size: 28px; line-height: 1; display: block; margin-bottom: -4px;
  opacity: .85; letter-spacing: .01em;
}

/* ===== DECORATIVE BLOBS ===== */
.deco { position: absolute; pointer-events: none; z-index: 0; }
/* Dot-pattern decorations removed sitewide (readability) */
.hero-dot-cluster,
.services-section::before,
.areas-section::before,
.deco.confetti-r,
.deco.confetti-l,
.deco.confetti,
.deco.blob-red-left,
.deco-jc,
.confetti-cta { display: none !important; }
.blob-red-left {
  left: -90px; width: 200px; height: 200px;
  background: var(--red);
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
}
.squiggle { color: var(--red); }
.confetti  { color: var(--yellow); }

/* ===== SERVICES ===== */
.services-section,
.services {
  padding: 120px 0 130px;
  background: #FFFEFC;
  position: relative;
}
.services-section::before {
  content: ""; position: absolute; pointer-events: none;
  width: 160px; height: 160px; right: 4%; top: 80px;
  background-image: radial-gradient(circle, rgba(159,43,58,.5) 2px, transparent 2.4px);
  background-size: 14px 14px; z-index: 0;
}
.services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.svc-card {
  background: #fff; border-radius: 24px; padding: 24px 22px 28px;
  box-shadow: 0 4px 14px -10px rgba(40,20,20,.16); border: 1px solid #F1ECEC;
  position: relative; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .25s;
  text-align: center;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -28px rgba(40,20,20,.22), 0 8px 20px -12px rgba(159,43,58,.10); border-color: rgba(159,43,58,.18); }
.svc-icon {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red-soft), #fff);
  box-shadow: inset 0 0 0 1px rgba(159,43,58,.1);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.svc-icon svg { width: 26px; height: 26px; color: var(--ink-2); }
.svc-photo {
  aspect-ratio: 1 / 0.75;
  background: #eee center/cover no-repeat;
  border-radius: 56% 44% 60% 40% / 50% 56% 44% 50%;
  margin: 6px auto 22px;
  max-width: 100%;
  transition: border-radius .6s cubic-bezier(.2,.8,.2,1);
}
.svc-photo--face { background-position: center 28%; }
.services-grid .svc-card:nth-child(1) .svc-photo--face { background-position: center 22%; }
.services-grid .svc-card:nth-child(2) .svc-photo--face { background-position: center 18%; }
.svc-card:hover .svc-photo { border-radius: 44% 56% 50% 50% / 60% 44% 56% 40%; }
.svc-card h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 17px; margin: 0 0 10px; letter-spacing: .01em; }
.svc-card p  { margin: 0; font-size: 13px; color: #666; line-height: 1.85; }

/* ===== STRENGTHS ===== */
.strengths-section { padding: 110px 0 130px; background: var(--bg); }
.strengths-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; max-width: 980px; margin: 0 auto; }
.strength { text-align: center; position: relative; transition: transform .25s; }
.strength:hover { transform: translateY(-4px); }
.strength-blob {
  width: 112px; height: 96px; margin: 0 auto 14px;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.strength-blob .blob-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, #FBE6E9, #F0D9DD 70%);
  border-radius: 58% 42% 50% 50% / 50% 60% 40% 50%; z-index: 0;
  transition: border-radius .6s cubic-bezier(.2,.8,.2,1);
}
.strength:hover .strength-blob .blob-bg { border-radius: 48% 52% 60% 40% / 60% 40% 60% 40%; }
.strength-blob > svg { position: relative; z-index: 1; width: 32px; height: 32px; color: var(--ink-2); }
.strength h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 18px; margin: 0 0 10px; }
.strength p  { font-size: 13px; color: #666; line-height: 1.9; margin: 0; max-width: 250px; margin-inline: auto; }

/* ===== WAGAYA ADVANTAGE ===== */
.wagaya-advantage {
  padding: 130px 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(159,43,58,.06), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(248,212,94,.10), transparent 45%),
    #fff;
  position: relative; overflow: hidden;
}
.wadv-head { text-align: center; max-width: 780px; margin: 0 auto 70px; }
.wadv-head .eyebrow { display: block; margin-bottom: 18px; }
.wadv-head h2 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 40px; letter-spacing: .03em; line-height: 1.4; margin: 0 0 22px; }
.wadv-head h2 .acc { color: var(--red); }
.wadv-head p { font-size: 15px; color: #444; line-height: 2; margin: 0; }
.wadv-parent {
  max-width: 880px; margin: 0 auto 60px;
  display: flex; align-items: center; gap: 22px;
  padding: 22px 28px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card);
}
.wadv-parent .label {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .25em; color: var(--red); background: var(--red-soft);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.wadv-parent .title { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 17px; flex: 1; }
.wadv-parent .title .en { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 400; color: #888; font-size: 13px; margin-left: 10px; }
.wadv-parent a.link { color: var(--red); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wadv-parent a.link:hover { text-decoration: underline; }
.wadv-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  max-width: 1080px; margin: 0 auto 80px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.wadv-stat { text-align: center; padding: 36px 16px; border-right: 1px solid var(--line); position: relative; }
.wadv-stat:last-child { border-right: 0; }
.wadv-stat .num { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 44px; letter-spacing: -.02em; line-height: 1; color: var(--red); }
.wadv-stat .num .unit { font-size: 18px; letter-spacing: 0; margin-left: 2px; font-weight: 700; }
.wadv-stat .label { margin-top: 10px; font-size: 12px; color: #555; letter-spacing: .04em; line-height: 1.5; }
.wadv-stat .sub { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 10px; color: #999; letter-spacing: .18em; margin-top: 4px; text-transform: uppercase; }
.wadv-diff { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
.wadv-card {
  position: relative; background: #fff; border-radius: 24px; padding: 32px 28px;
  border: 1px solid #F1ECEC;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
  box-shadow: 0 4px 14px -10px rgba(40,20,20,.16);
}
.wadv-card:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -28px rgba(40,20,20,.22), 0 8px 20px -12px rgba(159,43,58,.10); border-color: rgba(159,43,58,.18); }
.wadv-card .n { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .25em; color: var(--red); margin-bottom: 16px; }
.wadv-card h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 19px; line-height: 1.55; margin: 0 0 14px; }
.wadv-card h3 .hl { background: linear-gradient(transparent 60%, rgba(248,212,94,.45) 60%); padding: 0 2px; }
.wadv-card p { font-size: 13px; color: #555; line-height: 1.95; margin: 0; }

/* ===== SUPPORT FLOW ===== */
.flow-section { padding: 100px 0; background: #fff; position: relative; }
.flow-list {
  list-style: none;
  padding: 0;
  max-width: 980px;
  margin: 60px auto 0;
  position: relative;
  display: grid;
  gap: 18px;
}
.flow-step {
  list-style: none;
  width: 100%;
  box-sizing: border-box;
  display: grid; grid-template-columns: 100px 1fr auto;
  align-items: center; gap: 28px; padding: 28px 34px;
  background: #fff; border: 1px solid #F1ECEC; border-radius: 24px;
  position: relative; box-shadow: 0 4px 14px -10px rgba(40,20,20,.16);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
}
.flow-step:hover { transform: translateX(6px); box-shadow: 0 22px 44px -26px rgba(40,20,20,.18); border-color: rgba(159,43,58,.18); }
.flow-step .n {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 16px;
  letter-spacing: .15em; color: var(--red); position: relative;
}
.flow-step .n::before { content: "STEP"; display: block; font-size: 10px; letter-spacing: .3em; color: var(--muted); margin-bottom: 4px; }
.flow-step .n .big { display: block; font-size: 38px; letter-spacing: -.01em; line-height: 1; }
.flow-step h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 19px; margin: 0 0 8px; }
.flow-step p   { margin: 0; color: #555; font-size: 13.5px; line-height: 1.85; }
.flow-step .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--red-soft); display: grid; place-items: center; color: var(--red); flex-shrink: 0; }
.flow-step .ic svg { width: 26px; height: 26px; }

/* ===== JOB CATEGORIES ===== */
.jobcats-section {
  padding: 130px 0 140px;
  background: linear-gradient(180deg, #fff 0%, #FDF8F7 50%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.jobcats-section .deco-jc {
  position: absolute; left: -120px; top: 80px;
  width: 220px; height: 220px;
  background: var(--red-soft);
  border-radius: 56% 44% 60% 40% / 50% 60% 40% 50%;
  z-index: 0;
}
.jobcats-section > * { position: relative; z-index: 1; }
.jobcats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; max-width: 1080px; margin: 50px auto 0; }
.jobcat {
  position: relative; background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 4px 14px -10px rgba(40,20,20,.16); border: 1px solid #F1ECEC;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
}
.jobcat:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -28px rgba(40,20,20,.22), 0 8px 20px -12px rgba(159,43,58,.10); border-color: rgba(159,43,58,.18); }
.jobcat-photo { width: 100%; aspect-ratio: 4/3; background: #ddd center/cover no-repeat; position: relative; overflow: hidden; }
.jobcat-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.18)); pointer-events: none; }
.jobcat-tag {
  position: absolute; top: 14px; left: 14px;
  background: #fff; color: var(--red);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .18em; padding: 5px 12px; border-radius: 999px; text-transform: uppercase;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.15);
}
.jobcat-body { padding: 22px 24px 26px; }
.jobcat-body h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 18px; margin: 0 0 8px; letter-spacing: .02em; }
.jobcat-body h3 .en { font-family: "Plus Jakarta Sans", sans-serif; font-size: 11px; font-weight: 500; font-style: italic; color: var(--red); letter-spacing: .04em; margin-left: 8px; vertical-align: middle; }
.jobcat-body p { margin: 0; font-size: 12.5px; color: #555; line-height: 1.85; }
.jobcat-body .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.jobcat-body .badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-family: "Noto Sans JP", sans-serif; letter-spacing: .04em; }
.jobcat-body .badge.yellow { background: rgba(248,212,94,.25); color: #8a6b00; }
.jobcats-note { text-align: center; font-size: 13px; color: #555; margin-top: 36px; }
.jobcats-note b { color: var(--red); }

/* ===== WORRIES ===== */
.worries-section {
  padding: 120px 0 130px; position: relative;
  background: linear-gradient(180deg, #fff 0%, #FCF6F5 100%); overflow: hidden;
}
.worries-section::before {
  content: ""; position: absolute; right: -150px; top: 80px;
  width: 300px; height: 300px; background: var(--red-soft);
  border-radius: 56% 44% 60% 40% / 50% 60% 40% 50%;
  opacity: .7; z-index: 0;
}
.worries-section > .wrap { position: relative; z-index: 1; }
.worries-grid { max-width: 900px; margin: 50px auto 0; display: grid; gap: 18px; }
.worry {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center; background: #fff;
  padding: 22px 28px; border-radius: 18px; border: 1px solid #F0E8E8;
  box-shadow: 0 8px 24px -16px rgba(40,20,20,.14);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.worry:hover { transform: translateY(-3px); border-color: rgba(159,43,58,.2); box-shadow: 0 16px 36px -22px rgba(159,43,58,.2); }
.worry .q { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14.5px; color: #3a3a3a; position: relative; padding-left: 28px; }
.worry .q::before { content: "?"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #FFF0E5; color: #B85800; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.worry .arrow { color: var(--red); font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 800; }
.worry .a { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 14.5px; color: var(--ink); padding-left: 28px; position: relative; }
.worry .a::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4 10-10'/></svg>"); background-position: center; background-repeat: no-repeat; background-size: 13px; }

/* ===== MID CTA STRIP ===== */
.cta-strip { padding: 56px 0 60px; background: #fff; position: relative; }
.cta-strip-card {
  max-width: 1100px; margin: 0 auto;
  background: linear-gradient(135deg, #FFF7F2 0%, #FCEEEC 100%);
  border: 1px solid rgba(159,43,58,.15); border-radius: 24px;
  padding: 36px 44px; display: grid; grid-template-columns: 1fr auto;
  gap: 30px; align-items: center; position: relative; overflow: hidden;
}
.cta-strip-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; background: rgba(248,212,94,.4); border-radius: 50%; z-index: 0; }
.cta-strip-card > * { position: relative; z-index: 1; }
.cta-strip-card .copy h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 22px; margin: 0 0 6px; letter-spacing: .02em; line-height: 1.5; }
.cta-strip-card .copy h3 .ac { color: var(--red); }
.cta-strip-card .copy p { margin: 0; font-size: 13px; color: #555; line-height: 1.7; }
.cta-strip-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-strip-buttons .btn-primary,
.cta-strip-buttons .btn-line { padding: 14px 22px; font-size: 14px; }
.cta-role-label { display: block; text-align: center; font-size: 11px; color: #666; margin-top: 8px; font-weight: 600; letter-spacing: .02em; }
.cta-role-label.line { color: #06853A; }
.cta-role-label.red  { color: var(--red); }
.cta-pair { display: inline-flex; flex-direction: column; align-items: stretch; }

/* ===== SUPPORTED AREAS ===== */
.areas-section {
  padding: 120px 0 130px;
  background: var(--bg-tint); position: relative;
  overflow: hidden;
}
.areas-section::before {
  content: ""; position: absolute; pointer-events: none;
  width: 200px; height: 130px; left: 4%; top: 70px;
  background-image: radial-gradient(circle, rgba(248,212,94,.85) 2.4px, transparent 2.8px);
  background-size: 14px 14px; z-index: 0;
}
.areas-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 22px; max-width: 1080px; margin: 50px auto 0;
}
.area-card {
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 4px 14px -10px rgba(40,20,20,.16); border: 1px solid #F1ECEC;
  display: grid; grid-template-columns: 200px 1fr; align-items: stretch;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
}
.area-card:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -28px rgba(40,20,20,.22); border-color: rgba(159,43,58,.18); }
.area-card--static {
  cursor: default;
  pointer-events: none;
}
.area-card--static:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--line);
}
.area-card--static .area-link { display: none; }
.area-photo {
  background: #ddd center/cover no-repeat;
  position: relative; min-height: 200px;
  border-top-left-radius: 24px; border-bottom-left-radius: 24px;
}
.area-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,.04)); }
.area-photo .area-jp-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.95); color: var(--red);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .15em; padding: 4px 10px; border-radius: 999px;
}
.area-body { padding: 24px 26px; display: flex; flex-direction: column; }
.area-body h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 19px; margin: 0 0 6px; }
.area-body .en { font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; color: var(--red); letter-spacing: .1em; margin-bottom: 12px; }
.area-prefs { font-size: 12.5px; color: #555; margin: 0 0 14px; line-height: 1.7; }
.area-link {
  margin-top: auto; color: var(--red); font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  transition: gap .2s;
}
.area-link:hover { gap: 10px; }
.area-link svg { width: 14px; height: 14px; transition: transform .2s; }

/* ===== VOICES ===== */
.voices-section {
  padding: 130px 0;
  background: linear-gradient(180deg, #fff 0%, #FBF7F6 100%);
  position: relative;
}
.voices-section::before {
  content: ""; position: absolute; pointer-events: none;
  width: 80px; height: 60px; right: 6%; top: 90px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60'><path d='M4 30 C 16 8, 28 50, 40 30 S 64 12, 76 30' stroke='%239F2B3A' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") no-repeat;
  opacity: .55;
}
.voices-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1080px; margin: 50px auto 0; }
.voice-card {
  background: #fff; border: 1px solid #F1ECEC; border-radius: 24px; padding: 28px 28px;
  position: relative; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
  box-shadow: 0 4px 14px -10px rgba(40,20,20,.16);
}
.voice-card:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -28px rgba(40,20,20,.22); border-color: rgba(159,43,58,.18); }
.voice-quote { position: absolute; top: 8px; right: 18px; font-family: "Allura", cursive; font-size: 80px; color: rgba(159,43,58,.12); line-height: 1; }
.voice-flag-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.voice-avatar { width: 48px; height: 48px; border-radius: 50%; background: #ddd center/cover no-repeat; flex-shrink: 0; }
.voice-meta .name { font-weight: 700; font-size: 14px; }
.voice-meta .job  { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.voice-card h4 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 17px; line-height: 1.55; margin: 0 0 12px; color: var(--ink); }
.voice-card p  { font-size: 13px; color: #555; line-height: 1.95; margin: 0; }
.voice-card .rating { margin-top: 16px; color: var(--yellow); font-size: 14px; letter-spacing: 2px; }

/* ===== FAQ ===== */
.faq-section { background: var(--bg-tint); padding: 130px 0 140px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 50px; align-items: start; }
.faq-illustration { position: relative; aspect-ratio: 1/1.1; }
.faq-photo { position: absolute; bottom: 0; left: 30px; width: 78%; aspect-ratio: 1/1.2; background: center/cover no-repeat; border-radius: 52% 48% 42% 58% / 58% 42% 60% 40%; overflow: hidden; }
.bubble { position: absolute; background: var(--red-soft); padding: 16px 22px; border-radius: 50%; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink-2); text-align: center; line-height: 1.3; box-shadow: 0 6px 18px -8px rgba(0,0,0,.15); }
.bubble::after { content: ""; position: absolute; width: 22px; height: 22px; background: inherit; border-radius: 50%; }
.bubble.yellow { background: var(--yellow-soft); }
.bubble.b1 { top: 30px; left: 0; }
.bubble.b1::after { bottom: -8px; left: 30%; width: 14px; height: 14px; }
.bubble.b2 { top: 10px; right: 0; }
.bubble.b2::after { bottom: -8px; left: 40%; width: 14px; height: 14px; }
.bubble.b3 { top: 130px; right: -20px; }
.bubble.b3::after { bottom: -8px; left: 30%; width: 14px; height: 14px; }
.faq-section .section-head { text-align: left; margin-left: 0; margin-bottom: 28px; }
.faq-section .section-head h2 { font-size: 36px; }
.faq-item { background: #fff; border: 1px solid #F0E8E8; border-radius: 16px; margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.faq-item:hover { border-color: rgba(159,43,58,.25); }
.faq-item[open] { border-color: rgba(159,43,58,.35); box-shadow: 0 14px 28px -16px rgba(159,43,58,.18); }
.faq-item summary { display: flex; align-items: center; gap: 16px; padding: 22px 26px; list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 600; min-height: 64px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-mark { color: var(--red); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-style: italic; font-size: 18px; width: 18px; flex-shrink: 0; }
.faq-toggle { margin-left: auto; width: 30px; height: 30px; border: 1.5px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: transform .25s, color .2s; flex-shrink: 0; }
.faq-toggle svg { width: 14px; height: 14px; }
.faq-item[open] .faq-toggle { transform: rotate(45deg); color: var(--red); border-color: var(--red); }
.faq-body { padding: 0 24px 22px 58px; color: #555; font-size: 13.5px; line-height: 1.95; }
.faq-more { display: flex; justify-content: flex-end; margin-top: 20px; }
.faq-more a { color: var(--red); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }

/* ===== FINAL CTA ===== */
.cta-section { padding: 60px 0 130px; }
.cta-card {
  position: relative;
  background:
    radial-gradient(circle at 12% 18%, rgba(248,212,94,.18), transparent 45%),
    var(--red);
  border-radius: 32px; padding: 64px 60px; overflow: hidden; color: #fff;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 30px;
  box-shadow: 0 30px 60px -30px rgba(159,43,58,.5);
}
.cta-card::before { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; background: rgba(255,255,255,.06); border-radius: 50%; }
.cta-card .eyebrow { color: var(--yellow); }
.cta-card .eyebrow::before { background: var(--yellow); }
.cta-card h2 { font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 40px; margin: 14px 0 18px; letter-spacing: .02em; }
.cta-card p { margin: 0 0 30px; font-size: 15px; opacity: .95; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.cta-buttons .cta-pair { display: inline-flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cta-section .cta-buttons .btn-ghost { background: #fff; color: var(--red); border: 1.5px solid #fff; }
.cta-section .cta-buttons .btn-line { background: var(--green-line); border-color: var(--green-line); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,0,0,.3); }
.cta-microcopy {
  margin-top: 22px; font-size: 12.5px; opacity: .92;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 8px 16px;
}
.cta-microcopy::before { content: ""; width: 14px; height: 14px; background: var(--yellow); border-radius: 50%; display: inline-block; }
.cta-trust-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.85); font-weight: 600; }
.cta-trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.cta-trust-row svg { width: 13px; height: 13px; color: var(--yellow); }
.cta-photo-wrap { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: 52%; aspect-ratio: 1/0.62; }
.cta-photo-wrap > div { width: 100%; height: 100%; background: center/cover no-repeat; border-radius: 55% 45% 50% 50% / 60% 40% 60% 40%; position: relative; overflow: hidden; }
.cta-card .confetti-cta { position: absolute; right: 30%; top: 60%; color: var(--yellow); }

/* ===== FOOTER ===== */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 28px 0; font-size: 13px; }
/* ロゴは縮めない・ナビは残り幅で折り返す・SNSは右端。3者が重ならないようにする */
.site-footer .wrap { display: flex; align-items: center; gap: 40px; }
.site-footer .logo { flex: 0 0 auto; }
.footer-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px 28px; color: #444; font-weight: 600; flex-wrap: wrap; }
.footer-nav a:hover { color: var(--red); }
.footer-social { flex: 0 0 auto; margin-left: auto; display: flex; gap: 14px; align-items: center; }
.footer-social a { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); }
/* コピーライトは1行下げて中央揃え（.wrap のflexを打ち消す） */
.site-footer .footer-bottom { display: block; }
.footer-copy { display: block; margin: 20px 0 0; text-align: center; color: #999; font-size: 12px; }

/* ===== STICKY BOTTOM CTA ===== */
.sticky-cta {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-radius: 999px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.22), 0 6px 16px -8px rgba(159,43,58,.18);
  padding: 8px; gap: 8px; border: 1px solid #f0e8e8;
}
.sticky-cta a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 0; border-radius: 999px; font-weight: 800; font-size: 13px; white-space: nowrap;
}
.sticky-cta .red   { background: var(--red); color: #fff; }
.sticky-cta .green { background: var(--green-line); color: #fff; }
.sticky-cta .blue { background: #1877F2; color: #fff; }
.sticky-cta svg { width: 14px; height: 14px; }

/* VI: Facebook blue (JS + CSS fallback) */
body[data-lang="vi"] [data-contact-chat] {
  background: #1877F2 !important;
  border-color: #1877F2 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -10px rgba(24,119,242,.55) !important;
}
body[data-lang="vi"] [data-contact-chat]:hover {
  background: #166FE5 !important;
}
body[data-lang="vi"] .hero-cta-v2 [data-contact-chat] {
  box-shadow: 0 14px 28px -10px rgba(24,119,242,.5) !important;
}
body[data-lang="vi"] [data-contact-sticky] {
  background: #1877F2 !important;
}

/* ===== SCROLL ANIMATIONS ===== */
@media (prefers-reduced-motion: no-preference) {
  .svc-card, .feature, .jobcat, .voice-card, .area-card, .wadv-card, .strength, .flow-step {
    animation: fadeup .8s cubic-bezier(.2,.8,.2,1) backwards;
  }
  .services-grid > :nth-child(1) { animation-delay: .05s; }
  .services-grid > :nth-child(2) { animation-delay: .12s; }
  .services-grid > :nth-child(3) { animation-delay: .19s; }
  .services-grid > :nth-child(4) { animation-delay: .26s; }
  .jobcats-grid > :nth-child(1) { animation-delay: .05s; }
  .jobcats-grid > :nth-child(2) { animation-delay: .12s; }
  .jobcats-grid > :nth-child(3) { animation-delay: .19s; }
  .jobcats-grid > :nth-child(4) { animation-delay: .26s; }
  .jobcats-grid > :nth-child(5) { animation-delay: .33s; }
  .jobcats-grid > :nth-child(6) { animation-delay: .40s; }
  @keyframes fadeup { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
}

/* ===== RESPONSIVE 1100px ===== */
@media (max-width: 1100px) {
  .hero-title-v2 { font-size: 50px; }
  .hero-script-v2 { font-size: 18px; }
  .hero-sub-jp { font-size: 18px; }
  .hero-visual-v2 { min-height: 460px; }
  .free-sticker { width: 110px; height: 110px; }
}

/* ===== RESPONSIVE 980px ===== */
@media (max-width: 980px) {
  .hero { padding: 40px 0 80px; overflow-x: clip; }
  .hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .hero-script-v2,
  .hero-title-v2 { white-space: normal; line-height: 1.08; }
  .hero-cta-v2 .btn-big { white-space: normal; }
  .hero-title-v2 { font-size: 54px; }
  .hero-visual-v2 { min-height: 380px; max-width: 480px; margin: 0 auto; }
  .free-sticker { right: 0; }
  .people-card { right: 0; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .strengths-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .flow-step { grid-template-columns: 80px 1fr; gap: 18px; padding: 24px 22px; }
  .flow-step .ic { display: none; }
  .flow-step .n .big { font-size: 28px; }
  .areas-grid { grid-template-columns: 1fr; }
  .area-card { grid-template-columns: 140px 1fr; }
  .voices-grid { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; padding: 44px 28px; }
  .cta-photo-wrap { position: relative; right: auto; top: auto; transform: none; width: 100%; }
  .faq-grid { grid-template-columns: 1fr; }
  .wadv-stats { grid-template-columns: repeat(2,1fr); }
  .wadv-stat:nth-child(2n) { border-right: 0; }
  .wadv-stat { border-bottom: 1px solid var(--line); }
  .wadv-stat:last-child { border-bottom: 0; }
  .wadv-diff { grid-template-columns: 1fr; }
  .wadv-head h2 { font-size: 28px; }
  .wadv-parent { flex-direction: column; align-items: flex-start; }
  .jobcats-grid { grid-template-columns: repeat(2,1fr); }
}

/* ===== RESPONSIVE 768px (mobile) ===== */
@media (max-width: 768px) {
  .hero { padding: 28px 0 60px !important; }
  .trust-bar { padding: 40px 0 44px !important; }
  .services, .services-section,
  .strengths-section, .wagaya-advantage,
  .jobcats-section, .areas-section,
  .voices-section, .faq-section,
  .flow-section, .worries-section { padding: 64px 0 !important; }
  .cta-strip { padding: 32px 0 !important; }
  .cta-section { padding: 30px 0 80px !important; }
  .section-head { margin-bottom: 36px !important; }
  .section-head h2 { font-size: 24px !important; line-height: 1.45 !important; }
  .section-head p  { font-size: 13px !important; line-height: 1.85 !important; }
  .section-head .accent-script { font-size: 22px !important; }
  .wrap { padding: 0 18px !important; }

  /* Header */
  .site-header .wrap { height: 64px !important; }
  .header-cta .btn-primary,
  .header-cta .btn-line { display: none !important; }
  .header-cta { gap: 8px !important; }
  .lang-switcher { margin-right: 0 !important; }
  .lang-switcher-trigger { padding: 8px 11px !important; min-height: 40px; }
  .logo .mark-svg { width: 36px !important; height: 36px !important; }
  .logo-text { font-size: 16px !important; }

  /* Hero — mobile production (About風・赤CTA) */
  .hero-bg-slide {
    position: absolute;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
  }
  .hero-bg-slide.is-active { opacity: 1; }
  .hero-bg-mobile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(40,15,15,.10) 0%, rgba(40,15,15,.55) 100%);
  }
  .hero {
    display: flex;
    flex-direction: column;
    padding: 0 0 40px !important;
    min-height: 0;
    background-image: none !important;
    background-color: var(--red) !important;
  }
  .hero-bg-mobile {
    display: block;
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    height: min(68vh, 420px);
    flex-shrink: 0;
  }
  .hero-bg-slide {
    inset: 0;
    transform: none;
    background-size: cover;
    background-position: center 30%;
  }
  .hero .wrap {
    margin-top: calc(-1 * min(68vh, 420px));
    padding-top: min(68vh, 420px);
    position: relative;
    z-index: 2;
  }
  .hero-copy-head {
    min-height: calc(min(68vh, 420px) - 32px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 32px;
  }
  .hero-copy-body {
    margin-top: 28px;
    margin-left: -18px;
    margin-right: -18px;
    padding: 32px 18px 8px;
    background: var(--red);
  }
  .hero-copy-head .hero-stamp {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--red) !important;
    box-shadow: none !important;
  }
  .hero-copy-head .hero-stamp .pulse { background: var(--red); }
  .hero-copy-head .hero-stamp .pulse::after { border-color: var(--red); }
  .hero-copy-head .hero-script-v2 { color: var(--yellow) !important; }
  .hero-copy-head .hero-title-v2 { color: #fff !important; white-space: nowrap !important; font-size: clamp(28px, 9.2vw, 44px) !important; letter-spacing: -.03em !important; }
  .hero-copy-head .hero-title-v2 .hl-yellow { color: var(--yellow); background: none; display: inline; }
  .hero-copy-head .hero-sub-jp { color: #fff !important; margin-bottom: 0 !important; }
  .hero-copy-head .hero-sub-jp .ac { color: var(--yellow) !important; }
  .hero-copy-body .hero-lead-v2 { color: rgba(255,255,255,.92) !important; }
  .hero-copy-body .hero-lead-v2 b { color: #fff; }
  .hero-copy-body .anchor-chip {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.35);
    color: #fff;
    box-shadow: none;
  }
  .hero-copy-body .hero-hesitation { color: rgba(255,255,255,.82) !important; }
  .hero-copy-body .hero-hesitation .em { background: var(--yellow); color: var(--ink); }
  .hero-copy-body .hero-flags .label { color: var(--yellow) !important; }
  .hero-copy-body .hero-cta-v2 .btn-red {
    background: #fff;
    color: var(--red);
    box-shadow: 0 14px 28px -10px rgba(0,0,0,.22);
  }
  .hero-copy-body .hero-cta-v2 .btn-red:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -10px rgba(0,0,0,.28);
  }

  /* Hero — common mobile */
  .hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .hero-visual-v2 { display: none !important; }
  .hero-stamp { font-size: 10.5px !important; padding: 6px 12px 6px 10px !important; margin-bottom: 14px !important; }
  .hero-script-v2 { font-size: 13px !important; margin-bottom: 6px !important; white-space: normal !important; }
  .hero-title-v2 { font-size: clamp(28px, 9.2vw, 44px) !important; line-height: 1.08 !important; }
  .hero-sub-jp { font-size: 17px !important; margin-bottom: 10px !important; }
  .hero-lead-v2 { font-size: 13.5px !important; line-height: 1.95 !important; margin-bottom: 18px !important; }
  .anchor-chips { gap: 6px !important; margin-bottom: 22px !important; justify-content: center !important; }
  .anchor-chip { font-size: 11.5px !important; padding: 7px 12px !important; }
  .hero-cta-v2 { flex-direction: column !important; gap: 12px !important; }
  .hero-cta-v2 .cta-pair { width: 100% !important; }
  .hero-cta-v2 .btn-big { width: 100% !important; padding: 18px 22px !important; font-size: 15px !important; justify-content: center !important; min-height: 56px; }
  .hero-cta-v2 .badge-free { top: -8px !important; right: 8px !important; font-size: 9px !important; }
  .hero-hesitation { margin-top: 18px !important; gap: 8px 16px !important; font-size: 11.5px !important; justify-content: center !important; }
  .hero-flags { margin-top: 14px !important; }
  .hero-dot-cluster, .hero-squiggle-v2, .hero::before, .hero::after { display: none !important; }

  /* Trust bar */
  .trust-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; margin-bottom: 24px !important; }
  .trust-cell { padding: 14px 12px !important; gap: 10px !important; flex-direction: column !important; text-align: center !important; }
  .trust-icon { width: 38px !important; height: 38px !important; }
  .lang-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center;
  }
  .flags {
    gap: 10px 14px !important;
    justify-content: center !important;
    width: 100%;
  }
  .flag-chip { font-size: 11px !important; gap: 5px !important; }
  .hero-flags {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center;
  }
  .hero-flags .flag-list { justify-content: center !important; flex-wrap: wrap; gap: 8px !important; }

  /* Grids */
  .services-grid, .strengths-grid, .voices-grid,
  .wadv-diff, .jobcats-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .svc-card, .voice-card, .wadv-card, .jobcat { padding: 18px 16px 20px !important; }
  .svc-icon { width: 40px !important; height: 40px !important; margin-bottom: 12px !important; }
  .svc-icon svg { width: 20px !important; height: 20px !important; }
  .svc-photo {
    width: min(48vw, 168px) !important;
    max-height: 120px !important;
    aspect-ratio: 1 / 0.85 !important;
    margin: 2px auto 14px !important;
  }
  .jobcat-photo { aspect-ratio: 16/10 !important; }
  .jobcat-body { padding: 18px 20px 22px !important; }
  .strength-blob { width: 64px !important; height: 56px !important; margin-bottom: 10px !important; }
  .strength-blob > svg { width: 24px !important; height: 24px !important; }
  .strength h3 { font-size: 16px !important; margin-bottom: 8px !important; }
  .strength p { font-size: 12.5px !important; line-height: 1.75 !important; }
  .strengths-grid { gap: 24px !important; }

  /* wagaya Advantage */
  .wadv-stats { grid-template-columns: repeat(2,1fr) !important; margin-bottom: 36px !important; }
  .wadv-stat { padding: 24px 10px !important; }
  .wadv-stat .num { font-size: 32px !important; }

  /* Flow */
  .flow-list {
    margin-top: 36px !important;
    padding: 0 !important;
    width: 100%;
  }
  .flow-step {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 20px !important;
    text-align: center;
    justify-items: center;
  }
  .flow-step:hover { transform: none !important; }
  .flow-step .n { justify-self: center; }
  .flow-step > div:not(.n):not(.ic) { width: 100%; max-width: 100%; }
  .flow-step .ic { display: none !important; }
  .flow-step .n .big { font-size: 24px !important; }
  .flow-step h3 { font-size: 16px !important; }

  /* Worries */
  .worry { grid-template-columns: 1fr !important; gap: 8px !important; padding: 16px 18px !important; }
  .worry .arrow { display: none !important; }

  /* Areas */
  .areas-grid { gap: 14px !important; }
  .area-card { grid-template-columns: 1fr !important; }
  .area-photo {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    background-size: cover !important;
    background-position: center !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .area-body { padding: 20px 22px 22px !important; }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr !important; }
  .faq-illustration { display: none !important; }
  .faq-item summary { padding: 20px 18px !important; font-size: 13.5px !important; min-height: 56px; gap: 14px !important; }
  .faq-body { padding: 0 18px 20px 48px !important; font-size: 12.5px !important; }

  /* CTA strip */
  .cta-strip-card { grid-template-columns: 1fr !important; padding: 24px 22px !important; gap: 18px !important; }
  .cta-strip-buttons { flex-direction: column; width: 100%; }
  .cta-strip-buttons .btn-primary,
  .cta-strip-buttons .btn-line { width: 100%; justify-content: center; min-height: 48px; padding: 14px 22px !important; }

  /* Final CTA */
  .cta-card { grid-template-columns: 1fr !important; padding: 36px 24px !important; border-radius: 22px !important; }
  .cta-card h2 { font-size: 26px !important; }
  .cta-photo-wrap { position: relative !important; right: auto !important; top: auto !important; transform: none !important; width: 100% !important; aspect-ratio: 16/9; margin-top: 16px; }
  .cta-buttons { flex-direction: column !important; width: 100%; }
  .cta-buttons .cta-pair { width: 100%; }
  .cta-buttons .btn-ghost,
  .cta-buttons .btn-line { width: 100% !important; justify-content: center; padding: 16px 22px !important; min-height: 52px; }

  /* Footer */
  .site-footer { padding: 24px 0 100px !important; }
  .site-footer .wrap { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
  .site-footer .footer-bottom { display: block !important; }
  .footer-nav { flex-wrap: wrap; gap: 14px 18px !important; font-size: 12.5px !important; }

  /* Sticky CTA */
  .sticky-cta { display: flex !important; left: 10px !important; right: 10px !important; bottom: 10px !important; }
  .sticky-cta a { padding: 14px 0 !important; font-size: 13.5px !important; min-height: 46px; font-weight: 800 !important; }
  .sticky-cta svg { width: 16px !important; height: 16px !important; }
  body { padding-bottom: 86px !important; }

  /* AIO summary */
  .aio-summary { padding: 30px 0 8px; }
  .aio-summary-card { padding: 24px 22px 26px; }
  .aio-summary-card h2 { font-size: 17px; }
  .aio-summary-card ul { grid-template-columns: 1fr; }

  /* Reduce animations on mobile */
  .hero-photo-v2 { animation-duration: 24s !important; }
}

/* ===== RESPONSIVE 430px ===== */
@media (max-width: 430px) {
  .hero-title-v2 { font-size: 40px !important; }
  .hero-sub-jp { font-size: 16px !important; }
  .section-head h2 { font-size: 22px !important; }
  .anchor-chip { font-size: 11px !important; padding: 6px 10px !important; }
  .hero-cta-v2 .btn-big { font-size: 14.5px !important; }
  .hero-visual-v2 { max-width: 320px !important; }
  .free-sticker { width: 78px !important; height: 78px !important; }
  .free-sticker .big { font-size: 16px !important; }
  .people-card { max-width: 170px !important; }
}

/* ===== RESPONSIVE 375px ===== */
@media (max-width: 375px) {
  .wrap { padding: 0 14px !important; }
  .hero-title-v2 { font-size: 36px !important; }
  .hero-sub-jp { font-size: 15px !important; }
  .hero-lead-v2 { font-size: 12.5px !important; }
  .section-head h2 { font-size: 20px !important; }
  .hero-stamp { font-size: 9.5px !important; }
  .hero-cta-v2 .btn-big { font-size: 14px !important; }
  .sticky-cta a { font-size: 12.5px !important; }
  .free-sticker { width: 70px !important; height: 70px !important; }
  .free-sticker .big { font-size: 14px !important; }
  .people-card { max-width: 160px !important; }
}