@charset "utf-8";

/**
* Calendar Page Specific Styles
*/

#calendar-id {
    .reload-btn {
        line-height: 1;
        vertical-align: baseline;
    }
    .calendar-time__items {
        .calendar-time__item {
            &:not(:last-child) {
                margin-bottom: 1rem;
            }
            &::before {
                display: inline-block;
                width: 1rem;
                height: 1rem;
                margin-right: 10px;
                vertical-align: middle;
                content: '';
            }
        }
        .calendar-time__item01 {
            &::before {
                background-color: var(--color-yellow);
            }
        }
        .calendar-time__item02 {
            &::before {
                background-color: var(--color-dark-green);
            }
        }
        .calendar-time__item03 {
            &::before {
                background-color: var(--color-red);
            }
        }
    }
    .googleCustomCalendar {
        position: relative; /* 子要素のiframeを絶対配置するため */
        width: 100%; /* 親要素の幅を100%にする */
        height: 0; /* 親要素の高さを0にする */
        padding-bottom: 75%; /* アスペクト比を維持するための高さ（例: 幅800px, 高さ600pxの場合 600/800 = 0.75 = 75%） */
        overflow: hidden; /* はみ出したコンテンツを隠す */
        border: 1px solid var(--color-grey); /* iframeのborder-width:0;を消した場合の枠線など */
        border-radius: 5px; /* 必要に応じて角丸 */
        iframe {
            position: absolute; /* 親要素（.calendar-responsive-container）に対して絶対配置 */
            inset: 0 auto auto 0;
            width: 100%; /* 親要素の幅いっぱいに */
            height: 100%; /* 親要素の高さいっぱいに */
            border: 0; /* Googleカレンダーの埋め込みコードのstyle="border-width:0"を上書きするため */
        }
    }
}