@charset "utf-8";

/**********************************************/
/* A-PLAT 改修版 */
/* 地域の適応　Infographic 詳細ページ  2022.09.27 */
/**********************************************/

/***************************/
/*7_underground.pdf*/
/***************************/

/***********/
/*画像のサイズ調整*/
/***********/
#fig01 {
    max-width: 90px;
}
#fig02 {
    max-width: 600px;
}



/*-----------------*/
/*適応策分割調整*/
/*-----------------*/
/*レイアウト*/
.block-l {
    width: calc((100% / 12) * 10);    
    display: flex;
}
.block-r {
    width: calc((100% / 12) * 2);
}


/***********/
/*上段*/
/***********/
/*分類*/
#line-1 .cell {
    width: calc((100% - 70px - 30px) / 2);
}

/*平常時*/
#line-2 .cell {
    width: calc(100% - 70px - 20px);
}
#line-2 .side-ttl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

    display: flex;
    align-items: center;
    justify-content: center;
}
#line-2-1 .cell {
    width: 50%;
    margin: 0;
    padding: 0 10px;
}
#text01 li {
    width: 50%;
}


/*豪雨等の予報・監視*/
#line-3 .cell {
    width: calc(100% - 70px - 20px);
}
#line-3 .side-ttl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

    display: flex;
    align-items: center;
    justify-content: center;
}
#line-3-1 .cell {
    width: 50%;
    margin: 0;
    padding: 0 10px;
}
#line-3 .side-ttl,#line-4 .side-ttl{
    position: relative;
}
#line-3 .side-ttl img,#line-4 .side-ttl img{
    position: absolute;
    top: -24px;
}

/*～浸水時*/
#line-4 .cell {
    width: calc(100% - 70px - 20px);
    padding-top: 10px;
}
#line-4 .side-ttl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

    display: flex;
    align-items: center;
    justify-content: center;
}
#line-4 .cell li {
    text-align: center;
    padding: 0 20px;
}


/*共通*/
#line-5 .cell {
    width: calc(100% - 70px - 20px);
}
#line-5 .side-ttl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

    display: flex;
    align-items: center;
    justify-content: center;
}
#line-5-1 .cell {
    width: 50%;
    margin: 0;
    padding: 0 10px;
}
#line-5-1 .cell img {
    max-width: 200px;
}
#line-5 .cell li {
    text-align: center;
}

#text02 {
    display: block;
    margin: -30px auto;
    max-width: 100px;
}



/***********/
/*下段*/
/***********/
#lower .cell-txt {
    padding: 0 5px;
}

/*分類*/
#line-6 .block-l .cell {
    width: calc((100% - 70px - 30px) / 2);
}
#line-6 .block-r .cell {
    width: calc(100% - 10px);
}


/*平常時*/
#line-7 .block-l {
    display: block;
}
#line-7 .block-r .cell {
    width: calc(100% - 10px);
}
#line-7 .side-ttl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

    display: flex;
    align-items: center;
    justify-content: center;
}
#line-7-1 .cell {
    width: calc((100% - 70px - 30px) / 2);    
}

/*豪雨等の予報・監視*/
#line-7-2 .cell {
    width: calc((100% - 70px - 30px) / 2);    
}



/*浸水時*/
#line-8 .cell {
    width: calc(100% - 70px - 20px);
}
#line-8 .side-ttl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

    display: flex;
    align-items: center;
    justify-content: center;
}

/*時期*/
#line-9 .cell {
    width: calc(100% - 70px - 20px);
    text-align: center;
}

/*効果*/
#line-10 .cell {
    width: calc(100% - 70px - 20px);
}
#line-10 .block-l .cell {
    width: calc((100% - 70px - 30px) / 2);
    text-align: center;
}
#line-10 .block-r .cell {
    width: calc(100% - 10px);
    text-align: center;
}


/*コスト*/
#line-11 .cell {
    width: calc(100% - 70px - 20px);
}
#line-11 .block-l .cell {
    width: calc((100% - 70px - 30px) / 2);
}
#line-11 .block-r .cell {
    width: calc(100% - 10px);
}




/***********/
/*色/
/***********/
/*テキスト*/
.cor1 {
    background-color: #209ed1;
}
span.cor1 {
    background-color: transparent;
    color:#209ed1;
}
div.cor1 {
    color:#fff;
}

.cor2{
    background-color: #0079c2;
}
span.cor2 {
    background-color: transparent;
    color:#0079c2;
}
div.cor2 {
    color:#fff;
}

.cor3{
    background-color: #c9e4c0;
}
span.cor3 {
    background-color: transparent;
    color:#c9e4c0;
}

.cor4 {
    background-color: #ebf2e9;
}
span.cor4 {
    background-color: transparent;
    color:#ebf2e9;
}

.cor5 {
    background-color: #f1ef82;
}
span.cor5 {
    background-color: transparent;
    color:#f1ef82;
}


.cor6 {
    background-color: #64458c;
}
span.cor6 {
    background-color: transparent;
    color:#64458c;
}

.cor7 {
    background-color: #6dcae5;
}
span.cor7 {
    background-color: transparent;
    color:#6dcae5;
}




.cor8 {
    background-color: #f7f7ea;
}
span.cor8 {
    background-color: transparent;
    color:#f7f7ea;
}

.cor9 {
    background-color: #f58c43;
    color: #fff;
}
span.cor9 {
    background-color: transparent;
    color:#f58c43;
}

.cor10 {
    background-color: #fef1e6;
}
span.cor10 {
    background-color: transparent;
    color:#fef1e6;
}

.cor11{
    background-color: #dbddec;
    border: 2px solid #767eb3;
}
span.cor11 {
    background-color: transparent;
    color:#dbddec;
}

.cor12{
    background-color: #7582bc;
}
span.cor12 {
    background-color: transparent;
    color:#7582bc;
}

#c07 .side-ttl {
	color: #000;
}


/****************************/
/*レスポンシブ*/
/****************************/
@media (min-width: 480px) {}
@media (min-width: 768px) {}
@media (min-width: 920px) {}
@media (min-width: 1400px) {}