/* FullCalendarの見た目をTailwindに合わせて調整 */
:root {
    --fc-border-color: transparent;
    /* 枠線の色を透明に */
    --fc-today-bg-color: rgba(233, 243, 255, 0.8);
    /* 今日の日付の背景色 */
    --fc-button-bg-color: #3b9cd0;
    /* ボタンの背景色 */
    --fc-button-active-bg-color: #3b9cd0;
    /* アクティブなボタンの背景色 */
    --fc-button-hover-bg-color: #3b9cd0;
    /* ホバー時のボタン背景色 */
    --fc-button-border-color: #3b9cd0;
    /* ボタンの枠線の色 */
}

.free_post_container {
    margin-bottom: 50px !important;
}

.fc .fc-toolbar-title {
    font-size: 1.2rem;
}

.fc .fc-button-primary {
    padding: 1px 5px;
    background-color: var(--fc-button-bg-color);
    border-color: var(--fc-button-border-color);
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--fc-today-bg-color);
    border-radius: 10px;
}

/* 日付の数字のスタイル */
.fc-daygrid-day-number {
    font-weight: 500;
    font-size: 0.8rem;
    position: relative;
    /* z-indexを効かせるため */
    z-index: 1;
}

/* 日付番号のコンテナを相対位置の基準にする */
.fc-daygrid-day-top {
    position: relative;
    justify-content: center;
    display: flex;
}

/* 投稿がある日のカーソルを変更 */
.fc-day.has-post {
    cursor: pointer;
}

/* ドットのスタイル */
.post-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* 日付の右上に配置するための微調整 */
    top: 25px;
    right: calc(50% - 3px);
    z-index: 0;
}

/* デフォルトのイベント表示エリアを隠す */
.fc-daygrid-day-events {
    display: none;
}

/* --- アニメーション用のスタイル --- */
.fc-view {
    overflow: hidden;
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.slide-out-left {
    animation: slideOutLeft 0.3s ease-out forwards;
}

.slide-in-from-right {
    animation: slideInFromRight 0.3s ease-out forwards;
}

.slide-out-right {
    animation: slideOutRight 0.3s ease-out forwards;
}

.slide-in-from-left {
    animation: slideInFromLeft 0.3s ease-out forwards;
}

.highlights_container {
    margin: 40px auto;
}

.highlights_content {
    display: flex;
    overflow: scroll;
    margin: 20px auto;
}

.highlights_items {
    padding: 50px 100px;
    border: solid 1px #ddd;
    border-radius: 15px;
    margin-right: 15px;
}

.highlights_button_area {
    display: flex;
    justify-content: center;
}

.highlights_button {
    width: 80%;
    display: inline-block;
    border-radius: 100px;
    padding: 10px 50px;
    margin: 20px auto;
    background-color: #3b9cd0;
    color: #fff;
    border: none;
}

.timeline_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 10px auto;
}

.timeline_items {
    background-color: #fff;
    width: 90%;
    border: solid 1px #666;
    margin: 10px 0;
}

.timeline_items:nth-child(odd) {
    border-radius: 0% 30px 30px 30px;
    align-self: flex-start;
}

.timeline_items:nth-child(even) {
    border-radius: 30px 0% 30px 30px;
    align-self: flex-end;
}

.timeline_item_date {
    border-bottom: solid 1px #666;
    padding: 10px 15px;
}

.timeline_item_text {
    border-top: solid 1px #666;
    padding: 10px 15px;
}

.timeline_item_content {
    width: 100%;

    & img {
        width: 100%;
    }

    & video {
        width: 100%;
        height: auto;
    }
}

.swiper-wrapper {
    align-items: center;
}

.timeline_item_text p {
    margin-bottom: 5px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* 背景を少し暗くしてブラー効果を強調 */
    -webkit-backdrop-filter: blur(5px);
    /* Safari用 */
    backdrop-filter: blur(5px);
    /* 背景ぼかし */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    /* 白い枠をなくし、コンテンツが直接表示されるようにする */
    background: transparent;
    padding: 0;
    border-radius: 0;
    max-width: 500px;
    /* コンテンツの最大幅は維持 */
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    z-index: 1010;
}

.loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 50px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.mute-toggle-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    transition: background-color 0.2s;
}

.mute-toggle-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* ミュート中のアイコン (スピーカーに斜線) */
.mute-toggle-button.is-muted {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg fill='white'%3E%3Cpath d='M133.466,170.794H66.073C29.583,170.794,0,200.377,0,236.87s29.583,66.069,66.073,66.069h67.393V170.794z'/%3E%3Cpath d='M186.278,313.858L360.806,139.25V84.818l0.086-27.546l-0.086,0.049v-0.194L186.444,159.818 c-11.531,6.804-18.583,19.166-18.583,32.605v88.92C167.861,294.612,174.828,306.973,186.278,313.858z'/%3E%3Cpolygon points='360.806,281.161 360.806,280.93 292.651,349.149 275.616,366.14 275.652,366.165 275.534,366.286 360.806,416.55 360.806,337.266 360.923,281.043'/%3E%3Cpolygon points='488.204,59.038 488.2,59.038 488.2,59.038 488.087,58.916 116.05,430.954 139.962,454.874 512,82.837'/%3E%3C/g%3E%3C/svg%3E");
}

/* ミュート解除中のアイコン (スピーカー) */
.mute-toggle-button:not(.is-muted) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}