@charset "utf-8";

/* =========================================================
   override.css
   LEALYS / JUNGLE TOKYO寄せ 調整版
   - styles.css を壊さずに上書き
   - 重複指定を整理
   - cast一覧 / cast詳細 / hero / hamburger を統一
   ========================================================= */

/* =========================================================
   1) Global
   ========================================================= */
:root{
  --radius: 14px;
  --shadow: 0 14px 44px rgba(0,0,0,.58);
  --line: rgba(255,255,255,.10);
  --muted: rgba(244,245,255,.68);
}

body{
  letter-spacing: .02em;
}

.container{
  width: min(1100px, calc(100% - 32px));
}

.section{
  padding: 50px 0;
}

@media (max-width: 720px){
  .section{
    padding: 40px 0;
  }
}

.section__head{
  position: relative;
  padding-top: 6px;
}

.section__head::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 86px;
  height: 1px;
  background: rgba(200,168,106,.35);
}

.section__title{
  font-size: 20px;
  letter-spacing: .14em;
}

.section__sub{
  letter-spacing: .08em;
}

.link{
  text-decoration: none;
}

.link:hover{
  text-decoration: underline;
}

/* =========================================================
   2) Header / Brand / Nav
   ========================================================= */
.header{
  background: linear-gradient(to bottom, rgba(6,6,10,.94), rgba(6,6,10,.62));
}

.brand__mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.brand__text{
  font-size: 11px;
  letter-spacing: .22em;
}

.brand__logo{
  height: 40px;
  width: auto;
  display: block;
}

/* 常にハンバーガー表示 */
.navbtn{
  display: flex !important;
}

/* inline nav を無効化 */
.nav--inline{
  display: none !important;
}

/* 常にドロップダウンメニュー方式 */
.nav{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(10,10,14,.98);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.nav.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav__list{
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.nav__list a{
  display: block;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .88;
}

.nav__list a:hover{
  text-decoration: none;
  filter: drop-shadow(0 6px 16px rgba(200,168,106,.18));
}

/* =========================================================
   3) Hero
   ========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  min-height: 55vh;
  padding: 0;
}

.hero--small{
  min-height: auto;
  padding: 62px 0 44px;
}

.hero__bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: none !important;
}

.hero__cast-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
  transition: opacity 0.6s ease;
}

.hero__cast-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

@media (max-width: 768px){
  .hero__cast-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

.hero__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(200,168,106,.15), transparent 60%),
    radial-gradient(780px 460px at 90% 20%, rgba(120,140,255,.08), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.82));
}

.hero__inner{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
}

.hero__title{
  letter-spacing: .06em;
  line-height: 1.10;
  text-shadow: 0 10px 40px rgba(0,0,0,.6);
}

.hero__lead{
  max-width: 62ch;
  line-height: 1.85;
  text-shadow: 0 10px 40px rgba(0,0,0,.6);
}

.eyebrow::before{
  width: 58px;
  height: 1px;
  background: rgba(200,168,106,.55);
}

@media (max-width: 768px){
  .hero{
    min-height: 27svh;
  }

  .hero__bg{
    background-size: cover;
    background-position: center 35%;
    transform: none;
  }
}

/* cast一覧ページhero */
.cast-hero .hero__bg{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.75)),
    url("./img/hero-cast.jpg") center 20% / cover no-repeat;
  transform: scale(1.03);
}

.cast-hero .hero__title{
  letter-spacing: .18em;
}

.cast-hero .hero__lead{
  max-width: 40ch;
}

/* =========================================================
   4) Buttons / Cards / Footer
   ========================================================= */
.btn{
  padding: 11px 16px;
  border-radius: 999px;
  letter-spacing: .12em;
  font-size: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0);
}

.btn--ghost{
  background: rgba(255,255,255,.02);
}

.card{
  padding: 16px;
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}

.card__title{
  letter-spacing: .12em;
}

.card__text{
  line-height: 1.85;
}

.footer{
  background: rgba(6,6,10,.88);
}

.footer__inner{
  letter-spacing: .08em;
}

/* =========================================================
   5) Cast List
   ========================================================= */
.cast-grid{
  gap: 12px;
}

.cast-card{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.018);
}

.cast-card__img{
  aspect-ratio: 2 / 3;
}

.cast-card__img img{
  filter: none;
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
}

.cast-card:hover .cast-card__img img{
  transform: scale(1.06);
  filter: grayscale(90%) contrast(120%) brightness(88%);
}

.cast-card__name{
  letter-spacing: .10em;
}

.badge{
  letter-spacing: .10em;
}

.field__control{
  min-width: 240px;
  border-radius: 12px;
  border-color: rgba(255,255,255,.10);
}

.field__control::placeholder{
  color: rgba(244,245,255,.45);
}

/* =========================================================
   7) Cast Detail
   ========================================================= */
.detail__title{
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
}

.detail__title small{
  font-size: 14px;
  letter-spacing: .08em;
}

/* グリッドアイテムの横幅オーバーフロー防止 */
.detail__media{
  min-width: 0;
  overflow: hidden;
}

/* メイン画像 */
.detail__cover{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.02);
  overflow: hidden;
  text-align: center;
}

.detail__cover img{
  display: block;
  width: 100% !important;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  object-position: top center;
}

/* 通常のグリッド型サムネイル */
.detail__thumbs{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.detail__thumbs button{
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  transition: transform .2s ease, border-color .2s ease;
}

.detail__thumbs button:hover{
  transform: translateY(-2px);
  border-color: rgba(200,168,106,.45);
}

.detail__thumbs img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: none;
}

/* 横スクロール型サムネイル */
.detail__thumbs-scroll{
  margin-top: 12px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.detail__thumbs-scroll::-webkit-scrollbar{
  display: none;
}

.detail__thumbs-scroll button{
  flex: 0 0 110px;
  width: 110px;
  height: 146px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.detail__thumbs-scroll img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: none;
}

@media (max-width: 720px){
  .detail__thumbs-scroll button{
    flex: 0 0 96px;
    width: 96px;
    height: 128px;
  }
}

/* =========================================================
   8) Shop
   ========================================================= */
.shop{
  border-color: rgba(255,255,255,.10);
}

.shop__title{
  letter-spacing: .12em;
}

.shop__meta{
  letter-spacing: .04em;
}

/* =========================================================
   9) Schedule
   ========================================================= */
#schedule .card{
  max-width: 720px;
}