@charset "utf-8";

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

/***************************/
/*4_highWaveHighTide.pdf*/
/***************************/

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


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


/***********/
/*上段*/
/***********/
#line-1 .cell {
    width: calc((100% - 40px) / 4);
    border-right: 1px #000 dotted;
}
#line-1 .cell:last-child {
    border-right-width: 0;
}

#line-1 .cell img {
    max-width: 240px;
}


/***********/
/*中段*/
/***********/
#lower-c .colbox-line {
    margin-bottom: 2px;
}
#lower-c .cell {
    margin: 0px 1px;
}
#lower-c .cell-txt {
    padding: 10px;
}



#line-2 .block-l .cell {
    width: calc(100% - 70px - 4px);
}
#line-2 .block-r .cell {
    width: calc(100% - 2px);
}


#line-3 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}
#line-3 .block-l .cell {
    width: calc((100% - 70px - 8px) / 3);
}
#line-3 .block-r .cell {
    width: calc((100% - 5px) / 3);
}



#line-4 .block-l .cell {
    width: calc((100% - 70px - 8px) / 3);
}
#line-4 .block-r .cell {
    width: calc((100% - 5px) / 3);
}


#line-5 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}
#line-5 .block-l .cell {
    width: calc((100% - 70px - 8px) / 3);
}
#line-5 .block-r .cell {
    width: calc((100% - 5px) / 3);
}


#line-6 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}
#line-6 .block-l .cell {
    width: calc((100% - 70px - 8px) / 3);
}
#line-6 .block-r .cell {
    width: calc((100% - 5px) / 3);
}
#line-6 .side-ttl{
    display: block;
}


#line-7 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}
#line-7 .block-l .cell {
    width: calc((100% - 70px - 8px) / 3);
}
#line-7 .block-r .cell {
    width: calc((100% - 5px) / 3);
}


#line-8 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}
#line-8 .block-l .cell {
    width: calc((100% - 70px - 8px) / 3);
}
#line-8 .block-r .cell {
    width: calc((100% - 5px) / 3);
}



/***********/
/*下段*/
/***********/
#lower .colbox-line {
    margin-bottom: 2px;
}
#lower .cell {
    margin: 0px 1px;
}
#lower .cell-txt {
    padding: 10px;
}


#line-9 .block-l .cell {
    width: calc(100% - 70px - 3px);
}
#line-9 .block-r .cell {
    width: calc(100% - 2px);
}

#line-10 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
#line-10 .block-l .cell {    
    width: calc((100% - 70px - 4px) / 2);
}
#line-10 .block-r .cell {
    width: calc((100% - 4px) / 2);
}


#line-11 .block-l .cell {
    width: calc((100% - 70px - 4px) / 2);
}
#line-11 .block-r .cell {
    width: calc((100% - 4px) / 2);
}



#line-12 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
#line-12 .block-l .cell {
    width: calc((100% - 70px - 4px) / 2);
}
#line-12 .block-r .cell {
    width: calc((100% - 4px) / 2);
}


#line-13 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
#line-13 .block-l .cell {
    width: calc((100% - 70px - 4px) / 2);
}
#line-13 .block-r .cell {
    width: calc((100% - 4px) / 2);
}
#line-13 .side-ttl{
    display: block;
}

#line-14 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
#line-14 .block-l .cell {
    width: calc((100% - 70px - 4px) / 2);
}
#line-14 .block-r .cell {
    width: calc((100% - 4px) / 2);
}

#line-15 .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
#line-15 .block-l .cell {
    width: calc((100% - 70px - 4px) / 2);
}
#line-15 .block-r .cell {
    width: calc((100% - 4px) / 2);
}



/***********/
/*色*/
/***********/
.cor1 {
    background-color: #ef4b4b;
}
span.cor1 {
    background-color: transparent;
    color:#ef4b4b;
}

.cor2 {
    background-color: #3e3e3f;
}
span.cor2 {
    background-color: transparent;
    color:#3e3e3f;
}

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

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

.cor5 {
    background-color: #f9d8ce;
}
span.cor5 {
    background-color: transparent;
    color:#f9d8ce;
}
.cor6 {
    background-color: #fbebe4;
}
span.cor6 {
    background-color: transparent;
    color:#fbebe4;
}

.cor7 {
    background-color: #d1d2d4;
}
span.cor7 {
    background-color: transparent;
    color:#d1d2d4;
}
.cor8 {
    background-color: #e6e7e9;
}
span.cor8 {
    background-color: transparent;
    color:#e6e7e9;
}


.cor9 {
    background-color: #49b849;
}
span.cor9 {
    background-color: transparent;
    color:#49b849;
}

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

.cor11 {
    background-color: #d9ecd4;
}
span.cor11 {
    background-color: transparent;
    color:#d9ecd4;
}

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

.cor13 {
    background-color: #ebf5e8;
}
span.cor13 {
    background-color: transparent;
    color:#ebf5e8;
}

.cor14 {
    background-color: #e1e6ef;
}
span.cor14 {
    background-color: transparent;
    color:#115b86;
}

span.cor15 {
    background-color: transparent;
    color:#115b86;
    border-bottom: 1px solid #115b86;
    font-size: 110%;
    font-weight: bold;
} 

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