/* Ticketta! 購入者向け画面の土台（案A「静かな受付」）。 */
/* Standalone stylesheet; deliberately valid CSS as well as SCSS. */
/* 値はデザインシステム「Ticketta!」の tokens.json から生成している（legacy- の値は除く）。 */

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/noto-sans-jp/NotoSansJP-Regular-subset.woff2") format("woff2");
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/noto-sans-jp/NotoSansJP-Bold-subset.woff2") format("woff2");
}

:root {
    --brand-lavender: #cac2ff;
    --brand-lavender-hover: #b2a6ff;
    --action: #5b47c7;
    --action-hover: #4b38ad;
    --action-pressed: #3e2d93;
    --on-action: #ffffff;
    --action-subtle: #efecff;
    --page-cream: #faf8f5;
    --surface: #ffffff;
    --surface-tint: #faf9ff;
    --text: #2a2838;
    --text-muted: #5f5b70;
    --border-subtle: #e4e1ee;
    --border-control: #7d7894;
    --success-bg: #e3f4e8;
    --success-ink: #1d5c34;
    --warning-bg: #fff1c7;
    --warning-ink: #6b4a00;
    --danger-bg: #fde8e6;
    --danger-ink: #a3261b;
    --danger-solid: #b3261e;
    --info-bg: #e6eefb;
    --info-ink: #1d4f91;
    --navy: #232244;
    --header-bg: var(--navy);
    --header-ink: var(--cream-ink);
    --header-focus: var(--brand-lavender);
    --banner-letterbox: #f2f0f7;
    --banner-veil: rgba(250, 248, 245, 0.4);
    --avail-ok-bg: var(--success-bg);
    --avail-ok-ink: var(--success-ink);
    --avail-few-bg: var(--warning-bg);
    --avail-few-ink: var(--warning-ink);
    --avail-full-bg: var(--status-excluded-bg);
    --avail-full-ink: var(--status-excluded-ink);
    --scrim: rgba(37, 57, 74, 0.7);
    --scrim-soft: rgba(37, 57, 74, 0.4);
    --cream-ink: #fffff2;
    --logo-ink: #231815;
    --overlay: #25394a;
    --seat-invalid: #888888;
    --seat-applied: #ffa500;
    --seat-selected: #ffd400;
    --seat-selected-border: #111111;
    --status-todo-bg: #e7edf5;
    --status-todo-ink: #183a65;
    --status-doing-bg: #fff0c5;
    --status-doing-ink: #694600;
    --status-waiting-bg: #f1e3f6;
    --status-waiting-ink: #603675;
    --status-done-bg: #d5eddd;
    --status-done-ink: #205932;
    --status-excluded-bg: #e7e7e7;
    --status-excluded-ink: #494949;
    --surface-group: #eef1f5;
    --surface-heading: #f2f3f5;
    --focus-office: #1264a3;
    --overdue: #b12424;
    --concert-marker: #b65b00;
    --gray: #999999;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-full: 999px;
    --radius-sheet: 16px;
    --radius-seat: 10px;
    --shadow-float: 0 4px 16px rgba(42, 40, 56, 0.16);
    --shadow-bar: 0 -2px 12px rgba(42, 40, 56, 0.08);
    --container-max: 1120px;
    --control-height: 44px;
    --control-height-sm: 36px;
    --target-min: 24px;
    --focus-width: 3px;
    --banner-max-height: 240px;
    --banner-max-height-panel: 200px;
    --bottom-bar-inset: 24px;
    --dialog-width: 420px;
    --font-sans: "Noto Sans JP", "Yu Gothic UI", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

body {
    background-color: var(--page-cream);
    color: var(--text);
    font-family: var(--font-sans);
}

body .tk-num {
    font-variant-numeric: tabular-nums;
}

/* ヘッダー: ネイビーの地にクリーム色のロゴとリンク */
.header.navbar {
    min-height: 56px;
    margin-bottom: 0;
    padding: 0 max(var(--space-16), calc((100% - var(--container-max)) / 2));
    border-radius: 0;
    background-color: var(--header-bg) !important;
    box-shadow: none;
}

.header.navbar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
}

.header.navbar #logo {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: var(--space-12) 0;
}

.header.navbar #logo a {
    display: flex;
    width: auto;
}

.header.navbar #logo img {
    height: 32px;
}

.header.navbar .navbar-toggler {
    display: none;
}

/* 項目が3つと少ないため、Material Kit の狭い幅での引き出しメニューにせず、常に横に並べる */
.header.navbar .navbar-collapse {
    position: static;
    display: flex !important;
    flex-basis: auto;
    flex-grow: 0;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform: none !important;
    visibility: visible;
}

.header.navbar .navbar-collapse::after,
.header.navbar .navbar-nav .nav-item::after {
    display: none;
}

.header.navbar .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    width: auto;
    margin-left: auto;
}

.header.navbar .header-btn,
.header.navbar .nav-link {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: var(--control-height);
    margin: 0;
    padding: 0 var(--space-12);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--header-ink) !important;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

.header.navbar .header-btn:hover,
.header.navbar .nav-link:hover {
    background: none;
    color: var(--header-ink) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.header.navbar .header-btn.is-outline {
    min-height: var(--control-height-sm);
    margin-left: var(--space-4);
    padding: 0 14px;
    border: 1px solid var(--header-ink);
}

.header.navbar a:focus-visible,
.header.navbar button:focus-visible {
    outline: var(--focus-width) solid var(--header-focus);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .header.navbar #logo img {
        height: 26px;
    }

    .header.navbar .container {
        flex-wrap: nowrap;
        gap: var(--space-4);
    }

    .header.navbar .navbar-nav {
        flex-wrap: nowrap;
        gap: 0;
    }

    .header.navbar .header-btn,
    .header.navbar .nav-link {
        padding: 0 6px;
        font-size: 13px;
        white-space: nowrap;
    }

    .header.navbar .header-btn.is-outline {
        padding: 0 10px;
    }
}

/* ログインのポップアップ（element/header.php の #login-modal）。ヘッダー内にあるため、ticketta.css の .header a（幅100%）などを打ち消す */
.tk-login .modal-dialog {
    max-width: calc(420px + 2 * var(--space-16));
    margin: var(--space-24) auto;
    padding: 0 var(--space-16);
}

.tk-login .modal-content {
    border: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-float);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
}

.tk-login-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-16) var(--space-12) var(--space-4) 28px;
}

.tk-login-title {
    margin: 0;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.tk-login-close {
    display: grid;
    place-items: center;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.tk-login-close:hover {
    background: var(--surface-tint);
}

.tk-login-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-8) 28px var(--space-24);
}

/* Google と X は同じ大きさで縦に並べる（横並びでは「Google でログイン」が折り返すため）。
   Google の規定に合わせ、白地・灰色の枠・ロゴは元の色 */
.tk-login-social {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
}

.tk-login .tk-login-provider {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--control-height);
    padding: 0 var(--space-12);
    border: 1px solid #747775;
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.tk-login .tk-login-provider:hover {
    background: #f8f8f8;
    color: #1f1f1f;
    text-decoration: none;
}

.tk-login-provider img {
    flex: 0 0 auto;
    display: block;
}

.tk-login-or {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.tk-login-or::before,
.tk-login-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-subtle);
}

.tk-login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin: 0;
}

.tk-login-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tk-login-field label {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.tk-login-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
}

.tk-login-field input:focus {
    border-color: var(--action);
    outline: var(--focus-width) solid var(--action);
    outline-offset: 0;
}

.tk-login-submit {
    min-height: 48px;
    margin-top: var(--space-4);
    padding: 0 var(--space-24);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--action);
    color: var(--on-action);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.tk-login-submit:hover {
    background: var(--action-hover);
}

.tk-login-submit:active {
    background: var(--action-pressed);
}

.tk-login .tk-login-forgot {
    display: inline-flex;
    width: auto;
    align-self: center;
    align-items: center;
    min-height: var(--control-height-sm);
    color: var(--action);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tk-login .tk-login-forgot:hover {
    color: var(--action-hover);
}

.tk-login-foot {
    padding: var(--space-16) 28px var(--space-24);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--surface-tint);
}

.tk-login-guest {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--action);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: normal;
    cursor: pointer;
}

.tk-login-guest:hover {
    background: var(--action-subtle);
}

.header.navbar .tk-login a:focus-visible,
.header.navbar .tk-login button:focus-visible,
.header.navbar .tk-login input:focus-visible {
    outline: var(--focus-width) solid var(--action);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .tk-login .modal-dialog {
        margin: var(--space-16) auto;
        padding: 0 var(--space-12);
    }

    .tk-login-head {
        padding-left: var(--space-16);
    }

    .tk-login-body,
    .tk-login-foot {
        padding-right: var(--space-16);
        padding-left: var(--space-16);
    }
}

/* 「使い方」は新しいタブで開く。狭い幅で横にはみ出さないよう、ヘッダーでは外部リンクの印を出さない（読み上げは sr-only の文で伝える） */
.header.navbar a[target="_blank"]::after {
    content: none;
}

/* 会員名のメニュー: スマホ幅でもヘッダーを伸ばさず、名前の下に重ねて開く */
/* 長い会員名は省略して、ヘッダーの幅に収める */
.header.navbar .tk-header-user {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.header.navbar .nav-item.dropdown {
    position: relative;
}

/* Material Kit の .nav-link の余白（15px）を打ち消す */
.header.navbar .navbar-nav .nav-item .dropdown-toggle {
    padding: 0 var(--space-12);
}

@media (max-width: 767px) {
    .header.navbar .navbar-nav .nav-item .dropdown-toggle {
        padding: 0 6px;
    }

    .header.navbar .tk-header-user {
        max-width: 7.5em;
    }
}

.header.navbar .navbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1050;
    min-width: 200px;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: var(--space-4) 0 0;
    padding: var(--space-8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-float);
    text-align: left;
}

.header.navbar .navbar-nav .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--control-height);
    margin: 0;
    padding: 0 var(--space-12);
    border-radius: var(--radius-sm);
    background: none;
    box-shadow: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: normal;
}

.header.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.header.navbar .navbar-nav .dropdown-menu .dropdown-item:focus {
    background: var(--surface-tint);
    color: var(--action);
}

/* フッター: ネイビーの地にクリーム色のロゴとリンク */
footer {
    margin-top: var(--space-48);
    padding: var(--space-32) max(var(--space-16), calc((100% - var(--container-max)) / 2)) var(--space-48);
    background-color: var(--navy);
    color: var(--cream-ink);
    font-size: 12px;
    line-height: 1.7;
    text-align: left;
}

footer .columns {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-32);
    margin: 0 0 var(--space-24);
}

footer .columns .logo {
    margin: 0;
}

footer .columns .logo img {
    width: 160px;
}

footer .columns .menu {
    flex: 1 1 320px;
    gap: var(--space-24);
    width: auto;
}

footer .columns .menu ul {
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .columns .menu ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0;
    color: var(--cream-ink);
    font-size: 12px;
    text-decoration: none;
}

footer .columns .menu ul li a:hover {
    color: var(--cream-ink);
    text-decoration: underline;
}

footer a:focus-visible {
    outline: var(--focus-width) solid var(--header-focus);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    footer .columns {
        display: flex;
        flex-direction: column;
    }

    footer .columns .menu {
        flex-basis: auto;
        width: 100%;
        margin: 0;
    }
}