/* ============================================================
   Answer Rise — section components (shared across pages)
   ============================================================ */

/* ============================================================
   HERO (top page)
   ============================================================ */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 84px;
}
/* layered background */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(var(--line-on-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-navy) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 80% at 70% 30%, #000 0%, transparent 75%);
  opacity: .5;
}
.hero__glow {
  position: absolute; width: 70vmax; height: 70vmax; right: -18vmax; top: -22vmax;
  background: radial-gradient(circle, rgba(74,158,255,.30) 0%, transparent 62%);
  filter: blur(8px);
}
.hero__photo {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 52%;
  border-radius: 0;
}
.hero__photo .ph,
.hero__photo-img {
  width: 100%; height: 124%; top: -12%; position: absolute; right: 0; border-radius: 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
}
.hero__photo-img { object-fit: cover; }

/* ---- hero motion (gated on reduced-motion below) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo-img {
    animation: heroKenburns 26s ease-in-out infinite alternate;
    transform-origin: 72% 46%;
  }
  @keyframes heroKenburns {
    from { transform: scale(1.04); }
    to   { transform: scale(1.15) translateX(-2.5%); }
  }
  .hero__glow {
    animation: heroGlowDrift 16s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes heroGlowDrift {
    from { transform: translate(0, 0) scale(1); opacity: .85; }
    to   { transform: translate(-7%, 5%) scale(1.18); opacity: 1; }
  }
  .hero__grid {
    animation: heroGridPan 22s linear infinite;
    will-change: background-position;
  }
  @keyframes heroGridPan {
    from { background-position: 0 0; }
    to   { background-position: 72px 72px; }
  }
}
/* navy tint to harmonize the photo with the dark hero */
.hero__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--navy) 0%, rgba(26,26,46,.55) 30%, rgba(26,26,46,.10) 60%, transparent 100%),
    linear-gradient(0deg, rgba(26,26,46,.45) 0%, transparent 40%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__eyebrow { margin-bottom: 26px; }
.hero__title {
  font-family: var(--ff-en);
  font-weight: 800;
  font-size: clamp(48px, 10vw, 116px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
}
.hero__title .rise { color: var(--blue); display: block; }
.hero__jp {
  font-size: clamp(20px, 3.4vw, 32px);
  font-weight: 700;
  margin-top: 30px;
  letter-spacing: .02em;
}
.hero__sub {
  margin-top: 22px;
  font-size: clamp(15px, 1.9vw, 17px);
  color: var(--white-70);
  max-width: 46ch;
  line-height: 2;
}
.hero__cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; left: var(--pad); bottom: 28px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-en); font-size: 11px; letter-spacing: .22em; color: var(--white-45);
}
.hero__scroll i { width: 1px; height: 46px; background: var(--white-45); display: block; position: relative; overflow: hidden; }
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--blue);
  animation: scrolldrop 2s var(--ease) infinite;
}
@keyframes scrolldrop { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* hero load animation */
.hero__eyebrow, .hero__title, .hero__jp, .hero__sub, .hero__cta {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
body.loaded .hero__eyebrow { opacity: 1; transform: none; transition-delay: .05s; }
body.loaded .hero__title  { opacity: 1; transform: none; transition-delay: .15s; }
body.loaded .hero__jp     { opacity: 1; transform: none; transition-delay: .30s; }
body.loaded .hero__sub    { opacity: 1; transform: none; transition-delay: .42s; }
body.loaded .hero__cta    { opacity: 1; transform: none; transition-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__title, .hero__jp, .hero__sub, .hero__cta { opacity: 1; transform: none; }
  .hero__scroll i::after { animation: none; }
}

@media (max-width: 820px) {
  .hero { min-height: auto; padding-block: 130px 80px; }
  .hero__photo { display: none; }
  .hero__scroll { display: none; }
}

/* ============================================================
   STATS (WHY ANSWER-RISE)
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.stat {
  padding: clamp(36px, 5vw, 56px) clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.stat:nth-child(3n) { border-right: none; }
.stat__label { display: block; }
.stat__num {
  font-family: var(--ff-en);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 92px);
  line-height: 1;
  letter-spacing: -.03em;
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat__num .unit { font-size: .38em; color: var(--blue); letter-spacing: 0; }
.stat__num.is-concept { color: var(--blue); font-size: clamp(56px, 9vw, 92px); letter-spacing: -.02em; }
.stat__desc { margin-top: 18px; color: var(--ink-60); font-size: 14.5px; line-height: 1.9; }
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; }
}

/* ============================================================
   SERVICE cards
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc {
  border-radius: var(--r-card);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column;
  min-height: 340px;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.svc:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -28px rgba(26,26,46,.4); }
.svc--soft { background: var(--blue-soft); border-color: transparent; }
.svc--dark { background: var(--navy); border-color: transparent; color: #fff; }
.svc--dark .svc__desc { color: var(--white-70); }
.svc--dark .svc__more { color: var(--blue); }
.svc__no { font-family: var(--ff-en); font-size: 12px; letter-spacing: .16em; color: var(--ink-45); }
.svc--dark .svc__no { color: var(--white-45); }
.svc__en { font-family: var(--ff-en); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--blue); margin-top: 26px; }
.svc__title { font-size: clamp(22px, 2.6vw, 27px); margin-top: 12px; }
.svc__desc { margin-top: 16px; color: var(--ink-60); font-size: 14.5px; line-height: 1.95; flex: 1; }
.svc__more {
  font-family: var(--ff-en); font-weight: 600; font-size: 13px; letter-spacing: .08em;
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
}
.svc:hover .svc__more .arr { transform: translateX(4px); }
.svc__more .arr { transition: transform .25s var(--ease); }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } .svc { min-height: 0; } }

/* ============================================================
   MVV
   ============================================================ */
.mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.mvv__col { position: relative; padding-top: 30px; border-top: 2px solid var(--blue); }
.mvv__tag { font-family: var(--ff-en); font-weight: 800; font-size: 14px; letter-spacing: .18em; color: var(--blue); }
.mvv__lead { font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; line-height: 1.6; margin-top: 18px; letter-spacing: .01em; }
.mvv__body { margin-top: 18px; color: var(--white-70); font-size: 14.5px; line-height: 2; }
.mvv__values { margin-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.mvv__values li { display: flex; flex-direction: column; gap: 4px; }
.mvv__values .v-jp { font-weight: 700; font-size: 16px; color: #fff; }
.mvv__values .v-en { font-family: var(--ff-en); font-size: 12px; letter-spacing: .1em; color: var(--blue); }
@media (max-width: 820px) { .mvv { grid-template-columns: 1fr; gap: 36px; } }

/* ============================================================
   RECRUIT split
   ============================================================ */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.path {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  min-height: 420px; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 3vw, 44px); color: #fff;
  isolation: isolate;
}
.path__main { display: block; }
.path__bg { position: absolute; inset: 0; z-index: -2; }
.path__bg .ph { width: 100%; height: 100%; border-radius: 0; }
.path__img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.path::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,26,46,.92) 0%, rgba(26,26,46,.78) 38%, rgba(26,26,46,.68) 62%, rgba(26,26,46,.94) 100%);
}
.path__en { font-family: var(--ff-en); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--blue); }
.path__title { font-size: clamp(24px, 3vw, 30px); margin-top: 12px; }
.path__desc { margin-top: 14px; color: var(--white-70); font-size: 14.5px; line-height: 1.95; max-width: 38ch; }
.path__more {
  font-family: var(--ff-en); font-weight: 600; font-size: 13px; letter-spacing: .08em;
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
}
.path:hover .path__more .arr { transform: translateX(4px); }
.path__more .arr { transition: transform .25s var(--ease); }
@media (max-width: 720px) { .paths { grid-template-columns: 1fr; } .path { min-height: 300px; } }

/* perks chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  font-size: 12.5px; padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.10); border: 1px solid var(--line-on-navy); color: #fff;
}

/* ============================================================
   NEWS list
   ============================================================ */
.news { border-top: 1px solid var(--line); }
.news__item {
  display: grid; grid-template-columns: 130px 120px 1fr auto; gap: 24px; align-items: center;
  padding: 24px 8px; border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease), padding .25s var(--ease);
}
.news__item:hover { background: var(--blue-soft); padding-inline: 20px; }
.news__date { font-family: var(--ff-en); font-size: 14px; color: var(--ink-45); letter-spacing: .04em; }
.news__cat {
  justify-self: start; font-size: 11.5px; letter-spacing: .08em; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--navy); color: #fff;
}
.news__cat[data-cat="RECRUIT"] { background: var(--blue); }
.news__cat[data-cat="SERVICE"] { background: #2a8a5c; }
.news__cat[data-cat="PRESS"]   { background: var(--navy-500); }
.news__title { font-size: 15.5px; font-weight: 500; }
.news__arr { color: var(--ink-45); transition: transform .25s var(--ease); }
.news__item:hover .news__arr { transform: translateX(4px); color: var(--blue); }
@media (max-width: 720px) {
  .news__item { grid-template-columns: auto 1fr; grid-template-areas: "date cat" "title title"; gap: 8px 16px; }
  .news__date { grid-area: date; } .news__cat { grid-area: cat; } .news__title { grid-area: title; }
  .news__arr { display: none; }
}

/* ============================================================
   CONTACT CTA banner
   ============================================================ */
.cta-banner { position: relative; overflow: hidden; text-align: center; }
.cta-banner .hero__grid { opacity: .35; }
.cta-banner__inner { position: relative; z-index: 2; }
.cta-banner__en {
  font-family: var(--ff-en); font-weight: 800; font-size: clamp(34px, 6vw, 64px);
  line-height: 1.05; letter-spacing: -.01em;
}
.cta-banner__jp { margin-top: 20px; color: var(--white-70); font-size: clamp(15px, 2vw, 18px); }
.cta-banner__btns { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PAGE HERO (sub pages)
   ============================================================ */
.phero {
  position: relative; background: var(--navy); color: #fff; overflow: hidden;
  padding: clamp(140px, 18vw, 200px) 0 clamp(56px, 8vw, 88px);
}
.phero__inner { position: relative; z-index: 2; }
.crumb { display: flex; gap: 10px; font-family: var(--ff-en); font-size: 12px; letter-spacing: .08em; color: var(--white-45); margin-bottom: 24px; }
.crumb a:hover { color: #fff; }
.phero__en { font-family: var(--ff-en); font-weight: 800; font-size: clamp(40px, 8vw, 80px); line-height: 1; letter-spacing: -.01em; }
.phero__jp { margin-top: 18px; font-size: clamp(15px, 2vw, 18px); color: var(--white-70); }

/* generic prose blocks for sub pages */
.lead { font-size: clamp(20px, 3vw, 30px); font-weight: 700; line-height: 1.7; letter-spacing: .01em; }
.prose p { color: var(--ink-60); font-size: 15.5px; line-height: 2.1; }
.prose p + p { margin-top: 1.4em; }

/* spec table (company info) */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 22px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
.spec th { width: 200px; font-weight: 700; color: var(--ink); }
.spec td { color: var(--ink-60); }
@media (max-width: 600px) {
  .spec th, .spec td { display: block; padding: 0; border: none; }
  .spec th { padding-top: 20px; }
  .spec td { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
}

/* two-column feature row */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.feat--rev .feat__media { order: -1; }
.feat__media .ph { width: 100%; aspect-ratio: 4 / 3; }
.feat__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: var(--r-card); display: block; }
.feat__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); display: block; }
.feat__en { font-family: var(--ff-en); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--blue); }
.feat__title { font-size: clamp(24px, 3.4vw, 34px); margin-top: 14px; }
.feat__body { margin-top: 18px; color: var(--ink-60); font-size: 15px; line-height: 2.05; }
.feat__list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.feat__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.feat__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-top: 11px; flex: none; }
@media (max-width: 820px) {
  .feat { grid-template-columns: 1fr; gap: 28px; }
  .feat--rev .feat__media { order: 0; }
}

/* tabs */
.tabs { display: inline-flex; padding: 5px; background: var(--blue-soft); border-radius: var(--r-pill); gap: 4px; }
.tab {
  border: none; background: transparent; padding: 12px 28px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 14.5px; color: var(--ink-60); transition: background .25s var(--ease), color .25s var(--ease);
}
.tab.is-active { background: var(--navy); color: #fff; }
.panel { display: none; }
.panel.is-active { display: block; animation: fadeup .5s var(--ease); }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* cards grid (benefits etc.) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 30px 28px; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--blue); transform: translateY(-4px); }
.card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.card__ico {
  width: 46px; height: 46px; border-radius: 11px; flex: none;
  background: var(--blue-soft); color: var(--blue-700);
  display: grid; place-items: center;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.card:hover .card__ico { background: var(--blue); color: #fff; }
.card__ico svg { width: 25px; height: 25px; display: block; }
.card__no { font-family: var(--ff-en); font-size: 12px; letter-spacing: .14em; color: var(--blue); }
.card__title { font-size: 18px; margin-top: 14px; }
.card__body { margin-top: 12px; color: var(--ink-60); font-size: 14px; line-height: 1.95; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* technology category boxes */
.techgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.techcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 28px; transition: border-color .25s var(--ease);
}
.techcard:hover { border-color: var(--blue); }
.techcard__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
.techcard__en { font-family: var(--ff-en); font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--blue); }
.techcard__cat { font-weight: 700; font-size: 16px; }
.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-chip {
  font-size: 13px; padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--blue-soft); color: var(--ink); border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.techcard:hover .tech-chip { border-color: rgba(74,158,255,.25); }
@media (max-width: 700px) { .techgrid { grid-template-columns: 1fr; } }

/* ============================================================
   FORM
   ============================================================ */
.form { display: grid; gap: 26px; }
.field { display: grid; gap: 10px; }
.field label { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.req { font-family: var(--ff-en); font-size: 10px; letter-spacing: .08em; color: #fff; background: var(--blue); padding: 3px 8px; border-radius: 4px; }
.field input, .field textarea, .field select {
  font: inherit; padding: 15px 18px; border: 1.5px solid var(--line); border-radius: var(--r-card);
  background: #fff; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(74,158,255,.14);
}
.field.err input, .field.err textarea { border-color: #e1495a; }
.field__msg { font-size: 12.5px; color: #e1495a; min-height: 1em; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form__submit { display: flex; justify-content: center; margin-top: 10px; }
.form__ok {
  display: none; text-align: center; padding: 48px 24px; background: var(--blue-soft);
  border-radius: var(--r-card);
}
.form__ok.show { display: block; }
.form__ok h3 { font-size: 22px; }
.form__ok p { margin-top: 12px; color: var(--ink-60); }