:root {
        --text-primary: #1a1a1a;
        --text-accent: #2563eb;
        --bg-color: #f8fafc;
      }

      body {
        font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
        background-color: var(--bg-color);
        color: var(--text-primary);
        min-height: 100vh;
        padding: 4rem 1rem;
      }

      /* レイアウト用 */
      .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 4rem;
        max-width: 1200px;
        margin: 0 auto;
      }

      .item-card {
        background: white;
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        transition: transform 0.3s ease;
      }

      .item-label {
        font-size: 0.8rem;
        color: #94a3b8;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
      }

      .hover-link {
        font-size: 2.5rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--text-primary);
        line-height: 1.2;
        cursor: pointer;
        position: relative;
        white-space: nowrap;
      }

      /* ----------------------------------------------------
         01. Split Text (Restored)
         前回のコード: 上下に分割してスライド
      ---------------------------------------------------- */
      .hover-split {
        overflow: hidden;
      }
      .hover-split .text-wrap {
        position: relative;
        display: block;
        overflow: hidden;
      }
      .hover-split .before,
      .hover-split .after {
        display: block;
        white-space: nowrap;
      }
      .hover-split .before span,
      .hover-split .after span {
        display: inline-block;
        transform-style: preserve-3d;
      }
      .hover-split .after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: var(--text-accent);
        pointer-events: none;
      }

      /* ----------------------------------------------------
         02. 3D Cube Rotate
      ---------------------------------------------------- */
      .hover-cube {
        perspective: 1000px;
      }
      .hover-cube span {
        display: inline-block;
        transform-origin: center center -15px;
        transform-style: preserve-3d;
      }

      /* ----------------------------------------------------
         03. Cinematic Blur
      ---------------------------------------------------- */
      .hover-blur .char-wrapper {
        position: relative;
        display: inline-block;
      }
      .hover-blur .char-clone {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        filter: blur(8px);
        color: var(--text-accent);
        pointer-events: none;
      }

      /* ----------------------------------------------------
         04. Elastic Jump
      ---------------------------------------------------- */
      .hover-elastic span {
        display: inline-block;
        transform-origin: bottom center;
      }

      /* ----------------------------------------------------
         05. Cyber Glitch (New!)
         ノイズが走り、色がずれるサイバーパンク風
      ---------------------------------------------------- */
      .hover-glitch {
        position: relative;
      }
      .hover-glitch span {
        display: inline-block;
        position: relative;
      }

      /* ----------------------------------------------------
         06. Hacker Decoder (New!)
         ランダムな文字がパラパラと変化して整う
      ---------------------------------------------------- */
      .hover-decoder {
        font-family: monospace; /* 等幅フォント推奨 */
      }

      /* ----------------------------------------------------
         07. Domino Flip (New!)
         ドミノ倒しのようにパタパタ回転
      ---------------------------------------------------- */
      .hover-domino span {
        display: inline-block;
        transform-origin: center;
      }

      /* ----------------------------------------------------
         08. Organic Wave (New!)
         滑らかな波のような動き
      ---------------------------------------------------- */
      .hover-wave span {
        display: inline-block;
      }

      /* ----------------------------------------------------
         09. Italic Slide (Fixed!)
         修正点: overflowをvisibleにし、paddingで余白を確保
      ---------------------------------------------------- */
      .hover-italic {
        overflow: visible; /* はみ出しを許可 */
        padding-right: 0.1em; /* 斜体になった時の右側の余白を少し確保 */
      }
      .hover-italic span {
        display: inline-block;
        transform-origin: bottom left;
      }