@charset "UTF-8";

@media print {
  body {
    display: none !important;
  }
}


/* =========================================
   BASE / RESET
========================================= */
:root{
  --ink:#635c52;
  --muted: rgba(10,12,14,.62);

  --paper: url("../img/paper-texture.png");

  /* hero scroll var (JSで更新) */
  --bgScroll: 0px;
}

*{ box-sizing:border-box; }

/* NG: html,body{ height:100%; } はiOSで地雷になりがち */
html, body{
  height: auto;        /* ←追加 */
  min-height: 100%;    /* ←必要なら */
}

body{
  overflow-y: auto;    /* ←明示（保険） */
  -webkit-overflow-scrolling: touch;
}

body{
  margin:0;
  color: var(--ink);
  background:#f3f4f4;
  font-family:"tot-shizukamin-stdn", sans-serif;
  font-weight:400;
  font-style:normal;
}

img,svg{ max-width:100%; height:auto; vertical-align:middle; }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.9; }

/* PC/SP 表示切替（元CSS踏襲） */
.pc{ display:block; }
.sp{ display:none; }
@media (max-width:767px){
  .pc{ display:none; }
  .sp{ display:block; }
}

/* テーブル横はみ対策（特に schedule） */
table{ border-collapse:collapse; max-width:100%; }
@media (max-width:767px){
  .tableWrap,
  #schedule_table_sp,
  #schedule_table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================
   HERO
========================================= */
.hero{
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#cfd3d3;
}

/* layer order */
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__water{ position:absolute; inset:-10%; z-index:1; pointer-events:none; }
.fog{ position:absolute; inset:-35%; z-index:2; pointer-events:none; }
.hero__fx{ position:absolute; inset:-8%; z-index:3; pointer-events:none; }
.hero__inner{ position:relative; z-index:4; }

.hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform: scale(1.05) translate3d(0, var(--bgScroll), 0);
  will-change: transform;
  filter: saturate(.95) contrast(1.05);
}

/* sea shimmer */
.hero__water{
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 2px,
      rgba(255,255,255,0) 18px,
      rgba(255,255,255,0) 34px
    );
  mix-blend-mode: overlay;
  opacity:.24;
  filter: blur(1px);
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* fog overlays */
.fog{
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  will-change: transform, opacity;
}

.fog--a{
  background-image:url("../img/fog-a-desktop.png");
  mix-blend-mode: screen;
  opacity:.95;
  filter: blur(4px) brightness(1.6) contrast(1.15);
  animation:fogA 26s ease-in-out infinite alternate;
}

.fog--b{
  background-image:url("../img/fog-b-desktop.png");
  mix-blend-mode: overlay;
  opacity:.55;
  filter: blur(6px) contrast(1.35) saturate(.9);
  animation:fogB 18s ease-in-out infinite alternate;
}

@media (max-width:767px){
  .fog--a{ background-image:url("../img/fog-a-mobile.png"); }
  .fog--b{ background-image:url("../img/fog-b-mobile.png"); }
}

/* logo spot fog */
.fog--a::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(700px 420px at 50% 55%,
    rgba(255,255,255,.95),
    rgba(255,255,255,0) 72%
  );
  opacity:.95;
  filter: blur(16px);
  mix-blend-mode: screen;
  pointer-events:none;
  animation: fogSpot 10s ease-in-out infinite alternate;
}

/* vignette + grain */
.hero__fx{
  /* 既存をこの感じに差し替え（暗さ控えめ） */
  background:
    radial-gradient(1100px 720px at 50% 35%, rgba(255,255,255,.22), rgba(0,0,0,.32)),
    linear-gradient(180deg, rgba(10,20,22,.16), rgba(10,20,22,.10));
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;                /* bgの上、water/fogの下にしたいなら調整 */
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 40%, rgba(255,255,255,.18), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity: .85;
}

.hero__fx::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:url("../img/data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:overlay;
  animation: grain 2.2s steps(2) infinite;
}

/* hero inner */
.hero__inner{
  width:min(1040px, 92vw);
  display:grid;
  place-items:center;
  gap: 22px;
  padding: clamp(16px, 3vw, 40px);
}

.hero__meta{
  color: rgba(255,255,255,.86);
  line-height: 1.85;
  font-size: 14px;
  text-align:center;
  text-shadow: 0 12px 24px rgba(0,0,0,.25);
}

/* logo wrapper (blurは .logoFx に掛ける) */
.logoWrap{ display:grid; place-items:center; }
.logoFx{
  display:inline-block;
  --logoBlur: 0px;
  --logoBlurDur: 1200ms;
  filter: blur(var(--logoBlur)) drop-shadow(0 18px 30px rgba(0,0,0,.28));
  transition: filter var(--logoBlurDur) ease;
  will-change: filter;
}
.logo{
  width: min(520px, 78vw);
  height:auto;
  opacity: 0;
  transform: translate3d(0,18px,0) scale(.985);
  will-change: transform, opacity;
}

/* scroll hint */
.scrollHint{
  display:flex;
  gap:10px;
  align-items:center;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.78);
  letter-spacing:.18em;
  text-transform: uppercase;
  cursor:pointer;
  padding: 10px 12px;
  mix-blend-mode: overlay;
}
.scrollHint__chev{
  display:inline-block;
  font-size: 16px;
  line-height: 1;
  transform: rotate(90deg);
  opacity: .85;
  animation: chev 1.6s ease-in-out infinite;
}
.scrollHint__label{ font-size:12px; }

/* =========================================
   MAIN (paper bg full width)
========================================= */
.main{
  width:100%;
  background-color:#FBF7F1;
  background-image: var(--paper);
  background-repeat: repeat;
  background-position: center top;
}

/* セクションは100%・中身だけ1200 */
.section{
  width:100%;
  margin:0;
  padding: 0;
}
.inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
}

/* footer */
.footer{
  width:100%;
  padding: 56px 0 72px;
  text-align:center;
  color: #fff;
  background: #635c52;
}
.footer__title {
    margin-bottom: 10px;
    letter-spacing: .08em;
    font-size: 15px;
}
/* =========================================
   CONTENT: 既存HTMLのクラスを紙背景に馴染ませる
   （黒フェルト画像依存を外し、紙上に“面”を作る）
========================================= */



@media screen and (min-width: 767px) {
#mv_info,
.newsSection, .story, .story2, .story3, .comments{
  position:relative;
  padding: 0 0 2%;
}

}

@media screen and (max-width: 767px) {
#mv_info,
.story, .story2, .story3, .comments{
  position:relative;
  padding: 0 0 50px;
}
}


#mv_info{ padding: 5% 0 0; }

.story__content{
  position:relative;
  width: min(1200px, 92vw);
  margin: 0 auto;
  text-align:center;
}

/* 文字色を紙用に（元CSSは白文字前提だったため） */
.mv_info,
.story__subHeading,
.story__text,
.comments__text,
.ticketinfo,
.ticket_info{
  color: #000 !important;
}

/* “赤”を基調アクセントに（元CSSの orange-light を差し替え） */
.u-text-orange-light,
.u-text-orange-theme{
  color:#ad0003 !important;
}

/* mv_info */
.mv_info{
  font-weight:700;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing:.06em;
  line-height:40px;
  text-align:center;
}
.mv_info table{ margin: 0 auto; }
.mv_info td{ padding: 6px 0; }

/* story */
.story__subHeading{
  margin-top: 3%;
  font-weight:700;
  font-size: clamp(18px, 2vw, 28px);
  line-height:1.6;
}
.story__text {
    margin-top: 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 2.2;
    text-align: center;
}



.story__text p{ margin:0; }

/* news list */
.date{ color:#ad0003; }

/* caret icon (accordion cssに準拠) */
.dli-caret-circle-fill-right{
  display:inline-block;
  vertical-align:middle;
  color:#ad0003;
  line-height:1;
  position:relative;
  width: .9em;
  height: .9em;
  border: .075em solid currentColor;
  background: currentColor;
  border-radius: 50%;
  box-sizing: content-box;
  margin-right: 6px;
}
.dli-caret-circle-fill-right::before{
  content:'';
  color:#fff;
  width:0;height:0;
  border-style:solid;
  border-color:transparent;
  border-width:.18em .31177em;
  border-left-color: currentColor;
  border-right:0;
  transform: translateX(15%);
  position:absolute;
  inset:0;
  margin:auto;
}

/* cast grids (最低限) */
.gridlistcast {
  display: flex;          /* ←これ追加 */
  justify-content: center;
  gap: 18px;
  margin: 5% 0;
  padding: 0;
  list-style: none;
}

.gridlistcast {
  display: flex;
  justify-content: center;
  align-items: stretch;
}


.cellcast, .cellcast2{
  text-align:center;
}
.cellcast img, .cellcast2 img{
  width:100%;
  height:auto;
}

/* profile buttons（既存の class を崩さない程度に） */
.profilebtn, .profilebtn2, .accessbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border-radius: 8px;
  padding: 10px 18px;
  background:#b98442;
  color:#fff !important;
  font-weight:700;
}
.profilebtn:hover, .profilebtn2:hover, .accessbtn:hover{ opacity:.9; }

/* ticket box */

/* ticket box */
.box30 {
    margin: 2em auto;
    background: linear-gradient(180deg, #fffcf7, #efe3ce);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    width: min(760px, 92vw);
    padding: 18px 16px;
    border-radius: 22px;
}


@media screen and (min-width: 767px) {
.box30 .box-title{
  padding: 6px 10px;
  text-align:center;
  color:#214c5f;
  font-weight:normal;
  font-size: 25px !important;
  letter-spacing:.05em;
}
}

@media screen and (max-width: 767px) {
.box30 .box-title{
  padding: 6px 10px;
  text-align:center;
  color:#214c5f;
  font-weight:normal;
  font-size: 18px !important;
  letter-spacing:.05em;
}
}

.box30 p{ padding: 10px 0; margin:0; font-size: 14px; font-weight:400; }

.button-55 {
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: min(420px, 90%);
    margin: 0 auto;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background-color: #003f37;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 15px;
    height: 65px;
    line-height: 23px;
}
.button-55:hover{ background-color:#026c5f; }

/* schedule tables（最低限見やすく） */
.table_001, .table_001sp{
  width:100%;
  border: 1px solid rgba(10,12,14,.16);
  background: rgba(255,255,255,.65);
}
.table_001 th, .table_001 td,
.table_001sp th, .table_001sp td{
  border: 1px solid rgba(10,12,14,.10);
  padding: 6px 8px;
  text-align:center;
  font-weight:700;
  font-size: 12px;
}
.blue{ color:#1f5aa6; }
.pink{ color:#b23b6a; }

/* notice */
.notice{
  width: min(1200px, 92vw);
  margin: 0 auto;
  line-height: 1.9;
}
.notice a{ color:#ad0003; }

/* accordion (添付CSS互換) */
.l-accordion input{ display:none; }
.l-accordion .l-accordion-switch{
  position:relative;
  display:block;
  background-color:#b98442;
  padding: 14px 0 10px;
  cursor:pointer;
  color:#fff;
  margin-top: 15px;
  text-align:center;
  font-weight:700;
  border-radius: 10px;
  letter-spacing: .08em;
  width: min(520px, 92vw);
  margin-left:auto;
  margin-right:auto;
}
.l-accordion .l-accordion-switch::before,
.l-accordion .l-accordion-switch::after{
  content:'';
  position:absolute;
  display:block;
  width: 14px;
  height: 3px;
  background:#fff;
  top:50%;
  right: 18px;
  transform: translateY(-50%);
}
.l-accordion .l-accordion-switch::after{
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}
.l-accordion input:checked ~ .l-accordion-switch::after{
  transform: translateY(-50%) rotate(0deg);
}

.l-accordion .l-accordion-inside{
  height:0;
  opacity:0;
  transition:.5s;
  padding-top:0;
  pointer-events:none;
  margin-top: 18px;
  text-align:left;
  font-size: 14px;
  color: rgba(10,12,14,.90);
}
.l-accordion input:checked ~ .l-accordion-inside{
  height:auto;
  opacity:1;
  pointer-events:auto;
}
table.news{
  width:100%;
  font-size: 14px;
  font-weight:400;
}

/* =========================================
   ANIMATION: “全コンテンツを同じように出す”
   - JSは section.note に is-ink を付けるだけでOK
========================================= */

/* デフォルトは表示 */
.fadeup{ opacity:1; transform:none; filter:none; }

/* 対象ブロック内だけ、トリガー待ちで隠す */
#mv_info .fadeup,
.story .fadeup,
.story2 .fadeup,
.story3 .fadeup,
.comments .fadeup,
.footer.note .fadeup{
  opacity:0;
  transform: translateY(40px);
  filter: blur(6px);
  transition:
    opacity 1.4s ease,
    transform 1.6s cubic-bezier(.18,.9,.2,1),
    filter 1.8s ease;
}

/* そのブロックに is-ink が付いたら出す */
#mv_info.is-ink .fadeup,
.story.is-ink .fadeup,
.story2.is-ink .fadeup,
.story3.is-ink .fadeup,
.comments.is-ink .fadeup,
.footer.note.is-ink .fadeup{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}


/* 見出しレター（data-animation-trigger）も自動で動かす */
.c-heading{ overflow:hidden; }
.c-heading__letter{ display:inline-block; transform: translateY(105%); }

#mv_info.is-ink [data-animation-trigger] .c-heading__letter,
.story.is-ink [data-animation-trigger] .c-heading__letter,
.story2.is-ink [data-animation-trigger] .c-heading__letter,
.story3.is-ink [data-animation-trigger] .c-heading__letter,
.comments.is-ink [data-animation-trigger] .c-heading__letter{
  transform: translateY(0);
  transition: transform 1.2s cubic-bezier(.165,.84,.44,1);
}


.section.note.is-ink [data-animation-trigger] .c-heading__letter{
  transform: translateY(0);
  transition: transform 1.2s cubic-bezier(.165,.84,.44,1);
}
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(1){ transition-delay: .10s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(2){ transition-delay: .18s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(3){ transition-delay: .26s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(4){ transition-delay: .34s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(5){ transition-delay: .42s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(6){ transition-delay: .50s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(7){ transition-delay: .58s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(8){ transition-delay: .66s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(9){ transition-delay: .74s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(10){ transition-delay: .82s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(11){ transition-delay: .90s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(12){ transition-delay: .98s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(13){ transition-delay: 1.06s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(14){ transition-delay: 1.14s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(15){ transition-delay: 1.22s; }
.section.note.is-ink [data-animation-trigger] .c-heading__letter:nth-child(16){ transition-delay: 1.30s; }

/* =========================================
   LOGO: appear + optional float
========================================= */
@media (prefers-reduced-motion: no-preference){
  body.is-ready .logo{
    animation: logoIn 1.2s cubic-bezier(.2,.8,.2,1) both;
  }
  /* ふわふわ動かす版（bodyに .logo-still が無いときだけ） */
  body.is-ready:not(.logo-still) .logo{
    animation:
      logoIn 1.2s cubic-bezier(.2,.8,.2,1) both,
      logoFloat 8.5s ease-in-out 1.2s infinite;
  }
}

/* hero bg breathe */
@media (prefers-reduced-motion: no-preference){
  .hero__bg img{ animation: bgDrift 9s ease-in-out infinite alternate; }
  .hero__water{ animation: waterShimmer 6.5s ease-in-out infinite alternate; }
}

@keyframes bgDrift{
  0%   { transform: scale(1.05) translate3d(0, var(--bgScroll), 0); }
  100% { transform: scale(1.07) translate3d(0, var(--bgScroll), 0); }
}
@keyframes waterShimmer{
  0%   { transform: translate3d(-1.2%, 0.4%, 0) rotate(-0.4deg); }
  100% { transform: translate3d( 1.2%,-0.4%, 0) rotate( 0.4deg); }
}
@keyframes fogA{
  0%   { transform: translate3d(-6%,  3%, 0) scale(1.12) rotate(-0.8deg); }
  50%  { transform: translate3d( 2%, -3%, 0) scale(1.16) rotate( 0.4deg); }
  100% { transform: translate3d( 6%,  2%, 0) scale(1.14) rotate( 0.9deg); }
}
@keyframes fogB{
  0%   { transform: translate3d( 7%, -4%, 0) scale(1.18) rotate( 1.2deg); }
  50%  { transform: translate3d(-3%,  4%, 0) scale(1.22) rotate(-0.6deg); }
  100% { transform: translate3d(-7%, -3%, 0) scale(1.20) rotate(-1.1deg); }
}
@keyframes fogSpot{
  0%   { transform: translate3d(-6%, 2%, 0) scale(1.00); }
  50%  { transform: translate3d( 4%,-3%, 0) scale(1.12); }
  100% { transform: translate3d( 6%, 3%, 0) scale(1.05); }
}
@keyframes grain{
  0%{ transform:translate3d(-1%, -1%, 0); }
  25%{ transform:translate3d(1%, -1%, 0); }
  50%{ transform:translate3d(1%, 1%, 0); }
  75%{ transform:translate3d(-1%, 1%, 0); }
  100%{ transform:translate3d(-1%, -1%, 0); }
}
@keyframes logoIn{
  from{ opacity:0; transform: translate3d(0,18px,0) scale(.985); filter: blur(6px); }
  to  { opacity:1; transform: translate3d(0,0,0)   scale(1);    filter: blur(0); }
}
@keyframes logoFloat{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  25%  { transform: translate3d(-12px,-6px,0) rotate(-0.18deg); }
  50%  { transform: translate3d(  0px,-12px,0) rotate(0.12deg); }
  75%  { transform: translate3d( 12px,-6px,0) rotate(0.22deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}
@keyframes chev{
  0%,100%{ transform: rotate(90deg) translateX(0); opacity:.7; }
  50%{ transform: rotate(90deg) translateX(8px); opacity:1; }
}

/* =========================================
   prefers-reduced-motion
========================================= */
@media (prefers-reduced-motion: reduce){
  .hero__bg img, .hero__water, .fog, .hero__fx::after,
  .scrollHint__chev{
    animation:none !important;
  }
  .logo{ opacity:1; transform:none; animation:none !important; }
  .fadeup{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .c-heading__letter{ transform:none !important; transition:none !important; }
}

.maintitle{
  font-size: 35px;
}


.footer .maintitle{
  font-size: 25px;
}


.txts {
    font-size: 16px;
}


.txtsmall {
    font-size: 16px;
    line-height: 20px;
    margin-top: 10px;
}


.footer .txtsmall {
    font-size: 13px;
    line-height: 20px;
}

.story_tit.c-heading__letter{
  --tBlur: 0px;
  --tDur: 1400ms;
  --tFocus: 1; /* 1=通常, 0.9=少し眠い */

  filter: blur(var(--tBlur)) contrast(calc(1.08 * var(--tFocus)));
  transition: filter var(--tDur) ease;
  will-change: filter;
  font-size: 85px;
  color: #214c5f;
  font-weight: 400;
  margin-bottom: -20px;
}


/* 見出し系フォント（Typekit側） */
.story__heading,
.story_tit, .story_tit_staff, .story_tit_staff2, .story_tit_ticket{
font-family: "bodega-serif", serif;
font-weight: 300;
font-style: normal;
}




/* ぼけ＆ピント */
.story_tit.c-heading__letter .focusFx{
  display:inline-block;
  --tBlur: 0px;
  --tDur: 1400ms;
  --tShift: 0px;

  filter: blur(var(--tBlur)) contrast(1.06);
  transform: translate3d(var(--tShift), 0, 0);
  transition:
    filter var(--tDur) ease,
    transform calc(var(--tDur) * 0.75) ease; /* ★transformだけ少しキビキビ */
  will-change: filter, transform;
}



/* =========================
   Comment button (fits your site)
   target: <a class="buttonneon button--1 profilebtn">...</a>
========================= */
a.buttonneon.profilebtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 46px;
    padding: 0 18px;
    border-radius: 0;
    /* border: 1px solid rgba(140, 104, 58, .55); */
    background: linear-gradient(180deg, rgba(210,180,120,.30), rgba(125, 88, 44, .18)),
    radial-gradient(120px 60px at 35% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    color: rgba(20,18,16,.92);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* box-shadow: 0 10px 24px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .20); */
    backdrop-filter: blur(2px);
    -webkit-tap-highlight-color: transparent;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
    color: #635c52 !important;
    width: 100%;
    margin-top: 20px;
}
/* 中の要素は“飾り”扱い：位置調整だけ */
a.buttonneon.profilebtn .button__wrapper{
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  /* 微グレイン＋ムラ */
  opacity:.18;
  mix-blend-mode: multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ボタン文字 */
a.buttonneon.profilebtn .button__box{
  position: relative;
  z-index: 1;
  font-size: 12px;
  line-height: 1;
}

/* hover/focus：浮き上がり＋淡い光 */
a.buttonneon.profilebtn:hover,
a.buttonneon.profilebtn:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(170, 125, 60, .75);
}

/* 外周の“霧っぽい”発光（やりすぎない） */
a.buttonneon.profilebtn::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(80% 120% at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 65%);
  filter: blur(10px);
  transition: opacity .35s ease;
}
a.buttonneon.profilebtn:hover::after,
a.buttonneon.profilebtn:focus-visible::after{
  opacity: .55;
}

/* クリック感 */
a.buttonneon.profilebtn:active{
  transform: translateY(0px) scale(.99);
}

/* モバイルで少し大きく */
@media (max-width: 767px){
a.buttonneon.profilebtn {
    min-width: 180px;
    height: 48px;
    margin-bottom: 0;
}
  a.buttonneon.profilebtn .button__box{
    font-size: 13px;
  }
}


/* 中の要素は“飾り”扱い：位置調整だけ */
a.buttonneon.profilebtn2 .button__wrapper{
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  /* 微グレイン＋ムラ */
  opacity:.18;
  mix-blend-mode: multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ボタン文字 */
a.buttonneon.profilebtn2 .button__box{
  position: relative;
  z-index: 1;
  font-size: 12px;
  line-height: 1;
}

/* hover/focus：浮き上がり＋淡い光 */
a.buttonneon.profilebtn2:hover,
a.buttonneon.profilebtn2:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(170, 125, 60, .75);
}

/* 外周の“霧っぽい”発光（やりすぎない） */
a.buttonneon.profilebtn2::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(80% 120% at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 65%);
  filter: blur(10px);
  transition: opacity .35s ease;
}
a.buttonneon.profilebtn2:hover::after,
a.buttonneon.profilebtn2:focus-visible::after{
  opacity: .55;
}

/* クリック感 */
a.buttonneon.profilebtn2:active{
  transform: translateY(0px) scale(.99);
}

/* モバイルで少し大きく */
@media (max-width: 767px){
  a.buttonneon.profilebtn2{
    min-width: 180px;
    height: 48px;
  }
  a.buttonneon.profilebtn2 .button__box{
    font-size: 13px;
  }
}


.cast-item {
  text-align: center;
}

.cast-role {
    margin-top: 0.6em;
    margin-bottom: 0.1em;
    font-size: 14px;
    color: #214c5f;
    letter-spacing: 0.05em;
    font-weight: bold;
}

.cast-name {
  margin: 0;
  font-size: 28px;          /* 大きめ */
  font-weight: 700;
  letter-spacing: 0.08em;
}


@media (max-width: 767px) {
  .cast-role {
    font-size: 16px;
  }
  .cast-name {
    font-size: 23px;
  }
}



.citytitle {
    border: 1px solid #000;
    padding: 1% 5%;
    width: 30%;
    margin: 0 auto;
}

.accessbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 0;
    padding: 10px 18px;
    background: #214c5f;
    color: #fff !important;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    margin-top: 20px;
}

.fs59{
  font-size: 22px;
}

.fs60{
  font-size: 18px;
}

.fs110{
  font-size: 25px;
}

.ticketinfo{
  line-height: 25px;
}



@media screen and (max-width: 767px) {
.story__text {
    font-size: 14px;
}
.mv_info {
    line-height: 30px;
}

.story_tit.c-heading__letter {
    font-size: 65px;
    letter-spacing: 0;
}

.citytitle {
    border: 1px solid #000;
    padding: 1% 5%;
    width: 50%;
    margin: 0 auto;
}


.fs59{
  font-size: 15px;
}

.fs60{
  font-size: 13px;
}
.fs110{
  font-size: 18px;
}


.accessbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 0;
    padding: 10px 18px;
    background: #214c5f;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    margin-top: 20px;
}


}


/* =========================
   Cast: レスポンシブ崩れ修正（役名省略なし / ボタン下揃え）
========================= */



/* li を縦フレックスにして、ボタンを下に固定 */
.cellcast{
  width: auto !important;   /* 12% / 80% を打ち消す */
  margin: 0 !important;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 画像〜名前ブロックを伸ばして、ボタンを押し下げる */
.cellcast .cast-item{
  display: flex;
  flex-direction: column;
  flex: 1;                  /* ここがポイント */
}

/* 役名：省略しない（line-clamp解除） */
.cast-role{
  line-height: 1.4;
  min-height: 0 !important;         /* 固定2行分の高さは解除 */
  display: block !important;        /* -webkit-box を解除 */
  -webkit-line-clamp: unset !important;
  overflow: visible !important;     /* 切らない */
  word-break: break-word;
}



/* ボタン：下揃え＆重ならないように */
a.buttonneon.profilebtn{
  margin-top: 15px;     /* 下へ押し下げる（下揃え） */
  width: 80%;
}

/* ボタン同士が“重なる”のは高さ不足や行間不足が原因なので余白確保 */
.cellcast{
  padding-bottom: 6px;  /* 念のため */
}

/* 画像が小さすぎ/大きすぎにならないように */
.cellcast img{
  width: 100%;
  height: auto;
  display: block;
}


/* 2ブロック限定：lineTarget の中だけ適用 */

/* 罫線（全体）を消す：line-reveal時 */
.lineTarget .line-reveal.story__text::before{ content:none; }

/* 1行ずつ表示するブロック */
.lineTarget .line-reveal .lineStack{
  margin:0;
  display:grid;
  gap: 10px;
}

/* 各行（ゆっくり） */
.lineTarget .line-reveal .line{
  position: relative;
  display:block;
  padding-bottom: 8px;

  opacity:0;
  transform: translateY(10px);
  filter: blur(6px);

  transition:
    opacity 1.8s ease,
    transform 2.0s cubic-bezier(.18,.9,.22,1),
    filter 2.4s ease;
}

/* 罫線（1行ごと）：ゆっくり描画 */
.lineTarget .line-reveal .line::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: rgba(40,40,40,.14);

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 1.8s cubic-bezier(.18,.9,.22,1);
}

/* ブロックが表示状態になったら */
.story.is-ink.lineTarget .line-reveal .line,
.comments.is-ink.lineTarget .line-reveal .line{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}
.story.is-ink.lineTarget .line-reveal .line::after,
.comments.is-ink.lineTarget .line-reveal .line::after{
  transform: scaleX(1);
}



@media screen and (max-width: 767px) {
/* 上から順に遅延（ゆっくり） */
.lineTarget .line-reveal .line:nth-child(1){ transition-delay: .10s; }
.lineTarget .line-reveal .line:nth-child(2){ transition-delay: .30s; }
.lineTarget .line-reveal .line:nth-child(3){ transition-delay: .50s; }
.lineTarget .line-reveal .line:nth-child(4){ transition-delay: .70s; }
.lineTarget .line-reveal .line:nth-child(5){ transition-delay: .90s; }
.lineTarget .line-reveal .line:nth-child(6){ transition-delay: 1.10s; }
.lineTarget .line-reveal .line:nth-child(7){ transition-delay: 1.30s; }
.lineTarget .line-reveal .line:nth-child(8){ transition-delay: 1.50s; }
.lineTarget .line-reveal .line:nth-child(9){ transition-delay: 1.70s; }
.lineTarget .line-reveal .line:nth-child(10){ transition-delay: 1.90s; }
.lineTarget .line-reveal .line:nth-child(11){ transition-delay: 2.10s; }
.lineTarget .line-reveal .line:nth-child(12){ transition-delay: 2.30s; }
.lineTarget .line-reveal .line:nth-child(13){ transition-delay: 2.50s; }
.lineTarget .line-reveal .line:nth-child(14){ transition-delay: 2.70s; }
.lineTarget .line-reveal .line:nth-child(15){ transition-delay: 2.90s; }
/* 線は文字より少し遅らせる */
.lineTarget .line-reveal .line:nth-child(1)::after{ transition-delay: .25s; }
.lineTarget .line-reveal .line:nth-child(2)::after{ transition-delay: .45s; }
.lineTarget .line-reveal .line:nth-child(3)::after{ transition-delay: .65s; }
.lineTarget .line-reveal .line:nth-child(4)::after{ transition-delay: .85s; }
.lineTarget .line-reveal .line:nth-child(5)::after{ transition-delay: 1.05s; }
.lineTarget .line-reveal .line:nth-child(6)::after{ transition-delay: 1.25s; }
.lineTarget .line-reveal .line:nth-child(7)::after{ transition-delay: 1.45s; }
.lineTarget .line-reveal .line:nth-child(8)::after{ transition-delay: 1.65s; }
.lineTarget .line-reveal .line:nth-child(9)::after{ transition-delay: 1.85s; }
.lineTarget .line-reveal .line:nth-child(10)::after{ transition-delay: 2.05s; }
.lineTarget .line-reveal .line:nth-child(11)::after{ transition-delay: 2.25s; }
.lineTarget .line-reveal .line:nth-child(12)::after{ transition-delay: 2.45s; }
.lineTarget .line-reveal .line:nth-child(13)::after{ transition-delay: 2.65s; }
.lineTarget .line-reveal .line:nth-child(14)::after{ transition-delay: 2.85s; }
.lineTarget .line-reveal .line:nth-child(15)::after{ transition-delay: 3.05s; }
}

@media screen and (min-width: 767px) {
/* 上から順に遅延（ゆっくり） */
.lineTarget .line-reveal .line:nth-child(1){ transition-delay: .10s; }
.lineTarget .line-reveal .line:nth-child(2){ transition-delay: .50s; }
.lineTarget .line-reveal .line:nth-child(3){ transition-delay: .90s; }
.lineTarget .line-reveal .line:nth-child(4){ transition-delay: 1.30s; }
.lineTarget .line-reveal .line:nth-child(5){ transition-delay: 1.70s; }
.lineTarget .line-reveal .line:nth-child(6){ transition-delay: 2.10s; }
.lineTarget .line-reveal .line:nth-child(7){ transition-delay: 2.50s; }
.lineTarget .line-reveal .line:nth-child(8){ transition-delay: 2.90s; }
.lineTarget .line-reveal .line:nth-child(9){ transition-delay: 3.20s; }
.lineTarget .line-reveal .line:nth-child(10){ transition-delay: 3.60s; }
.lineTarget .line-reveal .line:nth-child(11){ transition-delay: 4.00s; }
.lineTarget .line-reveal .line:nth-child(12){ transition-delay: 4.40s; }
.lineTarget .line-reveal .line:nth-child(13){ transition-delay: 4.80s; }
.lineTarget .line-reveal .line:nth-child(14){ transition-delay: 5.20s; }
.lineTarget .line-reveal .line:nth-child(15){ transition-delay: 5.60s; }

/* 線は文字より少し遅らせる */
.lineTarget .line-reveal .line:nth-child(1)::after{ transition-delay: .25s; }
.lineTarget .line-reveal .line:nth-child(2)::after{ transition-delay: .65s; }
.lineTarget .line-reveal .line:nth-child(3)::after{ transition-delay: 1.05s; }
.lineTarget .line-reveal .line:nth-child(4)::after{ transition-delay: 1.45s; }
.lineTarget .line-reveal .line:nth-child(5)::after{ transition-delay: 1.85s; }
.lineTarget .line-reveal .line:nth-child(6)::after{ transition-delay: 2.25s; }
.lineTarget .line-reveal .line:nth-child(7)::after{ transition-delay: 2.65s; }
.lineTarget .line-reveal .line:nth-child(8)::after{ transition-delay: 3.05s; }
.lineTarget .line-reveal .line:nth-child(9)::after{ transition-delay: 3.45s; }
.lineTarget .line-reveal .line:nth-child(10)::after{ transition-delay: 3.85s; }
.lineTarget .line-reveal .line:nth-child(11)::after{ transition-delay: 4.25s; }
.lineTarget .line-reveal .line:nth-child(12)::after{ transition-delay: 4.65s; }
.lineTarget .line-reveal .line:nth-child(13)::after{ transition-delay: 5.05s; }
.lineTarget .line-reveal .line:nth-child(14)::after{ transition-delay: 5.45s; }
.lineTarget .line-reveal .line:nth-child(14)::after{ transition-delay: 5.85s; }
}
.story__heading{
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 22px;
  margin-top: 0;
}



a.buttonneon.profilebtn{
  background:
    linear-gradient(
      180deg,
      rgba(82,125,131,.35),
      rgba(82,125,131,.18)
    ),
    radial-gradient(
      120px 60px at 35% 30%,
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 70%
    );

  color: #527d83 !important;
}

/* hover */
a.buttonneon.profilebtn:hover{
  background:
    linear-gradient(
      180deg,
      rgba(82,125,131,.45),
      rgba(82,125,131,.22)
    );
}

.profilebtn.has-comment::after{
  animation: commentPulse 3.5s ease-in-out infinite;
}

@keyframes commentPulse{
  0%,100%{ transform: scale(1); opacity: .85; }
  50%{ transform: scale(1.08); opacity: 1; }
}


a.buttonneon.profilebtn.has-comment::before {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 30px;
    height: 30px;
    z-index: 3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23003f37' d='M12 3C6.48 3 2 6.8 2 11.5c0 2.7 1.5 5.1 3.9 6.7-.2.9-.7 2.2-1.7 3.4 2.1-.2 3.9-1 5.1-1.7 1.5.4 3 .6 4.7.6 5.52 0 10-3.8 10-8.5S17.52 3 12 3z'/%3E%3Ccircle cx='8.5' cy='11.5' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='11.5' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='15.5' cy='11.5' r='1.2' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}



a.buttonneon.profilebtn2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-width: 160px; */
    height: 46px;
    padding: 0 18px;
    border-radius: 0;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
    -webkit-tap-highlight-color: transparent;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
    width: 140px;
    margin: 0px auto 20px 50px;
    text-align: center;
    flex-wrap: wrap;
}


a.buttonneon.profilebtn2{
  background:
    linear-gradient(180deg, rgba(82,125,131,.32), rgba(82,125,131,.16)),
    radial-gradient(120px 60px at 35% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);

  color: #527d83 !important;
}

a.buttonneon.profilebtn2:hover,
a.buttonneon.profilebtn2:focus-visible{
  background:
    linear-gradient(180deg, rgba(82,125,131,.42), rgba(82,125,131,.22)),
    radial-gradient(120px 60px at 35% 30%, rgba(255,255,255,.20), rgba(255,255,255,0) 70%);
}



/* キャストカード全体を縦レイアウトに */
.cast-item{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cast-role {
    line-height: 1.4;
    min-height: calc(1em * 1.4 * 3);
    margin-top: 15px;
    margin-bottom: 0;
}

/* 役者名：下揃え */
.cast-name{
  margin-top: auto;   /* ← これが肝 */
}

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

a.buttonneon.profilebtn2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-width: 160px; */
    height: 38px;
    padding: 0 18px;
    border-radius: 0;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .5em;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
    -webkit-tap-highlight-color: transparent;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
    width: 100px;
    margin: 0px 0 20px 0px;
    text-align: center;
    flex-wrap: wrap;
    font-size: 3px !important;
}



.ttlFrame {
    --stroke: 2px;
    --color: #635c52;
    --w: 140px;
    --h: 46px;
    --dotW: 44px;
    --dotStep: 7px;
    --dotSizeX: 5px;
    --dotSizeY: 2px;
    position: relative;
    padding: 28px 56px;
    text-align: center;
    width: 90%;
    font-size: 17px;
    margin: 0 auto;
}


/* テキストは前面に */
.ttlFrame__txt{
  position: relative;
  margin: 0;
  z-index: 1;
}

}



a {color: #214c5f;}
a:hover{opacity: 0.8;}



@media screen and (min-width: 767px) {


.ttlFrame {
    --stroke: 2px;
    --color: #635c52;
    --w: 140px;
    --h: 46px;
    --dotW: 44px;
    --dotStep: 7px;
    --dotSizeX: 5px;
    --dotSizeY: 2px;
    position: relative;
    padding: 12px 56px;
    text-align: center;
    width: 450px;
    font-size: 19px;
    margin: 0 auto;
}


/* テキストは前面に */
.ttlFrame__txt{
  position: relative;
  margin: 0;
  z-index: 1;
}



.cellcast{
  display: flex;
  flex-direction: column;
  width: 150px;      /* grid-auto-columns と合わせる */
}

/* 画像＋役名＋役者名を縦に積んで、余白で調整 */
.cellcast .cast-item{
  display:flex;
  flex-direction:column;
  flex: 1;
}

/* 役名は3行分確保（今のままでOK） */
.cast-role{
  line-height: 1.4;
  min-height: calc(1em * 1.4 * 3);
}

/* 役者名を下揃え */
.cast-name{
  margin-top: auto;
}

/* ボタンは常に最下部 */
a.buttonneon.profilebtn{
  margin-top: 14px;
}

/* =========================
   Cast：どの幅でも「横1列で全部入れる」+ 画像欠けなし
========================= */

/* もう固定幅は持たせない（縮んでOK） */
.cellcast{
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  min-width: 0; /* これ大事：はみ出し防止 */
}

/* 上の情報ブロックを伸ばして、ボタンを下に固定 */
.cellcast .cast-item{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* 画像が“欠けない”ようにする：枠に収める（トリミングなし） */
.cast-item img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;        /* ←欠けない */
  object-position: center;
}

/* もし「画像の高さを揃えたい」場合は、ラッパーを作れない前提で img にだけ当てるなら↓
   ※PNGの縦横比がバラバラだと高さが揃いにくいので、揃えたいなら画像を同一比率で書き出すのが確実 */
.cast-item img{
  aspect-ratio: 3 / 4;        /* 好みで調整 */
}

/* 文字が潰れすぎるので、可変サイズにする（好みで調整） */
.cast-role{
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.35;
  word-break: break-word;
  letter-spacing: -2px;
  white-space: nowrap;
}
.cast-name{
  font-size: clamp(14px, 1.6vw, 28px);
  margin-top: auto;
}

/* ボタンはカード幅いっぱい */
a.buttonneon.profilebtn{
  width: 100%;
  min-width: 0;
  margin-top: clamp(8px, 1vw, 14px);
}

/* 横スクロールは不要（欠け対策として overflow を殺す） */
.comments__wrapper{
  overflow: visible !important;
}


}



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

.gridlistcast {
    grid-template-columns: unset;
}
}


/* =========================
   STAFF（TABLE置き換え）
========================= */

.staff{
  width: 100%;
  max-width: 980px;          /* 必要なら調整 */
  margin: 0 auto;
}

.staffList{
  margin: 0;
  padding: 0;
}

/* 1行＝ 役職（左） / 名前（右） */
.staffRow{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* PCの “49% / 49%” 風 */
  column-gap: clamp(10px, 2vw, 24px);
  align-items: baseline;
  padding: 6px 0;
}

/* 左側（原作など） */
.staffRow dt{
  margin: 0;
  text-align: right;         /* PCは右寄せ */
  color: #214c5f;
  font-size: 16px;
  font-weight: 700;          /* SP tableはboldだったので寄せる */
  line-height: 1.4;
}

/* 右側（人名など） */
.staffRow dd{
  margin: 0;
  text-align: left;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;

  /* 長い名前があっても崩れにくくする */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ボタン行は横幅100%で中央 */
.staffRow--full{
  grid-template-columns: 1fr;
  padding: 10px 0 18px;
}

.staffAction{
  justify-content: center;
}


/* =========================
   SP（スマホ）: 左カラムを少し細く＆左寄せに変更
========================= */
@media (max-width: 767px){
  .staff{
    max-width: 100%;
    padding: 0 16px;
  }

  .staffRow{
    grid-template-columns: 35% 65%; /* SP tableの “35% / 64%” 風 */
  }

  .staffRow dt{
    text-align: left;         /* SPは左寄せ */
    font-size: 14px;
  }

  .staffRow dd{
    font-size: 14px;
  }

/* いまの .comments.is-ink だけだと、親が story2 の時に当たらない可能性あり */
#comments.is-ink .fadeup{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}


.cast-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}


/* Cast見出し：デフォルトは隠す（既存と同じ） */
#comments [data-animation-trigger] .c-heading__letter{
  transform: translateY(105%);
}

/* Cast見出し：ここに来たら出す（is-ink ではなく is-cast-in） */
#comments.is-cast-in [data-animation-trigger] .c-heading__letter{
  transform: translateY(0);
  transition: transform 1.2s cubic-bezier(.165,.84,.44,1);
}


.hero{
  touch-action: pan-y;
}


.hero__bg,
.hero__bg * ,
.hero__water,
.fog,
.hero__fx,
.hero::after{
  pointer-events: none;
}


/* ボタン行：中央寄せを確実にする */
.staffRow--full{
  grid-template-columns: 1fr; /* これは今のままでOK */
}

.staffAction{
  display: flex;              /* ★これが必要 */
  justify-content: center;    /* 中央 */
  align-items: center;
}

/* ついでにボタンの margin 指定が中央を邪魔してるので打ち消す */
.staffRow--full a.buttonneon.profilebtn2{
  margin: 0 auto;             /* ★中央 */
}


}


/* Castのカードは常に表示（is-ink が付かなくても消えない） */
#comments .comments__wrapper.fadeup{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


/* Castタイトル：初期は下に隠す */
#comments .story_tit.c-heading__letter{
  display:inline-block;
  transform: translateY(105%);
  transition: transform 1.2s cubic-bezier(.165,.84,.44,1);
  will-change: transform;
}

/* 来たら出す */
#comments.is-cast-in .story_tit.c-heading__letter{
  transform: translateY(0) !important;
}

/* Castカードは常時表示 */
#comments .comments__wrapper.fadeup{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}




/* =========================
   Cast（PCのみ）：1 / 2 / 2 / 2（中央寄せ）
   これを style2.css の一番最後へ
========================= */
@media (min-width: 768px){

  /* Cast周りだけ確実に適用（#comments はCastセクションのID） */
  #comments .comments__wrapper{
    overflow: visible !important; /* 横スクロール系を無効化 */
  }

  #comments .comments__wrapper ul.gridlistcast{
    /* 既存の grid / 横1列指定を全部殺して flex にする */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;

    /* grid系を無効化（念のため） */
    grid-template-columns: none !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;

    /* レイアウト */
    gap: 40px 48px !important;
    width: 100% !important;
    max-width: 980px !important;  /* ここは好みで 900〜1100 で調整 */
    margin: 5% auto 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast{
    /* 2列（=2人）に固定 */
    flex: 0 0 calc((100% - 48px) / 2) !important; /* 48px=列間gap */
    max-width: 420px !important;                 /* カードの最大幅（好みで） */
    min-width: 0 !important;

    /* 既存の width固定/float を殺す */
    width: auto !important;
    float: none !important;
    margin: 0 !important;

    text-align: center;
  }

}






/* =========================================================
   Patisserie Theme Add-on
   そのまま style.css の最後に追記OK
========================================================= */

:root{
  --pt-bg: #fbf7f1;
  --pt-bg-soft: #f6efe4;
  --pt-cream: #fffaf3;
  --pt-cream-deep: #f3e7d4;
  --pt-sponge: #ead7a8;
  --pt-caramel: #b98752;
  --pt-green: #003f37;
  --pt-black: #000;
  --pt-brown: #6b4b34;
  --pt-black: #000;
  --pt-pistachio: #8ba58e;
  --pt-pistachio-deep: #6f8b77;
  --pt-berry: #b66a72;
  --pt-line: rgba(107, 75, 52, .18);
  --pt-shadow: 0 16px 36px rgba(91, 66, 43, .10);
  --pt-shadow-hover: 0 22px 44px rgba(91, 66, 43, .16);
}

/* 全体の空気感 */
html,
body{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.75), transparent 30%),
    linear-gradient(180deg, #fffdf8 0%, var(--pt-bg) 38%, #f7efe4 100%);
  color: var(--pt-black);
}

/* メイン本文を少しだけ柔らかく */
.story__text,
.ticketinfo,
.txtsmall,
.staffList,
.modal-wrapper .modal-window .modal-content{
  color: var(--pt-black);
}

/* ========================================
   Hero
======================================== */
.hero-rollcake{
  background:
    linear-gradient(180deg, #fffaf3 0%, #f5e8cb 34%, #ead39f 68%, #ddb97d 100%) !important;
  position: relative;
}

.hero-rollcake::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.72), transparent 30%),
    radial-gradient(circle at 18% 75%, rgba(255,248,235,.32), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(255,248,235,.28), transparent 24%);
  z-index: 1;
}



.hero-rollcake__logo{
  filter:
    drop-shadow(0 12px 18px rgba(107, 75, 52, .12))
    drop-shadow(0 4px 6px rgba(255,255,255,.4));
}

.hero-rollcake__person{
  filter:
    drop-shadow(0 24px 40px rgba(107, 75, 52, .16))
    drop-shadow(0 3px 10px rgba(255,255,255,.32));
}

.hero-rollcake .scroll-next{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,231,207,.92)) !important;
  color: var(--pt-brown) !important;
  border: 1px solid rgba(185, 135, 82, .36);
  box-shadow:
    0 10px 24px rgba(107,75,52,.12),
    inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 16px;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.hero-rollcake .scroll-next:hover{
  transform: translateX(-50%) translateY(-3px);
  box-shadow:
    0 16px 28px rgba(107,75,52,.18),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* ========================================
   セクション面
======================================== */

.story,
.story2,
.story3,
.footer.note{
  position: relative;
}

.story .inner,
.story2 .inner,
.story3 .inner,
.footer.note .inner{
  position: relative;
  z-index: 2;
}


/* ========================================
   Heading
======================================== */
.story__heading{
  padding-bottom: 0;
  margin-bottom: 0;
}



.story_tit.c-heading__letter{
  color: var(--pt-green) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.45),
    0 8px 18px rgba(107,75,52,.08);
}

/* 見出し下の小ラベル感 */
.story_tit.c-heading__letter .focusFx{
  position: relative;
  display: inline-block;
  padding: 0 .12em;
}

.story_tit.c-heading__letter .focusFx::before{
  left: -28px;
}

.story_tit.c-heading__letter .focusFx::after{
  right: -28px;
}

/* ========================================
   本文の可読性
======================================== */
.story__text{
  line-height: 2.05;
  letter-spacing: .03em;
}

.line-reveal .line{
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* ========================================
   Cast cards
======================================== */
#comments .comments__wrapper ul.gridlistcast > li.cellcast{
  padding: 18px 18px 20px;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


.cast-item img{
  border-radius: 0;
  overflow: hidden;
}

.cast-role{
  color: var(--pt-caramel);
  font-weight: 700;
  letter-spacing: .04em;
}

.cast-name{
  color: #3A2F2A;
  font-weight: 700;
  letter-spacing: .06em;
  margin-top: 8px;
}

/* Profile ボタンをパティスリーのタグ風に */
a.buttonneon.profilebtn,
a.buttonneon.profilebtn2{
  min-width: 164px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(185,135,82,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(243,231,212,.98)) !important;
  color: var(--pt-black) !important;
  box-shadow:
    0 10px 22px rgba(107,75,52,.10),
    inset 0 1px 0 rgba(255,255,255,.78);
  letter-spacing: .14em;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    color .35s ease;
}

a.buttonneon.profilebtn:hover,
a.buttonneon.profilebtn2:hover,
a.buttonneon.profilebtn:focus-visible,
a.buttonneon.profilebtn2:focus-visible{
  transform: translateY(-3px);
  box-shadow:
    0 16px 28px rgba(107,75,52,.16),
    inset 0 1px 0 rgba(255,255,255,.85);
  border-color: rgba(185,135,82,.45);
  color: var(--pt-black) !important;
}

a.buttonneon.profilebtn .button__wrapper,
a.buttonneon.profilebtn2 .button__wrapper{
  display:none;
}

a.buttonneon.profilebtn .button__box,
a.buttonneon.profilebtn2 .button__box{
  position: relative;
  z-index: 2;
}

/* ========================================
   Staff
======================================== */
.staff{
  border-radius: 20px;
  padding: 0;
}

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

.staffRow{
  border-bottom: 1px dashed rgba(107,75,52,.18);
  padding: 12px 0;
}

.staffRow dt{
  color: var(--pt-caramel);
  font-weight: 700;
}

.staffRow dd{
  color: var(--pt-black);
}

.staffRow--full{
  border-bottom: 0;
  padding: 22px 0 18px;
}

/* ========================================
   Schedule / Tickets
======================================== */
.ttlFrame{
  --color: #8d6a47 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,234,219,.9));
  border-radius: 999px;
  box-shadow:
    0 10px 22px rgba(107,75,52,.08),
    inset 0 1px 0 rgba(255,255,255,.76);
}

.ttlFrame__txt{
  color: var(--pt-black);
  letter-spacing: .08em;
}

.accessbtn{
  border-radius: 999px !important;
  padding: 7px 22px !important;
  background: #003f37 !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(111,139,119,.26);
  border: 1px solid rgba(255,255,255,.18);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

.accessbtn:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 28px rgba(111,139,119,.34);
  filter: saturate(1.06);
}

.ticket_info{
  padding: 18px 16px;
}

.ticket_hoshitori.osaka img{
width: 50%;
margin: 0 auto;
}


.box-title{
  color: var(--pt-black);
}

/* ========================================
   Modal
======================================== */
.modal-overlay{
  background: rgba(92, 66, 44, .42) !important;
  backdrop-filter: blur(4px);
}

.modal-wrapper .modal-window,
.modal-wrapper .modal-window .modal-content{
  background-color: #fbf7f0 !important;
  background-image:
    radial-gradient(circle at 20% 14%, rgba(255,255,255,.88), transparent 22%),
    linear-gradient(180deg, rgba(255,251,245,.98), rgba(244,234,219,.98)) !important;
}

.modal-wrapper .modal-window{
  border: 1px solid rgba(185,135,82,.18);
  box-shadow: 0 26px 60px rgba(79,55,40,.22);
  border-radius: 24px !important;
}

.modal_title,
.modal_title_cast{
  color: var(--pt-brown) !important;
}

.modal-wrapper .modal-window .modal-content{
  color: var(--pt-black) !important;
}

.modal-wrapper .modal-close{
  color: var(--pt-brown) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(243,231,212,.95));
  border: 1px solid rgba(185,135,82,.24);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(79,55,40,.12);
}

/* ========================================
   Footer
======================================== */
.footer.note{
  background: white;
}

.footer__title,
.footer .maintitle,
.footer .txtsmall{
  color: var(--pt-black);
}

/* ========================================
   subtle hover / decorative accents
======================================== */
a,
button,
.cast-item img,
.ticket_hoshitori img{
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease,
    background .35s ease,
    color .35s ease;
}


/* ========================================
   SP調整
======================================== */
@media screen and (max-width: 767px){
  .story .story__content,
  .story2 .story__content,
  .story3 .story__content{
    border-radius: 18px;
    padding: 20px 0 0;
  }

  .story_tit.c-heading__letter{
    font-size: 48px !important;
  }

  .story_tit.c-heading__letter .focusFx::before,
  .story_tit.c-heading__letter .focusFx::after{
    width: 14px;
  }

  .story_tit.c-heading__letter .focusFx::before{
    left: -18px;
  }

  .story_tit.c-heading__letter .focusFx::after{
    right: -18px;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast{
    border-radius: 18px;
    padding: 14px 12px 16px;
  }

  a.buttonneon.profilebtn,
  a.buttonneon.profilebtn2{
    min-width: 124px;
    height: 40px;
    font-size: 12px !important;
    letter-spacing: .14em;
  }

  .ttlFrame{
    width: 70%;
    padding: 5px 30px;
    margin-top: 30px;
  }

  .ticket_info{
    padding: 14px 12px;
  }

.ttlFrame__txt {
    font-size: 20px;
}

.accessbtn {
    border-radius: 999px !important;
    padding: 7px 22px !important;
    background: #003f37 !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(111,139,119,.26);
    border: 1px solid rgba(255,255,255,.18);
    transition: transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}


.box30{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(243,231,212,.94));
  border: 1px solid rgba(185,135,82,.18);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(107,75,52,.08);
}



  .modal-wrapper .modal-window{
    border-radius: 18px !important;
  }
}



/* =========================================================
   Left-in unified motion
   TOPロゴみたいな左から入る見せ方に統一
========================================================= */

/* -----------------------------------------
   1) 既存の下から出る・1行ずつ出る演出を止める
----------------------------------------- */
.story__heading,
.story_tit.c-heading__letter,
.story_tit.c-heading__letter .focusFx,
.story__text.fadeup,
.story__text.line-reveal,
.story__text.fadeup.line-reveal,
.story__text .lineStack .line{
  filter: none !important;
  will-change: auto !important;
}

/* 1行ずつの分割表示をやめる */
.story__text .lineStack{
  display: block !important;
}

.story__text .lineStack .line{
  display: inline !important;
  opacity: 1 !important;
  transform: none !important;
  position: static !important;
  overflow: visible !important;
  transition: none !important;
  background: none !important;
}

.story__text .lineStack .line::before,
.story__text .lineStack .line::after{
  content: none !important;
}

/* -----------------------------------------
   2) 初期状態
----------------------------------------- */
.story__heading,
.story__text,
#comments .comments__wrapper ul.gridlistcast > li.cellcast,
.staff,
.ticket_info,
.ticket_hoshitori,
.ttlFrame,
.box30{
  opacity: 0;
  transform: translateX(-28px);
}

/* 少しずつ差をつける */
.story__heading{
  transform: translateX(-22px);
}

.story__text{
  transform: translateX(-34px);
}

#comments .comments__wrapper ul.gridlistcast > li.cellcast{
  transform: translateX(-24px);
}

.staff,
.ticket_info,
.ticket_hoshitori,
.ttlFrame,
.box30{
  transform: translateX(-26px);
}

/* -----------------------------------------
   3) 発火後
----------------------------------------- */
.story.is-ink .story__heading,
.story2.is-ink .story__heading,
.story3.is-ink .story__heading,
.comments.is-ink .story__heading,
.footer.note.is-ink .story__heading{
  animation: patisserieLeftIn .9s cubic-bezier(.22,.8,.22,1) forwards;
}

.story.is-ink .story__text,
.story2.is-ink .story__text,
.story3.is-ink .story__text,
.comments.is-ink .story__text{
  animation: patisserieLeftIn 1s cubic-bezier(.22,.8,.22,1) .14s forwards;
}

.story3.is-ink .staff{
  animation: patisserieLeftIn 1s cubic-bezier(.22,.8,.22,1) .16s forwards;
}

.story.is-ink .ttlFrame,
.story2.is-ink .ttlFrame,
.story3.is-ink .ttlFrame{
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .08s forwards;
}

.story.is-ink .ticket_hoshitori, .story2.is-ink .ticket_hoshitori, .story3.is-ink .ticket_hoshitori {
    animation: patisserieLeftIn 1s cubic-bezier(.22,.8,.22,1) .18s forwards;
    width: 95%;
    margin: 0 auto;
}

.story.is-ink .ticket_info,
.story2.is-ink .ticket_info,
.story3.is-ink .ticket_info{
  animation: patisserieLeftIn 1s cubic-bezier(.22,.8,.22,1) .24s forwards;
}

.story.is-ink .box30,
.story2.is-ink .box30,
.story3.is-ink .box30{
  animation: patisserieLeftIn 1s cubic-bezier(.22,.8,.22,1) .28s forwards;
}

#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(1){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .06s forwards;
}
#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(2){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .12s forwards;
}
#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(3){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .18s forwards;
}
#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(4){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .24s forwards;
}
#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(5){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .30s forwards;
}
#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(6){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .36s forwards;
}
#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(7){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .42s forwards;
}
#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(8){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .48s forwards;
}
#comments.is-cast-in .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(9){
  animation: patisserieLeftIn .85s cubic-bezier(.22,.8,.22,1) .54s forwards;
}

/* -----------------------------------------
   4) キーフレーム
----------------------------------------- */
@keyframes patisserieLeftIn{
  0%{
    opacity: 0;
    transform: translateX(-28px);
  }
  65%{
    opacity: 1;
    transform: translateX(3px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

/* -----------------------------------------
   6) 本文はカード全体で見せる
----------------------------------------- */
.story__text{
  position: relative;
  padding: 0 18px 14px;
}

.story__text p{
  line-height: 2.05;
  letter-spacing: .035em;
  color: #3A2F2A;
}

/* -----------------------------------------
   7) モーション軽減
----------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .story__heading,
  .story__text,
  #comments .comments__wrapper ul.gridlistcast > li.cellcast,
  .staff,
  .ticket_info,
  .ticket_hoshitori,
  .ttlFrame,
  .box30{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -----------------------------------------
   8) SP
----------------------------------------- */
@media screen and (max-width: 767px){
  .story__heading{
    transform: translateX(-16px);
  }

  .story__text{
    transform: translateX(-20px);
    padding: 14px 0 10px;
    border-radius: 14px;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast,
  .staff,
  .ticket_info,
  .ticket_hoshitori,
  .ttlFrame,
  .box30{
    transform: translateX(-18px);
  }

  .story__text p{
    line-height: 1.95;
    letter-spacing: .025em;
  }
}

.story__heading{
  position: relative;
  text-align: center;
}

.story_tit{
  position: relative;
  display: inline-block; /* ←重要：テキスト幅基準になる */
}

/* 共通 */
.story_tit::before,
.story_tit::after{
  content:"";
  position:absolute;
  top:50%;
  width:180px; /* サイズ調整 */
  height:60px;
  transform: translateY(-50%);
  background-repeat:no-repeat;
  background-size:contain;
}

/* 左：タイトルの左から20px外 */
.story_tit::before{
  right: 100%;
  margin-right: 20px;
  background-image: url("../img/left_green.svg");
}

/* 右：タイトルの右から20px外 */
.story_tit::after{
  left: 100%;
  margin-left: 20px;
  background-image: url("../img/right_green.svg");
}



/* =========================================
   Cast final override
   PC: 1 - 4 - 4
========================================= */

@media (min-width: 768px){

  #comments .comments__wrapper{
    overflow: visible !important;
  }

  #comments .comments__wrapper ul.gridlistcast{
    display: grid !important;
    grid-template-columns: repeat(4, 240px) !important;
    justify-content: center !important;
    gap: 40px 24px !important;
    width: auto !important;
    max-width: none !important;
    margin: 5% auto 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 240px !important;
    max-width: 240px !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    text-align: center !important;
    padding-bottom: 6px !important;
  }

  /* 1人目を1段目中央 */
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(1){
    grid-column: 2 / 4 !important;
    justify-self: center !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-item{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-item img{
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    display: block !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-name{
    margin-top: auto !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast a.buttonneon.profilebtn{
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 14px !important;
  }
}

@media (max-width: 767px){
  #comments .comments__wrapper{
    overflow: visible !important;
  }

  #comments .comments__wrapper ul.gridlistcast{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
    padding: 0 !important;
    margin: 5% auto 0 !important;
    list-style: none !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast{
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(1){
    grid-column: 1 / -1 !important;
    width: min(100%, 240px) !important;
    justify-self: center !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-item img{
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    display: block !important;
  }
}



/* =========================================
   CAST LAYOUT - PC 1 / 4 / 4
========================================= */
@media (min-width: 768px){
  #comments .comments__wrapper ul.gridlistcast{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(180px, 240px)) !important;
    justify-content: center !important;
    gap: 64px 48px !important;
    width: min(1120px, 100%) !important;
    margin: 5% auto 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast{
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* いったん全部リセット */
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(n){
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  /* 1行目：1枚だけ中央 */
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(1){
    grid-column: 2 / 4 !important;
    width: min(240px, 100%) !important;
    justify-self: center !important;
  }

  /* 2行目：4枚 */
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(2){ grid-column: 1 !important; }
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(3){ grid-column: 2 !important; }
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(4){ grid-column: 3 !important; }
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(5){ grid-column: 4 !important; }

  /* 3行目：4枚 */
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(6){ grid-column: 1 !important; }
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(7){ grid-column: 2 !important; }
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(8){ grid-column: 3 !important; }
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(9){ grid-column: 4 !important; }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-item{
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-item img{
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-role{
    margin-top: 12px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-name{
    margin-top: 8px !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast a.buttonneon.profilebtn{
    width: 100% !important;
    min-width: 0 !important;
    margin: 14px 0 0 !important;
  }



  /* 1行目：1枚だけ中央 */
  .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(1){
    grid-column: 2 / 4 !important;
    width: min(240px, 100%) !important;
    justify-self: center !important;
  }



}





/* =========================
   NEWS LIST
========================= */

.news-list {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 0;
}

.news-list li {
  border-bottom: 0;
}

.news-list a {
  display: flex;
  justify-content: center;   /* 追加 */
  align-items: center;
  gap: 20px;
  padding: 14px 10px;
  text-decoration: none;
  color: #666;
  transition: opacity .25s;
}

.news-list a:hover {
  opacity: .7;
}

/* 日付 */
.news-date {
  flex: 0 0 auto;            /* 固定幅をやめる */
  font-size: 18px;
  font-weight: bold;
  color: #b98442;
  letter-spacing: .02em;
  text-align: center;
}

/* タイトル */
.news-title {
  flex: 0 0 auto;            /* 伸びないようにする */
  font-size: 20px;
  line-height: 1.6;
  text-align: left;
}

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

@media (max-width:767px){

.news-list{
  width:90%;
  margin:0 auto;
}

.news-list li{
  width:100%;
  border-bottom:0;
  padding-bottom:10px;
}

.news-list a{
  display:block;
  padding:8px 0;
  line-height:1.6;
}

.news-date{
  display:block;
  font-size:16px;
  margin-bottom:4px;
  text-align:center;
}

.news-title{
  display:block;
  font-size:16px;
  text-align:center;
}

.news-date{
  margin-bottom: -2px;   /* ← 行間を狭くする */
}

.news-title{
  margin-top: 0;
}


.story__text {
    text-align: center;
}



/* 共通 */
.story_tit::before,
.story_tit::after{
  content:"";
  position:absolute;
  top:50%;
  width:90px; /* サイズ調整 */
  height:30px;
  transform: translateY(-50%);
  background-repeat:no-repeat;
  background-size:contain;
}

/* 左：タイトルの左から20px外 */
.story_tit::before{
  right: 100%;
  margin-right: 5px;
  background-image: url("../img/left_green.svg");
}

/* 右：タイトルの右から20px外 */
.story_tit::after{
  left: 100%;
  margin-left: 0;
  background-image: url("../img/right_green.svg");
}

}


#comments .story__heading{
  opacity: 1 !important;
  transform: none !important;
}

#comments .c-heading__letter{
  transform: translateY(0) !important;
}


/* =========================================
   CAST SP: 1列表示 / 同じ画像サイズ
========================================= */
@media (max-width: 767px){


.ticket_hoshitori.osaka img{
width: 80%;
margin: 0 auto;
}


.button-55 {
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: min(420px, 90%);
    margin: 0 auto;
    padding: 14px 14px;
    border: none;
    border-radius: 10px;
    background-color: #003f37;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 15px;
    line-height: 20px;
}

.box30 {
    width: 100%;
}
  #comments .comments__wrapper{
    overflow: visible !important;
  }

  #comments .comments__wrapper ul.gridlistcast{
    display: grid !important;
    grid-template-columns: 1fr !important;   /* 1列 */
    gap: 78px !important;
    width: min(60%, 340px) !important;      /* 全カード同じ幅 */
    margin: 5% auto 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .comments__wrapper ul.gridlistcast{
    display: grid !important;
    grid-template-columns: 1fr !important;   /* 1列 */
    gap: 78px !important;
    width: min(60%, 340px) !important;      /* 全カード同じ幅 */
    margin: 5% auto 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  /* 先頭だけ幅が変わる指定を無効化 */
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(1){
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-item{
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-item img{
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;   /* 全画像同じ比率 */
    object-fit: cover !important;
    display: block !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast .cast-name{
    margin-top: 10px !important;
    text-align: center !important;
  }

  #comments .comments__wrapper ul.gridlistcast > li.cellcast a.buttonneon.profilebtn{
    width: 100% !important;
    margin: 14px 0 0 !important;
  }
}




/* =========================================
   HERO SPLIT LOCKED POSTER
   左の見え方を画面サイズで変えない最終版
========================================= */

:root{
  --hero-nav-h: 56px;

  /* 左画像の比率
     だいたい 560 / 1000 前後なら 0.56 付近。
     少し細くしたいなら 0.52〜0.54 に下げる */
  --hero-poster-ratio: 0.69;

  /* 左幅は viewport width ではなく viewport height から作る */
  --hero-left-col: clamp(320px, calc(110dvh * var(--hero-poster-ratio)), 1070px);

  --hero-right-bg: #e7d27a;
  --hero-nav-bg: #003f37;
  --hero-text: #6d4d4d;
  --hero-text-dark: #5d4037;
}

/* 本体 */
.hero.hero-rollcake.hero-split{
  position: relative !important;
  width: 100% !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--hero-right-bg) !important;
  display: block !important;
}

/* 2カラム */
.hero.hero-rollcake.hero-split .hero-split__inner{
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  height: 100svh !important;
  height: 100dvh !important;
  margin: 0 !important;

  display: grid !important;
  grid-template-columns: var(--hero-left-col) minmax(0, 1fr) !important;
  align-items: stretch !important;
}

/* 左 */
.hero.hero-rollcake.hero-split .hero-split__media{
  position: relative !important;
  width: var(--hero-left-col) !important;
  min-width: var(--hero-left-col) !important;
  max-width: var(--hero-left-col) !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #ddd27d !important;
  z-index: 1 !important;
}

/* 左画像の見え方を固定 */
.hero.hero-rollcake.hero-split .hero-split__poster{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.hero.hero-rollcake.hero-split .hero-split__poster-img{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  /* 高さ基準で見せる */
  height: 110% !important;
  width: auto !important;
  max-width: none !important;

  display: block !important;
  object-fit: contain !important;
  object-position: left top !important;
}

/* 右 */
.hero.hero-rollcake.hero-split .hero-split__content{
  position: relative !important;
  min-width: 0 !important;
  min-height: 100% !important;
  z-index: 2 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(180deg, #eadb8f 0%, #e5cf73 100%) !important;
}

.hero.hero-rollcake.hero-split .hero-split__content-inner{
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  text-align: center !important;
  padding:
    calc(var(--hero-nav-h) + 8px)
    clamp(16px, 2.4vw, 40px)
    8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ナビは左幅ぶんを避けて右だけに載せる */
.hero-topnav{
  position: absolute !important;
  top: 0 !important;
  left: var(--hero-left-col) !important;
  right: 0 !important;
  width: auto !important;
  height: var(--hero-nav-h) !important;
  z-index: 40 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 18px !important;
  background: var(--hero-nav-bg) !important;
}

.hero-topnav__nav{
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.hero-topnav__nav a{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  font-size: clamp(16px, 1.65vw, 40px) !important;
  font-family: "bodega-serif", serif !important;
}


.hero.hero-rollcake.hero-split .hero-split__logo,
.hero.hero-rollcake.hero-split .hero-rollcake__logo{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.hero.hero-rollcake.hero-split .hero-split__info{
  width: min(100%, 760px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  color: var(--hero-text) !important;
}

.hero.hero-rollcake.hero-split .hero-split__lead{
  margin: 0 0 16px !important;
  font-size: clamp(13px, 1.05vw, 18px) !important;
  letter-spacing: .08em !important;
}

.hero.hero-rollcake.hero-split .hero-split__meta{
  margin-bottom: 24px !important;
}

.hero.hero-rollcake.hero-split .hero-split__meta p{
  margin: 0 0 8px !important;
  font-size: clamp(15px, 1.25vw, 24px) !important;
  line-height: 1.75 !important;
  color: var(--hero-text-dark) !important;
}

.hero.hero-rollcake.hero-split .hero-split__schedule p{
  margin: 0 0 10px !important;
  font-size: clamp(18px, 1.7vw, 34px) !important;
  line-height: 1.6 !important;
  letter-spacing: .02em !important;
  color: var(--hero-text-dark) !important;
}

/* sticky */
.sticky-global-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--hero-nav-h) !important;
  z-index: 9999 !important;
}

/* SP */
@media (max-width: 767px){
  :root{
    --hero-nav-h: 52px;
    --hero-left-col: 100%;
  }

  .hero.hero-rollcake.hero-split .hero-split__inner{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .hero.hero-rollcake.hero-split .hero-split__media{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 65vh !important;
    min-height: 360px !important;
  }

  .hero.hero-rollcake.hero-split .hero-split__poster-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .hero-topnav{
    left: 0 !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  .hero-topnav__nav a{
    font-size: 12px !important;
    letter-spacing: .02em !important;
  }

  .hero.hero-rollcake.hero-split .hero-split__content-inner{
    min-height: auto !important;
    padding: 30px 18px 34px !important;
  }

  .hero.hero-rollcake.hero-split .hero-split__logo-wrap,
  .hero.hero-rollcake.hero-split .hero-rollcake__logo-wrap{
    width: min(60vw, 340px) !important;
    margin-bottom: 10px !important;
  }

  .hero.hero-rollcake.hero-split .hero-split__meta p{
    font-size: 14px !important;
    line-height: 1.0 !important;
  }

  .hero.hero-rollcake.hero-split .hero-split__schedule p{
    font-size: 14px !important;
    line-height: 0.8 !important;
  }
}


/* =========================================
   SP HAMBURGER MENU
========================================= */

/* PCでは非表示 */
.hero-topnav__toggle,
.sp-nav{
  display: none;
}

@media (max-width: 767px){


  .sticky-global-nav{
  display: none !important;
}



  /* 上バー */
  .hero-topnav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: #ba6464 !important; /* 参考サイト寄り */
    z-index: 10000 !important;
  }

  /* SPでは横並びナビを消す */
  .hero-topnav__nav{
    display: none !important;
  }

  /* ハンバーガー */
  .hero-topnav__toggle{
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    appearance: none;
  }

  .hero-topnav__toggle span{
    display: block;
    width: 27px;
    height: 3px;
    background: #003f37;
    transition: transform .25s ease, opacity .25s ease;
  }


  body.is-sp-nav-open .hero-topnav__toggle span{
    display: none;
  }

  /* 開いた時のアイコン変形 */
  body.is-sp-nav-open .hero-topnav__toggle span:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }

  body.is-sp-nav-open .hero-topnav__toggle span:nth-child(2){
    opacity: 0;
  }

  body.is-sp-nav-open .hero-topnav__toggle span:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }

  /* オーバーレイ */
  .sp-nav{
    display: block !important;
    position: fixed;
    inset: 0;
    background: #003f37;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
  }

  .sp-nav.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 閉じるボタン */
  .sp-nav__close{
    position: absolute;
    top: 1px;
    right: 20px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #f7dede;
    font-size: 46px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
  }

  /* メニュー本体 */
  .sp-nav__panel{
    min-height: 100dvh;
    padding: 86px 26px 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .sp-nav__panel a{
    color: #fff;
    text-decoration: none;
    font-family: "bodega-serif", serif;
    font-size: 35px;
    line-height: 1.35;
    letter-spacing: .04em;
  }

  /* 開いてる間は背面スクロール止める */
  body.is-sp-nav-open{
    overflow: hidden !important;
  }

  /* hero上の余白調整 */
  .hero.hero-rollcake.hero-split .hero-split__content-inner{
    padding-top: 5px !important;
  }



.hero.hero-rollcake.hero-split .hero-split__lead{
  margin: 0 0 6px !important;
  font-size: clamp(11px, 1.05vw, 18px) !important;
  letter-spacing: .08em !important;
}


.hero.hero-rollcake.hero-split .hero-split__meta{
  margin-bottom: 10px !important;
}

.section.note {
    padding-top: 50px !important;
}
}


@media (min-width: 768px){
  #news,
  #intro,
  #story,
  #comments,
  #staff,
  #scheduleSection {
    scroll-margin-top: 90px;
  }
}

/* ===== HERO FLOW FIX / 最終版 ===== */

#hero{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 750px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.hero.hero-rollcake.hero-split .hero-split__inner{
  height: 100% !important;
  min-height: 100% !important;
  display: grid !important;
}

main.main{
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.section.note,
#news,
#intro,
#story,
#comments,
#staff,
#scheduleSection{
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
  transform: none !important;
}


/* =========================================
   NEWS / INTRO POSITION HARD RESET
========================================= */

main.main,
.section.note,
.section.note > .inner,
#news,
#intro,
#story,
#comments,
#staff,
#scheduleSection{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 0 !important;
  transform: none !important;
  translate: none !important;
}

#news{
  z-index: 1 !important;
}

.section.note{
  padding-top: 26px !important;
}


/* =========================================
   NEWS: comments系アニメ誤爆を遮断
========================================= */

#news,
#news .inner,
#news .story__content,
#news .story__heading,
#news .story_tit,
#news .story_tit.c-heading__letter,
#news .focusFx,
#news .fadeup,
#news .line-reveal,
#news .lineStack,
#news .line{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

#news{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 0 14px !important;
  z-index: 1 !important;
}

#news.newsSection{
  padding: 2% 0 2% 0 !important;
}


/* =========================================
   NEWS FINAL FIX
========================================= */

#news,
#news.newsSection,
#news .inner,
#news .story__content,
#news .story__heading,
#news .story__text,
#news .fadeup,
#news .line-reveal,
#news .lineStack,
#news .line{
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

#news{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  z-index: 1 !important;
}

#news .inner{
  position: relative !important;
  top: auto !important;
  margin: 0 auto !important;
}

#news .story__content{
  position: relative !important;
  top: auto !important;
  margin: 0 auto !important;
}

.hero-split__logo{
  width: clamp(520px, 65vw, 1100px) !important;
  max-width: none !important;
}


@media (min-width: 768px){
.fs90{
  font-size: 30px;
  font-weight: normal;
}
.fs100{
  font-size: 28px;
  font-weight: normal;
}
}

@media (max-width: 768px){
.fs90{
  font-size: 18px;
  font-weight: normal;
}
.fs100{
  font-size: 18px;
  font-weight: normal;
}
}


img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

body {
  -webkit-user-select: none;
  user-select: none;
}




@media screen and (min-width: 767px) {
.pagetop{
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 1001;
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .pagetop{
    bottom: env(safe-area-inset-bottom);
  }
}
.pagetop a {
    display: block;
    background-color: #003f37;
    text-align: center;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    padding: 15px 20px;
}
.pagetop a:hover {
    display: block;
    background-color: #011e1a;
    text-align: center;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    padding:15px 20px;
}
}

@media screen and (max-width: 767px) {
.pagetop{
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 1001;
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .pagetop{
    bottom: env(safe-area-inset-bottom);
  }
}

.pagetop a {
    display: block;
    background-color: #003f37;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 10px 15px;
}
.pagetop a:hover {
    display: block;
    background-color: #011e1a;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:10px 15px;
}
}


html {
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
}