/* NOTE(static-conversion): original line here was `@import "tailwindcss";`.
   That import is a Next.js/PostCSS build directive (resolves the Tailwind
   package at build time) — it is not a real stylesheet URL. This design
   uses zero Tailwind utility classes (grep confirmed no @apply / utility
   class usage anywhere in this file or page.tsx); all rules below are
   hand-written and self-contained. Left in place, browsers would issue a
   same-origin request for a literal file named "tailwindcss" and get a
   harmless 404 — but per the "no external/broken resource loads" self-check
   for this static conversion, the line is removed here. This is the ONLY
   character-level change made to this file; everything below this point
   is byte-for-byte identical to app/globals.css. */

:root {
  --brand: #203e95;
  --brand-deep: #0e245c;
  --brand-soft: #f4f8ff;
  --brand-line: #dbe7f7;
  --ink: #0f172a;
  --muted: #526075;
  --pale: #fafafa;
  --white: #ffffff;
  --cyan: #75b4de;
  --gold: #b89b5e;
  --lime: #d8f06f;
  --interaction-grad: linear-gradient(90deg, var(--brand) 0%, var(--cyan) 58%, var(--lime) 100%);
  --interaction-soft-grad: linear-gradient(90deg, rgba(32, 62, 149, 0.1) 0%, rgba(117, 180, 222, 0.2) 58%, rgba(216, 240, 111, 0.38) 100%);
  --interaction-label-grad: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(234, 243, 255, 0.95) 42%, rgba(216, 240, 111, 0.78) 100%);
  --violet: #7c8cff;
  --red: #c80000;
  --max-wide: 1400px;
  --max: 1180px;
  --gutter: clamp(18px, 4vw, 24px);
  --pointer-x: 50vw;
  --pointer-y: 40vh;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --scroll-progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--pale);
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.9;
}

body::selection {
  color: var(--white);
  background: var(--brand);
}

main {
  position: relative;
  isolation: isolate;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--brand), var(--cyan), var(--lime));
  box-shadow: 0 0 18px rgba(117, 180, 222, 0.55);
  transform: scaleX(var(--scroll-progress));
  transform-origin: left;
}

main,
section,
article,
figure,
div {
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
a,
span,
strong,
small,
dt,
dd,
li {
  overflow-wrap: anywhere;
}

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

img {
  display: block;
  max-width: 100%;
  /* width/height属性（CLS対策・2026-07-26付与）で縦横比だけ確保し、
     縮小時は比率を保つ。CSSでheight指定がある画像はそちらが優先される */
  height: auto;
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 18px var(--gutter) 0;
  transition: padding 0.24s ease;
}

.topbar-glass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--max-wide));
  height: 74px;
  padding: 0 20px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 14px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
  backdrop-filter: blur(16px);
  transition: height 0.24s ease, border-radius 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.topbar.is-scrolled {
  padding-top: 10px;
}

.topbar.is-scrolled .topbar-glass {
  height: 62px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.logo-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--white);
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--cyan));
  border-radius: 14px;
}

.logo-text {
  overflow: hidden;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.desktop-nav a {
  position: relative;
  color: var(--ink);
  transition: color 0.24s ease, background 0.24s ease, transform 0.24s ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.desktop-nav a.is-current {
  color: var(--brand);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a.is-current::after {
  transform: scaleX(1);
}

.desktop-nav .nav-pill {
  padding: 10px 18px;
  color: var(--white);
  background: var(--brand);
  border-radius: 999px;
}

.desktop-nav .nav-pill:hover,
.desktop-nav .nav-pill:focus-visible,
.desktop-nav .nav-pill.is-current {
  color: var(--white);
  transform: translateY(-2px);
  background: var(--brand-deep);
}

.desktop-nav .nav-pill::after {
  display: none;
}

.hero-bento {
  position: relative;
  min-height: 100svh;
  padding: 112px var(--gutter) 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(216, 240, 111, 0.22), transparent 26%),
    radial-gradient(circle at 90% 82%, rgba(117, 180, 222, 0.28), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #fafafa 82%);
}

.hero-panel {
  position: absolute;
  inset: 24px;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 48%, rgba(117, 180, 222, 0.42), transparent 24%),
    radial-gradient(circle at 94% 18%, rgba(216, 240, 111, 0.18), transparent 22%),
    linear-gradient(118deg, #ffffff 0%, #f6faff 36%, #e9f2ff 62%, #ffffff 100%),
    var(--brand-soft);
  border-radius: 44px;
  box-shadow: inset 0 0 0 1px rgba(32, 62, 149, 0.08), 0 30px 90px rgba(14, 36, 92, 0.12);
}

.hero-panel::before,
.hero-panel::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.hero-panel::before {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(110deg, transparent 0 56%, rgba(32, 62, 149, 0.08) 56% 57%, transparent 57%),
    repeating-linear-gradient(90deg, rgba(32, 62, 149, 0.04) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(0deg, rgba(32, 62, 149, 0.032) 0 1px, transparent 1px 86px);
  mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 100%);
}

.hero-panel::after {
  right: -18vw;
  bottom: -26vw;
  z-index: 1;
  width: 58vw;
  height: 58vw;
  background: conic-gradient(from 120deg, rgba(32, 62, 149, 0.22), rgba(117, 180, 222, 0.1), rgba(216, 240, 111, 0.22), rgba(32, 62, 149, 0.22));
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.75;
  animation: slowSpin 28s linear infinite;
}

.photo-slot {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100%;
  align-content: end;
  padding: clamp(30px, 4.5vw, 54px);
  overflow: hidden;
  color: var(--brand-deep);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(244, 248, 255, 0.54)),
    repeating-linear-gradient(135deg, rgba(32, 62, 149, 0.09) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #edf5ff 0%, #ffffff 48%, #dcecff 100%);
  border: 1px dashed rgba(32, 62, 149, 0.36);
  border-radius: inherit;
}

.photo-slot::before {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 92px;
  height: 64px;
  content: "";
  background:
    linear-gradient(135deg, transparent 45%, rgba(32, 62, 149, 0.22) 46% 54%, transparent 55%),
    linear-gradient(45deg, transparent 46%, rgba(117, 180, 222, 0.28) 47% 56%, transparent 57%);
  border: 1px solid rgba(32, 62, 149, 0.18);
  border-radius: 14px;
}

.photo-slot::after {
  position: absolute;
  inset: auto 24px 24px;
  height: 1px;
  content: "";
  background: rgba(32, 62, 149, 0.18);
}

.photo-slot span,
.photo-slot strong,
.photo-slot p {
  position: relative;
  z-index: 1;
  display: block;
  max-width: min(100%, 680px);
}

.photo-slot span {
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  padding: 0 14px;
  margin-bottom: 18px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 32px;
  overflow-wrap: normal;
  white-space: nowrap;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(32, 62, 149, 0.16);
  border-radius: 999px;
}

.photo-slot strong {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.4;
}

.photo-slot p {
  max-width: min(100%, 560px);
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(13px, 1.35vw, 16px);
  font-weight: 900;
  line-height: 1.9;
}

.hero-soft-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(250, 250, 250, 0.98) 0%, rgba(250, 250, 250, 0.82) 35%, rgba(250, 250, 250, 0.16) 70%),
    linear-gradient(180deg, rgba(244, 248, 255, 0.36) 0%, rgba(255, 255, 255, 0.36) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 4;
  /* 見出し・チップの左端を他セクションと同じ1180pxカラム（左130px）に揃える
     （2026-07-26 木村さん指摘: ヒーローだけ左67pxでズレて気持ち悪い） */
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  padding: 36px var(--gutter) 16px;
}

.kicker {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-content h1 {
  max-width: 9em;
  margin: 0;
  color: var(--ink);
  font-size: clamp(46px, 8vw, 98px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-shadow: 0 16px 42px rgba(15, 23, 42, 0.11);
}

.hero-content h1::after {
  display: block;
  width: min(54vw, 660px);
  height: 10px;
  margin-top: 22px;
  content: "";
  background: linear-gradient(90deg, var(--brand), var(--cyan), var(--lime), transparent);
  border-radius: 999px;
  transform-origin: left;
  animation: lineBreath 4.8s ease-in-out infinite;
}

.hero-lead {
  max-width: 720px;
  margin: 32px 0 0;
  color: var(--ink); /* 2026-07-26 再検証: 透過黒0.86は語彙外 → 純黒へ */
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.9;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 720px;
  margin-top: 28px;
}

.hero-proof span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 13px;
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: var(--w-medium); /* 2026-07-26 監査 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(32, 62, 149, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.scroll-note {
  position: absolute;
  right: clamp(36px, 5vw, 90px);
  bottom: 60px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scroll-note i {
  display: block;
  width: 68px;
  height: 1px;
  background: currentColor;
}

.section {
  padding: clamp(88px, 11vw, 150px) var(--gutter);
}

.section-title {
  position: relative;
  margin-bottom: 58px;
}

.section-title::before {
  position: absolute;
  top: -0.72em;
  left: -0.12em;
  z-index: -1;
  color: rgba(32, 62, 149, 0.045);
  font-size: clamp(84px, 13vw, 172px);
  font-weight: 900;
  line-height: 1.1;
  content: "MIRAI";
  pointer-events: none;
}

.section-title.center {
  text-align: center;
}

.section-title h2 {
  margin: 0;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
}

.section-title small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.title-line {
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 18px;
  background: var(--brand);
  border-radius: 999px;
}

.center .title-line {
  margin-right: auto;
  margin-left: auto;
}

.mission-card,
.value-card,
.service-feature,
.company-table {
  background: var(--white);
  border: 1px solid rgba(219, 231, 247, 0.85);
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
}

.label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--brand);
  border-radius: 999px;
}

.mission-card p,
.value-card p,
.message-copy p,
.service-feature p,
.social-inner p,
.recruit-card p {
  margin: 0;
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  font-size: 15px;
  font-weight: var(--w-body); /* 読む文章=400 */
  line-height: 1.9;
}

.message-section {
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 10vw, 128px) var(--gutter);
  background:
    radial-gradient(circle at 12% 16%, rgba(216, 240, 111, 0.26), transparent 24%),
    linear-gradient(135deg, #f8fbff 0%, #edf4ff 46%, #ffffff 100%);
  border-block: 1px solid var(--brand-line);
}

.signature {
  padding-top: 24px;
  margin-top: 30px;
  border-top: 1px solid var(--brand-line);
}

.signature small,
.signature strong {
  display: block;
}

.signature small {
  color: var(--muted); /* 2026-07-26 #8994a8はコントラストAA不合格(2.87:1)のためmutedへ */
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.signature strong {
  margin-top: 4px;
  font-size: 15px;
}

.research-section,
.social-section {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 10vw, 134px) var(--gutter);
  color: var(--white);
  background:
    radial-gradient(circle at 12% 10%, rgba(216, 240, 111, 0.18), transparent 25%),
    radial-gradient(circle at 84% 88%, rgba(117, 180, 222, 0.22), transparent 30%),
    linear-gradient(135deg, #0e245c 0%, var(--brand) 54%, #193579 100%);
}

.social-section::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 44%, rgba(255, 255, 255, 0.08) 44% 45%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 100px);
}

.social-section::after {
  position: absolute;
  top: 8%;
  right: -120px;
  width: 340px;
  height: 340px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: inset 0 0 0 42px rgba(255, 255, 255, 0.035);
  animation: slowSpin 26s linear infinite;
}

.research-inner,
.social-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1fr);
  gap: clamp(42px, 7vw, 90px);
  align-items: center;
  width: min(100%, var(--max));
  margin: 0 auto;
}

.research-inner .kicker,
.research-inner p,
.social-inner .kicker,
.social-inner p {
  color: rgba(255, 255, 255, 0.85);
}

.research-inner h2,
.social-inner h2 {
  color: var(--white);
}

.social-copy-card {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 54px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
  transform: translateZ(0);
}

.social-copy-card::before {
  position: absolute;
  top: -74px;
  right: -72px;
  width: 260px;
  height: 260px;
  content: "";
  background:
    linear-gradient(135deg, rgba(117, 180, 222, 0.38), rgba(255, 255, 255, 0.04));
  clip-path: polygon(0 0, 100% 16%, 78% 100%, 8% 82%);
}

.social-copy-card::after {
  position: absolute;
  right: 34px;
  bottom: 34px;
  width: 160px;
  height: 6px;
  content: "";
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  border-radius: 999px;
  opacity: 0.9;
}

.social-card-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.social-card-topline span {
  padding: 7px 14px;
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.social-card-topline i {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.social-copy-card .kicker,
.social-copy-card h2,
.social-copy-card p,
.social-copy-card .social-list,
.social-mini-metrics {
  position: relative;
  z-index: 1;
}

.social-list {
  display: grid;
  gap: 16px;
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
}

.social-list li {
  position: relative;
  padding-left: 28px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.social-list li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 10px;
  height: 10px;
  content: "";
  background: var(--cyan);
  border-radius: 50%;
}

.social-list strong {
  color: var(--white);
}

.social-mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
}

.social-mini-metrics span {
  display: grid;
  min-height: 54px;
  place-items: center;
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

.social-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  margin: 0;
}

.social-photo {
  min-height: 320px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(14, 36, 92, 0.04), rgba(14, 36, 92, 0.7)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #1c347a, var(--brand), #75b4de);
  border-color: rgba(255, 255, 255, 0.28);
  border-radius: 28px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
  transition: transform 0.24s ease, filter 0.24s ease;
}

.social-photo:hover {
  filter: saturate(1.08);
  transform: translateY(-2px);
}

.social-photo.secondary {
  margin-top: 68px;
  background:
    linear-gradient(180deg, rgba(14, 36, 92, 0.02), rgba(14, 36, 92, 0.72)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #244996, #5aa4d8, #b89b5e);
}

.social-photo span {
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.2);
}

.social-photo p {
  color: rgba(255, 255, 255, 0.85);
}

.release-section {
  background:
    linear-gradient(180deg, var(--brand-soft), #ffffff);
}

.release-inner {
  width: min(100%, 1000px);
  margin: 0 auto;
}

.release-item {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  padding: 24px 28px;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  margin-bottom: 14px;
  transition: background 0.24s ease;
}

.release-item:last-child {
  margin-bottom: 0;
}

.release-item:hover {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 30px 70px -30px rgba(14, 36, 92, 0.32);
}

.release-item div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.release-item time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.release-item div span {
  padding: 4px 12px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
}

.release-item p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.company-section {
  padding: clamp(92px, 10vw, 142px) var(--gutter);
  background: var(--white);
}

.company-inner {
  width: min(100%, 1000px);
  margin: 0 auto;
}

.company-table {
  padding: clamp(24px, 4vw, 46px);
  margin: 0;
  background:
    radial-gradient(circle at 96% 0%, rgba(216, 240, 111, 0.18), transparent 24%),
    var(--brand-soft);
  border-radius: 28px;
}

.company-table div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--brand-line);
}

.company-table div:last-child {
  border-bottom: 0;
}

.company-table dt,
.company-table dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}

.company-table dt {
  color: var(--brand);
  font-weight: 900;
}

.company-table dd {
  color: var(--muted);
  font-weight: 700;
}

.company-table small {
  color: var(--muted); /* 2026-07-26 #8994a8はコントラストAA不合格(2.87:1)のためmutedへ */
  font-size: 12px;
  font-weight: 700;
}

.company-table a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.company-message {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 1fr);
  gap: 16px;
  padding: clamp(28px, 4.5vw, 48px);
  margin: 0 0 clamp(18px, 3vw, 28px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.82)),
    radial-gradient(circle at 96% 0%, rgba(117, 180, 222, 0.2), transparent 26%);
  border: 1px solid rgba(32, 62, 149, 0.12);
  border-radius: 28px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
}

.company-message::after {
  position: absolute;
  right: clamp(20px, 4vw, 42px);
  bottom: clamp(18px, 3vw, 34px);
  color: rgba(32, 62, 149, 0.06);
  font-size: clamp(54px, 8vw, 96px);
  font-weight: 900;
  line-height: 1.1;
  content: "MESSAGE";
  pointer-events: none;
}

.company-message > * {
  position: relative;
  z-index: 1;
}

.company-message .kicker {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.company-message h2,
.company-message h3 {
  /* messageページはSEO都合でh2（2026-07-26昇格）。indexのh3も同スタイル */
  grid-row: 2 / 4;
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  /* 上限を40px→38px に。最長行「お金の不安に縛られず、」は全角11文字で、
     40pxだと440px 必要だが左カラムは約425pxしかなく折り返していた（38px→418px）。 */
  font-size: clamp(28px, 3.1vw, 38px);
  font-weight: 900;
  line-height: 1.4;
}

.company-message p:not(.kicker) {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  max-width: 720px;
  margin: 0;
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 700;
  line-height: 1.9;
}

.signature.compact {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  padding-top: 18px;
  margin-top: 4px;
}

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

  .company-message .kicker,
  .company-message h2,
  .company-message h3,
  .company-message p:not(.kicker),
  .signature.compact {
    grid-column: auto;
    grid-row: auto;
  }

  .company-message::after {
    font-size: 48px;
  }
}

.disclaimer {
  padding: 28px var(--gutter);
  color: var(--muted); /* 2026-07-26 再検証: #5d6878 は語彙外 → --muted へ */
  background: #eef4fc;
  border-top: 1px solid var(--brand-line);
}

.disclaimer strong,
.disclaimer p {
  display: block;
  width: min(100%, var(--max));
  margin-inline: auto;
}

.disclaimer strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.disclaimer p {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
}

.footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 44px;
  padding: 68px max(24px, calc((100vw - var(--max-wide)) / 2 + 24px)) 54px;
  background: var(--white);
  border-top: 1px solid var(--brand-line);
}

@keyframes slowSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes floatPanel {
  0%,
  100% {
    transform: translate3d(0, 0, 34px) rotate(-1deg);
  }

  50% {
    transform: translate3d(0, -16px, 60px) rotate(1deg);
  }
}

@keyframes lineBreath {
  0%,
  100% {
    transform: scaleX(0.56);
    opacity: 0.76;
  }

  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1200px) {
  .topbar-glass {
    height: 70px;
  }

  .desktop-nav {
    gap: 16px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .desktop-nav .nav-pill {
    padding-inline: 16px;
  }

  .hero-content h1 {
    font-size: clamp(56px, 8vw, 86px);
  }

  .social-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
    gap: 42px;
  }

  .social-photo {
    min-height: 300px;
  }
}

@media (max-width: 980px) {
  .desktop-nav a:not(.nav-pill) {
    display: none;
  }

  .hero-bento {
    min-height: 760px;
    padding-top: 112px;
  }

  .hero-panel {
    inset: 14px;
    border-radius: 28px;
  }

  .scroll-note {
    display: none;
  }

  .metrics,
  .message-inner,
  .service-feature,
  .research-inner,
  .social-inner,
  .job-grid {
    grid-template-columns: 1fr;
  }

  .social-visual {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .social-photo,
  .social-photo.secondary {
    min-height: 260px;
    margin-top: 0;
  }

  .release-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .footer {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .hero-bento {
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding-top: 104px;
    overflow: visible;
  }

  .hero-panel {
    position: relative;
    inset: auto;
    order: 2;
    width: auto;
    align-self: stretch;
    min-height: 320px;
    margin-top: 34px;
  }

  .hero-content {
    order: 1;
    padding-top: 22px;
  }

  .hero-content h1 {
    max-width: 8em;
    font-size: clamp(42px, 12vw, 68px);
  }

  .hero-lead {
    max-width: 28em;
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.9;
  }

  .hero-soft-layer {
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(250, 250, 250, 0.3) 0%, rgba(250, 250, 250, 0.08) 100%);
  }

  .hero-proof {
    margin-top: 22px;
  }

  .hero-proof span {
    min-height: 30px;
    font-size: 11px;
  }

  .photo-slot {
    align-content: end;
  }

  .photo-slot::before {
    width: 72px;
    height: 52px;
  }

  .photo-slot strong {
    font-size: 20px;
  }

  .photo-slot p {
    font-size: 12px;
    line-height: 1.7;
  }

  .social-copy-card {
    box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
  }

  .topbar {
    padding: 12px 14px 0;
  }

  .topbar-glass {
    height: 64px;
    padding-inline: 14px;
    border-radius: 14px;
  }

  .logo-text {
    max-width: 48vw;
    font-size: 16px;
  }

  .desktop-nav {
    display: none;
  }

  .hero-content {
    padding-inline: 2px;
  }

  .hero-content h1 {
    font-size: clamp(38px, 13vw, 58px);
  }

  .hero-proof {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 320px);
  }

  .hero-proof span {
    justify-content: center;
  }

  .metric-card,
  .mission-card,
  .value-card,
  .service-feature,
  .company-table {
    border-radius: 14px;
  }

  .section,
  .message-section,
  .research-section,
  .social-section,
  .company-section {
    padding-right: 18px;
    padding-left: 18px;
  }

  .section-title {
    margin-bottom: 36px;
  }

  .section-title h2 {
    font-size: 42px;
  }

  .social-copy-card {
    padding: 28px;
    border-radius: 28px;
  }

  .social-mini-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .social-mini-metrics span {
    min-height: 48px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .company-table div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 14px;
  }

  body {
    line-height: 1.7;
  }

  .topbar {
    padding-inline: 10px;
  }

  .topbar-glass {
    height: 58px;
    padding-inline: 12px;
  }

  .desktop-nav {
    display: none;
  }

  .logo {
    gap: 8px;
  }

  .logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 14px;
  }

  .logo-text {
    max-width: 62vw;
    font-size: 15px;
    letter-spacing: 0.08em;
  }

  .hero-bento {
    padding-top: 88px;
  }

  .hero-panel {
    min-height: 300px;
    border-radius: 28px;
  }

  .hero-content h1 {
    font-size: clamp(36px, 13vw, 52px);
  }

  .hero-lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .kicker {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .photo-slot {
    padding: 24px;
  }

  .photo-slot::before {
    top: 18px;
    right: 18px;
    width: 54px;
    height: 40px;
    border-radius: 14px;
  }

  .photo-slot span {
    padding: 5px 9px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .photo-slot strong {
    font-size: 18px;
  }

  .section {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  .section-title {
    margin-bottom: 30px;
  }

  .section-title h2 {
    font-size: 32px;
    line-height: 1.1;
  }

  .section-title::before {
    font-size: 72px;
  }

  .mission-card,
  .value-card,
  .service-feature,
  .company-table,
  .job-card {
    padding: 24px;
  }

  .mission-card p,
  .value-card p,
  .message-copy p,
  .service-feature p,
  .social-inner p,
  .recruit-card p {
    font-size: 15px;
    line-height: 1.9;
  }

  .message-section,
  .social-section,
  .company-section {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  .social-copy-card {
    padding: 24px;
  }

  .social-card-topline {
    flex-wrap: wrap;
    gap: 10px;
  }

  .social-card-topline i {
    flex-basis: 100%;
  }

  .social-mini-metrics {
    grid-template-columns: 1fr;
  }

  .social-photo {
    min-height: 250px;
  }

  .release-item {
    /* 囲いカード化に合わせ左右の内側余白を確保（0だと文字が枠線に接する） */
    padding: 22px 20px;
  }

  .release-item div {
    flex-wrap: wrap;
  }

  .company-table {
    padding: 22px;
  }

  .footer {
    gap: 32px;
    padding-top: 52px;
    padding-bottom: 42px;
  }
}

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

  .cursor-glow,
  .scroll-progress {
    display: none;
  }
}

@media (max-width: 360px) {
  .hero-content h1 {
    max-width: 100%;
    font-size: clamp(34px, 10.5vw, 38px);
    line-height: 1.1;
  }

  .hero-lead {
    font-size: 13px;
  }
}

.scroll-progress {
  height: 2px;
  background: var(--brand);
  box-shadow: none;
}

.hero-bento {
  background: #f7f8fb;
}

.hero-panel {
  inset: 24px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 44%, rgba(255, 255, 255, 0.16) 68%),
    linear-gradient(90deg, transparent 0 50%, rgba(32, 62, 149, 0.08) 50% 100%),
    var(--brand-soft);
  border: 1px solid rgba(32, 62, 149, 0.1);
  border-radius: 28px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
}

.hero-panel::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(32, 62, 149, 0.08) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(32, 62, 149, 0.06) 0 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 44%, #000 100%);
}

.hero-panel::after,
.mission-card::after,
.social-section::after,
.recruit-section::before {
  display: none;
}

.hero-soft-layer {
  background:
    linear-gradient(90deg, rgba(250, 250, 250, 0.98) 0%, rgba(250, 250, 250, 0.84) 42%, rgba(250, 250, 250, 0.18) 68%, transparent 100%);
}

.hero-content h1::after {
  width: 88px;
  height: 5px;
  background: var(--brand);
  animation: none;
}

.section-title::before,
.message-marquee {
  display: none;
}

.section-title {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(38px, 5vw, 64px);
}

.section-title h2 {
  font-size: clamp(42px, 6.4vw, 86px);
}

.title-line {
  width: 82px;
  height: 5px;
  background: var(--brand);
}

.mission-card,
.value-card,
.service-feature,
.company-table,
.job-card {
  border-color: rgba(32, 62, 149, 0.12);
  border-radius: 28px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
}

.photo-slot {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 36, 92, 0.64)),
    linear-gradient(135deg, #dcecff 0%, #75b4de 45%, #203e95 100%);
  border-style: solid;
}

.photo-slot::before {
  width: 84px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  border-radius: 14px;
}

.photo-slot::after {
  background: rgba(255, 255, 255, 0.22);
}

.photo-slot span {
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.52);
}

.photo-slot strong {
  color: var(--white);
}

.photo-slot p {
  color: rgba(255, 255, 255, 0.85);
}

.service-feature:hover,
.service-feature:focus-visible,
.value-card:hover,
.social-photo:hover {
  transform: translateY(-2px);
}

.social-section {
  background: var(--brand);
}

.social-section::before,
.recruit-card::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px);
  background-size: 82px 82px;
}

.social-photo,
.social-photo.secondary,
.recruit-card > .recruit-photo-slot {
  background:
    linear-gradient(180deg, rgba(14, 36, 92, 0.08), rgba(14, 36, 92, 0.66)),
    linear-gradient(135deg, #dcecff 0%, #75b4de 45%, #203e95 100%);
}

.message-section {
  background: #f4f8ff;
}

.company-table {
  background: var(--brand-soft);
}

@media (max-width: 760px) {
  .hero-panel,
  .hero-photo-slot {
    border-radius: 28px;
  }

  .hero-soft-layer {
    background: linear-gradient(180deg, rgba(250, 250, 250, 0.2), transparent);
  }
}

@media (max-width: 480px) {
  .section-title h2 {
    font-size: 34px;
  }

  .photo-slot span {
    min-height: 28px;
    padding-inline: 10px;
    line-height: 28px;
  }
}

.about-section {
  padding: clamp(86px, 10vw, 132px) var(--gutter);
  background: var(--white);
  border-bottom: 1px solid var(--brand-line);
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: start;
  width: min(100%, var(--max));
  margin: 0 auto;
}

.new-mark {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 7px;
  margin-right: 10px;
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  border: 1px solid color-mix(in srgb, var(--red) 22%, transparent);
  border-radius: 4px;
}

.contact-section {
  padding: clamp(86px, 10vw, 128px) var(--gutter);
  color: var(--white);
  text-align: center;
  background: var(--brand-deep);
}

.contact-inner {
  width: min(100%, 820px);
  margin: 0 auto;
}

.contact-section .kicker,
.contact-section .section-title small {
  color: rgba(255, 255, 255, 0.68);
}

.contact-section h2 {
  color: var(--white);
}

.contact-section .title-line {
  margin-inline: auto;
  background: var(--white);
}

.contact-section .contact-inner > p {
  max-width: 620px;
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  line-height: 1.9;
}

@media (max-width: 980px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 640px) {
  .about-section,
  .contact-section {
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* Typography governance: keep the corporate site on one readable scale. */
:root {
  --type-micro: 11px;
  --type-label: 12px;
  --type-small: 13px;
  --type-body: 15px;
  --type-body-lg: clamp(16px, 1.25vw, 18px);
  --type-lead: clamp(17px, 1.55vw, 21px);
  --type-card-title: clamp(22px, 2vw, 28px);
  --type-section-copy: clamp(28px, 3.3vw, 42px);
  --type-section-title: clamp(44px, 5vw, 72px);
  --type-hero: clamp(46px, 7.2vw, 88px);
}

body {
  font-size: var(--type-body);
  line-height: 1.9;
}

.logo-text {
  font-size: 18px;
  letter-spacing: 0.08em;
}

.desktop-nav {
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
}

.kicker,
.section-title small,
.label,
.photo-slot span,
.image-card figcaption span,
.message-visual figcaption span,
.value-card .value-caption,
.job-card span,
.release-item time,
.release-item div span,
.footer-nav {
  font-size: var(--type-label);
  letter-spacing: 0.08em;
}

.hero-content h1 {
  font-size: var(--type-hero);
  line-height: 1.1;
}

.hero-lead {
  font-size: var(--type-lead);
  line-height: 1.9;
}

.section-title h2 {
  font-size: var(--type-section-title);
  line-height: 1.1;
}

.mission-card h3,
.message-copy h2,
.research-inner h2,
.recruit-card h2,
.social-inner h2 {
  font-size: var(--type-section-copy);
  font-weight: 900;
  line-height: 1.4;
}

.photo-slot strong,
.image-card .photo-slot strong {
  font-size: clamp(22px, 2.05vw, 30px);
  line-height: 1.4;
}

.photo-slot p,
.image-card .photo-slot p {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.9;
}

.mission-card p,
.value-card p,
.message-copy p,
.service-feature p,
.social-inner p,
.recruit-card p,
.release-item p,
.company-table dt,
.company-table dd {
  font-size: var(--type-body);
  line-height: 1.9;
}

.service-note,
.disclaimer p,
.company-table small {
  font-size: 12px !important;
}

.new-mark {
  font-size: var(--type-micro);
}

@media (max-width: 760px) {
  :root {
    --type-hero: clamp(36px, 11.2vw, 54px);
    --type-section-title: clamp(32px, 9vw, 42px);
    --type-section-copy: clamp(25px, 7vw, 34px);
  }

  .photo-slot strong,
  .image-card .photo-slot strong {
    font-size: clamp(20px, 6vw, 26px);
  }

.photo-slot p,
.image-card .photo-slot p {
    font-size: var(--type-small);
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  :root {
    --type-body: 14px;
    --type-lead: 15px;
    --type-hero: clamp(34px, 10.2vw, 42px);
    --type-section-title: 32px;
    --type-section-copy: 25px;
  }

  .logo-text {
    font-size: 15px;
  }

  .kicker,
  .section-title small,
  .label,
  .photo-slot span {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .hero-content h1 {
    max-width: 100%;
  }

  .hero-lead {
    line-height: 1.9;
  }
}

@media (max-width: 560px) {

  .hero-panel {
    inset-inline: 14px;
  }

  .hero-photo-slot,
  .hero-soft-layer {
    width: 100%;
    max-width: 100%;
  }
}

/* About alignment refinement */
.about-section {
  padding-block: clamp(78px, 9vw, 116px);
}

.about-inner {
  display: block;
  width: min(100%, calc(var(--max-wide) - (var(--gutter) * 2)));
}

.about-section .section-title {
  margin-bottom: clamp(28px, 4vw, 42px);
}

.about-section .section-title::before {
  left: -0.12em;
  transform: none;
}

.about-section .title-line {
  margin-inline: 0;
}

.motion-item {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.72s ease var(--motion-delay, 0ms),
    transform 0.72s ease var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.photo-slot {
  transition: transform 0.9s ease, filter 0.9s ease;
}

.motion-item.is-visible .photo-slot,
.photo-slot.motion-item.is-visible {
  filter: saturate(1.03);
  transform: scale(1.012);
}

.release-item.motion-item,
.company-table div.motion-item {
  transform: translateX(-18px);
}

.release-item.motion-item.is-visible,
.company-table div.motion-item.is-visible {
  transform: translateX(0);
}

/* Interaction polish */
.logo,
.desktop-nav a,
.btn,
.service-feature,
.release-item,
.company-message,
.company-table div,
.job-card,
.value-card,
.mission-card,
.photo-slot {
  --hover-x: 50%;
  --hover-y: 50%;
}

.logo {
  transition: color 0.24s ease, transform 0.24s ease;
}

.logo-mark {
  transition: background 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.logo:hover,
.logo:focus-visible {
  color: var(--brand);
  transform: translateY(-2px);
}

.logo:hover .logo-mark,
.logo:focus-visible .logo-mark {
  background: linear-gradient(135deg, var(--brand-deep), var(--cyan));
  box-shadow: 0 30px 70px -30px rgba(14, 36, 92, 0.32);
  transform: rotate(-4deg) scale(1.04);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--brand-deep);
  transform: translateY(-2px);
}

.desktop-nav a::after {
  background: var(--interaction-grad);
}

.mission-card,
.value-card,
.service-feature,
.company-message,
.job-card {
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.mission-card:hover,
.mission-card:focus-within,
.value-card:hover,
.value-card:focus-within,
.service-feature:hover,
.service-feature:focus-visible,
.company-message:hover,
.company-message:focus-within,
.job-card:hover,
.job-card:focus-within {
  border-color: rgba(32, 62, 149, 0.26);
  box-shadow: 0 30px 70px -30px rgba(14, 36, 92, 0.32);
  transform: translateY(-2px);
}

.mission-card:hover,
.value-card:hover,
.company-message:hover,
.job-card:hover {
  background:
    radial-gradient(circle at var(--hover-x) var(--hover-y), rgba(117, 180, 222, 0.18), transparent 32%),
    var(--white);
}

.photo-slot:hover {
  filter: saturate(1.12) brightness(1.04);
  transform: scale(1.025);
}

.photo-slot:hover span {
  color: var(--brand-deep);
  background: var(--interaction-label-grad);
}

.release-item {
  transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.release-item:hover {
  background:
    radial-gradient(circle at var(--hover-x) var(--hover-y), rgba(117, 180, 222, 0.16), transparent 30%),
    rgba(255, 255, 255, 0.9);
  border-color: rgba(32, 62, 149, 0.18);
  transform: translateX(6px);
}

.release-item:hover time {
  color: var(--brand);
}

.release-item:hover div span {
  color: var(--white);
  background: var(--brand);
  border-color: var(--brand);
}

.release-item:hover p {
  color: var(--brand-deep);
}

.release-item {
  align-items: center;
  min-height: 78px;
}

.release-meta {
  display: grid;
  grid-template-columns: 108px auto;
  gap: 14px;
  align-items: center;
}

.new-mark,
.new-mark-spacer {
  width: 40px;
}

.new-mark {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  color: var(--red); /* 2026-07-26 正典外のピンク#c52b61を廃止しフヤセル赤へ */
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  background: rgba(234, 243, 255, 0.92);
  border: 1px solid rgba(117, 180, 222, 0.42);
  border-radius: 999px;
}

.release-item:hover .new-mark {
  color: var(--brand-deep);
  background: rgba(117, 180, 222, 0.18);
  border-color: rgba(117, 180, 222, 0.5);
}

/* Release rollback and calm hover states */
.release-item {
  align-items: center;
  min-height: 0;
}

.release-item p {
  position: relative;
  min-height: 28px;
  padding-left: 58px;
}

.release-item .new-mark {
  position: absolute;
  top: 50%;
  left: 0;
  min-height: 22px;
  transform: translateY(-50%);
}

.release-item:hover,
.mission-card:hover,
.value-card:hover,
.company-message:hover,
.job-card:hover {
  background: rgba(255, 255, 255, 0.9);
}

.value-card:hover > span,
.job-card:hover span,
.mission-card:hover .label,
.service-feature:hover .label,
.photo-slot:hover span {
  color: var(--brand-deep);
  background: rgba(234, 243, 255, 0.96);
  border-color: rgba(117, 180, 222, 0.38);
}

@media (max-width: 760px) {
  .release-item {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    min-height: 0;
  }

  .release-meta {
    grid-template-columns: 108px auto;
  }
}

.company-table div {
  transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease, color 0.24s ease;
}

.company-table div:hover {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(14, 36, 92, 0.32);
  transform: translateX(6px);
}

.company-table div:hover dt,
.company-table a:hover,
.company-table a:focus-visible {
  color: var(--brand-deep);
}

.company-table div:hover dd {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .motion-item,
  .release-item.motion-item,
  .company-table div.motion-item,
  .service-points li.motion-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .logo,
  .logo-mark,
  .desktop-nav a,
  .mission-card,
  .value-card,
  .service-feature,
  .company-message,
  .job-card,
  .photo-slot,
  .release-item,
  .company-table div,
  .service-metrics div {
    transition: none;
  }
}

/* ============================================================
   mobile nav — added for static-HTML conversion (topbar hamburger)
   ------------------------------------------------------------
   Why this exists: the original `.desktop-nav a:not(.nav-pill)`
   rule (see the 980px media query above) only hides the individual
   links, leaving a lone CONTACT pill floating in the topbar on
   phones with no way to reach ABOUT/MISSION/SERVICE/SOCIAL IMPACT/
   COMPANY. This section adds a hamburger button + slide-down menu
   and fully takes over from .desktop-nav at the SAME 980px
   breakpoint the rest of the layout already switches on.
   Every color/radius/shadow/font below reuses existing tokens
   (--brand / --brand-deep / --brand-soft / --brand-line / --ink /
   --white / --gutter / --max-wide) — no new palette introduced.
   ============================================================ */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--brand-soft);
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--brand-deep);
  border-radius: 999px;
  transition: transform 0.24s ease, opacity 0.24s ease, top 0.24s ease;
}

.nav-toggle-bars span:nth-child(1) {
  top: 0;
}

.nav-toggle-bars span:nth-child(2) {
  top: 6px;
}

.nav-toggle-bars span:nth-child(3) {
  top: 12px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.mobile-nav {
  display: none;
}

@media (max-width: 980px) {
  .topbar .desktop-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 49;
    display: block;
    padding: 92px var(--gutter) 18px;
    pointer-events: none;
    transition: padding 0.24s ease;
  }

  .topbar.is-scrolled ~ .mobile-nav {
    padding-top: 80px;
  }

  .mobile-nav.is-open {
    pointer-events: auto;
  }

  .mobile-nav-panel {
    width: min(100%, var(--max-wide));
    margin: 0 auto;
    overflow: hidden;
    max-height: 0;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--brand-line);
    border-radius: 14px;
    box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
    backdrop-filter: blur(16px);
    opacity: 0;
    transition: max-height 0.24s ease, opacity 0.24s ease;
  }

  .mobile-nav.is-open .mobile-nav-panel {
    max-height: 420px;
    opacity: 1;
  }

  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    padding: 8px 6px;
  }

  .mobile-nav-list a {
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--ink);
    border-bottom: 1px solid var(--brand-line);
  }

  .mobile-nav-list a:last-child {
    border-bottom: none;
  }

  .mobile-nav-list a:hover,
  .mobile-nav-list a:focus-visible,
  .mobile-nav-list a.is-current {
    color: var(--brand);
    background: var(--brand-soft);
  }

  .mobile-nav-list a.nav-pill {
    margin: 6px;
    color: var(--white);
    text-align: center;
    background: var(--brand);
    border-radius: 999px;
    border-bottom: none;
  }

  .mobile-nav-list a.nav-pill:hover,
  .mobile-nav-list a.nav-pill:focus-visible,
  .mobile-nav-list a.nav-pill.is-current {
    color: var(--white);
    background: var(--brand-deep);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars span,
  .mobile-nav,
  .mobile-nav-panel {
    transition: none;
  }
}

/* ============================================================
   legal content (privacy.html) — 条文カードUI
   ------------------------------------------------------------
   本体サイトの部品と同じ質感で組む: MESSAGEカードのグラデ+ゴースト英字、
   ドットメッシュ(12px)、COMPANY表組み(dl)、既存トークンのみ使用。
   構成 = リードカード → 目次(INDEX) → ARTICLE番号つき条文カード →
   窓口dlテーブル → 制定日の署名ブロック。
   ============================================================ */

.legal-lead {
  position: relative;
  padding: clamp(28px, 4.5vw, 48px);
  margin: 0 0 clamp(26px, 4vw, 38px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.82)),
    radial-gradient(circle at 96% 0%, rgba(117, 180, 222, 0.2), transparent 26%);
  border: 1px solid rgba(32, 62, 149, 0.12);
  border-radius: 28px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
}

/* 右上にドットメッシュ（統一モチーフ）を薄く敷く */
.legal-lead::before {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  content: "";
  background: radial-gradient(rgba(32, 62, 149, 0.14) 1px, transparent 1.5px) 0 0 / 12px 12px;
  -webkit-mask-image: linear-gradient(115deg, transparent 42%, #000);
  mask-image: linear-gradient(115deg, transparent 42%, #000);
  pointer-events: none;
}

.legal-lead p {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0;
  /* 2026-07-26 木村さん指摘: 冒頭文だけ19px/900の太字で浮いていた。
     message本文・条文本文と同じ「標準の太さ」の統一ルールに揃える
     2026-07-26 追加是正: 決定10（15px以上の読む文章は黒）。描画結果の全数監査で検出 */
  color: var(--ink);
  font-size: var(--type-body-lg);
  font-weight: normal;
  line-height: 2.1;
}

.legal-toc {
  margin: 0 0 clamp(26px, 4vw, 38px);
}

.legal-toc-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.legal-toc-label::after {
  flex: 0 0 42px;
  height: 2px;
  content: "";
  background: var(--interaction-grad);
  border-radius: 2px;
}

.legal-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: legal-toc;
}

/* 目次カード（見本帳 §3g）— 2026-07-26 是正・木村さんB案。
   「カードに小ラベル＋日本語ラベルが乗った一覧」＝回遊カード（.about-link-card）と同じ族なので、
   面・文字・ホバーの組みをそちらに揃える。以前は 薄青の面／番号900／本文15px灰色700 で、
   同じ形の部品がサイト内に2つの顔で存在していた（＝方言）。 */
.legal-toc a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  /* 日本語ラベル: 回遊カードの strong と同じ 17px / 700 / 濃紺 */
  color: var(--brand-deep);
  font-size: 17px;
  font-weight: var(--w-strong);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  transition: box-shadow 0.24s ease, border-color 0.24s ease;
}

.legal-toc a::before {
  /* 番号: 回遊カードの small と同じ 12px / 600 / ブランド青 */
  color: var(--brand);
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  content: counter(legal-toc, decimal-leading-zero);
  counter-increment: legal-toc;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  /* 回遊カードと同じ「影が持ち上がる」だけのホバー（色は動かさない） */
  box-shadow: 0 18px 40px -20px rgba(14, 36, 92, 0.28);
  border-color: rgba(32, 62, 149, 0.32);
}

.legal-content {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
}

.legal-article {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(22px, 3.4vw, 36px) clamp(20px, 3.4vw, 40px);
  background: var(--white);
  border: 1px solid rgba(32, 62, 149, 0.12);
  border-radius: 14px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
  scroll-margin-top: 130px;
}

.legal-article-no strong {
  display: block;
  color: var(--brand);
  /* 2026-07-26 木村さん決定Q2: 語彙外の独自clampをやめ、中間見出しの語彙へ
     （章番号は「見出しの一員」という位置づけ。スマホ側は下限28pxでほぼ現状どおり） */
  font-size: var(--type-section-copy);
  font-weight: 900;
  line-height: 1.1;
}

.legal-article-no::after {
  display: block;
  width: 30px;
  height: 3px;
  margin-top: 12px;
  content: "";
  background: var(--interaction-grad);
  border-radius: 2px;
}

.legal-article h2,
.legal-article h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  letter-spacing: 0;
}

.legal-article p {
  margin: 0 0 10px;
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  /* 2026-07-26 木村さん決定Q1: 語彙外の16pxをやめ、標準本文の語彙へ */
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.9;
}

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

.legal-article ul {
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 4px 0 12px;
  list-style: none;
}

.legal-article li {
  position: relative;
  padding-left: 20px;
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  /* 2026-07-26 木村さん決定Q1: 語彙外の16pxをやめ、標準本文の語彙へ */
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.9;
}

.legal-article li::before {
  position: absolute;
  top: 0.72em;
  left: 2px;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--interaction-grad);
  border-radius: 3px;
}

/* 窓口(第9条)の連絡先 — 会社概要の表（正典3a）とルールを共有する。
   2026-07-26 是正（木村さん指摘）: コメントは元から「COMPANY表組みと同じdl型」と書いてあったのに、
   実装は9項目すべて食い違っていた（薄青の面＋語彙外の黄緑グラデ／ラベル15px900／値15px700／
   列120px／罫線1種）。中でも白いパネル(.legal-article)の中に別の面を敷いていたのが器の入れ子事故。
   行の組み・文字・罫線は .company-section .company-table のセレクタに .legal-window を併記して共有し、
   ここには「白い器は1枚」にするための打ち消しだけを書く。 */
.legal-window {
  padding: 0;
  margin: 20px 0 0;
}

.legal-window > div {
  display: grid;
}

.legal-window a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal-enacted {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: clamp(28px, 4vw, 42px);
}

.legal-enacted span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.legal-enacted strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

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

  .legal-article {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .legal-article-no {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .legal-article-no strong {
    margin-top: 0;
  }

  .legal-article-no::after {
    align-self: center;
    margin-top: 0;
  }

  .legal-window div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* --- Release: NEWバッジが「NE／W」と折れる不具合の修正（width:40px固定→内容に合わせる） --- */
.release-item .new-mark {
  width: auto;
  min-width: 40px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* SOCIAL：セクションの四角い格子を消し、文字カードの斜線ハッチはドットメッシュに差し替え（統一） */
.social-section::before {
  display: none;
}
.social-copy-card {
  background:
    radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.5px) 0 0 / 12px 12px,
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
}

/* COMPANY：会社概要の表は行のマウスオーバー挙動のみ無効化（ドットは付けない＝おかしく見えたため外した） */
.company-table div {
  transition: none;
}
.company-table div:hover {
  transform: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.company-table div:hover dt {
  color: var(--brand);
}
.company-table div:hover dd {
  color: var(--muted);
}

/* CONTACT：濃紺セクションにもドットメッシュ（統一・白ドット） */
.contact-section {
  background:
    radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.5px) 0 0 / 12px 12px,
    var(--brand-deep);
}

/* 全環境で同じフォントに統一：Noto Sans JP を自前ホスト（外部CDN不使用・かな/英数/使用漢字をサブセット・全ウェイト対応の可変フォント） */
@font-face {
  font-family: "Noto Sans JP";
  src: url("fonts/NotoSansJP-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block; /* 2026-07-26 swapだと代替→本命の切替が見えてノイズ（木村さん指摘）。preload併用で通常は初回描画から本命が出る */
}

/* スクロール・リビールを一流の滑らかさに（expo-out・少し長めで上質に） */
.motion-item {
  transition:
    opacity 0.9s ease var(--motion-delay, 0ms),
    transform 0.9s ease var(--motion-delay, 0ms);
}

/* ヒーローの「SCROLL DOWN」を一流に：白文字＋ラインを光が流れるアニメ（動画上で沈んで見えた不具合を解消） */
.scroll-note {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 12px rgba(14, 36, 92, 0.5);
}
.scroll-note i {
  position: relative;
  width: 74px;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}
.scroll-note i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.96), transparent);
  animation: scrollFlow 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scrollFlow {
  0% { transform: translateX(-28px); }
  100% { transform: translateX(74px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-note i::after { animation: none; }
}

/* --- ヒーロー実写真（PC主体・右パネルに写真＋左テキストの可読性確保） --- */
.hero-panel .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
  border-radius: 44px;
  z-index: 0;
  /* 軽い色調整で締める */
  filter: saturate(1.06) contrast(1.04);
}
/* ブランド色フィルター＋左テキストの可読性オーバーレイ（背景動画の定石） */
.hero-panel .hero-soft-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 44px;
  background:
    /* 0) ドットメッシュ（文字の背後にテクスチャの面を作り視認性UP） */
    radial-gradient(rgba(32, 62, 149, 0.16) 1px, transparent 1.5px) 0 0 / 12px 12px,
    /* 1) 左＝白グラデ（見出しの可読性） */
    linear-gradient(100deg,
      rgba(248, 251, 255, 0.99) 0%,
      rgba(248, 251, 255, 0.93) 34%,
      rgba(248, 251, 255, 0.42) 56%,
      rgba(255, 255, 255, 0) 76%),
    /* 2) 下を濃紺に沈める（奥行き＋Scroll文字の可読性） */
    linear-gradient(180deg,
      rgba(14, 36, 92, 0) 30%,
      rgba(14, 36, 92, 0.40) 100%),
    /* 3) 全面にブランド濃紺のティント（圧縮の粗を隠し色を統一） */
    linear-gradient(0deg,
      rgba(32, 62, 149, 0.22),
      rgba(32, 62, 149, 0.22));
}
/* 写真の上では回転グラデ装飾を控えめに */
.hero-panel::after { opacity: 0.18; }
@media (max-width: 760px) {
  /* スマホは写真をパネル下側に、テキストの背後は明るく保つ */
  .hero-panel .hero-photo { object-position: 62% center; }
  .hero-panel .hero-soft-layer {
    background: linear-gradient(180deg,
      rgba(248, 251, 255, 0.95) 0%,
      rgba(248, 251, 255, 0.72) 42%,
      rgba(248, 251, 255, 0.30) 72%,
      rgba(255, 255, 255, 0) 100%);
  }
}

/* SOCIAL見出しを <br> で指定したとおりの2行に収める。枠は広げず、文字をカード幅に
   合わせて詰める。「格差のない持続可能な社会へ。」は全角14文字で、14 × 6.8 = 95.2%。
   980px以下は1カラムになりレイアウトが変わるため、そこには適用しない（従来どおり）。 */
@media (min-width: 981px) {
  /* 見出しと写真枠の文言を「同じ実サイズ」に揃えるため、基準となるコンテナは
     カードではなく .social-inner に置き、両者を同じ幅から算出する。 */
  .social-inner {
    container-type: inline-size;
    --social-heading-size: min(var(--type-section-copy), 2.4cqw);
  }

  .social-copy-card h2 {
    white-space: nowrap;
    font-size: clamp(20px, 2.1vw, 29px); /* コンテナクエリ非対応ブラウザ用のフォールバック */
    font-size: var(--social-heading-size);
  }

  /* 写真枠（SOCIAL画像のプレースホルダ）の見出しも同じサイズに揃える */
  .social-visual .photo-slot strong {
    font-size: clamp(20px, 2.1vw, 29px); /* 同上 */
    font-size: var(--social-heading-size);
  }

  /* 写真2枚を横並びから縦積みへ。横並びでは1枚あたりの内側が約162pxしかなく、
     見出しと同じサイズ（約28px）では指定した改行が入りきらないため。
     縦積みにすると内側は約451pxになり、最長12文字（約340px）が1行に収まる。 */
  .social-visual {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* 横並び時の段差（ずらし配置）は縦積みでは不要 */
  .social-photo.secondary {
    margin-top: 0;
  }
}

/* ============================================================
   お問い合わせページ（contact.html）
   既存トークン（--brand / --brand-line / --ink / --muted）だけで組む。
   外部CSSフレームワークは使わない（確定方針：外部CDN不使用）。
   ============================================================ */
.contact-page-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(100%, 820px);
}

/* display 指定に負けないよう、hidden 属性を確実に効かせる（段階の出し分けに使用） */
.contact-form-area [hidden] {
  display: none !important;
}

/* 下層ページ（CONTACT等）の先頭セクション:
   固定ヘッダーの真下から始まるため、そのままだと見出し上の余白が約23pxしかなく
   他セクション間の間隔（約115px）と不揃いだった。ヘッダーに隠れる高さぶん
   上paddingを足して、見た目の余白を他セクションと同じにする（2026-07-26 木村さん指摘） */
.subpage-top {
  padding-top: calc(clamp(78px, 9vw, 116px) + 88px);
}

/* CONTACTページの見出しはセンター寄せ（index側CONTACTセクションと同じ扱い）。
   .about-section .title-line { margin-inline: 0 } に後勝ちで線もセンターに戻す */
.about-section .section-title.center .title-line {
  margin-inline: auto;
}

.contact-form-lead {
  margin: 0 0 32px;
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: var(--w-body); /* 2026-07-26 監査: リード文は読む文章=400 */
  line-height: 1.9;
  text-align: center;
}

.form-card {
  padding: clamp(24px, 4vw, 46px);
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 28px;
  box-shadow: 0 10px 40px -10px rgba(14, 36, 92, 0.08);
}

.form-step-title {
  margin: 0 0 12px;
  color: var(--ink);
  /* 2026-07-26 監査: 20〜26pxの独自サイズ×900は語彙外 → カード見出しの語彙（22〜28px・800）へ */
  font-size: var(--type-card-title);
  font-weight: var(--w-title);
  line-height: 1.4;
}

.form-row {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

.form-label {
  color: var(--ink);
  /* 項目名は 14px→17px（+3px） */
  font-size: 17px;
  font-weight: var(--w-medium); /* 2026-07-26 監査: 項目名の極太900→600 */
}

.form-required {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  color: var(--red);
  font-size: 11px;
  font-weight: var(--w-medium); /* 2026-07-26 監査: 赤バッジの極太900→600 */
  letter-spacing: 0.08em;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 24%, transparent);
  border-radius: 4px;
  vertical-align: 2px;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--w-body); /* 2026-07-26 監査: 入力文字は標準400 */
  line-height: 1.7;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.form-control::placeholder {
  /* 見本文字は「入力済みの文字より明らかに薄く・太さは標準」（2026-07-26 木村さん指摘で太字700を撤回） */
  color: color-mix(in srgb, var(--muted) 55%, var(--white));
  font-weight: var(--w-body);
}

.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32, 62, 149, 0.12);
  outline: none;
}

.form-control.is-invalid {
  background: #fff6f6;
  border-color: var(--red);
}

select.form-control {
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
}

.form-error {
  margin: 0;
  color: var(--red);
  font-size: 13px;
  font-weight: var(--w-medium); /* 2026-07-26 監査: 赤が既に強調・太さは600で十分 */
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--w-body); /* 2026-07-26 監査: 注記は読む文章=400 */
  line-height: 1.9;
}

.form-note + .form-note {
  margin-top: 12px;
}

/* ハニーポット：利用者からは完全に隠す（機械だけが埋める前提） */
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-consent {
  padding: 20px;
  margin-bottom: 32px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
}

.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-body); /* 2026-07-26 監査: 同意文は読む文章=400 */
  cursor: pointer;
}

.form-check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--brand);
  cursor: pointer;
  flex: 0 0 auto;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
}

/* 確認画面の一覧（会社概要の表と同じ見え方に揃える） */
/* 確認表（見本帳 §3f）— 正典3a「スマート表（.company-table）」と同じ組み。
   2026-07-26 是正: 面を薄青の入れ子パネルにしていた（白い器の中に白い器＝面が沈む）のをやめ、
   .form-card を唯一の白い器として、その中の「行」として置く。会社概要の表と同じ文法。 */
.form-confirm {
  padding: 0;
  margin: 28px 0 0;
}

/* 行を2列に組む土台。会社概要の表は基底ルール（.company-table div）から display:grid を
   受け取っているが、確認表はそのセレクタに入らないのでここで同じ土台を敷く。
   列幅・余白・罫線・文字は後段で会社概要の表とルールを共有する（値の複製をしない）。 */
.form-confirm > div {
  display: grid;
}

/* 行の組み・文字・罫線は「会社概要の表」とルールを共有する（値を複製しない）。
   実体は .company-section .company-table 群のセレクタに .form-confirm を併記してある＝
   片方だけ直して食い違う事故が構造的に起きない。ここでは確認表だけの追加分を書く。 */
.form-confirm dd {
  white-space: pre-wrap;
  word-break: break-word;
}

/* 未入力は「無い」ことを示すメタ情報なので13px以下＝灰色でよい（決定10の適用外） */
.form-confirm dd .empty {
  color: var(--muted);
  font-size: var(--type-small);
}

/* 完了画面（見本帳 §3f）— 2026-07-26 新設・木村さんA案「落ち着いた完了（安心を渡して終える）」。
   新しい形は作らず、下層見出し（.subhead）の細線＋英字と、既存の白パネル／丸枠CTAで組む。 */
.form-done .form-done-eyebrow {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.form-done .form-done-eyebrow::before {
  content: "";
  display: block;
  width: 96px;
  height: 1px;
  margin-bottom: 20px;
  background: rgba(14, 36, 92, 0.4); /* .subhead::before と同じ細線 */
}

.form-done h2 {
  margin: 0 0 16px;
  color: var(--heading-color);
  font-size: var(--type-section-copy);
  font-weight: var(--w-title);
  line-height: 1.5;
}

.form-done .form-done-body {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-body-lg);
  font-weight: var(--w-body);
  line-height: 1.9;
}

.form-done .form-done-meta {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--brand-line);
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: var(--w-body);
  line-height: 1.9;
}

.form-done .form-actions {
  margin-top: 32px;
}

@media (max-width: 760px) {
  /* スマホは1列。ラベル下の罫線は外す（会社概要の表と同じ畳み方） */
  .form-confirm > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .form-confirm dt {
    padding-bottom: 8px;
    border-bottom: none;
  }
}

/* 会社概要の表を 15px→20px（+5px） */
.company-table dt,
.company-table dd {
  font-size: 20px;
}

/* 見出し下の日本語サブタイトルを 12px→18px。
   12px向けの広い字間（0.16em）のままだと18pxでは間延びするので詰める。
   （2026-07-26: 見出しの型を「英語→線→日本語」に全セクション統一したため、
     COMPANY/CONTACT限定だった対象を全 section-title に拡大） */
.section-title small {
  font-size: 18px;
  letter-spacing: 0.08em;
}

/* 見出しの色。従来は本文と同じ --ink(#0f172a) を継承していた。
   対象＝ヒーローのh1と、明るい背景のセクション見出し6つ。
   CONTACT・SOCIAL は濃紺背景の白文字なので対象外（巻き込むと読めなくなる）。 */
:root {
  --heading-color: var(--brand-deep); /* 2026-07-26 木村さん決定: 見出し紺はより濃い紺（#0e245c）。旧 #203e95 → 旧々 #1d3b8b */
}

/* 2026-07-26 再検証で修正: 旧クラス名(.about-section/.recruit-section)を指したままで
   ABOUT US・RECRUIT の見出しだけ黒のまま取り残されていた → 現行の -bold 系に更新 */
.hero-content h1,
.about-bold .section-title h2,
#mission .section-title h2,
#service .section-title h2,
.release-section .section-title h2,
.company-section .section-title h2,
.recruit-bold .section-title h2 {
  color: var(--heading-color);
}

/* COMPANY Top Message：本文が7段落・約18行と長くなったため、
   「左に見出し・右に本文」の2カラムから「見出しを上・本文を下」の1カラムへ変更。
   2カラムのままだと見出し3行（約155px）に対し本文が約690pxとなり、左が大きく空く。
   本文は読みやすい幅 700px（約41文字/行）に制限する。

   なお元CSSは本文の <p> に grid-column/grid-row を明示しているため、段落を直接
   並べると全部が同じセルに重なる。ラッパーで1つのグリッド項目として受けている。 */
.company-message {
  grid-template-columns: minmax(0, 1fr);
}

.company-message h2,
.company-message h3,
.company-message .company-message-body,
.company-message .signature.compact {
  grid-column: 1;
  grid-row: auto;
}

.company-message .company-message-body {
  /* ここを display: grid にしてはいけない。中の <p> が grid item になり、
     .company-message p:not(.kicker) の grid-column:2 / grid-row:2 が効いて
     全段落が同じセルに重なる。通常フローで積んで、間隔は margin で取る。 */
  display: block;
  /* 枠いっぱいに広げ、左右の余白をカードのpaddingで揃える（右だけ空いて見えたため） */
  max-width: none;
  /* 見出しとの間隔を 50px にする。.company-message の row-gap が 16px あるので
     ここは 34px（グリッドではマージンの相殺が起きないため単純に加算される）。 */
  margin-top: 34px;
}

/* 段落側にも max-width:720px が効いているので併せて解除する */
.company-message .company-message-body > p {
  max-width: none;
}

/* 段落間の余白（2026-07-25 変更）。
   以前は 0 にしていたが、それは1文だけの短い段落が7つ並ぶ旧原稿での判断。
   現行の原稿は1段落が3〜4行あり、余白0だと全体が一つの塊に見えて読みづらい。
   といって行間の倍（約32px）は空きすぎるので、その中間の18pxにする。 */
.company-message .company-message-body > p + p {
  margin-top: 18px;
}

/* 会社概要「事業内容」の2行箇条書き。行頭の「・」は擬似要素で置き、
   折り返した2行目が「・」の下にもぐらないよう字下げを揃える。 */
.company-table .company-biz {
  list-style: none;
  margin: 0;
  padding: 0;
}
.company-table .company-biz li {
  padding-left: 1em;
  text-indent: -1em;
}
.company-table .company-biz li::before {
  content: "・";
}

/* 署名「代表取締役 国末竜矢」を 15px→18px（+3px） */
.company-message .signature.compact strong {
  font-size: 18px;
}

/* SOCIAL：プレースホルダに実写真を入れる。既存の .image-card と同じ作りに合わせ、
   写真の上に「ドットメッシュ＋濃紺グラデ」を重ねて白文字の可読性を保つ
   （オーバーレイのグラデ値は .image-card::after / .recruit-media::after と同一）。 */
.social-photo .card-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  border-radius: inherit;
}

.social-photo.has-photo::before {
  inset: 0;
  /* 写真(.card-photo, z-index:0)より必ず上に乗せる。同じz-indexだとDOMで後ろにある
     img が上に描画され、グラデーションが見えなくなる。 */
  z-index: 1;
  width: auto;
  height: auto;
  /* RECRUIT（.recruit-media::after）と同じ左→右の濃紺グラデ。
     ドットメッシュは指示により付けない。 */
  background: linear-gradient(90deg,
    rgba(14, 36, 92, 0.94) 0%,
    rgba(14, 36, 92, 0.80) 40%,
    rgba(14, 36, 92, 0.42) 70%,
    rgba(14, 36, 92, 0.20) 100%);
  border: 0;
  border-radius: inherit;
}

/* プレースホルダ用の装飾（下部のヘアライン）は実写真では不要 */
.social-photo.has-photo::after {
  display: none;
}

/* 文言はグラデーション(z-index:1)よりさらに上に置く */
.social-photo.has-photo strong {
  position: relative;
  z-index: 2;
}

/* ============================================================
   2026-07-26 見出しの型の全セクション統一（英語→線→日本語ラベル）
   ============================================================ */

/* SOCIAL IMPACT に標準の section-title を新設。
   このセクションは濃紺背景なので、見出し・線・ラベルを白系に反転する。
   幅は .social-inner と同じ min(100%, var(--max)) で中央に揃える。 */
.social-section .section-title {
  position: relative;
  z-index: 1;
  width: min(100%, var(--max));
  margin-inline: auto;
}
.social-section .section-title h2 {
  color: var(--white);
}
.social-section .section-title small {
  color: rgba(255, 255, 255, 0.68);
}
.social-section .title-line {
  background: var(--white);
}

/* MESSAGE（代表メッセージ）は company-section の白背景・幅・paddingをそのまま継承する。
   当初は上padding 0 にしていたが、他のセクション境界はどこも
   「前の下padding＋自分の上padding」の2枚分なので、0だと MESSAGE の上だけ
   間隔が半分になり不揃いだった（2026-07-26 木村さん指摘で修正）。 */

/* SEO対応: 線・日本語ラベルを h2 の内側へ移動（見出しに日本語キーワードを持たせる）。
   .section-title の grid gap 12px が内側では効かなくなるぶんをマージンで補い、
   実測の間隔（h2→線30px・線→日本語22px）を1pxも変えずに維持する。 */
.section-title h2 .title-line {
  margin-top: 30px;
}
.section-title h2 small {
  margin-top: 22px;
  line-height: 1.4;
}

/* RELEASE: 上端だけ色付きで下に溶けるグラデをやめ、帯として成立させる */
.release-section {
  background: var(--brand-soft);
}

/* MESSAGE: COMPANY(白)との境界を色で見せる */
.message-section {
  background: var(--brand-soft);
}


/* ============================================================
   2026-07-26 RECRUIT刷新（bold-v1モックから移植・木村さん採用）
   全幅写真ステージ＋白カードの重なり＋丸枠矢印CTA。
   旧 .recruit-section / .recruit-card / .job-card は不使用（後日掃除）。
   語彙: 角丸14px・影float・太さ700/900・濃紺#0e245c(--brand-deep)
   ============================================================ */
.recruit-bold {
  padding: clamp(92px, 10vw, 142px) 0 clamp(120px, 14vw, 200px);
  background: var(--white);
}
.recruit-bold-head,
.recruit-bold-inner {
  /* ABOUT/SERVICEと同じく 1180px 中央カラムに統一 */
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  padding: 0 var(--gutter);
  margin: 0 auto;
}
.recruit-stage {
  position: relative;
  /* 2026-07-26修正: 本家BIZ ELITEの実測では写真は全幅ではなく上限つき
     （2300px画面で実幅1104px・高さ454px）。100%のままだと広い画面で
     写真が巨大化して視認性が崩れるため、幅・高さとも上限を入れる。
     1440px画面では従来どおり画面いっぱいに見える値。 */
  width: min(100%, 1500px);
  margin: 48px auto 0;
}
.recruit-stage img {
  display: block;
  width: 100%;
  height: clamp(400px, 42vw, 600px);
  object-fit: cover;
}
.recruit-float {
  position: absolute;
  bottom: -96px;
  left: clamp(24px, 6vw, 88px);
  /* ABOUT/SERVICEのカードと同じ680px固定幅に統一（木村さん指摘） */
  width: min(680px, calc(100vw - 48px));
  padding: 56px 60px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(14, 36, 92, 0.32);
}
.recruit-float h3 {
  margin: 16px 0 0;
  color: var(--brand-deep);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 900;
  line-height: 1.4;
}
.recruit-float p {
  margin: 24px 0 0;
  line-height: 1.9;
}
/* 丸枠矢印CTA（bold-v1のモチーフ） */
.cta-circle {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.cta-circle i {
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border: 1px solid var(--brand-deep);
  border-radius: 50%;
  font-style: normal;
  font-size: 17px;
  transition: background 0.24s ease, color 0.24s ease;
}
.cta-circle:hover i {
  background: var(--brand-deep);
  color: var(--white);
}
/* スマホ: 重なりをやめて自然な積みに */
@media (max-width: 760px) {
  .recruit-stage img {
    height: 48vh;
  }
  .recruit-float {
    position: static;
    width: auto;
    margin: -64px 24px 0;
    padding: 32px 28px;
  }
}

/* ============================================================
   2026-07-26 ABOUT刷新（bold-v1モックから移植・木村さん採用）
   RECRUITと同じ型: 白地見出し＋全幅写真ステージに白カード。
   その下に下層ページ about.html への入口カード3枚
   （使命・会社概要・代表メッセージ本文は about.html へ移動し
   TOPを短くする）。旧 .about-section / .about-copy はTOPでは
   不使用（contact/privacy の下層先頭セクションでは継続使用）。
   ============================================================ */
.about-bold {
  /* 下端余白: 直後のSERVICE帯(薄青)が入口カードに密着して見えるため
     他セクション間と同じリズムを入れる（2026-07-26 木村さん指摘） */
  padding: clamp(92px, 10vw, 142px) 0 clamp(88px, 11vw, 150px);
  background: var(--white);
}
.about-bold-head,
.about-bold-inner {
  /* 見出し・カード列は SOCIAL と同じ 1180px 中央カラム（--max）に揃える。
     左右にたっぷり余白＝一流サイトの型（2026-07-26 木村さん判断）。
     写真ステージ・コラージュ帯だけが全幅でメリハリを出す。 */
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  padding: 0 var(--gutter);
  margin: 0 auto;
}
/* ---- 2026-07-26 ABOUT斜めコラージュ帯（ABCash応用・about-collage-v1モック採用） ----
   傾いたタイル群をまっすぐな長方形の窓（clip）で切り抜く。
   帯の外周はきっちり長方形・中のタイルは斜め・四辺で見切れる。
   旧 .about-stage / .about-float はTOPでは不使用（後日掃除）。 */
/* 見出し下の空白は SERVICE/RECRUIT と同じルール（標準margin＋ステージ側48px）に統一
   （2026-07-26 木村さん指示・旧「詰める24px」を撤回） */
.collage-clip {
  margin-top: 48px;
}
.collage-clip {
  position: relative;
  overflow: hidden;
  /* 窓を中身より低くして、タイルが四辺すべてで切れる=長方形に見せる */
  height: clamp(380px, 40vw, 560px);
}
.collage-tilt {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 128vw;
  transform: translate(-50%, -50%) rotate(-5deg);
}
.collage-row {
  display: flex;
  gap: 26px;
}
/* 2段目は横に少しずらして目地を互い違いにする */
.collage-row.offset {
  margin-left: -9vw;
  margin-right: 9vw;
}
.collage-item {
  /* 既定は全タイル同幅。横長タイルだけ --w で枠数を指定（2枠+目地=2.15） */
  flex: var(--w, 1);
  margin: 0;
  padding: 10px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(14, 36, 92, 0.4);
}
.collage-item img {
  display: block;
  width: 100%;
  height: clamp(210px, 21vw, 300px);
  object-fit: cover;
  border-radius: 8px;
}
/* 白カード（旧 .about-float と同じ見た目・コラージュ帯に少し重ねる） */
.collage-card {
  position: relative;
  z-index: 2;
  max-width: 680px;
  /* 2026-07-26 木村さん指摘: 画面基準(6vw)だと広い画面でカラム外へ流れる
     → about-bold-inner(1180pxカラム)の内側に置き、左端を他セクションと同じ1本に揃える */
  margin: -56px auto 0 0;
  padding: 56px 60px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(14, 36, 92, 0.32);
}
.collage-card .about-statement {
  margin: 0;
  color: var(--brand-deep);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 900;
  line-height: 1.4;
}
.collage-card p {
  line-height: 1.9;
}
.collage-card .about-statement + p {
  margin: 28px 0 0;
}
@media (max-width: 760px) {
  .collage-clip {
    height: 64vw;
  }
  .collage-tilt {
    gap: 12px;
    width: 175vw;
    transform: translate(-50%, -50%) rotate(-4deg);
  }
  .collage-row {
    gap: 12px;
  }
  .collage-row.offset {
    margin-left: -14vw;
    margin-right: 14vw;
  }
  .collage-item {
    padding: 5px;
  }
  .collage-item img {
    height: 24vw;
    border-radius: 6px;
  }
  .collage-card {
    max-width: none;
    margin: -24px 24px 0;
    padding: 32px 28px;
  }
}
/* 下層ページ（about.html）入口カード */
.about-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  /* コラージュ化でカードが static になったため 200px→96px（浮きカード重なり時代の待ち余白） */
  margin-top: 96px;
}
.about-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 44px 40px;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  text-decoration: none;
  /* box-shadow単独指定だと出現アニメ（.motion-itemのopacity/transform）を上書きして
     ベタッと表示になる（2026-07-26 木村さん指摘）→ 3プロパティを合成して両立 */
  transition:
    box-shadow 0.24s ease,
    opacity 0.9s ease var(--motion-delay, 0ms),
    transform 0.9s ease var(--motion-delay, 0ms);
}
.about-link-card small {
  display: block;
  color: var(--brand);
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.about-link-card strong {
  display: block;
  margin-top: 8px;
  color: var(--brand-deep);
  font-size: 17px;
  font-weight: var(--w-strong);
}
.about-link-card i {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--brand-deep);
  border-radius: 50%;
  color: var(--brand-deep);
  font-style: normal;
  font-size: 15px;
  transition: background 0.24s ease, color 0.24s ease;
}
.about-link-card:hover {
  box-shadow: 0 18px 40px -20px rgba(14, 36, 92, 0.28);
}
.about-link-card:hover i {
  background: var(--brand-deep);
  color: var(--white);
}
/* スマホ: 重なりをやめて自然な積みに（RECRUITと同じ扱い） */
@media (max-width: 760px) {
  .about-links {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 64px;
  }
  .about-link-card {
    padding: 28px 24px;
  }
}

/* ============================================================
   2026-07-26 SERVICE刷新（ABOUTと同じステージ型に統一・木村さん指示）
   白地見出し＋全幅写真に白カード（ロゴ・リード・丸枠矢印CTA）＋
   数字カード3枚。旧 .service-feature / .service-metrics / band-tint
   はTOPでは不使用（後日掃除）。
   ============================================================ */
.service-bold {
  /* 下端: 白カードがステージ写真の下に96pxはみ出すぶんを足して
     次セクションとの見た目の余白を他と揃える（数字カード撤去後） */
  padding: clamp(92px, 10vw, 142px) 0 calc(clamp(88px, 11vw, 150px) + 96px);
  /* 薄青の帯（RELEASE/MESSAGEと同じ --brand-soft）で
     白のABOUTとの境目を見せる（木村さん指示） */
  background: var(--brand-soft);
}
.service-bold-head,
.service-bold-inner {
  /* ABOUTと同じく 1180px 中央カラムに統一 */
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  padding: 0 var(--gutter);
  margin: 0 auto;
}
.service-stage {
  position: relative;
  width: min(100%, 1500px);
  margin: 48px auto 0;
}
/* > を付けて全幅指定をステージ直下の写真だけに限定
   （カード内のフヤセルロゴまで全幅化して巨大表示になるのを防ぐ） */
.service-stage > img {
  display: block;
  width: 100%;
  height: clamp(400px, 42vw, 600px);
  object-fit: cover;
}
.service-float {
  position: absolute;
  bottom: -96px;
  left: clamp(24px, 6vw, 88px);
  /* SERVICEのカードだけは中身に合った幅（短い見出しなので680px固定だと
     余りが出て不格好・木村さん判断）。ABOUT/RECRUITは680px固定。 */
  max-width: 680px;
  padding: 56px 60px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(14, 36, 92, 0.32);
}
.service-float-logo {
  display: block;
  width: auto;
  height: 40px;
}
.service-float h3 {
  margin: 20px 0 0;
  color: var(--brand-deep);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 900;
  line-height: 1.4;
}
.service-float p {
  margin: 24px 0 0;
  line-height: 1.9;
}
/* スマホ: 重なりをやめて自然な積みに（ABOUT/RECRUITと同じ扱い） */
@media (max-width: 760px) {
  .service-bold {
    padding-bottom: clamp(88px, 11vw, 150px);
  }
  .service-stage > img {
    height: 48vh;
  }
  .service-float {
    position: static;
    width: auto;
    max-width: none;
    margin: -64px 24px 0;
    padding: 32px 28px;
  }
}

/* ============================================================
   RELEASE 一覧の調整（2026-07-26 佐藤さん指示）
   ============================================================ */

/* 文字サイズは語彙表（--type-*）に乗せる（2026-07-26 木村さん指示・旧19px/16px直書きを置換）。
   日付・タグ=メタ情報なのでサイト共通のラベル役（12px・字間広め）・
   タイトル=標準の本文（15px・TOPも下層も同じ。2026-07-26「TOPも直して」で統一） */
.release-item time,
.release-item div span {
  font-size: var(--type-label);
}

.release-item p {
  font-size: var(--type-body);
}

/* NEWバッジを本文の直後へ。
   元は position:absolute で left:0 に固定され、.release-item p の
   padding-left:58px で空けた場所に重ねる作りだった（そのためHTMLの並び順を
   変えても位置が動かない）。絶対配置をやめて通常の行の流れに戻す。 */
.new-mark {
  font-size: var(--type-label);
  margin: 0 0 0 10px;
}

.release-item p {
  padding-left: 0;
  padding-right: 0;
}

.release-item .new-mark {
  position: static;
  transform: none;
}

/* 19pxのまま1行に収めるため、枠を 1000px→1200px へ。
   本文が使える幅が 688px→888px になり、最長の
   「受講者3万人突破記念セミナーを…」（約712px）が折り返さずに収まる。 */
.release-inner {
  width: min(100%, 1200px);
}

/* ============================================================
   2026-07-26 下層ページ共通の型
   （mockups/loop-company-v1.html を正典として移植・木村さん承認済み）

   対象: mission.html / company.html / message.html / contact.html / privacy.html
   ・パンくず帯（.breadcrumbs）＝ヘッダーの逃げもここが担う
   ・コンパクト見出し（.subhead）＝細線 → 英字 → 日本語・左揃え
   ・面は「パンくず帯〜フッター直前」まで薄青（--brand-soft）1枚。
     パネル/カードは白＋1px --brand-line の枠。
   ・回遊カード帯（.loop-nav）

   TOP（index.html）には .breadcrumbs / .subhead / .loop-nav / .mission-page /
   .company-section / .about-section が1つも無いため、この節はTOPの見た目に
   影響しない（grep で確認済み）。
   ============================================================ */

/* ---- パンくず（ヘッダー下の薄い帯・TOP › ページ名） ---- */
.breadcrumbs {
  padding: 122px var(--gutter) 18px; /* 上=固定ヘッダーの逃げ */
  background: var(--brand-soft);
}

.breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 1000px); /* 本文と同じ左端ラインに揃える */
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: var(--w-medium); /* 2026-07-26 監査: ラベル役=600 */
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--brand);
}

.breadcrumbs .sep {
  color: var(--muted);
}

.breadcrumbs .current {
  color: var(--brand-deep);
}

/* ---- コンパクト見出し（細線 → COMPANY → 会社概要 / 左揃え） ---- */
.subhead {
  margin: 0 0 48px;
}

.subhead::before {
  content: "";
  display: block;
  width: 96px;
  height: 1px;
  margin-bottom: 20px;
  background: rgba(14, 36, 92, 0.4);
}

.subhead h1,
.subhead h2 {
  /* 下層の頁見出しはSEO都合でh1（2026-07-26昇格）。h2は見本帳・release詳細用に残す */
  margin: 0;
  color: var(--heading-color); /* 見出し色は語彙1変数に集約（2026-07-26 再検証） */
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.subhead small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--w-body); /* 2026-07-26 監査: 見出し下の日本語=標準（TOPの決定6と統一） */
  letter-spacing: 0.14em;
}

/* ---- COMPANY / MESSAGE ページの面と表 ----
   ABCash corporate風のスマート化: 薄青の面＋太字 → 白パネル＋極細罫線＋軽い文字。
   上paddingが48pxなのは、パンくず帯が固定ヘッダーの逃げを担っているため。 */
.company-section {
  padding: 48px var(--gutter) clamp(72px, 8vw, 96px);
  background: var(--brand-soft);
}

.company-section .company-table {
  padding: clamp(40px, 5vw, 60px) clamp(28px, 5vw, 72px);
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  box-shadow: 0 14px 40px -30px rgba(14, 36, 92, 0.25);
}

.company-section .company-table div,
.form-confirm > div,
.legal-window > div {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  padding: 36px 0 0;
  border-bottom: none;
}

.company-section .company-table div:first-child,
.form-confirm > div:first-child,
.legal-window > div:first-child {
  padding-top: 0; /* パネルのpaddingと二重にならないように */
}

.company-section .company-table dt,
.form-confirm dt,
.legal-window dt {
  padding-bottom: 28px;
  color: var(--brand-deep);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(32, 62, 149, 0.45); /* ラベル下: 極細・やや濃 */
}

.company-section .company-table dd,
.form-confirm dd,
.legal-window dd {
  padding-bottom: 28px;
  /* 決定10: 15px以上の読む文章は黒。灰色は13px以下のメタ情報だけ
     （2026-07-26 是正: 見本帳§3の文章と実装が食い違っていた＝お手本の側の違反） */
  color: var(--ink);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  border-bottom: 1px solid rgba(219, 231, 247, 0.9); /* 値下: 極細・ごく薄 */
}

.company-section .company-table div:last-child dt,
.company-section .company-table div:last-child dd,
.form-confirm > div:last-child dt,
.form-confirm > div:last-child dd,
.legal-window > div:last-child dt,
.legal-window > div:last-child dd {
  border-bottom: none;
}

@media (max-width: 760px) {
  .company-section .company-table div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .company-section .company-table dt {
    padding-bottom: 8px;
    border-bottom: none;
  }
}

/* ---- CONTACT / PRIVACY の先頭セクションも同じ面・同じ列に ---- */
.about-section {
  padding: 48px var(--gutter) clamp(72px, 8vw, 96px);
  background: var(--brand-soft);
  border-bottom: none;
}

.about-inner {
  width: min(100%, 1000px);
}

.contact-page-inner {
  width: min(100%, 1000px);
}

.contact-form-area {
  max-width: 820px;
}

.contact-form-lead {
  text-align: left;
}

/* ---- アクセス（COMPANYページ・表の下） ---- */
.access-block {
  width: min(100%, 1000px);
  margin: clamp(56px, 7vw, 88px) auto 0;
}

.access-block h2,
.access-block h3 {
  margin: 0 0 20px;
  color: var(--brand-deep);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.access-map {
  display: block;
  width: 100%;
  height: clamp(280px, 32vw, 420px);
  border: 0;
  border-radius: 14px;
}

.access-block address {
  /* 2026-07-26 木村さん決定Q3: 語彙外の14pxをやめ、フッターの住所と同じ語彙へ */
  margin-top: 18px;
  font-style: normal;
  color: var(--brand-deep);
  font-size: var(--type-small);
  line-height: 1.9;
}

.access-block address strong {
  /* 社名だけ本文サイズで少し立たせる（住所本体は13px＝フッターと同じ） */
  font-size: var(--type-body);
}

/* ---- 回遊カード帯（下層ページの下部・薄青の面をそのまま続ける） ---- */
.loop-nav {
  padding: 0 0 clamp(80px, 9vw, 112px);
  background: var(--brand-soft);
}

.loop-nav .about-links {
  margin-top: 0;
}

.loop-nav .about-bold-inner {
  width: min(100%, calc(1000px + var(--gutter) * 2));
}

.loop-nav .about-link-card {
  border: 1px solid var(--brand-line);
  box-shadow: 0 10px 30px -24px rgba(14, 36, 92, 0.3);
}

@media (max-width: 760px) {
  .loop-nav .about-links,
  .loop-nav.two-up .about-links {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Weight governance（文字の太さの語彙・2026-07-26）
   ------------------------------------------------------------
   「小さい文字まで太字(900)で見にくい」の解消。太さは4段だけ:
     --w-heading 900 … 見出し・大きな数値
     --w-strong  700 … 強調・ボタン・リンクCTA
     --w-medium  600 … 小さな英字ラベル・キッカー・準強調
     --w-body    400 … 本文・注記・住所などの読む文章
   新しい太さの直書きは禁止（番人 tools/check-css.mjs が検出）。
   ============================================================ */
:root {
  --w-heading: 900;
  --w-title: 800; /* 下層ページのカード見出し・小見出し（900より落ち着いた段・2026-07-26追加） */
  --w-strong: 700;
  --w-medium: 600;
  --w-body: 400;
}

/* --- 本文（読む文章）は 400 に戻す --- */
.service-feature p,
.social-inner p,
.social-copy-card p,
.recruit-card p,
.social-list li,
.job-card p,
.disclaimer p,
.footer-main p,
.about-copy p,
.contact-section .contact-inner > p,
.legal-article p,
.legal-article li {
  font-weight: var(--w-body);
}

/* 本文中の強調は 700（本文が400に戻ったぶん、差がちゃんと出る） */
.social-list li strong,
.disclaimer strong {
  font-weight: var(--w-strong);
}

/* --- 小さな英字ラベル・キッカー類は 900 → 600 --- */
.kicker,
.hero-content .kicker,
.research-inner .kicker,
.social-inner .kicker,
.social-copy-card .kicker,
.company-message .kicker,
.desktop-nav a,
.hero-proof span,
.scroll-note span,
.hero-data-card small,
.dash-label,
.dashboard-note span,
.social-card-topline span,
.social-mini-metrics span,
.label,
.recruit-float .label,
.recruit-job > span,
.footer-nav a,
.release-item div span {
  font-weight: var(--w-medium);
}

/* --- ボタン・CTAは 900 → 700（押せる要素の強さは残す） --- */
.btn,
.nav-pill,
.cta-circle,
.recruit-job a {
  font-weight: var(--w-strong);
}

/* --- お知らせ一覧：タイトルは「読む文章」＝標準400。日付はタグと同じメタ情報＝ラベル役600 --- */
.release-item p {
  font-weight: var(--w-body);
}
.release-item time {
  font-weight: var(--w-medium);
}

/* ABOUT USハブ（about.html）: 入口カード3枚をsubhead直下に詰める
   （.about-links の既定 margin-top:200px はTOP専用のため） */
.about-hub .about-links {
  margin-top: 0;
}

/* --- 見出し下の日本語サブタイトル（私たちについて/事業内容/お知らせ等）は
       標準の太さ＋黒字（2026-07-26 木村さん指示）。
       濃紺背景のSOCIAL/CONTACTは既存の白指定(高specificity)がそのまま勝つ＝白のまま --- */
.section-title small {
  font-weight: var(--w-body);
  color: var(--ink);
}


/* ============================================================
   2026-07-26 mission/message スマート版（companyの質感に統一・木村さん承認）
   mission = ABCash mission型: 白パネル1枚に MISSION/VISION/VALUE の3行
   message = グラデ・ゴースト英字・ドット網・境界線を撤去して白パネル化
   ============================================================ */
.mv-panel {
  padding: clamp(40px, 5vw, 60px) clamp(28px, 5vw, 72px);
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  box-shadow: 0 14px 40px -30px rgba(14, 36, 92, 0.25);
}
.mv-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(36px, 4vw, 48px) 0;
}
.mv-row + .mv-row {
  border-top: 1px solid rgba(219, 231, 247, 0.9); /* 行区切り: 極細・ごく薄 */
}
.mv-row:first-child { padding-top: 0; }
.mv-row:last-child { padding-bottom: 0; }
.mv-label {
  align-self: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(32, 62, 149, 0.45); /* ラベル下: 極細・やや濃 */
}
.mv-label strong {
  display: block;
  color: var(--brand-deep);
  font-size: var(--type-body-lg);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
}
.mv-label small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: var(--w-strong);
  letter-spacing: 0.14em;
}
.mv-body > h2,
.mv-body > h3 {
  /* 直下の子に限定: .mv-value内の見出し（h3昇格後）へ漏れないように（2026-07-26） */
  margin: 0;
  color: var(--brand-deep);
  font-size: var(--type-card-title);
  font-weight: var(--w-title);
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.mv-body > p {
  margin: 18px 0 0;
  /* 見出しの下に極細線→本文（採用FAQと同じ処方・2026-07-26 木村さん指示でmv型にも適用） */
  padding-top: 14px;
  border-top: 1px solid var(--brand-line);
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  font-size: var(--type-body);
  font-weight: var(--w-body);
  line-height: 2;
}
.mv-value + .mv-value { margin-top: 36px; }
.mv-value h3,
.mv-value h4 {
  margin: 0;
  color: var(--brand-deep);
  font-size: var(--type-body-lg);
  font-weight: var(--w-strong);
  letter-spacing: 0.04em;
}
.mv-value .cap {
  margin: 6px 0 0;
  color: var(--brand);
  font-size: var(--type-small);
  font-weight: var(--w-strong);
  letter-spacing: 0.08em;
}
.mv-value p:not(.cap) {
  margin: 10px 0 0;
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  font-size: var(--type-body);
  font-weight: var(--w-body);
  line-height: 2;
}
@media (max-width: 760px) {
  .mv-row { grid-template-columns: 1fr; gap: 16px; }
  .mv-label { border-bottom: none; padding-bottom: 0; }
}

/* ---- SERVICEページ（service.html）: フヤセル紹介＋メイン講師紹介 ---- */
.svc-logo-line { margin: 6px 0 26px; }
/* 公式ロックアップの組み（ロゴ＋種別ラベル）を下層の左揃え軸に載せる
   （2026-07-26 木村さん判断委任: ページ全体が左軸1本なのでロゴも左・中央配置は撤回）。
   幅は左軸バランスで上限360px */
.svc-logo-line img { width: min(60%, 360px); height: auto; display: block; }
.svc-logo-line .svc-logo-tag {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: var(--type-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
}
.svc-usp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
}
.svc-usp div {
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  box-shadow: 0 10px 30px -24px rgba(14, 36, 92, 0.3);
}
.svc-usp small {
  display: block;
  color: var(--brand);
  font-size: var(--type-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.svc-usp strong {
  display: block;
  margin-top: 8px;
  color: var(--brand-deep);
  font-size: var(--type-body-lg);
  font-weight: var(--w-strong);
}
.svc-usp p {
  margin: 10px 0 0;
  /* 決定10: 事業紹介の本文は黒（2026-07-26 是正・描画監査で検出） */
  color: var(--ink);
  font-size: var(--type-body);
  font-weight: var(--w-body);
  line-height: 1.9;
}
.svc-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: var(--type-micro);
  font-weight: var(--w-body);
}
.svc-program {
  display: grid;
  gap: clamp(48px, 6vw, 72px);
  margin-top: 36px;
}
/* 開閉パネル(details.job)内で使うときの調整＋本文型 */
.mv-body p + .job { margin-top: 18px; }
.job-detail .svc-program {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--brand-line);
}
.job-detail .job-text {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--brand-line);
  color: var(--ink); /* 本文は黒（決定10） */
  font-size: var(--type-body);
  font-weight: var(--w-body);
  line-height: 1.9;
}
.svc-program > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.svc-program > div:nth-child(even) figure {
  order: 2; /* 偶数ブロックはイラストを右へ（左右交互のリズム） */
}
/* ============================================================
   PROGRAMのイラスト合成: 納品デザイン(fuyaseru/index.html .b_07)の
   完全再現。サイズ%・座標・easing・duration・delayは原典の値のまま。
   entrance = AOS相当(is-visibleで発火) / 浮遊 = fluffy1〜3
   ============================================================ */
.svc-fig {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
}
.svc-fig .f { display: block; }
.svc-fig .f img { width: 100%; display: block; }

/* 原典: .e55 width69% / .e60 width88.5%(wrap96%) / .e65 width64.5% left-12% */
.svc-fig-1 .f-main { width: 69%; margin: 0 auto; }
.svc-fig-2 .f-main { width: 88.5%; margin: 0 auto; }
.svc-fig-3 .f-main { width: 64.5%; margin: 0 auto; position: relative; left: -12%; }

/* 原典の絶対配置（.e55_2 / .e60_2〜5 / .e65_2〜3） */
.svc-fig .f-bulb  { position: absolute; width: 12.5%; top: 7%;  right: 11%; }
.svc-fig .f-purse { position: absolute; width: 24.8%; top: -4%; left: 10%; }
.svc-fig .f-notes { position: absolute; width: 19.5%; top: 51%; right: 2%; }
.svc-fig .f-coins { position: absolute; width: 18.5%; top: 3%;  right: -1%; }
.svc-fig .f-stack { position: absolute; width: 17.9%; top: 53%; left: -4%; }
/* 原典の座標基準はカード全体高。イラスト基準に実寸換算:
   arrow: top7%×H≈イラスト上端+3.5% / chart: top22%×H≈イラスト高の51% */
.svc-fig .f-arrow { position: absolute; width: 22.5%; top: 3.5%; right: 7%; }
.svc-fig .f-chart { position: absolute; width: 18%;   top: 51%;  right: 10%; }

/* 上下ふわふわ（原典のfluffy1〜3をそのまま） */
@keyframes fluffy1 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(7px); }
  100% { transform: translateY(0); }
}
@keyframes fluffy2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
@keyframes fluffy3 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(8px); }
  100% { transform: translateY(0); }
}
.svc-fig-2 .f-main  img { animation: fluffy1 3s   ease-in-out .2s infinite alternate; }
.svc-fig-2 .f-purse img { animation: fluffy2 3.4s ease-in-out .5s infinite alternate; }
.svc-fig-2 .f-notes img { animation: fluffy3 3.8s ease-in-out .9s infinite alternate; }

/* entrance（原典のAOS指定を is-visible 発火で再現）
   e55: fade-up 500ms ease-out-cubic delay300
   e55_2: fade-up-small(30px) 900ms ease-in-out-back delay600
   e60_wrap: fade-up 500ms delay300
   e65: fade-left-small(30px) 500ms delay300
   e65_2: zoom-in-right-small(x-20px scale.65) 1200ms ease-in-out-back delay500
   e65_3: zoom-out-right-small(x-12px scale1.05) 500ms delay900
   e57/e62/e67(ロゴ): zoom-out(scale1.2) 500ms delay300 */
.svc-program > div.motion-item .svc-fig-1 .f-main,
.svc-program > div.motion-item .svc-fig-2 {
  opacity: 0;
  transform: translateY(100px);
  transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) .3s, opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1) .3s;
}
.svc-program > div.motion-item .f-bulb {
  opacity: 0;
  transform: translateY(30px);
  transition: transform .9s cubic-bezier(0.68, -0.55, 0.265, 1.55) .6s, opacity .9s cubic-bezier(0.68, -0.55, 0.265, 1.55) .6s;
}
.svc-program > div.motion-item .svc-fig-3 .f-main {
  opacity: 0;
  transform: translateX(30px);
  transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) .3s, opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1) .3s;
}
.svc-program > div.motion-item .f-arrow {
  opacity: 0;
  transform: translateX(-20px) scale(0.65);
  transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) .5s, opacity 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) .5s;
}
.svc-program > div.motion-item .f-chart {
  opacity: 0;
  transform: translateX(-12px) scale(1.05);
  transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) .9s, opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1) .9s;
}
.svc-program > div.motion-item .svc-program-logo {
  opacity: 0;
  transform: scale(1.2);
  transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1) .3s, opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1) .3s;
}
.svc-program > div.motion-item.is-visible .svc-fig-1 .f-main,
.svc-program > div.motion-item.is-visible .svc-fig-2,
.svc-program > div.motion-item.is-visible .svc-fig-3 .f-main,
.svc-program > div.motion-item.is-visible .f-bulb,
.svc-program > div.motion-item.is-visible .f-arrow,
.svc-program > div.motion-item.is-visible .f-chart,
.svc-program > div.motion-item.is-visible .svc-program-logo {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .svc-fig .f img { animation: none; }
  .svc-program > div.motion-item .f,
  .svc-program > div.motion-item .svc-fig-2,
  .svc-program > div.motion-item .svc-program-logo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.svc-program-logo {
  display: block;
  width: 72%; /* 原典比率(カード幅の78〜80%)に準拠 */
  max-width: 320px;
  height: auto;
  margin: 18px 0 12px;
}
.svc-program p {
  margin: 0;
  /* 決定10: 事業紹介の本文は黒（2026-07-26 是正・描画監査で検出） */
  color: var(--ink);
  font-size: var(--type-body);
  font-weight: var(--w-body);
  line-height: 2;
}
.svc-program .cap {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: var(--type-small);
  font-weight: var(--w-strong);
  letter-spacing: 0.08em;
}
.svc-photos {
  margin-top: 28px;
}
.svc-photos figure { margin: 0; }
.svc-photos img {
  display: block;
  width: 100%;
  height: clamp(240px, 26vw, 340px);
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--brand-line);
}
.svc-disclaimer {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: var(--w-body);
  line-height: 1.9;
}
.svc-cta { margin-top: 36px; }
@media (max-width: 760px) {
  .svc-usp { grid-template-columns: 1fr; }
  .svc-program { gap: 52px; }
  .svc-program > div { grid-template-columns: 1fr; gap: 20px; }
  .svc-program > div figure { order: -1; } /* スマホは常にイラストが上 */
  .svc-program figure img { max-height: 170px; }
  .svc-photos img { height: auto; }
}

/* message: 器をcompanyの白パネルと同じに（境界線=カード上の線も撤去） */
.message-section {
  background: var(--brand-soft);
  border-block: none;
}
.company-message {
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  box-shadow: 0 14px 40px -30px rgba(14, 36, 92, 0.25);
  padding: clamp(40px, 5vw, 60px) clamp(28px, 5vw, 72px);
}
.company-message::before,
.company-message::after {
  display: none; /* ゴースト英字・ドット網を消す */
}
.company-message h2,
.company-message h3 {
  color: var(--brand-deep);
  font-size: var(--type-card-title);
  font-weight: var(--w-title);
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.company-message .company-message-body > p {
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  font-size: var(--type-body-lg);
  font-weight: var(--w-body);
  line-height: 2.1;
}

/* ============================================================
   ヘッダー: ABOUT US ドロップダウン（2026-07-26 木村さん指示の最適解）
   ------------------------------------------------------------
   ABOUT US = クリックで about.html ハブ・マウスオーバー（or Tabフォーカス）で
   下層3ページ（MISSION/COMPANY/MESSAGE）のパネルを表示。
   上段から MISSION/COMPANY の単独項目は撤去（ABOUT US 配下へ集約）。
   ============================================================ */
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* 「開く」印の小さな山形。下線(::after)と衝突しないよう ::before を使う */
.nav-group > a {
  padding-right: 16px;
}
.nav-group > a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.24s ease;
}
.nav-group:hover > a::before,
.nav-group:focus-within > a::before {
  transform: translateY(-30%) rotate(225deg);
}
/* パネル。padding-top はホバーが途切れない橋（見た目は透明） */
.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  padding-top: 14px;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
.nav-drop-panel {
  min-width: 250px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -28px rgba(14, 36, 92, 0.35);
  backdrop-filter: blur(16px);
}
.nav-drop-panel a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--ink);
  font-size: var(--type-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
}
/* ナビ共通の下線アニメはパネル内では使わない（面のハイライトに置き換え） */
.nav-drop-panel a::after {
  display: none;
}
.nav-drop-panel a:hover,
.nav-drop-panel a:focus-visible,
.nav-drop-panel a[aria-current="page"] {
  color: var(--brand);
  background: var(--brand-soft);
}
.nav-drop-panel a small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--type-micro);
  font-weight: var(--w-body);
  letter-spacing: 0.04em;
}
/* スマホのハンバーガー内: ABOUT US 配下の3件はインデントで階層を示す */
.mobile-nav-list .nav-sub {
  padding-left: 30px;
  opacity: 0.85;
}

/* ============================================================
   フッター共通化（2026-07-26 木村さん指示）
   ------------------------------------------------------------
   全7ページ同一マークアップ。左=ブランド・住所／右=サイトマップ3列
   （全ページを掲載・フヤセル外部リンクは載せない）／最下段=コピーライト。
   文字は語彙のラベル役（EN 12px 600＋日本語小書き）で統一。
   ============================================================ */
.footer {
  display: block;
  padding: 0;
}
.footer-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  padding: 72px var(--gutter) 56px;
  margin: 0 auto;
}
.footer-address {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: var(--w-body);
  line-height: 2;
}
.footer-map {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 8px 64px;
  align-content: start;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-map a {
  display: block;
  padding: 6px 0;
  color: var(--ink);
  font-size: var(--type-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.24s ease;
}
.footer-map a:hover,
.footer-map a:focus-visible {
  color: var(--brand);
}
.footer-map a small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--type-micro);
  font-weight: var(--w-body);
  letter-spacing: 0.04em;
}
.footer-bottom {
  border-top: 1px solid var(--brand-line);
}
.footer-bottom p {
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  padding: 22px var(--gutter);
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--type-micro);
  font-weight: var(--w-body);
  letter-spacing: 0.1em;
}
@media (max-width: 900px) {
  .footer-wrap {
    flex-direction: column;
    gap: 40px;
  }
  .footer-map {
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
  }
}

/* CONTACT（濃紺背景）のボタンも「丸枠矢印CTA」のルールに統一（2026-07-26 木村さん指示）。
   背景が濃紺なので白黒反転版：文字白・丸枠白、ホバーで丸が白く塗られ矢印が濃紺になる
   （明背景版の「丸が濃紺に塗られ矢印が白」と同じ動きの裏返し） */
.cta-circle.cta-invert {
  color: var(--white);
}
.cta-circle.cta-invert i {
  border-color: var(--white);
}
.cta-circle.cta-invert:hover i,
.cta-circle.cta-invert:focus-visible i {
  background: var(--white);
  color: var(--brand-deep);
}

/* フッターのリンクにもナビと同じ「左→右に流れる下線」ルールを適用（2026-07-26 木村さん指示）。
   下線は英語ラベル（span）の幅にだけ敷く。ホバーで日本語小書きも行ごと青くする */
.footer-map a > span {
  position: relative;
  display: inline-block;
}
.footer-map a > span::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}
.footer-map a:hover > span::after,
.footer-map a:focus-visible > span::after {
  transform: scaleX(1);
}
.footer-map a small {
  transition: color 0.24s ease;
}
.footer-map a:hover small,
.footer-map a:focus-visible small {
  color: var(--brand);
}

/* ============================================================
   RELEASE 下層（一覧 release.html・詳細 release-YYYYMMDD.html）
   2026-07-26 木村さん指示「一覧と詳細の2階層を共通素材で」
   一覧は TOP と同じ .release-list/.release-item をそのまま使用。
   ============================================================ */
.release-article .release-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0;
}
.release-article .release-meta time {
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
}
.release-article .release-meta span {
  padding: 4px 12px;
  color: var(--brand);
  font-size: var(--type-label);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  background: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
}
.release-article h1,
.release-article h3 {
  /* 記事タイトルはSEO都合でh1（2026-07-26昇格）。h3は見本帳用に残す */
  margin: 18px 0 0;
  color: var(--brand-deep);
  font-size: var(--type-card-title);
  font-weight: var(--w-title);
  line-height: 1.6;
}
.release-article .release-body {
  margin: 18px 0 0;
  color: var(--ink); /* 本文は黒（2026-07-26 決定: 灰色は13px以下のメタ情報のみ） */
  font-size: var(--type-body-lg);
  font-weight: var(--w-body);
  line-height: 2;
}
.release-article .release-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: var(--w-body);
}
/* 一覧・TOP共通: 行リンクの中の日付・タグ・本文はリンク色に引きずられない（既定色を維持） */

/* RELEASEの本文（詳細ページ）も他の下層本文と同じ標準サイズ（--type-body=15px）。
   一覧タイトルは上の .release-item p で全ページ15pxに統一済み */
.release-article .release-body {
  font-size: var(--type-body);
}

/* RELEASE詳細の写真（プレス素材の流用・2026-07-26）。白パネル内に角丸＋細枠で置く */
.release-article figure {
  margin: 26px 0 0;
}
.release-article figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
}
.release-article figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: var(--w-body);
}

/* ============================================================
   2026-07-26 RECRUIT下層 募集要項（marvmakers.co.jp/recruit構造を参考・木村さん指示）
   職種カード = details/summary の開閉式（JS不要・キーボード操作可）。
   語彙は既存トークンのみ: --type-* / --w-* / --brand-* ・角丸14px・1px細線。
   ============================================================ */
.job-group {
  margin-top: 32px;
}
.job-group + .job-group {
  margin-top: 48px;
}
.job-group-title {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: var(--type-label);
  font-weight: var(--w-strong);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.job {
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  background: var(--white);
}
.job + .job {
  margin-top: 14px;
}
.job summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
.job summary::-webkit-details-marker {
  display: none;
}
.job-head {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.job-name {
  color: var(--brand-deep);
  font-size: var(--type-body-lg);
  font-weight: var(--w-title);
  letter-spacing: 0.04em;
}
.job-meta {
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: var(--w-body);
}
/* 開閉印: 丸枠の＋/−（cta-circleと同じモチーフ） */
.job-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--brand-deep);
  border-radius: 50%;
  color: var(--brand-deep);
  font-style: normal;
  font-size: var(--type-body);
  transition: background 0.24s ease, color 0.24s ease;
}
.job-toggle::before {
  content: "＋";
}
.job[open] .job-toggle::before {
  content: "－";
}
.job summary:hover .job-toggle {
  background: var(--brand-deep);
  color: var(--white);
}
.job-detail {
  padding: 4px 26px 28px;
}
.job-table {
  margin: 0;
  border-top: 1px solid var(--brand-line);
}
.job-table > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--brand-line);
}
.job-table dt {
  color: var(--brand);
  font-size: var(--type-small);
  font-weight: var(--w-strong);
  letter-spacing: 0.04em;
}
.job-table dd {
  margin: 0;
  /* 決定10: 15px本文に灰色を使わない（2026-07-26 是正・CLAUDE.md宿題8の残件） */
  color: var(--ink);
  font-size: var(--type-body);
  font-weight: var(--w-body);
  line-height: 1.9;
}
.job-detail .cta-circle {
  margin-top: 24px;
}
.job-detail .cta-circle i {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}
/* スマホ: 表を縦積みに・余白を詰める */
@media (max-width: 760px) {
  .job summary {
    padding: 18px 18px;
  }
  .job-detail {
    padding: 2px 18px 22px;
  }
  .job-table > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* フォームの操作もサイト共通の丸枠矢印CTAに統一（2026-07-26 木村さん指示・ピル型.btnの取り残し解消）。
   進む=「→」・戻る=「←」。button要素で使うためのリセット付き */
button.cta-circle {
  padding: 0;
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.form-actions .cta-circle {
  margin-top: 8px;
}
/* 戻る系は控えめ（グレー）。ホバーで丸が塗られる動きは共通ルールのまま */
.cta-circle.cta-back {
  color: var(--muted);
}
.cta-circle.cta-back i {
  border-color: var(--muted);
}
.cta-circle.cta-back:hover i,
.cta-circle.cta-back:focus-visible i {
  background: var(--muted);
  color: var(--white);
}


/* ============================================================
   パンくず・カテゴリ見出しのホバー下線（recruit.html一時実装から移設・2026-07-26 handoff）
   ------------------------------------------------------------
   フッター/ナビと同じ「左→右に流れる下線」（2px --brand・0.24s ease）を
   全ページのパンくずと、採用ページの募集要項/FAQカテゴリ見出しへ。
   .job-group-title はリンクではない飾りの演出（cursorは変えない）。
   ============================================================ */
.breadcrumbs a,
.job-group-title {
  position: relative;
}
.job-group-title {
  width: fit-content; /* 無いと下線がカラム全幅に伸びる */
}
.breadcrumbs a::after,
.job-group-title::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}
.breadcrumbs a:hover::after,
.breadcrumbs a:focus-visible::after,
.job-group-title:hover::after {
  transform: scaleX(1);
}

/* FAQ回答（recruit.html 14箇所のインラインstyleから集約）。
   色はhandoff時点の--mutedでなく決定10（本文は黒）を適用 */
.job-detail > p {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--brand-line);
  color: var(--ink);
}

/* ============================================================
   お知らせ行のホバーを語彙の型へ是正（2026-07-26 木村さん指摘「ルール違反では」）
   ------------------------------------------------------------
   旧演出（横6pxずれ・タグ色反転・光のマウス追従・NEW色変化）は語彙の3種に無い
   → ドロップダウン項目と同じ確立済みの型「薄青の面＋タイトルがブランド青」に統一。
   日付・タグ・NEWは据え置き（メタ情報はホバーで着替えない）。
   ============================================================ */
.release-item:hover {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  box-shadow: none;
  transform: none;
}
.release-item:hover time {
  color: var(--muted);
}
.release-item:hover div span {
  color: var(--brand);
  background: var(--white);
  border-color: var(--brand-line);
}
.release-item:hover p {
  color: var(--brand);
}
.release-item:hover .new-mark {
  /* 通常時と同値＝ホバーで着替えない */
  color: var(--red);
  background: transparent;
  border-color: color-mix(in srgb, var(--red) 22%, transparent);
}

/* お知らせ行のタイトルにもフッターと同じ「左→右に流れる下線」（2026-07-26 木村さん指示）。
   薄青面＋タイトル青（既存）に、下線の伸びが加わる。下線はタイトル文字幅だけ（span包み） */
.release-item p > span {
  position: relative;
  display: inline-block;
}
.release-item p > span::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}
.release-item:hover p > span::after,
.release-item:focus-visible p > span::after {
  transform: scaleX(1);
}