@charset "utf-8";
:root{
  /* 3-color system (main/sub/accent) */
  --bg: #0b0f0c;
  --panel: #121915;
  --text-main: #F3EFE6;
  --text-sub: #C8C1B2;
  --accent: #C6A85A;

  --line: rgba(255,255,255,0.12);
  --header-h: 56px;
  --container: 1000px;
}
html, body { height: 100%; }
    body{font-family: "Shippori Mincho", serif;font-weight: 400;
      margin: 0;
      color: var(--text-main);
       background: var(--bg);
font-size:  16px;
    }
    *, *::before, *::after{ box-sizing: border-box; }
    a{ color: inherit; text-decoration: none; }




/* 本文・リスト・スパンは読みやすさ重視のゴシック */
p { 
  font-size: 1.1rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: justify;
  padding: 0 2rem 0.8rem;
}
  @media (max-width: 768px){
p{font-size: 1rem; 
  padding:0 .5rem .5rem;letter-spacing: 0;text-align: left;
}
    }

.text-center{ margin: auto;text-align: center;  }

.caption,footer{ font-family: "Special Elite", system-ui;letter-spacing: 0.2em;}

.overlayMenu,h1,.title,nav,.cast-card-comment span,#schedule .city{font-family: "EB Garamond", serif;letter-spacing: 0.2em;}


h3, .catch {font-family: "Shippori Mincho", serif;font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

 .cast-card-prof,.cast-card-prof-hana,.newsletter p,.footer-credit p,.notice-list,.scheduleInfo,.hoshitori-atten {   font-family: "IBM Plex Sans JP", sans-serif;}



.beige{color: var(--accent);}

    
    /* ===== Header（常に透明） ===== */
    .site-header{
      width: 100%;
      position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 40;
      display: grid; align-items: center;
      background: transparent !important; backdrop-filter: none !important;
      box-shadow: none !important; border: none !important;
      pointer-events: none; /* 背景は透過クリック */
    }
    .nav{
      pointer-events: auto;
      height: 100%;
      display: flex; align-items: center; justify-content: space-between;
      padding:0 .9rem;
      width: 100%; max-width: none; margin: 0; /* 画面端に合わせる */
    }

  /* スマホ：ぼかし背景OFF。ビジュアルのみ画面いっぱい */
    @media (max-width: 992px){
    .nav{
      padding:0rem .9rem 0; 
    }
    }


    .brand{
      font-size: 1rem; letter-spacing: .03em;
    }
    .brand a{ display: inline-block; padding: .4rem .6rem; border-radius: .6rem; background: transparent; }
    .links{ display: none; }

    .burger, .close{
      display: inline-grid; place-items: center;
      width: 40px; height: 40px; border-radius: 10px;
      border: 3px solid rgba(255,255,255,0.5);
      background: rgba(20,20,20,0.35);
      color: #fff; cursor: pointer;
      transition: transform .16s ease, background .25s ease, border-color .25s ease;
    }
    .burger:hover, .close:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.28);
    }
    .burger svg, .close svg{ width: 18px; height: 18px; }


    /* ===== Fullscreen Menu ===== */
    .overlay{
      position: fixed; inset: 0; z-index: 60;
      display: grid; grid-template-rows: auto 1fr;
      background: rgba(8,8,8,0.92);
      opacity: 0; pointer-events: none; transform: scale(1.015);
      transition: opacity .32s ease, transform .32s ease;
    }
    .overlay.open{ opacity: 1; pointer-events: auto; transform: scale(1); }
    .overlay-top{
      display: flex; align-items: center; justify-content: space-between;
      padding: .6rem .9rem; height: var(--header-h);
      width: 100%; max-width: none; margin: 0; /* 画面端に合わせる */
    }
    .overlay-main{ display: grid; place-items: center; padding: 1.25rem; }
    .menu{ display: grid; gap: 1.1rem; text-align: center; transform: translateY(4px); opacity: .98; animation: menuIn .38s ease .04s both; }
    .menu a{
      font-size: clamp(1.5rem, 4.5vw, 2.4rem);
      letter-spacing: .06em;
      opacity: .94;
      transition: opacity .2s ease, transform .2s ease;
    }
    .menu a:hover{ opacity: 1; transform: translateY(-2px); }
    .muted{ color: var(--text-sub); font-size: .8rem; letter-spacing: .2em; margin-top: .4rem; }
    @keyframes menuIn{
      from{ transform: translateY(12px); opacity: 0; }
      to  { transform: translateY(4px);  opacity: .98; }
    }

    /* ===== Loader（黒背景・白文字 ／ タイプライター） ===== */
    .loader{
      position: fixed; inset: 0; z-index: 50;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center;
      background: #000; color: #fff;
      transition: opacity 1.0s ease;
    }
    .loader.hidden{ opacity: 0; pointer-events: none; }

    .loader svg{ width: 46px; height: 46px; display: block; margin: 0 auto; }
    .spin{ animation: spin 1.4s linear infinite; transform-box: view-box; transform-origin: 50% 50%; }
    @keyframes spin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

    .caption{
      margin-top: .9rem; font-size: .82rem; letter-spacing: .22em; color: #fff;
    }
    .caret{ display:inline-block; width:.6ch; text-align:left; animation: blink 1.1s steps(1,end) infinite; }
    @keyframes blink{ 0%,100%{opacity:0;} 50%{opacity:1;} }

    /* ===== HERO（PC:中央1000px／SP:幅いっぱい） ===== */
    .hero{
      position: relative;
      min-height: 100vh;
      display: flex; justify-content: center; align-items: center;
      overflow: hidden;
      opacity: 0; filter: blur(12px);
      transition: opacity 900ms ease, filter 1400ms ease;
      will-change: opacity, filter;
    }
    body.has-loaded .hero{ opacity: 1; filter: blur(0); }

    .hero img{
      display: block; width: 100%; height: auto; max-width: 1000px; position: relative; z-index: 2;
    }
    /* PC限定：周囲をぼかして広げる（主役は中央の鮮明画像） */
    .hero::before{
      content: ""; position: absolute; inset: 0; z-index: 1;
      background: url("../img/rough_251020.jpg") center/cover no-repeat;
      filter: blur(30px) brightness(0.3); transform: scale(1.2);
    }
    /* スマホ：ぼかし背景OFF。ビジュアルのみ画面いっぱい */
@media (max-width: 992px){
  .hero::before{ display: none; }
  .hero{
    min-height: auto;
    padding-top: var(--header-h);
  }
  .hero img{
    max-width: none;
    width: 100%;
    height: auto;
  }
}
#intro .container,#story .container,#schedule .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}



 /* ======================
   FIRST VIEW ANNOUNCE
====================== */

.fv-info{
  text-align:center;
  margin:48px auto 80px;
  max-width:800px;
}


.fv-info__title{
  font-size:1.2rem;
  margin-bottom:14px;
}


.fv-info__link{
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:4px;
  transition:opacity .2s ease;
}

.fv-info__link:hover{
  opacity:.7;
}


      /* ==============================
   SCHEDULE セクション
============================== */
#schedule {
  background: var(--panel);
  padding: 5rem 0;
}

#schedule .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;text-align: center;
}

#schedule .cards {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  #schedule .cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

#schedule article {
  background: rgba(18, 25, 21, 0.95);
  border: 1px solid rgba(198,168,90,0.25);
  border-radius: 1.1rem;
  padding: 1.4rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}



#schedule .city {
  font-size:1.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--accent);
}

#schedule h3 {
  margin: 0.3rem 0;
  font-size: 1.6rem;
}

#schedule .venue {
  color: var(--text-sub);
  font-size: 1.6rem;margin: auto;text-align: center;
}

#schedule .btn-ticket {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  margin: 0.9rem auto 0;
  border-radius: 0.8rem;
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, #f6edcf 0%, #d8c07a 100%);
  color: #2a2418;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: transform 0.2s ease, filter 0.25s ease;
}

#schedule .btn-ticket:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
}

#schedule .note {

  font-size: 0.9rem;
  margin-top: 1.25rem;
  text-align: center;
}

    

@media (max-width: 768px) {
#schedule h3 {
  font-size: 1.1rem;
}

#schedule .venue {
  font-size: 1.1rem;
}
}


   
    /* ===== Scroll Reveal（ブラーイン） ===== */
    .reveal{
      opacity: 0; filter: blur(12px); transform: translateY(12px);
      transition: opacity 800ms ease, filter 1000ms ease, transform 800ms ease;
      will-change: opacity, filter, transform;
      transition-delay: var(--reveal-delay, 0ms);
    }
    .reveal.is-visible{ opacity: 1; filter: blur(0); transform: none; }
    .reveal.fade-up{ transform: translateY(16px); }
    .reveal.fade-left{ transform: translateX(16px); }
    .reveal.fade-right{ transform: translateX(-16px); }
    .reveal.scale-in{ transform: scale(.96); }

    /* ===== Content ===== */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* スマホ・タブレット対応 */
@media (max-width: 1024px) {
  :root {
    --container: 48rem; /* 約768px */
  }
}

@media (max-width: 768px) {
  :root {
    --container: 36rem; /* 約576px */
  }
}

@media (max-width: 480px) {
  :root {
    --container: 100%; /* スマホはフル幅で */
  }
}



    .section{ padding: 5rem 0; }
    .title{ margin:0 auto 1.2rem;font-weight: 400; font-size: clamp(1.4rem, 2.8vw, 1.9rem);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;
  border-bottom: 1px solid rgba(214,177,90,.18);
  background: rgba(0,0,0,.28);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  border-radius: 0; /* 千重子は角丸しない寄り */
}


.news-date{color: var(--text-main);
  letter-spacing:.08em;
  opacity:.8;
}

.news-title{color: var(--text-main);
  line-height:1.6;
  text-decoration:none;
}

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

.latest_more{margin: auto;text-align: center;}


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

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

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


} /*end*/


/* ===== Footer Layout Upgrade ===== */


.site-footer{ font-size: 0.82rem; background: rgba(24,24,27,.5); border-top: 1px solid var(--line); padding: 3rem 0 6rem; margin-top: 3rem;}

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


.footer-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-logo img {
  max-width: 260px;
  height: auto;
}

.footer-credit {
  max-width: 900px;
  margin: 0 auto;
}

.footer-credit p {
  font-size: 0.8rem;
  line-height: 1.8;
  text-align: center;
}

/* PCは通常表示 */
.credit-sep{
  margin: 0 .4em;
}

.footer-sns img {
  transition: transform 0.3s ease;
}
.footer-sns img:hover {
  transform: translateY(-3px);
}

.footer-copy {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  opacity: 0.7;
}


#intro,#sns,#caststaff{background-image: url("../img/1.jpg");
             background-repeat: repeat;}


h2{font-size: clamp(1.6rem, 2.4vw, 2rem);}
h3{margin:2rem auto;text-align: center;font-size: clamp(1.3rem, 2vw, 1.8rem);color: var(--text-main);}

#story,#schedule{background: var(--panel);}

#intro p,#story p{}

@media (max-width: 768px) {
#intro h3{font-size: 1.1rem;  letter-spacing: 0;}
    
    
      .footer-credit p{
    line-height: 1.88;
    font-size: 0.85rem;
  }
     .credit-sep{
    display: block;
    height: 0;
    margin: 8px 0 0;
    content: "";
  }

  .credit-sep::after{
    content: "";
  }
 
    
}


/* ========== CAST & STAFF ========== */


.cast-section .title {width: 100%;
  margin-bottom: 2.4rem;
}

.cast-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 各「行」コンテナ */
.cast-row {
  display: flex;
  flex-wrap: wrap;
gap: 0;
}

/* 共通カードスタイル（9人分すべて） */
.cast-card {/*border: 1px solid #ff3300;*/
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* どのカードも同じ見た目に */
  padding: 1rem;
  gap: 0.7rem;
 border-radius: 1rem;
height: 100%; /* ← grid の中で高さが揃う */
}

/* ★ 全キャスト写真のサイズを完全固定で統一 ★ */
.cast-card img {margin: auto;
  width: 260px;
  height: 260px;          /* ← 全員この高さに統一（PC用） */

}


/* 名前・テキスト */
.cast-card-name {
  margin: 0 auto;
  font-size: 2rem;
  color: var(--text-main);font-weight: 600;
}
.cast-card-prof {width: 300px;padding: 0.5rem;
  margin: 0 auto;
  font-size: .88rem;letter-spacing: 0;
  line-height: 1.4;
}
.cast-card-prof-hana {width: 100%;padding: 0.5rem;
  margin: auto;
  font-size: .88rem;letter-spacing: 0;
  line-height: 1.4;
}
/* 花總まり*/
.cast-card--featured {
  padding: 1.3rem 1.3rem 1.4rem;
}
.cast-card-comment {
  margin: .2rem 0 1rem;
  line-height: 1.9;
      background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);color: var(--text-main);padding: 2rem;
}


.cast-card-profile {
  margin: 0;
}
.cast-card-profile dt {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.cast-card-profile dd {
  margin: 0;
line-height: 1.4;
}

/* PC時の横幅制御
   2列行 → half
   3列行 → third
   1列行 → full
*/
.cast-card--half {
  flex: 0 0 50%;
}
.cast-card--third {
 flex: 0 0 33.333%;
}
.cast-card--full {
  flex: 0 0 100%;
}


.cast-card-role{
  font-size: .85rem;
  letter-spacing: .12em;
  opacity: .7;
  margin: 0 auto;text-align: center;
}




/* スマホは全部一列 */
@media (max-width: 992px) {
  .cast-row {
    flex-direction: column;
  }
  .cast-card,
  .cast-card--half,
  .cast-card--third,
  .cast-card--full {padding:1.5rem 0;
    flex: 0 0 100%;
  }
    
    
    
    .cast-card-comment {padding: 1rem;line-height: 1.6;
}
 
}
   /* スマホは全部一列 */
@media (max-width: 768px) { 
    .cast-card-comment {padding: 0.5rem;line-height: 1.6;}
}


/* 名前・テキスト */

#staff{
  margin: 6rem auto 0;text-align: center;
}
.staff-name {  font-family:
    "Shippori Mincho",
    "Noto Serif JP",
    "Hiragino Mincho ProN",
    serif;line-height: 1.4;
  margin: 0 auto 2rem;text-align: center;
  font-size: 1.5rem;color: var(--text-main);font-weight: 600;
}
.staff-name span{  display: block;
  width: 100%;
  margin-bottom: .35rem;
  font-size: 0.88rem;
  color: var(--accent);
  letter-spacing: 0.14em;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  opacity: .95;
}

.staff-name--s{
  font-size: 1.2rem; /* 約80% */
  margin-bottom: 1.6rem;
}

.staff-name--s span{
  font-size: 0.7rem;
}


/* ==============================
   PROFILE POPUP (quiet & classy)
============================== */

/* ===== PROFILE button (quiet style) ===== */

.cast-prof-open{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;   /* ← 中央寄せ */
  gap: .55rem;

  margin: 0px auto 14px;    /* ← 中央寄せ */
  text-align: center;
}

.cast-prof-open__label{
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 0 0 .15rem .25rem;
border-TOP: 1px solid rgba(255,255,255,0.42);
  border-bottom: 1px solid rgba(255,255,255,0.42);
}

/* ▼マーク */
.cast-prof-open__mark{
  width: .55rem;
  height: .55rem;
  display: inline-block;

  border-right: 1px solid rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.8);

  transform: rotate(45deg);
  opacity: .95;
  transition: transform .2s ease;
}

.cast-prof-open:hover{
color:#FFF;
}

.cast-prof-open:hover .cast-prof-open__mark{
  transform: rotate(45deg) translateY(2px);
}

.profile-popup{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: min(6vh, 56px) 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.profile-popup.is-open{
  opacity: 1;
  pointer-events: auto;
}

.profile-popup__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.profile-popup__panel{
  position: relative;
  width: min(920px, 92vw);
  background: rgba(24,24,27,0.85);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
  transform: translateY(6px);
  transition: transform 220ms ease;
}
/* パネルを縦スクロール可能に */
.profile-popup__panel{
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.profile-popup.is-open .profile-popup__panel{
  transform: translateY(0);
}

.profile-popup__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  border-radius: 999px;
  color: var(--text-main);
  display: grid;
  place-items: center;
}

.profile-popup__close:hover{
  background: rgba(255,255,255,0.08);
}

.profile-popup__grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 18px;
}

.profile-popup__media{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
}

.profile-popup__img{
  display: block;
  width: 100%;
  height: auto;
}

.profile-popup__content{
  padding: 4px 6px 8px;
}

.profile-popup__name{
  margin: 4px 0 10px;
  font-size: 2rem;
  letter-spacing: .06em;
}

.profile-popup__body p{
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: left;
}

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

  .profile-popup__grid{
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .profile-popup__name{
    font-size: 1.05rem;
    margin-bottom: 8px;
  }

  .profile-popup__body p{
    font-size: .92rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
  }
  /* 写真サイズ縮小 */
  .profile-popup__media{
    max-width: 220px;
    margin: 0 auto 10px;
  }

  .profile-popup__img{
    width: 100%;
    height: auto;
  }

}
/* カード側のプロフィール本文は“POPUP用に保持して非表示” */
.cast-card .cast-card-prof,
.cast-card .cast-card-prof-hana{
  display: none;
}

/*-------------------------------------------------------------------*/
.mt-1, .pt-1 {
    padding-top: 0.5em;
}
.mt-2, .pt-2 {
    padding-top: 1em;
}
.mt-3, .pt-3 {
    padding-top: 1.5em;
}
.mt-4, .pt-4 {
    padding-top: 2em;
}
.mt-5, .pt-5 {
    padding-top: 2.5em;
}
.mb-1, .pb-1 {
    padding-bottom: 0.5em;
}
.mb-2, .pb-2 {
    padding-bottom: 1em;
}
.mb-3, .pb-3 {
    padding-bottom: 1.5em;
}
.mb-4, .pb-4 {
    padding-bottom: 2em;
}
.mb-5, .pb-5 {
    padding-bottom: 2.5em;
}
/* ------------------------------------------------------------------- 
 * e.t.c
/*-------------------------------------------------------------------*/
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
/* ------------------------------------------------------------------- 
 * responsive:
 *  e.t.c
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
} /*end*/


/* ===== Newsletter（メルマガ） ===== */


.newsletter {
  text-align: center;
  padding: 2.2rem 1rem 0;
  margin:0 auto 2rem;
  border-radius: 1rem;
  background: rgba(0,0,0,0.24);
  backdrop-filter: blur(6px);
}

.newsletter h3 {
  margin: 0 0 .6rem;
  font-size: 1.25rem;
  letter-spacing: .04em;

}

.newsletter p {
  margin: 0 auto 1.1rem;
text-align: center;
  font-size: .9rem;
}

.newsletter-btn {font-weight: 600;
  display: inline-block;
  padding: .65rem 1.2rem;
  border-radius: .75rem;
  border: 1px solid #d6c48b;
  background: linear-gradient(
    180deg,
    #f7e9c9 0%,
    #e8c79e 50%,
    #e8c79e 100%
  );
  color: #4a3f2a;
  font-size: 1.2rem;
  letter-spacing: .04em;
  transition: background .25s ease, transform .2s ease;
}

.newsletter-btn:hover {
  background: linear-gradient(
    180deg,
    #fff4dd 0%,
    #f7e9c9 50%,
    #e5d6aa 100%
  );
  transform: translateY(-2px);
}


 /* フッターバナー------------------------ */
 #newsletter-banner {
  z-index: 999;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #fffae6;
  padding: 15px 20px;
  border-radius: 10px 0 0 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(100%);
  display: flex;
  align-items: center;

  animation: showBanner 1s ease forwards;
  animation-delay: 7s; /* 7秒後 */
}

@keyframes showBanner {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#newsletter-banner input[type="checkbox"] {
  display: none; /* チェックボックスを画面上から完全に消す */
}

#closeBanner:checked ~ .banner-inner {
  display: none; /* クリックで消える */
}
.banner-inner {color: #333;margin: auto;}
.banner-cta {
  background: #c93a57;
  color:#F9F9F9;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}

.banner-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}



    #feed {
    width: 100%;
}
#feed .entry {
    margin-left: 30px;
}
#feed .entry {
    line-height: 1.2;
    padding: 20px;
    margin: 0;
    text-align: left;
    margin-bottom: 8px;
    border-bottom: 1px solid #999; 
}
#feed .entry  a, #feed .entry a:visited {
    color: #eee;
    text-decoration: none;
}
#feed .entry .entry-date {
    color: var(--accent);
    margin-right: 10px;
}
    
   @media screen and (max-width:768px) {

#feed {
        width: 100%;
    }
    #feed ul.entry {
        margin: 0 auto;
    }
    #feed ul.entry li {
        line-height: 1.8;
    }
    #feed ul.entry li .entry-date {
        display: block;
    }
	
} /*end*/ 
    

/* NOTICE */
.notice{
  width: 97%;
  margin: 2.5rem auto 0;
  padding: 1.4rem 1.2rem; /* articleと合わせる */
  border: 1px solid rgba(198,168,90,0.25); /* articleと合わせる */
  border-radius: 1.1rem;                   /* articleと合わせる */
  background: rgba(18, 25, 21, 0.95);      /* articleと合わせる */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.notice-title{
  margin: 0 auto 0.8rem;
  text-align: center;
  font-family: "EB Garamond", serif;
  letter-spacing: 0.2em;
  font-weight: 400;
  font-size: 1.4rem;
}


.notice-lead{text-align: center;
  margin: 2rem auto 16px;
  font-size: clamp(1.2rem, 1.2vw, 1.6rem);
  letter-spacing: .16em;
  line-height: 1.15;
  color: #e5d6a4;
  position: relative;
  padding-bottom: 10px;
}

.notice-lead::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:60px;
  height:1px;
  background: linear-gradient(
    90deg,
    rgba(212,185,110,0),
    #d4b96e,
    rgba(212,185,110,0)
  );
}



.notice-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-list li{font-size:0.9rem;text-align: left;
  position: relative;
  padding-left: 1.6em;   /* ※ぶんの余白 */
  margin-bottom: .6em;
  line-height: 1.7;
}

/* ※をCSSで出す */
.notice-list li::before{
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .7;
}


@media (max-width: 1024px){
  .notice{
    padding: 1.2rem 0.9rem;
    border-radius: 0.9rem;
  }
  .notice-title{ font-size: 1.2rem; }
  .notice-list{ font-size: 0.9rem; line-height: 1.85; }

}
/* ======================
   Quiet Link (Unified)
====================== */
.link-quiet{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  letter-spacing: .18em;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: opacity .2s ease;
}

.link-quiet__mark{
  width: .5rem;
  height: .5rem;
  border-right: 1px solid var(--accent);
  border-top: 1px solid var(--accent);
  transform: rotate(45deg); /* ＞向き */
  margin-top: 1px;
  transition: transform .2s ease;
}

.link-quiet:hover{
  opacity: .7;
}

.link-quiet:hover .link-quiet__mark{
  transform: rotate(45deg) translateY(3px);
}

/* ======================
MOVIE
====================== */

.agathaMovie{
  padding:90px 0 80px;
  background:#051e08;
}

.agathaMovieInner{
  width:min(900px, calc(100% - 30px));
  margin:0 auto;
}

.movieTitle{
  text-align:center;
  font-family:"EB Garamond", serif;
  font-size:clamp(1.9rem,3vw,2.4rem);
  letter-spacing:.18em;
  margin-bottom:30px;
  color:#e5d6a4;
}

.movieFrame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.movieFrame iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/* ======================
公演概要
====================== */

/* ======================
   HOSHITORI
====================== */

.agathaSchedule{
  padding: 80px 0;
  color: #f3efe6;
}

.scheduleWrap{
  width: min(1000px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: 34px;
}

.scheduleBlock{
  padding: 28px 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 18px; 
}

.scheduleHead{
  text-align: center;
  margin-bottom: 20px;
}

.scheduleTitle{
  margin: 0 0 16px;
  font-family: "EB Garamond", serif;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: .16em;
  line-height: 1.15;
  color: #e5d6a4;
  position: relative;
  padding-bottom: 10px;
}

.scheduleTitle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:60px;
  height:1px;
  background: linear-gradient(
    90deg,
    rgba(212,185,110,0),
    #d4b96e,
    rgba(212,185,110,0)
  );
}

.scheduleVenue{
  margin: 15px 0 0;
  padding: 0;
  text-align: center;
font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  line-height: 1.7;
}

.schedulePeriod{
  margin: 8px 0 0;
  padding: 0;
  text-align: center;
font-size: clamp(1.4rem, 1.5vw, 1.5rem);
  line-height: 1.7;
  opacity: .82;
}

.venueBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:10px;
  padding:6px 14px;
  font-size:.8rem;
  color:#d8c07a;
  border-bottom:1px solid rgba(214,196,139,.5);
  text-decoration:none;
  transition:.25s;
}

.venueBtn:hover{
  background:#d8c07a;
  color:#051e08;
}

/* 共通テーブル */
/* ======================
   HOSHITORI（調整版）
====================== */

.hoshitoriTable{margin: 0 auto;
  width: 96%;
  border-collapse: collapse;
  table-layout: fixed;

  /* ★ なじませる */
  background:
    linear-gradient(rgba(10,10,10,.78), rgba(10,10,10,.78)),
    url("../img/1.jpg") repeat;

  color: #e6d8c3;
  border: 1px solid rgba(255,255,255,.12);
}



/* 全体文字サイズを落とす */
.hoshitoriTable th,
.hoshitoriTable td{
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  vertical-align: middle;

  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 500;
  font-size: 0.88rem;  /* ★小さく */
  letter-spacing: 0.02em;
}

/* ● */
.hoshitori-dot{
  font-size: 1.1rem;  /* ★少し小さく */
  color: #fff;        /* ★白に（サイトに馴染む） */
}
/* 貸切 */
.hoshitori-chartered{
  color: #dcdad1;
  font-size: .8rem;
  letter-spacing: .08em;
}
/* 休演 */
.hoshitori-off{
  color: rgba(230,216,195,.5);
  font-size: 0.8rem;
  letter-spacing: .08em;
}

/* ----------------------
   PC
---------------------- */

.hoshitoriTable--pc th,
.hoshitoriTable--pc td{
  height: 48px;  /* ★高さも少し詰める */
  padding: 4px;
}

.hoshitoriTable--pc .monthHead{
  font-size: 0.95rem;
  font-weight: 600;
}

.hoshitoriTable--pc .dateHead span{
  font-size: 1rem;  /* ★かなり抑え */
  margin-bottom: 2px;display: block;
}

.hoshitoriTable--pc .dateHead small{
  font-size: 0.75rem;
}

.hoshitoriTable--pc .timeHead{
  font-size: 0.85rem;
}

/* ----------------------
   SP
---------------------- */



.hoshitoriTable--sp th,
.hoshitoriTable--sp td{
  height: 42px;
  padding: 4px;
  font-size: 0.82rem;  /* ★さらに少し小さく */
}

.hoshitoriTable--sp .rowDate{
  font-size: 0.85rem;
}

.hoshitoriTable--sp .rowWeek{
  font-size: 0.8rem;
}

/* ----------------------
   土日（なじませ）
---------------------- */

.hoshitoriTable .sat{
  color: #7aa2d8;   /* ★落ち着いた青 */
}

.hoshitoriTable .sun{
  color: #d889a8;   /* ★落ち着いたピンク */
}

.pcOnly{ display: block; }
.spOnly{ display: none; }

@media (max-width: 992px){
	
	.hoshitoriTable{
  width: 100%;}
		
  .agathaSchedule{
    padding: 56px 0;
  }

  .scheduleWrap{
    width: 100%;
    margin: 0;
    gap: 24px;
  }

  .scheduleBlock{
    padding: 22px 14px;
    border-radius: 14px;
  }

	
  .scheduleTitle{
    font-size: 1.35rem;
    letter-spacing: .12em;
  }

  .scheduleVenue{
    font-size: .94rem;
  }

  .schedulePeriod{
    font-size: .88rem;
  }

  .pcOnly{ display: none; }
  .spOnly{ display: block; }

  .venueBtn{
    margin-left: 0;
    margin-top: 6px;
  }
}


.hoshitori-atten{margin:6px 0 6px 25px;
  text-align: left;
font-size:0.8rem;
  line-height: 1.2;opacity: 0.9;
}


.ticketnotice-list{
  list-style: none;
  padding: 0;
 margin:6px 0 6px 25px;
}

.ticketnotice-list li{font-size:0.8rem;text-align: left;
  position: relative;
  padding-left: 1.2em;   /* ※ぶんの余白 */
  margin-bottom: .6em;
  line-height: 1.7;opacity: 0.9;
}

/* ※をCSSで出す */
.ticketnotice-list li::before{
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .7;
}



@media (max-width: 992px){
	
	.hoshitori-atten{margin:6px;
  text-align: left;
font-size:0.8rem;
  line-height: 1.2;opacity: 0.9;
}
	
.ticketnotice-list{
0;
 margin:6px;
}

	
	 .ticketnotice-list{ font-size: 0.9rem; line-height: 1.85; }
}/**/
	
/* info */
.scheduleInfo{
  margin-top: 28px;
  text-align: center;
}

.ticketPrice,
.ticketMeta{
  margin: 0;
  padding: 0;
  text-align: center;
}


.ticketPrice{
  font-size: 1rem;
  line-height: 1.8;
}

.ticketPrice strong{
  font-size: 1.08rem;
  font-weight: 700;
}

.ticketMeta{
  margin-top: 20px;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: .93rem;
  line-height: 1.8;
  opacity: .95;
  color: #f3efe6;
}

.ticketMeta span{
  display: block;          /* ← これがポイント */
  margin-bottom: .25em;    /* 下に少し余白 */
  color: #d8c07a;
  font-weight: 700;
  letter-spacing: .06em;
}


/* ======================
   TICKET BUTTONS
   縦並び・高級感あり
====================== */
.ticketBtns{
  width: min(480px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

  /* ★ Macっぽい余白 */
  height: 44px;
  padding: 0 18px;

  /* ★ 角ほんのり */
  border-radius: 8px;

  /* ★ フラット */
  background: transparent;
  border: 1px solid rgba(214,196,139,.35);

  /* ★ 色も少し抑え */
  color: rgba(243,239,230,.92);

  font-family: "IBM Plex Sans JP", sans-serif;
  font-size:1rem;
  font-weight: 500;
  letter-spacing: .08em;

  text-decoration: none;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .15s ease,
    color .2s ease;
}

/* 矢印（かなり控えめ） */
.ticketBtn::after{
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-top: 1px solid rgba(243,239,230,.6);
  border-right: 1px solid rgba(243,239,230,.6);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

/* hover：うっすら反応だけ */
.ticketBtn:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(214,196,139,.6);
  color: #fff;
  transform: translateY(-1px);
}

.ticketBtn:hover::after{
  transform: rotate(45deg) translate(1px,-1px);
}

@media (max-width: 768px){
	
	
  .ticketBtns{
    width: 100%;
    gap: 10px;
  }

  .ticketBtn{
    height: 42px;
    font-size: .88rem;
  }
}

  .ticketPG{font-size: 1rem;
margin: 10px 0;line-height: 1.4;
  }


/*リンク下線専用*/
.ticketMeta--link a{
  text-decoration: none;
  position: relative;
}

/* 常に薄い線 */
.ticketMeta--link a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .3; /* ←ここが薄さ */
  transform: scaleX(1);
  transition: opacity .25s ease, transform .25s ease;
}

/* ホバーで強調 */
.ticketMeta--link a:hover::after{
  opacity: 1;
  transform: scaleX(1.05);
}