@charset "utf-8";

.el_table_type02.--arrow table {
    border-collapse: separate;
    border-spacing: 0 40px; /* 行間に20pxの余白を作成 */
    border: none; /* 外枠を削除 */
    margin-top: -40px;
}

.el_table_type02.--arrow table tr {
    border: 2px solid #e7d9d3; /* 行全体に境界線 */
    border-left: none; /* 左の縦線を削除 */
    border-right: none; /* 右の縦線を削除 */
}

.el_table_type02.--arrow table tr:first-child {
    border-top: 2px solid #e7d9d3; /* 最初の行も境界線を表示 */
}

.el_table_type02.--arrow table tr th,
.el_table_type02.--arrow table tr td {
    border-left: none; /* th, tdの左の縦線を削除 */
    border-right: none; /* th, tdの右の縦線を削除 */
}

.el_table_type02.--arrow table tr th{
    border-bottom: 1px solid #e7d9d3;
    border-top: 1px solid #e7d9d3;
    border-left: 2px solid #e7d9d3;
}

.el_table_type02.--arrow table tr td{
    border-bottom: 1px solid #e7d9d3;
    border-top: 1px solid #e7d9d3;
    border-right: 2px solid #e7d9d3;
}

.el_table_type02.--arrow table tr:not(:last-child) {
    position: relative;
}

.el_table_type02.--arrow table tr::before {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background-color: #524631;
}

.el_table_type02.--arrow table tr::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 15px;
    height: 15px;
    border-right: 2px solid #524631;
    border-bottom: 2px solid #524631;
}

.el_table_type02.--arrow table tr:last-child::before {
    opacity: 0;
}

.el_table_type02.--arrow table tr:last-child::after {
    opacity: 0;
}

@media (max-width: 768px) {
    .el_table_type02.--arrow table tr th{
        border: 1px solid #524631;
        padding: 10px;
    }
    
    .el_table_type02.--arrow table tr td{
        border: 1px solid #524631;
        padding: 10px;
    }
}