/* 1. 初期状態（すべて透過0を指定） */
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
    will-change: opacity, transform;
}

/* 2. 出現用アニメーションクラス */
.fadeIn    { animation: fadeInAnime 1.2s cubic-bezier(0.25, 1, 0.5, 1) both; }
.fadeUp    { animation: fadeUpAnime 1.2s cubic-bezier(0.25, 1, 0.5, 1) both; }
.fadeDown  { animation: fadeDownAnime 1.2s cubic-bezier(0.25, 1, 0.5, 1) both; }
.fadeLeft  { animation: fadeLeftAnime 1.2s cubic-bezier(0.25, 1, 0.5, 1) both; }
.fadeRight { animation: fadeRightAnime 1.2s cubic-bezier(0.25, 1, 0.5, 1) both; }

/* 3. キーフレーム定義 */
@keyframes fadeInAnime { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUpAnime { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDownAnime { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeftAnime { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRightAnime { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } }

/* オープニングアニメーション用のスタイル */
 /* body.is-opening-active {
     overflow: hidden !important;
     height: 100vh !important;
     width: 100vw !important;
 } */

 #opening-scene {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 99999;
     /* 確実に全要素の最前面に */
     background-color: #000;
     pointer-events: auto;
     font-family: 'Playfair Display', serif;
     transition: background-color 1.2s ease;
     overflow: hidden;
 }

 #line-layer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 10;
     transition: opacity 1.0s ease;
 }

 /* 線のスタイル */
 .draw-path {
     fill: none;
     stroke: #fff;
     stroke-width: 1.5;
     stroke-linecap: round;
 }

 /* テキストコンテナ */
 .title-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 20;
     font-size: clamp(2rem, 5vw, 4rem);
     letter-spacing: 0.1em;
     display: flex;
     align-items: baseline;
     padding: 10px;
     color: #fff;
     transition: opacity 1.0s ease;
 }

 /* 文字ごとのスタイル */
 .char {
     display: inline-block;
     opacity: 0;
     transform: translateY(20px);
     filter: blur(4px);
     transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .char.visible {
     opacity: 1;
     transform: translateY(0);
     filter: blur(0);
 }

 /* ストーリー表示用レイヤー */
 #story-layer {
     font-family: 'Noto Serif JP', serif;
 }

 .fade-out-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #fff;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.8s ease;
     z-index: 100000;
     /* 最前面 */
 }

 .mv-nav-link {
     text-decoration: none;
     color: white;
     position: relative;
     display: flex;
     align-items: center;
 }

 .mv-nav-subtext {
     font-size: 0.9rem;
     font-family: ui-sans-serif, system-ui, sans-serif;
     margin-left: 2rem;
     padding: 1rem 3rem 1rem 1.5rem;
     background-color: rgba(230,
             230,
             230,
             0.85);
     /* light grey match */
     color: #111;
     opacity: 0;
     transform: translateX(-10px);
     transition:
         opacity 0.4s ease,
         transform 0.4s ease;
     white-space: nowrap;
     pointer-events: none;
     z-index: 10;
 }

 .mv-nav-link:hover .mv-nav-subtext {
     opacity: 1;
     transform: translateX(0);
 }

 .mv-nav-link:hover .custom-underline {
     opacity: 0.8;
 }

 @media (max-width: 768px) {
     .mv-nav-subtext {
         display: none;
     }
 }