/* ==========================================================================
   DC推進機構 — Site-wide design tokens & base
   ========================================================================== */

:root {
  /* Color */
  --ink: #0a0a0c;
  --ink-2: #151417;
  --ink-3: #1e1c20;
  --red: #dc000c;
  --red-deep: #7a0008;
  --red-glow: #ff2f3a;
  --paper: #f3f1ec;
  --paper-dim: #e7e3da;
  --white: #f6f5f2;
  --mist: #9a979e;
  --mist-dim: #58555c;
  --line: rgba(246, 245, 242, 0.12);
  --line-strong: rgba(246, 245, 242, 0.24);

  /* Type */
  --font-jp: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-accent: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-utility: "Space Grotesk", "Zen Kaku Gothic New", sans-serif;

  /* Scale */
  --gutter: clamp(24px, 5vw, 96px);
  --radius: 2px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-jp);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--red-glow);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 14px 24px;
  background: var(--red);
  color: #f6f5f2;
  font-family: var(--font-utility);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Eyebrow label system ------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-utility);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--red), transparent);
}

.eyebrow.on-light {
  color: var(--mist-dim);
}

/* Signature: red beam underline ---------------------------------------- */

.beam-rule {
  width: 64px;
  height: 3px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-glow) 55%, transparent 100%);
}

/* Faceted corner (from the DCP mark's cut geometry) --------------------- */

.facet {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

/* ==========================================================================
   Preloader (logo → laser beams → hero reveal)
   ========================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: preloader-out 0.7s ease forwards;
  animation-delay: 2.35s;
}

.preloader-logo {
  width: clamp(220px, 30vw, 420px);
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(0.88);
  animation:
    preloader-logo-in 0.6s ease forwards,
    preloader-logo-out 0.35s ease forwards;
  animation-delay: 0.15s, 1.25s;
}

.preloader-beams {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.preloader-beams span {
  --angle: -28deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180vmax;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,150,130,1) 30%, #fff 50%, rgba(255,25,35,1) 70%, transparent 100%);
  filter: brightness(1.15) saturate(1.2);
  transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0);
  transform-origin: center;
  opacity: 0;
  animation: preloader-beam-sweep 0.6s cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
}

.preloader-beams span:nth-child(1) {
  --angle: -30deg;
  animation-delay: 1.3s;
}

.preloader-beams span:nth-child(2) {
  --angle: -30deg;
  height: 1.5px;
  opacity: 0;
  animation-delay: 1.46s;
}

.preloader-beams span:nth-child(3) {
  --angle: -24deg;
  height: 5px;
  animation-delay: 1.58s;
}

@keyframes preloader-logo-in {
  to { opacity: 1; transform: scale(1); }
}

@keyframes preloader-logo-out {
  to { opacity: 0; transform: scale(1.06); }
}

@keyframes preloader-beam-sweep {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0); }
  14% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(1); }
}

@keyframes preloader-out {
  to { opacity: 0; visibility: hidden; }
}

.hero-copy {
  opacity: 0;
  transform: translateX(-70px);
  animation: hero-copy-in 0.85s cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
  animation-delay: 3.1s;
  /* Forces a persistent GPU compositing layer for the whole animation.
     Without this, iOS Safari has been seen to leave part of the animated
     text (the eyebrow + first heading line) unpainted after the transform/
     opacity animation finishes, even though the final computed style is
     correct — a known WebKit repaint-on-composite bug. */
  will-change: opacity, transform;
}

.hero .scroll-cue {
  opacity: 0;
  animation: hero-fade-in 0.6s ease forwards;
  animation-delay: 3.6s;
}

@keyframes hero-copy-in {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-fade-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    animation: none !important;
    display: none !important;
  }
  .preloader-logo,
  .preloader-beams span,
  .hero-copy,
  .hero .scroll-cue,
  .block-label,
  .hero-steps li {
    animation: none !important;
    opacity: 1 !important;
  }
  .preloader-logo,
  .preloader-beams span,
  .hero-copy,
  .hero .scroll-cue,
  .hero-steps li {
    transform: none !important;
  }
  .block-label {
    transform: translate(-50%, -50%) !important;
  }
}

/* Skip the intro on return visits within the session */
html.preloaded .preloader {
  display: none !important;
}

/* Return visits within the session skip the preloader, but the copy still
   slides in — just on a short delay instead of waiting on the intro. */
html.preloaded .hero-copy {
  animation-delay: 0.2s;
}

html.preloaded .hero .scroll-cue {
  animation-delay: 0.7s;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 22px 0;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(10, 10, 12, 0.88);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  border-color: var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand img {
  height: 26px;
  width: auto;
}

.brand-text {
  font-family: var(--font-utility);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.3;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.brand:hover .brand-text {
  color: var(--red);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 28px);
}

.main-nav a {
  position: relative;
  font-family: var(--font-utility);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--white);
  padding: 6px 2px;
  white-space: nowrap;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width 0.3s ease;
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  width: 100%;
}

/* Diagonal red accent that drops in from the top on hover/active ---------- */

.main-nav a::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 3px;
  height: 20px;
  background: linear-gradient(180deg, var(--red-glow), var(--red));
  border-radius: 2px;
  transform: translateY(-50%) translateY(-22px) rotate(26deg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.24, 1), opacity 0.3s ease;
  pointer-events: none;
}

.main-nav a:hover::before,
.main-nav a[aria-current="page"]::before {
  transform: translateY(-50%) translateY(0) rotate(26deg);
  opacity: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--red);
  color: #f6f5f2;
  font-family: var(--font-utility);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-contact::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='m4 6.5 8 6.5 8-6.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.btn-contact:hover {
  background: var(--red-glow);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 14px 8px;
  box-sizing: border-box;
}

.nav-toggle span {
  height: 2px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile nav ------------------------------------------------------------ */

@media (max-width: 1200px) {
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    background: var(--ink);
    transform: translateX(100%);
    transition: transform 0.4s ease;
    gap: 28px;
    z-index: 100;
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .main-nav a {
    font-size: 20px;
  }

  .nav-toggle {
    display: flex;
  }

  body.nav-is-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.nav-is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.nav-is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .header-actions .btn-contact-label {
    display: none;
  }

  .btn-contact {
    padding: 12px;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Height is capped at the photo's own full-width height, so on anything but a
   very wide-and-short window the frame below lands exactly viewport-wide — no
   horizontal crop, and the empty left third of the photo stays free for the
   copy. Taller-than-that windows fall back to a vertically centred crop. */

.hero {
  position: relative;
  min-height: min(100svh, 100vw * 941 / 1672);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #f8f5ef 0%, #ece5d9 100%);
}

/* Stage — the photo lives in a frame that reproduces `object-fit: cover` by
   hand (anchored right, centred vertically). Doing the crop on a real box
   instead of on the <img> keeps the percentage-positioned .block-label pinned
   to its cube at every viewport size. */

.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-stage-frame {
  position: relative;
  flex: none;
  height: max(100%, 100vw * 941 / 1672);
  aspect-ratio: 1672 / 941;
  container-type: inline-size;
}

.hero-stage-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim that lifts the copy off the photo (desktop overlay layout only) */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(250, 247, 241, 0.94) 0%,
    rgba(250, 247, 241, 0.86) 24%,
    rgba(250, 247, 241, 0.42) 44%,
    rgba(250, 247, 241, 0) 60%
  );
}

/* Words on the cubes ------------------------------------------------------- */

.block-labels {
  position: absolute;
  inset: 0;
}

/* Laser-burn look: `multiply` lets the wood grain read straight through the
   glyphs, the dark warm ink is the char, and the 1px light shadow underneath
   is the lit lower lip of the engraved groove. */

.block-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8.2cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3cqw;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.26cqw;
  line-height: 1.34;
  letter-spacing: 0.02em;
  color: rgba(74, 38, 12, 0.9);
  mix-blend-mode: multiply;
  text-shadow:
    0 0 0.14cqw rgba(88, 44, 14, 0.55),
    0 0.06cqw 0 rgba(255, 248, 232, 0.5);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 0.9cqw)) scale(0.9);
  animation: block-label-in 0.62s cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
  animation-delay: calc(3.15s + var(--i) * 0.3s);
}

/* The red cube's mark is plain light type. An earlier version clipped the
   cube's own photo pixels through the glyphs for an engraved look, but that
   needed the label box and the mask to agree in cqw and rendered blurry, so
   the readable flat version won out. */

.block-label--red {
  display: block;
  height: 3.38cqw;
  font-size: 1.26cqw;
  line-height: 1.34;
  mix-blend-mode: normal;
  text-shadow: none;
}

.block-label--red > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Matches the engraved treatment of the wooden cubes' labels. Those use a dark
   glyph with multiply so it sinks into the grain; the red face is RGB(182,4,3),
   dark enough that a multiplied glyph would vanish, so the light glyph stays and
   the *shadows* carry the engraving instead — a soft dark-red groove plus the
   same lit lower lip the neighbours use. The old flat #fff6ea with a hard 1px
   black drop shadow is what read as pure white pasted on top of the cube.
   Sub-pixel alpha lets a trace of the red through so it belongs to the surface. */
.engrave-wall {
  color: rgba(255, 224, 214, 0.95);
  font-weight: 700;
  text-shadow:
    0 0 0.14cqw rgba(92, 6, 8, 0.7),
    0 0.06cqw 0 rgba(255, 238, 230, 0.38);
}

.block-icon {
  width: 1.88cqw;
  height: 1.88cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.06cqw 0 rgba(255, 248, 232, 0.5));
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@keyframes block-label-in {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

html.preloaded .block-label {
  animation-delay: calc(0.45s + var(--i) * 0.3s);
}

/* Small-screen stand-in for the cube words (see the ≤640px block below) */

.hero-steps {
  display: none;
  margin-top: 30px;
  flex-direction: column;
  gap: 9px;
}

.hero-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6d4620;
  opacity: 0;
  animation: hero-fade-in 0.5s ease forwards;
  animation-delay: calc(0.35s + var(--i) * 0.28s);
}

.step-icon {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.hero-steps .is-goal {
  color: var(--red);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 140px 76px;
}

.hero-copy {
  max-width: min(560px, 40vw);
}

.hero-eyebrow {
  color: var(--mist);
  margin-bottom: 26px;
}

.hero h1 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  line-height: 1.42;
  letter-spacing: 0.01em;
}

.hero h1 .accent {
  font-family: var(--font-accent);
  color: var(--red);
  font-weight: 600;
}

.hero-desc {
  margin-top: 30px;
  max-width: 520px;
  color: var(--mist);
  font-size: 15px;
  line-height: 2;
}

.hero-cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Hero — stacked layout: copy first, then the full uncropped photo ---------- */

@media (max-width: 1080px) {
  .hero {
    flex-direction: column;
    min-height: 0;
  }
  .hero-stage {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    display: block;
  }
  .hero-stage-frame {
    width: 100%;
    height: auto;
  }
  .hero-scrim,
  .hero .scroll-cue {
    display: none;
  }
  .hero-inner {
    order: 1;
    padding-block: 118px 34px;
  }
  .hero-copy {
    max-width: none;
  }
  .hero-eyebrow {
    margin-bottom: 18px;
  }
  .hero h1 {
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    line-height: 1.5;
  }
  .hero-desc {
    max-width: none;
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.95;
  }
  .hero-cta {
    margin-top: 30px;
  }
}

/* Below 640px the cubes render small, so label text/icons are clamped to a
   legible floor (see .block-label, .block-icon, .block-label--red) instead
   of swapping to a separate list. */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  background: var(--red);
  color: #f6f5f2;
  font-family: var(--font-utility);
  font-size: 14px;
  letter-spacing: 0.1em;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 30px -12px rgba(220,0,12,0.6);
}

.btn-primary .arrow {
  transition: transform 0.25s ease;
}

.btn-primary:hover {
  background: var(--red-glow);
  transform: translateY(-2px);
}

.btn-primary:hover .arrow {
  transform: translateX(4px);
}

.registration-note {
  margin-top: 20px;
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mist-dim);
  line-height: 1.7;
}

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--mist);
  writing-mode: vertical-rl;
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 46px;
  background: var(--line-strong);
  position: relative;
}

.scroll-cue::after {
  animation: scroll-line 2.2s ease-in-out infinite;
}

@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==========================================================================
   Section shells
   ========================================================================== */

.section {
  padding-block: clamp(64px, 8vw, 112px);
  position: relative;
}

.section-light {
  background: var(--paper);
  color: var(--ink);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 18px;
}

.section-head .lead {
  max-width: 380px;
  color: var(--mist);
  font-size: 14px;
  line-height: 1.9;
}

.section-light .section-head .lead {
  color: #6b6660;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: 0.14em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.section-light .link-more {
  border-color: rgba(10,10,12,0.2);
}

/* Mission ---------------------------------------------------------------- */

.mission {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

.mission-statement {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.mission-statement .accent {
  font-family: var(--font-accent);
  color: var(--red);
}

.mission-body p {
  font-size: 14.5px;
  color: var(--mist);
  line-height: 2;
  margin-bottom: 20px;
}

.mission-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .mission {
    grid-template-columns: 1fr;
  }
}

/* Service grid ------------------------------------------------------------ */

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  background: var(--ink);
  padding: 40px 28px;
  transition: background 0.35s ease;
}

.service-card:hover {
  background: var(--ink-3);
}

.service-tag {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--red);
}

.service-card h3 {
  margin-top: 20px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.6;
}

.service-card p {
  margin-top: 14px;
  font-size: 13px;
  color: var(--mist);
  line-height: 1.9;
}

@media (max-width: 980px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

/* News list ---------------------------------------------------------------- */

.news-list {
  border-top: 1px solid var(--line);
}

.news-item {
  display: grid;
  grid-template-columns: 140px 100px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.25s ease;
}

/* .news-item is reused as a real link both on the homepage preview and on
   the full news.html list, so it always gets the hover fade. */
.news-item:hover {
  opacity: 0.7;
}

/* Full list (news.html) — adds a thumbnail column */
.news-item--full {
  grid-template-columns: 64px 120px 100px 1fr auto;
}

.news-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--line);
}

/* No article photo — fall back to the company mark instead of an empty cell */
.news-thumb--logo {
  object-fit: contain;
  padding: 10px;
}

.news-date {
  font-family: var(--font-utility);
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.04em;
}

.news-cat {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--red);
  border: 1px solid rgba(220,0,12,0.4);
  padding: 5px 10px;
  text-align: center;
  width: fit-content;
}

.news-title {
  font-size: 14.5px;
  font-weight: 700;
}

.news-arrow {
  color: var(--mist);
}

@media (max-width: 640px) {
  .news-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .news-arrow { display: none; }
  .news-item--full .news-thumb { display: none; }
}

/* Case strip ---------------------------------------------------------------- */

.case-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.case-strip::-webkit-scrollbar {
  display: none;
}

/* Sized by its content. The card used to be a fixed 260px with the text pinned
   to the bottom, which left a ~108px hole under the absolutely-positioned
   industry label; mobile then needed padding-top:52px so that label wouldn't
   land on the heading. The label is gone, so both workarounds go with it and
   flex stretch keeps the row even. */
/* Max width is set by the longest heading: at 340px the inner text box was 286px
   while "株式会社M&A総合研究所 / 従業員500名超" needs 299px, so that one card
   wrapped to two lines on desktop while phones (full-width cards) kept it on one.
   364px leaves 312px of text width — 13px of slack over the current longest
   heading. A noticeably longer company name would wrap again and want this
   raising to match. */
.case-card {
  flex: 0 0 clamp(240px, 30vw, 364px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 26px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/* Mobile: a swipeable strip reads as broken without a visible "more" cue —
   stack the cards instead so every one is fully visible without scrolling. */
@media (max-width: 640px) {
  .case-strip {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .case-card {
    flex: none;
    width: 100%;
    /* Trimmed from 26px so the longest heading clears one line on a 375px
       screen: full-width cards leave 275px of text there against the 299px that
       heading wants, and the padding is the only slack available. */
    padding: 24px 20px;
  }
}

.case-card h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.case-card p {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--mist);
  line-height: 1.8;
}

/* Paired with the reduced padding above, this keeps every heading on a single
   line at 375px and up. It has to sit *after* the base `.case-card h3` rule:
   same specificity means the later declaration wins, and inside the earlier
   media query it was being overridden and silently did nothing. */
@media (max-width: 640px) {
  .case-card h3 {
    font-size: 0.94rem;
  }
}

/* Plan tabs (プラン紹介) ------------------------------------------------------- */

.plan-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 1px;
}

.plan-tab-btn {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 26px;
  background: var(--ink);
  text-align: left;
  transition: background 0.25s ease;
}

.plan-tab-btn:hover {
  background: var(--ink-3);
}

.plan-tab-btn.is-active {
  background: var(--ink-2);
  box-shadow: inset 0 -2px 0 var(--red);
}

.plan-tab-btn-name {
  font-size: 15px;
  font-weight: 700;
}

.plan-tab-status {
  flex-shrink: 0;
  font-family: var(--font-utility);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid;
  white-space: nowrap;
}

.plan-tab-status.is-open {
  color: var(--red);
  border-color: rgba(220, 0, 12, 0.4);
}

.plan-tab-status.is-closed {
  color: var(--mist-dim);
  border-color: var(--line-strong);
}

.plan-tab-panel {
  display: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: none;
  padding: clamp(28px, 4vw, 48px);
}

.plan-tab-panel.is-active {
  display: block;
}

.plan-tab-panel h3 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
}

.plan-tab-panel .plan-tag {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mist-dim);
  margin-bottom: 12px;
  display: block;
}

.plan-tab-panel p {
  margin-top: 16px;
  font-size: 14px;
  color: var(--mist);
  line-height: 1.9;
  max-width: 640px;
}

.plan-tab-panel .link-more {
  margin-top: 24px;
}

.plan-links {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.plan-links .link-more {
  margin-top: 0;
}

.plan-note {
  margin-top: 40px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  font-size: 13px;
  color: var(--mist);
  line-height: 1.9;
}

/* FAQ accordion (よくある質問) ------------------------------------------------ */

.faq-list {
  max-width: 900px;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

/* Wraps .faq-q so each question is a real heading for assistive tech (WAI-ARIA
   accordion pattern); reset since the button already carries all the type styling. */
.faq-q-heading {
  font: inherit;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 6px;
  text-align: left;
  transition: color 0.2s ease;
}

.faq-q:hover {
  color: var(--red);
}

.faq-q-mark {
  flex-shrink: 0;
  font-family: var(--font-utility);
  font-size: 18px;
  font-weight: 600;
  color: var(--red);
  line-height: 1.5;
}

.faq-q-text {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.faq-q-icon {
  flex-shrink: 0;
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 7px;
}

.faq-q-icon::before,
.faq-q-icon::after {
  content: "";
  position: absolute;
  background: var(--red);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-q-icon::before {
  left: 0;
  top: 50%;
  width: 16px;
  height: 2px;
  transform: translateY(-50%);
}

.faq-q-icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 16px;
  transform: translateX(-50%);
}

.faq-item.is-open .faq-q-icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-a-inner {
  display: flex;
  gap: 18px;
  padding: 0 6px 28px;
}

.faq-a-mark {
  flex-shrink: 0;
  font-family: var(--font-utility);
  font-size: 18px;
  font-weight: 600;
  color: var(--mist-dim);
  line-height: 1.6;
}

.faq-a-body {
  flex: 1;
  min-width: 0;
}

.faq-a-body > * + * {
  margin-top: 1.4em;
}

.faq-a-text {
  font-size: 14px;
  color: var(--mist);
  line-height: 2;
}

/* FAQ answers that carry a data table (e.g. the social-insurance example) ---- */

.faq-table-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}

.faq-table-wrapper {
  overflow-x: auto;
}

.faq-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}

.faq-table th,
.faq-table td {
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--line);
  color: var(--mist);
}

.faq-table th {
  color: var(--white);
  font-weight: 700;
  background: var(--ink-2);
}

.faq-table-note {
  font-size: 12px;
  color: var(--mist-dim);
}

/* FAQ answers that carry a supporting image ----------------------------------- */

.faq-sub-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}

.faq-img-note {
  font-size: 12px;
  color: var(--mist-dim);
}

.faq-img {
  max-width: 100%;
  border: 1px solid var(--line);
  cursor: zoom-in;
}

.img-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 24px;
  background: rgba(10, 10, 12, 0.86);
  cursor: zoom-out;
  overflow: auto;
  overscroll-behavior: contain;
}

.img-lightbox.is-open {
  display: flex;
}

/* Shown at full size and scrolled rather than shrunk to fit: capping it at 100%
   of the viewport made the enlarged view *smaller* than the inline thumbnail on
   desktop (0.81x), so opening it lost detail instead of gaining it. `margin:auto`
   centres it while there is room and, unlike align-items:center, doesn't make the
   overflowing top unreachable once there isn't. */
.img-lightbox img {
  margin: auto;
  max-width: none;
  max-height: none;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.img-lightbox-close {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 245, 242, 0.92);
  color: #0a0a0c;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* On a phone the tall diagram capped at 100% height came out barely larger than
   the thumbnail (1.14x), so "タップして拡大" changed nothing readable. Here it
   renders wider than the screen and the overlay scrolls, which is what actually
   makes the ※ footnotes legible — hence the explicit close button, since the
   image now covers the backdrop you would otherwise tap to dismiss. */
@media (max-width: 640px) {
  .img-lightbox {
    padding: 0;
  }

  .img-lightbox img {
    width: 190vw;
    height: auto;
  }
}

/* FAQ answers with a merit/demerit style comparison list ---------------------- */

.faq-sub-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-sub-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}

.faq-sub-text-top {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}

.faq-sub-text-bottom {
  margin-top: 4px;
  font-size: 14px;
  color: var(--mist);
  line-height: 1.9;
}

.faq-sub-text-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mist-dim);
}

/* News article (news/*.html detail pages) ------------------------------------ */

.news-article {
  max-width: 820px;
}

.news-article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.news-article-meta time {
  font-family: var(--font-utility);
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.04em;
}

/* Always shown whole, uncropped — object-fit: contain regardless of the
   source's own aspect ratio (portrait manga page, wide charts/photos, etc). */
.news-article-photo {
  width: auto;
  max-width: 100%;
  max-height: 640px;
  object-fit: contain;
  display: block;
  margin-inline: auto;
  margin-bottom: 12px;
  background: var(--ink-2);
  border: 1px solid var(--line);
}

.news-article-photo-caption {
  text-align: center;
  font-size: 12px;
  color: var(--mist-dim);
  margin-bottom: 32px;
}

.news-back-link {
  margin-top: 40px;
}

.news-article-btn {
  display: flex;
  width: fit-content;
  margin-top: 28px;
}

.news-article-photo-link {
  display: block;
}

/* Company info table (about.html) --------------------------------------------- */

.company-body {
  max-width: 820px;
}

.company-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.company-table {
  width: 100%;
  border-collapse: collapse;
}

.company-table th,
.company-table td {
  padding: 22px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.company-table th {
  width: 140px;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.company-table td {
  font-size: 14px;
  color: var(--mist);
  line-height: 1.9;
}

.company-registration {
  margin-top: 48px;
  padding: 32px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 14.5px;
  line-height: 1.8;
}

.company-registration .signature {
  margin-top: 10px;
  font-size: 12px;
  text-align: right;
  color: var(--mist);
}

@media (max-width: 560px) {
  .company-table th,
  .company-table td {
    display: block;
    width: auto;
  }
  .company-table th {
    padding-bottom: 6px;
    border-bottom: none;
  }
  .company-table td {
    padding-top: 0;
  }
}

/* Legal prose (privacy policy / solicitation policy) ------------------------- */

.legal-body {
  max-width: 820px;
}

.legal-body > p {
  font-size: 14px;
  color: var(--mist);
  line-height: 2;
  margin-bottom: 24px;
}

.legal-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 56px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.legal-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  background: var(--red);
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 36px;
  margin-bottom: 14px;
  color: var(--white);
}

.legal-body h3 .num {
  color: var(--red);
  font-family: var(--font-utility);
  margin-right: 8px;
}

.legal-body p {
  font-size: 14px;
  color: var(--mist);
  line-height: 2;
  margin-bottom: 16px;
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-body li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--mist);
  line-height: 1.85;
}

.legal-body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--red);
}

.legal-body ol {
  counter-reset: legal-counter;
}

.legal-body ol > li {
  counter-increment: legal-counter;
}

.legal-body ol > li::before {
  content: counter(legal-counter);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-utility);
  font-size: 12px;
  color: var(--red);
}

.legal-contact {
  margin-top: 20px;
  padding: 24px 28px;
  background: var(--ink-2);
  border: 1px solid var(--line);
}

.legal-contact p {
  margin-bottom: 6px;
  font-size: 13.5px;
}

.legal-contact p:last-child {
  margin-bottom: 0;
}

.legal-contact strong {
  color: var(--white);
}

.legal-contact a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-date {
  margin-top: 48px;
  font-size: 13px;
  color: var(--mist-dim);
  text-align: right;
}

.legal-table-wrapper {
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}

.legal-table th,
.legal-table td {
  padding: 16px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--line);
}

.legal-table th {
  color: var(--white);
  font-weight: 700;
  background: var(--ink-2);
}

/* The label column only ever holds a short heading ("業務内容", "利用目的"), so
   pin it narrow and let the long 個人情報の利用目的 copy use the rest. The width
   used to sit on every th, which made the browser treat both columns as equally
   wide and split the table 50/50 — cramping the copy while the labels sat in
   half-empty cells. */
.legal-table th:first-child,
.legal-table td:first-child {
  width: 132px;
}

.legal-table td {
  color: var(--mist);
  line-height: 1.9;
}

.legal-note {
  font-size: 12px;
  color: var(--mist-dim);
}

/* Case entries (導入企業紹介) ------------------------------------------------- */

.case-entries {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.case-entry {
  background: var(--ink);
  padding: 40px clamp(24px, 4vw, 48px);
}

.case-entry-photo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  margin: 20px 0;
}

.case-entry-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.case-entry-photo-row {
  display: flex;
  gap: 6px;
}

/* Paired shots mix portrait and landscape originals, so `cover` on a fixed 4/3
   box silently guillotined the tall ones (it cut the clock off the top of the
   天神地下街 staff photo). `contain` shows each frame whole and letterboxes the
   leftover space instead. */
.case-entry-photo-row img {
  flex: 1;
  min-width: 0;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--ink-2);
}

.case-entry-photo-caption {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--mist-dim);
}

.case-entry-photo-inline {
  max-width: 320px;
  margin: 20px 0;
}

.case-entry-photo-inline img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

/* Every pairing mixes portrait and landscape originals, so forcing both into the
   same 4/3 box left a stark white letterbox around the tall frame. Giving the
   row a shared height and letting each photo keep its own width means neither is
   cropped nor padded. Declared before the phone query below so that query can
   override it — the reverse order silently lost, since equal specificity means
   whichever comes last wins. */
.case-entry-photo-row--auto {
  align-items: stretch;
  height: 220px;
}

.case-entry-photo-row--auto img {
  flex: 0 1 auto;
  width: auto;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  background: none;
}

@media (max-width: 480px) {
  .case-entry-photo-row {
    flex-direction: column;
  }

  .case-entry-photo-row img {
    aspect-ratio: 16 / 9;
  }

  /* Stacked, the row's 220px cap can't hold two full-height photos: they
     overflowed it and painted over the caption and the body copy below, and the
     portrait shot lost the top of its clock to object-fit: cover. Height goes
     back to the content so each photo sits whole in the column. */
  .case-entry-photo-row--auto {
    height: auto;
  }

  .case-entry-photo-row--auto img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

.case-entry-content {
  min-width: 0;
}

.case-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.case-entry-head h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
}

.case-entry-date {
  font-family: var(--font-utility);
  font-size: 12px;
  color: var(--mist-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.case-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.case-entry-meta div {
  display: flex;
  gap: 8px;
  font-size: 13px;
  align-items: baseline;
}

.case-entry-meta dt {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mist-dim);
  white-space: nowrap;
}

.case-entry-meta dd {
  color: var(--mist);
}

.case-entry-meta a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.case-entry-body p {
  font-size: 13.5px;
  color: var(--mist);
  line-height: 1.9;
  margin-bottom: 18px;
}

.case-entry-body p:last-child {
  margin-bottom: 0;
}

.case-entry-body strong {
  display: block;
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--red);
  margin-bottom: 8px;
}

/* Company facts strip (light, certificate feel) ----------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(10,10,12,0.15);
  border-bottom: 1px solid rgba(10,10,12,0.15);
}

.fact {
  padding: 34px 28px;
  border-left: 1px solid rgba(10,10,12,0.15);
}

.fact:first-child {
  border-left: none;
}

.fact .label {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #8f8a80;
}

.fact .value {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.8;
}

.fact .value strong {
  font-family: var(--font-accent);
  font-size: 1.3em;
  color: var(--red);
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .fact:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 560px) {
  .facts {
    grid-template-columns: 1fr;
  }
  .fact {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,12,0.15);
  }
  .fact:first-child {
    border-top: none;
  }
}

/* CTA banner ----------------------------------------------------------------- */

.cta-banner {
  position: relative;
  padding-block: clamp(80px, 14vw, 160px);
  text-align: center;
  background: linear-gradient(180deg, var(--ink) 0%, #1a0507 100%);
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(220,0,12,0.28), transparent 70%);
}

.cta-banner .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-banner h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.5;
  max-width: 720px;
}

.cta-banner .lead {
  margin-top: 24px;
  color: var(--mist);
  font-size: 14px;
  max-width: 460px;
}

/* One-sentence copy that reads better unbroken. The shared 460px cap folds it
   onto a second line; lifting the cap lets it sit on one line, and the
   container's own gutter still wraps it on narrow screens rather than
   overflowing (nowrap would). */
.cta-banner .lead--single {
  max-width: none;
}

.cta-banner .btn-primary {
  margin-top: 44px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding-block: 32px 32px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-bottom: 56px;
}

.footer-brand .brand {
  margin-bottom: 18px;
}

.footer-brand p {
  max-width: 320px;
  font-size: 12.5px;
  color: var(--mist);
  line-height: 1.9;
}

.footer-nav {
  display: flex;
  gap: clamp(32px, 5vw, 80px);
  flex-wrap: wrap;
}

.footer-nav-col h2 {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mist-dim);
  margin-bottom: 18px;
}

.footer-nav-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-col a {
  font-size: 13.5px;
  color: var(--mist);
  transition: color 0.2s ease;
}

.footer-nav-col a:hover {
  color: var(--white);
}

.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--mist-dim);
}

.footer-legal a:hover {
  color: var(--mist);
}

.footer-copy {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mist-dim);
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Simple page hero (interior pages)
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 140px 48px;
  background:
    radial-gradient(64% 110% at 100% 0%, rgba(220, 0, 12, 0.16), transparent 58%),
    linear-gradient(180deg, #141316 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--line);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero .eyebrow {
  margin-bottom: 22px;
}

.page-hero h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 700;
}

/* short red accent line under the heading */
.page-hero h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-glow) 55%, transparent 100%);
  transform-origin: left center;
  animation: accent-grow 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) 0.2s both;
}

@keyframes accent-grow {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero h1::after {
    animation: none;
  }
}

/* interior pages: tighten the gap between the hero title and the first section */
.page-hero + .section {
  padding-top: clamp(32px, 4vw, 48px);
}

.page-placeholder {
  padding-block: 120px;
  text-align: center;
}

.page-placeholder p {
  color: var(--mist);
  margin-top: 18px;
  font-size: 14px;
}

/* ==========================================================================
   Interior page components
   ========================================================================== */

/* Breadcrumb ---------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mist);
  margin-top: 20px;
}

.breadcrumb a:hover {
  color: var(--white);
}

/* Message (representative greeting) ----------------------------------------- */

.message-block {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.message-figure {
  aspect-ratio: 3/4;
  background: var(--ink-2);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-body p {
  font-size: 14.5px;
  color: var(--mist);
  line-height: 1.85;
  margin-bottom: 16px;
}

.message-body p:last-child {
  margin-bottom: 0;
}

.message-signature {
  margin-top: 20px;
  font-family: var(--font-utility);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--white);
}

.message-signature span {
  display: block;
  color: var(--mist);
  font-size: 12px;
  margin-bottom: 6px;
}

.message-block + .message-block {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--line);
}

/* Flip the column widths along with the visual side, so the photo always
   renders at the narrow (0.9fr) width — using `order` alone left the photo
   sitting in the wide 1.3fr column on even rows, ~1.44x too big. */
.message-block:nth-of-type(even) {
  grid-template-columns: 1.3fr 0.9fr;
}

.message-block:nth-of-type(even) .message-figure {
  order: 2;
}

@media (max-width: 860px) {
  /* The even-row rule above also sets grid-template-columns, and being a
     class+pseudo-class it outranks a bare `.message-block` here — so even rows
     stayed two-column on phones and crushed the text into a ~90px strip. Both
     selectors are listed so the single-column stack actually wins. */
  .message-block,
  .message-block:nth-of-type(even) {
    grid-template-columns: 1fr;
  }
  .message-block:nth-of-type(even) .message-figure {
    order: 0;
  }

  /* These are portrait headshots. A 16/9 box with object-fit:cover showed only
     a 39-53% horizontal band of each one and sliced the tops of heads off, so
     the frame follows the photo's own proportions instead. */
  .message-figure {
    aspect-ratio: auto;
    max-width: 260px;
  }

  .message-figure img {
    height: auto;
  }
}

/* Timeline (history) --------------------------------------------------------- */

.timeline {
  border-top: 1px solid var(--line);
}

.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
}

.timeline-date {
  font-family: var(--font-utility);
  font-size: 13px;
  color: var(--red);
  letter-spacing: 0.04em;
}

.timeline-text {
  font-size: 14.5px;
  color: var(--mist);
}

@media (max-width: 640px) {
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Value / strength grid ------------------------------------------------------ */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.value-card {
  background: var(--ink);
  padding: 40px 28px;
}

.value-index {
  font-family: var(--font-accent);
  font-size: 2rem;
  color: var(--red);
}

.value-card h3 {
  margin-top: 18px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.6;
}

.value-card p {
  margin-top: 14px;
  font-size: 13px;
  color: var(--mist);
  line-height: 1.9;
}

@media (max-width: 760px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* Line-icon badge on cards ---------------------------------------------------- */

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  border: 1px solid rgba(220, 0, 12, 0.4);
  color: var(--red);
  transition: background 0.35s ease, border-color 0.35s ease;
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.service-card:hover .card-icon,
.value-card:hover .card-icon {
  background: rgba(220, 0, 12, 0.12);
  border-color: rgba(220, 0, 12, 0.7);
}

/* Office address line --------------------------------------------------------- */

.office-address {
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--white);
  line-height: 1.7;
}

.office-address span {
  display: block;
  font-family: var(--font-utility);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--red);
  margin-bottom: 6px;
}

/* Steps flow (導入までの流れ) -------------------------------------------------- */

.step-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.step-item {
  background: var(--ink);
  padding: 38px 24px;
  position: relative;
}

.step-item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--red);
  border-right: 1px solid var(--red);
  transform: translate(50%, -50%) rotate(45deg);
  background: var(--ink);
}

.step-item:last-child::after {
  display: none;
}

.step-num {
  font-family: var(--font-accent);
  font-size: 2rem;
  line-height: 1;
  color: var(--red);
}

.step-item h3 {
  margin-top: 18px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.step-item p {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--mist);
  line-height: 1.85;
}

@media (max-width: 980px) {
  .step-flow {
    grid-template-columns: repeat(2, 1fr);
  }
  .step-item::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .step-flow {
    grid-template-columns: 1fr;
  }
}

/* Service detail rows --------------------------------------------------------- */

.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}

.service-detail:first-child {
  padding-top: 0;
}

.service-detail:last-child {
  border-bottom: none;
}

.service-detail:nth-child(even) .service-detail-figure {
  order: 2;
}

.service-detail-figure {
  aspect-ratio: 4/3;
  background: var(--ink-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mist-dim);
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.service-detail-tag {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--red);
}

.service-detail h3 {
  margin-top: 18px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
}

.service-detail p {
  margin-top: 18px;
  font-size: 14px;
  color: var(--mist);
  line-height: 2;
}

.service-detail-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-detail-list li {
  font-size: 13px;
  color: var(--mist);
  padding-left: 20px;
  position: relative;
}

.service-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 1px;
  background: var(--red);
}

@media (max-width: 780px) {
  .service-detail {
    grid-template-columns: 1fr;
  }
  .service-detail:nth-child(even) .service-detail-figure {
    order: 0;
  }
}

/* Filter tabs (news/case) ----------------------------------------------------- */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-tabs button {
  padding: 9px 20px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-tabs button:hover {
  color: var(--white);
  border-color: var(--mist);
}

.filter-tabs button.is-active {
  background: var(--red);
  border-color: var(--red);
  /* Hardcoded for the same reason as .form-submit above: var(--white)
     resolves to dark ink under the light theme and fails contrast on red. */
  color: #f6f5f2;
}

/* Recruit table --------------------------------------------------------------- */

.recruit-table {
  border-top: 1px solid var(--line);
}

.recruit-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--line);
}

.recruit-row dt {
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mist-dim);
}

.recruit-row dd {
  font-size: 14px;
  color: var(--mist);
  line-height: 1.9;
}

@media (max-width: 640px) {
  .recruit-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Contact form ------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.contact-info p {
  font-size: 14px;
  color: var(--mist);
  line-height: 2;
  margin-bottom: 28px;
}

.contact-info .fact {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.contact-info .fact:last-child {
  border-bottom: 1px solid var(--line);
}

.contact-info .label {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mist-dim);
}

.contact-info .value {
  margin-top: 10px;
  font-size: 14px;
  color: var(--white);
}

.form-field {
  margin-bottom: 24px;
}

.form-field label {
  display: block;
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  margin-bottom: 10px;
}

.form-field .required {
  color: var(--red);
  margin-left: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  color: var(--white);
  padding: 14px 16px;
  font-family: var(--font-jp);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--red);
}

.form-field textarea {
  min-height: 160px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--mist);
}

.form-check a {
  color: var(--red);
  text-decoration: underline;
}

.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 40px;
  background: var(--red);
  /* Hardcoded, not var(--white): that token flips to dark ink in the light
     theme (css/style-light.css), which would drop this below 4.5:1 on the
     saturated red background. */
  color: #f6f5f2;
  font-family: var(--font-utility);
  font-size: 14px;
  letter-spacing: 0.1em;
  transition: background 0.25s ease, transform 0.25s ease;
  margin-top: 12px;
}

.form-submit:hover {
  background: var(--red-glow);
  transform: translateY(-2px);
}

/* Held while the enquiry is in flight, so the form can't be double-submitted. */
.form-submit:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

.form-submit:disabled:hover {
  background: var(--red);
  transform: none;
}

/* Secondary action on the confirm screen ("戻る"), sitting next to
   .form-submit — outlined instead of filled so it doesn't compete with the
   primary "送信する" action. */
.form-back {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 40px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--white);
  font-family: var(--font-utility);
  font-size: 14px;
  letter-spacing: 0.1em;
  transition: background 0.25s ease, border-color 0.25s ease;
  margin-top: 12px;
  margin-right: 16px;
}

.form-back:hover {
  background: var(--ink-2);
  border-color: var(--mist);
}

.contact-confirm-list {
  margin-bottom: 8px;
}

.contact-confirm-list .form-field {
  margin-bottom: 20px;
}

.contact-confirm-list dt {
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mist);
  margin-bottom: 6px;
}

.contact-confirm-list dd {
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.contact-confirm-actions {
  display: flex;
  flex-wrap: wrap;
}

/* The status line carries a mailto fallback when sending fails. */
#contact-form-message a {
  color: var(--red);
  text-decoration: underline;
}

/* Document code search (書式ダウンロード) ------------------------------------ */

#doc-download {
  padding-top: clamp(80px, 10vw, 96px);
  padding-bottom: clamp(80px, 10vw, 96px);
}

.doc-search {
  max-width: 420px;
}

.doc-search-label {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.doc-search-row {
  display: flex;
  gap: 12px;
}

.doc-search-row input {
  flex: 1;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  color: var(--white);
  padding: 14px 16px;
  font-family: var(--font-utility);
  font-size: 14px;
  letter-spacing: 0.06em;
  transition: border-color 0.2s ease;
}

.doc-search-row input:focus {
  border-color: var(--red);
}

.doc-search-row button {
  padding: 14px 26px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-utility);
  font-size: 13px;
  letter-spacing: 0.08em;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.doc-search-row button:hover {
  background: var(--white);
}

.doc-search-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--mist-dim);
}

.doc-search-error {
  margin-top: 16px;
  font-size: 13px;
  color: var(--red);
  display: none;
}

.doc-results {
  margin-top: 64px;
  display: none;
}

.doc-results.is-active {
  display: block;
}

.doc-results-heading {
  font-size: 1.5rem;
  font-weight: 700;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--red);
  margin-bottom: 32px;
  display: inline-block;
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--ink-2);
  border: 1px solid var(--line);
}

.doc-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-utility);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Hardcoded for the same reason as .form-submit above: these badges sit on
     a saturated color regardless of theme, so var(--white) (dark ink under
     the light theme) would fail contrast. */
  color: #f6f5f2;
}

.doc-icon-pdf {
  background: #c8102e;
}

.doc-icon-xls {
  background: #1d7044;
}

.doc-title {
  flex: 1;
  font-size: 14.5px;
  font-weight: 700;
}

.doc-download-btn {
  flex-shrink: 0;
  padding: 10px 20px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.doc-download-btn:hover {
  background: var(--ink-3);
  border-color: var(--mist);
}

@media (max-width: 560px) {
  .doc-search-row {
    flex-direction: column;
  }
  .doc-item {
    flex-wrap: wrap;
  }
  .doc-download-btn {
    margin-left: auto;
  }
}