@charset "UTF-8";

/* =========================================================
   インタラクティブ座席表（共通スタイル）
   TOP（/tickets/price_list）とレジーナ（/regina/tickets）で共有する。
   ページ固有の SVG 配色・ハック（wrap-sNN 単位の指定）は含めない。
   それらは各ページのCSSに、ルート要素の修飾クラスでスコープして置く。
   既存スタイルとの衝突を避けるため .seat-chart 名前空間で閉じる
   ========================================================= */

.seat-chart {
    margin: 0 0 24px;
}

/* PC: 座席表（左） + 詳細（右） / SP: 上下積み */
@media (min-width: 768px) {
    .seat-chart {
        display: flex;
        align-items: flex-start;
        gap: 24px;
    }
    .seat-chart__svg {
        flex: 0 0 48%;
        max-width: 48%;
    }
    .seat-chart__detail {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* SVG座席表 */
.seat-chart__svg {
    margin: 0 auto 16px;
}
.seat-chart__svg svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ズーム・パン用ビューポート（拡大したSVGがはみ出さないように制限する窓） */
.seat-chart__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: rgb(208 148 234 / 10%);
    touch-action: none;
}
/* ズーム・パン対象（transformはJS制御。中心基準で拡大） */
.seat-chart__zoom-target {
    width: 100%;
    transform-origin: center center;
    transition: transform 0.2s ease-out;
}

/* クリックロック時の表示制御。選択席種のみ100%、未選択エリアを一斉に透過0.3へ減光する。
   SVG本来の席種カラーは維持し、塗り替えは行わない */
.seat-chart__svg g[id^="wrap-s"] {
    transition: opacity 0.25s ease-in-out;
}
.seat-chart__svg.has-active g[id^="wrap-s"] {
    opacity: 0.3 !important;
}
.seat-chart__svg.has-active g[id^="wrap-s"].is-active {
    opacity: 1 !important;
}

/* クリック可能な席種領域。塗りのない領域もクリックできるよう pointer-events を有効化 */
.seat-chart__svg g.is-clickable {
    cursor: pointer;
}
.seat-chart__svg g.is-clickable,
.seat-chart__svg g.is-clickable * {
    pointer-events: all;
}

/* ズーム操作ボタン（右下固定） */
.seat-chart__zoom-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
}
.seat-chart__zoom-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: #51318f;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
}
.seat-chart__zoom-btn:active {
    transform: scale(0.95);
}

/* 詳細リード文 */
.seat-chart__lead {
    margin: 0 0 8px;
    color: #555;
}

/* スライド（Swiper fade） */
.seat-chart__swiper {
    position: relative;
    margin: 0 0 12px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}
.seat-chart__detail-inner {
    display: block;
    background: #fff;
}

/* スライド見出し（表示番号 + 席種名） */
/* position: relative は販売注記の吹き出し（.seat-chart__slide-notice-tip）の位置基準。
   マーク基準にすると席種名が長い席種でマークが右寄りになり、吹き出しの右側が見切れる。 */
.seat-chart__slide-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px;
    background: #51318f;
    color: #fff;
}
.seat-chart__slide-no {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    border-radius: 14px;
    background: #fff;
    color: #51318f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.seat-chart__slide-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

/* スライド見出しの販売注記マーク（PC はホバー/フォーカスで文言をツールチップ表示、SP は常時表示） */
.seat-chart__slide-notice {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}
.seat-chart__slide-notice:focus {
    outline: 2px solid #fff;
    outline-offset: 1px;
}
/* ①は無配色*/
/* ②一般販売なし：グレー系で控えめに出し分け */
.seat-chart__slide-notice--no_general_sale {
    background: #d0d0d0;
    color: #333;
}
/* ③対戦チーム応援席：青系で出し分け */
.seat-chart__slide-notice--visitor_seat {
    background: #2274ad;
    color: #fff;
}
.seat-chart__slide-notice-mark {
    display: inline-block;
}
/* ツールチップ本体：既定は非表示。見出し直下・見出しの左パディング位置から出す
   （見出し基準に揃えることで、マークが右寄りの席種でも右側が見切れない） */
.seat-chart__slide-notice-tip {
    position: absolute;
    top: 100%;
    left: 12px;
    z-index: 10;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.seat-chart__slide-notice:hover .seat-chart__slide-notice-tip,
.seat-chart__slide-notice:focus .seat-chart__slide-notice-tip,
.seat-chart__slide-notice:focus-within .seat-chart__slide-notice-tip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* SP（<768px）：ホバーで文言を出せないため、初期表示から吹き出しを開いた状態にする。
   配置・見た目は PC と同じ（絶対配置のまま座席画像に重なる）。
   読み終えた後はマークのタップで閉じられる（.is-closed は JS が付与）。 */
@media (max-width: 767px) {
    /* 画面が狭く折り返し行数が増えるため、見出しの左右パディング内で幅いっぱいに広げる */
    .seat-chart__slide-notice-tip {
        right: 12px;
        width: auto;
        max-width: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    /* 閉じた状態。タップでマークにフォーカスが残っても開き直さないよう、
       上の hover / focus ルールより後（同詳細度で後勝ち）に定義する。 */
    .seat-chart__slide-notice.is-closed .seat-chart__slide-notice-tip {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    /* タップ領域をバッジの高さいっぱいに広げる（見た目は変えない） */
    .seat-chart__slide-notice-mark {
        display: flex;
        align-items: center;
        height: 100%;
        cursor: pointer;
    }
}

/* スライド画像 */
.seat-chart__slide-imgs {
    position: relative;
}
.seat-chart__slide-img-wrap {
    margin: 0;
    display: none;
}
.seat-chart__slide-img-wrap.is-active {
    display: block;
}
.seat-chart__slide-img {
    display: block;
    width: 100%;
    height: auto;
}

/* スライド内の画像切り替えナビ（複数画像を持つ席種のみ表示） */
.inner-navi {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
}
.inner-prev,
.inner-next {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(81, 49, 143, 0.85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s;
}
.inner-prev::after,
.inner-next::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.inner-prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.inner-next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}
.inner-prev.swiper-button-disabled,
.inner-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* スライド内の画像ページネーション（現在位置・総数の指標） */
.seat-chart__slide-imgs .inner-pager.swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    pointer-events: none;
}
.seat-chart__slide-imgs .inner-pager .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    background: #fff;
    opacity: 0.7;
    border: 1px solid rgba(81, 49, 143, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.2s, opacity 0.2s;
}
.seat-chart__slide-imgs .inner-pager .swiper-pagination-bullet-active {
    background: #51318f;
    opacity: 1;
}

/* スライド内の席種概要テーブル/本文/注意書き（varietyseat と同一スタイル）
   下記クラスは varietyseat-2024.css からの移植（同ページには未読込のため）。
   varietyseat-2024.css はグローバル変数等を含むためファイルごと読み込まず、必要クラスのみ複製する。 */
.seat-detail {
    width: 130px;
    display: inline-block !important;
}
.varietyseat-price__caption {
    font-size: 0.75rem;
    font-weight: 500;
}
.varietyseat-price__caption-discount {
    font-weight: 700;
    margin-left: 0.25em;
}
.varietyseat--seats-price__number {
    font-size: 1.5rem;
}
.varietyseat-item__text {
    font-size: 1rem;
}
@media (min-width: 992px) {
    .varietyseat-price__caption-discount {
        font-size: 134%;
    }
    .varietyseat--seats-price__number {
        font-size: 2rem;
    }
    .varietyseat-item__text {
        font-size: 1.1rem;
    }
}

/* スライド内の任意文章（キャッチ見出し + 本文） */
.seat-chart__slide-text {
    padding: 12px;
}
.seat-chart__slide-text-ttl {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #51318f;
}
.seat-chart__slide-text-body {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

/* 席種ナビ（前/次の席種へ）。各画像の右下に白いボタンを2つ配置する */
.seat-chart__nav {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    display: flex;
    gap: 8px;
    pointer-events: none;
}
.seat-chart__prev,
.seat-chart__next {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s;
}
.seat-chart__prev::after,
.seat-chart__next::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #51318f;
    border-right: 2px solid #51318f;
}
.seat-chart__prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.seat-chart__next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}
.seat-chart__prev.is-disabled,
.seat-chart__next.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* fade で重なる非表示スライドの操作要素がクリックを奪わないよう、
   表示中スライド以外のボタン・ページネーションは無効化する */
.seat-chart__swiper .swiper-slide:not(.swiper-slide-active) .inner-prev,
.seat-chart__swiper .swiper-slide:not(.swiper-slide-active) .inner-next,
.seat-chart__swiper .swiper-slide:not(.swiper-slide-active) .inner-pager .swiper-pagination-bullet,
.seat-chart__swiper .swiper-slide:not(.swiper-slide-active) .seat-chart__prev,
.seat-chart__swiper .swiper-slide:not(.swiper-slide-active) .seat-chart__next {
    pointer-events: none !important;
}

/* 席種ボタン（表示番号のみ）。SVG座席表の直下に、カテゴリ（席種グループ）別の行で配置する。
   ボタン1個自体の見た目（.seat-chart__btn 通常/ホバー/活性）は現行のまま。ここでは配置のみを定義する。 */
.seat-chart__thumbs {
    margin-top: 12px;
}
/* カテゴリ行。SP（<768px）はラベルを strip の上に積む */
.seat-chart__cat-row + .seat-chart__cat-row {
    margin-top: 0;
}
.seat-chart__cat-label {
    display: flex;
    align-items: center;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
}
.seat-chart__cat-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #ccc;
}
/* カテゴリ識別の色ドット（活性紫 #51318f とは役割が異なる補助的な識別色） */
.seat-chart__cat-dot--general { background: #3b82f6; }
.seat-chart__cat-dot--vip { background: #f59e0b; }
.seat-chart__cat-dot--variety { background: #10b981; }
.seat-chart__cat-dot--accessible { background: #ec4899; }

/* 横スクロール strip（全カテゴリ一律）。左右送りボタン＋端フェードを付ける */
.seat-chart__strip-wrap {
    position: relative;
}
.seat-chart__strip {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.seat-chart__strip::-webkit-scrollbar {
    display: none;
}
/* strip 内のボタンは縮ませず横に流す（ボタン単体の見た目・スタイルには手を加えない） */
.seat-chart__strip .seat-chart__btn {
    flex: 0 0 auto;
    min-width: 44px;
}
/* 端フェード。スクロール余地がある側だけ表示する（JS が can-prev / can-next を付与） */
.seat-chart__strip-wrap::before,
.seat-chart__strip-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.seat-chart__strip-wrap::before {
    left: 0;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.seat-chart__strip-wrap::after {
    right: 0;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}
.seat-chart__strip-wrap.can-prev::before,
.seat-chart__strip-wrap.can-next::after {
    opacity: 1;
}
/* 左右送りボタン。既存の内部ナビ（.inner-prev/.inner-next）の方針（円・紫の矢印）に寄せる */
.seat-chart__strip-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.seat-chart__strip-prev { left: -6px; }
.seat-chart__strip-next { right: -6px; }
.seat-chart__strip-nav::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #51318f;
    border-right: 2px solid #51318f;
}
.seat-chart__strip-prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.seat-chart__strip-next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}
/* スクロール余地がある側の送りボタンのみ有効化（JS 制御） */
.seat-chart__strip-wrap.can-prev .seat-chart__strip-prev,
.seat-chart__strip-wrap.can-next .seat-chart__strip-next {
    opacity: 1;
    pointer-events: auto;
}
@media (min-width: 768px) {
    /* PC（≥768px）：ラベルを行の左に固定し、右に strip を横スクロール */
    .seat-chart__cat-row {
        display: flex;
        align-items: center;
    }
    .seat-chart__cat-label {
        flex: 0 0 140px;
        width: 140px;
        margin: 0 10px 0 0;
    }
    .seat-chart__strip-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }
}
.seat-chart__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.seat-chart__btn:hover {
    border-color: #51318f;
}
.seat-chart__btn.is-active {
    border-color: #51318f;
    background: #51318f;
}
.seat-chart__btn.is-active .seat-chart__btn-no {
    color: #fff;
}
.seat-chart__btn-no {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    text-align: center;
    word-break: break-all;
}


/* =========================================================
   ブロック番号（s〇〇-block-num）の完全非表示制御（display: none）
   
    【仕様】
   ・定数（〇〇）の増減に影響されないよう、属性後方一致セレクタ（$=）を使用。
   ・誤って同名クラスがグループ（g）や形状（path）に付与された場合の
     巻き込み消滅を防ぐため、対象を「text」要素または「tspan」要素に限定。
   ・display: none により、レンダリングツリーおよびアクセシビリティツリー
     （スクリーンリーダー等）から完全に除外され、クリックイベントは100%透過する。
   ========================================================= */

g[id$="-block-num"] {
    display: none !important;
}

/* =========================================================
   席種別 前売り価格（マッチグレード別フレックスプライス）
   .seat-chart__slide-price — 詳細スライド内の価格表
   ========================================================= */
.seat-chart__slide-price {
    margin-top: 16px;
    padding: 0 12px 12px;
}
.seat-chart__price-caption {
    font-weight: 700;
    color: #31144c;
    margin: 0 0 8px;
}
.seat-chart__price-group {
    margin-bottom: 16px;
}
.seat-chart__price-group:last-child {
    margin-bottom: 0;
}
.seat-chart__price-group-ttl {
    display: flex;
    align-items: flex-start;
    font-size: 15px;
    font-weight: 700;
    color: #1c0d2b;
    margin: 0 0 8px;
}
.seat-chart__price-group-ttl::before {
    content: "■";
    color: #51267b;
    margin-right: 6px;
    flex-shrink: 0;
}
.seat-chart__price-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.seat-chart__price-table th,
.seat-chart__price-table td {
    border: 1px solid #d4cbe3;
    text-align: center;
    padding: 10px 6px;
    vertical-align: middle;
}
.seat-chart__th-rank {
    background-color: #1c0d2b;
    color: #e5be75;
    font-size: 13px;
    letter-spacing: 0.1em;
}
.seat-chart__td-amount {
    background-color: #ffffff;
    color: #1c0d2b;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 700;
}
.seat-chart__price-currency {
    font-size: 14px;
    margin-right: 2px;
}

/* 年齢区分（大人／小中高）ごとのラベル見出しと区切り線（price.sections） */
.seat-chart__price-section-label {
    font-size: 14px;
    font-weight: 700;
    color: #51267b;
    margin: 0 0 8px;
}
.seat-chart__price-divider {
    border: 0;
    border-top: 1px dashed #d4cbe3;
    margin: 16px 0;
}
/* 会員区分ごとに最低価格1件を並べる一覧形式（'display' => 'list'） */
.seat-chart__price-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.seat-chart__price-list-item {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 15px;
    font-weight: 700;
    color: #1c0d2b;
    margin-bottom: 16px;
}
.seat-chart__price-list-item:last-child {
    margin-bottom: 0;
}
.seat-chart__price-list-item::before {
    content: "■";
    color: #51267b;
    margin-right: 6px;
    flex-shrink: 0;
}
.seat-chart__price-list-name {
    margin-right: 12px;
}
.seat-chart__price-list-amount {
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-variant-numeric: tabular-nums;
    color: #1c0d2b;
    white-space: nowrap;
}
.seat-chart__price-note {
    font-size: 13px;
    color: #6b5a80;
    margin: 12px 0 0;
}
/* note の下に描画する注意要素（中央寄せ・グレー背景・groups と同じ文字サイズ） */
.seat-chart__price-caution {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #1c0d2b;
    background-color: #ececec;
    padding: 8px 12px;
    margin: 12px 0 0;
    border-radius: 4px;
}
@media (max-width: 560px) {
    .seat-chart__price-group-ttl {
        font-size: 13px;
    }
    .seat-chart__td-amount {
        font-size: 15px;
    }
    .seat-chart__th-rank {
        font-size: 12px;
    }
    .seat-chart__price-section-label {
        font-size: 13px;
    }
    .seat-chart__price-list-item {
        font-size: 13px;
    }
    .seat-chart__price-note {
        font-size: 12px;
    }
    .seat-chart__price-caution {
        font-size: 13px;
    }
}