:root {
        --bg-dark: #0a0a0a;
        --hermes-orange: #E65425;
        --font-serif: "Playfair Display", "Shippori Mincho", serif;
        --font-sans: "Inter", "Yu Gothic", sans-serif;
        --transition-speed: 5.0s;
        --media-speed: 2.0s;
        --ease: cubic-bezier(0.16, 1, 0.3, 1);
        --menu-ease: cubic-bezier(0.25, 1, 0.5, 1);
      }

      body, html {
        margin: 0; padding: 0;
        width: 100%; height: 100%;
        background: var(--bg-dark);
        color: #fff;
        overflow: hidden;
        font-family: var(--font-sans);
      }

      #intro-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity 2.5s ease, visibility 2.5s;
      }

      #intro-message {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 1.5rem;
        letter-spacing: 0.3em;
        opacity: 0;
        transform: translateY(20px);
        text-align: center;
        text-shadow: 0 4px 20px rgba(0,0,0,1);
      }

      .enter-button {
        margin-top: 2rem;
        padding: 0.8rem 2rem;
        border: 1px solid rgba(255,255,255,0.6);
        background: rgba(0,0,0,0.3);
        color: #fff;
        cursor: pointer;
        font-size: 0.8rem;
        letter-spacing: 0.2em;
        opacity: 0;
        transition: all 0.5s ease;
      }
      .enter-button:hover { background: #fff; color: #000; }

      .nav-element {
        position: fixed;
        z-index: 100;
        padding: 40px;
        pointer-events: auto;
        mix-blend-mode: difference;
        opacity: 0;
      }

      .top-logo-img {
        filter: brightness(0) invert(1);
        opacity: 0.8;
        width: auto;
        height: 32px;
        display: block;
        object-fit: contain;
      }

      .about-text {
        font-size: 1.0rem;
        letter-spacing: 0.2em;
        text-decoration: none;
        color: #fff;
      }

      .footer-copyright {
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 40px;
        z-index: 100;
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        color: #fff;
        opacity: 0.8;
        mix-blend-mode: difference;
        pointer-events: none;
      }

      .pos-top-left { top: 0; left: 0; }
      .pos-bottom-left { bottom: 40px; left: 0; }
      .pos-top-right { top: 0; right: 0; }
      .pos-bottom-right { bottom: 40px; right: 0; }

      #logo-left { opacity: 1; }

      .split-container {
        position: relative;
        width: 100vw; height: 100vh;
        cursor: none;
        background: #000;
      }

      .section {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        overflow: hidden;
      }

      .contemporary { z-index: 1; background: #050505; }
      .western { z-index: 2; background: #111; clip-path: url(#maskPath); }

      .bg-media {
        position: absolute;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background-position: center !important;
        background-size: cover !important;
        opacity: 0.5;
        filter: grayscale(60%) brightness(0.7);
        transform: scale(1.0);
        transition: 
          opacity var(--media-speed) ease, 
          filter var(--media-speed) ease, 
          transform 6.0s var(--ease);
      }

      .section.active .bg-media {
        opacity: 0.6;
        filter: grayscale(0%) brightness(0.9);
        transform: scale(1.4);
      }

      .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        text-align: center;
        pointer-events: none;
        width: 50vw;
      }

      .western .content { left: 0; }
      .contemporary .content { left: 50%; }

      .title-link {
        pointer-events: auto;
        text-decoration: none;
        display: inline-block;
      }

      .title-en {
        font-size: 2.4rem;
        letter-spacing: 0.12em;
        margin-bottom: 1rem;
        display: block;
        line-height: 1.1;
        font-weight: 600;
        color: #ffffff;
        opacity: 1 !important;
        text-shadow: 0 4px 15px rgba(0,0,0,1);
      }
      .western .title-en { font-family: var(--font-serif); font-style: italic; }
      .contemporary .title-en { font-family: var(--font-sans); font-weight: 300; text-transform: uppercase; }

      .title-ja { 
        font-size: 1.1rem;
        letter-spacing: 0.4em; 
        opacity: 0.8;
        font-weight: 500;
        display: block;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0,0,0,1);
      }

      .section-menu {
        position: absolute;
        top: 55%;
        width: 600px;
        z-index: 20;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px 50px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
      }

      .western .section-menu { left: 25vw; }
      .contemporary .section-menu { left: 50vw; }

      .menu-item {
        display: block;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255,255,255,1);
        text-decoration: none;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        transition: all 3.0s var(--menu-ease);
        pointer-events: auto;
        text-shadow: 0 2px 8px rgba(0,0,0,1);
      }
      .menu-item:hover {
        color: var(--hermes-orange);
        border-bottom: 1px solid var(--hermes-orange);
        padding-left: 15px;
        transform: translateX(10px);
      }
      .menu-item span {
        display: block;
        font-size: 0.75rem;
        font-weight: 500;
        opacity: 0.8;
        margin-top: 6px;
        letter-spacing: 0.05em;
        color: #ddd;
        transition: color 3.0s var(--menu-ease);
      }
      
      .cursor {
        position: fixed;
        width: 12px; height: 12px;
        background: #fff;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
      }

      .overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: url("https://www.transparenttextures.com/patterns/stardust.png");
        opacity: 0.1;
        pointer-events: none;
        z-index: 20;
      }
      #svg-defs { position: absolute; width: 0; height: 0; }

      @media (max-width: 768px) {
        .split-container { cursor: auto; }
        .content { width: 100%; left: 0 !important; }
        .western .content { top: 22%; left: -10% !important; }
        .contemporary .content { top: 78%; left: 10% !important; }
        .title-en { font-size: 1.25rem; margin-bottom: 0.4rem; }
        .title-ja { font-size: 0.65rem; }
        /* 修正箇所：イントロメッセージを1行に収める */
        #intro-message { font-size: 1.0rem; white-space: nowrap; }
        /* 修正箇所：モバイルでのボタンサイズ縮小 */
        .enter-button { margin-top: 1.0rem; padding: 0.4rem 1.0rem; font-size: 0.5rem; }
        .section-menu { 
          width: 84%; left: 8% !important; 
          grid-template-columns: 1fr 1fr; gap: 8px 15px; 
          transform: translateY(0) !important;
        }
        .menu-item { padding: 8px 0; font-size: 0.6rem; }
        .menu-item span { display: none; }
        .cursor { display: none; }
        .nav-element { padding: 20px; }
        .top-logo-img { height: 20px; }
        .footer-copyright { padding: 10px 20px; font-size: 0.45rem; width: 100%; text-align: center; }
        #logo-right, #about-right, #about-left { display: none; }
        #logo-left { opacity: 1 !important; }
      }