@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-x: hidden;
  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:#c5cdc2;
  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,
.story, .story2, .story3, .comments{
  position:relative;
  padding: 0 0 5%;
}
}

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


#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: #635c52 !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: 4%;
    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 {
    justify-content: center;
    gap: 18px;
    margin: 5% 0;
    padding: 0;
    list-style: none;
}
.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 */
.box30 {
    margin: 2em auto;
    background: rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    width: min(760px, 92vw);
    padding: 18px 16px;
    border-radius: 0;
}
.box30 .box-title{
  padding: 6px 10px;
  text-align:center;
  color:#214c5f;
  font-weight:700;
  letter-spacing:.05em;
}
.box30 p{ padding: 10px 0; margin:0; font-size: 14px; font-weight:400; }

.button-55{
  display:inline-flex;
  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:#b98442;
  color:#fff;
  font-weight:700;
  font-size: 16px;
}
.button-55:hover{ background-color:#a97432; }

/* 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: scribo-brush-regular, sans-serif;
font-weight: 700;
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: 70px;
}
  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: 30px;
  }
}



/* Castセクションだけ横幅100%にする */
#comments.story2.is-ink {
  width: 100%;
}

/* セクション内の幅制限（max-width）を解除してフル幅に */
#comments.story2.is-ink .story__content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* グリッドの外側（余白がある場合）もフル幅へ */
#comments.story2.is-ink .comments__wrapper {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(16px, 3vw, 40px);  /* 端の余白は少し残す（不要なら0に） */
  padding-right: clamp(16px, 3vw, 40px);
}

/* Castセクションだけ .inner の幅制限を解除してフル幅に */
#comments.story2.is-ink .inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}


/* Castセクションだけ 1200px固定を全部解除してフル幅にする */
#comments.story2.is-ink {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 1%;
}
/* もし.story2 / .story__content側で絞っている場合も解除 */
#comments.story2.is-ink .story__content,
#comments.story2.is-ink .comments__wrapper,
#comments.story2.is-ink .gridlistcast{
  width: 100% !important;
  max-width: none !important;
}

/* 端の余白だけ欲しい場合（不要なら0） */
#comments.story2.is-ink .story__content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Castブロックが入っている .inner もフル幅に上書き */
#comments.story2.is-ink .inner{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}



.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: 15px;
}
.mv_info {
    line-height: 30px;
}

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

.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: レスポンシブ崩れ修正（役名省略なし / ボタン下揃え）
========================= */

/* まず flex幅指定を無効化（既存の width:12% / 80% を潰す） */
.gridlistcast{ display: grid !important; }

.gridlistcast{
  /* 画面幅に応じて自動で列数が変わる */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch; /* 高さ揃え */
  margin: 5% 0;
  padding: 0;
  list-style: none;
}

/* 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;
}

.story__heading::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform: translateX(-50%);
  width: min(520px, 70vw);
  height: 1px;
  background: rgba(33,76,95,.45); /* #214c5f */
}

.story__heading::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform: translateX(-50%);
  width: 110px;
  height: 12px;
  background: radial-gradient(
    closest-side,
    rgba(33,76,95,.45),  /* #214c5f */
    rgba(33,76,95,0)
  );
  filter: blur(2px);
  opacity: .75;
}



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: 18px;
  height: 18px;
  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='%23ffffff' 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='%23527d83'/%3E%3Ccircle cx='12' cy='11.5' r='1.2' fill='%23527d83'/%3E%3Ccircle cx='15.5' cy='11.5' r='1.2' fill='%23527d83'/%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::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 10px;
  width: 90px;
  height: var(--h);
  border-top: var(--stroke) solid var(--color);
  border-left: var(--stroke) solid var(--color);
}

/* 右：┘（実線） */
.ttlFrame::after{
  content:"";
  position:absolute;
  right: 18px;
  bottom: 10px;
  width: 90px;
  height: var(--h);
  border-bottom: var(--stroke) solid var(--color);
  border-right: var(--stroke) solid var(--color);
}

/* 左上：上線の末端だけドット（実線→ドット） */
.ttlFrame .ttlFrame__txt::before {
    content: "";
    position: absolute;
    left: 55px;
    top: -18px;
    width: var(--dotW);
    height: var(--stroke);
    background: repeating-linear-gradient(
      to right,
      var(--color) 0 var(--dotSizeX),
      transparent var(--dotSizeX) var(--dotStep)
    );
}

/* 右下：下線の左端だけドット（ドット→実線） */
.ttlFrame .ttlFrame__txt::after {
    content: "";
    position: absolute;
    right: 55px;
    bottom: -18px;
    width: var(--dotW);
    height: var(--stroke);
    background: repeating-linear-gradient(
      to left,
      var(--color) 0 var(--dotSizeX),
      transparent var(--dotSizeX) var(--dotStep)
    );
}

/* テキストは前面に */
.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: 28px 56px;
    text-align: center;
    width: 450px;
    font-size: 22px;
    margin: 0 auto;
}

/* 左：┌（実線） */
.ttlFrame::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 10px;
  width: 90px;
  height: var(--h);
  border-top: var(--stroke) solid var(--color);
  border-left: var(--stroke) solid var(--color);
}

/* 右：┘（実線） */
.ttlFrame::after{
  content:"";
  position:absolute;
  right: 18px;
  bottom: 10px;
  width: 90px;
  height: var(--h);
  border-bottom: var(--stroke) solid var(--color);
  border-right: var(--stroke) solid var(--color);
}

/* 左上：上線の末端だけドット（実線→ドット） */
.ttlFrame .ttlFrame__txt::before {
    content: "";
    position: absolute;
    left: 55px;
    top: -18px;
    width: var(--dotW);
    height: var(--stroke);
    background: repeating-linear-gradient(
      to right,
      var(--color) 0 var(--dotSizeX),
      transparent var(--dotSizeX) var(--dotStep)
    );
}

/* 右下：下線の左端だけドット（ドット→実線） */
.ttlFrame .ttlFrame__txt::after {
    content: "";
    position: absolute;
    right: 55px;
    bottom: -18px;
    width: var(--dotW);
    height: var(--stroke);
    background: repeating-linear-gradient(
      to left,
      var(--color) 0 var(--dotSizeX),
      transparent var(--dotSizeX) var(--dotStep)
    );
}

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



.comments__wrapper{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
}
.comments__wrapper::-webkit-scrollbar{ display:none; } /* Chrome/Safari */


.gridlistcast{
  display: grid !important;
  grid-auto-flow: column;                  /* 横方向に並べる */
  grid-auto-columns: minmax(150px, 1fr);   /* 各カードの幅（調整OK） */
  gap: 18px;
  width: max-content;                      /* 中身の幅だけ広がる */
  padding: 0;
  margin: 5% auto;                         /* 中央寄せっぽく */
  list-style: none;
}

.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列で全部入れる」+ 画像欠けなし
========================= */

/* 7人を固定で横並び（必要ならここだけ 7→人数に合わせて変更） */
.gridlistcast{
  --castCols: 7;
  display: grid !important;
  grid-template-columns: repeat(var(--castCols), minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 18px);
  width: 100%;
  margin: 5% 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  align-items: stretch;
}

/* もう固定幅は持たせない（縮んで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: 80%;
    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（中央寄せ） */
@media (min-width: 768px){

  /* ulを「折り返すflex」に強制 */
  .comments__wrapper ul.gridlistcast{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;  /* 全体を中央へ */
    align-items: flex-start !important;
    gap: 40px 48px !important;

    max-width: 900px;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 2列（= 2人） */
  .comments__wrapper ul.gridlistcast > li.cellcast{
    /* 2列になる幅：gapの半分を引く */
    flex: 0 0 calc(50% - 24px) !important;
    max-width: 420px;            /* 1カードの最大幅（好みで調整） */
    width: auto !important;
    margin: 0 !important;
    float: none !important;

    text-align: center;
  }

  /* 1人目だけ 1列（全幅扱い）＋中央 */
  .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(1){
    flex-basis: 100% !important; /* 1段目は1人 */
    max-width: 420px !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;
  }

  /* 1人目だけ1段（中央） */
  #comments .comments__wrapper ul.gridlistcast > li.cellcast:nth-child(1){
    flex-basis: 100% !important;
    max-width: 520px !important; /* 1人目だけ少し大きくしたいなら */
  }
}