@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
::view-transition-old(root) {
  animation: viewFadeOut 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-new(root) {
  animation: viewRiseIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

html.is-contactSwitch::view-transition-old(root) {
  animation: viewFadeOnlyOut 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.is-contactSwitch::view-transition-new(root) {
  animation: viewFadeOnlyIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-group(siteHeader),
::view-transition-new(siteHeader) {
  animation: none;
}

::view-transition-old(siteHeader) {
  display: none;
}

html.is-transitioning::after {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 2px;
  pointer-events: none;
  content: "";
  background-color: #1f44e0;
  animation: viewLineRun 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
  transform-origin: left;
  view-transition-name: pageLine;
}

::view-transition-group(pageLine),
::view-transition-new(pageLine) {
  animation: none;
}

::view-transition-old(pageLine) {
  display: none;
}

@keyframes viewFadeOut {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes viewFadeOnlyOut {
  to {
    opacity: 0;
  }
}
@keyframes viewFadeOnlyIn {
  from {
    opacity: 0;
  }
}
@keyframes viewRiseIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes viewLineRun {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  70% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}
* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 64px;
}
@media screen and (min-width: 768px) {
  html {
    scroll-padding-top: 80px;
  }
}

body {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: #0b0b0c;
  background-color: #f6f6f3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
body.is-menuOpen {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  a:hover {
    text-decoration: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

img,
svg {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

button {
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  appearance: none;
}

:focus-visible {
  outline: 2px solid #1f44e0;
  outline-offset: 4px;
}

@media screen and (max-width: 767px) {
  .is-pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .is-sp {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
.l-wrap {
  position: relative;
  overflow-x: clip;
}
.l-wrap::before {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.2 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
}
.l-wrap::after {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background-image: linear-gradient(to right, transparent calc(50% - 1px), rgba(138, 143, 152, 0.15) calc(50% - 1px), rgba(138, 143, 152, 0.15) 50%, transparent 50%);
  background-position: 50% 0;
  background-size: calc((100% - 32px) / 4) 100%;
}
@media screen and (min-width: 768px) {
  .l-wrap::after {
    background-size: calc(min(100% - 80px, 1200px) / 12) 100%;
  }
}

/**
 * Layout: Header
 * 下スクロールで隠れ、上スクロールで出る。黒いセクション上では is-dark で白文字に切り替える。
 * ヘッダーは sticky で 1 行分の高さを持つ。黒い KV / ページヘッダーはその高さ分だけ
 * 負の margin-top でヘッダーの下に潜り込ませ、ヘッダーが黒面に重なって見えるようにしている
 * （潜り込む側のセクションは同じ高さの padding-top で中身を押し下げる。_topKv.scss 参照）
 */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  color: #0b0b0c;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
}
@media screen and (min-width: 768px) {
  .l-header {
    height: 80px;
  }
}
.l-header::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-color: rgba(246, 246, 243, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.3s;
}
.l-header--onKv.is-atTop::before {
  background-color: rgba(246, 246, 243, 0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.l-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
}
@media screen and (min-width: 768px) {
  .l-header__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    height: 100%;
  }
}
.l-header__logo {
  position: relative;
  z-index: 10;
  display: block;
  width: 120px;
}
@media screen and (min-width: 768px) {
  .l-header__logo {
    width: 140px;
  }
}
.l-header__logo img {
  transition: filter 0.3s;
}
.l-header__toggle {
  position: relative;
  z-index: 10;
  width: 44px;
  height: 44px;
}
@media screen and (min-width: 768px) {
  .l-header__toggle {
    display: none;
  }
}
.l-header__toggleLine {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.l-header__toggleLine:nth-child(1) {
  top: 16px;
}
.l-header__toggleLine:nth-child(2) {
  top: 24px;
  width: 16px;
}
@media screen and (max-width: 767px) {
  .l-header__nav {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 96px 16px 24px;
    overflow-y: auto;
    color: #fff;
    visibility: hidden;
    background-color: #0b0b0c;
    transition: clip-path 0.25s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.25s;
    clip-path: inset(0 0 100% 0);
  }
}
@media screen and (max-width: 767px) {
  .l-header__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .l-header__list {
    display: flex;
    align-items: center;
    gap: 40px;
  }
}
@media screen and (max-width: 767px) {
  .l-header__item {
    position: relative;
    overflow: hidden;
  }
  .l-header__item::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background-color: rgba(255, 255, 255, 0.16);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scaleX(0);
    transform-origin: left;
  }
  .l-header__item:nth-child(1) {
    --delay: 0.25s;
  }
  .l-header__item:nth-child(2) {
    --delay: 0.31s;
  }
  .l-header__item:nth-child(3) {
    --delay: 0.37s;
  }
  .l-header__item:nth-child(4) {
    --delay: 0.43s;
  }
}
.l-header__link {
  position: relative;
  display: block;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
}
@media screen and (max-width: 767px) {
  .l-header__link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    font-size: clamp(40px, 12vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
    transform: translateY(110%);
  }
  .l-header__link:focus-visible {
    outline-offset: -4px;
  }
  .l-header__link:focus-visible, .l-header__link:active {
    color: #8aa0f2;
  }
  .l-header__link[aria-current] {
    color: #8aa0f2;
  }
}
@media screen and (min-width: 768px) {
  .l-header__link {
    padding: 8px 0;
  }
  .l-header__link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background-color: currentColor;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scaleX(0);
    transform-origin: right;
  }
  .l-header__link[aria-current]::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
.l-header__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media screen and (min-width: 768px) {
  .l-header__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
@media screen and (min-width: 768px) {
  .l-header__link:not(.l-header__link--contact) .c-splitText__glyph {
    transform: none;
  }
}
@media screen and (min-width: 768px) {
  .l-header__link--contact {
    padding: 10px 20px;
    border: 1px solid currentColor;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  }
  .l-header__link--contact::after {
    display: none;
  }
  .l-header__link--contact:focus-visible {
    color: #fff;
    background-color: #1f44e0;
    border-color: #1f44e0;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .l-header__link--contact:hover {
    color: #fff;
    background-color: #1f44e0;
    border-color: #1f44e0;
  }
}
@media screen and (min-width: 768px) {
  .l-header__link--contact[aria-current] {
    color: #fff;
    background-color: #1f44e0;
    border-color: #1f44e0;
  }
}
.l-header__num {
  padding-top: 8px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #8aa0f2;
}
@media screen and (min-width: 768px) {
  .l-header__num {
    display: none;
  }
}
.l-header__foot {
  display: none;
}
@media screen and (max-width: 767px) {
  .l-header__foot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 40px;
    opacity: 0;
    transition: opacity 0.25s;
  }
}
.l-header__privacy {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  transition: color 0.3s;
}
.l-header__privacy:focus-visible {
  color: #8aa0f2;
}
@media screen and (min-width: 768px) {
  .l-header__privacy:hover {
    color: #8aa0f2;
  }
}
.l-header__copy {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  color: #a1a1a6;
}
.l-header:not(.is-open) {
  view-transition-name: siteHeader;
}
.l-header.is-hidden {
  transform: translateY(-100%);
}
.l-header.is-dark {
  color: #fff;
}
.l-header.is-dark::before {
  background-color: rgba(11, 11, 12, 0.7);
}
.l-header.is-open {
  color: #fff;
}
.l-header.is-open::before {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.l-header.is-dark :focus-visible, .l-header.is-open :focus-visible {
  outline-color: #8aa0f2;
}
.l-header.is-dark .l-header__logo img, .l-header.is-open .l-header__logo img {
  filter: invert(1);
}
.l-header.is-open .l-header__toggleLine:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.l-header.is-open .l-header__toggleLine:nth-child(2) {
  width: 24px;
  transform: translateY(-4px) rotate(-45deg);
}
@media screen and (max-width: 767px) {
  .l-header.is-open .l-header__nav {
    visibility: visible;
    transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    clip-path: inset(0);
  }
}
@media screen and (max-width: 767px) {
  .l-header.is-open .l-header__item::after {
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
    transform: scaleX(1);
  }
}
@media screen and (max-width: 767px) {
  .l-header.is-open .l-header__link {
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s), color 0.3s;
    transform: none;
  }
}
@media screen and (max-width: 767px) {
  .l-header.is-open .l-header__foot {
    opacity: 1;
    transition: opacity 0.6s 0.55s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .l-header.is-open .l-header__item::after, .l-header.is-open .l-header__link, .l-header.is-open .l-header__foot {
    transition-delay: 0s;
  }
}

/**
 * Layout: Footer
 */
.l-footer {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #0b0b0c;
}
.l-footer :focus-visible {
  outline-color: #8aa0f2;
}
.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 64px 16px 0;
}
@media screen and (min-width: 768px) {
  .l-footer__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    gap: 64px;
    padding-top: 96px;
    padding-bottom: 0;
  }
}
.l-footer__main {
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 767px) {
  .l-footer__main {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .l-footer__main {
    align-items: flex-start;
    justify-content: space-between;
  }
}
.l-footer__logo {
  display: block;
  width: 80px;
}
.l-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}
@media screen and (max-width: 767px) {
  .l-footer__list {
    flex-direction: column;
    gap: 0;
  }
}
.l-footer__link {
  position: relative;
  display: inline-block;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
}
@media screen and (max-width: 767px) {
  .l-footer__link {
    display: block;
    padding: 12px 0;
  }
}
@media screen and (min-width: 768px) {
  .l-footer__link::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    content: "";
    background-color: currentColor;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scaleX(0);
    transform-origin: right;
  }
}
.l-footer__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media screen and (min-width: 768px) {
  .l-footer__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
.l-footer__link[aria-current] {
  color: #8aa0f2;
}
.l-footer__link[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.l-footer__copy {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  color: #a1a1a6;
}
.l-footer__bigText {
  height: 19vw;
  margin-top: 24px;
  overflow: hidden;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 32vw;
  font-weight: 700;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.08);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  transition: color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (min-width: 768px) {
  .l-footer:hover .l-footer__bigText {
    color: rgba(255, 255, 255, 0.12);
  }
}

/**
 * Component: Button
 * 下線付きのテキストボタン。hover で矢印が 4px 右へ動き、ラベルは 1 文字ずつ入れ替わる（c-splitText）。
 * 使い方:
 *   <a class="c-button">
 *     <span class="c-button__label c-splitText js-splitText">View More</span>
 *     <span class="c-button__arrow" aria-hidden="true">→</span>
 *   </a>
 * 色の面ごとに modifier を選ぶ（案件側から色を上書きしない）
 *   既定      : 明るい面の上（黒文字 -> hover で青）
 *   --onDark  : 黒い面の上（白文字 -> hover で薄い青）
 *   --solid   : 青い面の上の白地ボタン（CONTACT 用。hover で黒地）
 *   --fill    : 黒地白文字の面ボタン（フォームの送信・確認、404。hover で青地）
 *   --outline : 枠線ボタン（戻る・もう一度。hover で黒地）
 *   --reverse : 矢印が左のボタン（戻る）。DOM は arrow -> label の順で、両端に離さず左に詰める。他の modifier と併用する
 * --fill / --outline は <button> でも同じ見た目。disabled / aria-disabled="true" は薄く表示して操作不可にする。
 * ラベルは必ず c-splitText js-splitText の構造にする
 */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 12px 0;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
@media screen and (max-width: 767px) {
  .c-button {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .c-button {
    min-width: 240px;
  }
}
.c-button__arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-button:focus-visible {
  color: #1f44e0;
}
.c-button:focus-visible .c-button__arrow {
  transform: translateX(4px);
}
@media screen and (min-width: 768px) {
  .c-button:hover {
    color: #1f44e0;
  }
  .c-button:hover .c-button__arrow {
    transform: translateX(4px);
  }
}
.c-button--onDark {
  color: #fff;
}
.c-button--onDark:focus-visible {
  color: #8aa0f2;
}
@media screen and (min-width: 768px) {
  .c-button--onDark:hover {
    color: #8aa0f2;
  }
}
.c-button--solid {
  padding: 16px 24px;
  color: #0b0b0c;
  background-color: #fff;
  border-bottom: 0;
}
@media screen and (min-width: 768px) {
  .c-button--solid {
    min-width: 320px;
  }
}
.c-button--solid:focus-visible {
  color: #fff;
  background-color: #0b0b0c;
}
@media screen and (min-width: 768px) {
  .c-button--solid:hover {
    color: #fff;
    background-color: #0b0b0c;
  }
}
.c-button--fill, .c-button--outline {
  padding: 16px 24px;
  border-bottom: 0;
}
@media screen and (min-width: 768px) {
  .c-button--fill, .c-button--outline {
    min-width: 280px;
  }
}
.c-button--fill {
  color: #fff;
  background-color: #0b0b0c;
}
.c-button--fill:focus-visible {
  color: #fff;
  background-color: #1f44e0;
}
@media screen and (min-width: 768px) {
  .c-button--fill:hover {
    color: #fff;
    background-color: #1f44e0;
  }
}
.c-button--outline {
  color: #0b0b0c;
  border: 1px solid #0b0b0c;
}
.c-button--outline:focus-visible {
  color: #fff;
  background-color: #0b0b0c;
}
@media screen and (min-width: 768px) {
  .c-button--outline:hover {
    color: #fff;
    background-color: #0b0b0c;
  }
}
.c-button--reverse {
  justify-content: flex-start;
}
.c-button--reverse:focus-visible .c-button__arrow {
  transform: translateX(-4px);
}
@media screen and (min-width: 768px) {
  .c-button--reverse:hover .c-button__arrow {
    transform: translateX(-4px);
  }
}
.c-button:disabled, .c-button[aria-disabled=true] {
  pointer-events: none;
  cursor: default;
  opacity: 0.4;
}

/**
 * Component: Button Area
 * c-button を並べる行。SP は縦積みで全幅、PC は左寄せで横並び（c-reveal を併用する枠でもある）
 */
.c-buttonArea {
  display: flex;
  gap: 16px 40px;
}
@media screen and (max-width: 767px) {
  .c-buttonArea {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .c-buttonArea {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/**
 * Component: Contact Block
 * トップと全下層の footer 直前に置く。ページで唯一、青を面で使う。
 * 見出しは c-heading--onAccent、ボタンは c-button--solid を使う
 */
.c-contactBlock {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #1f44e0;
}
.c-contactBlock :focus-visible {
  outline-color: #fff;
}
.c-contactBlock::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: url("../images/common/contact-growth.svg") no-repeat center/100% 100%;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s cubic-bezier(0.33, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .c-contactBlock::before {
    transition: none;
  }
}
:where(.is-jsEnabled) .c-contactBlock:not(.is-inview)::before {
  clip-path: inset(0 100% 0 0);
}
.c-contactBlock__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 16px;
}
@media screen and (min-width: 768px) {
  .c-contactBlock__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    gap: 40px;
    padding-top: 160px;
    padding-bottom: 160px;
  }
}

/**
 * Component: Data List
 * 項目名と内容を罫線で区切って並べる（会社概要・アクセス・フォーム確認など）。
 * 使い方:
 *   <dl class="c-dataList">
 *     <div class="c-dataList__row"><dt class="c-dataList__term">商号</dt><dd class="c-dataList__desc">株式会社GROW</dd></div>
 *   </dl>
 * desc は改行をそのまま表示する（white-space: pre-wrap）ため、dd の中は HTML 上で改行・インデントを入れない。
 */
.c-dataList {
  border-top: 1px solid rgba(11, 11, 12, 0.16);
}
.c-dataList__row {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(11, 11, 12, 0.16);
}
@media screen and (min-width: 768px) {
  .c-dataList__row {
    grid-template-columns: 200px 1fr;
    gap: 40px;
    padding: 24px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-dataList__row {
    grid-template-columns: 160px 1fr;
    gap: 24px;
  }
}
.c-dataList__term {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .c-dataList__term {
    font-size: 16px;
  }
}
.c-dataList__desc {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/**
 * Component: Form
 * お問い合わせフォーム（入力 / 確認 / 完了の 3 パネルを data-step で切り替える）。
 * 入力欄は下線型。focus で青い線が左から伸び、エラー時は赤い線が引かれる。
 * 状態: .c-form__row.is-invalid（js が付け外し）。パネルの出し分けは CSS のみで、JS が無くても入力は表示される。
 * 使い方は dist/contact.html を参照
 */
.c-form {
  width: 100%;
}
.c-form__panel {
  display: none;
  flex-direction: column;
  gap: 48px;
}
@media screen and (min-width: 768px) {
  .c-form__panel {
    gap: 64px;
  }
}
.c-form[data-step=input] .c-form__panel[data-step-panel=input] {
  display: flex;
}
.c-form[data-step=confirm] .c-form__panel[data-step-panel=confirm] {
  display: flex;
}
.c-form[data-step=complete] .c-form__panel[data-step-panel=complete] {
  display: flex;
}
.c-form.is-changed .c-form__panel {
  animation: c-formPanelIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.c-form__heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .c-form__heading {
    font-size: 32px;
  }
}
.c-form__heading:focus {
  outline: none;
}
.c-form__lead {
  color: #5c626c;
}
.c-form__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (min-width: 768px) {
  .c-form__body {
    gap: 40px;
  }
}
.c-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.c-form__row {
  display: grid;
  gap: 12px;
}
@media screen and (min-width: 768px) {
  .c-form__row {
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-form__row {
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }
}
@media screen and (min-width: 768px) {
  .c-form__row--agree {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 768px) {
  .c-form__row--agree .c-form__field {
    padding-left: 280px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-form__row--agree .c-form__field {
    padding-left: 224px;
  }
}
@media screen and (min-width: 768px) {
  .c-form__row--choice .c-form__label {
    padding-top: 14px;
  }
}
.c-form__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .c-form__label {
    padding-top: 16px;
    font-size: 16px;
  }
}
.c-form__required {
  margin-left: 4px;
  color: #1f44e0;
}
.c-form__note {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: #5c626c;
}
.c-form__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.c-form__control {
  position: relative;
}
.c-form__input {
  width: 100%;
  height: 56px;
  padding: 0;
  font: inherit;
  font-size: 16px;
  letter-spacing: 1px;
  color: #0b0b0c;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(11, 11, 12, 0.32);
  border-radius: 0;
  transition: border-color 0.3s;
  appearance: none;
}
.c-form__input::placeholder {
  color: #5c626c;
}
.c-form__input:focus {
  outline: none;
}
.c-form__line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background-color: #1f44e0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s;
  transform: scaleX(0);
  transform-origin: left;
}
.c-form__control:focus-within .c-form__line {
  transform: scaleX(1);
}
.c-form__select {
  padding-right: 32px;
  cursor: pointer;
}
.c-form__select:required:invalid {
  color: #5c626c;
}
.c-form__select option {
  color: #0b0b0c;
}
.c-form__control--select::after {
  position: absolute;
  top: 22px;
  right: 4px;
  width: 8px;
  height: 8px;
  pointer-events: none;
  content: "";
  border-right: 1px solid #0b0b0c;
  border-bottom: 1px solid #0b0b0c;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform: rotate(45deg);
}
.c-form__control--select:focus-within::after {
  transform: translateY(4px) rotate(45deg);
}
.c-form__control--area {
  display: grid;
  min-height: 240px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(11, 11, 12, 0.32);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.c-form__control--area::after,
.c-form__control--area .c-form__textarea {
  grid-area: 1/1/2/2;
  min-width: 0;
  padding: 16px;
  margin: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border: 0;
}
.c-form__control--area::after {
  pointer-events: none;
  content: attr(data-value) " ";
  visibility: hidden;
}
.c-form__control--area:focus-within {
  border-color: #1f44e0;
  box-shadow: 0 0 0 1px #1f44e0;
}
.c-form__textarea {
  color: #0b0b0c;
  resize: none;
  background-color: transparent;
  border-radius: 0;
  overflow: hidden;
}
.c-form__textarea::placeholder {
  color: #5c626c;
}
.c-form__textarea:focus {
  outline: none;
}
.c-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.c-form__choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.c-form__choiceText {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  font-size: 14px;
  border: 1px solid rgba(11, 11, 12, 0.32);
  border-radius: 24px;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
@media screen and (min-width: 768px) {
  .c-form__choiceText {
    font-size: 16px;
  }
}
.c-form__choice input:checked + .c-form__choiceText {
  color: #fff;
  background-color: #0b0b0c;
  border-color: #0b0b0c;
}
.c-form__choice input:focus-visible + .c-form__choiceText {
  outline: 2px solid #1f44e0;
  outline-offset: 2px;
}
@media screen and (min-width: 768px) {
  .c-form__choice:hover input:not(:checked) + .c-form__choiceText {
    border-color: #0b0b0c;
  }
}
.c-form__agree {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.8;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .c-form__agree {
    font-size: 16px;
  }
}
.c-form__agree a {
  color: #1f44e0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.c-form__box {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  background-color: #fff;
  border: 1px solid #0b0b0c;
  transition: background-color 0.3s, border-color 0.3s;
}
.c-form__box::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 6px;
  content: "";
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform: rotate(-45deg) scale(0);
}
.c-form__agree input:checked + .c-form__box {
  background-color: #0b0b0c;
}
.c-form__agree input:checked + .c-form__box::after {
  transform: rotate(-45deg) scale(1);
}
.c-form__agree input:focus-visible + .c-form__box {
  outline: 2px solid #1f44e0;
  outline-offset: 2px;
}
.c-form__row--agree .c-form__note {
  margin-top: 12px;
}
.c-form__error {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.4s;
}
.c-form__errorText {
  min-height: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: #c8231d;
  opacity: 0;
  transition: opacity 0.3s;
}
.c-form__row.is-invalid .c-form__error {
  grid-template-rows: 1fr;
  margin-top: 8px;
  visibility: visible;
  transition-delay: 0s;
}
.c-form__row.is-invalid .c-form__errorText {
  opacity: 1;
}
.c-form__row.is-invalid .c-form__label {
  color: #c8231d;
}
.c-form__row.is-invalid .c-form__input {
  border-bottom-color: #c8231d;
}
.c-form__row.is-invalid .c-form__line {
  background-color: #c8231d;
  transform: scaleX(1);
}
.c-form__row.is-invalid .c-form__control--area {
  border-color: #c8231d;
}
.c-form__row.is-invalid .c-form__control--area:focus-within {
  box-shadow: 0 0 0 1px #c8231d;
}
.c-form__row.is-invalid .c-form__choiceText, .c-form__row.is-invalid .c-form__box {
  border-color: #c8231d;
}
.c-form__row.is-invalid .c-form__control, .c-form__row.is-invalid .c-form__choices, .c-form__row.is-invalid .c-form__agree {
  animation: c-formNudge 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-form__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .c-form__actions {
    flex-direction: row;
    gap: 24px;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .c-form__actions--confirm {
    flex-direction: column-reverse;
  }
}
.c-form__sendError {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.8;
  color: #c8231d;
  border: 1px solid #c8231d;
  animation: c-formRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media screen and (min-width: 768px) {
  .c-form__sendError {
    font-size: 16px;
  }
}
.c-form__confirmRow {
  animation: c-formRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.04s);
}
.c-form__done {
  width: 80px;
  height: 80px;
  overflow: visible;
  fill: none;
  stroke: #1f44e0;
  stroke-width: 2px;
  stroke-linecap: square;
}
.c-form__doneCircle {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: c-formDraw 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.c-form__doneCheck {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: c-formDraw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

@keyframes c-formPanelIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes c-formRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes c-formNudge {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@keyframes c-formDraw {
  to {
    stroke-dashoffset: 0;
  }
}
/**
 * Component: Heading
 * 番号付きラベル + 和文見出し。タグは HTML 側で選ぶ。
 * 和文は文節の途中で折らない（base の keep-all）ので、折りたい位置に <wbr> を置く。
 * modifier: --white（黒い面の上）/ --onAccent（青い面の上）
 */
.c-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-heading__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #1f44e0;
}
.c-heading__label::after {
  width: 48px;
  height: 1px;
  content: "";
  background-color: currentColor;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  transform: scaleX(0);
  transform-origin: left;
}
.c-heading__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .c-heading__title {
    font-size: clamp(32px, 3vw, 40px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-heading__title {
    font-size: 36px;
  }
}
.c-heading.is-inview .c-heading__label::after {
  transform: scaleX(1);
}
.c-heading--white {
  color: #fff;
}
.c-heading--white .c-heading__label {
  color: #8aa0f2;
}
.c-heading--onAccent {
  color: #fff;
}
.c-heading--onAccent .c-heading__label {
  color: #fff;
}

/**
 * Component: Marquee
 * 黒い面の下端などに流れる「GROW RECRUIT」の帯。輪郭だけの巨大文字で、装飾なので aria-hidden="true" を付ける。
 * 1 ページに 2 本まで。2 つの group を同じ内容で並べ、track を -50% 動かして継ぎ目なく循環させる。
 * 1 group は画面幅より長くなるよう 3 回繰り返している。
 * modifier: --reverse（逆向き）
 */
.c-marquee {
  padding-top: 48px;
  overflow: hidden;
  user-select: none;
}
@media screen and (min-width: 768px) {
  .c-marquee {
    padding-top: 64px;
  }
}
.c-marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeRun 80s linear infinite;
}
.c-marquee__group {
  display: flex;
  flex: none;
}
.c-marquee__item {
  flex: none;
  padding-right: 32px;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.24);
}
@media screen and (min-width: 768px) {
  .c-marquee__item {
    padding-right: 64px;
    font-size: 160px;
  }
}
.c-marquee--reverse .c-marquee__track {
  animation-direction: reverse;
}
@media screen and (min-width: 768px) {
  .c-marquee:hover .c-marquee__track {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-marquee__track {
    animation: none;
  }
}

@keyframes marqueeRun {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/**
 * Component: Page Header
 * 下層ページ冒頭の黒い面。パンくず + 英字の大見出し + 和文見出し。
 * ヘッダー（sticky）の高さ分だけ負の margin で潜り込ませ、同じ高さの padding-top で中身を押し下げる（_topKv.scss と同じ方式）。
 * 必ず data-header="dark" を付ける（ヘッダーが白文字に切り替わる）。
 *
 * 通常版:
 *   <div class="c-pageHeader" data-header="dark">
 *     <div class="c-pageHeader__inner">
 *       <nav class="c-pageHeader__breadcrumb" aria-label="パンくずリスト">
 *         <ol class="c-pageHeader__breadcrumbList">
 *           <li class="c-pageHeader__breadcrumbItem"><a href="./index.html">TOP</a></li>
 *           <li class="c-pageHeader__breadcrumbItem" aria-current="page">ABOUT</li>
 *         </ol>
 *       </nav>
 *       <h1 class="c-pageHeader__title">
 *         <span class="c-pageHeader__en"><span class="u-visuallyHidden">About us</span><span class="c-pageHeader__word" aria-hidden="true"><span class="c-pageHeader__char"><span class="c-pageHeader__glyph">A</span></span>...</span> <span class="c-pageHeader__word" aria-hidden="true">...</span></span>
 *         <span class="c-pageHeader__ja">会社情報</span>
 *       </h1>
 *     </div>
 *   </div>
 *
 * 英字（__en）は 1 文字ずつ下からせり上がる（CSS アニメーションのみ・JS 不要）。文字は単語（__word）ごとに nowrap の枠へ入れ、
 * 折り返しは単語の間だけにする。読み上げは u-visuallyHidden の元テキスト 1 回（文字側は aria-hidden）。
 * 遅延は nth-child で与えるため、1 単語は 8 文字まで（Engineer が最長）。
 *
 * --hero（recruit / engineer）: __inner の中を __breadcrumb + __main（任意の __label + h1）にする。写真は使わず全幅の文字で見せる。
 *   h1 の 1 行目は英字（__en。通常版より大きい）、2 行目以降は和文のキャッチ（__line を行ごとに並べる。一段小さい）。
 *   下端の帯（c-marquee）は __inner の次の兄弟として置く。
 */
.c-pageHeader {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  margin-top: -64px;
  padding-top: 128px;
  padding-bottom: 48px;
  color: #fff;
  background-color: #0b0b0c;
}
.c-pageHeader :focus-visible {
  outline-color: #8aa0f2;
}
.c-pageHeader {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .c-pageHeader {
    min-height: 520px;
    margin-top: -80px;
    padding-top: 176px;
    padding-bottom: 80px;
  }
}
.c-pageHeader__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 48px;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
}
@media screen and (min-width: 768px) {
  .c-pageHeader__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    gap: 64px;
  }
}
.c-pageHeader__breadcrumb {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  animation: pageHeaderFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.c-pageHeader__breadcrumbList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.c-pageHeader__breadcrumbItem {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a1a1a6;
}
.c-pageHeader__breadcrumbItem + .c-pageHeader__breadcrumbItem::before {
  content: "/";
}
.c-pageHeader__breadcrumbItem a {
  position: relative;
  transition: color 0.3s;
}
.c-pageHeader__breadcrumbItem a::after {
  position: absolute;
  inset: -14px -6px;
  content: "";
}
.c-pageHeader__breadcrumbItem a:focus-visible {
  color: #8aa0f2;
}
@media screen and (min-width: 768px) {
  .c-pageHeader__breadcrumbItem a:hover {
    color: #8aa0f2;
  }
}
.c-pageHeader__breadcrumbItem[aria-current] {
  color: #fff;
}
.c-pageHeader__title {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media screen and (min-width: 768px) {
  .c-pageHeader__title {
    gap: 4px;
  }
}
.c-pageHeader__line {
  display: block;
  padding-bottom: 12px;
  overflow: hidden;
}
.c-pageHeader__lineInner {
  display: block;
  animation: pageHeaderRise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.c-pageHeader__en {
  position: relative;
  display: block;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: min(16vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
}
@media screen and (min-width: 768px) {
  .c-pageHeader__en {
    font-size: min(10vw, 144px);
  }
}
.c-pageHeader__word {
  display: inline-block;
  white-space: nowrap;
}
.c-pageHeader__char {
  display: inline-block;
  padding-bottom: 12px;
  vertical-align: top;
  clip-path: inset(0 -8px);
}
.c-pageHeader__glyph {
  display: block;
  animation: pageHeaderRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.c-pageHeader__word:nth-child(1 of .c-pageHeader__word) > .c-pageHeader__char:first-child > .c-pageHeader__glyph {
  color: #ff5a1f;
}
.c-pageHeader__word .c-pageHeader__char:nth-child(1) .c-pageHeader__glyph {
  animation-delay: 0s;
}
.c-pageHeader__word + .c-pageHeader__word .c-pageHeader__char:nth-child(1) .c-pageHeader__glyph {
  animation-delay: 0.25s;
}
.c-pageHeader__word .c-pageHeader__char:nth-child(2) .c-pageHeader__glyph {
  animation-delay: 0.03s;
}
.c-pageHeader__word + .c-pageHeader__word .c-pageHeader__char:nth-child(2) .c-pageHeader__glyph {
  animation-delay: 0.28s;
}
.c-pageHeader__word .c-pageHeader__char:nth-child(3) .c-pageHeader__glyph {
  animation-delay: 0.06s;
}
.c-pageHeader__word + .c-pageHeader__word .c-pageHeader__char:nth-child(3) .c-pageHeader__glyph {
  animation-delay: 0.31s;
}
.c-pageHeader__word .c-pageHeader__char:nth-child(4) .c-pageHeader__glyph {
  animation-delay: 0.09s;
}
.c-pageHeader__word + .c-pageHeader__word .c-pageHeader__char:nth-child(4) .c-pageHeader__glyph {
  animation-delay: 0.34s;
}
.c-pageHeader__word .c-pageHeader__char:nth-child(5) .c-pageHeader__glyph {
  animation-delay: 0.12s;
}
.c-pageHeader__word + .c-pageHeader__word .c-pageHeader__char:nth-child(5) .c-pageHeader__glyph {
  animation-delay: 0.37s;
}
.c-pageHeader__word .c-pageHeader__char:nth-child(6) .c-pageHeader__glyph {
  animation-delay: 0.15s;
}
.c-pageHeader__word + .c-pageHeader__word .c-pageHeader__char:nth-child(6) .c-pageHeader__glyph {
  animation-delay: 0.4s;
}
.c-pageHeader__word .c-pageHeader__char:nth-child(7) .c-pageHeader__glyph {
  animation-delay: 0.18s;
}
.c-pageHeader__word + .c-pageHeader__word .c-pageHeader__char:nth-child(7) .c-pageHeader__glyph {
  animation-delay: 0.43s;
}
.c-pageHeader__word .c-pageHeader__char:nth-child(8) .c-pageHeader__glyph {
  animation-delay: 0.21s;
}
.c-pageHeader__word + .c-pageHeader__word .c-pageHeader__char:nth-child(8) .c-pageHeader__glyph {
  animation-delay: 0.46s;
}
.c-pageHeader__ja {
  font-size: 14px;
  color: #a1a1a6;
  animation: pageHeaderFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
@media screen and (min-width: 768px) {
  .c-pageHeader__ja {
    font-size: 16px;
  }
}
.c-pageHeader--hero {
  min-height: 0;
}
@media screen and (min-width: 768px) {
  .c-pageHeader--hero {
    min-height: 0;
  }
}
.c-pageHeader--hero .c-pageHeader__inner {
  flex: none;
  justify-content: flex-start;
}
.c-pageHeader__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 768px) {
  .c-pageHeader__main {
    gap: 32px;
  }
}
.c-pageHeader__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #8aa0f2;
  animation: pageHeaderFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.c-pageHeader__label::after {
  width: 48px;
  height: 1px;
  content: "";
  background-color: currentColor;
  animation: pageHeaderLine 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
  transform-origin: left;
}
.c-pageHeader--hero .c-pageHeader__line {
  padding-bottom: 4px;
}
.c-pageHeader--hero .c-pageHeader__title {
  gap: 0;
  font-size: min(7.2vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .c-pageHeader--hero .c-pageHeader__title {
    font-size: min(4.8vw, 64px);
  }
}
.c-pageHeader--hero .c-pageHeader__en {
  font-size: min(20vw, 88px);
  letter-spacing: -4px;
}
@media screen and (min-width: 768px) {
  .c-pageHeader--hero .c-pageHeader__en {
    font-size: min(15vw, 216px);
    letter-spacing: -8px;
  }
}
.c-pageHeader--hero .c-pageHeader__char {
  padding-bottom: 8px;
}
.c-pageHeader__line:nth-child(1) .c-pageHeader__lineInner {
  animation-delay: 0.5s;
}
.c-pageHeader__line:nth-child(2) .c-pageHeader__lineInner {
  animation-delay: 0.65s;
}
.c-pageHeader__line:nth-child(3) .c-pageHeader__lineInner {
  animation-delay: 0.8s;
}
.c-pageHeader__line:nth-child(4) .c-pageHeader__lineInner {
  animation-delay: 0.95s;
}
@media (prefers-reduced-motion: reduce) {
  .c-pageHeader__breadcrumb, .c-pageHeader__lineInner, .c-pageHeader__glyph, .c-pageHeader__ja, .c-pageHeader__label, .c-pageHeader__label::after {
    animation: none;
  }
}

@keyframes pageHeaderRise {
  from {
    transform: translateY(110%);
  }
}
@keyframes pageHeaderFadeIn {
  from {
    opacity: 0;
  }
}
@keyframes pageHeaderLine {
  from {
    transform: scaleX(0);
  }
}
/**
 * Component: Recruit Entry
 * 採用ページ末尾の黒い面。逆向きの c-marquee + 画面いっぱいの和文。写真は使わない。
 * 左端に白い細い矢印（SVG）を下へ描き、次の CONTACT へ視線を導く（Growth Line と同じ 1px・round）。
 * 使い方: <section class="c-recruitEntry" data-header="dark"> c-marquee --reverse + __inner(__title + __arrow)
 * __arrow（中に svg）は装飾なので aria-hidden="true" と js-reveal を付ける（表示されると線が描かれる）
 */
.c-recruitEntry {
  color: #fff;
  background-color: #0b0b0c;
}
.c-recruitEntry :focus-visible {
  outline-color: #8aa0f2;
}
.c-recruitEntry {
  overflow: hidden;
}
.c-recruitEntry__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 48px 16px 64px;
}
@media screen and (min-width: 768px) {
  .c-recruitEntry__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    gap: 80px;
    padding-top: 80px;
    padding-bottom: 96px;
  }
}
.c-recruitEntry__title {
  font-size: 12vw;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .c-recruitEntry__title {
    font-size: min(9.6vw, 144px);
  }
}
.c-recruitEntry__arrow {
  margin-left: 8px;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .c-recruitEntry__arrow {
    margin-left: 16px;
  }
}
.c-recruitEntry__arrowSvg {
  display: block;
  width: 24px;
  height: 160px;
  overflow: visible;
  animation: recruitEntryBob 2.6s cubic-bezier(0.65, 0, 0.35, 1) 2s infinite;
}
.c-recruitEntry__arrowLine, .c-recruitEntry__arrowHead {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.c-recruitEntry__arrowLine {
  stroke-dasharray: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.33, 0.8, 0.2, 1);
}
.c-recruitEntry__arrowHead {
  transition: opacity 0.4s ease 1.2s;
}
.is-jsEnabled .c-recruitEntry__arrow:not(.is-inview) .c-recruitEntry__arrowLine {
  stroke-dashoffset: 1;
}
.is-jsEnabled .c-recruitEntry__arrow:not(.is-inview) .c-recruitEntry__arrowHead {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .c-recruitEntry__arrowSvg {
    animation: none;
  }
  .c-recruitEntry__arrowLine, .c-recruitEntry__arrowHead {
    transition: none;
  }
  .is-jsEnabled .c-recruitEntry__arrow:not(.is-inview) .c-recruitEntry__arrowLine {
    stroke-dashoffset: 0;
  }
  .is-jsEnabled .c-recruitEntry__arrow:not(.is-inview) .c-recruitEntry__arrowHead {
    opacity: 1;
  }
}

@keyframes recruitEntryBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
/**
 * Component: Recruit Wantedly
 * 「GROWを覗き見」。高さを抑えた横長の帯。写真は使わない。
 * 背景に画面幅いっぱいの輪郭だけの「Wantedly」（装飾・aria-hidden）がスクロールに合わせてゆっくり横へ流れ（common.js の initDrift）、
 * PC は左に見出しと外部リンク、右に上下の罫線だけで区切った埋め込み（widget.js が a.wantedly-company-feeds を差し替える）を置く。
 * 埋め込みが描画される（recruit.js が __card に is-loaded を付ける）までは、枠の中に Growth Line の細い 1 本だけと「LOADING FEED」を見せる。
 * recruit / engineer の 3 ページで共用
 */
.c-recruitWantedly {
  position: relative;
  overflow: hidden;
}
.c-recruitWantedly__word {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 20vw;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  white-space: nowrap;
  pointer-events: none;
  -webkit-text-stroke: 1px rgba(11, 11, 12, 0.2);
  user-select: none;
  transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
  .c-recruitWantedly__word {
    font-size: min(21vw, 320px);
  }
}
.c-recruitWantedly__wordInner {
  display: block;
  transform: translate3d(var(--driftShift, 0px), 0, 0);
}
.c-recruitWantedly__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 64px 16px;
}
@media screen and (min-width: 768px) {
  .c-recruitWantedly__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 80px;
    align-items: center;
    padding-top: 96px;
    padding-bottom: 96px;
  }
}
.c-recruitWantedly__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.c-recruitWantedly__card {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 16px;
  overflow: hidden;
  border-top: 1px solid rgba(11, 11, 12, 0.2);
  border-bottom: 1px solid rgba(11, 11, 12, 0.2);
}
@media screen and (min-width: 768px) {
  .c-recruitWantedly__card {
    min-height: 280px;
    padding: 32px;
  }
}
.c-recruitWantedly__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  transition: opacity 0.4s;
}
@media screen and (min-width: 768px) {
  .c-recruitWantedly__loading {
    padding: 32px;
  }
}
.c-recruitWantedly__loadingLine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.c-recruitWantedly__loadingPath {
  fill: none;
  stroke: #1f44e0;
  stroke-opacity: 0.5;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.c-recruitWantedly__loadingLabel {
  position: relative;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #5c626c;
}
.c-recruitWantedly__card.is-loaded .c-recruitWantedly__loading {
  visibility: hidden;
  opacity: 0;
}
.c-recruitWantedly__feed {
  position: relative;
  z-index: 1;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.c-recruitWantedly__feed iframe {
  max-width: 100%;
}

/**
 * Component: Reveal
 * js-reveal が is-inview を付けるとフェード + 少し上へ。JS が動かない場合は表示したままにする
 */
.c-reveal {
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-jsEnabled .c-reveal:not(.is-inview) {
  opacity: 0;
  transform: translateY(24px);
}
@media (prefers-reduced-motion: reduce) {
  .is-jsEnabled .c-reveal:not(.is-inview) {
    opacity: 1;
    transform: none;
  }
}

/**
 * Component: Section
 * セクションの内側（余白・縦積みの gap）。全幅で、PC は左右の padding で中身を 1200px に絞る
 * （黒い面など背景を持つ --onDark が全幅に広がるようにするため、max-width は使わない）。
 * 使い方: <section class="p-xxx"><div class="c-section">...</div></section>
 * modifier: --onDark（黒い面）/ --trimTop / --trimBottom（直前 / 直後に帯が続くとき）
 */
.c-section {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 80px 16px;
}
@media screen and (min-width: 768px) {
  .c-section {
    gap: 80px;
    padding: 200px max(40px, (100% - 1200px) / 2);
  }
}
.c-section--onDark {
  color: #fff;
  background-color: #0b0b0c;
}
.c-section--onDark :focus-visible {
  outline-color: #8aa0f2;
}
.c-section--trimBottom {
  padding-bottom: 48px;
}
@media screen and (min-width: 768px) {
  .c-section--trimBottom {
    padding-bottom: 80px;
  }
}
.c-section--trimTop {
  padding-top: 48px;
}
@media screen and (min-width: 768px) {
  .c-section--trimTop {
    padding-top: 80px;
  }
}

/**
 * Component: Section Head
 * 見出し（c-heading）+ リード文の 2 カラム。1024px 未満（SP / タブレット）は縦積み。
 * 使い方:
 *   <div class="c-sectionHead">
 *     <div class="c-heading c-sectionHead__heading c-reveal js-reveal">...</div>
 *     <div class="c-sectionHead__text c-reveal js-reveal"><p>...</p></div>
 *   </div>
 * 黒い面の上は --onDark、右カラムが表などの本文のときは --body（文字色を本文色にする）、
 * 本文が主役（大きなステートメント）のときは --statement
 */
.c-sectionHead {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (min-width: 768px) {
  .c-sectionHead {
    flex-direction: row;
    gap: 40px;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-sectionHead {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .c-sectionHead__heading {
    flex: 0 0 40%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-sectionHead__heading {
    flex: none;
  }
}
.c-sectionHead__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .c-sectionHead__text {
    flex: 0 0 50%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-sectionHead__text {
    flex: none;
  }
}
.c-sectionHead--onDark .c-sectionHead__text {
  color: #a1a1a6;
}
.c-sectionHead--body .c-sectionHead__text {
  color: #0b0b0c;
}
.c-sectionHead--statement {
  gap: 40px;
}
@media screen and (min-width: 768px) {
  .c-sectionHead--statement {
    gap: 0;
  }
}
@media screen and (min-width: 768px) {
  .c-sectionHead--statement .c-sectionHead__heading {
    flex-basis: 33.333%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-sectionHead--statement .c-sectionHead__heading {
    flex: none;
  }
}
.c-sectionHead--statement .c-sectionHead__text {
  gap: 48px;
  color: #0b0b0c;
}
@media screen and (min-width: 768px) {
  .c-sectionHead--statement .c-sectionHead__text {
    flex: 1;
    gap: 64px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-sectionHead--statement .c-sectionHead__text {
    flex: none;
  }
}

/**
 * Component: Split Text
 * ラベルを 1 文字ずつ分け、親のリンク / ボタンの hover・フォーカスで「上へ抜けて、同じ文字が下から入れ替わる」。
 * common.js が js-splitText の中身を分割する（JS が無ければ静的な文字のまま）。
 * 使い方: <a><span class="c-splitText js-splitText">LABEL</span></a>（a / button の中に置く）
 * 長い和文ラベルは折りたい位置に <wbr> を置く（例: リクルート用<wbr>お問い合わせ<wbr>フォーム）。
 * <wbr> が無ければ Intl.Segmenter で語に分けるが、確実さのため <wbr> を優先する
 */
.c-splitText {
  display: inline-block;
}
.c-splitText__word {
  display: inline-block;
  white-space: nowrap;
}
.c-splitText__char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.c-splitText__glyph {
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.03s);
}
.c-splitText__glyph--copy {
  position: absolute;
  top: 100%;
  left: 0;
}
.c-splitText__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
a:focus-visible .c-splitText__glyph, button:focus-visible .c-splitText__glyph {
  transform: translateY(-100%);
}
@media screen and (min-width: 768px) {
  a:hover .c-splitText__glyph, button:hover .c-splitText__glyph {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  a:hover .c-splitText__glyph, a:focus-visible .c-splitText__glyph, button:hover .c-splitText__glyph, button:focus-visible .c-splitText__glyph {
    transform: none;
  }
}

/**
 * Component: Tabs
 * 職種タブ。radio の :checked だけで切り替える（JS なし）。
 * radio は label の中に入れる。SP の横スクロール列でキーボード操作したとき、フォーカスされた radio が
 * タブの位置にあるので、ブラウザが選択中のタブを見える位置までスクロールする。
 * n 番目のタブの radio が checked のとき n 番目の panel を出す（:has。最大 6）。
 * 項目と説明の一覧は c-dataList を使う。
 * 使い方:
 *   <fieldset class="c-tabs">
 *     <legend class="u-visuallyHidden">職種を選択</legend>
 *     <div class="c-tabs__menu">
 *       <label class="c-tabs__tab"><input class="c-tabs__input u-visuallyHidden" type="radio" name="..." value="..." checked /><span class="c-tabs__tabText">営業</span></label> ...
 *     </div>
 *     <div class="c-tabs__panels"><div class="c-tabs__panel"> __head(__en + __ja) + __body(__lead / c-dataList / __text) </div> ...</div>
 *   </fieldset>
 */
.c-tabs {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
@media screen and (min-width: 768px) {
  .c-tabs {
    gap: 56px;
  }
}
.c-tabs__menu {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid rgba(11, 11, 12, 0.16);
  scrollbar-width: none;
}
.c-tabs__menu::-webkit-scrollbar {
  display: none;
}
.c-tabs__tab {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  cursor: pointer;
}
.c-tabs__tabText {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #5c626c;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s;
}
@media screen and (min-width: 768px) {
  .c-tabs__tabText {
    padding: 0 32px;
    font-size: 16px;
  }
}
.c-tabs__tabText::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background-color: #1f44e0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scaleX(0);
  transform-origin: left;
}
@media screen and (min-width: 768px) {
  .c-tabs__tabText:hover {
    color: #0b0b0c;
  }
}
.c-tabs__input:checked + .c-tabs__tabText {
  color: #0b0b0c;
}
.c-tabs__input:checked + .c-tabs__tabText::after {
  transform: scaleX(1);
}
.c-tabs__input:focus-visible + .c-tabs__tabText {
  outline: 2px solid #1f44e0;
  outline-offset: -4px;
}
.c-tabs__panel {
  display: none;
  flex-direction: column;
  gap: 24px;
  animation: tabsIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media screen and (min-width: 768px) {
  .c-tabs__panel {
    gap: 40px;
  }
}
.c-tabs__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-tabs__en {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: min(8vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .c-tabs__en {
    font-size: min(3.6vw, 48px);
  }
}
.c-tabs__ja {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .c-tabs__ja {
    font-size: 18px;
  }
}
.c-tabs__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.c-tabs__lead {
  font-size: 14px;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .c-tabs__lead {
    font-size: 16px;
  }
}
.c-tabs__text {
  color: #5c626c;
}
.c-tabs:has(.c-tabs__tab:nth-child(1) .c-tabs__input:checked) .c-tabs__panel:nth-child(1) {
  display: flex;
}
@media screen and (min-width: 768px) {
  .c-tabs:has(.c-tabs__tab:nth-child(1) .c-tabs__input:checked) .c-tabs__panel:nth-child(1) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-tabs:has(.c-tabs__tab:nth-child(1) .c-tabs__input:checked) .c-tabs__panel:nth-child(1) {
    display: flex;
  }
}
.c-tabs:has(.c-tabs__tab:nth-child(2) .c-tabs__input:checked) .c-tabs__panel:nth-child(2) {
  display: flex;
}
@media screen and (min-width: 768px) {
  .c-tabs:has(.c-tabs__tab:nth-child(2) .c-tabs__input:checked) .c-tabs__panel:nth-child(2) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-tabs:has(.c-tabs__tab:nth-child(2) .c-tabs__input:checked) .c-tabs__panel:nth-child(2) {
    display: flex;
  }
}
.c-tabs:has(.c-tabs__tab:nth-child(3) .c-tabs__input:checked) .c-tabs__panel:nth-child(3) {
  display: flex;
}
@media screen and (min-width: 768px) {
  .c-tabs:has(.c-tabs__tab:nth-child(3) .c-tabs__input:checked) .c-tabs__panel:nth-child(3) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-tabs:has(.c-tabs__tab:nth-child(3) .c-tabs__input:checked) .c-tabs__panel:nth-child(3) {
    display: flex;
  }
}
.c-tabs:has(.c-tabs__tab:nth-child(4) .c-tabs__input:checked) .c-tabs__panel:nth-child(4) {
  display: flex;
}
@media screen and (min-width: 768px) {
  .c-tabs:has(.c-tabs__tab:nth-child(4) .c-tabs__input:checked) .c-tabs__panel:nth-child(4) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-tabs:has(.c-tabs__tab:nth-child(4) .c-tabs__input:checked) .c-tabs__panel:nth-child(4) {
    display: flex;
  }
}
.c-tabs:has(.c-tabs__tab:nth-child(5) .c-tabs__input:checked) .c-tabs__panel:nth-child(5) {
  display: flex;
}
@media screen and (min-width: 768px) {
  .c-tabs:has(.c-tabs__tab:nth-child(5) .c-tabs__input:checked) .c-tabs__panel:nth-child(5) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-tabs:has(.c-tabs__tab:nth-child(5) .c-tabs__input:checked) .c-tabs__panel:nth-child(5) {
    display: flex;
  }
}
.c-tabs:has(.c-tabs__tab:nth-child(6) .c-tabs__input:checked) .c-tabs__panel:nth-child(6) {
  display: flex;
}
@media screen and (min-width: 768px) {
  .c-tabs:has(.c-tabs__tab:nth-child(6) .c-tabs__input:checked) .c-tabs__panel:nth-child(6) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .c-tabs:has(.c-tabs__tab:nth-child(6) .c-tabs__input:checked) .c-tabs__panel:nth-child(6) {
    display: flex;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-tabs__panel {
    animation: none;
  }
}

@keyframes tabsIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
/**
 * Project: About Access
 * アクセス。罫線で会社概要と区切り、地図は白黒にして PC の hover でカラーに戻す
 */
.p-aboutAccess {
  background-color: #f6f6f3;
  border-top: 1px solid rgba(11, 11, 12, 0.16);
}
.p-aboutAccess__text {
  gap: 40px;
}
.p-aboutAccess__map {
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: rgba(11, 11, 12, 0.08);
}
@media screen and (min-width: 768px) {
  .p-aboutAccess__map {
    aspect-ratio: 16/10;
  }
}
.p-aboutAccess__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (min-width: 768px) {
  .p-aboutAccess__iframe:hover {
    filter: none;
  }
}

/**
 * Project: About Company
 * 会社概要。右カラムは c-dataList の表
 */
.p-aboutCompany {
  background-color: #f6f6f3;
}
.p-aboutCompany__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.p-aboutCompany__list--bullet li {
  padding-left: 14px;
  text-indent: -14px;
}
@media screen and (min-width: 768px) {
  .p-aboutCompany__list--bullet li {
    padding-left: 16px;
    text-indent: -16px;
  }
}
.p-aboutCompany__link {
  color: #1f44e0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.p-aboutCompany__nowrap {
  white-space: nowrap;
}

/**
 * Project: About Philosophy (企業理念)
 * ミッションを最大のステートメントにし、ビジョン、バリューの順に文字を小さくして強弱を付ける。
 * バリューは番号付きの罫線リスト（番号は CSS カウンタ）
 */
.p-aboutPhilosophy {
  background-color: #f6f6f3;
}
.p-aboutPhilosophy__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.p-aboutPhilosophy__head {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.p-aboutPhilosophy__label {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #1f44e0;
}
.p-aboutPhilosophy__subtitle {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}
.p-aboutPhilosophy__mission, .p-aboutPhilosophy__vision {
  word-break: keep-all;
  overflow-wrap: normal;
}
.p-aboutPhilosophy__nowrap {
  white-space: nowrap;
}
.p-aboutPhilosophy__mission {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .p-aboutPhilosophy__mission {
    font-size: clamp(32px, 3.6vw, 48px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-aboutPhilosophy__mission {
    font-size: 36px;
  }
}
.p-aboutPhilosophy__vision {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;
}
@media screen and (min-width: 768px) {
  .p-aboutPhilosophy__vision {
    font-size: 24px;
  }
}
.p-aboutPhilosophy__list {
  border-top: 1px solid rgba(11, 11, 12, 0.16);
  counter-reset: value;
}
.p-aboutPhilosophy__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(11, 11, 12, 0.16);
  counter-increment: value;
}
@media screen and (min-width: 768px) {
  .p-aboutPhilosophy__item {
    grid-template-columns: 32px minmax(0, 240px) 1fr;
    gap: 8px 24px;
    align-items: baseline;
    padding: 24px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-aboutPhilosophy__item {
    grid-template-columns: 32px 1fr;
  }
}
.p-aboutPhilosophy__item::before {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #1f44e0;
  content: counter(value, decimal-leading-zero);
}
@media screen and (min-width: 768px) {
  .p-aboutPhilosophy__item::before {
    font-size: 14px;
  }
}
.p-aboutPhilosophy__term {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
}
@media screen and (min-width: 768px) {
  .p-aboutPhilosophy__term {
    font-size: 20px;
  }
}
.p-aboutPhilosophy__desc {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.9;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .p-aboutPhilosophy__desc {
    grid-column: 3;
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-aboutPhilosophy__desc {
    grid-column: 2;
  }
}

/**
 * Project: About Message (代表挨拶)
 * 写真を使わず、黒い面に余白・巨大な英字・大きな氏名で語る。
 * PC は左に見出し（スクロール中も追従）、右に読みやすい幅の本文。末尾は右寄せの役職・氏名で締める
 */
.p-aboutPresident {
  position: relative;
  overflow: clip;
}
.p-aboutPresident__bgText {
  position: absolute;
  bottom: 24px;
  left: 8px;
  z-index: 0;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 26vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -4px;
  color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media screen and (min-width: 768px) {
  .p-aboutPresident__bgText {
    bottom: 40px;
    left: 0;
    font-size: min(18vw, 280px);
    letter-spacing: -8px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-aboutPresident__bgText {
    font-size: 16vw;
  }
}
.p-aboutPresident__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media screen and (min-width: 768px) {
  .p-aboutPresident__body {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 80px;
    align-items: start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-aboutPresident__body {
    gap: 40px;
  }
}
@media screen and (min-width: 768px) {
  .p-aboutPresident__side {
    position: sticky;
    top: 120px;
  }
}
.p-aboutPresident__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
  line-height: 2.2;
  color: rgba(255, 255, 255, 0.88);
}
@media screen and (min-width: 768px) {
  .p-aboutPresident__text {
    gap: 32px;
    max-width: 720px;
    margin-left: auto;
    font-size: 16px;
  }
}
.p-aboutPresident__greeting {
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-aboutPresident__greeting {
    font-size: 20px;
  }
}
.p-aboutPresident__post {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
@media screen and (min-width: 768px) {
  .p-aboutPresident__post {
    padding-top: 48px;
  }
}
.p-aboutPresident__postName {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: flex-end;
}
.p-aboutPresident__role {
  font-size: 14px;
  color: #a1a1a6;
}
.p-aboutPresident__name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-aboutPresident__name {
    font-size: 32px;
  }
}

/**
 * Project: Contact
 * お問い合わせ 2 ページ（contact / contact-recruit）共通。リード文 + ステップ表示 + フォーム（c-form）
 */
.p-contact {
  background-color: #f6f6f3;
}
.p-contact__body {
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .p-contact__body {
    padding-bottom: 80px;
  }
}
.p-contact__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-contact__inner {
    gap: 56px;
  }
}
.p-contact__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 768px) {
  .p-contact__intro {
    gap: 32px;
  }
}
.p-contact__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #0b0b0c;
}
.p-contact__switchItem {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 8px;
  text-align: center;
  transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 768px) {
  .p-contact__switchItem {
    gap: 8px;
    min-height: 88px;
  }
}
.p-contact__switchItem[aria-current=page] {
  color: #fff;
}
.p-contact__switchItem[aria-current=page]::before {
  position: absolute;
  inset: 0;
  content: "";
  background-color: #0b0b0c;
  view-transition-name: contactSwitchIndicator;
}
@media (prefers-reduced-motion: reduce) {
  .p-contact__switchItem[aria-current=page]::before {
    view-transition-name: none;
  }
}
@media screen and (min-width: 768px) {
  .p-contact__switchItem:not([aria-current=page]):hover {
    background-color: rgba(11, 11, 12, 0.06);
  }
  .p-contact__switchItem:not([aria-current=page]):hover .p-contact__switchEn {
    color: #1f44e0;
  }
}
.p-contact__switchItem:focus-visible {
  outline-offset: 4px;
}
.p-contact__switchEn, .p-contact__switchJa {
  position: relative;
}
.p-contact__switchItem:nth-child(1) .p-contact__switchEn {
  view-transition-name: contactSwitchGeneralEn;
}
@media (prefers-reduced-motion: reduce) {
  .p-contact__switchItem:nth-child(1) .p-contact__switchEn {
    view-transition-name: none;
  }
}
.p-contact__switchItem:nth-child(1) .p-contact__switchJa {
  view-transition-name: contactSwitchGeneralJa;
}
@media (prefers-reduced-motion: reduce) {
  .p-contact__switchItem:nth-child(1) .p-contact__switchJa {
    view-transition-name: none;
  }
}
.p-contact__switchItem:nth-child(2) .p-contact__switchEn {
  view-transition-name: contactSwitchRecruitEn;
}
@media (prefers-reduced-motion: reduce) {
  .p-contact__switchItem:nth-child(2) .p-contact__switchEn {
    view-transition-name: none;
  }
}
.p-contact__switchItem:nth-child(2) .p-contact__switchJa {
  view-transition-name: contactSwitchRecruitJa;
}
@media (prefers-reduced-motion: reduce) {
  .p-contact__switchItem:nth-child(2) .p-contact__switchJa {
    view-transition-name: none;
  }
}
.p-contact__switchEn {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  transition: color 0.3s;
}
.p-contact__switchJa {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}
@media screen and (min-width: 768px) {
  .p-contact__switchJa {
    font-size: 16px;
  }
}
.p-contact__lead {
  font-size: 12px;
  line-height: 2;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .p-contact__lead {
    font-size: 14px;
  }
}
.p-contact__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .p-contact__steps {
    gap: 16px;
  }
}
.p-contact__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  color: #5c626c;
  transition: color 0.4s;
}
.p-contact__step::before, .p-contact__step::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
}
.p-contact__step::before {
  background-color: rgba(11, 11, 12, 0.16);
}
.p-contact__step::after {
  background-color: #0b0b0c;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s;
  transform: scaleX(0);
  transform-origin: left;
}
.p-contact__step.is-done {
  color: #0b0b0c;
}
.p-contact__step.is-done::after {
  transform: scaleX(1);
}
.p-contact__step.is-current {
  color: #1f44e0;
}
.p-contact__step.is-current::after {
  background-color: #1f44e0;
  transform: scaleX(1);
}
.p-contact__stepNum {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
}
.p-contact__stepName {
  font-size: 14px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .p-contact__stepName {
    font-size: 16px;
  }
}

::view-transition-group(contactSwitchIndicator) {
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-duration: 0.55s;
}

::view-transition-old(contactSwitchIndicator) {
  display: none;
}

::view-transition-new(contactSwitchIndicator) {
  height: 100%;
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(contactSwitchGeneralEn),
::view-transition-group(contactSwitchGeneralJa),
::view-transition-group(contactSwitchRecruitEn),
::view-transition-group(contactSwitchRecruitJa) {
  animation-duration: 0s;
}

::view-transition-old(contactSwitchGeneralEn),
::view-transition-old(contactSwitchGeneralJa),
::view-transition-old(contactSwitchRecruitEn),
::view-transition-old(contactSwitchRecruitJa) {
  animation: contactSwitchTextOut 0.26s cubic-bezier(0.65, 0, 0.35, 1) 0.1s both;
  mix-blend-mode: normal;
}

::view-transition-new(contactSwitchGeneralEn),
::view-transition-new(contactSwitchGeneralJa),
::view-transition-new(contactSwitchRecruitEn),
::view-transition-new(contactSwitchRecruitJa) {
  animation: contactSwitchTextIn 0.26s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both;
  mix-blend-mode: normal;
}

@keyframes contactSwitchTextOut {
  to {
    opacity: 0;
  }
}
@keyframes contactSwitchTextIn {
  from {
    opacity: 0;
  }
}
/**
 * Project: Engineer
 * エンジニア採用 2 ページ（未経験 / 経験者）共通のページ Block。
 * 診断（p-engineerDiagnosis）と職種の間に区切りの罫線を引く
 */
.p-engineer__jobs {
  border-top: 1px solid rgba(11, 11, 12, 0.16);
}

/**
 * Project: Engineer Career
 * キャリアパスイメージ。黒い面で 5 人分を details / summary のアコーディオンにする（JS なし）。
 * 開閉は ::details-content と interpolate-size で高さを滑らかに動かす（非対応ブラウザは即時に開閉する）
 */
.p-engineerCareer__list {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.p-engineerCareer__person {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.p-engineerCareer__item {
  interpolate-size: allow-keywords;
}
.p-engineerCareer__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.6s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.6s allow-discrete;
}
.p-engineerCareer__item[open]::details-content {
  block-size: auto;
}
.p-engineerCareer__summary {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .p-engineerCareer__summary {
    gap: 24px;
    padding: 32px 0;
  }
}
.p-engineerCareer__summary::-webkit-details-marker {
  display: none;
}
.p-engineerCareer__summary:focus-visible {
  outline-color: #8aa0f2;
}
.p-engineerCareer__monogram {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  transition: color 0.4s, background-color 0.4s, border-color 0.4s;
}
.p-engineerCareer__item[open] .p-engineerCareer__monogram {
  background-color: #1f44e0;
  border-color: #1f44e0;
}
.p-engineerCareer__summaryText {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.p-engineerCareer__job {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  transition: color 0.3s;
}
@media screen and (min-width: 768px) {
  .p-engineerCareer__job {
    font-size: 20px;
  }
}
.p-engineerCareer__name {
  font-size: 12px;
  color: #a1a1a6;
}
@media screen and (min-width: 768px) {
  .p-engineerCareer__name {
    font-size: 14px;
  }
}
.p-engineerCareer__icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
}
.p-engineerCareer__icon::before, .p-engineerCareer__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  content: "";
  background-color: #fff;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-engineerCareer__icon::after {
  transform: rotate(90deg);
}
.p-engineerCareer__item[open] .p-engineerCareer__icon::after {
  transform: rotate(0);
}
@media screen and (min-width: 768px) {
  .p-engineerCareer__summary:hover .p-engineerCareer__job {
    color: #8aa0f2;
  }
  .p-engineerCareer__summary:hover .p-engineerCareer__monogram {
    border-color: #8aa0f2;
  }
}
.p-engineerCareer__panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 8px 0 48px;
}
@media screen and (min-width: 768px) {
  .p-engineerCareer__panel {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 64px;
    padding: 16px 0 80px 80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-engineerCareer__panel {
    display: flex;
    padding-left: 0;
  }
}
.p-engineerCareer__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 28px;
}
.p-engineerCareer__timeline::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 4px;
  width: 1px;
  content: "";
  background-color: rgba(255, 255, 255, 0.24);
}
.p-engineerCareer__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-engineerCareer__step::before {
  position: absolute;
  top: 8px;
  left: -28px;
  width: 8px;
  height: 8px;
  content: "";
  background-color: rgba(255, 255, 255, 0.64);
  border-radius: 50%;
}
.p-engineerCareer__step:last-child::before {
  background-color: #8aa0f2;
}
.p-engineerCareer__stepTitle {
  font-weight: 700;
}
.p-engineerCareer__stepText {
  font-size: 14px;
  color: #a1a1a6;
}
.p-engineerCareer__messages {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.p-engineerCareer__message {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.p-engineerCareer__messageTitle {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #8aa0f2;
}
.p-engineerCareer__messageText {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 2;
  color: #a1a1a6;
}
@media (prefers-reduced-motion: reduce) {
  .p-engineerCareer__item::details-content {
    transition: none;
  }
}

/**
 * Project: Engineer Diagnosis
 * YES / NO 診断。.js-diagnosis の data-state（start / question / loading / result）で出し分ける。
 * カードは YES で右へ・NO で左へ抜け、次の質問が下から現れる（クラスの付け外しは engineer.js）。
 * JS が動かない場合は start のまま（診断は JS 必須）
 */
.p-engineerDiagnosis__sub {
  font-size: 14px;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__sub {
    font-size: 16px;
  }
}
.p-engineerDiagnosis__body {
  position: relative;
  min-height: 520px;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__body {
    min-height: 608px;
  }
}
.p-engineerDiagnosis__start, .p-engineerDiagnosis__quiz, .p-engineerDiagnosis__loading, .p-engineerDiagnosis__result {
  display: none;
  animation: diagnosisIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.p-engineerDiagnosis__body[data-state=start] .p-engineerDiagnosis__start {
  display: flex;
}
.p-engineerDiagnosis__body[data-state=question] .p-engineerDiagnosis__quiz {
  display: flex;
}
.p-engineerDiagnosis__body[data-state=loading] .p-engineerDiagnosis__loading {
  display: flex;
}
.p-engineerDiagnosis__body[data-state=result] .p-engineerDiagnosis__result {
  display: flex;
}
.p-engineerDiagnosis__start {
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 400px;
  padding: 24px;
  background-color: #fff;
  border: 1px solid rgba(11, 11, 12, 0.16);
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__start {
    min-height: 480px;
    padding: 40px;
  }
}
.p-engineerDiagnosis__mark {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 160px;
  font-weight: 700;
  line-height: 1;
  color: rgba(11, 11, 12, 0.08);
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__mark {
    font-size: 240px;
  }
}
.p-engineerDiagnosis__quiz {
  flex-direction: column;
  gap: 40px;
}
.p-engineerDiagnosis__deck {
  position: relative;
  isolation: isolate;
}
.p-engineerDiagnosis__deck::before, .p-engineerDiagnosis__deck::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  content: "";
  background-color: #fff;
  border: 1px solid rgba(11, 11, 12, 0.16);
}
.p-engineerDiagnosis__deck::before {
  transform: translateY(8px) scale(0.97);
}
.p-engineerDiagnosis__deck::after {
  z-index: -1;
  transform: translateY(16px) scale(0.94);
}
.p-engineerDiagnosis__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  min-height: 400px;
  padding: 24px;
  background-color: #fff;
  border: 1px solid rgba(11, 11, 12, 0.16);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__card {
    min-height: 480px;
    padding: 40px;
  }
}
.p-engineerDiagnosis__card.is-outYes {
  pointer-events: none;
  opacity: 0;
  transform: translateX(120%) rotate(6deg);
}
.p-engineerDiagnosis__card.is-outNo {
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%) rotate(-6deg);
}
.p-engineerDiagnosis__card.is-entering {
  opacity: 0;
  transition: none;
  transform: translateY(16px);
}
.p-engineerDiagnosis__cardNum {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: #1f44e0;
}
.p-engineerDiagnosis__cardText {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__cardText {
    font-size: 32px;
  }
}
.p-engineerDiagnosis__choices {
  display: flex;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__choices {
    gap: 16px;
  }
}
.p-engineerDiagnosis__choice {
  flex: 1;
  height: 64px;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  border: 1px solid #0b0b0c;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__choice {
    flex: none;
    width: 200px;
    height: 72px;
  }
}
.p-engineerDiagnosis__choice--no {
  color: #0b0b0c;
}
.p-engineerDiagnosis__choice--yes {
  color: #fff;
  background-color: #1f44e0;
  border-color: #1f44e0;
}
.p-engineerDiagnosis__choice:focus-visible {
  color: #fff;
  background-color: #0b0b0c;
  border-color: #0b0b0c;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__choice:hover {
    color: #fff;
    background-color: #0b0b0c;
    border-color: #0b0b0c;
  }
}
.p-engineerDiagnosis__loading {
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  min-height: 400px;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__loading {
    min-height: 480px;
  }
}
.p-engineerDiagnosis__loadingText {
  font-size: 20px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__loadingText {
    font-size: 32px;
  }
}
.p-engineerDiagnosis__loadingLine {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 1px;
  background-color: #1f44e0;
  animation: diagnosisLoad 1.3s cubic-bezier(0.65, 0, 0.35, 1) both;
  transform-origin: left;
}
.p-engineerDiagnosis__result {
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  animation-name: diagnosisResultIn;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__result {
    gap: 40px;
  }
}
.p-engineerDiagnosis__resultHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  outline-offset: 8px;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__resultHead {
    font-size: 20px;
  }
}
.p-engineerDiagnosis__resultPre[hidden], .p-engineerDiagnosis__resultPost[hidden], .p-engineerDiagnosis__resultItem[hidden] {
  display: none;
}
.p-engineerDiagnosis__resultJob {
  font-size: 20px;
  color: #1f44e0;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__resultJob {
    font-size: 32px;
  }
}
.p-engineerDiagnosis__resultItem {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-top: 32px;
  border-top: 1px solid rgba(11, 11, 12, 0.16);
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__resultItem {
    gap: 24px;
    padding-top: 40px;
  }
}
.p-engineerDiagnosis__en {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: min(10vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__en {
    font-size: min(5vw, 72px);
  }
}
.p-engineerDiagnosis__jobName {
  font-weight: 700;
  color: #5c626c;
}
.p-engineerDiagnosis__prompt {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__prompt {
    font-size: 24px;
  }
}
.p-engineerDiagnosis__desc {
  line-height: 2;
  color: #5c626c;
}
.p-engineerDiagnosis__resultItem--entry {
  transition: color 0.3s;
}
.p-engineerDiagnosis__resultItem--entry:focus-visible {
  color: #1f44e0;
}
.p-engineerDiagnosis__resultItem--entry:focus-visible .p-engineerDiagnosis__entryArrow {
  transform: translateX(8px);
}
@media screen and (min-width: 768px) {
  .p-engineerDiagnosis__resultItem--entry:hover {
    color: #1f44e0;
  }
  .p-engineerDiagnosis__resultItem--entry:hover .p-engineerDiagnosis__entryArrow {
    transform: translateX(8px);
  }
}
.p-engineerDiagnosis__entryArrow {
  display: inline-block;
  margin-left: 12px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .p-engineerDiagnosis__start, .p-engineerDiagnosis__quiz, .p-engineerDiagnosis__loading, .p-engineerDiagnosis__result, .p-engineerDiagnosis__loadingLine {
    animation: none;
  }
}

@keyframes diagnosisIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes diagnosisResultIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@keyframes diagnosisLoad {
  from {
    transform: scaleX(0);
  }
}
/**
 * Project: Not Found
 * 404。ページヘッダーの下に案内文と TOP ボタンだけを置く
 */
.p-notFound__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 64px 16px 80px;
}
@media screen and (min-width: 768px) {
  .p-notFound__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    gap: 48px;
    padding-top: 120px;
    padding-bottom: 160px;
  }
}
.p-notFound__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .p-notFound__text {
    font-size: 24px;
  }
}

/**
 * Project: Privacy Policy
 * 読み物。本文は 760px を右寄せにして左 1/3 を空け、条ごとに罫線で区切る
 */
.p-privacy__inner {
  padding: 64px 16px 80px;
}
@media screen and (min-width: 768px) {
  .p-privacy__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 160px;
  }
}
.p-privacy__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: 14px;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .p-privacy__content {
    gap: 56px;
    max-width: 760px;
    margin-left: auto;
    font-size: 16px;
  }
}
.p-privacy__article {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(11, 11, 12, 0.16);
}
.p-privacy__heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .p-privacy__heading {
    font-size: 22px;
  }
}
.p-privacy__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #5c626c;
}
.p-privacy__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}
.p-privacy__list li {
  padding-left: 14px;
  text-indent: -14px;
}
@media screen and (min-width: 768px) {
  .p-privacy__list li {
    padding-left: 16px;
    text-indent: -16px;
  }
}
.p-privacy__link {
  color: #1f44e0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.p-privacy__date {
  color: #5c626c;
  text-align: right;
}

/**
 * Project: Recruit Data
 * 従業員のデータ。平均年齢の大きな数字（JS で 0 から数え上げ）と、居住エリアの横棒グラフ（画面に入ると左から伸びる）
 */
.p-recruitData__body {
  gap: 64px;
}
@media screen and (min-width: 768px) {
  .p-recruitData__body {
    gap: 96px;
  }
}
.p-recruitData__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.p-recruitData__title {
  font-size: 14px;
  font-weight: 700;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .p-recruitData__title {
    font-size: 16px;
  }
}
.p-recruitData__age {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
}
.p-recruitData__ageNum {
  font-size: 96px;
  color: #1f44e0;
  font-variant-numeric: tabular-nums;
}
@media screen and (min-width: 768px) {
  .p-recruitData__ageNum {
    font-size: 160px;
  }
}
.p-recruitData__ageUnit {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .p-recruitData__ageUnit {
    font-size: 48px;
  }
}
.p-recruitData__areaList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .p-recruitData__areaList {
    gap: 24px;
  }
}
.p-recruitData__area {
  display: grid;
  grid-template-columns: 48px 1fr 56px;
  gap: 16px;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .p-recruitData__area {
    grid-template-columns: 64px 1fr 80px;
    gap: 24px;
  }
}
.p-recruitData__areaName {
  font-weight: 700;
}
.p-recruitData__areaTrack {
  display: block;
  height: 16px;
  background-color: rgba(11, 11, 12, 0.08);
}
@media screen and (min-width: 768px) {
  .p-recruitData__areaTrack {
    height: 24px;
  }
}
.p-recruitData__areaBar {
  display: block;
  height: 100%;
  background-color: #0b0b0c;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  transform-origin: left;
}
.p-recruitData__areaRatio {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .p-recruitData__areaRatio {
    font-size: 28px;
  }
}
.p-recruitData__area--kanto .p-recruitData__areaBar {
  width: 92%;
}
.p-recruitData__area--kansai .p-recruitData__areaBar {
  width: 4%;
}
.p-recruitData__area--tokai .p-recruitData__areaBar {
  width: 2%;
}
.p-recruitData__area--kyushu .p-recruitData__areaBar {
  width: 2%;
}
.p-recruitData__area--kanto .p-recruitData__areaBar {
  background-color: #1f44e0;
}
.p-recruitData__area:nth-child(2) .p-recruitData__areaBar {
  transition-delay: 0.45s;
}
.p-recruitData__area:nth-child(3) .p-recruitData__areaBar {
  transition-delay: 0.6s;
}
.p-recruitData__area:nth-child(4) .p-recruitData__areaBar {
  transition-delay: 0.75s;
}
.is-jsEnabled .p-recruitData__areaList:not(.is-inview) .p-recruitData__areaBar {
  transform: scaleX(0);
}
@media (prefers-reduced-motion: reduce) {
  .is-jsEnabled .p-recruitData__areaList:not(.is-inview) .p-recruitData__areaBar {
    transform: none;
  }
}

/**
 * Project: Recruit Keyword
 * GROW の特徴を黒い面で見せる。4 グループ（SALARY / EDUCATION / WORKPLACE / OTHER）を、SP 1 列 / タブレット 2 列 / PC 4 列。
 * 罫線や番号は使わず、Mono の英字見出しと短い線の下に、項目を余白だけで縦に並べる。列は 0.08s 刻みで遅れて現れる（c-reveal）
 */
.p-recruitKeyword__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media screen and (min-width: 768px) {
  .p-recruitKeyword__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 64px 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-recruitKeyword__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.p-recruitKeyword__group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.p-recruitKeyword__group:nth-child(2) {
  transition-delay: 0.08s;
}
.p-recruitKeyword__group:nth-child(3) {
  transition-delay: 0.16s;
}
.p-recruitKeyword__group:nth-child(4) {
  transition-delay: 0.24s;
}
.p-recruitKeyword__groupName {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #8aa0f2;
}
.p-recruitKeyword__groupName::after {
  width: 32px;
  height: 1px;
  content: "";
  background-color: currentColor;
}
.p-recruitKeyword__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .p-recruitKeyword__list {
    gap: 20px;
  }
}
.p-recruitKeyword__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.p-recruitKeyword__name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .p-recruitKeyword__name {
    font-size: 18px;
  }
}
.p-recruitKeyword__note {
  font-size: 12px;
  line-height: 1.6;
  color: #a1a1a6;
}

/**
 * Project: Service
 * 事業の目次 + 5 事業。奇数は明るい面、偶数は黒い面（--dark）。写真は使わず、キャッチコピーを主役にした文字だけの構成。
 * 各事業の頭に英字ラベルの巨大な英字を薄く敷き、画像なしでも事業ごとの見せ場を作る
 */
.p-service__indexList {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(11, 11, 12, 0.16);
}
@media screen and (min-width: 768px) {
  .p-service__indexList {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 40px;
    border-top: 0;
  }
}
.p-service__indexItem {
  border-bottom: 1px solid rgba(11, 11, 12, 0.16);
}
@media screen and (min-width: 768px) {
  .p-service__indexItem:nth-child(-n+3) {
    border-top: 1px solid rgba(11, 11, 12, 0.16);
  }
}
.p-service__indexLink {
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .p-service__indexLink {
    grid-template-columns: 48px 1fr 16px;
    gap: 16px;
    min-height: 96px;
    padding: 24px 0;
    font-size: 20px;
  }
}
.p-service__indexLink:focus-visible .p-service__indexNum,
.p-service__indexLink:focus-visible .p-service__indexArrow {
  color: #1f44e0;
}
.p-service__indexLink:focus-visible .p-service__indexArrow {
  transform: translateY(4px);
}
@media screen and (min-width: 768px) {
  .p-service__indexLink:hover .p-service__indexNum,
  .p-service__indexLink:hover .p-service__indexArrow {
    color: #1f44e0;
  }
  .p-service__indexLink:hover .p-service__indexArrow {
    transform: translateY(4px);
  }
}
.p-service__indexNum {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  color: #5c626c;
  transition: color 0.3s;
}
@media screen and (min-width: 768px) {
  .p-service__indexNum {
    font-size: 14px;
  }
}
.p-service__indexName {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.p-service__indexArrow {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  text-align: right;
  transition: color 0.3s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-service__item {
  --serviceLine: rgba(11, 11, 12, 0.16);
  --serviceOutline: rgba(11, 11, 12, 0.06);
  color: #0b0b0c;
  background-color: #f6f6f3;
  border-top: 1px solid var(--serviceLine);
}
.p-service__item--dark {
  --serviceLine: rgba(255, 255, 255, 0.24);
  --serviceOutline: rgba(255, 255, 255, 0.07);
  color: #fff;
  background-color: #0b0b0c;
}
.p-service__item--dark :focus-visible {
  outline-color: #8aa0f2;
}
.p-service__item--dark {
  border-top: 0;
}
.p-service__bg {
  padding: 40px 16px 0;
  overflow: hidden;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 12vw;
  font-weight: 500;
  line-height: 0.9;
  color: var(--serviceOutline);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media screen and (min-width: 768px) {
  .p-service__bg {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    padding-top: 64px;
    font-size: min(11vw, 160px);
  }
}
.p-service__inner {
  display: grid;
  gap: 32px;
  padding: 32px 16px 64px;
}
@media screen and (min-width: 768px) {
  .p-service__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    grid-template-columns: 320px 1fr;
    gap: 80px;
    padding-top: 56px;
    padding-bottom: 120px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-service__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.p-service__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}
@media screen and (min-width: 768px) {
  .p-service__head {
    position: sticky;
    top: 120px;
    gap: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-service__head {
    position: static;
  }
}
.p-service__meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
}
.p-service__num {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #1f44e0;
}
.p-service__num::after {
  width: 48px;
  height: 1px;
  content: "";
  background-color: currentColor;
}
.p-service__item--dark .p-service__num {
  color: #8aa0f2;
}
.p-service__en {
  color: #5c626c;
}
.p-service__item--dark .p-service__en {
  color: #a1a1a6;
}
.p-service__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .p-service__name {
    font-size: 24px;
    letter-spacing: 1px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-service__name {
    font-size: 32px;
  }
}
.p-service__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}
@media screen and (min-width: 768px) {
  .p-service__body {
    gap: 64px;
  }
}
.p-service__catch {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .p-service__catch {
    font-size: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-service__catch {
    font-size: 40px;
  }
}
.p-service__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  font-size: 14px;
  line-height: 2;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .p-service__lead {
    font-size: 16px;
  }
}
.p-service__item--dark .p-service__lead {
  color: rgba(255, 255, 255, 0.88);
}
.p-service__block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.p-service__label {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
}
.p-service__label::after {
  flex: 1;
  height: 1px;
  content: "";
  background-color: var(--serviceLine);
}
.p-service__list {
  counter-reset: serviceList;
}
.p-service__listItem {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 12px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  border-bottom: 1px solid var(--serviceLine);
  counter-increment: serviceList;
}
.p-service__listItem::before {
  grid-row: 1/3;
  padding-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  color: #1f44e0;
  content: counter(serviceList, decimal-leading-zero);
}
@media screen and (min-width: 768px) {
  .p-service__listItem {
    grid-template-columns: 48px 1fr;
    gap: 0 16px;
    padding: 20px 0;
    font-size: 18px;
  }
}
.p-service__item--dark .p-service__listItem::before {
  color: #8aa0f2;
}
.p-service__listName {
  font-weight: 700;
}
.p-service__listDesc {
  grid-column: 2;
  font-size: 14px;
  font-weight: 400;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .p-service__listDesc {
    font-size: 16px;
  }
}
.p-service__item--dark .p-service__listDesc {
  color: rgba(255, 255, 255, 0.88);
}
.p-service__focus {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  counter-reset: serviceFocus;
}
@media screen and (min-width: 768px) {
  .p-service__focus {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-service__focus {
    grid-template-columns: 1fr;
  }
}
.p-service__focusItem {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--serviceLine);
  counter-increment: serviceFocus;
}
.p-service__focusItem::before {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  color: #1f44e0;
  content: counter(serviceFocus, decimal-leading-zero);
}
.p-service__item--dark .p-service__focusItem::before {
  color: #8aa0f2;
}
.p-service__focusName {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.p-service__focusDesc {
  font-size: 14px;
  line-height: 1.8;
  color: #5c626c;
  text-wrap: pretty;
}
.p-service__item--dark .p-service__focusDesc {
  color: rgba(255, 255, 255, 0.88);
}
.p-service__points {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.p-service__point {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  font-size: 14px;
  line-height: 1.9;
}
.p-service__point::before {
  width: 24px;
  height: 1px;
  margin-top: 14px;
  content: "";
  background-color: #1f44e0;
}
@media screen and (min-width: 768px) {
  .p-service__point {
    grid-template-columns: 32px 1fr;
    gap: 16px;
    font-size: 16px;
  }
  .p-service__point::before {
    width: 32px;
    margin-top: 16px;
  }
}
.p-service__item--dark .p-service__point::before {
  background-color: #8aa0f2;
}

/**
 * Project: Top About
 * 黒い面（背景は内側の c-section--onDark）。トップは KV（白）の次に黒を置いて白黒を交互にする
 */
.p-topAbout__statement {
  font-size: 20px;
  font-weight: 500;
  line-height: 2;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-topAbout__statement {
    font-size: 32px;
  }
}
@media screen and (min-width: 768px) {
  .p-topAbout__phrase {
    transition: color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .is-jsEnabled .p-topAbout__phrase:not(.is-lit) {
    color: #7a7a80;
  }
}
@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .is-jsEnabled .p-topAbout__phrase:not(.is-lit) {
    color: #fff;
  }
}

/**
 * Project: Top KV
 * オフホワイト地に黒い大きなコピー（トップだけ白ベース。下層のページヘッダーは黒のまま）。背景はモノクロのスモーク（ぼけた淡いグレーの煙と白い霞がゆっくり漂う）
 */
.p-topKv {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(560px, 100vh);
  min-height: max(560px, 100svh);
  margin-top: -64px;
  padding-top: 64px;
  overflow: hidden;
  color: #0b0b0c;
  background-color: #f6f6f3;
}
@media screen and (min-width: 768px) {
  .p-topKv {
    min-height: max(640px, 100vh);
    min-height: max(640px, 100svh);
    margin-top: -80px;
    padding-top: 80px;
  }
}
.p-topKv__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 0 16px 120px;
}
@media screen and (min-width: 768px) {
  .p-topKv__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
    position: static;
    gap: 40px;
    padding-bottom: 160px;
  }
}
.p-topKv__title {
  position: relative;
  z-index: 2;
  font-size: min(8.4vw, 48px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .p-topKv__title {
    font-size: min(7vw, 96px);
  }
}
.p-topKv__title::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background-color: #1f44e0;
  transform-origin: left;
  animation: topKvRun 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.p-topKv__line {
  position: relative;
  display: block;
  width: fit-content;
  padding-bottom: 4px;
  overflow: hidden;
}
.p-topKv__line::after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: #0b0b0c;
  transform-origin: left;
  animation: topKvBand 0.9s linear 0.3s both;
}
.p-topKv__lineInner {
  display: block;
  animation: topKvText 0.9s linear 0.3s both;
}
.p-topKv__line:nth-child(2)::after, .p-topKv__line:nth-child(2) .p-topKv__lineInner {
  animation-delay: 0.5s;
}
.p-topKv__em {
  position: relative;
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(90deg, #1f44e0 50%, #0b0b0c 50%);
  background-position: 0 0;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: topKvInk 0.6s cubic-bezier(0.65, 0, 0.35, 1) 1.4s both;
}
.p-topKv__em::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 4px;
  content: "";
  background-color: #1f44e0;
  transform-origin: left;
  animation: topKvUnderline 0.4s cubic-bezier(0.22, 1, 0.36, 1) 1.7s both;
}
.p-topKv__sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(28px, 8vw, 32px);
  font-weight: 300;
  line-height: 1;
  color: #5c626c;
  letter-spacing: -2px;
}
@media screen and (min-width: 768px) {
  .p-topKv__sub {
    position: absolute;
    right: max(40px, (100% - 1200px) / 2);
    bottom: 20px;
    z-index: 2;
    align-items: flex-end;
    gap: 16px;
    font-size: clamp(48px, 6vw, 88px);
    letter-spacing: -3px;
    text-align: right;
  }
}
.p-topKv__subMeta {
  animation: topKvFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #5c626c;
}
.p-topKv__subTotal {
  color: #5c626c;
}
.p-topKv__subNow {
  color: #1f44e0;
}
.p-topKv__subBar {
  width: 56px;
  height: 1px;
  margin-left: 8px;
  background-color: rgba(11, 11, 12, 0.16);
}
.p-topKv__subBarFill {
  display: block;
  height: 100%;
  background-color: #1f44e0;
  transform-origin: left;
  animation: topKvSubBar 3s linear 1.8s infinite backwards;
}
.p-topKv__sub.is-paused .p-topKv__subBarFill {
  animation-play-state: paused;
}
.p-topKv__subBody {
  animation: topKvFade 0.3s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
  display: grid;
  justify-items: start;
}
@media screen and (min-width: 768px) {
  .p-topKv__subBody {
    justify-items: end;
  }
}
.p-topKv__subText {
  grid-area: 1/1;
  white-space: nowrap;
  opacity: 0;
}
.p-topKv__subText:first-child {
  opacity: 1;
}
.p-topKv__subText.is-split {
  opacity: 1;
}
.p-topKv__subChar {
  display: inline-block;
  padding-bottom: 8px;
  overflow: hidden;
  vertical-align: top;
}
.p-topKv__subGlyph {
  display: block;
  transform: translateY(140%);
}
.p-topKv__subDot {
  color: #1f44e0;
}
.p-topKv__subText.is-active .p-topKv__subGlyph {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s + var(--i, 0) * 0.03s);
  transform: none;
}
.p-topKv__subText.is-leaving .p-topKv__subGlyph {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.03s);
  transform: translateY(-140%);
}
.p-topKv__scroll {
  position: absolute;
  bottom: 24px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: topKvFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.8s both;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #5c626c;
}
@media screen and (min-width: 768px) {
  .p-topKv__scroll {
    left: max(40px, (100% - 1200px) / 2);
  }
}
.p-topKv__scrollLine {
  width: 48px;
  height: 1px;
  background-color: currentColor;
  animation: topKvScroll 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .p-topKv__title::before {
    display: none;
  }
  .p-topKv__line::after {
    display: none;
  }
  .p-topKv__lineInner, .p-topKv__em, .p-topKv__em::after, .p-topKv__subMeta, .p-topKv__subBody, .p-topKv__scroll, .p-topKv__scrollLine, .p-topKv__subBarFill {
    animation: none;
  }
}

@keyframes topKvRun {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.01% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
@keyframes topKvBand {
  0% {
    transform: scaleX(0);
    transform-origin: left;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  50.01% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
@keyframes topKvText {
  0%, 49.99% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
@keyframes topKvInk {
  from {
    background-position: 100% 0;
  }
}
@keyframes topKvUnderline {
  from {
    transform: scaleX(0);
  }
}
@keyframes topKvFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes topKvSubBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes topKvScroll {
  0% {
    transform: scaleX(0);
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}
/**
 * Project: Top Recruit
 * 見出し -> 画面幅いっぱいのアウトライン文字「Join Us」+ ボタン。写真は使わず、文字と余白で見せる
 */
.p-topRecruit {
  overflow: hidden;
}
.p-topRecruit__joinUs {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 24vw;
  font-weight: 700;
  line-height: 0.9;
  color: transparent;
  white-space: nowrap;
  -webkit-text-stroke: 1px #fff;
  user-select: none;
}
@media screen and (min-width: 768px) {
  .p-topRecruit__joinUs {
    font-size: min(22vw, 320px);
  }
}
.p-topRecruit__joinUsInner {
  display: block;
  transform: translate3d(var(--driftShift, 0px), 0, 0);
}
.p-topRecruit__char {
  display: inline-block;
  padding-bottom: 12px;
  vertical-align: top;
  clip-path: inset(0 -8px);
}
.p-topRecruit__glyph {
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-jsEnabled .p-topRecruit__joinUs:not(.is-inview) .p-topRecruit__glyph {
  transform: translateY(110%);
}
.p-topRecruit__char:nth-child(1) .p-topRecruit__glyph {
  transition-delay: 0s;
}
.p-topRecruit__char:nth-child(2) .p-topRecruit__glyph {
  transition-delay: 0.03s;
}
.p-topRecruit__char:nth-child(3) .p-topRecruit__glyph {
  transition-delay: 0.06s;
}
.p-topRecruit__char:nth-child(4) .p-topRecruit__glyph {
  transition-delay: 0.09s;
}
.p-topRecruit__char:nth-child(5) .p-topRecruit__glyph {
  transition-delay: 0.12s;
}
.p-topRecruit__char:nth-child(6) .p-topRecruit__glyph {
  transition-delay: 0.15s;
}
.p-topRecruit__char:nth-child(7) .p-topRecruit__glyph {
  transition-delay: 0.18s;
}
@media (prefers-reduced-motion: reduce) {
  .p-topRecruit__glyph {
    transition: none;
  }
  .is-jsEnabled .p-topRecruit__joinUs:not(.is-inview) .p-topRecruit__glyph {
    transform: none;
  }
}

/**
 * Project: Top Service
 * オフホワイト地。事業名を大きな行で並べる。PC は hover で行の右側に大きなアウトライン英字がスッと現れ、SP は行の中に小さな英字ラベルを添える
 */
.p-topService {
  background-color: #f6f6f3;
  color: #0b0b0c;
}
.p-topService__list {
  position: relative;
  border-top: 1px solid rgba(11, 11, 12, 0.2);
}
.p-topService__link {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr 16px;
  gap: 4px 12px;
  align-items: center;
  overflow: hidden;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  background-image: linear-gradient(#1f44e0, #1f44e0), linear-gradient(rgba(11, 11, 12, 0.2), rgba(11, 11, 12, 0.2));
  background-repeat: no-repeat;
  background-position: right bottom, left bottom;
  background-size: 0 1px, 100% 1px;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (min-width: 768px) {
  .p-topService__link {
    grid-template-columns: 80px 1fr 40px;
    gap: 24px;
    padding: 40px 0;
    font-size: 32px;
  }
}
.p-topService__link:focus-visible {
  background-position: left bottom, left bottom;
  background-size: 100% 1px, 100% 1px;
}
.p-topService__link:focus-visible .p-topService__num,
.p-topService__link:focus-visible .p-topService__arrow {
  color: #1f44e0;
}
.p-topService__link:focus-visible .p-topService__name {
  transform: translateX(8px);
}
.p-topService__link:focus-visible .p-topService__en {
  clip-path: inset(0);
  opacity: 1;
  transform: translate(0, -54%);
}
@media screen and (min-width: 768px) {
  .p-topService__link:hover {
    background-position: left bottom, left bottom;
    background-size: 100% 1px, 100% 1px;
  }
  .p-topService__link:hover .p-topService__num,
  .p-topService__link:hover .p-topService__arrow {
    color: #1f44e0;
  }
  .p-topService__link:hover .p-topService__name {
    transform: translateX(8px);
  }
  .p-topService__link:hover .p-topService__en {
    clip-path: inset(0);
    opacity: 1;
    transform: translate(0, -54%);
  }
}
.p-topService__num {
  grid-row: 1;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  color: #5c626c;
  transition: color 0.3s;
}
@media screen and (min-width: 768px) {
  .p-topService__num {
    font-size: 14px;
  }
}
.p-topService__name {
  position: relative;
  z-index: 1;
  grid-row: 1;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-topService__arrow {
  grid-row: 1/3;
  grid-column: 3;
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  transition: color 0.3s;
}
@media screen and (min-width: 768px) {
  .p-topService__arrow {
    grid-row: auto;
    grid-column: auto;
  }
}
.p-topService__en {
  grid-column: 2;
  grid-row: 2;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #5c626c;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
  .p-topService__en {
    position: absolute;
    top: 50%;
    right: 96px;
    grid-column: auto;
    grid-row: auto;
    font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    font-size: min(6vw, 88px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: transparent;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
    -webkit-text-stroke: 1px rgba(11, 11, 12, 0.4);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate(32px, -54%);
    transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-topService__en {
    transition: none;
  }
}

/**
 * Utility: Visually Hidden
 * 画面からは隠し、スクリーンリーダーとフォーカスには残す（radio の input・fieldset の legend など）
 */
.u-visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}