/* first.css (修正後) */

/* マウス位置を格納するCSS変数を定義 (JavaScriptで値を更新) */
:root {
    --mouse-x: 50vw;
    --mouse-y: 50vh;
}

/* --- ファーストビュー --- */
#first-view {
    position: fixed;
    padding: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* ロゴ(#content)を中央に配置するために維持します */
    justify-content: center;
    align-items: center;
    text-align: center;
    /* absolute配置の基準点となります */
}

/* --- 背景 --- */
#background-video {
    position: fixed; /* 画面全体に固定 */
    background-color: var(--background-color);
    top: 0;
    left: 0;
    width: 100vw;   /* 画面幅いっぱいに */
    height: 100vh;  /* 画面高さいっぱいに */
    z-index: -10;   /* 最背面に配置 */
}

#background-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;   /* アルファ(透明度)を30%に */
}

/* マウス追従する青いグラデーション */
#background-video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle 400px at var(--mouse-x) var(--mouse-y), 
        rgba(0, 120, 255, 0.25) 0%, 
        transparent 70%
    );
    z-index: -9;
    pointer-events: none;
    transition: background 0.1s ease-out;
}

/* PC用の縦書きテキストは使用しないため非表示に */
#sub-text-for-pc {
    display: none;
}
#text-container {
    position: absolute;
    bottom: 20%;
    left: 10vw;
    width: 50%; /* 横幅は画面幅の90% */
    max-width: 1200px; /* PCなどで広がりすぎないように最大幅を指定 */
    
    /* X軸Y軸ともに中央に配置するお決まりのコード */
    transform: translate(0, 0); 
    
    text-align: center; /* 中のテキストをすべて中央揃えに */

    z-index: 10; /* 画像よりも手前に表示 */
    
    /* アニメーションのための初期設定 */
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

/* --- メインテキスト --- */
#main-text {
    color: white; /* 白い文字 */
    font-family: 'Helvetica Neue', 'Arial', sans-serif; /* モダンなフォント */
    font-weight: 800; /* しっかりとした太さ */
    
    /* 画面幅に応じて滑らかにサイズが変わるレスポンシブなフォントサイズ */
    font-size: clamp(24px, 7vw, 140px);
    
    line-height: 1.05; /* 行間を少し詰めて塊感を出す */
    text-transform: uppercase; /* すべて大文字に */
    letter-spacing: -0.1em; /* 見た目を整えるため少しだけ字間を詰める */
    
    /* 親要素が中央揃えなので、これ以上の配置指定は不要 */
    margin: 0;
    padding: 0;
}

/* --- サブテキスト --- */
#sub-text {
    color: rgba(255, 255, 255, 0.9); /* 少し透明度のある白 */
    font-size: clamp(16px, 2.5vw, 20px); /* メインよりは小さく、でも読みやすいサイズ */
    margin-top: 24px; /* メインテキストとの間に余白を設ける */
    line-height: 1.7; /* 読みやすさのために行間を少し広めに */
    font-weight: 400; /* 通常の太さ */
}

/* --- テキスト関係のメディアクエリ --- */
@media screen and (max-width: 768px) {
    #text-container {
        bottom: 50vh;
        left:0;
        width: 100%;
        transform: translateY(110%);
        opacity: 1;
    }
    #main-text{
        font-size: clamp(24px, 10vw, 140px);
    }
    #sub-text {
        font-size: clamp(8px, 2.5vw, 20px); /* メインよりは小さく、でも読みやすいサイズ */
        margin-top: 0; 
    }
}

/* --- 表示状態のクラス --- */
/* JavaScriptによってこのクラスが付与されると、要素が表示される */
.is-visible {
    opacity: 1 !important; /* opacityを強制的に1にする */
    transform: translate(-50%, -50%) translateY(0); /* 元の位置に戻す */
}
/* テキスト専用の表示アニメーション */
#main-text.is-visible {
    transform: translate(0,0) translateY(0);
}
#sub-text.is-visible {
     transform: translateX(0) translateY(0);
}


/* ▼▼▼ スライドショーのスタイルを全面的に書き換え ▼▼▼ */

/* --- スライドショーコンテナ（スタイルは不要に） --- */
.slide-container {
    /* このコンテナ自体は位置やサイズを持たない */
}

/* --- 各スライド画像の共通スタイル --- */
.slide-container img {
    position: absolute; /* #content を基準に絶対配置 */
    
    /* サイズ */
    width: clamp(150px, 20vw, 300px);
    height: auto;
    aspect-ratio: 16/9; /* 縦長の比率に固定 */
    object-fit: cover;
    
    /* 装飾 */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    /* アニメーションのための初期設定 */
    opacity: 0;
    /* フワッと表示され、少し移動するアニメーション */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* --- 1枚目の画像（左上）のスタイル --- */
.slide-container img:nth-child(1) {
    top: 10vh;
    right: 10vw;
    transform: rotate(-8deg) translateY(30px); /* 初期位置: 少し傾けて下にずらす */
}
.slide-container img:nth-child(1).is-visible {
    transform: rotate(0) translateY(0); /* 表示位置: 元の高さに戻す */
    opacity: 1;
}

/* --- 2枚目の画像（右上）のスタイル --- */
.slide-container img:nth-child(2) {
    top: 20vh;
    right: 28vw;
    transform: rotate(6deg) translateY(30px);
}
.slide-container img:nth-child(2).is-visible {
    transform: rotate(0) translateY(0);
    opacity: 1;
}

/* --- 3枚目の画像（中央下）のスタイル --- */
.slide-container img:nth-child(3) {
    top: 30vh;
    right: 10vw;
    /* 中央に配置し、下にずらす */
    transform: rotate(-5deg) translateY(30px); 
}
.slide-container img:nth-child(3).is-visible {
    transform: rotate(0) translateY(0);
    opacity: 1;
}

/* ---画像関係のメディアクエリ --- */
/* @media screen and (max-width: 768px) {
    .slide-container img:nth-child(1) {
        top: 10vh;
        margin: 0 auto;
    }
        .slide-container img:nth-child(2) {
        top: 10vh;
        margin: 0 auto;
    }
        .slide-container img:nth-child(3) {
        top: 10vh;
        margin: 0 auto;
    }
} */
/* ---画像関係のメディアクエリ (スマホ表示用・修正版) --- */
@media screen and (max-width: 768px) {

    /* --- PC用の個別スタイルと.is-visibleの挙動をまとめて上書き・リセット --- */
    /*
      PC用のセレクタ（例: .slide-container img:nth-child(1)）の方が詳細度が高いため、
      スマホでも同じセレクタを使ってスタイルを上書きします。
      これにより、PC用の位置指定（top, right）や transform、transition を確実にリセットします。
    */
    .slide-container img, /* 基本スタイルも念のため指定 */
    .slide-container img:nth-child(1),
    .slide-container img:nth-child(2),
    .slide-container img:nth-child(3),
    .slide-container img.is-visible,
    .slide-container img:nth-child(1).is-visible,
    .slide-container img:nth-child(2).is-visible,
    .slide-container img:nth-child(3).is-visible {
        /* ▼ 位置をリセットし、中央配置に統一 */
        position: absolute;
        top: 50vh;
        bottom: auto; /* テキストとの距離を少し調整しました（お好みで変更してください） */
        left: 50%;
        right: auto;
        
        /* ▼ サイズを大きく統一 */
        width: 70vw;
        max-width: 400px;
        aspect-ratio: 4 / 3;

        /* ▼ PC用のエフェクト（回転、移動アニメーション）を完全にリセット */
        rotate: none;
        transition: none;
        
        /* ▼ JSによる表示アニメーションを無効化し、CSSアニメーションの初期状態に設定 */
        opacity: 0; /* アニメーション開始前は透明 */
        transform: translate(-50%,-110%); /* 常に中央揃え */

        /* ▼ ここからスライドショー用のアニメーション設定 */
        animation-name: simple-fade-slide;
        animation-duration: 9s; /* 3枚 x 3秒 */
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    /* 2枚目、3枚目のアニメーション開始タイミングをずらす */
    /* こちらも詳細度を合わせるため、PC用のセレクタを明記します */
    .slide-container img:nth-child(2),
    .slide-container img:nth-child(2).is-visible {
        animation-delay: 3s;
    }
    .slide-container img:nth-child(3),
    .slide-container img:nth-child(3).is-visible {
        animation-delay: 6s;
    }

    /* スライドショーの動き（フェードイン/アウト）を定義 */
    @keyframes simple-fade-slide {
        0%, 100% {
            opacity: 0;
            /* transformは変化させないので、opacityのみ制御 */
        }
        5%, 33.3% {
            opacity: 1;
        }
        38.3% {
            opacity: 0;
        }
    }
}