@font-face {
  font-family: "LogoTypeGothic7";
  src: url("logotypegothic.woff");
}
@font-face {
  font-family: "WebNikumaru"; /* 新丸ゴ */
  src: url("nikumaru.woff");
}
:root {
    --main-background-color-default: white;
    --main-background-color: lemonchiffon;
    --main-font-family: "Jun 201" sans-serif;
    --main-heading-font-family: "Jun 501";
    --main-font-color: mediumseagreen;
    --main-font-shadow: whitesmoke;
    --main-font-color-invert: whitesmoke;
    --main-width: 48em;
    --main-width-mobile: 25em;
    --main-menu-rotate: -15deg;
}
body {
    background-color: var(--main-background-color-default);
    display: flex;
    font-family: var(--main-font-family);
    height: 100%;
    justify-content: center;
    line-height: 1.5em;
    margin: 0;
}
a {
    text-decoration: none;
}
.contents {
    display: flex;
    flex-flow: column;
    width: var(--main-width);
    padding: 0px 50px;
}
.header {
    background-color: var(--main-background-color);
    color: var(--main-font-color);
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    padding: 16px;
}

.header .area {
    display: flex;
    justify-content: center;
    flex-flow: column;
    font-family: var(--main-heading-font-family);
}
.header .area .stroke {
    font-weight: bold;
    text-shadow: 1px 1px var(--main-font-shadow), -1px -1px var(--main-font-shadow),
                 -1px 1px var(--main-font-shadow), 1px -1px var(--main-font-shadow),
                  0px 1px var(--main-font-shadow), 0 -1px var(--main-font-shadow),
                 -1px 0 var(--main-font-shadow),   1px 0 var(--main-font-shadow);  
}
.header .area .corp_name {
    display: flex;
    font-size: 18pt;
    line-height: 1em;
}
.header .area .school_name {
    display: flex;
    font-size: 36pt;
    line-height: 1em;
  
}
.header .area .phonenumber {
    align-items: center;
    display: flex;
    flex-grow: 1;
    font-size: 18pt;
}
.cover_picture {
    display: flex;
    flex-flow: column;
    width: var(--main-width);
}
.cover_picture .caption {
    border: 6px double whitesmoke;
    background-color: var(--main-font-color);
    border-radius: 4px;
    color: var(--main-font-color-invert);
    text-align: justify;
    text-align-last: justify;
    font-family: var(--main-font-family);
    font-size: 16pt;
    padding: 0.125em 1em 
}
.menu {
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    font-family: var(--main-font-family);
    font-size: 16pt;
    padding: 8px 0px;
    width: 100%;
}
.menu .menuitem {
    border: 0.125em solid whitesmoke;
    border-radius: 1em;
    box-shadow: 0.125em 0.125em gainsboro;
    color: var(--main-font-color-invert);
    height: 2em;
    line-height: 2em;
    text-align: center; 
    width: 6em;
}
.menu .menuitem1 {
    background-color: crimson;
}
.menu .menuitem2 {
    background-color: orange;
}
.menu .menuitem3 {
    background-color: gold;
}
.menu .menuitem4 {
    background-color: mediumseagreen;
}
.menu .menuitem5 {
    background-color: deepskyblue;
}
.menu .caption {
    /* rotate: 15deg; */
}
.main {
    display: flex;
    flex-flow: column;
    padding: 1em 1em;
}
.main .heading {
    color: mediumseagreen;
    display: flex;
    font-family: "Yu Mincho", "Hiragino Mincho Pro";
    font-weight: bold;
    justify-content: center;
}
.timelines {
    display: flex;
    flex-flow: row;
    padding: 0.5em;
}
.timelines .item {
    display: flex;
    flex-flow: row;
    padding: 0.5em;
}
.timeline {
    background-image: url(../images/timeline.png);
    background-repeat: no-repeat;
    background-position: bottom;
    height: 544px;
    width: 95px;
    padding: 33px 0px 0px 0px
}
.timeline2 {
    display: flex;
}
.timeline3 {
    display: flex;
}
.timeline_image {
    background-repeat: no-repeat;
    height: 577px;
    width: 300px;
}
.timeline_image3 {
    background-image: url(../images/timeline_3.png);
}
.timeline_image2 {
    background-image: url(../images/timeline_2.png);
}
.monthly_events {
    display: grid;
    gap: 0.25em;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0.5em;
}
.monthly_events .item {
    align-items: center;
    display: flex;
    background-position: start;
    background-repeat: no-repeat;
    background-size: contain;
    height: 10em;
    justify-content: left;
    padding: 0.5em;
    text-shadow: 1px white;
}
.monthly_events .item .events {
    font-size: 16pt;
    font-weight: 700;
    text-shadow:  2px 2px white, -2px -2px white,
                 -2px 2px white, 2px -2px white,
                  0px 2px white, 0 -2px white,
                 -2px 0 white,   2px 0 white;
    padding: 1.5em 0.5em 1em 0.5em;
}
.monthly_events .item .heading {
    font-family: 'WebNikumaru';
    font-size: 24pt;
    justify-content: left;
    text-shadow: gray 2px 3px;
}
.monthly_events .item .heading .number {
    font-size: 2em;
}
.monthly_events .aplil {
    background-image: url(../images/event_aplil.png);
}

.monthly_events .may {
    background-image: url(../images/event_may.png);
}

.monthly_events .june {
    background-image: url(../images/event_june.png);
}

.monthly_events .july {
    background-image: url(../images/event_july.png);
}
.monthly_events .august {
    background-image: url(../images/event_august.png);
}
.monthly_events .september {
    background-image: url(../images/event_september.png);
}
.monthly_events .october {
    background-image: url(../images/event_october.png);
}
.monthly_events .november {
    background-image: url(../images/event_november.png);
}
.monthly_events .december {
    background-image: url(../images/event_december.png);
}
.monthly_events .january {
    background-image: url(../images/event_january.png);
}
.monthly_events .february {
    background-image: url(../images/event_february.png);
}
.monthly_events .march {
    background-image: url(../images/event_march.png);
}
.regular_events {
    padding: 0.5em;
}
.facility {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.facility .floor_map {
    padding: 1em;
}
.facility .floor_map img {
    width: 20em;
}
.facility .photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.facility .photos .photo {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: start;
    padding: 1em;
    width: 10em;
    height: 16em;
}
.facility .photos .photo img {
    width: 100%;
}
.main .about {
    color: whitesmoke;
    background-color: darkred;
    display: grid;
    height: 22em;
    grid-template-columns: 0.4fr 0.6fr;
    padding: 1em;
}
.main .number_of_people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 1em;
}
.main .number_of_people .capacity {
    background-color: lightblue;
    border-radius: 2em;
    display: grid;
    grid-template-rows: 3em 1fr;
    padding: 0.5rem 0em;
    margin: 0em 1em;
}
.main .number_of_people .caption {
    display: grid;
    padding: 0.5em 0em;
    place-content: start center;
}
.main .number_of_people .detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0em 2em;
}
.main .number_of_people .detail :nth-child(2n){
    display: flex;
    justify-content: right;
}
.main .number_of_people .staff {
    background-color: lightblue;
    border-radius: 2em;
    display: grid;
    grid-template-rows: 3em 1fr;
    padding: 1em 0em;
    margin: 0em 1em;
}
.main .notify {
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
}
.bottom {
    background-color: var(--main-background-color);
    color: var(--main-font-color);
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    font-family: var(--main-font-family);
    padding: 1em;
}
.bottom .address {
    display: flex;
    flex-flow: column;
    font-size: 14pt;
    padding: 1em 1em;
}
.bottom .map {
    display: flex;
}
.bottom .menu {
    display: flex;
    flex-flow: row;
    font-size: 14pt;
}
.bottom .menu .column {
    display: flex;
    flex-flow: column;
    padding: 0em 0em 0em 1em;
}
.bottom .menu .column .item {
    padding: 0.25em;
}

@media (min-width: 25rem) {
    .contents {
        width: var(--main-width);
        padding: 0px 50px;
    }
    .header {
        justify-content: space-between;
        padding: 16px;
    }
    .header .area {
        justify-content: center;
        flex-flow: column;
    }
    .header .area .corp_name {
        font-size: 18pt;
        line-height: 1em;
    }
    .header .area .school_name {
        font-size: 36pt;
        line-height: 1em;
    }
    .header .area .phonenumber {
        font-size: 18pt;
    }
    .cover_picture {
        width: var(--main-width);
    }
    .cover_picture .caption {
        font-size: 16pt;
        padding: 0.125em 1em 
    }
    .menu {
        font-size: 16pt;
        padding: 8px 0px;
    }
    .menu .menuitem {
        height: 2em;
        line-height: 2em;
        width: 6em;
    }
    .menu .menuitem1 {
        background-color: crimson;
    }
    .menu .menuitem2 {
        background-color: orange;
    }
    .menu .menuitem3 {
        background-color: gold;
    }
    .menu .menuitem4 {
        background-color: mediumseagreen;
    }
    .menu .menuitem5 {
        background-color: deepskyblue;
    }
    .menu .caption {
    }
    .main {
        padding: 1em 1em;
        margin: 0.5em 0px;
    }
    .main .number_of_people {
        padding: 0.125em;
    }

    .timeline2 {
        display: none;
    }
    .bottom {
        background-color: var(--main-background-color);
        justify-content: space-between;
        flex-flow: row;
        padding: 1em;
    }
    .bottom .address {
        font-size: 14pt;
        padding: 1em 1em;
    }
    .bottom .map {
        height: 300px;
        width: 400px;
    }
    .bottom .menu {
        font-size: 14pt;
    }
    .bottom .menu .column {
        padding: 0em 0em 0em 1em;
    }
    .bottom .menu .column .item {
        padding: 0.25em;
    }
}
@media (max-width: 25rem) {
    .contents {
        width: var(--main-width-mobile);
        padding: 0px 0px;
    }
    .header {
        justify-content: space-between;
        padding: 1em;
    }
    .header .area {
        justify-content: center;
        flex-flow: column;
    }
    .header .area .corp_name {
        font-size: 12pt;
        line-height: 1em;
    }
    .header .area .school_name {
        font-size: 18pt;
        line-height: 1em;
    }
    .header .area .phonenumber {
        font-size: 12pt;
    }
    .cover_picture {
        width: var(--main-width-mobile);
    }
    .cover_picture .caption {
        font-size: 12pt;
        padding: 0.125em 1em 
    }
    .menu {
        font-size: 12px;
        padding: 8px 0px;
    }
    .menu .menuitem {
        width: 50%;
    }
    .menu .caption {
        /*rotate: 15deg;*/
    }
    .main {
        padding: 1rem;
        margin: 0.125rem;
    }
    .main .heading {
        font-size: 1.5rem;
    }    
    .main .number_of_people {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
        margin: 1rem;
    }
    .monthly_events {
        gap: 0.25em;
        grid-template-columns: 1fr 1fr;
    }
    .facility {
        display: grid;
        grid-template-columns: 1fr;
    }
    .cover_picture {
        width: var(--main-width-mobile);
    }
    .cover_picture img {
        width: var(--main-width-mobile);
    }
    .cover_picture .caption {
        font-size: 12px;
    }
    .timelines {
        flex-flow: column;
    }
    .timeline2 {
        display: flex;
    }
    .bottom {
        background-color: var(--main-background-color);
        border: 2px solid mediumseagreen;
        justify-content: space-between;
        flex-flow: column;
        padding: 1em;
    }
    .bottom .address {
        font-size: 14pt;
        padding: 1em 1em;
    }
    .bottom .map {
        height: 300px;
        width: 400px;
    }
    .bottom .menu {
        font-size: 14pt;
    }
    .bottom .menu .column {
        padding: 0em 0em 0em 1em;
    }
    .bottom .menu .column .item {
        padding: 0.25em;
    }    
}