@charset "utf-8";

/* =========================================================
   LAYOUT
@media print {
.nocopy {
    display: none !important;
  }
}
========================================================= */
img {
  pointer-events: none;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}


/* =========================================================
   Base / Reset
========================================================= */
*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
}

html{ scroll-behavior:smooth; } 

/* 横はみ出し対策（右の白帯系の保険） */
html,body{ overflow-x:hidden; }

/* =========================================================
   iOS viewport support
   - iOS Safariの100vhズレ対策
========================================================= */
html{ height:-webkit-fill-available; }

body{
  min-height:100vh;
  min-height:-webkit-fill-available;
text-rendering: optimizeLegibility;
  font-size:1rem;
  line-height:1.75;
  font-weight:500;
  color:#fff;
  background:#de5f9a;
}

/* 見出し（英字主役） */
h1, h2, h3, .headline {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  letter-spacing: .06em;
}

/* 本文（和文） */
body, p, li, .text {
  font-family: "Noto Sans JP", sans-serif;  
  font-weight: 500;
  line-height: 1.9;
}

.lead-copy,.comment-name {
font-family: "Noto Serif JP", serif; 
  font-weight: 700;
  line-height: 1.4;
}

/* 数字・価格 */
.price, .num,.copyright,.sns,.follow a{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-variant-numeric: lining-nums;
}



section{min-height: 600px;}


ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: #f5f5f5;
  text-decoration: none;
  outline: none;
}
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}


.lead-copy{
  font-size: clamp(1.15rem, 3vw, 1.65rem); /* ★一段大きく */
  font-weight: 700;
  line-height: 1.75;
  margin: 1.2em auto ;                   /* ★上下余白をしっかり */
  letter-spacing: .03em;

  text-align: center;                     /* PC基準 */
}
@media (max-width: 992px){
  .lead-copy{
    text-align: left;
    margin: 1.6em 0 ;                /* ★SPは上下さらに余白 */
    max-width: none; letter-spacing: 0;
  }
}


p {
  /*letter-spacing: 0.05rem;*/
  text-align: left;
  margin-bottom: 0.3rem;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 10px 0;
  font-weight: 500;
  text-align: justify;
    
}

#intro h3,#story h3 {
color: #ffe66d; /* ロゴ連動 */}

#intro p,
#story p{
  text-align: left;
  text-justify: auto;
}

/* =========================================================
   H2: stage-rise letters（舞台下からツゥルン）
========================================================= */

/* h2は左基点のままでOK（必要なら） */
h2{letter-spacing: -0.02;font-family: "Libre Baskerville", serif;
  font-size: clamp(3rem, 6vw, 4.8rem);
  line-height: 1.08;
  text-align: center;
  padding: 0;  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}

/* 文字ごとの“舞台枠” */
.h2-animate .h2-char{
  display: inline-block;
  position: relative;
  overflow: hidden;         /* ★舞台下を隠す */
  vertical-align: bottom;   /* ★下の位置を揃える */
  opacity: 1;               /* 枠自体は消さない（中身を動かす） */
}

/* 内側の実文字（これがせり上がる） */
.h2-animate .h2-char > i{
  display: inline-block;
  font-style: normal;
  transform: translate3d(0, 115%, 0); /* ★舞台下に隠す */
  will-change: transform;
}



/* in-viewで順に上げる */
.h2-animate.is-inview .h2-char > i{
  animation: h2StageRise .62s cubic-bezier(.18,.95,.22,1) forwards;
  animation-delay: calc(var(--i) * 28ms);
}

/* つるん：下→定位置（オーバーシュートなし） */
@keyframes h2StageRise{
  from{ transform: translate3d(0, 115%, 0); }
  to  { transform: translate3d(0, 0, 0); }
}

@media (max-width: 768px){
h2{font-size: 1.8rem;}
}

/* area */
#container {
  position: relative;
  overflow-x: hidden;
}
#header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
}
#content-area {
  width: 100%;
  padding: 0 0 0 0;
}
@media screen and (max-width:990px) {
  #header {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    display: none;
  }
  #content-area {
    padding: 0;
  }
}
/* heading */
.heading-block {
  display: flex;
  justify-content: center;
  line-height: 1;
}

/* =========================
   NAV: PC/SP unified hamburger
========================= */

/* いまの #main-nav の“横並び固定バー”をやめる */
#main-nav{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: auto;            /* 100%にしない */
  height: auto;
  background: none;       /* 黒帯不要なら消す */
  display: block;         /* flex解除 */
}

.openbtn{
  display:block;
  position: fixed;
  z-index: 9999999;
  cursor: pointer;
  top: 10px;
  right: 10px;
  width: 55px;
  height: 55px;
 border: 2px solid #fff;
  background: transparent;
}

/* ボタン内側 */
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
}

/* 上下の線：太さを PAGETOP と揃える */
.openbtn span:nth-of-type(1),
.openbtn span:nth-of-type(3){
  height: 2px;          /* ★ 1px → 2px */
  background: #fff;
  width: 62%;
  left: 10px;
}

/* 位置を少しだけ補正 */
.openbtn span:nth-of-type(1){ top: 14px; }
.openbtn span:nth-of-type(3){ top: 40px; }

/* Menu文字はそのまま */
.openbtn span:nth-of-type(2){
  top: 19px;
  left: 9px;
  font-size: .65rem;
  text-transform: uppercase;
  color: #fff;
}

/* ===== active（×になる状態）も太さを維持 ===== */
.openbtn.active span:nth-of-type(1){
  top: 20px;
  left: 16px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
  height: 2px;          /* 念のため明示 */
}

.openbtn.active span:nth-of-type(3){
  top: 32px;
  left: 16px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
  height: 2px;          /* 念のため明示 */
}

.openbtn.active span:nth-of-type(2){
  opacity: 0;
}
/* g-nav：閉じてる時は触れない／開くと全面に */
#g-nav{
  position: fixed;
  inset: 0;
  z-index: 999;          /* circle-bgより上 */
  pointer-events: none;  /* 閉じてる間はクリック無効 */
}
#g-nav.panelactive{
  pointer-events: auto;
  width: 100%;
  height: 100vh;
}

/* 丸の拡大（circle menu） */
.circle-bg{
  position: fixed;
  z-index: 98;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #4f1e79;/*紺*/
  transform: scale(0);
  bottom: -50px;
  left: calc(50% - 50px);
  transition: all .6s;
}
.circle-bg.circleactive{ transform: scale(50); }

/* 15個以上でもOK：スクロールできるラッパー */
#g-nav-list{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 90px 0 40px;  /* openbtnの分の上余白 */
}
#g-nav.panelactive #g-nav-list{ display: block; }

/* ul：中央固定(top:40%)を廃止して“縦スクロール前提”に */
#g-nav ul{
  opacity: 0;
  position: relative;
  z-index: 999;
  width: min(520px, 88vw);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
#g-nav.panelactive ul{ opacity: 1; }

/* li：増えても詰まらない */
#g-nav ul li{
  padding: 10px 0;
}

/* 背景出現後に li を順に出す（重さ軽減でdelay短め） */
#g-nav.panelactive ul li{
  animation-name: gnaviAnime;
  animation-duration: 1s;
  animation-delay: .05s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* タップしやすい */
#g-nav ul li a{
  display: block;
  padding: 10px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .06em;
}
@media (max-width: 768px){
  #g-nav ul li a{padding: 10px 5px;
    font-size: 0.8rem; letter-spacing: 0;
  }
}




/* 背景が出現後にナビゲーション li を表示 */
@keyframes gnaviAnime{
  0%{ opacity: 0; transform: translateY(60px); }
  100%{ opacity: 1; transform: translateY(0); }
}


/* ul：増えても崩れない（2カラム） */
#page-link{
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(920px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
#g-nav.panelactive #page-link{
  opacity: 1;
  transform: translateY(0);
}

/* リンク */
#page-link a{
  padding: 12px 14px;
  letter-spacing: .08em;
  transition: all .25s ease;background: rgba(255,255,255,.1);
}

#page-link a:hover{
  background: rgba(255,255,255,.9);
  color: #000;
  transform: translateY(-1px);
}


/*SNS*/
.sns{margin: 2em auto;}
.in-img, .tw-img, .yt-img {
    width: 35px;
}
.follow {
    text-transform: none;
    font-size: 0.7em;
    display: flex;
    align-items: stretch;
    text-align: center;
    margin: auto;
    width: 300px;
    padding: 10px 0;
}
.follow .in a, .follow .tw a,.follow .yt a {}
.follow .in a:hover, .follow .tw a:hover, .follow .yt a:hover {opacity: 0.5;}
.follow li {
    width: 70px;
    height: 50px;
    padding: 8px 0 0;
    text-align: center;
    margin: auto;
}
/* SNS-NAV */
#g-nav-list ul.follow li a{
    font-size: 0.8em;

}

/* スクロール固定（開いてる間は下のページを動かさない） */
body.nav-open{
  overflow: hidden;
}

/*ipadのみ*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
#main-area {}
/* ------------------------------------------------------------------- 
 * topics Movie
 * ------------------------------------------------------------------- */
#topics-movie {background:#4f1e79;/*紺*//*background-image: url("../images/tp4.jpg");
    background-size: cover;*/
  padding: 0;
}

#topics-movie .videos {
  width: 100%;
  max-width: 800px;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}
.videos {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.col_2 {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.col_2 > div {
  width: 50%;
  padding: 10px;
}
.col_2 > div > div {
  min-height: 200px;
  position: relative;
  overflow: hidden
}
.col_3 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.col_3 > div {
  width: 33.33333%;
  padding: 10px;
}
.col_3 > div > div {
  min-height: 400px;
  position: relative;
  overflow: hidden
}
.col_4 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.col_4 > div {
  width: 25%;
  padding: 10px;
}
.col_4 > div > div {
  min-height: 300px;
  position: relative;
  overflow: hidden
}

/* ------------------------------------------------------------------- 
 * responsive:
 * topics Movie
 * ------------------------------------------------------------------- */


@media screen and (max-width: 992px) {
    
    
      #topics-movie {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
    
    
  .col_2 > div {
    width: 100%;
  }
  .col_2 > div > div {
    min-height: 200px;
    position: relative;
    overflow: hidden
  }
  .col_3 > div {
    width: 100%;
  }
  .col_3 > div > div {
    min-height: 200px;
    position: relative;
    overflow: hidden
  }
  .col_4 > div {
    width: 100%;
  }
  .col_4 > div > div {
    min-height: 200px;
    position: relative;
    overflow: hidden
  }
} /*end*/


@media screen and (max-width:768px) {
  .videos {
    width: 100%;
    max-width: 560px;
    padding: 0;
    margin: 0 auto;
    text-align: center;
  }
} /*end*/
/* ------------------------------------------------------------------- 
 * topics
 * ------------------------------------------------------------------- */
#topics {
    
  position: relative;
  padding: 30px 0;

}
.topics-content{
  width: 100%;
  max-width: 1000px; /*調整*/
  margin: 0 auto;
  text-align: center;
}


/* =====================
   NEWS
===================== */
.news-list{
  list-style:none;
  margin:0;
  padding:0;
}

.news-item{margin-bottom: 15px;text-align: left;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:24px;
  padding:16px 30px;background:#de5f9a;
}


.news-date{color: #4f1e79;/*紺*/
  letter-spacing:.08em;
  opacity:.8;
}

.news-title{
  line-height:1.6;
  text-decoration:none;
}

.news-title:hover{
  text-decoration:underline;
}




/* ------------------------------------------------------------------- 
 * responsive:
 * topics
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
  #topics {

  }
.topics-content{
  max-width: 90%;
}

  .news-item{
    grid-template-columns: 1fr;
    gap:6px;
  }


} /*end*/

/*
---------------------------------------------
intro
---------------------------------------------
*/
#intro {Background:#4f1e79;/*紺*/
  position: relative;
  margin: 0;
  padding: 0 0 60px;
}
.intro-content {
  width: 100%;
  max-width: 1100px; /*調整*/padding:2rem;
  margin: 60px auto 0;
  text-align: center;
    /*background: linear-gradient(
  rgba(0,0,0,.18),
  rgba(0,0,0,.28)
);*/
}

#intro .intro-bg {
  background: url(../img/bg_2.jpg) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 40vh;
}
.ticket-bg {
  background: url(../img/bg_4.jpg) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 40vh;
}

#intro .intro-bg,
.ticket-bg{
margin: 0 auto;padding-top: 10vh;
}



@media screen and (max-width:992px) {
  #intro .intro-bg {padding-top: 15vh;
    background-attachment: inherit;
  }
      .ticket-bg {padding-top: 15vh;
    background-attachment: inherit;
  }
  #intro {
  padding: 0;
}  
.intro-content {margin: 0 auto;
padding:1rem;
  max-width: 96%; 
}

}/**/


/* ---------------------------------------------
   STORY
--------------------------------------------- */
#story{
  position: relative;
  overflow: hidden;         /* STORY外へ漏れない */
  isolation: isolate;       /* 他セクションとレイヤー分離（超重要） */
  padding: 0 0 60px;
}

/* 背景SVGは疑似要素に置く（opacityが使える） */
#story::before{
  content:"";
  position:absolute;
  inset: 0;
  background-image: url("../svg/machi.svg");
  background-repeat: no-repeat;
  background-position: 50% 55%;  /* 少し下寄せ */
  background-size: 110% auto;
  opacity: .05;                  /* ←透過ここで調整 */
  pointer-events:none;
  z-index: 0;
}

/* 本文は必ず前面に */
#story .heading-block,
#story .story-content{
  position: relative;
  z-index: 1;
}

.story-content{
  width: 100%;
  max-width: 1100px;
  padding: 2rem;
  margin: 0 auto;
  text-align: center;
}
.story-content::before{
  content:"";
  position:absolute;
  inset: -0.5rem;
  background: linear-gradient(
    rgba(0,0,0,.18),
    rgba(0,0,0,.30)
  );
  z-index: -1;
}


/* 992px以下（iPad/スマホ帯）調整 */
@media (max-width: 992px){
  #story{ padding-bottom:0;}

  #story::before{
    background-size: 155% auto;  /* もっと大胆に切る */
    background-position: 50% 70%;
    opacity: .04;               /* SPはさらに薄く */
  }

  .story-content{
    max-width: 96%;
    padding: 1rem;
  }
}

/* さらに小さいスマホ */
@media (max-width: 480px){
  #story::before{
    background-size: 180% auto;
    background-position: 50% 75%;
  }

  .story-content::before{
    background: linear-gradient(
      rgba(0,0,0,.28),
      rgba(0,0,0,.38)
    );
  }
}


/*
---------------------------------------------
caststaff
---------------------------------------------
*/
#caststaff {
  padding: 0 0 100px;
  
}
.caststaff-content {
  width: 100%;
  max-width: 1000px; /*調整*/
  margin: 0 auto;
  text-align: center;
}

.caststaffarea-logo img{  width: 740px;
margin-bottom: 30px; /*調整*/}


/* ------------------------------------------------------------------- 
 * responsive:
 * caststaff
 * ------------------------------------------------------------------- */

@media screen and (max-width: 992px) {
    
    #caststaff {
  padding: 0;
  
}
    
    
  .caststaff-content {
    max-width: 80%; /*調整*/ 

  }
    
    .caststaffarea-logo img{
width: 80%;}
    
    
} /*end*/

/*
---------------------------------------------
ticket
---------------------------------------------
*/

/* =========================================================
   TICKET / SCHEDULE
========================================================= */

#ticket{background: linear-gradient(180deg,
  #de5f9a 0%,
  #b64e9e 45%,
  #4f1e79 100%
);
  position: relative;
  padding: 80px 0;
}



/* 本体 */
#ticket .ticket-content{
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* エリアリンク */
#ticket .arealink{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px auto 36px; justify-content: center;text-align: center;
}

#ticket .arealink .btn-square{color: #562c7a; max-width: 30%;text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;border-radius: 30px;
  transition: transform .18s ease, background .18s ease;
}

#ticket .arealink .btn-square:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.5);
}

/* anchor: fixed header対策（必要なら調整） */
#ticket .ticket-anchor{
  scroll-margin-top: 90px;
}

/* ブロック */
#ticket .ticket-block{
  margin: 0 0 28px;
  padding: 26px 22px;
  border-bottom: 2px solid rgba(0,0,0,.4);
background: rgba(255,255,255,.8);
}

/* PC: 2カラム */
#ticket .tour-content{color: #222;
  display: grid;
grid-template-columns: minmax(460px, 520px) 1fr;
align-items: start;
  gap: 28px;
}

/* 左（段積み） */
#ticket .tour-left{
  display: grid;
  gap: 14px;
}

/* 右（段積み） */
#ticket .tour-right{margin-top: 138px;
  display: grid;
  gap: 18px;
}

/* 日付SVG：高さ合わせ（幅はauto） */
#ticket .tour-date{
  margin: 0;
}

#ticket .tour-date img{
  display: block;
 width: 98%;  /* ここで“幅統一” */
  width: auto;
padding-bottom: 1rem;
}

/* 星取：幅合わせ（高さauto） */
#ticket .tour-sch{
  margin: 0;
}

#ticket .tour-sch img{
  display: block;
  width: 98%;    /* ここで“幅統一” */
  height: auto;
}
/* セクション見出し（チケット取扱い／お問い合わせ） */
#ticket .tour-midashi{
  margin: 8px 0 2px;
  padding: 10px 12px;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;

  border-left: 6px solid #562c7a;
  background: rgba(255,255,255,0);
}
/* PG 表 */
#ticket .pg-content{
  display: grid;
  gap: 14px;
}

/* 1プレイガイドのまとまり */
#ticket .pg-text{
  padding: 14px 14px 12px;
  border-left: 2px solid #562c7a;
  /*background: rgba(255,255,255,.22);*/
  line-height: 1.7;text-align: center;
}


/* ボタンの外側余白 */
#ticket .btn-ticket-area{
  margin: 0 0 10px;
}

/* 黄色の購入ボタン（大きめ＋余白） */
#ticket .btn-ticket{
  display: flex;
  width: 90%;
  margin: 0 auto;

  padding: 16px 18px;
  border-radius: 30px;

  background: #f2c94c;
  color: #111;
  border: 2px solid #111;

  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;

  align-items: center;
  justify-content: center;

  box-shadow:
    0 3px 0 #111,
    0 10px 22px rgba(0,0,0,.20);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration: none;
}

/* hover */
#ticket .btn-ticket:hover{
  transform: translateY(-2px);
  background: #f7d86a;
  box-shadow:
    0 4px 0 #111,
    0 14px 28px rgba(0,0,0,.24);
}

/* お問い合わせブロック */
#ticket .inquiry{
  padding: 14px 14px 12px;
  border-left: 2px solid #562c7a;
  line-height: 1.75;
}

#ticket .inquiry small{
  display: inline-block;
  margin-left: 6px;
  opacity: .85;
  font-size: .9em;
}

/* 数字を少し見やすく（既存 .num があればそれを活かす） */
#ticket .inquiry .num{font-weight: 700;
  font-size: 1.15em;
  letter-spacing: .02em;
}





.theater-link,.latest_more a{color: #562c7a; max-width: 30%;text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;border-radius: 30px;
  transition: transform .18s ease, background .18s ease;
}

.theater-link:hover,.latest_more a:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.5);
}


/* SP: 全部段積み */
@media (max-width: 992px){
  #ticket{
    padding: 60px 0 0;
  }
#ticket .ticket-content{
  width: 100%;
  margin: 0 auto;
}
    

    
  #ticket .arealink{
    gap: 10px;
    margin: 18px 0 26px;
  }

  #ticket .arealink .btn-square{
    width: 100%;
    justify-content: flex-start;justify-content: center;
  }

  #ticket .ticket-block{ margin: 0;
    padding: 20px 30px;
  }

  /* 1カラム */
  #ticket .tour-content{
    grid-template-columns: 1fr;
    gap: 18px;align-items: center;
  }


    
 #ticket .tour-right{margin-top: 20px;gap: 14px; }
    
    
  /* PG表：SPは縦積みにして押しやすく */
  #ticket .pg-content{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  #ticket .tour-midashi{
    font-size: 14px;
    padding: 10px 10px;
  }

  #ticket .pg-text,
  #ticket .inquiry{
    padding: 12px 12px 10px;
  }


  #ticket .btn-ticket{
    width: 100%;
    font-size: 17px;
    padding: 18px 16px;
  }
}
  #ticket .inquiry{
    padding-top: 12px;
  }


.theater-link,.latest_more a{max-width: 60%;text-align: center;}


}/**/

@media (max-width: 768px){
  /* 日付SVG：SPも高さ揃え（少し小さめ） */
  #ticket .tour-date img{

  }
    

    
 }/**/   

@media (max-width: 480px){
  /* 日付SVG：SPも高さ揃え（少し小さめ） */
  #ticket .tour-date img{

  }
    
    
 }/**/   





/*
---------------------------------------------
comment
---------------------------------------------
*/
#comment {background:#4f1e79;/*紺*/
  position: relative;
  margin: 0;
  padding: 0 0 60px;
}
.comment-content {
  width: 100%;
  max-width: 1000px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
}


@media screen and (max-width:992px) {
    
    #comment {
  padding: 0;
}
    
.comment-content {  max-width: 90%;}
}/*end*/

/* =========================================================
   comment-content (STAFF / CAST コメント)
========================================================= */

/* Wrapper */
.comment-content{
    width: 100%;
    max-width: 1100px; /*調整*/
  margin: 0 auto;
  padding: 10px 0 40px;
}

/* Item */
.comment-item{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;

  padding: 26px 0;
  border-top: 1px solid rgba(0,0,0,.50);

}

.comment-item:first-child{
  border-top: 0;
}

/* Photo */
.comment-photo{
  width: 100%;
}

.comment-photo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background: rgba(0,0,0,.04); /* 画像未設定時の保険 */
}

/* Body */
.comment-body{padding: 1rem ;
 background: linear-gradient(
  rgba(0,0,0,.18),
  rgba(0,0,0,.28)
);
}

.comment-role{
  margin: 0 auto .45em;text-align: center;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0;
  opacity: .78;
}

.comment-name{
  color: #ffe66d; /* ロゴ連動 */
  margin: 0 0 .7em;
  font-size: clamp(1.5rem, 2vw, 1.6rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .02em;
}

.comment-text{
  margin: 0;
  font-size: 1rem;
  letter-spacing: .02em;
  opacity: .95;  text-align: left;
  text-justify: auto; /* 念のため */
}

/* Paragraph rhythm inside comment */
.comment-text br + br{
  display: block;
  content: "";
  margin-top: .5em;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 992px){
  .comment-content{

    max-width: 96%; /*調整*/
  }


    .comment-role{
  margin: 0 auto .45em;
text-align: center;
}

  .comment-item{
    grid-template-columns: 200px 1fr;
    gap: 22px;
    padding: 22px 0;
  }
}

@media (max-width: 768px){
  .comment-content{
    padding: 6px 0 34px;
  }

  .comment-item{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 0;
  }

  .comment-photo{
    width: min(200px, 52vw);  /* 写真は少し小さめに */
margin: auto;text-align: center;
  }  
  .comment-role{
    letter-spacing: .12em;
  }

  .comment-name{
    margin-bottom: .6em;
  }

  .comment-text{
    text-align: left;
    line-height: 1.95;
  }
}

@media (max-width: 420px){
  .comment-photo{
    width: min(220px, 70vw);
  }
}

/* =========================================================
   Optional: subtle separator style (no animation)
   - もし罫線を“紙っぽく”したい時だけON
========================================================= */
/*
.comment-item{
  border-top: 1px dashed rgba(0,0,0,.22);
}
*/


/* ------------------------------------------------------------------- 
 * footer
 * ------------------------------------------------------------------- */
#footer {background:#4f1e79;/*紺*/
  padding: 40px 0;

}
.footer-content {
  margin: 0 auto;
  text-align: center;
}

.staffcredit-content {
  width: 100%;
  max-width:740px; /*調整*/
  margin: 0 auto;
  text-align: center;
}

.footer-logo {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 30px;
}
.footer-logo img {
  width:480px;
}
  .copyright {
    text-align: center;margin:3em auto 1.5em;font-size: 0.8em;

  }

/* ------------------------------------------------------------------- 
 * responsive:
 * footer
 * ------------------------------------------------------------------- */

@media screen and (max-width:992px) {
    
    #footer {
  padding: 0 0 80px;

}
    
    
.staffcredit-content {
    width: 100%;
    max-width: 90%; /*調整*/
    margin: 0 auto;
    text-align: center;
  }

  .footer-logo {
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
  }
  .footer-logo img {
    width: 78%;
  }
  #footer .footer-link {
    width: 100%;
    display: block;
  }



} /*end*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 992px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}


/* -------------------------------------------------------------------
 * overlay banner (common)
 * ------------------------------------------------------------------- */
.fix-banner{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9998;
  animation: fadey_bottom_start 7s;
}

.fix-banner__link{
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0;
  padding: 1rem 1rem;
  min-width: 300px;

  background: #de4e13;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: .3s;
}

.fix-banner__link:hover{
  background: #fff;
  color: #de4e13;
}

.fix-banner__text{
  text-align: center;
  font-size: .95rem;
  line-height: 1.6;
}


/* -------------------------------------------------------------------
 * responsive (SP)
 * ------------------------------------------------------------------- */
@media (max-width:1024px){
  .fix-banner{
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .fix-banner__link{
    width: 100%;
    min-width: 0;
    padding: .9rem 1rem;
  }

  .fix-banner__text{
    font-size: .9rem;
    line-height: 1.35;
  }

  .only-pc{ display: none; }
  .only-sp{ display: inline; }
}

@keyframes fadey_bottom_start{
  0%{ opacity: 0; }
  90%{ opacity: 0; }
  100%{ opacity: 1; }
}


/* =========================
   Splash base
========================= */
#splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #de5f9a;     /* ★背景色は #splash に統合（.splashbg使わない） */
  opacity: 1;
  transition: opacity .42s ease;
  pointer-events: auto;  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* ダミー */
}
/* ★appear後：splashをフェードアウトして前面を明け渡す */
body.appear #splash{
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Splash: SECRET (ring + unified icon + "SHUUU")
========================================================= */

#splash_area{
  position:absolute;
  inset:0;
}

/* 単色背景（#splash の背景色は既存を活かしてもOK） */
#splash{
background: #4f1e79;
}

/* 中央ユニット：縦積みで「アイコン → テキスト」 */
.secret-wrap{
  position:absolute;
  inset:0;
  display:flex;              /* ★ grid → flex */
  flex-direction: column;    /* ★縦積み */
  justify-content: center;
  align-items: center;
  gap: 14px;                 /* ★ bubble と文字の距離 */
}

/* 小さな円（画面幅の約10%） */
.secret-bubble{
  width: 40vw;
  height: 40vw;
  max-width:200px;
  max-height: 200px;
  min-width: 200px;
  min-height:200px;

  border-radius: 999px;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;

  /* 円の見た目   border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.01);*/


  transform: scale(1);
  opacity: 1;
}

/* 外部SVG（唇＋指） */
.secret-icon{
  width: 68%;
  height: 68%;
  display:block;
  opacity: .95;
  transform: translateY(0);
}

/* KEEP SECRET（秘密ワード） */
.secret-word{
  position: relative;        /* ★ absolute をやめる */
  left: auto;
  top: auto;
  transform: none;

  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 2.9vw, 34px);
  letter-spacing: .22em;

  color: rgba(245,233,41,.95);
  text-shadow: 0 10px 22px rgba(0,0,0,.28);

  opacity: 0;
  filter: blur(10px);
  pointer-events:none;
  white-space: nowrap;
}


/* ===== アニメの段取り（JSがクラス付与する） ===== */

/* ① ワードがスッ…と入る */
.secret-wrap.is-word-in .secret-word{
  animation: secretWordIn .55s cubic-bezier(.2,.9,.1,1) forwards;
}

@keyframes secretWordIn{
  from{
    opacity:0;
    transform: translateY(10px);
    filter: blur(10px);
  }
  to{
    opacity:1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ② 円が一気に拡大してフェード（画面を覆う） */
.secret-wrap.is-expand .secret-bubble{
  animation: secretBubbleExpand .85s cubic-bezier(.2,.9,.1,1) forwards;
}

@keyframes secretBubbleExpand{
  0%{
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  20%{
    transform: scale(1) rotate(30deg); /* 首かしげ */
    opacity: 1;
  }

  100%{
    transform: scale(6) rotate(0deg); /* 正面に戻して押し切り */
    opacity: 0.94;
  }
}

/* ③ ワードも拡大に巻き込む（位置基準をtranslateYに） */
.secret-wrap.is-expand .secret-word{
  animation: secretWordZoom .85s cubic-bezier(.2,.9,.1,1) forwards;
}
@keyframes secretWordZoom{
  0%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100%{
    opacity: 0;
    transform: translateY(0) scale(1.55);
  }
}

@media screen and (max-width:992px) {

}


  /* GAMEN */
/* =========================
  Splash doors (pakkāaan)
  .splashbg is a single element
========================= */
.splashbg{ display:none; }

body.appear .splashbg{
  display:block;
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
}

/* 左ドア */
body.appear .splashbg::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:50vw;
background:#de5f9a;
  animation: DoorOpenL 1.05s cubic-bezier(.2,.9,.1,1) forwards;
}

/* 右ドア */
body.appear .splashbg::after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:50vw;
background:#de5f9a;
  animation: DoorOpenR 1.05s cubic-bezier(.2,.9,.1,1) forwards;
}

@keyframes DoorOpenL{
  0%   { transform: translateX(0); }
  20%  { transform: translateX(0); }
  100% { transform: translateX(-105%); }
}
@keyframes DoorOpenR{
  0%   { transform: translateX(0); }
  20%  { transform: translateX(0); }
  100% { transform: translateX(105%); }
}

#container{ opacity:0; }
body.appear #container{
  animation: Appear .65s ease forwards;
  animation-delay: .18s;
}
@keyframes Appear{ to{ opacity:1; } }

/* =========================
  Container appear
========================= */
#container{ opacity:0; }
body.appear #container{
  animation: PageAnimeAppear .65s ease forwards;
  animation-delay: .18s; /* 割れた瞬間から見せる */
}
@keyframes PageAnimeAppear{
  from{ opacity:0; }
  to{ opacity:1; }
}



/*==================================================
 縦線
===================================*/
/*スクロールダウン全体の場所*/
.scrolldown1 {
  color: #f5e929;
  position: absolute;
  right: 3%;
  top: 50vh;
  /*全体の高さ*/
  height: 80px;
  z-index: 111;
}
.scrolldown1 span {
  /*描画位置*/
  position: absolute;
  left: 5px;
  bottom: 0px;
  /*テキストの形状*/
  color: #f5e929;
  font-size: 0.8rem;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: 0;
  /*線の形状*/
  width: 1px;
  height: 80px;
  background: #f5e929;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 2.4s ease-in-out infinite;
  opacity: 0;
}
@media screen and (max-width:992px) {
  .scrolldown1 {
    top: 80vh;  right: 10%;
  }
  .scrolldown1 span {
    /*テキストの形状*/
  }
  .scrolldown1::after {
    height: 80px;
  }
} /*end*/
@media screen and (max-width:768px) {
  .scrolldown1 {
    top: 80vh;
  }
} /*end*/
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 80px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 80px;
    opacity: 0;
  }
}
/*==================================================
 矢印右
===================================*/
.btnarrow5 {
  /*矢印の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  border: 4px solid #555;
  padding: 8px 30px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #333;
  outline: none;
  /*アニメーションの指定*/
  transition: all .2s linear;
  font-size: 0.9rem;
}
.btnarrow5:hover {
  background: #333;
  color: #fff;
}
/*矢印と下線の形状*/
.btnarrow5::before {
  content: "";
  /*絶対配置で下線の位置を決める*/
  position: absolute;
  top: 50%;
  right: -26px;
  /*下線の形状*/
  width: 40px;
  height: 4px;
  background: #333;
  /*アニメーションの指定*/
  transition: all .2s linear;
}
.btnarrow5::after {
  content: "";
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 20%;
  right: -21px;
  /*矢印の形状*/
  width: 1px;
  height: 12px;
  background: #333;
  transform: skewX(45deg);
  /*アニメーションの指定*/
  transition: all .2s linear;
}
/*hoverした際の移動*/
.btnarrow5:hover::before {
  right: -30px;
}
.btnarrow5:hover::after {
  right: -25px;
}


/* =========================================================
   PAGE TOP（四角・モノライン矢印）
   - UpMove / DownMove / keyframes はそのまま
========================================================= */

/*リンクを右下に固定*/
#page-top{
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 9997;
  cursor: pointer;

  /* はじめは非表示（既存維持） */
  opacity: 0;
  transform: translateY(100px);

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* クリック面：四角・版ずれなし */
#page-top a{
  position: relative;
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;

  border-radius: 0;
  border: 2px solid #fff;
  background: rgba(255,255,255,.08);
  text-decoration: none;

  /* hoverで気持ちよく */
  transition: transform .18s ease, background-color .18s ease;
}

@media (hover:hover){
  #page-top a:hover{
    background: rgba(255,255,255,.16);
    transform: translateY(-2px);
  }
}

/* 矢印のキャンバス */
#page-top a span{
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
}

/* 「|」縦線 */
#page-top a span::before{
  content:"";
  position:absolute;
  left: 9px;
  top: 2px;
  width: 2px;
  height: 18px;
  background: #fff;
}

/* てっぺんから右下45°「╲」 */
#page-top a span::after{
  content:"";
  position:absolute;
  left: 9px;      /* 縦線の上端に合わせる */
  top: 2px;
  width: 14px;
  height: 2px;
  background: #fff;
  transform-origin: left center;
  transform: rotate(45deg); /* 右下へ */
}

/* SP：少し小さく */
@media (max-width: 768px){
  #page-top{ right: 10px; bottom: 14px; }
  #page-top a{ width: 56px; height: 56px; }
  #page-top a span{ width: 20px; height: 20px; }
  #page-top a span::before{ left: 8px; height: 16px; }
  #page-top a span::after{ left: 8px; width: 13px; }
}

/* fix-sp（下部バナー）と干渉するなら上に逃がす */
@media (max-width: 1024px){
  #page-top{ bottom: 72px; }
}


/*　上に上がる動き　*/
#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
  animation-delay: 0s;
}
@keyframes UpAnime{
  from{ opacity:0; transform: translateY(100px); }
  to  { opacity:1; transform: translateY(0); }
}
/*　下に下がる動き　*/
#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from{ opacity:1; transform: translateY(0); }
  to  { opacity:1; transform: translateY(100px); }
}


/*===========================================================*/
/* メインエリア　*/
/*===========================================================*/
.slider {
  position: relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 90vh; /*全体の縦幅を90vhにする*/
}
/* 4-6 じわっ（ぼかしから出現） */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

/*スーッ（枠線が伸びて出現）*/
.lineTrigger {
  position: relative; /* 枠線が書かれる基点*/
  opacity: 0;
}
.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*上下線*/
.lineTrigger::before, .lineTrigger::after {
  position: absolute;
  content: '';
  width: 0;
  height: 1px;
  background: #ccc; /* 枠線の色*/
}
/*左右線*/
.line2::before, .line2::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 0;
  background: #ccc; /* 枠線の色*/
}
/*上線*/
.lineTrigger::before {
  top: 0;
  left: 0;
}
.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}
/*右線*/
.line2::before {
  top: 0;
  right: 0;
}
.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}
/*下線*/
.lineTrigger::after {
  bottom: 0;
  right: 0;
}
.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}
/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
}
.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}
@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime .5s linear 1.5s forwards; /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0; /*初期値を透過0にする*/
}
@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* -------------------------------------------------------------------
 * top-main
 * ------------------------------------------------------------------- */
#top-main{
  position: relative;
  z-index: 10;
}

.top-content{
  position: relative;
  width: 100%;
  min-height: 1062px;
  background: #4f1e79;
  overflow: hidden;
}

/* 背景レイヤー */
.mainV{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 画像は全面に */
.mainV img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  user-select: none;
  -webkit-user-drag: none;

  /* 追加：ズーム演出 */
  transform: scale(1.2);
  transition: transform 2.4s cubic-bezier(.2,.9,.1,1);
  will-change: transform;
}

/* 追加：幕（splashbg）が開いた後にズーム */
body.appear .mainV img{
  transform: scale(1);
  transition-delay: 0.5s; /* ドア1.05s + 少し */
}

.toplogo-area{
  position:absolute;
  left:0; right:0;
  top:75%;
  transform: translateY(-50%);
  z-index:20;

  display:flex;
  justify-content:center;
}



/* 通常はくっきり（事故防止） */
.title-label{
  opacity: 1;
  filter: none;
  transform: rotate(-1deg);
  will-change: transform, opacity, filter;
}

/* 初期：右の画面外に待機（pxなのでわかりやすい） */
.title-label.is-pre{
  transform: translateX(1800px) rotate(2deg);
  opacity: 1;
  filter: none;
}

/* 実行：ホームに“ビューン→急ブレーキ→キュッ” */
.title-label.is-in{
  animation: shinkansen-in .55s cubic-bezier(.05,1.05,.2,1) both;
}

@keyframes shinkansen-in{
  0%{ transform: translateX(1400px) rotate(2deg) scale(1.02); }
  60%{ transform: translateX(-22px) rotate(-1deg) scale(1.01); }
  78%{ transform: translateX(10px) rotate(-1deg) scale(1); }
  92%{ transform: translateX(-2px) rotate(-1deg) scale(1); }
  100%{ transform: translateX(0) rotate(0deg) scale(1); }
}


/* タイトル画像サイズ */
.title-label img{
  display: block;
  width: 780px;     /* PC */
  height: auto;
}



@media (max-width: 992px){
  .top-content{
    min-height: 0;
    height: 100svh;
  }
  .mainV img{
    transform: scale(1.02);
    object-position: center top;
  }
  body.appear .mainV img{
    transform: scale(1);
  }
    
      .toplogo-area{ top:70%; }
    
    
  .title-label img{
    width: 90vw;    /* 画面幅の80% */
  }
}/**/


/* =========================================================
  TOP LOGO：スプラッシュ後に順番通り出す（スクロール不要）
========================================================= */

/* blurTriggerの基本 */
.blurTrigger{ opacity:0; }
.blurTrigger.blur{ opacity:1; }

/* ロゴは “appear まで隠す” */
#top-main .top-logo{
  opacity: 0;                 /* ←ここで完全に隠す */
}

/*  appear になったら表示対象へ（親を見せる） */
body.appear #top-main .top-logo{
  opacity: 1;
}

/*  中身はワイプ準備（最初は隠す） */
#top-main .top-logo .rightAnime{
  display:inline-block;
  opacity:0;
  transform: translateX(-120px) skewX(-10deg) scaleX(1.06);
  filter: blur(12px);
  will-change: transform, opacity,filter;
}

/* appearで発火（delayはあなたのタイミングでOK） */
body.appear #top-main .top-logo .rightAnime{
  transform-origin: 50% 50%;
  animation: topLogoVyuun 1.05s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: 1.5s;
}

/* ビューン：右から突っ込んでキメる（最後は絶対残す） */
@keyframes topLogoVyuun{
  0%{
    opacity:0;
    transform: translateX(-120px) skewX(-10deg) scaleX(1.06);
    filter: blur(12px);
  }
  35%{
    opacity:1;
  }
  70%{
    transform: translateX(6px) skewX(2deg) scaleX(.995);
    filter: blur(0);
  }
  100%{
    opacity:1;
    transform: translateX(0) skewX(0) scaleX(1);
    filter: blur(0);
  }
}


/* =========================================================
   Lightweight replacements (no jQuery / no Slick)
========================================================= */
.movie--node{
  position: relative;
  aspect-ratio: 16 / 9; /* 高さ確保 */
  background:#000;
  overflow:hidden;
}

/* サムネ表示 */
.movie--node .yt-lazy{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  cursor:pointer;

  display:grid;
  place-items:center;
  text-align:center;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 文字は前面に */
.movie--node .yt-lazy span{
  position:relative;
  z-index:2;
}

/* うっすら暗幕（任意） */
.movie--node .yt-lazy::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:1;
}
/* ---- CSS-only fade slider (optional) ----
   Use when HTML has:
   <div class="slider slider--fade">
     <img ...>
     <img ...>
     <img ...>
   </div>
*/
.slider--fade{
  position:relative;
  overflow:hidden;
}
.slider--fade > *{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation: sliderFade 12s infinite;
}
.slider--fade > *:nth-child(1){ animation-delay: 0s; }
.slider--fade > *:nth-child(2){ animation-delay: 4s; }
.slider--fade > *:nth-child(3){ animation-delay: 8s; }

@keyframes sliderFade{
  0%{opacity:0}
  8%{opacity:1}
  33%{opacity:1}
  41%{opacity:0}
  100%{opacity:0}
}


/* =========================================================
   GRAIN OVERLAY（soles寄せ・最終）
========================================================= */
.grain{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;

  background-image: url("../img/grain.png");
  background-repeat: repeat;
  background-size: 220px 220px;

  opacity: .12;

  /* ★要素は動かさず、背景だけ切り替える */
  animation: grainBg 1.4s steps(1) infinite;
  will-change: background-position;
}

@keyframes grainBg{
  0%   { background-position:   0px   0px; }
  10%  { background-position:  12px  -8px; }
  20%  { background-position:  -8px  14px; }
  30%  { background-position:  16px   6px; }
  40%  { background-position: -14px  -6px; }
  50%  { background-position:   8px -14px; }
  60%  { background-position: -16px   8px; }
  70%  { background-position:  14px  12px; }
  80%  { background-position:  -6px -16px; }
  90%  { background-position:  10px   2px; }
  100% { background-position:   0px   0px; }
}

/* 動きが苦手な人向け（念のため）@media (prefers-reduced-motion: reduce){
  .grain{ animation: none; }
} */