/* Responsive CSS for SI2024 */

/* モバイル用スタイル（959px以下） */
@media screen and (max-width: 959px) {
    /* コンテナの調整 */
    #container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* コンテンツエリアの調整 */
    #contents {
        width: 100%;
        padding: 10px;
        margin: 0;
    }

    /* テーブルのレスポンシブ対応 */
    .table-responsive {
        margin-left: -10px;
        margin-right: -10px;
        border-radius: 0;
    }
}

/* タブレット用スタイル（600px〜959px） */
@media screen and (min-width: 600px) and (max-width: 959px) {
    #container {
        padding: 0;
    }

    #contents {
        padding: 20px;
    }
    
    /* タブレットでも長いURLに対応 */
    details p,
    details a {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* スマートフォン用スタイル（599px以下） */
@media screen and (max-width: 599px) {
    #contents {
        padding: 10px;
    }
    
    /* ヘッダーのレスポンシブ対応 */
    #header {
        min-height: 300px;
    }
    
    #yearlogo {
        margin: 30px 0;
    }
    
    #header-title {
        margin: 10px 5px;
    }
    
    .lecturetitle {
        font-size: 1.1em;
    }
    
    /* 長いURL・テキストの折り返し対応 */
    details p,
    details a {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        /* 長いURLを確実に折り返す */
        hyphens: auto;
    }
    
    /* details内のコンテンツが画面外に出ないようにする */
    details {
        max-width: 100%;
        overflow: hidden;
    }
}