@charset "utf-8";
@import url("information.css");

/**********************************************/
/* A-PLAT 地域気候変動適応計画策定・改定の参考事例 */
/* 02:地域気候変動適応計画改定に関する参考事例 */
/**********************************************/ 

#main > h1 > span {
    font-size: 20px;
}

/*見出し*/
.article-headline {
    margin-bottom: 30px;
}


/*目次*/
.mokuji {
    margin-bottom: 30px;
}
.mokuji ol {
    margin: 0 0 0 40px;
}

/*概要*/
.summary {
    padding: 10px;
}


/*グラフ等の枠*/
.canvas {
    margin: 20px 0 40px;
}

/*図*/
.canvas figcaption {
    max-width: 700px;
}
.canvas img {
    width: 100%;
    max-width: 700px;
}


/*小見出し付きの枠*/
.fence {
    position: relative;
    margin: 0 0 20px;
    padding: 30px 10px 20px; /*トップは見出し分空ける*/
    border-style: solid;
    border-width: 2px;
    border-color: #3b3b3b;
    border-radius: 8px;
    line-height: 160%;
}
.fence dt {
    font-size: 1.2em;
    line-height: 100%;
    font-weight: bold;
    color: #fff;
    background-color: #3b3b3b;
    border-radius: 50px;
    padding: 5px 30px;
    border-color: #3b3b3b;
    position: absolute;
    left: 20px;
    top: -12px;
}
.fence dd {
    margin: 0;
    padding: 0;
}
.fence dd p {
    text-indent: 1em;
    margin: 0;
    padding: 0;
}
.fence dd ul {
    margin-top: 0;
    margin-bottom: 0;
}
.fence dd li~li {
    margin-top: 15px;
}


/*枠色：この項目について*/
.cor-about {
    border-color:#777;
}
.cor-about dt {
    color: #fff;
    background-color: #777;
}

/*枠色：結果と分析*/
.cor-analyze {
    border-color: #005387;
}
.cor-analyze dt {
    color: #fff;
    background-color: #005387;
}

/*枠：ポイント（画像付き）*/
.fence-point-icon {
    margin: 0 0 20px;
    font-size: 1.0em;
    padding: 110px 20px 20px;
   
    border-radius: 8px;
    line-height: 160%;
    font-weight: bold;
    background: url("../img/icon_point_red.png") no-repeat center 15px;
    background-size: 70px;
    background-color: #fff0df;
    min-height: 120px;
}
.fence-point-icon p {
    margin: 0;
}
.fence-point-icon b {
    font-weight: 600;
}


/*調査結果の見出し*/
.survey-tilte {
    text-align: center;
}
.survey-tilte span {
    border-radius: 5px;
    line-height: 160%;
    padding: 5px 20px;

    display: block;
}
/*緑*/
.survey-tilte span.color-green {
    background-color: #70ad47;
    color: #fff;
}
/*紫*/
.survey-tilte span.color-purple {
    background-color: #7030a0;
    color: #fff;
}


/*表（ラインデザイン）*/
.tbl-line {
    border-width: 0;
    border-bottom: 2px #666 solid;
}
.tbl-line th {
    border-width: 0;
}
.tbl-line td {
    border-width: 0;
}
.tbl-line th {
    border-top: 2px #666 solid;
    border-bottom: 2px #666 solid;
    background-color: transparent;
}


/*表1*/
.tbl02-01 .td-num {
    width: 90px;
    text-align: right;
}
.tbl02-01 tr.td-line td {
    border-bottom: 1px #666 dotted;
}
.tbl02-02 tr.td-line td {
    border-top: 2px #666 solid;
}
.scroll table.tbl02-01 {
    width: 600px;
}


/*表2*/
.tbl02-02 td {
    border-width: 0;
    padding-top: 3px;
    padding-bottom: 3px;
}
.tbl02-02 td.td-num {
    width: 100px;
    text-align: center;
}
.tbl02-02 td.td-ttl {
    vertical-align: middle;
    text-align: center;
    font-weight: 600;
}
/*矢印付きセル*/
.tbl02-02 td.td-arrow {
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
}
.tbl02-02 td.td-arrow span {
    background: url("../img/icon_arrow.png") no-repeat left center;
    background-size: 16px;
    font-weight: bold;
    color: red;
    padding: 5px 0px 5px 18px;
    display: inline-block;
    margin-left: 17px;  /*矢印の位置微調整*/
}
.tbl02-02 td.cor-gray span {
    background: url("../img/icon_arrow_gray.png") no-repeat left center;
    background-size: 16px;
    font-weight: bold;
    color: #888;
    padding: 5px 0px 5px 18px;
    display: inline-block;
}
.scroll table.tbl02-02 {
    width: 600px;
}



/*表3*/
.tbl02-03 {
    border: 1px #666 solid;
}
.tbl02-03 th {
    background-color: #70ad47;
    color:#fff;
    border: 1px #666 solid;
    padding: 5px;
}
.tbl02-03 th.th-num {
    width: 105px;
}
.tbl02-03 td {
    text-align: right;
    border: 1px #666 solid;
    padding: 5px;
}
.tbl02-03 td.td-ttl {
    text-align: left;
    font-weight: 500;
    background-color: #e2f0d9;

}
.tbl02-03 td.cor-orange {
    background-color: #f4b183;
}
.tbl02-03 td.cor-orange2 {
    background-color: #ed7d31;
}


/*表6*/
.tbl02-04 {
    border: 1px #666 solid;
}
.tbl02-04 th {
    border: 1px #666 solid;
}
.tbl02-04 td {
    border: 1px #666 solid;
}
.tbl02-04 th {
    background-color: #70ad47;
    color:#fff;
}
.tbl02-04 td {
    padding-top: 3px;
    padding-bottom: 3px;
}
.tbl02-04 th.th-num {
    width: 107px;
}
.tbl02-04 td.td-num {
    text-align: center;
}
.tbl02-04 td.td-ttl {
    font-weight: 600;
    background-color: #e2f0d9;
}
.tbl02-04 td.td-num b {
    color: red;
}
.tbl02-04 tr.cor-line td {
    background-color: #fffbe2;
}
.tbl02-04 tr.cor-line td.td-ttl {
    background-color: #e2f0d9;
}


/*表5*/
.table02-box-05 {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px;
}
.tbl02-05 {
    border: 1px #666 solid;
}
.tbl02-05 th {
    background-color: #4572c4;
    color: #fff;
    border: 1px #fff solid;
}
.tbl02-05 td {
    text-align: center;
    border: 1px #fff solid;
}
.tbl02-05 .tbl02-05-line01 td {
    background-color: #cfd5ea;
}
.tbl02-05 .tbl02-05-line02 td {
    background-color: #eaebf5;
}
.tbl02-05 td.td-num {
    width: 110px;
    text-align: center;
}
.tbl02-05 td.td-arrow span {
    background: url("../img/icon_arrow.png") no-repeat left center;
    background-size: 16px;
    font-weight: bold;
    color: red;
    padding: 5px 0px 5px 18px;
    display: inline-block;
    margin-left: 17px;  /*矢印の位置微調整*/
}



/*表6*/
.tbl02-06 {
    table-layout: fixed;
    width: 100%;
    border: 1px #fff solid;
}
.tbl02-06 th {
    width: 50%;
    border: 1px #fff solid;
    background-color: #4572c4;
    color: #fff;
}
.tbl02-06 td {
    border: 1px #fff solid;
    background-color: #deecf7;
}
.scroll table.tbl02-06 {
    width: 600px;
}



/*表7*/
.tbl02-07 {
    border: 1px #fff solid;
}
.tbl02-07 th {
    border: 1px #fff solid;
    background-color: #4572c4;
    color: #fff;
}
.tbl02-07 td {
    border: 1px #fff solid;
    background-color: #deecf7;
}
.tbl02-issue th:nth-child(2) {
    width: 200px;
}
.tbl02-plan {
    table-layout: fixed;
}
.scroll table.tbl02-07 {
    width: 640px;
}


/*事例枠*/
.example02 {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 2px #4572c4 solid;
    line-height: 160%;
}
.example02 h4 {
    text-align: center;
}
.example02 ul {
    margin: 0 20px;
}
.example02 ul li:last-child {
    text-align: right;
    list-style: none;
}



/****************************/
/*レスポンシブ*/
/****************************/
@media (min-width: 580px) {
    .fence-point-icon {
        display: flex;
        align-items: center;
        padding: 20px 20px 20px 110px;
        background-position: 20px center;
    }
    .survey-tilte span {
       display: inline;
    }

    .scroll table.tbl02-06 {
        width: 100%;
    }
    .scroll table.tbl02-07 {
        width: 100%;
    }
}

@media (min-width: 780px) {
    .summary ul {
        margin-left: 40px;
    }
}

@media (min-width: 980px) {
    /*グラフ等の枠*/
    .canvas {
        margin: 30px;/*.fenceと幅を合わせるため左右30設定*/
    }
    .fence {
        margin: 0 30px 30px;
        padding: 30px 20px 20px; /*トップは見出し分空ける*/
    }
    .fence-point-icon {
        margin: 0 30px 20px;
        font-size: 1.2em;
    }
    .survey-tilte {
        text-align: right;
    }
    
    .tbl02-01 .td-num {
        width: 120px;
    }
    .scroll table.tbl02-01 {
        width: 100%;
    }

    .tbl02-02 td.td-num {
        width: 150px;
    }
    .scroll table.tbl02-02 {
        width: 100%;
    }

    .tbl02-05 td.td-num {
        width: 150px;
    }

}

@media (min-width: 1280px) {
   
}