@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------
 エンビロン比較表 CSS
------------------------------------------------------*/
:root {
   --width: calc(100vw + 0);
}
.type_sp {
    display: none;
}    
.uv_chart_wrap {
    width: 90%;
    color: #805932;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 auto;    
    padding:0;    
    overflow-x: hidden;
}
.uv_chart_wrap a {
    text-decoration: none;
}
.chart_title {
    color: #805932 !important;
    font-size: 1.3rem !important;
    font-weight: bold;
}
.uv_chart_wrap table.uv_chart {
    width: 100%;
    max-width: 680px;
    margin: 2rem auto 1rem;
}
.uv_chart_wrap table.uv_chart {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto ;
} 
.uv_chart_wrap table.uv_chart tr {
}
.uv_chart_wrap table.uv_chart td, 
.uv_chart_wrap table.uv_chart th {
    border: 1px solid #825D38 !important;        
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem;
    box-sizing: border-box;
    vertical-align: middle;    
}
.uv_chart_wrap table.uv_chart th {
    background: #805932;
    color: #fff;
    text-align: center;
    width: calc(100% / 4) !important;
}
.uv_chart_wrap table.uv_chart tr:nth-child(2) th:first-child {
    border: none !important;
    background-color: none !important;
}
.uv_chart_wrap table.uv_chart td {
    background-color: rgba(130, 93, 56, 0.15);
    color: #805932;
    width: calc(100% / 4) !important;
}
.uv_chart_wrap table.uv_chart tr:first-child td {
    border: none !important;
}
.uv_chart_wrap table.uv_chart tr:first-child td,
.uv_chart_wrap table.uv_chart tr:nth-child(2) td {
    background-color: #fff;
    text-align: left;
    vertical-align: top;
}
.uv_chart_wrap table.uv_chart tr:last-child td {
    text-align: center;
    vertical-align: top;
}    
.uv_chart_wrap table.uv_chart tr:first-child td img {
    width: 85%;
} 
.uv_chart_wrap table.uv_chart tr:nth-child(2) td {
    color: #805932;
    text-align: center;
}    
.uv_chart_wrap table.uv_chart td a:active, 
.uv_chart_wrap table.uv_chart td a:link, 
.uv_chart_wrap table.uv_chart td a:hover, 
.uv_chart_wrap table.uv_chart td a:visited {
    color: #805932;
}
.uv_chart_wrap table.uv_chart td a.btn { 
    display: block;
    background-color: #d15e14;
    border: #d15e14 solid 2px;
    border-radius: 45px;
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 500;
    margin: auto;
    padding: 0.5rem;
}
.uv_chart_wrap .notes {
    width: 100%;
    min-width: 680px;
    font-size: 0.6rem !important;
    font-weight: 400;
    text-align: left;
}
@media screen and (max-width: 679px) {
    .type_sp {
        display: block;
    }
    .uv_chart_wrap {
        max-width: none;
        overflow-x: scroll;
    }
    .chart_title {
        font-size: 1.2rem !important;
        font-weight: bold;
    }    
    .uv_chart_wrap table.uv_chart {
        min-width: 750px;
        margin: 5rem auto 2rem;
    }
    .uv_chart_wrap table.uv_chart tr:nth-child(2) td {
        text-align: center;
    }    
    .uv_chart_wrap table.uv_chart tr:nth-child(2) td img {
        width: 85%;
        max-width: 130px;
        margin: auto;
    }      
    .uv_chart_wrap table.uv_chart tr:nth-child(3) td {
        color: #805932;
        text-align: left;
    }
    .uv_chart_wrap table.uv_chart tr:nth-child(3) td br {
        display: none;
    }    
}