:root {
    --sub-visual-padding-top: var(--clamp-40px-w640);
    --sub-visual-padding-base-size: clamp(18px, 4vw, 50px);
    --sub-visual-font-base-size: clamp(24px, 4vw, 52px);
}
.sub-visual {
    margin-top: var(--header-state-sub-height); 
    padding-top: var(--sub-visual-padding-top);

    & .sub-visual-inner {
        display: flex; 
        align-items: flex-end; 
        justify-content: space-between;
        max-width: 1330px;
        margin: 0 auto;

        & .sub-h2-tit {
            display: flex; 
            align-items: baseline;

            & h2 {
                font-size: var(--sub-visual-font-base-size);
                line-height: 1;
            }
            & em {
                position: relative;
                margin-left: var(--clamp-25px-w640); 
                font-size: clamp(16px, 4vw, 18px);
                color: #b1b1b1; 
                line-height: 1;

                &::before {
                    position: absolute;
                    top: 50%;
                    left: -20%; 
                    width: 2px; 
                    height: 15px; 
                    background: #b1b1b1; 
                    transform: translateY(-50%);
                    content: ''; 
                }
            }
        }
    }
}

.sub-nav-tit {
    margin-top: var(--sub-visual-padding-base-size); 
    padding-block: 
        calc(var(--sub-visual-padding-base-size) * 3.5) 
        calc(var(--sub-visual-padding-base-size)* 1.4)
    ; 
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat; 
    color: #fff;

    & .sub-nav-tit-left {
        & .sub-nav-tit-location {
            display: flex; 
            align-items: center; 
            font-size: var(--font-size-default);
            color: #fff;
    
            & i {
                background: url('/img/main/icon-arrow.webp'); 
                width: 5px; 
                height: 8px; 
                margin: 0 var(--clamp-15px-w640);
            }
        }
        & h3 {
            margin-top: var(--clamp-30px-w1000); 
            font-size: calc(var(--sub-visual-font-base-size) * 0.808); 
            color: #fff;
        }
    }

    & .sub-nav {
        display: flex; 
        gap: clamp(15px, 3vw, 30px);
        font-size: var(--font-size-default);
    
        & a {
            font-weight: 700; 
            color: #737271;
    
            &.on {color: #fff;}
        }
    }
}

@media (max-width: 1420px) {
    .sub-nav-tit {background-position: center;}
}
@media screen and (max-width: 1330px) {
    .sub-visual-inner {padding: 0 var(--header-padding-base);}
}
@media (max-width: 640px) {
    .sub-nav-tit .sub-visual-inner {
        flex-direction: column;
        align-items: baseline; 
        gap: 40px;
    }
    .sub-nav {font-size: var(--font-size-mid);}
    .sub-nav-tit .sub-visual-inner,
    .sub-nav-tit {background-position-x: 60%;}
    .sub-nav-tit-location {font-size: var(--font-size-sm);}
    .sub-nav-tit h2 {font-size: var(--font-size-lg-m);}
    .sub-h2-tit em {
        font-size: var(--font-size-mid);
        transform: translateY(-1px);
    }
    .sub-h2-tit em:before {
        width: 1px;
        height: 12px;
    }
}