/* リセットする範囲を最小限にする */
.dynamic-calendar th,
.dynamic-calendar td {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: normal;
    box-sizing: border-box;
}

/* リセットここまで*/


div#calendar-container {
    max-width: 100%;
}


#calendar-container .dynamic-calendar {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

#calendar-container .dynamic-calendar th, #calendar-container .dynamic-calendar td {
    border: 1px solid #ddd;
    padding: 0px;
    width: 14.28%; /* 100% / 7日 = 各列の幅を固定 */
    box-sizing: border-box;
}

#calendar-container .dynamic-calendar th {
    background-color: #f4f4f4;
    font-weight: bold;
}

#calendar-container .dynamic-calendar td {
    height: 50px;
}

#calendar-container .dynamic-calendar td:hover {
    background-color: #f0f8ff;
}

/* 今日の日付 */
#calendar-container .dynamic-calendar td.vs_today {
    background-color: #45c8f1; 
    color: #000;              
    font-weight: bold;        
}


#calendar-container .dynamic-calendar .event-item a {
    display: flex;
    flex-direction: row;
    gap: 5px;
	width: 100%; 
}

#calendar-container .dynamic-calendar .day-number {
    background-color:#eaf7ff;
}

/* 全てのイベントコンテナを同じ高さにする */
#calendar-container .dynamic-calendar .events-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
	max-height: 100px; /* 最大高さを設定 */
    min-height:100px;
    overflow-y: auto;  /* 縦方向のスクロールを有効に */
    padding: 5px;
    
}

#calendar-container .dynamic-calendar .event-time {
    text-align: right; /* 時間を右寄せ */
    width: 40%; /* 親要素に対する相対的な幅 */
    white-space: normal; /* 折り返しを許可 */
    word-wrap: break-word; /* 必要に応じて単語を途中で折り返す */
    flex-shrink: 0; /* フレックスアイテムが縮まないようにする */
}


#calendar-container .dynamic-calendar .event-title {
    text-align: left; /* タイトルを左寄せ */
    width: 60%; /* 残りの幅をタイトルに割り当てる */
}


/* シングルページスタイル */
/* 全体のスタイル */
.vs_cal_custom-event-details {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    color: #333;
}

/* 各ディテールの共通スタイル */
.vs_cal_each_detail_wrap {
    background-color: #f9f9f9; /* 背景色 */
    border: 1px solid #e0e0e0; /* ボーダー */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* アイキャッチ画像のスタイル */
.vs_cal_event-featured-image-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.vs_cal_event-featured-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* タイトル部分のスタイル */
.vs_cal_entry-header {
    margin-bottom: 20px;
    text-align: center;
}

.vs_cal_event_titles {
    display: inline-block;
    text-align: center;
    padding: 10px 20px;
    border-bottom: 2px solid #e0e0e0;
}

.vs_cal_event-main-title {
    font-size: 2em;
    margin: 0;
    color: #333;
}

.vs_cal_event-sub-title {
    font-size: 1.5em;
    margin: 0;
    color: #666;
}

/* 日付部分のスタイル */
.vs_cal_event-main-year-date {
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #333;
}

.vs_cal_event_details_title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.2em;
    border-bottom: 1px solid #dcdcdc; /* 薄いボトムライン */
    padding-bottom: 5px;
}

.vs_cal_event-date-value {
    text-align: center;
    display: flex;
    font-size: 2em;
    font-weight: bold;
    justify-content: center;
}

/* イベント詳細（日付・時間） */
.vs_cal_event-details ul,
.vs_cal_event-pricing ul {
    list-style-type: none;
    padding-left: 0;
}

.vs_cal_event-start-time,
.vs_cal_event-end-time,
.vs_cal_prices {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.vs_cal_event-start-time-type,
.vs_cal_event-end-time-type,
.vs_cal_event-price-type {
    flex-basis: 50%;
    text-align: right;
    padding-right: 10px;
    font-weight: bold;
}

.vs_cal_event-start-time-value,
.vs_cal_event-end-time-value,
.vs_cal_event-price-value {
    flex-basis: 50%;
    text-align: left;
    color: #555;
}

/* Primary タイムと価格の強調表示（フォントサイズを大きくして下線） */
.vs_cal_primary_start_time,
.vs_cal_primary_end_time,
.vs_cal_primary_price {
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #0073aa;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* イベントの場所 */
.vs_cal_event-location p {
    margin: 5px 0;
    font-size: 1.1em;
}

/* イベントの料金 */
.vs_cal_event-pricing p {
    font-weight: bold;
}

.vs_cal_event-price-type {
    flex-basis: 50%;
    text-align: right;
    padding-right: 10px;
}

.vs_cal_event-price-value {
    flex-basis: 50%;
    text-align: left;
    color: #333;
}

/* イベントの説明 */
.vs_cal_event-description {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.vs_cal_event-description h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    color: #333;
}

.vs_cal_event-description p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #555;
}