.bg-main {
    position: relative;
    width: 100%;
}

.bg-main .main-ttl {
    max-width: 340px;
    margin-right: calc(100% - 372px);
    position: absolute;
    top: calc(50% - 20px);
    left: 32px;
    transform: translateY(-50%);
    font-family: Dosis;
    font-size: clamp(28px, 3.125vw + 4px, 36px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 2.88px;
    color: #fff;
    z-index: 1;
}

.bg-main .base {
    width: 100%;
    height: auto;
    display: block;
}

.bg-main .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:979px) {
    .bg-main .main-ttl {
        max-width: 320px;
        margin-right: calc(100% - 340px);
        top: calc(50% - 24%);
        left: 20px;
    }
}