/* =====================================================
   RESET
===================================================== */
*,
*::before,
*::after{
  box-sizing:border-box;
}

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

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

ul{
  margin:0;
  padding:0;
  list-style:none;
}

a{
  text-decoration:none;
  color:inherit;
}


/* =====================================================
   HEADER
===================================================== */

.siteHeader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:#fff;
  transition:.3s ease;
}

.siteHeader.is-stuck{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.gNavi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 5%;
  position:relative;
}

/* ロゴ */
.logo img{
  max-width:220px;
}

.logoSp{
  display:none;
}

.logoSp img{
  max-width:130px;
}


/* =====================================================
   PC NAV
===================================================== */

.headerNavi{
  display:block;
}

.naviInner{
  display:flex;
  align-items:center;
  gap:32px;
}

.naviInner .list a{
  font-weight:600;
  font-size:15px;
  transition:.3s;
}

.naviInner .list a:hover{
  opacity:.6;
}

/* サブメニュー */
.hasSub{
  position:relative;
}

.subMenu{
  position:absolute;
  top:40px;
  left:0;
  background:#fff;
  padding:16px 20px;
  min-width:200px;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

.hasSub:hover .subMenu{
  opacity:1;
  visibility:visible;
}

.subMenu li{
  margin-bottom:10px;
}

.subMenu li:last-child{
  margin-bottom:0;
}


/* =====================================================
   HAMBURGER
===================================================== */

.openbtn1{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  z-index:1100;
}

/* .openbtn1 span{
  display:block;
  width:26px;
  height:2px;
  background:#000;
  margin:6px 0;
} */




/* =====================================================
   SP NAV
===================================================== */

#g-nav{
  position:fixed;
  top:0;
  right:-100%;
  width:80%;
  height:100vh;
  background:#fff;
  transition:.4s ease;
  z-index:1050;
  padding:50px 30px;
}

#g-nav ul li{
  margin-bottom:5px;
}

#g-nav ul li a{
  font-size:12px;
  font-weight:600;
}

#g-nav.active{
  right:0;
}


/* =====================================================
   HERO
===================================================== */

.top-movie{
  position:relative;
  width:100%;
  height:100svh; /* iPhone対策 */
  overflow:hidden;
}

.top-movie img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.top-movie__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,0) 70%
  );
  z-index:1;
}

.top-movie__copy{
  position:absolute;
  left:6%;
  top:55%;
  transform:translateY(-50%);
  color:#fff;
  z-index:2;
  max-width:720px;
}

.top-movie__headline{
  margin:0 0 16px;
  font-size:clamp(22px,2.6vw,44px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.05em;
}

.top-movie__headline-en{
  margin:0;
  font-size:clamp(14px,1.5vw,22px);
  line-height:1.6;
  opacity:.9;
}


/* =====================================================
   LIGHT GLOBE BG
===================================================== */

.bg-lightglobe{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1200px 650px at 70% 15%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(to bottom, #eefcff 0%, #ffffff 60%);
}

.bg-lightglobe__svg{
  width:100%;
  height:100%;
}

.ray{
  stroke-width:1.6;
  opacity:.85;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35));
}

.c1{ stroke:#ff8fa3; }
.c2{ stroke:#ffb37a; }
.c3{ stroke:#ffe08a; }
.c4{ stroke:#8fe3a1; }
.c5{ stroke:#8fe7dc; }
.c6{ stroke:#9fc8ff; }
.c7{ stroke:#d6a8ff; }


/* =====================================================
   TABLET (1025px以下)
===================================================== */

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

  /* PCナビ消す */
  .headerNavi{
    display:none;
  }

  /* PCロゴ消す */
  .logo{
    display:none;
  }

  /* SPロゴ表示 */
  .logoSp{
    display:block;
  }

  /* ハンバーガー表示 */
  .openbtn1{
    display:block;
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
  }

  .top-movie__copy{
    left: 3%;
        max-width: 100%;
        text-align: left;
  }

  .siteHeader{
    background:transparent;
  }
}


/* =====================================================
   MOBILE (600px以下)
===================================================== */

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

  .gNavi{
    padding:16px 2%;
  }

  .top-movie__copy{
    top:60%;
  }

  .top-movie__headline{
    font-size:20px;
  }

  .top-movie__headline-en{
    font-size:14px;
  }
}