@charset "UTF-8";

@media all and (max-width:280px){
        
    .information-area{width: 95%;margin: 0 auto 80px auto}

    .responsibility{width: 100%;margin: 20px 0 50px 0;border-top: 2px solid #3d4c5f;border-bottom: 1px solid #ccc}

    table{overflow: hidden}
    thead{float: left;width: 38%}
    tbody{float: right;width: 62%}
    thead tr{padding: 10px 0;text-align: center;background: #f3f4f6}
    thead th{padding: 10px 0;width: 100%;display: inline-block;font-size: 12px}
    tbody tr{text-align: center}
    tbody td{padding: 10px 0;width: 100%;display: inline-block;font-size: 12px}
    tbody td span{width: 100%}

}
@media all and (min-width:280px) and (max-width:479px){

    .information-area{width: 95%;margin: 0 auto 80px auto}

    .responsibility{width: 100%;margin: 20px 0 50px 0;border-top: 2px solid #3d4c5f;border-bottom: 1px solid #ccc}

    table{overflow: hidden}
    thead{float: left;width: 40%}
    tbody{float: right;width: 58%}
    thead tr{padding: 10px 0;text-align: center;background: #f3f4f6}
    thead th{padding: 10px 0;width: 100%;display: inline-block;font-size: 12px}
    tbody tr{text-align: center}
    tbody td{padding: 10px 0;width: 100%;display: inline-block;font-size: 12px}

}
@media all and (min-width:480px) and (max-width:767px){

    .information-area{width: 95%;margin: 0 auto 80px auto}

    .responsibility{width: 100%;margin: 20px 0 50px 0;border-top: 2px solid #3d4c5f;border-bottom: 1px solid #ccc}

    table{overflow: hidden}
    thead{float: left;width: 40%}
    tbody{float: right;width: 60%}
    thead tr{padding: 10px 0;text-align: center;background: #f3f4f6;}
    thead th{padding: 10px 0;width: 100%;display: inline-block}
    tbody tr{text-align: center}
    tbody td{padding: 10px 0;width: 100%;display: inline-block}

}
@media all and (min-width:768px) and (max-width:910px){

    .information-area{width: 90%;margin: 0 auto 80px auto}

    .responsibility{width: 100%;margin: 20px 0 50px 0;border-top: 2px solid #3d4c5f;border-bottom: 1px solid #ccc}
    table{overflow: hidden}
    thead{float: left;width: 30%}
    tbody{float: right;width: 70%}
    thead tr{padding: 10px 0;text-align: center;background: #f3f4f6;}
    thead th{padding: 10px 0;width: 100%;display: inline-block}
    tbody tr{text-align: center}
    tbody td{padding: 10px 0;width: 100%;display: inline-block}

}
@media all and (min-width:911px) and (max-width:1279px){

    .information-area{width: 100%;margin: 0 auto 50px auto}
    .information-area dd{padding: 0 20px}

    .responsibility{width: 100%;margin: 20px 0 50px 0;border-top: 2px solid #3d4c5f;border-bottom: 1px solid #ccc}
    thead tr{padding: 10px 0;text-align: center;background: #f3f4f6}
    thead th{padding: 10px 0}
    tbody tr{text-align: center}
    tbody td{padding: 10px 0;font-size: 12px}

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

    .information-area{width: 100%;margin: 0 auto}
    .information-area dd{padding: 0 20px}

    .responsibility{width: 100%;margin: 20px 0 50px 0;border-top: 2px solid #3d4c5f;border-bottom: 1px solid #ccc}
    thead tr{padding: 10px 0;text-align: center;background: #f3f4f6}
    thead th{padding: 10px 0}
    tbody tr{text-align: center}
    tbody td{padding: 10px 0}

}

.information-area p{border:1px solid #ccc;padding: 20px 25px;font-size: 16px;letter-spacing: -.065em;margin: 0 0 10px 0}

.information-area dt{color: #3d4c5f;font-weight: 700;font-size: 18px;letter-spacing: -0.4px;margin: 20px 0 10px 0}
.information-area dd{font-size: 16px;letter-spacing: -0.4px}