@import url(./bousai_body.css);
@import url(./topFreearea_map.css);

/* 横スクロールバー禁止 */
html, body {
    overflow-x: hidden;
}

/* body */
body {
}

a {
    text-decoration: none;
}
    a:hover {
        text-decoration: underline;
    }

/*:::::::::::::::::::::::::
 * 枠組 
 *::::::::::::::::::::::::*/
#struct {
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #566D7B;
}

.wrapper1100 {
    max-width: 1100px;
    margin: 0px auto;
}

.wrapper1000 {
    max-width: 1000px;
    margin: 0px auto;
    font-size: 90%;
}

#main_container {
    width: 100%;
}

/*:::::::::::::::::::::::::
 * 緊急情報
 *::::::::::::::::::::::::*/
.title {
    font-size: 0.91em !important;
}

.svg-inline--fa.fa-fw {
    width: 1em !important;
}

.area_news .kinkyuTtl H1 {
    font-size: 1.38em;
    font-weight: 500;
    line-height: 2.4em;
    padding-top: 87px;
    background-image: url(../images/bousai/bg_kinkyu.png);
    background-size: 57px;
    background-repeat: no-repeat;
    background-position: center 35px;
    letter-spacing: 0.05em;
}

.kinkyuBlock {
    padding: 0px;
    box-sizing: border-box;
    margin: 0px 0px 0px;
    width: 100%;
    display: flex;
    min-height: 257px;
}

.kinkyuTtl {
    text-align: center;
    width: 200px;
    font-weight: bold;
}

    .kinkyuTtl span {
        color: #ffffff;
        padding-left: 5px;
    }

.kinkyu_list_area {
    padding: 0px;
    box-sizing: border-box;
    margin: 5px 10px 5px 0;
    width: 100%;
    display: flex;
    min-height: 226px;
}

#kinkyuInfo {
    float: left;
    max-width: 980px;
    padding: 0px 5px 0px 10px;
}

#kinkyuTxt {
    padding: 9px 0px 5px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 100%;
}

ul.kinkyuTxt {
    padding: 9px 0px 5px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 100%;
}
    ul.kinkyuTxt li {
        line-height: 1.2em;
        padding: 5px 5px 0px 0px;
    }
        ul.kinkyuTxt li p.koshin {
            line-height: 1.6;
            margin: 5px 0;
        }
        ul.kinkyuTxt li div.k_naiyo {
            margin: 0px 0px 10px;
        }
            ul.kinkyuTxt li div.k_naiyo .k_title {
                font-weight: bold;
            }
            ul.kinkyuTxt li div.k_naiyo .honbun {
                margin-left: 0px;
                word-wrap: break-word;
                overflow-wrap: break-word;
                padding: 5px 0px;
                font-size: 0.91em;
                line-height: 1.5em;
            }
        ul.kinkyuTxt li div.saigaittl {
            font-weight: bold;
            font-size: 0.95em;
            line-height: 2em;
            padding: 5px 5px 0px 5px;
        }
        ul.kinkyuTxt li.nodata {
            line-height: 30px;
            padding-left: 10px;
        }

.kinkyuTxt li div.saigainaiyo {
    padding: 5px;
    margin-bottom: 10px;
    border-bottom: 1px dotted #C1272D;
    line-height: 1.5em;
}

h2.top_midashi {
    display: inline;
    font-weight: bold;
}

.title {
    line-height: 1.6;
}

.textLink {
    line-height: 1.6;
    font-size: 0.9em;
}


/*:::::::::::::::::::::::::
 * フリーエリア
 *::::::::::::::::::::::::*/
.freearea {
    padding: 0px;
    margin: 40px auto;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 2px;
}

/* フリーエリア用 */

#free01 {
    max-width: 1000px;
    margin: 0px auto;
    padding: 0px;
}

.topSide {
    max-width: 210px;
    margin-top: 10px;
}

    .topSide img {
        max-width: 210px;
    }

.topMain img {
    max-width: 480px;
}

h2.title {
    padding: 0 0 4px 21px;
    margin-bottom: 16px;
    font-size: 1.2em;
    font-weight: bold;
    background: url("../images/CssColorType/h2Ttl.gif") no-repeat 7px center #f8f4e6;
}

h3.title {
    background: rgba(0, 0, 0, 0) url("../images/CssColorType/h3Ttl.gif") no-repeat scroll 7px center;
    border-bottom: 1px dashed #ba8b40;
    font-size: 1.1em;
    line-height: 24px;
    margin-bottom: 16px;
    padding: 0 0 4px 21px;
}

#transparency {
    position: absolute;
    margin: 0px;
    padding: 10px 0px 0px 10px;
}


/*:::::::::::::::::::::::::
 *メニュー
 *::::::::::::::::::::::::*/

#menuArea {
    padding-top: 5px;
}

.infotitle span {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2.5em;
    padding-left: 15px;
}

.infotitle02 {
    background: url("../images/bousai/icon_circle.png") no-repeat 8px 2px;
    margin: 15px 0px 0px;
}

    .infotitle02 span {
        font-size: 1.3em;
        font-weight: bold;
        padding-left: 38px;
    }

.infobox {
    margin: 0px auto 15px;
    width: 100%;
}

.infobox_L {
    float: left;
    width: 50%;
}

.infobox_R {
    float: right;
    width: 50%;
}

.naiyo02 {
    padding: 6px 41px 0px 11px;
}

    .naiyo02 ul li {
        background: rgba(0, 0, 0, 0) url("../images/bousai/ya_red.png") no-repeat scroll 10px center;
        padding: 3px 0 2px 25px;
    }

.naiyo03 {
    float: left;
    padding: 10px 0px;
    width: 95%;
    margin: 0px auto;
}

.naiyo04 {
    float: left;
    padding: 10px 10px;
}

.naiyo03 h5 {
    border-top: 2px solid #CC0000;
    border-bottom: 1px solid #D9D9D9;
    padding: 5px;
    font-weight: bold;
    font-size: 1.1em;
}

.naiyo04 h5 {
    border-top: 2px solid #FCEC63;
    border-bottom: 1px solid #D9D9D9;
    padding: 5px;
    font-weight: bold;
    font-size: 1.1em;
}

.naiyo03 ul li {
    background: rgba(0, 0, 0, 0) url("../images/bousai/ya_red.png") no-repeat scroll 10px center;
    padding: 6px 0 2px 28px;
}

.naiyo04 ul li {
    background: rgba(0, 0, 0, 0) url("../images/bousai/ya_pink.png") no-repeat scroll 10px center;
    padding: 3px 0 2px 25px;
}

h5 a {
    text-decoration: none;
}

/*:::::::::::::::::::::::::
 * 新着情報
 *::::::::::::::::::::::::*/
.area_news {
    padding-top: 30px;
    padding-bottom: 25px;
}

.newInfo {
    margin: 0px 0px 10px;
    margin-top: 30px;
    display: flex;
    min-height: 249px;
}

.newTtl {
    width: 200px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.newInfo .newTtl h2 {
    font-size: 1.38em;
    font-weight: 500;
    line-height: 2.4em;
    height: 26px;
    padding-top: 98px;
    background-image: url(../images/bousai/bg_news.png);
    background-size: 58px;
    background-repeat: no-repeat;
    background-position: center 45px;
    letter-spacing: 0.1em;
}

#linkArea {
    position: absolute;
    top: 10px;
    right: 5px;
}

#rss {
    float: left;
    text-align: center;
    display: block;
    font-weight: bold;
    padding: 2px 5px;
    text-decoration: none;
    line-height: 1.5em;
    margin-top: 27px;
}

/* 2016/12/13 アクセシビリティ対応 focus認識*/
a#rss:focus {
    border: dashed #FFF 1px;
}

.listLinkArea {
    background: url("../images/bousai/arrow_list_link.png") no-repeat 3px center;
    background-size: 8px;
    background-position: 10px center;
    width: 114px;
    margin: 0 auto;
    border: 1px solid #C93A05;
    background-position: 10px center;
    margin-top: 10px;
    margin-bottom: 30px;
    transition-duration: 0.2s;
}

.naiyo {
    padding: 9px 0px 5px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 100%;
}
    .naiyo article {
        margin: 2px 0 0 0;
    }
    .naiyo .news_list_area {
        display: flex;
        align-items: center;
        height: 100%;
    }
    .naiyo ul {
        padding-right: 20px;
    }

.newInfo ul {
    padding: 7px 0px;
    width: 90%;
}
    .newInfo ul li {
        line-height: 130%;
        padding: 10px;
        font-size: 1.1em;
    }
        .newInfo ul li p.koushinDay {
            width: auto;
            float: left;
            min-width: 100px;
            font-size: 0.9em;
            text-indent: 1em;
            background: url("../images/bousai/arrow_list_item.png") no-repeat 3px center;
            background-size: 5px;
            padding: 0px 10px 0px 0px;
            margin: 2px 0 0 0;
        }
        .newInfo ul li .kijiTtl {
            float: left;
            max-width: 97%;
            font-size: 1.01em;
        }

p.nodata {
    text-align: left;
    margin: 10px 0px 10px 15px;
}

.listLinkArea a {
    text-decoration: none;
    display: block;
    padding-left: 12px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-weight: normal;
    color: #C93A05;
}

@media screen and (max-width:980px) {
    .area_news {
        padding-top: 10px;
    }

    #newInfo {
        margin-top: 10px;
        margin-bottom: 0px;
    }
}

@media screen and (max-width:767px) {

    /*緊急情報*/
    .kinkyuBlock {
        display: block;
        min-height: 95px;
        padding-bottom: 2px;
    }

    .kinkyuTtl {
        text-align: center;
        width: 190px;
        margin: 0 auto 15px;
    }

    #kinkyuTxt {
        padding: 5px 5px 5px 10px;
        margin-top: 0px;
        margin-bottom: 10px;
        margin-right: 0px;
        width: calc(100% - 35px);
        margin-left: 10px;
    }

    .area_news .kinkyuTtl H1 {
        padding-top: 70px;
        background-position: center 28px;
    }

    ul.kinkyuTxt {
        padding: 5px 5px 5px 10px;
        margin-top: 0px;
        margin-bottom: 10px;
        margin-right: 0px;
        width: calc(100% - 35px);
        margin-left: 10px;
    }

    /*新着情報*/
    .area_news {
        padding-bottom: 1px;
    }

    .newInfo {
        padding-top: 7px;
        margin-top: 10px;
        padding-bottom: 1px;
    }

    .newTtl {
        margin: 0 auto;
        width: 157px;
        padding-right: 0px;
        min-height: initial;
        height: 220px;
    }

    .newInfo {
        display: block;
    }
        .newInfo .newTtl h2 {
            padding-top: 85px;
            background-size: 41px;
            background-position: 59px 32px;
        }

    #rss {
        margin-left: 0px;
        margin-top: 20px;
    }

    .listLinkArea {
        margin: 0 auto;
        margin-top: 10px;
    }

    .naiyo {
        padding: 5px 5px 5px 10px;
        margin-top: 0px;
        margin-bottom: 10px;
        margin-right: 0px;
        width: calc(100% - 35px);
        margin-left: 10px;
    }

    /* スマートフォン用のスタイル記述 */
    #kinkyuTtl {
        width: 100%;
        padding: 5px 0px;
        font-weight: bold;
        font-size: 1.1em;
        float: none;
    }

    ul#kinkyuTxt {
        margin: 0px auto 2px;
        width: 100%;
        padding: 0px;
        float: none;
    }

        ul#kinkyuTxt li.nodata {
            line-height: 20px;
            padding: 10px;
            text-align: center;
        }

    .infobox_L {
        float: none;
        width: 98%;
    }

    .infobox_R {
        float: none;
        width: 98%;
    }

    .naiyo03 {
        float: none;
        padding: 10px 0px;
        width: 95%;
        margin: 0px auto;
    }
}

/* wysiwyg */
#mainShosai table.__wys_table {
    width: auto;
}

.__wys_table td {
    border: solid 1px #000000;
    padding: 3px;
}

.__wys_table th {
    background-color: #eeffee;
    border: 1px solid #000000;
    font-weight: bold;
    padding: 3px;
}

/*:::::::::::::::::::::::::
 * ボタンエリア
 *::::::::::::::::::::::::*/
.btn_area ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 40px auto;
}
    .btn_area ul li {
        width: 240px;
        height: 100px;
        border: 1px solid #A73434;
        position: relative;
        display: table;
    }
.btn_area ul li::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    background-image: url(../images/bousai/icon_sankaku.png);
    z-index: 2;
    position: absolute;
    bottom: 4px;
    right: 5px;
    background-size: 11px;
}
        .btn_area ul li a {
            width: 240px;
            height: 100px;
            text-decoration: none;
            transition-duration: 0.3s;
            display: table-row;
            display: flex;
            align-items: center;
        }
        .btn_area ul li .btn_cont_icon {
            width: 100px;
            text-align: center;
        }
        .btn_area ul li .btn_cont_text {
            letter-spacing: 1.28px;
            box-sizing: border-box;
            text-align: center;
            font-weight: bold;
        }

#btn_area_icon_joho {
    width: 67px;
    height: 61px;
}
#btn_area_icon_musen {
    width: 74px;
    height: 68px;
}
#btn_area_icon_hinan {
    width: 61px;
    height: 58px;
}
#btn_area_icon_hazardmap {
    width: 64px;
    height: 60px;
}

/* 関連バナー */
#kanrenban_area {
    display: none;
}
    /* バナー(.imgBan要素)がある場合にエリアを表示 */
    #kanrenban_area:has(.imgBan) {
        display: block;
        padding-bottom: 30px;
    }

    #kanrenban_area h2 {
        font-size: 1.2em;
        font-weight: bold;
        text-align: center;
    }

.bannaiyo {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 0px;
    justify-content: space-between;
    margin-top: 30px;
    flex-wrap: wrap;
}

.imgBan {
    margin-top: 10px;
}

@media screen and (max-width:1100px) {
    .bannaiyo {
        width: 530px;
    }

    .kanrenban_area {
        height: 390px;
    }
}

@media screen and (max-width:550px) {
    .bannaiyo {
        width: 256px;
    }

    .kanrenban_area {
        height: 390px;
    }

    .kanrenban_area {
        height: 590px;
    }
}

/*:::::::::::::::::::::::::
 * 防災関連リンク
 *::::::::::::::::::::::::*/

#kanrenlink_area {
    margin: 40px auto;
    padding: 0;
    display: flex;
}
#kanrenlink_title {
    width: 450px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#kanrenlink_content {
}

#kanrenlink_title > div {
    text-align: center;
}
#kanrenlink_title img {
    width: 74px;
}
#kanrenlink_title h2 {
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 15px;
    letter-spacing: 0.1em;
}

.link_list a {
    font-size: 0.9em;
}

.linkbox_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
}

.link_midashi {
    font-size: 1.2em;
    padding: 10px 1px;
    font-weight: bold;
    height: 40px;
    margin: 0 auto;
    border-bottom: 1px dashed #D1D1D1;
}
    .link_midashi p {
        margin: 8px 0;
        padding: 0;
        border-left: 5px solid #A73434;
        text-indent: 12px;
    }

.link_box {
    width: 350px;
}
.link_box ul {
    margin-top: 20px;
}
    .link_box ul li {
        padding-left: 18px;
        font-size: 1.05em;
        background-image: url("../images/bousai/arrow_list_item.png");
        background-size: 5px;
        background-repeat: no-repeat;
        background-position: 2px 7px;
        margin-bottom: 20px;
        background-size: 5px;
    }

.link_list ul li a img {
    padding-left: 3px;
}

@media screen and (max-width:1150px) {

    /* ボタンエリア */
    .btn_area ul {
        justify-content: space-around;
        margin: 30px;
        gap: 10px;
    }

    /* 情報を受信する */
    #info_receive_area ul {
        justify-content: center;
        gap: 10px;
    }

    /* 関連リンク */
    #kanrenlink_area {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    #kanrenlink_title {
        width: auto;
        text-align: center;
    }
    .linkbox_wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
        margin-top: 20px;
    }

    .link_list {
        margin-bottom: 40px;
    }
}

@media screen and (max-width:980px) {

    #area_link {
        padding-bottom: 30px;
        padding-top: 30px;
    }
}


/*:::::::::::::::::::::::::
 * 翻訳メニュー
 *::::::::::::::::::::::::*/

#foreignSP {
    display: none;
    margin: 5px;
}

    #foreignSP .plus {
        background: url("../images/top1/btn_plus.png") 98% center no-repeat;
        background-size: 25px 25px;
    }

    #foreignSP .minus {
        background: url("../images/top1/btn_minus.png") 98% center no-repeat;
        background-size: 25px 25px;
    }

        #foreignSP .plus a,
        #foreignSP .minus a {
            display: block;
            height: 100%;
            padding: 15px 10px 15px 20px;
            font-weight: bold;
            text-decoration: none;
            margin: 0px;
        }

    #foreignSP .dspMode {
        display: block !important;
        border: 1px solid #8B0000 !important;
    }

#foreignTitle {
    width: 100%;
    margin: 1px auto;
}

    #foreignTitle a {
        border: 1px solid #333;
        padding: 10px 8px 10px 12px !important;
        color: #8B0000;
        display: block;
        height: 100%;
        font-weight: bold;
    }

#foreignDsp {
    display: none;
}

    #foreignDsp ul {
        width: 100%;
        margin: 3px auto;
    }

        #foreignDsp ul li {
            background-size: 7px 10px;
            border: 1px solid #8B0000;
            width: calc(100% - 10px);
            margin: 0 auto;
        }

            #foreignDsp ul li a {
                width: 70%;
                line-height: 2.4em;
                display: block;
                padding: 0px !important;
                margin-left: 15px !important;
            }

@media screen and (max-width:980px) {

    #foreignSP {
        display: block !important;
    }
}

@media screen and (min-width:768px) {

    /*L-Alert内容表示用 start */
    #pcx_detail, .pcx_detail {
        width: 100%;
        border: 1px solid #F5D6D6;
    }

        #pcx_detail th, #pcx_detail td, .pcx_detail th, .pcx_detail td {
            padding: 6px;
        }

        #pcx_detail th, .pcx_detail th {
            border-top: 1px solid #DA5054;
            border-bottom: 1px solid #DA5054;
            border-right: 1px solid #DA5054;
            border-left: 1px solid #DA5054;
            width: 15%;
            text-align: center;
        }

        #pcx_detail td, .pcx_detail td {
            border-top: 1px solid #DA5054;
            border-bottom: 1px solid #DA5054;
            border-right: 1px solid #DA5054;
            border-left: 1px solid #DA5054;
            width: 85%;
        }

    .evacuation_bold {
        font-weight: bold;
    }
    /*L-Alert内容表示用 end */

    /* L-Alert内容表示用 ver2.1 避難情報 start */
    #pcx_evacuation, .pcx_evacuation {
        width: 100%;
        border: 1px solid #F5D6D6;
    }

        #pcx_evacuation th, #pcx_evacuation td, .pcx_evacuation th, .pcx_evacuation td {
            padding: 6px;
        }

        #pcx_evacuation th, .pcx_evacuation th {
            border-top: 1px solid #DA5054;
            border-bottom: 1px solid #DA5054;
            border-right: 1px solid #DA5054;
            border-left: 1px solid #DA5054;
            width: 20%;
            text-align: center;
        }

        #pcx_evacuation td, .pcx_evacuation td {
            border-top: 1px solid #DA5054;
            border-bottom: 1px solid #DA5054;
            border-right: 1px solid #DA5054;
            border-left: 1px solid #DA5054;
            width: 40%;
        }
    /* L-Alert内容表示用 ver2.1 避難情報 end */
}

@media screen and (max-width:767px) {

    /* L-Alert内容表示用 start */
    #pcx_detail, .pcx_detail {
        width: 100%;
        border: 1px solid #F5D6D6;
    }

        #pcx_detail th, #pcx_detail td, .pcx_detail th, .pcx_detail td {
            padding: 6px;
        }

        #pcx_detail th, .pcx_detail th {
            border-top: 1px solid #DA5054;
            border-bottom: 1px solid #DA5054;
            border-right: 1px solid #DA5054;
            border-left: 1px solid #DA5054;
        }

        #pcx_detail td, .pcx_detail td {
            border-top: 1px solid #DA5054;
            border-bottom: 1px solid #DA5054;
            border-right: 1px solid #DA5054;
            border-left: 1px solid #DA5054;
        }

    .evacuation_bold {
        font-weight: bold;
    }
    /* L-Alert内容表示用 end */

    /* L-Alert内容表示用 ver2.1 避難情報 start */
    #pcx_evacuation, .pcx_evacuation {
        width: 100%;
        border: 1px solid #F5D6D6;
    }

        #pcx_evacuation th, #pcx_evacuation td, .pcx_evacuation th, .pcx_evacuation td {
            padding: 6px;
        }

        #pcx_evacuation th, .pcx_evacuation th {
            border-top: 1px solid #DA5054;
            border-bottom: 1px solid #DA5054;
            border-right: 1px solid #DA5054;
            border-left: 1px solid #DA5054;
        }

        #pcx_evacuation td, .pcx_evacuation td {
            border-top: 1px solid #DA5054;
            border-bottom: 1px solid #DA5054;
            border-right: 1px solid #DA5054;
            border-left: 1px solid #DA5054;
        }

        #pcx_evacuation tr:first-child td, .pcx_evacuation tr:first-child td {
            border-top: none;
        }
    /* L-Alert内容表示用 ver2.1 避難情報 end */
}