:root{
    --main: #fefefe;
    --sub: #264a9e;
    --sub2: #00a0e9;
    --sub3: #cfcfcf;
    --text: #2d2726;
}
.section_1_image{
    background: url(/assets/img/v_18.webp);
    background-size: cover;
    background-position: center;
}
.section_content_container{
    &.type_1{
        align-items: flex-start;
        gap: 40px;
    }
}
.section_content_column{
    flex: 1;
    align-items: flex-start;
    &.type_1{
        max-width: 400px;
        gap: 10px;
    }
    &.type_2{
        border-right: 1px solid var(--sub3);
    }
}
.content_column_title_box{
    align-items: flex-start;
}
.section_content_row{
    padding: 40px 20px 40px 0;
    align-items: flex-start;
    gap: 40px;
    border-bottom: 1px solid var(--sub3);
}
.section_content_box{
    align-items: flex-start;
    &.type_1{
        padding: 5px 0;
    }
    &.type_2{
        width: 150px;
        padding: 5px 15px;
        align-items: center;
        border: 1px solid var(--sub);
    }
    &.type_3{
        flex: 1;
        padding: 5px 0;
    }
}
.section_text{
    &.type_1{
        font-size: 1.6rem;
        &.text_2{
            color: var(--sub);
        }
        &.text_3{
            font-weight: bold;
        }
    }
    &.type_2{
        font-size: 1.2rem;
        padding-left: 15px;
        font-weight: bold;
        color: var(--sub2);
        &::before,&::after{
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: var(--sub2);
        }
        &::before{
            width: 2px;
            height: 1rem;
        }
        &::after{
            width: 10px;
            height: 2px;
        }
    }
    &.type_3{
        font-size: 2.4rem;
    }
}
.column_asset{
    &.type_1{
        width: 100px;
        height: 1px;
        background: var(--sub3);
        margin: 10px 0;
    }
}

@media all and (max-width: 1280px){
    .section_content_column{
        &.type_1{
            max-width: 300px;
        }
    }
}
@media all and (max-width: 960px){
    .section_content_column{
        &.type_1{
            max-width: 200px;
        }
    }
    .section_content_box{
        &.type_2{
            width: 120px;
        }
    }
}
@media all and (max-width: 768px){
    .section_content_container{
        &.type_1{
            flex-direction: column;
            gap: 20px;
        }
    }
    .section_content_column{
        width: 100%;
    }
    .section_text{
        &.type_1{
            font-size: 1.4rem;
            &.text_2{
                font-size: 1.2rem;
            }
        }
    }
    .section_content_row{
        gap: 20px;
        padding: 30px 20px 30px 0;
        &:first-of-type{
            border-top: 1px solid var(--sub3);
        }
    }
    .section_content_box{
        &.type_2{
            width: 100px;
        }
    }
}
@media all and (max-width: 450px){
    .section_content_row{
        flex-wrap: wrap;
        gap: 10px;
        padding: 20px 20px 20px 0;
    }
    .section_content_box{
        &.type_3{
            flex-basis: 300px;
        }
    }
}

@media (any-hover: hover){
    .section_text{
        transition: color ease 0.25s;
    }
    .section_content_box{
        &.type_2{
            transition: background ease 0.25s;
            transition-delay: 0.1s;
        }
    }
    .section_content_row:hover .section_text{
        &.type_1{
            &.text_1,&.text_3{
                color: var(--sub);
            }
            &.text_2{
                color: var(--main);
            }
        }
    }
    .section_content_row:hover .section_content_box{
        &.type_2{
            background: var(--sub);
        }
    }
    .column_anchor:hover .section_text{
        color: var(--sub);
    }
}