/* ========================================================
  Performance主要CSS
======================================================== */

/* === Performance タブ：流体レイアウト化 ================== */
:root{
  /* 余白・サイズ（必要なら数値微調整してください） */
  --perf-max-w: 1200px;
  --perf-pad-x: clamp(12px, 2vw, 20px);
  --perf-gap-row: clamp(16px, 3.5vw, 40px);
  --perf-gap-col: clamp(12px, 2vw, 20px);
  --perf-ticket-min-h: clamp(120px, 11vw, 160px);
  --perf-ticket-border: 5px; /* 外枠の太さ */
  --perf-content-pad-x: clamp(12px, 2.5vw, 30px);

  /* 文字サイズ（見出し・日付・補助） */
  --perf-h2: clamp(22px, 3.4vw, 48px);
  --perf-h2-sub: clamp(12px, 1.4vw, 18px);
  --perf-date: clamp(16px, 2.6vw, 36px);
  --perf-date-span: clamp(12px, 1.9vw, 26px);
  --perf-details: clamp(12px, 1.3vw, 14px);

  --role-lines: 2;   /* 役名は2行ぶん確保 */
  --name-lines: 2;   /* 名前も2行ぶん確保（1行なら中央に見える） */
  --role-lh: 1.2;    /* 役名の行高（h3に合わせる） */
  --name-lh: 1.15;   /* 名前の行高 */
}

/* タブ切り替え専用 */
.tab_button {
  display: block;
  padding: 60px 0 0;
}

/* タブ切り替え連動 */
.performance__Tickets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2.5vw, 20px) clamp(8px, 1.6vw, 20px);
  max-width: 1200px;
  margin: clamp(20px, 6vw, 80px) auto 5px;
  box-sizing: border-box;
  padding: 0 clamp(10px, 1.8vw, 20px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.performance__Ticket {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  aspect-ratio: 56 / 15;
  padding: clamp(2px, 0.5vw, 8px);
  overflow: hidden;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.performance__Ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: clamp(1px, 0.25vw, 2px);
  background: linear-gradient(90deg, #89ECC4, #e06df0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
}

.performance__Ticket:hover .ticket-content {
  background-color: rgba(255, 255, 255, 0.2);
}

.performance-content {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 2;
  margin: 0 auto 0;
  padding: 0 clamp(16px, 2.5vw, 30px);
  transition: background-color 0.5s ease;
}

.performance-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(to right, #8AECC4, #e06df0);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin: 0 auto;
  gap: 0.5em; 
}

.performance-info h2 {
  font-size: clamp(20px, 3.6vw, 48px);
  margin: 3% auto 0;
}

.performance-info h2 span {
  font-size: clamp(10px, 1.6vw, 18px);
  margin-left: clamp(-8px, -0.7vw, -10px);
}

.subtitle {
  font-size: clamp(14px, 2.2vw, 28px);
}

.performance-info .date {
  font-size: clamp(16px, 2.9vw, 36px);
  font-weight: 700;
  margin: -1% auto 10px;
}

.performance-info span {
  font-size: clamp(12px, 2.1vw, 26px);
  margin-left: 0px;
}

.details-text {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%) scale(1);
  font-weight: 500;
  font-size: clamp(11px, 1.2vw, 14px);
  color: #ffffff;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.details-text-sp {
  display: none;
}

.performance__Ticket:hover .details-text {
  transform: translateX(-50%) scale(1.4);
}

@media (min-width:521px) and (max-width:768px) {

  .performance-info h2 span {
    margin-left: clamp(-2px, -0.9vw, -10px);
  }

}

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

  .performance__Ticket {
    aspect-ratio: 56 / 16;
  }

}

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

  .performance__Ticket {
    aspect-ratio: 56 / 17;
  }

}

@media (min-width:481px) and (max-width:520px) {

  .performance__Ticket {
    aspect-ratio: 56 / 23;
  }

  /* グループ（performance-info + details-text）を中央配置 */
  .performance__Ticket:not(:has(.performance-info h2 span)) .performance-content {
    display: grid;             /* gridの方が中央寄せが素直 */
    place-content: center;     /* 縦横の中央寄せ */
    justify-items: center;     /* 子要素の横位置も中央 */
    height: 100%;
  }

  /* タイトル側の内側余白と整列を中央寄せ向けに最適化 */
  .performance__Ticket:not(:has(.performance-info h2 span)) .performance-info {
    margin: 0;
    align-items: center;       /* 文字の横位置を中央へ */
    gap: 0.1em;
  }
  .performance__Ticket:not(:has(.performance-info h2 span)) .performance-info h2 {
    margin: 0;
    line-height: 1.2;
  }

  /* 絶対配置を解除してフローに乗せる（重要） */
  .performance__Ticket:not(:has(.performance-info h2 span)) .details-text {
    position: static !important;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: -0.4em;         /* タイトルとの間隔だけ付ける */
  }

  /* この幅帯ではSP用の方を隠しておく（もし出ているなら） */
  .performance__Ticket:not(:has(.performance-info h2 span)) .details-text-sp {
    display: none;
  }

  .performance-info h2 {
    line-height: 1.15;
  }

  .performance-info h2 span {
    display: block;
    margin-left: 0;
    margin-top: 0.2em;
  }

}

@media (min-width:431px) and (max-width:480px) {

  .performance__Tickets {
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(10px, 2.5vw, 40px) clamp(8px, 1.6vw, 20px);
    margin: clamp(20px, 6vw, 80px) auto 5px;
    padding: 0 clamp(10px, 1.8vw, 20px);
  }

  .performance__Ticket {
    aspect-ratio: 56 / 13;
  }

  .performance-info h2 {
    font-size: clamp(28px, 4vw, 48px);
    margin: 4% auto 0;
  }

  .performance-info h2 span {
    margin-left: 0;
  }

  .performance-info .date {
    font-size: clamp(20px, 3.2vw, 36px);
    margin: -1% auto 10px;
  }

  .performance-info span {
    font-size: clamp(16px, 2.5vw, 26px);
    margin-left: 0px;
  }

  .performance-content {
    margin: 4px auto 0;
  }

  .details-text {
    bottom: 17%;
  }

}

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

  .performance-content {
    margin: 0 auto 0;
  }

  .details-text {
    bottom: 11%;
  }

}

@media (min-width:401px) and (max-width:430px) {

  .performance__Tickets {
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(10px, 2.5vw, 40px) clamp(8px, 1.6vw, 20px);
    margin: clamp(20px, 6vw, 80px) auto 5px;
    padding: 0 clamp(10px, 1.8vw, 20px);
  }

  .performance__Ticket {
    aspect-ratio: 56 / 13;
  }

  .performance-info h2 {
    font-size: clamp(28px, 4vw, 48px);
    margin: 4% auto 0;
  }

  .performance-info h2 span {
    margin-left: 0;
  }

  .performance-info .date {
    font-size: clamp(20px, 3.2vw, 36px);
    margin: -2% auto 10px;
  }

  .performance-info span {
    font-size: clamp(20px, 2.5vw, 26px);
    margin-left: 0px;
  }

  .performance-content {
    margin: -3px auto 0;
  }

  .details-text {
    bottom: 8%;
  }

}

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

  .performance__Tickets {
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(10px, 2.5vw, 40px) clamp(8px, 1.6vw, 20px);
    margin: clamp(20px, 6vw, 80px) auto 5px;
    padding: 0 clamp(10px, 1.8vw, 20px);
  }

  .performance__Ticket {
    aspect-ratio: 56 / 15;
  }

  .performance-info h2 {
    font-size: clamp(28px, 4vw, 48px);
    margin: 2.5% auto 0;
  }

  .performance-info h2 span {
    margin-left: 0;
  }

  .performance-info .date {
    font-size: clamp(20px, 3.2vw, 36px);
    margin: -2% auto 10px;
  }

  .performance-info span {
    font-size: clamp(20px, 2.5vw, 26px);
    margin-left: 0px;
  }

  .performance-content {
    margin: 5px auto 0;
  }

  .details-text {
    bottom: 15%;
  }

}

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

  .performance-content {
    margin: 0 auto 0;
  }

  .details-text {
    bottom: 9%;
  }

}

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

  .performance-content {
    margin: 0 auto 0;
  }

  .details-text {
    bottom: 6%;
  }

}

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

  .performance__Ticket {
    aspect-ratio: 56 / 17;
  }

  .performance-content {
    margin: 5px auto 0;
  }

  .details-text {
    bottom: 14%;
  }

}

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

  .performance__Ticket {
    aspect-ratio: 56 / 20;
  }

  .performance-info h2 {
    margin: 3.5% auto 0;
  }

  .performance-info h2 span {
    display: block;
    margin-left: 0;
    margin-top: 0.2em;
  }

  .performance-content {
    margin: 1px auto 0;
  }

  .details-text {
    bottom: 12%;
  }

}

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

  .performance__Ticket {
    display: grid;
    place-content: center;
    aspect-ratio: 56 / 28;
  }

  .performance-info h2 {
    font-size: clamp(24px, 3vw, 48px);
  }

  .details-text {
    bottom: 0;
  }

}

/* ヘッダーセル、行タイトルセルの背景も透明に */
.cell-header,
.row-title {
  background-color: transparent;
  font-weight: bold;
}


/* ========================================================
  Performance（パフォーマンスタブボタン用、ポップアップ用含む）
======================================================== */
/* 作品見出しや作品タイトル , 振付・出演者紹介 */
.tab-content {
  position: relative;
  height: auto;
  transition: height 0.35s ease;
  will-change: height;
  display: block;
}
.tab-content.active {
  display: block;
}

.tab-btn.active {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.tab-panel[id] {
  scroll-margin-top: calc(var(--header-h-pc) + var(--anchor-extra));
}

.tab-panel {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s, ease visibility 0s 0.25s;
  overflow: hidden;
  pointer-events: none;
  padding-top: 0.01px;
}

.tab-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s, ease, visibility 0s;
  pointer-events: auto;
}

.tab-panel > *:first-child {
  margin-top: 90px !important;
}

.tab-panel h1:first-child,
.tab-panel h2:first-child {
  margin-top: 0 !important;
}

.Clearance {
  margin: 150px 0 0;
}

.title-company {
  width: 100%;
  text-align: center;
  line-height: 1;
  color: #ffffff;
  margin-top: 0;
}

.title-company h2 {
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
}

.title-company span {
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  line-height: 1;
}

.title-company h3 {
  font-weight: 700;
  font-size: 36px;
  text-align: center;
  line-height: 1.4;
  margin-top: 60px;
}

.performance-date {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.performance-date span {
  font-size: 18px;
  font-weight: 500;
  margin-left: 0px;
}

.performance-detail {
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
}

.performance__Head-line {
  font-family: Oswald, Noto Sans JP;
  color: #ffffff;
  max-width: 1200px;
  margin-inline: auto;
  padding: 0;
  display: block;
}

.performance__Head-line h3 {
  max-width: 1200px;
}

/* タイトルと横線 */
.headline__title-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
  margin: 60px auto;
}

.headline__title-line h3 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.headline__line {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: linear-gradient(to right, #8AECC4, #e06df0);
}

/* ラベルとテキスト */
/* Performance */
.performance__Head-line .credit__row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: 1em;
}

.performance__Head-line .credit__label{
  font-size: clamp(10px, 1.9vw, 14px);
  font-weight: 500;
  padding: clamp(10px, 1.6vw, 16px) clamp(12px, 1.8vw, 20px);
  margin: 0;
  border: 1px solid;
  border-image: linear-gradient(to right, #8AECC4, #e06df0) 1;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  color:#fff;
}

.performance__Head-line .credit__text{
  font-family: Oswald, "Noto Sans JP";
  font-size: clamp(13px, 2vw, 14px);
  font-weight: 300;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.performance__Head-line .credit__row.align-top {
  align-items: flex-start;
}
.performance__Head-line .credit__row.align-top .credit__text {
  line-height: 1.2;
}


/* ========================================================
  Performanceモーダル（ポップアップ用）
======================================================== */
/* メンバー紹介用 */
.modal {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 9999;
}

.modal:target,
.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.modal-open {
  overflow: hidden;
  padding-right: var(--sbw);
}

.member_list {
  text-align: center;
  display: grid;
  gap: 20px;
  align-items: stretch;
  margin: 50px auto 60px auto;
  font-family: Oswald, Noto Sans JP;
}

.grid183 {
  grid-template-columns: repeat(auto-fill, minmax(183.34px, 1fr));
  max-width: calc((183.34px * 6) + (20px * 5));
}

.grid285 {
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  max-width: calc((285px * 4) + (20px * 3));
}

.grid250 {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  max-width: calc((250px * 4) + (4.16% * 3));
  gap: 4.16%;
}

.cut {
  margin: 0 auto 60px auto!important;
}

.role_name {
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 10px;
}

.member_list li {
  margin: 10px 0 10px;
  cursor: pointer;
  color: #ffffff;
}

.member_list li.main {
  grid-column: span 2;
}

.member_list li.solo {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 200px;
}

.member_list li img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.member_list li a:hover img {
  transform: scale(1.05);
}

/* メンバー画像 */
.member_thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

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

.member_thumb2 {
  width: 85%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.member_list2 {
  text-align: center;
  display: grid;
  margin: 0 auto 60px auto;
  justify-content: center;
  font-family: Oswald, Noto Sans JP;
}

.member_list2 li {
  margin: 10px 0 10px;
  cursor: pointer;
  color: #ffffff;
}

.member_list2 li.main {
  grid-column: span 2;
}

.member_list2 li.solo {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 200px;
}

.member_list2 li img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.member_list2 li a:hover img {
  transform: scale(1.05);
}

.role_name2 {
  font-size: 1em;
  font-weight: 600;
  color: #ffffff;
  margin: 80px 0 0;
}

.modal-wrapper.is-open,
.modal-wrapper:target {
  display: flex;
  pointer-events: auto;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  vertical-align: middle;
  content: "";
}

/* メンバー一覧（配役：出演者） */
.member__text__List{
  /* 左列（配役）幅：最小120px〜最大260px、文字長に応じて自動調整 */
  --role-col: clamp(120px, 22ch, 260px);
  --gap-x: clamp(12px, 2vw, 24px); /* 列のすき間 */
  --gap-y: 8px;                    /* 行のすき間 */
  display: grid;
  grid-template-columns: var(--role-col) 1fr;
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  font-size: 14px;     /* ご指定どおり固定 */
  color: #ffffff;      /* ご指定どおり */
  line-height: 1.6;    /* 可読性用。必要に応じて調整 */
  margin: 0 auto;           /* 余白は親で調整 */
  max-width: calc((285px * 4) + (20px * 3));
}

/* dt/dd のデフォルト余白を消して整列 */
.member__text__List dt,
.member__text__List dd{
  margin: 0;
}

/* 見た目の差を少しだけ（不要なら消してOK） */
.member__text__List dt{
  font-weight: 600;   /* ラベル感を少し強めに。不要なら normal に */
  align-self: start;  /* 右テキストが複数行でも上端そろえ（お望みの挙動） */
}
.member__text__List dd{
  word-break: break-word;  /* 長い名前や連結語でのはみ出し対策 */
}

/* スマホで左列を少し細く（任意） */
@media (max-width: 480px){
  .member__text__List{ --role-col: clamp(100px, 18ch, 200px); }
}

/* 名前表示 */
.name_big {
  font-weight: 400;
  font-size: 0.95em;
  margin-top: 0.4em;
}

.name_big span {
  display: block;
  font-size: 13px;
  color: #ffffff;
}

.modal-wrapper {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 10px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}

.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 70%;
  max-width: 600px;
  padding: 30px;
  background-color: #ffffff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  vertical-align: middle;
}

.modal-content {
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content_inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.modal_img img {
  width: 100%;
  margin: 0 5% 0 auto;
}

.modal_txt {
  width: 50%;
  margin: 2px 0 0 15px;
  text-align: left;
}

.modal_txt h4 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #282828;
}

.modal_txt h4 span {
  font-size: 1rem;
  font-weight: normal;
  color: #666666;
}

.modal_txt .cap {
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.5em;
  color: #282828;
  margin: 15px auto 5px;
}

.modal_txt .body_txt {
  margin: 0;
  font-size: 0.7rem;
  color: #282828;
  line-height: 1.8em;
  letter-spacing: 0.075rem;
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  color: #282828;  
  font-size: 35px;
  font-weight: 500;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
}


/* ========================================================
  PERFORMANCEスライド（コンテンツ用、JS連動用含む）
======================================================== */

.my-slider {
  max-width: 1400px;
  height: clamp(320px, 28vw, 560px);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  --peek: 0;
  padding-left: var(--peek);
  padding-right: calc(var(--peek) + (100vw - 100%));
}

.my-slider .swiper-wrapper {
  align-items: center;
  height: 100%;
}

.my-slider .swiper-slide {
  width: 720px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
}

.my-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;         /* 必要に応じて contain に */
}

.my-slider .swiper-button-prev,
.my-slider .swiper-button-next {
  display:none;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}


/* ========================================================
  Schedule（スケジュールコンテンツ用、メディアクエリ含む）
======================================================== */
/* Schedule 主要CSS */

.schedule-title {
  padding: 100px 0 60px;
  text-align: center;
}

.cmn-title {
  max-width: 1200px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 0 auto 40px auto;
}

.note-mark {
  flex: 0 0 auto;
  margin-right: 0.5em;
  line-height: 1.6;
}

.note-text {
  flex: 1;
  line-height: 1.6;
}

/* Schedule ヘッドライン */
.schedule__Head-line {
  font-family: "Noto Sans JP";
  color: #ffffff;
  max-width: 1200px;
  margin: 0 auto 80px;
  margin-inline: auto;
  display: block;
}

.schedule__Head-line .credit__block {
  display: flex;
  flex-direction: column;
  gap: clamp(16px,4vw,40px);
  max-width: 768px;
  margin: 0 auto;
  align-items: flex-start;
}

.schedule__Head-line .credit__row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
  gap: clamp(12px,2.2vw,24px);
}

.schedule__Head-line .credit__label {
  font-family: "Noto Sans JP";
  font-size: clamp(14px,1.9vw,20px);
  font-weight: 500;
  min-width: clamp(140px,17vw,220px);
  padding: clamp(10px,1.6vw,16px) clamp(12px,1.8vw,20px);
  border: 1px solid;
  border-image: linear-gradient(to right, #8AECC4, #e06df0) 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  line-height: 1.6;
}

.schedule__Head-line .credit__text {
  font-size: clamp(18px, 2.4vw, 20px);
  font-weight: 300;
  line-height: 1.3;
  margin: 0;
  align-self: center;
  text-align: left;
  flex: 1;
}

/* Schedule リンクボタン */
.link_button {
  display: block;
  margin: clamp(20px, 6vw, 80px) auto;
  padding: 0 1.5%;
}

.schedule-link {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px,3.3vw,20px) clamp(8px,1.7vw,20px);
  max-width: 1200px;
  margin: clamp(20px, 6vw, 80px) auto 0;
  box-sizing: border-box;
  padding-block:0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.schedule-content {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 56 / 17;
  padding: clamp(2px, 0.7vw, 8px);
  overflow: hidden;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.schedule-content::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: clamp(1px, 0.35vw, 2px);
  background: linear-gradient(90deg, #89ECC4, #e06df0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 0;
  pointer-events: none;
}

.schedule-content::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  pointer-events: none;
}


.schedule-content:hover::after {
  opacity: 1;
}

.shedule__tab__title {
  max-width: 1200px;
  margin-bottom: 60px;
  text-align: center;
  display: block;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 0 auto 40px auto;
}

.shedule__Ticket:hover .details-text {
  transform: translateX(-50%) scale(1.4);
}

.schedule .cmn-title h2
.ticket .cmn-title h2 {
  color: #000;
}

.schedule-list {
  margin-bottom: 80px;
}

.schedule-list ul li {
  position: relative;
  text-align: center;
  font-size: 20px;
  margin-bottom: 25px;
  padding-bottom: 25px;
  color: #ffffff;
  line-height: 1.6;
}

.schedule-list ul li::before {
  position: absolute;
  content: "";
  width: 120px;
  height: 1px;
  background: linear-gradient(to right, #8AECC4, #e06df0);
  color: transparent;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.schedule-list ul li:nth-child(4)::before {
  display: none;
}

.schedule-list ul li:nth-child(4) {
  margin-bottom: 0;
  padding-bottom: 0;
}

.schedule-table {
  margin: 100px auto 40px;
  max-width: 100%;
}


.shedule__tab__title > * {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.shedule-tab-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 20px;
  justify-content: center;
}

.shedule-tab {
  padding: 12px 24px;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  transition: 0.3s;
}

.link-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #8AECC4, #e06df0);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin: 0 auto;
  gap: 0.5em;
}

/* ── フォントを相対サイズ化 ── */
.link-text h2 {
  font-weight: 700;
  font-size: clamp(13px, calc(2.4vw + 0.3px), 32px);
}

.link-text h2 span {
  font-size: clamp(10px, calc(1.946vw + 0.65px), 24px);
  letter-spacing: 0.04em;
}

.link-text h3 {
  display: inline-block;
  font-size: clamp(0.8rem, calc(1.2rem + 0.6 * ((100vw - 481px) / (1200 - 481))), 2rem);
  color: rgba(255, 255, 255, 1);
  padding: clamp(1px, .5vw, 10px) clamp(8px, 1.7vw, 20px) clamp(4px, .8vw, 16px);
  background: linear-gradient(to right, #8AECC4, #e06df0);
}

.link-text h3 span {
  font-size: clamp(10px, calc(1.25vw + 0.0px), 24px);
}

.link-text p {
  font-size: clamp(12px, 1.7vw, 20px);
  font-weight: 500;
}

.link-text p.date {
  font-size: clamp(10px, calc(1.113vw + 4.644px), 18px);
  font-weight: 500;
  margin: 0 auto;
}

.link-text p.date span {
  font-size: clamp(12px, 1.2vw, 14px);
}

/* Schedule 金額表 */
.table-image-wrapper {
  font-family: "Noto Sans JP";
  width: 100%;
  max-width: 1200px;
  margin: 80px auto 0;
  position: relative;
  aspect-ratio: 1200 / 260;
}

.table-bg {
  width: 100%;
  height: auto;
  display: block;
}

.cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cell-content {
  font-size: clamp(11px, 2vw, 16px);
  color: #fff;
  line-height: 1.3;
}

.notice {
  display: block;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  color: #C761E1;
}

.price {
  display: block;
  font-size: clamp(11px, 2vw, 16px);
  color: #fff;
}

/* Schedule 金額表　下の割引表示 */
.caution-contents {
  margin: 20px 0;
  padding: 0 1.5%;
}

.schedule .caution-discount {
  max-width: 1200px;
  margin: 0 auto 40px;
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
  padding: 35px 5px;
}

.schedule .caution-discount p {
  font-weight: 600;
  font-size: 48px;
  text-indent: -1em;
  padding-left: 1em;
}

.schedule .caution-discount span {
  font-size: 32px;
}

.schedule .caution-txt {
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  color: #ffffff;
  text-align: left;
  letter-spacing: 0.2em;
}

/* ========================================================
  Access（アクセスコンテンツ用）
======================================================== */
/* Access 主要CSS */
.access-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 40px) clamp(15px, 1.6vw, 30px);
  margin: clamp(20px, 6vw, 80px) auto 0;
  padding: 0 clamp(10px, 1.8vw, 20px);;
}

.access-txt {
  margin-bottom: 60px;
}

.access-txt h3 {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #fff;
  padding-bottom: 20px;
}

.access-txt p {
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: #fff;
}

.access-list ul li {
  margin-bottom: 60px;
}

.access-list ul li h3 {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #fff;
  padding-bottom: 30px;
}

.access-list ul li img {
  height: 180px;
  width: auto;
  margin-left: 80px;
}

.sns-wrap {
  padding: 100px 0;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
}

.sns-wrap .sns-list {
  display: inline-flex !important;
  gap: 20px;
}


/* ========================================================
  メディアクエリ設定
======================================================== */

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

  .Clearance {
    margin: 150px 0 0;
  }

  .title-company {
    width: 100%;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    line-height: 1;
    color: #ffffff;
  }

  .title-company h2 {
    font-size: 48px;
    line-height: 1;
  }

  .title-company h3 {
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    line-height: 1.4;
  }

  .performance-date {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
  }

  .performance-date span {
    font-size: 18px;
    font-weight: 500;
    margin-left: 0px;
  }

  .performance-detail {
    font-size: 14px;
    font-weight: 500;
    line-height: 2;
  }

  .performance__Head-line {
    font-family: Oswald, Noto Sans JP;
    color: #ffffff;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 2.5%;
    display: block;
  }

  /* タイトルと横線 */
  .headline__title-line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    margin: 0 auto 60px auto;
  }

  .headline__title-line h3 {
    font-size: 38px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .member_list {
    padding: 0 2.5%;
  }

  .member_list2 {
    padding: 0 1%;
  }

  .member_list2.grid250 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
    gap: 0;
  }

  .role_name {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9em;
    min-height: calc(var(--role-lh) * 1em * var(--role-lines));
    margin: 0 0 10px;
  }

  .role_name2 {
    text-align: center;
    font-size: 0.9em;
    margin: 40px 0 0;
  }

  .role_name h3 {
    margin: 0;
    line-height: 1.6em;
  }



}

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

  .performance__Head-line {
    padding: 0 2.5%;
  }

  .access-list ul li img {
    height: 180px;
    margin-left: 0px;
  }

  .my-slider {
    height: clamp(360px, 40vw, 640px);
  }

}

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

  .modal-wrapper .modal-window {
    width: 90%;
  }

  .modal-content_inner {
    display: block;
    text-align: center;
  }

  .modal_img {
    width: 45%;
    margin: 0 auto;
  }

  .modal_txt {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .cap {
    text-align: center;
  }

  .grid183 {
    grid-template-columns: repeat(5, 1fr);
    max-width: 100%;
  }

}

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

  .headline__title-line h3 {
    font-size: clamp(28px, 2.5vw, 34px);
  }

  .role_name {
    text-align: center;
    font-size: 1.1em;
    margin: 80px 0 10px;
  }

  .role_name2 {
    text-align: center;
    font-size: 1.1em;
    margin: 80px 0 10px;
  }

  .member_list2.grid250 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
  }

}

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

  .fixed-right {
    left: calc(env(safe-area-inset-left, 0px) + clamp(8px, 2.4vw, 12px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(8px, 2.4vw, 12px));
    right: auto;
    top: auto;
    transform: none;
    pointer-events: none;
  }

  .Clearance {
    margin: 150px 0 0;
  }

  .title-company {
    width: 100%;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    line-height: 1;
    color: #ffffff;
  }

  .title-company h2 {
    font-weight: 700;
    font-size: 48px;
    text-align: center;
    line-height: 1;
  }

  .title-company h2 span {
    display: block;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
}

  .title-company h3 {
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    line-height: 1.4;
  }

  .performance-date {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
  }

  .performance-date span {
    font-size: 18px;
    font-weight: 500;
    margin-left: 0px;
  }

  .performance-detail {
    font-size: 14px;
    font-weight: 500;
    line-height: 2;
  }

  .performance__Head-line {
    font-family: Oswald, Noto Sans JP;
    color: #ffffff;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 2.5%;
    display: block;
  }

  /* タイトルと横線 */
  .headline__title-line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    margin: 60px auto;
  }

  .headline__title-line h3 {
    font-size: clamp(28px, 10vw, 34px);
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .schedule .caution-discount {
    max-width: 834px;
    margin: 0 auto 40px;
    background: rgba(255, 255, 255, 0.2);
    text-align: center;
    padding: 20px 5px;
  }

  .schedule .caution-discount p {
    font-weight: 600;
    font-size: clamp(14px, 10vw, 34px);
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.5;
  }

  .schedule .caution-discount span {
    font-size: 28px;
  }

  .caution-contents {
    margin: 20px 0;
    font-size: 14px;
  }

  .fixed-right .attention__Box + .attention__Box {
    margin-left: 0;
  }

  .cmn-txt p {
    font-weight: 400;
    font-size: clamp(14px, 10vw, 20px);
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: #ffffff;
  }

  .role_name {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9em;
    min-height: calc(var(--role-lh) * 1em * var(--role-lines));
    margin: 0 0 10px;
  }

  .role_name2 {
    text-align: center;
    font-size: 0.9em;
    margin: 40px 0 0;
  }

  .role_name h3 {
    margin: 0;
    line-height: 1.6em;
  }

  .ticket__Head-line .credit__label {
    font-family: "Noto Sans JP";
    font-size: clamp(14px, 1.9vw, 24px);
    font-weight: 500;
    min-width: clamp(100px, 17vw, 220px);
    padding: clamp(10px, 1.6vw, 16px) clamp(12px, 1.8vw, 20px);
    border: 1px solid;
    border-image: linear-gradient(to right, #8AECC4, #e06df0) 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    line-height: 1.6;
  }

  .ticket .caution {
    max-width: 834px;
    margin: 0 auto 40px;
    padding: 30px 40px;
    font-size: 14px;
  }

  .ticket .caution h2 {
    font-size: 16px;
  }

  .pagetop-btn {
    font-size: 24px;
  }

  .access-txt h3 {
    font-size: 18px;
    padding-bottom: 15px;
  }

  .access-txt p {
    font-size: 16px;
  }

  .access-list ul li h3 {
    font-size: 16px;
    padding-bottom: 20px;
  }

  .access-txt {
    margin-bottom: 40px;
  }

  .access-list ul li {
    margin-bottom: 40px;
    overflow-x: scroll;
  }

  .access-list-img {
    width: 500px;
  }

  .access-list ul li img {
    height: 95px;
  }

  .access {
    padding-bottom: 40px;
  }

  .access-map iframe {
    height: 300px;
  }

  .sns-wrap {
    padding: 40px 0;
  }

}

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

  #Schedule .sh-scroll {
    overflow: visible;
  }

  #Schedule .scroll-hint-icon {
    display: none !important;
  }

  .role_name {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9em;
    min-height: calc(var(--role-lh) * 1em * var(--role-lines));
    margin: 0 0 10px;
  }

  .role_name2 {
    text-align: center;
    font-size: 0.9em;
    margin: 40px 0 0;
  }

  .role_name h3 {
    margin: 0;
    line-height: 1.6em;
  }

}

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

  .my-slider {
    height: clamp(380px, 56vw, 720px);
  }

  .headline__title-line {
    gap: 25px;
  }

  .headline__title-line h3 {
    font-size: clamp(28px, 2.5vw, 32px);
  }

  #Schedule .sh-scroll.js-scrollable {
    overflow-x: auto;                /* 横スクロール */
    -webkit-overflow-scrolling: touch;
    position: relative;              /* ヒントの定位 */
  }

   /* スクロールバーを消す */
  #Schedule .sh-scroll.js-scrollable::-webkit-scrollbar { display: none; height: 0; }
  #Schedule .sh-scroll.js-scrollable { scrollbar-width: none; -ms-overflow-style: none; }

  /* 表本体：幅768pxで固定（縮ませない） */
  #Schedule .table-image-wrapper {
    width: 715px;
    min-width: 715px;
    max-width: none;
    margin: 0;
  }

  #Schedule .scroll-hint-icon,
  #Schedule .scroll-hint-icon:before {
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  #Schedule .sh-scroll.scrollhint-done .scroll-hint-icon{
    opacity: 0;
    transform: scale(.9);
  }

  .schedule__Head-line .credit__text {
    font-size: clamp(14px, 2.4vw, 20px);
    line-height: 1.4;
  }

  .shedule-link {
    gap: 20px 20px;
  }

  .schedule__Head-line {
    max-width: 768px;
  }

  .schedule__Head-line .credit__row {
    gap: 3%;
  }

  .schedule__Head-line .credit__label {
    min-width: clamp(100px,2vw,120px);
    padding: 1em 0.2em;
  }

  .link-text {
    gap: 0.5em;
  }

  .ticket__Head-line .credit__label {
  padding: 0.5em 0.25em
  }

  .ticket__Head-line .credit__text {
    font-size: clamp(14px, 2.4vw, 20px);
    line-height: 1.4;
  }

  .access-grid {
    display: block;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(15px, 2.5vw, 40px) clamp(10px, 1.6vw, 30px);
    margin: clamp(20px, 6vw, 80px) auto 0;
    padding: 0 clamp(6px, 1.8vw, 14px);;
  }

  .access-txt p {
    font-size: 14px;
  }

}

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

  .member_list::before {
    content: "";
    width: 100%;
    order: 1;
  }

  .member_list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .member_list::after {
    content: "";
    margin: 0;
  }

  .member_list li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1 1 auto;
  }

  .grid285 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  
  .member_list2.grid250 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    gap: 0;
  }

  .grid183 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  .role_name {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9em;
    min-height: calc(var(--role-lh) * 1em * var(--role-lines));
    margin: 0 0 10px;
  }

  .role_name2 {
    text-align: center;
    font-size: 0.9em;
    margin: 40px 0 0;
  }

  .role_name h3 {
    margin: 0;
    line-height: 1.6em;
  }

  .member_thumb{
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

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

  .name_big{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--name-lh);
    min-height: calc(var(--name-lh) * 1em * var(--name-lines));
  }

}

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

  .schedule__Head-line .credit__row {
    gap: 3%;
  }

  .schedule__Head-line .credit__label {
    padding: 0.8em 0.2em;
  }

  .schedule-content {
    aspect-ratio:56 / 20;
  }

  .link-text {
    gap; 0.5em;
  }

}

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

  .link-text {
    gap; 0.5em;
  }

  .headline__title-line h3 {
    font-size: clamp(28px, 2.5vw, 28px);
  }

}

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

  .modal-wrapper .modal-window {
    width: 90%;
  }

  .modal_img {
    width: 75%;
    margin: -30px auto 5px;
  }

  .modal_txt {
    width: 100%;
  }

  .modal_txt h4 {
    font-size: 1em;
  }

  .modal_txt span {
    font-size: 0.6em;
  }

  .cap {
    font-size: 0.8em;
  }

  .modal_txt .body_txt {
    font-size: 0.7em;
    line-height: 2.2em;
  }

  .ticket-content {
    aspect-ratio: 56 / 17;
    padding-left:  clamp(20px, calc(20px + ((100vw - 521px) * 50 / 78)), 50px);
    padding-right: clamp(20px, calc(20px + ((100vw - 521px) * 50 / 78)), 50px);
    padding-top: 0;
    padding-bottom: 0;
  }

  .ticket-content::before {
    padding: clamp(1px, .35vw, 2px);
  }

  .ticket-content .link-title {
    margin: 26px 0 0px;
  }

  .link-title h2 {
    font-size: 32px;
    letter-spacing: 0.01em;
  }

  .link-title h2 span {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .ticket-content .link-info {
    margin: -25px 0 0;
  }

  .ticket-content .link-info-left .date {
    font-size: 24px;
    letter-spacing: 0.04em;
    margin: 4px 0 0;
  }

  .ticket-content .link-info-left .date span {
    font-size: 18px;
  }

  .ticket-content .link-info-left .time {
    font-size: 14px;
    letter-spacing: 0.02em;
    margin: 0.25em 0 0;
  }

  .ticket-content .link-info-right {
    padding: 15px 20px;
    margin: 6px 0 0;
    line-height: 1;
  }

  .ticket-content .link-info-right h3 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    gap: 0.35em;
  }

  .ticket-content .link-info-right h3 span {
    font-size: 0.75em;
    line-height: 1;
  }

}

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

  .schedule .caution-discount p {
    font-size: clamp(14px, 10vw, 28px);
    text-indent: 0;
    padding-left: 0;
  }

  .schedule .caution-discount span {
    font-size: 24px;
  }

}

@media (min-width:481px) and (max-width:520px) {

  .ticket-content{
    aspect-ratio: 56 / 17;
    padding: 0px 20px;
  }

  .ticket-content::before {
    padding: clamp(1px, .35vw, 2px);
  }

  .ticket-content .link-title {
    margin: 24px 0 0px;
  }

  .link-title h2 {
    font-size: 32px;
    letter-spacing: 0.01em;
  }

  .link-title h2 span {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .ticket-content .link-info {
    margin: -18px 0 0;
  }

  .ticket-content .link-info-left .date {
    font-size: 20px;
    letter-spacing: 0.02em;
    margin: 4px 0 0;
  }

  .ticket-content .link-info-left .date span {
    font-size: 16px;
  }

  .ticket-content .link-info-left .time {
    font-size: 14px;
    letter-spacing: 0.02em;
    margin: 0.25em 0 0;
  }

  .ticket-content .link-info-right {
    padding: 15px 20px;
    margin: 6px 0 0;
    line-height: 1;
  }

  .ticket-content .link-info-right h3 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    gap: 0.35em;
  }

  .ticket-content .link-info-right h3 span {
    font-size: 0.75em;
    line-height: 1;
  }

}

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

  .performance__Tickets {
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(10px, 2.5vw, 40px) clamp(8px, 1.6vw, 20px);
    margin: clamp(20px, 6vw, 80px) auto 5px;
    padding: 0 clamp(10px, 1.8vw, 20px);
  }

  .performance__Ticket {
    aspect-ratio: 56 / 13;
  }

  .performance-info h2 {
    font-size: clamp(28px, 4vw, 48px);
  }

  .performance-info h2 span {
    margin-left: 0;
  }

  .performance-info .date {
    font-size: clamp(20px, 3.2vw, 36px);
    margin: -1.4% auto 10px;
  }

  .performance-info span {
    font-size: clamp(20px, 2.5vw, 26px);
    margin-left: 0px;
  }

  .headline__title-line h3 {
    font-size: clamp(28px, 2vw, 22px);
  }

  .name_big {
    margin-top: 6px;
    font-weight: 400;
    font-size: 14px;
  }

  .name_big span {
    display: block;
    font-size: 12px;
    color: #ffffff;
  }

  .schedule-link {
    display: block;
    max-width: 480px;
    padding-block:0;
  }

  .schedule-content {
    height: auto;
    aspect-ratio: 56 / 16;
    margin: 1em auto;
    padding: clamp(2px, 0.7vw, 8px);
  }

  .schedule__Head-line .credit__text {
    line-height: 1.35;
  }

  .schedule .caution-discount p {
    font-size: clamp(14px, 10vw, 24px);
    text-indent: 0;
    padding-left: 0;
  }

  .schedule .caution-discount span {
    font-size: 20px;
  }

  .link-text h2 {
    font-size: clamp(24px, calc(2.642vw + 0.3px), 32px);
  }

  .link-text h2 span {
    font-size: clamp(18px, calc(1.946vw + 0.65px), 26px);
    letter-spacing: 0.04em;
  }

  .link-text h3 {
    font-size: clamp(1.6rem, 2vw, 2.4rem);
    padding: clamp(1px, .5vw, 10px) clamp(8px, 1.7vw, 20px) clamp(4px, .8vw, 16px);
  }

  .link-text h3 span {
    font-size: clamp(20px, calc(1.25vw + 0.0px), 24px);
  }

  .link-text p.date {
    font-size: clamp(16px, calc(1.113vw + 4.644px), 20px);
  }

  .ticket__Head-line .credit__block {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 480px;
  }

  .ticket .caution {
    max-width: 480px;
    padding: 20px;
  }

  .ticket-link {
    display: block;
    max-width: 480px;
    margin: clamp(20px,6vw,80px) auto 0;
    padding-inline: clamp(0px, calc(2.782vw - 13.384px), 20px);
  }

  .ticket-content{
    height: auto;
    aspect-ratio: 56 / 17;
    padding: clamp(18px, .7vw, 20px);
    margin: 1em auto;
  }

  .ticket-content .link-title {
    margin: 10px 0 clamp(-5px, 4.8vw, -35px);
  }

  .link-title h2 {
    font-size: clamp(24px, calc(2.642vw + 0.3px), 32px);
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .link-title h2 span {
    font-size: clamp(18px, calc(1.946vw + 0.65px), 26px);
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .ticket-content .link-info {
    margin: -6px 0 0;
  }

  .ticket-content .link-info-left .date {
    font-size: clamp(16px, calc(1.113vw + 4.644px), 20px);
    letter-spacing: 0.04em;
    margin: 1em 0 0;
  }

  .ticket-content .link-info-left .date span {
    font-size: clamp(16px, 2.5vw, 26px);
  }

  .ticket-content .link-info-left .time {
    font-size: clamp(13px, 1.6vw, 18px);
    letter-spacing: 0.02em;
    margin: 0.25em 0 0;
  }

  .ticket-content .link-info-right {
    padding: clamp(14px, .9vw, 20px) clamp(16px, 1.6vw, 30px);
    line-height: 1;
    margin: 1em -0.4em 0 0;
  }

  .ticket-content .link-info-right h3 {
    margin: 0;
    padding: 0;
    font-size: clamp(16px, 2.1vw, 24px);
    gap: 0.35em;
  }

  .ticket-content .link-info-right h3 span {
    font-size: 0.8em;
    line-height: 1;
  }

}

@media (min-width:401px) and (max-width:430px) {

  .performance__Tickets {
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(10px, 2.5vw, 40px) clamp(8px, 1.6vw, 20px);
    margin: clamp(20px, 6vw, 80px) auto 5px;
    padding: 0 clamp(10px, 1.8vw, 20px);
  }

  .performance__Ticket {
    aspect-ratio: 56 / 13;
  }

  .performance-info h2 {
    font-size: clamp(28px, 4vw, 48px);
  }

  .performance-info h2 span {
    margin-left: 0;
  }

  .performance-info .date {
    font-size: clamp(20px, 3.2vw, 36px);
    margin: -1.4% auto 10px;
  }

  .performance-info span {
    font-size: clamp(16px, 2.5vw, 26px);
    margin-left: 0px;
  }

  .schedule-content {
    aspect-ratio: 56 / 17;
  }

  .ticket .caution {
    max-width: 430px;
    padding: 20px;
  }

  .ticket-content {
    aspect-ratio: 56 / 17;
    padding: 0px 20px;
  }

  .ticket-content::before {
    padding: clamp(1px, .35vw, 2px);
  }

  .ticket-content .link-title {
    margin: 18px 0 0px;
  }

  .link-title h2 {
    font-size: 28px;
    letter-spacing: 0.01em;
  }

  .link-title h2 span {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .ticket-content .link-info {
    margin: -18px 0 0;
  }

  .ticket-content .link-info-left .date {
    font-size: 18px;
    letter-spacing: 0;
    margin: 4px 0 0;
  }

  .ticket-content .link-info-left .date span {
    font-size: 12px;
  }

  .ticket-content .link-info-left .time {
    font-size: 14px;
    letter-spacing: 0.01em;
    margin: 0.05em 0 0;
  }

  .ticket-content .link-info-right {
    padding: 10px 8px;
    margin: 7px 0 0;
    line-height: 1;
  }

  .ticket-content .link-info-right h3 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    gap: 0.25em;
  }

  .ticket-content .link-info-right h3 span {
    font-size: 0.75em;
    line-height: 1;
  }

}

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

  .performance__Tickets {
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(10px, 2.5vw, 40px) clamp(8px, 1.6vw, 20px);
    margin: clamp(20px, 6vw, 80px) auto 5px;
    padding: 0 clamp(10px, 1.8vw, 20px);
  }

  .performance__Ticket {
    aspect-ratio: 56 / 15;
  }

  .performance-info h2 {
    font-size: clamp(28px, 4vw, 48px);
  }

  .performance-info h2 span {
    margin-left: 0;
  }

  .performance-info .date {
    font-size: 0.88em;
    margin: -1.4% auto 10px;
  }

  .performance-info span {
    font-size: 0.72em;
    margin-left: 0px;
  }

  .schedule-content {
    aspect-ratio: 56 / 19;
  }

  .ticket .caution {
    max-width: 400px;
    padding: 20px;
  }

  .ticket-content .link-title {
    margin: 2px 0 clamp(-5px, 4.8vw, -35px);
  }

   .ticket-content .link-info-right h3 {
    margin: 0;
    padding: 0;
    font-size: clamp(12px, 2vw, 16px);
    gap: 0.15em;
  }

  .ticket-content .link-info-right h3 span {
    font-size: 0.75em;
    line-height: 1;
  }

  .ticket-content .link-info-left .date span {
    font-size: clamp(12px, 2.5vw, 20px);
  }

  .ticket-content .link-info-left .time {
    font-size: 0.75em;
    letter-spacing: 0.01em;
    margin: 0.05em 0 0;
  }

}


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

  .grid183 {
    grid-template-columns: repeat 1fr;
  }

  .grid285 {
    grid-template-columns: repeat 1fr;
  }
  
  .member_list2.grid250 {
    grid-template-columns: repeat 1fr;
  }

  .schedule-content {
    aspect-ratio: 56 / 20;
  }

  .link-title h2 {
    font-size: 28px;
    letter-spacing: 0;
  }

  .link-title h2 span {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0;
  }

}

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

  .schedule__Head-line .credit__text {
    line-height: 1.25;
  }

 .link-text h2 {
    font-size: clamp(20px, calc(2.642vw + 0.3px), 32px);
  }

  .link-text h2 span {
    font-size: clamp(14px, calc(1.946vw + 0.65px), 26px);
    letter-spacing: 0.04em;
  }

  .link-text h3 {
    font-size: clamp(1.4rem, 2vw, 2.4rem);
  }

  .link-text h3 span {
    font-size: clamp(18px, calc(1.25vw + 0.0px), 24px);
  }

}

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

  .ticket-content{
    aspect-ratio: 56 / 18;
    padding: clamp(14px, .7vw, 20px);
    margin: 1em auto;
  }

  .ticket-content .link-title {
    margin: 2px 0 clamp(-5px, 4.8vw, -35px);
  }

  .ticket-content .link-info {
    margin: 2px 0 0;
  }

  .link-title h2 {
    font-size: 1.5em;
    letter-spacing: 0;
  }

  .ticket-content .link-info-left .date {
    font-size: 16px;
    letter-spacing: 0;
    margin: 4px 0 0;
  }

  .ticket-content .link-info-left .date span {
    font-size: 10px;
  }

  .ticket-content .link-info-left .time {
    font-size: 13px;
    letter-spacing: 0.01em;
    margin: 0.05em 0 0;
  }

  .ticket-content .link-info-right {
    padding: 10px 8px;
    margin: 7px 0 0;
    line-height: 1;
  }

}

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

  .performance__Ticket {
    aspect-ratio: 56 / 17;
  }

  .link-text h3 {
    font-size: clamp(1.3rem, 2vw, 2.4rem);
  }

  .link-text h3 span {
    font-size: clamp(18px, calc(1.25vw + 0.0px), 24px);
  }

}

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

  .performance__Ticket {
    aspect-ratio: 56 / 20;
  }

  .performance-info h2 span {
    display: block;
    margin-left: 0;
    margin-top: 0.2em;
  }

  .schedule-content {
    aspect-ratio: 56 / 21;
  }

}

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

  .ticket-content{
    aspect-ratio: 56 / 18;
    padding: clamp(14px, .7vw, 20px);
    margin: 1em auto;
  }

  .ticket-content .link-title {
    margin: 2px 0 clamp(-5px, 4.8vw, -35px);
  }

  .link-title h2 {
    font-size: 1.4em;
    letter-spacing: 0;
  }

  .ticket-content .link-info-left .date {
    font-size: 0.73em;
    letter-spacing: 0;
    margin: 6px 0 0;
  }

  .ticket-content .link-info-left .time {
    font-size: 0.65em;
    letter-spacing: 0;
    margin: 0;
  }

}

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

  .performance__Ticket {
    display: grid;
    place-content: center;
    aspect-ratio: 56 / 28;
  }

  .performance-info h2 {
    font-size: clamp(24px, 3vw, 48px);
  }

  .details-text {
    bottom: 0;
  }

  .link-text h2 {
    font-size: clamp(18px, calc(2.642vw + 0.3px), 32px);
  }

  .link-text h2 span {
    font-size: clamp(14px, calc(1.946vw + 0.65px), 26px);
    letter-spacing: 0.04em;
  }

  .link-text h3 {
    font-size: clamp(1.4rem, 2vw, 2.4rem);
  }

  .link-text h3 span {
    font-size: clamp(14px, calc(1.25vw + 0.0px), 24px);
  }

  .schedule .caution-discount {
    max-width: 285px;
    margin: 0 auto 40px;
    background: rgba(255, 255, 255, 0.2);
    text-align: center;
    padding: 15px 5px;
  }

  .schedule .caution-discount p {
    font-weight: 700;
    font-size: 20px;
    text-indent: 0;
    padding-left: 0;
  }

  .schedule .caution-discount span {
    font-size: clamp(14px, calc(1.25vw + 0.0px), 20px);
  }

  .schedule-content {
    aspect-ratio: 56 / 23;
  }  

  .caution-contents {
    font-size: 14px;
  }

  .cmn-txt p {
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.6;
  }

}