body{
    margin:0;
    padding:24px;

    font-family:
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    background:#fff7fb;
    color:#5b3a4a;
}

.page{
    max-width:800px;
    margin:0 auto;
}

.header{
    margin-bottom:24px;

    text-align:center;
}

h1{
    margin:0 0 10px;

    color:#d06b9a;

    font-size:30px;
}

.description{
    margin:0;

    color:#8a6a77;

    line-height:1.7;
}

.nav{
    margin:20px 0;
}

.nav a{
    display:inline-block;

    padding:8px 14px;

    border-radius:999px;

    background:#ffe4f0;

    color:#9b3d68;

    text-decoration:none;

    font-weight:bold;
}

.event-list{
    display:grid;

    gap:16px;
}

.event-card{
    background:#fff;

    border:1px solid #f2c8d9;

    border-radius:18px;

    padding:18px;

    box-shadow:
        0 6px 18px
        rgba(160,100,130,0.10);
}

.event-date{
    margin-bottom:8px;

    color:#d06b9a;

    font-weight:bold;
}

.event-name{
    margin-bottom:8px;

    color:#7b435e;

    font-size:20px;

    font-weight:bold;
}

.event-basic{
    line-height:1.8;

    color:#6f5360;
}

details{
    margin-top:14px;

    border-top:
        1px solid #f2c8d9;

    padding-top:12px;
}

summary{
    cursor:pointer;

    color:#9b3d68;

    font-weight:bold;
}

.detail-body{
    margin-top:12px;

    line-height:1.8;

    color:#6f5360;
}

.message{
    padding:16px;

    border-radius:14px;

    text-align:center;
}

.error{
    background:#fff0f0;

    color:#a33;
}

.empty{
    background:#fff;

    border:1px solid #f2c8d9;

    color:#8a6a77;
}

@media (max-width:700px){

    body{
        padding:12px;
    }

    h1{
        font-size:25px;
    }

    .event-card{
        padding:16px;
    }
}
.public-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}

.public-nav a,
.public-nav .current{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    text-decoration:none;
    font-weight:bold;
    font-size:14px;
}

.public-nav a{
    background:#ffe4f0;
    color:#9b3d68;
}

.public-nav a:hover{
    background:#f6bfd6;
}

.public-nav .current{
    background:#d06b9a;
    color:#fff;
}

@media (max-width:700px){

    .public-nav{
        gap:6px;
    }

    .public-nav a,
    .public-nav .current{
        font-size:13px;
        padding:7px 11px;
    }
}
/* ======================================================
   表示期間切り替え
====================================================== */

.period-filter{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:14px;
    margin-bottom:18px;

    align-items:center;
}

.period-filter-main{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.period-filter a{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:8px 14px;

    border-radius:999px;

    background:#ffe4f0;

    color:#9b3d68;

    text-decoration:none;

    font-weight:bold;

    font-size:14px;

    box-sizing:border-box;
}

.period-filter a:hover{
    background:#f6bfd6;
}

.period-filter a.current{
    background:#d06b9a;
    color:#fff;
}

.period-month-form{
    display:flex;

    gap:8px;

    align-items:center;

    margin:0;
}

.period-month-form select{
    width:auto;

    min-height:38px;

    margin:0;

    padding:8px 12px;

    border:1px solid #e4bfd0;

    border-radius:999px;

    background:#fff;

    color:#5b3a4a;

    font-size:14px;
    font-weight:bold;
}

.period-month-form button{
    min-height:38px;

    margin:0;

    padding:8px 14px;

    border:none;

    border-radius:999px;

    background:#ffe4f0;

    color:#9b3d68;

    font-size:14px;
    font-weight:bold;

    cursor:pointer;
}

.period-month-form button.current{
    background:#d06b9a;
    color:#fff;
}


/* ======================================================
   表示期間切り替え：スマホ
====================================================== */

@media (max-width:700px){

    .period-filter{
        display:block;

        margin-top:14px;
        margin-bottom:18px;
    }

    .period-filter-main{
        display:grid;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:6px;
    }

    .period-filter a{
        width:100%;

        min-height:40px;

        padding:8px 6px;

        font-size:13px;

        white-space:nowrap;
    }

    .period-month-form{
        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            auto;

        gap:8px;

        margin-top:8px;
    }

    .period-month-form select{
        width:100%;

        min-width:0;

        min-height:42px;

        font-size:14px;
    }

    .period-month-form button{
        min-height:42px;

        padding:8px 14px;

        white-space:nowrap;

        font-size:14px;
    }

}
/* ======================================================
   イベント画像
====================================================== */

.event-images{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.event-thumb{
    display:block;
    width:110px;
    height:110px;

    object-fit:cover;

    border-radius:10px;
    border:1px solid #f2c8d9;

    cursor:pointer;

    background:#fff;
}


/* ======================================================
   画像拡大表示
====================================================== */

.image-modal{
    display:none;

    position:fixed;
    inset:0;

    z-index:9999;

    background:
        rgba(0,0,0,0.75);

    align-items:center;
    justify-content:center;

    padding:20px;
}

.image-modal.open{
    display:flex;
}

.image-modal img{
    display:block;

    max-width:95vw;
    max-height:92vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:10px;

    box-shadow:
        0 10px 40px
        rgba(0,0,0,0.45);
}
.image-modal-content{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    max-width:95vw;
    max-height:92vh;
}

.image-modal-counter{
    position:absolute;

    left:50%;
    bottom:12px;

    transform:translateX(-50%);

    padding:5px 11px;

    border-radius:999px;

    background:rgba(0,0,0,0.6);
    color:#fff;

    font-size:13px;
    font-weight:bold;
}

.image-modal-nav{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:10000;

    width:46px;
    height:46px;

    margin:0;
    padding:0;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,0.85);
    color:#6f5360;

    font-size:34px;
    line-height:1;

    cursor:pointer;
}

.image-modal-prev{
    left:18px;
}

.image-modal-next{
    right:18px;
}

.image-modal-nav:disabled{
    display:none;
}

@media (max-width:700px){

    .image-modal-nav{
        width:42px;
        height:42px;

        font-size:30px;
    }

    .image-modal-prev{
        left:8px;
    }

    .image-modal-next{
        right:8px;
    }
}
.detail-close{
    display:none;
}

details[open] .detail-open{
    display:none;
}

details[open] .detail-close{
    display:inline;
}