/* 基本設定 */
:root {
    --bg-color: #faf8f5;
    /* ★この色を変更すると、Story、Gallery、Directorセクションの背景色が一括で変わります */
    --text-color: #000000;
    --accent-color: #393939;
    --font-jp: 'Noto Sans JP', sans-serif;
    --font-en: 'Avenir Next', 'Avenir', 'Helvetica Neue', sans-serif;
}

/* scroll-behaviorを削除してジャンプを防止 */


body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-jp);
    line-height: 1.8;
    margin: 0;
    font-weight: 300;
}

.parallax-wrapper {
    /* height: 100vh; */
    /* overflow-x: hidden; */
    /* overflow-y: auto; */
    /* perspective: 2px; */
    width: 100%;
    margin: 0;
    padding: 0;
}

main {
    transform-style: preserve-3d;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3 {
    font-weight: normal;
}

.content-section {
    padding: 80px 0;
    background-color: var(--bg-color);
    position: relative;
    z-index: 2;
}

.container {
    width: 90%;
    /* 画面幅に追従 */
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    /* paddingは不要（widthで調整） */
}

/* デフォルトで英語を非表示 */
.lang-en {
    display: none;
}

.show-ja .lang-en {
    display: none !important;
}

.show-en .lang-ja {
    display: none !important;
}

/* 英語モードの時だけ英語を表示 */
.show-en .lang-en {
    display: block !important;
}

/* 英語モードの時はパララックス画像の縦線を非表示 */
.show-en .vertical-line {
    display: none !important;
}

.lang-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* モバイル専用改行（デフォルトは非表示） */
.sp-only {
    display: none;
}

.lang-switcher .switch-btn {
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0.6;
}

.lang-switcher .switch-btn:hover {
    opacity: 1;
}

.show-ja .lang-switcher .switch-btn[data-lang="ja"],
.show-en .lang-switcher .switch-btn[data-lang="en"] {
    opacity: 1;
}

.lang-switcher span:not(.switch-btn) {
    opacity: 0.6;
    font-weight: normal;
}

/* ヒーローセクション */
.hero {
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
    transform-style: preserve-3d;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transform: translateZ(-1px) scale(1.5);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 日本語タイトル (tittle_japanese.png) のスタイル */
.hero .title-image.lang-ja {
    width: 100%;
    /* 幅は親要素に合わせる */
    max-width: 1200px;
    /* 最大幅を制限 */
    height: auto;
    /* アスペクト比維持 */
    transform: translateY(-20px);
    /* 上下の微調整のみ残す */
    margin: 0 auto;
    /* 中央揃え */
    object-fit: contain;
}

/* 英語タイトル (tittle_english.png) のスタイル */
.hero .title-image.lang-en {
    width: 60%;
    /* 英語タイトルは少し小さめに */
    max-width: 650px;
    height: auto;
    transform: translateY(20px);
    margin: 0 auto;
}

/* ▲▲▲ 修正ここまで ▲▲▲ */

/* フェスティバルロゴ */
.sticky-hero .festival-logos {
    position: absolute;
    bottom: 80px;
    /* 15px -> 80px 上へ */
    left: 70%;
    /* 48% -> 55% 右へ */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 80px;
}

.hero .festival-logos {
    position: absolute;
    bottom: 15px;
    left: 48%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 60px;
    /* 2つのロゴの間隔 */
}

.hero .festival-logo {
    width: 200px;
    height: auto;
}

.hero .biff-logo {
    transform: translateY(0px);
    /* ★BIFFロゴの上下位置調整（正の値で下に、負の値で上に移動） */
}

.hero .filmex-logo {
    filter: brightness(0) invert(1);
    width: 120px;
    transform: translateY(-10px);
    /* ★FILMeXロゴの上下位置調整（正の値で下に、負の値で上に移動） */
}


/* イントロダクション（パララックス） */
#introduction {
    height: 100vh;
    /* 画面いっぱいの高さ */
    position: relative;
}

#introduction .introduction-text {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* 初速速く、最後遅く */
    font-family: 'Shippori Mincho', serif;
    /* Shippori Minchoフォント */
    font-weight: 500;
}



#introduction .introduction-text p {
    margin: 0.8em 0;
}




/* 予告編 */
.trailer-info {
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Kosugi', sans-serif;
    line-height: 1.8;
}

.trailer-info p {
    margin: -0.1em 0;
}

.trailer-date {
    font-size: 2.5rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 490;
    /* ★太さ（400=通常, 700=太字, 900=極太） */
    letter-spacing: 0.1em;
}

.trailer-date .small-text {
    font-size: 1.5rem;
    /* 'より'だけ小さく */
}

.trailer-venue {
    font-size: 1.5rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 530;
    /* ★太さ（400=通常, 700=太字, 900=極太） */
    letter-spacing: 0.4em;
}



/* トレイラーセクションの余白 */
#trailer {
    padding-top: 30px;
    /* ★トレイラーセクションの上の余白 */
    padding-bottom: 30px;
    /* ★トレイラーセクションの下の余白 */
}

#trailer h2 {
    font-family: var(--font-en);
    font-size: 2rem;
    margin-bottom: 40px;
    text-align: center;
}


.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ★★★ 以下を削除すれば元に戻ります ★★★ */
/* ★★★ 以下を削除しました（整理済み） ★★★ */

.social-links {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: transparent;
    border: 1.5px solid var(--text-color);
    border-radius: 30px;
    color: var(--text-color);
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.social-btn:hover {
    background-color: var(--text-color);
    color: #fff;
    transform: translateY(-2px);
}

.social-btn svg {
    width: 20px;
    height: 20px;
}

/* ▼▼▼ 新しいHeroシーケンス用のスタイル ▼▼▼ */
.hero-sequence-container {
    height: 320vh;
    /* セクションの高さを増やしてスクロール時間を確保 */
    position: relative;
    background-color: #fcfbf5;
    /* 隙間が見えないように背景色を設定 */
}

.sticky-hero {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* GPUアクセラレーションを有効化 */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}



.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 動画用 */
    background-size: cover;
    /* 画像の場合のフォールバック */
    background-position: center;
    z-index: 0;
    /* GPUアクセラレーションを有効化してスムーズに */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* コンテンツの共通スタイル */
.sticky-hero .hero-content,
.sticky-hero .introduction-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 10;
    transition: opacity 0.3s ease-out;
    /* JS制御用に少し滑らかにする */
}

/* hero-content内の要素配置（元のheroスタイルを適用） */
.sticky-hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: none;
    /* 幅制限を解除 */
}

/* 日本語タイトル (tittle_japanese.png) のスタイル */
.sticky-hero .title-image.lang-ja {
    width: 600%;
    max-width: 1500px;
    height: auto;
    transform: translateX(350px) translateY(20px);
}

/* 英語タイトル (tittle_english.png) のスタイル */
.sticky-hero .title-image.lang-en {
    width: 50%;
    max-width: 600px;
    height: auto;
    transform: translateX(300px) translateY(20px);
}

/* フェスティバルロゴ */
.sticky-hero .festival-logos {
    position: absolute;
    bottom: 50px;
    left: 49%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 130px;
    opacity: 0.8;
    /* 不透明度を設定（0.0〜1.0） */
}

.sticky-hero .festival-logo {
    width: auto;
    height: auto;
}

.sticky-hero .biff-logo {
    width: auto;
    height: 70px;
    /* 高さを調整 */
    transform: translateY(0px);
}

.sticky-hero .filmex-logo {
    /* filter: brightness(0) invert(1); 新しい画像なら反転不要かも */
    width: auto;
    height: 70px;
    /* 高さを調整 */
    transform: translateY(0px);
    /* 位置リセット */
}

/* Introductionテキストのスタイル */
.sticky-hero .introduction-text {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    font-size: 1.3rem;
    line-height: 1.8;
    width: auto;
    /* 幅を自動に */
    max-width: none;
    /* 最大幅制限を解除 */
    font-family: 'Hina Mincho', serif;
    font-weight: 400;
    /* Hina MinchoはRegularのみの場合が多いので400に */
    letter-spacing: 0.3em;
    /* ★カーニング：文字間隔を調整 */
    font-feature-settings: "palt";
    /* ★プロポーショナルメトリクス（文字詰め） */
    text-align: left;
    /* 左寄せ */
    /* タイトル画像と同じ位置に配置 */
    transform: translate(-43%, -100%) translateX(350px) translateY(20px);
}

.sticky-hero .introduction-text p {
    margin: 0.3em 0;
    /* 行間を詰める */
}

/* 1行目「あなた今、幸せ？」のスタイル */
.sticky-hero .introduction-text .intro-line-1 {
    font-size: 2.0rem;
    /* ★フォントサイズ（大きくする） */
    font-weight: 300;
    /* ★太さ（700=太字） */
    margin-bottom: 0.5em;
    /* 1行目の下の余白 */
}

/* 2行目と3行目の行間を詰める */
.sticky-hero .introduction-text .intro-line-2,
.sticky-hero .introduction-text .intro-line-3 {
    margin: -0.3em 0;
    /* ★行間を詰める（小さくするほど詰まる） */
}

/* 3行目の後ろに棒線を追加 */
.sticky-hero .introduction-text .intro-line-3::after {
    content: '';
    display: inline-block;
    width: 30px;
    /* 棒の長さを短く */
    height: 1px;
    /* 棒の太さ */
    background-color: #fff;
    /* 色 */
    vertical-align: middle;
    margin-left: 0.5em;
    /* 文字との間隔 */
    transform: translateY(-2px);
    /* 少し位置を微調整 */
}




/* ▼▼▼ パララックス（画像重ね合わせ）設定 ▼▼▼ */

.parallax-section {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
}

.parallax-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像を隙間なく表示（アスペクト比維持） */
    display: block;
}

/* 1枚目：スクロール時に画面に張り付く */
.sticky-box {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 2枚目：通常通りスクロールして、1枚目の上に重なる */
.overlay-box {
    position: relative;
    z-index: 2;
    background-color: #fcfbf5;
    /* 透過防止 */
}

/* テキストと棒のコンテナ */
.text-with-line-container {
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 画像上の縦書きテキスト */
.overlay-text-vertical {
    position: relative;
    /* コンテナ内で相対配置 */
    writing-mode: vertical-rl;
    font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-weight: 100;
    font-size: 2rem;
    color: #fff;
    letter-spacing: 0.8em;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    margin: 0;
}

/* 独立した縦線 */
.vertical-line {
    position: relative;
    /* コンテナ内で相対配置 */
    width: 1px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    margin-top: 0.2em;
    /* テキストとの間隔 */
}

/* ▼▼▼ 通常の背景動画の設定（パララックス解除） ▼▼▼ */

.video-section {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    /* ヒーローセクションの高さを増やしたため、マージンは不要 */
}

/* 背景動画のスタイル */
.video-section .background-video {
    position: absolute;
    /* fixedからabsoluteに戻す */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* 動画上のオーバーレイ */
.video-section .video-overlay {
    position: absolute;
    /* fixedからabsoluteに戻す */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* テキストを動画の上に表示 */
.video-section .introduction-text {
    position: relative;
    z-index: 2;
    /* 中央揃えなどは親のflexbox（.parallax-interlude）が担っている場合が多いが、念のため */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



/* パララックス全体のラッパー */
.parallax-container {
    position: relative;
    /* この範囲内でのみstickyが有効になる */
}

.parallax-interlude::before {
    /* 不要な記述を削除 */
    display: none;
}

/* 次のセクション：背景色をつけて背面のsticky画像を完全に隠す */
#story {
    position: relative;
    z-index: 5;
    background-color: var(--bg-color);
    /* または #fcfbf5 */
}

.parallax-text {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-family: var(--font-jp);
    letter-spacing: .1em;
}

/* パララックス画像上の縦書きテキスト */
.parallax-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    writing-mode: vertical-rl;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.2em;
}



/* ▲▲▲ ここまで ▲▲▲ */


/* 作品紹介（スティッキー） */
.sticky-layout {
    display: flex;
    width: 100%;
    background-color: var(--bg-color);
    position: relative;
    z-index: 2;
}

.sticky-image-area {
    flex: 1;
    position: relative;
}

.sticky-image-area .image-wrapper {
    position: relative;
    /* sticky → relative に変更 */
    height: 100vh;
    background-size: contain;
    background-position: center calc(80% + 60px);
    background-repeat: no-repeat;
}

.scroll-content-area {
    flex: 1;
    padding: 40px 40px;
}

.content-block {
    min-height: 20vh;
    padding-bottom: 80px;
    /* padding-top は削除 */
}

.content-block h2 {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.content-block p {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    font-family: 'Shippori Mincho', serif;
    font-weight: 100;
    line-height: 2.2;
    max-width: 1200px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    color: #000;
}

/* STORYセクションの中央配置スタイル */
.centered-content {
    max-width: 1200px;
    margin: 0 auto;
    /* 中央配置 */
    text-align: center;
    /* 中央揃えに変更 */
    padding: 20px 0 0 0;
    /* 左右のパディングを削除 */
}

/* STORYセクション専用の背景色と高さ */
#story {
    /* ベージュ系の背景色 */
    padding: 50px 50px;
    /* ★上下のパディングを縮小 */
    min-height: 25vh;
    /* ★高さを小さく（40vh → 30vh） */
}

/* モバイル用ポスター画像（PCでは非表示） */
.mobile-poster-image {
    display: none;
}

/* Introduction テキスト（PC用デフォルト） */
.introduction-text {
    font-size: clamp(0.85rem, 1.4vw, 1rem);
}


/* STORYセクションの日本語テキストの最後に棒線を追加 */
#story .lang-ja::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #000;
    vertical-align: middle;
    margin-left: 0.2em;
    transform: translateY(-2px);
}

/* STORYセクションの英語テキストのカーニング調整 */
#story .lang-en {
    letter-spacing: 0.05em;
}


.centered-content h2 {
    text-align: center;
    /* 中央揃え */
    margin-bottom: 30px;
    font-size: 1.3rem;
    /* ★タイトルの文字サイズ（ここを変更） */
    color: #333333;
    /* ★タイトルの文字色（ここを変更） */
    font-weight: 200;
    /* ★フォントの太さ（細く: 300, 普通: 400, 太く: 700） */
    letter-spacing: 0.1em;
    /* ★タイトルの文字間隔（広く: 0.2em, 狭く: 0.05em） */
}

.centered-content p {
    text-align: center;
    /* 中央揃え */
    margin-bottom: 20px;
    font-size: 1rem;
    /* ★本文の文字サイズ（ここを変更） */
    color: #333333;
    /* ★本文の文字色（ここを変更） */
    font-weight: 300;
    /* ★フォントの太さ（細く: 300, 普通: 400, 太く: 700） */
    letter-spacing: 0.05em;
    /* ★本文の文字間隔（広く: 0.1em, 狭く: 0em） */
    line-height: 2;
    /* ★行間（広く: 2.5, 狭く: 1.5） */
}




/* css/style.css の「フッター」の直前に追加 */

.credit-details p,
.credit-footer p {
    margin-top: 0;
    margin-bottom: 1em;
    font-family: 'Shippori Mincho', serif;
    /* ★STORYと同じフォント */
    text-align: center;
    /* ★中央揃え */
}

.credit-footer {
    margin-top: 40px;
}

.cast-list {
    text-indent: -2.6em;
    /* 日本語の「出演:」の幅に合わせて調整 */
    padding-left: 2.6em;
}

.show-en .cast-list {
    text-indent: -2.7em;
    /* 英語の "Cast:" の幅に合わせて調整 */
    padding-left: 2.7em;
}

/* フッター */
footer {
    text-align: center;
    padding: 15px 0;
    color: #888;
    font-size: 0.9rem;
    background-color: var(--bg-color);
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
}

/* css/style.css のスマートフォン対応セクションを、以下に丸ごと置き換えてください */

/* スマートフォン・タブレット対応 */
@media (max-width: 960px) {
    .cast-list {
        text-indent: 0;
        padding-left: 0;
    }

    .parallax-wrapper {
        perspective: none;
    }

    .sticky-hero::before {
        transform: none;
    }

    /* ▼ パララックス効果をスマホでは解除 */
    .parallax-interlude {
        background-attachment: scroll;
    }

    .content-section {
        padding: 60px 0;
    }

    .container {
        padding: 0 20px;
    }

    .sticky-hero .festival-logos {
        gap: 20px;
        bottom: 80px;
        /* 少し上に */
    }

    .sticky-hero .festival-logo {
        width: auto;
        height: 40px;
        /* スマホでは小さめに */
    }

    .sticky-hero .biff-logo {
        height: 40px;
    }

    .sticky-hero .filmex-logo {
        width: auto;
        height: 40px;
        transform: translateY(0px);
    }


    .sticky-layout {
        flex-direction: column;
    }

    .sticky-image-area .image-wrapper {
        position: static;
        height: 60vh;
    }

    .scroll-content-area {
        padding: 40px 20px;
    }

    .content-block h2 {
        font-size: 2rem;
    }

    /* ▼▼▼ ここからが調整用のコードです ▼▼▼ */

    /* 【スマホ用】ヒーローセクション調整 */
    .sticky-hero .title-image.lang-ja,
    .sticky-hero .title-image.lang-en {
        position: absolute;
        top: 40%;
        /* 少し上に */
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }

    /* 日本語タイトルだけデカく */
    .sticky-hero .title-image.lang-ja {
        width: 85vw !important;
        max-width: none !important;
    }

    /* 英語タイトルは少し小さめに */
    .sticky-hero .title-image.lang-en {
        width: 70vw;
        max-width: 400px;
    }

    /* キャッチコピー（ブロックごと中央配置・テキスト左揃え） */
    .sticky-hero .introduction-text {
        position: absolute;
        top: 50% !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        max-width: 90vw;
        display: block;
        /* flex解除 */
        text-align: left;
        padding: 0;
        box-sizing: border-box;
    }

    .sticky-hero .introduction-text p {
        position: static;
        width: auto !important;
        max-width: none !important;
        transform: none;
        margin: 0.5em 0;
        font-size: 0.7rem;
        line-height: 1.8;
        text-align: left;
    }

    /* Trailer情報の文字サイズ調整 */
    .trailer-info p {
        font-size: 0.9rem !important;
    }

    .trailer-info .trailer-date {
        font-size: 1.1rem !important;
        /* 日付を強調 */
    }

    .trailer-info .small-text {
        font-size: 0.7em;
        /* 「より」を相対的に小さく */
    }

    .sticky-hero .introduction-text .intro-line-1 {
        font-size: 1.2rem;
        /* 元のサイズ感に戻す */
        margin-bottom: 1rem;
    }

    .sticky-hero .introduction-text p {
        font-size: 0.85rem;
        /* 小さすぎたのを修正 */
    }

    /* フェスティバルロゴの位置調整（キャッチコピーの下） */
    .sticky-hero .festival-logos {
        bottom: 5%;
        /* 少し下げる */
        gap: 15px;
    }

    /* 「記憶は身勝手」を小さく中央に */
    .overlay-box .text-with-line-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        justify-content: center;
        align-items: center;
    }

    .overlay-text-vertical {
        font-size: 1.0rem;
        /* さらに小さく */
        margin-bottom: 0.5rem;
    }

    .vertical-line {
        height: 30px;
    }

    /* キャッチコピー下の白い線（スマホ用） */
    .sticky-hero .introduction-text .intro-line-3::after {
        width: 30px !important;
        /* 短く */
        margin-top: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        margin-left: 0.5em !important;
    }

    .sticky-hero .introduction-text .intro-line-3 {
        white-space: nowrap;
        /* 折り返し防止 */
    }

    /* ギャラリー（2列表示） */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .gallery-item {
        height: 100px;
        /* さらに小さく */
    }

    /* 画像（アスペクト比維持で小さく） */
    /* パララックス解除：単純な画像縦並び */
    .parallax-container {
        height: auto !important;
        display: block !important;
    }

    .parallax-section {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        position: static !important;
        display: block !important;
        overflow: visible;
        margin-bottom: 0 !important;
    }

    .sticky-box,
    .overlay-box {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        margin-top: 0 !important;
    }

    .parallax-section img {
        height: auto !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block;
        position: static !important;
        transform: none !important;
    }

    /* === 余白削除・強制表示の強化 === */
    .introduction-section,
    .content-section {
        padding: 20px 15px !important;
        /* パディングを極小に */
        min-height: 0 !important;
    }

    /* パララックスエリアの余白削除 & 強制表示 */
    .sticky-image-area,
    .scroll-content-area {
        height: auto !important;
        min-height: 0 !important;
        opacity: 1 !important;
        /* スマホではアニメーション無効で強制表示 */
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* PC用 Sticky画像を非表示（モバイル画像と入れ替え） */
    .sticky-image-area,
    .sticky-image-area .image-wrapper {
        display: none !important;
    }

    /* モバイル用ポスター画像（表示） */
    .mobile-poster-image {
        display: block !important;
        width: 100%;
        margin-bottom: 0 !important;
        /* 完全ゼロ */
        padding: 0 !important;
    }

    .mobile-poster-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* テキストエリアとセクションの余白を強力に削除 */
    .scroll-content-area .content-block,
    #credit,
    .credit-director-block {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 背景画像エリア（Scene 1など）の高さ制限解除 */
    .introduction-section .sticky-image-area {
        height: auto !important;
    }

    /* 【スマホ用】SYNOPSIS, CREDIT(日本語) セクションの文字サイズ */
    .scroll-content-area .content-block p {
        font-size: 0.75rem;
    }

    /* 【スマホ用】CREDIT(英語) セクションの文字サイズ */
    .show-en .scroll-content-area .content-block p {
        font-size: 0.75rem;
    }

    /* 【スマホ用】フッターの文字サイズ */
    footer {
        font-size: 0.8rem;
        /* ★ここの数字を変更 */
    }

    /* クレジットセクションの文字サイズ（スマホ共通・PC比率に合わせる） */
    .credit-cast-names span {
        font-size: 1.4rem !important;
    }

    .credit-name-large {
        font-size: 1.6rem !important;
    }

    .credit-role-small {
        font-size: 0.75rem !important;
    }

    /* 本クレジット(#credit)のみ行間を狭める */
    #credit .credit-name-large {
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    #credit .credit-role-small {
        margin-bottom: 0.2rem !important;
    }

    .credit-staff-list p {
        font-size: 0.6rem !important;
        line-height: 1.6;
    }


    .sp-only {
        display: inline !important;
        /* スマホのみ改行有効 */
    }

    /* STORY, Intro, Statement の本文スタイル（完全統一） */
    .scroll-content-area .content-block p,
    .introduction-section p,
    .intro-main-text,
    .director-section p,
    .director-section .introduction-text,
    .centered-content p,
    .introduction-section {
        text-align: justify !important;
        text-justify: inter-ideograph;
        font-size: 0.85rem !important;
        line-height: 1.9 !important;
        width: 100% !important;
        margin-bottom: 1.5em !important;
        letter-spacing: 0.05em !important;
        color: #333 !important;
        font-family: 'Zen Old Mincho', serif !important;
        font-weight: 500 !important;
    }

    /* Introduction部分を他と同じように小さく（iPhone 14 Plus等） */
    .director-section .introduction-text {
        font-size: 0.9rem !important;
    }

    /* キャッチコピー（比率調整） */
    .sticky-hero .introduction-text p {
        font-size: 0.7rem !important;
        text-align: left !important;
        width: auto !important;
    }

    .sticky-hero .introduction-text .intro-line-1 {
        font-size: 1.2rem !important;
        /* 相対的に大きく */
        margin-bottom: 0.5rem;
    }

    /* Director Parallax Imageをスマホ・タブレットでは非表示 */
    .director-parallax-image {
        display: none !important;
    }

    /* クレジットセクションは中央揃えに戻す */
    #credit p,
    .credit-hierarchical,
    .credit-hierarchical p,
    .credit-cast-names,
    .credit-staff-list p {
        text-align: center !important;
        text-justify: auto;
        width: auto;
    }

    /* 画面幅が狭い端末（iPhone SEなど）用の微調整 */
    /* iPhone SE (375px) 向け - より小さく */
    @media (max-width: 400px) {

        /* ヒーローセクション - タイトル画像 */
        .sticky-hero .title-image.lang-ja {
            width: 75vw !important;
        }

        .sticky-hero .title-image.lang-en {
            width: 60vw !important;
        }

        /* キャッチコピー - さらに小さく */
        .sticky-hero .introduction-text .intro-line-1 {
            font-size: 0.9rem !important;
            margin-bottom: 0.6rem !important;
        }

        .sticky-hero .introduction-text p {
            font-size: 0.55rem !important;
            line-height: 1.5 !important;
            margin: 0.3em 0 !important;
        }

        /* フェスティバルロゴ */
        .sticky-hero .festival-logo {
            height: 32px !important;
        }

        .sticky-hero .biff-logo,
        .sticky-hero .filmex-logo {
            height: 32px !important;
        }

        /* Trailer情報 */
        .trailer-info p {
            font-size: 0.75rem !important;
        }

        .trailer-info .trailer-date {
            font-size: 0.95rem !important;
        }

        /* 「記憶は身勝手」 */
        .overlay-text-vertical {
            font-size: 0.85rem !important;
        }

        .vertical-line {
            height: 25px !important;
        }

        /* 見出し（STORY, SYNOPSIS等） */
        .content-block h2,
        #trailer h2 {
            font-size: 1.3rem !important;
            margin-bottom: 15px !important;
        }

        /* 本文テキスト */
        .scroll-content-area .content-block p,
        .introduction-section p,
        .director-section p,
        .centered-content p {
            font-size: 0.6rem !important;
            line-height: 1.7 !important;
        }

        /* Introduction部分を明示的に小さく（iPhone SE） */
        .director-section .introduction-text {
            font-size: 0.6rem !important;
            line-height: 1.7 !important;
        }

        /* ギャラリー */
        .gallery-item {
            height: 80px !important;
        }

        /* クレジット - キャスト名 */
        .credit-cast-names {
            flex-wrap: nowrap !important;
            gap: 0.4em !important;
        }

        .credit-cast-names span {
            font-size: 1.0rem !important;
            margin-right: 0 !important;
            white-space: nowrap;
        }

        /* クレジット - 監督名 */
        .credit-name-large {
            font-size: 1.2rem !important;
        }

        /* クレジット - 役職 */
        .credit-role-small {
            font-size: 0.65rem !important;
        }

        /* クレジット - スタッフリスト */
        .credit-staff-list p {
            font-size: 0.55rem !important;
            line-height: 1.5 !important;
        }

        /* クレジット - サブキャスト */
        .credit-sub-cast p {
            font-size: 0.7rem !important;
            line-height: 1.5 !important;
        }

        /* セクション間の余白を詰める */
        .content-section {
            padding: 40px 0 !important;
        }

        .scroll-content-area {
            padding: 30px 15px !important;
        }

        .container {
            padding: 0 15px !important;
        }

        /* Director画像の高さ調整 */
        .director-parallax-image {
            height: 50vh !important;
            margin-bottom: 3rem !important;
        }
    }

    /* 【スマホ用】TRAILER, SYNOPSIS, CREDIT 共通の見出しスタイル */
    #trailer h2,
    .content-block h2 {
        font-size: 1.5rem;
        /* ★ここの数字を変更して見出しの文字サイズを調整 */
        margin-bottom: 20px;
        /* ★ここの数字を見出しの下の余白を調整 */
    }

    /* 【スマホ用】SYNOPSIS, CREDIT(日本語) セクションの文字サイズ */
    .scroll-content-area .content-block p {
        font-size: 0.68rem;
    }

    /* 【スマホ用】CREDIT(英語) セクションの文字サイズ */
    .show-en .scroll-content-area .content-block p {
        font-size: 0.75rem;
    }

    /* ▲▲▲ 調整用コードここまで ▲▲▲ */
}

/* css/style.css の一番下に追記 */

/* 英語表示の際のCREDITセクションのフォントサイズを調整 */
.show-en .scroll-content-area .content-block p {
    font-size: 0.85rem;
    /* ← この数字を変更してお好みのサイズに調整 */
}


/* ギャラリー（3x3画像グリッド）のスタイル */
#gallery {
    /* ★STORYと同じ背景色 */
    padding-top: 50px;
    /* ★画像の位置を調整（数値を大きくすると下がります） */
    padding-bottom: 0px;
    min-height: 50vh;
    /* ★画面の50%の高さに制限 */
    max-height: 80vh;
    /* ★最大高さを拡大 */
}


#gallery .container {
    width: 90%;
    /* 画面幅に追従 */
    max-width: 1000px !important;
    padding: 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3列 */
    gap: 10px;
    /* 画像間の隙間 */
    width: 100%;
}

.gallery-item {
    /* aspect-ratio: 3 / 2; */
    /* 比率固定を無効化（元のアスペクト比を使用） */
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: auto;
    /* 高さを自動調整 */
    display: block;
    /* 下の隙間を消す */
}

/* ホバーアクションは削除しました */


/* スマホ・タブレット表示時の調整 */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(1, 1fr);
        /* スマホでは1列 */
        gap: 15px;
    }

    #gallery .container {
        padding: 0 1.5rem;
        /* パディングを少し狭く */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* タブレットでは2列 */
    }
}

/* ▼▼▼ Credit階層デザイン ▼▼▼ */
.credit-hierarchical {
    text-align: center;
    font-family: 'Shippori Mincho', serif;
    /* Storyと同じフォント */
    color: var(--text-color);
    margin-top: 10rem;
    font-weight: 300;
    padding-right: 2.5vw;
    /* 全体を少し左にずらす */
}

/* 監督・脚本ブロック */
.credit-director-block {
    margin-bottom: 2rem;
}

.credit-role-small {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.credit-name-large {
    font-size: 1.7rem;
    font-weight: 400;
    /* 名前は少しだけ太く */
    letter-spacing: 0.2em;
    margin: 0;
}

/* メインキャストブロック */
.credit-main-cast {
    margin-bottom: 2rem;
}

.credit-cast-names {
    /* 親要素にも指定 */
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5em;
    margin: 0;
}

/* 子要素のspanにも確実に適用 */
.credit-cast-names span {
    font-size: 1.7rem;
    font-weight: 400;
}

/* 英語版クレジット調整：メインキャストを小さく1行で */
.lang-en .credit-cast-names {
    flex-wrap: nowrap;
    /* 1行に強制 */
    gap: 1.5em;
}

.lang-en .credit-cast-names span {
    font-size: 1.1rem;
    /* 1.7remから縮小 */
    white-space: nowrap;
}

/* サブキャストブロック */
.credit-sub-cast {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.1em;
}

/* スタッフリストブロック */
.credit-staff-list {
    margin-bottom: 3rem;
    white-space: normal;
}

/* pタグに直接指定して詳細度を上げる */
.credit-staff-list p {
    font-size: 0.8rem;
    /* 小さくする（約10px） */
    line-height: 2.0;
    letter-spacing: 0.05em;
    margin: 0;
}

/* 作品情報ブロック */
.credit-movie-info {
    font-size: 0.8rem;
    line-height: 1.8;
    margin-top: 4rem;
    opacity: 0.8;
}

/* ▼▼▼ トレイラー下のキャスト情報専用スタイル ▼▼▼ */
/* 下部のCREDITセクションとは別に調整できます */

.trailer-credit .credit-role-small {
    font-size: 0.75rem;
    /* ★監督・脚本の文字サイズ */
    margin-bottom: 0.3rem;
    /* ★監督・脚本と名前の間隔 */
    letter-spacing: 0.1em;
}

.trailer-credit .credit-name-large {
    font-size: 1.4rem;
    /* ★監督名の文字サイズ */
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0;
    margin-bottom: -0.5rem;
    /* ★監督名とキャストの間隔 */
}

.trailer-credit .credit-cast-names {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2em;
    margin: 0;
    margin-bottom: 1rem;
    /* ★ここを追加または調整 */
}

.trailer-credit .credit-cast-names span {
    font-size: 1.4rem;
    /* ★メインキャストの文字サイズ（span要素） */
    font-weight: 400;
}

.trailer-credit .credit-sub-cast {
    margin-bottom: 1rem;
    font-size: 0.85rem;
    /* ★サブキャストの文字サイズ */
    line-height: 1.8;
    /* ★サブキャストの行間 */
    letter-spacing: 0.1em;
}

/* ▲▲▲ トレイラー下のキャスト情報専用スタイル ここまで ▲▲▲ */

/* モバイル対応 */
@media (max-width: 768px) {
    .credit-name-large {
        font-size: 2rem;
    }

    .credit-cast-names {
        font-size: 1.4rem;
        flex-direction: column;
        /* スマホでは縦並びにするか、あるいは狭い間隔で横並び */
        gap: 0.8em;
    }

    /* スマホでも横並びにしたい場合は以下 */
    .credit-cast-names {
        flex-direction: row;
        justify-content: center;
        gap: 1em;
    }
}

/* --- Credit Section New Text Styles --- */

.credit-new-info {
    margin-bottom: 5vh;
    /* 新しいテキストブロックの下余白 */
    text-align: center;
    padding-top: 5vh;
    /* 新しいテキストブロックの上余白 */
}

.credit-new-intro {
    font-family: 'Shippori Mincho', serif;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    /* 行間の調整 */
}

.credit-new-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    /* タイトル下の行間調整 */
    font-weight: 500;
}

.credit-new-desc {
    font-family: 'Shippori Mincho', serif;
    font-size: 0.9rem;
    line-height: 2;
    /* 行の高さ調整 */
}

/* Introduction Section (全幅) Styles */
.introduction-section {
    padding: 15vh 2rem 20vh;
    text-align: center;
    background-color: var(--bg-color);
}

.introduction-section h2 {
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 3rem;
    font-size: 1.2rem;
}

.introduction-section p {
    font-family: 'Shippori Mincho', serif;
    line-height: 2.2;
    /* 行間 */
    font-size: 0.8rem;
    max-width: 800px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
}

/* --- Trailer Section Headline Styles --- */
/* Trailerセクション内に配置したテキストの特別調整 */

.trailer-additional-info .credit-new-info {
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    /* 幅を広げて改行を防ぐ */
    width: 100%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

/* 全てのテキスト要素を同じスタイルに統一 */
.trailer-additional-info .credit-new-intro,
.trailer-additional-info .credit-new-title,
.trailer-additional-info .credit-new-desc {
    font-size: 0.95rem;
    /* サイズ統一 */
    font-weight: 500;
    /* 太さ統一 */
    letter-spacing: 0.1em;
    margin-bottom: 0.3em;
    /* 行間を狭く統一 */
    line-height: 1.8;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

/* --- Trailer Section Refined Styles (Cleaned) --- */

/* 親の幅制限を解除して画面いっぱいに */
.trailer-additional-info {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    text-align: center;
    padding: 0 1rem;
    box-sizing: border-box;
    /* パディングを含める */
}

/* テキストコンテナ */
.trailer-additional-info .credit-new-info {
    width: 100%;
    max-width: 100%;
    margin-top: 0rem;
    /* ★動画との間隔はこちらで変更してください */
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}

/* テキストスタイル統一 */
.trailer-additional-info .credit-new-info p {
    font-size: 1.02rem !important;
    /* ★サイズ調整 */
    font-weight: 500 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    letter-spacing: 0.1em !important;
    line-height: 1.8 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5em !important;

    /* 改行制限を解除 */
    white-space: normal !important;
    word-break: keep-all;
    /* 単語の途中での改行を防ぐ（日本語の場合は文節など） */
    overflow-wrap: break-word;
}

/* --- Specific Override for Title --- */
/* タイトル行だけ大きくする設定 */
.trailer-additional-info .credit-new-info .credit-new-title {
    font-size: 1.9rem !important;
    /* ★タイトルのサイズ */
    font-weight: 500 !important;
    /* 必要なら太くする */
    margin-bottom: 0.8rem !important;
    /* タイトルの下の余白 */
}

/* --- Simple Round Social Buttons --- */
.social-links {
    margin-top: 2rem;
    gap: 1.5rem;
    /* ボタン間の間隔 */
}

.social-btn {
    border-radius: 50% !important;
    /* 完全な円 */
    width: 45px;
    /* 幅を小さく */
    height: 45px;
    /* 高さを小さく */
    padding: 0 !important;
    /* パディングリセット */
    justify-content: center;
    border: 1.5px solid #000 !important;
    /* 枠線を少し細く */
    color: #000 !important;
    display: flex !important;
    /* フレックスボックス維持 */
    align-items: center;
}

.social-btn:hover {
    background-color: #000 !important;
    color: #fff !important;
    transform: scale(1.05);
}

.social-btn svg {
    width: 20px;
    /* アイコンも小さく */
    height: 20px;
}

/* --- Introduction Section with Parallax --- */
.introduction-section {
    position: relative;
    padding: 20vh 2rem 20vh;
    text-align: center;
    background-color: #fcfbf5;
    /* var(--bg-color)の代わり */
    background-image: url('../images/into_01.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* パララックス */
    color: #000;
}

/* オーバーレイ（文字を読みやすくするため） */
.introduction-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(252, 251, 245, 0.7);
    /* 透過背景色 */
    z-index: 1;
    backdrop-filter: blur(2px);
}

.introduction-section h2,
.introduction-section p {
    position: relative;
    z-index: 2;
}

/* --- Scroll Animation (Lenis-based smooth animation) --- */
.sticky-image-area,
.scroll-content-area {
    opacity: 0;
    transform: translateY(50px);
    will-change: opacity, transform;
}

/* --- Password Overlay --- */
#password-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#password-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.password-container {
    text-align: center;
    font-family: 'Shippori Mincho', serif;
}

.password-container p {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.password-container input {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    outline: none;
}

.password-container button {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Shippori Mincho', serif;
}

.password-container button:hover {
    background-color: #555;
}

.error-message {
    color: red;
    font-size: 0.8rem;
    margin-top: 10px;
    height: 1.2em;
    /* 領域確保 */
}

/* スムーススクロール */

/* Lenis 推奨CSS */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ▼▼▼ PC画面幅での見切れ防止（レスポンシブ調整） ▼▼▼ */
@media (max-width: 1400px) {

    /* 画面幅が1600px以下でも、できるだけ元の大きさを維持する */
    .sticky-hero .title-image.lang-ja {
        width: 1400px;
        /* 大きく確保 */
        max-width: 95vw;
        /* 画面からはみ出しすぎないように制限 */
        transform: translateX(25vw) translateY(20px);
        /* もっと右へ移動（ユーザー指定の位置） */
    }

    /* キャッチコピーのはみ出し防止（文字サイズ縮小で対応） */
    .sticky-hero .introduction-text {
        /* 位置変更（transform）は削除し、文字サイズを小さくする */
        font-size: 1rem;
        /* 元は1.3rem */
        width: auto;
        max-width: 90vw;
    }

    .sticky-hero .introduction-text .intro-line-1 {
        font-size: 1.5rem;
        /* 元は2.0rem */
    }
}

@media (max-width: 1200px) {

    /* さらに画面が狭い場合 */
    .sticky-hero .title-image.lang-ja {
        width: 80vw;
        transform: translateX(10vw) translateY(20px);
    }
}