@charset "utf-8";
/* CSS Document */
/* CSSカスタムプロパティを再定義 (Tailwindから利用しやすくするため) */
:root {
    --color-mauve: #8C4F6B;
    --color-gold: #C2A878;
    --color-cream: #FDF5E6;
}

/* ユーティリティ: コンテンツを中央寄せにし、PCでの最大幅を設定 */
.u-container {
     max-width: 1280px; /* max-w-7xl相当 */
     margin-left: auto;
     margin-right: auto;
}

/* ====================================
レイアウト (.l-)
==================================== */

/* レイアウト: スプラッシュスクリーン */
.l-splash {
     position: fixed;
     inset: 0;
     z-index: 50;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: #e2a2b1;
}

/* ====================================
コンポーネント (.c-)
==================================== */

/* コンポーネント: セクションタイトル */
.c-title {
     font-size: 2.5rem; /* text-4xl */
     font-weight: 700; /* font-bold */
     text-align: center;
     color: #cd3f61; 
     position: relative;
     font-family: 'Inter', 'system-ui', 'sans-serif'; 
}
.c-title::after {
     content: '';
     display: block;
     width: 60px;
     height: 3px;
     background-color: var(--color-gold); 
     margin: 0.5rem auto 1.5rem; 
     border-radius: 9999px;
}

/* コンポーネント: ロゴタイトル（スプラッシュスクリーン用） */
.c-logo-title {
     font-family: 'Inter', 'system-ui', 'sans-serif';
}

/* --- header --- */
.relative{
    background: #040203;
}

/* --- CAST紹介文 (JS連動) --- */

/* コンポーネント: CAST紹介文 (初期状態) */
.c-desc-text {
     /* 展開・収縮アニメーション用。初期値のmax-heightをCSSで定義 */
     max-height: 48px; /* 3行程度の目安 (text-sm, leading-5 なら3行が48px程度) */
     overflow: hidden;
     transition: max-height 0.5s ease-in-out;
     /* JSで max-height を動的に変更するため、初期状態では transform: scale(1.0) などの軽いスタイルのみ変更することをおすすめします。 */
 }

/* 状態: 3行クリッピングを適用 (JSでトグル) */
.c-desc-text.c-desc-clip {
     /* overflow: hidden; は c-desc-textで定義済み */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     text-overflow: ellipsis;
 }

 /* 状態: 展開時 (JSが max-height: fullScrollHeight を設定) */
.c-desc-text.is-open {
     /* JSによってmax-heightが上書きされるため、ここでは主にクリッピング解除を行う */
     -webkit-line-clamp: unset; 
     display: block; 
     /* max-heightはJSで設定される */
}

/* --- スライダー --- */

/* コンポーネント: スライダーのトラック (スクロールバー非表示) */
.c-slider-track {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
     scroll-behavior: smooth;
  }
 .c-slider-track::-webkit-scrollbar {
      display: none; 
}

/* コンポーネント: スライドインジケーターのドット */
 .c-dot-indicator {
      transition: background-color 0.3s, transform 0.3s;
      width: 8px; 
      height: 8px; 
}
        @media (min-width: 640px) {
            .c-dot-indicator {
                width: 12px; 
                height: 12px; 
            }
        }
 /* インジケーターのアクティブ状態 */
.c-dot-indicator.is-active {
      background-color: var(--color-mauve);
      transform: scale(1.1);
 }

/* --- LINK --- */
.bn-txt{
    text-align: center;
}

/* ====================================
アニメーション (.a-)
==================================== */

/* アニメーション: セクションのフェードイン */
@keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
}

/* 状態: セクションが表示された時のクラス */
.c-fade-in-section.is-visible {
      animation: fadeIn 1.0s ease-out forwards; 
 }

/* --- スプラッシュロゴアニメーション (変更点) --- */
        
/* 1. タイトル用アニメーション: フェードインと浮上 */
@keyframes logoTitleIn {
      0% { opacity: 0; transform: translateY(15px); }
      100% { opacity: 1; transform: translateY(0); }
}
/* 2. サブテキスト用アニメーション: フェードインとスケールアップ */
@keyframes logoSubTextIn {
      0% { opacity: 0; transform: scale(0.95); }
      100% { opacity: 1; transform: scale(1); }
}

/* アニメーション適用クラス (JSで使用) */
.animate-logo-title {
      /* 継続時間 1.5秒, イージング: ease-out, 遅延: 0.8秒, 適用後もスタイルを維持 */
      animation: logoTitleIn 1.5s ease-out 0.8s forwards; 
}
.animate-logo-subtext {
      /* 継続時間 1.2秒, イージング: ease-out, 遅延: 1.5秒, 適用後もスタイルを維持 */
      animation: logoSubTextIn 1.2s ease-out 1.5s forwards; 
}