/* ------------------------------------------------------------
  G-Corp Custom Styles
  Migrated from Tailwind CSS to Vanilla CSS
------------------------------------------------------------ */

/* ============================================================
  Design Tokens — G-Corp Rebrand
============================================================ */
:root {
  --accent:       #0b4ea2;
  --accent-hover: #0a3d80;
  --accent-bg:    #e9f1fa;
  --accent-soft:  #cfe1f3;
  --ink:          #14171c;
  --ink-2:        #3a3f47;
  --ink-3:        #6a6f78;
  --line:         #e5e3dc;
  --bg-soft:      #f6f5f1;
  --bg-light:     #efefef;
}

/* 上下余白 */
:where(.media-image-block),
:where(.entry-style) .node-imageBlock,
[class*=column-image],
[class*=column-media]:not(:has(a[href*=media-download], a[href*=storage])),
[class*=column-eximage] {
  margin-block: 0 15px;
}

.material-symbols-outlined {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: inherit;
    white-space: nowrap;
    word-wrap: normal;
}

.entry-column h2 {
    font-size: 1.2rem;
    background-color: var(--bg-soft);
    border-radius: 2px;
}

.entry-column h3 {
    font-size: 1.1rem;
    background-color: inherit;
    border-radius: 0;
    border-bottom: 2px solid var(--line);
}

.entry-column h4 {
    font-size: 1.0rem;
    background-color: var(--bg-soft);
    border-radius: 2px;
}

.column-pdf-image-caption-box {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.column-pdf-image-caption-box .columnIcon {
  display: none;
}

.column-pdf-image-caption-box .column-pdf-image-download-icon {
  display: none;
}

@media (hover: hover) {
    [class*=column-media]:has(.column-pdf-image) a:hover .caption {
        border-bottom: none;
    }
}

.acms-admin-block-editor-link-button-link, .link-button-block-link {
    background-color: var(--accent);
}


/* ============================================================
  Header
============================================================ */

/* レイアウト上書き（plus.css の flex → grid に変更）
   ※ テーマの直接子は .logo-area と .header-right の2つなので 1fr auto */
.top-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 36px;
  padding: 18px 24px;
  max-width: 1180px;
  margin: 0 auto;
  /* border-bottom: 1px solid var(--line); */
}

/* ロゴ高さを明示 */
.site-logo {
  height: 40px;
  width: auto;
}

/* TOP は h1、中ページは p になるためブラウザデフォルトの margin を統一 */
.site-name {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* プライマリナビ */
.top-nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.top-nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
  transition: color .15s ease;
}

.top-nav-links a::before {
  content: "▸";
  color: var(--accent);
  margin-right: 6px;
  font-size: 10px;
}

.top-nav-links a:hover {
  color: var(--accent);
}

/* 電話ブロック */
.phone-block {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

/* Material Icons アイコン非表示（SVG に差し替え） */
.phone-block > .material-symbols-outlined {
  display: none;
}

.phone-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.phone-block-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone-number-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.freedial-logo {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}

.phone-hours,
.footer-phone-hours {
  text-align: center;
}

.phone-number {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
  text-transform: none;
}

.phone-hours {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: center;
}

/* お問い合わせ CTA */
.contact-btn {
  background: var(--accent);
  color: #fff;
  padding: 16px 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease;
  min-width: unset;
  text-align: unset;
  white-space: nowrap;
}

.contact-btn:hover {
  background: var(--accent-hover);
}

a.contact-btn,
a.contact-btn:link,
a.contact-btn:visited,
a.contact-btn:hover,
a.contact-btn:active {
  color: #fff;
}

.contact-btn-arrow {
  display: inline-flex;
  transition: transform .15s ease;
}

.contact-btn:hover .contact-btn-arrow {
  transform: translateX(3px);
}

/* モバイル（800px 以下） */
@media (max-width: 800px) {
  .top-header {
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: none;
  }

  .header-right .top-nav-links:not(.ns-cloned),
  .phone-block:not(.ns-cloned) {
    display: none;
  }

  .contact-btn:not(.ns-cloned) {
    display: none;
  }
}


.ns-wrap-links>div {
  border-bottom: none;
}
.ns-wrap-links>div a, .ns-wrap-links>span a, .ns-wrap-links>a, .ns-wrap-links>nav a {
    border-bottom: 1px solid #ccc;
}

.ns-menu .ns-wrap-links a {
    margin-bottom: 8px;
    border-radius: 2px;
    border-color: #ccc;
}

.ns-menu .ns-wrap-button a.contact-btn,
.ns-menu .ns-wrap-button a.contact-btn:link,
.ns-menu .ns-wrap-button a.contact-btn:visited,
.ns-menu .ns-wrap-button a.contact-btn:hover,
.ns-menu .ns-wrap-button a.contact-btn:active {
    color: #fff;
    display: block;
    width: 100%;
    text-align: center;
}

.page-title-inner {
    display: table-cell;
    position: relative;
    padding: 15px 0;
    vertical-align: middle;
    z-index: 2;
}

/* ============================================================
  Footer
============================================================ */

footer {
  background-color: var(--bg-soft);
  border-radius: 2px;
}

/* フッターメインラッパー */
.l-footer-main {
  background: #fff;
  /* border-top: 1px solid var(--line); */
}

/* 2カラムグリッド */
.l-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: flex-start;
}

/* フッターロゴ */
.footer-brand {
  margin-bottom: 18px;
}

.footer-logo {
  height: 34px;
  width: auto;
}

/* 住所 */
.footer-addr {
  font-style: normal;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.85;
}

.footer-addr .mono {
  font-size: 13px;
  line-height: 1.5;
}

.footer-addr .mono-line-s {
  font-size: 13px;
  line-height: 1.3;
}

/* 右カラム */
.footer-col-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* フッター電話ブロック */
.footer-phone-block {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.footer-phone-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.footer-phone-num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}

.footer-phone-hours {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
  letter-spacing: 0.04em;
}

/* フッターナビ（footer-navi_pc を上書き） */
.footer-col-contact .footerNavi {
  width: 100%;
}

.footer-navi_pc {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6px;
  flex-wrap: wrap;
  padding: 10px 0 10px 0;
}

/* ナビモジュールが生成する <p> ラッパーを透過 */
.footer-navi_pc p {
  display: contents;
}

.footer-navi_pc a {
  font-size: 13px;
  color: var(--ink-2);
  transition: color .15s;
  position: relative;
}

.footer-navi_pc a::before {
  content: "▸";
  color: var(--accent);
  margin-right: 6px;
  font-size: 10px;
}

.footer-navi_pc a:hover {
  color: var(--accent);
}

.footer-navi_pc a:link, .footer-navi_pc a:hover, .footer-navi_pc a:visited, .footer-navi_pc a:active {
  padding-right: 0;
  border-right: none;
}


/*  footer sns  */
.footer-col-contact .sns-list {
  float: none;
  display: block;
  margin: 10px 0;
}

.footer-col-contact .sns-list a {
  display: block;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 1;
  font-size: 20px;
  color: #FFF;
  border-radius: none;
  background: none;
}

.sns-list-item {
  margin: 0 10px;
}

.footer-col-contact .sns-list .sns-list-item a img{
  width: 32px;
  height: 32px;
}

@media screen and (max-width: 1023px) {
    .sns-list {
        position: inherit;
        top: 17px;
        right: 39px;
        display: inline-block;
        margin: 16px;
        z-index: 100;
    }

    .sns-list-item {
      margin: 10px;
    }
}

.ns-wrap .sns-list {
  float: none;
  display: block;
  margin: 0 0;
  padding: 0;
}

.ns-wrap .sns-list .sns-list-item {
  margin: 0 10px 5px 10px;
}

.ns-wrap-button {
    display: flex;
    justify-content: center;
    padding: 12px 0 0;
}


/* コピーライトバー */
.footer-copy {
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 18px 40px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
  margin: 0;
}

/* モバイル（800px 以下） */
@media (max-width: 800px) {
  .l-footer-inner {
    grid-template-columns: 1fr;
    padding: 40px 20px 24px;
    text-align: center;
  }

  .footer-brand {
    display: flex;
    justify-content: center;
  }

  .footer-addr {
    text-align: center;
  }

  .footer-col-contact {
    align-items: center;
  }

  .footer-phone-block {
    justify-content: center;
  }

  .footer-navi_pc {
    justify-content: center;
  }
}

/* ============================================================
  Secondary Nav (サブナビ)
============================================================ */

/* ラッパー */
.main-nav-bar {
  background: #fff;
  border-top: none;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* グリッドレイアウトに変更（左ナビ: auto、右セクション: 残り） */
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  padding: 0 36px 0 24px;
  max-width: 1180px;
  margin: 0 auto;
}

/* 左ナビタブ */
.nav-tabs {
  display: flex;
  gap: 36px;
  align-items: center;
  padding: 16px 0;
  border-right: none;
}

.nav-tabs a {
  /* font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; */
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  position: relative;
  padding: 8px 4px;
  white-space: nowrap;
  border-right: none;
  transition: color .2s ease, transform .2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

.nav-tabs a:hover {
  color: var(--accent);
  transform: translateY(-3px);
}

/* ホバー時のアンダーライン */
.nav-tabs a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.nav-tabs a:hover::after {
  transform: scaleX(1) translateY(0);
}

/* 管理画面の編集リンクには影響させない */
.nav-tabs p a:not(.acms-admin-module-edit) {
  font-family: inherit;
  font-weight: normal;
  font-size: 12px;
  border-right: none;
  padding: 0;
}

/* 右セカンダリセクション */
.nav-secondary {
  position: relative;
  background: var(--bg-soft);
  margin-left: 48px;
  padding: 12px 0px 12px 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-grow: 1;
}

/* 右端まで背景を伸ばす */
.nav-secondary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 100%;
  width: 100vw;
  background: var(--bg-soft);
}

.nav-secondary-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  line-height: 1.5;
  background: none;
  padding: 0;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-secondary-label::before {
  content: "▸";
  color: var(--accent);
}

/* ピルリンク群 */
.nav-secondary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: none;
  padding: 0;
  height: auto;
  overflow-x: visible;
}

.nav-secondary-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: color .25s ease, border-color .15s ease .25s;
  z-index: 0;
}

.nav-secondary-links a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background-color: var(--accent);
  border-radius: 999px;
  transition: height .3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.nav-secondary-links a:hover {
  color: #fff;
  border-color: var(--accent);
}

.nav-secondary-links a:hover::before {
  height: 100%;
}

.ns-menu .nav-secondary-links a:hover {
  color: var(--accent);
}

.ns-menu .nav-secondary-links a:hover::before {
  content: none;
}


/* ============================================================
  css 上書き
============================================================ */

.acms-container > .acms-grid {
  padding-left: 0px;
  padding-right: 0px;
}

#adminBox, .acms-admin-box {
  width: 100%;
  max-width: 1132px;
  margin: 30px auto 10px auto;
}

.topicpath-list {
  margin-left: 24px;
  margin-right: 24px;
}

.page-title {
  padding-left: 24px;
  padding-right: 24px;
}

/* ============================================================
  Artist Components
============================================================ */

/* Artist Listing Section */
.p-entry-artist-section {
  margin-top: 3rem;
  padding-top: 3rem;
  margin-left: 10px;
  margin-right: 10px;
  border-top: 1px solid #e5e7eb;
}

.artist-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  color: #111827;
}

.artist-title-bar {
  width: 0.5rem;
  height: 2rem;
  background-color: var(--accent);
  margin-right: 0.75rem;
  display: inline-block;
}

.p-entry-artist-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .p-entry-artist-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Artist Card */
.c-artist-card {
  display: flex;
  align-items: start;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
}

.c-artist-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.artist-thumb-wrap {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  margin-right: 1.5rem;
  overflow: hidden;
  border-radius: 9999px;
  border: 2px solid #f9fafb;
}

.artist-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-thumb-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.artist-thumb-placeholder i {
  font-size: 1.875rem;
  color: #d1d5db;
}

.artist-info {
  flex-grow: 1;
}

.artist-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #111827;
}

.artist-name a {
  text-decoration: none;
  color: inherit;
}

.artist-name a:hover {
  text-decoration: underline;
}

.artist-summary {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.625;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.artist-details-link {
  margin-top: 0.75rem;
}

.artist-details-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.artist-details-btn:hover {
  color: #1d4ed8;
}

.artist-details-icon {
  margin-left: 0.25rem;
  font-size: 10px;
}

/* Artist Profile Detail Page */
.p-entry-artist-profile {
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.artist-profile-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .artist-profile-inner {
    flex-direction: row;
  }
}

.artist-profile-img-box {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .artist-profile-img-box {
    width: 20rem;
  }
}

.artist-profile-img-wrap {
  border-radius: 8px;
  overflow: hidden;
  background-color: #f9fafb;
}

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

.artist-profile-placeholder {
  color: #d1d5db;
}

.artist-profile-img-caption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
}

.artist-profile-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.artist-profile-name {
  font-size: 1.2rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: #111827;
}

.artist-profile-underline {
  width: 3rem;
  height: 0.3rem;
  background-color: var(--accent);
  margin-bottom: 2rem;
  border-radius: 9999px;
}

.artist-profile-description {
  color: #374151;
  line-height: 1.625;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.artist-profile-links-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.artist-web-btn {
  /* display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: #111827;
  color: #ffffff;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s; */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.artist-web-btn:hover {
  /* background-color: #1d4ed8; */
  background-color: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.artist-sns-list {
  display: flex;
  gap: 0.75rem;
}

.artist-sns-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-soft);
  border-radius: 9999px;
  color: #4b5563;
  transition: all 0.3s;
}

.artist-sns-icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.artist-sns-icon.is-x:hover {
  background-color: #000000;
  color: #ffffff;
}

.artist-sns-icon.is-instagram:hover {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  color: #ffffff;
}

.artist-sns-icon.is-youtube:hover {
  background-color: #ff0000;
  color: #ffffff;
}


/* ============================================================
  Performance / Schedule Components
============================================================ */

/* Performance Profile Detail */
.p-entry-performance-profile {
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.performance-profile-inner {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .performance-profile-inner {
    flex-direction: row;
  }
}

.performance-flyer {
  width: 100%;
  background-color: #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .performance-flyer {
    width: 33.333333%;
  }
}

.performance-flyer-img-wrap {
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  max-width: 100%;
}

.performance-flyer-img {
  width: 100%;
  height: auto;
  display: block;
}

.performance-flyer-placeholder {
  color: #d1d5db;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.performance-flyer-placeholder p {
  font-size: 0.75rem;
  margin-top: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.performance-details {
  width: 100%;
  padding: 2rem;
  background-color: #ffffff;
}

@media (min-width: 1024px) {
  .performance-details {
    width: 66.666667%;
    padding: 3rem;
  }
}

.performance-status-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.performance-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.performance-status-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.performance-status-badge.is-soldout {
  background-color: #aaaaaa;
}

.performance-status-badge.is-onsale {
  background-color: var(--accent);
}

.performance-info-title {
  font-size: 1.875rem;
  font-weight: 900;
  color: #111827;
  margin-bottom: 2.5rem;
  line-height: 1.25;
}

.performance-info-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .performance-info-list {
    grid-template-columns: 120px 1fr;
  }
}

/* dt と dd をペアで区切り線を付ける */
.performance-info-dt,
.performance-info-dd {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.performance-info-dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
}

.performance-info-dt svg {
  color: var(--accent);
  flex-shrink: 0;
}

.performance-info-dd {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.6;
  margin-inline-start: 0;
}

.performance-date-val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.performance-time-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 400;
}

.performance-time-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.performance-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background-color: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.performance-download-btn:hover {
  background-color: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.performance-download-btn svg {
  flex-shrink: 0;
  transition: stroke 0.2s;
}
.performance-download-btn:hover svg {
  stroke: #ffffff;
}

.performance-ticket-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.performance-ticket-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background-color: var(--bg-soft);
  border: 1px solid #f97316;
  color: #f97316;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.performance-ticket-btn:hover {
  background-color: #f97316;
  color: #ffffff;
  border-color: #f97316;
}

.performance-ticket-btn svg {
  flex-shrink: 0;
  transition: stroke 0.2s;
}

.performance-ticket-btn:hover svg {
  stroke: #ffffff;
}

.performance-description {
  margin-top: 2rem;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}

.performance-notes-box {
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  background-color: #efefef;
  border-radius: 6px;
  border: 1px dotted #cccccc;
}

.performance-notes-title {
  font-size: 13px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.performance-notes-title svg {
  width: 18px;
  height: 18px;
  color: #888888;
  flex-shrink: 0;
}

.performance-notes-body {
  font-size: 13px;
  color: #333333;
  line-height: 1.6;
  font-weight: 400;
}

/* Performance Listing in Artist Profile */
.c-performance-list-card {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
}

.c-performance-list-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.performance-list-thumb-wrap {
  width: 10rem;
  height: auto;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.performance-list-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.performance-list-date {
  font-size: 0.875rem;
  font-weight: 700;
  color: #2563eb;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.performance-list-name {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  color: #111827;
}

.performance-list-name a {
  text-decoration: none;
  color: inherit;
}

.performance-list-name a:hover {
  text-decoration: underline;
}

.performance-list-summary {
  font-size: 0.875rem;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.performance-list-details-wrap {
  margin-top: 1rem;
}

.performance-list-details-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s;
}

.performance-list-details-btn:hover {
  color: #2563eb;
}

/* About Performance Section */
.p-entry-performance-about {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.performance-about-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.performance-about-bar {
  width: 0.375rem;
  height: 2rem;
  background-color: #2563eb;
  border-radius: 9999px;
}

.performance-about-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #111827;
}

.performance-about-body {
  font-size: 1.125rem;
  color: #374151;
  line-height: 2;
  font-weight: 500;
}

/* ── NavStow カスタマイズ ─────────────────────────────── */

/* バーガーボタンをモバイル時のみ表示 */
.ns-burger-placeholder {
  display: none;
}
@media (max-width: 1024px) {
  .ns-burger-placeholder {
    display: flex;
  }
}

/* button.el でヘッダー内に置いた場合は position をリセット */
header .ns-button {
  position: static !important;
  top: auto;
  right: auto;
  background-color: var(--accent);
}

/* ヘッダーをメニューパネル(z-index:9999)より前面に出してボタンが隠れないようにする */
header {
  position: relative;
  z-index: 10001;
}

/* ── NavStow メニュー内スタイル調整 ─────────────────────── */

/* セクション間の余白（デフォルト24px）を半分に。
   4つの区切り（公演情報/アーティスト情報の下・主な実績の下・
   個人情報保護方針と電話番号の間・電話番号とお問い合わせボタンの間）が
   すべて同じ12pxになるよう、.ns-wrap 全体を一括で上書きする。 */
.ns-menu .ns-wrap {
  margin-bottom: 12px;
}

/* ヘッダー(z-index:10001)の下からメニューを開始 */
.ns-menu {
  top: 76px; /* desktop header height: 18px + 40px logo + 18px */
  padding-top: 24px;
}
@media (max-width: 800px) {
  .ns-menu {
    top: 68px; /* mobile header height: 14px + 40px logo + 14px */
    padding-top: 24px;
  }
}

/* 電話ブロックのPC用ボーダーをメニュー内では非表示 */
.ns-menu .phone-block {
  border-left: none;
  padding-left: 0;
}

.ns-menu .nav-tabs a {
  display: block;
}

/* サブナビリンク（ピル）の間隔 */
.ns-menu .ns-wrap-links a {
  margin-bottom: 8px;
}

/* ヘッダーの補助リンク（会社概要・個人情報保護方針など）を、
   他の .ns-wrap-links 項目と同じく縦積み・箱幅いっぱいのボタンにする。
   PC 版は横並び（.top-nav-links { display:flex }）のままにしたいので、
   .ns-menu 配下（複製側）だけ上書きする。
   ▸ アイコンは PC 版と同じく残す（.top-nav-links a::before は元のCSSのまま）。
   border-bottom は上の .ns-wrap-links>nav a で他項目と同じ線が入るので、
   ここでは縦積み化と余白の調整のみ行う。 */
.ns-menu .top-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ns-menu .top-nav-links a {
  display: block;
  width: 100%;
  padding: 14px 0;
  margin-bottom: 0;
}

/* ============================================================
  NEWS & TOPICS セクション — ヘッダー揃え
============================================================ */

/* NEWS: タイトル下端にリンクを揃えるためline-heightを1.1に統一
   （デフォルトのline-height 1.7が要素に余白を作りズレる原因） */
.news-header {
  align-items: flex-end;
  gap: 12px;
}
.news-header .section-title-lg {
  line-height: 1.1;
}

/* NEWS: 「一覧はこちら」リンクを EVENT SCHEDULE と同スタイルに統一 */
.p-home-news-sns .view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: none;
  transition: gap .15s ease;
}
.p-home-news-sns .view-all:hover {
  gap: 10px;
  color: var(--accent);
}
.p-home-news-sns .view-all svg {
  flex-shrink: 0;
}

/* EVENT SCHEDULE: section-header のタイトルも同様に下端揃えを保証 */
.p-home-performance .section-header {
  align-items: flex-end;
}
.p-home-performance .section-header .section-title-lg {
  line-height: 1.1;
}

.p-home-marquee .section-title-lg {
  line-height: 1.1;
}

/* ============================================================
  Artist Marquee — ホバー時に行をまたいで前面表示
============================================================ */

/* 各行コンテナに position を与えて z-index が効くようにする */
.p-home-marquee-group .l-marquee-container {
  position: relative;
  z-index: 1;
}

/* ホバー中の画像がある行を前面に */
.p-home-marquee-group .l-marquee-container:has(.artist-item:hover) {
  z-index: 10;
}

/* plus.css の scale(1) 上書き → 拡大を有効に */
.p-home-marquee-group .artist-item:hover {
  transform: scale(1.15) !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 20;
}

/* ============================================================
  NEWS & TOPICS / Social Feed — レスポンシブ
============================================================ */
@media (max-width: 800px) {
  .p-home-news-sns {
    padding: 40px 0;
  }

  .p-home-news-sns .l-container {
    flex-direction: column;
    gap: 40px;
  }

  /* 2行グリッド:
       row1: [date] [tag]
       row2: [title................] [arrow] */
  .c-news-item {
    /* display: grid; */
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
  }

  .news-date {
    grid-column: 1;
    grid-row: 1;
  }

  .news-tag {
    grid-column: 2;
    grid-row: 1;
  }

  .news-title {
    grid-column: 1 / 4; /* 1〜3列目を占有（arrowと同じ行で隣り合う） */
    grid-row: 2;
    width: auto;
    min-width: 0;
  }

  .c-news-item .material-symbols-outlined {
    grid-column: 4;
    grid-row: 2;
    margin-left: 0;
    align-self: center;
  }

  .c-sns-card {
    border: none;
    border-top: 1px solid #ddd;
    padding: 40px 0 24px 0;
  }
}

/* ============================================================
   EVENT SCHEDULE Redesign (Top Page)
   ============================================================ */

/* 1. セクション全体の定義 */
.p-home-performance {
  padding: 96px 0 !important; /* デスクトップ基準: 96px 40px */
}

/* 2. セクションヘッダー (Section Head) */
.p-home-performance .section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 16px;
}

/* .p-home-performance .section-title-sm {
  font-family: var(--font-sans-jp, 'Noto Sans JP', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.p-home-performance .section-title-lg {
  font-family: var(--font-en, 'Inter', sans-serif);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
} */

.p-home-performance .view-all {
  font-family: var(--font-sans-jp, 'Noto Sans JP', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
  display: inline-flex;
  align-items: center;
}

.p-home-performance .view-all:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: none !important; /* plus.css の translateX(4px) を打ち消す */
}

/* 3. カードスライダー親要素 */
.p-home-performance-grid {
  position: relative;
  margin: 0 -8px;
}

/* 4. スライド個別のトランジションと表示制御 */
.swiper-slide {
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.25s ease !important;
}

/* swiper-wrapperはloopモードで左に大きく平行移動され、
   範囲外のスライド（左カード）のクリックを横取りするため無効化。
   スライド自体はpointer-events: autoを明示して操作可能に保つ。 */
.p-home-performance .swiper-wrapper {
  pointer-events: none !important;
}
.p-home-performance .swiper-slide {
  pointer-events: auto !important;
}

/* 左右の非アクティブカードのぼかし・半透明を無効化（目標デザイン仕様に準拠） */
.p-home-performance .swiper-slide:not(.swiper-slide-active) {
  filter: none !important;
  opacity: 1 !important;
}

/* z-index 順序: active(3) > prev/next(2) > clone(1) */
.p-home-performance .swiper-slide-active {
  z-index: 3 !important;
}
.p-home-performance .swiper-slide-prev,
.p-home-performance .swiper-slide-next {
  z-index: 2 !important;
}
/* loopモードのクローンスライドはクリックをブロックしない */
.p-home-performance .swiper-slide-duplicate {
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 5. イベントカードのベーススタイル */
.p-home-performance-grid .c-card {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 0 rgba(20,23,28,0.04) !important; /* --shadow-card */
  transition: transform .25s ease, box-shadow .25s ease !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 6. 中央カード (Active Slide) の強調表示 */
.swiper-slide-active .c-card {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 24px 60px -20px rgba(11,78,162,0.25), 0 4px 12px rgba(20,23,28,0.05) !important; /* --shadow-featured */
}

/* 7. カード画像エリア
   チラシ（A判・B判の縦 = 1:√2）がそのまま収まるよう枠を A4 縦の比率にする。
   比率の違う画像は contain で長辺を枠いっぱいに合わせ、縦横中央に置く。
   余白はアーティスト一覧のサムネイルと同じ台紙色で埋める。 */
.p-home-performance-grid .c-card__img {
  /* 横幅を明示する。auto のままだと、スマホ用の max-height が aspect-ratio を通して
     横幅の上限にも換算され、枠ごと細くなって左に寄ってしまう。 */
  width: 100%;
  aspect-ratio: 210 / 297 !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--bg-light);
}

/* リンクと画像は枠の四辺に貼り付ける。height: 100% だと、iOS Safari が aspect-ratio で決まった
   枠の高さを基準にせず、画像が本来の比率で伸びて下が切れる（width: 100% を足してから顕在化）。 */
.p-home-performance-grid .c-card__img > a,
.p-home-performance-grid .c-card__img > img {
  position: absolute;
  inset: 0;
}

.p-home-performance-grid .c-card__img a {
  display: block;
  width: 100%;
  height: 100%;
}

.p-home-performance-grid .c-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform .4s ease !important; /* transition 0.4s */
}

.p-home-performance-grid .c-card:hover .c-card__img img {
  transform: scale(1.04) !important; /* zoom scale(1.04) */
}

/* 8. ステータスバッジ (Status Pill) */
.p-home-performance-grid .c-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 5px 12px 5px 10px !important;
  font-family: var(--font-sans-jp, 'Noto Sans JP', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important; /* --shadow-pill */
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 10 !important;
}

.event-cta .c-badge {
  position: inherit !important;
  top: 14px !important;
  left: 14px !important;
  background: var(--accent) !important;
  border-radius: 999px !important;
  padding: 5px 12px 5px 10px !important;
  font-family: var(--font-sans-jp, 'Noto Sans JP', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  box-shadow: none !important; /* --shadow-pill */
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 1 !important;
  margin-right: auto;
}
.event-cta .c-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.event-cta .c-badge.is-soldout {
    background-color: #aaaaaa !important;
}


.p-home-performance-grid .c-badge .badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

/* 9. カードボディ (card-content) */
.p-home-performance-grid .card-content {
  padding: 22px 22px 24px !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* メタデータ行 (日程・場所) */
.p-home-performance-grid .card-meta {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  color: var(--ink-2) !important;
  font-size: 12px !important;
  font-family: var(--font-sans-jp, 'Noto Sans JP', sans-serif) !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

/* アイコン */
.p-home-performance-grid .card-meta .material-symbols-outlined {
  font-size: 16px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* 日付の文字強調 (デザインで Inter 600 とされているため、Twigで直の日付と時間を適正配置) */
.p-home-performance-grid .top-schedule-time {
  margin-left: 6px !important;
  font-family: var(--font-sans-jp, 'Noto Sans JP', sans-serif) !important;
  font-weight: 400 !important;
  color: var(--ink-2) !important;
}

/* タイトル (EVENT TITLE) */
.p-home-performance-grid .c-card h4 {
  font-family: var(--font-serif-jp, 'Noto Serif JP', serif) !important; /* 明朝体！ */
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin: 12px 0 14px !important;
  transition: color .15s ease !important;
}

.p-home-performance-grid .c-card:hover h4 {
  color: var(--accent) !important;
}

/* 料金 */
.p-home-performance-grid .price {
  font-family: var(--font-sans-jp, 'Noto Sans JP', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-2) !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

.p-home-performance-grid .price-label {
  color: var(--accent) !important;
  font-weight: 600 !important;
  margin-right: 6px !important;
}

/* 注釈 (注意事項) */
.p-home-performance-grid .nontes {
  font-family: var(--font-sans-jp, 'Noto Sans JP', sans-serif) !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

/* 10. CTA フッタ (details-link) */
.p-home-performance-grid .card-footer {
  border-top: 1px solid var(--line) !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  display: flex !important;
  flex-direction: row !important; /* plus.css の column を打ち消し */
  justify-content: flex-end !important; /* 右寄せ */
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  background: none !important;
}

/* details-link 内のあらゆる span に対する plus.css の強制ボーダーや色の打ち消し */
.p-home-performance-grid .card-footer .details-link span {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.p-home-performance-grid .details-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  border-bottom: none !important; /* 下線を完全消去 */
}

.p-home-performance-grid .details-text {
  font-family: var(--font-en, 'Inter', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
  color: var(--ink) !important;
  transition: color .15s ease !important;
  line-height: 1 !important;
  border-bottom: none !important;
}

.p-home-performance-grid .details-arrow {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--ink) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color .15s ease, transform .15s ease !important;
  border-bottom: none !important;
  flex-shrink: 0 !important;
}

/* details-arrow 内 SVG の色・サイズ制御 (Material Icons は使わない) */
.p-home-performance-grid .details-arrow svg {
  display: block !important;
  stroke: #ffffff !important;
  width: 12px !important;
  height: 12px !important;
}

/* ホバー時の挙動 */
.p-home-performance-grid .c-card:hover .details-text {
  color: var(--accent) !important;
}

.p-home-performance-grid .c-card:hover .details-arrow {
  background-color: var(--accent) !important;
  transform: translateX(2px) !important;
}

/* 11. Swiper 左右ナビゲーションボタン → 下部の統合スタイルへ移行 */

.p-home-performance-grid .c-card:hover .details-arrow svg {
  stroke: #ffffff !important;
}

/* 12. ページネーションドット (Dots) */
.p-home-performance .swiper-pagination {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 36px !important;
}

.p-home-performance .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background-color: rgba(20,23,28,0.2) !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  margin: 0 !important;
  transition: width .25s ease, border-radius .25s ease, background-color .25s ease !important;
}

.p-home-performance .swiper-pagination-bullet-active {
  width: 24px !important;
  height: 8px !important;
  border-radius: 4px !important;
  background-color: var(--accent) !important;
}

/* 13. モバイル・タブレット用のレスポンシブ微調整 */
@media (max-width: 1100px) {
  .swiper-slide-active .c-card {
    transform: translateY(-4px) scale(1.01) !important; /* 浮き上がりを弱める */
  }
}

@media (max-width: 800px) {
  .p-home-performance {
    padding: 64px 0 !important; /* モバイル基準: 64px 20px */
  }

  .p-home-performance .section-title-lg {
    font-size: 32px !important; /* 少し小さめに */
  }

  .p-home-performance-grid {
    margin: 0;
  }

  .p-home-performance .swiper {
    padding: 16px 20px 36px 20px !important;
  }

  /* モバイルでは浮き上がりをなくす */
  .swiper-slide-active .c-card {
    transform: none !important;
    box-shadow: 0 1px 0 rgba(20,23,28,0.04) !important;
  }

  /* 画面の低い端末でカード全体が1画面に収まるよう、画像枠の高さに上限を設ける。
     320px は画像下の文字エリア（タイトル3行・期間表示の日付を含む最大値）と余白の合計。
     A4 比率の高さの方が低い端末（縦に十分長い Android など）では上限は効かない。
     svh はアドレスバーが広がった状態の高さで、スクロール中に画像が伸縮しない。
     svh 非対応ブラウザ向けに vh を先に書いておく。 */
  .p-home-performance-grid .c-card__img {
    max-height: calc(100vh - 320px);
    max-height: calc(100svh - 320px);
  }
}

/* ============================================================
  公演情報 一覧ページ
============================================================ */

/* ヘッダー */
.p-schedule-list {
  margin-top: 30px;
  margin-bottom: 30px;
}

.schedule-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0;
}

.schedule-list-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* フィルターボタン */
.schedule-filter-wrap {
  position: relative;
}

.schedule-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}

.schedule-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* フィルターグループ（公演種類ドロップダウン ＋ 年度ドロップダウン） */
.schedule-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 600px) {
  .schedule-list-header {
    flex-wrap: wrap;
  }
  .schedule-filter-group {
    justify-content: flex-start;
  }
}

/* 絞り込み中の公演種類（タイトル下のテキスト表示） */
.schedule-active-filter {
  margin: 12px 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

/* dest/unit_extend.css の「.acms-container { overflow: hidden }」（画像のはみ出し防止用）
   が、絶対配置のフィルタープルダウンをコンテナの枠で切り取ってしまうための回避。
   ページが短いとき（0件・非ログイン時など）にプルダウン下部が切れる問題への対応。
   プルダウンを持つコンテナだけに限定して解除する。
   横スクロール防止は body { overflow-x: hidden }（dest/plus.css）が別途効いている。 */
.acms-container:has(.schedule-filter-dropdown) {
  overflow: visible;
}

/* ドロップダウン */
.schedule-filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 100;
  overflow: hidden;
}

/* 年度リストは項目が増えると画面の縦幅を超えるため、
   10件分を超えたらプルダウン内でスクロールさせる。
   1項目の高さ ≒ font-size 13px × line-height 1.7 ＋ 上下padding 9px×2 ≒ 40px。
   全体は border-box なので ul 自身の上下padding(12px)も加算する。
   画面の低い端末では 60vh で頭打ちにして、画面外へはみ出さないようにする。 */
.schedule-filter-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  --filter-option-height: 40px;
  max-height: min(calc(var(--filter-option-height) * 10 + 12px), 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.schedule-filter-option {
  display: block;
  width: 100%;
  padding: 9px 18px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  border: none;
  text-decoration: none; /* <a> タグ対応 */
  cursor: pointer;
  transition: background .1s, color .1s;
}

.schedule-filter-option:hover {
  background: var(--bg-soft);
  color: var(--accent);
}

.schedule-filter-option.is-active {
  color: var(--accent);
  font-weight: 700;
}

/* 公演種類チェックリスト（縦積み） */
.schedule-filter-dropdown-checklist {
  min-width: 220px;
}

.schedule-filter-checklist {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.schedule-filter-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .1s, color .1s;
}

.schedule-filter-checklist-item:hover {
  background: var(--bg-soft);
  color: var(--accent);
}

.schedule-filter-checklist-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.schedule-filter-checklist-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

.schedule-filter-reset-btn {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
}

.schedule-filter-reset-btn:hover {
  color: var(--accent);
}

.schedule-filter-apply-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: opacity .15s;
}

.schedule-filter-apply-btn:hover {
  opacity: .85;
}

/* エントリーリスト */
.schedule-entry-list {
  display: flex;
  flex-direction: column;
}

.schedule-entry-list p.nolist {
  margin: 24px 10px 16px 10px;
}

/* 各カード */
.c-schedule-list-item {
  border-bottom: 1px solid var(--line);
}

.schedule-item-inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}

.c-schedule-list-item:last-child {
  border-bottom: none;
}

.schedule-item-title a {
  color: inherit;
  text-decoration: none;
}

.schedule-item-title a:hover {
  color: var(--accent);
}

.schedule-item-artist-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: contents;
}

.schedule-item-artist-link:hover {
  text-decoration: underline;
}

.schedule-item-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-top: 4px;
  transition: gap .15s;
  align-self: flex-start;
}

.schedule-item-more:hover {
  gap: 9px;
}

.schedule-item-body .performance-download-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* サムネイル */
.schedule-item-thumb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.schedule-item-badge-wrap {
  display: flex;
  justify-content: center;
}

.schedule-item-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: auto;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-light);
  aspect-ratio: 1/1;
}

.thumbsize320 {
  width: 360px;
}

.schedule-item-thumb a {
  width: 100%;
  height: 100%;
}

.schedule-item-thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}

.schedule-item-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}

/* 本文 */
.schedule-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-item-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.03em;
}

.schedule-item-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 2px 0;
}

.c-schedule-list-item:hover .schedule-item-title {
  color: var(--accent);
}

.schedule-item-time-item {
  font-size: 14px;
  color: var(--ink-3);
  white-space: nowrap;
}

.schedule-item-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}

.schedule-item-detail-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: var(--ink-2);
}

.schedule-item-detail-item svg {
  color: var(--accent);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.schedule-item-notes {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
}


/* 該当なしメッセージ */
.schedule-no-results {
  padding: 48px 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
}

/* モバイル */
@media (max-width: 600px) {
  .schedule-item-inner {
    flex-direction: column;
    gap: 16px;
    padding: 20px 4px;
  }

  .schedule-item-thumb-wrap {
    width: 100%;
  }

  .schedule-item-thumb {
    width: 100%;
    height: auto;
    /* aspect-ratio: 1 / 1; */
  }

  .schedule-item-title {
    font-size: 20px;
  }

  .schedule-item-date {
    font-size: 14px;
  }

  .schedule-item-detail-item {
    font-size: 15px;
  }

  .schedule-item-time-item {
    font-size: 13px;
  }
}

/* ============================================================
  EVENT SCHEDULE セクション — デザイン合わせ
============================================================ */

/* 背景を bg-soft に統一、浮遊光アニメーションは維持 */
.p-home-performance {
  background-color: var(--bg-soft) !important;
  margin-bottom: 0;
}

/* セクションヘッダー */
/* .p-home-performance .section-title-sm {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
} */

/* .p-home-performance .section-title-lg {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.04em;
} */

/* 一覧リンク — 矢印付き */
.p-home-performance .view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  transition: gap .15s ease;
}
.p-home-performance .view-all:hover {
  gap: 10px;
}

/* カード */
.c-card {
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(20,23,28,0.04) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* アクティブスライドを浮き上がらせる（featured 演出） */
.swiper-slide-active .c-card {
  box-shadow: 0 24px 60px -20px rgba(178, 178, 178, 0.25), 0 4px 12px rgba(46, 46, 46, 0.05) !important;
  transform: translateY(-6px) scale(1.02);
}

/* 画像プレースホルダー（画像なし時） */
.c-card__img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background:
    repeating-linear-gradient(45deg, rgba(11,78,162,0.04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #e6e2d8, #d8d3c6);
}

/* バッジ */
.c-badge {
  font-size: 11px !important;
  font-weight: 500 !important;
  gap: 6px !important;
  padding: 5px 12px 5px 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
.badge-dot {
  background: var(--accent) !important;
  width: 6px !important;
  height: 6px !important;
}
.c-badge.is-off .badge-dot {
  background: #dc2626 !important;
}

/* アイコン */
.icon-i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ink-3);
}

/* メタ行 */
.card-meta {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
  margin-bottom: 6px !important;
}
.card-meta .material-symbols-outlined {
  display: none; /* SVG に差し替え済みのため非表示 */
}
.card-meta .date {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}

/* タイトル */
.event-title {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  color: var(--ink) !important;
  margin: 6px 0 10px !important;
  line-height: 1.3 !important;
  min-height:2.6em;
}

/* 料金 */
.event-price {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.7;
}
.event-price .label {
  color: var(--accent);
  font-weight: 600;
  margin-right: 4px;
}

/* 注意書き */
.event-note {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
}

/* VIEW DETAILS */
.event-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.details-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.06em;
  transition: gap .15s ease;
}
.details-link:hover {
  gap: 10px;
}
.details-arrow {
  display: inline-flex;
}

/* モバイル */
@media (max-width: 800px) {
  .p-home-performance .section-title-lg {
    font-size: 1.5rem;
  }
  .swiper-slide-active .c-card {
    transform: none;
  }
}

/* ── EVENT SCHEDULE: Swiper ナビゲーション矢印 ────────── */
.p-home-performance .swiper-button-prev,
.p-home-performance .swiper-button-next {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--accent) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Swiper デフォルトの ::after テキスト矢印を非表示 */
.p-home-performance .swiper-button-prev::after,
.p-home-performance .swiper-button-next::after {
  content: none !important;
  display: none !important;
}
/* SVG 矢印 */
.p-home-performance .swiper-button-prev svg,
.p-home-performance .swiper-button-next svg {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
  display: block;
}
.p-home-performance .swiper-button-prev:hover,
.p-home-performance .swiper-button-next:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.p-home-performance .swiper-button-prev:hover svg,
.p-home-performance .swiper-button-next:hover svg {
  stroke: #fff;
}
.p-home-performance .swiper-button-prev {
  left: 0 !important;
}
.p-home-performance .swiper-button-next {
  right: 0 !important;
}

/* ============================================================
  TOPページ ヒーロースライダー
============================================================ */

.p-hero {
  width: 100%;
  background: #111; /* 動画読み込み前のフォールバック */
  position: relative;
  overflow: hidden; /* 動画がはみ出さないようにクリップ */
}

/* 背景動画 */
.p-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ドットオーバーレイ
   小さな透明ドットを敷き詰め、隙間を暗色で埋めることで
   薄暗いドットスクリーン（ハーフトーン）効果を演出 */
.p-hero-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    transparent 1px,
    rgba(0, 0, 0, 0.55) 1px
  );
  background-size: 4px 4px;
  z-index: 1;
}

/* スライダーと矢印を動画・オーバーレイの前面に */
.hero-swiper,
.hero-nav {
  position: relative;
  z-index: 2;
}

/* ============================================================
  ヒーロー スライドトランジション
  - swiper-slide の opacity を !important で 1 固定 → Swiper の opacity 操作を完全無効化
  - .hero-slide の opacity を JS クラス（.hero-slide--active）で直接制御
  - 旧スライド: 0.35s でフェードアウト
  - ギャップ（約 0.15s）: 背景動画だけ見える
  - 新スライド: 0.5s 後にフェードイン（0.55s）＋ Ken Burns ズーム
  → arrows / pagination / autoplay すべて同一コードパスになり競合なし
============================================================ */

/* Swiper の fade による opacity 変更を無効化 — 全て .hero-slide で制御 */
.hero-swiper .swiper-slide {
  opacity: 1 !important;
  pointer-events: none; /* 非アクティブスライドへのクリックを透過 */
}
.hero-swiper .swiper-slide-active {
  pointer-events: auto;
}

/* .hero-slide: デフォルトは不可視、フェードアウト用トランジション */
/* （position / inset / width / height は下の .hero-slide ブロックで定義） */

/* アクティブ: JS で .hero-slide--active を付与 → ギャップ後にフェードイン＋ズーム */
.hero-slide--active {
  opacity: 1 !important;
  transition: opacity 0.55s ease 1.0s !important; /* 1.0s 後にフェードイン（gap 約 0.65s） */
  animation: heroSlideReveal 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 1.0s;
}

@keyframes heroSlideReveal {
  from { transform: scale(1.05); }
  to   { transform: scale(1.0); }
}

.hero-swiper {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  height: clamp(380px, 42vw, 520px);
}

.hero-swiper .swiper-wrapper {
  height: 100%;
}

.hero-swiper .swiper-slide {
  width: 100% !important;
  height: 100% !important;
}

/* 各スライド — swiper-slide が position:absolute になるため
   内部も absolute で明示配置し flex/grid の幅計算問題を回避
   opacity:0 をデフォルトとし、.hero-slide--active で 1 に */
.hero-slide {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s ease 0s; /* フェードアウト用 */
}

/* 左：画像エリア（2/3） */
.hero-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 66.666%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-soft);
}

.hero-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.hero-visual-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}

/* イベント画像登録時：背景（hero_image）の上に重ねてセンター揃えで並べる。
   トリミングせず縦横比を保ったまま表示する。 */
.hero-visual-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: 32px;
  background: var(--bg-soft);
}

/* 背景画像がある場合はそのまま透過させて見せる */
.hero-visual-grid.has-bg {
  background: transparent;
}

.hero-visual-grid-item {
  flex: 0 1 auto;
  height: 65%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hero-visual-grid-item img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* 右：テキストエリア（1/3） */
.hero-text-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 33.334%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  box-sizing: border-box;
  background: #cfe1f3; /* デフォルト色（インラインstyleで上書き） */
}

.hero-text-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* キャッチコピー */
.hero-catch {
  font-family: "Noto Serif JP", "HiraMinProN-W6", serif;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin: 0;
}

/* 本文 */
.hero-body-text {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
}

/* CTAボタン */
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background .15s ease;
  margin-top: 4px;
}

/* ボタン内の矢印 SVG だけ横移動（gap を変えるとボタン幅が広がるため） */
.hero-cta-btn svg {
  transition: transform .15s ease;
  flex-shrink: 0;
}

.hero-cta-btn:link,
.hero-cta-btn:hover,
.hero-cta-btn:visited,
.hero-cta-btn:active {
  color: #fff;
}

.hero-cta-btn:hover {
  background: #0a3f85;
}

.hero-cta-btn:hover svg {
  transform: translateX(4px);
}

/* ページネーション（ドット） — Swiper のデフォルト left:0; width:100% を上書き */
.hero-swiper .hero-pagination {
  bottom: 16px !important;
  left: 50% !important;
  width: auto !important;
  transform: translateX(-50%) !important;
  z-index: 20;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  opacity: 1;
  transition: all .2s ease;
  cursor: pointer;
  margin: 0 !important;
}

.hero-pagination .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 5px;
  background: #fff;
}

/* ナビゲーション矢印（.hero-swiper 基準、端から半分はみ出す） */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.4);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease;
  color: var(--ink);
}

.hero-nav:hover {
  background: #fff;
}

.hero-nav-prev { left: 2px; }
.hero-nav-next { right: 2px; }

/* スライドが1枚のときはナビ・ドットを非表示
   （Swiper 12 では loop 時も swiper-loop クラスは付かないため JS 側で制御） */
.hero-swiper .swiper-pagination-bullet:only-child {
  display: none;
}

/* モバイルでは背景動画を非表示、poster 画像を背景として代替表示 */
@media (max-width: 768px) {
  .p-hero-bg-video {
    display: none;
  }
  .p-hero {
    background-image: url('../images/top_bg_poster.jpg');
    background-size: cover;
    background-position: center;
  }
}

/* レスポンシブ：800px以下で縦積み */
@media (max-width: 800px) {
  .hero-swiper {
    height: auto;
  }

  .hero-swiper .swiper-wrapper {
    height: auto;
  }

  .hero-swiper .swiper-slide {
    height: auto !important;
    position: relative !important; /* absolute を解除して通常フローに戻す */
  }

  .hero-slide {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }

  /* 画像・テキストを absolute から通常フローに戻す */
  .hero-visual {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .hero-visual-grid {
    gap: 8px;
    padding: 16px;
  }

  .hero-visual-grid-item {
    max-width: 42%;
  }

  .hero-text-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    padding: 32px 24px;
    align-items: flex-start;
  }

  .hero-catch {
    font-size: clamp(18px, 5vw, 24px);
  }

  .hero-catch br {
    display: none;
  }

  /* スマホではボタンを横幅いっぱいに */
  .hero-cta-btn {
    align-self: stretch;
    justify-content: center;
  }

  .hero-nav-prev { left: 8px; }
  .hero-nav-next { right: 8px; }

  .hero-pagination {
    bottom: 12px;
  }
}


/* ============================================================
  アーティスト一覧ページ
============================================================ */

.artist-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 32px;
}

.artist-list-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* ジャンルセクション */
.artist-genre-section {
  margin-top: 40px;
}

.artist-genre-section:first-child {
  margin-top: 0;
}

.artist-genre-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.artist-genre-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin: 0;
}

.artist-genre-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: gap .15s;
}

.artist-genre-link:hover {
  gap: 8px;
}

/* グリッド */
.artist-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-left: 10px;
  margin-right: 10px;
}

/* カード */
.c-artist-list-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}

.c-artist-list-card:hover {
  /* box-shadow: 0 6px 24px rgba(0,0,0,0.10); */
  /* transform: translateY(-2px); */
}

/* 写真 */
.artist-list-card-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-light);
  flex-shrink: 0;
}

.artist-list-card-thumb img {
  /* width: 100%;
  height: auto; */
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease;
}

.c-artist-list-card:hover .artist-list-card-thumb img {
  transform: scale(1.05);
}

.artist-list-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
}

/* 本文エリア */
.artist-list-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* ジャンルタグ */
.artist-list-card-genre {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* アーティスト名 */
.artist-list-card-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

.artist-list-card-name a {
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
}

.artist-list-card-name a:hover {
  color: var(--accent);
}

/* プロフィール概要 */
.artist-list-card-summary {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 詳細ボタン */
.artist-list-card-btn {
  align-self: flex-start;
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .artist-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .artist-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .artist-list-card-body {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .artist-card-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ============================================================
  TOPページ NEWSバナー（sns-col内）
============================================================ */

/* バナー2枚を縦に並べ、間隔32px */
.g-top-banner-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* バナー画像：幅100%・高さなり行き（レスポンシブ） */
.g-top-banner-list a {
  display: block;
}

.g-top-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ: バナーリストの横幅を最大幅に制限してセンタリング */
@media (max-width: 800px) {
  .g-top-banner-list {
    max-width: 400px;
    margin: 0 auto;
  }
}


/* ============================================================
  entryページ
============================================================ */
.acms-box-medium {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0;
}
.page-header {
    margin: 0 0 0 0;
    border: none;
}
.entry-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: none;
    border-bottom: 2px solid var(--accent);
    margin: 0 10px 32px 10px;
    padding: 0 0 10px 0;
}

h1.entry-title a {
  margin: 0;
  padding: 0;
}

.entry-footer {
  border-top: none;
  margin: 48px 10px 48px 10px;
  padding: 20px 10px 10px 10px;
}

/* ============================================================
  お問い合わせ
============================================================ */
.contactBtn_wrapper span {
    display: inline-block;
    margin: 0;
    padding: 5px;
    border: none;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    transition: background-color .25s linear;
    background: var(--accent);
}

.contactBtn {
    display: inline-block;
    border: none;
    border-radius: 3px;
    padding: 15px 20px;
    background: none;
    font-size: calc(14px + 0.5vw);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.1em;
}

/* ============================================================
  アーティスト詳細 印刷ボタン
============================================================ */
.artist-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 32px;
}

.artist-title-row .entry-title {
  border-bottom: none;
  margin-bottom: 0;
}

.artist-title-row .artist_printarea {
  flex: 1;
  min-width: 0;
}

.g-print-btn-wrap {
  flex-shrink: 0;
  padding-top: 4px;
}

.g-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}

.g-print-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
  印刷スタイル（A4 / .artist_printarea のみ）
============================================================ */
@media print {
  @page {
    size: A4 portrait;
    margin: 15mm;
  }

  /* PCレイアウトで印刷するため幅を固定 */
  html, body {
    width: 1024px !important;
    min-width: 1024px !important;
  }

  /* 印刷対象外の要素を非表示 */
  header,
  footer,
  aside,
  nav,
  .g-print-btn-wrap,
  .entry-footer,
  .entry-tag-wrapper,
  .page-title-wrapper,
  [class*="topicpath"],
  [class*="pageTitle"],
  [class*="sidemenu"],
  [class*="check-seo"],
  .acms-admin-module-edit,
  .acms-admin-toolbar,
  .p-hero,
  .acms-admin-btn-action-group,
  #adminBox,
  #overlay {
    display: none !important;
  }

  /* printarea・タイトル行以外のmain直下要素を非表示 */
  main > *:not(.artist_printarea):not(.artist-title-row) {
    display: none !important;
  }

  .artist-title-row {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .artist_printarea,
  header.acms-page-header {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 改ページ制御 */
  .artist_printarea + .artist_printarea {
    page-break-before: auto;
  }

  img {
    max-width: 100% !important;
  }

  /* プロフィール全体：縦並びに変更 */
  .artist-profile-inner {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* 写真を約半分のサイズに・中央寄せ */
  .artist-profile-img-box {
    width: 50% !important;
    margin: 0 auto !important;
    flex-shrink: unset !important;
  }

  .artist-profile-img-wrap {
    aspect-ratio: auto !important;
  }

  /* リンクエリア：縦並びに変更 */
  .artist-profile-links-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* WebサイトリンクのURLを表示 */
  .artist-web-btn {
    display: block !important;
  }

  .artist-web-btn svg {
    display: none !important;
  }

  .artist-web-btn::after {
    content: " " attr(href);
    font-size: 11px;
    color: #555;
    font-weight: normal;
    word-break: break-all;
    display: block;
  }

  /* SNSアイコン：Webサイトと同じ横長ブロックで表示 */
  .artist-sns-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .artist-sns-icon {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    background: #f3f4f6 !important;
    border-radius: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .artist-sns-icon svg {
    display: none !important;
  }

  .artist-sns-icon.is-x::before {
    content: "X";
  }

  .artist-sns-icon.is-instagram::before {
    content: "Instagram";
  }

  .artist-sns-icon.is-youtube::before {
    content: "YouTube";
  }

  .artist-sns-icon::after {
    content: "  " attr(href);
    font-size: 11px;
    font-weight: normal;
    color: #555;
    word-break: break-all;
  }
}

/* ============================================================
  Pager（実績一覧ページャー）
  システムの pagination.twig が出力するクラスに対してスタイルを当てる
============================================================ */
.schedule-year-heading {
  font-size: 24px;
  font-weight: 700;
  margin: 32px 10px 16px;
  padding-bottom: 0px;
  border-bottom: 2px solid var(--acms-admin-block-editor-gray-200);
}
.schedule-year-heading:first-child {
  margin-top: 24px;
}

.p-schedule-list .c-schedule-list-item.is-last {
  border-bottom: none;
}

.p-schedule-list .pager {
  margin: 48px 0 24px;
}

.p-schedule-list .pager ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-schedule-list .pager-item a,
.p-schedule-list .pager-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s;
}

/* リンクあり＝他ページ（青） */
.p-schedule-list .pager-item a {
  background: var(--accent);
  color: #fff;
  padding: 0;
}

.p-schedule-list .pager-item a span {
  background: none;
}

.p-schedule-list .pager-item a:hover {
  opacity: 0.75;
}

/* リンクなし＝現在のページ（グレー） */
.p-schedule-list .pager-item > span {
  background: #b0b0b0;
  color: #fff;
  font-weight: 700;
  cursor: default;
}


/*   school link */
/* ------------------------------
ページタイトル
------------------------------ */
.page-title-wrapper_school2 {
  display: table;
  position: relative;
  width: 100%;
  min-height: 250px;
  color: #FFF;
  background: #ccc;
  background-size: cover;
  background-position: center center;
}

@media (max-width: 389px) {
  .page-title-wrapper_school2 {
    min-height: 160px;
  }
}

@media (max-width: 478px) {
  .page-title-wrapper_school2 {
    min-height: 200px;
  }
}

@media (min-width: 768px) {
  .page-title-wrapper_school2 {
    height: 400px;
  }
}