/* ==========================
   Heroセクション：全体レイアウト
========================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: none;
}

.hero::before,
.hero::after {
  clip-path: inherit; /* ← これでヒーローの切り抜きを継承 */
  /* clip-path が未使用なら不要 */
}

/* Heroセクション - 背景動画 */
.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* Hero：スクロール案内（器） */
.hero__scroll {
  position: absolute;
  right: clamp(10px, 3vw, 20px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

/* 線はサイズと外側の位置だけ構造側で管理 */
.hero__scroll-line {
  width: 3px;
  height: 200px;
  margin-top: -130px; /* 配置に効くのでこちら */
  margin-bottom: var(--scroll-line-nudge, 0px); /* +で下へ */
  margin-right: var(--scroll-line-x, 0px); /* +で左に離す（gapに足し算）*/
}

/* テキストの外側余白は構造 */
.hero__scroll-text {
  margin-top: 16px;
  margin-bottom: var(--scroll-text-nudge, 0px);
  margin-left: var(--scroll-text-x, 0px);
}

/* ==========================
   ナビゲーション
========================== */
.hero__nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(20px, 4vw, 60px);
}

.main-nav__list {
  display: flex;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================
   各セクション共通
========================== */
.service-section,
.products-section,
.company-section {
  padding-left: var(--section-padding-side);
  padding-right: var(--section-padding-side);
}

/* ==========================
   SERVICEセクション全体
========================== */
.service-section {
  position: relative;
}

.service-bg-wrap {
  position: relative;
  /* overflow: hidden; ← 動画が飛び出すなら残す。そうでなければ不要 */
}

.service-bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: -10;
}

/* SERVICE：縦見出し */
/* .service-heading {
  position: absolute;
  top: clamp(-80px, -8vw, -110px);
  margin: 0 40px 0 0;
  display: flex;
} */

.service-heading {
  top: clamp(-80px, -8vw, -110px);
  left: 0; /* ← 親の左端に固定 */
}

/* GAMES：本文・グリッド */
.service-games {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 8vw;
  gap: 40px;
  margin-top: 3em;
  margin-left: auto;
  align-items: flex-end;
  pointer-events: none;
  z-index: 2;
}

.service-heading-games {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  z-index: 2;
}

.service-main-row {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 80px);
  min-height: 1px;
}

/* GAMES：本文ラッパーと並び（器） */
.games-image-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

/* GAMES：グリッド配置 */
.games-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 2vw 2vw;
  align-items: center;
  justify-items: center;
  position: relative;
}

/* GAMES：画像サイズ */
.games-image {
  width: var(--service-image-size);
  aspect-ratio: 1 / 1;
  display: block;
}

.games-image img {
  width: 100%;
  height: 100%;
  display: block;
}

.games-image-left {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
}

.games-image-right-top {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: start;
}

.games-image-right-bottom {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-self: end;
}

/* -----MOVIE----- */
.movie-img {
  width: clamp(120px, 30vw, 320px);
  aspect-ratio: 16 / 9;
}
.movie-img-large {
  width: clamp(220px, 60vw, 680px);
}

.service-movie-head {
  position: relative;
  flex: 1;
  margin-top: clamp(32px, 6vw, 80px);
  z-index: 2;
}

.service-movie-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-movie-head > * {
  position: relative;
  z-index: 3;
  margin-left: clamp(40px, 8vw, 120px);
  max-width: clamp(360px, 40vw, 600px);
}

.movie-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 8vw, 96px);
  margin-top: clamp(40px, 6vw, 96px);
  padding: 0 clamp(7vw, 12vw, 120px);
}

.movie-row-top,
.movie-row-bottom {
  display: flex;
  width: 100%;
}
.movie-row-top {
  justify-content: flex-end;
}
.movie-row-bottom {
  justify-content: flex-start;
}

.movie-box-right {
  width: clamp(280px, 36vw, 640px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.movie-box-wide {
  width: clamp(480px, 72vw, 1200px);
  aspect-ratio: 16 / 6;
  overflow: hidden;
}

.movie-thumb {
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================
   PRODUCTS セクション レイアウト
========================= */
.products-section {
  position: relative;
  overflow: visible;
  box-sizing: border-box;

  padding-block: var(--section-gap-top); /* ← 必要なければコメントアウト */
  --products-heading-gutter: var(--vertical-heading-gutter);
  --products-rail: var(--content-rail);
  --products-gallery-rail: var(--gallery-rail);

  padding-right: calc(var(--products-heading-gutter));
  margin-top: var(--section-gap-top);
  padding-bottom: 100px;
}

.products-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.products-heading {
  position: absolute;
  top: 0;
  right: var(--section-padding-side);
  z-index: 0;
  margin: 0;
}

.products-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  column-gap: clamp(24px, 4vw, 80px);
  align-items: start;
  /* padding-left: var(--content-inset, var(--section-padding-side)); */
  padding-right: var(--vertical-heading-gutter);
}

.products-info {
  grid-column: 1;
  grid-row: 1;
  margin-top: clamp(20px, 10vw, 200px);
}

.products-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.5vw, 24px);
  width: var(--products-gallery-rail);
  grid-column: 2;
  grid-row: 1;
  margin-top: clamp(20px, 10vw, 200px);
  padding-inline: 0;
}

.products-tag {
  display: block;
  margin-bottom: 1.2em;
}
.products-title {
  margin-bottom: 1.1em;
}
.products-desc {
  margin-bottom: 2em;
}

.products-img {
  aspect-ratio: 16 / 9;
}
.products-img-lg {
  width: clamp(320px, 30vw, 680px);
}
.products-img-md {
  width: clamp(220px, 20vw, 480px);
}
.products-img-sm {
  width: clamp(100px, 18vw, 280px);
}

.products-row-lg,
.products-row-md,
.products-row-sm {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0;
}
.products-row-lg {
  justify-content: flex-start;
}
.products-row-md {
  justify-content: flex-end;
}
.products-row-sm {
  justify-content: flex-start;
}

.products-row-md .products-img-md {
  margin-right: clamp(8px, 2vw, 32px);
}

/* =========================
   COMPANY セクション
========================= */
.company-section {
  position: relative;
  padding-block: clamp(64px, 10vw, 140px);
  margin-top: 0;
  overflow: hidden;
  scroll-margin-top: clamp(72px, 12vw, 140px);
}

.company-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.company-title {
  position: relative;
  z-index: 0;
  margin: 0 0 clamp(24px, 5vw, 48px) 0;
}

.company-inner {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  padding-right: clamp(8px, 2vw, 24px);
}

.company-id {
  position: relative;
  max-width: 1280px;
  width: min(1280px, 70vw);
  padding-left: clamp(40px, 6vw, 92px);
  margin-bottom: clamp(32px, 6vw, 72px);
}

.id-side-title {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(24px, 3.2vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%) rotate(180deg);
  transform-origin: top center;
  align-self: flex-start;
}

.id-table {
  width: 100%;
  max-width: 1200px;
  border-collapse: collapse;
}

.id-table th {
  width: 28%;
}
.id-table td {
  width: 72%;
}
.id-table th,
.id-table td {
  word-break: break-word;
  /* white-space: nowrap;  */
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.company-history {
  width: min(560px, 42vw);
  margin-left: auto;
  margin-right: 0;
  padding-right: clamp(24px, 4vw, 64px);
}

.history-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.history-list li {
  position: relative;
  display: grid;
  grid-template-columns: 10px auto 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 14px 0;
}

.history-list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.history-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  z-index: 0;
  justify-self: center;
  align-self: center;
}

.history-list li:last-child::after {
  display: none;
}

.history-list time {
  font-weight: 800;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.06em;
}

.history-list p {
  margin: 0;
  opacity: 0.9;
  letter-spacing: 0.15em;
  font-weight: 300;
  font-size: clamp(14px, 3vw, 16px);
}

/* =========================
   RECRUIT セクション
========================= */
.recruit-section {
  position: relative;
  padding-bottom: 100px;
}

.recruit-title {
  width: 100%;
  max-width: var(--recruit-rail);
  margin-left: auto;
  padding-inline: var(--recruit-gutter);
  text-align: right;
}

.recruit-inner {
  max-width: var(--recruit-rail); /* ← ここで幅制限 */
  width: 60%;
  margin-left: auto; /* ← 右寄せ */
  margin-right: 0;
  padding-left: 40px;
  padding-right: clamp(40px, 5vw, 120px);
  padding-block: 30px;
}

.job-block {
  margin-top: var(--recruit-spacing-y);
  margin-left: auto;
  margin-right: 0;
  width: 100%;
  max-width: var(--recruit-rail);
}

.job-title {
  margin: 0 0 clamp(12px, 2vw, 20px) 0;
}

.job-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 800px;
}

.job-row {
  display: grid;
  grid-template-columns: var(--recruit-label-w) 1fr;
  align-items: center;
  min-height: var(--recruit-row-height);
  gap: clamp(12px, 2vw, 24px);
}

.recruit-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(64px, 10vw, 140px);
}

/* =========================
   footer
========================= */
.site-footer {
  padding: clamp(40px, 5vw, 80px) 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(40px, 5vw, 100px);
}

.footer-left ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
}

.footer-right {
  text-align: right;
}

address {
  margin-top: 8px;
}