@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin         : 0;
    padding        : 0;
    border         : 0;
    box-sizing     : border-box;
    vertical-align : baseline;
}

html {
    font-size : 58.5%;
}

body {
    color       : #333;
    font-size   : 1.4rem;
    font-family : Noto Sans JP, -apple-system, Roboto , "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
    background  : url("../image/bg.svg") center fixed;
    background-size: cover;
    line-height : 1;
}

ol, ul, li {
    list-style     : none;
}

.s-maintenance {
    width         : 340px;
    position      : absolute;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%,-50%);
    background    : #fff;
    padding       : 15px;
    border-radius : 4px;
    padding-bottom : 35px
}

.s-maintenance__status {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    background      : #fff;
    border          : none;
    padding         : 20px 15px;
    margin-bottom   : 10px;
}

.s-maintenance__status__title {
    font-size      : 1.6rem;
    letter-spacing : 0.58px;
    margin-bottom  : 20px;
    font-weight    : bold;
    color: #0e70a0;
}

.s-maintenance__status__period {
    margin-top : 20px;
}

.s-maintenance__status__period li {
    display        : flex;
    align-items    : center;
    font-size      : 16px;
    letter-spacing : 0.58px;
}

.s-maintenance__status__period li:first-child {
    margin-bottom : 5px;
}

.s-maintenance__status__period span {
    display      : block;
    color        : #fff;
    background   : #0e70a0;
    font-size    : 1.2rem;
    padding      : 5px;
    margin-top   : 2px;
    margin-right : 8px;
}

.s-maintenance__description {
    font-size     : 1.4rem;
    margin-bottom : 15px;
    padding-left: 40px;
}

.s-maintenance__description p {
    margin-bottom : 5px;
    line-height   : 1.4;
}

.s-maintenance__link a {
    display         : block;
    font-size       : 1.2rem;
    color           : #1E7C9B;
    text-decoration : none;
    position        : relative;
    padding-left    : 55px;
    line-height     : 1.4;
}

.s-maintenance__link a:hover {
    text-decoration : underline;
}
.s-maintenance__link a:before {
    content         : " ";
    position        : absolute;
    left            : 40px;
    top             : 50%;
    transform       : translateY(-50%);
    height          : 10px;
    width           : 10px;
    background      : url("../image/link.svg") no-repeat left center;
    background-size : contain;
}

.s-sp {
    display: none;
}
@media screen and (max-width: 375px) {
    .s-maintenance {
        width: 300px;
    }
    .s-sp {
        display: block;
    }
}