/* =========================
ROOT
========================= */
:root{
  --navy:#0B1D2B;
  --beige:#F7F3EC;
  --orange:#E48A36;
  --text:#1c1c1c;

  --max-width:1200px;
  --radius:24px;
}

/* =========================
RESET
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Noto Sans JP",sans-serif;
  background:var(--beige);
  color:var(--text);
  line-height:1.8;
  overflow-x:hidden;
}

img{
  width:100%;
  display:block;
}

a{
  text-decoration:none;
}

/* =========================
LAYOUT
========================= */
.container{
  width:min(var(--max-width),90%);
  margin:auto;
}

/* heroは絶対padding消す */
.hero{
  padding:0 !important;
  margin:0;
  line-height:0;
  font-size:0;
}


.hero picture{
  display:block;
}

/* section基本 */
section{
  padding-top:120px;
}

.access{
    padding-bottom:120px;
}
/* =========================
TYPOGRAPHY
========================= */
.section-en{
  font-family:"Bebas Neue";
  font-size:18px;
  letter-spacing:4px;
  color:var(--orange);
  opacity:.7;
  margin-bottom:10px;
  display:block;
}

.section-text h2{
  font-size:clamp(56px,7vw,96px);
  font-family:"Bebas Neue";
  line-height:1;
  margin-bottom:30px;
  white-space:nowrap;
}

.section-text h3{
  font-size:1.6rem;
  margin-bottom:20px;
}

/* =========================
2 COLUMN（共通）
========================= */
.two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

/* =========================
IMAGE CARD
========================= */
.movie-card,
.festival-card,
.access-gallery
{
  border-radius:20px;
  overflow:hidden;
}

.movie-card iframe{
  width:100%;
  aspect-ratio:16/9;
  display:block;
}

/* =========================
HEADER
========================= */
.site-header{
  background:#fff;
  padding:24px 0;
  position:sticky;
  top:0;
  z-index:100;
}

.site-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo img{
  width:230px;
}

.footer-left img{
  width:180px;
}

.nav{
  display:flex;
  gap:40px;
}

.nav a{
  color:var(--navy);
  font-weight:600;
}

/* =========================
HAMBURGER（完全安定版）
========================= */
.hamburger{
  display:none;
  width:40px;
  height:20px;
  position:relative;
  background:none;
  border:0;
  cursor:pointer;
  z-index:9999;
}

.hamburger span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:var(--navy);
  transition:.3s;
}

/* 初期位置固定 */
.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:50%;transform:translateY(-50%);}
.hamburger span:nth-child(3){bottom:0;}

/* active（ここが重要） */
.hamburger.active span:nth-child(1){
  top:50%;
  transform:translateY(-50%) rotate(45deg);
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  bottom:50%;
  transform:translateY(50%) rotate(-45deg);
}

/* mobile nav */
@media (max-width:768px){

  .hamburger{
    display:block;
  }

  .nav{
    position:fixed;
    top:0;
    right:0;
    width:75%;
    height:100vh;
    background:#fff;
    flex-direction:column;
    padding:100px 30px;
    transform:translateX(100%);
    transition:.4s;
  }

  .nav.active{
    transform:translateX(0);
  }
}

/* =========================
TICKET
========================= */
.ticket{
  background:var(--navy);
  color:#fff;
  padding-bottom: 120px;
}

.ticket-wrap{
  margin-top:40px;
  display:grid;
  gap:30px;
}

.ticket-card{
  padding:40px;
  border-radius:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border:1px solid rgba(255,255,255,0.2);
}

.ticket-card.active{
  background:rgba(255,255,255,0.08);
}

.ticket-label{
  font-weight:700;
  font-size:1.5rem;
}

.ticket-card strong{
  font-size:2rem;
}

.ticket-btn{
  background:#fff;
  color:var(--navy);
  padding:12px 28px;
  border-radius:999px;
  font-weight:700;
}

/* bottom */
.ticket-bottom{
  margin-top:50px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
}

.ticket-note{
  flex:1;
  text-align:left !important;
}

.ticket-footer{
  text-align:right;
}

.ticket-note ul{
  list-style:none;
  padding:0;
}

.ticket-note li{
  position:relative;
  padding-left:1.2em;
  font-size:14px;
}

.ticket-note li::before{
  content:"・";
  position:absolute;
  left:0;
}

.ticket-info-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:16px 40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.5);
  color:#fff;
  font-weight:700;
}

.ticket-info-btn::after{
  content:"›";
  font-size:1.2em;
  line-height:1;
}

/* =========================
ANNOUNCE
========================= */
.announce{
  background:var(--beige);
  padding:60px 0 60px;
  text-align:center;
}

.announce-inner{
  text-align:center;
}

.announce-tag{
  font-family:"Noto Sans JP",sans-serif;
  font-size:clamp(48px,7vw,90px);
  font-weight:700;
  color:var(--orange);
  letter-spacing:2px;
  margin-bottom:10px;
  display:block;
}

.announce-logo{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(52px,8vw,100px);
  color:var(--navy);
  line-height:1;
  letter-spacing:3px;
}

.announce-main{
  font-size:clamp(18px,2.5vw,30px);
  font-weight:700;
  color:var(--navy);
}

/* =========================
INFO
========================= */
.info{
  background:var(--navy);
  color:#fff;
  padding:120px 0;
}

.section-heading{
  text-align:left;
  margin-bottom:40px;
}

.info .section-heading h3{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(20px,2.5vw,28px);
  color:#fff;
  line-height:1;
  margin-top:6px;
}

.info-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}

.info-grid{
  display:grid;
  gap:24px;
}

.info-item{
  border-bottom:1px solid rgba(255,255,255,0.12);
  padding-bottom:20px;
}

.info-item h3{
  color:var(--orange);
  font-size:15px;
  margin-bottom:8px;
  letter-spacing:0.5px;
}

.access-info-intro{
  font-size:14px;
  line-height:1.9;
  margin-bottom:24px;
  color:var(--orange);
  font-weight:500;
}

/* Access info block（info section内） */
.access-info-block{
  margin-bottom:28px;
}

.access-info-block h3{
  display:inline-block;
  font-size:15px;
  font-weight:700;
  color:var(--navy);
  background:#fff;
  padding:4px 12px;
  border-radius:4px;
  margin-bottom:12px;
  letter-spacing:0.5px;
}

.access-info-block ul{
  list-style:none;
  padding:0;
  margin-bottom:12px;
}

.access-info-block li{
  position:relative;
  padding-left:1em;
  font-size:15px;
  line-height:1.9;
}

.access-info-block li::before{
  content:"·";
  position:absolute;
  left:0;
}

.access-info-block p{
  font-size:14px;
  line-height:1.8;
  opacity:0.75;
}

/* =========================
FOOTER
========================= */
.site-footer{
  background:#fff;
  padding:80px 0;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer-nav{
  display:flex;
  gap:30px;
}

.footer-nav a{
  color:var(--navy);
  opacity:0.85;
  transition:.3s;
  font-weight:600;
}

.footer-nav a:hover{
  opacity:1;
}

.footer-links{
  display:flex;
  gap:24px;
}

.footer-links a{
  color:var(--navy);
  opacity:0.85;
  font-weight:600;
  transition:.3s;
  font-size:22px;
}

.footer-links a:hover{
  opacity:1;
}

.footer-archive-btn{
  font-size:13px !important;
  border:1.5px solid var(--navy);
  border-radius:999px;
  padding:4px 12px;
  letter-spacing:0.5px;
}

/* =========================
HERO WAVE
========================= */
.hero{
  position:relative;
}

.hero-wave{
  position:absolute;
  bottom:-2px;
  left:0;
  width:100%;
  line-height:0;
  z-index:1;
}

.hero-wave svg{
  width:100%;
  height:70px;
  display:block;
}

/* =========================
ASHIRAI（あしらい）
========================= */

/* About — ドットグリッド + 背景文字 */
.about{
  position:relative;
  overflow:hidden;
}

.about::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(228,138,54,0.35) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(to right, black 40%, transparent 70%);
  -webkit-mask-image:linear-gradient(to right, black 40%, transparent 70%);
  pointer-events:none;
  z-index:-1;
}

.about::after{
  content:"KOBE";
  position:absolute;
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(100px,16vw,190px);
  color:rgba(228,138,54,0.06);
  bottom:-10px;
  right:-5px;
  line-height:1;
  letter-spacing:0.02em;
  pointer-events:none;
  z-index:0;
}

/* Festival — ドットグリッド */
.festival{
  position:relative;
  overflow:hidden;
}

.festival::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(228,138,54,0.35) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(to left, black 40%, transparent 70%);
  -webkit-mask-image:linear-gradient(to left, black 40%, transparent 70%);
  pointer-events:none;
  z-index:-1;
}

/* Access — 大きな "BAY" + 左ドット */
.access{
  position:relative;
  overflow:hidden;
}

.access::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(228,138,54,0.35) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(to right, black 40%, transparent 70%);
  -webkit-mask-image:linear-gradient(to right, black 40%, transparent 70%);
  pointer-events:none;
  z-index:-1;
}

.access::before{
  content:"BAY";
  position:absolute;
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(80px,14vw,160px);
  color:rgba(228,138,54,0.05);
  bottom:0;
  left:-8px;
  line-height:1;
  letter-spacing:0.04em;
  pointer-events:none;
  z-index:0;
}

/* Ticket — 斜めストライプ */
.ticket{
  position:relative;
  overflow:hidden;
}

.ticket::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 38px
  );
  pointer-events:none;
  z-index:0;
}

/* Ticket title（大きな TICKET 見出し） */
.ticket-title{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(48px,8vw,80px);
  color:#fff;
  line-height:1;
  margin-bottom:40px;
  text-align:center;
  letter-spacing:8px;
}

/* Ticket card left（ラベル+日程縦並び） */
.ticket-card-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ticket-period{
  font-size:14px;
  color:var(--orange);
  letter-spacing:0.5px;
  font-weight: 700;
}

/* About WHAT'S — h2 と同サイズに揃える */
.about-en{
  font-size:clamp(56px,7vw,96px);
  opacity:1;
  letter-spacing:2px;
  margin-bottom:0;
  line-height:1;
  white-space:nowrap;
}

/* あしらいの上にコンテンツを乗せる */
.about .container,
.festival .container,
.access .container,
.ticket .container{
  position:relative;
  z-index:1;
}

/* =========================
RESPONSIVE
========================= */

/* tablet */
@media (max-width:1024px){

  section{
    padding:80px 0;
  }

  .two-column{
    grid-template-columns:1fr;
    gap:50px;
  }

  .ticket-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .ticket-footer{
    text-align:right;
    width:100%;
  }

  .festival .festival-card{
    order:1;
  }

  .festival .section-text{
    order:0;
  }

}

/* SP */
@media (max-width:768px){

  section{
    padding:80px 0;
  }

  .announce{
    padding:40px 0 60px;
  }

  .festival,
  .access{
    padding-top:0;
  }
  .two-column{
    grid-template-columns:1fr;
    gap:40px;
  }

  .container{
    width:92%;
  }

  .ticket-card{
    flex-direction:column;
    text-align:center;
  }

  .ticket-footer{
    text-align:center;
    width:100%;
  }

  .ticket-info-btn{
    margin:0 auto;
  }

  .info{
    padding:80px 0;
  }

  .info-columns{
    grid-template-columns:1fr;
    gap:50px;
  }
  .footer-inner{
    flex-direction:column;
    text-align:center;
    gap:20px;
  }

  .footer-nav{
    flex-direction:column;
    gap:12px;
  }

  .footer-links{
    flex-direction:row;
    gap:20px;
    align-items:center;
    justify-content:center;
  }
}