#headerWrap {
    background: #FFF;
}

#group #topicPath {
    padding: 10px 0 0;

}

body.spring {
    background: #ECF5E4;
}

body.summer {
    background: #ECF7FF;
}

body.autumn {
    background: #FFF8F3;
}

body.winter {
    background: #F3F3F3;
}

body.day {
    background: #F7FFF1;
}

#groupHead {
    height: 300px;
    background: #EEE;
    margin-bottom: 100px;
    text-align: left;
}

#groupHead p {
    width: 1000px;
    margin: auto;
    padding: 80px 0 10px;
}

#groupHead h1 {
    width: 1000px;
    margin: auto;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.6));
}

.spring #groupHead {
    background: url(images/spring.jpg) center right;
    background-size: cover;
}

.summer #groupHead {
    background: url(images/summer.jpg) center right;
    background-size: cover;
}

.autumn #groupHead {
    background: url(images/autumn.jpg) center right;
    background-size: cover;
}

.winter #groupHead {
    background: url(images/winter.jpg) center right;
    background-size: cover;
}

.day #groupHead {
    background: url(images/day.jpg) center right;
    background-size: cover;
}

#group article {
    padding: 20px 20px 100px;
}

.spring #contents h2 {
    background: url(images/h2Spring.png) no-repeat left center;
}

.summer #contents h2 {
    background: url(images/h2Summer.png) no-repeat left center;
}

.autumn #contents h2 {
    background: url(images/h2Autumn.png) no-repeat left center;
}

.winter #contents h2 {
    background: url(images/h2Winter.png) no-repeat left center;
}

.day #contents h2 {
    background: url(images/h2Day.png) no-repeat left center;
}

.kakomi {
    border: 8px solid #EEE;
    border-radius: 10px;
    padding: 20px;
}

#contents .kakomiSingle h2 {
    padding: 25px;
    font-weight: bold;
    font-size: 1.25rem;
}

.spring .kakomi {
    border: 8px solid #FFEEFB;
}


#group #contents .kakomi h2 {
    text-align: center;
    background: none;
    margin: 0 0 15px;
    padding: 0;
    color: #8e1955;
}

#contents p.catch {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 2rem;
    text-align: center;
}

.photoArea,
.photoArea3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#contents .photoArea > p {
    width: 48%;
    margin-bottom: 40px;
}

#contents .photoArea3 > p {
    width: 33%;
    margin-bottom: 40px;
}

.accClick {
    cursor: pointer;
}

#contents h3.accClick {
    border: 1px solid #08826F;
    border-radius: 6px;
    padding: 10px 10px 10px 35px;
    position: relative;
}

#contents h3.accClick::first-letter {
    background: none;
}

#contents h3.accClick::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 4px solid #CCC;
    border-right: 4px solid #CCC;
    position: absolute;
    top: 14px;
    left: 10px;
    transform: rotate(135deg);
}

#contents h3.accClick.open::before {
    transform: rotate(-45deg);
    top: 19px;
}

#contents ul.accHide {
    margin: 0 0 50px 20px;
}

.backGray {
    margin: 50px auto 0;
    padding: 20px 40px;
    background: #F3F3F3;
}

#contents .backGray h4 {
    background: #DDD;
    padding: 4px 15px;
}

.flex2 {
    display: flex;
    justify-content: space-between;
}

.flex2 > div {
    width: 49%;
}

.indMenu {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#contents .indMenu > p {
    width: 48%;
    display: table;
    margin-bottom: 25px;
}

.indMenu > p a {
    display: table-cell;
    height: 130px;
    vertical-align: middle;
    border: 1px solid #CCC;
    border-radius: 6px;
    padding: 20px 20px 20px 170px;
    text-decoration: none;
    color: #333;
    font-size: 1.5rem;
}

#toSpring {
    background: url(images/indSpring.png) no-repeat left center #FEF3FF;
    background-size: 130px 130px;
}

#toSummer {
    background: url(images/indSummer.png) no-repeat left center #F3FCFF;
    background-size: 130px 130px;
}

#toAutumn {
    background: url(images/indAutumn.png) no-repeat left center #FFF6EA;
    background-size: 130px 130px;
}

#toWinter {
    background: url(images/indWinter.png) no-repeat left center #F4F4F4;
    background-size: 130px 130px;
}

#toDay {
    background: url(images/indDay.png) no-repeat left center #FBFFF0;
    background-size: 130px 130px;
}

.timeTable td strong {
    display: block;
    margin-bottom: 10px;
    background: #F3F3F3;
    padding: 2px 10px;
}



@media screen and (max-width:599px) {
    #groupHead {
        height: 200px;
        padding: 40px;
    }
    #groupHead p {
        padding: 20px 0 10px;
    }
    #groupHead {
        margin-bottom: 20px;
    }
    #contents p.catch {
        font-size: 1.75rem;
    }
    #contents .kakomi p.textCenter {
        font-size: 0.875rem;
    }
    .photoArea,
    .photoArea3 {
        display: block;
    }
    #contents .photoArea > p,
    #contents .photoArea3 > p {
        width: 100%;
    }
    #contents .photoArea > p img,
    #contents .photoArea3 > p img {
        width: 100%;
        height: auto;
    }
    .indMenu {
        display: flex;
    }
    #contents .indMenu > p {
        width: 100%;
    }
    .indMenu > p a {
        height: 100px;
    }
    .backGray {
        padding: 10px;
    }
    .flex2 {
        display: block;
    }
    .flex2 > div {
        width: 100%;
        margin-bottom: 20px;
    }
    .flex2 > div:last-child {
        margin-bottom: 0;
    }
    .winter #contents p.catch,
    .autumn #contents p.catch {
        font-size: 1.25rem;
    }
    .tableWrap {
        overflow-x: scroll;
    }
    #contents .tableWrap table {
        max-width: initial;
    }
    #contents table.timeTable {
        border: none;
        border-bottom: 1px solid #999;
    }
    #contents table.timeTable td {
        display: block;
        width: 100%;
        border-bottom: none;
    }
}