:root {
    --bg-dark: #050505;
    --fg-light: #ffffff;
    --accent-cyan: #00f0ff;
    --font-en: 'Archivo Black', sans-serif;
    --font-jp: 'Noto Sans JP', sans-serif;
}
body {
    background-color: var(--bg-dark);
    color: var(--fg-light);
    font-family: var(--font-jp);
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    cursor: none;
}

    html.lenis { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    .lenis.lenis-scrolling iframe { pointer-events: none; }

    .cursor {
        position: fixed; top: 0; left: 0; width: 12px; height: 12px;
        background-color: var(--accent-cyan); border-radius: 50%;
        pointer-events: none; z-index: 9999; mix-blend-mode: difference;
        transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s;
    }
    .cursor.hovered { width: 60px; height: 60px; background-color: #fff; }

    /* --- NAVIGATION --- */
    .gnmd-nav {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none; z-index: 1000; padding: clamp(20px, 4vw, 40px);
        display: flex; flex-direction: column; justify-content: space-between;
    }
    .nav-item { pointer-events: auto; text-decoration: none; color: #fff; font-size: 0.75rem; letter-spacing: 0.15em; font-family: var(--font-en); transition: opacity 0.3s; }
    .nav-item:hover { opacity: 0.6; }

    /* 【修正箇所】右下に「逃げ」を作り、重なりを防止 */
    .nav-bottom {
        display: flex;
        justify-content: flex-start; /* 左寄せに変更 */
        align-items: flex-end;
        gap: 40px; /* CONTACTとOYAMAの間に余白 */
        padding-right: 100px; /* 右下のボタンと重ならないようにスペースを空ける */
    }
    .nav-contact-link { color: var(--accent-cyan) !important; order: -1; }

    /* --- HERO --- */
    #hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .hero-bg-layer {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=2072');
        background-size: cover; background-position: center; z-index: 1; will-change: transform;
    }
    .huge-text-layer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 100%; text-align: center; pointer-events: none; opacity: 0.08; }
    .huge-text { font-size: 22vw; line-height: 0.8; text-transform: uppercase; letter-spacing: -0.02em; font-family: var(--font-en); }
    .text-outline { -webkit-text-stroke: 1px #fff; color: transparent; }

    .content-box { position: relative; z-index: 10; text-align: center; width: 100%; padding: 0 5%; overflow: hidden; }
    .title-wrapper { overflow: hidden; display: inline-block; line-height: 1; }
    .display-title { font-family: var(--font-en); font-size: clamp(3.5rem, 12vw, 13rem); line-height: 0.95; margin: 0; letter-spacing: -0.02em; transform: translateY(100%); }
    .service-desc { letter-spacing: 0.05em; font-weight: 500; opacity: 0; }

    /* --- SERVICES --- */
    .main-content { position: relative; z-index: 20; background: var(--bg-dark); }
    .service-section { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-dark); }
    .service-card {
        width: 94%; max-width: 1400px; height: 80vh; background: #0a0a0a;
        border: 1px solid rgba(255,255,255,0.08); border-radius: 40px;
        overflow: hidden; position: relative; display: flex;
        box-shadow: 0 40px 100px rgba(0,0,0,0.5);
        transform-origin: top center; will-change: transform, opacity, filter;
    }
    .service-card .col-md-5 {
        position: relative; z-index: 15;
        background: linear-gradient(to right, rgba(10,10,10,1) 85%, rgba(10,10,10,0));
        padding: clamp(2.5rem, 6vw, 5rem) !important;
    }
    .service-number { font-family: var(--font-en); font-size: 1rem; color: var(--accent-cyan); display: block; margin-bottom: 0.8rem; letter-spacing: 0.2em; }
    .service-card-title { font-family: var(--font-en); font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 0.5rem; color: #fff; letter-spacing: 0.02em; }
    .service-sub { font-size: 1.1rem; color: var(--accent-cyan); margin-bottom: 2rem; font-weight: 700; display: block; letter-spacing: 0.05em; }
    .service-card-text { font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,0.6); font-weight: 400; letter-spacing: 0.03em; }

    .service-image { position: relative; background-size: cover; background-position: center; filter: grayscale(1); transition: filter 0.8s ease, transform 1.5s ease; }
    .service-section:hover .service-image { filter: grayscale(0.2); transform: scale(1.05); }

    /* --- MESSAGE --- */
    .message-section { padding: 30vh 0; background: var(--bg-dark); position: relative; z-index: 30; }
    .message-title { font-family: var(--font-jp); font-weight: 900; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.4; margin-bottom: 4rem; letter-spacing: 0.02em; }
    .message-content { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 2.2; color: rgba(255, 255, 255, 0.8); max-width: 850px; font-weight: 400; }

    /* --- COMPANY --- */
    .company-section { padding: 20vh 0; background: #000; position: relative; z-index: 38; }
    .info-item label { font-family: var(--font-en); font-size: 0.7rem; color: var(--accent-cyan); letter-spacing: 0.2em; margin-bottom: 1.2rem; }
    .info-val .en { font-family: var(--font-en); font-size: 2.4rem; font-weight: 900; letter-spacing: -0.02em; }
    .info-val .jp-mid { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; }
    .info-col { border-left: 1px solid rgba(255,255,255,0.1); padding-left: 3rem !important; }

    /* --- FOOTER --- */
    #footer { position: relative; min-height: 110vh; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; z-index: 40; }
    #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

    .contact-btn {
        font-family: var(--font-en); font-size: clamp(2.5rem, 9vw, 8rem); color: #fff; text-decoration: none;
        position: relative; z-index: 10; display: inline-block; padding: 0 30px;
        letter-spacing: -0.02em; transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), color 0.4s;
    }
    .contact-btn:hover { transform: scale(1.05); color: var(--accent-cyan); }

    /* -------------------------------------
        BACK TO TOP GIMMICK (修正版：位置調整)
    -------------------------------------- */
    .pagetop-wrapper {
        position: fixed; bottom: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 40px);
        width: 80px; height: 80px;
        z-index: 1100; /* ナビゲーションより上に設定 */
        display: flex; align-items: center; justify-content: center;
        opacity: 0; pointer-events: none; transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        transform: translateY(20px);
    }
    .pagetop-wrapper.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }

    .pagetop-magnetic {
        width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    }

    .btn-pagetop {
        position: relative; width: 60px; height: 60px; border-radius: 50%;
        background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
        color: #fff; text-decoration: none; display: flex; align-items: center; justify-content: center;
        transition: 0.3s; pointer-events: auto;
    }

    .btn-pagetop svg.progress-ring {
        position: absolute; top: -1px; left: -1px; width: 62px; height: 62px;
        transform: rotate(-90deg); pointer-events: none;
    }

    .btn-pagetop svg.progress-ring circle {
        fill: none; stroke: var(--accent-cyan); stroke-width: 2;
        stroke-dasharray: 188.5; stroke-dashoffset: 188.5;
        transition: stroke-dashoffset 0.1s linear;
    }

    .btn-pagetop:hover { background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan); }
    .btn-pagetop .arrow { font-size: 20px; transition: 0.3s; transform: translateY(0); }
    .btn-pagetop:hover .arrow { transform: translateY(-3px); }

    @media (max-width: 991px) {
        .service-card { flex-direction: column; height: auto; min-height: 85vh; border-radius: 24px; }
        .info-col { border-left: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0 0 3rem 0 !important; margin-bottom: 2rem; }
        .cursor { display: none; }
        body { cursor: auto; }
        .pagetop-wrapper { bottom: 20px; right: 20px; width: 60px; height: 60px; }
        .btn-pagetop { width: 50px; height: 50px; }
        .btn-pagetop svg.progress-ring { width: 52px; height: 52px; }

        /* スマホでCONTACTが隠れないように調整 */
        .nav-contact-link { margin-bottom: 0; }
        .nav-bottom { padding-right: 80px; gap: 20px; }
    }

/* --- LOGO TEXT ENHANCEMENT --- */
.logo-text {
    pointer-events: auto;
    text-decoration: none;
    color: #fff;
    font-family: var(--font-en);
    font-size: 1rem; /* 少し大きく */
    font-weight: 900;
    letter-spacing: 0.1em; /* 字間を広げて見やすく */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-block;
    position: relative;
}

.logo-text:hover {
    color: var(--accent-cyan);
    transform: translateY(-2px); /* 上に浮く動き */
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.5); /* 発光エフェクト */
}

/* 常にわずかに動かして存在感を出す（任意） */
@keyframes logoPulse {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}
.logo-text {
    animation: logoPulse 3s infinite ease-in-out;
}

/* --- INFINITY LOGO SLIDER --- */
  .partners-section {
      padding: 10vh 0;
      background: #000;
      position: relative;
      z-index: 39;
      overflow: hidden;
  }

  .logo-slider {
      width: 100%;
      overflow: hidden;
      padding: 40px 0;
      /* 左右にグラデーションのマスクをかけて消え際を滑らかにする */
      mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      background: #858585c7;
  }

  /* ロゴの総数に合わせて幅を調整 */
.logo-track {
    display: flex;
    /* (ロゴ1つ分: 250px) * (ロゴ総数: 30) */
    width: calc(250px * 30);
    animation: scroll 100s linear infinite; /* ロゴが多いので時間を少し長めに調整 */
}

  .logo-item {
      width: 250px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
      flex-shrink: 0;
  }

  .logo-item img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      /* ロゴを白っぽく、かつ少し透過させて馴染ませる */
      opacity: 0.9;
      transition: 0.3s;
  }

  .logo-item img:hover {
      opacity: 1;
      filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
  }

  @keyframes scroll {
      0% { transform: translateX(0); }
      /* (ロゴ1つ分: 250px) * (ループさせる数: 15) */
      /* 30個あれば、半分（15個分）移動すればループの継ぎ目が自然になります */
      100% { transform: translateX(calc(-250px * 30)); }
  }

  /* スマホ対応 */
  @media (max-width: 768px) {
      .logo-item { width: 180px; padding: 0 25px; }
      .logo-track { width: calc(180px * 12); }
      @keyframes scroll {
          100% { transform: translateX(calc(-180px * 6)); }
      }
  }

  /* スマホ対応（例：ロゴ1つ分を180pxに縮小） */
  @media (max-width: 768px) {
      .logo-item { width: 180px; padding: 0 25px; }
      .logo-track { width: calc(180px * 30); }

      @keyframes scroll {
          100% { transform: translateX(calc(-180px * 15)); }
      }
  }

  /* --- COMPANY SECTION MOBILE FIX --- */
  @media (max-width: 991px) {
      .company-section {
          padding: 10vh 4vh; /* 余白を少し詰める */
      }

      /* はみ出しの原因：フォントサイズを可変にする */
      .info-val .en {
          font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
          word-break: break-all; /* 長い英単語（メールアドレス等）の強制折り返し */
          line-height: 1.2;
      }

      /* メールアドレス等はさらに調整 */
      .info-item mt-5 .en {
          font-size: clamp(1.2rem, 5vw, 1.4rem) !important;
      }

      .info-col {
          padding-left: 0 !important;
          padding-bottom: 2rem !important;
          border-left: none !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .info-col:last-child {
          border-bottom: none;
      }

      .info-item label {
          margin-bottom: 0.5rem;
      }


  }


  /* 特に幅が狭いデバイス（iPhone SEなど）向けの微調整 */
  @media (max-width: 375px) {
      .info-val .en {
          font-size: 1.5rem !important;
      }
      .info-val .jp-mid {
          font-size: 1rem;
      }
  }

  @media (max-width: 991px) {
        /* カード全体の高さ制限を解除し、中身に合わせる */
        .service-card {
            height: auto !important;
            min-height: auto !important;
            display: block; /* Flexを解除 */
        }

        /* テキストエリアの調整 */
        .service-card .col-md-5 {
            padding: 40px 30px !important;
            background: #0a0a0a; /* グラデーションを単色にして読みやすく */
        }

        /* 画像エリアに高さを強制的に持たせる */
        .service-image {
            width: 100%;
            height: 250px; /* モバイルで見栄えの良い高さ */
            display: block !important;
            order: -1; /* 画像をテキストより上に持ってくる（お好みで） */
            filter: grayscale(0.5); /* モバイルは少し色を出す */
        }
    }
    /* 追加の補強設定 */
      @media (max-width: 991px) {
          .service-section {
              height: auto !important; /* セクションの固定高さを解除 */
              position: relative !important;
              padding: 50px 0;
          }

          /* カード内の行（Row）を縦並びに */
          .service-card .row {
              flex-direction: column-reverse; /* 画像を上、文字を下に */
          }
      }
      @media (max-width: 991px) {
        /* 巨大テキストレイヤーのモバイル最適化 */
        .huge-text-layer {
            z-index: 2 !important; /* 背景より上に強制 */
            perspective: none !important; /* モバイルでは3Dを抑えめにする */
            transform: translate(-50%, -50%) scale(1.2) !important; /* 位置を中央固定 */
            width: 100vw;
            opacity: 0.12 !important; /* モバイルは見えにくいので少し濃く */
        }

        .huge-text {
            font-size: 35vw !important; /* モバイル用にサイズを最適化 */
            letter-spacing: -0.05em;
            line-height: 0.7;
        }

        /* 背景画像レイヤーのz-indexを確実に下げる */
        .hero-bg-layer {
            z-index: 1 !important;
        }

        /* 中央のメインタイトルを最前面に */
        .content-box {
            z-index: 10 !important;
        }
    }