@charset "UTF-8";

/*------------ table style set ------------*/
.hpb-cnt-tb1 {
    background-color: #333333;
    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #333333;
    border-right-color: #333333;
    border-bottom-color: #333333;
    border-left-color: #333333;
}

.hpb-cnt-tb2 {
    background-color: #333333;
    border: 1px solid #333333;
}

.hpb-cnt-tb3 {
    background-color: #333333;
    border: 0px solid #333333;
    margin: 20px auto;
}

.hpb-cnt-tb-th1 {
    background-color: #BBBBBB;
    font-size: 0.8em;
    color: #333333;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #333333;
    border-right-color: #333333;
    border-bottom-color: #333333;
    border-left-color: #333333;
}

.hpb-cnt-tb-th2 {
    background-color: #CCCCCC;
    font-size: 0.8em;
    color: #333333;
    border: 0px solid #333333;
}

.hpb-cnt-tb-cell1 {
    background-color: #EEEEEE;
    font-size: 0.8em;
    color: #333333;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #333333;
    border-right-color: #333333;
    border-bottom-color: #333333;
    border-left-color: #333333;
}

.hpb-cnt-tb-cell2 {
    background-color: #FFFFFF;
    font-size: 0.8em;
    color: #333333;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #333333;
    border-right-color: #333333;
    border-bottom-color: #333333;
    border-left-color: #333333;
}

.hpb-cnt-tb-cell3 {
    background-color: #EEEEEE;
    font-size: 0.8em;
    color: #333333;
    border: 0px solid #333333;
}

.hpb-cnt-tb-cell4 {
    background-color: #FFFFFF;
    font-size: 0.8em;
    color: #333333;
    border: 0px solid #333333;
}

.hpb-cnt-tb-cell5 {
    background-color: #FFFFFF;
    font-size: 1.0em;
    color: #333333;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    padding: 20px;
}

@media screen and (max-width: 640px) {
    .last td:last-child {
        border-bottom: solid 1px #ccc;
        width: 100%;
    }

    .hpb-cnt-tb3 {
        width: 80%;
    }

    .hpb-cnt-tb3 th,
    .hpb-cnt-tb3 td {
        border-bottom: none;
        display: block;
        width: 100%;
    }
}

.hpb-cnt-th-cell5 {
    padding: 20px;
}

/*** table ***/

.event-table {
    width: 100%;
    border-collapse: collapse;
    
}

.event-table tr {
    border-bottom: solid 2px white;
}

.event-table tr:last-child {
    border-bottom: none;
}

.event-table th {
    position: relative;
    text-align: center;
    width: 30%;
    background-color: #52c2d0;
    color: white;
    vertical-align: middle;
    padding: 30px;


}

.event-table th:after {
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    top: calc(50% - 10px);
    right: -10px;
    border-left: 10px solid #52c2d0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.event-table td {
    text-align: left;
    width: 70%;
    text-align: left;
    background-color: whitesmoke;
    padding: 30px;
    line-height: 1.5;
}