/* =========================================================
   LCP Japan Tour Page（固定ページ lcpsjapantour2026 専用）
   9/24版HTML（2609241820_LCPs固定ページ.html）の <style> の中身を
   そのまま移したもの。値・順番は変更していない。
   ※ 元の <style> 内の @import（Noto Sans JP）は記述位置が不正で
     ブラウザに無視されていたため、表示を変えないよう取り除いた。
   このファイルは lcpsjapantour2026 のページでだけ読み込まれる。
   ========================================================= */
html {
    scroll-behavior: smooth;
}


/* =========================================================
   LCPs Concert Tour 2026  ―  スタイル一括管理
   ここだけ編集すれば全公演に反映されます。
   数値はすべて実際のpx等で記載（var未使用）。
   ========================================================= */

/* ---- 1. 公演スケジュール一覧 ---- */
.lcps-list {
    max-width: 680px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.lcps-list a.row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 6px;
    /* 行の内側余白（縦18 横6） */
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    text-decoration: none;
    color: inherit;
    transition: background .2s;
}

.lcps-list .d {
    flex: 0 0 72px;
    text-align: center;
    background: #3d2d1e;
    border-radius: 8px;
    padding: 8px 4px;
}

/* 日付欄の幅＋背景色 */
.lcps-list .d .md {
    font-size: 20px;
    letter-spacing: .04em;
    line-height: 1.5;
    color: #fff;
}

.lcps-list .d .dw {
    font-size: 16px;
    color: #fff;
    margin-top: 1px;
    opacity: .85;
}

.lcps-list .d .tm {
    font-size: 16px;
    color: #fff;
    margin-top: 3px;
    opacity: .85;
}

.lcps-list .v {
    min-width: 0;
}

.lcps-list .v .ttl {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    margin: 0;
    color: #1a1a18;
}

.lcps-list .v .hall {
    font-size: 16px;
    color: #75726b;
    margin: 3px 0 0;
    line-height: 1.5;
}

.lcps-list .ar {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    letter-spacing: .08em;
    white-space: nowrap;
    color: #1a1a18;
    border: 1px solid #1a1a18;
    border-radius: 999px;
    padding: 8px 16px;
    /* 「詳細」ボタンの余白 */
    background: #fff;
}

.lcps-list .ar::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    margin-left: 2px;
}

.lcps-list a.row:hover {
    background: rgba(0, 0, 0, .03);
}

.lcps-list a.row:hover .ar {
    background: #1a1a18;
    color: #fff;
}

/* ---- 2. プログラム（曲目リスト） ---- */
.lcps-prog {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.lcps-prog li {
    padding: 10px 0;
    /* 各曲の上下余白 */
    border-bottom: 1px dotted rgba(0, 0, 0, .15);
    font-size: 16px;
    line-height: 1.7;
}

.lcps-prog li:last-child {
    border-bottom: none;
}

.lcps-prog .cmp {
    display: block;
    font-size: 16px;
    color: #8a8780;
    letter-spacing: .04em;
}

/* 作曲家 */
.lcps-prog .ttl {
    display: block;
    color: #2c2b28;
}

/* 曲名 */

/* ---- 3. チケット料金 ---- */
/* スマホ：3つとも縦並び／PC：通常(全幅)＋U25・U25ペア(横2列) */
.lcps-price {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 600px;
    margin: 0 auto 18px;
}

.lcps-price div {
    background: rgba(255, 255, 255, .7);
    border-radius: 8px;
    padding: 10px 14px;
    /* カード内余白（少なめ） */
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lcps-price .lb {
    font-size: 16px;
    color: #5f5e5a;
    margin: 0;
}

/* 区分名 */
.lcps-price .pr {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #1a1a18;
    white-space: nowrap;
}

/* 金額 */
.lcps-price .nt {
    font-size: 16px;
    color: #8a8780;
    margin: 0;
    line-height: 1.5;
    width: 100%;
    text-align: center;
}

/* 補足 */

/* ---- 4. アクセス（地図） ---- */
.lcps-map {
    max-width: 600px;
    margin: 0 auto;
}

.lcps-map iframe {
    width: 100%;
    height: 165px;
    border: 0;
    border-radius: 8px;
    display: block;
}

/* 地図の高さ */
.lcps-map .addr {
    font-size: 16px;
    color: #75726b;
    text-align: center;
    margin: 10px 0 0;
    line-height: 1.7;
}

/* ---- 5. 出演者（グリッド＋モーダル） ---- */
.lcps-pm {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}

.lcps-pm .pm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* スマホ2列 */
.lcps-pm .pm-card {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    display: block;
}

.lcps-pm .pm-photo {
    width: 100%;
    aspect-ratio: 10/11;
    object-fit: cover;
    display: block;
    background: #eceae2;
}

/* 写真比率 */
.lcps-pm .pm-cap {
    padding: 8px 6px;
    text-align: center;
}

.lcps-pm .pm-name {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a18;
    margin: 0;
    letter-spacing: .04em;
}

.lcps-pm .pm-name-short {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a18;
    margin: 0;
    letter-spacing: -0.12em
}

.lcps-pm .pm-name-little {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a18;
    margin: 0;
    letter-spacing: -0.15em
}

.lcps-pm .pm-part {
    font-size: 16px;
    color: #75726b;
    margin: 2px 0 0;
}

.lcps-pm .pm-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.lcps-pm .pm-modal:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, visibility 0s linear 0s;
}

.lcps-pm .pm-overlay {
    position: absolute;
    inset: 0;
}

.lcps-pm .pm-box {
    background: #fff;
    border-radius: 10px;
    max-width: 360px;
    width: 100%;
    padding: 24px;
    position: relative;
    z-index: 1;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(.94) translateY(12px);
    transition: transform .25s ease;
}

.lcps-pm .pm-modal:target .pm-box {
    transform: scale(1) translateY(0);
}

.lcps-pm .pm-box h3 {
    margin: 0 0 2px;
    font-size: 20px;
    font-weight: 500;
    color: #1a1a18;
}

.lcps-pm .pm-box .role {
    font-size: 16px;
    color: #75726b;
    margin: 0 0 14px;
}

.lcps-pm .pm-box .bio {
    font-size: 16px;
    line-height: 1.85;
    color: #444;
    margin: 0;
}

.lcps-pm .pm-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 22px;
    line-height: 1;
    color: #8a8780;
    text-decoration: none;
}


/* =========================================================
   6. スマホ／PC 切り替え（メディアクエリはここに集約）
   ========================================================= */

/* --- 画面幅 480px 以下（スマホ） --- */
@media (max-width:480px) {
    .lcps-list a.row {
        gap: 10px;
        padding: 16px 2px;
    }

    .lcps-list .d {
        flex: 0 0 60px;
    }

    .lcps-list .ar {
        font-size: 16px;
        padding: 7px 13px;
    }
}

/* --- 画面幅 782px 以上（PC・タブレット） --- */
@media (min-width:782px) {
    .lcps-pm .pm-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* 出演者を4列に */
    /* 料金：通常=上段全幅、U25・U25ペア=下段横2列 */
    .lcps-price {
        grid-template-columns: 1fr 1fr;
    }

    .lcps-price div:nth-child(1) {
        grid-column: 1 / -1;
    }

    /* 通常を全幅に */
    .lcps-price div {
        flex-direction: column;
        gap: 4px;
        padding: 14px 6px;
    }

    .lcps-price .nt {
        width: auto;
    }
}

/* =========================================================
   7. 横幅・余白の調整（テーマ左右余白の打ち消し）
   ========================================================= */

/* この特設ページのコンテナは左右余白をゼロにして全幅活用 */
.lcps-tour {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}

/* 公演詳細ボックス（旧インラインstyleをクラス化） */
/* テーマの左右余白の外まで広げたい場合、下の --gap を余白量に合わせる。
   実測値は約31.5px（DevToolsのcomputedスタイルで確認）。効きすぎる/足りない時はここを調整。 */
.lcps-gig {
    --gap: 31.5px;
    /* ← テーマ左右余白の打ち消し量（ここだけ調整） */
    border-radius: 10px;
    background-color: #f7f5ef;
    padding: 28px 20px;
    /* 上下28 左右20 */
    margin-left: calc(-1 * var(--gap));
    margin-right: calc(-1 * var(--gap));
}

/* お問い合わせボックス */
.lcps-contact {
    border-radius: 10px;
    background-color: #f7f5ef;
    padding: 24px 20px;
}

/* ---- 出演者グリッド：余白なし・境界線区切り ---- */
.lcps-pm {
    max-width: none;
}

/* 横幅いっぱい */
.lcps-pm .pm-grid {
    gap: 0;
    /* カード間の余白をなくす */
    border-top: 1px solid rgba(0, 0, 0, .15);
    border-left: 1px solid rgba(0, 0, 0, .15);
}

.lcps-pm .pm-card {
    border: 0;
    /* 個別の枠線を消し */
    border-right: 1px solid rgba(0, 0, 0, .15);
    /* 右と下の線だけで区切る */
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0;
    /* 角丸なし */
}

/* ---- チケット「準備中」ボタン（グレーアウト） ---- */
.lcps-soon {
    display: inline-block;
    font-size: 16px;
    letter-spacing: .2em;
    color: #a8a5a0;
    border: 1px solid #cfccc5;
    border-radius: 4px;
    padding: 12px 28px;
    background: #f0eee9;
    cursor: not-allowed;
}

/* ---- 各公演の日時（テーマの可変フォント(clamp)を無効化し固定サイズに） ---- */
.lcps-datetime {
    font-size: 24px !important;
    /* 元16px の1.5倍。テーマ側clampを上書き */
}

/* ---- 日本語版タイトル：Noto Sans JP ---- */
.lcps-jp-title {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 18px !important;
}

/* ---- 日時：スマホでは日付/開演時刻を改行、開演時刻は0.7倍 ---- */
.lcps-dt-time {
    font-size: 0.7em;
}

/* 24px×0.7 ≒ 17px */
@media (max-width:480px) {
    .lcps-dt-sep {
        display: none;
    }

    .lcps-dt-date,
    .lcps-dt-time {
        display: block;
    }
}

/* ---- フライヤー画像：左右の余白なし・全幅表示 ---- */
.lcps-flyer {
    --gap: 31.5px;
    /* テーマ左右余白の打ち消し量（.lcps-gigと同じ考え方） */
    margin-left: calc(-1 * var(--gap)) !important;
    margin-right: calc(-1 * var(--gap)) !important;
    max-width: none !important;
}

.lcps-flyer img {
    width: 100%;
    display: block;
}

/* ---- Instagramアイコン：サイズ2倍・リンクとの間に8px ---- */
.lcps-ig-icon {
    font-size: 2em;
    /* テキストの2倍サイズ */
    margin-right: 8px;
    vertical-align: middle;
}

/* ---- プログラム：ボタン+モーダル表示 ---- */
.lcps-prog-btn {
    display: inline-block;
    font-size: 16px;
    letter-spacing: .1em;
    color: #1a1a18;
    border: 1px solid #1a1a18;
    border-radius: 999px;
    padding: 10px 24px;
    text-decoration: none;
    background: #fff;
}

.lcps-prog-btn:hover {
    background: #1a1a18;
    color: #fff;
}

.prg-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.prg-modal:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, visibility 0s linear 0s;
}

.prg-overlay {
    position: absolute;
    inset: 0;
}

.prg-box {
    background: #fff;
    border-radius: 10px;
    max-width: 480px;
    width: 100%;
    padding: 28px 24px;
    position: relative;
    z-index: 1;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(.94) translateY(12px);
    transition: transform .25s ease;
}

.prg-modal:target .prg-box {
    transform: scale(1) translateY(0);
}

.prg-box h3 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 500;
    color: #1a1a18;
    text-align: center;
}

.prg-box ul.lcps-prog {
    margin: 0;
}

.prg-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 22px;
    line-height: 1;
    color: #8a8780;
    text-decoration: none;
}

/* ---- ページ最上部の自動タイトル領域：余白を削除 ---- */
.wp-block-group:has(> .wp-block-post-title) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wp-block-group:has(> .wp-block-post-title)>.wp-block-spacer {
    display: none !important;
}

/* ---- 日本語タイトル：スマホのみ追加改行 ---- */
.lcps-mobile-br {
    display: none;
}

@media (max-width:480px) {
    .lcps-mobile-br {
        display: inline;
    }
}

/* ---- チケットを購入ボタン：背景色・文字色・枠線なし ---- */
.lcps-ticket-btn .wp-block-button__link {
    background-color: #3d2d1e !important;
    color: #fff !important;
    border: none !important;
}

/* ---- テーマの左右余白：スマホ実測値(15px)で固定（最優先させるため末尾に配置） ---- */
@media (max-width:480px) {
    .has-global-padding {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .lcps-gig,
    .lcps-flyer {
        --gap: 15px !important;
    }
}