html {
    scroll-behavior: auto !important;
    /* スムーズスクロールを無効化 */
    scrollbar-gutter: stable;
    /* 縦スクロールバーの有無でセンタリングが左右にずれないよう、常にスクロールバー分の余白を確保する
       （オーバーレイスクロールバーの環境では余白0のまま = 影響なし） */
}

body {
    background-color: #fafaf9;
}

/* html の scrollbar-gutter でスクロールバー幅は常時確保済み。
   Bootstrap Modal が同じ幅を body / 固定要素へ再度加算すると、
   モーダル表示時にページが横へずれるため二重補正を無効化する。 */
body.modal-open {
    padding-right: 0 !important;
}

body.modal-open .fixed-top,
body.modal-open .fixed-bottom,
body.modal-open .is-fixed {
    padding-right: 0 !important;
}

body.modal-open .sticky-top {
    margin-right: 0 !important;
}

.cart-button {
    position: relative;
    display: inline-block;
    border: none;
    font-size: 1.2rem;
}

.cart-badge {
    position: absolute;
    top: -3px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-size: 0.8rem;
}

.m-cart-badge {
    position: absolute;
    top: -3px;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-size: 0.8rem;
}

.insider-news-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #dc3545;
    color: #fff;
    padding: 6px 12px;
    margin-right: 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.45);
    animation: insider-news-bubble-pulse 1.8s ease-in-out infinite;
}

.insider-news-bubble:hover,
.insider-news-bubble:focus {
    background-color: #c82333;
    color: #fff;
    text-decoration: none;
}

.insider-news-bubble::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    border-width: 6px 0 6px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #dc3545;
}

@keyframes insider-news-bubble-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.45);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 3px 14px rgba(220, 53, 69, 0.75);
    }
}

.insider-news-bell-shake {
    transform-origin: top center;
    animation: insider-news-bell-shake 1.8s ease-in-out infinite;
}

@keyframes insider-news-bell-shake {
    0%, 50%, 100% { transform: rotate(0); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-12deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-8deg); }
}


/* フッターのスタイルはERB側のインラインスタイル + Bootstrapクラスで制御 */

/* Manage 検索カード（注文一覧と共通） */
/* 検索カード。ページごとに .small / *-sm が散らばっていたので、
 * 文字サイズはここで一括して本文と同じ大きさに揃える（見出し・ラベル・入力欄）。
 * -sm の詰まった余白はそのまま活かす。 */
.search-card {
    font-size: 0.875rem;
    background-color: #f0f4f8;
}

.search-card .card-header h6,
.search-card .form-label,
.search-card .form-check-label,
.search-card .form-control,
.search-card .form-select,
.search-card .btn,
.search-card label {
    font-size: 0.875rem;
}

/* 項目名（th）が入力欄より上にずれて見えないよう、行の中央で揃える
   （Bootstrap の .table は既定で上寄せ） */
.search-card table th,
.search-card table td {
    vertical-align: middle;
}

.search-card .card-header {
    background-color: #e4ebf2;
}

.search-card .form-label {
    color: #495057;
    font-weight: 600;
}

.search-card .form-control,
.search-card .form-select {
    background-color: #fff;
}

.manage-body {
    background-color: #dbe4ec;
}

.checkin-page,
.checkin-test-page {
    min-height: calc(100vh - 130px);
}

.checkin-layout-page {
    margin-top: 0 !important;
}

body.checkin-body > .container-fluid {
    margin-top: 0 !important;
}

.checkin-test-account-card {
    background: #fff8e1;
    border-color: #ffc107;
}

.checkin-test-account-card .card-body {
    background: linear-gradient(180deg, #fff3cd 0%, #fff8e1 100%);
}

.checkin-test-account-card h5 {
    color: #7a4f00;
}

.checkin-test-account-card table {
    --bs-table-bg: transparent;
}

.checkin-test-account-card code {
    color: #6f3f00;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 193, 7, 0.45);
    border-radius: 4px;
    padding: 0.12rem 0.28rem;
}

.checkin-staff-panel {
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    padding: 0.9rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.checkin-staff-list {
    display: grid;
    gap: 0;
}

.checkin-account-list {
    display: grid;
    gap: 0.65rem;
}

.checkin-account-list--compact {
    gap: 0;
}

.checkin-staff-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    width: 100%;
}

.checkin-staff-toggle__icon {
    color: #64748b;
    flex: 0 0 auto;
    margin-top: 0.25rem;
    transition: transform 0.2s ease;
}

.checkin-staff-toggle[aria-expanded="true"] .checkin-staff-toggle__icon {
    transform: rotate(180deg);
}

.checkin-staff-item {
    border-bottom: 1px solid #e2e8f0;
    padding: 0.65rem 0;
}

.checkin-staff-item:last-child {
    border-bottom: 0;
}

.checkin-staff-credential {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.checkin-staff-label {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.15rem;
}

.checkin-staff-credential code {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    font-size: 0.94rem;
    line-height: 1.35;
    padding: 0.45rem 0.55rem;
}

.checkin-account-row {
    align-items: end;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
}

.checkin-account-credentials {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) minmax(5rem, 0.45fr);
}

.checkin-account-credentials--staff {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) 4.4rem;
}

.checkin-account-credentials code {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.35;
    padding: 0.45rem 0.55rem;
}

.checkin-account-actions {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: 1fr 1fr;
}

.checkin-staff-id-input {
    background-color: #ffffff;
    color: #0f172a;
    min-width: 0;
}

.checkin-staff-password-input {
    background-color: #ffffff;
    color: #0f172a;
    min-width: 0;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    text-align: center;
}

.checkin-account-row--staff {
    align-items: end;
    background: transparent;
    border: 0;
    border-radius: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0;
}

.checkin-account-edit-form {
    align-items: end;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.checkin-account-actions--icons {
    align-self: end;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    min-width: auto;
}

.checkin-account-icon-button {
    align-items: center;
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    padding: 0;
    width: 2.25rem;
}

.checkin-staff-static-id {
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.checkin-staff-delete {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.checkin-staff-empty {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    padding: 0.9rem;
    text-align: center;
}

.checkin-performance-title {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.35;
}

.checkin-performance-action {
    align-items: center;
    color: rgba(255, 255, 255, 0.86);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.checkin-performance-card {
    border-color: #d9e2ec;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.checkin-performance-list {
    display: grid;
    gap: 0.75rem;
}

.checkin-performance-card__header {
    background: #334155;
    padding: 0.75rem 0.85rem;
}

.checkin-performance-card__body {
    padding: 0.75rem 0.85rem;
}

.checkin-performance-meta-icon {
    color: #64748b;
}

/* 入場チェックのヘッダ。開演日時は現場で最も見る情報なので大きく出す
 * （西暦は当日その場では不要なので :ticket_no_year で省く） */
.checkin-performance-start {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.checkin-performance-open {
    font-size: 0.9rem;
    color: #64748b;
}

.checkin-performance-place {
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    .checkin-index-page.container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .checkin-index-page .checkin-test-account-card .card-body,
    .checkin-index-page .checkin-staff-panel {
        padding: 0.75rem;
    }

    .checkin-index-page .checkin-account-row,
    .checkin-index-page .checkin-staff-item {
        padding: 0.6rem;
    }

    .checkin-index-page .checkin-staff-item {
        padding-left: 0;
        padding-right: 0;
    }

    .checkin-index-page .checkin-account-row--staff {
        padding: 0;
    }

    .checkin-index-page .checkin-performance-card__header,
    .checkin-index-page .checkin-performance-card__body {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
}

@media (min-width: 768px) {
    .checkin-staff-panel {
        padding: 1rem;
    }

    .checkin-staff-credential {
        grid-template-columns: minmax(0, 1.6fr) minmax(8rem, 0.8fr);
    }

    .checkin-staff-credential--single {
        grid-template-columns: 1fr;
    }

    .checkin-account-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .checkin-account-credentials--staff {
        grid-template-columns: minmax(0, 1fr) 4.4rem;
    }

    .checkin-account-actions {
        min-width: 8.5rem;
    }

    .checkin-account-actions--icons {
        min-width: auto;
    }
}

/* 公開購入画面のCanvas座席表 */
.canvas-seat-map {
    width: 100%;
    max-width: 1024px;
    margin: 1rem auto;
    padding-inline: 0.75rem;
}

.canvas-seat-map__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.canvas-seat-map__floors {
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
}

.canvas-seat-map__toolbar-controls {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.canvas-seat-map__scale {
    min-width: 4rem;
    font-variant-numeric: tabular-nums;
}

.canvas-seat-map__viewport {
    position: relative;
    width: 100%;
    height: min(70vh, 680px);
    min-height: 420px;
    overflow: hidden;
    border: 1px solid #526b7d;
    border-radius: 0.75rem;
    background-color: #344b5e;
    box-shadow: inset 0 0 1.5rem rgba(9, 20, 29, 0.24);
}

.canvas-seat-map__canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.canvas-seat-map__canvas:active {
    cursor: grabbing;
}

.canvas-seat-map__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    color: #fff;
    background-color: rgba(15, 25, 34, 0.82);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.canvas-seat-map__tooltip {
    position: absolute;
    z-index: 3;
    max-width: min(280px, calc(100% - 20px));
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(52, 73, 94, 0.2);
    border-radius: 0.5rem;
    color: #fff;
    background-color: rgba(35, 49, 61, 0.94);
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.2);
    line-height: 1.3;
    pointer-events: none;
}

.canvas-seat-map__tooltip--interactive {
    pointer-events: auto;
}

.canvas-seat-map__hint {
    margin-top: 0.5rem;
    color: #6c757d;
    font-size: 0.8rem;
    text-align: center;
}

.canvas-seat-map__hint--toolbar {
    min-width: 0;
    margin-top: 0;
    text-align: right;
}

.canvas-seat-map__selection {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    background-color: #fff;
}

.canvas-seat-map__selection-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-0.35rem);
    transition: max-height 280ms ease, opacity 180ms ease, transform 280ms ease;
}

.canvas-seat-map__selection.is-open .canvas-seat-map__selection-content {
    max-height: 20rem;
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .canvas-seat-map__selection-content {
        transition: none;
    }
}

.canvas-seat-map__actions .btn-cart-in {
    width: 100%;
    margin-block: 0 !important;
    border-radius: 0.65rem;
    box-shadow: 0 0.25rem 0.75rem rgba(13, 110, 253, 0.22);
}

.place-image-strip {
    height: 220px;
    overflow-x: auto;
    overflow-y: hidden;
}

.place-image-strip__item {
    display: block;
    height: 100%;
    cursor: zoom-in;
}

.place-image-strip__image {
    display: block;
    width: auto;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .canvas-seat-map__viewport {
        height: 62vh;
        min-height: 360px;
        border-radius: 0.5rem;
    }

    .canvas-seat-map__hint {
        font-size: 0.75rem;
    }
}

/* tbody内のthラベル列に薄い背景色（Bootstrap bg-light相当） */
tbody th {
    background-color: #f8f9fa;
}

/* 利用規約、法的表記のマークダウン表示 */
.terms-container {
    h1 {
        font-size: 1.1rem !important;
        font-weight: bold !important;
        margin-bottom: 1.5rem !important;
    }

    h2 {
        font-size: 1.0rem !important;
        font-weight: normal !important;
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    h3 {
        font-size: 1.0rem !important;
        font-weight: normal !important;
    }

    h4 {
        font-size: 1.0rem !important;
        font-weight: normal !important;
    }

    h5 {
        font-size: 1.0rem !important;
        font-weight: normal !important;
    }

    ul,
    ol {
        font-size: 1.0rem !important;
        font-weight: normal !important;
        list-style-type: disc !important;
    }

    ul {
        margin-left: 0 !important;
    }

    ol {
        margin-left: 0 !important;
    }
}




/**/
.autocomplete-dropdown {
    position: absolute;
    z-index: 1050;
    /* Bootstrapのmodalが1050なので同じくらいでOK */
    width: 100%;
}

/*イベントページ*/

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
}

.star-label {
    font-size: 1.5rem;
    color: #ddd;
    cursor: pointer;
    margin-right: 5px;
}

input[type="radio"]:checked~.star-label,
.star-label:hover,
.star-label:hover~.star-label {
    color: #ffc107;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.image-item {
    flex: 1 1 calc(33.333% - 10px);
    max-width: calc(33.333% - 10px);
    text-align: center;
}

.main-image,
.sub-image {
    width: 100%;
    height: 300px;
}

@media (max-width: 768px) {
    .image-item {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .image-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.street,
.seattext {
    border: 0;
    background-color: transparent;
    font-size: xx-small;
    color: #808080;
    white-space: nowrap;
    z-index: 10;
}

/* SVGの既定 overflow:hidden を上書きし、wrapper の外側にも図形を描けるようにする */
.svg-overlay {
    overflow: visible;
}

.seat {
    width: 13px;
    height: 13px;
    line-height: 14px;
    font-size: x-small;
    border-radius: 50%;
}

.stage {
    border-color: #ADD8E6;
    background-color: #ADD8E6;
    border-radius: 0 !important;
}

.legend-vacant,
.vacant {
    background-color: #F3F781;
}

.legend-webvacant,
.webvacant {
    background-color: #BEF781;
}

.legend-occupied,
.occupied,
.locked {
    background-color: #999;
}

.bunkacho-border {
    outline: 2px solid #e74c3c;
    outline-offset: 0px;
}

.legend-unsold,
.unsold {
    background-color: #aaa;
    color: #aaa;
    background-image: linear-gradient(135deg,
            transparent 0%,
            transparent calc(50% - 1px),
            rgba(0, 0, 0, 0.3) calc(50% - 1px),
            rgba(0, 0, 0, 0.3) calc(50% + 1px),
            transparent calc(50% + 1px),
            transparent 100%);
    background-size: 8px 8px;
}

.unset {
    background-color: #f5f5f5;
}

.lottery {
    background-color: #D0A9F5;
}

.lottery-0 {
    background-color: #8B5CF6;
    color: #fff;
}

.lottery-1 {
    background-color: #3B82F6;
    color: #fff;
}

.lottery-2 {
    background-color: #EF4444;
    color: #fff;
}

.lottery-3 {
    background-color: #F59E0B;
    color: #fff;
}

.lottery-4 {
    background-color: #10B981;
    color: #fff;
}

.lottery-5 {
    background-color: #EC4899;
    color: #fff;
}

.lottery-6 {
    background-color: #06B6D4;
    color: #fff;
}

.lottery-7 {
    background-color: #F97316;
    color: #fff;
}

.lottery-8 {
    background-color: #6366F1;
    color: #fff;
}

.lottery-9 {
    background-color: #14B8A6;
    color: #fff;
}

/* 委託カラークラス */
.consigned {
    outline: 2px solid #333;
    outline-offset: 0px;
}

.consign-0 {
    background-color: #198754;
    color: #fff;
}

.consign-1 {
    background-color: #0d6efd;
    color: #fff;
}

.consign-2 {
    background-color: #dc3545;
    color: #fff;
}

.consign-3 {
    background-color: #fd7e14;
    color: #fff;
}

.consign-4 {
    background-color: #6f42c1;
    color: #fff;
}

.consign-5 {
    background-color: #d63384;
    color: #fff;
}

.consign-6 {
    background-color: #20c997;
    color: #fff;
}

.consign-7 {
    background-color: #0dcaf0;
    color: #fff;
}

.consign-8 {
    background-color: #ffc107;
    color: #333;
}

.consign-9 {
    background-color: #6610f2;
    color: #fff;
}

.legend-vacant-selected,
.vacant-selected,
.webvacant-selected {
    background-color: #F78181;
}

.legend-vacant-selected,
[data-controller~="member-seat-select"] .vacant-selected,
[data-controller~="m-cart-performance"] .vacant-selected,
[data-controller~="m-cart-performance"] .webvacant-selected {
    background-color: #F3F781;
    color: #dc3545;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    outline: 2px solid #dc3545;
    outline-offset: 0;
}

.seat-check-pop {
    animation: seat-check-pop 220ms cubic-bezier(0.2, 1.4, 0.3, 1);
}

.seat-check-off {
    animation: seat-check-off 160ms ease-out;
}

@keyframes seat-check-pop {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        filter: brightness(1.2);
        font-size: 0.65rem;
        text-shadow: 0 0 0 rgba(220, 53, 69, 0);
    }
    55% {
        box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.35);
        filter: brightness(1.05);
        font-size: 1.2rem;
        text-shadow: 0 0 2px rgba(220, 53, 69, 0.45);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        filter: brightness(1);
        font-size: 1rem;
        text-shadow: 0 0 0 rgba(220, 53, 69, 0);
    }
}

@keyframes seat-check-off {
    0% {
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.28);
        filter: brightness(1.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        filter: brightness(1);
    }
}

.occupied-selected {
    background-color: #819FF7;
}

/* アカウント委託 - 委託申請中（赤色）委託元 */
.consigned-requesting {
    background-color: #E74C3C;
    color: #fff;
}

/* アカウント委託 - 委託承認待ち（オレンジ）委託先 */
.consigned-awaiting {
    background-color: #E67E22;
    color: #fff;
}

.cursor-pointer {
    cursor: pointer;
}

#frame div div.clickable.selected {
    background-color: #F78181 !important;
    outline: 2px solid #d50000 !important;
    outline-offset: 1px;
    z-index: 100;
}

#frame div div.clickable.selecting {
    background-color: #819FF7;
}

div[data-new="true"] {
    border: 1px solid #F78181;
}


.clickable {
    cursor: pointer;
}

.selection-box {
    position: absolute;
    border: 1px solid #000;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.seat.size-selected {
    outline: 3px solid #ff9800 !important;
    outline-offset: 1px;
    z-index: 100;
}


/*座席色分け*/

.bgcolor_0 {
    background-color: #e1bee7 !important;
    color: #000 !important;
}

.bgcolor_1 {
    background-color: #e3f2fd !important;
    color: #000 !important
}

.bgcolor_2 {
    background-color: #dcedc8 !important;
    color: #000 !important
}

.bgcolor_3 {
    background-color: #b2dfdb !important;
    color: #000 !important
}

.bgcolor_4 {
    background-color: #f0f4c3 !important;
    color: #000 !important
}

.bgcolor_5 {
    background-color: #ffe0b2 !important;
    color: #000 !important
}

.bgcolor_6 {
    background-color: #ccff90 !important;
    color: #000 !important
}

.bgcolor_7 {
    background-color: #c5e1a5 !important;
    color: #000 !important
}

.tooltip-left .tooltip-inner {
    text-align: left;
}

#tooltip {
    position: absolute;
    display: none;
    z-index: 1000;
    pointer-events: auto;
    outline: none !important;
    border: none !important;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#tooltip.visible {
    opacity: 1;
    visibility: visible;
}

.tooltip-content {
    background-color: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    min-width: 100px;
}

.tooltip-content:focus,
.tooltip-content:active,
.tooltip-content:hover {
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.95);
}

.tooltip-header {
    font-weight: bold;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 4px;
    color: #000;
}

.tooltip-header-web {
    font-weight: bold;
    color: #000;
}

.tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tooltip-body div {
    display: flex;
    align-items: center;
    color: #555;
}

/* Event Cards and Grids */
.events-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.category-section + .category-section {
    margin-top: 2rem;
}

.category-title {
    margin-left: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c1917;
    border-left: 4px solid #b45309;
    padding: 10px 12px 10px 12px;
    margin-bottom: 16px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.category-title span {
    font-size: 0.85rem;
    font-weight: 400;
    color: #6c757d;
}

.performance-card,
.event-card {
    height: 440px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 20px -10px rgba(15, 23, 42, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.event-card--future {
    height: 480px;
}

.event-status-red.event-status-red--mobile {
    display: none;
}

@media (max-width: 991.98px) {
    .event-status-red.event-status-red--desktop {
        display: none;
    }
    .event-status-red.event-status-red--mobile {
        display: inline-block;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 0.15rem 0.55rem;
        margin: 0 0 0.35rem;
        border-radius: 999px;
        color: #e11d48;
        background: #fee2e2;
        white-space: nowrap;
        line-height: 1.4;
    }
}

.performance-card:hover,
.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px -4px rgba(15, 23, 42, 0.08),
                0 24px 36px -18px rgba(15, 23, 42, 0.22);
    border-color: rgba(15, 23, 42, 0.10);
}

.performance-card a,
.event-card a {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

/* 終了セクション 横スクロール */
.done-scroll-container {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.done-scroll-container::-webkit-scrollbar {
    display: none;
}

.done-scroll-container {
    scrollbar-width: none;
}

.done-scroll-item {
    flex: 0 0 180px;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

/* 「これから発売」カード（done-card と同サイズのコンパクト表示）
   横並びで 6.5 枚見えるように calc で算出（gap 12px × 6 個分を控除） */
.future-scroll-item {
    flex: 0 0 calc((100% - 72px) / 6.5);
    width: calc((100% - 72px) / 6.5);
    min-width: calc((100% - 72px) / 6.5);
    max-width: calc((100% - 72px) / 6.5);
    align-self: flex-start;
}

.future-scroll-item .event-card {
    margin: 0 !important;
    height: auto;
    border-radius: 12px;
}

/* 内部 col-4 / col-md-12 を強制的に縦並びに */
.future-scroll-item .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.future-scroll-item .event-image {
    height: auto;
    min-height: 0;
    overflow: hidden;
    line-height: 0;
}

.future-scroll-item .performance-card-image {
    width: 100%;
    height: auto;
    display: block;
}

.future-scroll-item .event-info {
    padding: 0.45rem 0.6rem 0.55rem;
}

.future-scroll-item .event-organizer {
    font-size: 0.6rem;
    margin-bottom: 0.1rem;
}

.future-scroll-item .performance-title {
    font-size: 0.78rem !important;
    height: 2.1rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.future-scroll-item .event-date,
.future-scroll-item .event-place {
    font-size: 0.68rem;
    margin-bottom: 0.05rem;
}

.future-scroll-item .event-description {
    font-size: 0.66rem;
    line-height: 1.4;
    margin-bottom: 0;
    -webkit-line-clamp: 3;
}

.future-scroll-item .event-status,
.future-scroll-item .event-status-red {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    letter-spacing: 0;
}

@media (min-width: 481px) and (max-width: 991px) {
    .future-scroll-item .event-card {
        height: auto !important;
        padding: 0 !important;
    }

    .future-scroll-item .event-image,
    .future-scroll-item .performance-card-image {
        height: auto;
    }
}

@media (max-width: 480px) {
    /* モバイルでは 2.5 枚表示（gap × 2 = 24px を控除） */
    .future-scroll-item {
        flex: 0 0 calc((100% - 24px) / 2.5);
        width: calc((100% - 24px) / 2.5);
        min-width: calc((100% - 24px) / 2.5);
        max-width: calc((100% - 24px) / 2.5);
    }

    .future-scroll-item .event-card {
        height: auto !important;
        padding: 0 !important;
    }

    .future-scroll-item .event-image,
    .future-scroll-item .performance-card-image {
        height: auto;
    }
}

/* 終了カード */
.done-card {
    width: 100%;
    height: 380px;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.done-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}


.done-card-image-wrap {
    position: relative;
    flex: 1;
    overflow: hidden;
    line-height: 0;
}

.done-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.done-card-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    text-align: center;
    font-size: 0.75rem;
    padding: 2px 0;
    line-height: 1.4;
}

.done-card-info {
    padding: 6px 8px;
    margin-top: auto;
}

.done-card-organizer {
    font-size: 0.7rem;
    color: #777;
    margin-bottom: 2px;
}

.done-card-organizer {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-bottom: 2px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.done-card-title {
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.3;
    height: 2.1rem;
    overflow: hidden;
    margin-bottom: 4px;
}

.done-card-date {
    font-size: 0.7rem;
    color: #777;
    margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.done-card-date i {
    color: #94a3b8;
    margin-right: 0.2rem;
}

.done-card-description {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: pre-line;
}

.event-card-link {
    text-decoration: none;
    color: inherit;
}

.event-status,
.event-status-red {
    position: relative;
    z-index: 1;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.85rem;
    color: #fff;
    text-align: center;
}

/* 「終了」表示 */
.event-status {
    background: linear-gradient(135deg, #64748b, #475569);
}

/* 発売前カウントダウン・発売日時表示 (元 bg-red) */
.event-status-red {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
}

/* 抽選表示 */
.event-status--lottery {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* event-card 内の「全N公演」バッジ */
.event-card-perf-count {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.15rem 0.5rem;
    background-color: #fee2e2;
    color: #b91c1c;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

.event-image {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 290px;
    overflow: hidden;
}

.event-card-image,
.performance-card-image {
    height: 290px;
    width: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.5s ease;
}

.event-info {
    padding: 0.9rem 1rem 1rem;
    text-align: left;
}

.event-organizer {
    font-size: 0.6rem;
    color: #94a3b8;
    margin-bottom: 0.1rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.event-title {
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    height: 2.1rem;
    text-align: left;
    line-height: 1.3;
    color: #0f172a;
    letter-spacing: 0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.performance-title {
    font-size: 0.78rem;
    font-weight: 700;
    height: 2.1rem;
    margin-bottom: 0.2rem;
    text-align: left;
    line-height: 1.3;
    color: #0f172a;
    overflow: hidden;
    letter-spacing: 0.01em;
}

.event-date,
.event-place {
    font-size: 0.68rem;
    color: #64748b;
    margin-bottom: 0.05rem;
    text-align: left;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.event-date i,
.event-place i {
    color: #94a3b8;
    margin-right: 0.25rem;
}

.event-description {
    font-size: 0.66rem;
    color: #64748b;
    margin-bottom: 0;
    text-align: left;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: pre-line;
}


/* タブレット用のカードレイアウト調整（481-991px） */
@media (min-width: 481px) and (max-width: 991px) {

    .performance-card,
    .event-card {
        padding: 15px;
        height: 100%;
        overflow: hidden;
        width: 100%;
    }

    .event-info {
        padding: 0 !important;
        padding-left: 0.5rem !important;
        text-align: left !important;
    }

    .event-title {
        font-size: 1rem !important;
        font-weight: bold !important;
        text-align: left !important;
        line-height: 1.4 !important;
        height: 4rem !important;
    }

    /* スライダー内のアイテムも調整 */
    .slider-item {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        max-width: calc(33.333% - 20px);
    }

    /* スライダーのコンテナ調整 */
    .events-slider {
        margin: 0;
        width: 100%;
        overflow: hidden;
        max-width: 100%;
    }

    /* 画像サイズ調整 */
    .event-card-image,
    .performance-card-image {
        height: 200px;
    }

    .event-image {
        min-height: 200px;
    }

    .done-scroll-item {
        flex: 0 0 180px;
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }

}

/* スマホサイズでカードを100%幅に調整 */
@media (max-width: 480px) {

    .performance-card,
    .event-card {
        padding: 10px;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .event-info {
        padding: 0 !important;
        padding-left: 0.5rem !important;
        text-align: left !important;
    }

    .event-title {
        font-size: 0.9rem !important;
        font-weight: bold !important;
        text-align: left !important;
        line-height: 1.3 !important;
        height: 3.5rem !important;
    }

    /* スライダー内のアイテムも調整 */
    .slider-item {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        max-width: 100vw;
    }

    /* スライダーのコンテナ調整 */
    .events-slider {
        margin: 0;
        width: 100%;
        overflow: hidden;
        max-width: 100vw;
    }

    /* 画像サイズ調整 */
    .event-card-image,
    .performance-card-image {
        height: 180px;
    }

    .event-image {
        min-height: 180px;
    }

    .done-scroll-item {
        flex: 0 0 130px;
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }

    .done-card {
        height: 300px;
    }

    .done-card-title {
        font-size: 0.7rem;
        height: 1.8rem;
    }

    .done-card-date {
        font-size: 0.65rem;
    }

}

/* スライダー */

.slider-container {
    width: 100%;
}

.slider-container .splide__track {
    background-color: #424242;
    padding: 20px 0;
}

.slider-container .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-container .splide__list {
    align-items: center;
}

.slider-image {
    height: 600px;
    width: auto;
    object-fit: contain;
}

.slider-image-trigger {
    display: block;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
}

.slider-image-trigger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.event-image-modal__actions {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    gap: 0.5rem;
}

.event-image-modal__image {
    display: block;
    width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.slider-container .splide__arrows {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.slider-container .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-container .splide__arrow:hover {
    background: rgba(255, 255, 255, 0.9);
}

.slider-container .splide__arrow svg {
    width: 16px;
    height: 16px;
    fill: #333;
}

.slider-container .splide__arrow--prev {
    left: 16px;
}

.slider-container .splide__arrow--prev svg {
    transform: scaleX(-1);
}

.slider-container .splide__arrow--next {
    right: 16px;
}

.slider-container .splide__pagination {
    margin-top: 10px;
    gap: 8px;
    /* ul 既定の padding-inline-start(40px) を打ち消して中央寄せを正す */
    padding: 0;
}

.slider-container .splide__pagination__page {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    padding: 0;
}

.slider-container .splide__pagination__page.is-active {
    background: #333;
}

@media (max-width: 768px) {
    .slider-container .splide__track {
        padding: 10px 0;
    }

    .slider-image {
        /* A4縦(210:297)のアスペクト比で箱を固定し、全画像を contain で収める。
           高さは「スライド幅 × 297/210」で内容に依存せず確定するため、
           画像ロードを待たず初回描画から高さが予約されガタつかない。
           JS が同値の --slider-mobile-h(px) を設定した場合はそちらを優先。 */
        width: 100%;
        max-width: 100%;
        aspect-ratio: 210 / 297;
        height: var(--slider-mobile-h, auto);
        object-fit: contain;
    }

    .slider-container .splide__arrow {
        width: 32px;
        height: 32px;
    }

    .slider-container .splide__arrow--prev {
        left: 8px;
    }

    .slider-container .splide__arrow--next {
        right: 8px;
    }
}

/* Top Bar Styles */
.btn-gradient {
    background: linear-gradient(45deg, #ff7eb3, #ff758c, #ff6480);
    color: white;
    border: none;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-gradient:hover {
    background: linear-gradient(45deg, #ff6480, #ff758c, #ff7eb3);
}

#search-form-container {
    max-height: 420px;
    transition: max-height 0.5s ease-in-out;
}

.search-hidden {
    display: none;
}


.trix-content {
    h1 {
        font-size: 2rem !important;
        margin-top: 1.5em !important;
        margin-bottom: 0.5em !important;
    }

    /* 必要に応じて他のタグも調整 */
}

.help-page h2,
.help-page .trix-content h1 {
    font-size: 1.75rem !important;
    font-weight: 300 !important;
    margin-top: 3rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid #000 !important;
    width: 100% !important;
}


.help-page ul {
    padding-left: 0;
}

.help-page li {
    position: relative;
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

/* 無効化されたリンクのスタイル */
.disabled-link {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.disabled-link:hover {
    opacity: 0.6;
    cursor: not-allowed;
}

/* QRスキャナー関連のスタイル */
.scan-result-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.scan-result-content {
    background: transparent;
    padding: 2rem;
    border-radius: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scan-result-message {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.scan-result-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.close-result {
    margin-top: 0;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 500;
    border: 2px solid white;
    background: transparent;
    color: white;
    transition: all 0.3s ease;
}

.restart-scanner {
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 500;
    border: 2px solid white;
    background: transparent;
    color: white;
    transition: all 0.3s ease;
}

.close-result:hover,
.restart-scanner:hover {
    background-color: white;
    color: #000;
    transform: scale(1.05);
}

/* 成功時の背景色 */
.scan-result-overlay.bg-success {
    background: linear-gradient(135deg, #28a745, #20c997);
}

/* エラー時の背景色 */
.scan-result-overlay.bg-danger {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
}

/* 情報時の背景色 */
.scan-result-overlay.bg-info {
    background: linear-gradient(135deg, #17a2b8, #6f42c1);
}

/* スマホファーストのレスポンシブ対応 */
@media (max-width: 768px) {
    .scan-result-content {
        padding: 1rem;
    }

    .scan-result-message {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }

    .close-result {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .scan-result-message {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .close-result {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
}

#scanner-container {
    position: relative;
}

tr.hover:hover {
    background-color: #f0f4ff !important;
    transition: background-color 0.15s ease;
}

.card.hover:hover {
    background-color: #f8f9fa !important;
    border-color: #0d6efd !important;
    border-width: 1px !important;
    transition: all 0.3s ease;
}

/* イベント詳細の公演スケジュール一覧のカード。
   ページ背景(#fafaf9)と白いカードがほぼ同色で、影だけでは境目が見えないため枠線を出す。
   左端の色帯（販売中=青／それ以外=グレー）はビュー側の inline style で上書きする。
   ※ .performance-card は別用途（高さ固定のカード）なので流用しないこと。 */
.performance-schedule-card {
    border: 1px solid #d8dbe0;
    background-color: #fff;
}

.performance-schedule-card.hover:hover {
    box-shadow: 0 0.25rem 0.6rem rgba(13, 110, 253, 0.15) !important;
}

/* カートボタン固定（共通） */
.cart-in-button-fixed {
    position: fixed;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;
    width: auto;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

@supports (bottom: 3dvb) {
    .cart-in-button-fixed {
        bottom: 3dvb;
    }
}

.cart-in-button-fixed .btn-cart-in {
    padding: 0.5rem 2.5rem !important;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    white-space: nowrap;
}

.cart-in-button-fixed .btn {
    pointer-events: auto;
}

@media (max-width: 991.98px) {
    .cart-in-button-fixed .btn-cart-in {
        font-size: 0.95rem;
        padding: 0.5rem 2rem !important;
    }
}

@media (max-width: 400px) {
    .cart-in-button-fixed .btn-cart-in {
        font-size: 0.85rem;
        padding: 0.45rem 1.5rem !important;
    }
}

/* ミニマップ固定表示 */
.seatmap-minimap {
    position: fixed;
    top: 10px;
    left: 20px;
    width: fit-content;
    background: rgba(44, 62, 80, 0.95);
    border: 2px solid #fff;
    border-radius: 8px;
    padding: 4px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.seatmap-minimap-canvas {
    width: 100%;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.seatmap-minimap-canvas:active {
    cursor: grabbing;
}

@supports (top: 10dvb) {
    .seatmap-minimap {
        top: 10dvb;
    }
}

/* 法的表記ページ */
.legal-content h1 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.legal-content h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.legal-content h3 {
    font-size: 1.0rem;
    font-weight: bold;
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
}

/* チケットカード（my_tickets）と入場ダッシュボード（m_checkin）は
 * スマホ幅設計のため、PC でも幅を絞って中央寄せにする */
.checkin-dashboard {
    border-radius: 10px;
    padding: 0.75rem;
}

.checkin-dashboard > .card {
    border-color: #d9e2ec;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

@media (min-width: 768px) {
    .my-tickets,
    .checkin-dashboard {
        max-width: 560px;
        margin-inline: auto;
    }
}

/* ============================================================
 * 来場者の券面（/my_tickets/:id）は 1 ページ 1 公演。
 * 会場で係員に見せる場面を想定し、スマホでは券面で画面を埋め、
 * 入場操作を画面最下部（親指が届く位置）に置く。
 * ============================================================ */
@media (max-width: 767.98px) {
    .my-tickets > .card {
        /* カードの下マージン(mb-3 = 1rem)込みでちょうど1画面分になる */
        min-height: calc(100vh - 1rem);
        min-height: calc(100dvh - 1rem);
        /* 入場操作を画面最下部へ送るため縦フレックスにする */
        display: flex;
        flex-direction: column;
    }

    /* overlay ではなく通常フローのまま余白を押し広げて下に置く
       （スクロールで隠れない・券面の上に被さらない）。 */
    .mticket__action {
        margin-top: auto;
        /* iPhone のホームインジケータに潜り込ませない */
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
}

/* ============================================================
 * 来場者のチケット券面（/my_tickets/:id）
 * モバイルパス（Wallet 系）の作法に寄せた構成:
 *   ヘッダ（濃色・公演名）→ ラベル付きフィールド → ミシン目 → 半券
 * ラベルは小さく淡く、値は大きく太く。数字は tabular-nums で桁を揃える。
 * 会場で係員に提示する場面を想定し、スマホファーストで組む（ベース＝スマホ寸法）。
 * PC は .my-tickets が max-width 560px の縦長カラムなので上書きしない。
 * アクセント色は公演 ID 由来の --mp-hue（券面アニメーションと同じ色相）。
 * ============================================================ */
.mticket__main {
    /* 入場済スタンプの重ね先 */
    position: relative;
}

.mticket__header {
    position: relative;
    overflow: hidden;
    /* 光帯（.ticket-faceplate__sweep）が mix-blend-mode で下の要素へ抜けないよう隔離 */
    isolation: isolate;
    padding: 0.9rem 1.25rem 1rem;
    color: #fff;
    background:
        linear-gradient(135deg, hsl(var(--mp-hue, 210deg) 42% 22%) 0%, #0f172a 72%);
}
/* ヘッダ内のテキストは光帯より前面に置く */
.mticket__eyebrow,
.mticket__title,
.mticket__subtitle {
    position: relative;
    z-index: 1;
}
/* 入場済・未入金の券面は「生きていない」ことが分かるよう光帯を止める */
.mticket__header--checked-in .ticket-faceplate__sweep,
.mticket__header--unpaid .ticket-faceplate__sweep {
    display: none;
}
.mticket__header--checked-in,
.mticket__header--unpaid {
    background: linear-gradient(135deg, #475569 0%, #334155 72%);
}
.mticket__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.3rem;
}
.mticket__title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    /* 長いタイトルでもカードを押し広げない */
    overflow-wrap: anywhere;
}
.mticket__subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.3rem;
    overflow-wrap: anywhere;
}

/* ラベル＋値のフィールド群。公演日と開演を左右に並べ、会場は全幅。 */
.mticket__fields {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.7rem 1rem;
    padding: 0.9rem 1.25rem 1rem;
    background-color: #fff;
}
.mticket__field--full {
    grid-column: 1 / -1;
}
.mticket__field--right {
    text-align: right;
}
.mticket__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 0.15rem;
}
.mticket__value {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    color: #0f172a;
    overflow-wrap: anywhere;
}
.mticket__value--lg {
    font-size: 1.35rem;
    font-weight: 700;
}
.mticket__value--xl {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
/* 時刻は桁を揃えて読み違えを防ぐ */
.mticket__value--num {
    font-variant-numeric: tabular-nums;
}

/* 半券との境目。左右の丸い切り欠き＋破線でミシン目を表現する。
   切り欠きの色はページ背景（body）と合わせること。 */
.mticket__perforation {
    position: relative;
    height: 1.25rem;
    background-color: #fff;
    /* 破線本体（切り欠きの内側だけに引く） */
    background-image: linear-gradient(to right, #cbd5e1 0 6px, transparent 6px 12px);
    background-repeat: repeat-x;
    background-size: 12px 1px;
    background-position: 0 center;
}
.mticket__perforation::before,
.mticket__perforation::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #fafaf9;
    transform: translateY(-50%);
}
.mticket__perforation::before { left: -0.625rem; }
.mticket__perforation::after  { right: -0.625rem; }
/* 半券。座席リスト（左）と券面画像（右下）。 */
.mticket__stub {
    padding: 0.85rem 1.25rem 1rem;
    background-color: #fff;
}
.mticket__label--seats {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.mticket__count {
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
}
.mticket__seat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mticket__seat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid #eef2f7;
    font-size: 0.95rem;
}
.mticket__seat:first-child {
    border-top: none;
}
.mticket__seat-no {
    flex: 0 0 auto;
    min-width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mticket__seat-body {
    flex: 1 1 auto;
    min-width: 0;
}
.mticket__seat-type {
    font-weight: 600;
    color: #0f172a;
}
.mticket__seat-place {
    color: #64748b;
}
.mticket__seat-used {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: #16a34a;
    white-space: nowrap;
}
/* 入場済のチケットは行ごと淡くして、残りが一目で分かるようにする */
.mticket__seat--used .mticket__seat-type,
.mticket__seat--used .mticket__seat-place {
    color: #94a3b8;
}

/* 毎秒書き換わる数字でボタン幅が揺れないよう桁幅を固定する */
.mticket__countdown {
    font-variant-numeric: tabular-nums;
}

/* 入場UI（スライド／マーク長押し／各種の無効ボタン）を置く領域 */
.mticket__action {
    padding: 0 1.25rem 1.25rem;
    background-color: #fff;
}
.mticket__action:empty {
    padding: 0;
}

/* 券面ごとに毎回出す入場前の注意書き。ページ上部の一括表示だと読み飛ばされるため、
   カード単位で出す。券面のトーンを壊さないよう alert ではなく淡い枠で置く。 */
.mticket__notice {
    display: flex;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.7rem;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    background-color: #fffbeb;
    color: #78350f;
    font-size: 0.85rem;
    line-height: 1.5;
}
.mticket__notice-icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: #d97706;
}
.mticket__notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mticket__notice-list li + li {
    margin-top: 0.2rem;
}

/* ============================================================
 * 電子チケット券面の「動」アニメーション（スクショ偽造対策）
 * /my_tickets の券面ヘッダ上を光帯が流れる。公演 ID から CSS カスタム
 * プロパティで光帯の角度・周期を決めるので、公演ごとに違うが
 * 同公演内では一貫した動きになる（静止画のスクショとは見え方が変わる）。
 * 以前はイベント画像に重ねていたが、券面から画像を廃したのでヘッダへ移した。
 * 入場済／未入金でアニメを止める指定は .mticket__header--* 側にある。
 * ============================================================ */
/* 光の帯が斜めに繰り返し走る。角度・周期は公演ごとに変わる */
.ticket-faceplate__sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        var(--mp-sweep-angle, 75deg),
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    mix-blend-mode: screen;
    transform: translateX(-100%);
    animation: ticket-faceplate-sweep var(--mp-sweep-duration, 5s) ease-in-out infinite;
}
@keyframes ticket-faceplate-sweep {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
/* アクセシビリティ: motion 抑制の希望に従う */
@media (prefers-reduced-motion: reduce) {
    .ticket-faceplate__sweep {
        animation: none;
        opacity: 0;
    }
}

/* もぎり直後だけ走る「裂け目」エフェクト。faceplate に被って斜めの白線が1度だけ通過する。
   グロー（外側のぼかし）を伴う太めの白帯で、係員が「割れた」と認識できる強さにする。 */
.ticket-faceplate__cut {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 42%,
        rgba(255, 255, 255, 0.4) 47%,
        rgba(255, 255, 255, 1)   50%,
        rgba(255, 255, 255, 0.4) 53%,
        transparent 58%
    );
    background-size: 240% 100%;
    background-position: 240% 50%;
    opacity: 0;
    animation: ticket-faceplate-cut 0.85s ease-out 1 forwards;
}
@keyframes ticket-faceplate-cut {
    0%   { background-position: 240% 50%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { background-position: -140% 50%; opacity: 0; }
}

/* ============================================================
 * 入場済の確認パネル。券面(.mticket__main)に絶対配置で重ねる。
 * 係員が一目で判別できる大きさは保ちつつ、朱肉スタンプ風（赤・太枠・斜め）は
 * やめて、チェックマーク + ラベル + 人数/時刻のカードにしている。
 * just 修飾子が付いた時だけ pop-in が走り、チェックが少し遅れて跳ねる。
 * ============================================================ */
.checkin-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: min(78%, 20rem);
    padding: 1.5rem 1.25rem 1.3rem;
    border-radius: 1.25rem;
    /* 下の券面をうっすら透かして「券面の上に重なっている」ことを示す */
    background-color: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow:
        0 20px 44px -14px rgba(15, 23, 42, 0.4),
        0 0 0 1px rgba(16, 185, 129, 0.28);
    color: #064e3b;
    text-align: center;
    z-index: 10;
}
.checkin-stamp__mark {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    box-shadow: 0 12px 22px -8px rgba(5, 150, 105, 0.65);
}
.checkin-stamp__label {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.2em;
    /* letter-spacing は最後の1文字の右にも入るので、その分だけ左に寄せて中央に見せる */
    text-indent: 0.2em;
}
.checkin-stamp__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #047857;
}
.checkin-stamp__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.5;
}
/* 入場直後だけ走る pop-in。faceplate の裂け目が抜けた頃に現れる */
.checkin-stamp--just {
    animation: checkin-stamp-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.6s 1 both;
}
@keyframes checkin-stamp-in {
    0%   { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
.checkin-stamp--just .checkin-stamp__mark {
    animation: checkin-stamp-mark-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.85s 1 both;
}
@keyframes checkin-stamp-mark-in {
    0%   { transform: scale(0.4); opacity: 0; }
    65%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ticket-faceplate__cut,
    .checkin-stamp--just,
    .checkin-stamp--just .checkin-stamp__mark {
        animation: none;
    }
}

/* ============================================================
 * 委託先の登録・編集フォーム（m_consignees new / edit で共用）。
 * 2列組みの項目名・入力欄の幅を揃えるためだけの指定。文字サイズは既定のまま。
 * ============================================================ */
.consignee-form-table th {
    width: 150px;
    font-weight: 600;
    padding: 6px 10px;
}
.consignee-form-table td {
    width: 300px;
    padding: 6px 10px;
}

/* ============================================================
 * 入場前の来場者向け案内パネル（_checkin_guide.html.erb）
 * 「このまま係員に見せる」「指示があるまで操作しない」を券面上で伝える。
 * 会場は明るさも姿勢もまちまちなので、コントラストを強めに取っている。
 * ============================================================ */
.checkin-guide {
    border: 2px solid #ffc107;
    border-radius: 12px;
    background-color: #fff8e1;
    padding: 12px 10px;
    text-align: center;
    color: #6b4e00;
}
.checkin-guide__main {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}
.checkin-guide__sub {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(107, 78, 0, 0.35);
    font-size: 0.9rem;
    line-height: 1.4;
}
.checkin-guide__sub strong {
    color: #b02a37;
}

/* ============================================================
 * 「スライドして入場」UI（誤タップ防止）
 * ハンドル（白丸）を右までドラッグすると submit される。
 * Stimulus: slide_to_check_in_controller.js
 * ============================================================ */
.slide-checkin {
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}
.slide-checkin__track {
    position: relative;
    height: 56px;
    background-color: #e7f1ff;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d6efd;
    font-weight: 700;
}
.slide-checkin__label {
    pointer-events: none;
    z-index: 1;
    padding-left: 3.5rem; /* ハンドル分の左寄せ */
    transition: opacity 0.15s linear;
}
.slide-checkin__handle {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: grab;
    touch-action: none; /* 縦スクロールと競合しないよう */
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.4);
    z-index: 2;
}
.slide-checkin__handle:active {
    cursor: grabbing;
}

/* 入場チェック一覧（manage側）のタブ。入場者 / 未入場者 / 全体。
 * 3つで幅を等分し、選択中のタブが下のパネルと地続きに見えるようにする。 */
.checkin-filter-nav {
    flex-wrap: nowrap;
    border-bottom-color: #cbd5e1;
}
.checkin-filter-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;
}
.checkin-filter-nav .nav-link {
    width: 100%;
    padding: 0.5rem 0.25rem;
    text-align: center;
    white-space: nowrap;
    color: #475569;
    background-color: #eef2f7;
    border-color: #cbd5e1;
}
.checkin-filter-nav .nav-link:hover {
    border-color: #cbd5e1;
}
.checkin-filter-nav .nav-link.active {
    color: #0d6efd;
    font-weight: 700;
    background-color: #fff;
    border-color: #cbd5e1 #cbd5e1 #fff;
}
.checkin-filter-nav__label {
    font-size: 0.9rem;
}
.checkin-filter-nav__count {
    margin-left: 0.3rem;
    color: #fff;
    background-color: #94a3b8;
    font-size: 0.75rem;
}
.checkin-filter-nav .nav-link.active .checkin-filter-nav__count {
    background-color: #0d6efd;
}

/* 選択中のタブとつながる一覧パネル */
.checkin-attendance-panel {
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
/* 一覧の1行（チケット1枚）。入場時刻は右端に大きめで出す */
.checkin-attendance-row__main {
    min-width: 0;
}
.checkin-attendance-row__time {
    font-variant-numeric: tabular-nums;
}
/* 手動入場ボタンの列。ボタン幅で行がガタつかないよう下限を決めておく */
.checkin-attendance-row__side {
    min-width: 7.5rem;
}
/* 取消は誤って押されると入場記録が消えるので、控えめなテキストリンクに留める */
.checkin-attendance-row__undo {
    display: block;
    font-size: 0.75rem;
    text-decoration: underline;
}

/* 購入履歴（/bills）一覧カードのイベント画像。
 * イベント画像は CLAUDE.md ルールに従い object-fit: contain（クロップ禁止）。 */
.bill-event-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 260px; /* PCの左カラムで間延びしないよう上限 */
    object-fit: contain;
    background-color: #f8f9fa;
    border-radius: 8px;
}

/* 会員情報（/shared_member）の登録カード一覧テーブル。
 * スマホは幅 100%、PC は従来どおり 75% で表示する。 */
.registered-card-table {
    width: 100%;
}
@media (min-width: 768px) {
    .registered-card-table {
        width: 75%;
    }
}

/* 注文/委託詳細のチケット一覧テーブル（m_bills, m_consigns 共通）
 * 列幅は _tickets_table.html.erb の colgroup で定義。ここは Bootstrap の width:100% を打ち消す。 */
.tickets-sort-table.table {
    table-layout: fixed !important;
    width: max-content !important;
    max-width: 100%;
    font-size: 13px;
}

.tickets-sort-table th,
.tickets-sort-table td {
    padding: 2px 6px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tickets-sort-table th {
    white-space: nowrap;
}

.tickets-sort-table .tickets-col-coupon {
    white-space: nowrap;
    text-align: center;
}

.tickets-sort-table .tickets-th-sticky {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}

.tickets-table-wrap {
    max-height: 600px;
    overflow: auto;
    width: 100%;
}

/* カート内チケットの確保期限 */
.cart-lock-notice {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid;
    border-radius: 0.9rem;
}

.cart-lock-notice--active {
    color: #694c00;
    background: linear-gradient(135deg, #fffaf0 0%, #fff4d6 100%);
    border-color: #f0d38a;
    box-shadow: 0 0.25rem 0.9rem rgba(132, 95, 0, 0.08);
}

.cart-lock-notice--expired {
    color: #842029;
    background-color: #fff5f5;
    border-color: #efb8bd;
}

.cart-lock-notice__icon {
    display: grid;
    flex: 0 0 2.65rem;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: 50%;
    font-size: 1.15rem;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0.15rem 0.45rem rgba(0, 0, 0, 0.08);
}

.cart-lock-notice__content {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.cart-lock-notice__eyebrow {
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cart-lock-notice__message {
    color: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}

.cart-lock-notice__time {
    margin: 0 0.08rem;
    color: #9b6300;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0.03em;
}

@media (min-width: 768px) {
    .cart-lock-notice {
        justify-content: center;
        padding-block: 1rem;
    }

    .cart-lock-notice__content {
        min-width: 25rem;
    }
}