*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.container{
    min-width: 600px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    height: 100vh;
}

header {
    width: 100%;
    height: 72px;
    position: relative;
    z-index: 0;
    color: white;
    background-color: #2392bb;
}
.head-title{
    width: 100%;
    height: 72px;
    position: absolute;
}
.headerTitle{
    width: 100%;
    height: 72px;
    z-index: 1;
    font-size: 30px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head-reload{
    width: 100%;
    height: 72px;
    position: absolute;
}
#reload{
    width: 70px;
    height: 72px;
    z-index: 2;
    margin: 0 auto;
    margin-left: 0px;
    display: none;
    justify-content: center;
    align-items: center;
    border: none;
    background: none;
    /* background: #eee;
    color: #313131; */
}
#reloadButtonImg{
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml;charset=utf8,%3C!--%20Generator%3A%20Adobe%20Illustrator%2018.1.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20--%3E%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%2064px%3B%20height%3A%2064px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23374149%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M472.03%2C187.801c-0.114-0.274-0.207-0.55-0.325-0.824c-0.023-0.047-0.039-0.098-0.062-0.149l-73.371%2C31.035%20l-0.226%2C0.098l-0.145%2C0.062c8.016%2C18.958%2C12.082%2C39.118%2C12.082%2C59.922c0%2C20.808-4.066%2C40.969-12.082%2C59.926%20c-7.754%2C18.332-18.863%2C34.805-33.015%2C48.953c-14.16%2C14.16-30.629%2C25.266-48.961%2C33.02c-18.958%2C8.019-39.118%2C12.086-59.922%2C12.086%20c-20.808%2C0-40.969-4.066-59.926-12.086c-18.332-7.754-34.801-18.86-48.957-33.016c-14.156-14.152-25.266-30.625-33.016-48.957%20c-8.019-18.957-12.086-39.118-12.086-59.926c0-20.805%2C4.066-40.965%2C12.086-59.922c7.75-18.332%2C18.86-34.805%2C33.016-48.957%20c14.152-14.156%2C30.625-25.262%2C48.957-33.019c18.961-8.016%2C39.122-12.082%2C59.926-12.082c10.398%2C0%2C20.618%2C1.094%2C30.626%2C3.118%20c0.812%2C0.175%2C1.625%2C0.308%2C2.437%2C0.5l-13.746%2C32.5l-6.965%2C16.258l0.094-0.012l-0.074%2C0.172l126.73-15.738l63.297-7.778l-0.054-0.074%20l0.18-0.024L381.267%2C50.621L343.174%2C0.062l-0.039%2C0.082L343.026%2C0l-22.414%2C52.996c-20.898-6-42.519-9.102-64.61-9.102%20c-31.578%2C0-62.238%2C6.191-91.117%2C18.406c-27.879%2C11.793-52.902%2C28.664-74.387%2C50.149c-21.48%2C21.476-38.351%2C46.507-50.14%2C74.378%20c-12.215%2C28.887-18.41%2C59.539-18.41%2C91.118c0%2C31.582%2C6.195%2C62.238%2C18.41%2C91.117c11.789%2C27.879%2C28.66%2C52.902%2C50.144%2C74.387%20c21.485%2C21.48%2C46.508%2C38.351%2C74.383%2C50.14C193.764%2C505.809%2C224.42%2C512%2C256.002%2C512c31.578%2C0%2C62.234-6.191%2C91.118-18.41%20c27.871-11.789%2C52.898-28.66%2C74.382-50.14c21.481-21.485%2C38.352-46.508%2C50.141-74.387c12.219-28.879%2C18.41-59.535%2C18.41-91.117%20C490.053%2C246.718%2C483.974%2C216.402%2C472.03%2C187.801z%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.div-calendar-frame{
    text-align: center;
}

footer {
    width: 100%;
    height: 42px;
    color: white;
    background-color: #3e3e3e;
}
.copyrights{
    width: 100%;
    height: 42px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.footer-menu li {
    display: inline;
}

ul.footer-menu li a {
    color: white;
}

.frame-calendar{
    width: 100%;
    /* max-width: 800px; */
    min-width: 620px;
    height: calc((100vh) - (72px + 42px));
    border: 0;
    vertical-align: bottom;
}
#loadAnimation{
    display: block;
    width: 100%;
    /* height: 600px; */
    height: calc((100vh) - (72px + 42px));
    background-color: White;
    background-position: center center;
    background-repeat: no-repeat;
    /* 200px */
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22margin%3A%20auto%3B%20background%3A%20none%3B%20display%3A%20block%3B%20shape-rendering%3A%20auto%3B%22%20width%3D%22200px%22%20height%3D%22200px%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%22%3E%3Cg%20transform%3D%22translate(80%2C50)%22%3E%3Cg%20transform%3D%22rotate(0)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%20fill%3D%22%2361abc6%22%20fill-opacity%3D%221%22%3E%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22scale%22%20begin%3D%22-0.875s%22%20values%3D%221.5%201.5%3B1%201%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%20%3Canimate%20attributeName%3D%22fill-opacity%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%22%20begin%3D%22-0.875s%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(71.21320343559643%2C71.21320343559643)%22%3E%3Cg%20transform%3D%22rotate(45)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%20fill%3D%22%2361abc6%22%20fill-opacity%3D%220.875%22%3E%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22scale%22%20begin%3D%22-0.75s%22%20values%3D%221.5%201.5%3B1%201%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%20%3Canimate%20attributeName%3D%22fill-opacity%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%22%20begin%3D%22-0.75s%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(50%2C80)%22%3E%3Cg%20transform%3D%22rotate(90)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%20fill%3D%22%2361abc6%22%20fill-opacity%3D%220.75%22%3E%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22scale%22%20begin%3D%22-0.625s%22%20values%3D%221.5%201.5%3B1%201%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%20%3Canimate%20attributeName%3D%22fill-opacity%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%22%20begin%3D%22-0.625s%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(28.786796564403577%2C71.21320343559643)%22%3E%3Cg%20transform%3D%22rotate(135)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%20fill%3D%22%2361abc6%22%20fill-opacity%3D%220.625%22%3E%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22scale%22%20begin%3D%22-0.5s%22%20values%3D%221.5%201.5%3B1%201%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%20%3Canimate%20attributeName%3D%22fill-opacity%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%22%20begin%3D%22-0.5s%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(20%2C50.00000000000001)%22%3E%3Cg%20transform%3D%22rotate(180)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%20fill%3D%22%2361abc6%22%20fill-opacity%3D%220.5%22%3E%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22scale%22%20begin%3D%22-0.375s%22%20values%3D%221.5%201.5%3B1%201%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%20%3Canimate%20attributeName%3D%22fill-opacity%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%22%20begin%3D%22-0.375s%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(28.78679656440357%2C28.786796564403577)%22%3E%3Cg%20transform%3D%22rotate(225)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%20fill%3D%22%2361abc6%22%20fill-opacity%3D%220.375%22%3E%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22scale%22%20begin%3D%22-0.25s%22%20values%3D%221.5%201.5%3B1%201%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%20%3Canimate%20attributeName%3D%22fill-opacity%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%22%20begin%3D%22-0.25s%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(49.99999999999999%2C20)%22%3E%3Cg%20transform%3D%22rotate(270)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%20fill%3D%22%2361abc6%22%20fill-opacity%3D%220.25%22%3E%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22scale%22%20begin%3D%22-0.125s%22%20values%3D%221.5%201.5%3B1%201%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%20%3Canimate%20attributeName%3D%22fill-opacity%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%22%20begin%3D%22-0.125s%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(71.21320343559643%2C28.78679656440357)%22%3E%3Cg%20transform%3D%22rotate(315)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%20fill%3D%22%2361abc6%22%20fill-opacity%3D%220.125%22%3E%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22scale%22%20begin%3D%220s%22%20values%3D%221.5%201.5%3B1%201%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%20%3Canimate%20attributeName%3D%22fill-opacity%22%20keyTimes%3D%220%3B1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%22%20begin%3D%220s%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.iframe-loading {
    display: none!important;
}


/* @media screen and (max-width: 880px) , screen and (max-height: 450px) { */
@media screen and (max-width: 480px){
    header {
        height: 60px;
    }
    .head-title, .headerTitle{
        height: 60px;
        font-size: 24px;
    }
    .head-reload, #reload{
        height: 60px;
    }
    #loadAnimation{
        height: calc((100vh) - (60px + 42px));
    }
    .frame-calendar{
        /* iframeの高さを画面サイズと同じにする 100vh -（header + footer） */
        height: calc((100vh) - (60px + 42px));
    }
    .container{
        width: 100%;
        min-width: 0;
    }
    .frame-calendar{
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}