@charset 'utf-8';

#top-head a,
#top-head {
  color:#fff;
}
#nav-toggle span { background:#fff; }

body{background:#000; overflow-x:hidden;}
.bg-fixed{position:fixed;inset:0;z-index:-2;overflow:hidden;}
.bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .8s ease;}
.bg-layer.is-visible{opacity:1;}
.bg-layer-front{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1;}
.bg-video{width:100%;height:100vh;object-fit:cover;}
@media (min-width:768px){
  .bg-video{height:100%;}
}

.scene{height:200vh;}
.top{position:sticky;top:0;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:1;}
.img-column{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;}

.hero-media{position:absolute;inset:0;display:flex;justify-content:center;opacity:0;transition:opacity .2s linear;transform-origin:center center;padding:0 5%;}
.hero-media img{max-width:min(60vw,600px);width:100%;height:auto;display:block;}
.scene_text { font-size:30px; }
.hero-media img.mincho {max-width:initial !important; width:100%;height:auto;display:block;}
.hero-media img.sonosaki {max-width:min(100vw,600px);width:100%;height:auto;display:block;}
.hero-media img.mirai {max-width:min(100vw,600px);width:100%;height:auto;display:block;}
.hero-media .top_text.inline_sp { width:100% !important; text-align:center; font-size:9vw; }
.hero-media .top_text.inline_pc { display:none !important; }
.hero-media.hero-media-b { width:100%; }
.hero-media.is-active{opacity:1;}
.hero-media .tate_right { width:auto; position:absolute; right:0; height:100vh; }

@media (min-width:768px){
  .hero-media { align-items:center;}
  .hero-media img{max-width:50vw;}
  .scene_text{font-size:60px;line-height:1.3em;color:#fff;}
  .scene_text .inline_sp { display:none; } 
  .yumekake .scene_text { margin-left:-25vw; }
  .scene_text.right{text-align:right;}
  .hero-media img.top_text { width:100% !important; max-width:min(90vw,600px);}
  .hero-media img.mincho {max-width:min(80vw,600px) !important;width:100%;height:auto;display:block;}
  .hero-media img.sonosaki {max-width:min(60vw,600px);width:100%;height:auto;display:block;}
  .hero-media img.mirai {max-width:min(60vw,600px);width:100%;height:auto;display:block;}
  .hero-media .top_text.inline_pc { display:block !important; }
  .hero-media .top_text.inline_sp { display:none; }
}

.scene_text { 
  font-size: clamp(30px, 5vw, 100px); 
}

@media (min-width:768px){
  .scene_text { 
    font-size:4.6vw; 
    line-height: 1.4em; 
    color: #fff; 
    -webkit-text-stroke: 2px #fff; 
    transform: scaleY(0.7);
    transform-origin: center; 
    /* ★ position: relative に変更（JSで動的に切り替える） */
    position: relative;
    bottom: auto;
  }
  
  .scene_text .inline_sp { 
    display: none; 
  } 
  
  /* ★ 個別のクラスもrelativeに（JSが優先） */
  .mogake { 
    position: relative;
    bottom: auto;
  }
  
  .yumekake .scene_text { 
    margin-left: -25vw;
    position: relative;
    bottom: auto;
  }
  
  .scene_text.right { 
    text-align: right;
    position: relative;
    bottom: auto;
  }
}

.hero-zoom img.mincho {
  transform: scale(2);
  transform-origin: center center;
  transition: transform 0.2s ease-out;
}

.hero-zoom.zoom-play img.mincho {
  transform: scale(1);
}

@media (min-width:768px){
  .hero-zoom.zoom-play img.mincho {
    transform: scale(1.5);
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-media { padding:0 5%; }
}

.normal-section{min-height:100vh;background:#fff;}
.topvisual .top .img-column .hero-media{width:fit-content;flex-direction:column;}
.topvisual .top .img-column .hero-media img{ margin-bottom:10px; display:block;opacity:0;transform-origin:center center;animation:titleImpact .4s ease-out forwards; mix-blend-mode:difference; }
.topvisual .top .img-column .hero-media img:nth-child(2){ margin-left:15vw;animation-delay:.3s; mix-blend-mode:difference; }
.topvisual .top .img-column .hero-media img:nth-child(3){ margin-left:30vw;animation-delay:.6s; mix-blend-mode:difference; }

@media screen and (min-width:768px) {
  .topvisual .top .img-column .hero-media{width:fit-content;flex-direction:column;margin-left:5vw;}
  .topvisual .top .img-column .hero-media img{ width:auto; display:block;margin-bottom:37px;width:35vw; opacity:1; max-width: min(98vw,1080px);}
  .topvisual .top .img-column .hero-media img:nth-child(2){margin-left:19vw;}
  .topvisual .top .img-column .hero-media img:nth-child(3){margin-left:38vw; }
} 

.topvisual .top .img-column .hero-media{width:fit-content;flex-direction:column;animation: gagaga .25s ease-in-out 1s forwards; }

@media screen and (min-width:768px) {
  .topvisual .top .img-column .hero-media { margin-left:5vw;}
}

@keyframes gagaga {
  0%   { transform: translateX(0); }
  8%   { transform: translateX(-30px); }
  16%  { transform: translateX(35px); }
  24%  { transform: translateX(-28px); }
  32%  { transform: translateX(32px); }
  40%  { transform: translateX(-20px); }
  48%  { transform: translateX(25px); }
  56%  { transform: translateX(-15px); }
  64%  { transform: translateX(15px); }
  72%  { transform: translateX(-8px); }
  80%  { transform: translateX(8px); }
  88%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

@keyframes titleImpact{
  0%{opacity:0;transform:scale(4);filter:blur(18px);}
  100%{opacity:1;transform:scale(1);filter:none;}
}

.topvisual{position:relative;}
.topvisual .fighthard{width:100%;position:absolute;bottom:0;z-index:2;opacity:1;transition:opacity 1.0s ease-out;pointer-events:none;}
.topvisual .fighthard { height:50px; }

@media (min-width:768px){
  .topvisual .fighthard { height:80px; }
}

/* SPシーン */
.scene-sp {
  display: none;
}

@media (min-width: 769px) {
  .scene-sp {
    display: none;
  }
}

@media (max-width: 768px) {
  .scene[data-scene="2"],
  .scene[data-scene="3"],
  .scene[data-scene="4"] {
    display: none;
  }

  .scene-sp {
    width:100%; 
    display: block;
  }

  /* ===============================
     SP シーン2
     =============================== */
  .scene-sp.scene-sp-2 {
    position: relative;
    width: 100%;
    height: 110vh;
    overflow: hidden;
  }

  .scene-sp.scene-sp-2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/scene2_bg.webp) center / cover no-repeat;
    z-index:-1;
  }

  .scene-sp.scene-sp-2 .top { 
    position: sticky;
    top: 0;
    height: 100vh; 
  }

  .scene-sp.scene-sp-2 .top .img-column { 
    height: 100vh; 
    position: relative;
  }

  .scene-sp.scene-sp-2 .top .img-column div:nth-child(1) { 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  .scene-sp.scene-sp-2 .top .img-column div:nth-child(2) { 
    width: 100%; 
    height: 100vh; 
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .scene-sp.scene-sp-2.scrolled .top .img-column div:nth-child(1) {
    opacity: 0;
  }

  .scene-sp.scene-sp-2.scrolled .top .img-column div:nth-child(2) {
    opacity: 1;
  }

  /* ===============================
     SP シーン3
     =============================== */
  .scene-sp.scene-sp-3 {
    position: relative;
    width: 100%;
    /* height: 200vh; */
    overflow: hidden;
  }

  .scene-sp.scene-sp-3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/scene3_bg.webp) center / cover no-repeat;
    z-index:-1;
  }

  .scene-sp.scene-sp-3 .top { 
    position: sticky;
    top: 0;
    height: 100vh; 
  }

  .scene-sp.scene-sp-3 .top .img-column { 
    height: 100vh; 
    position: relative;
  }

  .scene-sp.scene-sp-3 .top .img-column div:nth-child(1) { 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  .scene-sp.scene-sp-3 .top .img-column div:nth-child(2) { 
    width: 100%; 
    height: 100vh; 
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .scene-sp.scene-sp-3.scrolled .top .img-column div:nth-child(1) {
    opacity: 0;
  }

  .scene-sp.scene-sp-3.scrolled .top .img-column div:nth-child(2) {
    opacity: 1;
  }

  /* ===============================
     SP シーン4
     =============================== */
  .scene-sp.scene-sp-4 {
    position: relative;
    width: 100%;
    /* height: 200vh; */
    overflow: hidden;
  }

  .scene-sp.scene-sp-4::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/scene4_bg.webp) center / cover no-repeat;
    z-index:-1;
  }

  .scene-sp.scene-sp-4 .top { 
    position: sticky;
    top: 0;
    height: 100vh; 
  }

  .scene-sp.scene-sp-4 .top .img-column { 
    height: 100vh; 
    position: relative;
  }

  .scene-sp.scene-sp-4 .top .img-column div:nth-child(1) { 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  .scene-sp.scene-sp-4 .top .img-column div:nth-child(2) { 
    width: 100%; 
    height: 100vh; 
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .scene-sp.scene-sp-4.scrolled .top .img-column div:nth-child(1) {
    opacity: 0;
  }

  .scene-sp.scene-sp-4.scrolled .top .img-column div:nth-child(2) {
    opacity: 1;
  }

  /* SPシーンのズームアニメ */
  .scene-sp-2 .mincho,
  .scene-sp-3 .mincho,
  .scene-sp-4 .mincho {
    transform: scale(2);
    transform-origin: center center;
    opacity: 0; 
  }

  .scene-sp-2.is-active .mincho,
  .scene-sp-3.is-active .mincho,
  .scene-sp-4.is-active .mincho {
    opacity: 1;
    animation: zoomBounceSp 0.3s ease-out forwards;
  }

  @keyframes zoomBounceSp {
    0%   { transform: scale(2); }
    60%  { transform: scale(1); }
    80%  { transform: scale(1.07); }
    100% { transform: scale(1); }
  }
}

/* 姫路 */
.himeji {
  opacity: 0;
  transform: scale(2);
}

.himeji.zoom-in {
  animation: himejiSectionZoom 1.0s ease-out forwards;
}

@keyframes himejiSectionZoom {
  0% {
    opacity: 0;
    transform: scale(2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



/* 追加 */
.scene {
  position: relative;
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.scene-media {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity .4s ease;
}

.scene-media.is-active {
  opacity: 1;
}


.topvisual{position:relative;}
.topvisual .fighthard{
  width:100%;
  position:fixed; /* absolute から fixed に変更 */
  bottom:0;
  left:0; /* 追加 */
  z-index:2;
  opacity:1;
  transition:opacity 1.0s ease-out;
  pointer-events:none;
}
.topvisual .fighthard { height:50px; }

@media (min-width:768px){
  .topvisual .fighthard { height:80px; }
}

body.scroll-lock {
  overflow: hidden;
}