.calendar_content{
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.calendar_box{
    margin-top: min(1.2svw, 15px);
    margin-bottom: min(1.2svw, 15px);
    background-color: white;
    width: min(96svw, 1200px);
    border-radius: min(2svw, 25px);
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.calendar_subtitle{
    width: min(88.88svw, 1111px);
    height: min(6.4svw,80px);
    background-image: url("../images/calendar_title_background.png");
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: min(2.4svw, 30px);
}

.calendar_subtitle h2{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-inline: 0;
    margin-block: 0;
    font-size: min(2.88svw,36px);
    color: #a66e0b;
    margin-bottom: min(0.4svw, 5px);
}

.calendar_subtitle h2:before{
    content: "";
    width: min(2.56svw,32px);
    aspect-ratio: 32/33;
    background-size: 99%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/calendar_icon2.png");
    margin-right: min(0.64svw,8px);
    transform: translateY(min(0.32svw,4px));
}

.calendar_month_nav{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-top: min(2.4svw,30px);
}

.month_title{
    font-size: min(2.4svw,30px);
    order: 2;
    margin: 0;
}

.preview_month{
    display: flex;
    font-size: min(1.2svw, 15px);
    order: 1;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: min(0.32svw, 4px);
    padding-bottom: min(0.32svw, 4px);
    margin-right: min(1.28svw, 16px);
    align-items: center;
    justify-content: center;
    color: black;
}
@media (hover: hover){
    .preview_month:focus-visible,.preview_month:hover{
        background-color: #fff7e1;
    }
}
.preview_month:before{
    content: "";
    box-sizing: border-box;
    width: 0;
    height: 0;
    margin-left: auto;
    border: min(0.48svw, 6px) solid transparent;
    border-right: min(0.64svw, 8px) solid #555;
}

.next_month{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: min(1.2svw,15px);
    order: 3;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: min(0.32svw,4px);
    margin-left: min(1.28svw,16px);
    color: black;
    padding-bottom: min(0.32svw, 4px);
}
@media (hover: hover){
    .next_month:focus-visible,.next_month:hover{
        background-color: #fff7e1;
    }
}

.next_month:after{
    content: "";
    box-sizing: border-box;
    width: 0;
    height: 0;
    margin-left: auto;
    border: min(0.48svw, 6px) solid transparent;
    border-left: min(0.64svw, 8px) solid #555;
}

.calendar_genre_nav{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
    margin-top: min(2.4svw,30px);
}

.genre_text{
    font-size: min(1.28svw,16px);
}

.calendar_genre_buttons{
    width: min(88.8svw,1110px);
    aspect-ratio: 1110/60;
    font-size: min(1.28svw,16px);
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    background-color: #fff7e1;
    border-radius: min(0.4svw,5px);
    margin-top: min(1.2svw,15px);
}

.calendar_genre_buttons button{
    line-height: min(1.232svw,15.4px);
    font-size: min(1.12svw,14px);
    border-radius: min(0.4svw,5px);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-left: min(0.12svw,1.5px);
    margin-right: min(0.12svw,1.5px);
}

@media (hover: hover){
    .calendar_genre_buttons button:focus-visible,.calendar_genre_buttons button:hover{
        color: white;
        background-color: #a66e0b;
    }
}

.calendar_genre_buttons .active{
    color: white;
    background-color: #a66e0b;
}

.calendar_genre_buttons .genre{
    width: min(5.6568svw,70.71px);
    aspect-ratio: 7071/4400;
}

.calendar_genre_buttons .genreA{
    width: min(7.4424svw,93.03px);
    aspect-ratio: 9303/4400;
}

.calendar_genre_buttons .genreB{
    width: min(7.4424svw,93.03px);
    aspect-ratio: 9303/4400;
}

.calendar_genre_buttons .genreC{
    width: min(8.4104svw,105.13px);
    aspect-ratio: 10513/4400;
}

.calendar_genre_buttons .genreD{
    width: min(5.6568svw,70.71px);
    aspect-ratio: 7071/4400;
}

.calendar_genre_buttons .genreE{
    width: min(7.4424svw,93.03px);
    aspect-ratio: 9303/4400;
}

.calendar_genre_buttons .genreF{
    width: min(5.6568svw,70.71px);
    aspect-ratio: 7071/4400;
}

.calendar_genre_buttons .genreG{
    width: min(7.4424svw,93.03px);
    aspect-ratio: 9303/4400;
}

.calendar_genre_buttons .genreH{
    width: min(7.4424svw,93.03px);
    aspect-ratio: 9303/4400;
}

.calendar_genre_buttons .genreI{
    width: min(8.4104svw,105.13px);
    aspect-ratio: 10513/4400;
}

.calendar_genre_buttons .genreJ{
    width: min(5.6568svw,70.71px);
    aspect-ratio: 7071/4400;
}

.calendar_genre_buttons .genreK{
    width: min(7.4424svw,93.03px);
    aspect-ratio: 9303/4400;
}

.calendar_table{
    width: min(88.8svw, 1110px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: min(1.2svw,15px);
    margin-bottom: min(2.4svw, 30px);
}

.calendar_index,.calendar_index tr{
    width: min(88.8svw, 1110px);
    aspect-ratio: 1110 / 30;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
}

.calendar_index div,.calendar_index tr th{
    width: 14.285%;
    aspect-ratio: 15857/3000;
    font-size: min(1.28svw,16px);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eeeeee;
    border-top:min(0.08svw,1px) solid #d5d5d5;
    border-left:min(0.08svw,1px) solid #d5d5d5;
    box-sizing: border-box;
}

.calendar_index div:nth-child(1):before,.calendar_index tr th:nth-child(1):before{
    content: "月";
}

.calendar_index div:nth-child(2):before,.calendar_index tr th:nth-child(2):before{
    content: "火";
}

.calendar_index div:nth-child(3):before,.calendar_index tr th:nth-child(3):before{
    content: "水";
}

.calendar_index div:nth-child(4):before,.calendar_index tr th:nth-child(4):before{
    content: "木";
}

.calendar_index div:nth-child(5):before,.calendar_index tr th:nth-child(5):before{
    content: "金";
}

.calendar_index div:nth-child(6):before,.calendar_index tr th:nth-child(6):before{
    content: "土";
}

.calendar_index div:nth-child(7):before,.calendar_index tr th:nth-child(7):before{
    content: "日";
}

.calendar_index div:nth-child(6),.calendar_index tr th:nth-child(6){
    background-color: #a9d1f7;
}

.calendar_index div:nth-child(7),.calendar_index tr th:nth-child(7){
    border-right:min(0.08svw,1px) solid #d5d5d5;
    background-color: #f5a4b2;
}

.calendar_week{
    width: min(88.8svw, 1110px);
    height: min(8.72svw,109px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar_day{
    width: 14.285%;
    height: min(8.72svw,109px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: white;
    border-top:min(0.08svw,1px) solid #d5d5d5;
    border-left:min(0.08svw,1px) solid #d5d5d5;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    text-decoration: none;
    color: black;
}

.calendar_day a{
    width: 100%;
    height: 100%;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    align-items: center;
}

.calendar_day:focus-visible,.calendar_day:hover{
    z-index: 0;
}

.calendar_week:last-child .calendar_day{
    border-bottom:min(0.08svw,1px) solid #d5d5d5;
}

.calendar_day.today{
    background-color: #fff7e1;
}

.calendar_day:nth-child(7){
    border-right:min(0.08svw,1px) solid #d5d5d5;
}

.calendar_day .date,.calendar_day a .date{
    width: 80%;
    margin-top: 5%;
    text-align: left;
    margin-bottom: 2.5%;
    font-size: min(1.6svw, 20px);
    font-weight: bold;
    text-decoration: none;
    color: black;
}

.calendar_day .text,.calendar_day a .text{
    font-size: min(1.28svw, 16px);
    display: flex;
    text-decoration: underline;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: black;
    font-weight: lighter;
}

.calendar_day .text a{
    color: black;
}

.calendar_day:nth-of-type(7n-1) .date{
    color:#4783bb;
}

.calendar_day:nth-of-type(7n) .date{
    color:#cf697a;
}

.calendar_button{
    display: block;
}

.calendar_button button{
    width: min(35.2svw, 440px);
    height: min(6.4svw, 80px);
    border-radius: min(3.2svw, 40px);
    font-size: min(1.28svw, 16px);
    padding: 0;
    margin-top: min(2.4svw,30px);
    margin-bottom: min(2.4svw, 30px);
}

.calendar_button button:before {
    content: "";
    box-sizing: border-box;
    width: min(2.56svw, 32px);
    height: min(2.64svw, 33px);
    margin-left: min(1.92svw, 24px);
    margin-right: min(1.92svw, 24px);
    background-size: 99%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/calendar_icon1.png);
    z-index: 2;
}

.calendar_button button:after {
    content: "";
    box-sizing: border-box;
    width: 0;
    height: 0;
    margin-left: auto;
    box-sizing: border-box;
    border: min(0.48svw, 6px) solid transparent;
    border-left: min(0.64svw, 8px) solid #555;
    z-index: 2;
}

@media screen and (max-width: 480px) {
    .calendar_box{
        border-radius:min(4.5svw, 50px);
        margin-top: min(4.2svw, 35px);
    }
    .calendar_subtitle{
        width: min(92.64svw, 579px);
        height: min(14.08svw,88px);
        background-image: url("../images/calendar_title_background_sp.png");
        margin-top: min(3svw, 55px);
    }
    .calendar_subtitle h2 {
        font-size: min(4.5svw, 36px);
        line-height: min(4.5svw, 36px);
        color: #a66e0b;
        margin-bottom: 0;
        text-align: center;
    }
    .calendar_subtitle h2:before {
        width: min(5.12svw, 32px);
    }
    .calendar_month_nav {
        margin-top: min(1.2svw, 30px);
    }
    .month_title {
        font-size: min(6svw, 30px);
        order: 2;
    }
    .preview_month {
        font-size: min(3svw, 15px);
        order: 1;
        text-underline-offset: min(1svw, 15px);
        margin-right: min(5.12svw, 16px);
    }
    .preview_month:before {
        margin-right: 0.5svw;
        border: min(1svw, 6px) solid transparent;
        border-right: min(1.3333svw, 8px) solid #555;
        margin-top: 1svw;
    }
    .next_month {
        font-size: min(3svw, 15px);
        order: 3;
        text-underline-offset: min(1svw, 15px);
        margin-left:  min(5.12svw, 16px);
    }
    .next_month:after {
        margin-left: 0.5svw;
        border: min(1svw, 6px) solid transparent;
        border-left: min(1.3333svw, 8px) solid #555;
        margin-top: 1svw;
    }
    .calendar_genre_nav {
        margin-top: min(1.2svw, 30px);
    }
    .genre_text {
        font-size: min(2.9svw, 16px);
    }
    .calendar_genre_buttons {
        width: min(92svw,578px);
        aspect-ratio: 578 / 217;
        font-size: min(1.28svw, 16px);
        background-color: #fff7e1;
        border-radius: min(1svw, 5px);
        margin-top: min(1.8svw, 30px);
        flex-wrap: wrap;
    }
    .calendar_genre_buttons button {
        font-size: min(2.5svw, 14px);
        line-height: min(3svw, 14px);
        border-radius: min(1svw, 5px);
        margin: 0.4%;
        margin-bottom: 0.6%;
        margin-top: 0.6%;
    }
    .calendar_genre_buttons .genre,.calendar_genre_buttons .genreA,.calendar_genre_buttons .genreB,.calendar_genre_buttons .genreC,.calendar_genre_buttons .genreD,.calendar_genre_buttons .genreE,.calendar_genre_buttons .genreF,.calendar_genre_buttons .genreG,.calendar_genre_buttons .genreH,.calendar_genre_buttons .genreI,.calendar_genre_buttons .genreJ,.calendar_genre_buttons .genreK{
        width: 23.8%;
        aspect-ratio: 136/60;
    }
    .calendar_table {
        width: min(92svw,578px);
        margin-top: min(2.4svw, 15px);
    }
    .calendar_index ,.calendar_index tr{
        width: min(92svw,578px);
        aspect-ratio: 578/40;
    }
    .calendar_index div ,.calendar_index tr th{
        width: min(92svw,578px);
        aspect-ratio: 83 / 40;
        font-size: min(2svw, 16px);
        border-top: min(0.08svw, 1px) solid #d5d5d5;
        border-left: min(0.08svw, 1px) solid #d5d5d5;
    }
    .calendar_week {
        width: min(92svw,578px);
        height: min(15.121svw, 95px);
    }
    .calendar_day{
        width: 23.8%;
        height: min(14.961svw, 94px);
    }
    .calendar_day .date ,.calendar_day a .date {
        margin-top: 10%;
        margin-bottom: 15%;
        font-size: min(2svw, 16px);
    }
    .calendar_day .text, .calendar_day a .text {
        font-size: min(2svw, 16px);
    }
    .calendar_button button {
        width: min(63.36svw, 396px);
        height: min(12.8svw,80px);
        border-radius: min(6.4svw, 40px);
        font-size: min(3svw, 16px);
        margin-top: min(4.8svw, 30px);
        margin-bottom: min(4.4svw, 55px);
    }
    .calendar_button button:before {
        width: min(5.12svw, 32px);
        height: min(6.28svw, 33px);
        margin-left: min(4svw, 24px);
        margin-right: min(10svw, 62.5px);
    }
    .calendar_button button:after {
        margin-left: auto;
        margin-right: 5svw;
        border: min(1svw, 6px) solid transparent;
        border-left: min(1.3333svw, 8px) solid #555;
        margin-top: 1svw;
    }
}
