/* =========================================================================
   topanime.css
   ヒーローセクション（slide1）/ KV アニメーション関連スタイル集約
   - (A) .kvLogoCenter 系は削除（tdp_reve-lumieres は GSAP でアニメするため CSS 不要）
   - (B) sites/default/files/css/ticket-theme.css から移動: .videoSection / .texte__animation / .svgTexte / .text-stroke / @keyframes dash
   - (C) tdp_reve-lumieres/css/base.css から移植: #slide1 / .slide1_kv / .slide1_h1 / .slide1_art / .slide1_tag1 / .slide1_tag2 / --en バリエーション（レスポンシブ含む）calc設定
   ========================================================================= */


/* -----------------------------------------------------------------------
   (B) KV 動画 / SVG テキストアニメ（元: ticket-theme.css）
   ----------------------------------------------------------------------- */
.videoSection{position:fixed;top:0;height:100vh;width:100%;overflow:hidden;z-index:0;}
.videoSection video{object-fit:cover;width:100%;height:100%;}
.videoSection picture img{width:100%;height:100%;object-fit:cover;}
.videoSection::before{content:'';position:absolute;width:100%;height:100%;background:rgba(20,20,20,0.2);}
.videoSection + section{margin-top:100vh;}

.texte__animation{position:absolute;left:50px;bottom:200px;width:calc(100% - 100px);z-index:2;}
.texte__animation .swiper-slide{opacity:0;}
.texte__animation .swiper-slide-active{opacity:1;}

.svgTexte{width:100%;}
.svgTexteResponsive{display:none;}
.svgTexte .text{font-family:'Bebas Neue',sans-serif;text-transform:uppercase;font-size:6rem;line-height:5.6rem;display:block;}
.svgTexte.go .text-stroke{fill:none;stroke:#FFF;stroke-width:10px;stroke-dashoffset:900;stroke-dasharray:900;stroke-linecap:butt;stroke-linejoin:round;-webkit-animation:dash 3s ease-in-out forwards;animation:dash 3s ease-in-out forwards;-webkit-animation-delay:1s;animation-delay:1s;}
svg.svgTexte.go .text-stroke-2{stroke-width:50px;stroke:#FFF;-webkit-animation:dash 1.5s ease-in-out forwards;animation:dash 1.5s ease-in-out forwards;-webkit-animation-delay:2s;animation-delay:2s;}

@-webkit-keyframes dash{100%{stroke-dashoffset:0;}}
@keyframes dash{100%{stroke-dashoffset:0;}}

@media (max-width:1300px){
  .texte__animation{bottom:80px;}
  .svgTexte .text{font-size:5rem;line-height:4rem;}
}
@media (max-width:900px){
  .svgTexte .text{font-size:4rem;}
}
@media (max-width:800px){
  .texte__animation{left:20px;width:calc(100% - 40px);top:100px;bottom:auto;}
}
@media (max-width:700px){
  .svgTexte .text{font-size:3.5rem;}
  .videoSection + section{margin-top:90vh;}
}
@media (max-width:600px){
  .videoSection{height:100vh;}
  .svgTexte .text{font-size:3rem;}
  .videoSection::before{display:none;}
}
@media (max-width:480px){
  .svgTexte .text{font-size:2.3rem;}
}


/* -----------------------------------------------------------------------
   (C) slide1 ヒーローセクション（tdp_reve-lumieres/css/base.css より移植）
   元ファイルそのままの記述・インデント・コメントを保持
   ----------------------------------------------------------------------- */
/* Slide1 */
#slide1 {
position: relative;
margin: 0;
padding: 0;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}

.slide1_kv {
width: 100%;
height: auto;
display: block;
position: relative;
z-index: 0
z-index: 0
}

/* overlay */
.overlay1 {
position: relative;
padding: 0;
overflow: hidden; /* 追加 */
}


/* --- ここから置換 --- */
/* 親は .overlay1（position:relative）なので子要素は絶対配置で中央揃えに */
.slide1_h1 img {
    position: absolute;

	top: calc(150/ 1920 * 100vw);
    left: calc(1593 / 1920 * 100vw);
    width: calc(281 / 1920 * 100vw);
    height: auto;
    z-index: 3;
    opacity: 0; /* デバッグ用に見える状態 */
}

.subtitle{
    position: absolute;

	top: calc(153/ 1920 * 100vw);
    left: calc(495 / 1920 * 100vw);
    width: calc(929 / 1920 * 100vw);
    height: auto;
    z-index: 5;
    opacity: 0; /* デバッグ用に見える状態 */
}

.van{
    position: absolute;

	top: calc(317/ 1920 * 100vw);
    left: calc(574 / 1920 * 100vw);
    width: calc(773 / 1920 * 100vw);
    height: auto;
    z-index: 6;
    opacity: 0; /* デバッグ用に見える状態 */
}



.slide1_art {
    position: absolute;
   bottom: calc(50/ 1080 * 100vw);
    left: calc(0 / 1920 * 100vw);
    width: calc(1480 / 1920 * 100vw);
    height: auto;
    z-index: 3;
    opacity: 0;
}

.slide1_tag1 {
    position: absolute;
    bottom: calc(90/ 1080 * 100vw);
    left: calc(1442 / 1920 * 100vw);
    width: calc(440 / 1920 * 100vw);
    height: auto;
    z-index: 3;
    opacity: 0;
}

.slide1_tag2 {
    position: absolute;
    bottom: calc(60 / 1080 * 100vw);
    left: calc(1442 / 1920 * 100vw);
    width: calc(440 / 1920 * 100vw);
    height: auto;
    z-index: 3;
    opacity: 0;
}

.slide1_tag2--en {
    top: calc(1029 / 1920 * 100vw);
    left: calc(1482 / 1920 * 100vw);
    width: calc(353 / 1920 * 100vw);
}

.slide1_tag1--en {
    top: calc((1079 / 1920 * 100vw) - 12px);
    left: calc(1482 / 1920 * 100vw);
    width: calc(393 / 1920 * 100vw);
}

/* slide1 レスポンシブ（tdp_reve-lumieres/css/base.css 内 @media screen and (max-width: 640px)） */
@media screen and (max-width: 640px) {
    .slide1_kv {
        width: 100%;
        height: 100dvh;
    	object-fit: cover;
       object-position: center;
    }


        .slide1_h1 img {
            display: none; /* SP では非表示 */
        }

        .subtitle {
            top: 18vh;
            left: 50%;
            transform: translateX(-50%);
            width: 80vw;
        }

        .van {
            top: 26vh;
            left: 50%;
            transform: translateX(-50%);
            width: 70vw;
        }

        .slide1_art {
            top: 70vh;
            left: 0;
            width: 100vw;
        }

        .slide1_tag1 {
            top: 78vh;
            left: 5vw;
            right: auto;
            width: 42vw;
        }

        .slide1_tag2 {
            top: 78vh;
            left: calc(50vw - 10px);
            width: 42vw;
        }

        .slide1_tag1--en {
            top: 78vh;
            left: 50%;
            transform: translateX(calc(-50% - 10px));
            width: 60vw;
        }
}