@charset "utf-8";

/* reset styles
-------------------------------------------------- */
html, body, header, footer, article, section, p, ul, ol, li, div, strong, a, button, input, nav, aside, span, dl, dt, dd, h1, h2, h3, h4, h5, h6,
table, tr, td, th {
    padding: 0;
    margin: 0;
    border: none;
    box-sizing: border-box;
}

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

a {
    text-decoration: none;
    color: #5285B9;
}


.cf:after {
    content: "";
    display: block;
    clear: both;
}

.cf:before {
    　　　　content: "";
    display: block;
    clear: both;
}

.cf {
    display: block;
}


/* common styles
-------------------------------------------------- */
html {
    color: #333;
    font-size: 12px;
    line-height: 2em;
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    font-weight: 300;
    text-align: center;
}

.red {
    color: #DD4C4C !important;
}

.blue {
    color: #5285B9 !important;
}

header {
    width: 100%;
    padding: 15px 0;
    margin: 0 0 40px;
    border-bottom: solid 1px #eee;
    position: relative;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 99;
    background-color: white;
}

    header nav {
        margin: 0 auto;
    }

        header nav ul li {
            display: inline-block;
            margin: 0 10px;
        }

            header nav ul li a {
                display: block;
                height: 30px;
                padding: 0 20px;
                line-height: 30px;
                border-radius: 15px;
                transition: all .5s ease-out;
            }

            header nav ul li.on a {
                font-weight: bold;
            }

            header nav ul li ul li a {
                color: white;
            }

            header nav ul li a:hover {
                background: #5285B9;
                color: #fff;
                font-weight: bold;
            }

        /* Additional */

        header nav ul:before,
        header nav ul:after {
            content: "";
            display: table;
        }

nav ul:after {
    clear: both;
}

nav ul > li {
    float: left;
    position: relative;
}

nav a:hover {
    text-decoration: none;
    transition: all .7s ease 0s;
}

nav li ul {
    background: #35668e;
    color: white;
}

    nav li ul li {
        width: 250px;
    }

        nav li ul li a {
            font-size: 1em;
            font-weight: 400;
        }

    nav li ul a {
        border: none;
    }


nav ul > li:hover ul li {
    height: 40px;
}

nav li ul {
    position: absolute;
    left: 0;
    top: 36px;
    z-index: 1;
}

    nav li ul li {
        overflow: hidden;
        height: 0;
        -webkit-transition: height 200ms ease-in;
        -moz-transition: height 200ms ease-in;
        -o-transition: height 200ms ease-in;
        transition: height 200ms ease-in;
    }
/* -- Additional -- */


header .language-pull select {
    border: none;
    outline: none;
    cursor: pointer;
}


header section.language-pull {
    position: absolute;
    top: 30px;
    right: 30px;
}

footer {
    width: 100%;
    background: #E7ECEF;
    padding: 40px 0 20px;
    border-top: solid 1px #ddd;
}

    footer nav ul {
        /* margin: 0 auto 20px; */
    }

        footer nav ul li {
            display: inline-block;
            margin: 0 20px;
        }

.sp {
    display: none;
}

/* contents styles
-------------------------------------------------- */
#contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 50px;
}

    #contents.top {
        max-width: 800px;
    }

#bar-alert {
    width: 100%;
    margin: 0 auto 40px;
}

    #bar-alert ul li {
        width: 100%;
        min-height: 1em;
        background: #DD4C4C;
        border-radius: 5px;
        padding: 10px;
        text-align: left;
        color: #fff;
        font-weight: bold;
    }

#contents h1 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2em;
    color: #333;
    margin: 0 0 20px;
}

#contents .update {
    font-size: 0.8em;
}

#contents > section {
    border: solid 1px #eee;
    border-radius: 10px;
    margin-bottom: 40px;
}

#contents input[type="text"],
#contents select {
    min-width: 120px;
    height: 30px;
    line-height: 30px;
    color: #777;
    font-size: 12px;
    border: solid 1px #ccc;
    border-radius: 3px;
    margin: 0;
    padding: 0 20px 0 5px;
    outline: none;
    cursor: pointer;
}

#contents a {
    transition: all .3s ease-out;
}

    #contents a:hover {
        opacity: 0.7;
    }

/* weather styles
-------------------------------------------------- */
.weather {
    position: relative;
    width: 480px;
    padding: 20px;
    margin: 0 40px 40px 0;
    text-align: left;
    float: left;
}

    .weather .update {
        position: absolute;
        top: 20px;
        right: 20px;
        text-align: right;
    }

    .weather .main-weather {
        margin: 0 auto 30px;
    }

        .weather .main-weather > div {
            vertical-align: top;
        }

        .weather .main-weather .today {
            width: 30%;
            display: inline-block;
        }

.main-weather .today h2 {
    width: 100%;
    background: #ddd;
    line-height: 30px;
    height: 30px;
    border-radius: 15px;
    text-align: center;
    font-size: 15px;
    margin: 0 0 10px;
}

    .main-weather .today h2 span {
        font-size: 10px;
    }

.main-weather .today div {
    display: block;
}

.main-weather .today strong {
    font-size: 60px;
    line-height: 1em;
}

.main-weather .wether-icon {
    width: 30%;
    display: inline-block;
    text-align: center;
}

    .main-weather .wether-icon img {
        width: 80px;
        height: auto;
    }

.main-weather .detail {
    width: 40%;
    display: inline-block;
    margin-right: -10px;
}

    .main-weather .detail dl {
        display: table;
        width: 100%;
        margin: 0 0 2px;
    }

        .main-weather .detail dl dt,
        .main-weather .detail dl dd {
            display: table-cell;
        }

        .main-weather .detail dl dt {
            width: 70%;
            text-align: left;
        }

        .main-weather .detail dl dd {
            width: 30%;
            text-align: right;
            font-weight: bold;
        }

        .main-weather .detail dl.line {
            border-bottom: solid 1px #ccc;
            padding-bottom: 4px;
            margin-bottom: 4px;
        }

.weather .week {
    width: 100%;
}

    .weather .week ul {
        display: block;
    }

        .weather .week ul li {
            display: inline-block;
            width: 16%;
            text-align: center;
        }

            .weather .week ul li:last-child {
                margin-right: -10px;
            }

            .weather .week ul li > div {
                font-size: 8px;
            }

            .weather .week ul li strong {
                font-size: 12px;
            }

            .weather .week ul li img {
                width: auto;
                height: 65px;
            }

            .weather .week ul li span {
                color: #707070;
            }



/* main-alert styles
-------------------------------------------------- */
.main-alert {
    width: 280px;
    float: right;
    padding: 20px;
    text-align: left;
}

    .main-alert h1 {
        margin-bottom: 0 !important;
    }

    .main-alert > div {
        width: 100%;
        margin: 0 0 20px;
    }

    .main-alert > p {
        width: 100%;
        text-align: left;
        margin: 0 0 20px;
    }

    .main-alert > div h2 {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        font-size: 15px;
        font-weight: bold;
        padding: 0 20px;
        margin: 0 0 10px;
    }

    .main-alert .alert1 h2 {
        background: #EB6E4B;
        color: #fff;
    }

    .main-alert .alert1 p {
        color: #EB6E4B;
    }

    .main-alert .alert2 h2 {
        background: #FFEF2F;
        color: #333;
    }

    .main-alert .alert2 p {
        color: #333;
    }

    .main-alert > div p {
        display: block;
        width: 100%;
        font-size: 15px;
        line-height: 1.4em;
        font-weight: bold;
    }



/* chiebukuro styles
-------------------------------------------------- */
.chiebukuro {
    display: block;
    clear: both;
    padding: 20px;
    text-align: left;
}

    .chiebukuro h1 {
        display: inline-block;
        margin-right: 10px;
    }

    .chiebukuro .btn-entry {
        display: inline-block;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        background: #5285B9;
        border-radius: 3px;
        margin: 0 auto 0 10px;
        font-size: 12px;
    }

    .chiebukuro ul {
        display: block;
        margin: 0 auto 20px;
    }

        .chiebukuro ul li {
            display: inline-block;
            margin-right: 20px;
            vertical-align: middle;
        }

            .chiebukuro ul li input {
                margin-right: 5px;
            }

    .chiebukuro .chieebukuroTable {
        width: 100%;
    }

        .chiebukuro .chieebukuroTable dl {
            display: table;
            width: 100%;
        }

            .chiebukuro .chieebukuroTable dl:last-child {
                border-bottom: solid 1px #ccc;
            }

        .chiebukuro .chieebukuroTable .chiebukuroTitle {
            border-top: solid 1px #ccc;
            border-bottom: solid 1px #ccc;
            text-align: center;
            font-weight: bold;
        }

        .chiebukuro .chieebukuroTable .chiebukuroContents {
            border-bottom: dashed 1px #ccc;
        }

        .chiebukuro .chieebukuroTable dl.last {
            border-bottom: solid 1px #ccc;
        }

        .chiebukuro .chieebukuroTable dt,
        .chiebukuro .chieebukuroTable dd {
            display: table-cell;
            padding: 15px 5px;
            vertical-align: text-bottom;
        }

        .chiebukuro .chieebukuroTable dt {
            width: 20%;
        }

        .chiebukuro .chieebukuroTable dd:nth-child(2) {
            width: 10%;
            text-align: center;
        }

        .chiebukuro .chieebukuroTable dd:nth-child(3) {
            width: 15%;
            text-align: center;
        }

        .chiebukuro .chieebukuroTable dd:nth-child(4) {
            width: 55%;
        }




    .chiebukuro .cat {
        display: inline-block;
        height: 24px;
        line-height: 24px;
        font-size: 0.8em;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin: 0 auto;
        padding: 0 15px;
        border-radius: 12px;
    }

    .chiebukuro .cat1 {
        background: #4C8366;
    }

    .chiebukuro .cat2 {
        background: #E36D6D;
    }

    .chiebukuro .cat3 {
        background: #C78AC7;
    }

    .chiebukuro .cat4 {
        background: #AC824A;
    }

    .chiebukuro .cat5 {
        background: #4AA4AC;
    }

    .chiebukuro .cat6 {
        background: #E5BA58;
    }

    .chiebukuro .cat7 {
        background: #A07ED6;
    }

    .chiebukuro ul.pageLink {
        display: block;
        width: 100%;
        text-align: center;
        margin: 10px auto;
        color: #ccc;
    }

        .chiebukuro ul.pageLink li span {
            color: #333;
        }

/* news styles
-------------------------------------------------- */
.news {
    width: 100%;
    clear: both;
    padding: 20px;
    text-align: left;
}


    .news ul {
        width: 100%;
    }

        .news ul li {
            display: block;
            width: 100%;
            padding: 20px 0;
            border-bottom: dashed 1px #ddd;
        }

            .news ul li:first-child {
                padding-top: 0;
                font-weight: bold;
            }

            .news ul li:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            .news ul li dl {
                display: table;
            }

                .news ul li dl dt,
                .news ul li dl dd {
                    display: table-cell;
                    text-align: left;
                }

                .news ul li dl dt {
                    width: 160px;
                }

                .news ul li dl dd {
                    width: auto;
                }







/* list-alert styles
-------------------------------------------------- */
.list-alert {
    padding: 20px;
    text-align: left;
}

    .list-alert h1 {
        margin-bottom: 0 !important;
    }

    .list-alert p {
        margin-bottom: 20px;
    }


    .list-alert .list h2 {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        font-size: 15px;
        font-weight: bold;
        padding: 0 20px;
        margin: 0 0 10px;
    }

    .list-alert .list .alert1 h2 {
        background: #EB6E4B;
        color: #fff;
    }

    .list-alert .list .alert2 h2 {
        background: #FFEF2F;
        color: #333;
    }

    .list-alert .list > div {
        position: relative;
        padding: 50px 0 0;
        display: inline-block;
        width: 31%;
        margin-right: 20px;
        vertical-align: top;
    }

        .list-alert .list > div:last-child {
            margin-right: -10px;
        }

    .list-alert table {
        width: 100%;
        border: solid 1px #ddd;
        border-spacing: 0px;
    }

        .list-alert table tr {
            display: table;
            width: 100%;
            border-bottom: dashed 1px #ddd;
        }

            .list-alert table tr:last-child {
                border: none;
            }

        .list-alert table th {
            width: 70%;
            padding: 20px 0 20px 20px;
        }

    .list-alert .alert1 table th {
        background: #FDF0EC;
    }

    .list-alert .alert2 table th {
        background: #FFFEE9;
    }

    .list-alert table td {
        width: 30%;
        padding: 20px 0;
        text-align: center;
    }







/* bnArea styles
-------------------------------------------------- */

.bnArea {
    display: table;
    width: 100%;
}

    .bnArea div {
        display: table-cell;
        padding: 20px;
        box-sizing: border-box;
        border-right: solid 1px #eee;
    }

        .bnArea div:last-child {
            border: none;
        }

        .bnArea div img {
            width: 100%;
        }








/* appArea styles
-------------------------------------------------- */
.appArea {
    display: table;
    width: 100%;
}

    .appArea > div {
        display: table-cell;
        padding: 20px;
        width: 33%;
        box-sizing: border-box;
        border-right: solid 1px #eee;
    }

        .appArea > div:last-child {
            border: none;
            width: 34%
        }

        .appArea > div h1 {
            font-size: 15px !important;
            line-height: 1.4em;
        }

            .appArea > div h1 strong {
                font-size: 25px;
                line-height: 1.4em;
            }










/* sensorContents styles
-------------------------------------------------- */
.sensor_title {
    text-align: left;
    border: none !important;
    margin-bottom: 10px !important;
}

    .sensor_title h1 {
        display: inline-block;
        height: 25px;
        line-height: 25px !important;
        font-size: 12px !important;
        margin: 0 0 10px !important;
        padding: 0 10px;
        border-radius: 13px;
        background: #E7ECEF;
    }

    .sensor_title strong {
        display: block;
        font-size: 15px;
        margin: 0 auto;
    }

.sensorContents {
    padding: 20px;
    text-align: left;
}

    .sensorContents .btn-update,
    .sensorContents .btn-live {
        display: inline-block;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        background: #5285B9;
        border-radius: 3px;
        margin: 0 auto 0 10px;
        font-size: 12px;
    }

    .sensorContents .btn-live {
        position: absolute;
        top: 0;
        right: 0;
    }

    .sensorContents h1 {
        margin: 0 0 10px !important;
    }

    .sensorContents p.update {
        margin: 0 auto 20px;
    }

    .sensorContents .topContents {
        margin: 0 auto 40px;
    }

    .sensorContents .leftContent {
        float: left;
    }

    .sensorContents .rightContent {
        float: right;
    }

        .sensorContents .leftContent h2,
        .sensorContents .rightContent h2 {
            font-size: 12px;
            width: 100%;
            position: relative;
            display: block;
            margin: 0 auto 15px;
        }

    .sensorContents .leftContent dl {
        display: table;
        text-align: left;
    }

    .sensorContents .leftContent dt,
    .sensorContents .leftContent dd {
        display: table-cell;
        vertical-align: bottom;
    }

    .sensorContents .leftContent dd {
        padding: 0 0 0 20px;
        line-height: 1.4em;
    }

    .sensorContents .leftContent .graph {
        display: block;
        width: 50%;
        background: #C7B685;
    }

    .sensorContents .leftContent ul li:last-child {
        font-size: 10px;
        padding: 10px 0 0;
    }

    .sensorContents .bottomContents .leftContent .select1,
    .sensorContents .bottomContents .leftContent .select2 {
        display: inline-block;
        margin: 0 20px 20px 0;
    }

    .sensorContents .bottomContents .leftContent h2 {
        font-size: 15px;
        margin: 0 auto 20px;
    }

    .sensorContents .bottomContents .rightContent {
        width: 260px;
    }

        .sensorContents .bottomContents .rightContent table {
            width: 100%;
        }

        .sensorContents .bottomContents .rightContent .contents {
            height: 220px;
            overflow-y: scroll;
        }

        .sensorContents .bottomContents .rightContent table th {
            text-align: left;
            font-weight: bold;
        }

        .sensorContents .bottomContents .rightContent table th,
        .sensorContents .bottomContents .rightContent table td {
            width: 33%;
        }

        .sensorContents .bottomContents .rightContent table td {
            color: #ffff;
            text-align: center;
        }

.level1 {
    background: #1D90FF
}

.level2 {
    background: #FF8C00
}

.level3 {
    background: #FF4500
}

.level4 {
    background: #8A2BE2
}

.level5 {
    background: #000000
}



/* shelter-detail styles
-------------------------------------------------- */
.shelterContents {
    padding: 20px;
    text-align: left;
}

    .shelterContents h1 {
        margin: 0 0 10px !important;
    }

.shelter-detail {
    margin: 0 auto 40px;
}

.shelter-addres dl {
    display: block;
    margin: 0 auto 20px;
}

    .shelter-addres dl dt,
    .shelter-addres dl dd {
        display: inline-block;
        vertical-align: top;
        margin-right: 20px;
    }

        .shelter-addres dl dt h2 span {
            font-size: 0.7em;
            font-weight: 100;
        }

        .shelter-addres dl dd ul {
            display: block;
            padding: 15px;
            background: #E7ECEF;
            border-radius: 5px;
        }

            .shelter-addres dl dd ul li,
            .shelter-addres dl dd ul li div {
                display: inline-block;
                vertical-align: middle;
            }

                .shelter-addres dl dd ul li div {
                    line-height: 1.2em;
                }

                    .shelter-addres dl dd ul li div.num {
                        font-size: 24px;
                    }

.shelter-addres ul.linkArea {
    margin: 0 auto 20px;
}

    .shelter-addres ul.linkArea li {
        display: inline-block;
        margin-right: 20px;
    }

.shelter-addres .detailTxt {
    display: block;
    margin: 0 auto 20px;
}

.shelter-list {
    margin: 0 auto 40px;
}

    .shelter-list ul li {
        display: inline-block;
        width: 176px;
        margin: 20px 20px 0 0;
        text-align: center;
    }

        .shelter-list ul li:nth-child(5n) {
            margin-right: -20px;
        }

        .shelter-list ul li img {
            width: 100%;
            height: auto;
        }


/* hazard-map styles
-------------------------------------------------- */
.manual-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.text-group {
    flex: 1 0 70%;
    padding-right: 2rem;
}

.img-group {
    flex: 1 0 20%;
}

    .img-group img {
        max-width: 250px;
    }

.text-group .manual-title {
    margin-bottom: 1.5rem;
}

.text-group .manual-desc {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    line-height: 1.75;
}

.text-group .manual-link {
    margin-bottom: 1.5rem;
}

    .text-group .manual-link a {
        color: #5285B9;
        font-size: 1.3rem;
    }


@media screen and (max-width: 959px) {
    /* 959px以下に適用されるCSS（タブレット用） */

    /* common styles
-------------------------------------------------- */
    html {
        font-size: 12px;
    }

    header {
        padding: 10px;
        margin: 0 0 10px;
        text-align: left;
    }

        header nav {
            margin: 0 auto 0 0;
        }

            header nav ul li {
                margin: 0 3px;
            }

                header nav ul li a {
                    padding: 0 10px;
                }

        header section.language-pull {
            top: 10px;
            right: 10px;
        }

    footer {
        padding: 20px 10px;
    }

        footer nav ul {
            margin: 0 auto 20px;
        }

            footer nav ul li {
                margin: 0 20px;
            }



    /* contents styles
-------------------------------------------------- */
    #contents {
        padding: 0 0 10px;
    }

    #bar-alert {
        margin: 0 auto 10px;
    }

        #bar-alert ul li {
            padding: 10px;
        }

    #contents h1 {
        font-size: 24px;
        font-weight: bold;
        line-height: 1.2em;
        color: #333;
        margin: 0 0 20px;
    }

    #contents .update {
        font-size: 0.8em;
    }

    #contents > section {
        border: none;
        padding: 0 10px 20px;
        border-bottom: solid 1px #eee;
        border-radius: 0;
        margin-bottom: 20px;
    }




    /* weather styles
-------------------------------------------------- */
    .weather {
        width: 100%;
        padding: 0px;
        margin: 0 0 20px;
        float: inherit;
    }

    .main-weather .detail {
        padding-right: 10px;
    }






    /* main-alert styles
-------------------------------------------------- */
    .main-alert {
        width: 100%;
        float: inherit;
        padding: 10px;
        position: relative;
    }

        .main-alert h1 {
            margin-bottom: 20px !important;
        }

        .main-alert > div {
            margin: 0 0 10px;
        }

        .main-alert > p {
            position: absolute;
            top: 0px;
            right: 10px;
            font-size: 10px;
            width: auto;
            text-align: left;
            margin: 0 0 10px;
        }

        .main-alert > div h2 {
            padding: 0 20px;
            margin: 0 10px 10px 0;
        }

        .main-alert > div p {
            display: inline-block;
            width: auto;
        }




    /* news styles
-------------------------------------------------- */
    .news {
        padding: 10px;
    }

        .news ul li {
            padding: 10px 0;
        }






    /* list-alert styles
-------------------------------------------------- */
    .list-alert {
        padding: 10px;
    }

        .list-alert h1 {
            margin-bottom: 0 !important;
        }

        .list-alert p {
            margin-bottom: 20px;
        }

        .list-alert .list > div {
            padding: 40px 0 0;
            width: 32%;
            margin-right: 5px;
        }

        .list-alert table th {
            padding: 10px 0 10px 10px;
        }

        .list-alert table td {
            padding: 10px 0;
        }




    /* bnArea styles
-------------------------------------------------- */
    .bnArea {
        display: block;
        width: 100%;
    }

        .bnArea div {
            display: inline-block;
            border: solid 1px #eee;
            border-radius: 5px;
            margin: 0 5px 0px;
            padding: 10px 20px 7px;
            width: 22%;
        }

            .bnArea div:last-child {
                border: solid 1px #eee;
            }

            .bnArea div img {
                width: 100%;
            }





    /* appArea styles
-------------------------------------------------- */
    .appArea {
        display: table;
        width: 95%;
        border: solid 1px #eee !important;
        border-radius: 5px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

        .appArea > div {
            padding: 20px 0;
        }

            .appArea > div h1 {
                font-size: 12px !important;
            }

                .appArea > div h1 strong {
                    font-size: 18px;
                }




    /* sensorContents styles
-------------------------------------------------- */
    .sensor_title {
        border-bottom: solid 1px #eee !important;
        margin-bottom: 10px !important;
        padding: 0 10px 10px !important;
    }

    .sensorContents {
        padding: 10px;
        text-align: left;
    }

        .sensorContents .btn-update,
        .sensorContents .btn-live {
        }

        .sensorContents .btn-live {
        }

        .sensorContents h1 {
            margin: 0 0 10px !important;
        }

        .sensorContents p.update {
            margin: 0 auto 10px;
        }

        .sensorContents .topContents {
            margin: 0
        }

        .sensorContents .leftContent {
            float: inherit;
            margin: 0 auto 10px;
            padding-bottom: 10px;
            border-bottom: solid 1px #eee;
        }

        .sensorContents .rightContent {
            float: inherit;
            margin: 0 auto 10px;
            padding-bottom: 10px;
            border-bottom: solid 1px #eee;
        }

            .sensorContents .leftContent h2,
            .sensorContents .rightContent h2 {
                font-size: 16px;
                width: 100%;
                margin: 0 auto 20px;
            }

        .sensorContents .leftContent dl {
            width: 100%;
        }

        .sensorContents .leftContent dt,
        .sensorContents .leftContent dd {
            display: table-cell;
            vertical-align: bottom;
        }

        .sensorContents .leftContent dt {
            width: 80%;
        }

        .sensorContents .leftContent dd {
            width: 20%
        }

        .sensorContents .leftContent dt img,
        .sensorContents .rightContent svg {
            width: 100%;
            height: auto;
        }

        .sensorContents .leftContent ul li:last-child {
            font-size: 12px;
            padding: 10px 0 0;
        }

        .sensorContents .bottomContents .leftContent .select1,
        .sensorContents .bottomContents .leftContent .select2 {
            display: inline-block;
            margin: 0 20px 20px 0;
        }

        .sensorContents .bottomContents .leftContent h2 {
            font-size: 15px;
            margin: 0 auto 20px;
        }

        .sensorContents .bottomContents .leftContent img {
            width: 100%;
            height: auto;
        }

        .sensorContents .bottomContents .rightContent {
            width: 100%;
        }


        .sensorContents .rightContent.last {
            margin: 0 auto;
            padding: 0;
            border-bottom: none;
        }



    /* chiebukuro styles
-------------------------------------------------- */
    .chiebukuro {
        padding: 20px;
    }

        .chiebukuro ul {
            margin: 0 auto 10px;
        }

        .chiebukuro .chieebukuroTable {
            border-top: solid 1px #ccc;
        }

            .chiebukuro .chieebukuroTable dl {
                display: block;
            }

            .chiebukuro .chieebukuroTable .chiebukuroTitle {
                display: none;
            }

            .chiebukuro .chieebukuroTable .chiebukuroContents {
                border-bottom: dashed 1px #ccc;
                padding: 10px 0;
            }

            .chiebukuro .chieebukuroTable dl.last {
                border-bottom: solid 1px #ccc;
            }

            .chiebukuro .chieebukuroTable dt,
            .chiebukuro .chieebukuroTable dd {
                display: inline-blockl;
                padding: 0 5px;
                vertical-align: text-bottom;
            }

            .chiebukuro .chieebukuroTable dt {
                width: 40%;
            }

            .chiebukuro .chieebukuroTable dd:nth-child(2) {
                width: auto;
                text-align: center;
            }

            .chiebukuro .chieebukuroTable dd:nth-child(3) {
                width: auto;
                text-align: left;
            }

            .chiebukuro .chieebukuroTable dd:nth-child(4) {
                clear: both;
                display: block;
                width: 100%;
            }
}




@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */

    .pc {
        display: none !important;
    }

    body {
        overflow-x: hidden;
    }

    header {
        position: inherit;
        width: 100%;
        height: 50px;
        padding: 30px 0;
    }

        header nav#main-menu {
            position: fixed;
            display: block;
            bottom: 0;
            left: 0;
            z-index: 100;
            background: #EDF3F8;
            width: 100%;
            height: 60px;
        }

            header nav#main-menu li {
                display: inline-block;
                width: 19%;
                height: 60px;
                margin: 0;
                padding-left: 0;
                vertical-align: top;
                text-align: center;
                border-right: solid 1px #DDE8F2;
            }

            .on {
                width: 14% !important;
            }

            .onTwo {
                width: 14% !important;
            }

            .infoList{
                width: 30% !important;
            }

            .menuLast{
                width: 23% !important;
            }
            .menuLast ul li:first-child {
                width: 30% !important;
            }
            .menuLast ul li:nth-child(2) {
                width: 45% !important;
            }
            .menuLast ul li:nth-child(3) {
                width: 25% !important;
            }

            header nav#main-menu ul li a {
                width: 100%;
                height: 60px;
                padding: 5px 0 0;
                font-size: 10px;
                line-height: 1em;
                border-radius: 0;
            }

                header nav#main-menu ul li a svg {
                    display: block;
                    margin: 0 auto 5px;
                    height: 30px;
                }

            header nav#main-menu li.on a {
                background: #5285B9;
                color: #fff;
            }

            header nav#main-menu li:nth-child(5) {
                border-right: none;
            }

            header nav#main-menu ul li a svg path {
                fill: rgb(82, 133, 185);
            }

            header nav#main-menu ul li a:hover svg path {
                fill: rgb(256, 256, 256);
            }

            header nav#main-menu ul li.on a svg path {
                fill: rgb(256, 256, 256);
            }




        header .btn-contact {
            position: absolute;
            top: 10px;
            right: 10px;
            display: inline-block;
            margin: 0 0 0 auto;
        }

            header .btn-contact a {
                display: inline-block;
                height: 30px;
                line-height: 30px;
                color: #fff;
                padding: 0 10px;
                border-radius: 3px;
                background: #5285B9
            }

        header section.language-pull {
            position: inherit;
            display: inline-block;
            margin: 0 auto 0 0;
        }


    #contents > section {
        padding: 0 10px 20px;
        margin-bottom: 20px;
    }

    #contents h1 {
        margin-bottom: 10px !important;
    }


    #bar-alert {
        padding: 0 10px 10px !important;
    }


    .weather .update {
        top: 0px;
        right: 10px;
    }

    .main-weather .today div {
        text-align: center;
    }

    .main-weather .today strong {
        font-size: 40px;
    }

    .weather .main-weather {
        margin: 0 auto 20px;
    }

    .main-alert > div h2 {
        margin: 0 10px 0 0 !important;
    }

    .news ul li dl {
        display: block;
    }

        .news ul li dl dt,
        .news ul li dl dd {
            display: block;
            text-align: left;
        }

    .list-alert .list .alert1 {
        display: block;
        width: 100%;
        margin: 0 auto 20px;
    }

    .list-alert .list .alert2,
    .list-alert .list .alert3 {
        width: 49%;
    }

    .list-alert table th {
        padding: 5px 0 5px 10px;
    }

    .list-alert table td {
        padding: 5px 0;
    }

    .bnArea {
        padding: 0 10px 10px !important;
    }

        .bnArea div {
            width: 45%;
            margin: 0 5px 10px;
        }

    .appArea {
        margin: 0 auto 10px !important;
    }

        .appArea > div {
            width: 30%;
            padding: 10px 0;
        }

            .appArea > div:last-child {
                width: 30%;
            }

            .appArea > div img {
                width: 90%;
            }

            .appArea > div h1 {
                font-size: 10px !important;
            }

                .appArea > div h1 strong {
                    font-size: 12px;
                }


    .spImg {
        width: 60% !important;
    }



    footer {
        padding: 0 0 70px;
        background: #fff;
    }

        footer nav ul {
            margin: 0;
        }

            footer nav ul li {
                display: block;
                width: 100%;
                padding: 10px;
                margin: 0;
                text-align: left;
                border-bottom: solid 1px #eee;
            }

        footer #copyright {
            width: 100%;
            text-align: left;
            padding: 10px;
            position: inherit;
        }


    .sensorContents .leftContent dt {
        width: 60%;
    }

    .sensorContents .leftContent dd {
        width: 40%;
    }

    .sensorContents .leftContent .sp {
        display: block;
    }




    /* shelter-detail styles
-------------------------------------------------- */
    .shelter-detail {
        margin: 0 auto 10px;
    }

    .shelter-addres dl {
        display: block;
        margin: 0 auto 10px;
    }

        .shelter-addres dl dt,
        .shelter-addres dl dd {
            display: inline-block;
            vertical-align: top;
            margin-right: 10px;
        }

    .shelter-addres ul.linkArea {
        margin: 0 auto 10px;
    }

        .shelter-addres ul.linkArea li {
            display: inline-block;
            margin-right: 10px;
        }

    .shelter-list {
        margin: 0 auto 20px;
    }

        .shelter-list ul li {
            display: inline-block;
            width: 46%;
            margin: 10px 20px 0 0;
            text-align: center;
            line-height: 1.2em;
        }

            .shelter-list ul li:nth-child(5n) {
                margin-right: 20px;
            }

            .shelter-list ul li:nth-child(2n) {
                margin-right: -20px;
            }

            .shelter-list ul li img {
                width: 100%;
                height: auto;
            }



    /* hazard-map styles
-------------------------------------------------- */
    .text-group {
        padding-right: 0;
        flex-basis: 100%;
    }

    .img-group {
        flex-basis: 100%;
    }

        .img-group img {
            width: 100%;
            max-width: 100%;
        }
}

@media (min-width: 576px){
    main {
        margin-top: 140px;
        z-index: 1;
    }
}


.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

button[disabled]:hover {
    cursor: inherit;
}

#copyright{
    text-align: center;
    width: 100%;
    position: absolute;
}