@charset "UTF-8";

html {
    font-size: 100%;
}

/* フォントを決める */
body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
    overflow-wrap: anywhere;
    /* 収まらない場合に折り返す */
    word-break: normal;
    /* 単語の分割はデフォルトに依存 */
    line-break: strict;
    /* 禁則処理を厳格に適用 */
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

/* デザイン */
header,
footer {
    background-color: #6EDBC8;
}

.h_container,
.info_main {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 50px;
}


.h2-info {
    margin-top: 100px;
    margin-bottom: 60px;
    text-align: center;
}

.h2-info img {
    max-width: 100%;
    height: auto;
}



/* .info dl {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.info dt {
    flex-basis: 15%;
    padding: 20px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
}

.info dd {
    flex-basis: 85%;
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
} */


.info dl {
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
    background-color: #feedcc4d;
    padding: 1.5em 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.info dt {
    width: 30%;
}

.info dd {
    width: 70%;
}

.tilde {
    display: inline;
}

.flex-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
}

.flex-row dt {
    width: 120px;
    font-weight: bold;
    flex-shrink: 0;
    text-align: center;
}

.flex-row dd {
    margin: 0;
    flex: 1;
    line-height: 1.6;
    text-align: left;
    /* padding-left: 3%;
    padding-right: 3%; */
}



/* 会場MAP */
.h2_map {
    margin-top: 100px;
    text-align: center;
}

.h2_map2 {
    margin-bottom: 60px;
}

#floorMapImg2 {
    width: 75%;
}


.floor-map-wrapper {
    text-align: center;
}

.floor-map-wrapper2 {
    margin-bottom: 100px;
}

.floor-map-wrapper img {
    box-sizing: border-box;
}

.nowrap-dates time {
    white-space: nowrap;
}


/* モーダル全体（画面全体を覆う黒い半透明背景） */
.modal {
    display: none;
    /* 初期は非表示 */
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

/* モーダル内の画像 */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
    transition: 0.3s;
}

/* キャプション（画像下の説明） */
#caption {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}

/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s;
}

.modal-close:hover {
    color: #bbb;
}





@media(max-width:768px) {
    body {
        font-size: 0.875rem;
    }

    .h2-info {
        margin-top: 50px;
        margin-bottom: 30px;
        text-align: center;
    }

    .h_container,
    .info_main {
        width: 90%;
        margin: 0 auto;
    }

    .info dl {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
        background-color: #feedcc4d;
        padding: 1.5em;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .info dt {
        width: 100%;
    }

    .info dd {
        width: 100%;
    }

    .Sponsorship {
        text-align: left;
        /* white-space: nowrap; */
    }

    #floorMapImg2 {
        width: 100%;
    }

    .tilde {
        display: block;
        text-align: left;
    }

    .flex-row {
        flex-direction: column;
        margin-bottom: 1.5em;
        padding-left: 30px;
    }

    .flex-row dt {
        width: auto;
        margin-bottom: 0.2em;

    }

    .flex-row dd {
        line-height: 1.8;
        /* font-size: 0.8rem; */
        text-align: left;
        /* padding-left: 3%;
        padding-right: 3%; */
    }



    .h2-info img {
        max-width: 80%;
    }

    .nowrap-dates {
        text-align: left;
    }

    .h2_map {
        margin-top: 50px;
        text-align: center;
    }

    .h2_map2 {
        margin-bottom: 30px;
    }


    /* .nowrap {
        white-space: nowrap;
    } */

    .floor-map-wrapper {
        max-width: 800px;
        margin: 2em auto 0;
        padding: 0 1em;
    }

    #floorMapImg {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        margin-bottom: 2rem;
    }



}