/* ===============================
   SP（〜950px）: 縦1カラム＆中央寄せ
   ルール：器は共通のレールで統一、差分だけ書く
================================= */
@media (max-width: 950px) {
  /* ---- SP用トークン（この帯だけ有効） ---- */
  :root {
    --sp-rail: min(92vw, 700px); /* 全体の横幅 */
    --sp-gap: 16px; /* 基本の縦マージン */
    --sp-gap-lg: 24px; /* 少し大きい間隔 */

    /* ===== 見出しサイズ（SP専用） ===== */
    --heading-section: clamp(40px, 37.5vw, 50px);
    --heading-sub: clamp(30px, 6.6vw, 40px);

    /* ===== 説明文（リード文） ===== */
    --font-size-lead: clamp(12px, 3vw, 14px);

    /* ===== スクロール ===== */
    --line-y: 55%;
    --scroll-top: 55%; /* ← SP版だけ上に持ってくる */
    --scroll-h: 160px; /* ← 線の長さも調整できる */
  }

  /* ---- 共通：セクション内側は同じ幅で中央寄せ ---- */
  .sp-only {
    display: inline;
  }

  .service-section,
  .products-section,
  .company-section,
  .recruit-section {
    padding-inline: 0;
  }

  .service-bg-wrap,
  .products-inner,
  .company-inner,
  .recruit-inner,
  .footer-inner {
    width: 100%;
    max-width: var(--sp-rail);
    margin-inline: auto;

    /* iOS のノッチ/安全域で片寄りしないようガード（あれば使われる） */
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
  }

  .hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 切り抜いて全体に広げる */
    object-position: center; /* 見せたい位置（例：右上） */
  } /* 100vwトラップ回避 */

  html,
  body {
    overflow-x: clip;
  }

  .intro {
  z-index: 100; /* 最前面保証 */
}

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

  .hero__nav {
    display: flex; /* ロゴは残す */
    justify-content: space-between;
    align-items: center;
     z-index: 10; /
  }

  .main-nav {
    display: none; /* ナビ部分だけ非表示 */
  }

  /* -----------------------------
   Hero 見出し（SP）
----------------------------- */
  .hero__heading {
    /* PC版のabsolute配置を打ち消し */
    position: relative;
    top: auto;
    right: auto;
    transform: none;

    /* レイアウトサイズ */
    width: var(--sp-rail);
    margin: 200px auto var(--sp-gap);
    padding: 40px 0;

    /* テキスト配置 */
    text-align: right;
  }

/* ==============================
   SERVICE セクション（SP）
============================== */


.service-heading {
  writing-mode: horizontal-tb; /* SPは横書き */
  position: static; /* relativeじゃなくてもOK */
  width: var(--sp-rail);
  margin: var(--sp-gap-lg) auto var(--sp-gap);
  text-align: left;
  font-size: var(--heading-section);
  font-weight: 600;
}


 .service-games {
  width: var(--sp-rail);
    gap: var(--sp-gap);
    padding-right: 0;
    margin-top: 0;
    /* align-items: stretch; 将来画像が増えたとき用 */
  }

  .games-title {
   font-size: var(--heading-sub);
   z-index: 0;
  }

  .service-games,
  .games-grid,
  .games-info {
    position: relative;
   }

  .games-image,
  .games-image-left,
  .games-image-right-top,
  .games-image-right-bottom {
    width: 100%;
    aspect-ratio: 1/1;
    grid-column: auto; /* PC版の位置指定をリセット（SPでは縦積みに戻す） */
    grid-row: auto; /* 同上 */
     z-index: -1;
  }

  .games-description {
    text-align: right;
    font-size: var(--font-size-lead);
    line-height: 1.6;
    max-width: 38ch;
    margin-left: auto;
    margin-top: 6px;
     z-index: -1;
  }

  .games-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-gap);
    width: var(--sp-rail);
    margin: var(--sp-gap-lg) auto 0;
     z-index: -1;
  }

  .games-image-wrap {
    width: 70%;
    aspect-ratio: 1 / 1;
     z-index: -1;
  }

  .games-image-left {
    margin-left: auto;
    margin-right: 0;
     z-index: -1;
  }
  .games-image-right-top {
    margin-left: 0;
    margin-right: auto;
     z-index: -1;
  }
  .games-image-right-bottom {
    margin-left: auto;
    margin-right: 0;
     z-index: -1;
  }

  /* ==============================
   MOVIE セクション（SP）
============================== */

  /* 見出し */
  .movie-title {
    font-size: var(--heading-sub);
  }

  /* 見出し＋説明文のラッパー内の要素 */
  .service-movie-head > * {
    margin-left: 0; /* ← PC版で付けた左余白をSPでリセット */
    max-width: var(--sp-rail);
  }

  .movie-description {
    font-size: var(--font-size-lead);
    line-height: 1.6;
    max-width: 38ch; /* 読みやすい行幅に制限 */
    margin-top: 6px;
  }

  /* ギャラリー全体 */
  .movie-gallery {
    width: var(--sp-rail);
    margin: var(--sp-gap-lg) auto 0;
    gap: var(--sp-gap);
  }

  /* 上段（小さめ・右寄せ配置） */

  .movie-box-right {
    width: 86%;
  }

  /* 下段（ワイド・左寄せ配置） */
  .movie-box-wide {
    width: 100%;
  }

  /* ==============================
   PRODUCTS セクション（SP）
============================== */

  /* セクション見出し */
  .products-heading {
    writing-mode: horizontal-tb; /* ← PC版縦書きをSPで横書きに戻す */
    position: static; /* ← PC版absoluteをリセット */
    width: var(--sp-rail);
    margin: var(--sp-gap-lg) auto var(--sp-gap);
    text-align: left;
    font-size: var(--heading-section);
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* 全体の内側 */
  .products-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-gap-lg);
    padding: 0;
  }

  /* 製品情報テキスト */
  .products-info {
    width: var(--sp-rail);
    margin: 0 auto;
    text-align: left;
    max-width: 62ch; /* 行幅制御（可読性） */
  }

  .products-tag {
    font-size: var(--font-size-small);
    display: block; /* ← spanを強制block化。明示的だが実質同じ */
    margin-top: var(--sp-gap-lg);
  }

  .products-title {
    font-size: var(--heading-sub);
  }

  .products-desc {
    font-size: var(--font-size-lead);
    line-height: 1.6;
    max-width: 38ch; /* 読みやすい行幅 */
    margin-top: 6px;
  }

  /* ギャラリー全体（逆くの字配置） */
  .products-gallery {
    width: var(--sp-rail);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-gap-lg);
  }

  /* 上段（大きめ・左寄せ） */
  .products-row-lg {
    display: flex;
    justify-content: flex-start;
  }
  .products-img-lg {
    width: 85%; /* 少し小さめに */
    aspect-ratio: 16 / 9; /* 横長 */
  }

  /* 中段（中サイズ・右寄せ） */
  .products-row-md {
    display: flex;
    justify-content: flex-end;
  }
  .products-img-md {
    width: 65%; /* 中くらい */
    aspect-ratio: 16 / 9;
  }

  /* 下段（小サイズ・左寄せ） */
  .products-row-sm {
    display: flex;
    justify-content: flex-start;
  }
  .products-img-sm {
    width: 50%; /* 小さめ */
    aspect-ratio: 16 / 9;
  }

  /* ==============================
   COMPANY セクション（SP）
============================== */

  /* 見出し */
  .company-title {
    writing-mode: horizontal-tb; /* ← PC版縦書きをSPで横書きに戻す */
    position: relative; /* ← PC版absoluteを打ち消し */
    width: var(--sp-rail);
    margin: var(--sp-gap-lg) auto var(--sp-gap);
    text-align: left;
    font-size: var(--heading-section);
    font-weight: 600;
  }

  /* IDENTIFICATION ブロック */
  .company-id {
    width: var(--sp-rail);
    margin: var(--sp-gap-lg) auto; /* ← 上下マージン調整 */
    display: grid;
    grid-template-columns: 1fr; /* SPは縦並び */
    row-gap: 12px; /* タイトルと表の間に余白 */
    position: relative;
    padding-left: 40px; /* ← 縦見出しの幅。必要に応じて調整 */
  }

  /* 縦書き見出し */
  .id-side-title,
  .id-side {
    margin-top: var(--sp-gap-lg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: inline-block; /* Safariの計算を安定化 */
    line-height: 1;
    white-space: nowrap;
    align-self: start; /* ← Safariで“上に固定”させる */
    justify-self: start; /* 左寄せ */
  }

  .id-side-title {
    position: absolute;
    top: 0;
    left: 0;
    transform: none; /* ← 念のため指定 */
  }

  /* テーブル → SPでは縦積み */
  .id-table {
    width: 95%;
    max-width:clamp(360px, 96vw, 900px);
    table-layout: auto;
    margin: var(--sp-gap-lg) auto 0;
    border-collapse: collapse;
  }
  .id-table tr {
    display: block; /* ← 行を縦積みに */
  }
  .id-table th,
  .id-table td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(10px, 3vw, 20px);
    text-align: left;
    font-size: var(--font-size-body);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    letter-spacing: 0.15em;
          white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  }

  /* HISTORY */
  .company-history {
    width: var(--sp-rail);
    margin: var(--sp-gap-lg) auto 0;
    padding-right: 0; /* ← PC版の余白をリセット */
  }

  .history-list p {
    white-space: normal; /* ← PC版でnowrapにしてるのをリセット */
  }
  .company-section {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .company-history {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .recruit-section {
    margin-top: 0;
  }
  /* ==============================
   RECRUIT セクション（SP）
============================== */

  .recruit-section {
    background: none;
    padding-inline: clamp(24px, 9vw, 36px);
    /* ← セクション全体の左右余白。SP幅に合わせて可変 */
  }

  .recruit-title {
    width: var(--sp-rail);
    margin: var(--sp-gap-lg) auto var(--sp-gap);
    line-height: 1.05; /* ← 見出しを詰め気味に */
    text-align: right;
    /* font-size: clamp(32px, 13vw, 56px);  */
    font-size: var(--heading-section);
    font-weight: 600;

  }

  .job-title {
    text-align: right;
    font-size: clamp(18px, 6vw, 24px);
    margin: clamp(12px, 4vw, 20px) 0;
  }

  .recruit-inner {
    padding: 0; /* ← PC版でついてる余白をリセット */
  }

  .job-row {
    grid-template-columns: 1fr;
    padding-block: 10px;
    min-height: calc(var(--recruit-row-height) + 10px);
  }

  .recruit-cta {
    justify-content: center;
  }

  /* ==============================
   FOOTER セクション（SP）
============================== */

  .site-footer {
    padding: 40px 0; /* ← フッター上下余白 */
  }

  .footer-inner {
    display: flex;
    flex-direction: column; /* ← SPは縦積み */
    gap: var(--sp-gap-lg);
    padding-inline: clamp(20px, 5vw, 32px); /* ← 左右余白をSP基準で調整 */
    max-width: var(--sp-rail);
    margin-inline: auto;
  }

  /* 左カラム（ナビ＋ポリシー） */
  .footer-left {
    text-align: left;
    width: 100%; /* ← 明示的に書いてるが実質デフォルト。harmless */
  }

  /* 右カラム（ロゴ＋住所） */
  .footer-right {
    text-align: right;
    width: 100%; /* ← 同上。保険的に残してOK */
  }

  /* ナビゲーション */
  .footer-nav ul {
    display: flex;
    flex-direction: column; /* ← 縦並び */
    gap: 8px;
  }

  .footer-nav a {
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 800;
  }
  .footer-nav a:hover {
    opacity: 0.7; /* ← タップ環境ではhover効かないが harmless */
  }

  /* ポリシー */
  .footer-policy {
    margin-top: var(--sp-gap);
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 300;
  }

  /* ロゴ */
  .footer-logo {
    font-family: var(--font-en);
  }
  .logo-digital {
    font-size: var(--logo-main-size);
    font-weight: var(--logo-main-weight);
  }
  .logo-addiction {
    font-size: var(--logo-accent-size);
    font-weight: var(--logo-accent-weight);
  }

  /* 住所 */
  .footer-right address {
    margin-top: 6px;
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.5;
    font-family: var(--font-jp);
  }

  /* ==============================
   ハンバーガーアイコン（SP専用）
============================== */
  .hamburger {
    position: fixed; /* 画面右上に固定 */
    top: 20px;
    right: 20px;
    z-index: 13; /* すべての要素の最前面 */
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* ← 線がバツ印に変形するアニメーション用 */
  }

  /* ==============================
   メニューオーバーレイ（背景の暗幕）
============================== */
  .mobile-menu-overlay {
    position: fixed;
    inset: 0; /* top/right/bottom/left:0 の省略形 */
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    z-index: 11; /* メニュー本体より下、コンテンツより上 */
    opacity: 0; /* 初期状態は非表示 */
    pointer-events: none; /* クリックを無効化（開いたときだけ有効化） */
    transition: opacity 0.3s ease;
  }

  /* ==============================
   メニュー本体（右からスライドイン）
============================== */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: clamp(280px, 60vw, 480px); /* 画面幅に応じて可変 */
    height: 100vh;
    background: #111;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%); /* 初期状態は画面外 */
    transition: transform 0.4s ease;
  }

  .mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  /* ==============================
   メニュー項目（アニメーション用）
============================== */
  .mobile-menu li {
    margin: 20px 0;
    opacity: 0; /* 初期状態で透明にして非表示 */
    transform: translateY(20px); /* 下にずらす */
    transition: all 0.4s ease; /* 開いたときにフワッと出す */
  }

  .mobile-menu a {
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
  }

  /* ==============================
   開いたときの状態
============================== */
  .mobile-menu.open {
    transform: translateX(0); /* 右からスライドイン */
    right: 0;
  }
  .mobile-menu-overlay.open {
    opacity: 1;
    pointer-events: auto; /* クリック可能に */
  }
  .mobile-menu.open li {
    opacity: 1;
    transform: translateY(0); /* 下からフェードイン */
  }

  /* ハンバーガーが「バツ印」に変形する演出 */
  .hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 遅延アニメーション（リストが順番に出てくる） */
  .mobile-menu li:nth-child(1) {
    transition-delay: 0.1s;
  }
  .mobile-menu li:nth-child(2) {
    transition-delay: 0.2s;
  }
  .mobile-menu li:nth-child(3) {
    transition-delay: 0.3s;
  }
  .mobile-menu li:nth-child(4) {
    transition-delay: 0.4s;
  }
  .mobile-menu li:nth-child(5) {
    transition-delay: 0.5s;
  }
}

/* ==============================
   PC版では非表示
============================== */
@media (min-width: 951px) {
  .hamburger,
  .mobile-menu,
  .mobile-menu-overlay {
    display: none; /* ← PCでは通常のヘッダーナビを使う */
  }
}

/* ==============================
  ナビメニューのグリッチエフェクト
============================== */

@keyframes glitch {
  0% {
    transform: translate(0, 0);
    text-shadow: 2px 0 red, -2px 0 blue;
  }
  20% {
    transform: translate(-2px, 2px);
    text-shadow: -2px 0 lime, 2px 0 magenta;
  }
  40% {
    transform: translate(2px, -2px);
    text-shadow: 2px 0 cyan, -2px 0 yellow;
  }
  60% {
    transform: translate(-1px, 1px);
    text-shadow: -1px 0 red, 1px 0 blue;
  }
  80% {
    transform: translate(1px, -1px);
    text-shadow: 1px 0 lime, -1px 0 magenta;
  }
  100% {
    transform: translate(0, 0);
    text-shadow: none;
  }
}

.glitch {
  animation: glitch 0.4s steps(2, end);
}