/* TSS Event Manager - スタイルシート（XO互換デザイン） */







/* ===== 全体ラッパー ===== */



.tss-calendar-wrapper {



    max-width: 100%;



    margin: 0;



    font-family: inherit;



    box-sizing: border-box;



    scroll-margin-top: 100px;



}



.tss-calendar-wrapper.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ===== 上部ナビゲーションボタン（3連ボタン: ‹ 前月 / 今月 / 次月 ›） ===== */
.tss-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0;
}
.tss-calendar-nav .tss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1.5px solid var(--tss-accent-color, #0492f6);
    color: var(--tss-accent-color, #0492f6);
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
    cursor: pointer;
}
.tss-calendar-nav .tss-btn-prev::before {
    content: "‹ ";
    margin-right: 2px;
    font-weight: bold;
}
.tss-calendar-nav .tss-btn-next::after {
    content: " ›";
    margin-left: 2px;
    font-weight: bold;
}
.tss-calendar-nav .tss-btn-prev:hover,
.tss-calendar-nav .tss-btn-next:hover {
    background-color: rgba(4, 146, 246, 0.08);
}
.tss-calendar-nav .tss-btn-today {
    border-color: #cccccc;
    color: #666666;
}
.tss-calendar-nav .tss-btn-today:hover {
    border-color: #999999;
    color: #333333;
    background-color: #f7f7f7;
}

/* ===== 複数月並びレイアウト ===== */
.tss-calendar-multi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}
@media screen and (max-width: 767px) {
    .tss-calendar-multi {
        grid-template-columns: 1fr;
    }
}







/* ===== カレンダーテーブル ===== */



.tss-month-container {



    margin-bottom: 0;



}







table.tss-calendar-table {



    width: 100%;



    border-collapse: collapse;



    table-layout: fixed;



    border: 1px solid #ccc;



    background: #fff;



    margin: 0 0 8px;



    font-size: 13px;



}







/* キャプション（上部ナビゲーション: < 2026年 9月 >） */



table.tss-calendar-table caption {



    caption-side: top;



    text-align: center;



    padding: 0;



    margin: 0;



}







.tss-calendar-header {



    display: flex;



    align-items: center;



    justify-content: center;



    max-width: 100%;



    margin: 4px 0;



    padding: 0;
    box-sizing: border-box;
}

/* バナー型月タイトル */
.tss-calendar-header.is-banner {
    background-color: var(--tss-accent-color, #0492f6);
    border-radius: 6px 6px 0 0;
    padding: 10px 0;
    margin: 0;
}
.tss-calendar-header.is-banner .tss-calendar-title {
    color: #ffffff !important;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.tss-calendar-header.is-banner .tss-calendar-prev span.tss-arrow-prev {
    border-color: #ffffff;
}
.tss-calendar-header.is-banner .tss-calendar-next span.tss-arrow-next {
    border-color: #ffffff;
}







/* 年月タイトル：フォントを大きくせず、親・bodyと同等の標準サイズ（XO準拠） */



.tss-calendar-title {



    font-size: 100%;



    font-weight: normal;



    color: #333;



    letter-spacing: normal;



    flex: 1;



    text-align: center;



    line-height: 1.4;



}







.tss-calendar-prev,



.tss-calendar-next {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    width: 38px;



    height: auto;



    min-height: 24px;



    background: transparent;



    border: none;



    cursor: pointer;



    text-decoration: none;



    color: inherit;



    padding: 0;



}







/* 矢印アイコン（XOのnav-prev/nav-next完全準拠：ホバー時もダイヤ型にならない） */

span.tss-arrow-prev,

span.tss-arrow-next {

    display: inline-block;

    width: 12px;

    height: 12px;

    box-sizing: border-box;

    transition: border-color 0.15s, border-width 0.15s;

}



span.tss-arrow-prev {

    border-bottom: 2px solid #333;

    border-left: 2px solid #333;

    transform: rotate(45deg);

}



span.tss-arrow-next {

    border-top: 2px solid #333;

    border-right: 2px solid #333;

    transform: rotate(45deg);

}



.tss-calendar-prev:hover span.tss-arrow-prev {

    border-bottom-width: 3px;

    border-left-width: 3px;

    border-color: #000;

}



.tss-calendar-next:hover span.tss-arrow-next {

    border-top-width: 3px;

    border-right-width: 3px;

    border-color: #000;

}







/* 曜日ヘッダー */



table.tss-calendar-table > thead th {



    padding: 2px 0;



    text-align: center;



    font-weight: bold;



    border-bottom: 1px solid #ccc;



    border-right: 1px solid #ccc;



    background: #fff;



    color: #333;



    font-size: 0.9em;



}



table.tss-calendar-table > thead th:last-child {



    border-right: none;



}



table.tss-calendar-table > thead th.sun { color: #cc0000; }



table.tss-calendar-table > thead th.sat { color: #0066cc; }







/* 日付マス目（XO準拠：固定高を排除し、中身に応じたコンパクトな行高） */



table.tss-calendar-table td {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    vertical-align: top;
    height: 3em;
    padding: 0;
    background: #fff;
    box-sizing: border-box;
}



table.tss-calendar-table td:last-child {
    border-right: none;
}

table.tss-calendar-table tbody tr:last-child td {
    border-bottom: 1px solid #ccc !important;
}







.tss-day-cell {



    width: 100%;



    box-sizing: border-box;



    padding: 3px 4px;



}







/* 日付番号 */



.tss-day-num {



    display: block;



    font-size: 100%;



    font-weight: normal;



    color: #333;



    text-align: right;



    margin-bottom: 2px;



    line-height: 1.2;



}



/* 休日・曜日の配色（CSS変数連動） */
table.tss-calendar-table thead th.tss-holiday1 {
    color: var(--tss-holiday1-color, #e03131);
}
table.tss-calendar-table thead th.tss-holiday2 {
    color: var(--tss-holiday2-color, #0492f6);
}
table.tss-calendar-table thead th.tss-weekday {
    color: #333333;
}

table.tss-calendar-table td.tss-holiday1 {
    background-color: var(--tss-holiday1-bg, #fff9f9);
}
table.tss-calendar-table td.tss-holiday1 .tss-day-num {
    color: var(--tss-holiday1-color, #e03131);
}

table.tss-calendar-table td.tss-holiday2 {
    background-color: var(--tss-holiday2-bg, #f7faff);
}
table.tss-calendar-table td.tss-holiday2 .tss-day-num {
    color: var(--tss-holiday2-color, #0492f6);
}

table.tss-calendar-table td.tss-weekday {
    background-color: #ffffff;
}
table.tss-calendar-table td.tss-weekday .tss-day-num {
    color: #333333;
}

/* 前月・翌月の余白マス非表示オプション */
.tss-calendar-wrapper.tss-hide-other-months table.tss-calendar-table td.prev-month .tss-day-cell,
.tss-calendar-wrapper.tss-hide-other-months table.tss-calendar-table td.next-month .tss-day-cell {
    visibility: hidden;
}







/* 前月・翌月の日付 */



table.tss-calendar-table td.prev-month,



table.tss-calendar-table td.next-month {



    background-color: #fafafa;



}



table.tss-calendar-table td.prev-month .tss-day-num,



table.tss-calendar-table td.next-month .tss-day-num {



    color: #bbb !important;



}







/* 今日の日付ハイライト */



table.tss-calendar-table td.today,



table.tss-calendar-table td.is-today {



    background-color: #fde8e4;



}







/* イベントバッジ */



.tss-event-badge {



    display: block;



    text-decoration: none;



    font-size: 11px;



    font-weight: bold;



    line-height: 1.35;



    padding: 1px 3px;



    border-radius: 2px;



    margin-bottom: 1px;



    white-space: nowrap;



    overflow: hidden;



    text-overflow: ellipsis;



    box-shadow: 0 1px 2px rgba(0,0,0,0.06);



    color: #fff !important;



    transition: opacity 0.15s;



}



.tss-event-badge:hover {



    opacity: 0.85;



}







/* ===== 複数月並び（months="2" 等用） ===== */



.tss-calendar-multi {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));



    gap: 24px;



    margin-bottom: 30px;



}







/* ===== 直近イベント一覧・サイドバー・詳細情報ボックス ===== */



.tss-upcoming-container {



    margin-top: 30px;



    padding: 25px 30px;



    border-radius: 4px;



    background: #fff;



}



.tss-upcoming-title {



    font-size: 1.15rem;



    font-weight: bold;



    text-align: center;



    margin: 0 0 20px;



    color: #333;



}



.tss-upcoming-item {



    display: flex;



    align-items: center;



    gap: 12px;



    padding: 10px 0 10px 12px;



    border-bottom: 1px solid #f0f0f0;



    flex-wrap: wrap;



}



.tss-event-date {



    font-weight: bold;



    font-size: 0.9rem;



    white-space: nowrap;



}



.tss-event-link {



    text-decoration: none;



    font-weight: bold;



}



.tss-event-link:hover { text-decoration: underline; }







.tss-event-list {



    list-style: none;



    padding: 0;



    margin: 0;



}



.tss-event-list-item {



    padding: 10px 0;



    border-bottom: 1px solid #eee;



    display: flex;



    flex-wrap: wrap;



    align-items: baseline;



    gap: 8px 16px;



}



.tss-event-list-date {



    font-weight: bold;



    color: #333;



    font-size: 0.95rem;



}



.tss-event-list-title a {



    text-decoration: none;



    font-weight: bold;



    font-size: 1rem;



    line-height: 1.4;



}







.tss-event-info-box {



    padding: 25px 30px;



    margin-bottom: 35px;



    border-radius: 8px;



    background: #fff;



    box-shadow: 0 2px 5px rgba(0,0,0,.05);



}



.tss-event-info-box .tss-event-info-title {



    margin: 0 0 20px;



    font-size: 1.2rem;



    padding-bottom: 12px;



    border-bottom: 2px solid #eee;



    color: #333;



}



.tss-event-info-dl {



    display: grid;



    grid-template-columns: 8em 1fr;



    gap: 12px 0;



    margin: 0 0 20px;



}



.tss-event-info-dl dt {



    font-weight: bold;



    color: #555;



}



.tss-event-info-dl dd { margin: 0; }



.tss-single-cat {



    color: #fff;



    padding: 2px 10px;



    border-radius: 3px;



    font-size: 0.8rem;



    display: inline-block;



    vertical-align: middle;



}



.tss-event-summary {



    margin: 0 0 20px;



    font-size: 1.2rem;



    padding: 10px 0 10px 15px;



    line-height: 1.5;



    background: #f0f7ff;



}



.tss-event-remarks {



    padding: 15px;



    background: #f9f9f9;



    border: 1px dashed #ccc;



    border-radius: 4px;



    font-size: 1rem;



    line-height: 1.6;



    color: #444;



    margin-bottom: 15px;



}



.tss-event-staff {



    border-top: 1px solid #eee;



    padding-top: 12px;



    color: #666;



    font-size: 1rem;
}

/* ===== イベント一覧リスト (.tss-event-list) ===== */
.tss-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tss-event-list-item {
    display: flex;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: dotted 1px #ccc;
    font-size: 1rem;
    color: #444;
}
.tss-event-list-meta {
    margin-right: 1rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tss-event-list-date {
    font-size: 0.95rem;
}
.tss-event-list-bell {
    font-size: 0.9rem;
    color: #666;
}
.tss-event-list-title {
    flex: 1;
}
.tss-event-list-title a {
    color: inherit;
    text-decoration: none;
}
.tss-event-list-title a:hover {
    text-decoration: underline;
}
.tss-no-events {
    padding: 12px 0;
    color: #888;
}