@charset "UTF-8";
/* Tokens: tokens.css. All sections use normal document flow. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
body {
  margin: 0;
  color: var(--color-foreground);
  background: var(--color-background);
  font-family: var(--font-ja);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
body.is-locked {
  overflow: hidden;
}
h1,
h2,
h3,
h4,
p,
dl,
dd,
ul,
ol,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
address {
  font-style: normal;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--color-accent-foreground);
  outline-offset: var(--space-1);
}
::selection {
  color: var(--color-primary-foreground);
  background: var(--color-primary);
}
[data-theme="dark"] ::selection {
  color: var(--color-primary);
  background: var(--color-white);
}
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1100;
  padding: var(--space-3) var(--space-4);
  color: var(--color-foreground);
  background: var(--color-background);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: var(--space-section);
}
#page-main {
  display: flow-root;
}
main > section,
.footer-message,
.site-footer {
  position: relative;
  background: var(--color-background);
}
.br-sp {
  display: none;
}

/* Shared components */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.section-title {
  font-family: var(--font-en-serif);
  font-size: var(--fs-section);
  font-weight: var(--weight-regular);
  line-height: var(--lh-section);
}
.section-subtitle {
  font-size: var(--fs-section-ja);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-normal);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 131px;
  min-height: var(--space-12);
  padding: var(--space-3) var(--space-6);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  box-shadow: var(--shadow-button);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--lh-normal);
  text-align: center;
  transition:
    background-color 0.25s,
    border-radius 0.3s;
}
.btn:hover {
  background: var(--color-accent-foreground);
  border-radius: var(--space-6);
}
.btn--outline {
  color: var(--color-primary);
  background: var(--color-background);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-accent);
}
.must-tag {
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-primary-foreground);
  background: var(--color-primary);
  font-size: var(--text-xxs);
  font-weight: var(--weight-medium);
  line-height: var(--lh-none);
}

/* Header and mobile menu */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  height: var(--header-h);
  padding-inline: var(--space-12);
  background: transparent;
  color: var(--color-foreground);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.site-header__logo {
  width: 128px;
  flex-shrink: 0;
}
.site-header__logo img {
  width: 100%;
  height: auto;
}
.site-header__nav,
.site-header__menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-header__link {
  display: block;
  padding-block: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
}
.link-roll {
  display: block;
  position: relative;
  overflow: hidden;
}
.link-roll__base,
.link-roll__hover {
  display: block;
  transition: transform 0.6s var(--ease-out-expo);
}
.link-roll__hover {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}
a:hover .link-roll__base {
  transform: translateY(-110%);
}
a:hover .link-roll__hover {
  transform: translateY(0);
}
.menu-toggle {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: var(--space-10);
  height: var(--space-10);
  margin-right: calc(-1 * var(--space-2));
}
.menu-toggle span {
  position: absolute;
  left: var(--space-2);
  width: var(--space-6);
  height: 2px;
  background: currentColor;
  transition:
    transform 0.35s var(--ease-out-expo),
    top 0.35s var(--ease-out-expo);
}
.menu-toggle span:first-child {
  top: 14px;
}
.menu-toggle span:last-child {
  top: 24px;
}
.menu-toggle[aria-expanded="true"] span {
  top: 19px;
}
.menu-toggle[aria-expanded="true"] span:first-child {
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:last-child {
  transform: rotate(-45deg);
}
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 104px var(--space-7) var(--space-7);
  background: var(--color-background);
  color: var(--color-primary);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  clip-path: circle(0 at calc(100% - 36px) calc(var(--header-h) / 2));
  transition:
    clip-path 0.65s var(--ease-out-expo),
    visibility 0.65s;
}
.mobile-menu.is-open {
  visibility: visible;
  /* Make the first link focusable before the opening animation's first frame. */
  transition-property: clip-path;
  clip-path: circle(150% at calc(100% - 36px) calc(var(--header-h) / 2));
}
.mobile-menu__nav {
  margin-top: auto;
}
.mobile-menu__item {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition:
    opacity 0.3s ease,
    transform 0.4s var(--ease-out-expo);
}
.mobile-menu.is-open .mobile-menu__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--menu-index, 0) * 0.06s + 0.1s);
}
.mobile-menu__item:nth-child(2) {
  --menu-index: 1;
}
.mobile-menu__item:nth-child(3) {
  --menu-index: 2;
}
.mobile-menu__item:nth-child(4) {
  --menu-index: 3;
}
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  border-bottom: var(--border-thin) solid var(--color-menu-border);
}
.mobile-menu__index {
  font: var(--text-sm) var(--font-en-serif);
  letter-spacing: 0.1em;
}
.mobile-menu__en {
  font: var(--text-4xl) var(--font-en-serif);
}
.mobile-menu__ja {
  margin-left: auto;
  font-size: var(--text-xs);
}
.mobile-menu__close {
  width: 100%;
  margin-top: var(--space-10);
}
.mobile-menu__foot {
  min-height: 15px;
  text-align: center;
  font-size: var(--text-xxs);
  color: var(--color-primary-foreground);
}

/* Initial access animation; scroll-driven horse and section stacking removed. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  transform: translateY(0);
}
.intro.is-leaving {
  transform: translateY(-100%);
  transition: transform 0.85s var(--ease-inout-hard);
}
.intro.is-done {
  display: none;
}
.intro__copy {
  color: var(--color-primary-foreground);
  font-family: var(--font-ja-heading);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  text-align: center;
  opacity: 0;
  filter: blur(18px);
}
.intro.is-armed .intro__copy {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity 0.6s var(--ease-out-expo),
    filter 1.1s var(--ease-out-expo);
}
.intro.is-leaving .intro__copy {
  opacity: 0;
  transform: translateY(-0.6em);
  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}
#page-main {
  transform: translateY(var(--space-12));
  opacity: 0.001;
}
body.is-revealed #page-main {
  transform: none;
  opacity: 1;
  transition:
    transform 0.9s var(--ease-out-expo) 0.12s,
    opacity 0.7s ease 0.12s;
}
body.no-intro #page-main {
  transform: none;
  opacity: 1;
}

/* Hero: shared copy layout for the two motion proposals. */
.hero {
  --hero-visual-scale: 1;
  display: grid;
  min-height: 100svh;
  padding: var(--space-20);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "copy visual";
  align-items: stretch;
  gap: var(--space-12);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero__copy {
  grid-area: copy;
  align-self: end;
  display: grid;
  gap: var(--space-7);
  min-width: 0;
}
.hero__visual-stage {
  grid-area: visual;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  container-type: size;
  min-width: 0;
  min-height: var(--space-32);
  padding-block: var(--space-10);
}
.hero__visual {
  position: relative;
  isolation: isolate;
  width: min(230cqw, 185cqh, calc(1280px * var(--hero-visual-scale)));
  aspect-ratio: 1;
}
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__title {
  width: min(100%, 591.147px);
  line-height: 0;
}
.hero__title img {
  width: 100%;
  height: auto;
}
.hero__tagline {
  font-family: var(--font-ja-heading);
  font-size: var(--fs-hero-tagline);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-normal);
  letter-spacing: 0.1em;
}
/* About photo placement uses ratios from the 1440 px composition. */
.about {
  min-height: 1046px;
}
.about__inner {
  --duration-reveal: 0.75s;
  position: relative;
  z-index: 1;
  text-align: center;
}
.about__headline {
  font-family: var(--font-ja-heading);
  font-size: var(--fs-about-heading);
  font-weight: var(--weight-bold);
  line-height: var(--lh-normal);
}
.about__highlight {
  color: var(--color-primary);
}
.about__body {
  margin-top: var(--space-20);
  font-size: var(--fs-about-body);
  font-weight: var(--weight-bold);
  line-height: var(--lh-about);
}
.about__body p + p {
  margin-top: calc(var(--fs-about-body) * var(--lh-about));
}
.about__photos {
  position: absolute;
  inset: 0;
  max-width: 1440px;
  margin-inline: auto;
  pointer-events: none;
}
.about__photo {
  position: absolute;
  height: auto;
}
.about__photo img {
  width: 100%;
  height: auto;
}
.about__photo--accounting {
  left: 7.222%;
  top: 348px;
  width: 15.316%;
}
.about__photo--meeting {
  left: 74.375%;
  top: 348px;
  width: 11.944%;
}
.about__photo--phone {
  left: 20.556%;
  top: 622px;
  width: 9.271%;
}
.about__photo--typing {
  left: 68.403%;
  top: 789px;
  width: 11.978%;
}

@media (min-width: 1200px) {
  /* At 1440px: 80px side insets, 48px column gap and a 1280px sphere.
     Only very wide, short windows reach the sphere's height-based ceiling. */
  .hero {
    padding-inline: clamp(var(--space-12), calc(100vw / 18), var(--space-40));
  }
  .hero__inner {
    max-width: none;
    gap: clamp(var(--space-8), calc(100vw / 30), var(--space-24));
  }
  .hero__visual {
    width: min(calc(100vw * 8 / 9), 160svh);
  }
  .hero + .about {
    margin-block-start: calc(var(--space-20) + var(--space-10));
  }
}

/* Service introduction and outlined marquee */
.service-intro {
  position: relative;
  min-height: 800px;
  display: flex;
  align-items: center;
  padding: var(--space-40) 0 var(--space-20);
  overflow: clip;
}
.service-intro__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
}
.service-intro__head {
  flex: 0 0 324px;
}
.service-intro__lead {
  margin-top: var(--space-10);
  font-size: var(--fs-service-lead);
  line-height: var(--lh-relaxed);
}
.service-venn {
  position: relative;
  container-type: inline-size;
  flex: 0 1 600px;
  width: 600px;
  aspect-ratio: 600 / 339.291;
}
.service-venn__circle {
  position: absolute;
  top: 8.719%;
  width: 46.225%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0.166667cqw solid currentColor;
  border-radius: var(--radius-full);
}
.service-venn__circle::before {
  content: "";
  position: absolute;
  inset: -5.333cqw;
  border: 5.333cqw solid var(--venn-ring);
  border-radius: inherit;
  opacity: var(--opacity-motif);
}
.service-venn__circle--bo {
  left: 4.93%;
  color: var(--color-accent-foreground);
  --venn-ring: var(--color-primary);
}
.service-venn__circle--bc {
  left: 48.613%;
  color: var(--color-secondary);
  --venn-ring: var(--color-brand-navy-400);
}
.service-venn__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.8cqw;
  font-family: var(--font-en-serif);
  font-size: clamp(var(--text-xs), 4cqw, var(--text-2xl));
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  text-align: center;
}
.service-venn__body img {
  width: 10.2cqw;
  height: 10.2cqw;
}
.service-marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}
.service-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.service-marquee__track span {
  padding-right: var(--space-12);
  color: transparent;
  -webkit-text-stroke: 0.6px var(--color-primary);
  font-family: var(--font-en-serif);
  font-size: var(--fs-marquee);
  font-weight: var(--weight-regular);
  line-height: var(--lh-none);
  white-space: nowrap;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Service panels share one card and panel component. */
.service-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-panel {
  position: relative;
  min-width: 0;
  padding: var(--space-32) 5vw;
  overflow: hidden;
}
.service-panel--backoffice {
  background: var(--color-muted-gold);
  --service-title-color: var(--color-accent-foreground);
  --service-subtitle-color: var(--color-primary);
}
.service-panel--consulting {
  background: var(--color-muted-navy);
  --service-title-color: var(--color-secondary);
  --service-subtitle-color: var(--color-brand-navy-400);
}
.service-panel__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-inline: auto;
}
.service-panel__title {
  color: var(--service-title-color);
  font-family: var(--font-ja-heading);
  font-size: var(--fs-service-title);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-normal);
}
.service-panel__subtitle {
  margin-top: var(--space-3);
  color: var(--service-subtitle-color);
  font-family: var(--font-en-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--lh-none);
}
.service-panel__desc {
  min-height: 90px;
  margin-top: var(--space-10);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}
.service-panel__motif {
  position: absolute;
  right: 0;
  bottom: var(--space-2);
  width: var(--space-40);
  height: var(--space-40);
  opacity: var(--opacity-motif);
}
.service-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 108.667px;
  padding: var(--space-3);
  background: var(--color-card);
}
.service-card img {
  width: 26.667px;
  height: 26.667px;
}
.service-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}

/* Flow */
.flow {
  padding-block: var(--space-40);
}
.flow__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.flow__head {
  align-items: center;
}
.flow-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.flow-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 316px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border: var(--border-thin) solid var(--color-border);
  background: var(--color-card);
}
.flow-card__number {
  margin-bottom: var(--space-6);
  color: var(--color-accent-foreground);
  font: var(--fs-flow-number) / var(--lh-heading) var(--font-en-serif);
}
.flow-card__title {
  color: var(--color-black);
  font-size: var(--fs-flow-title);
  font-weight: var(--weight-bold);
  line-height: var(--lh-none);
}
.flow-card__text {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}
.flow-card__action {
  width: 100%;
  min-width: 0;
  margin-top: var(--space-6);
  padding-inline: var(--space-3);
}

/* Recruit retains a full photograph and an opaque card. */
.recruit {
  min-height: 800px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--space-20) var(--space-6);
}
.recruit__bg {
  position: absolute;
  inset: 0;
}
.recruit__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit__box {
  position: relative;
  width: min(100%, 600px);
  padding: var(--space-20) var(--space-12);
  background: var(--color-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.recruit__motif {
  position: absolute;
  width: var(--space-24);
  height: var(--space-24);
  top: -60px;
  right: -40px;
}
.recruit__text {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}
.recruit__note {
  color: var(--color-muted-foreground);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
}

/* Company */
.company__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: var(--space-10);
}
.company__photos {
  position: relative;
  width: min(100%, 518px);
  aspect-ratio: 518 / 423;
  margin-top: var(--space-10);
}
.company__photo {
  position: absolute;
}
.company__photo img {
  width: 100%;
  height: auto;
}
.company__photo--wide {
  left: 0;
  top: 0;
  width: 68.533%;
}
.company__photo--portrait {
  left: 74.131%;
  top: 37.589%;
  width: 25.772%;
}
.company__deco {
  position: absolute;
  left: 44.208%;
  top: 70.213%;
  width: 24.324%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  transform: rotate(90deg);
}
.company__deco img {
  width: 100%;
  height: 100%;
}
.company__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
}
.company__row dt {
  flex: 0 0 var(--space-20);
}
.company__row dd {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.company__list {
  list-style: disc;
  padding-left: 1.5em;
}

/* Contact */
.contact {
  padding-inline: var(--space-6);
}
.contact__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-16) var(--space-6);
  border-radius: var(--radius-panel);
  background: var(--color-muted-gold);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact__info {
  align-self: center;
  padding-inline: var(--space-18);
  color: var(--color-accent-foreground);
}
.contact__text {
  margin-top: var(--space-12);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}
.contact-form {
  min-width: 0;
  padding-inline: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-form__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--lh-none);
}
.contact-form__label:has(.must-tag) {
  min-height: var(--space-4);
}
.contact-form__input {
  display: block;
  width: 100%;
  height: var(--space-10);
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-foreground);
  background: var(--color-card);
  box-shadow: var(--shadow-input);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}
.contact-form__input::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}
.contact-form__input:focus {
  border-color: var(--color-primary);
  outline-color: var(--color-primary);
}
.contact-form__input--textarea {
  min-height: var(--space-40);
  height: var(--space-40);
  padding-block: var(--space-3);
  resize: vertical;
}
.contact-form__input[aria-invalid="true"] {
  border-color: var(--color-error);
  outline-color: var(--color-error);
}
.contact-form__error,
.contact-form__count {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}
.contact-form__error { color: var(--color-error); }
.contact-form__send-error {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  text-align: center;
}
/* 人には見せないbot判定用の入力欄 */
.contact-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.contact-form__count {
  color: var(--color-muted-foreground);
  text-align: right;
}
.contact-form__submit {
  display: flex;
  justify-content: center;
  padding-top: var(--space-3);
}
/* shadcn Checkbox's compact shape/states, using a native required checkbox. */
.contact-form__consent-field {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.contact-form__consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.consent-checkbox {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 var(--space-8);
  width: var(--space-8);
  height: var(--space-8);
  cursor: pointer;
}
.consent-checkbox__input {
  appearance: none;
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--space-1);
  background: var(--color-card);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.consent-checkbox__input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.consent-checkbox__input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.consent-checkbox__check {
  position: absolute;
  width: 12px;
  height: 12px;
  color: var(--color-primary-foreground);
  opacity: 0;
  pointer-events: none;
}
.consent-checkbox__input:checked + .consent-checkbox__check { opacity: 1; }
.contact-form__consent-text {
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}
.contact-form__consent-text a {
  color: var(--color-accent-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form__consent-text label { cursor: pointer; }
.contact-form__submit .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--color-primary);
  border-radius: var(--radius-button);
  box-shadow: none;
}
@media (forced-colors: active) {
  .consent-checkbox__input { appearance: auto; }
  .consent-checkbox__check { display: none; }
}
.contact-form__thanks {
  text-align: center;
  line-height: var(--lh-relaxed);
}
.contact-form__recaptcha {
  font-size: var(--text-xxs);
}
.contact-form__recaptcha a {
  text-decoration: underline;
}
.grecaptcha-badge {
  visibility: hidden;
}

/* Message above the gold footer */
.footer-message {
  padding-top: var(--space-40);
}
.footer-message__copy {
  margin-left: auto;
  width: max-content;
  font-size: var(--fs-footer-copy);
  font-weight: var(--weight-bold);
  line-height: var(--lh-normal);
}
.footer-message__art {
  display: block;
  width: 100%;
}
.footer-message__art img {
  width: 100%;
  height: auto;
}
.site-footer {
  padding-block: var(--space-20);
  color: var(--color-primary-foreground);
  background: var(--color-primary);
}
.footer-message + .site-footer {
  z-index: 1;
  margin-top: calc(-1 * var(--space-1));
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: var(--space-12);
}
.site-footer__credit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.site-footer__logo {
  width: 128px;
  height: auto;
}
.site-footer__address {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
}
.site-footer__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-footer__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--text-base);
  transition: opacity 0.2s ease;
}
.site-footer__nav a:hover {
  opacity: 0.8;
}
.icon-chevron {
  display: none;
  width: var(--space-4);
  height: var(--space-4);
}
.site-footer__copyright {
  grid-column: 1 / -1;
  font-size: var(--text-xxs);
}
small {
  font-size: inherit;
}

/* Privacy policy and dormant cookie component */
.privacy {
  padding-top: calc(var(--header-h) + var(--space-20));
}
.privacy__inner {
  max-width: 960px;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-primary);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-3);
}
.privacy__title {
  margin-top: var(--space-12);
  font-family: var(--font-ja-heading);
  font-size: var(--text-4xl);
}
.privacy__body {
  margin-top: var(--space-12);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}
.privacy__body p + p {
  margin-top: 1em;
}
.privacy__body h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}
.privacy__contact {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border);
}
.privacy__contact a {
  text-decoration: underline;
}
.cookie-banner {
  position: fixed;
  bottom: var(--space-6);
  left: var(--space-6);
  right: var(--space-6);
  z-index: 950;
  padding: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  background: var(--color-card);
  box-shadow: var(--shadow-header);
  transform: translateY(150%);
  transition: transform 0.6s var(--ease-out-expo);
}
.cookie-banner.is-shown {
  transform: none;
}
.cookie-banner__text {
  font-size: var(--text-xs);
}
.cookie-banner__link,
.cookie-banner__decline {
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Responsive intermediate widths: no fixed desktop column may overflow. */
@media (max-width: 1199px) {
  .hero {
    padding: var(--header-h) var(--space-12) var(--space-10);
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(var(--space-32), 1fr) auto;
    grid-template-areas: "visual" "copy";
  }
  .hero__visual-stage {
    padding-block: 0;
  }
  .hero__visual {
    width: min(175cqw, 120cqh, calc(1280px * var(--hero-visual-scale)));
    /* Keep the sphere's centre at 76% of the viewport on stacked layouts. */
    transform: translateX(26vw);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .hero {
    --hero-visual-scale: 0.8;
  }
  .service-intro__inner {
    gap: var(--space-10);
  }
  .company__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .contact__info,
  .contact-form {
    padding-inline: var(--space-6);
  }
  .flow {
    padding-block: var(--space-20);
  }
  .flow-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer__credit {
    gap: var(--space-6);
  }
  .site-footer__nav ul {
    gap: var(--space-4);
  }
}
@media (max-width: 1023px) {
  .about {
    min-height: 0;
    padding-bottom: var(--space-20);
  }
  .about__photos {
    position: relative;
    inset: auto;
    width: 307px;
    max-width: calc(100% - 64px);
    aspect-ratio: 307 / 353.515;
    margin-top: var(--space-12);
  }
  .about__photo--accounting {
    left: 0;
    top: 21.579%;
    width: 44.545%;
  }
  .about__photo--meeting {
    left: 47.879%;
    top: 0;
    width: 52.121%;
  }
  .about__photo--phone {
    left: 29.697%;
    top: 62.894%;
    width: 31.932%;
  }
  .about__photo--typing {
    left: 65.758%;
    top: 62.894%;
    width: 34.171%;
  }
  .service-panels {
    grid-template-columns: 1fr;
  }
  .service-panel {
    padding: var(--space-12) var(--space-6);
  }
  .service-panel__desc {
    min-height: 0;
  }
  .service-panel__content {
    max-width: 760px;
  }
}
@media (max-width: 767px) {
  body {
    font-weight: var(--weight-regular);
  }
  .br-pc {
    display: none;
  }
  .br-sp {
    display: inline;
  }
  .section-head {
    gap: var(--space-0-5);
  }
  .site-header {
    padding-inline: var(--space-6);
  }
  .site-header__logo {
    width: 90.353px;
  }
  .site-header__nav {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .hero {
    padding-inline: var(--space-6);
    padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
  }
  .hero__inner {
    gap: var(--space-8);
  }
  .hero__copy {
    gap: var(--space-4);
  }
  .hero__visual {
    width: min(180cqw, 110cqh);
  }
  .hero__title {
    width: min(100%, 280px);
  }
  .about__inner {
    padding-inline: var(--space-8);
  }
  .about__phrase {
    display: inline-block;
    max-width: 100%;
  }
  .about__body {
    margin-top: var(--space-8);
    font-weight: var(--weight-regular);
  }
  .service-intro {
    min-height: 0;
    padding-block: var(--space-20) var(--space-12);
  }
  .service-intro__inner {
    flex-direction: column;
    gap: var(--space-12);
  }
  .service-intro__head {
    flex: auto;
    width: 100%;
  }
  .service-intro__lead {
    margin-top: var(--space-3);
  }
  .service-venn {
    flex: auto;
    width: 100%;
    max-width: 450px;
  }
  .service-marquee__track span {
    -webkit-text-stroke-width: 0.3px;
  }
  .service-panel__title {
    font-weight: var(--weight-bold);
  }
  .service-panel__subtitle {
    margin-top: var(--space-2);
  }
  .service-panel__desc {
    margin-top: var(--space-6);
  }
  .service-panel__motif {
    width: var(--space-32);
    height: var(--space-32);
    bottom: 0;
  }
  .service-panel--consulting {
    padding-bottom: var(--space-18);
  }
  .service-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-6);
  }
  .flow {
    padding-block: var(--space-12);
  }
  .flow__inner {
    gap: var(--space-6);
  }
  .flow-cards {
    grid-template-columns: 1fr;
  }
  .flow-card {
    width: 100%;
    min-height: 0;
    padding-bottom: var(--space-8);
  }
  .flow-card__number {
    color: var(--color-primary);
  }
  .recruit {
    min-height: 600px;
  }
  .recruit__box {
    width: 300px;
    max-width: calc(100% - 26px);
    padding: var(--space-12) var(--space-6);
  }
  .recruit__text {
    font-size: var(--text-sm);
  }
  .recruit__motif {
    width: var(--space-14);
    height: var(--space-14);
    top: -36px;
    right: -20px;
  }
  .company {
    padding-bottom: var(--space-20);
  }
  .company__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .company__photos {
    margin-top: var(--space-6);
    max-width: 400px;
  }
  .company__row {
    gap: var(--space-1-5);
    padding-block: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
  }
  .company__row:last-child {
    display: block;
  }
  .company__row:last-child dt {
    margin-bottom: var(--space-1-5);
  }
  .contact {
    padding-inline: var(--space-4);
  }
  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6);
  }
  .contact__info,
  .contact-form {
    padding: 0;
  }
  .contact__text {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
  }
  .contact-form__submit .btn {
    width: 100%;
  }
  .footer-message {
    padding-top: var(--space-20);
  }
  .footer-message__inner {
    display: grid;
    grid-template-columns: minmax(0, 184px) fit-content(60%);
    align-items: start;
    justify-content: space-between;
    gap: var(--space-2);
    padding-inline: var(--space-6) var(--space-3);
  }
  .footer-message__copy {
    grid-area: 1 / 2;
    width: auto;
    margin: 0;
    padding-block: var(--space-3) var(--space-1);
    font-weight: var(--weight-medium);
  }
  .footer-message__art {
    grid-area: 1 / 1;
    align-self: end;
  }
  .site-footer {
    padding-block: var(--space-10) var(--space-6);
  }
  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }
  .site-footer__credit {
    flex-direction: column;
    gap: var(--space-4);
  }
  .site-footer__nav ul {
    display: block;
    padding-top: var(--space-2);
  }
  .site-footer__nav li + li {
    border-top: var(--border-thin) solid var(--color-white-alpha-20);
  }
  .site-footer__nav a {
    justify-content: space-between;
    padding-block: var(--space-4);
  }
  .icon-chevron {
    display: block;
  }
  .site-footer__copyright {
    text-align: center;
  }
  .privacy {
    padding-top: calc(var(--header-h) + var(--space-12));
  }
  .privacy__title {
    font-size: var(--text-2xl);
  }
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 359px) {
  .service-panel__title {
    font-size: var(--text-2xl);
  }
  .service-card {
    padding-inline: var(--space-2);
  }
  .service-card__title {
    font-size: var(--text-sm);
  }
}

/* Existing cursor and reveal interactions */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* サイズはwidth/heightの遷移で変える（scaleだと中のラベル文字がぼやける） */
  transition:
    opacity 0.3s ease,
    background-color 0.35s ease,
    width 0.5s var(--ease-out-expo),
    height 0.5s var(--ease-out-expo);
  will-change: transform;
}

.cursor.is-visible {
  opacity: 0.9;
}
.cursor.is-inverted {
  background: var(--color-white);
}
.cursor.is-active {
  width: 38px;
  height: 38px;
  opacity: 0.5;
}

/* data-cursor要素上: 200pxの円になり、中央にラベル（coming soon等）を表示 */
.cursor.has-label {
  width: 200px;
  height: 200px;
  opacity: 1;
}

.cursor__label {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cursor.is-inverted .cursor__label {
  color: var(--color-primary);
}

.cursor.has-label .cursor__label {
  opacity: 1;
  transition: opacity 0.35s ease 0.12s;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ------------------------------------------------------------
   7-2. Scrollbar — 2pxの線と24pxの操作範囲を分離。
   JSで操作可能なときだけネイティブバーを置き換える。
   タッチ端末・強制配色・JS無効時は標準のバーを使う。
------------------------------------------------------------ */
.scroll-indicator {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  html.has-custom-scrollbar {
    scrollbar-width: none;
  }
  html.has-custom-scrollbar body::-webkit-scrollbar,
  html.has-custom-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .scroll-indicator {
    display: block;
    position: fixed;
    top: var(--space-5);
    bottom: var(--space-5);
    right: 0;
    width: var(--space-6);
    z-index: 900;
    color: var(--color-primary);
    opacity: 0;
    transition:
      opacity 0.25s ease,
      color 0.35s ease;
    pointer-events: none;
    touch-action: none;
    cursor: pointer;
  }

  .scroll-indicator.is-visible {
    opacity: 1;
    pointer-events: auto;
    transition-duration: 0.12s, 0.35s;
  }

  /* 操作要素は太く、見える線だけを疑似要素で細くする。 */
  .scroll-indicator__thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: min(var(--space-14), 100%);
    border-radius: var(--radius-sm);
    cursor: grab;
  }
  .scroll-indicator__thumb::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: var(--space-0-5);
    transform: translateX(-50%);
    border-radius: var(--radius-full);
    background: currentColor;
  }
  .scroll-indicator__thumb:focus-visible {
    outline-color: currentColor;
    outline-offset: calc(-1 * var(--space-1));
  }

  .scroll-indicator.is-inverted {
    color: var(--color-white);
  }

  html.is-scrollbar-dragging,
  html.is-scrollbar-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
}

/* Reading content fades in while rising; blur is reserved for the intro. */
.reveal {
  opacity: 0;
  transform: translateY(36px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo) var(--reveal-delay, 0s),
    transform var(--duration-reveal) var(--ease-out-expo)
      var(--reveal-delay, 0s);
}

/* Keyboard interaction takes priority over the entrance sequence. */
.reveal:focus-within {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .intro {
    display: none;
  }
  #page-main,
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .cursor {
    display: none;
  }
}