/*
    ===========================================
      大会カレンダーページ専用のスタイルシート
    ===========================================
*/

.calendar-container-wrapper {
    padding: 60px 20px;
}

.calendar-header {
    text-align: center;
    margin-bottom: 40px;
}

.calendar-header p {
    font-size: 1.1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.calendar-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 20px;
}

/* ★★★ 変更箇所 ★★★ */
/* 以前のアスペクト比維持のスタイルを削除 */
/* .calendar-embed-wrapper はコンテナとして使用されます */

/* iframe自体に直接スタイルを指定 */
.calendar-embed-wrapper iframe {
    /* 幅は常に親要素の100%にする */
    width: 100%;
    /* 高さを固定ではなく、ビューポートの高さに基づいて設定 */
    /* これにより、画面サイズに応じて適切な高さが確保される */
    height: 75vh; /* vh = ビューポートの高さに対する割合。75vhは画面の高さの75% */
    min-height: 600px; /* どんなに画面が小さくても、最低600pxの高さを確保 */
    border: none; /* 枠線を消す */
}
/* ★★★★★★★★★★★★★ */